/* ==========================================================================
   Woosh Biz — component library
   --------------------------------------------------------------------------
   Load after tokens, base and chrome; before woosh-3d.css (whose tripled-class
   specificity has to out-rank any transform declared here).

   Naming rule: no component class may contain the substrings `grid`, `section`,
   `stats`, `btn`, `steps`, `duration` or `testimonials`. The old per-page
   mobile stylesheets carried `[class*="..."]` rules with `!important` on
   exactly those, and anything matching them silently collapses on a phone.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */

.act {
    display: inline-flex; align-items: center; justify-content: center; gap: 11px;
    padding: 15px 32px; border: 0; border-radius: var(--r-pill); cursor: pointer;
    font-family: var(--body); font-weight: 600; font-size: .94rem;
    background: linear-gradient(120deg, var(--plum), var(--plum-l));
    color: #fff; position: relative; overflow: hidden;
    box-shadow: 0 18px 44px -18px rgba(183, 58, 148, .9);
    transform: translate(var(--mag-x, 0), var(--mag-y, 0));
    transition: transform var(--t) var(--ease), box-shadow var(--t), background var(--t);
}
.act::after {
    content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .4), transparent);
    transform: skewX(-20deg); transition: left .65s ease; pointer-events: none;
}
.act:hover::after { left: 150%; }
.act:hover { box-shadow: 0 26px 60px -20px rgba(183, 58, 148, 1); }
.act > * { position: relative; z-index: 1; }

.act.ghost { background: transparent; border: 1px solid var(--line); box-shadow: none; }
.act.ghost:hover { border-color: var(--gold); color: var(--gold); }
.lit .act.ghost { border-color: var(--line-lit); color: var(--ink); }
.lit .act.ghost:hover { border-color: var(--plum); color: var(--plum); }

.act.solid { background: var(--paper); color: var(--ink); box-shadow: var(--sh-1); }
.act.solid:hover { background: var(--gold); }

.act.small { padding: 11px 22px; font-size: .86rem; }

.wa {
    width: 23px; height: 23px; flex: 0 0 auto; border-radius: 50%;
    background: var(--whatsapp); display: grid; place-items: center;
}
.wa svg { width: 13px; height: 13px; }

/* --------------------------------------------------------------------------
   Ambient light — the blurred colour that gives the dark scenes depth
   -------------------------------------------------------------------------- */

.glow { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; z-index: 0; }
.glow.a { width: 520px; height: 520px; background: rgba(135, 30, 108, .5);  top: -140px; right: -120px; }
.glow.b { width: 420px; height: 420px; background: rgba(244, 121, 32, .22); bottom: -160px; left: -110px; }
.glow.c { width: 460px; height: 460px; background: rgba(183, 58, 148, .34); top: 30%; left: -160px; }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */

.scene-hero {
    position: relative; overflow: hidden;
    min-height: 100vh; display: grid; align-items: center;
    padding: calc(var(--nav-h) + 48px) 0 70px;
    background:
        radial-gradient(1000px 620px at 78% 8%, rgba(135, 30, 108, .42), transparent 62%),
        linear-gradient(170deg, var(--night), var(--deep) 58%, var(--night));
}
.scene-hero.short { min-height: 0; padding: calc(var(--nav-h) + 56px) 0 clamp(50px, 6vw, 84px); }

.hero-inner {
    position: relative; z-index: 2;
    display: grid; grid-template-columns: 1.08fr .92fr;
    gap: clamp(30px, 5vw, 70px); align-items: center;
}
.hero-inner.solo { grid-template-columns: 1fr; max-width: 860px; text-align: center; justify-items: center; }
.scene-hero h1 { margin: 20px 0 22px; }
.scene-hero .lede { max-width: 48ch; }
.hero-inner.solo .lede { max-width: 62ch; }

.hero-meta { display: flex; flex-wrap: wrap; gap: 10px; margin: 30px 0 32px; }
.hero-inner.solo .hero-meta { justify-content: center; }
.hero-meta span {
    display: inline-flex; align-items: center; gap: 8px;
    border: 1px solid var(--line); background: rgba(253, 248, 251, .05);
    padding: 9px 17px; border-radius: var(--r-pill);
    font-size: .82rem; font-weight: 500;
}
.hero-meta svg { width: 15px; height: 15px; stroke: var(--gold); stroke-width: 1.7; fill: none; }

