@import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ---- Tokens ---- */
:root {
  --bg: #121417;
  --bg-raised: #1a1d21;
  --bg-sunken: #0c0d0f;
  --border: rgba(255,255,255,.09);
  --border-strong: rgba(255,255,255,.18);
  --ink: #f3f2ee;
  --ink-dim: #b6b6b1;
  --ink-faint: #75756f;
  --accent: #b3acff;
  --accent-2: #ecdfa8;
  --accent-grad: linear-gradient(100deg, var(--accent-2), var(--accent) 78%);
  --font-display: 'Newsreader', Georgia, serif;
  --font-body: 'Instrument Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --radius-lg: 24px;
  --radius-md: 14px;
  --radius-pill: 999px;
  --wrap: 1180px;
  --ease: cubic-bezier(.16,1,.3,1);
  color-scheme: dark;
}

/* ---- Ambient background (starfield + fireflies) ----
   A faint drifting starfield plus a handful of wandering fireflies.
   Deliberately NOT using z-index:-1 here: a fixed element with a
   negative z-index failed to composite at all in testing (rendered
   correctly at any positive z-index, invisible at -1). Using z-index:0
   instead, with every real content container explicitly promoted to
   z-index:1 below, avoids that entirely and is more robust regardless
   of the exact cause. */
.ambient-bg { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
header, section, footer, body > div.wrap { position: relative; z-index: 1; }
.ambient-layer { position: absolute; inset: 0; }
.ambient-layer.a {
  background-image:
    radial-gradient(1.4px 1.4px at 40px 60px, rgba(243,242,238,.5), transparent 100%),
    radial-gradient(1px 1px at 160px 20px, rgba(243,242,238,.32), transparent 100%),
    radial-gradient(1.6px 1.6px at 260px 140px, rgba(179,172,255,.4), transparent 100%),
    radial-gradient(1px 1px at 340px 220px, rgba(243,242,238,.28), transparent 100%),
    radial-gradient(1.2px 1.2px at 100px 300px, rgba(236,223,168,.34), transparent 100%),
    radial-gradient(1px 1px at 380px 60px, rgba(243,242,238,.3), transparent 100%),
    radial-gradient(1.4px 1.4px at 20px 200px, rgba(243,242,238,.22), transparent 100%);
  background-repeat: repeat;
  background-size: 420px 420px;
  animation: ambientDriftA 150s linear infinite;
  opacity: .8;
}
.ambient-layer.b {
  background-image:
    radial-gradient(1px 1px at 60px 40px, rgba(243,242,238,.32), transparent 100%),
    radial-gradient(1.2px 1.2px at 200px 160px, rgba(243,242,238,.24), transparent 100%),
    radial-gradient(1px 1px at 280px 60px, rgba(179,172,255,.3), transparent 100%),
    radial-gradient(1px 1px at 40px 260px, rgba(243,242,238,.2), transparent 100%),
    radial-gradient(1.1px 1.1px at 320px 300px, rgba(236,223,168,.26), transparent 100%);
  background-repeat: repeat;
  background-size: 340px 340px;
  animation: ambientDriftB 110s linear infinite;
  opacity: .6;
}
@keyframes ambientDriftA { from { background-position: 0 0; } to { background-position: -420px 420px; } }
@keyframes ambientDriftB { from { background-position: 0 0; } to { background-position: 340px -340px; } }
@media (prefers-reduced-motion: reduce) {
  .ambient-layer { animation: none; }
}

/* ---- Fireflies ----
   Small warm points that wander a short, looping meander path while
   independently pulsing brightness, so no two feel in sync. Four
   different move paths (fireflyMove1-4) are shared across the set;
   each firefly's own top/left/delay is set inline so the same markup
   just needs pasting in, no per-page tuning. */
.firefly {
  position: absolute;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--accent-2);
  box-shadow: 0 0 6px 2px var(--accent-2), 0 0 14px 5px rgba(236,223,168,.45);
  opacity: 0;
  animation: fireflyMove1 20s ease-in-out infinite, fireflyGlow 4.5s ease-in-out infinite;
}
.firefly.m2 { animation-name: fireflyMove2, fireflyGlow; }
.firefly.m3 { animation-name: fireflyMove3, fireflyGlow; }
.firefly.m4 { animation-name: fireflyMove4, fireflyGlow; }
.firefly.cool { background: var(--accent); box-shadow: 0 0 6px 2px var(--accent), 0 0 14px 5px rgba(179,172,255,.45); }
@keyframes fireflyGlow { 0%, 100% { opacity: .12; } 50% { opacity: .85; } }
@keyframes fireflyMove1 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(24px, -32px); } 50% { transform: translate(-16px, -54px); } 75% { transform: translate(-30px, -10px); } }
@keyframes fireflyMove2 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-28px, 20px); } 50% { transform: translate(-10px, 46px); } 75% { transform: translate(22px, 18px); } }
@keyframes fireflyMove3 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(18px, 26px); } 50% { transform: translate(36px, -6px); } 75% { transform: translate(10px, -30px); } }
@keyframes fireflyMove4 { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-20px, -24px); } 50% { transform: translate(8px, -44px); } 75% { transform: translate(28px, -14px); } }
@media (prefers-reduced-motion: reduce) {
  .firefly { animation: none; }
}

