/* V1.12 — an editorial layer for the six public-facing studio pages.
   Brand tokens remain in global.css. The independent /red-liu/ archive is
   deliberately excluded in the renderer, along with legal and machine pages. */

.site-header { grid-template-columns: 1fr auto auto; gap: 32px; border-bottom-color: transparent; }
.site-header.is-over-hero:not(.has-scrolled) { background: linear-gradient(#070707a6, transparent); }
.header-actions .book-link { display: none; }
.section-heading { padding-bottom: 0; border: 0; align-items: baseline; }
.section-heading::after { display: none; }
.section-heading h2 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 500; letter-spacing: -.02em; line-height: 1.25; }
.text-link { display: inline-flex; width: fit-content; min-height: 44px; align-items: center; gap: 24px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-transform: none; }
.text-link span, .service-row i { font-family: Arial, sans-serif; color: var(--signal-red); font-style: normal; }
.reveal { transition-duration: 600ms; }
body::before { display: none; }

/* Photograph and interface are separate planes: nothing covers the console. */
.hero-editorial { min-height: 0; overflow: hidden; }
.hero-photograph { position: relative; height: clamp(520px, calc(100svh - 220px), 880px); }
.hero-editorial .hero-state-media { inset: 0; filter: none; opacity: 1; transform: none; }
.hero-editorial .hero-picture { inset: 0; transition: opacity 1800ms ease; filter: none; will-change: opacity; }
.hero-editorial .hero-picture img { object-position: 50% 62%; animation: none; transform: none; filter: none; will-change: auto; }
.hero-editorial .hero-state-media .hero-red,
.hero-editorial .hero-state-media.is-red .hero-warm,
.hero-editorial .hero-state-media.is-red .hero-red { filter: none; }
.hero-editorial .hero-state-media::after { display: none; }
.hero-editorial .hero-shade { background: linear-gradient(to bottom, transparent 80%, #070707 100%); }
.hero-caption { position: relative; display: flex; min-height: 220px; align-items: center; justify-content: space-between; gap: 48px; padding: 24px 0 40px; }
.hero-brand-moment { display: flex; align-items: center; gap: 32px; }
.hero-slogan { font-family: var(--display); font-size: clamp(28px, 3vw, 44px); font-weight: 400; line-height: 1.2; letter-spacing: -.035em; }
.hero-slogan span { display: block; }
.brand-moment-mark { display: block; width: 64px; flex: 0 0 64px; }
.brand-moment-mark .glow-r { width: 64px; height: 64px; filter: none; }
.is-ready .brand-moment-mark { animation: brand-quiet-ignition 1800ms ease-out both; }
@keyframes brand-quiet-ignition { from { opacity: .2; transform: scale(.96); } 60% { opacity: 1; } to { opacity: .72; transform: none; } }
.hero-caption-actions { display: flex; align-items: center; gap: 48px; }
.hero-state-controls { gap: 12px; }
.hero-state-controls button { min-width: 64px; min-height: 48px; padding: 0 8px; font-size: 12px; font-weight: 500; letter-spacing: .12em; border: 0; border-bottom: 2px solid transparent; background: none; }
.hero-state-controls button.is-active { border-color: var(--signal-red); background: none; }
.hero-state-controls button:hover { color: var(--signal-red-hover); }

/* Read as prose, not seven animated headline fragments. */
.brand-intro { padding: 24px 0 96px; }
.intro-natural { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 40px; border-top: 1px solid rgba(243,239,231,.18); }
.intro-natural p { max-width: 40em; font-size: 16px; font-weight: 400; line-height: 1.9; color: var(--warm-200); }

/* A readable name field and a still, genuinely square body of work. */
.clients-preview { padding: 0 0 120px; }
.client-matrix { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 32px 0 40px; padding: 0; border: 0; }
.client-matrix-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.client-matrix span, .client-matrix .client-more { display: block; min-height: 0; padding: 0; border: 0; font-size: 17px; line-height: 1.6; font-weight: 400; letter-spacing: 0; color: var(--warm-200); }
.client-matrix .client-name, .client-matrix .client-more { flex: 0 0 auto; white-space: nowrap; }
.client-matrix span::before, .client-matrix span::after { display: none; }
.work-rail { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 12px; margin-top: 0; }
.work-rail figure { position: relative; display: block; min-width: 0; width: 100%; height: auto; aspect-ratio: 1; margin: 0; overflow: hidden; }
.work-rail img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; aspect-ratio: 1; object-fit: cover; filter: saturate(.92) brightness(.86); transition: filter 250ms, transform 400ms; }
.work-rail figure:hover img { filter: none; transform: scale(1.025); }
.clients-preview .text-link { margin-top: 24px; }
body[data-page="clients"] .page-hero { min-height: 0; padding-top: calc(var(--header-height) + 64px); padding-bottom: 32px; }
body[data-page="clients"] .page-hero h1 { margin: 0; font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; }
.client-page { padding: 0 0 120px; }
.client-page .client-matrix { margin-top: 0; }

/* 姓名墙：两行 space-between 需要足够宽度才排得下，否则会撑破 shell 并让整页横向滚动。
   ~1480px 以下改为自然换行 + 固定间距（与手机断点同一套规则），行数由内容决定。 */
@media (max-width: 1480px) {
  .client-matrix { display: flex; flex-wrap: wrap; gap: 12px 26px; }
  .client-matrix-row { display: contents; }
}
.work-ledger { margin-top: 96px; }

/* Photography keeps clean edges; dark space frames it rather than masking it. */
.sound-system { padding: 0 0 120px; }
.sound-editorial { grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); align-items: end; gap: 64px; margin-top: 40px; }
.sound-editorial-media .media-picture { aspect-ratio: 3 / 2; mask-image: none; }
.sound-editorial-media::after { display: none; }
.sound-lead { max-width: 32em; font-family: var(--sans); font-size: 16px; line-height: 1.9; font-weight: 400; }
.sound-editorial-copy .text-link { margin-top: 24px; }
.services-preview { padding: 0 0 120px; }
.services-layout { grid-template-columns: 1fr 1fr; gap: 96px; margin-top: 32px; }
.service-row { min-height: 72px; }
.service-row strong { font-size: clamp(23px, 2.2vw, 32px); font-weight: 400; }
.service-row:hover, .service-row:focus-visible, .service-row.is-active { transform: none; }
.service-media { position: relative; top: auto; align-self: stretch; }
.service-media-stack { height: 100%; min-height: 360px; aspect-ratio: auto; border: 0; background: none; overflow: visible; }
.service-media-stack::before, .service-media-stack::after { display: none; }
.service-media-item { --service-offset: 0px !important; inset: 0; padding: 24px 0 0; justify-content: center; background: none; }
.service-media-item h3 { margin-bottom: 24px; font-size: 18px; font-weight: 500; }
.service-media-item p { font-size: 16px; line-height: 1.9; }
.service-media-item a { font-size: 14px; font-weight: 500; letter-spacing: 0; min-height: 44px; margin-top: 24px; }
.lounge-section { padding: 0 0 120px; }
.lounge-editorial figure .media-picture { aspect-ratio: 16 / 7; }
.lounge-editorial-copy { display: grid; grid-template-columns: 1fr 1fr; gap: 96px; margin-top: 40px; }
.lounge-editorial h2 { max-width: 18em; font-size: clamp(23px, 2.2vw, 32px); line-height: 1.4; font-weight: 400; letter-spacing: -.02em; text-wrap: balance; }
.lounge-editorial p { max-width: 38em; color: var(--warm-200); font-size: 16px; line-height: 1.9; }

/* Studios: photos arrive in the first viewport; facts are supporting text. */
.studios-overview { padding: calc(var(--header-height) + 64px) 0 40px; }
.studios-overview-grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); padding-top: 0; align-items: start; gap: 64px; }
.studios-overview h1 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; }
.studios-overview-grid > div > p { font-size: 16px; line-height: 1.8; }
.studio-facts { display: flex; flex-wrap: wrap; column-gap: 48px; row-gap: 16px; margin-top: 32px; border: 0; }
.studio-facts > div, .studio-facts > div:not(:first-child) { display: flex; align-items: baseline; gap: 12px; min-height: 0; padding: 0; border: 0; }
.studio-facts dt { font-size: 18px; line-height: 1.4; font-weight: 500; letter-spacing: 0; }
.studio-facts dd { margin: 0; max-width: none; color: var(--warm-200); font-size: 11px; letter-spacing: .04em; font-weight: 400; }
.studio-list { padding-top: 0; padding-bottom: 32px; }
.studio-detail { gap: 24px; padding: 48px 0 96px; }
.studio-detail:first-child { border-top: 0; padding-top: 16px; }
.studio-detail-head h2 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; }
.studio-detail-copy { font-size: 16px; line-height: 1.8; }
.studio-detail-media { margin-top: 16px; }
.studio-detail-media .media-picture { aspect-ratio: 3 / 2; }
.studio-detail-media .media-picture img { object-fit: contain; }
.studio-booth-note { aspect-ratio: 3 / 2; }
.studio-booth-note h3 { font-size: clamp(23px, 2.2vw, 32px); }
.has-js body[data-page="studios"] .focus-pull img { filter: none; transform: none; transition: none; }
.studio-state-pair { margin-top: 48px; }
.use-list { margin-top: 16px; }
.lounge-detail { padding: 32px 0 96px; }
.lounge-detail h2 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 400; }

