/* EziLux Website - Modern, Fast, AI-Optimized Styles */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --primary-color: #C1AA80;
    --secondary-color: #FFBC7D;
    --accent-light: #D8C095;
    --text-color: #0A0607;
    --text-dark: #303030;
    --light-bg: #fafafa;
    --white: #ffffff;
    --black: #000000;
    --brand-gold: #C1AA80;
    --brand-black: #0A0607;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text-color);
    font-size: 16px;
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Header */
header {
    background: var(--white);
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.header-top {
    background: var(--primary-color);
    color: var(--white);
    padding: 10px 0;
    text-align: center;
}

.header-top .phone-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
}

.header-top .phone-link {
    color: var(--white);
    text-decoration: none;
    font-weight: 600;
}

.main-nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
}

/* Desktop: centre nav after header CTA was removed (was space-between: logo | nav | CTA). */
@media (min-width: 769px) {
    .main-nav {
        display: grid;
        grid-template-columns: 1fr auto 1fr;
        align-items: center;
        column-gap: 20px;
    }

    .main-nav .logo {
        grid-column: 1;
        justify-self: start;
    }

    .main-nav .nav-menu {
        grid-column: 2;
        justify-self: center;
    }
}

.mobile-nav-toggle {
    display: none;
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid rgba(10, 6, 7, 0.16);
    border-radius: 12px;
    padding: 0;
    line-height: 1;
    cursor: pointer;
    color: var(--brand-black);
    box-shadow: none;
}

.mobile-nav-toggle:focus-visible {
    outline: 3px solid rgba(193, 170, 128, 0.7);
    outline-offset: 2px;
}

.mobile-nav-toggle .bar {
    display: block;
    width: 20px;
    height: 2px;
    margin: 3px auto;
    border-radius: 999px;
    background: currentColor;
}

.mobile-nav-toggle .mobile-nav-icon {
    display: block;
    margin: 0 auto;
}

@media (hover: hover) {
    .mobile-nav-toggle:hover {
        background: rgba(193, 170, 128, 0.22);
        border-color: rgba(193, 170, 128, 0.7);
    }
}

.logo img {
    height: 50px;
    width: auto;
}

.nav-menu {
    display: flex;
    list-style: none;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: var(--text-color);
    font-weight: 500;
    transition: color 0.3s;
}

.nav-menu a:hover {
    color: var(--primary-color);
}

/* Dropdown Menu Styles */
.nav-menu .dropdown-menu {
    position: relative;
}

.nav-menu .dropdown-menu .sub-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    z-index: 1100;
    min-width: 200px;
    list-style: none;
    padding: 10px 0;
    margin: 0;
    border-radius: 5px;
}

/* Editor-only: make submenus visible in GrapesJS canvas */
body.gjs-dashed .nav-menu .dropdown-menu .sub-menu,
body.gjs-editor .nav-menu .dropdown-menu .sub-menu,
body.gjs-frame .nav-menu .dropdown-menu .sub-menu {
    display: block !important;
    position: relative !important;
    top: auto !important;
    left: auto !important;
    margin-top: 10px !important;
    margin-left: 20px !important;
    box-shadow: none !important;
    border-left: 2px solid var(--primary-color);
    padding-left: 15px;
}

/* Hover support */
.nav-menu .dropdown-menu:hover .sub-menu {
    display: block;
}

/* Focus support */
.nav-menu .dropdown-menu:focus-within .sub-menu {
    display: block;
}

/* Active/click support */
.nav-menu .dropdown-menu.active .sub-menu,
.nav-menu .dropdown-menu:active .sub-menu {
    display: block;
}

/* Show dropdown when parent has 'show-dropdown' class (for JavaScript toggle) */
.nav-menu .dropdown-menu.show-dropdown .sub-menu {
    display: block !important;
}

.nav-menu .dropdown-menu .sub-menu li {
    margin: 0;
    padding: 0;
}

.nav-menu .dropdown-menu .sub-menu a {
    display: block;
    padding: 10px 20px;
    color: var(--text-color);
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s;
}

.nav-menu .dropdown-menu .sub-menu a:hover {
    background-color: #f5f5f5;
    color: var(--primary-color);
}

.cta-button {
    background: var(--brand-black);
    color: var(--white);
    padding: 12px 24px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.3s;
}

.cta-button:hover {
    background: var(--brand-gold);
    color: var(--brand-black);
}

/* Contact-us gateway (EziAssist Web Lead + self booking) */
.contact-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 36px;
    margin-top: 40px;
}

@media (max-width: 900px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
}

.contact-panel {
    background: #fff;
    border: 1px solid rgba(10, 6, 7, 0.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 26px rgba(10, 6, 7, 0.06);
}

.contact-block {
    margin-top: 18px;
}

.contact-phone {
    font-size: 1.15rem;
    margin: 8px 0 0;
}

.contact-phone-link {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 800;
}

.contact-lead {
    margin: 12px 0 18px;
    color: rgba(10, 6, 7, 0.8);
    line-height: 1.55;
}

.web-lead-form {
    position: relative;
}

.web-lead-form label {
    display: block;
    font-weight: 650;
    font-size: 0.95rem;
    color: rgba(10, 6, 7, 0.92);
}

.web-lead-form input,
.web-lead-form textarea {
    width: 100%;
    margin-top: 6px;
    padding: 12px 12px;
    border: 1px solid rgba(10, 6, 7, 0.16);
    border-radius: 10px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
}

.web-lead-row {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin-bottom: 14px;
}

@media (max-width: 620px) {
    .web-lead-row {
        grid-template-columns: 1fr;
    }
}

.web-lead-message {
    margin-top: 10px;
}

.web-lead-interests {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(10, 6, 7, 0.08);
}

.web-lead-interests-label {
    font-size: 0.92rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.web-lead-interests-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 14px;
}

.web-lead-check {
    display: flex !important;
    gap: 10px;
    align-items: center;
    font-weight: 600 !important;
}

.web-lead-check input {
    width: auto;
    margin: 0;
}

.web-lead-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    pointer-events: none;
}

.web-lead-status {
    margin-top: 12px;
    min-height: 1.2em;
    font-size: 0.95rem;
}

.web-lead-status.is-error {
    color: #8b2942;
}

.web-lead-status.is-success {
    color: #1f6f3a;
}

.web-lead-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 14px;
}

@media (max-width: 520px) {
    .web-lead-actions {
        grid-template-columns: 1fr;
    }
}

.web-lead-call {
    margin-top: 10px;
}

/* Booking success modal (contact-us booking flow) */
.booking-success-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.booking-success-modal.is-open {
    display: flex;
}

body.booking-modal-open {
    overflow: hidden;
}

.booking-success-modal__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 12, 10, 0.55);
    cursor: pointer;
}

.booking-success-modal__panel {
    position: relative;
    max-width: 440px;
    width: 100%;
    max-height: min(90vh, 640px);
    overflow-y: auto;
    background: #fff;
    border-radius: 14px;
    padding: 24px 22px 22px;
    box-shadow: 0 20px 50px rgba(10, 6, 7, 0.22);
    border: 1px solid rgba(10, 6, 7, 0.08);
}

.booking-success-modal__title {
    margin: 0 0 12px;
    font-size: clamp(1.25rem, 3vw, 1.45rem);
    line-height: 1.2;
    color: #1f2933;
}

.booking-success-modal__welcome {
    margin: 0 0 16px;
    color: rgba(10, 6, 7, 0.88);
    line-height: 1.55;
    font-size: 0.98rem;
}

.booking-success-modal__details {
    margin: 0 0 16px;
}

.booking-success-modal__dl {
    margin: 0;
    display: grid;
    gap: 10px;
}

.booking-success-modal__dl > div {
    display: grid;
    grid-template-columns: 108px 1fr;
    gap: 8px 12px;
    font-size: 0.95rem;
    align-items: start;
}

.booking-success-modal__dl dt {
    margin: 0;
    font-weight: 700;
    color: rgba(10, 6, 7, 0.58);
}

.booking-success-modal__dl dd {
    margin: 0;
    color: #1f2933;
    word-break: break-word;
}

.booking-success-modal__note {
    margin: 0 0 12px;
    font-size: 0.92rem;
    line-height: 1.55;
    color: rgba(10, 6, 7, 0.82);
}

.booking-success-modal__note a {
    color: #8b6914;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 2px;
}

.booking-success-modal__note:last-of-type {
    margin-bottom: 18px;
}

.booking-success-modal__ok {
    width: 100%;
    margin-top: 4px;
}

.booking-success-modal--success .booking-success-modal__title {
    color: var(--brand-black);
}

.booking-success-modal--error .booking-success-modal__title {
    color: #8b2942;
}

.btn-primary.is-loading {
    opacity: 0.72;
    cursor: wait;
}

@media (max-width: 480px) {
    .booking-success-modal__dl > div {
        grid-template-columns: 1fr;
        gap: 2px;
    }

    .booking-success-modal__dl dt {
        margin-top: 6px;
    }

    .booking-success-modal__dl > div:first-child dt {
        margin-top: 0;
    }
}

/* Contact Us only: consultation layout (no hero image; form + inline calendar) */
.contact-consultation-section {
    background: #f7f5f1;
    padding: 2rem 0 3rem;
    border-bottom: 1px solid rgba(10, 6, 7, 0.06);
}

.contact-consultation-title {
    margin: 0 0 0.5rem;
    font-size: clamp(1.75rem, 4vw, 2.35rem);
    line-height: 1.15;
    color: #1f2933;
    text-align: center;
}

.contact-consultation-lead {
    margin: 0 auto 1rem;
    max-width: 46rem;
    color: rgba(10, 6, 7, 0.82);
    font-size: 1.05rem;
    line-height: 1.55;
    text-align: center;
}

.contact-consultation-call {
    margin: 0 0 1.75rem;
    text-align: center;
}

.contact-consultation-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 400px);
    gap: 28px;
    align-items: start;
    text-align: left;
}

.contact-consultation-form {
    background: #fff;
    border: 1px solid rgba(10, 6, 7, 0.08);
    border-radius: 14px;
    padding: 22px;
    box-shadow: 0 10px 26px rgba(10, 6, 7, 0.05);
}

.contact-consultation-form .web-lead-actions.contact-consultation-actions {
    grid-template-columns: 1fr;
    margin-top: 14px;
}

.contact-consultation-calendar {
    position: relative;
    min-width: 0;
    max-width: 100%;
}

.contact-calendar-card {
    background: #fff;
    border: 1px solid rgba(10, 6, 7, 0.1);
    border-radius: 16px;
    padding: 18px;
    box-shadow: 0 12px 32px rgba(10, 6, 7, 0.08);
    max-width: 100%;
    overflow-x: hidden;
}

.contact-calendar-heading {
    font-weight: 800;
    font-size: 1.05rem;
    color: #1f2933;
    margin: 0 0 8px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(10, 6, 7, 0.08);
}

.contact-calendar-hint {
    margin: 0 0 12px;
    font-size: 0.9rem;
    color: rgba(10, 6, 7, 0.65);
    line-height: 1.45;
}

