/* ============================================================
   Dr. Seth Healing — the procedure template.

   A reading surface that ends in a booking. It used to opt out of
   the system's own strongest moves — no display type at full scale,
   no structural device, prose in a narrow column on a wide empty
   canvas — and read flat beside the programme template next door.

   The correction is in the system's own vocabulary, not a new one:
   the hero carries the same conviction as a programme hero, the
   passage becomes an asymmetric pairing so the heading is a real
   column rather than a label, and the benefits band becomes the
   page's peak by setting each benefit's lead phrase at display
   scale over its explanation — a hierarchy the copy already had and
   the old layout flattened.
   ============================================================ */

/* --- room: same conviction as a programme hero -------------- */
.room--procedure{height:max(600px,min(84vh,62vw))}
.room--procedure .room__inscription h1{max-width:18ch}
.room--procedure .room__inscription p{max-width:620px}

/* --- passage: heading is a column, not a label -------------- */
.passage{padding:104px 0 0}
.passage .wrap{max-width:min(1104px,calc(100% - 48px))}
.passage__block{
  display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(48px,6vw,104px);align-items:start;
}
.passage__block h2{
  font-family:var(--serif);font-weight:500;color:var(--green);
  font-size:clamp(28px,3.1vw,42px);line-height:1.08;letter-spacing:.004em;
  margin:0;text-wrap:balance;
}
.passage__block p{
  margin:0;font-size:var(--fs-lead);line-height:var(--lh-lead);
  color:var(--ink);max-width:58ch;
}
.passage__block p + p{margin-top:18px}
.passage__block > p{grid-column:2}

/* --- image chapters: existing copy becomes the caption ------- */
.passage--media{
  position:relative;display:grid;align-items:end;isolation:isolate;overflow:hidden;
  min-height:clamp(560px,72vh,820px);padding:0;background:var(--night);
}
.passage--media::after{
  content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(180deg,rgba(18,12,7,.08) 0%,rgba(18,12,7,.3) 48%,rgba(18,12,7,.82) 100%),
    linear-gradient(90deg,rgba(18,12,7,.72) 0%,rgba(18,12,7,.42) 58%,rgba(18,12,7,.12) 100%);
}
.passage__media{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;
  object-position:center;transform:scale(1.002);
}
.passage--media .wrap{width:100%;padding-top:96px;padding-bottom:clamp(72px,8vw,116px)}
.passage--media .passage__block h2{color:var(--lamp);text-shadow:0 2px 24px rgba(0,0,0,.28)}
.passage--media .passage__block p{color:var(--lamp-dim);text-shadow:0 1px 18px rgba(0,0,0,.3)}
.passage--media + .passage--media,
.passage--media + .benefits{margin-top:0}

/* --- benefits: the page's peak ------------------------------ */
.benefits{position:relative;background:var(--tan);padding:104px 0 112px;overflow:hidden;margin-top:104px}
.benefits .watermark{
  position:absolute;left:-140px;bottom:-120px;width:640px;opacity:.5;z-index:0;pointer-events:none;
}
.benefits .wrap{position:relative;z-index:1}
.benefits__body{max-width:1104px;margin:0 auto}
.benefits__list{margin:52px auto 0;display:block}
.benefits__list li{
  display:grid;grid-template-columns:64px minmax(0,5fr) minmax(0,7fr);
  column-gap:clamp(40px,5vw,88px);align-items:baseline;
  padding:34px 0;
}
.benefits__icon{
  width:58px;height:58px;align-self:center;object-fit:contain;
  grid-row:1;filter:none;
}
.benefits__list li + li{border-top:1px solid var(--rule-on-cream)}
.benefits__list li b{
  font-family:var(--serif);font-weight:500;color:var(--green);
  font-size:clamp(24px,2.6vw,34px);line-height:1.1;letter-spacing:.004em;
  text-wrap:balance;
}
.benefits__list li span{
  font-family:var(--sans);font-size:var(--fs-body);line-height:21px;color:var(--ink);
}
/* closing prose that follows a list inside the same band */
.benefits__body > p{
  margin:52px 0 0;padding-top:40px;border-top:1px solid var(--rule-on-cream);
  font-size:var(--fs-lead);line-height:var(--lh-lead);color:var(--ink);
}
/* the rule spans the band; the measure is held by padding, not width,
   so the line above it never stops half way across */