/* Inner pages share one text scale and one alignment grid. */
.page-hero { min-height: 0; padding-top: calc(var(--header-height) + 64px); padding-bottom: 64px; }
.page-hero-copy { width: 100%; min-width: 0; align-self: stretch; display: flex; flex-direction: column; justify-content: center; }
.page-hero-copy h1 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; }
.page-hero-media { aspect-ratio: 3 / 2; }
.page-hero::after { display: none; }
.service-list { padding: 0 0 64px; }
.service-detail { padding: 40px 0; gap: 64px; }
.service-detail h2 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 400; }
.service-detail p { font-size: 16px; line-height: 1.9; }
.service-process { padding: 40px 0 96px; }
.service-process h2 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 400; margin-top: 16px; text-wrap: balance; }
.process-grid { margin-top: 32px; }
.about-hero { padding: calc(var(--header-height) + 64px) 0 48px; }
.about-hero-shell { display: block; min-height: 0; }
.about-hero-copy h1 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; }
.about-hero-copy p { margin-top: 16px; font-size: 16px; }
.about-page { padding: 0 0 96px; }
.about-page-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; align-items: center; }
.about-portrait, .about-long { grid-column: auto; }
.about-portrait .media-picture { width: 100%; aspect-ratio: 1 / 1; max-height: none; }
.about-person-heading { padding: 0; margin-bottom: 24px; border: 0; }
.about-person-heading h2 { font-size: clamp(23px, 2.2vw, 32px); line-height: 1.25; }
.about-long .about-person-heading p { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--warm-200); letter-spacing: 0; }
.about-long p { font-size: 16px; line-height: 1.9; margin-bottom: 24px; font-family: var(--sans); }
.about-collaboration { border: 0; padding: 0 0 96px; }
.about-collaboration-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 96px; }
.about-collaboration-media .media-picture { aspect-ratio: 4 / 3; }
.about-collaboration-media::after { display: none; }
.about-collaboration-copy h2 { font-size: clamp(23px, 2.2vw, 32px); }
.about-collaboration-copy p { font-size: 16px; line-height: 1.9; color: var(--warm-200); }
.about-collaboration-copy .about-collaboration-role { font-size: 14px; margin: 16px 0 24px; }
.about-signoff { padding: 32px 0 96px; }
.about-signoff-copy .section-index { display: none; }
.about-signoff-copy h2 { font-size: clamp(23px, 2.2vw, 32px); font-weight: 400; line-height: 1.4; }