.contact-calendar-hint.hidden {
    display: none;
}

/* Week strip + compact booking (contact page — option 1) */
.contact-calendar-card--booking {
    display: flex;
    flex-direction: column;
    min-height: 0;
    min-width: 0;
    overflow-x: hidden;
}

.contact-calendar-card--booking #step-calendar {
    min-width: 0;
    max-width: 100%;
}

.week-strip-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 4px;
}

.week-range-label {
    font-weight: 800;
    font-size: 0.88rem;
    color: #1f2933;
    text-align: center;
    flex: 1;
    min-width: 0;
    line-height: 1.25;
}

.week-strip-toolbar .week-nav:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

.week-strip {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 5px;
    margin-top: 12px;
}

@media (max-width: 480px) {
    .week-strip {
        display: flex;
        flex-wrap: wrap;
        gap: 6px;
        overflow-x: hidden;
    }

    .week-strip-day {
        flex: 1 1 calc(25% - 6px);
        min-width: 2.75rem;
        max-width: calc(25% - 6px);
    }
}

.week-strip-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    border: 1px solid rgba(10, 6, 7, 0.12);
    background: #fff;
    border-radius: 12px;
    padding: 8px 4px;
    cursor: pointer;
    font-weight: 700;
    font-size: 0.78rem;
    line-height: 1.15;
    color: #1f2933;
}

.week-strip-dow {
    font-size: 0.68rem;
    font-weight: 800;
    color: rgba(10, 6, 7, 0.55);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.week-strip-num {
    font-size: 1rem;
}

.week-strip-day.available:hover:not(:disabled) {
    border-color: rgba(193, 170, 128, 0.85);
    background: rgba(193, 170, 128, 0.12);
}

.week-strip-day.selected {
    border-color: rgba(193, 170, 128, 0.95);
    box-shadow: 0 0 0 3px rgba(193, 170, 128, 0.28);
    background: rgba(193, 170, 128, 0.15);
}

.week-strip-day.unavailable,
.week-strip-day.past {
    opacity: 0.38;
    cursor: not-allowed;
}

.contact-calendar-card--booking .time-slots-heading {
    margin-top: 12px;
    font-weight: 750;
    font-size: 0.92rem;
    color: rgba(10, 6, 7, 0.85);
}

.time-slots-scroll {
    max-height: 220px;
    overflow-x: hidden;
    overflow-y: auto;
    margin-top: 8px;
    padding: 10px 4px 4px 0;
}

@media (max-width: 768px) {
    .time-slots-scroll {
        max-height: 180px;
    }
}

.contact-calendar-card--booking .time-slots-grid {
    margin-top: 0;
}

@media (max-width: 960px) {
    .contact-consultation-grid {
        grid-template-columns: 1fr;
    }

    .contact-consultation-calendar {
        order: 2;
    }

    .contact-consultation-form {
        order: 1;
    }
}

.slot-picker {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 20000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
}

.slot-picker.hidden {
    display: none;
}

.slot-picker-card {
    width: min(860px, 100%);
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
}

.slot-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 4px 12px;
    border-bottom: 1px solid rgba(10, 6, 7, 0.08);
}

.slot-picker-title {
    font-weight: 800;
    font-size: 1.05rem;
}

.slot-picker-close {
    border: 0;
    background: transparent;
    font-size: 1.8rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px 10px;
    border-radius: 10px;
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 12px;
}

.calendar-nav {
    border: 1px solid rgba(10, 6, 7, 0.14);
    background: #fff;
    border-radius: 12px;
    width: 42px;
    height: 42px;
    cursor: pointer;
    font-size: 1.4rem;
}

.calendar-month-year {
    font-weight: 800;
}

.calendar-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    margin-top: 12px;
    gap: 8px;
    color: rgba(10, 6, 7, 0.55);
    font-weight: 700;
    font-size: 0.86rem;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 8px;
    margin-top: 10px;
}

.calendar-day {
    border: 1px solid rgba(10, 6, 7, 0.10);
    background: #fff;
    border-radius: 12px;
    padding: 10px 0;
    cursor: pointer;
    font-weight: 700;
}

.calendar-day.unavailable,
.calendar-day.past,
.calendar-day.empty {
    opacity: 0.35;
    cursor: not-allowed;
}

.calendar-day.selected {
    border-color: rgba(193, 170, 128, 0.9);
    box-shadow: 0 0 0 3px rgba(193, 170, 128, 0.25);
}

.time-slots {
    margin-top: 14px;
}

.time-slots.hidden {
    display: none;
}

.time-slots-empty {
    margin: 8px 0 0;
    font-size: 0.92rem;
    color: rgba(10, 6, 7, 0.68);
    line-height: 1.45;
}

.time-slots-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    width: 100%;
}

.time-slots-grid .slot-btn {
    flex: 1 1 calc(50% - 10px);
    min-width: 6.5rem;
    max-width: 100%;
}

@media (min-width: 420px) {
    .time-slots-grid .slot-btn {
        flex: 1 1 calc(33.333% - 10px);
    }
}

@media (min-width: 560px) {
    .time-slots-grid .slot-btn {
        flex: 1 1 calc(25% - 10px);
    }
}

.slot-btn {
    box-sizing: border-box;
    border-radius: 12px;
    border: 1px solid rgba(10, 6, 7, 0.14);
    padding: 10px 12px;
    background: #fff;
    cursor: pointer;
    font-weight: 750;
}

.slot-btn.unavailable {
    opacity: 0.35;
    cursor: not-allowed;
}

.slot-btn.selected {
    border-color: rgba(193, 170, 128, 0.9);
    box-shadow: 0 0 0 3px rgba(193, 170, 128, 0.25);
}

.slot-btn.available {
    overflow: hidden;
}

.slot-btn.available.slot-btn--ranked {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 4px 6px;
    padding: 10px 12px;
}

.slot-btn-time {
    white-space: normal;
    flex: 1 1 auto;
    min-width: 3.5rem;
    line-height: 1.2;
    text-align: center;
}

.slot-rank-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    pointer-events: none;
}

.slot-rank-badge--1 {
    background: #b45309;
}

.slot-rank-badge--2 {
    background: #d97706;
}

.slot-rank-badge--3 {
    background: #ca8a04;
}

.time-slots-legend {
    flex: 1 1 100%;
    width: 100%;
    margin: 8px 0 0;
    font-size: 11px;
    color: #9ca3af;
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1.35;
}

.time-slots-legend-dot {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    min-width: 20px;
    flex-shrink: 0;
    border-radius: 50%;
    background: #b45309;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    line-height: 1;
}

/* Contact booking: summary under slots; sticky actions on small screens */
.contact-calendar-card #step-confirm.hidden {
    display: none;
}

.contact-booking-footer:not(.hidden) {
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid rgba(10, 6, 7, 0.1);
}

@media (max-width: 768px) {
    .contact-booking-footer:not(.hidden) {
        position: sticky;
        bottom: 0;
        z-index: 30;
        margin-top: 12px;
        padding-top: 12px;
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        margin-left: -18px;
        margin-right: -18px;
        padding-left: 18px;
        padding-right: 18px;
        background: linear-gradient(to top, #fff 70%, rgba(255, 255, 255, 0.92));
        border-top: 1px solid rgba(10, 6, 7, 0.12);
        box-shadow: 0 -8px 24px rgba(10, 6, 7, 0.06);
    }
}

.confirm-summary {
    margin-top: 14px;
    padding: 12px;
    border: 1px solid rgba(10, 6, 7, 0.08);
    border-radius: 14px;
    background: rgba(193, 170, 128, 0.10);
}

.contact-booking-footer:not(.hidden) .confirm-summary {
    margin-top: 0;
}

.confirm-label {
    font-weight: 800;
    color: rgba(10, 6, 7, 0.7);
    font-size: 0.9rem;
}

.confirm-value {
    margin-top: 6px;
    font-weight: 800;
}

.confirm-actions {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    justify-content: flex-end;
    flex-wrap: wrap;
}

/* Contact booking: always two columns — Change | Confirm (text may wrap inside each) */
.contact-calendar-card .confirm-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 10px;
    align-items: stretch;
}

.contact-calendar-card .confirm-actions .btn-secondary,
.contact-calendar-card .confirm-actions .btn-primary {
    width: 100%;
    box-sizing: border-box;
    white-space: normal;
    text-align: center;
}

/* Trust bar: match logo “Lux” gold */
.trust-strip {
    background: var(--primary-color);
    border-top: 1px solid rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    padding: 10px 0;
}

.trust-strip-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.trust-strip-grid div {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: 0.78rem;
    color: rgba(10, 6, 7, 0.85);
}

.trust-strip-grid strong {
    color: var(--text-color);
    font-size: 0.84rem;
}

/* EOFY promo — replaces four-column trust strip during sale */
.trust-strip--eofy-promo {
    padding: 12px 0;
}

.trust-strip-eofy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.trust-strip-eofy-message {
    margin: 0;
    flex: 1 1 280px;
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px 12px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: rgba(10, 6, 7, 0.9);
}

.trust-strip-eofy-badge {
    font-size: 1.35rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-color);
    line-height: 1.2;
}

.trust-strip-eofy-detail {
    flex: 1 1 12rem;
    font-weight: 500;
}

.trust-strip-eofy-short {
    display: none;
    font-weight: 500;
}

.trust-strip-eofy-deadline {
    font-size: 0.8rem;
    font-weight: 700;
    white-space: nowrap;
    padding: 2px 8px;
    border-radius: 4px;
    background: rgba(10, 6, 7, 0.08);
}

.trust-strip-eofy-cta {
    flex-shrink: 0;
    display: inline-block;
    padding: 10px 18px;
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: none;
    color: #fff;
    background: var(--text-color);
    border-radius: 6px;
    white-space: nowrap;
    transition: background 0.2s ease, transform 0.15s ease;
}

.trust-strip-eofy-cta:hover {
    background: #000;
    color: #fff;
    transform: translateY(-1px);
}

/* EOFY promo: fixed header + gold banner on every page (mobile + desktop). Heights synced in main.js. */
body:has(.trust-strip--eofy-promo) {
    --ezilux-header-h: 5rem;
    --ezilux-eofy-h: 3.5rem;
    --ezilux-promo-top: var(--ezilux-header-h);
    --ezilux-top-stack: calc(var(--ezilux-header-h) + var(--ezilux-eofy-h));
    --ezilux-hero-gap: 0.75rem;
    --ezilux-hero-content-offset: calc(var(--ezilux-top-stack) + var(--ezilux-hero-gap));
}

body:has(.trust-strip--eofy-promo) header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1002;
    width: 100%;
    margin: 0;
    padding: 0;
    background: #ffffff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.08);
    border-bottom: none;
    overflow: visible;
}

body:has(.trust-strip--eofy-promo) header::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -3px;
    height: 4px;
    background: var(--primary-color);
    pointer-events: none;
    z-index: 2;
}

