/* Daydark: dark TV-wall sibling of edpryor.com.
   Layout: sticky header, label + filter pills, mosaic of mixed-shape "screens", then page content. */

@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin.woff2") format("woff2"); unicode-range: U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+2074,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url("fonts/inter-var-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02AF,U+0304,U+0308,U+0329,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF; }

:root {
  color-scheme: dark;
  /* Daydark palette */
  --bg: #0a0912;        /* screen-off black, a touch of purple */
  --surface: #0f0d1c;
  --surface-2: #15122a;
  --line: #262043;
  --line-soft: #1d1934;
  --ink: #f4f2ff;
  --soft: #c9c4ea;
  --muted: #a9a3d6;
  --pink: #ff5fbf;
  --blue: #4d7cff;
  --purple: #8a63ff;
  --lilac: #c9b8ff;
  --cobalt: #2b2dbf;
  --night: #1a1440;
  /* type */
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mono: "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  /* space */
  --radius: 14px;
  --gap: 14px;
  --pad-l: max(clamp(16px, 3vw, 32px), env(safe-area-inset-left, 0px));
  --pad-r: max(clamp(16px, 3vw, 32px), env(safe-area-inset-right, 0px));
}

* { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--sans); font-size: 15px; line-height: 1.45;
  -webkit-font-smoothing: antialiased; overflow-x: hidden;
}
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: var(--bg); }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--pink); }
:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { text-wrap: balance; }
.wrap { max-width: 1464px; /* 1400px of content plus side padding */ margin: 0 auto; padding-left: var(--pad-l); padding-right: var(--pad-r); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- film grain over everything ---------- */
/* Grain sits behind the content, so it textures the page but never the footage */
main, .site-footer { position: relative; z-index: 1; }
.grain { position: fixed; inset: -50%; width: 200%; height: 200%; pointer-events: none; z-index: 0; opacity: .16; mix-blend-mode: overlay; animation: grain .45s steps(4) infinite; }
.grain svg { width: 100%; height: 100%; display: block; }
@keyframes grain { 0%{transform:translate(0,0)} 20%{transform:translate(-8%,4%)} 40%{transform:translate(6%,-6%)} 60%{transform:translate(-4%,8%)} 80%{transform:translate(8%,2%)} 100%{transform:translate(0,0)} }
@keyframes blink { 0%,49%{opacity:1} 50%,100%{opacity:0} }
@keyframes roll { 0%{transform:translateY(-120%)} 100%{transform:translateY(620%)} }
.rec { color: var(--pink); animation: blink 1.2s infinite; }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding-block: clamp(16px, 1.6vw, 22px);
  background: color-mix(in srgb, var(--bg) 84%, transparent);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent; transition: border-color .25s;
}
.site-header.scrolled { border-bottom-color: var(--line-soft); }
.logo { font-weight: 900; font-size: clamp(28px, 1.8vw + 18px, 42px); letter-spacing: .04em; line-height: 1; text-shadow: -2px 0 var(--pink), 2px 0 var(--blue); }
.logo:hover { color: var(--ink); }
.site-header nav { display: flex; align-items: center; gap: clamp(10px, 1.1vw, 16px); font-weight: 600; font-size: clamp(13px, .3vw + 12px, 14px); letter-spacing: .12em; text-transform: uppercase; }
.site-header nav .slash { color: var(--pink); }
.site-header nav a { opacity: .72; transition: opacity .2s; }
.site-header nav a:hover, .site-header nav a[aria-current] { opacity: 1; color: var(--ink); }
@media (max-width: 560px) {
  .logo { font-size: 26px; }
  .site-header nav { gap: 8px; font-size: 12px; letter-spacing: .1em; }
  /* phones: Work / Contact (the header only has those two now) */
}

/* ---------- label + filter pills ---------- */
.intro { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 16px; padding-block: 12px 18px; }
.label { margin: 0; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; line-height: 1.4; color: var(--soft); }
.label .rec { font-size: 10px; }
.label .slash { color: var(--pink); margin: 0 4px; }
.filters { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; max-width: 100%; }
.filters::-webkit-scrollbar { display: none; }
.filters a {
  flex: none; display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px;
  border-radius: 999px; border: 1px solid #2e2850; font-size: 13px; font-weight: 500; color: var(--ink);
  transition: border-color .2s, background .2s, color .2s;
}
.filters a:hover { border-color: var(--purple); color: var(--ink); }
.filters a[aria-current="page"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
@media (max-width: 699px) {
  .intro { flex-direction: column; align-items: flex-start; }
  .filters { margin: 0 calc(-1 * var(--pad-r)) 0 calc(-1 * var(--pad-l)); padding: 0 var(--pad-r) 0 var(--pad-l); max-width: 100vw; }
}

/* ---------- the TV wall ---------- */
.mosaic { display: flex; align-items: stretch; gap: var(--gap); margin: 0 auto; }
.mosaic.few { max-width: calc(var(--n) * 480px); }
.col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: var(--gap); }
.tile {
  position: relative; display: block; overflow: hidden; border-radius: var(--radius);
  aspect-ratio: var(--r, 16 / 9); flex: var(--g, 1) 1 auto; max-width: 100%;
  background: #07060d; color: var(--ink); transition: box-shadow .2s;
}
/* At rest: clean footage, no TV effects. Hover (or a tap on phones, via .tuning) fires a quick channel-change burst. */
.tile:hover, .tile.tuning { color: var(--ink); }
.tile .media, .tile video, .tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); display: block; }
.tile .media, .tile video, .tile img { transition: transform .6s cubic-bezier(.2,.7,.2,1); }
.tile:hover .media, .tile:hover video, .tile:hover img, .tile.tuning video, .tile.tuning img, .tile.tuning .media { transform: scale(1.04); }
.tile .static { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0; pointer-events: none; }
.tile .static svg { width: 100%; height: 100%; display: block; }
.tile:hover .static, .tile.tuning .static { animation: burst .45s ease-out; }
.tile .roller { position: absolute; left: 0; right: 0; top: 0; height: 16%; opacity: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); pointer-events: none; }
.tile:hover .roller, .tile.tuning .roller { opacity: 1; animation: roll 1.6s linear infinite; }
.tile .scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .25s; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px); }
.tile:hover .scan, .tile.tuning .scan { opacity: 1; }
.tile:hover video, .tile:hover img, .tile:hover .media, .tile.tuning video, .tile.tuning img, .tile.tuning .media { animation: jitter .3s steps(3) 1; }
@keyframes burst { 0% { opacity: .85; } 60% { opacity: .35; } 100% { opacity: .12; } }
@keyframes jitter { 0% { translate: -4px 0; } 33% { translate: 3px 0; } 66% { translate: -2px 0; } 100% { translate: 0 0; } }
.tile:hover .static { opacity: .12; }
.tile .ch { opacity: 0; transition: opacity .2s; }
.tile:hover .ch, .tile.tuning .ch, .tile:focus-visible .ch { opacity: 1; }
.tile .ch { position: absolute; top: 12px; left: 14px; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; color: rgba(244,242,255,.92); text-shadow: 0 0 8px rgba(244,242,255,.45); }
.tile .meta {
  position: absolute; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; gap: 2px; min-width: 0;
  padding: 44px 16px 14px; background: linear-gradient(to top, rgba(7,6,13,.9), rgba(7,6,13,0));
  transform: translateY(4px); transition: transform .3s;
}
.tile:hover .meta { transform: none; }
.tile .artist, .tile .title { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tile .artist { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.tile .title { font-size: 14px; color: var(--soft); }
.tile.signal .bars { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tile.signal .bars i:nth-child(1){background:var(--ink)} .tile.signal .bars i:nth-child(2){background:var(--lilac)} .tile.signal .bars i:nth-child(3){background:var(--purple)}
.tile.signal .bars i:nth-child(4){background:var(--blue)} .tile.signal .bars i:nth-child(5){background:var(--cobalt)} .tile.signal .bars i:nth-child(6){background:var(--pink)} .tile.signal .bars i:nth-child(7){background:var(--night)}
.tile.signal .nosig { position: absolute; inset: 0; display: grid; place-items: center; }
.tile.signal .nosig span { padding: 10px 16px; background: var(--bg); font-family: var(--mono); font-size: 14px; font-weight: 700; letter-spacing: .14em; }
@media (max-width: 699px) {
  .mosaic { --gap: 10px; }
  .tile .title { display: none; }
  .tile .meta { padding: 32px 12px 10px; }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(64px, 8vw, 112px) 0; }
.h2 { margin: 0; font-size: clamp(32px, 4.4vw, 64px); font-weight: 900; line-height: .95; letter-spacing: -0.03em; text-transform: uppercase; }
.h2.glitch { text-shadow: -3px 0 rgba(255,95,191,.6), 3px 0 rgba(77,124,255,.6); }
.head-row { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 20px clamp(24px, 4vw, 64px); margin-bottom: 28px; }
.head-row p, .lede { margin: 0; max-width: 52ch; font-size: 17px; line-height: 1.55; color: var(--soft); }
.about { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px clamp(24px, 4vw, 64px); }
.about .h2 { flex: 1 1 420px; font-size: clamp(36px, 5vw, 76px); }
.about .lede { flex: 1 1 420px; font-size: 18px; }
/* Louder headline: bigger, tighter, harder pink/blue split */
/* Louder headline type, same side-by-side layout as before */
.about .h2.loud { font-size: clamp(40px, 5.3vw, 80px); line-height: .88; letter-spacing: -0.045em;
  text-shadow: -4px 0 rgba(255,95,191,.85), 4px 0 rgba(77,124,255,.85); }
.h2.loud .slash { color: var(--pink); text-shadow: none; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.card {
  display: flex; flex-direction: column; gap: 10px; padding: 24px; min-height: 150px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface);
  transition: border-color .2s, background .2s;
}
a.card:hover, .card:hover { border-color: var(--purple); background: var(--surface-2); color: var(--ink); }
.card .ch { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: var(--c, var(--pink)); }
.card h3 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -0.01em; }
.card p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--muted); }
.card .go { margin-top: auto; font-size: 13px; font-weight: 600; color: var(--soft); }
.steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }

.reel { margin-top: 36px; padding-block: 22px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; align-items: center; gap: 12px 28px; }
.reel .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
.reel span:not(.k) {
  font-size: clamp(18px, 1.8vw, 26px); font-weight: 800; letter-spacing: .035em; line-height: 1.2; text-transform: uppercase;
  color: var(--ink); filter: drop-shadow(-1.7px 0 0 rgba(255,95,191,.72)) drop-shadow(1.7px 0 0 rgba(77,124,255,.72));
}

.logos { display: flex; flex-direction: column; gap: 4px; padding-block: 8px 22px; border-bottom: 1px solid var(--line-soft); }
.logo-row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px clamp(22px, 3.2vw, 44px); padding-top: 22px; }
.logo-row .k { flex: none; width: 100%; margin-bottom: -4px; font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); }
/* Logos and names hold the pink/blue edge at all times (no motion), ~15% softer than the old hover */
.logo-row img { display: block; height: auto; max-width: 100%; filter: drop-shadow(-1.7px 0 0 rgba(255,95,191,.68)) drop-shadow(1.7px 0 0 rgba(77,124,255,.68)); }


.credits { margin-top: clamp(36px, 5vw, 56px); border-top: 1px solid var(--line-soft); position: relative; isolation: isolate; }
/* Color bars behind the credits: the No Signal test pattern, full width, faded at top and bottom, with faint scanlines */
.credits::before, .credits::after, .section > .reel::before, .section > .reel::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 100vw; transform: translateX(-50%); z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 22%, #000 78%, transparent 100%);
}
.section > .reel { position: relative; isolation: isolate; }
.credits::before, .section > .reel::before {
  opacity: .32;
  background: linear-gradient(90deg,
    var(--ink) 0 14.28%, var(--lilac) 14.28% 28.57%, var(--purple) 28.57% 42.85%, var(--blue) 42.85% 57.14%,
    var(--cobalt) 57.14% 71.42%, var(--pink) 71.42% 85.71%, var(--night) 85.71% 100%);
}
.credits::after, .section > .reel::after { background: repeating-linear-gradient(to bottom, rgba(10,9,18,0) 0 2px, rgba(10,9,18,.35) 2px 3px); }
.logos + .reel { margin-top: 0; border-top: 0; }
/* Credits, logos and names: centered, each label on its own line above its row */
.logo-row, .reel { justify-content: center; text-align: center; }
.logo-row .k, .reel .k { width: 100%; text-align: center; }
.reel .k { margin-bottom: -2px; }
.cards-gap { margin-top: clamp(40px, 5vw, 64px); }
@media (max-width: 699px) {
  .logo-row .k { width: 100%; }
  .logo-row { gap: 16px 24px; }
}
.faq { display: flex; flex-wrap: wrap; gap: 20px clamp(24px, 4vw, 64px); }
.faq .h2 { flex: 1 1 300px; font-size: clamp(28px, 3.4vw, 48px); }
.faq .list { flex: 999 1 560px; min-width: 0; }
.faq details { border-top: 1px solid var(--line); }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 64px; padding-block: 14px; font-size: 19px; font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; font-size: 26px; font-weight: 400; color: var(--muted); transition: transform .2s, color .2s; }
.faq details[open] summary::after { transform: rotate(45deg); color: var(--pink); }
.faq details p { margin: 0 0 22px; max-width: 62ch; font-size: 16px; line-height: 1.55; color: var(--soft); }

