/* ============================================================
   Hani Len — Shared flexible page-builder sections
   (low_hero, why_choose, content_split — reused by about, testimonials,
   membership, before/after via group_hl_flexible_page_builder)
   Prefix: ab-
   ============================================================ */

/* ---- Lower hero ---------------------------------------------------- */
.ab-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(300px, 40vh, 440px);
  display: flex;
  align-items: center;
}
.ab-hero__bgimg {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: sepia(.12) saturate(1.06) contrast(.98); z-index: 0;
}
.ab-hero__veil {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(212deg, rgba(0,0,0,.30) 24%, rgba(0,0,0,0) 48%),
              linear-gradient(0deg, rgba(0,36,49,.75) 0%, rgba(0,36,49,.75) 100%);
}
.ab-hero.hl-hero-bg--teal .ab-hero__veil {
  background: linear-gradient(212deg, rgba(0,0,0,.30) 24%, rgba(0,0,0,0) 48%),
              linear-gradient(0deg, rgba(39,73,78,.75) 0%, rgba(39,73,78,.75) 100%);
}
.ab-hero.hl-hero-bg--plum .ab-hero__veil {
  background: linear-gradient(212deg, rgba(0,0,0,.30) 24%, rgba(0,0,0,0) 48%),
              linear-gradient(0deg, rgba(59,33,48,.75) 0%, rgba(59,33,48,.75) 100%);
}
.ab-hero.hl-hero-bg--charcoal .ab-hero__veil {
  background: linear-gradient(212deg, rgba(0,0,0,.30) 24%, rgba(0,0,0,0) 48%),
              linear-gradient(0deg, rgba(18,24,31,.75) 0%, rgba(18,24,31,.75) 100%);
}
.ab-hero__inner {
  position: relative;
  z-index: 2;
  padding-block: clamp(48px, 7vw, 88px);
  max-width: 720px;
}
.ab-crumb {
  font-family: var(--font-body);
  font-size: .8125rem;
  letter-spacing: .04em;
  color: rgba(255,255,255,.6);
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 22px;
}
.ab-crumb a { color: rgba(255,255,255,.78); }
.ab-crumb a:hover { color: var(--gold); }
.ab-crumb span { color: rgba(255,255,255,.35); }
.ab-hero h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-display-lg);
  line-height: 1.04;
  color: #fff;
  margin: .12em 0 0;
}
.ab-hero__lead {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: rgba(255,255,255,.82);
  max-width: 520px;
  margin-top: 18px;
}
.ab-scrollcue {
  position: absolute;
  z-index: 3;
  bottom: 18px;
  inset-inline-start: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.55);
  font-family: var(--font-body);
  font-size: .72rem;
  letter-spacing: .22em;
}
.ab-scrollcue svg { animation: ab-bob 1.8s var(--ease-out) infinite; }
@keyframes ab-bob { 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(5px);} }
@media (prefers-reduced-motion: reduce) { .ab-scrollcue svg { animation: none; } }

/* ---- Why choose — pillars ---------------------------------------- */
.ab-why__head { max-width: 620px; }
.ab-why__lead { margin-top: 18px; }
.ab-pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 44px);
  margin-top: clamp(40px, 5vw, 68px);
}
.ab-pillar {
  border-top: 1px solid var(--hairline);
  padding-top: 26px;
}
.ab-pillar__ic {
  width: 46px; height: 46px;
  color: var(--teal);
  display: inline-flex;
}
.ab-pillar__ic svg { width: 100%; height: 100%; stroke-width: 1.4; }
.ab-pillar h3 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: var(--fs-card-title);
  color: var(--ink);
  margin: 18px 0 10px;
  line-height: 1.15;
}
.ab-pillar p {
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.62;
  color: var(--muted);
}

/* ---- Media split (philosophy / founder) -------------------------- */
.ab-media {
  border-radius: var(--radius-arch);
  overflow: hidden;
  box-shadow: var(--shadow-card);
  aspect-ratio: 4/5;
  /* On wide desktop viewports the split column can exceed ~800px, which at a
     4/5 ratio makes the image taller than the viewport itself (it gets cut
     off when scrolling to the section). Cap the height so the whole image
     is visible; the ratio still governs narrower/mobile widths. */
  max-height: min(70vh, 640px);
}
.ab-media--card { border-radius: var(--radius-card); }
.ab-media img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center top;
  filter: sepia(.12) saturate(1.06) contrast(.98);
}
.ab-body p + p { margin-top: 1em; }
.ab-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: .8125rem;
  font-weight: 600;
  letter-spacing: .12em;
  color: var(--gold-deep);
  margin-top: 22px;
}
.ab-tag::before {
  content: "";
  width: 28px; height: 1px;
  background: var(--gold-gradient);
}

