/* Dram website: what every page shares. tokens, navigation, buttons, the playing card and the phone,
   floating suits, footer. Each page adds its own stylesheet after this one. */

:root {
  color-scheme: dark;
  --bg: #07080b;
  --ink: #f3f2ee;
  --muted: #a5a7b0;
  --soft: #d6d7dc;
  --line: rgba(255, 255, 255, .12);
  --acc: 34 197 94;              /* accent as "r g b"; the script changes it per game */
  --display: 'Anton', 'Arial Narrow', Impact, sans-serif;
  --head: 'Bricolage Grotesque', 'Manrope', system-ui, sans-serif;   /* long headlines and statements, in sentence case */
  --body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --pad: clamp(20px, 5vw, 64px);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 500 17px/1.55 var(--body); -webkit-font-smoothing: antialiased; }
img { max-width: 100%; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p { margin: 0; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 0 var(--pad); }

/* ---------- a 'skip to content' link for keyboard users, shown only when focused ---------- */
.skip { position: fixed; z-index: 60; left: 12px; top: -60px; padding: 10px 16px; border-radius: 10px; background: var(--ink); color: #0b0c10; font-weight: 800; }
.skip:focus { top: 12px; }

/* ---------- keyboard focus: always visible, in the page's colour ---------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, .strip:focus-visible { outline: 2px solid rgb(var(--acc)); outline-offset: 3px; }

/* ---------- navigation: a pill of links on wide screens, a full-screen menu on phones ---------- */
.nav { position: fixed; z-index: 50; inset: 0 0 auto 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px var(--pad); pointer-events: none; }
.nav > * { pointer-events: auto; }
.nav .logo { mix-blend-mode: difference; }
.nav .logo img { height: 42px; width: auto; }
.nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 5px; border-radius: 999px; background: rgba(16, 18, 24, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--line); }
.nav li a { display: flex; align-items: center; min-height: 42px; padding: 0 17px; border-radius: 999px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background .2s, color .2s; }
.nav li a:hover { background: rgba(255, 255, 255, .1); }
.nav li a[aria-current="page"] { background: var(--ink); color: #0b0c10; }
.menu-btn { display: none; align-items: center; gap: 10px; min-height: 46px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgba(16, 18, 24, .62); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); color: var(--ink); font: 700 15px/1 var(--body); cursor: pointer; }
.menu-btn i { position: relative; width: 16px; height: 2px; background: currentColor; transition: background .2s; }
.menu-btn i::before, .menu-btn i::after { content: ""; position: absolute; left: 0; width: 16px; height: 2px; background: currentColor; transition: transform .3s; }
.menu-btn i::before { top: -5px; } .menu-btn i::after { top: 5px; }
.menu-open .menu-btn i { background: transparent; }
.menu-open .menu-btn i::before { transform: translateY(5px) rotate(45deg); }
.menu-open .menu-btn i::after { transform: translateY(-5px) rotate(-45deg); }
.menu { position: fixed; z-index: 45; inset: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; padding: 100px 24px 40px; background: var(--bg); visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.menu-open .menu { visibility: visible; opacity: 1; transition: opacity .3s; }
.menu a { font-family: var(--display); text-transform: uppercase; font-size: clamp(48px, 15vw, 84px); line-height: 1.02; text-decoration: none; transform: translateY(30px); opacity: 0; transition: transform .5s cubic-bezier(.2, .7, .2, 1), opacity .4s; }
.menu a[aria-current="page"] { color: rgb(var(--acc)); }
.menu-open .menu a { transform: none; opacity: 1; transition-delay: calc(var(--i) * 60ms + 80ms); }
.menu p { margin-top: 26px; color: var(--muted); font-size: 16px; }
.menu p a { font: inherit; text-transform: none; color: var(--ink); }
@media (max-width: 760px) {
  .nav ul { display: none; }
  .menu-btn { display: inline-flex; }
}
@media (min-width: 761px) { .menu { display: none; } }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; min-height: 56px; padding: 0 30px; border-radius: 999px; background: rgb(var(--acc)); color: #07080b; font-weight: 800; font-size: 17px; text-decoration: none; transition: transform .2s ease; }
.btn:hover { transform: translateY(-2px) scale(1.03); }
.stores { display: flex; flex-wrap: wrap; gap: 10px; }
.store { display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: 999px; border: 1.5px solid rgba(255, 255, 255, .38); font-weight: 800; font-size: 15px; text-decoration: none; transition: border-color .2s, background .2s, color .2s; }
.store.fill { background: var(--ink); border-color: var(--ink); color: #0b0c10; }
.store:hover { border-color: rgb(var(--acc)); background: rgb(var(--acc)); color: #07080b; }

/* ---------- the pieces every scene uses: a playing card, a phone, floating suits ---------- */
.card { width: var(--cw, 220px); aspect-ratio: 5 / 7; transform-style: preserve-3d; }
.face { position: absolute; inset: 0; border-radius: 7.5% / 5.4%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.front { background: #101218; color: #fff; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .42), 0 30px 60px -18px rgba(0, 0, 0, .75), 0 8px 18px rgba(0, 0, 0, .4); }
.art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.front::after { content: ""; position: absolute; inset: 3.4% 4.6%; border: 1.5px solid rgba(255, 255, 255, .5); border-radius: 5% / 3.6%; pointer-events: none; }
.pip { position: absolute; display: grid; justify-items: center; gap: .08em; font-family: var(--display); font-size: calc(var(--cw, 220px) * .15); line-height: 1; text-shadow: 0 2px 8px rgba(0, 0, 0, .65); }
.pip svg { width: .62em; height: .62em; fill: currentColor; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .6)); }
.pip.tl { left: 9%; top: 6.5%; }
.pip.br { right: 9%; bottom: 6.5%; transform: rotate(180deg); }
.sheen { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 36%, rgba(255, 255, 255, .8) 50%, transparent 64%); background-size: 260% 100%; background-position: var(--sh, 120%) 0; mix-blend-mode: soft-light; }
.back { transform: rotateY(180deg); display: grid; place-items: center; background-color: #141722;
  background-image: repeating-linear-gradient(45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, .07) 0 2px, transparent 2px 14px);
  box-shadow: inset 0 0 0 6px #141722, inset 0 0 0 8px rgba(255, 255, 255, .5); }
.back img { width: 46%; opacity: .95; }

.phone { height: var(--ph, 520px); aspect-ratio: 9 / 16.6; padding: calc(var(--ph, 520px) * .016); border-radius: calc(var(--ph, 520px) * .075); background: #0c0d12; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 50px 90px -20px rgba(0, 0, 0, .85), 0 0 90px rgb(var(--acc) / .28); }
.phone img { width: 100%; height: 100%; object-fit: cover; border-radius: calc(var(--ph, 520px) * .06); }

.bits { position: absolute; inset: 0; pointer-events: none; }
.bit { position: absolute; left: 0; top: 0; will-change: transform; color: var(--ink); }
.bit svg { display: block; width: 100%; height: 100%; fill: currentColor; animation: drift var(--t, 9s) ease-in-out var(--dl, 0s) infinite alternate; }
.bit.acc { color: rgb(var(--acc)); }
@keyframes drift { from { transform: rotate(var(--r0, -12deg)) translateY(-8px); } to { transform: rotate(var(--r1, 14deg)) translateY(8px); } }

/* ---------- elements that rise into place as they come into view (the script adds .motion) ---------- */
.motion .reveal { opacity: 0; transform: translateY(46px) rotateX(-16deg); transform-origin: 50% 100%; transition: opacity .7s ease var(--d, 0s), transform .9s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); }
.motion .reveal.in { opacity: 1; transform: none; }
.motion .reveal.d1 { --d: .08s; } .motion .reveal.d2 { --d: .16s; } .motion .reveal.d3 { --d: .24s; }

/* ---------- footer ---------- */
footer { border-top: 1px solid var(--line); padding: 56px 0 40px; font-size: 15px; }
.fgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); gap: 32px 40px; }
.flogo { height: 54px; width: auto; }
.addr { margin-top: 16px; color: var(--muted); line-height: 1.5; }
footer h4 { margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
footer a { display: block; padding: 5px 0; text-decoration: none; }
footer a:hover { color: rgb(var(--acc)); }
.legal { margin-top: 36px; color: var(--muted); font-size: 14px; }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border-radius: 50%; border: 1px solid var(--line); }
.socials a:hover { border-color: rgb(var(--acc)); }
.socials svg { width: 18px; height: 18px; fill: currentColor; }

/* Dram website: every page except home (games, a game, about, services, contact, legal, not found).
   Loaded after shared.css. --acc is the page's colour as "r g b" (set on <body>). Short titles use the
   tall display face in capitals; long headlines and statements use --head in sentence case. */

.card { position: relative; }
.eyebrow { font-size: 13px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; color: rgb(var(--acc)); }
.lede { max-width: 40ch; font-size: clamp(17px, 1.5vw, 22px); color: var(--soft); }
.sec-title { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .92; font-size: clamp(48px, 7vw, 116px); margin-bottom: clamp(28px, 5vh, 56px); text-wrap: balance; }
.statement { font-family: var(--head); font-weight: 600; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.22; letter-spacing: -.015em; text-wrap: pretty; color: var(--ink); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }

/* the four suits, drawn with a mask so they take the text colour */
.spade { --suit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C9.5 6 3.5 9.2 3.5 13.6c0 2.6 2 4.4 4.3 4.4 1.3 0 2.4-.5 3.2-1.4-.2 1.9-.9 3.5-2.2 4.9h6.4c-1.3-1.4-2-3-2.2-4.9.8.9 1.9 1.4 3.2 1.4 2.3 0 4.3-1.8 4.3-4.4C20.5 9.2 14.5 6 12 2z'/%3E%3C/svg%3E"); --sc: 74 222 128; }
.heart { --suit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 21s-7.5-4.9-9.6-9.4C.9 8.3 2.9 4.5 6.6 4.5c2.1 0 3.9 1.1 5.4 3 1.5-1.9 3.3-3 5.4-3 3.7 0 5.7 3.8 4.2 7.1C19.5 16.1 12 21 12 21z'/%3E%3C/svg%3E"); --sc: 248 113 113; }
.diamond { --suit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2l7.5 10L12 22 4.5 12z'/%3E%3C/svg%3E"); --sc: 56 189 248; }
.club { --suit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='7.2' r='4.2'/%3E%3Ccircle cx='6.6' cy='13.6' r='4.2'/%3E%3Ccircle cx='17.4' cy='13.6' r='4.2'/%3E%3Cpath d='M12 11c-.1 4-.8 7.2-2.4 10h4.8c-1.6-2.8-2.3-6-2.4-10z'/%3E%3C/svg%3E"); --sc: 250 204 21; }
.v-pip::after { background: currentColor; -webkit-mask: var(--suit) center / contain no-repeat; mask: var(--suit) center / contain no-repeat; }

/* ---------- page hero ---------- */
.phero { position: relative; overflow: clip; padding: clamp(130px, 21vh, 210px) 0 clamp(64px, 11vh, 120px); }
.phero-bg { position: absolute; inset: 0; pointer-events: none; }
.phero-bg .glow { position: absolute; inset: 0; background: radial-gradient(52% 62% at 80% 26%, rgb(var(--acc) / .28), transparent 70%), radial-gradient(40% 50% at 0% 100%, rgb(var(--acc) / .12), transparent 70%), linear-gradient(to top, var(--bg), transparent 30%); }
.phero-bg::after { content: ""; position: absolute; inset: 0; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.phero-bg .bit.acc { color: rgb(var(--acc)); }
.phero-in { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(16px, 2.6vh, 28px); }
.phero h1, .ghero h1 { font-family: var(--display); font-weight: 400; text-transform: uppercase; line-height: .9; letter-spacing: .005em; font-size: clamp(64px, 11vw, 190px); max-width: 10ch; text-wrap: balance; }
.split .w { display: inline-block; }
.motion .split .w { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--i) * 70ms + 80ms); }
.motion .phero-in > :not(h1), .motion .gcopy > :not(h1) { animation: rise .9s cubic-bezier(.2, .7, .2, 1) both; animation-delay: .35s; }
@keyframes rise { from { opacity: 0; translate: 0 50px; } to { opacity: 1; translate: 0 0; } }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 18px 40px; max-width: 820px; }
.facts p { color: var(--soft); }
.facts b { display: block; margin-bottom: 4px; color: var(--ink); font-size: 13px; letter-spacing: .16em; text-transform: uppercase; }
.idx { display: flex; align-items: center; gap: 14px; font-size: 13px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
.idx b { color: rgb(var(--acc)); font-weight: 800; }
.rating { font-size: 15px; color: var(--muted); }
.rating b { font-family: var(--display); font-weight: 400; font-size: 28px; color: var(--ink); margin-right: 8px; vertical-align: -2px; }

/* ---------- games: a hand of cards that deals itself into the grid as you scroll ---------- */
.games-hero { min-height: min(100vh, 1000px); }
.hand { position: absolute; z-index: 1; right: 1vw; bottom: 6vh; width: 48vw; height: 80vh; --cw: clamp(150px, 14.5vw, 260px); --spread: 8deg; pointer-events: none; }
.hand-card { position: absolute; left: 50%; bottom: 0; margin-left: calc(var(--cw) / -2); transform-origin: 50% 190%; transform: rotate(calc((var(--k) - 3.5) * var(--spread))); }
.motion .hand-card .card { animation: deal 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 80ms + 200ms); }
@keyframes deal { from { opacity: 0; translate: 30vw 40vh; rotate: 40deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.flight { position: fixed; z-index: 30; inset: 0; pointer-events: none; perspective: 1600px; }
.flight .card { position: absolute; left: 0; top: 0; will-change: transform; }
.flight .card.gone { visibility: hidden; }
.motion .flight .card { animation: deal 1s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--k) * 80ms + 200ms); }

.deck-list { padding: clamp(40px, 8vh, 100px) 0 clamp(80px, 14vh, 160px); }
.deck-list .wrap { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(250px, 100%), 1fr)); gap: 64px 32px; }
.gitem { display: flex; flex-direction: column; gap: 20px; }
.gcard { display: block; container-type: inline-size; perspective: 1000px; }
.gcard .card { --cw: 100cqw; width: 100%; }
.dealing .gitem:not(.landed) .gcard .card { opacity: 0; }
.gcard .tilt-in { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.gcard:hover .tilt-in { transform: translateY(-12px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition-duration: .12s; }
.gcard .front { transition: box-shadow .35s; }
.gcard:hover .front { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 30px 60px -18px rgba(0, 0, 0, .75), 0 0 60px rgb(var(--c) / .55); }
.gtext { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.gtext .idx b { color: rgb(var(--c)); }
.gtext h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(30px, 2.6vw, 40px); line-height: 1; }
.gtext h2 a { text-decoration: none; }
.gtext h2 a:hover { color: rgb(var(--c)); }
.gtext .desc { color: var(--soft); font-size: 15.5px; line-height: 1.45; }
.gtext .store { min-height: 44px; padding: 0 16px; font-size: 14px; }

/* cards that turn over from their back as they come into view (phones, and anywhere a deal would be too much) */
.motion .flip .card { rotate: y 180deg; transition: rotate 1s cubic-bezier(.2, .7, .2, 1) var(--fd, 0s); }
.motion .flip.in .card { rotate: y 0deg; }

/* ---------- one game: the card flips into the phone and the game lights up ---------- */
.ghero { position: relative; }
.ghero-pin { position: relative; overflow: clip; min-height: min(100vh, 1000px); display: flex; align-items: center; padding: 110px 0 50px; }
.motion.pin .ghero { height: 200vh; }
.motion.pin .ghero-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; min-height: 0; padding: 90px 0 30px; }
.ghero-in { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); align-items: center; gap: 3vw; width: 100%; }
.gcopy { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; }
.crumbs { display: flex; gap: 10px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--soft); text-underline-offset: 3px; }
.ghero h1 { font-size: clamp(56px, 7.4vw, 128px); max-width: 9ch; }
.ghero h1.long { font-size: clamp(48px, 5.6vw, 96px); max-width: 11ch; }
.gword { position: absolute; left: 0; right: 0; bottom: -3vh; text-align: center; white-space: nowrap; font-family: var(--display); text-transform: uppercase; font-size: min(30vh, 25vw); line-height: .82; color: transparent; -webkit-text-stroke: 1.5px rgb(var(--acc) / .35); }
.gvis { position: relative; height: min(74vh, 720px); perspective: 1400px; }
.gvis-in { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--vx, 0deg)) rotateY(var(--vy, 0deg)); will-change: transform; }
.gv-phone { position: absolute; right: 6%; top: 50%; translate: 0 -50%; --ph: min(68vh, 640px, 46vw); transform-style: preserve-3d; }
.gv-phone .phone { position: relative; transform: rotateY(-14deg) rotateZ(3deg); background: #0c0d12; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 50px 90px -20px rgba(0, 0, 0, .85), 0 0 110px rgb(var(--acc) / var(--gl, .35)); }
.g-flash { position: absolute; inset: 3%; border-radius: calc(var(--ph) * .06); background: radial-gradient(closest-side, rgba(255, 255, 255, .9), rgb(var(--acc) / .5) 60%, transparent); opacity: 0; pointer-events: none; mix-blend-mode: screen; }
.gv-card { position: absolute; left: 6%; top: 30%; --cw: min(15vw, 27vh, 250px); transform-style: preserve-3d; }
.gv-card .card { transform: translateZ(90px) rotateY(18deg) rotateZ(-8deg); will-change: transform; }
.motion .gv-phone .phone { animation: rise 1.1s cubic-bezier(.2, .7, .2, 1) both .15s; }
.motion .gv-card { animation: flipin 1.3s cubic-bezier(.2, .7, .2, 1) both .35s; }
@keyframes flipin { from { opacity: 0; translate: -10vw 20vh; } to { opacity: 1; translate: 0 0; } }
.g-cue { display: none; }
.motion.pin .g-cue { display: flex; flex-direction: column; align-items: center; gap: 10px; position: absolute; z-index: 3; left: 50%; bottom: 20px; translate: -50% 0; font-size: 12px; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); transition: opacity .3s; }
.g-cue i { width: 1.5px; height: 36px; background: linear-gradient(var(--ink), transparent); transform-origin: top; animation: cue 1.8s ease-in-out infinite; }
@keyframes cue { 0% { transform: scaleY(0); } 50% { transform: scaleY(1); } 100% { transform: scaleY(1); opacity: 0; } }

