/* ================================================================
   ART PRO DESIGN v2 — dark theme · chartreuse identity
   ================================================================ */

:root {
  --font-display: 'Space Grotesk', system-ui, sans-serif;
  --font-body:    'Inter', system-ui, -apple-system, sans-serif;

  --bg:           #07070b;
  --bg-2:         #0d0d16;
  --bg-3:         rgba(16, 16, 28, 0.66);
  --surface:      rgba(255, 255, 255, 0.035);
  --border:       rgba(197, 255, 61, 0.14);
  --border-hover: rgba(197, 255, 61, 0.5);
  --line:         rgba(255, 255, 255, 0.09);

  --accent:       #c5ff3d;
  --accent-glow:  rgba(197, 255, 61, 0.18);
  --violet:       #8b5cf6;

  --text:         #ececf2;
  --text-2:       rgba(236, 236, 242, 0.6);
  --text-3:       rgba(236, 236, 242, 0.32);

  --ease:         cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:     cubic-bezier(0.2, 0.7, 0.2, 1);
  --header-h:     104px;
  --max:          1200px;
  --radius:       8px;
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

::selection { background: rgba(197, 255, 61, 0.6); color: #07070b; }

html { overflow-x: hidden; scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-weight: 300;
  line-height: 1.65;
  min-height: 100dvh;
  overflow-x: hidden;
  cursor: none;
}
html.is-touch body { cursor: auto; }

a { text-decoration: none; color: inherit; cursor: none; }
button, input, textarea, [role="button"] { cursor: none; font-family: inherit; }
html.is-touch a, html.is-touch button,
html.is-touch input, html.is-touch textarea { cursor: auto; }

img { max-width: 100%; display: block; }

/* Text caret only inside real form fields — everything else keeps the ring */
h1, h2, h3, h4, h5, h6, p, li, blockquote, span, cite, strong, em { cursor: none; }
html.is-touch h1, html.is-touch h2, html.is-touch h3,
html.is-touch h4, html.is-touch h5, html.is-touch h6,
html.is-touch p, html.is-touch li, html.is-touch blockquote,
html.is-touch span, html.is-touch cite { cursor: auto; }

body.cursor-text input:not([type="file"]):not([type="checkbox"]),
body.cursor-text textarea { cursor: text !important; }
body.cursor-text #cursor-ring,
body.cursor-text #cursor-dot { opacity: 0 !important; }

/* ================================================================
   BACKGROUND LAYERS
   ================================================================ */
#bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  pointer-events: none;
}
#bg-canvas.bg-fallback {
  background:
    radial-gradient(ellipse 80% 60% at 20% 10%, rgba(139, 92, 246, 0.14), transparent 60%),
    radial-gradient(ellipse 60% 50% at 85% 85%, rgba(197, 255, 61, 0.07), transparent 55%),
    var(--bg);
}
#bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse 120% 90% at 50% 40%, transparent 45%, rgba(7, 7, 11, 0.42) 100%);
}

/* ================================================================
   CURSOR
   ================================================================ */
#cursor-glow { display: none; }
/* Positioner only. Moved with transform so the pointer never triggers layout —
   with left/top the browser reflows every frame, which shows up as flicker
   once the cursor is a large opaque disc sitting over moving content. */
#cursor-ring {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s ease;
}
.ring-inner {
  width: 34px;
  height: 34px;
  border: 1px solid rgba(197, 255, 61, 0.65);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out),
              border-color 0.25s ease, background 0.3s ease;
}
/* arrow lives inside the ring, hidden until a work card is hovered */
.cursor-arrow {
  width: 22px;
  height: 22px;
  color: #07070b;
  opacity: 0;
  transform: scale(0.5) translateX(-4px);
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}
#cursor-dot {
  position: fixed;
  left: 0;
  top: 0;
  pointer-events: none;
  z-index: 9999;
  width: 5px;
  height: 5px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  opacity: 0;
  will-change: transform;
  transition: opacity 0.3s ease;
}
body.cursor-hover .ring-inner {
  width: 56px;
  height: 56px;
  border-color: rgba(197, 255, 61, 0.25);
}
/* over a project card: ring becomes a filled chartreuse disc with an arrow */
body.cursor-view .ring-inner {
  width: 84px;
  height: 84px;
  background: var(--accent);
  border-color: var(--accent);
}
body.cursor-view .cursor-arrow {
  opacity: 1;
  transform: scale(1) translateX(0);
}
body.cursor-view #cursor-dot { opacity: 0 !important; }

/* over a zoomable screen: same disc, but an eye instead of the arrow */
.cursor-eye {
  position: absolute;
  width: 26px;
  height: 26px;
  color: #07070b;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.25s var(--ease-out), transform 0.35s var(--ease-out);
}
body.cursor-eye .ring-inner {
  width: 78px;
  height: 78px;
  background: var(--accent);
  border-color: var(--accent);
}
body.cursor-eye .cursor-eye {
  opacity: 1;
  transform: scale(1);
}
body.cursor-eye #cursor-dot { opacity: 0 !important; }
html.is-touch #cursor-ring,
html.is-touch #cursor-dot { display: none; }

