/* ============================================================
   Responsive — mobile-first content, desktop-down layout tuning.
   Breakpoints: 1280 · 1024 · 760 · 480
   The burger takes over at 1024, not 760 — see the nav note there.
   ============================================================ */

/* ---------------- Small desktop / large tablet ---------------- */
@media (max-width:1280px){
  :root{--t-display:96px;--t-lg:66px}
  .why{gap:var(--s36) var(--s60)}
  .plans{gap:var(--s36)}
  .contact{gap:var(--s60)}
  .footer__cols{gap:var(--s60)}
}

/* The scroll cue is absolutely positioned over the hero. It only has clear
   space on a screen that is both wide and tall; anywhere else it lands on
   top of the hero stats, so it is opt-in rather than opt-out. */
@media (max-width:1024px),(max-height:760px){
  .scrollcue{display:none}
}

/* ---------------- Tablet ---------------- */
@media (max-width:1024px){
  :root{--s120:96px}

  /* Six links plus the brand and the CTA stop fitting below ~960px: the pill
     wrapped to two lines and took the whole bar with it. The menu moves to
     the burger here rather than at 760. */
  .nav__links{
    position:fixed;inset:0;flex-direction:column;justify-content:center;gap:var(--s12);
    padding:var(--s96) var(--s24);
    background:rgba(0,0,0,.97);backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);
    opacity:0;pointer-events:none;transition:opacity .45s ease;
  }
  .nav.is-open .nav__links{opacity:1;pointer-events:auto}
  .nav__pill{display:none}
  .nav__link{
    font-size:30px;text-transform:none;letter-spacing:-0.04em;
    color:#fff;font-weight:var(--fw-r);padding:10px 0;text-align:center;
    opacity:0;transform:translateY(20px);
  }
  .nav.is-open .nav__link{animation:menuIn .6s var(--ease) forwards}
  .nav.is-open .nav__link:nth-child(3){animation-delay:.06s}
  .nav.is-open .nav__link:nth-child(4){animation-delay:.12s}
  .nav.is-open .nav__link:nth-child(5){animation-delay:.18s}
  .nav.is-open .nav__link:nth-child(6){animation-delay:.24s}
  .nav.is-open .nav__link:nth-child(7){animation-delay:.30s}
  @keyframes menuIn{to{opacity:1;transform:none}}
  .nav__link.is-active::after{display:none}
  .burger{display:block}
  /* the overlay is a later sibling, so it paints over the brand and the
     logo disappears while the menu is open — lift it back out */
  .nav.is-open .brand{position:relative;z-index:161}
  .phero{padding-top:calc(var(--nav-h) + var(--s60));padding-bottom:var(--s60)}
  .hero{min-height:auto;padding-top:calc(var(--nav-h) + 30px)}
  .hero__grid{grid-template-columns:1fr;gap:var(--s30)}
  .hero .display{max-width:none}
  .hero .lede{max-width:60ch}
  .work__item{grid-template-columns:1fr;gap:var(--s36)}
  .work__item:nth-child(even) .work__visual{order:0}
  .secHead{grid-template-columns:1fr;gap:var(--s24);align-items:start}
  .steps{grid-template-columns:repeat(2,1fr);gap:var(--s36)}
  .steps::before,.steps__rail{display:none}
  .step{border-top:1px solid var(--hair-2)}
  .plans{grid-template-columns:1fr;gap:var(--s36)}
  .plan__note{margin-top:var(--s36)}
  .contact{grid-template-columns:1fr;gap:var(--s60)}
  .close__grid{grid-template-columns:1fr;gap:var(--s60)}
  .why{gap:var(--s36)}
  .footer__cols{gap:var(--s36)}
}

