/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Oct 13 2026 | 15:42:31 */
/* =========================================================================
   LANDFORD STONE — CUSTOM STYLESHEET
   -------------------------------------------------------------------------
   Paste into "Simple Custom CSS and JS". Indentation is 4 spaces throughout.

   CONTENTS
     01  Tokens and base
     02  Typography — Lora italic treatment
     03  Title rule utility
     04  Shapes and masks
     05  Buttons and chevron utility
     06  Case-study hero taxonomy
     07  Featured stones grid
     08  Product colour options
     09  Browse by space — term grid (.browse-spaces)
     10  Mini FAQ tabs
     11  Spec row
     12  Why us
     13  Testimonial carousel
     14  Post grid (.post-layout)
     15  Partner carousel
     16  Header and mega menu
     17  Hover-reveal utility
     18  Vertical stone-type grid
     19  Stone type template
     20  Gallery slider arrows
     21  Featured work
     22  Case-study hero image and technical options
     23  Make an enquiry links
     24  Inspiration grid
     25  Aftercare PDF list
     26  Responsive overrides (1320 / 900 / 600)
     27  Forminator forms
     28  Radio dropdowns
     29  Browse by space grid (.browse-by-space-grid)
     30  Forminator responsive
     31  Filters — all widths, self-contained
     32  Migrated from Impreza Theme Options
     33  QA fixes
     34  Responsive audit
     35  Team cards
     36  Responsive fixes — QA round 2
   ========================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@1,400..700&display=swap');


/* =========================================================================
   01  TOKENS AND BASE
   ========================================================================= */

:root {
    --border-width: 15px;
    --font-size-small: 15px;

    /* Circle arrows — one PNG for the resting state, one for hover.
       Right-pointing arrows are the SAME image rotated 180deg, so every
       arrow on the site comes from these two files. Change a URL here and
       it updates the gallery, the testimonial carousel, RoyalSlider and
       Featured Work in one go.

       The PNGs should be at least 120px square: they render at 60px in the
       gallery, 56px in the carousel and 48px in Featured Work, so anything
       smaller will look soft on a 2x screen. */
    --arrow-icon:       url("https://www.landfordstone.co.uk/wp-content/uploads/circle-arrow-left.png");
    --arrow-icon-hover: url("https://www.landfordstone.co.uk/wp-content/uploads/circle-arrow-left-hover.png");
}

* {
    font-synthesis: none;
}

.type_desktop .mobile-only {
    display: none !important;
}

.no-link > a {
    cursor: default !important;
}

.heading-underline {
    width: 250px !important;
}

.w-separator.width_30.align_left {
    margin-left: 0 !important;
}


/* =========================================================================
   02  TYPOGRAPHY — LORA ITALIC TREATMENT
   The site's Lora webfont is italic-only, so anything that needs upright
   text has to switch family, not just font-style.
   ========================================================================= */

/* Heading-1 typography applied to any element */
.heading-1:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-1 :is(h2, h3, h4, h5, h6),
.w-iconbox.heading-1 .w-iconbox-title {
    font-family: var(--h1-font-family, inherit);
    font-size: var(--h1-font-size, inherit);
    font-weight: var(--h1-font-weight, inherit);
    font-style: var(--h1-font-style, inherit);
    line-height: var(--h1-line-height, 1.4);
    letter-spacing: var(--h1-letter-spacing, inherit);
    text-transform: var(--h1-text-transform, inherit);
    margin-bottom: var(--h1-margin-bottom, 1.5rem);
	color: var(--h1-color, inherit);
}

/* Heading-2 typography applied to any element */
.heading-2:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-2 :is(h1, h3, h4, h5, h6),
.w-iconbox.heading-2 .w-iconbox-title {
    font-family: var(--h2-font-family, inherit);
    font-size: var(--h2-font-size, inherit);
    font-weight: var(--h2-font-weight, inherit);
    font-style: var(--h2-font-style, inherit);
    line-height: var(--h2-line-height, 1.4);
    letter-spacing: var(--h2-letter-spacing, inherit);
    text-transform: var(--h2-text-transform, inherit);
    margin-bottom: var(--h2-margin-bottom, 1.5rem);
	color: var(--h2-color, inherit);
}

/* Heading-3 typography applied to any element */
.heading-3:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-3 :is(h1, h2, h4, h5, h6),
.w-iconbox.heading-3 .w-iconbox-title {
    font-family: var(--h3-font-family, inherit);
    font-size: var(--h3-font-size, inherit);
    font-weight: var(--h3-font-weight, inherit);
    font-style: var(--h3-font-style, inherit);
    line-height: var(--h3-line-height, 1.4);
    letter-spacing: var(--h3-letter-spacing, inherit);
    text-transform: var(--h3-text-transform, inherit);
    margin-bottom: var(--h3-margin-bottom, 1.5rem);
	color: var(--h3-color, inherit);
}

/* Heading-4 typography applied to any element */
.heading-4:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-4 :is(h1, h2, h3, h5, h6),
.w-iconbox.heading-4 .w-iconbox-title {
    font-family: var(--h4-font-family, inherit);
    font-size: var(--h4-font-size, inherit);
    font-weight: var(--h4-font-weight, inherit);
    font-style: var(--h4-font-style, inherit);
    line-height: var(--h4-line-height, 1.4);
    letter-spacing: var(--h4-letter-spacing, inherit);
    text-transform: var(--h4-text-transform, inherit);
    margin-bottom: var(--h4-margin-bottom, 1.5rem);
	color: var(--h4-color, inherit);
}

/* Heading-5 typography applied to any element */
.heading-5:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-5 :is(h1, h2, h3, h4, h6),
.w-iconbox.heading-5 .w-iconbox-title {
    font-family: var(--h5-font-family, inherit);
    font-size: var(--h5-font-size, inherit);
    font-weight: var(--h5-font-weight, inherit);
    font-style: var(--h5-font-style, inherit);
    line-height: var(--h5-line-height, 1.4);
    letter-spacing: var(--h5-letter-spacing, inherit);
    text-transform: var(--h5-text-transform, inherit);
    margin-bottom: var(--h5-margin-bottom, 1.5rem);
	color: var(--h5-color, inherit);
}

/* Heading-6 typography applied to any element */
.heading-6:is(h1, h2, h3, h4, h6),
.wpb_text_column.heading-6 :is(h1, h2, h3, h4, h5),
.w-iconbox.heading-6 .w-iconbox-title {
    font-family: var(--h6-font-family, inherit);
    font-size: var(--h6-font-size, inherit);
    font-weight: var(--h6-font-weight, inherit);
    font-style: var(--h6-font-style, inherit);
    line-height: var(--h6-line-height, 1.4);
    letter-spacing: var(--h6-letter-spacing, inherit);
    text-transform: var(--h6-text-transform, inherit);
    margin-bottom: var(--h6-margin-bottom, 1.5rem);
	color: var(--h6-color, inherit);
}

:is(h1, h2, h3, h4, h5, h6, p, div) em,
[class*="italic"],
.title-rule :is(h1, h2, h3, h4, h5, h6),
.title-rule .w-iconbox-title,
.featured-stones .w-hwrapper.head :is(h1, h2, h3, h4, h5, h6),
.featured-stones .w-post-elm.post_title,
.why-us-card .w-iconbox-title,
.ls-mega-heading,
.ls-mega-heading :is(h1, h2, h3),
.vertical-stone-type-grid .w-post-elm.post_title,
.ls-key-benefits-list .repeater-field.title,
.ls-key-benefits-list .repeater-field.key_benefits_repeater_title,
.space-title-rule .post_title,
.fw-title .fw-title-inner .serif,
.fw-desc {
    font-family: 'Lora', serif;
    font-style: italic !important;
}

:is(h1, h2, h3, h4, h5, h6, p, div) em {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-black);
    font-size: 1.2em;
    letter-spacing: 0.001em;
}

:is(h1, h2, h3, h4, h5, h6) em,
.italic-heading,
.italic {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-black);
    letter-spacing: 0.001em;
}

.italic-white :is(h1, h2, h3, h4, h5, h6) em,
.italic-heading,
.italic {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-white) !important;
    letter-spacing: 0.001em;
}

.italic-brown :is(h1, h2, h3, h4, h5, h6) em,
.italic-heading,
.italic {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-brown) !important;
    letter-spacing: 0.001em;
}


/* =========================================================================
   03  TITLE RULE UTILITY
   Italic title with a brown rule underneath. Add "title-rule" to any
   title or header wrapper via Design Options → Extra class name.
   ========================================================================= */

.title-rule {
    position: relative;
}

.title-rule::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

.title-rule.green::before {
    background-color: var(--color-green) !important;
}

/* Italicise the title, whatever tag it is */
.title-rule :is(h1, h2, h3, h4, h5, h6),
.title-rule .w-iconbox-title {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-black);
    font-size: 1.2em;
}

/* Icon-box extras — only when .title-rule sits on a .w-iconbox */
.title-rule.w-iconbox {
    display: flex;
    align-items: center;
    justify-content: space-between;   /* title hard-left, icon hard-right */
    width: 100%;
}

.title-rule.w-iconbox .w-iconbox-icon {
    flex: none;                       /* stop the icon being squashed */
}

.title-rule.w-iconbox .w-iconbox-icon img,
.title-rule.w-iconbox .w-iconbox-icon svg {
    display: block;
    width: 1.4em;
    height: auto;
}


/* =========================================================================
   04  SHAPES AND MASKS
   ========================================================================= */

.bg-arrow-shape {
    clip-path: shape(
        from 16% 0,
        line  to 100% 0,
        line  to 100% 100%,
        line  to 16% 100%,
        line  to calc(2% + 14px) calc(50% + 45px),
        curve to calc(2% + 14px) calc(50% - 45px) with 2% 50%,
        line  to 16% 0,
        close
    );
}

.bg-arrow-shape-reversed {
    clip-path: shape(
        from 84% 0,
        line  to 0% 0,
        line  to 0% 100%,
        line  to 84% 100%,
        line  to calc(98% - 14px) calc(50% + 45px),
        curve to calc(98% - 14px) calc(50% - 45px) with 98% 50%,
        line  to 84% 0,
        close
    );
}

.video-mask {
    -webkit-mask-image: url("/wp-content/uploads/ls-arrow.svg");
    mask-image: url("/wp-content/uploads/ls-arrow.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: left center;
    mask-position: left center;
    -webkit-mask-size: cover;
    mask-size: cover;
}

.video-mask-short {
    -webkit-mask-image: url("/wp-content/uploads/Frame-1.svg");
            mask-image: url(/wp-content/uploads/Frame-1.svg");
    -webkit-mask-repeat: no-repeat;
            mask-repeat: no-repeat;
    -webkit-mask-position: left center;
            mask-position: left center;
    -webkit-mask-size: cover;
            mask-size: cover;
}

.hero-video video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}


/* =========================================================================
   05  BUTTONS AND CHEVRON UTILITY
   -------------------------------------------------------------------------
   .button-2  — chevron button, stretches on hover.
   .chevron   — the same chevron as a bullet marker. Works on:
                  Impreza text  → <p class="w-text chevron brown">Item</p>
                  real list     → <ul class="chevron brown"><li>Item</li></ul>
                  text block    → <div class="chevron brown"><p>Item</p></div>
                Colour = add .green or .brown alongside .chevron
   ========================================================================= */

.button-2 {
    display: inline-flex !important;
    align-items: center !important;   /* centres the chevron against the text */
    gap: 0.55em;
    padding: 0 !important;
    margin: 0 !important;
}

.button-2 span.w-btn-label {
    padding-left: 20px !important;
    transition: all 0.2s ease-in-out;
}

.button-2::before {
    --chev-r: 2px;                    /* radius for the two left corners */
    content: "";
    flex: none;
    width: 0.8em;
    height: 1.05em;
    clip-path: shape(
        from var(--chev-r) 0,
        line  to 60% 0,
        line  to 100% 50%,
        line  to 60% 100%,
        line  to var(--chev-r) 100%,
        curve to 0 calc(100% - var(--chev-r)) with 0 100%,
        line  to 0 var(--chev-r),
        curve to var(--chev-r) 0 with 0 0,
        close
    );
    transform-origin: left center;
    transition: transform 0.25s ease;
}

.button-2.green::before,
.chevron.green a::before,
.chevron.green p::before {
    background: var(--color-green);
}

.button-2.brown::before,
.chevron.brown a::before,
.chevron.brown p::before {
    background: var(--color-brown);
}

.button-2:hover::before {
    transform: scaleX(1.8);           /* grows width only, height unchanged */
}

.button-2:hover span.w-btn-label {
    padding-left: 30px !important;
}

/* --- Chevron marker shape (identical to .button-2::before) --- */
.chevron .w-text-h::before,
.chevron li::before,
.chevron > p::before,
.chevron .wpb_wrapper > p::before {
    --chev-r: 2px;
    content: "";
    flex: none;
    width: 0.8em;
    height: 0.85em;
    align-self: flex-start;
    margin-top: calc((1lh - 0.85em) / 2);   /* centre on the first line */
    clip-path: shape(
        from var(--chev-r) 0,
        line  to 60% 0,
        line  to 100% 50%,
        line  to 60% 100%,
        line  to var(--chev-r) 100%,
        curve to 0 calc(100% - var(--chev-r)) with 0 100%,
        line  to 0 var(--chev-r),
        curve to var(--chev-r) 0 with 0 0,
        close
    );
    transform-origin: left center;
    transition: transform 0.25s ease;
}

/* Marker and text on one row, with a clean hanging indent */
.chevron .w-text-h,
.chevron li,
.chevron > p,
.chevron .wpb_wrapper > p {
    display: flex;
    align-items: flex-start;
    gap: 0.75em;         /* also leaves room for the hover stretch */
    list-style: none;    /* removes the native bullet on real <li> */
    transition: gap 0.25s ease;
}

.chevron.green .w-text-h::before,
.chevron.green li::before,
.chevron.green > p::before,
.chevron.green .wpb_wrapper > p::before {
    background: var(--color-green);
}

.chevron.brown .w-text-h::before,
.chevron.brown li::before,
.chevron.brown > p::before,
.chevron.brown .wpb_wrapper > p::before {
    background: var(--color-brown);
}

.chevron .w-text-h:hover::before,
.chevron li:hover::before,
.chevron > p:hover::before,
.chevron .wpb_wrapper > p:hover::before {
    transform: scaleX(1.8);
}

/* Widen the gap by the amount the chevron grows, so text and marker
   never overlap */
.chevron .w-text-h:hover,
.chevron li:hover,
.chevron > p:hover,
.chevron .wpb_wrapper > p:hover {
    gap: 1.4em;
}


/* =========================================================================
   06  CASE-STUDY HERO TAXONOMY
   Brown tag with a thin brown line running off to the right.
   ========================================================================= */

.w-hwrapper:has(> .cs-hero-tax) {
    display: flex !important;
    align-items: flex-end !important;   /* line meets the bottom of the tag */
    gap: 0 !important;
    width: auto !important;             /* stop hugging the text */
    padding: 0 !important;
    background: transparent !important; /* brown moves onto the tag itself */
    border-radius: 0 !important;
    margin-bottom: 20px;
}

.cs-hero-tax {
    flex: none;
}

.cs-hero-tax a {
    display: inline-block;
    background: var(--color-brown);
    color: var(--color-white) !important;
    padding: 15px;
    border-radius: 10px 10px 0 0;       /* rounded top only */
    font-size: 13px;
    line-height: 1.4;
    text-decoration: none;
    white-space: nowrap;
}

/* Fills the rest of the row. Was a fixed 1000px, which pushed the row
   wider than the viewport on small screens. */
.w-hwrapper:has(> .cs-hero-tax)::after {
    content: "";
    flex: 1 1 auto;
    min-width: 0;
    height: 1px;
    background: var(--color-brown);
}


/* =========================================================================
   07  FEATURED STONES GRID
   ========================================================================= */

/* Header row (badge + title) — positioning context for the rule, and sits
   above the image so it can slide over it on hover */
.featured-stones .w-hwrapper.head {
    position: relative;
    align-items: center;
    z-index: 3;
    transition: transform 0.25s ease;
}

.featured-stones .w-hwrapper.head::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

/* Italic title. Targeting the heading tag (not the wrapper) keeps the
   category badge upright. */
.featured-stones .w-hwrapper.head :is(h1, h2, h3, h4, h5, h6),
.featured-stones .w-post-elm.post_title {
    font-family: "Lora", serif;
    font-style: italic;
    color: var(--color-black);
}

.featured-stones .w-grid-item .title {
    font-size: 24px !important;
}

.featured-stones .title {
    transition: color 0.25s ease !important;
}

.featured-stones .button-2::before {
    flex: none;
    align-self: center;
    margin-left: 10px;
}

/* "More info" button overlaid on the stone image. The image is the last
   in-flow element in .w-grid-item-h, so bottom: 0 lands on its bottom-left. */
.featured-stones .w-grid-item-h {
    position: relative;
}

.featured-stones .w-grid-item-h .w-btn {
    position: absolute;
    left: 0;
    bottom: 0;
    z-index: 2;
}

/* Stone image — crop to landscape (square source, 1123×1116) */
.featured-stones .w-post-elm.post_image img {
    margin-top: 15px;
    aspect-ratio: 540 / 180;
    object-fit: cover;
    width: 100%;
    height: auto;
}

/* --- Hover: white wash over the image, title slides down --- */
.featured-stones .w-post-elm.post_image a {
    position: relative;
    display: block;
}

.featured-stones .w-post-elm.post_image a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;   /* keeps link + More info clickable */
    transition: opacity 0.35s ease;
}

/* Fires on item hover, but not while the button itself is hovered */
.featured-stones .w-grid-item:hover:not(:has(.w-btn:hover)) .w-hwrapper.head {
    transform: translateY(15px);
}

.featured-stones .w-grid-item:hover:not(:has(.w-btn:hover)) .w-post-elm.post_image a::after {
    opacity: 0.45;
}

