/* ==========================================================================
   tanisichand.com: black + purple glow
   ========================================================================== */

:root {
  --bg: #050507;
  --surface: #0c0a12;
  --surface-2: #13101c;
  --line: rgba(196, 167, 255, 0.12);
  --line-strong: rgba(196, 167, 255, 0.28);
  --text: #f3f0fa;
  --muted: #a7a1b8;
  --dim: #6d677e;
  --p: #a855f7;          /* purple */
  --p-deep: #7c3aed;
  --p-soft: #c4a7ff;
  --p-glow: rgba(168, 85, 247, 0.45);
  --grad: linear-gradient(135deg, #c4a7ff 0%, #a855f7 45%, #6d28d9 100%);
  --font: "Satoshi", system-ui, sans-serif;
  --display: "Clash Display", "Satoshi", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --max: 1180px;
  --radius: 28px;
  --ease: cubic-bezier(.2, .8, .2, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font-family: var(--font); font-size: 18px; line-height: 1.55;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, p { margin: 0; font-weight: 400; }
ul, ol { margin: 0; padding: 0; list-style: none; }
button { font: inherit; color: inherit; }
em { font-style: normal; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
::selection { background: var(--p); color: #fff; }
:focus-visible { outline: 2px solid var(--p-soft); outline-offset: 3px; border-radius: 8px; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 200; padding: 10px 16px; border-radius: 10px; background: var(--p); color: #fff; }
.skip:focus { top: 16px; }

/* ---------- Ambient layers ---------- */
.grain {
  position: fixed; inset: 0; z-index: 1; pointer-events: none; opacity: .06;
  background: url("../img/rR6HYXBrMmX4cRpXfXUOvpvpB0.png") repeat; background-size: 128px auto;
}
.aurora {
  position: fixed; z-index: 0; pointer-events: none;
  left: 50%; top: 80px; width: min(1300px, 110vw); height: 620px;
  transform: translateX(-50%); filter: blur(90px); opacity: .9;
}
.aurora canvas { display: block; width: 100%; height: 100%; }
.cursor-glow {
  position: fixed; z-index: 1; pointer-events: none; left: 0; top: 0;
  width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(168, 85, 247, .16), transparent 65%);
  transform: translate3d(var(--cx, -999px), var(--cy, -999px), 0);
  transition: opacity .4s; opacity: 0;
}
body.has-cursor .cursor-glow { opacity: 1; }
.progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 100;
  background: var(--grad); transform-origin: 0 50%; transform: scaleX(var(--progress, 0));
  box-shadow: 0 0 12px var(--p-glow);
}
main, footer, .nav-wrap { position: relative; z-index: 2; }

/* ---------- Buttons ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 52px; padding: 0 24px; border-radius: 99px; border: 1px solid transparent; cursor: pointer;
  font-family: var(--font); font-size: 16px; font-weight: 500; line-height: 1; white-space: nowrap;
  transition: transform .25s var(--ease), box-shadow .3s, background .3s, border-color .3s;
}
.btn svg { width: 19px; height: 19px; flex: none; }
.btn-primary { color: #fff; background: var(--grad); box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 8px 32px -6px var(--p-glow); }
.btn-primary:hover { box-shadow: 0 0 0 1px rgba(255,255,255,.2) inset, 0 10px 44px -4px rgba(168,85,247,.7); }
.btn-ghost { color: var(--text); background: rgba(255,255,255,.03); border-color: var(--line-strong); backdrop-filter: blur(8px); }
.btn-ghost:hover { border-color: var(--p-soft); background: rgba(168,85,247,.1); box-shadow: 0 0 24px -6px var(--p-glow); }
.btn-sm { height: 42px; padding: 0 18px; font-size: 15px; }
.arrow { width: 18px; height: 18px; transition: transform .25s var(--ease); }
a:hover .arrow, .pc:hover .arrow { transform: translateX(4px); }

/* ---------- Navigation ---------- */
.nav-wrap { position: fixed; top: 18px; left: 0; right: 0; z-index: 50; display: flex; justify-content: center; padding: 0 16px; pointer-events: none; }
.nav {
  pointer-events: auto; width: var(--max); max-width: 100%; height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 0 11px 0 12px;
  background: rgba(10, 8, 16, .62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  border: 1px solid var(--line); border-radius: 99px;
  transition: background .3s, box-shadow .3s;
}
.nav-wrap.scrolled .nav { background: rgba(10, 8, 16, .85); box-shadow: 0 10px 40px -10px rgba(0,0,0,.8); }
.brand { display: flex; align-items: center; gap: 12px; font-weight: 500; }
.mono-mark {
  display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%;
  font-family: var(--display); font-size: 15px; letter-spacing: .02em; color: #fff;
  background: var(--grad); box-shadow: 0 0 22px var(--p-glow);
}
.nav-links { display: flex; gap: 6px; font-size: 15px; }
.nav-links a { position: relative; padding: 9px 16px; border-radius: 99px; color: var(--muted); transition: color .2s, background .2s; }
.nav-links a:hover { color: var(--text); }
.nav-right { display: flex; align-items: center; gap: 8px; }
.nav-toggle { display: none; }

/* ---------- Shared type ---------- */
.eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.eyebrow b { font-weight: 500; color: var(--dim); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags span, .skills span {
  font-size: 13px; padding: 6px 12px; border-radius: 99px; color: var(--muted);
  background: rgba(168,85,247,.06); border: 1px solid var(--line);
}

/* ---------- Spotlight surface (mouse-following glow) ---------- */
.spot { position: relative; isolation: isolate; }
.spot::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(196,167,255,.12), transparent 45%);
  opacity: 0; transition: opacity .35s;
}
.spot:hover::after { opacity: 1; }

/* ---------- Hero ---------- */
.hero {
  width: var(--max); max-width: 100%; margin: 0 auto; min-height: 100vh;
  display: grid; grid-template-columns: 1.25fr 1fr; align-items: center; gap: 48px;
  padding: 140px 16px 60px;
}
.status {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px; border-radius: 99px;
  font-family: var(--mono); font-size: 13px; color: var(--p-soft);
  background: rgba(168,85,247,.08); border: 1px solid var(--line);
}
.status i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74,222,128,.6); animation: pulse 2s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 9px rgba(74,222,128,0); } 100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); } }
.hero h1 {
  margin-top: 28px; font-family: var(--display); font-weight: 500;
  font-size: clamp(30px, 6.4vw, 86px); line-height: 1.02; letter-spacing: -0.02em;
}
@media (max-width: 767px) { .hero h1 { font-size: min(11vw, 52px); } }
.h-line { display: block; white-space: nowrap; }
.rotator { position: relative; display: inline-block; white-space: nowrap; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; text-shadow: none; }
.rotator .rot-word { filter: drop-shadow(0 0 28px rgba(168,85,247,.55)); }
.caret { display: inline-block; width: 4px; height: .82em; margin-left: 6px; vertical-align: -0.05em; border-radius: 2px; background: var(--p); box-shadow: 0 0 14px var(--p); animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.hero-sub { margin-top: 26px; max-width: 540px; font-size: 20px; color: var(--muted); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.hero-stats { display: flex; gap: 44px; margin: 52px 0 0; }
.hero-stats div { position: relative; display: flex; flex-direction: column-reverse; }
.hero-stats dt { font-size: 14px; color: var(--dim); }
.hero-stats dd { margin: 0; font-family: var(--display); font-size: 44px; font-weight: 500; line-height: 1.1; }
.hero-stats em { position: absolute; top: 0; left: 30px; font-family: var(--display); font-size: 30px; }

.hero-visual { display: flex; justify-content: center; perspective: 1000px; }
.portrait { position: relative; width: min(400px, 100%); aspect-ratio: 4 / 5; border-radius: 36px; transform-style: preserve-3d; transition: transform .4s var(--ease); }
.portrait img { position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; border: 1px solid var(--line-strong); }
.portrait-ring {
  position: absolute; inset: -14px; border-radius: 46px; z-index: 0;
  background: conic-gradient(from var(--angle, 0deg), transparent 0 55%, #a855f7 70%, #c4a7ff 80%, transparent 92%);
  filter: blur(2px); animation: spin 6s linear infinite;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; padding: 2px;
}
.portrait::before { content: ""; position: absolute; inset: 10%; z-index: 0; border-radius: 50%; background: var(--p); filter: blur(80px); opacity: .5; }
@property --angle { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes spin { to { --angle: 360deg; } }
.float {
  position: absolute; z-index: 2; padding: 9px 16px; border-radius: 99px; font-size: 14px; font-weight: 500;
  background: rgba(16, 12, 26, .78); backdrop-filter: blur(10px); border: 1px solid var(--line-strong);
  box-shadow: 0 10px 30px -10px rgba(0,0,0,.8), 0 0 20px -8px var(--p-glow);
  transform: translateZ(60px); animation: bob 6s ease-in-out infinite;
}
.f1 { top: 9%; left: -12%; }
.f2 { top: 34%; right: -14%; animation-delay: -1.5s; }
.f3 { bottom: 22%; left: -16%; animation-delay: -3s; }
.f4 { bottom: 5%; right: -6%; animation-delay: -4.5s; }
@keyframes bob { 50% { translate: 0 -10px; } }

/* ---------- Clients ---------- */
.clients { display: flex; align-items: center; gap: 32px; width: var(--max); max-width: calc(100% - 32px); margin: 0 auto; padding: 26px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.clients > p { flex: none; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); }
.clients-viewport { flex: 1; min-width: 0; overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.clients-track { display: flex; gap: 64px; width: max-content; animation: slide 36s linear infinite; }
.clients-track span { font-family: var(--display); font-size: 22px; color: rgba(243,240,250,.45); white-space: nowrap; transition: color .3s; }
.clients-track span:hover { color: var(--p-soft); }
@keyframes slide { to { transform: translateX(-50%); } }

/* ---------- Sections ---------- */
.block { width: var(--max); max-width: 100%; margin: 0 auto; padding: 140px 16px 0; }
.block-tight { padding-top: 48px; }
.sec-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 52px; }
.sec-head h2 { margin-top: 16px; font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.6vw, 60px); line-height: 1.05; letter-spacing: -0.02em; }
.sec-head p { margin-top: 18px; max-width: 560px; color: var(--muted); }
.link-arrow { flex: none; display: inline-flex; align-items: center; gap: 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line-strong); color: var(--text); transition: border-color .3s, color .3s; }
.link-arrow:hover { color: var(--p-soft); border-color: var(--p-soft); }

.page-head { width: var(--max); max-width: 100%; margin: 0 auto; padding: 170px 16px 0; }
.page-head h1 { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(52px, 8vw, 110px); line-height: 1; letter-spacing: -0.03em; }
.page-head p { margin-top: 22px; max-width: 560px; font-size: 20px; color: var(--muted); }

/* ---------- Project grid ---------- */
.filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
.chip-btn {
  height: 40px; padding: 0 18px; border-radius: 99px; cursor: pointer; font-size: 15px;
  color: var(--muted); background: rgba(255,255,255,.02); border: 1px solid var(--line); transition: all .25s;
}
.chip-btn:hover { color: var(--text); border-color: var(--line-strong); }
.chip-btn.on { color: #fff; background: rgba(168,85,247,.2); border-color: rgba(196,167,255,.45); box-shadow: 0 0 20px -6px var(--p-glow); }
.pgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.pc {
  display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius);
  background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--line);
  transition: transform .5s var(--ease), border-color .4s, box-shadow .4s, opacity .4s;
}
.pc:hover { border-color: var(--line-strong); box-shadow: 0 30px 80px -30px rgba(124,58,237,.55); transform: translateY(-4px); }
.pc.hide { display: none; }
.pc-media { position: relative; margin: 10px 10px 0; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; background: #0a0812; }
.pc-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; transition: transform .9s var(--ease); }
.pc:hover .pc-media img { transform: scale(1.04); }
.pc-badge { position: absolute; top: 24px; left: 24px; z-index: 2; padding: 6px 12px; border-radius: 99px; font-family: var(--mono); font-size: 12px; color: #fff; background: var(--grad); box-shadow: 0 0 20px var(--p-glow); }
.pc-body { display: flex; flex-direction: column; flex: 1; gap: 14px; padding: 24px 28px 28px; }
.pc-body h3 { font-family: var(--display); font-weight: 500; font-size: 26px; line-height: 1.2; letter-spacing: -0.01em; }
.pc-body > p { color: var(--muted); font-size: 16px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.pc-foot { margin-top: auto; padding-top: 10px; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; }
.pc-metrics { display: flex; gap: 28px; }
.pc-metrics strong { display: block; font-family: var(--display); font-size: 30px; font-weight: 500; line-height: 1.1; }
.pc-metrics span { font-size: 13px; color: var(--dim); }
.pc-cta { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--p-soft); }
.pc-featured { grid-column: 1 / -1; display: grid; grid-template-columns: 1.35fr 1fr; }
.pc-featured .pc-media { margin: 10px 0 10px 10px; aspect-ratio: auto; min-height: 420px; }
.pc-featured .pc-body { padding: 40px; justify-content: center; }
.pc-featured h3 { font-size: 34px; }
.pc-featured .pc-foot { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 16px; }
.pc-featured .pc-cta { margin-left: 0; }

/* Phone columns (UX Playground card) */
.pc-phones { background: radial-gradient(80% 80% at 50% 50%, rgba(124,58,237,.35), #0a0812 70%); }
.phones { position: absolute; inset: 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(transparent, #000 12%, #000 88%, transparent); }
.phones-tilt { position: absolute; left: 50%; top: 50%; display: flex; gap: 16px; transform: translate(-50%, -50%) rotate(15deg); }
.phone-col { width: 112px; height: 900px; overflow: hidden; }
.phone-track { display: flex; flex-direction: column; gap: 14px; animation: scroll-y 24s linear infinite; will-change: transform; }
.phone-col:nth-child(2) .phone-track { animation-direction: reverse; animation-duration: 28s; }
.phone-col:nth-child(3) .phone-track { animation-duration: 20s; }
.phone-track img { width: 100%; border-radius: 12px; }
@keyframes scroll-y { to { transform: translateY(-50%); } }

/* ---------- Marquee band ---------- */
.band { margin-top: 140px; padding: 28px 0; overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: linear-gradient(90deg, rgba(124,58,237,.08), rgba(168,85,247,.02), rgba(124,58,237,.08)); }
.band-track { display: flex; align-items: center; gap: 40px; width: max-content; animation: slide 40s linear infinite; }
.band span { font-family: var(--display); font-size: clamp(34px, 5vw, 64px); font-weight: 500; letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1px rgba(196,167,255,.5); white-space: nowrap; transition: color .3s; }
.band span:hover { color: var(--p-soft); text-shadow: 0 0 30px var(--p-glow); }
.band i { font-style: normal; font-size: 26px; color: var(--p); text-shadow: 0 0 16px var(--p); }

/* ---------- About ---------- */
.about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 40px; align-items: start; }
.about-text p { font-size: 24px; line-height: 1.5; color: var(--muted); }
.about-text p + p { margin-top: 22px; }
.about-text p:first-of-type { color: var(--text); font-family: var(--display); font-size: 32px; line-height: 1.3; }
.about-cards { display: grid; gap: 16px; }
.mini { padding: 26px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.mini-label { display: block; margin-bottom: 14px; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--p-soft); }
.mini p { color: var(--muted); font-size: 16px; }
.now li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 0; border-top: 1px solid var(--line); font-size: 16px; }
.now li:first-child { border-top: 0; padding-top: 0; }
.now span { color: var(--muted); text-align: right; }
.skills { display: flex; flex-wrap: wrap; gap: 8px; }
.skills span { transition: color .25s, border-color .25s, background .25s; }
.skills span:hover { color: #fff; border-color: rgba(196,167,255,.45); background: rgba(168,85,247,.16); }

/* ---------- Reels & videos ---------- */
.reels { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.reel, .video {
  position: relative; margin: 0; overflow: hidden; border-radius: 24px; border: 1px solid var(--line);
  background: radial-gradient(120% 80% at 20% 0%, rgba(124,58,237,.75), rgba(76,29,149,.3) 45%, #0b0912 100%);
}
.reel:nth-child(2n) { background: radial-gradient(120% 80% at 80% 10%, rgba(168,85,247,.7), rgba(59,7,100,.35) 45%, #0b0912 100%); }
.reel:nth-child(3n) { background: radial-gradient(120% 80% at 50% 0%, rgba(196,167,255,.55), rgba(91,33,182,.3) 45%, #0b0912 100%); }
.reel { aspect-ratio: 9 / 16; transition: transform .5s var(--ease), border-color .3s; }
.reel:hover { transform: translateY(-6px) rotate(-1deg); border-color: var(--line-strong); }
.reel > img, .reel > video, .video > img, .video > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.play {
  position: absolute; left: 50%; top: 50%; z-index: 2; width: 58px; height: 58px; margin: -29px 0 0 -29px; display: grid; place-items: center; border-radius: 50%;
  color: #fff; background: rgba(168,85,247,.25); backdrop-filter: blur(10px); border: 1px solid rgba(196,167,255,.45);
  box-shadow: 0 0 30px -4px var(--p-glow); transition: transform .3s var(--ease), background .3s;
}
.play svg { width: 22px; height: 22px; margin-left: 3px; }
.reel:hover .play, .video:hover .play { transform: scale(1.12); background: rgba(168,85,247,.5); }
.playing .play { opacity: 0; }
.reel figcaption, .video figcaption { position: absolute; left: 16px; right: 16px; bottom: 16px; z-index: 2; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.reel figcaption b, .video figcaption b { font-weight: 500; font-size: 16px; line-height: 1.25; }
.video figcaption b { font-family: var(--display); font-size: 24px; }
.chip { font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 99px; background: rgba(5,5,7,.5); border: 1px solid var(--line-strong); }
.ph-note { position: absolute; top: 14px; right: 14px; z-index: 2; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: rgba(243,240,250,.55); }
.videos { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 16px; margin-top: 16px; }
.video { min-height: 210px; }
.video-main { grid-row: span 2; aspect-ratio: 16 / 10; }
.social-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 32px; }
.social-row > span { margin-right: 8px; font-family: var(--mono); font-size: 13px; text-transform: uppercase; letter-spacing: .08em; color: var(--dim); }

/* ---------- Photography ---------- */
.gallery { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 230px; gap: 14px; }
.gallery figure { margin: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); }
.gallery button { position: relative; display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery figure:hover img { transform: scale(1.06); }
.ph-0 { grid-column: span 2; grid-row: span 2; }
.ph-3 { grid-row: span 2; }
.ph-5 { grid-column: span 2; }
.ph-8 { grid-row: span 2; }
.ph-10 { grid-column: span 2; }
.lightbox { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 48px 80px; background: rgba(5,5,7,.92); backdrop-filter: blur(10px); }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 16px; box-shadow: 0 0 80px -10px var(--p-glow); }
.lb-btn { position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-strong); background: rgba(19,16,28,.8); color: #fff; font-size: 28px; line-height: 1; cursor: pointer; transition: background .2s; }
.lb-btn:hover { background: rgba(168,85,247,.35); }
.lb-close { top: 20px; right: 24px; }
.lb-prev { left: 20px; top: 50%; margin-top: -24px; }
.lb-next { right: 20px; top: 50%; margin-top: -24px; }
.lb-count { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 13px; color: var(--muted); }

/* ---------- Experience ---------- */
.exp-list { border-top: 1px solid var(--line); }
.exp-row {
  display: grid; grid-template-columns: 110px 1fr auto; align-items: center; gap: 24px;
  padding: 28px 20px; border-bottom: 1px solid var(--line); border-radius: 18px; transition: background .35s, padding .35s;
}
.exp-row:hover { background: linear-gradient(90deg, rgba(168,85,247,.12), transparent 70%); padding-left: 32px; }
.exp-year { font-family: var(--mono); font-size: 14px; color: var(--p-soft); }
.exp-role { font-family: var(--display); font-size: 28px; font-weight: 500; line-height: 1.2; }
.exp-co { margin-top: 4px; color: var(--muted); }
.exp-date { font-size: 15px; color: var(--dim); text-align: right; }
.skill-groups { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 56px; }
.skill-group { padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.skill-group h3 { margin-bottom: 18px; font-family: var(--display); font-size: 22px; font-weight: 500; }

/* ---------- Contact ---------- */
.contact { width: var(--max); max-width: 100%; margin: 0 auto; padding: 140px 16px 0; }
.contact-card {
  position: relative; overflow: hidden; padding: 96px 40px; border-radius: 40px; text-align: center;
  background: radial-gradient(70% 90% at 50% 0%, rgba(124,58,237,.45), rgba(12,10,18,.95) 70%);
  border: 1px solid var(--line-strong); box-shadow: 0 0 120px -40px var(--p-glow);
}
.contact-card::before { content: ""; position: absolute; left: 50%; top: -120px; width: 520px; height: 240px; transform: translateX(-50%); border-radius: 50%; background: var(--p); filter: blur(100px); opacity: .55; z-index: -1; }
.contact-card h2 { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: 1.02; letter-spacing: -0.02em; }
.contact-card p { max-width: 620px; margin: 26px auto 40px; font-size: 20px; color: var(--muted); }
.contact-actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; }

/* ---------- Footer ---------- */
.footer { width: var(--max); max-width: 100%; margin: 0 auto; padding: 100px 16px 32px; }
.footer-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-bottom: 28px; border-bottom: 1px solid var(--line); }
.footer-cta { display: inline-flex; align-items: center; gap: 10px; font-family: var(--display); font-size: 26px; transition: color .3s; }
.footer-cta:hover { color: var(--p-soft); }
.footer-links { display: flex; flex-wrap: wrap; gap: 26px; color: var(--muted); font-size: 15px; }
.footer-links a:hover { color: var(--p-soft); }
.wordmark {
  margin: 40px 0 20px; font-family: var(--display); font-weight: 600; font-size: clamp(64px, 15vw, 210px); line-height: .9; letter-spacing: -0.04em; text-align: center; white-space: nowrap;
  background: linear-gradient(180deg, rgba(196,167,255,.38), rgba(124,58,237,0) 85%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none;
}
.footer-bottom { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 14px; color: var(--dim); }
.to-top:hover { color: var(--p-soft); }
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 160; padding: 12px 20px; border-radius: 99px;
  background: var(--surface-2); border: 1px solid var(--line-strong); box-shadow: 0 0 30px -6px var(--p-glow);
  font-size: 15px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; transition: all .35s var(--ease);
}
.toast.show { transform: translate(-50%, 0); opacity: 1; }

/* ==========================================================================
   Case study pages
   ========================================================================== */
.cs-head { width: 900px; max-width: 100%; margin: 0 auto; padding: 160px 16px 0; }
.back { display: inline-block; margin-bottom: 28px; font-family: var(--mono); font-size: 14px; color: var(--muted); transition: color .2s; }
.back:hover { color: var(--p-soft); }
.cs-head h1 { margin-top: 20px; font-family: var(--display); font-weight: 500; font-size: clamp(38px, 5.4vw, 68px); line-height: 1.05; letter-spacing: -0.02em; }
.cs-head p { margin-top: 24px; font-size: 21px; color: var(--muted); }
.cs-img { width: calc(var(--w, 1000px) + 32px); max-width: 100%; margin: 80px auto 0; padding: 0 16px; }
.cs-img img { width: 100%; aspect-ratio: var(--ar, auto); object-fit: cover; border-radius: 28px; border: 1px solid var(--line); }
.cs-img.cs-hero { margin-top: 64px; }
.cs-img.cs-hero img { box-shadow: 0 40px 120px -40px rgba(124,58,237,.6); }
.cs-pair { width: 1100px; max-width: 100%; margin: 80px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cs-pair img { width: 100%; aspect-ratio: 493 / 537; object-fit: cover; border-radius: 28px; border: 1px solid var(--line); }
.cs-meta { width: 1100px; max-width: 100%; margin: 40px auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cs-meta div { padding: 20px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.cs-meta dt { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.cs-meta dd { margin: 8px 0 0; font-size: 17px; }
.cs-body { width: 1100px; max-width: 100%; margin: 16px auto 0; padding: 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cs-text { padding: 36px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.cs-text p { margin-top: 16px; font-size: 18px; color: var(--muted); }
.cs-stats { width: 1100px; max-width: 100%; margin: 16px auto 0; padding: 0 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.cs-stats div { padding: 30px; border-radius: 24px; background: linear-gradient(160deg, rgba(124,58,237,.22), var(--surface) 60%); border: 1px solid var(--line); }
.cs-stats strong { display: block; font-family: var(--display); font-size: 52px; font-weight: 500; line-height: 1; background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cs-stats span { display: block; margin-top: 12px; color: var(--muted); font-size: 15px; }
.cs-process { width: 1100px; max-width: 100%; margin: 120px auto 0; padding: 0 16px; }
.cs-process h2 { font-family: var(--display); font-weight: 500; font-size: clamp(36px, 4.6vw, 56px); letter-spacing: -0.02em; margin-bottom: 40px; }
.cs-process ol { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.step { display: grid; grid-template-columns: auto 1fr; gap: 6px 18px; padding: 30px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.step-n { grid-column: 1 / -1; font-family: var(--mono); font-size: 13px; color: var(--dim); }
.step svg { width: 32px; height: 32px; color: var(--p); filter: drop-shadow(0 0 10px var(--p-glow)); }
.step b { font-family: var(--display); font-size: 22px; font-weight: 500; }
.step p { margin-top: 8px; font-size: 16px; color: var(--muted); }
.cs-process .btn { margin-top: 28px; }
.quote { width: 900px; max-width: 100%; margin: 120px auto 0; padding: 0 16px; }
.quote blockquote { margin: 0; font-family: var(--display); font-size: clamp(26px, 3.2vw, 38px); font-weight: 500; line-height: 1.3; }
.quote-by { display: flex; align-items: center; gap: 16px; margin-top: 32px; font-size: 18px; }
.quote-by img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 2px solid var(--p); box-shadow: 0 0 20px var(--p-glow); }
.quote-by span { display: block; color: var(--muted); font-size: 15px; }
.bp-tab { display: none; }

/* Playground walls */
.wall { position: relative; height: 1100px; overflow: hidden; margin-top: 48px; }
.wall .phones-tilt { gap: 120px; }
.wall .phone-col { width: 320px; height: 2600px; }
.wall .phone-track { gap: 30px; animation-duration: 60s; }
.wall .phone-col:nth-child(2) .phone-track { animation-duration: 70s; }
.wall .phone-col:nth-child(3) .phone-track { animation-duration: 55s; }
.wall .phone-track img { border-radius: 28px; }
.marquee { overflow: hidden; margin: 48px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.marquee-track { display: flex; gap: 40px; width: max-content; animation: slide 50s linear infinite; }
.marquee-track img { width: 640px; height: 400px; object-fit: cover; border-radius: 20px; }

/* ---------- Motion ---------- */
.io .reveal { opacity: 0; transform: translateY(36px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.io .reveal.in { opacity: 1; transform: none; }
.rise { animation: rise 1s var(--ease) both; }
.hero-copy > .rise:nth-child(2) { animation-delay: .08s; }
.hero-copy > .rise:nth-child(3) { animation-delay: .16s; }
.hero-copy > .rise:nth-child(4) { animation-delay: .24s; }
.hero-copy > .rise:nth-child(5) { animation-delay: .32s; }
.hero-visual.rise { animation-delay: .2s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .io .reveal { opacity: 1; transform: none; }
  .cursor-glow { display: none; }
}

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
  .bp-desk { display: none; }
  .bp-tab { display: grid; }
  .cs-img.bp-tab { display: block; }
}
@media (max-width: 1023px) {
  .nav-links a { padding: 9px 11px; }
  .hero { grid-template-columns: 1fr; text-align: left; gap: 64px; min-height: 0; padding-top: 150px; }
  .hero-visual { justify-content: flex-start; }
  .portrait { width: min(360px, 80%); margin-left: 12%; }
  .pc-featured { grid-template-columns: 1fr; }
  .pc-featured .pc-media { margin: 10px 10px 0; min-height: 0; aspect-ratio: 16 / 10; }
  .pc-featured .pc-body { padding: 28px; }
  .about-grid { grid-template-columns: 1fr; }
  .reels { grid-template-columns: repeat(5, 230px); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; cursor: grab; }
  .reels::-webkit-scrollbar { display: none; }
  .reel { scroll-snap-align: start; }
  .gallery { grid-template-columns: repeat(3, 1fr); }
  .cs-meta { grid-template-columns: 1fr 1fr; }
}

/* ---------- Phone ---------- */
@media (max-width: 767px) {
  body { font-size: 17px; }
  .hero { padding: 120px 16px 40px; gap: 56px; }
  .hero-sub { font-size: 18px; }
  .hero-actions .btn { flex: 1 1 auto; }
  .hero-stats { gap: 28px; margin-top: 40px; }
  .hero-stats dd { font-size: 36px; }
  .hero-stats em { left: 22px; font-size: 24px; }
  .portrait { width: 74%; margin: 0 auto; }
  .float { font-size: 12px; padding: 7px 12px; }
  .f1 { left: -10%; } .f2 { right: -12%; } .f3 { left: -12%; } .f4 { right: -8%; }

  .clients { gap: 16px; }
  .clients > p { display: none; }
  .clients-track span { font-size: 18px; }
  .block { padding-top: 96px; }
  .sec-head { flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 36px; }
  .sec-head p { font-size: 16px; }
  .pgrid { grid-template-columns: 1fr; }
  .pc-body { padding: 20px 20px 24px; }
  .pc-body h3, .pc-featured h3 { font-size: 23px; }
  .pc-featured .pc-body { padding: 20px 20px 24px; }
  .pc-foot { flex-direction: column; align-items: flex-start; }
  .pc-cta { margin-left: 0; }
  .band { margin-top: 96px; padding: 20px 0; }
  .about-text p { font-size: 19px; }
  .about-text p:first-of-type { font-size: 25px; }
  .reels { grid-template-columns: repeat(5, 62vw); }
  .videos { grid-template-columns: 1fr; grid-template-rows: none; }
  .video-main { grid-row: auto; }
  .video { aspect-ratio: 16 / 10; min-height: 0; }
  .gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 10px; }
  .gallery figure { border-radius: 14px; }
  .ph-0, .ph-5, .ph-10 { grid-column: span 2; }
  .lightbox { padding: 72px 12px; }
  .lb-prev, .lb-next { top: auto; bottom: 16px; margin: 0; }
  .lb-prev { left: 16px; } .lb-next { right: 16px; }
  .exp-row { grid-template-columns: 1fr; gap: 6px; padding: 22px 8px; }
  .exp-row:hover { padding-left: 14px; }
  .exp-role { font-size: 22px; }
  .exp-date { text-align: left; }
  .skill-groups { grid-template-columns: 1fr; margin-top: 40px; }
  .contact { padding-top: 96px; }
  .contact-card { padding: 64px 20px; border-radius: 28px; }
  .contact-card p { font-size: 17px; }
  .contact-actions .btn { width: 100%; }
  .footer { padding-top: 72px; }
  .footer-cta { font-size: 20px; }

  .cs-head { padding-top: 120px; }
  .cs-head p { font-size: 18px; }
  .cs-img, .cs-pair, .cs-img.cs-hero { margin-top: 40px; }
  .cs-img img, .cs-pair img { border-radius: 18px; }
  .cs-pair, .cs-body, .cs-process ol { grid-template-columns: 1fr; }
  .cs-stats { grid-template-columns: 1fr; }
  .cs-text { padding: 26px; }
  .cs-process { margin-top: 80px; }
  .step { padding: 24px; }
  .quote { margin-top: 80px; }
  .wall { height: 680px; }
  .wall .phones-tilt { gap: 36px; }
  .wall .phone-col { width: 170px; height: 1600px; }
  .wall .phone-track { gap: 18px; }
  .wall .phone-track img { border-radius: 16px; }
  .marquee-track img { width: 300px; height: 188px; }
}

/* ==========================================================================
   Navigation v2: sliding indicator, live status, full-screen mobile menu
   ========================================================================== */
.nav { width: 1040px; height: 66px; padding: 0 10px 0 10px; transition: width .5s var(--ease), height .4s var(--ease), background .3s, box-shadow .3s; }
.nav-wrap.scrolled .nav { width: 900px; height: 58px; }
.brand { gap: 12px; }
.mono-mark { position: relative; transition: transform .5s var(--ease); }
.brand:hover .mono-mark { transform: rotate(-12deg) scale(1.06); }
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text b { font-weight: 500; font-size: 15px; }
.brand-text i { display: flex; align-items: center; gap: 6px; font-style: normal; font-family: var(--mono); font-size: 11px; color: var(--dim); transition: opacity .3s, max-height .3s; max-height: 20px; overflow: hidden; }
.nav-wrap.scrolled .brand-text i { opacity: 0; max-height: 0; }
.dot { width: 6px; height: 6px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 8px #4ade80; animation: pulse 2s infinite; }

.nav-links { position: relative; gap: 2px; padding: 4px; border-radius: 99px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.nav-links > a { position: relative; z-index: 1; padding: 8px 15px; font-size: 14.5px; color: var(--muted); transition: color .25s; }
.nav-links > a small { display: none; }
.nav-links > a:hover, .nav-links > a.active { color: #fff; }
.nav-ind {
  position: absolute; z-index: 0; top: 4px; bottom: 4px; left: 0; width: 0; border-radius: 99px;
  background: linear-gradient(135deg, rgba(196,167,255,.28), rgba(124,58,237,.38));
  box-shadow: inset 0 0 0 1px rgba(196,167,255,.35), 0 0 22px -4px var(--p-glow);
  transform: translateX(var(--ind-x, 0)); width: var(--ind-w, 0); opacity: var(--ind-o, 0);
  transition: transform .45s var(--ease), width .45s var(--ease), opacity .3s;
}
.menu-foot { display: none; }
.nav-cta { box-shadow: 0 0 0 1px rgba(255,255,255,.12) inset, 0 0 26px -6px var(--p-glow); }

@media (max-width: 1100px) {
  .nav, .nav-wrap.scrolled .nav { width: 100%; }
  .nav-links > a { padding: 8px 11px; }
}

/* Phone / small tablet: full-screen menu */
@media (max-width: 860px) {
  .nav-wrap { top: 12px; }
  .nav, .nav-wrap.scrolled .nav { height: 60px; padding: 0 9px; }
  .nav-links {
    position: fixed; inset: 0; z-index: -1; display: flex; flex-direction: column; justify-content: center; gap: 4px;
    padding: 110px 28px 40px; border: 0; border-radius: 0;
    background: radial-gradient(90% 60% at 80% 0%, rgba(124,58,237,.45), rgba(5,5,7,.98) 60%);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s;
  }
  .nav.open .nav-links { opacity: 1; visibility: visible; }
  .nav-ind { display: none; }
  .nav-links > a {
    display: flex; align-items: baseline; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--line); border-radius: 0;
    font-family: var(--display); font-size: clamp(34px, 9vw, 52px); font-weight: 500; letter-spacing: -0.02em; color: var(--text);
    opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .45s var(--ease), color .2s;
    transition-delay: calc(var(--i) * 50ms + 80ms);
  }
  .nav-links > a small { display: inline; font-family: var(--mono); font-size: 13px; letter-spacing: 0; color: var(--p-soft); }
  .nav-links > a:hover, .nav-links > a.active { color: var(--p-soft); }
  .nav.open .nav-links > a { opacity: 1; transform: none; }
  .menu-foot { display: flex; flex-direction: column; gap: 22px; margin-top: 32px; opacity: 0; transition: opacity .4s .35s; }
  .nav.open .menu-foot { opacity: 1; }
  .menu-foot .btn { align-self: flex-start; }
  .menu-social { display: flex; flex-wrap: wrap; gap: 20px; font-size: 15px; color: var(--muted); }
  .nav-cta { display: none; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 0 12px; border: 1px solid var(--line-strong); border-radius: 50%; background: rgba(168,85,247,.12); cursor: pointer; }
  .nav-toggle span { height: 1.5px; background: #fff; border-radius: 2px; transition: transform .3s var(--ease); }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); }
  .nav.open { background: transparent; border-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  body.menu-open { overflow: hidden; }
}

/* ==========================================================================
   Reels & Photography pages
   ========================================================================== */
.page-stats { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.page-stats span { padding: 8px 16px; border-radius: 99px; font-size: 15px; color: var(--muted); background: rgba(168,85,247,.07); border: 1px solid var(--line); }
.page-stats b { font-family: var(--display); font-weight: 500; color: var(--text); margin-right: 4px; }
.reels-page { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
.reel.hide, .gallery figure.hide { display: none; }

/* Photo captions (shown on hover) */
.ph-cap {
  position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 8px;
  font-size: 14px; color: #fff; text-align: left; opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .35s var(--ease);
}
.ph-cap i { font-style: normal; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; padding: 3px 9px; border-radius: 99px; background: rgba(5,5,7,.55); border: 1px solid var(--line-strong); }
.gallery figure:hover .ph-cap, .gallery button:focus-visible .ph-cap { opacity: 1; transform: none; }

/* Home preview: 6 photos */
.gallery-preview { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 210px; }
.gallery-preview .ph-0 { grid-column: span 2; grid-row: span 2; }
.gallery-preview .ph-3 { grid-row: span 2; }
.gallery-preview .ph-5 { grid-column: span 1; }

/* Masonry (full gallery page) */
.masonry { display: block; columns: 3 300px; column-gap: 16px; }
.masonry figure { break-inside: avoid; margin: 0 0 16px; }
.masonry button { height: auto; }
.masonry img { height: auto; }

.nav-links > a[data-page].active { color: #fff; }

@media (max-width: 767px) {
  .page-stats span { font-size: 14px; }
  .reels-page { grid-template-columns: 1fr 1fr; overflow: visible; }
  .gallery-preview { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .gallery-preview .ph-0 { grid-column: span 2; grid-row: span 1; }
  .gallery-preview .ph-3 { grid-row: span 1; }
  .masonry { columns: 2 140px; column-gap: 10px; }
  .masonry figure { margin-bottom: 10px; }
  .ph-cap { opacity: 1; transform: none; font-size: 12px; left: 10px; right: 10px; bottom: 8px; }
  .ph-cap i { display: none; }
}

/* In-page tabs on the Creative page */
.subnav {
  position: sticky; top: 96px; z-index: 40; width: max-content; max-width: calc(100% - 32px); margin: 40px auto 0;
  display: flex; gap: 4px; padding: 5px; border-radius: 99px; overflow-x: auto; scrollbar-width: none;
  background: rgba(10, 8, 16, .75); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line);
}
.subnav::-webkit-scrollbar { display: none; }
.subnav a { padding: 9px 18px; border-radius: 99px; font-size: 15px; color: var(--muted); white-space: nowrap; transition: color .2s, background .2s, box-shadow .2s; }
.subnav a:hover { color: #fff; }
.subnav a.active { color: #fff; background: linear-gradient(135deg, rgba(196,167,255,.28), rgba(124,58,237,.38)); box-shadow: inset 0 0 0 1px rgba(196,167,255,.35), 0 0 22px -4px var(--p-glow); }
#reels, #films, #photography { scroll-margin-top: 150px; }
@media (max-width: 860px) { .subnav { top: 84px; } }

/* ==========================================================================
   Real media: click-to-watch player
   ========================================================================== */
.tile-open { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; border-radius: inherit; }
.tile-open:focus-visible { outline: 2px solid var(--p-soft); outline-offset: -4px; }
.video-solo { grid-column: 1 / -1; grid-row: auto; aspect-ratio: 16 / 9; }
.videos:has(.video-solo) { grid-template-columns: 1fr; grid-template-rows: none; }
.vmodal { position: fixed; inset: 0; z-index: 160; display: grid; place-items: center; padding: 48px 24px; background: rgba(5,5,7,.94); backdrop-filter: blur(10px); }
.vmodal[hidden] { display: none; }
.vmodal video { max-width: min(100%, 1200px); max-height: 100%; border-radius: 18px; background: #000; box-shadow: 0 0 90px -10px var(--p-glow); }
.vm-close { top: 20px; right: 24px; }

/* ==========================================================================
   Email redesign case study
   ========================================================================== */
.email-hero { display: flex; align-items: center; justify-content: center; gap: 28px; height: 100%; padding: 40px; border-radius: 28px; overflow: hidden;
  background: radial-gradient(80% 90% at 50% 0%, rgba(124,58,237,.4), var(--surface) 70%); border: 1px solid var(--line); aspect-ratio: 1000 / 530; }
.email-hero img { width: 30%; height: 100%; object-fit: cover; object-position: top; border-radius: 14px; aspect-ratio: auto; border: 1px solid var(--line-strong); }
.email-hero img:last-child { box-shadow: 0 30px 80px -20px var(--p-glow); transform: scale(1.04); }
.eh-arrow { font-family: var(--display); font-size: 40px; color: var(--p-soft); text-shadow: 0 0 20px var(--p-glow); }
.egrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.ecard { padding: 22px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.ecard.hide { display: none; }
.ecard header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.ecard h3 { margin-top: 6px; font-family: var(--display); font-weight: 500; font-size: 22px; }
.ecard-hint { font-family: var(--mono); font-size: 11px; color: var(--dim); white-space: nowrap; }
.epair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.eframe { position: relative; margin: 0; }
.eframe figcaption { position: absolute; top: 10px; left: 10px; z-index: 2; padding: 4px 10px; border-radius: 99px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #fff; background: rgba(5,5,7,.7); border: 1px solid var(--line-strong); }
.eframe.is-new figcaption { background: var(--grad); border-color: transparent; box-shadow: 0 0 16px var(--p-glow); }
.escroll { height: 460px; overflow: hidden; border-radius: 16px; background: #000; border: 1px solid var(--line); }
.eframe.is-new .escroll { border-color: rgba(196,167,255,.5); box-shadow: 0 0 40px -14px var(--p-glow); }
.escroll img { width: 100%; height: auto; transform: translate3d(0, var(--sy, 0), 0); will-change: transform; }

/* ==========================================================================
   Aether brand identity block
   ========================================================================== */
.brand-id { width: 1100px; max-width: 100%; margin: 120px auto 0; padding: 48px 16px 0; }
.brand-id h2 { margin-top: 14px; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.4vw, 52px); letter-spacing: -0.02em; }
.brand-lead { margin-top: 18px; max-width: 640px; color: var(--muted); }
.ba { margin-top: 40px; padding: 36px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); display: grid; justify-items: center; gap: 22px; position: relative; }
.ba-node { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 24px; border-radius: 18px; text-align: center; background: var(--surface-2); border: 1px solid var(--line-strong); }
.ba-node b { font-weight: 500; }
.ba-node span { font-size: 14px; color: var(--muted); }
.ba-root { background: var(--grad); border-color: transparent; box-shadow: 0 0 40px -8px var(--p-glow); }
.ba-root span { color: rgba(255,255,255,.8); }
.ba-row { display: flex; gap: 16px; flex-wrap: wrap; justify-content: center; position: relative; }
.ba-row::before { content: ""; position: absolute; left: 50%; top: -22px; height: 22px; width: 1px; background: var(--line-strong); }
.ba-companies { text-align: center; }
.ba-label { display: block; margin-bottom: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.ba-companies div { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.ba-companies div span { padding: 10px 16px; border-radius: 14px; font-size: 15px; background: rgba(168,85,247,.08); border: 1px solid var(--line); }
.brand-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; margin-top: 24px; }
.brand-credit { color: var(--muted); font-size: 16px; }
.brand-credit a { color: var(--p-soft); border-bottom: 1px solid rgba(196,167,255,.4); }

@media (max-width: 1023px) {
  .egrid { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .escroll { height: 380px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .escroll img { transform: none; }
  .ecard { padding: 14px; }
  .ecard-hint { display: none; }
  .email-hero { padding: 18px; gap: 10px; }
  .eh-arrow { font-size: 24px; }
  .email-hero img { width: 40%; }
  .ba { padding: 22px 14px; }
  .brand-id { margin-top: 80px; }
}

/* Reel sound hint: shown while a reel plays muted (before the first click/tap) */
.sound-hint {
  position: absolute; top: 12px; left: 12px; right: 12px; z-index: 3; padding: 6px 10px; border-radius: 99px; text-align: center;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .02em; color: #fff; background: rgba(5,5,7,.65); border: 1px solid var(--line-strong);
  opacity: 0; transform: translateY(-4px); transition: opacity .25s, transform .25s; pointer-events: none;
}
.reel.playing.muted .sound-hint { opacity: 1; transform: none; }
body.sound-on .sound-hint { display: none; }

/* Films: equal 16:9 tiles; YouTube loads only on click */
.videos:has(.video-duo) { grid-template-columns: repeat(2, 1fr); grid-template-rows: none; }
.video-duo { aspect-ratio: 16 / 9; min-height: 0; }
.video > img { opacity: 1; }
.video iframe { position: absolute; inset: 0; z-index: 5; width: 100%; height: 100%; border: 0; }
@media (max-width: 767px) { .videos:has(.video-duo) { grid-template-columns: 1fr; } }

/* Home: every reel in one draggable row */
.reels-row { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 214px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; cursor: grab; }
.reels-row::-webkit-scrollbar { display: none; }
.reels-row .reel { scroll-snap-align: start; }
/* Home photo preview: 8 photos, 3 even rows */
.gallery-preview .ph-5 { grid-column: span 2; }
.gallery-preview .ph-3 { grid-row: span 1; }
@media (max-width: 767px) {
  .reels-row { grid-auto-columns: 62vw; }
  .gallery-preview .ph-5 { grid-column: span 2; }
}

/* Home preview: neutralise the full-gallery size rules so 12 photos fill 4 even rows */
.gallery-preview .ph-8 { grid-row: auto; }
.gallery-preview .ph-10 { grid-column: auto; }
@media (max-width: 767px) { .gallery-preview .ph-10 { grid-column: auto; } }

/* Home preview: 13 photos = one large + 12 singles, 4 even rows */
.gallery-preview .ph-5 { grid-column: auto; }
@media (max-width: 767px) { .gallery-preview .ph-5 { grid-column: auto; } }

/* Images at full strength: no fades, tints or edge masks */
.video > img { opacity: 1; }
.phones, .marquee { -webkit-mask: none; mask: none; }
.reel figcaption b, .video figcaption b { text-shadow: 0 1px 2px rgba(0,0,0,.7), 0 2px 14px rgba(0,0,0,.55); }
.chip { background: rgba(5,5,7,.6); }

/* ==========================================================================
   Research-led case study (29 Brews)
   ========================================================================== */
.rsec { width: 1100px; max-width: 100%; margin: 110px auto 0; padding: 0 16px; scroll-margin-top: 150px; }
.rsec h2 { margin-top: 14px; margin-bottom: 36px; font-family: var(--display); font-weight: 500; font-size: clamp(32px, 4.4vw, 54px); line-height: 1.05; letter-spacing: -0.02em; }
.rlead { margin-top: 18px; max-width: 820px; font-size: 22px; line-height: 1.5; color: var(--text); }
.rgrid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.rgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.rcard, .opp { padding: 28px; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); }
.rcard h3, .opp h3 { margin: 10px 0 10px; font-family: var(--display); font-weight: 500; font-size: 22px; line-height: 1.2; }
.rcard p, .opp p { color: var(--muted); font-size: 16px; }
.rnum { font-family: var(--mono); font-size: 13px; color: var(--p-soft); }
.rmethods { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; counter-reset: m; }
.rmethod { position: relative; padding: 28px 28px 28px; border-radius: 24px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(124,58,237,.16), var(--surface) 55%); }
.rmethod h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin-bottom: 10px; }
.rmethod p { color: var(--muted); font-size: 16px; }

.checklist { margin-top: 24px; padding: 28px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.checklist-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; }
.checklist-head h3 { font-family: var(--display); font-weight: 500; font-size: 24px; }
.checklist-head p { color: var(--muted); font-size: 15px; }
.table-wrap { overflow-x: auto; border-radius: 16px; border: 1px solid var(--line); }
.checklist table { width: 100%; min-width: 820px; border-collapse: collapse; font-size: 14px; }
.checklist th, .checklist td { padding: 11px 12px; text-align: center; border-bottom: 1px solid var(--line); }
.checklist thead th { font-weight: 500; color: var(--muted); white-space: nowrap; }
.checklist thead tr:first-child th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.checklist tbody th { text-align: left; font-weight: 400; color: var(--text); white-space: nowrap; position: sticky; left: 0; background: var(--surface); }
.checklist tbody tr:hover th, .checklist tbody tr:hover td { background: rgba(168,85,247,.07); }
.checklist .is-us { background: rgba(168,85,247,.08); color: #fff; }
.checklist thead .is-us { color: #fff; font-weight: 600; }
.checklist svg { width: 18px; height: 18px; color: #4ade80; vertical-align: middle; }
.checklist .no { color: var(--dim); }
.checklist-note { margin-top: 16px; color: var(--muted); font-size: 15px; }

.problem { margin: 0; padding: 36px 40px; border-radius: 28px; border-left: 3px solid var(--p); background: linear-gradient(90deg, rgba(124,58,237,.18), var(--surface) 70%); font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.35; }
.hmw-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; margin-top: 16px; }
.hmw { padding: 22px 24px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.hmw span { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }
.design-slot { display: grid; place-items: center; min-height: 280px; border-radius: 28px; border: 1px dashed var(--line-strong); background: var(--surface); color: var(--muted); text-align: center; padding: 24px; }

@media (max-width: 900px) {
  .rgrid3, .rmethods { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .rsec { margin-top: 80px; }
  .rlead { font-size: 18px; }
  .checklist { padding: 16px; }
  .problem { padding: 24px; }
}

/* 29 Brews: ideate + design */
.rsub { margin: 72px 0 18px; font-family: var(--display); font-weight: 500; font-size: 28px; }
.rhint { margin: -6px 0 18px; color: var(--muted); font-size: 15px; }
.shot { display: block; overflow: hidden; border-radius: 22px; border: 1px solid var(--line); background: #fff; transition: transform .4s var(--ease), border-color .3s; }
.shot:hover { transform: translateY(-3px); border-color: var(--line-strong); }
.shot img { width: 100%; height: auto; }
.ideate-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: 32px; align-items: start; }
.shot-tall { max-height: 640px; }
.shot-tall img { object-fit: cover; object-position: top; }
.ideate-copy h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin: 0 0 10px; }
.ideate-copy p { color: var(--muted); font-size: 17px; margin-bottom: 28px; }
.ia-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.tab { height: 40px; padding: 0 16px; border-radius: 99px; cursor: pointer; font-size: 15px; color: var(--muted); background: rgba(255,255,255,.02); border: 1px solid var(--line); transition: all .25s; }
.tab:hover { color: var(--text); border-color: var(--line-strong); }
.tab.on { color: #fff; background: rgba(168,85,247,.2); border-color: rgba(196,167,255,.45); box-shadow: 0 0 20px -6px var(--p-glow); }
.pane { display: none; margin: 0; }
.pane.on { display: block; animation: rise .5s var(--ease) both; }
.flows { margin-top: 48px; padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.flows .pane a { display: block; border-radius: 16px; overflow: hidden; background: #fff; }
.flows .pane img { width: 100%; height: auto; max-height: 720px; object-fit: contain; }
.flows figcaption { margin-top: 16px; color: var(--muted); font-size: 16px; max-width: 820px; }

.versions { max-width: 900px; }
.vscroll { height: 560px; }
.vnote { margin-top: 10px; color: var(--muted); font-size: 14px; }

.map { display: grid; gap: 10px; }
.map-row { display: grid; grid-template-columns: 1fr auto 1.4fr; gap: 18px; align-items: center; padding: 18px 22px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.map-from, .map-to { font-size: 16px; }
.map-from { color: var(--muted); }
.map-from span, .map-to span { display: block; margin-bottom: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.map-to span { color: var(--p-soft); }
.map-arrow { font-size: 22px; color: var(--p-soft); }

.browser { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-strong); background: #111; box-shadow: 0 30px 80px -30px rgba(0,0,0,.9); }
.browser-bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: #17151d; border-bottom: 1px solid var(--line); }
.browser-bar i { width: 11px; height: 11px; border-radius: 50%; background: #3a3644; }
.browser-bar i:nth-child(1) { background: #ff5f57; } .browser-bar i:nth-child(2) { background: #febc2e; } .browser-bar i:nth-child(3) { background: #28c840; }
.browser-bar span { margin-left: 10px; font-family: var(--mono); font-size: 12px; color: var(--muted); }
.pscroll { height: 640px; border: 0; border-radius: 0; background: #fffaf2; }

@media (max-width: 900px) {
  .ideate-grid, .ia-grid { grid-template-columns: 1fr; }
  .map-row { grid-template-columns: 1fr; gap: 6px; }
  .map-arrow { transform: rotate(90deg); justify-self: start; }
}
@media (max-width: 767px) {
  .vscroll { height: 420px; overflow-y: auto; }
  .pscroll { height: 520px; overflow-y: auto; }
  .flows { padding: 14px; }
  .tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .tab { flex: none; }
}

/* 29 Brews: page overview strip + picture tour */
.overview { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(118px, 1fr); gap: 12px; padding: 22px; border-radius: 28px; background: #1b1b1d; border: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; align-items: start; }
.overview::-webkit-scrollbar { display: none; }
.ov-page { display: flex; flex-direction: column; gap: 8px; padding: 0; border: 0; background: none; cursor: pointer; text-align: left; }
.ov-label { align-self: flex-start; padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 600; color: #111; background: #fff; white-space: nowrap; }
.ov-shot { display: block; height: 260px; overflow: hidden; border-radius: 6px; box-shadow: 0 8px 24px rgba(0,0,0,.5); transition: transform .35s var(--ease), box-shadow .35s; }
.ov-shot img { width: 100%; height: auto; transition: transform 2.4s ease; }
.ov-page:hover .ov-shot, .ov-page:focus-visible .ov-shot { transform: translateY(-6px); box-shadow: 0 16px 36px rgba(0,0,0,.6), 0 0 0 2px var(--p-soft); }
.ov-page:hover .ov-shot img { transform: translateY(calc(-100% + 260px)); }

.tour { display: grid; gap: 72px; margin-top: 72px; }
.chapter-head { display: flex; gap: 18px; align-items: baseline; margin-bottom: 22px; }
.chapter-head .rnum { font-size: 15px; }
.chapter-head h3 { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.1; }
.chapter-head p { margin-top: 6px; color: var(--muted); font-size: 17px; max-width: 640px; }
.hl-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.hl { margin: 0; grid-column: span 2; }
.hl-wide { grid-column: 1 / -1; }
.hl-quarter { grid-column: span 1; }
.hl button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: #111; cursor: zoom-in; transition: transform .45s var(--ease), border-color .3s, box-shadow .45s; }
.hl button:hover { transform: translateY(-4px); border-color: var(--line-strong); box-shadow: 0 24px 60px -24px rgba(0,0,0,.9); }
.hl img { width: 100%; height: auto; display: block; }
.hl figcaption { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--muted); }
.hl figcaption b { display: block; margin-bottom: 2px; font-weight: 500; font-size: 17px; color: var(--text); }
.hl-quarter figcaption { font-size: 14px; }

@media (max-width: 900px) {
  .hl, .hl-wide { grid-column: 1 / -1; }
  .hl-quarter { grid-column: span 2; }
}
@media (max-width: 767px) {
  .overview { grid-auto-columns: 112px; padding: 14px; }
  .ov-shot { height: 200px; }
  .chapter-head h3 { font-size: 24px; }
  .tour { gap: 56px; margin-top: 56px; }
}

/* Brainstorm board (animated, FigJam-style) */
.board { margin-top: 28px; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); background: #151318; }
.board-head { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); font-size: 14px; color: var(--muted); background: #1b1820; }
.board-dot { width: 10px; height: 10px; border-radius: 3px; background: var(--grad); }
.board-hint { margin-left: auto; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--p-soft); }
.board-canvas { position: relative; padding: 32px 28px 36px; overflow-x: auto; scrollbar-width: thin;
  background-image: radial-gradient(rgba(255,255,255,.08) 1px, transparent 1.2px); background-size: 22px 22px; }
.board-cols { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(200px, 1fr)); gap: 18px; min-width: calc(var(--n, 5) * 212px); align-items: start; }
.bcol { display: grid; gap: 14px; }
.note { position: relative; padding: 16px 16px 18px; border-radius: 6px; color: #1d1b22; font-size: 14px; line-height: 1.4;
  box-shadow: 0 10px 22px -10px rgba(0,0,0,.7); transform: rotate(var(--r));
  transition: transform .35s var(--ease), box-shadow .35s; }
.note:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); box-shadow: 0 18px 34px -12px rgba(0,0,0,.8); z-index: 2; }
.note b { display: block; margin-bottom: 8px; font-size: 15px; font-weight: 700; }
.note ul { display: flex; flex-wrap: wrap; gap: 5px; }
.note li { padding: 3px 8px; border-radius: 99px; font-size: 12px; background: rgba(255,255,255,.55); }
.note-hmw { min-height: 150px; padding: 18px; color: #fff; font-family: var(--display); font-size: 18px; font-weight: 500; line-height: 1.25;
  background: linear-gradient(150deg, #8b5cf6, #6d28d9); box-shadow: 0 14px 30px -12px rgba(124,58,237,.8); }
.note-hmw span { display: block; margin-bottom: 8px; font-family: var(--mono); font-size: 11px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.75); }
.note-yellow { background: #ffe68a; } .note-pink { background: #ffc2d6; } .note-mint { background: #bdf0d0; }
.note-blue { background: #c2dcff; } .note-peach { background: #ffd2b0; }

/* motion: notes pop onto the board when it scrolls into view */
.js [data-board] .note { opacity: 0; transform: rotate(var(--r)) translateY(26px) scale(.82); }
.js [data-board].in .note { opacity: 1; transform: rotate(var(--r)); transition: opacity .5s var(--ease) var(--d), transform .6s cubic-bezier(.2,1.4,.4,1) var(--d), box-shadow .35s; }
.js [data-board].in .note:hover { transform: rotate(0deg) translateY(-4px) scale(1.03); transition-delay: 0s; }
.board-cursor { position: absolute; z-index: 5; top: 0; left: 0; display: flex; align-items: flex-start; gap: 2px; color: #a855f7; pointer-events: none; opacity: 0; }
.board-cursor svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.board-cursor span { margin-top: 14px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 600; color: #fff; background: #a855f7; }
[data-board].in .board-cursor { opacity: 1; animation: cursor-path 14s ease-in-out 1.4s infinite; }
@keyframes cursor-path {
  0%   { transform: translate(60px, 120px); }
  18%  { transform: translate(300px, 300px); }
  34%  { transform: translate(560px, 180px); }
  52%  { transform: translate(780px, 420px); }
  70%  { transform: translate(990px, 240px); }
  86%  { transform: translate(420px, 520px); }
  100% { transform: translate(60px, 120px); }
}
@media (prefers-reduced-motion: reduce) {
  .js [data-board] .note { opacity: 1; transform: rotate(var(--r)); }
  .board-cursor { display: none; }
}
@media (max-width: 767px) {
  .board-canvas { padding: 22px 16px 26px; }
  .board-cols { grid-template-columns: repeat(var(--n, 5), 230px); min-width: 0; }
}

/* Discover → Define → Develop → Deliver stepper */
.stepper { position: sticky; top: 96px; z-index: 40; width: 760px; max-width: calc(100% - 32px); margin: 48px auto 0; padding: 14px 26px;
  display: flex; justify-content: space-between; border-radius: 99px; background: rgba(10, 8, 16, .82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--line); }
.stepper-track { position: absolute; left: 52px; right: 52px; top: 30px; height: 2px; border-radius: 2px; background: var(--line-strong); overflow: hidden; }
.stepper-fill { display: block; height: 100%; width: calc(var(--prog, 0) * 100%); background: var(--grad); box-shadow: 0 0 10px var(--p-glow); transition: width .15s linear; }
.stepper a { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 64px; color: var(--dim); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-family: var(--mono); transition: color .3s; }
.stepper i { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; font-style: normal; font-size: 13px; color: var(--muted); background: #151318; border: 1px solid var(--line-strong); transition: color .35s var(--ease), background-color .35s var(--ease), border-color .35s var(--ease), box-shadow .35s var(--ease), transform .35s var(--ease); }
.stepper a.done i { color: #fff; background: rgba(168,85,247,.35); border-color: rgba(196,167,255,.5); }
.stepper a.active { color: #fff; }
.stepper a.active i { color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 0 18px var(--p-glow); transform: scale(1.1); }
.stepper a:hover { color: var(--text); }
@media (max-width: 860px) { .stepper { top: 84px; padding: 10px 14px; } .stepper-track { left: 40px; right: 40px; top: 26px; } .stepper i { width: 28px; height: 28px; } .stepper a { min-width: 52px; font-size: 10px; } }

/* Animated sitemap (information architecture) */
.ia-wrap { padding: 24px; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); }
.ia { position: relative; overflow-x: auto; padding: 8px 4px 12px; scrollbar-width: thin; }
.ia-root { position: relative; width: max-content; margin: 0 auto 44px; padding: 12px 28px; border-radius: 14px; font-family: var(--display); font-weight: 500; font-size: 18px; color: #fff; background: var(--grad); box-shadow: 0 0 30px -6px var(--p-glow); }
.ia-root::after { content: ""; position: absolute; left: 50%; top: 100%; width: 2px; height: 22px; background: var(--line-strong); transform-origin: top; }
.ia-cols { position: relative; display: grid; grid-template-columns: repeat(6, minmax(150px, 1fr)); gap: 14px; min-width: 980px; padding-top: 22px; }
.ia-cols::before { content: ""; position: absolute; top: 0; left: calc(100% / 12); right: calc(100% / 12); height: 2px; background: var(--line-strong); transform-origin: center; }
.ia-col { position: relative; }
.ia-col::before { content: ""; position: absolute; top: -22px; left: 50%; width: 2px; height: 22px; background: var(--line-strong); transform-origin: top; }
.ia-head { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 8px; border-radius: 12px; text-align: center; font-size: 14px; font-weight: 600; letter-spacing: .02em; color: #fff; background: #2a2433; border: 1px solid rgba(196,167,255,.35); }
.ia-only .ia-head { border-color: var(--p-soft); box-shadow: 0 0 22px -6px var(--p-glow); background: rgba(124,58,237,.35); }
.ia-badge { font-style: normal; font-family: var(--mono); font-size: 10px; font-weight: 400; text-transform: uppercase; letter-spacing: .08em; color: var(--p-soft); }
.ia-list { position: relative; margin: 10px 0 0 10px; padding-left: 14px; border-left: 2px solid var(--line-strong); display: grid; gap: 7px; }
.ia-list li, .ia-group ul li { position: relative; }
.ia-list > li::before { content: ""; position: absolute; left: -14px; top: 15px; width: 12px; height: 2px; background: var(--line-strong); }
.ia-node, .ia-group ul li { display: block; padding: 7px 10px; border-radius: 10px; font-size: 12.5px; line-height: 1.3; color: var(--text); background: #1e1b24; border: 1px solid var(--line); }
.ia-sub { background: rgba(168,85,247,.22); border-color: rgba(196,167,255,.4); font-weight: 600; }
.ia-group ul { margin: 7px 0 0 8px; padding-left: 10px; border-left: 1px dashed var(--line-strong); display: grid; gap: 5px; }
.ia-group ul li { font-size: 12px; color: var(--muted); background: transparent; }

/* motion: lines draw, then branches cascade in */
.js [data-ia] .ia-root, .js [data-ia] .ia-head, .js [data-ia] .ia-list > li, .js [data-ia] .ia-group ul li { opacity: 0; transform: translateY(10px); }
.js [data-ia] .ia-root::after, .js [data-ia] .ia-col::before { transform: scaleY(0); }
.js [data-ia] .ia-cols::before { transform: scaleX(0); }
.js [data-ia] .ia-list { clip-path: inset(0 0 100% 0); }
.js [data-ia].in .ia-root { opacity: 1; transform: none; transition: opacity .5s var(--ease), transform .5s var(--ease); }
.js [data-ia].in .ia-root::after { transform: none; transition: transform .3s ease .35s; }
.js [data-ia].in .ia-cols::before { transform: none; transition: transform .6s var(--ease) .55s; }
.js [data-ia].in .ia-col::before { transform: none; transition: transform .3s ease calc(.9s + var(--c) * .08s); }
.js [data-ia].in .ia-head { opacity: 1; transform: none; transition: opacity .45s var(--ease) calc(1s + var(--c) * .1s), transform .45s var(--ease) calc(1s + var(--c) * .1s); }
.js [data-ia].in .ia-list { clip-path: inset(0 0 0 0); transition: clip-path 1.2s ease calc(1.3s + var(--c) * .1s); }
.js [data-ia].in .ia-list > li, .js [data-ia].in .ia-group ul li { opacity: 1; transform: none; transition: opacity .4s var(--ease) calc(1.35s + var(--c) * .1s + var(--k) * .06s), transform .4s var(--ease) calc(1.35s + var(--c) * .1s + var(--k) * .06s); }
@media (prefers-reduced-motion: reduce) {
  .js [data-ia] * { opacity: 1 !important; transform: none !important; clip-path: none !important; }
}
@media (max-width: 767px) { .ia-wrap { padding: 14px; } }

/* Six design highlights: big alternating image + text rows */
.tour { gap: 28px; margin-top: 64px; }
.feat { display: grid; grid-template-columns: 1.55fr 1fr; gap: 40px; align-items: center; padding: 18px; border-radius: 30px; background: var(--surface); border: 1px solid var(--line); }
.feat-flip { grid-template-columns: 1fr 1.55fr; }
.feat-flip .feat-img { order: 2; }
.feat-img button { display: block; width: 100%; padding: 0; border: 0; border-radius: 20px; overflow: hidden; cursor: zoom-in; background: #111; box-shadow: 0 24px 60px -30px rgba(0,0,0,.9); }
.feat-img img { width: 100%; height: auto; display: block; transition: transform 1s var(--ease); }
.feat:hover .feat-img img { transform: scale(1.025); }
.feat-copy { padding: 8px 14px; }
.feat-copy h3 { margin: 14px 0 12px; font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.1; letter-spacing: -0.01em; }
.feat-copy p { color: var(--muted); font-size: 17px; line-height: 1.55; }
.overview + .tour { margin-top: 40px; }
@media (max-width: 900px) {
  .feat, .feat-flip { grid-template-columns: 1fr; gap: 18px; }
  .feat-flip .feat-img { order: 0; }
  .feat-copy { padding: 4px 6px 10px; }
}

/* ==========================================================================
   29 Brews hero: layered scene
   ========================================================================== */
.bx-hero { width: var(--max); max-width: 100%; margin: 0 auto; padding: 140px 16px 40px; display: grid; grid-template-columns: 1fr 1.05fr; gap: 40px; align-items: center; min-height: 92vh; }
.bx-copy .back { margin-bottom: 22px; }
.bx-copy h1 { margin-top: 20px; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5vw, 66px); line-height: 1.04; letter-spacing: -0.02em; }
.bx-copy h1 span { color: #f5b25c; }
.bx-copy h1 em { display: block; }
.bx-copy > p { margin-top: 22px; max-width: 540px; font-size: 19px; color: var(--muted); }
.bx-stats { display: grid; grid-template-columns: repeat(4, auto); gap: 26px; margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--line); width: max-content; max-width: 100%; }
.bx-stats strong { display: block; font-family: var(--display); font-weight: 500; font-size: 36px; line-height: 1; }
.bx-stats span { display: block; margin-top: 6px; font-size: 13px; color: var(--dim); }
.bx-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

.bx-visual { position: relative; aspect-ratio: 1 / .95; perspective: 1200px; }
.bx-visual > * { position: absolute; will-change: transform; transition: transform .6s var(--ease); }
.bx-glow { inset: 8% 4% 10% 10%; border-radius: 50%; background: radial-gradient(circle at 40% 45%, rgba(245,178,92,.38), rgba(168,85,247,.28) 45%, transparent 70%); filter: blur(30px); }
.bx-ring { inset: 12% 10% 14% 16%; border-radius: 50%; border: 1px dashed rgba(245,178,92,.3); animation: spin-slow 60s linear infinite; }
@keyframes spin-slow { to { rotate: 360deg; } }
.bx-browser { left: 6%; top: 16%; width: 78%; border-radius: 16px; overflow: hidden; border: 1px solid rgba(245,178,92,.35); box-shadow: 0 40px 90px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.04); rotate: -3deg; }
.bx-browser img { display: block; width: 100%; height: auto; }
.bx-can { width: 19%; filter: drop-shadow(0 26px 30px rgba(0,0,0,.6)); }
.bx-c1 { right: 2%; top: 2%; rotate: 12deg; animation: bob 7s ease-in-out infinite; }
.bx-c2 { right: 13%; bottom: 4%; width: 22%; rotate: -8deg; animation: bob 8s ease-in-out -2s infinite; z-index: 3; }
.bx-c3 { left: -2%; bottom: 8%; width: 17%; rotate: -14deg; animation: bob 6.5s ease-in-out -4s infinite; }
.bx-medal { width: 11%; border-radius: 50%; filter: drop-shadow(0 10px 16px rgba(0,0,0,.6)); animation: bob 5.5s ease-in-out infinite; }
.bx-m1 { left: 2%; top: 4%; animation-delay: -1s; }
.bx-m2 { left: 46%; top: 0; width: 9.5%; animation-delay: -3s; }
.bx-m3 { right: 30%; bottom: 0; width: 9%; animation-delay: -2s; z-index: 4; }
.bx-card { z-index: 5; padding: 14px 16px; border-radius: 16px; background: rgba(18,15,24,.88); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(245,178,92,.3); box-shadow: 0 20px 40px -18px rgba(0,0,0,.9); }
.bx-taste { left: 0; top: 52%; width: 44%; }
.bx-k { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: #f5b25c; }
.bx-slider { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; font-size: 11px; color: var(--muted); margin-top: 6px; }
.bx-slider i { position: relative; height: 4px; border-radius: 4px; background: rgba(255,255,255,.12); }
.bx-slider b { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #f5b25c; box-shadow: 0 0 10px rgba(245,178,92,.7); animation: knob 4s ease-in-out infinite alternate; }
@keyframes knob { from { translate: -10px 0; } to { translate: 10px 0; } }
.bx-place { right: 0; top: 40%; display: flex; gap: 10px; align-items: center; }
.bx-place b { display: block; font-weight: 500; font-size: 14px; }
.bx-place span { font-size: 12px; color: var(--muted); }
.bx-pin { width: 12px; height: 12px; border-radius: 50%; background: #f5b25c; box-shadow: 0 0 0 0 rgba(245,178,92,.6); animation: pulse 2s infinite; }
.bx-pill { z-index: 5; left: 30%; bottom: 14%; padding: 9px 14px; border-radius: 99px; font-size: 13px; font-weight: 500; color: #1d1305; background: linear-gradient(135deg, #ffd58a, #f5b25c); box-shadow: 0 14px 30px -12px rgba(245,178,92,.8); }
.js .bx-visual > .bx-can, .js .bx-visual > .bx-medal, .js .bx-visual > .bx-card, .js .bx-visual > .bx-pill { opacity: 0; }
.bx-visual.ready > .bx-can, .bx-visual.ready > .bx-medal, .bx-visual.ready > .bx-card, .bx-visual.ready > .bx-pill { opacity: 1; transition: opacity .7s var(--ease), transform .6s var(--ease); }
.bx-visual.ready > .bx-c2 { transition-delay: .15s; } .bx-visual.ready > .bx-c3 { transition-delay: .3s; }
.bx-visual.ready > .bx-card { transition-delay: .45s; } .bx-visual.ready > .bx-pill { transition-delay: .6s; }
@media (max-width: 1023px) { .bx-hero { grid-template-columns: 1fr; min-height: 0; padding-top: 130px; } .bx-visual { max-width: 640px; width: 100%; margin: 0 auto; } }
@media (max-width: 767px) {
  .bx-stats { grid-template-columns: repeat(2, auto); gap: 18px 28px; }
  .bx-stats strong { font-size: 30px; }
  .bx-taste { width: 58%; top: 56%; }
  .bx-place { top: 36%; padding: 10px 12px; }
  .bx-pill { left: 22%; bottom: 10%; font-size: 11px; }
}
@media (prefers-reduced-motion: reduce) { .bx-visual > * { animation: none !important; opacity: 1 !important; } }

/* ==========================================================================
   User-flow journeys (native, animated)
   ========================================================================== */
.journey { position: relative; display: grid; justify-items: center; gap: 30px; padding: 20px 8px 8px; }
.journey::before { content: ""; position: absolute; left: 50%; top: 36px; bottom: 36px; width: 2px; margin-left: -1px; background: linear-gradient(var(--p-soft), rgba(196,167,255,.15)); transform-origin: top; }
.jr { position: relative; z-index: 1; }
.jr > span { display: block; padding: 12px 20px; border-radius: 14px; text-align: center; font-size: 15px; background: var(--surface-2); border: 1px solid var(--line-strong); }
.jr-start > span, .jr-end > span { border-radius: 99px; color: #fff; background: var(--grad); border-color: transparent; box-shadow: 0 0 24px -6px var(--p-glow); font-weight: 500; }
.jr-end > span { background: linear-gradient(135deg, #ffd58a, #f5b25c); color: #1d1305; box-shadow: 0 0 24px -6px rgba(245,178,92,.8); }
.jr-decision > span { padding: 12px 22px; border-radius: 6px; font-family: var(--display); font-weight: 500; background: rgba(168,85,247,.16); border-color: rgba(196,167,255,.5); clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%); padding-left: 34px; padding-right: 34px; }
.jr-branch { width: 100%; }
.jr-opts { display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); gap: 12px; max-width: 900px; margin: 0 auto; }
.jr-opt { position: relative; padding: 14px 16px; border-radius: 14px; font-size: 14px; line-height: 1.4; text-align: center; color: var(--text); background: var(--surface); border: 1px dashed rgba(196,167,255,.4); }
/* motion: the spine draws, then each step appears in order */
.js [data-journey]::before { transform: scaleY(0); }
.js [data-journey] .jr { opacity: 0; transform: translateY(14px) scale(.96); }
.js [data-journey].in::before { transform: none; transition: transform 1.6s ease .1s; }
.js [data-journey].in .jr { opacity: 1; transform: none; transition: opacity .45s var(--ease) calc(.15s + var(--s) * .18s), transform .55s cubic-bezier(.2,1.3,.4,1) calc(.15s + var(--s) * .18s); }
@media (prefers-reduced-motion: reduce) { .js [data-journey] .jr, .js [data-journey]::before { opacity: 1; transform: none; } }
@media (max-width: 767px) {
  .jr-opts { grid-template-columns: 1fr; max-width: 320px; }
  .jr > span { font-size: 14px; }
}

/* 29 Brews project card: composed scene instead of a screenshot */
.pc-scene { background: radial-gradient(90% 90% at 70% 40%, #3a2412 0%, #1a110a 45%, #0c0805 100%); }
.pc-scene::after { display: none; }
.pc-scene > * { position: absolute; transition: transform .7s var(--ease), opacity .5s; }
.pcs-glow { inset: 10% 6% 6% 30%; border-radius: 50%; background: radial-gradient(circle, rgba(245,178,92,.45), rgba(168,85,247,.18) 50%, transparent 70%); filter: blur(24px); }
.pcs-browser { left: 6%; top: 15%; width: 56%; border-radius: 10px; overflow: hidden; border: 1px solid rgba(245,178,92,.35); box-shadow: 0 24px 50px -18px rgba(0,0,0,.95); transform: rotate(-4deg); }
.pcs-bar { display: flex; gap: 5px; padding: 7px 9px; background: #17110c; }
.pcs-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a2c20; }
.pcs-bar i:nth-child(1) { background: #ff5f57; } .pcs-bar i:nth-child(2) { background: #febc2e; } .pcs-bar i:nth-child(3) { background: #28c840; }
.pc .pc-scene .pcs-browser img { width: 100%; height: auto; transform: none; }
.pcs-can { width: 17%; height: auto; bottom: 10%; filter: drop-shadow(0 18px 20px rgba(0,0,0,.65)); }
.pcs-c1 { right: 25%; transform: rotate(-10deg); z-index: 2; }
.pcs-c2 { right: 13%; bottom: 14%; width: 19%; transform: rotate(4deg); z-index: 3; }
.pcs-c3 { right: 2%; transform: rotate(14deg); z-index: 2; }
.pcs-medal { width: 10%; right: 6%; top: 8%; border-radius: 50%; filter: drop-shadow(0 8px 12px rgba(0,0,0,.6)); }
.pcs-pill { left: 8%; bottom: 10%; z-index: 4; padding: 7px 12px; border-radius: 99px; font-size: 12px; font-weight: 500; color: #1d1305; background: linear-gradient(135deg, #ffd58a, #f5b25c); box-shadow: 0 10px 24px -10px rgba(245,178,92,.8); }
/* hover: cans fan out and lift, browser tilts back */
.pc:hover .pcs-c1 { transform: translate(-14%, -10%) rotate(-16deg); }
.pc:hover .pcs-c2 { transform: translateY(-12%) rotate(2deg) scale(1.04); }
.pc:hover .pcs-c3 { transform: translate(12%, -8%) rotate(20deg); }
.pc:hover .pcs-browser { transform: rotate(-1deg) translateY(-3%); }
.pc:hover .pcs-medal { transform: rotate(-18deg) scale(1.1); }
.pc-featured .pc-scene { min-height: 420px; }
@media (prefers-reduced-motion: reduce) { .pc:hover .pc-scene > * { transform: none; } }
/* scene layers must not inherit the full-bleed card image rule */
.pc-media.pc-scene img { width: auto; height: auto; object-fit: contain; object-position: center; }
.pc-media.pc-scene .pcs-browser img { width: 100%; }
.pc-media.pc-scene .pcs-can { width: 17%; }
.pc-media.pc-scene .pcs-c2 { width: 19%; }
.pc-media.pc-scene .pcs-medal { width: 10%; }
.pc:hover .pc-media.pc-scene img { transform: none; }
.pc:hover .pc-media.pc-scene .pcs-c1 { transform: translate(-14%, -10%) rotate(-16deg); }
.pc:hover .pc-media.pc-scene .pcs-c2 { transform: translateY(-12%) rotate(2deg) scale(1.04); }
.pc:hover .pc-media.pc-scene .pcs-c3 { transform: translate(12%, -8%) rotate(20deg); }
.pc:hover .pc-media.pc-scene .pcs-medal { transform: rotate(-18deg) scale(1.1); }
.pc-media.pc-scene .pcs-c1 { transform: rotate(-10deg); }
.pc-media.pc-scene .pcs-c2 { transform: rotate(4deg); }
.pc-media.pc-scene .pcs-c3 { transform: rotate(14deg); }

/* ==========================================================================
   29 Brews brand cards (tokens from the 29 Brews Figma file)
   ========================================================================== */
.b29 { --b-cream: #e9e2d3; --b-orange: #ef8232; --b-rust: #9e3d00; --b-line: #e0c0b2; --b-bg: rgba(21,15,10,.92);
  font-family: "Manrope", var(--font); color: var(--b-cream); }
.bx-card.b29 { padding: 16px 18px; border-radius: 8px; background: var(--b-bg); border: 1px solid rgba(224,192,178,.55); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 22px 44px -18px rgba(0,0,0,.95); }
.b29 em { font-family: "Newsreader", Georgia, serif; font-style: italic; font-weight: 400; color: var(--b-orange); }
.b29-eyebrow { display: block; font-size: 9.5px; font-weight: 500; letter-spacing: .32em; text-transform: uppercase; color: var(--b-cream); opacity: .85; }
.b29-title { display: block; margin-top: 6px; font-family: "Newsreader", Georgia, serif; font-weight: 700; font-size: 22px; line-height: 1.05; letter-spacing: -0.02em; color: var(--b-cream); }
.b29-title em { font-weight: 400; }
/* flavor card */
.b29-taste { left: 0; top: 50%; width: 46%; }
.b29-stats { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 0; margin: 12px 0 14px; }
.b29-stats div { padding: 0 12px; border-left: 1px solid rgba(233,226,211,.45); }
.b29-stats div:first-child { padding-left: 0; border-left: 0; }
.b29-stats span { display: block; font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase; opacity: .8; }
.b29-stats i { display: block; margin-top: 3px; font-family: "Newsreader", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.1; }
.b29-slider { display: grid; grid-template-columns: 42px 1fr 42px; align-items: center; gap: 8px; margin-top: 8px; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; }
.b29-slider span:last-child { text-align: right; }
.b29-slider i { position: relative; height: 1px; background: rgba(233,226,211,.7); }
.b29-slider b { position: absolute; top: 50%; left: calc(var(--v) * 100%); width: 9px; height: 12px; margin: -6px 0 0 -4.5px; border-radius: 12px; background: var(--b-orange); border: 1px solid #fff8f0; box-shadow: 0 0 10px rgba(239,130,50,.7); animation: knob 4s ease-in-out infinite alternate; }
/* location card */
.b29-place { right: 0; top: 37%; width: 31%; }
.b29-name { display: block; margin-bottom: 10px; font-family: "Newsreader", Georgia, serif; font-weight: 700; font-size: 17px; line-height: 1.1; }
.b29-label { display: block; margin-top: 8px; font-size: 9px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--b-orange); }
.b29-place p { margin-top: 2px; font-size: 11px; line-height: 1.45; letter-spacing: .02em; color: #fff; }
/* award card */
.b29-award { z-index: 5; left: 26%; bottom: 10%; display: flex; align-items: center; gap: 12px; padding: 12px 18px 12px 14px; }
.b29-icon { width: 20px; height: 26px; flex: none; color: var(--b-orange); }
.b29-award .b29-title { font-size: 19px; }
.b29-award .b29-title em { display: inline; }
/* project card pill in the same language */
.pc-media.pc-scene .pcs-pill.b29 { display: flex; flex-direction: column; gap: 2px; padding: 8px 14px; border-radius: 8px; color: var(--b-cream); background: var(--b-bg); border: 1px solid rgba(224,192,178,.55); box-shadow: 0 14px 30px -14px rgba(0,0,0,.9); }
.pcs-pill.b29 .b29-eyebrow { font-size: 8.5px; letter-spacing: .28em; }
.pcs-pill.b29 em { font-size: 15px; line-height: 1; }
@media (max-width: 767px) {
  .b29-taste { width: 62%; top: 54%; padding: 12px 14px; }
  .b29-title { font-size: 18px; }
  .b29-place { width: 42%; top: 30%; padding: 12px 14px; }
  .b29-award { left: 14%; bottom: 6%; padding: 10px 14px 10px 12px; }
  .b29-award .b29-title { font-size: 15px; }
}
/* spacing so the three brand cards don't overlap */
.b29-taste { top: 43%; }
.b29-award { left: 33%; bottom: 2%; }
@media (max-width: 767px) { .b29-taste { top: 48%; } .b29-award { left: 18%; bottom: 0; } }
/* keep the Mad Bison Stout can visible between the cards */
.b29-place { top: 21%; }
.b29-award { left: 19%; bottom: 3%; }
@media (max-width: 767px) { .b29-place { top: 18%; } .b29-award { left: 8%; bottom: 0; } }

/* Compact 29 Brews hero cards */
.bx-card.b29 { padding: 10px 12px; border-radius: 7px; }
.b29-title { margin-top: 0; font-size: 15px; }
.b29-taste { left: 1%; top: 47%; width: 34%; }
.b29-stats { margin: 7px 0 8px; }
.b29-stats div { padding: 0 8px; }
.b29-stats span { font-size: 7.5px; }
.b29-stats i { margin-top: 1px; font-size: 12.5px; }
.b29-slider { grid-template-columns: 30px 1fr 30px; gap: 6px; margin-top: 5px; font-size: 7.5px; }
.b29-slider b { width: 7px; height: 10px; margin: -5px 0 0 -3.5px; }
.b29-place { right: 1%; top: 33%; width: auto; display: flex; align-items: center; gap: 8px; padding: 8px 12px 8px 10px; }
.b29-dot { width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--b-orange); box-shadow: 0 0 0 0 rgba(239,130,50,.6); animation: pulse 2s infinite; }
.b29-name { margin: 0; font-size: 13px; }
.b29-meta { display: block; margin-top: 1px; font-size: 9.5px; letter-spacing: .04em; color: rgba(233,226,211,.8); white-space: nowrap; }
.b29-award { left: 24%; bottom: 5%; gap: 8px; padding: 7px 12px 7px 9px; border-radius: 99px; }
.b29-award .b29-title { font-size: 13px; white-space: nowrap; }
.b29-icon { width: 13px; height: 17px; }
@media (max-width: 767px) {
  .b29-taste { width: 46%; top: 50%; padding: 8px 10px; }
  .b29-title { font-size: 13px; }
  .b29-place { top: 28%; padding: 6px 10px 6px 8px; }
  .b29-name { font-size: 11.5px; } .b29-meta { font-size: 8.5px; }
  .b29-award { left: 12%; bottom: 2%; padding: 6px 10px 6px 8px; }
  .b29-award .b29-title { font-size: 11px; }
}

/* ==========================================================================
   Project scenes (cards + case-study heroes)
   ========================================================================== */
.scene { position: relative; overflow: hidden; aspect-ratio: 16 / 10.5; background: var(--sbg); container-type: inline-size; isolation: isolate; }
.pc-scn .scene { position: absolute; inset: 0; aspect-ratio: auto; border-radius: inherit; }
.pc-media.pc-scn::after { display: none; }
.sc-glow { position: absolute; inset: 15% 10% 10% 25%; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--acc) 45%, transparent), transparent 70%); filter: blur(30px); opacity: .55; z-index: -1; }
.sc-l { position: absolute; transform: rotate(var(--rot, 0deg)); transition: transform .7s var(--ease), translate .5s var(--ease); }
.scene img { display: block; }
.pc .pc-media.pc-scn img { width: 100%; height: auto; transform: none; object-fit: initial; }
/* browser */
.sc-browser { border-radius: 1.3cqw; overflow: hidden; border: 1px solid color-mix(in srgb, var(--acc) 35%, transparent); box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.9); background: #0c0c0e; }
.sc-bar { display: flex; align-items: center; gap: .6cqw; padding: 1cqw 1.2cqw; background: #141418; border-bottom: 1px solid rgba(255,255,255,.06); }
.sc-bar i { width: .9cqw; height: .9cqw; min-width: 5px; min-height: 5px; border-radius: 50%; background: #3a3644; }
.sc-bar i:nth-child(1) { background: #ff5f57; } .sc-bar i:nth-child(2) { background: #febc2e; } .sc-bar i:nth-child(3) { background: #28c840; }
.sc-bar span { margin-left: 1cqw; font-family: var(--mono); font-size: clamp(7px, 1.25cqw, 12px); color: var(--muted); }
.sc-shot img { width: 100%; height: auto; }
/* phone */
.sc-phone { aspect-ratio: 390 / 844; padding: .55cqw; border-radius: 3cqw; background: #0b0b0d; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.95); }
.sc-screen { width: 100%; height: 100%; overflow: hidden; border-radius: 2.5cqw; }
.pc .pc-media.pc-scn .sc-screen img, .sc-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
/* floating cut-outs and tiles */
.sc-float { height: auto; filter: drop-shadow(0 3cqw 4cqw rgba(0,0,0,.6)); }
.sc-tile { overflow: hidden; border-radius: 1.4cqw; border: 1px solid rgba(255,255,255,.12); box-shadow: 0 3cqw 6cqw -2cqw rgba(0,0,0,.9); background: #111; }
.pc .pc-media.pc-scn .sc-tile img, .sc-tile img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.sc-tag { position: absolute; top: 1cqw; left: 1cqw; padding: .4cqw 1cqw; border-radius: 99px; font-family: var(--mono); font-size: clamp(7px, 1.2cqw, 12px); text-transform: uppercase; letter-spacing: .06em; color: #111; background: var(--acc); }
/* info cards */
.sc-card { z-index: 3; padding: 1.1cqw 1.5cqw; border-radius: 1.2cqw; background: rgba(8,9,12,.84); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid color-mix(in srgb, var(--acc) 40%, transparent); box-shadow: 0 2cqw 4cqw -1.5cqw rgba(0,0,0,.95); color: var(--text); white-space: nowrap; }
.sc-stat strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(13px, 3.6cqw, 34px); line-height: 1; color: var(--acc); }
.sc-stat span { display: block; margin-top: .4cqw; font-size: clamp(7px, 1.25cqw, 12px); color: var(--muted); }
.sc-chip { display: flex; align-items: center; gap: .8cqw; border-radius: 99px; font-size: clamp(8px, 1.45cqw, 14px); font-weight: 500; }
.sc-dot { width: .9cqw; height: .9cqw; min-width: 6px; min-height: 6px; border-radius: 50%; background: var(--acc); box-shadow: 0 0 1cqw var(--acc); }
.sc-tags b { display: block; margin-bottom: .6cqw; font-family: var(--mono); font-size: clamp(7px, 1.1cqw, 11px); font-weight: 400; letter-spacing: .08em; text-transform: uppercase; color: var(--acc); }
.sc-tags div { display: flex; gap: .6cqw; }
.sc-tags span { padding: .35cqw .9cqw; border-radius: 99px; font-size: clamp(7px, 1.25cqw, 12px); background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.sc-bars b { display: block; font-size: clamp(7px, 1.2cqw, 12px); font-weight: 500; color: var(--muted); }
.sc-bars-g { display: flex; align-items: flex-end; gap: .7cqw; height: 7cqw; margin-top: 1cqw; }
.sc-bars-g i { flex: 1; height: calc(var(--h) * 100%); border-radius: .4cqw .4cqw 0 0; background: linear-gradient(var(--acc), color-mix(in srgb, var(--acc) 30%, transparent)); transform-origin: bottom; animation: grow 1.4s var(--ease) both; }
.sc-bars-g i:nth-child(2) { animation-delay: .1s; } .sc-bars-g i:nth-child(3) { animation-delay: .2s; } .sc-bars-g i:nth-child(4) { animation-delay: .3s; } .sc-bars-g i:nth-child(5) { animation-delay: .4s; } .sc-bars-g i:nth-child(6) { animation-delay: .5s; }
@keyframes grow { from { transform: scaleY(0); } }
.sc-qr { display: flex; align-items: center; gap: 1.2cqw; }
.sc-qr-svg { width: 6.5cqw; height: 6.5cqw; min-width: 30px; min-height: 30px; padding: .5cqw; border-radius: .6cqw; background: #fff; fill: #111; }
.sc-qr b { display: block; font-size: clamp(8px, 1.45cqw, 14px); font-weight: 500; }
.sc-qr span { display: block; font-size: clamp(7px, 1.15cqw, 11px); color: var(--muted); }
/* card hover: frames lift, info cards drift */
.pc:hover .sc-l { translate: 0 -2.5%; }
.pc:hover .sc-card { translate: 0 -5%; }
/* hero version */
.sx-hero .bx-copy h1 span { color: var(--acc); }
.sx-visual { position: relative; }
.sx-visual .scene { border-radius: 28px; border: 1px solid color-mix(in srgb, var(--acc) 30%, transparent); box-shadow: 0 40px 100px -40px color-mix(in srgb, var(--acc) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { .sc-bars-g i { animation: none; } .pc:hover .sc-l { translate: none; } }

/* ==========================================================================
   Editorial case-study cover + research sections from the discovery docs
   ========================================================================== */
.cv { width: 1180px; max-width: 100%; margin: 0 auto; padding: 150px 16px 0; }
.cv-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.cv-top .tags { margin: 0; }
.cv-title { margin-top: 36px; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 7.4vw, 104px); line-height: .98; letter-spacing: -0.035em; color: #fff; }
.cv-title span { display: block; margin-top: 10px; font-size: .5em; line-height: 1.12; letter-spacing: -0.02em; color: var(--muted); max-width: 18ch; }
.cv-row { display: grid; grid-template-columns: 1.15fr 1fr; gap: 56px; margin-top: 48px; padding-top: 28px; border-top: 1px solid var(--line); }
.cv-row p { font-size: 19px; line-height: 1.55; color: var(--muted); max-width: 560px; }
.cv-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 28px; }
.cv-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.cv-facts dd { margin-top: 6px; font-size: 15px; color: var(--text); }
.cv-shot { margin: 56px 0 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); background: #0b0a0e; }
.cv-shot > img { display: block; width: 100%; max-height: 720px; object-fit: cover; object-position: top; }
.cv-shot .email-hero { padding: 40px; }

.docs { margin-top: 20px; }
.dsec h2 { max-width: 820px; }
.dsec .rlead { margin-bottom: 36px; font-size: 19px; color: var(--muted); }
.rnum { font-family: var(--mono); font-size: 12px; color: var(--p-soft); }
.rmeasure { display: block; margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--line-strong); font-size: 14px; color: var(--text); }
.rmeasure b { display: block; margin-bottom: 4px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.rgrid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.rgrid4 .rcard { padding: 22px; }
.rgrid4 .rcard h3 { font-size: 19px; }
.rgrid4 .rcard p { font-size: 15px; }

.anti { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.anti li { display: flex; gap: 12px; align-items: flex-start; padding: 16px 18px; border-radius: 16px; border: 1px solid var(--line); font-size: 15.5px; color: var(--muted); }
.anti i { flex: none; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; font-style: normal; font-size: 14px; color: #f87171; background: rgba(248,113,113,.12); }

.personas .tabs { margin-bottom: 16px; }
.persona { display: grid; grid-template-columns: 1fr 1.25fr; gap: 26px 40px; padding: 32px; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); }
.ps-id { display: flex; gap: 16px; align-items: flex-start; }
.ps-av { flex: none; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; font-family: var(--display); font-size: 19px; color: #fff; background: var(--grad); }
.ps-id h3 { font-family: var(--display); font-weight: 500; font-size: 24px; }
.ps-id span { display: block; margin-top: 2px; font-family: var(--mono); font-size: 12px; color: var(--p-soft); }
.ps-id p { margin-top: 8px; font-size: 15px; color: var(--muted); }
.persona blockquote { align-self: center; font-family: var(--display); font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: #fff; }
.ps-cols { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ps-cols > div { padding: 20px 22px; border-radius: 18px; background: rgba(255,255,255,.025); border: 1px solid var(--line); }
.ps-cols b { font-family: var(--mono); font-weight: 400; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.ps-cols ul { margin-top: 10px; display: grid; gap: 8px; }
.ps-cols li { position: relative; padding-left: 16px; font-size: 15.5px; color: var(--text); }
.ps-cols li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--p-soft); }
.ps-cols > div:last-child li::before { background: #f87171; }
.ps-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 14px; color: var(--muted); }
.ps-cta { color: #fff; }

.cmp table { min-width: 860px; }
.cmp th, .cmp td { text-align: left; vertical-align: top; padding: 16px 14px; line-height: 1.45; color: var(--muted); white-space: normal; }
.cmp tbody th { color: #fff; white-space: nowrap; }
.cmp .is-gap { color: #fff; background: rgba(168,85,247,.08); }
.cmp thead th { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.tbl-narrow { min-width: 680px !important; }

.lessons { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.lessons li { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.lessons b { font-family: var(--display); font-weight: 500; font-size: 20px; color: #fff; }
.lessons p { margin-top: 8px; font-size: 15px; color: var(--muted); }

.omatrix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.om-col { padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.om-col h3 { margin: 8px 0 16px; font-family: var(--display); font-weight: 500; font-size: 22px; }
.om-col ul { display: grid; gap: 10px; }
.om-col li { font-size: 15px; color: var(--muted); padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.om-col li:last-child { border: 0; padding: 0; }
.om-0 { background: linear-gradient(170deg, rgba(124,58,237,.28), var(--surface) 60%); border-color: rgba(196,167,255,.35); }
.om-0 li { color: #fff; }
.om-2 { opacity: .7; }

.hmw-who { display: block; margin-top: 10px; font-style: normal; font-size: 13px; color: var(--dim); }

.nums { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.nums div { padding: 28px 8px; }
.nums div + div { border-left: 1px solid var(--line); padding-left: 28px; }
.nums strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(36px, 5vw, 60px); line-height: 1; color: #fff; }
.nums span { display: block; margin-top: 10px; color: var(--muted); font-size: 15px; }

.swot { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.sw { position: relative; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.sw-l { position: absolute; right: 18px; top: 4px; font-family: var(--display); font-size: 96px; line-height: 1; color: rgba(255,255,255,.04); }
.sw h3 { font-family: var(--display); font-weight: 500; font-size: 22px; margin-bottom: 14px; }
.sw ul { display: grid; gap: 9px; }
.sw li { position: relative; padding-left: 16px; font-size: 15.5px; color: var(--muted); }
.sw li::before { content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.sw-s { --c: #4ade80; } .sw-w { --c: #fbbf24; } .sw-o { --c: #a78bfa; } .sw-t { --c: #f87171; }
.sw h3 { color: var(--c); }

.map-from b { color: #fff; font-weight: 500; }
.testers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.tester { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.tester b { display: block; margin: 10px 0 8px; font-size: 14px; color: #fff; font-weight: 500; }
.tester p { font-size: 14.5px; color: var(--muted); }

.scores { display: grid; gap: 14px; padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.score { display: grid; grid-template-columns: 220px 1fr 64px; gap: 18px; align-items: center; }
.score span { font-size: 15.5px; color: var(--text); }
.score-bar { position: relative; height: 10px; border-radius: 10px; background: rgba(255,255,255,.06); }
.score-bar i { position: absolute; top: 0; bottom: 0; left: calc((var(--lo) - 1) / 4 * 100%); width: calc((var(--hi) - var(--lo)) / 4 * 100% + 10px); border-radius: 10px; background: var(--grad); }
.score b { font-family: var(--display); font-weight: 500; font-size: 20px; color: #fff; text-align: right; }
.score small { font-size: 12px; color: var(--dim); }

.fgroups { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fgroup { padding: 22px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); }
.fgroup h3 { font-family: var(--display); font-weight: 500; font-size: 19px; margin-bottom: 12px; }
.fgroup ul { display: grid; gap: 8px; }
.fgroup li { font-size: 14.5px; color: var(--muted); padding-left: 14px; position: relative; }
.fgroup li::before { content: ""; position: absolute; left: 0; top: .55em; width: 5px; height: 5px; border-radius: 50%; background: var(--p-soft); }

@media (max-width: 1023px) {
  .rgrid4, .testers, .fgroups { grid-template-columns: repeat(2, 1fr); }
  .anti, .omatrix { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 767px) {
  .cv { padding-top: 120px; }
  .cv-row { grid-template-columns: 1fr; gap: 28px; }
  .cv-shot { margin-top: 36px; border-radius: 14px; }
  .cv-shot .email-hero { padding: 16px; }
  .rgrid4, .testers, .fgroups, .anti, .omatrix, .swot, .ps-cols { grid-template-columns: 1fr; }
  .persona { grid-template-columns: 1fr; padding: 22px; }
  .nums { grid-template-columns: 1fr; }
  .nums div + div { border-left: 0; border-top: 1px solid var(--line); padding-left: 8px; }
  .score { grid-template-columns: 1fr 52px; }
  .score-bar { grid-column: 1 / -1; grid-row: 2; }
}

/* ---------- Case-study visuals, motion and diagrams ---------- */
.dimg { margin: 0; }
.dimg button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; background: #0b0a0e; cursor: zoom-in; }
.dimg img { display: block; width: 100%; height: auto; transition: transform .8s var(--ease); }
.dimg button:hover img { transform: scale(1.015); }
.dimg figcaption, .dgal figcaption { margin-top: 12px; font-size: 14.5px; color: var(--muted); }
.dsec-image .dimg img { max-height: 1100px; object-fit: contain; }

.dgal { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dgal figure { margin: 0; }
.dgal button { display: block; width: 100%; padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; background: #fff; }
.dgal img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; transition: transform .7s var(--ease); }
.dgal figure:nth-child(odd) { transform: translateY(18px); }
.dgal button:hover img { transform: scale(1.04); }

/* Phone that plays through a flow */
.pflow { display: grid; grid-template-columns: minmax(240px, 320px) 1fr; gap: 56px; align-items: center; padding: 40px; border-radius: 28px; border: 1px solid var(--line); background: radial-gradient(70% 90% at 20% 50%, rgba(124,58,237,.18), transparent 70%), var(--surface); }
.pf-phone { position: relative; aspect-ratio: 9 / 18; border-radius: 40px; padding: 10px; background: #050407; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -30px rgba(0,0,0,.8); overflow: hidden; }
.pf-notch { position: absolute; z-index: 2; left: 50%; top: 14px; width: 30%; height: 18px; border-radius: 12px; transform: translateX(-50%); background: #050407; }
.pf-screen { position: absolute; inset: 10px; border-radius: 30px; overflow: hidden; opacity: 0; transform: translateX(14%) scale(.96); transition: opacity .55s var(--ease), transform .7s var(--ease); background: #fff; }
.pf-screen.on { opacity: 1; transform: none; }
.pf-screen.was { transform: translateX(-14%) scale(.96); }
.pf-screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.pf-steps { display: grid; gap: 10px; }
.pf-step button { position: relative; display: grid; grid-template-columns: 40px 1fr; gap: 2px 14px; width: 100%; padding: 18px 20px; text-align: left; border-radius: 18px; border: 1px solid transparent; background: none; color: inherit; cursor: pointer; overflow: hidden; transition: background .3s, border-color .3s; }
.pf-step span { grid-row: span 2; font-family: var(--mono); font-size: 13px; color: var(--dim); padding-top: 3px; }
.pf-step b { font-family: var(--display); font-weight: 500; font-size: 20px; color: var(--muted); transition: color .3s; }
.pf-step p { font-size: 15px; color: var(--dim); max-height: 0; opacity: 0; overflow: hidden; transition: max-height .5s var(--ease), opacity .4s; }
.pf-step.on button { background: rgba(255,255,255,.035); border-color: var(--line); }
.pf-step.on span { color: var(--p-soft); }
.pf-step.on b { color: #fff; }
.pf-step.on p { max-height: 120px; opacity: 1; margin-top: 4px; color: var(--muted); }
.pf-bar { position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--grad); }
.pf-step.on .pf-bar { animation: pf-fill var(--pf-dur, 4.2s) linear forwards; }
.pflow.paused .pf-bar { animation-play-state: paused; }
@keyframes pf-fill { to { width: 100%; } }

/* Hub / ecosystem diagram */
.hub { position: relative; width: min(760px, 100%); aspect-ratio: 1; margin: 0 auto; }
.hub svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.hub line { stroke: rgba(196,167,255,.45); stroke-width: .25; stroke-dasharray: 1; stroke-dashoffset: 1; }
.hub .hub-ring { stroke: rgba(255,255,255,.1); stroke-dasharray: 1; }
.hub circle { fill: #c4a7ff; opacity: 0; filter: drop-shadow(0 0 1px #a855f7); }
.hub.in line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s var(--ease) calc(.3s + var(--i) * .12s); }
.hub.in .hub-ring { transition-delay: calc(1.2s + var(--i) * .1s); }
.hub.in circle { opacity: 1; transition: opacity .4s 1.6s; }
.hub-core { position: absolute; left: 50%; top: 50%; display: grid; place-items: center; align-content: center; width: 26%; aspect-ratio: 1; border-radius: 50%; text-align: center; transform: translate(-50%, -50%) scale(.6); opacity: 0; background: var(--grad); box-shadow: 0 0 60px -10px var(--p-glow); transition: opacity .7s var(--ease), transform .7s var(--ease); will-change: transform; }
.hub-core::after { content: ""; position: absolute; inset: -14px; border-radius: 50%; border: 1px solid rgba(196,167,255,.35); animation: hub-pulse 3s ease-out infinite; }
.hub-core b { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 3vw, 30px); color: #fff; }
.hub-core span { padding: 0 12%; font-size: clamp(10px, 1.2vw, 13px); color: rgba(255,255,255,.85); line-height: 1.3; }
.hub.in .hub-core { opacity: 1; transform: translate(-50%, -50%); }
.hub-node { position: absolute; width: 26%; padding: 14px 14px; border-radius: 18px; text-align: center; background: #121016; border: 1px solid var(--line-strong); transform: translate(-50%, -50%) scale(.85); opacity: 0; transition: opacity .6s var(--ease) calc(.6s + var(--i) * .12s), transform .6s var(--ease) calc(.6s + var(--i) * .12s), border-color .25s; }
.hub-node b { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.8vw, 18px); color: #fff; }
.hub-node span { display: block; margin-top: 4px; font-size: clamp(11px, 1.2vw, 13px); color: var(--muted); line-height: 1.35; }
.hub.in .hub-node { opacity: 1; transform: translate(-50%, -50%); }
.hub-node:hover { border-color: rgba(196,167,255,.6); }
@keyframes hub-pulse { from { transform: scale(.9); opacity: 1; } to { transform: scale(1.35); opacity: 0; } }

/* Persona routes */
.routes { padding: 28px; border-radius: 26px; border: 1px solid var(--line); background: var(--surface); }
.rt-head, .routes li { display: grid; grid-template-columns: 1.2fr 60px 1fr 60px 1fr; align-items: center; }
.rt-head { padding: 0 6px 14px; font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.rt-head span:nth-child(2) { grid-column: 3; } .rt-head span:nth-child(3) { grid-column: 5; }
.routes ol { display: grid; gap: 10px; }
.routes li { padding: 14px 6px; border-top: 1px solid var(--line); opacity: 0; transform: translateX(-12px); }
.rt-who b { display: block; font-family: var(--display); font-weight: 500; font-size: 20px; color: #fff; }
.rt-who span { font-size: 13.5px; color: var(--muted); }
.rt-page, .rt-act { justify-self: start; padding: 10px 16px; border-radius: 99px; font-size: 14.5px; border: 1px solid var(--line-strong); }
.rt-act { color: #fff; background: rgba(168,85,247,.18); border-color: rgba(196,167,255,.45); }
.rt-line { position: relative; height: 2px; margin: 0 10px; background: linear-gradient(90deg, transparent, rgba(196,167,255,.5)); transform: scaleX(0); transform-origin: left; }
.rt-line::after { content: ""; position: absolute; right: -2px; top: -3px; border: 4px solid transparent; border-left-color: rgba(196,167,255,.8); border-right: 0; }
.routes.in li { opacity: 1; transform: none; transition: opacity .6s var(--ease) calc(var(--i) * .12s), transform .6s var(--ease) calc(var(--i) * .12s); }
.routes.in .rt-line { transform: none; transition: transform .5s var(--ease) calc(.3s + var(--i) * .12s); }

/* Process timeline */
.tline { position: relative; display: grid; grid-template-columns: repeat(var(--n, 5), 1fr); gap: 16px; padding-top: 34px; }
.tline::before { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: var(--line-strong); }
.tline::after { content: ""; position: absolute; left: 10px; right: 10px; top: 9px; height: 2px; background: var(--grad); transform: scaleX(0); transform-origin: left; box-shadow: 0 0 10px var(--p-glow); }
.tline.in::after { transform: none; transition: transform 1.6s var(--ease) .2s; }
.tl-dot { position: absolute; top: -34px; left: 0; width: 20px; height: 20px; border-radius: 50%; background: #151318; border: 2px solid var(--line-strong); transition: background-color .4s var(--ease) calc(.3s + var(--i) * .3s), border-color .4s var(--ease) calc(.3s + var(--i) * .3s), box-shadow .4s var(--ease) calc(.3s + var(--i) * .3s); }
.tline li { position: relative; opacity: .35; transition: opacity .5s calc(.3s + var(--i) * .3s); }
.tline.in li { opacity: 1; }
.tline.in .tl-dot { background: var(--p); border-color: #c4a7ff; box-shadow: 0 0 14px var(--p-glow); }
.tline b { display: block; font-family: var(--display); font-weight: 500; font-size: 22px; color: #fff; }
.tline p { margin-top: 6px; font-size: 15px; color: var(--muted); }

/* Palette */
.palette { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; }
.pal-type { padding: 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.pal-type b { display: block; margin: 12px 0 8px; font-size: 110px; line-height: 1; font-weight: 500; color: #fff; }
.pal-type p { font-size: 14px; color: var(--muted); word-spacing: 4px; }
.pal-sw { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.sw-chip { display: flex; flex-direction: column; justify-content: flex-end; min-height: 220px; padding: 16px; border-radius: 22px; background: var(--c); border: 1px solid var(--line); transform-origin: bottom; transform: scaleY(.2); opacity: 0; }
.palette.in .sw-chip { transform: none; opacity: 1; transition: transform .8s var(--ease) calc(var(--i) * .1s), opacity .4s calc(var(--i) * .1s); }
.sw-chip code { font-family: var(--mono); font-size: 12.5px; color: rgba(255,255,255,.92); mix-blend-mode: difference; }
.sw-chip em { font-style: normal; font-size: 13px; color: rgba(255,255,255,.75); mix-blend-mode: difference; }
.sw-chip span { display: none; }

/* Interview cards */
.ivs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.iv { display: flex; flex-direction: column; gap: 18px; padding: 26px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.iv-q { font-family: var(--display); font-size: 21px; line-height: 1.3; color: #fff; }
.iv p { margin-top: auto; padding-top: 16px; border-top: 1px dashed var(--line-strong); font-size: 15px; color: var(--muted); }
.iv p b { display: block; margin-bottom: 6px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--p-soft); }

@media (prefers-reduced-motion: reduce) {
  .hub line, .tline::after, .rt-line { transition: none !important; stroke-dashoffset: 0; transform: none; }
  .hub-core, .hub-node, .routes li, .sw-chip, .tline li { opacity: 1 !important; transform: none !important; }
  .hub-core { transform: translate(-50%, -50%) !important; } .hub-node { transform: translate(-50%, -50%) !important; }
}
@media (max-width: 1023px) {
  .dgal { grid-template-columns: repeat(2, 1fr); }
  .pflow { grid-template-columns: 240px 1fr; gap: 32px; padding: 28px; }
  .tline { grid-template-columns: repeat(3, 1fr); row-gap: 50px; }
  .tline::before, .tline::after { display: none; }
  .ivs { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
  .dgal figure:nth-child(odd) { transform: none; }
  .pflow { grid-template-columns: 1fr; justify-items: center; padding: 20px; }
  .pf-phone { width: 230px; }
  .pf-steps { width: 100%; }
  .hub { aspect-ratio: auto; display: grid; gap: 10px; }
  .hub svg { display: none; }
  .hub-core, .hub-node { position: static; width: auto; transform: none !important; }
  .hub-core { aspect-ratio: auto; border-radius: 20px; padding: 22px; }
  .hub-core::after { display: none; }
  .routes { padding: 18px; }
  .rt-head { display: none; }
  .routes li { grid-template-columns: 1fr; gap: 10px; }
  .rt-line { width: 2px; height: 16px; margin: 0 0 0 18px; transform-origin: top; background: rgba(196,167,255,.5); }
  .rt-line::after { display: none; }
  .tline { grid-template-columns: 1fr; padding-top: 0; padding-left: 34px; row-gap: 24px; }
  .tl-dot { top: 4px; left: -34px; }
  .palette { grid-template-columns: 1fr; }
  .pal-sw { grid-template-columns: repeat(2, 1fr); }
  .sw-chip { min-height: 120px; }
}

/* Aether: many-page overview + auto-scrolling phones */
.mphones { display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; align-items: start; }
.mphone { margin: 0; }
.mphone:nth-child(even) { margin-top: 48px; }
.mp-screen { position: relative; aspect-ratio: 9 / 19; border-radius: 30px; padding: 7px; overflow: hidden; background: #050407; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); container-type: size; }
.mp-screen::before { content: ""; position: absolute; z-index: 2; left: 50%; top: 12px; width: 32%; height: 14px; border-radius: 10px; transform: translateX(-50%); background: #050407; }
.mp-screen img { display: block; width: 100%; border-radius: 24px; animation: mp-scroll var(--sd, 20s) ease-in-out infinite alternate; }
.mphone:hover img { animation-play-state: paused; }
.mphone figcaption { margin-top: 12px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.mp-screen img { will-change: transform; backface-visibility: hidden; }
@keyframes mp-scroll { 0%, 8% { transform: translateY(0); } 92%, 100% { transform: translateY(calc(-100% + 100cqh)); } }
@media (max-width: 1023px) { .mphones { grid-template-columns: repeat(3, 1fr); } .mphone:nth-child(n+4) { display: none; } }
@media (max-width: 767px) { .mphones { grid-template-columns: repeat(2, 1fr); gap: 12px; } .mphone:nth-child(3) { display: none; } .mphone:nth-child(even) { margin-top: 24px; } }
.dsec-pages .pscroll { background: #0a0f0c; }
/* frame fits short screens instead of stretching them to its full height */
.dsec-pages .pscroll { height: auto; max-height: 640px; }
@media (max-width: 767px) { .dsec-pages .pscroll { max-height: 520px; } }

/* Persona: avatar fix, illustration, smooth tab change */
.ps-id .ps-av { display: block; flex: none; width: 112px; height: 112px; margin: 0; border-radius: 28px; overflow: hidden; background: none; font: inherit; color: inherit; }
.ps-av svg { display: block; width: 100%; height: 100%; }
.persona { animation: ps-in .5s var(--ease) both; }
@keyframes ps-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.ps-av .ps-float { animation: ps-float 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.ps-av .ps-float:nth-of-type(2) { animation-delay: -3s; }
@keyframes ps-float { 50% { transform: translateY(-3px); } }
@media (prefers-reduced-motion: reduce) { .persona, .ps-av .ps-float { animation: none; } }
@media (max-width: 767px) { .ps-id .ps-av { width: 84px; height: 84px; border-radius: 22px; } }

/* Wireframe → final pairs */
.evolve { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ev { margin: 0; padding: 22px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.ev-pair { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; }
.ev-ph { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid var(--line-strong); background: #fff; }
.ev-ph img { display: block; width: 100%; aspect-ratio: 9 / 19.4; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.ev-ph span { position: absolute; z-index: 1; left: 8px; top: 8px; padding: 3px 8px; border-radius: 99px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.6); }
.ev-hi span { background: var(--p); }
.ev-lo { filter: grayscale(1); opacity: .85; }
.ev-arrow { font-style: normal; color: var(--p-soft); font-size: 18px; transform: translateX(-6px); opacity: 0; transition: transform .6s var(--ease) .3s, opacity .6s .3s; }
.ev.in .ev-arrow { transform: none; opacity: 1; }
.ev-hi { transform: translateX(-10px) scale(.96); opacity: 0; transition: transform .7s var(--ease) .45s, opacity .7s .45s; }
.ev.in .ev-hi { transform: none; opacity: 1; }
.ev:hover .ev-hi img { transform: scale(1.03); }
.ev figcaption { margin-top: 16px; font-size: 14.5px; color: var(--muted); }
.ev figcaption b { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 500; font-size: 19px; color: #fff; }

/* Two wide images */
.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo figure { margin: 0; }
.duo button { display: block; width: 100%; padding: 0; border-radius: 18px; overflow: hidden; border: 1px solid var(--line); cursor: zoom-in; }
.duo img { display: block; width: 100%; transition: transform .7s var(--ease); }
.duo button:hover img { transform: scale(1.02); }
.duo figcaption { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* One or two phones: centre them instead of a 5-column row */
.mphones:has(> .mphone:only-child) { grid-template-columns: minmax(200px, 280px); justify-content: center; }
.mphones:has(> .mphone:only-child) .mphone { margin-top: 0; }
.dsec-pages .pages:not(:has(.tabs)) .pane { display: block; }

@media (max-width: 1023px) { .evolve { grid-template-columns: 1fr; max-width: 520px; } }
@media (max-width: 767px) { .duo { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .ev-hi, .ev-arrow { opacity: 1 !important; transform: none !important; } }

/* Phase dividers for phased case studies */
.phase-head { width: 1100px; max-width: 100%; margin: 150px auto 0; padding: 48px 16px 0; border-top: 1px solid var(--line); scroll-margin-top: 170px; }
.phase-head .ph-num { display: inline-block; padding: 6px 12px; border-radius: 99px; font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: #fff; background: var(--grad); box-shadow: 0 0 24px -6px var(--p-glow); }
.phase-head h2 { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 6vw, 76px); line-height: 1; letter-spacing: -0.03em; }
.phase-head p { margin-top: 20px; max-width: 760px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.phase-head + .dsec { margin-top: 72px; }
.docs > .stepper { margin-bottom: 0; }
@media (max-width: 767px) { .phase-head { margin-top: 100px; padding-top: 32px; } }

/* Before / after drag compare (phones) */
.cmps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.cmp-ph { margin: 0; }
.cmp-stage { position: relative; aspect-ratio: 360 / 790; border-radius: 26px; overflow: hidden; background: #000; border: 1px solid var(--line-strong); box-shadow: 0 30px 70px -30px rgba(0,0,0,.9); touch-action: pan-y; user-select: none; }
.cmp-stage img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; pointer-events: none; }
.cmp-after { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos)); transition: clip-path .6s var(--ease); }
.cmp-handle { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 14px rgba(168,85,247,.9); transition: left .6s var(--ease); pointer-events: none; }
.cmp-handle i { position: absolute; top: 50%; left: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; background: var(--grad); box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 20px rgba(0,0,0,.5); }
.cmp-handle i::before, .cmp-handle i::after { content: ""; position: absolute; top: 50%; width: 0; height: 0; margin-top: -5px; border: 5px solid transparent; }
.cmp-handle i::before { left: 5px; border-right-color: #fff; }
.cmp-handle i::after { right: 5px; border-left-color: #fff; }
.cmp-stage.dragging .cmp-after, .cmp-stage.dragging .cmp-handle { transition: none; }
.cmp-stage input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp-tag { position: absolute; z-index: 2; top: 12px; padding: 4px 10px; border-radius: 99px; font-family: var(--mono); font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; pointer-events: none; }
.cmp-tag-b { left: 12px; color: #1d1305; background: #fbbf24; }
.cmp-tag-a { right: 12px; color: #fff; background: var(--p); }
.cmp-ph figcaption { margin-top: 14px; font-size: 14.5px; color: var(--muted); }
.cmp-ph figcaption b { display: block; margin-bottom: 4px; font-family: var(--display); font-weight: 500; font-size: 19px; color: #fff; }
.cmp-stage:has(input:focus-visible) { outline: 2px solid var(--p-soft); outline-offset: 3px; }
@media (max-width: 1023px) { .cmps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .cmps { grid-template-columns: 1fr; max-width: 300px; margin: 0 auto; } }

/* Card badge stays inside its card */
.pc { position: relative; }

/* Projects page hero: title + stats, then a drifting filmstrip of real screens */
.wk-hero { padding-top: 160px; }
.wk-head { width: var(--max); max-width: 100%; margin: 0 auto; padding: 0 16px; display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: end; }
.wk-head h1 { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(56px, 9vw, 128px); line-height: .95; letter-spacing: -0.035em; }
.wk-head p { margin-top: 24px; max-width: 520px; font-size: 19px; line-height: 1.55; color: var(--muted); }
.wk-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--line); }
.wk-stats div { padding: 18px 0; border-bottom: 1px solid var(--line); }
.wk-stats div:nth-child(3) { grid-column: 1 / -1; }
.wk-stats dt { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.wk-stats dd { margin: 6px 0 0; font-family: var(--display); font-weight: 500; font-size: 44px; line-height: 1; color: #fff; }
.wk-stats dd.wk-disc { font-size: 22px; }
@media (max-width: 900px) { .wk-head { grid-template-columns: 1fr; } .wk-hero { padding-top: 120px; } .wk-stats dd { font-size: 34px; } }

/* KPI results with count-up and bars */
.kpis { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.kpi { position: relative; padding: 26px; border-radius: 22px; border: 1px solid var(--line); background: linear-gradient(160deg, rgba(52,211,153,.10), var(--surface) 55%); }
.kpi strong { display: block; font-family: var(--display); font-weight: 500; font-size: clamp(44px, 5vw, 64px); line-height: 1; color: #fff; font-variant-numeric: tabular-nums; }
.kpi span { display: block; margin-top: 10px; font-size: 15px; color: var(--muted); }
.kpi-bar { display: block; margin-top: 18px; height: 6px; border-radius: 6px; background: rgba(255,255,255,.06); overflow: hidden; }
.kpi-bar b { display: block; height: 100%; width: calc(var(--v) * 100%); border-radius: inherit; background: linear-gradient(90deg, #34d399, #a78bfa); transform: scaleX(0); transform-origin: left; }
.kpis.in .kpi-bar b { transform: none; transition: transform 1.4s var(--ease) calc(.2s + var(--i) * .12s); }
@media (max-width: 900px) { .kpis { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .kpis { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) { .kpi-bar b { transform: none; } }

/* ==========================================================================
   Project card previews: real screens, calm composition, motion on hover
   ========================================================================== */
.pc-media.pc-pv { background: #0b0a0e; }
.pc .pc-media.pc-pv img { width: 100%; height: auto; transform: none; object-fit: initial; transition: none; }
.pv { position: absolute; inset: 0; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 110%, color-mix(in srgb, var(--pv) 85%, #fff 6%) 0%, var(--pv) 40%, #08070b 100%); }
.pv::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%); }
.pv-page { position: relative; height: 100%; overflow: hidden; background: #fff; container-type: size; }
.pv-page img { display: block; transform: translate3d(0, 0, 0); transition: transform 7s cubic-bezier(.45, 0, .3, 1) !important; will-change: transform; }

/* Browser rising from the bottom edge; the page scrolls on hover */
.pv-browser { position: absolute; left: 9%; right: 9%; top: 11%; bottom: -2%; border-radius: 12px 12px 0 0; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,.12); border-bottom: 0;
  box-shadow: 0 -10px 60px -20px rgba(0,0,0,.6), 0 30px 80px rgba(0,0,0,.5); display: flex; flex-direction: column; transition: transform .7s var(--ease); }
.pv-bar { flex: none; display: flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; background: #1a191d; border-bottom: 1px solid rgba(255,255,255,.06); }
.pv-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3940; }
.pv-bar i:nth-child(1) { background: #ff5f57; } .pv-bar i:nth-child(2) { background: #febc2e; } .pv-bar i:nth-child(3) { background: #28c840; }
.pv-bar span { margin-left: 10px; font-family: var(--mono); font-size: 10px; color: #8d8a94; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pv-browser .pv-page { flex: 1; }
.pc:hover .pv-browser { transform: translateY(-3%); }
.pc:hover .pv-browser .pv-page img { transform: translate3d(0, calc(-100% + 100cqh), 0); }

/* Browser + phone (featured card) */
.pv--browser-phone .pv-browser { left: 7%; right: 22%; }
.pv-phone { position: absolute; right: 6%; bottom: -6%; width: 21%; aspect-ratio: 9 / 18.5; padding: 5px; border-radius: 22px; background: #050407; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px rgba(0,0,0,.6); transition: transform .7s var(--ease); }
.pv-phone .pv-page { border-radius: 17px; }
.pc:hover .pv-phone { transform: translateY(-6%); }
.pc:hover .pv-phone .pv-page img { transform: translate3d(0, calc(-100% + 100cqh), 0); }

/* Three phones, middle raised; they fan out on hover */
.pv-ph { position: absolute; bottom: -18%; width: 27%; aspect-ratio: 9 / 19; padding: 5px; border-radius: 24px; background: #050407; border: 1px solid rgba(255,255,255,.14); box-shadow: 0 30px 60px rgba(0,0,0,.55); transition: transform .8s var(--ease); }
.pv-ph .pv-page { border-radius: 19px; background: #000; }
.pv-ph .pv-page img { width: 100%; }
.pv-ph-0 { left: 9%; transform: translateY(8%); }
.pv-ph-1 { left: 36.5%; bottom: -10%; z-index: 2; }
.pv-ph-2 { right: 9%; transform: translateY(8%); }
.pc:hover .pv-ph-0 { transform: translate(-6%, 2%) rotate(-4deg); }
.pc:hover .pv-ph-1 { transform: translateY(-5%); }
.pc:hover .pv-ph-2 { transform: translate(6%, 2%) rotate(4deg); }
.pc:hover .pv-ph-1 .pv-page img { transform: translate3d(0, calc(-100% + 100cqh), 0); }

/* Email: before behind, after in front */
.pv-mail { position: absolute; bottom: -8%; width: 34%; height: 86%; border-radius: 12px 12px 0 0; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,.55); transition: transform .8s var(--ease), filter .6s; }
.pv-mail span { position: absolute; z-index: 1; top: 10px; left: 10px; padding: 3px 9px; border-radius: 99px; font-family: var(--mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: rgba(0,0,0,.6); }
.pv-mail-old { left: 18%; transform: rotate(-5deg) translateY(6%); filter: saturate(.6) brightness(.8); }
.pv-mail-new { right: 18%; z-index: 2; transform: rotate(3deg); }
.pv-mail-new span { background: var(--p); }
.pv-mail .pv-page { background: #000; }
.pv-mail .pv-page img { width: 100%; }
.pc:hover .pv-mail-old { transform: rotate(-8deg) translate(-8%, 4%); filter: saturate(.4) brightness(.65); }
.pc:hover .pv-mail-new { transform: rotate(0deg) translateY(-4%); }
.pc:hover .pv-mail-new .pv-page img { transform: translate3d(0, calc(-100% + 100cqh), 0); }

@media (prefers-reduced-motion: reduce) { .pv *, .pv-page img { transition: none !important; } }
@media (hover: none) { .pc .pv-page img { transform: none !important; } }

/* Projects page: numbered index with a cursor-following preview */
.wk-index { width: var(--max); max-width: 100%; margin: 64px auto 0; padding: 0 16px; list-style: none; border-top: 1px solid var(--line); }
.wk-item { position: relative; display: grid; grid-template-columns: 56px 1fr auto 28px; gap: 20px; align-items: center; padding: 22px 8px; border-bottom: 1px solid var(--line); color: var(--text); transition: padding .4s var(--ease), background .3s; }
.wk-item::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(168,85,247,.10), transparent 70%); opacity: 0; transition: opacity .3s; pointer-events: none; }
.wk-n { font-family: var(--mono); font-size: 13px; color: var(--dim); }
.wk-name { font-family: var(--display); font-weight: 500; font-size: clamp(22px, 2.6vw, 34px); line-height: 1.15; letter-spacing: -0.01em; color: #fff; }
.wk-name em { display: block; margin-top: 4px; font-style: normal; font-family: var(--body, inherit); font-size: 15px; letter-spacing: 0; color: var(--muted); }
.wk-cats { font-family: var(--mono); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); white-space: nowrap; }
.wk-go { display: grid; place-items: center; width: 28px; height: 28px; color: var(--muted); transition: transform .4s var(--ease), color .3s; }
.wk-go svg { width: 18px; height: 18px; }
.wk-item:hover, .wk-item:focus-visible { padding-left: 20px; }
.wk-item:hover::before, .wk-item:focus-visible::before { opacity: 1; }
.wk-item:hover .wk-n, .wk-item:hover .wk-go { color: var(--p-soft); }
.wk-item:hover .wk-go { transform: translateX(4px) rotate(-45deg); }
.wk-peek { position: fixed; left: 0; top: 0; z-index: 30; width: 280px; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; pointer-events: none; opacity: 0; transform: translate3d(-999px, -999px, 0) scale(.9); background: #0b0a0e; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -20px rgba(0,0,0,.8); transition: opacity .25s, scale .35s var(--ease); will-change: transform; }
.wk-peek img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.wk-peek.on { opacity: 1; }
@media (max-width: 767px) { .wk-item { grid-template-columns: 34px 1fr 22px; } .wk-cats { display: none; } .wk-peek { display: none; } }

/* Homepage: View all projects */
.more-work { display: flex; justify-content: center; margin-top: 40px; }
/* A lone card on the last row sits centred instead of hanging left */
@media (min-width: 768px) {
  .pgrid > .pc-featured ~ .pc:last-child:nth-child(even) { grid-column: 1 / -1; justify-self: center; width: calc(50% - 10px); }
}

/* UX Playground: centred bento of challenge designs + straight experiment grids */
.days { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.day { margin: 0; grid-column: span 4; }
.day-wide { grid-column: span 8; }
.day-phone { grid-column: span 4; grid-row: span 2; }
.day-card { grid-column: span 4; }
.day button { display: block; width: 100%; height: 100%; padding: 0; border: 1px solid var(--line); border-radius: 22px; overflow: hidden; cursor: zoom-in; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--bg) 70%, #fff 12%), var(--bg)); }
.day-art { display: grid; place-items: center; width: 100%; height: 100%; min-height: 300px; padding: 32px; }
.day-phone .day-art { min-height: 640px; padding: 36px 24px; }
.day-art img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 12px; box-shadow: 0 24px 60px -20px rgba(0,0,0,.55); transition: transform .7s var(--ease); }
.day-wide .day-art img { max-height: 380px; }
.day-card .day-art img { max-height: 300px; }
.day-phone .day-art img { max-height: 600px; border-radius: 26px; }
.day button:hover .day-art img { transform: translateY(-6px) scale(1.02); }
.day figcaption { display: flex; gap: 10px; align-items: baseline; margin-top: 12px; font-size: 15px; color: var(--muted); }
.day figcaption b { font-family: var(--mono); font-weight: 400; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--p-soft); }

.xp-phones { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; justify-items: center; }
.xp-phone { margin: 0; width: 100%; max-width: 200px; }
.xp-phone button, .xp-desk button { display: block; width: 100%; padding: 0; border: 1px solid var(--line); cursor: zoom-in; overflow: hidden; background: #0b0a0e; }
.xp-phone button { border-radius: 22px; }
.xp-phone img { display: block; width: 100%; aspect-ratio: 9 / 19.4; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.xp-desks { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.xp-desk { margin: 0; }
.xp-desk button { border-radius: 18px; }
.xp-desk img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: top; transition: transform .6s var(--ease); }
.xp-phone button:hover img, .xp-desk button:hover img { transform: scale(1.03); }
@media (max-width: 1023px) { .day, .day-wide, .day-card { grid-column: span 6; } .day-phone { grid-column: span 6; grid-row: span 1; } .day-phone .day-art { min-height: 480px; } .xp-phones { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .days { grid-template-columns: 1fr; } .day, .day-wide, .day-card, .day-phone { grid-column: auto; } .day-art { min-height: 220px; padding: 20px; } .xp-phones { grid-template-columns: repeat(2, 1fr); } .xp-desks { grid-template-columns: 1fr; } }
/* Centre any partial last row of app experiments */
.xp-phones { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.xp-phone { flex: 0 0 calc((100% - 5 * 16px) / 6); max-width: none; }
@media (max-width: 1023px) { .xp-phone { flex-basis: calc((100% - 2 * 16px) / 3); } }
@media (max-width: 640px) { .xp-phone { flex-basis: calc((100% - 16px) / 2); } }

/* Projects filmstrip (polished): equal tiles, browser frames for web, always-on labels */
.wk-film { margin-top: 72px; display: grid; gap: 18px; padding: 8px 0; -webkit-mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.wk-row { overflow: hidden; padding: 6px 0; }
.wk-track { display: flex; gap: 18px; width: max-content; animation: wk-slide 90s linear infinite; will-change: transform; }
.wk-row-1 .wk-track { animation-duration: 105s; animation-direction: reverse; }
.wk-film:hover .wk-track { animation-play-state: paused; }
.wk-tile { position: relative; flex: none; display: flex; flex-direction: column; width: 400px; aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden; background: #0b0a0e; border: 1px solid rgba(255,255,255,.1); box-shadow: 0 20px 50px -24px rgba(0,0,0,.9); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.wk-row-1 .wk-tile { width: 360px; }
.wk-bar { flex: none; display: flex; align-items: center; gap: 5px; height: 22px; padding: 0 10px; background: #18171b; border-bottom: 1px solid rgba(255,255,255,.06); }
.wk-bar i { width: 7px; height: 7px; border-radius: 50%; background: #3a3940; }
.wk-bar i:nth-child(1) { background: #ff5f57; } .wk-bar i:nth-child(2) { background: #febc2e; } .wk-bar i:nth-child(3) { background: #28c840; }
.wk-shot { position: relative; flex: 1; overflow: hidden; }
.wk-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform .8s var(--ease); }
.wk-tile:not(.wk-web) img { object-position: center; }
.wk-label { position: absolute; left: 12px; bottom: 12px; padding: 6px 12px; border-radius: 99px; font-size: 12.5px; font-weight: 500; color: #fff; background: rgba(10,8,14,.72); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.wk-tile:hover, .wk-tile:focus-visible { transform: translateY(-6px); border-color: rgba(196,167,255,.45); box-shadow: 0 30px 70px -24px rgba(124,58,237,.6); }
.wk-tile:hover img { transform: scale(1.04); }
@keyframes wk-slide { to { transform: translateX(calc(-50% - 9px)); } }
@media (prefers-reduced-motion: reduce) { .wk-track { animation: none; } }
@media (max-width: 900px) { .wk-tile { width: 280px; } .wk-row-1 .wk-tile { width: 250px; } .wk-film { margin-top: 48px; } }

/* Playground: original app examples in centred phone frames */
.xp-phones { gap: 22px; }
.xp-phone { flex: 0 0 calc((100% - 4 * 22px) / 5); }
.xp-phone button { padding: 7px; border-radius: 30px; background: #050407; border: 1px solid var(--line-strong); box-shadow: 0 30px 60px -30px rgba(0,0,0,.9); transition: transform .5s var(--ease), border-color .3s, box-shadow .5s; }
.xp-screen { display: block; border-radius: 23px; overflow: hidden; }
.xp-phone img { border-radius: 0; }
.xp-phone button:hover { transform: translateY(-6px); border-color: rgba(196,167,255,.45); box-shadow: 0 30px 70px -24px rgba(124,58,237,.55); }
.xp-phone button:hover img { transform: none; }
@media (max-width: 1023px) { .xp-phone { flex-basis: calc((100% - 2 * 22px) / 3); } }
@media (max-width: 640px) { .xp-phones { gap: 14px; } .xp-phone { flex-basis: calc((100% - 14px) / 2); } }

/* Contact form (no email address on the page) */
.cform { max-width: 640px; margin: 8px auto 0; display: grid; gap: 14px; text-align: left; }
.cf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.cf-field { display: grid; gap: 7px; }
.cf-field span { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.cf-field input, .cf-field select, .cf-field textarea { width: 100%; padding: 14px 16px; border-radius: 14px; font: inherit; font-size: 16px; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); outline: none; transition: border-color .25s, box-shadow .25s, background .25s; }
.cf-field textarea { resize: vertical; min-height: 130px; line-height: 1.5; }
.cf-field select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 44px; }
.cf-field select option { color: #111; }
.cf-field input::placeholder, .cf-field textarea::placeholder { color: var(--dim); }
.cf-field input:focus, .cf-field select:focus, .cf-field textarea:focus { border-color: rgba(196,167,255,.7); background: rgba(168,85,247,.06); box-shadow: 0 0 0 4px rgba(168,85,247,.15); }
.cf-field.err input, .cf-field.err textarea { border-color: #f87171; box-shadow: 0 0 0 4px rgba(248,113,113,.12); }
.cf-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cf-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; margin-top: 6px; }
.cform button[disabled] { opacity: .6; pointer-events: none; }
.cf-status { min-height: 22px; text-align: center; font-size: 15px; color: var(--muted); }
.cf-status.ok { color: #4ade80; }
.cf-status.bad { color: #fca5a5; }
.cform.sent .cf-row, .cform.sent .cf-field, .cform.sent .cf-foot { display: none; }
.cform.sent .cf-status { font-size: 19px; padding: 24px 0; }
@media (max-width: 640px) { .cf-row { grid-template-columns: 1fr; } }
.cv-visit { margin-top: 26px; }
.pv-visit { display: flex; justify-content: center; margin-top: 28px; }
.cv-facts dd { margin-left: 0; }

/* Signature logo in the nav: writes itself in, then the flourish draws */
.brand .sig { display: block; height: 40px; width: auto; overflow: visible; filter: drop-shadow(0 0 14px rgba(168,85,247,.25)); }
.sig-name { clip-path: inset(-20% 100% -20% -2%); animation: sig-write 1.6s cubic-bezier(.55, .1, .35, 1) .25s forwards; }
.sig-swash { stroke-dasharray: 1; stroke-dashoffset: 1; animation: sig-draw .9s cubic-bezier(.6, 0, .3, 1) 1.65s forwards; }
.brand:hover .sig-swash { animation: sig-redraw 1s cubic-bezier(.6, 0, .3, 1) forwards; }
@keyframes sig-write { to { clip-path: inset(-20% -2% -20% -2%); } }
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
@keyframes sig-redraw { 0% { stroke-dashoffset: 0; } 45% { stroke-dashoffset: -1; } 46% { stroke-dashoffset: 1; } 100% { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .sig-name, .sig-swash { animation: none; clip-path: none; stroke-dashoffset: 0; } }
@media (max-width: 767px) { .brand .sig { height: 34px; } }

/* Signature: breathing room inside the nav pill */
.nav .brand { padding: 6px 14px 6px 12px; margin-left: 4px; }
.brand .sig { height: 38px; }

/* Hero portrait: keep the face centred in the 4:5 frame */
.portrait img { object-position: 58% 40%; }

/* Hero stats: suffix sits inline after the number */
.hero-stats { flex-wrap: wrap; gap: 36px; }
.hero-stats dd { display: flex; align-items: baseline; gap: 2px; }
.hero-stats dd em { position: static; font-style: normal; font-size: .62em; color: var(--p-soft); }

/* Journey: one-line highlight per role + education */
.exp-note { margin-top: 8px; max-width: 640px; font-size: 15px; line-height: 1.55; color: var(--muted); }
.edu { margin-top: 28px; padding: 26px 28px; border-radius: 24px; border: 1px solid var(--line); background: var(--surface); }
.edu .mini-label { display: block; margin-bottom: 10px; }
.edu-list { list-style: none; display: grid; }
.edu-row { display: grid; grid-template-columns: 1fr auto 70px; gap: 16px; align-items: baseline; padding: 14px 0; border-top: 1px solid var(--line); }
.edu-row:first-child { border-top: 0; }
.edu-row b { display: block; font-family: var(--display); font-weight: 500; font-size: 19px; color: #fff; }
.edu-row span { font-size: 14.5px; color: var(--muted); }
.edu-row em { font-style: normal; font-family: var(--mono); font-size: 12px; color: var(--p-soft); }
.edu-row time { text-align: right; font-family: var(--mono); font-size: 13px; color: var(--dim); }
@media (max-width: 640px) { .edu-row { grid-template-columns: 1fr auto; } .edu-row em { grid-column: 1; grid-row: 2; } .edu-row time { grid-row: 1 / span 2; grid-column: 2; } .hero-stats { gap: 22px 28px; } }

/* Sound toggle above the reels */
.sound-bar { display: flex; align-items: center; gap: 14px; margin: -8px 0 22px; }
.sound-toggle { display: inline-flex; align-items: center; gap: 9px; height: 42px; padding: 0 18px 0 14px; border-radius: 99px; cursor: pointer; font: inherit; font-size: 14.5px; color: var(--text); background: rgba(255,255,255,.04); border: 1px solid var(--line-strong); transition: background .25s, border-color .25s, box-shadow .25s; }
.sound-toggle svg { width: 20px; height: 20px; }
.sound-toggle .sw-on { display: none; }
.sound-toggle[aria-pressed="true"] { color: #fff; background: rgba(168,85,247,.22); border-color: rgba(196,167,255,.6); box-shadow: 0 0 24px -8px var(--p-glow); }
.sound-toggle[aria-pressed="true"] .sw-on { display: inline; }
.sound-toggle[aria-pressed="true"] .sw-off { display: none; }
.sound-toggle:hover { border-color: rgba(196,167,255,.6); }
.sound-note { font-size: 14px; color: var(--dim); }

/* Full-screen photo and video viewers: always fit the screen */
.lightbox { padding: 64px 84px; }
.lightbox img { width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); object-fit: contain; }
.vmodal video { width: auto; height: auto; max-width: min(100%, 1200px); max-height: calc(100vh - 96px); max-height: calc(100dvh - 96px); object-fit: contain; }
@media (max-width: 640px) {
  .lightbox { padding: 64px 10px 84px; }
  .lightbox img { max-height: calc(100dvh - 148px); border-radius: 12px; }
  .vmodal { padding: 60px 10px 24px; }
  .vmodal video { max-height: calc(100dvh - 84px); border-radius: 14px; }
  .lb-close, .vm-close { top: 12px; right: 12px; }
}

/* Reel cover: stays on top until the first video frame is drawn, then fades */
.reel > .v-cover, .video > .v-cover { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; object-fit: cover; pointer-events: none; transition: opacity .25s ease; }
.reel.has-frame > .v-cover, .video.has-frame > .v-cover { opacity: 0; }
.reel > video, .video > video { background: transparent; }

/* Sitemaps: columns follow the tree, connector spans first to last column only */
.ia-cols { grid-template-columns: repeat(var(--cols, 6), minmax(150px, 1fr)); min-width: calc(var(--cols, 6) * 164px); }
.ia-cols::before { left: calc((100% - (var(--cols, 6) - 1) * 14px) / var(--cols, 6) / 2); right: calc((100% - (var(--cols, 6) - 1) * 14px) / var(--cols, 6) / 2); }
@media (min-width: 900px) { .ia-cols[style*="--cols:4"], .ia-cols[style*="--cols:3"] { max-width: 920px; margin: 0 auto; } }

/* Sticky stepper: solid enough that headings don't show through */
.stepper { background: rgba(10, 8, 16, .96); box-shadow: 0 12px 32px -12px rgba(0,0,0,.8); }

/* Case-study header: back link and tags on one line */
.cv-top .back { margin: 0; }
.cv-top { gap: 16px; }

/* Phone flow: the frame takes the screenshots' own shape, nothing cropped */
.pf-phone { display: grid; aspect-ratio: auto; padding: 10px; }
.pf-screen { position: relative; inset: auto; grid-area: 1 / 1; aspect-ratio: 1 / var(--ar, 2.17); border-radius: 30px; }
.pf-screen img { width: 100%; height: 100%; object-fit: contain; object-position: top center; }
.pf-notch { z-index: 3; }

/* Card previews: phones sit fully inside the card (no cut-off bottoms) */
.pv-ph { bottom: 7%; width: 23%; aspect-ratio: 9 / 19.5; }
.pv-ph-1 { left: 38.5%; bottom: 7%; width: 25%; }
.pv-ph-0 { left: 11%; }
.pv-ph-2 { right: 11%; }
.pv-ph .pv-page img { object-position: top center; }

/* Same back-link + tags row on the 29 Brews and Playground headers */
.cs-head > .back, .bx-copy > .back { display: inline-flex; align-items: center; vertical-align: middle; margin: 0 16px 0 0; }
.cs-head > .back + .tags, .bx-copy > .back + .tags { display: inline-flex; vertical-align: middle; margin: 0; }
.cs-head > .tags + h1, .bx-copy > .tags + h1 { margin-top: 36px; }
.ps-id .ps-av img { display: block; width: 100%; height: 100%; object-fit: cover; }
.persona .ps-bio { align-self: center; font-size: 18px; line-height: 1.55; color: var(--text); }
.cv-shot--full > img { max-height: none; object-fit: contain; }

/* Hero: fixed column widths so the rotating word never resizes the portrait */
@media (min-width: 1024px) { .hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); } }
.hero h1 { font-size: clamp(30px, 5vw, 72px); }
@media (max-width: 767px) { .hero h1 { font-size: min(10.4vw, 50px); } }

/* About: portrait beside the story */
.about-photo { position: relative; margin: 0 0 30px; width: min(300px, 70%); aspect-ratio: 4 / 5; border-radius: 28px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 24px 60px -24px rgba(168,85,247,.45); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }

/* Rotating word: room for descenders (the g in "campaigns") under background-clip text */
.rotator { padding-bottom: .16em; margin-bottom: -.16em; }

/* ---------- About page ---------- */
.ab-hero { width: var(--max); max-width: 100%; margin: 0 auto; padding: 160px 16px 40px; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 64px; align-items: center; }
.ab-photo { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: 32px; overflow: hidden; border: 1px solid var(--line-strong); box-shadow: 0 30px 80px -30px rgba(168,85,247,.55); }
.ab-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 58% 40%; }
.ab-intro h1 { margin-top: 18px; font-family: var(--display); font-weight: 500; font-size: clamp(40px, 5vw, 72px); line-height: 1.04; letter-spacing: -0.025em; }
.ab-intro h1 em { font-style: normal; color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; padding-bottom: .1em; }
.ab-lead { margin-top: 24px; max-width: 600px; font-size: 21px; line-height: 1.55; color: var(--muted); }
.ab-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 36px 0 0; }
.ab-stats div { display: flex; flex-direction: column-reverse; gap: 6px; padding: 18px; border-radius: 20px; background: var(--surface); border: 1px solid var(--line); }
.ab-stats dd { margin: 0; font-family: var(--display); font-size: 34px; font-weight: 500; line-height: 1; }
.ab-stats dt { font-size: 13px; line-height: 1.35; color: var(--dim); }
.ab-body { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.ab-story p { font-size: 21px; line-height: 1.65; color: var(--muted); }
.ab-story p + p { margin-top: 22px; }
.ab-side { display: grid; gap: 16px; position: sticky; top: 110px; }
@media (max-width: 1023px) {
  .ab-hero { grid-template-columns: 1fr; gap: 40px; padding-top: 130px; }
  .ab-photo { width: min(380px, 80%); }
  .ab-body { grid-template-columns: 1fr; gap: 32px; }
  .ab-side { position: static; }
}
@media (max-width: 767px) {
  .ab-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-lead, .ab-story p { font-size: 18px; }
  .ab-photo { width: 100%; max-width: 360px; }
}
.cv-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
.pv-page img { min-height: 100%; object-fit: cover; object-position: top; } /* non-zero box before load, so lazy images start loading */
.about-text .link-arrow { display: inline-flex; margin-top: 30px; }

/* Safari: gradient text vanishes when a filtered child sits inside a background-clip:text element,
   so the gradient goes on the word itself and the glow on its parent */
.rotator { color: inherit; background: none; -webkit-background-clip: border-box; background-clip: border-box; filter: drop-shadow(0 0 28px rgba(168,85,247,.55)); }
.rotator .rot-word { filter: none; color: transparent; -webkit-text-fill-color: transparent; background: var(--grad); -webkit-background-clip: text; background-clip: text; padding-bottom: .16em; margin-bottom: -.16em; }
/* Playground cover: let the screens size naturally (the generic card rule sets height:100%) */
.pc-media .phone-track img { height: auto; object-fit: initial; }
/* Narrow phones: keep "I design campaigns" on one line */
@media (max-width: 767px) { .hero h1 { font-size: min(9.6vw, 50px); } }
/* Phones: stats as a tidy 2x2 grid instead of 3 + 1 */
@media (max-width: 767px) {
  .hero-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; margin-top: 40px; }
}

/* Card phone mockups: corner curve and bezel scale with the phone, so small phones don't turn into pills that clip the screen */
.pv-ph { border-radius: 16% / 7.6%; padding: 3.5%; }
.pv-ph .pv-page { border-radius: 12.5% / 5.8%; }