:root {
  --night: #06151a;
  --panel: #0d2229;
  --panel-2: #14323b;
  --film: #f0e9dc;
  --muted: #8fa8ad;
  --line: rgba(240, 233, 220, 0.16);
  --amber: #ff7a2f;
  --amber-hi: #ff9455;
  --display: "Unbounded", system-ui, sans-serif;
  --body: "Instrument Sans", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --bar: 40px;
  --hdr: 66px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--night); }
body { margin: 0; background: var(--night); color: var(--film); font-family: var(--body); font-size: 1rem; line-height: 1.5; }
button { font: inherit; color: inherit; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--amber-hi); outline-offset: 3px; }
[hidden] { display: none !important; }

/* header */
.top { position: fixed; inset: 0 0 auto 0; z-index: 30; display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 16px; background: rgba(6, 21, 26, 0.94); border-bottom: 1px solid var(--line); }
.lockup { color: var(--film); text-decoration: none; line-height: 1; }
.lockup b { display: block; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: 1.05rem; letter-spacing: -0.03em; }
.lockup span { display: block; margin-top: 5px; font-family: var(--mono); font-size: 0.6rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--amber); }
.actions { display: flex; gap: 8px; align-items: center; }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border: 0; border-radius: 999px; background: var(--amber); color: #1c0c02; font-weight: 600; font-size: 0.9rem; text-decoration: none; cursor: pointer; white-space: nowrap; transition: background-color .15s ease, transform .15s ease; }
.btn:hover { background: var(--amber-hi); transform: translateY(-1px); }
.btn.line { background: transparent; color: var(--film); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.line:hover { background: rgba(240, 233, 220, 0.1); }
.btn em, .fab em { font-style: normal; font-family: var(--mono); font-size: 0.8rem; padding: 0 7px; border-radius: 999px; background: var(--amber); color: #1c0c02; }

/* hero */
.hero { position: relative; min-height: min(100svh, 880px); display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: var(--hdr) 1fr var(--bar); background: #000; overflow: hidden; isolation: isolate; }
.hero video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hero-shade { position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(6, 21, 26, 0.9) 0%, rgba(6, 21, 26, 0.5) 55%, rgba(6, 21, 26, 0.15) 100%), linear-gradient(0deg, rgba(6, 21, 26, 0.92) 0%, rgba(6, 21, 26, 0.55) 38%, transparent 70%); }
.bar { display: flex; justify-content: space-between; align-items: center; padding: 0 16px; background: #000; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.tc { color: var(--amber); font-variant-numeric: tabular-nums; }
.hero-copy { align-self: end; min-width: 0; padding: 120px 16px 36px; max-width: 760px; text-shadow: 0 2px 18px rgba(6, 21, 26, 0.55); }
.hero h1 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.9rem, 6vw, 3.9rem); line-height: 1.08; letter-spacing: -0.035em; }
.hero p { margin: 16px 0 24px; max-width: 46ch; font-size: 1.08rem; color: #d7d2c7; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; }

/* loading screen: holds until fonts, the sheet and the hero video are ready, then lifts */
.splash { position: fixed; inset: 0; z-index: 200; display: grid; align-content: center; justify-items: center; gap: 30px; background: var(--night); transition: opacity .7s ease, visibility .7s; }
.splash.gone { opacity: 0; visibility: hidden; pointer-events: none; }
.splash-mark { text-align: center; line-height: 1; color: var(--film); }
.splash-mark b { display: block; white-space: nowrap; font-family: var(--display); font-weight: 700; font-size: clamp(1.7rem, 6.5vw, 2.6rem); letter-spacing: -0.03em; }
.splash-mark span { display: block; margin-top: 12px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.34em; text-transform: uppercase; color: var(--amber); }
.splash-bar { position: relative; display: block; width: min(220px, 52vw); height: 2px; overflow: hidden; border-radius: 2px; background: rgba(240, 233, 220, 0.14); }
.splash-bar::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 42%; background: var(--amber); animation: splash-run 1.2s ease-in-out infinite; }
@keyframes splash-run { from { transform: translateX(-100%); } to { transform: translateX(260%); } }
@media (prefers-reduced-motion: reduce) { .splash-bar::after { animation: none; width: 100%; opacity: 0.55; } .splash { transition: none; } }
html.is-loading, html.is-loading body { overflow: hidden; }
/* entrance animations wait behind the loading screen, then play once it lifts */
html.is-loading .hero-copy > *, html.is-loading .tile, html.is-loading .skel { animation-play-state: paused; }
.hero video { opacity: 0; transition: opacity 1s ease; }
.hero video.ready { opacity: 1; }

/* sections */
#services { scroll-margin-top: 70px; }
.sec { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 7vw, 84px) 16px 24px; }
.sec-head { display: flex; justify-content: space-between; align-items: end; gap: 16px; flex-wrap: wrap; margin-bottom: 22px; }
.sec-head.slim { align-items: center; }
.sec h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: clamp(1.5rem, 4vw, 2.4rem); letter-spacing: -0.035em; line-height: 1.1; }
.search input { width: min(320px, 82vw); padding: 11px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: var(--panel); color: var(--film); font: inherit; }
.search input::placeholder { color: #6f898f; }
.search input:focus-visible { outline-offset: 0; border-color: var(--amber); }

/* category wall */
.wall { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.tile { position: relative; aspect-ratio: 3 / 4; padding: 0; border: 0; border-radius: 14px; overflow: hidden; background: var(--panel-2); color: var(--film); text-align: left; cursor: pointer; isolation: isolate; }
.tile:first-child { grid-column: span 2; aspect-ratio: 4 / 3; }
.tile img, .tile video, .tile .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s cubic-bezier(.22, 1, .36, 1); }
.tile video { opacity: 0; z-index: -1; transition: opacity .3s ease, transform .6s cubic-bezier(.22, 1, .36, 1); }
.tile.live video { opacity: 1; }
.tile .ph { background: linear-gradient(160deg, #1c4753, #0a1d23); }
.tile:hover img, .tile:hover video { transform: scale(1.05); }
.tile::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(6, 21, 26, 0.92) 0%, rgba(6, 21, 26, 0.1) 60%); }
.tile-copy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; padding: 16px; display: grid; gap: 6px; }
.tile-name { font-family: var(--display); font-weight: 700; font-size: clamp(0.95rem, 2.4vw, 1.35rem); letter-spacing: -0.03em; line-height: 1.1; }
.tile:first-child .tile-name { font-size: clamp(1.3rem, 4vw, 2.2rem); }
.tile-meta { font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-hi); }
.tile-tag { font-size: 0.82rem; color: #cfcabd; display: none; }
.tile:first-child .tile-tag { display: block; max-width: 38ch; }
.tile::after { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--amber); z-index: 2; transition: width .4s cubic-bezier(.22, 1, .36, 1); }
.tile:hover::after, .tile:focus-visible::after { width: 100%; }

/* fewer than five categories: no mosaic, just even tiles with no empty cells */
.wall.few .tile:first-child { grid-column: auto; aspect-ratio: 3 / 4; }
.wall.few .tile:last-child:nth-child(odd) { grid-column: span 2; aspect-ratio: 4 / 3; }

/* category view */
.sec.cat { padding-top: calc(var(--hdr) + 26px); }
.back { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 26px; padding: 10px 16px; border: 1.5px solid var(--line); border-radius: 999px; background: rgba(240, 233, 220, 0.04); color: var(--film); font-weight: 600; font-size: 0.88rem; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, transform .15s ease; }
.back:hover { background: rgba(240, 233, 220, 0.1); border-color: rgba(240, 233, 220, 0.4); transform: translateX(-2px); }
.sub { margin: 0; color: var(--muted); font-size: 0.92rem; }
.scroller { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x proximity; padding-bottom: 8px; margin-right: -16px; padding-right: 16px; scrollbar-width: thin; }
.scroller .card { flex: 0 0 150px; scroll-snap-align: start; }
.view-in { animation: viewIn .5s cubic-bezier(.22, 1, .36, 1) both; }
@media (prefers-reduced-motion: reduce) { .view-in { animation: none; } }
@keyframes viewIn { from { opacity: 0; transform: translateY(10px); } }
.cat-head { display: flex; justify-content: space-between; align-items: end; gap: 20px; flex-wrap: wrap; padding-bottom: 26px; border-bottom: 1px solid var(--line); margin-bottom: 22px; }
.cat-head h2 { font-size: clamp(1.8rem, 6vw, 3.6rem); }
.tagline { margin: 10px 0 0; font-size: 1.1rem; color: var(--amber-hi); }
.pitch { margin: 10px 0 0; max-width: 56ch; color: #cfcabd; }
.pitch:empty, .tagline:empty { display: none; }
.count { margin: 0; font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); }

