/* Luxe — gelap, elegan, garis emas tipis */
.fam-luxe {
  --card: color-mix(in oklab, var(--bg) 94%, var(--ink));
  --surface: color-mix(in oklab, var(--bg) 93%, var(--ink));
  --surface-2: color-mix(in oklab, var(--bg) 86%, var(--ink));
  --line: color-mix(in oklab, var(--ink) 14%, var(--bg));
  --tint: color-mix(in oklab, var(--primary) 14%, var(--bg));
  --shadow: none; --shadow-lg: 0 30px 60px -20px rgb(0 0 0 / .6);
  --head-tracking: -0.005em;
}
.fam-luxe .display, .fam-luxe .h1, .fam-luxe .h2 { font-weight: var(--head-weight); line-height: 1.05; }
.fam-luxe .display { font-size: clamp(2.4rem, 1.2rem + 5vw, 5.4rem); }
.fam-luxe .display em, .fam-luxe .h1 em, .fam-luxe .h2 em { font-style: italic; color: var(--primary-text); }
.fam-luxe .eyebrow { color: var(--primary-text); letter-spacing: .24em; font-size: .74rem; font-weight: 600; gap: .9rem; }
.fam-luxe .eyebrow::before, .fam-luxe .sec-head--center .eyebrow::after { content: ""; width: 32px; height: 1px; background: currentColor; opacity: .7; }
.fam-luxe .hero--full .eyebrow { color: var(--primary); }
.fam-luxe .btn { text-transform: uppercase; letter-spacing: .16em; font-size: .74rem; font-weight: 600; padding-inline: 1.8rem; min-height: 50px; }
.fam-luxe .btn--primary { --btn-bg: var(--primary); --btn-ink: var(--on-primary); }
.fam-luxe .btn--primary:hover { background: transparent; color: var(--primary-text); border-color: var(--primary); }
.fam-luxe .btn--ghost { border-color: color-mix(in oklab, var(--primary) 55%, transparent); color: var(--ink); }
.fam-luxe .btn--ghost:hover { border-color: var(--primary); color: var(--primary-text); }
.fam-luxe .hdr { background: color-mix(in oklab, var(--bg) 88%, transparent); }
.fam-luxe .nav__a { text-transform: uppercase; letter-spacing: .16em; font-size: .72rem; font-weight: 600; }
.fam-luxe .nav__a.is-active::after { height: 1px; background: var(--primary); }
.fam-luxe .brand__name { font-size: 1.4rem; font-weight: 600; letter-spacing: .01em; }
.fam-luxe .brand__mark { background: transparent; color: var(--primary-text); border: 1px solid var(--primary); font-family: var(--font-head), serif; font-size: 1.1rem; }