/* ---------- contact block + form ---------- */
.cta {
  position: relative; overflow: hidden; border-radius: 28px; padding: clamp(28px, 5vw, 72px);
  background: linear-gradient(135deg, var(--night) 0%, var(--cobalt) 55%, var(--purple) 100%);
  box-shadow: inset 0 0 140px rgba(0,0,0,.6);
}
.cta > .grain-in { position: absolute; inset: -50%; width: 200%; height: 200%; opacity: .16; mix-blend-mode: overlay; animation: grain .45s steps(4) infinite; pointer-events: none; }
.cta > .grain-in svg { width: 100%; height: 100%; display: block; }
.cta-inner { position: relative; display: flex; flex-wrap: wrap; gap: clamp(28px, 4vw, 64px); }
.cta-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: 18px; }
.cta-copy .k { margin: 0; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; }
.cta-copy h2 { margin: 0; font-size: clamp(40px, 5.6vw, 88px); font-weight: 900; line-height: .9; letter-spacing: -0.04em; text-transform: uppercase; text-shadow: -3px 0 rgba(255,95,191,.8), 3px 0 rgba(77,124,255,.8); }
.cta-copy p { margin: 0; max-width: 40ch; font-size: 17px; line-height: 1.5; color: #e4e0ff; }
.cta-copy .email { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; user-select: all; }
.inquiry { flex: 1 1 460px; min-width: 0; display: flex; flex-direction: column; gap: 14px; padding: clamp(20px, 3vw, 32px); border-radius: 20px; background: rgba(10,9,18,.74); backdrop-filter: blur(10px); }
.inquiry .row { display: flex; flex-wrap: wrap; gap: 14px; }
.inquiry label, .inquiry legend { display: flex; flex-direction: column; gap: 6px; flex: 1 1 200px; font-size: 13px; font-weight: 600; letter-spacing: .04em; }
.inquiry legend { padding: 0; margin-bottom: 8px; }
.inquiry fieldset { margin: 0; padding: 0; border: 0; }
.inquiry input, .inquiry textarea {
  min-height: 48px; padding: 0 14px; border-radius: 10px; border: 1px solid #3a3360;
  background: var(--surface); color: var(--ink); font: 400 16px var(--sans); transition: border-color .2s;
}
.inquiry textarea { padding: 12px 14px; line-height: 1.5; resize: vertical; }
.inquiry input:focus, .inquiry textarea:focus { outline: none; border-color: var(--pink); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips label { flex: none; display: block; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid #3a3360; font-size: 14px; font-weight: 500; letter-spacing: 0; cursor: pointer; transition: background .2s, border-color .2s, color .2s; }
.chips input:checked + span { background: var(--pink); border-color: var(--pink); color: var(--bg); }
.chips input:focus-visible + span { outline: 2px solid var(--pink); outline-offset: 3px; }
.btn {
  align-self: flex-start; display: inline-flex; align-items: center; min-height: 50px; padding: 0 28px;
  border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--bg);
  font: 700 16px var(--sans); cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
.btn:hover { background: var(--pink); border-color: var(--pink); color: var(--bg); }
.sent { display: flex; flex-direction: column; gap: 10px; padding-block: 24px; }
.sent .k { font-family: var(--mono); font-size: 13px; letter-spacing: .14em; color: var(--pink); }
.sent strong { font-size: 26px; }

.also { padding-block: 56px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.also .k { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--muted); margin-right: 8px; }
.also a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid #2e2850; color: var(--soft); font-size: 14px; font-weight: 500; transition: border-color .2s, color .2s; }
.also a:hover { border-color: var(--purple); color: var(--ink); }

/* ---------- footer ---------- */
.site-footer { padding-block: 56px calc(40px + env(safe-area-inset-bottom, 0px)); }
.bars-line { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); height: 4px; margin-bottom: 20px; border-radius: 2px; overflow: hidden; }
.bars-line i:nth-child(1){background:var(--ink)} .bars-line i:nth-child(2){background:var(--lilac)} .bars-line i:nth-child(3){background:var(--purple)}
.bars-line i:nth-child(4){background:var(--blue)} .bars-line i:nth-child(5){background:var(--cobalt)} .bars-line i:nth-child(6){background:var(--pink)} .bars-line i:nth-child(7){background:var(--night)}
.site-footer .fine { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #8e88bd; }
.site-footer .fine a:hover { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  .grain, .cta > .grain-in, .rec, .tile .roller { animation: none; }
  * { transition: none !important; }
}

/* ---------- always two columns: headline + intro, and the CH cards ---------- */
.about { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: clamp(14px, 3vw, 48px); }
.about .h2, .about .h2.loud, .about .lede { min-width: 0; }
.about .h2 { font-size: clamp(18px, 4.6vw, 76px); }
.about .h2.loud { font-size: clamp(15px, 5vw, 80px); text-shadow: -0.05em 0 rgba(255,95,191,.85), 0.05em 0 rgba(77,124,255,.85); }
.about .lede { font-size: clamp(11.5px, 1.25vw, 18px); line-height: 1.5; }
.cards { grid-template-columns: repeat(auto-fill, minmax(min(340px, calc(50% - 6px)), 1fr)); }
@media (max-width: 699px) {
  .cards { gap: 8px; }
  .card { padding: 14px; min-height: 0; gap: 6px; }
  .card h3 { font-size: 15px; }
  .card p { font-size: 12.5px; line-height: 1.4; }
  .card .ch, .card .go { font-size: 11px; }
}

.lede a { color: var(--ink); font-weight: 600; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: 3px; }
.lede a:hover { color: var(--pink); }

/* ---------- credits on phones: everything scaled down ---------- */
@media (max-width: 699px) {
  .logo-row img { height: calc(var(--h, 32px) * .6); width: auto; }
  .logo-row { gap: 12px 18px; padding-top: 16px; }
  .logos { padding-block: 4px 16px; }
  .logo-row .k, .reel .k { font-size: 10px; letter-spacing: .12em; }
  .reel { gap: 6px 14px; padding-block: 16px; margin-top: 24px; }
  .reel span:not(.k) { font-size: 13px; letter-spacing: .03em; filter: drop-shadow(-1px 0 0 rgba(255,95,191,.72)) drop-shadow(1px 0 0 rgba(77,124,255,.72)); }
  .logo-row img { filter: drop-shadow(-1px 0 0 rgba(255,95,191,.68)) drop-shadow(1px 0 0 rgba(77,124,255,.68)); }
}

/* Phones: hide the blinking label like edpryor.com's "Director + Editor" (kept for Google and screen readers) */
@media (max-width: 699px) {
  .intro .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .intro { padding-block: 4px 14px; }
}

/* Bigger DAYDARK, a hairline under the header at all times, and more air above and below the filter pills */
.logo { font-size: clamp(34px, 2.4vw + 20px, 58px); }
.intro { padding-block: clamp(18px, 2vw, 26px); }
@media (max-width: 560px) { .logo { font-size: 32px; } }
@media (max-width: 699px) { .intro { padding-block: 14px; } }

/* Phones: equal space above and below the filter pills (header has 16px of its own padding below the logo) */
@media (max-width: 699px) {
  .site-header { padding-bottom: 16px; }
  .intro { padding-top: 1px; padding-bottom: 18px; }
}

/* ---------- captions below the screens, like edpryor.com ---------- */
.tile { display: flex; flex-direction: column; overflow: visible; border-radius: 0; aspect-ratio: auto; background: none; }
.tile:hover, .tile.tuning { box-shadow: none; }
.tile .screen { position: relative; flex: 1 1 auto; aspect-ratio: var(--r, 16 / 9); max-width: 100%; overflow: hidden; border-radius: var(--radius); background: #07060d; transition: box-shadow .2s; }

.tile .meta { position: static; flex: none; padding: 9px 2px 2px; background: none; transform: none; }
.tile:hover .meta { transform: none; }
.tile .artist { font-size: 12px; letter-spacing: .06em; }
.tile .title { font-size: 13px; color: var(--muted); }
.tile:hover .artist { color: var(--ink); }
@media (max-width: 699px) {
  .tile .meta { padding: 7px 2px 0; }
  .tile .artist { font-size: 11px; }
  .tile .title { display: block; font-size: 12px; }
}

/* ---------- bubbles on the tiles: awards and live shows (edpryor.com style) ---------- */
.tile .pill {
  position: absolute; top: 10px; left: 10px; z-index: 3; max-width: calc(100% - 20px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: rgba(255,255,255,.55); color: #111;
  backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%);
  font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px;
}
.tile .pill.award .long::before, .tile .pill.award .short::before { content: "★ "; color: #e4209a; }
.tile .pill.live .long::before, .tile .pill.live .short::before { content: "● "; color: #e4209a; }
.tile .pill .short { display: none; }
.tile .pill.tight .long { display: none; }
.tile .pill.tight .short { display: inline; }
.tile .ch { left: auto; right: 14px; }
@media (max-width: 699px) {
  .tile .pill { font-size: 9px; padding: 4px 8px; top: 8px; left: 8px; }
  .tile .pill .long { display: none; }
  .tile .pill .short { display: inline; }
}

/* Bubbles scale down on smaller screens */
@media (max-width: 1100px) {
  .tile .pill { font-size: 10px; padding: 4px 9px; top: 9px; left: 9px; }
}
@media (max-width: 699px) {
  .tile .pill { font-size: 8px; letter-spacing: .03em; padding: 3px 7px; top: 6px; left: 6px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
}

/* ---------- empty channel (e.g. Social for now) ---------- */
.mosaic.empty { display: block; }
.empty-note { margin: 0; padding: clamp(48px, 8vw, 96px) 0; text-align: center; font-family: var(--mono); font-size: 13px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); border: 1px dashed var(--line); border-radius: var(--radius); }
a.tile { cursor: pointer; }

/* ---------- project pages ---------- */
.theater .player-wrap { padding-top: 6px; }
.player {
  position: relative; max-width: min(1400px, calc(76vh * var(--vr, 16 / 9))); margin: 0 auto;
  aspect-ratio: var(--vr, 16 / 9); border-radius: var(--radius); overflow: hidden; background: #000;
  box-shadow: -3px 0 0 rgba(255,95,191,.55), 3px 0 0 rgba(77,124,255,.55), 0 30px 80px rgba(0,0,0,.5);
}
.player iframe, .player video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.player-wrap.multi { display: flex; justify-content: center; gap: var(--gap); }
.player-wrap.multi .player { margin: 0; width: calc(76vh * var(--vr)); max-width: calc((100% - var(--gap)) / 2); }
.player-wrap.hero { display: flex; flex-direction: column; align-items: center; gap: var(--gap); }
.player-wrap.hero > .player, .player-row { width: 100%; max-width: min(1400px, calc(76vh * var(--vr))); margin: 0; }
.player-row { display: flex; gap: var(--gap); }
.player-row .spot { flex: 1; min-width: 0; margin: 0; }
.player-row .player { width: 100%; max-width: none; margin: 0; }
.spot figcaption { padding: 8px 2px 0; font-family: var(--mono); font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }

.details { max-width: 1400px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: clamp(24px, 4vw, 56px); padding-block: clamp(32px, 4vw, 56px) 24px; }
.details .kind { margin: 0 0 14px; display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--soft); }
.details .kind .rec { font-size: 10px; }
.d-title { margin: 0; font-size: clamp(36px, 6.4vw, 96px); font-weight: 900; line-height: .9; letter-spacing: -0.045em; text-transform: uppercase;
  text-shadow: -4px 0 rgba(255,95,191,.8), 4px 0 rgba(77,124,255,.8); }
.details .by { margin: 12px 0 0; font-size: clamp(15px, 1.4vw, 19px); font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.details .note { margin: 16px 0 0; max-width: 54ch; font-size: 16px; line-height: 1.55; color: var(--soft); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 20px; }
.chip { border: 1px solid #3a3360; border-radius: 999px; padding: 6px 12px; font-size: 12px; font-weight: 500; color: var(--soft); }
.chip.award::before { content: "★ "; color: var(--pink); }
.chip.aired::before { content: "● "; color: var(--pink); }
.credit-card { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; align-content: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px 26px 8px; }
.credit-card h2 { grid-column: 1 / -1; margin: 0 0 6px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--pink); }
.credit-card dl { display: contents; }
.credit-card div { padding: 14px 0 16px; border-top: 1px solid var(--line); }
.credit-card dt { font-size: 11px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.credit-card dd { margin: 4px 0 0; font-size: 16px; font-weight: 600; line-height: 1.35; }

.gallery { max-width: 1400px; margin: 0 auto; padding-block: 16px 28px; display: grid; gap: var(--gap); }
.g-row { display: flex; gap: var(--gap); }
.g-label { margin: 10px 0 0; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.g-label:first-child { margin-top: 0; }
.g-tile { position: relative; flex: var(--r, 1.333) 1 0; aspect-ratio: var(--r, 4 / 3); border-radius: var(--radius); overflow: hidden; background: #07060d; }
.g-row > .g-tile:only-child { flex: 0 1 calc(76vh * var(--r, 1.333)); margin: 0 auto; }
.g-tile img, .g-tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focus, 50% 50%); }
.g-tile.blank { background: transparent; border: 1.5px dashed var(--line); display: grid; place-items: center; }
.g-tile.blank span { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

.pager { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; gap: 16px; padding-block: 22px; border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line-soft); }
.pager a { display: flex; flex-direction: column; gap: 4px; max-width: 46%; min-width: 0; }
.pager a.next { text-align: right; margin-left: auto; }
.pager small { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pager span { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.more-head { margin: 0 0 18px; font-family: var(--mono); font-size: 12px; font-weight: 400; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); text-align: center; }
.section.more { padding-block: clamp(40px, 5vw, 64px) 0; }

@media (max-width: 800px) {
  .details { grid-template-columns: 1fr; }
}
@media (max-width: 699px) {
  .g-row, .gallery { gap: 8px; }
  .g-row.wide > .g-tile { flex: 1 1 0; aspect-ratio: 4 / 3; }
  .g-row > .g-tile:only-child { flex-basis: calc(70vh * var(--r, 1.333)); }
  .player-wrap.multi { flex-direction: column; align-items: center; }
  .player-wrap.multi .player { width: min(100%, calc(76vh * var(--vr))); max-width: 100%; }
  .player-row { flex-direction: column; }
  .credit-card { gap: 0 18px; padding: 18px 18px 6px; }
  .credit-card dd { font-size: 14px; }
  .d-title { text-shadow: -2px 0 rgba(255,95,191,.8), 2px 0 rgba(77,124,255,.8); }
  .pager span { font-size: 13px; }
}
.credit-card { align-self: start; }

/* ---------- tape shelf: projects past the wall's 8, as VHS cassette spines ---------- */
.shelf { max-width: 1400px; margin: clamp(28px, 4vw, 44px) auto 0; display: flex; flex-direction: column; gap: 10px; }
.shelf-k { margin: 0 0 6px; text-align: center; font-family: var(--mono); font-size: 12px; letter-spacing: .16em; color: var(--muted); }
.tape {
  position: relative; display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px); min-height: 54px; padding: 0 clamp(12px, 2vw, 20px);
  background: var(--ink); color: var(--bg); border-radius: 6px; box-shadow: 0 3px 0 var(--lilac);
  transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .2s; overflow: hidden;
}
a.tape:hover, a.tape:focus-visible { color: var(--bg); transform: translateX(8px); box-shadow: 0 0 22px -4px rgb(201 184 255 / calc(.55 * var(--glow))); }
.tape .t-peek { flex: none; width: 0; align-self: stretch; margin: 6px 0; position: relative; overflow: hidden; border-radius: 3px; transition: width .3s cubic-bezier(.2,.7,.2,1); background: #07060d; }
.tape .t-peek video, .tape .t-peek i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
a.tape:hover .t-peek, a.tape:focus-visible .t-peek { width: 74px; }
.tape .t-bars { flex: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); width: 34px; height: 16px; }
.tape .t-bars i:nth-child(1) { background: var(--purple); } .tape .t-bars i:nth-child(2) { background: var(--blue); }
.tape .t-bars i:nth-child(3) { background: var(--pink); } .tape .t-bars i:nth-child(4) { background: var(--cobalt); }
.tape .t-artist { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.tape .t-title { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-family: var(--mono); font-size: 13px; color: #3a3360; }
.tape .t-badge { flex: none; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 999px; background: #e6e2ff; color: #3a3360; }
.tape .t-ch { flex: none; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.tape.soon { cursor: default; }
@media (max-width: 699px) {
  .shelf { gap: 8px; }
  .tape { min-height: 46px; gap: 10px; }
  .tape .t-title { display: none; }
  .tape .t-artist { flex: 1 1 0; font-size: 12px; }
  .tape .t-badge { display: none; }
  .tape .t-bars { width: 26px; height: 12px; }
}
@media (prefers-reduced-motion: reduce) { .tape, .tape .t-peek { transition: none; } }

/* Client names waiting on logo files */
.logo-text { font-size: 20px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; line-height: 1; color: var(--ink);
  filter: drop-shadow(-1.7px 0 0 rgba(255,95,191,.68)) drop-shadow(1.7px 0 0 rgba(77,124,255,.68)); }
@media (max-width: 699px) { .logo-text { font-size: 13px; filter: drop-shadow(-1px 0 0 rgba(255,95,191,.68)) drop-shadow(1px 0 0 rgba(77,124,255,.68)); } }

/* Credit labels in pink */
.logo-row .k, .reel .k { color: var(--pink); }

/* Color bars: wavy tracking distortion + moving static fuzz on top */
.credits::before, .section > .reel::before { filter: url(#dd-wave); width: calc(100vw + 360px); animation: hold 11s ease-in-out infinite; }
/* Bad horizontal hold: the bars lean hard on a diagonal and drift, with the odd sudden slip */
@keyframes hold {
  0%   { transform: translateX(-50%) skewX(-14deg); }
  30%  { transform: translateX(-50%) skewX(-24deg); }
  34%  { transform: translateX(-52%) skewX(-8deg); }
  36%  { transform: translateX(-49%) skewX(-20deg); }
  65%  { transform: translateX(-50%) skewX(-28deg); }
  68%  { transform: translateX(-48%) skewX(-12deg); }
  100% { transform: translateX(-50%) skewX(-14deg); }
}
.credits::after, .section > .reel::after {
  background:
    repeating-linear-gradient(to bottom, rgba(10,9,18,0) 0 2px, rgba(10,9,18,.35) 2px 3px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 220px 220px;
  opacity: .55; mix-blend-mode: overlay;
  animation: fuzz .6s steps(4) infinite;
}
@keyframes fuzz {
  0% { background-position: 0 0, 0 0; } 25% { background-position: 0 0, -60px 40px; }
  50% { background-position: 0 0, 70px -30px; } 75% { background-position: 0 0, -30px -70px; } 100% { background-position: 0 0, 0 0; }
}
.credits::after, .section > .reel::after { background-blend-mode: normal; }
.credits > *, .section > .reel > * { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .credits::before, .section > .reel::before { filter: none; animation: none; transform: translateX(-50%) skewX(-14deg); }
  .credits::after, .section > .reel::after { animation: none; }
}

/* Anchored sections land below the sticky header */
#services, #contact, #how { scroll-margin-top: 110px; }

/* ---------- back to top ---------- */
.to-top {
  position: fixed; z-index: 55;
  right: max(var(--pad-r), calc((100vw - 1464px) / 2 + 32px));
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  border: 1px solid var(--ink); border-radius: 999px; padding: 10px 16px; min-height: 44px;
  background: var(--ink); color: var(--bg); cursor: pointer;
  font: 700 12px var(--sans); letter-spacing: .12em; text-transform: uppercase;
  box-shadow: -2px 0 0 rgba(255,95,191,.7), 2px 0 0 rgba(77,124,255,.7), 0 8px 24px rgba(0,0,0,.4);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s, transform .25s, background .2s, color .2s;
}
.to-top.show { opacity: 1; transform: none; pointer-events: auto; }
.to-top:hover { background: var(--pink); border-color: var(--pink); color: var(--bg); }

/* Slimmer filter pills everywhere */
.filters a { min-height: 28px; padding: 0 12px; font-size: 12px; }
.filters { gap: 5px; }

/* Phones: more room between DAYDARK, the pills and the wall (equal both sides) */
@media (max-width: 699px) {
  .site-header { padding-bottom: 16px; }
  .intro { padding-top: 11px; padding-bottom: 28px; }
}

/* Skinny pills keep a full-size tap area (invisible, extends above and below) */
.filters { padding-block: 8px; margin-block: -8px; }
.filters a { position: relative; }
.filters a::before { content: ""; position: absolute; inset: -8px -2px; }

/* Phones: pills centered, never left */
@media (max-width: 699px) {
  .intro { align-items: center; }
  .filters { justify-content: safe center; }
}

/* Phones: pills centered (never left), and the skinny pills keep a full-size tap area (invisible) */
@media (max-width: 699px) {
  .intro { align-items: center; }
  .filters { align-self: stretch; justify-content: safe center; padding-block: 8px; margin-block: -8px; }
  .intro { padding-top: 19px; padding-bottom: 36px; }
  .filters a { position: relative; }
  .filters a::before { content: ""; position: absolute; inset: -8px -2px; }
}

/* The slanted color bars bleed past the screen edge: clip them so the page never scrolls sideways */
html, body { overflow-x: clip; }
/* Phones: pills tight enough that all five fit centered */
@media (max-width: 699px) {
  .filters { gap: 4px; }
  .filters a { padding: 0 10px; font-size: 11.5px; }
}
@media (max-width: 370px) {
  .filters a { padding: 0 8px; font-size: 11px; }
}

/* Tablet/desktop: if the label and pills can't share a line, the pills wrap but stay on the right */
@media (min-width: 700px) {
  .intro .filters { margin-left: auto; justify-content: flex-end; }
}

/* Thin TV-distortion divider: the color bars as a slim strip, leaning and slipping, with fuzz blended in */
.tv-divider { position: relative; height: 12px; margin-top: clamp(28px, 4vw, 44px); overflow: hidden; border-radius: 2px; }
.tv-divider::before {
  content: ""; position: absolute; top: -6px; bottom: -6px; left: 50%; width: calc(100vw + 360px); pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    linear-gradient(90deg,
      var(--ink) 0 14.28%, var(--lilac) 14.28% 28.57%, var(--purple) 28.57% 42.85%, var(--blue) 42.85% 57.14%,
      var(--cobalt) 57.14% 71.42%, var(--pink) 71.42% 85.71%, var(--night) 85.71% 100%);
  background-size: 220px 220px, 100% 100%;
  background-blend-mode: overlay, normal;
  opacity: .8;
  animation: hold 11s ease-in-out infinite, strip-fuzz .6s steps(4) infinite;
}
.tv-divider::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(to bottom, rgba(10,9,18,0) 0 2px, rgba(10,9,18,.4) 2px 3px); }
@keyframes strip-fuzz { 0% { background-position: 0 0, 0 0; } 25% { background-position: -60px 40px, 0 0; } 50% { background-position: 70px -30px, 0 0; } 75% { background-position: -30px -70px, 0 0; } 100% { background-position: 0 0, 0 0; } }
@media (max-width: 699px) { .tv-divider { height: 8px; } }
@media (prefers-reduced-motion: reduce) { .tv-divider::before { animation: none; transform: translateX(-50%) skewX(-14deg); } }

/* Channel numbers (CH 01…) switched off everywhere for now: tiles, tapes, service and How It Works cards */
.tile .ch, .tape .t-ch, .card .ch { display: none !important; }

/* ---------- MORE shelf, two looks: VHS rental rack (Shelf) and TV Guide listing (Guide) ---------- */
.shelf { gap: 14px; }
.shelf-head { display: flex; align-items: center; justify-content: center; gap: 14px; position: relative; }
.shelf-head .shelf-k { margin: 0; }
.shelf-view { position: absolute; right: 0; display: inline-flex; border: 1px solid var(--line); border-radius: 999px; padding: 2px; }
.shelf-view button { font: 700 10px/1 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); background: none; border: 0; border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.shelf-view button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }

/* Shelf: upright VHS boxes, scrolling sideways */
.rack-wrap { position: relative; }
.rack { display: flex; gap: clamp(10px, 1.4vw, 16px); overflow-x: auto; scroll-snap-type: x proximity; padding: 14px 2px 20px;
  scrollbar-width: none; -webkit-mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); mask: linear-gradient(90deg, transparent 0, #000 24px, #000 calc(100% - 24px), transparent 100%); }
.rack::-webkit-scrollbar { display: none; }
.rack-wrap::after { content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac)); opacity: .55; }
.vhs { flex: none; width: clamp(128px, 12vw, 172px); aspect-ratio: 2 / 3.1; scroll-snap-align: start; position: relative; display: flex; flex-direction: column;
  border-radius: 4px; overflow: hidden; background: #07060d; color: var(--ink); text-decoration: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.07), 0 10px 22px -12px #000; transition: transform .25s cubic-bezier(.2,.7,.2,1), box-shadow .25s; }
.vhs::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 70%, rgba(255,255,255,.06) 100%); }
a.vhs:hover, a.vhs:focus-visible, .vhs.on { transform: translateY(-8px) rotate(-1deg); filter: brightness(1.15); box-shadow: 0 0 34px -6px rgb(201 184 255 / calc(.55 * var(--glow))), 0 18px 26px -14px #000; }
.v-cover { position: relative; flex: 1 1 auto; min-height: 0; overflow: hidden; }
.v-cover img, .v-cover video, .v-cover i { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.v-cover video { opacity: 0; transition: opacity .2s; }
.vhs.on .v-cover video { opacity: 1; }
.v-scan { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,.22) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; }
.v-pill { position: absolute; top: 8px; left: 8px; right: 8px; width: max-content; max-width: calc(100% - 16px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 700 9px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 5px 7px; border-radius: 999px; background: #e6e2ff; color: #3a3360; }
.v-label { flex: none; display: flex; flex-direction: column; gap: 3px; padding: 9px 10px 11px; background: #f4f2ff; color: #15122a; position: relative; }
.v-bars { display: grid; grid-template-columns: repeat(4, 1fr); width: 30px; height: 5px; margin-bottom: 4px; }
.v-bars i:nth-child(1) { background: var(--purple); } .v-bars i:nth-child(2) { background: var(--blue); }
.v-bars i:nth-child(3) { background: var(--pink); } .v-bars i:nth-child(4) { background: var(--cobalt); }
.v-artist { font: 800 11px/1.15 var(--sans); letter-spacing: .05em; text-transform: uppercase; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.v-title { font: 400 11px/1.25 var(--mono); color: #4a4275; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.vhs.soon { cursor: default; }
.rack-nav { position: absolute; top: calc(50% - 22px); z-index: 2; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--line); background: rgba(10,9,18,.85);
  color: var(--ink); font: 400 22px/1 var(--sans); cursor: pointer; display: grid; place-items: center; padding-bottom: 3px; transition: opacity .2s; }
.rack-nav.prev { left: -6px; } .rack-nav.next { right: -6px; }
.rack-nav:disabled { opacity: 0; pointer-events: none; }
@media (hover: none) { .rack-nav { display: none; } }

/* Guide: TV Guide style listing, two columns */
.guide { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 3vw, 44px); border-top: 1px solid var(--line); }
.gl { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto; align-items: baseline; gap: 14px; padding: 13px 10px; border-bottom: 1px dashed var(--line);
  color: var(--ink); text-decoration: none; position: relative; overflow: hidden; }
.gl-yr { font: 700 12px/1 var(--mono); color: var(--pink); letter-spacing: .04em; }
.gl-main { min-width: 0; display: flex; flex-wrap: wrap; column-gap: 10px; row-gap: 2px; }
.gl-artist { font: 800 13px/1.25 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.gl-title { font: 400 13px/1.25 var(--mono); color: var(--soft); }
.gl-meta { font: 400 11px/1 var(--mono); color: var(--muted); white-space: nowrap; text-align: right; }
.gl-star { color: var(--lilac); }
.gl::before { content: ""; position: absolute; inset: 0; opacity: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 3px), linear-gradient(90deg, rgba(138,99,255,.18), rgba(77,124,255,.12), rgba(255,95,191,.16)); }
a.gl:hover::before, a.gl:focus-visible::before { opacity: 1; animation: gl-flick .35s steps(3) 1; }
a.gl:hover .gl-artist, a.gl:focus-visible .gl-artist { color: var(--pink); }
.gl.soon { cursor: default; }
.gl.soon .gl-yr { color: var(--muted); }
@keyframes gl-flick { 0% { opacity: .2; transform: translateX(-4px); } 50% { opacity: 1; transform: translateX(3px); } 100% { opacity: 1; transform: none; } }
@media (max-width: 760px) { .guide { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 699px) {
  .shelf-head { justify-content: space-between; }
  .shelf-view { position: static; }
  .gl { grid-template-columns: 44px minmax(0, 1fr); gap: 10px; padding: 12px 4px; }
  .gl-meta { display: none; }
  .gl-artist, .gl-title { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) { .vhs, a.gl:hover::before { transition: none; animation: none; } }
.rack.at-start { -webkit-mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); mask: linear-gradient(90deg, #000 calc(100% - 24px), transparent 100%); }

/* Homepage service cards: titles only (no description line), so the cards sit tighter */
.cards-clean .card { min-height: 0; gap: 10px; }
.cards-clean .card h3 { font-size: clamp(18px, 1.2vw + 10px, 24px); }
.cards-clean .card .go { margin-top: 0; }
.cards-clean { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 899px) { .cards-clean { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Contact: email line sits under the form */
.inquiry .or-email { margin: 2px 0 0; font-size: 13px; color: var(--muted); }
.inquiry .or-email a { color: var(--soft); text-decoration: underline; text-underline-offset: 3px; }
.inquiry .or-email a:hover { color: var(--pink); }
/* Form fit: the details box doesn't stretch (no gap above Send), and fields never run past the card on phones */
.inquiry > label { flex: none; }
.inquiry .row > label { min-width: 0; }
.inquiry input, .inquiry textarea { width: 100%; min-width: 0; box-sizing: border-box; }
.inquiry .btn { align-self: flex-start; }

/* Contact form: hidden spam trap and error line */
.inquiry .hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.inquiry .form-err { margin: 0; font-size: 14px; color: #ffb3dd; }
.inquiry .form-err a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.inquiry .btn:disabled { opacity: .7; cursor: progress; }

/* Contact heading: blinking pink play button after "Start a Project" */
.cta-copy h2 .rec { display: inline-block; width: .42em; height: .5em; margin-left: .2em; vertical-align: .08em; background: var(--pink); color: transparent; overflow: hidden; text-shadow: none; clip-path: polygon(0 0, 100% 50%, 0 100%); filter: drop-shadow(0 0 10px rgba(255,95,191,.6)); }
/* Form field labels in all caps */
.inquiry label { text-transform: uppercase; letter-spacing: .1em; font-size: 12px; }
.inquiry label input, .inquiry label textarea { text-transform: none; letter-spacing: normal; }
/* "Or email us": set apart from the form, centered under a hairline so it never reads as a field or button */
.inquiry .or-email { margin-top: 10px; padding-top: 16px; border-top: 1px solid rgba(255,255,255,.08); text-align: center; }
/* Phones: the section heading stacks one word per line so it fills its column and sits level with the intro */
@media (max-width: 699px) { .about { align-items: center; } }
@media (max-width: 480px) {
  .about .h2.loud.stack { font-size: clamp(20px, 6.6vw, 36px); line-height: .9; }
  .h2.loud.stack .w { display: block; white-space: nowrap; }
  .h2.loud.stack br, .h2.loud.stack .slash { display: none; }
}
/* Homepage intro with no heading: the paragraph leads the section on its own, larger and full width */
.about.solo { display: block; }
.about.solo .lede { max-width: 52ch; font-size: clamp(17px, 1.1vw + 12px, 26px); line-height: 1.45; color: var(--ink); }
/* Homepage intro as a statement: big type, color-bar tab, the services lit up, Daydark in the glitch style */
.about.solo .lede.statement { position: relative; max-width: 30em; margin: 0; padding-left: clamp(18px, 2vw, 28px);
  font-size: clamp(19px, 1.6vw + 10px, 34px); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em; color: var(--muted); }
.lede.statement .bars { position: absolute; left: 0; top: .22em; bottom: .22em; width: 5px; display: grid; grid-template-rows: repeat(4, 1fr); border-radius: 2px; overflow: hidden; }
.lede.statement .bars i:nth-child(1) { background: var(--purple); } .lede.statement .bars i:nth-child(2) { background: var(--blue); }
.lede.statement .bars i:nth-child(3) { background: var(--pink); } .lede.statement .bars i:nth-child(4) { background: var(--cobalt); }
.lede.statement strong { color: var(--ink); font-weight: 700; }
.lede.statement .dd { color: var(--ink); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  text-shadow: -0.06em 0 rgba(255,95,191,.85), 0.06em 0 rgba(77,124,255,.85); }
.lede.statement a { color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-color: var(--pink); text-underline-offset: .18em; text-decoration-thickness: 2px; }
.lede.statement a:hover { color: var(--pink); }
/* Statement: Ed's name blends into the sentence (still a link, no emphasis) */
.lede.statement a { color: inherit; font-weight: inherit; text-decoration: none; }
.lede.statement a:hover { color: var(--ink); }
/* Homepage service cards: titles in caps */
.cards-clean .card h3 { text-transform: uppercase; letter-spacing: .01em; }
/* Homepage service cards: heading energy. Heavy caps with the pink/blue split, a channel-color bar, and a signal glitch on hover */
.cards-clean .card { position: relative; overflow: hidden; }
.cards-clean .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--c, var(--pink)); opacity: .9; }
.cards-clean .card h3 { font-size: clamp(20px, 1.5vw + 10px, 34px); font-weight: 900; line-height: .95; letter-spacing: -0.035em;
  text-shadow: -0.05em 0 rgba(255,95,191,.8), 0.05em 0 rgba(77,124,255,.8); }
.cards-clean .card::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: repeating-linear-gradient(0deg, rgba(255,255,255,.07) 0 1px, transparent 1px 3px); }
.cards-clean a.card:hover::after, .cards-clean a.card:focus-visible::after { opacity: 1; animation: card-roll 1.6s linear infinite; }
.cards-clean a.card:hover h3, .cards-clean a.card:focus-visible h3 { animation: card-glitch .5s steps(2) 1; }
@keyframes card-glitch {
  0%   { transform: translateX(0); text-shadow: -0.05em 0 rgba(255,95,191,.8), 0.05em 0 rgba(77,124,255,.8); }
  25%  { transform: translateX(-3px) skewX(-6deg); text-shadow: -0.14em 0 rgba(255,95,191,.9), 0.12em 0 rgba(77,124,255,.9); }
  50%  { transform: translateX(3px); clip-path: inset(10% 0 35% 0); }
  75%  { transform: translateX(-1px) skewX(4deg); clip-path: none; }
  100% { transform: none; }
}
@keyframes card-roll { from { background-position: 0 0; } to { background-position: 0 30px; } }
@media (prefers-reduced-motion: reduce) { .cards-clean a.card:hover h3, .cards-clean a.card:hover::after { animation: none; } }
/* Homepage cards: a play triangle in the channel color instead of "Watch the channel"; it slides on hover */
.cards-clean .card { flex-direction: row; align-items: center; justify-content: space-between; gap: 14px; }
.cards-clean .card .go.play { flex: none; margin: 0; width: .9em; height: 1em; font-size: clamp(16px, 1vw + 8px, 22px); color: transparent; overflow: hidden;
  background: var(--c, var(--pink)); clip-path: polygon(0 0, 100% 50%, 0 100%); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.cards-clean a.card:hover .go.play, .cards-clean a.card:focus-visible .go.play { transform: translateX(6px); }
/* Homepage cards: tape-deck buttons in the channel color. Music = play, Branded = fast-forward, Social = pause, Live = record */
.cards-clean .card .go.deck { flex: none; margin: 0; height: 1em; font-size: clamp(16px, 1vw + 8px, 22px); background: var(--c, var(--pink)); transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.go.deck.play  { width: .9em; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.go.deck.ff    { width: 1.35em; clip-path: polygon(0 0, 50% 50%, 50% 0, 100% 50%, 50% 100%, 50% 50%, 0 100%); }
.cards-clean .card .go.deck.pause { width: .85em; background: linear-gradient(90deg, var(--c) 0 34%, transparent 34% 66%, var(--c) 66% 100%); }
.go.deck.rec   { width: 1em; border-radius: 50%; animation: blink 1.2s infinite; }
.cards-clean a.card:hover .go.deck, .cards-clean a.card:focus-visible .go.deck { transform: translateX(6px); }
.cards-clean a.card:hover .go.deck.pause, .cards-clean a.card:hover .go.deck.rec { transform: scale(1.15); }
@media (prefers-reduced-motion: reduce) { .go.deck.rec { animation: none; } }
/* Homepage cards, channel color v2: no left stripe; a full-width color strip along the bottom (like a tape label),
   a soft glow of the channel color behind the button, and the border lights up in that color on hover. No blinking. */
.cards-clean .card::before { left: 0; right: 0; top: auto; bottom: 0; width: auto; height: 3px; opacity: .85; }
.cards-clean .card { background: radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--c) 16%, transparent) 0%, transparent 55%), var(--surface); }
.cards-clean a.card:hover, .cards-clean a.card:focus-visible { border-color: var(--c); background: radial-gradient(120% 140% at 100% 50%, color-mix(in srgb, var(--c) 26%, transparent) 0%, transparent 60%), var(--surface-2); }
.go.deck.rec { animation: none; }
/* Homepage cards at every size: even spacing between cards, the title gives way so the button always stays inside */
.cards-clean { gap: clamp(10px, 1.1vw, 16px); }
.cards-clean .card { padding: clamp(14px, 1.4vw, 24px) clamp(14px, 1.6vw, 26px); }
.cards-clean .card h3 { flex: 1 1 auto; min-width: 0; }
@media (max-width: 380px) { .cards-clean .card h3 { font-size: 17px; } .cards-clean .card { gap: 10px; } }
/* Homepage cards, tablet fix: 2 x 2 up to 1199px (iPads, portrait and landscape), one row of 4 from 1200px.
   From 700px up every title stays on one line, sized to its column, so the cards always match. */
.cards-clean { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 700px) { .cards-clean .card h3 { white-space: nowrap; font-size: clamp(18px, 2.6vw, 30px); } }
@media (min-width: 1200px) {
  .cards-clean { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cards-clean .card h3 { font-size: clamp(19px, 1.72vw, 29px); }
}
/* Homepage cards: chunkier. Taller cards so they read as buttons, not long strips */
.cards-clean .card { min-height: clamp(84px, 9vw, 132px); padding-block: clamp(20px, 2.4vw, 36px); }
/* Desktop (4 across): titles stack one word per line so they can run bigger and fill the taller cards */
@media (min-width: 1200px) {
  .cards-clean .card h3 { flex: 0 1 auto; white-space: normal; width: min-content; font-size: clamp(26px, 2.5vw, 42px); line-height: .92; }
}
/* Below the wall, one axis: the intro statement centers like the credits above it.
   The color-bar tab turns into a short horizontal strip centered over the text. */
.about.solo .lede.statement { margin-inline: auto; text-align: center; padding-left: 0; padding-top: clamp(18px, 1.6vw, 26px); max-width: 32em; }
.lede.statement .bars { left: 50%; right: auto; top: 0; bottom: auto; width: clamp(56px, 5vw, 80px); height: 5px; transform: translateX(-50%);
  grid-template-rows: none; grid-template-columns: repeat(4, 1fr); }
.about.solo .lede.statement { text-wrap: balance; }
/* Contact: centered stack. Heading on top, form centered under it, Send centered, so everything below the wall shares one center line */
.cta-inner { flex-direction: column; align-items: center; text-align: center; }
.cta-copy { flex: none; align-items: center; }
.cta-copy h2 { text-align: center; }
.inquiry { flex: none; width: 100%; max-width: 720px; text-align: left; }
.inquiry .btn { align-self: center; }
/* Credits: a structured grid. Every logo and name sits in its own equal tile (like a channel guide);
   rows are even and a short last row centers. Each logo keeps its own optical height (--h) inside a fixed-height tile. */
.credits .logo-row, .credits .reel { --cols: 6; --g: clamp(6px, .7vw, 10px); display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; gap: var(--g); }
.credits .reel { --cols: 5; }
.credits .logos:last-of-type .logo-row { --cols: 7; }
.credits .logo-row { --tile: clamp(58px, 4.8vw, 76px); --lk: 1; }
.credits .logo-row > :not(.k), .credits .reel > :not(.k) {
  flex: 0 0 calc((100% - (var(--cols) - 1) * var(--g)) / var(--cols)); min-width: 0; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; text-align: center;
  border: 1px solid rgba(255,255,255,.13); border-radius: 10px; background: rgba(10,9,18,.45); }
.credits .logo-row > img:not(.k) { width: auto; height: var(--tile); min-height: 0; padding: calc((var(--tile) - var(--h, 32px) * var(--lk)) / 2) 14px; object-fit: contain; }
.credits .logo-row > .logo-text:not(.k) { height: var(--tile); padding: 0 10px; }
.credits .reel > span:not(.k) { min-height: clamp(42px, 3.4vw, 54px); padding: 8px 12px; font-size: clamp(12px, .55vw + 9px, 20px); line-height: 1.15; }
.credits .logo-row .k, .credits .reel .k { flex-basis: 100%; margin: 0 0 4px; }
@media (max-width: 899px) {
  .credits .logo-row { --cols: 4; --lk: .85; } .credits .reel { --cols: 5; } .credits .logos:last-of-type .logo-row { --cols: 4; } }
@media (max-width: 560px) {
  .credits .logo-row { --cols: 3; --tile: 52px; --lk: .78; } .credits .reel { --cols: 2; } .credits .logos:last-of-type .logo-row { --cols: 3; }
  .credits .logo-row > :not(.k), .credits .reel > :not(.k) { border-radius: 8px; }
  .credits .logo-row > img:not(.k) { padding-inline: 8px; }
  .credits .reel > span:not(.k) { min-height: 38px; padding: 6px 8px; font-size: 11.5px; } }
.credits .logo-row > .logo-text:not(.k) { font-size: clamp(13px, .45vw + 10px, 18px); }
/* Credits, open grid: keep the even columns, drop the boxes. Items align on a clean grid with no tiles. */
.credits .logo-row > :not(.k), .credits .reel > :not(.k) { border: 0; border-radius: 0; background: none; }
.credits .logo-row, .credits .reel { row-gap: clamp(4px, .6vw, 10px); }
.credits .reel > span:not(.k) { min-height: clamp(34px, 2.6vw, 44px); font-size: clamp(13px, .7vw + 9px, 22px); }
@media (max-width: 560px) { .credits .reel > span:not(.k) { min-height: 30px; font-size: 12.5px; } }

/* Credits stagger: forced row breaks (inserted by app.js) make brick rows; rows sit flush, the items carry their own height */
.credits .br { flex: 0 0 100%; height: 0; margin: 0; padding: 0; }
.credits .staggered { row-gap: 0; }
.credits .staggered > :not(.k):not(.br) { margin-block: clamp(2px, .3vw, 5px); }
@media (max-width: 560px) { .credits .reel { --cols: 3; } .credits .reel > span:not(.k) { font-size: 11px; letter-spacing: .02em; } }
.credits .logo-row > i.br:not(.k), .credits .reel > i.br:not(.k) { flex: 0 0 100%; width: 100%; height: 0; min-height: 0; padding: 0; margin: 0; border: 0; background: none; }
/* Credits: more color-bar real estate below the clients; the fade starts later so the clients sit in full signal */
.credits { padding-bottom: clamp(40px, 6vw, 96px); }
.credits .logos:last-of-type { border-bottom: 0; }
.credits::before, .credits::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 14%, #000 80%, transparent 100%); }
/* Credits: same extra room above Seen On; the bars fade in from the dark, no hard line on top */
.credits { padding-top: clamp(28px, 4.5vw, 72px); border-top: 0; }
.credits::before, .credits::after {
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%);
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%); }
/* Intro statement: a real test-pattern strip on top. The same seven bars as the credits backdrop, wider,
   with a soft glow and a slow tracking flicker, like a channel tuning in */
.lede.statement { padding-top: clamp(28px, 2.4vw, 40px); }
.lede.statement .bars { width: clamp(180px, 24vw, 360px); height: 8px; border-radius: 1px; grid-template-columns: repeat(7, 1fr);
  box-shadow: 0 0 18px rgba(138,99,255,.35); overflow: hidden; }
.lede.statement .bars i { position: relative; }
.lede.statement .bars i:nth-child(1) { background: var(--ink); } .lede.statement .bars i:nth-child(2) { background: var(--lilac); }
.lede.statement .bars i:nth-child(3) { background: var(--purple); } .lede.statement .bars i:nth-child(4) { background: var(--blue); }
.lede.statement .bars i:nth-child(5) { background: var(--cobalt); } .lede.statement .bars i:nth-child(6) { background: var(--pink); }
.lede.statement .bars i:nth-child(7) { background: var(--night); }
.lede.statement .bars::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 0 40%, rgba(255,255,255,.55) 50%, transparent 60%); background-size: 260% 100%; mix-blend-mode: overlay; animation: bar-track 5.5s ease-in-out infinite; }
@keyframes bar-track { 0%, 55% { background-position: 120% 0; } 75% { background-position: -20% 0; } 100% { background-position: -20% 0; } }
@media (prefers-reduced-motion: reduce) { .lede.statement .bars::after { animation: none; display: none; } }
.about.solo .lede.statement { padding-top: clamp(40px, 3.6vw, 60px); }

/* Credits brick rows (app.js): a half-step grid, each item spans two half-columns, alternate rows shift by one */
.credits .brick { display: grid; grid-template-columns: repeat(var(--hc), minmax(0, 1fr)); column-gap: var(--g); row-gap: clamp(4px, .6vw, 10px); }
.credits .brick > .k { grid-column: 1 / -1; }
.credits .brick > :not(.k) { flex: none; width: auto; }
/* Credits names stay on one line; tablet uses 4 columns so the names alternate 3 / 4 / 3 */
.credits .reel > span:not(.k) { white-space: nowrap; font-size: clamp(12px, .5vw + 9px, 18px); }
@media (min-width: 561px) and (max-width: 899px) { .credits .reel { --cols: 4; } }
@media (max-width: 560px) { .credits .reel > span:not(.k) { white-space: normal; font-size: 11px; } }

/* Desktop: Seen On in one long row like Clients */
@media (min-width: 1200px) { .credits .logos:first-of-type .logo-row { --cols: 12; --g: clamp(8px, 1vw, 16px); } }
/* Credits captions: more presence. Bigger, bolder mono with a pink glow, flanked by short lines */
.credits .logo-row > .k, .credits .reel > .k { display: flex; align-items: center; justify-content: center; gap: 14px;
  font: 700 clamp(12px, .35vw + 10px, 15px)/1 var(--mono); letter-spacing: .28em; color: var(--pink);
  text-shadow: 0 0 12px rgba(255,95,191,.55); margin-bottom: clamp(8px, 1vw, 16px); }
.credits .logo-row > .k::before, .credits .logo-row > .k::after, .credits .reel > .k::before, .credits .reel > .k::after {
  content: ""; width: clamp(24px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--pink)); }
.credits .logo-row > .k::after, .credits .reel > .k::after { background: linear-gradient(90deg, var(--pink), transparent); }
@media (min-width: 1200px) { .credits .logos:first-of-type .logo-row > img:not(.k) { padding-inline: 2px; } }

/* Staggered credits: column width set by the fullest row in the plan (app.js) */
.credits .staggered { --cols: var(--cols-x); }
/* Desktop Seen On: one neat row. Each logo at its natural width and its own optical height, spread edge to edge */
@media (min-width: 1200px) {
  .credits .logos:first-of-type .logo-row { justify-content: space-between; column-gap: 0; padding-inline: clamp(4px, 1vw, 16px); }
  .credits .logos:first-of-type .logo-row > img:not(.k) { flex: 0 0 auto; width: auto; height: calc(var(--h, 32px) * .82); padding: 0; }
}
@media (min-width: 1200px) { .credits .logos:first-of-type .logo-row { align-items: center; } }
/* Buttons borrowed from edpryor.com: soft-square corners, all caps, tracked out */
.filters a { border-radius: 8px; font-size: 11.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; }
.btn, .to-top { border-radius: 8px; text-transform: uppercase; letter-spacing: .08em; }
@media (max-width: 699px) { .filters a { border-radius: 7px; font-size: 10.5px; padding: 0 10px; } }
@media (max-width: 400px) { .filters a { padding: 0 8px; font-size: 10px; } }
@media (max-width: 699px) { .filters { gap: 5px; } .filters a { padding: 0 7px; font-size: 10px; letter-spacing: .05em; } }
@media (max-width: 380px) { .filters { gap: 4px; } .filters a { padding: 0 6px; font-size: 9.5px; letter-spacing: .03em; } }
/* Send it: leaner, less white around the text */
.inquiry .btn { min-height: 0; padding: 10px 18px; font-size: 13px; line-height: 1; }
.to-top { min-height: 0; height: auto; padding: 8px 12px; font-size: 11px; line-height: 1; }
/* How it works: four steps in one row on desktop, 2 x 2 below */
.cards.steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1099px) { .cards.steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* Service pages: "How it works" caption in the same style as the credits captions, centered */
.cap { display: flex; align-items: center; justify-content: center; gap: 14px; margin: 0 0 clamp(16px, 2vw, 26px);
  font: 700 clamp(12px, .35vw + 10px, 15px)/1 var(--mono); letter-spacing: .28em; text-transform: uppercase; color: var(--pink);
  text-shadow: 0 0 12px rgba(255,95,191,.55); }
.cap::before, .cap::after { content: ""; width: clamp(24px, 4vw, 64px); height: 1px; background: linear-gradient(90deg, transparent, var(--pink)); }
.cap::after { background: linear-gradient(90deg, var(--pink), transparent); }
/* Step cards: no button, so the title fills the card */
.cards-clean.steps .card { cursor: default; }
/* Service pages: the color strip sits under the statement instead of above it */
.about.solo:has(+ *) .lede.statement, .section > .about.solo .lede.statement { }
main .section > .about.solo .lede.statement { padding-top: 0; padding-bottom: clamp(36px, 3.4vw, 56px); }
main .section > .about.solo .lede.statement .bars { top: auto; bottom: 0; }
#services .about.solo .lede.statement { padding-top: clamp(40px, 3.6vw, 60px); padding-bottom: 0; }
#services .about.solo .lede.statement .bars { top: 0; bottom: auto; }

/* How it works: a numbered process line, not buttons. No boxes, no glow; numbers, titles and a connecting rule */
.cards-clean.steps { counter-reset: step; gap: 0; position: relative; }
.cards-clean.steps .card { counter-increment: step; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
  min-height: 0; padding: 22px clamp(10px, 1.4vw, 22px) 0 0; border: 0; border-radius: 0; background: none; box-shadow: none; overflow: visible; }
.cards-clean.steps .card::before { content: counter(step, decimal-leading-zero); position: static; width: auto; height: auto; opacity: 1; background: none;
  font: 700 clamp(12px, .4vw + 10px, 15px)/1 var(--mono); letter-spacing: .14em; color: var(--c, var(--pink)); }
.cards-clean.steps .card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; opacity: 1; animation: none;
  background: var(--c, var(--pink)); }
.cards-clean.steps .card:hover { background: none; border: 0; }
.cards-clean.steps .card h3 { text-shadow: -0.04em 0 rgba(255,95,191,.6), 0.04em 0 rgba(77,124,255,.6); }
@media (max-width: 1099px) { .cards-clean.steps { row-gap: clamp(22px, 4vw, 34px); } }
/* Service pages: no short strip under the statement; the How It Works timeline carries the colors */
main .section > .about.solo .lede.statement .bars { display: none; }
main .section > .about.solo .lede.statement { padding-bottom: 0; }
#services .about.solo .lede.statement .bars { display: grid; }
/* Plain links for search engines inside the video wall; app.js swaps in the tiles right away, so keep them invisible */
.mosaic > .grid-links { margin: 0; padding: 0; list-style: none; opacity: 0; height: 0; overflow: hidden; }
/* What's included: a plain checklist in columns, mono ticks in the channel colors */
.incl { list-style: none; margin: 0 auto; padding: 0; max-width: 1100px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px clamp(18px, 3vw, 44px); }
.incl li { display: flex; align-items: baseline; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--line-soft);
  font-size: clamp(15px, .4vw + 13px, 19px); font-weight: 600; color: var(--ink); }
.incl li::before { content: "▸"; flex: none; font-family: var(--mono); color: var(--pink); }
.incl li:nth-child(4n+2)::before { color: var(--blue); } .incl li:nth-child(4n+3)::before { color: var(--purple); } .incl li:nth-child(4n)::before { color: var(--lilac); }
@media (max-width: 899px) { .incl { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .incl { grid-template-columns: minmax(0, 1fr); gap: 0; } .incl li { padding: 12px 0; } }
/* What we make: formats on a numbered color timeline (same look as the old steps), with real examples linked */
.formats { list-style: none; margin: 0; padding: 0; counter-reset: fmt; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.formats li { counter-increment: fmt; position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px clamp(10px, 1.4vw, 22px) 0 0; }
.formats li::before { content: counter(fmt, decimal-leading-zero); font: 700 clamp(12px, .4vw + 10px, 15px)/1 var(--mono); letter-spacing: .14em; color: var(--c); }
.formats li::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--c); }
.formats h3 { margin: 0; font-size: clamp(22px, 1.9vw, 34px); font-weight: 900; line-height: .95; letter-spacing: -0.035em; text-transform: uppercase;
  text-shadow: -0.04em 0 rgba(255,95,191,.6), 0.04em 0 rgba(77,124,255,.6); }
.formats p { margin: 0; font-size: clamp(14px, .3vw + 12px, 16px); line-height: 1.45; color: var(--muted); }
.formats .ex { font: 400 12px/1.5 var(--mono); letter-spacing: .04em; }
.formats .ex a { color: var(--soft); text-decoration: underline; text-decoration-color: var(--c); text-underline-offset: 3px; }
.formats .ex a:hover { color: var(--ink); }
@media (max-width: 1099px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 34px; } }
@media (max-width: 560px) { .formats { grid-template-columns: minmax(0, 1fr); row-gap: 28px; } }
/* MORE shelf: arrows stay at every width on mouse/trackpad screens (smaller on narrow windows);
   touch screens swipe, with a thin scroll bar as a cue that the row keeps going */
@media (max-width: 699px) { .rack-nav { width: 32px; height: 32px; font-size: 18px; top: calc(50% - 18px); } .rack-nav.prev { left: -2px; } .rack-nav.next { right: -2px; } }
@media (hover: none) {
  .rack { scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.35) transparent; padding-bottom: 14px; }
  .rack::-webkit-scrollbar { display: block; height: 3px; }
  .rack::-webkit-scrollbar-thumb { background: rgba(255,255,255,.35); border-radius: 2px; }
}
.formats { grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
@media (max-width: 1099px) { .formats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .formats { grid-template-columns: minmax(0, 1fr); } }
/* MORE heading sits left, Shelf / Guide switch on the right */
.shelf-head { justify-content: space-between; }
.shelf-head .shelf-k { text-align: left; }
.shelf-view { position: static; }

/* Logo: DAY solid, DARK hollow, with a tape wave that spikes now and then (and on hover) */
.logo .lw { display: inline-block; filter: url(#dd-logo); }
.logo .lw .out { text-shadow: none; /* hollow made from the letter's outer edge, so overlapping strokes in A and R don't show */
  filter: url(#dd-hollow) drop-shadow(-2px 0 var(--pink)) drop-shadow(2px 0 var(--blue)); }
.logo.spike .lw { filter: url(#dd-logo-spike); }
@media (max-width: 699px) {
  .logo .lw { filter: url(#dd-logo-sm); }
  .logo.spike .lw { filter: url(#dd-logo-sm-spike); }
  .logo .lw .out { filter: url(#dd-hollow-sm) drop-shadow(-1.5px 0 var(--pink)) drop-shadow(1.5px 0 var(--blue)); }
}
@media (prefers-reduced-motion: reduce) { .logo.spike .lw { filter: url(#dd-logo); } }

/* The color-bar band matches the content width at every size, with soft fades on all four sides.
   The bars layer is wider than the box so it can lean; its side fades start where the box edge is. */
.credits, .section > .reel { overflow: hidden; }
.credits::after, .section > .reel::after { width: 100%;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 min(200px, 14%), #000 calc(100% - min(200px, 14%)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 min(200px, 14%), #000 calc(100% - min(200px, 14%)), transparent 100%);
          mask-composite: intersect;
}
.credits::before, .section > .reel::before { width: calc(100% + 360px);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 180px, #000 calc(180px + min(250px, 15%)), #000 calc(100% - 180px - min(250px, 15%)), transparent calc(100% - 180px));
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 180px, #000 calc(180px + min(250px, 15%)), #000 calc(100% - 180px - min(250px, 15%)), transparent calc(100% - 180px));
          mask-composite: intersect;
}

/* Logo spike: a harder color split that changes size with every hit */
.logo.spike { text-shadow: calc(-1 * var(--rgb, 5px)) 0 var(--pink), var(--rgb, 5px) 0 var(--blue); }
.logo.spike .lw .out { filter: url(#dd-hollow) drop-shadow(calc(-1 * var(--rgb, 5px)) 0 var(--pink)) drop-shadow(var(--rgb, 5px) 0 var(--blue)); }
@media (max-width: 699px) {
  .logo.spike .lw .out { filter: url(#dd-hollow-sm) drop-shadow(calc(-.6 * var(--rgb, 5px)) 0 var(--pink)) drop-shadow(calc(.6 * var(--rgb, 5px)) 0 var(--blue)); }
}
/* Logo spike extras: the picture jumps, leans and flashes or dims, each hit set at random */
.logo .lw { transition: none; }
.logo.spike .lw { transform: translate(var(--jx, 0), var(--jy, 0)) skewX(var(--sk, 0deg)); }
.logo.spike { filter: brightness(var(--br, 1)) hue-rotate(var(--hue, 0deg)); }

/* Start a Project: the same crawling edge static as the logo, softened with a slight blur */
.cta-copy h2 { filter: url(#dd-fuzz); }

/* One Daydark signal texture across the big type: crawling edge static, a slow wave, the pink/blue split */
.cards-clean .card h3 { filter: url(#dd-sig); }
.d-title { filter: url(#dd-static); }
.lede.statement .dd { display: inline-block; filter: url(#dd-static); }

/* Homepage service cards: no title glitch. Hover works like the video tiles: pink/blue edges, a burst of static,
   a rolling bar and scanlines, with a small jitter */
.cards-clean a.card:hover h3, .cards-clean a.card:focus-visible h3 { animation: none; }
.cards-clean .card::after { display: none; }

.cards-clean .card .tv { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cards-clean .card .tv > * { position: absolute; inset: 0; }
.cards-clean .card .static { mix-blend-mode: screen; opacity: 0; }
.cards-clean .card .static svg { display: block; }
.cards-clean .card .roller { top: 0; bottom: auto; height: 30%; opacity: 0; background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,.08), rgba(255,255,255,0)); }
.cards-clean .card .scan { opacity: 0; transition: opacity .25s; background: repeating-linear-gradient(to bottom, rgba(0,0,0,0) 0 2px, rgba(0,0,0,.22) 2px 3px); }
.cards-clean a.card:hover .static, .cards-clean a.card:focus-visible .static { opacity: .12; animation: burst .45s ease-out; }
.cards-clean a.card:hover .roller, .cards-clean a.card:focus-visible .roller { opacity: 1; animation: roll 1.6s linear infinite; }
.cards-clean a.card:hover .scan, .cards-clean a.card:focus-visible .scan { opacity: 1; }
.cards-clean a.card:hover h3, .cards-clean a.card:hover .go { animation: jitter .3s steps(3) 1; }
.cards-clean .card h3, .cards-clean .card .go { position: relative; }
@media (prefers-reduced-motion: reduce) {
  .cards-clean a.card:hover .static, .cards-clean a.card:hover .roller, .cards-clean a.card:hover h3, .cards-clean a.card:hover .go { animation: none; }
}

/* Bloom + halation on the big bright type: a tight warm halo at the edges and a wide soft glow,
   breathing very slowly like an old set warming up */
@property --glow { syntax: "<number>"; inherits: true; initial-value: 1; }
:root { --glow: 1; animation: dd-breathe 14s steps(56) infinite; } /* stepped: a few updates a second is plenty for a glow this slow */
@keyframes dd-breathe { 0%, 100% { --glow: .85; } 50% { --glow: 1.15; } }
@media (prefers-reduced-motion: reduce) { :root { animation: none; } }
.logo { filter: drop-shadow(0 0 2px rgba(255,140,190, calc(.28 * var(--glow)))) drop-shadow(0 0 16px rgba(236,230,255, calc(.16 * var(--glow)))); }
.cta-copy h2 { filter: url(#dd-fuzz) drop-shadow(0 0 3px rgba(255,140,190, calc(.3 * var(--glow)))) drop-shadow(0 0 30px rgba(236,230,255, calc(.2 * var(--glow)))); }
.cards-clean .card h3 { filter: url(#dd-sig) drop-shadow(0 0 2px rgba(255,140,190, calc(.25 * var(--glow)))) drop-shadow(0 0 14px rgba(236,230,255, calc(.14 * var(--glow)))); }
.d-title { filter: url(#dd-static) drop-shadow(0 0 3px rgba(255,140,190, calc(.25 * var(--glow)))) drop-shadow(0 0 26px rgba(236,230,255, calc(.15 * var(--glow)))); }
.lede.statement .dd { filter: url(#dd-static) drop-shadow(0 0 2px rgba(255,140,190, calc(.25 * var(--glow)))) drop-shadow(0 0 12px rgba(236,230,255, calc(.16 * var(--glow)))); }

/* Header nav slashes: pink neon glow, breathing with the rest of the bloom */


/* 16mm grain: the grain plate replaces the old noise svg; movement and flicker come from app.js */
.grain.film, .cta > .grain-in.film { animation: none; background-repeat: repeat; background-size: 400px 400px; inset: 0; width: 100%; height: 100%; mix-blend-mode: overlay; }
.grain.film svg, .cta > .grain-in.film svg { display: none; }
.gate { position: fixed; inset: 0; pointer-events: none; z-index: 60; }
.gate i { position: absolute; display: block; transform: rotate(var(--rot)) scale(var(--s)); }
.gate .speck { width: 3px; height: 2px; border-radius: 50%; background: rgba(10,9,18,.75); box-shadow: 0 0 1px rgba(10,9,18,.6); }
.gate .hair { width: 26px; height: 1px; border-radius: 1px; background: rgba(10,9,18,.55);
  clip-path: path("M0 0 C 8 1, 14 -1, 26 1 L26 2 C 14 0, 8 2, 0 1 Z"); height: 3px; background: rgba(230,226,255,.35); }


/* ================= Glow in the dark: one system =================
   Only lit things glow. Everything breathes on the same slow --glow cycle, and glows fade out slowly
   like phosphor when you move away. */
:root {
  --glow-pink: 0 0 4px rgb(255 95 191 / calc(.85 * var(--glow))), 0 0 12px rgb(255 95 191 / calc(.45 * var(--glow))), 0 0 24px rgb(255 95 191 / calc(.25 * var(--glow)));
  --glow-pink-soft: 0 0 6px rgb(255 95 191 / calc(.45 * var(--glow))), 0 0 16px rgb(255 95 191 / calc(.2 * var(--glow)));
  --glow-white: 0 0 12px rgb(244 242 255 / calc(.32 * var(--glow))), 0 0 30px rgb(201 184 255 / calc(.18 * var(--glow)));
  --glow-pink-box: 0 0 14px rgb(255 95 191 / calc(.45 * var(--glow))), 0 0 34px rgb(255 95 191 / calc(.22 * var(--glow)));
  --afterglow: 1.6s cubic-bezier(.2,.6,.2,1);
}
/* Accents: nav slashes, rec dots, section labels and captions */
.site-header nav .slash, .label .rec, .kind .rec { text-shadow: var(--glow-pink); }
.logo-row .k, .reel .k, .cap, .credit-card h2 { text-shadow: var(--glow-pink-soft); }
.cap::before, .cap::after { box-shadow: 0 0 8px rgb(255 95 191 / calc(.5 * var(--glow))); }
/* Lit controls: the active filter, Send, back to top */
.btn, .to-top { box-shadow: var(--glow-white); }
.filters a, .btn, .to-top, .site-header nav a { transition: border-color var(--afterglow), background .2s, color .2s, box-shadow var(--afterglow), text-shadow var(--afterglow); }
.filters a:hover, .btn:hover, .to-top:hover { box-shadow: var(--glow-pink-box); transition-duration: .15s; }
.site-header nav a:hover { text-shadow: 0 0 10px rgb(244 242 255 / calc(.45 * var(--glow))); transition-duration: .15s; }
/* Play arrows and tape-deck buttons glow in their own color */
.cards-clean .card .go.deck { filter: drop-shadow(0 0 5px color-mix(in srgb, var(--c) calc(85% * var(--glow)), transparent)) drop-shadow(0 0 14px color-mix(in srgb, var(--c) calc(45% * var(--glow)), transparent)); }
.cta-copy h2 .rec { filter: drop-shadow(0 0 6px rgb(255 95 191 / calc(.9 * var(--glow)))) drop-shadow(0 0 18px rgb(255 95 191 / calc(.5 * var(--glow)))); }
/* Video screens light the room: each one spills its own color (sampled from the footage by app.js) */
.tile .screen { box-shadow: 0 0 50px -12px rgb(var(--spill, 138 99 255) / calc(.42 * var(--glow))); transition: box-shadow var(--afterglow); }
.tile:hover .screen, .tile.tuning .screen { box-shadow: 0 0 80px -6px rgb(var(--spill, 138 99 255) / calc(.75 * var(--glow))); transition-duration: .15s; }
/* Service cards and tapes: the hover edges fade out like phosphor */
.cards-clean .card, .vhs { transition: box-shadow var(--afterglow), border-color var(--afterglow), background .3s, transform .35s cubic-bezier(.2,.7,.2,1); }
.cards-clean a.card:hover, .cards-clean a.card:focus-visible, a.vhs:hover, .vhs.on { transition-duration: .15s; }
.cards-clean a.card:hover, .cards-clean a.card:focus-visible { border-color: color-mix(in srgb, var(--c) 55%, var(--line)); box-shadow: 0 0 46px -8px color-mix(in srgb, var(--c) calc(75% * var(--glow)), transparent); filter: brightness(1.12); }
.cards-clean .card .tv .scan, .cards-clean .card .tv .roller { transition: opacity var(--afterglow); }
.cards-clean a.card:hover .tv .scan, .cards-clean a.card:hover .tv .roller { transition-duration: .15s; }

/* Hover = the screen brightens, like turning a set up; it dims back slowly on the way out. No edge lines, no jitter. */
.tile .media, .tile video, .tile img { transition: transform .6s cubic-bezier(.2,.7,.2,1), filter var(--afterglow); }
.tile:hover .media, .tile:hover video, .tile:hover img, .tile.tuning .media, .tile.tuning video, .tile.tuning img { filter: brightness(1.2) saturate(1.08); animation: none; transition: transform .6s cubic-bezier(.2,.7,.2,1), filter .15s; }
.cards-clean a.card:hover h3, .cards-clean a.card:hover .go { animation: none; }
.cards-clean .card, .vhs, a.tape { transition: box-shadow var(--afterglow), border-color var(--afterglow), filter var(--afterglow), background .3s, color .2s, transform .35s cubic-bezier(.2,.7,.2,1); }

/* Credits backdrop, soft phosphor: the test-pattern bars hold still, soft-focused so the colors glow and
   bleed into each other like halation. No scanlines; the film grain shows through. */
.credits::before, .section > .reel::before { filter: url(#dd-bars) blur(10px) saturate(1.35); opacity: .42; animation: none; transform: translateX(-50%) skewX(-16deg); }
/* Hum bar: a soft band of brighter signal rolling slowly down the picture, like a real set picking up mains hum */
.credits::after, .section > .reel::after { top: 0; bottom: auto; height: 32%; -webkit-mask-image: none; mask-image: none;
  background: linear-gradient(to bottom, transparent 0, rgb(244 242 255 / .045) 35%, rgb(244 242 255 / .08) 50%, rgb(244 242 255 / .045) 65%, transparent 100%);
  transform: translateX(-50%) translateY(-100%); animation: hum 9s linear infinite; will-change: transform; }
@keyframes hum { from { transform: translateX(-50%) translateY(-100%); } to { transform: translateX(-50%) translateY(320%); } }
@media (prefers-reduced-motion: reduce) { .credits::after, .section > .reel::after { animation: none; background: none; } }

/* Credits bars on canvas (app.js); the CSS bars stay as the fallback when scripts don't run */
.credits.has-bars::before { display: none; }
.bars-cv { position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; opacity: .42; filter: saturate(1.35);
  image-rendering: auto;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 min(200px, 14%), #000 calc(100% - min(200px, 14%)), transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to bottom, transparent 0%, #000 18%, #000 80%, transparent 100%), linear-gradient(90deg, transparent 0, #000 min(200px, 14%), #000 calc(100% - min(200px, 14%)), transparent 100%);
          mask-composite: intersect; }

/* The wall as one screen: no glow per tile. The whole wall lights the dark room around it, in the average color
   of what's playing, and shifts toward a tile's color while you hover it (app.js sets --wall-c) */
@property --wall-c { syntax: "<color>"; inherits: true; initial-value: rgb(138 99 255); }
.tile .screen, .tile:hover .screen, .tile.tuning .screen { box-shadow: none; }
.mosaic { position: relative; isolation: isolate; transition: --wall-c 2.4s ease; }
.mosaic::before { content: ""; position: absolute; inset: -90px -120px -140px; z-index: -1; pointer-events: none;
  background:
    radial-gradient(55% 50% at 50% 46%, color-mix(in srgb, var(--wall-c) calc(30% * var(--glow)), transparent) 0%, transparent 72%),
    radial-gradient(70% 30% at 50% 100%, color-mix(in srgb, var(--wall-c) calc(14% * var(--glow)), transparent) 0%, transparent 70%); }
.mosaic.empty::before { display: none; }

/* MORE shelf, rack and guide: the same hover as the wall. The picture brightens, a burst of static settles into
   scanlines, the tape glows in its footage's color, and it all fades back slowly when you leave */
.vhs .v-cover img, .vhs .v-cover video, .vhs .v-cover i, .tape .t-peek video, .tape .t-peek i { transition: filter var(--afterglow), opacity .2s; }
a.vhs:hover .v-cover img, a.vhs:hover .v-cover video, a.vhs:hover .v-cover i, .vhs.on .v-cover img, .vhs.on .v-cover video, .vhs.on .v-cover i,
a.tape:hover .t-peek video, a.tape:hover .t-peek i { filter: brightness(1.2) saturate(1.08); transition: filter .15s, opacity .2s; }
.vhs .v-cover::before, .tape .t-peek::before { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0;
  background: var(--grain-plate, none) 0 0 / 200px 200px; mix-blend-mode: screen; }
a.vhs:hover .v-cover::before, .vhs.on .v-cover::before, a.tape:hover .t-peek::before { opacity: .12; animation: burst .45s ease-out; }
.vhs .v-scan { opacity: .5; transition: opacity var(--afterglow); }
a.vhs:hover .v-scan, .vhs.on .v-scan { opacity: 1; transition-duration: .15s; }
a.vhs:hover, a.vhs:focus-visible, .vhs.on { filter: none; box-shadow: 0 0 40px -6px rgb(var(--spill, 201 184 255) / calc(.7 * var(--glow))), 0 18px 26px -14px #000; }
a.tape:hover, a.tape:focus-visible { box-shadow: 0 0 28px -4px rgb(var(--spill, 201 184 255) / calc(.6 * var(--glow))); }
@media (prefers-reduced-motion: reduce) { a.vhs:hover .v-cover::before, a.tape:hover .t-peek::before { animation: none; } }

/* Rolling bar, made unpredictable: each pass gets its own speed, strength, size and gap (set by app.js),
   and sometimes there's no bar at all */
@keyframes roll-once { 0% { transform: translateY(-120%); } 100% { transform: translateY(var(--roll-to, 620%)); } }
.tile:hover .roller, .tile.tuning .roller, .cards-clean a.card:hover .roller, .cards-clean a.card:focus-visible .roller {
  animation: roll-once var(--roll-dur, 2.4s) linear var(--roll-delay, 0s) 1 both; opacity: var(--roll-op, 1); height: var(--roll-h, 16%); }
.credits::after { animation-duration: var(--hum-dur, 9s); animation-direction: var(--hum-dir, normal); }

/* Grain, almost gone: a barely-there film texture so the black isn't flat */
.grain.film, .cta > .grain-in.film { opacity: .045 !important; }

/* Filters and nav, simpler: no pink haze. On hover the label switches on like a tube, with one quick flicker,
   and the pill's edge lights up. Off is a slow fade. */
@keyframes tube-on { 0% { opacity: .55; } 18% { opacity: 1; } 30% { opacity: .6; } 46%, 100% { opacity: 1; } }
.filters a:hover, .btn:hover, .to-top:hover { box-shadow: none; }
.filters a:not([aria-current="page"]) { color: var(--soft); }
.filters a:not([aria-current="page"]):hover { color: #fff; border-color: rgb(244 242 255 / .75);
  text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 14px rgb(201 184 255 / .4); animation: tube-on .32s steps(1, end) 1; transition-duration: .1s; }
.site-header nav a:hover { color: #fff; text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 14px rgb(201 184 255 / .4); animation: tube-on .32s steps(1, end) 1; }
@media (prefers-reduced-motion: reduce) { .filters a:hover, .site-header nav a:hover { animation: none; } }

/* Service cards: the title switches on like the filters, one quick flicker then a white glow */
.cards-clean .card h3 { transition: text-shadow var(--afterglow), color .2s; }
.cards-clean a.card:hover h3, .cards-clean a.card:focus-visible h3 { color: #fff; animation: tube-on .32s steps(1, end) 1;
  text-shadow: -0.05em 0 rgba(255,95,191,.8), 0.05em 0 rgba(77,124,255,.8), 0 0 8px rgb(244 242 255 / .75), 0 0 20px rgb(201 184 255 / .45); transition-duration: .1s; }
.cards-clean a.card:hover .go.deck { animation: tube-on .32s steps(1, end) 1; }
@media (prefers-reduced-motion: reduce) { .cards-clean a.card:hover h3, .cards-clean a.card:hover .go.deck { animation: none; } }

/* MORE shelf: same tube-on hover as the filters and cards */
.shelf-view button { transition: color var(--afterglow), text-shadow var(--afterglow); }
.shelf-view button:not([aria-pressed="true"]):hover { color: #fff; text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 14px rgb(201 184 255 / .4); animation: tube-on .32s steps(1, end) 1; transition-duration: .1s; }
/* Guide rows: artist and title switch on together, white with a soft glow (no more pink swap) */
.gl-artist, .gl-title, .gl-yr { transition: color var(--afterglow), text-shadow var(--afterglow); }
a.gl:hover .gl-artist, a.gl:focus-visible .gl-artist { color: #fff; }
a.gl:hover .gl-main, a.gl:focus-visible .gl-main { animation: tube-on .32s steps(1, end) 1; }
a.gl:hover .gl-artist, a.gl:hover .gl-title, a.gl:focus-visible .gl-artist { text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 14px rgb(201 184 255 / .4); transition-duration: .1s; }
a.gl:hover .gl-title { color: #fff; }
a.gl:hover .gl-yr { text-shadow: 0 0 6px rgb(255 95 191 / .8); transition-duration: .1s; }
/* Shelf tapes: the label flickers on with the cover */
.v-label { transition: box-shadow var(--afterglow); }
a.vhs:hover .v-label, .vhs.on .v-label { animation: tube-on .32s steps(1, end) 1; box-shadow: 0 0 18px rgb(244 242 255 / .35); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .shelf-view button:hover, a.gl:hover .gl-main, a.vhs:hover .v-label { animation: none; } }
/* Guide row background: a quiet lit band instead of the color sweep, fading out slowly */
.gl::before { background: linear-gradient(90deg, rgb(201 184 255 / .10), rgb(201 184 255 / .04) 70%, transparent); transition: opacity var(--afterglow); }
a.gl:hover::before, a.gl:focus-visible::before { animation: none; transition-duration: .1s; }

/* ================= Service buttons, final: quiet cards =================
   Thin outline, clean caps, the tape-deck icon carries the color. No strip, no glow, no static.
   Hover: the same tube-on as the filters, title flickers on white and the edge lights up. */
.cards-clean .card { background: transparent; border: 1px solid var(--line); box-shadow: none; filter: none;
  transition: border-color var(--afterglow), box-shadow var(--afterglow); }
.cards-clean .card::before, .cards-clean .card::after, .cards-clean .card .tv { display: none; }
.cards-clean .card h3 { filter: none; text-shadow: none; font-weight: 700; letter-spacing: .05em; line-height: 1.12; color: var(--ink);
  font-size: clamp(17px, 1.4vw, 22px); transition: color var(--afterglow), text-shadow var(--afterglow); }
@media (min-width: 1200px) { .cards-clean .card h3 { font-size: clamp(18px, 1.5vw, 24px); } }
.cards-clean .card .go.deck { font-size: 14px; filter: none; }
.cards-clean a.card:hover, .cards-clean a.card:focus-visible { background: transparent; filter: none; border-color: rgb(244 242 255 / .75);
  box-shadow: 0 0 18px -6px rgb(244 242 255 / .35); transition-duration: .1s; }
.cards-clean a.card:hover h3, .cards-clean a.card:focus-visible h3 { color: #fff; animation: tube-on .32s steps(1, end) 1;
  text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 14px rgb(201 184 255 / .4); transition-duration: .1s; }
.cards-clean a.card:hover .go.deck, .cards-clean a.card:focus-visible .go.deck { animation: tube-on .32s steps(1, end) 1;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--c) 80%, transparent)); }

/* ================= Start a Project, rethought: a lit screen in a dark room =================
   Dark panel, the glow comes from behind the heading. Crisp heading that switches on when it scrolls in.
   The form sits straight on the panel with thin outlined fields, like the service buttons. */
.cta { background: radial-gradient(60% 55% at 50% 18%, rgb(138 99 255 / .22), rgb(255 95 191 / .07) 45%, transparent 75%), #0d0b18 !important;
  border: 1px solid var(--line); box-shadow: 0 0 80px -30px rgb(138 99 255 / .45); }
.cta > .grain-in { display: none; }
.cta-copy h2 { filter: none !important; text-shadow: 0 0 10px rgb(244 242 255 / .55), 0 0 34px rgb(201 184 255 / .4), 0 0 80px rgb(255 95 191 / .25); color: #fff; }
.cta-copy h2 .rec { filter: drop-shadow(0 0 6px rgb(255 95 191 / .9)) drop-shadow(0 0 18px rgb(255 95 191 / .5)); }
.cta.lit .cta-copy h2 { animation: tube-on .5s steps(1, end) 1; }
.inquiry { background: none !important; backdrop-filter: none !important; padding: 0 !important; border-radius: 0; }
.inquiry label { color: var(--soft); }
.inquiry input, .inquiry textarea { background: rgb(10 9 18 / .55) !important; border: 1px solid var(--line) !important; border-radius: 8px;
  transition: border-color var(--afterglow), box-shadow var(--afterglow); }
.inquiry input:hover, .inquiry textarea:hover { border-color: rgb(244 242 255 / .4) !important; }
.inquiry input:focus, .inquiry textarea:focus { border-color: rgb(244 242 255 / .8) !important; box-shadow: 0 0 16px -6px rgb(244 242 255 / .45); transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .cta.lit .cta-copy h2 { animation: none; } }

/* ================= Credits, final: clean dark with one glowing test-pattern strip =================
   The color breakup lives in a single slim strip above Seen On, glowing softly; the credits sit on plain dark. */
.credits::before, .credits::after, .bars-cv { display: none !important; }
.credits .logos:first-of-type::before { content: ""; display: block; height: 6px; width: min(560px, 70%); margin: 0 auto clamp(20px, 2.4vw, 30px); border-radius: 2px;
  background: linear-gradient(90deg, var(--ink) 0 14.28%, var(--lilac) 14.28% 28.57%, var(--purple) 28.57% 42.85%, var(--blue) 42.85% 57.14%, var(--cobalt) 57.14% 71.42%, var(--pink) 71.42% 85.71%, var(--night) 85.71% 100%);
  box-shadow: 0 0 calc(18px * var(--glow)) rgb(138 99 255 / .45), 0 0 calc(50px * var(--glow)) rgb(255 95 191 / .2); }
@media (max-width: 699px) { .credits .logos:first-of-type::before { height: 5px; width: 80%; } }
/* the wall's room light fades out fully before it ends, no hard edge into the credits */
.mosaic::before { -webkit-mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); mask-image: linear-gradient(to bottom, #000 70%, transparent 100%); }

/* Both test-pattern strips match: same width, height and glow as the one above the homepage intro */
.credits .logos:first-of-type::before { width: clamp(180px, 24vw, 360px); height: 8px; border-radius: 1px;
  box-shadow: 0 0 18px rgba(138,99,255,.35); }
@media (max-width: 699px) { .credits .logos:first-of-type::before { width: clamp(180px, 24vw, 360px); height: 8px; } }

/* ================= Credits spacing: one even rhythm =================
   Same space from strip to Seen On, from each divider to the next label, and from each block's content to its divider.
   Labels sit the same small distance above their content. */
.credits { --S: clamp(24px, 2.8vw, 38px); --s: clamp(12px, 1.3vw, 18px); padding-top: clamp(36px, 4.5vw, 64px) !important; padding-bottom: clamp(36px, 4.5vw, 64px) !important; }
.credits > .logos, .credits > .reel { padding: var(--S) 0 !important; margin: 0 !important; }
.credits > :first-child { padding-top: 0 !important; }
.credits > :last-child { padding-bottom: 0 !important; }
.credits .logo-row { padding-top: 0 !important; }
.credits .logo-row .k, .credits .reel .k { margin: 0 0 calc(var(--s) - var(--g, 0px)) !important; }
.credits .logos:first-of-type::before { margin-bottom: var(--S) !important; }

/* The strips cast light: a soft wash of their own colors spills down onto what's beneath them */
.credits .logos:first-of-type::after, .lede.statement::after { content: ""; position: absolute; left: 50%; top: 4px; transform: translateX(-50%);
  width: clamp(320px, 44vw, 640px); height: clamp(140px, 16vw, 220px); z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--ink) 0 14.28%, var(--lilac) 14.28% 28.57%, var(--purple) 28.57% 42.85%, var(--blue) 42.85% 57.14%, var(--cobalt) 57.14% 71.42%, var(--pink) 71.42% 85.71%, var(--night) 85.71% 100%);
  filter: blur(34px); opacity: calc(.16 * var(--glow));
  -webkit-mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .5) 45%, transparent 80%);
          mask-image: radial-gradient(50% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .5) 45%, transparent 80%); }
.lede.statement { position: relative; isolation: isolate; }

/* Less empty dark under Clients: tighter hand-off from the credits to the intro below */
.credits { padding-bottom: clamp(20px, 2.4vw, 32px) !important; }
.credits + .section { padding-top: clamp(36px, 4.5vw, 64px) !important; }
/* Dividers between Seen On / Credits / Clients: barely there */
.credits > .logos, .credits > .reel { border-bottom-color: rgb(244 242 255 / .05) !important; }
.credits > :last-child { border-bottom: 0 !important; }

/* Credits strip removed: one test-pattern strip per page (the one above the intro) */
.credits .logos:first-of-type::before, .credits .logos:first-of-type::after { display: none !important; }

/* ================= Breathing room after the video wall ================= */
.credits { --S: clamp(36px, 4.2vw, 56px); --s: clamp(16px, 1.7vw, 22px);
  padding-top: clamp(56px, 6.4vw, 88px) !important; padding-bottom: clamp(40px, 4.5vw, 64px) !important; }
.credits + .section { padding-top: clamp(48px, 5vw, 68px) !important; }
.cards-clean { margin-top: clamp(56px, 7vw, 92px) !important; }
#contact { margin-top: clamp(40px, 4vw, 56px); }

/* Start a Project glow, final: a low, wide violet horizon glow along the top edge, heading in white light */
.cta { background: radial-gradient(70% 45% at 50% 0%, rgb(138 99 255 / .16), transparent 70%), radial-gradient(40% 30% at 50% 16%, rgb(244 242 255 / .06), transparent 70%), #0c0b15 !important;
  box-shadow: 0 -1px 0 rgb(201 184 255 / .25), 0 0 60px -36px rgb(138 99 255 / .4) !important; }
.cta-copy h2 { text-shadow: 0 0 10px rgb(244 242 255 / .55), 0 0 34px rgb(201 184 255 / .3) !important; }
/* calmer: the horizon glow and heading light at about half strength */
.cta { background: radial-gradient(70% 40% at 50% 0%, rgb(138 99 255 / .08), transparent 70%), #0c0b15 !important;
  box-shadow: 0 -1px 0 rgb(201 184 255 / .12) !important; }
.cta-copy h2 { text-shadow: 0 0 8px rgb(244 242 255 / .3), 0 0 26px rgb(201 184 255 / .14) !important; }

/* Service pages: WHAT WE MAKE covers the description and the formats as one block */
.section > .cap + .about.solo { padding-top: clamp(12px, 1.1vw, 14px); }
#make { margin-top: clamp(-34px, -2.6vw, -20px); }

/* Pink section labels: a touch bigger everywhere, and the same visible space under each one */
.section > .cap { font-size: clamp(14px, .35vw + 12px, 17px) !important; } /* bigger on the service pages only; the homepage credit labels keep their size */
.credits .logos:first-of-type .k { margin-bottom: calc(var(--s) - var(--g, 0px) + clamp(4px, 1vw, 13px)) !important; }
.credits .reel .k { margin-bottom: calc(var(--s) - var(--g, 0px) + clamp(0px, 8px - .6vw, 6px)) !important; }
.credits .logos:last-of-type .k { margin-bottom: calc(var(--s) - var(--g, 0px) + clamp(4px, .7vw, 9px)) !important; }
.section > .cap + .about.solo { padding-top: clamp(18px, 1.6vw, 20px); }

/* Tablet widths: the label and the filters no longer fit side by side, so the label steps aside
   (still there for search and screen readers, like on phones) and the filters center */
@media (min-width: 700px) and (max-width: 999px) {
  .intro .label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .intro { justify-content: center; }
}
@media (min-width: 700px) and (max-width: 999px) { .intro .filters { margin-inline: auto !important; } }

/* ================= Logo, final: clean =================
   DAY crisp white, DARK a clean hollow outline that glows soft pink like a lit tube.
   No wave, no grain, no color split. The glow breathes with the rest of the site. */
.logo { text-shadow: none !important; filter: drop-shadow(0 0 12px rgb(236 230 255 / calc(.18 * var(--glow)))) !important; }
.logo .lw, .logo.spike .lw { filter: none !important; transform: none !important; letter-spacing: .01em; }
.logo .lw .out { filter: url(#dd-hollow) drop-shadow(0 0 3px rgb(255 95 191 / calc(.6 * var(--glow)))) drop-shadow(0 0 10px rgb(255 95 191 / calc(.3 * var(--glow)))) !important; }
@media (max-width: 699px) {
  .logo .lw .out { filter: url(#dd-hollow-sm) drop-shadow(0 0 2px rgb(255 95 191 / calc(.6 * var(--glow)))) drop-shadow(0 0 7px rgb(255 95 191 / calc(.3 * var(--glow)))) !important; }
}
.site-footer .fine { justify-content: center; } /* just the copyright line now */
#contact { margin-top: clamp(-16px, -1.2vw, -8px); } /* Start a Project sits closer to the content above */

/* Tabs with no MORE shelf: the same glowing rail closes the wall before What We Make */
.mosaic + .section { position: relative; }
.mosaic + .section::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--blue), var(--pink)); opacity: .55; box-shadow: 0 0 14px rgb(138 99 255 / .3); }
.mosaic + .section::before { top: clamp(24px, 2.8vw, 36px); background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac)); box-shadow: none; }
.mosaic + .section { padding-top: calc(clamp(24px, 2.8vw, 36px) + clamp(80px, 9vw, 118px)) !important; } /* same gap under the rail as on tabs with a shelf */

/* The rails cast light: a soft wash of their colors spills down from the line, like a light bar */
.mosaic + .section::after, .rack-wrap::before { content: ""; position: absolute; left: 4%; right: 4%; height: clamp(90px, 10vw, 140px); pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac));
  filter: blur(30px); opacity: calc(.13 * var(--glow));
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent); mask-image: linear-gradient(to bottom, #000, transparent); }
.mosaic + .section::after { top: calc(clamp(24px, 2.8vw, 36px) + 2px); }
.mosaic + .section { isolation: isolate; }
.rack-wrap::before { top: calc(100% - 8px); }
.rack-wrap { isolation: isolate; }
.mosaic + .section::after, .rack-wrap::before { left: 0; right: 0; filter: none; opacity: calc(.16 * var(--glow));
  -webkit-mask-image: radial-gradient(55% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .45) 40%, transparent 80%);
          mask-image: radial-gradient(55% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .45) 40%, transparent 80%); }

/* The MORE shelf (both views) spills light down into What We Make, a little stronger than before */
.shelf { position: relative; isolation: isolate; }
.shelf::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: clamp(110px, 12vw, 170px); pointer-events: none; z-index: -1;
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac)); opacity: calc(.22 * var(--glow));
  -webkit-mask-image: radial-gradient(55% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .45) 40%, transparent 80%);
          mask-image: radial-gradient(55% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .45) 40%, transparent 80%); }
.rack-wrap::before { display: none; }
.mosaic + .section::after { opacity: calc(.22 * var(--glow)); }
.shelf[data-mode="guide"] .guide { position: relative; }
.shelf[data-mode="guide"] .guide::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac)); opacity: .55; }
.shelf[data-mode="guide"] .guide::after { display: none; } /* guide view: just the glow, no bar */

/* More gradient: the spill from MORE (and the divider on Branded/Social) is deeper and more colorful */
.shelf::after, .mosaic + .section::after { height: clamp(150px, 16vw, 230px); opacity: calc(.34 * var(--glow));
  background: linear-gradient(90deg, var(--purple), var(--blue) 30%, var(--purple) 50%, var(--pink) 72%, var(--lilac));
  -webkit-mask-image: radial-gradient(62% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .55) 38%, transparent 82%);
          mask-image: radial-gradient(62% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .55) 38%, transparent 82%); }

/* Softer: the spill is a gentle haze with a long, feathered fade (no visible edges) */
.shelf::after, .mosaic + .section::after { height: clamp(170px, 18vw, 260px); opacity: calc(.2 * var(--glow)); filter: blur(24px);
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac));
  -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .4) 30%, rgb(0 0 0 / .12) 60%, transparent 90%);
          mask-image: radial-gradient(60% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .4) 30%, rgb(0 0 0 / .12) 60%, transparent 90%); }

/* Email line, more prominent: bigger, the address in bright white with a soft glow; hover lights it up like the filters */
.inquiry .or-email { font-size: clamp(15px, 1.1vw + 9px, 18px); color: var(--soft); margin-top: 14px; padding-top: 20px; }
.inquiry .or-email a { color: #fff; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgb(244 242 255 / .35); padding-bottom: 2px;
  text-shadow: 0 0 10px rgb(244 242 255 / .25); transition: text-shadow var(--afterglow), border-color var(--afterglow), color .2s; }
.inquiry .or-email a:hover, .inquiry .or-email a:focus-visible { color: #fff; border-color: rgb(244 242 255 / .85);
  text-shadow: 0 0 6px rgb(244 242 255 / .7), 0 0 16px rgb(201 184 255 / .45); animation: tube-on .32s steps(1, end) 1; transition-duration: .1s; }
@media (prefers-reduced-motion: reduce) { .inquiry .or-email a:hover { animation: none; } }
/* Three service cards (Branded hidden): one row of three from 700px, stacked on phones, so no card sits alone */
.cards-clean:not(.steps):has(> .card:nth-child(3):last-child) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 700px) { .cards-clean:not(.steps):has(> .card:nth-child(3):last-child) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Two service cards (Branded and Social hidden): side by side at every width */
.cards-clean:not(.steps):has(> .card:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* Homepage: the Featured wall spills the same soft light down onto Seen On, like the MORE shelf does into What We Make (no bar) */
.mosaic[data-cat="all"]::after { content: ""; position: absolute; left: 0; right: 0; top: calc(100% + 8px); height: clamp(170px, 18vw, 260px);
  pointer-events: none; z-index: -1; filter: blur(24px); opacity: calc(.2 * var(--glow));
  background: linear-gradient(90deg, var(--purple), var(--blue) 35%, var(--pink) 70%, var(--lilac));
  -webkit-mask-image: radial-gradient(60% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .4) 30%, rgb(0 0 0 / .12) 60%, transparent 90%);
          mask-image: radial-gradient(60% 100% at 50% 0%, #000 0%, rgb(0 0 0 / .4) 30%, rgb(0 0 0 / .12) 60%, transparent 90%); }
/* Logo hover: DAY stays lit, DARK sputters like a dying tube and goes out. It comes back on when you move away */
@keyframes dark-out {
  0% { opacity: 1; } 6% { opacity: .15; } 9% { opacity: 1; } 17% { opacity: 1; } 19% { opacity: .3; } 22% { opacity: .9; }
  33% { opacity: .9; } 35% { opacity: .1; } 41% { opacity: .65; } 44% { opacity: .08; } 58% { opacity: .08; } 60% { opacity: .45; }
  63% { opacity: .1; } 100% { opacity: .14; } }
.logo .lw .out { transition: opacity .5s ease; }
.logo:hover .lw .out, .logo:focus-visible .lw .out { opacity: .14; animation: dark-out 1.1s linear 1; transition: none; }
@media (prefers-reduced-motion: reduce) { .logo:hover .lw .out, .logo:focus-visible .lw .out { animation: none; transition: opacity .4s; } }
/* Start a Project hover: two small dips, like a tube catching. Once per page view */
@keyframes cta-sputter { 0% { opacity: 1; } 15% { opacity: .72; } 25% { opacity: 1; } 55% { opacity: 1; } 62% { opacity: .82; } 72%, 100% { opacity: 1; } }
/* Runs once per page view: app.js adds .sputter on the first hover and never removes it */
.cta .cta-copy h2.sputter, .cta.lit .cta-copy h2.sputter { animation: cta-sputter .45s linear 1; }
@media (prefers-reduced-motion: reduce) { .cta .cta-copy h2.sputter, .cta.lit .cta-copy h2.sputter { animation: none; } }