/* Button effect fires whenever the whole item is hovered */
.featured-stones .w-grid-item:hover .button-2::before {
    transform: scaleX(1.8);
}

.featured-stones .w-grid-item:hover .button-2 span.w-btn-label {
    padding-left: 30px !important;
}

.featured-stones .w-grid-item:hover .title {
    color: var(--color-brown) !important;
}


/* =========================================================================
   08  PRODUCT COLOUR OPTIONS (term grid)
   ========================================================================= */

/* Header row: badge (left) + italic title, full-width rule underneath.
   align-items: flex-end sits the badge's bottom edge on the rule. */
.product-colour-options .w-hwrapper.head {
    position: relative;
    display: flex;
    align-items: flex-end;
    gap: 1rem;
    z-index: 3;
    transition: transform 0.25s ease;
}

.product-colour-options .w-hwrapper.head::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

/* Taxonomy badge — don't let it stretch or shrink */
.product-colour-options .w-hwrapper.head .usg_post_taxonomy_1 {
    flex: none;
}

/* Italic title, nudged up so it doesn't sit on the rule */
.product-colour-options .w-hwrapper.head :is(h1, h2, h3, h4, h5, h6),
.product-colour-options .w-post-elm.post_title {
    font-family: "Lora", serif;
    font-style: italic;
    color: var(--color-black);
    margin: 0 0 6px;
}

.product-colour-options .w-grid-item .title {
    font-size: 24px !important;
}

.product-colour-options .title {
    transition: color 0.25s ease !important;
}

/* Stone image — crop to landscape */
.product-colour-options .w-image.usg_image_1 .w-image-h img {
    margin-top: 15px;
    aspect-ratio: 540 / 270;
    object-fit: cover;
    width: 100%;
    height: auto;
    display: block;
}

/* --- Hover --- */
.product-colour-options .w-image.usg_image_1 .w-image-h {
    position: relative;
    display: block;
}

.product-colour-options .w-image.usg_image_1 .w-image-h::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.product-colour-options .w-grid-item:hover .w-hwrapper.head {
    transform: translateY(15px);
}

.product-colour-options .w-grid-item:hover .w-image.usg_image_1 .w-image-h::after {
    opacity: 0.45;
}

.product-colour-options .w-grid-item:hover .title {
    color: var(--color-brown) !important;
}


/* =========================================================================
   09  BROWSE BY SPACE — US TERM GRID (layout_2652, .browse-spaces)
   -------------------------------------------------------------------------
   Each card (.w-grid-item) holds:
     title row = .w-hwrapper with .w-text.title-rule + .space_icon
     image     = .w-post-elm.featured_image (a custom field, not Post Image)
   Columns are handled by the Grid element's own inline styles.
   ========================================================================= */

.browse-spaces .w-grid-item {
    position: relative;
}

/* The outer wrapper holds the title row and the image. Force it to stack —
   a horizontal wrapper would put them side by side on the front end. */
.browse-spaces .w-hwrapper:has(> .w-post-elm.featured_image),
.browse-spaces .w-vwrapper:has(> .w-post-elm.featured_image) {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0;             /* spacing comes from the image margin-top only */
}

/* Title row: the inner hwrapper holding the title text + icon */
.browse-spaces .w-hwrapper:has(> .w-text.title-rule) {
    position: relative;
    z-index: 2;
    align-items: center;
    padding-bottom: 0.5rem;
    transition: transform 0.35s ease;
}

.browse-spaces .w-hwrapper:has(> .w-text.title-rule)::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

/* The title carries .title-rule, which draws its own short line under just
   the word. Kill it so only the full-width row rule shows. */
.browse-spaces .w-text.title-rule::before {
    content: none;
}

/* The layout forces the colour brown with !important, so only the type and
   a colour transition are handled here. */
.browse-spaces .w-text.title-rule .w-text-value {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.2em;
    transition: color 0.25s ease;
}

/* Space icon — cap the image, or the 1300×1300 source renders full size */
.browse-spaces .w-post-elm.space_icon {
    flex: none;
    line-height: 0;
}

.browse-spaces .w-post-elm.space_icon img,
.browse-spaces .w-post-elm.space_icon svg {
    display: block;
    width: 1.4em;
    height: auto;
    max-width: none;
}

/* Hide the icon when none is set (US renders a .g-placeholder img) */
.browse-spaces .w-post-elm.space_icon img.g-placeholder {
    display: none;
}

/* Featured image — anchor for the white-wash overlay */
.browse-spaces .w-post-elm.featured_image {
    position: relative;
    overflow: hidden;
    aspect-ratio: 540 / 304;    /* keeps every card image uniform */
    margin-top: 15px;
}

.browse-spaces .w-post-elm.featured_image a {
    display: block;
    position: relative;
}

.browse-spaces .w-post-elm.featured_image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Overlay handles both the linked and non-linked cases */
.browse-spaces .w-post-elm.featured_image a::after,
.browse-spaces .w-post-elm.featured_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* --- Hover: fires from anywhere on the card --- */
.browse-spaces .w-grid-item:hover .w-hwrapper:has(> .w-text.title-rule) {
    transform: translateY(15px);   /* rule meets the image top edge */
}

.browse-spaces .w-grid-item:hover .w-text.title-rule .w-text-value {
    color: var(--color-brown);
}

.browse-spaces .w-grid-item:hover .w-post-elm.featured_image a::after,
.browse-spaces .w-grid-item:hover .w-post-elm.featured_image::after {
    opacity: 0.45;
}

/* Section gutters so the grid doesn't run to the screen edges */
.l-section:has(.browse-spaces) > .l-section-h {
    padding-left: 2.5rem;
    padding-right: 2.5rem;
}


/* =========================================================================
   10  MINI FAQ TABS (us_custom_05c065fb)
   Swap the chevron for the arrow SVGs; un-italicise the answer.
   ========================================================================= */

/* transform: none stops the theme rotating the control 180deg on open,
   which was flipping the up-arrow back to pointing down. */
.us_custom_05c065fb .w-tabs-section-control {
    position: relative;
    width: 36px;
    height: 36px;
    background: url('https://www.landfordstone.co.uk/wp-content/uploads/filter-arrow-down.svg') center / contain no-repeat;
    transform: none !important;
}

.us_custom_05c065fb .w-tabs-section-control::before,
.us_custom_05c065fb .w-tabs-section-control::after {
    display: none !important;   /* kill the theme's chevron glyph */
}

.us_custom_05c065fb .w-tabs-section-header[aria-expanded="true"] .w-tabs-section-control,
.us_custom_05c065fb .w-tabs-section.active .w-tabs-section-control {
    background-image: url('https://www.landfordstone.co.uk/wp-content/uploads/filter-arrow-up.svg');
    transform: none !important;
}

/* Lora is italic-only, so font-style: normal alone won't help — the family
   has to change too. */
.us_custom_05c065fb .w-tabs-section-content,
.us_custom_05c065fb .w-tabs-section-content *,
.us_custom_05c065fb .w-tabs-section-content-h {
    font-family: var(--font-family), "Work Sans", sans-serif !important;
    font-style: normal !important;
}


/* =========================================================================
   11  SPEC ROW
   ========================================================================= */

.spec-row .w-text {
    color: var(--color-brown);
    font-size: 12px;
    margin: 0 !important;
}

.spec-row .w-hwrapper.valign_top.align_none {
    display: flex;
    align-items: center;
}

.spec-row .w-btn-wrapper.align_none {
    margin-top: 8px;
    margin-left: 15px;
}


/* =========================================================================
   12  WHY US
   -------------------------------------------------------------------------
   A row of cards with a brown rule running through the gaps between them.

   The rule is drawn by each card's TITLE, not by the container: every title
   runs a line to the right, and the first card of each row runs one to the
   left for the outer edge. Cards have a white background and sit above the
   previous card's line, so only the gaps show. Because the line hangs off
   the title it always lands on the title's centre, however the text wraps —
   no magic top offset to keep in sync.

   A fixed icon height and a two-line title min-height keep every card's
   rows on the same baseline, so the rule is straight and the descriptions
   start level across the row.

   Cards park off-screen and slide home when .in-view is added by the JS.
   All widths are handled in this section: 4 up → 2 up → stacked.
   ========================================================================= */

.why-us {
    --why-gap: 70px;            /* the gaps are where the rule shows */
    --why-card: 300px;          /* max card width; tracks shrink below this */
    --why-pad-x: 24px;          /* keeps the rule off the text */
    --why-title-size: 1.55em;

    /* Vertical position of the rule, measured from the top of the card:
       icon box + its margin + half of a two-line title. Derived from the
       same values the cards use, so it stays in sync on its own. */
    --why-line-top: calc(72px + 0.5rem + 1.2 * var(--why-title-size));

    position: relative;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, var(--why-card)));
    justify-content: center;
    align-items: start;
    gap: 48px var(--why-gap);
    padding: 60px 40px;
    overflow: hidden;           /* clips the parked cards and the rule ends */
}

.why-us-card {
    position: relative;
    z-index: 2;                 /* paints over the previous card's rule */
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
    padding: 0 var(--why-pad-x);
    background: #fff;
    text-align: center;
    transition: transform 0.7s ease;
    will-change: transform;
}

/* Fixed icon box — one of the two things keeping the rows aligned */
.why-us-card .w-iconbox-icon {
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0.5rem;
}

/* Two-line min-height — the other. Titles run to two lines at most widths;
   this reserves the space so one-line titles don't ride up. */
.why-us-card .w-iconbox-title {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 2.6em;
    margin-bottom: 0.5rem;
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: var(--why-title-size) !important;
    line-height: 1.2;
    color: var(--color-brown);
    text-wrap: balance;         /* evens out two-line titles */
}

/* QA #8 / #58 — "manrope" is not loaded anywhere on this site, so this was
   falling back to the browser default: sans in Chrome (looked roughly
   right), serif in Safari (looked wrong). Icon-box descriptions are body
   copy, so inherit the body font and force upright — the site-wide italic
   selector list catches [class*="italic"] and friends, and Lora is an
   italic-only face. Applied to every .w-iconbox-text, not just Why Us, so
   Trade Partners and About are covered by the same rule. */
.w-iconbox-text,
.why-us-card .w-iconbox-text {
    font-family: var(--font-family), "Work Sans", sans-serif;
    font-style: normal;
    color: var(--color-black);
}

.why-us-card .w-iconbox-text {
    text-align: center;
}

/* --- The connecting rule ---
   Anchored to the CARD at a fixed offset, not to the title's own centre.
   A title that wraps to three lines would otherwise drop its own segment
   below the others and you'd see two staggered lines instead of one.

   50vw is arbitrary; .why-us clips whatever runs past the section edge.
   Lines only ever run RIGHT (plus one leftward line per row, for the outer
   edge), so they pass under later siblings, which cover them. A leftward
   line on a middle card would paint over its earlier neighbour instead,
   since equal z-index resolves on DOM order.

   left/right: 100% starts the line at the card's outer edge, so the card's
   own horizontal padding becomes the clearance between text and rule. */
.why-us-card::after,
.why-us-card:nth-child(4n + 1)::before {
    content: "";
    position: absolute;
    top: var(--why-line-top);
    width: 50vw;
    height: 1px;
    background: var(--color-brown);
}

.why-us-card::after {
    left: 100%;
}

.why-us-card:nth-child(4n + 1)::before {
    right: 100%;
}

/* --- Slide-in: left pair from the left, right pair from the right --- */
.why-us-card:nth-child(1),
.why-us-card:nth-child(2) {
    transform: translateX(-100vw);
}

.why-us-card:nth-child(3),
.why-us-card:nth-child(4) {
    transform: translateX(100vw);
}

.why-us.in-view .why-us-card {
    transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
    .why-us-card {
        transition: none;
        transform: none !important;
    }
}


/* --- 12a  Laptops: tighter gap and title so four still fit ------------- */

@media (max-width: 1320px) {

    .why-us {
        --why-gap: 40px;
        --why-title-size: 1.35em;
        padding: 48px 24px;
    }
}


/* --- 12b  Two up ------------------------------------------------------- */

@media (max-width: 1350px) {

    .why-us {
        --why-gap: 48px;
        --why-card: 320px;
        --why-title-size: 1.4em;
        grid-template-columns: repeat(2, minmax(0, var(--why-card)));
        gap: 40px var(--why-gap);
    }

    /* Now the first card of each PAIR draws the left-hand rule */
    .why-us-card:nth-child(2n + 1)::before {
        content: "";
        position: absolute;
        top: var(--why-line-top);
        right: 100%;
        width: 50vw;
        height: 1px;
        background: var(--color-brown);
    }

    /* No parking once the cards wrap — the pairs would fly in from the
       wrong sides */
    .why-us-card {
        transform: none !important;
    }
}


/* --- 12c  Stacked ------------------------------------------------------ */

@media (max-width: 800px) {

    .why-us {
        --why-card: 340px;
        --why-title-size: 1.3em;
        grid-template-columns: minmax(0, var(--why-card));
        gap: 32px;
        padding: 40px 20px;
    }

    /* Nothing to connect once they're stacked. The nth-child selectors are
       repeated so this matches the specificity of the rules that set them —
       a plain .why-us-card::before would lose to .why-us-card:nth-child(). */
    .why-us-card::before,
    .why-us-card::after,
    .why-us-card:nth-child(2n + 1)::before,
    .why-us-card:nth-child(4n + 1)::before {
        content: none;
    }

    /* Let short titles and icons close up */
    .why-us-card .w-iconbox-icon {
        height: auto;
    }

    .why-us-card .w-iconbox-title {
        min-height: 0;
    }
}


/* =========================================================================
   13  TESTIMONIAL CAROUSEL
   ========================================================================= */

.us_post_carousel {
    position: relative;
}

.us_post_carousel::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 1px;
    background: var(--color-brown);
    transform: translateY(-50%);
    z-index: 0;
}

.us_post_carousel .owl-stage-outer {
    position: relative;
    z-index: 1;
}

/* --- Arrows ---
   Positioned by JS, not by CSS. Every CSS-only approach here has to assume
   how wide a card is — a pixel offset or a percentage — and the carousel is
   full-bleed with a card count that changes, so any assumption is wrong at
   some width. The companion script measures the centre card and writes
   --tc-left / --tc-right, so the arrows sit either side of it at ANY width.

   The fallback values below are only used for the split second before the
   script runs, or if it fails to load. */

.us_post_carousel:not(.partner-carousel) .owl-carousel {
    --tc-left: 25%;
    --tc-right: 25%;
    position: relative;
}

.us_post_carousel:not(.partner-carousel) .owl-nav {
    position: absolute;
    inset: 0;
    pointer-events: none;   /* the buttons re-enable it themselves */
    z-index: 2;
}

.us_post_carousel:not(.partner-carousel) .owl-nav .owl-prev,
.us_post_carousel:not(.partner-carousel) .owl-nav .owl-next {
    position: absolute !important;
    top: 50% !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    pointer-events: auto;
    font-size: 0 !important;
    line-height: 0 !important;
    background-color: transparent !important;
    border: none !important;
    background-repeat: no-repeat;
    background-size: contain !important;
}

.us_post_carousel:not(.partner-carousel) .owl-nav .owl-prev {
    left: var(--tc-left) !important;
    right: auto !important;
}

.us_post_carousel:not(.partner-carousel) .owl-nav .owl-next {
    right: var(--tc-right) !important;
    left: auto !important;
}

.us_post_carousel .owl-nav .owl-prev > *,
.us_post_carousel .owl-nav .owl-next > * {
    display: none;
}

/* QA #41 — the hover used to swap background-image on the button itself.
   background-image can't be transitioned, so the two images hard-cut and the
   second one flashes while it decodes. Same treatment as the gallery arrows
   in section 20: both states are pseudo-elements, and only opacity moves. */
.us_post_carousel .owl-nav .owl-prev,
.us_post_carousel .owl-nav .owl-next {
    position: relative;
    background-image: none !important;
    overflow: hidden;
}

.us_post_carousel .owl-nav .owl-prev::before,
.us_post_carousel .owl-nav .owl-prev::after,
.us_post_carousel .owl-nav .owl-next::before,
.us_post_carousel .owl-nav .owl-next::after {
    /* applies to both carousels — only the positioning above is scoped */
    content: "";
    position: absolute;
    inset: 0;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    transition: opacity 0.3s ease;
}

.us_post_carousel .owl-nav .owl-prev::before,
.us_post_carousel .owl-nav .owl-next::before {
    background-image: var(--arrow-icon);
    opacity: 1;
}

.us_post_carousel .owl-nav .owl-prev::after,
.us_post_carousel .owl-nav .owl-next::after {
    background-image: var(--arrow-icon-hover);
    opacity: 0;
}

/* Right-hand arrow is the same image turned round. The rotation goes on the
   PSEUDO-ELEMENTS, not the button: the button's own transform is
   translateY(-50%) !important, and rotating it here would overwrite the
   vertical centring. */
.us_post_carousel .owl-nav .owl-next::before,
.us_post_carousel .owl-nav .owl-next::after {
    transform: rotate(180deg);
}

.no-touch .us_post_carousel .owl-nav .owl-prev:hover::after,
.no-touch .us_post_carousel .owl-nav .owl-next:hover::after {
    opacity: 1;
}

/* Rotating card colours */
.us_post_carousel .owl-item:nth-child(3n+1) .w-vwrapper {
    background-color: var(--color-brown) !important;
}

.us_post_carousel .owl-item:nth-child(3n+2) .w-vwrapper {
    background-color: var(--color-dark-khaki) !important;
}

.us_post_carousel .owl-item:nth-child(3n) .w-vwrapper {
    background-color: var(--color-green) !important;
}


/* =========================================================================
   14  POST GRID — add class "post-layout" to the Post List element
   ========================================================================= */