/* ---- Page transitions (4x4 grid wipe) ----
   Every page load starts fully covered by a fixed 4x4 grid of opaque
   cells (the covering is the plain CSS default, not something JS has
   to establish, so there's no flash of raw content on first paint).
   Shortly after load, script.js shrinks the columns away left-to-right,
   staggered, revealing the page underneath. */
.page-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(4, 1fr);
  pointer-events: none;
}
.pt-cell {
  background: var(--bg-sunken);
  transform: scaleY(1);
  transform-origin: top;
}
.pt-cell.pt-out { animation: pt-shrink .7s var(--ease) both; animation-delay: var(--pt-delay, 0ms); }
@keyframes pt-shrink { from { transform: scaleY(1); } to { transform: scaleY(0); } }

@media (prefers-reduced-motion: reduce) {
  .page-transition { display: none; }
}

* { box-sizing: border-box; }
button { background: none; border: none; padding: 0; font: inherit; color: inherit; cursor: pointer; }
html { background: var(--bg); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink-dim);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 32px; }
.scroll-sentinel { position: absolute; top: 0; height: 1px; width: 1px; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0;
}
h1 { font-size: clamp(34px, 4.6vw, 54px); line-height: 1.12; }
h2 { font-size: clamp(26px, 3vw, 36px); line-height: 1.2; }
h3 { font-size: 21px; line-height: 1.3; font-weight: 400; }

