@media(min-width:1600px){
  .hero-slider{
    height:740px
  }
  .hero-slider__content{
    padding-top:105px
  }
  .hero-slider h1{
    font-size:83px
  }
  .hero-description{
    font-size:13px
  }
  .hero-slider .hero-tagline{
    font-size:17px
  }
}
@media(max-width:1199px){
  .header-inner{
    gap:27px
  }
  .desktop-nav{
    gap:20px
  }
  .header-search input{
    width:110px
  }
  .header-actions{
    gap:12px
  }
  .container{
    padding-inline:25px
  }
  .hero-slider{
    height:620px
  }
  .hero-slider__content{
    padding-top:75px
  }
  .hero-slider h1{
    font-size:65px
  }
  .hero-description{
    max-width:400px
  }
  .channel-grid{
    gap:10px
  }
  .filter-bar{
    flex-wrap:wrap
  }
  .filter-search{
    flex-basis:100%
  }
  .filter-bar select{
    min-width:130px
  }
  .details-grid{
    gap:35px;
    grid-template-columns:240px 1fr
  }
  .admin-form-layout{
    grid-template-columns:1fr 265px
  }
  .stats-grid{
    gap:12px
  }
  .admin-main{
    padding:26px 24px
  }
  .admin-topbar,.demo-banner{
    padding-inline:24px
  }
  .dashboard-columns{
    grid-template-columns:1fr
  }
  .media-grid{
    grid-template-columns:repeat(4,1fr)
  }
}
@media(max-width:991px){
  .desktop-nav{
    display:none
  }
  .mobile-toggle{
    display:inline-flex
  }
  .header-search input{
    width:190px
  }
  .header-inner{
    gap:20px
  }
  .hero-slider{
    height:610px
  }
  .hero-slider h1{
    font-size:62px
  }
  .hero-slide{
    background-position:center,center,60% center
  }
  .hero-description{
    max-width:380px
  }
  .genre-card{
    height:105px
  }
  .section-heading h2{
    font-size:21px
  }
  .channel-grid{
    grid-template-columns:repeat(3,1fr);
    gap:15px
  }
  .continue-grid{
    gap:16px
  }
  .landscape-image{
    aspect-ratio:1.65
  }
  .promo>div:first-child{
    padding:35px
  }
  .promo h2{
    font-size:27px
  }
  .footer-main{
    flex-wrap:wrap
  }
  .footer-main nav{
    gap:20px
  }
  .footer-note{
    display:none
  }
  .details-grid{
    grid-template-columns:200px 1fr;
    gap:30px
  }
  .details-copy h1{
    font-size:37px
  }
  .detail-actions{
    flex-wrap:wrap
  }
  .details-copy{
    padding:0
  }
  .details-poster .poster-title{
    font-size:25px
  }
  .live-player-layout{
    grid-template-columns:1fr
  }
  .channel-sidebar{
    grid-template-columns:repeat(4,1fr)
  }
  .channel-sidebar .channel-card{
    display:block;
    text-align:center
  }
  .live-player-layout aside{
    padding:23px
  }
  .contact-layout{
    gap:35px
  }
  .contact-layout h1{
    font-size:35px
  }
  .contact-form{
    padding:25px
  }
  .admin-shell{
    grid-template-columns:1fr
  }
  .admin-sidebar{
    transform:translateX(-100%);
    transition:var(--transition);
    box-shadow:0 0 30px #0008
  }
  .admin-sidebar.is-open{
    transform:translateX(0)
  }
  .admin-workspace{
    grid-column:1
  }
  .admin-menu-toggle{
    display:inline-flex
  }
  .admin-form-layout{
    grid-template-columns:1fr 280px
  }
  .about-page>h1{
    font-size:56px
  }
  .episode-card{
    grid-template-columns:25px 155px 1fr;
    gap:18px
  }
  .episode-card>.btn{
    grid-column:3;
    justify-self:start;
    padding:6px 12px;
    min-height:34px
  }
  .episode-thumb{
    grid-row:span 2
  }
  .episode-card small{
    font-size:9px
  }
}
@media(max-width:767px){
  .container{
    padding-inline:20px
  }
  .site-header{
    height:70px
  }
  .brand{
    font-size:23px
  }
  .header-actions{
    gap:10px
  }
  .header-search{
    display:none
  }
  .header-actions .avatar{
    width:31px;
    height:31px;
    font-size:10px
  }
  .hero-slider{
    height:590px
  }
  .hero-slider__content{
    padding-top:77px
  }
  .hero-slider h1{
    font-size:57px;
    letter-spacing:-2px;
    max-width:450px
  }
  .hero-slide{
    background-image:linear-gradient(90deg,#080d10e8,#080d1080),linear-gradient(0deg,var(--body-bg),transparent 75%),var(--hero-image);
    background-position:center,center,64% center
  }
  .hero-description{
    max-width:360px
  }
  .hero-tagline{
    font-size:13px
  }
  .hero-slider .eyebrow{
    font-size:8px
  }
  .metadata{
    gap:12px;
    font-size:10px
  }
  .hero-description{
    font-size:11px
  }
  .hero-slider__actions .btn{
    padding:12px 20px;
    font-size:12px
  }
  .hero-side-label,.hero-navigation>span{
    display:none
  }
  .hero-bottom{
    bottom:26px
  }
  .hero-navigation .icon-button{
    width:34px;
    height:34px
  }
  .content-section{
    padding-top:34px
  }
  .categories-section{
    padding-top:15px
  }
  .section-heading{
    margin-bottom:19px
  }
  .section-heading h2{
    font-size:19px
  }
  .section-heading>a{
    font-size:10px;
    gap:5px
  }
  .genre-card{
    height:90px
  }
  .genre-card span{
    font-size:11px;
    left:12px
  }
  .movie-card__title{
    font-size:11px
  }
  .movie-card__meta{
    font-size:8px
  }
  .poster-title{
    font-size:20px
  }
  .live-section{
    margin-top:33px;
    padding-block:28px
  }
  .channel-card h3{
    font-size:10px
  }
  .continue-grid{
    grid-template-columns:repeat(2,1fr);
    gap:20px 15px
  }
  .continue-grid>a:last-child{
    display:none
  }
  .landscape-image{
    aspect-ratio:1.7
  }
  .landscape-card h3{
    font-size:11px
  }
  .landscape-card p{
    font-size:9px
  }
  .promo-wrap{
    padding-top:40px;
    padding-bottom:45px
  }
  .promo{
    grid-template-columns:1.25fr .75fr;
    min-height:280px
  }
  .promo>div:first-child{
    padding:30px 25px
  }
  .promo h2{
    font-size:25px
  }
  .promo p:not(.eyebrow){
    font-size:10px
  }
  .promo .eyebrow{
    font-size:7px;
    letter-spacing:1.6px
  }
  .promo-art{
    right:0;
    gap:12px;
    transform:rotate(12deg) scale(1.7);
    opacity:.35
  }
  .promo-art img{
    width:95%;
    height:240px
  }
  .promo-art img:not(:first-child){
    display:none
  }
  .footer-main{
    display:block
  }
  .footer-main nav{
    margin-top:25px;
    gap:22px;
    flex-wrap:wrap;
    font-size:11px
  }
  .footer-bottom{
    font-size:8px;
    gap:15px
  }
  .footer-bottom span:last-child{
    display:none
  }
  .site-footer{
    padding-top:30px
  }
  .page-section{
    padding-top:24px;
    padding-bottom:45px
  }
  .breadcrumb{
    margin-bottom:30px;
    font-size:10px
  }
  .page-heading{
    align-items:start;
    gap:20px
  }
  .page-heading h1{
    font-size:38px
  }
  .catalog-count{
    font-size:9px;
    margin-top:8px
  }
  .page-heading p{
    font-size:11px
  }
  .filter-bar{
    padding:15px;
    gap:10px
  }
  .filter-bar select{
    min-width:calc(50% - 8px);
    font-size:11px
  }
  .catalog-grid{
    --bs-gutter-x:1rem;
    --bs-gutter-y:1.5rem
  }
  .catalog-grid .poster-title{
    font-size:22px
  }
  .catalog-grid .movie-card__title{
    font-size:12px
  }
  .catalog-grid .movie-card__meta{
    font-size:9px
  }
  .series-feature{
    padding:30px;
    min-height:230px
  }
  .series-feature h2{
    font-size:28px
  }
  .details-backdrop{
    height:400px
  }
  .details-grid{
    grid-template-columns:130px 1fr;
    gap:22px;
    padding-top:10px
  }
  .details-poster .poster-title{
    font-size:18px
  }
  .details-copy h1{
    font-size:29px;
    letter-spacing:-1px
  }
  .details-copy .eyebrow{
    font-size:7px;
    letter-spacing:1px;
    margin-bottom:14px
  }
  .details-copy .metadata{
    gap:8px;
    font-size:9px
  }
  .details-copy>p:not(.eyebrow){
    font-size:11px
  }
  .details-copy .detail-tagline{
    margin-top:20px
  }
  .detail-actions{
    grid-column:span 2;
    gap:8px;
    margin:20px 0
  }
  .detail-actions .btn{
    padding:10px 14px;
    font-size:11px;
    min-height:42px
  }
  .detail-actions>.icon-button{
    width:36px;
    height:36px
  }
  .detail-facts{
    grid-template-columns:1fr;
    gap:13px;
    padding-top:18px
  }
  .detail-facts strong{
    font-size:11px
  }
  .story-section{
    padding-top:25px
  }
  .story-section h2{
    font-size:22px
  }
  .story-section>p:not(.eyebrow){
    font-size:12px
  }
  .cast-grid{
    gap:20px;
    flex-wrap:wrap;
    justify-content:space-between
  }
  .cast-person>span{
    height:52px;
    width:52px;
    font-size:15px
  }
  .cast-person h3{
    font-size:10px
  }
  .cast-person p{
    font-size:9px
  }
  .episode-card{
    grid-template-columns:125px 1fr;
    gap:12px 17px;
    padding:19px 0
  }
  .episode-number{
    display:none
  }
  .episode-card h3{
    font-size:13px
  }
  .episode-card p{
    font-size:10px
  }
  .episode-card>.btn{
    grid-column:2;
    font-size:10px
  }
  .episode-thumb{
    height:90px
  }
  .episodes-section select{
    width:135px;
    font-size:11px
  }
  .watch-info{
    display:block
  }
  .watch-info h1{
    font-size:26px
  }
  .watch-info .btn{
    margin:10px 0 18px
  }
  .watch-section .player-shell{
    margin-inline:-20px;
    border-radius:0
  }
  .demo-note{
    font-size:10px
  }
  .live-feature{
    padding:30px;
    min-height:260px
  }
  .live-feature h2{
    font-size:34px
  }
  .feature-number{
    display:none
  }
  .live-feature .eyebrow{
    font-size:8px
  }
  .live-channel-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .channel-sidebar{
    grid-template-columns:repeat(2,1fr)
  }
  .live-demo-player{
    aspect-ratio:auto;
    min-height:360px;
    padding:25px 18px
  }
  .live-demo-player h1{
    font-size:25px
  }
  .live-demo-player p{
    font-size:10px
  }
  .filter-tabs button{
    font-size:10px;
    padding:7px 12px
  }
  .contact-layout{
    grid-template-columns:1fr;
    gap:35px;
    padding-top:0
  }
  .contact-layout h1{
    font-size:40px
  }
  .contact-note{
    margin-top:25px
  }
  .contact-form{
    padding:25px
  }
  .about-page>h1{
    font-size:45px;
    letter-spacing:-2px
  }
  .about-lead{
    font-size:13px
  }
  .about-image{
    height:260px
  }
  .about-values{
    --bs-gutter-y:1rem
  }
  .not-found h1{
    font-size:26px
  }
  .not-found p{
    font-size:12px
  }
  .admin-main{
    padding:25px 18px
  }
  .admin-topbar{
    padding:0 18px;
    height:65px
  }
  .demo-banner{
    padding:9px 18px;
    font-size:9px
  }
  .admin-page-heading h1{
    font-size:25px
  }
  .admin-page-heading p{
    font-size:10px
  }
  .stats-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .stat-card{
    padding:18px
  }
  .stat-card small{
    font-size:10px
  }
  .stat-card strong{
    font-size:27px
  }
  .stat-card p{
    font-size:8px
  }
  .admin-form-layout{
    grid-template-columns:1fr
  }
  .admin-form-layout .admin-panel{
    padding:22px
  }
  .admin-filters{
    padding:15px;
    flex-wrap:wrap
  }
  .admin-filters input{
    flex:1;
    min-width:130px
  }
  .admin-filters select{
    max-width:140px
  }
  .table td,.table thead th{
    padding-left:16px;
    padding-right:16px
  }
  .media-grid{
    grid-template-columns:repeat(3,1fr);
    padding:15px;
    gap:12px
  }
  .media-item img{
    height:120px
  }
  .admin-page-heading .btn{
    font-size:10px;
    padding:9px 12px
  }
  .admin-form-actions{
    flex-wrap:wrap
  }
  .admin-form-actions .form-feedback{
    width:100%
  }
}
@media(max-width:374px){
  .container{
    padding-inline:16px
  }
  .hero-slider{
    height:575px
  }
  .hero-slider h1{
    font-size:48px
  }
  .hero-slider__content{
    padding-top:65px
  }
  .hero-slider .eyebrow{
    letter-spacing:1.7px
  }
  .hero-description{
    max-width:285px
  }
  .metadata{
    gap:9px
  }
  .hero-slider__actions{
    gap:9px
  }
  .hero-slider__actions .btn{
    padding:11px 16px;
    font-size:11px
  }
  .section-heading h2{
    font-size:17px
  }
  .section-heading>a{
    font-size:9px
  }
  .channel-grid{
    gap:9px
  }
  .channel-card{
    padding-inline:5px
  }
  .channel-card h3{
    font-size:9px
  }
  .channel-logo{
    font-size:26px
  }
  .channel-card p{
    font-size:8px
  }
  .promo>div:first-child{
    padding:25px 20px
  }
  .promo h2{
    font-size:23px
  }
  .promo{
    grid-template-columns:1.6fr .4fr
  }
  .footer-main nav{
    gap:16px
  }
  .details-grid{
    grid-template-columns:95px 1fr;
    gap:15px
  }
  .details-copy h1{
    font-size:25px
  }
  .details-poster .poster-title{
    font-size:14px
  }
  .details-poster .movie-badge{
    font-size:6px;
    left:5px;
    top:5px
  }
  .episode-card{
    grid-template-columns:95px 1fr;
    gap:10px
  }
  .episode-thumb{
    height:80px
  }
  .episode-card p{
    font-size:9px
  }
  .media-grid{
    grid-template-columns:repeat(2,1fr)
  }
  .header-actions{
    gap:6px
  }
  .contact-layout h1{
    font-size:34px
  }
  .watch-section .player-shell{
    margin-inline:-16px
  }
}
@media(max-width:767px){
  .about-values{
    --bs-gutter-x:1.5rem
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    animation:none!important;
    transition:none!important
  }
  .promo-art{
    transform:none
  }
}