body:has(.trust-strip--eofy-promo) .trust-strip--eofy-promo {
    position: fixed;
    top: var(--ezilux-promo-top, var(--home-promo-top, var(--ezilux-header-h)));
    left: 0;
    right: 0;
    z-index: 1001;
    width: 100%;
    margin: 0;
    box-sizing: border-box;
    background: var(--primary-color);
    border: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
    transform: translateZ(0);
}

/* Only pad the OUTERMOST main (not nested legacy <main#main-content> inside it).
   Use --ezilux-mobile-top-stack which JS sets to the actual measured stack height
   (154px desktop / 183px mobile), unlike --ezilux-top-stack which is the CSS rem fallback. */
body:has(.trust-strip--eofy-promo):not(:has(.hero.hero--with-shutter-bg)):not(:has(.tubular-hero)):not(:has(.sb-hero)) main:not(main main) {
    padding-top: var(--ezilux-mobile-top-stack, var(--ezilux-top-stack));
}

body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) main,
body:has(.trust-strip--eofy-promo):has(.tubular-hero) main,
body:has(.trust-strip--eofy-promo):has(.sb-hero) main {
    padding-top: 0;
}

/* Tubular-hero: match the same offset formula as .hero--with-shutter-bg pages (~236px) */
body:has(.trust-strip--eofy-promo) .tubular-hero-inner {
    padding-top: calc(var(--ezilux-top-stack) + 2rem + 70px);
}
/* Mobile: drop +70px, use JS-measured mobile stack height via --ezilux-mobile-top-stack */
@media (max-width: 768px) {
    body:has(.trust-strip--eofy-promo) .tubular-hero-inner {
        padding-top: calc(var(--ezilux-mobile-top-stack, var(--ezilux-top-stack)) + var(--ezilux-hero-gap, 0.75rem));
    }
}

@media (max-width: 768px) {
    .trust-strip--eofy-promo {
        padding: 8px 0;
    }

    /* Copy on one row, Book Free Consultation full-width directly below. */
    .trust-strip-eofy {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    .trust-strip-eofy-message {
        flex: none;
        min-width: 0;
        margin: 0;
        display: block;
        line-height: 1.25;
        font-size: clamp(0.68rem, 2.8vw, 0.8rem);
        white-space: nowrap;
    }

    .trust-strip-eofy-badge {
        display: inline;
        font-size: 1em;
        font-weight: 800;
        margin-right: 0.4em;
        vertical-align: baseline;
    }

    .trust-strip-eofy-detail,
    .trust-strip-eofy-deadline {
        display: none;
    }

    .trust-strip-eofy-short {
        display: inline;
        width: auto;
        font-size: 1em;
        font-weight: 500;
        color: rgba(10, 6, 7, 0.88);
    }

    .trust-strip-eofy-cta {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 9px 14px;
        font-size: 0.8rem;
        text-align: center;
        white-space: nowrap;
    }

    body:has(.trust-strip--eofy-promo) .trust-strip--eofy-promo {
        padding-top: 6px;
        padding-bottom: 6px;
    }
}

/* FAQ blocks (SEO/GEO) */
.faq {
    padding: 50px 0;
    background: #ffffff;
}

.faq h2 {
    text-align: center;
    font-size: 2rem;
    margin: 0 0 50px;
    color: var(--primary-color);
}

.faq-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.faq-list details {
    border: 1px solid rgba(10, 6, 7, 0.12);
    border-radius: 12px;
    padding: 12px 14px;
    background: #fff;
}

.faq-list summary {
    cursor: pointer;
    font-weight: 700;
    list-style: none;
}

.faq-list summary::-webkit-details-marker {
    display: none;
}

.faq-list details > p {
    margin: 10px 0 0;
    color: rgba(10, 6, 7, 0.85);
    line-height: 1.65;
}

/* Home + product immersive: full-bleed hero under header + optional trust bar */
:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):has(.hero.hero--with-shutter-bg) {
    --home-header-h: 4.85rem;
    --home-trust-h: 3.55rem;
    --home-nav-stack: calc(var(--home-header-h) + var(--home-trust-h));
}

/* Static home: tall header strip, no trust bar in HTML */
:is(body.page-home, body.page-immersive-hero):has(.header-top):not(:has(.trust-strip)):has(.hero.hero--with-shutter-bg) {
    --home-header-h: 7rem;
    --home-trust-h: 0rem;
    --home-nav-stack: var(--home-header-h);
}

/* Header phone strip + gold trust bar + hero (e.g. product pages) */
:is(body.page-home, body.page-immersive-hero):has(.header-top):has(.trust-strip):has(.hero.hero--with-shutter-bg) {
    --home-header-h: 7rem;
    --home-trust-h: 3.55rem;
    --home-nav-stack: calc(var(--home-header-h) + var(--home-trust-h));
}

@media (max-width: 768px) {
    :is(
        body.page-home,
        main.legacy-page.page-home,
        body.page-immersive-hero,
        main.legacy-page.page-immersive-hero
    ):has(.hero.hero--with-shutter-bg):not(:has(.trust-strip--eofy-promo)) {
        /* Legacy four-column trust bar stays hidden on mobile. */
        --home-trust-h: 0rem;
    }

    :is(
        body.page-home,
        main.legacy-page.page-home,
        body.page-immersive-hero,
        main.legacy-page.page-immersive-hero
    ):has(.hero.hero--with-shutter-bg):has(.trust-strip--eofy-promo) {
        --home-header-h: var(--ezilux-mobile-header-h, 5.15rem);
        --home-trust-h: var(--ezilux-mobile-eofy-h, 3.15rem);
        --home-nav-stack: var(--ezilux-mobile-top-stack, calc(var(--home-header-h) + var(--home-trust-h)));
    }

    :is(body.page-home, body.page-immersive-hero):has(.header-top):not(:has(.trust-strip)):has(.hero.hero--with-shutter-bg) {
        --home-header-h: 7.5rem;
    }

    :is(body.page-home, body.page-immersive-hero):has(.header-top):has(.trust-strip):has(.hero.hero--with-shutter-bg) {
        --home-header-h: 7.5rem;
    }
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):has(.hero.hero--with-shutter-bg) header {
    transition: background 0.25s ease, box-shadow 0.25s ease;
    isolation: isolate;
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):has(.hero.hero--with-shutter-bg) .trust-strip--eofy-promo {
    transition: background 0.25s ease, border-color 0.25s ease;
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
).home-header-solid:has(.hero.hero--with-shutter-bg) header {
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
).home-header-solid:has(.hero.hero--with-shutter-bg) .trust-strip {
    background: var(--primary-color);
    border-bottom-color: rgba(0, 0, 0, 0.12);
}

:is(
    body.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-home,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg):has(.header-top) .header-top {
    background: rgba(31, 41, 51, 0.52);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

:is(
    body.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-home,
    main.legacy-page.page-immersive-hero
).home-header-solid:has(.hero.hero--with-shutter-bg):has(.header-top) .header-top {
    background: var(--primary-color);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg) header .nav-menu > li > a {
    color: var(--text-color);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg) header .nav-menu > li > a:hover {
    color: var(--primary-color);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg) header .cta-button {
    background: rgba(255, 255, 255, 0.92);
    color: var(--text-color);
    border: 2px solid var(--text-color);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg) header .cta-button:hover {
    background: var(--primary-color);
    color: var(--text-color);
    border-color: var(--primary-color);
}

:is(
    body.page-home,
    main.legacy-page.page-home,
    body.page-immersive-hero,
    main.legacy-page.page-immersive-hero
):not(.home-header-solid):has(.hero.hero--with-shutter-bg) header .logo img {
    filter: drop-shadow(0 1px 2px rgba(255, 255, 255, 0.75));
}

@media (min-width: 769px) {
    :is(
        body.page-home,
        main.legacy-page.page-home,
        body.page-immersive-hero,
        main.legacy-page.page-immersive-hero,
        body:has(.hero.hero--with-shutter-bg),
        main.legacy-page:has(.hero.hero--with-shutter-bg)
    ):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg {
        padding-top: calc(var(--home-nav-stack) + 2rem + 70px);
        padding-bottom: 4.5rem;
        min-height: min(90vh, 940px);
    }
}

/* Static home / immersive product: undo GrapesJS submenu-always-visible rule */
:is(body.page-home, body.page-immersive-hero) .nav-menu .dropdown-menu .sub-menu {
    display: none !important;
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
    border-left: none !important;
    padding-left: 0 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

:is(body.page-home, body.page-immersive-hero) .nav-menu .dropdown-menu:hover .sub-menu,
:is(body.page-home, body.page-immersive-hero) .nav-menu .dropdown-menu:focus-within .sub-menu {
    display: block !important;
}

/* Hero Section */
.hero {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-light) 100%);
    color: var(--white);
    padding: 80px 0;
    text-align: center;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-subtitle {
    font-size: 1.3rem;
    margin-bottom: 20px;
    font-weight: 300;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 30px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}

.hero-cta {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/*
 * Shutters Brisbane hero: full-width 16:9 video (contain-style sizing). No dark chrome —
 * section matches page white; overlay pins title/CTAs to top/bottom of the video area.
 */
.hero.hero--with-youtube-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--white);
    color: var(--text-color);
    padding: 0;
    text-align: center;
}

/* Full-bleed row (no .container max-width) — avoids dark side gutters. */
.hero.hero--with-youtube-bg .hero-youtube-shell {
    width: 100%;
    max-width: none;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 16:9 block scales to fit height; width fills viewport until height caps size. */
.hero.hero--with-youtube-bg .hero-youtube-frame {
    position: relative;
    width: min(100%, calc(90dvh * 16 / 9));
    aspect-ratio: 16 / 9;
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    background: transparent;
}

.hero.hero--with-youtube-bg .hero-youtube-wrap {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

.hero.hero--with-youtube-bg .hero-youtube-iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.hero.hero--with-youtube-bg .hero-youtube-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(247, 245, 241, 0.82) 0%,
        rgba(247, 245, 241, 0.35) 14%,
        rgba(247, 245, 241, 0.06) 38%,
        rgba(247, 245, 241, 0.05) 50%,
        rgba(247, 245, 241, 0.06) 62%,
        rgba(247, 245, 241, 0.35) 86%,
        rgba(247, 245, 241, 0.82) 100%
    );
}

.hero.hero--with-youtube-bg .hero-youtube-overlay {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding: clamp(10px, 2.5vw, 18px) clamp(12px, 3vw, 22px) clamp(12px, 2.8vw, 20px);
    box-sizing: border-box;
}

.hero.hero--with-youtube-bg .hero-youtube-top {
    flex-shrink: 0;
    width: 100%;
    max-width: 900px;
}

.hero.hero--with-youtube-bg .hero-cta {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
}

.hero.hero--with-youtube-bg h1 {
    margin-bottom: 10px;
    color: var(--text-color);
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 1),
        0 2px 14px rgba(255, 255, 255, 0.75);
}

.hero.hero--with-youtube-bg .hero-subtitle {
    margin-bottom: 0;
    color: var(--text-color);
    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(255, 255, 255, 1);
}