em, i {
  font-style: italic;
  font-weight: 400;
  background: var(--accent-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  line-height: 1.15;
  padding-bottom: 0.05em;
  display: inline-block;
}

.type-cycle { position: relative; }
.type-cursor {
  display: inline-block;
  width: 3px;
  height: 0.76em;
  margin-left: 3px;
  background: var(--ink);
  vertical-align: -0.05em;
}
@media (prefers-reduced-motion: no-preference) {
  .type-cursor { animation: caretBlink 1s step-end infinite; }
}
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.body-l { font-size: 19px; line-height: 1.55; color: var(--ink-dim); max-width: 640px; }

.body-m { font-size: 16px; line-height: 1.65; color: var(--ink-dim); }
.meta-label {
  font-family: var(--font-body);
  font-size: 12.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--ink-faint);
  margin: 0;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 13px 26px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  transition: transform .25s var(--ease), background .25s var(--ease), border-color .25s var(--ease);
}
.btn:active { transform: scale(.97); }
.btn-primary { background: var(--ink); color: #14161a; }
.btn-primary:hover { background: #ffffff; }
.btn-ghost { border: 1px solid var(--border-strong); color: var(--ink); }
.btn-ghost:hover { border-color: var(--ink-dim); background: var(--bg-raised); }
.btn-accent { background: var(--accent-grad); color: #14161a; }
.btn-accent:hover { filter: brightness(1.08); }


/* ---- Nav ---- */
.site-nav {
  position: sticky;
  top: 0;
  z-index: 40;
  padding: 20px 0;
  transition: background .3s var(--ease), border-color .3s var(--ease), backdrop-filter .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-nav.is-scrolled {
  background: rgba(18,20,23,.82);
  backdrop-filter: blur(14px);
  border-bottom-color: var(--border);
}
.site-nav .wrap { display: flex; align-items: center; justify-content: space-between; }
.logotype { font-family: var(--font-display); font-style: italic; font-size: 21px; color: var(--ink); }
.logotype span { color: #fff; }
.nav-links { display: flex; gap: 32px; }
.nav-links a { font-size: 14.5px; font-weight: 500; color: var(--ink-dim); transition: color .2s; }
.nav-links a:hover, .nav-links a.is-active { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 10px; }
.nav-burger {
  display: none;
  width: 40px; height: 40px;
  align-items: center; justify-content: center;
  border-radius: var(--radius-pill);
  border: 1px solid var(--ink);
  background: none;
  appearance: none;
  color: var(--ink);
  position: relative;
  z-index: 1;
  transition: opacity .2s var(--ease);
}
.nav-burger:hover { opacity: .75; }
.nav-burger:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 4px rgba(179,172,255,.2);
}
.nav-burger .burger-line {
  position: absolute;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  border-radius: 1px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), top .3s var(--ease);
}
.nav-burger .burger-line:nth-child(1) { top: 15px; }
.nav-burger .burger-line:nth-child(2) { top: 19.25px; }
.nav-burger .burger-line:nth-child(3) { top: 23.5px; }
.nav-burger.is-open .burger-line:nth-child(1) { top: 19.25px; transform: rotate(45deg); }
.nav-burger.is-open .burger-line:nth-child(2) { opacity: 0; }
.nav-burger.is-open .burger-line:nth-child(3) { top: 19.25px; transform: rotate(-45deg); }

.mobile-sheet {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 35;
  padding: 100px 32px 48px;
  background: rgba(18,20,23,.98);
  backdrop-filter: blur(16px);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s;
}
.mobile-sheet.is-open {
  visibility: visible;
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  transition: opacity .3s var(--ease), transform .3s var(--ease);
}
.mobile-sheet-links {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.mobile-sheet-links a {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 34px;
  font-weight: 400;
  color: var(--ink-dim);
  padding: 14px 0;
}
.mobile-sheet-links a:active, .mobile-sheet-links a.is-active { color: var(--ink); }
.mobile-sheet-cta { justify-content: center; width: 100%; }

.nav-play { padding: 9px 18px; font-size: 14px; }

@media (max-width: 760px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .nav-play { padding: 9px 15px; }
  .nav-play-long { display: none; }
}

/* ---- Reveal ---- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.is-visible { opacity: 1; transform: none; }
.hero-fade { opacity: 0; transform: translateY(16px); animation: fadeUp .7s var(--ease) forwards; }
@keyframes fadeUp { to { opacity: 1; transform: none; } }

/* ---- Hero ---- */
.hero { padding: 56px 0 40px; }
.hero-grid { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 56px; align-items: center; }
.hero h1 { margin-bottom: 22px; }
.hero .body-l { margin-bottom: 32px; }
.hero-ctas { display: flex; gap: 14px; margin-bottom: 44px; flex-wrap: wrap; }
.hero-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 22px 32px; max-width: 420px; }
.hero-stats dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 6px; }
.hero-stats dd { margin: 0; font-size: 15.5px; color: var(--ink); }

.hero-visual { position: relative; margin-top: 180px; }
.browser-frame {
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
}
.browser-chrome { display: flex; align-items: center; gap: 7px; padding: 14px 16px; background: var(--bg-sunken); }
.browser-chrome > span { width: 10px; height: 10px; border-radius: 50%; background: var(--border-strong); }

.hero-chrome-label { position: relative; margin-left: auto; height: 14px; display: flex; align-items: center; }
.hero-chrome-label span { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-size: 12px; font-weight: 600; color: var(--ink-faint); letter-spacing: .02em; white-space: nowrap; opacity: 0; }
.hero-chrome-label span:first-of-type { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-chrome-label span:nth-of-type(1) { animation: heroLabel1 12s ease-in-out infinite; }
  .hero-chrome-label span:nth-of-type(2) { animation: heroLabel2 12s ease-in-out infinite; opacity: 0; }
  .hero-chrome-label span:nth-of-type(3) { animation: heroLabel3 12s ease-in-out infinite; opacity: 0; }
  .hero-chrome-label span:nth-of-type(4) { animation: heroLabel4 12s ease-in-out infinite; opacity: 0; }
}
@keyframes heroLabel1 { 0% { opacity: 1; } 20% { opacity: 1; } 24%, 100% { opacity: 0; } }
@keyframes heroLabel2 { 0%, 24.5% { opacity: 0; } 30% { opacity: 1; } 45% { opacity: 1; } 49%, 100% { opacity: 0; } }
@keyframes heroLabel3 { 0%, 49.5% { opacity: 0; } 55% { opacity: 1; } 70% { opacity: 1; } 74%, 100% { opacity: 0; } }
@keyframes heroLabel4 { 0%, 74.5% { opacity: 0; } 80% { opacity: 1; } 95% { opacity: 1; } 99%, 100% { opacity: 0; } }

.hero-cycle { position: relative; overflow: hidden; aspect-ratio: 1440 / 900; }
.hero-cycle img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1); }
.hero-cycle img:first-of-type { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .hero-cycle img:nth-of-type(1) { animation: heroCycle1 12s ease-in-out infinite; }
  .hero-cycle img:nth-of-type(2) { animation: heroCycle2 12s ease-in-out infinite; opacity: 0; }
  .hero-cycle img:nth-of-type(3) { animation: heroCycle3 12s ease-in-out infinite; opacity: 0; }
  .hero-cycle img:nth-of-type(4) { animation: heroCycle4 12s ease-in-out infinite; opacity: 0; }
}
@keyframes heroCycle1 { 0% { opacity: 1; transform: scale(1); } 20% { opacity: 1; transform: scale(1.04); } 24% { opacity: 0; transform: scale(1.04); } 24.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes heroCycle2 { 0%, 24.5% { opacity: 0; transform: scale(1); } 30% { opacity: 1; transform: scale(1); } 45% { opacity: 1; transform: scale(1.04); } 49% { opacity: 0; transform: scale(1.04); } 49.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes heroCycle3 { 0%, 49.5% { opacity: 0; transform: scale(1); } 55% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1.04); } 74% { opacity: 0; transform: scale(1.04); } 74.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes heroCycle4 { 0%, 74.5% { opacity: 0; transform: scale(1); } 80% { opacity: 1; transform: scale(1); } 95% { opacity: 1; transform: scale(1.04); } 99% { opacity: 0; transform: scale(1.04); } 99.5%, 100% { opacity: 0; transform: scale(1); } }

.hero-mobile-peek {
  position: absolute;
  top: -140px;
  right: 26px;
  width: 168px;
  aspect-ratio: 1756 / 3664;
  z-index: 0;
  transform: rotate(10deg);
  transform-origin: bottom center;
  cursor: pointer;
  transition: transform .45s var(--ease), z-index 0s linear .45s;
}
.hero-mobile-peek:hover {
  z-index: 2;
  transform: rotate(0deg) scale(1.08) translateY(-18px);
  transition: transform .45s var(--ease), z-index 0s linear;
}
.hero-mobile-peek img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; opacity: 0; transform: scale(1); filter: drop-shadow(0 30px 50px rgba(0,0,0,.55)); transition: filter .45s var(--ease); }
.hero-mobile-peek img:first-of-type { opacity: 1; }
.hero-mobile-peek:hover img { filter: drop-shadow(0 44px 70px rgba(0,0,0,.7)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-mobile-peek img:nth-of-type(1) { animation: heroMobileCycle1 12s ease-in-out infinite; }
  .hero-mobile-peek img:nth-of-type(2) { animation: heroMobileCycle2 12s ease-in-out infinite; opacity: 0; }
  .hero-mobile-peek img:nth-of-type(3) { animation: heroMobileCycle3 12s ease-in-out infinite; opacity: 0; }
}
@keyframes heroMobileCycle1 { 0% { opacity: 1; transform: scale(1); } 26% { opacity: 1; transform: scale(1.04); } 30% { opacity: 0; transform: scale(1.04); } 30.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes heroMobileCycle2 { 0%, 30.5% { opacity: 0; transform: scale(1); } 36% { opacity: 1; transform: scale(1); } 59% { opacity: 1; transform: scale(1.04); } 63% { opacity: 0; transform: scale(1.04); } 63.5%, 100% { opacity: 0; transform: scale(1); } }
@keyframes heroMobileCycle3 { 0%, 63.5% { opacity: 0; transform: scale(1); } 69% { opacity: 1; transform: scale(1); } 92% { opacity: 1; transform: scale(1.04); } 96% { opacity: 0; transform: scale(1.04); } 96.5%, 100% { opacity: 0; transform: scale(1); } }
.hero-visual .mockup { position: relative; z-index: 1; }
@media (prefers-reduced-motion: reduce) {
  .hero-mobile-peek,
  .hero-mobile-peek:hover { transition: none; }
}
@media (max-width: 900px) {
  .hero-mobile-peek { width: 130px; top: -163px; right: 46px; }
}

.hero-badge {
  position: absolute;
  right: -18px;
  bottom: -22px;
  z-index: 2;
  background: var(--accent-grad);
  color: #14161a;
  border-radius: var(--radius-md);
  padding: 18px 22px;
  max-width: 220px;
  box-shadow: 0 24px 50px -20px rgba(179,172,255,.4);
}
.hero-badge .num { font-family: var(--font-display); font-size: 30px; font-weight: 400; line-height: 1; margin-bottom: 6px; }
.hero-badge .cap { font-size: 13px; font-weight: 500; line-height: 1.35; }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; }
  .hero-badge { right: 8px; bottom: -18px; }
  .hero-visual { margin-top: 150px; }
}

