/* =========================================================
   PROCESS — framed photo + timeline, one screen
   ========================================================= */
.process {
  --pr-ink: #13251d;
  --pr-muted: #625d56;
  --pr-gold: #b98a4a;
  --pr-green: #0f3a2a;
  position: relative;
  overflow: hidden;
  min-height: 100vh;
  display: flex; align-items: center;
  padding: clamp(48px, 7vh, 84px) 0;
  background:
    radial-gradient(ellipse 50% 60% at 25% 20%, rgba(255, 238, 205, .85), transparent 65%),
    radial-gradient(ellipse 40% 50% at 90% 90%, rgba(255, 244, 224, .9), transparent 70%),
    linear-gradient(180deg, #f9f3ea 0%, #f6eee2 100%);
}

/* soft flowers down the left edge (from the photo) */
.pr-bokeh {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  width: clamp(80px, 11vw, 190px);
  background: url("../img/process.webp") 0 50% / auto 100% no-repeat;
  -webkit-mask-image: linear-gradient(90deg, #000 40%, transparent);
  mask-image: linear-gradient(90deg, #000 40%, transparent);
  opacity: .9; pointer-events: none;
}

.pr-wrap {
  position: relative; z-index: 1;
  width: min(1640px, 100%); margin-inline: auto;
  padding-inline: clamp(16px, 3vw, 56px);
  display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 80px); align-items: center;
}

/* ---------- left: framed photo ---------- */
.pr-visual { position: relative; padding: 3% 7%; }
.pr-leaves { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; overflow: visible; pointer-events: none; }
.pr-leaf-green path { opacity: .92; }
.pr-frame {
  position: relative; z-index: 1;
  max-width: min(100%, calc((100vh - 250px) * 1.156 + 60px));
  margin-inline: auto;
  padding: 14px;
  border: 1.5px solid rgba(201, 160, 99, .6);
  border-radius: 150px 150px 48px 48px;
}
.pr-card {
  border-radius: 138px 138px 36px 36px;
  overflow: hidden;
  padding: 12px 12px 0;
  background: rgba(255, 251, 244, .78);
  backdrop-filter: blur(10px);
  box-shadow: 0 40px 70px -40px rgba(70, 48, 16, .45), 0 1px 0 #fff inset;
}
.pr-photo { position: relative; aspect-ratio: 712 / 616; border-radius: 128px 128px 24px 24px; overflow: hidden; background: #efe6d6; }
.pr-img { position: absolute; inset: 0; background-repeat: no-repeat; opacity: 0; transition: opacity .9s var(--ease); }
.pr-img.on { opacity: 1; }

.pr-bar { display: flex; align-items: center; gap: clamp(10px, 1.4vw, 20px); padding: clamp(14px, 2vh, 22px) clamp(14px, 1.8vw, 26px) clamp(16px, 2.2vh, 24px); }
.pr-count { display: flex; align-items: baseline; gap: 6px; overflow: hidden; }
.pr-num { display: inline-block; font-family: var(--serif); font-style: italic; font-weight: 700; font-size: clamp(2rem, 3vw, 2.8rem); line-height: 1; color: var(--pr-ink); }
.pr-count small { font-size: .95rem; color: var(--pr-muted); }
.pr-rule { flex: 0 0 clamp(36px, 5vw, 90px); height: 1.5px; background: var(--pr-ink); opacity: .55; }
.pr-label { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .8rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: #a8813f; display: inline-block; }
.pr-nav { display: flex; gap: 12px; }
.pr-btn {
  width: clamp(44px, 3.6vw, 54px); aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid #c9a063; color: var(--pr-ink); background: transparent;
  transition: background .35s, color .35s, transform .4s var(--ease), border-color .35s;
}
.pr-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pr-btn:hover { background: #c9a063; color: #fff; transform: scale(1.06); }
.pr-btn-solid { background: var(--pr-green); border-color: var(--pr-green); color: #fff; box-shadow: 0 12px 24px -12px rgba(10, 50, 30, .7); }
.pr-btn-solid:hover { background: #1c5c40; border-color: #1c5c40; }

/* ---------- right: copy + timeline ---------- */
.pr-copy { max-width: 620px; }
.process .eyebrow { color: #a8813f; font-weight: 800; letter-spacing: .28em; margin-bottom: clamp(10px, 1.8vh, 18px); }
.process .eyebrow::before { width: 40px; opacity: 1; background: var(--pr-gold); }
.process h2 {
  color: var(--pr-ink);
  font-size: clamp(2rem, min(3.3vw, 6.4vh), 3.6rem);
  line-height: 1.08; letter-spacing: -.02em;
  margin: 0;
}
.process h2 em .w-i { background: linear-gradient(180deg, #d4a553 0%, #b27d31 55%, #8d5d22 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pr-intro {
  color: var(--pr-muted);
  font-size: clamp(.9rem, min(1.05vw, 2vh), 1.02rem); line-height: 1.6;
  max-width: 540px;
  margin: clamp(10px, 1.8vh, 18px) 0 0;
}

.pr-steps { position: relative; list-style: none; display: grid; gap: clamp(4px, 1.1vh, 12px); margin-top: clamp(18px, 3.6vh, 36px); }
.pr-track { position: absolute; left: 25px; top: 26px; bottom: 26px; width: 1.5px; background: rgba(201, 160, 99, .4); }
.pr-track-fill { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: var(--pr-gold); transition: height .6s var(--ease); }
.pr-step { position: relative; display: grid; grid-template-columns: 52px 30px 1fr; gap: 0 14px; align-items: start; cursor: pointer; }
.pr-step-btn { padding: 0; border-radius: 50%; }
.pr-icon {
  width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1.5px solid rgba(201, 160, 99, .55);
  background: radial-gradient(circle at 35% 30%, #fffdf8, #f6eee1);
  box-shadow: 0 8px 18px -12px rgba(70, 48, 16, .45);
  transition: background .5s var(--ease), border-color .5s, transform .5s var(--ease), box-shadow .5s;
}
.pr-icon svg { width: 22px; height: 22px; fill: none; stroke: #b27d31; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; transition: stroke .4s; }
.pr-step:hover .pr-icon { border-color: #c9a063; }
.pr-step.active .pr-icon {
  background: radial-gradient(circle at 35% 30%, #24684a, #0b3223 75%);
  border-color: #0f3a2a;
  box-shadow: 0 12px 24px -10px rgba(10, 50, 30, .6), 0 0 0 5px rgba(15, 58, 42, .08);
}
.pr-step.active .pr-icon svg { stroke: #fff; }
.pr-step-no { padding-top: 14px; font-family: var(--serif); font-style: italic; font-weight: 600; font-size: 1.05rem; line-height: 1; color: var(--pr-gold); }
.pr-step-text { padding-top: 12px; }
.pr-step-text h3 { font-size: clamp(1.02rem, 1.2vw, 1.2rem); line-height: 1.25; color: var(--pr-ink); letter-spacing: -.01em; transition: color .4s; }
.pr-step:not(.active) .pr-step-text h3 { color: #3d4a43; }
.pr-step-text p {
  font-size: clamp(.84rem, .9vw, .92rem); line-height: 1.55; color: var(--pr-muted); max-width: 460px;
  display: grid; grid-template-rows: 1fr; margin-top: 4px;
  transition: opacity .5s var(--ease);
}

/* on shorter screens only the active step shows its description, so everything fits */
@media (max-height: 820px) and (min-width: 981px) {
  .pr-step-text p { max-height: 0; opacity: 0; overflow: hidden; margin-top: 0; transition: max-height .6s var(--ease), opacity .4s, margin .4s; }
  .pr-step.active .pr-step-text p { max-height: 5em; opacity: 1; margin-top: 4px; }
  .pr-step-text { padding-top: 14px; }
}
@media (max-height: 640px) and (min-width: 981px) {
  .pr-intro { display: none; }
}

/* ---------- responsive ---------- */
@media (max-width: 980px) {
  .process { min-height: 0; }
  .pr-wrap { grid-template-columns: 1fr; }
  .pr-visual { max-width: 600px; width: 100%; margin-inline: auto; }
  .pr-frame { max-width: 100%; }
  .pr-bokeh { opacity: .5; }
}
@media (max-width: 560px) {
  .pr-frame { padding: 10px; border-radius: 110px 110px 34px 34px; }
  .pr-card { border-radius: 100px 100px 26px 26px; padding: 8px 8px 0; }
  .pr-photo { border-radius: 92px 92px 18px 18px; }
  .pr-rule { display: none; }
  .pr-label { font-size: .7rem; letter-spacing: .16em; }
  .pr-step { grid-template-columns: 46px 26px 1fr; gap: 0 10px; }
  .pr-icon { width: 46px; height: 46px; }
  .pr-icon svg { width: 20px; height: 20px; }
  .pr-track { left: 22px; top: 23px; bottom: 23px; }
  .pr-step-no { padding-top: 12px; }
  .pr-step-text { padding-top: 10px; }
  .pr-bokeh { display: none; }
}