@media (max-width: 1100px) {
  .container { width: min(100% - 3rem, var(--container)); }
  .nav-link { padding-inline: .7rem; font-size: .67rem; }
  .nav-cta { margin-left: .2rem; padding-inline: 1rem; }
  .about-grid { gap: 3rem; }
  .footer-grid { gap: 2rem; }
}

@media (max-width: 860px) {
  .container { width: min(100% - 2.5rem, var(--container)); }
  .menu-toggle { display: block; position: relative; z-index: 1001; }
  .nav-menu {
    position: fixed;
    top: 0;
    right: -100%;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: min(86vw, 360px);
    height: 100dvh;
    padding: 7rem 2rem 2rem;
    background: var(--paper);
    box-shadow: -15px 0 40px rgba(24,35,43,.16);
    transition: right .4s cubic-bezier(.2,.75,.25,1), visibility .4s cubic-bezier(.2,.75,.25,1);
    overflow-y: auto;
    visibility: hidden;
    pointer-events: none;
  }
  .nav-menu.active { right: 0; visibility: visible; pointer-events: auto; }
  .nav-link { justify-content: space-between; width: 100%; padding: 1rem 0; border-bottom: 1px solid var(--line); font-size: .8rem; }
  .nav-link::after { left: 0; right: auto; bottom: -.5px; width: 28px; }
  .nav-cta, .nav-cta:hover { margin: 1.2rem 0 0; justify-content: center; border-bottom: 0; }
  .nav-dropdown { border-bottom: 1px solid var(--line); }
  .dropdown-toggle { border-bottom: 0; }
  .dropdown-menu { position: static; display: none; min-width: 0; padding: .25rem 0; border: 0; background: var(--sand); box-shadow: none; opacity: 1; visibility: visible; transform: none; }
  .nav-dropdown:hover .dropdown-menu { display: none; }
  /* Override the desktop translate(-50%) which has higher specificity (0,2,0) than the bare .dropdown-menu rule above */
  .nav-dropdown.open .dropdown-menu { display: block; transform: none; }
  /* On touch/mobile, tapping the toggle button retains :focus-within, keeping the arrow
     permanently rotated via the desktop rule. Neutralise :focus-within here so only
     the .open class drives the arrow direction. */
  .nav-dropdown:focus-within .dropdown-toggle svg { transform: none; }
  .nav-dropdown.open .dropdown-toggle svg { transform: rotate(180deg); }
  .dropdown-menu a { padding: .65rem 1rem; }
  .dropdown-menu a:hover, .dropdown-menu a.active { padding-left: 1.2rem; }
  .hero { min-height: 680px; }
  .hero-content { padding-inline: 1.25rem; }
  .category-card, .category-card:nth-child(n) { grid-column: span 6; min-height: 300px; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .testimonials-grid { grid-template-columns: 1fr; }
  .project-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid, .service-detail, .contact-grid { grid-template-columns: 1fr; }
  /* Reset column order for stacked layout */
  .service-detail.reverse .service-detail-img { order: unset; }
  .service-detail.reverse .service-detail-content { order: unset; }
  .about-img { order: -1; max-width: 620px; }
  .service-detail-img { max-width: 620px; }
  .process-steps, .process-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: repeat(2, 1fr); }
  /* About badge — keep it inside the image container */
  .about-badge { right: 1rem; transform: none; }
  /* Back to top & floating contact — positioned above bottom */
  .floating-contact { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { right: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 560px) {
  .container { width: min(100% - 2rem, var(--container)); }
  .top-bar-left { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; max-width: 75%; }
  .top-bar-right { display: none; }
  .navbar-inner { height: 78px; }
  .logo { width: 115px; }
  .hero { min-height: 620px; }
  .hero::after { background: linear-gradient(90deg, rgba(12,22,28,.9), rgba(12,22,28,.58)); }
  .hero-content h1 { font-size: clamp(2.8rem, 14vw, 4rem); }
  .hero-content .tagline, .hero-content .hero-tagline { font-size: .95rem; }
  .hero-btns, .hero-buttons { align-items: stretch; flex-direction: column; max-width: 280px; }
  .page-hero { min-height: 360px; }
  .page-hero .hero-content h1 { font-size: clamp(2.8rem, 13vw, 4rem); }
  .section, .section-alt { padding: 4.5rem 0; }
  .section-header { margin-bottom: 2.5rem; }
  .section-header h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .services-grid, .project-grid, .process-steps, .process-grid { grid-template-columns: 1fr; }
  .service-card { min-height: 0; padding: 1.7rem; }
  .category-card, .category-card:nth-child(n) { grid-column: span 12; min-height: 250px; }
  .about-img img { height: 360px; }
  /* About badge fully contained at small screen */
  .about-badge { right: 1rem; bottom: 1rem; transform: none; min-width: 140px; }
  .stats-grid { grid-template-columns: 1fr 1fr; gap: 2rem 1rem; }
  .stat-item { padding-left: .8rem; }
  .stat-number { font-size: clamp(2rem, 9vw, 2.8rem); }
  .service-detail { gap: 2rem; padding: 2.7rem 0; }
  .service-detail-content h3 { font-size: 2.2rem; }
  .service-features { grid-template-columns: 1fr; }
  .contact-form-wrap, .contact-info-card { padding: 1.7rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; }
  .footer { padding-top: 4rem; }
  .footer-bottom { margin-top: 3rem; }
  .floating-contact { right: 1rem; bottom: calc(1rem + env(safe-area-inset-bottom, 0px)); }
  .back-to-top { right: 1rem; bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); width: 38px; height: 38px; }
  .map-container { height: 320px; margin-top: 2rem; }
}