/* ==========================================================================
   BOSSMAN — RESPONSIVE LAYER
   File:    assets/css/responsive.css
   Load:    LAST in the stylesheet chain (after main.css / custom.css /
            hero-rotator.css / bim-facade.css)
   Purpose: Responsiveness only. No redesign, no colour/branding changes,
            no content changes, no clamp(), no layout re-architecture.
            Every rule below exists to fix a measured breakage at a specific
            viewport width.

   Breakpoint hierarchy (aligned to the template's own queries so this file
   never fights main.css):
     min-width: 2560   2K / 4K
     min-width: 1921   Large desktop
     max-width: 1600   Small desktop
     max-width: 1399   Laptop
     max-width: 1199   Tablet landscape / small laptop
     max-width:  991   Tablet portrait   (Bootstrap lg boundary)
     max-width:  767   Large mobile      (Bootstrap md boundary)
     max-width:  575   Mobile            (Bootstrap sm boundary)
     max-width:  390   Small mobile
     max-width:  360   Very small mobile
   ========================================================================== */


/* ==========================================================================
   00. GLOBAL SAFETY NET
   ========================================================================== */

/* Stops any single mis-sized child from creating a horizontal scrollbar.
   `clip` is used instead of `hidden` because `hidden` turns the element into
   a scroll container and would break position:sticky on the header. */
@media (max-width: 1399px) {
    html {
        overflow-x: clip;
    }
}

/* Media never wider than its box. `img` already has max-width:100% in
   main.css; these are the elements it missed. */
video,
canvas,
iframe,
svg:not([width]) {
    max-width: 100%;
}

/* Long unbroken strings (URLs, emails, part numbers) must wrap rather than
   push the layout open. Scoped to text containers only. */
@media (max-width: 767px) {

    p,
    li,
    td,
    dd,
    figcaption,
    blockquote,
    .title,
    .sub-title,
    .section-title,
    .card-text {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}


/* ==========================================================================
   01. CONTAINERS
   main.css sets .container{max-width:1795px} and .container-2{max-width:1425px}
   unconditionally, which is the intended desktop composition and is kept.
   Only the two ends of the scale need work.
   ========================================================================== */

/* --- 2K / 4K: keep the design from stranding in the middle of the screen. */
@media (min-width: 2560px) {

    .container {
        max-width: 2100px;
    }

    .container-2 {
        max-width: 1700px;
    }
}

/* --- Mobile: 12px of Bootstrap gutter leaves text almost touching the
   screen edge. 16px reads as intentional and matches the template's own
   inner spacing. Row/column gutters are unchanged, so nothing shifts
   relative to anything else — the whole grid just insets by 4px. */
@media (max-width: 575px) {

    .container,
    .container-2,
    .container-fluid {
        padding-left: 16px;
        padding-right: 16px;
    }
}

@media (max-width: 360px) {

    .container,
    .container-2,
    .container-fluid {
        padding-left: 14px;
        padding-right: 14px;
    }
}


/* ==========================================================================
   02. HEADER / NAVIGATION
   The mobile trigger (.sidebar-icon > .sidebar-trigger.open) is restored in
   header.php. Below 992px it opens .sidebar-area, which the template already
   styles for mobile (white background, 400px / 320px widths, light logo).
   ========================================================================== */

/* Base state: hidden. The two queries below are the single source of truth
   for when the trigger appears, so no Bootstrap display utility is used on it
   (.d-lg-none would apply display:none!important from 992px up, which
   collides with meanmenu's <= 992px mobile mode and leaves 992px exactly
   with no navigation at all). */
.header .primary-header-inner .header-right-wrap .sidebar-icon {
    display: none;
}

/* The trigger sits in .header-right-wrap, whose other children (phone link,
   Get a Quote) are hidden on small screens. Keep the wrap itself visible and
   right-aligned so the button never collapses to zero width.

   NOTE the 992/993 boundary: meanmenu is initialised with
   meanScreenWidth:"992" and treats <= 992 as mobile, so the desktop menu is
   already hidden AT 992px. The trigger must therefore still be showing at
   992px, not from 991px down, or 992px exactly has no navigation at all. */
@media (max-width: 992px) {

    .header .primary-header-inner .header-right-wrap {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 10px;
        margin-left: auto;
    }

    .header .primary-header-inner .header-right-wrap .sidebar-icon {
        display: block;
    }

    .header .primary-header-inner .header-right-wrap .sidebar-icon .sidebar-trigger.open {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background-color: transparent;
        border-radius: 50%;
        cursor: pointer;
    }

    .header .primary-header-inner .header-right-wrap .sidebar-icon .sidebar-trigger.open svg {
        width: 16px;
        height: 16px;
    }
}

/* From 993px up the desktop menu is the navigation, so the trigger stays out. */
@media (min-width: 993px) {

    .header .primary-header-inner .header-right-wrap .sidebar-icon {
        display: none;
    }
}

/* Header height and logo across the scale. */
@media (max-width: 767px) {

    .header .primary-header-inner {
        min-height: 70px;
    }

    .header-logo img,
    .side-menu-logo img {
        max-width: 140px;
        height: auto;
    }
}

@media (max-width: 390px) {

    .header-logo img {
        max-width: 120px;
    }
}

/* --- Slide-in panel ------------------------------------------------------ */

/* .sidebar-area is width:550px and position:fixed. Below 576px that is wider
   than the screen, so the panel would sit partly off-canvas when open. */
@media (max-width: 575px) {

    .sidebar-area {
        width: 100%;
        max-width: 320px;
    }
}

@media (max-width: 360px) {

    .sidebar-area {
        max-width: 100%;
        padding: 40px 24px 60px 24px;
    }
}

/* At <=992px main.css repaints the panel white but leaves the close icon
   white — invisible. Restore contrast without changing the design. */
@media (max-width: 992px) {

    .sidebar-area .sidebar-trigger.close,
    .sidebar-area .sidebar-trigger.close svg {
        color: var(--tl-color-heading-primary);
        fill: currentColor;
    }

    .sidebar-area .side-menu-content .side-menu-about .title,
    .sidebar-area .side-menu-content .side-menu-header,
    .sidebar-area .side-menu-content .side-menu-item .side-menu-title {
        color: var(--tl-color-heading-primary);
    }
}

/* The panel scrolls; give the last item room above the iOS home indicator. */
@media (max-width: 992px) {

    .sidebar-area {
        padding-bottom: 60px;
        overscroll-behavior: contain;
    }
}

/* The generated mobile nav must not inherit a fixed width from its source. */
@media (max-width: 992px) {

    .side-menu-wrap,
    .side-menu-wrapper,
    .side-menu-content,
    .mean-container,
    .mean-bar,
    .mean-bar .mean-nav {
        width: 100%;
        max-width: 100%;
    }

    .mean-bar .mean-nav.mean-nav > ul li a {
        padding-right: 40px;
    }

    /* 44px touch target on the submenu chevron. */
    .mean-bar .mean-nav.mean-nav > ul li a.mean-expand {
        min-width: 44px;
        min-height: 44px;
    }
}

/* The secondary mobile panel keeps its inner content inside its own box. */
@media (max-width: 360px) {

    .mobile-side-menu {
        width: 100%;
    }

    .mobile-side-menu > * {
        max-width: 100%;
    }
}

/* --- Mega menu ("Services" grid panel) ----------------------------------- */
@media (max-width: 1199px) {

    .bossman-grid-mega {
        max-width: 100vw;
    }

    .bossman-grid-container {
        max-width: 100%;
    }
}


/* ==========================================================================
   03. FIXED-WIDTH ELEMENTS
   These carry a hard px width in main.css with no responsive override, so
   they overflow their column on every screen narrower than that value.
   Desktop values are untouched.
   ========================================================================== */

/* .left-content-inner is width:550px — clipped from 1199px downward,
   badly broken below 576px. */
@media (max-width: 1199px) {

    .service-item-4 .service-item-inner .left-content .left-content-inner,
    .service-item-7 .service-item-inner .left-content .left-content-inner {
        width: 100%;
        max-width: 550px;
    }

    .service-item-4 .service-item-inner .left-content,
    .service-item-7 .service-item-inner .left-content {
        min-width: 0;
        flex: 1 1 auto;
    }
}

@media (max-width: 767px) {

    .service-item-4 .service-item-inner .left-content .left-content-inner,
    .service-item-7 .service-item-inner .left-content .left-content-inner {
        max-width: 100%;
    }
}

/* The hover-reveal thumbnail is width:410px / right:300px. It is a pointer
   effect, so it is sized down rather than moved on touch-capable widths. */
@media (max-width: 1199px) {

    .service-item-4 .service-img-reveal-bg {
        width: 280px;
        right: 120px;
    }
}

@media (max-width: 991px) {

    .service-item-4 .service-img-reveal-bg {
        width: 200px;
        right: 0;
    }
}

/* .left-content is width:380px in the team list. */
@media (max-width: 991px) {

    .team-item-list .team-item .left-content {
        width: 100%;
        max-width: 380px;
    }
}

@media (max-width: 575px) {

    .team-item-list .team-item .left-content {
        max-width: 100%;
    }
}

/* Venobox lightbox forces 600px with !important; matched here so the
   lightbox fits a phone. */
@media (max-width: 767px) {

    .vbox-grab .vbox-child,
    .vbox-grab .vbox-child img {
        width: 100% !important;
        max-width: 600px !important;
        height: auto !important;
    }
}

/* Tall min-heights that leave large empty blocks once content stacks. */
@media (max-width: 991px) {

    .bossman-dp-grid {
        min-height: 0;
    }

    .bc-configurator {
        min-height: 0;
    }

    .bossman-services-columns,
    .industry-item {
        min-height: 0;
    }
}


/* ==========================================================================
   04. TYPOGRAPHY
   Only headings whose base size has no override at, or below, the width where
   it stops fitting. Families, weights, colours and letter-spacing untouched.
   ========================================================================== */

@media (max-width: 1399px) {

    .page-header .page-header-content .title {
        font-size: 54px;
    }
}

@media (max-width: 1199px) {

    .page-header .page-header-content .title {
        font-size: 46px;
    }

    .section-title h2 {
        font-size: 44px;
    }

    .about-content-9 .about-counter .title {
        font-size: 200px;
    }

    .team-details-content .name,
    .process-item-wrap-6 .process-item-6 .number {
        font-size: 60px;
    }
}

@media (max-width: 991px) {

    .page-header .page-header-content .title {
        font-size: 40px;
    }

    .section-title h2 {
        font-size: 36px;
    }

    .about-content-9 .about-counter .title {
        font-size: 140px;
    }

    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
        font-size: 180px;
    }

    .team-details-content .name,
    .process-item-wrap-6 .process-item-6 .number {
        font-size: 48px;
    }

    .testi-carousel-wrap .testi-top-content .left-content .rating,
    .testi-carousel-wrap .testi-top-content-wrap .testi-top-content .left-content .rating,
    .testi-top-content-wrap-5 .testi-top-content .left-content .rating {
        font-size: 44px;
    }

    .side-menu-content .side-menu-item .side-menu-arrow {
        font-size: 32px;
    }

    .preloader span {
        font-size: 52px;
    }
}