/* ================================================================
   HEADER
   ================================================================ */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 max(2rem, calc(50vw - var(--max) / 2));
  background: linear-gradient(to bottom,
    rgba(7, 7, 11, 0.92) 0%,
    rgba(7, 7, 11, 0.82) 62%,
    rgba(7, 7, 11, 0.55) 88%,
    rgba(7, 7, 11, 0.0) 100%);
  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
}
/* soft blurred skirt so the edge doesn't cut hard across the shader */
.site-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  height: 26px;
  pointer-events: none;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: linear-gradient(to bottom, rgba(7, 7, 11, 0.45), rgba(7, 7, 11, 0));
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
          mask-image: linear-gradient(to bottom, #000, transparent);
}
.header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 0 18px;
}

.header-controls {
  display: flex;
  align-items: center;
  gap: 14px;
}
.cv-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 18px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease, background 0.3s ease;
}
.cv-btn:hover {
  border-color: var(--border-hover);
  color: var(--accent);
}
.lang-btn {
  padding: 10px 14px;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--text-2);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: border-color 0.3s ease, color 0.3s ease;
}
.lang-btn:hover { border-color: var(--border-hover); color: var(--accent); }

.header-divider {
  height: 1px;
  background: var(--line);
}

.main-nav {
  position: relative;
  display: flex;
  align-items: center;
  gap: 34px;
  padding: 0;
}
.main-nav a {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.3s ease;
  position: relative;
  padding-bottom: 4px;
}
.main-nav a:hover { color: var(--text); }
.main-nav a.active { color: var(--accent); }

/* Driven by transform, not left/width: those are layout properties, so the
   browser reflowed on every frame of the slide — visibly rough once other
   things on the page are moving. Base width is 1px and scaleX carries the
   real width. */
#nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 1px;
  height: 2px;
  background: var(--accent);
  border-radius: 2px;
  transform-origin: left center;
  transform: translateX(0) scaleX(0);
  will-change: transform;
  transition: transform 0.4s var(--ease-out), opacity 0.3s ease;
  opacity: 0;
}
#nav-indicator.on { opacity: 1; }

/* ================================================================
   APP / PAGES
   ================================================================ */
#app {
  position: relative;
  padding-top: var(--header-h);
  min-height: 100dvh;
}
.page {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 2rem 36px;   /* the footer is the last thing — no need for a deep skirt */
  animation: pageIn 0.55s var(--ease-out) both;
}
@keyframes pageIn {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page.leaving {
  animation: pageOut 0.3s ease both;
}
@keyframes pageOut {
  to { opacity: 0; transform: translateY(-18px); }
}

/* reveal on scroll */
/* Name and work fill the opening screen exactly, so nothing from the next
   section peeks above the fold and invites a half-scroll. */
.first-screen {
  min-height: calc(100dvh - var(--header-h));
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.reveal {
  opacity: 0;
  transform: translateY(30px);
  /* shorter than before, so consecutive items in a staggered group finish
     arriving before the next one is well under way */
  transition: opacity 0.55s var(--ease-out), transform 0.65s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
.reveal.in {
  opacity: 1;
  transform: none;
  will-change: auto;
}

/* Section headings wipe up from behind their own baseline while the block
   fades in — two speeds instead of one makes the arrival feel composed. */
.section-head h2 {
  clip-path: inset(0 0 108% 0);
  transition: clip-path 0.95s var(--ease-out) var(--d, 0s);
}
.section-head.in h2 { clip-path: inset(0 0 -20% 0); }

/* section scaffolding */
.section { padding: 90px 0 0; }
/* work sits right under the hero — keep it inside the first screen */
.section#work { padding-top: 26px; }
.section-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 48px;
}
.section-head h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.section-num {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-3);
}

/* ================================================================
   HERO
   ================================================================ */
.hero {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 0 40px;
}
.hero-name {
  font-family: var(--font-display);
  font-weight: 700;
  /* one line — scales down on narrow screens instead of wrapping */
  font-size: clamp(30px, 6.4vw, 92px);
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  white-space: nowrap;
}
.hero-name .line { display: block; overflow: hidden; }
.hero-name .line > span {
  display: inline-block;
  transform: translateY(110%);
  animation: heroLine 0.9s var(--ease-out) forwards;
}
.hero-name em {
  font-style: normal;
  color: var(--accent);
}
@keyframes heroLine { to { transform: translateY(0); } }

.hero-role {
  margin-top: 22px;
  font-family: var(--font-display);
  font-size: clamp(13px, 1.4vw, 16px);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--violet);
}
.hero-desc {
  margin-top: 18px;
  /* --hero-w is measured from the name line in JS, so both share one edge */
  max-width: min(100%, var(--hero-w, 62ch));
  font-size: clamp(14.5px, 1.25vw, 16px);
  color: var(--text-2);
}
.hero-availability {
  margin-top: 24px;
  display: inline-flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--text-2);
}
.hero-availability .pulse {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 rgba(197, 255, 61, 0.5);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(197, 255, 61, 0.45); }
  70%  { box-shadow: 0 0 0 9px rgba(197, 255, 61, 0); }
  100% { box-shadow: 0 0 0 0 rgba(197, 255, 61, 0); }
}

/* ================================================================
   FEATURED WORK CARD
   ================================================================ */
