/* ========================
   DESIGN PROCESS
   ======================== */
.section-process {
  position: relative;
  min-height: 1430px;
  background-color: var(--color-dark-maroon);
}

/* --- Header labels & separator --- */
.section-process__label {
  position: absolute;
  font-family: var(--font-serif);
  font-size: 25px;
  line-height: var(--leading-relaxed);
  color: var(--color-cream);
  letter-spacing: var(--tracking-tight);
  white-space: nowrap;
}

.section-process__label--left {
  left: 121px;
  top: 152px;
}

.section-process__label--right {
  left: 1736px;
  top: 149px;
}

.section-process__header-sep {
  position: absolute;
  left: 325px;
  top: 161px;
  width: 558px;
  height: 1px;
  background-color: var(--color-cream);
}

/* --- Title --- */
.section-process__title {
  position: absolute;
  left: 976px;
  top: 100px;
  font-family: var(--font-serif);
  font-size: var(--text-9xl);
  line-height: var(--leading-9xl);
  color: var(--color-cream);
  letter-spacing: var(--tracking-tightest);
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
}

/* --- Thumbnails --- */
.section-process__thumb {
  position: absolute;
  overflow: hidden;
}

.section-process__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.section-process__thumb--1 { left: 121px; top: 261px; width: 326px; height: 296px; }
.section-process__thumb--2 { left: 467px; top: 259px; width: 326px; height: 298px; }
.section-process__thumb--3 { left: 813px; top: 259px; width: 326px; height: 298px; }
.section-process__thumb--4 { left: 1160px; top: 259px; width: 326px; height: 298px; }
.section-process__thumb--5 { left: 1506px; top: 259px; width: 326px; height: 298px; }

/* --- Steps container (flow layout for accordion) --- */
.section-process__steps {
  position: absolute;
  left: 0;
  top: 641px;
  width: 100%;
  padding-bottom: 150px;
}

/* --- Individual step --- */
.section-process__step {
  position: relative;
  border-bottom: 1px solid var(--color-cream);
  margin: 0 121px;
  width: 1679px;
}

.section-process__step-row {
  position: relative;
  display: flex;
  align-items: center;
  padding: 39px 0 50px;
  cursor: pointer;
}

.section-process__step:first-child .section-process__step-row {
  padding-top: 0;
}

/* --- Step number --- */
.section-process__num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: var(--leading-relaxed);
  color: var(--color-cream);
  letter-spacing: var(--tracking-tight);
  font-weight: 700;
}

.section-process__step:not(:first-child) .section-process__num {
  top: 39px;
}

/* --- Step title --- */
.section-process__step-title {
  margin-left: 52px;
  font-family: var(--font-serif);
  font-size: var(--text-6xl);
  line-height: var(--leading-6xl);
  color: var(--color-cream);
  letter-spacing: var(--tracking-tighter);
  font-weight: 400;
  font-style: normal;
  white-space: nowrap;
}

/* --- Step button --- */
.section-process__step-btn {
  position: absolute;
  right: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 224px;
  height: 47px;
  background-color: var(--color-cream);
  border: 1px solid var(--color-black);
  color: var(--color-black);
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  cursor: pointer;
  transition: opacity 0.2s;
}

.section-process__step-btn:hover {
  opacity: 0.85;
}

/* --- Step details (accordion) --- */
.section-process__step-details {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.5s ease, opacity 0.3s ease;
  padding-left: 52px;
}

.section-process__step-details-inner {
  padding: 20px 0 40px;
  width: 1611px;
  font-family: var(--font-sans);
  font-size: 24px;
  line-height: 26px;
  color: var(--color-cream);
}

.section-process__step-details-inner p + p {
  margin-top: 26px;
}

/* --- Open state --- */
.section-process__step.is-open .section-process__step-details {
  max-height: 500px;
  opacity: 1;
}