/* Equal-height cards, everything stacked, button pinned to the bottom */
.post-layout .w-grid-item {
    height: 100%;
}

.post-layout .w-grid-item-h {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    height: 100%;
}

/* Title row: green badge + italic title + rule. align-items: stretch makes
   the badge box grow down to meet the rule. */
.post-layout .title-rule {
    align-items: stretch;
    z-index: 3;
    transition: transform 0.25s ease;
}

.post-layout .title-rule > :first-child {
    flex: 0 0 auto;     /* the green category box, don't shrink */
}

.post-layout .title-rule .post_title {
    margin: 0;
}

/* Featured image: one consistent aspect ratio */
.post-layout .w-post-elm.post_image a,
.post-layout .w-post-elm.post_image img {
    display: block;
    width: 100%;
}

.post-layout .w-post-elm.post_image img {
    aspect-ratio: 350 / 160;    /* change to 3/2 or 2/1 to taste */
    height: auto;
    object-fit: cover;
}

/* Read more pinned to the bottom of every card */
.post-layout .w-btn {
    margin-top: auto;
}

/* --- Hover --- */
/* QA #4 — in Safari the title rule was painting UNDER the image. The title
   row has z-index: 3, but the image had no z-index of its own, so the two
   were never compared directly and Safari fell back to paint order. Giving
   the image an explicit lower z-index puts them in the same stacking
   contest, which is what Chrome was doing implicitly. */
.post-layout .w-post-elm.post_image {
    position: relative;
    z-index: 0;
}

.post-layout .w-post-elm.post_image a {
    position: relative;
    display: block;
}

.post-layout .w-post-elm.post_image a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.post-layout .w-grid-item:hover:not(:has(.w-btn:hover)) .title-rule {
    transform: translateY(23px);
}

.post-layout .w-grid-item:hover:not(:has(.w-btn:hover)) .w-post-elm.post_image a::after {
    opacity: 0.45;
}

.post-layout .w-grid-item:hover .button-2::before {
    transform: scaleX(1.8);
}

.post-layout .w-grid-item:hover .button-2 span.w-btn-label {
    padding-left: 30px !important;
}


/* =========================================================================
   15  PARTNER CAROUSEL — Impreza / Owl
   ========================================================================= */

/* Remove the horizontal line at its likely sources */
.partner-carousel::before,
.partner-carousel::after,
.partner-carousel .w-grid-list::before,
.partner-carousel .w-grid-list::after,
.partner-carousel .owl-stage-outer::before,
.partner-carousel .owl-stage-outer::after {
    content: none !important;
    display: none !important;
}

/* Every cell identical: white, logo dead-centre */
.partner-carousel .owl-item {
    position: relative;
    padding: 0 !important;
    transition: opacity .35s ease;
}

.partner-carousel .owl-item .w-grid-item,
.partner-carousel .owl-item .w-grid-item-h,
.partner-carousel .owl-item .w-post-elm.post_image {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff;
}

.partner-carousel .owl-item img {
    width: auto !important;
    height: auto !important;
    object-fit: contain;
}

/* Vertical divider on each cell boundary */
.partner-carousel .owl-item::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    width: 1px;
    height: 90px;
    background: #d8d4ce;
    z-index: 2;             /* paints above the next cell */
}

/* Fade the partial logos at the edges */
.partner-carousel .owl-item:not(.active) {
    opacity: .35;
}


/* =========================================================================
   16  HEADER AND MEGA MENU
   ========================================================================= */
header a.w-btn {
    padding-top: 14px;
    padding-bottom: 14px;
}
header a.w-btn {
    transition: padding 0.4s;
}

/* Mega-menu column headings: italic serif + thin rule */
.ls-mega-heading,
.ls-mega-heading h1,
.ls-mega-heading h2,
.ls-mega-heading h3 {
    white-space: nowrap;
    font-family: "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.3;
    color: #2E2A26;
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid #D8C7B5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;   /* title left, icon right */
}

.ls-mega-heading a {
    color: inherit;
    text-decoration: none;
    text-wrap: wrap;
    text-align: left;
    display: block;
}

/* Link lists (Browse by space + Support) */
.ls-mega-links a {
    display: block;
    font-size: 15px;
    color: #2E2A26;
    padding: 6px 0;
    text-decoration: none;
    transition: color .15s ease;
}

.ls-mega-links a:hover {
    color: #9A7B53;
}

/* Stone Collection swatches — uniform landscape rectangles */
.ls-mega-swatch,
.ls-mega-swatch .w-image-h {
    width: 100%;
}

.ls-mega-swatch img {
    width: 100%;
    height: auto;
    display: block;
}

.ls-mega-swatch .w-image-h img {
    width: 100%;
    aspect-ratio: 3 / 2;
    object-fit: cover;      /* crops the square source into a rectangle */
    display: block;
}

/* Active / current top-level item: bronze + underline */
.l-header .menu-item.current-menu-item > a,
.l-header .menu-item.current-menu-parent > a,
.l-header .menu-item.current-menu-ancestor > a {
    color: #9A7B53;
}

.l-header .menu-item.current-menu-item > a::after,
.l-header .menu-item.current-menu-parent > a::after {
    content: "";
    display: block;
    height: 1px;
    background: #9A7B53;
    margin-top: 4px;
}

/* "Request a quote" pill — add class ls-quote-btn in Appearance → Menus */
.ls-quote-btn > a {
    background: #F1E7DD !important;
    border: 1px solid #E2D2C2;
    border-radius: 999px;
    padding: 12px 26px !important;
    color: #2E2A26 !important;
}

.ls-quote-btn > a:hover {
    background: #EBDDCF !important;
}


/* =========================================================================
   17  HOVER-REVEAL UTILITY
   -------------------------------------------------------------------------
   Put .hover-reveal on the hover boundary (.w-grid-item, .w-vwrapper…).
   Inside it, tag:
     the title / underline wrapper           → .hr-title
     the image wrapper (the <a> or .w-image-h) → .hr-image
   Any .button-2 buttons animate automatically. Tune per instance by
   overriding the variables.
   ========================================================================= */

.hover-reveal {
    --hr-title-shift: 15px;   /* how far the title + rule slides down */
    --hr-wash: 0.45;          /* strength of the white fade */
    --hr-title-time: 0.25s;
    --hr-wash-time: 0.35s;
}

.hover-reveal .hr-title {
    position: relative;
    z-index: 3;
    transition: transform var(--hr-title-time) ease;
}

.hover-reveal .hr-image {
    position: relative;
    display: block;
}

.hover-reveal .hr-image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--hr-wash-time) ease;
}

.hover-reveal:hover:not(:has(.w-btn:hover)) .hr-title {
    transform: translateY(var(--hr-title-shift));
}

.hover-reveal:hover:not(:has(.w-btn:hover)) .hr-image::after {
    opacity: var(--hr-wash);
}

.hover-reveal:hover .button-2::before {
    transform: scaleX(1.8);
}

.hover-reveal:hover .button-2 span.w-btn-label {
    padding-left: 30px !important;
}


/* =========================================================================
   18  VERTICAL STONE-TYPE GRID — Stone Collection cards (layout_1875)
   -------------------------------------------------------------------------
   The image overlay sits ON TOP of the description and button: tall at rest
   (covering them), cropping to a short strip on hover (uncovering them).
   Description and button stay in normal flow, so they never move.
   ========================================================================= */

.vertical-stone-type-grid {
    --vst-img-rest:  200 / 380;   /* tall at rest — raise if text peeks out */
    --vst-img-hover: 200 / 110;   /* short strip on hover */
    --vst-reveal: 0.4s;
    --vst-gap: 16px;
    --vst-title-shift: 12px;      /* how far the title drops on hover */
    --vst-wash: 0.2;              /* white wash strength */
}

.vertical-stone-type-grid .w-grid-item,
.vertical-stone-type-grid .w-grid-item-h {
    height: 100%;
}

/* The actual flex column is .w-vwrapper, not .w-grid-item-h */
.vertical-stone-type-grid .w-vwrapper {
    position: relative;
    gap: 0;                 /* override --vwrapper-gap; space with margins */
    height: 100%;
    overflow: hidden;       /* trims the tall overlay at the card bottom */
}

.vertical-stone-type-grid .w-post-elm.post_title {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.2em !important;   /* beat any layout-forced size */
    color: var(--color-brown);
    margin: 0 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-brown);
    position: relative;
    z-index: 3;
    transition: transform var(--vst-reveal) ease;
}

.vertical-stone-type-grid .w-post-elm.post_title a {
    color: inherit;
    text-decoration: none;
}

/* Image = the custom-field element; reserves only the SHORT height in flow */
.vertical-stone-type-grid .w-post-elm.featured_image {
    position: relative;
    width: 100%;
    aspect-ratio: var(--vst-img-hover);
    z-index: 2;             /* image paints above desc + button */
}

/* The <img> itself is the absolute overlay (no <a> here) */
.vertical-stone-type-grid .w-post-elm.featured_image img {
    position: absolute;
    inset: 0 0 auto 0;      /* top-anchored, full width */
    width: 100%;
    height: auto;
    aspect-ratio: var(--vst-img-rest);   /* tall at rest, overflows down */
    object-fit: cover;
    pointer-events: none;   /* never intercept clicks meant for the button */
    transition: aspect-ratio var(--vst-reveal) ease;
}

/* White wash over the image */
.vertical-stone-type-grid .w-post-elm.featured_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1;             /* above the <img>, below the title */
    transition: opacity var(--vst-reveal) ease;
}

/* Description + button: normal flow, fixed, sitting behind the image */
.vertical-stone-type-grid .w-post-elm.post_content,
.vertical-stone-type-grid .w-btn {
    position: relative;
    z-index: 1;
    margin-top: var(--vst-gap);
    opacity: 0;
    transition: opacity var(--vst-reveal) ease;
}

/* --- Hover --- */
.vertical-stone-type-grid .w-grid-item:hover .w-post-elm.featured_image img,
.vertical-stone-type-grid .w-grid-item:focus-within .w-post-elm.featured_image img {
    aspect-ratio: var(--vst-img-hover);   /* shrinks → uncovers the text */
}

.vertical-stone-type-grid .w-grid-item:hover .w-post-elm.post_content,
.vertical-stone-type-grid .w-grid-item:hover .w-btn,
.vertical-stone-type-grid .w-grid-item:focus-within .w-post-elm.post_content,
.vertical-stone-type-grid .w-grid-item:focus-within .w-btn {
    opacity: 1;
}

.vertical-stone-type-grid .w-grid-item:hover .w-post-elm.post_title,
.vertical-stone-type-grid .w-grid-item:focus-within .w-post-elm.post_title {
    transform: translateY(var(--vst-title-shift));
}

.vertical-stone-type-grid .w-grid-item:hover .w-post-elm.featured_image::after,
.vertical-stone-type-grid .w-grid-item:focus-within .w-post-elm.featured_image::after {
    opacity: var(--vst-wash);
}


/* =========================================================================
   19  STONE TYPE TEMPLATE
   ========================================================================= */

.ls-stone-type-hero {
    align-items: center;
}

.ls-stone-type-hero .g-cols {
    align-items: center;
}

.ls-stone-type-hero h1 {
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 4rem);
    margin: 0.15em 0;
}

.ls-stone-type-hero .post_custom_field {
    text-transform: uppercase;
    letter-spacing: 0.13em;
    font-size: 1.5rem;
    line-height: 1.6;
    color: var(--color-brown);
}

.ls-stone-type-hero .bg-arrow-shape img {
    max-height: 450px;
    object-fit: cover;
}

/* --- Key benefits repeater --- */
.ls-key-benefits .g-cols {
    align-items: start;
}

.ls-key-benefits-list .repeater {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem 3rem;
}

.ls-key-benefits-list .repeater-field.key_benefits_repeater_title,
.ls-key-benefits-list .repeater-field.title {
    color: var(--color-brown);
    padding-bottom: 0.75rem;
    margin-bottom: 0.75rem;
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
}

.ls-key-benefits-list .repeater-field.key_benefits_repeater_description,
.ls-key-benefits-list .repeater-field.description {
    font-size: 0.9rem;
    line-height: 1.6;
    position: relative;
    padding-bottom: 1.5rem;
}

.ls-key-benefits-list .repeater-field.key_benefits_repeater_description::after,
.ls-key-benefits-list .repeater-field.description::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

.ls-key-benefits-item__title {
    color: var(--color-brown);
    font-size: clamp(1.6rem, 3vw, 38px);
    line-height: 1.1;
}

/* --- Space title rule (title left, icon right) --- */
.space-title-rule {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-bottom: 0.5rem;
}

.space-title-rule::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background-color: var(--color-brown);
}

.space-title-rule .post_title {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    color: var(--color-black);
    font-size: 1.2em;
    margin: 0;
}

.space-title-rule .space_icon img {
    display: block;
    width: 1.4em;
    height: auto;
    max-width: none;
    flex: none;
}


/* =========================================================================
   20  GALLERY SLIDER ARROWS (RoyalSlider)

   Appearance only. No positioning, sizing, spacing or overflow — those are
   handled manually elsewhere.

   All arrow artwork comes from --arrow-icon / --arrow-icon-hover in section
   01. Both files point LEFT; anything pointing right is the same image with
   transform: rotate(180deg).
   ========================================================================= */

/* Hide RoyalSlider's own arrows inside our gallery */
.ls-gallery .rsArrow {
    display: none !important;
}

/* Our arrow row */
.ls-gallery-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    pointer-events: none;    /* the row ignores clicks; buttons re-enable */
}

/* Each button */
.ls-gallery-arrow {
    pointer-events: auto;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    background: transparent;     /* the icon comes from the PNG below */
    cursor: pointer;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: opacity 0.3s ease;
}

.ls-gallery-arrow:hover {
    opacity: 1;
}

/* Default (resting) icons */
.ls-gallery-prev,
.ls-gallery-next {
    background-image: var(--arrow-icon);
    position: relative;
}

.ls-gallery-next {
    transform: rotate(180deg);
}

/* Hover icons */
.ls-gallery-prev::after,
.ls-gallery-next::after {
    content: '';
    background-image: var(--arrow-icon-hover);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.ls-gallery-prev:hover::after,
.ls-gallery-next:hover::after {
    opacity: 1;
}

/* Disabled state (RoyalSlider adds rsArrowDisabled to its own arrows;
   we mirror that onto ours via the script below) */
.ls-gallery-arrow.is-disabled {
    opacity: 0.3;
    cursor: default;
}


/* --- Built-in RoyalSlider arrows: hover cross-fade ----------------------
   Deliberately NOT scoped to .ls-gallery so it still covers other sliders.

   The absolute ::before/::after are the cross-fade mechanism, not layout:
   the two images stack on the button so opacity can trade them. Leave the
   `position: absolute; inset: 0` alone unless you rewrite the technique.

   The right-hand arrow rotates the PSEUDO-ELEMENTS rather than the button,
   so it can't clash with any transform RoyalSlider puts on .rsArrow. */

.rsArrow .rsArrowIcn {
    display: none !important;
}

.rsArrow {
    cursor: pointer;
}

.rsArrow::before,
.rsArrow::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: opacity 0.3s ease;
}

.rsArrow::before {
    background-image: var(--arrow-icon);
    opacity: 1;
}

.rsArrow::after {
    background-image: var(--arrow-icon-hover);
    opacity: 0;
}

.rsArrow.rsArrowRight::before,
.rsArrow.rsArrowRight::after {
    transform: rotate(180deg);
}

.rsArrow:hover::before {
    opacity: 0;
}

.rsArrow:hover::after {
    opacity: 1;
}


/* --- Inside .ls-gallery, the built-in arrows are not used ----------------
   The gallery ships its own .ls-gallery-nav pair. Both RoyalSlider sets
   (main prev/next and the thumbnail-strip scrollers) are switched off so
   they don't render as stray circles over the thumbnails. */

.ls-gallery .rsArrow,
.ls-gallery .rsThumbsArrow {
    display: none !important;
}


/* --- Thumbnails ---------------------------------------------------------- */

.rsThumb.rsNavSelected::after {
    border: none !important;   /* drop RoyalSlider's selected outline */
}

.ls-gallery .rsThumb {
    cursor: pointer;
    overflow: hidden;          /* crops the hover zoom rather than spilling */
}

.ls-gallery .rsThumb img.rsTmb {
    transition: transform 0.35s ease, opacity 0.25s ease;
}

/* Unselected thumbs sit slightly back so the hovered one leads */
.ls-gallery .rsThumb:not(.rsNavSelected) img.rsTmb {
    opacity: 0.78;
}

.no-touch .ls-gallery .rsThumb:hover img.rsTmb {
    transform: scale(1.06);
    opacity: 1;
}

.rs-custom-arrows {
    transform: translate(-75px, -100px) !important;
    width: calc(100% + 150px);
    max-width: 1174px;
}


/* =========================================================================
   21  FEATURED WORK
   ========================================================================= */

.featured-work-container {
    --fw-cream: #ECE6DD;
    --fw-ink: #23201d;
    --fw-taupe: #8c7a66;
    --fw-teal: #2c5c50;
    --fw-brown: #9c6b43;
    --fw-radius: 14px;
    background: var(--fw-cream);
    color: var(--fw-ink);
    padding: 64px 5vw;
}

.fw-eyebrow {
    font-size: max(1.6rem, 1.6vw);
    text-transform: uppercase;
    font-weight: 300;
    color: var(--fw-taupe);
    margin: 0 0 18px;
}

/* Heading: "Let us" (ink) / "inspire you." (teal) — forced over the theme */
body .fw-title .fw-title-inner {
    margin: 0 0 30px;
    line-height: 1;
}

body .fw-title .fw-title-inner span {
    display: block;
}

body .fw-title .fw-title-inner .serif {
    display: block;
    font-family: "Lora", serif;
    font-style: italic;
    font-weight: 500;
    font-size: clamp(48px, 5.5vw, 82px);
    color: var(--color-black) !important;
}