.work-card {
  position: relative;
  display: block;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--line);
  background-color: #12101e;
  aspect-ratio: 3168 / 1344;
  min-height: 420px;
  isolation: isolate;
  transition: border-color 0.4s ease, box-shadow 0.5s ease;
}
.work-card:hover {
  border-color: var(--border-hover);
  box-shadow: 0 0 60px rgba(197, 255, 61, 0.07);
}
.work-card-bg {
  position: absolute;
  inset: 0;
  background-image: url('assets/prodigy_hero.jpg');
  background-size: cover;
  background-position: center;
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  z-index: 0;
}

/* ---- horizontal works carousel (full-bleed) ---- */
.works-rail-wrap {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.works-rail {
  display: flex;
  gap: 18px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
  overscroll-behavior-x: contain;
  padding: 4px 0;
  -webkit-overflow-scrolling: touch;
}
.works-rail::-webkit-scrollbar { display: none; }
.works-rail.dragging { scroll-behavior: auto; }

.works-rail .work-card {
  flex: 0 0 auto;
  height: clamp(210px, 38vh, 420px);   /* single-line name freed up vertical space */
  width: auto;                          /* aspect-ratio drives the width */
  min-height: 0;
}
.works-rail .work-card.is-bare { aspect-ratio: 1436 / 747; }
.works-rail .work-card.has-sketch { aspect-ratio: 16 / 9; }

/* rail controls */
.rail-ui {
  max-width: var(--max);
  margin: 20px auto 0;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.rail-dots { display: flex; gap: 8px; }
.rail-dot {
  width: 26px;
  height: 3px;
  border: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.16);
  transition: background 0.35s ease, width 0.35s var(--ease-out);
}
.rail-dot.on { background: var(--accent); width: 44px; }

/* soft fade at both ends so the loop has no hard cut */
.works-rail-wrap::before,
.works-rail-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  /* exactly the rail's own height — card height plus its 4px padding top and
     bottom. It used to be `bottom: 62px`, a number picked to clear the arrow
     buttons; once those were removed the row shrank and the fade sat too high. */
  height: calc(clamp(210px, 38vh, 420px) + 8px);
  width: clamp(40px, 7vw, 110px);
  pointer-events: none;
  z-index: 2;
}
.works-rail-wrap::before {
  left: 0;
  background: linear-gradient(to right, var(--bg), transparent);
}
.works-rail-wrap::after {
  right: 0;
  background: linear-gradient(to left, var(--bg), transparent);
  transition: background 0.35s ease, width 0.35s var(--ease-out);
}

@media (max-width: 860px) {
  .works-rail { gap: 12px; }
  .works-rail .work-card { height: clamp(150px, 22vh, 220px); }
  .rail-ui { padding: 0 1.3rem; }
}

/* ---- image-first card: caption + CTA appear on hover ---- */
.work-card.is-bare { aspect-ratio: 1436 / 747; min-height: 0; }
.work-card.is-static { cursor: none; }

/* ---- before/after: sketch wiped diagonally by the pointer ---- */
.work-card.has-sketch {
  --wipe: 42%;
  aspect-ratio: 16 / 9;    /* matches the fission artwork, no cropping */
}
.work-card-sketch {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  /* must move exactly like .work-card-bg or the two halves drift apart */
  transition: transform 0.9s var(--ease-out), filter 0.5s ease;
  will-change: transform;
  /* diagonal cut: sketch on the left of the seam, final on the right */
  -webkit-mask-image: linear-gradient(108deg, #000 calc(var(--wipe) - 1.2%), transparent calc(var(--wipe) + 1.2%));
          mask-image: linear-gradient(108deg, #000 calc(var(--wipe) - 1.2%), transparent calc(var(--wipe) + 1.2%));
}
.work-card.has-sketch:hover .work-card-sketch {
  transform: scale(1.045);
  filter: brightness(1.06);
}
.work-card-seam {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(108deg,
    transparent calc(var(--wipe) - 0.35%),
    rgba(197, 255, 61, 0.55) var(--wipe),
    transparent calc(var(--wipe) + 0.35%));
  opacity: 0.7;
  transition: opacity 0.4s ease;
}
.work-card.has-sketch:hover .work-card-seam { opacity: 1; }
/* touch: the seam is fixed, so it should not advertise itself as a control */
html.is-touch .work-card-seam { opacity: 0.45; }


.work-card.is-bare .work-card-content {
  align-items: flex-end;
  justify-content: flex-start;
  padding: 44px 48px 26px;   /* caption sits lower on the card */
}
.work-card.is-bare .work-card-inner {
  max-width: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

/* scrim only fades in on hover — the artwork is clean at rest */
.work-card.is-bare .work-card-scrim {
  opacity: 0;
  transition: opacity 0.5s var(--ease-out);
  background: linear-gradient(to top,
    rgba(4, 4, 8, 0.80) 0%,
    rgba(4, 4, 8, 0.38) 30%,
    rgba(4, 4, 8, 0.0) 62%);
}
.work-card.is-bare:hover .work-card-scrim { opacity: 1; }

.work-card.is-bare .work-card-tag,
.work-card.is-bare .work-card-cta {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s var(--ease-out), transform 0.55s var(--ease-out),
              background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.work-card.is-bare:hover .work-card-tag,
.work-card.is-bare:focus-visible .work-card-tag,
.work-card.is-bare:hover .work-card-cta,
.work-card.is-bare:focus-visible .work-card-cta {
  opacity: 1;
  transform: translateY(0);
}
/* caption leads, CTA follows a beat later */
.work-card.is-bare:hover .work-card-cta,
.work-card.is-bare:focus-visible .work-card-cta { transition-delay: 0.09s; }

.work-card.is-bare .work-card-tag {
  margin-bottom: 0;
  font-size: clamp(15px, 1.6vw, 20px);
  font-weight: 500;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.6);
}
/* plain text link, no button */
.work-card.is-bare .work-card-cta {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--violet);
  text-shadow: 0 2px 14px rgba(0, 0, 0, 0.7);
}
.work-card.is-bare:hover .work-card-cta {
  background: none;
  border: 0;
  color: var(--violet);
}
.work-card:hover .work-card-bg {
  transform: scale(1.045);
  filter: brightness(1.06);
}
.work-card-scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to left,
    rgba(4, 4, 8, 0.72) 0%,
    rgba(4, 4, 8, 0.45) 32%,
    rgba(4, 4, 8, 0.05) 58%,
    transparent 72%);
  pointer-events: none;
}
.work-card-content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 60px 5.5%;
}
.work-card-inner { max-width: 440px; width: 100%; }
.work-card-tag {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
}
.work-card-title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 34px);
  line-height: 1.22;
  color: #fff;
  margin-bottom: 34px;
}
.work-card-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin-bottom: 32px;
}
.work-card-metrics .metric span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  margin-bottom: 4px;
}
.work-card-metrics .metric strong {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 14px;
  color: #fff;
}
.work-card-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 24px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 999px;
  transition: background 0.35s ease, color 0.35s ease, border-color 0.35s ease;
}
.work-card-cta .arrow {
  display: inline-block;
  transition: transform 0.4s var(--ease-out);
}
.work-card:hover .work-card-cta {
  background: var(--accent);
  border-color: var(--accent);
  color: #07070b;
}
.work-card:hover .work-card-cta .arrow { transform: translateX(6px); }