/* ---- Testimonial carousel (tm-) ------------------------------------ */
.tm-carousel { position: relative; max-width: 900px; margin-inline: auto; margin-top: clamp(40px,5vw,68px); }
.tm-viewport { overflow: hidden; direction: ltr; }
.tm-track { display: flex; transition: transform .6s var(--ease-out); }
.tm-slide { flex: 0 0 100%; min-width: 0; margin: 0; padding-inline: clamp(8px, 4vw, 56px); box-sizing: border-box; direction: rtl; text-align: center; overflow: hidden; }
.tm-mark { font-family: var(--font-display); font-size: clamp(56px, 9vw, 110px); line-height: .6; color: var(--gold-deep); opacity: .45; height: .5em; display: block; }
.tm-quote { font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 3vw, 2.35rem); line-height: 1.32; color: var(--ink); margin: 0 auto; max-width: 720px; text-wrap: pretty; }
.tm-stars { display: inline-flex; gap: 4px; color: var(--gold-deep); margin-top: 24px; }
.tm-stars svg { width: 19px; height: 19px; }
.tm-name { font-family: var(--font-body); font-weight: 600; font-size: .95rem; letter-spacing: .04em; color: var(--ink); margin-top: 18px; }
.tm-role { font-family: var(--font-body); font-size: .82rem; letter-spacing: .12em; text-transform: uppercase; color: var(--gold-deep-text); margin-top: 6px; }

.tm-nav { position: absolute; top: 46%; transform: translateY(-50%); z-index: 4; width: 50px; height: 50px; border-radius: 50%; background: #fff; border: 1px solid var(--hairline); box-shadow: var(--shadow-card); display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--navy); transition: color .25s var(--ease-out), border-color .25s var(--ease-out); }
.tm-nav:hover { color: var(--gold-deep); border-color: var(--gold-deep); }
.tm-nav svg { width: 22px; height: 22px; }
.tm-nav--prev { inset-inline-end: -8px; }
.tm-nav--next { inset-inline-start: -8px; }
@media (max-width: 1000px) {
  .tm-nav--prev { inset-inline-end: 0; }
  .tm-nav--next { inset-inline-start: 0; }
}

.tm-dots { display: flex; gap: 10px; justify-content: center; margin-top: clamp(32px,4vw,48px); }
.tm-dot { width: 9px; height: 9px; border-radius: 50%; border: none; cursor: pointer; background: var(--hairline); transition: background .25s var(--ease-out), width .25s var(--ease-out); padding: 0; }
.tm-dot.on { background: var(--gold-gradient); width: 26px; border-radius: 999px; }

/* Real pause/play control for the auto-advancing quote rotation — hover
   alone isn't reachable by keyboard/touch users, so content that starts
   moving on its own needs an explicit way to stop it (WCAG 2.2.2). Sized
   and styled like the existing .hl-marquee__pause control used elsewhere
   on the site for the same reason. */
.tm-pausewrap { display: flex; justify-content: center; margin-top: 14px; }
.tm-nav--pause {
  position: static; width: 32px; height: 32px;
  background: #fff; border: 1px solid var(--hairline); color: var(--navy);
}
.tm-nav--pause:hover, .tm-nav--pause:focus-visible { color: var(--gold-deep); border-color: var(--gold-deep); }
.tm-nav--pause svg { width: 14px; height: 14px; }
.tm-nav--pause .tm-play-ic { display: none; }
.tm-carousel.is-paused .tm-nav--pause .tm-pause-ic { display: none; }
.tm-carousel.is-paused .tm-nav--pause .tm-play-ic { display: block; }

/* ---- Membership: join intro (mb-) ----------------------------------- */
.mb-join__inner { max-width: 720px; margin-inline: auto; text-align: center; }
.mb-join__lead { font-family: var(--font-body); font-size: 1.15rem; line-height: 1.66; color: var(--muted); margin: 20px auto 14px; max-width: 600px; }
.mb-join__note { font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.62; color: var(--ink); max-width: 600px; margin: 0 auto 34px; }
.mb-join__cta { display: inline-flex; }

/* ---- Membership: benefit cards (mb-) --------------------------------- */
.mb-benefits__head { text-align: center; max-width: 640px; margin: 0 auto; }
.mb-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.2vw, 30px); margin-top: clamp(40px,5vw,64px); }
.mb-card { background: var(--warm-white); border: 1px solid var(--hairline); border-radius: var(--radius-card); box-shadow: var(--shadow-card); padding: clamp(26px, 2.4vw, 36px); display: flex; flex-direction: column; align-items: flex-start; transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.mb-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-float); }
.mb-card__ic { width: 54px; height: 54px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sand); color: var(--teal); margin-bottom: 20px; }
.mb-card__ic svg { width: 26px; height: 26px; stroke-width: 1.5; }
.mb-card h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; color: var(--ink); margin: 0 0 9px; line-height: 1.15; }
.mb-card p { font-family: var(--font-body); font-size: 1rem; line-height: 1.58; color: var(--muted); margin: 0; }