body .fw-title .fw-title-inner .teal {
    display: block;
    font-weight: 200;
    font-size: clamp(46px, 5.2vw, 76px);
    letter-spacing: -.01em;
    margin-top: 2px;
    color: var(--color-green) !important;
}

.fw-desc {
    font-family: "Lora", serif;
    font-style: italic;
    font-size: clamp(17px, 1.4vw, 21px);
    line-height: 1.45;
    max-width: 340px;
    margin: 0 0 30px;
}

/* Meta rows — label, chevron, value, underline */
.fw-field {
    --fw-label-w: 70px;
    --fw-chev-x: 74px;
    --fw-value-x: 92px;
    position: relative;
    padding: 13px 0 13px var(--fw-value-x);
    font-weight: 600;
    font-size: 15px;
    color: var(--fw-ink);
    max-width: 400px;
    border-bottom: 1px solid var(--fw-brown);
}

.fw-field::before {
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: var(--fw-label-w);
    font-size: 11px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-brown);
    font-weight: 600;
}

.fw-material::before { content: "MATERIAL:"; }
.fw-stone::before    { content: "STONE:"; }
.fw-space::before    { content: "SPACE:"; }

/* The chevron sits between the label (≤70px) and the value (92px) */
.fw-field::after {
    content: "";
    position: absolute;
    left: var(--fw-chev-x);
    top: 50%;
    width: .8em;
    height: 1.05em;
    transform: translateY(-50%);
    background: var(--fw-teal);
    clip-path: shape(
        from 2px 0,
        line  to 60% 0,
        line  to 100% 50%,
        line  to 60% 100%,
        line  to 2px 100%,
        curve to 0 calc(100% - 2px) with 0 100%,
        line  to 0 2px,
        curve to 2px 0 with 0 0,
        close
    );
}

/* --- Gallery carousel --- */
.fw-carousel {
    position: relative;
    width: 100%;
    min-width: min(620px, 100%);
    overflow: visible;      /* nav buttons must stay visible */
}

.fw-viewport {
    position: relative;
    width: 100%;
    /* Stationary box — clip the left edge only; the right bleeds off-page,
       top and bottom keep the shadow */
    clip-path: inset(-60px -100vw -60px 0);
}

.fw-track {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 2;
    min-height: 440px;
    display: flex;
    gap: 24px;
    transition: transform .8s ease;
    will-change: transform;
}

.fw-slide {
    flex: 0 0 100%;
    background-size: cover;
    background-position: center;
    border-radius: var(--fw-radius);
    box-shadow: 0 24px 50px -28px rgba(0, 0, 0, .4);
    transform: scale(.8);
    transform-origin: left center;   /* shrink left, vertically centred */
    transition: transform .8s ease;
}

.fw-slide.is-active {
    transform: scale(1);
}

/* Nav buttons — the images ARE the buttons, cross-faded on hover.

   These used to read var(--btn-before) / var(--btn-after), set per element
   in the HTML. If the element still declares those inline they'll win over
   this, so delete them from the markup. */
.fw-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 48px;
    height: 48px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    overflow: hidden;
}

.fw-nav::before,
.fw-nav::after {
    content: "";
    position: absolute;
    inset: 0;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    transition: opacity .3s ease;
}

.fw-nav::before {
    background-image: var(--arrow-icon);
    opacity: 1;
}

.fw-nav::after {
    background-image: var(--arrow-icon-hover);
    opacity: 0;
}

/* Rotate the pseudo-elements, not the button — .fw-nav's own transform is
   the translateY(-50%) that centres it */
.fw-next::before,
.fw-next::after {
    transform: rotate(180deg);
}

.fw-nav:hover::before { opacity: 0; }
.fw-nav:hover::after  { opacity: 1; }

.fw-prev { left: -20px; }
.fw-next { right: -20px; }

.fw-dots {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 16px;
}

.fw-dot {
    width: 12px;
    height: 12px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid var(--color-brown);
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.fw-dot.is-active {
    background: var(--color-green);
}

.fw-dot:hover {
    background: var(--color-green);
    opacity: 0.7;
}

/* "See project" button — base bottom margin at all widths */
.layout_1843 .usg_btn_1.fw-btn,
.featured-work-container .fw-btn {
    margin-bottom: 2rem;
}

/* The carousel deliberately bleeds off the right-hand edge. Clip it at the
   SECTION so that bleed can't widen the document and add horizontal scroll.

   Two deliberate choices here:

   `clip` not `hidden` — overflow: hidden forces the other axis to `auto`,
   which makes a scroll container and breaks position: sticky on anything
   inside it. The theme uses sticky headers and sticky columns.

   On the SECTION, never on html/body — clipping at the document root breaks
   Safari's lazy-image loading. Images either never load or trickle in well
   after they should. If a horizontal scrollbar turns up elsewhere, find the
   element that's actually overhanging and clip at ITS section instead of
   reaching for the root. */
.l-section:has(.featured-work-container) {
    overflow-x: clip;
}

/* Featured Work Grid */
.featured-work-grid-container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 1.5rem;
}

.featured-work-grid-container > .w-html {
    grid-column: span 2;
    grid-row: span 2;
}

@media (max-width: 900px) {

    .featured-work-grid-container {
        grid-template-columns: 1fr;
    }

    .featured-work-grid-container > .w-html {
        margin-bottom: 1.5rem;
    }
}


/* =========================================================================
   22  CASE-STUDY HERO IMAGE AND TECHNICAL OPTIONS
   ========================================================================= */

.cs-hero-image {
    clip-path: shape(
        from 0% 0%,
        line  to 67% 0%,
        curve to 78% 9%   with 73% 0%,
        line  to 94% 39%,
        curve to 94% 61%  with 100% 50%,
        line  to 78% 91%,
        curve to 67% 100% with 73% 100%,
        line  to 0% 100%,
        close
    );
}

.technical_options_heading {
    color: var(--color-brown);
    letter-spacing: 1px;
    font-size: clamp(1.6rem, 3.2vw, 40px);
    line-height: 1.3;
    margin-bottom: 30px;
}

.to-btn-wrapper {
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
}

.to-btn-wrapper .green {
    margin-top: 23px !important;
}

.to-categories .w-post-elm-before {
    color: var(--color-brown);
    margin-right: 30px;
    letter-spacing: 0.8px;
    width: 100px !important;
    display: inline-block;
}

.to-categories {
    font-size: 14px;
}


/* =========================================================================
   23  MAKE AN ENQUIRY — link list (row class: enquiry-links)
   On hover the label turns brown, the icon slides right, and the rule's
   right end follows. The rule is position: absolute left/right 0, so only
   its `right` inset is nudged — never scaled.
   ========================================================================= */

.enquiry-links .w-iconbox.title-rule {
    max-width: calc(100% - 200px);
}

.enquiry-links .w-iconbox-title {
    color: var(--color-black);
    transition: color 0.25s ease;
}

.enquiry-links .w-iconbox.title-rule:hover .w-iconbox-title {
    color: var(--color-brown);
}

.enquiry-links .w-iconbox.title-rule::before {
    transition: right 0.35s ease;
}

.no-touch .enquiry-links .w-iconbox.title-rule:hover::before {
    right: -100px;
}

.enquiry-links .w-iconbox-icon {
    transition: transform 0.35s ease;
}

.no-touch .enquiry-links .w-iconbox.title-rule:hover .w-iconbox-icon {
    transform: translateX(100px);
}


/* =========================================================================
   24  INSPIRATION GRID
   ========================================================================= */

.inspiration-grid .w-post-elm.post_image.usg_post_image_1 {
    margin-left: -1.5rem;
    width: calc(100% + 3rem);
    transition: all 0.4s;
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

.inspiration-grid .w-post-elm.post_image.usg_post_image_1 img {
    max-width: calc(100% - 3rem);
    transition: all 0.4s;
    height: 100% !important;
    object-fit: cover;
    margin: 0 auto;
}

.inspiration-grid .w-post-elm.post_image.usg_post_image_1 a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

/* --- Hover --- */
.inspiration-grid .w-grid-item:hover .w-post-elm.post_image.usg_post_image_1 {
    clip-path: polygon(0 3.5rem, 100% 3.5rem, 100% 100%, 0% 100%);
}

.inspiration-grid .w-grid-item:hover .w-post-elm.post_image.usg_post_image_1 img {
    max-width: 100%;
}

.inspiration-grid .w-grid-item:hover .w-post-elm.post_image.usg_post_image_1 a::after {
    opacity: 0.45;
}

.inspiration-grid .w-grid-item:hover .button-2::before {
    transform: scaleX(1.8);
}

.inspiration-grid .w-grid-item:hover .button-2 span.w-btn-label {
    padding-left: 30px !important;
}


/* =========================================================================
   25  AFTERCARE PDF LIST — .download-wrapper
   -------------------------------------------------------------------------
   Rest:  Lora-italic label (black), muted brown icon, brown rule.
   Hover: label crossfades to brown "Download PDF"; icon and rule slide and
          extend to the right together.
   ========================================================================= */

/* Tweak this one value to make the block wider or narrower */
.download-wrapper {
    max-width: 500px;
}

/* Row: label hard-left, icon hard-right. The rule lives on ::before so its
   length can animate — a border-bottom can't extend. */
.download-wrapper .w-iconbox {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0 0 0.9rem;
    cursor: pointer;
}

.download-wrapper .w-iconbox::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-brown);
    transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-wrapper .w-iconbox:hover::before {
    right: -100px;
}

.download-wrapper .w-iconbox-meta {
    flex: 1 1 auto;
    margin: 0;
    text-align: left;
}

/* Label — crossfades OUT on hover */
.download-wrapper .w-iconbox-title {
    position: relative;
    margin: 0;
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.3;
    letter-spacing: 0.01em;
    text-align: left;
    color: var(--color-black);
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-wrapper .w-iconbox:hover .w-iconbox-title {
    color: transparent;
}

/* "Download PDF" — always present on top, transparent until hover, then
   crossfades in as brown (smooth swap, no hard cut) */
.download-wrapper .w-iconbox-title::after {
    content: "Download PDF";
    position: absolute;
    left: 0;
    top: 0;
    white-space: nowrap;
    color: transparent;
    transition: color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.download-wrapper .w-iconbox:hover .w-iconbox-title::after {
    color: var(--color-brown);
}

/* Icon — slides right in step with the extending rule */
.download-wrapper .w-iconbox-icon {
    flex: none;
    line-height: 0;
    transition: all 0.3s ease-in-out;
}

.download-wrapper .w-iconbox-icon svg {
    display: block;
    width: 26px;
    height: auto;
}

.download-wrapper .w-iconbox:hover .w-iconbox-icon {
    opacity: 1;
    transform: translateX(100px);
}


/* =========================================================================
   26  RESPONSIVE OVERRIDES
   -------------------------------------------------------------------------
   Breakpoints mirror the Impreza theme:
       1320px  laptops
        900px  tablets
        600px  mobiles
   Filter rules are NOT here — they live in section 31 with their own
   media queries, so all filter behaviour is in one place.
   ========================================================================= */

/* -------------------------------------------------------------------------
   26a  LAPTOPS — max-width: 1320px
   ------------------------------------------------------------------------- */

@media (max-width: 1320px) {

}


/* -------------------------------------------------------------------------
   26b  TABLETS AND BELOW — max-width: 1000px
   ------------------------------------------------------------------------- */

@media (max-width: 1000px) {

    /* Sizes only — the script handles where they go */
    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-prev,
    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-next {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
    }
}


/* -------------------------------------------------------------------------
   26c  MOBILES — max-width: 600px
   ------------------------------------------------------------------------- */

@media (max-width: 600px) {

    /* Arrows stay BESIDE the card, not below it. The earlier version took
       them out of flow order and dropped them under the carousel, where
       they collided with the next section's heading.

       Pinned to the carousel edges and vertically centred, so they sit
       either side of the card exactly as they do on desktop — just tighter
       in, because the card is nearly full width here. */
    .us_post_carousel:not(.partner-carousel) .owl-nav {
        position: absolute !important;
        inset: 0 !important;
        display: block !important;
        margin: 0 !important;
        pointer-events: none;
    }

    .us_post_carousel:not(.partner-carousel) .owl-nav.disabled {
        display: block !important;
    }

    /* position: relative, NOT static — the icons are ::before / ::after
       with inset: 0, so a static button lets them escape and stretch to
       the whole carousel. */
    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-prev,
    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-next {
        position: absolute !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        margin: 0 !important;
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        pointer-events: auto;
        cursor: pointer !important;
        opacity: 1 !important;
    }

    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-prev {
        left: 6px !important;
        right: auto !important;
    }

    .us_post_carousel:not(.partner-carousel) .owl-nav .owl-next {
        right: 6px !important;
        left: auto !important;
    }

    /* The brown centring line was a desktop device */
    .us_post_carousel::before {
        display: none;
    }

    /* Featured Work title: nowrap on each line so "Let us" / "inspire you."
       don't break word-by-word in the narrow column */
    body .fw-title .fw-title-inner .serif {
        font-size: clamp(2rem, 9vw, 3rem);
        white-space: nowrap;
    }

    body .fw-title .fw-title-inner .teal {
        font-size: clamp(1.9rem, 8.5vw, 2.8rem);
    }

    /* Featured Stones: square-ish crop and smaller title */
    .featured-stones .w-post-elm.post_image img {
        aspect-ratio: 3 / 2;
    }

    .featured-stones .w-grid-item .title {
        font-size: 20px !important;
    }

    /* Browse by Space */
    .browse-spaces .us_custom_56761b8e {
        padding: 20px !important;
    }

    .l-section:has(.browse-spaces) > .l-section-h {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    /* Key Benefits repeater: two columns → one */
    .ls-key-benefits-list .repeater {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    /* Our Showroom: slightly smaller bottom gap than tablet */
    .l-section.split-meet > .l-section-h {
        padding-bottom: 3rem !important;
    }

    /* Footer bottom row (copyright + showroom button): stack */
    .l-footer .g-cols.cols_2-3 {
        grid-template-columns: 1fr !important;
        --columns-gap: 1.5rem !important;
    }

    /* Footer Contact Us: let the location value drop under its label */
    .l-footer .w-hwrapper.align_justify {
        flex-direction: column;
    }

    .l-footer .us_custom_32a71d93 {
        flex-basis: auto;
        width: auto !important;
    }

    /* "Rooted in Italian…" copy block */
    /* The 360px min-width and -130px left margin were compensating for the
       arrow mask on desktop. The mask is switched off at 900, so on a phone
       they just shoved the paragraph off the left edge and clipped it. */
    .video-mask-short p {
        margin-bottom: 1rem;
        min-width: 0;
        margin-left: 0;
    }
}


/* =========================================================================
   27  FORMINATOR FORMS — reusable styling
   -------------------------------------------------------------------------
   Add the class  ls-form  to the element or section wrapping the form
   (Design Options → Extra class name). Do it on each form; they all share
   this styling.

   FIELD TEXT (First name / Last name / Email / postcode): set the text as
   each field's PLACEHOLDER in Forminator. This CSS hides the label, so only
   the clean placeholder shows. If placeholders don't render as normal text,
   the form's Fields Style is "Material" (Appearance tab) — switch it to
   "None" or "Default".
   ========================================================================= */

/* Hide the label on text-style fields. Only touches fields with a text
   input wrap, so the file-upload prompt and radio labels stay visible. */
.ls-form .forminator-input--wrap .forminator-label,
.ls-form .forminator-field:has(> .forminator-input--wrap) .forminator-label,
.ls-form .forminator-textarea--wrap .forminator-label,
.ls-form .forminator-field:has(.forminator-textarea) .forminator-label,
.ls-form .forminator-field-phone .forminator-label {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    white-space: nowrap !important;
}


/* --- WHITE FIELD FILL — must be scoped by module ID ----------------------
   Forminator paints field backgrounds with its own CSS scoped to the form's
   module ID and flagged !important. An ID beats any class, so a reusable
   .ls-form rule can't override it — this one property has to match at ID
   level. Duplicate the block for each form, swapping in its module ID.
   Find the ID in the shortcode: [forminator_form id="2616"] →
   #forminator-module-2616 */

#forminator-module-2980 .forminator-input,
#forminator-module-2980 .forminator-textarea,
#forminator-module-2980 .forminator-input-with-phone {
    background: #fff !important;
    background-color: #fff !important;
}

/* Keep the phone's inner input transparent so only the rounded wrapper
   shows white — otherwise its square corner pokes past the pill edge */
#forminator-module-2980 .forminator-input-with-phone .forminator-input {
    background: transparent !important;
    background-color: transparent !important;
}

/* Quote page (module 981) */
#forminator-module-981 .forminator-input,
#forminator-module-981 .forminator-textarea,
#forminator-module-981 .forminator-input-with-phone {
    background: #fff !important;
    background-color: #fff !important;
}

#forminator-module-981 .forminator-input-with-phone .forminator-input {
    background: transparent !important;
    background-color: transparent !important;
}

/* Copy for a third form — replace YYYY with its module ID:
#forminator-module-YYYY .forminator-input,
#forminator-module-YYYY .forminator-textarea,
#forminator-module-YYYY .forminator-input-with-phone {
    background: #fff !important;
    background-color: #fff !important;
}
#forminator-module-YYYY .forminator-input-with-phone .forminator-input {
    background: transparent !important;
    background-color: transparent !important;
}
*/


/* --- Inputs and message box (white pills) ------------------------------- */

.ls-form .forminator-input,
.ls-form .forminator-textarea {
    border: 1px solid #C9BBA9 !important;
    border-radius: 30px !important;
    padding: 1.1rem 1.5rem !important;
    color: #1D1D1C !important;
    box-shadow: none !important;
}

/* Doubled class outranks Forminator's transparent override */
.ls-form .forminator-input.forminator-input,
.ls-form .forminator-textarea.forminator-textarea {
    background: #fff !important;
    background-color: #fff !important;
}

