/* ==========================================================================
   New Cornerstone Technical Services L.L.C — Responsive Styles
   Mobile-first: base (320px) → 640px → 768px → 1024px → 1280px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Base mobile (320px and up) — single column
   -------------------------------------------------------------------------- */
.grid-2, .grid-3, .grid-4, .expertise-grid, .methodology-grid,
.focus-commitment-grid {
    grid-template-columns: 1fr;
}

.focus-list {
    grid-template-columns: 1fr;
}

.focus-card,
.commitment-panel {
    padding: var(--sp-3);
}

.hero-inner,
.split,
.contact-grid,
.why-ncts-grid,
.locations-grid {
    grid-template-columns: 1fr;
}

/* Slider — mobile */
.hero-slide {
    min-height: 460px;
}

/* Vertical only — the horizontal grid padding that lines hero copy up
   with the rest of the page lives in style.css and must not be undone
   here (this file loads after it). */
.container.hero-slide-content {
    padding-top: var(--sp-4);
    padding-bottom: var(--sp-4);
}

.hero-slide-content h1 {
    font-size: 1.7rem;
}

.hero-slide-content p {
    font-size: 0.95rem;
}

.hero-slide-trust {
    gap: var(--sp-2);
}

.hero-slide-trust span {
    font-size: 0.78rem;
}

.slider-arrow {
    width: 40px;
    height: 58px;
    font-size: 1rem;
}

.slider-arrow--prev {
    left: 8px;
}

.slider-arrow--next {
    right: 8px;
}

.testimonial-arrow--prev {
    left: -0.5rem;
}

.testimonial-arrow--next {
    right: -0.5rem;
}

.slider-dots {
    bottom: 14px;
    gap: 8px;
}

.slider-dot {
    width: 10px;
    height: 10px;
}

.footer-grid {
    grid-template-columns: 1fr;
}

.nav-list {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    margin-bottom: var(--sp-3);
}

.nav-list > li {
    border-bottom: 1px solid var(--steel-100);
}

.nav-list > li:last-child {
    border-bottom: none;
}

.nav-toggle {
    display: flex;
}

.nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: var(--white);
    padding: 4.75rem 1.5rem 2.5rem;
    transform: translateX(100%);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
    z-index: 99;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 3px solid var(--gold);
}

body.nav-open {
    overflow: hidden;
}

body.nav-open .nav {
    transform: translateX(0);
}

.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.01em;
    color: var(--navy-900);
    padding: 1.05rem 0.25rem;
}

.nav-link::after {
    display: none;
}

.nav-link.active {
    color: var(--gold-dark);
}

/* Mobile dropdown — accordion style */
.dropdown-arrow {
    font-size: 0.7rem;
    color: var(--muted);
    transition: transform 0.25s ease;
}

.has-dropdown.open > .nav-link .dropdown-arrow {
    transform: rotate(180deg);
}

.has-dropdown.open > .nav-link {
    color: var(--gold-dark);
}

.nav-dropdown {
    position: static;
    transform: none;
    width: 100%;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    max-height: 0;
    overflow: hidden;
    margin: 0;
    padding: 0;
    border: none;
    transition: max-height 0.35s ease;
}

.has-dropdown.open > .nav-dropdown {
    max-height: 760px;
}

.nav-dropdown::before {
    display: none;
}

.nav-dropdown-inner {
    background: var(--steel-50);
    border: 1px solid var(--steel-100);
    border-radius: var(--radius-sm);
    margin: 0.2rem 0 0.9rem 0.75rem;
    padding: 0.7rem 0 0.5rem;
}

.nav-dropdown-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 0 0.45rem;
    border-bottom: 1px solid var(--steel-200);
}

.nav-dropdown-title {
    font-size: 0.75rem;
    color: var(--gold-dark);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 700;
}

.nav-dropdown-view-all {
    font-size: 0.75rem;
}

.nav-dropdown-list {
    grid-template-columns: 1fr;
    gap: 2px;
    padding: 0.3rem 0 0;
}

.nav-dropdown-list li {
    border-bottom: 1px solid var(--steel-100);
}

.nav-dropdown-list li:last-child {
    border-bottom: none;
}

