/* 媧石皇家 demo 4 — HOME (prefix h4-). Auravell home rhythm:
   hero + floating card → programs row → arch frame → offerings + quote → marquee strip → why (beige)
   → benefits (dark photo band) → practice list → timetable → stories (horizontal) → staggered cards → footer. */

.h4-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.h4-lines { position: absolute; inset: 0; display: flex; justify-content: space-evenly; pointer-events: none; }
.h4-lines i { width: 1px; height: 100%; background: rgba(42, 43, 47, .08); transform-origin: top center; }
.h4-lines--light i { background: rgba(255, 255, 255, .14); }

/* Type */
.h4-eyebrow { font: 400 var(--fs-small)/1.4 var(--f-zh-serif); letter-spacing: .24em; color: var(--ink); }
.h4-eyebrow--light { color: rgba(255, 255, 255, .85); }
.h4-h2 { font: 400 clamp(2rem, 2.2vw + 1.3rem, 3.5rem)/1.3 var(--f-serif); letter-spacing: .03em; }
.h4-h3 { font: 400 clamp(1.25rem, .5vw + 1.05rem, 1.5rem)/1.45 var(--f-serif); letter-spacing: .04em; }
.h4-mega { font: 400 clamp(2.75rem, 5.4vw + .5rem, 6.25rem)/1.18 var(--f-serif); letter-spacing: .04em; }
.h4-lead { max-width: 36em; font-size: var(--fs-lead); line-height: 1.95; color: var(--muted); }
.h4-fine { max-width: 34em; font-size: .875rem; line-height: 1.7; color: var(--muted); }
.h4-head { display: flex; flex-direction: column; gap: 20px; margin-bottom: clamp(40px, 4.6vw, 64px); }
.h4-head--center { align-items: center; text-align: center; }
.h4-head--center .h4-lead { margin-top: 4px; }
.h4-head--split { flex-direction: row; justify-content: space-between; align-items: flex-end; gap: 32px 64px; }
.h4-head--split > div { display: flex; flex-direction: column; gap: 20px; }
.h4-head--split .h4-lead { max-width: 30em; }
.h4-btnrow { display: flex; flex-wrap: wrap; gap: 12px; }