.ls-form .forminator-textarea {
    border-radius: 22px !important;
    min-height: 150px !important;
}

/* Kill the Material blue underline on hover and focus */
.ls-form .forminator-input:hover,
.ls-form .forminator-input:focus,
.ls-form .forminator-textarea:hover,
.ls-form .forminator-textarea:focus {
    border-color: #1C625F !important;
    box-shadow: none !important;
    outline: none !important;
}

.ls-form .forminator-input--wrap::before,
.ls-form .forminator-input--wrap::after,
.ls-form .forminator-textarea--wrap::before,
.ls-form .forminator-textarea--wrap::after {
    display: none !important;
}

/* Placeholder colour — this is the field text now */
.ls-form .forminator-input::placeholder,
.ls-form .forminator-textarea::placeholder {
    color: #9c9997 !important;
    opacity: 1 !important;
}


/* --- File upload ("Choose File" → styled pill) -------------------------- */

.ls-form .forminator-button-upload {
    margin-top: 1rem !important;
    background: #F4EFEA !important;
    border: 1px solid #C9BBA9 !important;
    color: #1D1D1C !important;
    border-radius: 50px !important;
    font-weight: 300 !important;
    font-size: 15px !important;
    padding: 0.85em 1.7em !important;
    box-shadow: none !important;
    cursor: pointer;
    transition: all 0.3s ease !important;
}

.no-touch .ls-form .forminator-button-upload:hover {
    background: #A9917C !important;
    color: #fff !important;
    border-color: #A9917C !important;
}

/* Native file input (browser "Choose File" + "No file chosen") */
.ls-form input[type="file"] {
    margin-top: 1rem;
    color: #9c9997;
    font-size: 14px;
    line-height: 46px;      /* = button height, centres "No file chosen" */
}

.ls-form input[type="file"]::file-selector-button {
    vertical-align: middle;
    height: 46px;
    line-height: 44px;      /* fixed height = deterministic centring */
    background: #F4EFEA;
    border: 1px solid #C9BBA9;
    color: #1D1D1C;
    border-radius: 50px;
    font-weight: 300;
    font-size: 15px;
    padding: 0 1.7em;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ls-form input[type="file"]::-webkit-file-upload-button {
    vertical-align: middle;
    height: 46px;
    line-height: 44px;
    background: #F4EFEA;
    border: 1px solid #C9BBA9;
    color: #1D1D1C;
    border-radius: 50px;
    font-weight: 300;
    font-size: 15px;
    padding: 0 1.7em;
    margin-right: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.ls-form input[type="file"]:hover::file-selector-button {
    background: #A9917C;
    color: #fff;
    border-color: #A9917C;
}

.ls-form input[type="file"]:hover::-webkit-file-upload-button {
    background: #A9917C;
    color: #fff;
    border-color: #A9917C;
}

/* Forminator rich uploader "No file chosen" span. !important beats
   Forminator's per-module rule, which has none, so this works on every
   module without hardcoding IDs. */
.ls-form .forminator-file-upload > span {
    margin-top: 15px !important;
    color: #777771 !important;
}

/* Upload prompt text — add the class form-upload-text to the
   "Do you have any plans… upload here" text element */
.ls-form .form-upload-text label {
    font-family: "Lora", serif !important;
    font-weight: 300 !important;
    font-style: italic !important;
    font-size: 22px !important;
    margin-bottom: 20px;
    color: var(--color-brown) !important;
}


/* --- Postcode lookup (the JS injects these two elements) ---------------- */

.ls-form .forminator-field-address .forminator-input--wrap {
    position: relative;
}

.ls-form .forminator-field-address .forminator-input {
    padding-right: 3.5rem !important;   /* room for the glass */
}

.ls-form .ls-postcode-search {
    position: absolute;
    top: 50%;
    right: 1.25rem;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    z-index: 3;
    transition: opacity 0.2s ease;
}

.ls-form .ls-postcode-search svg {
    width: 22px;
    height: 22px;
    display: block;
    stroke: var(--color-brown);
}

.ls-form .ls-postcode-search.is-loading {
    opacity: 0.4;
}

.ls-form .ls-postcode-results {
    display: none;
    width: 100%;
    margin-top: 0.5rem;
    border: 1px solid #C9BBA9;
    border-radius: 30px;
    padding: 1rem 1.5rem;
    background: #fff;
    color: #1D1D1C;
    cursor: pointer;
}


/* --- Material / Colour selects — match the pill inputs ------------------ */

.ls-form .forminator-select,
.ls-form select.forminator-select {
    border: 1px solid #C9BBA9 !important;
    border-radius: 30px !important;
    padding: 1.1rem 1.5rem !important;
    color: #1D1D1C !important;
    box-shadow: none !important;
    height: auto !important;
    line-height: 1.2 !important;
}


/* --- Phone field -------------------------------------------------------- */

.ls-form .forminator-field-phone .forminator-input-with-phone {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    background: #fff !important;
    border: 1px solid #C9BBA9 !important;
    border-radius: 30px !important;
    padding: 0 1.5rem !important;
    width: 100% !important;
}

.ls-form .forminator-field-phone .forminator-input-with-phone:hover,
.ls-form .forminator-field-phone .forminator-input-with-phone:focus-within {
    border-color: #1C625F !important;
}

.ls-form .forminator-field-phone .forminator-input--wrap,
.ls-form .forminator-field-phone .iti {
    position: static !important;
    display: flex !important;
    align-items: center !important;
    gap: 1rem !important;
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

.ls-form .forminator-field-phone .iti__country-container,
.ls-form .forminator-field-phone .iti__flag-container {
    position: static !important;
    inset: auto !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    flex: 0 0 auto !important;
    height: auto !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ls-form .forminator-field-phone .iti__selected-country,
.ls-form .forminator-field-phone .iti__selected-flag {
    display: flex !important;
    align-items: center !important;
    height: auto !important;
    padding-left: 20px !important;
    padding-bottom: 2px !important;
    background: transparent !important;
    color: #1D1D1C !important;
}

.ls-form .forminator-field-phone .iti__tel-input,
.ls-form .forminator-field-phone .forminator-field--phone,
.ls-form .forminator-field-phone input.forminator-input {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    padding: 1.1rem 0 !important;
}


/* --- Errors — a tidy line directly under their own pill ----------------- */

.ls-form .forminator-row {
    align-items: flex-start !important;
}

.ls-form .forminator-field {
    margin-bottom: 0.75rem !important;
}

.ls-form .forminator-error-message {
    position: static !important;
    display: block !important;
    order: 99 !important;
    margin: 0.5rem 0 0 !important;
    padding-left: 1.5rem !important;
    color: #d52f2f !important;
}

.ls-form .forminator-field-phone .forminator-field {
    display: flex !important;
    flex-direction: column !important;
}

@media (min-width: 783px) {
    .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row-inside:not(:last-child),
    .forminator-ui.forminator-custom-form:not(.forminator-size--small)[data-grid=open] .forminator-row:not(:last-child) {
        margin-bottom: 10px !important;
    }
}


/* --- Square radios (Trade / Non-trade) ---------------------------------- */

.ls-form .forminator-radio {
    margin-right: 2rem !important;
    color: #1D1D1C !important;
}

.ls-form .forminator-radio-bullet {
    border-radius: 0 !important;
    border: 1px solid #C9BBA9 !important;
}

.ls-form .forminator-radio input:checked + .forminator-radio-bullet {
    background: #95785E !important;
    border-color: #95785E !important;
}

.ls-form .forminator-radio-bullet::before {
    border-radius: 0 !important;
    background: transparent !important;
}


/* --- Submit button — warm-grey pill ------------------------------------- */

.ls-form .forminator-button-submit {
    background: #F4EFEA !important;
    border: 1px solid #C9BBA9 !important;
    color: #1D1D1C !important;
    border-radius: 50px !important;
    font-weight: 300 !important;
    font-size: 16px !important;
    padding: 1.2em 1.9em !important;
    box-shadow: none !important;
    transition: all 0.3s ease !important;
}

.no-touch .ls-form .forminator-button-submit:hover {
    background: #A9917C !important;
    color: #fff !important;
}


/* =========================================================================
   28  RADIO DROPDOWNS (.ls-radio-dropdown)
   Material / Colour pickers — the panel drops out of the pill instead of
   wrapping around it.
   ========================================================================= */

.ls-form .ls-radio-dropdown {
    --dd-radius: 30px;   /* match the pill's corner radius */
    --dd-pill-h: 56px;   /* match the pill's height */
}

.ls-form .ls-radio-dropdown .forminator-field {
    position: relative;
}

/* Pill sits above the panel so the panel looks like part of it */
.ls-form .ls-radio-dropdown .ls-dd-title {
    position: relative;
    z-index: 2;
    width: 100%;
    background: #fff;
}

/* Panel: exactly the pill's width, tucked behind it, same rounding */
.ls-form .ls-radio-dropdown .ls-dd-panel {
    position: absolute !important;
    top: 0;
    left: 0;
    right: 0;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box;
    z-index: 1;
    padding-top: var(--dd-pill-h);    /* options start below the pill */
    padding-bottom: 8px;
    border: 1px solid #C9BBA9;
    border-radius: var(--dd-radius);
    background: #fff;
    overflow: hidden;
}


/* =========================================================================
   29  BROWSE BY SPACE GRID (.browse-by-space-grid)
   -------------------------------------------------------------------------
   usg_vwrapper_1 (flex column) holds:
     usg_hwrapper_1    → title (left) + space icon (right)
     featured_image    → the tall/short image overlay
     post_content      → description (revealed on hover)
     usg_btn_1         → "View collection" (revealed on hover)

   REST : image is tall and covers the description and button.
   HOVER: image shrinks to a short strip, uncovering them; title and icon
          drop together; white wash fades in.
   ========================================================================= */

.browse-by-space-grid {
    --bbs-img-rest: 3 / 4;      /* portrait at rest (smaller 2nd no. = taller) */
    --bbs-img-hover: 16 / 9;    /* short strip on hover */
    --bbs-reveal: 0.4s;
    --bbs-gap: 16px;            /* space between image and desc/button */
    --bbs-title-shift: 13px;    /* how far the title row drops on hover */
    --bbs-wash: 0.2;            /* white wash strength */
}

/* Small, even gap between cards */
.browse-by-space-grid.w-grid {
    --gap: 14px;
}

.browse-by-space-grid .w-grid-item,
.browse-by-space-grid .w-grid-item-h {
    height: 100%;
}

/* Flex column — clips the tall overlay at the card bottom */
.browse-by-space-grid .usg_vwrapper_1 {
    position: relative;
    gap: 0;                 /* space with margins instead of wrapper gap */
    height: 100%;
    overflow: hidden;
}

/* Title row: title left, icon right, full-width rule underneath. Spans the
   full column = full image width. Transforming the whole row drops the icon
   with the heading. */
.browse-by-space-grid .usg_hwrapper_1 {
    position: relative;
    align-items: center;
    margin: 0 0 12px;
    padding-bottom: 10px;
    z-index: 3;
    transition: transform var(--bbs-reveal) ease;
}

.browse-by-space-grid .usg_hwrapper_1::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: var(--color-brown);   /* runs under title AND icon */
}

.browse-by-space-grid .post_title {
    margin: 0;
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: 1.2em !important;
    color: var(--color-brown);
}

.browse-by-space-grid .post_title a {
    color: inherit;
    text-decoration: none;
}

.browse-by-space-grid .space_icon {
    flex: none;
    line-height: 0;
}

.browse-by-space-grid .space_icon img {
    display: block;
    width: 1.6em;
    height: auto;
    max-width: none;
}

/* Image = the featured_image custom field. In flow it reserves only the
   short height; the <img> inside is an absolute, top-anchored overlay that
   is tall at rest and fills the full column width. */
.browse-by-space-grid .featured_image {
    position: relative;
    width: 100%;
    aspect-ratio: var(--bbs-img-hover);
    z-index: 2;                          /* paints above desc + button */
}

.browse-by-space-grid .featured_image img {
    position: absolute;
    inset: 0 0 auto 0;
    width: 100%;
    height: auto;
    aspect-ratio: var(--bbs-img-rest);   /* tall at rest, overflows down */
    object-fit: cover;
    pointer-events: none;
    transition: aspect-ratio var(--bbs-reveal) ease;
}

.browse-by-space-grid .featured_image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    pointer-events: none;
    z-index: 1;                          /* above the img, below the title */
    transition: opacity var(--bbs-reveal) ease;
}

/* Description and button: normal flow, sitting behind the image, hidden
   until hover */
.browse-by-space-grid .usg_post_content_1,
.browse-by-space-grid .usg_btn_1 {
    position: relative;
    z-index: 1;
    margin-top: var(--bbs-gap);
    opacity: 0;
    transition: opacity var(--bbs-reveal) ease;
}

/* --- Hover --- */
.browse-by-space-grid .w-grid-item:hover .featured_image img,
.browse-by-space-grid .w-grid-item:focus-within .featured_image img {
    aspect-ratio: var(--bbs-img-hover);
}

.browse-by-space-grid .w-grid-item:hover .featured_image::after,
.browse-by-space-grid .w-grid-item:focus-within .featured_image::after {
    opacity: var(--bbs-wash);
}

.browse-by-space-grid .w-grid-item:hover .usg_post_content_1,
.browse-by-space-grid .w-grid-item:hover .usg_btn_1,
.browse-by-space-grid .w-grid-item:focus-within .usg_post_content_1,
.browse-by-space-grid .w-grid-item:focus-within .usg_btn_1 {
    opacity: 1;
}

.browse-by-space-grid .w-grid-item:hover .usg_hwrapper_1,
.browse-by-space-grid .w-grid-item:focus-within .usg_hwrapper_1 {
    transform: translateY(var(--bbs-title-shift));
}

.browse-by-space-grid .w-grid-item:hover .button-2::before {
    transform: scaleX(1.8);
}

.browse-by-space-grid .w-grid-item:hover .button-2 span.w-btn-label {
    padding-left: 30px !important;
}


/* =========================================================================
   30  FORMINATOR RESPONSIVE
   ========================================================================= */

@media (max-width: 1320px) {

    .ls-form .forminator-input,
    .ls-form .forminator-textarea,
    .ls-form .forminator-field-phone .forminator-input-with-phone {
        padding-left: 1.3rem !important;
        padding-right: 1.3rem !important;
    }

    .ls-form .forminator-error-message {
        padding-left: 1.3rem !important;
    }
}

@media (max-width: 900px) {

    .ls-form .forminator-field-phone .forminator-input-with-phone,
    .ls-form .forminator-field-phone .forminator-input--wrap,
    .ls-form .forminator-field-phone .iti {
        gap: 0.8rem !important;
    }
}

@media (max-width: 600px) {

    .ls-form .forminator-input,
    .ls-form .forminator-textarea {
        padding: 0.95rem 1.2rem !important;
        border-radius: 26px !important;
    }

    .ls-form .forminator-field-phone .forminator-input-with-phone {
        padding: 0 1.2rem !important;
        border-radius: 26px !important;
    }

    .ls-form .forminator-field-phone .forminator-input-with-phone,
    .ls-form .forminator-field-phone .forminator-input--wrap,
    .ls-form .forminator-field-phone .iti {
        gap: 0.75rem !important;
    }

    .ls-form .forminator-field-phone .iti__tel-input,
    .ls-form .forminator-field-phone .forminator-field--phone,
    .ls-form .forminator-field-phone input.forminator-input {
        padding: 0.95rem 0 !important;
    }

    .ls-form .forminator-error-message {
        font-size: 0.8rem !important;
        padding-left: 1.2rem !important;
    }
}


/* =========================================================================
   31  FILTERS
   -------------------------------------------------------------------------
   Every US filter element on the site: the Stone Collection row, the
   Inspiration filters, and .multi-filter forms. All widths are handled
   here, so nothing filter-related lives in section 26.

   The dropdown is IN FLOW, so opening a filter pushes the grid below it
   down instead of covering it.

   Companion snippet: delete the CSS inside `ls-multi-filter-css` and its
   updateSpacing() function. Keep the rest of that snippet's JavaScript —
   the .mf-open styling is in 31e below.

   NOTE: the pill arrows here still use the filter-arrow-down / -up SVGs
   rather than --arrow-icon. They're a different icon (a bare chevron, not a
   circle), and the open state has to compose its rotation with the pill's
   existing translateY(-50%). Worth collapsing to one file separately.
   ========================================================================= */

.w-filter {
    /* Tokens live on the filter itself, not :root — they only need to reach
       the pill, panel and options, all of which are inside .w-filter. */
    --ls-pill-r: 29px;      /* pill corner radius; half the pill height */
    --ls-pill-pad-x: 24px;  /* horizontal padding, pill + options */
    --ls-pill-icon: 26px;   /* arrow / clear icon size */
    --ls-panel-max: 260px;  /* scroll height of the options list */

    position: relative;
}


/* --- 31a  Layout ---------------------------------------------------------
   Any horizontal wrapper holding filters becomes a wrapping row of pills.
   align-items: flex-start means only the open pill grows — the others stay
   put rather than stretching. */

.w-hwrapper:has(> .w-filter) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 1rem !important;
}

/* Pills share the row and wrap instead of squashing */
.w-hwrapper > .w-filter {
    flex: 1 1 190px;
    min-width: 0;
    max-width: 320px;
    margin: 0;
}

/* Flatten the theme's mobile-panel chrome — inline pills at every width */
.w-filter .w-filter-list {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: .6rem;
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    padding: 0 !important;
    background: none !important;
    transform: none !important;
    overflow: visible !important;
}

.w-filter-list-title,
.w-filter-list-closer,
.w-filter-opener,
.w-filter-item-reset {
    display: none !important;
}

/* The panel's "Apply" button. Filters apply on click, so it's noise.
   If any form of yours DOES require an Apply press, delete this rule. */
.w-filter-list-panel {
    display: none !important;
}


/* --- 31b  The pill ------------------------------------------------------ */

.w-filter-item {
    position: relative;
    flex: 1 1 150px;
    min-width: 0;
}

.w-filter-item-title {
    position: relative;
    display: block;
    width: 100%;
    margin: 0 !important;
    /* right padding leaves room for the icon */
    padding: 18px calc(var(--ls-pill-pad-x) + var(--ls-pill-icon) + 8px) 18px var(--ls-pill-pad-x);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.2;
    color: var(--color-dark-silver);
    text-align: left;
    text-transform: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    cursor: pointer;
    background: #fff;
    border: 1px solid var(--color-brown);
    border-radius: var(--ls-pill-r);
    transition: background .2s ease, color .2s ease, border-color .2s ease;
}

.no-touch .w-filter-item-title:hover {
    border-color: var(--color-green);
    color: var(--color-light-black);
}

.w-filter-item-title:focus-visible {
    outline: 2px solid var(--color-green);
    outline-offset: 2px;
}

/* Icon: down at rest, up when open, clear (X) once something is selected.
   content: "" kills any FontAwesome glyph the theme injects. */
.w-filter-item-title::after {
    content: "" !important;
    font-family: inherit;
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    width: var(--ls-pill-icon);
    height: var(--ls-pill-icon);
    background-image: url('https://www.landfordstone.co.uk/wp-content/uploads/filter-arrow-down.svg');
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    pointer-events: none;
}

.w-filter.opened .w-filter-list:not(:has(.w-filter-item ~ .w-filter-item)) .w-filter-item-title::after,
.w-filter-item.mf-open .w-filter-item-title::after {
    background-image: url('https://www.landfordstone.co.uk/wp-content/uploads/filter-arrow-up.svg');
    transform: translateY(-50%);   /* no rotation — the SVG points up */
}

.w-filter-item:has(input:checked) .w-filter-item-title::after,
.w-filter.opened .w-filter-item:has(input:checked) .w-filter-item-title::after,
.w-filter-item.mf-open:has(input:checked) .w-filter-item-title::after {
    background-image: url('https://www.landfordstone.co.uk/wp-content/uploads/filter-icon-x.svg');
}

/* Active pill */
.w-filter-item:has(input:checked) .w-filter-item-title {
    background: var(--color-brown);
    border-color: var(--color-brown);
    color: #fff;
}


/* --- 31c  The dropdown --------------------------------------------------
   In flow, directly under its pill. Opening a filter grows the row, which
   grows the section, which pushes the grid below down — so the panel can
   never cover the products. The scroll lives on the values list, not the
   panel, so the rounded corners never clip a half-row. */

.w-filter-item-content {
    display: none;
    position: static;
    width: 100%;
    margin-top: 8px;
    padding: 8px 0;
    background: #fff;
    color: var(--color-light-black);
    border: 1px solid var(--color-brown);
    border-radius: var(--ls-pill-r);
    box-shadow: 0 14px 28px -16px rgba(0, 0, 0, .35);
    overflow: hidden;
}

/* Single-item forms: the theme's .opened on the FORM is enough.
   Multi-item forms: .opened is on the form too, so it would open every item
   at once — those need the per-item .mf-open state from the multi-filter
   snippet's JS instead. The :not(:has()) test is "this list has only one
   item", which keeps both kinds working without hardcoding which is which. */
.w-filter.opened .w-filter-list:not(:has(.w-filter-item ~ .w-filter-item)) .w-filter-item-content,
.w-filter-item.mf-open > .w-filter-item-content {
    display: block;
}

.w-filter-item-values {
    max-height: var(--ls-panel-max);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: var(--color-brown) transparent;
}

.w-filter-item-values::-webkit-scrollbar {
    width: 6px;
}

.w-filter-item-values::-webkit-scrollbar-thumb {
    background: var(--color-brown);
    border-radius: 3px;
}


/* --- 31d  The options ---------------------------------------------------
   The label is the full-width hit area, so the highlight fills the row. */

.w-filter-item-value {
    display: block;
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    color: inherit;
    background: none;
}

.w-filter-item-value label {
    display: block;
    margin: 0;
    padding: 10px var(--ls-pill-pad-x);
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-light-black) !important;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}

