/* ============ THE BUILD (homepage hero, assets/js/hero-build.js) ============ */
.tb { position: relative; height: 320vh; background: #0A090D; }
.tb__pin { position: sticky; top: 0; height: 100svh; overflow: hidden; background: #0A090D url("../video/hero2/d/f000.webp") center / cover no-repeat; }
.tb__cv, .tb__fx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.tb__fx { pointer-events: none; }
.tb__veil { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(125% 95% at 55% 50%, transparent 60%, rgba(5, 4, 7, .5) 100%); }
.tb__hud { position: absolute; z-index: 3; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 58px; display: flex; align-items: baseline; gap: 16px; color: rgba(242, 238, 230, .78); font-size: 11px; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); pointer-events: none; }
.tb__hud b { font-size: clamp(14px, 1.2vw, 17px); letter-spacing: .04em; font-weight: 600; color: #F2EEE6; font-variant-numeric: tabular-nums; }
.tb__hud span { font-variant-numeric: tabular-nums; }
.tb__hud i { font-style: normal; color: var(--signal-text); }
.tb__intro { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: center; padding-top: var(--nav-h); will-change: opacity; }
.tb__intro::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(90deg, rgba(10, 9, 13, .9) 0%, rgba(10, 9, 13, .62) 32%, transparent 52%); }
.tb__intro .eyebrow { color: rgba(242, 238, 230, .75); }
.tb__h1 { font-size: clamp(56px, 7.1vw, 128px); line-height: .88; letter-spacing: -.055em; font-weight: 640; font-variation-settings: "opsz" 96; max-width: 9ch; text-shadow: 0 8px 50px rgba(0, 0, 0, .6); }
.tb__h1 span { display: inline-block; will-change: transform, filter; }
.tb__h1 em { color: var(--signal-text); }
.tb__sub { font-family: var(--f-serif); font-style: italic; font-size: clamp(22px, 2.1vw, 30px); color: #F2EEE6; margin: 6px 0 10px; text-shadow: 0 2px 20px rgba(0, 0, 0, .7); }
.tb__intro .lede { color: rgba(242, 238, 230, .88); max-width: 36ch; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }
.tb__ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: clamp(20px, 3.4vh, 32px); }
.tb__cue { position: absolute; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 58px; color: rgba(242, 238, 230, .75); font-size: 11px; display: none; }
.tb__beat { position: absolute; z-index: 2; left: max(var(--gutter), calc((100vw - var(--maxw)) / 2)); bottom: 92px; max-width: 560px; opacity: 0; pointer-events: none; color: #F2EEE6; padding: 20px 26px 22px; border-radius: 18px; background: rgba(10, 9, 13, .76); -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3); border: 1px solid rgba(242, 238, 230, .1); }
.tb__beat .mono { color: var(--signal-text); font-size: 11px; }
.tb__beat p { font-size: clamp(24px, 2.7vw, 38px); line-height: 1.1; margin: 8px 0 0; font-weight: 600; letter-spacing: -.02em; }
.tb__beat--side { max-width: min(23vw, 340px); padding: 16px 20px 18px; bottom: 50%; translate: 0 50%; }
.tb__beat--side p { font-size: clamp(22px, 2.2vw, 32px); }
.tb__beat--end { bottom: 74px; max-width: min(46vw, 640px); padding: 12px 20px 14px; }
.tb__beat--end p { font-size: clamp(30px, 3.1vw, 46px); line-height: 1; }
.tb__beat--end p em { color: var(--signal-text); font-style: normal; }
.tb__tags { list-style: none; padding: 0; margin: 9px 0 0; display: flex; gap: 7px; flex-wrap: wrap; }
.tb__tags li { border: 1px solid rgba(242, 238, 230, .3); border-radius: 999px; padding: 5px 11px; font-size: 12px; }
.tb__sound { position: absolute; z-index: 3; right: clamp(16px, 2.4vw, 32px); bottom: 24px; display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px; border-radius: 999px; border: 1px solid rgba(242, 238, 230, .35); background: rgba(5, 4, 7, .5); color: #F2EEE6; font-size: 11px; cursor: pointer; }
.tb__sound svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.tb__sound[aria-pressed="true"] { border-color: var(--signal); }
.tb__bar { position: absolute; z-index: 2; left: clamp(16px, 2.4vw, 32px); right: clamp(140px, 14vw, 200px); bottom: 40px; height: 1px; background: rgba(242, 238, 230, .18); }
.tb__bar span { display: block; height: 100%; background: var(--signal); transform-origin: left; transform: scaleX(var(--p, 0)); }
html.calm .tb { height: 100svh; }
html.calm .tb__sound, html.calm .tb__bar, html.calm .tb__hud { display: none; }
html.xray .tb__cv { filter: grayscale(1) contrast(1.4) brightness(.9) sepia(1) hue-rotate(160deg) saturate(2.6); }
@media (prefers-reduced-motion: reduce) { .tb { height: 100svh; } .tb__sound, .tb__bar, .tb__hud { display: none; } }
@media (max-width: 760px), (max-aspect-ratio: 1/1) {
  .tb { height: 280vh; }
  .tb__pin { background-image: url("../video/hero2/m/f000.webp"); }
  .tb__intro { justify-content: flex-end; padding-bottom: 66px; }
  .tb__intro::before { background: linear-gradient(to top, rgba(10, 9, 13, .98) 0%, rgba(10, 9, 13, .94) 42%, transparent 60%); }
  .tb__intro .eyebrow { display: none; }
  .tb__h1 { font-size: clamp(44px, 12.6vw, 72px); max-width: none; }
  .tb__h1 span { display: inline; }
  .tb__sub { display: none; }
  .tb__intro .lede { font-size: 15px; line-height: 1.4; max-width: 40ch; margin-top: 8px; }
  .tb__ctas .btn { flex: 1 1 100%; justify-content: center; }
  .tb__ctas { margin-top: 14px; gap: 8px; }
  .tb__hud { left: 20px; bottom: 58px; gap: 10px; font-size: 10px; opacity: 0; }
  .tb__hud span { display: none; }
  .tb__beat, .tb__beat--side { left: 16px; right: 16px; bottom: 88px; max-width: none; padding: 15px 18px 17px; translate: none; }
  .tb__beat--side p { font-size: 23px; }
  .tb__beat p { font-size: 23px; }
  .tb__beat--end { bottom: auto; top: calc(var(--nav-h) + 2vh); max-width: none; }
  .tb__beat--end p { font-size: 38px; }
  .tb__tags { gap: 5px; margin-top: 10px; } .tb__tags li { font-size: 10px; padding: 3px 8px; } .tb__tags li:nth-child(n+5) { display: none; }
  .tb__bar { right: 130px; }
}

/* homepage work reel: link to the full /work/ page */
.work__all { margin-top: 18px; }