/* ================================================================
   SERVICES
   ================================================================ */
/* same type scale as .hero-desc so every lede on the site reads at one size */
.services-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14.5px, 1.25vw, 16px);
  line-height: 1.65;
  color: var(--text-2);
  /* wide enough for both sentences to sit on two lines */
  max-width: 86ch;
  text-wrap: balance;
  margin-bottom: 44px;
}

.services-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.service-card {
  position: relative;
  overflow: hidden;
  padding: 30px 26px 34px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  /* Frosted glass, painted rather than sampled.
     backdrop-filter is deliberately NOT used here: the WebGL canvas behind the
     page repaints continuously, so the browser re-runs the blur every frame and
     the result shimmers. Layered translucent gradients give the same read on a
     dark background and are completely stable. */
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.032) 46%,
      rgba(255, 255, 255, 0.050) 100%),
    radial-gradient(120% 90% at 12% 0%,
      rgba(139, 92, 246, 0.20) 0%, rgba(139, 92, 246, 0) 62%),
    radial-gradient(110% 80% at 95% 100%,
      rgba(90, 120, 255, 0.13) 0%, rgba(90, 120, 255, 0) 60%),
    rgba(14, 14, 22, 0.55);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.65);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out),
              box-shadow 0.35s ease;
}
/* chartreuse glow along the top edge — fades in on hover */
.service-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(197, 255, 61, 0.16) 0%,
    rgba(197, 255, 61, 0.05) 42%,
    rgba(197, 255, 61, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.service-card:hover {
  border-color: var(--border-hover);
  box-shadow:
    0 -1px 0 0 rgba(197, 255, 61, 0.35) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 26px 50px -24px rgba(0, 0, 0, 0.7);
  transform: translateY(-4px);
}
.service-card:hover::before { opacity: 1; }
.service-card > * { position: relative; z-index: 1; }
.service-card.reveal.in:hover { transform: translateY(-4px); }
.service-num {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--violet);
  margin-bottom: 14px;
}
.service-card h4 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(16px, 1.5vw, 19px);
  letter-spacing: -0.005em;
  white-space: nowrap;
  margin-bottom: 18px;
  transition: color 0.35s ease;
}
.service-card:hover h4 { color: var(--accent); }
.service-card p {
  font-size: 13.5px;
  line-height: 1.62;
  color: var(--text-2);
  transition: color 0.35s ease;
}
/* lift the body copy to full white on hover — the chartreuse wash across the
   top of the card eats contrast otherwise */
.service-card:hover p { color: var(--text); }

/* ================================================================
   TESTIMONIALS
   ================================================================ */
