/* The Gilded template for a company's website (Settings → Company → Website → Template): the same page as
   css/company-site.css, black and metallic gold. A serif for titles (sentence case, one phrase in gold on the same
   line) and a round sans for everything else; rounded glass cards with faint borders; gold pill buttons with a glow.
   Its own layout: a glass header, a centered opening, centered section titles with a line each side of the label,
   treatments as glass cards with a gold button, the steps as numbered rows, the closing words in a glass panel over
   the photo, a call button for each location floating at the side, and a gold line across the top that fills as the
   page scrolls. Loaded after the base stylesheet. */
:root {
    --bg: #0d0d0d;
    --bg-2: #101010;
    --bg-3: #161616;
    --ink: #ffffff;
    --muted: #b8b8b8;
    --faint: #777777;
    --gold: #d4af37;
    --gold-hi: #f6d67a;
    --gold-lo: #a8872a;
    --gold-grad: linear-gradient(135deg, #a8872a, #d4af37, #f6d67a);
    --line: rgba(212, 175, 55, .25);
    --line-soft: rgba(255, 255, 255, .06);
    --serif: "Cormorant Garamond", Georgia, serif;
    --sans: Poppins, "Helvetica Neue", system-ui, sans-serif;
    --ink-rgb: 255, 255, 255;
    --bg-rgb: 13, 13, 13;
    --shade-rgb: 13, 13, 13;
    --veil-rgb: 0, 0, 0;
    --gold-rgb: 212, 175, 55;
    --gold-hi-rgb: 246, 214, 122;
    --on-gold: #0d0d0d;
    --glow: #1a1711;
    --glow-2: #15130f;
    --glass: rgba(255, 255, 255, .04);
    --round: 1.5rem;
}
body { font-weight: 400; font-size: .9375rem; }

/* A gold line across the top that fills as the page scrolls (where the browser can). */
@supports (animation-timeline: scroll()) {
    body::before { content: ""; position: fixed; inset: 0 0 auto 0; z-index: 60; height: 3px; background: linear-gradient(90deg, #a8872a, #d4af37, #f6d67a); transform-origin: 0 50%; scale: 0 1;
        animation: scrolled linear both; animation-timeline: scroll(root); }
    @keyframes scrolled { to { scale: 1 1; } }
}

/* Type: serif titles in sentence case; the second phrase in gold, on the same line. */
h1, h2, h3 { font-weight: 600; line-height: 1.12; letter-spacing: 0; }
.hero h1, h2, .section-head h2, .cta h2, .about h2, .gifts h2, .choose h2 { text-transform: none; }
h1 em, h2 em { display: inline; font-style: normal; font-weight: 600; }
h3 { font-weight: 600; }
.brand { font-weight: 700; letter-spacing: .14em; background: var(--gold-grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.brand small { color: var(--muted); -webkit-text-fill-color: var(--muted); letter-spacing: .3em; font-family: var(--sans); }
.lead, .about p { font-family: var(--sans); font-weight: 400; }

/* Buttons: gold pills with a glow; the second kind, a gold outline. */
.btn { border-radius: 9999px; font-weight: 600; font-size: .75rem; letter-spacing: .12em; }
.btn--gold { background: var(--gold-grad); background-size: 100% 100%; color: var(--on-gold); box-shadow: 0 0 1.5rem rgba(212, 175, 55, .32);
    transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.btn--gold:hover { background-position: 0 0; translate: 0 -2px; box-shadow: 0 .5rem 2.25rem rgba(246, 214, 122, .45); }
.btn--line { border-color: rgba(212, 175, 55, .45); color: var(--gold); }
.btn--line:hover { background: rgba(212, 175, 55, .12); border-color: var(--gold); color: var(--gold-hi); }
.btn--text { border-radius: 0; color: var(--gold); border-bottom-color: rgba(212, 175, 55, .45); }
.link { padding: .7rem 1.4rem; border: 0; border-radius: 9999px; background: var(--gold-grad); color: var(--on-gold); font-weight: 600; letter-spacing: .12em; box-shadow: 0 0 1.25rem rgba(212, 175, 55, .28);
    transition: translate .25s var(--ease), box-shadow .25s var(--ease); }
.link:hover { color: var(--on-gold); translate: 0 -2px; box-shadow: 0 .4rem 1.75rem rgba(246, 214, 122, .42); }

/* The header: dark glass. */
.top, .top.is-solid { background: rgba(13, 13, 13, .9); backdrop-filter: blur(1.25rem); border-bottom: 1px solid var(--line-soft); }
.nav a { font-weight: 500; letter-spacing: .1em; font-size: .75rem; color: rgba(255, 255, 255, .78); padding-bottom: .25rem; border-bottom: 1px solid transparent; }
.nav a:hover { color: var(--gold); border-bottom-color: var(--gold); }
.top .btn--line { background: var(--gold-grad); color: var(--on-gold); border-color: transparent; box-shadow: 0 0 1.25rem rgba(212, 175, 55, .3); }
.top .btn--line:hover { background: var(--gold-grad); color: var(--on-gold); }
.menu-btn { border-color: rgba(212, 175, 55, .45); }
.notice { font-weight: 500; }

/* The opening: centered words over the photo. */
.hero { align-content: center; text-align: center; padding-bottom: 5rem; }
.hero-img { filter: saturate(.85) brightness(.6); }
.hero-shade, .hero-video.is-on + .hero-shade { background: linear-gradient(180deg, rgba(13, 13, 13, .72) 0%, rgba(13, 13, 13, .45) 40%, rgba(13, 13, 13, .72) 75%, var(--bg) 100%); }
.hero-rule { display: none; }
.hero-inner { display: grid; justify-items: center; }
.hero h1 { max-width: 18ch; font-size: clamp(2.75rem, 6vw, 5rem); letter-spacing: 0; margin-bottom: 1.25rem; }
.hero h1 em { font-size: 1em; }
.lead { max-width: 44ch; font-size: 1rem; color: var(--muted); }
.hero-actions { justify-content: center; }
.hero-hours { justify-content: center; }
.hero-note { color: var(--muted); }
.hero-pause { background: rgba(13, 13, 13, .6); }
.pick { text-align: left; border-top-color: var(--line-soft); }
.pick-label { text-align: center; color: var(--gold); letter-spacing: .2em; font-weight: 500; }
.pick-list { justify-content: center; grid-template-columns: repeat(auto-fit, minmax(18.75rem, 26rem)); }
.pick-place { border: 1px solid var(--line-soft); border-radius: 9999px; background: var(--glass); padding: .5rem 1.5rem .5rem .5rem; }
.pick-place:hover { border-color: rgba(212, 175, 55, .45); background: rgba(212, 175, 55, .08); }
.pick-place img { border-radius: 50%; }
.pick-text strong { font-weight: 600; }

/* Sections: a centered title; its label has a gold line each side. */
.band { padding: 6.5rem 0; border-top: 0; }
.band--cream { background: var(--bg-2); }
.band--deep { background: var(--bg); }
.section-head { max-width: 46rem; margin: 0 auto 3.5rem; text-align: center; }
.kicker { justify-content: center; gap: .875rem; font-weight: 500; letter-spacing: .2em; color: var(--gold); }
.section-head .kicker { max-width: none; font-size: .75rem; }
.kicker::before, .kicker::after { content: ""; width: 2.25rem; height: 1px; background: linear-gradient(90deg, transparent, var(--gold)); }
.kicker::after { background: linear-gradient(90deg, var(--gold), transparent); }
.gifts .kicker, .about .kicker { justify-content: flex-start; }
.gifts .kicker::before, .about .kicker::before { display: none; }
.section-head h2 { font-size: clamp(2.25rem, 4.4vw, 3.5rem); margin: 1rem 0 1.125rem; }
.section-head p:not(.kicker) { margin: 0 auto; font-size: .9375rem; }
.price-switch { justify-content: center; }
.price-toggle { background: var(--glass); border-color: var(--line-soft); }
.price-toggle button[aria-pressed="true"] { background: var(--gold-grad); color: var(--on-gold); }

/* Treatments: glass cards, a gold edge on top, a gold button. */
.treatments { grid-template-columns: repeat(auto-fill, minmax(18rem, 1fr)); gap: 1.5rem; border: 0; }
.treatment { position: relative; overflow: hidden; padding: 2.25rem 2rem 2rem; border: 1px solid var(--line-soft); border-radius: var(--round); background: var(--glass);
    transition: translate .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease); }
.treatment::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, #a8872a, #d4af37, #f6d67a); opacity: .85; }
.treatment:hover { translate: 0 -4px; border-color: rgba(212, 175, 55, .35); background: rgba(255, 255, 255, .06); }
.treatment h3 { font-size: 1.625rem; }
.treatment > p { font-size: .875rem; }
.prices li { letter-spacing: .1em; font-size: .75rem; color: var(--muted); }
.prices strong, .addons strong { font-weight: 600; }
.treatment .link { margin-top: 1.25rem; }
.addons h3 { font-style: normal; }

/* The steps: numbered rows of glass, the number in a gold ring. */
.steps { grid-template-columns: 1fr; gap: 1rem; border-top: 0; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 1.5rem; align-items: center; padding: 1.625rem 1.875rem; border: 1px solid var(--line-soft); border-radius: var(--round); background: var(--glass); }
.steps .num { grid-row: 1 / span 2; display: grid; place-items: center; width: 3.75rem; height: 3.75rem; border: 1px solid rgba(212, 175, 55, .45); border-radius: 50%; background: rgba(0, 0, 0, .34);
    font: 600 1.375rem/1 var(--serif); letter-spacing: 0; color: var(--gold); box-shadow: 0 0 1.5rem rgba(212, 175, 55, .16); }
.steps h3 { margin: 0 0 .25rem; font-size: 1.625rem; align-self: end; }
.steps p { max-width: none; align-self: start; }
.experience-photo img, .experience-photo { border-radius: var(--round); }

/* Cards everywhere: glass, rounded, with a gap between them instead of ruled lines. */
.perks, .policies { gap: 1rem; border: 0; }
.perks li, .policy { border: 1px solid var(--line-soft); border-radius: var(--round); background: var(--glass); backdrop-filter: none; }
.perks i, .policy > i { display: grid; place-items: center; width: 3.25rem; height: 3.25rem; margin-bottom: .75rem; border: 1px solid rgba(212, 175, 55, .35); border-radius: 50%; background: rgba(0, 0, 0, .34); font-size: 1.375rem; }
.plan { border: 1px solid rgba(212, 175, 55, .22); border-radius: var(--round); background: var(--glass); }
.plan-price strong { font-weight: 600; }
.place { border: 1px solid var(--line-soft); border-radius: var(--round); overflow: hidden; background: var(--glass); }
.faq details, .faq details:first-of-type { margin-bottom: .75rem; padding: 0 1.5rem; border: 1px solid var(--line-soft); border-radius: 1rem; background: var(--glass); }
.faq summary { font-weight: 600; font-size: 1.375rem; padding: 1.25rem 0; }
.gift-card { border-radius: 1rem; }
.choose, .frame { border-radius: var(--round); border-color: rgba(212, 175, 55, .22); overflow: hidden; }
.band--photo::before { background: linear-gradient(180deg, rgba(var(--bg-rgb), .94), rgba(var(--bg-rgb), .84) 50%, rgba(var(--bg-rgb), .96)), var(--photo) center / cover no-repeat; }

/* The closing words: in a glass panel over the photo. */
.cta { padding: 8.5rem 1.75rem; }
.cta::after { content: ""; position: absolute; z-index: -1; inset: 3.5rem max(1.25rem, calc(50% - 31rem)); border: 1px solid rgba(212, 175, 55, .22); border-radius: var(--round);
    background: rgba(13, 13, 13, .6); backdrop-filter: blur(.625rem); }
.cta h2 { font-size: clamp(2.25rem, 5vw, 3.75rem); margin-bottom: 2rem; }
.foot { background: #0a0a0a; border-top-color: rgba(212, 175, 55, .2); }
.foot strong { color: var(--gold); font-weight: 600; }

/* A call button for each location, floating at the side. */
.callers { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 14; display: grid; gap: .625rem; }
.caller { display: flex; align-items: center; justify-content: space-between; gap: .875rem; min-width: 8.5rem; padding: .3125rem .3125rem .3125rem 1rem; border: 1px solid rgba(212, 175, 55, .28); border-radius: 9999px;
    background: rgba(13, 13, 13, .84); backdrop-filter: blur(.5rem); color: var(--ink); text-decoration: none; font: 500 .9375rem/1 var(--serif); transition: border-color .25s, translate .25s var(--ease); }
.caller:hover { border-color: var(--gold); translate: -3px 0; }
.caller i { display: grid; place-items: center; width: 2.375rem; height: 2.375rem; border-radius: 50%; background: var(--gold-grad); color: var(--on-gold); font-size: 1.125rem; }
.is-menu .callers { display: none; }
@media (max-width: 900px) {
    /* Phones: above the booking bar, the round buttons only. */
    .callers { right: .75rem; bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
    .caller { min-width: 0; padding: .25rem; }
    .caller span { display: none; }
}