/* =====================================================
   SANCTA LIMITED — RESPONSIVE STYLESHEET
   Breakpoints: 1200px (laptop) / 992px (tablet-landscape)
   768px (tablet) / 576px (mobile)
===================================================== */

/* =====================================================
   LAPTOP  (<=1200px)
===================================================== */
@media (max-width: 1200px) {
    :root { --section-padding: 5.5rem 0; }

    .logo img { height: 52px; }

    .service-highlights { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
    .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.large { grid-column: span 2; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }

    .hero { padding-bottom: 5rem; }
}

/* =====================================================
   TABLET LANDSCAPE (<=992px)
===================================================== */
@media (max-width: 992px) {
    /* Safari fix 1: backdrop-filter makes the header a "containing block",
       which breaks how the fixed-position menu panel is anchored/stacked
       in Safari and can make it untappable. The header is 96% opaque
       anyway, so we drop the blur on mobile and bump opacity instead.
       Safari fix 2: Safari mis-computes tap targets for fixed elements
       nested inside a sticky ancestor — the menu renders correctly but
       taps on its links miss. Switching the header to fixed (visually
       identical) removes the sticky ancestor. Body padding compensates
       for the header leaving the document flow; main.js keeps
       --header-height up to date on load/resize. */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
    }

    body {
        padding-top: var(--header-height, 84px);
    }

    .menu-btn { display: block; }

    nav {
        position: fixed;
        top: 0; right: -100%;
        width: min(320px, 80%);
        height: 100vh;
        background: var(--color-navy);
        flex-direction: column;
        align-items: flex-start;
        padding: 6rem 2rem 2rem;
        transition: right var(--transition);
        z-index: 1100;
    }
    nav.open { right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.2); }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        width: 100%;
    }
    .nav-links a { color: var(--color-white); font-size: 1.05rem; }
    .nav-links a.active,
    .nav-links a:hover { color: var(--color-gold); }

    .navbar-enquiry-desktop { display: none; }
    .nav-enquiry-mobile {
        display: inline-flex;
        margin-top: 2rem;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.6);
        cursor: pointer; /* iOS Safari won't fire click events on a plain div without this */
        /* Must sit BELOW the header (z-index 1000): the nav panel and close
           button live inside the header's stacking context, so an overlay
           above 1000 would paint over the open menu and block its clicks. */
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    .nav-overlay.show { opacity: 1; visibility: visible; }

    .logo img { height: 52px; }

    .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-image { order: -1; max-width: 480px; margin: 0 auto; }
    .about-features { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

    .mv-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }

    .service-detail,
    .service-detail.reverse { grid-template-columns: 1fr; }
    .service-detail.reverse .service-detail-image { order: 0; }
}

/* =====================================================
   TABLET (<=768px)
===================================================== */
@media (max-width: 768px) {
    :root { --section-padding: 4.5rem 0; }

    .logo img { height: 52px; }

    .hero { padding-bottom: 4.5rem; }
    .hero-services { margin-top: -3rem; }
    .service-highlights { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .highlight-card { padding: 1.5rem 1.2rem; }

    .services-grid,
    .why-grid,
    .values-grid,
    .process-grid,
    .testimonial-grid { grid-template-columns: 1fr; }

    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; text-align: left; }

    .form-row { grid-template-columns: 1fr; }
    .contact-info-card,
    .contact-form-wrapper { padding: 1.8rem; }
}

/* =====================================================
   MOBILE (<=576px)
===================================================== */
@media (max-width: 576px) {
    .container { padding: 0 1.2rem; }

    .navbar { padding: 0.9rem 1.2rem; }
    .logo { font-size: 1.2rem; }
    .logo img { height: 52px; }

    .hero-content { padding-top: 1rem; }
    .hero { padding-bottom: 3.5rem; }
    .hero-services { margin-top: -2rem; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn,
    .hero-buttons .btn-outline { width: 100%; justify-content: center; }

    .service-highlights { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    .stat-card h2 { font-size: 2.1rem; }

    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .gallery-item.large { grid-column: span 1; }

    .gallery-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }

    .cta h2 { font-size: 1.9rem; }

    .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 1.2rem; }
    .lightbox-close { width: 38px; height: 38px; top: 1rem; right: 1rem; }

    .back-to-top { width: 42px; height: 42px; bottom: 1.2rem; right: 1.2rem; }

    .cookie-notice { flex-direction: column; gap: 0.8rem; padding: 1.2rem; }
}/* =====================================================
   SANCTA LIMITED — RESPONSIVE STYLESHEET
   Breakpoints: 1200px (laptop) / 992px (tablet-landscape)
   768px (tablet) / 576px (mobile)
===================================================== */

/* =====================================================
   LAPTOP  (<=1200px)
===================================================== */
@media (max-width: 1200px) {
    :root { --section-padding: 5.5rem 0; }

    .logo img { height: 52px; }

    .service-highlights { grid-template-columns: repeat(2, 1fr); }
    .services-grid { grid-template-columns: repeat(2, 1fr); }
    .why-grid { grid-template-columns: repeat(2, 1fr); }
    .values-grid { grid-template-columns: repeat(2, 1fr); }
    .process-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
    .testimonial-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-grid { grid-template-columns: repeat(2, 1fr); }
    .gallery-item.large { grid-column: span 2; }
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 2.5rem 1.5rem; }

    .hero { padding-bottom: 5rem; }
}

