/* ═══════════════════════════════════════════════════════════
   TOPSHAM BREWERY - v1.0.0
   Studio Illicit
═══════════════════════════════════════════════════════════ */

/* ─── FONTS ─────────────────────────────────────────────── */
/* Display: Recoleta, self-hosted (webfont licence in purchase - files
   gitignored; cooper-black-std from the Adobe kit is the wired fallback). */
/* Open Sans + IBM Plex Mono via Google Fonts in functions.php. */

@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/recoleta-regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/recoleta-medium.woff2') format('woff2');
    font-weight: 500; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/recoleta-semibold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/recoleta-bold.woff2') format('woff2');
    font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Recoleta';
    src: url('../fonts/recoleta-black.woff2') format('woff2');
    font-weight: 900; font-style: normal; font-display: swap;
}

/* ─── DESIGN TOKENS ──────────────────────────────────────── */
:root {
    /* ── PRIMITIVES - core palette, client spec sheet Aug 2026 ──
       Light-led: Void Cream page, Black Hole ink, and the full
       psychedelic set deployed with intent - purple leads, the
       neons rotate through accent scopes. */
    --cosmic-purple:  #4B0082;
    --hyper-pink:     #FF00A8;
    --acid-yellow:    #FFF600;
    --electric-blue:  #00E5FF;
    --alien-green:    #39FF14;
    --solar-orange:   #FF6A00;
    --cosmic-lilac:   #B388FF;
    --deep-space:     #140028;
    --void-cream:     #FFF7E6;
    --aquarium-grey:  #9A9AB1;
    --black-hole:     #0D0D0D;

    /* Paper ramp */
    --paper-000: #FFFFFF;
    --paper-050: #FFF7E6;
    --paper-100: #F9EFD9;
    --paper-200: #F2E5C9;
    --paper-300: #E7D7B4;

    /* ── SEMANTIC - light context (default). v1 names kept so
       every existing component reference resolves. ── */
    --bg-primary:     var(--paper-050);
    --bg-secondary:   var(--paper-100);
    --surface-raised: var(--paper-000);
    --surface-sunken: var(--paper-200);

    --text-primary:   var(--black-hole);
    --text-secondary: #55555F;
    --text-muted:     rgba(13,13,13,0.45);
    --text-link:      var(--cosmic-purple);

    --accent:         var(--cosmic-purple);
    --accent-ink:     var(--void-cream);
    --accent-glow:    color-mix(in srgb, var(--accent) 22%, transparent);
    --accent-amber:   var(--solar-orange);
    --accent-purple:  var(--hyper-pink);

    --border-accent:  color-mix(in srgb, var(--accent) 40%, transparent);
    --border-subtle:  rgba(13,13,13,0.10);
    --border-strong:  rgba(13,13,13,0.75);

    /* Holo foil - the spec sheet special. Moments only. */
    --holo-foil: linear-gradient(115deg,
        var(--hyper-pink) 0%, var(--cosmic-lilac) 22%, var(--electric-blue) 44%,
        var(--alien-green) 62%, var(--acid-yellow) 80%, var(--solar-orange) 100%);

    /* Sticker chrome - the thick-outline, hard-shadow language the
       spec sheet's badges and cans use. */
    --sticker-border: 3px solid var(--black-hole);
    --sticker-shadow: 6px 6px 0 var(--black-hole);
    --radius-sm: 6px; --radius-md: 14px; --radius-lg: 22px; --radius-pill: 999px;
    --radius-btn: var(--radius-pill);  /* every button is a pill - one dial */

    /* Display weight - Recoleta Black. One dial for the whole system. */
    --fw-display: 900;

    /* Grain */
    --grain-opacity: 0.05;
    --grain-blend:   multiply;

    /* Motion */
    --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
    --dur-fast: 160ms; --dur-base: 280ms; --dur-slow: 520ms;

    /* Fonts */
    --font-display: 'Recoleta', 'cooper-black-std', Georgia, serif;
    --font-body:    'Open Sans', system-ui, sans-serif;
    --font-mono:    'IBM Plex Mono', monospace;

    /* Spacing */
    --sp-4:  0.25rem; --sp-8:  0.5rem;  --sp-12: 0.75rem; --sp-16: 1rem;
    --sp-20: 1.25rem; --sp-24: 1.5rem;  --sp-32: 2rem;    --sp-40: 2.5rem;
    --sp-48: 3rem;    --sp-56: 3.5rem;  --sp-64: 4rem;    --sp-80: 5rem;
    --sp-96: 6rem;    --sp-120: 7.5rem;

    /* Layout */
    --container-max: 1920px;
    --section-px:    clamp(1.5rem, 5vw, 8.5rem);
    --section-py:    clamp(4rem, 8vw, 7rem);

    /* Type scale - fluid, bumped up again, target at 1920px */
    --fs-144: clamp(3.75rem, 9vw, 12rem);
    --fs-96:  clamp(3rem, 6.2vw, 8.5rem);
    --fs-72:  clamp(2.5rem, 4.6vw, 6.25rem);
    --fs-48:  clamp(1.85rem, 3vw, 4rem);
    --fs-36:  clamp(1.5rem, 2.3vw, 2.85rem);
    --fs-24:  clamp(1.3rem, 1.5vw, 1.85rem);
    --fs-20:  clamp(1.1rem, 1.25vw, 1.5rem);
    --fs-16:  clamp(1.0625rem, 1.1vw, 1.2rem);
    --fs-14:  clamp(0.9rem, 0.85vw, 1rem);
    --fs-13:  clamp(0.85rem, 0.8vw, 0.95rem);
    --fs-12:  clamp(0.8rem, 0.75vw, 0.875rem);
    --fs-11:  clamp(0.75rem, 0.7vw, 0.8125rem);

    /* Nav */
    --nav-h: 72px;
}

/* ─── RESET ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; }
html, body {
    width: 100%;
    overflow-x: clip;
}
body {
    background: var(--bg-primary);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    line-height: 1.65;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* ─── UTILITY ─────────────────────────────────────────────── */
.tb-container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--section-px); }
.tb-section { padding-block: var(--section-py); }
.tb-label {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.2em;
    color: var(--accent);
    text-transform: uppercase;
}
.tb-display { font-family: var(--font-display); font-weight: var(--fw-display); line-height: 1; text-transform: uppercase; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border-width: 0; }

/* ─── HERO ────────────────────────────────────────── */

.tb-app { position: relative; width: 100%; overflow-x: clip; }

/* Header overlay ------------------------------------ */
.tb-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background: transparent;
    border-bottom: 1px solid transparent;
    will-change: transform;
    transition: background-color 0.4s ease, backdrop-filter 0.4s ease, border-color 0.4s ease;
}
/* Frosted background once scrolled off the hero */
.tb-header.is-scrolled {
    background: rgba(245, 238, 224, 0.9);
    -webkit-backdrop-filter: blur(12px) saturate(1.3);
    backdrop-filter: blur(12px) saturate(1.3);
    border-bottom-color: var(--border-subtle);
}
/* Header nav: ink on cream-topped pages, cream on dark-hero pages, ink when scrolled */
.tb-dark-hero .tb-header__private,
.tb-dark-hero .tb-header__action,
.tb-dark-hero .tb-header__menu-toggle,
.tb-dark-hero .tb-header__locations-trigger { color: var(--void-cream); }
.tb-header.is-scrolled .tb-header__private,
.tb-header.is-scrolled .tb-header__action,
.tb-header.is-scrolled .tb-header__menu-toggle,
.tb-header.is-scrolled .tb-header__locations-trigger { color: var(--black-hole); }
.tb-header.is-scrolled .tb-header__pill { background: rgba(27,26,23,0.05); }
.tb-header.is-scrolled .tb-header__sep { opacity: 0; }
.tb-header__inner {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
    align-items: center;
    gap: 24px;
    width: 100%;
    padding-inline: var(--section-px);
    padding-block: 10px;
    transition: padding-block 0.4s ease;
}
.tb-header.is-scrolled .tb-header__inner { padding-block: 5px; }
.tb-header__sep { transition: opacity 0.4s ease; }
.tb-header__left { display: flex; align-items: center; gap: 24px; justify-self: start; min-width: 0; }

.tb-header__pill {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--accent);
    background: rgba(27,26,23,0.08);
    border-radius: 40px;
    padding: 8px 20px;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-13);
    color: var(--accent);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
}
.tb-header__pill:hover {
    background: rgba(27,26,23,0.18);
    box-shadow: 0 8px 24px rgba(27,26,23,0.25);
}
.tb-header__pulse {
    width: 8px;
    height: 8px;
    flex-shrink: 0;
    background: var(--accent);
    border-radius: 50%;
    animation: tb-pulse 2s ease-in-out infinite;
}
@keyframes tb-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.tb-header__private {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-14);
    color: var(--black-hole);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: color 0.2s ease;
}
.tb-header__private:hover { color: var(--accent); }

.tb-header__logo { display: flex; width: 92px; height: 81px; justify-self: center; transition: transform 0.3s ease; }
.tb-header__logo:hover { transform: scale(1.06) rotate(-2deg); }
.tb-header__logo img,
.tb-header__logo-img { width: 92px; height: 81px; object-fit: contain; }
/* Logo variants: white mark over dark image heroes, ink mark on cream/light pages
   and once the header goes solid on scroll. */
.tb-header__logo-img--ink { display: none; }
body:not(.tb-dark-hero) .tb-header__logo-img--white,
.tb-header.is-scrolled .tb-header__logo-img--white { display: none; }
body:not(.tb-dark-hero) .tb-header__logo-img--ink,
.tb-header.is-scrolled .tb-header__logo-img--ink { display: block; }

.tb-header__actions { display: flex; align-items: center; gap: 24px; justify-self: end; }
.tb-header__action,
.tb-header__menu-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-14);
    color: var(--black-hole);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: color 0.2s ease, transform 0.2s ease;
}
.tb-header__action:hover,
.tb-header__menu-toggle:hover { color: var(--accent); }

.tb-header__menu-toggle { position: relative; }
.tb-menu-btn__labels {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    height: 1.4em;
    line-height: 1.4;
    overflow: hidden;
}
.tb-menu-btn__label { line-height: 1.4; }
.tb-menu-btn__icon {
    width: 0.85em;
    height: 0.85em;
    display: flex;
    align-items: center;
    justify-content: center;
    transform-origin: 50% 50%;
    will-change: transform;
}
.tb-menu-btn__icon svg { width: 100%; display: block; }

.tb-header__sep {
    height: 1px;
    width: 100%;
    background: linear-gradient(to right, rgba(245,238,224,0), rgba(245,238,224,0.35), rgba(245,238,224,0));
}

/* ─── MEGA MENU (full-screen, OSMO-style wipe) ────────── */
.tb-mega {
    position: fixed;
    inset: 0;
    z-index: 90;
    width: 100%;
    height: 100vh;
    height: 100svh;
    display: none;
}
.tb-mega__panel {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: auto;
    will-change: transform;
}
.tb-mega__bg { position: absolute; inset: 0; z-index: 0; }
.tb-mega__bg-panel { position: absolute; inset: 0; background: var(--bg-primary); }
.tb-mega__bg-panel.is--first  { background: var(--accent); }
.tb-mega__bg-panel.is--second { background: var(--bg-secondary); }

.tb-mega__inner {
    position: relative;
    z-index: 1;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: clamp(1.5rem, 4vh, 3rem);
    padding-block: calc(var(--nav-h) + clamp(0.75rem, 2.5vh, 1.75rem)) clamp(1.5rem, 4vh, 2.75rem);
}
/* Menu list fills the panel and vertically centres; "Visit us" sits at the bottom. */
.tb-mega__details { margin-top: 0; }

.tb-mega__list { display: flex; flex-direction: column; flex: 1 1 auto; justify-content: center; }
.tb-mega__item { position: relative; overflow: hidden; }
.tb-mega__link {
    display: flex;
    align-items: flex-start;
    gap: 0.55em;
    width: 100%;
    padding-block: clamp(1px, 0.35vh, 6px);
    color: var(--text-primary);
}
.tb-mega__link-heading {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: clamp(2.5rem, min(7vw, 10.5vh), 6.5rem);
    line-height: 0.9;
    text-transform: uppercase;
    letter-spacing: 0.005em;
    transition: color 0.4s ease, transform 0.55s cubic-bezier(.65,.05,0,1);
    will-change: transform;
}
.tb-mega__link:hover .tb-mega__link-heading,
.tb-mega__link:focus-visible .tb-mega__link-heading {
    color: var(--accent);
    transform: translateX(0.25em);
}
.tb-mega__link-eyebrow {
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    color: var(--accent);
    padding-top: 0.5em;
    transition: opacity 0.35s ease;
}
/* Hover flourish: the page number fades out. */
.tb-mega__link:hover .tb-mega__link-eyebrow,
.tb-mega__link:focus-visible .tb-mega__link-eyebrow {
    opacity: 0;
}

.tb-mega__details {
    display: flex;
    flex-wrap: wrap;
    gap: clamp(2rem, 6vw, 5rem) clamp(3rem, 8vw, 7rem);
}
.tb-mega__group { display: flex; flex-direction: column; gap: 0.9rem; }
.tb-mega__group-label {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tb-mega__group-links { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; }
.tb-mega__group-links a {
    font-family: var(--font-body);
    font-size: var(--fs-16);
    color: var(--text-secondary);
    transition: color 0.2s ease;
}
.tb-mega__group-links a:hover { color: var(--accent); }

/* Open state - pin the header, keep only logo + toggle above the panel */
body.tb-menu-open { overflow: hidden; }
body.tb-menu-open .tb-header { position: fixed; }
body.tb-menu-open .tb-header__left,
body.tb-menu-open .tb-header__sep {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.tb-nav__list {
    display: flex;
    flex-direction: column;
    gap: 16px;
    list-style: none;
    margin: 0;
    padding: 96px 32px;
}
.tb-nav__list a {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-24);
    letter-spacing: 0.03em;
    text-transform: uppercase;
    transition: color 0.2s ease, padding-left 0.2s ease;
    display: inline-block;
}
.tb-nav__list a:hover { color: var(--accent); padding-left: 8px; }

/* Hero section --------------------------------------- */
.tb-hero {
    position: relative;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    overflow: visible;
    background: linear-gradient(170deg, var(--void-cream) 0%, var(--paper-200) 100%);
}

.tb-hero__bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Optional hero background image / Vimeo video (layered by DOM order: image → video → scrim → glows) */
.tb-hero__image { position: absolute; inset: 0; background-size: cover; background-position: center; background-repeat: no-repeat; }
.tb-hero__video { position: absolute; inset: 0; overflow: hidden; }
.tb-hero__video iframe {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100vw;
    height: 56.25vw;      /* 16:9 */
    min-height: 100%;
    min-width: 177.78vh;  /* cover on tall viewports */
    border: 0;
}
.tb-hero__scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0.5) 0%, rgba(27,26,23,0.28) 45%, rgba(27,26,23,0.78) 100%); }
.tb-hero.has-media .tb-hero__glow { opacity: 0.45; }

.tb-hero__glow { position: absolute; border-radius: 50%; }
.tb-hero__glow--centre {
    width: 800px;
    height: 600px;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, var(--bg-secondary) 0%, transparent 70%);
    opacity: 0.6;
}
.tb-hero__glow--left {
    width: 1000px;
    height: 700px;
    top: 80px;
    left: -300px;
    background: radial-gradient(circle, rgba(27,26,23,0.125) 0%, transparent 70%);
}
.tb-hero__glow--right {
    width: 900px;
    height: 700px;
    top: 60px;
    right: -300px;
    background: radial-gradient(circle, rgba(27,26,23,0.25) 0%, transparent 70%);
}
.tb-hero__glow--bottom {
    width: 1200px;
    height: 600px;
    bottom: -200px;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(247,154,194,0.094) 0%, transparent 70%);
}
.tb-hero__glow--bottom-centre {
    width: 600px;
    height: 300px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: radial-gradient(circle, rgba(27,26,23,0.039) 0%, transparent 70%);
}

.tb-hero__streak { position: absolute; border-radius: 2px; }
.tb-hero__streak--1 {
    width: 900px; height: 3px; top: 180px; left: -100px;
    background: rgba(27,26,23,0.31);
    transform: rotate(-5deg);
    filter: blur(12px);
}
.tb-hero__streak--2 {
    width: 700px; height: 2px; top: 320px; right: -50px;
    background: rgba(247,154,194,0.25);
    transform: rotate(-2deg);
    filter: blur(10px);
}
.tb-hero__streak--3 {
    width: 600px; height: 3px; top: 460px; left: 200px;
    background: rgba(27,26,23,0.31);
    transform: rotate(7deg);
    filter: blur(10px);
}
.tb-hero__streak--4 {
    width: 500px; height: 2px; bottom: 140px; left: 80px;
    background: rgba(27,26,23,0.145);
    transform: rotate(-8deg);
    filter: blur(8px);
}

.tb-hero__inner {
    position: relative;
    z-index: 1;
    flex: 1;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding-block: clamp(120px, 14vw, 200px) clamp(60px, 8vw, 120px);
}

/* Centered content ------------------------------------ */
.tb-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    width: 100%;
}

/* Constrained wrapper for sub-heading + CTAs only */
.tb-hero__body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
    width: 100%;
    max-width: 720px;
}

.tb-hero__label {
    letter-spacing: 0.27em;
}

.tb-hero__heading {
    font-size: var(--fs-96);
    line-height: 0.92;
    color: var(--void-cream);
    width: 100%;
}
.tb-hero__heading-row { display: block; width: 100%; }
.tb-hero__heading-row + .tb-hero__heading-row { margin-top: 0.02em; }

[data-fit-width] {
    display: inline-block;
    white-space: nowrap;
    margin: 0;
}

.tb-heading-char {
    display: inline-block;
    cursor: default;
    will-change: opacity, color;
    transition: color 0.08s ease;
}
/* The inter-word space is its own inline-block char - give it real width. */
.tb-heading-char[data-space] { width: 0.3em; }

/* Press-and-hold "charge" easter egg for [data-glitch] headings - a subtle
   idle glow; --glow (0 = none) drives every shadow, GSAP animates it on
   press/release. No template carries data-glitch right now (the client had
   it taken off the hero heading) - kept for any heading that opts back in. */
[data-glitch] {
    --glow: 0.42;
    display: inline-block;
    position: relative;
    transform-origin: center center;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}
[data-glitch],
[data-glitch] .tb-heading-char {
    text-shadow:
        0 0 calc(16px * var(--glow)) rgba(61, 224, 252, calc(0.55 * var(--glow))),
        0 0 calc(54px * var(--glow)) rgba(61, 224, 252, calc(0.30 * var(--glow)));
}
[data-glitch].is-charging { cursor: grabbing; }
.tb-hero__beam {
    position: absolute;
    top: -12%;
    bottom: -12%;
    left: 0;
    width: 5px;
    transform: translateX(-50%);
    background: linear-gradient(to bottom, transparent, rgba(234, 251, 255, 0.95), transparent);
    box-shadow: 0 0 26px 8px rgba(61, 224, 252, 0.7);
    pointer-events: none;
    z-index: 3;
    mix-blend-mode: screen;
}

.tb-hero__sub {
    font-weight: 600;
    text-shadow: 0 2px 22px rgba(0,0,0,0.5);
    font-family: var(--font-body);
    font-size: var(--fs-16);
    color: var(--void-cream);
    line-height: 1.7;
    }

.tb-hero__nav-links {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}
.tb-hero__nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 3px;
    padding: 10px 20px;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.tb-hero__nav-link svg { flex-shrink: 0; transition: transform 0.2s ease; }
.tb-hero__nav-link:hover {
    color: var(--accent);
    border-color: rgba(27,26,23,0.5);
    background: rgba(27,26,23,0.06);
}
.tb-hero__nav-link:hover svg { transform: translateX(3px); }

.tb-hero__ctas { display: flex; gap: 28px; align-items: center; flex-wrap: wrap; justify-content: center; }
.tb-hero__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-14);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 18px 40px;
    border-radius: var(--radius-btn);
    transition: box-shadow 0.3s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
}
.tb-hero__cta--primary {
    background: var(--accent);
    color: var(--bg-primary);
}

