/* ============================================================
   Westway homepage — no-JS rendering fixes.
   The captured page depended on Elementor/Qode/Royal JavaScript
   for scroll-reveal, grid layout, slideshow + video backgrounds
   and the preloader. With those plugins deactivated that JS is
   gone, so this stylesheet reproduces the final visual state in
   pure CSS. Loaded AFTER home.css.
   ============================================================ */

/* 0. Kill any leftover preloader so it can never cover the page */
#loftloader-wrapper, .pl-imgloading, .loader-section, .loader-inner { display: none !important; }

/* 1. Scroll-reveal is now driven by home.js (it adds .qodef--appeared
   on scroll, which plays the red title colour-fill + fade-ins through
   the original CSS transitions). The per-character title pieces must
   always be laid out; a no-JS safety net keeps content from ever
   staying invisible if the script doesn't run. */
.qodef--char, .qodef--word { display: inline-block !important; opacity: 1 !important; transform: none !important; }
.no-js .qodef-has-appear,
.no-js .elementor-invisible { opacity: 1 !important; visibility: visible !important; transform: none !important; }

/* 2. Background videos: clean, chrome-free, non-interactive cover video.
   The YouTube iframe ignores most of controls=0, so we (a) block ALL
   pointer interaction, and (b) scale the iframe larger than its box and
   centre it so YouTube's title/controls chrome (top & bottom strips) is
   pushed outside the visible area — only the video fills the section. */
.elementor-background-video-container {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;       /* no clicks, no hover chrome */
    z-index: 0;
}
.elementor-background-video-container iframe,
.elementor-background-video-embed {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    /* cover: oversize the 16:9 video well beyond the box and centre it so
       YouTube's top title bar + bottom control strip fall outside the
       visible area (controls=0 alone doesn't remove them). 130% over-scale
       crops a generous margin top & bottom. */
    width: 130vw !important;
    height: 73.125vw !important;     /* 130 * 9/16 */
    min-width: 231vh !important;     /* 130vh * 16/9 */
    min-height: 130vh !important;
    max-width: none !important;
    transform: translate(-50%, -50%) !important;
    pointer-events: none !important;
    border: 0;
}
/* keep section content above the video */
.elementor-section:has(> .elementor-background-video-container) > .elementor-container,
.elementor-section:has(> .elementor-background-video-container) > .elementor-background-overlay { position: relative; z-index: 1; }

/* 3. News grid (Royal wpr-grid) used JS (isotope) to absolutely
   position items. With JS gone, lay it out with flexbox so the
   three cards sit side by side and size naturally. */
.wpr-grid {
    display: flex !important;
    flex-wrap: wrap;
    gap: 30px;
    position: static !important;
    height: auto !important;
}
.wpr-grid .wpr-grid-item {
    position: static !important;
    width: calc(33.333% - 20px) !important;
    left: auto !important;
    top: auto !important;
    height: auto !important;
    margin: 0 !important;
    float: none !important;
}
.wpr-grid .wpr-grid-item-inner {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    top: auto !important;
}
.wpr-grid .wpr-grid-image-wrap img { width: 100%; height: auto; display: block; }
@media (max-width: 1024px) {
    .wpr-grid .wpr-grid-item { width: calc(50% - 15px) !important; }
}
@media (max-width: 680px) {
    .wpr-grid .wpr-grid-item { width: 100% !important; }
}

/* 4. Image carousels: home.js drives a fade slider. Give the wrapper a
   relative box so stacked (absolute) slides layer correctly, and let
   the images size to the carousel. */
.elementor-image-carousel.swiper-wrapper {
    position: relative !important;
    display: block !important;
    transform: none !important;
    height: auto !important;
}
.elementor-image-carousel.swiper-wrapper .swiper-slide img {
    width: 100%;
    height: auto;
    display: block;
}
.elementor-image-carousel.swiper-wrapper .swiper-slide figure { margin: 0; }
/* show the carousel nav arrows (Swiper would have, JS handles clicks) */
.elementor-swiper .elementor-swiper-button { z-index: 5; cursor: pointer; }

/* 5. Fullscreen menu: hidden by default, shown when body has the
   opened class (toggled by home.js). */
