/* ==========================================================================
   VIP OPD — page styles. Loaded ONLY by vip-opd.html.
   Every rule is scoped to .vipx (the body class of that one page), so no
   other page and nothing in site.css is affected. Mobile first.
   ========================================================================== */

.vipx { --vx-line: 1px solid var(--ink-12); --vx-line-d: 1px solid var(--paper-14); }

/* ---------- nothing may ever push the page wider than the phone ----------
   Grid and flex children default to min-width:auto, which lets a wide row of
   chips stretch its whole column and every element beside it. These two rules
   are what keep the booking card inside the screen. */
body.vipx { overflow-x: hidden; }
.vipx .vx-book, .vipx .vx-book > *, .vipx .vx-main, .vipx .vx-side,
.vipx .vx-card, .vipx .vx-form, .vipx .vx-form > *, .vipx .vx-step,
.vipx .vx-group, .vipx .vx-sum, .vipx .vx-sum__l > div,
.vipx .vx-done, .vipx .vx-bar > * { min-width: 0; max-width: 100%; }

/* ---------- shared bits ---------- */
.vipx .vx-eyebrow { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
.vipx .vx-head { display: grid; gap: 18px; margin-bottom: clamp(28px, 5vw, 60px); }
@media (min-width: 861px) {
  .vipx .vx-head { grid-template-columns: 1.1fr .9fr; align-items: end; gap: clamp(24px, 4vw, 60px); }
}
.vipx .vx-btn { justify-content: center; width: 100%; }
@media (min-width: 561px) { .vipx .vx-btn { width: auto; } }

/* ---------- HERO ---------- */
.vipx .vx-hero {
  position: relative; min-height: 86svh; display: grid; align-items: end;
  overflow: hidden; background: var(--graphite); color: var(--ivory);
}
@supports not (min-height: 1svh) { .vipx .vx-hero { min-height: 86vh; } }
.vipx .vx-hero__bg { position: absolute; inset: 0; z-index: 0; }
.vipx .vx-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 62% 38%; }
.vipx .vx-hero__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(12,12,14,.62) 0%, rgba(12,12,14,.30) 34%, rgba(12,12,14,.88) 82%, rgba(12,12,14,.96) 100%);
}
.vipx .vx-hero__in {
  position: relative; z-index: 2; width: 100%;
  padding: calc(var(--s9) + 24px) var(--gutter) clamp(30px, 6vw, 64px);
  max-width: 1560px; margin-inline: auto;
}
.vipx .vx-hero .crumb, .vipx .vx-hero .crumb a, .vipx .vx-hero .crumb span { color: var(--paper-40); }
.vipx .vx-hero .crumb a:hover { color: var(--ivory); }
.vipx .vx-pill {
  display: inline-flex; align-items: center; gap: 8px; margin: 18px 0 0;
  padding: 8px 14px; border: 1px solid rgba(192,85,74,.5); background: rgba(163,44,36,.16);
  font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase;
  color: #E6B4AC; backdrop-filter: blur(6px);
}
.vipx .vx-h1 { margin: clamp(14px, 3vw, 22px) 0 0; font-size: clamp(44px, 13.5vw, 132px); line-height: .92; letter-spacing: -.02em; }
.vipx .vx-lead { margin: clamp(16px, 3vw, 24px) 0 0; max-width: 46ch; color: var(--paper-64); font-size: clamp(15px, 4.1vw, 21px); line-height: 1.55; }
.vipx .vx-price { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 16px; margin: clamp(22px, 4vw, 32px) 0 0; }
.vipx .vx-price__n { font-size: clamp(30px, 8.6vw, 46px); line-height: 1; letter-spacing: -.01em; }
.vipx .vx-price__t { font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-40); padding-left: 16px; border-left: var(--vx-line-d); }
.vipx .vx-cta { display: grid; gap: 10px; margin: clamp(24px, 4vw, 34px) 0 0; }
@media (min-width: 561px) { .vipx .vx-cta { display: flex; flex-wrap: wrap; gap: 14px; } }
.vipx .vx-hero .btn--ghost { color: var(--ivory); }
.vipx .vx-trust { list-style: none; margin: clamp(28px, 5vw, 44px) 0 0; padding: 0; display: grid; gap: 0; border-top: var(--vx-line-d); }
.vipx .vx-trust li { display: flex; gap: 12px; align-items: baseline; padding: 13px 0; border-bottom: var(--vx-line-d); }
.vipx .vx-trust b { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); flex: 0 0 auto; min-width: 96px; }
.vipx .vx-trust span { color: var(--paper-40); font-size: 13px; line-height: 1.45; min-width: 0; }
@media (min-width: 861px) {
  .vipx .vx-trust { grid-template-columns: repeat(3, 1fr); border-bottom: var(--vx-line-d); }
  .vipx .vx-trust li { display: block; padding: 20px 24px 20px 0; border-bottom: 0; }
  .vipx .vx-trust b { display: block; margin-bottom: 8px; }
}