.gabout { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.gabout-in { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: clamp(32px, 5vw, 90px); align-items: start; }
.gabout-copy { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 110px; }
.features { list-style: none; margin: 0; padding: 0; }
.features li { display: flex; gap: 18px; padding: 20px 0; border-top: 1px solid var(--line); }
.features li:last-child { border-bottom: 1px solid var(--line); }
.fpip svg { width: 22px; height: 22px; margin-top: 2px; fill: rgb(var(--acc)); }
.features p { color: var(--soft); font-size: 17px; }
.features b { display: block; color: var(--ink); font-family: var(--head); font-weight: 700; font-size: 20px; letter-spacing: -.01em; }

.gshots { padding: clamp(60px, 10vh, 120px) 0 clamp(40px, 6vh, 80px); }
.gshots .sec-title { margin-bottom: 0; }
.strip { display: flex; gap: clamp(16px, 2.6vw, 40px); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: var(--pad); padding: 40px var(--pad) 56px; perspective: 1200px; scrollbar-width: none; cursor: grab; }
.strip::-webkit-scrollbar { display: none; }
.strip.drag { cursor: grabbing; scroll-snap-type: none; }
.shot { flex: 0 0 auto; margin: 0; scroll-snap-align: start; --ph: clamp(360px, 62vh, 600px); transform: rotateY(var(--ry, 0deg)) scale(var(--s, 1)); }
.shot:first-child { margin-left: auto; }
.shot:last-child { margin-right: auto; }
.shot .phone { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .25), 0 40px 70px -20px rgba(0, 0, 0, .8); }
.shot img { pointer-events: none; -webkit-user-drag: none; }