.qodef-fullscreen-area,
#uc_fullscreen_navigation_menu_elementor_54ad41e {
    visibility: hidden;
    opacity: 0;
    transition: opacity .3s ease;
}
body.qodef-fullscreen-menu--opened .qodef-fullscreen-area,
body.qodef-fullscreen-menu--opened #uc_fullscreen_navigation_menu_elementor_54ad41e {
    visibility: visible !important;
    opacity: 1 !important;
}
.elementor-element-5ad5bcc3 { background-image: url("/wp-content/uploads/2023/07/Asset-1-1.png") !important; background-size: cover; background-position: center; background-repeat: no-repeat; }
.elementor-element-5ad5bcc3 { background-image: url("/wp-content/uploads/2025/07/photos_07.jpg") !important; background-size: cover; background-position: center; background-repeat: no-repeat; }
.elementor-element-2b0abdbb, .elementor-element-2b0abdbb > .elementor-element-populated { background-image: url("https://cormackwebdevelopment4.co.uk/clickandbuilds/wmpe/wp-content/uploads/2023/05/LogisticMadeEadyHD-scaled.jpg") !important; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.elementor-element-28e95ddc, .elementor-element-28e95ddc > .elementor-element-populated { background-image: url("https://cormackwebdevelopment4.co.uk/clickandbuilds/wmpe/wp-content/uploads/2023/05/LogisticMadeEadyHD-scaled.jpg") !important; background-size: cover; background-position: center center; background-repeat: no-repeat; }
.elementor-element-cf1ed08, .elementor-element-cf1ed08 > .elementor-element-populated { background-image: url("https://cormackwebdevelopment4.co.uk/clickandbuilds/wmpe/wp-content/uploads/2023/05/LogisticMadeEadyHD-scaled.jpg") !important; background-size: cover; background-position: center center; background-repeat: no-repeat; }

/* ---------- Video / hero background colour tints (gradients) ----------
   The overlay div must be absolutely positioned to actually cover the
   video. All tints sit at 30% opacity (matching the hero). */
.elementor-element-2b0abdbb > .elementor-background-overlay,
.elementor-element-28e95ddc > .elementor-background-overlay,
.elementor-element-cf1ed08 > .elementor-background-overlay {
    position: absolute !important;
    inset: 0 !important;
    opacity: 0.30 !important;       /* 30% tint */
    z-index: 1 !important;          /* above the video (container z-index:0) */
    pointer-events: none;
}
/* "For a Greener Future" — dark green gradient (solid colours; the 30%
   comes from the overlay opacity above) */
.elementor-element-2b0abdbb > .elementor-background-overlay {
    background: linear-gradient(135deg, #062e14 0%, #0d5001 55%, #146e28 100%) !important;
}
/* "Strategically Located" (both sections) — purple → orange → pink */
.elementor-element-28e95ddc > .elementor-background-overlay,
.elementor-element-cf1ed08 > .elementor-background-overlay {
    background: linear-gradient(120deg, #4c1d95 0%, #db6328 55%, #ec4899 100%) !important;
}

/* Hero (#home / 5ad5bcc3) — dark blue tint at 30%. The hero has no
   overlay div, so add one via ::before above the slideshow. */
.elementor-element-5ad5bcc3 { position: relative; }
.elementor-element-5ad5bcc3::before {
    content: "";
    position: absolute;
    inset: 0;
    background: #0a1f44;          /* dark blue */
    opacity: 0.30;               /* 30% */
    z-index: 1;                   /* above the slideshow layers (z-index:0) */
    pointer-events: none;
}
/* keep hero content above the tint */
.elementor-element-5ad5bcc3 > .elementor-container { position: relative; z-index: 2; }

/* ------------------------------------------------------------
   6. Full-width section safety net.
   Elementor "stretched" sections were sized to the viewport by
   JS (inline width:1920px; left:-260px). Those inline styles were
   stripped from the markup; this guarantees sections flow at 100%
   width with no horizontal offset even if any slipped through.
   ------------------------------------------------------------ */
html, body { overflow-x: hidden; max-width: 100%; }

.elementor-section.elementor-section-stretched {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    position: relative !important;
}
.elementor,
.elementor-section,
.elementor-section-wrap,
#qodef-page-wrapper,
#qodef-page-inner,
#qodef-page-content,
.qodef-content-grid {
    max-width: 100% !important;
}
/* Inner container keeps its centred max-width / padding */
.elementor-section > .elementor-container {
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Header: don't let the captured fixed width push it */
#qodef-page-header,
#qodef-page-header-inner {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    max-width: 100% !important;
}

/* ------------------------------------------------------------
   7. Header clean-up.
   The capture includes BOTH a desktop header (#qodef-page-header,
   with the nav) and a mobile header (#qodef-page-mobile-header).
   The plugin CSS that hides the mobile one on desktop is gone, so
   both showed at once. Also the Qode page-title H1 (.entry-title)
   leaked through as a big unstyled heading. Fix both.
   ------------------------------------------------------------ */

/* The REAL site navigation on this page is the Royal nav widget
   (.wpr-nav-menu) inside the first content section — that's the dark
   bar over the hero. The Qode theme headers were set to "appearance
   none" originally (body has qodef-header-appearance--none) and only
   leaked through because the plugin CSS is gone. Hide BOTH Qode
   headers so their stray Canmoor logo + floating hamburger disappear. */
#qodef-page-header,
#qodef-page-mobile-header { display: none !important; }

/* Hide the leaked page-title H1 ("Westway at Glasgow Airport") that
   Qode normally suppresses on this template. Scope tightly so news
   post titles are unaffected (those use .westway-single__title). */
.home .qodef-m-title.entry-title,
.home .qodef-page-title,
.home .qodef-title { display: none !important; }

/* The content nav bar (wpr-nav-menu / wpr-logo in the first section)
   is the header — make sure it spans full width and reads cleanly. */
.home .elementor-section:first-of-type .wpr-nav-menu-container,
.home .wpr-nav-menu { display: flex; flex-wrap: wrap; align-items: center; }

/* ------------------------------------------------------------
   8. FULL-WIDTH page container fix (the white frame).
   #qodef-page-inner carries class .qodef-content-grid, which Qode
   sets to `width:1100px; margin:0 auto` — that was the narrow white
   box with big side margins. On the original site Elementor's
   stretched-section JS broke each section out to full viewport
   width; with that JS gone the 1100px cage shows. Force the page
   container full width. Inner content still keeps its own readable
   max-width via each section's .elementor-container.
   ------------------------------------------------------------ */
.home #qodef-page-inner,
.home #qodef-page-inner.qodef-content-grid,
.home #qodef-page-content,
.home .qodef-content-grid {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Remove the white lip at the very top: Qode set
   #qodef-page-inner{padding:130px 0 100px} to clear its fixed header,
   which we removed — so that 130px was just empty white space. */
.home #qodef-page-inner { padding-top: 0 !important; padding-bottom: 0 !important; }

/* Sections span the FULL viewport width with NO added white-gap padding.
   We keep each section's ORIGINAL Elementor vertical padding (part of the
   design) but reset horizontal margins/forced widths so nothing is boxed
   or offset. Inner containers fill the width with a small fluid side gutter
   so text isn't jammed against the screen edge. */
.home .elementor-section {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
}
.home .elementor-section.elementor-top-section > .elementor-container {
    max-width: 100% !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: clamp(16px, 3vw, 50px);
    padding-right: clamp(16px, 3vw, 50px);
    box-sizing: border-box;
}
/* Full-bleed background sections: image reaches the screen edges; the
   inner container keeps the fluid gutter. */
.home .elementor-section.elementor-section-stretched { padding-left: 0 !important; padding-right: 0 !important; }

/* ------------------------------------------------------------
   9. Nav logo on one line + working dropdown (no plugin JS).
   ------------------------------------------------------------ */

/* The "westway at glasgow airport" nav logo is a heading widget
   (element 3035b58). Keep it on ONE line and let it shrink on
   narrower screens instead of wrapping to multiple lines. */
.home .elementor-element-3035b58 .elementor-heading-title,
.home .elementor-element-3035b58 .elementor-heading-title a {
    white-space: nowrap !important;
    display: inline-block;
    /* fluid size: shrinks with viewport, never wraps */
    font-size: clamp(13px, 1.15vw, 22px) !important;
    line-height: 1.1 !important;
}
.home .elementor-element-3035b58 { flex-shrink: 0; min-width: 0; }

/* --- Availability dropdown: reveal the sub-menu on hover/focus ---
   Royal's menu JS (which toggled the submenu) is gone, and the
   submenu carries an inline style="display:none". Override it and
   show it on hover so Industrial / Development / Office work. */
.wpr-nav-menu .sub-menu,
.wpr-nav-menu .wpr-sub-menu {
    display: block !important;       /* beat the inline display:none */
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 200px;
    background: #5a5a5a;
    padding: 6px 0;
    margin: 0;
    list-style: none;
    z-index: 200;
    /* hidden until the parent item is hovered */
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity .18s ease, transform .18s ease, visibility .18s;
    box-shadow: 0 12px 30px rgba(0,0,0,.18);
}
.wpr-nav-menu .menu-item-has-children { position: relative; }
.wpr-nav-menu .menu-item-has-children:hover > .sub-menu,
.wpr-nav-menu .menu-item-has-children:focus-within > .sub-menu {
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateY(0) !important;
}
.wpr-nav-menu .sub-menu li { display: block; margin: 0; }
.wpr-nav-menu .sub-menu a {
    display: block;
    padding: 9px 20px;
    white-space: nowrap;
    color: #fff;
    text-decoration: none;
}
.wpr-nav-menu .sub-menu a:hover { background: rgba(0,0,0,.25); }

/* Keep the whole top nav on a single row (logo + menu items) and let
   it tighten on smaller screens rather than wrapping to two lines.
   The menu sits in a flex column next to the logo. */
.home .wpr-nav-menu-container,
.home ul.wpr-nav-menu {
    display: flex !important;
    flex-wrap: nowrap !important;
    align-items: center;
}
.home ul.wpr-nav-menu > li.menu-item { flex: 0 0 auto; }
.home .wpr-nav-menu > li > a.wpr-menu-item {
    white-space: nowrap;
    padding-left: clamp(8px, 0.9vw, 18px) !important;
    padding-right: clamp(8px, 0.9vw, 18px) !important;
    font-size: clamp(12px, 0.95vw, 16px);
}
@media (max-width: 1100px) {
    /* very tight screens: allow a controlled wrap so it stays usable */
    .home ul.wpr-nav-menu { flex-wrap: wrap !important; }
}

/* ------------------------------------------------------------
   10. Restored interactions: slideshow layers, download-button
   icon, clickable news cards.
   ------------------------------------------------------------ */

/* Hero background slideshow layers (built by home.js) */
.westway-slideshow {
    position: absolute;
    inset: 0;
    overflow: hidden;
    z-index: 0;
}
.westway-slide {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
    will-change: opacity;
    /* subtle ken-burns drift */
    animation: westway-kenburns 12s ease-in-out infinite alternate;
}
@keyframes westway-kenburns {
    from { transform: scale(1.02); }
    to   { transform: scale(1.10); }
}
/* keep the section's own content above the slideshow */
.elementor-element-5ad5bcc3 > .elementor-container,
.elementor-element-5ad5bcc3 > .elementor-background-overlay { position: relative; z-index: 1; }

/* Download buttons already carry a Font Awesome `fa-file-download`
   icon in their markup (same icon as the tables) — no extra arrow is
   added. Just make sure that icon shows in white on the red buttons. */
.elementor-button .elementor-button-icon i,
.elementor-button .elementor-button-icon svg,
a.elementor-button i.fas,
.elementor-widget-button a i { color: #fff !important; }

/* Make the whole news card clickable + show a pointer (home.js wires
   the click; this is the affordance). */
.wpr-grid-item, .westway-card { cursor: pointer; }

/* ------------------------------------------------------------
   11. Global-nav integration + carousel arrows + responsiveness.
   ------------------------------------------------------------ */

/* The global sticky nav (theme-partials/site-nav) is now the header on
   every page. The homepage's captured content has its OWN in-content nav
   bars — #ad6e6b2 (desktop nav: logo "westway at glasgow airport" + Royal
   menu) and #49902d3 (mobile nav variant). Hide BOTH so the global nav is
   the only header. */
.home .elementor-element-ad6e6b2,
.home .elementor-element-49902d3 { display: none !important; }

/* Carousel arrows: make them visible, clickable and nicely placed. */
.elementor-swiper-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 6;
    cursor: pointer;
    width: 44px; height: 44px;
    display: flex; align-items: center; justify-content: center;
    background: rgba(0,0,0,.35);
    color: #fff;
    border-radius: 50%;
    font-size: 20px;
    transition: background .2s ease;
}
.elementor-swiper-button:hover { background: rgba(0,0,0,.6); }
.elementor-swiper-button-prev { left: 18px; }
.elementor-swiper-button-next { right: 18px; }
.elementor-image-carousel-wrapper { position: relative; }

/* ---------- Responsive: fluid type + stacking on smaller screens ---------- */
@media (max-width: 1024px) {
    /* columns that were side-by-side stack on tablet/mobile */
    .home .elementor-column.elementor-col-50,
    .home .elementor-column.elementor-col-33,
    .home .elementor-column.elementor-col-25 { width: 100% !important; }
    /* news grid: 2 then 1 column already handled in section 3 */
}
@media (max-width: 680px) {
    .home .wpr-grid .wpr-grid-item { width: 100% !important; }
    /* tighten oversized fluid headings further on phones */
    .home .qodef-m-title .qodef-m-title-inner { font-size: clamp(34px, 11vw, 60px) !important; line-height: 1.05 !important; }
}

/* Make all media fluid so nothing overflows on small screens */
.home img, .home iframe, .home video { max-width: 100%; height: auto; }
.home .elementor-image-carousel.swiper-wrapper .swiper-slide img { height: auto; }

/* ------------------------------------------------------------
   12. Homepage footer (Contacts) section background.
   Section #60098b61 originally used an external gradient image we
   removed; without it the section was transparent → white gaps
   around the footer. Give it the solid grey panel colour to match
   the design (and the global footer).
   ------------------------------------------------------------ */
.home .elementor-element-60098b61 {
    background-color: #6b6b6b !important;
}
/* kill any residual white gap: the footer + disclaimer go edge-to-edge */
.home .elementor-element-60098b61,
.home .elementor-element-3c08d283 {
    width: 100% !important;
    margin: 0 !important;
}

/* ------------------------------------------------------------
   13. Map embed: make the map as TALL as its column (the section's
   right column has the "Scotland's Gateway…" copy + connections table).
   The Elementor row already stretches both columns to equal height; we
   make the whole chain down to the iframe 100% so the map fills it.
   ------------------------------------------------------------ */
/* The row stretches both columns to equal height (Elementor default
   align-items:stretch). Make the map column's inner wrappers fill that
   stretched height so the iframe grows to match the right column,
   instead of the column hugging the map. */
.home .elementor-column:has(iframe[src*="snazzymaps"]) > .elementor-widget-wrap {
    height: 100% !important;
    align-content: stretch;
}
.home .elementor-column:has(iframe[src*="snazzymaps"]) > .elementor-widget-wrap > .elementor-element,
.home .elementor-column:has(iframe[src*="snazzymaps"]) .elementor-widget-html,
.home .elementor-column:has(iframe[src*="snazzymaps"]) .elementor-widget-html > .elementor-widget-container {
    height: 100% !important;
    flex-grow: 1;
}
iframe[src*="snazzymaps"] {
    width: 100% !important;
    height: 100% !important;
    min-height: 520px;   /* never shorter than this */
    display: block;
    border: 0;
}
/* on stacked mobile the column is no longer height-matched — fixed height */
@media (max-width: 1024px) {
    .home .elementor-column:has(iframe[src*="snazzymaps"]) > .elementor-widget-wrap,
    .home .elementor-column:has(iframe[src*="snazzymaps"]) .elementor-widget-html,
    .home .elementor-column:has(iframe[src*="snazzymaps"]) .elementor-widget-html > .elementor-widget-container { height: auto !important; }
    iframe[src*="snazzymaps"] { height: 380px !important; min-height: 380px; }
}

/* overlays must sit ABOVE the background video (container is z-index:0) */
.elementor-element-2b0abdbb > .elementor-background-overlay,
.elementor-element-28e95ddc > .elementor-background-overlay,
.elementor-element-cf1ed08 > .elementor-background-overlay { z-index: 1 !important; }

/* ------------------------------------------------------------
   14. Spacing under the slide gallery (image carousel #43362ac).
   ------------------------------------------------------------ */
.home .elementor-element-43362ac { padding-bottom: clamp(40px, 6vw, 90px) !important; }

/* ============================================================
   15. MOBILE polish (<= 768px): tables fit, icons in >=2 cols,
   images full-width w/ consistent padding, no giant empty gaps.
   ============================================================ */
@media (max-width: 768px) {

    /* ---- consistent side padding for every section's content ---- */
    .home .elementor-section > .elementor-container {
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /* ---- TABLES: never overflow; equal padding; allow wrap ---- */
    .home .wpr-data-table,
    .home .wpr-table-container { width: 100% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .home table.wpr-table {
        width: 100% !important;
        min-width: 0 !important;
        table-layout: fixed;
        border-collapse: collapse;
    }
    /* kill the forced nowrap that pushes tables wider than the screen */
    .home .wpr-table-text-nowrap-yes .wpr-table-text,
    .home .wpr-table td, .home .wpr-table th { white-space: normal !important; }
    /* uniform cell padding everywhere */
    .home .wpr-table th, .home .wpr-table td,
    .home .wpr-table-head-row > *, .home .wpr-table-body-row > * {
        padding: 8px 8px !important;
        font-size: 12px !important;
        word-break: break-word;
        vertical-align: middle;
    }
    .home .wpr-table .wpr-table-text { font-size: 12px !important; }

    /* ---- ICON GRIDS: 2 columns for COMPACT icon+label tiles ---- */
    /* sustainability circles (icon + short label) sit two-up. */
    .home .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-icon-box),
    .home .elementor-column:has(.elementor-icon-box-wrapper),
    .home .elementor-column:has(.qodef-icon-with-text):not(:has(.elementor-widget-archicon_core_icon_with_text)) {
        width: 50% !important;
        flex: 0 0 50% !important;
    }

    /* The "Built for Logistics" feature boxes (archicon_core_icon_with_text)
       have an icon BESIDE a heading + paragraph — too text-heavy to squeeze
       into 50%. Give them full width with a clean icon-left / text-right row
       so titles never wrap mid-word. */
    .home .elementor-column:has(.elementor-widget-archicon_core_icon_with_text) {
        width: 100% !important;
        flex: 0 0 100% !important;
    }
    .home .elementor-widget-archicon_core_icon_with_text { margin-bottom: 22px; }
    .home .elementor-widget-archicon_core_icon_with_text .elementor-widget-container,
    .home .archicon-core-icon-with-text,
    .home .qodef-icon-with-text {
        display: flex !important;
        flex-direction: row !important;
        align-items: flex-start !important;
        gap: 16px !important;
        text-align: left !important;
    }
    .home .elementor-widget-archicon_core_icon_with_text .qodef-m-icon,
    .home .elementor-widget-archicon_core_icon_with_text [class*="icon"] {
        flex: 0 0 auto !important;
        position: static !important;
        margin: 0 !important;
    }
    .home .elementor-widget-archicon_core_icon_with_text .qodef-m-content,
    .home .elementor-widget-archicon_core_icon_with_text [class*="content"],
    .home .elementor-widget-archicon_core_icon_with_text [class*="text"] {
        flex: 1 1 auto !important;
        position: static !important;
        margin: 0 !important;
        word-break: normal !important;
        hyphens: none !important;
        overflow-wrap: normal !important;
    }
    .home .elementor-widget-icon-box,
    .home .elementor-widget-archicon_core_icon_with_text { text-align: center; }
    /* stack the icon ABOVE the text (not beside) so the narrow 50% column
       has full width for the label — fixes cramped/wrapped titles like
       "Mod ern", "Facili ties". */
    .home .elementor-icon-box-wrapper {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
    }
    .home .elementor-icon-box-icon { margin: 0 auto 10px !important; float: none !important; }
    .home .elementor-icon-box-content { width: 100%; }
    .home .elementor-icon-box-title, .home .elementor-icon-box-description { word-break: normal; hyphens: none; overflow-wrap: normal; }
    .home .elementor-icon-box-title { font-size: 15px !important; line-height: 1.25 !important; }
    .home .elementor-icon-box-description { font-size: 12px !important; }

    /* ---- IMAGES: keep natural size, just never overflow ----
       (No forced width:100% — images keep their intended sizing; the
       count-up section #32637549 is excluded regardless.) */
    .home .elementor-widget-image:not(.elementor-element-32637549 .elementor-widget-image) img,
    .home .elementor-section:not(.elementor-element-32637549) .elementor-widget-image img {
        max-width: 100% !important;
        height: auto !important;
        display: block;
    }
    .home .elementor-section:not(.elementor-element-32637549) .elementor-widget-image { margin-bottom: 14px; }
    /* count-up section: keep icon images small (NOT 100%) and STACK the
       three stats one per row on mobile. */
    .home .elementor-element-32637549 .elementor-widget-image img { width: auto !important; max-width: 64px; height: auto !important; }
    .home .elementor-element-32637549 .elementor-column { width: 100% !important; flex: 0 0 100% !important; }
    .home .elementor-element-32637549 .elementor-widget-image { margin-bottom: 8px; }

    /* ---- collapse oversized empty sections (desktop-spaced voids) ---- */
    /* "In Good Company" logos + the unit-plan sections shouldn't reserve
       huge fixed heights on mobile. */
    .home .elementor-element-f855cc9 .elementor-container,
    .home .elementor-section { min-height: 0 !important; }
    .home .elementor-element-f855cc9 .elementor-column { height: auto !important; }
    /* client logo grid: 2-up, centred, tidy */
    .home .elementor-element-f855cc9 .elementor-column.elementor-col-16,
    .home .elementor-element-f855cc9 .elementor-column.elementor-col-20,
    .home .elementor-element-f855cc9 .elementor-column.elementor-col-25 {
        width: 50% !important; flex: 0 0 50% !important;
    }
    /* The client-logo PNGs are 197×197 square canvases with a small logo
       centred in lots of transparent padding — so each cell reserved ~197px
       of height and the grid had ~180px voids between rows. Cap the logo
       image height so rows sit tight; the logo keeps its aspect ratio and
       stays centred in a compact cell. */
    /* High specificity (section + element + widget-image) so this beats the
       generic `…widget-image img{height:auto}` rule above. */
    .home .elementor-section.elementor-element-f855cc9 .elementor-widget-image img,
    .home .elementor-element-f855cc9 .elementor-column .elementor-widget-image img {
        height: 84px !important;
        width: auto !important;
        max-width: 100% !important;
        object-fit: contain;
        margin: 0 auto !important;
        display: block;
    }
    .home .elementor-element-f855cc9 .elementor-widget-image,
    .home .elementor-element-f855cc9 .elementor-widget-image > .elementor-widget-container {
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    /* let the logo columns size to the (now small) logo, not reserve 197px */
    .home .elementor-element-f855cc9 .elementor-column > .elementor-element-populated,
    .home .elementor-element-f855cc9 .elementor-column > .elementor-widget-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }

    /* availability sections: drop the big empty min-heights on the
       full-height dark sections so the table sits right under the title */
    .home .elementor-section.elementor-section-height-full { min-height: 0 !important; height: auto !important; }
}

/* ------------------------------------------------------------
   16. Collapse dead/oversized sections + tidy availability blocks.
   (applies all sizes, reinforced on mobile)
   ------------------------------------------------------------ */
/* DearFlip flipbook (#95ab98e): the dFlip plugin is ACTIVE again and the
   section now renders a live [dflip id="16550"] shortcode — so it is shown
   (no longer hidden). Keep min-height tidy. */
.home .elementor-element-95ab98e { min-height: 0 !important; }

@media (max-width: 768px) {
    /* WESTWAY / BLOCK N availability blocks: stack tidily, no reserved void.
       The plan image + table + button sit directly under the heading. */
    .home .elementor-element-3336d22c .elementor-column,
    .home .elementor-element-c375619 .elementor-column,
    .home .elementor-element-d3efb44 .elementor-column { width: 100% !important; flex: 0 0 100% !important; }
    .home .elementor-element-3336d22c .elementor-widget,
    .home .elementor-element-c375619 .elementor-widget { margin-bottom: 16px !important; }
    /* site-plan images: full width, contained, centred */
    .home img[src*="Site_Plan"], .home img[src*="Block_N"] {
        width: 100% !important; max-width: 520px; height: auto !important; margin: 0 auto 16px !important; display: block;
    }
    /* trim oversized inner spacers on any sparse section */
    .home .elementor-widget-spacer,
    .home .elementor-spacer-inner { height: 16px !important; }
}

/* ------------------------------------------------------------
   17. Greyed-out / unclickable brochure download (new units not
   yet released). Same icon + "Download" label, but dimmed and inert.
   ------------------------------------------------------------ */
.wpr-brochure-disabled {
    color: #9aa0a6 !important;
    opacity: 0.5;
    pointer-events: none !important;   /* unclickable */
    cursor: default !important;
    text-decoration: none !important;
}
.wpr-brochure-disabled .wpr-table-text { color: #9aa0a6 !important; }
.wpr-brochure-disabled i { color: #9aa0a6 !important; }

/* ------------------------------------------------------------
   18. Targeted element fixes (per request).
   ------------------------------------------------------------ */
/* Column #f315e28 — remove the 50px padding. */
.home .elementor-element-f315e28 > .elementor-element-populated,
.home .elementor-element-f315e28 > .elementor-widget-wrap {
    padding: 0 !important;
}

/* Mobile: image widgets #860920f / #b3c47cf are locked to 500px / ~301px
   which leaves them undersized with gaps — make them fluid full-width. */
@media (max-width: 768px) {
    .home .elementor-element-860920f,
    .home .elementor-element-b3c47cf {
        width: 100% !important;
        max-width: 100% !important;
        --container-widget-width: 100% !important;
        --container-widget-flex-grow: 1 !important;
    }
    .home .elementor-element-860920f img,
    .home .elementor-element-b3c47cf img {
        width: 100% !important;
        height: auto !important;
        display: block;
    }
}

/* ------------------------------------------------------------
   12. UNIFIED LEFT GUTTER.
   Elementor gave each section/column its own horizontal padding
   and column margin (50px, 60px, 100px, 160px ...), so every
   left-aligned element — headings, paragraphs, images, the map —
   started at a different distance from the screen edge.

   We collapse all of those horizontal offsets to ZERO and let the
   ONE inset live on `.elementor-container` (clamp(16px,3vw,50px),
   defined in §8 above). Result: every left-aligned element snaps
   to a single vertical guide at the same distance from the edge,
   on every section, at every breakpoint.

   Vertical spacing (top/bottom) is preserved — we only touch the
   horizontal axis. Data-table cell padding (td/th) is NOT a column
   or section, so it is untouched.
   ------------------------------------------------------------ */
.home .elementor-section > .elementor-container > .elementor-column,
.home .elementor-column > .elementor-element-populated,
.home .elementor-column > .elementor-widget-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    --e-column-margin-left: 0px !important;
    --e-column-margin-right: 0px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Top-level sections: drop their own L/R padding so the single
   container inset is the only horizontal gutter. */
.home .elementor-section.elementor-top-section {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
/* Widgets sit flush to the column edge (the container provides the gutter). */
.home .elementor-column .elementor-widget > .elementor-widget-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
}
/* INNER (nested) sections must NOT re-apply the gutter — otherwise their
   container adds a second clamp() inset on top of the top-level one and the
   content lands at 2x the distance from the edge. Only the TOP section's
   container carries the single gutter; inner containers reset to flush. */
.home .elementor-section.elementor-inner-section,
.home .elementor-section.elementor-inner-section > .elementor-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.home .elementor-section.elementor-inner-section > .elementor-container > .elementor-column,
.home .elementor-inner-column > .elementor-element-populated,
.home .elementor-inner-column > .elementor-widget-wrap {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ------------------------------------------------------------
   12b. INTER-COLUMN GAP.
   Zeroing the column padding above also removed Elementor's
   between-column spacing (it had created the gap via padding on
   each .elementor-element-populated). A right-hand column was then
   stuck against the left one. We restore a real 50px gap using the
   flex container's `gap` — this spaces columns FROM EACH OTHER
   without shifting the first column's left edge, so the unified
   left guide from §12 is preserved.
   ------------------------------------------------------------ */
.home .elementor-section > .elementor-container {
    column-gap: 50px;
    row-gap: 0;
}
/* Inner-section rows get the same gap between their columns. */
.home .elementor-section.elementor-inner-section > .elementor-container {
    column-gap: 50px;
}
/* When columns stack (≤1024px the existing rule sets col-* to 100%),
   the horizontal gap no longer applies between side-by-side columns;
   give a vertical gap so stacked blocks aren't jammed together, and
   drop the now-pointless horizontal gap. */
@media (max-width: 1024px) {
    .home .elementor-section > .elementor-container,
    .home .elementor-section.elementor-inner-section > .elementor-container {
        column-gap: 0;
        row-gap: 30px;
    }
}

/* ------------------------------------------------------------
   12c. CONSISTENT AGENCY LOGO SIZE.
   The contact cards show three agency logos: JLL (6f7e94e, 265bb06),
   Colliers (5979dd1) and Knight Frank (aa1b0eb). Only KNF carried a
   forced size (home.css: `img{width:75%;height:90px}`) which, being an
   SVG with no aspect lock, blew up to ~296px wide on mobile while the
   others stayed at their natural size — so the logos didn't match.

   Normalise all four to the SAME height with auto width: each logo
   keeps its own aspect ratio but they read at one consistent scale.
   ------------------------------------------------------------ */
/* High specificity (.home .elementor-section …widget-image.element img) so
   these win over the generic `…widget-image img{height:auto}` rule in §13. */
.home .elementor-section .elementor-widget-image.elementor-element-6f7e94e img,   /* JLL */
.home .elementor-section .elementor-widget-image.elementor-element-265bb06 img,   /* JLL */
.home .elementor-section .elementor-widget-image.elementor-element-5979dd1 img,   /* Colliers */
.home .elementor-section .elementor-widget-image.elementor-element-aa1b0eb img {  /* Knight Frank */
    width: auto !important;
    height: 56px !important;
    max-width: 100% !important;
    object-fit: contain;
    display: block;
}
@media (max-width: 768px) {
    /* slightly smaller on phones, still uniform across all three agencies */
    .home .elementor-section .elementor-widget-image.elementor-element-6f7e94e img,
    .home .elementor-section .elementor-widget-image.elementor-element-265bb06 img,
    .home .elementor-section .elementor-widget-image.elementor-element-5979dd1 img,
    .home .elementor-section .elementor-widget-image.elementor-element-aa1b0eb img {
        height: 48px !important;
    }
}

/* ------------------------------------------------------------
   12d. KILL THE GIANT HEADLINE GAPS ON MOBILE.
   The Qode section-title widgets (archicon_core_section_title) carry
   large vertical padding from home.css — some as PERCENTAGE (relative
   to width, so huge on a phone: #5ac1f6d5 had `padding-bottom:50%` ≈
   197px), others as fixed 39–50px top padding. There are MANY of these
   widgets (one+ per headline, plus responsive duplicates), so targeting
   them by hash is fragile — easy to miss the variant that's actually
   visible on mobile.

   Instead we target the widget TYPE structurally: on mobile, every
   section-title widget container gets a small, uniform vertical gap.
   This catches every headline ("Industrial/Warehouse", "Space to Suit
   You", "Ideal for business", "News Release", "Glasgow Airport", etc.)
   regardless of which responsive instance renders. Desktop is untouched
   (scoped inside ≤768). Horizontal padding is left as-is.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .home .elementor-widget-archicon_core_section_title > .elementor-widget-container,
    .home .elementor-widget-archicon_core_section_title .qodef-section-title {
        padding-top: 0 !important;
        padding-bottom: 12px !important;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }
    /* The title's own column should hug the title — not reserve extra
       height that pushes the following content/image far away. */
    .home .elementor-column:has(> .elementor-widget-wrap > .elementor-widget-archicon_core_section_title),
    .home .elementor-column:has(> .elementor-element-populated > .elementor-widget-archicon_core_section_title) {
        align-self: flex-start !important;
    }
    /* Trim the large 50px section top padding that compounds with the
       stacked-column row-gap to make headline → content gaps huge. */
    .home .elementor-section.elementor-top-section > .elementor-container {
        padding-top: 26px !important;
    }
    /* Tighten the stacked-column vertical gap (was 30px in §12b). */
    .home .elementor-section > .elementor-container,
    .home .elementor-section.elementor-inner-section > .elementor-container {
        row-gap: 18px !important;
    }
    /* Column wrappers carry large TOP/BOTTOM padding from Elementor
       (e.g. the paragraph column next to "Space to Suit You" had 50px
       top padding) that, once columns stack, becomes a big void between
       a headline and its body text. Cap column vertical padding on mobile
       so the row-gap above does the spacing. (Horizontal padding stays 0
       per §12; td/th and the count-up stats are untouched.) */
    .home .elementor-column > .elementor-element-populated,
    .home .elementor-column > .elementor-widget-wrap {
        padding-top: 0 !important;
        padding-bottom: 0 !important;
    }
}

/* ------------------------------------------------------------
   12e. BUTTON SPACING ON MOBILE.
   The "Download brochure" / "Availability schedule" buttons live in
   two columns that sit side-by-side on desktop. Their widget
   containers carry `margin:50px 0 20px 0` (home.css) to align them in
   the desktop row. On mobile the columns STACK, so that 50px top +
   20px bottom stacked up into a ~70px void between the two buttons.
   Tighten the button widget's vertical margin on mobile.
   ------------------------------------------------------------ */
@media (max-width: 768px) {
    .home .elementor-widget-button > .elementor-widget-container {
        margin-top: 0 !important;
        margin-bottom: 14px !important;
    }
}

/* ------------------------------------------------------------
   12f. FOOTER: no inter-element padding, uniform 12px gaps.
   The footer = the contact-cards section (#60098b61, holding the
   Industrial/Office enquiry cards with the agency logos) plus the
   disclaimer/copyright section (#3c08d283). Each contact card and
   logo reserved large column padding/margins, leaving big voids.
   Strip the padding/margin between footer elements entirely and let
   a single 12px row-gap do all the spacing. Applies all breakpoints.
   ------------------------------------------------------------ */
.home .elementor-element-60098b61 .elementor-widget > .elementor-widget-container,
.home .elementor-element-3c08d283 .elementor-widget > .elementor-widget-container {
    margin: 0 !important;
    padding: 0 !important;
}
.home .elementor-element-60098b61 .elementor-element-populated,
.home .elementor-element-60098b61 .elementor-widget-wrap,
.home .elementor-element-3c08d283 .elementor-element-populated,
.home .elementor-element-3c08d283 .elementor-widget-wrap {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* 12px gap between stacked footer rows/columns and between widgets. */
.home .elementor-element-60098b61 > .elementor-container,
.home .elementor-element-60098b61 .elementor-inner-section > .elementor-container,
.home .elementor-element-3c08d283 > .elementor-container {
    row-gap: 12px !important;
    column-gap: 12px !important;
}
.home .elementor-element-60098b61 .elementor-widget:not(:last-child) > .elementor-widget-container {
    margin-bottom: 12px !important;
}
/* the agency-logo widget sits flush above its contact text (12px gap). */
.home .elementor-element-60098b61 .elementor-widget-image > .elementor-widget-container {
    margin-bottom: 12px !important;
}