/* Compact editorial cards; on desktop each next card naturally slides over the last. */
.x-site .x-process {
  padding-block: clamp(66px, 7vw, 94px);
  background: #f0f0ed;
  border-block: 1px solid #e3e3de;
}
.x-process__head {
  max-width: 900px;
  margin: 0 auto clamp(26px, 3.5vw, 40px);
  text-align: center;
}
.x-process__head .x-eyebrow {
  display: block;
  margin: 0 0 13px;
  color: #858580;
  font: 500 10px/1.4 var(--x-mono);
  letter-spacing: .16em;
  text-transform: uppercase;
}
.x-process__head h2 {
  margin: 0;
  color: #252626;
  font: 450 clamp(32px, 4vw, 52px)/1.13 var(--studio-font);
  letter-spacing: -.055em;
  text-wrap: balance;
}
.x-process__head h2 span { color: #858584; }
.x-process__stack {
  display: grid;
  gap: 20px;
  max-width: 820px;
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
.x-process__step { position: relative; min-width: 0; z-index: var(--step); }
.x-process__card {
  display: grid;
  grid-template-columns: minmax(0, 31%) minmax(0, 1fr);
  min-height: 274px;
  padding: 5px;
  border: 1px solid #fff;
  border-radius: 18px;
  background: linear-gradient(125deg, #fdfdfb, #f4f4f1);
  box-shadow: 0 0 0 1px #d6d6d0, inset 0 1px 0 #fff, 0 12px 24px -24px rgba(28,29,26,.28);
  overflow: hidden;
}
.x-process__visual {
  position: relative;
  min-width: 0;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  border-radius: 13px;
  background: #e8e8e4;
}
.x-process__visual img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  image-rendering: pixelated;
}
.x-process__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 17px clamp(20px, 2.4vw, 30px);
}
.x-process__num {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 15px;
  color: #a45d31;
  font: 500 10px/1.4 var(--x-mono);
  letter-spacing: .025em;
}
.x-process__num span { color: #8a8a85; font-weight: 400; text-align: right; }
.x-process__copy h3 {
  margin: 0;
  color: #2a2b2a;
  font: 450 clamp(25px, 2.6vw, 31px)/1.14 var(--studio-font);
  letter-spacing: -.045em;
  text-wrap: balance;
}
.x-process__lead {
  max-width: 55ch;
  margin: 7px 0 0;
  color: #70716d;
  font: 400 12.5px/1.5 var(--studio-font);
}
.x-process__points {
  display: grid;
  gap: 3px;
  margin: 13px 0 0;
  padding: 0;
  list-style: none;
}
.x-process__points li {
  display: grid;
  grid-template-columns: 13px minmax(0, 1fr);
  align-items: start;
  gap: 7px;
  padding: 3px 0;
  color: #555650;
  font: 400 11px/1.35 var(--studio-font);
}
.x-process__points li::before {
  content: "✦";
  color: #fe6b00;
  font: 500 12px/1.1 var(--studio-font);
}
.x-process__end {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  max-width: 820px;
  margin: 25px auto 0;
  padding-top: 18px;
  border-top: 1px solid #d8d8d2;
}
.x-process__end p {
  margin: 0;
  color: #555651;
  font: 450 16px/1.4 var(--studio-font);
  letter-spacing: -.02em;
}
.x-process__end .x-btn {
  background: linear-gradient(#ff852e, #ff6b00);
  color: #fff;
  border-color: #f57313;
  box-shadow: inset 0 1px 0 #ffc497, 0 3px 0 #cd5200;
}
.x-site .x-offers {
  padding-block: clamp(76px, 9vw, 122px);
  border-top: 1px solid #e1e1db;
  background: #f5f5f2;
}
.x-offer-heading h2 {
  margin: 0;
  color: #3f3f3f;
  font: 450 clamp(28px, 3vw, 38px)/1.2 var(--studio-font);
  letter-spacing: -.04em;
}

@media (min-width: 900px) and (min-height: 650px) and (prefers-reduced-motion: no-preference) {
  .x-process.is-motion .x-process__scene {
    --process-card-height: 304px;
    --process-slide-distance: calc(var(--process-card-height) + 80px);
    height: calc(var(--process-card-height) + var(--process-slide-distance) + var(--process-slide-distance) + var(--process-slide-distance));
  }
  .x-process.is-motion .x-process__stack {
    position: sticky;
    top: clamp(86px, 11vh, 114px);
    display: block;
    height: var(--process-card-height);
    isolation: isolate;
  }
  .x-process.is-motion .x-process__step {
    position: absolute;
    inset: 0;
    margin: 0;
    transform: translate3d(0, var(--process-slide, 0px), 0);
    will-change: transform;
  }
  .x-process.is-motion .x-process__card { height: 100%; min-height: 0; }
}
@media (max-width: 899px) {
  .x-process__card { min-height: 274px; }
}
@media (max-width: 720px) {
  .x-site .x-process { padding-block: 58px 66px; }
  .x-process__head { margin-bottom: 27px; }
  .x-process__head h2 { font-size: clamp(32px, 7.8vw, 44px); }
  .x-process__stack { gap: 16px; }
  .x-process__card { grid-template-columns: 1fr; min-height: 0; border-radius: 16px; }
  .x-process__visual { height: clamp(120px, 35vw, 170px); border-radius: 11px; }
  .x-process__copy { padding: 18px 16px 15px; }
  .x-process__num { margin-bottom: 11px; }
  .x-process__copy h3 { font-size: clamp(25px, 6.4vw, 30px); }
  .x-process__lead { font-size: 12px; }
  .x-process__points { margin-top: 13px; }
  .x-process__end { align-items: flex-start; flex-direction: column; }
}