.tb-hero__cta--secondary {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ─── EVENT CARDS ─────────────────────────────────────── */
.tb-event-card {
    --card-c: var(--hyper-pink);
    --card-ink: #fff;
    position: relative;
    width: 380px;
    max-width: 84vw;
    flex-shrink: 0;
    scroll-snap-align: start;
    display: flex;
    flex-direction: column;
    border-radius: 20px;
    overflow: hidden;
    background: var(--card-c);
    color: var(--card-ink);
    transition: transform 0.25s ease;
}
.tb-event-card:hover { transform: translateY(-5px); }
@media (prefers-reduced-motion: reduce) {
    .tb-event-card, .tb-event-card__photo img { transition: none; }
}

/* Whole-card link overlay - the entire card is clickable, not just the CTA. */
.tb-event-card__cardlink { position: absolute; inset: 0; z-index: 6; border-radius: inherit; }
.tb-event-card__cardlink:focus-visible { outline: 3px solid var(--black-hole); outline-offset: 3px; }
.tb-event-card .tb-event-card__cta { pointer-events: none; }

/* Contained photo at the top - never overlaid by text */
.tb-event-card__photo {
    position: relative;
    /* 3:2 to match the What's On cards - one ratio for an event image
       wherever it appears. */
    aspect-ratio: 3 / 2;
    /* flex: none, or the card's flex column shrinks the photo to fit the
       tallest sibling's text and the ratio quietly collapses - which is why
       these were coming out at wildly different heights on a phone. */
    flex: none;
    overflow: hidden;
    background: rgba(0,0,0,0.12);
}
.tb-event-card__photo img,
.tb-event-card__photo-placeholder {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s ease;
}
.tb-event-card:hover .tb-event-card__photo img { transform: scale(1.05); }
.tb-event-card__photo-placeholder { background: rgba(0,0,0,0.14); }

/* Featured flag - clean cream pill, top-right of the photo */
.tb-event-card__featured {
    position: absolute;
    top: 14px;
    right: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--black-hole);
    background: var(--void-cream);
    border-radius: 40px;
    padding: 5px 12px;
}

/* Info sits BELOW the photo, on the solid colour block */
.tb-event-card__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 20px 22px 24px;
}
/* Meta pills - clean cream tags on the solid colour, wrap so nothing clips */
.tb-event-card__pills {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    align-items: center;
}
.tb-event-card__pill {
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    flex-shrink: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    border-radius: 40px;
    padding: 5px 13px;
    background: var(--void-cream);
    color: var(--black-hole);
}

/* Status badge - clean solid pill on the photo corner */
.tb-event-card__status {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    border-radius: 40px;
    padding: 5px 13px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.tb-event-card__status--on-sale     { background: var(--alien-green);    color: #fff; }
.tb-event-card__status--almost-full { background: var(--acid-yellow); color: var(--black-hole); }
.tb-event-card__status--free-entry  { background: var(--electric-blue);     color: #fff; }
.tb-event-card__status--sold-out    { background: var(--black-hole);     color: var(--void-cream); }
.tb-event-card__title {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-24);
    color: inherit;
    letter-spacing: 0.01em;
    line-height: 1.05;
    text-transform: uppercase;
}
.tb-event-card__desc {
    font-family: var(--font-body);
    font-size: var(--fs-13);
    color: inherit;
    opacity: 0.85;
    line-height: 1.5;
}
.tb-event-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    margin-top: 4px;
    background: var(--black-hole);
    color: var(--void-cream);
    padding: 11px 24px;
    border-radius: 40px;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    transition: transform 0.2s ease;
}
.tb-event-card:hover .tb-event-card__cta { transform: translateX(3px); }
.tb-event-card__cta--sold-out {
    background: rgba(0,0,0,0.18);
    color: var(--black-hole);
    cursor: not-allowed;
    pointer-events: none;
    transform: none;
}

/* Bottom bar ---------------------------------------------- */
.tb-hero__bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 72px;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.18em;
}
.tb-hero__status { display: flex; align-items: center; gap: 12px; }
.tb-hero__status-open { color: #3dfc58; }
.tb-hero__status-closed { color: #ff4d4d; }
.tb-hero__status-at { color: var(--text-primary); opacity: 0.5; }
.tb-hero__status-link {
    color: var(--text-primary);
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: color 0.2s ease;
}
.tb-hero__status-link:hover { color: var(--accent); }
.tb-hero__clock { color: var(--text-primary); opacity: 0.7; font-variant-numeric: tabular-nums; }
/* The homepage hero bar sits over a dark image, so its ink text is invisible.
   Lift the message + clock to cream (the status word keeps its green/red). */
.tb-dark-hero .tb-hero__status-at,
.tb-dark-hero .tb-hero__status-link,
.tb-dark-hero .tb-hero__clock { color: var(--void-cream); }

/* ─── OPENING TIMES MODAL ────────────────────────────────── */
.tb-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    visibility: hidden;
    pointer-events: none;
}
.tb-modal.is-open { visibility: visible; pointer-events: auto; }
.tb-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(27,26,23,0.75);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    opacity: 0;
}
.tb-modal__panel {
    position: relative;
    z-index: 1;
    width: min(440px, 100%);
    background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary));
    border: 1px solid var(--border-accent);
    border-radius: 14px;
    padding: clamp(1.75rem, 4vw, 2.75rem);
    box-shadow: 0 40px 100px rgba(0,0,0,0.6);
    opacity: 0;
    transform: translateY(24px) scale(0.96);
}
.tb-modal__close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-24);
    line-height: 1;
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
    transition: color 0.2s ease, border-color 0.2s ease, transform 0.3s ease;
}
.tb-modal__close:hover { color: var(--accent); border-color: var(--accent); transform: rotate(90deg); }
.tb-modal__heading { font-size: var(--fs-36); margin: 6px 0 24px; }
.tb-modal__hours { display: flex; flex-direction: column; margin-top: 12px; }
.tb-modal__hours li {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 12px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-family: var(--font-mono);
    font-size: var(--fs-14);
    letter-spacing: 0.04em;
}
.tb-modal__hours li:last-child { border-bottom: none; }
.tb-modal__hours li span:first-child { color: var(--text-primary); text-transform: uppercase; }
.tb-modal__hours li span:last-child { color: var(--accent); }

/* Today's row: a soft radial bloom behind it rather than a hard band, so it
   glows out of the sheet instead of sitting on top of it. The negative inline
   margin lets the bloom bleed past the list edges without widening the panel. */
.tb-modal__hours li.is-today {
    position: relative;
    margin-inline: calc(var(--modal-bleed, 8px) * -1);
    padding-inline: var(--modal-bleed, 8px);
    border-radius: 14px;
    border-bottom-color: transparent;
}
.tb-modal__hours li.is-today::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background:
        radial-gradient(120% 160% at 12% 50%, color-mix(in srgb, var(--accent) 38%, transparent) 0%, transparent 62%),
        radial-gradient(90% 150% at 88% 50%, color-mix(in srgb, var(--hyper-pink) 28%, transparent) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}
/* Ink on the bloom: the panel is cream, so cream text disappeared into it. */
.tb-modal__hours li.is-today span:first-child { color: var(--black-hole); font-weight: 600; }
.tb-modal__hours li.is-today span:last-child { color: var(--black-hole); }

/* Live status: how long until we open or close. */
.tb-modal__status {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    margin: -14px 0 18px;
    padding: 0.42em 0.9em 0.42em 0.7em;
    border-radius: 999px;
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--black-hole);
    background: var(--alien-green);
}
.tb-modal__status::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
    animation: tb-status-pulse 2.4s ease-in-out infinite;
}
.tb-modal__status[data-state="soon"]   { background: var(--acid-yellow); }
.tb-modal__status[data-state="closed"] { background: var(--hyper-pink); color: var(--void-cream); text-transform: none; letter-spacing: 0.03em; }
.tb-modal__status:empty { display: none; }
@keyframes tb-status-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.45; transform: scale(0.82); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-modal__status::before { animation: none; }
}
@media (max-width: 480px) {
    .tb-modal__status { font-size: var(--fs-11); letter-spacing: 0.04em; }
}

/* ─── GLOBAL BUTTONS ─────────────────────────────────── */
.tb-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-14);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    padding: 16px 36px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    border: none;
    transition: box-shadow 0.3s ease, transform 0.25s ease, background 0.2s ease;
    white-space: nowrap;
}
.tb-btn svg { flex-shrink: 0; transition: transform 0.2s ease; }
.tb-btn:hover svg { transform: translateX(4px); }
.tb-btn--primary {
    background: var(--accent);
    color: var(--bg-primary);
}
.tb-btn--outline {
    background: transparent;
    color: var(--accent);
    border: 1px solid var(--accent);
}

/* ─── LOCATIONS DROPDOWN ──────────────────────────────── */
.tb-header__locations { position: relative; }
.tb-header__locations-trigger {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-14);
    color: var(--black-hole);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    transition: color 0.2s ease;
    white-space: nowrap;
}
.tb-header__locations-trigger:hover,
.tb-header__locations.is-open .tb-header__locations-trigger { color: var(--accent); }
.tb-header__locations-trigger svg { transition: transform 0.25s ease; flex-shrink: 0; }
.tb-header__locations.is-open .tb-header__locations-trigger svg,
.tb-header__locations:hover .tb-header__locations-trigger svg { transform: rotate(180deg); }
.tb-header__locations-drop {
    position: absolute;
    top: calc(100% + 34px);
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    z-index: 200;
    display: grid;
    gap: 4px;
    background: var(--void-cream);
    border: 1px solid var(--border-accent);
    border-radius: 14px;
    padding: 10px;
    width: 344px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease, transform 0.22s ease;
    box-shadow: 0 18px 44px rgba(27,26,23,0.18);
}
.tb-header__locations-drop::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    width: 12px;
    height: 12px;
    transform: translateX(-50%) rotate(45deg);
    background: var(--void-cream);
    border-left: 1px solid var(--border-accent);
    border-top: 1px solid var(--border-accent);
}
/* Invisible bridge so hover survives the gap between the link and the dropdown */
.tb-header__locations::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    height: 38px;
}
.tb-header__locations.is-open .tb-header__locations-drop,
.tb-header__locations:hover .tb-header__locations-drop,
.tb-header__locations:focus-within .tb-header__locations-drop {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(-50%) translateY(0);
}
.tb-loc-card {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 8px;
    border-radius: 10px;
    color: var(--text-primary);
    transition: background 0.18s ease;
}
.tb-loc-card:hover { background: rgba(27,26,23,0.08); }
.tb-loc-card__media {
    position: relative;
    flex-shrink: 0;
    width: 66px;
    height: 66px;
    border-radius: 8px;
    overflow: hidden;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border: 1px solid var(--border-subtle);
}
.tb-loc-card__media[data-empty="true"] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, rgba(27,26,23,0.22), rgba(247,154,194,0.18));
}
.tb-loc-card__initial {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-24);
    color: var(--accent);
}
.tb-loc-card__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.tb-loc-card__label {
    font-family: var(--font-display); font-weight: var(--fw-display);
    font-size: var(--fs-16);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.tb-loc-card__cue {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.12em;
    color: var(--text-muted);
    transition: color 0.18s ease, transform 0.18s ease;
}
.tb-loc-card:hover .tb-loc-card__cue { color: var(--accent); transform: translateX(2px); }

/* ─── WHAT'S ON / EVENTS SECTION ─────────────────────── */
.tb-events {
    position: relative;
    background: var(--void-cream);
    padding-block: var(--section-py);
    /* Tighter exit into the ticker band. */
    padding-block-end: clamp(2.5rem, 5vw, 4rem);
    overflow: hidden;
}
.tb-events__head {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 2.5vw, 1.75rem);
    margin-bottom: clamp(2rem, 5vw, 3.5rem);
    position: relative;
    z-index: 2; /* keep arrows above the scroller's overlapping glow padding */
}
.tb-events__heading { font-size: var(--fs-72); line-height: 1; align-self: flex-start; max-width: 100%; }
.tb-events__controls { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
/* On a phone the row stacks under the heading, so let it take the full width -
   space-between then pushes "See all" and the arrows to opposite edges instead
   of leaving dead space to the right. */
@media (max-width: 767px) {
    .tb-events__controls { width: 100%; }
}
.tb-events__head-right { display: flex; align-items: center; gap: 16px; }
.tb-events__arrows { display: flex; gap: 8px; }
.tb-events__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    color: var(--accent);
    border: 1px solid var(--accent);
    background: rgba(27,26,23,0.04);
    transition: color 0.2s ease, background 0.2s ease, box-shadow 0.25s ease, transform 0.2s ease;
}
.tb-events__arrow:hover {
    background: rgba(27,26,23,0.14);
    box-shadow: 0 0 10px rgba(27,26,23,0.5), 0 0 26px rgba(27,26,23,0.25);
}
.tb-events__scroll {
    padding-left: var(--section-px);
    /* Vertical room so the card glow isn't clipped by the scroll container;
       negative margin cancels it so layout spacing is unchanged.
       Must exceed the featured card's max glow blur (~110px). */
    padding-block: 120px;
    margin-block: -120px;
    scroll-padding-left: var(--section-px);
    scroll-padding-right: var(--section-px);
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
}
.tb-events__scroll::-webkit-scrollbar { display: none; }
.tb-events__track {
    display: flex;
    gap: 24px;
    width: max-content;
    padding-right: var(--section-px);
}
.tb-events__empty {
    font-family: var(--font-body);
    font-size: var(--fs-16);
    color: var(--text-secondary);
    padding: 2rem var(--section-px);
    max-width: 520px;
}
.tb-events__empty a { color: var(--accent); text-decoration: underline; }

/* ─── LOCATIONS (hover-preview list) ─────────────────── */
.tb-locations { position: relative; background: var(--bg-primary); padding-block: var(--section-py); }
.tb-locations__head { margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.tb-locations__eyebrow { display: block; margin-bottom: 0.75rem; }
.tb-locations__heading { font-size: var(--fs-72); line-height: 1; }

.tb-loclist { position: relative; width: 100%; }

.tb-loclist__labels {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 0 clamp(0.5rem, 1.5vw, 1.25rem) 1rem;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.tb-loclist__label.is--name   { flex: 1 1 44%; }
.tb-loclist__label.is--where  { flex: 0 0 22%; }
.tb-loclist__label.is--serves { flex: 1 1 34%; }

.tb-loclist__collection { position: relative; }

.tb-loclist__item { --loc-accent: var(--accent); transition: opacity 0.25s ease; }
.tb-loclist__item.is--plum   { --loc-accent: #F79AC2; }
.tb-loclist__item.is--amber  { --loc-accent: #F3B13C; }
.tb-loclist__item.is--portal { --loc-accent: #DE5F59; }

.tb-loclist__link {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: clamp(1.5rem, 3vw, 2.5rem) clamp(0.5rem, 1.5vw, 1.25rem);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    color: var(--text-primary);
    transition: padding-left 0.4s cubic-bezier(.2,.8,.2,1), border-color 0.3s ease;
}
/* Each location is ruled top + bottom; collapse the doubled interior lines. */
.tb-loclist__item:not(:first-child) { margin-top: -1px; }

.tb-loclist__col { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; min-width: 0; }
.tb-loclist__col.is--name   { flex: 1 1 44%; }
.tb-loclist__col.is--where  { flex: 0 0 22%; }
.tb-loclist__col.is--serves { flex: 1 1 34%; }

.tb-loclist__name {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    font-family: var(--font-display); font-weight: var(--fw-display);
    text-transform: uppercase;
    font-size: clamp(2rem, 4vw, 3.5rem);
    line-height: 1;
    letter-spacing: 0.01em;
    transition: color 0.25s ease;
}

.tb-loclist__pill {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 40px;
    border: 1px solid var(--border-accent);
    color: var(--text-secondary);
    white-space: nowrap;
    transition: border-color 0.25s ease, color 0.25s ease;
}
.tb-loclist__pill--where { color: var(--text-primary); }

@media (hover: hover) {
    .tb-loclist__item:hover .tb-loclist__name { color: var(--loc-accent); }
    .tb-loclist__item:hover .tb-loclist__link { padding-left: calc(clamp(0.5rem, 1.5vw, 1.25rem) + 14px); border-color: var(--loc-accent); }
    .tb-loclist__item:hover .tb-loclist__pill { border-color: var(--loc-accent); color: var(--text-primary); }
    .tb-loclist__collection:hover .tb-loclist__item:not(:hover) { opacity: 0.4; }
}

/* Visual source - hidden on desktop, cloned into the follower */
.tb-loclist__visual { display: none; aspect-ratio: 1 / 1.2; width: 20em; overflow: hidden; }
.tb-loclist__visual-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Cursor follower */
.tb-loclist__follower {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 90;
    width: clamp(200px, 17vw, 290px);
    aspect-ratio: 1 / 1.2;
    border-radius: 0.75em;
    overflow: hidden;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}
.tb-loclist__follower-inner {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1);
}
.tb-loclist__follower [data-follower-visual] {
    display: block;
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}
.tb-loclist__follower-label {
    position: absolute;
    z-index: 2;
    opacity: 0;
    transform: translateY(100%);
    transition: opacity 0.1s ease, transform 0.6s cubic-bezier(0.65, 0.1, 0, 1);
}
.tb-loclist__follower-label span {
    display: block;
    background: #ffffff;
    color: #0a0a0a;
    font-family: var(--font-display); font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    font-size: var(--fs-13);
    padding: 10px 18px;
    border-radius: 6px;
}
body:has(.tb-loclist__collection:hover) .tb-loclist__follower-inner { opacity: 1; transform: scale(1); }
body:has(.tb-loclist__collection:hover) .tb-loclist__follower-label { opacity: 1; transform: translateY(0); }

/* Tablet / mobile - horizontal scroll-snap carousel, a peek of the next card,
 * and no hover/transform effects on touch. */
@media (max-width: 991px) {
    .tb-loclist__labels { display: none; }
    .tb-loclist__collection {
        display: flex;
        flex-wrap: nowrap;
        gap: 1.25rem;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 6px;
    }
    .tb-loclist__collection::-webkit-scrollbar { display: none; }

    /* one card + a peek (~18%) of the next */
    .tb-loclist__item {
        flex: 0 0 82%;
        width: 82%;
        margin-top: 0;
        scroll-snap-align: start;
    }
    .tb-loclist__link {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 0;
        border: 0;
        transition: none;
    }
    .tb-loclist__visual {
        display: block;
        position: relative;
        order: -1;
        width: 100%;
        border-radius: 0.75em;
        margin-bottom: 4px;
    }
    .tb-loclist__col.is--name,
    .tb-loclist__col.is--where,
    .tb-loclist__col.is--serves { flex: none; width: 100%; }
    .tb-loclist__name { font-size: clamp(1.6rem, 6vw, 2.2rem); }
    .tb-loclist__follower { display: none; }

    /* Neutralise the desktop hover shift / dim on touch. */
    .tb-loclist__item:hover .tb-loclist__link { padding-left: 0; border-color: var(--border-subtle); }
    .tb-loclist__collection:hover .tb-loclist__item:not(:hover) { opacity: 1; }
}
@media (max-width: 560px) {
    .tb-loclist__item { flex-basis: 85%; width: 85%; }
}

/* ─── MISSION ────────────────────────────────────────── */
.tb-mission {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    background: var(--bg-primary);
    color: var(--text-primary);
}
.tb-mission__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.tb-mission__glow {
    position: absolute;
    left: 38%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: min(85vw, 1000px);
    height: 65vh;
    background: radial-gradient(ellipse at center, rgba(27,26,23,0.20) 0%, rgba(27,26,23,0.06) 40%, transparent 70%);
    filter: blur(12px);
}
.tb-mission__inner {
    position: relative;
    z-index: 2;
    width: 100%;
    padding-block: clamp(5rem, 9vw, 8rem);
}
/* Mobile: keep the mission + gallery on the same tighter rhythm */
@media (max-width: 767px) {
    .tb-mission { min-height: auto; }
    .tb-mission__inner, .tb-gallery { padding-block: clamp(2.25rem, 9vw, 3.25rem); }
}
.tb-mission__heading {
    font-size: var(--fs-72);
    line-height: 1;
    margin-bottom: clamp(2.75rem, 6vw, 2.5rem);
}
.tb-mission__statement {
    font-family: var(--font-mono);
    font-weight: 400;
    font-size: clamp(1.2rem, 2.7vw, 2.35rem);
    line-height: 1.45;
    letter-spacing: -0.01em;
    max-width: 100%;
    margin: 0;
    color: var(--text-primary);
}

@media (max-width: 640px) {
    .tb-mission__statement { max-width: 100%; font-size: clamp(1.05rem, 5vw, 1.4rem); line-height: 1.5; }
}

/* ─── ARCHIVE / PAGE WRAPPERS ────────────────────────── */
.tb-archive { padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: clamp(3rem, 8vw, 6rem); }
/* On the Locations archive the section shouldn't add its own top padding on top of the archive's */
.tb-archive--locations .tb-locations { padding-top: 0; }

/* ─── WHAT'S ON (event grid) ─────────────────────────── */
.tb-whatson__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.tb-whatson__eyebrow { color: var(--accent); margin-bottom: clamp(0.5rem, 1.5vw, 0.9rem); }
.tb-whatson__title { font-size: var(--fs-72); line-height: 1; margin: 0; }

.tb-whatson__filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
    align-items: center;
    margin-bottom: clamp(1rem, 3vw, 1.5rem);
    position: sticky;
    /* Header isn't fixed (it scrolls away), so pin to the very top - a nav-h offset
       would leave a gap above the bar where cards show through. */
    top: 0;
    z-index: 20;
    background: var(--bg-primary);
    padding-block: 0.85rem;
    box-shadow: 0 14px 22px -18px rgba(0, 4, 12, 0.95);
}
.tb-whatson__search {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    flex: 1 1 260px;
    min-width: 190px;
    padding: 0.7rem 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    color: var(--text-secondary);
    transition: border-color 0.2s ease;
}
.tb-whatson__search:focus-within { border-color: rgba(27,26,23,0.5); }
.tb-whatson__search input { background: none; border: 0; color: var(--text-primary); font-family: var(--font-body); font-size: 1rem; width: 100%; outline: none; }
.tb-whatson__selects { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.tb-whatson__selects select {
    appearance: none;
    -webkit-appearance: none;
    padding: 0.7rem 2.4rem 0.7rem 1.1rem;
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%233DE0FC' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") no-repeat right 1rem center;
    color: var(--text-primary);
    font-family: var(--font-mono);
    font-size: var(--fs-13);
    cursor: pointer;
    transition: border-color 0.2s ease;
}
.tb-whatson__selects select:hover { border-color: rgba(27,26,23,0.5); }
.tb-whatson__selects option { background: var(--bg-secondary); color: var(--text-primary); }

.tb-whatson__count { font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); margin: 0 0 1.25rem; letter-spacing: 0.08em; text-transform: uppercase; }

.tb-whatson__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.25rem, 2.5vw, 2rem); }
@media (max-width: 1200px) { .tb-whatson__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .tb-whatson__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.tb-ev-card { min-width: 0; }
.tb-ev-card[hidden] { display: none; }
.tb-ev-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: var(--sticker-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--surface-raised);
    color: var(--text-primary);
    box-shadow: 5px 5px 0 var(--black-hole);
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tb-ev-card__link:hover { transform: translateY(-5px) scale(1.015); box-shadow: 7px 9px 0 var(--accent); border-color: var(--black-hole); }
@media (prefers-reduced-motion: reduce) {
    .tb-ev-card__link:hover { transform: none; box-shadow: 5px 5px 0 var(--accent); }

}
/* Rotate the sticker shadow through the core palette by card position. */
.tb-ev-card:nth-child(6n+1) { --accent: var(--cosmic-purple); --accent-ink: var(--void-cream); }
.tb-ev-card:nth-child(6n+2) { --accent: var(--hyper-pink);    --accent-ink: var(--black-hole); }
.tb-ev-card:nth-child(6n+3) { --accent: var(--solar-orange);  --accent-ink: var(--black-hole); }
.tb-ev-card:nth-child(6n+4) { --accent: var(--electric-blue); --accent-ink: var(--black-hole); }
.tb-ev-card:nth-child(6n+5) { --accent: var(--alien-green);   --accent-ink: var(--black-hole); }
.tb-ev-card:nth-child(6n+6) { --accent: var(--acid-yellow);   --accent-ink: var(--black-hole); }
.tb-ev-card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--paper-300); border-bottom: var(--sticker-border); }
.tb-ev-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.tb-ev-card__media-fallback { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display); font-weight: var(--fw-display); font-size: 4rem; color: color-mix(in srgb, var(--accent) 75%, var(--black-hole)); }
/* Vibrant placeholder colour cycle, matching the homepage cards */
.tb-ev-card:nth-child(6n+1) { --card-c: var(--hyper-pink); }
.tb-ev-card:nth-child(6n+2) { --card-c: var(--electric-blue); }
.tb-ev-card:nth-child(6n+3) { --card-c: var(--acid-yellow); }
.tb-ev-card:nth-child(6n+4) { --card-c: var(--electric-blue); }
.tb-ev-card:nth-child(6n+5) { --card-c: var(--cosmic-lilac); }
.tb-ev-card:nth-child(6n+6) { --card-c: var(--alien-green); }
.tb-ev-card__badge {
    position: absolute;
    top: 0.85rem;
    left: 0.85rem;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 5px 12px;
    border-radius: 999px;
    border: 2px solid var(--black-hole);
    background: var(--accent);
    color: var(--accent-ink);
}
.tb-ev-card__badge.is--sold-out { background: var(--black-hole); color: var(--void-cream); }
.tb-ev-card__badge.is--past { background: var(--paper-200); color: var(--text-muted); border-color: var(--border-subtle); }
.tb-ev-card__badge.is--ext { color: #F3B13C; border-color: rgba(243,177,60,0.6); }
/* Client-selected featured event - pinned first with a cyan glow + badge. */
.tb-ev-card--featured .tb-ev-card__link {
    border-color: rgba(27,26,23,0.55);
    box-shadow: 0 20px 55px rgba(0,0,0,0.5), 0 0 26px rgba(27,26,23,0.32), 0 0 60px rgba(27,26,23,0.16);
}
.tb-ev-card__featured {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--bg-primary);
    background: var(--accent);
    border-radius: 3px;
    padding: 4px 9px;
    box-shadow: 0 0 16px rgba(27,26,23,0.55);
}
.tb-ev-card__body { display: flex; flex-direction: column; gap: 0.5rem; padding: clamp(1rem, 2vw, 1.4rem); flex: 1; }
.tb-ev-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-secondary); }
.tb-ev-card__tag { color: #F3B13C; border: 1px solid rgba(243,177,60,0.5); border-radius: 999px; padding: 1px 8px; font-size: var(--fs-11); }
.tb-ev-card__title { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.5vw, 1.7rem); line-height: 1.05; }
.tb-ev-card__desc { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.5; }
.tb-ev-card__foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 0.75rem; }
.tb-ev-card__price { font-family: var(--font-mono); font-size: 1rem; color: var(--text-primary); }
.tb-ev-card__cta { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: var(--fs-13); color: var(--accent); white-space: nowrap; }
.tb-ev-card__cta svg { transition: transform 0.3s ease; }