/* ---- Section rhythm ---- */
section { padding: 96px 0; }
section + section { border-top: 1px solid var(--border); }
.section-head { max-width: 620px; margin-bottom: 52px; }
.section-head .meta-label { margin-bottom: 12px; }
.section-head .body-m { margin-top: 14px; max-width: 560px; }

/* ---- Mockup frame (shared: hero, selected work, video reel) ----
   The tilt transform lives on this outer, unclipped wrapper. The inner
   .browser-frame carries overflow:hidden + border-radius. Keeping both on
   one element triggers a real Chromium/WebKit bug where the rounded clip
   is silently dropped once a 3D transform (perspective/rotate) is present,
   letting the image bleed past the rounded corners. */
.mockup {
  position: relative;
  border-radius: var(--radius-lg);
  transition: transform .6s var(--ease), box-shadow .5s var(--ease);
  box-shadow: 0 30px 60px -28px rgba(0,0,0,.6);
}
.mockup:hover { box-shadow: 0 44px 84px -28px rgba(0,0,0,.7); }
@media (prefers-reduced-motion: reduce) {
  .mockup { transition: box-shadow .3s var(--ease); }
}

.reel { position: relative; overflow: hidden; }
.reel video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.reel-indicator {
  position: absolute; top: 14px; right: 16px; z-index: 3;
  display: flex; align-items: center; gap: 6px;
  padding: 5px 11px; border-radius: var(--radius-pill);
  background: rgba(12,13,15,.68); backdrop-filter: blur(6px);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; color: var(--ink-dim);
}
.reel-indicator .dot { width: 6px; height: 6px; border-radius: 50%; background: #ff6b6b; }

@media (prefers-reduced-motion: no-preference) {
  .reel-indicator .dot { animation: reelPulse 1.8s ease-in-out infinite; }
}
@keyframes reelPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }

