.how-i-work {
  position: relative;
  overflow: hidden;
  padding: clamp(4.5rem, 6.7vw, 6.25rem) 0 clamp(3.3rem, 4.6vw, 4.8rem);
  color: #19211e;
  background: #fbf8f2;
}

.how-i-work__container {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1.39fr) minmax(0, 1fr);
  gap: clamp(1.25rem, 2vw, 2rem);
  max-width: 92rem;
  align-items: stretch;
}

.how-i-work__content { min-width: 0; }
.how-i-work__intro { margin: 0 0 2.15rem; text-align: center; }
.how-i-work h2 {
  margin: 0 0 .7rem;
  font-size: clamp(3.55rem, 5vw, 5.4rem);
  font-weight: 500;
  line-height: .95;
  letter-spacing: -.055em;
}
.how-i-work__intro p {
  font-family: var(--pb-font-heading);
  font-size: clamp(1.15rem, 1.55vw, 1.55rem);
  line-height: 1.09;
}
.how-i-work__intro .how-i-work__highlight {
  margin: .12rem 0;
  color: #97703e;
  font-size: clamp(1.27rem, 1.75vw, 1.72rem);
  font-weight: 600;
}
.how-i-work__intro p:last-child { font-size: clamp(1.02rem, 1.31vw, 1.32rem); }

.how-i-work__steps { display: grid; gap: .9rem; }
.how-i-work__step {
  --step-number-width: clamp(5.5rem, 9vw, 8rem);
  --step-gap: 1.25rem;
  padding: .45rem 1.45rem;
  border: 1px solid #e4d6c3;
  border-radius: .72rem;
  background: rgba(255, 253, 248, .69);
  box-shadow: 0 .45rem 1.25rem rgba(116, 87, 52, .035);
}
.how-i-work__step summary {
  display: grid;
  grid-template-columns: var(--step-number-width) minmax(0, 1fr) 1.25rem;
  gap: var(--step-gap);
  min-height: 4.9rem;
  align-items: center;
  list-style: none;
  cursor: pointer;
}
.how-i-work__step summary::-webkit-details-marker { display: none; }
.how-i-work__step summary:focus-visible { border-radius: .2rem; }
.how-i-work__number {
  display: flex;
  height: 3.8rem;
  align-items: center;
  border-right: 1px solid #ad8754;
  color: #9d7544;
  font: 400 clamp(3.7rem, 5.2vw, 5.6rem)/.8 var(--pb-font-heading);
  letter-spacing: -.07em;
}
.how-i-work__step-title {
  font-size: clamp(1.55rem, 2.15vw, 2.14rem);
  font-family: var(--pb-font-heading);
  line-height: 1.05;
  letter-spacing: -.035em;
}
.how-i-work__step-copy { margin: -.1rem 2.5rem .7rem calc(var(--step-number-width) + var(--step-gap)); }
.how-i-work__step p {
  font-family: var(--pb-font-heading);
  font-size: clamp(1rem, 1.35vw, 1.36rem);
  line-height: 1.14;
}
.how-i-work__step strong { font-weight: 600; }
.how-i-work__chevron {
  width: 1.05rem;
  height: 1.05rem;
  transform: translateY(-.25rem) rotate(45deg);
  border-right: 1.6px solid #966d38;
  border-bottom: 1.6px solid #966d38;
  transition: transform .2s ease;
}
.how-i-work__step[open] .how-i-work__chevron { transform: translateY(.25rem) rotate(225deg); }
.how-i-work__extras { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; margin-top: 1rem; }
.how-i-work__extra {
  min-width: 0;
  padding: 1.3rem 1.45rem 1.35rem;
  border-radius: .72rem;
  background: rgba(239, 230, 219, .58);
}
.how-i-work__extra::before { display: block; width: 3.1rem; height: 1px; margin-bottom: 1rem; background: #a87b41; content: ""; }
.how-i-work__extra h3 { margin: 0 0 .85rem; font-size: clamp(1.6rem, 2.15vw, 2.05rem); line-height: 1; }
.how-i-work__extra p { font: 400 clamp(1.01rem, 1.24vw, 1.23rem)/1.14 var(--pb-font-heading); }
.how-i-work__extra p + p { margin-top: .85rem; }
.how-i-work__extra strong { font-weight: 600; }

.how-i-work__photo {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  border-radius: .65rem;
  background: #d8cfc1;
  box-shadow: 0 1rem 2.25rem rgba(65, 55, 39, .11);
}
.how-i-work__photo img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center; }

@media (max-width: 1080px) {
  .how-i-work__container { grid-template-columns: minmax(0, 1.2fr) minmax(0, .85fr); }
  .how-i-work__step { --step-number-width: 5.4rem; --step-gap: .85rem; padding-inline: .9rem; }
  .how-i-work__step summary { grid-template-columns: var(--step-number-width) minmax(0, 1fr) 1rem; }
  .how-i-work__number { font-size: 4rem; }
  .how-i-work__extra { padding-inline: 1.05rem; }
}

@media (max-width: 800px) {
  .how-i-work__container { grid-template-columns: 1fr; max-width: 42rem; }
  .how-i-work__photo { min-height: 0; aspect-ratio: 2 / 3; }
  .how-i-work__photo img { position: static; }
}

@media (max-width: 530px) {
  .how-i-work { padding: 3.6rem 0 3rem; }
  .how-i-work__intro { margin-bottom: 1.6rem; }
  .how-i-work h2 { font-size: clamp(3.15rem, 13vw, 4.3rem); }
  .how-i-work__desktop-break { display: none; }
  .how-i-work__intro p { font-size: 1.18rem; line-height: 1.18; }
  .how-i-work__intro .how-i-work__highlight { margin: .35rem 0; font-size: 1.35rem; }
  .how-i-work__intro p:last-child { font-size: 1.09rem; }
  .how-i-work__step { --step-number-width: 3.65rem; --step-gap: .65rem; padding: .55rem .85rem; }
  .how-i-work__step summary { min-height: 4.3rem; grid-template-columns: var(--step-number-width) minmax(0, 1fr) 1rem; }
  .how-i-work__number { height: 3.2rem; font-size: 3.1rem; }
  .how-i-work__step-title { font-size: 1.55rem; }
  .how-i-work__step-copy { margin-right: 0; }
  .how-i-work__step p { font-size: 1.07rem; }
  .how-i-work__chevron { width: .8rem; height: .8rem; }
  .how-i-work__extras { grid-template-columns: 1fr; }
  .how-i-work__extra h3 { font-size: 1.85rem; }
  .how-i-work__extra p { font-size: 1.14rem; }
}