.nav-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    width: 100%;
    min-height: 46px;
    padding: 0.55rem 0.25rem;
    color: var(--ink);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.nav-dropdown-label {
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
}

.nav-dropdown-item:active {
    background: var(--gold-light);
}

.nav-dropdown-item:active .nav-dropdown-icon {
    background: var(--gold);
    color: var(--white);
}

/* Hover-capable devices in narrow view: reveal submenu on hover so it
   closes as soon as the cursor moves to another menu item. */
@media (hover: hover) and (pointer: fine) and (max-width: 1023px) {
    .has-dropdown:hover > .nav-dropdown {
        max-height: 760px;
    }

    .nav-link:hover {
        color: var(--gold-dark);
    }

    .nav-dropdown-item:hover {
        background: var(--white);
    }

    .nav-dropdown-item:hover .nav-dropdown-icon {
        background: var(--gold);
        color: var(--white);
    }
}

/* Mobile menu — contact strip */
.nav-mobile-contact {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    margin-top: var(--sp-2);
    padding: var(--sp-2) 0 0;
    border-top: 1px solid var(--steel-200);
}

.nav-mobile-contact a {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.25rem;
    font-size: 0.9rem;
    color: var(--navy-700);
    border-radius: var(--radius-sm);
}

.nav-mobile-contact a i {
    width: 20px;
    text-align: center;
    color: var(--gold-dark);
}

.nav-mobile-whatsapp {
    font-weight: 600;
}

li[data-slug="contact"] {
    order: 2;
}

.topbar {
    display: none;
}

.hero-inner {
    padding: var(--sp-5) 0;
}

.hero-card {
    max-width: 460px;
}

.stat-item .stat-value {
    font-size: 2.1rem;
}

.form-row {
    grid-template-columns: 1fr;
}

.cta-band .btn {
    margin: 0.35rem 0.2rem;
}

/* --------------------------------------------------------------------------
   1b. About Us / Home overview — split media frames and badges
   -------------------------------------------------------------------------- */
/* .split collapses to one column below 1024px (see section 4), so the frame
   is driven by width alone. Every photo in the split frames (home overview,
   about intro, about trust) is 1:1 square, and the frame fills via
   position:absolute + inset:0 with object-fit:cover. Matching the frame to
   1:1 therefore crops NOTHING — a 4:3 frame would slice 25% off the top and
   bottom of a square image. object-position stays centred so any future
   non-square upload crops evenly rather than off one edge. */
@media (max-width: 1023px) {
    .split-media .media-frame {
        min-height: 0;
        height: auto;
        aspect-ratio: 1 / 1;
        max-height: 60vh;
        padding: var(--sp-3);
        font-size: 3rem;
    }

    .split-media .media-frame img {
        object-position: center;
    }

    /* A long badge such as "Trusted by 250+ Clients" must wrap and stay
       inside the frame rather than pushing past the viewport edge. */
    .split-media .media-badge {
        left: var(--sp-2);
        right: var(--sp-2);
        max-width: calc(100% - var(--sp-4));
        padding: 0.5rem 0.8rem;
        font-size: 0.78rem;
        line-height: 1.35;
        overflow-wrap: anywhere;
    }
}

/* Between 640px and 1023px the frame still spans the full column, which
   makes a square photo roughly 700px tall on a tablet. Cap its width and
   centre it so the section stays proportionate. The cap is 640px rather than
   the column width so a tablet in portrait (a Surface Pro 10 lays out at
   960x1440) still gets a photo with real presence instead of a postage
   stamp, while the cap keeps a 1:1 square from eating a whole screen.

   width:100% is required, not cosmetic. `margin-inline:auto` makes the grid
   item's margins auto, and a grid item with auto margins is NOT stretched to
   its column — it shrink-wraps to fit-content instead. Every child here is
   out of flow (the photo is position:absolute inside .media-frame and the
   badge is position:absolute), so the fit-content width collapses to the
   frame's own padding: 48px. That squeezed the photo into a 48x48 sliver and
   left the badge wrapping one character per line. A definite width keeps the
   box column-wide; max-width then caps it and the auto margins centre it. */
