/* ByCoopr site styles
   Colors, type and spacing live in the tokens below so the look is easy to tweak. */

:root {
  --ease-cine: cubic-bezier(0.16, 1, 0.3, 1);
  /* Midnight: near-black and charcoal carry the page, off-white for type,
     electric blue only where it matters, ice blue for light and reflections */
  color-scheme: dark;
  --bg: #0a0d12;
  --card: #171a23;
  --card-hover: #252a36;
  --surface: #171a23;
  --surface-2: #252a36;
  --text: #f3f5f7;
  --text-2: #9aa5b4;
  --text-3: #808a99;
  --line: rgba(245, 245, 247, 0.08);
  --line-strong: rgba(245, 245, 247, 0.14);
  --accent: #3455ff;
  --accent-hover: #4865ff;
  --accent-bright: #a8c5e8;
  --accent-soft: rgba(52, 85, 255, 0.14);
  /* blue as text is too dim on midnight, so links and active text use ice blue */
  --link: #a8c5e8;
  --ice: #a8c5e8;
  /* cool hero tones */
  --navy: #111a27;
  --graphite: #1b2029;
  --slate: #2c3440;
  --steel: #243b56;
  --ink: #0b0d12;
  --ink-2: #171a23;
  --ink-3: #252a36;
  --glass: rgba(23, 26, 35, 0.6);
  --glass-edge: rgba(245, 245, 247, 0.12);
  --radius-lg: 28px;
  --radius-md: 20px;
  --radius-sm: 12px;
  /* flat by default: depth is kept for the phone, glass and floating pieces only */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-float: 0 2px 6px rgba(0, 0, 0, 0.3), 0 20px 50px rgba(0, 0, 0, 0.45);
  /* Apple's system font (SF Pro) on Macs and iPhones, Inter everywhere else: the look Cooper
     approved in the preview (2026-10-29). Roboto Mono Medium for small labels. The earlier
     pick was "Satoshi" for --font and "Clash Display" for --display, loaded from Fontshare
     in head() in build.py. */
  --font: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
  --display: var(--font);
  --mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --max: 1180px;
  --gutter: clamp(16px, 4vw, 40px);
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* The pointer is a cartoon glove (assets/img/cursor-hand.png, hotspot at the fingertip).
   Every clickable thing uses var(--hand); the plain hand is the fallback. */
:root { --hand: url("../img/cursor-hand.png") 6 1, pointer; }
@supports (cursor: -webkit-image-set(url("../img/cursor-hand.png") 1x) 6 1, pointer) {
  :root { --hand: -webkit-image-set(url("../img/cursor-hand.png") 1x, url("../img/cursor-hand@2x.png") 2x) 6 1, pointer; }
}
a[href], button:not(:disabled), label[for], summary, select, [role="button"] { cursor: var(--hand); }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* soft blue haze that sits behind the whole site */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(38% 32% at 12% 8%, rgba(168, 197, 232, 0.05), transparent 70%),
    radial-gradient(34% 30% at 92% 30%, rgba(52, 85, 255, 0.04), transparent 70%),
    radial-gradient(40% 36% at 30% 95%, rgba(168, 197, 232, 0.04), transparent 70%);
  filter: blur(40px);
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button, input, textarea { font: inherit; color: inherit; }
::selection { background: rgba(52, 85, 255, 0.45); color: #fff; }
:focus-visible { outline: 2px solid var(--accent-bright); outline-offset: 3px; border-radius: 8px; }

.container {
  width: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

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

/* ---------- Type ---------- */

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* small labels and numbers use the mono face */
.badge, .crumbs, .meta span, .next-card small, .ph, .chat-note, .footer-bottom,
.reel-caption, .chat-head .status { font-family: var(--mono); font-weight: 500; }

.display {
  font-family: var(--display);
  font-size: clamp(46px, 8.4vw, 104px);
  font-weight: 500;
  line-height: 1.0;
  letter-spacing: -0.03em;
  margin: 0;
  text-wrap: balance;
}

.h2 {
  font-family: var(--display);
  font-size: clamp(34px, 5.2vw, 60px);
  font-weight: 500;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
  text-wrap: balance;
}

.h3 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
}

.lead {
  font-size: clamp(18px, 2vw, 22px);
  color: var(--text-2);
  line-height: 1.45;
  margin: 0;
}

.muted { color: var(--text-2); }

.text-gradient {
  background: linear-gradient(90deg, var(--accent) 0%, var(--accent-bright) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------- Buttons ---------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 0;
  overflow: hidden;
  font-size: 15px;
  font-weight: 500;
  cursor: var(--hand);
  /* a hairline outer stroke, a soft lift, and a faint top highlight */
  --stroke: var(--line-strong);
  --lift: rgba(0, 0, 0, 0.35);
  --top: rgba(255, 255, 255, 0.1);
  box-shadow: 0 0 0 1px var(--stroke), 0 1px 2px var(--lift), 0 6px 16px -6px var(--lift), inset 0 1px 0 var(--top);
  transition: background-color 0.2s, transform 0.2s, box-shadow 0.25s, color 0.2s;
  white-space: nowrap;
}
.btn:hover { box-shadow: 0 0 0 1px var(--stroke), 0 2px 4px var(--lift), 0 10px 22px -8px var(--lift), inset 0 1px 0 var(--top); }
.btn:active { transform: scale(0.98); }

/* shine that wipes across on hover */
.btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.42) 48%, rgba(255, 255, 255, 0.42) 52%, transparent 70%);
  translate: -120% 0;
  pointer-events: none;
}
.btn:hover::after { translate: 120% 0; transition: translate 1.15s cubic-bezier(0.3, 0, 0.2, 1); }

/* the main call to action: a thin band of light that travels around its edge */
@property --glow-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.btn-glow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1.5px;
  background: conic-gradient(from var(--glow-angle), transparent 0deg, transparent 230deg, rgba(160, 180, 255, 0.6) 290deg, #fff 330deg, rgba(160, 180, 255, 0.6) 350deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: glow-spin 3.6s linear infinite;
  pointer-events: none;
}
@keyframes glow-spin { to { --glow-angle: 360deg; } }

.btn-primary { background: var(--accent); color: #fff; --stroke: rgba(168, 197, 232, 0.28); --lift: rgba(52, 85, 255, 0.28); --top: rgba(255, 255, 255, 0.22); }
.btn-primary:hover { background: var(--accent-hover); }

/* secondary: a quiet charcoal pill */
.btn-ghost { background: var(--card); color: var(--text); }
.btn-ghost:hover { background: var(--card-hover); }
.btn-ghost::after { background: linear-gradient(105deg, transparent 30%, rgba(245, 245, 247, 0.1) 48%, rgba(245, 245, 247, 0.1) 52%, transparent 70%); }

.btn-ink { background: var(--card-hover); color: var(--text); }
.btn-ink:hover { background: #2e3442; }

.btn-sm { height: 36px; padding: 0 15px; font-size: 14px; }

/* ---------- Navigation ----------
   Two states. At the top of the page it is a spacious, transparent header.
   Scrolling down condenses it into a compact glass bar (.compact); scrolling
   up opens it back out. main.js toggles the classes. */

.nav {
  --nav-ease: cubic-bezier(0.22, 1, 0.36, 1);
  position: fixed;
  inset: 0 0 auto;
  z-index: 50;
  pointer-events: none;
  color: var(--text);
}
/* a soft fade behind the open header once the page has scrolled, so links stay readable */
.nav::before {
  content: "";
  position: absolute;
  inset: 0 0 -28px;
  background: linear-gradient(var(--nav-fade, var(--bg)) 40%, transparent);
  opacity: 0;
  transition: opacity 0.4s ease;
}
.nav.scrolled:not(.compact)::before { opacity: 0.92; }

.nav-inner {
  position: relative;
  pointer-events: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  width: min(calc(100% - 2 * var(--gutter)), var(--max));
  height: 80px;
  margin: 0 auto;
  padding: 0 2px;
  transition: width 0.65s var(--nav-ease), height 0.65s var(--nav-ease), padding 0.65s var(--nav-ease), translate 0.65s var(--nav-ease);
}
.nav-inner > * { position: relative; }
/* the glass is its own element, first in the bar, so it can fade in and out
   while the backdrop blur keeps working (a blur on a ::before layer is ignored) */
.nav-inner > .nav-glass {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: rgba(23, 26, 35, 0.62);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 0 0 1px var(--line), inset 0 1px 0 rgba(245, 245, 247, 0.06), 0 10px 30px -18px rgba(0, 0, 0, 0.7);
  opacity: 0;
  scale: 1.015 1.08;
  transition: opacity 0.45s ease, scale 0.65s var(--nav-ease), background-color 0.35s;
}
.nav.compact .nav-inner {
  width: min(calc(100% - 24px), 700px);
  height: 56px;
  padding: 0 8px 0 12px;
  translate: 0 12px;
}
.nav.compact .nav-glass { opacity: 1; scale: 1; }

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  justify-self: start;
  font-family: var(--display);
  font-weight: 500;
  font-size: 19px;
  letter-spacing: -0.03em;
}
.brand img {
  width: 34px;
  height: 34px;
  /* the logo is a cutout on a transparent background, so no badge or shadow */
  object-fit: contain;
  transition: width 0.65s var(--nav-ease), height 0.65s var(--nav-ease);
}
.nav.compact .brand img { width: 30px; height: 30px; }

.nav-links { display: flex; gap: clamp(20px, 3vw, 36px); font-size: 15px; font-weight: 500; }
.nav-links a {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 0;
  color: var(--text-2);
  transition: color 0.25s;
}
/* underline draws in from the left on hover and leaves to the right */
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.45s var(--nav-ease);
}
.nav-links a:hover { color: var(--text); }
.nav-links a:hover::after { transform: scaleX(1); transform-origin: left; }
/* the current page gets a small cobalt square, like a studio index mark */
.nav-links a[aria-current], .nav-menu a[aria-current] { color: var(--text); }
.nav-links a[aria-current]::before, .nav-menu a[aria-current]::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 1.5px;
  background: var(--accent);
}

.nav-cta { justify-self: end; gap: 6px; }
.nav-cta .arr { position: relative; display: inline-grid; width: 12px; height: 12px; overflow: hidden; }
.nav-cta .arr svg { grid-area: 1 / 1; transition: translate 0.45s var(--nav-ease); }
.nav-cta .arr svg:last-child { translate: -110% 110%; }
.nav-cta:hover .arr svg:first-child { translate: 110% -110%; }
.nav-cta:hover .arr svg:last-child { translate: 0 0; }

.nav-toggle {
  display: none;
  justify-self: end;
  position: relative;
  width: 40px;
  height: 40px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  cursor: var(--hand);
}
.nav-toggle span {
  position: absolute;
  left: 11px;
  right: 11px;
  height: 1.5px;
  border-radius: 2px;
  background: currentColor;
  transition: translate 0.4s var(--nav-ease), rotate 0.4s var(--nav-ease);
}
.nav-toggle span:first-child { translate: 0 -4px; }
.nav-toggle span:last-child { translate: 0 4px; }
.nav.open .nav-toggle span:first-child { translate: 0 0; rotate: 45deg; }
.nav.open .nav-toggle span:last-child { translate: 0 0; rotate: -45deg; }

.nav-menu {
  position: absolute;
  top: calc(100% + 8px);
  left: 12px;
  right: 12px;
  display: grid;
  gap: 18px;
  padding: 18px 20px 20px;
  border-radius: 20px;
  background: rgba(23, 26, 35, 0.88);
  backdrop-filter: blur(20px) saturate(150%);
  -webkit-backdrop-filter: blur(20px) saturate(150%);
  box-shadow: 0 0 0 1px var(--line), 0 20px 40px -20px rgba(0, 0, 0, 0.7);
  pointer-events: auto;
  opacity: 0;
  visibility: hidden;
  translate: 0 -8px;
  filter: blur(6px);
  transition: opacity 0.3s ease, translate 0.45s var(--nav-ease), filter 0.3s ease, visibility 0s 0.45s;
}
.nav.compact .nav-menu { top: calc(100% + 20px); }
.nav.open .nav-menu { opacity: 1; visibility: visible; translate: 0 0; filter: none; transition: opacity 0.3s ease, translate 0.45s var(--nav-ease), filter 0.3s ease; }
.nav-menu nav { display: grid; }
.nav-menu nav a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 1px solid var(--line);
  font-family: var(--display);
  font-size: 26px;
  letter-spacing: -0.03em;
}
.nav-menu .nav-cta { justify-self: stretch; }