/* ---------- stat row ---------- */
.vipx .vx-stats { display: grid; gap: 1px; background: var(--ink-12); margin-top: clamp(26px, 4vw, 44px); }
@media (min-width: 561px) { .vipx .vx-stats { grid-template-columns: 1fr 1fr; } }
@media (min-width: 961px) { .vipx .vx-stats { grid-template-columns: repeat(4, 1fr); } }
.vipx .vx-stat { background: var(--ivory); padding: clamp(18px, 3.4vw, 28px); }
.vipx .vx-stat b { display: block; font-size: clamp(24px, 6vw, 34px); line-height: 1; letter-spacing: -.01em; }
.vipx .vx-stat span { display: block; margin-top: 10px; font: 500 var(--fs-label)/1.5 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }

/* ---------- timeline (dark section) ---------- */
.vipx .vx-tl { display: grid; gap: 26px; }
.vipx .vx-tl__i { position: relative; padding-left: 46px; }
.vipx .vx-tl__i::before { content: ""; position: absolute; left: 16px; top: 38px; bottom: -26px; width: 1px; background: var(--paper-14); }
.vipx .vx-tl__i:last-child::before { display: none; }
.vipx .vx-tl__n {
  position: absolute; left: 0; top: 0; width: 33px; height: 33px; border-radius: 50%;
  border: 1px solid rgba(192,85,74,.55); color: #E6B4AC; display: grid; place-items: center;
  font: 500 11px/1 var(--mono); letter-spacing: .08em;
}
.vipx .vx-tl h3 { font-size: clamp(18px, 5vw, 22px); }
.vipx .vx-tl p { margin-top: 10px; color: var(--paper-40); font-size: 14px; line-height: 1.6; }
@media (min-width: 861px) {
  .vipx .vx-tl { grid-template-columns: repeat(4, 1fr); gap: clamp(20px, 2.6vw, 40px); }
  .vipx .vx-tl__i { padding-left: 0; padding-top: 52px; border-top: var(--vx-line-d); }
  .vipx .vx-tl__i::before { display: none; }
  .vipx .vx-tl__n { top: 22px; }
}

/* ---------- BOOKING ---------- */
.vipx .vx-book { display: grid; gap: clamp(20px, 4vw, 34px); }
/* on a phone the form comes first — the sticky bar already carries the summary,
   so an empty summary card must not sit between the heading and step 1 */
.vipx .vx-main { order: 1; }
.vipx .vx-side { order: 2; }
@media (min-width: 1101px) {
  .vipx .vx-book { grid-template-columns: 4fr 8fr; gap: clamp(28px, 3vw, 56px); align-items: start; }
  .vipx .vx-main { order: 2; }
  .vipx .vx-side { order: 1; position: sticky; top: 118px; }
}

