/* ============================================================
   MOBILE STYLES
   Loaded after styles.css. Everything for tablets, phones and
   touch screens lives here; desktop styles stay in styles.css.
   ============================================================ */

/* Touch screens: no "stuck" hover lifts after tapping */
@media (hover:none){
  .btn:hover,.project:hover .shot,.project:hover img,.svc-block:hover .svc-top svg{transform:none;box-shadow:none}
  .logo:hover img{transform:none}
}

/* ------------------------------------------------------------
   Tablets and below (≤ 900px): hamburger menu, stacked services
   ------------------------------------------------------------ */
@media (max-width:900px){
  .menu-btn{display:inline-flex}
  .right{gap:12px}

  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--ink);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;max-height:calc(100vh - 76px);max-height:calc(100dvh - 76px);overflow-y:auto;box-shadow:0 20px 40px rgba(0,0,0,.5)}
  .nav.open{display:flex}
  .nav a:not(.btn){padding:14px 0;border-bottom:1px solid var(--line);font-size:17px}
  .nav .btn{margin-top:16px;min-height:52px}

  .svc-block{grid-template-columns:1fr;gap:32px;padding-top:64px;padding-bottom:64px}
}

/* ------------------------------------------------------------
   Phones (≤ 600px)
   ------------------------------------------------------------ */
@media (max-width:600px){
  body{font-size:16px}
  .wrap{padding-left:20px;padding-right:20px}
  section{scroll-margin-top:72px}
  html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 72px)}
  .sec{padding-top:72px;padding-bottom:72px}
  .head{gap:12px}

  /* Header */
  .bar{min-height:64px;gap:12px}
  .nav{max-height:calc(100vh - 64px);max-height:calc(100dvh - 64px)}

  /* Hero */
  .hero{padding-top:64px;padding-bottom:72px;gap:48px}
  .hero-copy{gap:22px}
  .hero p,.page-hero p{font-size:17px}
  .bars{max-width:100%;gap:14px}
  .bars span{height:40px}
  .page-hero{padding-top:64px;padding-bottom:64px}

  /* Full-width buttons, easier to tap */
  .ctas .btn,.cta-inner .btn,.svc-body .btn,.all-link .btn,.form-box button[type="submit"]{width:100%}

  /* Services page */
  .svc-block{gap:24px}
  .svc-side .lead{font-size:18px}
  .svc-body > p,.checks li,.ideal{font-size:16px}
  .callout{font-size:18px;padding:18px}
  .jump a{padding:8px 12px;font-size:12px}

  .mail-list li{grid-template-columns:48px 1fr;column-gap:12px;padding:20px 0}
  .mail-list li::before{font-size:30px}
  .mail-list h3{font-size:20px}
  .mail-list p{font-size:16px}

  .next-grid{margin-top:32px}
  .next-grid > div{padding:28px 22px}
  .next-grid h3{font-size:21px}

  .faq summary{font-size:18px;padding:20px 0;gap:16px}
  .faq details p{font-size:16px}

  /* Home sections */
  .steps{gap:32px;margin-top:40px}
  .why,.mail-grid,.faq-wrap,.contact-page,.contact-inner{gap:40px}
  .work-grid{margin-top:40px;gap:40px}

  /* Contact page */
  .info-card{padding:26px 20px}
  .big-link{font-size:20px}
  .form-box{padding:28px 20px}
  .form-title{font-size:24px}
  .sent{min-height:260px}
  .sent h3{font-size:26px}
  .details a{word-break:break-word}

  /* Footer */
  .footer{flex-direction:column;align-items:flex-start;gap:20px;padding-top:40px;padding-bottom:40px}
  .footer nav{gap:12px 20px}
  .footer nav a{padding:6px 0}
}

/* ------------------------------------------------------------
   Small phones (≤ 400px: iPhone SE, older Androids)
   ------------------------------------------------------------ */
@media (max-width:400px){
  .wrap{padding-left:16px;padding-right:16px}
  .logo img{height:24px}
  .bar{gap:8px}
  .right{gap:8px}
  .lang button{min-width:38px;padding:0 8px;font-size:12px}
  .menu-btn{width:42px;height:42px}
  .nav{padding-left:16px;padding-right:16px}
  .hero h1{font-size:38px}
  .page-hero h1{font-size:40px}
  h2{font-size:30px}
  .svc-side h2{font-size:28px}
  .contact h2{font-size:32px}
  .form-box{padding:24px 16px}
}