/* video cards */
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 156px), 1fr)); gap: 10px; }
.card { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: var(--panel-2); isolation: isolate; }
.card .open { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; color: #fff; text-align: left; cursor: pointer; }
.card img, .card video, .card .ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.card .ph { background: linear-gradient(160deg, #1c4753, #0a1d23); }
.card video { opacity: 0; transition: opacity .25s ease; background: #000; }
.card.live video { opacity: 1; }
.card .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 48px 12px 12px; display: grid; gap: 3px; background: linear-gradient(transparent, rgba(6, 21, 26, 0.92)); }
.card .cap b { font-size: 0.92rem; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.card .cap small { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.save { position: absolute; top: 8px; right: 8px; z-index: 3; width: 38px; height: 38px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(6, 21, 26, 0.78); color: var(--film); cursor: pointer; }
.save svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.save[aria-pressed="true"] { background: var(--amber); color: #1c0c02; }
.save[aria-pressed="true"] svg { fill: currentColor; }

/* states */
.state-box { max-width: 440px; margin: 20vh auto; padding: 28px; text-align: center; background: var(--panel); border-radius: 16px; }
.state-box h2 { font-size: 1.3rem; margin: 0 0 8px; }
.state-box p { margin: 0 0 16px; color: var(--muted); }
.state-inline { grid-column: 1 / -1; padding: 30px 0; color: var(--muted); }
.skel { aspect-ratio: 3 / 4; border-radius: 14px; background: linear-gradient(100deg, #0d2229 30%, #14323b 50%, #0d2229 70%); background-size: 300% 100%; }
@media (prefers-reduced-motion: no-preference) {
  .skel { animation: shimmer 1.4s linear infinite; }
  .hero-copy > * { animation: rise .8s cubic-bezier(.22, 1, .36, 1) both; }
  .hero-copy p { animation-delay: .12s; }
  .hero-cta { animation-delay: .24s; }
}
@keyframes shimmer { to { background-position: -100% 0; } }
@keyframes rise { from { opacity: 0; transform: translateY(16px); } }

.foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; max-width: 1280px; margin: 40px auto 0; padding: 26px 16px 90px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.85rem; }
.foot p { margin: 0; }
.foot a:not(.lockup) { color: var(--film); }
.fab { position: fixed; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border: 0; border-radius: 999px; background: var(--amber); color: #1c0c02; font-weight: 600; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, 0.6); cursor: pointer; }
.fab em { background: #1c0c02; color: var(--amber-hi); }

/* reel mode */
dialog { color: var(--film); }
dialog::backdrop { background: rgba(0, 0, 0, 0.8); }
#reel { width: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #000; overflow: hidden; }
.r-scroll { height: 100%; overflow-y: auto; scroll-snap-type: y mandatory; overscroll-behavior: contain; scrollbar-width: none; }
.r-scroll::-webkit-scrollbar { display: none; }
.r-item { height: 100dvh; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; }
.r-stage { position: relative; height: 100%; width: min(100%, calc(100dvh * 9 / 16)); background: #07090a; }
.r-stage video { width: 100%; height: 100%; object-fit: cover; display: block; cursor: pointer; }
/* One full-width fade behind both the text and the buttons, so it no longer ends in a hard edge beside them. */
.r-stage::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 52%; background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.6) 42%, rgba(0, 0, 0, 0) 100%); pointer-events: none; }
.r-info { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 70px 76px calc(22px + env(safe-area-inset-bottom)) 16px; pointer-events: none; }
.r-info a { pointer-events: auto; }
.r-cat { margin: 0 0 6px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--amber-hi); }
.r-info h2 { margin: 0; font-family: var(--display); font-weight: 700; font-size: 1.15rem; line-height: 1.2; letter-spacing: -0.02em; }
.r-info .brand { margin: 6px 0 0; color: #d7d2c7; font-size: 0.9rem; }
.r-info .orig { display: inline-block; margin-top: 8px; color: var(--film); font-size: 0.85rem; }
.r-actions { position: absolute; z-index: 2; right: 10px; bottom: calc(26px + env(safe-area-inset-bottom)); display: grid; gap: 12px; }
.r-act { width: 46px; height: 46px; display: grid; place-items: center; border: 0; border-radius: 50%; background: rgba(6, 21, 26, 0.8); color: var(--film); cursor: pointer; text-decoration: none; }
.r-act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.r-act[aria-pressed="true"] { background: var(--amber); color: #1c0c02; }
.r-act.save-r[aria-pressed="true"] svg { fill: currentColor; }
.x { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; }
.r-close { position: absolute; top: calc(12px + env(safe-area-inset-top)); left: 12px; z-index: 5; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: rgba(6, 21, 26, 0.8); color: var(--film); cursor: pointer; }
.r-count { position: absolute; top: calc(22px + env(safe-area-inset-top)); right: calc(26px + env(safe-area-inset-right)); z-index: 5; margin: 0; font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--film); text-shadow: 0 1px 6px #000; }
.r-err { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px; text-align: center; color: var(--muted); }

/* shortlist drawer */
#drawer { margin: 0 0 0 auto; width: min(420px, 100vw); height: 100dvh; max-height: none; padding: 0; border: 0; background: var(--panel); display: none; flex-direction: column; transform: translateX(100%); transition: transform .4s cubic-bezier(.22, 1, .36, 1); box-shadow: -24px 0 60px -20px rgba(0, 0, 0, 0.6); }
#drawer[open] { display: flex; }
#drawer.in { transform: none; }
#drawer::backdrop { background: rgba(0, 0, 0, 0.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .4s ease; }
#drawer.in::backdrop { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #drawer, #drawer::backdrop { transition: none; } }
.d-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 20px 18px 12px; }
.d-head h2 { margin: 0; font-family: var(--display); font-size: 1.15rem; letter-spacing: -0.03em; }
.d-sub { margin: 4px 0 0; color: var(--muted); font-size: 0.85rem; }
.d-sub:empty { display: none; }
.d-close { width: 40px; height: 40px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: var(--panel-2); color: var(--film); cursor: pointer; }
.d-body { flex: 1; overflow: auto; padding: 4px 18px 12px; display: grid; gap: 10px; align-content: start; }
.d-empty { margin: 24px 0; color: var(--muted); }
.d-row { display: grid; grid-template-columns: 1fr auto; gap: 4px; align-items: center; border-radius: 14px; background: var(--panel-2); transition: background-color .15s ease; }
.d-row:hover { background: #19404b; }
.d-play { display: grid; grid-template-columns: 54px 1fr auto; gap: 12px; align-items: center; min-width: 0; padding: 8px; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; border-radius: 14px; }
.d-play img, .d-play .ph { width: 54px; height: 72px; border-radius: 8px; object-fit: cover; background: #0a1d23; }
.d-txt { min-width: 0; }
.d-txt b { display: block; font-size: 0.92rem; line-height: 1.25; }
.d-txt small { color: var(--muted); }
.d-ico { font-style: normal; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--amber); color: #1c0c02; font-size: 0.7rem; padding-left: 2px; }
.d-rm { width: 36px; height: 36px; margin-right: 6px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); cursor: pointer; }
.d-rm .x { width: 16px; height: 16px; }
.d-rm:hover { color: var(--film); background: rgba(240, 233, 220, 0.08); }
.d-foot { display: grid; gap: 10px; padding: 14px 18px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); }
.d-foot .btn { justify-content: center; }
.d-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.d-foot .btn[aria-disabled="true"], .d-foot .btn:disabled { opacity: 0.4; pointer-events: none; }
dialog::backdrop { backdrop-filter: blur(3px); }
#reel::backdrop { backdrop-filter: none; } /* a phone-shaped screen is all video, so there is nothing to blur */
@media (min-aspect-ratio: 5/8) {
  #reel { background: rgba(4, 11, 14, 0.66); }
  #reel::backdrop { background: rgba(0, 0, 0, 0.3); backdrop-filter: blur(18px); }
}

/* footer */
/* audience and reach: the total over a wall of real video frames, the two audiences as panels, and four numbered strengths.
   The top two platforms of each audience and the first two strengths are the highlighted (amber) ones. */
.aud { position: relative; margin-top: clamp(24px, 5vw, 64px); }
.aud.away { display: none; }
/* 2026-11-12: the total stands on its own, centred in its band (equal space above and below); the section title moved down to head the channel cards */
.aud-top { position: relative; overflow: hidden; padding: clamp(80px, 11vw, 136px) 0; text-align: center; }
.aud-wall { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; opacity: 0.4; } /* faded back so the text on top reads clearly */
@media (min-width: 900px) { .aud-wall { grid-template-columns: repeat(8, 1fr); } }
.aud-wall img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(0.45) brightness(0.55) saturate(0.7); }
.aud-wall img:nth-child(n+5) { display: none; }
@media (min-width: 900px) { .aud-wall img:nth-child(n+5) { display: block; } }
.aud-top::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--night) 0%, rgba(6, 21, 26, 0.7) 26%, rgba(6, 21, 26, 0.58) 56%, var(--night) 97%); }
.aud-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .aud-in { padding: 0 32px; } }
.aud-label { margin: 0 0 18px; font-family: var(--mono); font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber-hi); }
.aud-big { margin: 10px 0; font-family: var(--display); font-weight: 700; font-size: clamp(2.9rem, 14vw, 9.6rem); letter-spacing: -0.065em; line-height: 0.95; text-shadow: 0 6px 50px rgba(0, 0, 0, 0.6); }
@media (max-width: 599px) { .aud-big { font-size: clamp(3.4rem, 17vw, 12rem); } } /* phones keep the bigger total (2026-11-12): the smaller size only from tablets up */
.aud-big i { font-style: normal; color: var(--amber); }
.aud-cap { margin: 0; font-family: var(--mono); font-size: clamp(0.72rem, 1.7vw, 0.95rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--film); }
.aud-head { margin: 0 auto clamp(40px, 5.5vw, 64px); text-align: center; } /* a clear gap before the channel cards */
.aud-head h2 { margin: 0 auto 12px; max-width: 22ch; font-family: var(--display); font-weight: 700; font-size: clamp(1.35rem, 3.3vw, 2.2rem); line-height: 1.1; letter-spacing: -0.045em; }
.aud-lede { max-width: 54ch; margin: 0 auto; color: var(--film); opacity: 0.8; }
.aud-body { position: relative; z-index: 1; max-width: 1280px; margin: clamp(8px, 2vw, 24px) auto 0; padding: 0 16px; }
@media (min-width: 900px) { .aud-body { padding: 0 32px; } }
.aud-groups { display: grid; gap: 18px; }
@media (min-width: 960px) { .aud-groups { grid-template-columns: 1fr 1fr; gap: 24px; } }
.aud-g { padding: clamp(20px, 3vw, 32px); border: 1px solid var(--line); border-radius: 20px; background: rgba(13, 34, 41, 0.86); }
.aud-ch { margin: 0 0 6px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--amber); }
.aud-g h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 700; font-size: clamp(1.3rem, 2.6vw, 1.9rem); letter-spacing: -0.04em; }
.aud-blurb { margin: 0 0 22px; color: var(--muted); }
.aud-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.aud-stat { display: flex; flex-direction: column; padding: 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 21, 26, 0.6); min-width: 0; }
.aud-lg { display: block; width: 26px; height: 26px; margin-bottom: 14px; color: var(--amber-hi); }
.aud-lg svg { width: 100%; height: 100%; display: block; }
.aud-num { display: block; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.2vw, 2.3rem); letter-spacing: -0.05em; line-height: 1; }
.aud-unit { display: block; margin-top: 6px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.aud-sec { margin-top: auto; padding-top: 12px; }
.aud-sec div { padding-top: 10px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }
.aud-sec b { display: block; margin-bottom: 2px; font-weight: 500; font-size: 0.92rem; letter-spacing: 0; color: var(--film); }
.aud-stat.hot { border-color: transparent; background: linear-gradient(160deg, #ff8a45, #ff7a2f 55%, #e8641a); color: #1c0c02; }
.aud-stat.hot .aud-lg, .aud-stat.hot .aud-sec b { color: #1c0c02; }
.aud-stat.hot .aud-unit, .aud-stat.hot .aud-sec div { color: rgba(28, 12, 2, 0.74); border-top-color: rgba(28, 12, 2, 0.24); }
.aud-str { display: grid; grid-template-columns: 1fr; gap: 12px; margin: clamp(36px, 5vw, 56px) 0 0; padding: 0; list-style: none; }
@media (min-width: 760px) { .aud-str { grid-template-columns: 1fr 1fr; gap: 14px; } }
.aud-s { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 22px; align-items: center; padding: 22px 26px 22px 20px; border: 1px solid var(--line); border-radius: 20px; background: rgba(13, 34, 41, 0.86); }
.aud-n { min-width: 1.05ch; text-align: center; font-family: var(--display); font-weight: 700; font-size: clamp(3.6rem, 7.4vw, 5.4rem); letter-spacing: -0.06em; line-height: 0.9; color: var(--amber); }
.aud-ico { width: 22px; height: 22px; margin-bottom: 10px; color: var(--amber-hi); }
.aud-ico svg { width: 100%; height: 100%; display: block; }
.aud-s b { display: block; margin-bottom: 6px; font-family: var(--display); font-weight: 700; font-size: 1rem; letter-spacing: -0.03em; line-height: 1.25; }
.aud-s .t { display: block; color: var(--muted); font-size: 0.95rem; line-height: 1.45; }
.aud-s.hot { border-color: transparent; background: linear-gradient(160deg, #ff8a45, #ff7a2f 55%, #e8641a); color: #1c0c02; }
.aud-s.hot .aud-n, .aud-s.hot .aud-ico { color: #1c0c02; }
.aud-s.hot .t { color: rgba(28, 12, 2, 0.78); }
.ft { margin-top: clamp(56px, 8vw, 110px); border-top: 1px solid var(--line); background: linear-gradient(180deg, #06151a, #040e12); }
.ft-inner { max-width: 1280px; margin: 0 auto; padding: clamp(40px, 6vw, 72px) 16px calc(28px + 56px); }
.ft-top { display: grid; gap: 36px; }
.ft-brand p { margin: 16px 0 20px; max-width: 42ch; color: #b9b3a6; font-size: 0.95rem; }
.ft-brand .lockup b { font-size: 1.3rem; }
.ft-cta { display: inline-flex; padding: 11px 20px; border-radius: 999px; background: var(--amber); color: #1c0c02; font-weight: 600; font-size: 0.9rem; text-decoration: none; transition: background-color .15s ease; }
.ft-cta:hover { background: var(--amber-hi); }
.ft-col h3 { margin: 0 0 14px; font-family: var(--mono); font-weight: 500; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--amber); }
.ft-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ft-col a { color: var(--film); text-decoration: none; font-size: 0.95rem; opacity: 0.86; }
.ft-col a:hover { opacity: 1; text-decoration: underline; text-underline-offset: 4px; }
/* Connect as a row of round icons with a one-word label under each (2026-11-12, option A) */
.ft-col ul.ft-icons { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 14px; }
.ft-icons a { display: grid; justify-items: center; gap: 7px; opacity: 1; text-decoration: none; }
.ft-icons a:hover { text-decoration: none; }
.ft-ic { width: 46px; height: 46px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line); background: rgba(13, 34, 41, 0.86); color: var(--film); transition: border-color .15s ease, color .15s ease; }
.ft-ic svg { width: 21px; height: 21px; }
.ft-icons a:hover .ft-ic, .ft-icons a:focus-visible .ft-ic { border-color: var(--amber); color: var(--amber-hi); }
.ft-icons small { font-family: var(--mono); font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.ft-bottom { display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); font-size: 0.82rem; }
.ft-bottom p { margin: 0; }
.ft-bottom a { color: var(--muted); }
.ft-bottom a:hover { color: var(--film); }
.ft-note { color: var(--amber-hi); }
@media (min-width: 760px) { .ft-top { grid-template-columns: 1.6fr 1fr 1fr; gap: 56px; } }
@media (min-width: 900px) { .ft-inner { padding-left: 32px; padding-right: 32px; } }

@media (min-width: 900px) {
  :root { --bar: 44px; --hdr: 80px; }
  .top { padding: 16px max(32px, calc((100% - 1280px) / 2 + 32px)); }
  .top .lockup b { font-size: 1.5rem; }
  .top .lockup span { margin-top: 6px; font-size: 0.66rem; }
  .bar { padding-left: max(32px, calc((100% - 1280px) / 2 + 32px)); padding-right: max(32px, calc((100% - 1280px) / 2 + 32px)); }
  .hero-copy { margin-left: max(0px, calc((100% - 1280px) / 2)); padding-left: 32px; padding-right: 32px; }
  .hero-copy { padding-bottom: 56px; }
  .sec { padding-left: 32px; padding-right: 32px; }
  .wall { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .tile { aspect-ratio: 3 / 4; }
  .tile:first-child { grid-column: span 2; grid-row: span 2; aspect-ratio: auto; }
  .tile[data-span="2"] { grid-column: span 2; aspect-ratio: 8 / 3; }
  .tile[data-span="4"] { grid-column: span 4; aspect-ratio: 16 / 3; }
  .wall.few { grid-template-columns: repeat(var(--n), 1fr); }
  .wall.few .tile:last-child:nth-child(odd) { grid-column: auto; aspect-ratio: 3 / 4; }
  .tile-tag { display: block; }
  .cards { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; }
  .foot { padding-left: 32px; padding-right: 32px; }
}
@media (max-width: 600px) {
  .btn { padding: 10px 14px; font-size: 0.84rem; }
  #listBtn { display: none; } /* the floating Shortlist button takes over once something is saved */
  .hero > .bar:last-child { padding-right: 172px; } /* keep the timecode clear of the floating button */
  .bar { gap: 12px; }
  .bar span:last-child { display: none; }
  #heroLabel { min-width: 0; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* scroll-on animations (see shared/reveal.js), Cinematic style: slow, filmic. Headings wipe in like a title card, tiles and
   cards rise through a curtain, the big number settles in. Opacity, transform and clip-path only; handed back when finished. */
@media (prefers-reduced-motion: no-preference) {
  .rv:not(.rv-in) { opacity: 0; } /* hidden only until its entrance starts: the animation must end on the normal style */
  .rv-in { animation: cn-rise .9s cubic-bezier(.22, 1, .36, 1) var(--rv-d, 0ms) both; }
  .rv[data-rv="wipe"].rv-in { animation-name: cn-wipe; animation-duration: .95s; }
  .rv[data-rv="curtain"].rv-in { animation-name: cn-curtain; animation-duration: .95s; }
  .rv[data-rv="zoom"].rv-in { animation-name: cn-zoom; animation-duration: 1.1s; }
}
@keyframes cn-rise { from { opacity: 0; transform: translateY(30px); } to { transform: none; } }
@keyframes cn-wipe { from { opacity: 0; clip-path: inset(-40px 100% -40px -40px); transform: translateX(-16px); } to { clip-path: inset(-40px); transform: none; } }
@keyframes cn-curtain { from { opacity: 0; transform: translateY(34px) scale(.97); } to { transform: none; } } /* opacity and transform only: they run on the GPU; a clip-path animation repainted every card (with its playing video) on every frame */
@keyframes cn-zoom { from { opacity: 0; transform: scale(0.92) translateY(12px); } to { transform: none; } }


/* ---------- cross-collaboration: both accounts feed ONE reel ----------
   Phones: both accounts on top, amber lines run down into the reel. Desktop: the accounts stand either side of the reel and the lines run sideways into it.
   Every few seconds a pulse runs along the lines; when it arrives the reel glows and a shine wipes across it. Motion only runs while the stage is on screen (.live). */

.col { position: relative; margin-top: clamp(56px, 8vw, 110px); scroll-margin-top: var(--hdr); }
.col-in { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 16px; }
@media (min-width: 900px) { .col-in { padding: 0 32px; } }
.col-label { margin: 0 0 18px; font-family: var(--mono); font-size: .72rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber-hi); }
.col h2 { margin: 0 0 14px; font-family: var(--display); font-weight: 700; font-size: min(clamp(1.7rem, 5vw, 3.2rem), calc((100vw - 32px) / 11.7)); line-height: 1.08; letter-spacing: -.045em; text-wrap: balance; }
.col-lede { max-width: 58ch; margin: 0; color: var(--film); opacity: .8; }
.col-head { margin-bottom: clamp(30px, 5vw, 56px); }

.cw-stage { position: relative; display: grid; grid-template-columns: 1fr 1fr; align-items: start; }
.cw-acct { display: grid; justify-items: center; gap: 4px; min-width: 0; text-align: center; }
.cw-ring { display: block; margin-bottom: 12px; padding: 4px; border-radius: 50%; border: 2px solid var(--amber); box-shadow: 0 0 0 7px rgba(255, 122, 47, .12), 0 0 30px rgba(255, 122, 47, .28); }
.cw-pfp { display: block; width: 76px; height: 76px; border-radius: 50%; object-fit: cover; background: #000; }
.cw-acct b { font-family: var(--display); font-weight: 700; font-size: clamp(.95rem, 3.6vw, 1.25rem); letter-spacing: -.04em; overflow-wrap: anywhere; }
.cw-handle, .cw-role { font-family: var(--mono); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; }
.cw-handle { color: var(--muted); } .cw-role { color: var(--amber); }

.cw-wires, .cw-wire { overflow: visible; }
.cw-wires { grid-column: 1 / -1; display: block; width: 100%; max-width: 560px; height: auto; justify-self: center; margin: 16px 0; } /* straight lines that stop short of the account blocks and of the reel: an even gap at both ends */
.cw-wire { display: none; }
.cw-flow, .cw-pulse { fill: none; stroke-linecap: round; }
.cw-flow { stroke: var(--amber); stroke-width: 1.8; stroke-dasharray: 5 8; opacity: .7; }
.cw-pulse { stroke: var(--amber-hi); stroke-width: 4.2; stroke-dasharray: 20 400; stroke-dashoffset: 20; opacity: 0; filter: drop-shadow(0 0 4px rgba(255, 122, 47, .95)); } /* a short bright streak; wire lengths in drawing units: 100 (phone pair) and 200 (desktop), both straight */

.cw-phone { position: relative; grid-column: 1 / -1; justify-self: center; width: min(236px, 66vw); border-radius: 22px; }
.cw-phone::before { content: ""; position: absolute; inset: 0; z-index: 4; border-radius: 22px; pointer-events: none; box-shadow: 0 0 0 0 rgba(255, 122, 47, 0), 0 0 0 0 rgba(255, 122, 47, 0); }
.cw-shine { position: absolute; inset: 0; z-index: 5; overflow: hidden; border-radius: 22px; pointer-events: none; }
.cw-shine::before { content: ""; position: absolute; top: -25%; bottom: -25%; left: 0; width: 42%; opacity: 0; transform: translateX(-130%) skewX(-18deg); background: linear-gradient(100deg, transparent, rgba(255, 233, 210, .22), transparent); }
.col-frame { position: relative; aspect-ratio: 9 / 16; overflow: hidden; border-radius: 22px; background: #000; box-shadow: 0 0 0 2px var(--amber), 0 0 0 9px rgba(255, 122, 47, .16), 0 40px 70px -24px rgba(0, 0, 0, .85); }
.col-frame > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.col-frame::after { content: ""; position: absolute; inset: 55% 0 0; background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.col-rec { position: absolute; left: 12px; top: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border-radius: 999px; background: rgba(6, 21, 26, .78); font-family: var(--mono); font-size: .64rem; letter-spacing: .16em; text-transform: uppercase; }
.col-rec i { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); }
.col-by { position: absolute; z-index: 2; left: 12px; right: 12px; bottom: 12px; display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: .7rem; }
.col-by b { font-weight: 600; } .col-by em { color: var(--amber-hi); font-style: normal; }
.col-bypf { display: flex; margin-right: 4px; } .col-bypf img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; border: 2px solid #06151a; background: #000; } .col-bypf img + img { margin-left: -10px; }
.col-cap { margin: 18px 0 0; text-align: center; font-family: var(--mono); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }

.col-perks { display: grid; margin: clamp(34px, 5vw, 54px) 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.col-perks li { display: flex; gap: 18px; align-items: baseline; padding: 16px 0; border-bottom: 1px solid var(--line); color: var(--muted); line-height: 1.45; }
.col-no { flex: none; font-family: var(--mono); font-size: .78rem; letter-spacing: .1em; color: var(--amber); }
.col-perks b { display: block; margin-bottom: 2px; color: var(--film); font-family: var(--display); font-weight: 600; letter-spacing: -.03em; font-size: 1.04rem; }

@media (min-width: 900px) {
  .cw-stage { grid-template-columns: minmax(0, 1fr) minmax(90px, 190px) auto minmax(90px, 190px) minmax(0, 1fr); align-items: center; }
  .cw-wires { display: none; }
  .cw-wire { display: block; position: relative; top: -3.4rem; width: 100%; height: auto; } /* up to the middle of the profile picture, not of the whole account block */
  .cw-acct.i0 { grid-column: 1; grid-row: 1; } .cw-hl { grid-column: 2; grid-row: 1; } .cw-phone { grid-column: 3; grid-row: 1; width: 300px; margin: 0; }
  .cw-hr { grid-column: 4; grid-row: 1; } .cw-acct.i1 { grid-column: 5; grid-row: 1; }
  .cw-acct { gap: 2px; }
  .cw-pfp { width: 104px; height: 104px; } .cw-ring { padding: 4px; margin-bottom: 8px; box-shadow: 0 0 0 8px rgba(255, 122, 47, .12), 0 0 36px rgba(255, 122, 47, .3); }
  .cw-acct b { font-size: 1.4rem; } .cw-handle, .cw-role { font-size: .7rem; }
  .cw-wire .cw-flow { stroke-width: 2.4; stroke-dasharray: 6 10; } .cw-wire .cw-pulse { stroke-width: 5.6; stroke-dasharray: 36 400; stroke-dashoffset: 36; }
  .col-by { font-size: .8rem; } .col-bypf img { width: 32px; height: 32px; }
  .col-perks { grid-template-columns: repeat(3, 1fr); gap: 0 28px; border-top: 0; }
  .col-perks li { border-top: 1px solid var(--line); border-bottom: 0; flex-direction: column; gap: 8px; }
}

/* the cycle: 4.4 s. The pulse leaves both accounts together, reaches the reel at about 36%, then the reel glows and the shine wipes across it. */
@media (prefers-reduced-motion: no-preference) {
  .live .cw-flow { animation: cw-flow .9s linear infinite; }
  .live .cw-pulse { animation: cw-pulse 4.4s linear infinite; }
  .live .cw-wire .cw-flow { animation-name: cw-flow-h; }
  .live .cw-wire .cw-pulse { animation-name: cw-pulse-h; }
  .live .cw-phone::before { animation: cw-glow 4.4s ease-out infinite; }
  .live .cw-shine::before { animation: cw-sweep 4.4s cubic-bezier(.45, 0, .25, 1) infinite; }
}
@keyframes cw-flow { to { stroke-dashoffset: -13; } }
@keyframes cw-flow-h { to { stroke-dashoffset: -16; } }
@keyframes cw-pulse { 0% { stroke-dashoffset: 20; opacity: 0; } 4% { opacity: 1; } 35% { stroke-dashoffset: -80; opacity: 1; } 41% { stroke-dashoffset: -100; opacity: 0; } 100% { stroke-dashoffset: -100; opacity: 0; } }
@keyframes cw-pulse-h { 0% { stroke-dashoffset: 36; opacity: 0; } 4% { opacity: 1; } 35% { stroke-dashoffset: -164; opacity: 1; } 41% { stroke-dashoffset: -200; opacity: 0; } 100% { stroke-dashoffset: -200; opacity: 0; } }
@keyframes cw-glow { 0%, 33% { box-shadow: 0 0 0 0 rgba(255, 122, 47, 0), 0 0 0 0 rgba(255, 122, 47, 0); } 40% { box-shadow: 0 0 0 4px rgba(255, 148, 85, .75), 0 0 56px 10px rgba(255, 122, 47, .55); } 70%, 100% { box-shadow: 0 0 0 0 rgba(255, 122, 47, 0), 0 0 0 0 rgba(255, 122, 47, 0); } }
@keyframes cw-sweep { 0%, 34% { opacity: 0; transform: translateX(-130%) skewX(-18deg); } 37% { opacity: 1; } 56% { opacity: 1; transform: translateX(330%) skewX(-18deg); } 60%, 100% { opacity: 0; transform: translateX(330%) skewX(-18deg); } }
.col.away { display: none; }

/* ---------- phone menu (A: letterbox shutters close like a film cut, the index is wiped in line by line) ---------- */

.burger { display: none; position: relative; flex: none; width: 44px; height: 44px; padding: 0; border: 0; cursor: pointer; }
.burger i { position: absolute; left: 13px; right: 13px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .45s cubic-bezier(.77, 0, .18, 1), top .45s cubic-bezier(.77, 0, .18, 1); }
.burger i:nth-child(1) { top: 17px; } .burger i:nth-child(2) { top: 25px; }
.burger[aria-expanded="true"] i:nth-child(1) { top: 21px; transform: rotate(45deg); }
.burger[aria-expanded="true"] i:nth-child(2) { top: 21px; transform: rotate(-45deg); }
.top-r { display: flex; align-items: center; gap: 8px; }
@media (max-width: 759px) { .burger { display: block; } }
@media (min-width: 760px) { #menu, #scrim { display: none !important; } }
html.menu-open { overflow: hidden; } /* html only: with body too, a sticky header would scroll away from under the open menu */


.top { z-index: 30; }
.burger { border-radius: 50%; background: transparent; color: var(--film); box-shadow: inset 0 0 0 1.5px var(--line); transition: background-color .4s ease, color .4s ease, box-shadow .4s ease; }
.burger[aria-expanded="true"] { background: var(--amber); color: #1c0c02; box-shadow: none; }
@media (max-width: 759px) { .top .btn:not(.line) { padding: 10px 15px; font-size: .84rem; } .top { padding-right: 10px; } }
.menu ol { list-style: none; margin: 0; padding: 0; }
.menu a { color: inherit; text-decoration: none; }
.m-cap { margin: 0 0 18px; font-family: var(--mono); font-size: .68rem; letter-spacing: .28em; text-transform: uppercase; color: var(--amber-hi); }
.no { font-family: var(--mono); font-size: .7rem; letter-spacing: .18em; color: var(--amber); }
.tt { font-family: var(--display); font-weight: 700; letter-spacing: -.045em; line-height: 1.1; }
.m-foot { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.m-foot .tc { font-family: var(--mono); font-size: .72rem; letter-spacing: .14em; color: var(--muted); font-variant-numeric: tabular-nums; }
.scrim { position: fixed; inset: 0; z-index: 24; background: rgba(0,0,0,.6); opacity: 0; visibility: hidden; transition: opacity .5s ease, visibility 0s .5s; }
html.menu-open .scrim { opacity: 1; visibility: visible; transition-delay: 0s; }

.menu.a { position: fixed; inset: 0; z-index: 25; visibility: hidden; transition: visibility 0s 1.2s; }
.menu.a.is-open { visibility: visible; transition-delay: 0s; }
.sh { position: absolute; left: 0; right: 0; height: 50.4%; background: #030b0e; transition: transform .65s cubic-bezier(.77, 0, .18, 1) .35s; }
.sh-t { top: 0; transform: translateY(-101%); } .sh-b { bottom: 0; transform: translateY(101%); }
.menu.a.is-open .sh { transform: none; transition-delay: 0s; }
.menu.a::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 2px; margin-top: -1px; background: var(--amber); box-shadow: 0 0 18px var(--amber); transform: scaleX(0); opacity: 0; pointer-events: none; }
.menu.a.is-open::after { animation: seam 1s ease .4s both; }
@keyframes seam { 0% { transform: scaleX(0); opacity: 1; } 45% { transform: scaleX(1); opacity: 1; } 100% { transform: scaleX(1); opacity: 0; } }
.m-in { position: absolute; inset: 0; display: grid; align-content: center; padding: calc(66px + 16px) 22px 30px; opacity: 0; transition: opacity .25s ease; }
.menu.a.is-open .m-in { opacity: 1; transition-delay: .5s; }
.m-in li a { display: grid; gap: 4px; padding: 15px 0; border-top: 1px solid var(--line); }
.m-in li:last-child a { border-bottom: 1px solid var(--line); margin-bottom: 26px; }
.m-in .tt { font-size: 1.9rem; clip-path: inset(0 100% 0 0); transition: clip-path .3s ease; }
.menu.a.is-open .tt { clip-path: inset(0 -4% 0 0); transition: clip-path .75s cubic-bezier(.65, 0, .25, 1) calc(.7s + var(--n) * .11s); }
.m-in .no, .m-cap { opacity: 0; transition: opacity .2s ease; } .menu.a.is-open .no, .menu.a.is-open .m-cap { opacity: 1; transition: opacity .5s ease calc(.75s + var(--n, 0) * .11s); }
.m-foot { opacity: 0; transition: opacity .2s ease; } .menu.a.is-open .m-foot { opacity: 1; transition: opacity .6s ease 1.25s; }

/* ---------- premium pass (grade, hairlines, glow buttons, viewfinder corners, grain, numbered tiles, card play ring, footer glow) ---------- */
/* Cinematic, premium pass (concept). Laid over the real v2/style.css; nothing here touches the audience section.
   If chosen, these rules move into v2/style.css. Everything is static (no new always-running animation, no backdrop blur). */

/* the grade: the night background gets a faint warm glow top right and a cool one bottom left, like a lit set */
body { background: radial-gradient(60% 40% at 100% 0%, rgba(255, 122, 47, 0.07), transparent 70%), radial-gradient(70% 50% at 0% 100%, rgba(33, 120, 140, 0.1), transparent 70%), var(--night); background-attachment: scroll; }

/* header: a hairline that fades in from the edges, and an amber lens-glow button */
.top { background: rgba(6, 21, 26, 0.9); border-bottom: 0; }
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 148, 85, 0.55) 18%, rgba(240, 233, 220, 0.16) 50%, rgba(255, 148, 85, 0.55) 82%, transparent); }
.btn:not(.line) { background: linear-gradient(180deg, #ff9455 0%, #ff7a2f 55%, #f06a1c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 8px 24px -8px rgba(255, 122, 47, 0.65); }
.btn:not(.line):hover { background: linear-gradient(180deg, #ffa56d 0%, #ff8540 55%, #f5741f 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), 0 12px 30px -8px rgba(255, 122, 47, 0.8); }
.btn.line { box-shadow: inset 0 0 0 1px rgba(240, 233, 220, 0.28); }
.btn.line:hover { box-shadow: inset 0 0 0 1px var(--amber-hi); background: rgba(255, 122, 47, 0.1); }
/* the Shortlist buttons get the same raised look as "Work with me" (a lit top edge, a gradient body and a soft drop shadow) so they are not flat:
   the header one in dark glass, the floating one in the same amber gradient */
#listBtn { background: linear-gradient(180deg, rgba(240, 233, 220, 0.2) 0%, rgba(240, 233, 220, 0.08) 55%, rgba(240, 233, 220, 0.03) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.32), inset 0 0 0 1px rgba(240, 233, 220, 0.2), 0 8px 22px -10px rgba(0, 0, 0, 0.75); }
#listBtn:hover { background: linear-gradient(180deg, rgba(255, 148, 85, 0.28) 0%, rgba(255, 122, 47, 0.12) 55%, rgba(255, 122, 47, 0.06) 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 0 0 1px var(--amber-hi), 0 10px 26px -10px rgba(255, 122, 47, 0.5); }
.fab { background: linear-gradient(180deg, #ff9455 0%, #ff7a2f 55%, #f06a1c 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35), 0 12px 30px -8px rgba(255, 122, 47, 0.65); }
.fab:hover { background: linear-gradient(180deg, #ffa56d 0%, #ff8540 55%, #f5741f 100%); }

/* hero: camera viewfinder corners, film grain, a warmer vignette, and an amber rule under the headline */
.hero::before { content: ""; position: absolute; z-index: 0; inset: calc(var(--hdr) + 12px) 14px calc(var(--bar) + 12px) 14px; pointer-events: none; opacity: 0.8;
  background: linear-gradient(var(--amber-hi), var(--amber-hi)) 0 0 / 24px 2px, linear-gradient(var(--amber-hi), var(--amber-hi)) 0 0 / 2px 24px,
    linear-gradient(var(--amber-hi), var(--amber-hi)) 100% 0 / 24px 2px, linear-gradient(var(--amber-hi), var(--amber-hi)) 100% 0 / 2px 24px,
    linear-gradient(var(--amber-hi), var(--amber-hi)) 0 100% / 24px 2px, linear-gradient(var(--amber-hi), var(--amber-hi)) 0 100% / 2px 24px,
    linear-gradient(var(--amber-hi), var(--amber-hi)) 100% 100% / 24px 2px, linear-gradient(var(--amber-hi), var(--amber-hi)) 100% 100% / 2px 24px;
  background-repeat: no-repeat; }
.hero::after { content: ""; position: absolute; z-index: 0; inset: 0; pointer-events: none; opacity: 0.09; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
.hero-shade { background: radial-gradient(120% 90% at 50% 40%, transparent 40%, rgba(3, 12, 15, 0.55) 100%), linear-gradient(90deg, rgba(6, 21, 26, 0.9) 0%, rgba(6, 21, 26, 0.5) 55%, rgba(6, 21, 26, 0.12) 100%), linear-gradient(0deg, rgba(6, 21, 26, 0.94) 0%, rgba(6, 21, 26, 0.55) 38%, transparent 70%); }
.hero-copy { z-index: 1; }
/* the push-in as the page moves on, run by the browser itself (a scroll-linked animation over the height of the hero, --hero-h set in app.js): the video
   scales up a little and the headline drifts up and fades. No script runs while scrolling. Browsers without it simply scroll the hero normally. */
@keyframes hero-push { to { transform: scale(1.14); } }
@keyframes hero-drift { 0% { translate: 0 0; opacity: 1; } 80% { opacity: 0; } 100% { translate: 0 -70px; opacity: 0; } }
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero video { will-change: transform; animation: hero-push linear both; animation-timeline: scroll(root block); animation-range: 0 var(--hero-h, 700px); }
    .hero-copy { animation: hero-drift linear both; animation-timeline: scroll(root block); animation-range: 0 var(--hero-h, 700px); }
  }
}
/* the film grain is blended over the playing video (mix-blend-mode forces an extra full-screen pass on every video frame): phones skip it, it is barely visible there */
@media (pointer: coarse) { .hero::after { display: none; } }
.hero h1::after { content: ""; display: block; width: 64px; height: 3px; margin-top: 22px; border-radius: 2px; background: linear-gradient(90deg, var(--amber), var(--amber-hi)); box-shadow: 0 0 18px rgba(255, 122, 47, 0.7); }
.bar { background: linear-gradient(180deg, #000, #02090c); border-top: 1px solid rgba(240, 233, 220, 0.08); }
.hero > .bar:first-child { border-top: 0; }

/* section headings: a mono index in front, and a hairline that runs out to the edge */
.sec-head { position: relative; }
#featTitle::before, #servTitle::before { display: block; margin-bottom: 12px; font-family: var(--mono); font-weight: 500; font-size: 0.68rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--amber-hi); }
#featTitle::before { content: "01 / Reel"; } #servTitle::before { content: "02 / Index"; }
#featured .sec-head, #services .sec-head { padding-bottom: 18px; border-bottom: 1px solid var(--line); margin-bottom: 26px; }
#featured .sec-head::after, #services .sec-head::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 72px; height: 1px; background: var(--amber); box-shadow: 0 0 12px var(--amber); }

/* the services wall: numbered tiles with a thin light edge, a deeper fade, and an amber edge that lights on hover.
   The number sits big in the top-left corner on its own soft dark fade; the "N videos" tag is left as it was. */
.tile-no { position: absolute; top: 0; left: 0; z-index: 1; box-sizing: border-box; width: 3.9em; height: 2.6em; padding: .3em 0 0 .4em; font-family: var(--display); font-weight: 700; font-size: clamp(1.6rem, 3.6vw, 2.4rem); line-height: 1; letter-spacing: -0.045em; color: var(--amber); pointer-events: none;
  /* the number sits close to the corner (a two-digit number is about 2 em wide) and the fade is a quarter ellipse, 3.9 em across and 2.6 em down: solid well past the number, then a short soft edge */
  isolation: isolate; }
/* the fade is an ellipse centred on the corner and tilted along the corner's diagonal (round 16): it reaches as far as before
   towards the middle of the tile, but less far along the top edge and down the left edge, and it is a touch lighter */
.tile-no::before { content: ""; position: absolute; z-index: -1; left: -3.3em; top: -1.9em; width: 6.6em; height: 3.8em; transform: rotate(22deg); /* round 17: flatter, so the margin under the number matches the margin beside it */
  background: radial-gradient(closest-side, rgba(4, 14, 18, 0.8) 0%, rgba(4, 14, 18, 0.76) 80%, rgba(4, 14, 18, 0.36) 92%, transparent 100%); }
.tile:first-child .tile-no { font-size: clamp(2.1rem, 5vw, 3.2rem); }
.tile { border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(240, 233, 220, 0.14), 0 20px 40px -26px rgba(0, 0, 0, 0.8); transition: transform .5s cubic-bezier(.22, 1, .36, 1), box-shadow .4s ease; }
.tile:hover { transform: translateY(-3px); box-shadow: inset 0 0 0 1px rgba(255, 148, 85, 0.75), 0 26px 50px -24px rgba(255, 122, 47, 0.45); }
.tile::before { background: linear-gradient(0deg, rgba(4, 14, 18, 0.95) 0%, rgba(4, 14, 18, 0.55) 34%, rgba(4, 14, 18, 0.05) 68%); }
.tile::after { height: 2px; box-shadow: 0 0 14px var(--amber); }

/* video cards: a hairline edge, a deeper caption fade, and a ring-and-triangle play mark that fades in on hover */
.card { border-radius: 18px; box-shadow: inset 0 0 0 1px rgba(240, 233, 220, 0.12), 0 16px 32px -20px rgba(0, 0, 0, 0.8); }
.card::after { content: ""; position: absolute; z-index: 1; left: 50%; top: 42%; width: 54px; height: 54px; margin: -27px 0 0 -27px; border-radius: 50%; pointer-events: none; opacity: 0; transform: scale(0.8); transition: opacity .3s ease, transform .4s cubic-bezier(.22, 1, .36, 1);
  background: rgba(6, 21, 26, 0.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23f0e9dc' d='M9.5 6.5v11l8.5-5.5z'/%3E%3C/svg%3E") 55% center / 24px no-repeat; box-shadow: 0 0 0 1.5px rgba(240, 233, 220, 0.7); }
.card:hover::after { opacity: 1; transform: none; }
.card.live::after { opacity: 0; }
.card .cap { padding: 64px 13px 13px; background: linear-gradient(transparent, rgba(4, 14, 18, 0.6) 40%, rgba(4, 14, 18, 0.95)); }
.card .cap b { font-weight: 600; letter-spacing: -0.005em; }
.card .cap small { color: var(--amber-hi); opacity: 0.9; }

/* category view */
.cat-head h2 { text-shadow: 0 6px 40px rgba(0, 0, 0, 0.5); }
.tagline { font-family: var(--mono); font-size: 0.78rem; letter-spacing: 0.2em; text-transform: uppercase; }
.back { border-color: rgba(240, 233, 220, 0.28); }

/* footer: the same hairline as the header, and a soft amber light rising from the bottom */
.ft { position: relative; border-top: 0; background: radial-gradient(60% 80% at 50% 120%, rgba(255, 122, 47, 0.16), transparent 70%), linear-gradient(180deg, #06151a, #040e12); }
.ft::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 148, 85, 0.55) 30%, rgba(240, 233, 220, 0.16) 50%, rgba(255, 148, 85, 0.55) 70%, transparent); }
.ft-brand .lockup b { font-size: 1.6rem; }
.ft-col h3 { display: flex; align-items: center; gap: 10px; }
.ft-col h3::before { content: ""; width: 16px; height: 1px; background: var(--amber); }

@media (max-width: 600px) {
  .hero::before { inset: calc(var(--hdr) + 8px) 10px calc(var(--bar) + 8px) 10px; }
  .hero::before { background-size: 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px; }
}


.col-head .nw, .col h2 .nw { white-space: nowrap; } /* "Two" and "collaborations." stay together */

/* small phones (narrow or short screens): the menu is a size down so it looks in proportion, not huge */
@media (max-width: 400px), (max-height: 700px) {
  .m-in { padding: calc(66px + 8px) 18px 20px; }
  .m-in .tt { font-size: 1.45rem; }
  .m-in li a { padding: 10px 0; gap: 2px; }
  .m-in li:last-child a { margin-bottom: 16px; }
}

/* very small phones: header parts a size down so the burger is never pushed off the screen */
@media (max-width: 360px) {
  .top { gap: 8px; }
  .top .lockup b { font-size: 1.12rem; } .top .lockup span { font-size: .58rem; letter-spacing: .26em; margin-top: 3px; }
  .top .btn:not(.line) { padding: 8px 11px; font-size: .76rem; }
  .burger { width: 38px; height: 38px; }
}

@media (max-width: 340px) { .top .lockup b { font-size: .98rem; } .top .btn:not(.line) { padding: 8px 9px; font-size: .72rem; } .top { gap: 6px; }
}

/* ---------- round 16 ---------- */

/* smaller phones only (up to 380 px wide, e.g. 360 and 375): the hero text sits tighter so more of the video shows above it */
@media (max-width: 380px) {
  .hero h1 { line-height: 1.04; }
  .hero h1::after { margin-top: 13px; }
  .hero p { margin: 11px 0 18px; font-size: 0.94rem; line-height: 1.45; }
}

/* phones and tablets: a tile left alone on the last row is big, like the first one (full width, 4:3, the larger number and title;
   2026-11-12), so the wall opens and closes with a big card. Desktop keeps its even 3 x 2 grid. */
@media (max-width: 899px) {
  .wall:not(.few) .tile:last-child:nth-child(even) { grid-column: 1 / -1; aspect-ratio: 4 / 3; }
  .wall:not(.few) .tile:last-child:nth-child(even) img, .wall:not(.few) .tile:last-child:nth-child(even) video { object-position: 50% 22%; } /* the wide crop keeps the face (the PSA cover), not the chest */
  .wall:not(.few) .tile:last-child:nth-child(even) .tile-name { font-size: clamp(1.3rem, 4vw, 2.2rem); }
  .wall:not(.few) .tile:last-child:nth-child(even) .tile-no { font-size: clamp(2.1rem, 5vw, 3.2rem); }
}

/* audience wall: the frames arrive one after another, alternately rising and dropping a short way into place */
@media (prefers-reduced-motion: no-preference) {
  .aud-wall.wait img { opacity: 0; }
  .aud-wall.go img { animation: aud-up 1.1s cubic-bezier(.22, 1, .36, 1) both; animation-delay: calc(var(--i) * 110ms); }
  .aud-wall.go img:nth-child(even) { animation-name: aud-down; }
}
@keyframes aud-up { from { opacity: 0; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes aud-down { from { opacity: 0; translate: 0 -22px; } to { opacity: 1; translate: 0 0; } }

/* the amber highlight takes turns: the top two platforms of each audience and the first two strengths, then the other two.
   --hl runs 0 to 1 and every colour is a mix controlled by it, so the swap is one smooth fade (as in Editorial). */
@property --hl { syntax: '<number>'; inherits: true; initial-value: 0; }
.aud-stat, .aud-s { --hl: 0; border-color: color-mix(in srgb, transparent calc(var(--hl) * 100%), var(--line));
  background: linear-gradient(160deg, color-mix(in srgb, #ff8a45 calc(var(--hl) * 100%), rgba(6, 21, 26, 0.6)), color-mix(in srgb, #ff7a2f calc(var(--hl) * 100%), rgba(6, 21, 26, 0.6)) 55%, color-mix(in srgb, #e8641a calc(var(--hl) * 100%), rgba(6, 21, 26, 0.6)));
  color: color-mix(in srgb, #1c0c02 calc(var(--hl) * 100%), var(--film)); }
.aud-s { background: linear-gradient(160deg, color-mix(in srgb, #ff8a45 calc(var(--hl) * 100%), rgba(13, 34, 41, 0.86)), color-mix(in srgb, #ff7a2f calc(var(--hl) * 100%), rgba(13, 34, 41, 0.86)) 55%, color-mix(in srgb, #e8641a calc(var(--hl) * 100%), rgba(13, 34, 41, 0.86))); }
.aud-stat .aud-lg, .aud-stat .aud-sec b { color: color-mix(in srgb, #1c0c02 calc(var(--hl) * 100%), var(--amber-hi)); }
.aud-stat .aud-sec b { color: color-mix(in srgb, #1c0c02 calc(var(--hl) * 100%), var(--film)); }
.aud-stat .aud-unit, .aud-stat .aud-sec div { color: color-mix(in srgb, rgba(28, 12, 2, 0.74) calc(var(--hl) * 100%), var(--muted)); border-top-color: color-mix(in srgb, rgba(28, 12, 2, 0.24) calc(var(--hl) * 100%), var(--line)); }
.aud-s .aud-n { color: color-mix(in srgb, #1c0c02 calc(var(--hl) * 100%), var(--amber)); }
.aud-s .aud-ico { color: color-mix(in srgb, #1c0c02 calc(var(--hl) * 100%), var(--amber-hi)); }
.aud-s .t { color: color-mix(in srgb, rgba(28, 12, 2, 0.78) calc(var(--hl) * 100%), var(--muted)); }
.aud-stat.a, .aud-s.a { --hl: 1; }
@media (prefers-reduced-motion: no-preference) {
  /* the strengths start swapping only once their own entrance has finished (.rv is removed then): two animations on one element clash */
  .aud-body.live .aud-stat.a, .aud-body.live .aud-s.a { animation: aud-swap-a 8s ease-in-out infinite; }
  .aud-body.live .aud-stat.b, .aud-body.live .aud-s.b { animation: aud-swap-b 8s ease-in-out infinite; }
}
@keyframes aud-swap-a { 0%, 42% { --hl: 1; } 50%, 92% { --hl: 0; } 100% { --hl: 1; } }
@keyframes aud-swap-b { 0%, 42% { --hl: 0; } 50%, 92% { --hl: 1; } 100% { --hl: 0; } }

/* ---------- round 17 ---------- */

/* hero loading cover: a blur and a thin moving amber line over the video until it plays, and again if it stalls (shown only then, so it costs nothing
   the rest of the time). Phones: over the whole video, under the headline. Desktop: inside the portrait screen. */
.hero-screen { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hs-load { position: absolute; inset: 0; display: none; background: rgba(4, 14, 18, 0.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.hero-screen.buffering .hs-load { display: block; }
.hs-load i { position: absolute; left: 50%; top: 42%; width: 120px; height: 2px; margin-left: -60px; overflow: hidden; border-radius: 2px; background: rgba(240, 233, 220, 0.18); }
.hs-load i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--amber-hi), transparent); animation: hs-load 1.1s ease-in-out infinite; }
@keyframes hs-load { from { transform: translateX(-100%); } to { transform: translateX(250%); } }
.hs-rec, .hs-tc, .hero-amb, .hero-stack { display: none; }
/* the same cover in the full-screen player, over the video but under the title and buttons, while the current video waits for data */
.r-load { position: absolute; inset: 0; z-index: 0; display: none; pointer-events: none; background: rgba(4, 14, 18, 0.28); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
.r-item.buffering .r-load { display: block; }
.r-load i { position: absolute; left: 50%; top: 46%; width: 120px; height: 2px; margin-left: -60px; overflow: hidden; border-radius: 2px; background: rgba(240, 233, 220, 0.18); }
.r-load i::after { content: ""; position: absolute; inset: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--amber-hi), transparent); animation: hs-load 1.1s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .r-load i::after { animation: none; } }

/* desktop: the video in a portrait screen (REC, timecode, viewfinder corners) with two reels fanned behind it, over a blurred copy of the
   same clip that fills the hero. Phones keep the full-screen video (set up in app.js only from 900 px). */
@media (min-width: 900px) {
  /* --av: the hero's height between the header and the bottom bar. The stack is 74% of it, centred in it, and its middle stays where it was
     before round 17's resize (the cards were about a fifth bigger) */
  .hero.stack { --av: calc(min(100svh, 880px) - var(--hdr) - var(--bar)); --sh: calc(var(--av) * 0.74); --top: calc(var(--hdr) + var(--av) * 0.13);
    --r: calc(max(80px, calc((100% - 1280px) / 2 + 120px)) + 36px); background: #04121a; }
  .hero.stack::before { display: none; }
  .hero.stack .hero-amb { display: block; position: absolute; top: -80px; left: -80px; width: calc(100% + 160px); height: calc(100% + 160px); object-fit: cover; z-index: -3; opacity: 1; filter: blur(46px) brightness(0.5) saturate(1.25); }
  .hero.stack .hero-stack { display: contents; } /* the two cards are placed on the hero itself; the wrapper must not take a row of the hero's grid */
  .hero.stack #heroVideo, .hero.stack .hero-screen, .hero.stack .hs-side { top: var(--top); right: var(--r); left: auto; bottom: auto; height: var(--sh); width: auto; aspect-ratio: 9 / 16; }
  .hero.stack #heroVideo { z-index: 1; border-radius: 24px; object-position: 50% 50% !important; animation: none; box-shadow: 0 0 0 1px rgba(255, 148, 85, 0.5), 0 40px 100px -24px rgba(0, 0, 0, 0.9); }
  .hero.stack .hero-screen { z-index: 2; overflow: hidden; border-radius: 24px; }
  .hero.stack .hero-screen::before { content: ""; position: absolute; inset: 14px; opacity: 0.9;
    background: linear-gradient(var(--amber), var(--amber)) left top / 22px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) left top / 2px 22px no-repeat,
      linear-gradient(var(--amber), var(--amber)) right top / 22px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) right top / 2px 22px no-repeat,
      linear-gradient(var(--amber), var(--amber)) left bottom / 22px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) left bottom / 2px 22px no-repeat,
      linear-gradient(var(--amber), var(--amber)) right bottom / 22px 2px no-repeat, linear-gradient(var(--amber), var(--amber)) right bottom / 2px 22px no-repeat; }
  .hero.stack .hs-load i { top: 50%; }
  .hero.stack .hs-rec { position: absolute; left: 26px; top: 24px; display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.2em; color: var(--film); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
  .hs-rec i { width: 8px; height: 8px; border-radius: 50%; background: #ff3b30; box-shadow: 0 0 10px #ff3b30; animation: hs-blink 1.2s steps(2, start) infinite; }
  .hero.stack .hs-tc { position: absolute; right: 26px; bottom: 22px; display: block; font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.14em; color: var(--amber-hi); text-shadow: 0 1px 8px rgba(0, 0, 0, 0.6); }
  .hs-side { position: absolute; z-index: 0; object-fit: cover; border-radius: 24px; filter: brightness(0.62) saturate(0.9); box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.9); transform-origin: 50% 100%; }
  .hs-side:not([src]) { display: none; }
  .hs-side.s1 { transform: translateX(-34%) rotate(-9deg) scale(0.92); }
  .hs-side.s2 { transform: translateX(34%) rotate(8deg) scale(0.92); }
  .hero.stack .hero-shade { z-index: -2; background: linear-gradient(90deg, rgba(6, 21, 26, 0.9) 0%, rgba(6, 21, 26, 0.62) 42%, rgba(6, 21, 26, 0.2) 100%), linear-gradient(0deg, rgba(6, 21, 26, 0.7) 0%, transparent 40%); }
  .hero.stack .hero-copy { align-self: center; max-width: 640px; padding-top: 0; padding-bottom: 0; } /* centred on the same middle as the card stack (the 120 px top padding was for the full-screen hero) */
  .hero.stack h1 { font-size: clamp(2.5rem, 3.6vw, 3.6rem); } /* the 2026-11-12 headline is longer: about three lines, not five */
}
/* small laptops and tablets on their side (900 to 1199 px): a smaller stack nearer the edge and a narrower headline, so they never touch */
@media (min-width: 900px) and (max-width: 1199px) {
  .hero.stack { --sh: calc(var(--av) * 0.68); --top: calc(var(--hdr) + var(--av) * 0.16); --r: 60px; }

  .hero.stack .hero-copy { max-width: 440px; }
  .hero.stack h1 { font-size: clamp(2.3rem, 4vw, 2.9rem); }
}
@keyframes hs-blink { to { visibility: hidden; } }
@media (prefers-reduced-motion: reduce) { .hs-rec i, .hs-load i::after { animation: none; } }

/* desktop services wall (round 17): six services as an even 3 x 2 grid of portrait tiles, no big tile and no lone tile */
@media (min-width: 900px) {
  .wall:not(.few) { grid-template-columns: repeat(3, 1fr); }
  .wall:not(.few) .tile, .wall:not(.few) .tile:first-child, .wall:not(.few) .tile[data-span] { grid-column: auto; grid-row: auto; aspect-ratio: 4 / 5; }
  .wall:not(.few) .tile:first-child .tile-name { font-size: clamp(0.95rem, 2.4vw, 1.35rem); }
  .wall:not(.few) .tile:first-child .tile-no { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
  .wall:not(.few) .tile:first-child .tile-tag { max-width: none; }
}

/* collab, big phones and tablets held upright (480 to 899 px; 2026-11-12): the two lines drop from the middle of each account (a quarter and three
   quarters of the stage), so on a wide stage they landed beside the phone. A narrower stage and a wider phone keep both ends on the phone's top edge. */
@media (min-width: 480px) and (max-width: 899px) {
  .cw-stage { max-width: 460px; margin-left: auto; margin-right: auto; }
  .cw-phone { width: 300px; }
}

/* 2026-11-12 (Aliff: "the bottom fade looks darker at first, then flickers brighter when a video starts"). The loading cover (blur + a light
   dark tint) used to switch on and off in a single frame, and it sits under the bottom fade, so the fade looked darker while the video loaded
   and jumped brighter the instant it played. Now the cover only appears if loading takes longer than a moment (short hiccups no longer flash
   it) and it fades in and out. It also reaches a little past the video's edges, inside a clipped stage, so the blur cannot pull darkness in
   from outside the frame (iPhones darken the edges of a blur otherwise). Same for the hero's cover.
   Then (Aliff): no dark tint at all, only the blur and the moving line, so the cover never changes the brightness. */
.r-stage { overflow: clip; }
.r-load, .hs-load { background: none; display: block; inset: -24px; opacity: 0; visibility: hidden; transition: opacity .35s ease, visibility 0s linear .35s; }
.r-item.buffering .r-load, .hero-screen.buffering .hs-load { opacity: 1; visibility: visible; transition: opacity .3s ease .25s, visibility 0s linear .25s; }
.hero-screen { overflow: clip; }
@media (prefers-reduced-motion: reduce) { .r-load, .hs-load, .r-item.buffering .r-load, .hero-screen.buffering .hs-load { transition: none; } }

/* 2026-11-12 (Aliff, hero headline "G"): three sizes instead of one wrapping sentence. "Every brand has a story." small and regular weight,
   "Let's make yours" big and extra bold, "connect." orange, huge, extra bold and tucked right under it. Each phrase stays on ONE line on
   every screen: fitHeadline() in app.js sizes the headline so it ends exactly where the longest line of the description ends, and sets the
   gap under line 1 so "Let's make yours" sits visually halfway between the lines above and below it. Needs Unbounded 400 and 800. */
.hero h1 .hx-l { display: block; white-space: nowrap; width: max-content; max-width: none; }
.hero h1 .hx-w { display: inline-block; }
.hero h1 .hx-g1 { font-size: .5em; font-weight: 400; letter-spacing: -.01em; color: var(--film); margin-bottom: .5em; }
.hero h1 .hx-g2 { font-weight: 800; letter-spacing: -.045em; line-height: 1; color: var(--film); }
.hero h1 .hx-g3 { line-height: 1; margin-top: -.2em; } /* as tight as it goes: the top of the "t" stays just clear of the "r" above it */
.hero h1 .hx-big { font-size: 1.95em; font-weight: 800; letter-spacing: -.055em; line-height: .9; color: transparent;
  background: linear-gradient(90deg, var(--amber), var(--amber-hi) 60%, #ffc59a) 0 0 / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text;
  text-shadow: none; filter: drop-shadow(0 2px 14px rgba(6, 21, 26, .5));
  padding-right: .12em; margin-right: -.12em; } /* the orange fill is clipped to the text's box; the room past the full stop keeps its right edge from being cut off */
.hero h1::after { margin-top: 18px; }
html.is-loading .hero h1 * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
  .hero-copy h1 { animation: none; } /* the words rise in one line after another instead */
  .hero h1 .hx-w { animation: hx-rise .7s cubic-bezier(.22, 1, .36, 1) both; }
  .hero h1 .hx-g1 .hx-w { animation-delay: .05s; }
  .hero h1 .hx-g2 .hx-w { animation-delay: .25s; }
  .hero h1 .hx-big { animation: hx-rise .9s .68s cubic-bezier(.22, 1, .36, 1) both; }
  .hero h1 .hx-big::after { animation: hx-glow 5s 1.8s ease-in-out infinite; }
}
@keyframes hx-rise { from { opacity: 0; transform: translateY(.45em); filter: blur(6px); } }
/* the slow shimmer on "connect.": a second, lighter copy of the word fades in and out over it. Fading (opacity) is done by the graphics chip;
   the first version slid the gradient (background-position), which repainted the word every frame and kept a phone's processor busy all the time. */
.hero h1 .hx-big { position: relative; background-size: 220% 100%; } /* at rest: the deeper orange end of the gradient, as before */
.hero h1 .hx-big::after { content: "connect."; content: "connect." / ""; position: absolute; left: 0; top: 0; padding-right: .12em; color: transparent; opacity: 0; pointer-events: none;
  background: linear-gradient(90deg, var(--amber-hi), #ffc59a 55%, var(--amber-hi)) 0 0 / 100% 100% no-repeat; -webkit-background-clip: text; background-clip: text; }
@keyframes hx-glow { 50% { opacity: .85; } }
/* desktop (900 px and up): ONE fixed layout scaled as a whole, so text, cards and the gaps keep the same proportions on every screen.
   Before, the cards followed the window's height (74%) while the text followed a fixed-width column, so every window shape gave a different
   mix. --U = one design pixel: the 1216 x 700 design (1280 container minus its 32 px sides; the hero between the header and the bottom bar)
   fits the screen's width and height, never grows past 1:1, and sits centred with equal space left and right. */
@media (min-width: 900px) {
  .hero.stack {
    --U: min(calc((min(100vw, 1280px) - 64px) / 1216), calc((100svh - var(--hdr) - var(--bar)) / 700), 1px);
    --av: calc(700 * var(--U)); --sh: calc(490 * var(--U)); --top: calc(var(--hdr) + 105 * var(--U));
    --r: calc((100% - 1216 * var(--U)) / 2 + 144 * var(--U));
    min-height: 0; height: calc(var(--hdr) + var(--bar) + var(--av)); }
  .hero.stack .hero-copy { justify-self: start; width: calc(560 * var(--U)); max-width: none; margin-left: calc((100% - 1216 * var(--U)) / 2); padding: 0; }
  .hero.stack .hero-copy p { max-width: none; margin: calc(16 * var(--U)) 0 calc(26 * var(--U)); font-size: max(.9rem, calc(18 * var(--U))); }
  .hero.stack h1::after { margin-top: calc(20 * var(--U)); }
  .hero.stack .hero-cta .btn { padding: calc(12 * var(--U)) calc(20 * var(--U)); font-size: max(.8rem, calc(15 * var(--U))); }
  .hero.stack .hero-cta { gap: calc(10 * var(--U)); }
}

/* 2026-11-13 (Aliff): (1) the ring-and-triangle play mark on video cards is gone. It showed on hover only until the card's preview started,
   so on the first hover (preview still loading) it flashed for a moment, and later (preview ready at once) it never showed: it read as a
   flicker. The preview itself already says "this is a video". (2) A row that scrolls sideways (featured work, a service's videos) never
   scrolls up and down: while its cards slid up into place they stuck out ~15 px below the row, which briefly showed a grey scrollbar on desktop. */
.card::after { content: none; }
.scroller { overflow-y: hidden; }