/* Shared controls and a layout designed for narrow screens. */
.portfolio-play{position:absolute;inset:50% auto auto 50%;z-index:5;display:grid;place-items:center;width:58px;height:58px;padding:0;border:1px solid #ffffff7a;border-radius:50%;background:#ffffffed;color:#08090d;transform:translate(-50%,-50%);box-shadow:0 4px 30px #0006;cursor:pointer;touch-action:manipulation}
.portfolio-play svg{width:21px;height:21px;margin-left:3px;fill:currentColor}
.portfolio-play[hidden]{display:none!important}
.portfolio-play:focus-visible{outline:3px solid #729dff;outline-offset:5px}
.portfolio-video-error{position:absolute;left:16px;right:16px;bottom:54px;z-index:6;padding:10px 14px;border-radius:10px;background:#151519e8;color:#fff;font-size:14px;text-align:center;text-decoration:underline}
@media(max-width:900px){
  html{scroll-padding-top:0}
  section{scroll-margin-top:88px}
  .site-header,.contact-header{position:fixed;inset:0 0 auto;z-index:80;background:#08090deb;border-bottom:1px solid #ffffff14;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
  .site-nav{width:calc(100% - 36px);height:72px;padding:0;gap:12px}
  .site-nav .brand{font-size:14px;white-space:nowrap}
  .nav-actions{gap:8px;flex-shrink:0}
  .nav-cta{min-height:44px;padding:10px 14px;font-size:12px;gap:10px}
  .menu-toggle{width:44px;height:44px;flex:0 0 44px;cursor:pointer;touch-action:manipulation}
  .mobile-links:not([hidden]){top:calc(72px + 8px);left:18px;right:18px;gap:0;padding:8px 16px;max-height:calc(100svh - 104px);overflow-y:auto;background:#101116;box-shadow:0 16px 50px #0007}
  .mobile-links a{display:flex;align-items:center;min-height:50px;padding:12px 4px;font-size:16px}
  .mobile-links a+a{border-top:1px solid #ffffff14}
  .trailer-showcase-grid{grid-template-columns:minmax(0,1fr);gap:30px}
  .trailer-sticky{position:static;top:auto;padding:0}
  .trailer-card{position:relative;top:auto;transform:none;z-index:auto;min-width:0}
  .trailer-stack{gap:22px}
  .inquiry-grid{display:flex;flex-direction:column;gap:32px}
  .inquiry-section .inquiry-form{order:-1;width:100%}
  .inquiry-sidebar{width:100%}
  .inquiry-globe{display:none}
  .inquiry-section .inquiry-form input:not([type=hidden]),.inquiry-section .inquiry-form textarea{font-size:16px;scroll-margin-block:104px 80px}
  .inquiry-section .inquiry-form input:not([type=hidden]){height:48px}
  .inquiry-section .inquiry-submit{min-height:48px}
}
@media(max-width:700px){
  .shell{width:calc(100% - 36px)}
  .personal-hero,.personal-hero-stage{min-height:100svh}
  .personal-hero-stage{padding:112px 18px 66px}
  .personal-hero-copy{width:100%;max-width:520px;margin:0;animation:none}
  .case-pill{min-height:38px;margin-bottom:24px;font-size:11px}
  .personal-hero-copy h1{font-size:clamp(42px,12.5vw,64px);line-height:1.02;letter-spacing:-.06em;word-spacing:.02em}
  .personal-hero-copy h1 br{display:block}
  .personal-hero-description{max-width:34ch;font-size:16px;line-height:1.6;margin-top:24px;padding:0 4px}
  .personal-hero-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:370px;margin:28px auto 0}
  .personal-hero-actions .hero-button{width:100%;min-height:48px;padding-inline:12px;gap:10px;font-size:11px;letter-spacing:.04em;white-space:nowrap}
  .trailer-showcase{padding:66px 0 76px}
  .trailer-sticky h2{font-size:clamp(44px,12vw,64px);line-height:.98}
  .trailer-index{margin-bottom:18px;font-size:10px}
  .trailer-sticky>p{font-size:15px;line-height:1.6}
  .trailer-sticky .hero-button{width:max-content;min-height:46px;margin-top:20px}
  .trailer-card{border-radius:12px;box-shadow:0 8px 25px #0004}
  .portfolio-play{width:50px;height:50px}
  .viral-edits-section{padding:70px 0 76px}
  .viral-edits-heading h2{font-size:clamp(34px,9.2vw,52px);line-height:1.06;letter-spacing:-.045em}
  .viral-edits-heading p{font-size:15px;line-height:1.6;margin-top:22px}
  .short-grid{grid-template-columns:minmax(0,1fr);max-width:380px;gap:24px;margin-top:32px}
  .short-grid .viral-video-card{width:100%;min-width:0;border-radius:14px;transform:none}
  .short-grid .instagram-card{min-height:0;height:auto;aspect-ratio:auto}
  .instagram-card iframe{flex:none;width:100%;height:620px}
  .instagram-open{min-height:46px;font-size:12px;padding:12px 14px}
  .inquiry-section{padding:72px 0}
  .contact-header+main .inquiry-section{padding-top:116px}
  .inquiry-container{padding:0 18px}
  .inquiry-intro{gap:14px;margin-bottom:30px}
  .inquiry-intro h1,.inquiry-intro h2{font-size:clamp(34px,9.8vw,44px);line-height:1.1}
  .inquiry-intro>p{font-size:16px;line-height:1.6}
  .inquiry-section .inquiry-form{padding:22px;gap:20px;border-radius:16px}
  .inquiry-row{grid-template-columns:minmax(0,1fr);gap:20px}
  .inquiry-section .inquiry-form label{font-size:11px}
  .inquiry-section .inquiry-form textarea{min-height:140px}
  .inquiry-section .inquiry-submit{width:100%;justify-content:center}
  .inquiry-section .inquiry-status,.inquiry-fallback{font-size:13px}
  .inquiry-social{width:46px;height:46px}
  .inquiry-email{font-size:14px}
  .faq-frame{width:calc(100% - 36px);min-height:0;padding:72px 0}
  .faq-wrap{gap:30px}
  .faq-heading{font-size:38px}
  .faq-item button{min-height:58px;padding:17px 16px;font-size:14px}
  .faq-answer p{font-size:14px;line-height:1.65;padding:0 18px 18px}
  .footer-cta,.footer-cta-frame{min-height:420px}
  .footer-cta-frame{width:calc(100% - 36px);padding:70px 18px}
  .footer-cta-content{gap:24px}
  .footer-cta-content h2{font-size:36px}
  .footer-cta-content p{font-size:16px;line-height:1.6}
  .footer-call-button{min-height:48px;font-size:14px}
  .site-footer-inner{padding-top:52px}
  .site-footer .footer-columns{gap:30px 22px;padding:0 0 36px;grid-template-columns:1fr 1fr}
  .footer-brand{margin-bottom:16px}
  .footer-brand-column p,.footer-link-column a,.footer-link-column span{font-size:14px;line-height:1.7}
  .footer-link-column a{display:block;padding:5px 0}
  .footer-social-links a{display:inline-flex;align-items:center;min-height:44px;font-size:14px}
  .footer-wordmark{margin-top:20px;min-height:130px}
  .footer-wordmark-meta{font-size:8px}
}
@media(max-width:350px){
  .site-nav{width:calc(100% - 28px);gap:8px}
  .site-nav .brand{font-size:12px}
  .nav-cta{padding-inline:11px;font-size:11px;gap:7px}
  .personal-hero-actions{grid-template-columns:1fr;max-width:250px}
  .inquiry-section .inquiry-form{padding:18px}
}
@media(hover:none){.hero-button:hover,.viral-video-card:hover,.short-grid .viral-video-card:hover,.footer-call-button:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.personal-hero-copy{animation:none}}
