/* GS Unisex Salon — black & gold dark theme */
:root {
    --ink: #050507;
    --panel: #0c0c11;
    --panel-2: #121219;
    --paper: #f1ece2;
    --muted: rgba(241, 236, 226, 0.62);
    --gold: #d4af37;
    --gold-lite: #f3dda0;
    --gold-dim: rgba(212, 175, 55, 0.22);
    --line: rgba(241, 236, 226, 0.12);
    --sans: "Outfit", system-ui, -apple-system, sans-serif;
    --display: "Fraunces", Georgia, serif;
    --micro: "Syne", sans-serif;
    --pad: clamp(1.1rem, 5.5vw, 6.5rem);
    --r: 1.1rem;
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
    background: var(--ink);
    color: var(--paper);
    font-family: var(--sans);
    font-size: 16px;
    line-height: 1.55;
    overflow-x: hidden;
}
body.sheet-open { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button, input { font: inherit; color: inherit; }
[hidden] { display: none !important; }
::selection { background: var(--gold); color: #14100a; }

/* ---------- atmosphere ---------- */
.grain {
    pointer-events: none;
    position: fixed;
    inset: 0;
    z-index: 90;
    opacity: 0.04;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.aura {
    pointer-events: none;
    position: fixed;
    inset: -25%;
    z-index: 0;
    background:
        radial-gradient(40rem 30rem at 8% 0%, rgba(212, 175, 55, 0.16), transparent 62%),
        radial-gradient(34rem 26rem at 95% 12%, rgba(212, 175, 55, 0.09), transparent 60%),
        radial-gradient(38rem 28rem at 55% 98%, rgba(120, 90, 20, 0.14), transparent 62%);
}
.scroll-bar { position: fixed; inset: 0 0 auto; height: 2px; z-index: 99; background: rgba(241, 236, 226, 0.07); }
.scroll-bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #8a6d1f, var(--gold), var(--gold-lite)); }

/* signature gold offset frame (lifted from the printed menu card) */
.frame,
.pkg-grid article,
.prepaid-grid article,
.book-tile,
.embed-frame,
.menu-group { position: relative; z-index: 0; }

.frame::before,
.pkg-grid article::before,
.prepaid-grid article::before,
.book-tile::before,
.embed-frame::before,
.menu-group::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border: 1px solid var(--gold-dim);
    background: linear-gradient(160deg, var(--panel-2), var(--panel));
}
.frame::after,
.pkg-grid article::after,
.prepaid-grid article::after,
.book-tile::after,
.embed-frame::after,
.menu-group::after {
    content: "";
    position: absolute;
    inset: 13px -13px -13px 13px;
    z-index: -2;
    border: 1px solid rgba(212, 175, 55, 0.35);
    pointer-events: none;
}

/* ---------- header ---------- */
.mast {
    position: fixed;
    z-index: 60;
    top: 0.8rem;
    left: 50%;
    transform: translateX(-50%);
    width: min(96vw, 80rem);
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 1rem;
    padding: 0.5rem 0.55rem 0.5rem 1rem;
    border-radius: 1.4rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    background: rgba(6, 6, 9, 0.72);
    backdrop-filter: blur(22px) saturate(1.4);
    -webkit-backdrop-filter: blur(22px) saturate(1.4);
    transition: top 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.mast::after {
    content: "";
    position: absolute;
    inset: auto 1.2rem -1px;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.55), transparent);
}
.mast.scrolled {
    top: 0.3rem;
    background: rgba(5, 5, 7, 0.95);
    box-shadow: 0 18px 46px rgba(0, 0, 0, 0.72);
    padding-block: 0.34rem;
}
.mark { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.mark-logo {
    height: 2.5rem;
    width: auto;
    filter: drop-shadow(0 2px 10px rgba(212, 175, 55, 0.3));
    transition: height 0.35s ease, transform 0.35s ease;
}
.mast.scrolled .mark-logo { height: 2.1rem; }
.mark:hover .mark-logo { transform: scale(1.03); }
.mark-rule { width: 1px; height: 2rem; background: linear-gradient(transparent, var(--gold-dim), transparent); }
.mark-sub { display: grid; line-height: 1.15; }
.mark-sub b {
    font-family: var(--micro);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--paper);
}
.mark-sub small {
    font-size: 0.6rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.8;
}
.nav { position: relative; display: flex; justify-content: center; gap: 0.1rem; }
.nav a {
    position: relative;
    z-index: 1;
    padding: 0.48rem 0.95rem;
    border-radius: 999px;
    font-size: 0.89rem;
    font-weight: 500;
    color: var(--muted);
    white-space: nowrap;
    transition: color 0.25s ease;
}
.nav a:hover { color: var(--paper); }
.nav a.on { color: #14100a; font-weight: 600; }
.nav-pill {
    position: absolute;
    z-index: 0;
    top: 50%;
    left: 0;
    width: 0;
    height: 2.05rem;
    transform: translateY(-50%);
    border-radius: 999px;
    background: linear-gradient(120deg, var(--gold), var(--gold-lite));
    opacity: 0;
    transition: transform 0.45s cubic-bezier(.22,1,.36,1), width 0.45s cubic-bezier(.22,1,.36,1), opacity 0.3s ease;
}
.nav-pill.ready { opacity: 1; }
.mast-end { display: flex; align-items: center; gap: 0.55rem; }
.pulse {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.68rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
    white-space: nowrap;
}
.pulse.inline { margin: 0.4rem 0 1rem; }
.pulse i { width: 0.46rem; height: 0.46rem; border-radius: 50%; background: #f87171; animation: beat 2s infinite; }
.pulse.is-open i { background: #4ade80; }
@keyframes beat {
    0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.5); }
    70% { box-shadow: 0 0 0 9px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
}
.cta-wa {
    display: grid;
    padding: 0.42rem 1.05rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--gold), var(--gold-lite));
    color: #14100a;
    line-height: 1.1;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.cta-wa:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(212, 175, 55, 0.35); }
.cta-wa em { font-style: normal; font-size: 0.57rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.7; }
.cta-wa b { font-size: 0.82rem; font-weight: 700; }
.nav-toggle {
    display: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    border: 1px solid var(--gold-dim);
    border-radius: 0.8rem;
    background: transparent;
    cursor: pointer;
}
.nav-toggle i, .nav-toggle i::before, .nav-toggle i::after {
    display: block; width: 16px; height: 1.5px; background: var(--gold-lite); border-radius: 2px;
}
.nav-toggle i { position: relative; }
.nav-toggle i::before, .nav-toggle i::after { content: ""; position: absolute; left: 0; }
.nav-toggle i::before { top: -5px; }
.nav-toggle i::after { top: 5px; }

/* ---------- sheet ---------- */
.sheet {
    position: fixed;
    inset: 0;
    z-index: 70;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 1.6rem;
    padding: 5rem var(--pad) 3rem;
    background:
        radial-gradient(28rem 22rem at 85% 8%, rgba(212, 175, 55, 0.18), transparent 65%),
        linear-gradient(160deg, #0d0c0a, #050507 65%);
}
.sheet-close { position: absolute; top: 1rem; right: 1.3rem; font-size: 2.4rem; line-height: 1; background: none; border: 0; color: var(--gold-lite); cursor: pointer; }
.sheet-logo { height: 2.4rem; width: auto; }
.sheet-nav { display: grid; }
.sheet-nav a {
    display: flex;
    align-items: baseline;
    gap: 1rem;
    padding: 0.5rem 0;
    border-bottom: 1px solid var(--line);
    font-family: var(--display);
    font-size: clamp(1.9rem, 8.5vw, 2.9rem);
    line-height: 1.1;
    opacity: 0;
    transform: translateY(14px);
    animation: sheetIn 0.5s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--i) * 0.06s);
}
.sheet-nav a.on { color: var(--gold); font-style: italic; }
.sheet-nav span { font-family: var(--micro); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--gold); opacity: 0.6; }
@keyframes sheetIn { to { opacity: 1; transform: none; } }
.sheet-foot { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.sheet-foot a { padding: 0.42rem 0.9rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.8rem; }

/* ---------- floating ---------- */
.social-dock { position: fixed; left: 0.8rem; bottom: 2rem; z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 1.3rem; }
.dock-btn span { writing-mode: vertical-rl; font-size: 0.66rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); transition: color 0.25s ease; }
.dock-btn:hover span { color: var(--gold); }
.dock-rail { width: 1px; height: 4rem; background: linear-gradient(var(--gold-dim), transparent); }
.wa-orb {
    position: fixed;
    right: 1rem;
    bottom: 1rem;
    z-index: 45;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.68rem 1rem;
    border-radius: 999px;
    background: #25d366;
    color: #04240f;
    font-weight: 600;
    font-size: 0.86rem;
    box-shadow: 0 14px 36px rgba(37, 211, 102, 0.32);
    transition: transform 0.3s cubic-bezier(.22,1,.36,1);
}
.wa-orb:hover { transform: translateY(-3px) scale(1.03); }
.wa-orb svg { width: 1.2rem; height: 1.2rem; }
body.cart-live .wa-orb { display: none; }

