/* ==================================================================
   PERSPECTIVE BUILDING CONSULTANCY
   responsive.css - every media query for the site, in one place

   Breakpoints, largest first:
     1080px  bento collapses
      980px  two-column layouts collapse
      900px  desktop nav swaps for the overlay menu
      760px  service cards stack
      680px  everything single column
   Plus prefers-reduced-motion.

   Load order: style.css -> pages.css -> responsive.css
   ================================================================== */

/* ---------- 1080px ---------- */
@media (max-width:1080px){
  .bento{grid-template-columns:repeat(2,1fr)}
  .b-card,.b-card.w3{grid-column:span 1}
}

/* ---------- 980px ---------- */
@media (max-width:980px){
  .work,.sub-grid{grid-template-columns:1fr 1fr}
  .work-feature{grid-column:span 2}
  .work-feature .img{aspect-ratio:16/7}
  .work-5{grid-template-columns:1fr 1fr}
  .work-5>.proj,.work-5>.proj:nth-last-child(-n+2){grid-column:span 1}
  .work-5>.proj:nth-last-child(-n+2) .img{aspect-ratio:16/11}
  .work-5>.proj:first-child{grid-column:span 2}
  .work-5>.proj:first-child .img{aspect-ratio:16/7}
  .split,.contact-grid,.mv{grid-template-columns:1fr;gap:40px}
  .profile{grid-template-columns:1fr;gap:34px}
  .profile .av-lg{max-width:280px}
  .sectors,.people,.values{grid-template-columns:1fr 1fr}
  .process{grid-template-columns:1fr 1fr}
  .stats{grid-template-columns:1fr 1fr;gap:34px 16px}
  .foot-top{grid-template-columns:1fr 1fr}
  .cs-facts{grid-template-columns:1fr 1fr 1fr}
  .cs-fact:nth-child(4){border-left:none}
  .cs-body{grid-template-columns:1fr;gap:44px}
  .cs-side,.art-side{position:static}
  .art-side{order:-1;max-width:340px}
  .hero-ring{width:min(64vw,380px)}
}

/* ---------- 900px: nav swaps to overlay ---------- */
@media (max-width:900px){
  .top-links{display:none}
  .menu-btn{display:flex}
}

/* ---------- 760px ---------- */
@media (max-width:760px){
  .svc-cards{grid-template-columns:1fr}
}

/* ---------- 680px ---------- */
@media (max-width:680px){
  section{padding:80px 0}
  .wrap{padding:0 20px}
  .work,.news,.people,.sectors,.sub-grid,.values,.process,.work-feature{grid-template-columns:1fr;grid-column:span 1}
  .work-feature .img{aspect-ratio:16/11}
  .work-5{grid-template-columns:1fr}
  .work-5>.proj:first-child{grid-column:span 1}
  .work-5>.proj:first-child .img{aspect-ratio:16/11}
  .offices{grid-template-columns:1fr}
  .office summary{padding:24px 22px;gap:16px}
  .o-chip{width:46px;height:46px;font-size:1.15rem;border-radius:14px}
  .o-city{font-size:1.3rem}
  .office-body{margin:0 22px}
  .office::before{left:22px;width:46px}
  .office:hover::before,.office[open]::before{width:calc(100% - 44px)}
  .head.flex{align-items:center}
  .foot-top{grid-template-columns:1fr}
  .cs-facts{grid-template-columns:1fr 1fr}
  .cs-fact{border-left:none;border-top:1px solid var(--line)}
  .cs-fact:nth-child(-n+2){border-top:none}
  .cs-results{grid-template-columns:1fr 1fr}
  .nav-cta{display:none}
  .hero .wrap{padding-top:130px}
  .hero-meta{gap:24px}
  .intro{padding:120px 0 60px}
  .cform{padding:26px}
  .cs-side{padding:26px}
  .svc-card{padding:34px 28px}
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001s!important;
    animation-iteration-count:1!important;
    transition-duration:.001s!important;
  }
  [data-rev]{opacity:1;transform:none}
  #preloader{animation-delay:0s!important;opacity:0;visibility:hidden}
  .hero-ring{animation:none}
  .hero-ring img{animation:none}
  .mq-track{animation:none}
}

/* ---------- print ---------- */
@media print{
  header,.overlay,#prog,#preloader,.foot-cta,.menu-btn,.socials{display:none!important}
  body{color:#000;background:#fff}
  section{padding:20px 0}
  .wrap{max-width:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em;color:#555}
}