/* Tanwen hero film (task #333). Loaded after depth-v22.css. */
.tanwen-site .hero .film-scene{display:grid;place-items:center;min-height:0;aspect-ratio:auto;padding:24px 0}
.film-frame{position:relative;margin:0;height:min(78vh,760px);aspect-ratio:9/16;max-width:100%;border-radius:22px;overflow:hidden;background:#e8eadd;box-shadow:0 20px 50px #203b3022}
.film-video{display:block;width:100%;height:100%;object-fit:cover;background:#e8eadd}
.film-controls{position:absolute;right:14px;bottom:14px;display:flex;gap:10px}
.film-controls button{width:46px;height:46px;border-radius:50%;border:1px solid #1d2f2866;background:#fffdf6ee;color:#1d2f28;display:grid;place-items:center;cursor:pointer;padding:0}
.film-controls button:hover{background:#fff}
.film-controls button:focus-visible{outline:3px solid #4b6b58;outline-offset:3px}
.film-controls svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.film-controls .on-mark,.film-controls .play-mark{display:none}
.film-sound[aria-pressed="true"] .off-mark{display:none}
.film-sound[aria-pressed="true"] .on-mark{display:inline}
.film-pause[aria-pressed="true"] .pause-mark{display:none}
.film-pause[aria-pressed="true"] .play-mark{display:inline}
/* The exchange card keeps the hero's own sizing rules at every width: the band carries the .hero class. */
.conversation-band.hero{display:block;min-height:0}
@media(min-width:601px){.conversation-band.hero .scene{margin:0 auto 35px;max-width:760px}}
@media(max-width:900px){.tanwen-site .hero .film-scene{margin:0 5% 24px;padding:0}.film-frame{height:auto;width:min(100%,360px)}}
@media(max-width:600px){.tanwen-site .hero .film-scene{min-height:0;aspect-ratio:auto}}
/* Revision 3 (Huxley polish pass): controls sit below the film so they never cover the film's own tanwen.ai pill or caption; hairline border on the film. */
.film-frame{overflow:visible;background:none;box-shadow:none;margin-bottom:60px}
.film-video{border-radius:22px;box-shadow:0 20px 50px #203b3022;border:1px solid #1d2f2829;box-sizing:border-box}
.film-controls{right:0;bottom:-58px}
@media(min-width:901px){.film-frame{height:clamp(420px,calc(100vh - 250px),760px)}}
@media(max-width:900px){.tanwen-site .hero .film-scene{padding-bottom:18px}.film-controls{right:12px}}

/* Revision 8: widescreen film for desktop. 901-1199px: headline and lede in two columns, film wide beneath. 1200px and up: text column left, film right, all above the fold. Below 901px the tall film layout above applies unchanged. */
@media(min-width:901px){
  .tanwen-site .hero:not(.conversation-band){display:block!important;padding:0 6% 0!important}
  .tanwen-site .hero:not(.conversation-band) .intro{display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);column-gap:48px;align-items:end;max-width:none!important;padding:26px 0 22px!important;margin:0!important}
  .tanwen-site .hero:not(.conversation-band) .intro .eyebrow{grid-column:1/-1;margin:0 0 12px!important}
  .tanwen-site .hero:not(.conversation-band) .intro h1{grid-column:1;margin:0!important;font-size:clamp(40px,5vw,66px)!important}
  .tanwen-site .hero:not(.conversation-band) .intro .lede{grid-column:2;margin:0 0 6px!important;max-width:none!important}
  .tanwen-site .hero:not(.conversation-band) .intro .signature{grid-column:2;margin-top:12px!important}
  .tanwen-site .hero:not(.conversation-band) .film-scene{display:block;margin:0 auto 24px!important;padding:0 0 66px;width:100%;background:none;border:0;border-radius:0;overflow:visible}
  .film-frame{height:auto!important;width:100%;aspect-ratio:16/9;margin-bottom:0!important}
  .film-video{border-radius:18px}
  .film-controls{right:0;bottom:-58px;flex-direction:row}
}
@media(min-width:1200px){
  .tanwen-site .hero:not(.conversation-band){display:grid!important;grid-template-columns:minmax(300px,.34fr) minmax(0,.66fr);column-gap:56px;align-items:center;padding:20px 6% 0!important}
  .tanwen-site .hero:not(.conversation-band) .intro{display:block!important;padding:0!important}
  .tanwen-site .hero:not(.conversation-band) .intro .eyebrow{margin:0 0 16px!important}
  .tanwen-site .hero:not(.conversation-band) .intro h1{font-size:clamp(40px,3.7vw,68px)!important}
  .tanwen-site .hero:not(.conversation-band) .intro .lede{margin:22px 0 0!important}
  .tanwen-site .hero:not(.conversation-band) .intro .signature{margin-top:22px!important}
  .tanwen-site .hero:not(.conversation-band) .film-scene{margin:0 0 24px!important;width:100%}
}