@media (prefers-reduced-motion: reduce) {
    .hero.hero--with-youtube-bg .hero-youtube-wrap {
        visibility: hidden;
    }

    .hero.hero--with-youtube-bg .hero-youtube-scrim {
        background: linear-gradient(135deg, #e8e2d8 0%, #f7f5f1 100%);
    }
}

/* Home hero: bright photo — light scrim (similar feel to jncblinds.com.au) */
.hero.hero--with-shutter-bg {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background-color: #ece8e0;
    color: var(--text-color);
}

.hero.hero--with-shutter-bg::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(22, 26, 32, 0.52) 0%,
            rgba(22, 26, 32, 0.14) 26%,
            transparent 52%
        ),
        linear-gradient(
            135deg,
            rgba(0, 0, 0, 0.1) 0%,
            rgba(0, 0, 0, 0.03) 45%,
            rgba(0, 0, 0, 0.14) 100%
        );
}

.hero-bg-slide {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity 900ms ease;
    will-change: opacity;
}

.hero-bg-slide.is-active {
    opacity: 1;
}

.hero.hero--with-shutter-bg .container {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    min-height: 520px;
}

/* Next home: legacyContent injects .hero-split + .hero-booking-card (no styles in globals.css) */
.hero.hero--with-shutter-bg .container.hero-split {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(260px, 400px);
    gap: clamp(1.25rem, 3vw, 2.5rem);
    align-items: stretch;
    text-align: left;
}

.hero.hero--with-shutter-bg .container.hero-split .hero-copy {
    display: flex;
    flex-direction: column;
    min-height: 100%;
}

.hero-booking-card {
    background: rgba(255, 255, 255, 0.96);
    color: #2b3945;
    border-radius: 12px;
    padding: 18px 20px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14);
    align-self: start;
}

.hero-booking-card h3 {
    margin: 0 0 6px;
    font-size: 1.12rem;
    color: #1f2933;
}

.hero-booking-card > p {
    margin: 0 0 12px;
    color: #5f6972;
    font-size: 0.92rem;
    line-height: 1.45;
}

.hero-booking-form {
    display: grid;
    gap: 10px;
}

.hero-booking-form input[type="text"],
.hero-booking-form input[type="tel"] {
    width: 100%;
    border: 1px solid #d0d6dd;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 0.92rem;
    font-family: inherit;
    box-sizing: border-box;
}

.hero-booking-checkboxes {
    display: grid;
    gap: 8px;
    text-align: left;
    margin-top: 2px;
}

.hero-booking-checkboxes-label {
    font-size: 0.82rem;
    font-weight: 700;
    color: #4a5865;
}

.hero-booking-checkboxes-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
    align-items: center;
}

.hero-booking-checkbox-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    font-size: 0.82rem;
    color: #334350;
    cursor: pointer;
    min-width: 0;
    text-align: left;
}

.hero-booking-checkbox-row input[type="checkbox"] {
    width: 1rem;
    height: 1rem;
    margin: 0;
    flex-shrink: 0;
    accent-color: var(--brand-black);
}

.hero-booking-form button[type="submit"] {
    margin-top: 4px;
    border: 0;
    border-radius: 10px;
    padding: 12px 14px;
    background: var(--brand-black);
    color: #fff;
    font-weight: 700;
    cursor: pointer;
    width: 100%;
    font-size: 0.95rem;
}

.hero-booking-form button[type="submit"]:hover {
    background: #111827;
}

.hero-booking-card > a {
    display: inline-block;
    margin-top: 10px;
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--brand-black);
    text-decoration: none;
}

.hero-booking-card > a:hover {
    text-decoration: underline;
}

@media (max-width: 900px) {
    .hero.hero--with-shutter-bg .container.hero-split {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .hero.hero--with-shutter-bg .container.hero-split .hero-copy {
        text-align: center;
    }

    .hero.hero--with-shutter-bg .container.hero-split .hero-cta {
        justify-content: center;
    }

    .hero-booking-checkboxes-grid {
        grid-template-columns: 1fr;
    }
}

.hero.hero--with-shutter-bg .hero-cta {
    margin-top: auto;
    padding-top: 28px;
}

/* Full-bleed photo heroes: match designer/double-curtain treatment — dark type + soft white halo */
.hero.hero--with-shutter-bg h1 {
    font-size: clamp(2.7rem, 4.2vw, 3.35rem);
    line-height: 1.08;
    margin-bottom: 40px;
    color: var(--text-color);
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 1),
        0 2px 14px rgba(255, 255, 255, 0.75);
}

.hero.hero--with-shutter-bg .hero-subtitle,
.hero.hero--with-shutter-bg .hero-copy .hero-subtitle {
    font-size: clamp(1.22rem, 2vw, 1.45rem);
    font-weight: 700;
    line-height: 1.28;
    color: var(--text-color);
    text-shadow:
        0 0 14px rgba(255, 255, 255, 0.92),
        0 1px 2px rgba(255, 255, 255, 1);
    margin-bottom: 1.65rem;
}

/* Lines under subtitle (not .hero-subtitle) */
.hero.hero--with-shutter-bg .hero-copy p:not(.hero-subtitle),
.hero.hero--with-shutter-bg .container:not(.hero-split) > p:not(.hero-subtitle) {
    color: var(--text-color);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.9);
}

/* Bright lifestyle photo — keep background sharp (no heavy grey wash; no image blur) */
.hero.hero--with-shutter-bg.hero--clear-bg {
    background-color: #ecebe8;
    color: var(--text-color);
}

.hero.hero--with-shutter-bg.hero--clear-bg::before {
    background:
        linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.55) 0%,
            rgba(255, 255, 255, 0.15) 38%,
            transparent 62%
        ),
        linear-gradient(
            125deg,
            rgba(255, 255, 255, 0.12) 0%,
            transparent 48%
        );
}

.hero.hero--with-shutter-bg.hero--clear-bg .hero-bg-slide {
    filter: none;
    -webkit-filter: none;
}

.btn-primary {
    background: var(--brand-black);
    color: var(--white);
    padding: 15px 30px;
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.btn-primary:hover {
    background: var(--brand-gold);
    color: var(--brand-black);
}

/* Secondary / “Call …” CTA — same palette as “What Sets EziLux PolyShield…” (.features: light-bg + primary heading) */
.btn-secondary {
    background: var(--white);
    color: var(--brand-black);
    padding: 15px 30px;
    border: 2px solid var(--brand-gold);
    border-radius: 5px;
    text-decoration: none;
    font-weight: 600;
    transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.btn-secondary:hover {
    background: var(--brand-black);
    color: var(--white);
    border-color: var(--brand-black);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
}

.value-position-section {
    background: #fff;
    padding: 50px 0 20px;
}

.value-position-card {
    border: 1px solid #dde3e8;
    border-radius: 14px;
    padding: 28px;
    background: #ffffff;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.05);
}

.value-kicker {
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    font-size: 0.75rem;
    color: #6f7f8c;
    margin-bottom: 8px;
}

.value-position-card h2 {
    color: #1f2933;
    margin-bottom: 10px;
}

.value-position-card .value-intro {
    font-size: 1.05rem;
    line-height: 1.55;
    margin-bottom: 14px;
}

.value-position-card p {
    color: #58636f;
}

.value-cta-group {
    margin-top: 16px;
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
}

.value-local-links {
    margin-top: 12px;
    font-size: 0.94rem;
}

.value-local-links a {
    margin-left: 8px;
    color: #1f2933;
    font-weight: 600;
    text-decoration: none;
}

.value-local-links span {
    margin: 0 8px;
    color: #9aa3ad;
}

/* Home page: shop at home / in-home consultation */
.home-shop-at-home {
    padding: 48px 0 56px;
    background: var(--light-bg);
}

.home-shop-at-home > .container {
    max-width: 960px;
}

.home-shop-at-home h2 {
    text-align: center;
    font-size: clamp(1.65rem, 3vw, 2rem);
    color: var(--primary-color);
    margin: 0 0 16px;
    font-weight: 700;
}

.home-shop-at-home-lead {
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.65;
    color: #555;
    margin: 0 auto 24px;
    max-width: 720px;
}

.home-shop-at-home-hero-figure {
    margin: 0 auto 20px;
    max-width: 960px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.home-shop-at-home-hero-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.home-shop-at-home-cta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px 20px;
    justify-content: center;
    align-items: center;
    margin-bottom: 8px;
}

.home-shop-at-home-more {
    flex: 0 0 100%;
    text-align: center;
    margin-top: 4px;
    border-bottom: 0;
}

.home-shop-at-home-subheading {
    text-align: center;
    font-size: 1.35rem;
    color: var(--text-color);
    margin: 32px 0 8px;
    font-weight: 700;
}

.home-shop-at-home-split {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(22px, 3.5vw, 40px);
    align-items: center;
    max-width: 1100px;
    margin: 0 auto;
    padding: 28px 16px 0;
}

.home-shop-at-home-split--reverse .home-shop-at-home-media {
    order: 2;
}

.home-shop-at-home-split--reverse .home-shop-at-home-copy {
    order: 1;
}

.home-shop-at-home-media img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.1);
    vertical-align: middle;
}

.home-shop-at-home-copy h4 {
    font-size: 1.2rem;
    color: var(--primary-color);
    margin: 0 0 14px;
    font-weight: 700;
}

.home-shop-at-home-list {
    margin: 0;
    padding-left: 1.2rem;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.65;
}

.home-shop-at-home-list li {
    margin-bottom: 0.5rem;
}

.home-shop-at-home-list li:last-child {
    margin-bottom: 0;
}

@media (max-width: 820px) {
    .home-shop-at-home-split {
        grid-template-columns: 1fr;
        padding-top: 22px;
    }

    .home-shop-at-home-split--reverse .home-shop-at-home-media,
    .home-shop-at-home-split--reverse .home-shop-at-home-copy {
        order: unset;
    }
}

.features.features--white-band {
    background: var(--white);
}

/* PolyShield product page long-form */
.polyshield-prose {
    max-width: 720px;
    margin: 0 auto;
    text-align: left;
}

.polyshield-prose p {
    margin-bottom: 1rem;
    line-height: 1.65;
    color: #555;
}

.polyshield-list {
    max-width: 560px;
    margin: 24px auto 0;
    text-align: left;
    line-height: 1.85;
    padding-left: 1.25rem;
}

/* Centered “subtitle” photo between section title and body (e.g. Tailored to Thrive) */
.polyshield-section-subfigure {
    margin: 8px auto 28px;
    max-width: min(960px, 100%);
    text-align: center;
}

.polyshield-section-subfigure img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0 auto;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
}