.testimonials-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 40px 48px;
}
.testimonial {
  position: relative;
  overflow: hidden;
  padding: 30px 30px 34px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  /* Painted glass — same approach as .service-card.
     No backdrop-filter: the WebGL canvas behind the page repaints every frame
     and would make the blur shimmer. */
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.032) 46%,
      rgba(255, 255, 255, 0.050) 100%),
    radial-gradient(120% 90% at 12% 0%,
      rgba(139, 92, 246, 0.20) 0%, rgba(139, 92, 246, 0) 62%),
    radial-gradient(110% 80% at 95% 100%,
      rgba(90, 120, 255, 0.13) 0%, rgba(90, 120, 255, 0) 60%),
    rgba(14, 14, 22, 0.55);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 0 0 1px rgba(255, 255, 255, 0.02) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.65);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out),
              box-shadow 0.35s ease;
}
/* chartreuse glow along the top edge — fades in on hover */
.testimonial::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    rgba(197, 255, 61, 0.16) 0%,
    rgba(197, 255, 61, 0.05) 42%,
    rgba(197, 255, 61, 0) 100%
  );
  opacity: 0;
  transition: opacity 0.35s ease;
}
.testimonial:hover {
  border-color: var(--border-hover);
  box-shadow:
    0 -1px 0 0 rgba(197, 255, 61, 0.35) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.04) inset,
    0 26px 50px -24px rgba(0, 0, 0, 0.7);
  transform: translateY(-4px);
}
.testimonial:hover::before { opacity: 1; }
.testimonial > * { position: relative; z-index: 1; }
.testimonial.reveal.in:hover { transform: translateY(-4px); }
.testimonial cite {
  display: flex;
  align-items: center;
  gap: 14px;
  font-style: normal;
  margin-bottom: 22px;
}
.testimonial-avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 1px solid var(--line);
}
.testimonial cite strong {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 15px;
  color: var(--text);
}
.testimonial cite span {
  font-size: 12.5px;
  color: var(--text-3);
}
.testimonial blockquote {
  font-size: 15px;
  line-height: 1.7;
  color: var(--text-2);
  transition: color 0.35s ease;
}
.testimonial:hover blockquote { color: var(--accent); }

/* ================================================================
   CASE STUDY PAGE
   ================================================================ */
.case-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 26px;
  flex-wrap: wrap;
}
.case-head h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(24px, 3.2vw, 40px);
  letter-spacing: -0.01em;
}
.back-link {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-2);
  transition: color 0.3s ease;
}
.back-link:hover { color: var(--accent); }

/* ---------- auto-scrolling screen strip ---------- */
/* Driven by scrollLeft in JS, not by a transform animation.
   A transform-animated track is one composited layer as wide as all the
   images put together — past ~16k px Chrome cannot keep it as a texture and
   drops to software rasterising, which is what made the screen flicker.
   Scrolling only ever rasterises the visible slice. */
.case-strip {
  position: relative;
  width: 100vw;
  margin-left: calc(50% - 50vw);
  /* vertical padding leaves room for the hover zoom — the container clips,
     so without it the enlarged screen loses its top and bottom edges */
  padding: 22px 0;
  margin-bottom: 34px;
  overflow: hidden;
  scroll-behavior: auto;
  /* Fence the strip off from the rest of the page. Without containment,
     scrolling a full-viewport-width box every frame invalidates paint outside
     it too — including the fixed WebGL canvas underneath, which then redraws
     constantly and flashes the whole screen. */
  contain: layout paint style;
  will-change: scroll-position;
}
.case-strip-track {
  display: flex;
  width: max-content;
}
.case-strip-run {
  display: flex;
  gap: 18px;
  padding-right: 18px;
}
/* no frame, no background — the artwork carries its own rounded device edge
   in the alpha channel, so it sits straight on the page */
.case-strip figure {
  margin: 0;
  flex: 0 0 auto;
  height: clamp(200px, 30vh, 340px);
}
/* The hovered screen grows a little — the click affordance.
   Scoped to `.is-still`, which JS only sets once the strip has parked: while
   the images are sliding, a per-image :hover would flip on and off as the
   gaps pass under the pointer. Parked, a transform is compositor-only and
   costs nothing. */
.case-strip img {
  transform-origin: center;
  transition: transform 0.35s var(--ease-out);
}
.case-strip.is-still figure:hover img {
  transform: scale(1.07);
}

/* No hover transform here on purpose.
   The track runs an infinite transform animation on one large composited
   layer. Any transform or filter on a child mid-animation forces Chrome to
   re-rasterise that layer every frame, which reads as the whole screen
   flickering and the strip stuttering. The eye cursor already signals that
   the screens are clickable, so the hover cue costs nothing to drop. */
.case-strip img {
  display: block;
  height: 100%;
  width: auto;
}
@media (prefers-reduced-motion: reduce) {
  .case-strip { overflow-x: auto; }
}

/* ---------- lightbox ---------- */
.case-strip, .case-strip img { cursor: none; }

/* `display: none` when closed, and no backdrop-filter.
   A full-viewport backdrop-filter sits over the WebGL canvas even while
   hidden, so Chrome re-blurs the entire screen on every canvas frame — that
   is what was flickering, not the strip. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 4vh 4vw;
  background: rgba(5, 5, 9, 0.96);
  opacity: 0;
  transition: opacity 0.25s ease;
}
body.lb-open .lightbox { display: flex; }
body.lb-open .lightbox.is-in { opacity: 1; }
body.lb-open { overflow: hidden; }

.lb-img {
  max-width: 100%;
  max-height: 92vh;
  width: auto;
  height: auto;
  object-fit: contain;
  /* never let the browser soften the full-resolution original */
  image-rendering: -webkit-optimize-contrast;
  /* Opacity only — no scale, no slide. Every shot is a different width, so a
     transform made the frame jump around as it resized between images. */
  opacity: 0;
  transition: opacity 0.17s var(--ease);
}
body.lb-open .lightbox.is-in .lb-img { opacity: 1; }

/* stepping between shots: fade out, swap, fade back in */
body.lb-open .lightbox.is-in.swapping .lb-img { opacity: 0; }