@media (hover: hover) {
    .tb-ev-card__link:hover { border-color: rgba(27,26,23,0.5); transform: translateY(-5px) scale(1.015); box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 24px rgba(27,26,23,0.12); }
    .tb-ev-card__link:hover .tb-ev-card__media img { transform: scale(1.05); }
    .tb-ev-card__link:hover .tb-ev-card__cta svg { transform: translateX(4px); }
}

.tb-whatson__empty { color: var(--text-secondary); font-size: 1.05rem; padding: 2.5rem 0; }
.tb-whatson__reset { color: var(--accent); background: none; border: 0; cursor: pointer; text-decoration: underline; font: inherit; }
.tb-whatson__sentinel { height: 1px; }

@media (max-width: 600px) {
    .tb-whatson__grid { grid-template-columns: 1fr; }
    .tb-whatson__filters { position: static; }
}

/* ─── GALLERY (Smooothy parallax slider) ─────────────── */
.tb-gallery { padding-block: clamp(3rem, 5vw, 4rem); overflow: hidden; }
.tb-gallery__head { margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.tb-gallery__eyebrow { color: var(--accent); }

/* Slider head rows share a layout so the Instagram CTA sits opposite the eyebrow. */
.tb-gallery__head,
.tb-locpage__gallery-head,
.tb-hire__gallery-head,
.tb-product__gallery-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.tb-gallery__cta { display: inline-flex; align-items: center; gap: 0.5rem; }

/* Event page photo slider - full-bleed section under the buy grid. */
.tb-product__gallery { padding-block: clamp(2rem, 4vw, 3rem) 0; overflow: hidden; }
.tb-product__gallery-head { margin-bottom: clamp(1rem, 3vw, 1.75rem); }
.tb-gallery__group { cursor: grab; }
.tb-gallery__group:active { cursor: grabbing; }

.parallax-slider__group,
.parallax-slider__collection { width: 100%; }
.parallax-slider__list {
    width: 100%;
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    cursor: grab;
    padding-bottom: 4px;
}
.parallax-slider__list::-webkit-scrollbar { display: none; }
.parallax-slider__list.is-dragging { cursor: grabbing; scroll-snap-type: none; }
.parallax-slider__item { flex: none; padding-inline: 0.75em; position: relative; scroll-snap-align: center; }
.parallax-slider__item-inner {
    /* Square, per client - one shared slider drives every image gallery.
       Narrower than the old 3:2 so a square doesn't tower over its section. */
    aspect-ratio: 1 / 1;
    border-radius: 0.6em;
    width: 26em;
    max-width: 78vw;
    position: relative;
    overflow: clip;
    border: 1px solid var(--border-subtle);
}
.parallax-slider__item-img {
    object-fit: cover;
    user-select: none;
    width: 160%;
    max-width: none;
    height: 100%;
    position: absolute;
    left: -30%;
}
.parallax-slider__item-visual { will-change: transform; width: 100%; height: 100%; position: absolute; inset: 0; }

@media (max-width: 767px) {
    .parallax-slider__item { padding-inline: 0.4em; }
    .parallax-slider__item-inner { width: 68vw; max-width: 68vw; }
}

/* ─── WOOCOMMERCE ────────────────────────────────────── */
/* Buttons (shared) */
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce .button.alt,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
.woocommerce #place_order {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border: 0;
    border-radius: 999px;
    font-family: var(--font-display); font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1rem;
    line-height: 1.1;
    padding: 0.95rem 1.9rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.woocommerce .button:hover,
.woocommerce #place_order:hover,
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { box-shadow: 0 12px 28px rgba(27,26,23,0.35); }
.woocommerce .button.disabled,
.woocommerce button.button:disabled { opacity: 0.5; cursor: not-allowed; }

/* Notices */
.woocommerce-message, .woocommerce-info, .woocommerce-error, .woocommerce-noreviews {
    background: var(--bg-secondary);
    border-top: 3px solid var(--accent);
    color: var(--text-primary);
    border-radius: 8px;
}
.woocommerce-message::before, .woocommerce-info::before { color: var(--accent); }

/* ── Single product (event) ── */
.tb-product__hero {
    position: relative;
    min-height: 58vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--nav-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.tb-product__hero:not(.has-image) { background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
.tb-product__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0.5) 0%, rgba(27,26,23,0.2) 38%, rgba(27,26,23,0.82) 100%); }
.tb-product__hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.tb-product__back { display: inline-block; margin-bottom: 1rem; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-13); text-decoration: none; transition: color 0.2s ease; }
.tb-product__back:hover { color: var(--accent); }
.tb-product__eyebrow { color: var(--accent); margin-bottom: 0.6rem; }
.tb-product__title { font-size: var(--fs-72); line-height: 1; align-self: flex-start; max-width: 100%; }

.tb-product__body { padding-block: clamp(2.5rem, 6vw, 5rem); }
.tb-product__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); }
/* Grid items default to min-width:auto, so a sticky/long child can bleed past the
   track and clip on mobile. Pin both columns to 0 min-width so they hold the track. */
.tb-product__main, .tb-product__buy { min-width: 0; }
@media (min-width: 900px) { .tb-product__grid { grid-template-columns: 1.55fr 1fr; align-items: start; } }
/* On mobile/tablet, lift the price + CTA above the long description so it isn't buried. */
@media (max-width: 899px) { .tb-product__buy { order: -1; } }
.tb-product__meta { display: flex; flex-wrap: wrap; gap: 1.25rem 2.5rem; margin-bottom: clamp(1.5rem, 4vw, 2.25rem); padding-bottom: clamp(1.5rem, 4vw, 2.25rem); border-bottom: 1px solid var(--border-subtle); }
.tb-product__meta-item { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-start; }
.tb-product__meta-label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-muted); }
.tb-product__meta-val { font-family: var(--font-mono); font-size: 1.05rem; color: var(--text-primary); }
.tb-product__desc { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; }
.tb-product__desc p { margin-bottom: 1rem; }
.tb-product__buy-inner {
    position: sticky;
    top: calc(var(--nav-h) + 1.5rem);
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: clamp(1.5rem, 3vw, 2rem);
    box-shadow: 0 24px 60px rgba(0,0,0,0.4);
}
.tb-product__price { font-family: var(--font-display); font-weight: var(--fw-display); font-size: clamp(2rem, 4vw, 2.75rem); color: var(--accent); margin: 0 0 1rem; }
.tb-product .quantity input.qty {
    width: 76px;
    padding: 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-mono);
    text-align: center;
}
.tb-product form.cart { display: flex; gap: 0.75rem; align-items: stretch; flex-wrap: wrap; margin: 0.25rem 0 0; }
.tb-product form.cart .button { flex: 1 1 auto; }
.tb-product__note { margin: 1rem 0 0; font-family: var(--font-mono); font-size: var(--fs-12); color: var(--text-muted); }
.tb-product__dropin { margin: 0.75rem 0 0; color: var(--text-secondary); line-height: 1.6; font-size: 1.05rem; }
.tb-product__video { position: relative; margin: clamp(1.5rem, 3vw, 2.25rem) 0 0; border-radius: 14px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--bg-secondary); border: 1px solid var(--border-subtle); }
.tb-product__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* 404 - page not found. The page itself is now the slingshot minigame
   (see 404 MINIGAME below); .tb-404 wraps it and .tb-404__inner dresses
   the noscript fallback CTA. */
.tb-404 { display: flex; align-items: center; min-height: 68vh; padding-block: clamp(4rem, 12vh, 9rem); }
.tb-404__inner { width: 100%; }
.tb-404__eyebrow { color: var(--accent); margin: 0 0 1rem; }
.tb-404__title { margin: 0; line-height: 0.9; }
.tb-404__lead { margin: 1.5rem 0 2.25rem; color: var(--text-secondary); font-size: clamp(1.0625rem, 1.6vw, 1.25rem); line-height: 1.6; }
.tb-404__cta { display: flex; flex-wrap: wrap; gap: 0.9rem; }

/* ─── CONTACT ────────────────────────────────────────────── */
.tb-contact__hero { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem)); }
.tb-contact__eyebrow { color: var(--accent); margin-bottom: 0.6rem; }
.tb-contact__title { font-size: var(--fs-72); line-height: 0.95; }
.tb-contact__lead { font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.4; color: var(--text-secondary); margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; }
.tb-contact__body { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: stretch; padding-top: clamp(2.5rem, 5vw, 4rem); padding-bottom: clamp(1.5rem, 4vw, 3rem); }
.tb-contact__form-panel textarea { min-height: 170px; }
/* Right-aligned, per client - it sits at the outer edge beside the form. */
.tb-contact__goat { position: sticky; top: calc(var(--nav-h) + 1.75rem); margin: 0; text-align: right; pointer-events: none; }
/* The reset makes images block-level, so text-align cannot move it - push it
   over with an auto left margin instead. */