/* ---- Before/after gallery (ba-) --------------------------------------- */
.ba-filters { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: clamp(8px,2vw,18px); }
.ba-filter {
  font-family: var(--font-body); font-size: 1rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink);
  background: transparent; border: 1px solid var(--hairline);
  border-radius: 999px; padding: 11px 26px; cursor: pointer;
  transition: color .25s var(--ease-out), background .25s var(--ease-out), border-color .25s var(--ease-out);
}
.ba-filter:hover { border-color: var(--gold-deep); color: var(--gold-deep); }
.ba-filter.on { background: var(--navy); border-color: var(--navy); color: #fff; }

.ba-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: clamp(22px, 2.6vw, 38px); margin-top: clamp(36px, 4.5vw, 60px); }
.ba-card { display: flex; flex-direction: column; }
.ba-card[hidden] { display: none; }

.ba-view {
  position: relative; aspect-ratio: 4/5; overflow: hidden;
  border-radius: var(--radius-card); box-shadow: var(--shadow-card);
  user-select: none; touch-action: pan-y; --pos: 50%;
}
.ba-view img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.ba-view__before { filter: grayscale(.55) brightness(.92) contrast(.97); }
.ba-view__after  { filter: sepia(.14) saturate(1.12) contrast(1.0); clip-path: inset(0 calc(100% - var(--pos)) 0 0); }

.ba-tag {
  position: absolute; top: 14px; z-index: 3;
  font-family: var(--font-body); font-size: .72rem; font-weight: 600;
  letter-spacing: .14em; padding: 6px 12px; border-radius: 999px;
  background: rgba(0,36,49,.62); color: #fff; backdrop-filter: blur(4px);
}
.ba-tag--before { inset-inline-end: 14px; }
.ba-tag--after  { inset-inline-start: 14px; background: var(--gold-gradient); color: var(--navy); }

.ba-divider {
  position: absolute; top: 0; bottom: 0; z-index: 4;
  left: var(--pos); width: 2px; transform: translateX(-1px);
  background: rgba(255,255,255,.9); box-shadow: 0 0 0 1px rgba(0,36,49,.15);
}
.ba-handle {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 42px; height: 42px; border-radius: 50%;
  background: #fff; box-shadow: var(--shadow-card);
  display: flex; align-items: center; justify-content: center; cursor: ew-resize;
  color: var(--navy);
}
.ba-handle svg { width: 22px; height: 22px; }

.ba-card__meta { margin-top: 16px; }
.ba-card__meta h3 { font-family: var(--font-display); font-weight: 400; font-size: 1.45rem; color: var(--ink); margin: 0; line-height: 1.15; }
.ba-card__meta p { font-family: var(--font-body); font-size: .98rem; line-height: 1.55; color: var(--muted); margin: 7px 0 0; }
.ba-card__cat { display: inline-block; margin-top: 11px; font-family: var(--font-body); font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--gold-deep-text); }
.ba-hint { text-align: center; margin-top: clamp(40px,5vw,64px); font-family: var(--font-body); font-size: .9rem; color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 9px; }
.ba-hint svg { width: 18px; height: 18px; stroke: var(--gold-deep); }

/* ---- Responsive ---------------------------------------------------- */
@media (max-width: 900px) {
  .ab-pillars { grid-template-columns: 1fr; gap: 30px; }
  .ab-hero__inner { max-width: 100%; }
  .mb-grid { grid-template-columns: 1fr; }
}
@media (max-width: 600px) {
  .ba-grid { grid-template-columns: 1fr; }
}