/* Only the video pause control. Original header typography and styling are unchanged. */
.sd-film-control { position:absolute; z-index:3; right:20px; bottom:18px; display:flex; align-items:center; gap:7px; min-height:44px; padding:8px 13px; border:1px solid rgba(255,255,255,.65); border-radius:30px; background:rgba(3,46,67,.6); color:#fff; font:600 11px 'Montserrat',sans-serif; cursor:pointer; }
.sd-film-control[hidden] { display:none; }
.sd-film-control:focus-visible { outline:3px solid white; outline-offset:3px; }
.sd-film-icon { font-size:17px; }
/* Keep the faces in the upper portion of the portrait footage visible. */
.hero video.hero-bg { object-position:50% var(--video-focus, 14%); }
/* Wide screens: preserve the complete portrait frame, including hand gestures.
   The existing blue overlay also covers the matching background fill. */
@media (min-width: 961px) {
  .hero { background-color:#34576a; }
  .hero video.hero-bg { object-fit:contain; object-position:right center; }
}
@media (min-width: 961px) {
  .hero video.hero-bg { left:auto; width:40%; }
  .hero > .container { width:100%; }
  .hero-content { max-width:min(640px, 55%); }
}
/* Blend the portrait footage into the blue desktop background without cropping. */
@media (min-width: 961px) {
  .hero video.hero-bg {
    width:auto; max-width:40%; aspect-ratio:4/5;
    -webkit-mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 28%, #000 38%, #000 100%);
    mask-image:linear-gradient(to right, transparent 0%, rgba(0,0,0,.25) 8%, rgba(0,0,0,.6) 18%, rgba(0,0,0,.9) 28%, #000 38%, #000 100%);
  }
}
/* Keep the desktop composition; mobile separates copy and footage. */
.sd-hero-media { display:contents; }
.sd-mobile-intro { display:none; }
@media (max-width:960px) {
  .hero { display:flex; flex-direction:column; align-items:stretch; min-height:0; padding:0; background:#193c50; }
  .hero > .container { order:0; width:100%; padding:26px 20px 24px; }
  .hero-content { max-width:100%; animation:none; text-shadow:none; }
  .hero h1 { min-height:0; margin:0 0 22px; }
  .hero-content > .lead { display:none; }
  .hero-cta { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .hero-cta .btn { display:flex; align-items:center; justify-content:center; padding:12px 10px; min-height:48px; font-size:12px; }
  .sd-hero-media { order:1; position:relative; display:block; width:100%; background:#edf2f4; }
  .hero video.hero-bg { position:static; display:block; width:100%; height:auto; aspect-ratio:4/5; max-width:none; object-fit:contain; object-position:center; mask-image:none; -webkit-mask-image:none; }
  .hero-overlay { display:none; }
  .sd-film-control { left:14px; right:auto; bottom:14px; }
  .sd-mobile-intro { order:2; display:block; padding:24px 20px; background:#fff; color:#374852; font-size:14px; line-height:1.7; }
}
@media (min-width:521px) and (max-width:960px) {
  .sd-hero-media { max-width:520px; align-self:center; }
  .hero > .container, .sd-mobile-intro { padding-left:max(24px,calc((100% - 680px)/2)); padding-right:max(24px,calc((100% - 680px)/2)); }
}
/* Mobile: headline/actions over the full portrait video; description below. */
@media (max-width:960px) {
  .hero { display:grid; grid-template-columns:minmax(0,1fr); grid-template-rows:auto auto; }
  .sd-hero-media { grid-column:1; grid-row:1; order:initial; width:100%; max-width:none; align-self:stretch; }
  .hero > .container { grid-column:1; grid-row:1; order:initial; z-index:2; align-self:end; padding:24px 20px 76px; }
  .hero-content { max-width:100%; }
  .hero h1 { margin-bottom:20px; }
  .sd-hero-media .hero-overlay { display:block; background:linear-gradient(to bottom,rgba(3,46,67,.04) 20%,rgba(3,46,67,.25) 45%,rgba(3,46,67,.85) 100%); pointer-events:none; }
  .sd-mobile-intro { grid-column:1; grid-row:2; order:initial; }
  .sd-film-control { z-index:3; }
}
/* Size the desktop portrait from hero height, avoiding letterboxing. */
@media (min-width:961px) {
  .hero video.hero-bg { height:100%; width:auto; max-width:none; aspect-ratio:4/5; }
}

/* Tablet: edge-to-edge footage with a square composition and upper-frame focus. */
@media (min-width:521px) and (max-width:960px) {
  .sd-hero-media { height:auto; aspect-ratio:1/1; background:#193c50; }
  .hero video.hero-bg { height:100%; width:100%; aspect-ratio:auto; object-fit:cover; object-position:50% 20%; }
  .hero > .container { max-width:680px; justify-self:center; }
}
@media (max-width:520px) {
  .hero-cta { align-items:stretch; }
  .hero-cta .btn { height:100%; box-sizing:border-box; }
}

/* Discreet icon-only playback control; keep the 44px touch target. */
.sd-film-control { width:44px; height:44px; padding:0; gap:0; justify-content:center; border-radius:50%; border-color:rgba(255,255,255,.4); background:rgba(3,46,67,.45); }
.sd-film-control .sd-film-label { display:none; }
.sd-film-control .sd-film-icon { line-height:1; }

/* Tablet: keep the introduction with the headline and actions over the video. */
@media (min-width:521px) and (max-width:960px) {
  .hero { grid-template-rows:auto; }
  .hero-content > .lead { display:block; color:#fff; margin:0 0 24px; font-size:16px; line-height:1.65; }
  .sd-mobile-intro { display:none; }
  .sd-hero-media .hero-overlay { background:linear-gradient(to bottom,rgba(3,46,67,.04) 15%,rgba(3,46,67,.18) 38%,rgba(3,46,67,.78) 68%,rgba(3,46,67,.94) 100%); }
}

/* Tablet follows the desktop left-copy/right-footage composition. */
@media (min-width:521px) and (max-width:960px) {
  .sd-hero-media { height:clamp(600px,85vw,760px); aspect-ratio:auto; background:#193c50; overflow:hidden; }
  .hero video.hero-bg { position:absolute; right:0; left:auto; height:100%; width:auto; aspect-ratio:4/5; object-fit:contain; object-position:right center;
    -webkit-mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.25) 12%,rgba(0,0,0,.7) 28%,#000 46%);
    mask-image:linear-gradient(to right,transparent,rgba(0,0,0,.25) 12%,rgba(0,0,0,.7) 28%,#000 46%); }
  .hero > .container { width:100%; max-width:none; align-self:center; padding:48px 32px 64px; }
  .hero-content { max-width:55%; }
  .hero h1 { font-size:clamp(32px,4.7vw,45px); line-height:1.15; }
  .hero-content > .lead { font-size:15px; line-height:1.65; }
  .hero-cta { display:flex; flex-wrap:wrap; gap:12px; }
  .hero-cta .btn { flex:0 1 auto; padding:12px 18px; }
  .sd-hero-media .hero-overlay { background:linear-gradient(to right,rgba(3,46,67,.78),rgba(3,46,67,.48) 42%,rgba(3,46,67,.06) 80%); }
}