/* ==========================================================================
   Meadan Homes — main.css
   Global styles, design tokens, typography, utilities, shared components
   ========================================================================== */

/* --------------------------------------------------------------------------
   Self-hosted fonts (assets/fonts)
   -------------------------------------------------------------------------- */
@font-face {
    font-family: 'Geist';
    src: url('../fonts/Geist/Geist-VariableFont_wght.ttf') format('truetype');
    font-weight: 100 900;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Freight Neo Pro';
    src: url('../fonts/Freight/FreightNeo-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'freight-neo-pro';
    src: url('../fonts/Freight/FreightNeo-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Freight Neo';
    src: url('../fonts/Freight/FreightNeo-Book.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* --------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
    /* Colours — matching Figma variables */
    --color-dark:        #1c1c1c;   /* Lead Colours/Yakisugi */
    --color-sand:        #e6dfd7;   /* Lead Colours/White Coffee */
    --color-sand-light:  #f0ebdf;   /* Secondary Colours/Chalk */
    --color-stone:       #c8bbab;   /* Secondary Colours/Stone */
    --color-warm-clay:   #b99980;   /* Secondary Colours/Warm Clay */
    --color-white:       #ffffff;   /* Lead Colours/White */
    --color-grey:        #d9d9d9;

    /* Image hover — content zoom in .site-main */
    --image-hover-scale:     1.03;
    --image-hover-duration:  0.5s;
    --image-hover-ease:      ease;

    /* Typography */
    --font-body:         'Geist', system-ui, sans-serif;
    --font-heading:      'Freight Neo Pro', Georgia, serif;

    /* Text scale — Figma spec */
    --text-xs:    0.875rem;   /* 14px  — Body Small / Body Label */
    --text-sm:    1rem;       /* 16px  — Body Normal / CTA */
    --text-md:    1.25rem;    /* 20px  — H5 */
    --text-xl:    2.5rem;     /* 40px  — H2 */
    --text-2xl:   3rem;       /* 48px  — H1 */

    --weight-light:   300;
    --weight-regular: 400;
    --weight-medium:  500;

    /* Spacing — pixel-named tokens used by block CSS files */
    --space-4:    0.25rem;    /*  4px */
    --space-6:    0.375rem;   /*  6px */
    --space-8:    0.5rem;     /*  8px */
    --space-10:   0.625rem;   /* 10px */
    --space-12:   0.75rem;    /* 12px */
    --space-16:   1rem;       /* 16px */
    --space-20:   1.25rem;    /* 20px */
    --space-24:   1.5rem;     /* 24px */
    --space-28:   1.75rem;    /* 28px */
    --space-30:   1.875rem;   /* 30px */
    --space-32:   2rem;       /* 32px */
    --space-40:   2.5rem;     /* 40px — Figma gap token */
    --space-48:   3rem;       /* 48px */
    --space-60:   3.75rem;    /* 60px — Figma desktop-left-right */
    --space-80:   5rem;       /* 80px — Figma top-bottom */

    /* Spacing aliases — shorthand tokens used by some block CSS */
    --space-sm:   1.5rem;     /* 24px */
    --space-md:   2.5rem;     /* 40px */
    --space-lg:   3.75rem;    /* 60px */
    --space-xl:   5rem;       /* 80px — section vertical padding */

    /* Layout */
    --max-width:     1440px;
    --gutter:        clamp(1.25rem, 5vw, 3.75rem); /* 20px → 60px */
    --gutter-mobile: 1.25rem;  /* 20px */

    /* Button — pill shape per Figma */
    --btn-radius:    1000px;
    --btn-py:        1rem;     /* 16px */
    --btn-px:        1.5625rem; /* 25px */
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-light);
    color: var(--color-dark);
    background-color: var(--color-white);
    line-height: 1.39;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

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

a {
    color: inherit;
    text-decoration: none;
}

ul,
ol {
    list-style: none;
}
ul.bullet-type{
    list-style-type: disc;
}
button {
    cursor: pointer;
    background: none;
    border: none;
    font: inherit;
}

/* --------------------------------------------------------------------------
   3. Typography — Figma spec
   -------------------------------------------------------------------------- */

/* H1, H2: Freight Neo (serif), Book/400 */
h1, h2 {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
}

/* H3–H6: Geist (sans), Medium/500 */
h3, h4, h5, h6 {
    font-family: var(--font-body);
    font-weight: var(--weight-medium);
}

h1 { font-size: clamp(2rem,    5vw, var(--text-2xl)); line-height: 1.0;  }
h2 { font-size: clamp(1.75rem, 4vw, var(--text-xl));  line-height: 1.15; }
h3 { font-size: clamp(1.25rem, 3vw, 1.75rem);         line-height: 1.1;  }
h4 { font-size: clamp(1.125rem, 2.5vw, 1.5rem);       line-height: 1.1;  } /* 24px */
h5 { font-size: var(--text-md);  line-height: 1.1; }
h6 { font-size: var(--text-xs);  line-height: 1.0; }

p {
    line-height: 1.39;
}

p + p {
    margin-top: 1em;
}

/* --------------------------------------------------------------------------
   4. Layout Utility — .container
   -------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
    padding-inline: var(--gutter);
}

/* Global section content width — cap inner wrappers, not full-bleed shells */
.site-main [class$="__inner"],
.site-main [class$="__outer"],
.site-header__inner,
.site-footer__inner {
    width: 100%;
    max-width: var(--max-width);
    margin-inline: auto;
}

/* --------------------------------------------------------------------------
   5. Shared Components — Buttons
      Figma: pill-shaped (border-radius 1000px), py 16px, px 25px
             Geist Light 16px, letter-spacing 1px, CAPITALISED
   -------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-8);
    padding: var(--btn-py) var(--btn-px);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-light);
    letter-spacing: 0.16px;   /* Figma: tracking-[0.16px] */
    line-height: 1;
    border-radius: var(--btn-radius);
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
    text-decoration: none;
    text-transform: capitalize;
}

.btn:focus-visible {
    outline: 2px solid var(--color-dark);
    outline-offset: 3px;
}

/* Primary — dark fill, white text (Figma default) */
.btn--primary {
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}

.btn--primary:hover {
    background-color: transparent;
    color: var(--color-dark);
}

/* Stone — warm taupe fill, dark text */
.btn--stone {
    background-color: var(--color-stone);
    color: var(--color-dark);
    border-color: var(--color-stone);
}

.btn--stone:hover {
    background-color: transparent;
    color: var(--color-stone);
}

/* Outline — border only, dark text (on light bg) */
.btn--secondary {
    background-color: transparent;
    color: var(--color-dark);
    border-color: var(--color-dark);
}

.btn--secondary:hover {
    background-color: var(--color-dark);
    color: var(--color-white);
}

/* Outline on dark background — white border + text */
.btn--outline-light {
    background-color: transparent;
    color: var(--color-white);
    border-color: var(--color-white);
}

.btn--outline-light:hover {
    background-color: var(--color-white);
    color: var(--color-dark);
}

/* Sand — warm beige fill, dark text (Figma hero CTA) */
.btn--sand {
    background-color: var(--color-sand);
    color: var(--color-dark);
    border-color: var(--color-sand);
}

.btn--sand:hover {
    background-color: transparent;
    color: var(--color-sand);
}

/* Light — white fill, dark text (hero CTA on dark/video bg) */
.btn--light {
    background-color: var(--color-white);
    color: var(--color-dark);
    border-color: var(--color-white);
}

.btn--light:hover {
    background-color: transparent;
    color: var(--color-white);
}

input[type="submit"].gform_button {
    padding: 16px 25px!important;
    border-radius: 1000px !important;
    background-color: var(--Lead-Colours-Yakisugi, #1C1C1C) !important;
    font-weight: 300 !important;
    letter-spacing: 0.16px !important;
}

input[type="submit"].gform_button:hover {
    background-color: transparent !important;
    color: var(--Lead-Colours-Yakisugi, #1C1C1C) !important;
    border: 1px solid #1c1c1c !important;

}
/* --------------------------------------------------------------------------
   6. Site Header — Figma node 4491:12486
      Transparent overlay on hero → dark bg on scroll (.is-scrolled)
      px: 60px · py: 30px · Logo: 164×46px · Nav gap: 50px · Links: 16px Light
   -------------------------------------------------------------------------- */
.site-header {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    background-color: transparent;
    color: var(--color-white);
    transition: background-color 0.3s ease, transform 0.3s ease;
}

/* Sticky — triggered on upward scroll past hero */
.site-header.is-sticky {
    position: fixed;
    background-color: var(--color-dark);
}

/* Hidden — triggered on downward scroll */
.site-header.is-hidden {
    transform: translateY(-100%);
}

/* Hover / open — sand bg when a Max Mega Menu item is hovered or its sub-panel is open.
   Wins over .is-sticky so the same look applies whether the header is at the top
   (transparent) or already scrolled (.is-sticky / dark). */
.site-header:has(.mega-menu-item:hover),
.site-header:has(.mega-menu-item.mega-toggle-on),
.site-header:has(.site-header__nav-list > li:hover) {
    background-color: var(--color-sand);
    color: var(--color-dark);
}

/* Logo swap — show dark logo on sand header state */
.site-header__logo-img--dark {
    display: none;
}

.site-header:has(.mega-menu-item:hover) .site-header__logo-img--default,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__logo-img--default,
.site-header:has(.site-header__nav-list > li:hover) .site-header__logo-img--default {
    display: none;
}

.site-header:has(.mega-menu-item:hover) .site-header__logo-img--dark,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__logo-img--dark,
.site-header:has(.site-header__nav-list > li:hover) .site-header__logo-img--dark {
    display: block;
}

/* Flip link + logo text colors for contrast on sand (inactive mega items only) */
.site-header:has(.mega-menu-item:hover) .site-header__nav-list a,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__nav-list a,
.site-header:has(.site-header__nav-list > li:hover) .site-header__nav-list a,
.site-header:has(.mega-menu-item:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link,
.site-header:has(.mega-menu-item.mega-toggle-on) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link,
.site-header:has(.site-header__nav-list > li:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link,
.site-header:has(.mega-menu-item:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link .mega-indicator,
.site-header:has(.mega-menu-item.mega-toggle-on) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link .mega-indicator,
.site-header:has(.site-header__nav-list > li:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:not(:hover):not(.mega-toggle-on) > a.mega-menu-link .mega-indicator,
.site-header:has(.mega-menu-item:hover) .site-header__logo-text,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__logo-text,
.site-header:has(.site-header__nav-list > li:hover) .site-header__logo-text {
    color: var(--color-dark);
}

/* Hovered / open top-level mega menu item — warm clay (priority over sand + plugin styles) */
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:hover,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link:focus-visible,
.site-header:has(.mega-menu-item:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
.site-header:has(.mega-menu-item.mega-toggle-on) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link,
.site-header:has(.site-header__nav-list > li:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link,
.site-header:has(.mega-menu-item:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link .mega-indicator,
.site-header:has(.mega-menu-item.mega-toggle-on) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link .mega-indicator,
.site-header:has(.site-header__nav-list > li:hover) #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link .mega-indicator,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item:hover > a.mega-menu-link .mega-indicator,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item.mega-toggle-on > a.mega-menu-link .mega-indicator {
    color: var(--color-warm-clay) !important;
    opacity: 1 !important;
}

/* CTA pill — dark fill + white text while mega menu is open / hovered */
.site-header:has(.mega-menu-item:hover) .site-header__cta .btn,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__cta .btn,
.site-header:has(.site-header__nav-list > li:hover) .site-header__cta .btn,
.site-header.is-sticky:has(.mega-menu-item:hover) .site-header__cta .btn,
.site-header.is-sticky:has(.mega-menu-item.mega-toggle-on) .site-header__cta .btn,
.site-header.is-sticky:has(.site-header__nav-list > li:hover) .site-header__cta .btn {
    background-color: var(--color-dark);
    border-color: var(--color-dark);
    color: var(--color-white);
}

.site-header:has(.mega-menu-item:hover) .site-header__cta .btn:hover,
.site-header:has(.mega-menu-item.mega-toggle-on) .site-header__cta .btn:hover,
.site-header:has(.site-header__nav-list > li:hover) .site-header__cta .btn:hover,
.site-header.is-sticky:has(.mega-menu-item:hover) .site-header__cta .btn:hover,
.site-header.is-sticky:has(.mega-menu-item.mega-toggle-on) .site-header__cta .btn:hover,
.site-header.is-sticky:has(.site-header__nav-list > li:hover) .site-header__cta .btn:hover {
    background-color: var(--color-warm-clay);
    border-color: var(--color-warm-clay);
    color: var(--color-white);
}

/* Max Mega Menu panels — desktop fade/slide open and close */
@media (min-width: 769px) {
    .site-header__nav--desktop .mega-menu-link .mega-indicator {
        display: none !important;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        display: block !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none;
        transform: translateY(14px);
        transition:
            opacity 0.24s ease,
            transform 0.24s ease,
            visibility 0s linear 0.24s;
        will-change: opacity, transform;
    }

    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu:hover > ul.mega-sub-menu,
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu.mega-toggle-on > ul.mega-sub-menu {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto;
        transform: translateY(0);
        transition-delay: 0s;
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
        transform: none;
        transition: none;
    }
}

/* Max Mega Menu header image cards — desktop hover (image zoom + Discover More) */
@media (min-width: 769px) {
    #mega-menu-wrap-primary .header-card .widget_media_image a {
        display: block;
        overflow: hidden;
    }

    #mega-menu-wrap-primary .header-card .widget_media_image img {
        display: block;
        width: 100%;
        height: auto;
        object-fit: cover;
        transition: transform 0.5s ease;
    }

    #mega-menu-wrap-primary .header-card:hover .widget_media_image img {
        transform: scale(1.03);
    }

    #mega-menu-wrap-primary .header-card-info h5 {
        margin: 0;
        font-family: var(--font-body);
        font-size: var(--text-md);
        font-weight: var(--weight-medium);
        line-height: 1.1;
        color: var(--color-dark);
        transition: opacity 0.35s ease;
    }

    #mega-menu-wrap-primary .header-card:hover .header-card-info h5 {
        opacity: 0.85;
    }

    #mega-menu-wrap-primary .header-card-info a {
        display: inline-flex;
        align-items: center;
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0.16px;
        color: var(--color-dark);
        text-decoration: none;
        border-bottom: 1px solid var(--color-dark);
        padding-bottom: 2px;
        transition: color 0.2s ease, border-color 0.2s ease;
        max-width: fit-content;
    }

    #mega-menu-wrap-primary .header-card:hover .header-card-info a,
    #mega-menu-wrap-primary .header-card-info a:hover,
    #mega-menu-wrap-primary .header-card-info a:focus-visible {
        color: var(--color-warm-clay);
        border-bottom-color: var(--color-warm-clay);
    }

    #mega-menu-wrap-primary .header-card-info a:focus-visible {
        outline: 2px solid var(--color-dark);
        outline-offset: 2px;
    }

    #mega-menu-wrap-primary .header-card .widget_media_image a:focus-visible {
        outline: 2px solid var(--color-dark);
        outline-offset: 2px;
    }
}

@media (min-width: 769px) and (prefers-reduced-motion: reduce) {
    #mega-menu-wrap-primary .header-card .widget_media_image img {
        transition: none;
    }

    #mega-menu-wrap-primary .header-card:hover .widget_media_image img {
        transform: none;
    }
}

