/* ============================================================
   Hani Len — Single treatment page
   Prefix: ht-
   ============================================================ */

.single-treatment .hl-header,
.tax-treatment_category .hl-header { position: static; overflow: visible; }

/* ---- Hero (half / half) ------------------------------------------ */
.ht-hero { position: relative; overflow: hidden; }
.ht-hero__grid { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; min-height: clamp(440px, 58vh, 640px); height: 100%; }
.ht-hero__content { display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 3.5vw, 56px); color: #fff; position: relative; z-index: 2; overflow-y: auto; max-height: 100%; }
.ht-crumb { font-family: var(--font-body); font-size: .8125rem; font-weight: 500; letter-spacing: .12em; color: rgba(255,255,255,.6); display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.ht-crumb a { color: rgba(255,255,255,.78); transition: color .2s; }
.ht-crumb a:hover { color: var(--gold); }
.ht-crumb span { color: rgba(255,255,255,.4); }
.ht-hero h1 { font-family: var(--font-display); font-weight: 300; font-size: clamp(2.1rem, 4.4vw, 3.75rem); line-height: 1.05; margin: .1em 0 .16em; color: #fff; }
.ht-hero h1 .gold { font-weight: 400; }
.ht-hero__lead { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55; color: rgba(255,255,255,.86); max-width: 460px; }
.ht-hero__meta { display: flex; flex-wrap: wrap; gap: 22px; margin: 18px 0 20px; }
.ht-hero__meta div { display: flex; flex-direction: column; gap: 3px; }
.ht-hero__meta dt { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--gold); }
.ht-hero__meta dd { font-family: var(--font-display); font-size: 1.3rem; font-weight: 400; color: #fff; margin: 0; }
.ht-hero__media { position: relative; min-width: 0; height: 100%; }
.ht-hero__media img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: sepia(.12) saturate(1.08) contrast(.98); }
.ht-hero__media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(270deg, rgba(0,36,49,0) 60%, rgba(0,36,49,.55) 100%); pointer-events: none; }
.ht-hero.hl-hero-bg--teal .ht-hero__media::after { background: linear-gradient(270deg, rgba(39,73,78,0) 60%, rgba(39,73,78,.55) 100%); }
.ht-hero.hl-hero-bg--plum .ht-hero__media::after { background: linear-gradient(270deg, rgba(59,33,48,0) 60%, rgba(59,33,48,.55) 100%); }
.ht-hero.hl-hero-bg--charcoal .ht-hero__media::after { background: linear-gradient(270deg, rgba(18,24,31,0) 60%, rgba(18,24,31,.55) 100%); }

/* ---- Sticky steps strip ------------------------------------------ */
.ht-steps { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(8px); border-bottom: 1px solid var(--hairline); }
.ht-steps__inner { display: flex; align-items: center; justify-content: center; gap: 2px; padding: 9px 0; overflow-x: auto; scrollbar-width: none; }
.ht-steps__inner::-webkit-scrollbar { display: none; }
.ht-step { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border-radius: var(--radius-pill); font-family: var(--font-body); font-weight: 500; font-size: 1rem; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s; border: 1px solid transparent; }
.ht-step svg { width: 19px; height: 19px; stroke-width: 1.8; flex: 0 0 auto; transition: color .2s; }
.ht-step:hover { color: var(--ink); background: var(--sand); }
.ht-step.is-active { color: var(--navy); background: var(--sand); border-color: rgba(201,169,110,.4); }
.ht-step.is-active svg { color: var(--gold-deep); }
.ht-step--cta { color: var(--navy); background: var(--gold-gradient); border-color: transparent; }
.ht-step--cta:hover { color: var(--navy); filter: brightness(1.05); }
.ht-step__sep { color: var(--border); flex: 0 0 auto; display: inline-flex; }