@media (max-width: 767px) {

    .page-header .page-header-content .title {
        font-size: 32px;
        margin-bottom: 18px;
    }

    .section-title h2 {
        font-size: 28px;
    }

    .about-content-9 .about-counter .title {
        font-size: 96px;
    }

    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
        font-size: 110px;
    }

    .team-details-content .name,
    .process-item-wrap-6 .process-item-6 .number {
        font-size: 36px;
    }

    .testi-carousel-wrap .testi-top-content .left-content .rating,
    .testi-carousel-wrap .testi-top-content-wrap .testi-top-content .left-content .rating,
    .testi-top-content-wrap-5 .testi-top-content .left-content .rating {
        font-size: 32px;
    }

    .preloader span {
        font-size: 36px;
    }
}

@media (max-width: 390px) {

    .page-header .page-header-content .title {
        font-size: 28px;
    }

    .section-title h2 {
        font-size: 25px;
    }

    .about-content-9 .about-counter .title {
        font-size: 74px;
    }

    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content .title {
        font-size: 84px;
    }
}

/* custom.css (slim-series page) — two sizes with no override at all. */
@media (max-width: 1199px) {

    .slim-sightline-content h2,
    .slim-sightline-content h2.title,
    .slim-sightline-content h2.title-2 {
        font-size: 52px !important;
    }

    .slim-performance-mark {
        font-size: 58px;
    }
}

@media (max-width: 991px) {

    .slim-sightline-content h2,
    .slim-sightline-content h2.title,
    .slim-sightline-content h2.title-2 {
        font-size: 40px !important;
    }

    .slim-performance-mark {
        font-size: 46px;
    }
}

@media (max-width: 767px) {

    .slim-sightline-content h2,
    .slim-sightline-content h2.title,
    .slim-sightline-content h2.title-2 {
        font-size: 30px !important;
    }

    .slim-performance-mark {
        font-size: 36px;
    }
}