/* Max Mega Menu text link lists — .sub-menu-list hover */
@media (min-width: 769px) {
    #mega-menu-wrap-primary .sub-menu-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #mega-menu-wrap-primary .sub-menu-list li a {
        display: inline-block;
        font-family: var(--font-body);
        font-size: 16px;
        font-weight: 300;
        line-height: 1;
        letter-spacing: 0.16px;
        color: var(--color-dark);
        text-decoration: none;
        border-bottom: 1px solid transparent;
        padding-bottom: 2px;
        transition: color 0.2s ease, border-color 0.2s ease;
    }

    #mega-menu-wrap-primary .sub-menu-list li a:hover,
    #mega-menu-wrap-primary .sub-menu-list li a:focus-visible {
        color: var(--color-warm-clay);
        border-bottom-color: var(--color-warm-clay);
    }

    #mega-menu-wrap-primary .sub-menu-list li a:focus-visible {
        outline: 2px solid var(--color-dark);
        outline-offset: 2px;
    }
}

.site-header__inner {
    max-width: var(--max-width);
    margin-inline: auto;
    padding-block: 30px;
}

.site-header__logo-link {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.site-header__logo-img {
    height: 46px;     /* Figma: h-[46px] */
    width: auto;
    max-width: 164px; /* Figma: w-[164px] */
    object-fit: contain;
    object-position: left center;
}

.site-header__logo-text {
    font-family: var(--font-body);
    font-size: 1.25rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--color-white);
    text-transform: uppercase;
}