@media (max-width: 760px) {
  .nav-inner { grid-template-columns: 1fr auto; height: 68px; }
  .nav.compact .nav-inner { height: 54px; }
  .nav-links, .nav-inner > .nav-cta { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-glass { opacity: 1; scale: 1; }
}
@media (min-width: 761px) { .nav-menu { display: none; } }

/* ---------- Bottom edge blur ----------
   A soft blur fixed to the bottom of the screen, so content melts away as it
   scrolls out. Four stacked layers, each blurring harder and masked to a
   narrower band, build a smooth ramp instead of a hard line. */

.edge-blur {
  position: fixed;
  inset: auto 0 0;
  z-index: 40;
  height: clamp(56px, 9vh, 96px);
  pointer-events: none;
  /* slow to come back, quicker to clear */
  transition: opacity 1.2s ease;
}
/* cleared once the footer's last line is on screen, so it never sits over it */
.edge-blur.off { opacity: 0; transition-duration: 0.5s; }
.edge-blur i { position: absolute; inset: 0; }
.edge-blur i:nth-child(1) { backdrop-filter: blur(1px); -webkit-backdrop-filter: blur(1px); mask: linear-gradient(transparent 0%, #000 30%, #000 100%); -webkit-mask: linear-gradient(transparent 0%, #000 30%, #000 100%); }
.edge-blur i:nth-child(2) { backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); mask: linear-gradient(transparent 25%, #000 55%, #000 100%); -webkit-mask: linear-gradient(transparent 25%, #000 55%, #000 100%); }
.edge-blur i:nth-child(3) { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); mask: linear-gradient(transparent 50%, #000 80%, #000 100%); -webkit-mask: linear-gradient(transparent 50%, #000 80%, #000 100%); }
.edge-blur i:nth-child(4) { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); mask: linear-gradient(transparent 70%, #000 100%); -webkit-mask: linear-gradient(transparent 70%, #000 100%); }

/* ---------- Dots header (NAV_STYLE = "morph" in build.py) ----------
   One glass pill. At rest it is the logo and three looping typing dots; on hover (or a
   tap) it stretches open from the middle into the classic bar, the dots
   shrink away and the logo, links and button blur in as the pill widens. */

.nav-morph::before { display: none; }
.nav-morph .nav-inner, .nav-morph.compact .nav-inner { display: flex; justify-content: center; align-items: center; width: 100%; height: 80px; padding: 0; translate: none; pointer-events: none; }
.nav-pill {
  --open-w: min(640px, calc(100vw - 24px));
  position: relative;
  width: 114px;
  height: 52px;
  border-radius: 999px;
  overflow: hidden;
  pointer-events: auto;
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(21, 25, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 8px 24px -12px rgba(21, 25, 34, 0.3);
  transition: width 0.28s cubic-bezier(0.34, 1.2, 0.5, 1), height 0.26s cubic-bezier(0.34, 1.2, 0.5, 1), box-shadow 0.2s;
}
.nav-morph.open .nav-pill { width: var(--open-w); height: 56px; transition: width 0.42s cubic-bezier(0.34, 1.32, 0.5, 1), height 0.38s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.3s; box-shadow: inset 0 0 0 1px rgba(21, 25, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 14px 34px -16px rgba(21, 25, 34, 0.35); }
/* the menu is laid out at full width and centred, so the widening pill uncovers it from the middle out */
.nav-pill-menu {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: var(--open-w);
  height: 100%;
  padding: 0 10px 0 14px;
  translate: -50% 0;
  opacity: 0;
  filter: blur(8px);
  scale: 0.96;
  pointer-events: none;
  transition: opacity 0.1s ease, filter 0.1s ease, scale 0.15s ease;
}
.nav-morph.open .nav-pill-menu { opacity: 1; filter: none; scale: 1; pointer-events: auto; transition: opacity 0.26s ease 0.08s, filter 0.26s ease 0.08s, scale 0.42s cubic-bezier(0.34, 1.4, 0.5, 1) 0.05s; }
.nav-morph .nav-links { display: flex; }
.nav-morph .brand img { width: 30px; height: 30px; }
/* the logo rides the pill's left edge, so as the pill opens it slides straight
   into the brand spot and stands in for the menu's own logo */
.nav-pill-logo { position: absolute; left: 14px; top: 50%; width: 30px; height: 30px; margin-top: -15px; object-fit: contain; pointer-events: none; z-index: 1; }
.nav-morph .brand img { visibility: hidden; }
/* the dots button covers the whole resting pill so a tap anywhere opens it */
.nav-morph .nav-dots {
  position: absolute;
  inset: 0;
  width: auto;
  height: 100%;
  margin: 0;
  padding: 0 0 0 44px;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  opacity: 1;
  scale: 1;
  pointer-events: auto;
  transform-origin: 75% 50%;
  cursor: var(--hand);
  transition: opacity 0.2s ease 0.08s, scale 0.34s cubic-bezier(0.34, 1.6, 0.5, 1) 0.08s, filter 0.2s ease 0.08s;
}
.nav-morph.open .nav-dots { opacity: 0; scale: 0.5; filter: blur(4px); pointer-events: none; transition: opacity 0.12s ease, scale 0.2s ease, filter 0.12s ease; }
@media (max-width: 760px) {
  .nav-morph .nav-inner, .nav-morph.compact .nav-inner { height: 68px; }
  .nav-morph .brand span { display: none; }
  .nav-morph .nav-links { gap: 18px; }
}

/* ---------- Icon header (NAV_STYLE = "icons" in build.py) ----------
   Four pill tiles spread evenly across the top: the @bycoopr handle,
   Work, About and Request a project. Same row on phones, just tighter. */

.nav-icons .nav-inner { display: block; height: 80px; transition: translate 0.65s var(--nav-ease); }
.nav-icons.compact .nav-inner { width: min(calc(100% - 2 * var(--gutter)), var(--max)); height: 80px; padding: 0 2px; translate: none; }
.nav-row { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 680px; margin: 0 auto; }
.nav-tile {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  min-width: 62px;
  padding: 0 16px;
  border-radius: 999px;
  color: var(--text);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(21, 25, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px -10px rgba(21, 25, 34, 0.25);
  transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.25s, color 0.25s;
}
.nav-tile svg { width: 26px; height: 26px; }
.nav-tile:hover { scale: 1.06; background: rgba(255, 255, 255, 0.85); }
.nav-tile[aria-current] { color: var(--accent); }
.nav-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nav-handle { font-family: var(--display); font-size: 17px; font-weight: 500; letter-spacing: -0.02em; padding: 0 16px 0 12px; }
.nav-handle img { width: 26px; height: 26px; object-fit: contain; }
.nav-ask { color: #fff; background: var(--accent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 8px 20px -10px rgba(52, 85, 255, 0.6); }
.nav-ask:hover { background: #2a4af0; }
/* scrolled away from the top, the tiles fold into the middle and a pill of
   typing dots takes their place; hovering or tapping it opens them back up */
.nav-row { position: relative; }
.nav-icons .nav-tile { transition: scale 0.45s cubic-bezier(0.22, 1, 0.36, 1), translate 0.6s var(--ease-cine), opacity 0.35s ease, filter 0.35s ease, background-color 0.25s, color 0.25s; }
.nav-icons.collapsed:not(.peek) .nav-tile { translate: var(--cx, 0) 0; scale: 0.4; opacity: 0; filter: blur(6px); pointer-events: none; }
.nav-dots {
  position: absolute;
  left: 50%;
  top: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 72px;
  height: 46px;
  margin: -23px 0 0 -36px;
  border: 0;
  border-radius: 999px;
  cursor: var(--hand);
  background: rgba(255, 255, 255, 0.62);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow: inset 0 0 0 1px rgba(21, 25, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 6px 18px -10px rgba(21, 25, 34, 0.25);
  opacity: 0;
  scale: 0.6;
  pointer-events: none;
  transition: opacity 0.3s ease, scale 0.5s cubic-bezier(0.34, 1.4, 0.5, 1);
}
.nav-icons.collapsed:not(.peek) .nav-dots { opacity: 1; scale: 1; pointer-events: auto; transition-delay: 0.12s; }
.nav-dots i { width: 7px; height: 7px; border-radius: 50%; background: var(--text-2); animation: bounce 1.2s infinite; }
.nav-dots i:nth-child(2) { animation-delay: 0.15s; }
.nav-dots i:nth-child(3) { animation-delay: 0.3s; }
.nav-dots:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

@media (max-width: 760px) {
  .nav-icons .nav-inner, .nav-icons.compact .nav-inner { height: 68px; width: calc(100% - 24px); }
  .nav-tile { height: 42px; min-width: 52px; padding: 0 12px; }
  .nav-handle { font-size: 15px; gap: 7px; padding: 0 12px 0 9px; }
  .nav-handle img { width: 22px; height: 22px; }
  .nav-dots { height: 42px; margin-top: -21px; }
}

/* ---------- Sections ---------- */

section { padding: clamp(72px, 10vw, 128px) 0; }

.section-head {
  display: grid;
  gap: 16px;
  max-width: 760px;
  margin-bottom: clamp(36px, 5vw, 56px);
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; justify-items: center; }

/* ---------- Hero ----------
   Copy at the top, then a stage where glass project cards float in 3D in front
   of a giant wordmark. Soft blue light rises behind the cards and fades back to
   midnight at the bottom so it flows straight into the showreel. */

.hero {
  position: relative;
  isolation: isolate;
 /* a full screen with the title dead center and the cards floating around it */
  display: grid;
  align-items: center;
  min-height: max(100svh, 680px);
  padding: 84px 0;
  text-align: center;
  overflow: hidden;
}
/* sits above the cards but lets clicks through to them */
.hero-inner { position: relative; z-index: 2; display: grid; justify-items: center; gap: 22px; pointer-events: none; }
.hero-inner > * { pointer-events: auto; }

/* midnight into deep navy around the cards, then back to midnight */
.hero-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  overflow: hidden;
  background: linear-gradient(180deg, #0a0d12 0%, #0b0f16 30%, #0e1520 50%, #111a27 66%, #0f1722 82%, #0a0d12 100%);
}
/* several very large radial lights, blurred together so no edge or circle shows */
.hero-glow {
  position: absolute;
  inset: -15%;
  background:
    radial-gradient(60% 32% at 50% 4%, rgba(243, 245, 247, 0.04), transparent 70%),
    radial-gradient(70% 40% at 50% 64%, rgba(36, 59, 86, 0.55), transparent 72%),
    radial-gradient(34% 22% at 50% 60%, rgba(168, 197, 232, 0.07), transparent 70%),
    radial-gradient(30% 20% at 26% 58%, rgba(44, 52, 64, 0.35), transparent 70%),
    radial-gradient(30% 20% at 74% 54%, rgba(44, 52, 64, 0.35), transparent 70%),
    radial-gradient(90% 26% at 50% 106%, rgba(10, 13, 18, 1), transparent 70%);
  filter: blur(90px);
  animation: glow-drift 38s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes glow-drift {
  0% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(2.5%, -1.5%, 0) scale(1.04); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.02) rotate(1deg); }
}
/* settle back to midnight before the showreel so there is no seam */
.hero-bg::before {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 22%;
  z-index: 1;
  background: linear-gradient(transparent, var(--bg) 85%);
}
/* fine grain over everything to soften banding */
.hero-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.08;
  pointer-events: none;
}
/* lets the nav switch to its dark style over the lower half of the hero */
.night-zone { position: absolute; left: 0; right: 0; bottom: 0; height: 38%; pointer-events: none; }

.hero .lead { max-width: 440px; font-size: clamp(15px, 1.3vw, 17px); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 8px; }
/* a touch smaller than the standard button, and they swell on hover */
.hero-actions .btn { height: 40px; padding: 0 18px; font-size: 14px; transition: background-color 0.2s, transform 0.2s, box-shadow 0.25s, color 0.2s, scale 0.45s cubic-bezier(0.22, 1, 0.36, 1); }
.hero-actions .btn:hover { scale: 1.08; }

/* the stage: a layer over the whole hero that the cards float in */
.hero-stage {
  --mx: 0; --my: 0; --sp: 0;
  position: absolute;
  inset: 0;
  z-index: 1;
  width: min(1440px, 100%);
  margin: 0 auto;
  perspective: 1500px;
  perspective-origin: 50% 50%;
  transform-style: preserve-3d;
}

/* ---------- Hero entrance ----------
   About 1.8s in overlapping beats: the title blurs in word by word with the
   sunglasses playing, the cards glide in from depth around it, then the
   nav, copy and buttons settle. Only transforms, opacity and a little blur,
   so nothing shifts and the page is usable from the first frame. */
/* each card is four nested layers so placement, scroll, cursor and idle motion never fight */
.hc {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  transform-style: preserve-3d;
  transform: translate3d(0, 0, var(--z)) rotateZ(var(--rz)) rotateY(var(--ry)) rotateX(var(--rx, 0deg));
  border-radius: 26px;
  animation: hc-in 1.4s var(--ease-cine) backwards;
  animation-delay: var(--in, 0.4s);
}
.hc:focus-visible { outline: none; }
.hc:focus-visible .hc-card { box-shadow: 0 0 0 3px var(--accent), 0 30px 60px -24px rgba(0, 0, 0, 0.7); }
/* each card starts deeper and tipped back, then settles into its idle drift */
/* the cards resolve out of a heavy blur, top of the page first, with only a small lift */
@keyframes hc-in {
  0% { opacity: 0; filter: blur(24px); translate: 0 24px; scale: 0.96; }
  60% { opacity: 1; }
  100% { opacity: 1; filter: blur(0); translate: 0 0; scale: 1; }
}

.hc-scroll, .hc-mouse, .hc-idle { display: block; transform-style: preserve-3d; }
.hc-scroll {
  transform: translate3d(0, calc(var(--sp) * var(--sy, 120) * -1px), calc(var(--sp) * var(--sz, 80) * 1px)) rotateX(calc(var(--sp) * var(--srx, 8) * 1deg));
}
.hc-mouse {
  transform: translate3d(calc(var(--mx) * var(--d) * 22px), calc(var(--my) * var(--d) * 14px), 0) rotateY(calc(var(--mx) * var(--d) * 6deg)) rotateX(calc(var(--my) * var(--d) * -5deg));
}
.hc-idle { animation: hc-float var(--t, 16s) ease-in-out infinite; animation-delay: var(--td, 0s); }
@keyframes hc-float {
  0%, 100% { transform: translate3d(0, 0, 0) rotateX(0deg) rotateY(0deg) rotateZ(0deg); }
  30% { transform: translate3d(var(--ix, 8px), var(--iy, -14px), 12px) rotateX(var(--irx, 3deg)) rotateY(var(--iry, -4deg)) rotateZ(0.6deg); }
  65% { transform: translate3d(calc(var(--ix, 8px) * -0.7), calc(var(--iy, -14px) * 0.4), -8px) rotateX(calc(var(--irx, 3deg) * -0.8)) rotateY(calc(var(--iry, -4deg) * -0.6)) rotateZ(-0.4deg); }
}

/* liquid glass frame: the work inside stays crisp */
.hc-card {
  --hx: 0; --hy: 0;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  padding: 9px 9px 12px;
  border-radius: 26px;
  background: linear-gradient(155deg, rgba(243, 245, 247, 0.1), rgba(243, 245, 247, 0.03) 45%, rgba(168, 197, 232, 0.06));
  backdrop-filter: blur(18px) saturate(140%);
  -webkit-backdrop-filter: blur(18px) saturate(140%);
  box-shadow:
    inset 0 1px 0 rgba(245, 245, 247, 0.16),
    inset 0 0 0 1px rgba(245, 245, 247, 0.05),
    inset 0 -10px 24px -14px rgba(168, 197, 232, 0.18),
    0 2px 4px rgba(0, 0, 0, 0.25),
    0 26px 50px -22px rgba(0, 0, 0, 0.7),
    0 60px 90px -50px rgba(0, 0, 0, 0.6);
  transition: transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.6s;
  transform-style: preserve-3d;
}
/* glossy edge: a thin light rim, brightest on the top left */
.hc-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(140deg, rgba(245, 245, 247, 0.42), rgba(245, 245, 247, 0.05) 35%, rgba(168, 197, 232, 0.04) 65%, rgba(168, 197, 232, 0.32));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  pointer-events: none;
}
/* soft reflection that slides with the tilt */
.hc-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(245, 245, 247, 0.12) 48%, transparent 60%);
  background-size: 250% 100%;
  background-position: calc(50% + var(--hx) * 40%) 0;
  opacity: 0.6;
  mix-blend-mode: soft-light;
  pointer-events: none;
  transition: opacity 0.5s, background-position 0.3s;
}
.hc:hover .hc-card {
  transform: translateZ(60px) rotateX(calc(var(--hy) * -8deg)) rotateY(calc(var(--hx) * 10deg));
  transition-duration: 0.5s;
}
.hc:hover .hc-card::after { opacity: 1; }

.hc-media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 18px;
  background: var(--ink);
  box-shadow: 0 0 0 1px rgba(245, 245, 247, 0.06);
}
.hc-media img, .hc-video { width: 100%; height: 100%; object-fit: cover; }
.hc-video { position: absolute; inset: 0; }
.hc-meta { min-width: 0; overflow: hidden; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; padding: 0 6px; text-align: left; color: var(--text); }
.hc-meta b { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-meta small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }

/* placeholder art until real covers are added */
.hc-art {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: space-between;
  padding: 7% 8%;
  text-align: left;
  color: #fff;
  background: var(--art);
}
.hc-art small { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase; opacity: 0.75; }
.hc-art b { font-family: var(--display); font-weight: 500; font-size: clamp(20px, 2.4vw, 34px); line-height: 1; letter-spacing: -0.02em; }
.hc-art em { font-style: normal; font-family: var(--mono); font-size: 9px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; }

/* placement: position, size, base rotation, depth, and how strongly each one reacts */
/* the cards keep just their title so the frame stays quiet */
.hc-meta small { display: none; }

/* placement: four cards around the title. The portrait and square cards lean in
   from the upper sides, the two landscape cards sit lower and in front. */
.hc-1 { --x: 9%; --y: 34%; --w: 13%; --rz: -6deg; --ry: 18deg; --rx: 4deg; --z: 50px; --d: 0.8; --t: 18s; --ix: 8px; --iy: -14px; --irx: 3deg; --iry: -4deg; --sy: 100; --sz: 40; --srx: 6; --in: 0.42s;
  --art: radial-gradient(80% 70% at 80% 0%, rgba(168, 197, 232, 0.22), transparent 60%), linear-gradient(160deg, #111a27, #1b2029 60%, #243b56); }
.hc-2 { --x: 65%; --y: 63%; --w: 22%; --rz: 3deg; --ry: -14deg; --rx: 6deg; --z: 110px; --d: 1.3; --t: 20s; --td: -4s; --ix: -6px; --iy: -12px; --irx: -2deg; --iry: 3deg; --sy: 170; --sz: 120; --srx: 10; --in: 0.95s;
  --art: radial-gradient(70% 80% at 20% 0%, rgba(243, 245, 247, 0.14), transparent 60%), linear-gradient(160deg, #2c3440, #1b2029 70%, #243b56); }
.hc-3 { --x: 75%; --y: 12%; --w: 12%; --rz: 6deg; --ry: -18deg; --rx: 4deg; --z: 70px; --d: 0.9; --t: 21s; --td: -9s; --ix: -8px; --iy: -12px; --irx: 3deg; --iry: 4deg; --sy: 120; --sz: 50; --srx: 6; --in: 0.28s;
  --art: radial-gradient(90% 70% at 70% 100%, rgba(168, 197, 232, 0.24), transparent 60%), linear-gradient(170deg, #0a0d12, #1b2029 70%, #243b56); }
.hc-4 { --x: 15%; --y: 68%; --w: 16%; --rz: -3deg; --ry: 14deg; --rx: 5deg; --z: 90px; --d: 1.1; --t: 19s; --td: -6s; --ix: 6px; --iy: -12px; --irx: -2deg; --iry: -3deg; --sy: 140; --sz: 90; --srx: 8; --in: 1.05s;
  --art: radial-gradient(70% 80% at 80% 0%, rgba(168, 197, 232, 0.2), transparent 60%), linear-gradient(160deg, #111a27, #1b2029 70%, #243b56); }

/* ---------- Light hero (HERO_THEME = "light" in build.py) ----------
   Same layout and motion on a cool off-white gradient with dark type. The
   showreel and everything below stay on the same off-white. */

body:has(.hero-light) { background: #f0f2f4; }
.hero-light { background: none; }
.hero-light .hero-bg { background: linear-gradient(180deg, #f4f6f8 0%, #f0f2f4 30%, #e9edf2 52%, #e3e8ee 68%, #e9edf1 84%, #f0f2f4 100%); }
.hero-light .hero-glow {
  background:
    radial-gradient(60% 34% at 50% 4%, rgba(255, 255, 255, 0.9), transparent 70%),
    radial-gradient(70% 40% at 50% 62%, rgba(168, 197, 232, 0.45), transparent 72%),
    radial-gradient(30% 22% at 24% 56%, rgba(255, 255, 255, 0.6), transparent 70%),
    radial-gradient(30% 22% at 76% 52%, rgba(255, 255, 255, 0.6), transparent 70%);
}
.hero-light .hero-bg::after { opacity: 0.05; }
/* the hero badge uses the button face rather than the mono labels */
.hero-light .badge { background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(21, 25, 34, 0.04); }
.hero-light .hc-card {
  background: linear-gradient(155deg, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.36) 45%, rgba(255, 255, 255, 0.5));
  box-shadow:
    inset 0 1px 0 #fff,
    inset 0 0 0 1px rgba(255, 255, 255, 0.5),
    0 2px 4px rgba(21, 25, 34, 0.06),
    0 26px 50px -22px rgba(21, 25, 34, 0.35),
    0 60px 90px -50px rgba(21, 25, 34, 0.3);
}
.hero-light .hc-card::before { background: linear-gradient(140deg, #fff, rgba(255, 255, 255, 0.2) 35%, rgba(255, 255, 255, 0.1) 65%, rgba(255, 255, 255, 0.8)); }
.hero-light .hc-meta small { color: var(--text-2); }

/* small laptops and tablets: the landscape card sits lower and rises less so it clears the buttons */
@media (min-width: 761px) and (max-width: 1200px) {
  .hc-2 { --x: 67%; --y: 68%; --sy: 60; }
  .hc-4 { --x: 9%; --y: 70%; --w: 19%; --sy: 60; }
}

@media (max-width: 760px) {
  /* phones: two small cards above the title, the two wide ones below the buttons */
  .hero { min-height: max(100svh, 760px); padding: 225px 0; }
  .hero-stage { perspective: 1000px; }
  .hc-1 { --x: 12%; --y: 17%; --w: 24%; }
  /* the bottom cards trail the scroll so they never rise into the buttons */
  .hc-2 { --x: 9%; --y: 70%; --w: 37%; --z: 40px; --rz: -3deg; --ry: 0deg; --sy: -60; --sz: 0; --srx: 4; }
  .hc-4 { --x: 52%; --y: 72.5%; --w: 37%; --z: 40px; --rz: 3deg; --ry: 0deg; --sy: -60; --sz: 0; --srx: 4; }
  .hc-3 { --x: 64%; --y: 18.5%; --w: 24%; }
  /* a shorter shadow so it fades out inside the hero instead of being cut at its bottom edge */
  .hero-light .hc-card {
    box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.5), 0 2px 4px rgba(21, 25, 34, 0.06),
      0 18px 36px -18px rgba(21, 25, 34, 0.3), 0 36px 56px -34px rgba(21, 25, 34, 0.24);
  }
  .hc-1 .hc-art b, .hc-3 .hc-art b { font-size: 12px; }
  .hc-1 .hc-art small, .hc-3 .hc-art small { display: none; }
  .hc-meta { display: none; }
  .hc-card { padding: 7px; border-radius: 20px; }
  .hc-media { border-radius: 14px; }
  .hc-art em { display: none; }
  .hc-art small { font-size: 8px; }
  .hc-art b { font-size: 18px; }
}

.badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-2);
}
.badge .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #30d158;
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.45); }
  70% { box-shadow: 0 0 0 8px rgba(48, 209, 88, 0); }
  100% { box-shadow: 0 0 0 0 rgba(48, 209, 88, 0); }
}

/* ---------- Headline ----------
   "I make cool sh*t." on one line. Each word blurs in left to right, right after the nav,
   and the two o's in "cool" are Cooper's sunglasses animation. */

.headline { display: block; max-width: 100%; font-size: clamp(40px, 5.2vw, 88px); font-weight: 500; line-height: 1; letter-spacing: -0.035em; color: var(--text); white-space: nowrap; }
.headline .m-br { display: none; }
/* phones: "I make" over "cool sh*t." so the title can run much bigger */
@media (max-width: 760px) { .headline { font-size: clamp(38px, 15vw, 82px); line-height: 0.98; } .headline .m-br { display: block; } .hero .lead { max-width: 262px; margin-left: auto; margin-right: auto; text-wrap: balance; } }
@media (max-width: 760px) { .work-item.desktop-only { display: none; } }
.headline .w { display: inline-block; animation: w-in 1.2s var(--ease-cine) backwards; animation-delay: calc(0.22s + var(--n) * 0.09s); }
@keyframes w-in { from { opacity: 0; filter: blur(20px); translate: 0 0.12em; } }
/* sized to stand in for "oo": glasses on the x-height, the smile dipping just under the baseline */
.cool-face { display: inline-block; cursor: var(--hand); width: 1.26em; margin: 0 -0.01em 0 0.01em; vertical-align: -0.37em; }
/* each letter swells and turns accent blue under the cursor, then settles back with a small bounce */
.headline .ch { display: inline-block; cursor: var(--hand); transform-origin: 50% 70%; transition: scale 0.5s cubic-bezier(0.34, 1.7, 0.5, 1), color 0.4s ease; }
@media (hover: hover) {
  .headline .ch:hover { scale: 1.12; color: var(--accent); transition: scale 0.35s cubic-bezier(0.34, 1.5, 0.5, 1), color 0.3s ease; }
}
.cool-face img { display: block; width: 100%; height: auto; aspect-ratio: 320 / 239; }
/* HERO_FACE = "shades": keep only the sunglasses, cropped where the smile starts; they stay on the x-height */
.cool-face.shades { aspect-ratio: 320 / 146; overflow: hidden; vertical-align: -0.05em; }

/* ---------- Showreel that shrinks on scroll ---------- */

.reel-scroll { position: relative; height: 175vh; padding: 0; margin-top: clamp(48px, 10vh, 140px); }
.reel-sticky {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 18px;
  overflow: hidden;
}
.reel-frame {
  /* laid out at the settled size; JS scales it up from there with --s (a transform,
     so the shrink runs on the GPU without re-laying out the page every frame) */
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  aspect-ratio: 16 / 9;
  border-radius: var(--r, 28px);
  overflow: hidden;
  transform: scale(var(--s, 1));
  will-change: transform;
  position: relative;
  z-index: 1;
}
.reel-frame { background: var(--ink); }
.reel-frame .ph, .reel-frame video { width: 100%; height: 100%; aspect-ratio: auto; border-radius: 0; object-fit: cover; }
.reel-caption {
  display: flex;
  justify-content: space-between;
  width: min(1040px, calc(100vw - 2 * var(--gutter)));
  font-size: 13px;
  color: var(--text-3);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: var(--cap, 1);
}

.reel-controls {
  display: flex;
  gap: 10px;
  margin-top: -43px;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
}
.reel-controls { transition: opacity 0.35s ease; }
.reel-controls.show { opacity: 1; pointer-events: auto; }
.reel-controls > * {
  --rise: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  border-radius: 999px;
  border: 0;
  background: rgba(37, 42, 54, 0.72);
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow: inset 0 1px 0 rgba(245, 245, 247, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  /* sits on the video, so it stays light even inside the off-white page */
  color: #f3f5f7;
  --dot: 25px;
}
.reel-controls button { font-size: 14px; font-weight: 500; cursor: var(--hand); transition: background-color 0.25s; }
.reel-controls button:hover { background: rgba(44, 52, 64, 0.85); }
.reel-sound { padding: 0 20px 0 16px; }
.reel-sound > span { gap: 8px; }
.reel-play { width: 50px; }
/* each button carries both icons; the state picks one */
.reel-sound .on, .reel-sound[aria-pressed="true"] .off { display: none; }
.reel-sound[aria-pressed="true"] .on { display: block; }
.reel-play svg:last-child, .reel-play.paused svg:first-child { display: none; }
.reel-play.paused svg:last-child { display: block; }
/* ---------- Liquid pop-in buttons ----------
   Modeled on the video controls on apple.com: a dot rises in (stretched by its
   own speed), squashes as it lands, snaps open into a pill, and the next button
   buds out of its right end and slides into place. The whole pair takes ~0.9s. */

.pop, .reel-controls.show .morph {
  --dot: 25px;
  /* backwards, not both: once it lands the clip is dropped so the shadow shows */
  animation: pop-a 0.6s backwards;
  animation-delay: var(--pd, 0.3s);
}
.pop.bud, .reel-controls.show .morph.bud { animation-name: pop-b; animation-duration: 0.5s; }
.btn-sm.pop { --dot: 18px; --rise: 10px; }
.pop-label, .reel-controls.show .morph > * {
  display: inline-flex;
  align-items: center;
  gap: inherit;
  animation: label-in 0.25s ease-out both;
  animation-delay: calc(var(--pd, 0.3s) + 0.32s);
}
.pop.bud .pop-label, .reel-controls.show .morph.bud > * { animation-delay: calc(var(--pd, 0.3s) + 0.3s); }

@keyframes pop-a {
  0% { opacity: 0; translate: 0 var(--rise, 18px); scale: 0.6 0.95; clip-path: inset(0 calc(50% - var(--dot)) round 999px); animation-timing-function: cubic-bezier(0.2, 0.8, 0.3, 1); }
  26% { opacity: 1; translate: 0 0; scale: 0.94 1.08; clip-path: inset(0 calc(50% - var(--dot)) round 999px); animation-timing-function: ease-in-out; }
  40% { scale: 1.07 0.93; clip-path: inset(0 calc(50% - var(--dot)) round 999px); animation-timing-function: cubic-bezier(0.3, 0, 0.2, 1); }
  72% { scale: 1.03 0.98; clip-path: inset(0 0 round 999px); animation-timing-function: ease-out; }
  86% { scale: 0.99 1.01; }
  100% { opacity: 1; translate: 0 0; scale: 1; clip-path: inset(0 0 round 999px); }
}

@keyframes pop-b {
  0% { opacity: 0; translate: var(--bud, -50px) 0; scale: 0.7; clip-path: inset(0 calc(50% - var(--dot)) round 999px); animation-timing-function: cubic-bezier(0.25, 0.8, 0.3, 1); }
  14% { opacity: 1; }
  45% { clip-path: inset(0 calc(50% - var(--dot)) round 999px); }
  70% { translate: 3px 0; scale: 1.04 0.97; clip-path: inset(0 0 round 999px); animation-timing-function: ease-out; }
  100% { opacity: 1; translate: 0 0; scale: 1; clip-path: inset(0 0 round 999px); }
}

@keyframes label-in { from { opacity: 0; filter: blur(4px); } }

/* ---------- Phone showcase ---------- */

.showcase { position: relative; padding-top: clamp(40px, 6vw, 80px); overflow: hidden; }
.showcase .section-head { margin-bottom: clamp(24px, 4vw, 40px); }

.stage {
  position: relative;
  display: grid;
  place-items: center;
  height: clamp(560px, 62vw, 720px);
  perspective: 1400px;
}
.stage::before {
  content: "";
  position: absolute;
  width: min(760px, 90vw);
  height: 70%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(168, 197, 232, 0.14), rgba(52, 85, 255, 0.08) 60%, transparent);
  filter: blur(40px);
}

.phone {
  --rx: 6deg;
  --ry: -14deg;
  position: relative;
  width: clamp(240px, 26vw, 300px);
  aspect-ratio: 900 / 1840;
  transform: rotateX(var(--rx)) rotateY(var(--ry));
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  filter: drop-shadow(-24px 36px 40px rgba(0, 0, 0, 0.5)) drop-shadow(-6px 10px 12px rgba(0, 0, 0, 0.3));
}
/* the screen sits just inside the frame's opening; the frame image covers its edges */
.phone .frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 2; }
.phone::after {
  /* glass reflection over the screen */
  content: "";
  position: absolute;
  inset: 2.6% 5.6%;
  border-radius: 14% / 6.6%;
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.28) 0%, rgba(255, 255, 255, 0) 30%);
  pointer-events: none;
  z-index: 3;
}

.screen {
  position: absolute;
  inset: 2.3% 5% 2.3% 5%;
  border-radius: 14% / 6.6%;
  overflow: hidden;
  background: #fff;
  color: #111;
  font-size: 11px;
  line-height: 1.3;
  display: flex;
  flex-direction: column;
}
.screen > img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.status { display: flex; justify-content: space-between; align-items: center; padding: 14px 26px 0; height: 46px; font-weight: 600; font-size: 12px; }
.status .icons { display: flex; gap: 4px; align-items: center; }
.status .icons i { display: block; background: #111; border-radius: 2px; }

.ig-top { display: flex; justify-content: space-between; align-items: center; padding: 8px 14px; font-weight: 600; font-size: 15px; }
.ig-top .ico { display: flex; gap: 12px; }
.ig-top .ico span { width: 16px; height: 16px; border: 1.6px solid #111; border-radius: 5px; }
.ig-profile { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; padding: 6px 14px 8px; }
.ig-avatar { width: 64px; height: 64px; border-radius: 50%; background: linear-gradient(160deg, #e9ecf2, #d7dce5); border: 2px solid #fff; box-shadow: 0 0 0 1.5px #d9dde4; display: grid; place-items: center; color: #b4bac5; }
.ig-stats { display: flex; justify-content: space-around; text-align: center; font-size: 10px; color: #555; }
.ig-stats b { display: block; font-size: 13px; color: #111; }
.ig-bio { padding: 0 14px; display: grid; gap: 2px; }
.ig-bio .name { font-weight: 600; }
.ig-bio .envision { font-size: 13px; font-weight: 600; color: var(--accent); }
.ig-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 14px; }
.ig-btns span { height: 24px; border-radius: 7px; background: #efefef; display: grid; place-items: center; font-weight: 600; font-size: 10px; }
.ig-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin-top: 4px; flex: 1; align-content: start; }
.ig-grid span { aspect-ratio: 4 / 5; background: var(--t, linear-gradient(160deg, #eef2f8, #dfe5ee)); }
.ig-tabbar { display: flex; justify-content: space-around; padding: 10px 0 18px; border-top: 1px solid #eee; background: #fff; }
.ig-tabbar span { width: 16px; height: 16px; border: 1.6px solid #111; border-radius: 5px; }

/* liquid glass service cards coming out of the phone */
.glass-card {
  position: absolute;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 18px 12px 12px;
  border-radius: 22px;
  background: linear-gradient(135deg, rgba(37, 42, 54, 0.72), rgba(23, 26, 35, 0.5));
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(245, 245, 247, 0.14),
    inset 0 0 0 1px rgba(245, 245, 247, 0.06),
    0 18px 40px rgba(0, 0, 0, 0.45);
  transform: perspective(700px) rotateY(var(--ty, 0deg)) rotate(var(--r, 0deg));
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.3s;
  animation: bob var(--d, 7s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
}
.glass-card:hover { box-shadow: inset 0 1px 0 rgba(245, 245, 247, 0.2), inset 0 0 0 1px rgba(168, 197, 232, 0.22), 0 22px 50px rgba(0, 0, 0, 0.5); }
.glass-card .gi {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: var(--c, var(--accent));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 4px 12px rgba(0, 0, 0, 0.3);
  flex: none;
}
.glass-card .gt { display: grid; gap: 1px; text-align: left; }
.glass-card .gt b { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.glass-card .gt small { font-size: 13px; color: var(--text-2); }
@keyframes bob { from { translate: 0 0; } to { translate: 0 -10px; } }

/* three Instagram cards: each one plays its preview on the phone */
.glass-card { border: 0; font: inherit; color: inherit; cursor: var(--hand); text-align: left; }
.glass-card .gi { overflow: hidden; background: var(--card-hover); padding: 0; }
.glass-card .gi img { width: 100%; height: 100%; object-fit: cover; }
.glass-card.c2 .gi { background: #00005b; }
.glass-card.c2 .gi img { object-fit: contain; padding: 7px; }
.glass-card:hover, .glass-card[aria-pressed="true"] { transform: perspective(700px) rotateY(0deg) rotate(0deg) scale(1.05); }
.glass-card[aria-pressed="true"] { box-shadow: inset 0 1px 0 rgba(245, 245, 247, 0.2), inset 0 0 0 1.5px rgba(52, 85, 255, 0.45), 0 22px 50px rgba(0, 0, 0, 0.3); }
.glass-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.glass-card.c1 { left: calc(50% - 330px); top: 18%; --r: -4deg; --ty: 14deg; }
.glass-card.c2 { left: calc(50% + 110px); top: 42%; --r: 3deg; --ty: -14deg; --delay: -2s; }
.glass-card.c3 { left: calc(50% - 320px); top: 68%; --r: 2deg; --ty: 12deg; --delay: -4s; }

/* the phone's screen: the profile screenshot with one preview per card stacked over it */
.phone { display: block; cursor: var(--hand); }
.screen > img, .sp { transition: opacity 0.55s ease, filter 0.55s ease, scale 0.7s var(--ease-cine); }
.sp { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: #0b0d12; opacity: 0; filter: blur(10px); scale: 1.04; pointer-events: none; }
.screen.previewing > img { opacity: 0; filter: blur(8px); scale: 0.98; }
.sp.on { opacity: 1; filter: none; scale: 1; }
.sp-bg { position: absolute; inset: -20px; background-size: cover; background-position: center; filter: blur(22px) brightness(0.7) saturate(1.3); }
.sp video { position: relative; width: 100%; aspect-ratio: auto; max-height: 72%; object-fit: contain; }
.sp-fill video { position: absolute; inset: 0; height: 100%; max-height: none; object-fit: cover; }
.sp-cap { position: absolute; left: 10%; right: 10%; bottom: 9%; display: grid; gap: 2px; color: #fff; font-size: 11px; line-height: 1.3; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.sp-cap b { font-size: 12px; }
/* behind-the-scenes stand-in: a little After Effects style comp viewer and timeline */
.sp-bts { position: absolute; inset: 0; display: grid; grid-template-rows: 1fr auto auto; gap: 10px; padding: 20% 8% 38%; background: #1d1f24; }
.sp-viewer { display: grid; place-items: center; border-radius: 6px; background: repeating-conic-gradient(#2a2d33 0 25%, #24272c 0 50%) 0 0 / 14px 14px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); }
.sp-viewer b { font-family: var(--display); font-size: 26px; letter-spacing: 0.02em; color: #3455ff; }
.sp-tl { position: relative; display: grid; gap: 4px; padding: 8px 6px; border-radius: 6px; background: #15171b; }
.sp-tl i { display: block; height: 7px; margin-left: var(--l); width: var(--w); border-radius: 2px; background: var(--c); opacity: 0.85; }
.sp-tl em { position: absolute; top: 2px; bottom: 2px; left: 12%; width: 1.5px; background: #ff5a4e; animation: playhead 3.2s linear infinite paused; }
.sp.on .sp-tl em { animation-play-state: running; }
@keyframes playhead { from { left: 8%; } to { left: 92%; } }
.sp-bts small { font-family: var(--mono); font-size: 8px; letter-spacing: 0.04em; text-transform: uppercase; color: rgba(255, 255, 255, 0.45); text-align: center; }

@media (max-width: 720px) {
  .stage { height: 600px; }
  .glass-card { padding: 9px 14px 9px 9px; border-radius: 18px; gap: 10px; }
  .glass-card .gi { width: 34px; height: 34px; border-radius: 11px; }
  .glass-card .gt b { font-size: 15px; }
  .glass-card .gt small { display: none; }
  .glass-card.c1 { left: 3%; top: 8%; }
  .glass-card.c2 { left: auto; right: 3%; top: 60%; }
  .glass-card.c3 { left: 4%; top: 82%; }
}

/* ---------- Project rows (creatoroly-style) ---------- */

.rows { display: grid; gap: clamp(64px, 9vw, 120px); }

.row {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  gap: clamp(28px, 5vw, 72px);
  align-items: center;
}
.row.flip { grid-template-columns: 1fr 1.15fr; }
.row.flip .window { order: 2; }
.row .text { display: grid; gap: 18px; justify-items: start; min-width: 0; }
.row .text p { margin: 0; color: var(--text-2); font-size: 18px; max-width: 52ch; }
@media (max-width: 860px) {
  .row, .row.flip { grid-template-columns: 1fr; }
  .row.flip .window { order: 0; }
}

.window {
  display: block;
  border-radius: 30px;
  padding: 0 12px 12px;
  background: var(--card);
  transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
a.window:hover { transform: scale(1.01); }
.window .dots { display: flex; gap: 7px; height: 36px; align-items: center; padding-left: 6px; }
.window .dots i { width: 11px; height: 11px; border-radius: 50%; background: #ff5f57; }
.window .dots i:nth-child(2) { background: #febc2e; }
.window .dots i:nth-child(3) { background: #28c840; }
.window .ph { border-radius: 20px; }

.client {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 6px 18px 6px 6px;
  border-radius: 999px;
  background: var(--card);
  font-size: 19px;
  font-weight: 500;
}
.client .av {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--c, linear-gradient(160deg, #2e3442, #252a36));
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.tags { display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  font-size: 15px;
  font-weight: 500;
  background: var(--accent);
  color: #fff;
}
.tag.ink { background: var(--card-hover); color: var(--text); transition: background-color 0.2s; }
.tag.ink:hover { background: #2e3442; }
.tag.soft { background: var(--card); color: var(--text); }

/* ---------- Placeholder media ---------- */

.ph {
  position: relative;
  display: grid;
  place-items: center;
  border-radius: var(--radius-md);
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(168, 197, 232, 0.09), transparent 60%),
    radial-gradient(90% 90% at 90% 100%, rgba(52, 85, 255, 0.07), transparent 60%),
    linear-gradient(160deg, #171a23, #1c202b);
  color: var(--text-3);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  overflow: hidden;
  aspect-ratio: var(--ratio, 16 / 9);
  max-width: 100%;
}
.ph::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(245, 245, 247, 0.04) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: shimmer 3.2s ease-in-out infinite;
}
@keyframes shimmer { 60%, 100% { transform: translateX(100%); } }

.ph-label { position: relative; z-index: 1; display: grid; justify-items: center; gap: 10px; text-align: center; padding: 12px; }
.ph-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(245, 245, 247, 0.06);
  color: var(--text-2);
}

.ph.dark {
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(168, 197, 232, 0.14), transparent 60%),
    linear-gradient(160deg, #12141b, var(--ink-2));
  color: var(--text-3);
}
.ph.dark .ph-icon { color: var(--text); }

.ph-set { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ph-set .ph { --ratio: 4 / 5; border-radius: 12px; }
.ph-set .ph .ph-icon { width: 40px; height: 40px; }

/* ---------- About ---------- */

.about-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: clamp(32px, 5vw, 72px);
  align-items: center;
}
.about-grid .ph { --ratio: 4 / 5; border-radius: 32px; }
.about-photo { width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 25%; border-radius: 32px; background: var(--ink); }
/* liquid glass pills floating over the edges of the portrait */
.about-figure { position: relative; margin: 0; }
.float-pill {
  position: absolute;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 46px;
  padding: 0 18px 0 7px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(44, 52, 64, 0.62), rgba(23, 26, 35, 0.42));
  backdrop-filter: blur(18px) saturate(150%);
  -webkit-backdrop-filter: blur(18px) saturate(150%);
  box-shadow:
    inset 0 1px 0 rgba(243, 245, 247, 0.16),
    inset 0 0 0 1px rgba(243, 245, 247, 0.07),
    0 10px 24px -10px rgba(0, 0, 0, 0.6),
    0 2px 6px rgba(0, 0, 0, 0.25);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  white-space: nowrap;
  animation: bob var(--d, 7s) ease-in-out infinite alternate;
  animation-delay: var(--delay, 0s);
  transition: box-shadow 0.3s, scale 0.3s cubic-bezier(0.3, 1.4, 0.5, 1);
}
a.float-pill:hover { scale: 1.04; box-shadow: inset 0 1px 0 rgba(243, 245, 247, 0.22), inset 0 0 0 1px rgba(168, 197, 232, 0.22), 0 14px 30px -12px rgba(0, 0, 0, 0.7), 0 2px 6px rgba(0, 0, 0, 0.25); }
.fp-icon { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(243, 245, 247, 0.1); }
.fp-avail { padding-left: 16px; font-family: var(--mono); font-size: 13px; color: var(--text-2); }
.fp-avail .dot { width: 8px; height: 8px; border-radius: 50%; background: #30d158; animation: pulse 2s infinite; }
.fp-ig { left: -6%; top: 14%; --d: 6.5s; }
.fp-tt { right: -7%; top: 46%; --d: 7.5s; --delay: -2s; }
.fp-avail { left: 10%; bottom: -20px; --d: 8s; --delay: -4s; }
@media (max-width: 860px) {
  /* the shorter phone crop keeps the pills clear of the face */
  .fp-ig { left: -8px; top: auto; bottom: 16%; }
  .fp-avail { left: auto; right: 8%; }
  .fp-tt { right: -8px; top: 8%; }
}

.about-text { display: grid; gap: 22px; min-width: 0; }
@media (max-width: 860px) {
  .about-grid { grid-template-columns: 1fr; }
  .about-grid .ph { --ratio: 4 / 3; }
  .about-photo { aspect-ratio: 4 / 3.4; }
}

.skills { display: flex; flex-wrap: wrap; gap: 8px; }
.skill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 14px 0 8px;
  border-radius: 999px;
  background: var(--card);
  font-size: 14px;
  font-weight: 500;
}
.skill img { width: 24px; height: 24px; border-radius: 6px; object-fit: cover; }

/* ---------- Services ----------
   Motion design is the featured card: deep navy with a blue glow that follows
   the pointer and a shiny button. Graphic design and branding sit beside it as
   compact light rows. Each card carries one small abstract piece. */

.svc-grid { display: grid; grid-template-columns: 1.12fr 1fr; gap: 14px; }
.svc-main { grid-row: span 2; }
/* Motion Design + one other card: one row, the second card fills the height */
.svc-duo .svc-main { grid-row: auto; }
@media (min-width: 1001px) {
  .svc-duo .svc:not(.svc-main) { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "top arrow" "art art" "title title" "desc desc" "tags tags"; align-content: space-between; padding: 30px 32px; }
  .svc-duo .svc:not(.svc-main) .svc-art { justify-self: start; margin: 24px 0 18px 14px; scale: 1.35; transform-origin: 0 50%; }
  .svc-duo .svc:not(.svc-main) .svc-title { font-size: clamp(28px, 2.6vw, 36px); }
}
@media (max-width: 1000px) { .svc-duo .svc:not(.svc-main) { grid-column: 1 / -1; } }
@media (max-width: 1000px) { .svc-grid { grid-template-columns: 1fr 1fr; } .svc-main { grid-column: 1 / -1; grid-row: auto; } }
@media (max-width: 760px) { .svc-grid { grid-template-columns: 1fr; gap: 10px; } }

.svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px;
  border-radius: 28px;
  background: var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  overflow: hidden;
  isolation: isolate;
  transition: translate 0.5s var(--ease-cine), box-shadow 0.4s ease;
}
.svc:hover, .svc:focus-visible { translate: 0 -3px; box-shadow: inset 0 0 0 1px rgba(52, 85, 255, 0.3), var(--shadow-float, 0 16px 40px rgba(0, 0, 0, 0.3)); }

.svc-top { display: flex; align-items: center; gap: 10px; }
.svc-num { font-family: var(--mono); font-size: 13px; font-weight: 500; color: var(--text-3, var(--text-2)); }
.svc-badge {
  font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; background: var(--accent-soft); color: var(--accent);
}
.svc-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: clamp(24px, 2.1vw, 28px); line-height: 1.05; letter-spacing: -0.02em; }
.svc-desc { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; max-width: 46ch; }
.svc-tags { list-style: none; margin: 2px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.svc-tags li {
  font-size: 12.5px; font-weight: 500; padding: 5px 10px; border-radius: 999px;
  background: var(--surface-2, rgba(255, 255, 255, 0.04)); box-shadow: inset 0 0 0 1px var(--line); color: var(--text-2);
  transition: color 0.3s, background 0.3s;
}
.svc:hover .svc-tags li { color: var(--text); }

/* secondary cards: art on the left, words on the right, an arrow in the corner */
.svc:not(.svc-main) {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) auto;
  grid-template-areas: "art top arrow" "art title title" "art desc desc" "art tags tags";
  align-content: center;
  gap: 8px 22px;
  padding: 24px 26px;
}
.svc:not(.svc-main) .svc-top { grid-area: top; }
.svc:not(.svc-main) .svc-art { grid-area: art; align-self: center; }
.svc:not(.svc-main) .svc-title { grid-area: title; }
.svc:not(.svc-main) .svc-desc { grid-area: desc; }
.svc:not(.svc-main) .svc-tags { grid-area: tags; }
.svc-arrow {
  grid-area: arrow; justify-self: end; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%;
  background: var(--surface-2, rgba(255, 255, 255, 0.06)); box-shadow: inset 0 0 0 1px var(--line); color: var(--text);
  transition: background 0.3s, color 0.3s, box-shadow 0.3s;
}
.svc-arrow svg { transition: translate 0.4s var(--ease-cine); }
.svc:hover .svc-arrow { background: var(--accent); color: #fff; box-shadow: none; }
.svc:hover .svc-arrow svg { translate: 1px -1px; }

/* the featured card */
.svc-main {
  --text: #f3f5f7;
  --text-2: #9aa5b4;
  --line: rgba(255, 255, 255, 0.1);
  gap: 14px;
  padding: 32px;
  color: var(--text);
  background:
    radial-gradient(70% 55% at 88% 108%, rgba(52, 85, 255, 0.55), transparent 70%),
    radial-gradient(55% 45% at 0% 0%, rgba(168, 197, 232, 0.13), transparent 70%),
    linear-gradient(165deg, #0b1019 0%, #111a27 48%, #1a2d4c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(168, 197, 232, 0.12), 0 30px 60px -34px rgba(17, 26, 39, 0.7);
}
.svc-main::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
}
.svc-main:hover, .svc-main:focus-visible {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(168, 197, 232, 0.22), 0 36px 70px -30px rgba(52, 85, 255, 0.45);
}
.svc-glow {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0;
  background: radial-gradient(320px circle at var(--mx, 70%) var(--my, 30%), rgba(110, 140, 255, 0.22), transparent 70%);
  transition: opacity 0.5s ease;
}
.svc-main:hover .svc-glow { opacity: 1; }
.svc-main .svc-num { color: rgba(243, 245, 247, 0.55); }
.svc-main .svc-badge { background: rgba(168, 197, 232, 0.12); color: #a8c5e8; box-shadow: inset 0 0 0 1px rgba(168, 197, 232, 0.18); }
.svc-main .svc-title { font-size: clamp(36px, 3.6vw, 50px); }
.svc-main .svc-desc { font-size: 16px; color: #aab4c2; }
.svc-main .svc-tags li { background: rgba(255, 255, 255, 0.05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1); color: #c5cdd8; }
.svc-main:hover .svc-tags li { color: #fff; background: rgba(255, 255, 255, 0.08); }

.svc-btn {
  position: relative; overflow: hidden; margin-top: auto; align-self: stretch;
  display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; border-radius: 999px;
  background: linear-gradient(180deg, #4a68ff, #3455ff); color: #fff; font-weight: 500; font-size: 15px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 30px -12px rgba(52, 85, 255, 0.9);
  transition: box-shadow 0.4s ease;
}
.svc-btn::after {
  content: ""; position: absolute; inset: 0; translate: -110% 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.15) 54%, transparent 70%);
}
.svc-btn svg { transition: translate 0.4s var(--ease-cine); }
.svc-main:hover .svc-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), inset 0 0 0 1px rgba(255, 255, 255, 0.12), 0 16px 40px -12px rgba(52, 85, 255, 1); }
.svc-main:hover .svc-btn::after { translate: 110% 0; transition: translate 0.9s var(--ease-cine); }
.svc-main:hover .svc-btn svg { translate: 2px -2px; }

/* the little pieces */
.svc-art { position: relative; height: 88px; }
.art-motion { width: 240px; max-width: 100%; margin: 4px 0; }
.art-motion svg { position: absolute; inset: 0; overflow: visible; }
.art-motion .grid { stroke: rgba(255, 255, 255, 0.12); stroke-width: 1; stroke-dasharray: 2 4; }
.art-motion .curve { fill: none; stroke: #7f9bff; stroke-width: 2; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(110, 140, 255, 0.7)); }
.art-motion .key { fill: #111a27; stroke: #a8c5e8; stroke-width: 1.6; }
.art-motion .dot {
  position: absolute; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 0 4px rgba(110, 140, 255, 0.35), 0 0 18px 4px rgba(110, 140, 255, 0.7);
  offset-path: path("M8 76C100 76 140 12 232 12"); offset-rotate: 0deg; offset-anchor: 0 0;
  animation: svc-ride 2.6s cubic-bezier(0.65, 0, 0.35, 1) infinite alternate;
}
.svc-main:hover .art-motion .dot { animation-duration: 1.3s; }
@keyframes svc-ride { from { offset-distance: 0%; } to { offset-distance: 100%; } }

.art-graphic, .art-brand { width: 76px; height: 76px; }
.art-graphic i {
  position: absolute; left: 16px; top: 6px; width: 46px; height: 62px; border-radius: 9px;
  background: var(--card); box-shadow: inset 0 0 0 1.5px var(--line-strong, var(--line)), 0 4px 14px rgba(21, 25, 34, 0.06);
  transition: rotate 0.6s var(--ease-cine), translate 0.6s var(--ease-cine);
}
.art-graphic i:nth-child(1) { rotate: -8deg; translate: -8px 2px; }
.art-graphic i:nth-child(2) { rotate: 6deg; translate: 8px 0; background: linear-gradient(160deg, #e3e9f5, #cfdaee); }
.art-graphic i:nth-child(3) { background: linear-gradient(170deg, var(--accent) 0 55%, #a8c5e8 55%); box-shadow: 0 6px 18px rgba(52, 85, 255, 0.25); }
.art-graphic i:nth-child(3)::after { content: ""; position: absolute; left: 8px; right: 14px; bottom: 8px; height: 4px; border-radius: 3px; background: #fff; opacity: 0.85; }
.svc:hover .art-graphic i:nth-child(1) { rotate: -15deg; translate: -16px 4px; }
.svc:hover .art-graphic i:nth-child(2) { rotate: 13deg; translate: 16px 2px; }
.svc:hover .art-graphic i:nth-child(3) { translate: 0 -4px; }

.art-brand .ring { position: absolute; inset: 3px; border-radius: 50%; border: 1.5px dashed var(--line-strong, var(--line)); transition: rotate 1.2s var(--ease-cine); }
.art-brand .sat { position: absolute; top: -6px; left: 50%; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #a8c5e8; box-shadow: inset 0 0 0 2px var(--card); }
.art-brand .core {
  position: absolute; inset: 21px; border-radius: 10px 50% 50% 50%; background: var(--accent);
  box-shadow: 0 6px 18px rgba(52, 85, 255, 0.28); transition: border-radius 0.6s var(--ease-cine), rotate 0.6s var(--ease-cine);
}
.svc:hover .art-brand .ring { rotate: 200deg; }
.svc:hover .art-brand .core { border-radius: 50% 50% 10px 50%; rotate: -10deg; }

@media (prefers-reduced-motion: reduce) {
  .art-motion .dot { animation: none; offset-distance: 100%; }
  .svc, .svc *, .svc *::after { transition: none !important; }
}

/* tablets: the wide featured card tucks its curve into the top-right corner */
@media (min-width: 761px) and (max-width: 1000px) { .svc-main .svc-art { position: absolute; top: 30px; right: 32px; margin: 0; } }

/* "Got something else in mind?": a slim strip */
.ideas {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  margin-top: 14px;
  padding: 22px 26px 22px 30px;
  border-radius: 24px;
  background: radial-gradient(40% 160% at 100% 50%, rgba(52, 85, 255, 0.1), transparent 70%), var(--card);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
}
.ideas-copy { display: grid; gap: 4px; min-width: 0; }
.ideas-title { margin: 0; font-family: var(--display); font-weight: 500; font-size: 24px; line-height: 1.1; letter-spacing: -0.015em; }
.ideas-copy p { margin: 0; color: var(--text-2); font-size: 15px; line-height: 1.5; }
.ideas .btn { flex: none; }

@media (max-width: 760px) {
  .svc { padding: 20px; border-radius: 24px; }
  .svc-main { padding: 22px 20px 20px; gap: 10px; }
  .svc-main .svc-art { position: absolute; top: 14px; right: 16px; height: 56px; margin: 0; pointer-events: none; }
  .art-motion { width: 150px; }
  .art-motion svg, .art-motion .dot { scale: 0.625; transform-origin: 0 0; }
  .art-motion svg { width: 240px; height: 88px; }
  .svc-main .svc-title { margin-top: 30px; font-size: 34px; }
  .svc-main .svc-desc { font-size: 15px; }
  .svc-btn { height: 48px; margin-top: 6px; }
  .svc:not(.svc-main) {
    grid-template-columns: 56px minmax(0, 1fr) auto;
    grid-template-areas: "art top arrow" "art title arrow" "desc desc desc" "tags tags tags";
    gap: 6px 14px;
    padding: 18px 18px 20px;
  }
  .svc:not(.svc-main) .svc-desc { margin-top: 6px; }
  .svc-arrow { width: 32px; height: 32px; align-self: center; }
  .svc-title { font-size: 22px; }
  .art-graphic, .art-brand { width: 56px; height: 56px; }
  .art-graphic i { left: 13px; top: 4px; width: 32px; height: 44px; border-radius: 6px; }
  .art-graphic i:nth-child(3)::after { left: 5px; right: 10px; bottom: 5px; height: 3px; }
  .svc:hover .art-graphic i:nth-child(1) { translate: -11px 3px; }
  .svc:hover .art-graphic i:nth-child(2) { translate: 11px 2px; }
  .art-brand .sat { width: 8px; height: 8px; top: -4px; margin-left: -4px; }
  .art-brand .core { inset: 15px; border-radius: 8px 50% 50% 50%; }
  .svc:hover .art-brand .core { border-radius: 50% 50% 8px 50%; }
  .ideas { flex-direction: column; align-items: stretch; gap: 14px; padding: 20px; margin-top: 10px; }
  .ideas-title { font-size: 22px; }
  .ideas .btn { align-self: flex-start; }
}
.meta, .next-card, .window, .chat { border-radius: 30px; }

/* ---------- Chat (contact section) ---------- */

.chat {
  max-width: 720px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(0, 0, 0, 0.6);
  overflow: hidden;
  transition: box-shadow 0.25s;
}
.chat.dropping { box-shadow: 0 0 0 2px var(--accent), 0 30px 60px -30px rgba(0, 0, 0, 0.6); }

.chat-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
}
.chat-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--card-hover); color: var(--text); flex: none; }
.chat-head .name { font-family: var(--display); font-size: 20px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.chat-head .sub { font-size: 14px; color: var(--text-2); }
.chat-head .status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--bg);
  font-size: 12px;
  color: var(--text-2);
  white-space: nowrap;
}
.chat-head .status .dot { width: 7px; height: 7px; border-radius: 50%; background: #30d158; }
@media (max-width: 560px) { .chat-head .status { display: none; } }

.chat-log {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-height: 460px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 22px 20px 18px;
}

/* project brief: back button, step count and a thin progress bar in the header */
.brief-back {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-left: -6px;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--text-2);
  cursor: var(--hand);
  transition: background-color 0.2s, color 0.2s;
}
.brief-back:hover { background: var(--card-hover); color: var(--text); }
.brief-back[hidden] { display: none; }
.brief-title { min-width: 0; }
.brief-title .name { font-family: var(--display); font-size: 18px; font-weight: 500; letter-spacing: -0.01em; line-height: 1.2; }
.brief-title .sub { font-size: 13px; color: var(--text-2); }
.brief-progress { margin-left: auto; flex: none; width: 120px; height: 4px; border-radius: 99px; background: var(--card-hover); overflow: hidden; }
.brief-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--accent); transition: width 0.6s var(--ease-cine); }
@media (max-width: 560px) { .brief-progress { width: 72px; } }
.prompt-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.msg-row { display: flex; gap: 12px; align-items: flex-start; animation: msg-in 0.3s ease both; }
.msg-row.me { justify-content: flex-end; }
.msg-row .av {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--card-hover);
  font-family: var(--display);
  font-weight: 700;
  font-size: 15px;
}
.msg-row .av img { width: 100%; height: 100%; object-fit: contain; }
/* the logo is a transparent cutout, so the avatar drops its disc */
.msg-row .av:has(img) { background: none; border-radius: 0; overflow: visible; }
.msg-body { display: grid; gap: 10px; justify-items: start; min-width: 0; max-width: 86%; }
.msg-row.me .msg-body { justify-items: end; }

.msg { font-size: 16px; line-height: 1.5; white-space: pre-wrap; overflow-wrap: anywhere; }
.msg.bot { padding-top: 5px; color: var(--text); }
.msg.me { padding: 11px 16px; border-radius: 18px; background: var(--card-hover); color: var(--text); }

.msg.typing { display: inline-flex; gap: 4px; padding: 14px 4px; }
.msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: #9a9aa0; animation: bounce 1.2s infinite; }
.msg.typing span:nth-child(2) { animation-delay: 0.15s; }
.msg.typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: 0.6; } 30% { transform: translateY(-4px); opacity: 1; } }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.chat-options { display: flex; flex-wrap: wrap; gap: 8px; animation: msg-in 0.3s ease both; }

.chip {
  height: 36px;
  padding: 0 15px;
  border-radius: 999px;
  border: 0;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong);
  color: var(--text);
  font-size: 14px;
  font-weight: 500;
  cursor: var(--hand);
  transition: color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
@media (hover: hover) { .chip:hover { color: var(--text); background: var(--card-hover); box-shadow: 0 0 0 1px rgba(168, 197, 232, 0.3); } }
.chip { transition: color 0.2s, box-shadow 0.2s, background-color 0.2s, scale 0.3s cubic-bezier(0.34, 1.5, 0.5, 1); }
.chip:active { scale: 0.96; }
.chip[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); box-shadow: 0 0 0 1.5px var(--accent); }
.chip-go { background: var(--accent); color: #fff; box-shadow: none; }
.chip-go:hover { background: var(--accent-hover); color: #fff; box-shadow: none; }
.chip[hidden] { display: none; }

/* a sent answer: the bubble blurs up into place, with a quiet edit button beside it */
.msg-row.me .msg-body { grid-auto-flow: row; }
.msg-row.me .msg.me { animation: answer-in 0.45s var(--ease-cine) both; }
@keyframes answer-in { from { opacity: 0; filter: blur(6px); translate: 0 10px; scale: 0.96; } }
.msg-row.me:has(.msg-edit) .msg-body { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 8px; }
.msg-row.me .file-row { flex-basis: 100%; }
.msg-edit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 28px;
  padding: 0 10px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-3);
  font-size: 13px;
  cursor: var(--hand);
  opacity: 0;
  transition: opacity 0.2s, background-color 0.2s, color 0.2s;
}
.msg-row:hover .msg-edit, .msg-edit:focus-visible, .brief-summary .msg-edit { opacity: 1; }
@media (hover: none) { .msg-edit { opacity: 1; } .msg-edit span { display: none; } }
.msg-edit:hover { background: var(--card-hover); color: var(--text); }

/* the review card at the end */
.brief-summary {
  width: min(100%, 460px);
  padding: 6px 18px 18px;
  border-radius: 20px;
  background: var(--bg);
  box-shadow: inset 0 0 0 1px var(--line);
  animation: msg-in 0.4s ease both;
}
.brief-summary dl { display: grid; grid-template-columns: auto 1fr; gap: 0 16px; margin: 0; }
.brief-summary dt, .brief-summary dd { padding: 11px 0; border-bottom: 1px solid var(--line); margin: 0; }
.brief-summary dt { display: flex; align-items: center; gap: 4px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); white-space: nowrap; }
.brief-summary dt .msg-edit { height: 24px; padding: 0 6px; margin-left: -2px; font-family: var(--font); text-transform: none; letter-spacing: 0; }
.brief-summary dt .msg-edit span { display: none; }
.brief-summary dd { font-size: 15px; color: var(--text); overflow-wrap: anywhere; white-space: pre-wrap; }
.brief-send { width: 100%; margin-top: 16px; justify-content: center; }
.brief-summary.sent { opacity: 0.75; }
.msg-row:has(.brief-summary) .msg-body { max-width: 100%; flex: 1; }
@media (max-width: 560px) {
  .brief-summary dl { grid-template-columns: 1fr; }
  .brief-summary dt { padding: 12px 0 0; border: 0; }
  .brief-summary dd { padding: 2px 0 12px; }
}
.prompt-form.done { opacity: 0.6; }
.prompt-form.done .attach { visibility: hidden; }

.file-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.file-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  height: 40px;
  padding: 0 12px;
  border-radius: 12px;
  background: var(--card-hover);
  box-shadow: inset 0 0 0 1px var(--line);
  color: var(--text);
  font-size: 14px;
}
.file-chip > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip svg { flex: none; color: var(--text-2); }
.file-chip .ok { color: #30d158; }
.file-chip button { flex: none; width: 24px; height: 24px; border: 0; border-radius: 50%; background: transparent; color: var(--text-2); font-size: 17px; line-height: 1; cursor: var(--hand); }
.file-chip button:hover { background: rgba(245, 245, 247, 0.08); color: var(--text); }
.file-chip.ref { background: var(--accent-soft); color: var(--link); box-shadow: none; }
.file-chip.ref b { font-weight: 600; }
.file-chip.ref button { color: var(--link); }

.prompt-form {
  display: grid;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 14px 14px 12px 20px;
  border-radius: 22px;
  background: var(--bg);
  box-shadow: 0 0 0 1px var(--line-strong);
  transition: box-shadow 0.2s;
}
.prompt-form:focus-within { box-shadow: 0 0 0 1px rgba(168, 197, 232, 0.45), 0 0 0 4px var(--accent-soft); }
.tray { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 6px; }
.tray[hidden] { display: none; }
.prompt-form textarea {
  width: 100%;
  min-height: 28px;
  max-height: 180px;
  padding: 4px 0;
  border: 0;
  outline: 0;
  resize: none;
  background: transparent;
  font-size: 17px;
  line-height: 1.45;
}
.prompt-form textarea::placeholder { color: var(--text-3); }
.prompt-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.attach {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-left: -10px;
  padding: 0 12px 0 10px;
  border-radius: 999px;
  color: var(--text-2);
  font-size: 14px;
  cursor: var(--hand);
  transition: background-color 0.2s, color 0.2s;
}
.attach:hover { background: var(--card-hover); color: var(--text); }
.attach:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.attach input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }

.send {
  flex: none;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 0;
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 1px rgba(168, 197, 232, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 4px 12px -4px rgba(52, 85, 255, 0.45);
  cursor: var(--hand);
  transition: background-color 0.2s, transform 0.2s, opacity 0.2s;
}
.send:hover { background: var(--accent-hover); }
.send:active { transform: scale(0.94); }
.send:disabled { background: var(--card-hover); color: var(--text-3); box-shadow: none; cursor: default; }

.chat-note { text-align: center; font-size: 13px; color: var(--text-3); margin-top: 16px; }

/* ---------- Category + project pages ---------- */

.page-hero { padding-top: clamp(130px, 14vw, 170px); padding-bottom: clamp(40px, 6vw, 72px); }
.page-hero .inner { display: grid; gap: 20px; justify-items: start; }
.page-hero .inner > * { max-width: 820px; }
.crumbs { font-size: 14px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 8px; }
.crumbs a:hover { color: var(--link); }

.project-media { max-width: 1040px; margin: 0 auto; }

.meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 24px 28px;
  background: var(--card);
}
.meta div { display: grid; gap: 4px; min-width: 0; }
.meta span { font-size: 13px; color: var(--text-3); }
.meta b { font-weight: 500; }
@media (max-width: 760px) { .meta { grid-template-columns: 1fr 1fr; } }

.story { display: grid; grid-template-columns: 1fr 1.6fr; gap: clamp(24px, 5vw, 72px); }
.story .body { display: grid; gap: 18px; color: var(--text-2); font-size: 18px; min-width: 0; }
.story .body p { margin: 0; max-width: 62ch; }
@media (max-width: 860px) { .story { grid-template-columns: 1fr; } }

.gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.gallery .wide { grid-column: span 2; }
.gallery .full { grid-column: 1 / -1; }
@media (max-width: 760px) {
  .gallery { grid-template-columns: 1fr 1fr; }
  .gallery .wide { grid-column: 1 / -1; }
}

.next-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 760px) { .next-grid { grid-template-columns: 1fr; } }
.next-card {
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  border-radius: var(--radius-md);
  background: var(--card);
  transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.next-card:hover { transform: scale(1.015); }
.next-card small { color: var(--text-3); font-size: 13px; }
.next-card b { font-size: 20px; font-weight: 600; display: flex; justify-content: space-between; align-items: center; }
.next-card b svg { color: var(--link); }
.next-card span { color: var(--text-2); font-size: 15px; }

/* ---------- Off-white panel ----------
   The hero and showreel stay midnight. From Selected work down, everything sits
   on .paper, which swaps the tokens for a cool off-white palette. On the home
   page it rises over the end of the showreel with rounded top corners. */

.paper {
  --bg: #f0f2f4;
  --card: #ffffff;
  --card-hover: #e6eaee;
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --text: #151922;
  --text-2: #626d79;
  --text-3: #69737f;
  --line: #dce1e7;
  --line-strong: #cdd4dc;
  --link: #3455ff;
  --accent-soft: rgba(52, 85, 255, 0.09);
  --shadow-float: 0 2px 6px rgba(21, 25, 34, 0.06), 0 16px 40px rgba(21, 25, 34, 0.12);
  background: var(--bg);
  color: var(--text);
}
.paper :focus-visible { outline-color: var(--accent); }
.paper ::selection { background: rgba(52, 85, 255, 0.2); color: var(--text); }
.paper-rise {
  position: relative;
  z-index: 2;
  margin-top: -18vh;
  border-radius: clamp(28px, 4vw, 48px) clamp(28px, 4vw, 48px) 0 0;
  box-shadow: 0 -40px 80px -40px rgba(0, 0, 0, 0.7);
}
.reel-scroll.night { margin-top: 0; }

/* light versions of the pieces that carry their own colors */
.paper .btn:not(.btn-primary) { --lift: rgba(21, 25, 34, 0.08); --top: rgba(255, 255, 255, 0.9); }
.paper .btn-primary { --lift: rgba(52, 85, 255, 0.22); }
.paper .btn-ghost::after { background: linear-gradient(105deg, transparent 30%, rgba(52, 85, 255, 0.07) 48%, rgba(52, 85, 255, 0.07) 52%, transparent 70%); }
.paper .btn-ink:hover, .paper .tag.ink:hover { background: #dbe0e6; }
.paper .ph {
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.8), transparent 60%),
    radial-gradient(90% 90% at 90% 100%, rgba(52, 85, 255, 0.05), transparent 60%),
    linear-gradient(160deg, #e8ecf0, #dde2e8);
  color: var(--text-3);
}
.paper .ph.dark {
  background:
    radial-gradient(120% 80% at 20% 10%, rgba(255, 255, 255, 0.6), transparent 60%),
    linear-gradient(160deg, #dfe4ea, #d3d9e0);
}
.paper .ph::after { background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.5) 50%, transparent 70%); }
.paper .ph-icon, .paper .ph.dark .ph-icon { background: rgba(255, 255, 255, 0.8); color: var(--text-2); }
.paper .chat { box-shadow: 0 0 0 1px var(--line), 0 30px 60px -30px rgba(21, 25, 34, 0.16); }
.paper .chat.dropping { box-shadow: 0 0 0 2px var(--accent), 0 30px 60px -30px rgba(52, 85, 255, 0.2); }
.paper .view-toggle { background: var(--card-hover); }
.paper .view-toggle button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 3px rgba(21, 25, 34, 0.1); }
.paper .glass-card {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0.45));
  box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.6), 0 18px 40px rgba(21, 25, 34, 0.12);
}
.paper .glass-card:hover { box-shadow: inset 0 1px 0 #fff, inset 0 0 0 1px rgba(255, 255, 255, 0.8), 0 22px 50px rgba(52, 85, 255, 0.16); }
.paper .phone { filter: drop-shadow(-24px 36px 40px rgba(21, 25, 34, 0.2)) drop-shadow(-6px 10px 12px rgba(21, 25, 34, 0.1)); }
/* the pills over the portrait stay dark glass */
.float-pill { color: #f3f5f7; }
.fp-avail { color: #9aa5b4; }

/* nav over the off-white panel: same layout and motion, light glass and dark text */
.nav.on-light { --text: #151922; --text-2: #626d79; --line: #dce1e7; --nav-fade: #f0f2f4; color: var(--text); }
.nav.on-light .nav-glass { background: rgba(255, 255, 255, 0.68); box-shadow: 0 0 0 1px rgba(21, 25, 34, 0.07), inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 30px -18px rgba(21, 25, 34, 0.28); }
.nav.on-light .nav-menu { background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 0 1px rgba(21, 25, 34, 0.07), 0 20px 40px -20px rgba(21, 25, 34, 0.3); }

/* ---------- Work gallery ----------
   One .work-item is both the grid card and the index row; .work-list.is-index swaps the layout. */

.section-head.split { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: end; gap: 16px 24px; max-width: none; }
.section-head.split > div { display: grid; gap: 16px; }

.work-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; }
.filters, .subfilters { display: flex; flex-wrap: wrap; gap: 8px; }
.filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: var(--card);
  color: var(--text);
  font-size: 15px;
  font-weight: 500;
  cursor: var(--hand);
  transition: background-color 0.25s, color 0.25s, transform 0.2s;
}
.filter span { font-family: var(--mono); font-size: 12px; color: var(--text-3); transition: color 0.25s; }
.filter:hover { background: var(--card-hover); }
.filter:active { transform: scale(0.97); }
.filter[aria-pressed="true"] { background: var(--accent); color: #fff; }
.filter[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.7); }
.subfilters[hidden] { display: none; }
.subfilters { margin-top: 12px; animation: sub-in 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
.subfilters .filter { height: 34px; padding: 0 14px; font-size: 14px; background: transparent; box-shadow: inset 0 0 0 1px var(--line); }
.subfilters .filter:hover { background: var(--card); }
.subfilters .filter[aria-pressed="true"] { background: var(--accent-soft); color: var(--link); box-shadow: none; }
.subfilters .filter[aria-pressed="true"] span { color: var(--link); }
@keyframes sub-in { from { opacity: 0; filter: blur(6px); translate: 0 -6px; } }

.view-toggle { display: inline-flex; padding: 4px; border-radius: 999px; background: var(--card); }
.view-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: var(--hand);
  transition: background-color 0.25s, color 0.25s, box-shadow 0.25s;
}
.view-toggle button[aria-pressed="true"] { background: var(--card-hover); color: var(--text); box-shadow: inset 0 0 0 1px var(--line); }

.work-desc { margin: 20px 0 0; min-height: 1.5em; color: var(--text-2); font-size: 15px; }
.work-desc:empty { margin: 0; min-height: 0; }
.work-bar + .work-desc, .subfilters + .work-desc { margin-top: 20px; }
.work .work-list { margin-top: clamp(28px, 4vw, 40px); }
.work-empty { margin: 40px 0 0; color: var(--text-3); font-family: var(--mono); font-size: 14px; }

/* a justified gallery: each card's width follows its cover's shape (--ar, width over
   height), so every card in a row shares one height. --k sets that height as a share
   of the row width, which lands two 16:10 covers per row. */
.work-list {
  --k: 27%;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: clamp(36px, 4vw, 56px) clamp(16px, 2vw, 24px);
  counter-reset: work;
  transition: opacity 0.22s ease, filter 0.22s ease, translate 0.22s ease;
}
.work-list.three { --k: 19%; }
.work-list.is-swapping { opacity: 0; filter: blur(8px); translate: 0 8px; }
.work-list.reveal > * { transition-delay: calc(min(var(--i, 0), 5) * 80ms); }
.work-item { counter-increment: work; min-width: 0; flex: calc(var(--ar, 1.6) * 100) 1 calc(var(--ar, 1.6) * var(--k)); max-width: calc(var(--ar, 1.6) * var(--k) * 1.2); }
.work-item[hidden] { display: none; }
.work-link { display: grid; gap: 16px; border-radius: var(--radius-md); }

.work-media { position: relative; overflow: hidden; border-radius: var(--radius-lg); background: var(--card); isolation: isolate; }
.work-media > img, .work-media > .ph {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  border-radius: 0;
  transition: transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.work-preview {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.work-item.playing .work-preview { opacity: 1; }
.work-link:hover .work-media > img, .work-link:hover .work-media > .ph,
.work-link:focus-visible .work-media > img, .work-link:focus-visible .work-media > .ph { transform: scale(1.04); }

.work-info {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-areas: "title title year" "client cat cat";
  gap: 4px 6px;
  align-items: baseline;
  padding: 0 4px;
}
.work-title { grid-area: title; margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.work-client { grid-area: client; color: var(--text-2); font-size: 15px; }
.work-cat { grid-area: cat; min-width: 0; color: var(--text-2); font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.work-cat::before { content: "· "; }
.work-client:empty + .work-cat::before { content: none; }
.work-year { grid-area: year; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.work-num, .work-arrow { display: none; }

/* index view: editorial rows */
.work-list.is-index { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--line); }
.work-list.is-index .work-media { display: none; }
.work-list.is-index .work-link { display: block; padding: 0; border-radius: 0; }
.work-list.is-index .work-item { max-width: none; }
.work-list.is-index .work-info {
  grid-template-columns: 56px minmax(0, 2fr) minmax(0, 1.2fr) minmax(0, 1.4fr) 64px 24px;
  grid-template-areas: "num title client cat year arrow";
  column-gap: 16px;
  align-items: center;
  padding: 22px 4px;
  border-bottom: 1px solid var(--line);
  transition: padding 0.35s cubic-bezier(0.2, 0.7, 0.2, 1), color 0.25s;
}
.work-list.is-index .work-num, .work-list.is-index .work-arrow { display: block; }
.work-list.is-index .work-num { grid-area: num; font-family: var(--mono); font-size: 13px; color: var(--text-3); }
.work-list.is-index .work-num::before { content: counter(work, decimal-leading-zero); }
.work-list.is-index .work-title { font-size: clamp(20px, 2.2vw, 26px); }
.work-list.is-index .work-cat::before { content: none; }
.work-list.is-index .work-arrow { grid-area: arrow; color: var(--text-3); transition: color 0.25s, translate 0.35s cubic-bezier(0.2, 0.7, 0.2, 1); }
.work-list.is-index .work-link:hover .work-info, .work-list.is-index .work-link:focus-visible .work-info { padding-left: 14px; padding-right: 0; }
.work-list.is-index .work-link:hover .work-arrow, .work-list.is-index .work-link:focus-visible .work-arrow { color: var(--link); translate: 2px -2px; }

.index-peek {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 20;
  width: 280px;
  border-radius: var(--radius-md);
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  scale: 0.9;
  filter: blur(8px);
  box-shadow: var(--shadow-float);
  transition: opacity 0.3s ease, scale 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.3s ease;
}
.index-peek.show { opacity: 1; scale: 1; filter: none; }
.index-peek > * { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 0; }

@media (max-width: 760px) {
  .work-list .work-item { flex-basis: 100%; max-width: none; }
  .work-bar { align-items: flex-start; }
  .work-list.is-index .work-info {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    grid-template-areas: "num title year" "num client year";
    padding: 18px 2px;
  }
  .work-list.is-index .work-cat, .work-list.is-index .work-arrow { display: none; }
  .work-list.is-index .work-client { font-size: 14px; }
}
@media (min-width: 761px) and (max-width: 980px) { .work-list.three { --k: 27%; } }

/* ---------- Project page ---------- */

.detail-hero .lead { margin: 0; }
.detail-top { display: flex; flex-wrap: wrap; gap: 12px 48px; padding-top: 8px; }
.detail-top div { display: grid; gap: 4px; }
.detail-top span, .work-extras figcaption { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-3); }
.detail-top b { font-weight: 500; }

.work-show { display: grid; gap: 16px; }
/* the frame takes the piece's own ratio (--r) and never grows taller than the screen */
.work-hero-media { width: min(100%, 86vh * var(--r, 1.7778)); margin-inline: auto; border-radius: var(--radius-lg); overflow: hidden; }
.work-hero-media > img, .work-hero-media > .ph, .work-hero-media > .player { display: block; width: 100%; height: auto; border-radius: 0; }
.work-hero-media > img { object-fit: cover; }
/* pieces that belong together, side by side at the same height */
.work-set { display: flex; justify-content: center; gap: 16px; }
.set-item { flex: var(--r) 1 0; max-width: calc(78vh * var(--r)); margin: 0; display: grid; gap: 12px; align-content: start; }
.set-frame { border-radius: var(--radius-lg); overflow: hidden; }
.set-frame > .player, .set-frame > img, .set-frame > .ph { display: block; width: 100%; border-radius: 0; }
.set-item figcaption { display: grid; gap: 2px; padding: 0 4px; }
.set-item figcaption b { font-weight: 600; }
.set-item figcaption small { color: var(--text-2); font-size: 14px; }
.set-item figcaption a { color: var(--accent); white-space: nowrap; }
.set-item figcaption a svg { width: 12px; height: 12px; vertical-align: -1px; }
@media (max-width: 760px) { .work-set { gap: 10px; } .work-set.wide { flex-direction: column; } .set-item { max-width: none; } }
.work-gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; align-items: start; }
.work-gallery figure, .work-extras figure { margin: 0; display: grid; gap: 10px; }
.work-gallery img, .work-gallery .ph, .work-extras img, .work-extras .ph, .work-extras .player { width: 100%; border-radius: var(--radius-md); }
.work-extras { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 16px; align-items: start; }
.work-extras .wide { grid-column: 1 / -1; }
@media (max-width: 760px) { .work-gallery { grid-template-columns: 1fr; } }

/* minimal player: a glass play button until the video starts, then native controls */
.player { position: relative; aspect-ratio: var(--ratio, 16 / 9); background: #000; }
.player video { width: 100%; height: 100%; object-fit: contain; display: block; }
.player-btn {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  place-items: center;
  width: 76px;
  height: 76px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  /* a dark frosted disc with a light rim, so it reads on bright and dark footage alike */
  background: rgba(10, 13, 18, 0.68);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 10px 30px rgba(0, 0, 0, 0.35);
  cursor: var(--hand);
  transition: scale 0.3s cubic-bezier(0.3, 1.6, 0.5, 1), opacity 0.3s;
}
.player-btn svg { width: 26px; height: 26px; margin-left: 3px; filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4)); }
.player-btn:hover { scale: 1.08; }
.player.started .player-btn { opacity: 0; pointer-events: none; }

/* cross-page fade, and project covers that grow into the project page */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.35s; }

/* ---------- Footer ---------- */

.footer { padding: 56px 0 40px; border-top: 1px solid var(--line); font-size: 14px; color: var(--text-2); }
.footer-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 32px; margin-bottom: 40px; }
.footer-brand { display: grid; gap: 10px; max-width: 320px; }
.footer-brand .brand span { display: inline; }
.footer-brand .brand { font-family: var(--font); font-weight: 600; font-size: 18px; letter-spacing: -0.01em; }
.footer-brand .brand img { width: 38px; height: 38px; }
.footer-cols { display: flex; gap: 56px; flex-wrap: wrap; }
.footer-col { display: grid; gap: 10px; align-content: start; }
.footer-col strong { color: var(--text); font-weight: 600; }
.footer-col a:hover { color: var(--link); }
.footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; padding-top: 24px; border-top: 1px solid var(--line); color: var(--text-3); }

/* ---------- Reveal on scroll ----------
   Each child of a .reveal block fades in from a blur, one after another. */

.js .reveal > * {
  opacity: 0;
  filter: blur(12px);
  translate: 0 16px;
  transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), filter 0.9s cubic-bezier(0.2, 0.7, 0.2, 1), translate 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.js .reveal.in > * { opacity: 1; filter: none; translate: none; }

.intro { animation: intro 1.1s var(--ease-cine) 0.1s both; }
.hero-inner .lead.intro { animation-delay: 0.6s; }
@keyframes intro { from { opacity: 0; filter: blur(16px); translate: 0 10px; } }
/* the whole hero resolves top down out of a heavy blur: nav, title word by word,
   subtitle, buttons, then the low card (modeled on creatoroly.com) */
body:has(.hero-stage) .nav { animation: nav-in 1.1s var(--ease-cine) 0.05s backwards; }
@keyframes nav-in { from { opacity: 0; filter: blur(16px); translate: 0 -6px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal > * { opacity: 1; filter: none; translate: none; transition: none; }
  .btn::after { display: none; }
  .nav-inner, .nav-glass, .nav::before, .brand img, .nav-menu, .nav-links a::after, .nav-cta .arr svg, .nav-toggle span { transition-duration: 0.01s; }
  .headline .ch:hover { scale: none; }
  .nav-dots i { animation: none; }
  .intro, .nav, .headline .w, .pop, .pop-label, .reel-controls.show .morph, .reel-controls.show .morph > * { animation: none; }
  .btn-glow::before { animation: none; }
  .ph::after, .badge .dot, .glass-card, .float-pill, .fp-avail .dot, .hero-glow, .hc-idle, .hc { animation: none; }
  .hc-card { transition: none; }
  .phone { transition: none; }
  .work-list, .subfilters, .index-peek, .work-media > img, .work-media > .ph { transition: none; animation: none; }
}
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }

/* ---------- How it works ----------
   Four steps on the left, one animated mini UI per step on the right. The stage keeps a
   fixed ratio and everything inside is sized in cqw, so switching steps never shifts the page. */
#process .section-head { margin-bottom: clamp(28px, 4vw, 48px); }
.hw { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr); gap: clamp(20px, 3vw, 40px); align-items: start; }
.hw-steps { display: grid; gap: 10px; }
.hw-item { border-radius: 22px; background: var(--card); box-shadow: inset 0 0 0 1px var(--line); transition: background 0.45s var(--ease-cine), box-shadow 0.45s, transform 0.45s var(--ease-cine); }
.hw-item.open { background: var(--accent); box-shadow: 0 18px 40px -18px rgba(52, 85, 255, 0.55); }
.hw-step { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 0; background: none; font: inherit; color: var(--text); text-align: left; cursor: var(--hand); border-radius: 22px; }
.hw-step:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.hw-num { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--accent-soft); color: var(--accent); font-family: var(--mono); font-size: 14px; font-weight: 500; transition: background 0.45s, color 0.45s; }
.hw-title { font-family: var(--display); font-weight: 500; font-size: clamp(18px, 1.7vw, 22px); letter-spacing: -0.01em; transition: color 0.45s; }
.hw-item:not(.open) .hw-step:hover .hw-num { background: rgba(52, 85, 255, 0.16); }
.hw-item.open .hw-num { background: rgba(255, 255, 255, 0.18); color: #fff; }
.hw-item.open .hw-title { color: #fff; }
.hw-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.5s var(--ease-cine); }
.hw-body > div { overflow: hidden; }
.hw-body p { margin: 0; padding: 0 22px 22px 78px; color: rgba(255, 255, 255, 0.86); font-size: 16px; line-height: 1.6; opacity: 0; translate: 0 -6px; transition: opacity 0.35s, translate 0.45s var(--ease-cine); }
.hw-item.open .hw-body { grid-template-rows: 1fr; }
.hw-item.open .hw-body p { opacity: 1; translate: none; transition-delay: 0.12s; }
.hw-cta { justify-self: start; display: inline-flex; align-items: center; gap: 6px; margin: 8px 0 0 22px; color: var(--text-2); font-weight: 500; font-size: 15px; transition: color 0.2s; }
.hw-cta:hover { color: var(--accent); }
.hw-cta svg { transition: translate 0.3s var(--ease-cine); }
.hw-cta:hover svg { translate: 2px -2px; }

.hw-stage-wrap { min-width: 0; }
.hw-stage {
  --ink: #15171c;
  --u: 1cqw;
  position: relative; container-type: inline-size; aspect-ratio: 1 / 0.94; border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(120% 90% at 15% 0%, #dfe7f6 0%, transparent 60%), radial-gradient(90% 80% at 100% 100%, #d7e0f0 0%, transparent 55%), #e9edf3;
  box-shadow: inset 0 0 0 1px var(--line);
}
.hw-stage::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0.35; mix-blend-mode: soft-light;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.hw-panel { position: absolute; inset: 0; display: grid; place-items: center; padding: calc(5.5 * var(--u)); opacity: 0; filter: blur(14px); scale: 0.97; transition: opacity 0.5s ease, filter 0.6s ease, scale 0.7s var(--ease-cine); pointer-events: none; }
.hw-panel.on { opacity: 1; filter: none; scale: 1; pointer-events: auto; }

/* shared window chrome */
.hw-win { width: 100%; height: 100%; display: flex; flex-direction: column; border-radius: calc(3.2 * var(--u)); overflow: hidden; font-size: calc(2.3 * var(--u)); line-height: 1.35; box-shadow: 0 1px 2px rgba(21, 25, 34, 0.08), 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2 * var(--u)) rgba(21, 25, 34, 0.35); }
.hw-light { background: #fff; color: #151922; }
.hw-dark { background: #1c1e23; color: #e9ebef; }
.hw-bar { flex: none; display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(7.4 * var(--u)); padding: 0 calc(2.6 * var(--u)); border-bottom: 1px solid rgba(127, 127, 127, 0.16); font-size: calc(2.1 * var(--u)); }
.hw-bar b { font-weight: 500; flex: 1; text-align: center; opacity: 0.8; margin-right: calc(6 * var(--u)); }
.hw-dots { display: flex; gap: calc(0.9 * var(--u)); }
.hw-dots i { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: 50%; background: #ff5f57; }
.hw-dots i:nth-child(2) { background: #febc2e; }
.hw-dots i:nth-child(3) { background: #28c840; }
.hw-pill { display: inline-flex; align-items: center; gap: calc(0.6 * var(--u)); padding: calc(0.6 * var(--u)) calc(1.6 * var(--u)); border-radius: 99px; background: rgba(52, 85, 255, 0.1); color: #3455ff; font-family: var(--mono); font-size: calc(1.7 * var(--u)); white-space: nowrap; }
.hw-pill svg { width: calc(2 * var(--u)); height: calc(2 * var(--u)); }
.hw-pill.ok { background: rgba(40, 200, 64, 0.12); color: #1f9d3a; font-family: var(--font); font-weight: 600; }
.hw-label { display: block; font-family: var(--mono); font-size: calc(1.6 * var(--u)); letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.5; }
.hw-label em { font-style: normal; margin-left: calc(1 * var(--u)); padding: calc(0.2 * var(--u)) calc(1 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.1); text-transform: none; letter-spacing: 0; }

/* pieces build in one after another whenever their panel opens */
.hw-panel [class*=" a"], .hw-tile, .hw-frame, .hw-style, .hw-note, .hw-cmt, .hw-file, .hw-dl-all, .hw-shot { opacity: 0; }
.hw-panel.on [class*=" a"], .hw-panel.on .hw-tile, .hw-panel.on .hw-frame, .hw-panel.on .hw-style, .hw-panel.on .hw-note,
.hw-panel.on .hw-cmt, .hw-panel.on .hw-file, .hw-panel.on .hw-dl-all, .hw-panel.on .hw-shot { animation: hw-in 0.6s var(--ease-cine) both; }
@keyframes hw-in { from { opacity: 0; translate: 0 calc(1.6 * var(--u)); filter: blur(6px); } to { opacity: 1; translate: none; filter: none; } }

/* 1. brief */
.hw-chat { flex: 1; display: grid; align-content: start; gap: calc(1.8 * var(--u)); padding: calc(3.2 * var(--u)) calc(3.6 * var(--u)); overflow: hidden; }
.hw-q { display: flex; align-items: center; gap: calc(1.6 * var(--u)); }
.hw-q img { width: calc(4.2 * var(--u)); height: calc(4.2 * var(--u)); object-fit: contain; }
.hw-chips { display: flex; flex-wrap: wrap; gap: calc(1.1 * var(--u)); padding-left: calc(5.8 * var(--u)); }
.hw-chips span { padding: calc(1 * var(--u)) calc(2 * var(--u)); border-radius: 99px; border: 1px solid #dce1e7; font-size: calc(2 * var(--u)); color: #626d79; transition: background 0.4s, color 0.4s, border-color 0.4s; }
.hw-chips span.on { border-color: #3455ff; background: #3455ff; color: #fff; }
.hw-panel.on .hw-chips span.on { animation: hw-pick 0.9s ease both; animation-delay: inherit; }
@keyframes hw-pick { 0%, 55% { background: transparent; color: #626d79; border-color: #dce1e7; } 70% { scale: 0.94; } 100% { background: #3455ff; color: #fff; border-color: #3455ff; scale: 1; } }
.hw-me { justify-self: end; max-width: 78%; padding: calc(1.6 * var(--u)) calc(2.4 * var(--u)); border-radius: calc(2.8 * var(--u)) calc(2.8 * var(--u)) calc(0.8 * var(--u)) calc(2.8 * var(--u)); background: #eef1f5; min-height: calc(7 * var(--u)); }
.hw-caret { display: inline-block; width: calc(0.3 * var(--u)); height: calc(2.4 * var(--u)); margin-left: calc(0.2 * var(--u)); vertical-align: calc(-0.4 * var(--u)); background: #3455ff; animation: hw-blink 1s steps(2) infinite; }
@keyframes hw-blink { 50% { opacity: 0; } }
.hw-files { display: flex; justify-content: flex-end; gap: calc(1.2 * var(--u)); }
.hw-files span { display: inline-flex; align-items: center; gap: calc(0.8 * var(--u)); padding: calc(0.9 * var(--u)) calc(1.8 * var(--u)); border-radius: calc(1.6 * var(--u)); background: #f4f6f8; border: 1px solid #e3e7ec; font-size: calc(1.8 * var(--u)); color: #626d79; }
.hw-files svg { width: calc(2.2 * var(--u)); height: calc(2.2 * var(--u)); }
.hw-input { flex: none; display: flex; align-items: center; justify-content: space-between; margin: 0 calc(2.6 * var(--u)) calc(2.6 * var(--u)); padding: calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(1.6 * var(--u)) calc(2.6 * var(--u)); border-radius: calc(2.6 * var(--u)); border: 1px solid #dce1e7; color: #9aa3ae; }
.hw-input i { display: grid; place-items: center; width: calc(5 * var(--u)); height: calc(5 * var(--u)); border-radius: 50%; background: #3455ff; color: #fff; }
.hw-input svg { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }
.a1 { animation-delay: 0.1s !important; } .a2 { animation-delay: 0.35s !important; } .a3 { animation-delay: 1.3s !important; }
.a4 { animation-delay: 1.55s !important; } .a5 { animation-delay: 2.5s !important; } .a6 { animation-delay: 2.75s !important; } .a7 { animation-delay: 5.4s !important; }

/* 2. moodboard and storyboard */
.hw-canvas { position: relative; flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: calc(3 * var(--u)); padding: calc(3 * var(--u)); overflow: hidden;
  background-image: radial-gradient(rgba(255, 255, 255, 0.07) 1px, transparent 1px); background-size: calc(2.6 * var(--u)) calc(2.6 * var(--u)); }
.hw-col { display: grid; align-content: start; gap: calc(1.6 * var(--u)); }
.hw-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--u)); }
.hw-tile { position: relative; margin: 0; border-radius: calc(1.6 * var(--u)); overflow: hidden; background: #2a2d33; }
.hw-tile img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hw-tile.t1 { grid-column: span 2; aspect-ratio: 16 / 8; }
.hw-tile.t2, .hw-tile.t3 { aspect-ratio: 1; }
.hw-tile figcaption { position: absolute; left: calc(1 * var(--u)); bottom: calc(1 * var(--u)); padding: calc(0.4 * var(--u)) calc(1.2 * var(--u)); border-radius: 99px; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(6px); font-size: calc(1.5 * var(--u)); color: #fff; }
.hw-style { display: flex; align-items: center; gap: calc(1.2 * var(--u)); }
.hw-sw { width: calc(4.4 * var(--u)); height: calc(4.4 * var(--u)); border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15); }
.hw-style b { margin-left: auto; font-family: var(--display); font-weight: 600; font-size: calc(5 * var(--u)); line-height: 1; }
.hw-frames { display: grid; grid-template-columns: 1fr 1fr; gap: calc(1.4 * var(--u)); }
.hw-frame { position: relative; aspect-ratio: 16 / 10; border-radius: calc(1.4 * var(--u)); background: #26292f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); overflow: hidden; }
.hw-frame span { position: absolute; left: calc(1 * var(--u)); top: calc(0.8 * var(--u)); font-family: var(--mono); font-size: calc(1.4 * var(--u)); opacity: 0.5; }
.hw-frame b { position: absolute; left: calc(1 * var(--u)); bottom: calc(0.8 * var(--u)); font-weight: 500; font-size: calc(1.7 * var(--u)); opacity: 0.85; }
.hw-frame::before { content: ""; position: absolute; inset: 28% 22% 32%; border-radius: calc(1 * var(--u)); border: 1px dashed rgba(255, 255, 255, 0.25); }
.hw-frame.f2::before { inset: 22% 36% 22%; border-radius: calc(1.4 * var(--u)); border-style: solid; border-color: rgba(168, 197, 232, 0.5); }
.hw-frame.f3::before { inset: 30% 12% 36% 46%; background: rgba(52, 85, 255, 0.35); border: 0; }
.hw-frame.f4::before { inset: 34% 34%; border-radius: 50%; border: 0; background: #3455ff; }
.hw-note { justify-self: start; padding: calc(1.4 * var(--u)) calc(2 * var(--u)); border-radius: calc(0.6 * var(--u)); background: #ffe68a; color: #3d3200; font-size: calc(1.9 * var(--u)); font-weight: 500; rotate: -2deg; box-shadow: 0 calc(1 * var(--u)) calc(2 * var(--u)) rgba(0, 0, 0, 0.3); }
.hw-tile.t1 { animation-delay: 0.1s !important; } .hw-tile.t2 { animation-delay: 0.25s !important; } .hw-tile.t3 { animation-delay: 0.4s !important; }
.hw-style { animation-delay: 0.6s !important; }
.hw-frame.f1 { animation-delay: 0.5s !important; } .hw-frame.f2 { animation-delay: 0.65s !important; } .hw-frame.f3 { animation-delay: 0.8s !important; } .hw-frame.f4 { animation-delay: 0.95s !important; }
.hw-note { animation-delay: 1.5s !important; }
.hw-avatars { display: flex; }
.hw-avatars i { display: grid; place-items: center; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); margin-left: calc(-0.8 * var(--u)); border-radius: 50%; background: #3455ff; color: #fff; font-style: normal; font-size: calc(1.6 * var(--u)); font-weight: 600; box-shadow: 0 0 0 calc(0.4 * var(--u)) #1c1e23; }
.hw-avatars i + i { background: #f472b6; }
.hw-cursor { position: absolute; left: 30%; top: 70%; display: flex; align-items: flex-start; gap: calc(0.4 * var(--u)); pointer-events: none; }
.hw-cursor svg { width: calc(3 * var(--u)); height: calc(3 * var(--u)); }
.hw-cursor span { margin-top: calc(2 * var(--u)); padding: calc(0.4 * var(--u)) calc(1.2 * var(--u)); border-radius: 99px; background: #f472b6; color: #fff; font-size: calc(1.5 * var(--u)); font-weight: 600; }
.hw-panel.on .hw-cursor { animation: hw-cursor 6s ease-in-out 1s infinite; }
@keyframes hw-cursor { 0% { left: 30%; top: 70%; } 30% { left: 62%; top: 44%; } 55% { left: 74%; top: 60%; } 80% { left: 40%; top: 30%; } 100% { left: 30%; top: 70%; } }

/* 3. After Effects style workspace */
.hw-ae { background: #232428; color: #c9ccd2; }
.hw-ae .hw-bar { background: #1b1c1f; }
.hw-tc { font-family: var(--mono); font-size: calc(1.9 * var(--u)); color: #4c8dff; }
.hw-ae-top { flex: 1; display: grid; grid-template-columns: 26% 1fr; min-height: 0; border-bottom: 1px solid #111; }
.hw-proj { display: grid; align-content: start; gap: calc(1 * var(--u)); padding: calc(2 * var(--u)); border-right: 1px solid #111; font-size: calc(1.8 * var(--u)); color: #9ea3ab; }
.hw-proj .sel { color: #fff; }
.hw-viewer { display: grid; place-items: center; padding: calc(2.4 * var(--u)); background: #1a1b1e; }
.hw-comp { position: relative; width: 88%; aspect-ratio: 16 / 9; border-radius: calc(0.6 * var(--u)); overflow: hidden; background: linear-gradient(135deg, #0d1230, #1c2b6b 60%, #3455ff); box-shadow: 0 0 0 1px #000; }
.hw-phone { position: absolute; left: 14%; top: 50%; width: 17%; aspect-ratio: 9 / 19; translate: 0 -50%; border-radius: calc(1.6 * var(--u)); background: #f4f6fa; box-shadow: 0 0 0 calc(0.4 * var(--u)) #0b0d12; display: grid; align-content: start; gap: calc(0.8 * var(--u)); padding: calc(2.6 * var(--u)) calc(1 * var(--u)); }
.hw-phone i { display: block; height: calc(1.4 * var(--u)); border-radius: calc(0.6 * var(--u)); background: #dfe5f3; }
.hw-phone i:first-child { height: calc(4 * var(--u)); background: #3455ff; }
.hw-ctitle { position: absolute; left: 44%; top: 50%; translate: 0 -50%; font-family: var(--display); font-weight: 600; font-size: calc(5.4 * var(--u)); color: #fff; letter-spacing: -0.02em; }
.hw-ring { position: absolute; right: 8%; top: 18%; width: calc(9 * var(--u)); height: calc(9 * var(--u)); border-radius: 50%; border: calc(0.5 * var(--u)) solid rgba(168, 197, 232, 0.8); }
.hw-panel.on .hw-phone { animation: hw-phone 4s var(--ease-cine) infinite; }
.hw-panel.on .hw-ctitle { animation: hw-title 4s var(--ease-cine) infinite; }
.hw-panel.on .hw-ring { animation: hw-ring 4s ease-in-out infinite; }
@keyframes hw-phone { 0% { translate: 0 60%; rotate: -14deg; opacity: 0; } 20%, 100% { translate: 0 -50%; rotate: 0deg; opacity: 1; } }
@keyframes hw-title { 0%, 22% { opacity: 0; filter: blur(8px); translate: calc(3 * var(--u)) -50%; } 45%, 100% { opacity: 1; filter: none; translate: 0 -50%; } }
@keyframes hw-ring { 0%, 40% { scale: 0; opacity: 0; } 60% { scale: 1.1; opacity: 1; } 100% { scale: 1; opacity: 0.6; } }
.hw-timeline { position: relative; flex: none; display: grid; gap: calc(0.7 * var(--u)); padding: calc(1.4 * var(--u)) calc(2 * var(--u)) calc(2 * var(--u)); background: #26272b; }
.hw-ruler { display: flex; justify-content: space-between; margin-left: 24%; font-family: var(--mono); font-size: calc(1.4 * var(--u)); color: #7d828a; }
.hw-layer { display: grid; grid-template-columns: 24% 1fr; align-items: center; height: calc(3.4 * var(--u)); }
.hw-ln { display: flex; align-items: center; gap: calc(1 * var(--u)); font-size: calc(1.7 * var(--u)); }
.hw-ln i { width: calc(1.6 * var(--u)); height: calc(1.6 * var(--u)); border-radius: calc(0.3 * var(--u)); }
.hw-track { position: relative; height: 100%; border-radius: calc(0.6 * var(--u)); background: #1d1e21; }
.hw-track b { position: absolute; top: 18%; bottom: 18%; border-radius: calc(0.5 * var(--u)); opacity: 0.55; }
.hw-track em { position: absolute; top: 50%; width: calc(1.4 * var(--u)); height: calc(1.4 * var(--u)); translate: -50% -50%; rotate: 45deg; background: #e9ebef; border-radius: calc(0.2 * var(--u)); box-shadow: 0 0 0 calc(0.3 * var(--u)) #1d1e21; }
.hw-track u { position: absolute; inset: 22% 0; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.5) 0 calc(0.25 * var(--u)), transparent calc(0.25 * var(--u)) calc(0.7 * var(--u))); -webkit-mask: linear-gradient(transparent 20%, #000 20% 80%, transparent 80%); opacity: 0.5; }
.hw-head { position: absolute; top: calc(1 * var(--u)); bottom: calc(1 * var(--u)); left: calc(24% + calc(2 * var(--u))); width: calc(0.35 * var(--u)); background: #4c8dff; }
.hw-head::before { content: ""; position: absolute; top: calc(-0.4 * var(--u)); left: 50%; width: calc(2 * var(--u)); height: calc(2 * var(--u)); translate: -50% 0; border-radius: calc(0.4 * var(--u)) calc(0.4 * var(--u)) 50% 50%; background: #4c8dff; }
.hw-panel.on .hw-head { animation: hw-play 4s linear infinite; }
@keyframes hw-play { from { left: calc(24% + calc(2 * var(--u))); } to { left: calc(100% - calc(2 * var(--u))); } }

/* 4. review and delivery */
.hw-review { display: grid; grid-template-columns: 1.15fr 1fr; gap: calc(2.4 * var(--u)); padding: calc(2.8 * var(--u)) calc(3 * var(--u)) calc(1.6 * var(--u)); }
.hw-shot { position: relative; align-self: start; aspect-ratio: 16 / 10; border-radius: calc(1.8 * var(--u)); overflow: hidden; background: #eef1f5; box-shadow: inset 0 0 0 1px #e3e7ec; }
.hw-shot .hw-comp { width: 100%; height: 100%; border-radius: 0; box-shadow: none; }
.hw-shot .hw-ctitle { font-size: calc(3.6 * var(--u)); }
.hw-shot .hw-ring { width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-width: calc(0.35 * var(--u)); }
.hw-shot .hw-phone { border-radius: calc(1 * var(--u)); padding: calc(1.6 * var(--u)) calc(0.6 * var(--u)); gap: calc(0.5 * var(--u)); }
.hw-shot .hw-phone i { height: calc(0.9 * var(--u)); }
.hw-shot .hw-phone i:first-child { height: calc(2.4 * var(--u)); }
.hw-ver { position: absolute; left: calc(1.2 * var(--u)); top: calc(1.2 * var(--u)); padding: calc(0.3 * var(--u)) calc(1.2 * var(--u)); border-radius: 99px; background: rgba(21, 25, 34, 0.7); color: #fff; font-family: var(--mono); font-size: calc(1.5 * var(--u)); }
.hw-pin { position: absolute; display: grid; place-items: center; width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); border-radius: 50% 50% 50% 0; background: #3455ff; color: #fff; font-size: calc(1.6 * var(--u)); font-weight: 600; box-shadow: 0 0 0 calc(0.5 * var(--u)) rgba(52, 85, 255, 0.25); }
.hw-thread { display: grid; align-content: start; gap: calc(1.4 * var(--u)); }
.hw-cmt { display: flex; gap: calc(1.2 * var(--u)); font-size: calc(1.85 * var(--u)); color: #3c4450; }
.hw-cmt i { flex: none; display: grid; place-items: center; width: calc(3.6 * var(--u)); height: calc(3.6 * var(--u)); border-radius: 50%; background: #f472b6; color: #fff; font-style: normal; font-size: calc(1.6 * var(--u)); font-weight: 600; }
.hw-cmt i.b { background: #eef1f5; }
.hw-cmt i img { width: 70%; height: 70%; object-fit: contain; }
.hw-cmt b { display: block; font-size: calc(1.7 * var(--u)); color: #151922; }
.hw-files-list { flex: 1; display: grid; align-content: start; gap: calc(1 * var(--u)); padding: calc(0.6 * var(--u)) calc(3 * var(--u)); }
.hw-file { display: flex; align-items: center; gap: calc(1.8 * var(--u)); padding: calc(1.2 * var(--u)) calc(1.6 * var(--u)); border-radius: calc(1.8 * var(--u)); background: #f6f7f9; }
.hw-ext { flex: none; display: grid; place-items: center; width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: calc(1.2 * var(--u)); background: #e8edff; color: #3455ff; font-family: var(--mono); font-size: calc(1.5 * var(--u)); font-weight: 500; }
.hw-fn { flex: 1; display: grid; min-width: 0; }
.hw-fn b { font-weight: 600; font-size: calc(2 * var(--u)); }
.hw-fn small { color: #7a8491; font-size: calc(1.6 * var(--u)); }
.hw-dl { position: relative; display: grid; place-items: center; width: calc(4.6 * var(--u)); height: calc(4.6 * var(--u)); border-radius: 50%; color: #3455ff; background: #fff; box-shadow: inset 0 0 0 1px #dce1e7; overflow: hidden; }
.hw-dl svg { position: absolute; width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); transition: opacity 0.3s, scale 0.3s; }
.hw-dl svg + svg { opacity: 0; scale: 0.5; color: #fff; }
.hw-dl i { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(#3455ff var(--p, 0%), transparent 0); -webkit-mask: radial-gradient(circle, transparent 58%, #000 60%); mask: radial-gradient(circle, transparent 58%, #000 60%); }
.hw-panel.on .hw-file .hw-dl i { animation: hw-progress 1s ease-in-out both; }
.hw-panel.on .hw-file .hw-dl { animation: hw-done 0.3s ease both; }
.hw-panel.on .hw-file .hw-dl svg:first-of-type { animation: hw-hide 0.3s ease both; }
.hw-panel.on .hw-file .hw-dl svg + svg { animation: hw-show 0.3s ease both; }
@property --p { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes hw-progress { from { --p: 0%; } to { --p: 100%; } }
@keyframes hw-done { to { background: #28c840; box-shadow: none; } }
@keyframes hw-hide { to { opacity: 0; scale: 0.5; } }
@keyframes hw-show { to { opacity: 1; scale: 1; } }
.hw-file.d1 { animation-delay: 1.6s !important; } .hw-file.d2 { animation-delay: 1.75s !important; } .hw-file.d3 { animation-delay: 1.9s !important; } .hw-file.d4 { animation-delay: 2.05s !important; }
.hw-file.d1 .hw-dl i { animation-delay: 2.4s !important; } .hw-file.d2 .hw-dl i { animation-delay: 2.7s !important; } .hw-file.d3 .hw-dl i { animation-delay: 3s !important; } .hw-file.d4 .hw-dl i { animation-delay: 3.3s !important; }
.hw-file.d1 .hw-dl, .hw-file.d1 .hw-dl svg { animation-delay: 3.4s !important; } .hw-file.d2 .hw-dl, .hw-file.d2 .hw-dl svg { animation-delay: 3.7s !important; }
.hw-file.d3 .hw-dl, .hw-file.d3 .hw-dl svg { animation-delay: 4s !important; } .hw-file.d4 .hw-dl, .hw-file.d4 .hw-dl svg { animation-delay: 4.3s !important; }
.hw-shot { animation-delay: 0.05s !important; } .hw-cmt.c1 { animation-delay: 0.3s !important; } .hw-cmt.c2 { animation-delay: 0.8s !important; } .hw-cmt.c3 { animation-delay: 1.3s !important; }
.hw-dl-all { flex: none; display: flex; align-items: center; justify-content: center; gap: calc(1 * var(--u)); margin: calc(1.4 * var(--u)) calc(3 * var(--u)) calc(2.8 * var(--u)); padding: calc(1.8 * var(--u)); border-radius: 99px; background: #3455ff; color: #fff; font-weight: 600; font-size: calc(2.1 * var(--u)); animation-delay: 2.2s !important; }
.hw-dl-all svg { width: calc(2.4 * var(--u)); height: calc(2.4 * var(--u)); }

@media (max-width: 900px) {
  .hw { grid-template-columns: 1fr; }
  /* on phones the stage sits inside the open step, right under its text (moved there by main.js) */
  /* the mini UIs are drawn a little larger on phones so their text stays readable */
  .hw-stage { --u: 1.2cqw; aspect-ratio: 1 / 1.12; margin: 0 10px 10px; }
  .hw-panel { padding: 3cqw; }
  .hw-item > .hw-stage { box-shadow: none; }
  .hw-body p { padding: 0 20px 18px 76px; }
}
@media (max-width: 480px) { .hw-body p { padding-left: 20px; } .hw-step { padding: 16px 18px; } }
@media (prefers-reduced-motion: reduce) {
  .hw-panel *, .hw-panel { animation: none !important; transition: none !important; }
  .hw-panel.on * { opacity: 1; }
  .hw-dl svg + svg { opacity: 1; scale: 1; }
  .hw-dl svg:first-of-type { opacity: 0; }
}

/* ---------- Phone pass ----------
   Phones only (desktop is untouched): tighter section rhythm, Selected work as a
   swipe carousel, compact service cards, a smaller How it works, and a
   "Request a project" pill that floats in once the hero is out of view. */

.work-more, .carousel-dots, .m-cta { display: none; }

@media (max-width: 760px) {
  section { padding: 52px 0; }
  .section-head { gap: 12px; margin-bottom: 24px; }
  .section-head .lead { font-size: 17px; }

  /* Selected work: swipe through the picks, the next card peeks in */
  .work-list.carousel {
    flex-wrap: nowrap; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
    margin-inline: calc(var(--gutter) * -1); padding: 2px var(--gutter) 6px;
    scrollbar-width: none;
  }
  .work-list.carousel::-webkit-scrollbar { display: none; }
  .work-list.carousel > .work-item, .work-list.carousel > .work-more { flex: 0 0 78%; max-width: none; scroll-snap-align: start; }
  /* each frame takes its project's own shape, so nothing is cropped but the rounded corners */
  .work-list.carousel { align-items: flex-start; }
  .work-list.carousel .work-media { aspect-ratio: var(--ar, 1.6); }
  .work-list.carousel .work-media > img, .work-list.carousel .work-media > .ph, .work-list.carousel .work-media > video { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
  .work-list.carousel .work-link { gap: 12px; }
  .work-list.carousel .work-title { font-size: 18px; }
  .work-list.carousel .work-client, .work-list.carousel .work-cat { font-size: 14px; }
  .work-more {
    display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
    aspect-ratio: 4 / 5; padding: 22px; border-radius: var(--radius-lg); color: var(--text);
    background: radial-gradient(90% 70% at 100% 0%, rgba(52, 85, 255, 0.14), transparent 70%), var(--card);
    box-shadow: inset 0 0 0 1px var(--line);
  }
  .work-more b { font-family: var(--display); font-weight: 500; font-size: 30px; line-height: 1.05; letter-spacing: -0.02em; }
  .work-more .svc-arrow { align-self: flex-start; width: 40px; height: 40px; background: var(--accent); color: #fff; box-shadow: none; }
  .carousel-dots { display: flex; justify-content: center; gap: 6px; margin-top: 14px; }
  .carousel-dots i { width: 6px; height: 6px; border-radius: 999px; background: var(--line-strong, var(--line)); transition: width 0.4s var(--ease-cine), background 0.3s; }
  .carousel-dots i.on { width: 20px; background: var(--accent); }
  #selected-work .section-head.split { align-items: end; flex-wrap: nowrap; }
  #selected-work .section-head .btn { height: 40px; padding: 0 14px; font-size: 14px; }

  /* About: a shorter photo and tighter copy */
  .about-photo { aspect-ratio: 4 / 3; }
  .about-text { gap: 16px; }
  .about-grid { gap: 40px; }
  .skill { height: 34px; font-size: 13px; padding: 0 12px 0 6px; }
  .skill img { width: 22px; height: 22px; }


  /* How it works: tighter steps, the open one carries a slightly shorter stage */
  .hw-steps { gap: 8px; }
  .hw-step { padding: 14px 16px; }
  .hw-body p { padding: 0 18px 14px; font-size: 15px; }
  .hw-stage { aspect-ratio: 1 / 1.02; margin: 0 8px 8px; }
  .hw-cta { margin: 6px 0 0 16px; }

  /* footer: three short columns side by side */
  .footer { padding: 40px 0 28px; }
  .footer-top { gap: 24px; margin-bottom: 28px; }
  .footer-cols { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; gap: 20px; width: 100%; }
  .footer-col { gap: 8px; }
  .footer-bottom { gap: 6px; }

  /* the floating request pill */
  .m-cta {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 60; left: 50%;
    bottom: calc(14px + env(safe-area-inset-bottom)); height: 48px; padding: 0 20px; border-radius: 999px;
    background: var(--accent); color: #fff; font-weight: 500; font-size: 15px; white-space: nowrap;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 10px 30px -8px rgba(52, 85, 255, 0.6);
    translate: -50% 140%; opacity: 0; pointer-events: none;
    transition: translate 0.5s var(--ease-cine), opacity 0.3s;
  }
  .m-cta.show { translate: -50% 0; opacity: 1; pointer-events: auto; }
}

/* ---------- Midnight accents (ACCENT_STYLE = "midnight" in build.py) ----------
   Big surfaces go midnight navy so the bright blue is saved for the buttons
   that matter: Request a project, Start a motion project, send. */

.midnight { --midnight: #111a27; --midnight-2: #1b2a42; --midnight-soft: rgba(17, 26, 39, 0.07); }

/* How it works: the open step matches the featured Motion card */
.midnight .hw-item.open {
  background:
    radial-gradient(80% 120% at 100% 120%, rgba(52, 85, 255, 0.4), transparent 70%),
    linear-gradient(160deg, #0d1320, var(--midnight) 50%, var(--midnight-2));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), inset 0 0 0 1px rgba(168, 197, 232, 0.12), 0 18px 40px -20px rgba(17, 26, 39, 0.6);
}
.midnight .hw-item.open .hw-num { background: rgba(168, 197, 232, 0.12); color: #a8c5e8; }
.midnight .hw-item.open .hw-body p { color: #aab4c2; }
.midnight .hw-num { background: var(--midnight-soft); color: var(--midnight); }
.midnight .hw-item:not(.open) .hw-step:hover .hw-num { background: rgba(17, 26, 39, 0.12); }
.midnight .hw-cta:hover { color: var(--text); }

/* service rows, the carousel's last card, work filters */
.midnight .svc:not(.svc-main):hover .svc-arrow, .midnight .work-more .svc-arrow { background: var(--midnight); color: #fff; }
.midnight .svc:not(.svc-main):hover, .midnight .svc:not(.svc-main):focus-visible { box-shadow: inset 0 0 0 1px rgba(17, 26, 39, 0.22), var(--shadow-float); }
.midnight .filter[aria-pressed="true"] { background: var(--midnight); color: #fff; box-shadow: none; }
.midnight .filter[aria-pressed="true"] span { color: rgba(255, 255, 255, 0.7); }
/* the second row steps down to a pale ice blue so the two levels read apart */
.midnight .subfilters .filter[aria-pressed="true"] { background: #dfe8f6; color: var(--midnight); box-shadow: inset 0 0 0 1px #c9d7ee; }
.midnight .subfilters .filter[aria-pressed="true"] span { color: #4a5b74; }
.midnight .work-more { background: radial-gradient(90% 70% at 100% 0%, rgba(17, 26, 39, 0.08), transparent 70%), var(--card); }

/* the little pieces: navy shapes with an ice blue highlight */
.midnight .art-graphic i:nth-child(3) { background: linear-gradient(170deg, var(--midnight-2) 0 55%, #a8c5e8 55%); box-shadow: 0 6px 18px rgba(17, 26, 39, 0.25); }
.midnight .art-brand .core { background: linear-gradient(150deg, var(--midnight-2), var(--midnight)); box-shadow: 0 6px 18px rgba(17, 26, 39, 0.3); }
.midnight .ideas { background: radial-gradient(40% 160% at 100% 50%, rgba(17, 26, 39, 0.06), transparent 70%), var(--card); }

/* the closing cards on the Work page and project pages: centered, title above the button */
.ideas.ideas-center {
  flex-direction: column; align-items: center; justify-content: center; text-align: center;
  gap: 14px; padding: clamp(36px, 5vw, 56px) 24px; border-radius: 30px;
  background: radial-gradient(70% 120% at 50% 120%, rgba(52, 85, 255, 0.12), transparent 70%), var(--card);
}
.midnight .ideas.ideas-center { background: radial-gradient(70% 120% at 50% 120%, rgba(17, 26, 39, 0.08), transparent 70%), var(--card); }
.ideas.ideas-center .lead { color: var(--text-2); }
.ideas.ideas-center .btn { align-self: center; margin-top: 6px; }

/* "See all work": a fanned stack of project frames fills the top of the card */
@media (max-width: 760px) {
  .work-more-art { position: relative; flex: 1; display: block; min-height: 120px; margin-bottom: 8px; }
  .work-more-art i {
    position: absolute; left: 50%; top: 50%; width: 38%; aspect-ratio: 4 / 5; margin: 0; border-radius: 16px;
    translate: -50% -50%; display: grid; place-items: center;
    transition: rotate 0.6s var(--ease-cine), translate 0.6s var(--ease-cine);
  }
  .work-more-art i:nth-child(1) { rotate: -12deg; translate: -88% -48%; background: linear-gradient(160deg, #e3e9f5, #cfdaee); box-shadow: inset 0 0 0 1px #c9d7ee; }
  .work-more-art i:nth-child(2) { rotate: 11deg; translate: -12% -50%; background: linear-gradient(170deg, #a8c5e8, #dfe8f6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.6); }
  .work-more-art i:nth-child(3) {
    color: #fff; background: radial-gradient(90% 70% at 80% 110%, rgba(52, 85, 255, 0.55), transparent 70%), linear-gradient(165deg, #0b1019, #111a27 55%, #1b2a42);
    box-shadow: 0 14px 30px -12px rgba(17, 26, 39, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .work-more-art i:nth-child(3) svg { width: 30%; height: auto; }
  .work-more:active .work-more-art i:nth-child(1) { rotate: -18deg; translate: -100% -48%; }
  .work-more:active .work-more-art i:nth-child(2) { rotate: 17deg; translate: 0% -50%; }
}

/* ---------- Touch performance ----------
   Phones and tablets keep the same look, minus the costs that make iOS stutter:
   live blur inside the 3D hero cards (their media covers the glass anyway), the
   four-layer edge blur (two layers give the same ramp), blend-mode grain over
   scrolling content, and loops that keep running off screen (.is-off, main.js). */

@media (hover: none) {
  .hc-card { backdrop-filter: none; -webkit-backdrop-filter: none; }
  .hero-light .hc-card { background: linear-gradient(155deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.72)); }
  .hc-card::after { mix-blend-mode: normal; opacity: 0.35; }
  .edge-blur i:nth-child(1), .edge-blur i:nth-child(3) { display: none; }
  .edge-blur i:nth-child(2) { backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); mask: linear-gradient(transparent 0%, #000 50%, #000 100%); -webkit-mask: linear-gradient(transparent 0%, #000 50%, #000 100%); }
  .svc-main::after, .hw-stage::after { mix-blend-mode: normal; opacity: 0.08; }
  .js .reveal > * { filter: blur(8px); }
  .is-off, .is-off * { animation-play-state: paused !important; }
}

/* How it works as still pictures (PROCESS_MOTION = False in build.py): each mini UI
   shows its finished state; only the swap between steps still fades. */
.hw-still .hw-panel * { animation: none !important; transition: none !important; }
.hw-still .hw-panel.on * { opacity: 1; }
.hw-still .hw-dl svg + svg { opacity: 1; scale: 1; }
.hw-still .hw-dl svg:first-of-type { opacity: 0; }
/* frozen at a natural moment: files downloaded, playhead mid-comp, cursor on the board */
.hw-still .hw-file .hw-dl { background: #28c840; box-shadow: none; }
.hw-still .hw-dl i { display: none; }
.hw-still .hw-ring { display: none; }
.hw-still .hw-head { left: 52%; }
.hw-still .hw-cursor { left: 60%; top: 68%; }
.hw-still .hw-caret { display: none; }

/* ---------- Notch header (NAV_STYLE = "notch" in build.py, experiment) ----------
   A thin graphite frame runs along the top of the screen with a notch hanging from
   its middle that holds the sunglasses smile. Hovering (or tapping) springs the notch
   open sideways into the menu with a little overshoot. Picking another page carries
   the open notch over (main.js) so it springs shut there instead of reloading. */

.nav-notch { --notch: #0b0e14; --frame: 24px; --corner: 28px; --sw: 72px; --spring: cubic-bezier(0.34, 1.42, 0.52, 1); }
.nav-notch::before { display: none; }
.notch-frame { position: absolute; inset: 0 0 auto; height: var(--frame); background: var(--notch); pointer-events: none; }
/* the frame rounds into the top corners of the page, like the inside of a bezel */
.notch-frame::before, .notch-frame::after { content: ""; position: absolute; top: 100%; width: var(--corner); height: var(--corner); }
.notch-frame::before { left: 0; background: radial-gradient(circle at 100% 100%, transparent calc(var(--corner) - 0.5px), var(--notch) var(--corner)); }
.notch-frame::after { right: 0; background: radial-gradient(circle at 0 100%, transparent calc(var(--corner) - 0.5px), var(--notch) var(--corner)); }
.nav-notch .nav-inner, .nav-notch.compact .nav-inner { display: flex; justify-content: center; width: 100%; height: auto; padding: 0; translate: none; pointer-events: none; }

.notch {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  width: 76px;
  height: 56px;
  /* content sits a little up into the frame, so it reads as centred in the whole
     dark shape, and stays at the same height when the notch opens */
  padding: calc(var(--frame) / 2) 4px 0;
  background: var(--notch);
  color: #f3f5f7;
  pointer-events: auto;
  filter: drop-shadow(0 10px 14px rgba(11, 14, 20, 0.16));
  transition: width 0.58s var(--spring), height 0.58s var(--spring);
}
/* long S-curved shoulders: each side eases out of the frame and settles into
   the flat bottom of the notch */
.notch::before, .notch::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: var(--sw); pointer-events: auto; /* the curves count as part of the hover area */
  background: var(--notch);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0C30 0 34 30 72 30V0Z'/%3E%3C/svg%3E") 0 var(--frame) / 100% calc(100% - var(--frame)) no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 30' preserveAspectRatio='none'%3E%3Cpath d='M0 0C30 0 34 30 72 30V0Z'/%3E%3C/svg%3E") 0 var(--frame) / 100% calc(100% - var(--frame)) no-repeat;
}
.notch::before { right: calc(100% - 1px); }
.notch::after { left: calc(100% - 1px); scale: -1 1; }

.notch-mark {
  grid-column: 2; display: grid; place-items: center; width: 52px; height: 32px; margin: 0; padding: 0;
  border: 0; border-radius: 12px; background: none; cursor: var(--hand);
}
/* only the sunglasses: the face is cropped to its top part, so the wink still plays */
.notch-shades { display: block; width: 32px; aspect-ratio: 320 / 146; overflow: hidden; transition: scale 0.6s var(--spring), rotate 0.6s var(--spring); }
.notch-shades img { display: block; width: 100%; height: auto; filter: invert(1); }
.notch-mark:hover .notch-shades { scale: 1.08; }
.nav-notch.open .notch-shades { rotate: -6deg; }

.notch-links { display: flex; align-items: center; gap: 4px; min-width: 0; overflow: hidden; white-space: nowrap; }
/* extra room above and below so the bounce isn't clipped (the clip is only there to hide them sideways when closed) */
.notch-links { padding-block: 14px; margin-block: -14px; }
.notch-l { grid-column: 1; justify-content: flex-end; }
.notch-r { grid-column: 3; justify-content: flex-start; }
.notch-links a {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border-radius: 999px;
  color: rgba(243, 245, 247, 0.72); font-size: 14.5px; font-weight: 500;
  /* they drop in from above and bounce as the notch opens (closest to the shades first) */
  opacity: 0; filter: blur(6px); translate: 0 -16px;
  transition: opacity 0.22s ease, filter 0.3s ease, translate 0.6s cubic-bezier(0.3, 1.9, 0.45, 1), color 0.2s, background 0.2s;
}
.notch-links a:hover, .notch-links a:focus-visible { color: #fff; background: rgba(255, 255, 255, 0.08); }
.notch-links a[aria-current] { color: #fff; }
.notch-links a[aria-current]::before { content: ""; width: 5px; height: 5px; border-radius: 1.5px; background: #a8c5e8; }
.notch-cta { background: var(--accent); color: #fff !important; margin-left: 6px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25); }
.notch-cta:hover { background: var(--accent-hover) !important; }

.nav-notch.open .notch { width: min(540px, calc(100vw - 32px)); height: 68px; padding-top: 0; }
.nav-notch.open .notch-links a { opacity: 1; filter: none; translate: none; transition-delay: calc(0.1s + var(--d, 0s)); }
.notch-l a:nth-child(2) { --d: 0s; } .notch-r a:nth-child(1) { --d: 0.05s; } .notch-l a:nth-child(1) { --d: 0.1s; }

/* phones: the same notch, a little smaller, stretching sideways on a tap */
@media (max-width: 760px) {
  .nav-notch { --frame: 14px; --corner: 20px; --sw: 46px; }
  .notch { width: 56px; height: 46px; padding-inline: 2px; }
  .notch-mark { width: 44px; height: 30px; }
  .notch-shades { width: 28px; }
  .notch-links { gap: 0; }
  .notch-links a { height: 30px; padding: 0 9px; font-size: 13.5px; }
  .notch-cta { margin-left: 4px; padding: 0 12px !important; }
  .nav-notch.open .notch { width: calc(100vw - 20px); height: 53px; }
}

@media (prefers-reduced-motion: reduce) {
  .notch, .notch-links a, .notch-shades { transition-duration: 0.01s !important; transition-delay: 0s !important; }
}

/* ---------- Hero reel (HERO_LAYOUT = "reel" in build.py) ----------
   The hero keeps only the copy, sitting high; one wide video peeks up from the
   bottom of the first screen. It is laid out at full width and main.js scales it
   down (--s) so it starts as a big rounded card and grows to the edges on scroll. */

.hero.has-reel { min-height: 0; height: auto; padding: clamp(130px, 19vh, 190px) 0 clamp(84px, 12vh, 124px); align-items: start; }
.hero.has-reel .hero-inner { gap: 18px; }
.hreel { position: relative; z-index: 1; padding: 0 0 clamp(40px, 6vw, 80px); margin-top: -1px; }
.hreel-frame {
  position: relative;
  /* the fully grown size: a clear margin to the screen edges */
  width: calc(100vw - 2 * clamp(28px, 4.5vw, 72px));
  max-width: 1500px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--r, 28px);
  overflow: hidden;
  background: var(--ink);
  transform: scale(var(--s, 0.8));
  transform-origin: 50% 0;
  will-change: transform;
  box-shadow: 0 40px 80px -40px rgba(21, 25, 34, 0.45);
}
.hreel-frame video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* on load the reel resolves out of a blur right after the hero buttons, then its controls pop in */
.hreel { animation: hreel-in 1.3s var(--ease-cine) 0.95s backwards; }
@keyframes hreel-in { from { opacity: 0; filter: blur(24px); translate: 0 24px; } }
.hreel-controls { --pd: 1.75s; }
@media (prefers-reduced-motion: reduce) { .hreel { animation: none; } }
.hreel-controls { position: absolute; left: 24px; bottom: 24px; margin: 0; opacity: 1; pointer-events: auto; }
@media (max-width: 760px) {
  .hero.has-reel { height: auto; min-height: 0; padding: 150px 0 68px; }
  .hreel { padding-bottom: 8px; }
  .hreel-frame { width: calc(100vw - 2 * 12px); transform: none; border-radius: 22px; }
  .hreel-controls { left: 10px; bottom: 10px; scale: 0.72; transform-origin: 0 100%; }
}
@media (prefers-reduced-motion: reduce) { .hreel-frame { transform: none; } }

/* ---------- How it works, simple pictures (PROCESS_VISUALS = "simple" in build.py) ----------
   Plain wireframes in the spirit of a product UI: blank fields, empty frames and bars.
   Sized in --u (1% of the stage width) like the detailed set, so the stage never shifts. */

.hw-simple .hw-panel { padding: calc(6 * var(--u)); }
.hs-card { width: 100%; border-radius: calc(3.4 * var(--u)); overflow: hidden; font-size: calc(2.3 * var(--u)); line-height: 1.35;
  box-shadow: 0 1px 2px rgba(21, 25, 34, 0.08), 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2.5 * var(--u)) rgba(21, 25, 34, 0.32); }
.hs-light { background: #fff; color: #151922; box-shadow: inset 0 0 0 1px #e3e7ec, 0 1px 2px rgba(21, 25, 34, 0.06), 0 calc(3 * var(--u)) calc(7 * var(--u)) calc(-2.5 * var(--u)) rgba(21, 25, 34, 0.25); }
.hs-dark { background: #1c1e23; color: #e9ebef; }
.hs-bar { display: block; height: calc(1.7 * var(--u)); border-radius: 99px; background: #e6e9ee; }
.hs-dark .hs-bar { background: rgba(255, 255, 255, 0.14); }

/* 1. brief */
.hs-head { padding: calc(3 * var(--u)) calc(4.4 * var(--u)); background: var(--accent); color: #fff; font-family: var(--mono); font-size: calc(1.9 * var(--u)); letter-spacing: 0.08em; text-transform: uppercase; }
body.midnight .hs-head { background: linear-gradient(135deg, #1b2a42, #111a27); }
.hs-form { display: grid; gap: calc(3 * var(--u)); padding: calc(4.4 * var(--u)); }
.hs-row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(2.6 * var(--u)); }
.hs-field { display: grid; gap: calc(1.4 * var(--u)); }
.hs-input { display: flex; align-items: center; gap: calc(1.6 * var(--u)); height: calc(6.6 * var(--u)); padding: 0 calc(2 * var(--u)); border-radius: calc(1.6 * var(--u)); background: #f3f5f8; box-shadow: inset 0 0 0 1px #e3e7ec; }
.hs-area { height: calc(13 * var(--u)); }
.hs-clip { display: grid; place-items: center; width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); border-radius: calc(0.9 * var(--u)); background: #e6e9ee; color: #8a94a3; }
.hs-clip svg { width: 62%; height: 62%; }
.hs-upload .hs-bar { background: #dfe3e9; }
.hs-btn { display: grid; place-items: center; height: calc(7.4 * var(--u)); margin-top: calc(0.6 * var(--u)); border-radius: calc(1.9 * var(--u)); background: var(--accent); color: #fff; font-weight: 500; font-size: calc(2.4 * var(--u)); }

/* 2. storyboard */
.hs-chrome { display: flex; align-items: center; gap: calc(2 * var(--u)); height: calc(7.6 * var(--u)); padding: 0 calc(2.8 * var(--u)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }
.hs-chrome b { flex: 1; text-align: center; font-weight: 500; opacity: 0.75; }
.hs-dots { display: flex; gap: calc(1 * var(--u)); }
.hs-dots i { width: calc(1.8 * var(--u)); height: calc(1.8 * var(--u)); border-radius: 50%; background: #ff5f57; }
.hs-dots i:nth-child(2) { background: #febc2e; }
.hs-dots i:nth-child(3) { background: #28c840; }
.hs-share { padding: calc(0.9 * var(--u)) calc(2.2 * var(--u)); border-radius: calc(1 * var(--u)); background: var(--accent); color: #fff; font-size: calc(1.9 * var(--u)); font-weight: 500; }
.hs-tabs { display: flex; align-items: center; gap: calc(2 * var(--u)); padding: calc(3.4 * var(--u)) calc(4 * var(--u)) 0; color: rgba(233, 235, 239, 0.55); }
.hs-tabs b { padding-left: calc(2 * var(--u)); border-left: 1px solid rgba(255, 255, 255, 0.18); font-weight: 500; color: #fff; }
.hs-frames { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(3 * var(--u)) calc(2.4 * var(--u)); padding: calc(3.4 * var(--u)) calc(4 * var(--u)) calc(4.4 * var(--u)); }
.hs-frame { display: grid; gap: calc(1.4 * var(--u)); text-align: center; }
.hs-frame small { font-size: calc(1.9 * var(--u)); color: rgba(233, 235, 239, 0.6); }
.hs-shot { display: grid; place-items: center; aspect-ratio: 16 / 10; border-radius: calc(1.4 * var(--u)); background: #26292f; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.hs-frame:nth-child(5) .hs-shot { background: #2c3038; }
.hs-lines { display: grid; justify-items: center; gap: calc(0.8 * var(--u)); width: 34%; }
.hs-lines i { display: block; height: calc(0.8 * var(--u)); width: 80%; border-radius: 99px; background: rgba(255, 255, 255, 0.22); }
.hs-lines i:nth-child(2) { width: 56%; }
.hs-lines i:nth-child(3) { width: 100%; }

/* 3. edit */
.hs-screen { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 9; background: #08090b; }
.hs-play { display: grid; place-items: center; width: calc(10 * var(--u)); height: calc(10 * var(--u)); border-radius: 50%; background: rgba(255, 255, 255, 0.1); color: #fff; }
.hs-play svg { width: 40%; height: 40%; margin-left: 8%; }
.hs-scrub { position: absolute; left: calc(3 * var(--u)); right: calc(3 * var(--u)); bottom: calc(2.4 * var(--u)); display: flex; align-items: center; gap: calc(2 * var(--u)); }
.hs-scrub > span { flex: 1; height: calc(0.6 * var(--u)); border-radius: 99px; background: rgba(255, 255, 255, 0.16); }
.hs-scrub > span i { display: block; width: 40%; height: 100%; border-radius: inherit; background: var(--accent); }
.hs-scrub small { font-family: var(--mono); font-size: calc(1.8 * var(--u)); color: rgba(255, 255, 255, 0.7); }
.hs-tracks { display: grid; gap: calc(1.8 * var(--u)); padding: calc(3.4 * var(--u)) calc(3.4 * var(--u)) calc(3.8 * var(--u)); }
.hs-track { display: grid; grid-template-columns: calc(13 * var(--u)) 1fr; align-items: center; }
.hs-track small { font-size: calc(1.9 * var(--u)); color: rgba(233, 235, 239, 0.6); }
.hs-track > span { height: calc(3.6 * var(--u)); border-radius: calc(1 * var(--u)); background: rgba(255, 255, 255, 0.06); overflow: hidden; }
.hs-track i { display: block; height: 100%; border-radius: inherit; }

/* 4. review + delivery */
.hs-rhead { display: flex; align-items: center; justify-content: space-between; padding: calc(3.4 * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid #eceff3; }
.hs-rhead b { font-weight: 600; font-size: calc(2.6 * var(--u)); }
.hs-count { padding: calc(0.7 * var(--u)) calc(1.8 * var(--u)); border-radius: 99px; background: var(--accent-soft, rgba(52, 85, 255, 0.1)); color: var(--accent); font-size: calc(1.9 * var(--u)); font-weight: 500; }
.hs-note { display: grid; grid-template-columns: auto 1fr auto; gap: calc(2.2 * var(--u)); align-items: start; padding: calc(2.8 * var(--u)) calc(4 * var(--u)); border-bottom: 1px solid #eceff3; }
.hs-av { display: grid; place-items: center; width: calc(5.4 * var(--u)); height: calc(5.4 * var(--u)); border-radius: 50%; background: #eceff3; color: #626d79; font-weight: 600; font-size: calc(2 * var(--u)); }
.hs-note.me .hs-av { background: var(--accent); color: #fff; }
body.midnight .hs-note.me .hs-av { background: #111a27; }
.hs-txt { display: grid; gap: calc(0.4 * var(--u)); color: #3b4350; }
.hs-txt b { color: #151922; font-weight: 600; }
.hs-txt small { margin-top: calc(0.6 * var(--u)); color: #8a94a3; font-size: calc(1.8 * var(--u)); }
.hs-note em { font-style: normal; font-family: var(--mono); font-size: calc(1.9 * var(--u)); color: var(--accent); }
.hs-delivered { display: flex; align-items: center; gap: calc(2.2 * var(--u)); margin: calc(3 * var(--u)) calc(4 * var(--u)) calc(3.6 * var(--u)); padding: calc(2.2 * var(--u)) calc(2.6 * var(--u)); border-radius: calc(2 * var(--u)); background: #f3f5f8; box-shadow: inset 0 0 0 1px #e3e7ec; }
.hs-delivered > span:nth-child(2) { flex: 1; display: grid; }
.hs-delivered b { font-weight: 600; }
.hs-delivered small { color: #8a94a3; font-size: calc(1.8 * var(--u)); }
.hs-ok { display: grid; place-items: center; width: calc(4.8 * var(--u)); height: calc(4.8 * var(--u)); border-radius: 50%; background: rgba(40, 200, 64, 0.14); color: #1f9d3a; }
.hs-ok svg, .hs-get svg { width: 55%; height: 55%; }
.hs-get { display: grid; place-items: center; width: calc(4.8 * var(--u)); height: calc(4.8 * var(--u)); border-radius: calc(1.3 * var(--u)); background: #fff; box-shadow: inset 0 0 0 1px #e3e7ec; color: #151922; }
@media (max-width: 900px) { .hw-simple .hw-stage { --u: 1.05cqw; } .hw-simple .hw-panel { padding: calc(5 * var(--u)); } }

/* ---------- Footer ----------
   A short "get in touch" list set big with small mono tags, a one-line status bar,
   and the bycoopr wordmark fading into the bottom edge of the page. */
.footer { padding: clamp(72px, 10vw, 136px) 0 0; border-top: 0; overflow: hidden; font-size: 14px; }
.foot-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-2); }
.foot-eyebrow::before { content: ""; width: 7px; height: 7px; border-radius: 2px; background: var(--accent); }
body.midnight .foot-eyebrow::before { background: #111a27; }
.foot-links { display: grid; justify-items: start; margin: clamp(18px, 2.4vw, 30px) 0 clamp(64px, 9vw, 120px); }
.foot-link { display: inline-flex; align-items: flex-start; gap: clamp(10px, 1.2vw, 16px); color: var(--text); font-family: var(--display); font-weight: 500; font-size: clamp(46px, 6.4vw, 100px); line-height: 1.04; letter-spacing: -0.035em; white-space: nowrap; }
.foot-word { transition: translate 0.55s cubic-bezier(0.3, 1.5, 0.5, 1), color 0.3s ease; }
.foot-tag { display: inline-flex; align-items: center; gap: 6px; margin-top: 0.62em; font-family: var(--mono); font-size: 12px; font-weight: 500; letter-spacing: 0.08em; line-height: 1; text-transform: uppercase; color: var(--text-3); transition: color 0.3s ease, translate 0.55s cubic-bezier(0.3, 1.5, 0.5, 1); }
.foot-tag svg { width: 12px; height: 12px; opacity: 0; translate: -4px 4px; transition: opacity 0.25s ease, translate 0.4s cubic-bezier(0.3, 1.5, 0.5, 1); }
.foot-link:hover .foot-word, .foot-link:focus-visible .foot-word { translate: 14px 0; color: var(--accent); }
body.midnight .foot-link:hover .foot-word, body.midnight .foot-link:focus-visible .foot-word { color: #1b2a42; }
.foot-link:hover .foot-tag, .foot-link:focus-visible .foot-tag { translate: 14px 0; color: var(--text); }
.foot-link:hover .foot-tag svg, .foot-link:focus-visible .foot-tag svg { opacity: 1; translate: none; }
.footer .footer-bottom { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 12px 24px; padding: 20px 0; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-3); }
.foot-status { display: inline-flex; align-items: center; gap: 9px; color: var(--text); }
.foot-status i { position: relative; width: 7px; height: 7px; border-radius: 50%; background: #28c840; }
.foot-status i::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid #28c840; opacity: 0; animation: foot-ping 2.4s ease-out infinite; }
@keyframes foot-ping { 0% { opacity: 0.7; scale: 0.5; } 100% { opacity: 0; scale: 1.6; } }
.foot-tz-s { display: none; }
.foot-top { color: var(--text-2); transition: color 0.2s; }
.foot-top:hover { color: var(--text); }
/* the "On repeat" card to the right of the links */
.foot-main { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 32px; margin-bottom: clamp(56px, 8vw, 104px); }
.foot-main .foot-links { margin-bottom: 0; }
.song {
  position: relative; display: grid; gap: 16px; width: 340px; padding: 18px; border-radius: 26px;
  background: radial-gradient(120% 90% at 100% 0%, #24365a 0%, transparent 60%), linear-gradient(160deg, #1b2a42, #0d1420);
  color: #f3f5f7; box-shadow: 0 30px 60px -30px rgba(17, 26, 39, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  rotate: 2deg; transition: rotate 0.6s cubic-bezier(0.3, 1.5, 0.5, 1), translate 0.6s cubic-bezier(0.3, 1.5, 0.5, 1);
}
.song:hover, .song:focus-visible { rotate: 0deg; translate: 0 -4px; }
.song-top { display: flex; align-items: center; justify-content: space-between; }
.song-label { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(243, 245, 247, 0.6); }
.song-eq { display: flex; align-items: flex-end; gap: 3px; height: 14px; }
.song-eq i { width: 3px; height: 100%; border-radius: 2px; background: #1ed760; transform-origin: bottom; animation: song-eq 1s ease-in-out infinite alternate; }
.song-eq i:nth-child(2) { animation-delay: -0.4s; animation-duration: 0.8s; }
.song-eq i:nth-child(3) { animation-delay: -0.7s; animation-duration: 1.2s; }
.song-eq i:nth-child(4) { animation-delay: -0.2s; animation-duration: 0.9s; }
@keyframes song-eq { from { scale: 1 0.25; } to { scale: 1 1; } }
.song-body { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px; }
.song-cover { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 14px; overflow: hidden; background: linear-gradient(140deg, #3455ff, #a8c5e8); box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.6); }
.song-cover > img { width: 100%; height: 100%; object-fit: cover; }
.song-shades { display: block; width: 40px; aspect-ratio: 320 / 146; overflow: hidden; }
.song-shades img { display: block; width: 100%; height: auto; filter: invert(1); }
.spot { width: 18px; height: 18px; flex: none; }
.song:hover .song-foot { color: #1ed760; }
.song-foot { transition: color 0.3s ease; }
.song-meta { display: grid; gap: 2px; min-width: 0; }
.song-meta b { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.song-meta small { font-size: 14px; color: rgba(243, 245, 247, 0.62); }
.song-play { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: #1ed760; color: #0a0d12; box-shadow: 0 6px 16px -6px rgba(30, 215, 96, 0.55); transition: scale 0.4s cubic-bezier(0.3, 1.6, 0.5, 1); }
.song-play svg { width: 16px; height: 16px; margin-left: 2px; }
.song:hover .song-play { scale: 1.1; }
.song-bar { height: 3px; border-radius: 99px; background: rgba(255, 255, 255, 0.14); overflow: hidden; }
.song-bar i { display: block; width: 38%; height: 100%; border-radius: inherit; background: #1ed760; animation: song-bar 28s linear infinite; }
@keyframes song-bar { from { width: 18%; } to { width: 96%; } }
.song-foot { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: rgba(243, 245, 247, 0.7); }
.song-foot svg { width: 14px; height: 14px; transition: translate 0.3s ease; }
.song:hover .song-foot svg { translate: 2px -2px; }
@media (max-width: 900px) { .foot-main { grid-template-columns: 1fr; justify-items: start; } .song { rotate: -1.5deg; } }
@media (prefers-reduced-motion: reduce) { .song-eq i, .song-bar i { animation: none; } }
.footer .footer-bottom { margin-bottom: 8px; }
/* Footer set apart: a faint cool wash and a dashed rule along the top edge */
.footer { position: relative; background: radial-gradient(120% 70% at 85% 100%, rgba(52, 85, 255, 0.07), transparent 70%), linear-gradient(180deg, rgba(17, 26, 39, 0) 0%, rgba(17, 26, 39, 0.045) 100%), var(--bg); }
.footer::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), 100%); translate: -50% 0; height: 1px; padding-inline: var(--gutter); background: repeating-linear-gradient(90deg, rgba(21, 25, 34, 0.22) 0 6px, transparent 6px 12px) content-box; pointer-events: none; }
@media (max-width: 760px) {
  .footer { padding: 64px 0 0; }
  .foot-link { font-size: 10.6vw; white-space: nowrap; }
  .foot-tag { font-size: 10px; }
  .footer .footer-bottom { grid-template-columns: 1fr 1fr; font-size: 10px; letter-spacing: 0.04em; white-space: nowrap; }
  .foot-tz { display: none; }
  .foot-tz-s { display: inline; }
  .footer .footer-bottom > :nth-child(even) { text-align: right; }
}
@media (prefers-reduced-motion: reduce) { .foot-status i::after { animation: none; } }

/* ---------- Midnight brief (CHAT_STYLE = "midnight") ----------
   The project brief becomes a midnight navy card with white pieces inside:
   the answer buttons, your replies and the typing box stay bright so the
   card reads navy without feeling heavy. */
.chat.night {
  --bg: #ffffff;
  --surface: #111a27;
  --card-hover: #eef1f5;
  --text: #151922;
  --text-2: #626d79;
  --text-3: #8a94a0;
  --line: rgba(255, 255, 255, 0.1);
  --line-strong: rgba(21, 25, 34, 0.1);
  --link: #3455ff;
  --accent-soft: rgba(52, 85, 255, 0.1);
  position: relative;
  isolation: isolate;
  background:
    radial-gradient(90% 60% at 50% -10%, rgba(168, 197, 232, 0.22), transparent 60%),
    radial-gradient(70% 50% at 100% 110%, rgba(52, 85, 255, 0.18), transparent 70%),
    linear-gradient(180deg, #22365a 0%, #16233a 55%, #111a27 100%);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 40px 80px -36px rgba(17, 26, 39, 0.55);
}
/* text that sits straight on the navy turns light */
.chat.night .brief-title .name, .chat.night .msg.bot { color: #f3f5f7; }
.chat.night .brief-title .sub, .chat.night .msg-edit { color: rgba(243, 245, 247, 0.6); }
.chat.night .brief-back { color: rgba(243, 245, 247, 0.75); }
.chat.night .brief-back:hover, .chat.night .msg-edit:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.chat.night .brief-progress { background: rgba(255, 255, 255, 0.14); }
.chat.night .brief-progress i { background: linear-gradient(90deg, #a8c5e8, #ffffff); }
.chat.night .msg.typing span { background: rgba(243, 245, 247, 0.6); }
/* the white pieces */
.chat.night .msg.me { background: #fff; color: #151922; box-shadow: 0 8px 20px -10px rgba(5, 9, 15, 0.5); }
.chat.night .chip { background: rgba(255, 255, 255, 0.94); color: #151922; box-shadow: 0 6px 16px -10px rgba(5, 9, 15, 0.6); }
@media (hover: hover) { .chat.night .chip:hover { background: #fff; color: #151922; box-shadow: 0 0 0 3px rgba(168, 197, 232, 0.35), 0 6px 16px -10px rgba(5, 9, 15, 0.6); } }
.chat.night .chip[aria-pressed="true"] { background: #fff; color: #3455ff; box-shadow: 0 0 0 2px #3455ff; }
.chat.night .chip-go, .chat.night .chip-go:hover { background: #3455ff; color: #fff; box-shadow: 0 6px 16px -6px rgba(52, 85, 255, 0.7); }
.chat.night .prompt-form { background: #fff; box-shadow: 0 14px 30px -16px rgba(5, 9, 15, 0.7); }
.chat.night .prompt-form:focus-within { box-shadow: 0 0 0 3px rgba(168, 197, 232, 0.55), 0 14px 30px -16px rgba(5, 9, 15, 0.7); }
.chat.night .brief-summary { background: #fff; color: #151922; --line: #e3e7ec; box-shadow: 0 10px 24px -14px rgba(5, 9, 15, 0.6); }
.chat.night .brief-summary .msg-edit { color: #626d79; }
.chat.night .file-row .file-chip { box-shadow: none; }
.paper .chat.night.dropping { box-shadow: 0 0 0 2px #a8c5e8, 0 40px 80px -36px rgba(17, 26, 39, 0.55); }
.chat.night :focus-visible { outline-color: #a8c5e8; }

/* ---------- "made ya look" cursor (LOOK_CURSOR in main.js) ----------
   Liquid glass that inverts whatever is behind it (like the old Framer site's
   "Watch this" pill), with a faint dark tint, sitting beside the glove.
   The dark tint is strong enough that the white label reads on any art while
   the colours still flip (blue art shows bronze glass, orange shows navy). */
.has-look :is(.work-media, .work-hero-media, .set-frame, .hreel-frame) { cursor: var(--hand); }
.look-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999;
  pointer-events: none;
  padding: 6px 11px;
  border-radius: 999px;
  font-family: var(--font);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  color: #fff;
  background: rgba(10, 13, 18, 0.48);
  -webkit-backdrop-filter: invert(1) blur(10px) saturate(1.2);
  backdrop-filter: invert(1) blur(10px) saturate(1.2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 0 0 1px rgba(255, 255, 255, 0.18), 0 8px 20px -10px rgba(5, 9, 15, 0.45);
  translate: -200px -200px;
  transform-origin: 0 0;
  opacity: 0;
  scale: 0.85;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
  transition: opacity 0.22s ease, scale 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: translate, scale, opacity;
}
.look-cursor.on { opacity: 1; scale: 1; }
@media (prefers-reduced-motion: reduce) { .look-cursor { transition: opacity 0.15s; scale: 1; } }

/* Shades cursor (LOOK_STYLE = "shades" in main.js): over work the sunglasses replace the
   pointer and slam in with a bounce, like creatoroly's eyes emoji */
.has-shades :is(.work-media, .work-hero-media, .set-frame, .hreel-frame) { cursor: none; }
.has-shades :is(.work-media, .work-hero-media, .set-frame, .hreel-frame) :is(button, .reel-controls, .player-btn) { cursor: var(--hand); }
.look-shades { position: fixed; left: 0; top: 0; z-index: 9999; pointer-events: none; translate: -200px -200px; will-change: translate; }
.look-shades img {
  display: block; width: 110px; height: auto; margin: -24px 0 0 -55px;
  /* plain white shades; just the soft shadow underneath */
  filter: brightness(0) invert(1) drop-shadow(0 6px 12px rgba(5, 9, 15, 0.35));
  opacity: 0; scale: 0; transition: opacity 0.1s ease, scale 0.12s ease-in;
}
.look-shades.on img { opacity: 1; scale: 1; transition: none; animation: shades-slam 0.62s cubic-bezier(0.2, 0.9, 0.3, 1) both; }
@keyframes shades-slam {
  0% { scale: 2.1; rotate: -14deg; opacity: 0; }
  32% { scale: 0.82; rotate: 5deg; opacity: 1; }
  52% { scale: 1.12; rotate: -3deg; }
  72% { scale: 0.96; rotate: 1deg; }
  100% { scale: 1; rotate: 0deg; }
}
@media (prefers-reduced-motion: reduce) { .look-shades.on img { animation: none; } }

/* Related on phones: "More work" shows its three projects side by side as small
   thumbnails (all one shape so the row lines up), with just the title underneath */
@media (max-width: 760px) {
  .work-list.related { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  .work-list.related .work-item { flex: none; max-width: none; width: auto !important; }
  .work-list.related .work-media { border-radius: 12px; }
  .work-list.related .work-media > img, .work-list.related .work-media > .ph { aspect-ratio: 1 / 1 !important; height: auto; }
  .work-list.related.rel-tall .work-media > img, .work-list.related.rel-tall .work-media > .ph { aspect-ratio: 4 / 5 !important; }
  .work-list.related .work-link { gap: 8px; }
  .work-list.related .work-info { display: block; padding: 0 2px; }
  .work-list.related .work-title { font-size: 12.5px; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .work-list.related :is(.work-client, .work-cat, .work-year) { display: none; }
}