/* Pills + dots */
.h4-dot { position: relative; width: 21px; height: 21px; flex: none; border-radius: 50%; background: var(--sand); }
.h4-dot::after { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--burgundy); }
.h4-dot--w { background: #fff; }
.h4-pill { display: inline-flex; align-items: center; gap: 12px; height: 40px; padding: 0 18px 0 9px; border-radius: 99px; background: #fff; font-size: var(--fs-small); color: var(--ink); white-space: nowrap; }
.h4-pill--fill { height: 36px; background: var(--burgundy); color: #fff; transition: background-color .3s; }
.h4-pill--line { height: 36px; background: transparent; border: 1px solid var(--line); color: var(--burgundy); transition: border-color .3s; }
.h4-pill--fill:hover { background: var(--burgundy-deep); }
.h4-pill--line:hover { border-color: var(--burgundy); }

/* ============ 1 · Hero ============ */
.h4-hero { position: relative; isolation: isolate; overflow: hidden; min-height: max(100svh, 700px); display: flex; align-items: flex-end; padding: 150px 0 clamp(48px, 6.5vw, 96px); background: #EEF1F4; color: var(--ink); }
.h4-hero__media { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.h4-hero__img { width: 100%; height: 100%; object-fit: cover; object-position: 80% 50%; }
.h4-hero__wash { position: absolute; inset: 0; z-index: -2; background:
  linear-gradient(90deg, rgba(254, 249, 239, .9) 0%, rgba(254, 249, 239, .62) 30%, rgba(254, 249, 239, 0) 56%),
  linear-gradient(0deg, rgba(254, 249, 239, .55) 0%, rgba(254, 249, 239, 0) 38%); }
.h4-hero .h4-lines { z-index: -1; }
.h4-hero__in { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; }
.h4-hero__text { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; max-width: 640px; min-width: 0; }
.h4-hero__eyebrow { font: 400 var(--fs-small)/1.4 var(--f-zh-serif); letter-spacing: .24em; color: var(--burgundy); }
.h4-hero__title { font: 400 clamp(2.6rem, 3.6vw + 1rem, 4.75rem)/1.24 var(--f-serif); letter-spacing: .04em; color: var(--ink); }
.h4-hero__lead { max-width: 33em; font-size: var(--fs-lead); line-height: 1.95; color: #3E4047; }
.h4-hero__btns { display: flex; flex-wrap: wrap; gap: 12px; }

.h4-hcard { position: relative; flex: none; width: 340px; padding: 10px 10px 24px; border-radius: var(--r); background: rgba(254, 249, 239, .94); box-shadow: 0 18px 50px rgba(42, 43, 47, .12); color: var(--ink); transition: transform .5s var(--ease), box-shadow .5s var(--ease); }
.h4-hcard:hover { transform: translateY(-6px); box-shadow: 0 26px 60px rgba(42, 43, 47, .16); }
.h4-hcard__media { position: relative; display: block; height: 140px; overflow: hidden; border-radius: var(--r); background: var(--stone); }
.h4-hcard__media img { width: 210%; max-width: none; height: 100%; object-fit: cover; object-position: 0 62%; transition: transform .8s var(--ease); }
.h4-hcard:hover .h4-hcard__media img { transform: scale(1.06); }
.h4-hcard__tag { position: absolute; right: 12px; bottom: 12px; padding: 4px 12px; border-radius: 99px; background: #fff; font-size: .8125rem; letter-spacing: .14em; color: var(--burgundy); }
.h4-hcard__day { display: block; margin: 20px 14px 0; font-size: var(--fs-small); color: var(--burgundy); letter-spacing: .08em; }
.h4-hcard__title { display: block; margin: 6px 14px 0; font: 400 1.75rem/1.3 var(--f-serif); letter-spacing: .04em; }
.h4-hcard__meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 10px 14px 0; font-size: .875rem; color: var(--muted); }
.h4-hcard__meta > span { display: inline-flex; align-items: center; gap: 6px; }
.h4-hcard__meta svg { width: 15px; height: 15px; color: var(--burgundy); }

@media (prefers-reduced-motion: no-preference) {
  .h4-hero__img { animation: h4-img-in 1.6s var(--ease) both; }
  .h4-hero .h4-lines i { animation: h4-grid-in 2s var(--ease) both; }
  .h4-hero .h4-lines i:nth-child(2) { animation-delay: .15s; }
  .h4-hero .h4-lines i:nth-child(3) { animation-delay: .3s; }
  .h4-hero__text > * { animation: h4-rise .9s var(--ease) both; }
  .h4-hero__text > :nth-child(2) { animation-delay: .12s; }
  .h4-hero__text > :nth-child(3) { animation-delay: .26s; }
  .h4-hero__text > :nth-child(4) { animation-delay: .38s; }
  .h4-hcard { animation: h4-card-in 1.1s .2s var(--ease) both; }
}
@keyframes h4-img-in { from { transform: scale(1.14); } }
@keyframes h4-grid-in { from { transform: scaleY(0); } }
@keyframes h4-rise { from { opacity: 0; transform: translateY(60px); filter: blur(14px); } }
@keyframes h4-card-in { from { opacity: 0; transform: translateY(160px) scale(1.06); } }

/* ============ 2 · Pillars (programs row) ============ */
.h4-pillars .h4-lead { text-align: center; }
.h4-prog { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.h4-prog__item { display: flex; flex-direction: column; cursor: default; }
.h4-prog__line { position: relative; display: block; height: 2px; }
.h4-prog__line::before { content: ""; position: absolute; left: 0; right: 0; top: .5px; height: 1px; background: repeating-linear-gradient(90deg, rgba(0, 0, 0, .2) 0 4px, transparent 4px 8px); }
.h4-prog__line i { position: absolute; inset: 0; background: var(--burgundy); transform: scaleX(0); transform-origin: left center; transition: transform .45s var(--ease-io); }
.h4-prog__item.is-active .h4-prog__line i { transform: scaleX(1); transition: transform .6s var(--ease); }
.h4-prog__icon { width: 46px; height: 44px; margin: 34px 0 40px; color: var(--ink); transition: color .3s ease, transform .5s var(--ease); }
.h4-prog__item.is-active .h4-prog__icon { color: var(--burgundy); transform: translateY(-4px); }
.h4-prog__num { margin-bottom: 6px; font: 400 .875rem/1 var(--f-num); letter-spacing: .1em; color: var(--brass); }
.h4-prog__p { margin-top: 12px; color: var(--muted); }

/* ============ 3 · Arch frame ============ */
.h4-arch { display: flex; justify-content: center; padding-inline: 0; }
.h4-arch__frame { --p: 0; --rx: calc(16px + 19% * var(--p)); --ry: calc(16px + 34% * var(--p)); position: relative; isolation: isolate; overflow: hidden; width: calc(100% - max(40px, 100% - 1440px) * var(--p)); height: clamp(380px, 43.6vw, 640px); border-radius: var(--rx) / var(--ry); background: var(--dark); }
.h4-arch__img { position: absolute; left: 0; top: -8%; width: 100%; height: 116%; object-fit: cover; object-position: 50% 45%; transform: translateY(calc(6% - 11% * var(--p))); }
.h4-arch__frame::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(0deg, rgba(23, 24, 26, .45) 0%, rgba(23, 24, 26, 0) 45%); }
.h4-arch__chip { position: absolute; left: 50%; bottom: 40px; z-index: 2; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; padding: 8px 20px 8px 9px; border-radius: 99px; background: #fff; font-size: var(--fs-small); letter-spacing: .08em; color: var(--ink); white-space: nowrap; transition: background-color .3s, color .3s; }
.h4-arch__chip:hover { background: var(--burgundy); color: #fff; }

/* ============ 4 · Discovery by need (offerings) + quote ============ */
.h4-disc__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 40px; margin-bottom: clamp(40px, 4vw, 60px); }
.h4-disc__title { display: flex; flex-direction: column; gap: 20px; }
.h4-disc__p { flex: none; text-align: right; color: var(--muted); }
.h4-offers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.h4-off { position: relative; isolation: isolate; display: block; height: clamp(340px, 30vw, 429px); border-radius: var(--r); overflow: hidden; background: var(--stone); color: #fff; }
.h4-off::before { content: ""; position: absolute; inset: 0 0 auto; height: 130px; z-index: 1; background: linear-gradient(180deg, rgba(23, 24, 26, .5), rgba(23, 24, 26, 0)); pointer-events: none; }
.h4-off img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.h4-off.is-active img { transform: scale(1.12); }
.h4-off__label { position: absolute; left: 28px; top: 20px; z-index: 2; display: flex; align-items: center; gap: 10px; font: 400 1.5rem/1.4 var(--f-serif); letter-spacing: .08em; }
.h4-off__label svg { width: 16px; height: 16px; }
.h4-off__over { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; padding: 0 28px 26px; background: linear-gradient(0deg, rgba(23, 24, 26, .84) 10%, rgba(23, 24, 26, 0) 52%); transform: translateY(100%); transition: transform .7s var(--ease); }
.h4-off.is-active .h4-off__over { transform: none; }
.h4-off__tag { font-size: .8125rem; letter-spacing: .16em; color: #E9C9C3; }
.h4-off__p { font-size: var(--fs-body); line-height: 1.65; }
@media (hover: none) { .h4-off .h4-off__over { transform: none; } }
.h4-disc__foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px 32px; margin-top: 32px; }

.h4-quote { display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: clamp(64px, 7.6vw, 110px); }
.h4-quote__icon { width: 33px; height: 33px; color: var(--burgundy); }
.h4-quote__p { max-width: 640px; text-align: center; font-size: var(--fs-body); line-height: 1.95; color: var(--ink); }
.h4-u { color: var(--burgundy); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.h4-quote__by { font-size: .875rem; letter-spacing: .16em; color: var(--muted); }

/* ============ 5 · Colour marquee strip ============ */
.h4-strip { display: flex; gap: 4px; height: 150px; overflow: hidden; background: var(--sand); }
.h4-strip__label { position: relative; z-index: 1; flex: none; width: clamp(180px, 29vw, 420px); display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px; background: var(--burgundy); color: #fff; transition: background-color .3s; }
.h4-strip__label:hover { background: var(--burgundy-deep); }
.h4-strip__label > svg { width: 18px; height: 18px; flex: none; }
.h4-strip__label > span { display: flex; flex-direction: column; gap: 4px; }
.h4-strip__zh { font: 400 1.5rem/1.3 var(--f-serif); letter-spacing: .1em; }
.h4-strip__sub { font-size: .8125rem; letter-spacing: .08em; color: rgba(255, 255, 255, .78); }
.h4-mq { flex: 1 1 0; min-width: 0; overflow: hidden; display: flex; }
.h4-mq__track { display: flex; width: max-content; height: 100%; }
.h4-mq.is-on .h4-mq__track { animation: h4-mq 46s linear infinite; }
.h4-mq:hover .h4-mq__track, .h4-mq:focus-within .h4-mq__track { animation-play-state: paused; }
.h4-mq__set { display: flex; gap: 4px; padding-right: 4px; }
.h4-mq__set li { display: flex; }
.h4-mq__cell { width: 300px; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 0 20px; background: var(--paper); color: var(--ink); transition: background-color .35s; }
.h4-mq__cell:hover { background: #fff; }
.h4-mq__cell img { width: 56px; height: 56px; flex: none; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 3px #fff, 0 4px 12px rgba(42, 43, 47, .15); transition: transform .5s var(--ease); }
.h4-mq__cell:hover img { transform: scale(1.08) rotate(-4deg); }
.h4-mq__cell b { display: block; font: 400 1.25rem/1.3 var(--f-zh-serif); letter-spacing: .08em; }
.h4-mq__cell small { display: block; margin-top: 4px; font-size: .8125rem; letter-spacing: .06em; color: var(--muted); }
@keyframes h4-mq { to { transform: translateX(-50%); } }

/* ============ 6 · Philosophy (why) ============ */
.h4-why { background: var(--sand); padding-block: clamp(80px, 11vw, 160px); }
.h4-why__row { display: flex; justify-content: space-between; gap: 40px; }
.h4-why__card { position: relative; width: 49%; height: clamp(560px, 56vw, 820px); border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-why__card img { width: 100%; height: 100%; object-fit: cover; }
.h4-why__card .h4-pill { position: absolute; left: 32px; top: 32px; }
.h4-why__content { width: 44%; display: flex; flex-direction: column; justify-content: space-between; gap: 56px; }
.h4-why__head { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.h4-why__p { font: 400 1.0625rem/2 var(--f-zh-serif); color: var(--muted); }
.h4-feats { display: flex; flex-direction: column; gap: 28px; }
.h4-feat { display: flex; align-items: flex-start; gap: 28px; padding-top: 28px; border-top: 1px solid var(--line); }
.h4-feat__icon { width: 46px; height: 42px; flex: none; color: var(--burgundy); }
.h4-feat .h4-h3 { margin-bottom: 6px; }
.h4-feat p { color: var(--muted); }

/* ============ 7 · Consultation (dark band) ============ */
.h4-bene { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; padding-block: clamp(140px, 17vw, 260px) clamp(100px, 11vw, 160px); }
.h4-bene__bg { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.h4-bene__bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; }
.h4-bene__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(23, 24, 26, .72) 0%, rgba(23, 24, 26, .8) 45%, rgba(23, 24, 26, .94) 100%); }
.h4-bene .h4-lines { z-index: -1; height: 900px; bottom: auto; }
.h4-bene__in { display: flex; flex-direction: column; align-items: center; gap: clamp(140px, 17vw, 280px); }
.h4-bene__head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.h4-bene__head .accent { color: #E9C9C3; }
.h4-bene__badge { position: absolute; left: 50%; bottom: -120px; width: 86px; height: 86px; margin-left: -43px; border-radius: 50%; transition: transform .4s var(--ease); }
.h4-bene__badge svg { width: 86px; height: 86px; }
.h4-bene__badge:hover { transform: translateY(5px); }
.h4-bene__cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; width: 100%; height: 640px; }
.h4-bene__left { border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-bene__left img { width: 100%; height: 100%; object-fit: cover; }
.h4-bene__mid { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; padding: 64px 32px 48px; border-radius: var(--r); background: var(--sand); color: var(--ink); text-align: center; transition: transform .5s var(--ease); }
.h4-bene__mid:hover { transform: translateY(-6px); }
.h4-bene__pattern { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--burgundy); opacity: .14; pointer-events: none; }
.h4-bene__gem { position: relative; width: 60px; height: 54px; color: var(--burgundy); }
.h4-bene__title { position: relative; margin-top: 16px; font: 400 clamp(1.5rem, 1vw + 1.1rem, 2rem)/1.45 var(--f-serif); letter-spacing: .04em; }
.h4-bene__offer { position: relative; display: flex; align-items: center; gap: 16px; margin-top: 36px; font-size: var(--fs-body); white-space: nowrap; }
.h4-scallop { position: relative; width: 84px; height: 84px; flex: none; display: grid; place-items: center; color: #fff; }
.h4-scallop svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.h4-scallop b { position: relative; font-weight: 400; color: var(--burgundy); letter-spacing: .1em; }
.h4-bene__sw { position: relative; display: flex; align-items: center; margin-top: auto; padding-top: 24px; }
.h4-bene__sw img { width: 34px; height: 34px; margin-left: -9px; border-radius: 50%; object-fit: cover; border: 2px solid var(--sand); }
.h4-bene__sw img:first-child { margin-left: 0; }
.h4-bene__sw i { display: grid; place-items: center; width: 22px; height: 22px; margin-left: 4px; border-radius: 50%; background: #fff; font: 500 14px/1 var(--f-sans); font-style: normal; box-shadow: 0 4px 10px rgba(0, 0, 0, .15); }
.h4-bene__cap { position: relative; margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
.h4-bene__right { display: flex; flex-direction: column; gap: 24px; min-height: 0; }
.h4-bene__small { position: relative; flex: none; display: flex; flex-direction: column; min-height: 300px; padding: 36px 36px 32px; border-radius: var(--r); background: var(--sand); color: var(--ink); }
.h4-bene__sicon { width: 28px; height: 28px; color: var(--burgundy); }
.h4-bene__stitle { margin-top: 24px; font: 400 1.375rem/1.6 var(--f-serif); letter-spacing: .04em; }
.h4-bene__pills { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; padding-top: 24px; }
.h4-bene__rimg { flex: 1; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-bene__rimg img { width: 135%; max-width: none; height: 100%; object-fit: cover; object-position: 0 62%; }

/* ============ 8 · Consultation inclusions (practice list) ============ */
.h4-incl__row { display: flex; justify-content: space-between; gap: 40px; }
.h4-incl__stack { position: relative; flex: none; width: 40%; min-height: 560px; border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-incl__img { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; transform: translateY(100%); transition: transform .9s var(--ease); }
.h4-incl__img.is-active { z-index: 2; transform: none; }
.h4-incl__img.was-active { z-index: 1; transform: none; transition: none; }
.h4-incl__list { width: 53%; }
.h4-incl__item { position: relative; display: flex; align-items: baseline; gap: 18px; width: 100%; min-height: 84px; padding: 14px 0 22px 52px; text-align: left; color: var(--ink); }
.h4-incl__check { position: absolute; left: 0; top: 24px; width: 21px; height: 17px; color: var(--burgundy); }
.h4-incl__name { flex: none; font: 400 1.5rem/1.4 var(--f-serif); letter-spacing: .04em; transition: color .3s var(--ease), transform .35s var(--ease); }
.h4-incl__desc { font-size: var(--fs-small); line-height: 1.6; color: var(--muted); transition: transform .35s var(--ease); }
.h4-incl__item.is-active .h4-incl__name { color: var(--burgundy); }
.h4-incl__line, .h4-incl__fill { position: absolute; left: 0; bottom: 0; height: 1px; width: 100%; background: var(--line); }
.h4-incl__fill { width: 0; background: var(--burgundy); transition: width .45s var(--ease-io); }
.h4-incl__item.is-active .h4-incl__fill { width: 100%; }
@media (min-width: 992px) { .h4-incl__item.is-active .h4-incl__name, .h4-incl__item.is-active .h4-incl__desc { transform: translateX(14px); } }
.h4-incl__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; margin-top: 48px; }

/* ============ 9 · Store visit (timetable) ============ */
.h4-tt { border-top: 1px dashed rgba(42, 43, 47, .28); }
.h4-tt__row { display: flex; justify-content: space-between; gap: 40px; padding: 40px 0 52px; border-bottom: 1px dashed rgba(42, 43, 47, .28); }
.h4-tt__row:nth-child(2) { border-bottom: 1px solid var(--burgundy); }
.h4-tt__meta { flex: none; width: 290px; display: flex; flex-direction: column; gap: 32px; }
.h4-tt__time { font: 400 clamp(2.4rem, 2.4vw + 1.2rem, 3.5rem)/1.15 var(--f-serif); letter-spacing: .02em; color: var(--ink); transition: color .4s var(--ease); }
.h4-tt__row:hover .h4-tt__time, .h4-tt__row:focus-within .h4-tt__time { color: var(--burgundy); }
.h4-tt__pills { display: flex; flex-direction: column; gap: 6px; }
.h4-tt__pill { display: flex; align-items: center; gap: 10px; width: 250px; max-width: 100%; height: 44px; padding-left: 18px; border-radius: 22px; background: linear-gradient(90deg, var(--sand), rgba(245, 237, 225, 0)); font-size: var(--fs-small); color: var(--muted); white-space: nowrap; }
.h4-tt__pill svg { width: 14px; height: 15px; flex: none; color: var(--burgundy); }
.h4-tt__desc { width: 33%; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.h4-tt__desc p { color: var(--muted); }
.h4-tel { display: inline-block; margin-top: 6px; color: var(--ink); border-bottom: 1px solid var(--line); transition: color .3s, border-color .3s; }
.h4-tel:hover { color: var(--burgundy); border-color: var(--burgundy); }
.h4-tt__imgs { width: 32%; align-self: flex-start; display: flex; justify-content: space-between; gap: 12px; }
.h4-tt__img { display: block; height: 210px; border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-tt__img img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.h4-tt__row:hover .h4-tt__img img { transform: scale(1.05); }
.h4-tt__img--s { width: 33%; }
.h4-tt__img--l { width: 64%; }

/* ============ 10 · Stories (horizontal) ============ */
.h4-stories { padding-block: var(--sec); background: var(--paper); overflow: hidden; }
.h4-stories__in { display: flex; align-items: center; gap: 56px; }
.h4-stories__head { flex: none; width: 340px; display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.h4-stories__track { display: flex; gap: 24px; }
.h4-story { position: relative; isolation: isolate; overflow: hidden; flex: none; width: 400px; min-height: 440px; display: flex; flex-direction: column; justify-content: space-between; gap: 32px; padding: 40px 36px 34px; border-radius: var(--r); background: var(--sand); color: var(--ink); }
.h4-story:nth-child(even) { margin-top: 70px; }
.h4-story__q { width: 36px; height: 27px; color: var(--burgundy); }
.h4-story blockquote { flex: 1; font: 400 1.25rem/1.85 var(--f-zh-serif); letter-spacing: .04em; }
.h4-story figcaption { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid rgba(42, 43, 47, .14); }
.h4-story__av { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border-radius: 50%; background: var(--burgundy); color: #fff; font: 400 1.0625rem/1 var(--f-zh-serif); }
.h4-story figcaption b { display: block; font-weight: 500; }
.h4-story figcaption small { display: block; font-size: .8125rem; color: var(--muted); letter-spacing: .06em; }
.h4-story--dark { background: var(--burgundy-deep); color: var(--on-dark); }
.h4-story--dark .h4-story__q { color: #E9C9C3; }
.h4-story--dark figcaption { border-color: rgba(255, 255, 255, .18); }
.h4-story--dark figcaption small { color: var(--on-dark-muted); }
.h4-story--dark .h4-story__av { background: #fff; color: var(--burgundy); }
.h4-story--photo { color: #fff; background: var(--dark); }
.h4-story--photo > img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.h4-story--photo::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(23, 24, 26, .55), rgba(23, 24, 26, .88)); }
.h4-story--photo .h4-story__q { color: #E9C9C3; }
.h4-story--photo figcaption { border-color: rgba(255, 255, 255, .2); }
.h4-story--photo figcaption small { color: rgba(255, 255, 255, .75); }
.h4-story--cta { justify-content: center; align-items: flex-start; gap: 28px; background: transparent; border: 1px dashed rgba(42, 43, 47, .3); }
.h4-story__ctah { font: 400 1.75rem/1.5 var(--f-serif); letter-spacing: .04em; }

/* ============ 11 · Academy (staggered cards) ============ */
.h4-acad { padding-bottom: clamp(100px, 13vw, 200px); }
.h4-acards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; align-items: start; }
.h4-acard { display: flex; flex-direction: column; gap: 20px; }
.h4-acard:nth-child(even) { padding-top: 70px; }
.h4-acard__photo { position: relative; display: block; aspect-ratio: .77; min-height: 0; border-radius: var(--r); overflow: hidden; background: var(--stone); }
.h4-acard:nth-child(even) .h4-acard__photo { aspect-ratio: .85; }
.h4-acard__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease); }
.h4-acard__photo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle, rgba(42, 43, 47, 0), rgba(42, 43, 47, .7)); opacity: 0; transition: opacity .45s var(--ease); pointer-events: none; }
.h4-acard__frame { position: absolute; inset: 0; z-index: 1; opacity: 0; transform: scale(.6); transition: opacity .45s var(--ease), transform .45s var(--ease); pointer-events: none; }
.h4-acard__frame i { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255, 255, 255, .85); }
.h4-acard__frame i:nth-child(1) { top: 20px; left: 20px; border-top-width: 1px; border-left-width: 1px; border-top-left-radius: 8px; }
.h4-acard__frame i:nth-child(2) { top: 20px; right: 20px; border-top-width: 1px; border-right-width: 1px; border-top-right-radius: 8px; }
.h4-acard__frame i:nth-child(3) { bottom: 20px; left: 20px; border-bottom-width: 1px; border-left-width: 1px; border-bottom-left-radius: 8px; }
.h4-acard__frame i:nth-child(4) { bottom: 20px; right: 20px; border-bottom-width: 1px; border-right-width: 1px; border-bottom-right-radius: 8px; }
.h4-acard__text { display: flex; flex-direction: column; gap: 8px; }
.h4-acard__title { font: 400 1.25rem/1.55 var(--f-serif); letter-spacing: .03em; transition: color .4s var(--ease); }
.h4-acard__meta { font-size: .875rem; color: var(--muted); letter-spacing: .04em; }
.h4-acard:hover .h4-acard__photo img, .h4-acard:focus-visible .h4-acard__photo img { transform: scale(1.1) rotate(-2deg); }
.h4-acard:hover .h4-acard__photo::after, .h4-acard:focus-visible .h4-acard__photo::after { opacity: 1; }
.h4-acard:hover .h4-acard__frame, .h4-acard:focus-visible .h4-acard__frame { opacity: 1; transform: none; }
.h4-acard:hover .h4-acard__title, .h4-acard:focus-visible .h4-acard__title { color: var(--burgundy); }
.h4-acad__foot { display: flex; justify-content: center; margin-top: clamp(48px, 5vw, 72px); }

/* ============ Responsive ============ */
@media (max-width: 1199px) {
  .h4-hcard { width: 310px; }
  .h4-hcard__media { height: 150px; }
  .h4-hero__text { max-width: 560px; }
  .h4-tt__row { display: grid; grid-template-columns: 240px minmax(0, 1fr); grid-template-areas: "meta desc" "meta imgs"; gap: 28px 40px; }
  .h4-tt__meta { grid-area: meta; width: auto; gap: 24px; }
  .h4-tt__desc { grid-area: desc; width: auto; max-width: 640px; }
  .h4-tt__imgs { grid-area: imgs; width: 100%; max-width: 640px; }
  .h4-tt__pill { width: 100%; }
  .h4-acards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 32px; }
  .h4-acard:nth-child(even) { padding-top: 0; }
  .h4-acard .h4-acard__photo, .h4-acard:nth-child(even) .h4-acard__photo { aspect-ratio: 1.1; }
}

@media (max-width: 991px) {
  .h4-hero { padding-top: 130px; }
  .h4-hero__in { flex-direction: column; align-items: stretch; gap: 32px; }
  .h4-hero__wash { background:
    linear-gradient(0deg, rgba(254, 249, 239, .94) 0%, rgba(254, 249, 239, .78) 40%, rgba(254, 249, 239, 0) 72%); }
  .h4-hero__text { max-width: 640px; }
  .h4-hcard { align-self: flex-end; }

  .h4-prog { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .h4-prog__item { display: grid; grid-template-columns: 56px minmax(0, 1fr); column-gap: 24px; padding-bottom: 32px; }
  .h4-prog__line { grid-column: 1 / -1; }
  .h4-prog__icon { grid-row: 2 / span 3; margin: 28px 0 0; }
  .h4-prog__num { margin-top: 28px; }
  .h4-prog__p { margin-top: 8px; }

  .h4-arch { padding-inline: var(--gutter); }

  .h4-disc__head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .h4-disc__p { text-align: left; }
  .h4-offers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

  .h4-why__row { flex-direction: column; gap: 40px; }
  .h4-why__card, .h4-why__content { width: 100%; }
  .h4-why__card { height: clamp(380px, 70vw, 600px); }

  .h4-bene { padding-block: var(--sec); }
  .h4-bene__in { gap: 56px; }
  .h4-bene__badge { display: none; }
  .h4-bene__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-areas: "mid mid" "left right"; height: auto; }
  .h4-bene__mid { grid-area: mid; padding: 48px 28px 40px; }
  .h4-bene__left { grid-area: left; min-height: 420px; }
  .h4-bene__right { grid-area: right; }
  .h4-bene__rimg { flex: none; height: 200px; }

  .h4-incl__row { flex-direction: column; gap: 32px; }
  .h4-incl__stack { width: 100%; min-height: 0; height: clamp(320px, 60vw, 520px); }
  .h4-incl__list { width: 100%; }
  .h4-incl__item { flex-direction: column; align-items: flex-start; gap: 4px; min-height: 0; padding: 14px 0 18px 40px; }
  .h4-incl__check { top: 22px; }

  .h4-head--split { flex-direction: column; align-items: flex-start; }

  .h4-stories__in { flex-direction: column; align-items: stretch; gap: 40px; }
  .h4-stories__head { width: auto; }
  .h4-stories__track { overflow-x: auto; scroll-snap-type: x mandatory; margin-inline: calc(var(--gutter) * -1); padding: 0 var(--gutter) 12px; scroll-padding-inline: var(--gutter); scrollbar-width: none; overscroll-behavior-x: contain; }
  .h4-stories__track::-webkit-scrollbar { display: none; }
  .h4-story { scroll-snap-align: start; width: min(380px, 82vw); min-height: 400px; }
  .h4-story:nth-child(even) { margin-top: 0; }
}

@media (max-width: 640px) {
  .h4-hero { display: block; min-height: 0; padding: 0 0 40px; background: var(--paper); }
  .h4-hero__media { position: relative; inset: auto; height: min(118vw, 74svh); -webkit-mask-image: linear-gradient(180deg, #000 72%, transparent 100%); mask-image: linear-gradient(180deg, #000 72%, transparent 100%); }
  .h4-hero__img { object-position: 50% 62%; }
  .h4-hero__wash, .h4-hero .h4-lines { display: none; }
  .h4-hero__in { position: relative; margin-top: -56px; gap: 32px; }
  .h4-hero__text { gap: 20px; }
  .h4-hero__title { font-size: clamp(2.3rem, 10vw, 2.75rem); }
  .h4-hero__btns .btn { flex: 1 1 auto; }
  .h4-hcard { width: 100%; align-self: stretch; }
  .h4-hcard__media { height: 150px; }

  .h4-arch__frame { height: 380px; --ry: calc(16px + 34% * var(--p)); --rx: calc(16px + 24% * var(--p)); }
  .h4-arch__chip { bottom: 24px; }

  .h4-offers { grid-template-columns: minmax(0, 1fr); }
  .h4-off { height: 360px; }
  .h4-off__label { left: 22px; }
  .h4-off__over { padding: 0 22px 22px; }

  .h4-strip { height: auto; flex-direction: column; gap: 0; }
  .h4-strip__label { width: auto; justify-content: flex-start; padding: 20px var(--gutter); }
  .h4-mq { height: 112px; }
  .h4-mq__cell { width: 236px; gap: 12px; padding: 0 14px; }
  .h4-mq__cell img { width: 48px; height: 48px; }

  .h4-why__card .h4-pill { left: 18px; top: 18px; }
  .h4-feat { gap: 18px; }
  .h4-feat__icon { width: 36px; height: 33px; }

  .h4-bene__cards { grid-template-columns: minmax(0, 1fr); grid-template-areas: "mid" "right" "left"; }
  .h4-bene__mid { padding: 40px 20px 32px; }
  .h4-bene__offer { gap: 10px; font-size: var(--fs-small); }
  .h4-scallop { width: 70px; height: 70px; }
  .h4-bene__left { min-height: 0; height: 400px; }
  .h4-bene__small { min-height: 0; padding: 28px 22px; }
  .h4-bene__stitle { font-size: 1.2rem; }

  .h4-incl__name { font-size: 1.3rem; }
  .h4-incl__foot .h4-btnrow .btn { flex: 1 1 auto; }

  .h4-tt__row { grid-template-columns: minmax(0, 1fr); grid-template-areas: "meta" "desc" "imgs"; gap: 22px; padding: 32px 0 40px; }
  .h4-tt__meta { gap: 16px; }
  .h4-tt__pills { flex-direction: row; flex-wrap: wrap; }
  .h4-tt__pill { width: auto; padding-right: 20px; height: 40px; }
  .h4-tt__img { height: 180px; }
  .h4-tt__img--s { width: 40%; }
  .h4-tt__img--l { width: 57%; }

  .h4-story { padding: 32px 24px 28px; }
  .h4-story blockquote { font-size: 1.125rem; }

  .h4-acards { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .h4-acard .h4-acard__photo, .h4-acard:nth-child(even) .h4-acard__photo { aspect-ratio: 4 / 3; }
}

@media (prefers-reduced-motion: reduce) {
  .h4-mq__track { animation: none; }
  .h4-mq { overflow-x: auto; }
}