@font-face {
    font-family: "Sandbox Sans";
    src: url("/fonts/filament/filament/inter/inter-latin-wght-normal-NRMW37G5.woff2") format("woff2");
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

:root {
    --ink: #171a19 !important;
    --muted: #626965 !important;
    --paper: #f4f5f1 !important;
    --line: #dfe3dc !important;
    --orange: #ed5b2a !important;
    --charcoal: #101311 !important;
    --surface: #ffffff;
    --surface-soft: #eef1ec;
    --focus: #ed5b2a;
    --shadow-sm: 0 10px 28px rgba(19, 25, 21, .08);
    --shadow-lg: 0 30px 80px rgba(8, 12, 10, .18);
    font-family: "Sandbox Sans", ui-sans-serif, system-ui, sans-serif !important;
    font-synthesis: none;
}

html { scroll-behavior: smooth; }
body { color: var(--ink); background: var(--paper); -webkit-font-smoothing: antialiased; }
a, button, input { -webkit-tap-highlight-color: transparent; }
a, button { transition: transform .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease; }
a:active, button:not(:disabled):active { transform: translateY(1px) scale(.985); }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid color-mix(in srgb, var(--focus) 35%, transparent) !important; outline-offset: 3px; }

/* Home */
.hero { min-height: 100dvh; background: var(--charcoal) !important; isolation: isolate; }
.hero::before { background: linear-gradient(90deg, rgba(10, 13, 11, .98) 0%, rgba(10, 13, 11, .88) 42%, rgba(10, 13, 11, .34) 74%), linear-gradient(0deg, rgba(10, 13, 11, .9), transparent 58%), url('/booking-assets/sandbox-event.jpg') center/cover !important; filter: saturate(.72) contrast(1.08); }
.hero::after { background: radial-gradient(circle at 80% 22%, rgba(237, 91, 42, .18), transparent 30%), linear-gradient(0deg, rgba(10, 13, 11, .78), transparent 40%) !important; }
.hero-inner { grid-template-columns: minmax(0, 1fr) minmax(310px, 370px) !important; gap: clamp(32px, 6vw, 84px) !important; padding: clamp(28px, 5vh, 52px) 0 !important; }
.hero-copy { align-self: center; }
.brand-mark img { width: 176px !important; }
.eyebrow { color: #ff9a73 !important; font-size: 11px !important; letter-spacing: .16em !important; }
.hero h1 { max-width: 680px !important; margin-top: 16px !important; font-size: clamp(46px, 6vw, 78px) !important; line-height: .94 !important; letter-spacing: -.052em !important; font-weight: 760; text-wrap: balance; }
.lead { max-width: 620px !important; color: rgba(255,255,255,.78) !important; font-size: clamp(16px, 1.4vw, 19px) !important; line-height: 1.55 !important; font-weight: 520 !important; text-shadow: none !important; }
.hero-actions { gap: 10px !important; margin-top: 28px !important; }
.button { min-height: 50px !important; padding: 0 20px !important; border-radius: 12px !important; font-size: 14px; font-weight: 760 !important; white-space: nowrap; }
.button.primary { box-shadow: 0 12px 32px rgba(237, 91, 42, .24) !important; }
.button.primary:hover { background: #ff6b37 !important; box-shadow: 0 16px 40px rgba(237, 91, 42, .32) !important; transform: translateY(-2px); }
.button.secondary { border-color: rgba(255,255,255,.2) !important; background: rgba(255,255,255,.07) !important; }
.button.secondary:hover { background: rgba(255,255,255,.13) !important; transform: translateY(-2px); }
.event-panel { border-color: rgba(255,255,255,.16) !important; border-radius: 16px !important; background: rgba(16,19,17,.74) !important; box-shadow: var(--shadow-lg) !important; backdrop-filter: blur(20px) saturate(120%) !important; }
.event-panel-head, .event-meta, .availability { border-color: rgba(255,255,255,.11) !important; }
.event-panel-head { padding: 22px !important; background: rgba(255,255,255,.045) !important; }
.panel-label { color: #ff9a73 !important; font-size: 10px !important; letter-spacing: .16em !important; }
.event-panel h2 { font-size: 26px !important; letter-spacing: -.025em !important; }
.event-meta, .availability, .booking-steps { padding: 20px 22px !important; }
.meta-row span { color: #aeb6b1 !important; font-weight: 560 !important; }
.metric { border: 0 !important; border-radius: 12px !important; background: rgba(255,255,255,.07) !important; }
.metric strong { letter-spacing: -.035em; }
.metric span { color: #b8c0bb !important; font-size: 10px !important; letter-spacing: .08em; }
.booking-steps { gap: 16px !important; }
.booking-steps li { color: rgba(255,255,255,.8) !important; font-weight: 520 !important; }
.booking-steps li::before { background: var(--orange) !important; color: #fff !important; }

/* Floor-plan selection */
.page > header { min-height: 72px !important; padding: 10px 22px !important; background: var(--charcoal) !important; }
.page > header::before { background: linear-gradient(90deg, rgba(16,19,17,.98), rgba(16,19,17,.78)), url('/booking-assets/sandbox-event.jpg') center/cover !important; filter: saturate(.6); }
.page > header h1 { font-size: 17px !important; letter-spacing: -.02em !important; }
.page > header p { color: rgba(255,255,255,.62) !important; font-weight: 520 !important; }
.brand-link img { height: 44px !important; }
.map-shell { background: #e9ede7 !important; }
.map { border-color: #d9dfd8 !important; background-color: #fbfcfa !important; background-image: linear-gradient(#e9ede8 1px, transparent 1px), linear-gradient(90deg, #e9ede8 1px, transparent 1px) !important; box-shadow: 0 24px 70px rgba(18, 27, 21, .12) !important; }
.zoom-controls { border-color: rgba(20,25,22,.1) !important; border-radius: 14px !important; background: rgba(255,255,255,.9) !important; box-shadow: var(--shadow-sm) !important; }
.zoom-controls button { border-radius: 9px !important; background: var(--surface-soft) !important; }
.zoom-controls button:hover { background: #dde3dc !important; }
.item { transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important; }
.item[data-kind="booth"]:not(:disabled):hover { transform: translateY(-2px); }
.item.active { border-color: var(--orange) !important; box-shadow: inset 0 0 0 2px #fff, 0 0 0 4px var(--orange), 0 0 0 7px rgba(16,19,17,.5), 0 16px 34px rgba(16,19,17,.3) !important; animation: booth-select .34s cubic-bezier(.2,.8,.2,1); }
.page aside { border-color: var(--line) !important; padding: 24px !important; background: var(--surface) !important; box-shadow: -18px 0 54px rgba(18,27,21,.06) !important; }
.has-selection aside { animation: panel-enter .3s cubic-bezier(.2,.8,.2,1); }
.step { background: var(--surface-soft) !important; color: #454c48 !important; font-size: 10px !important; letter-spacing: .08em; text-transform: uppercase; }
.page aside h2 { font-size: 26px !important; letter-spacing: -.035em; }
.page aside p { color: var(--muted) !important; font-weight: 520 !important; }
.selected-card { border-color: var(--line) !important; border-radius: 14px !important; padding: 16px !important; box-shadow: none !important; }
.page dl div { border-color: var(--line) !important; }
.page dt { color: var(--muted) !important; font-weight: 560 !important; }
.primary { border-radius: 12px !important; background: var(--orange) !important; box-shadow: 0 12px 30px rgba(237,91,42,.2) !important; }
.primary:not([aria-disabled="true"]):hover { background: #df4d1e !important; transform: translateY(-2px); }

/* Checkout */
.shell .visual { padding: clamp(22px, 3vw, 40px) !important; background: var(--charcoal) !important; }
.shell .visual::before { background: linear-gradient(180deg, rgba(16,19,17,.82), rgba(16,19,17,.26) 44%, rgba(16,19,17,.94)), url('/booking-assets/sandbox-community.jpg') center/cover !important; filter: saturate(.7); }
.shell .brand img { width: 180px !important; }
.visual-copy h1 { font-size: clamp(40px, 5.2vw, 68px) !important; line-height: .96 !important; letter-spacing: -.05em !important; text-wrap: balance; }
.visual-copy > p:last-child { color: rgba(255,255,255,.74) !important; font-weight: 520 !important; }
.content { padding: clamp(20px, 4vw, 54px) !important; background: var(--paper); }
.content .wrap { max-width: 700px; }
.back { border-color: var(--line) !important; border-radius: 10px !important; background: transparent !important; font-weight: 680 !important; }
.back:hover { background: var(--surface) !important; }
.content .step { background: var(--charcoal) !important; color: #fff !important; }
.panel { border-color: var(--line) !important; border-radius: 16px !important; padding: clamp(20px, 3vw, 30px) !important; background: var(--surface) !important; box-shadow: 0 22px 60px rgba(18,27,21,.08) !important; }
.panel h2 { font-size: clamp(28px, 3vw, 38px) !important; letter-spacing: -.04em; }
.panel > p { color: var(--muted) !important; font-weight: 520 !important; }
.summary { border-color: var(--line) !important; border-radius: 14px !important; background: var(--surface-soft) !important; }
.booth-card span { color: var(--muted) !important; font-weight: 580 !important; }
.total-chip { border-radius: 12px !important; background: var(--charcoal) !important; }
.total-chip span { color: #ffad8d !important; }
.panel label { color: #4d5550 !important; font-weight: 680 !important; letter-spacing: .06em !important; }
.panel input { border-color: #cfd5cf !important; border-radius: 10px !important; background: #fff !important; }
.panel input:not([type="checkbox"]) { font-size: 17px !important; font-weight: 620 !important; line-height: 1.35 !important; letter-spacing: 0 !important; }
.panel input:hover { border-color: #abb5ad !important; }
.panel input:focus { outline: 3px solid rgba(237,91,42,.17) !important; border-color: var(--orange) !important; }
.consent { border-color: var(--line) !important; border-radius: 10px !important; background: var(--surface-soft) !important; }
.panel .primary { min-height: 54px !important; }

/* Confirmation and failure */
body > .panel { border-color: var(--line) !important; border-radius: 18px !important; padding: clamp(24px, 5vw, 48px) !important; box-shadow: 0 28px 80px rgba(18,27,21,.1) !important; }
body > .panel h1 { font-size: clamp(38px, 6vw, 62px) !important; letter-spacing: -.05em; }
body > .panel p { color: var(--muted) !important; font-weight: 520 !important; }
body > .panel .grid { gap: 1px !important; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--line); }
body > .panel .box { border-radius: 0 !important; background: var(--surface-soft) !important; padding: 18px !important; }
body > .panel .box span { color: var(--muted) !important; font-size: 10px !important; letter-spacing: .08em; }
body > .panel > a { border-radius: 11px !important; background: var(--charcoal) !important; }
body > .panel > a:hover { background: #2b302d !important; transform: translateY(-2px); }

@keyframes panel-enter { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }
@keyframes booth-select { 0% { transform: scale(.92); } 65% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

@media (min-width: 981px) {
    .hero-copy > * { animation: rise .65s both cubic-bezier(.2,.8,.2,1); }
    .hero-copy > :nth-child(2) { animation-delay: .08s; }
    .hero-copy > :nth-child(3) { animation-delay: .14s; }
    .hero-copy > :nth-child(4) { animation-delay: .2s; }
    .hero-copy > :nth-child(5) { animation-delay: .26s; }
    .event-panel { animation: rise .7s .18s both cubic-bezier(.2,.8,.2,1); }
}

@media (min-width: 941px) and (max-height: 820px) {
    .shell .visual { padding: 24px !important; }
    .shell .brand img { width: 144px !important; }
    .visual-copy h1 { margin-top: 10px !important; font-size: clamp(40px, 4.2vw, 58px) !important; }
    .visual-copy > p:last-child { margin-top: 12px !important; font-size: 15px !important; line-height: 1.45 !important; }
    .content { padding: 20px 32px !important; }
    .topline { min-height: 34px; margin-bottom: 10px !important; }
    .back { min-height: 36px !important; }
    .content .step { min-height: 30px !important; }
    .panel { padding: 20px !important; }
    .panel h2 { font-size: 32px !important; }
    .panel > p { margin: 6px 0 14px !important; }
    .summary { padding: 12px 14px !important; }
    .booth-card { gap: 4px !important; }
    .booth-card strong { font-size: 26px !important; }
    .total-chip { padding: 11px 12px !important; }
    .panel dl { margin: 8px 0 12px !important; }
    .panel dl div { padding: 7px 0 !important; }
    .panel form { gap: 8px 12px !important; }
    .panel label { gap: 4px !important; font-size: 10px !important; }
    .panel input { min-height: 42px !important; padding-block: 8px !important; }
    .panel .consent { padding: 9px 11px !important; }
    .panel .consent input { min-height: 18px !important; padding: 0 !important; }
    .panel .primary { min-height: 48px !important; margin-top: 2px !important; }
}

@media (max-width: 980px) {
    .hero-inner { grid-template-columns: 1fr !important; padding: 34px 0 48px !important; }
    .hero { min-height: auto !important; }
    .event-panel { max-width: none !important; }
    .shell { grid-template-columns: 1fr !important; }
    .shell .visual { min-height: 400px !important; }
}

@media (max-width: 640px) {
    .hero h1 { font-size: clamp(42px, 13vw, 58px) !important; }
    .hero-actions { display: grid !important; }
    .button { width: 100%; }
    .availability { grid-template-columns: 1fr 1fr !important; }
    .page > header { min-height: 64px !important; padding: 8px 12px !important; }
    .page > header h1 { font-size: 14px !important; }
    .map-shell { height: calc(100dvh - 64px) !important; min-height: 480px !important; }
    .zoom-controls { border-color: rgba(255,255,255,.16) !important; background: rgba(16,19,17,.88) !important; color: #fff !important; }
    .zoom-title, .zoom-controls strong { color: #fff !important; }
    .zoom-controls button { background: rgba(255,255,255,.14) !important; color: #fff !important; }
    .zoom-controls button:hover { background: rgba(255,255,255,.22) !important; }
    .page aside { padding: 14px 14px calc(14px + env(safe-area-inset-bottom)) !important; }
    .content { padding: 20px 14px 34px !important; }
    .shell .visual { display: none !important; }
    .content .topline { flex-direction: row !important; align-items: center !important; margin-bottom: 12px !important; }
    .content .back { min-height: 36px !important; }
    .content .panel { padding: 16px !important; }
    .content .panel h2 { font-size: 30px !important; }
    .content .panel > p { margin: 6px 0 14px !important; }
    .content .summary { grid-template-columns: minmax(0, 1fr) auto !important; gap: 10px !important; padding: 12px !important; }
    .content .booth-card { gap: 4px !important; }
    .content .booth-card strong { font-size: 26px !important; }
    .content .total-chip { min-width: 130px !important; padding: 11px !important; text-align: right !important; }
    .content .total-chip strong { font-size: 19px !important; }
    .content .panel dl { margin: 8px 0 12px !important; }
    .content .panel dl div { padding: 8px 0 !important; }
    .content .panel form { gap: 9px !important; }
    .content .panel input { min-height: 44px !important; }
    .content .panel .consent { padding: 10px !important; }
    .content .panel .consent input { min-height: 18px !important; }
    .content .panel .primary { min-height: 50px !important; font-size: 14px !important; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

@media (prefers-reduced-transparency: reduce) {
    .event-panel, .button.secondary, .zoom-controls { backdrop-filter: none !important; }
    .event-panel { background: #171b18 !important; }
}