.no-touch .w-filter-item-value label:hover {
    background: var(--color-warm-grey);
    color: var(--color-brown) !important;
}

.w-filter-item-value.checked label,
.w-filter-item-value:has(input:checked) label {
    background: var(--color-brown);
    color: #fff !important;
}

/* Tick on selected rows — these are multi-select, so the state needs saying */
.w-filter-item-value.checked label::after,
.w-filter-item-value:has(input:checked) label::after {
    content: "✓";
    float: right;
    margin-left: .5em;
}

/* Visually hidden inputs (still focusable for keyboard users) */
.w-filter-item-value input[type="radio"],
.w-filter-item-value input[type="checkbox"] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.w-filter-item-value:has(input:focus-visible) label {
    outline: 2px solid var(--color-green);
    outline-offset: -2px;
}


/* --- 31e  Multi-filter forms (.multi-filter) ----------------------------
   Several items in one form, opened one at a time by the snippet's JS via
   .mf-open. The look is inherited from everything above.

   OVERRIDES: the `ls-multi-filter-css` snippet is still active on the site
   and its stylesheet loads after this file, so its `.multi-filter`-prefixed
   rules win on source order. They date from when the panel was an overlay:
   position absolute, a 75px top padding to clear the pill, a 50px radius
   and a max-height. With the panel in flow those make it float over the
   pills below instead of pushing them down.

   Everything here is one class heavier than the snippet's selectors, so it
   wins regardless of load order. Deleting that snippet's CSS (keep its JS)
   makes this block unnecessary, but it does no harm either way. */

.w-filter.multi-filter .w-filter-item-content {
    position: static !important;
    top: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    max-height: none !important;
    margin-top: 8px !important;
    padding: 8px 0 !important;
    border-radius: var(--ls-pill-r) !important;
    overflow: hidden !important;
}

.w-filter.multi-filter .w-filter-item-values {
    max-height: var(--ls-panel-max) !important;
    overflow-y: auto !important;
}

/* updateSpacing() in that snippet writes an inline margin-bottom to reserve
   room for the overlay. The panel is in flow now, so that space is real and
   this would double it. !important beats the inline style. */
.w-filter.multi-filter,
.w-filter.multi-filter .w-filter-item {
    margin-bottom: 0 !important;
}

/* The snippet also hard-codes the pill geometry it expects */
.w-filter.multi-filter .w-filter-item-title {
    padding: 18px calc(var(--ls-pill-pad-x) + var(--ls-pill-icon) + 8px) 18px var(--ls-pill-pad-x) !important;
    border-radius: var(--ls-pill-r) !important;
}


/* --- 31f  Tablet -------------------------------------------------------- */

@media (max-width: 900px) {

    .w-filter {
        --ls-panel-max: 240px;
    }

    /* Two pills per row */
    .w-hwrapper > .w-filter {
        flex: 1 1 45%;
        max-width: none;
    }

    /* Stack the filter section's wrapper and centre its heading */
    .us_custom_dd6b8d40 .w-hwrapper {
        flex-direction: column !important;
        align-items: center !important;
        --hwrapper-gap: 1rem;
    }

    .us_custom_dd6b8d40 .wpb_text_column {
        margin: 0;
        text-align: center;
    }

    .us_custom_dd6b8d40 .wpb_text_column h2 {
        margin-bottom: 0;
        text-align: center;
    }

    /* "Find results" button: full width and centred */
    .us_custom_dd6b8d40 > .l-section-h .w-btn-wrapper {
        width: 100%;
        margin: 0 !important;
    }

    .us_custom_dd6b8d40 > .l-section-h .w-btn-wrapper .w-btn {
        width: 100%;
        text-align: center;
    }

    /* Breathing room so the pills don't touch the screen edges */
    .us_custom_dd6b8d40 > .l-section-h {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}


/* --- 31g  Mobile --------------------------------------------------------
   The theme swaps each form for its own unlabelled "Filters" opener button
   at this width; we keep the pills instead. The `.for_list` out-specifies
   the theme's per-form inline <style> blocks, which carry !important. */

@media (max-width: 600px) {

    /* The filter section carries the theme's height_medium, which pins it to
       a set height. Four stacked pills need more than that, so the last one
       ran past the section boundary and over the first product card. Let it
       size to its content instead, and make sure the grid section below
       isn't pulled up over it. */
    .l-section:has(.w-filter) {
        height: auto !important;
        min-height: 0 !important;
        padding-bottom: 2rem !important;
        overflow: visible !important;
    }

    /* The FILTER section carries margin-bottom: -100px (Design Options on
       us_custom_9e1ac9dc), pulling whatever follows up over it. On desktop
       that's fine — the pills are one short row and the grid tucks under
       the tail of the section. Stacked on mobile the row is four times
       taller, so the grid lands on top of the last pill.

       Note it's the filter section pulling from above, not the grid pushing
       up from below: gridSec's own margin-top is 0. */
    .l-section:has(.w-filter) {
        margin-bottom: 0 !important;
    }

    .w-hwrapper:has(> .w-filter) {
        gap: .75rem !important;
    }

    /* One pill per row */
    .w-hwrapper > .w-filter {
        flex: 1 1 100%;
    }

    /* This element forces min-width: 400px, which overflowed */
    .us_custom_ca106527 {
        min-width: 0 !important;
        width: 100%;
    }

    /* The theme's mobile panel mode positions this list out of flow, so the
       section collapses to nothing and the pills render on top of the grid
       below — 28px of overlap on the stone-type page. The base reset in 31a
       is a class lighter than the theme's rule, so it needs repeating here
       at matching weight to win. */
    .w-filter.for_list.state_desktop .w-filter-list,
    .w-filter.for_list.state_mobile .w-filter-list {
        display: flex !important;
        flex-direction: column;
        position: static !important;
        inset: auto !important;
        width: 100% !important;
        max-width: none !important;
        height: auto !important;
        max-height: none !important;
        transform: none !important;
        overflow: visible !important;
        background: none !important;
        padding: 0 !important;
    }

    /* flex: 1 1 150px in section 31b sets the basis on the MAIN axis. The
       list is a column here, so that 150px became a minimum HEIGHT on every
       item — four pills claiming 600px instead of ~240px, which is what
       pushed the last one out of the section and over the grid below.
       Content-sized instead. */
    .w-filter .w-filter-item {
        flex: 0 0 auto !important;
        width: 100% !important;
    }

    .w-filter.for_list.state_desktop .w-filter-item,
    .w-filter.for_list.state_mobile .w-filter-item,
    .w-filter.for_list.state_desktop .w-filter-item-title,
    .w-filter.for_list.state_mobile .w-filter-item-title {
        display: block !important;
        width: 100% !important;
    }

    .w-filter.for_list.state_desktop .w-filter-item-title > span,
    .w-filter.for_list.state_mobile .w-filter-item-title > span {
        display: inline !important;
    }

    .w-filter.for_list.state_desktop .w-filter-opener,
    .w-filter.for_list.state_mobile .w-filter-opener,
    .w-filter.for_list.state_desktop .w-filter-list-panel,
    .w-filter.for_list.state_mobile .w-filter-list-panel {
        display: none !important;
    }

    /* Roomier tap targets */
    .w-filter-item-values {
        max-height: 220px;
    }

    .w-filter-item-value label {
        padding: 12px var(--ls-pill-pad-x);
    }
}


/* =========================================================================
   32  MIGRATED FROM IMPREZA THEME OPTIONS → CUSTOM CSS
   -------------------------------------------------------------------------
   Moved here so there is one stylesheet rather than three. Delete the whole
   block from Theme Options → Custom CSS once this file is live, or these
   rules will exist twice.

   Kept at the end of the file on purpose: the Theme Options block used to
   load after the main custom CSS, so these rules won a tie on source order.
   Sitting last preserves that.

   Two things were tidied on the way in:
     - a stray closing brace at the end of the block (harmless, browsers
       ignore an unexpected } at top level, but it breaks editor folding)
     - .mobile-only is also handled in section 01; both selectors are kept
       because the nav one is scoped more tightly
   ========================================================================= */

.w-btn-wrapper {
    margin: 0;
}

.no-margin-bottom {
    margin-bottom: 0 !important;
}

.text-large {
    font-size: 1.1rem;
}

.text-small {
    font-size: 0.85rem;
}

.w-hwrapper {
    row-gap: var(--hwrapper-gap, 0);
}

.w-vwrapper {
    column-gap: var(--vwrapper-gap, 0);
}

.floating-text-box-left {
    margin-right: -2rem !important;
}

.floating-text-box-right {
    margin-left: -2rem !important;
}

.greyscale {
    filter: grayscale(85%);
}

.center-grid-items .w-grid-list {
    justify-content: center;
}

.mfp-bottom-bar {
    display: none;
}

/* Headings */
h1, h2, h3, h4, h5, h6 {
    padding-top: 0;
}

/* Nav menu */
nav.type_desktop li.mobile-only {
    display: none;
}

/* Cookie consent */
#cmplz-manage-consent .cmplz-manage-consent {
    right: unset;
    left: 3rem;
}

.cn-set-cookie.cn-button {
    color: #fff !important;
}

/* Swipe pointer */
.animated-pointer {
    display: block;
    position: absolute;
    animation: pointer-swipe 3s ease-in-out infinite;
}

@keyframes pointer-swipe {
    0%   { transform: translateX(0); }
    20%  { transform: translateX(0.6rem); }
    40%  { transform: translateX(-0.6rem); }
    60%  { transform: translateX(0); }
    100% { transform: translateX(0); }
}

/* --- Forminator base (section 27 handles the .ls-form styling) --------- */

span.forminator-error-message {
    font-size: 0.8em;
    color: #d52f2f;
}

label.forminator-label,
h4.forminator-label {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-content-text);
}

.color_alternate label.forminator-label,
.color_alternate h4.forminator-label {
    color: var(--color-alt-content-text);
}

.forminator-checkbox-label,
.forminator-checkbox__label {
    font-size: 0.85rem;
    font-weight: 500;
}

label.forminator-checkbox {
    margin-right: 1.5rem;
}

.forminator-checkbox__label {
    display: inline-block;
}

.forminator-checkbox__wrapper {
    display: flex;
    gap: 0.5rem;
}

/* --- Mobile optimisation ---------------------------------------------- */

@media only screen and (max-width: 900px) {

    .g-cols.via_flex.type_default > .wpb_column.stretched:last-of-type,
    .g-cols.via_flex.type_default > .wpb_column.stretched:first-of-type {
        margin-right: -2rem !important;
    }

    #slider-spacer {
        height: 45vh;
    }

    .me-first {
        order: 1;
    }

    .me-second {
        order: 2;
    }
}


/* =========================================================================
   33  QA FIXES
   -------------------------------------------------------------------------
   Grouped here rather than scattered so they can be checked off against the
   QA sheet. Numbers refer to the checklist IDs.
   ========================================================================= */


/* --- #47  Chevrons on the inspiration spec rows -------------------------
   MATERIAL / STONE / SPACE render as .chevron.green wrappers containing a
   .button-2. The chevron colour rules were written as .button-2.green,
   i.e. expecting the colour class ON the button — but here it sits on the
   wrapper, so ::before had no background and the arrow was invisible.
   Matching the wrapper form fixes all three rows. */

.chevron.green .button-2::before,
.chevron.green .w-btn::before {
    background: var(--color-green);
}

.chevron.brown .button-2::before,
.chevron.brown .w-btn::before {
    background: var(--color-brown);
}

/* --- #45 / #62  Supplier logos centred ----------------------------------
   Owl left-aligns the stage, so a short row of logos hangs off the left.
   Auto margins centre it when the stage is narrower than its container and
   do nothing when it isn't, which leaves the looped carousels alone.

   Deliberately NOT display:flex — the looped stage is 17,780px wide and
   flex-shrink would squash every logo to fit. */

.partner-carousel .owl-stage {
    margin-left: auto;
    margin-right: auto;
}

/* Non-carousel fallback, if the element is ever switched to a grid */
.partner-carousel .w-grid-list:not(.owl-carousel) {
    justify-content: center;
}


/* --- #62  Hide the supplier block when there are none -------------------
   Filtering to only the relevant suppliers is a query change on the
   element. This just stops an empty section rendering with its heading. */

.l-section:has(.partner-carousel:not(:has(.w-grid-item))) {
    display: none;
}


/* --- #67  Hide the gallery when a product has no images -----------------
   Impreza puts a count_N class on the slider, so count_0 is the reliable
   test — checking for .rsSlide would fail before RoyalSlider initialises
   and flash the gallery on every load. */

.w-slider.ls-gallery.count_0 {
    display: none;
}

/* The custom arrows live in a separate HTML element in the same column */
.vc_column-inner:has(> .w-slider.ls-gallery.count_0) .ls-gallery-nav {
    display: none;
}


/* --- #42  Centre the gallery when the testimonial slot is empty ---------
   The row is cols_2-1 with the gallery left and a testimonial grid right.
   With no testimonial the grid renders empty and the gallery stays at
   two-thirds width, off to one side. Collapse to a single column instead. */

.g-cols:has(.ls-gallery):has(.us_post_list.no_results .w-grid-list:empty) {
    grid-template-columns: minmax(0, 1fr) !important;
}


/* --- #54  Gallery thumbnails — REVERTED --------------------------------
   Squaring and cropping the thumbs from CSS fought the slider's own
   layout: it writes dimensions after it initialises and positions the
   strip from them, so overriding them here made the thumbs oversized and
   pushed them out of the column.

   Do this in the element instead: Image Slider → Design Options →
   Thumbnails width / height, set to equal values. The slider then lays out
   square thumbs itself and nothing needs overriding. */