.hero-acts { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-inner.solo .hero-acts { justify-content: center; }

/* Breadcrumb, for the interior pages */
.crumbs { font-size: .8rem; color: var(--dim); margin-bottom: 14px; }
.crumbs a:hover { color: var(--gold); }
.crumbs span { opacity: .5; margin: 0 7px; }

/* The card deck — three stacked plates with a turning photo on top. */
.deck { position: relative; perspective: 1500px; }
.deck-plate {
    position: absolute; inset: 0; border-radius: var(--r-lg);
    border: 1px solid var(--line); background: rgba(253, 248, 251, .04);
}
.deck-plate.p1 { transform: translate(26px, 26px) rotate(3deg); }
.deck-plate.p2 { transform: translate(13px, 13px) rotate(1.5deg); }
.deck-art {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    box-shadow: 0 50px 100px -40px #000, 0 0 0 1px var(--line);
    transform-style: preserve-3d;
}
.deck-art img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.deck-cap {
    position: absolute; inset: auto 0 0 0; padding: 54px 22px 20px;
    background: linear-gradient(to top, rgba(10, 3, 8, .94), transparent);
    font-size: .84rem; font-weight: 500; color: var(--paper);
}

/* --------------------------------------------------------------------------
   Scene — the page's repeating unit

   A scene is one idea. Its heading pins itself while the content travels past,
   so the reader finishes a thought before the next one starts.
   -------------------------------------------------------------------------- */

.scene {
    position: relative;
    padding: var(--scene-y) 0;
    /* `clip`, not `hidden`. The ambient .glow blobs are deliberately positioned
       outside the section box and would otherwise widen the page — but
       `overflow: hidden` makes this element a scroll container, which silently
       breaks the `position: sticky` scene title inside it. `clip` trims the
       overflow without creating one. */
    overflow-x: clip;
}
.scene.tight { padding: clamp(44px, 5vw, 70px) 0; }

.scene-grid {
    display: grid; grid-template-columns: minmax(240px, .82fr) 1.18fr;
    gap: clamp(28px, 5vw, 72px); align-items: start;
}
.scene-grid.wide { grid-template-columns: 1fr; }

.scene-title { position: sticky; top: calc(var(--nav-h) + 46px); }
.scene-title h2 { margin: 16px 0; }
.scene-title p { font-size: .98rem; max-width: 34ch; }
.scene-count { font-family: var(--disp); font-size: .9rem; letter-spacing: .3em; color: var(--orange); }

/* Centred head, for scenes with no sidebar */
.scene-head { max-width: 760px; margin: 0 auto clamp(32px, 4vw, 54px); text-align: center; }
.scene-head h2 { margin: 14px 0 12px; }
.scene-head .eyebrow::before { display: none; }

/* --------------------------------------------------------------------------
   Frame — the wide image-led card
   -------------------------------------------------------------------------- */

.reel { display: grid; gap: clamp(18px, 2.4vw, 28px); }

.frame {
    position: relative; border-radius: var(--r-lg); overflow: hidden;
    border: 1px solid var(--line); box-shadow: var(--sh-2);
    transition: box-shadow var(--t-slow), border-color var(--t-slow);
}
.lit .frame { border-color: var(--line-lit); box-shadow: var(--sh-lit-1); }
.frame.w3d-focus { border-color: rgba(183, 58, 148, .6); box-shadow: var(--sh-3); }

.frame > img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; transition: transform .9s var(--ease); }
.frame.w3d-focus > img { transform: scale(1.06); }
.frame.portrait > img { aspect-ratio: 4 / 3; }

.frame-body {
    position: absolute; inset: auto 0 0 0; color: var(--paper);
    padding: clamp(60px, 9vw, 110px) clamp(20px, 3vw, 34px) clamp(20px, 2.4vw, 30px);
    background: linear-gradient(to top, rgba(10, 3, 8, .94) 12%, rgba(10, 3, 8, .55) 55%, transparent);
}
.frame-body h3 { font-family: var(--disp); font-weight: 700; font-size: clamp(1.5rem, 3vw, 2.3rem); }
.frame-body p { color: rgba(253, 248, 251, .78); font-size: .95rem; max-width: 56ch; margin-top: 6px; }