/* Contact actions first; practical briefing notes below. */
.contact-page { padding: calc(var(--header-height) + 64px) 0 96px; }
.contact-editorial-head h1 { font-size: clamp(32px, 4.2vw, 58px); line-height: 1.05; font-weight: 500; letter-spacing: -.025em; }
.contact-editorial-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 4fr); gap: 64px; align-items: start; margin-top: 64px; }
.contact-direct { display: grid; gap: 40px; }
.contact-channel h2, .contact-notes h2 { margin-bottom: 12px; font-size: 14px; font-weight: 500; color: var(--warm-200); }
.contact-channel .contact-address { margin-bottom: 12px; font-size: clamp(18px, 2.2vw, 32px); color: var(--warm-50); font-weight: 400; overflow-wrap: anywhere; }
.contact-channel p { font-size: 14px; line-height: 1.8; color: var(--warm-200); }
.contact-channel .copy-action { margin-top: 12px; padding: 0; border-bottom: 1px solid rgba(243,239,231,.24); }
.copy-status { display: inline-block; margin-left: 16px; font-size: 12px; color: var(--warm-200); }
.contact-qr-panel { width: min(100%, 280px); justify-self: end; text-align: center; }
.contact-qr-panel .contact-page-qr { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
.contact-qr-panel figcaption { margin-top: 16px; color: var(--warm-200); font-size: 12px; }
.contact-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; padding-top: 40px; margin-top: 64px; border-top: 1px solid rgba(243,239,231,.18); }
.contact-notes p { max-width: 40em; font-size: 14px; line-height: 1.9; color: var(--warm-200); }