.polyshield-withstand-lead {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(1.05rem, 2vw, 1.22rem);
    line-height: 1.45;
    color: var(--text-dark, #303030);
}

.polyshield-cta-line {
    text-align: center;
    margin-top: 1.25rem;
}

.polyshield-split-grid {
    margin-top: 12px;
}

/* PolyShield page: locally made (title + factory image + intro) below hero */
.polyshield-made {
    padding: 48px 0 56px;
    background: var(--white);
}

/* Alternate band (matches .features / roller-blinds section rhythm) */
.polyshield-made.polyshield-made--light-bg {
    background: var(--light-bg);
}

.polyshield-made h2 {
    text-align: center;
    font-size: clamp(1.65rem, 3vw, 2rem);
    color: var(--primary-color);
    margin: 0 0 28px;
    font-weight: 700;
}

.polyshield-made-intro {
    max-width: 720px;
    margin: 0 auto 28px;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.65;
    color: #555;
}

.polyshield-made-figure {
    margin: 0 auto 28px;
    max-width: 960px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.polyshield-made-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.polyshield-made-lead {
    max-width: 720px;
    margin: 0 auto;
    text-align: center;
    font-size: 1.1rem;
    line-height: 1.65;
    color: #555;
}

/* Designer curtains — “Customize your heading”: full-bleed lifestyle + copy */
.designer-heading-showcase {
    margin-top: 8px;
}

.designer-heading-showcase-item + .designer-heading-showcase-item {
    margin-top: clamp(36px, 5vw, 52px);
}

.designer-heading-showcase-copy {
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    padding: 0 16px 22px;
}

.designer-heading-showcase-copy h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.5rem);
    color: var(--primary-color);
    margin: 0 0 12px;
    font-weight: 700;
}

.designer-heading-showcase-copy p {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #555;
}

.designer-heading-showcase-figure {
    margin: 0;
    width: 100vw;
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    max-width: none;
}

.designer-heading-showcase-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Roller blinds page — FAQ (pairs with FAQPage JSON-LD) */
.roller-faq {
    padding: 56px 0 64px;
    background: var(--light-bg);
}

.roller-faq h2 {
    text-align: center;
    font-size: clamp(1.5rem, 2.8vw, 1.85rem);
    color: var(--primary-color);
    margin: 0 0 28px;
    font-weight: 700;
}

.roller-faq-item {
    background: var(--white);
    padding: 22px 24px;
    margin: 0 auto 14px;
    max-width: 800px;
    border-radius: 10px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
}

.roller-faq-item:last-child {
    margin-bottom: 0;
}

.roller-faq-item h3 {
    font-size: 1.08rem;
    margin: 0 0 10px;
    color: var(--text-color);
    font-weight: 700;
}

.roller-faq-item p {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #555;
}

/* Roller blinds — NoiseFree feature block */
.roller-noisefree {
    padding: 56px 0 64px;
    background: linear-gradient(180deg, #f7f6f3 0%, var(--white) 55%, var(--white) 100%);
    border-top: 1px solid rgba(0, 0, 0, 0.06);
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

.roller-noisefree-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: clamp(28px, 4vw, 48px);
    align-items: start;
}

.roller-noisefree-kicker {
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--primary-color);
    font-weight: 700;
    margin: 0 0 12px;
}

.roller-noisefree-copy h2 {
    font-size: clamp(1.55rem, 2.8vw, 2rem);
    line-height: 1.2;
    color: var(--text-color);
    margin: 0 0 18px;
    font-weight: 700;
}

.roller-noisefree-lead {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #444;
    margin: 0 0 16px;
}

.roller-noisefree-copy > p:last-child {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.65;
    color: #555;
}

.roller-noisefree-figure {
    margin: 0 0 18px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.1);
}

.roller-noisefree-figure img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Inline roller-blind demos: full container width, intrinsic aspect ratio — no fake letterbox chrome */
.roller-noisefree-video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: auto;
    border-radius: 12px;
    background: transparent;
    box-shadow: 0 10px 36px rgba(0, 0, 0, 0.12);
}

.roller-noisefree-video-caption {
    margin: 10px 0 0;
    font-size: 0.92rem;
    color: #666;
    text-align: center;
    line-height: 1.5;
}

.roller-motor-section .roller-motor-video-wrap {
    max-width: 100%;
    margin: 32px auto 0;
}

.roller-motor-section .roller-noisefree-video-caption a {
    margin-left: 0.35em;
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.roller-motor-section .roller-noisefree-video-caption a:hover {
    color: var(--secondary-color);
}

@media (max-width: 900px) {
    .roller-noisefree-grid {
        grid-template-columns: 1fr;
    }
}

/* Features Section */
.features {
    padding: 80px 0;
    background: var(--light-bg);
}

.features h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 50px;
    color: var(--primary-color);
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 30px;
}

.feature-card {
    background: var(--white);
    padding: 30px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    text-align: center;
}

.feature-card h3 {
    color: var(--primary-color);
    margin-bottom: 15px;
    font-size: 1.3rem;
}

/* Products Section */
.products {
    padding: 80px 0;
}

.products h2 {
    text-align: center;
    font-size: 2rem;
    margin-bottom: 10px;
    color: var(--primary-color);
}

.section-subtitle {
    text-align: center;
    color: #666;
    margin-bottom: 50px;
    font-size: 1.1rem;
}

/*
 * EziVue: match subtitle → body spacing to Harder Paint (.features h2 → .polyshield-prose uses 50px).
 */
.products--eziview .section-subtitle {
    margin-bottom: 50px;
}

/*
 * Horizontally centre the copy+SVG block. (.cluster wraps .eziview-system only.)
 * Use margin auto + fit width — not flex alone — and avoid `min(..., 100%)` on grid tracks:
 * with a shrink-wrapped grid, `100%` resolves to the full container and the first column
 * stretches wide, so the block looks left-heavy even when the wrapper is “centred”.
 */
.eziview-cluster {
    box-sizing: border-box;
    width: 100%;
}

@media (min-width: 900px) {
    .eziview-cluster {
        width: fit-content;
        max-width: 100%;
        margin-inline: auto;
    }
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

.eziview-system {
    display: grid;
    grid-template-columns: 1fr;
    gap: 28px;
    column-gap: 12px;
    align-items: start;
    max-width: 1040px;
    margin: 0 auto;
    text-align: left;
}

/*
 * Desktop: avoid `1fr` on the copy column — it stretches across the container and leaves a huge
 * dead band between wrapped text and the SVG. Cap copy at ~62ch; `.eziview-cluster` centres the pair.
 */
@media (min-width: 900px) {
    .eziview-cluster .eziview-system {
        display: grid;
        /* Cap copy column at 62ch only — do not use `min(62ch, 100%)` here (see .eziview-cluster). */
        grid-template-columns: minmax(0, 62ch) minmax(0, 200px);
        column-gap: 6px;
        row-gap: 24px;
        align-items: start;
        width: fit-content;
        max-width: min(100%, 1040px);
        margin: 0;
        box-sizing: border-box;
    }

    .eziview-cluster .eziview-system .polyshield-prose {
        margin: 0;
        max-width: none;
        padding-right: 0;
        min-width: 0;
    }
}

/* Need a definite width so aspect-ratio can resolve height (otherwise grid item can collapse to 0×0). */
.eziview-tilt-embed {
    width: 100%;
    max-width: min(200px, 100%);
    margin: 0 auto;
    justify-self: center;
    min-width: 0;
}

@media (min-width: 900px) {
    .eziview-tilt-embed {
        margin: 0;
        justify-self: start;
        max-width: 200px;
    }
}

/* Blend with section background — no white “card” slab (matches surrounding cream / white). */
.eziview-tilt-frame {
    position: relative;
    width: 100%;
    min-width: 0;
    border-radius: 10px;
    background: transparent;
    border: none;
    box-shadow: none;
    overflow: hidden;
    /* Slightly less tall vs width so the preview feels proportional to body copy */
    aspect-ratio: 2 / 5;
}

.eziview-tilt-loading {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    color: #6b7280;
    font-size: 0.95rem;
}

.eziview-tilt-frame svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.eziview-tilt-frame svg g,
.eziview-tilt-frame svg path {
    vector-effect: non-scaling-stroke;
}

.product-card {
    background: var(--white);
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    transition: transform 0.3s;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    object-position: top;
}

.product-card h3 {
    padding: 20px 20px 10px;
    color: var(--primary-color);
    font-size: 1.5rem;
}

.product-card p {
    padding: 0 20px 20px;
    color: #666;
}

.btn-link {
    display: inline-block;
    margin: 0 20px 20px;
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 2px solid var(--primary-color);
    transition: color 0.3s;
}

.btn-link:hover {
    color: var(--secondary-color);
    border-color: var(--secondary-color);
}

/* Testimonials / Google reviews (5★ only via API) */
.testimonials {
    padding: 80px 0;
    background: var(--light-bg);
}

.testimonials-kicker {
    text-align: center;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.95rem;
    letter-spacing: 0.06em;
    margin: 0 0 12px;
}

.testimonials h2 {
    text-align: center;
    font-size: 2rem;
    color: #1a1a1a;
    margin: 0 0 16px;
    font-weight: 700;
}

.testimonials-divider {
    width: 120px;
    height: 3px;
    background: var(--primary-color);
    margin: 0 auto 28px;
    border-radius: 2px;
}

.testimonials-summary {
    text-align: center;
    margin-bottom: 32px;
}

.testimonials-summary[hidden] {
    display: none !important;
}

.testimonials-summary-stars {
    color: var(--primary-color);
    font-size: 1.25rem;
    letter-spacing: 2px;
    display: block;
    margin-bottom: 6px;
}

.testimonials-summary-text {
    margin: 0;
    color: #555;
    font-size: 1rem;
}

.testimonials-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 -8px;
}

.testimonials:not(.testimonials--ready) .testimonials-nav {
    visibility: hidden;
}

.testimonials-nav {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    background: var(--white);
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, color 0.2s;
}

.testimonials-nav:hover {
    background: var(--primary-color);
    color: var(--white);
}

.testimonials-nav::after {
    content: "";
    width: 10px;
    height: 10px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(225deg);
    margin-left: 4px;
}

.testimonials-nav--prev::after {
    border-left: none;
    border-bottom: none;
    border-right: 2px solid currentColor;
    border-top: 2px solid currentColor;
    transform: rotate(225deg);
    margin-left: 0;
    margin-right: 4px;
}

.testimonials-viewport {
    flex: 1;
    overflow: hidden;
    min-width: 0;
}

.testimonials-track {
    display: flex;
    gap: 24px;
    transition: transform 0.4s ease;
    padding: 8px 4px 16px;
}

.testimonials-loading,
.testimonials-empty {
    flex: 1;
    text-align: center;
    color: #666;
    padding: 24px 16px;
    margin: 0;
}

.testimonial-card {
    flex: 0 0 calc(33.333% - 16px);
    min-width: 260px;
    background: var(--white);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

.testimonial-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
    background: #e8e4df;
    flex-shrink: 0;
}

.testimonial-avatar--fallback {
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: var(--primary-color);
    font-size: 1.1rem;
}

.testimonial-who {
    flex: 1;
    min-width: 0;
}

.testimonial-name {
    font-weight: 700;
    color: #1a1a1a;
    font-size: 1rem;
    margin: 0;
    line-height: 1.3;
}

.testimonial-date {
    font-size: 0.85rem;
    color: #888;
    margin: 4px 0 0;
}

.testimonial-google-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    opacity: 0.9;
}

.testimonial-stars-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.testimonial-stars {
    color: var(--primary-color);
    letter-spacing: 1px;
    font-size: 1rem;
}

