/*!
 * Theme Name: Wisteria Garden Rooms Theme
 * Theme URI: https://veracitydesign.co.uk/
 * Author: Veracity Design
 * Author URI: https://veracitydesign.co.uk/
 * Description: A lightweight, high-performance theme developed by Veracity Design for Wisteria Garden Rooms, part of the South Coast Timber family. Private client use only.
 * Version: 1.0.0
 * License: Proprietary - All rights reserved.
 * License URI: https://veracitydesign.co.uk/license/
 * Text Domain: wisteria-garden-rooms
 *
 * This theme contains components originally based on Underscores (_s) by Automattic, licensed under the GPL v2.
 * Usage of this theme is strictly limited to licensed Veracity Design clients. Redistribution or resale is not permitted.
 */

/* ============================================
   BASE - CLIENT TYPOGRAPHY
   ============================================ */
body {
    font-family: 'outfit', sans-serif;
    background: #FDFDFB;
    color: #55505F;
}

h1, h2, h3, h4, h5, h6 {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    line-height: 100%;
}

h1 { font-size: 6rem; }
h2 { font-size: 5rem; line-height: 100% !important; }
h3 { font-size: 3.4rem; }
h4 { font-size: 2.5rem; line-height: 130%;}
h5 { font-size: 1.7rem; line-height: 150%;}
h6 { font-size: 1.2rem; }
p  { font-size: 1.4rem; font-weight: 300; line-height: 1.85; margin-bottom: 1.6rem; font-family: 'outfit', sans-serif; }
p:last-child { margin-bottom: 0; }

.outfit {
  font-family: 'outfit' !important;
}

.tai {
    font-family: 'Cormorant Garamond' !important;
}

.thin-font {
  font-weight: 100;
}

.thin-font2 {
  font-weight: 200;
}

.thin-font3 {
  font-weight: 300;
}

.thin-font4 {
  font-weight: 400;
}


@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Bold.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Bold.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Bold.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Italic.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Italic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Italic.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Italic.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Light.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Light.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Light.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-LightItalic.ttf') format('truetype');
    font-weight: 300;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Medium.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Medium.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Medium.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-MediumItalic.ttf') format('truetype');
    font-weight: 500;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Regular.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Regular.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Regular.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Cormorant Garamond';
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.eot');
    src: url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.eot?#iefix') format('embedded-opentype'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.woff2') format('woff2'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.woff') format('woff'),
        url('fonts/Cormorant_Garamond/CormorantGaramond-SemiBoldItalic.ttf') format('truetype');
    font-weight: 600;
    font-style: italic;
    font-display: swap;
}

@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Black.eot');
    src: url('fonts/outfit/Outfit-Black.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Black.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Black.woff') format('woff'),
        url('fonts/outfit/Outfit-Black.ttf') format('truetype');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Bold.eot');
    src: url('fonts/outfit/Outfit-Bold.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Bold.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Bold.woff') format('woff'),
        url('fonts/outfit/Outfit-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-ExtraBold.eot');
    src: url('fonts/outfit/Outfit-ExtraBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-ExtraBold.woff2') format('woff2'),
        url('fonts/outfit/Outfit-ExtraBold.woff') format('woff'),
        url('fonts/outfit/Outfit-ExtraBold.ttf') format('truetype');
    font-weight: 800;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-ExtraLight.eot');
    src: url('fonts/outfit/Outfit-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-ExtraLight.woff2') format('woff2'),
        url('fonts/outfit/Outfit-ExtraLight.woff') format('woff'),
        url('fonts/outfit/Outfit-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Light.eot');
    src: url('fonts/outfit/Outfit-Light.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Light.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Light.woff') format('woff'),
        url('fonts/outfit/Outfit-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Medium.eot');
    src: url('fonts/outfit/Outfit-Medium.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Medium.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Medium.woff') format('woff'),
        url('fonts/outfit/Outfit-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Regular.eot');
    src: url('fonts/outfit/Outfit-Regular.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Regular.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Regular.woff') format('woff'),
        url('fonts/outfit/Outfit-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-SemiBold.eot');
    src: url('fonts/outfit/Outfit-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-SemiBold.woff2') format('woff2'),
        url('fonts/outfit/Outfit-SemiBold.woff') format('woff'),
        url('fonts/outfit/Outfit-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'Outfit';
    src: url('fonts/outfit/Outfit-Thin.eot');
    src: url('fonts/outfit/Outfit-Thin.eot?#iefix') format('embedded-opentype'),
        url('fonts/outfit/Outfit-Thin.woff2') format('woff2'),
        url('fonts/outfit/Outfit-Thin.woff') format('woff'),
        url('fonts/outfit/Outfit-Thin.ttf') format('truetype');
    font-weight: 100;
    font-style: normal;
    font-display: swap;
}

/* ============================================
   WISTERIA COLOUR SYSTEM
   ============================================ */
