/* ==========================================================================
   Concept Accountancy — Front-site responsive layer
   Loaded last, after style.css and any page-level <style> blocks that live in
   <head>. Page blades keep their own inline styles; this file only refines the
   mobile / tablet presentation for: home, about, services, services/{id},
   contact — plus the shared header and footer.

   Breakpoints
     <= 1199px  small desktop / landscape tablet
     <= 991px   tablet
     <= 767px   large phone
     <= 575px   phone
     <= 400px   small phone
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Global safety net
   -------------------------------------------------------------------------- */
html {
    -webkit-text-size-adjust: 100%;
}

body {
    overflow-x: hidden;
}

img,
video,
iframe {
    max-width: 100%;
}

/* Never let a long email / URL / postcode blow out a narrow card. */
@media (max-width: 767px) {

    .ca-footer__contact-item span,
    .ca-footer__contact-item address,
    .cp-card-details a,
    .cp-card-details span {
        overflow-wrap: anywhere;
    }
}

/* Touch devices: retire the decorative 3D tilts. They read as broken skew on a
   small screen, and there is no hover to resolve them. */
@media (hover: none),
(pointer: coarse) {

    .about-3d-screen,
    .about-content-glass,
    .why-card,
    .why-hero-card,
    .vshowcase-card--orange,
    .vshowcase-card--green,
    .cp-card,
    .cp-form-glass,
    .cp-map-3d,
    .ca-card-3d__inner,
    .ca-stage-main,
    .dp-image-card {
        transform: none !important;
    }
}

/* --------------------------------------------------------------------------
   1. Header
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    /* Give the sticky mobile bar a readable surface instead of letting hero
       artwork run straight under the logo. */
    .site-header .main-bar {
        padding-block: 4px;
    }

    /* Burger and drawer links need real tap targets. */
    .site-header .xmenu-toggler {
        width: 46px;
        height: 46px;
        box-shadow: 0 6px 18px rgba(15, 23, 42, 0.14);
    }

    .header-nav .navbar-nav>li>a {
        padding-block: 14px;
        font-size: 1rem;
    }
}

