/*!
 * CloudTart — Responsive Overlay
 * ------------------------------------------------------------
 * This stylesheet is an ADDITIVE LAYER. It is loaded AFTER both
 * cloudtart-main.css and cloudtart-theme.css. Its only job is to:
 *   1. Close the gap between the theme's "huge desktop" rules and the
 *      "tablet/mobile" rules so MacBook 13"-16", 1366px Windows laptops,
 *      and 1280-1599px screens look right.
 *   2. Prevent overflow / clipping of headings, hero scatter items,
 *      service stack cards, marquee, footer columns at any width.
 *   3. Tighten the mobile experience (320-575px) without altering the
 *      original luxury composition on desktop.
 *
 * Design principles followed:
 *   - NEVER override colors, animations, or @keyframes from cloudtart-theme.
 *   - Use `clamp()` and `min()` to fluidly scale type and spacing.
 *   - Prefer `word-wrap: break-word` and `min-width: 0` to fix flex overflow,
 *     not `white-space: nowrap` removals (which would shift letter span
 *     anim layout).
 *   - All rules are nested inside @media so they cannot leak to the
 *     desktop sizes the user already approved.
 *
 * Breakpoints used:
 *   ≤1599  laptop XL  (MacBook 16")
 *   ≤1439  laptop L   (MacBook 14"-15", 1440px Windows)
 *   ≤1366  laptop M   (common Windows 13.3"-15.6")
 *   ≤1279  laptop S   (MacBook 13", small Windows)
 *   ≤1199  tablet L
 *   ≤991   tablet
 *   ≤767   mobile L
 *   ≤575   mobile
 *   ≤374   mobile S
 */

/* ============================================================
   UNIVERSAL OVERFLOW GUARDS
   ============================================================
   These apply at every viewport. They are safe: they cannot
   re-arrange the layout, only prevent content from spilling. */
/* overflow-x: clip (not hidden) prevents horizontal spill WITHOUT establishing
   a scroll container, so position:sticky descendants (e.g. the mobile services
   stack) keep working. */
html, body { overflow-x: clip; max-width: 100%; }

.container, .mxd-container, .stack-wrapper, .row { min-width: 0; }
.col-xxl-12, .col-xxl-8, .col-xxl-7, .col-xxl-6, .col-xxl-5, .col-xxl-4, .col-xxl-3 { min-width: 0; }

img, video, svg { max-width: 100%; height: auto; }

/* Portfolio Categories headline — explicit sizes per breakpoint so the
   GSAP-pinned title never overflows its section card, with the existing
   line-break safeties kept on top. Final sizes:
       ≥1200px → 74px  (large desktop)
       768-1199px → 55px  (laptop / tablet)
       ≤767px → 48px  (phone)
   `transform-origin: center` anchors the GSAP scroll scaling to the
   centre of the title rather than the top-left default, so the scaled
   text stays inside the section instead of drifting off the right edge. */
.portfolio__text {
    line-height: 1.05;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    transform-origin: center center;
    will-change: transform;
}
/* The section needs overflow control while the title is pinned and
   scaled — otherwise the pinned headline can poke into neighbouring
   sections. `clip` is the safest choice (no scrollbars, no clipping
   of pointer events on the inner content). */
.portfolio__area { overflow: clip; }

@media (min-width: 1200px) {
    .portfolio__area .ct-gallery__head h2 { font-size: 74px !important; }
}
@media (max-width: 1199px) {
    .portfolio__area .ct-gallery__head h2 { font-size: 55px !important; }
}
@media (max-width: 767px) {
    .portfolio__area .ct-gallery__head h2 { font-size: 48px !important; }
}

/* Long URLs / unbreakable strings in body copy never escape their column. */
p, li, a, h1, h2, h3, h4, h5, h6,
.hero__title, .hero__sub-title, .hero__text,
.testimonial__text, .culture__text, .seo__item p,
.service__text, .feature__item p, .workflow__item p,
.business__hours-text, .careers__text, .additional__content p,
.process__item p, .blog__title-2, .contact__info-text,
.footer__widget p, .footer__contact, .footer__link,
.portfolio__category, .portfolio__title {
    overflow-wrap: anywhere;
    word-break: break-word;
    hyphens: auto;
}

/* ============================================================
   ≤1599px — MacBook 16" Pro and similar
   ============================================================ */