/* =====================================================
   TABLET LANDSCAPE (<=992px)
===================================================== */
@media (max-width: 992px) {
    /* Safari fix 1: backdrop-filter makes the header a "containing block",
       which breaks how the fixed-position menu panel is anchored/stacked
       in Safari and can make it untappable. The header is 96% opaque
       anyway, so we drop the blur on mobile and bump opacity instead.
       Safari fix 2: Safari mis-computes tap targets for fixed elements
       nested inside a sticky ancestor — the menu renders correctly but
       taps on its links miss. Switching the header to fixed (visually
       identical) removes the sticky ancestor. Body padding compensates
       for the header leaving the document flow; main.js keeps
       --header-height up to date on load/resize. */
    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
    }

    body {
        padding-top: var(--header-height, 84px);
    }

    .menu-btn { display: block; }

    nav {
        position: fixed;
        top: 0; right: -100%;
        width: min(320px, 80%);
        height: 100vh;
        background: var(--color-navy);
        flex-direction: column;
        align-items: flex-start;
        padding: 6rem 2rem 2rem;
        transition: right var(--transition);
        z-index: 1100;
    }
    nav.open { right: 0; box-shadow: -10px 0 30px rgba(0,0,0,0.2); }

    .nav-links {
        flex-direction: column;
        align-items: flex-start;
        gap: 1.6rem;
        width: 100%;
    }
    .nav-links a { color: var(--color-white); font-size: 1.05rem; }
    .nav-links a.active,
    .nav-links a:hover { color: var(--color-gold); }

    .navbar-enquiry-desktop { display: none; }
    .nav-enquiry-mobile {
        display: inline-flex;
        margin-top: 2rem;
    }

    .nav-overlay {
        position: fixed;
        inset: 0;
        background: rgba(15,23,42,0.6);
        cursor: pointer; /* iOS Safari won't fire click events on a plain div without this */
        /* Must sit BELOW the header (z-index 1000): the nav panel and close
           button live inside the header's stacking context, so an overlay
           above 1000 would paint over the open menu and block its clicks. */
        z-index: 900;
        opacity: 0;
        visibility: hidden;
        transition: var(--transition);
    }
    .nav-overlay.show { opacity: 1; visibility: visible; }

    .logo img { height: 52px; }

    .about-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .about-image { order: -1; max-width: 480px; margin: 0 auto; }
    .about-features { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }

    .mv-grid { grid-template-columns: 1fr; }
    .contact-grid { grid-template-columns: 1fr; }

    .service-detail,
    .service-detail.reverse { grid-template-columns: 1fr; }
    .service-detail.reverse .service-detail-image { order: 0; }
}

/* =====================================================
   TABLET (<=768px)
===================================================== */
@media (max-width: 768px) {
    :root { --section-padding: 4.5rem 0; }

    .logo img { height: 52px; }

    .hero { padding-bottom: 4.5rem; }
    .hero-services { margin-top: -3rem; }
    .service-highlights { grid-template-columns: 1fr 1fr; gap: 1rem; }
    .highlight-card { padding: 1.5rem 1.2rem; }

    .services-grid,
    .why-grid,
    .values-grid,
    .process-grid,
    .testimonial-grid { grid-template-columns: 1fr; }

    .gallery-grid { grid-template-columns: 1fr 1fr; grid-auto-rows: 220px; }

    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }

    .footer-grid { grid-template-columns: 1fr; gap: 2.2rem; text-align: left; }

    .form-row { grid-template-columns: 1fr; }
    .contact-info-card,
    .contact-form-wrapper { padding: 1.8rem; }
}

/* =====================================================
   MOBILE (<=576px)
===================================================== */
@media (max-width: 576px) {
    .container { padding: 0 1.2rem; }

    .navbar { padding: 0.9rem 1.2rem; }
    .logo { font-size: 1.2rem; }
    .logo img { height: 52px; }

    .hero-content { padding-top: 1rem; }
    .hero { padding-bottom: 3.5rem; }
    .hero-services { margin-top: -2rem; }
    .hero-buttons { flex-direction: column; width: 100%; }
    .hero-buttons .btn,
    .hero-buttons .btn-outline { width: 100%; justify-content: center; }

    .service-highlights { grid-template-columns: 1fr; }

    .stats-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
    .stat-card h2 { font-size: 2.1rem; }

    .gallery-grid { grid-template-columns: 1fr; grid-auto-rows: 240px; }
    .gallery-item.large { grid-column: span 1; }

    .gallery-filters { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.5rem; }

    .cta h2 { font-size: 1.9rem; }

    .lightbox-prev, .lightbox-next { width: 38px; height: 38px; font-size: 1.2rem; }
    .lightbox-close { width: 38px; height: 38px; top: 1rem; right: 1rem; }

    .back-to-top { width: 42px; height: 42px; bottom: 1.2rem; right: 1.2rem; }

    .cookie-notice { flex-direction: column; gap: 0.8rem; padding: 1.2rem; }
}