.tb-contact__goat img { max-width: 100%; max-height: 460px; width: auto; margin-left: auto; filter: drop-shadow(0 28px 38px rgba(0, 0, 0, 0.55)); }
.tb-contact__info { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: clamp(1.5rem, 3.5vw, 3rem); align-items: center; padding-top: clamp(2rem, 4vw, 3rem); padding-bottom: clamp(4rem, 8vw, 7rem); border-top: 1px solid var(--border-subtle); margin-top: clamp(1rem, 3vw, 2rem); }
.tb-contact__info-block .tb-label { color: var(--accent); margin-bottom: 0.4rem; }
.tb-contact__info-val { color: var(--text-secondary); line-height: 1.55; margin: 0; }
.tb-contact__info-val a { color: var(--text-primary); }
.tb-contact__info-val a:hover { color: var(--accent); }
.tb-contact__socials { display: flex; gap: 0.75rem; }
.tb-contact__socials a { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border: 1px solid var(--border-subtle); border-radius: 50%; color: var(--text-primary); transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease; }
.tb-contact__socials a:hover { color: var(--accent); border-color: var(--accent); }
.tb-contact__careers { justify-self: end; }
@media (max-width: 899px) {
    .tb-contact__body { grid-template-columns: 1fr; gap: clamp(1.5rem, 6vw, 2.5rem); padding-top: clamp(2rem, 6vw, 3rem); }
    .tb-contact__goat { position: static; text-align: center; }
    .tb-contact__goat img { margin-inline: auto; }
    .tb-contact__goat img { max-height: 260px; }
    .tb-contact__info { grid-template-columns: 1fr; gap: 1.5rem; align-items: start; }
    .tb-contact__careers { justify-self: start; }
}
.tb-product__soldout { color: #ff6b6b; font-family: var(--font-mono); margin: 0.75rem 0 0; }
/* Past event - buy box replaced with a plain "been & gone" message + CTA */
.tb-product__past-line { color: var(--text-secondary); margin: 0 0 1.25rem; line-height: 1.5; }
.tb-product__past-cta { width: 100%; }
/* Waiting list - shown in the buy box when a sold-out event has no stock */
.tb-waitlist { margin: 1rem 0 0; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.tb-waitlist__heading { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.1em; text-transform: uppercase; color: #ff6b6b; margin: 0 0 0.5rem; }
.tb-waitlist__intro { color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; margin: 0 0 1rem; }
.tb-waitlist__form { display: flex; flex-direction: column; gap: 0.5rem; }
.tb-waitlist__label { font-family: var(--font-mono); font-size: var(--fs-11); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-muted); }
.tb-waitlist__input {
    width: 100%;
    padding: 0.8rem 0.9rem;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 1rem;
    margin-bottom: 0.35rem;
}
.tb-waitlist__input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(27,26,23,0.18); }
.tb-waitlist__input::placeholder { color: var(--text-muted); }
.tb-waitlist__btn {
    margin-top: 0.35rem;
    padding: 0.85rem 1.25rem;
    background: var(--accent);
    color: var(--bg-primary);
    border: 0;
    border-radius: 8px;
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 700;
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.tb-waitlist__btn:hover { box-shadow: 0 12px 28px rgba(27,26,23,0.35); }
.tb-waitlist__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.tb-waitlist__msg { padding: 0.9rem 1rem; border-radius: 8px; font-size: 0.95rem; line-height: 1.5; }
.tb-waitlist__msg--ok { background: rgba(27,26,23,0.12); border: 1px solid rgba(27,26,23,0.4); color: var(--text-primary); }
.tb-waitlist__msg--err { background: rgba(255,107,107,0.1); border: 1px solid rgba(255,107,107,0.4); color: #ff9d9d; margin-bottom: 1rem; }

/* ── Single product (retail: beer / merch) ── */
.tb-retail__body { padding-top: calc(var(--nav-h) + clamp(1.5rem, 5vw, 3rem)); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.tb-retail__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; margin-top: 1.25rem; }
@media (min-width: 900px) { .tb-retail__grid { grid-template-columns: 1fr 1fr; } }
.tb-retail__gallery { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.tb-retail__gallery img { display: block; width: 100%; height: auto; }
.tb-retail__gallery .woocommerce-product-gallery__wrapper { margin: 0; }
.tb-retail__gallery .onsale { position: absolute; top: 1rem; left: 1rem; z-index: 2; margin: 0; background: var(--accent); color: var(--bg-primary); font-family: var(--font-mono); font-size: var(--fs-12); text-transform: uppercase; letter-spacing: 0.08em; padding: 0.35rem 0.7rem; border-radius: 999px; }
.tb-retail__summary { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
@media (max-width: 899px) { .tb-retail__summary { position: static; } }
.tb-retail__title { font-size: var(--fs-72); line-height: 1; margin: 0.4rem 0 1.25rem; max-width: 100%; }
.tb-retail__short { color: var(--text-secondary); font-size: 1.05rem; line-height: 1.7; margin-bottom: 1.5rem; }
.tb-retail__short p { margin-bottom: 0.85rem; }
.tb-retail__meta { display: flex; flex-wrap: wrap; gap: 1rem 2.5rem; margin-top: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--border-subtle); }
.tb-retail__meta-item { display: flex; flex-direction: column; gap: 0.35rem; font-family: var(--font-mono); font-size: var(--fs-13); color: var(--text-primary); }
.tb-retail__desc { margin-top: clamp(2.5rem, 6vw, 4rem); padding-top: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--border-subtle); }
.tb-retail__desc-title { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; color: var(--text-primary); font-size: var(--fs-24); margin-bottom: 1rem; }

/* ── Cart + checkout (guest only) ── */
.tb-woo--page h1, .tb-woo--page h2, .tb-woo--page h3 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; }
.woocommerce form .form-row label { display: block; color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-13); margin-bottom: 0.4rem; }
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce-checkout input[type="text"],
.woocommerce-checkout input[type="email"],
.woocommerce-checkout input[type="tel"],
.woocommerce-checkout input[type="password"],
.woocommerce-checkout textarea,
.woocommerce .select2-container--default .select2-selection--single,
.woocommerce-checkout select {
    width: 100%;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce-checkout input:focus,
.woocommerce-checkout textarea:focus { outline: none; border-color: rgba(27,26,23,0.55); }
.select2-container--default .select2-selection--single .select2-selection__rendered { color: var(--text-primary); line-height: 1.6; }
.select2-dropdown { background: var(--bg-secondary); border-color: var(--border-subtle); color: var(--text-primary); }

.woocommerce table.shop_table {
    border: 1px solid var(--border-subtle);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    border-collapse: separate;
    overflow: hidden;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td { border-top-color: var(--border-subtle); color: var(--text-primary); padding: 1rem; }
.woocommerce table.shop_table tfoot th, .woocommerce table.shop_table tfoot td { border-top: 1px solid var(--border-subtle); }
.woocommerce-cart table.cart img { border-radius: 8px; }
.woocommerce a.remove { color: var(--accent) !important; border-color: var(--border-subtle); }

.woocommerce-checkout #order_review,
.woocommerce-cart .cart-collaterals .cart_totals {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 16px;
    padding: clamp(1.25rem, 3vw, 1.75rem);
}
.woocommerce-checkout #order_review_heading { margin-bottom: 0.75rem; }
.woocommerce-checkout #payment { background: transparent; border-radius: 12px; }
.woocommerce-checkout #payment ul.payment_methods { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 12px; }
.woocommerce-checkout #payment div.payment_box { background: var(--bg-secondary); color: var(--text-secondary); }
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--bg-secondary); }
@media (min-width: 900px) {
    /* Billing spans both rows on the left; the order summary + payment stack at the
       TOP of the right column (not below the tall billing form) and stay sticky. */
    form.woocommerce-checkout { display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-rows: auto 1fr; gap: 0.75rem clamp(2rem, 4vw, 3rem); align-items: start; }
    form.woocommerce-checkout #customer_details { grid-column: 1; grid-row: 1 / 3; }
    form.woocommerce-checkout #order_review_heading { grid-column: 2; grid-row: 1; margin-top: 0; }
    form.woocommerce-checkout #order_review { grid-column: 2; grid-row: 2; align-self: start; }
}
.woocommerce-cart .wc-proceed-to-checkout { padding-top: 1rem; }
/* Stack billing + order-notes into one clean left column (no cramped 3-up) */
form.woocommerce-checkout #customer_details .col-1,
form.woocommerce-checkout #customer_details .col-2 { width: 100%; max-width: 100%; float: none; }
form.woocommerce-checkout #customer_details .col-2 { margin-top: 1.5rem; }
.woocommerce form .form-row textarea,
.woocommerce-checkout #order_comments { background: var(--bg-primary); color: var(--text-primary); min-height: 100px; }
.woocommerce-checkout #order_review { position: sticky; top: calc(var(--nav-h) + 1.5rem); }
/* overflow-x:clip on the app/body hijacks position:sticky; the checkout has no
   wide decorative elements, so let those ancestors be visible here so it sticks. */
body.woocommerce-checkout,
body.woocommerce-checkout .tb-app { overflow-x: visible; }
.woocommerce-checkout #order_review table.shop_table { background: transparent; border: 0; }
.woocommerce-checkout #order_review .order-total .amount { color: var(--accent); }
.woocommerce #payment .payment_method_bacs, .woocommerce-checkout .place-order { padding-top: 0.5rem; }
.woocommerce-checkout #place_order { width: 100%; margin-top: 0.75rem; }

/* ─── WC PAGES (cart / checkout / order-received / account) ─── */
.tb-wc-page { padding-top: calc(var(--nav-h) + clamp(3rem, 7vw, 6rem)); padding-bottom: clamp(4rem, 8vw, 7rem); }
.tb-wc-page__title { font-size: var(--fs-48); line-height: 1; text-transform: uppercase; margin: 0 0 clamp(2rem, 4vw, 3rem); }
/* Order-received reads as a focused receipt - keep it from sprawling on wide screens. */
.woocommerce-order { max-width: 1080px; }

/* Order received / thank-you */
.woocommerce-thankyou-order-received { font-size: 1.15rem; color: var(--text-secondary); margin: 0 0 2rem; }
.woocommerce-order-overview {
    list-style: none; margin: 0 0 clamp(2rem, 4vw, 3rem); padding: 0;
    display: flex; flex-wrap: wrap; gap: 1px;
    border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; background: var(--border-subtle);
}
.woocommerce-order-overview li {
    flex: 1 1 0; min-width: 150px; margin: 0; padding: 1.1rem 1.35rem; border: 0 !important; float: none;
    background: var(--bg-secondary);
    font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted);
}
.woocommerce-order-overview li strong {
    display: block; margin-top: 0.4rem; font-family: var(--font-body); font-size: 1.15rem;
    letter-spacing: 0; text-transform: none; color: var(--text-primary); font-weight: 600;
}
.woocommerce-order-details, .woocommerce-customer-details { margin-top: clamp(2rem, 4vw, 3rem); }
.woocommerce-order-details__title, .woocommerce-column__title, .woocommerce-customer-details h2 {
    font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.3rem, 2.4vw, 1.8rem); margin: 0 0 1rem; color: var(--text-primary);
}
.woocommerce-order-details table.shop_table, .woocommerce-customer-details table.shop_table {
    width: 100%; border-collapse: collapse; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; background: var(--bg-secondary);
}
.woocommerce-order-details table.shop_table th { text-align: left; padding: 0.9rem 1.15rem; background: var(--bg-primary); color: var(--text-primary); font-size: var(--fs-11); text-transform: uppercase; letter-spacing: 0.06em; }
.woocommerce-order-details table.shop_table td { padding: 0.9rem 1.15rem; border-top: 1px solid var(--border-subtle); color: var(--text-secondary); }
.woocommerce-order-details table.shop_table a { color: var(--accent); }
.woocommerce-order-details table.shop_table tfoot th, .woocommerce-order-details table.shop_table tfoot td { background: var(--bg-primary); color: var(--text-primary); font-weight: 600; }
.woocommerce-order-details table.shop_table .order-total .amount { color: var(--accent); }
.woocommerce-order-details .wc-item-meta { list-style: none; margin: 0.45rem 0 0; padding: 0; font-size: 0.9rem; }
.woocommerce-order-details .wc-item-meta li { margin: 0.15rem 0; }
.woocommerce-order-details .wc-item-meta strong { color: var(--text-primary); font-weight: 600; }
.woocommerce-customer-details address { font-style: normal; color: var(--text-secondary); line-height: 1.7; padding: 1.15rem 1.25rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-secondary); }
.woocommerce-order .woocommerce-bacs-bank-details { list-style: none; margin: 0 0 2rem; padding: 1.15rem 1.25rem; border: 1px solid var(--border-subtle); border-radius: 12px; background: var(--bg-secondary); color: var(--text-secondary); }
.woocommerce-order .woocommerce-bacs-bank-details h2 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--text-primary); }

/* ─── PRIVATE HIRE ───────────────────────────────────── */
.tb-hire__hero {
    position: relative;
    min-height: 54vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--nav-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.tb-hire__hero:not(.has-image) { background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
.tb-hire__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0.5) 0%, rgba(27,26,23,0.2) 40%, rgba(27,26,23,0.8) 100%); }
.tb-hire__hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.tb-hire__eyebrow { color: var(--accent); margin-bottom: 0.6rem; }
.tb-hire__title { font-size: var(--fs-72); line-height: 1; align-self: flex-start; max-width: 100%; }
.tb-hire__intro { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.tb-hire__lead { font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.4; max-width: none; color: var(--text-primary); margin: 0; }
.tb-hire__spaces { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 768px) { .tb-hire__spaces { grid-template-columns: 1fr 1fr; } }
.tb-hire__space { border-top: 1px solid var(--border-subtle); padding-top: 1.5rem; }
.tb-hire__space-title { font-size: clamp(1.6rem, 3vw, 2.4rem); text-transform: uppercase; margin-bottom: 0.75rem; }
.tb-hire__space p { color: var(--text-secondary); line-height: 1.6; margin: 0; }
.tb-hire__included { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--border-subtle); }
.tb-hire__included-head { margin-bottom: 1.5rem; }
.tb-hire__included-title { font-size: clamp(1.8rem, 4vw, 3rem); text-transform: uppercase; }
.tb-hire__list { list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 0.75rem 2rem; padding: 0; margin: 0 0 1.5rem; }
.tb-hire__list li { position: relative; padding-left: 1.5rem; color: var(--text-primary); font-family: var(--font-mono); }
.tb-hire__list li::before { content: "\2192"; position: absolute; left: 0; color: var(--accent); }
.tb-hire__for { color: var(--text-secondary); margin: 0; }
.tb-hire__book { padding-block: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--border-subtle); }
.tb-hire__book-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(2rem, 5vw, 3.5rem); }
.tb-hire__book-head { margin-bottom: 0; }
.tb-hire__book-title { font-size: var(--fs-72); line-height: 1; margin: 0.15em 0 0.4em; }
.tb-hire__book-note { color: var(--text-secondary); line-height: 1.6; max-width: 46ch; }
.tb-hire__book-reassure { margin: 1.25rem 0 0; font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.02em; color: var(--accent); }
@media (min-width: 900px) {
    .tb-hire__book-grid { grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2.5rem, 5vw, 5rem); align-items: start; }
    .tb-hire__book-head { position: sticky; top: calc(var(--nav-h) + 2rem); }
}
.tb-hire__form { max-width: 640px; }

/* ─── Standard content page (Brewery / Taproom / Bar / FAQs) ─── */
.tb-page__hero {
    position: relative;
    min-height: 46vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--nav-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.tb-page__hero:not(.has-image) { background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
.tb-page__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0.5) 0%, rgba(27,26,23,0.2) 40%, rgba(27,26,23,0.8) 100%); }
.tb-page__hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.tb-page__eyebrow { color: var(--accent); margin-bottom: 0.6rem; }
.tb-page__title { font-size: var(--fs-72); line-height: 1; align-self: flex-start; max-width: 100%; }
.tb-page__lead { font-size: clamp(1.3rem, 2.8vw, 2rem); line-height: 1.4; color: var(--text-primary); margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; }

.tb-page__body { max-width: none; color: var(--text-secondary); font-size: var(--fs-16); line-height: 1.75; }
.tb-page__body > * + * { margin-top: 1.1em; }
/* Full-width intro: tighter gap under the hero, two readable columns on wide screens */
.tb-page__body-wrap.tb-section { padding-top: clamp(2rem, 4vw, 3.25rem); padding-bottom: 0; }
@media (max-width: 767px) { .tb-page__body-wrap.tb-section { padding-bottom: clamp(2.5rem, 8vw, 3.5rem); } }
@media (min-width: 768px) {
    .tb-page__body { columns: 2; column-gap: clamp(2.5rem, 6vw, 4.5rem); }
    .tb-page__body > * { break-inside: avoid; margin-top: 0; margin-bottom: 1.1em; }
    .tb-page__body h2, .tb-page__body h3 { column-span: all; }
}
.tb-page__body h2 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; color: var(--text-primary); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; margin-top: 2em; }
.tb-page__body h3 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; color: var(--text-primary); font-size: clamp(1.3rem, 2.2vw, 1.8rem); margin-top: 1.6em; }
.tb-page__body a { color: var(--accent); text-underline-offset: 3px; }
.tb-page__body strong { color: var(--text-primary); }
.tb-page__body ul, .tb-page__body ol { padding-left: 1.3rem; }
.tb-page__body li + li { margin-top: 0.4em; }

.tb-page__faqs { padding-block: clamp(2.5rem, 6vw, 4.5rem); border-top: 1px solid var(--border-subtle); }
.tb-page__faqs-head { margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.tb-page__faqs-title { font-size: var(--fs-48); line-height: 1; margin-top: 0.15em; }
.tb-page__faq-list { max-width: none; }
.tb-page__faq { border-top: 1px solid var(--border-subtle); }
.tb-page__faq:last-child { border-bottom: 1px solid var(--border-subtle); }
.tb-page__faq-q {
    list-style: none; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
    padding: 1.25rem 0;
    font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: 0.01em;
    font-size: clamp(1.05rem, 1.8vw, 1.45rem); color: var(--text-primary);
    transition: color 0.25s ease;
}
.tb-page__faq-q::-webkit-details-marker { display: none; }
/* Each question carries its own accent from the spec-sheet neons, cycling
   down the list, so hovering and opening the FAQs paints the section rather
   than repeating one purple. nth-child keeps it stable per question - the
   same row always lights the same colour. */
.tb-page__faq:nth-child(6n+1) { --accent: var(--cosmic-purple); }
.tb-page__faq:nth-child(6n+2) { --accent: var(--hyper-pink); }
.tb-page__faq:nth-child(6n+3) { --accent: var(--electric-blue); }
.tb-page__faq:nth-child(6n+4) { --accent: var(--alien-green); }
.tb-page__faq:nth-child(6n+5) { --accent: var(--solar-orange); }
.tb-page__faq:nth-child(6n+6) { --accent: var(--acid-yellow); }
.tb-page__faq-q:hover { color: var(--accent); }
.tb-page__faq[open] > .tb-page__faq-q { color: var(--accent); }
.tb-page__faq[open] { border-top-color: var(--accent); }
.tb-page__faq-icon { flex: none; color: var(--accent); transition: transform 0.5s cubic-bezier(0.19, 1, 0.22, 1); }

/* Animate the open/close itself, per client easing. <details> is inert by
   default; ::details-content plus interpolate-size lets it ease to its own
   height with no JS. Browsers without it (Firefox for now) simply snap open,
   which is the current behaviour anyway. */
.tb-page__faq { interpolate-size: allow-keywords; }
.tb-page__faq::details-content {
    block-size: 0;
    overflow: clip;
    transition:
        block-size 0.5s cubic-bezier(0.19, 1, 0.22, 1),
        content-visibility 0.5s cubic-bezier(0.19, 1, 0.22, 1) allow-discrete;
}
.tb-page__faq[open]::details-content { block-size: auto; }
@media (prefers-reduced-motion: reduce) {
    .tb-page__faq::details-content { transition: none; }
}
.tb-page__faq[open] .tb-page__faq-icon { transform: rotate(45deg); }
.tb-page__faq-a { color: var(--text-secondary); line-height: 1.7; padding: 0 0 1.4rem; max-width: none; }
.tb-page__faq-a p { margin: 0 0 0.8em; }
.tb-page__faq-a p:last-child { margin-bottom: 0; }

.tb-page__gallery { padding-top: clamp(1rem, 3vw, 2rem); padding-bottom: clamp(3rem, 7vw, 5rem); }
.tb-page__gallery-head { margin-bottom: 1.25rem; }

/* Hero lead + CTA (now inside the hire hero) */
.tb-hire__hero .tb-hire__lead { margin-top: clamp(1rem, 2.5vw, 1.5rem); color: var(--text-primary); }
.tb-hire__hero-cta {
    display: inline-flex; align-items: center; gap: 0.5em;
    margin-top: clamp(1.25rem, 3vw, 2rem);
    background: var(--accent); color: var(--accent-ink); /* cream on purple, per client */
    border-radius: 999px; padding: 0.9rem 1.8rem;
    font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: 0.03em;
    text-decoration: none;
}


/* USP cards */
.tb-hire__usps { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); padding-block: clamp(2.5rem, 6vw, 4rem); }
@media (max-width: 900px) { .tb-hire__usps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .tb-hire__usps { grid-template-columns: 1fr; } }
.tb-hire__usp { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.25rem, 2.5vw, 1.75rem); transition: border-color 0.3s ease, transform 0.3s ease; }
@media (hover: hover) { .tb-hire__usp:hover { border-color: rgba(27,26,23,0.4); transform: translateY(-3px); } }
.tb-hire__usp-icon { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 12px; background: rgba(27,26,23,0.1); color: var(--black-hole); margin-bottom: 1rem; }
.tb-hire__usp-title { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.4rem); margin-bottom: 0.5rem; }
.tb-hire__usp-text { color: var(--text-secondary); font-size: clamp(1.0625rem, 1.4vw, 1.1875rem); line-height: 1.55; margin: 0; }

/* Gallery wrapper (reuses .parallax-slider) */
.tb-hire__gallery { padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.tb-hire__gallery-head { margin-bottom: clamp(1rem, 3vw, 1.75rem); }

/* Spaces as cards */
.tb-hire__space { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); }
.tb-hire__space-media {
    aspect-ratio: 16 / 10;
    border-radius: 12px;
    margin-bottom: clamp(1.1rem, 2.5vw, 1.6rem);
    background: linear-gradient(135deg, #0a2a4d, #05152b);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* Booking form panel */
.tb-hire__form-panel { position: relative; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 4vw, 2.5rem); max-width: none; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35); overflow: hidden; }
.tb-hire__form-panel::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: linear-gradient(90deg, var(--accent), rgba(61, 224, 252, 0.15)); }

/* Booking form - never overflow the column + TB polish */
.tb-hire__form-panel { min-width: 0; }
.tb-hire__form-panel .gform_wrapper,
.tb-hire__form-panel .gform_wrapper .gform_fields,
.tb-hire__form-panel .gfield { min-width: 0; max-width: 100%; }
.gform_wrapper .gfield_label {
    font-family: var(--font-mono) !important;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-size: var(--fs-13) !important;
    color: var(--text-secondary) !important;
    margin-bottom: 0.55rem !important;
}
.gform_wrapper .gfield_required { color: var(--accent) !important; text-decoration: none; }
.gform_wrapper .gform_fields { row-gap: clamp(1.1rem, 3.5vw, 1.7rem); }
.gform_wrapper .ginput_container_date { max-width: 100%; }
.gform_wrapper .ginput_container_date input { width: 100% !important; }
.gform_wrapper .gfield_radio .gchoice { display: flex; align-items: center; gap: 0.55rem; margin: 0 0 0.4rem; }
.gform_wrapper .gfield_radio input[type="radio"] { margin: 0; flex: 0 0 auto; }
.gform_wrapper .gfield_description { color: var(--text-muted); font-size: var(--fs-13); }
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus { box-shadow: 0 0 0 3px rgba(27,26,23,0.15) !important; }

/* Sticky enquire CTA */
.tb-hire__sticky {
    position: fixed; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 90;
    display: inline-flex; align-items: center; gap: 0.5em;
    background: var(--accent); color: var(--accent-ink);
    border-radius: 999px; padding: 0.9rem 1.6rem;
    font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; letter-spacing: 0.03em; text-decoration: none;
    box-shadow: 0 12px 30px rgba(0,0,0,0.45), 0 0 20px rgba(27,26,23,0.3);
    opacity: 0; transform: translateY(20px); pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.tb-hire__sticky.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tb-hire__sticky:hover { box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 28px rgba(27,26,23,0.45); }
@media (max-width: 600px) { .tb-hire__sticky { left: 1rem; right: 1rem; justify-content: center; } }

/* Gravity Forms - TB style */
.gform_wrapper .gfield_label { color: var(--text-secondary); font-family: var(--font-mono); font-size: var(--fs-13); margin-bottom: 0.4rem; display: block; }
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea,
.gform_wrapper select {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    color: var(--text-primary);
    padding: 0.8rem 1rem;
    font-family: var(--font-body);
    font-size: 1rem;
    width: 100%;
}
.gform_wrapper input:focus, .gform_wrapper textarea:focus, .gform_wrapper select:focus { outline: none; border-color: rgba(27,26,23,0.55); }
.gform_wrapper .gfield { margin-bottom: 1.3rem; }
.gform_wrapper .gfield_required { color: var(--accent); }
.gform_wrapper .ginput_container_radio ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; padding: 0; margin: 0; }
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_button,
.gform-theme--framework .gform_footer input[type="submit"],
.gform-theme--framework .gform_footer button.gform_button,
.gform-theme--framework button.gform_button {
    background: var(--accent) !important;
    color: var(--accent-ink) !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-family: var(--font-display); font-weight: var(--fw-display);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 1rem;
    padding: 0.95rem 2.2rem;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform-theme--framework .gform_footer button.gform_button:hover { box-shadow: 0 12px 28px rgba(27,26,23,0.35); }
.gform_confirmation_message, .gform_wrapper .gform_validation_errors { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 1.25rem 1.5rem; color: var(--text-primary); }
/* Beat Gravity Forms' own theme framework */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper textarea,
.gform_wrapper select,
.gform-theme--framework .gfield input,
.gform-theme--framework .gfield textarea,
.gform-theme--framework .gfield select {
    background-color: var(--bg-secondary) !important;
    color: var(--text-primary) !important;
    border: 1px solid var(--border-subtle) !important;
    border-radius: 8px !important;
}
.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label,
.gform-theme--framework .gfield_label { color: var(--text-primary) !important; opacity: 1 !important; }
.gform_wrapper .gfield input::placeholder, .gform_wrapper textarea::placeholder { color: var(--text-muted); }
.gform_wrapper .ginput_container_radio label { color: var(--text-primary); }

/* jQuery UI datepicker (GF) - blocked dates struck through */
.ui-datepicker { background: var(--bg-secondary); border: 1px solid var(--border-accent); border-radius: 12px; padding: 0.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.5); }
.ui-datepicker .ui-datepicker-header { background: transparent; border: 0; color: var(--accent); }
.ui-datepicker .ui-datepicker-title { color: var(--text-primary); font-family: var(--font-mono); }
.ui-datepicker th { color: var(--text-muted); }
.ui-datepicker td a, .ui-datepicker td span { color: var(--text-primary); text-align: center; border-radius: 6px; }
.ui-datepicker td a.ui-state-hover, .ui-datepicker td a.ui-state-active { background: var(--accent); color: var(--accent-ink); }
.ui-datepicker td.tb-date-blocked span, .ui-datepicker td .ui-state-disabled { opacity: 0.35; text-decoration: line-through; }
/* jQuery UI uses the #ui-datepicker-div id (high specificity) - override hard */
#ui-datepicker-div.ui-datepicker { background: var(--bg-secondary) !important; border: 1px solid var(--border-accent) !important; }
#ui-datepicker-div .ui-datepicker-title, #ui-datepicker-div .ui-datepicker-calendar td a, #ui-datepicker-div .ui-datepicker-calendar td span { color: var(--text-primary) !important; }
#ui-datepicker-div .ui-datepicker-calendar th { color: var(--text-muted) !important; }
#ui-datepicker-div select.ui-datepicker-month, #ui-datepicker-div select.ui-datepicker-year { background: var(--bg-primary) !important; color: var(--text-primary) !important; border: 1px solid var(--border-subtle) !important; }
#ui-datepicker-div .ui-datepicker-calendar td a.ui-state-hover, #ui-datepicker-div .ui-datepicker-calendar td a.ui-state-active { background: var(--accent) !important; color: var(--accent-ink) !important; }
#ui-datepicker-div .ui-datepicker-prev, #ui-datepicker-div .ui-datepicker-next { filter: invert(1) hue-rotate(180deg); }

