.proces-page {
  overflow: clip;
}

.proces-page .section {
  position: relative;
}

.proces-page .eyebrow span,
.proces-page .label {
  color: var(--color-paprika);
}

.proces-page .surface--dark .eyebrow span,
.proces-page .surface--green .eyebrow span {
  color: var(--color-pistachio);
}

.proces-page .proces-hero {
  padding-block-start: clamp(var(--space-8), 10vw, var(--space-11));
  padding-block-end: var(--space-9);
}

.proces-hero__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: var(--space-5);
  row-gap: var(--space-7);
}

.proces-hero__copy {
  grid-column: 2 / span 6;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-5);
}

.proces-hero__copy > * { min-width: 0; margin: 0; }
.proces-hero__copy h1 { max-width: 53.75rem; }
.proces-hero__lead { max-width: 35.625rem; font-size: var(--text-lg); line-height: var(--leading-body); }
.proces-hero__copytext { max-width: 33rem; color: var(--color-text-muted); }

.proces-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-4);
  min-width: 0;
}

.proces-hero__actions > * { min-width: 0; }
.proces-hero__anchor { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.proces-hero__anchor span { color: var(--color-paprika); font-size: 1.2em; }

.proces-hero__media {
  grid-column: 8 / span 5;
  grid-row: 1;
  width: 100%;
  min-width: 0;
  aspect-ratio: 4 / 5;
  margin: 0;
}

.proces-hero__media img { object-position: center center; }
.proces-hero__media figcaption { position: absolute; z-index: 1; right: var(--space-3); bottom: var(--space-3); max-width: 12rem; margin: 0; color: var(--color-stone); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-label); text-align: right; text-transform: uppercase; }

.proces-hero__stage {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-4);
  min-width: 0;
  padding-top: var(--space-4);
  border-top: 1px solid var(--color-border-subtle);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
}

.proces-hero__stage > * { min-width: 0; }

.proces-moves__intro {
  width: 50%;
  max-width: 38.75rem;
  margin-left: calc((100% + var(--space-5)) / 12);
}

.proces-moves__intro p:last-child { max-width: 35rem; }

.proces-moves__list {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-5);
  margin: var(--space-8) 0 0;
  padding: 0;
  list-style: none;
  position: relative;
}

.proces-moves__list::before {
  content: "";
  position: absolute;
  top: 1.2rem;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--color-border);
}

.proces-moves__item { min-width: 0; }
.proces-moves__item a { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; gap: var(--space-4); text-decoration: none; }
.proces-moves__item h3, .proces-moves__item p { margin: 0; }
.proces-moves__item h3 { font-size: clamp(1.5rem, 2.3vw, 2.2rem); }
.proces-moves__item p { max-width: 16.25rem; color: var(--color-text-muted); font-size: 0.94rem; }
.proces-moves__number { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; border: 1px solid var(--color-aubergine); background: var(--color-stone); font-family: var(--font-heading); font-size: var(--text-xl); font-weight: 700; }

.proces-brief { background: var(--color-stone-clean); }
.proces-brief::after { content: ""; position: absolute; top: var(--space-9); right: 8%; width: 10rem; height: 10rem; border-top: 1px solid var(--color-border); border-right: 1px solid var(--color-border); pointer-events: none; }
.proces-brief__intro { width: 50%; max-width: 40rem; margin-left: calc((100% + var(--space-5)) / 12); }
.proces-brief__intro p:last-child { max-width: 39rem; font-size: var(--text-lg); }

.proces-brief__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  margin-top: var(--space-8);
}

.proces-brief__card { min-width: 0; padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.proces-brief__card:nth-child(1) { grid-column: 3 / span 4; }
.proces-brief__card:nth-child(2) { grid-column: 7 / span 4; }
.proces-brief__card:nth-child(3) { grid-column: 5 / span 4; }
.proces-brief__card > * { max-width: 21.25rem; }
.proces-brief__card h3 { margin-bottom: var(--space-3); font-size: clamp(1.5rem, 2.4vw, 2.3rem); }
.proces-brief__card p:last-child { margin-bottom: 0; }

.proces-design__grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  gap: var(--space-5);
  align-items: start;
}

.proces-design__copy { grid-column: 2 / span 5; min-width: 0; }
.proces-design__copy > h2 { max-width: 37.5rem; }
.proces-design__media { grid-column: 8 / span 5; min-width: 0; width: 100%; aspect-ratio: 4 / 3; margin: var(--space-8) 0 0; }
.proces-design__media img { object-position: 35% 55%; }