/* ---- Selected work: featured case ---- */
.feature-case { display: grid; gap: 28px; margin-bottom: 28px; }
.feature-case-media img { width: 100%; display: block; }
.feature-case-body { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.feature-case-body h3 { font-size: 28px; margin-bottom: 10px; }
.feature-case-body .body-m { max-width: 560px; }
.feature-tags { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.tag { font-size: 12px; font-weight: 600; padding: 5px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); color: var(--ink-faint); }
.case-link {
  display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 600; white-space: nowrap;
  background-image: linear-gradient(100deg, var(--ink) 0%, var(--ink) 50%, var(--accent-2) 50%, var(--accent) 100%);
  background-size: 200% 100%;
  background-position: 0% 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position .45s var(--ease);
}
.case-link svg { width: 16px; height: 16px; color: var(--ink); transition: transform .25s var(--ease), color .45s var(--ease); }
.case-link:hover { background-position: 100% 0; }
.case-link:hover svg { transform: translateX(4px); color: var(--accent); }

/* ---- Selected work: secondary grid ---- */
.work-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
.work-card { display: flex; flex-direction: column; }
.work-card-media { margin-bottom: 20px; }
.mockup-screen { position: relative; overflow: hidden; }
.mockup-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.work-card-media img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.work-card:hover .work-card-media img { transform: scale(1.05); }
.work-card h3 { font-size: 22px; margin-bottom: 8px; }
.work-card .body-m { margin-bottom: 14px; }

@media (max-width: 1024px) {
  .work-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 760px) {
  .work-grid { grid-template-columns: 1fr; }
}

/* ---- Selected work: segment labels (Website design / Mobile design) ---- */
.work-segment { display: flex; align-items: baseline; gap: 14px; margin: 72px 0 32px; }
.work-segment:first-of-type { margin-top: 48px; }
.work-segment h3 { font-family: var(--font-body); font-weight: 600; font-size: 15px; color: var(--ink); white-space: nowrap; }
.work-segment::after { content: ''; flex: 1; height: 1px; background: var(--border); }

/* ---- Selected work: mobile feature (real Figma-frame mockup, pre-composited PNG) ---- */
.feature-mobile { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.feature-mobile.reverse { grid-template-columns: 1.15fr 0.85fr; }

.phone-mockup {
  width: 100%;
  max-width: 300px;
  margin: 0 auto;
  filter: drop-shadow(0 30px 60px rgba(0,0,0,.5));
}
.phone-mockup img { display: block; width: 100%; height: auto; transition: transform .6s var(--ease); }
.feature-mobile:hover .phone-mockup img,
.cs-cover:hover .phone-mockup img { transform: scale(1.03); }

@media (max-width: 900px) {
  .feature-mobile, .feature-mobile.reverse { grid-template-columns: 1fr; gap: 36px; }
  .feature-mobile.reverse .phone-mockup { order: -1; }
  .phone-mockup { max-width: 240px; }
}

/* ---- Experience list ---- */
.exp-list { border-top: 1px solid var(--border); }
.exp-row { display: grid; grid-template-columns: 160px 1fr; gap: 32px; padding: 26px 0; border-bottom: 1px solid var(--border); }
.exp-when { font-size: 13.5px; color: var(--ink-faint); padding-top: 3px; }
.exp-title { font-size: 17px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.exp-org { font-size: 14.5px; color: var(--ink-faint); }
@media (max-width: 600px) {
  .exp-row { grid-template-columns: 1fr; gap: 6px; }
}

/* ---- Capability divided list ---- */
.cap-list { border-top: 1px solid var(--border); }
.cap-row { display: grid; grid-template-columns: 56px 1.1fr 1.4fr; gap: 32px; padding: 34px 0; border-bottom: 1px solid var(--border); align-items: baseline; }
.cap-index { font-family: var(--font-display); font-size: 16px; color: var(--ink-faint); }
.cap-row h3 { font-size: 22px; }
.cap-row .body-m { margin-bottom: 12px; }
.cap-tags { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 760px) {
  .cap-row { grid-template-columns: 1fr; gap: 10px; }
}

/* ---- Service grid (contact) ---- */
.service-grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 56px; }
.service-row { padding: 28px 0; border-bottom: 1px solid var(--border); }
.service-row .cap-index { display: block; margin-bottom: 10px; }
.service-row h3 { font-size: 19px; margin-bottom: 8px; }
@media (max-width: 760px) {
  .service-grid { grid-template-columns: 1fr; column-gap: 0; }
}

/* ---- Bento (more work) ---- */
.bento-caption { padding: 14px 16px; }
.bento-caption .name { font-family: var(--font-display); font-size: 17px; color: var(--ink); }
.bento-caption .desc { font-size: 12.5px; color: var(--ink-dim); margin-top: 2px; }

.exp-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px 32px; flex-wrap: wrap; }
.exp-head > div { flex: 1 1 420px; }
.section-link { display: inline-flex; align-items: center; gap: 6px; font-size: 14.5px; font-weight: 500; color: var(--ink-dim); white-space: nowrap; transition: color .2s var(--ease); }
.section-link span { display: inline-block; transition: transform .25s var(--ease); }
.section-link:hover { color: var(--ink); }
.section-link:hover span { transform: translateX(4px); }

.exp-preview { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.exp-card { display: block; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); }
.exp-card .exp-frame { position: relative; aspect-ratio: var(--ratio, .4618); overflow: hidden; }
.exp-card .exp-track { display: flex; width: 400%; height: 100%; }
.exp-card .exp-track img { flex: 0 0 25%; width: 25%; height: 100%; object-fit: cover; object-position: top; display: block; }

@media (prefers-reduced-motion: no-preference) {
  .exp-card .exp-track { animation: expSlide 14s cubic-bezier(.65,0,.35,1) infinite; }
  .exp-card:nth-child(2) .exp-track { animation-delay: -3.5s; }
  .exp-card:nth-child(3) .exp-track { animation-delay: -7s; }
  .exp-card:nth-child(4) .exp-track { animation-delay: -10.5s; }
  .exp-card:hover .exp-track { animation-play-state: paused; }
}

@keyframes expSlide {
  0%, 20% { transform: translateX(0%); }
  27%, 47% { transform: translateX(-25%); }
  54%, 74% { transform: translateX(-50%); }
  81%, 100% { transform: translateX(-75%); }
}

@media (max-width: 1080px) {
  .exp-preview { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .exp-preview { grid-template-columns: 1fr; }
  .exp-head { align-items: flex-start; }
}

/* ---- CTA band ---- */
.cta-band { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
.cta-band h2 { max-width: 480px; }
.cta-band .body-m { max-width: 460px; }
@media (max-width: 700px) {
  .cta-band { flex-direction: column; align-items: flex-start; }
}

/* ---- Footer ---- */
footer { padding: 56px 0 64px; border-top: 1px solid var(--border); }
.footer-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 20px; margin-bottom: 22px; }
.footer-links { display: flex; gap: 26px; }
.footer-links a { font-size: 14px; color: var(--ink-faint); transition: color .2s; }
.footer-links a:hover { color: var(--ink); }
.footer-fine { font-size: 13.5px; color: var(--ink-faint); max-width: 480px; }

/* ---- Case study pages ---- */
.cs-back { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; color: var(--ink-faint); margin-bottom: 28px; }
.cs-back svg { width: 16px; height: 16px; }
.cs-back:hover { color: var(--ink); }
.cs-header { padding: 44px 0 32px; }
.cs-summary { margin-top: 18px; }
.cs-meta { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin: 40px 0 0; padding-top: 32px; border-top: 1px solid var(--border); }
.cs-meta dt { font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 6px; }
.cs-meta dd { margin: 0; font-size: 15.5px; color: var(--ink); font-weight: 500; }
@media (max-width: 700px) { .cs-meta { grid-template-columns: 1fr 1fr; } }

.cs-cover { padding: 12px 0 0; }
.device-mockup { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: var(--bg-raised); box-shadow: 0 50px 100px -40px rgba(0,0,0,.65); }
.device-stage { position: relative; }
.device-screen { position: relative; overflow: hidden; }
.device-cam { display: none; }
.device-base { height: 22px; background: var(--bg-sunken); }
.device-screen img, .device-screen video { display: block; width: 100%; height: 100%; object-fit: cover; }

.cs-block { padding: 76px 0; }
.cs-block-grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; align-items: center; }
.cs-block-grid .body-m { margin-top: 16px; }
.cs-block-grid h2 { margin-top: 10px; }
.cs-shot { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border); background: #fff; }
.cs-shot img { width: 100%; }
.cs-shot.portrait { max-width: 280px; margin-left: auto; }
.cs-shot-row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 32px; align-items: start; }
.cs-shot-row.thirds { grid-template-columns: repeat(3, 1fr); }
.cs-gallery { columns: 4; column-gap: 18px; margin-top: 32px; }
.cs-gallery img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 18px;
  break-inside: avoid;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  transition: transform .4s var(--ease);
}
.cs-gallery img:hover { transform: scale(1.02); }
@media (max-width: 900px) {
  .cs-gallery { columns: 2; }
}
.cs-list { display: flex; flex-direction: column; gap: 14px; margin-top: 18px; }
.cs-list li { font-size: 15.5px; line-height: 1.6; color: var(--ink-dim); padding-left: 22px; position: relative; }
.cs-list li::before { content: ''; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); }