/* thin progress hint while the full-size file is still downloading */
.lightbox.is-loading::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg,
    transparent, var(--accent), transparent);
  animation: lb-load 1.1s linear infinite;
}
@keyframes lb-load {
  from { transform: translateX(-100%); }
  to   { transform: translateX(100%); }
}

.lb-close,
.lb-nav {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.05);
  color: var(--text-2);
  transition: color 0.25s ease, border-color 0.25s ease, background 0.25s ease;
}
.lb-close:hover,
.lb-nav:hover {
  color: var(--accent);
  border-color: var(--border-hover);
  background: rgba(197, 255, 61, 0.08);
}
.lb-close {
  position: absolute;
  top: 22px;
  right: 22px;
  z-index: 2;
}
.lb-count {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-3);
}
@media (max-width: 640px) {
  .lightbox { padding: 2vh 2vw; gap: 6px; }
  .lb-close, .lb-nav { width: 38px; height: 38px; }
}

/* ---------- project brief ---------- */
.case-brief {
  margin-bottom: 48px;
}
/* Contact is a separate screen from the work — give it real air above so the
   two never read as one continuous block. */
#contacts { padding-top: 150px; }

/* Same idea inside a case study: the rail of other projects is a new chapter,
   not a continuation of the one being read. */
.case-brief + #work,
.case-gallery + #work { padding-top: 130px; }
.brief-lede {
  font-family: var(--font-display);
  font-weight: 300;
  font-size: clamp(19px, 2.2vw, 30px);
  line-height: 1.38;
  letter-spacing: -0.01em;
  color: var(--text);
  max-width: 30ch;
  text-wrap: balance;
  margin-bottom: 36px;
}

/* facts strip — company · year · role · scope
   No panel: the type sits straight on the page, each column marked by a thin
   rule that fades out downwards, with a bright chartreuse tick at the top. */
.brief-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0 34px;
  margin-bottom: 30px;
}
.brief-fact {
  position: relative;
  padding: 2px 0 4px 18px;
}
/* one thin rule of even weight, muted grey-violet — structure, not accent */
.brief-fact::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: rgba(150, 138, 190, 0.30);
}
.brief-fact dt {
  font-family: var(--font-display);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-3);
  margin-bottom: 7px;
}
.brief-fact dd {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
}
/* the two facts that carry the most weight, one accent each */
.brief-fact.is-key dd {
  color: var(--accent);
  font-weight: 500;
}
.brief-fact.is-alt dd {
  color: var(--violet);
  font-weight: 500;
}

/* the narrative — problem · contribution · outcome */
.brief-body {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}
.brief-block {
  position: relative;
  overflow: hidden;
  padding: 26px 26px 30px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  border-radius: 16px;
  /* painted glass — same recipe as the service cards */
  background:
    linear-gradient(150deg,
      rgba(255, 255, 255, 0.085) 0%,
      rgba(255, 255, 255, 0.032) 46%,
      rgba(255, 255, 255, 0.050) 100%),
    radial-gradient(120% 90% at 12% 0%,
      rgba(139, 92, 246, 0.20) 0%, rgba(139, 92, 246, 0) 62%),
    radial-gradient(110% 80% at 95% 100%,
      rgba(90, 120, 255, 0.13) 0%, rgba(90, 120, 255, 0) 60%),
    rgba(14, 14, 22, 0.55);
  box-shadow:
    0 1px 0 0 rgba(255, 255, 255, 0.12) inset,
    0 -1px 0 0 rgba(255, 255, 255, 0.03) inset,
    0 18px 40px -22px rgba(0, 0, 0, 0.65);
  transition: border-color 0.35s ease, transform 0.35s var(--ease-out),
              box-shadow 0.35s ease;
}
.brief-block::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 62%;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(197, 255, 61, 0.16) 0%,
    rgba(197, 255, 61, 0.05) 42%,
    rgba(197, 255, 61, 0) 100%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
.brief-block:hover {
  border-color: var(--border-hover);
  box-shadow:
    0 -1px 0 0 rgba(197, 255, 61, 0.35) inset,
    0 26px 50px -24px rgba(0, 0, 0, 0.7);
  transform: translateY(-4px);
}
.brief-block:hover::before { opacity: 1; }
.brief-block > * { position: relative; z-index: 1; }
.brief-num {
  display: block;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 500;
  color: var(--violet);
  margin-bottom: 12px;
  /* own layer so the shake never nudges the text below it */
  transform-origin: left center;
  will-change: transform;
  transition: color 0.35s ease;
}
@keyframes brief-num-shake {
  0%   { transform: translateX(0)      rotate(0deg); }
  12%  { transform: translateX(-2.5px) rotate(-4deg); }
  26%  { transform: translateX(2.5px)  rotate(4deg); }
  40%  { transform: translateX(-2px)   rotate(-3deg); }
  54%  { transform: translateX(2px)    rotate(3deg); }
  68%  { transform: translateX(-1.2px) rotate(-1.8deg); }
  82%  { transform: translateX(1.2px)  rotate(1.8deg); }
  100% { transform: translateX(0)      rotate(0deg); }
}
.brief-block:hover .brief-num {
  color: var(--accent);
  animation: brief-num-shake 0.55s var(--ease-out);
}
@media (prefers-reduced-motion: reduce) {
  .brief-block:hover .brief-num { animation: none; }
}
.brief-block h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(15px, 1.4vw, 18px);
  letter-spacing: -0.005em;
  margin-bottom: 14px;
  transition: color 0.35s ease;
}
.brief-block:hover h3 { color: var(--accent); }
.brief-block p {
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-2);
  transition: color 0.35s ease;
}
/* lift the body copy to full white on hover — the chartreuse wash across the
   top of the card eats contrast otherwise */