@media (min-width: 640px) and (max-width: 1023px) {
    .split-media {
        width: 100%;
        max-width: 640px;
        margin-inline: auto;
    }
}

/* style.css sizes the About image band from the child count using :has(),
   which carries a higher specificity than the plain class in the media
   queries there. Restate the counts here so the responsive columns below
   actually win on narrow screens. */
@media (max-width: 900px) {
    .about-image-grid,
    .about-image-grid:has(.about-image:nth-child(3):last-child),
    .about-image-grid:has(.about-image:nth-child(2):last-child) {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-image-grid:has(.about-image:only-child) {
        grid-template-columns: minmax(0, 640px);
    }
}

@media (max-width: 560px) {
    .about-image-grid,
    .about-image-grid:has(.about-image:nth-child(3):last-child),
    .about-image-grid:has(.about-image:nth-child(2):last-child),
    .about-image-grid:has(.about-image:only-child) {
        grid-template-columns: 1fr;
    }

    .about-image {
        aspect-ratio: 4 / 3;
    }
}

/* --------------------------------------------------------------------------
   1c. Image centring — mobile & tablet
   -------------------------------------------------------------------------- */
/* The global rule in style.css is `img { max-width:100%; display:block }`.
   Block-level images ignore an ancestor's text-align, so a photo narrower
   than its column sits hard against the left edge with auto margins doing
   nothing. Re-apply auto side margins to content images while they scale.
   Scoped to <=1023px so the desktop two-column split layout is untouched.

   Components that already fill their box (.service-media, .blog-thumb,
   .about-image, .gallery-open, .split-media .media-frame) all pin their
   image to width/height 100% with object-fit:cover, so they are centred
   already and are deliberately NOT touched here. */
@media (max-width: 1023px) {
    /* Admin-authored article images, if any survive as markup. */
    .blog-content img,
    article > img {
        display: block;
        margin-left: auto;
        margin-right: auto;
    }

    /* Guard against a tall source image dominating a short column: cap it
       so the caption and body copy below stay reachable without scrolling
       past a full-screen photo. */
    .blog-featured-img {
        max-height: 70vh;
        object-fit: contain;
    }
}

/* Below 640px the article card padding is tight, so soften the corner radius
   to match the tighter corner radius used across the mobile breakpoints. */
@media (max-width: 639px) {
    .blog-featured-img {
        border-radius: var(--radius-sm);
    }
}
@media (min-width: 640px) {
    .grid-2 {
        grid-template-columns: repeat(2, 1fr);
    }

    .focus-list {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }

    .topbar {
        display: block;
    }

    .section {
        padding: var(--sp-5) 0;
    }
}

/* --------------------------------------------------------------------------
   3. Tablets & landscape (768px+)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .testimonial-slide {
        flex-basis: 50%;
    }

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

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

    .focus-commitment-grid {
        grid-template-columns: 3fr 2fr;
    }

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

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

    .section {
        padding: var(--sp-6) 0;
    }

    .hero-slide {
        min-height: 460px;
    }

    .hero-slide-content h1 {
        font-size: 2.4rem;
    }
}

/* --------------------------------------------------------------------------
   4. Desktops (1024px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1024px) {
    .testimonial-slide {
        flex-basis: 33.3333%;
    }

    .grid-3,
    .grid-4 {
        grid-template-columns: repeat(3, 1fr);
    }

    .grid-4 {
        grid-template-columns: repeat(4, 1fr);
    }

    .hero-inner,
    .contact-grid {
        grid-template-columns: 1.15fr 0.85fr;
    }

    .split {
        grid-template-columns: 1fr 1fr;
    }

    .footer-grid {
        grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
    }

    .form-row {
        grid-template-columns: 1fr 1fr;
    }

    /* Restore desktop navigation */
    .nav-toggle {
        display: none;
    }

    .nav {
        position: static;
        top: auto;
        right: auto;
        bottom: auto;
        left: auto;
        background: transparent;
        padding: 0;
        transform: none;
        transition: none;
        overflow: visible;
        border-top: none;
    }

    .nav-list {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 0.2rem;
        margin-bottom: 0;
    }

    .nav-link {
        color: var(--navy-900);
        font-size: 0.95rem;
        padding: 0.6rem 1rem;
        border-left: none;
        width: auto;
    }

    .nav-link.active,
    .nav-link:hover {
        color: var(--navy-800);
        background: transparent;
        border-left: none;
    }

    .nav-list > li {
        border-bottom: none;
    }

    .nav-mobile-contact {
        display: none;
    }

    .nav-link::after {
        display: block;
    }

    .nav-cta-item {
        order: 2;
        width: auto;
        margin-top: 0;
        padding-top: 0;
        border-top: none;
        display: flex;
        align-items: center;
    }

    li[data-slug="contact"] {
        order: 0;
    }

    /* Restore desktop dropdown behavior */
    .dropdown-arrow {
        font-size: 0.6rem;
    }

    .nav-dropdown {
        position: absolute;
        transform: translateX(-50%) translateY(8px);
        width: 420px;
        background: var(--white);
        border-radius: var(--radius);
        box-shadow: var(--shadow-lg);
        border: 1px solid var(--steel-200);
        max-height: none;
        overflow: visible;
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
        margin: 0;
        padding-left: 0;
        border-left: none;
    }

    .has-dropdown:hover > .nav-dropdown {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transform: translateX(-50%) translateY(0);
    }

    .nav-dropdown-header {
        padding: 1rem 1.25rem 0.75rem;
        border-bottom: 1px solid var(--steel-100);
    }

    .nav-dropdown-inner {
        background: transparent;
        border: none;
        border-radius: 0;
        margin: 0;
        padding: 0;
    }

    .nav-dropdown::before {
        display: block;
    }

    .nav-dropdown-title {
        font-size: 0.95rem;
        color: var(--navy-900);
        text-transform: none;
        letter-spacing: normal;
    }

    .nav-dropdown-list {
        grid-template-columns: 1fr 1fr;
        gap: 2px;
        padding: 0.5rem;
    }

    .nav-dropdown-item {
        padding: 0.6rem 0.75rem;
        min-height: auto;
        width: auto;
    }

    .nav-dropdown-icon {
        width: 36px;
        height: 36px;
        font-size: 0.88rem;
    }

    .nav-dropdown-label {
        font-size: 0.85rem;
    }

    .hero-slide {
        min-height: 480px;
    }

    .hero-slide-content h1 {
        font-size: clamp(2.2rem, 3.4vw, 3.1rem);
    }

    .why-ncts-grid {
        grid-template-columns: 1.05fr 1fr;
    }

    .locations-grid {
        grid-template-columns: 1.15fr 1fr;
    }

    .slider-arrow {
        width: 52px;
        height: 76px;
        font-size: 1.25rem;
    }

    .slider-arrow--prev {
        left: 32px;
    }

    .slider-arrow--next {
        right: 32px;
    }

    .testimonial-arrow--prev {
        left: -0.5rem;
    }

    .testimonial-arrow--next {
        right: -0.5rem;
    }
}