@media (max-width: 1100px) {
  .site-header { gap: 24px; }
  .desktop-nav { gap: 20px; }
  .hero-caption-actions { gap: 24px; }
  .brand-moment-mark { display: none; }
  .sound-editorial, .services-layout, .lounge-editorial-copy, .about-page-grid, .about-collaboration-grid { gap: 40px; }
  .studio-facts { column-gap: 24px; }
}

@media (max-width: 760px) {
  .site-header { grid-template-columns: 1fr auto; gap: 16px; }
  .header-actions .lang-link { display: inline-flex; min-height: 44px; align-items: center; }
  .site-header.is-over-hero:not(.has-scrolled) .mobile-menu { background: rgba(7,7,7,.92); backdrop-filter: blur(12px); }
  body.menu-open .site-header.is-over-hero { background: rgba(7,7,7,.92); }
  .hero-photograph { height: auto; aspect-ratio: 5 / 6; min-height: 0; margin-top: 48px; }
  .hero-editorial .hero-picture img { object-position: 50% 64%; }
  .hero-editorial .hero-shade { background: linear-gradient(to bottom, transparent 86%, #070707 100%); }
  .hero-caption { display: block; min-height: 0; padding: 24px 0 32px; }
  .hero-slogan { font-size: clamp(23px, 6.15vw, 32px); line-height: 1.25; }
  .hero-caption-actions { justify-content: space-between; gap: 16px; margin-top: 24px; }
  .hero-state-controls { gap: 8px; }
  .hero-state-controls button { min-width: 60px; min-height: 44px; font-size: 11px; }
  .hero-caption .text-link { font-size: 12px; gap: 8px; }
  .text-link span, .service-row i { display: inline; }
  .mobile-menu nav a { font-size: 23px; min-height: 56px; }
  .brand-intro { padding: 0 0 64px; }
  .intro-natural { grid-template-columns: 1fr; gap: 24px; padding-top: 32px; }
  .intro-natural p { font-size: 16px; line-height: 1.85; }
  .section-heading h2 { font-size: 23px; }
  .client-matrix { display: flex; flex-wrap: wrap; gap: 10px 24px; margin: 24px 0 32px; }
  .client-matrix-row { display: contents; }
  .client-matrix span, .client-matrix .client-more { font-size: 16px; }
  .work-rail { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .clients-preview, .sound-system, .services-preview, .lounge-section { padding: 0 0 64px; }
  .sound-editorial { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .sound-editorial-media { width: 100%; }
  .sound-editorial-copy .text-link { margin-top: 16px; }
  .sound-lead { font-size: 16px; line-height: 1.85; }
  .services-layout { display: block; margin-top: 24px; }
  .service-row { min-height: 64px; }
  .service-row strong { font-size: 23px; }
  .service-media { display: none; }
  .lounge-editorial figure .media-picture { aspect-ratio: 3 / 2; }
  .lounge-editorial-copy { grid-template-columns: 1fr; gap: 20px; margin-top: 24px; }
  .lounge-editorial h2 { max-width: 15em; font-size: 23px; }
  .lounge-editorial p { font-size: 16px; }
  .studios-overview { padding: calc(var(--header-height) + 32px) 0 32px; }
  .studios-overview-grid { grid-template-columns: 1fr; gap: 24px; }
  .studios-overview h1 { font-size: 32px; }
  .studios-overview-grid > div > p { font-size: 14px; line-height: 1.8; }
  .studio-facts { gap: 12px 24px; margin-top: 24px; }
  .studio-facts > div { flex-basis: calc(50% - 12px); gap: 8px; }
  .studio-facts dt { font-size: 18px; }
  .studio-facts dd { font-size: 10px; }
  .studio-detail { display: block; padding: 32px 0 64px; }
  .studio-detail-head h2 { font-size: 32px; }
  .studio-detail-head .studio-pair { font-size: 10px; margin-top: 12px; }
  .studio-detail-copy { margin-top: 24px; font-size: 14px; }
  .studio-detail-copy:empty { display: none; }
  .studio-detail-media { grid-template-columns: 1fr; gap: 24px; margin-top: 24px; }
  .studio-booth-note { aspect-ratio: auto; padding: 8px 0 0; }
  .studio-booth-note h3 { font-size: 23px; }
  .studio-state-pair { grid-template-columns: 1fr; margin-top: 32px; gap: 24px; }
  .use-list { margin-top: 24px; }
  .lounge-detail { padding: 0 0 64px; }
  .page-hero, body[data-page="clients"] .page-hero { padding-top: calc(var(--header-height) + 32px); padding-bottom: 32px; gap: 32px; }
  .page-hero-copy h1, body[data-page="clients"] .page-hero h1 { font-size: 32px; }
  .page-hero-media { aspect-ratio: 3 / 2; }
  .client-page { padding-bottom: 64px; }
  .work-ledger { margin-top: 64px; }
  .service-detail { display: block; padding: 32px 0; }
  .service-detail h2 { font-size: 23px; margin-bottom: 20px; }
  .service-detail p { font-size: 16px; }
  .service-process { padding: 0 0 64px; }
  .service-process h2 { font-size: 23px; }
  .about-hero { padding: calc(var(--header-height) + 32px) 0 32px; }
  .about-hero-copy h1 { font-size: 32px; }
  .about-hero-copy p { font-size: 14px; }
  .about-page-grid, .about-collaboration-grid { grid-template-columns: 1fr; gap: 32px; }
  .about-portrait .media-picture { aspect-ratio: 4 / 5; max-height: none; }
  .about-page, .about-collaboration, .about-signoff { padding: 0 0 64px; }
  .about-long .about-person-heading h2, .about-collaboration-copy h2, .about-signoff-copy h2 { font-size: 23px; }
  .contact-page { padding: calc(var(--header-height) + 32px) 0 64px; }
  .contact-editorial-head h1 { font-size: 32px; }
  .contact-editorial-grid { grid-template-columns: 1fr; gap: 40px; margin-top: 32px; }
  .contact-direct { gap: 32px; }
  .contact-channel .contact-address { font-size: 23px; }
  .contact-qr-panel { width: 220px; justify-self: start; }
  .contact-notes { grid-template-columns: 1fr; gap: 32px; margin-top: 40px; padding-top: 32px; }
}

@media (prefers-reduced-motion: reduce) {
  .is-ready .brand-moment-mark { animation: none; }
  .hero-editorial .hero-picture { transition: none; }
  .work-rail img { transition: none; }
}

/* Trial 2026-09: CG brand film as the default Hero view (V19 web cut).
   Real WARM / REC photographs stay in the same frame, one tap away. */
.hero-editorial .hero-state-media.is-film { background: #000; }
.hero-editorial .hero-film { position: absolute; inset: 0; z-index: 3; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; opacity: 0; pointer-events: none; transition: opacity 900ms ease; }
.hero-editorial .hero-state-media.is-film .hero-film { opacity: 1; }
/* display:none keeps the lazy 3200px photographs from downloading while the film is showing. */
.hero-editorial .hero-state-media.is-film .hero-picture { display: none; }
/* Pause control sits on the film itself (WCAG 2.2.2) so hiding it never shifts the caption row. */
.hero-film-toggle { position: absolute; right: calc((100% - var(--shell)) / 2); bottom: 16px; z-index: 4; min-height: 44px; padding: 0 8px; border: 0; background: none; color: #fff; font-size: 11px; font-weight: 500; letter-spacing: .12em; opacity: .56; cursor: pointer; }
.hero-film-toggle:hover, .hero-film-toggle:focus-visible { opacity: 1; }
.hero-film-toggle[hidden] { display: none; }
@media (max-width: 760px) {
  /* 16:9 on phones keeps the whole film frame (and the wordmark) visible; the 3:2
     photographs crop only slightly, so switching views never changes the layout height. */
  .hero-photograph { aspect-ratio: 16 / 9; }
  .hero-film-toggle { right: 12px; bottom: 4px; font-size: 10px; }
}

/* Hero caption, film trial: larger slogan + studio tally (REC / PAUSE / STANDBY + timecode)
   in place of the small glow R, which the film's own lockup already shows. */
.hero-slogan { font-size: clamp(32px, 3.5vw, 56px); line-height: 1.16; }
.hero-brand-moment { gap: 40px; }
.hero-rec-status { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 10px; row-gap: 10px; align-self: center; padding-left: 40px; border-left: 1px solid rgba(243, 239, 231, .14); color: rgba(243, 239, 231, .72); white-space: nowrap; }
.rec-dot { width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(243, 239, 231, .42); transition: background-color 300ms ease, box-shadow 300ms ease; }
.rec-label { font-size: 11px; font-weight: 600; letter-spacing: .18em; }
.rec-timecode { grid-column: 1 / -1; font-family: var(--display); font-size: clamp(18px, 1.5vw, 24px); font-weight: 400; letter-spacing: .04em; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; color: rgba(243, 239, 231, .9); transition: color 300ms ease; }
.hero-rec-status[data-state="rec"] .rec-dot { background: var(--signal-red); box-shadow: 0 0 10px rgba(224, 22, 25, .75); animation: rec-tally 1.8s ease-in-out infinite; }
.hero-rec-status[data-state="rec"] .rec-label { color: var(--signal-red-hover); }
.hero-rec-status[data-state="pause"] .rec-dot { background: rgba(224, 22, 25, .45); box-shadow: none; }
.hero-rec-status[data-state="standby"] .rec-timecode { color: rgba(243, 239, 231, .38); }
@keyframes rec-tally { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (max-width: 1280px) {
  .hero-brand-moment { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hero-rec-status { display: flex; align-items: center; align-self: flex-start; gap: 10px; padding-left: 0; border-left: 0; }
  .rec-timecode { font-size: 14px; margin-left: 6px; }
}
@media (max-width: 760px) {
  .hero-slogan { font-size: clamp(26px, 7vw, 34px); line-height: 1.2; }
  .hero-brand-moment { gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-rec-status[data-state="rec"] .rec-dot { animation: none; }
}