/* ---------- text marquee ---------- */
.marquee {
    position: relative;
    z-index: 2;
    overflow: hidden;
    margin-top: 5.9rem;
    padding: 0.5rem 0;
    border-block: 1px solid var(--gold-dim);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.07), transparent 30%, transparent 70%, rgba(212, 175, 55, 0.07));
    font-family: var(--micro);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--muted);
}
.marquee > div { display: flex; align-items: center; gap: 1.3rem; width: max-content; animation: slide 42s linear infinite; }
.marquee .dot { color: var(--gold); font-size: 0.45rem; }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- type ---------- */
main { position: relative; z-index: 2; }
.kicker {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin: 0 0 0.7rem;
    font-family: var(--micro);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--gold);
}
.kicker::before { content: ""; width: 1.6rem; height: 1px; background: currentColor; opacity: 0.7; }
h1, h2, h3 {
    font-family: var(--display);
    font-weight: 400;
    font-variation-settings: "SOFT" 12, "WONK" 1;
    line-height: 1.03;
    letter-spacing: -0.02em;
    margin: 0 0 0.85rem;
}
h1 { font-size: clamp(2.4rem, 6.4vw, 5.1rem); line-height: 1.08; }
h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); }
h3 { font-size: 1.28rem; }
h1 em, h2 em {
    font-style: italic;
    background: linear-gradient(100deg, #a5811f, var(--gold) 40%, var(--gold-lite) 75%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}
.lede { max-width: 42rem; font-size: clamp(1rem, 1.4vw, 1.09rem); color: var(--muted); }
.lede a { color: var(--gold); border-bottom: 1px solid currentColor; }
.lede strong { color: var(--paper); font-weight: 600; }
.hint { color: var(--muted); font-size: 0.86rem; }
.hint a { color: var(--gold); border-bottom: 1px solid currentColor; }
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.85rem 1.5rem;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: transform 0.28s cubic-bezier(.22,1,.36,1), box-shadow 0.28s ease, background 0.28s ease;
}
.btn.solid { background: linear-gradient(120deg, var(--gold), var(--gold-lite)); color: #14100a; }
.btn.solid:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(212, 175, 55, 0.34); }
.btn.ghost { border: 1px solid var(--gold-dim); color: var(--paper); }
.btn.ghost:hover { background: rgba(212, 175, 55, 0.1); transform: translateY(-3px); }
.text-link { display: inline-block; margin-top: 0.6rem; color: var(--gold); font-weight: 600; border-bottom: 1px solid currentColor; padding-bottom: 2px; }
.pill-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 1.2rem 0 0.6rem; }
.pill-row span { padding: 0.28rem 0.85rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.8rem; color: var(--gold-lite); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.stars { color: var(--gold); letter-spacing: 0.08em; }
.avatar {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--gold), #8a6d1f);
    color: #14100a;
    font-weight: 700;
}
.source-note { padding: 0 var(--pad) 3rem; color: var(--muted); font-size: 0.86rem; }
.source-note a { color: var(--gold); border-bottom: 1px solid currentColor; }

/* ---------- reveal ---------- */
.rv { opacity: 0; transform: translateY(24px); }
.rv.in {
    opacity: 1;
    transform: none;
    transition: opacity 0.7s cubic-bezier(.22,1,.36,1), transform 0.7s cubic-bezier(.22,1,.36,1);
    transition-delay: var(--d, 0s);
}
/* Split headlines drop the gradient: per-word background-clip would band the fill. */
[data-split] em { background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--gold-lite); }
[data-split] .w { display: inline-block; }
[data-split] .w > i {
    display: inline-block;
    font-style: inherit;
    opacity: 0;
    transform: translateY(0.42em);
    animation: wordUp 0.8s cubic-bezier(.22,1,.36,1) forwards;
    animation-delay: calc(var(--wi) * 0.05s);
}
@keyframes wordUp { to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    .rv, .rv.in { opacity: 1; transform: none; transition: none; }
    .marquee > div, .tape-track, .brands-marquee > div, .orbit svg { animation: none; }
    [data-split] .w > i { transform: none; animation: none; }
}

/* ---------- stage (hero) ---------- */
.stage {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.03fr 0.97fr;
    align-items: center;
    gap: clamp(1.6rem, 4vw, 3.6rem);
    padding: clamp(2.4rem, 5.5vw, 4.5rem) var(--pad);
    min-height: min(84vh, 46rem);
}
.stage.compact { min-height: 0; padding-bottom: clamp(2rem, 4vw, 3rem); }
.ghost-word {
    position: absolute;
    z-index: -1;
    left: -0.05em;
    bottom: -0.14em;
    font-family: var(--display);
    font-size: clamp(8rem, 24vw, 22rem);
    font-weight: 700;
    line-height: 0.75;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(212, 175, 55, 0.13);
    pointer-events: none;
    user-select: none;
}
.stage-copy { position: relative; z-index: 1; }
.trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0.9rem;
    list-style: none;
    padding: 0;
    margin: 2.2rem 0 0;
    max-width: 34rem;
}
.trust li { border-top: 1px solid var(--gold-dim); padding-top: 0.65rem; }
.trust b { display: block; font-family: var(--display); font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1; color: var(--gold-lite); }
.trust span { font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }

.stage-deck { position: relative; aspect-ratio: 1 / 1.02; }
.deck-card {
    position: absolute;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(212, 175, 55, 0.34);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.7);
    transition: transform 0.7s cubic-bezier(.22,1,.36,1);
    will-change: transform;
}
.deck-card img { width: 100%; height: 100%; object-fit: cover; }
.deck-card figcaption {
    position: absolute;
    inset: auto 0 0;
    padding: 1.6rem 0.75rem 0.6rem;
    font-family: var(--micro);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--gold-lite);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.88));
}
.deck-card.a { width: 55%; aspect-ratio: 3 / 4; left: 0; top: 5%; }
.deck-card.b { width: 43%; aspect-ratio: 3 / 4; right: 2%; top: 0; }
.deck-card.c { width: 47%; aspect-ratio: 4 / 3; left: 21%; bottom: 2%; z-index: 2; }
.orbit {
    position: absolute;
    right: 0;
    bottom: 13%;
    z-index: 3;
    display: grid;
    place-items: center;
    width: 8.6rem;
    height: 8.6rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.4);
    background: radial-gradient(circle, #0a0a0d 64%, rgba(212, 175, 55, 0.16));
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6);
    transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}
.orbit svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 30s linear infinite; }
.orbit text { font-family: var(--micro); font-size: 9.2px; font-weight: 700; letter-spacing: 0.16em; fill: var(--gold); }
.orbit b { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--paper); }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- image tape ---------- */
.tape { position: relative; overflow: hidden; padding: 0.6rem 0 2.4rem; }
.tape::before, .tape::after {
    content: "";
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    width: clamp(2rem, 8vw, 8rem);
    pointer-events: none;
}
.tape::before { left: 0; background: linear-gradient(90deg, var(--ink), transparent); }
.tape::after { right: 0; background: linear-gradient(270deg, var(--ink), transparent); }
.tape-track { display: flex; gap: 0.6rem; width: max-content; animation: slide 55s linear infinite; }
.tape:hover .tape-track { animation-play-state: paused; }
.tape article { position: relative; width: 13rem; overflow: hidden; }
.tape img { width: 13rem; height: 16rem; object-fit: cover; filter: saturate(0.95) contrast(1.05); transition: transform 1s cubic-bezier(.22,1,.36,1); }
.tape article:hover img { transform: scale(1.06); }
.tape span {
    position: absolute;
    left: 0.55rem;
    bottom: 0.55rem;
    padding: 0.18rem 0.6rem;
    font-size: 0.68rem;
    color: var(--gold-lite);
    background: rgba(5, 5, 7, 0.72);
    border: 1px solid var(--gold-dim);
}