/* --------------------------------------------------------------------------
   5. Large desktops (1280px+)
   -------------------------------------------------------------------------- */
@media (min-width: 1280px) {
    .container {
        padding: 0 var(--sp-3);
    }
}

/* --------------------------------------------------------------------------
   6. Small mobile refinements (≤ 379px)
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
    .brand {
        --logo-mark: 62px;
        --brand-max: 100%;
    }

    /* The full company name and service list cannot fit on one line at this
       width, so both lines wrap instead of overflowing the viewport. */
    .brand-text strong,
    .brand-text span {
        white-space: normal;
        letter-spacing: 0;
    }

    .brand-text strong {
        font-size: 0.68rem;
    }

    .brand-text span {
        font-size: 0.46rem;
    }

    h2 {
        font-size: 1.55rem;
    }

    .btn {
        padding: 0.7rem 1.2rem;
        font-size: 0.86rem;
    }

    .hero-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-slide {
        min-height: 430px;
    }

    .hero-slide-content h1 {
        font-size: 1.35rem;
    }

    .hero-slide-content p {
        font-size: 0.88rem;
    }

    .hero-slide-actions {
        flex-direction: column;
    }

    .hero-slide-actions .btn {
        width: 100%;
    }

    .hero-slide-trust {
        flex-direction: column;
        gap: 0.4rem;
    }

    .logo-strip {
        padding: var(--sp-3) 0 var(--sp-4);
    }

    .logo-chip {
        padding: 0.7rem 1.2rem;
    }

    .logo-chip span,
    .logo-chip a {
        font-size: 0.78rem;
        letter-spacing: 0.06em;
    }

    .logo-marquee-group {
        gap: var(--sp-1) var(--sp-2);
        padding-right: var(--sp-2);
    }

    .logo-chip img {
        height: 38px;
        max-width: 140px;
    }
}