/* summary card */
.vipx .vx-sum { background: var(--ivory); padding: clamp(18px, 4vw, 28px); position: relative; box-shadow: 0 20px 50px -42px rgba(20,20,18,.6); }
.vipx .vx-sum::before { content: ""; position: absolute; left: 0; top: 0; width: 62px; height: 3px; background: var(--accent); }
.vipx .vx-sum__h { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-40); }
.vipx .vx-sum__l { margin: 18px 0 0; display: grid; gap: 0; }
.vipx .vx-sum__l > div { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; padding: 12px 0; border-bottom: var(--vx-line); }
.vipx .vx-sum__l > div:last-child { border-bottom: 0; }
.vipx .vx-sum__l dt { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); flex: 0 0 auto; }
.vipx .vx-sum__l dd { margin: 0; text-align: right; font-size: 14px; flex: 1 1 auto; min-width: 0; overflow-wrap: break-word; }
.vipx .vx-sum__l #sumTime, .vipx .vx-sum__l #sumFee { font-family: var(--mono); font-size: 15px; }
.vipx .vx-sum .note { margin-top: 16px; }
.vipx .vx-emg { border-top: var(--vx-line); padding-top: 14px; }

/* the form card */
.vipx .vx-card { background: var(--ivory); padding: clamp(18px, 4.6vw, 40px); box-shadow: 0 26px 64px -48px rgba(20,20,18,.55); }
.vipx .vx-form { grid-template-columns: 1fr; gap: clamp(20px, 4vw, 26px); }
@media (min-width: 721px) { .vipx .vx-form { grid-template-columns: 1fr 1fr; gap: var(--s5); } }

/* steps */
.vipx .vx-step { border-top: var(--vx-line); padding-top: clamp(18px, 3.4vw, 24px); }
.vipx .vx-step:first-child { border-top: 0; padding-top: 0; }
.vipx .vx-step__h { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-60); }
.vipx .vx-step__n { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--ink-12); font-size: 10px; color: var(--ink-40); transition: all .3s var(--ease); }
.vipx .vx-step.is-done .vx-step__h { color: var(--ink); }
.vipx .vx-step.is-done .vx-step__n { background: var(--accent); color: var(--ivory); box-shadow: none; }

/* chip groups. Labels wrap instead of stretching their container — the
   session labels are long ("Evening · 5:30 PM–7:30 PM"). */
.vipx .vx-group .btn {
  white-space: normal; text-align: center; line-height: 1.3;
  transition: transform .2s var(--ease), color .2s var(--ease);
}
.vipx .vx-group .btn[aria-pressed="true"] { --btn-bg: var(--accent); --btn-fg: var(--ivory); box-shadow: none; }
.vipx .vx-group .btn:active { transform: scale(.97); }

/* date rail: swipes sideways on a phone, wraps on a desktop.
   No negative margins — they were what broke the layout inside the card. */