/* On very wide screens, cap measure so paragraphs don't run to 200 characters. */
@media (min-width: 2560px) {

    .section-heading p,
    .about-content p,
    .service-item-inner p,
    .content-section p {
        max-width: 90ch;
    }
}


/* ==========================================================================
   05. SECTION SPACING
   The template steps pt-130/pb-130 down to 60px on mobile but leaves
   pt-75 / pt-80 / pt-90 / pt-100 (and their pb- equivalents) at full size,
   so adjacent sections end up with visibly different rhythm. These bring the
   rest of the scale in line. Desktop values are untouched.
   ========================================================================== */

@media (max-width: 1199px) {

    .pt-130 { padding-top: 100px; }
    .pb-130 { padding-bottom: 100px; }
    .pt-120 { padding-top: 95px; }
    .pb-120 { padding-bottom: 95px; }
    .pt-100 { padding-top: 85px; }
    .pb-100 { padding-bottom: 85px; }
    .pt-90  { padding-top: 80px; }
    .pb-90  { padding-bottom: 80px; }
    .pt-80  { padding-top: 70px; }
    .pb-80  { padding-bottom: 70px; }
    .pt-75  { padding-top: 70px; }
    .pb-75  { padding-bottom: 70px; }
    .pt-70  { padding-top: 65px; }
    .pb-70  { padding-bottom: 65px; }
}

@media (max-width: 991px) {

    .pt-130 { padding-top: 80px; }
    .pb-130 { padding-bottom: 80px; }
    .pt-120 { padding-top: 78px; }
    .pb-120 { padding-bottom: 78px; }
    .pt-100 { padding-top: 70px; }
    .pb-100 { padding-bottom: 70px; }
    .pt-90  { padding-top: 66px; }
    .pb-90  { padding-bottom: 66px; }
    .pt-80  { padding-top: 60px; }
    .pb-80  { padding-bottom: 60px; }
    .pt-75  { padding-top: 60px; }
    .pb-75  { padding-bottom: 60px; }
    .pt-70  { padding-top: 56px; }
    .pb-70  { padding-bottom: 56px; }
}

@media (max-width: 767px) {

    .pt-130 { padding-top: 60px; }
    .pb-130 { padding-bottom: 60px; }
    .pt-120 { padding-top: 58px; }
    .pb-120 { padding-bottom: 58px; }
    .pt-100 { padding-top: 55px; }
    .pb-100 { padding-bottom: 55px; }
    .pt-90  { padding-top: 52px; }
    .pb-90  { padding-bottom: 52px; }
    .pt-80  { padding-top: 50px; }
    .pb-80  { padding-bottom: 50px; }
    .pt-75  { padding-top: 50px; }
    .pb-75  { padding-bottom: 50px; }
    .pt-70  { padding-top: 48px; }
    .pb-70  { padding-bottom: 48px; }
}

@media (max-width: 575px) {

    .pt-130, .pt-120, .pt-100, .pt-90 { padding-top: 48px; }
    .pb-130, .pb-120, .pb-100, .pb-90 { padding-bottom: 48px; }
    .pt-80, .pt-75, .pt-70 { padding-top: 42px; }
    .pb-80, .pb-75, .pb-70 { padding-bottom: 42px; }
}

/* main.css leaves .counter-1 with 425px of bottom padding to clear the giant
   watermark number. That watermark is display:none below 768px, so the
   padding becomes 425px of empty space. */
@media (max-width: 767px) {

    .counter-section.counter-1 {
        padding-bottom: 60px;
    }
}



@media (max-width: 991px) {

    .section-heading {
        margin-bottom: 30px;
    }
}

@media (max-width: 767px) {

    .section-heading {
        margin-bottom: 24px;
    }

    .section-heading .section-title {
        margin-bottom: 14px;
    }
}


/* ==========================================================================
   06. GRID / STACKING
   ========================================================================== */

/* Flex children default to min-width:auto, which is what lets long words and
   wide media push a row open. Zero it on the layout wrappers only. */
@media (max-width: 1199px) {

    .service-item-inner,
    .about-wrap-2,
    .testi-top-content,
    .primary-header-inner,
    .header-right-wrap,
    .footer-widget {
        min-width: 0;
    }

    .service-item-inner > *,
    .testi-top-content > *,
    .footer-widget > * {
        min-width: 0;
    }
}

/* Tablet portrait: two-up rather than an awkward half-stacked three-up. */
@media (min-width: 768px) and (max-width: 991px) {

    .service-item-wrap-4 .service-item-4,
    .process-item-wrap-6 .process-item-6 {
        width: 100%;
    }
}

/* (The pass-1 equal-height rule was retired — see section 21.) */


/* ==========================================================================
   07. IMAGES & BACKGROUNDS
   ========================================================================== */

/* Images inside a stacked column should fill the column, not keep a desktop
   intrinsic width that leaves a gap beside them. */
@media (max-width: 991px) {

    .about-img-1 img,
    .about-img-2 img,
    .content-img img,
    .service-img img,
    .project-thumb img,
    .gallary-img img {
        width: 100%;
        height: auto;
        object-fit: cover;
    }
}

/* Cover backgrounds keep their subject in frame as the box gets narrower. */
@media (max-width: 991px) {

    .bg-shape,
    .include-bg,
    [class*="-bg"][style*="background"] {
        background-position: center center;
        background-size: cover;
    }
}

/* At 4K a `cover` background crops hard into the centre of the artwork.
   Anchoring to the top keeps the intended composition visible. */
@media (min-width: 2560px) {

    .hero-section .bg-shape {
        background-position: center top;
    }
}


/* ==========================================================================
   08. SLIDERS / CAROUSELS
   ========================================================================== */

@media (max-width: 991px) {

    .swiper,
    .swiper-container {
        overflow: hidden;
    }

    .swiper-slide {
        height: auto;
    }

    .swiper-slide img {
        width: 100%;
        height: auto;
    }
}

/* Arrows sit outside the track on desktop; below 992px there is no room for
   that, so they move inside without changing their appearance. */
@media (max-width: 991px) {

    .swiper-button-next,
    .swiper-button-prev,
    .slider-arrow,
    .array-button .array-prev,
    .array-button .array-next {
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        transform: none;
    }

    .array-button {
        display: flex;
        justify-content: center;
        gap: 12px;
        margin-top: 24px;
    }
}

/* The marquee ticker is intentionally oversized; keep its type in proportion. */
@media (max-width: 767px) {

    .carouselTicker__list li,
    .text-anim.carouselTicker__list li {
        font-size: 28px;
    }
}