/* ---------- section shells ---------- */
.page-hero { padding: clamp(2.4rem, 6vw, 4rem) var(--pad) clamp(1.2rem, 3vw, 2rem); }
.known, .signature, .spotlight, .rail-wrap, .steps, .figures, .story,
.people, .brands-band, .gal-wrap, .embed-row, .book-grid, .lab-band, .visit-band,
.menu-wrap, .filters, .pkg-band, .prepaid, .connect, .feeds, .celebrate {
    padding: clamp(2.2rem, 5.5vw, 4rem) var(--pad);
}

/* ---------- known / steps (numbered cards) ---------- */
.known-head, .steps-head, .sig-head, .rail-head, .people-head, .gal-head { margin-bottom: 2rem; }
.sig-head, .rail-head, .gal-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; }
.sig-head h2, .rail-head h2, .gal-head h2, .known-head h2, .steps-head h2, .people-head h2 { margin-bottom: 0; }
.known-grid, .steps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.7rem;
    list-style: none;
    margin: 0;
    padding: 0;
}
.known-grid li { padding: 1.6rem; }
.known-grid b, .steps-grid b {
    display: block;
    font-family: var(--display);
    font-size: 2.4rem;
    line-height: 1;
    color: var(--gold);
    opacity: 0.6;
    margin-bottom: 0.6rem;
}
.known-grid h3, .steps-grid h3 { margin-bottom: 0.5rem; }
.known-grid p, .steps-grid p { margin: 0; color: var(--muted); font-size: 0.93rem; }
.steps-grid li { padding-top: 1.2rem; border-top: 1px solid var(--gold-dim); }
.steps-grid a { color: var(--gold); border-bottom: 1px solid currentColor; }
.steps > .btn { margin-top: 2rem; }

/* ---------- signature bento ---------- */
.signature { border-top: 1px solid var(--gold-dim); }
.sig-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.9rem; }
.sig {
    position: relative;
    display: flex;
    align-items: flex-end;
    min-height: 15.5rem;
    overflow: hidden;
    border: 1px solid var(--gold-dim);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), border-color 0.4s ease;
}
.sig.wide { grid-column: span 2; }
.sig:hover { transform: translateY(-5px); border-color: var(--gold); }
.sig img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.4;
    transition: transform 1.3s cubic-bezier(.22,1,.36,1), opacity 0.5s ease;
}
.sig:hover img { transform: scale(1.08); opacity: 0.58; }
.sig-body { position: relative; width: 100%; padding: 1.3rem; background: linear-gradient(transparent, rgba(4, 4, 6, 0.94) 50%); }
.sig-body h3 { margin: 0 0 0.35rem; }
.sig-body p { margin: 0 0 0.7rem; font-size: 0.88rem; color: var(--muted); }
.sig-price {
    display: inline-flex;
    align-items: baseline;
    gap: 0.35rem;
    margin-bottom: 0.6rem;
    padding: 0.26rem 0.8rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    font-family: var(--micro);
    font-size: 0.94rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: var(--gold-lite);
}
.sig-price em {
    font-style: normal;
    font-size: 0.6rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    opacity: 0.75;
}
.sig-go {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-family: var(--micro);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.55;
    transition: opacity 0.3s ease;
}
.sig-go i { font-style: normal; transition: transform 0.35s cubic-bezier(.22,1,.36,1); }
.sig:hover .sig-go { opacity: 1; }
.sig:hover .sig-go i { transform: translateX(5px); }

.sig-more {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.3rem 0 0;
    border-top: 1px solid var(--line);
}
.sig-more > li:first-child {
    font-family: var(--micro);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
    margin-right: 0.4rem;
}
.sig-more a {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0.95rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.86rem;
    color: var(--muted);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.sig-more a:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.08); color: var(--paper); }
.sig-more b { font-weight: 600; font-size: 0.78rem; color: var(--gold-lite); white-space: nowrap; }

/* ---------- spotlight ---------- */
.spotlight {
    display: grid;
    grid-template-columns: 0.93fr 1.07fr;
    gap: clamp(1.6rem, 4vw, 3.2rem);
    align-items: center;
    border-block: 1px solid var(--gold-dim);
    background:
        radial-gradient(34rem 24rem at 12% 30%, rgba(212, 175, 55, 0.13), transparent 62%),
        var(--panel);
}
.spot-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.spot-cards article { padding: 1.3rem; }
.spot-cards span { font-family: var(--micro); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.spot-cards h3 { margin: 0.4rem 0 0.5rem; font-size: 1.3rem; }
.spot-cards p { margin: 0; font-size: 0.83rem; color: var(--muted); }
.pkg-price { font-family: var(--display); font-size: 2rem; color: var(--gold-lite); line-height: 1; margin-bottom: 0.8rem; }
.pkg-price small { font-size: 0.85rem; opacity: 0.6; }

/* ---------- review rail ---------- */
.rail-nav { display: flex; gap: 0.5rem; }
.rail-nav button {
    width: 2.7rem;
    height: 2.7rem;
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    background: transparent;
    color: var(--gold-lite);
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
}
.rail-nav button:hover { background: rgba(212, 175, 55, 0.14); transform: translateY(-2px); }
.rail {
    display: flex;
    gap: 1.6rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    padding: 0 0.2rem 1.4rem;
    scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * {
    flex: 0 0 min(82vw, 23rem);
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    padding: 1.5rem;
}
.rail p { margin: 0; color: var(--muted); font-size: 0.95rem; }
.rail footer { display: flex; align-items: center; gap: 0.8rem; margin-top: auto; }
.rail footer small { display: block; font-size: 0.74rem; color: var(--muted); opacity: 0.8; }
.rail-end { justify-content: center; text-align: center; }
.rail-end b { font-family: var(--display); font-size: 3rem; line-height: 1; color: var(--gold-lite); }
.rail-end span { color: var(--muted); font-size: 0.9rem; }
.rail-end em { font-style: normal; color: var(--gold); font-weight: 600; }

/* ---------- social ---------- */
/* ---------- about: under one roof ---------- */
.under-roof { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 1.5rem 0 0; padding: 0; max-width: 34rem; }
.under-roof a {
    display: inline-block;
    padding: 0.34rem 0.9rem;
    border: 1px solid var(--line);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--muted);
    transition: border-color 0.25s ease, color 0.25s ease, background 0.25s ease;
}
.under-roof a:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.1); color: var(--gold-lite); }