/* ---- Generic section ---------------------------------------------- */
.ht-sec { padding-block: clamp(56px, 7vw, 112px); scroll-margin-top: 76px; }
.ht-sec--warm { background: var(--warm-white); }
.ht-sec--sand { background: var(--sand); }
.ht-sec--navy { position: relative; background: var(--navy); color: #fff; overflow: hidden; }
.ht-sec__head { max-width: 720px; }
.ht-sec__head--center { margin-inline: auto; text-align: center; }
.ht-sec__intro { font-family: var(--font-body); font-size: 1.1875rem; line-height: 1.75; color: var(--ink); max-width: 680px; margin-top: 18px; }
.ht-sec--navy .ht-sec__intro { color: rgba(255,255,255,.85); }

/* ---- How it works (steps cards) ---------------------------------- */
.ht-how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 60px); }
.ht-card { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 34px 28px; box-shadow: var(--shadow-soft); position: relative; }
.ht-card__num { position: absolute; top: 24px; inset-inline-end: 28px; font-family: var(--font-display); font-size: 1.5rem; font-weight: 400; color: var(--border); }
.ht-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.4rem; color: var(--ink); margin: 0 0 10px; }
.ht-card p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: var(--muted); margin: 0; }

/* ---- Icon medallion ---------------------------------------------- */
.ht-ic { width: 56px; height: 56px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sand); color: var(--teal); margin-bottom: 20px; }
.ht-ic svg { width: 26px; height: 26px; stroke-width: 1.7; }

/* ---- Who it suits ------------------------------------------------- */
.ht-suits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; margin-top: clamp(40px, 5vw, 56px); }
.ht-suit { display: flex; gap: 18px; align-items: flex-start; background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 28px; box-shadow: var(--shadow-soft); }
.ht-suit__ic { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; background: var(--blush); color: var(--teal); display: inline-flex; align-items: center; justify-content: center; }
.ht-suit__ic svg { width: 22px; height: 22px; stroke-width: 1.8; }
.ht-suit h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; color: var(--ink); margin: 2px 0 7px; }
.ht-suit p { font-family: var(--font-body); font-size: .975rem; line-height: 1.6; color: var(--muted); margin: 0; }

/* ---- Recovery timeline (navy) ------------------------------------ */
.ht-tl { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(20px, 3vw, 40px); margin-top: clamp(44px, 5vw, 64px); position: relative; }
.ht-tl__item { position: relative; padding-top: 38px; }
.ht-tl__item::before { content: ""; position: absolute; top: 7px; inset-inline-start: 0; right: 0; height: 1px; background: rgba(201,169,110,.3); }
.ht-tl__dot { position: absolute; top: 0; inset-inline-start: 0; width: 15px; height: 15px; border-radius: 50%; background: var(--gold-gradient); box-shadow: 0 0 0 5px rgba(201,169,110,.18); }
.ht-tl__when { font-family: var(--font-body); font-size: .75rem; font-weight: 600; letter-spacing: .14em; color: var(--gold); margin-bottom: 12px; }
.ht-tl__item h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.55rem; color: #fff; margin: 0 0 10px; }
.ht-tl__item p { font-family: var(--font-body); font-size: 1rem; line-height: 1.65; color: rgba(255,255,255,.78); margin: 0; }
.ht-aftercare { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(40px, 5vw, 56px); }
.ht-chip { display: inline-flex; align-items: center; gap: 9px; padding: 11px 18px; border: 1px solid rgba(255,255,255,.22); border-radius: var(--radius-pill); font-family: var(--font-body); font-size: .95rem; color: rgba(255,255,255,.9); }
.ht-chip svg { width: 17px; height: 17px; stroke-width: 1.8; color: var(--gold); }