.brief-block:hover p { color: var(--text); }

@media (max-width: 640px) {
  .brief-lede { max-width: none; }
  .brief-facts { grid-template-columns: repeat(2, 1fr); }
}

/* one continuous stack — the frame lives on the container so nothing
   separates the images from each other */
.case-gallery {
  display: grid;
  gap: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  line-height: 0;
}
.case-gallery figure {
  margin: 0;
  overflow: hidden;
}
.case-gallery img { display: block; width: 100%; height: auto; }

/* interactive embed (Figma prototype, video, …) */
.case-embed {
  --embed-ratio: 16 / 9;
  margin: 28px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  background: #0a0a10;
}
.case-embed iframe {
  display: block;
  width: 100%;
  aspect-ratio: var(--embed-ratio);
  border: 0;
}
.case-embed figcaption {
  padding: 13px 18px;
  font-size: 12.5px;
  color: var(--text-3);
  border-top: 1px solid var(--line);
}
@media (max-width: 860px) {
  .case-embed { --embed-ratio: 4 / 3; }
}

/* ================================================================
   CONTACT
   ================================================================ */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 60px;
  align-items: start;
}
.contact-text h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(30px, 4.5vw, 52px);
  letter-spacing: -0.01em;
  line-height: 1.05;
  margin: 10px 0 24px;
}
.contact-text h2 em {
  font-style: normal;
  color: var(--accent);
}
.contact-text p {
  font-size: 16px;
  color: var(--text-2);
  max-width: 44ch;
}
.contact-text strong { font-weight: 500; color: var(--text); }

.contact-form {
  background: var(--bg-3);
  border: 1px solid var(--line);
  padding: 22px;
  border-radius: 16px;
  display: grid;
  gap: 12px;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.form-lede {
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(14.5px, 1.25vw, 16px);
  line-height: 1.65;
  color: var(--text-2);
  margin: 4px 4px 8px;
}
.hp-field { display: none; }
.form-card {
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid transparent;
  border-radius: 10px;
  padding: 15px 18px;
  transition: border-color 0.3s ease, background 0.3s ease;
}
.form-card:focus-within {
  border-color: var(--border-hover);
  background: rgba(255, 255, 255, 0.06);
}
.form-card input,
.form-card textarea {
  width: 100%;
  background: transparent;
  border: 0;
  outline: 0;
  font-family: var(--font-body);
  font-size: 15px;
  color: var(--text);
  padding: 0;
}
.form-card textarea {
  resize: vertical;
  min-height: 104px;
  line-height: 1.55;
  display: block;
}
.form-card input::placeholder,
.form-card textarea::placeholder { color: var(--text-3); opacity: 1; }

.form-card.is-file { padding: 13px 18px; }
.form-card.is-file input[type="file"] {
  font-size: 13.5px;
  color: var(--text-3);
}
.form-card.is-file input[type="file"]::file-selector-button {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 7px 14px;
  margin-right: 12px;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--text);
  cursor: none;
  transition: border-color 0.3s ease;
}
.form-card.is-file input[type="file"]::file-selector-button:hover {
  border-color: var(--border-hover);
}
.form-card .file-hint {
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  margin-top: 7px;
}