.frame-no {
    position: absolute; top: 18px; left: 20px; z-index: 2;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    font-family: var(--disp); font-size: 1rem; font-weight: 700; color: var(--gold);
    background: rgba(10, 3, 8, .6); border: 1px solid var(--line);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}

/* Frame variant: media on top, body below. Used where the media is a video
   facade — the overlaid gradient of a normal frame would bury the play
   button and the thumbnail it sits on. */
.frame.stack { display: flex; flex-direction: column; background: rgba(253, 248, 251, .04); }
.lit .frame.stack { background: #fff; }
.frame.stack .frame-body {
    position: static; background: none; color: inherit;
    padding: clamp(18px, 2.2vw, 26px);
}
.frame.stack .frame-body p { color: var(--dim); }
.lit .frame.stack .frame-body p { color: var(--ink-2); }
.frame.stack .tags span { border-color: var(--line); }
.lit .frame.stack .tags span { border-color: var(--line-lit); }

.reel.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 760px) { .reel.two { grid-template-columns: 1fr; } }

.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.tags span {
    font-size: .74rem; font-weight: 500; letter-spacing: .04em;
    border: 1px solid rgba(253, 248, 251, .28); border-radius: var(--r-pill);
    padding: 5px 12px;
}

/* --------------------------------------------------------------------------
   Panel — the plain content card (used where there is no photo)
   -------------------------------------------------------------------------- */

.panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: clamp(14px, 2vw, 22px); }
.panels.two { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }

.panel {
    position: relative; overflow: hidden;
    border: 1px solid var(--line); border-radius: var(--r);
    padding: clamp(24px, 3vw, 36px);
    background: linear-gradient(150deg, rgba(253, 248, 251, .06), rgba(253, 248, 251, .01));
    transition: border-color var(--t-slow), background var(--t-slow), box-shadow var(--t-slow);
}
.panel.w3d-focus { border-color: rgba(246, 200, 138, .5); background: linear-gradient(150deg, rgba(183, 58, 148, .2), rgba(253, 248, 251, .02)); }
.lit .panel { background: #fff; border-color: var(--line-lit); box-shadow: var(--sh-lit-1); }
.lit .panel.w3d-focus { border-color: rgba(135, 30, 108, .35); box-shadow: var(--sh-lit-2); background: #fff; }

/* Edge-to-edge media inside a panel — the panel's own padding moves onto the
   inner body instead. */
.panel.flush { padding: 0; }
.panel-media { display: block; overflow: hidden; }
.panel-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.panel.w3d-focus .panel-media img { transform: scale(1.06); }
.panel-body { padding: 20px 22px 22px; }
.panel-body h3 { margin-bottom: 4px; }

.panel h3 { font-family: var(--disp); font-weight: 700; font-size: 1.3rem; margin-bottom: 10px; }
.panel p { font-size: .94rem; }
.panel-icon {
    width: 46px; height: 46px; border-radius: 13px; margin-bottom: 18px;
    display: grid; place-items: center;
    background: rgba(183, 58, 148, .18); border: 1px solid var(--line);
}
.lit .panel-icon { background: rgba(135, 30, 108, .1); border-color: var(--line-lit); }
.panel-icon svg { width: 21px; height: 21px; stroke: var(--gold); stroke-width: 1.7; fill: none; }
.lit .panel-icon svg { stroke: var(--plum); }

.panel-no {
    font-family: var(--disp); font-size: .82rem; letter-spacing: .26em;
    color: var(--orange); margin-bottom: 12px; display: block;
}

/* Portrait + role, for team cards */
.portrait {
    width: 92px; height: 92px; border-radius: 50%; object-fit: cover;
    border: 1px solid var(--line); margin-bottom: 16px;
}
.lit .portrait { border-color: var(--line-lit); }
.role {
    display: block; font-size: .74rem; font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--orange); margin-bottom: 14px;
}
.panel .bio p + p { margin-top: 12px; }
.panel .bio { font-size: .92rem; color: var(--dim); }
.lit .panel .bio { color: var(--ink-2); }
.war-cry {
    margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line);
    font-family: var(--disp); font-style: italic; font-size: 1.02rem; color: var(--gold);
}
.lit .war-cry { border-top-color: var(--line-lit); color: var(--plum); }

/* Emoji used as a panel icon — sized to match the SVG version. */
.panel-emoji { font-size: 1.7rem; line-height: 1; display: block; margin-bottom: 16px; }

