/* ==========================================================================
   ATHLISM — responsive.css
   Breakpoints: 1200 / 1000 / 760 / 480  (tested down to 320px)
   ========================================================================== */

@media (max-width:1200px){
  .footer__top{grid-template-columns:1fr 1fr}
  .platform__grid{grid-template-columns:1fr auto}
  .platform__list{grid-column:1/-1;display:grid;grid-template-columns:repeat(2,1fr);column-gap:32px}
  .pillars__list{grid-template-columns:repeat(2,1fr)}
  .pillar:nth-child(3){border-left:0}
  .pillar:nth-child(n+3){border-top:1px solid rgba(255,255,255,.16)}
  .aud__list{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:1000px){
  :root{--header-h:72px}
  .nav,.header-cta{display:none}
  .burger{display:block}
  .brand img{width:38px;height:38px}
  .brand span{font-size:1.45rem}

  /* hero becomes stacked, with a deliberate image collage */
  .hero{min-height:auto}
  .hero__inner{grid-template-columns:1fr;gap:20px;padding-top:clamp(34px,6vh,60px)}
  .hero__title{font-size:clamp(3.6rem,17vw,9rem)}
  .hero__stage{height:min(120vw,720px);min-height:0;margin-top:10px}
  .hc--1{right:0;top:0;width:46%}
  .hc--2{left:0;right:auto;top:12%;width:40%}
  .hc--3{right:3%;bottom:2%;width:38%}
  .hc--4{display:none}
  .hc--cut{left:14%;right:auto;bottom:-2%;width:44%}
  .hero__script{left:46%;top:-2%}
  .hero__foot{padding-top:10px}

  .about-prev__grid{grid-template-columns:1fr}
  .collage{height:min(120vw,760px)}

  /* roles: stacked editorial cards, content always visible */
  .roles{flex-direction:column;height:auto;min-height:0}
  .role,.role.is-active{flex:none;height:min(86vw,400px)}
  .role__tab{display:none}
  .role__body{opacity:1;transform:none;pointer-events:auto}
  .role__img{transform:none}

  .platform__grid{grid-template-columns:1fr;justify-items:start}
  .platform__phone{justify-self:center;order:2;margin-block:12px}
  .platform__list{order:3;grid-template-columns:1fr;width:100%}
  .platform__tri--a{left:20%}

  .story__grid,.contact__grid,.coming__inner{grid-template-columns:1fr}
  .story__side{position:static}
  .svc,.svc--flip{grid-template-columns:1fr}
  .svc--flip .svc__media{order:0}
  .svc__media .pframe{max-width:none;aspect-ratio:4/4.2}
  .svc__no{right:2%;left:auto !important;bottom:-6%}
  .ddd__grid{grid-template-columns:1fr;max-width:520px}
  .trio{grid-template-columns:1fr 1fr}
  .trio__c{display:none}
  .trio__b{aspect-ratio:3/4}

  /* gallery: 2-column stagger */
  .gal{grid-template-columns:repeat(2,1fr);row-gap:28px}
  .gi{grid-column:auto !important;margin-top:0 !important}
  .gi:nth-child(even){margin-top:36px !important}
  .g6,.g14{grid-column:1/-1 !important}
  .gal__cut{display:none}
  .svc-preview{display:none}
}

@media (max-width:760px){
  body{font-size:1rem}
  .hero__pps span+span::before{width:14px}
  .hero__pps,.hero__pps span{gap:10px}
  .hero__scroll{display:none}
  .hero__cta{gap:16px 24px}
  .marquee__row{font-size:clamp(2.6rem,13vw,5rem)}
  .footer__top{grid-template-columns:1fr}
  .footer__bar{flex-direction:column}
  .waitlist{flex-direction:column;border-radius:28px;padding:10px}
  .waitlist input{padding:14px 16px;text-align:center}
  .waitlist .btn{width:100%}
  .aud__list{grid-template-columns:1fr}
  .pillars__list{grid-template-columns:1fr}
  .pillar{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .pillar:first-child{border-top:0}
  .pillar:nth-child(3){border-left:0}
  .svc-row{grid-template-columns:38px 1fr auto}
  .svc-row__a{opacity:1;transform:none;font-size:1rem}
  .strip__row,.strip__row--r{margin-left:-20vw}
  .note-band .wrap{align-items:flex-start}
  .page-hero__word{top:calc(var(--header-h) + 8vw)}
  .badge-rot{left:42%}
}

@media (max-width:480px){
  .btn{padding:.95em 1.4em}
  .hero__stage{height:128vw}
  .hc--cut{width:48%}
  .menu__nav a{font-size:clamp(2.4rem,13vw,3.4rem)}
  .trio{grid-template-columns:1fr}
  .trio__a,.trio__b{aspect-ratio:4/3.4}
  .radios span{padding:9px 14px}
  .cinfo li{gap:14px}
  .cinfo__ic{width:46px;height:46px}
  .footer__mark{font-size:25vw}
}

@media (max-width:360px){
  .hero__title{font-size:3.4rem}
  .brand span{font-size:1.25rem}
  .page-hero__title{font-size:2.9rem}
}

/* coarse pointers: disable hover-only reveals */
@media (hover:none){
  .svc-list:hover .svc-row:not(:hover){opacity:1}
  .svc-row__a{opacity:1;transform:none}
}