.proces-design__principles { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.proces-design__principles > article { display: grid; grid-template-columns: 2.5rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.proces-design__principles > article > * { min-width: 0; }
.proces-design__principles span { color: var(--color-paprika); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); }
.proces-design__principles h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.proces-design__principles p { max-width: 28rem; margin-bottom: 0; }

.proces-production { color: var(--color-stone); }
.proces-production__intro { width: 50%; max-width: 35rem; margin-left: calc((100% + var(--space-5)) / 12); }
.proces-production__intro p:last-child { max-width: 35rem; color: rgba(232,227,216,.76); font-size: var(--text-lg); }

.proces-production__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.proces-production__item { min-width: 0; padding-top: var(--space-5); border-top: 1px solid rgba(232,227,216,.3); }
.proces-production__item > * { min-width: 0; }
.proces-production__item > span { display: block; margin-bottom: var(--space-5); color: var(--color-pistachio); font-size: var(--text-lg); font-weight: 700; letter-spacing: var(--tracking-label); }
.proces-production__item h3 { margin-bottom: var(--space-3); font-size: clamp(1.45rem, 2.2vw, 2.1rem); }
.proces-production__item p { max-width: 16.875rem; margin-bottom: 0; color: rgba(232,227,216,.76); font-size: .94rem; }

.proces-casino { overflow: hidden; }
.proces-casino__ticker { display: flex; width: max-content; min-width: 100%; overflow: hidden; border-block: 1px solid rgba(232,227,216,.24); color: rgba(232,227,216,.86); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); line-height: 1; white-space: nowrap; }
.proces-casino__ticker span { flex: 0 0 auto; padding: var(--space-4) 0; animation: proces-ticker 36s linear infinite; }
.proces-casino__ticker.is-paused span { animation-play-state: paused; }
@keyframes proces-ticker { from { transform: translateX(0); } to { transform: translateX(-100%); } }

.proces-casino__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); padding-top: clamp(var(--space-8), 10vw, var(--space-11)); padding-bottom: clamp(var(--space-8), 10vw, var(--space-11)); }
.proces-casino__intro { grid-column: 2 / span 6; min-width: 0; }
.proces-casino__intro h2 { max-width: 38.75rem; }
.proces-casino__intro p:last-child { max-width: 38.75rem; margin-bottom: 0; font-size: var(--text-lg); }
.proces-casino__media { grid-column: 1 / span 6; grid-row: 2; width: 100%; min-width: 0; aspect-ratio: 4 / 5; margin: var(--space-3) 0 0; }
.proces-casino__media img { object-position: 50% 45%; }
.proces-casino__zones { grid-column: 8 / span 5; grid-row: 2; display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.proces-casino__zone { min-width: 0; padding-top: var(--space-4); border-top: 1px solid rgba(232,227,216,.3); }
.proces-casino__zone .label { color: var(--color-pistachio); }
.proces-casino__zone h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.proces-casino__zone p:last-child { max-width: 20rem; margin-bottom: 0; color: rgba(232,227,216,.82); }
.proces-casino__zone:last-child { border-top-color: var(--color-paprika); }

.proces-layers__intro { width: 50%; max-width: 42.5rem; margin-left: calc((100% + var(--space-5)) / 12); }
.proces-layers__media { width: 100%; min-width: 0; aspect-ratio: 21 / 9; margin: var(--space-8) 0 0; }
.proces-layers__media img { object-position: center; }
.proces-layers__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-6); }
.proces-layers__grid article { min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.proces-layers__grid article > * { min-width: 0; }
.proces-layers__grid span { display: block; margin-bottom: var(--space-3); color: var(--color-paprika); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); }
.proces-layers__grid h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.proces-layers__grid p { max-width: 18.75rem; margin-bottom: 0; }