/* ---------------- Phone ---------------- */
@media (max-width:760px){
  :root{--s120:74px;--s96:56px;--wrap-pad:20px}

  .nav__cta{padding:11px 17px;font-size:12px}

  /* strip: label sits above the marquee instead of beside it */
  .strip{grid-template-columns:1fr;background:none}
  .strip__label{padding:var(--s24) var(--wrap-pad) 0;gap:12px}
  .strip__label::after{height:1px;flex:1;width:auto}
  .ticker{
    padding-block:var(--s18) var(--s24);
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);
    mask-image:linear-gradient(90deg,#000 0,#000 86%,transparent);
  }
  .ticker__track{animation-duration:46s}

  /* shared sub-page shell */
  .demo__pad{padding:var(--s24) var(--s18)}
  .demo__bar{padding:var(--s12) var(--s18)}
  .out{grid-template-columns:1fr}

  .hud{gap:var(--s24)}
  .hero__meta{gap:var(--s24);margin-top:var(--s36)}

  .work__item{padding-block:var(--s60)}
  .work__desc{max-width:none}

  .svc__row{grid-template-columns:38px 1fr 26px;gap:var(--s12)}
  .svc__desc{display:none}
  .svc__row:hover{padding-left:var(--s12)}

  .why{grid-template-columns:1fr}
  .why__item{max-width:none}
  .steps{grid-template-columns:1fr;gap:var(--s30)}

  .form{grid-template-columns:1fr}
  .form__submit{gap:var(--s18)}

  .footer__top{flex-direction:column;gap:var(--s36)}
  .footer__cols{gap:var(--s36) var(--s60)}

  .wa span{display:none}
  .wa{padding:15px;right:16px;bottom:16px}
}

/* ---------------- Small phone ---------------- */
@media (max-width:480px){
  :root{--t-body:17px;--s120:60px;--s96:48px;--wrap-pad:18px}
  .brand__word{font-size:19px}
  /* Brand + CTA + burger stop fitting on a small phone. Tighten the row so
     the burger stays on screen down to 360 (Galaxy/SE territory) instead of
     being pushed past the right edge, where it cannot be tapped at all. */
  .nav__inner{gap:var(--s12)}
  .nav__right{gap:8px}
  .nav__cta{padding:9px 13px;font-size:11px}
  .hero{padding-bottom:var(--s36)}
  .hero__actions{gap:var(--s18)}
  .hero__actions .btn{width:100%;justify-content:center}
  /* three cells no longer fit across a 360px screen without the values
     shrinking below the point of being worth reading — two up, one under */
  .hud{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s18) var(--s24);justify-content:stretch}
  .hud__cell:nth-child(3){grid-column:1/-1}
  .hud__cell:nth-child(3)::before{display:none}
  .hero__meta{flex-direction:column;gap:var(--s18)}
  .frame__inner{padding:var(--s12);aspect-ratio:16/13}
  .frame__kpis{gap:8px}
  .frame__kpi span{font-size:10px}
  .plan__list li{font-size:14px}
  .form__submit .btn{width:100%;justify-content:center}
  .chip{font-size:12px;padding:8px 13px}
  .demo__cta .btn{width:100%;justify-content:center}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:var(--s12)}
}

/* ---------------- Very small phones ----------------
   Below 360 even the tightened row cannot hold brand + CTA + burger.
   The burger wins: without it the menu cannot be opened or closed at all.
   The call to action still reaches the visitor through the menu's Contact
   link and the floating WhatsApp button. */
@media (max-width:359px){
  .nav__cta{display:none}
}

/* ---------------- Short landscape phones ---------------- */
@media (max-height:520px) and (orientation:landscape){
  .hero{min-height:auto;padding-block:calc(var(--nav-h) + 24px) var(--s36)}
  .stage__mark{max-width:230px}
}

/* ---------------- Coarse pointers — drop hover-only motion ---------------- */
@media (hover:none){
  .work__item:hover .frame{transform:none;box-shadow:none}
  .svc__row:hover{padding-left:0}
  .channel:hover{padding-left:0}
}

/* ---------------- Reduced motion ---------------- */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .rv,.fade,.step,.plan,.svc__row,.work__tag{opacity:1;transform:none}
  .line > span{transform:none}
  .frame__line{width:var(--w)}

  /* the marquee stops moving, so let people scroll it by hand instead */
  .ticker{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
  .ticker__track{animation:none!important;transform:none!important}
}

/* ---------------- Print ---------------- */
@media print{
  .nav,.progress,.wa,.strip,.scrollcue,.hero__stage,.hero__atmos,.form{display:none}
  body{background:#fff;color:#000}
  .rv,.fade,.step,.plan,.svc__row,.work__tag,.line > span{opacity:1;transform:none}
}