/* Primary Nav — centred */
.site-header__nav {
    display: flex;
    justify-content: center;
}

.site-header__nav--mobile {
    display: none;
}

.site-header__nav-list {
    display: flex;
    align-items: center;
    gap: 50px;        /* Figma: gap-[50px] */
    list-style: none;
}

.site-header__nav-list a {
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 300;           /* Geist Light */
    color: var(--color-white);
    letter-spacing: 0.16px;    /* Figma: tracking-[0.16px] */
    line-height: 1;
    text-transform: capitalize; /* Figma: capitalize */
    white-space: nowrap;        /* Figma: whitespace-nowrap */
    display: flex;
    align-items: center;
    height: 20px;
    transition: color 0.3s ease, opacity 0.2s ease;
}

#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link,
#mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-item > a.mega-menu-link .mega-indicator {
    transition: color 0.3s ease, opacity 0.2s ease;
}

.site-header__nav-list a:hover,
.site-header__nav-list a:focus-visible {
    opacity: 0.7;
}

.site-header__nav-list .current-menu-item > a,
.site-header__nav-list .current-page-ancestor > a {
    opacity: 0.7;
}

/* Right actions group — CTA + mobile toggle (Figma: gap-[16px]) */
.site-header__actions {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* Contact Us CTA — dark pill (Figma: bg-[#1c1c1c], px-25px, py-16px, rounded-full) */
.site-header__cta .btn {
    padding: 16px 25px;
    font-size: 16px;
    font-weight: 300;
    letter-spacing: 0.16px;
    background-color: var(--color-dark);
    color: var(--color-white);
    border-color: var(--color-dark);
}
.sub-menu-inner-desc .btn:hover{
    background-color: var(--color-warm-clay)!important;
    border-color: var(--color-warm-clay)!important;
    color: var(--color-white)!important;
}

.site-header__cta .btn:hover {
    background-color: var(--color-warm-clay);
    border-color: var(--color-warm-clay);
    color: var(--color-white);
}

/* Sticky state — white outline so button is visible against dark nav bg */
.site-header.is-sticky .site-header__cta .btn {
    background-color: transparent;
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--color-da);
}

.site-header.is-sticky .site-header__cta .btn:hover {
    background-color: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-dark);
}

/* Mobile Toggle — hidden on desktop, shown on mobile */
.site-header__nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    padding: 0;
    width: 24px;
    height: 24px;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--color-white);
    flex-shrink: 0;
}