.testimonial-verified {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: #1a73e8;
    font-weight: 600;
}

.testimonial-text {
    margin: 0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.55;
}

.testimonial-readmore {
    margin: 10px 0 0;
    padding: 0;
    border: none;
    background: none;
    color: #888;
    font-size: 0.9rem;
    text-decoration: underline;
    cursor: pointer;
    font-family: inherit;
}

.testimonial-readmore:hover {
    color: var(--primary-color);
}

.testimonial-readmore[hidden] {
    display: none;
}

.testimonials-footer {
    text-align: center;
    margin: 8px 0 0;
}

.testimonials-footer a {
    color: var(--primary-color);
    font-weight: 600;
    text-decoration: underline;
}

@media (max-width: 992px) {
    .testimonial-card {
        flex: 0 0 calc(50% - 12px);
    }
}

@media (max-width: 620px) {
    .testimonials-carousel {
        margin: 0;
    }

    .testimonials-nav {
        width: 38px;
        height: 38px;
    }

    .testimonial-card {
        flex: 0 0 100%;
    }
}

@media (prefers-reduced-motion: reduce) {
    .testimonials-track {
        transition: none;
    }
}

/* Inspiration Gallery: two tabs; thumbnails from EziAssist Image Library only (see /js/inspiration-gallery.js) */
.inspiration-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-bottom: 12px;
}

.inspiration-tab {
    font-family: inherit;
    font-size: 1rem;
    font-weight: 600;
    padding: 12px 24px;
    /* Match header .cta-button shape (rounded rectangle, not pill) */
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.inspiration-tab:hover {
    background: rgba(193, 170, 128, 0.12);
    border-color: var(--primary-color);
    color: var(--text-color);
}

.inspiration-tab.is-active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.inspiration-filter-tabs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 0 0 12px;
}

.inspiration-filter-tab {
    font-family: inherit;
    font-size: 0.94rem;
    font-weight: 600;
    padding: 8px 18px;
    border: 2px solid var(--primary-color);
    border-radius: 5px;
    background: var(--white);
    color: var(--text-color);
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.inspiration-filter-tab:hover {
    background: rgba(193, 170, 128, 0.12);
    border-color: var(--primary-color);
    color: var(--text-color);
}

.inspiration-filter-tab.is-active {
    background: var(--primary-color);
    color: var(--white);
    border-color: var(--primary-color);
}

.inspiration-tab-panel[hidden] {
    display: none !important;
}

.inspiration-card-media {
    position: relative;
    height: 200px;
    background: #e8e4dc;
    overflow: hidden;
}

.inspiration-card-placeholder {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #ebe6dc 0%, #ddd5c8 100%);
}

.inspiration-card-img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: 200px;
    object-fit: cover;
    display: block;
}

.inspiration-card-img[hidden] {
    display: none !important;
}

/* Blog index — match Inspiration gallery cards (image on top, gold title, excerpt, link) */
.page-blog-root .blog-index-section {
    padding: 10px 0 48px;
    background: var(--light-bg);
}

.page-blog-root .blog-index-section .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: clamp(18px, 2.5vw, 26px);
}

.page-blog-root .blog-card.product-card {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 0;
    border-radius: 12px;
    border: 1px solid rgba(10, 6, 7, 0.08);
    box-shadow: 0 4px 18px rgba(10, 6, 7, 0.08);
    text-align: left;
}

.page-blog-root .blog-card .blog-card-media {
    position: relative;
    aspect-ratio: 3 / 2;
    background: #e8e4dc;
    overflow: hidden;
}

.page-blog-root .blog-card .blog-card-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.page-blog-root .blog-card .blog-card-body {
    padding: 14px 16px 18px;
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 8px;
}

.page-blog-root .blog-card h3 {
    padding: 0;
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.3;
    color: var(--primary-color);
}

.page-blog-root .blog-card p {
    padding: 0;
    margin: 0;
    flex: 1;
    font-size: 0.94rem;
    line-height: 1.5;
    color: #555;
}

.page-blog-root .blog-card .btn-link {
    margin: 4px 0 0;
    align-self: flex-start;
}

/* Imported WordPress article body (synced from www.ezilux.com.au) */
.blog-post-inner {
    max-width: 900px;
}

.blog-post-card {
    background: var(--white);
    padding: clamp(22px, 4vw, 40px);
    border-radius: 12px;
    border: 1px solid rgba(10, 6, 7, 0.08);
    box-shadow: 0 4px 22px rgba(10, 6, 7, 0.06);
}

.blog-post-content {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--text-color);
}

.blog-post-content > *:first-child {
    margin-top: 0;
}

.blog-post-content .wp-block-heading,
.blog-post-content h2 {
    margin-top: 1.75rem;
    margin-bottom: 0.75rem;
    font-size: clamp(1.25rem, 2.4vw, 1.5rem);
    color: var(--primary-color);
}

.blog-post-content h3 {
    margin-top: 1.35rem;
    margin-bottom: 0.5rem;
    font-size: 1.15rem;
    color: var(--text-color);
}

.blog-post-content p {
    margin: 0 0 1rem;
}

.blog-post-content ul,
.blog-post-content ol {
    margin: 0 0 1rem;
    padding-left: 1.35rem;
}

.blog-post-content img {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
}

.blog-post-content figure {
    margin: 1.25rem 0;
}

.blog-post-content a {
    color: var(--primary-color);
    font-weight: 600;
}

/* Inspiration pages: consistent hero height + tighter rhythm */
main.legacy-page:has(.page-inspiration-root) .trust-strip,
body:has(.page-inspiration-root) .trust-strip {
    padding: 5px 0;
}

main.legacy-page:has(.page-inspiration-root) .trust-strip-grid,
body:has(.page-inspiration-root) .trust-strip-grid {
    gap: 8px;
}

/* Main inspiration hub uses .page-inspiration-root wrapper; subpages use .inspiration-live-gallery.
   Keep the title block exactly the same height on all inspiration pages. */
:is(
    main.legacy-page,
    body
):is(:has(.page-inspiration-root), :has(.inspiration-live-gallery)) .hero {
    padding: 48px 0 34px;
}

:is(
    main.legacy-page,
    body
):is(:has(.page-inspiration-root), :has(.inspiration-live-gallery)) .hero h1 {
    font-size: 2rem;
    margin-bottom: 10px;
    line-height: 1.15;
}

:is(
    main.legacy-page,
    body
):is(:has(.page-inspiration-root), :has(.inspiration-live-gallery)) .hero-subtitle {
    font-size: 1rem;
    margin-bottom: 0;
    line-height: 1.4;
}

.page-inspiration-root .features.inspiration-gallery-section {
    padding: 10px 0 36px;
}

.page-inspiration-root .inspiration-tabs {
    margin-bottom: 12px;
    gap: 8px;
}

.page-inspiration-root .inspiration-tab {
    padding: 8px 18px;
    font-size: 0.94rem;
}

.page-inspiration-root .inspiration-gallery-section .products-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 12px;
}

@media (max-width: 1024px) {
    .page-inspiration-root .inspiration-gallery-section .products-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 520px) {
    .page-inspiration-root .inspiration-gallery-section .products-grid {
        grid-template-columns: 1fr;
    }
}

.page-inspiration-root .inspiration-card-media {
    height: 150px;
}

.page-inspiration-root .inspiration-card-img {
    height: 150px;
}

.page-inspiration-root .product-card {
    border-radius: 10px;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}

.page-inspiration-root .product-card:hover {
    transform: translateY(-2px);
}

.page-inspiration-root .product-card h3 {
    padding: 10px 12px 4px;
    font-size: 1.08rem;
}

.page-inspiration-root .product-card p {
    padding: 0 12px 8px;
    font-size: 0.88rem;
    line-height: 1.45;
}

.page-inspiration-root .product-card .btn-link {
    margin: 0 12px 12px;
}

.page-inspiration-root + .cta-section {
    padding: 36px 0;
}

/* Inspiration subpages: live grid from EziAssist library (see /js/inspiration-gallery.js).
   .inspiration-live-heading / .inspiration-live-intro are unused on subpages (copy kept only in HTML comments). */
.inspiration-live-gallery {
    /* Match Inspiration Gallery hub section border/position */
    padding: 10px 0 36px;
    background: transparent;
}

.inspiration-live-heading {
    margin: 0 0 8px;
    font-size: clamp(1.5rem, 2.8vw, 1.85rem);
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
}

.inspiration-live-intro {
    margin: 0 auto 20px;
    max-width: 640px;
    text-align: center;
    font-size: 0.98rem;
    line-height: 1.55;
    color: #555;
}

.inspiration-live-status {
    text-align: center;
    font-size: 0.92rem;
    color: #555;
    margin: 0 0 16px;
    min-height: 1.4em;
}

.inspiration-live-status--error {
    color: #8b2942;
}

.inspiration-live-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
    margin-top: 8px;
}

.inspiration-live-tile {
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    background: var(--white);
}

.inspiration-live-tile:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}

.inspiration-live-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.14);
}

.inspiration-live-figure {
    margin: 0;
    padding: 0;
    aspect-ratio: 4 / 3;
    background: #e8e6e1;
}

.inspiration-live-figure img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    vertical-align: middle;
    pointer-events: none;
}

.inspiration-live-figcaption {
    margin: 0;
    padding: 10px 12px;
    font-size: 0.92rem;
    line-height: 1.35;
    color: rgba(10, 6, 7, 0.88);
    background: rgba(255, 255, 255, 0.96);
}

/* Lightbox: full-screen viewer for live gallery tiles */
.inspiration-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    box-sizing: border-box;
}

.inspiration-lightbox[hidden] {
    display: none;
}

.inspiration-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    cursor: pointer;
}

.inspiration-lightbox-dialog {
    position: relative;
    z-index: 1;
    max-width: min(96vw, 1200px);
    max-height: 92vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
}

.inspiration-lightbox-dialog > * {
    pointer-events: auto;
}

.inspiration-lightbox-stage {
    max-width: 100%;
    max-height: 88vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.inspiration-lightbox-img {
    display: block;
    max-width: 100%;
    max-height: min(78vh, 800px);
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.45);
}

.inspiration-lightbox-caption {
    margin: 0;
    max-width: 42em;
    text-align: center;
    font-size: 0.95rem;
    line-height: 1.45;
    color: #f0f0f0;
}

.inspiration-lightbox-close {
    position: absolute;
    top: -6px;
    right: 0;
    z-index: 2;
    width: 44px;
    height: 44px;
    border: none;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.inspiration-lightbox-close:hover {
    background: rgba(255, 255, 255, 0.22);
}

.inspiration-lightbox-close:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.inspiration-lightbox-prev,
.inspiration-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 48px;
    height: 48px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    font-size: 1.75rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease;
}

.inspiration-lightbox-prev:hover,
.inspiration-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.26);
}

.inspiration-lightbox-prev:focus-visible,
.inspiration-lightbox-next:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.inspiration-lightbox-prev {
    left: 0;
}

.inspiration-lightbox-next {
    right: 0;
}