/* ---------- about: celebrations ---------- */
.celebrate { border-top: 1px solid var(--gold-dim); }
.celebrate-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1.2rem; margin-top: 1.8rem; }
.celeb {
    position: relative;
    margin: 0;
    overflow: hidden;
    border: 1px solid var(--gold-dim);
    background: var(--panel);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), border-color 0.35s ease;
}
.celeb:hover { transform: translateY(-4px); border-color: var(--gold); }
.celeb img { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.celeb-reel { grid-row: span 2; }
.celeb-reel iframe { display: block; width: 100%; aspect-ratio: 9 / 15; border: 0; background: #000; }
.celeb video { display: block; width: 100%; aspect-ratio: 9 / 15; object-fit: cover; background: #000; }
.celeb figcaption {
    display: grid;
    gap: 0.15rem;
    padding: 0.8rem 0.95rem;
    border-top: 1px solid var(--line);
}
.celeb figcaption b { font-family: var(--micro); font-size: 0.85rem; font-weight: 700; color: var(--paper); }
.celeb figcaption span { font-family: var(--micro); font-size: 0.64rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); }

.reel-badge {
    position: absolute;
    z-index: 3;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--gold), var(--gold-lite));
    color: #14100a;
    font-family: var(--micro);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.reel-strip article { position: relative; }

/* ---------- works: live social frames ---------- */
.feeds-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1.2rem; margin-bottom: 2.2rem; }
.feeds-head h2 { margin-bottom: 0; }
.feeds-head .hint { max-width: 22rem; margin: 0; }
.feed-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2.4rem;
    align-items: stretch;
    margin-bottom: 2.4rem;
}
.feed-frame {
    display: flex;
    flex-direction: column;
    min-width: 0;
}
.feed-bar {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1rem 0.95rem;
}
.feed-bar::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 2px;
    background: var(--gold);
}
.feed-frame.ig .feed-bar::before {
    background: linear-gradient(90deg, #f9ce34, #ee2a7b 52%, #6228d7);
}
.feed-frame.fb .feed-bar::before { background: #1877f2; }
.ft-glyph { display: grid; place-items: center; width: 2.3rem; height: 2.3rem; flex: none; border-radius: 0.65rem; }
.ft-glyph svg { width: 1.2rem; height: 1.2rem; }
.ft-glyph.ig { background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7); color: #fff; }
.ft-glyph.fb { background: #1877f2; color: #fff; }
.ft-glyph.goog { background: linear-gradient(135deg, var(--gold), #8a6d1f); color: #14100a; }
.ft-txt { display: grid; min-width: 0; line-height: 1.25; }
.ft-txt b { font-family: var(--micro); font-size: 0.88rem; font-weight: 800; letter-spacing: 0.04em; color: var(--paper); }
.ft-txt em { font-style: normal; font-size: 0.75rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.feed-open {
    margin-left: auto;
    flex: none;
    padding: 0.34rem 0.9rem;
    border: 1px solid var(--gold-dim);
    border-radius: 999px;
    font-family: var(--micro);
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold-lite);
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}
.feed-open:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.14); color: var(--gold); }
.feed-screen {
    overflow: hidden;
    margin: 0 0.7rem;
    border: 1px solid var(--line);
    background: #09090c;
    height: 36.25rem;
}

/* Instagram interior — mosaic of unique looks */
.ig-board { display: flex; flex-direction: column; height: 100%; background: #09090c; }
.ig-id {
    display: flex;
    align-items: center;
    gap: 0.8rem;
    padding: 0.85rem 1rem 0.7rem;
}
.ig-avatar {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(135deg, #f9ce34, #ee2a7b 55%, #6228d7);
    padding: 2px;
}
.ig-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; background: #09090c; }
.ig-id b { display: block; font-family: var(--micro); font-size: 0.88rem; letter-spacing: 0.04em; }
.ig-id em { display: block; font-style: normal; font-size: 0.72rem; color: var(--muted); }
.ig-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0.55rem 0.4rem 0.7rem;
    border-block: 1px solid var(--line);
}
.ig-stats li { text-align: center; font-size: 0.72rem; color: var(--muted); }
.ig-stats b { display: block; font-family: var(--display); font-size: 1.05rem; color: var(--gold-lite); line-height: 1.2; }
.ig-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    flex: 1;
    min-height: 0;
    background: #050507;
}
.ig-grid a {
    position: relative;
    overflow: hidden;
    min-height: 0;
}
.ig-grid img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(.22,1,.36,1);
}
.ig-grid a:hover img { transform: scale(1.08); }
.ig-grid span {
    position: absolute;
    inset: auto 0 0;
    padding: 1.4rem 0.45rem 0.45rem;
    background: linear-gradient(transparent, rgba(5, 5, 7, 0.88));
    font-family: var(--micro);
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold-lite);
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.ig-grid a:hover span, .ig-grid a:focus-visible span { opacity: 1; transform: none; }

/* Facebook interior — unique posts, no plugin loop */
.fb-board {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #0c0d12;
    overflow: auto;
    scrollbar-width: thin;
    scrollbar-color: rgba(212, 175, 55, 0.35) transparent;
}
.fb-cover { height: 7.2rem; flex: none; overflow: hidden; }
.fb-cover img { width: 100%; height: 100%; object-fit: cover; }
.fb-page {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(24, 119, 242, 0.12), transparent);
}
.fb-page > img {
    width: 2.6rem;
    height: 2.6rem;
    flex: none;
    object-fit: cover;
    border-radius: 50%;
    border: 1px solid var(--gold-dim);
    background: #09090c;
}
.fb-page b { display: block; font-family: var(--micro); font-size: 0.86rem; }
.fb-page em { display: block; font-style: normal; font-size: 0.72rem; color: var(--muted); }
.fb-stream { display: grid; }
.fb-post { border-bottom: 1px solid var(--line); background: #0c0d12; }
.fb-post header {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.8rem 1rem 0.35rem;
}
.fb-post header img {
    width: 2rem;
    height: 2rem;
    object-fit: cover;
    border-radius: 50%;
    background: #09090c;
}
.fb-post header b { display: block; font-size: 0.82rem; }
.fb-post header em { display: block; font-style: normal; font-size: 0.68rem; color: var(--muted); }
.fb-post p { margin: 0; padding: 0.15rem 1rem 0.7rem; font-size: 0.88rem; color: var(--paper); }
.fb-post > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.fb-post footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    padding: 0.45rem 0.4rem;
}
.fb-post footer span {
    text-align: center;
    font-family: var(--micro);
    font-size: 0.62rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--muted);
}
.fb-more {
    display: block;
    padding: 0.95rem 1rem 1.15rem;
    text-align: center;
    font-family: var(--micro);
    font-size: 0.68rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--gold);
}
.feed-home {
    display: grid;
    place-items: center;
    padding: 0.55rem 0 0.45rem;
}
.feed-home i {
    width: 5.2rem;
    height: 0.28rem;
    border-radius: 999px;
    background: rgba(241, 236, 226, 0.22);
}
.pane-goog { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(1.2rem, 3vw, 2.6rem); align-items: center; padding: clamp(1.2rem, 3vw, 2rem) clamp(1.1rem, 3vw, 1.8rem); }
.pg-score { text-align: center; padding-right: clamp(1rem, 3vw, 2rem); border-right: 1px solid var(--line); }
.pg-score b { display: block; font-family: var(--display); font-size: clamp(3.4rem, 7vw, 5rem); line-height: 1; color: var(--gold-lite); }
.pg-score .stars { display: block; margin: 0.3rem 0; }
.pg-score em { font-style: normal; font-family: var(--micro); font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.pg-body > p { margin: 0 0 0.8rem; font-family: var(--micro); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pg-photos {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.35rem;
    margin: 0 0 1.1rem;
}
.pg-photos .shot { aspect-ratio: 1; min-height: 0; height: 4.6rem; }
@media (max-width: 700px) {
    .pg-photos { grid-template-columns: repeat(3, 1fr); }
    .pg-photos .shot { height: 5.2rem; }
}
.pg-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; list-style: none; margin: 0 0 1.3rem; padding: 0; }
.pg-chips li { padding: 0.3rem 0.85rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.82rem; color: var(--paper); }
.pg-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

/* ---------- home: connect band ---------- */
.connect {
    position: relative;
    z-index: 0;
    overflow: hidden;
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: clamp(1.8rem, 4vw, 3.6rem);
    align-items: center;
    border-top: 1px solid var(--gold-dim);
}
.connect-copy { position: relative; z-index: 1; }
.connect-meta { display: flex; flex-wrap: wrap; gap: 1.8rem; list-style: none; margin: 1.6rem 0 0; padding: 0; }
.connect-meta li { border-top: 1px solid var(--gold-dim); padding-top: 0.5rem; }
.connect-meta b { display: block; font-family: var(--display); font-size: 1.9rem; line-height: 1; color: var(--gold-lite); }
.connect-meta span { font-family: var(--micro); font-size: 0.62rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); }