@media (max-width: 900px) {
  .cs-block-grid { grid-template-columns: 1fr; gap: 32px; }
  .cs-shot-row, .cs-shot-row.thirds { grid-template-columns: 1fr; }
  .cs-shot.portrait { margin: 0 auto; }
}

.cs-next { display: flex; align-items: center; justify-content: space-between; padding: 64px 32px 96px; flex-wrap: wrap; gap: 24px; }
.cs-next-label { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--ink-faint); margin-bottom: 8px; }
.cs-next-title { font-family: var(--font-display); font-size: 28px; color: var(--ink); }
.cs-next-title span { color: var(--accent); margin-left: 4px; }

/* ---- Timeline (about) ---- */
.timeline { border-top: 1px solid var(--border); }
.timeline-row { display: grid; grid-template-columns: 190px 1fr; gap: 32px; padding: 32px 0; border-bottom: 1px solid var(--border); }
.timeline-when { font-size: 13.5px; color: var(--ink-faint); line-height: 1.5; padding-top: 4px; }
.timeline-role { font-size: 18px; color: var(--ink); font-weight: 600; margin-bottom: 3px; }
.timeline-org { font-size: 14.5px; color: var(--ink-faint); margin-bottom: 14px; }
@media (max-width: 700px) { .timeline-row { grid-template-columns: 1fr; gap: 8px; } }