.vipx .vx-rail {
  display: flex; gap: 8px; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x proximity; overscroll-behavior-x: contain;
  padding: 2px 0 10px; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.vipx .vx-rail::-webkit-scrollbar { display: none; }
.vipx .vx-rail .btn {
  flex: 0 0 auto; scroll-snap-align: start;
  width: 92px; min-height: 64px; padding: 10px 6px;
  justify-content: center; font-size: 11px; letter-spacing: .06em;
}
@media (min-width: 721px) {
  .vipx .vx-rail { flex-wrap: wrap; overflow: visible; padding: 0; }
  .vipx .vx-rail .btn { width: auto; min-width: 96px; min-height: 52px; font-size: var(--fs-label); }
}

/* session: one per row on a phone, side by side once there is room */
.vipx .vx-seg { display: grid; grid-template-columns: 1fr; gap: 10px; }
.vipx .vx-seg .btn { min-height: 54px; padding: 12px 14px; justify-content: center; }
@media (min-width: 641px) { .vipx .vx-seg { grid-template-columns: 1fr 1fr; } }

/* slots: big tap targets, four across on a phone */
.vipx .vx-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.vipx .vx-slots .btn { width: 100%; min-height: 52px; padding: 12px 4px; justify-content: center; font-size: 11px; }
.vipx .vx-slots .note { grid-column: 1 / -1; }
@media (min-width: 721px) {
  .vipx .vx-slots { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; }
  .vipx .vx-slots .btn { font-size: var(--fs-label); }
}

/* fields, sized so iOS never zooms on focus */
.vipx .field label { color: var(--ink-40); }
.vipx .field input, .vipx .field select, .vipx .field textarea {
  font-size: 16px; min-height: 54px; padding: 15px 16px; background: #FBF9F4;
  border: 0; box-shadow: inset 0 0 0 1px var(--ink-12);
  transition: box-shadow .25s var(--ease), background .25s var(--ease);
}
.vipx .field textarea { min-height: 118px; }
.vipx .field input:focus, .vipx .field select:focus, .vipx .field textarea:focus {
  outline: none; background: var(--ivory); box-shadow: inset 0 0 0 2px var(--accent);
}

/* pay block */
.vipx .vx-pay { border-top: var(--vx-line); padding-top: clamp(20px, 3.6vw, 26px); }
.vipx .vx-pay .btn { width: 100%; justify-content: center; min-height: 58px; }
.vipx .vx-pay .btn[disabled] { opacity: .45; cursor: not-allowed; }
.vipx .vx-pay .btn[disabled]:hover::before { transform: translateY(101%); }
.vipx .vx-pay .note { margin-top: 14px; }
.vipx .vx-secure { display: flex; align-items: center; gap: 10px; margin-top: 14px; font: 500 var(--fs-label)/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-40); }
.vipx .vx-secure::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #4E7A5C; flex: 0 0 auto; }

/* UPI panel */
.vipx .vx-upi { margin-top: clamp(22px, 4vw, 32px); border-top: var(--vx-line); padding-top: clamp(20px, 3.4vw, 28px); }
.vipx .vx-upi .btn { width: 100%; justify-content: center; }
@media (min-width: 561px) { .vipx .vx-upi .btn { width: auto; } }

/* confirmation */
.vipx .vx-done { background: var(--ivory); padding: clamp(22px, 5vw, 44px); box-shadow: 0 26px 64px -48px rgba(20,20,18,.55); }
.vipx .vx-tick { width: 54px; height: 54px; border-radius: 50%; background: var(--accent); color: var(--ivory); display: grid; place-items: center; font-size: 24px; line-height: 1; }
.vipx .vx-done h3 { margin-top: 20px; font-size: clamp(24px, 7vw, 34px); line-height: 1.1; }
.vipx .vx-ref { margin-top: 20px; padding: 16px 18px; background: var(--ivory-2); display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px 14px; }
.vipx .vx-ref dt { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-40); }
.vipx .vx-ref dd { margin: 0; font-family: var(--mono); font-size: clamp(16px, 4.6vw, 22px); letter-spacing: .06em; }
.vipx .vx-donel { margin: 4px 0 0; }
.vipx .vx-donel > div { display: flex; justify-content: space-between; gap: 16px; padding: 13px 0; border-bottom: var(--vx-line); }
.vipx .vx-donel dt { font: 500 var(--fs-label)/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-40); }
.vipx .vx-donel dd { margin: 0; text-align: right; font-size: 14px; min-width: 0; overflow-wrap: break-word; }
.vipx .vx-acts { display: grid; gap: 10px; margin-top: clamp(20px, 3.4vw, 28px); }
.vipx .vx-acts .btn { width: 100%; justify-content: center; min-height: 52px; }
@media (min-width: 721px) { .vipx .vx-acts { grid-template-columns: repeat(3, auto); justify-content: start; } .vipx .vx-acts .btn { width: auto; } }