@media (max-width: 390px) {

    .carouselTicker__list li,
    .text-anim.carouselTicker__list li {
        font-size: 22px;
    }
}

/* Before/after comparison slider. */
@media (max-width: 767px) {

    .twentytwenty-container,
    .twentytwenty-wrapper {
        width: 100%;
        max-width: 100%;
    }

    .twentytwenty-container img {
        width: 100%;
        height: auto;
    }
}

/* 360° panorama viewer. */
@media (max-width: 991px) {

    .panolens-container,
    .pano-viewer {
        width: 100% !important;
        max-width: 100%;
    }
}


/* ==========================================================================
   09. FORMS
   ========================================================================== */

@media (max-width: 991px) {

    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="url"],
    input[type="date"],
    select,
    textarea,
    .nice-select {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .nice-select .list {
        width: 100%;
    }
}

/* 16px is the threshold below which iOS Safari zooms the page on focus. */
@media (max-width: 767px) {

    input,
    select,
    textarea {
        font-size: 16px;
    }

    textarea {
        min-height: 120px;
    }

    .form-group,
    .form-grp,
    .input-group {
        margin-bottom: 16px;
    }
}

/* Contact / quote forms with side-by-side fields stack cleanly. */
@media (max-width: 767px) {

    .contact-form .row > [class*="col-"],
    .quote-form .row > [class*="col-"],
    .request-form .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }
}

/* The search overlay input must not exceed the screen. */
@media (max-width: 575px) {

    #popup-search-box .box-inner-wrap {
        width: 100%;
        padding: 0 16px;
    }

    #popup-search-box form,
    #popup-search-box #popup-search {
        width: 100%;
    }
}


/* ==========================================================================
   10. BUTTONS & ICONS
   ========================================================================== */

@media (max-width: 767px) {

    .tl-primary-btn,
    .tl-secondary-btn,
    .header-btn,
    .btn {
        max-width: 100%;
        white-space: normal;
        text-align: center;
    }

    /* Minimum comfortable touch target. */
    .tl-primary-btn,
    .tl-secondary-btn,
    .btn,
    .swiper-button-next,
    .swiper-button-prev,
    .array-prev,
    .array-next,
    .sidebar-trigger,
    .mobile-side-menu-close,
    .bossman-grid-close {
        min-height: 44px;
        min-width: 44px;
    }
}

@media (max-width: 575px) {

    .btn-wrap,
    .hero-btn-wrap,
    .cta-btn-wrap {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
    }
}

/* Icons must not be squeezed by a flex sibling once a row gets tight.
   Scoped below the lg breakpoint so the desktop composition is untouched. */
@media (max-width: 991px) {

    .icon i,
    .icon img,
    .service-icon img,
    .social-list li a i {
        flex-shrink: 0;
    }
}


/* ==========================================================================
   11. FOOTER
   ========================================================================== */

@media (max-width: 991px) {

    .footer-widget {
        margin-bottom: 36px;
    }

    .footer-widget:last-child {
        margin-bottom: 0;
    }
}

@media (max-width: 767px) {

    .footer-widget {
        margin-bottom: 30px;
    }

    .copyright-area,
    .copyright-wrap {
        text-align: center;
    }

    .copyright-area .row > [class*="col-"] {
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .copyright-area .social-list,
    .copyright-wrap .social-list {
        justify-content: center;
    }
}

/* The oversized watermark word behind the footer is decorative. Its own
   section already clips it; this only stops it swallowing pointer events. */
.footer-text {
    pointer-events: none;
}

.footer-area,
.footer-section {
    overflow-x: clip;
}


/* ==========================================================================
   12. PAGE-SPECIFIC
   ========================================================================== */

/* --- Slim Series (custom.css) --- */
@media (max-width: 991px) {

    .slim-sightline-layout {
        min-height: 0;
    }
}

/* --- Facade / BIM (bim-facade.css) --- */
@media (max-width: 991px) {

    .bim-stage,
    .bim-canvas-wrap,
    .bc-configurator,
    .bc-stage {
        width: 100%;
        max-width: 100%;
    }
}


/* ==========================================================================
   13. LARGE-SCREEN REFINEMENT (1921px+)
   ========================================================================== */

@media (min-width: 1921px) {

    /* Sections with a fixed viewport-height hero keep their proportion
       instead of leaving the fold half empty on a tall 2K/4K panel. */
    .hero-section {
        min-height: 820px;
    }
}

@media (min-width: 2560px) {

    .hero-section {
        min-height: 900px;
    }
}


/* ==========================================================================
   14. ACCESSIBILITY / MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .carouselTicker__list {
        animation: none !important;
    }
}

/* Print: never carry a fixed panel or overlay onto paper. */
@media print {

    .sidebar-area,
    .mobile-side-menu,
    .mobile-side-menu-overlay,
    #popup-search-box,
    .preloader,
    #scroll-percentage {
        display: none !important;
    }
}


/* ==========================================================================
   ==========================================================================
   PASS 2 — corrections found in the second full audit (18 Sep 2026)

   Everything below fixes a defect that was measured in the browser after
   letting every GSAP ScrollTrigger animation settle. Sections are ordered
   15..21 to continue the numbering above.
   ==========================================================================
   ========================================================================== */


/* ==========================================================================
   15. SERVICE LIST — hover reveal overlapping its own title
   -------------------------------------------------------------------------
   main.css reveals the description on :hover by adding a FIXED
   padding-bottom:60px to .left-content-inner, while the <p> itself is
   position:absolute; bottom:0. 60px is a desktop measurement: at 390px the
   paragraph wraps to 84-140px, so it lands on top of the title. Touch
   devices keep :hover latched after a tap, which is when it shows.

   Below 992px the paragraph leaves absolute positioning and sits in normal
   flow under the title, permanently visible. The overlap becomes impossible
   rather than merely hidden, and the fixed 60px reservation is dropped.
   Desktop hover behaviour is untouched.
   ========================================================================== */