.plumt       { color: #7C6D93; }
.plumt-light       { color: #d6c7ee; }
.plumt-light2       { color: #a09aa9; }
.plum-darkt  { color: #4F4365; }
.purplet     { color: #6B5B82; }
.lavendert   { color: #C8BCD6; }
.greent-t    { color: #5C8273; }

.plumb       { background-color: #7C6D93; }
.plumb2       { background-color: #574a6a; }
.plum-darkb  { background-color: #4F4365; }
.plum-darkb2  { background-color: #3f354f; }
.plum-lightb       { background-color: #f4f3f6; }
.mintb       { background-color: #BCDCCB; }
.greenb       { background-color: #4c7564; }
.light-greenb       { background-color: #f2f7f2; }
.lilacb      { background-color: #E9E6EF; }
.lilacb2      { background-color: #f1f0f4; }
.paperb      { background-color: #FDFDFB; }

.plum-gradient {
    background: linear-gradient(180deg, #695a7f, #403551);
}

/* ============================================
   BUTTONS - CLIENT COLOURS
   (base structure lives in veracity-base.css)
   ============================================ */
.btn-ghost {
    border: 1.5px solid #6B5B82;
    color: #6B5B82;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    padding: 8px 20px;
}
.btn-ghost:hover {
    background: #6B5B82;
    color: #fff;
    border-color: #6B5B82;
}

.btn-ghost-green {
    border: 1.5px solid #6d8078;
    color: #6d8078;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    font-size: 1.5rem;
    letter-spacing: 0.1em;
    padding: 8px 20px;
}
.btn-ghost-green:hover {
    background: #6d8078;
    color: #fff;
    border-color: #6d8078;
}

/* ghost button on dark backgrounds */
.btn-ghost-light {
    color: #fff;
    border-color: rgba(255,255,255,0.85);
}
.btn-ghost-light:hover {
    background: #fff;
    color: #4F4365;
    border-color: #fff;
}

/* solid serif button used in the design banner */
.banner-btn {
    display: inline-block;
    font-style: italic;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: 'Cormorant Garamond';
    letter-spacing: 0.16em;
    text-transform: uppercase;
    padding: 14px 40px;
    background: #574a6a;
    color: #d5c9e4;
    white-space: nowrap;
    transition: all 0.3s;
}
.banner-btn:hover { background: #6C5C84; color: #fff; }

.calc-padding {
  padding-top: 12%;
  padding-bottom: 5%;
}

/* ============================================
   SHARED COMPONENTS
   ============================================ */
   .eyebrow {
       font-size: 14px;
       font-weight: 100;
       letter-spacing: .26em;
       text-transform: uppercase;
       color: #6B5B82;
       margin-bottom: 12px;
   }

.sec-title {
    font-weight: 500;
    line-height: 90%;
    margin-bottom: 1.8rem;
}

/* serif heading used on banner plate, upgrade bands, stage 04 */
.serif-title {
    font-weight: 500;
}

.no-margin {
  margin: 0 !important;
}

.top-block {
 width: 100%;
 height: 180px;
 z-index: 1;
 background: #574a6a;
}


/* ============================================
   WISTERIA FONTS
   Cormorant Garamond + Poppins + Inter are loaded
   via Google Fonts in functions.php
   ============================================ */

/* ============================================
   HEADER - CLIENT COLOURS
   (nav colours live in css/veracity-nav.css)
   ============================================ */
/* Desktop nav: the framework .menu-container carries the mobile overlay's
   hidden/animated state (opacity:0, translateX). Inside the top navbar it must
   sit visible and static; the overlay copy keeps its slide-in animation. */
.navbar-wrap .menu-container {
    opacity: 1;
    transform: none;
    transition: none;
    padding: 0;
}

.logo {
    display: block;
    width: 300px;
    height: 94px;
    background: url(img/Wisteria-Garden-Room-White.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: absolute;
    left: 7%;
    top: 26px;
    z-index: 10;
}



/* ============================================
   GALLERY
   ============================================ */

   /* ============================================
   DEDICATED SPACE
   ============================================ */
.wis-focus {
    padding: 6% 10%;
}
.focus-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(40px, 6vw, 100px);
    align-items: center;
}
.focus-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 2.4rem;
}
.focus-icon {
    width: 90px;
    height: auto;
    flex: none;
}
.focus-text h2 { font-size: 3.5rem; margin: 0; }
.focus-text p {
    margin: 0;
}
.focus-media img {
    width: 100%;
    height: auto;
    display: block;
}

.focus-text-right { text-align: right; }
.focus-text-right .focus-head { justify-content: flex-end; }
.focus-text-right p { margin-left: auto; margin-right: 0; }
.focus-text-right h2 { font-size: 3.5rem; margin: 0; }


.focus-abs-img {
    position: absolute;
    left: -15%;
    bottom: -30%;
    width: 71%;
    height: auto;
    max-width: none;
    z-index: 2;
}

.why-us-room-cutout {
    position: absolute;
    left: -60%;
    bottom: -95%;
    width: 958px;
    height: auto;
    max-width: none;
    z-index: 2;
}


/* ============================================
   CONSTRUCTED AROUND YOUR REQUIREMENTS
   ============================================ */
.cr-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 34px;
    margin-top: 4%;
}

.cr-box {
    position: relative;
    display: flex;
    align-items: center;
    min-height: 240px;
    overflow: hidden;

    /* solid colours for now — swap each for a background-image later */
    background-size: cover;
    background-position: center;
    transition: transform 0.8s ease;
}

.cr-box:hover {
  transform: scale(1.03);
}


.cr-box1 { background-image: url('img/size-and-shape-img.webp'); }
.cr-box2 { background-image: url('img/exterior-finish-img.webp'); }
.cr-box3 { background-image: url('img/doors-and-windows-img.webp'); }
.cr-box4 { background-image: url('img/interior-finish-img.webp'); }

.cr-text {
    padding: 6%;
    max-width: 55%;
}
.cr-text h3 {
    margin-bottom: 1.4rem;
}
.cr-text p {
    line-height: 1.7;
}



/* ============================================
   WHAT TO EXPECT (list)
   ============================================ */
.wte2-col {
    padding-left: 6%;
}
.wte2-title {
    font-size: 2.6rem;
    margin-bottom: 2.5rem;
}

/* each row: icon | label | number */
.wte2-row {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 27px 0;
    border-bottom: 1px solid rgba(255,255,255,0.25);
}
.wte2-row-last { border-bottom: none; }

.wte2-icon {
    width: 48px;
    height: auto;
    flex: none;
}
.wte2-label {
    font-size: 2rem;
    letter-spacing: 3px;
}
.wte2-num {
    margin-left: auto;              /* pushes the number to the far right */
    font-size: 1.4rem;
    letter-spacing: 3px;
    color: rgba(255,255,255,0.6);
}

/* lilac button */
.wte2-btn {
    display: block;
    margin-top: 3rem;
    font-size: 1.8rem;
    padding: 12px;
    text-align: center;
    background: #d9cfe6;
    color: #4a3f55;
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 600;
    letter-spacing: 1px;
    transition: opacity 0.5s ease;
}
.wte2-btn:hover { opacity: 0.88; }

.made-in-hampshire-img {
    background-image: url(img/why-wisteria-made-in-hampshire-img.webp);
    background-repeat: no-repeat;
    background-position: -150px 59px;
    background-size: cover;
    background-color: #3c314c;
}


.mih-height {
  height: 1050px;
}


/* ============================================
   ROOM TYPES GRID
   ============================================ */
.rt-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px 44px;
    align-items: stretch;
}

.not-sure-padding {
  padding: 10% 60% 10% 8%;
}

/* room card */
.rt-card {
    display: block;
}
.rt-card img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
    margin-bottom: 22px;
}
.rt-card h4 {
    margin-bottom: 12px;
}
.rt-card p {
    line-height: 1.7;
    margin-bottom: 24px;
}
.rt-rule {
    width: 100%;
    height: 1px;
    background: rgba(107, 91, 130, 0.25);
    margin-bottom: 18px;
}
.rt-go {
    font-size: 1.2rem;
    letter-spacing: 3px;
    color: #8b80a0;
}

/* plum feature box — fills the 6th cell */
.rt-box {
    padding: 44px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.rt-box-title {
    font-size: 2.8rem;
    margin-bottom: 1.8rem;
    line-height: 100%;
}
.rt-box-lead {
    margin-bottom: 1.4rem;
}
.rt-box p {
    line-height: 1.7;
    color: rgba(255,255,255,0.88);
}

/* tablet: 2 columns */
@media screen and (max-width: 900px) {
    .rt-grid { grid-template-columns: repeat(2, 1fr); }
}

/* mobile: single column */
@media screen and (max-width: 610px) {
    .rt-grid { grid-template-columns: 1fr; }
    .rt-card img { height: 220px; }
}


.white-line {
  height: 1px;
  background-color: white;
  width: 90%;
  margin: 0 auto 15px;
}
   /* ============================================
      PROJECT GALLERY
      ============================================ */
      .wg-section {
       padding: 0% 8% 5%;
   }

   /* mobile-first: single column (below 610px) */
   .wg {
       display: grid;
       grid-template-columns: 1fr;
       gap: 12px;
   }
   .wg-tile {
       border: 0; padding: 0; margin: 0;
       display: block;
       position: relative;
       overflow: hidden;
       cursor: pointer;
       aspect-ratio: 4 / 3;
       background: #8B80A0;
   }
   .wg-tile img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       display: block;
       transition: transform 0.5s ease;
   }
   .wg-tile:hover img { transform: scale(1.05); }
   .wg-tile img[src=""] { display: none; }

   /* placeholder colours */
   .wg-tile-1  { background: #8B80A0; }
   .wg-tile-2  { background: #5C8273; }
   .wg-tile-3  { background: #A493BF; }
   .wg-tile-4  { background: #b6cbc2; }
   .wg-tile-5  { background: #6B5B82; }
   .wg-tile-6  { background: #C8BCD6; }
   .wg-tile-7  { background: #7C6D93; }
   .wg-tile-8  { background: #8fae9f; }
   .wg-tile-9  { background: #574a6a; }
   .wg-tile-10 { background: #a0b8ac; }

   /* tablet: 610–900px — 2 columns, with 1/2/5/8/9/10 full width so no gaps */
   @media (min-width: 610px) and (max-width: 900px) {
       .wg { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; }
       .wg-tile { aspect-ratio: auto; grid-row: span 2; }
       .wg-tile-1,
       .wg-tile-2,
       .wg-tile-5,
       .wg-tile-8,
       .wg-tile-9,
       .wg-tile-10 {
           grid-column: span 2;
           grid-row: span 3;
       }
   }

   /* desktop: 901px+ — original 4-column mosaic (tiles perfectly, no holes) */
   @media (min-width: 901px) {
       .wg { grid-template-columns: repeat(4, 1fr); grid-auto-rows: 100px; }
       .wg-tile { aspect-ratio: auto; }
       .wg-tile-1  { grid-column: 1 / 3; grid-row: 1 / 3; }
       .wg-tile-2  { grid-column: 3 / 5; grid-row: 1 / 5; }
       .wg-tile-3  { grid-column: 1 / 2; grid-row: 3 / 5; }
       .wg-tile-4  { grid-column: 2 / 3; grid-row: 3 / 5; }
       .wg-tile-5  { grid-column: 1 / 3; grid-row: 5 / 9; }
       .wg-tile-6  { grid-column: 3 / 5; grid-row: 5 / 7; }
       .wg-tile-7  { grid-column: 3 / 5; grid-row: 7 / 9; }
       .wg-tile-8  { grid-column: 1 / 2; grid-row: 9 / 11; }
       .wg-tile-9  { grid-column: 2 / 5; grid-row: 9 / 13; }
       .wg-tile-10 { grid-column: 1 / 2; grid-row: 11 / 13; }
   }


   @media (min-width: 1600px) {

   h2 { font-size: 6rem !important; line-height: 100% !important; }
   h3 { font-size: 4.4rem !important; }
   h4 { font-size: 3.5rem !important; line-height: 130%;}
   h5 { font-size: 2.2rem !important; line-height: 150%;}
   h6 { font-size: 1.4rem !important; }
   p  { font-size: 1.8rem !important;}


   .hocta-plate h5 {
       font-size: 2.2rem;
       font-weight: 200;
       line-height: 1.6;
   }

   .why-us-room-cutout {
       position: absolute;
       left: -46%;
       bottom: -113%;
       width: 1073px;
       height: auto;
       max-width: none;
       z-index: 2;
   }

   .logo {
           display: block;
           width: 300px;
           height: 145px;
           background: url(img/Wisteria-Garden-Room-White.svg);
           background-size: contain;
           background-position: left center;
           background-repeat: no-repeat;
           position: absolute;
           left: 7%;
           top: 26px;
           z-index: 10;
       }


       .hocta-title {
    margin-bottom: 2rem;
    font-size: 5.2rem;
    letter-spacing: 3px;
}

.hocta-plate h5 {
    font-size: 2.2rem;
    font-weight: 200;
    line-height: 150%;
}


   .wis-hero-copy3 h3 {
       font-size: 3.7rem!important;
   }

   .wis-banner-inner {
       padding: 40px !important;
   }

   .wis-banner-plate span {
    font-size: 4rem !important;
}
.wis-banner-blurb p {
    font-size: 1.7rem !important;
            max-width: 570px !important;
}

.banner-btn {
    font-size: 2rem !important;
}


.hero-l1 {
    font-size: 7.8rem !important;
}

.hero-l2 {
    font-size: 5.7rem !important;
}

.wis-hero-copy p {
    max-width: 660px !important;
}


.wis-hero-copy3 h1 {
    font-size: 6.8rem !important;
}

.wis-hero-copy3 p {
    font-size: 2.2rem !important;
}

}

   @media (min-width: 1200px) {


   .about-img-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
   .about-img-row2 img { width: 100%; height: 350px !important; object-fit: cover; }

   .about-img-row3 { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
   .about-img-row3 img { width: 100%; height: 250px !important; object-fit: cover; }

    }




   /* Lightbox */
   .wg-lb {
       display: none;
       position: fixed;
       inset: 0;
       z-index: 9999;
       background: rgba(20, 16, 26, 0.92);
       align-items: center;
       justify-content: center;
   }
   .wg-lb.open { display: flex; }
   .wg-lb-img {
       max-width: 90vw;
       max-height: 85vh;
       object-fit: contain;
       box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
   }
   .wg-lb button {
       position: absolute;
       background: none;
       border: none;
       color: #fff;
       cursor: pointer;
       line-height: 1;
       transition: opacity 0.2s ease;
   }
   .wg-lb button:hover { opacity: 0.6; }
   .wg-lb-close { top: 24px; right: 32px; font-size: 42px; }
   .wg-lb-prev, .wg-lb-next { top: 50%; transform: translateY(-50%); font-size: 40px; padding: 20px; }
   .wg-lb-prev { left: 2%; }
   .wg-lb-next { right: 2%; }
   .wg-lb-counter {
       position: absolute;
       bottom: 26px;
       left: 50%;
       transform: translateX(-50%);
       color: rgba(255, 255, 255, 0.85);
       font-size: 14px;
       letter-spacing: 2px;
   }

/* ============================================
   HERO
   ============================================ */
.wis-hero {
    overflow: hidden;
    min-height: 900px;
    color: #fff;
}

.not-sure-yet-img {
  background-image: url(img/used-for-img4.webp);
  background-size: cover;
  background-position: center;
}

.hampshire-img {
  background-image: url(img/based-in-hampshire.webp);
  background-size: cover;
  background-position: center;
}

.home-main {
  background-image: url(img/hero-main.webp);
  background-size: cover;
  background-position: center;
}

.about-main {
  background-image: url(img/about-main.webp);
  background-size: cover;
  background-position: center;
}


.wis-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(44,36,59,0.92) 0%, rgba(44,36,59,0.65) 42%, rgba(44,36,59,0.08) 75%, rgba(44,36,59,0) 100%);
    z-index: 1;
}
.wis-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(44,36,59,0.9) 0%, rgba(44,36,59,0.65) 18%, rgba(44,36,59,0) 25%);
    z-index: 1;
    pointer-events: none;
}
.wis-hero-copy {
    position: absolute;
    z-index: 3;
    width: 100%;
    max-width: 1240px;
    top: 50%;
    left: 10%;
    transform: translateY(-50%);
}

.wis-hero-copy3 {
    position: absolute;
    z-index: 3;
    width: 73%;
    max-width: 1240px;
    top: 57%;
    left: 10%;
    transform: translateY(-50%);
}

.used-for-hero h1 {
  max-width: 700px;
}


.wis-hero2 {
    overflow: hidden;
    min-height: 800px;
    color: #fff;
}

.gallery-main {
  background-image: url(img/gallery-main.webp);
  background-size: cover;
  background-position: center;
}

.faqs-main {
  background-image: url(img/faqs-main.webp);
  background-size: cover;
  background-position: center;
}

.wis-hero2:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(242deg, rgba(44,36,59,0.92) 0%, rgba(44,36,59,0.65) 42%, rgba(44,36,59,0.08) 75%, rgba(44,36,59,0) 100%);
    z-index: 1;
}
.wis-hero2::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(170deg, rgba(44,36,59,0.6) 0%, rgba(44,36,59,0.45) 18%, rgba(44,36,59,0) 30%);
    z-index: 1;
    pointer-events: none;
}
.wis-hero-copy2 {
    position: absolute;
    z-index: 3;
    width: 100%;
    top: 50%;
    right: -25%;
    transform: translateY(-50%);
}

.wis-hero3 {
    overflow: hidden;
    min-height: 800px;
    color: #fff;
}
.wis-hero3:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(118deg, rgba(44,36,59,0.92) 0%, rgba(44,36,59,0.75) 42%, rgba(44,36,59,0.08) 75%, rgba(44,36,59,0) 100%);
    z-index: 1;
}
.wis-hero3::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(190deg, rgba(44,36,59,0.9) 0%, rgba(44,36,59,0.65) 18%, rgba(44,36,59,0) 25%);
    z-index: 1;
    pointer-events: none;
}


.cta-banner-top-marg {
  margin-top: -200px;
}

/* ============================================
   OUR MISSION
   ============================================ */
   .mission-grid {
       display: grid;
       width: 100%;
       grid-template-columns: 1fr 1fr;
       gap: 34px;
       align-items: stretch;
       margin-top: 5%;
   }

/* left half: 2x2 box grid */
.mission-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
}
.ms-box {
    border: 1.5px solid #A493BF;
    padding: 32px 30px;
    display: flex;
    flex-direction: column;
    transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.ms-icon {
    width: 52px;
    height: auto;
    margin-bottom: 10px;
    transition: filter 0.35s ease;
}
.ms-title {
    margin-bottom: 16px;
    transition: color 0.35s ease;
}
.ms-box p {
    line-height: 1.7;
}

/* hover: green fill, white text + white icon */
.ms-box:hover {
    background: #5C8273;
    border-color: #5C8273;
    color: #fff;
}
.ms-box:hover .ms-title { color: #fff; }
.ms-box:hover .ms-icon { filter: brightness(0) invert(1); }

/* right half: image fills its column and matches box height */
.mission-media {
    overflow: hidden;
}
.mission-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* tablet: image drops below */
@media screen and (max-width: 900px) {
    .mission-grid { grid-template-columns: 1fr; }
    .mission-media img { height: 400px; }
}

/* mobile: boxes stack one per row */
@media screen and (max-width: 610px) {
    .mission-boxes { grid-template-columns: 1fr; }
    .mission-media img { height: 300px; }
}


.office-main {
  background-image: url(img/home-office-main.webp);
  background-size: cover;
  background-position: center;
}

.gym-main {
  background-image: url(img/gym-room-main.webp);
  background-size: cover;
  background-position: center;
}

.annexe-main {
  background-image: url(img/annexe-main.webp);
  background-size: cover;
  background-position: center;
}

.bar-main {
  background-image: url(img/bar-main.webp);
  background-size: cover;
  background-position: center;
}

.studio-main {
  background-image: url(img/studio-main.webp);
  background-size: cover;
  background-position: center;
}

.used-for-main {
  background-image: url(img/used-for-main.webp);
  background-size: cover;
  background-position: center;
}

.contact-main {
  background-image: url(img/contact-main.webp);
  background-size: cover;
  background-position: center;
}

.process-main {
  background-image: url(img/process-main.webp);
  background-size: cover;
  background-position: center;
}

.testimonials-main {
  background-image: url(img/testimonials-main.webp);
  background-size: cover;
  background-position: center;
}

.why-main {
  background-image: url(img/why-wisteria-main.webp);
  background-size: cover;
  background-position: center;
}

.wis-hero-copy h1 { margin-bottom: 0; text-shadow: 0 2px 26px rgba(0,0,0,0.35); }

.wis-hero-copy3 h1 {

  display: block;
  font-weight: 500;
  font-size: 5.5rem;
  line-height: 94%;
  color: #fff;

}

.wis-hero-copy3 h3 {
    font-size: 3.1rem;
    display: block;
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 0.1em;
    color: #e2d9ee;
}

.story-single {
    width: 100%;
    height: 490px;
    object-fit: cover;
    display: block;
}

.testimonial-single {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
    background-color: #444444;
}

.contact-single {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
    background-color: #444444;
}

/* ============================================
   USED FOR — image layout
   ============================================ */
.uf-media {
    display: grid;
    grid-template-columns: 1fr 1.4fr;   /* narrow tall column | wider stacked column */
    gap: 20px;
    align-items: stretch;
}
.uf-tall img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
.uf-stack {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.uf-stack img {
    width: 100%;
    height: 180px;
    object-fit: cover;
    display: block;
}


/* ============================================
   FAQ ACCORDION
   ============================================ */
.faq-col { padding-left: 4%; }

.faq-item {
    border: 1.5px solid #6B5B82;
    background-color: white;
    margin-bottom: 14px;
    overflow: hidden;
    transition: background 0.3s ease;
}

/* question row (button) */
.faq-q {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    padding: 20px 24px;
    font-family: 'outfit', sans-serif;
    font-size: 1.5rem;
    color: #55505F;
    transition: color 0.3s ease;
}
.faq-ar {
    flex: none;
    font-size: 1rem;
    color: #6B5B82;
    transform: rotate(180deg);          /* pointing down when closed */
    transition: transform 0.3s ease;
}

/* answer — collapsed by default */
.faq-a {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.faq-a p {
    padding: 0 24px 20px;
    line-height: 1.7;
    color: rgba(255,255,255,0.9);
    margin: 0;
}

/* open state — green fill, arrow points up, answer expands */
.faq-item.is-open {
    background: #7e9a8d;
    border-color: #7e9a8d;
}
.faq-item.is-open .faq-q { color: #fff; }
.faq-item.is-open .faq-ar { color: #fff; transform: rotate(0deg); }
.faq-item.is-open .faq-a { max-height: 400px; }

/* hover (closed items) — green tint */
.faq-item:not(.is-open):hover {
    background: #7e9a8d;
    border-color: #7e9a8d;
}
.faq-item:not(.is-open):hover .faq-q { color: #fff; }
.faq-item:not(.is-open):hover .faq-ar { color: #fff; }

@media screen and (max-width: 610px) {
    .faq-col { padding-left: 0; margin-top: 8%; }
}


/* ============================================
   TESTIMONIALS (shared)
   ============================================ */
.ts-quote {
    position: relative;
    font-size: 3rem;
    line-height: 1.5;
    font-weight: 100;
    margin-bottom: 2.6rem;
    border: none;
    font-family: 'outfit';
}
/* big decorative opening quote mark behind the text */
.ts-mark {
    position: absolute;
    top: -12rem;
    left: -4.5rem;
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 60rem;
    line-height: 1;
    color: rgba(107, 91, 130, 0.03);
    z-index: 0;
    pointer-events: none;
}
.ts-stars {
    font-size: 4rem;
    letter-spacing: 6px;
    margin-bottom: 1.2rem;
    color: #6B5B82;
}
.ts-by {
    font-family: 'Playfair Display', Georgia, serif;
    font-size: 1.7rem;
}

/* --- Testimonial 1 (lilac) --- */
.ts1-text-col {
    padding-left: 4%;
}

/* --- Testimonial 2 (green) --- */
.ts2-text-col {
    padding-right: 4%;
}
.ts2-mark { color: rgba(255, 255, 255, 0.25); }   /* faded white mark on green */
.ts2-stars { color: rgba(255, 255, 255, 0.9); }   /* white stars on green */

/* testimonial 3 — second image stacked under the first */
.ts3-second {
    margin-top: 20px;
    height: 260px;
}

/* ============================================
   DESIGN — IMAGE CAROUSEL (fade)
   ============================================ */
.ds-carousel {
    position: relative;
    overflow: hidden;
}
.ds-fade {
    position: relative;
    height: 420px;
}
.ds-slide {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 0;
    transition: opacity 1.2s ease;   /* slow cross-fade */
}
.ds-slide.is-active {
    opacity: 1;
}

/* arrows, bottom-right */
.ds-arrows {
    position: absolute;
    bottom: 16px;
    right: 16px;
    display: flex;
    gap: 8px;
    z-index: 2;
}
.ds-arrow {
    width: 42px;
    height: 42px;
    border: none;
    cursor: pointer;
    background: #8ba79b;
    color: #fff;
    font-size: 1.3rem;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
}
.ds-arrow:hover { background: #7a978b; }



.p-stage1-h {
  height: 700px;
  overflow: hidden;
}

.p-stage1-half {
  width: 50%;
}

.p-stage1-logo {
    position: absolute;
    bottom: -5px;
    right: -11vw;
    height: 576px;
    width: auto;
    max-width: none;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}



/* section holds the padding that frames the box on the left */
.p-share-sec {
    padding-left: 8%;
}

/* the green card, pulled up to overlap the section above */
.p-share {
    width: 33%;
    background: #8ba79b;          /* lighter green from the design */
    padding: 48px 44px 54px;
    margin-top: -310px;           /* overlap onto the section above */
    margin-bottom: 50px;
    position: relative;
    z-index: 3;                   /* sit above the darker green section */
}

.p-share-title {
    margin-bottom: 32px;
}

/* each row: icon + text side by side */
.p-share-item {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 26px;
}
.p-share-item:last-child { margin-bottom: 0; }

.p-share-ic {
    flex: none;
    width: 52px;
}
.p-share-ic img {
    width: 100%;
    height: auto;
}

.p-share-item p {
    font-size: 2rem;
    margin: 0;
    line-height: 1.5;
}


.wte-section {
    padding: 6% 8%;
}

/* left image */
.wte-img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    display: block;
}

/* right text column */
.wte-text-col {
    padding-left: 6%;
}
.wte-title {
    margin-bottom: 3rem;
}

/* 2x2 grid of tick items */
.wte-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px 30px;
    width: 100%;
}
.wte-item {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* text sits right, tick after it */
    gap: 18px;
    text-align: right;
}
.wte-item p {
    color: #574a6a;
    font-size: 2rem;
    margin: 0;
    line-height: 1.4;
}
.wte-tick {
    flex: none;
    width: 46px;
    height: auto;
}




/* ============================================
   STAGE 4 — 3x3 BUILD STEPS
   ============================================ */
.s4-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px 50px;
    align-items: center;
}

/* icon + text step */
.s4-step {
    padding: 0 4%;
}
.s4-icon {
    width: 52px;
    height: auto;
    margin-bottom: 18px;
}
.s4-step h4 {
    margin-bottom: 14px;
}
.s4-step p {
    line-height: 1.7;
    color: rgba(255,255,255,0.85);
}

/* image cell */
.s4-media img {
    width: 100%;
    height: 240px;
    object-fit: cover;
    display: block;
}

/* tablet: 2 columns, images flow inline */
@media screen and (max-width: 900px) {
    .s4-grid { grid-template-columns: 1fr; gap: 50px; }
        .s4-media img { height: 240px; }
}




/* ============================================
   CONFIRM YOUR BUILD — at this stage
   ============================================ */
.cyb-stage {
    display: grid;
    grid-template-columns: 1fr auto 1fr;   /* side | image | side */
    gap: 3%;
    padding: 2% 8% 10%;
}

/* icon + text items */
.cyb-side {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10%;
}
.cyb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 14px;
}
.cyb-icon {
    width: 90px;
    height: auto;
}
.cyb-item p {
    font-size: 2rem;
    margin: 0;
    line-height: 1.4;
}

/* centre image */
.cyb-media img {
    display: block;
    width: 100%;
    max-width: 620px;
    height: auto;
    margin: 0 auto;
}

/* button spans full width under the whole grid */
.cyb-btn-row {
    grid-column: 1 / -1;
    text-align: center;
}

/* tablet: image on top, icons in a row of 4 below */
@media screen and (max-width: 900px) {
    .cyb-stage {
        grid-template-columns: 1fr;
    }
    .cyb-media { order: -1; margin-bottom: 5%; }
    .cyb-side {
        flex-direction: row;
        justify-content: center;
        gap: 8%;
    }
    .cyb-icon { width: 72px; }
}

/* mobile: 2 icons per row */
@media screen and (max-width: 560px) {
    .cyb-side { flex-wrap: wrap; gap: 8% 12%; }
    .cyb-item { flex-basis: 40%; }
    .cyb-icon { width: 64px; }
}



.wis-hero-copy3 p {
  font-size: 1.7rem;
  font-weight: 200;
  line-height: 150%;
  color: #fff;
  max-width: 500px;
  margin-bottom: 40px;
  margin-top: 20px;

}


.hero-l1 {
    display: block;
    font-weight: 500;
    font-size: 6.8rem;
    text-align: left;
    line-height: 90%;
    letter-spacing: 0.05em;
    color: #fff;
}
.hero-l2 {
    display: block;
    margin-top: 0px;
    font-weight: 400;
        font-size: 4.9rem;
    line-height: 1.2;
    letter-spacing: 0.38em;
    color: #C8BCD6;
}
.wis-hero-copy p {
    max-width: 460px;
    margin: 28px 0 36px;
    line-height: 1.85;
    color: rgba(255,255,255,0.85);
}

.wis-hero-copy2 p {
    max-width: 460px;
    margin: 0 0 36px;
    font-size: 1.8rem;
    font-weight: 300;
    line-height: 130%;
    color: rgba(255,255,255,0.85);
}

/* ============================================
   DESIGN BANNER
   ============================================ */
   .wis-banner {
       /* max-width: 1240px; */
       margin: -82px auto 0;
       padding: 0% 10%;
       z-index: 10;
   }
.wis-banner-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr auto;
    align-items: stretch;
    background: #816e9b;
    padding: 20px clamp(22px, 3vw, 48px);
    outline: 3px solid #816e9b;
    outline-offset: 11px;
}
.wis-banner-plate {
    padding-right: clamp(14px, 2vw, 34px);
    border-right: 1px solid rgba(255,255,255,0.5);
}
.wis-banner-plate span {
    font-size: 2.6rem;
    font-family: Cormorant Garamond;
    line-height: 90%;
    color: #fff;
}
.wis-banner-blurb {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 clamp(14px, 2vw, 34px);
}
.wis-banner-blurb p {
    max-width: 370px;
    text-align: center;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.95);
}
.wis-banner-action {
    display: flex;
    align-items: center;
    padding-left: clamp(14px, 2vw, 34px);
}

/* ============================================
   BUILT WITH CARE
   ============================================ */
.wis-care {
    overflow: hidden;
    padding: 8% 0 6%;
}
.care-inner {
    position: relative;
    z-index: 2;
    /* max-width: 1240px; */
    margin: 0 auto;
    padding: 0px 10%;
}
.care-wm {
    position: absolute;
    bottom: 0;
    right: -28vw;
    height: 700px;
    width: auto;
    max-width: none;   /* <-- stops the global max-width:100% from squishing it */
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.care-wm2 {
    position: absolute;
    bottom: 0;
    right: -28vw;
    height: 600px;
    width: auto;
    max-width: none;   /* <-- stops the global max-width:100% from squishing it */
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}

.care-wm3 {
    position: absolute;
    bottom: 0;
    right: 50%;
    transform: translateX(50%);
    height: 400px;
    width: auto;
    max-width: none;   /* <-- stops the global max-width:100% from squishing it */
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}


.care-lede {
    max-width: 750px;
    margin: 2.2rem 0 4.4rem;
    line-height: 1.9;
    color: #6F687F;
}
.care-gallery {
    display: flex;
    gap: 16px;
}
.care-gallery figure {
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
    overflow: hidden;
    background: #ddd;
    height: 300px;
    transition: flex-grow 0.95s ease;
}
.care-gallery img { width: 100%; height: 100%; object-fit: cover; }

/* first image is the wide one by default */
.care-gallery figure:first-child { flex-grow: 2.9; }

/* when hovering the row, the first one shrinks back... */
.care-gallery:hover figure:first-child { flex-grow: 1; }

/* ...and whichever image is hovered becomes the wide one */
.care-gallery:hover figure:hover { flex-grow: 2.9; }

.see-gallery {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-top: 36px;
    font-size: 1.2rem;
    letter-spacing: 0.26em;
    color: #6E6880;
}
.see-gallery:after {
    content: '';
    flex: 1;
    height: 1px;
    background: #B7AECB;
}

/* ============================================
   QUALITY COMES AS STANDARD
   ============================================ */
.wis-quality {
    background: linear-gradient(to bottom, #557266 0%, #4c7564 63%, #ffffff 63%);
    color: #fff;
    padding: 7% 10% 0.5%;
}
.quality-grid {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(24px, 4vw, 64px);
    align-items: start;
    margin: 0 auto;
}
.q-left, .q-right { min-width: 0; }
.q-cutout {
    margin-left: -350px;
    width: min(900px);
    max-width: none;
    margin-top: 20.6rem;
}
.further-copy { margin-top: 5.6rem; }
.further-copy h2 {
    color: #6B5B82;
}
.further-copy .care-lede { margin-top: 2.4rem; }
.q-head { position: relative; padding-top: 7.2rem; }
.q-head h2 {
    position: absolute;
    top: 0;
    right: 0;
    letter-spacing: 0.05em;
    color: #fff;
    white-space: nowrap;
}
.q-strong { margin-top: 2.4rem; font-weight: 600; color: #fff; }
.q-soft { margin-top: 1rem; line-height: 1.9; color: rgba(255,255,255,0.88); }
.spec-frame {
    margin: 4.8rem 0 0 auto;
    width: min(100%, 478px);
    background: rgba(203, 226, 213, 0.4);
    padding: 17px;
    position: relative;
    z-index: 20;
}
.spec-card {
  background: linear-gradient(135deg, #dbece5, #b6cbc2);
    color: #3c4c45;
    padding: 42px 46px;
}
.spec-card h3 {
    font-weight: 600;
    font-size: 2.5rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    margin-bottom: 2.6rem;
}
.spec-card li {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 15px 0;
    font-size: 2.35rem;
    font-weight: 300;
    line-height: 1.2;
    font-family: 'outfit';
    border-bottom: 1px solid rgba(34, 68, 58, 0.22);
}
.spec-card li:last-child { border-bottom: none; }
.spec-card li img.spec-tick {
    flex: none;
    width: 29px;
    height: auto;
    display: block;
}

/* ============================================
   UPGRADES
   ============================================ */
.wis-upgrades { padding: 3% 0 5%; }
.upgrade-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 18px;
    margin: 0 auto;
    padding: 0 10%;
}
.up-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.6s ease, box-shadow 0.6s ease;
}

.cta-card{
  height: 100%;
  padding: 8%;
  background: linear-gradient(to bottom, #5C8273 0%, #5C8273 100%);
  color: white;
}

.card-display {
  display: none;
}

.up-card:hover,
.up-card:focus-within {
    box-shadow: 0 22px 44px rgba(58,46,82,0.18);
}
.up-ph { aspect-ratio: 4 / 5; overflow: hidden; }
.up-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* purple band pinned to the bottom — grows upward to fill the card on hover */
.up-band {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    overflow: hidden;
    background: #7C6D93;
    color: #fff;
    text-align: left;
    padding: 13px 22px;
    transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.up-card:hover .up-band,
.up-card:focus-within .up-band { height: 100%; }

/* title lives at the top of the band, so it rises as the band grows */
.up-title {
    margin: 0;
    font-size: 1.8rem;
    line-height: 1.4;
    color: #fff;
}

/* text revealed under the title */
.up-reveal {
    opacity: 0;
    transition: opacity 0.45s ease 0.15s;
}
.up-card:hover .up-reveal,
.up-card:focus-within .up-reveal { opacity: 1; }
.up-reveal p {
    margin-top: 1.4rem;
    font-size: 1.15rem;
    line-height: 1.8;
    color: rgba(255,255,255,0.88);
}
.up-reveal ul {
    list-style: none;
    margin-top: 1.4rem;
    padding: 0;
}
.up-reveal li {
    font-size: 1.2rem;
    font-weight: 500;
    padding: 5px 0;
}

/* ============================================
   CALCULATOR
   (see calculator.php / css/designer.css)
   ============================================ */

/* ============================================
   WISTERIA'S STORY
   ============================================ */
.wis-story {
    padding: 6% 0;
}
.wis-story-wrap {

    padding: 0% 10%;
}
.story-text-col { padding-right: 6%; }
.text-col-left { padding-left: 6%; }
.text-col-left2 { padding-left: 6%; }
.text-col-right { padding-right: 6%; }
.text-col-right2 { padding-right: 6%; }
.story-media-col { padding-left: 0; }
.wis-story .eyebrow { letter-spacing: 0.32em; font-size: 1.25rem; }
.wis-story .sec-title { color: #6B5B82; margin: 0.8rem 0 3.4rem;}
.story-lead {
    font-weight: 600;
    color: #4A4553;
    line-height: 1.75;
    margin-bottom: 2rem;
}
.story-body { color: #6E6E6E; }
.story-media { display: grid; gap: 18px; }
.story-top { width: 100%; height: clamp(340px, 25vw, 320px); object-fit: cover; }
.story-row { display: grid; grid-template-columns: 1.55fr 1fr; gap: 18px; }
.story-row img { width: 100%; height: clamp(200px, 20vw, 200px); object-fit: cover; }


.image-top { width: 100%; height: 290px; object-fit: cover; }
.image-top2 { width: 100%; height: 200px; object-fit: cover; }
.image-row { display: grid; grid-template-columns: 1.55fr 2fr; gap: 18px; }
.image-row img { width: 100%; height: 160px; object-fit: cover; }


.about-top1 { width: 100%; height: 257px; object-fit: cover; }
.about-img-row { display: grid; grid-template-columns: 1.55fr 2fr; gap: 18px; }
.about-img-row img { width: 100%; height: 160px; object-fit: cover; }

.about-img-row2 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.about-img-row2 img { width: 100%; height: 400px; object-fit: cover; }

.about-img-row3 { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
.about-img-row3 img { width: 100%; height: 300px; object-fit: cover; }

/* ============================================
   THE PROCESS
   ============================================ */
.wis-process {
    position: relative;
    padding: 2% 10% 7% 50%;
    overflow: visible;
}

.about-intro {
    position: relative;
    padding: 7% 10% 7% 50%;
    overflow: visible;
}

.process-art {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 50%;
 height: 100%;
 background-image: url(img/wisteria-home-process-logo.webp);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-size: contain;
 pointer-events: none;
 z-index: 1;
}

.process-art2 {
 position: absolute;
 left: 0;
 bottom: 0;
 width: 50%;
 height: 100%;
 background-image: url(img/wisteria-home-process-logo.webp);
 background-repeat: no-repeat;
 background-position: left bottom;
 background-size: contain;
 pointer-events: none;
 z-index: 1;
}

.faq-logo {
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 900px;
    height: 100%;
    background-image: url(img/wisteria-home-process-logo.webp);
    background-repeat: no-repeat;
    background-position: bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

/* Right half only. Left half stays empty for your absolute image. */
.process-content {
  margin-left: auto;
position: relative;
z-index: 4;
}

.process-head h2 {
    font-size: 5.6rem;
    letter-spacing: 0.05em;
    color: #6B5B82;
    line-height: 1.1;
}
.process-sub {
    display: block;
    margin: 1.4rem 0 4rem;
    padding-bottom: 40px;
    line-height: 1.3;
    font-size: 2rem;
    font-weight: 100;
    letter-spacing: 0.18em;
    color: #695a80;
}

.step {
    background: #fff;
    border: 1.5px solid #A493BF;
    padding: 26px 42px 24px;
    margin-bottom: 24px;
    box-shadow: 0 8px 22px rgba(58,46,82,0.06);
    transition: background-color 0.75s cubic-bezier(0.4,0,0.2,1), border-color 0.75s cubic-bezier(0.4,0,0.2,1), box-shadow 0.75s cubic-bezier(0.4,0,0.2,1), transform 0.75s cubic-bezier(0.4,0,0.2,1);
}
.step:last-child { margin-bottom: 0; }
.s-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 20px;
    margin-bottom: 1rem;
}
.step-n {
    font-size: 1.35rem;
    letter-spacing: 0.28em;
    color: #A79BC0;
    transition: color 0.35s cubic-bezier(0.4,0,0.2,1);
}
.step h4 {
    color: #6B5B82;
    transition: color 0.35s cubic-bezier(0.4,0,0.2,1);
}
.step p {
    font-size: 1.25rem;
    line-height: 1.8;
    color: #77777F;
    transition: color 0.35s cubic-bezier(0.4,0,0.2,1);
}
.step:hover, .step:focus-within {
    background: #5C8273;
    border-color: #5C8273;
    transform: translateX(-16px) scale(1.02);
    box-shadow: 0 16px 34px rgba(38,68,58,0.24);
}
.step:hover .step-n, .step:focus-within .step-n { color: rgba(255,255,255,0.7); }
.step:hover h4, .step:hover p,
.step:focus-within h4, .step:focus-within p { color: #fff; }

/* ============================================
   STAGE 04
   ============================================ */
.wis-stage4 {
    color: #fff;
    text-align: center;
    padding: 6% 10%;
}
.wis-stage4 .eyebrow { color: rgba(255,255,255,0.68); }
.wis-stage4 h2 {
    font-size: 4.2rem;
    letter-spacing: 2px;
    margin: 1.8rem 0 2rem;
    color: #fff;
}
.wis-stage4 p { max-width: 740px; margin: 0 auto; color: rgba(255,255,255,0.88); }

/* ============================================
   OTHER GARDEN ROOM OPTIONS
   ============================================ */
.oro-section {
    padding: 5% 8%;
}

/* left half — 2x2 grid of room boxes */
.oro-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
}
.oro-box {
    position: relative;
    display: block;
    overflow: hidden;
    height: 180px;          /* fixed height instead of width-driven ratio */
}
.oro-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.oro-box:hover img { transform: scale(1.05); }
.oro-meta {
    position: absolute;
    left: 24px;
    bottom: 22px;
    z-index: 1;
}
.oro-meta h4 {
    margin-bottom: 4px;
}
.oro-go {
    color: rgba(255,255,255,0.85);
    font-size: 1.1rem;
    letter-spacing: 2px;
}

/* right half — text block */
.oro-text-col {
    padding-left: 8%;
}
.oro-intro {
    margin-top: 2rem;
}


.hocta-banner2 {
    padding: 60px 80px;                 /* room for the offset frame */
    position: relative;      /* keeps the banner stacked above the block */
z-index: 1;
margin-top: -200px;   /* half of the block's height */
}

.hocta-plate2 {
    position: relative;
    padding: 5% 7%;
    background: #8ba79b;
}


.hocta-plate2::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    border: 3px solid #8ba79b;      /* plum line, visible against the white page */
    pointer-events: none;
}

.hocta-plate2 h5 {
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.6;
}

.design-your-own-bar {
  padding: 5%;
}

.design-your-own-bar h2 {
    font-size: 4rem;
}


/* ============================================
   HOME OFFICE CTA BANNER
   ============================================ */
.hocta-banner {
    padding: 60px 80px;                 /* room for the offset frame */
    position: relative;      /* keeps the banner stacked above the block */
z-index: 1;
margin-bottom: -230px;   /* half of the block's height */
}
.hocta-plate {
    position: relative;
    padding: 5% 7%;
    background: linear-gradient(135deg, #6f6083 0%, #8a7ca0 55%, #9c8fb2 100%);
}

.hocta-plate h5 {
    font-size: 1.8rem;
    font-weight: 200;
    line-height: 1.6;
}

.hocta-plate::before {
    content: '';
    position: absolute;
    top: -18px;
    left: -18px;
    right: -18px;
    bottom: -18px;
    border: 3px solid #8a7ca0;      /* plum line, visible against the white page */
    pointer-events: none;
}

/* title spacing */
.hocta-title {
    margin-bottom: 2rem;
    font-size: 4.2rem;
    letter-spacing: 3px;
}

.hocta-block {
    height: 250px;
    background: #3f354f;
}

/* buttons */
.hocta-btns {
    margin-top: 2.4rem;
    display: flex;
    justify-content: center;
    gap: 18px;
    flex-wrap: wrap;
}
.hocta-btn {
    display: inline-block;
    padding: 12px 28px;
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.6rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-align: center;
    cursor: pointer;
    margin-top: 8px;
    transition: opacity 0.25s ease;
}
.hocta-btn:hover { opacity: 0.88; }
.hocta-btn-light { background: #cdbfe0; color: #43384f; }
.hocta-btn-dark  { background: #3a2f4a; color: #fff; }



/* ============================================
   RECENT BUILDS CAROUSEL
   ============================================ */
.rb-carousel { position: relative; }
.rb-viewport { overflow: hidden; }
.rb-track {
    display: flex;
    transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1);
}
.rb-slide {
    flex: 0 0 30%;              /* narrower than a third, so neighbours peek */
    padding: 0 10px;
    opacity: 0.3;              /* faded until active */
    transition: opacity 0.5s ease;
}
.rb-slide.rb-active { opacity: 1; }
.rb-slide img {
    width: 100%;
    aspect-ratio: 1 / 1;       /* square */
    height: auto;
    object-fit: cover;
    display: block;
}

.recent-builds {
  padding: 7% 0% 7%;
}

/* controls row — arrows on the same line as the button */
.rb-controls {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 3% 6%;
}
.rb-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    font-size: 2.4rem;
    line-height: 1;
    cursor: pointer;
    color: #5C8273;
    transition: opacity 0.2s ease;
}
.rb-arrow:hover { opacity: 0.6; }
.rb-prev { left: 0; }
.rb-next { right: 0; }

/* tablet: 2 across */
@media screen and (max-width: 900px) {
    .rb-slide { flex-basis: 44%; }
}


/* ============================================
   HOME OFFICE UPGRADES MOSAIC
   ============================================ */
.ho-upgrades {
    width: 100%;
    flex-basis: 100%;
    clear: both;
    display: grid;
    grid-template-columns: repeat(5, 1fr);   /* left=2 cols, right side=3 cols */
    grid-template-rows: repeat(2, 1fr);
    gap: 20px;
    margin-top: 165px;
}

.ho-up {
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 300px;
    text-decoration: none;
}
.ho-up img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s ease;
}
.ho-up:hover img { transform: scale(1.05); }

.ho-up-label {
    position: absolute;
    left: 26px;
    bottom: 22px;
    z-index: 1;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 300;
    font-size: 1.7rem;
}

/* big left tile — 2 cols wide, full height */
.ho-up-tall { grid-column: 1 / 3; grid-row: 1 / 3; }

/* top row: WIDE (2) + narrow (1) */
.ho-up:nth-of-type(2) { grid-column: 3 / 5; grid-row: 1; }   /* Extra Windows (wide) */
.ho-up:nth-of-type(3) { grid-column: 5 / 6; grid-row: 1; }   /* Lighting Options (narrow) */

/* bottom row: narrow (1) + WIDE (2) — mirrored */
.ho-up:nth-of-type(4) { grid-column: 3 / 4; grid-row: 2; }   /* Exterior Lighting (narrow) */
.ho-up:nth-of-type(5) { grid-column: 4 / 6; grid-row: 2; }   /* Full-height glazing (wide) */

/* ============================================
   WHAT WILL YOU PICK (ROOM TYPES)
   ============================================ */
.wis-picks {
    padding: 6% 0 5%;
    overflow: hidden;
}
.picks-head {
    position: relative;
    /* max-width: 1240px; */
    margin: 0 auto 5.6rem;
    padding: 0 10%;
}
.picks-head .sec-title { margin-bottom: 0; }
.picks-intro {
    max-width: 850px;
    margin-top: 2.2rem;
    line-height: 1.9;
}
.picks-nav {
    position: absolute;
    right: clamp(20px, 4vw, 48px);
    bottom: 4px;
    display: flex;
    gap: 30px;
}
.picks-nav button {
    background: none;
    border: none;
    color: #7C6D93;
    font-size: 1.7rem;
    line-height: 1;
    padding: 6px;
    cursor: pointer;
    transition: transform 0.2s, color 0.2s;
}
.picks-nav button:hover { color: #5A4D73; transform: scale(1.2); }



.arrows-white button {
    color: #fff !important;
}

.picks-shell {
    margin-left: 10%;
}
.picks-track {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    padding-bottom: 6px;
}
.picks-track::-webkit-scrollbar { display: none; }
.pick {
    position: relative;
    flex: 0 0 clamp(420px, 40.5vw, 590px);
    height: 325px;
    overflow: hidden;
    scroll-snap-align: start;
    color: #fff;
    display: flex;
    align-items: flex-end;
    isolation: isolate;
}
.pick img {
    position: absolute;
    inset: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.pick:after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background: linear-gradient(16deg, rgba(66,96,84,0.92) 0%, rgba(66,96,84,0.5) 42%, rgba(74,104,92,0.12) 78%, rgba(74,104,92,0.02) 100%);
}
.pick:hover img { transform: scale(1.04); }
.pick-meta { padding: 30px 38px; width: 100%; }
.pick-meta h4 { font-size: 2.1rem; margin-bottom: 1.2rem; color: #fff; }
.pick-mini { max-width: 440px; font-size: 1.3rem; line-height: 1.75; color: rgba(255,255,255,0.92); margin-bottom: 0; }
.pick-rule { width: min(92%, 470px); height: 1px; background: rgba(206,211,209,1); margin: 2rem 0 1.6rem; }
.pick-go { font-size: 1.2rem; letter-spacing: 0.28em; color: #ced3d1; }



/* ============================================
   GUARANTEES 2x2
   ============================================ */
.wgg-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;                         /* boxes sit flush like the design */
}
.wgg-box {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 150px;
    padding: 30px;
    background: #fff;
    border: 1px solid #6B5B82;
    margin: -0.5px;                 /* collapse shared borders */
    z-index: 20;
    transition: background 0.6s ease, color 0.6s ease, border-color 0.6s ease;
}

.overflow-hidden {
  overflow: hidden;
}


.wgg-big {
    font-size: 4rem;
    color: #6B5B82;
    margin-bottom: 0.8rem;
    transition: color 0.6s ease;
}
.wgg-sub {
    font-size: 1.5rem;
    letter-spacing: 4px;
    color: #9a90ab;
    transition: color 0.6s ease;
}

/* idle: the pre-filled purple box */
.wgg-active { background: #6B5B82; }
.wgg-active .wgg-big,
.wgg-active .wgg-sub { color: #fff; }

/* hover the grid: reset all to white... */
.wgg-grid:hover .wgg-box { background: #fff; }
.wgg-grid:hover .wgg-box .wgg-big { color: #6B5B82; }
.wgg-grid:hover .wgg-box .wgg-sub { color: #9a90ab; }

/* ...fill only the hovered box */
.wgg-grid:hover .wgg-box:hover { background: #6B5B82; }
.wgg-grid:hover .wgg-box:hover .wgg-big,
.wgg-grid:hover .wgg-box:hover .wgg-sub { color: #fff; }





/* ============================================
   TESTIMONIALS
   ============================================ */
.wis-testimonials {
    text-align: center;
    padding-top: clamp(80px, 9vw, 120px);
    padding-bottom: clamp(80px, 9vw, 120px);
}
.testi-inner {
    padding: 0% 10%;
}
.wis-testimonials .eyebrow {
    color: #8B80A0;
}
.wis-testimonials .sec-title {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-weight: 500;
    color: #6B5B82;
    margin: 1.6rem 0 4.4rem;
}
.t-shell {
    position: relative;

}
.t-quote .strong {
    font-size: 1.9rem;
    font-weight: 600;
    line-height: 1.5;
    margin-bottom: 1.6rem;
    color: #3B3B3B;
}
.t-quote .strong span {
    font-weight: 300;
    color: #6E6E6E;
}
.t-quote .body {
    /* max-width: 620px; */
    /* margin: 0 auto; */
    padding: 0 10%;
    font-size: 2.6rem;
    line-height: 1.9;
    color: #6E6E6E;
}
.t-stars {
    margin: 3rem 0 1.4rem;
    color: #7C6D93;
    font-size: 2.9rem;
    letter-spacing: 9px;
    padding-left: 9px;
}
.t-name {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: 1.8rem;
    color: #6B5B82;
}
.t-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #7C6D93;
    font-size: 2rem;
    line-height: 1;
    padding: 12px;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.t-arrow:hover {
    transform: translateY(-50%) scale(1.25);
}
.t-arrow.prev {
    left: 0;
}
.t-arrow.next {
    right: 0;
}

.t-track {
    display: grid;
    overflow: hidden;
}
.t-quote {
    grid-area: 1 / 1;          /* stack every slide in the same cell */
    transition: opacity 1.4s cubic-bezier(0.65, 0, 0.35, 1),
                transform 1.4s cubic-bezier(0.65, 0, 0.35, 1);
    will-change: opacity, transform;
}
.t-quote:not(.active) {
    pointer-events: none;
}


/* ---------- shared variables (square corners + rhythm) ---------- */
:root #wis-form-light .cog-form,
:root #wis-form-plum  .cog-form {
    --border-radius: 0;
    --input__border-radius: 0;
    --button__border-radius: 0;
    --input__border-width: 1px;
    --input__padding-v: 15px;
    --input__padding-h: 18px;
    --gutter: 16px;
    --speed: .25s;
}


/* ============================================================
   LIGHT SECTION — "Get In Touch"
   Matches the old .contact-form: #e8e2f1 fields, plum accents
   ============================================================ */
:root #wis-form-light .cog-form {
    --input__background-color: #e8e2f1;
    --input__color: #3B3B3B;
    --input__border-color: transparent;
    --highlight: #7C6D93;   /* focus / active */
    --negative: #b3261e;    /* validation errors */
}

#wis-form-light .cog-label {
    color: #695a80;
    font-family: 'Outfit', sans-serif;
    font-weight: 400;
    font-size: 1.25rem;
}

#wis-form-light .el-input__inner,
#wis-form-light .el-textarea__inner {
    background: #e8e2f1;
    color: #3B3B3B;
    border: 1px solid transparent;
    box-shadow: 0 14px 34px rgba(58, 46, 82, 0.12);
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
}
#wis-form-light .el-input__inner::placeholder,
#wis-form-light .el-textarea__inner::placeholder { color: #A6A6A6; }
#wis-form-light .el-input__inner:focus,
#wis-form-light .el-textarea__inner:focus { border-color: #7C6D93; }
#wis-form-light .el-textarea__inner { min-height: 130px; }

/* submit — mirrors .btn.solid */
#wis-form-light .cog-button--primary {
    background: #7C6D93;
    border: 1px solid #7C6D93;
    color: #fff;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 15px 40px;
    transition: background-color .25s ease, border-color .25s ease;
}
#wis-form-light .cog-button--primary:hover {
    background: #5A4D73;
    border-color: #5A4D73;
}


/* ============================================================
   PLUM SECTION — "Send us a message"
   White fields + white labels on the plum gradient
   ============================================================ */
:root #wis-form-plum .cog-form {
    --input__background-color: #ffffff;
    --input__color: #3B3B3B;
    --input__border-color: transparent;
    --highlight: #ffffff;
    --negative: #ffd7d3;
}

/* section already has its own <h2>/<p>, so hide the form's title/logo */
#wis-form-plum .cog-header { display: none; }

#wis-form-plum .cog-label,
#wis-form-plum .cog-section__heading,
#wis-form-plum .cog-helptext {
    color: #fff;
    font-family: 'Outfit', sans-serif;
}
#wis-form-plum .cog-label { font-weight: 500; }

#wis-form-plum .el-input__inner,
#wis-form-plum .el-textarea__inner {
    background: #fff;
    color: #3B3B3B;
    border: 1px solid transparent;
    box-shadow: 0 14px 34px rgba(30, 22, 48, 0.22);
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
}
#wis-form-plum .el-input__inner::placeholder,
#wis-form-plum .el-textarea__inner::placeholder { color: #A6A6A6; }
#wis-form-plum .el-textarea__inner { min-height: 130px; }

/* file-upload field — light text/border so it reads on the gradient */
#wis-form-plum .cog-file,
#wis-form-plum .cog-file .cog-button {
    color: #fff;
    border-color: rgba(255,255,255,0.6);
}

/* submit — light button, plum text (a solid #7C6D93 is too low-contrast
   against the gradient). Matches the current cream button in your mock. */
#wis-form-plum .cog-button--primary {
    background: #fff;
    border: 1px solid #fff;
    color: #5A4D73;
    font-size: 1.1rem;
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 15px 40px;
    transition: background-color .25s ease, color .25s ease;
}
#wis-form-plum .cog-button--primary:hover {
    background: #C8BCD6;
    color: #403551;
}

.contact-form-wrap {
  max-width: 800px;
  margin: 0 auto;
}
/* ============================================
   CONTACT
   ============================================ */
.wis-contact {
    padding-top: calc(clamp(80px, 9vw, 120px) * 0.85);
    padding-bottom: clamp(80px, 9vw, 120px);
}
.contact-inner {
    max-width: 1240px;
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}
.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1.05fr;
    gap: clamp(40px, 6vw, 100px);
}
.wis-contact .sec-title {
    font-weight: 600;
    color: #695a80;
    margin-bottom: 2.4rem;
}
.contact-blurb {
    max-width: 400px;
    line-height: 1.9;
    color: #6E6E6E;
    margin-bottom: 4rem;
}
.c-line {
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 11px 0;
    font-size: 1.8rem;
    font-weight: 400;
    color: #695a80;
}
.c-line .ic {
    flex: none;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #7c6d93;
    /* border: 1px solid #E7E4DE; */
    color: #fff;
}
.contact-form .field {
    margin-bottom: 16px;
}
.contact-form input,
.contact-form textarea {
    width: 100%;
    border: 1px solid transparent;
    background: #e8e2f1;
    box-shadow: 0 14px 34px rgba(58, 46, 82, 0.12);
    padding: 15px 18px;
    font-family: 'Poppins', Helvetica, Arial, sans-serif;
    font-weight: 300;
    font-size: 1.3rem;
    color: #3B3B3B;
    transition: border-color 0.2s ease;
}
.contact-form input::placeholder,
.contact-form textarea::placeholder {
    color: #A6A6A6;
}
.contact-form textarea {
    min-height: 130px;
    resize: vertical;
}
.contact-form input:focus,
.contact-form textarea:focus {
    outline: none;
    border-color: #7C6D93;
}
.contact-form .btn {
    margin-top: 6px;
    padding: 14px 40px;
}

/* solid button (contact submit) */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    padding: 15px 34px;
    border: 1px solid currentColor;
    background: transparent;
    color: inherit;
    cursor: pointer;
    transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.btn.solid {
    background: #7C6D93;
    border-color: #7C6D93;
    color: #fff;
}
.btn.solid:hover {
    background: #5A4D73;
    border-color: #5A4D73;
}

.btn-green {
    display: inline-block;
    background: #8ba79b;
    color: #fff;
    font-family: 'Cormorant Garamond';
    font-size: 1.6rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 10px 30px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
    transition: background 0.25s ease, transform 0.15s ease;
}
.btn-green:hover {
    background: #7a978b;   /* slightly darker on hover */
    color: #fff;
}
.btn-green:active {
    transform: translateY(1px);
}


.btn-green2 {
    display: inline-block;
    background: #c4d9d0;
    color: #40534b;
    font-family: 'Cormorant Garamond';
    font-size: 1.8rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    padding: 14px 52px;
    border: none;
    cursor: pointer;
    text-decoration: none;
    text-transform: capitalize;
    transition: background 0.25s ease, transform 0.15s ease;
}
.btn-green2:hover {
    background: #40534b;   /* slightly darker on hover */
    color: #c4d9d0;
}
.btn-green2:active {
    transform: translateY(1px);
}

/* ============================================
   FOOTER - CLIENT COLOURS
   ============================================ */
.footer { color: #fff; padding-left: 7%; padding-right: 7%; background-color: #695a80;}
.footer h4 { color: #C8BCD6; }
.footer a:hover { color: #C8BCD6; }
.footer-logo img { max-height: 150px; width: auto; margin-bottom: 1.6rem; }

.footer-bottom {
    background: #4F4365;
    color: rgba(255,255,255,0.75);
    padding: 18px 7%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}
.footer-bottom .veracity {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: 'Exo 2', sans-serif;
    font-size: 1.2rem;
}
.footer-bottom .veracity-v img { height: 18px; width: auto; }
.footer-bottom .copyright { font-size: 1.2rem; margin: 0; }

/* ============================================
   FOOTER SEO KEYWORD BAR
   ============================================ */
.footer-keywords { background: #3E3550; padding: 14px 7%; }
.footer-keywords-inner {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 34px;
    justify-content: center;
}
.fk-item {
    font-size: 1.15rem;
    letter-spacing: 0.06em;
    color: rgba(255,255,255,0.55);
    transition: color 0.3s;
}
.fk-item:hover { color: #C8BCD6; }


@media only screen and (min-width:1250px) {


  h1 { font-size: 6rem; }
  h2 { font-size: 5.3rem; line-height: 100% !important; }
  h3 { font-size: 3.6rem; }
  h4 { font-size: 3rem; line-height: 130%;}
  h5 { font-size: 1.8rem; line-height: 150%;}
  h6 { font-size: 1.2rem; }
  p  { font-size: 1.5rem; font-weight: 300; line-height: 1.85; margin-bottom: 1.6rem; font-family: 'outfit', sans-serif; }

  .logo {
      display: block;
      width: 300px;
      height: 125px;
      background: url(img/Wisteria-Garden-Room-White.svg);
      background-size: contain;
      background-position: left center;
      background-repeat: no-repeat;
      position: absolute;
      left: 7%;
      top: 26px;
      z-index: 10;
  }


  .wis-hero-copy3 h1 {
      display: block;
      font-weight: 500;
      font-size: 6.3rem;
      line-height: 94%;
      color: #fff;
  }

  .wis-hero-copy3 h3 {
    font-size: 3.7rem;
    display: block;
    font-weight: 200;
    line-height: 1.1;
    letter-spacing: 0.1em;
    color: #e2d9ee;
}


  .wis-hero-copy p {
      max-width: 580px;
      margin: 18px 0 36px;
      line-height: 1.85;
      color: rgba(255, 255, 255, 0.85);
  }

  .hero-l2 {
    display: block;
    margin-top: 0px;
    font-weight: 400;
    font-size: 5.3rem;
    line-height: 1.2;
    letter-spacing: 0.38em;
    color: #C8BCD6;
}


.hero-l1 {
    display: block;
    font-weight: 500;
    font-size: 7.4rem;
    text-align: left;
    line-height: 90%;
    letter-spacing: 0.05em;
    color: #fff;
}

.wis-banner-plate span {
    font-size: 3.6rem;
    font-family: Cormorant Garamond;
    line-height: 120%;
    color: #fff;
}

.wis-banner-blurb p {
    max-width: 370px;
    text-align: center;
    font-size: 1.5rem;
    line-height: 1.8;
    color: rgba(255, 255, 255, 0.95);
}

.wis-banner-inner {
    display: grid;
    grid-template-columns: 1fr 1.1fr auto;
    align-items: stretch;
    background: #816e9b;
    padding: 32px clamp(22px, 3vw, 48px);
    outline: 3px solid #816e9b;
    outline-offset: 11px;
}

/* End of home */

/* HEIGHTS */



.padlr {
    padding-left: 7%;
    padding-right: 7%;
}


.footer-box2 h3 {
    font-size: 17px;
    color: #bababa;
}

.footer-box2 h2 {
    font-size: 29px;
    font-weight: bold;
    color: #9dc958;
    padding-bottom: 2%;
}

.footer-box3 h2 {
    font-size: 29px;
    font-weight: bold;
    color: #9dc958;
    padding-bottom: 2%;
}

.footer-contact h3 {
    font-size: 19px;
    color: #bababa;
    font-weight: bold;
    float: left;
    padding-top: 1.8%;
}

.footer-contact2 h3 {
    font-size: 19px;
    color: #bababa;
    font-weight: bold;
    float: left;
    padding-top: 1.1%;
}

}


/* ============================================
   RESPONSIVE - 1150px
   ============================================ */
@media (max-width: 1300px) {

  .why-us-room-cutout {
      position: absolute;
      left: -63%;
      bottom: -62%;
      width: 800px;
      height: auto;
      max-width: none;
      z-index: 2;
  }

}

/* ============================================
   RESPONSIVE - 1150px
   ============================================ */
@media (max-width: 1150px) {
    .process-grid { grid-template-columns: minmax(0, 0.72fr) minmax(0, 1.28fr); }

    h1 { font-size: 5.4rem; }
h2 { font-size: 4.5rem; }
h3 { font-size: 3.0rem; }
h4 { font-size: 2.4rem; }
h5 { font-size: 1.8rem; }
h6 { font-size: 1.15rem; }
p  { font-size: 1.4rem; }


.p-stage1-logo {
    right: -30vw;

}

.why-us-room-cutout {
    position: absolute;
    left: -75%;
    bottom: -45%;
    width: 700px;
    height: auto;
    max-width: none;
    z-index: 2;
}


.care-wm2 {
    right: -28vw;
    height: 500px;
}


.wte-grid {
    grid-template-columns: 1fr;
}

.wte-img {
    width: 100%;
    height: 400px;
    object-fit: cover;
    display: block;
}

.p-share {
    width: 46%;
    background: #8ba79b;
    padding: 48px 44px 54px;
    margin-top: -358px;
    margin-bottom: 50px;
    position: relative;
    z-index: 3;
}

.process-art {
    position: absolute;
    left: -19%;
    bottom: 0;
    width: 70%;
    height: 100%;
    background-image: url(img/wisteria-home-process-logo.webp);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.process-art2 {
    position: absolute;
    left: -7%;
    bottom: 0;
    width: 70%;
    height: 100%;
    background-image: url(img/wisteria-home-process-logo.webp);
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.q-cutout {
    margin-left: -370px;
    width: min(900px);
    max-width: none;
    margin-top: 18.6rem;
}

.q-head {
    position: relative;
    padding-top: 5.2rem;
}


.wgg-box {
    padding: 20px;
  }

}

/* ============================================
   RESPONSIVE - 1080px
   ============================================ */
@media (max-width: 1080px) {
    .upgrade-row { grid-template-columns: repeat(3, 1fr); }
    .care-gallery { display: grid; grid-template-columns: 1fr 1fr; }
    .care-gallery figure { height: clamp(180px, 26vw, 240px); }
    .t-arrow.prev { left: -8px; }
    .t-arrow.next { right: -8px; }
    .hero-l1 {
        display: block;
        font-weight: 500;
        font-size: 5.8rem;
        text-align: left;
        letter-spacing: 0.05em;
        color: #fff;
    }

    .image-top {
    width: 100%;
    height: 357px;
    object-fit: cover;
}

    .card-display {
      display: block;
    }

    .hero-l2 {
        display: block;
        margin-top: 0px;
        font-weight: 400;
            font-size: 3.9rem;
        line-height: 1.2;
        letter-spacing: 0.25em;
        color: #C8BCD6;
    }

    .spec-card li {
    display: flex;
    align-items: center;
    gap: 26px;
    padding: 13px 0;
    font-size: 2rem;
    font-weight: 300;
    line-height: 1.2;
    font-family: 'outfit';
    border-bottom: 1px solid rgba(34, 68, 58, 0.22);
}

.q-cutout {
    margin-left: -348px;
    width: min(800px);
    max-width: none;
    margin-top: 26.6rem;
}
}

/* ============================================
   RESPONSIVE - 900px
   ============================================ */
@media (max-width: 900px) {

  h1 { font-size: 4.8rem; }
h2 { font-size: 4.1rem;}
h3 { font-size: 3rem; }
h4 { font-size: 2.3rem; }
h5 { font-size: 1.6rem; }
h6 { font-size: 1.1rem; }
p  { font-size: 1.35rem; }

.focus-grid { grid-template-columns: 1fr; gap: 32px; }
.focus-text p { max-width: none; }


.cr-grid { grid-template-columns: 1fr; gap: 22px; }


.guarantees .half {
  width: 100%;
}




.about-img-row2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.about-img-row2 img { width: 100%; height: 220px !important; object-fit: cover; }

.about-img-row3 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.about-img-row3 img { width: 100%; height: 160px !important; object-fit: cover; }



.faqs-section .half {
width: 100%;
}

.faq-logo {
opacity: 0.05;
}


.why-us-room-cutout {
    position: absolute;
    left: 0%;
    bottom: -33%;
    width: 100%;
    height: auto;
    max-width: none;
    z-index: 2;
}

.s4-icon {
    width: 52px;
    height: auto;
    margin: 0 auto 20px;
}

.s4-step {
    padding: 0 4%;
    align-content: center;
    align-items: center;
    text-align: center;
}


.testimonial .half {
  width: 100%;
}

.made-in-hampshire-img {
    background-position: -320px 100px;
}

.p-stage1-half {
  width: 100%;
}


.care-wm2 {
    right: -28vw;
    height: 500px;
}

.p-stage1-logo {
    position: absolute;
    bottom: -5px;
    right: 0vw;
    height: 451px;
    width: auto;
    max-width: none;
    opacity: 1;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}


.p-share {
    width: 54%;
    background: #8ba79b;
    padding: 48px 44px 54px;
    margin-top: -400px;
    margin-bottom: 50px;
    position: relative;
    z-index: 3;
}

.cyb-stage {
    padding: 2% 8% 35%;
}

.cyb-item {
    flex-basis: 40%;
}


.wis-story .sec-title {
    color: #6B5B82;
    margin: 5.8rem 0 3.4rem;
}

.focus-abs-img {
    position: absolute;
    left: 0;
    bottom: -22%;
    width: 102%;
    height: auto;
    max-width: none;
    z-index: 2;
}

.wis-focus-mob-fix1 {
  padding-bottom: 300px !important;
  padding-top: 0 !important;
}

.wis-focus-mob-fix2 {
  padding-top: 300px !important;
    padding-bottom: 0 !important;
}

    .ho-upgrades {
        grid-template-columns: repeat(2, 1fr);
        grid-template-rows: none;
        margin-top: 175px;
    }
    .ho-up-tall { grid-column: 1 / -1; grid-row: auto; min-height: 320px; }
    .ho-up:nth-of-type(2),
    .ho-up:nth-of-type(3),
    .ho-up:nth-of-type(4),
    .ho-up:nth-of-type(5) { grid-column: auto; grid-row: auto; }

.care-wm {
    position: absolute;
    bottom: 0;
    right: -79vw;
    height: 700px;
    width: auto;
    max-width: none;
    opacity: 0.05;
    z-index: 1;
    pointer-events: none;
    user-select: none;
}


.wis-banner {
    margin: -122px auto 0;
}

.contact-blurb {
    max-width: 100%;
}

.wis-picks {
    padding: 10% 0 10%;
    overflow: hidden;
}

.picks-intro {
    max-width: 500px;
    margin-top: 2.2rem;
    line-height: 1.9;
}

    .wis-banner-inner { grid-template-columns: 1fr; text-align: center; }
    .wis-banner-plate { border-right: none; padding-right: 0; padding-bottom: 0px; }
    .wis-banner-plate span {
    font-size: 3.6rem;
    font-family: Cormorant Garamond;
    line-height: 90%;
    color: #fff;
}
    .wis-banner-blurb { padding: 20px 0; }
    .wis-banner-action { justify-content: center; padding: 6px 0 0; }

    .quality-section, .wis-quality { background: linear-gradient(to bottom, #5C8273 0%, #5C8273 75%, #ffffff 75%); }
    .quality-grid { display: flex; flex-direction: column; gap: 44px; }
    .q-left, .q-right { display: contents; }
    .q-head { order: 1; padding-top: 50px; text-align: left; }
    .spec-frame { order: 2; margin: 0; }
    .q-cutout {
            order: 3;
            margin-left: -88px;
            width: 125%;
            margin-top: 0;
        }
    .further-copy { order: 4; margin-top: 0; margin-bottom: 25px;}
    .q-head h2 { position: static; white-space: normal; }

    .spec-frame {
        margin: 4.8rem 0 0 auto;
        width: min(100%);
        background: rgba(203, 226, 213, 0.4);
        padding: 17px;
        position: relative;
        z-index: 20;
    }


    .process-grid { grid-template-columns: 1fr; }

    .wis-story .half { width: 100%; float: none; }
    .story-text-col { padding-right: 0; margin-bottom: 4rem; }

      .text-col-left { padding-left: 0; margin-bottom: 4rem; }

      .text-col-right { padding-right: 0; margin-bottom: 4rem; }

    .contact-grid { grid-template-columns: 1fr; }

    .hero-l1 {
        display: block;
        font-weight: 500;
        font-size: 5rem;
        line-height: 90%;
        text-align: left;
        letter-spacing: 0.05em;
        color: #fff;
    }

    .wis-process {
    position: relative;
    padding: 2% 10% 10% 10%;
    overflow: visible;
}

.process-art {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/wisteria-home-process-logo.webp);
    opacity: 0.05;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

.process-art2 {
    position: absolute;
    left: -27%;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-image: url(img/wisteria-home-process-logo.webp);
    opacity: 1;
    background-repeat: no-repeat;
    background-position: left bottom;
    background-size: contain;
    pointer-events: none;
    z-index: 1;
}

}

/* ============================================
   RESPONSIVE - 750px
   ============================================ */
@media (max-width: 750px) {
    .upgrade-row { grid-template-columns: repeat(2, 1fr); }
    .pick { flex-basis: min(86vw, 480px); }

    .picks-intro {
    max-width: 400px;
    margin-top: 2.2rem;
    line-height: 1.9;
}

.why-us-room-cutout {
    position: absolute;
    left: 0%;
    bottom: -19%;
    width: 100%;
    height: auto;
    max-width: none;
    z-index: 2;
}

.about-img-row {
    display: grid;
    grid-template-columns: 1fr;
    gap: 18px;
}

.made-in-hampshire-img {
    background-position: -380px 100px;
}

.p-share {
    width: 66%;
}


.about-img-row2 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.about-img-row2 img { width: 100%; height: 250px !important; object-fit: cover; }

.about-img-row3 { display: grid; grid-template-columns: 1fr; gap: 18px; }
.about-img-row3 img { width: 100%; height: 227px !important; object-fit: cover; }



.focus-abs-img {
    position: absolute;
    left: 0;
    bottom: -16%;
    width: 100%;
    height: auto;
    max-width: none;
    z-index: 2;
}

.wis-process {
    padding: 8% 10% 10% 10%;
}

.about-intro {
    padding: 8% 10% 70% 10%;
}

.process-art2 {
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        height: 52%;
        background-image: url(img/wisteria-home-process-logo.webp);
        opacity: 1;
        background-repeat: no-repeat;
        background-position: left bottom;
        background-size: contain;
        pointer-events: none;
        z-index: 1;
    }
}

/* ============================================
   RESPONSIVE - 610px
   ============================================ */
@media (max-width: 610px) {

  h1 { font-size: 4.8rem; }
h2 { font-size: 4rem; }
h3 { font-size: 2.5rem; }
h4 { font-size: 2rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.05rem; }
p  { font-size: 1.3rem; }

.logo {
    display: block;
    width: 300px;
    height: 94px;
    background: url(img/Wisteria-Garden-Room-White.svg);
    background-size: contain;
    background-position: left center;
    background-repeat: no-repeat;
    position: absolute;
    left: 7%;
    top: 26px;
    z-index: 10;
}

.hampshire-img {
  background-image: url(img/based-in-hampshire-mob.webp);
  background-size: cover;
  background-position: center;
}

.about-img-row {
    display: grid;
    grid-template-columns: 1.55fr 2fr;
    gap: 18px;
}


.calc-padding {
  padding-top: 27%;
  padding-bottom: 5%;
}


.about-img-row2 { display: grid; grid-template-columns: 1fr 2fr; gap: 18px; }
.about-img-row2 img { width: 100%; height: 250px !important; object-fit: cover; }

.about-img-row3 { display: grid; grid-template-columns: 2fr 1fr; gap: 18px; }
.about-img-row3 img { width: 100%; height: 227px !important; object-fit: cover; }



.text-col-left2 { padding-left: 0; margin-bottom: 4rem; }


.faqs-main {
    background-image: url(img/faqs-main-mob.webp);
    background-size: cover;
    background-position: center;
}

.gym-main {
  background-image: url(img/gym-room-main-mob.webp);
  background-size: cover;
  background-position: center;
}

.annexe-main {
    background-image: url(img/annexe-main-mob.webp);
    background-size: cover;
    background-position: center;
}

.studio-main {
    background-image: url(img/studio-main-mob.webp);
    background-size: cover;
    background-position: center;
}

.bar-main {
    background-image: url(img/bar-main-mob.webp);
    background-size: cover;
    background-position: center;
}


.not-sure-yet-img {
    background-image: url(img/used-for-img4-mob.webp);
    background-size: cover;
    background-position: center;
}


.not-sure-padding {
    padding: 10% 10% 80% 8%;
}

.used-for-hero h1 {
  font-size: 5rem !important;
}

.used-for-main {
    background-image: url(img/used-for-main-mob.webp);
    background-size: cover;
    background-position: center;
}

.why-main {
    background-image: url(img/why-wisteria-main-mob.webp);
    background-size: cover;
    background-position: center;
}


.hocta-plate {
    position: relative;
    padding: 12% 9%;
    background: linear-gradient(135deg, #6f6083 0%, #8a7ca0 55%, #9c8fb2 100%);
}


.hocta-plate2 {
    position: relative;
    padding: 12% 9%;
    background: #8ba79b;
}



.gallery-main {
  background-image: url(img/gallery-main-mob.webp);
  background-size: cover;
  background-position: center;
}

.process-main {
    background-image: url(img/process-main-mob.webp);
    background-size: cover;
    background-position: center;
}


.testimonials-main {
  background-image: url(img/testimonials-main-mob.webp);
  background-size: cover;
  background-position: center;
}



      .text-col-right2 { padding-right: 0; margin-bottom: 4rem; }


.design-your-own-bar {
    padding: 12% 8%;
}

.ts-stars {
    font-size: 2.5rem;
    letter-spacing: 6px;
    margin-bottom: 1.2rem;
}


.ts2-text-col {
    padding-right: 0%;
    padding-bottom: 70px;
}

.contact-main {
  background-image: url(img/contact-main-mob.webp);
  background-size: cover;
  background-position: center;
}


.uf-media { grid-template-columns: 1fr; }
.uf-tall img { height: 300px; }
.uf-stack img { height: 220px; }

.mih-height {
  height: 1650px;
}




.made-in-hampshire-img {
    background-position: -151px 700px;
    background-size: 1300px;
}

.wgg-grid { grid-template-columns: 1fr; }


.rb-slide { flex-basis: 80%; }
.rb-arrow { font-size: 2rem; }
.wte-text-col { padding-left: 0; margin-top: 8%; }
.wte-grid { gap: 26px 20px; }
.wte2-col { padding-left: 0; margin-top: 8%; }
.wte2-label { font-size: 1.7rem; }
  .ds-fade { height: 320px; }




  .p-share {
      width: 100%;
      margin-top: -60px;
      padding: 36px 28px 40px;
  }
  .s4-step { padding: 0; }

.cr-text { max-width: 75%; }

.p-share {
        width: 90%;
        margin-top: -400px;
        margin-bottom: 90px;
    }


    .p-stage1-logo {
      opacity: 0.2;
    }


.wte-grid {
    grid-template-columns: 1fr 1fr;
}



.recent-builds {
  padding: 15% 0% 12%;
}


.oro-section {
    padding: 12% 8% 20%;
}

.office-main {
    background-image: url(img/home-office-main-mob.webp);
    background-size: cover;
    background-position: center;
}

.wis-hero3 {
    overflow: hidden;
    min-height: 900px;
    color: #fff;
}


.oro-text-col { padding-left: 0; margin-top: 8%; }


.cta-card {
    height: 100%;
    padding: 10% 8%;
}

.care-wm {
    height: 830px;
}

.care-inner {
    padding: 7% 10% 0;
}

.process-head h2 {
    letter-spacing: 0.05em;
    color: #6B5B82;
    line-height: 1.1;
}

.process-head {
  margin: 45px 0 20px;
}
.q-cutout {
    order: 3;
    margin-left: -75px;
    width: 128%;
    margin-top: 0;
}


.wis-stage4 {
    color: #fff;
    text-align: center;
    padding: 12% 10%;
}

.wis-stage4 h2 {
    font-size: 3.8rem;
    letter-spacing: 2px;
    margin: 1.8rem 0 2rem;
    color: #fff;
}

.picks-intro {
max-width: 320px;
margin-top: 2.2rem;
line-height: 1.9;
}

    .care-gallery { grid-template-columns: 1fr; }
    .care-gallery figure { height: 220px; }
    .story-row { grid-template-columns: 1fr; }
    .footer-box1, .footer-box2, .footer-box3, .footer-box4 { width: 100%; }
    .footer-bottom { justify-content: center; text-align: center; }
    .wis-hero-copy {
    position: absolute;
    z-index: 3;
    width: 85%;
    max-width: 100%;
    top: 37%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.wis-hero-copy2 {
position: absolute;
z-index: 3;
width: 85%;
max-width: 100%;
top: 34%;
left: 50%;
transform: translate(-50%, -50%);
}

.wis-hero3:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(44, 36, 59, 0.82) 0%, rgba(44, 36, 59, 0.45) 12%, rgba(44, 36, 59, 0.08) 75%, rgba(44, 36, 59, 0) 100%);
    z-index: 1;
}

.wis-hero3::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(44, 36, 59, 0.9) 0%, rgba(44, 36, 59, 0.75) 28%, rgba(44, 36, 59, 0) 75%);
    z-index: 1;
    pointer-events: none;
}

.wis-hero-copy3 {
position: absolute;
z-index: 3;
width: 85%;
max-width: 100%;
top: 38%;
left: 50%;
transform: translate(-50%, -50%);
}

.wis-story .sec-title {
    color: #6B5B82;
    margin: 5.8rem 0 3.4rem;
}

.wis-focus {
    padding: 15% 10%;
}



.hocta-banner {
    padding: 40px 50px;
    position: relative;
    z-index: 1;
    margin-bottom: -230px;
}

.hocta-banner2 {
    padding: 40px 50px;
    position: relative;
    z-index: 1;
}

.wis-hero:before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(44, 36, 59, 0.92) 0%, rgba(44, 36, 59, 0.65) 42%, rgba(44, 36, 59, 0.08) 75%, rgba(44, 36, 59, 0) 100%);
    z-index: 1;
}

.hero-l2 {
    display: block;
    margin-top: 0px;
    font-weight: 400;
    font-size: 3.9rem;
    line-height: 1.2;
    letter-spacing: 0.25em;
    color: #C8BCD6;
}

.home-main {
    background-image: url(img/hero-main-mob.webp);
}

.about-main {
    background-image: url(img/about-main-mob.webp);
}

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

.ho-upgrades {
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: none;
    margin-top: 75px;
}



}

@media (max-width: 560px) {
    .ho-upgrades { grid-template-columns: 1fr; }
    .ho-up-tall { grid-column: auto; }
    .ho-up { min-height: 240px; }
    .ho-up-label { font-size: 1.5rem; left: 20px; bottom: 18px; }
}

/* ============================================
   RESPONSIVE - 520px
   ============================================ */
@media (max-width: 520px) {

  h1 { font-size: 4.5rem; }
h2 { font-size: 3.5rem; }
h3 { font-size: 2.1rem; }
h4 { font-size: 1.8rem; }
h5 { font-size: 1.5rem; }
h6 { font-size: 1.0rem; }
p  { font-size: 1.3rem; }


.room-h-fix {
        height: 250px !important;
        min-height: 0;
    }


    .up-title {
            margin: -17px 0 0;
            font-size: 2.6rem;
            line-height: 1.4;
            color: #fff;
        }

        .up-reveal li {
    font-size: 1.7rem;
    font-weight: 500;
    padding: 12px 0;
}

    .up-band {
        position: absolute;
        text-align: center !important;
        bottom: 0;
        left: 0;
        width: 100%;
        height: 62px;
        overflow: hidden;
        background: #7C6D93;
        color: #fff;
        text-align: left;
        padding: 33px 42px;
        transition: height 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    }

    .up-reveal p {
    margin-top: 1.4rem;
    font-size: 1.45rem;
    line-height: 160%;
    color: rgba(255, 255, 255, 0.88);
}

    .q-cutout {
    order: 3;
    margin-left: -55px;
    width: 128%;
    margin-top: 0;
}

.picks-nav {
    position: absolute;
    right: clamp(20px, 4vw, 48px);
    bottom: -25px;
    display: flex;
    gap: 30px;
}


.wte-grid {
    grid-template-columns: 1fr;
}

.made-in-hampshire-img {
    background-position: -111px 800px;
    background-size: 1000px;
}


.focus-abs-img {
    position: absolute;
    left: 0;
    bottom: -12%;
    width: 100%;
    height: auto;
    max-width: none;
    z-index: 2;
}


.cta-card {
        height: 100%;
        padding: 10% 8%;
        height: 300px;
    }


    .wis-focus-mob-fix1 {
        padding-bottom: 200px !important;
        padding-top: 0 !important;
    }

    .wis-focus-mob-fix2 {
    padding-top: 200px !important;
    padding-bottom: 0 !important;
}


.hero-l1 {
    display: block;
    font-weight: 500;
    font-size: 4.2rem;
    text-align: center;
    letter-spacing: 0.05em;
    color: #fff;
}
.hero-l2 {
    display: block;
    margin-top: 0px;
    font-weight: 400;
    font-size: 3.2rem;
    line-height: 1.2;
    letter-spacing: 0.15em;
    color: #C8BCD6;
}

    .upgrade-row { grid-template-columns: 1fr; }
    .spec-card { padding: 30px 26px; }
    .step { padding: 22px 24px 20px; }
}



/* ============================================
   RESPONSIVE - 400px
   ============================================ */
@media (max-width: 400px) {

  .wis-hero-copy3 h1 {
      display: block;
      font-weight: 500;
      font-size: 4.5rem;
      line-height: 94%;
      color: #fff;
  }

  .q-cutout {
        margin-left: -48px;
    }

  .made-in-hampshire-img {
        background-position: -111px 850px;
        background-size: 900px;
    }


  .focus-abs-img {
        position: absolute;
        left: 0;
        bottom: -9%;
        width: 100%;
        height: auto;
        max-width: none;
        z-index: 2;
    }


}