@media (max-width: 640px) {
    .inspiration-lightbox-prev,
    .inspiration-lightbox-next {
        width: 42px;
        height: 42px;
        font-size: 1.5rem;
    }

    .inspiration-lightbox-prev {
        left: -4px;
    }

    .inspiration-lightbox-next {
        right: -4px;
    }

    .inspiration-lightbox-close {
        top: -40px;
        right: -4px;
    }
}

/* CTA Section */
.cta-section {
    background: var(--primary-color);
    color: var(--white);
    padding: 60px 0;
    text-align: center;
}

.cta-section h2 {
    font-size: 2rem;
    margin-bottom: 10px;
}

.cta-section p {
    font-size: 1.2rem;
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    gap: 20px;
    justify-content: center;
    flex-wrap: wrap;
}

/* Footer */
footer {
    background: #2c3e50;
    color: var(--white);
    padding: 50px 0 20px;
}

.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 40px;
    margin-bottom: 30px;
}

.footer-section h4 {
    margin-bottom: 20px;
    color: var(--secondary-color);
}

.footer-section ul {
    list-style: none;
}

.footer-section ul li {
    margin-bottom: 10px;
}

.footer-section a {
    color: var(--white);
    text-decoration: none;
    transition: color 0.3s;
}

.footer-section a:hover {
    color: var(--secondary-color);
}

.footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid rgba(255,255,255,0.1);
    color: #aaa;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Motorisation product landings (tubular + curtain motors) */
.page-tubular-motors,
.page-curtain-motors {
    background: var(--white);
}

/* Curtain motors hero: bright sheers — slightly lighter scrim than roller tubular hero */
.curtain-motors-hero .curtain-motors-hero-scrim {
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.22) 0%,
        rgba(15, 23, 42, 0.1) 45%,
        rgba(15, 23, 42, 0.28) 100%
    );
}

.tubular-section--wash {
    background: #f2f1ed;
}

.tubular-section--slate {
    background: #3d4454;
    color: #e8ecf4;
}

.tubular-body--on-dark {
    color: rgba(232, 236, 244, 0.92);
}

.tubular-h2--center {
    text-align: center;
}

.slate-centered {
    text-align: center;
    max-width: 760px;
    margin: 0 auto;
}

.slate-centered .tubular-body--on-dark {
    margin-top: 16px;
}

.novo-control-wide {
    margin: 36px auto 0;
    max-width: min(1000px, 100%);
}

.novo-control-frame {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.novo-control-frame img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.novo-control-captions {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: end;
    pointer-events: none;
    padding: clamp(10px, 2.5vw, 18px);
    gap: 8px;
}

.novo-control-caption {
    font-size: clamp(0.72rem, 1.7vw, 0.88rem);
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--white);
    line-height: 1.25;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.85);
    background: rgba(10, 12, 18, 0.55);
    padding: 8px 12px;
    border-radius: 8px;
    max-width: 100%;
    box-sizing: border-box;
}

.novo-control-caption--left {
    justify-self: start;
    text-align: left;
}

.novo-control-caption--right {
    justify-self: end;
    text-align: right;
}

.curtain-capacity-section .tubular-narrow {
    max-width: 960px;
}

.curtain-capacity-wrap {
    margin-top: 28px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.curtain-capacity-table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 0.92rem;
}

.curtain-capacity-table caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    font-size: 1rem;
    padding: 0 0 14px;
    color: var(--text-color);
}

.curtain-capacity-table th,
.curtain-capacity-table td {
    border: 1px solid #d8d6d0;
    padding: 10px 10px;
    text-align: center;
}

.curtain-capacity-table thead th {
    background: #ebe9e4;
    font-weight: 700;
    color: var(--text-color);
}

.curtain-capacity-table tbody th[scope="row"] {
    background: #f7f6f3;
    font-weight: 600;
    text-align: left;
}

.curtain-capacity-note {
    margin: 16px 0 0;
    font-size: 0.88rem;
    color: #666;
    line-height: 1.5;
}

.tubular-hero {
    position: relative;
    /* Match .hero.hero--with-shutter-bg min-height (roller blinds product hero) */
    min-height: min(90vh, 940px);
    padding-bottom: 4.5rem;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow: hidden;
    isolation: isolate;
}

.tubular-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-color: #1a2332;
    background-image: url("https://api.ezilux.com.au/uploads/eziassist-images/products/roller-blinds/standard/motorised-roller-blinds-living-kurabi-1.webp");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.tubular-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    /* Lighter wash for bright lifestyle photo (legibility without crushing the room) */
    background: linear-gradient(
        180deg,
        rgba(15, 23, 42, 0.28) 0%,
        rgba(15, 23, 42, 0.14) 45%,
        rgba(15, 23, 42, 0.32) 100%
    );
}

.tubular-hero-inner {
    position: relative;
    z-index: 2;
    /*
     * Roller (.page-immersive-hero + .hero--with-shutter-bg, no trust strip) uses:
     *   padding-top: calc(var(--home-nav-stack) + 2rem + 70px)
     * with fixed header so --home-nav-stack clears the overlay. Tubular uses in-flow
     * sticky header, so match viewport position with only the post-nav offset:
     */
    padding-top: calc(2rem + 70px);
    padding-bottom: 0;
    text-align: center;
}

.tubular-hero-inner h1 {
    margin: 0;
    color: var(--text-color);
    font-size: clamp(2.7rem, 4.2vw, 3.35rem);
    font-weight: 700;
    line-height: 1.08;
    text-shadow:
        0 0 18px rgba(255, 255, 255, 0.95),
        0 1px 2px rgba(255, 255, 255, 1),
        0 2px 14px rgba(255, 255, 255, 0.75);
    max-width: 920px;
    margin-left: auto;
    margin-right: auto;
}

.tubular-section {
    padding: 72px 0;
}

.tubular-section--tight-top {
    padding-top: 32px;
}

.tubular-section--light {
    background: var(--white);
}

.tubular-section--navy {
    background: #141c2b;
    color: #e8ecf4;
}

.tubular-narrow {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

.tubular-h2 {
    margin: 0 0 12px;
    font-size: clamp(1.75rem, 3.2vw, 2.25rem);
    font-weight: 700;
    color: var(--text-color);
    text-align: center;
}

.tubular-h2--left {
    text-align: left;
}

.tubular-h2--on-dark {
    color: var(--white);
}

.tubular-subh {
    margin: 0 0 16px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
}

.tubular-lead {
    margin: 0;
    font-size: 1.12rem;
    line-height: 1.65;
    color: #444;
}

.tubular-body {
    margin: 0;
    font-size: 1.08rem;
    line-height: 1.65;
    color: #444;
}

.tubular-motor-visual {
    margin: 36px auto 0;
    padding: 0;
    max-width: min(760px, 100%);
}

.tubular-motor-visual img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
    vertical-align: middle;
}

.tubular-cordless-figure {
    margin: 28px auto 0;
    max-width: min(920px, 100%);
}

.tubular-cordless-figure img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.tubular-feat-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 28px 20px;
    margin-top: 40px;
}

.tubular-feat {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
}

.tubular-feat-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    color: #141c2b;
    background: #f1f0ec;
    border-radius: 14px;
}

.tubular-feat-icon svg {
    width: 32px;
    height: 32px;
}

.tubular-feat-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-color);
    line-height: 1.35;
}

.tubular-feat-hint {
    font-size: 0.78rem;
    color: #666;
    line-height: 1.3;
}

.tubular-voice-showcase {
    display: grid;
    grid-template-columns: 1fr 1.1fr 1fr;
    gap: 24px;
    align-items: start;
    margin-top: 40px;
    max-width: 1000px;
    margin-left: auto;
    margin-right: auto;
}

.tubular-voice-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}

.tubular-voice-col--center {
    justify-content: center;
    padding-top: 12px;
}

.tubular-voice-col--right {
    align-items: center;
}

.tubular-voice-device {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 2px solid rgba(255, 255, 255, 0.25);
    margin-bottom: 8px;
}

.tubular-bubble {
    font-size: 0.82rem;
    line-height: 1.35;
    padding: 10px 14px;
    border-radius: 12px;
    max-width: 220px;
    text-align: center;
}

.tubular-bubble--dark {
    background: rgba(255, 255, 255, 0.95);
    color: #141c2b;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
}

.tubular-voice-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.tubular-voice-badges span {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.12);
    color: #e8ecf4;
}

.tubular-phone-mock {
    width: min(200px, 42vw);
    aspect-ratio: 10 / 19;
    background: #0f172a;
    border-radius: 28px;
    padding: 10px;
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35);
    border: 3px solid rgba(255, 255, 255, 0.2);
}

.tubular-phone-screen {
    width: 100%;
    height: 100%;
    border-radius: 20px;
    background: linear-gradient(160deg, #334155 0%, #1e293b 50%, #0f172a 100%);
}

/* K25 infographic: voice, app & Bluetooth */
.tubular-seamless-diagram {
    margin: 40px auto 0;
    max-width: min(980px, 100%);
    background: #ffffff;
    border-radius: 14px;
    padding: clamp(12px, 2vw, 20px);
    box-shadow: 0 12px 44px rgba(0, 0, 0, 0.28);
}

.tubular-seamless-diagram img {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.tubular-navy-copy {
    margin: 40px auto 0;
    max-width: 720px;
    text-align: center;
    font-size: 1.05rem;
    line-height: 1.7;
    color: rgba(232, 236, 244, 0.92);
}

.tubular-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(28px, 4vw, 48px);
    align-items: center;
}

.tubular-split-media {
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
}

.tubular-split-media img,
.tubular-split-media .tubular-split-video {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

.tubular-split-media--video {
    background: #1a1f24;
}

.tubular-page-footer {
    background: #141c2b;
    color: #e8ecf4;
    padding: 56px 0 40px;
}

.tubular-footer-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 36px;
}

.tubular-footer-heading {
    margin: 0 0 14px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--white);
}

.tubular-footer-text {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.65;
    color: rgba(232, 236, 244, 0.88);
}

.tubular-footer-text a {
    color: var(--secondary-color);
    text-decoration: none;
}

.tubular-footer-text a:hover {
    text-decoration: underline;
}

.tubular-footer-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tubular-footer-form input,
.tubular-footer-form textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.08);
    color: var(--white);
    font-size: 0.95rem;
    font-family: inherit;
    box-sizing: border-box;
}

.tubular-footer-form input::placeholder,
.tubular-footer-form textarea::placeholder {
    color: rgba(232, 236, 244, 0.45);
}

.tubular-footer-submit {
    margin-top: 4px;
    padding: 12px 18px;
    border-radius: 8px;
    border: 2px solid var(--primary-color);
    background: transparent;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.2s, color 0.2s;
}

