/* ==========================================================================
   responsive.css — breakpoints
   1080px: nav collapses to burger
   860px : layout collapses to single column
   560px : fine-tuning for small phones
   ========================================================================== */

/* ---------- Laptop / small desktop ---------- */
@media (max-width:1200px){
  .svc-row{grid-template-columns:auto minmax(0,1.1fr) minmax(0,1fr) auto;gap:clamp(16px,2.6vw,34px)}
  .steps{grid-template-columns:repeat(2,1fr);row-gap:36px}
}

/* ---------- Tablet: nav becomes burger ---------- */
@media (max-width:1080px){
  .menu,.search,.socials{display:none}
  .burger{display:grid}
  .blog-grid{grid-template-columns:repeat(2,1fr)}
  .feat-post{grid-template-columns:1fr;gap:26px}
  .contact-grid{grid-template-columns:1fr;gap:40px}
}

/* ---------- Mobile ---------- */
@media (max-width:860px){
  .section{padding:clamp(48px,10vw,80px) 0}
  .section-head{flex-direction:column;align-items:flex-start;gap:22px}
  .section-title{max-width:100%}

  /* Page hero */
  .page-hero{min-height:auto}
  .page-h1{font-size:clamp(2.4rem,12vw,4rem)}

  /* Services */
  .svc-row{grid-template-columns:1fr;gap:20px;padding:26px 24px}
  .svc-main p{max-width:100%}
  .svc-arrow{justify-self:start}
  .steps{grid-template-columns:1fr;row-gap:30px}

  /* Portfolio */
  .pf-grid{grid-template-columns:1fr}
  .pf-circle{display:none}          /* cursor-follow is pointless on touch */
  .pf-media{aspect-ratio:16/10}

  /* Blog */
  .blog-grid{grid-template-columns:1fr;gap:34px}
  .searchbar{max-width:100%}

  /* Contact */
  .form-row{grid-template-columns:1fr;gap:0}
  .form-card{padding:24px 20px}

  /* Footer */
  .footer-grid{grid-template-columns:1fr 1fr;gap:40px 30px}
  .f-intro{grid-column:1 / -1}

  /* CTA */
  .cta{padding:clamp(150px,34vw,220px) 0 clamp(50px,12vw,90px)}

  /* Decorative squares scale down */
  .deco-squares{width:104px;height:104px}
  .dsq.coral,.dsq.black{width:66px;height:66px}
  .dsq.black{left:40px;top:40px}

  .to-top{right:14px;bottom:14px;width:46px;height:46px}
}

/* ---------- Small phones ---------- */
@media (max-width:560px){
  .footer-grid{grid-template-columns:1fr}
  .pf-results{gap:18px}
  .filters{gap:9px}
  .chip{padding:9px 16px;font-size:.9rem}
  .breadcrumb{padding:12px 20px;font-size:.95rem}
  .btn{width:100%;justify-content:center}
}

/* ---------- Touch devices: disable hover-only transforms ---------- */
@media (hover:none){
  .svc-row.in-view:hover{transform:none}
  .pf-card.in-view:hover{box-shadow:none}
}

/* ---------- MOBILE FIXES ---------- */
@media (max-width:820px){
  /* Decorative squares are 150px and pinned top-right with no mobile rule, so
     they sat on top of headings once the text wrapped. They add nothing on a
     phone. */
  .deco-squares{display:none!important}
  /* Safety net: real content always sits above decoration. */
  h1,h2,h3,.page-h1,.section-title,.bridge-title,.services-title,.faq-title,
  .blog-title,.clients-title,.who-title,.team2-title,.stories-title,.tst-title,
  .port-title,.blog2-title,p,.sub{position:relative;z-index:2}
  /* Let a portrait image show in full instead of being letterboxed into a
     landscape box. */
  .bridge-photo{aspect-ratio:auto!important;max-height:none!important}
  .bridge-photo img{object-fit:contain!important;width:100%!important;height:auto!important;background:transparent!important}
}

/* Tap targets: several links and controls were 19-27px tall on a phone, which
   is below the 44px comfortable minimum. Padding is added rather than font size,
   so the visual design is unchanged. */
@media (max-width:820px){
  .read-more,.arrow-link,.b2more{padding:12px 0;min-height:44px;display:inline-flex;align-items:center}
  .tdot,.sdot{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mm-close,.burger,.grid-btn,.to-top{min-width:44px;min-height:44px}
  .socials a,.f-social a{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .mobile-menu a,.mm-links a{padding:12px 0;min-height:44px;display:flex;align-items:center}
  .footer a,.f-col a{padding:6px 0;display:inline-block}
}

@media (max-width:820px){
  /* Footer link lists, the newsletter submit and the contact details were all
     just under a comfortable tap size. */
  .footer li a,.f-col li a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
  .f-news button,.f-news .btn{min-width:44px;min-height:44px;display:inline-flex;align-items:center;justify-content:center}
  .info-block a{padding:11px 0;min-height:44px;display:inline-flex;align-items:center}
}