/* ---- Results ----------------------------------------------------- */
.ht-results { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.ht-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: clamp(36px, 4vw, 48px); }
.ht-stat { background: #fff; border: 1px solid var(--hairline); border-radius: var(--radius-card); padding: 30px; box-shadow: var(--shadow-soft); }
.ht-stat__big { font-family: var(--font-display); font-weight: 400; font-size: 3rem; line-height: 1; color: var(--teal); }
.ht-stat__big .gold { font-weight: 400; }
.ht-stat__label { font-family: var(--font-body); font-size: .975rem; line-height: 1.5; color: var(--muted); margin-top: 10px; }
.ht-results__media { position: relative; border-radius: var(--radius-arch); overflow: hidden; box-shadow: var(--shadow-card); aspect-ratio: 4/5; max-height: min(70vh, 640px); }
.ht-results__media img { width: 100%; height: 100%; object-fit: cover; object-position: top center; filter: sepia(.12) saturate(1.08) contrast(.98); }
.ht-results__tag { position: absolute; bottom: 20px; inset-inline-start: 20px; background: rgba(0,36,49,.82); color: #fff; font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; padding: 10px 18px; border-radius: var(--radius-pill); }

/* ---- FAQ accordion ----------------------------------------------- */
.ht-faq { max-width: 880px; margin: clamp(36px, 5vw, 56px) auto 0; }
.ht-faq__item { border-bottom: 1px solid var(--hairline); }
.ht-faq__item:first-child { border-top: 1px solid var(--hairline); }
.ht-faq__q { width: 100%; text-align: start; background: none; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 26px 4px; font-family: var(--font-body); font-size: 1.1875rem; font-weight: 500; color: var(--ink); transition: color .2s; }
.ht-faq__q:hover { color: var(--gold-deep); }
.ht-faq__plus { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--teal); transition: transform .3s var(--ease-out), background .2s, color .2s, border-color .2s; }
.ht-faq__plus svg { width: 16px; height: 16px; stroke-width: 2; }
.ht-faq__item.open .ht-faq__plus { transform: rotate(45deg); background: var(--gold-gradient); color: var(--navy); border-color: transparent; }
.ht-faq__a { overflow: hidden; max-height: 0; transition: max-height .35s var(--ease-out); }
.ht-faq__item.open .ht-faq__a { max-height: 320px; }
.ht-faq__a p { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.7; color: var(--muted); margin: 0; padding: 0 4px 28px; max-width: 760px; }

/* ---- Booking ----------------------------------------------------- */
.ht-book { position: relative; }
.ht-book__card { max-width: 760px; margin: 0 auto; text-align: center; }
.ht-form { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: clamp(32px, 4vw, 44px) auto 0; text-align: start; }
.ht-field { display: flex; flex-direction: column; gap: 8px; }
.ht-field--full { grid-column: 1 / -1; }
.ht-field label { font-family: var(--font-body); font-size: .8125rem; font-weight: 600; letter-spacing: .1em; color: rgba(255,255,255,.7); }
.ht-input { font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--cream); border: 1px solid transparent; border-radius: var(--radius-sm); padding: 15px 18px; transition: border-color .2s, box-shadow .2s; width: 100%; box-sizing: border-box; }
.ht-input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201,169,110,.25); }
select.ht-input { appearance: none; cursor: pointer; }
.ht-form .hl-btn { grid-column: 1 / -1; margin-top: 6px; border: none; cursor: pointer; }
.ht-form__error { grid-column: 1 / -1; font-family: var(--font-body); font-size: .85rem; color: #ff8a8a; text-align: center; margin: 0; }
.ht-book__note { font-family: var(--font-body); font-size: .9375rem; color: rgba(255,255,255,.62); margin-top: 20px; }
.ht-book__note a { color: var(--gold); }
.ht-book__success { color: var(--gold); font-weight: 600; }

/* ---- Decorative arcs -------------------------------------------- */
.ht-sec--navy .hl-arc { border-color: rgba(201,169,110,.35); }

/* ---- Responsive -------------------------------------------------- */
@media (max-width: 1000px) {
  .ht-how { grid-template-columns: 1fr 1fr; }
  .ht-suits { grid-template-columns: 1fr 1fr; }
  .ht-results { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .ht-hero { height: auto; }
  .ht-hero__grid { grid-template-columns: 1fr; height: auto; min-height: 0; }
  .ht-hero__content { max-height: none; overflow-y: visible; }
  .ht-hero__media { min-height: 300px; height: auto; order: -1; }
  .ht-how, .ht-suits, .ht-tl, .ht-stats { grid-template-columns: 1fr; }
  .ht-form { grid-template-columns: 1fr; }
  .ht-steps__inner { justify-content: flex-start; }
  .ht-tl__item { padding-top: 32px; }
}