.proces-scope__intro { width: 50%; max-width: 37.5rem; margin-left: calc((100% + var(--space-5)) / 12); }
.proces-scope__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); margin-top: var(--space-8); }
.proces-scope__item { min-width: 0; padding: var(--space-5); border-top: 1px solid var(--color-border); background: var(--color-stone-clean); }
.proces-scope__item:nth-child(1) { grid-column: 3 / span 5; }
.proces-scope__item:nth-child(2) { grid-column: 8 / span 5; }
.proces-scope__item:nth-child(3) { grid-column: 4 / span 5; }
.proces-scope__item:nth-child(4) { grid-column: 9 / span 4; }
.proces-scope__item > * { min-width: 0; }
.proces-scope__item > span { display: block; margin-bottom: var(--space-5); color: var(--color-aubergine-muted); font-family: var(--font-heading); font-size: clamp(2.4rem, 4vw, 4.5rem); font-weight: 700; line-height: .85; }
.proces-scope__item h3 { margin-bottom: var(--space-3); font-size: var(--text-xl); }
.proces-scope__item p { max-width: 19.5rem; margin-bottom: 0; }
.proces-scope__item--accent { border-top-color: var(--color-paprika); }
.proces-scope__item--accent > span { color: var(--color-paprika); }

.proces-prep { background: var(--color-stone); }
.proces-prep__layout { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-5); }
.proces-prep__panel { grid-column: 3 / span 6; min-width: 0; padding: clamp(var(--space-5), 4vw, var(--space-7)); background: var(--color-stone-clean); border: 1px solid var(--color-border-subtle); }
.proces-prep__panel > h2 { max-width: 37.5rem; }
.proces-prep__lead { max-width: 33.75rem; font-size: var(--text-lg); }
.proces-prep__list { display: flex; flex-direction: column; gap: var(--space-5); margin: var(--space-7) 0; padding: 0; list-style: none; }
.proces-prep__list li { display: grid; grid-template-columns: 2.625rem minmax(0, 1fr); gap: var(--space-3); min-width: 0; padding-top: var(--space-4); border-top: 1px solid var(--color-border-subtle); }
.proces-prep__list li > * { min-width: 0; }
.proces-prep__list > li > span { color: var(--color-paprika); font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); }
.proces-prep__list h3 { margin-bottom: var(--space-2); font-size: var(--text-xl); }
.proces-prep__list p { max-width: 31rem; margin-bottom: 0; }
.proces-prep__note { max-width: 31rem; margin-bottom: var(--space-5); padding-left: var(--space-4); border-left: 2px solid var(--color-pistachio); color: var(--color-text-muted); }
.proces-prep__link { font-size: var(--text-sm); font-weight: 700; letter-spacing: var(--tracking-label); text-transform: uppercase; }
.proces-prep__link span { color: var(--color-paprika); }
.proces-prep__diagram { grid-column: 10 / span 3; align-self: stretch; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; gap: var(--space-4); min-width: 0; color: var(--color-aubergine-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--tracking-wide); }
.proces-prep__diagram i { display: block; width: 100%; height: 1px; background: var(--color-border); }

.proces-final__content { width: 50%; max-width: 38.75rem; margin-left: calc((100% + var(--space-5)) / 12); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-5); }
.proces-final__content > * { min-width: 0; margin: 0; }
.proces-final__content h2 { max-width: 38.75rem; }
.proces-final__content p { max-width: 31.25rem; color: rgba(232,227,216,.8); font-size: var(--text-lg); }

.proces-reveal { opacity: 1; transform: translateY(0); }
.js .proces-reveal { opacity: 0; transform: translateY(1.25rem); transition: opacity 600ms cubic-bezier(.2,.7,.2,1), transform 600ms cubic-bezier(.2,.7,.2,1); }
.js .proces-reveal.is-visible { opacity: 1; transform: translateY(0); }

@media (max-width: 74.99rem) {
  .proces-hero__copy { grid-column: 1 / span 7; }
  .proces-hero__media { grid-column: 8 / span 5; }
  .proces-design__copy { grid-column: 1 / span 7; }
  .proces-design__media { grid-column: 8 / span 5; }
  .proces-casino__intro { grid-column: 1 / span 7; }
  .proces-casino__zones { grid-column: 8 / span 5; }
}