/* header transparan di atas hero foto penuh */
.fam-luxe.has-overlay .hdr:not(.is-scrolled):not(.is-menu) { position: fixed; left: 0; right: 0; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; color: #fff; border-bottom-color: rgb(255 255 255 / .14); }
.fam-luxe.has-overlay .hdr:not(.is-scrolled):not(.is-menu) .nav__a { color: rgb(255 255 255 / .86); }
.fam-luxe.has-overlay .hdr:not(.is-scrolled):not(.is-menu) .nav__a:hover { background: rgb(255 255 255 / .08); color: #fff; }
.fam-luxe.has-overlay .hdr:not(.is-scrolled):not(.is-menu) .icon-btn { border-color: rgb(255 255 255 / .3); }
.fam-luxe.has-overlay .hdr.is-scrolled, .fam-luxe.has-overlay .hdr.is-menu { position: fixed; left: 0; right: 0; }

.fam-luxe .sec-head { text-align: center; justify-items: center; margin-inline: auto; }
.fam-luxe .sec-head .lead { margin-inline: auto; }
.fam-luxe .sec-head--split { justify-items: stretch; text-align: left; }
.fam-luxe .sec-head--split > div { justify-items: start; }
.fam-luxe .sec-head--split .lead { margin-inline: 0; }
.fam-luxe .hero__img, .fam-luxe .about__img, .fam-luxe .feats-split__img, .fam-luxe .pd__main, .fam-luxe .ahero__img { border-radius: 0; }

.fam-luxe .price__now { color: var(--primary-text); }
.fam-luxe .badge { border-radius: 0; background: var(--bg); color: var(--primary-text); border: 1px solid var(--primary); letter-spacing: .12em; text-transform: uppercase; font-size: .72rem; }

.fam-luxe .feat, .fam-luxe .step, .fam-luxe .tcard, .fam-luxe .cinfo { border-radius: 0; background: transparent; border-color: var(--line); }
.fam-luxe .feat__ic { background: transparent; border: 1px solid color-mix(in oklab, var(--primary) 50%, transparent); border-radius: 999px; }
.fam-luxe .step__n { background: transparent; border: 1px solid var(--primary); color: var(--primary-text); font-family: var(--font-head), serif; font-size: 1.3rem; }
.fam-luxe .stats { border-radius: 0; background: var(--line); border-color: var(--line); }
.fam-luxe .stat { background: var(--bg); text-align: center; }
.fam-luxe .stat__v { font-weight: 500; font-size: clamp(2.2rem, 1.6rem + 2.4vw, 3.6rem); }
.fam-luxe .cat { border-radius: 0; }
.fam-luxe .cta { border-radius: 0; text-align: center; }
.fam-luxe .cta__in { margin-inline: auto; justify-items: center; }
.fam-luxe .cta .btn-row { justify-content: center; }
.fam-luxe .cta .btn--light { --btn-bg: var(--primary); --btn-ink: var(--on-primary); }
.fam-luxe .faq__q { font-family: var(--font-head), serif; font-size: clamp(1.15rem, 1rem + .6vw, 1.45rem); font-weight: 600; }
.fam-luxe .tquote__q { font-style: italic; font-weight: 500; }
.fam-luxe .chip { border-radius: 0; text-transform: uppercase; letter-spacing: .1em; font-size: .74rem; font-weight: 600; }
.fam-luxe .chip.is-active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fam-luxe .input, .fam-luxe .select, .fam-luxe .textarea { border-radius: 0; background: var(--card); }
.fam-luxe .opt__v span, .fam-luxe .qty { border-radius: 0; background: var(--card); }
.fam-luxe .opt__v input:checked + span { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.fam-luxe .wa-preview { background: #12301c; color: #d9f7df; border-color: #1f4d2c; }
.fam-luxe .price__now, .fam-luxe .prow__price { font-family: var(--font-body), sans-serif; font-weight: 600; letter-spacing: .01em; font-size: 1rem; }
.fam-luxe .pd__price .price__now { font-size: 1.6rem; }

/* ===== Identitas Luxe: tenang, simetris, aksen emas ===== */
.fam-luxe .hero .btn-row--stack > .btn { flex: 0 1 auto; }
.fam-luxe .hero--full .hero__text { justify-items: center; margin-inline: auto; text-align: center; }
.fam-luxe .hero--full .btn-row, .fam-luxe .hero--full .hero__badges { justify-content: center; }
.fam-luxe .hero__badges { gap: .4rem 1.2rem; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; }
.fam-luxe .hero__badge .ic { display: none; }
.fam-luxe .hero__badge::before { content: "◆"; margin-right: .5rem; color: var(--primary); font-size: .6rem; }
.fam-luxe .sec-head:not(.sec-head--split) { justify-items: center; margin-inline: auto; text-align: center; }
.fam-luxe .sec-head:not(.sec-head--split) .lead { margin-inline: auto; }
.fam-luxe .cat { aspect-ratio: 3 / 4; }
.fam-luxe .cat__name { font-size: clamp(1.2rem, 1rem + .8vw, 1.6rem); }
.fam-luxe .cat__n { color: var(--primary); letter-spacing: .14em; text-transform: uppercase; font-size: .72rem; }