.site-header__nav-toggle-bar {
    display: block;
    width: 24px;
    height: 1.5px;
    background-color: currentColor;
    transition: transform 0.25s ease, opacity 0.25s ease;
}

/* Mobile — open state */
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(1) {
    transform: translateY(6.5px) rotate(45deg);
}
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}
.site-header__nav-toggle[aria-expanded="true"] .site-header__nav-toggle-bar:nth-child(3) {
    transform: translateY(-6.5px) rotate(-45deg);
}

@media (min-width: 1025px) {
    .site-header__inner {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        gap: 40px;
        padding-block: 30px;
    }

    .site-header__logo-link {
        justify-self: start;
    }

    .site-header__nav--desktop {
        justify-self: center;
    }

    .site-header__actions {
        justify-self: end;
    }
}

@media (max-width: 1024px) {
    .site-header__inner {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 16px;
        padding-block: 20px;
        padding-inline: 16px;
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) {
        background-color: var(--color-sand);
        color: var(--color-dark);
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__nav-toggle,
    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__logo-text {
        color: var(--color-dark);
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__cta .btn,
    .site-header.is-sticky:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__cta .btn {
        background-color: var(--color-dark);
        border-color: var(--color-dark);
        color: var(--color-white);
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__cta .btn:hover,
    .site-header.is-sticky:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__cta .btn:hover {
        background-color: var(--color-warm-clay);
        border-color: var(--color-warm-clay);
        color: var(--color-white);
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__logo-img--default {
        display: none;
    }

    .site-header:has(.site-header__nav-toggle[aria-expanded="true"]) .site-header__logo-img--dark {
        display: block;
    }

    .site-header__nav--desktop {
        display: none;
    }

    /* Mobile nav links hidden — shown in mobile drawer */
    .site-header__nav--mobile {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: var(--color-sand);
    
        overflow-y: auto;
        flex-direction: column;
        justify-content: flex-start;
    }

    .site-header__nav--mobile.is-open {
        display: flex;
    }

    .site-header__nav--mobile .mega-menu-wrap {
        width: 100%;
    }

    .site-header__nav--mobile .mega-menu-wrap .mega-menu-toggle {
        display: none !important;
    }

    .site-header__nav--mobile.is-open .mega-menu-wrap > .mega-menu {
        display: flex !important;
        visibility: visible !important;
        flex-direction: column;
    }

    .site-header__nav-list {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-24);
    }

    .site-header__nav-list a {
        font-size: var(--text-md);
        height: auto;
        white-space: normal;
    }

    /* Show hamburger */
    .site-header__nav-toggle {
        display: flex;
    }
}

/* Header horizontal padding — desktop flush, laptop/tablet 40px, mobile 16px */
@media (min-width: 1201px) {
    .site-header__inner {
        padding-inline: 0;
    }
}

@media (min-width: 769px) and (max-width: 1200px) {
    .site-header__inner {
        padding-inline: 40px;
    }
}

/* Mobile — Figma: px-[16px] py-[20px], logo h-[39px] w-[140px] */
@media (max-width: 768px) {
    .site-header__inner {
        padding-block: 20px;
        padding-inline: 16px;
    }

    .site-header__logo-img {
        height: 39px;
        max-width: 140px;
    }
}

/* --------------------------------------------------------------------------
   7. Site Footer — Figma node 4491:11267
      1440px design: 60px padding · Logo 200px · Links container 938px
      Font: Geist Light (300) links, Geist Medium (500) headings — all 14px
   -------------------------------------------------------------------------- */
.site-footer {
    background-color: #1c1c1c;
    color: #ffffff;
}

.site-footer__inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 60px;
    /* no gap — space-between naturally creates the 182px gap between
       the 200px logo and 938px links container at 1440px viewport */
}

/* ── Logo column — 200px, 56px tall ── */
.site-footer__brand {
    flex: 0 0 200px;
}

.site-footer__logo-link {
    display: block;
}

.site-footer__logo-img {
    display: block;
    width: 200px;
    height: 56px;
    object-fit: contain;
    object-position: left center;
}

.site-footer__logo-text {
    font-size: 0.875rem;
    font-weight: 500;
    color: #ffffff;
}

/* ── Right container — 938px, 4 cols space-between ── */
.site-footer__right {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex: 0 1 938px;   /* max 938px, shrinks on smaller screens */
}

/* ── Nav group: title + list, gap 12px between them ── */
.site-footer__nav-group {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.site-footer__nav-group-title {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;           /* Geist Medium */
    line-height: 1.39;
    color: #ffffff;
    margin: 0;
    letter-spacing: 0;
}

.site-footer__nav-group-list {
    display: flex;
    flex-direction: column;
    gap: 8px;                   /* Figma: gap-[8px] between links */
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__nav-group-list a {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;           /* Geist Light */
    line-height: 1;
    letter-spacing: 0.14px;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 20px;
    transition: opacity 0.2s ease;
}

.site-footer__nav-group-list a:hover {
    opacity: 0.7;
}

/* ── Info column — 198px wide, gap 12px between blocks ── */
.site-footer__info {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 0 0 198px;
}

/* Builders License block — inner gap 12px + 16px bottom padding */
.site-footer__license {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
}

.site-footer__license-heading {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;           /* Geist Medium */
    line-height: 1.39;
    color: #ffffff;
    margin: 0;
}

/* NSW / QLD side by side, 30px gap */
.site-footer__license-row {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.site-footer__license-col {
    display: flex;
    flex-direction: column;
}

.site-footer__license-state {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 500;           /* Geist Medium */
    line-height: 1.39;
    color: #ffffff;
}

.site-footer__license-number {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;           /* Geist Light */
    line-height: 1.3;
    color: #ffffff;
}

/* © copyright */
.site-footer__copyright {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

/* Website by Wordie — "Wordie" is Medium weight */
.site-footer__credit {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1.3;
    color: #ffffff;
    margin: 0;
}

.site-footer__credit a {
    font-weight: 500;           /* Geist Medium for "Wordie" */
    color: #ffffff;
    text-decoration: none;
}

/* Privacy Policy / Disclaimers — gap 8px */
.site-footer__policy-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.site-footer__policy-list a {
    font-family: 'Geist', system-ui, sans-serif;
    font-size: 14px;
    font-weight: 300;
    line-height: 1;
    letter-spacing: 0.14px;
    color: #ffffff;
    text-decoration: none;
    display: flex;
    align-items: center;
    height: 20px;
    transition: opacity 0.2s ease;
}

.site-footer__policy-list a:hover {
    opacity: 0.7;
}

/* ── Responsive ── */
@media (max-width: 1100px) {
    .site-footer__inner {
        padding: 48px 40px;
    }

    .site-footer__right {
        flex: 0 1 auto;
        flex-wrap: wrap;
        gap: 32px;
        justify-content: flex-start;
    }
}

@media (max-width: 768px) {
    .site-footer__inner {
        flex-direction: column;
        padding: 60px 16px;
        gap: 40px;
    }

    .site-footer__brand {
        flex: none;
        width: auto;
    }

    .site-footer__right {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 40px 20px;
        width: 100%;
    }

    .site-footer__nav-group,
    .site-footer__info {
        flex: 0 0 calc((100% - 20px) / 2);
        max-width: calc((100% - 20px) / 2);
    }

    .site-footer__policy-list {
        flex-direction: row;
        justify-content: space-between;
    }
}

/* --------------------------------------------------------------------------
   8. Main Content Area
   Hero sits behind the fixed header — no top padding on main.
   Sections used as scroll targets use scroll-margin-top so anchor
   links land below the fixed nav bar.
   -------------------------------------------------------------------------- */
.site-main {
    padding-top: 0;
}

/* No fixed header — anchor links land exactly at section top */

/* --------------------------------------------------------------------------
   9. Inline text link — border-bottom underline style (Figma "Link" component)
   -------------------------------------------------------------------------- */
.text-link {
    display: inline-flex;
    align-items: center;
    gap: var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: var(--weight-light);
    letter-spacing: 0.01em;
    color: var(--color-dark);
    border-bottom: 1px solid var(--color-dark);
    padding-bottom: 2px;
    transition: opacity 0.2s ease;
}

.text-link:hover {
    opacity: 0.65;
}

/* --------------------------------------------------------------------------
   10. Section header pattern — eyebrow + heading used across blocks
   -------------------------------------------------------------------------- */
.section-eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--color-dark);
    opacity: 0.65;
}

.section-heading {
    font-family: var(--font-heading);
    font-weight: var(--weight-regular);
    line-height: 1.15;
    color: var(--color-dark);
}

/* --------------------------------------------------------------------------
   11. Screen Reader Utilities
   -------------------------------------------------------------------------- */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.screen-reader-text:focus {
    background-color: var(--color-white);
    clip: auto;
    color: var(--color-dark);
    display: block;
    font-size: 0.875rem;
    font-weight: 700;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000;
}

/* --------------------------------------------------------------------------
   11b. Global image hover — .site-main content (scale on wrapper hover)
   Excludes hero, forms, social icons, logos. Mega menu: header rules above.
   Opt-out: .no-image-hover on wrapper, or img.no-image-hover
   Non-standard markup: add class .image-hover to the clipping wrapper.
   -------------------------------------------------------------------------- */
.site-main :is(
    a,
    [class*="__card"],
    [class*="__item"],
    [class*="__tile"],
    [class*="__image-link"],
    [class*="__image-wrap"],
    [class*="__media"],
    figure
):where(:not(.no-image-hover)):not(:is(
    [class*="hero"] *,
    [class*="logo"],
    [class*="logo"] *,
    .cu-form *,
    .gform_wrapper *,
    [class*="__social"] *
)):has(> img, > picture) {
    overflow: hidden;
}

.site-main :is(
    a,
    [class*="__card"],
    [class*="__item"],
    [class*="__tile"],
    [class*="__image-link"],
    [class*="__image-wrap"],
    [class*="__media"],
    figure
):where(:not(.no-image-hover)):not(:is(
    [class*="hero"] *,
    [class*="logo"],
    [class*="logo"] *,
    .cu-form *,
    .gform_wrapper *,
    [class*="__social"] *
)):has(> img, > picture) :is(> img, picture img):not(.no-image-hover) {
    transition: transform var(--image-hover-duration) var(--image-hover-ease);
}

.site-main :is(
    a,
    [class*="__card"],
    [class*="__item"],
    [class*="__tile"],
    [class*="__image-link"],
    [class*="__image-wrap"],
    [class*="__media"],
    figure
):where(:not(.no-image-hover)):not(:is(
    [class*="hero"] *,
    [class*="logo"],
    [class*="logo"] *,
    .cu-form *,
    .gform_wrapper *,
    [class*="__social"] *
)):hover :is(> img, picture img):not(.no-image-hover),
.site-main :is(
    a,
    [class*="__card"],
    [class*="__item"],
    [class*="__tile"],
    [class*="__image-link"],
    [class*="__image-wrap"],
    [class*="__media"],
    figure
):where(:not(.no-image-hover)):not(:is(
    [class*="hero"] *,
    [class*="logo"],
    [class*="logo"] *,
    .cu-form *,
    .gform_wrapper *,
    [class*="__social"] *
)):focus-visible :is(> img, picture img):not(.no-image-hover) {
    transform: scale(var(--image-hover-scale));
}

/* Opt-in wrapper when global selectors do not match markup */
.image-hover {
    overflow: hidden;
}

.image-hover > img,
.image-hover > picture img {
    transition: transform var(--image-hover-duration) var(--image-hover-ease);
}

.image-hover:hover > img,
.image-hover:focus-visible > img,
.image-hover:hover > picture img,
.image-hover:focus-visible > picture img {
    transform: scale(var(--image-hover-scale));
}

@media (prefers-reduced-motion: reduce) {
    .site-main :is(
        a,
        [class*="__card"],
        [class*="__item"],
        [class*="__tile"],
        [class*="__image-link"],
        [class*="__image-wrap"],
        [class*="__media"],
        figure
    ):where(:not(.no-image-hover)):not(:is(
        [class*="hero"] *,
        [class*="logo"],
        [class*="logo"] *,
        .cu-form *,
        .gform_wrapper *,
        [class*="__social"] *
    )):has(> img, > picture) :is(> img, picture img):not(.no-image-hover) {
        transition: none;
    }

    .site-main :is(
        a,
        [class*="__card"],
        [class*="__item"],
        [class*="__tile"],
        [class*="__image-link"],
        [class*="__image-wrap"],
        [class*="__media"],
        figure
    ):where(:not(.no-image-hover)):not(:is(
        [class*="hero"] *,
        [class*="logo"],
        [class*="logo"] *,
        .cu-form *,
        .gform_wrapper *,
        [class*="__social"] *
    )):hover :is(> img, picture img):not(.no-image-hover),
    .site-main :is(
        a,
        [class*="__card"],
        [class*="__item"],
        [class*="__tile"],
        [class*="__image-link"],
        [class*="__image-wrap"],
        [class*="__media"],
        figure
    ):where(:not(.no-image-hover)):not(:is(
        [class*="hero"] *,
        [class*="logo"],
        [class*="logo"] *,
        .cu-form *,
        .gform_wrapper *,
        [class*="__social"] *
    )):focus-visible :is(> img, picture img):not(.no-image-hover) {
        transform: none;
    }

    .image-hover > img,
    .image-hover > picture img {
        transition: none;
    }

    .image-hover:hover > img,
    .image-hover:focus-visible > img,
    .image-hover:hover > picture img,
    .image-hover:focus-visible > picture img {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   12. Accessibility / Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* --------------------------------------------------------------------------
   13. Global Mobile Defaults — Figma 390px standard
   ─────────────────────────────────────────────────────────────────────────
   HOW IT WORKS — two automatic mechanisms for new components:

   A) --gutter override
      Any component that already uses `padding-inline: var(--gutter)` on
      desktop will automatically resolve to 16px on mobile — no extra CSS
      needed in the component file.

   B) .cb-section utility class
      Add class="cb-section" (alongside the component class) to every new
      section wrapper. It receives the correct padding-block: 80px /
      padding-inline: 16px on mobile for free.

   EXISTING COMPONENTS — already have explicit mobile overrides in their own
   CSS files (written before this global was added). Those are harmless
   redundancy; the global has no effect on them.
   -------------------------------------------------------------------------- */

/* A) Override --gutter → 16px on mobile (Figma mobile-left-right token) */
@media (max-width: 639px) {
    :root {
        --gutter: 1rem; /* 16px */
    }
}

/* B) Shared section utility — add .cb-section to any new section element */
@media (max-width: 639px) {
    .cb-section {
        padding-block: 80px;    /* Figma top-bottom token */
        padding-inline: 16px;   /* Figma mobile-left-right token */
    }
}