@media (max-width: 67.49rem) {
  .proces-moves__list, .proces-production__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proces-moves__list::before { display: none; }
  .proces-moves__item, .proces-production__item { border-top: 1px solid var(--color-border); padding-top: var(--space-4); }
  .proces-production__item { border-color: rgba(232,227,216,.3); }
  .proces-brief__card:nth-child(1), .proces-brief__card:nth-child(2), .proces-brief__card:nth-child(3) { grid-column: span 6; }
  .proces-brief__card:nth-child(3) { grid-column: 4 / span 6; }
  .proces-casino__layout { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proces-casino__intro { grid-column: 1 / -1; }
  .proces-casino__media { grid-column: 1; grid-row: 2; }
  .proces-casino__zones { grid-column: 2; grid-row: 2; }
  .proces-layers__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proces-layers__grid article:nth-child(3) { grid-column: 1 / -1; }
  .proces-scope__item:nth-child(1), .proces-scope__item:nth-child(3) { grid-column: 2 / span 5; }
  .proces-scope__item:nth-child(2), .proces-scope__item:nth-child(4) { grid-column: 7 / span 5; }
}

@media (max-width: 61.24rem) {
  .proces-design__grid { grid-template-columns: 1fr; gap: var(--space-7); }
  .proces-design__copy, .proces-design__media { grid-column: 1; }
  .proces-design__media { margin: 0; aspect-ratio: 4 / 3; }
  .proces-brief__intro, .proces-production__intro, .proces-layers__intro, .proces-scope__intro, .proces-final__content { margin-left: 0; }
  .proces-prep__panel { grid-column: 2 / span 8; }
  .proces-prep__diagram { display: none; }
}

@media (max-width: 53.74rem) {
  .proces-hero__grid { grid-template-columns: 1fr; row-gap: var(--space-6); }
  .proces-hero__copy, .proces-hero__media, .proces-hero__stage { grid-column: 1; grid-row: auto; }
  .proces-hero__copy { gap: var(--space-4); }
  .proces-hero__media { margin-top: var(--space-2); }
  .proces-hero__stage { flex-wrap: wrap; }
  .proces-moves__intro, .proces-brief__intro, .proces-production__intro, .proces-layers__intro, .proces-scope__intro, .proces-final__content { width: 100%; max-width: none; }
  .proces-moves__list { margin-top: var(--space-7); }
  .proces-brief__grid { grid-template-columns: 1fr; margin-top: var(--space-7); }
  .proces-brief__card:nth-child(1), .proces-brief__card:nth-child(2), .proces-brief__card:nth-child(3) { grid-column: 1; }
  .proces-casino__layout { grid-template-columns: 1fr; }
  .proces-casino__media, .proces-casino__zones { grid-column: 1; grid-row: auto; margin-top: 0; }
  .proces-casino__zones { gap: var(--space-5); }
  .proces-layers__media { aspect-ratio: 4 / 3; }
  .proces-layers__media img { object-position: 50% 50%; }
  .proces-scope__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .proces-scope__item:nth-child(1), .proces-scope__item:nth-child(2), .proces-scope__item:nth-child(3), .proces-scope__item:nth-child(4) { grid-column: span 1; }
  .proces-prep__panel { grid-column: 1 / -1; }
}

@media (max-width: 48.74rem) {
  .proces-moves__list, .proces-production__grid, .proces-layers__grid, .proces-scope__grid { grid-template-columns: 1fr; }
  .proces-moves__item a { display: grid; grid-template-columns: 3.25rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); }
  .proces-moves__number { grid-row: span 2; }
  .proces-moves__item h3, .proces-moves__item p { grid-column: 2; }
  .proces-moves__item p, .proces-production__item p, .proces-layers__grid p { max-width: none; }
  .proces-production__item { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: var(--space-3); row-gap: var(--space-2); }
  .proces-production__item > span { grid-row: span 2; margin: 0; }
  .proces-production__item h3, .proces-production__item p { grid-column: 2; }
  .proces-layers__grid article:nth-child(3) { grid-column: 1; }
  .proces-scope__item:nth-child(1), .proces-scope__item:nth-child(2), .proces-scope__item:nth-child(3), .proces-scope__item:nth-child(4) { grid-column: 1; }
  .proces-scope__item { padding-inline: 0; background: transparent; }
  .proces-final__content { gap: var(--space-4); }
}

@media (max-width: 39.99rem) {
  .proces-page .section { padding-block: clamp(var(--space-8), 16vw, var(--space-9)); }
  .proces-hero__lead, .proces-brief__intro p:last-child, .proces-production__intro p:last-child, .proces-casino__intro p:last-child, .proces-prep__lead, .proces-final__content p { font-size: var(--text-md); }
  .proces-hero__actions { width: 100%; }
  .proces-hero__actions .button { width: 100%; }
  .proces-hero__stage { font-size: .625rem; }
  .proces-design__principles > article { grid-template-columns: 2rem minmax(0, 1fr); }
  .proces-prep__panel { padding: var(--space-5); }
  .proces-final__content .button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .proces-casino__ticker span { animation: none; }
  .js .proces-reveal { opacity: 1; transform: none; transition: none; }
}