/* ─── FOOTER ─────────────────────────────────────────── */
.tb-footer {
    background: #000510;
    border-top: 1px solid var(--border-subtle);
    position: relative;
    overflow: hidden;
}
.tb-footer__inner {
    padding-block: clamp(3rem, 8vw, 6rem) clamp(1.75rem, 4vw, 2.75rem);
    display: flex;
    flex-direction: column;
    gap: clamp(2rem, 5vw, 3.5rem);
}

/* Top row - sitemap columns + big private-hire CTA */
.tb-footer__top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: clamp(2rem, 6vw, 5rem);
    flex-wrap: wrap;
}
.tb-footer__cols { order: 1; display: flex; gap: clamp(2.5rem, 7vw, 6rem); flex-wrap: wrap; }
/* Explore sitemap flows as a 3-column grid, filling row by row, so the
   eight links sit in three rows with Contact (and Bar) on the bottom. */
.tb-footer__col:nth-child(2) .tb-footer__list {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, auto));
    grid-auto-flow: row;
    column-gap: clamp(1.5rem, 3vw, 2.75rem);
    row-gap: 0.7rem;
}
.tb-footer__col-title { color: var(--accent); margin-bottom: clamp(0.9rem, 2vw, 1.4rem); }
.tb-footer__list { list-style: none; display: flex; flex-direction: column; gap: 0.65rem; padding: 0; margin: 0; }
.tb-footer__list a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; }
.tb-footer__list a:hover { color: var(--accent); }

.tb-footer__cta { order: 2; display: flex; flex-direction: column; gap: clamp(0.5rem, 1.5vw, 0.9rem); text-decoration: none; color: var(--text-primary); }
.tb-footer__cta-eyebrow { color: var(--text-muted); }
.tb-footer__cta-heading {
    display: inline-flex;
    align-items: center;
    gap: 0.12em;
    flex-wrap: wrap;
    font-size: clamp(2.4rem, 6vw, 5.25rem);
    line-height: 0.92;
    text-transform: uppercase;
    transition: color 0.3s ease;
}
.tb-footer__cta:hover .tb-footer__cta-heading { color: var(--accent); }
.tb-footer__cta-arrow { width: clamp(1.9rem, 4vw, 3rem); height: auto; transition: transform 0.35s cubic-bezier(.2,.8,.2,1); }
.tb-footer__cta:hover .tb-footer__cta-arrow { transform: translateX(0.3em); }

/* Dotted divider */
.tb-footer__divider {
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--border-subtle) 0 6px, transparent 6px 14px);
}

/* Bottom row - legal + social */
.tb-footer__bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1.25rem 2rem;
    flex-wrap: wrap;
}
.tb-footer__legal { list-style: none; display: flex; flex-wrap: wrap; gap: 0.75rem 2rem; padding: 0; margin: 0; }
.tb-footer__legal a { color: var(--text-secondary); text-decoration: none; font-size: var(--fs-13); transition: color 0.2s ease; }
.tb-footer__legal a:hover { color: var(--accent); }
.tb-footer__social { display: flex; gap: 0.75rem; align-items: center; }
.tb-footer__social-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    transition: color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.tb-footer__social-link:hover {
    color: var(--accent);
    border-color: rgba(27,26,23,0.4);
    box-shadow: 0 0 14px rgba(27,26,23,0.25);
}

/* Baseline - back-to-top left, copyright bottom right (the wordmark now sits
   in its own full-width row above, see .tb-footer__wordmark-row) */
.tb-footer__baseline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem 1.5rem;
    flex-wrap: wrap;
    padding-top: clamp(1.5rem, 3vw, 2.25rem);
    border-top: 1px solid var(--border-subtle);
}
.tb-footer__totop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--accent);
    color: var(--accent-ink);
    border: 2px solid color-mix(in srgb, var(--void-cream) 30%, transparent);
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.tb-footer__totop:hover { box-shadow: 0 10px 26px rgba(27,26,23,0.35); }
.tb-footer__copyright {
    margin-left: auto;
    text-align: right;
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.12em;
    color: var(--text-muted);
    margin: 0;
}
/* The wordmark opens the footer edge to edge - [data-fit-width] scales it to
   fill the row, the same mechanism the big section headings use. */
/* Each character ignites in its own neon on hover - the colour is set per
   character in JS so the sequence is designed, not random. */
.tb-footer__char {
    transition: color 0.18s ease, text-shadow 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
    .tb-footer__char:hover {
        color: var(--ignite, var(--hyper-pink));
        text-shadow: 0 0 18px color-mix(in srgb, var(--ignite, var(--hyper-pink)) 55%, transparent);
    }
}
@media (prefers-reduced-motion: reduce) {
    .tb-footer__char { transition: none; }
}

.tb-footer__wordmark-row {
    display: block;
    padding-bottom: clamp(1.5rem, 3.5vw, 2.75rem);
    overflow: hidden;
}
.tb-footer__wordmark {
    /* inline-block, not block: the fit script measures scrollWidth, and a block
       element already fills the row so it would never scale up. */
    display: inline-block;
    /* Base size approximates the fitted result so the pre-JS (or no-JS)
       footer is not laid out at body size. */
    font-size: clamp(2rem, 8.7vw, 7.25rem);
    cursor: default;
    line-height: 0.85;
    color: color-mix(in srgb, var(--void-cream) 38%, transparent);
    white-space: nowrap;
}
.tb-footer__copyright a { color: var(--text-secondary); text-decoration: none; transition: color 0.2s ease; }
.tb-footer__copyright a:hover { color: var(--accent); }

@media (max-width: 767px) {
    .tb-footer__top { flex-direction: column; }
    .tb-footer__cta { order: 1; }
    .tb-footer__cols { order: 2; }
    .tb-footer__baseline { justify-content: space-between; }
}

/* ─── RESPONSIVE ─────────────────────────────────────── */
@media (max-width: 1024px) {
    .tb-hero { min-height: 100svh; padding-bottom: 60px; }
    .tb-hero__content { padding-top: 130px; }
    .tb-hero__heading { font-size: clamp(2.8rem, 9vw, 5rem); }
    .tb-hero__bottom {
        position: relative;
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 24px;
    }

    .tb-header__private,
    .tb-header__locations { display: none; }
    .tb-events__heading { font-size: var(--fs-48); }
    .tb-event-card { width: 340px; min-height: 480px; }
}

@media (max-width: 640px) {
    .tb-header__inner { padding-block: 12px; }
    .tb-header__left { display: none; }
    .tb-header__logo { grid-column: 2; grid-row: 1; justify-self: center; width: 64px; height: 56px; }
    .tb-header__logo img,
    .tb-header__logo-img { width: 64px; height: 56px; }
    .tb-header__actions { display: contents; }
    .tb-header__action { grid-column: 1; grid-row: 1; justify-self: start; }
    .tb-header__menu-toggle { grid-column: 3; grid-row: 1; justify-self: end; }
    .tb-header__action span:not(.sr-only) { display: none; }
    .tb-menu-btn__labels { display: none; }
    .tb-menu-btn__icon { width: 1.35em; height: 1.35em; }

    .tb-hero__content { padding-top: 100px; gap: 20px; }
    .tb-hero__sub { max-width: 100%; }
    .tb-hero__ctas { gap: 12px; }
    .tb-hero__cta { padding: 15px 28px; }
    .tb-hero__bottom { padding: 20px; gap: 10px; letter-spacing: 0.08em; }
    .tb-hero__status { flex-wrap: wrap; justify-content: center; text-align: center; width: 100%; row-gap: 2px; column-gap: 8px; }
    .tb-hero__clock { display: none; } /* hide live clock on mobile */

    .tb-events__head { flex-direction: column; align-items: flex-start; }
    .tb-events__heading { font-size: var(--fs-36); }
    .tb-events__head-right { width: 100%; justify-content: space-between; }
    .tb-event-card { width: 280px; min-height: 400px; }

    .tb-footer__inner { padding-block: var(--sp-32); }
}

/* ── Single location page (single-tb_location.php) ───────────────── */
.tb-locpage__hero {
    position: relative;
    min-height: 52vh;
    display: flex;
    align-items: flex-end;
    padding-top: var(--nav-h);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
}
.tb-locpage__hero:not(.has-image) { background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
.tb-locpage__hero-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(27,26,23,0.5) 0%, rgba(27,26,23,0.2) 40%, rgba(27,26,23,0.8) 100%); }
.tb-locpage__hero-inner { position: relative; z-index: 1; width: 100%; padding-block: clamp(2rem, 6vw, 4rem); }
.tb-locpage__eyebrow { color: var(--accent); margin-bottom: 0.6rem; }
.tb-locpage__title { font-size: var(--fs-72); line-height: 1; align-self: flex-start; max-width: 100%; }
.tb-locpage__pills { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0; margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; }
.tb-locpage__pill {
    font-family: var(--font-mono); font-size: var(--fs-13); letter-spacing: 0.03em;
    color: var(--text-primary); background: rgba(27,26,23,0.1);
    border: 1px solid rgba(27,26,23,0.35); border-radius: 999px; padding: 0.4rem 0.85rem;
}
.tb-locpage__lead { font-size: clamp(1.2rem, 2.6vw, 1.8rem); line-height: 1.4; max-width: none; color: var(--text-primary); margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; }

.tb-locpage__body { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); padding-block: clamp(2.5rem, 6vw, 4.5rem); }
@media (min-width: 900px) { .tb-locpage__body { grid-template-columns: 1.6fr 1fr; align-items: start; } }
.tb-locpage__intro { color: var(--text-secondary); line-height: 1.7; font-size: 1.05rem; }
.tb-locpage__intro > * + * { margin-top: 1rem; }
.tb-locpage__intro-cta { margin-top: clamp(1.5rem, 3vw, 2rem); }
.tb-locpage__intro h2, .tb-locpage__intro h3 { color: var(--text-primary); font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; }
/* Sticky description alongside the info panel (desktop only, never when solo) */
@media (min-width: 900px) {
    .tb-locpage__body:not(.is--solo) .tb-locpage__intro { position: sticky; top: calc(var(--nav-h) + 1rem); align-self: start; }
}
/* No info panel: description runs full width */
.tb-locpage__body.is--solo { grid-template-columns: 1fr; }

.tb-locpage__panel { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); position: sticky; top: calc(var(--nav-h) + 1rem); }
.tb-locpage__panel-label { color: var(--accent); margin-bottom: 1rem; }
.tb-locpage__hours { margin: 0; }
.tb-locpage__hours-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border-subtle); }
.tb-locpage__hours-row:last-child { border-bottom: 0; }
.tb-locpage__hours dt { font-family: var(--font-mono); color: var(--text-secondary); font-size: 0.95rem; }
.tb-locpage__hours dd { margin: 0; color: var(--text-primary); font-weight: 600; }
.tb-locpage__website { margin-top: 1.25rem; }
.tb-locpage__phone { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--accent); font-family: var(--font-mono); font-size: var(--fs-14); }
.tb-locpage__phone:hover { text-decoration: underline; }
.tb-locpage__phone + .tb-locpage__website { margin-top: 1rem; }

/* ─── PAGE TRANSITIONS ───────────────────────────────────── */
/* Fade through the brand colour on every navigation. No SPA, so WooCommerce
   cart/checkout keep working - just a full-screen overlay that covers on leave
   and fades out on arrival. */
.tb-transition {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
    background: var(--bg-primary, #000818);
    opacity: 1;
    transition: opacity 0.5s ease;
    /* No-JS safety net: fade out even if the script never runs. */
    animation: tb-transition-reveal 0.7s ease 1.4s forwards;
}
.tb-transition.is-out { opacity: 0; animation: none; }
@keyframes tb-transition-reveal { to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .tb-transition { display: none; } }

.tb-locpage__maps { padding-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.tb-locpage__section-label { color: var(--accent); margin-bottom: clamp(1rem, 3vw, 1.5rem); }
.tb-locpage__maps-grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 2rem); }
@media (min-width: 768px) { .tb-locpage__maps-grid.is--multi { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); } }
.tb-locpage__map-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.tb-locpage__map-meta { padding: clamp(1rem, 2.5vw, 1.5rem); }
.tb-locpage__map-title { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 0.35rem; }
.tb-locpage__map-address { color: var(--text-secondary); line-height: 1.5; margin: 0; font-size: 0.95rem; }
.tb-locpage__map-embed { aspect-ratio: 16 / 9; }
.tb-locpage__maps-grid.is--multi .tb-locpage__map-embed { aspect-ratio: 4 / 3; }
.tb-locpage__map-embed iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(0.2) contrast(1.05); }

.tb-locpage__gallery { padding-block: clamp(0.5rem, 2vw, 1.5rem) clamp(2.5rem, 6vw, 4rem); overflow: hidden; }
.tb-locpage__gallery-head { margin-bottom: clamp(1rem, 3vw, 1.75rem); }

@media (max-width: 899px) {
    .tb-locpage__panel { position: static; }
}