@media (max-width: 1599px) {
    .hero__title {
        font-size: clamp(2.75rem, 6.5vw, 5rem);
    }
    .webdesign__hero-title { font-size: clamp(2.5rem, 4.8vw, 4rem); }
    .team__hero-title      { font-size: clamp(2.5rem, 4.8vw, 4rem); }
    .services__hero-title  { font-size: clamp(2.5rem, 6.5vw, 5rem); }
    .header_v1 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; }
    .header_v2 { font-size: clamp(2rem, 4vw, 3.5rem); line-height: 1.15; }
    .header_v3 { font-size: clamp(1.75rem, 3.5vw, 3rem); line-height: 1.2; }

    .mxd-counter__number,
    .mxd-stats-number { font-size: clamp(3rem, 6vw, 6rem); }
}

/* ============================================================
   ≤1439px — MacBook 14" / 15" and 1440-class Windows laptops
   ============================================================ */
@media (max-width: 1439px) {
    .container { max-width: 1240px; padding-left: 24px; padding-right: 24px; }
    .mxd-container.grid-container { padding-left: 24px; padding-right: 24px; }

    .hero__title { font-size: clamp(2.5rem, 5.8vw, 4.25rem); }
    .webdesign__hero-title { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
    .team__hero-title      { font-size: clamp(2.25rem, 4.4vw, 3.5rem); }
    .services__hero-title  { font-size: clamp(2.25rem, 5.5vw, 4.25rem); }

    /* Hero scatter items can't sit outside hero container at this width. */
    .hero-scatter-container { left: 0; right: 0; }
    .hero-scatter-item { font-size: 14px; padding: 8px 14px; }

    /* Stack section gives breathing room. */
    .padding-stacked-section { padding-top: 80px; padding-bottom: 80px; }
    .mxd-services-stack__inner { padding: 36px; }
    /* Title size now handled by the explicit per-band rules below
       (≥1600 / 1200-1599 / 992-1199 / 768-991 / ≤767). */

    /* Service icons row spacing */
    .service__item-large { padding: 24px; }
    .service__item-large h3 { font-size: 1.4rem; }
    .service__item-large p, .service__features li { font-size: 0.95rem; }

    /* Three-pillars typography only — layout owned by cloudtart-overrides.css */
    .service__title { font-size: clamp(1.4rem, 2vw, 1.8rem); }

    /* Footer columns tighten */
    .footer__inner { gap: 24px; }
}

/* ============================================================
   ≤1366px — Common 13.3" / 15.6" Windows laptops (1366×768)
   ============================================================ */
@media (max-width: 1366px) {
    .container { max-width: 1160px; }

    .hero__area { padding-top: 120px; padding-bottom: 60px; }
    .hero__title { font-size: clamp(2.25rem, 5.2vw, 3.75rem); }
    .hero__sub-title, .hero__text { font-size: clamp(1rem, 1.2vw, 1.15rem); max-width: 780px; margin-left: auto; margin-right: auto; }

    .header_v1, .header_v2, .header_v3 { font-size: clamp(1.75rem, 3.5vw, 2.75rem); }

    /* Portfolio hero glass cards never overlap headline. */
    .service__hero-left-2 .image-1,
    .service__hero-left-2 .image-2,
    .service__hero-left-2 .image-3,
    .service__hero-left-2 .image-4 { transform: scale(0.85); }

    /* Counter numbers smaller so they don't blow the column width. */
    .counter__number { font-size: clamp(3rem, 6vw, 5rem); }
    .counter__item-2 p { font-size: 0.95rem; }

    /* Hero glass cards on Leaders' Choice page */
    .hero-glass-card { padding: 14px 16px; font-size: 14px; }

    /* Portfolio filter buttons wrap cleanly */
    .portfolio__filter-wrapper { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
    .portfolio__filter-btn { white-space: nowrap; }

    /* About section image stacks better */
    .about__img { max-width: 100%; }
    .about__img-right img { max-width: 320px; height: auto; }

    /* Marquee item height */
    .marquee__top .marquee__item, .marquee__bottom .marquee__item { padding: 12px; }
    .marquee__item.has-caption p { font-size: clamp(1.5rem, 3vw, 2.5rem); }

    /* Service overview grid (What We Do) */
    .service__heading-row { flex-wrap: wrap; gap: 16px; }
    .service__cta-wrapper { margin-top: 12px; }

    /* Stats cards row gap & font sizes */
    .mxd-stats-cards__inner { padding: 32px; }
    .mxd-stats-number { font-size: clamp(2.5rem, 5vw, 4.5rem); }
    .mxd-counter__descr { font-size: 0.9rem; }
}

/* ============================================================
   ≤1279px — MacBook 13" / small Windows laptops
   ============================================================ */
@media (max-width: 1279px) {
    .container { max-width: 1080px; }
    .pt-150 { padding-top: 100px; }
    .pb-150 { padding-bottom: 100px; }
    .pt-140 { padding-top: 90px; }
    .pb-140 { padding-bottom: 90px; }
    .pt-130 { padding-top: 90px; }
    .pb-130 { padding-bottom: 90px; }
    .pb-200 { padding-bottom: 120px; }

    .hero__title { font-size: clamp(2rem, 5vw, 3.25rem); letter-spacing: -0.5px; }
    .webdesign__hero-title,
    .team__hero-title,
    .services__hero-title { font-size: clamp(2rem, 4vw, 3rem); }

    /* Services stack stays pinned but each card is more compact.
       Title size handled by the explicit per-band rule (992-1199px
       gives it 3.4rem, see top of file). */
    .mxd-services-stack__inner { padding: 28px; gap: 16px; }
    .mxd-services-cards__tags { gap: 6px; }
    .tag.tag-default { font-size: 12px; padding: 4px 10px; }

    /* Team stack adjusts size variant offsets */
    .team-stack-item--lg { transform: scale(0.92); }
    .team-stack-item--md { transform: scale(0.88); }
    .team-stack-item--sm { transform: scale(0.84); }

    /* Hero glass cards smaller */
    .hero-glass-card { transform: scale(0.85); }

    /* Service overview cards stack 2-up at this width to avoid 4-col cram */
    .service__item-large { padding: 20px; }
    .service__icon i { font-size: 1.6rem; }
}

/* ============================================================
   STACK BANNERS — keep clear of the fixed left header
   ============================================================
   The header is `position: fixed; left: 0; width: 100px` (62px at
   1200-1919px). The services-stack and team-stack containers extend
   full-bleed and on smaller desktops their banners (Web & Experience,
   Growth & Performance, Capture & Motion, Brand & Identity) slip
   underneath the header column, creating the "overflow into the side
   bar" effect. Add clearance at desktop sizes only — at ≤991px the
   header becomes a top bar, so no left clearance is needed. */
/* Desktop: tighten the services-stack so the cards don't bleed under
   the fixed-left header column. We constrain the container's max-width
   AND center it inside the viewport with margin:auto. The 100px of
   left clearance accounts for the 100px-wide sidebar; the right
   clearance is a soft visual breath. */
@media (min-width: 1200px) {
    .padding-stacked-section .mxd-container.grid-container,
    .mxd-section .mxd-container.grid-container {
        max-width: 1280px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 60px;
        padding-right: 60px;
    }
}

@media (min-width: 1200px) and (max-width: 1599px) {
    .padding-stacked-section .mxd-container.grid-container,
    .mxd-section .mxd-container.grid-container {
        max-width: 1180px;
        padding-left: 50px;
        padding-right: 50px;
    }
    .services-stack { min-height: 560px; }
    .mxd-services-stack__inner { padding: 32px; }
    /* Don't cap the image CONTAINER (.services-stack__image) — the
       theme makes it a position:absolute fill of the card, so a
       container max-width clips the right-anchored picture mid-frame.
       Instead cap the IMG itself; with right:0 / bottom:-5% the
       picture sits in the lower-right corner without bleeding past
       the card width. */
    .services-stack__image .service-img { max-width: 380px; }
    /* Title was set to 7rem (~112px) by the theme at this breakpoint —
       far too large for the card width. 4.5rem reads commanding without
       crowding the description. */
    .mxd-services-stack__title h3 { font-size: 4.5rem !important; line-height: 1.05; }
    .mxd-services-stack__info p { font-size: 1rem; line-height: 1.55; }
}

@media (min-width: 1600px) {
    /* Very wide monitors get the luxury upscale, but still smaller
       than the theme's 7rem — the card width grows but the headline
       should remain visually proportional to the description column. */
    .mxd-services-stack__title h3 { font-size: 5.5rem !important; line-height: 1.05; }
    .services-stack__image .service-img { max-width: 460px; }
}

/* Portfolio headline size is owned by the explicit per-breakpoint
   rules on `.portfolio__area .ct-gallery__head h2` near the top of
   this file — old `.portfolio__text` clamp() rules retired. */

@media (min-width: 992px) and (max-width: 1199px) {
    .padding-stacked-section .mxd-container.grid-container,
    .mxd-section .mxd-container.grid-container {
        max-width: 1040px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 50px;
        padding-right: 40px;
    }
    .services-stack { height: auto; min-height: 520px; }
    .mxd-services-stack__inner { padding: 28px; }
    /* Image max-width applied to the IMG, not the container, so the
       theme's absolute-positioned fill still works. */
    .services-stack__image .service-img { max-width: 320px; }
    /* Theme has no explicit title size at this band — h3 default is
       ~2rem which the user found too small. 3.4rem keeps it readable
       at laptop widths without crowding the description column. */
    .mxd-services-stack__title h3 { font-size: 3.4rem !important; line-height: 1.05; }
    .mxd-services-stack__info p   { font-size: 0.95rem; line-height: 1.55; }
}

/* ============================================================
   768-991px — Tablet landscape / small portrait
   ============================================================
   At this width:
   - The fixed-left luxury header is too tall for landscape tablets,
     so collapse it into a horizontal top bar (mirroring what main.css
     does at ≤767px). mix-blend-mode is disabled here because the
     glass effect doesn't translate to the inline bar.
   - Services-stack typography needs a sweet spot between desktop and
     phone — bigger than mobile, smaller than the original luxury size.
   - Portfolio headline gets its own clamp. */
@media (min-width: 768px) and (max-width: 991px) {
    .header__area {
        padding: 0 15px;
        width: 100%;
        height: auto;
        min-height: auto;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        border-right: none;
        mix-blend-mode: normal !important;
    }
    .header__inner {
        padding: 12px 0;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        height: auto;
        position: static;
        width: 100%;
    }
    .header__support { display: none; }

    .mxd-services-stack__number  { font-size: 4rem    !important; }
    /* Bumped from 1.8rem — user reported the title felt too small
       on tablets relative to the description. */
    .mxd-services-stack__title h3 { font-size: 2.6rem !important; line-height: 1.1; }
}

/* ============================================================
   ≤1199px — tablet L (also catches some narrow laptops)
   ============================================================ */
@media (max-width: 1199px) {
    .container { max-width: 960px; }

    /* Three-pillars: hide the floating images column, keep just the text list. */
    .service__img-wrapper { display: none; }
    .service__list-wrapper .col-xxl-8 { flex: 0 0 100%; max-width: 100%; }

    /* Service overview (What We Do) goes 2 per row */
    .service__area .col-xxl-3.col-xl-3.col-lg-6 { flex: 0 0 50%; max-width: 50%; }

    /* Portfolio categories 3 per row */
    .portfolio__list-1 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
    .portfolio__list-1 .portfolio__item { width: auto; }

    /* Webdesign features become 1 column on the right */
    .webdesign__hero-features .row > .col-xxl-6 { flex: 0 0 100%; max-width: 100%; }

    /* Stats cards single column at this width */
    .mxd-stats-cards__item { flex: 0 0 100% !important; max-width: 100% !important; }

    /* Footer single row, columns wrap */
    .footer__inner { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 32px; }
    .footer__widget,
    .footer__widget-2,
    .footer__widget-3,
    .footer__widget-4 { flex: 0 0 calc(50% - 16px); max-width: calc(50% - 16px); }
    .footer__copyright, .footer__subscribe { flex: 0 0 100%; max-width: 100%; }
}

/* ============================================================
   ≤991px — tablet (portrait)
   ============================================================ */
@media (max-width: 991px) {
    .container { max-width: 720px; }

    .header__inner { padding: 16px 0; }
    .header__support { display: none; }

    .hero__title { font-size: clamp(1.875rem, 6vw, 2.75rem); }
    .hero__sub-title, .hero__text { font-size: 1rem; }

    /* Three-pillars layout — owned by .service__list-wrapper rules in
       cloudtart-overrides.css. Only typographic tweaks live here. */

    /* About section: stack image grid on top of content */
    .about__content-wrapper { display: flex; flex-direction: column; gap: 32px; }
    .about__img-right { margin-left: 0; }
    .about__img-right img { max-width: 280px; }

    /* mxd-section overall: keep within viewport and tighten vertical rhythm.
       overflow: clip (not hidden) still prevents horizontal spill but does NOT
       establish a scroll container, so the mobile services-stack position:sticky
       (and any pinned child) keeps working. */
    .mxd-section { overflow: clip; padding: 40px 0; }
    .mxd-section .mxd-container.grid-container {
        max-width: 720px;
        margin-left: auto;
        margin-right: auto;
        padding-left: 16px;
        padding-right: 16px;
    }

    /* SERVICES STACK — full GSAP-aware un-pin
       The desktop layout pins each card on top of the previous via a
       transformed `.pin-spacer` injected by ScrollTrigger. On tablet/phone
       we want the cards to flow naturally; the JS now skips creating the
       trigger below 992px and clears inline transforms on resize, and the
       rules below neutralise any leftover GSAP styles (height, padding-
       bottom, transform, position:fixed) so the stack-items render as a
       clean vertical column with no jumps. */
    .padding-stacked-section { padding-top: 60px; padding-bottom: 60px; }
    .padding-stacked-section .pin-spacer {
        height: auto !important;
        min-height: 0 !important;
        padding: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        inset: auto !important;
        transform: none !important;
    }
    .stack-wrapper,
    .stack-wrapper.in-content-stack {
        margin-top: 0 !important;
        overflow: visible;
        transform: none !important;
        position: relative !important;
        inset: auto !important;
        width: 100% !important;
    }
    .stack-offset { display: none !important; }
    .services-stack {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        min-height: 0 !important;
        overflow: visible;
        gap: 20px;
        padding: 0;
        position: relative !important;
        transform: none !important;
    }
    /* stack-item is just the slot; the card visual lives on its inner.
       We must blow away every desktop-leftover style: absolute, inset,
       opacity, visibility, transform, padding-bottom: 3rem. */
    .stack-item {
        position: static !important;
        width: 100% !important;
        height: auto !important;
        min-height: 0 !important;
        inset: auto !important;
        padding: 0 !important;
        margin: 0 0 20px !important;
        transform: none !important;
        opacity: 1 !important;
        visibility: visible !important;
        display: flex !important;
    }
    .stack-item:last-child { margin-bottom: 0 !important; }

    /* The card surface — restore comfortable inner padding now that it's
       no longer constrained by the desktop pin geometry. */
    .mxd-services-stack__inner {
        width: 100%;
        height: auto !important;
        flex-direction: column;
        padding: 2.4rem 2rem 2.4rem !important;
        border-radius: 24px;
        gap: 16px;
    }
    .mxd-services-stack__title.width-60,
    .mxd-services-stack__info.width-60 { width: 100% !important; }
    .services-stack__image { max-width: 220px; margin: 0 auto; }

    /* FOOTER — blurred photographic background for tablet/mobile.
       The desktop design positions the footer-img at 120% width / right-top
       which doesn't translate on a narrow viewport. We replace the inline
       bg with two pseudo layers: a blurred photo + a 70% dark scrim, so
       the white footer text stays readable. The blurred ::before is scaled
       1.1× to prevent the soft edges showing inside the footer rectangle. */
    .footer__area {
        position: relative;
        overflow: hidden;
        background-image: none !important;
    }
    .footer__area::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: url("../images/backgrounds/footer-img.jpg");
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
        filter: blur(8px);
        transform: scale(1.1);
        z-index: 0;
    }
    .footer__area::after {
        content: "";
        position: absolute;
        inset: 0;
        background-color: rgba(13, 27, 46, 0.7);
        z-index: 0;
    }
    .footer__top,
    .footer__btm { position: relative; z-index: 2; }
    .footer__inner {
        background-color: transparent !important;
        display: flex !important;
        flex-direction: column !important;
        padding-left: 24px !important;
        padding-right: 24px !important;
        padding-top: 50px !important;
        margin-right: 0 !important;
        gap: 30px;
    }
    .footer__widget,
    .footer__widget-2,
    .footer__widget-3,
    .footer__widget-4 {
        width: 100% !important;
        max-width: 100%;
        padding: 0 !important;
    }
    .footer__copyright {
        text-align: center;
        padding: 20px 0 !important;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        width: 100% !important;
    }

    /* Team stack falls back to grid */
    .team-stack-wrapper { display: block !important; }
    .team-stack-container { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 24px; position: static !important; transform: none !important; }
    .team-stack-item { position: static !important; transform: none !important; opacity: 1 !important; }

    /* Hero scatter container: hide on small screens since absolute positions
       break the layout. Title still reads. */
    .hero-scatter-container { display: none; }

    /* Service overview 2x2 grid */
    .service__area .col-xxl-3.col-xl-3.col-lg-6 { flex: 0 0 50%; max-width: 50%; }

    /* Portfolio categories 2 per row */
    .portfolio__list-1 { grid-template-columns: repeat(2, 1fr); }

    /* Contact info cards 2 per row */
    .contact__info .col-xxl-3 { flex: 0 0 50%; max-width: 50%; }

    /* Business hours stacks */
    .business__hours .row > [class*="col-xxl-"] { flex: 0 0 100%; max-width: 100%; }
    .business__hours-image { margin-top: 32px; }

    /* CTA actions wrap */
    .cta__actions { flex-wrap: wrap; justify-content: center; gap: 16px; }

    /* Stats cards (About) — image stays inside card */
    .mxd-stats-cards__inner { padding: 28px; }
    .mxd-stats-cards__image img { max-width: 140px; }

    /* Testimonials: text + carousel stack */
    .testimonial__area .row.align-items-center > [class*="col-xxl-"] { flex: 0 0 100%; max-width: 100%; }
    .testimonial__content { margin-bottom: 32px; }

    /* Marquee height tightens */
    .marquee__item img { max-height: 220px; object-fit: cover; }
    .marquee__item.has-caption p { font-size: 1.5rem; }
}

/* ============================================================
   ≤767px — mobile (landscape) / large phone
   ============================================================ */
@media (max-width: 767px) {
    .container { max-width: 100%; padding-left: 20px; padding-right: 20px; }

    /* Section padding compresses */
    .pt-150, .pt-140, .pt-130, .pt-100, .pt-80 { padding-top: 60px; }
    .pb-150, .pb-140, .pb-130, .pb-100, .pb-200 { padding-bottom: 60px; }

    /* Headings */
    .hero__title { font-size: clamp(1.625rem, 7vw, 2.25rem); letter-spacing: 0; }
    .webdesign__hero-title,
    .team__hero-title,
    .services__hero-title { font-size: clamp(1.75rem, 7vw, 2.5rem); }
    .header_v1, .header_v2, .header_v3 { font-size: clamp(1.5rem, 5vw, 2rem); line-height: 1.25; }

    /* Mobile hero: remove the 100vh that desktop relies on. Without this
       override, every hero section is exactly the height of the phone
       viewport with the heading floating in the middle and a tall black
       band stretching down. We collapse it to content-height with top
       padding for the fixed header. */
    .hero__area { min-height: auto; }
    .hero__content {
        height: auto;
        min-height: auto;
        padding-top: 110px;
        padding-bottom: 80px;
        display: block;
    }
    .hero__title-wrapper { margin-bottom: 32px; }
    .hero__sub-title, .hero__text { padding-top: 12px; }

    /* Contact-page hero: title + paragraph, no carousel — keep tight. */
    .contact__hero { padding-top: 80px; padding-bottom: 60px; }
    .contact__hero .hero__content { padding-top: 0; padding-bottom: 0; }
    .contact__hero .hero__text { margin-top: 18px; padding-left: 0; padding-right: 0; }

    /* Service stack cards: single column with bigger top art and
       luxury-friendly typography. Padding tightens further for phones,
       header (number + title) wraps to a column at narrow widths. */
    .mxd-services-stack__inner { padding: 2rem 1.5rem !important; }
    .mxd-services-stack__header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .mxd-services-stack__number   { font-size: 3rem !important; }
    .mxd-services-stack__title h3 { font-size: 1.6rem !important; line-height: 1.2; }
    .mxd-services-stack__info p   { font-size: 0.95rem; line-height: 1.6; }
    .mxd-services-stack__controls { flex-wrap: wrap; gap: 8px; margin-top: 12px; }
    .mxd-services-stack__controls a { font-size: 0.85rem; padding: 6px 12px; }
    .mxd-services-stack__works    { flex-wrap: wrap; gap: 10px; }
    .mxd-services-cards__tags     { flex-wrap: wrap; gap: 6px; }
    .mxd-services-cards__tags .tag { font-size: 0.8rem; padding: 4px 10px; }
    .services-stack__image { max-width: 180px; }

    /* Portfolio headline size handled by the explicit per-breakpoint
       rules at the top of this file. Keep the row overflow guard so
       the GSAP-pinned title can't poke past the section box. */
    .portfolio__area .top_row { overflow: hidden; }

    /* Service overview 1 column */
    .service__area .col-xxl-3.col-xl-3.col-lg-6 { flex: 0 0 100%; max-width: 100%; }

    /* SEO operations 1 column */
    .seo__item { padding: 24px; }
    .seo__number { font-size: 2rem; }

    /* Portfolio categories 1 per row */
    .portfolio__list-1 { grid-template-columns: 1fr; gap: 16px; }

    /* Portfolio grid */
    .portfolio__thumb { aspect-ratio: 16/10; }
    .portfolio__overlay { padding: 16px; }
    .portfolio__title { font-size: 1.25rem; }
    .portfolio__category { font-size: 0.9rem; }
    .portfolio__filter-wrapper { gap: 8px; }
    .portfolio__filter-btn { font-size: 0.8rem; padding: 8px 14px; }

    /* Contact info cards 1 column */
    .contact__info .col-xxl-3 { flex: 0 0 100%; max-width: 100%; }
    .contact__info-item { padding: 24px; }

    /* Form fields stack */
    .contact__form-inner .col-xxl-6.col-xl-6.col-lg-6.col-md-6 { flex: 0 0 100%; max-width: 100%; }
    .service-options { grid-template-columns: 1fr; }

    /* FAQ */
    .faq__question { padding: 16px 18px; gap: 10px; flex-wrap: wrap; }
    .faq__question h3 { font-size: 1rem; flex: 1 1 60%; }
    .faq__icon { flex: 0 0 auto; }
    .faq__answer { padding: 0 18px 18px; }

    /* Counter / stats: 2×2 grid with hairline divider borders to give
       the block visual structure on phones (replaces the floating
       `.counter__border` line, which doesn't line up at this width). */
    .counter__wrapper-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0 !important;
    }
    .counter__item-2 {
        padding: 25px 10px !important;
        min-height: 140px !important;
        border-right: 1px solid var(--white-2);
        border-bottom: 1px solid var(--white-2);
    }
    .counter__item-2:nth-child(2n) { border-right: none; }
    .counter__number { font-size: 40px !important; line-height: 1.1; }
    .counter__item-2 p { font-size: 13px !important; }
    .counter__border { display: none; }

    /* Video frame */
    .single__thumb video { width: 100%; height: auto; }
    .svgstar, .shape-2 { display: none; }

    /* Three pillars layout is owned by the .ct-pillar-card rules in
       cloudtart-overrides.css (grid-based card with image). No
       per-breakpoint padding tweaks needed here. */

    /* Team stack single column */
    .team-stack-container { grid-template-columns: 1fr !important; gap: 20px; }
    .team-stack-frame--lg, .team-stack-frame--md, .team-stack-frame--sm { max-width: 240px; margin: 0 auto; }

    /* Culture */
    .culture__item { padding: 24px; text-align: center; }
    .culture__icon i { font-size: 1.8rem; }
    .culture__title { font-size: 1.2rem; }

    /* Stats cards stack vertically */
    .mxd-stats-cards__inner { padding: 24px; min-height: auto; }
    .mxd-stats-number { font-size: clamp(2rem, 8vw, 3rem); }
    .mxd-stats-cards__image img { max-width: 100px; }
    .mxd-avatars__item { width: 40px; height: 40px; }

    /* Off-canvas */
    .offcanvas__area { width: 100%; max-width: 100%; }
    .offcanvas__body { flex-direction: column; gap: 24px; padding: 24px; }
    .offcanvas__left, .offcanvas__mid, .offcanvas__right { width: 100%; }
    .mean-nav .menu-anim a { font-size: 1.6rem; }

    /* Footer */
    .footer__widget,
    .footer__widget-2,
    .footer__widget-3,
    .footer__widget-4 { flex: 0 0 100%; max-width: 100%; }
    .footer__row { padding-top: 40px; padding-bottom: 40px; }

    /* CTA buttons */
    .btn-item, .wc-btn-primary, .wc-btn-secondary { font-size: 0.95rem; padding: 12px 22px; }
    .cta__circle-btn .circle-btn { width: 110px; height: 110px; }
    .cta__circle-btn .btn-text { font-size: 0.8rem; }

    /* Marquee */
    .marquee__item img { max-height: 160px; }
    .marquee__item.has-caption p { font-size: 1.2rem; }

    /* Testimonials */
    .testimonial__item { padding: 24px; }
    .testimonial__text { font-size: 0.95rem; }

    /* Webdesign hero features */
    .webdesign__hero-features .row > .col-xxl-6 { flex: 0 0 100%; max-width: 100%; }
    .hero-feature-item { gap: 14px; padding: 16px 0; }
    .feature-number { font-size: 1.4rem; flex: 0 0 auto; }

    /* Workflow / process */
    .workflow__area .col-xxl-3,
    .process__area  .col-xxl-6 { flex: 0 0 100%; max-width: 100%; }

    /* Additional services 1 column */
    .additional__services .col-xxl-6 { flex: 0 0 100%; max-width: 100%; }
    .additional__item { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px; }

    /* About section — copy block sits below the image stack, full width.
       The desktop has `max-width: 440px` on the paragraph which becomes
       too narrow on phones. */
    .about__content { padding-top: 30px; }
    .about__content p { max-width: 100%; font-size: 16px; margin-bottom: 30px; }
    .about__area .sec-title {
        font-size: clamp(32px, 8vw, 48px) !important;
        max-width: 100%;
    }

    /* General typography safety net for phones. Existing rules earlier in
       this block set hero__title clamp; the values here win because they
       come later in cascade and are safe to override at the same breakpoint. */
    .sec-title { font-size: clamp(28px, 7vw, 42px) !important; line-height: 1.1; }
    h1, h2 { max-width: 100%; word-wrap: break-word; overflow-wrap: break-word; }
    .hero__title {
        font-size: clamp(28px, 8vw, 40px) !important;
        line-height: 1.2;
        word-break: break-word;
    }

    /* Blog grid — stack the cards on a single column on phones, with a
       clean inter-card gap that doesn't rely on Bootstrap's gutter math. */
    .blog__area-2 .row { flex-direction: column; gap: 20px; }
    .blog__area-2 [class*="col-"] { width: 100% !important; max-width: 100%; flex: 0 0 100%; }

    /* Portfolio lists (both legacy "categories" and the new "projects"
       grid on the homepage) collapse to one column on phones. */
    .portfolio__list-1,
    .portfolio__list-projects {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* Section-level safety: keep any leaked content inside the viewport. */
    section { max-width: 100%; overflow-x: hidden; }
}

/* Tablet portfolio grid — two columns instead of one or three. */
@media only screen and (min-width: 768px) and (max-width: 991px) {
    .portfolio__list-1,
    .portfolio__list-projects {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 20px !important;
    }
}

/* ============================================================
   ≤575px — mobile (portrait, common phones)
   ============================================================ */
@media (max-width: 575px) {
    .container { padding-left: 16px; padding-right: 16px; }

    .hero__title { font-size: clamp(1.5rem, 8vw, 2rem); }
    .header_v1, .header_v2, .header_v3 { font-size: clamp(1.375rem, 6vw, 1.75rem); }

    /* Counters become single column on small phones */
    .counter__wrapper-2 { grid-template-columns: 1fr; }

    /* Hero stats inline → grid */
    .team__hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .hero-stat-item { text-align: center; }
    .stat-number { font-size: 1.4rem; }

    /* CTA gold button doesn't crowd icons */
    .btn-item, .wc-btn-primary, .wc-btn-secondary { padding: 10px 18px; font-size: 0.9rem; }

    /* DMCA / copyright row sits centered */
    .footer__copyright, .footer__subscribe { text-align: center; }

    /* Off-canvas search input full width */
    .offcanvas__search form { width: 100%; }
    .offcanvas__search input { width: calc(100% - 50px); }

    /* Marquee gets shorter */
    .marquee__item img { max-height: 120px; }
}

/* ============================================================
   ≤374px — extra small (legacy / SE-class)
   ============================================================ */
@media (max-width: 374px) {
    .hero__title { font-size: 1.4rem; }
    .stat-number { font-size: 1.2rem; }
    .counter__number { font-size: 2rem; }
    .portfolio__filter-btn { font-size: 0.75rem; padding: 6px 10px; }
}

/* ============================================================
   ULTRA-WIDE — keep generous max-width but cap typography sanity
   ============================================================ */
@media (min-width: 1920px) {
    .container { max-width: 1500px; }
    .hero__title { max-width: 1200px; }
}