/* Auravell footer + shared shell tweaks (owned by the home builder).
   One dark photo block: CTA heading on top, then brand / navigation / stores, then a centred bottom bar.
   Photo = the real Taipei store interior under a dark gradient; faint vertical grid lines like Auravell. */

.ftr { position: relative; isolation: isolate; overflow: hidden; background: var(--dark); color: #fff; padding-top: clamp(120px, 11.4vw, 164px); }
.ftr__bg { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.ftr__shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(180deg, rgba(23, 24, 26, .62) 0%, rgba(23, 24, 26, .9) 34%, rgba(23, 24, 26, .985) 58%); }
.ftr__lines { position: absolute; inset: 0 0 auto; z-index: -1; height: 64%; display: flex; justify-content: space-evenly; pointer-events: none; }
.ftr__lines i { width: 1px; height: 100%; background: linear-gradient(180deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, 0)); }
.ftr :focus-visible { outline-color: #fff; }

.ftr__cta { display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.ftr__eyebrow { font: 400 var(--fs-small)/1.4 var(--f-zh-serif); letter-spacing: .24em; color: rgba(255, 255, 255, .82); }
.ftr__title { max-width: 14em; font: 400 clamp(2.1rem, 1.6vw + 1.75rem, 3.5rem)/1.32 var(--f-serif); letter-spacing: .04em; color: #fff; }
.ftr__ac { color: #E9C9C3; }
.ftr__btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 8px; }
.ftr__btn { background: #fff; border-color: #fff; color: var(--burgundy); --fill: var(--burgundy); }
.ftr__btn:hover, .ftr__btn:focus-visible { color: #fff; border-color: var(--burgundy); }

.ftr__row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr) minmax(0, 1.1fr); gap: 56px 48px; padding-block: clamp(96px, 10vw, 150px) clamp(64px, 7vw, 100px); }
.ftr__col { display: flex; flex-direction: column; gap: 40px; min-width: 0; }
.ftr__logo { display: inline-block; align-self: flex-start; }
.ftr__logo img { width: 168px; height: auto; mix-blend-mode: screen; }
.ftr__line { font: 400 1.0625rem/1.8 var(--f-zh-serif); letter-spacing: .08em; color: #fff; }
.ftr__h { margin-bottom: 14px; font: 400 1.125rem/1.4 var(--f-serif); letter-spacing: .08em; color: #fff; }
.ftr__muted { color: var(--on-dark-muted); line-height: 1.9; }
.ftr__col--nav { gap: 0; }
.ftr__navcols { display: flex; gap: 40px; }
.ftr__links { min-width: 120px; }
.ftr__links li + li { margin-top: 12px; }
.ftr__links a, .ftr__social a, .ftr__plain { color: #fff; transition: color .3s ease; }
.ftr__links a:hover, .ftr__social a:hover, .ftr__plain:hover,
.ftr__links a:focus-visible, .ftr__social a:focus-visible, .ftr__plain:focus-visible { color: #E9C9C3; }
.ftr__col--contact { gap: 32px; }
.ftr__addr { font-style: normal; font-size: var(--fs-small); line-height: 1.85; color: #fff; }
.ftr__addr .ftr__h { margin-bottom: 8px; }
.ftr__social-wrap { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.ftr__social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ftr__social span { color: var(--on-dark-muted); }
.ftr__qr { flex: none; display: grid; justify-items: center; gap: 8px; }
.ftr__qr img { width: 88px; height: 88px; padding: 6px; border-radius: 6px; background: #fff; }
.ftr__qr figcaption { font-size: .75rem; letter-spacing: .1em; color: var(--on-dark-muted); }

.ftr__bar { padding-block: 26px 32px; border-top: 1px solid rgba(255, 255, 255, .15); text-align: center; font-size: var(--fs-label); letter-spacing: .1em; color: var(--on-dark-muted); }

@media (max-width: 991px) {
  .ftr__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ftr__col--contact { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px 48px; }
  .ftr__social-wrap { grid-column: 1 / -1; justify-content: flex-start; gap: 48px; }
}
@media (max-width: 640px) {
  .ftr { padding-top: 112px; }
  .ftr__row { grid-template-columns: minmax(0, 1fr); gap: 48px; padding-block: 88px 56px; }
  .ftr__col--contact { display: flex; gap: 32px; }
  .ftr__social-wrap { justify-content: space-between; gap: 24px; }
  .ftr__navcols { gap: 24px; }
  .ftr__links { flex: 1 1 0; min-width: 0; }
  .ftr__bar { padding-bottom: 84px; } /* clear the fixed LINE button + proposal badge */
}

/* ===== Section gap: 180px between sections everywhere (90px top + 90px bottom per section) =====
   Sections built with their own padding are normalised here. First sections keep the extra top
   room they need under the floating header; full-bleed photo bands and strips keep 0. */
@media (max-width: 640px) { :root { --sec: 60px; } }
html body :is(.k4-head, .x4-intro) { padding-bottom: var(--sec) !important; }
html body .k4-featsec { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
html body .h4-bene { padding-top: var(--sec) !important; }
html body .h4-acad { padding-bottom: var(--sec) !important; }
html body :is(.k4-list, .k4-news, .k4-cta, .x4-needs, .x4-close, .c4-g) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
html body .x4-cat { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
html body .ftr { padding-top: var(--sec) !important; }
html body :is(.h4-arch, .h4-why, .h4-bene, .h4-incl, .p4-about, .p4-more, .p4-rel, .p4-cta, .p4-pn, .r4-rel) { padding-top: var(--sec) !important; padding-bottom: var(--sec) !important; }
html body .p4-hero { padding-bottom: var(--sec) !important; }

/* Header: same width as Auravell's bar (1560 max, centred) + Pulseon-style rise / return */
.hd__in { max-width: 1560px; margin-inline: auto; }
.hd { transition: transform .9s cubic-bezier(.22, 1, .36, 1); }
.hd.is-hidden { transform: translateY(-160%); }
.hd.is-solid .hd__in { box-shadow: 0 10px 30px rgba(23, 24, 26, .1); }
@media (prefers-reduced-motion: reduce) { .hd { transition: none; } }

/* Stories: the heading fades away as the cards slide over it */
.h4-stories.is-pinned .h4-stories__head { opacity: calc(1 - var(--hp, 0) * 6); }

/* Returning sticky header = full-width white bar (content stays on the 1560 line) */
.hd.is-solid { inset: 0 0 auto; background: #fff; box-shadow: 0 8px 30px rgba(23, 24, 26, .08); }
.hd.is-solid .hd__in { box-shadow: none; border-radius: 0; height: 76px; }

/* Dark band: the three columns share one bottom line */
.h4-bene__cards { align-items: stretch; }
.h4-bene__cards > * { transform: none !important; translate: none !important; }

/* Hero: fits one desktop screen; smaller see-through consultation card so the pendants show */
@media (min-width: 992px) {
  html body .h4-hero { min-height: 100svh; height: 100svh; max-height: 1080px; padding-bottom: clamp(40px, 5vw, 72px); }
  html body .h4-hcard { width: 260px; padding: 8px 8px 16px; background: rgba(254, 249, 239, .55); backdrop-filter: blur(14px) saturate(1.2); -webkit-backdrop-filter: blur(14px) saturate(1.2); box-shadow: 0 12px 36px rgba(42, 43, 47, .1); border: 1px solid rgba(255, 255, 255, .6); }
  html body .h4-hcard .h4-hcard__media { aspect-ratio: 16 / 7; width: 100%; height: auto; display: block; }
  html body .h4-hcard .h4-hcard__media img { width: 100%; height: 100%; object-fit: cover; }
}

/* Hero card thumbnail: crop to the jewellery only (bracelet, purple drop, yellow carving), hide the banner's text */
html body .h4-hcard .h4-hcard__media { aspect-ratio: 16 / 7 !important; height: auto !important; overflow: hidden; }
html body .h4-hcard .h4-hcard__media img { width: 100% !important; height: 100% !important; object-fit: cover !important; object-position: center !important; transform: scale(1.92) !important; transform-origin: 3% 50% !important; }
html body .h4-hcard:hover .h4-hcard__media img { transform: scale(1.96) !important; }
html body .h4-hcard .h4-hcard__tag { right: 10px !important; bottom: 10px !important; left: auto !important; top: auto !important; }

/* Footer background: taller than the footer so it can drift while scrolling (Pulseon-style) */
.ftr__bg { top: -30% !important; height: 160% !important; inset: auto 0 auto 0; will-change: transform; }

/* 「開始你的能量諮詢」 band: same drifting background as the footer */
html body .h4-bene__bg img { position: absolute; left: 0; top: -20%; height: 140% !important; will-change: transform; }

/* Hero card: stacked layout as before, just wider */
@media (min-width: 992px) { html body .h4-hcard { width: 340px; } }

/* ===== Page loader: seal draws, name rises, line fills, then the cream curtain lifts ===== */
.ldr { position: fixed; inset: 0; z-index: 1000; display: grid; place-items: center; background: var(--paper);
  transition: transform 1s cubic-bezier(.76, 0, .24, 1), visibility 0s linear 1s;
  animation: ldr-failsafe 0s linear 4.5s forwards; }            /* never blocks the page, even without JS */
.ldr.is-done { transform: translateY(-100%); visibility: hidden; }
.ldr__in { display: grid; justify-items: center; gap: 22px; transition: opacity .4s, transform .6s cubic-bezier(.22,1,.36,1); }
.ldr.is-done .ldr__in { opacity: 0; transform: translateY(-30px); }
.ldr__seal { width: 64px; height: 64px; overflow: visible; }
.ldr__d { fill: none; stroke: var(--burgundy); stroke-width: 1.2; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: ldr-draw 1.4s cubic-bezier(.65,0,.35,1) forwards; }
.ldr__d + .ldr__d { animation-delay: .35s; }
.ldr__name { display: flex; gap: .45em; margin: 0; font: 400 1.6rem/1 var(--f-zh-serif); letter-spacing: .1em; color: var(--ink); overflow: hidden; }
.ldr__name span { display: inline-block; transform: translateY(110%); opacity: 0; animation: ldr-rise .8s cubic-bezier(.22,1,.36,1) forwards; }
.ldr__name span:nth-child(1) { animation-delay: .5s; } .ldr__name span:nth-child(2) { animation-delay: .6s; }
.ldr__name span:nth-child(3) { animation-delay: .7s; } .ldr__name span:nth-child(4) { animation-delay: .8s; }
.ldr__line { position: relative; width: 140px; height: 1px; margin: 0; background: var(--line); overflow: hidden; }
.ldr__line i { position: absolute; inset: 0; background: var(--burgundy); transform: scaleX(var(--lp, 0)); transform-origin: left; transition: transform .4s ease; }
@keyframes ldr-draw { to { stroke-dashoffset: 0; } }
@keyframes ldr-rise { to { transform: none; opacity: 1; } }
@keyframes ldr-failsafe { to { visibility: hidden; opacity: 0; } }
html.ldr-quick .ldr__d, html.ldr-quick .ldr__name span { animation-duration: .5s; animation-delay: 0s; }
@media (prefers-reduced-motion: reduce) { .ldr { display: none; } }
/* Hero card text block: tighter, meta on one line */
@media (min-width: 992px) {
  html body .h4-hcard { padding-bottom: 12px; }
  html body .h4-hcard .h4-hcard__day { margin: 12px 8px 0; }
  html body .h4-hcard .h4-hcard__title { margin: 4px 8px 0; font-size: 1.3rem; line-height: 1.35; }
  html body .h4-hcard .h4-hcard__meta { margin: 8px 8px 0; display: flex; flex-wrap: nowrap; gap: 4px 14px; row-gap: 0; font-size: .82rem; white-space: nowrap; }
  html body .h4-hcard .h4-hcard__meta > * { margin: 0; }
}
html.ldr-skip .ldr { display: none !important; }

/* Swipe rows that bleed to the right: no empty space after the last card at the end of the scroll */
html body :is(.p4-rel__track, .c4-st__track, .x4-strip__track) { padding-right: 20px !important; }