/* ---------- fee table ---------- */
.vipx .vx-two { display: grid; gap: 1px; background: var(--ink-12); }
@media (min-width: 861px) { .vipx .vx-two { grid-template-columns: 1fr 1fr; } }
.vipx .vx-two > div { background: var(--ivory); padding: clamp(20px, 4vw, 34px); }
.vipx .vx-list { list-style: none; margin: 18px 0 0; padding: 0; }
.vipx .vx-list li { position: relative; padding: 11px 0 11px 26px; border-bottom: var(--vx-line); font-size: 14px; line-height: 1.55; color: var(--ink-60); }
.vipx .vx-list li:last-child { border-bottom: 0; }
.vipx .vx-list li::before { content: ""; position: absolute; left: 2px; top: 18px; width: 10px; height: 1px; background: var(--accent); }
.vipx .vx-list--no li::before { background: var(--ink-40); }

/* ---------- FAQ ---------- */
.vipx .faq details { border-bottom: var(--vx-line); }
.vipx .faq summary { padding: 18px 0; font-size: clamp(15px, 4.2vw, 18px); cursor: pointer; }
.vipx .faq p { padding-bottom: 18px; font-size: 14px; line-height: 1.65; }

/* ---------- sticky pay bar (mobile only) ---------- */
.vipx .vx-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 14px;
  padding: 12px var(--gutter); padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  background: rgba(22,22,26,.97); color: var(--ivory); border-top: var(--vx-line-d);
  transform: translateY(115%); transition: transform .45s var(--ease-out);
  backdrop-filter: blur(10px);
}
.vipx .vx-bar.is-on { transform: none; }
body.menu-open .vx-bar, body.vx-done .vx-bar { transform: translateY(115%) !important; }
.vipx .vx-bar__w { display: block; font: 500 12px/1.3 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--ivory); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vipx .vx-bar__f { display: block; margin-top: 4px; font: 500 11px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--paper-40); }
.vipx .vx-bar__b { min-height: 48px; padding-inline: 20px; }
@media (min-width: 861px) { .vipx .vx-bar { display: none; } }
@media (max-width: 860px) { .vipx .foot { padding-bottom: 96px; } }

/* ---------- motion off ---------- */
@media (prefers-reduced-motion: reduce) {
  .vipx .vx-bar { transition: none; }
  .vipx .vx-group .btn, .vipx .vx-step__n { transition: none; }
}