.tubular-footer-submit:hover {
    background: var(--primary-color);
    color: var(--white);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .main-nav {
        position: relative;
        align-items: center;
        gap: 12px;
        flex-wrap: wrap;
    }

    .mobile-nav-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        margin-left: auto;
        flex-direction: column;
        background: rgba(255, 255, 255, 0.96);
        border-color: rgba(10, 6, 7, 0.28);
        box-shadow: 0 4px 14px rgba(10, 6, 7, 0.08);
    }

    .mobile-nav-toggle .mobile-nav-icon {
        display: none;
    }

    nav.main-nav.mobile-nav-open .mobile-nav-toggle {
        background: rgba(193, 170, 128, 0.18);
        border-color: rgba(193, 170, 128, 0.8);
    }

    nav.main-nav.mobile-nav-open .mobile-nav-toggle .bar:nth-child(1) {
        transform: translateY(5px) rotate(45deg);
    }

    nav.main-nav.mobile-nav-open .mobile-nav-toggle .bar:nth-child(2) {
        opacity: 0;
    }

    nav.main-nav.mobile-nav-open .mobile-nav-toggle .bar:nth-child(3) {
        transform: translateY(-5px) rotate(-45deg);
    }

    /* CTA becomes a secondary row item on mobile */
    .cta-button {
        width: 100%;
        text-align: center;
        padding: 10px 14px;
        font-size: 0.95rem;
        order: 3;
    }

    /* Menu is hidden by default and becomes a dropdown panel when opened */
    .nav-menu {
        display: none;
        width: 100%;
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
        margin: 8px 0 0;
        border-top: 1px solid rgba(10, 6, 7, 0.08);
        background: #ffffff;
    }

    nav.main-nav.mobile-nav-open .nav-menu {
        display: flex;
        background: #ffffff;
        border: 1px solid rgba(10, 6, 7, 0.12);
        border-radius: 14px;
        box-shadow: 0 12px 28px rgba(10, 6, 7, 0.12);
        overflow-y: auto;
        overflow-x: hidden;
        max-height: calc(100dvh - 80px);
        -webkit-overflow-scrolling: touch;
    }

    body.mobile-nav-open {
        overflow: hidden;
        position: fixed;
        width: 100%;
    }

    .nav-menu > li {
        width: 100%;
    }

    .nav-menu > li + li {
        border-top: 1px solid rgba(10, 6, 7, 0.08);
    }

    .nav-menu > li > a {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12px 4px;
        font-size: 1.02rem;
    }

    /* Submenus: show as indented blocks on mobile */
    .nav-menu .dropdown-menu .sub-menu {
        display: block;
        position: static;
        box-shadow: none;
        background: #ffffff;
        padding: 0 0 10px 14px;
        min-width: 0;
    }

    .nav-menu .dropdown-menu .sub-menu a {
        padding: 10px 4px;
        font-size: 0.98rem;
    }

    /* Legacy four-column trust bar only — EOFY promo stays visible on mobile. */
    .trust-strip:not(.trust-strip--eofy-promo) {
        display: none;
    }

    .trust-strip--eofy-promo {
        display: block;
    }
    
    .hero h1 {
        font-size: 2rem;
    }
    
    .hero-subtitle {
        font-size: 1.1rem;
    }

    .hero.hero--with-shutter-bg .hero-subtitle,
    .hero.hero--with-shutter-bg .hero-copy .hero-subtitle {
        font-size: clamp(1.15rem, 3.2vw, 1.35rem);
    }

    /*
     * Photo heroes (home, roller blinds, polyshield, etc.) — same offset on every route.
     * Uses body:has() so Next.js catch-all pages without page-immersive-hero still match.
     */
    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg {
        /* Use --home-nav-stack which is correctly set to the measured mobile stack height (183px). */
        padding-top: calc(var(--home-nav-stack, var(--ezilux-top-stack, 8.5rem)) + var(--ezilux-hero-gap, 0.75rem));
        padding-bottom: 1.25rem;
        min-height: 0;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg::before {
        background: linear-gradient(
            180deg,
            rgba(22, 26, 32, 0.32) 0%,
            rgba(22, 26, 32, 0.08) 24%,
            transparent 48%
        );
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg.hero--clear-bg::before {
        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.72) 0%,
            rgba(255, 255, 255, 0.22) 30%,
            transparent 54%
        );
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .container,
    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .container.hero-split {
        min-height: 0;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .container.hero-split .hero-copy {
        min-height: 0;
        text-align: left;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg h1 {
        margin-top: 0;
        margin-bottom: 0.5rem;
        font-size: clamp(1.65rem, 7vw, 2rem);
        line-height: 1.12;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .hero-subtitle,
    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .hero-copy .hero-subtitle {
        margin-bottom: 0.85rem;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero.hero--with-shutter-bg .hero-cta {
        margin-top: 0.85rem;
        padding-top: 0;
        justify-content: flex-start;
    }

    body:has(.trust-strip--eofy-promo):has(.hero.hero--with-shutter-bg) .hero-booking-card {
        margin-top: 0.75rem;
    }

    /* Gradient heroes (blog, FAQ, inspiration hub): main already clears the fixed stack. */
    body:has(.trust-strip--eofy-promo):not(:has(.hero.hero--with-shutter-bg)) .hero:not(.hero--with-youtube-bg):not(.hero--brisbane-photo) {
        padding: 1rem 0 1.5rem;
    }

    body:has(.trust-strip--eofy-promo):not(:has(.hero.hero--with-shutter-bg)) .hero:not(.hero--with-youtube-bg):not(.hero--brisbane-photo) h1 {
        font-size: clamp(1.5rem, 6vw, 1.85rem);
        margin-bottom: 0.5rem;
    }

    body:has(.trust-strip--eofy-promo):is(:has(.page-inspiration-root), :has(.inspiration-live-gallery)) .hero {
        padding: 1rem 0 1.25rem;
    }
    
    .features-grid,
    .products-grid {
        grid-template-columns: 1fr;
    }

    .inspiration-tabs {
        flex-direction: column;
        align-items: stretch;
    }

    .inspiration-tab {
        width: 100%;
        text-align: center;
    }

    .page-inspiration-root .hero {
        padding: 14px 0 10px;
    }

    .page-inspiration-root .hero h1 {
        font-size: 1.65rem;
    }

    .tubular-feat-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .tubular-voice-showcase {
        grid-template-columns: 1fr;
    }

    .tubular-voice-col--center {
        order: -1;
    }

    .tubular-split {
        grid-template-columns: 1fr;
    }

    .tubular-footer-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 480px) {
    .tubular-feat-grid {
        grid-template-columns: 1fr;
    }
}

/* --- Shutters Brisbane: photo hero + live stat (replaces full-width YouTube hero) --- */
.hero.hero--brisbane-photo {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    padding: 0;
    min-height: min(72vw, 520px);
    background: #ece8e0;
    color: var(--text-color);
    text-align: center;
}

.hero-brisbane-photo-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.hero-brisbane-photo-scrim {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(
        180deg,
        rgba(247, 245, 241, 0.92) 0%,
        rgba(247, 245, 241, 0.55) 22%,
        rgba(247, 245, 241, 0.35) 45%,
        rgba(247, 245, 241, 0.55) 78%,
        rgba(247, 245, 241, 0.94) 100%
    );
}

.hero-brisbane-photo-inner {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    min-height: min(72vw, 520px);
    padding: clamp(18px, 4vw, 36px) clamp(14px, 3vw, 22px) clamp(22px, 4vw, 40px);
    box-sizing: border-box;
}

.hero-brisbane-photo-top {
    width: 100%;
    max-width: 920px;
}

.hero.hero--brisbane-photo h1 {
    margin-bottom: 10px;
    color: var(--text-color);
    text-shadow: 0 0 14px rgba(255, 255, 255, 0.95), 0 1px 2px rgba(255, 255, 255, 1);
}

.hero.hero--brisbane-photo .hero-subtitle {
    margin-bottom: 14px;
    color: var(--text-color);
    text-shadow: 0 0 12px rgba(255, 255, 255, 0.92), 0 1px 2px rgba(255, 255, 255, 1);
}

.hero-brisbane-stats {
    margin: 0 auto;
    max-width: 640px;
    font-size: clamp(1rem, 2.4vw, 1.15rem);
    line-height: 1.45;
    font-weight: 600;
    color: #1f2933;
}

.hero-brisbane-stats strong {
    font-size: clamp(1.15rem, 2.8vw, 1.35rem);
}

.hero-brisbane-stats-note {
    display: block;
    margin-top: 6px;
    font-size: 0.85rem;
    font-weight: 400;
    color: #5f6972;
}

.hero.hero--brisbane-photo .hero-cta {
    margin-top: 12px;
}

@media (max-width: 640px) {
    .hero.hero--brisbane-photo {
        min-height: min(95vw, 480px);
    }

    .hero-brisbane-photo-inner {
        min-height: min(95vw, 480px);
    }
}

/* Shutters Brisbane: YouTube beside factory image */
.polyshield-made-media-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto 28px;
}

.polyshield-made-video-col {
    min-width: 0;
}

.polyshield-made-video-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    background: #111;
}

.polyshield-made-video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.polyshield-made-video-caption {
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: #666;
    text-align: center;
}

.polyshield-made-figure--paired {
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .polyshield-made-media-row {
        grid-template-columns: 1fr;
    }
}

/* --- Mobile readability: larger body copy on phones --- */
@media (max-width: 768px) {
    html {
        font-size: 18px;
        -webkit-text-size-adjust: 100%;
        text-size-adjust: 100%;
    }

    body {
        font-size: 1rem;
        line-height: 1.65;
    }

    .header-top {
        font-size: 1rem;
    }

    main.legacy-page p,
    main.legacy-page li,
    main.legacy-page .content p,
    main.legacy-page section p {
        font-size: 1.05rem;
        line-height: 1.65;
    }

    .faq-list summary {
        font-size: 1.05rem;
    }

    .faq-list details > p {
        font-size: 1rem;
    }

    .features p,
    .feature-card p,
    .product-card p {
        font-size: 1rem;
    }

    .product-card h3 {
        font-size: 1.35rem;
    }

    .testimonials p,
    .testimonial-card p,
    .google-review-text {
        font-size: 1rem;
    }

    .web-lead-form label,
    .web-lead-interests-label,
    .web-lead-check,
    .contact-consultation-form label,
    .hero-booking-form > label,
    .hero-booking-checkbox-row {
        font-size: 1rem;
    }

    .web-lead-form input,
    .web-lead-form textarea,
    .contact-consultation-form input,
    .contact-consultation-form textarea,
    .hero-booking-form input[type="text"],
    .hero-booking-form input[type="tel"] {
        font-size: 1.05rem;
    }

    .cta-button,
    .btn,
    .btn-primary,
    .btn-secondary {
        font-size: 1rem;
    }

    footer,
    footer p,
    footer a,
    footer li {
        font-size: 1rem;
    }

    .roller-faq-item p,
    .roller-faq-item h3 {
        font-size: 1.05rem;
    }

    .booking-success-modal__welcome,
    .booking-success-modal__note,
    .booking-success-modal__dl > div {
        font-size: 1rem;
    }

    .week-strip-day {
        font-size: 0.92rem;
    }

    .week-strip-dow {
        font-size: 0.8rem;
    }

    .slot-btn,
    .calendar-day {
        font-size: 1rem;
    }
}