.gmore { padding: clamp(40px, 8vh, 100px) 0 clamp(70px, 12vh, 130px); overflow: clip; }
.gmore .sec-title { margin-bottom: 0; }
.fan { position: relative; height: clamp(300px, 44vh, 440px); --cw: clamp(120px, 11.5vw, 190px); }
.fan-card { position: absolute; left: 50%; bottom: 6%; margin-left: calc(var(--cw) / -2); transform-origin: 50% 210%; transform: rotate(calc((var(--k) - 3) * 9deg)); transition: transform .4s cubic-bezier(.2, .7, .2, 1); text-decoration: none; }
.fan-card:hover, .fan-card:focus-visible { z-index: 2; transform: rotate(calc((var(--k) - 3) * 9deg)) translateY(-46px) scale(1.07); }
.fan-card:hover .front, .fan-card:focus-visible .front { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .6), 0 0 60px rgb(var(--c) / .6); }
.fan-card span { position: absolute; left: 50%; bottom: calc(100% + 14px); translate: -50% 0; white-space: nowrap; font-family: var(--display); text-transform: uppercase; font-size: 22px; opacity: 0; transition: opacity .25s; }
.fan-card:hover span, .fan-card:focus-visible span { opacity: 1; }
.pn { display: flex; justify-content: space-between; gap: 20px; margin-top: 30px; }
.pn a { display: flex; flex-direction: column; gap: 4px; font-family: var(--display); text-transform: uppercase; font-size: clamp(22px, 2.6vw, 36px); line-height: 1; text-decoration: none; }
.pn a:last-child { text-align: right; }
.pn small { font-family: var(--body); font-size: 12px; font-weight: 800; letter-spacing: .18em; color: var(--muted); }
.pn a:hover { color: rgb(var(--acc)); }

