/* r22 for WordPress. Generated by scripts/sync-css.py from site/src/designs/r22/theme.css: global resets scoped under :where(.tv), which keeps their original specificity. Do not edit; edit the source and re-run. */
/* r5: r4's neon-terminal language, multi-page. Purple-black with scanlines, mono, three neons.
   Changes from r4: no $ prompt, uppercase labels, persistent nav with a three-line drawer, one contact pill style
   (WhatsApp and email), a pixel-dissolve hero, a games details dialog, and page styles for the photobooth page. */
:where(.tv),:where(.tv) *,:where(.tv) *::before,:where(.tv) *::after{box-sizing:border-box}
html{color-scheme:dark only;scroll-behavior:smooth;scroll-padding-top:5rem}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body.design-r6b,:where(.tv){margin:0;font-family:var(--font-body);font-size:var(--text-base);line-height:var(--leading);color:var(--color-text);background:var(--color-bg);-webkit-font-smoothing:antialiased;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.015) 0px,rgba(255,255,255,.015) 1px,transparent 1px,transparent 3px)}
:where(.tv) img{max-width:100%;height:auto;display:block}
:where(.tv) [hidden]{display:none!important}
:where(.tv) a{color:var(--neon-cyan);text-decoration-thickness:1px;text-underline-offset:.15em}
:where(.tv) a:hover{color:var(--color-text)}
:where(.tv) a:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
:where(.tv) a:active{opacity:.7}
:where(.tv) h1,:where(.tv) h2,:where(.tv) h3,
:where(.tv) .h1{font-family:var(--font-heading);font-weight:var(--heading-weight);line-height:1.25;margin:0 0 var(--space-2);overflow-wrap:normal;hyphens:none}
:where(.tv) h1,
:where(.tv) .h1{font-size:var(--text-3xl);line-height:1.3;letter-spacing:-.01em;max-width:24ch}
:where(.tv) h2{font-size:clamp(1.7rem,1.2rem + 1.7vw,2.5rem);letter-spacing:-.01em;max-width:34ch;margin-bottom:var(--space-4)}
/* r18 (owner, 2026-09-21): a gamepad outline replaces the "//" before every second-level heading, and the headings go up one size */
:where(.tv) h2::before{content:"";display:inline-block;width:1.45em;height:1em;margin-right:.45em;vertical-align:-.12em;background:var(--color-muted);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h14a7 7 0 0 1 6.9 5.8l1 7.2a3.6 3.6 0 0 1-6.3 2.9L21.5 14h-11l-3.1 3.9A3.6 3.6 0 0 1 1.1 15l1-7.2A7 7 0 0 1 9 2z'/%3E%3Cpath d='M9 6v4M7 8h4'/%3E%3Ccircle cx='21' cy='9.2' r='.6'/%3E%3Ccircle cx='24.4' cy='6.6' r='.6'/%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 32 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 2h14a7 7 0 0 1 6.9 5.8l1 7.2a3.6 3.6 0 0 1-6.3 2.9L21.5 14h-11l-3.1 3.9A3.6 3.6 0 0 1 1.1 15l1-7.2A7 7 0 0 1 9 2z'/%3E%3Cpath d='M9 6v4M7 8h4'/%3E%3Ccircle cx='21' cy='9.2' r='.6'/%3E%3Ccircle cx='24.4' cy='6.6' r='.6'/%3E%3C/svg%3E") center/contain no-repeat}
:where(.tv) h3{font-size:var(--text-lg);font-weight:600}
:where(.tv) p{margin:0 0 var(--space-2)}
:where(.tv) ul,:where(.tv) ol{margin:0;padding:0;list-style:none}
.container{max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.eyebrow{letter-spacing:.12em;font-size:.78rem;font-weight:700;color:var(--neon-cyan);margin-bottom:var(--space-2);text-transform:uppercase}
.lead{font-size:var(--text-lg);color:var(--color-muted);max-width:58ch;line-height:1.55}
.note{font-size:.9rem;color:var(--color-muted);max-width:60ch}


/* r21 (owner, 2026-09-23): on the AI Photobooth page the gamepad before each heading is a camera, drawn with the same stroke */
body.page-service h2::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h5.2l2.2-3.5h9.2l2.2 3.5H28a2.5 2.5 0 0 1 2.5 2.5v10A2.5 2.5 0 0 1 28 20.5H4A2.5 2.5 0 0 1 1.5 18V8A2.5 2.5 0 0 1 4 5.5z'/%3E%3Ccircle cx='16' cy='12.8' r='4.6'/%3E%3Ccircle cx='26' cy='9' r='.6'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5.5h5.2l2.2-3.5h9.2l2.2 3.5H28a2.5 2.5 0 0 1 2.5 2.5v10A2.5 2.5 0 0 1 28 20.5H4A2.5 2.5 0 0 1 1.5 18V8A2.5 2.5 0 0 1 4 5.5z'/%3E%3Ccircle cx='16' cy='12.8' r='4.6'/%3E%3Ccircle cx='26' cy='9' r='.6'/%3E%3C/svg%3E")}
/* buttons: pills, one neon each */
.btn{display:inline-block;white-space:nowrap;padding:.8rem 1.5rem;border-radius:999px;font:inherit;font-weight:700;font-size:.9rem;text-decoration:none;border:1px solid transparent;cursor:pointer;transition:transform .25s ease,box-shadow .25s ease,background-color .15s,color .15s,border-color .15s}
.btn--primary{background:var(--neon-cyan);color:var(--color-primary-contrast);border-color:var(--neon-cyan)}
.btn--primary:hover{transform:scale(1.04);box-shadow:0 0 30px rgba(53,230,230,.45)}
.btn--ghost{border-color:var(--neon-purple);color:var(--color-text);background:transparent}
.btn--ghost:hover{background:var(--neon-purple);color:#fff;box-shadow:0 0 30px rgba(155,92,255,.45)}
/* r21 (owner, 2026-09-23): the WhatsApp button loses the green. A quiet cool purple, the page's own neon at half strength, that lights up to full on hover. */
.btn--wa{background:color-mix(in srgb,var(--neon-purple) 55%,var(--color-surface));border-color:color-mix(in srgb,var(--neon-purple) 70%,var(--color-surface));color:#fff}
.btn--wa:hover{background:var(--neon-purple);border-color:var(--neon-purple);color:#fff;transform:scale(1.04);box-shadow:0 0 30px rgba(155,92,255,.4)}
.btn:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.btn:active{transform:translateY(1px)}

/* header: mono nav under the terminal bar */
.site-header{position:sticky;top:0;z-index:10;background:color-mix(in srgb,var(--color-bg) 90%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--color-border)}
.site-header__inner{display:flex;align-items:center;gap:var(--space-3);height:4.25rem}
.brand img{width:150px;height:auto}
.site-nav{margin-left:auto}
.site-nav ul{display:flex;gap:var(--space-3)}
.site-nav a{text-decoration:none;color:var(--color-text);font-weight:700;font-size:.8rem;letter-spacing:.12em;text-transform:uppercase;padding:.35rem 0;border-bottom:2px solid transparent}
.site-nav a:hover,.site-nav a[aria-current=page]{color:var(--neon-cyan);border-bottom-color:var(--neon-cyan)}
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:2.75rem;height:2.75rem;margin-left:auto;padding:0 .6rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);cursor:pointer;transition:border-color .15s}
.nav-toggle span{display:block;height:2px;border-radius:2px;background:var(--color-text);transition:transform .2s,opacity .2s}
.nav-toggle:hover{border-color:var(--neon-cyan)}
.nav-toggle:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.nav-toggle:active{transform:translateY(1px)}
.nav-toggle.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle.is-open span:nth-child(2){opacity:0}
.nav-toggle.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.contact-wrap{position:relative}
.contact-pill{padding:.55rem 1.1rem;font-size:.78rem}
.contact-pill::after{content:"";display:inline-block;width:.45em;height:.45em;margin-left:.6em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-.15em) rotate(45deg);transition:transform .2s}
.contact-pill.is-open::after{transform:translateY(.1em) rotate(-135deg)}
.contact-pop{position:absolute;right:0;top:calc(100% + .6rem);display:grid;gap:.5rem;min-width:16rem;padding:.75rem;background:var(--surface-2);border:1px solid var(--color-border);border-radius:14px;box-shadow:0 18px 40px rgba(0,0,0,.5),0 0 24px rgba(53,230,230,.12);z-index:12}
.contact-pop .pill{justify-content:center}
@media (max-width:800px){
  .nav-toggle{display:flex}
  .brand img{width:126px}
  .site-nav{display:none;position:absolute;left:0;right:0;top:100%;margin:0;background:var(--color-bg);border-bottom:1px solid var(--color-border);box-shadow:0 18px 40px rgba(0,0,0,.5)}
  .site-nav.is-open{display:block}
  .site-nav ul{flex-direction:column;gap:0;padding:.5rem var(--gutter) 1rem}
  .site-nav a{display:block;padding:.8rem 0;font-size:.95rem;border-bottom:1px solid var(--color-border)}
  .site-nav a:hover,.site-nav a[aria-current=page]{border-bottom-color:var(--neon-cyan)}
  .contact-pop{min-width:min(16rem,calc(100vw - 2*var(--gutter)))}
}

.progress{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:transparent}
.progress__bar{height:100%;width:100%;background:linear-gradient(90deg,var(--neon-pink),var(--neon-purple),var(--neon-cyan));transform:scaleX(0);transform-origin:0 50%}

/* hero: the neon boy on a true-black ground dissolves into 4px pixels as you scroll.
   A 200vh scroller holds a sticky, viewport-high stage: image, canvas, text. Scroll-linked, never scroll-jacked. */
.hero{position:relative;color:var(--color-text);background:var(--color-ink)}
.hero__scroller{height:220vh} /* r20 (owner): 120vh of scroll for the burst (was 180vh), so the tickets arrive sooner after the figure has gone */ /* r11: 180vh of scroll for the pixel burst (was 100vh), so a normal scroll does not skip it */
.hero__stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end}
.hero__bg{position:absolute;top:0;right:0;z-index:0;height:100%;width:auto;max-width:none;transition:none}
.hero__wire{display:none}
@media (min-width:801px){
  /* r20: the wireframe sits under the figure and the copy, faded to nothing where the slogan is and down the right where the figure stands */
  .hero__wire{display:block;position:absolute;top:0;bottom:0;left:-22%;z-index:0;width:122%;max-width:none;height:100%;object-fit:cover;object-position:50% 40%;opacity:.42;pointer-events:none;
    -webkit-mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,.45) 60%,transparent 74%);mask-image:linear-gradient(90deg,#000 42%,rgba(0,0,0,.45) 60%,transparent 74%)}
  /* owner, 2026-09-22: the drawing fades out to the right so it leaves the figure alone, and sits further left so the wheel faces the sign */
}
.hero__px{position:absolute;inset:0;z-index:1;width:100%;height:100%;pointer-events:none}
.hero__stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(180deg,transparent 50%,rgba(10,9,13,.55) 80%,rgba(10,9,13,.92) 100%)}
.hero__inner{position:relative;z-index:3;width:100%;padding-bottom:max(calc(clamp(3rem,7vw,5.5rem) + 2rem),8.25rem)} /* r20: room under the slogan for the scroll mark; the 8.25 rem floor keeps the ring clear of the slogan on 801 to 1000 px windows (Codex) */
.hero__text h1,
.hero__text .h1{text-shadow:0 0 18px rgba(10,9,13,.9),0 2px 6px rgba(10,9,13,.9)}
.hero__text .eyebrow{text-shadow:0 0 12px rgba(10,9,13,.9)}
.hero h1::after,
.hero .h1::after{content:"";display:inline-block;width:.5ch;height:.95em;margin-left:.15ch;vertical-align:text-bottom;background:var(--neon-cyan);animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
/* the H1 cursor blinks in every motion mode at the client's request: the one exception to the reduced-motion rule */
.hero__play{position:absolute;z-index:4;left:var(--gutter);top:1rem;display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:1.5px solid var(--neon-cyan);background:rgba(10,9,13,.85);color:var(--neon-cyan);cursor:pointer;box-shadow:0 0 12px rgba(53,230,230,.35);transition:box-shadow .2s,background-color .15s,color .15s}
.hero__play:hover{background:var(--neon-cyan);color:var(--color-primary-contrast);box-shadow:0 0 22px rgba(53,230,230,.5)}
.hero__play:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.hero__play:active{transform:translateY(1px)}
.hero__play-icon--play{margin-left:2px}
.hero__play-icon--pause,.hero__play.is-on .hero__play-icon--play{display:none}
.hero__play.is-on .hero__play-icon--pause{display:block}
.hero__stage.is-still .hero__px{display:none}
.hero .lead{color:#c9c5d3;max-width:46ch;margin:var(--space-3) 0 var(--space-4)}
/* page hero (photobooth): text only, no scroller */
.hero--page{padding:clamp(4rem,9vw,7rem) 0 clamp(2rem,4vw,3rem);background:radial-gradient(circle at 50% 0%,#1a1420,var(--color-bg) 70%)}
.hero--page .hero__inner{padding-bottom:0}
.hero--page .lead{margin-bottom:var(--space-3)}
@media (max-width:800px){
  .hero__inner{padding-bottom:7.5rem} /* r20: room for the scroll mark under the slogan, above the fold (the header is 4.3 rem) */
  h1,
  .h1{max-width:none}
  .hero__bg{top:0;right:0;height:auto;width:100%;max-width:100%}
  .hero__stage::after{background:linear-gradient(180deg,transparent 30%,rgba(10,9,13,.78) 62%,rgba(10,9,13,.96) 100%)}
}

/* r20 (owner, 2026-09-22): a phone in "desktop site" mode is a tall window about 980 px wide. The figure is sized to the stage's
   height, so in a portrait window it grows past the width and covers the sign. Portrait windows take the phone arrangement instead:
   the figure across the top, the copy below, no sign, no cockpit. */
@media (min-width:801px) and (orientation:portrait){
  .hero__bg{top:50%;transform:translateY(-50%);right:0;height:auto;width:100%;max-width:100%} /* centred: the copy sits over the hoodie under the scrim, the spare height splits above and below */
  .hero__stage::after{background:linear-gradient(180deg,transparent 40%,rgba(10,9,13,.8) 70%,rgba(10,9,13,.96) 100%)}
  .hero .hero__sign,.hero .hero__wire{display:none} /* outranks the laptop rule further down */
  .hero__inner{padding-bottom:8.25rem}
}

/* sections */
.sec{padding:var(--space-5) 0;border-top:1px solid var(--color-border)}
.sec__inner{display:grid;gap:var(--space-3)}
.sec__body{min-width:0}
.sec__label{letter-spacing:.06em;font-size:.8rem;font-weight:600;color:var(--neon-cyan);margin:0 0 var(--space-3)}

/* lists (photobooth formats page style, kept for shared partials) */
.list{display:grid;gap:0 var(--space-4);margin:0}
@media (min-width:640px){.list{grid-template-columns:repeat(2,minmax(0,1fr))}}
.list li{padding:.9rem 0;border-top:1px solid var(--color-border);font-weight:600;font-size:var(--text-lg)}

.setlist{margin:0;border-top:1px solid var(--color-border)}
.setlist li{display:flex;align-items:baseline;gap:var(--space-2);padding:.55em 0;border-bottom:1px solid var(--color-border);font-family:var(--font-heading);font-weight:700;font-size:clamp(1.3rem,.9rem + 1.8vw,2.4rem);line-height:1.2}
.setlist__n{font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--neon-pink);flex:0 0 2.2rem}
.setlist__t{transition:color .15s}
.setlist li:hover .setlist__t{color:var(--neon-cyan)}

/* how it works: glowing cards on a purple-tinted pool of light */
.sec--dark{background:radial-gradient(circle at 50% 20%,#1a1420,var(--color-bg) 75%);color:var(--color-text);border-top:1px solid var(--color-border)}
.sec--dark h2{color:var(--color-text)}
.steps{display:grid;gap:var(--space-2)}
@media (min-width:680px){.steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
.step{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.step:hover{transform:translateY(-4px);box-shadow:0 0 24px rgba(53,230,230,.15);border-color:var(--neon-cyan)}
.step__n{display:block;font-size:.75rem;font-weight:700;letter-spacing:.08em;color:var(--neon-pink);margin-bottom:var(--space-3)}
.step h3{color:var(--color-text);font-size:var(--text-lg);max-width:none}
.step p{color:var(--color-muted);margin:0;font-size:1rem}

/* games: same conveyor, cards now rounded and neon on hover */
#games{overflow-x:clip}
.reel{--reel-gap:var(--space-3);--reel-n:3;margin-top:var(--space-4);min-width:0;max-width:100%}
.reel__track{display:flex;gap:var(--reel-gap);overflow-x:auto;scrollbar-width:none;padding:var(--space-2) 0 var(--space-3);list-style:none;margin:0;border-top:1px solid var(--color-border)}
.reel__track::-webkit-scrollbar{display:none}
/* r14b: the keyboard focus mark is a short cyan rule on the track's top edge, not a box round the whole row. */
.reel__track:focus-visible{outline:0;border-top-color:var(--neon-cyan);box-shadow:0 -1px 0 var(--neon-cyan)}
.reel__card{flex:0 0 calc((100% - (var(--reel-n) - 1)*var(--reel-gap))/var(--reel-n));display:flex;flex-direction:column;background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;padding:0 1.1rem 1rem;font-size:1rem;line-height:1.5;min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.reel__card[hidden]{display:none}
.reel__card:hover{transform:translateY(-4px);border-color:var(--neon-cyan);box-shadow:0 0 24px rgba(53,230,230,.15)}
.reel__img{display:block;width:calc(100% + 2.2rem);max-width:none;margin:0 -1.1rem .8rem;aspect-ratio:16/9;object-fit:cover;border-bottom:1px solid var(--color-border);background:#0e0c12}
.reel__img--none{background:linear-gradient(135deg,#0e0c12,#1a1420)}
.reel__card strong{display:block;font-family:var(--font-heading);font-weight:700;font-size:.95rem;margin-bottom:.4rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__card p{margin:0 0 .6rem;display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:calc(3 * 1.5em)}
.reel__card small{display:block;color:var(--color-muted);font-size:.75rem;margin-top:auto;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.reel__img[data-open]{cursor:pointer}
.reel__view{align-self:flex-start;margin-top:.8rem;padding:.45rem 1rem;font:inherit;font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border-radius:999px;border:1px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);cursor:pointer;transition:background-color .15s,color .15s,box-shadow .25s}
.reel__view:hover{background:var(--neon-cyan);color:var(--color-primary-contrast);box-shadow:0 0 18px rgba(53,230,230,.45)}
.reel__view:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.reel__view:active{transform:translateY(1px)}
@media (max-width:1000px){.reel{--reel-n:2}}
@media (max-width:640px){.reel{--reel-n:1}}

/* picker: pill tags, active goes neon */
.picker{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:var(--space-3)}
.picker__btn{font:inherit;font-size:.85rem;font-weight:700;letter-spacing:.04em;padding:.65rem 1.2rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-muted);cursor:pointer;transition:all .25s ease}
.picker__btn:hover{border-color:var(--neon-cyan);color:var(--color-text)}
.picker__btn.is-on{background:var(--neon-cyan);border-color:var(--neon-cyan);color:var(--color-primary-contrast);box-shadow:0 0 22px rgba(53,230,230,.5);transform:scale(1.06)}

.picker__btn:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}

/* photobooth figures (shared partial) */
.figures{display:grid;gap:var(--space-3);margin-bottom:var(--space-4)}
@media (min-width:640px){.figures{grid-template-columns:repeat(3,minmax(0,1fr))}}
.figures li{border-top:2px solid var(--neon-pink);padding-top:var(--space-2)}
.figures strong{display:block;font-family:var(--font-heading);font-weight:800;font-size:clamp(2.6rem,2rem + 3vw,4.5rem);line-height:1;color:var(--neon-cyan)}
.figures span{display:block;margin-top:.5rem;color:var(--color-muted);font-weight:600}

/* photobooth: 3x2 neon-framed gallery; a light bar sweeps left to right and turns the original into five styles */
.booth{margin-top:var(--space-2)}
.booth__grid{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(.8rem,1.8vw,1.6rem)}
.booth__card{position:relative;margin:0;aspect-ratio:1;border-radius:clamp(12px,1.8vw,24px);overflow:hidden;background:var(--color-surface);border:3px solid var(--nf);box-shadow:0 0 8px var(--nf),0 0 26px var(--nf-soft),inset 0 0 18px var(--nf-dim)}
.booth__card--pink{--nf:#ff2d95;--nf-soft:rgba(255,45,149,.45);--nf-dim:rgba(255,45,149,.16)}
.booth__card--cyan{--nf:#35e6e6;--nf-soft:rgba(53,230,230,.45);--nf-dim:rgba(53,230,230,.16)}
.booth__before,.booth__after{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 22%;margin:0}
.booth__num{position:absolute;top:.7rem;left:.9rem;z-index:2;font-family:var(--font-body);font-size:.75rem;letter-spacing:.06em;color:#cfccd6;text-shadow:0 0 8px #000,0 0 16px #000}
.booth__label{position:absolute;left:0;right:0;bottom:.6rem;z-index:2;text-align:center;font-family:var(--font-body);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:#e6e3ec;text-shadow:0 0 8px #000,0 0 16px #000}
.booth__lead{margin-top:var(--space-3)}
/* the wipe: each styled shot is revealed as the bar passes its column, holds, then fades back to the original */
.booth__after{clip-path:inset(0 100% 0 0);animation:booth-wipe 9s linear infinite;animation-delay:var(--bd,0s)}
.booth__card:nth-child(3n+2){--bd:.84s}
.booth__card:nth-child(3n){--bd:1.68s}
@keyframes booth-wipe{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  9%{clip-path:inset(0 0 0 0)}
  78%{opacity:1;clip-path:inset(0 0 0 0)}
  88%{opacity:0;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 100% 0 0)}
}
.booth__sweep{position:absolute;top:-2%;bottom:-2%;left:0;width:3px;z-index:3;border-radius:3px;background:linear-gradient(180deg,#35e6e6,#ff2d95);box-shadow:0 0 10px #ff2d95,0 0 24px rgba(53,230,230,.7);opacity:0;animation:booth-sweep 9s linear infinite;pointer-events:none}
@keyframes booth-sweep{
  0%{left:0;opacity:1}
  28%{left:100%;opacity:1}
  30%,100%{left:100%;opacity:0}
}
/* two columns (phones): the bar takes half its crossing per card, so the reveal lasts 13.5% of the loop, not 9% (0.15.6) */
@keyframes booth-wipe-2{
  0%{clip-path:inset(0 100% 0 0);opacity:1}
  13.5%{clip-path:inset(0 0 0 0)}
  78%{opacity:1;clip-path:inset(0 0 0 0)}
  88%{opacity:0;clip-path:inset(0 0 0 0)}
  100%{opacity:0;clip-path:inset(0 100% 0 0)}
}
@media (max-width:700px){
  .booth__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .booth__card:nth-child(odd){--bd:0s}
  .booth__card:nth-child(even){--bd:1.26s}
  .booth__after{animation-name:booth-wipe-2}
}
/* play button: hidden for people who already get the loop; reduced motion shows it and plays one wipe on demand */
.booth__play{position:absolute;right:.9rem;bottom:.9rem;z-index:4;display:none;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:2px solid #ff2d95;background:rgba(10,9,13,.85);color:var(--color-text);cursor:pointer;box-shadow:0 0 8px rgba(255,45,149,.7),0 0 22px rgba(255,45,149,.35);transition:opacity .2s,box-shadow .15s}
.booth__play svg{margin-left:2px}
.booth__play:hover{box-shadow:0 0 10px #ff2d95,0 0 30px rgba(255,45,149,.55)}
.booth__play:focus-visible{outline:2px solid #35e6e6;outline-offset:3px}
@keyframes booth-wipe-once{0%{clip-path:inset(0 100% 0 0)}27%,100%{clip-path:inset(0 0 0 0)}}
@keyframes booth-sweep-once{0%{left:0;opacity:1}84%{left:100%;opacity:1}86%,100%{left:100%;opacity:0}}
@keyframes booth-wipe-once-2{0%{clip-path:inset(0 100% 0 0)}40.5%,100%{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){
  .booth__after{animation:none;clip-path:none}
  .booth__sweep{display:none}
  .booth__play{display:grid}
  .booth.is-playing .booth__after{clip-path:inset(0 100% 0 0);animation:booth-wipe-once 3s linear both;animation-delay:var(--bd,0s)}
  .booth.is-playing .booth__sweep{display:block;opacity:0;animation:booth-sweep-once 3s linear both}
  .booth.is-playing .booth__play{opacity:0;pointer-events:none}
}
@media (prefers-reduced-motion:reduce) and (max-width:700px){
  .booth.is-playing .booth__after{animation-name:booth-wipe-once-2}
}

/* why: one statement */
.statement{font-family:var(--font-heading);font-weight:600;font-size:clamp(1.15rem,.95rem + 1vw,1.6rem);line-height:1.45;max-width:34ch;margin:0}
.statement em{font-style:normal;color:var(--neon-cyan)}

/* quotes: rounded cards, pink arrow cite */
.carousel{position:relative;min-width:0;max-width:100%}
.carousel__track{display:flex;gap:var(--space-3);overflow-x:auto;scroll-snap-type:none;scrollbar-width:none;padding:var(--space-2) 0}
.carousel__track::-webkit-scrollbar{display:none}
.carousel__track:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:4px}
.review{flex:0 0 min(100%,30rem);padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius)}
.review blockquote{margin:0}
.review blockquote p{font-size:1.05rem;line-height:1.55;margin-bottom:var(--space-2)}
cite{font-style:normal;font-weight:600;color:var(--color-muted);font-size:.85rem}
cite::before{content:"→ ";color:var(--neon-pink);font-weight:700}
/* r11: cards keep their own height; the reviews are ordered so lengths climb and fall gently round the loop (see r11.11tydata.json) */
#quotes{align-items:flex-start}
.review__org{display:block;font-weight:400;font-size:.8rem;margin-top:2px;padding-left:1.35em}
.carousel__nav{display:flex;gap:var(--space-1);margin-top:var(--space-2)}
.carousel__btn{font:inherit;font-size:1rem;width:2.75rem;height:2.75rem;border-radius:50%;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:all .25s ease}
.carousel__btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 18px rgba(53,230,230,.25)}
.carousel__btn:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.carousel__btn:active{transform:translateY(1px)}

/* contact */
.sec--contact{background:radial-gradient(circle at 50% 0%,#1a1420,var(--color-bg) 70%)}
.contact-form{display:grid;gap:var(--space-2);margin-top:var(--space-3)}
.contact-form label{display:grid;gap:.35rem;font-weight:600;font-size:.9rem}
.contact-form input,.contact-form textarea{font:inherit;padding:.7rem .9rem;border:1px solid var(--color-border);border-radius:8px;background:var(--color-surface);color:var(--color-text)}
.contact-form input:focus,.contact-form textarea:focus{outline:2px solid var(--neon-cyan);outline-offset:0;border-color:var(--neon-cyan)}
.contact-form button{justify-self:start;margin-top:var(--space-1)}
/* pills: one style for every contact action. WhatsApp keeps its green, email is cyan; same shape and size. */
.pills{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--space-2)}
.pill{display:inline-flex;align-items:center;gap:.55em;padding:.7rem 1.35rem;border-radius:999px;border:1.5px solid var(--neon-cyan);background:rgba(53,230,230,.06);color:var(--neon-cyan);font:inherit;font-size:.85rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;cursor:pointer;transition:background-color .15s,color .15s,box-shadow .25s,transform .25s}
.pill::before{content:"";width:1em;height:1em;flex:none;background:currentColor;-webkit-mask:var(--pill-icon) center/contain no-repeat;mask:var(--pill-icon) center/contain no-repeat}
.pill--wa{--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M16 3C9 3 3.3 8.7 3.3 15.7c0 2.5.7 4.9 2.1 7L3 29l6.5-2.2c2 1.1 4.2 1.6 6.5 1.6 7 0 12.7-5.7 12.7-12.7S23 3 16 3zm0 23.2c-2 0-4-.5-5.7-1.6l-.4-.2-3.9 1.3 1.3-3.7-.3-.4a10.4 10.4 0 0 1-1.7-5.9C5.3 9.9 10.1 5.1 16 5.1s10.7 4.8 10.7 10.6S21.9 26.2 16 26.2zm5.9-7.9c-.3-.2-1.9-.9-2.2-1s-.5-.2-.7.2-.8 1-1 1.2-.4.2-.7.1a8.7 8.7 0 0 1-4.3-3.8c-.3-.6.3-.5.9-1.7.1-.2 0-.4 0-.6l-1-2.3c-.3-.6-.5-.5-.7-.5h-.6c-.2 0-.6.1-.9.4s-1.2 1.1-1.2 2.8 1.2 3.2 1.4 3.5c.2.2 2.4 3.7 5.9 5.2 2.2.9 3 1 4.1.8.7-.1 1.9-.8 2.2-1.6.3-.8.3-1.4.2-1.6-.1-.1-.3-.2-.6-.4z'/%3E%3C/svg%3E");border-color:var(--color-accent);color:var(--color-accent);background:rgba(37,211,102,.08)}
.pill--mail{--pill-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2 5h20v14H2zM4 7v.6l8 5 8-5V7l-8 5z'/%3E%3C/svg%3E")}
.pill:hover{transform:scale(1.04)}
.pill--wa:hover{background:var(--color-accent);color:#0b1a10;box-shadow:0 0 26px rgba(37,211,102,.45)}
.pill--mail:hover,.contact-pill:hover{background:var(--neon-cyan);color:var(--color-primary-contrast);box-shadow:0 0 26px rgba(53,230,230,.45)}
.pill:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.pill:active{transform:translateY(1px)}
.pills--lg .pill{padding:.9rem 1.7rem;font-size:.95rem}
@media (max-width:480px){.pills .pill{white-space:normal;word-break:break-all}}
.sec--contact .lead{max-width:48ch}
address{font-style:normal;color:var(--color-muted);line-height:1.6}

/* footer */
.site-footer{border-top:1px solid var(--color-border);padding:var(--space-4) 0;color:var(--color-muted);font-size:.8rem}
.site-footer__inner{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-4);align-items:center}
.site-footer__links{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);margin-left:auto}
.site-footer__links a{color:var(--color-muted);text-decoration:none;letter-spacing:.08em;text-transform:uppercase;font-size:.72rem}
.site-footer__links a[href^=mailto]{text-transform:none;letter-spacing:0}
.site-footer__links a:hover{color:var(--neon-cyan)}
.copyright{margin:0}
.copyright::before{content:"> ";color:var(--neon-purple)}

/* whatsapp float: round, glowing */
.wa-float{position:fixed;right:var(--gutter);bottom:1.25rem;width:52px;height:52px;border-radius:50%;background:var(--color-accent);color:#0b1a10;display:grid;place-items:center;z-index:20;box-shadow:0 0 18px rgba(37,211,102,.45);transition:transform .25s ease,box-shadow .25s ease}
.wa-float:hover{transform:scale(1.06);box-shadow:0 0 28px rgba(37,211,102,.65)}
.wa-float:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.wa-float:active{transform:translateY(1px)}
@media (max-width:800px){.wa-float{bottom:1rem}}

/* motion: the hero settles */
@media (prefers-reduced-motion:no-preference){
  .hero__text{animation:rise .7s cubic-bezier(.2,.7,.2,1) both}
  .hero__facts{animation:rise .7s .15s cubic-bezier(.2,.7,.2,1) both}
  @keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}
@media (prefers-reduced-motion:reduce){
  .btn,.pill,.step,.reel__card,.wa-float,.nav-toggle span,.picker__btn{transition:none}
}

/* r4: one cinematic visual, selected by a compact airport split-flap board */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.imagination{overflow:hidden;background:#0d0c10}
.imagination__head{display:grid;gap:.45rem;margin-bottom:clamp(1.5rem,3vw,2.5rem)}
.imagination__eyebrow{margin:0;color:var(--neon-cyan);font-size:.78rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.imagination h2{max-width:13ch;margin:0;font-size:clamp(2.55rem,5.2vw,4.9rem);line-height:.98;letter-spacing:-.055em}
.imagination h2::before{display:none}
.imagination__stage{position:relative;isolation:isolate;min-height:clamp(31rem,57vw,43rem)}
.imagination__visuals{position:absolute;inset:0;overflow:hidden;border:1px solid #36303d;border-radius:18px;background:#151219;box-shadow:0 28px 70px rgba(0,0,0,.34)}
.imagination__visuals::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,transparent 30%,rgba(8,7,10,.16) 56%,rgba(8,7,10,.72) 100%);pointer-events:none}
.imagination__visual{position:absolute;inset:0;margin:0;opacity:0;transform:scale(1.015);background-position:center;background-size:cover;transition:opacity .65s ease,transform 1.2s ease;pointer-events:none}
.imagination__visual:nth-child(1){background-image:url('../assets/img-r4/vr-gallery.webp')}
.imagination__visual:nth-child(2){background-image:url('../assets/img-r4/team-bonding.webp')}
.imagination__visual:nth-child(3){background-image:url('../assets/img-r4/vr-travel.webp')}
.imagination__visual:nth-child(4){background-image:url('../assets/img-r4/gender-reveal.webp')}
.imagination__visual:nth-child(5){background-image:url('../assets/img-r4/wedding-photobooth.webp')}
.imagination__visual:nth-child(6){background-image:url('../assets/img-r4/race-photobooth.webp')}
.imagination__visual.is-active{opacity:1;transform:scale(1);z-index:1}
.imagination__visual img{width:100%;height:100%;object-fit:cover}

.flightboard{position:absolute;z-index:3;left:clamp(1rem,3vw,2.25rem);bottom:clamp(1rem,3vw,2.25rem);width:min(45rem,calc(100% - 2rem));padding:1.25rem;background:#0e0d11;border:1px solid #514a57;border-radius:10px;box-shadow:0 22px 52px rgba(0,0,0,.62);color:#e9e4d6}
.flightboard__type,.flightboard__title{display:grid;grid-template-columns:repeat(13,minmax(0,1fr));gap:.16rem;width:100%;max-width:none;margin:0;text-transform:uppercase}
.flightboard__type{--flap-h:1.75rem;font-size:.78rem;line-height:1;margin-bottom:.62rem;color:var(--neon-cyan)}
.flightboard__title{--flap-h:3.55rem;font-size:clamp(1.85rem,3vw,2.45rem);line-height:1;letter-spacing:.01em}
.flightboard__char{position:relative;display:block;min-width:0;height:var(--flap-h);perspective:340px;transform-style:preserve-3d}
.flightboard__face{position:absolute;left:0;right:0;height:50%;overflow:hidden;border:1px solid #3a343f;background:#242128;box-shadow:inset 0 1px rgba(255,255,255,.055),0 1px 1px rgba(0,0,0,.72);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.flightboard__face>span{position:absolute;left:0;right:0;display:grid;place-items:center;height:var(--flap-h);line-height:var(--flap-h)}
.flightboard__face--top,.flightboard__face--flip-top{top:0;border-radius:3px 3px 0 0;border-bottom-color:#0b0a0d}
.flightboard__face--bottom,.flightboard__face--flip-bottom{bottom:0;border-radius:0 0 3px 3px;border-top-color:#0b0a0d;background:#1d1a20}
.flightboard__face--top>span,.flightboard__face--flip-top>span{top:0}
.flightboard__face--bottom>span,.flightboard__face--flip-bottom>span{top:0;transform:translateY(-50%)}
.flightboard__face--whole{inset:0;z-index:5;width:100%;height:100%;overflow:visible;border:0;background:transparent;box-shadow:none}
.flightboard__face--whole>span{inset:0;width:100%;height:100%;line-height:var(--flap-h)}
.flightboard__face--flip-top{z-index:3;opacity:0;transform-origin:bottom center}
.flightboard__face--flip-bottom{z-index:4;transform-origin:top center;transform:rotateX(-90deg)}
.flightboard__char:not(.is-dropping):not(.is-rising) .flightboard__face--top>span,.flightboard__char:not(.is-dropping):not(.is-rising) .flightboard__face--bottom>span{opacity:0}
.flightboard__char.is-dropping .flightboard__face--whole,.flightboard__char.is-rising .flightboard__face--whole{opacity:0}
.flightboard__char.is-dropping .flightboard__face--flip-top{opacity:1;animation:flap-top-drop 135ms cubic-bezier(.55,.06,.68,.19) forwards}
.flightboard__char.is-rising .flightboard__face--flip-bottom{animation:flap-bottom-rise 160ms cubic-bezier(.22,.61,.36,1) forwards}
.flightboard__strap{margin:.85rem 0 .95rem;color:#c6c1ca;font-size:clamp(.84rem,1.5vw,.95rem)}
.flightboard__controls{display:flex;align-items:center;gap:.75rem}
.flightboard__arrow{display:grid;place-items:center;width:2.3rem;height:2.3rem;padding:0;border:1px solid #45404a;border-radius:50%;background:#18161c;color:#ece7ef;font:inherit;cursor:pointer;transition:border-color .15s,color .15s,background-color .15s}
.flightboard__arrow:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);background:#201d25}
.flightboard__arrow:focus-visible,.flightboard__dot:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.flightboard__arrow:active{transform:translateY(1px)}
.flightboard__dots{display:flex;align-items:center;justify-content:center;gap:.52rem;flex:1}
.flightboard__dot{width:8px;height:8px;padding:0;border:0;border-radius:50%;background:#5e5864;cursor:pointer;transition:width .2s,background-color .2s}
.flightboard__dot:hover{background:#bcb6c1}
.flightboard__dot.is-active{width:24px;border-radius:999px;background:var(--neon-pink)}
.flightboard__play{display:none;align-items:center;gap:.42rem;white-space:nowrap;padding:.58rem .8rem;border:1px solid var(--neon-pink);border-radius:999px;background:#24151f;color:#f4eaf0;font:inherit;font-size:.7rem;font-weight:700;cursor:pointer}
.flightboard__play:hover{background:#35202e;box-shadow:0 0 18px rgba(255,45,149,.25)}
.flightboard__play:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.flightboard__play:active{transform:translateY(1px)}
.flightboard__play:disabled{opacity:.65;cursor:wait}

@keyframes flap-top-drop{from{transform:rotateX(0)}to{transform:rotateX(90deg)}}
@keyframes flap-bottom-rise{from{transform:rotateX(-90deg)}to{transform:rotateX(0)}}
@keyframes flight-image-in{from{opacity:.25;transform:scale(1.025)}to{opacity:1;transform:scale(1)}}
.imagination__stage.is-user-flipping .imagination__visual.is-active{animation:flight-image-in .65s ease both}
@media (max-width:640px){
  .imagination__head{margin-bottom:1.25rem}
  .imagination h2{font-size:clamp(2.45rem,12vw,3.5rem);max-width:10ch}
  .imagination__stage{min-height:0;padding-bottom:0}
  .imagination__visuals{position:relative;inset:auto;aspect-ratio:4/3;border-radius:12px}
  .imagination__visuals::after{background:linear-gradient(180deg,transparent 46%,rgba(8,7,10,.65) 100%)}
  .imagination__visual img{object-position:center}
  .flightboard{position:relative;left:auto;bottom:auto;width:auto;margin:-2.1rem .45rem 0;padding:.9rem}
  .flightboard__type,.flightboard__title{gap:.1rem}
  .flightboard__type{--flap-h:1.5rem;font-size:.58rem}
  .flightboard__title{--flap-h:2.35rem;font-size:clamp(1.05rem,5.1vw,1.3rem)}
  .flightboard__strap{min-height:2.7em;line-height:1.4}
}
@media (prefers-reduced-motion:reduce){
  .imagination__visual,.flightboard__char,.flightboard__dot{transition:none}
  .flightboard__play{display:inline-flex}
}

/* games details dialog */
.gamebox{padding:0;border:1px solid var(--color-border);border-radius:16px;background:var(--color-surface);color:var(--color-text);max-width:min(40rem,calc(100vw - 2rem));width:100%;max-height:calc(100vh - 2rem);max-height:calc(100dvh - 2rem);overflow:auto;box-shadow:0 0 40px rgba(53,230,230,.18),0 30px 80px rgba(0,0,0,.7)}
.gamebox::backdrop{background:rgba(6,5,8,.78);backdrop-filter:blur(4px)}
.gamebox__inner{position:relative}
.gamebox__img{width:100%;aspect-ratio:2/1;max-height:14rem;object-fit:cover;border-bottom:1px solid var(--color-border);border-radius:16px 16px 0 0}
.gamebox__img[hidden]{display:none}
.gamebox__body{padding:var(--space-3)}
.gamebox__mode{margin:0 0 .4rem;font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--neon-pink)}
.gamebox h3{font-size:var(--text-xl);margin-bottom:var(--space-2)}
.gamebox__meta{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem var(--space-3);margin:var(--space-2) 0 var(--space-3);padding-top:var(--space-2);border-top:1px solid var(--color-border)}
.gamebox__meta dt{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
.gamebox__meta dd{margin:.2rem 0 0;font-size:.95rem}
.gamebox__close{position:absolute;top:.6rem;right:.6rem;z-index:2;width:2.5rem;height:2.5rem;border-radius:50%;border:1px solid var(--color-border);background:rgba(10,9,13,.85);color:var(--color-text);font:inherit;font-size:1.4rem;line-height:1;cursor:pointer;transition:border-color .15s,color .15s}
.gamebox__close:hover{border-color:var(--neon-cyan);color:var(--neon-cyan)}
.gamebox__close:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.gamebox__close:active{transform:translateY(1px)}
.gamebox .pills{margin-top:0}

/* photobooth page: shared partials (features, formats, CTA band) in the r5 language */
.sec--booth{padding-top:var(--space-3)}
.features,.formats{padding:var(--space-5) 0;border-top:1px solid var(--color-border)}
.pill-grid{display:grid;gap:var(--space-2)}
@media (min-width:680px){.pill-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.pill-grid li{padding:var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-surface);min-width:0;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease}
.pill-grid li:hover{transform:translateY(-4px);box-shadow:0 0 24px rgba(53,230,230,.15);border-color:var(--neon-cyan)}
.pill-grid h3{font-size:var(--text-lg);max-width:none}
.pill-grid p{color:var(--color-muted);margin:0;font-size:1rem}
.tags{display:flex;flex-wrap:wrap;gap:.6rem}
.tags li{font-size:.85rem;font-weight:600;padding:.5rem 1rem;border-radius:999px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-text)}
.tags--lg li{font-size:.95rem;padding:.65rem 1.2rem}
.cta-band{padding:var(--space-5) 0;border-top:1px solid var(--color-border);background:radial-gradient(circle at 50% 0%,#1a1420,var(--color-bg) 70%)}
.cta-band__inner{display:grid;gap:var(--space-1);justify-items:start}
.cta-band p{color:var(--color-muted);max-width:52ch}

/* custom games: heading left, statement and pills right, so the copy uses the row */
.custom{display:grid;gap:var(--space-3)}
.custom h2{margin-bottom:0}
.custom .statement{max-width:52ch;font-size:clamp(1.1rem,.95rem + .7vw,1.4rem)}
@media (min-width:900px){.custom{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr);gap:var(--space-4) var(--space-5);align-items:start}}

/* hero copy zooms up and out with the dissolve (set from the hero script) */
.hero__copy{transform-origin:0 100%;will-change:transform,opacity}

/* header contact: two icon pills replace the CONTACT dropdown; no floating button */
.contact-icons{display:flex;gap:.5rem;margin-left:0}
.pill--icon{width:2.75rem;height:2.75rem;padding:0;justify-content:center;border-radius:50%}
.pill--icon::before{width:1.25em;height:1.25em}
@media (max-width:800px){.contact-icons{margin-left:0}.pill--icon{width:2.5rem;height:2.5rem}}


/* ===== r6b Fields: the ground changes texture per section, the colour never does ===== */

/* Possibilities: sparse star drift on a canvas behind the content (footer script). */
#imagination{position:relative}
#imagination .field{position:absolute;inset:0;z-index:0;pointer-events:none}
#imagination .container{position:relative;z-index:1}

/* Games: a pixel grid that brightens in a ripple where the pointer is. */
#games{position:relative;overflow:hidden}
#games::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;
  background:
    linear-gradient(90deg,rgba(53,230,230,.05) 1px,transparent 1px) 0 0/24px 24px,
    linear-gradient(0deg,rgba(53,230,230,.05) 1px,transparent 1px) 0 0/24px 24px}
#games::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(circle at var(--mx,50%) var(--my,30%),rgba(53,230,230,.55),rgba(155,92,255,.25) 22%,transparent 46%);
  -webkit-mask:linear-gradient(90deg,#000 1px,transparent 1px) 0 0/24px 24px,linear-gradient(0deg,#000 1px,transparent 1px) 0 0/24px 24px;
  mask:linear-gradient(90deg,#000 1px,transparent 1px) 0 0/24px 24px,linear-gradient(0deg,#000 1px,transparent 1px) 0 0/24px 24px;
  transition:opacity .3s;opacity:0}
#games.is-lit::after{opacity:1}
#games>.container{position:relative;z-index:1}

/* Custom games: scanlines at double density and a radar sweep once every twenty seconds. */
#custom{position:relative;overflow:hidden;background:#0b0a10;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.03) 0 1px,transparent 1px 2px)}
#custom::before{content:"";position:absolute;right:-10vw;top:50%;width:min(70vh,60vw);aspect-ratio:1;margin-top:calc(min(70vh,60vw)/-2);border-radius:50%;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(53,230,230,.5) 0deg,rgba(53,230,230,.12) 50deg,transparent 90deg);
  border:1px solid rgba(53,230,230,.14);animation:radar 6s linear infinite;opacity:.9}
#custom::after{content:"";position:absolute;right:-10vw;top:50%;width:min(70vh,60vw);aspect-ratio:1;margin-top:calc(min(70vh,60vw)/-2);border-radius:50%;pointer-events:none;
  background:repeating-radial-gradient(circle,transparent 0 22%,rgba(53,230,230,.14) 22% calc(22% + 1px))}
@keyframes radar{to{transform:rotate(360deg)}}
#custom .container{position:relative;z-index:1}

/* Reviews: nothing. Pure black, no scanlines, the calm beat. */
#reviews{background:#000;box-shadow:0 0 0 100vmax #000;clip-path:inset(0);position:relative}
#reviews .review{background:#0a090d}

/* Section rules in the section's field colour instead of one grey border. */
#imagination{border-top-color:rgba(53,230,230,.35)}
#games{border-top-color:rgba(155,92,255,.35)}
#custom{border-top-color:rgba(53,230,230,.35)}
#reviews{border-top-color:#1c1a22}

@media (prefers-reduced-motion:reduce){
  #custom::before{animation:none}
  #games::after{transition:none}
}

/* flightboard panel translucent (owner request: 70%) */
.flightboard{background:rgba(14,13,17,.7);backdrop-filter:blur(6px);border-color:rgba(81,74,87,.7)}
.flightboard__face{background:rgba(36,33,40,.7)}
.flightboard__face--bottom,.flightboard__face--flip-bottom{background:rgba(29,26,32,.7)}
.flightboard__arrow{background:rgba(24,22,28,.7)}

/* Reviews: each card ringed in a thin line of chase lights, pink and cyan alternating, dim, slow, brighter on hover */
#reviews .review{position:relative;padding:calc(var(--space-3) + 6px)}
#reviews .review::before{content:"";position:absolute;inset:0;border-radius:var(--radius);padding:5px;pointer-events:none;
  background:
    radial-gradient(circle,var(--rc) 1.2px,transparent 1.8px) 0 0/14px 5px repeat-x,
    radial-gradient(circle,var(--rc) 1.2px,transparent 1.8px) 0 100%/14px 5px repeat-x,
    radial-gradient(circle,var(--rc) 1.2px,transparent 1.8px) 0 0/5px 14px repeat-y,
    radial-gradient(circle,var(--rc) 1.2px,transparent 1.8px) 100% 0/5px 14px repeat-y;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;
  opacity:.38;animation:review-marquee 2.4s steps(2) infinite;transition:opacity .3s}
#reviews .review:nth-child(odd){--rc:var(--neon-pink)}
#reviews .review:nth-child(even){--rc:var(--neon-cyan)}
#reviews .review:hover::before{opacity:.75}
@keyframes review-marquee{to{background-position:14px 0,-14px 100%,0 -14px,100% 14px}}
@media (prefers-reduced-motion:reduce){#reviews .review::before{animation:none}}

body.page-clients{background-image:none}
:is(body.page-clients,.keywall) .clients-intro{display:block;padding:2.5rem 0 1.75rem}
:is(body.page-clients,.keywall) .clients-intro .eyebrow{margin-bottom:.6rem}
:is(body.page-clients,.keywall) .clients-intro h1,
:is(body.page-clients,.keywall) .clients-intro .h1{font-size:3rem;line-height:1.2;max-width:23ch;margin-bottom:1rem}
:is(body.page-clients,.keywall) .clients-lead{max-width:60ch;font-size:17px;line-height:1.5;color:var(--color-muted);margin:0}
@media(max-width:800px){:is(body.page-clients,.keywall) .clients-intro{grid-template-columns:1fr;gap:0;padding-top:2rem;padding-bottom:0}:is(body.page-clients,.keywall) .clients-intro h1,:is(body.page-clients,.keywall) .clients-intro .h1{font-size:32px;max-width:22ch}}
@property --lit{syntax:"<number>";inherits:true;initial-value:0}
/* r8 Lit panel: equal square keys. At rest identical to r7d. Under the lamp the key face goes neon (cyan core, purple, pink fringe, centred on the lamp), the mark swaps from mono to full colour, the key lifts. All driven by --lit, eased in the script; nothing moves without the pointer. */
:is(body.page-clients,.keywall) .panel{--gap:10px;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:var(--gap);list-style:none;margin:1rem 0 3rem;padding:var(--gap);background:#07060a;border:1px solid var(--color-border);border-radius:16px}
:is(body.page-clients,.keywall) .panel--events{grid-template-columns:repeat(5,minmax(0,1fr));margin-bottom:5rem}
/* r16b (owner, 2026-09-21): "Catch us at" is a second-level heading like "// What clients say", not a small caps label */
:is(body.page-clients,.keywall) .panel__title{margin:var(--space-5,3rem) 0 var(--space-3,1.5rem)}
:is(body.page-clients,.keywall) .key{--lit:0;--mx:50%;--my:40%;position:relative;isolation:isolate;overflow:hidden;aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;padding:1rem .75rem .8rem;border-radius:10px;
  background:linear-gradient(180deg,var(--surface-2),var(--color-surface));
  border:1px solid var(--color-border);border-color:color-mix(in srgb,var(--neon-cyan) calc(var(--lit)*85%),var(--color-border));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),inset 0 -3px 0 rgba(0,0,0,.45),0 calc(var(--lit)*10px) calc(var(--lit)*36px) rgba(53,230,230,calc(var(--lit)*.35)),0 0 calc(var(--lit)*70px) rgba(255,45,149,calc(var(--lit)*.18));
  transform:translateY(calc(var(--lit)*-3px)) scale(calc(1 + var(--lit)*.02));will-change:transform}
/* the neon face */
:is(body.page-clients,.keywall) .key::before{content:"";position:absolute;inset:-30%;z-index:-1;pointer-events:none;opacity:var(--lit);
  background:radial-gradient(circle at var(--mx) var(--my),rgba(53,230,230,.62) 0,rgba(155,92,255,.50) 34%,rgba(255,45,149,.40) 58%,rgba(255,45,149,.22) 80%)}
/* corner LED: always on, brighter under the lamp */
:is(body.page-clients,.keywall) .key::after{content:"";position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:var(--neon-cyan);opacity:calc(.85 + var(--lit)*.15);box-shadow:0 0 8px var(--neon-cyan)}
:is(body.page-clients,.keywall) .key:nth-child(3n)::after{background:var(--neon-pink);box-shadow:0 0 8px var(--neon-pink)}
/* mark: mono at rest, full colour under the lamp */
:is(body.page-clients,.keywall) .key__mark{position:relative;display:flex;align-items:center;justify-content:center;width:80%;height:50%}
:is(body.page-clients,.keywall) .key__mark img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;object-fit:contain;z-index:1;transform:scale(calc(1 + var(--lit)*.14));transform-origin:center}
:is(body.page-clients,.keywall) .key__mono{opacity:.92;opacity:calc(.92 - max(0, var(--lit) - .45)*1.7)}
:is(body.page-clients,.keywall) .key__color{opacity:0;opacity:min(1, var(--lit)*1.6);filter:drop-shadow(0 0 3px rgba(255,255,255,.9)) drop-shadow(0 0 10px rgba(255,255,255,.55)) drop-shadow(0 0 26px rgba(255,255,255,.35))}
:is(body.page-clients,.keywall) .key__name{font-size:13px;line-height:1.25;letter-spacing:.08em;text-transform:uppercase;text-align:center;color:var(--color-text);color:color-mix(in srgb,var(--color-text) calc(88% + var(--lit)*12%),var(--color-bg));text-shadow:0 1px 4px rgba(0,0,0,calc(var(--lit)*.6))}
/* keys without a logo file: the name set as the mark, same box */
:is(body.page-clients,.keywall) .key--type{gap:0}
:is(body.page-clients,.keywall) .key__word{height:auto;width:86%;font-family:var(--font-heading);font-variation-settings:"wdth" 100;font-weight:700;font-size:clamp(13px,1.15vw,16px);line-height:1.18;letter-spacing:.03em;text-transform:uppercase;text-align:center;text-wrap:balance;
  color:var(--color-text);color:color-mix(in srgb,var(--color-text) calc(88% + var(--lit)*12%),var(--color-bg));text-shadow:0 1px 4px rgba(0,0,0,calc(var(--lit)*.6))}
/* static (reduced motion or chip paused): same look, colour change only under the pointer */
:is(body.page-clients,.keywall) .panel.is-static .key{--lit:0;--mx:50%;--my:40%;transform:none;transition:--lit .9s cubic-bezier(.2,.7,.2,1)}
@media(hover:hover){:is(body.page-clients,.keywall) .panel.is-static .key:hover{--lit:1;transition-duration:.25s}}
:is(body.page-clients,.keywall) .panel.is-static .key__mark img{transform:none}
@media(prefers-reduced-motion:reduce){:is(body.page-clients,.keywall) .panel.is-static .key{transition:none}}
/* touch: no sticky hover; the tap pulse is driven by the script with the motion styles */
:is(body.page-clients,.keywall) .panel.is-touch .key{transition:none}
:is(body.page-clients,.keywall) .panel__play{position:static;margin:0 0 .5rem auto;display:grid}
:is(body.page-clients,.keywall) .clients-content{display:flow-root}
@media(max-width:1000px){:is(body.page-clients,.keywall) .panel{grid-template-columns:repeat(4,minmax(0,1fr))}:is(body.page-clients,.keywall) .panel--events{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:600px){:is(body.page-clients,.keywall) .panel,:is(body.page-clients,.keywall) .panel--events{grid-template-columns:repeat(3,minmax(0,1fr));--gap:6px;border-radius:12px}:is(body.page-clients,.keywall) .key{padding:.6rem .35rem .5rem;gap:.5rem;border-radius:8px}:is(body.page-clients,.keywall) .key__name{font-size:10.5px;letter-spacing:.04em}:is(body.page-clients,.keywall) .key__word{font-size:11px;letter-spacing:.02em}}

/* ---------- r10b Events page (r10 with a headset at 75%, one band layout at every width, autoplay): a headset that fills the first screen, two film strips, a star map ---------- */
/* The shared header is 90% opaque with a backdrop blur. On this page the drifting strip, the pixel flight and the lens
   photo scroll under it and showed through as a blurred, flickering ghost. Here the header is solid, nothing shows through.
   The packed single-file build keeps this rule alive: its hash router copies each page's body class onto <body>. */
body.page-events .site-header{background:var(--color-bg);-webkit-backdrop-filter:none;backdrop-filter:none}
.evhero{position:relative;overflow:hidden;overflow:clip;isolation:isolate;display:grid;grid-template-columns:minmax(0,1fr);padding:.75rem 0 clamp(1.5rem,3vw,2.5rem);background:radial-gradient(circle at 50% 0%,#1a1420,var(--color-bg) 70%)}
.evhero__title,.evhero__lead{width:100%;max-width:var(--container);margin:0 auto;padding:0 var(--gutter)}
.evhero__title .eyebrow{margin:0 0 .2rem;font-size:.7rem}
/* same size, face and cyan accent as the "151 events and counting" headline */
.evhero h1,
.evhero .h1{margin:0;max-width:none;font-size:clamp(2.3rem,1rem + 5.6vw,5.25rem);line-height:1.05;text-wrap:balance}
.evhero h1::before,
.evhero .h1::before{content:none}
.evhero h1 span,
.evhero .h1 span{color:var(--neon-cyan)}
.evhero__lead{order:3;margin-top:var(--space-3);color:#c9c5d3;font-size:1rem;line-height:1.5}
.evhero__lead{max-width:min(var(--container),46rem + 2*var(--gutter))}
.evstage{--fw:180px;--band:16px;--mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;position:relative;display:grid;grid-template-columns:minmax(0,1fr);justify-items:center;gap:1.15rem;margin-top:1.2rem;contain:paint}
/* one layout for every width and orientation: the first strip always runs directly behind the headset, centred on it */
.evstage__gate{position:relative;display:grid;grid-template-columns:minmax(0,1fr);place-items:center;width:100%;min-height:calc((var(--fw) - 12px)*.6667 + 2*var(--band) + 8px)}
.evstage__gate .evreel{position:absolute;left:0;right:0;top:50%;transform:translateY(-50%)}
/* on small screens the band behind the smaller headset is a little lower than the tap strip below, so the headset stays the hero */
.evstage__gate .evreel{--fw:150px;--band:14px}
/* the flight canvas is a direct child of .evstage and fills it: the script measures this same box, so both strips are inside it */
.evstage__px{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5}
/* 75% of the r10 headset at every width. The box itself lets taps through; only the painted shell, straps and lens take them,
   so the parts of a frame that show beside the headset stay tappable. */
.gog{position:relative;z-index:2;pointer-events:none;width:min(75vw - 8px,max(15rem,(100svh - 13.7rem)*1.103));aspect-ratio:1000/680;filter:drop-shadow(0 0 26px rgba(53,230,230,.22)) drop-shadow(0 14px 22px rgba(0,0,0,.6))}
@media (min-width:900px) and (min-aspect-ratio:4/3){
  .evhero{grid-template-columns:minmax(0,1fr);row-gap:0}
  .evhero__title{min-height:2.5rem}
  /* the large H1 takes about 3rem more than the old compact title, so the headset gives that back */
  .gog{width:min(75vw - 8px,max(15rem,(100svh - 16.7rem)*1.103))}
  .evhero__title .eyebrow{margin:0;flex:none;font-size:.74rem}
  .evhero__lead{max-width:calc(44rem + 2*var(--gutter));margin-top:var(--space-3);text-align:center}
  .evstage{--fw:288px;--band:20px;margin-top:.95rem}
  .evstage__gate .evreel{--fw:288px;--band:20px}
}

/* the film */
.evreel{width:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--color-border) transparent;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent)}
.evreel__track{display:flex;width:max-content;margin:0;padding:0;list-style:none}
.evstage.is-on .evreel{overflow:hidden;scroll-snap-type:none}
/* r12: the script moves the track (drift, swipe, two-finger scroll, click and flick), so there is no CSS animation here.
   pan-y keeps the page's vertical scroll native on touch; a sideways move goes to the strip. contain stops the
   browser's back and forward swipe from firing while the strip is scrolled sideways. */
.evstage.is-on .evreel__track{will-change:transform}
.evstage.is-on .evreel{touch-action:pan-y;overscroll-behavior-x:contain}
.evreel{-webkit-user-select:none;user-select:none}
.evreel img{-webkit-user-drag:none}
.evreel.is-drag,.evreel.is-drag .frame__btn{cursor:grabbing}
.evreel.is-drag{scroll-snap-type:none}
.evstage:not(.is-on) .frame--clone{display:none}
.frame{position:relative;flex:none;width:var(--fw);padding:var(--band) 6px;scroll-snap-align:start;background-color:#1b1722;
  background-image:linear-gradient(90deg,transparent 7px,var(--color-bg) 7px 17px,transparent 17px),linear-gradient(90deg,transparent 7px,var(--color-bg) 7px 17px,transparent 17px);
  background-size:24px 8px,24px 8px;background-position:0 4px,0 calc(100% - 4px);background-repeat:repeat-x}
@media (min-width:900px){.frame{background-size:24px 10px,24px 10px;background-position:0 5px,0 calc(100% - 5px)}}
.frame__win{position:relative;display:block;aspect-ratio:3/2;overflow:hidden;border-radius:3px;background:#07060a;isolation:isolate}
.frame__win img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;transition:opacity .6s ease}
.frame__win img[data-src]:not([src]){visibility:hidden}
.frame__btn .frame__win::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,var(--neon-cyan) 10%,var(--neon-pink) 95%);mix-blend-mode:multiply;pointer-events:none}
.frame__btn{display:block;width:100%;padding:0;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;border-radius:3px;-webkit-tap-highlight-color:transparent}
.frame__btn .frame__win{outline:1px solid rgba(53,230,230,.35);outline-offset:-1px;transition:outline-color .15s,box-shadow .2s,filter .2s}
.frame__btn:hover .frame__win{outline-color:var(--neon-cyan);box-shadow:0 0 18px rgba(53,230,230,.35);filter:brightness(1.35)}
.frame__btn:focus-visible{outline:2px solid var(--color-text);outline-offset:2px}
.frame__btn:active .frame__win{filter:brightness(1.7)}
.frame__btn.is-active .frame__win{outline-color:var(--neon-pink)}
.frame__btn.is-pending .frame__win{outline-color:var(--neon-cyan)}
.frame__btn.is-gone .frame__win img{opacity:0;transition-duration:.12s}
/* in-frame caption: name .75rem and venue .7rem or more. The scrim is at full strength (92%) from the first text line down,
   so the name and the venue hold 4.5:1 over the brightest line of a drawing. */
.frame__cap{position:absolute;left:0;right:0;bottom:0;z-index:1;display:grid;gap:.1rem;padding:1rem .5rem .4rem;background:linear-gradient(180deg,transparent,rgba(7,6,10,.92) .95rem);font-family:var(--mono);text-transform:uppercase;line-height:1.2;pointer-events:none}
.frame__cap b,.frame__cap span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frame__cap b{font-size:.75rem;font-weight:700;letter-spacing:.04em;color:var(--color-text)}
.frame__cap span{font-size:.7rem;letter-spacing:.04em;color:#b9b4c6}
.frame__no{position:absolute;left:12px;top:calc(var(--band) + 5px);z-index:1;padding:.2em .35em;border-radius:2px;background:rgba(7,6,10,.7);font:700 .56rem/1 var(--mono);letter-spacing:.1em;color:#d9a441;pointer-events:none}
.frame--text .frame__win{display:grid;align-content:center;padding:.5rem .6rem;background:#0e0c12}
.frame__ev{margin:0;display:grid;gap:.2rem;font-family:var(--mono);text-transform:uppercase;line-height:1.25}
.frame__ev b{font-size:.68rem;font-weight:700;letter-spacing:.04em;color:var(--color-text);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.frame__ev span{font-size:.6rem;letter-spacing:.04em;color:var(--color-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:900px){
  /* the large frame has room for a two-line name */
  .frame__cap b{font-size:.78rem;white-space:normal;text-overflow:clip;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
  .frame__cap span{font-size:.72rem}
  .frame__ev b{font-size:.74rem}
  .frame__ev span{font-size:.66rem}
}

/* the headset: 1000 x 680, lens window 780 x 520 (3:2, the shape of the photos) */
.gog__body{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.gog__shell,.gog__strap,.gog__lens{pointer-events:auto}
.gog__shell{fill:#15121b;stroke:var(--neon-cyan);stroke-width:5;stroke-linejoin:round}
.gog__strap{fill:#1b1722;stroke:var(--color-border);stroke-width:4;stroke-linejoin:round}
.gog__rim{fill:#07060a;stroke:var(--neon-pink);stroke-width:3;stroke-opacity:.8}
.gog__bar{fill:var(--neon-cyan);opacity:.55}
.gog__led{fill:var(--color-border)}
.evstage.has-scene .gog__led{fill:var(--neon-pink)}
.gog__lens{position:absolute;left:11%;right:11%;top:11.1765%;bottom:12.3529%;overflow:hidden;background:#07060a;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 780 520' preserveAspectRatio='none'%3E%3Cpath d='M70 0H710Q780 0 780 70V450Q780 520 710 520H530Q488 520 462 478Q426 422 390 422Q354 422 318 478Q292 520 250 520H70Q0 520 0 450V70Q0 0 70 0Z'/%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 780 520' preserveAspectRatio='none'%3E%3Cpath d='M70 0H710Q780 0 780 70V450Q780 520 710 520H530Q488 520 462 478Q426 422 390 422Q354 422 318 478Q292 520 250 520H70Q0 520 0 450V70Q0 0 70 0Z'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.gog__idle{position:absolute;inset:0;display:grid;place-items:center;
  background:radial-gradient(1.5px 1.5px at 18% 30%,rgba(53,230,230,.8),transparent 60%),radial-gradient(1.5px 1.5px at 72% 22%,rgba(255,255,255,.7),transparent 60%),radial-gradient(1px 1px at 40% 64%,rgba(255,255,255,.6),transparent 60%),radial-gradient(1.5px 1.5px at 86% 58%,rgba(255,45,149,.8),transparent 60%),radial-gradient(1px 1px at 58% 40%,rgba(53,230,230,.7),transparent 60%),radial-gradient(1px 1px at 9% 72%,rgba(255,255,255,.5),transparent 60%),radial-gradient(1px 1px at 30% 14%,rgba(255,255,255,.5),transparent 60%),radial-gradient(circle at 50% 120%,#1a1420,#07060a 70%)}
.gog__prompt{display:none;font:700 clamp(.72rem,.5rem + .6vw,1rem)/1 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--neon-cyan);padding-bottom:12%}
.evstage.is-ready .gog__prompt{display:block}
.evstage.had-scene .gog__prompt{display:none}
.gog__img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:cover;opacity:0;transition:opacity .4s ease}
.gog__img:not([src]){visibility:hidden}
.gog__img.is-front{opacity:1}
.gog__img.is-live{animation:gogpush 16s ease-in-out infinite alternate}
/* one motion state: the chip paused or reduced motion stops the slow push where it is */
.evstage:not(.is-on) .gog__img.is-live{animation-play-state:paused}
@keyframes gogpush{to{transform:scale(1.07) translate3d(-1%,-1%,0)}}
.gog__lens::after{content:"";position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(10,9,13,.1) 0 1px,transparent 1px 4px),linear-gradient(115deg,rgba(255,255,255,.1),transparent 30%)}
.gog__tag{position:absolute;left:6%;top:7%;z-index:1;display:none;align-items:center;gap:.5em;padding:.4em .65em;border-radius:2px;background:rgba(10,9,13,.78);font:700 clamp(.6rem,.5rem + .3vw,.78rem)/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--color-text)}
.gog__tag i{width:.55em;height:.55em;border-radius:50%;background:var(--neon-pink)}
.evstage.has-scene .gog__tag{display:inline-flex}
.evstage.is-on .gog__tag i{animation:blink 1.6s step-end infinite}

/* arrows, caption, chip: the DOM order (previous, caption, next, chip) is the visual order at both widths */
.evctl{display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"prev cap next" "chip chip chip";align-items:center;gap:.5rem .6rem;width:100%;max-width:44rem;padding:0 var(--gutter)}
.evctl__chip{position:static;grid-area:chip;justify-self:center}
.evctl__btn--prev{grid-area:prev}.evctl__btn--next{grid-area:next}.evctl__cap{grid-area:cap}
@media (min-width:900px) and (min-aspect-ratio:4/3){.evctl{grid-template-columns:auto auto minmax(0,1fr) auto auto;grid-template-areas:"pad prev cap next chip"}.evctl::after{content:"";grid-area:pad;width:2.75rem}.evctl__cap{min-height:2.9rem}}
.evctl__btn{display:grid;place-items:center;width:2.75rem;height:2.75rem;padding:0;border-radius:50%;border:1.5px solid var(--color-border);background:var(--color-surface);color:var(--color-text);cursor:pointer;transition:border-color .15s,color .15s,box-shadow .2s}
.evctl__btn:hover{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 18px rgba(53,230,230,.3)}
.evctl__btn:focus-visible{outline:2px solid var(--color-text);outline-offset:3px}
.evctl__btn:active{transform:translateY(1px)}
.evctl__cap{margin:0;min-height:3.9rem;display:grid;align-content:center;text-align:center;line-height:1.3;min-width:0}
.evctl__cap b{font-size:1rem;font-weight:700}
.evctl__cap span,.evctl__status{font-size:.9rem;color:var(--color-muted)}
/* a failed photo: the status takes the venue line, so the block keeps its height */
.evctl__status{font-style:normal;color:#ff9ccb}
.evctl__cap.has-status>span{display:none}
/* the one live region: read, never seen */
.evctl__live{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* past events: the count and a static star map of Singapore. No script. Stroke widths are screen px. */
.evmap{overflow:hidden}
.evmap__count::before{content:none}
.evmap__count{margin:0;max-width:none;font-size:clamp(2.3rem,1rem + 5.6vw,5.25rem);line-height:1.05;text-wrap:balance}
.evmap__count span{color:var(--neon-cyan)}
.evmap__stage{max-width:1240px;margin:var(--space-3) auto 0;padding:0 clamp(.5rem,2vw,2rem)}
.evmap__svg{display:block;width:100%;height:auto;--k:1}
.evmap__svg path{fill:none;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
.em-sea{stroke:#8f8aa0;stroke-width:1.2px;opacity:.4}
.em-a{stroke:var(--neon-cyan);stroke-width:calc(1.8px*var(--k));opacity:.75}
.em-b{stroke:#d9d5e6;stroke-width:calc(2.1px*var(--k));opacity:.85}
.em-c{stroke:var(--neon-purple);stroke-width:calc(2.4px*var(--k));opacity:.9}
.em-tw{stroke:#fff;stroke-width:calc(2.5px*var(--k))}
.em-coast{stroke:var(--neon-cyan);stroke-width:calc(1.7px*var(--k));stroke-dasharray:0 4.2;opacity:.95}
.em-halo{stroke:var(--neon-pink);stroke-width:calc(var(--s)*2.3px*var(--kp,1));opacity:.2}
.em-pin{stroke:var(--neon-pink);stroke-width:calc(var(--s)*1px*var(--kp,1))}
.em-flare{stroke:#ff8cc4;stroke-width:1px;opacity:.75}
@media (max-width:700px){.evmap__svg{--k:.62;--kp:.5}.em-coast{stroke-dasharray:0 3}}
@media (prefers-reduced-motion:no-preference){
  .em-tw{animation:emtw 5s ease-in-out infinite alternate}
  .em-tw--2{animation-delay:-1.7s}
  .em-tw--3{animation-delay:-3.4s}
}
@keyframes emtw{to{opacity:.15}}
@media (min-width:1000px){.pill-grid--3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.pill-grid .link{display:inline-block;margin-top:var(--space-2);font-weight:600}

/* r14a and r14b: the game dialog leads with pictures. No WhatsApp button (the header carries it), details as chips. */
.gamebox{max-width:min(44rem,calc(100vw - 2rem))}
.gamebox__media{position:relative;border-bottom:1px solid var(--color-border);border-radius:16px 16px 0 0;overflow:hidden;background:#07060a}
.gamebox__media .gamebox__img{display:block;aspect-ratio:640/368;max-height:none;border:0;border-radius:0}
.gamebox__chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:var(--space-2) 0 0;padding:0;list-style:none}
.gamebox__chips li{padding:.3rem .75rem;border:1px solid var(--color-border);border-radius:999px;font-size:.8rem;letter-spacing:.04em;color:var(--color-muted)}
.gamebox__chips li:first-child{border-color:var(--neon-pink);color:var(--neon-pink)}
.gbflip{position:relative}
.gbflip__film{aspect-ratio:400/230;background-repeat:no-repeat;background-size:2400% 100%;cursor:ew-resize;touch-action:pan-y}
.gbflip__bar{height:3px;background:rgba(255,255,255,.08)}
.gbflip__bar i{display:block;height:100%;width:0;background:var(--neon-cyan)}
.gbflip__hint{position:absolute;left:.75rem;bottom:.85rem;padding:.25rem .6rem;border-radius:999px;background:rgba(10,9,13,.8);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--color-text);pointer-events:none}
.gbflip__hint[hidden]{display:none}

/* r14b: on a phone the headset fills the width (owner, 2026-09-20). The first strip then only peeks out at the sides;
   the arrows, autoplay and the second strip pick frames. */
@media (max-width:640px){
  .gog{width:min(94vw,max(15rem,(100svh - 13.7rem)*1.103))}
}

/* r14b speed: each stage figure's picture covers it fully, so the CSS backdrop copies (six more downloads) are dropped. */
.imagination__visual:nth-child(n){background-image:none}
/* r14b: touch targets of 44 px on the games reel and its dialog */
.reel__view{min-height:44px}
.gamebox__close{width:2.75rem;height:2.75rem}
.gbflip__film:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:-2px}

/* r15: the H1 tag carries the search words and sits where the eyebrow was; the big slogan keeps the H1 look. */
h1.eyebrow,.hero h1.eyebrow,.hero__text h1.eyebrow,.page-hero h1.eyebrow,.booth-hero h1.eyebrow{font-family:var(--font-body);font-size:.78rem;font-weight:700;line-height:var(--leading);letter-spacing:.12em;max-width:none;margin:0 0 var(--space-2);text-shadow:0 0 12px rgba(10,9,13,.9)}
h1.eyebrow::after,.hero h1.eyebrow::after{content:none;display:none}
.sr-only{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
/* r15: minimalist contact line in the footer */
.site-footer__inner{justify-content:space-between}
.site-footer__contact{display:flex;flex-wrap:wrap;align-items:baseline;gap:.35rem 1.5rem;font-style:normal;font-size:.85rem;color:var(--color-muted)}
.site-footer__contact a{color:inherit;text-decoration:none;border-bottom:1px solid transparent;padding:.15rem 0}
.site-footer__contact a:hover{color:var(--neon-cyan);border-bottom-color:currentColor}
.site-footer__contact a:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.site-footer__contact a:active{opacity:.8}
.reel__card{cursor:pointer}

/* r16b: services as line drawings that light up into the photo */
.svc h2{margin-bottom:var(--space-3)}
.svc__row{list-style:none;margin:0;padding:0;display:flex;gap:10px;height:clamp(22rem,44vw,32rem)}
.svc__panel{position:relative;flex:1 1 0;min-width:0;overflow:hidden;border-radius:var(--radius);border:1px solid var(--color-border);background:#000;cursor:pointer;transition:flex-grow .55s cubic-bezier(.2,.7,.2,1),border-color .3s}
.svc__panel img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc__line{opacity:.8;transition:opacity .5s}
.svc__photo{opacity:0;transition:opacity .6s}
.svc__panel.is-lit{flex-grow:3.2;border-color:var(--neon-cyan);box-shadow:0 0 28px rgba(53,230,230,.18)}
.svc__panel.is-lit.has-photo .svc__photo{opacity:1}
.svc__panel.is-lit.has-photo .svc__line{opacity:0}
.svc__panel:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:3px}
.svc__label{position:absolute;left:0;right:0;bottom:0;padding:2.5rem 1rem 1rem;background:linear-gradient(transparent,rgba(0,0,0,.88));display:grid;gap:.25rem}
.svc__label strong{font-size:clamp(.72rem,1.05vw,.95rem);letter-spacing:.08em;text-transform:uppercase;overflow-wrap:anywhere}
.svc__label{padding-inline:clamp(.6rem,1vw,1rem)}
.svc__label span{font-size:.95rem;color:var(--color-muted,#b9b6c4);overflow:hidden;transition:max-height .5s,opacity .4s}
.svc--js .svc__label span{max-height:0;opacity:0}
.svc--js .svc__panel.is-lit .svc__label span{max-height:4em;opacity:1}
/* 801 to 1100 px (small laptops, a browser window beside another): still five panels that widen, as on a big screen. The lit panel
   widens less there, so the narrow ones keep room for their labels (Codex finding 3 was clipped labels at these widths). */
@media(min-width:801px) and (max-width:1100px){.svc__panel.is-lit{flex-grow:2.3}.svc__row{gap:8px}.svc__label strong{letter-spacing:.05em}}
@media(max-width:800px){
  .svc__row{height:auto;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 calc(var(--gutter,1.5rem)*-1);padding:0 calc((100vw - min(78vw,30rem))/2);gap:12px}
  .svc__row::-webkit-scrollbar{display:none}
  .svc__panel,.svc__panel.is-lit{flex:0 0 min(78vw,30rem);aspect-ratio:3/2.4;scroll-snap-align:center}
  .svc__label strong{font-size:.95rem}.svc__label{padding-inline:1rem}
}
@media(prefers-reduced-motion:reduce){.svc__panel,.svc__line,.svc__photo,.svc__label span{transition:none}}
/* r16b: the drawings carry the neon tint of the games section (cyan to purple to pink across the row). A colour layer multiplied over
   the white lines: white turns to the colour, black stays black. No extra files. The same faint cyan grid as #games sits behind. */
.svc{position:relative;overflow:hidden}
.svc::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.9;background:linear-gradient(90deg,rgba(53,230,230,.05) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(0deg,rgba(53,230,230,.05) 1px,transparent 1px) 0 0/24px 24px}
.svc>.container{position:relative;z-index:1}
.svc__panel{isolation:isolate;--t1:var(--neon-cyan);--t2:var(--neon-purple)}
.svc__panel:nth-child(2){--t1:#5fb4f2;--t2:var(--neon-purple)}
.svc__panel:nth-child(3){--t1:var(--neon-purple);--t2:#c84fd0}
.svc__panel:nth-child(4){--t1:#c84fd0;--t2:var(--neon-pink)}
.svc__panel:nth-child(5){--t1:var(--neon-pink);--t2:#ff7ab8}
.svc__panel::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(160deg,var(--t1),var(--t2));mix-blend-mode:multiply;transition:opacity .5s}
.svc__line{opacity:1;filter:drop-shadow(0 0 3px rgba(255,255,255,.35))}
.svc__photo{z-index:2}
.svc__label{z-index:3}
.svc__panel.is-lit.has-photo::before{opacity:0}
.svc__panel.is-lit{border-color:var(--t1);box-shadow:0 0 28px color-mix(in srgb,var(--t1) 25%,transparent)}
.svc__label strong{text-shadow:0 0 12px color-mix(in srgb,var(--t1) 60%,transparent)}
@media(prefers-reduced-motion:reduce){.svc__panel::before{transition:none}}

/* r16b (owner, 2026-09-21): the two Events page headlines, "See us in action" and "151 events and counting", are the size of the
   home slogan "The possibilities are virtually endless" (--text-3xl), not the larger display size they had since r10b. */
.evhero h1,.evhero .h1,.evmap__count{font-size:var(--text-3xl);line-height:1.2}
/* r16b: the phone swipe strip starts level with the section title (left edge at the page gutter), not centred with a wide gap.
   Panels snap to that left edge; the right padding lets the last panel reach it too. */
@media(max-width:800px){
  .svc__row{padding:0 calc(100vw - min(78vw,30rem) - var(--gutter,1.5rem)) 0 var(--gutter,1.5rem);scroll-padding-left:var(--gutter,1.5rem)}
  .svc__panel,.svc__panel.is-lit{scroll-snap-align:start}
}

/* r16b (owner, 2026-09-21): a softer change from drawing to photo. The panel widens first, then the photo fades up over the drawing
   for 1.4 s while the drawing and its tint fade out more slowly underneath, so there is no moment with neither. Going back is quicker. */
.svc__photo{transition:opacity .7s ease}
.svc__line,.svc__panel::before{transition:opacity .7s ease}
.svc__panel.is-lit.has-photo .svc__photo{transition:opacity 1.4s cubic-bezier(.4,0,.2,1) .18s}
.svc__panel.is-lit.has-photo .svc__line,.svc__panel.is-lit.has-photo::before{transition:opacity 1.7s cubic-bezier(.4,0,.2,1) .3s}
@media(prefers-reduced-motion:reduce){.svc__photo,.svc__line,.svc__panel::before,.svc__panel.is-lit.has-photo .svc__photo,.svc__panel.is-lit.has-photo .svc__line,.svc__panel.is-lit.has-photo::before{transition:none}}

/* r16b: a tapped frame shows at once that it was picked, while its photo loads: the window glows and pulses */
.frame__btn.is-pending .frame__win{outline-color:var(--neon-cyan);box-shadow:0 0 0 2px var(--neon-cyan),0 0 22px rgba(53,230,230,.55);animation:frame-wait .7s ease-in-out infinite alternate}
@keyframes frame-wait{from{filter:brightness(1)}to{filter:brightness(1.6)}}
@media(prefers-reduced-motion:reduce){.frame__btn.is-pending .frame__win{animation:none}}

/* r17: "What we need from you" on the photobooth page. The to-scale floor plan lies faded behind the text (owner, 2026-09-21);
   the list in front says everything the drawing shows, so the drawing is decoration (aria-hidden). */
.need{position:relative;overflow:hidden;padding:var(--space-5) 0;border-top:1px solid var(--color-border)}
.need__plan{position:absolute;inset:0;display:flex;align-items:center;justify-content:flex-end;padding:0 max(var(--gutter),calc((100vw - var(--container))/2));pointer-events:none;opacity:.42;
  -webkit-mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.35) 46%,#000 66%);mask-image:linear-gradient(90deg,transparent 30%,rgba(0,0,0,.35) 46%,#000 66%)}
.need__plan svg{display:block;height:112%;width:auto;max-width:74%;overflow:visible;margin-right:-3%}
.need__plan text{font-family:var(--font-body,inherit);font-size:13px;fill:var(--color-text,#e9e6f2);letter-spacing:.04em}
.need__grid{position:relative;z-index:1}
.need__text{max-width:35rem}
.need__lead{font-size:var(--text-lg);color:var(--color-muted);max-width:34ch;margin:0 0 var(--space-3)}
.need__list{margin:0;display:grid;gap:0}
.need__list>div{display:grid;grid-template-columns:6.5rem minmax(0,1fr);gap:1rem;padding:.8rem 0;border-top:1px solid var(--color-border)}
.need__list>div:last-child{border-bottom:1px solid var(--color-border)}
.need__list dt{font-weight:700;color:var(--neon-cyan);font-size:.95rem}
.need__list dd{margin:0;font-size:1rem;line-height:1.5;text-shadow:0 0 12px var(--color-bg,#0a090d),0 0 4px var(--color-bg,#0a090d)}
.plan__zone{fill:rgba(53,230,230,.05);stroke:var(--neon-cyan);stroke-width:2;stroke-dasharray:7 6}
.plan__dim path,.plan__scale path{fill:none;stroke:var(--color-muted);stroke-width:1.5}
.plan__kit rect{fill:#15121b;stroke:var(--neon-purple);stroke-width:2}
.plan__guest rect{fill:#15121b;stroke:var(--neon-cyan);stroke-width:2}.plan__guest .plan__head{fill:var(--neon-cyan)}
.plan__queue rect{fill:#15121b;stroke:var(--neon-pink);stroke-width:2}.plan__queue .plan__head{fill:var(--neon-pink)}
.plan__socket path,.plan__socket circle{fill:none;stroke:var(--neon-cyan);stroke-width:2}
.plan__socket .plan__pin{fill:var(--neon-cyan);stroke:none}
@media(max-width:800px){
  .need__plan{justify-content:center;align-items:flex-start;padding:4.5rem 0 0;opacity:.2;-webkit-mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%);mask-image:linear-gradient(180deg,#000 0,#000 45%,transparent 85%)}
  .need__plan svg{height:auto;width:125%;max-width:none}
  .need__list>div{grid-template-columns:5.5rem minmax(0,1fr)}
}
/* r17: page not found, on brand: the Events headset with an empty lens */
.nf{padding:clamp(2.5rem,7vw,5.5rem) 0 var(--space-5)}
.nf__grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.nf__gog{filter:drop-shadow(0 0 26px rgba(53,230,230,.22)) drop-shadow(0 14px 22px rgba(0,0,0,.6))}
.nf__gog svg{display:block;width:100%;height:auto}
.nf__shell{fill:#15121b;stroke:var(--neon-cyan);stroke-width:5;stroke-linejoin:round}
.nf__strap{fill:#1b1722;stroke:var(--color-border);stroke-width:4;stroke-linejoin:round}
.nf__rim{fill:#07060a;stroke:var(--neon-pink);stroke-width:3;stroke-opacity:.8}
.nf__bar{fill:var(--neon-cyan);opacity:.55}
.nf__code{font-family:var(--font-heading);font-weight:800;font-size:150px;fill:none;stroke:var(--neon-cyan);stroke-width:3;letter-spacing:.04em}
.nf__sub{font-family:var(--font-body,inherit);font-size:26px;letter-spacing:.32em;fill:var(--neon-pink)}
.nf h1{font-size:var(--text-3xl);margin-bottom:var(--space-2)}
.nf__links{list-style:none;margin:var(--space-3) 0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.nf__links a{display:inline-block;padding:.7rem 1.2rem;min-height:44px;border:1px solid var(--color-border);border-radius:999px;font-weight:700;font-size:.9rem;letter-spacing:.04em;text-decoration:none;color:inherit;transition:border-color .2s,box-shadow .2s,color .2s}
.nf__links a:hover,.nf__links a:focus-visible{border-color:var(--neon-cyan);color:var(--neon-cyan);box-shadow:0 0 18px rgba(53,230,230,.25)}
@media(max-width:800px){.nf__grid{grid-template-columns:1fr}.nf__gog{max-width:24rem}}

/* ---------- r18a: games as a wall of small covers ---------- */
.wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(12.6rem,1fr));gap:.7rem;list-style:none;margin:var(--space-4) 0 0;padding:0}
.wall__cell[hidden]{display:none}
.wall__btn{position:relative;display:block;width:100%;padding:0;border:1px solid var(--color-border);border-radius:calc(var(--radius)*.6);overflow:hidden;background:#0e0c12;color:var(--color-text);cursor:pointer;font:inherit;transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease}
.wall__btn img{display:block;width:100%;height:auto;aspect-ratio:240/138;object-fit:cover;filter:saturate(.75) brightness(.8);transition:filter .25s ease}
.wall__name{position:absolute;left:0;right:0;bottom:0;padding:1.6rem .7rem .5rem;font-family:var(--font-heading);font-size:.9rem;font-weight:700;line-height:1.15;text-align:left;background:linear-gradient(180deg,transparent,rgba(10,9,13,.92));opacity:0;transform:translateY(4px);transition:opacity .2s ease,transform .2s ease}
.wall__btn:hover,.wall__btn:focus-visible{transform:scale(1.09);z-index:2;border-color:var(--neon-cyan);box-shadow:0 0 22px rgba(53,230,230,.35);outline:0}
.wall__btn:hover img,.wall__btn:focus-visible img{filter:none}
.wall__btn:hover .wall__name,.wall__btn:focus-visible .wall__name{opacity:1;transform:none}
.wall__more{display:none}
/* r22 (owner, 2026-09-23): on touch screens the always-on name sat over the cover and crowded the art's own lettering (the Safety title cards). It sits under the cover instead. */
@media (hover:none){.wall__name{position:static;display:block;min-height:calc(2.3em + 1rem);opacity:1;transform:none;padding:.45rem .55rem .55rem;font-size:.8rem;background:none}.wall__btn img{filter:none}}
/* owner, 2026-09-21: the wall shows its first three rows; one button opens the rest. The script marks the cells past row three
   (the column count follows the width). Without the script every game shows. */
.wall--short .wall__cell.is-past{display:none}
.wall__more:not([hidden]){display:block;margin:var(--space-3) auto 0;padding:.7rem 1.4rem;font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.08em;border-radius:999px;border:1px solid var(--neon-cyan);background:transparent;color:var(--neon-cyan);cursor:pointer}
@media (max-width:700px){
  .wall{grid-template-columns:repeat(2,1fr);gap:.5rem}
}
@media (prefers-reduced-motion:reduce){.wall__btn,.wall__btn img,.wall__name{transition:none}}

/* ---------- r18b: games as a shelf of spines ---------- */
.shelf{--spine-w:3.4rem;--spine-h:17rem;margin-top:var(--space-4);min-width:0}
.shelf__row{display:flex;gap:.3rem;list-style:none;margin:0;padding:.6rem 0 0;overflow-x:auto;scrollbar-width:none;border-bottom:3px solid var(--color-border);box-shadow:0 14px 18px -16px rgba(53,230,230,.35)}
.shelf__row::-webkit-scrollbar{display:none}
.spine{flex:0 0 var(--spine-w);height:var(--spine-h);transition:flex-basis .45s cubic-bezier(.2,.7,.2,1)}
.spine[hidden]{display:none}
.spine.is-out{flex-basis:calc(var(--spine-h)*240/138)}
.spine__btn{position:relative;display:block;width:100%;height:100%;padding:0;border:1px solid var(--color-border);border-bottom:0;border-radius:4px 4px 0 0;overflow:hidden;background:#0e0c12;color:var(--color-text);cursor:pointer;font:inherit}
/* a closed spine shows a sliver of the cover blown up well past its size, so it is softened on purpose and reads as colour, not as a bad picture */
.spine__img{position:absolute;inset:-6px;width:calc(100% + 12px);height:calc(100% + 12px);max-width:none;object-fit:cover;filter:blur(3px) saturate(.8) brightness(.5);transition:filter .45s ease}
.spine.is-out .spine__img{inset:0;width:100%;height:100%}
.spine__name{position:absolute;left:50%;bottom:.6rem;transform-origin:0 50%;transform:rotate(-90deg);white-space:nowrap;max-width:calc(var(--spine-h) - 1.2rem);overflow:hidden;text-overflow:ellipsis;font-family:var(--font-heading);font-size:.95rem;font-weight:700;letter-spacing:.06em;text-shadow:0 0 6px rgba(10,9,13,.9)}
.spine:nth-child(3n+1) .spine__btn{border-top:3px solid var(--neon-cyan)}
.spine:nth-child(3n+2) .spine__btn{border-top:3px solid var(--neon-pink,#ff4fd8)}
.spine:nth-child(3n) .spine__btn{border-top:3px solid var(--color-muted)}
.spine.is-out .spine__img{filter:none}
.spine.is-out .spine__btn{border-color:var(--neon-cyan);box-shadow:0 0 22px rgba(53,230,230,.3)}
.spine.is-out .spine__name{left:.6rem;bottom:.5rem;transform:none;max-width:calc(100% - 1.2rem);font-size:1.05rem;padding:.15rem .4rem;background:rgba(10,9,13,.8);border-radius:4px}
.spine__btn:focus-visible{outline:2px solid var(--neon-cyan);outline-offset:-2px}
@media (max-width:700px){.shelf{--spine-w:2.8rem;--spine-h:12.5rem}.spine__name{font-size:.85rem}}
@media (prefers-reduced-motion:reduce){.spine,.spine__img{transition:none}}

/* ---------- r18: neon tube lettering (scripts/r18-neon.mjs). A pale core with a coloured glow, as a lit tube looks. ---------- */
.neon{display:block;width:100%;height:auto;overflow:visible}
.neon__tube{stroke-width:1.5;vector-effect:none}
/* owner, 2026-09-21: the tubes take the pink and teal of the hero figure itself (sampled from hero-neon.webp), for continuity */
.neon{--sign-teal:#59ccd3;--sign-pink:#e0509a}
.neon__tube--cyan{stroke:#e2fbfc;filter:drop-shadow(0 0 1.2px var(--sign-teal)) drop-shadow(0 0 5px var(--sign-teal)) drop-shadow(0 0 14px rgba(89,204,211,.55))}
.neon__tube--pink{stroke:#ffe6f2;filter:drop-shadow(0 0 1.2px var(--sign-pink)) drop-shadow(0 0 5px var(--sign-pink)) drop-shadow(0 0 14px rgba(224,80,154,.55))}
@media (prefers-reduced-motion:no-preference){
  .neon__tube--pink{animation:neon-on 2.4s linear 1 both}
  @keyframes neon-on{0%,18%{opacity:.12}19%,22%{opacity:1}23%,31%{opacity:.12}32%,36%{opacity:1}37%,48%{opacity:.2}49%,100%{opacity:1}}
}
.hero__sign{display:none}
@media (min-width:900px){
  .hero__sign{display:block;position:absolute;z-index:3;left:0;right:0;top:clamp(5.5rem,13vh,8rem);pointer-events:none}
  /* r20 (client, 2026-09-22): the sign grows with the window, not with a fixed cap, so a big desktop screen is not left half empty.
     Width follows the height too (the sign is 1.46 times wider than tall), so it always ends well above the slogan. */
  .hero__sign{--sign-top:max(5.5rem,11vh);top:var(--sign-top)}
  /* the slogan block at the foot of the stage is 290 px tall at every laptop and desktop width (two lines plus its padding);
     the sign takes the height left above it, less a 2.5 rem gap, and never more than 42 percent of the width */
  .hero__sign .neon{width:min(42vw,calc((100svh - var(--sign-top) - 334px - 2.5rem) * 1.464))}
}
/* r20 (client, 2026-09-22): a quiet "scroll down" mark at the foot of the hero: a ring with a chevron that nods. Fades with the copy. */
.hero__down{position:absolute;z-index:4;left:50%;bottom:calc(4.25rem + 1px + 1rem);transform:translateX(-50%);display:grid;place-items:center;width:3rem;height:3rem;border-radius:50%;border:1px solid rgba(232,230,238,.4);background:rgba(10,9,13,.35);color:var(--color-text);opacity:.85;transition:opacity .3s,border-color .2s,color .2s}
.hero__down:hover,.hero__down:focus-visible{opacity:1;border-color:var(--neon-cyan);color:var(--neon-cyan);outline:0}
.hero__down svg{width:18px;height:18px;display:block}
@media (prefers-reduced-motion:no-preference){.hero__down svg{animation:hero-down 2.2s ease-in-out infinite}@keyframes hero-down{0%,100%{transform:translateY(-2px)}50%{transform:translateY(3px)}}}
@media (max-width:800px){.hero__down{width:2.5rem;height:2.5rem;bottom:calc(4.25rem + 1px + .75rem)}}

/* ---------- r18 (client, 2026-09-21): key clients on the home page. The Clients page look (lit panel, same lamp), two rows.
   The last key leads to the full wall. With cross-page view transitions the same logos fly from these rows to their places
   on the Clients page while the rest fade in round them, so the second page reads as this one opening up, not as a repeat. ---------- */
@view-transition{navigation:auto}
@media (prefers-reduced-motion:reduce){::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}}
::view-transition-group(*){animation-duration:.55s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
.keywall .panel.panel--home{grid-template-columns:repeat(8,minmax(0,1fr));margin:var(--space-4) 0 0}
.keywall .panel--home .key__name{font-size:11px}
.keywall .keywall__more{margin-top:var(--space-3)}
.keywall .key--more{text-decoration:none;color:var(--neon-cyan);border:1px dashed color-mix(in srgb,var(--neon-cyan) 60%,transparent);background:transparent;font-family:var(--font-heading);font-weight:700;text-align:center;line-height:1.2;transition:background .25s ease,box-shadow .25s ease}
.keywall .key--more b{display:block;font-size:1.6rem}
.keywall .key--more span{font-size:.72rem;letter-spacing:.08em;text-transform:uppercase}
.keywall .key--more:hover,.keywall .key--more:focus-visible{background:rgba(53,230,230,.1);box-shadow:0 0 22px rgba(53,230,230,.3);outline:0}
@media (max-width:1000px){.keywall .panel.panel--home{grid-template-columns:repeat(4,minmax(0,1fr))}}

/* ---------- r18: the events row holds nine panels, runs off the right edge and scrolls; its end leads back to its start ---------- */
@media(min-width:801px){
  .svc__row{overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--radius)} /* owner: the row ends at the page margin on both sides, no bleed */
  .svc__row::-webkit-scrollbar{display:none}
  .svc__panel{flex:0 0 clamp(13.5rem,19.5vw,18rem);transition:flex-basis .55s cubic-bezier(.2,.7,.2,1),border-color .3s}
  .svc__panel.is-lit{flex:0 0 clamp(26rem,42vw,40rem)}
}
.svc__nav{margin-top:var(--space-3)}
.svc__panel:nth-child(5n+1){--t1:var(--neon-cyan);--t2:var(--neon-purple)}
.svc__panel:nth-child(5n+2){--t1:#5fb4f2;--t2:var(--neon-purple)}
.svc__panel:nth-child(5n+3){--t1:var(--neon-purple);--t2:#c84fd0}
.svc__panel:nth-child(5n+4){--t1:#c84fd0;--t2:var(--neon-pink)}
.svc__panel:nth-child(5n){--t1:var(--neon-pink);--t2:#ff7ab8}

/* ---------- r18: custom VR card. A neon sign on a blueprint wall that lights up into the finished booth. ---------- */
.concept{padding-top:0}
.concept__card{position:relative;isolation:isolate;overflow:hidden;min-height:clamp(24rem,46vw,34rem);display:flex;align-items:center;border:1px solid var(--color-border);border-radius:calc(var(--radius)*1.4);background:#06080f;transition:border-color .4s,box-shadow .4s}
.concept__card::before{content:"";position:absolute;inset:0;z-index:0;background:linear-gradient(90deg,rgba(53,230,230,.09) 1px,transparent 1px) 0 0/32px 32px,linear-gradient(0deg,rgba(53,230,230,.09) 1px,transparent 1px) 0 0/32px 32px}
.concept__card::after{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(90deg,rgba(6,8,15,.94) 0%,rgba(6,8,15,.82) 38%,rgba(6,8,15,.15) 75%,transparent 100%)}
.concept__line,.concept__photo{position:absolute;top:0;right:0;height:100%;width:72%;object-fit:cover;z-index:1}
.concept__line{opacity:.55;mix-blend-mode:screen;filter:sepia(1) hue-rotate(140deg) saturate(3);transition:opacity .9s}
.concept__photo{opacity:0;transition:opacity 1.1s}
.concept__card.is-lit{border-color:var(--neon-cyan);box-shadow:0 0 36px rgba(53,230,230,.18)}
.concept__card.is-lit.has-photo .concept__photo{opacity:1}
.concept__card.is-lit.has-photo .concept__line{opacity:0}
.concept__body{position:relative;z-index:3;padding:clamp(1.5rem,4vw,3.5rem);width:min(100%,38rem)}
.concept__title{max-width:none;margin:0 0 var(--space-3)}
.concept__title::before{display:none}
.concept__title .neon{width:min(100%,30rem)}
.concept__body p{margin:0 0 var(--space-3);max-width:32ch;color:var(--color-text);text-shadow:0 0 10px rgba(6,8,15,.9)}
@media(max-width:700px){
  .concept__card{align-items:flex-end;min-height:30rem}
  .concept__line,.concept__photo{width:100%;height:58%}
  .concept__card::after{background:linear-gradient(0deg,rgba(6,8,15,.96) 0%,rgba(6,8,15,.9) 46%,rgba(6,8,15,.1) 72%,transparent 100%)}
}
@media(prefers-reduced-motion:reduce){.concept__line,.concept__photo,.concept__card{transition:none}}

/* ---------- r18: "We bring everything" strip ---------- */
.bring{padding:var(--space-4) 0 var(--space-5)}
.bring__inner{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3) var(--space-5)}
.bring__title{margin:0;font-size:var(--text-xl);max-width:none}
.bring__list{display:flex;flex-wrap:wrap;gap:.7rem 2.2rem;list-style:none;margin:0;padding:0}
.bring__list li{position:relative;padding-left:1.1rem;font-size:1rem}
.bring__list li::before{content:"";position:absolute;left:0;top:.55em;width:.5rem;height:.5rem;border-radius:50%;background:var(--neon-cyan);box-shadow:0 0 10px var(--neon-cyan)}
.bring__list li:nth-child(2)::before{background:var(--neon-purple);box-shadow:0 0 10px var(--neon-purple)}
.bring__list li:nth-child(3)::before{background:var(--neon-pink);box-shadow:0 0 10px var(--neon-pink)}
@media(max-width:700px){.bring__inner{flex-direction:column;align-items:flex-start}.bring__list{flex-direction:column}}

/* ---------- r18: AI photobooth page, rebuilt from the old long page (pb.css is the working copy) ---------- */
/* r18 AI photobooth page: the client's old long page rebuilt in our skin (src/pages/r20/ai-photobooth.njk).
   One effect: the neon glow, used once, on the portrait grid as it lights up. Everything else is flat. */
.pb-take__grid{display:grid;gap:var(--space-4);align-items:center}
.pb-take__photo{margin:0;max-width:26rem}
.pb-take__photo img,.pb-lights img,.pb-styles__grid img{width:100%;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}
.pb-take__text h2{margin-bottom:var(--space-3)}
.pb-take__text .lead{color:var(--color-text);margin-bottom:var(--space-3)}
.pb-ticks{display:grid;gap:0;max-width:34rem}
.pb-ticks li{position:relative;padding:.8rem 0 .8rem 1.9rem;border-top:1px solid var(--color-border);line-height:1.5}
.pb-ticks li:last-child{border-bottom:1px solid var(--color-border)}
.pb-ticks li::before{content:"";position:absolute;left:.15rem;top:1.2rem;width:.85rem;height:.45rem;border-left:2px solid var(--neon-cyan);border-bottom:2px solid var(--neon-cyan);transform:rotate(-45deg)}
@media (min-width:760px){.pb-take__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5)}}

/* one photo lights up into a grid of portraits */
.pb-lights-sec{background:radial-gradient(circle at 50% 20%,#1a1420,var(--color-bg) 75%)}
.pb-lights-sec h2{max-width:24ch}
.pb-lights{display:grid;gap:var(--space-3);justify-items:center}
.pb-lights figure{margin:0}
.pb-lights__in{position:relative;width:min(58%,15rem)}
.pb-lights__in img{border-color:var(--neon-cyan)}
.pb-lights__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem;width:100%}
.pb-lights__grid li,.pb-styles__grid li{position:relative;overflow:hidden;border-radius:var(--radius)}
.pb-lights__in img,.pb-lights__grid img{aspect-ratio:2/3;object-fit:cover;height:auto}
.pb-lights figcaption,.pb-lights__grid span,.pb-styles__grid span{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .7rem .6rem;background:linear-gradient(transparent,rgba(10,9,13,.9));font-size:.85rem;font-weight:600;line-height:1.25;color:var(--color-text);border-radius:0 0 var(--radius) var(--radius)}
@media (max-width:759px){.pb-lights__grid span{display:none}}
.pb-lights--js .pb-lights__grid img{filter:grayscale(1) brightness(.42)}
.pb-lights--js .pb-lights__grid span{opacity:.55}
.pb-lights--js.is-lit .pb-lights__grid img,.pb-lights--js .pb-lights__grid li:hover img{filter:none}
.pb-lights--js.is-lit .pb-lights__grid span,.pb-lights--js .pb-lights__grid li:hover span{opacity:1}
.pb-lights--js.is-lit .pb-lights__grid{box-shadow:0 0 60px rgba(53,230,230,.14)}
@media (prefers-reduced-motion:no-preference){
  .pb-lights--js .pb-lights__grid img{transition:filter 1.1s cubic-bezier(.4,0,.2,1)}
  .pb-lights--js .pb-lights__grid span{transition:opacity .8s ease}
  .pb-lights--js .pb-lights__grid{transition:box-shadow 1.6s ease 1s}
  .pb-lights--js.is-lit .pb-lights__grid li:nth-child(2) img{transition-delay:.18s}
  .pb-lights--js.is-lit .pb-lights__grid li:nth-child(3) img{transition-delay:.36s}
  .pb-lights--js.is-lit .pb-lights__grid li:nth-child(4) img{transition-delay:.54s}
  .pb-lights--js.is-lit .pb-lights__grid li:nth-child(5) img{transition-delay:.72s}
  .pb-lights--js.is-lit .pb-lights__grid li:nth-child(6) img{transition-delay:.9s}
}
@media (min-width:760px){
  .pb-lights{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-3);align-items:stretch;justify-items:stretch}
  .pb-lights__in{width:auto}
  .pb-lights__in img{height:100%;aspect-ratio:auto}
  .pb-lights__grid{gap:.75rem;align-content:space-between}
  .pb-lights figcaption,.pb-lights__grid span,.pb-styles__grid span{font-size:.95rem;padding:2.2rem 1rem .8rem}
}
.pb-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);margin:var(--space-4) 0 0}
.pb-stats dt{font-family:var(--font-heading);font-weight:700;font-size:var(--text-2xl);line-height:1.1;color:var(--neon-cyan)}
.pb-stats dd{margin:.35rem 0 0;color:var(--color-muted);font-size:.95rem;line-height:1.4}

/* four reasons: a plain ruled list beside the heading */
.pb-why__grid{display:grid;gap:0}
.pb-why__list{margin:0;display:grid}
.pb-why__list>div{display:grid;gap:.25rem;padding:1rem 0;border-top:1px solid var(--color-border)}
.pb-why__list>div:last-child{border-bottom:1px solid var(--color-border)}
.pb-why__list dt{font-weight:700;font-size:var(--text-lg);color:var(--color-text)}
.pb-why__list dd{margin:0;color:var(--color-muted);line-height:1.5}
@media (min-width:760px){
  .pb-why__grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:var(--space-5);align-items:start}
  .pb-why__list>div{grid-template-columns:minmax(0,2fr) minmax(0,3fr);gap:var(--space-3);align-items:baseline}
}

/* six style categories */
.pb-styles h2{margin-bottom:var(--space-2)}
.pb-styles__lead{margin-bottom:var(--space-4)}
.pb-styles__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem}
.pb-styles__grid img{aspect-ratio:1;object-fit:cover}
@media (min-width:760px){.pb-styles__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2)}}

/* three steps joined by one line */
.pb-how__steps{display:grid;gap:0;border-left:1px solid var(--color-border)}
.pb-how__steps li{position:relative;padding:0 0 var(--space-3) var(--space-3)}
.pb-how__steps li:last-child{padding-bottom:0}
.pb-how__steps li::before{content:"";position:absolute;left:-5px;top:.55rem;width:9px;height:9px;border-radius:50%;background:var(--neon-pink)}
.pb-how__steps h3{margin:0 0 .25rem}
.pb-how__steps p{margin:0;color:var(--color-muted);max-width:34ch;line-height:1.5}
.pb-how__extras{margin:var(--space-4) 0 0;color:var(--color-muted);max-width:58ch}
@media (min-width:760px){
  .pb-how__steps{grid-template-columns:repeat(3,minmax(0,1fr));border-left:0;border-top:1px solid var(--color-border)}
  .pb-how__steps li{padding:var(--space-3) var(--space-3) 0 0}
  .pb-how__steps li::before{left:0;top:-5px}
}
.pb-credit{margin-top:0;margin-bottom:0;padding-top:var(--space-3);padding-bottom:var(--space-3);border-top:1px solid var(--color-border);color:var(--color-muted);font-size:.9rem}

/* ---------- r18: two feature cards as event tickets (VR events, AI photobooth), straight after the hero ---------- */
.tix{padding-bottom:var(--space-4)}
.tix__row{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-4)}
.tix__ticket{--c:#59ccd3;--notch:14px;--stub:9.5rem;position:relative;display:flex;min-height:17rem;color:var(--color-text);text-decoration:none;background:var(--color-surface);border-radius:14px;filter:drop-shadow(0 0 0 transparent);transition:transform .35s cubic-bezier(.2,.7,.2,1),filter .35s;
  -webkit-mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle var(--notch) at calc(100% - var(--stub)) 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tix__ticket--pb{--c:#e0509a}
.tix__main{position:relative;flex:1;min-width:0;display:flex;align-items:flex-end;overflow:hidden;border-radius:14px 0 0 14px}
.tix__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) brightness(.55);transition:filter .5s,transform .8s cubic-bezier(.2,.7,.2,1)}
.tix__main::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(10,9,13,.95) 0%,rgba(10,9,13,.6) 45%,transparent 80%)}
.tix__text{position:relative;z-index:1;display:grid;gap:.5rem;padding:1.4rem 1.5rem}
.tix__title{font-family:var(--font-heading);font-weight:700;font-size:clamp(1.25rem,.9rem + 1.1vw,1.75rem);line-height:1.12;letter-spacing:-.01em;max-width:18ch;text-shadow:0 0 14px color-mix(in srgb,var(--c) 55%,transparent)}
.tix__line{font-size:1rem;color:var(--color-text);max-width:34ch}
.tix__stub{flex:0 0 var(--stub);display:flex;flex-direction:column;justify-content:space-between;gap:1rem;padding:1.4rem 1.1rem;border-left:2px dashed color-mix(in srgb,var(--c) 70%,transparent);background:color-mix(in srgb,var(--c) 12%,var(--color-surface))}
.tix__code{display:block;height:3.2rem;background:repeating-linear-gradient(90deg,var(--c) 0 2px,transparent 2px 5px,var(--c) 5px 6px,transparent 6px 10px,var(--c) 10px 13px,transparent 13px 15px);opacity:.75}
.tix__go{font-family:var(--font-heading);font-weight:700;font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--c);line-height:1.3}
.tix__ticket:hover,.tix__ticket:focus-visible{transform:translateY(-4px) rotate(-.6deg);filter:drop-shadow(0 0 18px color-mix(in srgb,var(--c) 45%,transparent));outline:0}
.tix__ticket--pb:hover,.tix__ticket--pb:focus-visible{transform:translateY(-4px) rotate(.6deg)}
.tix__ticket:hover .tix__img,.tix__ticket:focus-visible .tix__img{filter:none;transform:scale(1.04)}
.tix__ticket:focus-visible .tix__go{text-decoration:underline}
@media(max-width:900px){.tix__row{grid-template-columns:1fr}}
@media(max-width:520px){.tix__ticket{--stub:6.6rem;min-height:15rem}.tix__stub{padding:1rem .7rem}.tix__go{font-size:.72rem}.tix__text{padding:1rem 1.1rem}}
@media(hover:none){.tix__img{filter:saturate(.9) brightness(.7)}}
@media(prefers-reduced-motion:reduce){.tix__ticket,.tix__img{transition:none}.tix__ticket:hover,.tix__ticket:focus-visible{transform:none}}
/* owner, 2026-09-21: the whole ticket is the link. A clear layer over everything takes the click, whatever is under the pointer. */
.tix__ticket{cursor:pointer}
.tix__ticket::after{content:"";position:absolute;inset:0;z-index:5}

/* r20: what it looks like in the room. One wide photo and two tall ones on a row; the phone stacks the wide one over the pair. */
.pb-room h2{margin-bottom:var(--space-2)}
.pb-room__lead{color:var(--color-muted);max-width:52ch;margin-bottom:var(--space-4)}
.pb-room__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.6rem;list-style:none;margin:0;padding:0}
.pb-room__grid li{position:relative;overflow:hidden;border-radius:var(--radius);border:1px solid var(--color-border);background:var(--color-surface)}
.pb-room__grid img{display:block;width:100%;height:100%;object-fit:cover;aspect-ratio:4/5}
.pb-room__wide{grid-column:1/-1}
.pb-room__wide img{aspect-ratio:4/3}
.pb-room__grid span{position:absolute;left:0;right:0;bottom:0;padding:1.8rem .7rem .6rem;background:linear-gradient(transparent,rgba(10,9,13,.9));font-size:.85rem;font-weight:600;line-height:1.25;color:var(--color-text)}
@media (min-width:760px){
  .pb-room__grid{grid-template-columns:2fr 1fr 1fr;grid-auto-rows:clamp(18rem,30vw,26rem);gap:var(--space-2)}
  .pb-room__wide{grid-column:auto}
  .pb-room__grid img,.pb-room__wide img{aspect-ratio:auto}
  .pb-room__grid span{font-size:.95rem;padding:2.2rem 1rem .8rem}
}