/* --- #66  Hero images crop instead of stretching the frame --------------
   The hero sized itself to whatever the image was, so the clip-path frame
   distorted to match. A fixed ratio plus object-fit crops to fill instead.

   --cs-hero-ratio is the shape of the frame — change it here rather than
   per template.

   NOTE: the product hero currently outputs the us_540_304 crop, which is a
   350x304 file being scaled up to fill a much larger frame. Cropping fixes
   the distortion but not the softness — set the Post Image element's image
   size to Large so there are enough pixels to crop from. */

.cs-hero-image,
.video-mask-short,
.bg-arrow-shape {
    --cs-hero-ratio: 4 / 3;
    overflow: hidden;
}

.cs-hero-image img,
.video-mask-short img,
.bg-arrow-shape img,
.hero-video .w-image-h img {
    width: 100%;
    height: 100%;
    aspect-ratio: var(--cs-hero-ratio);
    object-fit: cover;
    object-position: center;
    display: block;
}


/* --- #78  Enquiry links stay left-aligned when stacked ------------------
   The icon boxes carry the theme's align_center class, which centres the
   label once the columns stack and the flex row no longer holds it left. */

.enquiry-links .w-iconbox-meta,
.enquiry-links .w-iconbox-title {
    text-align: left;
}

/*--- Supplier heading on mobile was overlapping ------ */
@media (max-width: 768px) {
  .suppliers-title {
    position: relative;
    z-index: 2;
	}
}


/* =========================================================================
   34  RESPONSIVE AUDIT
   -------------------------------------------------------------------------
   A pass over the whole stylesheet for things that only work at the widths
   they were designed at. Three categories:

     a  Rows that never stack, because no tablet column count was set
     b  Hover effects that push content off a narrow screen
     c  Fixed measurements that don't scale down

   Breakpoints match the theme: 1320 laptops, 900 tablets, 600 mobiles.
   ========================================================================= */


/* --- 34a  Rows with no tablet setting ----------------------------------
   Impreza writes the chosen column counts into the markup as classes.
   `tablets-cols_inherit` means "no tablet setting was chosen", so the row
   keeps its DESKTOP column count all the way down to 600px — a 1-2 hero
   sits at a third width on a 700px screen, and the text next to it is
   unreadable.

   This stacks exactly those rows and leaves alone any row where a tablet
   count WAS chosen (tablets-cols_1, tablets-cols_2 and so on), so the
   deliberate two-up layouts survive.

   Affects: the product hero and its technical options, the product and
   stone-type gallery rows, and the inspiration hero, spec and outcome
   rows. */

@media (max-width: 900px) {

    .g-cols.via_grid.tablets-cols_inherit:not(.cols_1) {
        grid-template-columns: minmax(0, 1fr) !important;
        --columns-gap: 2rem !important;
    }

    .g-cols.via_grid.tablets-cols_inherit:not(.cols_1) > .wpb_column {
        width: 100% !important;
    }

    /* The product hero image leads on mobile, so it stays first */
    .l-section:has(.cs-hero-image) .g-cols {
        --columns-gap: 1.5rem !important;
    }
}


/* --- 34b  Hover effects that overflow ----------------------------------
   The enquiry links and the aftercare list both slide their icon 100px to
   the right on hover and extend the rule to match. On a narrow screen
   that's most of the row, so the icon leaves the viewport and the rule
   drags the layout wider. Below 900 the slide is removed and the rule
   simply stays put — the colour change still signals the hover. */

@media (max-width: 900px) {

    .download-wrapper {
        max-width: 100%;
    }

    .download-wrapper .w-iconbox:hover::before {
        right: 0;
    }

    .download-wrapper .w-iconbox:hover .w-iconbox-icon {
        transform: none;
    }
}


/* --- 34c  Fixed measurements that don't scale --------------------------- */

@media (max-width: 900px) {

    /* Technical options label column: a fixed 100px inline-block that
       leaves almost nothing for the values on a narrow row */
    .to-categories .w-post-elm-before {
        width: auto !important;
        display: block;
        margin-right: 0;
        margin-bottom: 0.25rem;
    }

    /* Separator under headings — 250px is wider than some mobile columns */
    .heading-underline {
        width: min(250px, 100%) !important;
    }
}

@media (max-width: 600px) {

    /* Featured Work meta rows: the 92px value indent and 70px label were
       set for a 40% desktop column, not a full-width phone */
    .fw-field {
        --fw-label-w: 58px;
        --fw-chev-x: 62px;
        --fw-value-x: 78px;
        font-size: 14px;
    }

    .fw-field::before {
        font-size: 10px;
        letter-spacing: .08em;
    }

    /* Stone-type cards: the resting image is a tall overlay sized for a
       narrow column. Full width on a phone makes it enormous. */
    .vertical-stone-type-grid {
        --vst-img-rest: 200 / 240;
    }

    .browse-by-space-grid {
        --bbs-img-rest: 4 / 3;
    }

    /* Only the gap is safe to change here — --thumbs-width is read by
       RoyalSlider's JS when it lays the strip out, so overriding it in CSS
       alone desyncs the two. Change the Thumbnails width in the element's
       responsive settings instead. */
    .ls-gallery {
        --ls-thumb-gap: 10px;
    }

    .ls-gallery-arrow {
        width: 44px;
        height: 44px;
    }

    /* Post grid image ratio is very wide; squarer reads better stacked */
    .post-layout .w-post-elm.post_image img {
        aspect-ratio: 3 / 2;
    }

    /* Spec rows wrap rather than squeeze */
    .spec-row .w-hwrapper.valign_top.align_none {
        flex-wrap: wrap;
    }
}


/* =========================================================================
   35  TEAM CARDS
   -------------------------------------------------------------------------
   For the Team Member post list. Put  ls-team  on the Post List element's
   Extra class name and this reproduces the old hand-built cards exactly:
   1px border, 1rem padding, photo beside bio, Connect button on the bottom.

   Impreza names each custom-field element after its field, so the selectors
   below target .role / .profile_image / .biography / .linkedin_url. If your
   field names differ, either rename them here or add the matching class in
   the layout (ls-team-role, ls-team-photo, ls-team-bio) — both are covered.

   Layout structure this expects, matching what you've built:
       vwrapper
         Post Title
         Role
         hwrapper → Profile Image + Biography
         LinkedIn button
   ========================================================================= */

.ls-team {
    --team-photo: 200px;      /* photo column width */
    --team-gap: 1.25rem;
    --team-pad: 1rem;
}

/* Intro paragraph above the grid — stops it running the full page width */
.ls-team-intro {
    max-width: 62ch;
}

/* --- The card ---------------------------------------------------------- */

.ls-team .w-grid-item,
.ls-team .w-grid-item-h {
    height: 100%;
}

/* The bordered box. If nothing appears, the ls-team class has gone on the
   grid LAYOUT rather than the Post List element — it needs to be on the
   Post List, because that's what wraps .w-grid-item-h. */
.ls-team .w-grid-item-h {
    display: flex;
    flex-direction: column;
    padding: var(--team-pad);
    border: 1px solid var(--color-content-border);
    background: var(--color-content-bg);
}

/* The layout's outer vwrapper needs to fill the card so the button can be
   pushed to the bottom of it */
.ls-team .w-grid-item-h > .w-vwrapper {
    flex: 1 1 auto;
    height: 100%;
}

/* --- Name and role ----------------------------------------------------- */

/* Names are always shown in caps, whatever case they're entered in — so
   editors don't have to remember, and a lowercase entry can't slip out */
.ls-team .post_title,
.ls-team .ls-team-name {
    font-size: var(--h3-font-size);
    line-height: var(--h3-line-height, 1.2);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin: 0 0 0.15em;
}

/* The role.

   Targeted by position as well as by field name: the field-name class only
   matches if the ACF field is literally called `role`, and picking the
   second child of the layout wrapper works regardless of what it's named.
   If you reorder the layout, this is the rule to revisit. */
.ls-team .w-grid-item-h > .w-vwrapper > *:nth-child(2),
.ls-team .post_custom_field.role,
.ls-team .ls-team-role {
    font-family: "Lora", serif;
    font-weight: 300;
    font-style: italic;
    font-size: var(--h4-font-size);
    line-height: 1.2;
    color: var(--color-black);
    margin: 0 0 1.25rem;
}

/* --- Photo beside bio -------------------------------------------------- */

.ls-team .w-hwrapper {
    align-items: flex-start;
    gap: var(--team-gap);
}

.ls-team .post_custom_field.profile_image,
.ls-team .ls-team-photo {
    flex: 0 0 var(--team-photo);
    max-width: var(--team-photo);
    min-width: 0;
}

.ls-team .post_custom_field.profile_image img,
.ls-team .ls-team-photo img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 1 / 1;
    object-fit: cover;
}

.ls-team .post_custom_field.biography,
.ls-team .ls-team-bio {
    flex: 1 1 auto;
    min-width: 0;             /* lets long words wrap instead of overflowing */
    font-size: 16px;
}

/* --- Connect button ---------------------------------------------------- */

/* Pinned to the bottom so every card's button lines up regardless of how
   long the bio runs */
.ls-team .w-grid-item-h .w-btn-wrapper,
.ls-team .w-grid-item-h > .w-vwrapper > .w-btn,
.ls-team .post_custom_field.linkedin_url {
    margin-top: auto;
    padding-top: 1rem;
}

/* --- M Additions ---------------------------------------------------- */
.fw-field .w-post-elm-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}
 
.enquiry-links .w-iconbox.title-rule {
    max-width: calc(100% - 200px);
    margin-left: auto;
    margin-right: auto;
}


/* --- 35a  Laptops: the photo takes too much of a narrower card --------- */

@media (max-width: 1320px) {

    .ls-team {
        --team-photo: 150px;
    }
}


/* --- 35b  Stacked ------------------------------------------------------ */

@media (max-width: 600px) {

    .ls-team {
        --team-gap: 1rem;
    }

    .ls-team .w-hwrapper {
        flex-direction: column;
    }

    .ls-team .post_custom_field.profile_image,
    .ls-team .ls-team-photo {
        flex: 0 0 auto;
        max-width: 220px;
    }
}


/* =========================================================================
   36  RESPONSIVE FIXES — QA ROUND 2
   -------------------------------------------------------------------------
   Items from the page-by-page responsiveness audit. Several appear on many
   pages but share one cause, so they're grouped by cause rather than page.
   ========================================================================= */

@media (max-width: 900px) {

    /* --- Supplier logos overlapping the next section and the "Our trade
       partners" button. Appears on the Stone Collection and Browse by Space
       templates, and as "project supplier logos overlapping next section"
       on the Inspiration template.

       Owl gives the stage an inline height from its own measurements; when
       the logos are taller than that, they spill. Clipping the stage and
       giving the section a real bottom margin stops the collision, and the
       button is lifted above the carousel so it can't be covered. */
    .partner-carousel .owl-stage-outer {
        overflow: hidden;
    }

    .partner-carousel {
        margin-bottom: 1.5rem;
    }

    .l-section:has(.partner-carousel) .w-btn-wrapper {
        position: relative;
        z-index: 2;
        margin-top: 1.5rem;
    }

    /* --- Image gallery too wide, arrows off screen. Stone Collection and
       Inspiration templates. The slider is sized from its own aspect ratio
       and can exceed the column; the arrows are positioned to the slider,
       so they go with it. */
/*     .w-slider.ls-gallery,
    .ls-gallery .royalSlider,
    .ls-gallery .rsOverflow {
        max-width: 100% !important;
        overflow: hidden;
    } */

    /* Arrows pulled well inside the slider edges so they can't sit half off
       the screen, and constrained to the gallery column rather than being
       free to span whatever ancestor they find. */
    /* Same row, just smaller */
    .ls-gallery-nav,
    .w-html .ls-gallery-nav {
        display: flex !important;
        gap: 1rem !important;
        margin-top: 1rem !important;
    }

    .ls-gallery-nav > *,
    .w-html .ls-gallery-nav > *,
    .ls-gallery-arrow {
        width: 44px !important;
        height: 44px !important;
    }

    /* --- Featured Work: categories onto their own line.
       The label is absolutely positioned in a fixed-width gutter, which
       forces the value to sit beside it however little room there is.
       Stacking label above value gives the categories the full width. */
    .fw-field {
        padding-left: 0 !important;
        padding-top: 2rem !important;
    }

    .fw-field::before {
        top: 0.4rem !important;
        transform: none !important;
        width: auto !important;
    }

    .fw-field::after {
        left: 0 !important;
        top: auto !important;
        bottom: 0.9rem !important;
        transform: none !important;
    }

    /* --- Key benefits: rule should span the column, not stop at the text */
    .ls-key-benefits-list .repeater-field.key_benefits_repeater_description,
    .ls-key-benefits-list .repeater-field.description {
        width: 100%;
        display: block;
    }

    /* --- Case-study / Inspiration hero: category tag overlapping the title.
       The row is a nowrap flex with a trailing rule, so a long term name and
       the rule fight for the same space. */
    .w-hwrapper:has(> .cs-hero-tax) {
        flex-wrap: wrap;
        row-gap: 0.5rem;
    }

    .cs-hero-tax a {
        white-space: normal;
    }

    /* --- Make an enquiry: the block appears on nearly every page, so this
       is the one that clears the most rows in the audit. Stack the columns,
       full-width rows, no icon slide (that's handled in section 23). */
    .l-section:has(.enquiry-links) .g-cols {
        grid-template-columns: minmax(0, 1fr) !important;
        --columns-gap: 1.5rem !important;
    }

    .l-section:has(.enquiry-links) .wpb_column {
        width: 100% !important;
    }

    .enquiry-links .w-iconbox.title-rule {
        max-width: 100% !important;
    }

    .rs-custom-arrows {
        display: none;
    }
}