/* Pull quote */
.quote {
    font-family: var(--disp); font-style: italic; font-weight: 600;
    font-size: clamp(1.4rem, 2.6vw, 2.1rem); line-height: 1.32;
    border-left: 2px solid var(--orange); padding-left: clamp(20px, 3vw, 34px);
}

/* Link panel — a whole card that is one link (404 destinations, programmes) */
.panel.link-panel { display: block; }
.panel.link-panel .go {
    display: inline-block; margin-top: 16px;
    font-size: .82rem; font-weight: 600; color: var(--gold);
    transition: transform var(--t);
}
.lit .panel.link-panel .go { color: var(--plum); }
.panel.link-panel:hover .go { transform: translateX(5px); }

/* Label/value rows inside a panel (contact details) */
.kv { border-top: 1px solid var(--line); }
.lit .kv { border-top-color: var(--line-lit); }
.kv li { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: .93rem; }
.lit .kv li { border-bottom-color: var(--line-lit); }
.kv .k { font-size: .72rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--dim); }
.lit .kv .k { color: var(--ink-2); }
.kv a:hover { color: var(--gold); }
.lit .kv a:hover { color: var(--plum); }

/* Checklist */
.ticks { margin-top: 4px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; padding: 11px 0; border-top: 1px solid var(--line); font-size: .95rem; }
.ticks li:first-child { border-top: 0; }
.lit .ticks li { border-top-color: var(--line-lit); }
.ticks .tick {
    flex: 0 0 auto; width: 21px; height: 21px; border-radius: 50%; margin-top: 2px;
    background: var(--orange); color: #fff; display: grid; place-items: center;
    font-size: .7rem; font-weight: 700;
}