/* ---------- about ---------- */
.aover { padding: clamp(60px, 10vh, 120px) 0; }
.split2 { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: clamp(32px, 6vw, 100px); align-items: center; }
.split2 .copy { display: flex; flex-direction: column; gap: 22px; }
.split2 .copy p:not(.statement) { color: var(--soft); font-size: 19px; max-width: 54ch; }
.stack3 { position: relative; height: min(64vh, 560px); --cw: min(19vw, 32vh, 270px); }
.s3 { position: absolute; left: 50%; top: 50%; margin: calc(var(--cw) * -.7) 0 0 calc(var(--cw) * -.5); }
.s3:nth-child(1) .card { transform: translate(-46%, -10%) rotate(-14deg); }
.s3:nth-child(2) .card { transform: translate(0, -4%) rotate(2deg); }
.s3:nth-child(3) .card { transform: translate(44%, 8%) rotate(15deg); }

.vm { padding: clamp(30px, 6vh, 70px) 0 clamp(70px, 12vh, 140px); }
.vm-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 1fr)); gap: 24px; }
.panel { display: flex; flex-direction: column; gap: 18px; padding: clamp(28px, 4vw, 52px); border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(80% 90% at 100% 0%, rgb(var(--acc) / .16), transparent 70%), #0e1015; }
.panel .big { font-family: var(--head); font-weight: 600; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.18; letter-spacing: -.015em; }
.panel p:last-child { color: var(--soft); font-size: 18px; }

.values { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.vgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 22px; perspective: 1400px; }
.value .tilt-in { height: 100%; display: flex; flex-direction: column; gap: 10px; padding: 28px 28px 32px; border-radius: 24px; border: 1px solid rgba(255, 255, 255, .16); background: linear-gradient(160deg, rgb(var(--sc) / .2), transparent 55%), #101218; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s ease; }
.v-pip { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; font-family: var(--display); font-size: 34px; line-height: 1; color: rgb(var(--sc)); }
.v-pip b { font-weight: 400; }
.v-pip::after { content: ""; width: 24px; height: 24px; }
.value h3 { margin-top: 16px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 34px; line-height: 1; }
.value p:last-child { color: var(--soft); font-size: 17px; }

.team { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.tgrid { position: relative; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 56px 28px; }
.person { display: flex; flex-direction: column; gap: 18px; }
.p-card { container-type: inline-size; perspective: 1100px; }
.p-card .card { --cw: 100cqw; width: 100%; }
.p-card .tilt-in { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .45s cubic-bezier(.2, .7, .2, 1); }
.p-card .pip { font-size: calc(var(--cw) * .11); }
.p-card .card, .svc-card .card, .c-flip .card { will-change: transform; }
.p-text { display: flex; flex-direction: column; gap: 6px; }
.person h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1.05; }
.p-role { color: rgb(var(--sc)); font-weight: 800; font-size: 15px; }
.p-bio { color: var(--soft); font-size: 16px; }

.band { position: relative; overflow: hidden; padding: clamp(80px, 14vh, 160px) 0; text-align: center; border-top: 1px solid var(--line); background: radial-gradient(50% 70% at 50% 100%, rgb(var(--acc) / .25), transparent 70%); }
.band-in { display: flex; flex-direction: column; align-items: center; gap: 26px; }
.band h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(48px, 8vw, 132px); line-height: .92; max-width: 13ch; text-wrap: balance; }
.band-text { max-width: 52ch; color: var(--soft); font-size: 19px; }
.band .row { justify-content: center; }

/* ---------- services: a gallery that moves sideways as you scroll down ---------- */
.offer { padding: clamp(70px, 12vh, 140px) 0 0; }
.hs-track { display: grid; gap: 28px; padding: 0 var(--pad) clamp(70px, 12vh, 140px); }
.hs-bar { display: none; }
.svc { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); align-items: center; gap: clamp(28px, 5vw, 80px); padding: clamp(28px, 4vw, 56px); border-radius: 34px; border: 1px solid var(--line); background: radial-gradient(70% 90% at 0% 50%, rgb(var(--sc) / .2), transparent 70%), #0e1015; }
.svc-card { display: flex; justify-content: center; perspective: 1200px; }
.svc-card-in { width: min(320px, 70vw); container-type: inline-size; transform-style: preserve-3d; }
.svc-card .card { --cw: 100cqw; width: 100%; }
.svc-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; }
.svc-copy .eyebrow { color: rgb(var(--sc)); }
.svc-copy h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 5vw, 84px); line-height: .95; }
.svc-text { font-family: var(--head); font-weight: 500; font-size: clamp(20px, 1.8vw, 26px); line-height: 1.3; max-width: 30ch; }
.ticks { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 10px 28px; width: 100%; }
.ticks li { display: flex; align-items: center; gap: 12px; font-weight: 700; color: var(--soft); }
.ticks li::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 2px; transform: rotate(45deg); background: rgb(var(--sc)); }
.motion.pin .hscroll { height: calc(var(--panels, 4) * 75vh + 25vh); }
.motion.pin .hs-pin { position: sticky; top: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex; flex-direction: column; justify-content: center; }
.motion.pin .hs-track { display: flex; width: max-content; padding: 0 var(--pad); gap: 3vw; will-change: transform; }
.motion.pin .svc { width: min(1080px, 80vw); min-height: min(68vh, 620px); }
.motion.pin .svc-copy { transition: opacity .3s; }
.motion.pin .hs-bar { display: block; position: absolute; left: var(--pad); right: var(--pad); bottom: 6vh; height: 2px; background: var(--line); }
.hs-bar i { display: block; height: 100%; background: rgb(var(--acc)); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }

.story { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); background: radial-gradient(60% 60% at 0% 0%, rgb(var(--acc) / .14), transparent 70%); }
.story-in { display: flex; flex-direction: column; gap: 26px; }
.story h2 { max-width: 20ch; font-family: var(--head); font-weight: 700; font-size: clamp(36px, 4.6vw, 72px); line-height: 1.04; letter-spacing: -.025em; text-wrap: balance; }
.story-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); gap: 18px 56px; margin-top: 10px; }
.story-cols p { color: var(--soft); font-size: 19px; }

.portfolio { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.pgrid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 22px; perspective: 1400px; }
.pcard { grid-column: span 2; }
.pcard:nth-child(4), .pcard:nth-child(5) { grid-column: span 3; }
.pcard .tilt-in { height: 100%; display: flex; flex-direction: column; border-radius: 24px; overflow: hidden; border: 1px solid var(--line); background: #0f1116; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .4s ease; }
.pcard img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.pc-body { display: flex; flex-direction: column; gap: 12px; padding: 22px 24px 26px; flex: 1; }
.pcard h3 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: 30px; line-height: 1; }
.pcard p { color: var(--soft); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; }
.tags span { padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13px; font-weight: 700; color: var(--ink); }

/* ---------- About and Services openings: a fan of three cards that turn over as the page opens ---------- */
.fanhero { min-height: min(86vh, 820px); }
.fanhero h1 { font-size: clamp(64px, 9vw, 160px); max-width: 9ch; }
.hero-fan { position: absolute; z-index: 1; right: 16vw; top: 54%; translate: 0 -50%; width: min(18vw, 36vh, 300px); aspect-ratio: 5 / 7; perspective: 1200px; }
.hero-fan .tilt-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.hf-card { position: absolute; inset: 0; container-type: inline-size; transform-origin: 50% 130%; transform: rotate(calc((var(--k) - 1) * 13deg)) translateX(calc((var(--k) - 1) * 22%)) translateZ(calc(var(--k) * 8px)); }
.hf-card .card { --cw: 100cqw; width: 100%; }
.motion .hf-card .card { animation: turn 1.4s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--k) * 150ms + .3s); }