@media (max-width: 600px) {

    /* --- News / blog grid: uneven title heights make the rules sit at
       different levels across the row. A two-line minimum evens them up
       without clipping longer titles. */
    .post-layout .title-rule .post_title {
        min-height: 2.6em;
        display: flex;
        align-items: center;
    }

    /* --- Featured Work: full width on mobile */
    .featured-work-container,
    .fw-carousel,
    .fw-viewport,
    .fw-track {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .featured-work-container {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }

    /* --- Quote / enquiry form selects and dropdowns overflowing */
    .ls-form .ls-radio-dropdown,
    .ls-form .ls-dd-panel,
    .ls-form .forminator-select,
    .ls-form select.forminator-select {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* =========================================================================
   37  STACK EARLY  (.stack-early)
   -------------------------------------------------------------------------
   Add the class  stack-early  to any SECTION (Design Options → Extra class
   name) whose columns need to stack sooner than the theme's 900px default.

   Why this exists
   ---------------
   The "Other opportunities." row is cols_1-2, so the heading gets a third of
   the row. "opportunities." is a single unbreakable word at
   clamp(3.5rem, 4vw, 4rem) — about 440px — so once the viewport drops below
   roughly 1400px that word is wider than its own track and runs into the
   card beside it.

   Section 34a only stacks these rows at 900px, which leaves a ~500px band
   (1400 → 900) where the two columns collide. This stacks them at the point
   they start to condense instead.

   ABOVE the breakpoint nothing is touched — the 1/3 + 2/3 split is the
   theme's and stays exactly as authored.

   TO CHANGE THE BREAKPOINT: edit the 1400px below. 1400 is deliberately
   above the theme's 1320px laptop breakpoint because the collision starts
   before 1320 is reached.
   ========================================================================= */

/* --- At and below the breakpoint: one full-width column ------------------
   !important is needed because the theme writes its column counts as
   classes (.cols_1-2 etc.) that would otherwise win. */
@media (max-width: 1400px) {

    .stack-early .g-cols.via_grid:not(.cols_1) {
        grid-template-columns: minmax(0, 1fr) !important;
        --columns-gap: 2rem !important;
    }

    .stack-early .g-cols.via_grid:not(.cols_1) > .wpb_column {
        width: 100% !important;
        min-width: 0 !important;
    }

    /* The card fills its column: no width cap, and the post grid drops to a
       single track so one vacancy spans the full width rather than sitting
       in half of a 2-column grid.
       DELETE the grid-template-columns line if you'd rather keep vacancies
       side by side two-up once there's more than one. */
    .stack-early .us_post_list .w-grid-list {
        max-width: none !important;
        width: 100% !important;
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .stack-early .us_post_list .w-grid-item {
        max-width: none !important;
        width: 100% !important;
    }
}

/* --- Mobiles ------------------------------------------------------------
   "opportunities." is still a single 3.5rem word on a 360px screen, so
   scale the heading down here to stop it overflowing the viewport. */
@media (max-width: 600px) {
    .stack-early h1 {
        font-size: clamp(2.2rem, 11vw, 3.5rem) !important;
    }
}
	
/*Mobile Optimisation for Service hero*/

@media (max-width: 600px) {
  .service-hero .g-cols {
	display: flex !important;
    flex-direction: column;
  }
  /* text column first */
  .service-hero .wpb_column:not(.cs-hero-col-image) {
    order: 1;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
  }

  /* image second, matching inset */
  .service-hero .cs-hero-col-image {
    order: 2;
    padding-left: 1rem !important;
    padding-right: 1.5rem !important;
  }

  /* kill the stretch so the padding actually takes effect */
  .service-hero .cs-hero-image.stretched,
  .service-hero .cs-hero-image .stretched {
    width: auto !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* breathing room above the Kitchen tag */
  .service-hero .cs-hero-tax {
    margin-top: 2rem;
  }

  .service-hero .w-separator.size_huge {
    display: none;
  }

  .service-hero .cs-hero-title,
  .service-hero .cs-hero-desc {
    margin-top: 0.4rem;
  }
}
	
/* Inspiration Template Mobile optimisation*/
@media (max-width: 600px) {

  .insp-hero {
    overflow-x: hidden;
  }

  /* ---- neutralise inner wrappers so padding is applied once ---- */
  .insp-hero-text .vc_column-inner,
  .insp-hero-text .w-vwrapper,
  .insp-hero-media .vc_column-inner,
  .insp-hero-media .w-vwrapper {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  /* ---- equal padding on both columns ---- */
  .insp-hero-text,
  .insp-hero-media {
    padding-left: 1.5rem !important;
    padding-right: 1.5rem !important;
    box-sizing: border-box !important;
    max-width: 100%;
  }

  /* ---- title + description ---- */
  .insp-hero-text .post_title,
  .insp-hero-text h3,
  .insp-hero-text .wpb_text_column {
    width: 100% !important;
    max-width: 100% !important;
    margin-right: 0 !important;
    padding-right: 0 !important;
    overflow-wrap: break-word;
  }

  /* ---- MATERIAL / STONE / SPACE rows + underline rules ---- */
  .insp-hero-text .w-hwrapper,
  .insp-hero-text .w-separator {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    box-sizing: border-box;
  }

  /* ---- image column ---- */
  .insp-hero-media {
    margin-bottom: 3rem !important;
  }

  .insp-hero-media img,
  .insp-hero-media .w-image,
  .insp-hero-media .w-image-h {
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
  }
}

	
/* ============================================================
   Featured stones grid — tag buttons pinned top-right of image
   ============================================================ */

/* Card becomes a 2-row grid so the image is its own cell */
.w-grid.featured-stones .w-grid-item .w-grid-item-h {
  position: relative !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: auto auto !important;
  align-content: start !important;
}

/* Row 1 — taxonomy + title */
.w-grid.featured-stones .w-grid-item .w-grid-item-h > .head {
  grid-row: 1 !important;
  grid-column: 1 !important;
}

/* Row 2 — the image */
.w-grid.featured-stones .w-grid-item .w-grid-item-h > .post_image {
  grid-row: 2 !important;
  grid-column: 1 !important;
}

/* ---- Tag buttons, inline, top-right of the image ---- */

/* If Impreza nested the wrapper inside another div, collapse that
   wrapper so .stone-tags becomes a real grid item */
.w-grid.featured-stones .w-grid-item-h > *:not(.stone-tags):has(.stone-tags) {
  display: contents !important;
}

.w-grid.featured-stones .w-grid-item-h .stone-tags {
  grid-row: 2 !important;
  grid-column: 1 !important;
  position: absolute !important;
  top: 24px !important;
  right: 10px !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  padding: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  z-index: 5 !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: flex-end !important;
  align-items: flex-start !important;
  gap: 10px !important;
  pointer-events: none !important;
  border: none !important;
  background: none !important;
  box-shadow: none !important;
}

/* Collapse every inner row/column wrapper, at any depth, so the
   buttons themselves become the flex items */
.w-grid.featured-stones .w-grid-item-h .stone-tags *:not(.w-btn):not(.w-btn *) {
  display: contents !important;
}

/* Buttons in normal flow, each independently hoverable,
   with a subtle brown border */
.w-grid.featured-stones .w-grid-item-h .stone-tags .w-btn {
  position: relative !important;
  z-index: 2 !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  pointer-events: auto !important;
  border: 1px solid rgba(122, 92, 66, 0.35) !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Kill Impreza's own ring on inner spans and pseudo-element
   overlays, so only the border above shows */
.w-grid.featured-stones .w-grid-item-h .stone-tags .w-btn > *,
.w-grid.featured-stones .w-grid-item-h .stone-tags .w-btn::before,
.w-grid.featured-stones .w-grid-item-h .stone-tags .w-btn::after {
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
}

/* ============================================================
   General
   ============================================================ */

.rsNav.rsThumbs.rsThumbsHor,
.rsThumb {
  height: unset !important;
}

.w-slider.fit_scaledown .w-slider-h img {
  object-fit: cover;
}

.bg_transparent + main > section:first-child {
  padding-top: var(--header-height);
}

.w-iconbox.iconpos_left.no_text .w-iconbox-title,
.w-iconbox.iconpos_right.no_text .w-iconbox-title {
  margin-bottom: 0 !important;
  margin-top: 0;
}
/* =========================================================================
   38  GALLERY THUMBS — 3 up on laptops  (.thumbs-3-on-laptop)
   -------------------------------------------------------------------------
   Add  thumbs-3-on-laptop  to the DESKTOP Image Slider's Extra class name.

   These MUST sit on .w-slider, not on .rsThumb — RoyalSlider reads both
   variables off the slider element when it initialises and lays the strip
   out from them. Setting the width on the thumb instead moves the picture
   but not the maths, and the strip desyncs on the next click.

   !important beats the element's own inline --thumbs-width:233.5px.
   ========================================================================= */

@media (max-width: 1320px) {

    .w-slider.ls-gallery.thumbs-3-on-laptop {
        --thumbs-width: 174px !important;
        --thumbs-gap: 20px !important;
    }
}

/* --- 38a  Arrows follow the gallery they control ----------------------
   The custom arrows are bound by JS to the FIRST .ls-gallery .royalSlider,
   i.e. the desktop slider, which is hidden from 1000px down. So the arrows
   have to go at the same breakpoint, not at 900.

   DELETE the  .rs-custom-arrows { display: none; }  rule and the
   .ls-gallery-nav / .ls-gallery-arrow sizing rules in section 36 once this
   is live — they only ever applied below 900 and are now dead weight.
   --------------------------------------------------------------------- */

@media (max-width: 1800px) {

    .w-html.rs-custom-arrows,
    .rs-custom-arrows {
        display: none !important;
    }
}

/* =========================================================================
   39  KEY BENEFITS — EQUAL HEIGHT CELLS
   -------------------------------------------------------------------------
   The grid already stretches each .repeater-row to the tallest in its row.
   The rule sits on .description::after (absolute, bottom: 0), so it followed
   the text rather than the cell. Making the row a flex column and letting
   the description grow pushes that bottom edge down to the full cell height,
   which lines the rules up across the pair.

   The title min-height reserves two lines so a wrapped title on one side
   doesn't push its description out of step with the other.
   ========================================================================= */

.ls-key-benefits-list .repeater-row {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.ls-key-benefits-list .repeater-field.key_benefits_repeater_title,
.ls-key-benefits-list .repeater-field.title {
    min-height: 2.4em;
}

.ls-key-benefits-list .repeater-field.key_benefits_repeater_description,
.ls-key-benefits-list .repeater-field.description {
    flex: 1 1 auto;
}

/* =========================================================================
   40  - Why Us aligning 
   -------------------------------------------------------------------------
   ========================================================================= */

.why-us-card .w-iconbox-title{
	align-items: flex-start;
	min-height: 4em;
}

.why-us-card p {
	min-width: 300px;
	align-items: flex-start;
}

/* =========================================================================
   41  INSPIRATION CARDS — EQUAL HEIGHT
   -------------------------------------------------------------------------
   The bordered box is .w-grid-item-h, so it has to fill the grid cell for
   the borders to line up. The card then becomes a flex column and the
   button gets margin-top: auto, so the slack from the shorter descriptions
   collects above the button instead of shrinking the card.
   ========================================================================= */

@media (max-width: 1200px){
	.inspiration .w-vwrapper.usg_vwrapper_1.align_none.valign_top {
    	min-height: 600px;
	}
}

@media (max-width: 1700px){
	.inspiration .w-vwrapper.usg_vwrapper_1.align_none.valign_top {
    	min-height: 650px;
	}
}

@media (min-width: 1701px){
	.inspiration .w-vwrapper.usg_vwrapper_1.align_none.valign_top {
    	min-height: 700px;
	}
}

/* =========================================================================
   41  TRADE STEPS — RULE ALIGNED TO SINGLE-LINE TITLES
   -------------------------------------------------------------------------
   Same card layout as Why Us, but every title here is one line, so the
   shared --why-line-top from section 12 (which assumes a two-line title box)
   lands above the text. This overrides the offset for this block only.

   Add  trade-steps  to the section's Extra class name, next to why-us.

   TO TUNE: 0.85 is a multiplier of the title's line-height. Raise it to push
   the rule down, lower it to lift it. Nudge in 0.05 steps.
   ========================================================================= */

.why-us.trade-steps {
    --why-line-top: calc(72px + 0.5rem + 0.85 * var(--why-title-size));
	--why-pad-x: 40px;
}

.trade-steps .why-us-card .w-iconbox-title {
    min-height: 2.6em;
    align-items: flex-start;
}

.trade-steps .why-us-card .w-iconbox-title {
    position: relative;
    z-index: 2;
    background: #fff;
    padding: 0 0.75em;
}
/* =========================================================================
   42  VALUES ROW — TITLES ALIGNED TO THE RULE
   -------------------------------------------------------------------------
   Add  values-row  to the section's Extra class name, next to why-us.

   The four SVGs have different natural heights, and every attempt to force
   them into an identical box failed because they're nested differently and
   sized off the inline font-size. So the icon is pulled OUT OF FLOW instead:
   it sits in a fixed --icon-band at the top of the card, and the card gets
   matching top padding. The title therefore always starts at the same
   offset regardless of the icon, and --why-line-top is derived from the same
   variable so the rule tracks it automatically.

   TO TUNE:
     --icon-band   height of the icon area. Raise if an icon looks cramped.
     0.85          multiplier of the title line-height; raise to push the
                   rule down, lower to lift it. Nudge in 0.05 steps.
   ========================================================================= */

.why-us.values-row {
    --icon-band: 72px;
    --icon-gap: 0.5rem;
    --why-line-top: calc(
        var(--icon-band) + var(--icon-gap) + 0.85 * var(--why-title-size)
    );
}

.values-row .why-us-card {
    position: relative;
    padding-top: calc(var(--icon-band) + var(--icon-gap));
}

/* Out of flow, so its height can't push anything below it */
.values-row .why-us-card .w-iconbox-icon {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: var(--icon-band);
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Single-line titles throughout, so no two-line reserve is needed */
.values-row .why-us-card .w-iconbox-title {
    min-height: 0;
    margin-top: 0;
    align-items: flex-start;
}

.values-row .why-us-card:nth-child(2) .w-iconbox-title {
    transform: translateY(-15px);
}

/* =========================================================================
   43  CULTURE ROW — TITLES AND DESCRIPTIONS ALIGNED
   -------------------------------------------------------------------------
   Add  culture-row  to the section's Extra class name, next to why-us.

   Every title box reserves two lines and top-aligns its text, so a one-line
   title and a two-line title both START at the same point. The rule is then
   pinned to that shared first line, and because the boxes are all the same
   height the descriptions line up underneath without any per-card nudging.

   The nth-child transforms are gone — they were compensating for the boxes
   being different heights, which this fixes at the source.

   TUNE: 0.85 is a multiplier of the title line-height. Raise to push the
   rule down, lower to lift it. 0.05 steps.
   ========================================================================= */

.why-us.culture-row {
    --why-line-top: calc(72px + 0.5rem + 0.85 * var(--why-title-size));
}

/* Two-line reserve, text top-aligned within it */
.culture-row .why-us-card .w-iconbox-title {
    min-height: 2.6em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
}

/* Equal-height cards so the reserve actually holds */
.culture-row .why-us-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.culture-row .why-us-card .w-iconbox-title {
    min-height: 3em;
}

.culture-row .why-us-card:nth-child(2) .w-iconbox-title,
.culture-row .why-us-card:nth-child(4) .w-iconbox-title {
    transform: translateY(-14px);
}

.culture-row .why-us-card .w-iconbox-title {
    box-shadow: 0 0 0 10px #fff;
    clip-path: inset(0 -10px);
}

/* =========================================================================
   44  SUSTAINABILITY ROW — ICONS AND TITLES START LEVEL
   -------------------------------------------------------------------------
   Add  sustainability-row  to the section's Extra class name, next to why-us.

   Titles run to three lines here (card 1), so the reserve is 3.9em rather
   than the 2.6em used elsewhere. Every title box is that height with the
   text top-aligned, so all four titles START on the same line regardless of
   how many lines they run to. Descriptions are left to fall where they may.

   TUNE: 0.85 positions the rule on the first title line. 0.05 steps.
   ========================================================================= */

.why-us.sustainability-row {
    --why-line-top: calc(72px + 0.5rem + 0.85 * var(--why-title-size));
}

/* Fixed icon band so a taller icon can't push its title down */
.sustainability-row .why-us-card .w-iconbox-icon {
    height: 72px;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Three-line reserve, text top-aligned within it */
.sustainability-row .why-us-card .w-iconbox-title {
    min-height: 3.9em;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    clip-path: inset(0 -10px);
}

/* =========================================================================
   45  SHOWROOM ROW — ICONS AND TITLES START LEVEL
   -------------------------------------------------------------------------
   Add  showroom-row  to the section's Extra class name, next to why-us.

   All four titles are one line, so no reserve is needed — the fixed icon
   band is what keeps them level, since the handshake SVG is shorter than
   the other three and was letting its title ride up.

   TUNE: 0.85 positions the rule on the title. 0.05 steps.
   ========================================================================= */

.why-us.showroom-row {
    --why-line-top: calc(72px + 0.5rem + 1.15 * var(--why-title-size));
}

.showroom-row .why-us-card:nth-child(3) .w-iconbox-title {
    transform: translateY(14px);
	margin-bottom: 20px;
	margin-top: 8px;
}


.showroom-row .why-us-card .w-iconbox-icon {
    height: 72px;
    margin: 0 0 0.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.showroom-row .why-us-card .w-iconbox-title {
    min-height: 0;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    position: relative;
    z-index: 2;
    background: #fff;
    box-shadow: 0 0 0 10px #fff;
    clip-path: inset(0 -10px);
}


/* =========================================================================
   46  FEATURED STONES — TITLE FLUSH WITH IMAGE ON HOVER
   -------------------------------------------------------------------------
   The builder's own hover rule slides the title down by 38%, which leaves a
   sliver of gap above the image. 50% closes it.

   Original rule (Impreza layout_5064, do not edit there — it'll be
   overwritten on save):
       .layout_5064 .w-grid-item-h:hover .usg_post_title_1 {
           transform: scale(1) translate(0%, 38%);
       }

   Scoped to .features-stones so other grids using layout_5064 are untouched.
   focus-within is included to match the original, so keyboard focus behaves
   the same as mouse hover.
   ========================================================================= */

.features-stones .w-grid-item-h:hover .usg_post_title_1,
.features-stones .w-grid-item-h:focus-within .usg_post_title_1 {
    transform: scale(1) translate(0%, 50%) !important;
}

/* =========================================================================
   47  MEGA MENU — ABOUT US AND CONTACT PANELS
   -------------------------------------------------------------------------
   Both panels are 5-column rows with the content in one or two columns,
   which squeezed the links. About us gets the full width, three across.
   Contact gets a 1 + 3 split, sized so all four links come out the same
   width.

   Spacing lives in the two variables below.
   ========================================================================= */

.menu-item-1736 .ls-mega-stone,
.menu-item-1735 .ls-mega-stone {
    --mega-col-gap: 3rem;     /* between columns */
    --mega-row-gap: 2rem;     /* between rows */
}

/* Gaps set directly rather than through --gap, which doesn't take a
   separate row and column value */
.menu-item-1736 .ls-mega-stone .w-grid-list,
.menu-item-1735 .ls-mega-stone .w-grid-list {
    column-gap: var(--mega-col-gap) !important;
    row-gap: var(--mega-row-gap) !important;
}

/* A little more air between each title and its rule. Matches the weight
   of the section 09 rule it overrides. */
.menu-item-1736 .ls-mega-stone .browse-spaces .w-hwrapper.browse-space-row,
.menu-item-1735 .ls-mega-stone .browse-spaces .w-hwrapper.browse-space-row {
    padding-bottom: 0.75rem;
}

/* --- About us: full width, three across --------------------------------- */

.menu-item-1736 .ls-mega-stone .g-cols.via_grid {
    grid-template-columns: minmax(0, 1fr) !important;
}

.menu-item-1736 .ls-mega-stone .w-grid {
    --columns: 3 !important;
}

/* --- Contact: four equal columns ------------------------------------------
   The first track is exactly a quarter of the row minus its share of the
   gaps, so "Contact" ends up the same width as each of the three links
   in the second column. */

.menu-item-1735 .ls-mega-stone .g-cols.via_grid {
    grid-template-columns:
        calc((100% - 3 * var(--mega-col-gap)) / 4)
        minmax(0, 1fr) !important;
    gap: var(--mega-col-gap) !important;
}

/* --- Tablets ------------------------------------------------------------- */

@media (max-width: 1000px) {

    .menu-item-1736 .ls-mega-stone .w-grid {
        --columns: 2 !important;
    }

    /* Contact stacks above the other three, which drop to two across on
       their own via the grid's own settings */
    .menu-item-1735 .ls-mega-stone .g-cols.via_grid {
        grid-template-columns: minmax(0, 1fr) !important;
        gap: var(--mega-row-gap) !important;
    }
}

 /* Move reCAPTCHA v3 badge to the left */

 .grecaptcha-badge {
  width: 70px !important;
  overflow: hidden !important;
  transition: all 0.3s ease !important;
  left: 0 !important;
	bottom: 25px !important;
}

.grecaptcha-badge:hover {
  width: 256px !important;
}

/* ===== Careers – laptop / vertical monitor (1001–1320px) ===== */
@media (min-width: 1001px) and (max-width: 1320px) {

	/* 1. Stack "Current opportunities" heading above the vacancy cards */
	#current-opportunity .g-cols.vc_row {
		grid-template-columns: 100%;
		--cols: 1;
	}

	/* 3. Blog/news grid: 2 columns instead of 3 */
	.w-grid.post-layout {
		--columns: 2 !important;
	}
}

/* 2. Job card labels: size to the text, never overlap the value.
      Applied at all sizes, since it can happen any time the card is narrow */
#current-opportunity .layout_2340 .usg_text_1,
#current-opportunity .layout_2340 .usg_text_2 {
	width: auto !important;
	min-width: 7em;
	flex: 0 0 auto;
	padding-right: 0.5rem;
}