/* Pill row (service regions, chips that are not interactive) */
.tag-row { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-row span {
    font-size: .8rem; font-weight: 500; padding: 5px 14px;
    border: 1px solid var(--line); border-radius: var(--r-pill);
}
.lit .tag-row span { border-color: var(--line-lit); }

/* Inline action buttons inside a panel */
.mini-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.mini {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; border-radius: var(--r-pill);
    border: 1px solid var(--line); font-size: .8rem; font-weight: 600;
    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
}
.lit .mini { border-color: var(--line-lit); }
.mini:hover { background: var(--plum); border-color: var(--plum); color: #fff; }
.mini.wa-mini:hover { background: var(--whatsapp); border-color: var(--whatsapp); }
.mini svg { width: 14px; height: 14px; }

/* --------------------------------------------------------------------------
   Counters
   -------------------------------------------------------------------------- */

.counters { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(14px, 2vw, 22px); }
.counters.four { grid-template-columns: repeat(4, 1fr); }

.counter {
    border: 1px solid var(--line); border-radius: var(--r);
    padding: clamp(24px, 3vw, 38px);
    background: linear-gradient(150deg, rgba(253, 248, 251, .06), rgba(253, 248, 251, .01));
    transition: border-color var(--t-slow), background var(--t-slow);
}
.counter.w3d-focus { border-color: rgba(246, 200, 138, .5); background: linear-gradient(150deg, rgba(183, 58, 148, .2), rgba(253, 248, 251, .02)); }
.lit .counter { background: #fff; border-color: var(--line-lit); }

.stat-number {
    font-family: var(--disp); font-size: clamp(2.2rem, 4.6vw, 3.5rem);
    line-height: 1; color: var(--gold);
}
.lit .stat-number { color: var(--plum); }
.counter p {
    font-size: .78rem; font-weight: 500; letter-spacing: .16em;
    text-transform: uppercase; color: var(--dim); margin-top: 12px;
}
.lit .counter p { color: var(--ink-2); }

/* --------------------------------------------------------------------------
   Voices — video testimonials
   -------------------------------------------------------------------------- */

.voices { display: grid; gap: 16px; }
.voices.cols { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

.voice {
    display: grid; grid-template-columns: 190px 1fr; gap: 20px; align-items: center;
    border: 1px solid var(--line-lit); border-radius: var(--r);
    padding: 14px; background: #fff; color: var(--ink);
    transition: box-shadow var(--t-slow), border-color var(--t-slow);
}
.voice.w3d-focus { border-color: rgba(135, 30, 108, .35); box-shadow: var(--sh-lit-2); }
.voices.cols .voice { grid-template-columns: 1fr; align-items: start; }

.voice-frame { position: relative; border-radius: var(--r-sm); overflow: hidden; background: var(--night); }
.voice-frame img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform .7s var(--ease); }
.voice.w3d-focus .voice-frame img { transform: scale(1.06); }
.voice-play {
    position: absolute; inset: 0; margin: auto;
    width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(253, 248, 251, .94); color: var(--plum); font-size: .78rem;
}
.voice h4 { font-family: var(--disp); font-size: 1.2rem; font-weight: 700; }
.voice small { display: block; color: var(--ink-2); font-size: .85rem; margin-top: 2px; }
.voice-brand { height: 26px; width: auto; object-fit: contain; margin-top: 12px; opacity: .65; }

/* --------------------------------------------------------------------------
   Logo strips
   -------------------------------------------------------------------------- */

.strip { padding: 40px 0; border-block: 1px solid var(--line); background: rgba(253, 248, 251, .03); }
.lit .strip, .strip.lit { border-block-color: var(--line-lit); background: var(--paper-2); }
.strip-label {
    text-align: center; font-size: .7rem; font-weight: 600; letter-spacing: .26em;
    text-transform: uppercase; color: var(--dim); margin-bottom: 24px;
}
.strip.lit .strip-label { color: var(--ink-2); }

.marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
            mask-image: linear-gradient(to right, transparent, #000 10%, #000 90%, transparent);
}
.marquee + .marquee { margin-top: 18px; }
.marquee-track { display: flex; align-items: center; gap: 54px; width: max-content; animation: wooshSlide 58s linear infinite; }
.marquee.rev .marquee-track { animation-direction: reverse; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes wooshSlide { to { transform: translateX(-50%); } }

.marquee-track img {
    height: 42px; width: auto; object-fit: contain;
    filter: brightness(0) invert(1); opacity: .48;
    transition: opacity var(--t);
}
.marquee-track img:hover { opacity: 1; }
.strip.lit .marquee-track img { filter: grayscale(1); opacity: .55; }
.strip.lit .marquee-track img:hover { filter: none; opacity: 1; }

@media (prefers-reduced-motion: reduce) {
    .marquee-track { animation: none; }
}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */

.faq { max-width: 880px; }
.faq-item { border-bottom: 1px solid var(--line); }
.lit .faq-item { border-bottom-color: var(--line-lit); }

.faq-question {
    display: flex; justify-content: space-between; align-items: center; gap: 22px;
    padding: 22px 2px; cursor: pointer;
    font-weight: 600; font-size: 1.02rem; transition: color var(--t-fast);
}
.faq-item:hover .faq-question,
.faq-item.active .faq-question { color: var(--plum-l); }
.lit .faq-item:hover .faq-question,
.lit .faq-item.active .faq-question { color: var(--plum); }

.faq-question::after {
    content: '+'; font-size: 1.5rem; font-weight: 300; color: var(--orange);
    transition: transform var(--t);
}
.faq-item.active .faq-question::after { transform: rotate(135deg); }

.faq-answer {
    max-height: 0; overflow: hidden; color: var(--dim); font-size: .95rem;
    transition: max-height var(--t) ease, padding var(--t) ease;
}
.lit .faq-answer { color: var(--ink-2); }
.faq-item.active .faq-answer { max-height: 620px; padding: 0 2px 24px; }
.faq-answer a { color: var(--plum-l); text-decoration: underline; text-underline-offset: 3px; }
.lit .faq-answer a { color: var(--plum); }

/* --------------------------------------------------------------------------
   Closing CTA
   -------------------------------------------------------------------------- */

.closing {
    position: relative; overflow: hidden; text-align: center;
    padding: clamp(80px, 10vw, 140px) 0;
    background: radial-gradient(760px 420px at 50% 0%, rgba(135, 30, 108, .5), transparent 65%), var(--night);
    color: var(--paper);
}
.closing h2 { margin-bottom: 14px; position: relative; z-index: 2; }
.closing p { color: var(--dim); margin-bottom: 34px; position: relative; z-index: 2; }
.closing .act { position: relative; z-index: 2; }

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */

.field { margin-bottom: 18px; }
.field label {
    display: block; margin-bottom: 7px;
    font-size: .78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--dim);
}
.lit .field label { color: var(--ink-2); }

.field input, .field textarea, .field select {
    width: 100%; padding: 13px 16px;
    background: rgba(253, 248, 251, .05);
    border: 1px solid var(--line); border-radius: var(--r-sm);
    color: var(--paper); font-size: .95rem;
    transition: border-color var(--t-fast), background var(--t-fast);
}
.lit .field input, .lit .field textarea, .lit .field select {
    background: #fff; border-color: var(--line-lit); color: var(--ink);
}
.field input:focus, .field textarea:focus, .field select:focus {
    outline: none; border-color: var(--plum-l);
    background: rgba(253, 248, 251, .08);
}
.lit .field input:focus, .lit .field textarea:focus, .lit .field select:focus { background: #fff; }
.field textarea { min-height: 130px; resize: vertical; }
.field input::placeholder, .field textarea::placeholder { color: var(--dim); }
.lit .field input::placeholder, .lit .field textarea::placeholder { color: #a291a0; }

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* --------------------------------------------------------------------------
   Gallery + lightbox
   -------------------------------------------------------------------------- */

.gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 1.4vw, 16px); }
.gallery-item {
    display: block; position: relative; overflow: hidden;
    border-radius: var(--r); border: 1px solid var(--line); cursor: pointer;
    transition: border-color var(--t-slow), box-shadow var(--t-slow);
}
.gallery-item.w3d-focus { border-color: rgba(183, 58, 148, .55); box-shadow: var(--sh-3); }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item.w3d-focus img { transform: scale(1.07); }

.lightbox {
    position: fixed; inset: 0; z-index: 10001;
    display: none; place-items: center; padding: 24px;
    background: rgba(8, 2, 6, .93);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.lightbox.open { display: grid; }
.lightbox-figure { max-width: 92vw; text-align: center; }
.lightbox img { max-width: 92vw; max-height: 80vh; width: auto; border-radius: var(--r); box-shadow: var(--sh-2); margin: 0 auto; }
.lightbox figcaption { color: var(--paper); font-size: .92rem; font-weight: 500; padding-top: 14px; }
.lightbox-close {
    position: absolute; top: 18px; right: 20px;
    width: 44px; height: 44px; border-radius: 50%;
    background: rgba(253, 248, 251, .12); border: 1px solid var(--line);
    color: var(--paper); font-size: 1.6rem; line-height: 1; cursor: pointer;
}
.lightbox-close:hover { background: var(--plum); }
.lightbox-nav {
    position: absolute; top: 50%; transform: translateY(-50%);
    width: 46px; height: 46px; border-radius: 50%; cursor: pointer;
    background: rgba(253, 248, 251, .12); border: 1px solid var(--line);
    color: var(--paper); font-size: 1.5rem; line-height: 1;
    transition: background var(--t-fast), transform var(--t-fast);
}
.lightbox-nav:hover { background: var(--orange); transform: translateY(-50%) scale(1.08); }
.lightbox-prev { left: 20px; }
.lightbox-next { right: 20px; }
@media (max-width: 640px) { .lightbox-prev { left: 8px; } .lightbox-next { right: 8px; } }

/* --------------------------------------------------------------------------
   Filter chips + search (resorts venue list)
   -------------------------------------------------------------------------- */

.venue-tools {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 14px; margin: 0 auto clamp(26px, 3vw, 42px);
}
.filter-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.chip {
    background: rgba(253, 248, 251, .06); color: var(--paper);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    padding: 9px 20px; font-size: .86rem; font-weight: 500; cursor: pointer;
    white-space: nowrap; transition: all var(--t-fast);
}
.chip:hover { border-color: var(--plum-l); }
.chip.active { background: var(--plum); border-color: var(--plum); color: #fff; }
.chip .chip-count { opacity: .6; font-size: .82em; margin-left: 5px; }

.venue-search { position: relative; }
.venue-search input {
    width: 260px; max-width: 100%; padding: 11px 18px 11px 42px;
    background: rgba(253, 248, 251, .06);
    border: 1px solid var(--line); border-radius: var(--r-pill);
    color: var(--paper); font-size: .9rem;
}
.venue-search input:focus { outline: none; border-color: var(--plum-l); }
.venue-search .search-icon {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    font-size: .9rem; pointer-events: none; opacity: .7;
}

.venues-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(16px, 2vw, 28px); }
.venue-card { display: flex; flex-direction: column; }
.venue-shot {
    position: relative; display: block; width: 100%; padding: 0; border: 0;
    background: var(--deep); cursor: zoom-in; overflow: hidden; aspect-ratio: 16 / 9;
}
.venue-shot img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s var(--ease); }
.venue-card:hover .venue-shot img,
.venue-card.w3d-focus .venue-shot img { transform: scale(1.08); }
.shot-emoji {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    width: 42px; height: 42px; border-radius: 13px;
    background: rgba(253, 248, 251, .92); display: grid; place-items: center;
    font-size: 1.3rem; transition: transform var(--t);
}
.venue-card.w3d-focus .shot-emoji { transform: scale(1.1) rotate(-6deg); }
.venue-body { padding: 22px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.venue-body h3 { font-family: var(--disp); font-size: 1.2rem; font-weight: 700; margin-bottom: 8px; }
.venue-where {
    align-self: flex-start; font-size: .78rem; font-weight: 600;
    background: rgba(183, 58, 148, .18); color: var(--gold);
    border-radius: var(--r-pill); padding: 4px 14px; margin-bottom: 14px;
}
.venue-body p { font-size: .92rem; color: var(--dim); margin-bottom: 20px; }
/* These two reference the raw dark-scene tokens rather than .dim, so the
   `.lit .dim` inversion does not reach them — they need their own pass. */
.lit .venue-where { background: rgba(135, 30, 108, .1); color: var(--plum); }
.lit .venue-body p { color: var(--ink-2); }
/* Pushes every button to the same baseline no matter how long the copy runs. */
.venue-body .act { margin-top: auto; width: 100%; }

.no-results { text-align: center; color: var(--dim); padding: 40px 0 10px; }

@media (max-width: 1024px) { .venues-list { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
    .venues-list { grid-template-columns: 1fr; }
    /* Chips scroll sideways rather than stacking into a tall wall. `display:
       block` is load-bearing — as a column flex container, align-items:stretch
       sizes the search field to the chip row's full content width and drags
       the page off the right edge. */
    .venue-tools { display: block; }
    .filter-chips {
        flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start;
        padding-bottom: 6px; margin-bottom: 14px;
        -webkit-overflow-scrolling: touch; scrollbar-width: none;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .venue-search input { width: 100%; }
}

/* --------------------------------------------------------------------------
   YouTube facade (built by woosh-ui.js)
   -------------------------------------------------------------------------- */

.yt {
    position: relative; display: block; width: 100%; aspect-ratio: 16 / 9;
    background: var(--night); border: 0; padding: 0; cursor: pointer; overflow: hidden;
}
.yt img.yt-thumb { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform var(--t-slow), opacity var(--t); }
.yt:hover img.yt-thumb { transform: scale(1.06); opacity: .85; }
.yt .yt-play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 58px; height: 58px; border-radius: 50%;
    background: rgba(244, 121, 32, .94); color: #fff;
    display: grid; place-items: center; font-size: 1.1rem;
    transition: transform var(--t) var(--ease);
}
.yt:hover .yt-play { transform: translate(-50%, -50%) scale(1.12); }
.yt .yt-label {
    position: absolute; inset: auto 0 0 0; padding: 40px 16px 14px;
    background: linear-gradient(to top, rgba(10, 3, 8, .92), transparent);
    color: var(--paper); font-size: .84rem; font-weight: 500; text-align: left;
}
.yt + iframe, iframe.yt-live { width: 100%; aspect-ratio: 16 / 9; border: 0; display: block; }

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1024px) {
    .gallery { grid-template-columns: repeat(3, 1fr); }
    .counters.four { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 968px) {
    .hero-inner, .scene-grid { grid-template-columns: 1fr; }
    /* A sticky heading is a desktop device. On a phone it eats the screen and
       leaves the content scrolling in a slot, so it is released here. */
    .scene-title { position: static; }
    .deck { margin-top: 24px; }
    .voice { grid-template-columns: 1fr; }
    .voice-frame { max-width: 340px; }
    .gallery { grid-template-columns: repeat(2, 1fr); }
    .field-row { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
    .scene-hero { min-height: 0; padding: calc(var(--nav-h) + 36px) 0 56px; }
    .frame > img { aspect-ratio: 4 / 3; }
    .counters, .counters.four { grid-template-columns: 1fr 1fr; }
    .act { width: 100%; }
    .hero-acts { flex-direction: column; align-items: stretch; }
}