.info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.info-col h4 { font-size: 12.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .12em; color: var(--accent); margin: 0 0 18px; }
.info-col ul { display: flex; flex-direction: column; gap: 12px; }
.info-col li { font-size: 15px; color: var(--ink-dim); line-height: 1.5; }
.info-col li strong { color: var(--ink); font-weight: 600; }
@media (max-width: 760px) { .info-grid { grid-template-columns: 1fr; } }

/* ---- Contact page ---- */
.contact-split { display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 64px; }
.contact-info-list { margin-top: 32px; display: flex; flex-direction: column; gap: 22px; }
.contact-info-item { display: flex; gap: 16px; align-items: flex-start; }
.contact-info-icon { width: 38px; height: 38px; border-radius: var(--radius-md); border: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: var(--accent); flex-shrink: 0; }
.contact-info-item h4 { font-size: 15px; color: var(--ink); font-weight: 600; margin: 0 0 3px; }
.contact-info-item p { font-size: 14.5px; color: var(--ink-faint); margin: 0; }

.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; }
.form-field label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.form-field label span { color: var(--ink-faint); font-weight: 400; }
.form-field input, .form-field textarea {
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--ink);
  background: var(--bg-raised);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 13px 16px;
  resize: vertical;
}
.form-field input::placeholder, .form-field textarea::placeholder { color: var(--ink-faint); }
.form-field input:focus, .form-field textarea:focus { outline: none; border-color: var(--accent); }
.form-note { font-size: 12.5px; color: var(--ink-faint); margin: 0; }
.contact-form .btn-primary { align-self: flex-start; }