.channels { position: relative; z-index: 1; list-style: none; margin: 0; padding: 0; display: grid; }
.ch { border-top: 1px solid var(--line); }
.ch:last-child { border-bottom: 1px solid var(--line); }
.ch a {
    position: relative;
    z-index: 0;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 1.1rem;
    padding: 1.4rem 1.2rem;
    overflow: hidden;
}
/* brand colour wipes in from the left on hover */
.ch a::before {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: var(--brand);
    transform: scaleX(0);
    transform-origin: left;
    opacity: 0.16;
    transition: transform 0.5s cubic-bezier(.22,1,.36,1);
}
.ch a:hover::before, .ch a:focus-visible::before { transform: scaleX(1); }
.ch-wa { --brand: linear-gradient(90deg, #25d366, transparent 85%); --tint: #25d366; }
.ch-ig { --brand: linear-gradient(90deg, #ee2a7b, #f9ce34 45%, transparent 85%); --tint: #ee2a7b; }
.ch-fb { --brand: linear-gradient(90deg, #1877f2, transparent 85%); --tint: #1877f2; }
.ch-glyph {
    display: grid;
    place-items: center;
    width: 3.1rem;
    height: 3.1rem;
    flex: none;
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    color: var(--gold-lite);
    transition: color 0.35s ease, border-color 0.35s ease, transform 0.5s cubic-bezier(.22,1,.36,1);
}
.ch-glyph svg { width: 1.5rem; height: 1.5rem; }
.ch a:hover .ch-glyph { color: #fff; border-color: currentColor; transform: rotate(-8deg) scale(1.08); }
.ch-main { display: grid; min-width: 0; line-height: 1.2; }
.ch-main b { font-family: var(--micro); font-size: 0.68rem; font-weight: 800; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold); }
.ch-main em {
    font-style: normal;
    font-family: var(--display);
    font-size: clamp(1.3rem, 2.2vw, 1.85rem);
    color: var(--paper);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ch-note { display: none; font-size: 0.85rem; color: var(--muted); }
.ch-go {
    display: grid;
    place-items: center;
    width: 2.4rem;
    height: 2.4rem;
    flex: none;
    border-radius: 50%;
    border: 1px solid var(--gold-dim);
    color: var(--gold);
    transition: transform 0.4s cubic-bezier(.22,1,.36,1), background 0.3s ease, color 0.3s ease;
}
.ch a:hover .ch-go { transform: translateX(5px); background: var(--gold); color: #14100a; }
@media (min-width: 1000px) {
    .ch a { grid-template-columns: auto minmax(0, 15rem) minmax(0, 1fr) auto; }
    .ch-note { display: block; }
}

/* ---------- about: figures, story, people, brands ---------- */
.figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    padding-block: clamp(1.6rem, 3vw, 2.4rem);
    border-block: 1px solid var(--gold-dim);
    background: var(--panel);
}
.figures b { display: block; font-family: var(--display); font-size: clamp(2.2rem, 4.6vw, 3.4rem); line-height: 1; color: var(--gold-lite); }
.figures span { font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.story { display: grid; grid-template-columns: 0.82fr 1.18fr; gap: clamp(1.6rem, 4vw, 3.4rem); align-items: start; }
.story aside { position: sticky; top: 7rem; }
.story-body p { margin: 0 0 1.1rem; color: var(--muted); font-size: 1.02rem; }
.story-body a { color: var(--gold); border-bottom: 1px solid currentColor; }
.dropcap::first-letter {
    float: left;
    font-family: var(--display);
    font-size: 4.1rem;
    line-height: 0.78;
    padding: 0.16rem 0.5rem 0.1rem 0;
    color: var(--gold);
}
.story-body blockquote {
    margin: 1.8rem 0;
    padding-left: 1.4rem;
    border-left: 2px solid var(--gold);
    font-family: var(--display);
    font-size: clamp(1.25rem, 2.2vw, 1.6rem);
    font-style: italic;
    line-height: 1.3;
    color: var(--paper);
}
.story-body cite { display: block; margin-top: 0.7rem; font-family: var(--sans); font-style: normal; font-size: 0.8rem; letter-spacing: 0.08em; color: var(--muted); }
.people-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.4rem; }
.person-img { overflow: hidden; aspect-ratio: 4 / 5; margin-bottom: 1.1rem; border: 1px solid var(--gold-dim); }
.person-img img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.3) contrast(1.05); transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter 0.5s ease; }
.person:hover .person-img img { transform: scale(1.06); filter: none; }
.person h3 { margin: 0 0 0.2rem; }
.person > span { font-family: var(--micro); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.person p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.92rem; }
.brands-band { border-block: 1px solid var(--gold-dim); background: var(--panel); }
.brands-marquee { overflow: hidden; margin-top: 1.8rem; }
.brands-marquee > div { display: flex; align-items: center; gap: 1.6rem; width: max-content; animation: slide 40s linear infinite; }
.brands-marquee span { font-family: var(--display); font-size: clamp(1.5rem, 3.2vw, 2.5rem); white-space: nowrap; color: var(--gold-lite); }
.brands-marquee i { font-style: normal; font-size: 0.55rem; color: var(--gold); }

/* ---------- works ---------- */
.works-stage { align-items: center; }
.reel-stack { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); gap: 1.2rem; align-items: center; }
.reel { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border: 1px solid var(--gold-dim); background: #000; box-shadow: 0 30px 66px rgba(0, 0, 0, 0.66); }
.reel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; animation: reel 15s infinite; }
.reel img:nth-child(2) { animation-delay: 3s; }
.reel img:nth-child(3) { animation-delay: 6s; }
.reel img:nth-child(4) { animation-delay: 9s; }
.reel img:nth-child(5) { animation-delay: 12s; }
@keyframes reel {
    0% { opacity: 0; transform: scale(1.1); }
    6% { opacity: 1; }
    18% { opacity: 1; transform: scale(1); }
    24% { opacity: 0; }
}
.reel-chip { position: absolute; z-index: 2; left: 0.7rem; bottom: 0.7rem; padding: 0.26rem 0.7rem; font-size: 0.68rem; color: var(--gold-lite); background: rgba(5, 5, 7, 0.74); border: 1px solid var(--gold-dim); }
.reel-note { display: grid; gap: 0.5rem; align-content: center; padding: 1.4rem; }
.reel-note b { font-family: var(--display); font-size: 1.5rem; color: var(--gold-lite); }
.reel-note span { color: var(--muted); font-size: 0.9rem; }
.reel-note em { font-style: normal; color: var(--gold); font-weight: 600; }
.gal { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; grid-auto-flow: dense; gap: 0.6rem; }
.g22 { grid-column: span 2; grid-row: span 2; }
.g12 { grid-row: span 2; }
.g21 { grid-column: span 2; }
.shot { position: relative; overflow: hidden; padding: 0; border: 1px solid var(--gold-dim); background: #000; cursor: zoom-in; }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s cubic-bezier(.22,1,.36,1), filter 0.5s ease; }
.shot:hover img { transform: scale(1.07); }
.shot span {
    position: absolute;
    inset: auto 0 0;
    padding: 1.5rem 0.8rem 0.7rem;
    text-align: left;
    font-size: 0.76rem;
    color: var(--gold-lite);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.85));
    transform: translateY(101%);
    transition: transform 0.35s ease;
}
.shot:hover span, .shot:focus-visible span { transform: none; }
.shot b { display: block; font-family: var(--display); font-size: 1rem; color: var(--paper); }
.embed-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; }
.embed-frame { overflow: hidden; }
.embed-frame header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.2rem; }
.embed-frame h2 { margin: 0; font-size: 1.35rem; }
.embed-frame header a { font-size: 0.84rem; color: var(--gold); border-bottom: 1px solid currentColor; }
.embed-frame iframe { width: 100%; height: 32rem; border: 0; background: #fff; }

/* ---------- instagram reels ---------- */
.reels-band { padding: clamp(2.2rem, 5.5vw, 4rem) 0 0; border-top: 1px solid var(--gold-dim); }
.reels-intro {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.2rem;
    padding: 0 var(--pad) 1.6rem;
}
.reels-intro h2 { margin-bottom: 0.5rem; }
.reels-intro .lede { margin: 0; max-width: 38rem; }
.reels-row {
    display: flex;
    gap: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    padding: 0.4rem var(--pad) 1rem;
    scrollbar-width: none;
}
.reels-row::-webkit-scrollbar { display: none; }
.reel-tile { flex: 0 0 min(17.5rem, 78vw); scroll-snap-align: start; min-width: 0; }
.reel-tile.is-featured { flex-basis: min(19.5rem, 82vw); }
.reel-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 9 / 16;
    border: 1px solid var(--gold-dim);
    background: #0a0a0e;
}
.reel-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.reel-tile > p {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.6rem;
    margin: 0.65rem 0 0;
    font-family: var(--micro);
    font-size: 0.72rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--muted);
}
.reel-tile > p a { color: var(--gold); letter-spacing: 0.14em; }
.reels-nav { display: flex; justify-content: flex-end; gap: 0.5rem; padding: 0 var(--pad) 1.2rem; }
.reels-nav button {
    width: 2.4rem;
    height: 2.4rem;
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    background: transparent;
    color: var(--gold-lite);
    cursor: pointer;
}
.reels-nav button:hover { border-color: var(--gold); background: rgba(212, 175, 55, 0.12); }
.reel-badge {
    position: absolute;
    z-index: 3;
    top: 0.7rem;
    left: 0.7rem;
    padding: 0.24rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--gold), var(--gold-lite));
    color: #14100a;
    font-family: var(--micro);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}
.reel-tile { position: relative; }

.reels-ticker {
    overflow: hidden;
    padding: 0.55rem 0;
    border-block: 1px solid var(--gold-dim);
    background: linear-gradient(90deg, rgba(212, 175, 55, 0.08), transparent 30%, transparent 70%, rgba(212, 175, 55, 0.08));
}
.reels-ticker > div { display: flex; align-items: center; gap: 1.2rem; width: max-content; animation: slide 34s linear infinite; }
.reels-ticker span { font-family: var(--micro); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--muted); }
.reels-ticker i { font-style: normal; font-size: 0.5rem; color: var(--gold); }

