/* =========================================================
   WINSBITS — style.css
   Brand colours and fonts live in :root below. Change them
   there and the whole site follows.
   ========================================================= */
:root {
  --bg: #0a0a0a;
  --bg-2: #141414;
  --bg-3: #1d1d1d;
  --line: rgba(255, 255, 255, .1);
  --line-2: rgba(255, 255, 255, .18);
  --text: #f2f2ee;
  --muted: #9a9a96;
  --light: #ebeae5;        /* light sections (use cases) */
  --light-text: #0d0d0d;
  --accent: #00ff9d;       /* Winsbits green */
  --red: #ff4d3d;
  --accent-text: #00ff9d;  /* green used as text (darker in light mode) */
  --on-text: #0a0a0a;      /* text on a --text coloured button */
  --glass: rgba(20, 20, 20, .72);
  --tint: rgba(255, 255, 255, .03);
  --tint-2: rgba(255, 255, 255, .07);
  --logo-filter: none;            /* logo files are white already */
  --nav-fade: 10, 10, 10;

  --f-display: "Tomorrow", "Arial Narrow", system-ui, sans-serif;
  --f-pixel: "Silkscreen", ui-monospace, monospace;
  --f-body: "DM Sans", system-ui, -apple-system, "Segoe UI", sans-serif;

  --gutter: clamp(16px, 4vw, 48px);
  --radius: 24px;
  --ease: cubic-bezier(.2, .7, .1, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
/* Pages only scroll up and down, never sideways (older iPhone Safari doesn't know overflow: clip, hence the fallback) */
html, body { overflow-x: hidden; }
@supports (overflow: clip) { html, body { overflow-x: clip; } }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 17px/1.55 var(--f-body);
  -webkit-font-smoothing: antialiased; overflow-x: clip;
}
img, video, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
::selection { background: var(--accent); color: #000; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: 1320px; margin: 0 auto; padding: 0 var(--gutter); }
.narrow { max-width: 860px; }
.center { text-align: center; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: -9999px; top: 8px; z-index: 100; background: #fff; color: #000; padding: 8px 14px; border-radius: 99px; }
.skip:focus { left: 8px; }

/* Light mode: same brand, inverted */
[data-theme="light"] {
  --bg: #f4f3ef;
  --bg-2: #ffffff;
  --bg-3: #e7e6e1;
  --line: rgba(0, 0, 0, .1);
  --line-2: rgba(0, 0, 0, .18);
  --text: #0d0d0d;
  --muted: #64645e;
  --light: #0f0f0f;        /* the use-case block flips to dark */
  --light-text: #f2f2ee;
  --accent-text: #00995c;
  --on-text: #f4f3ef;
  --glass: rgba(255, 255, 255, .78);
  --tint: rgba(0, 0, 0, .03);
  --tint-2: rgba(0, 0, 0, .06);
  --logo-filter: invert(1);       /* white logos become dark in light mode */
  --nav-fade: 244, 243, 239;
  color-scheme: light;
}
[data-theme="light"] .light .lead { color: #a3a39e; }
[data-theme="light"] .light .case-meta p { color: #8d8d88; }
[data-theme="light"] .case-img { background: #222; }

[data-theme="light"] .tg-float, [data-theme="light"] .quote { box-shadow: 0 10px 30px rgba(0,0,0,.08); }
[data-theme="light"] .fan figure { box-shadow: 0 30px 60px -24px rgba(0,0,0,.35); }
:root { color-scheme: dark; }

/* ---------- Toggles (language + theme) ---------- */
.toggles { display: flex; align-items: center; gap: 6px; margin-left: 6px; }
.tog {
  height: 40px; border-radius: 99px; border: 1px solid var(--line-2); background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s;
}
.tog:hover { border-color: var(--text); }
.lang-tog { padding: 3px; gap: 2px; font: 400 10px var(--f-pixel); }
.lang-tog span { padding: 0 8px; height: 32px; display: grid; place-items: center; border-radius: 99px; color: var(--muted); transition: background .2s, color .2s; }
.lang-tog span.on { background: var(--text); color: var(--on-text); }
.theme-tog { width: 40px; }
.theme-tog .moon { display: none; }
[data-theme="light"] .theme-tog .sun { display: none; }
[data-theme="light"] .theme-tog .moon { display: block; }
.scan-top .toggles { justify-self: end; }

/* ---------- Type ---------- */
.mega {
  font: 800 clamp(46px, 10.5vw, 168px)/.86 var(--f-display);
  text-transform: uppercase; letter-spacing: -.035em;
}
.mega > span { display: block; }
.h2 {
  font: 800 clamp(34px, 5.4vw, 76px)/.92 var(--f-display);
  text-transform: uppercase; letter-spacing: -.03em;
}
.pixel-title {
  font: 400 clamp(52px, 12vw, 176px)/.9 var(--f-pixel);
  text-transform: uppercase; letter-spacing: -.02em;
}
.lead { font-size: clamp(16px, 1.35vw, 19px); color: var(--muted); max-width: 52ch; }
.lead b { color: var(--text); font-weight: 600; }
.eyebrow, .mini-label {
  font: 400 11px/1.2 var(--f-pixel); letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
  display: inline-flex; align-items: center; gap: 10px;
}
.dot { width: 7px; height: 7px; background: var(--accent); display: inline-block; box-shadow: 0 0 12px var(--accent); }
.u { color: var(--text); background: linear-gradient(currentColor, currentColor) 0 100%/100% 1px no-repeat; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 50px; padding: 0 24px; border-radius: 99px;
  font: 600 15px/1 var(--f-body); white-space: nowrap;
  transition: transform .35s var(--ease), background .25s, color .25s, border-color .25s;
}
/* mrboost-style hover: the background shrinks a little and each letter
   rolls up, replaced by a copy coming in from below */
.btn { position: relative; isolation: isolate; background: none; }
.btn::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: var(--bb, transparent); border: 1px solid var(--bl, transparent);
  transition: transform .55s cubic-bezier(.625,.05,0,1);
}
.btn:hover::before, .btn:focus-visible::before { transform: scale(.95, .9); }
.btn:active::before { transform: scale(.92, .86); }
.btn .ico { transition: transform .45s cubic-bezier(.625,.05,0,1); }
.btn:hover .ico { transform: translateX(3px); }
.btn-light { --bb: var(--text); color: var(--on-text); }
.btn-outline { --bl: var(--line-2); }
.btn-outline:hover { --bl: var(--text); }
.roll { display: inline-flex; overflow: hidden; line-height: 1.3em; height: 1.3em; }
.roll > span { display: inline-block; white-space: pre; text-shadow: 0 1.3em currentColor; transition: transform .55s cubic-bezier(.625,.05,0,1); transition-delay: calc(var(--i) * .015s); }
a:hover .roll > span, button:hover .roll > span, a:focus-visible .roll > span { transform: translateY(-1.3em); transition-delay: calc(var(--i) * .015s + .05s); }
.btn-lg { height: 60px; padding: 0 32px; font-size: 16px; }

/* ---------- Header (mrboost-style) ----------
   Top of page: stat badge left, logo centre, plain links right.
   After scrolling: logo and links fade out, a small round button
   stays top-right and opens a compact menu card. */
.nav { position: fixed; inset: 0 0 auto; z-index: 50; pointer-events: none; }
.nav-in { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px var(--gutter); }
.nav-in > * { pointer-events: auto; }
.nav::before {
  content: ""; position: absolute; inset: 0 0 -30px; z-index: -1; pointer-events: none;
  background: linear-gradient(rgb(var(--nav-fade)) 0%, rgba(var(--nav-fade), .7) 50%, transparent);
  opacity: 0; transition: opacity .4s;
}
.nav.scrolled::before { opacity: 1; }
.stat-badge { display: inline-flex; align-items: center; gap: 12px; justify-self: start; }
.spark {
  width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  border: 1px solid var(--line-2); background: var(--glass);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.spark svg { animation: spin 14s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.stat-rot { display: grid; line-height: 1.15; min-width: 130px; }
.stat-rot b { font: 600 13px/1.2 var(--f-body); }
.stat-rot small { font-size: 12px; color: var(--muted); }
.stat-rot.swap { animation: statIn .5s var(--ease); }
@keyframes statIn { from { opacity: 0; transform: translateY(8px); } }
.nav-logo { color: var(--text); padding: 8px; transition: transform .4s var(--ease), opacity .4s; }
.nav-logo .wb-logo { width: 52px; height: auto; }

.nav-links { justify-self: end; display: flex; gap: 26px; margin-right: 50px; transition: opacity .35s, transform .45s var(--ease); }
.nav-links a { font-size: 14px; font-weight: 500; color: var(--text); padding: 6px 0; position: relative; }
.nav-links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease);
}
.nav-links a:hover::after, .nav-links a[aria-current="page"]::after { transform: scaleX(1); transform-origin: left; }
.nav.scrolled .nav-links { opacity: 0; transform: translateY(-8px); pointer-events: none; }
.nav.scrolled .nav-logo { opacity: 0; pointer-events: none; }

/* round toggle + menu card */
.mn { position: fixed; inset: 0; z-index: 60; pointer-events: none; }
.mn-bg { position: absolute; inset: 0; background: rgba(0,0,0,.55); opacity: 0; transition: opacity .45s var(--ease); }
.mn-toggle {
  position: absolute; top: 22px; right: var(--gutter); width: 34px; height: 34px; border-radius: 50%;
  background: var(--light); color: #0d0d0d; pointer-events: auto;
  transition: transform .45s var(--ease), background .3s;
}
/* the button is a 3×3 grid of bits: three rows = menu, an X = close */
.mn-toggle { display: grid; grid-template-columns: repeat(3, 4px); grid-auto-rows: 4px; gap: 1px; place-content: center; }
.mn-toggle span { width: 4px; height: 4px; background: currentColor; transition: opacity .2s, transform .35s cubic-bezier(.625,.05,0,1); }
.mn-toggle span.off { opacity: 0; transform: scale(.2); }
.mn-toggle:hover { transform: scale(1.12) !important; }
.mn-panel {
  position: absolute; top: 12px; right: calc(var(--gutter) - 6px); width: min(320px, calc(100vw - 2 * var(--gutter) + 12px));
  background: var(--light); color: #0d0d0d; border-radius: 18px; padding: 16px 20px 18px;
  transform-origin: calc(100% - 23px) 27px; transform: scale(.08); opacity: 0;
  transition: transform .55s var(--ease), opacity .3s; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.mn-label { font: 400 10px var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: #8a8a84; margin-bottom: 10px; }
.mn-list a {
  display: flex; align-items: center; gap: 10px; padding: 3px 0;
  font: 600 clamp(24px, 3.2vw, 30px)/1.15 var(--f-body); letter-spacing: -.02em; color: #0d0d0d;
  transition: color .25s, transform .35s var(--ease);
}
.mn-list a i { width: 6px; height: 6px; background: currentColor; opacity: 0; transform: scale(0); transition: opacity .25s, transform .35s var(--ease); }
.mn-list a:hover { transform: translateX(6px); }
.mn-list a:hover i, .mn-list a[aria-current="page"] i { opacity: 1; transform: none; }
.mn-list a[aria-current="page"] { color: #9a9a94; }
.mn-list li { opacity: 0; transform: translateY(10px); transition: opacity .4s, transform .5s var(--ease); }
.mn-scan {
  display: flex; justify-content: space-between; align-items: center; margin-top: 16px; padding: 12px 16px;
  background: #0d0d0d; color: #f2f2ee; border-radius: 12px; font-weight: 600; font-size: 15px; transition: background .25s, color .25s;
}
.mn-scan:hover .ico { transform: translateX(3px); }
.mn-scan .ico { transition: transform .45s cubic-bezier(.625,.05,0,1); }
.mn-foot { display: flex; justify-content: flex-end; margin-top: 12px; }
.mn-foot .toggles { margin: 0; }
.mn-foot .tog { background: transparent; border-color: rgba(0,0,0,.15); color: #0d0d0d; -webkit-backdrop-filter: none; backdrop-filter: none; }
.mn-foot .tog:hover { border-color: #0d0d0d; }
.mn-foot .lang-tog span { color: #8a8a84; }
.mn-foot .lang-tog span.on { background: #0d0d0d; color: #f2f2ee; }
.mn-foot .theme-tog .sun { display: block; } .mn-foot .theme-tog .moon { display: none; }
[data-theme="light"] .mn-foot .theme-tog .sun { display: none; } [data-theme="light"] .mn-foot .theme-tog .moon { display: block; }
[data-theme="light"] .mn-panel, [data-theme="light"] .mn-toggle { background: #141414; color: #f2f2ee; }
[data-theme="light"] .mn-list a { color: #f2f2ee; }
[data-theme="light"] .mn-list a[aria-current="page"] { color: #7c7c78; }
[data-theme="light"] .mn-scan { background: #f2f2ee; color: #0d0d0d; }
[data-theme="light"] .mn-foot .tog { border-color: rgba(255,255,255,.2); color: #f2f2ee; }
[data-theme="light"] .mn-foot .lang-tog span.on { background: #f2f2ee; color: #0d0d0d; }

/* states */
.mn.open { pointer-events: auto; }
.mn.open .mn-bg { opacity: 1; }
.mn.open .mn-panel { transform: none; opacity: 1; }
.mn.open .mn-toggle { background: transparent; color: #0d0d0d; z-index: 2; }
[data-theme="light"] .mn.open .mn-toggle { color: #f2f2ee; }
.mn.open .mn-list li { opacity: 1; transform: none; }
.mn.open .mn-list li:nth-child(2) { transition-delay: .04s; } .mn.open .mn-list li:nth-child(3) { transition-delay: .08s; }
.mn.open .mn-list li:nth-child(4) { transition-delay: .12s; } .mn.open .mn-list li:nth-child(5) { transition-delay: .16s; }

/* phones and tablets: always the round button */
@media (max-width: 860px) {
  .nav-links { display: none; }
  .stat-rot { display: none; }
}
@media (max-width: 600px) {
  .nav-in { padding-top: 12px; }
  .spark { width: 38px; height: 38px; }
  .nav-logo .wb-logo { width: 46px; }
  .mn-toggle { top: 16px; }
}

/* ---------- Hero ---------- */
.hero { padding: clamp(130px, 18vh, 190px) 0 0; text-align: center; }
.hero .eyebrow { margin-bottom: 28px; }
.hero-title { margin: 0 auto; font-size: min(124px, calc((100vw - 2 * var(--gutter)) / 9.8)); }  /* "Design partner" is ~9.6em wide: always 3 lines */
.hero-title > span { white-space: nowrap; }
.hero-lead { margin: 32px auto 0; max-width: 60ch; }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; margin-top: 36px; }
.who { display: inline-flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 500; }
.who-logo { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); display: grid; place-items: center; background: var(--bg-2); transition: transform .4s var(--ease); }
.who-logo .wb-logo { width: 22px; height: auto; }

.who span { background: linear-gradient(currentColor, currentColor) 0 100%/0 1px no-repeat; transition: background-size .35s var(--ease); }
.who:hover span { background-size: 100% 1px; }

.reel-wrap { padding: clamp(56px, 8vw, 96px) var(--gutter) 0; }
.reel {
  --s: .88;
  position: relative; max-width: 1600px; margin: 0 auto; aspect-ratio: 16 / 9;
  border-radius: var(--radius); overflow: hidden; background: #111;
  transform: scale(var(--s)); transform-origin: 50% 0; will-change: transform;
}
.reel video { width: 100%; height: 100%; object-fit: cover; }
.reel-tag {
  position: absolute; left: 20px; bottom: 20px; font: 400 11px var(--f-pixel); text-transform: uppercase;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  padding: 8px 12px; border-radius: 99px; display: flex; gap: 8px; align-items: center;
}
.reel-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--red); animation: blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }
@media (max-width: 640px) { .reel { aspect-ratio: 4 / 5; --s: 1; } }

/* Contra: badges + Hire us button */
.hero-proof { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px 16px; margin-top: 26px; }
.contra-badges { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.contra-badge { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 8px; border-radius: 10px; border: 1px solid var(--line-2); background: var(--bg-2); font-size: 13px; font-weight: 600; transition: border-color .2s; }
.contra-badge:hover { border-color: var(--text); }
.contra-badge img { width: 20px; height: 20px; border-radius: 5px; }
.contra-hire { display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 14px; border-radius: 12px; background: #111; color: #fff; font-family: "Inter", var(--f-body), system-ui, sans-serif; font-size: 18px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap; transition: transform .35s var(--ease); }
.contra-hire:hover { transform: translateY(-2px); }
.contra-hire img { width: 32px; height: 32px; display: block; }
.contact-contra { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.contact-contra .contra-badges { justify-content: flex-start; }
.ft-contra { margin-top: 18px; display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.ft-contra .contra-badges { justify-content: flex-start; }
.ft .contra-badge { background: transparent; border-color: rgba(13,13,13,.18); color: #0d0d0d; }
.ft .contra-badge:hover { border-color: #0d0d0d; }

/* ---------- Logos ---------- */
.logos { padding: clamp(56px, 8vw, 100px) 0 clamp(40px, 6vw, 70px); }
.marquee {
  overflow: hidden; display: flex;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.marquee-track { display: flex; align-items: center; gap: clamp(36px, 5vw, 72px); padding-right: clamp(36px, 5vw, 72px); flex-shrink: 0; animation: marquee 50s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
/* Logo wall (like mrboost): 6 slots on desktop, 4 on tablet, 3 on phones */
.logo-wall { display: grid; grid-template-columns: repeat(4, 1fr); max-width: 1180px; margin: 0 auto; padding: 0 var(--gutter); }
.logo-wall > .lw-logo:nth-child(n+5) { display: none; }  /* before the script runs */
.lw-slot { position: relative; aspect-ratio: 4 / 3; overflow: hidden; }
.logo-wall > .lw-logo, .lw-slot .lw-logo {
  max-height: 150px; max-width: 70%; width: auto; height: auto; object-fit: contain; margin: auto;
  filter: var(--logo-filter); opacity: .8; transition: opacity .3s;
}
.lw-slot .lw-logo { position: absolute; inset: 0; transition: transform .75s var(--ease), opacity .75s var(--ease); }
.lw-slot .lw-in { transform: translateY(100%); opacity: 0; }
.lw-slot .lw-out { transform: translateY(-100%); opacity: 0; }
.lw-slot:hover .lw-logo { opacity: 1; }
@media (max-width: 599px) { .logo-wall { grid-template-columns: repeat(3, 1fr); } .logo-wall > .lw-logo:nth-child(n+4) { display: none; } .lw-slot .lw-logo, .logo-wall > .lw-logo { max-height: 110px; max-width: 90%; } }
@keyframes marquee { to { transform: translateX(-100%); } }

/* ---------- About / fan ---------- */
.about { padding: clamp(60px, 9vw, 130px) 0 clamp(70px, 10vw, 140px); overflow: hidden; }
.fan {
  position: relative; height: clamp(250px, 34vw, 430px); margin-bottom: clamp(40px, 5vw, 64px);
  display: flex; justify-content: center;
}
.fan figure {
  --x: calc(var(--i) * clamp(84px, 13.5vw, 205px));
  --r: calc(var(--i) * 5deg);
  position: absolute; top: 0; width: clamp(130px, 17vw, 250px); aspect-ratio: 3 / 4;
  border-radius: 18px; overflow: hidden; background: var(--bg-3);
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.8);
  transform: translateX(var(--x)) translateY(calc(abs(var(--i)) * 14px)) rotate(var(--r));
  transition: transform .9s var(--ease);
}
.fan figure img { width: 100%; height: 100%; object-fit: cover; }
/* big, subtle WB emblem behind the cards and Tim's photo */
.fan-mark {
  position: absolute; left: 50%; top: 32%; transform: translate(-50%, -50%); z-index: 0; pointer-events: none;
  width: min(900px, 100vw); color: var(--text); opacity: .11;
  /* fades out towards the edges so it melts into the background */
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.fan-mark .wb-logo { width: 100%; height: auto; }
.fan figure { z-index: 1; }
.about { position: relative; }
.fan .fan-tim { z-index: 2 !important; border-radius: 50%; aspect-ratio: 1; width: clamp(150px, 19vw, 280px); top: clamp(20px, 3vw, 50px); background: #fff; border: 3px solid var(--text); }
.js .fan:not(.in) figure { transform: translateX(0) translateY(40px) rotate(0); }
.fan figure:hover { transform: translateX(var(--x)) translateY(-12px) rotate(0) scale(1.04); z-index: 3; }
.about .eyebrow { margin-bottom: 22px; }
.about-text { font: 500 clamp(21px, 2.5vw, 34px)/1.3 var(--f-body); letter-spacing: -.01em; margin: 0 auto 36px; color: var(--muted); }
.about-text b { color: var(--text); font-weight: 600; }
@media (max-width: 640px) {
  .fan figure:nth-child(1), .fan figure:nth-child(7) { display: none; }
}

/* ---------- Numbers ---------- */
.numbers { padding: 0 0 clamp(80px, 10vw, 140px); }
.numbers-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-top: 1px solid var(--line); }
.num { padding: 28px 20px 0 0; }
.num + .num { border-left: 1px solid var(--line); padding-left: 24px; }
.odo { font: 800 clamp(36px, 4.8vw, 76px)/1 var(--f-display); letter-spacing: -.03em; display: flex; white-space: nowrap; }
.odo .col { display: inline-block; height: 1.1em; overflow: hidden; }
.odo > span { white-space: pre; line-height: 1.1em; }
.odo .col > span { display: block; transition: transform 1.8s var(--ease); }
.odo .col > span > span { display: block; height: 1.1em; line-height: 1.1em; text-align: center; }
.num p { color: var(--muted); font-size: 14px; margin-top: 12px; max-width: 22ch; }
@media (max-width: 860px) {
  .numbers-grid { grid-template-columns: 1fr 1fr; }
  .num:nth-child(3) { border-left: 0; padding-left: 0; }
  .num:nth-child(n+3) { border-top: 1px solid var(--line); margin-top: 28px; }
}

/* Hover cards on the numbers (50M+ and 3 YEARS) */
.numbers { position: relative; z-index: 3; }
.num-pop-host { position: relative; outline: none; }
.num-pop-host p { text-decoration: underline dotted; text-decoration-color: var(--line-2); text-underline-offset: 4px; }
.num-pop {
  position: absolute; left: 0; top: calc(100% + 12px); width: 290px; z-index: 10;
  padding: 10px; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line-2);
  box-shadow: 0 20px 50px rgba(0,0,0,.35); display: grid; gap: 4px;
  opacity: 0; transform: translateY(6px); pointer-events: none; transition: opacity .25s, transform .35s var(--ease);
}
.num-pop::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; } /* keeps hover alive between number and card */
.num-pop-host:hover .num-pop, .num-pop-host:focus-within .num-pop { opacity: 1; transform: none; pointer-events: auto; }
.numbers-grid .num-pop-host:last-child .num-pop { left: auto; right: 0; }
.np-row { display: flex; align-items: center; gap: 12px; padding: 6px; border-radius: 10px; transition: background .2s; }
a.np-row:hover { background: var(--tint-2); }
.np-row img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; flex-shrink: 0; }
.np-row b { display: block; font-size: 14px; font-weight: 600; }
.np-row span { display: block; font-size: 13px; color: var(--muted); line-height: 1.35; }
.np-row > div { flex: 1; min-width: 0; }
.np-arrow { font-style: normal; color: var(--muted); display: flex; }
.np-btn { margin: 4px 6px 4px; justify-self: start; }
@media (max-width: 860px) { .numbers-grid .num-pop-host:nth-child(4) .num-pop { left: auto; right: 0; } .num-pop { width: min(290px, 80vw); } }

/* ---------- Work (light) ---------- */
.light { background: var(--light); color: var(--light-text); }
.light .lead { color: #55554f; }
.work { padding: clamp(24px, 4vw, 48px) 0 clamp(80px, 10vw, 140px); border-radius: clamp(24px, 4vw, 48px) clamp(24px, 4vw, 48px) 0 0; }
.work-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 24px 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 64px); }
.work-head .lead { max-width: 38ch; }
.cases { display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(14px, 1.8vw, 24px); }
.case { grid-column: span 5; position: relative; display: block; }
.case-wide { grid-column: span 7; }
.case-img { position: relative; aspect-ratio: 80 / 77; border-radius: var(--radius); overflow: hidden; background: #d6d5cf; }
.case-wide .case-img { aspect-ratio: 16 / 11; }
.case-img img, .case-img video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.case:hover .case-img img, .case:hover .case-img video { transform: scale(1.045); }
.pill {
  position: absolute; left: 16px; top: 16px; z-index: 1;
  background: rgba(255,255,255,.85); color: #0d0d0d; font-size: 13px; font-weight: 600;
  padding: 7px 14px; border-radius: 99px; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.pill + .pill { left: auto; right: 16px; }
.pill-accent { background: #0d0d0d; color: var(--accent); font: 400 11px/1.6 var(--f-pixel); text-transform: uppercase; }
.case-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 6px 20px; flex-wrap: wrap; padding: 16px 4px 0; }
.case-meta h3 { font: 700 clamp(19px, 1.7vw, 24px)/1.2 var(--f-display); letter-spacing: -.01em; text-transform: uppercase; }
.case-meta p { font-size: 14px; color: #6a6a64; }
.light .case-meta h3 { color: var(--light-text); }
@media (max-width: 760px) {
  .case, .case-wide { grid-column: span 12; }
  .case .case-img, .case-wide .case-img { aspect-ratio: 4 / 3; }
}

/* TimTopspin designed cover (until real stills are added) */
.case-full { grid-column: span 12; }
.case-full .case-img { aspect-ratio: 21 / 8; }
.tts {
  --lime: #d6f03c;
  position: absolute; inset: 0; overflow: hidden; background: radial-gradient(120% 90% at 85% 50%, #2a3208 0%, #0d0f06 60%);
  color: var(--lime); display: flex; flex-direction: column; justify-content: center; padding: clamp(20px, 4vw, 56px);
}
.tts-name { font: 800 clamp(40px, 9vw, 150px)/.82 var(--f-display); letter-spacing: -.04em; position: relative; z-index: 1; }
.tts-meta { position: relative; z-index: 1; margin-top: clamp(12px, 2vw, 24px); font: 400 clamp(9px, 1vw, 12px) var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: rgba(214,240,60,.7); }
.tts-ball {
  position: absolute; right: 8%; top: 50%; width: clamp(140px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%; transform: translateY(-50%) rotate(-20deg);
  background: radial-gradient(circle at 35% 30%, #f2ff8a, var(--lime) 40%, #9fb81f 100%);
  box-shadow: 0 0 120px rgba(214,240,60,.25); overflow: hidden;
}
.tts-ball::before, .tts-ball::after {
  content: ""; position: absolute; top: -10%; bottom: -10%; width: 70%; border: clamp(3px, .5vw, 7px) solid rgba(255,255,255,.85); border-radius: 50%;
}
.tts-ball::before { left: -48%; } .tts-ball::after { right: -48%; }
.case:hover .tts-ball { transform: translateY(-50%) rotate(25deg); }
.tts-ball { transition: transform 1.2s var(--ease); }
.cs-cover .tts { position: absolute; }
.cs-cover > div { position: relative; }
.nc-img .tts { padding: 24px; }
.nc-img .tts-name { font-size: clamp(36px, 5vw, 72px); }
.tts-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: clamp(32px, 4vw, 48px) 0 clamp(50px, 6vw, 80px); }
.cs-cover ~ .wrap .gallery { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 760px) { .case-full .case-img { aspect-ratio: 4 / 3; } .tts-ball { right: -12%; opacity: .9; } }

/* View-all button under the homepage cases */
.work-more { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 48px); }
.btn-dark { --bb: var(--light-text); color: var(--light); }
/* All use cases page */
.work-all { padding-bottom: clamp(40px, 6vw, 80px); }
.wk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.6vw, 22px); }
.wk { position: relative; display: block; }
.wk-img { position: relative; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: var(--bg-3); }
.wk-img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
a.wk:hover .wk-img > img { transform: scale(1.045); }
.wk .tts-name { font-size: clamp(36px, 6vw, 84px); }
.wk .tts, .nc-img .tts { justify-content: flex-start; }
.wk .tts-ball, .nc-img .tts-ball { width: 62%; top: auto; right: -14%; bottom: -14%; transform: rotate(-20deg); }
.wk:hover .tts-ball, .next-case:hover .tts-ball { transform: rotate(25deg); }
.wk-cat { display: block; margin-top: 10px; padding-left: 4px; font-size: 13px; color: var(--muted); }
.wk-soon .wk-img > img { filter: grayscale(1); opacity: .45; }
.pill-soon { left: auto; right: 16px; background: rgba(0,0,0,.6); color: #f2f2ee; font: 400 10px/1.8 var(--f-pixel); text-transform: uppercase; }
@media (max-width: 900px) { .wk-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .wk-grid { grid-template-columns: 1fr; } }
/* YouTube poster that opens the video */
.yt a { position: relative; display: block; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 76px; height: 76px; margin: -38px 0 0 -38px; border-radius: 50%; background: rgba(13,13,13,.75); transition: transform .4s var(--ease); }
.yt-play::after { content: ""; position: absolute; left: 31px; top: 25px; border-left: 20px solid #f2f2ee; border-top: 13px solid transparent; border-bottom: 13px solid transparent; }
.yt a:hover .yt-play { transform: scale(1.1); }
.gallery video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Logo-only cover (Everything) */
.cs-cover .cover-logo { object-fit: contain; padding: clamp(24px, 8%, 120px) 18%; background: #ebeae5; }

/* TimTopspin photos */
.tts-photo img { object-position: 50% 35%; }
.gallery.gallery-4 { grid-template-columns: repeat(4, 1fr); }
.gallery.gallery-4 figure { grid-column: span 1; aspect-ratio: 4 / 5; }
@media (max-width: 760px) { .gallery.gallery-4 { grid-template-columns: 1fr 1fr; } }

/* Knolpower: standalone logo + YouTube banner */
.cs-cover .logo-stage { display: grid; place-items: center; background: #f4f3ef; }
.cs-cover .logo-stage img { width: auto; height: 70%; max-height: 520px; object-fit: contain; }
.yt-banner { margin: clamp(40px, 5vw, 64px) 0 0; }
.yt-banner img { width: 100%; border-radius: 20px; display: block; }
.yt-banner figcaption { margin-top: 10px; font-size: 13px; color: var(--muted); }

/* SmarDex: embedded X videos */
.x-videos { margin-top: clamp(40px, 5vw, 64px); }
.x-videos .mini-label { display: block; margin-bottom: 14px; }
.x-embeds { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr)); gap: 16px; align-items: start; }
.x-embeds .twitter-tweet { margin: 0 !important; }
.x-embeds blockquote.twitter-tweet { /* placeholder until X loads */
  min-height: 200px; display: grid; place-items: center; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px;
}
.x-embeds blockquote.twitter-tweet a { color: var(--text); }
.x-embeds iframe { border-radius: 16px; }
@media (max-width: 760px) { .x-embeds { grid-template-columns: 1fr; } }

/* ---------- Bits Board: all work on one board ---------- */
.bb-section { padding-bottom: clamp(40px, 6vw, 80px); }
.bb-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 980px; margin: 0 auto clamp(20px, 3vw, 32px); }
.bb-chips::-webkit-scrollbar { display: none; }
.bb-chip { flex-shrink: 0; height: 38px; padding: 0 16px; border-radius: 99px; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; color: var(--muted); transition: color .2s, border-color .2s, background .2s; }
.bb-chip:hover { color: var(--text); border-color: var(--text); }
.bb-chip.on { background: var(--text); color: var(--on-text); border-color: var(--text); }
.bb-client-link { display: flex; justify-content: center; margin: -8px 0 clamp(20px, 3vw, 28px); }
.bb-client-link[hidden] { display: none; }
.bb-board { columns: 3 280px; column-gap: 16px; max-width: 1600px; margin: 0 auto; padding: 0 var(--gutter); }
.bb { position: relative; break-inside: avoid; margin: 0 0 16px; border-radius: 16px; overflow: hidden; background: var(--bg-3); }
/* tiles fade in and slide up into place as they scroll into view */
.js .bb { opacity: 0; transform: translateY(48px); transition: opacity .8s var(--ease), transform .9s var(--ease); transition-delay: var(--d, 0s); }
.js .bb.in { opacity: 1; transform: none; }
.bb[hidden] { display: none; }
.bb img, .bb video { display: block; width: 100%; height: auto; }
.bb-open { display: block; width: 100%; cursor: zoom-in; }
.bb-open img { transition: transform .8s var(--ease); }
.bb-open:hover img { transform: scale(1.03); }
.bb-pill { top: auto; bottom: 12px; left: 12px; font-size: 12px; padding: 5px 11px; pointer-events: none; }
.bb-logo { background: #f4f3ef; }
.bb-logo img { padding: 18% 22%; }
.bb-x { background: none; overflow: visible; }
.bb-x .bb-pill { display: none; }
.bb-x blockquote.twitter-tweet { margin: 0; min-height: 120px; display: grid; place-items: center; border-radius: 16px; background: var(--bg-2); border: 1px solid var(--line); font-size: 15px; }
.bb-x .twitter-tweet { margin: 0 !important; }
.bb.yt a { display: block; position: relative; }
/* Headhunterz: muted YouTube clip that plays by itself, no controls; click opens YouTube with sound */
.bb-yt a { display: block; position: relative; }
.bb-yt-frame { position: absolute; inset: 0; overflow: hidden; pointer-events: none; opacity: 0; transition: opacity .6s ease; }
.bb-yt-frame.is-playing { opacity: 1; }
.bb-yt-frame iframe { position: absolute; top: 50%; left: 50%; width: 100%; height: 100%; transform: translate(-50%, -50%) scale(1.2); border: 0; }
.bb-sound { position: absolute; top: 12px; right: 12px; font-size: 12px; font-weight: 600; padding: 5px 11px; border-radius: 99px; background: rgba(0,0,0,.6); color: #f2f2ee; opacity: 0; transition: opacity .25s; }
.bb-yt a:hover .bb-sound, .bb-yt a:focus-visible .bb-sound { opacity: 1; }
.bb-lightbox { position: fixed; inset: 0; z-index: 70; background: rgba(0,0,0,.92); display: grid; place-items: center; padding: max(24px, env(safe-area-inset-top)) 16px; cursor: zoom-out; }
.bb-lightbox[hidden] { display: none; }
.bb-lightbox { grid-template-rows: 1fr auto; gap: 16px; }
.bb-lightbox img { max-width: 100%; max-height: 82vh; border-radius: 12px; object-fit: contain; align-self: center; justify-self: center; }
.bb-lb-link { justify-self: center; cursor: pointer; }
.bb-lb-video { max-width: 100%; max-height: 82vh; border-radius: 12px; align-self: center; justify-self: center; background: #000; cursor: default; }
.bb-lb-video[hidden] { display: none; }
.bb-lb-link[hidden] { display: none; }
.bb-close { position: absolute; top: 16px; right: 16px; width: 44px; height: 44px; border-radius: 50%; background: #f2f2ee; color: #0d0d0d; font-size: 24px; line-height: 1; }
@media (max-width: 520px) { .bb-board { columns: 2; column-gap: 10px; } .bb { margin-bottom: 10px; border-radius: 12px; } .bb-pill { font-size: 10px; padding: 3px 8px; bottom: 8px; left: 8px; } }

/* ---------- About page (structure after mrboost.nl/about) ---------- */
.ab-hero { padding-bottom: clamp(28px, 4vw, 48px); }
.ab-media { padding: 0 clamp(8px, 1.2vw, 16px); }
.ab-media video { width: 100%; max-width: 1600px; margin: 0 auto; display: block; aspect-ratio: 16 / 8; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); }
.ab-intro { padding: clamp(70px, 10vw, 140px) 0; }
.ab-h2 { font: 800 clamp(34px, 5.4vw, 76px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; margin-bottom: clamp(30px, 5vw, 60px); }
.ab-intro-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 3vw, 40px); align-items: start; }
.ab-ph { border-radius: var(--radius); overflow: hidden; background: var(--bg-3); position: relative; }
.ab-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-ph-a { aspect-ratio: 4 / 3; }
.ab-intro-text { font-size: clamp(17px, 1.6vw, 21px); line-height: 1.55; color: var(--muted); align-self: center; max-width: 46ch; }
.ab-ph-b { aspect-ratio: 16 / 11; }
.ab-ph-c { aspect-ratio: 1; margin-top: clamp(-120px, -8vw, -40px); background: #f4f3ef; }
.ab-ph-mark { position: absolute; inset: 8% 6% auto auto; width: 34%; color: #0d0d0d; opacity: .9; z-index: 1; }
.ab-ph-mark .wb-logo { width: 100%; height: auto; }
@media (max-width: 760px) { .ab-intro-grid { grid-template-columns: 1fr; } .ab-ph-c { margin-top: 0; } }
.ab-band { position: relative; height: clamp(320px, 50vw, 640px); overflow: hidden; display: grid; align-items: center; }
.ab-band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); }
.ab-band-marquee { position: relative; -webkit-mask-image: none; mask-image: none; }
.ab-band-marquee .marquee-track { animation-duration: 30s; gap: 28px; padding-right: 28px; }
.ab-band-marquee span { font: 600 clamp(40px, 7vw, 104px)/1 var(--f-body); letter-spacing: -.04em; color: #f2f2ee; white-space: nowrap; }
.ab-band-marquee i { font-style: normal; font-size: clamp(28px, 4vw, 60px); color: #f2f2ee; }
.ab-about { padding: clamp(70px, 10vw, 140px) 0; }
.ab-about-grid { display: grid; grid-template-columns: 1fr 3fr; gap: 24px 40px; }
.ab-about .mini-label { color: inherit; opacity: .55; }
.ab-statement { font: 600 clamp(26px, 3.6vw, 52px)/1.12 var(--f-body); letter-spacing: -.03em; max-width: 22ch; }
.ab-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: clamp(30px, 4vw, 56px); max-width: 860px; }
.ab-cols p { font-size: 16px; line-height: 1.6; opacity: .75; }
@media (max-width: 760px) { .ab-about-grid, .ab-cols { grid-template-columns: 1fr; } }
.ab-clients { padding: clamp(70px, 10vw, 140px) 0 clamp(40px, 6vw, 80px); }
.ab-logos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.ab-logo { aspect-ratio: 3 / 2; display: grid; place-items: center; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ab-logo img { max-width: 70%; max-height: 64%; object-fit: contain; filter: var(--logo-filter); opacity: .8; transition: opacity .3s; }
.ab-logo:hover img { opacity: 1; }
@media (max-width: 760px) { .ab-logos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* core values: cards stack on top of each other while scrolling */
.ab-values { padding: clamp(40px, 6vw, 80px) 0 clamp(60px, 8vw, 100px); }
.vcard {
  position: sticky; top: calc(80px + var(--n, 0) * 14px); text-align: center;
  border-radius: clamp(20px, 3vw, 32px); padding: clamp(22px, 3vw, 36px) clamp(18px, 4vw, 56px) clamp(28px, 4vw, 48px);
  margin-bottom: clamp(30px, 6vw, 80px); color: #0d0d0d; box-shadow: 0 -20px 50px rgba(0,0,0,.25);
}
.vc-1 { --n: 0; background: #ebeae5; } .vc-2 { --n: 1; background: #d9d8d1; } .vc-3 { --n: 2; background: #f4f3ef; } .vc-4 { --n: 3; background: #c9c8c0; }
.vcard-top { display: flex; justify-content: space-between; }
.vcard-top .mini-label { color: rgba(13,13,13,.6); }
.vcard-title { font: 800 clamp(28px, 8vw, 120px)/.9 var(--f-display); overflow-wrap: anywhere; text-transform: uppercase; letter-spacing: -.035em; margin: clamp(18px, 3vw, 36px) 0 18px; }
.vcard-title span { display: block; }
.vcard-title span:first-child { color: rgba(13,13,13,.35); }
.vcard-text { max-width: 52ch; margin: 0 auto clamp(20px, 3vw, 36px); font-size: clamp(15px, 1.4vw, 18px); line-height: 1.55; color: rgba(13,13,13,.75); }
.vcard-img { max-width: 620px; margin: 0 auto; aspect-ratio: 4 / 3; border-radius: 20px; overflow: hidden; background: #0d0d0d; }
.vcard-img img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Motion ---------- */
.motion { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg); }
.row-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px 40px; flex-wrap: wrap; margin-bottom: clamp(36px, 5vw, 56px); }
.row-head .lead { max-width: 42ch; }
.motion-row {
  display: grid; grid-auto-flow: column; grid-auto-columns: clamp(240px, 28vw, 400px); gap: 16px;
  overflow-x: auto; scroll-snap-type: x mandatory; padding: 0 var(--gutter) 8px;
  scrollbar-width: none;
}
.motion-row::-webkit-scrollbar { display: none; }
@media (min-width: 1200px) { .motion-row { grid-auto-columns: 1fr; max-width: 1320px; margin: 0 auto; } }
.clip { scroll-snap-align: start; position: relative; border-radius: 20px; overflow: hidden; aspect-ratio: 1; background: var(--bg-3); }
.clip video { width: 100%; height: 100%; object-fit: cover; }
.clip figcaption {
  position: absolute; left: 12px; bottom: 12px; font-size: 13px; font-weight: 500;
  background: rgba(0,0,0,.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); padding: 6px 12px; border-radius: 99px;
}

/* ---------- Accordions (native <details>) ---------- */
.services { padding: clamp(20px, 3vw, 40px) 0 clamp(40px, 5vw, 60px); }
.acc details { border-top: 1px solid var(--line); }
.acc details:last-child { border-bottom: 1px solid var(--line); }
.acc summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 20px;
  padding: clamp(18px, 2.4vw, 30px) 0;
}
.acc summary::-webkit-details-marker { display: none; }
.acc .n { font: 400 12px var(--f-pixel); color: var(--muted); width: 32px; }
.acc .t { flex: 1; font: 700 clamp(22px, 3.2vw, 44px)/1.05 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; transition: transform .4s var(--ease), color .3s; }
.acc summary:hover .t { transform: translateX(8px); }

.pm { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line-2); position: relative; flex-shrink: 0; transition: transform .4s var(--ease), background .3s; }
.pm::before, .pm::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; background: currentColor; transform: translate(-50%, -50%); }
.pm::after { transform: translate(-50%, -50%) rotate(90deg); transition: transform .4s var(--ease); }
details[open] .pm { background: var(--text); color: var(--on-text); transform: rotate(180deg); }
details[open] .pm::after { transform: translate(-50%, -50%) rotate(0); }
.acc-body { padding: 0 0 30px 52px; display: grid; gap: 18px; max-width: 760px; color: var(--muted); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips li { font-size: 13px; padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 99px; color: var(--text); }
.acc-faq .t { font: 600 clamp(17px, 1.6vw, 21px)/1.3 var(--f-body); text-transform: none; letter-spacing: 0; }
.acc-faq .acc-body { padding-left: 0; }
.acc-faq .pm { width: 34px; height: 34px; }
@media (max-width: 640px) { .acc-body { padding-left: 0; } .acc .n { display: none; } }

/* ---------- How / plans ---------- */
.how { padding: clamp(80px, 10vw, 140px) 0; background: var(--bg-2); border-radius: clamp(24px, 4vw, 48px); margin: 0 clamp(8px, 1.2vw, 16px); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: s; }
.steps li { padding: 28px; border-radius: 20px; background: var(--bg); border: 1px solid var(--line); }
.step-n { font: 400 11px var(--f-pixel); color: var(--accent-text); text-transform: uppercase; }
.steps h3 { font: 700 26px/1.1 var(--f-display); text-transform: uppercase; margin: 40px 0 10px; }
.steps p { color: var(--muted); font-size: 15px; }
.plans { display: grid; grid-template-columns: 1.2fr 1fr; gap: 16px; margin-top: 16px; }
.plan { padding: clamp(28px, 3vw, 40px); border-radius: 20px; border: 1px solid var(--line); display: flex; flex-direction: column; gap: 22px; align-items: flex-start; }
.plan-main { background: var(--text); color: var(--on-text); }
.plan-main .mini-label { color: inherit; opacity: .6; }
.plan-main .btn-light { background: var(--on-text); color: var(--text); }

.price { font: 800 clamp(48px, 6vw, 80px)/1 var(--f-display); letter-spacing: -.03em; }
.price small { font: 500 16px var(--f-body); letter-spacing: 0; margin-left: 6px; opacity: .6; }
.plan ul { display: grid; gap: 8px; font-size: 15px; flex: 1; }
.plan li { padding-left: 22px; position: relative; }
.plan li::before { content: ""; position: absolute; left: 0; top: .6em; width: 8px; height: 8px; background: var(--accent); }
.plan-main li::before { background: currentColor; }
@media (max-width: 860px) { .steps, .plans { grid-template-columns: 1fr; } .steps h3 { margin-top: 24px; } }

/* ---------- Testimonials ---------- */
.voices { padding: 0 0 clamp(80px, 10vw, 140px); }
.voices .h2 { margin-bottom: clamp(36px, 5vw, 56px); }
.marquee-slow .marquee-track { animation-duration: 90s; gap: 16px; padding-right: 16px; align-items: stretch; }
.quote {
  width: clamp(290px, 30vw, 400px); padding: 26px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line);
  display: flex; flex-direction: column; justify-content: space-between; gap: 26px;
}
.quote blockquote { font-size: 16px; line-height: 1.5; }
.quote figcaption { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--muted); }
.quote figcaption img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; }
.quote figcaption b { display: block; color: var(--text); font-weight: 600; font-size: 14px; }

/* ---------- FAQ ---------- */
.faq { padding: 0 0 clamp(80px, 10vw, 140px); }
.faq-grid { display: grid; grid-template-columns: 1fr 1.4fr; gap: 40px 80px; }
.faq .lead { margin-top: 20px; }
@media (max-width: 860px) { .faq-grid { grid-template-columns: 1fr; } }

/* ---------- Closing CTA (photo card, like mrboost) ---------- */
.cta { padding: clamp(60px, 8vw, 120px) clamp(8px, 1.2vw, 16px) clamp(80px, 10vw, 140px); }
/* subtle white glow behind the card so it lifts off the black page */
.cta { position: relative; isolation: isolate; }
.cta::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: 50%; width: min(1500px, 100%); height: 120%; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(255,255,255,.10), rgba(255,255,255,.04) 55%, transparent);
}
[data-theme="light"] .cta::before { background: radial-gradient(closest-side, rgba(0,0,0,.06), transparent); }
.cta-card {
  position: relative; max-width: 1100px; margin: 0 auto; min-height: clamp(460px, 44vw, 580px);
  border-radius: var(--radius); overflow: hidden; background: #0d0d0d; color: #f2f2ee; display: flex; isolation: isolate;
  border: 1px solid rgba(255,255,255,.08); box-shadow: 0 40px 120px rgba(0,0,0,.5);
}
.cta-photo { position: absolute; inset: 0 0 0 auto; width: 62%; z-index: -1; }
.cta-face {
  position: absolute; right: 15%; top: 50%; transform: translateY(-50%) rotate(-4deg);
  width: clamp(180px, 24vw, 320px); height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50%;
  border: 4px solid #0d0d0d; box-shadow: 0 0 0 1px rgba(255,255,255,.18), 0 30px 60px rgba(0,0,0,.5);
}
.cta-mark {
  /* WB emblem behind the photo, fading out at the edges */
  position: absolute; right: -4%; top: 50%; transform: translateY(-50%); width: min(720px, 70vw);
  color: #f2f2ee; opacity: .1; pointer-events: none;
  -webkit-mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 40%, transparent 100%);
}
.cta-mark .wb-logo { width: 100%; height: auto; }
.cta-card::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(13,13,13,.95) 0%, rgba(13,13,13,.75) 32%, rgba(13,13,13,0) 62%), linear-gradient(0deg, rgba(13,13,13,.5), transparent 45%);
}
.cta-inner { margin-top: auto; padding: clamp(28px, 5vw, 72px); width: 66%; }
.cta-title { font: 800 calc(min(100vw, 1100px) * .054)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.035em; }
.cta-title > span { display: block; white-space: nowrap; }
/* rotating word: old word slides up and out, new one comes in from below */
.rw { font-style: normal; display: inline-grid; vertical-align: top; overflow: hidden; }
.rw > span { grid-area: 1 / 1; transition: transform .65s cubic-bezier(.625,.05,0,1), opacity .65s; }
.rw .rw-in { transform: translateY(100%); opacity: 0; }
.rw .rw-out { transform: translateY(-100%); opacity: 0; }
.cta-sub { margin: 22px 0 28px; max-width: 42ch; color: rgba(242,242,238,.8); font-size: clamp(15px, 1.4vw, 18px); }
.btn-cream { --bb: #ebeae5; color: #0d0d0d; }
.cta-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; font: 400 10px var(--f-pixel); text-transform: uppercase; letter-spacing: .06em; color: rgba(242,242,238,.6); }
.cta-meta i { width: 3px; height: 3px; border-radius: 50%; background: rgba(242,242,238,.4); }
@media (max-width: 700px) {
  .cta-card { flex-direction: column; min-height: 0; }
  .cta-photo { position: relative; width: 100%; height: 300px; }
  .cta-face { right: 50%; transform: translate(50%, -50%) rotate(-4deg); width: 170px; }
  .cta-mark { right: 50%; transform: translate(50%, -50%); width: 120%; }
  .cta-card::after { background: linear-gradient(0deg, #0d0d0d 42%, rgba(13,13,13,0) 62%); }
  .cta-inner { margin-top: -40px; width: 100%; }
  .cta-title { font-size: calc((100vw - 2 * var(--gutter) - 56px) / 8.8); }
  .cta-inner .btn { width: 100%; }
}

/* ---------- Floating bits ---------- */
.scan-pill {
  position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); z-index: 40;
  transform: translate(-50%, 140%); transition: transform .5s var(--ease), background .25s;
  background: var(--glass); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border: 1px solid var(--line-2); padding: 13px 22px; border-radius: 99px; font-size: 14px; font-weight: 600;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.scan-pill::before { content: ""; display: inline-block; width: 7px; height: 7px; background: var(--accent); margin-right: 10px; vertical-align: 1px; }
.scan-pill.show { transform: translate(-50%, 0); }
.scan-pill:hover { scale: .96; }
.tg-float {
  position: fixed; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 40;
  width: 54px; height: 54px; border-radius: 50%; background: #229ed9; color: #fff; display: grid; place-items: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4); transition: transform .35s var(--ease);
}
.tg-float:hover { transform: scale(1.08) rotate(-8deg); }
@media (max-width: 480px) { .scan-pill { left: 16px; transform: translateY(140%); } .scan-pill.show { transform: none; } }

/* ---------- Footer (cream, slides out from under the page) ---------- */
.ft-wrap { position: relative; overflow: hidden; background: var(--light); }
.ft-dark { position: absolute; inset: 0; z-index: 2; background: var(--bg); pointer-events: none; opacity: 0; }
.ft { position: relative; z-index: 1; background: var(--light); color: var(--light-text); padding: clamp(40px, 5vw, 64px) var(--gutter) 0; will-change: transform; }
.ft-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px; padding-bottom: 32px; }
.ft-col { display: flex; flex-direction: column; align-items: flex-start; }
.ft-eyebrow { font-size: 16px; font-weight: 500; opacity: .45; margin-bottom: 18px; }
.ft-col a { font-size: 17px; font-weight: 500; line-height: 1.75; position: relative; }
.ft-col a::after, .ft-meta a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: .3em; height: 1.5px; background: currentColor;
  transform: scaleX(0); transform-origin: right; transition: transform .7s cubic-bezier(.625,.05,0,1);
}
.ft-col a:hover::after, .ft-meta a:hover::after { transform: scaleX(1); transform-origin: left; }
.ft-col a.ft-big { font: 500 clamp(28px, 3.6vw, 54px)/1.1 var(--f-body); letter-spacing: -.035em; }
.ft-col a.ft-big::after { bottom: .02em; height: 2px; }
.ft-col a.ft-btn { margin-top: 22px; font-size: 15px; line-height: 1; }
.ft-col a.ft-btn::after { display: none; }
.ft-meta { display: flex; justify-content: flex-start; gap: 12px; padding: 18px 0; border-top: 1px solid currentColor; border-color: rgba(128,128,128,.3); font-size: 15px; font-weight: 500; }
.ft-meta a { position: relative; }
.ft-word { display: block; width: 100%; height: auto; margin: 8px 0 0; user-select: none; overflow: visible; }
.ft-word text { font-family: var(--f-pixel); fill: currentColor; }
@media (max-width: 991px) { .ft-grid { grid-template-columns: 1fr 1fr; } .ft-contact { grid-column: 1 / -1; } }
@media (max-width: 600px) { .ft-meta { flex-direction: column; } }

/* ---------- Pixel hover on menu links ---------- */
[data-px] .pxc { display: inline-block; }
[data-px] .pxc.on { font-family: var(--f-pixel); font-weight: 400; font-size: .86em; }

/* ---------- Motion: entrance ---------- */
.js [data-rise] > span { display: block; overflow: hidden; }
.js [data-rise] > span > i { display: block; font-style: normal; transform: translateY(105%); transition: transform 1.1s var(--ease); }
.js [data-rise].in > span > i { transform: none; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.js [data-reveal].in { opacity: 1; transform: none; }

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

/* ---------- Case pages ---------- */
.cs-hero { padding: clamp(130px, 18vh, 180px) 0 clamp(40px, 5vw, 60px); }
.back { display: inline-flex; gap: 8px; align-items: center; font-size: 14px; color: var(--muted); margin-bottom: 30px; transition: color .2s; }
.back:hover { color: var(--text); }
.cs-hero .eyebrow { display: flex; margin-bottom: 20px; }
.cs-hero h1 { font: 800 clamp(40px, 7.4vw, 116px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.035em; max-width: 14ch; }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: clamp(36px, 5vw, 60px); padding-top: 22px; border-top: 1px solid var(--line); }
.cs-meta dt { font: 400 11px var(--f-pixel); text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.cs-meta dd { font-size: 15px; }
@media (max-width: 760px) { .cs-meta { grid-template-columns: 1fr 1fr; } }
.cs-cover { padding: 0 clamp(8px, 1.2vw, 16px); }
.cs-cover > div { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 9; max-height: 86vh; width: 100%; background: var(--bg-3); }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; }
.tldr { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding: clamp(50px, 7vw, 90px) 0 0; }
.tldr > div { padding: 26px; border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); }
.tldr .mini-label { display: block; margin-bottom: 14px; }
.tldr .res { background: var(--text); color: var(--on-text); border-color: transparent; }
.tldr .res .mini-label { color: inherit; opacity: .6; }
@media (max-width: 860px) { .tldr { grid-template-columns: 1fr; } }
.cs-quote {
  margin: clamp(28px, 4vw, 48px) 0 0; max-width: 620px; padding: 22px 24px; border-radius: 20px;
  background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 18px;
}
.cs-quote blockquote { font: 400 16px/1.55 var(--f-body); }
.cs-quote figcaption { display: flex; align-items: center; gap: 12px; }
.cs-quote figcaption img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.cs-quote cite { font-style: normal; font-size: 14px; color: var(--muted); }
.blocks { padding: clamp(60px, 8vw, 110px) 0; display: grid; gap: clamp(40px, 5vw, 70px); }
.block { display: grid; grid-template-columns: 1fr 1.3fr; gap: 20px 60px; }
.block h2 { font: 700 clamp(24px, 2.8vw, 38px)/1.1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin-top: 12px; }
.block p, .block li { color: var(--muted); font-size: 17px; }
.block li { padding: 10px 0; border-bottom: 1px solid var(--line); color: var(--text); }
@media (max-width: 760px) { .block { grid-template-columns: 1fr; } }
.gallery { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; padding-bottom: clamp(60px, 8vw, 110px); }
.gallery figure { border-radius: 20px; overflow: hidden; background: var(--bg-3); grid-column: span 3; }
.gallery .g-wide { grid-column: span 6; }
.gallery .g-third { grid-column: span 2; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) { .gallery figure, .gallery .g-third { grid-column: span 6; } }
.next-case {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 0; margin: 0 0 clamp(60px, 8vw, 110px);
  border-radius: var(--radius); overflow: hidden; background: var(--bg-2); border: 1px solid var(--line);
}
.nc-text { padding: clamp(24px, 4vw, 48px); display: flex; flex-direction: column; gap: 10px; }
.nc-name { font: 800 clamp(40px, 6vw, 92px)/.9 var(--f-display); text-transform: uppercase; letter-spacing: -.035em; margin-top: 8px; }
.nc-text p { color: var(--muted); }
.nc-go { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.nc-img { position: relative; min-height: 280px; overflow: hidden; }
.nc-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); }
.next-case:hover .nc-img img { transform: scale(1.05); }

.next-case:hover .nc-go .ico { transform: translateX(4px); }
.nc-go .ico { transition: transform .35s var(--ease); }
@media (max-width: 700px) { .next-case { grid-template-columns: 1fr; } .nc-img { order: -1; min-height: 220px; } }

/* ---------- Simple pages ---------- */
.page-hero { padding: clamp(130px, 18vh, 180px) 0 clamp(30px, 4vw, 50px); }
.page-hero h1 { font-size: clamp(34px, 8vw, 120px); overflow-wrap: anywhere; }
.page-hero .lead { margin-top: 24px; }
.legal { max-width: 760px; padding-bottom: 120px; color: #cfcfcb; }
.legal h2 { font: 700 22px/1.2 var(--f-display); text-transform: uppercase; margin: 44px 0 12px; color: var(--text); }
.legal p, .legal li { margin-bottom: 12px; }
.legal ul { list-style: disc; padding-left: 20px; }
/* Contact page */
.contact { padding-bottom: clamp(60px, 8vw, 100px); }
.contact-grid { display: grid; grid-template-columns: minmax(300px, 400px) 1fr; gap: 20px; align-items: start; }
.contact-card { position: sticky; top: 90px; padding: clamp(22px, 3vw, 32px); border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); display: grid; gap: 26px; }
.contact-me { display: flex; align-items: center; gap: 16px; }
.contact-me img { width: 96px; height: 96px; border-radius: 50%; }
.contact-me b { display: block; font-size: 19px; }
.contact-me span { color: var(--muted); font-size: 14px; }
.contact-list { display: grid; gap: 18px; }
.contact-list > div { border-top: 1px solid var(--line); padding-top: 14px; }
.contact-list dt { font: 400 10px var(--f-pixel); text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 6px; }
.contact-big { font: 500 clamp(22px, 2.2vw, 28px)/1.15 var(--f-body); letter-spacing: -.02em; position: relative; }
.contact-big::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1.5px; background: currentColor; transform: scaleX(0); transform-origin: right; transition: transform .7s cubic-bezier(.625,.05,0,1); }
.contact-big:hover::after { transform: scaleX(1); transform-origin: left; }
.contact-socials { display: flex; flex-wrap: wrap; gap: 8px; }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14px; }
.contact-book-label { display: block; margin: 6px 0 14px; }
.contact .note { margin-bottom: 0; }
@media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } .contact-card { position: static; } }
.cal-box { min-height: 680px; border-radius: var(--radius); background: var(--bg-2); border: 1px solid var(--line); overflow: hidden; padding: 8px; }
.note { font-size: 14px; color: var(--muted); margin: 18px 0 120px; }
.scan-note { display: flex; gap: 14px; align-items: center; padding: 16px 20px; border-radius: 16px; background: rgba(0,255,157,.08); border: 1px solid rgba(0,255,157,.3); margin-bottom: 20px; font-size: 15px; }
.scan-note[hidden] { display: none; }
/* ---------- Win Scan ---------- */
.scan-page { min-height: 100vh; }
.scan-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding: 16px var(--gutter); position: relative; z-index: 2; }
.scan-top .back { margin: 0; }
.scan-bg {
  position: fixed; left: 50%; bottom: -4vw; transform: translateX(-50%); z-index: 0; pointer-events: none;
  font: 400 26vw/.8 var(--f-pixel); color: var(--tint); white-space: nowrap;
}
.scan { position: relative; z-index: 1; max-width: 860px; margin: 0 auto; padding: clamp(20px, 4vw, 40px) var(--gutter) 140px; }
.scan-progress { margin-bottom: clamp(36px, 5vw, 56px); }
.scan-progress-top { display: flex; justify-content: space-between; font: 400 11px var(--f-pixel); text-transform: uppercase; color: var(--muted); margin-bottom: 12px; }
.scan-progress-top span:first-child { color: var(--text); }
.scan-bars { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.scan-bars i { height: 3px; background: var(--line); border-radius: 2px; overflow: hidden; position: relative; }
.scan-bars i::after { content: ""; position: absolute; inset: 0; background: var(--text); transform: scaleX(0); transform-origin: 0 50%; transition: transform .6s var(--ease); }
.scan-bars i.on::after { transform: none; }
.step.enter { animation: stepIn .6s var(--ease); }
@keyframes stepIn { from { opacity: 0; transform: translateY(18px); } }
.step .eyebrow { margin-bottom: 18px; }
.step-title { font: 800 clamp(36px, 6.4vw, 68px)/.95 var(--f-display); text-transform: uppercase; letter-spacing: -.03em; outline: none; }
.step-sub { color: var(--muted); margin-top: 18px; max-width: 56ch; }
.hint { font-size: 13px; color: var(--muted); margin-top: 14px; display: flex; align-items: center; gap: 8px; }
.hint::before { content: "↳"; }
.opts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 28px; }
@media (max-width: 600px) { .opts { grid-template-columns: 1fr; } }
.opt {
  position: relative; display: flex; align-items: center; gap: 14px; cursor: pointer;
  padding: 18px; border-radius: 14px; border: 1px solid var(--line); background: var(--tint);
  transition: border-color .25s, background .25s, transform .25s var(--ease); font-weight: 500;
}
.opt:hover { border-color: var(--line-2); background: var(--tint-2); }
.opt:active { transform: scale(.99); }
.opt input { position: absolute; opacity: 0; pointer-events: none; }
.opt .n { font: 400 10px var(--f-pixel); color: var(--muted); padding: 5px 7px; border-radius: 6px; background: var(--bg-3); }
.opt > span:nth-of-type(2) { flex: 1; }
.opt i { width: 20px; height: 20px; border-radius: 5px; border: 1.5px solid var(--line-2); flex-shrink: 0; display: grid; place-items: center; transition: background .2s, border-color .2s; }
.opt i::after { content: ""; width: 10px; height: 6px; border: 2px solid #000; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.opt:has(input:checked) { border-color: var(--accent); background: rgba(0,255,157,.07); }
.opt:has(input:checked) i { background: var(--accent); border-color: var(--accent); }
.opt:has(input:checked) i::after { opacity: 1; }
.opt:has(input:focus-visible) { outline: 2px solid var(--accent); outline-offset: 2px; }
.opt-other { grid-column: 1 / -1; display: grid; gap: 8px; }
.other-text {
  display: none; width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2);
  background: var(--bg); color: var(--text); font: 16px var(--f-body);
}
.other-text:focus { outline: none; border-color: var(--text); }
.opt-other:has(input[data-other]:checked) .other-text { display: block; }
.scan-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 36px; }
.scan-nav[hidden] { display: none; }
.scan-nav .btn { margin-left: auto; }
.scan-nav .btn:disabled { opacity: .35; cursor: not-allowed; }
.scan-nav .btn:disabled::before { transform: none; }
.scan-back { display: inline-flex; gap: 8px; align-items: center; color: var(--muted); font-size: 15px; }
.scan-back:hover { color: var(--text); }
.scan-back[hidden] { display: none; }

.budget { margin-top: 40px; }
.budget-val { display: block; font: 800 clamp(44px, 9vw, 92px)/1 var(--f-display); letter-spacing: -.03em; }
.budget-tag { font: 400 11px var(--f-pixel); text-transform: uppercase; color: var(--accent-text); margin: 10px 0 34px; }
.budget input[type=range] {
  --p: 50%; -webkit-appearance: none; appearance: none; width: 100%; height: 4px; border-radius: 4px; outline-offset: 10px;
  background: linear-gradient(90deg, var(--text) var(--p), var(--line-2) var(--p));
}
.budget input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--text); border: 6px solid var(--bg); box-shadow: 0 0 0 1px var(--text); cursor: grab; }
.budget input[type=range]::-moz-range-thumb { width: 18px; height: 18px; border-radius: 50%; background: var(--text); border: 6px solid var(--bg); box-shadow: 0 0 0 1px var(--text); cursor: grab; }
.budget-ticks { display: flex; justify-content: space-between; margin-top: 18px; font: 400 10px var(--f-pixel); color: var(--muted); }
.budget-ticks span { cursor: pointer; transition: color .2s; }
.budget-ticks span.on { color: var(--text); }

.step-loading { text-align: center; padding-top: 6vh; }
.ring { position: relative; width: 140px; height: 140px; margin: 0 auto 28px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke: var(--line); stroke-width: 3; }
.ring circle + circle { stroke: var(--text); stroke-linecap: round; }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 26px var(--f-display); }
.step-loading .step-sub { margin: 12px auto 0; }

.dx-lead { color: var(--text); font-size: 19px; }
.meters { margin-top: 34px; display: grid; gap: 18px; }
.meter .mini-label { display: flex; margin-bottom: 10px; }
.gap { font: 600 11px var(--f-body); color: #000; background: var(--accent); padding: 3px 8px; border-radius: 99px; margin-left: 6px; }
.cells { display: grid; grid-template-columns: repeat(24, 1fr); gap: 4px; }
.cells i { height: 22px; border-radius: 3px; background: var(--tint-2); transition: background .3s; }
.cells-now i.f { --c: var(--red); }
.cells-pot i.f { --c: var(--accent); }
.cells.go i.f { background: var(--c); }
@media (max-width: 500px) { .cells { gap: 2px; } .cells i { height: 18px; } }

.dx-more { margin-top: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--tint); }
.dx-more summary { list-style: none; cursor: pointer; padding: 16px 18px; display: flex; justify-content: space-between; align-items: center; font-weight: 600; }
.dx-more summary::-webkit-details-marker { display: none; }
.dx-more .pm { width: 32px; height: 32px; }
.dx-more-body { padding: 0 18px 20px; color: var(--muted); }
.dx-more-body h3 { font: 400 11px var(--f-pixel); text-transform: uppercase; color: var(--text); margin: 18px 0 8px; }
.dx-more-body li { padding: 8px 0 8px 18px; position: relative; border-top: 1px solid var(--line); }
.dx-more-body li::before { content: ""; position: absolute; left: 0; top: 1.05em; width: 7px; height: 7px; background: var(--accent); }
.dx-more-body b { color: var(--text); }

.tim-card { display: flex; gap: 16px; align-items: center; margin-top: 16px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--line); }
.tim-card img { width: 56px; height: 56px; border-radius: 50%; }
.tim-card b { display: block; }
.tim-card span { color: var(--muted); font-size: 14px; }

.lead-form { margin-top: 40px; padding: clamp(22px, 4vw, 36px); border-radius: 20px; background: var(--bg-2); border: 1px solid var(--line); }
.form-title { font: 800 clamp(24px, 3.4vw, 34px)/1 var(--f-display); text-transform: uppercase; letter-spacing: -.02em; margin-bottom: 22px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 22px; }
@media (max-width: 600px) { .fields { grid-template-columns: 1fr; } }
.fields label span { display: block; font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.fields input {
  width: 100%; height: 50px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--bg);
  color: var(--text); font: 16px var(--f-body); transition: border-color .2s;
}
.fields input:focus { outline: none; border-color: var(--accent); }
.form-err { color: var(--red); font-size: 14px; margin: -8px 0 16px; }
.lead-form .btn { width: 100%; }
.lead-form .cta-ticks { justify-content: flex-start; }

/* Placeholder boxes (About page, until real visuals are chosen) */
.ph { display: grid; place-items: center; width: 100%; height: 100%; min-height: 100%; background: repeating-linear-gradient(135deg, var(--bg-3) 0 14px, color-mix(in srgb, var(--bg-3) 82%, var(--fg) 18%) 14px 15px); color: var(--muted, currentColor); }
.ph-label { font-family: var(--f-pixel); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; padding: .45em .8em; border-radius: 999px; background: var(--bg); opacity: .85; }
.ab-media .ph { max-width: 1600px; margin: 0 auto; aspect-ratio: 16 / 8; border-radius: var(--radius); }
.ab-band .ph { position: absolute; inset: 0; }


/* Bits Board loading screen (only with JS; never blocks for more than a few seconds) */
.pl { display: none; }
.js .pl { display: grid; place-items: center; position: fixed; inset: 0; z-index: 300; background: var(--bg); transition: opacity .55s var(--ease), visibility .55s; }
.pl-inner { display: grid; justify-items: center; gap: 26px; opacity: 0; animation: pl-in .5s .2s var(--ease) forwards; }
.pl-logo { width: clamp(120px, 22vw, 210px); height: auto; color: var(--text); overflow: visible; }
.pl-logo rect { fill: currentColor; opacity: 0; transition: opacity .18s linear; }
.pl-logo rect.lit { opacity: 1; }
.pl-logo rect.flick { opacity: .14; }
.pl-count { font: 400 11px/1 var(--f-pixel); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); display: flex; gap: .6em; }
.pl-count b { font-weight: 400; color: var(--text); font-variant-numeric: tabular-nums; }
.pl.done { opacity: 0; visibility: hidden; }
.pl.done .pl-inner { transform: translateY(-14px) scale(.98); transition: transform .55s var(--ease); }
html.pl-lock { overflow: hidden; }
@keyframes pl-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .pl-inner { animation: none; opacity: 1; } .pl-logo rect { transition: none; } }

/* Win Scan form: hidden anti-spam field (only bots fill it in) and privacy line */
.lead-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-privacy { margin-top: 14px; max-width: 52ch; font-size: 12px; line-height: 1.5; color: var(--muted); }