.form-verify {
  background: rgba(255, 255, 255, 0.045);
  border-radius: 10px;
  padding: 13px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  user-select: none;
  font-size: 13.5px;
  color: var(--text-2);
}
.form-verify input { position: absolute; opacity: 0; pointer-events: none; }
.verify-box {
  width: 21px;
  height: 21px;
  border: 1.5px solid var(--line);
  border-radius: 5px;
  position: relative;
  flex-shrink: 0;
  transition: background 0.25s ease, border-color 0.25s ease;
}
.form-verify input:checked + .verify-box {
  background: var(--accent);
  border-color: var(--accent);
}
.form-verify input:checked + .verify-box::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 2px;
  width: 5px;
  height: 10px;
  border: solid #07070b;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.form-submit {
  display: block;
  width: 100%;
  padding: 16px 24px;
  background: var(--accent);
  color: #07070b;
  border: 0;
  border-radius: 10px;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: background 0.3s ease, transform 0.25s var(--ease-out), box-shadow 0.3s ease;
}
.form-submit:hover {
  background: #d4ff6a;
  box-shadow: 0 0 32px rgba(197, 255, 61, 0.25);
  transform: translateY(-1px);
}
.form-submit:disabled { opacity: 0.5; }
.form-status {
  font-size: 13px;
  color: var(--text-3);
  text-align: center;
  min-height: 18px;
}
.form-status.is-error   { color: #f87171; }
.form-status.is-success { color: var(--accent); }

/* socials row */
.socials-row {
  display: flex;
  gap: 26px;
  margin-top: 36px;
}
.socials-row a {
  display: inline-flex;
  color: var(--text-2);
  transition: color 0.3s ease, transform 0.3s var(--ease-out);
}
/* the SVGs carry width/height attributes — override both */
.socials-row a svg {
  width: 34px;
  height: 34px;
}
/* Behance is a wide wordmark, so it gets its own proportions rather than a
   square box. Painted as a mask over currentColor so it still turns
   chartreuse on hover like the other two. */
.icon-behance {
  display: block;
  width: 42px;
  height: 27px;          /* artwork is 126 × 80 */
  background-color: currentColor;
  /* inlined as a data URI: Chrome refuses to load a mask image from a
     file:// URL, and the element then renders as nothing at all */
  -webkit-mask-image: url("data:image/png;base64,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");
          mask-image: url("data:image/png;base64,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");
  -webkit-mask-size: contain;   mask-size: contain;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.socials-row a:hover { color: var(--accent); transform: translateY(-2px); }

/* ================================================================
   FOOTER
   ================================================================ */
.site-footer {
  border-top: 1px solid var(--line);
  margin-top: 76px;
  padding: 34px 0 6px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  font-size: 12px;
  color: var(--text-3);
}

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1023px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  :root { --header-h: 96px; }
  .cv-btn span#cv-label { display: none; }
  .cv-btn { padding: 10px 13px; }
  .main-nav { gap: 20px; overflow-x: auto; scrollbar-width: none; }
  .main-nav::-webkit-scrollbar { display: none; }
  .main-nav a { font-size: 11px; letter-spacing: 0.12em; white-space: nowrap; }
  .hero { padding: 20px 0 60px; }
  .work-card { aspect-ratio: auto; min-height: 520px; }
  .work-card-content { align-items: flex-end; padding: 40px 26px; }
  .work-card-inner { max-width: 100%; }
  .work-card-tag { white-space: normal; font-size: 11px; }
  .work-card-scrim {
    background: linear-gradient(to top,
      rgba(4, 4, 8, 0.8) 0%, rgba(4, 4, 8, 0.45) 42%, rgba(4, 4, 8, 0.08) 100%);
  }
  .services-grid { grid-template-columns: 1fr; }
  .service-card h4 { white-space: normal; }
  .testimonials-grid { grid-template-columns: 1fr; gap: 24px; }
  .contact-grid { grid-template-columns: 1fr; gap: 40px; }
  .page { padding: 0 1.4rem 28px; }
  .site-header { padding: 0 1.4rem; }
}

/* ================================================================
   PHONE LAYER
   Applied only when the device is both touch and physically small, so a
   narrow desktop window keeps the desktop layout. Type and spacing only —
   the structure of every page is identical to desktop.
   ================================================================ */
html.is-phone .hero {
  padding: 8px 0 44px;
}
/* The name is the loudest thing on the screen. On a phone it can afford to
   be much larger relative to the viewport, and it wraps onto two lines
   instead of shrinking to fit one. */
html.is-phone .hero-name {
  font-size: clamp(38px, 13.5vw, 68px);
  line-height: 0.98;
  letter-spacing: -0.03em;
  white-space: normal;
}
html.is-phone .hero-name .line,
html.is-phone .hero-name .line > span {
  display: block;
  white-space: normal;
}
html.is-phone .hero-role {
  margin-top: 18px;
  font-size: 12px;
  letter-spacing: 0.16em;
}
/* --hero-w is measured from the desktop name line; on a phone the copy
   should simply run the full width of the screen. */
html.is-phone .hero-desc {
  max-width: none !important;
  font-size: 16px;
  line-height: 1.6;
}
html.is-phone .hero-desc br { display: none; }
html.is-phone .hero-availability { margin-top: 26px; }

/* section headings and lede */
html.is-phone .section { padding-top: 64px; }
html.is-phone .section-head { margin-bottom: 30px; }
html.is-phone .section-head h2 { font-size: clamp(26px, 8.5vw, 40px); }
html.is-phone .services-lede {
  max-width: none;
  font-size: 15.5px;
  line-height: 1.62;
  margin-bottom: 30px;
}

/* cards: a little more room to breathe, a little less type */
html.is-phone .service-card { padding: 26px 22px 28px; }
html.is-phone .service-card p,
html.is-phone .brief-block p { font-size: 14px; line-height: 1.6; }
html.is-phone .testimonial { padding: 24px 22px 26px; }
html.is-phone .testimonial blockquote { font-size: 15px; }

/* case study head and facts */
html.is-phone .case-head { margin-bottom: 20px; }
html.is-phone .case-head h1 { font-size: clamp(22px, 7.5vw, 34px); }
html.is-phone .brief-facts {
  grid-template-columns: 1fr 1fr;
  gap: 20px 26px;
  margin-bottom: 26px;
}
html.is-phone .brief-fact dd { font-size: 15px; }

/* the big vertical gaps read as empty on a small screen */
html.is-phone #contacts { padding-top: 90px; }
html.is-phone .case-brief + #work,
html.is-phone .case-gallery + #work { padding-top: 80px; }
html.is-phone .case-strip { margin-bottom: 26px; }
html.is-phone .site-footer { margin-top: 56px; }

/* the opening screen is taller than a phone viewport anyway — let it size
   to its content rather than forcing extra empty space above the fold */
html.is-phone .first-screen { min-height: 0; }

/* first gallery frame: visible from the first paint, never waits on a scroll */
.case-gallery figure.is-first { opacity: 1; }