/* ---------- contact ---------- */
.chero { min-height: min(86vh, 820px); }
.c-vis { position: absolute; z-index: 1; right: 8vw; top: 50%; translate: 0 -46%; width: min(24vw, 46vh, 380px); container-type: inline-size; perspective: 1200px; }
.c-vis .tilt-in { transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(6deg); transition: transform .5s cubic-bezier(.2, .7, .2, 1); }
.c-flip .card { --cw: 100cqw; width: 100%; }
.motion .c-flip .card { animation: turn 1.4s cubic-bezier(.2, .7, .2, 1) both .3s; }
@keyframes turn { from { rotate: y 180deg; translate: 0 30vh; } to { rotate: y 0deg; translate: 0 0; } }
.contact { padding: clamp(40px, 6vh, 80px) 0 clamp(70px, 12vh, 140px); }
.c-grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 28px; align-items: start; }
.cform { display: flex; flex-direction: column; gap: 18px; padding: clamp(24px, 4vw, 48px); border-radius: 30px; border: 1px solid var(--line); background: radial-gradient(80% 70% at 100% 0%, rgb(var(--acc) / .14), transparent 70%), #0e1015; }
.cform h2 { font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(34px, 3.6vw, 54px); line-height: 1; margin-bottom: 6px; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: 18px; }
.cform label { display: block; margin-bottom: 8px; font-size: 14px; font-weight: 800; color: var(--soft); }
.cform input, .cform select, .cform textarea { width: 100%; min-height: 50px; padding: 12px 16px; border-radius: 14px; border: 1px solid rgba(255, 255, 255, .18); background: #07080b; color: var(--ink); font: 500 16px/1.4 var(--body); }
.cform textarea { resize: vertical; min-height: 150px; }
.cform input:focus, .cform select:focus, .cform textarea:focus { border-color: rgb(var(--acc)); outline: none; box-shadow: 0 0 0 3px rgb(var(--acc) / .25); }
.cform .btn { align-self: flex-start; border: 0; cursor: pointer; font-family: var(--body); }
.hint { color: var(--muted); font-size: 14px; }
.c-info { display: grid; gap: 16px; }
.ccard { display: flex; flex-direction: column; gap: 10px; padding: 26px 28px; border-radius: 24px; border: 1px solid var(--line); background: #0e1015; }
.ccard p:not(.eyebrow) { color: var(--soft); }
.ccard a { color: var(--ink); text-underline-offset: 4px; }
.ccard .store { min-height: 44px; padding: 0 18px; font-size: 14px; text-decoration: none; }
.faqs { padding: clamp(70px, 12vh, 140px) 0; border-top: 1px solid var(--line); }
.faqs-in { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(28px, 5vw, 80px); align-items: start; }
.faq { border-top: 1px solid var(--line); }
.faq:last-child { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 20px; min-height: 64px; padding: 16px 0; cursor: pointer; font-family: var(--head); font-size: 21px; font-weight: 600; letter-spacing: -.01em; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: 0 0 auto; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); color: rgb(var(--acc)); font-size: 22px; transition: transform .3s; }
.faq[open] summary::after { transform: rotate(45deg); }
.faq p { padding: 0 0 22px; color: var(--soft); max-width: 62ch; }

/* ---------- legal pages ---------- */
.legal main { position: relative; padding: clamp(120px, 18vh, 170px) 0 clamp(70px, 12vh, 120px); }
.legal main::before { content: ""; position: absolute; inset: 0 0 auto; height: 560px; background: radial-gradient(55% 80% at 82% 0%, rgb(var(--acc) / .16), transparent 70%); pointer-events: none; }
.legal-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 760px); justify-content: center; gap: 56px; padding: 0 var(--pad); }
.legal-wrap .doc { padding: 0; margin: 0; }
.toc { position: sticky; top: 110px; align-self: start; max-height: calc(100vh - 140px); overflow: auto; font-size: 14px; }
.toc p { margin-bottom: 10px; font-size: 12px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.toc a { display: block; padding: 5px 0 5px 12px; border-left: 1px solid var(--line); color: var(--muted); text-decoration: none; }
.toc a:hover { color: var(--ink); border-color: rgb(var(--acc)); }
.doc h2[id] { scroll-margin-top: 100px; }
.doc { position: relative; max-width: 760px; margin: 0 auto; padding: 0 var(--pad); color: var(--soft); font-size: 17px; line-height: 1.65; }
.doc h1 { margin: 0 0 24px; font-family: var(--display); font-weight: 400; text-transform: uppercase; font-size: clamp(44px, 7vw, 84px); line-height: .95; color: var(--ink); }
.doc h1 ~ h1 { margin-top: 64px; font-size: clamp(34px, 5vw, 56px); }
.doc h2 { margin: 40px 0 12px; font-family: var(--head); font-weight: 700; font-size: 26px; line-height: 1.2; letter-spacing: -.01em; color: var(--ink); }
.doc h3 { margin: 28px 0 8px; font-size: 19px; color: var(--ink); }
.doc h4 { margin: 24px 0 8px; font-size: 17px; color: var(--ink); }
.doc p, .doc li { margin: 0 0 12px; }
.doc ul, .doc ol { padding-left: 22px; margin: 0 0 16px; }
.doc a { color: rgb(var(--acc)); text-underline-offset: 3px; overflow-wrap: anywhere; }
.doc strong { color: var(--ink); }
.doc .lede { max-width: none; font-size: 19px; }
.doc .box { margin: 22px 0; padding: 18px 22px; border-radius: 16px; border: 1px solid var(--line); background: #0e1015; }
.doc footer { margin-top: 40px; padding: 18px 0 0; border-top: 1px solid var(--line); font-size: 15px; }

/* ---------- not found ---------- */
.nf { min-height: min(100vh, 900px); display: flex; align-items: center; }
.nf-in { align-items: center; text-align: center; }
.nf h1 { max-width: 14ch; font-size: clamp(48px, 8vw, 128px); }
.nf .row { justify-content: center; }
.nf-cards { position: relative; width: 300px; height: 190px; --cw: 104px; margin-bottom: 10px; }
.nf-card { position: absolute; left: 50%; top: 0; margin-left: -52px; animation: bob 4s ease-in-out infinite; }
.nf-card:nth-child(1) { transform: translateX(-80px) rotate(-14deg); animation-delay: -1s; }
.nf-card:nth-child(3) { transform: translateX(80px) rotate(14deg); animation-delay: -2s; }
.nf-card .back { transform: none; }
@keyframes bob { 50% { translate: 0 -12px; } }

/* ---------- tablets ---------- */
@media (max-width: 1100px) {
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pcard, .pcard:nth-child(4), .pcard:nth-child(5) { grid-column: span 1; }
  .pcard:nth-child(5) { grid-column: span 2; }
}

/* ---------- phones ---------- */
@media (max-width: 899px) {
  .phero h1 { font-size: clamp(56px, 16vw, 110px); }
  .games-hero { min-height: 0; padding-bottom: 78vw; }
  .hand { right: 50%; translate: 50% 0; bottom: 4vw; width: 100vw; height: 70vw; --cw: clamp(96px, 25vw, 170px); }
  .ghero-pin { min-height: 0; padding-top: 96px; }
  .ghero-in { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .gvis { order: -1; height: min(54vh, 480px); }
  .gv-phone { right: 8%; --ph: min(54vh, 470px, 78vw); }
  .gv-card { left: 4%; top: 30%; --cw: min(36vw, 25vh, 200px); }
  .ghero h1 { font-size: clamp(48px, 13vw, 96px); }
  .ghero h1.long { font-size: clamp(40px, 10.5vw, 76px); }
  .gword { bottom: auto; top: 30%; font-size: 30vw; }
  .gabout-in, .split2, .c-grid, .faqs-in { grid-template-columns: minmax(0, 1fr); }
  .gabout-copy { position: static; }
  .stack3 { height: 70vw; --cw: 36vw; }
  .svc { grid-template-columns: minmax(0, 1fr); padding: 26px 22px 30px; }
  .svc-card-in { width: min(230px, 60vw); }
  .pgrid { grid-template-columns: minmax(0, 1fr); }
  .pcard, .pcard:nth-child(4), .pcard:nth-child(5) { grid-column: auto; }
  .chero { min-height: 0; padding-bottom: 92vw; }
  .c-vis { right: 50%; top: auto; bottom: 6vw; translate: 50% 0; width: 52vw; }
  .fanhero { min-height: 0; padding-bottom: 92vw; }
  .hero-fan { right: 50%; top: auto; bottom: 10vw; translate: 50% 0; width: 42vw; }
  .fan { display: flex; gap: 16px; height: auto; overflow-x: auto; padding: 40px var(--pad) 20px; --cw: 132px; scrollbar-width: none; }
  .fan-card { position: relative; left: auto; bottom: auto; flex: 0 0 auto; margin: 0; transform: none; }
  .fan-card:hover, .fan-card:focus-visible { transform: translateY(-8px); }
  .fan-card span { position: static; display: block; translate: none; margin-top: 12px; white-space: normal; font-size: 17px; opacity: 1; }
  .shot { --ph: min(58vh, 520px, 112vw); }
  .legal-wrap { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .toc { display: none; }
  .tgrid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .deck-list .wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 14px; }
  .gitem { gap: 12px; }
  .gtext { gap: 6px; }
  .gtext .idx { gap: 8px; font-size: 11px; letter-spacing: .12em; }
  .gtext h2 { font-size: clamp(22px, 6.4vw, 30px); }
  .gtext .desc { font-size: 14px; }
  .gtext .stores { gap: 6px; }
  .gtext .store { padding: 0 11px; font-size: 13px; }
  .person { flex-direction: row; align-items: flex-start; gap: 18px; }
  .p-card { flex: 0 0 34%; }
  .person h3 { font-size: 24px; }
  .p-role { font-size: 14px; }
  .p-bio { font-size: 15px; }
}