/* ─── STICKY IMAGE FEATURE (Brewery / Taproom) ───────────── */
.tb-feature { position: relative; width: 100%; }
.tb-feature__scroll { display: flex; justify-content: center; align-items: center; height: 100vh; }
.tb-feature__container { display: flex; gap: clamp(1.5rem, 4vw, 3rem); justify-content: center; align-items: stretch; width: 100%; max-width: var(--container-max); margin-inline: auto; }
.tb-feature__col { flex: 1; position: relative; min-width: 0; }
.tb-feature__col--img { overflow: hidden; border-radius: 16px; }
.tb-feature__img-list { position: relative; aspect-ratio: 1 / 1.1; max-height: 72vh; width: 100%; margin-inline: auto; }
.tb-feature__img-item { position: absolute; inset: 0; width: 100%; height: 100%; clip-path: inset(50% round 16px); }
.tb-feature__img-item[data-sticky-feature-visual-wrap]:first-of-type { clip-path: inset(0% round 16px); }
.tb-feature__img { object-fit: cover; width: 100%; height: 100%; display: block; }
.tb-feature__img--ph { display: block; width: 100%; height: 100%; background: linear-gradient(150deg, #0a2a4d, #071a33); }
.tb-feature__img--ph[data-i="1"] { background: linear-gradient(150deg, #123a52, #0a1526); }
.tb-feature__img--ph[data-i="2"] { background: linear-gradient(150deg, #0d3348, #05152b); }
.tb-feature__img--ph[data-i="3"] { background: linear-gradient(150deg, #10233f, #0a1a2e); }
.tb-feature__progress-w { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: rgba(255,255,255,0.15); z-index: 2; }
.tb-feature__progress-bar { width: 100%; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: 0 50%; }
.tb-feature__text-list { position: relative; display: flex; flex-flow: column; justify-content: center; align-items: flex-start; height: 100%; }
.tb-feature__text-item { position: absolute; right: 0; display: flex; flex-flow: column; gap: 1.25rem; align-items: flex-start; width: 100%; max-width: 30rem; margin-left: auto; visibility: hidden; }
.tb-feature__text-item[data-sticky-feature-item]:first-of-type { visibility: visible; }
.tb-feature__tag { align-self: flex-start; background: rgba(27,26,23,0.12); color: var(--accent); border-radius: 6px; padding: 0.4rem 0.6rem; font-family: var(--font-mono); font-size: 0.85rem; line-height: 1; }
.tb-feature__heading { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1; text-transform: uppercase; }
.tb-feature__p { color: var(--text-secondary); font-size: 1.15rem; line-height: 1.45; margin: 0; }
/* Mobile: swap the pinned scroller for a simple stacked image + text list */
.tb-feature__stack { display: none; }
@media (max-width: 767px) {
    .tb-feature__scroll { display: none; }
    .tb-feature__stack { display: grid; gap: clamp(2.5rem, 9vw, 3.75rem); padding-block: clamp(1.5rem, 5vw, 2.5rem) clamp(2.5rem, 8vw, 3.5rem); }
    .tb-feature__card-media { aspect-ratio: 4 / 5; border-radius: 14px; margin-bottom: 1.2rem; background-size: cover; background-position: center; background-repeat: no-repeat; }
    .tb-feature__card .tb-feature__heading { font-size: clamp(2rem, 8vw, 2.6rem); margin-top: 0.7rem; }
    .tb-feature__card .tb-feature__p { margin-top: 0.5rem; }
}

/* ─── CAREERS ─────────────────────────────────────────────── */
.tb-careers__hero, .tb-career__hero { padding-top: calc(var(--nav-h) + clamp(2rem, 6vw, 4rem)); padding-bottom: clamp(1.5rem, 4vw, 2.5rem); background: linear-gradient(160deg, var(--bg-secondary), var(--bg-primary)); }
.tb-careers__eyebrow, .tb-career__eyebrow { color: var(--accent); }
.tb-careers__title, .tb-career__title { font-size: var(--fs-72); line-height: 1; margin: 0.3rem 0 0; }
.tb-careers__lead { margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; font-size: clamp(1.15rem, 2.4vw, 1.6rem); line-height: 1.4; color: var(--text-primary); }

/* Overview grid */
.tb-careers__grid { display: grid; grid-template-columns: 1fr; gap: clamp(1.25rem, 3vw, 1.75rem); }
@media (min-width: 720px) { .tb-careers__grid { grid-template-columns: 1fr 1fr; } }
.tb-career-card { display: flex; flex-direction: column; gap: 0.9rem; background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2.25rem); color: var(--text-primary); text-decoration: none; transition: border-color 0.2s ease, transform 0.2s ease; }
.tb-career-card:hover { border-color: var(--accent); transform: translateY(-3px); }
.tb-career-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tb-career-card__title { font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1; margin: 0; }
.tb-career-card__badge, .tb-career__badge { flex: none; align-self: flex-start; background: rgba(27,26,23,0.12); color: var(--accent); border: 1px solid rgba(27,26,23,0.4); border-radius: 999px; padding: 0.3rem 0.7rem; font-family: var(--font-mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; }
.tb-career-card__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; font-family: var(--font-mono); font-size: 0.82rem; color: var(--text-secondary); }
.tb-career-card__meta li { position: relative; }
.tb-career-card__meta li + li::before { content: '·'; position: absolute; left: -0.85rem; color: var(--text-secondary); }
.tb-career-card__lead { margin: 0; color: var(--text-secondary); line-height: 1.6; }
.tb-career-card__cta { margin-top: auto; display: inline-flex; align-items: center; gap: 0.5rem; color: var(--accent); font-family: var(--font-mono); font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.06em; }
.tb-career-card__cta svg { transition: transform 0.2s ease; }
.tb-career-card:hover .tb-career-card__cta svg { transform: translateX(4px); }

/* Empty state */
.tb-careers__empty { text-align: center; padding: clamp(2rem, 6vw, 4rem); border: 1px dashed var(--border-subtle); border-radius: 16px; }
.tb-careers__empty-title { font-size: var(--fs-48); line-height: 1; margin: 0 0 0.6rem; }
.tb-careers__empty-text { max-width: 48ch; margin: 0 auto; color: var(--text-secondary); }
.tb-careers__empty-text a { color: var(--accent); }
.tb-careers__empty-cta { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

/* Job single */
.tb-career__eyebrow { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
.tb-career__eyebrow a { color: var(--accent); text-decoration: none; }
.tb-career__eyebrow a:hover { text-decoration: underline; }
.tb-career__lead { margin: clamp(1rem, 2.5vw, 1.5rem) 0 0; font-size: clamp(1.15rem, 2.4vw, 1.5rem); line-height: 1.4; color: var(--text-primary); }
.tb-career__apply-top { margin-top: clamp(1.25rem, 3vw, 1.75rem); }

.tb-career__body { display: grid; grid-template-columns: 1fr; gap: clamp(1.5rem, 4vw, 3rem); align-items: start; }
@media (min-width: 900px) { .tb-career__body { grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); } }
.tb-career__prose { color: var(--text-secondary); line-height: 1.75; font-size: var(--fs-16); }
.tb-career__prose > * + * { margin-top: 1.1em; }
.tb-career__block { margin-top: clamp(2rem, 4vw, 3rem); }
.tb-career__block:first-child { margin-top: 0; }
.tb-career__block-title { font-size: clamp(1.5rem, 3vw, 2.2rem); line-height: 1; margin: 0 0 1.1rem; }
.tb-career__ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.8rem; }
.tb-career__ticks li { position: relative; padding-left: 2rem; color: var(--text-secondary); line-height: 1.55; }
.tb-career__ticks li::before { content: ''; position: absolute; left: 0; top: 0.1em; width: 1.2rem; height: 1.2rem; border-radius: 50%; background: rgba(27,26,23,0.14); }
.tb-career__ticks li::after { content: ''; position: absolute; left: 0.36rem; top: 0.32em; width: 0.42rem; height: 0.72rem; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(45deg); }

.tb-career__apply-card { background: var(--bg-secondary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 900px) { .tb-career__aside { position: sticky; top: calc(var(--nav-h) + 1rem); } }
.tb-career__apply-lead { margin: 0.5rem 0 1.25rem; color: var(--text-secondary); line-height: 1.5; }
.tb-career__aside-facts { margin: 1.5rem 0 0; display: grid; gap: 0.8rem; border-top: 1px solid var(--border-subtle); padding-top: 1.25rem; }
.tb-career__aside-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.tb-career__aside-facts dt { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tb-career__aside-facts dd { margin: 0; color: var(--text-primary); font-weight: 600; text-align: right; }

.tb-career__apply { border-top: 1px solid var(--border-subtle); background: var(--bg-secondary); }
.tb-career__apply-head { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.tb-career__apply-title { font-size: var(--fs-48); line-height: 1; margin: 0.15em 0 0; }
.tb-career__apply-grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
@media (min-width: 860px) { .tb-career__apply-grid { grid-template-columns: minmax(0, 700px) minmax(0, 500px); justify-content: space-between; } }
.tb-career__form { max-width: none; }
.tb-career__form-fallback { color: var(--text-secondary); }
.tb-career__form-fallback a { color: var(--accent); }
.tb-career__apply-side { background: var(--bg-primary); border: 1px solid var(--border-subtle); border-radius: 16px; padding: clamp(1.5rem, 3vw, 2rem); }
@media (min-width: 860px) { .tb-career__apply-side { position: sticky; top: calc(var(--nav-h) + 1rem); } }
.tb-career__apply-side .tb-label { color: var(--accent); }
.tb-career__apply-role { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.4rem, 2.5vw, 1.9rem); line-height: 1; margin: 0.45rem 0 0; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.tb-career__apply-facts { margin: 1.35rem 0; display: grid; gap: 0.7rem; border-block: 1px solid var(--border-subtle); padding-block: 1.15rem; }
.tb-career__apply-facts div { display: flex; justify-content: space-between; gap: 1rem; }
.tb-career__apply-facts dt { color: var(--text-secondary); font-family: var(--font-mono); font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.05em; }
.tb-career__apply-facts dd { margin: 0; color: var(--text-primary); font-weight: 600; text-align: right; }
.tb-career__next-label { margin-top: 0.25rem; }
.tb-career__steps { margin: 0.85rem 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 0.9rem; }
.tb-career__steps li { position: relative; padding-left: 2.5rem; color: var(--text-secondary); line-height: 1.5; counter-increment: step; }
.tb-career__steps li::before { content: counter(step); position: absolute; left: 0; top: -0.1rem; width: 1.75rem; height: 1.75rem; display: flex; align-items: center; justify-content: center; background: rgba(27,26,23,0.12); color: var(--accent); border: 1px solid rgba(27,26,23,0.4); border-radius: 50%; font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; }

/* ─── DOCUMENT / POLICY PAGES (default page template) ────── */
.tb-doc__inner { padding-top: calc(var(--nav-h) + clamp(2rem, 5vw, 3.5rem)); padding-bottom: clamp(3rem, 7vw, 5.5rem); }
.tb-doc__head, .tb-doc__body { max-width: none; }
.tb-doc__head { margin-bottom: clamp(1.75rem, 4vw, 2.75rem); padding-bottom: clamp(1.5rem, 3vw, 2rem); border-bottom: 1px solid var(--border-subtle); }
.tb-doc__eyebrow { color: var(--accent); }
.tb-doc__title { font-size: var(--fs-48); line-height: 1; margin: 0.35rem 0 0; text-transform: uppercase; }
.tb-doc__body { color: var(--text-secondary); font-size: var(--fs-16); line-height: 1.8; }
.tb-doc__body > *:first-child { margin-top: 0; }
.tb-doc__body h2 { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; color: var(--text-primary); font-size: clamp(1.3rem, 2.3vw, 1.7rem); line-height: 1.15; margin: 2.3em 0 0.7em; }
.tb-doc__body h3 { color: var(--text-primary); font-size: 1.15rem; margin: 1.8em 0 0.5em; }
.tb-doc__body p { margin: 0 0 1.15em; }
.tb-doc__body a { color: var(--accent); text-underline-offset: 3px; }
.tb-doc__body strong { color: var(--text-primary); font-weight: 600; }
.tb-doc__body em { color: var(--text-muted); font-style: italic; }
.tb-doc__body ul, .tb-doc__body ol { margin: 0 0 1.3em; padding: 0; list-style: none; display: grid; gap: 0.7rem; }
.tb-doc__body li { position: relative; padding-left: 1.6rem; }
.tb-doc__body ul li::before { content: ''; position: absolute; left: 0.15rem; top: 0.66em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
.tb-doc__body ol { counter-reset: doc; }
.tb-doc__body ol li { counter-increment: doc; }
.tb-doc__body ol li::before { content: counter(doc); position: absolute; left: 0; top: 0; color: var(--accent); font-family: var(--font-mono); font-size: 0.85rem; }

/* ─── CHECKOUT: "WHO'S COMING" per-ticket attendee names ─── */
.tb-attendees { margin: 1.75rem 0 0; padding: clamp(1.1rem, 3vw, 1.6rem); border: 1px solid var(--border-subtle); border-radius: 14px; background: rgba(61, 224, 252, 0.03); }
.tb-attendees__title { font-family: var(--font-display); font-weight: var(--fw-display); text-transform: uppercase; font-size: clamp(1.15rem, 2.4vw, 1.4rem); line-height: 1.1; margin: 0 0 0.35rem; color: var(--text-primary); }
.tb-attendees__intro { margin: 0 0 1.25rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.55; }
.tb-attendees__event + .tb-attendees__event { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border-subtle); }
.tb-attendees__event-name { font-family: var(--font-mono); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--accent); margin: 0 0 0.85rem; }
.tb-attendees .tb-attendees__field { margin-bottom: 0.85rem; }
.tb-attendees .tb-attendees__field:last-child { margin-bottom: 0; }

/* ═══════════════════════════════════════════════════════════
   V2 CLEAN PASS - flat & breathable: personality over effects.
   No sci-fi glows, no heavy drop shadows, no hero light FX.
═══════════════════════════════════════════════════════════ */

/* Kill the decorative hero light-FX and mission glow entirely */
.tb-hero__glow,
.tb-hero__streak,
.tb-hero__beam,
.tb-mission__glow { display: none !important; }

/* No neon glow on the hero title (keep the press motion, lose the light) */
[data-glitch],
[data-glitch] .tb-heading-char { text-shadow: none !important; --glow: 0; }

/* Stop the featured-card pulse animation */
.tb-featured,
.tb-ev-card--featured,
.tb-app [class*="--featured"] { animation: none !important; }

/* Flatten every theme surface - no shadows, clean and open */
.tb-app [class*="tb-"] { box-shadow: none !important; }

/* WooCommerce + Gravity Forms surfaces without the tb- prefix */
.woocommerce a.button,
.woocommerce button.button,
.wc-proceed-to-checkout a.checkout-button,
.gform_wrapper input,
.gform_wrapper textarea,
.gform_wrapper select,
.gform-theme--framework .gform_footer button.gform_button,
.ui-datepicker { box-shadow: none !important; }

/* A tidy, on-brand focus ring in place of the old glow rings */
.tb-app :focus-visible,
.gform_wrapper input:focus,
.gform_wrapper textarea:focus,
.gform_wrapper select:focus {
    box-shadow: none !important;
    outline: 2px solid var(--hyper-pink);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════
   V2 COLOUR PASS - What's On cards + dark footer (palette only)
═══════════════════════════════════════════════════════════ */

/* Vibrant colour-block cards - cycle the palette across the carousel */
.tb-events__track > .tb-event-card:nth-child(6n+1) { --card-c: var(--hyper-pink);   --card-ink: #fff; }
.tb-events__track > .tb-event-card:nth-child(6n+2) { --card-c: var(--electric-blue);    --card-ink: #fff; }
.tb-events__track > .tb-event-card:nth-child(6n+3) { --card-c: var(--acid-yellow); --card-ink: var(--black-hole); }
.tb-events__track > .tb-event-card:nth-child(6n+4) { --card-c: var(--electric-blue);     --card-ink: #fff; }
.tb-events__track > .tb-event-card:nth-child(6n+5) { --card-c: var(--cosmic-lilac);    --card-ink: var(--black-hole); }
.tb-events__track > .tb-event-card:nth-child(6n+6) { --card-c: var(--alien-green);    --card-ink: #fff; }

/* Dark footer - light, legible text on the dark island */
.tb-footer__list a,
.tb-footer__legal a,
.tb-footer__copyright a,
.tb-footer__social-link { color: rgba(245,238,224,0.66); }
.tb-footer__list a:hover,
.tb-footer__legal a:hover,
.tb-footer__copyright a:hover { color: var(--hyper-pink); }
.tb-footer__cta { color: var(--void-cream); }
.tb-footer__cta-eyebrow { color: rgba(245,238,224,0.5); }
.tb-footer__cta-heading { color: var(--void-cream); }
.tb-footer__cta:hover .tb-footer__cta-heading { color: var(--hyper-pink); }
.tb-footer__col-title { color: var(--hyper-pink); }
.tb-footer__divider { background: repeating-linear-gradient(90deg, rgba(245,238,224,0.22) 0 6px, transparent 6px 14px); }
.tb-footer__social-link { border-color: rgba(245,238,224,0.22); }
.tb-footer__social-link:hover { color: var(--black-hole); border-color: var(--hyper-pink); background: var(--hyper-pink); }
.tb-footer__wordmark { color: rgba(245,238,224,0.08); }

/* Hero text over an image sits on the dark scrim, so it goes cream (every page).
   No-image heroes fall back to a cream panel and keep their dark ink text. */
.tb-hero__heading, .tb-hero__sub,
.tb-page__hero.has-image .tb-page__title,
.tb-page__hero.has-image .tb-page__lead,
.tb-locpage__hero.has-image .tb-locpage__title,
.tb-locpage__hero.has-image .tb-locpage__lead,
.tb-hire__hero.has-image .tb-hire__title,
.tb-hire__hero.has-image .tb-hire__lead,
.tb-product__hero.has-image .tb-product__title { color: var(--void-cream); }

/* ═══════════════════════════════════════════════════════════
   PSYCHEDELIC LIGHT SYSTEM — v2 (client-chosen direction)
   Cream page, black ink, the core palette loud on CTAs and
   moments. Sticker chrome, wavy dividers, film grain.
═══════════════════════════════════════════════════════════ */

/* ── Film grain — multiply over cream ── */
.tb-grain {
    position: fixed;
    inset: 0;
    z-index: 9990;
    pointer-events: none;
    background: url('../img/texture/grain.png') 50% 50% / 128px repeat;
    opacity: var(--grain-opacity);
    mix-blend-mode: var(--grain-blend);
}
.tb-grain[data-grain-animate="true"] { animation: tb-grain-shift 0.7s steps(1, end) infinite; }
@keyframes tb-grain-shift {
    0%   { background-position: 0      0;    }
    20%  { background-position: -32px  16px; }
    40%  { background-position: 24px  -12px; }
    60%  { background-position: -16px -28px; }
    80%  { background-position: 12px   32px; }
}
@media (prefers-reduced-motion: reduce) {
    .tb-grain[data-grain-animate="true"] { animation: none; }
}

/* ── Accent scopes — rotate the neon per section/card.
   Derived tokens re-declared per scope: custom properties
   resolve where declared, so :root versions stay locked
   otherwise. ── */
.tb-accent--purple { --accent: var(--cosmic-purple); --accent-ink: var(--void-cream); }
.tb-accent--pink   { --accent: var(--hyper-pink);    --accent-ink: var(--black-hole); }
.tb-accent--yellow { --accent: var(--acid-yellow);   --accent-ink: var(--black-hole); }
.tb-accent--blue   { --accent: var(--electric-blue); --accent-ink: var(--black-hole); }
.tb-accent--green  { --accent: var(--alien-green);   --accent-ink: var(--black-hole); }
.tb-accent--orange { --accent: var(--solar-orange);  --accent-ink: var(--black-hole); }
.tb-accent--purple, .tb-accent--pink, .tb-accent--yellow,
.tb-accent--blue, .tb-accent--green, .tb-accent--orange {
    --accent-glow: color-mix(in srgb, var(--accent) 22%, transparent);
    --border-accent: color-mix(in srgb, var(--accent) 40%, transparent);
    --text-link: color-mix(in srgb, var(--accent) 60%, var(--black-hole));
}

/* ── Dark context — the contrast anchor (mission band, footer).
   Same mechanism as v1's .tb-invert, flipped for a light site. ── */
.tb-dark {
    --bg-primary:     var(--black-hole);
    --bg-secondary:   #1A1A1E;
    --surface-raised: #232328;
    --text-primary:   var(--void-cream);
    --text-secondary: var(--aquarium-grey);
    --text-muted:     rgba(154,154,177,0.45);
    --text-link:      var(--electric-blue);
    --border-subtle:  rgba(255,247,230,0.12);
    --border-strong:  rgba(255,247,230,0.30);
    --grain-blend:    soft-light;
    /* background-COLOR, not the shorthand: heroes carry their featured image as an
       inline background-image, and the shorthand reset their background-size/repeat,
       which tiled the photo at its natural size. */
    background-color: var(--bg-primary);
    color: var(--text-primary);
}

/* ── Sticker chrome — the spec sheet's badge language ── */
.tb-sticker {
    border: var(--sticker-border);
    box-shadow: var(--sticker-shadow);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    transition: transform var(--dur-fast) var(--ease-out),
                box-shadow var(--dur-fast) var(--ease-out);
}
.tb-sticker:hover { transform: translate(-2px,-2px); box-shadow: 8px 8px 0 var(--black-hole); }
@media (prefers-reduced-motion: reduce) {
    .tb-sticker:hover { transform: none; box-shadow: var(--sticker-shadow); }
}

/* ── Wavy divider — between bands. Inline SVG mask, palette-driven. ── */
.tb-wave {
    display: block;
    width: 100%;
    height: clamp(28px, 4vw, 56px);
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 300,0 450,30 C600,60 750,0 900,30 C1050,60 1150,10 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,30 C150,60 300,0 450,30 C600,60 750,0 900,30 C1050,60 1150,10 1200,30 L1200,60 L0,60 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

/* ── Sparkle — the spec sheet's four-point star, pure CSS ── */
.tb-spark {
    position: absolute;
    width: 22px; height: 22px;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14.5 9.5 L24 12 L14.5 14.5 L12 24 L9.5 14.5 L0 12 L9.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14.5 9.5 L24 12 L14.5 14.5 L12 24 L9.5 14.5 L0 12 L9.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.tb-spark--lg { width: 38px; height: 38px; }
.tb-spark--sm { width: 14px; height: 14px; }
/* The twinkle owns opacity, which would override an inline one, so the
   entrance fade rides on --spark-in and the loop multiplies through it. */
@keyframes tb-spark-twinkle {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: var(--spark-in, 1); }
    50%      { transform: scale(0.6) rotate(22deg); opacity: calc(var(--spark-in, 1) * 0.55); }
}
.tb-spark { --spark-in: 1; animation: tb-spark-twinkle 2.6s var(--ease-in-out, ease-in-out) infinite; }
.tb-spark:nth-child(2n) { animation-delay: -0.9s; }
.tb-spark:nth-child(3n) { animation-delay: -1.7s; }
@media (prefers-reduced-motion: reduce) { .tb-spark { animation: none; } }

/* ── Marquee ticker — EXPLORE BEYOND ✦ DRINK DIFFERENT ── */
.tb-ticker {
    overflow: hidden;
    white-space: nowrap;
    background: var(--acid-yellow);
    color: var(--black-hole);
    border-top: var(--sticker-border);
    border-bottom: var(--sticker-border);
    padding-block: 0.95rem;
}
.tb-ticker__track {
    display: inline-flex;
    width: max-content;
    font-family: var(--font-mono);
    font-size: var(--fs-16);
    font-weight: 500;
    letter-spacing: 0.16em;
    line-height: 1;
    text-transform: uppercase;
    animation: tb-ticker-roll 30s linear infinite;
}
/* Each half carries its own trailing gap, so the two halves are
   pixel-identical and translateX(-50%) loops seamlessly. */
.tb-ticker__track > span { display: inline-flex; align-items: center; gap: 2.75rem; padding-right: 2.75rem; }
.tb-ticker .tb-spark { position: static; display: inline-block; width: 13px; height: 13px; animation: none; }
@keyframes tb-ticker-roll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-ticker__track { animation: none; }
}

/* ── Blob — soft organic colour field for hero/section corners ── */
.tb-blob {
    position: absolute;
    border-radius: 46% 54% 60% 40% / 48% 42% 58% 52%;
    filter: blur(38px);
    opacity: 0.5;
    pointer-events: none;
}

/* ── Texture utilities (ported from v1; light-appropriate) ── */
.tb-texture {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.tb-texture--foil    { background-image: url('../img/texture/holo-foil.jpg'); }
.tb-texture--bloom   { background-image: url('../img/texture/holo-bloom.jpg'); }
.tb-texture--acid    { background-image: url('../img/texture/acid-wash.jpg'); }
.tb-texture--swirl   { background-image: url('../img/texture/swirl-neon-black.jpg'); }
.tb-texture--magenta { background-image: url('../img/texture/glow-magenta.jpg'); }
.tb-texture--dust    { background-image: url('../img/texture/cosmic-dust.jpg'); }
.tb-texture--soft  { opacity: 0.30; }
.tb-texture--faint { opacity: 0.15; }


/* Header over the homepage's dark hero: light-context purple has no
   contrast on the photo, so the header borrows the hero's neon. */
.home .tb-header { --accent: var(--hyper-pink); --accent-ink: var(--black-hole);
    --text-link: var(--hyper-pink);
    --border-accent: color-mix(in srgb, var(--hyper-pink) 45%, transparent); }


/* Footer readability + flare (dark band) */
.tb-footer { position: relative; overflow: hidden; }
.tb-footer > :not(.tb-texture) { position: relative; z-index: 1; }
.tb-footer__texture {
    opacity: 0.22;
    -webkit-mask-image: radial-gradient(ellipse 85% 80% at 85% 90%, #000 25%, transparent 100%);
    mask-image: radial-gradient(ellipse 85% 80% at 85% 90%, #000 25%, transparent 100%);
}
.tb-footer__copyright { color: color-mix(in srgb, var(--void-cream) 72%, transparent); }
.tb-footer .tb-label { color: var(--hyper-pink); }

/* ── Fullscreen menu: per-item palette hover ── */
.tb-mega__item:nth-child(6n+1) { --accent: var(--cosmic-purple); }
.tb-mega__item:nth-child(6n+2) { --accent: var(--hyper-pink); }
.tb-mega__item:nth-child(6n+3) { --accent: var(--solar-orange); }
.tb-mega__item:nth-child(6n+4) { --accent: var(--electric-blue); }
.tb-mega__item:nth-child(6n+5) { --accent: var(--alien-green); }
.tb-mega__item:nth-child(6n+6) { --accent: var(--cosmic-lilac); }
.tb-mega__texture { position: absolute; inset: 0; opacity: 0.15; pointer-events: none; }

/* While the fullscreen menu is open the header becomes the menu's own
   top bar: solid cream, ink controls, ink logo. One bar means the menu
   and header controls always share the same widths and positions. */
body:has(.tb-mega[data-nav-state="open"]) .tb-header {
    /* Transparent over the menu's own cream: the controls float on the
       holo wash instead of sitting in a separate strip that reads as
       the page header showing through. */
    background: transparent;
    border-bottom-color: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    color: var(--black-hole);
    --accent: var(--cosmic-purple);
    --accent-ink: var(--void-cream);
    --text-link: var(--cosmic-purple);
    --border-accent: color-mix(in srgb, var(--cosmic-purple) 45%, transparent);
}
body:has(.tb-mega[data-nav-state="open"]) .tb-header .tb-header__logo-img--white { display: none; }
body:has(.tb-mega[data-nav-state="open"]) .tb-header .tb-header__logo-img--ink   { display: block; }
/* Child clusters carry their own colour rules over dark heroes, so the
   open-menu ink has to land on them directly, not just on the header. */
body:has(.tb-mega[data-nav-state="open"]) .tb-header :is(.tb-menu-btn__label, .tb-menu-btn__icon, .tb-header__menu-toggle, .tb-header__action, .tb-header__pill, .tb-nav__list a, .tb-header__private, .tb-header__locations-trigger) {
    color: var(--black-hole);
}
body:has(.tb-mega[data-nav-state="open"]) .tb-header { --text-primary: var(--black-hole); }

/* Active page marker in the fullscreen menu. */
.tb-mega__item.is--active .tb-mega__link-heading { color: var(--accent); }
/* Desktop only: at phone width the extra words wrap under the number and
   shove the menu item's own text onto two lines. The active item is already
   marked by its accent colour. */
@media (min-width: 768px) {
    .tb-mega__item.is--active .tb-mega__link-eyebrow::after { content: ' · you are here'; }
}

/* Dark-photo hero pages: the What's On pill reads in cream (#FAF3E1),
   per client - pink had too little contrast over photography. */
body.tb-dark-hero .tb-header:not(.is-scrolled) .tb-header__pill {
    color: #FAF3E1;
    border-color: color-mix(in srgb, #FAF3E1 55%, transparent);
}

/* Inner pages whose hero runs the dark context: header borrows the
   hero's neon exactly as on the homepage. */
body.tb-dark-hero .tb-header {
    --accent: var(--hyper-pink);
    --accent-ink: var(--black-hole);
    --text-link: var(--hyper-pink);
    --border-accent: color-mix(in srgb, var(--hyper-pink) 45%, transparent);
}

/* Hero eyebrows over photography: a soft ink chip guarantees the label
   survives any image brightness. */
.tb-locpage__hero.has-image .tb-label,
.tb-page__hero.has-image .tb-label,
.tb-hire__hero.has-image .tb-label {
    display: inline-block;
    background: rgba(13,13,13,0.55);
    padding: 4px 12px;
    border-radius: 999px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}



/* ═══════════════════════════════════════════════════════════
   SPRINT 3 — slider, alert bar, progress, blur, buttons, woo
═══════════════════════════════════════════════════════════ */

/* ── Hero slider ── */
.tb-hero__slider { position: absolute; inset: 0; }
.tb-hero__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.85s var(--ease-in-out, ease-in-out);
}
.tb-hero__slide.is--active {
    opacity: 1;
    animation: tb-kenburns 9s var(--ease-out) forwards;
}
.tb-hero__slide.is--leaving { opacity: 0; }
@keyframes tb-kenburns {
    from { transform: scale(1); }
    to   { transform: scale(1.07) translateY(-1%); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-hero__slide { transition: opacity 0.3s ease; }
    .tb-hero__slide.is--active { animation: none; }
}

/* Edge zones: invisible buttons with directional cursors. */
.tb-hero__slide-nav {
    position: absolute;
    /* Starts just clear of the fixed header and runs to just above the status
       strip. It used to start at 42%, which left the top of the hero dead to
       the click even though the disc suggested otherwise - the arrows only
       answered in the bottom half. The header is z-index 100 against this
       zone's 3, so it keeps its own clicks regardless. */
    top: calc(var(--nav-h) + 2rem);
    bottom: 96px;
    width: 16%;
    z-index: 3;
    background: none;
    border: 0;
    padding: 0;
}
/* Real arrow buttons rather than a custom cursor image. A cursor: url()
   depends on the browser accepting the image at all - ours was silently
   falling back, so the control had no visible state whatsoever. A disc that
   fades in on hover shows the state on the page, keeps the plain pointer
   everyone expects, and behaves identically in every browser. */
.tb-hero__slide-nav {
    cursor: pointer;
    /* The disc tracks the pointer - JS writes --x/--y, and the transition on
       the offsets gives it a little trail rather than snapping. Defaults keep
       it centred before the first move. */
    --x: 50%;
    --y: 50%;
}
.tb-hero__slide-nav::before,
.tb-hero__slide-nav::after {
    left: var(--x);
    top: var(--y);
    transition:
        opacity 0.22s ease,
        transform 0.28s cubic-bezier(0.33, 0.9, 0.35, 1),
        left 0.14s cubic-bezier(0.19, 1, 0.22, 1),
        top 0.14s cubic-bezier(0.19, 1, 0.22, 1);
}
.tb-hero__slide-nav::before {
    content: '';
    position: absolute;
    margin-left: -26px;
    margin-top: -26px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--void-cream);
    border: 2px solid var(--black-hole);
    box-shadow: 4px 4px 0 rgba(13, 13, 13, 0.35);
    opacity: 0;
    transform: scale(0.82);
    transition: opacity 0.22s ease, transform 0.28s cubic-bezier(0.33, 0.9, 0.35, 1);
}
/* Chevron drawn from borders - nothing to load, nothing to fail. */
.tb-hero__slide-nav::after {
    content: '';
    position: absolute;
    margin-left: -6px;
    margin-top: -6px;
    width: 11px;
    height: 11px;
    border-left: 2.5px solid var(--black-hole);
    border-bottom: 2.5px solid var(--black-hole);
    opacity: 0;
}
.tb-hero__slide-nav--prev { left: 0; }
.tb-hero__slide-nav--next { right: 0; }
.tb-hero__slide-nav--prev::after { transform: translateX(2px) rotate(45deg) scale(0.8); }
.tb-hero__slide-nav--next::after { transform: translateX(-2px) rotate(-135deg) scale(0.8); }

@media (hover: hover) and (pointer: fine) {
    .tb-hero__slide-nav:hover::before,
    .tb-hero__slide-nav:focus-visible::before { opacity: 1; transform: scale(1); }
    .tb-hero__slide-nav:hover::after,
    .tb-hero__slide-nav:focus-visible::after { opacity: 1; }
    .tb-hero__slide-nav--prev:hover::after { transform: translateX(2px) rotate(45deg) scale(1); }
    .tb-hero__slide-nav--next:hover::after { transform: translateX(-2px) rotate(-135deg) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
    .tb-hero__slide-nav::before,
    .tb-hero__slide-nav::after { transition: opacity 0.15s ease; transform: none; }
    .tb-hero__slide-nav--prev::after { transform: translateX(2px) rotate(45deg); }
    .tb-hero__slide-nav--next::after { transform: translateX(-2px) rotate(-135deg); }
}
@media (hover: none), (max-width: 767px) {
    .tb-hero__slide-nav { display: none; }
}

/* ── Emergency alert bar ── */
.tb-alert {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10001;
    display: block;
    background: var(--hyper-pink);
    color: #FFFFFF;
    font-family: var(--font-mono);
    font-weight: 700;
    font-size: var(--fs-13);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-align: center;
    text-decoration: none;
    padding: 0.55rem 1rem;
    transition: background-color var(--dur-base) var(--ease-out);
}
.tb-alert:hover { background: var(--black-hole); }
body.has-alert .tb-header { top: 34px; }
body.has-alert .tb-mega { padding-top: 34px; }

/* ── Scroll progress - holo strip on the top edge ── */
/* The strip is only as tall as the bar it draws: it sits above every
   other fixed element, so any extra height would swallow clicks meant
   for whatever else lives at the bottom edge of the viewport. */
.tb-progress {
    position: fixed;
    inset: auto 0 0;  /* bottom edge, per client */
    z-index: 9985;
    height: 5px;
    /* Read-only: a 5px strip pinned to the bottom edge was turning the cursor
       into a hand whenever the pointer neared the bottom of the window, and
       stealing hover from the content beneath it. */
    pointer-events: none;
    transition: background-color 0.2s ease;
}
.tb-progress__bar {
    height: 5px;
    position: absolute;
    bottom: 0;
    width: 100%;
    transform-origin: 0 50%;
    transform: scaleX(0);
    background: var(--holo-foil);
}

/* ── Progressive blur - bottom viewport edge ── */
.tb-blur {
    z-index: 40;
    pointer-events: none;
    isolation: isolate;
    contain: paint;
    width: 100%;
    height: 10em;
    position: fixed;
    bottom: 0;
    left: 0;
    overflow: hidden;
    transform: translateZ(0);
}
.tb-blur__layer { width: 100%; height: 100%; position: absolute; }
.tb-blur__layer.is--1 { backdrop-filter: blur(.09375em); -webkit-backdrop-filter: blur(.09375em); -webkit-mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); mask: linear-gradient(#0000 50%, #000 62.5% 75%, #0000 87.5%); }
.tb-blur__layer.is--2 { backdrop-filter: blur(.1875em); -webkit-backdrop-filter: blur(.1875em); -webkit-mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); mask: linear-gradient(#0000 62.5%, #000 75% 87.5%, #0000 100%); }
.tb-blur__layer.is--3 { backdrop-filter: blur(.375em); -webkit-backdrop-filter: blur(.375em); -webkit-mask: linear-gradient(#0000 75%, #000 87.5% 100%); mask: linear-gradient(#0000 75%, #000 87.5% 100%); }
.tb-blur__layer.is--4 { backdrop-filter: blur(.75em); -webkit-backdrop-filter: blur(.75em); -webkit-mask: linear-gradient(#0000 82%, #000 92% 100%); mask: linear-gradient(#0000 82%, #000 92% 100%); }
.tb-blur__layer.is--5 { backdrop-filter: blur(1.5em); -webkit-backdrop-filter: blur(1.5em); -webkit-mask: linear-gradient(#0000 88%, #000 100%); mask: linear-gradient(#0000 88%, #000 100%); }

/* ── Button hover wipe - the two-stage reveal, no extra markup.
   The button's own background goes transparent; ::before carries the
   accent fill (z -2) and ::after wipes in the hover colour (z -1)
   with a clip-path bloom from the centre. Tokens keep it readable in
   every context: --btn-hover-bg / --btn-hover-ink flip in .tb-dark. ── */
:root {
    --btn-hover-bg: var(--black-hole);
    --btn-hover-ink: var(--void-cream);
}
.tb-dark {
    --btn-hover-bg: var(--void-cream);
    --btn-hover-ink: var(--black-hole);
}
.tb-btn--primary,
.tb-hero__cta--primary,
.tb-hire__hero-cta,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order {
    position: relative;
    z-index: 0;
    background: transparent !important;
    color: var(--accent-ink);
}
.tb-btn--primary::before,
.tb-hero__cta--primary::before,
.tb-hire__hero-cta::before,
.woocommerce button.button::before,
.woocommerce a.button::before,
.woocommerce #place_order::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: var(--accent);
}
.tb-btn--primary::after,
.tb-hero__cta--primary::after,
.tb-hire__hero-cta::after,
.woocommerce button.button::after,
.woocommerce a.button::after,
.woocommerce #place_order::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--btn-hover-bg);
    clip-path: inset(50% 50% 50% 50% round var(--radius-btn));
    transition: clip-path 0.24s cubic-bezier(0.33, 0.9, 0.35, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tb-btn--primary:hover, .tb-btn--primary:focus-visible,
    .tb-hero__cta--primary:hover, .tb-hero__cta--primary:focus-visible,
    .tb-hire__hero-cta:hover, .tb-hire__hero-cta:focus-visible,
    .woocommerce button.button:hover:not(:disabled),
    .woocommerce a.button:hover,
    .woocommerce #place_order:hover:not(:disabled) {
        /* !important to beat Woo's own :hover colour - without it the label
           stayed dark on the dark wipe fill. Disabled buttons are excluded so
           the muted disabled colour still wins. */
        color: var(--btn-hover-ink) !important;
        transition: color 0.12s 0.08s ease;
    }
    .tb-btn--primary:hover::after, .tb-btn--primary:focus-visible::after,
    .tb-hero__cta--primary:hover::after, .tb-hero__cta--primary:focus-visible::after,
    .tb-hire__hero-cta:hover::after, .tb-hire__hero-cta:focus-visible::after,
    .woocommerce button.button:hover::after,
    .woocommerce a.button:hover::after,
    .woocommerce #place_order:hover::after {
        clip-path: inset(0 0 0 0 round var(--radius-btn));
    }
}

/* ── Woo cart/checkout readability (client screenshot: ink-on-purple) ── */
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order {
    color: var(--accent-ink);
    font-weight: var(--fw-display);
}
/* Secondary commerce actions switch the accent up: pink with black ink. */
.woocommerce-message a.button,
.woocommerce button[name="apply_coupon"] {
    --accent: var(--hyper-pink);
    --accent-ink: var(--black-hole);
}
.woocommerce button.button:disabled,
.woocommerce button.button:disabled[aria-disabled="true"] {
    background: var(--paper-300) !important;
    color: var(--text-muted) !important;
    border: 1px solid var(--border-subtle);
}
.woocommerce button.button:disabled::before,
.woocommerce button.button:disabled::after { display: none; }

/* ── What's On single: sticky buy column ── */
.tb-product__body aside {
    position: sticky;
    top: calc(var(--nav-h) + 24px);
    align-self: flex-start;
}

/* ── Homepage event cards: match the What's On sticker language ── */
.tb-event-card {
    width: 410px; /* a touch wider, per client */
    --card-ink: var(--text-primary); /* white sticker bg needs ink text, not the old white */
    color: var(--text-primary);
    border: var(--sticker-border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: 5px 5px 0 var(--black-hole);
    overflow: hidden;
    transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.tb-event-card:hover { transform: translateY(-5px) scale(1.015); box-shadow: 7px 9px 0 var(--accent); }
.tb-event-card:nth-child(6n+1) { --accent: var(--cosmic-purple); --accent-ink: var(--void-cream); }
.tb-event-card:nth-child(6n+2) { --accent: var(--hyper-pink);    --accent-ink: var(--black-hole); }
.tb-event-card:nth-child(6n+3) { --accent: var(--solar-orange);  --accent-ink: var(--black-hole); }
.tb-event-card:nth-child(6n+4) { --accent: var(--electric-blue); --accent-ink: var(--black-hole); }
.tb-event-card:nth-child(6n+5) { --accent: var(--alien-green);   --accent-ink: var(--black-hole); }
.tb-event-card:nth-child(6n+6) { --accent: var(--acid-yellow);   --accent-ink: var(--black-hole); }
@media (prefers-reduced-motion: reduce) {
    .tb-event-card:hover { transform: none; box-shadow: 5px 5px 0 var(--black-hole); }
}

/* ── External ticket links carry an outward arrow ── */
.tb-ev-card__cta .tb-ext,
.tb-event-card__cta .tb-ext {
    display: inline-block;
    margin-left: 0.3em;
    font-family: var(--font-body);
    font-weight: 700;
}

/* ── Private hire: colour on the six USP blocks + textures ── */
.tb-hire__usp-card, .tb-hire__usp {
    border-top: 4px solid var(--accent);
    background: color-mix(in srgb, var(--accent) 7%, var(--surface-raised));
}
.tb-hire__usp-card:nth-child(6n+1), .tb-hire__usp:nth-child(6n+1) { --accent: var(--cosmic-purple); }
.tb-hire__usp-card:nth-child(6n+2), .tb-hire__usp:nth-child(6n+2) { --accent: var(--hyper-pink); }
.tb-hire__usp-card:nth-child(6n+3), .tb-hire__usp:nth-child(6n+3) { --accent: var(--solar-orange); }
.tb-hire__usp-card:nth-child(6n+4), .tb-hire__usp:nth-child(6n+4) { --accent: var(--electric-blue); }
.tb-hire__usp-card:nth-child(6n+5), .tb-hire__usp:nth-child(6n+5) { --accent: var(--alien-green); }
.tb-hire__usp-card:nth-child(6n+6), .tb-hire__usp:nth-child(6n+6) { --accent: var(--acid-yellow); }
.tb-hire__usp-card .tb-hire__usp-title, .tb-hire__usp .tb-hire__usp-title { color: color-mix(in srgb, var(--accent) 65%, var(--black-hole)); }

/* Private hire USP band carries the acid wash + sparkles. */
.tb-hire__usps-band { position: relative; overflow: hidden; }
.tb-hire__usps-band > :not(.tb-texture) { position: relative; z-index: 1; }

/* ═══ 404 MINIGAME ═══ */
.minigame {
    position: relative;
    width: 100%;
    min-height: 100svh;
    padding-top: var(--nav-h);
    background: var(--void-cream);
    color: var(--text-primary);
    overflow: hidden;
}
.minigame__center {
    position: absolute;
    top: 45%;
    transform: translateY(-50%);
    width: 100%;
    display: flex;
    flex-flow: column;
    align-items: center;
    text-align: center;
    padding-inline: var(--section-px);
    pointer-events: none;
}
.minigame__eyebrow { pointer-events: auto; margin-bottom: 0.5rem; }
.minigame__h1 { display: flex; justify-content: center; font-size: clamp(8rem, 24vw, 22rem); line-height: 0.85; }
.minigame__h1-span { pointer-events: auto; font-size: 1em; }
.minigame__lead { max-width: none; color: var(--text-secondary); margin-top: 1rem; pointer-events: auto; }
.minigame__line {
    opacity: 0;
    pointer-events: none;
    transform-origin: 0;
    will-change: transform;
    background: var(--black-hole);
    height: 3px;
    border-radius: 2px;
    position: absolute;
    top: 0;
    left: 0;
}
.minigame__controls {
    z-index: 10;
    position: absolute;
    bottom: 150px;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: 0.4s cubic-bezier(.65,0,0,1);
}
.minigame:has([data-minigame-status="finished"]) .minigame__controls { opacity: 0; visibility: hidden; }
.minigame__pull {
    cursor: grab;
    will-change: transform;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
    width: 110px;
    height: 110px;
    position: absolute;
    border-radius: 50%;
    border: var(--sticker-border);
    background: var(--surface-raised);
    box-shadow: 5px 5px 0 var(--black-hole);
}
.minigame__pull.is--drag { cursor: grabbing; }
.minigame__pull-star, .minigame__rocket-star {
    display: block;
    width: 34px; height: 34px;
    background: var(--hyper-pink);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14.5 9.5 L24 12 L14.5 14.5 L12 24 L9.5 14.5 L0 12 L9.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
            mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 0 L14.5 9.5 L24 12 L14.5 14.5 L12 24 L9.5 14.5 L0 12 L9.5 9.5 Z'/%3E%3C/svg%3E") center / contain no-repeat;
    pointer-events: none;
}
.minigame__pull-text { pointer-events: none; font-family: var(--font-mono); font-size: var(--fs-12); letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-secondary); }
.minigame__rocket {
    opacity: 0;
    pointer-events: none;
    will-change: transform;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 60px;
    height: 60px;
    position: absolute;
}
.minigame__rocket-star { width: 48px; height: 48px; background: var(--cosmic-purple); }
.minigame__fly {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 54px;
    height: 54px;
    position: absolute;
    top: 50%;
    left: 50%;
    will-change: transform;
}
.minigame__fly img { width: 100%; height: auto; }
.minigame__score {
    z-index: 20;
    pointer-events: none;
    display: flex;
    flex-flow: column;
    justify-content: center;
    align-items: center;
    position: absolute;
    inset: 0;
}
.minigame__score-screen {
    pointer-events: auto;
    text-align: center;
    display: flex;
    flex-flow: column;
    align-items: center;
    gap: 12px;
    max-width: calc(100vw - 32px);
    padding: 48px;
    border: var(--sticker-border);
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    box-shadow: 8px 8px 0 var(--cosmic-purple);
    transition: 0.4s cubic-bezier(.65,0,0,1);
    opacity: 0;
    visibility: hidden;
    transform: translateY(32px) scale(0.9);
}
[data-minigame-status="finished"] .minigame__score-screen { opacity: 1; visibility: visible; transform: translateY(0) scale(1); }
.minigame__score-h2 { font-size: var(--fs-36); }
.minigame__score-p { color: var(--text-secondary); }
.minigame__score-ctas { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 8px; }
.minigame .dot {
    pointer-events: none;
    border-radius: 4px;
    width: 22px;
    height: 22px;
    position: absolute;
}
@media (max-width: 767px) {
    .minigame__controls { bottom: 110px; }
    .minigame__fly { width: 44px; height: 44px; }
}


/* Mission scroll gradient - a big soft purple/pink field that drifts
   and rotates as you scroll through the band (GSAP scrub). */
.tb-mission__gradient {
    position: absolute;
    inset: -30%;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(40% 55% at 25% 30%, color-mix(in srgb, var(--cosmic-purple) 55%, transparent), transparent 70%),
        radial-gradient(35% 50% at 75% 65%, color-mix(in srgb, var(--hyper-pink) 30%, transparent), transparent 72%),
        radial-gradient(30% 45% at 55% 20%, color-mix(in srgb, var(--electric-blue) 18%, transparent), transparent 75%);
    will-change: transform;
}


/* ═══════════════════════════════════════════════════════════
   BUTTONS — one system

   Every button is a pill (--radius-btn) and every button hovers the
   same way: a soft wipe blooms from the centre and fills the shape.
   Solid buttons wipe to the contrast colour; outline buttons wipe to
   their own accent. Because the layers inherit border-radius and end
   at inset(0), the fill always reaches the edges.

   --btn-hover-bg / --btn-hover-ink flip per context (.tb-dark), so a
   button stays readable wherever it lands.
═══════════════════════════════════════════════════════════ */
.tb-btn,
.tb-hero__cta,
.tb-hire__hero-cta,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order,
.gform_wrapper .gform_button,
.gform-theme--framework button.gform_button {
    position: relative;
    z-index: 0;
    overflow: hidden;
    border-radius: var(--radius-btn) !important;
    isolation: isolate;
}

/* Outline variants: the wipe fills with the accent and the label
   flips to the accent's ink pairing. */
.tb-btn--outline {
    background: transparent;
    color: var(--accent);
    border: 2px solid var(--accent);
    transition: color 0.12s 0.06s ease, border-color 0.2s ease;
}
.tb-btn--outline::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--accent);
    clip-path: inset(50% 50% 50% 50% round var(--radius-btn));
    transition: clip-path 0.24s cubic-bezier(0.33, 0.9, 0.35, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tb-btn--outline:hover, .tb-btn--outline:focus-visible {
        color: var(--accent-ink);
    }
    .tb-btn--outline:hover::after, .tb-btn--outline:focus-visible::after {
        clip-path: inset(0 0 0 0 round var(--radius-btn));
    }
}

/* The sticky private-hire CTA joins the solid wipe family. It keeps its
   own `position: fixed` / z-index from the private-hire block, so it is
   deliberately not part of the shared `position: relative` group above. */
.tb-hire__sticky {
    background: transparent !important;
    overflow: hidden;
    border-radius: var(--radius-btn) !important;
    isolation: isolate;
    color: var(--accent-ink);
}
.tb-hire__sticky::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: var(--accent);
}
.tb-hire__sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--btn-hover-bg);
    clip-path: inset(50% 50% 50% 50% round var(--radius-btn));
    transition: clip-path 0.24s cubic-bezier(0.33, 0.9, 0.35, 1);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tb-hire__sticky:hover { color: var(--btn-hover-ink); }
    .tb-hire__sticky:hover::after { clip-path: inset(0 0 0 0 round var(--radius-btn)); }
}

/* The arrow glides on hover - the shared flourish across every button
   that carries one. */
.tb-btn svg, .tb-hero__cta svg, .tb-hire__hero-cta svg, .tb-hire__sticky svg {
    transition: transform 0.25s cubic-bezier(0.19, 0.69, 0.33, 1);
}
.tb-btn:hover svg, .tb-hero__cta:hover svg,
.tb-hire__hero-cta:hover svg, .tb-hire__sticky:hover svg { transform: translateX(4px); }
@media (prefers-reduced-motion: reduce) {
    .tb-btn:hover svg, .tb-hero__cta:hover svg,
    .tb-hire__hero-cta:hover svg, .tb-hire__sticky:hover svg { transform: none; }
}

/* ── Product single: the hero runs the dark context, so its back link,
   eyebrow and status pill read against photography. ── */
.tb-product__hero.has-image .tb-product__back,
.tb-product__hero.has-image .tb-label {
    color: var(--void-cream);
}
.tb-product__hero.has-image .tb-label {
    display: inline-block;
    background: rgba(13,13,13,0.55);
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.tb-product__hero.has-image .tb-product__back {
    display: inline-block;
    background: rgba(13,13,13,0.55);
    padding: 4px 14px;
    border-radius: var(--radius-pill);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
    margin-bottom: 0.6rem;
}
.tb-product__hero.has-image .tb-product__back:hover { background: var(--accent); color: var(--accent-ink); }

/* The status pill in the meta row had a transparent background from an
   older treatment, leaving an empty outline. It now reads as a proper
   pill in the card language. */
.tb-product__meta .tb-ev-card__badge {
    position: static;
    align-self: flex-start;
    background: var(--accent);
    color: var(--accent-ink);
    border: 2px solid var(--black-hole);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* ── Chrome that must never be fogged by the progressive blur (a
   viewport effect meant for content, not for the site's own furniture):
   the footer and the hero's status/clock bar both sit above it. ── */
.tb-footer { z-index: 50; }
.tb-hero__bottom { position: relative; z-index: 50; }


/* Solid buttons carry a transparent border matching the outline
   variants' 2px, so both sit at identical heights in a row - without
   it the bordered button is 4px taller and the pair looks skewed. */
.tb-btn--primary,
.tb-hero__cta--primary,
.tb-hire__hero-cta,
.tb-hire__sticky,
.woocommerce button.button,
.woocommerce a.button,
.woocommerce #place_order {
    border: 2px solid transparent;
}
.tb-hero__ctas { align-items: stretch; }

/* Carousel status pills: ink text on the bright neons, matching the
   What's On grid badges (client: green and blue want #0D0D0D). */
.tb-event-card__status--on-sale    { color: var(--black-hole); }
.tb-event-card__status--free-entry { color: var(--black-hole); }


/* Hero CTAs: equal importance, per client - no ghost button. The
   secondary takes the identical solid treatment and hover wipe. */
.tb-hero__cta--secondary {
    background: transparent !important;
    color: var(--accent-ink);
    border: 2px solid transparent;
}
.tb-hero__cta--secondary::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    border-radius: inherit;
    background: var(--accent);
}
.tb-hero__cta--secondary::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: var(--btn-hover-bg);
    clip-path: inset(50% 50% 50% 50% round var(--radius-btn));
    transition: clip-path 0.24s cubic-bezier(0.33, 0.9, 0.35, 1);
}
.tb-hero__cta--secondary { position: relative; z-index: 0; overflow: hidden; isolation: isolate; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
    .tb-hero__cta--secondary:hover, .tb-hero__cta--secondary:focus-visible {
        color: var(--btn-hover-ink);
        transition: color 0.12s 0.08s ease;
    }
    .tb-hero__cta--secondary:hover::after, .tb-hero__cta--secondary:focus-visible::after {
        clip-path: inset(0 0 0 0 round var(--radius-btn));
    }
}

/* What's On archive sparkles - flanking the title, above the text per
   client. The main element gets a positioning context for them. */
.tb-whatson { position: relative; }
.tb-whatson__spark { position: absolute; z-index: 5; }
@media (max-width: 767px) {
    /* At phone width the flanks overlap the fitted title - keep the two
       outermost only. */
    .tb-whatson__spark:nth-of-type(2),
    .tb-whatson__spark:nth-of-type(3),
    .tb-whatson__spark:nth-of-type(5),
    .tb-whatson__spark:nth-of-type(6) { display: none; }
}

/* Hero flourish: star-field texture over the photo and sparkles round
   the heading, sitting above the scrim but below the content. */
.tb-hero__spark { position: absolute; z-index: 2; }
@media (max-width: 767px) {
    .tb-hero__spark:nth-of-type(2),
    .tb-hero__spark:nth-of-type(5) { display: none; }
}


/* ── Hover lift without the cursor flicker ─────────────────────────
   A card that lifts on hover moves out from under the pointer at its
   bottom edge: hover ends, it drops back, hover fires again, and the
   cursor strobes between the arrow and the hand. An invisible pseudo
   covering the strip it vacates keeps the pointer inside the element
   for the whole lift. Buttons dropped the lift instead - the wipe fill
   already reads as interactive. */
.tb-ev-card__link,
.tb-event-card,
.tb-career-card,
.tb-hire__usp,
.tb-sticker { position: relative; }
.tb-ev-card__link:hover::after,
.tb-event-card:hover::after,
.tb-career-card:hover::after,
.tb-hire__usp:hover::after,
.tb-sticker:hover::after,
.tb-header__logo:hover::after {
    content: '';
    position: absolute;
    inset: -7px;
    z-index: -1;
}
.tb-header__logo { position: relative; }
/* The two event cards clipped that pseudo away with their own overflow:hidden,
   which only ever existed to round the media block against the card corners.
   Round the media itself and the extension can reach outside the card. */
.tb-ev-card__link,
.tb-event-card { overflow: visible; }
.tb-ev-card__media,
.tb-event-card__photo {
    border-top-left-radius: calc(var(--radius-md) - 3px);
    border-top-right-radius: calc(var(--radius-md) - 3px);
}

/* The display titles sit on huge line boxes that overflow their own rect and
   were swallowing the edges of the controls beside them - the pointer stopped
   registering over the last few pixels. Lift the controls above the text. */
.tb-product__back { position: relative; z-index: 2; }
.tb-hire__sticky  { z-index: 60; }


/* ── Forms: radios and checkboxes in the brand ─────────────────────
   accent-color only tints the browser's own control, which still read as
   default Gravity Forms blue. Draw them instead. */
/* !important throughout: Gravity Forms' own theme drives these controls from
   its --gform-theme-control-* variables, which otherwise win the cascade. */
.gform_wrapper input[type="radio"],
.gform_wrapper input[type="checkbox"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex: 0 0 auto;
    display: inline-grid !important;
    place-content: center;
    border: 2px solid var(--border-strong) !important;
    background: var(--bg-primary) !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.gform_wrapper input[type="radio"] { border-radius: 50% !important; }
.gform_wrapper input[type="checkbox"] { border-radius: 6px !important; }
.gform_wrapper input[type="radio"]::before,
.gform_wrapper input[type="checkbox"]::before {
    content: '';
    transform: scale(0);
    transition: transform 0.18s cubic-bezier(0.19, 1, 0.22, 1);
}
.gform_wrapper input[type="radio"]::before {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--accent-ink);
}
.gform_wrapper input[type="checkbox"]::before {
    width: 11px;
    height: 6px;
    border-left: 2.5px solid var(--accent-ink);
    border-bottom: 2.5px solid var(--accent-ink);
    rotate: -45deg;
    margin-top: -3px;
}
.gform_wrapper input[type="radio"]:checked,
.gform_wrapper input[type="checkbox"]:checked {
    border-color: var(--accent) !important;
    background: var(--accent) !important;
}
.gform_wrapper input[type="radio"]:checked::before,
.gform_wrapper input[type="checkbox"]:checked::before { transform: scale(1); }
.gform_wrapper input[type="radio"]:focus-visible,
.gform_wrapper input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 35%, transparent);
}
@media (hover: hover) {
    .gform_wrapper input[type="radio"]:hover,
    .gform_wrapper input[type="checkbox"]:hover { border-color: var(--accent) !important; }
}


/* The split title's character masks overflow upward over the eyebrow row, so
   the "All roles" link stopped taking clicks. Same fix as the product page:
   lift the control above the display type. */
.tb-career__eyebrow { position: relative; z-index: 2; }


/* Today's opening hours on a location page - same bloom as the popup, so the
   panel answers "are they open now?" without reading the whole week. */
.tb-locpage__hours-row.is--today {
    position: relative;
    margin-inline: -8px;
    padding-inline: 8px;
    border-radius: 12px;
}
.tb-locpage__hours-row.is--today::before {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: inherit;
    background:
        radial-gradient(120% 160% at 12% 50%, color-mix(in srgb, var(--accent) 34%, transparent) 0%, transparent 62%),
        radial-gradient(90% 150% at 88% 50%, color-mix(in srgb, var(--hyper-pink) 24%, transparent) 0%, transparent 65%);
    z-index: -1;
    pointer-events: none;
}
.tb-locpage__hours-row.is--today dt,
.tb-locpage__hours-row.is--today dd { color: var(--black-hole); font-weight: 600; }


/* ── No sticky columns on a phone ──────────────────────────────────
   A sticky side column only makes sense beside something; once the layout
   stacks it pins over the copy that follows it, which is what was happening
   on the event page. Everything that is genuinely a side column goes static
   below the point where the layout is single-file. The What's On filter bar
   is deliberately left sticky - it pins to the top of the viewport rather
   than over content, and it is the one control worth keeping in reach. */
@media (max-width: 899px) {
    .tb-product__buy-inner,
    .tb-product__body aside,
    .tb-locpage__panel,
    .tb-locpage__body:not(.is--solo) .tb-locpage__intro,
    .woocommerce-checkout #order_review,
    .tb-career__aside,
    .tb-career__apply-side,
    .tb-hire__book-head {
        position: static;
        top: auto;
    }
}


/* Tablet hero status: centred on the hero's bottom edge, per client. This has
   to live after the z-index rule below, which sets position: relative and
   would otherwise win on source order. Phones keep it in the flow under the
   image - there is no room to sit it over the photograph beneath the CTAs. */
@media (min-width: 768px) and (max-width: 1024px) {
    .tb-hero__bottom {
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        align-items: center;
        text-align: center;
        padding: 24px;
    }
    .tb-hero__status { justify-content: center; flex-wrap: wrap; }
}


/* ═══════════════════════════════════════════════════════════
   COOKIE CONSENT
   Silktide's stylesheet is enqueued before this one and themes
   itself through custom properties on #stcm-wrapper, so most of
   the work here is repointing those at the brand tokens. The rules
   below cover only what the variables cannot express - the sticker
   chrome, the mono button language, and hiding Silktide's own
   credit marks.
═══════════════════════════════════════════════════════════ */

#stcm-wrapper {
    --primaryColor:     var(--cosmic-purple);
    --backgroundColor:  var(--paper-050);
    --textColor:        var(--black-hole);
    --fontFamily:       var(--font-body);
    --iconColor:        var(--paper-050);
    --iconBackgroundColor: var(--black-hole);
}

#stcm-banner,
#stcm-modal {
    border: var(--sticker-border);
    border-radius: var(--radius-md);
    box-shadow: var(--sticker-shadow);
    font-size: var(--fs-14);
    line-height: 1.55;
}

/* Silktide already sets bottom/left 16px and caps the width at the viewport
   less 32px, so only the desktop width is ours to set - adding a margin on
   top of its offsets is what pushes the card off a phone screen. */
#stcm-banner.stcm-pos-bottom-left { width: 29rem; }

/*
 * Silktide lays the three actions out in a nowrap row inside a banner set to
 * overflow:auto, so as soon as they total more than the content box the last
 * one ("Choose") is quietly clipped rather than moved. Ours overran by 4px.
 * The extra 2rem of width above fixes it at our type size; wrapping is the
 * guarantee, for a longer translation, a larger base font or a zoomed page.
 */
#stcm-banner .stcm-actions { flex-wrap: wrap; }
@media (min-width: 600px) {
    #stcm-banner.stcm-pos-bottom-left { bottom: var(--sp-24); left: var(--sp-24); }
}

/* The preferences dialog locks page scroll, so it needs a scrim to explain
   why the page behind has stopped. Painted as a huge spread shadow rather
   than a real element: it dims the page without adding a layer that could
   swallow clicks the way Silktide's own backdrop does. */
#stcm-modal { box-shadow: var(--sticker-shadow), 0 0 0 100vmax rgba(13, 13, 13, 0.55); }

#stcm-banner p,
#stcm-modal p,
#stcm-modal .stcm-consent-description { color: var(--text-secondary); font-size: var(--fs-14); }

/* Silktide paints links on a filled chip by default - undo that. */
#stcm-banner a,
#stcm-modal a,
#stcm-wrapper a {
    background: none;
    color: var(--text-link);
    text-decoration: underline;
    text-underline-offset: 3px;
}
#stcm-banner a:hover,
#stcm-modal a:hover,
#stcm-wrapper a:hover { color: var(--hyper-pink); }

/* Silktide's own credit marks - not the client's footer to give away. */
#stcm-wrapper a.stcm-logo,
#stcm-modal footer a.stcm-credit-link { display: none; }

/* Buttons: the same pill language as the rest of the site. */
#stcm-wrapper .stcm-button {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-radius: var(--radius-pill);
    border: 2px solid var(--black-hole);
    padding: 0.7em 1.3em;
    transition: transform var(--dur-fast) var(--ease-out),
                background-color var(--dur-fast) var(--ease-out),
                color var(--dur-fast) var(--ease-out);
}
#stcm-wrapper .stcm-button:hover { transform: translateY(-2px); }
#stcm-wrapper .stcm-button-primary:hover { background-color: var(--hyper-pink); color: var(--black-hole); }

/*
 * Silktide ships accept and reject as the same primary button. Equal
 * prominence is the point - the ICO asks for it - but two identical purple
 * pills read as one choice repeated, so reject takes the outline treatment:
 * same size, same position, same legibility, different weight.
 */
#stcm-wrapper .stcm-reject-all,
#stcm-wrapper .stcm-modal-reject-all,
#stcm-wrapper .stcm-button-secondary {
    background-color: transparent;
    color: var(--black-hole);
}
#stcm-wrapper .stcm-reject-all:hover,
#stcm-wrapper .stcm-modal-reject-all:hover,
#stcm-wrapper .stcm-button-secondary:hover { background-color: var(--black-hole); color: var(--paper-050); }

#stcm-banner .stcm-preferences-button span { color: var(--text-secondary); }
#stcm-banner .stcm-preferences-button span:hover { color: var(--cosmic-purple); }

#stcm-modal h1 {
    font-family: var(--font-display);
    font-weight: var(--fw-display);
    font-size: var(--fs-24);
    color: var(--black-hole);
}
#stcm-modal legend {
    font-family: var(--font-mono);
    font-size: var(--fs-12);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--black-hole);
}
#stcm-modal fieldset { border-bottom: 1px solid var(--border-subtle); }

#stcm-modal .stcm-modal-close {
    border: 2px solid var(--black-hole);
    border-radius: 50%;
    padding: 9px;
}
#stcm-modal .stcm-modal-close:hover { background: var(--black-hole); }
#stcm-modal .stcm-modal-close:hover svg { fill: var(--paper-050); }

/* The floating re-open icon: the footer link is the primary route, so keep
   this quiet rather than parked over the content. */
#stcm-icon { border: 2px solid var(--black-hole); }

/* ─── Gated third-party embeds ───────────────────────────── */
.tb-consent-embed {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 16rem;
    background: var(--bg-secondary);
    border: 2px dashed var(--border-accent);
    border-radius: var(--radius-md);
}
.tb-consent-embed.is-loaded {
    display: block;
    min-height: 0;
    background: none;
    border: 0;
}
.tb-consent-embed iframe { display: block; width: 100%; height: 100%; border: 0; }

.tb-consent-embed__prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--sp-12);
    padding: var(--sp-32) var(--sp-24);
    text-align: center;
}
.tb-consent-embed__label {
    font-family: var(--font-mono);
    font-size: var(--fs-11);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--accent);
}
.tb-consent-embed__text { font-size: var(--fs-14); color: var(--text-secondary); }

.tb-consent-embed__settings,
.tb-footer__cookies {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}
.tb-consent-embed__settings {
    font-size: var(--fs-12);
    color: var(--text-muted);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tb-consent-embed__settings:hover { color: var(--hyper-pink); }

/* Sits in the dark footer's legal row - match its links exactly. */
.tb-footer__cookies {
    font-family: var(--font-body);
    font-size: var(--fs-13);
    color: rgba(245, 238, 224, 0.66);
    transition: color 0.2s ease;
}
.tb-footer__cookies:hover { color: var(--hyper-pink); }