/* ==========================================================================
   responsive.css — breakpoints, then accessibility overrides.
   Loaded last so these rules win without needing !important.
   ========================================================================== */

@media (max-width:1140px){
  .desks{ grid-template-columns:repeat(3,1fr) }
  .pipeline{ grid-template-columns:repeat(3,1fr) }
}

@media (max-width:1080px){
  :root{ --nav-h:76px }
  .menu{ display:none }
  .burger{ display:block }
  .nav__cta .btn{ display:none }

  .hero .wrap{ grid-template-columns:1fr; gap:2.4rem }
  .hero__visual .docket{ position:static; width:100%; margin-top:1.4rem }
  .hero__visual > img{ aspect-ratio:16/10 }

  .team{ grid-template-columns:repeat(2,1fr) }
  .foot__top{ grid-template-columns:1fr 1fr }
}

@media (max-width:900px){
  .about__top,.ind-wrap,.car,.ct-grid,.report{ grid-template-columns:1fr }
  .approach{ grid-template-columns:1fr 1fr }
  .appr{ padding-right:1.2rem; border-bottom:1px solid var(--rule) }
  .appr:nth-child(2n){ border-right:0 }
  .why{ grid-template-columns:1fr 1fr }
  .counters .wrap{ grid-template-columns:1fr 1fr; gap:2rem 1.4rem }
  .split{ grid-template-columns:1fr }
  .outcomes{ grid-template-columns:1fr }
  .svc__inner{ grid-template-columns:1fr; gap:1.2rem }
  .svc__body,.svc__art{ grid-column:1 }
  .svc__art{ max-width:420px }
  .quote__body{ grid-template-columns:1fr }
  .quote__mark{ width:48px; height:44px }
  .sec-head{ grid-template-columns:1fr; align-items:start }
}

@media (max-width:700px){
  .desks{ grid-template-columns:1fr 1fr }
  .pipeline{ grid-template-columns:1fr 1fr }
}

@media (max-width:640px){
  body{ font-size:16px }
  .hero__bg{ opacity:.24 }
  .topbar .wrap{ justify-content:center; text-align:center }
  .topbar__tag{ display:none }
  .topbar__links{ gap:1rem; justify-content:center }

  .approach,.why,.roles,.team,.desks,.pipeline{ grid-template-columns:1fr }
  .appr{ border-right:0 }
  .counters .wrap{ grid-template-columns:1fr; gap:1.6rem }
  .form{ grid-template-columns:1fr }
  .foot__top{ grid-template-columns:1fr; gap:1.8rem }
  .svc__btn{ grid-template-columns:36px 1fr auto; gap:.9rem }
  .hero__meta{ gap:1.3rem }
  .picker{ width:100%; justify-content:stretch }
  .picker button{ flex:1; padding-inline:.8rem; font-size:.85rem }
  .float span{ display:none }
  .float{ padding:.95em }
  .doc__row{ flex-direction:column; gap:.2rem }
  .doc__row dd{ text-align:left }
}

/* --- reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }

  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }

  [data-reveal]{ opacity:1 !important; transform:none !important; clip-path:none !important }
  [data-reveal="wipe"]::after{ display:none }
  .hero h1 .ln > span,
  .hero__sub,.hero__acts,.hero__meta,.hero__visual{ opacity:1 !important; transform:none !important }
  .ticker__track{ animation:none }
  .stage__bar{ transform:scaleX(1) !important }
  .member__photo img{ transform:none !important }
}

/* --- photographs on narrow screens ---------------------------------------- */
@media (max-width:900px){
  .band__bg{ object-position:62% 40% }
  .band::before{ background:linear-gradient(180deg, rgba(13,27,62,.94) 0%, rgba(13,27,62,.86) 100%) }
}
@media (max-width:640px){
  .shot--hero img{ aspect-ratio:16/10 }
  .shot--contact img{ aspect-ratio:16/9 }
}