/* --------------------------------------------------------------------------
   6b. Narrow desktops (1024px–1099px) — header brand vs. full nav
   -------------------------------------------------------------------------- */
/* The desktop nav first appears at 1024px and needs ~535px. Paired with the
   brand at its natural ~505px and the container padding, the header row needs
   about 1072px of viewport, so on a 1024–1099px screen (1024x768 tablets and
   small laptops) the two together pushed past the right edge and the whole
   page scrolled sideways. Narrow the mark and let the two brand lines wrap so
   the row fits, exactly as the small-mobile block above does. */
@media (min-width: 1024px) and (max-width: 1099px) {
    .brand {
        --logo-mark: 82px;
        --brand-max: 100%;
    }

    .brand-text strong,
    .brand-text span {
        white-space: normal;
        letter-spacing: 0;
    }

    .brand-text strong {
        font-size: 0.8rem;
    }

    .brand-text span {
        font-size: 0.52rem;
    }
}

/* --------------------------------------------------------------------------
   7. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   8. Quick enquiry popup
   On phones the dialog becomes a full-height sheet with its own scroll, and
   the pitch panel shrinks to a compact header so the form is reachable
   without scrolling past marketing copy.
   -------------------------------------------------------------------------- */
.enquiry-popup {
    padding: 0;
}

.enquiry-popup-card {
    grid-template-columns: 1fr;
    max-width: 560px;
    max-height: 100vh;
    height: 100%;
    max-height: 100dvh;
    border-radius: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.enquiry-popup-aside {
    gap: 0.7rem;
    padding: 1.5rem 1.15rem 1.2rem;
}

.enquiry-popup-aside::after {
    right: -70px;
    bottom: -130px;
    width: 200px;
    height: 200px;
    border-width: 30px;
}

.ep-title {
    font-size: 1.35rem;
    /* Clears the absolute close button. */
    padding-right: 2.6rem;
}

.ep-sub {
    font-size: 0.86rem;
}

.ep-points {
    display: none;
}

.ep-direct {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0.4rem;
    margin-top: 0.6rem;
    padding-top: 0.8rem;
}

.ep-direct-item {
    padding: 0.4rem 0.45rem;
}

.enquiry-popup-main {
    padding: 1.4rem 1.15rem 1.6rem;
    overflow: visible;
}

.ep-form .form-row {
    grid-template-columns: 1fr;
    gap: 0;
}

.enquiry-popup-close {
    top: 10px;
    right: 10px;
}

@media (min-width: 480px) {
    .enquiry-popup {
        padding: var(--sp-3);
    }

    .enquiry-popup-card {
        height: auto;
        max-height: calc(100vh - var(--sp-4));
        max-height: calc(100dvh - var(--sp-4));
        border-radius: var(--radius);
        overflow: hidden;
    }

    .enquiry-popup-main {
        padding: 1.8rem 1.5rem 1.6rem;
        overflow-y: auto;
    }

    .ep-points {
        display: grid;
    }

    .ep-direct {
        grid-template-columns: 1fr;
    }

    .ep-title {
        font-size: 1.5rem;
    }
}

@media (min-width: 861px) {
    .enquiry-popup-card {
        grid-template-columns: 1fr 1.05fr;
        max-width: 940px;
    }

    .enquiry-popup-aside {
        padding: 2.4rem 2rem;
        gap: 0.9rem;
    }

    .ep-title {
        font-size: 1.7rem;
        padding-right: 0;
    }

    .enquiry-popup-main {
        padding: 2.2rem 2rem 1.8rem;
    }

    .ep-form .form-row {
        grid-template-columns: 1fr 1fr;
        gap: var(--sp-2);
    }
}