@media (max-width: 991px) {

    .service-item-4 .service-item-inner .left-content .left-content-inner p,
    .service-item-7 .service-item-inner .left-content .left-content-inner p,
    .service-item-4:hover .service-item-inner .left-content .left-content-inner p,
    .service-item-7:hover .service-item-inner .left-content .left-content-inner p {
        position: static;
        visibility: visible;
        opacity: 1;
        width: 100%;
        margin-top: 10px;
        margin-bottom: 0;
    }

    /* Drop the 60px reveal reservation — nothing is being revealed now. */
    .service-item-4 .service-item-inner .left-content .left-content-inner,
    .service-item-7 .service-item-inner .left-content .left-content-inner,
    .service-item-4:hover .service-item-inner .left-content .left-content-inner,
    .service-item-7:hover .service-item-inner .left-content .left-content-inner {
        padding-bottom: 0;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner .title,
    .service-item-7 .service-item-inner .left-content .left-content-inner .title,
    .service-item-4:hover .service-item-inner .left-content .left-content-inner .title,
    .service-item-7:hover .service-item-inner .left-content .left-content-inner .title {
        margin-bottom: 0;
    }

    /* The row is column-direction here; let the text use the full width. */
    .service-item-4 .service-item-inner .left-content,
    .service-item-7 .service-item-inner .left-content {
        width: 100%;
    }
}


/* ==========================================================================
   16. (retired)
   -------------------------------------------------------------------------
   An earlier draft added padding-bottom to .section-title and raised
   line-height on .word-rotator, to fix what looked like 3-10px of descender
   clipping. Re-measured after letting SplitType and its GSAP timeline
   finish: scrollHeight equals clientHeight and the rotator sits exactly on
   the heading's bottom edge, with and without those rules. The readings were
   taken mid-animation, not from a real defect.

   Both rules are therefore removed. The line-height one in particular was
   changing the hero's rendered type (95px -> 106.4px), which the brief
   rules out.
   ========================================================================== */

/* ==========================================================================
   17. SMALL COMPONENT OVERFLOWS
   Each of these has a fixed px height holding content a few pixels taller.
   Height becomes content-driven below the lg breakpoint; the minimum keeps
   the designed proportion.
   ========================================================================== */

@media (max-width: 991px) {

    .service-arrow {
        height: auto;
        min-height: 34px;
        align-items: center;
    }

    .feature-item {
        align-items: center;
    }

    .bossman-dp-center {
        height: auto;
        min-height: 65px;
    }
}

/* The CTA strip is display:flex with no wrap, so on a narrow screen the
   button is pushed past the bottom of a box that clips it. */
@media (max-width: 767px) {

    .project-cta {
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 18px;
    }

    .project-cta__action {
        width: 100%;
    }
}

/* The newsletter backdrop is a fixed 505px tall inside a section that is
   shorter than that on small screens, so the artwork is cropped hard. */
@media (max-width: 991px) {

    .newsletter-section .bg-shape {
        height: 100%;
    }
}


/* ==========================================================================
   18. MOBILE NAVIGATION — SERVICES DROPDOWN
   -------------------------------------------------------------------------
   The Services item held only a <a href="#"> plus the desktop mega-menu
   <div>. meanmenu builds mobile submenus from nested <ul> elements, so it
   produced no expander at all: "Services" was a dead tap on every phone and
   tablet, and the four service pages were unreachable from the menu.

   header.php now carries a plain <ul class="bossman-mobile-services"> with
   the same four links. It is hidden from 993px up so the mega-menu remains
   the desktop mechanism, and meanmenu turns it into a normal mobile
   dropdown below that.
   ========================================================================== */

/* Desktop: the submenu never shows — the mega-menu is the desktop UI. */
@media (min-width: 993px) {

    .header .primary-header-inner .header-menu-wrap ul li.bossman-grid-services > ul.bossman-mobile-services {
        display: none;
    }
}

/* meanmenu clones the whole menu, mega-menu markup included (~19KB and four
   background-image slides). Hide the clone so the mobile panel shows only
   the real mobile menu, and the slide images are never fetched on a phone. */
.sidebar-area .bossman-grid-mega,
.mobile-side-menu .bossman-grid-mega,
.mean-nav .bossman-grid-mega {
    display: none;
}

/* Comfortable touch targets and clear indentation inside the dropdown. */
@media (max-width: 992px) {

    .mean-bar .mean-nav.mean-nav > ul li ul li a {
        padding-top: 12px;
        padding-bottom: 12px;
        opacity: .85;
    }

    .mean-bar .mean-nav.mean-nav > ul li ul li a:hover,
    .mean-bar .mean-nav.mean-nav > ul li ul li a:focus {
        opacity: 1;
    }

    .mean-bar .mean-nav.mean-nav > ul li ul {
        padding-left: 14px;
        border-left: 1px solid rgba(0, 0, 0, .08);
        margin-left: 2px;
    }
}


/* ==========================================================================
   19. MOBILE CARD OVERLOAD — SWIPE ROWS
   -------------------------------------------------------------------------
   Measured on a 390px screen: index.php ran to 19,324px, with
   .industries-area alone at 3,546px (8 stacked cards, .row.g-4) and
   .service-section at 2,082px (4 cards, .row.gy-xl-0). Those two card rows
   — not the heading rows in the same sections — become horizontal swipe
   rows below 768px.

   Implemented with CSS scroll-snap rather than a slider library: the markup,
   card design, images, text and buttons are untouched, touch and momentum
   scrolling are native, there is no init/destroy lifecycle to break the
   existing Swiper instances, and the scroll is contained so it can never
   become page-level horizontal scroll. Each card shows at 82% width so the
   next one peeks in and the row reads as swipeable.
   ========================================================================== */

@media (max-width: 767px) {

    .industries-area .row.g-4,
    .service-section .row.gy-xl-0 {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scroll-padding-left: 16px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        margin-left: 0;
        margin-right: 0;
        padding-bottom: 6px;
    }

    .industries-area .row.g-4::-webkit-scrollbar,
    .service-section .row.gy-xl-0::-webkit-scrollbar {
        display: none;
    }

    .industries-area .row.g-4 > [class*="col-"],
    .service-section .row.gy-xl-0 > [class*="col-"] {
        flex: 0 0 82%;
        max-width: 82%;
        scroll-snap-align: start;
    }

    /* The last card needs trailing room or it cannot snap into place. */
    .industries-area .row.g-4 > [class*="col-"]:last-child,
    .service-section .row.gy-xl-0 > [class*="col-"]:last-child {
        margin-right: 16px;
    }

    /* Cards in a swipe row match heights so the row edge stays level. */
    .industries-area .row.g-4 > [class*="col-"] > .industry-item {
        height: 100%;
    }
}


/* ==========================================================================
   20. LARGE-SCREEN TYPOGRAPHY (2K / 4K)
   -------------------------------------------------------------------------
   Nothing in any stylesheet targeted above 1600px, so body copy and UI text
   were pinned at their 1366px values all the way to 3840px: body 16px,
   nav 16px, buttons 16px, card text 16px, footer 16px, sub-headings 12px,
   paragraphs 18px — while headings sat at 95px and counters at 360px. On a
   4K panel the supporting text reads as roughly half its intended size.

   Body and UI text step up; headings, counters and the decorative watermark
   type are deliberately left alone so the layout cannot re-wrap and the
   designed hierarchy is preserved exactly.

   Line-heights are set unitless because the theme uses fixed px values
   (line-height:26px), which would crush a 22px font.
   ========================================================================== */

/* ---- 1921px and up -------------------------------------------------- */
@media (min-width: 1921px) {

    body {
        font-size: 17px;
        line-height: 1.65;
    }

    p {
        font-size: 17px;
        line-height: 1.65;
    }

    .section-heading p,
    .about-content p,
    .content-section p {
        font-size: 19px;
        line-height: 1.6;
    }

    .section-heading .sub-heading,
    .sub-heading {
        font-size: 13px;
    }

    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 17px;
    }

    .tl-primary-btn,
    .tl-secondary-btn,
    .btn {
        font-size: 17px;
    }

    .industry-item h4,
    .process-item .title,
    .service-item .title,
    .project-item .title {
        font-size: 31px;
    }

    .industry-item p,
    .process-item p,
    .service-item p {
        font-size: 17px;
        line-height: 1.6;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner p,
    .service-item-7 .service-item-inner .left-content .left-content-inner p {
        font-size: 17px;
        line-height: 1.6;
    }

    .footer-widget p,
    .footer-widget a,
    .footer-widget li,
    .copyright-area p {
        font-size: 17px;
        line-height: 1.65;
    }

    input,
    select,
    textarea,
    .nice-select {
        font-size: 17px;
    }

    .counter-content p,
    .counter-item p {
        font-size: 23px;
    }
}

/* ---- 2560px and up (2K) --------------------------------------------- */
@media (min-width: 2560px) {

    body {
        font-size: 19px;
        line-height: 1.65;
    }

    p {
        font-size: 19px;
        line-height: 1.65;
    }

    .section-heading p,
    .about-content p,
    .content-section p {
        font-size: 21px;
        line-height: 1.6;
    }

    .section-heading .sub-heading,
    .sub-heading {
        font-size: 14px;
        letter-spacing: .06em;
    }

    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 18px;
    }

    .tl-primary-btn,
    .tl-secondary-btn,
    .btn {
        font-size: 18px;
    }

    .industry-item h4,
    .process-item .title,
    .service-item .title,
    .project-item .title {
        font-size: 34px;
    }

    .industry-item p,
    .process-item p,
    .service-item p {
        font-size: 19px;
        line-height: 1.6;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner .title,
    .service-item-7 .service-item-inner .left-content .left-content-inner .title {
        font-size: 42px;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner p,
    .service-item-7 .service-item-inner .left-content .left-content-inner p {
        font-size: 19px;
        line-height: 1.6;
    }

    .footer-widget p,
    .footer-widget a,
    .footer-widget li,
    .copyright-area p {
        font-size: 19px;
        line-height: 1.65;
    }

    input,
    select,
    textarea,
    .nice-select {
        font-size: 18px;
    }

    .counter-content p,
    .counter-item p {
        font-size: 25px;
    }
}

/* ---- 3200px and up (4K) --------------------------------------------- */
@media (min-width: 3200px) {

    body {
        font-size: 22px;
        line-height: 1.65;
    }

    p {
        font-size: 22px;
        line-height: 1.65;
    }

    .section-heading p,
    .about-content p,
    .content-section p {
        font-size: 24px;
        line-height: 1.6;
    }

    .section-heading .sub-heading,
    .sub-heading {
        font-size: 16px;
        letter-spacing: .06em;
    }

    .header .primary-header-inner .header-menu-wrap ul li a {
        font-size: 20px;
    }

    .tl-primary-btn,
    .tl-secondary-btn,
    .btn {
        font-size: 20px;
    }

    .industry-item h4,
    .process-item .title,
    .service-item .title,
    .project-item .title {
        font-size: 38px;
    }

    .industry-item p,
    .process-item p,
    .service-item p {
        font-size: 22px;
        line-height: 1.6;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner .title,
    .service-item-7 .service-item-inner .left-content .left-content-inner .title {
        font-size: 48px;
    }

    .service-item-4 .service-item-inner .left-content .left-content-inner p,
    .service-item-7 .service-item-inner .left-content .left-content-inner p {
        font-size: 22px;
        line-height: 1.6;
    }

    .footer-widget p,
    .footer-widget a,
    .footer-widget li,
    .copyright-area p {
        font-size: 22px;
        line-height: 1.65;
    }

    input,
    select,
    textarea,
    .nice-select {
        font-size: 20px;
    }

    .counter-content p,
    .counter-item p {
        font-size: 28px;
    }

    /* Buttons and fields need proportional height, not just bigger text. */
    .tl-primary-btn,
    .tl-secondary-btn {
        padding-top: 22px;
        padding-bottom: 22px;
    }

    input,
    select,
    textarea,
    .nice-select {
        min-height: 66px;
    }
}


/* ==========================================================================
   21. HOUSEKEEPING FROM PASS 1
   The equal-height rule added in pass 1 duplicated main.css's own
   height:100% while outranking it, which made the card height impossible to
   override from a plain selector. Only .industry-item in a swipe row still
   needs it (section 19), so the broad version is retired here.
   ========================================================================== */

@media (max-width: 991px) {

    .row > [class*="col-"] > .card,
    .row > [class*="col-"] > .service-item,
    .row > [class*="col-"] > .project-item {
        height: auto;
    }
}


/* ==========================================================================
   20b. LARGE-SCREEN TYPOGRAPHY — targeted overrides
   -------------------------------------------------------------------------
   The generic rules in section 20 raise everything that inherits from the
   base `p` / `body` rules. These selectors do not: the theme sets their size
   through deeper selectors that outrank a plain `.section-heading p`, so at
   2560px they were still rendering at their 1366px size. Each one below was
   found by resolving the actual winning rule for every visible text node at
   2560px, so this list is measured rather than guessed.

   Some of them are capped by pre-existing clamp() values in main.css,
   bim-facade.css and custom.css (70 uses across the project). Those caps are
   what stop the text growing; the rules here replace the cap with explicit
   sizes at each step. No clamp() is introduced.
   ========================================================================== */

/* ---- 1921px and up -------------------------------------------------- */
@media (min-width: 1921px) {

    /* 13px family */
    .project-item-7 .project-thumb ul li,
    .project-item-2 .project-thumb ul li {
        font-size: 14px;
    }

    /* 14px family */
    .header .primary-header-inner .header-right-wrap .header-contact .content .call-text,
    .project-cta__content p {
        font-size: 15px;
    }

    /* 15px family */
    .footer-widget .social-list li a,
    .slim-performance-content p {
        font-size: 16px;
    }

    /* 16px family */
    .process-item .process-content p,
    .bossman-footer-contact .footer-contact-content p,
    .about-wrap-2 .about-content-right .about-desc p,
    .bossman-alt-benefit p,
    .bossman-dp-item-content p,
    .feature-img .img-content p,
    .our-philosophy-content p,
    .process-item-wrap-6 .process-item-6 p,
    .window-range-cta p,
    .bf-process__detail-item p {
        font-size: 17px;
    }

    /* 17px family */
    .section-text {
        font-size: 18px;
    }

    /* 18px family */
    .testi-item-5 p,
    .footer-widget .footer-list li a,
    .request-content .request-item-wrap .request-item a,
    .request-content .request-item-wrap .request-item p,
    .hero-wrap .hero-content.hero-content-4 .section-heading p,
    .testi-top-content-wrap-5 .testi-top-content .right-content p,
    .header .primary-header-inner .header-right-wrap .header-contact .content .call-number,
    .about-content-5 .about-bottom-content ul li,
    .content-info .content-list li,
    .antra-contact-value {
        font-size: 19px;
    }

    /* Counter caption sits at 22px via a five-class selector. */
    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content p {
        font-size: 23px;
    }
}

/* ---- 2560px and up (2K) --------------------------------------------- */
@media (min-width: 2560px) {

    .project-item-7 .project-thumb ul li,
    .project-item-2 .project-thumb ul li {
        font-size: 15px;
    }

    .header .primary-header-inner .header-right-wrap .header-contact .content .call-text,
    .project-cta__content p {
        font-size: 16px;
    }

    .footer-widget .social-list li a,
    .slim-performance-content p {
        font-size: 17px;
    }

    .process-item .process-content p,
    .bossman-footer-contact .footer-contact-content p,
    .about-wrap-2 .about-content-right .about-desc p,
    .bossman-alt-benefit p,
    .bossman-dp-item-content p,
    .feature-img .img-content p,
    .our-philosophy-content p,
    .process-item-wrap-6 .process-item-6 p,
    .window-range-cta p,
    .bf-process__detail-item p {
        font-size: 19px;
    }

    .section-text {
        font-size: 20px;
    }

    .testi-item-5 p,
    .footer-widget .footer-list li a,
    .request-content .request-item-wrap .request-item a,
    .request-content .request-item-wrap .request-item p,
    .hero-wrap .hero-content.hero-content-4 .section-heading p,
    .testi-top-content-wrap-5 .testi-top-content .right-content p,
    .header .primary-header-inner .header-right-wrap .header-contact .content .call-number,
    .about-content-5 .about-bottom-content ul li,
    .content-info .content-list li,
    .antra-contact-value {
        font-size: 21px;
    }

    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content p {
        font-size: 25px;
    }
}

/* ---- 3200px and up (4K) --------------------------------------------- */
@media (min-width: 3200px) {

    .project-item-7 .project-thumb ul li,
    .project-item-2 .project-thumb ul li {
        font-size: 17px;
    }

    .header .primary-header-inner .header-right-wrap .header-contact .content .call-text,
    .project-cta__content p {
        font-size: 18px;
    }

    .footer-widget .social-list li a,
    .slim-performance-content p {
        font-size: 20px;
    }

    .process-item .process-content p,
    .bossman-footer-contact .footer-contact-content p,
    .about-wrap-2 .about-content-right .about-desc p,
    .bossman-alt-benefit p,
    .bossman-dp-item-content p,
    .feature-img .img-content p,
    .our-philosophy-content p,
    .process-item-wrap-6 .process-item-6 p,
    .window-range-cta p,
    .bf-process__detail-item p {
        font-size: 22px;
    }

    .section-text {
        font-size: 23px;
    }

    .testi-item-5 p,
    .footer-widget .footer-list li a,
    .request-content .request-item-wrap .request-item a,
    .request-content .request-item-wrap .request-item p,
    .hero-wrap .hero-content.hero-content-4 .section-heading p,
    .testi-top-content-wrap-5 .testi-top-content .right-content p,
    .header .primary-header-inner .header-right-wrap .header-contact .content .call-number,
    .about-content-5 .about-bottom-content ul li,
    .content-info .content-list li,
    .antra-contact-value {
        font-size: 24px;
    }

    .about-wrap-2 .about-content-left .about-counter-wrap .counter-content p {
        font-size: 28px;
    }
}


/* ==========================================================================
   22. HEADER MEGA MENU — no scrollbar, no dead band at the bottom
   -------------------------------------------------------------------------
   Two separate problems, both visible at 1366x634:

   1) SCROLL. main.css:21247 opens with `.bossman-grid-mega { overflow: hidden }`
      but two later unconditional rules in the same file put it back to
      `overflow-y: auto` / `overflow: hidden auto`. The four .service-bg-slide
      layers are 685px tall against a 634px panel (they are deliberately
      oversized for the parallax drift), so the panel became scrollable by
      25px and showed a scrollbar.

   2) BLACK BAND. .bossman-active-service is a 38px strip showing the hovered
      service ("01 — PREMIUM SYSTEM") on the panel's #111 background. The
      column stack came to header 78 + intro 176 + columns 350 + strip 38 =
      642px inside a 634px viewport, so its bottom 8px was cut and it read as
      a dead black bar rather than a label.

   The strip is hidden (its hover feedback is already carried by the column's
   red top border and its number turning red) and the scroll is switched off.
   .bossman-services-columns is `flex: 1` in main.css, so with the strip gone
   the columns simply grow into the freed space and meet the bottom edge.

   The element is hidden rather than deleted from header.php because the
   mega-menu script at header.php:703-706 reads .active-service-number and
   .active-service-name on hover; display:none keeps them in the DOM.
   ========================================================================== */

@media (min-width: 993px) {

    .bossman-grid-mega {
        overflow: hidden;
    }

    .bossman-active-service {
        display: none;
    }
}

/* Short laptop windows: main.css pins the columns at min-height:350px, which
   together with the 78px header and 176px intro needs 604px. Below that the
   panel can no longer fit and — now that it cannot scroll — would clip its
   own cards. Let the columns give way instead, and tighten the intro. */
@media (min-width: 993px) and (max-height: 700px) {

    .bossman-services-columns {
        min-height: 0;
    }

    .bossman-grid-intro {
        padding-top: 26px;
        padding-bottom: 24px;
    }
}

@media (min-width: 993px) and (max-height: 560px) {

    .bossman-grid-intro {
        padding-top: 16px;
        padding-bottom: 14px;
    }
}


/* ==========================================================================
   23. MOBILE SERVICES DROPDOWN — make the row itself open it
   -------------------------------------------------------------------------
   Reported: tapping "Services" in the mobile menu did nothing.

   Two faults, and the first is the one that mattered:

   1) main.css declares `.bossman-grid-services { position: static !important }`
      — presumably so the fixed, full-screen desktop mega menu is not trapped
      inside the <li>'s containing block. meanmenu's expand button is
      `position:absolute; top:6px; right:0`, so with the <li> forced static it
      resolved against `.sidebar-area` instead and was thrown to the TOP-RIGHT
      CORNER OF THE PANEL — measured at top 6px while the Services row sat at
      257px. There was effectively no button anywhere near the row to press.

      The <li> is made `relative` again below 992px only. Desktop keeps
      `static`, so the mega menu's positioning is untouched. Overriding an
      `!important` needs `!important`; there is no lower-specificity route.

   2) The visible label is `<a class="bossman-grid-trigger" href="#">`, which
      has no mobile handler — so tapping the word itself was always a no-op,
      even once the button was back in place. meanmenu's expander is stretched
      across the full width of the row so the whole row opens the dropdown,
      with the caret still drawn at the right.

   The overlay is 36px tall, NOT 44px: the first submenu link begins 39px down
   from the top of the <li> (label row + the submenu's 20px margin-top), so a
   44px overlay would sit over the top of "Premium Windows" and swallow the
   tap. 36px covers the label row and stops clear of it — verified that the
   first service link is the element returned by elementFromPoint.
   ========================================================================== */

@media (max-width: 992px) {

    .mean-bar .mean-nav.mean-nav > ul li.bossman-grid-services {
        position: relative !important;
    }

    .mean-bar .mean-nav.mean-nav > ul li.bossman-grid-services > a.mean-expand {
        top: 0;
        right: 0;
        left: 0;
        width: 100%;
        height: 36px;
        min-width: 0;
        min-height: 36px;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        background: transparent;
    }
}


/* ==========================================================================
   24. MOBILE MENU — drop the "Services ↗" arrow
   -------------------------------------------------------------------------
   header.php's Services trigger carries
   `<i class="fa-regular fa-arrow-up-right">` next to its label. In the
   slide-in panel that arrow sits immediately beside meanmenu's own caret,
   so the row reads "Services ↗ ˅" — two icons saying different things, and
   the ↗ implies navigating away when the row actually expands a dropdown.

   Scoped to the two mobile panels so the desktop top nav keeps "Services ↗"
   exactly as designed. The selector matches only the <i> inside the trigger
   anchor, so the ↗ arrows on the four service cards inside the mega menu
   (`.service-arrow i`) are untouched.
   ========================================================================== */

@media (max-width: 992px) {

    .sidebar-area .bossman-grid-trigger i,
    .mobile-side-menu .bossman-grid-trigger i {
        display: none;
    }
}


/* ==========================================================================
   25. BREADCRUMBS BANNER (.page-header)
   -------------------------------------------------------------------------
   Two measured faults, both fixed with vertical padding alone. Nothing else
   about the banner is touched: background image, cover/centre positioning,
   #373536 text colour, font sizes, the 25px title-to-breadcrumb gap, centre
   alignment and the breadcrumb markup are all exactly as they were, and no
   rule here applies above 991px.

   1) OVERLAP AT <=347px. `.primary-header-inner` is a wrapping flex row; its
      left wrap measures 256px and the menu trigger 54px, so below 348px they
      no longer fit on one line and the header becomes 124px tall instead of
      84px. The banner's top padding is 120px, so the header sat 4px over the
      title — measured on every page that carries the banner. 348px is the
      exact boundary: at 347px it wraps, at 348px it does not.

      Fixed from the banner side only; the header itself is untouched.

   2) LANDSCAPE PHONES. The padding is a fixed 120px/100px regardless of
      viewport height, so on a short screen the banner swallowed the page:
      measured 81% of an 844x390 viewport and 83% of 740x360. Trimming the
      padding brings those to 62% and 60% while keeping the title and
      breadcrumb at their normal size and spacing.

      Guarded with min-width so it cannot combine with rule 1 — on a narrow
      short viewport the header still wraps, and clearing it wins over
      compactness.
   ========================================================================== */

@media (max-width: 347px) {

    .page-header .page-header-content {
        padding-top: 144px;
    }
}

@media (min-width: 348px) and (max-width: 991px) and (max-height: 500px) {

    .page-header .page-header-content {
        padding-top: 108px;
        padding-bottom: 44px;
    }
}

@media (min-width: 348px) and (max-width: 991px) and (max-height: 380px) {

    .page-header .page-header-content {
        padding-top: 104px;
        padding-bottom: 32px;
    }
}


/* ==========================================================================
   26. BREADCRUMBS BANNER — show the whole artwork on mobile/tablet
   -------------------------------------------------------------------------
   Reported: the banner looks empty on a phone. The image was loading fine —
   verified `loaded: true`, natural size 1920x500, applied as `cover` at
   `50% 50%`. The cause is the artwork's composition against that crop:

     • the files are 1920x500, a 3.84:1 letterbox
     • the mobile banner box is ~380x295, about 1.29:1
     • `cover` fills the height, so the image renders 1132px wide and only
       380px of it shows — the middle 34%, pixels x=637..1282

   In every one of these files the illustrations sit at roughly x=20..540 and
   x=1420..1900, and the middle is blank paper. Measured ink density in that
   centre band: 0.0% in six of the seven images (about.webp is the exception
   only because it is still the "1920 x 500" placeholder). So the banner was
   correctly rendering the empty middle of a wide picture.

   `contain` shows the picture whole — both illustrations, the same left/right
   composition as desktop — at 380x99 inside the 295px box. The leftover band
   is filled with #f6f6f6, which is the artwork's own paper colour (sampled
   from all six files) and is already the theme's `.tl-bg-color`, so the seam
   is invisible. The section's #191919 is never seen on these widths today
   (cover fills the box), so overriding it changes nothing that was visible.

   Anchored to the bottom: the strip is shorter than the box, and centring it
   runs the illustrations into the centred title at phone widths.

   Nothing above 991px is touched — 1024px and wider keep `cover` exactly as
   designed.
   ========================================================================== */

@media (max-width: 991px) {

    .page-header {
        background-color: #f6f6f6;
    }

    .page-header .bg-img {
        background-size: contain;
        background-position: center bottom;
        background-repeat: no-repeat;
    }
}