.benefits__body > p{padding-right:clamp(0px,28vw,392px)}

/* --- doctor: provenance before the booking ask -------------- */
.doctor{margin-top:104px;padding:96px 0;background:var(--card)}
.doctor__layout{
  display:grid;grid-template-columns:minmax(320px,5fr) minmax(0,7fr);
  gap:clamp(56px,7vw,112px);align-items:center;max-width:min(1104px,calc(100% - 48px));
}
.doctor__layout > *{min-width:0}
.doctor__portrait{margin:0;aspect-ratio:4 / 5;overflow:hidden;border-radius:var(--r-xl);box-shadow:var(--sh-media)}
.doctor__portrait img{width:100%;height:100%;object-fit:cover;object-position:50% 32%}
.doctor__content h2{
  max-width:13ch;margin:0;font-family:var(--serif);font-weight:500;color:var(--green);
  font-size:clamp(34px,4vw,52px);line-height:1.02;letter-spacing:.004em;text-wrap:balance;
}
.doctor__lead{
  max-width:32ch;margin:24px 0 0;font-family:var(--serif);font-size:clamp(22px,2.3vw,30px);
  line-height:1.2;color:var(--brass-ink);text-wrap:balance;
}
.doctor__credentials{margin-top:36px;border-top:1px solid var(--hairline)}
.doctor__credentials li{
  position:relative;padding:20px 0 20px 30px;border-bottom:1px solid var(--hairline);
  font-size:var(--fs-body);line-height:1.55;color:var(--ink);
}
.doctor__credentials li::before{
  content:"";position:absolute;left:0;top:28px;width:12px;height:1px;background:var(--gold-line);
}

/* --- closing ------------------------------------------------ */
.closing{padding:104px 0 112px}

/* --- responsive: 1340 / 1120 / 860 -------------------------- */
@media (max-width:1120px){
  .passage{padding-top:80px}
  .passage__block{column-gap:48px}
  .benefits{margin-top:80px;padding:88px 0 96px}
  .benefits__list li{grid-template-columns:58px minmax(0,5fr) minmax(0,7fr);column-gap:32px;padding:30px 0}
  .benefits .watermark{width:480px;left:-160px}
  .doctor{margin-top:80px;padding:80px 0}
  .doctor__layout{gap:48px}
}
@media (max-width:860px){
  .room--procedure{height:auto;min-height:520px}
  .room--procedure .room__inscription{position:relative;left:auto;right:auto;bottom:auto;padding:98px 0 44px}
  .room--procedure .room__inscription h1{max-width:none}
  .passage{padding-top:60px}
  .passage__block{grid-template-columns:1fr;row-gap:18px}
  .passage__block > p{grid-column:1}
  .passage__block p{max-width:none}
  .passage--media{min-height:620px;padding:0}
  .passage--media .wrap{padding-top:116px;padding-bottom:64px}
  .passage--media::after{
    background:linear-gradient(180deg,rgba(18,12,7,.12) 0%,rgba(18,12,7,.34) 38%,rgba(18,12,7,.9) 100%);
  }
  .benefits{margin-top:60px;padding:64px 0 72px}
  .benefits__list{margin-top:36px}
  .benefits__list li{grid-template-columns:46px 1fr;column-gap:16px;row-gap:8px;padding:26px 0}
  .benefits__icon{width:42px;height:42px;grid-row:1 / span 2;align-self:start}
  .benefits__list li b,.benefits__list li span{grid-column:2}
  .benefits__list li b{font-size:23px}
  .benefits__body > p{margin-top:36px;padding-top:32px;max-width:none}
  .benefits .watermark{display:none}
  .doctor{margin-top:60px;padding:64px 0}
  .doctor__layout{grid-template-columns:1fr;gap:36px}
  .doctor__portrait{width:min(100%,520px);aspect-ratio:5 / 4}
  .doctor__portrait img{object-position:50% 24%}
  .doctor__content h2{max-width:15ch;font-size:34px}
  .doctor__lead{margin-top:18px;font-size:23px}
  .doctor__credentials{margin-top:28px}
  .closing{padding:64px 0 72px}
}