/* --------------------------------------------------------------------------
   1b. Side menu drawer (mobile + tablet)
   The markup keeps .header-nav / .xmenu-toggler / .menu-close so xmenu.js still
   drives it: the toggler flips .show on the panel. xmenu.css animates that with
   `left`, so this layer keeps the same axis and just restyles the panel.
   Above 1024px the nav returns to the desktop pill bar and none of this applies.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    .ca-drawer {
        --ca-drawer-w: 20rem;
        display: flex;
        flex-direction: column;
        width: var(--ca-drawer-w);
        max-width: calc(100vw - 3.5rem);
        height: 100dvh;
        left: calc(-1 * var(--ca-drawer-w) - 2rem);
        padding: 0;
        overflow: hidden;
        background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%);
        border-radius: 0 24px 24px 0;
        box-shadow: 24px 0 60px -20px rgba(15, 23, 42, 0.35);
        transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1);
    }

    /* Beat xmenu.css, which is loaded before this file. */
    .header-nav.ca-drawer.show {
        left: 0 !important;
    }

    /* Brand bar */
    .ca-drawer__top {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        padding: 18px 20px 16px;
        border-bottom: 1px solid rgba(15, 23, 42, 0.07);
        background: #fff;
    }

    .ca-drawer__brand {
        display: block;
        width: 8.75rem;
        max-width: 60%;
    }

    .ca-drawer__brand img {
        width: 100%;
        height: auto;
        object-fit: contain;
    }

    .ca-drawer__close {
        flex: 0 0 auto;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 1.05rem;
        color: #0f172a;
        background: rgba(15, 23, 42, 0.05);
        border: 1px solid rgba(15, 23, 42, 0.08);
        cursor: pointer;
        transition: background 0.25s ease, color 0.25s ease, transform 0.35s ease;
    }

    .ca-drawer__close:hover,
    .ca-drawer__close:focus-visible {
        background: var(--primary, #00BDE0);
        border-color: transparent;
        color: #fff;
        transform: rotate(90deg);
    }

    /* Scroll body */
    .ca-drawer__scroll {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        padding: 18px 16px 8px;
    }

    .ca-drawer__eyebrow {
        margin: 0 0 10px 8px;
        font-size: 0.6875rem;
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
        color: rgba(15, 23, 42, 0.4);
    }

    .ca-drawer__nav {
        display: flex;
        flex-direction: column;
        gap: 6px;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .header-nav .ca-drawer__nav>li>a.ca-drawer__link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 14px;
        min-height: 52px;
        border-radius: 14px;
        font-size: 1rem;
        font-weight: 600;
        color: #0f172a;
        background: transparent;
        border: 1px solid transparent;
        transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
    }

    .ca-drawer__icon {
        flex: 0 0 auto;
        width: 34px;
        height: 34px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 11px;
        font-size: 0.875rem;
        color: var(--primary, #00BDE0);
        background: color-mix(in srgb, var(--primary, #00BDE0) 12%, transparent);
        transition: background 0.25s ease, color 0.25s ease;
    }

    .ca-drawer__chev {
        margin-left: auto;
        font-size: 0.7rem;
        opacity: 0.3;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    .header-nav .ca-drawer__nav>li>a.ca-drawer__link.active {
        color: #fff;
        background: var(--primary, #00BDE0);
        box-shadow: 0 12px 24px -12px color-mix(in srgb, var(--primary, #00BDE0) 75%, transparent);
    }

    .ca-drawer__link.active .ca-drawer__icon {
        background: rgba(255, 255, 255, 0.2);
        color: #fff;
    }

    .ca-drawer__link.active .ca-drawer__chev {
        opacity: 0.85;
    }

    .header-nav .ca-drawer__nav>li>a.ca-drawer__link:not(.active):active {
        background: rgba(15, 23, 42, 0.04);
        border-color: rgba(15, 23, 42, 0.06);
    }

    .header-nav .ca-drawer__nav>li>a.ca-drawer__link:focus-visible {
        outline: 2px solid var(--primary, #00BDE0);
        outline-offset: 2px;
    }

    /* CTA */
    .ca-drawer__cta {
        margin-top: 22px;
    }

    .ca-drawer__cta-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 10px;
        width: 100%;
        min-height: 52px;
        padding: 14px 18px;
        border: 0;
        border-radius: 14px;
        font-size: 0.9375rem;
        font-weight: 700;
        color: #fff;
        cursor: pointer;
        background: linear-gradient(135deg, var(--primary, #00BDE0), color-mix(in srgb, var(--primary, #00BDE0) 55%, #0f172a));
        box-shadow: 0 16px 30px -16px color-mix(in srgb, var(--primary, #00BDE0) 80%, transparent);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
    }

    .ca-drawer__cta-btn:active {
        transform: translateY(1px);
        box-shadow: 0 10px 20px -14px color-mix(in srgb, var(--primary, #00BDE0) 80%, transparent);
    }

    /* Contact block */
    .ca-drawer__contact {
        margin-top: 26px;
        padding-top: 20px;
        border-top: 1px solid rgba(15, 23, 42, 0.07);
    }

    .ca-drawer__contact-item {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 8px;
        border-radius: 12px;
        font-size: 0.875rem;
        font-weight: 500;
        color: rgba(15, 23, 42, 0.75);
        overflow-wrap: anywhere;
    }

    .ca-drawer__contact-item:hover {
        color: var(--primary, #00BDE0);
        background: rgba(15, 23, 42, 0.035);
    }

    .ca-drawer__contact-icon {
        flex: 0 0 auto;
        width: 30px;
        height: 30px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        font-size: 0.75rem;
        color: var(--primary, #00BDE0);
        background: color-mix(in srgb, var(--primary, #00BDE0) 12%, transparent);
    }

    /* Footer */
    .ca-drawer__foot {
        flex: 0 0 auto;
        padding: 16px 20px calc(16px + env(safe-area-inset-bottom));
        border-top: 1px solid rgba(15, 23, 42, 0.07);
        background: #fff;
        text-align: center;
    }

    .ca-drawer__social {
        display: flex;
        justify-content: center;
        gap: 10px;
        margin: 0 0 12px;
        padding: 0;
        list-style: none;
    }

    .ca-drawer__social a {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 38px;
        height: 38px;
        border-radius: 50%;
        font-size: 0.8125rem;
        color: var(--primary, #00BDE0);
        background: color-mix(in srgb, var(--primary, #00BDE0) 11%, transparent);
        transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
    }

    .ca-drawer__social a:hover,
    .ca-drawer__social a:focus-visible {
        color: #fff;
        background: var(--primary, #00BDE0);
        transform: translateY(-2px);
    }

    .ca-drawer__copy {
        margin: 0;
        font-size: 0.75rem;
        color: rgba(15, 23, 42, 0.45);
    }

    /* Overlay: soften the template's flat black wash. */
    .site-header .menu-close.fade-overlay {
        background: rgba(2, 6, 23, 0.55);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);
    }

    .xmenu-toggler.open~.menu-close.fade-overlay {
        opacity: 1;
    }
}

/* Desktop: the pill bar owns the nav again. Font Awesome's own `display` rule
   outranks Tailwind's lg:hidden on the chevrons, so retire them here. */
@media (min-width: 1024px) {

    .ca-drawer__chev,
    .ca-drawer__icon {
        display: none !important;
    }
}

/* Tablet / landscape phone: a wider panel reads better on the extra width. */
@media (min-width: 576px) and (max-width: 1023px) {
    .ca-drawer {
        --ca-drawer-w: 22.5rem;
    }

    .ca-drawer__scroll {
        padding-inline: 22px;
    }

    .ca-drawer__top,
    .ca-drawer__foot {
        padding-inline: 26px;
    }
}

/* Short landscape viewports: trim the vertical rhythm so the CTA stays visible. */
@media (max-width: 1023px) and (max-height: 520px) {

    .ca-drawer__top {
        padding-block: 12px 10px;
    }

    .header-nav .ca-drawer__nav>li>a.ca-drawer__link {
        min-height: 44px;
        padding-block: 9px;
    }

    .ca-drawer__cta {
        margin-top: 14px;
    }

    .ca-drawer__contact {
        margin-top: 16px;
        padding-top: 14px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ca-drawer {
        transition: none;
    }
}

@media (max-width: 575px) {
    .site-header .extra-nav .btn {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   2. Home — hero banner
   The slides are empty; the artwork is drawn by hover-effect.js into a WebGL
   canvas that fills the hero wrapper and always cover-fits. The blade only
   sets a height above lg (lg:min-h-220), so below lg the banner collapsed to
   the height of its pagination row. Give it the artwork's own 16:9 ratio —
   that both restores the height and leaves nothing for the shader to crop,
   which matters because the headline is baked into the image.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {

    /* Reserve a clean white bar for the logo and burger. A top border rather
       than padding, because the WebGL canvas is positioned against the
       wrapper's padding box — padding would let the artwork slide under the
       logo again, a border pushes it down. */
    .page-content>div:has(> .hero-effect-container) {
        border-top: 5rem solid #fff;
    }

    /* 56.25vw == 16:9. Expressed as a height rather than aspect-ratio, because
       the element already carries height:100% from the blade's h-full — that
       would win, leaving the ratio to resolve the *width* and overflow. */
    .hero-banner-swiper {
        height: 56.25vw;
        min-height: 11.5rem;
    }

    .hero-banner-swiper .swiper-slide {
        height: 100%;
    }

    /* Float the controls over the banner instead of stacking them beneath it.
       The WebGL canvas is inset-0 of the whole hero wrapper, so anything that
       adds wrapper height also stretches the canvas and reintroduces the crop.
       Overlaying keeps wrapper height == banner height == 16:9. */
    .hero-banner-swiper+div {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 0.75rem;
        margin: 0;
        padding: 0 1rem 1rem;
    }

    /* Counter joins the arrows on the right, clear of the artwork's own copy
       block on the left. */
    .hero-banner-slider__pagination {
        position: static !important;
        transform: none !important;
        margin: 0;
        padding: 0.3rem 0.7rem;
        border-radius: 999px;
        background: rgba(255, 255, 255, 0.88);
        box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12);
    }

    .hero-banner-slider__pagination span,
    .hero-banner-slider__total {
        color: #0f172a;
        font-size: 0.95rem;
        width: auto;
    }

    .hero-banner-slider__total {
        margin-inline-end: 0;
    }

    .hero-banner-pagination-swiper {
        background: rgba(15, 23, 42, 0.3) !important;
    }

    .hero-banner-button-prev svg path,
    .hero-banner-button-next svg path {
        stroke: #0f172a;
    }

    .hero-banner-button-prev,
    .hero-banner-button-next {
        display: grid;
        place-items: center;
        width: 44px;
        height: 44px;
        border: 1px solid rgba(15, 23, 42, 0.14);
        border-radius: 50%;
        background: #fff;
        box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    }

    .hero-banner-button-prev svg,
    .hero-banner-button-next svg {
        width: 26px;
        height: 26px;
    }
}

@media (max-width: 767px) {

    /* Hero copy: the blade drops to text-4xl, still tall over a photo. */
    .hero-banner-swiper h1.headline {
        font-size: clamp(1.85rem, 8vw, 2.6rem);
        line-height: 1.12;
    }

    .hero-banner-swiper .swiper-slide p {
        font-size: 0.95rem;
        line-height: 1.65;
    }
}

/* --------------------------------------------------------------------------
   3. Home — "Building a Legacy" about band
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .about-ultra-wrapper {
        padding: 5.5rem 0;
    }

    .about-ultra-title {
        font-size: clamp(1.9rem, 3.6vw, 2.6rem);
    }

    .about-content-glass {
        padding: 2.25rem;
    }
}

@media (max-width: 1023px) {

    /* Both columns are already 100% wide here; strip the perspective so the
       video and the glass panel sit flat and full-bleed. */
    .about-ultra-video-col,
    .about-ultra-content-col {
        padding: 1rem 0;
        perspective: none;
    }

    .about-3d-screen,
    .about-content-glass {
        transform: none;
    }

    .about-ultra-container {
        gap: 1.5rem;
    }
}

@media (max-width: 767px) {
    .about-ultra-wrapper {
        padding: 3.75rem 0;
    }

    .about-ultra-container {
        padding: 0 1.25rem;
    }

    .about-content-glass {
        padding: 1.5rem 1.25rem;
        border-radius: 1.25rem;
    }

    .about-ultra-title {
        font-size: 1.85rem;
        line-height: 1.18;
    }

    .about-ultra-desc {
        font-size: 1rem;
        margin-bottom: 1.75rem;
    }

    .about-ultra-cards {
        gap: 0.75rem;
        margin-bottom: 1.75rem;
    }

    .ultra-card {
        padding: 1rem;
        border-radius: 0.85rem;
    }

    .ultra-card:hover {
        transform: none;
    }

    .ultra-card-icon {
        width: 42px;
        height: 42px;
        font-size: 1.05rem;
        margin-right: 0.9rem;
    }

    .ultra-card-text h4 {
        font-size: 0.95rem;
    }

    .ultra-card-text p {
        font-size: 0.72rem;
        letter-spacing: 0.06em;
    }

    .about-ultra-btn {
        width: 100%;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
        letter-spacing: 0.06em;
    }

    .about-video-wrapper {
        aspect-ratio: 16 / 10;
        border-radius: 0.9rem;
    }

    .about-3d-screen {
        border-width: 3px;
        border-radius: 1.1rem;
    }
}

/* --------------------------------------------------------------------------
   4. Home — 3D services carousel
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .services-ultra-3d-wrapper {
        padding: 5.5rem 0;
    }

    .s-title {
        font-size: clamp(2rem, 4.6vw, 3rem);
    }

    .services-header {
        margin-bottom: 3rem;
    }
}

@media (max-width: 991px) {
    .services-ultra-3d-wrapper {
        padding: 4.5rem 0;
    }

    .services-header {
        margin-bottom: 2.5rem;
    }

    .s-subtitle {
        font-size: 1rem;
    }

    .services-3d-swiper {
        padding-bottom: 5rem;
    }
}

@media (max-width: 767px) {
    .services-ultra-3d-wrapper {
        padding: 3.75rem 0;
    }

    /* Slide width comes from Swiper's breakpoints (set in home.blade.php);
       only the height is ours to fix, so the card grows with its copy instead
       of being pinned to 450px. */
    .s-slide {
        height: auto;
        min-height: 26rem;
    }

    .s-image-wrapper {
        height: 11rem;
    }

    .s-card-content {
        padding: 1.4rem 1.25rem 4.25rem;
    }

    /* The button is anchored half outside the card, but .s-card-inner clips
       overflow — on a narrow card that reads as a sliced-off circle. Bring it
       fully inside. */
    .s-explore-btn {
        bottom: 1.1rem;
    }

    .s-service-title {
        font-size: 1.3rem;
    }

    .s-service-desc {
        font-size: 0.9rem;
        -webkit-line-clamp: 3;
    }

    .s-number {
        top: 10px;
        right: 14px;
        font-size: 2.5rem;
    }

    .s-tagline {
        font-size: 0.72rem;
        letter-spacing: 0.14em;
        padding: 0.45rem 1.1rem;
    }

    .s-slider-controls {
        gap: 1.25rem;
    }

    .s-button-prev,
    .s-button-next {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 400px) {
    .s-slide {
        min-height: 24rem;
    }
}

/* --------------------------------------------------------------------------
   5. Home — dual video showcase
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .vshowcase-header {
        margin-bottom: 3rem;
    }

    .vshowcase-subtitle {
        font-size: 1rem;
    }
}

@media (max-width: 575px) {
    .vshowcase-video-frame {
        aspect-ratio: 16 / 11;
    }

    .vshowcase-tagline {
        font-size: 0.7rem;
        letter-spacing: 0.12em;
        padding: 0.45rem 1rem;
    }

    .vshowcase-subtitle {
        font-size: 0.95rem;
        line-height: 1.65;
    }

    .vshowcase-badge-br {
        bottom: 14px;
        right: 12px;
    }

    .vshowcase-stat-num {
        font-size: 1rem;
    }

    .vshowcase-cta-btn {
        width: 100%;
        padding: 1rem 1.25rem;
        font-size: 0.9rem;
    }
}

/* --------------------------------------------------------------------------
   6. Home — "Why choose us"
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .why-showcase-grid {
        gap: 1.1rem;
    }

    /* Put the portrait first so the section opens on the image, not on four
       stacked text cards. */
    .why-hero-card {
        order: -1;
        max-width: 30rem;
        margin: 0 auto 0.5rem;
        transform: none;
    }
}

@media (max-width: 767px) {
    .why-premium-section {
        padding: 3.75rem 0;
    }

    .why-premium-title {
        font-size: clamp(1.7rem, 6.4vw, 2.2rem);
    }

    .why-premium-subtitle {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .why-card {
        padding: 1.05rem 1.1rem;
        border-radius: 1rem;
    }

    .why-card h3 {
        font-size: 1rem;
    }

    .why-card p {
        font-size: 0.88rem;
    }

    .why-icon {
        width: 2.6rem;
        height: 2.6rem;
        border-radius: 0.8rem;
    }

    .why-hero-card {
        padding: 0.65rem;
        border-radius: 1.4rem;
    }

    .why-hero-ring {
        inset: -0.5rem;
        border-radius: 1.7rem;
    }

    .why-hero-badge {
        left: 0.85rem;
        bottom: 0.85rem;
        font-size: 0.7rem;
        padding: 0.5rem 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   7. Home — team carousel
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .team-premium-container {
        gap: 2.25rem;
        padding: 0 1.25rem;
    }
}

@media (max-width: 767px) {
    .team-premium-heading-wrapper h2 {
        font-size: clamp(2rem, 8.4vw, 2.75rem);
    }

    .team-premium-heading-wrapper p {
        font-size: 1rem;
        margin-bottom: 1.5rem;
    }

    .team-premium-content {
        padding: 1.4rem 1.4rem 1.75rem;
    }

    .team-premium-content h3 {
        font-size: 1.45rem;
    }

    .team-premium-bio {
        font-size: 0.9rem;
        margin-bottom: 1.25rem;
    }

    .team-premium-media {
        aspect-ratio: 4 / 4.2;
    }

    .team-premium-nav button {
        width: 44px;
        height: 44px;
    }
}

@media (max-width: 400px) {
    .team-premium-swiper .swiper-slide {
        width: calc(100vw - 4.5rem);
    }
}

/* --------------------------------------------------------------------------
   8. About page
   -------------------------------------------------------------------------- */
@media (max-width: 991px) {
    .ca-hero {
        min-height: auto;
        padding-top: 7.5rem;
        padding-bottom: 4rem;
    }
}

@media (max-width: 767px) {

    /* clamp(…, 3vw, …) barely moves on a phone; the hero headline was running
       to five lines. Scale against viewport width instead. */
    .ca-about-page h1 {
        font-size: clamp(2rem, 8.6vw, 2.9rem) !important;
        line-height: 1.14 !important;
    }

    .ca-section-title {
        font-size: clamp(1.6rem, 6.6vw, 2.1rem);
    }

    .ca-body-text,
    .ca-body-text--lead {
        font-size: 1rem;
        line-height: 1.75;
    }

    .ca-hero {
        padding-top: 6.5rem;
        padding-bottom: 3rem;
    }

    .ca-hero__content {
        padding-bottom: 3rem;
    }

    .ca-btn {
        justify-content: center;
        padding: 0.9rem 1.35rem;
        font-size: 0.9rem;
    }

    .ca-stat-card,
    .ca-value-card,
    .ca-team-card,
    .ca-strength-item {
        padding: 1.35rem;
    }

    .ca-eyebrow {
        font-size: 0.66rem;
        letter-spacing: 0.1em;
        padding: 0.35rem 0.8rem;
    }

    .ca-section-label {
        margin-bottom: 2rem;
    }
}

@media (max-width: 575px) {
    .ca-hero__stats {
        gap: 0.75rem;
    }

    .ca-hero__actions .ca-btn {
        width: 100%;
    }

    .ca-cta__actions .ca-btn {
        width: 100%;
        max-width: 20rem;
    }
}

/* --------------------------------------------------------------------------
   9. Services listing page
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .ca-hero-grid {
        gap: 40px;
    }

    .ca-stage {
        height: 460px;
    }
}

@media (max-width: 991px) {
    .ca-services .ca-hero {
        min-height: auto;
        padding: 150px 0 80px;
    }

    /* .ca-stage-main is absolutely inset into the stage, so a stage that is
       shorter than the card's content lets the chart and KPI row spill out.
       The card is narrower here, hence taller. */
    .ca-services .ca-stage {
        height: 600px;
    }

    /* The logo strip sits half over the hero; on tablet let it clear it. */
    .ca-logos {
        margin-top: 0;
    }

    .ca-logo-strip {
        gap: 18px;
    }

    .ca-service-card {
        min-height: 0;
    }

    .ca-card-body {
        min-height: 0;
    }
}

@media (max-width: 767px) {
    .ca-services .ca-hero {
        padding: 120px 0 60px;
    }

    .ca-services .ca-hero h1 {
        font-size: clamp(2.1rem, 9vw, 3rem);
    }

    .ca-lead {
        font-size: 1rem;
        line-height: 1.7;
        margin-bottom: 26px;
    }

    .ca-primary,
    .ca-secondary {
        width: 100%;
    }

    .ca-trust {
        margin-top: 28px;
    }

    /* Kill the 3D stage below the fold on phones — it is decorative, costs a
       full screen of scrolling, and the bars animate off-canvas anyway. */
    .ca-services .ca-stage {
        display: none;
    }

    .ca-logo-strip img {
        max-height: 30px;
        max-width: 84px;
    }

    .ca-service-image {
        height: 175px;
    }

    .ca-card-body {
        padding: 22px 18px 20px;
    }

    .ca-card-body h3 {
        font-size: 1.15rem;
        padding-right: 0;
    }

    .ca-service-icon {
        top: 146px;
        right: 16px;
        width: 50px;
        height: 50px;
        font-size: 1.1rem;
    }

    .ca-step {
        padding: 22px 18px;
    }

    .ca-step-no {
        margin-bottom: 20px;
    }

    .ca-cta-box .ca-primary {
        justify-self: stretch;
    }
}

/* --------------------------------------------------------------------------
   10. Service detail page
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .dp-hero {
        min-height: auto;
        padding: 160px 0 80px;
    }

    .dp-overview-grid {
        gap: 45px;
    }
}

@media (max-width: 991px) {
    .dp-hero {
        padding: 140px 0 70px;
    }

    .dp-overview,
    .dp-videos,
    .dp-related,
    .dp-final {
        padding: 80px 0;
    }

    /* Playlist becomes a horizontal row under the player; cap its height so it
       does not stretch to the feature video's aspect ratio. */
    .dp-playlist {
        max-height: none;
        gap: 14px;
    }

    .dp-video-item {
        min-height: 0;
        padding: 12px;
    }

    /* The active item slides 4px left; in a stacked list that just looks
       misaligned against its neighbours. */
    .dp-video-item:hover,
    .dp-video-item.active {
        transform: none;
    }

    .dp-video-thumb {
        height: 52px;
    }
}

@media (max-width: 767px) {
    .dp-hero {
        padding: 118px 0 56px;
    }

    .dp-hero h1 {
        font-size: clamp(2rem, 8.8vw, 2.9rem);
    }

    .dp-hero-copy {
        font-size: 1rem;
        line-height: 1.72;
    }

    .dp-crumbs {
        flex-wrap: wrap;
        margin-bottom: 26px;
        font-size: 0.7rem;
    }

    .dp-btn {
        width: 100%;
    }

    /* The parallax image card is pure decoration on a phone and eats 320px. */
    .dp-visual {
        height: 240px;
    }

    .dp-float {
        display: none;
    }

    .dp-rich {
        font-size: 0.95rem;
        line-height: 1.75;
    }

    .dp-rich li {
        padding: 12px 12px 12px 42px;
        font-size: 0.92rem;
    }

    .dp-promise {
        padding: 18px;
    }

    .dp-related-card {
        min-height: 0;
    }

    .dp-modal {
        padding: 16px;
    }

    .dp-modal-close {
        top: -46px;
        right: 0;
    }
}

/* --------------------------------------------------------------------------
   11. Contact page
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
    .cp-hero {
        padding: 10rem 0 4.5rem;
    }

    .cp-title {
        font-size: clamp(2.4rem, 5.4vw, 4rem);
    }

    .cp-form-glass {
        padding: 2.5rem;
    }
}

@media (max-width: 1023px) {
    .cp-container {
        gap: 2.5rem;
    }

    .cp-form-glass {
        transform: none;
    }

    /* Two offices side by side reads better than a single tall column on a
       tablet, where the form has already moved below. */
    .cp-cards-wrapper {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
        gap: 1.5rem;
        perspective: none;
    }
}

@media (max-width: 767px) {

    /* The hero has no inline padding of its own; at 375px the headline ran to
       both edges. */
    .cp-hero {
        padding: 7.5rem 1.25rem 3rem;
        perspective: none;
    }

    .cp-title {
        font-size: clamp(1.95rem, 8.6vw, 2.75rem);
        line-height: 1.16;
        margin-bottom: 1rem;
    }

    .cp-hero-content>p {
        font-size: 1rem !important;
        line-height: 1.7;
    }

    .cp-tag {
        font-size: 0.7rem;
        letter-spacing: 0.14em;
        padding: 0.4rem 1.1rem;
        margin-bottom: 1.1rem;
    }

    .cp-container {
        padding: 0 1.25rem;
        gap: 2rem;
    }

    .cp-cards-wrapper {
        grid-template-columns: 1fr;
        gap: 1.1rem;
    }

    .cp-card {
        padding: 1.5rem 1.35rem;
        border-radius: 1.15rem;
    }

    .cp-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.2rem;
        margin-bottom: 1rem;
    }

    .cp-card-title {
        font-size: 1.2rem;
    }

    .cp-card-details {
        margin-top: 1.1rem;
    }

    .cp-card-details li {
        font-size: 0.95rem;
        gap: 0.75rem;
        margin-bottom: 0.8rem;
    }

    .cp-form-glass {
        padding: 1.5rem 1.25rem;
        border-radius: 1.35rem;
    }

    .cp-form-title {
        font-size: 1.5rem;
        margin-bottom: 1.25rem;
    }

    .cp-input-group {
        margin-bottom: 1.1rem;
        transform: none;
    }

    /* 16px minimum stops iOS Safari zooming the page on focus. */
    .cp-input,
    .cp-custom-select-trigger {
        padding: 1rem 1.15rem;
        font-size: 16px;
        border-radius: 0.85rem;
    }

    .cp-textarea {
        height: 120px;
    }

    .cp-custom-select-option {
        padding: 0.85rem 1.15rem;
        font-size: 0.98rem;
    }

    .cp-custom-select-dropdown {
        max-height: 15rem;
    }

    .cp-btn {
        padding: 1.05rem;
        font-size: 0.95rem;
        transform: none;
    }

    .cp-btn:hover {
        transform: none;
    }

    .cp-map-section {
        padding: 2.5rem 0 4rem;
    }

    .cp-map-header {
        margin-bottom: 1.75rem;
    }

    .cp-map-header h2 {
        font-size: clamp(1.6rem, 6.6vw, 2.1rem);
    }

    .cp-map-header p {
        font-size: 0.98rem;
    }

    .cp-map-container {
        padding: 0 1.25rem;
        perspective: none;
    }

    .cp-map-3d {
        height: 20rem;
        border-radius: 1.25rem;
    }

    .cp-social-section {
        padding: 2.5rem 0 3.5rem;
    }

    .cp-social-title {
        font-size: 1.5rem;
        margin-bottom: 1.5rem;
    }

    .cp-social-icons {
        flex-wrap: wrap;
        gap: 1rem;
        perspective: none;
    }

    .cp-social-icon {
        width: 60px;
        height: 60px;
        font-size: 1.4rem;
        border-radius: 1.1rem;
    }

    .cp-social-icon:hover {
        transform: none;
    }

    /* The ambient blobs are sized in fixed px and push the layout wide. */
    .cp-ambient-1,
    .cp-ambient-2 {
        width: 22rem;
        height: 22rem;
    }
}

/* --------------------------------------------------------------------------
   12. Footer + scroll-to-top
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
    .ca-footer__step {
        font-size: 0.8rem;
        padding: 10px 12px;
    }

    .ca-footer__brand p {
        font-size: 0.92rem;
        margin: 18px 0 20px;
    }

    .ca-footer__title {
        font-size: 1rem;
        margin-bottom: 14px;
    }
}

@media (max-width: 575px) {

    /* The mobile "Client login/Register" bar is fixed to the bottom; lift the
       scroll-to-top button clear of it. */
    .scroll-top {
        right: 1rem;
        bottom: 5rem;
        width: 44px;
        height: 44px;
    }

    .scroll-top svg {
        width: 44px;
        height: 44px;
    }

    .scroll-top svg circle {
        cx: 22;
        cy: 22;
        r: 18;
    }
}

/* --------------------------------------------------------------------------
   13. Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

    .loader-ring-outer,
    .loader-ring-inner,
    .loader-logo,
    .loader-bg-glow,
    .vshowcase-bg-orb,
    .vshowcase-play-btn,
    .premium-modal-glow {
        animation: none !important;
    }
}