.intro-video-section{padding:clamp(48px,7vw,112px) 20px;background:var(--surface,#0c1722);color:var(--text,#f4f8fb)}.intro-video-inner{max-width:1120px;margin:auto}.intro-video-heading{margin-bottom:26px}.intro-video-heading h2{margin:12px 0}.intro-video-heading p,.intro-video-description{opacity:.8;line-height:1.5}.intro-video-frame{aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#0b1e3f;box-shadow:0 22px 65px #0005;border:1px solid #ffffff28}.intro-video-frame video{display:block;width:100%;height:100%;object-fit:contain}.intro-video-chapters{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0}.intro-video-chapters button{appearance:none;border:1px solid #68c7b8;background:#0b504a;color:#fff;border-radius:99px;padding:10px 16px;font:inherit;font-weight:700;cursor:pointer}.intro-video-chapters button:hover,.intro-video-chapters button:focus-visible,.intro-video-chapters button[aria-current=true]{background:#dbf5ec;color:#092b31;outline:2px solid #fff;outline-offset:2px}.intro-video-actions{display:flex;flex-wrap:wrap;gap:12px;margin:16px 0}.intro-video-transcript{margin-top:20px;border-top:1px solid #ffffff36;padding-top:14px}.intro-video-transcript summary{cursor:pointer;font-weight:700}.intro-video-transcript p{max-width:850px;line-height:1.7}@media(max-width:760px){.intro-video-section{padding:30px 16px}.intro-video-frame{border-radius:10px}.intro-video-chapters button{font-size:13px;padding:8px 10px}}

.intro-video-frame{position:relative}
.intro-play-sound{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;max-width:calc(100% - 24px);padding:13px 20px;border:2px solid #fff;border-radius:999px;background:#073e4c;color:#fff;font:inherit;font-weight:800;box-shadow:0 6px 25px #0009;cursor:pointer}
.intro-play-sound[hidden]{display:none!important}
.intro-play-sound:focus-visible{outline:3px solid #ffd977;outline-offset:3px}
/* The phone welcome screen uses the same inset card rhythm as the portfolio. */
@media(max-width:760px){
  html.mobile-app #main #introduction{padding:18px 14px 22px!important;background:var(--bg);overflow:visible}
  html.mobile-app #introduction .intro-video-inner{padding:20px 16px 16px;border:1px solid var(--border-strong);border-radius:22px;background:var(--surface);box-shadow:0 10px 30px var(--shadow);min-width:0}
  html.mobile-app #introduction .intro-video-heading{margin:0 0 18px}
  html.mobile-app #introduction .section-kicker{font-size:10px;letter-spacing:.11em}
  html.mobile-app #introduction .intro-video-heading h2{font-size:clamp(23px,6.2vw,32px)!important;line-height:1.12;margin:10px 0!important;letter-spacing:-.04em}
  html.mobile-app #introduction .intro-video-heading p{margin:0;font-size:14px!important;line-height:1.55;color:var(--body);opacity:1}
  html.mobile-app #introduction .intro-video-frame{border-radius:13px;border-color:var(--border-strong);box-shadow:0 7px 20px var(--shadow)}
  html.mobile-app #introduction .intro-video-description{margin:18px 0 9px;font-size:11px!important;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);opacity:1}
  html.mobile-app #introduction .intro-video-chapters{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:7px;margin:0}
  html.mobile-app #introduction .intro-video-chapters button{grid-column:span 2;min-height:42px;padding:9px 4px;border-radius:10px;border:1px solid var(--border-strong);background:var(--surface-elevated);color:var(--body);font-size:11px;font-weight:750;line-height:1.2;outline:none}
  html.mobile-app #introduction .intro-video-chapters button:nth-last-child(-n+2){grid-column:span 3}
  html.mobile-app #introduction .intro-video-chapters button[aria-current=true]{background:var(--accent-wash);color:var(--accent-strong);border-color:var(--accent-strong);box-shadow:inset 0 0 0 1px var(--accent-strong)}
  html.mobile-app #introduction .intro-video-chapters button:focus-visible{outline:2px solid var(--accent-strong);outline-offset:2px}
  html.mobile-app #introduction .intro-video-actions{margin:14px 0 0}
  html.mobile-app #introduction .intro-video-actions a{width:100%;justify-content:center;min-height:44px;border-radius:11px;font-size:13px}
  html.mobile-app #introduction .intro-video-transcript{margin:14px 0 0;padding:0;border-top:1px solid var(--border-strong)}
  html.mobile-app #introduction .intro-video-transcript summary{padding:14px 0 0;color:var(--muted);font-size:12px;line-height:1.4}
  html.mobile-app #introduction .intro-video-transcript p{font-size:14px;line-height:1.7;color:var(--body);margin:14px 0 0}
  html.mobile-app #introduction .intro-play-sound{width:max-content;max-width:90%;padding:10px 13px;font-size:11px}
}
@media(max-width:360px){.intro-video-section{padding-top:18px}.intro-video-heading{margin-bottom:12px}.intro-video-heading h2{margin:5px 0}.intro-video-heading p{font-size:.84rem;line-height:1.35}.intro-video-description{margin:8px 0}.intro-video-chapters{gap:6px;margin:8px 0}.intro-video-chapters button{padding:6px 8px;font-size:12px}.intro-video-actions{margin:8px 0}.intro-play-sound{font-size:.75rem;padding:9px 12px}}