/* ---------- Who you see: the surgeon in his own consulting room ---------- */
.vx-who {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(20px, 3vw, 52px);
  align-items: center;
  margin-top: clamp(34px, 4.4vw, 64px);
}
.vx-who__pic {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 5;
  background: var(--ivory-3);
  min-width: 0;
}
.vx-who__pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.vx-who__t { min-width: 0; }
.vx-who__t h3 {
  font-size: clamp(1.5rem, 2.4vw, 2.15rem);
  line-height: 1;
  letter-spacing: -.032em;
  text-transform: uppercase;
  font-weight: 500;
  margin: 12px 0 14px;
}
.vx-who__t h3 em {
  display: block;
  font-style: normal;
  font-family: var(--mono);
  font-size: var(--fs-label);
  letter-spacing: .2em;
  color: var(--accent);
  margin-top: 12px;
}
.vx-who__t p { color: var(--ink-60); font-size: var(--fs-sm); line-height: 1.62; margin-bottom: 14px; }
.vx-who__f { margin: 22px 0 24px; border-top: 1px solid var(--ink-12); }
.vx-who__f div { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ink-12); }
.vx-who__f b { font-weight: 500; font-size: var(--fs-sm); }
.vx-who__f span { color: var(--ink-40); font-family: var(--mono); font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; align-self: center; }
@media (max-width: 860px) {
  .vx-who { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .vx-who__pic { aspect-ratio: 4 / 4.4; }
  .vx-who__f div { grid-template-columns: minmax(0, 1fr); gap: 4px; }
}

/* ==========================================================================
   MOBILE QA PASS
   ========================================================================== */
.vipx .vx-who__pic img{object-position:50% 22%}

@media (max-width:860px){
  /* vip-consult.webp is a 1440x803 landscape crop in an 86svh box, so on a
     phone the consultant's face landed exactly where the headline sits. */
  .vipx .vx-hero{min-height:78svh}
  .vipx .vx-hero__bg img{object-position:74% 24%}
  .vipx .vx-hero__bg::after{
    background:
      linear-gradient(180deg,rgba(12,12,14,.82) 0%,rgba(12,12,14,.52) 20%,rgba(12,12,14,.78) 40%,rgba(12,12,14,.93) 66%,rgba(12,12,14,.97) 100%),
      linear-gradient(102deg,rgba(12,12,14,.70) 0%,rgba(12,12,14,.34) 54%,rgba(12,12,14,0) 88%);
  }
  .vipx .vx-hero__in{padding-top:calc(var(--s9) + 8px)}
  .vipx .vx-h1{font-size:clamp(40px,12.4vw,62px);letter-spacing:-.028em}
  .vipx .vx-lead{max-width:36ch;font-size:14.5px;line-height:1.5}
  /* the fee caption wraps to its own line, where a left rule reads as a
     stray mark rather than a divider */
  .vipx .vx-price{gap:8px 14px}
  .vipx .vx-price__t{padding-left:0;border-left:0}

  .vipx .vx-who{margin-top:clamp(28px,6vw,44px)}
  .vipx .vx-who__pic{aspect-ratio:4/4.8}
  .vipx .vx-who__t h3{font-size:clamp(1.45rem,6.6vw,1.9rem);margin:10px 0 12px}
  .vipx .vx-who__t h3 em{margin-top:10px}

  /* the date rail scrolls sideways but the last chip was clipped flush
     against the screen edge with no hint that there was more */
  .vipx .vx-rail{
    scroll-snap-type:x proximity;scroll-padding-left:2px;-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .vipx .vx-rail .btn{scroll-snap-align:start}
}


/* === VIP HERO MOBILE ART DIRECTION === */
.vipx .vx-hero__bg picture{display:contents}
@media (max-width:860px){
  /* purpose-built portrait crop: keep it centred, no offset needed */
  .vipx .vx-hero__bg img{object-position:44% 50%}
  /* the artwork already reserves the top half, so lift the scrim */
  .vipx .vx-hero__bg::after{
    background:
      linear-gradient(180deg,rgba(12,12,14,.60) 0%,rgba(12,12,14,.34) 26%,rgba(12,12,14,.58) 48%,rgba(12,12,14,.88) 72%,rgba(12,12,14,.96) 100%),
      linear-gradient(102deg,rgba(12,12,14,.46) 0%,rgba(12,12,14,.20) 58%,rgba(12,12,14,0) 90%);
  }
}

/* === VIP HERO - MOBILE READING ORDER === */
/* Headline first, then the photograph, then everything else.  The hero
   becomes a flex column and .vx-hero__in is display:contents so its children
   can be ordered around the image; the image leaves the absolute background
   layer and joins the flow. */
@media (max-width: 860px) {
  .vipx .vx-hero {
    display: flex; flex-direction: column; align-items: stretch;
    min-height: 0; overflow: hidden;
    padding: calc(var(--s9) + 8px) var(--gutter) clamp(30px, 6vw, 64px);
  }
  .vipx .vx-hero__in { display: contents; }
  .vipx .vx-hero .crumb { order: -4; }
  .vipx .vx-pill { order: -3; align-self: flex-start; }
  .vipx .vx-h1 { order: -2; }
  .vipx .vx-hero__bg {
    order: -1; position: relative; inset: auto; z-index: 0; overflow: hidden;
    margin: clamp(18px, 4.5vw, 26px) calc(var(--gutter) * -1) clamp(2px, 1vw, 8px);
  }
  .vipx .vx-hero__bg img {
    height: auto; aspect-ratio: 4/5; max-height: 62svh; object-position: 50% 26%;
  }
  /* the scrim existed to keep text legible on top of the photo; nothing sits
     on it now, so it would only mute the picture */
  .vipx .vx-hero__bg::after { background: none; }
  .vipx .vx-lead { margin-top: clamp(14px, 3.4vw, 20px); max-width: none; }
}