/* ---------- contact atlas (6 Corner) ---------- */
.contact-stage { align-items: center; grid-template-columns: 0.92fr 1.08fr; }
.way-list { list-style: none; margin: 1.15rem 0 1.4rem; padding: 0; display: grid; gap: 0.55rem; }
.way-list li { display: flex; align-items: center; gap: 0.7rem; }
.way-list b {
    flex: none;
    display: grid;
    place-items: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold-lite), var(--gold));
    color: #14100a;
    font-family: var(--micro);
    font-size: 0.62rem;
}
.way-list span { font-size: 0.92rem; color: var(--muted); }
.atlas { position: relative; z-index: 1; }
.atlas-plate {
    position: relative;
    width: min(100%, 36rem);
    aspect-ratio: 1;
    margin-inline: auto;
    display: grid;
    place-items: center;
}
.atlas-compass {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--gold);
    pointer-events: none;
}
.atlas-compass text {
    font-family: var(--micro);
    font-size: 9px;
    letter-spacing: 0.28em;
    fill: var(--gold-lite);
}
.atlas-hex { position: relative; z-index: 1; width: 70%; aspect-ratio: 1; display: block; cursor: pointer; }
.atlas-hex:hover .atlas-lens img { transform: scale(1.05); }
.atlas-hex:hover::after { box-shadow: inset 0 0 0 1.5px var(--gold-lite); }
.atlas-hex:focus-visible { outline: none; }
.atlas-hex:focus-visible::after { box-shadow: inset 0 0 0 2px var(--gold-lite); }
.atlas-lens {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    background: #08080c;
    box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.45), 0 30px 70px rgba(0, 0, 0, 0.55);
}
.atlas-hex::after {
    content: "";
    position: absolute;
    inset: -6px;
    z-index: 2;
    pointer-events: none;
    clip-path: polygon(50% 0%, 93% 25%, 93% 75%, 50% 100%, 7% 75%, 7% 25%);
    box-shadow: inset 0 0 0 1.5px rgba(243, 221, 160, 0.7);
}
.atlas-lens img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 52% 40%;
    transition: transform 0.7s cubic-bezier(.22,1,.36,1);
}
.atlas-route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    color: var(--gold-lite);
    pointer-events: none;
    filter: drop-shadow(0 1px 1px #050507);
}
.atlas-way {
    position: absolute;
    inset: 0;
    z-index: 3;
    margin: 0;
    padding: 0;
    list-style: none;
}
.atlas-way li {
    position: absolute;
    left: var(--x);
    top: var(--y);
    display: flex;
    align-items: center;
    gap: 0.3rem;
    transform: translate(-20%, -50%);
}
.atlas-way b {
    display: grid;
    place-items: center;
    width: 1.35rem;
    height: 1.35rem;
    border-radius: 50%;
    background: linear-gradient(160deg, var(--gold-lite), var(--gold));
    color: #14100a;
    font-family: var(--micro);
    font-size: 0.58rem;
    box-shadow: 0 0 0 4px rgba(5, 5, 7, 0.5);
}
.atlas-way span {
    padding: 0.18rem 0.4rem;
    background: rgba(5, 5, 7, 0.82);
    border: 1px solid var(--gold-dim);
    font-family: var(--micro);
    font-size: 0.52rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--gold-lite);
    white-space: nowrap;
}
.atlas-loc {
    position: absolute;
    z-index: 4;
    left: 50%;
    bottom: 14%;
    transform: translateX(-50%);
    padding: 0.32rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(120deg, var(--gold), var(--gold-lite));
    color: #14100a;
    font-family: var(--micro);
    font-size: 0.58rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    white-space: nowrap;
}
.atlas-points {
    position: absolute;
    inset: 6%;
    z-index: 5;
    margin: 0;
    padding: 0;
    list-style: none;
    pointer-events: none;
}
.atlas-points li {
    position: absolute;
    font-family: var(--micro);
    font-size: 0.62rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold-lite);
    white-space: nowrap;
}
.atlas-points li:nth-child(1) { top: -0.15rem; left: 50%; transform: translateX(-50%); }
.atlas-points li:nth-child(2) { top: 18%; right: -0.35rem; }
.atlas-points li:nth-child(3) { bottom: 18%; right: -0.15rem; }
.atlas-points li:nth-child(4) { bottom: -0.1rem; left: 50%; transform: translateX(-50%); }
.atlas-points li:nth-child(5) { bottom: 18%; left: -0.25rem; }
.atlas-points li:nth-child(6) { top: 18%; left: -0.45rem; }
.book-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.7rem; }
.book-tile { display: flex; flex-direction: column; justify-content: flex-end; min-height: 12.5rem; padding: 1.5rem; transition: transform 0.35s cubic-bezier(.22,1,.36,1); }
.book-tile:hover { transform: translateY(-6px); }
.book-tile.wa::before { border-color: rgba(37, 211, 102, 0.42); }
.book-tile.ig::before { border-color: rgba(253, 29, 29, 0.36); }
.book-tile.fb::before { border-color: rgba(10, 102, 194, 0.46); }
.book-tile span { font-family: var(--micro); font-size: 0.64rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.book-tile h2 { margin: 0.4rem 0 0.5rem; font-size: 1.45rem; }
.book-tile p { margin: 0; font-size: 0.86rem; color: var(--muted); }
.lab-band {
    display: grid;
    grid-template-columns: 1.08fr 0.92fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: start;
    border-block: 1px solid var(--gold-dim);
    background:
        radial-gradient(30rem 22rem at 10% 15%, rgba(212, 175, 55, 0.11), transparent 62%),
        var(--panel);
}
.look-lab h2 { margin-bottom: 1.4rem; }
.lab-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.look-lab label { display: grid; gap: 0.3rem; margin-bottom: 1.1rem; font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.look-lab input { padding: 0.55rem 0; border: 0; border-bottom: 1px solid var(--line); background: transparent; outline: none; font-size: 1rem; }
.look-lab input:focus { border-color: var(--gold); }
.lab-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.5rem; margin-bottom: 1.2rem; }
.lab-grid button {
    padding: 0.72rem 0.5rem;
    border: 1px solid var(--line);
    background: transparent;
    font-size: 0.86rem;
    cursor: pointer;
    transition: border-color 0.25s ease, background 0.25s ease, transform 0.25s ease, color 0.25s ease;
}
.lab-grid button:hover { transform: translateY(-3px); border-color: var(--gold); }
.lab-grid button.on { border-color: var(--gold); background: linear-gradient(120deg, var(--gold), var(--gold-lite)); color: #14100a; }
.ticket {
    min-height: 5.2rem;
    margin-bottom: 1.1rem;
    padding: 1rem;
    border: 1px dashed var(--gold-dim);
    background: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(212, 175, 55, 0.06) 9px, rgba(212, 175, 55, 0.06) 10px);
    font-family: var(--display);
    font-size: 1.02rem;
    line-height: 1.45;
    white-space: pre-line;
}
.look-lab .hint { margin: 1rem 0 0; }
.lab-collage { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lab-collage img { width: 100%; aspect-ratio: 1; object-fit: cover; border: 1px solid var(--gold-dim); transition: transform 0.8s cubic-bezier(.22,1,.36,1); }
.lab-collage img:hover { transform: scale(1.03); }
.lab-hours { margin-top: 1.6rem; padding: 1.2rem 1.3rem; }
.lab-hours h3 { margin: 0 0 0.3rem; font-size: 1.05rem; }
.lab-hours p { margin: 0 0 0.6rem; color: var(--gold-lite); font-family: var(--display); font-size: 1.15rem; }
.visit-band { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.visit-band h2 { font-size: 1.5rem; }
.hours, .tips { list-style: none; margin: 0; padding: 0; }
.hours li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.5rem 0; border-bottom: 1px solid var(--line); font-size: 0.9rem; }
.hours b { color: var(--gold-lite); font-variant-numeric: tabular-nums; }
.tips li { position: relative; padding: 0.34rem 0 0.34rem 1.15rem; color: var(--muted); font-size: 0.92rem; }
.tips li::before { content: "◆"; position: absolute; left: 0; top: 0.66rem; font-size: 0.5rem; color: var(--gold); }
.listing-stack { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.9rem; }
.listing-stack a { padding: 0.38rem 0.9rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.8rem; transition: background 0.25s ease, color 0.25s ease; }
.listing-stack a:hover { background: var(--gold); color: #14100a; }

/* ---------- SERVICES: hero card preview ---------- */
.card-preview { position: relative; padding: 1.5rem 1.5rem 2.5rem; }
.cp-sheet { padding: 1.5rem 1.6rem; }
.cp-sheet.frame { padding-bottom: 3.2rem; }
.cp-sheet.back {
    position: absolute;
    inset: 0 3rem 1rem 0;
    border: 1px solid rgba(212, 175, 55, 0.28);
    background: linear-gradient(160deg, #14141c, #0a0a0e);
    transform: rotate(-3deg);
}
.cp-sheet h4 {
    margin: 0 0 0.5rem;
    font-family: var(--micro);
    font-size: 0.86rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold-lite);
}
.cp-sheet h4 + ul { margin-bottom: 1.2rem; }
.cp-sheet ul { list-style: none; margin: 0; padding: 0; }
.cp-sheet li { display: grid; grid-template-columns: auto 1fr auto; align-items: baseline; gap: 0.5rem; padding: 0.22rem 0; font-size: 0.9rem; }
.cp-sheet i { border-bottom: 1px dotted rgba(241, 236, 226, 0.3); transform: translateY(-0.28rem); }
.cp-sheet b { color: var(--gold-lite); font-variant-numeric: tabular-nums; }
.cp-seal {
    position: absolute;
    right: 0;
    bottom: 0;
    display: grid;
    place-content: center;
    text-align: center;
    width: 7rem;
    height: 7rem;
    border-radius: 50%;
    border: 1px solid rgba(212, 175, 55, 0.45);
    background: radial-gradient(circle, #0a0a0d 62%, rgba(212, 175, 55, 0.18));
}
.cp-seal b { font-family: var(--display); font-size: 2rem; line-height: 1; color: var(--gold-lite); }
.cp-seal span { font-family: var(--micro); font-size: 0.58rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }

/* ---------- SERVICES: shell + sidebar ---------- */
.menu-shell {
    display: grid;
    grid-template-columns: 15.5rem minmax(0, 1fr);
    gap: clamp(1.4rem, 3vw, 2.6rem);
    align-items: start;
    padding: 1rem var(--pad) clamp(2.5rem, 5vw, 4rem);
}
.menu-side { position: sticky; top: 5.6rem; min-width: 0; }
.menu-main { min-width: 0; }
.menu-side h4 {
    margin: 0 0 0.7rem;
    font-family: var(--micro);
    font-size: 0.64rem;
    font-weight: 800;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--gold);
}
.side-nav { display: grid; gap: 0.1rem; }
.side-nav button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.48rem 0.7rem;
    border: 0;
    border-left: 2px solid transparent;
    background: none;
    color: var(--muted);
    text-align: left;
    font-size: 0.88rem;
    cursor: pointer;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.side-nav button:hover { color: var(--paper); background: rgba(241, 236, 226, 0.04); }
.side-nav button.on { border-left-color: var(--gold); background: rgba(212, 175, 55, 0.1); color: var(--gold-lite); font-weight: 600; }
.side-nav i { font-style: normal; font-size: 0.74rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.side-nav button.empty { opacity: 0.35; }
.side-note { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.side-note p { margin: 0 0 0.7rem; font-size: 0.84rem; color: var(--muted); }
.side-note .btn { width: 100%; padding: 0.6rem 1rem; font-size: 0.82rem; }

/* ---------- SERVICES: sticky bar ---------- */
.menu-bar {
    position: sticky;
    top: 5rem;
    z-index: 25;
    display: grid;
    gap: 0.7rem;
    margin-bottom: 1.6rem;
    padding: 0.9rem 1rem;
    border: 1px solid var(--gold-dim);
    background: rgba(7, 7, 10, 0.94);
    backdrop-filter: blur(16px);
}
.bar-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.55rem; }
.active-filters { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.active-filters button {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.24rem 0.7rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(212, 175, 55, 0.14);
    color: var(--gold-lite);
    font-size: 0.76rem;
    cursor: pointer;
}
.active-filters button::after { content: "×"; font-size: 0.95rem; line-height: 1; }
.active-filters .clear-all { border-color: var(--line); background: none; color: var(--muted); }
.filter-search { position: relative; display: flex; align-items: center; gap: 0.6rem; }
.filter-search svg { width: 1.15rem; height: 1.15rem; color: var(--gold); flex: none; }
.filter-search input { flex: 1; padding: 0.6rem 0; border: 0; border-bottom: 1px solid var(--gold-dim); background: transparent; outline: none; font-size: 1.02rem; }
.filter-search input::placeholder { color: rgba(241, 236, 226, 0.35); }
.filter-search input:focus { border-color: var(--gold); }
.filter-search button { background: none; border: 0; font-size: 1.5rem; line-height: 1; color: var(--muted); cursor: pointer; }
.seg { display: inline-flex; flex: none; border: 1px solid var(--gold-dim); border-radius: 999px; overflow: hidden; }
.seg button { padding: 0.4rem 0.95rem; border: 0; background: transparent; color: var(--muted); font-size: 0.84rem; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; }
.seg button.on { background: linear-gradient(120deg, var(--gold), var(--gold-lite)); color: #14100a; font-weight: 600; }
.filter-count { margin-left: auto; font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }

/* ---------- SERVICES: menu ---------- */
.menu-groups { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(23rem, 100%), 1fr)); gap: 2.4rem 1.6rem; align-items: start; }
.menu-group { padding: 1.5rem 1.6rem; }
.menu-group header { margin-bottom: 0.9rem; }
.menu-group h3 { margin: 0; font-family: var(--micro); font-size: 1.02rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--paper); }
.menu-group header p { margin: 0.3rem 0 0; font-size: 0.84rem; color: var(--muted); }
.menu-group header p span {
    display: block;
    margin-top: 0.2rem;
    font-family: var(--micro);
    font-size: 0.66rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
}
.menu-legend { margin: 2.2rem 0 0; font-size: 0.8rem; color: var(--muted); }
.menu-legend b { color: var(--gold); font-weight: 600; }
.price-list { list-style: none; margin: 0; padding: 0; }
.price-row { display: grid; grid-template-columns: auto auto 1fr auto; align-items: baseline; gap: 0.5rem; padding: 0.34rem 0; }
.price-row.hit { animation: hit 0.5s ease; }
@keyframes hit { 0%, 100% { background: transparent; } 40% { background: rgba(212, 175, 55, 0.14); } }
.row-add {
    width: 1.35rem;
    height: 1.35rem;
    flex: none;
    align-self: center;
    border: 1px solid var(--gold-dim);
    border-radius: 50%;
    background: transparent;
    color: var(--gold);
    font-size: 0.9rem;
    line-height: 1;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.row-add:hover { transform: scale(1.12); border-color: var(--gold); }
.price-row.picked .row-add { background: var(--gold); color: #14100a; }
.price-row.picked .row-name { color: var(--gold-lite); }
.row-name { font-size: 0.95rem; }
.row-name em { font-style: normal; font-size: 0.72rem; color: var(--muted); margin-left: 0.35rem; }
.loved-tag { margin-left: 0.3rem; font-size: 0.7rem; color: var(--gold); cursor: help; }
.leader { border-bottom: 1px dotted rgba(241, 236, 226, 0.28); transform: translateY(-0.28rem); min-width: 1rem; }
.row-price { font-weight: 600; color: var(--gold-lite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.row-price small {
    display: inline-block;
    margin-left: 0.3rem;
    font-weight: 400;
    font-size: 0.68rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--muted);
}
.menu-flat { display: grid; gap: 0.1rem; }
.menu-flat .price-row { padding: 0.5rem 0; border-bottom: 1px solid rgba(241, 236, 226, 0.06); }
.menu-flat .row-group { display: block; font-style: normal; font-size: 0.72rem; color: var(--muted); }
.no-results { text-align: center; padding: 3rem 0; color: var(--muted); }
.no-results button { background: none; border: 0; color: var(--gold); cursor: pointer; border-bottom: 1px solid currentColor; }

/* ---------- SERVICES: packages + prepaid ---------- */
.pkg-band { border-top: 1px solid var(--gold-dim); background: var(--panel); }
.pkg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.7rem; }
.pkg-grid article { padding: 1.6rem; transition: transform 0.35s cubic-bezier(.22,1,.36,1); }
.pkg-grid article:hover { transform: translateY(-6px); }
.pkg-grid > article > span { font-family: var(--micro); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.pkg-grid h3 { margin: 0.4rem 0 0.6rem; font-size: 1.5rem; }
.pkg-grid ul { margin: 0 0 1.2rem; padding-left: 1rem; color: var(--muted); font-size: 0.9rem; }
.pkg-grid li { margin-bottom: 0.22rem; }
.prepaid-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1.5rem; }
.prepaid-grid article { padding: 1.2rem; text-align: center; }
.prepaid-pay { font-family: var(--display); font-size: 1.8rem; color: var(--gold-lite); line-height: 1; }
.prepaid-grid p { margin: 0.5rem 0 0.3rem; font-size: 0.86rem; color: var(--muted); }
.prepaid-grid b { color: var(--gold); }
.prepaid-grid span { font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }

/* ---------- cart bar ---------- */
.cart-bar {
    position: fixed;
    z-index: 55;
    left: 50%;
    bottom: 1rem;
    transform: translateX(-50%);
    width: min(94vw, 62rem);
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    align-items: center;
    gap: 0.9rem;
    padding: 0.7rem 0.8rem 0.7rem 0.6rem;
    border: 1px solid var(--gold);
    border-radius: 999px;
    background: rgba(9, 8, 6, 0.95);
    backdrop-filter: blur(16px);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.cart-clear { width: 2rem; height: 2rem; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); font-size: 1.2rem; line-height: 1; cursor: pointer; }
.cart-meta { line-height: 1.15; white-space: nowrap; }
.cart-meta b { display: block; font-size: 0.85rem; }
.cart-meta span { font-family: var(--display); font-size: 1.1rem; color: var(--gold-lite); }
.cart-chips { display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; }
.cart-chips::-webkit-scrollbar { display: none; }
.cart-chips i { font-style: normal; white-space: nowrap; padding: 0.2rem 0.6rem; border: 1px solid var(--gold-dim); border-radius: 999px; font-size: 0.74rem; color: var(--muted); }
.cart-bar .btn { padding: 0.65rem 1.2rem; font-size: 0.85rem; }

/* ---------- footer ---------- */
.colophon {
    position: relative;
    z-index: 2;
    padding: clamp(2.4rem, 6vw, 3.6rem) var(--pad) 1.5rem;
    border-top: 1px solid var(--gold-dim);
    background:
        repeating-linear-gradient(45deg, rgba(212, 175, 55, 0.05) 0 1px, transparent 1px 14px),
        linear-gradient(180deg, #060608, #0c0b08);
}
.colo-top {
    display: grid;
    grid-template-columns: 1.25fr 0.75fr;
    gap: clamp(1.6rem, 4vw, 3rem);
    align-items: center;
    padding-bottom: 2.6rem;
    margin-bottom: 2.6rem;
    border-bottom: 1px solid var(--line);
}
.colo-card {
    display: grid;
    justify-items: center;
    gap: 0.25rem;
    padding: 1.6rem;
    text-align: center;
    border: 1px solid var(--gold-dim);
    background: rgba(212, 175, 55, 0.05);
    transition: transform 0.35s cubic-bezier(.22,1,.36,1), background 0.35s ease;
}
.colo-card:hover { transform: translateY(-5px); background: rgba(212, 175, 55, 0.1); }
.colo-card b { font-family: var(--display); font-size: 3.2rem; line-height: 1; color: var(--gold-lite); }
.colo-card span { font-size: 0.84rem; color: var(--muted); }
.colo-card em { font-style: normal; margin-top: 0.5rem; font-size: 0.76rem; color: var(--muted); opacity: 0.75; }
.colo-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 1.6rem; }
.colo-logo { height: 2.6rem; width: auto; margin-bottom: 1rem; }
.colo-grid h5 { margin: 0 0 0.7rem; font-family: var(--micro); font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--gold); }
.colo-grid p { margin: 0; color: var(--muted); font-size: 0.88rem; }
.colo-grid a { display: block; margin: 0.28rem 0; color: var(--muted); font-size: 0.9rem; transition: color 0.2s ease, transform 0.2s ease; }
.colo-grid a:hover { color: var(--gold-lite); transform: translateX(3px); }
.colo-end {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: 2.4rem;
    padding-top: 1.1rem;
    border-top: 1px solid var(--line);
    font-size: 0.76rem;
    color: var(--muted);
    opacity: 0.7;
}

/* ---------- responsive ---------- */
@media (max-width: 1150px) {
    .mark-sub, .mark-rule { display: none; }
    .people-grid { grid-template-columns: repeat(2, 1fr); }
    .feed-pair { grid-template-columns: 1fr; gap: 2.6rem; }
    .feed-screen { height: 32rem; }
    .menu-shell { grid-template-columns: 1fr; }
    .menu-side { position: static; }
    .side-nav { display: flex; overflow-x: auto; gap: 0.4rem; padding-bottom: 0.4rem; scrollbar-width: none; }
    .side-nav::-webkit-scrollbar { display: none; }
    .side-nav button {
        flex: none;
        gap: 0.4rem;
        border: 1px solid var(--line);
        border-radius: 999px;
        padding: 0.36rem 0.85rem;
        white-space: nowrap;
    }
    .side-nav button.on { border-color: var(--gold); }
    .side-note { display: none; }
    .card-preview { max-width: 26rem; }
    .prepaid-grid { grid-template-columns: repeat(3, 1fr); }
    .pkg-grid, .spot-cards, .book-grid { grid-template-columns: repeat(2, 1fr); }
    .colo-grid { grid-template-columns: 1fr 1fr; }
    .sig-grid { grid-template-columns: repeat(2, 1fr); }
    .sig.wide { grid-column: span 2; }
}
@media (max-width: 900px) {
    .mast { grid-template-columns: 1fr auto; width: calc(100vw - 1.2rem); }
    .nav { display: none; }
    .nav-toggle { display: grid; }
    .cta-wa, .pulse:not(.inline) { display: none; }
    .social-dock { display: none; }
    .marquee { margin-top: 5rem; }
    .filters { top: 4rem; }
    .stage, .stage.compact, .spotlight, .story, .people-grid, .known-grid, .steps-grid,
    .embed-row, .lab-band, .visit-band, .reel-stack, .figures,
    .connect {
        grid-template-columns: 1fr;
    }
    .stage { min-height: 0; }
    .stage-deck { aspect-ratio: 1 / 0.9; max-width: 30rem; }
    .figures { grid-template-columns: repeat(2, 1fr); }
    .story aside { position: static; }
    .gal { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 9rem; }
    .shot span { transform: none; }
    .trust, .menu-facts { grid-template-columns: repeat(2, 1fr); }
    .contact-stage { grid-template-columns: 1fr; }
    .atlas-plate { width: min(100%, 30rem); }
    .embed-frame iframe { height: 26rem; }
    .prepaid-grid { grid-template-columns: repeat(2, 1fr); }
    .frame::after, .pkg-grid article::after, .prepaid-grid article::after,
    .book-tile::after, .embed-frame::after, .menu-group::after { inset: 9px -9px -9px 9px; }
    .cart-bar { grid-template-columns: auto 1fr auto; padding: 0.6rem; gap: 0.6rem; }
    .cart-chips { display: none; }
    .lab-collage { grid-template-columns: repeat(4, 1fr); }
    .colo-top { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
    .pane-goog { grid-template-columns: 1fr; text-align: center; }
    .pg-score { padding-right: 0; border-right: 0; border-bottom: 1px solid var(--line); padding-bottom: 1rem; }
    .pg-body { text-align: left; }
    .wa-orb span { display: none; }
    .wa-orb { padding: 0.8rem; }
    .colo-grid, .prepaid-grid, .pkg-grid, .spot-cards, .book-grid, .sig-grid, .gal { grid-template-columns: 1fr; }
    .sig.wide, .g22, .g21 { grid-column: auto; }
    .g22, .g12 { grid-row: auto; }
    .gal { grid-auto-rows: 13rem; }
    .lab-grid, .lab-fields { grid-template-columns: repeat(2, 1fr); }
    .lab-collage { grid-template-columns: repeat(2, 1fr); }
    .filter-label { min-width: 100%; }
    .filter-count { margin-left: 0; }
    .menu-group { padding: 1.2rem; }
    .mark-logo { height: 2.1rem; }
    .orbit { width: 7rem; height: 7rem; }
    .orbit b { font-size: 1.7rem; }
}