/* Public site only. Scene media stays separate from the authenticated workspace. */
html, body, button, input, textarea, a, p, h1, h2, h3, span, summary { letter-spacing: 0 !important; }
.wrap { width: min(1280px, calc(100% - 96px)); }
.site-head { height: 88px; }
.site-head .wrap { border: 0; }
.mark .word { font-size: 26px; }
.site-nav { gap: 28px; }
.head-end { gap: 24px; }
.site-nav a, .utility { color: var(--porcelain); }
.hero { padding: 0; height: min(820px, calc(100svh - 180px)); min-height: 490px; isolation: isolate; }
.hero > .wrap { height: 100%; }
.hero-grid { height: 100%; }
.hero-copy { position: absolute; z-index: 2; left: max(48px, calc((100% - 1280px) / 2)); right: max(48px, calc((100% - 1280px) / 2)); bottom: 112px; display: grid; grid-template-columns: 1.25fr 1fr; column-gap: 64px; align-items: end; padding: 0; max-width: none; }
.hero h1 { grid-column: 1; font-size: 52px; line-height: 1.12; font-weight: 500; max-width: 600px; }
.hero h1 span { white-space: normal; }
.hero .eyebrow { grid-column: 1; padding: 0; border: 0; border-radius: 0; margin-bottom: 16px; font-size: 13px; }
.hero-intro { grid-column: 2; grid-row: 1 / 3; display: block; margin: 0; }
.hero .lede { max-width: 38ch; font-size: 17px; line-height: 27px; }
.hero .actions { flex-direction: row; flex-wrap: wrap; align-items: center; margin-top: 22px; gap: 12px 24px; }
.hero .text-link { font-size: 14px; min-height: 48px; }
.watch-film { display: inline-flex; align-items: center; gap: 10px; padding: 0; background: transparent; border: 0; color: var(--porcelain); }
.watch-film svg { width: 17px; height: 17px; }
.hero .actions [hidden] { display: none; }
.evidence-figure { position: absolute; inset: 0; margin: 0; z-index: 0; }
.evidence-figure::after { content: ''; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(0,0,0,.94) 0%, rgba(0,0,0,.82) 34%, rgba(0,0,0,0) 65%); pointer-events: none; }
.evidence-figure .evidence-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; mask-image: none; filter: none; }
.evidence-figure figcaption { position: absolute; z-index: 2; left: max(48px, calc((100% - 1280px) / 2)); top: 24px; bottom: auto; margin: 0; padding: 10px 14px; display: flex; flex-direction: column; gap: 2px; width: fit-content; max-width: calc(100% - 96px); border: 1px solid rgba(245,245,247,.2); background: rgba(0,0,0,.78); color: var(--porcelain); font-size: 12px; line-height: 18px; }
#sceneKind { font-size: 14px; font-weight: 500; }
.cinema-limit { display: none; max-width: 360px; }
.is-cinema .cinema-limit { display: block; margin-top: 6px; }
.film-controls { position: absolute; z-index: 3; bottom: 0; left: max(48px, calc((100% - 1280px) / 2)); right: max(48px, calc((100% - 1280px) / 2)); height: 88px; display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-top: 10px; border-top: 1px solid rgba(245,245,247,.3); }
.film-controls[hidden], .hero-motion[hidden] { display: none; }
.film-chapters { display: flex; gap: 24px; }
.chapter-button { display: flex; gap: 10px; align-items: center; padding: 0 0 10px; min-height: 44px; background: transparent; color: var(--porcelain); border: 0; border-bottom: 2px solid transparent; font-size: 13px; white-space: nowrap; opacity: .8; }
.chapter-button span { font-size: 11px; }
.chapter-button[aria-pressed="true"] { opacity: 1; border-bottom-color: var(--porcelain); }
.chapter-button:hover { opacity: 1; }
.film-tools { display: flex; gap: 12px; }
.hero-motion, .hero-cinema { width: 44px; height: 44px; display: grid; place-items: center; background: rgba(0,0,0,.75); border: 1px solid rgba(245,245,247,.5); border-radius: 4px; color: var(--porcelain); }
.hero-motion svg, .hero-cinema svg { width: 19px; height: 19px; }
.hero-motion .play-icon, .hero-motion.is-paused .pause-icon { display: none; }
.hero-motion.is-paused .play-icon { display: block; }
.hero-cinema .collapse-icon, .is-cinema .hero-cinema .expand-icon { display: none; }
.is-cinema .hero-cinema .collapse-icon { display: block; }
.film-scrub { position: absolute; bottom: 6px; left: 0; width: 100%; height: 24px; margin: 0; appearance: none; background: transparent; cursor: pointer; }
.film-scrub::-webkit-slider-runnable-track { height: 2px; background: linear-gradient(90deg, var(--porcelain) var(--film-progress, 0%), rgba(245,245,247,.35) var(--film-progress, 0%)); }
.film-scrub::-webkit-slider-thumb { appearance: none; width: 12px; height: 12px; margin-top: -5px; border: 0; border-radius: 50%; background: var(--porcelain); }
.film-scrub::-moz-range-track { height: 2px; background: rgba(245,245,247,.35); }
.film-scrub::-moz-range-progress { height: 2px; background: var(--porcelain); }
.film-scrub::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--porcelain); }
.hero.is-cinema { position: fixed; inset: 0; z-index: 200; height: 100dvh; min-height: 0; background: var(--black); }
.is-cinema .hero-copy { display: none; }
.is-cinema .evidence-figure::after { background: linear-gradient(0deg, rgba(0,0,0,.92), rgba(0,0,0,.84) 100px, rgba(0,0,0,0) 150px); }
.is-cinema .evidence-art { object-fit: contain; }
.is-cinema .film-controls { bottom: 0; }
.media-unavailable video.evidence-art { display: none; }
.media-unavailable .evidence-still { display: block; }
#sources { padding-top: 48px; }
h2 { font-size: 42px; line-height: 48px; }
h3 { font-size: 23px; line-height: 30px; }
.eyebrow, .cap { font-size: 13px; }
.demo-heading { grid-template-columns: 1fr 1fr; gap: 80px; margin-bottom: 44px; }
.source-grid { gap: 40px; }
.source-column { padding: 26px 0 0; border: 0; border-top: 1px solid var(--silver); border-radius: 0; background: transparent; }
.source-column p { color: var(--silver); }
.spatial { border-block: 1px solid var(--graphite); }
.spatial .demo-heading { align-items: start; }
.spatial-note { margin-top: 20px; color: var(--silver); font-size: 14px; line-height: 23px; }
.spatial-figure { margin: 0; }
.spatial-figure img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; mask-image: none; border-radius: 0; }
.spatial-figure figcaption { margin: 0; padding: 18px 0 0; max-width: 88ch; border: 0; line-height: 22px; }
.review-questions, .approach { background: transparent; }
.form-card { border-radius: 8px; }
.form-card .field input, .form-card .field textarea, .btn { border-radius: 4px; }
.body-copy, .principles p { max-width: 58ch; }
.foot-grid p { line-height: 23px; }
@media (max-width: 1100px) {
  .site-nav { display: none; }
  .hero h1 { font-size: 44px; }
  .hero-copy { column-gap: 36px; }
  .hero .lede { max-width: 32ch; }
  .hero .actions { gap: 4px 18px; }
  .film-chapters { gap: 16px; }
  .hero:not(.is-cinema) .evidence-figure::after { background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,.86) 46%, rgba(0,0,0,0) 75%); }
}
@media (max-width: 760px) {
  .wrap { width: calc(100% - 40px); }
  .site-head { height: 76px; }
  .head-end .btn { display: none; }
  .hero { height: min(700px, calc(100svh - 150px)); min-height: 450px; }
  .hero-copy { display: block; left: 20px; right: 20px; bottom: 126px; padding: 0; }
  .hero h1 { font-size: 34px; line-height: 38px; }
  .hero .eyebrow { margin-bottom: 10px; font-size: 12px; }
  .hero-intro { margin-top: 16px; }
  .hero .lede { font-size: 14px; line-height: 22px; max-width: 38ch; }
  .hero .actions { margin-top: 18px; gap: 12px 18px; }
  .hero .actions .btn { padding-inline: 16px; }
  .hero .text-link { font-size: 12px; }
  .evidence-figure { margin: 0; }
  .hero:not(.is-cinema) .evidence-figure::after { background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,.82) 54%, rgba(0,0,0,0) 84%); }
  .evidence-figure .evidence-art { object-position: center; }
  .evidence-figure figcaption { left: 20px; right: 20px; top: 16px; max-width: calc(100% - 40px); padding: 8px 10px; font-size: 11px; line-height: 16px; }
  #sceneKind { font-size: 12px; }
  .film-controls { left: 20px; right: 20px; height: 104px; gap: 6px; flex-wrap: wrap; padding-top: 0; }
  .film-chapters { width: 100%; justify-content: space-between; gap: 8px; }
  .chapter-button { font-size: 11px; gap: 4px; min-height: 44px; padding: 0; }
  .chapter-button span { font-size: 10px; }
  .film-tools { position: absolute; bottom: 7px; right: 0; gap: 8px; }
  .film-scrub { width: calc(100% - 112px); bottom: 17px; }
  h2 { font-size: 34px; line-height: 40px; }
  .demo-heading, .approach-grid, .close-grid { grid-template-columns: 1fr; gap: 28px; }
  .source-grid { gap: 30px; }
  .spatial-figure { margin: 0; }
  .spatial-figure img { aspect-ratio: 4 / 3; }
  .spatial-figure figcaption { margin: 0; }
  .spatial-note { font-size: 13px; line-height: 22px; }
}
@media (max-width: 760px) and (max-height: 740px) {
  .hero-copy { bottom: 112px; }
  .hero h1 { font-size: 30px; line-height: 34px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero-intro { margin-top: 10px; }
  .hero .lede { font-size: 13px; line-height: 20px; }
  .hero .actions { margin-top: 12px; gap: 6px 14px; }
  .hero .actions .btn { min-height: 44px; font-size: 12px; }
  #sources { padding-top: 24px; }
}
@media (max-width: 360px) {
  .mark .word { font-size: 22px; }
  .hero h1 { font-size: 29px; line-height: 34px; }
  .hero .eyebrow { margin-bottom: 8px; }
  .hero .actions { gap: 8px; }
  .hero .text-link { font-size: 11px; }
  .chapter-button span { display: none; }
  h2 { font-size: 30px; line-height: 36px; }
}
@media (prefers-reduced-motion: reduce) {
  video.evidence-art { display: none; }
  .evidence-still { display: block; }
}
@media (max-height: 520px) and (min-width: 600px) {
  .site-head { height: 56px; }
  .site-head .btn { min-height: 36px; padding-block: 8px; }
  .hero { height: calc(100svh - 120px); min-height: 220px; }
  .hero-copy { display: grid; grid-template-columns: 1fr 1fr; column-gap: 28px; bottom: 78px; left: 24px; right: 24px; }
  .hero h1 { font-size: 28px; line-height: 32px; }
  .hero .eyebrow { font-size: 11px; margin-bottom: 6px; }
  .hero-intro { margin: 0; }
  .hero .lede { font-size: 12px; line-height: 18px; max-width: 40ch; }
  .hero .actions { margin-top: 8px; gap: 8px 16px; }
  .hero .actions .btn { font-size: 11px; padding: 9px 12px; min-height: 36px; }
  .hero .text-link { font-size: 11px; min-height: 36px; }
  .hero:not(.is-cinema) .evidence-figure::after { background: linear-gradient(0deg, rgba(0,0,0,.95), rgba(0,0,0,.82) 66%, rgba(0,0,0,0) 95%); }
  .evidence-figure figcaption { left: 24px; top: 8px; padding: 4px 8px; font-size: 10px; line-height: 14px; }
  #sceneKind { font-size: 11px; }
  .film-controls { left: 24px; right: 24px; height: 68px; padding: 0; flex-wrap: nowrap; }
  .film-chapters { width: auto; gap: 20px; }
  .chapter-button { font-size: 11px; padding: 0; }
  .film-tools { position: static; gap: 8px; }
  .film-scrub { width: 100%; bottom: 0; }
  #sources { padding-top: 24px; }
}

/* The homepage presents the brand only; incident-derived media stays private. */
.hero { height: auto; min-height: 540px; padding-block: 88px; border-bottom: 1px solid var(--graphite); }
.hero > .wrap { height: auto; }
.hero-grid { position: relative; height: auto; }
.hero-copy { position: relative; inset: auto; display: block; max-width: 760px; padding-right: 80px; }
.hero h1 { font-size: clamp(44px, 4.5vw, 68px); line-height: 1.1; max-width: 740px; }
.hero-intro { margin-top: 28px; }
.hero .lede { max-width: 47ch; }
.hero .actions { margin-top: 28px; }
.brand-field { position: absolute; right: 0; top: 12%; width: 28%; max-width: 340px; pointer-events: none; color: var(--graphite); }
.brand-aperture { display: block; width: 100%; height: auto; }
@media (max-width: 1000px) { .hero-copy { max-width: 740px; padding-right: 0; } .brand-field { display: none; } }
@media (max-width: 760px) { .hero { padding-block: 62px; min-height: 0; } .hero-copy { left: auto; right: auto; bottom: auto; } .hero h1 { font-size: clamp(34px, 8vw, 48px); line-height: 1.12; } .hero-intro { margin-top: 22px; } .hero .lede { max-width: 40ch; } }