/* ---- CV access modal ---- */
.cv-modal {
  position: fixed; inset: 0; z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility 0s linear .3s;
}
.cv-modal[aria-hidden="false"] { opacity: 1; visibility: visible; transition: opacity .3s var(--ease); }
.cv-modal-backdrop { position: absolute; inset: 0; background: rgba(8,9,11,.72); backdrop-filter: blur(6px); }
.cv-modal-panel {
  position: relative; width: 100%; max-width: 440px; max-height: 90vh; overflow-y: auto;
  background: var(--bg-raised); border: 1px solid var(--border-strong); border-radius: var(--radius-lg);
  padding: 40px 36px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6);
  transform: translateY(16px) scale(.98); transition: transform .35s var(--ease);
}
.cv-modal[aria-hidden="false"] .cv-modal-panel { transform: translateY(0) scale(1); }
@media (prefers-reduced-motion: reduce) {
  .cv-modal, .cv-modal-panel { transition: none; }
}
.cv-modal-close {
  position: absolute; top: 18px; right: 18px; width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center; border-radius: 50%;
  color: var(--ink-faint); transition: color .2s, background .2s;
}
.cv-modal-close:hover { color: var(--ink); background: var(--bg); }
.cv-modal-close svg { width: 18px; height: 18px; }
.cv-modal-step h3 { font-family: var(--font-display); font-size: 26px; color: var(--ink); margin: 10px 0 12px; }
.cv-modal-step .body-m { margin-bottom: 24px; }
.cv-modal-error { font-size: 13.5px; color: #ff8577; margin: -6px 0 0; }
.cv-modal-link { display: inline-block; margin-top: 18px; font-size: 13.5px; color: var(--ink-faint); text-decoration: underline; text-underline-offset: 3px; transition: color .2s; }
.cv-modal-link:hover { color: var(--ink); }

@media (max-width: 900px) {
  .contact-split { grid-template-columns: 1fr; gap: 40px; }
  .form-row { grid-template-columns: 1fr; }
}