/* ============================================
   BRAND GUIDELINES - CSS VARIABLES & CLASSES
   ============================================
   
   USAGE GUIDE:
   
   COLOR VARIABLES:
   - Use CSS variables for consistent colors:
     color: var(--color-primary);        Dark Blue #0d3a5d
     background-color: var(--color-secondary); Dark Gray #4a5b5d
   
   TYPOGRAPHY CLASSES:
   Apply these classes directly to elements:
   - .typography-h1, .typography-h2, .typography-h3
   - .typography-body, .typography-lead-paragraph
   - .typography-cta, .typography-cta-description
   - .typography-article-heading, .typography-faqs
   - .typography-feature-heading, .typography-feature-description
   - .typography-alt-h1, .typography-alt-h2, .typography-alt-h3 (Aptos font)
   - .typography-highlight-book, .typography-highlight-semibold
   
   COLOR UTILITY CLASSES:
   - .color-primary, .color-secondary, .color-accent
   - .bg-primary, .bg-secondary, .bg-accent, .bg-light-gray
    
   Example:
   <h1 class="typography-h1">Heading</h1>
   <p class="typography-body color-secondary">Body text</p>
   <div class="bg-primary">Dark blue background</div>
   
   ============================================ */

/* Iowan Old Style Font */
@font-face {
    font-family: "Iowan Old Style";
    src: url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.eot");
    src: url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/105522e6f4e63f17e4ea721f353925de.svg#Iowan Old Style")format("svg");
    font-display: swap; /* Prevent layout shift from font loading */
}

/* Soleil Font */
@font-face {
    font-family: "Soleil";
    src: url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.eot");
    src: url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.eot?#iefix")format("embedded-opentype"),
    url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.woff2")format("woff2"),
    url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.woff")format("woff"),
    url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.ttf")format("truetype"),
    url("https://db.onlinewebfonts.com/t/9abc885bae8932fc4ba73847adbce659.svg#Soleil-Regular")format("svg");
    font-display: swap; /* Prevent layout shift from font loading */
}

/* Color Variables */
:root {
    /* Primary Colors */
    --color-primary: #0d3a5d;           /* Dark Blue - Core brand color */
    --color-primary-rgb: 0, 55, 94;
    
    /* Secondary Colors */
    --color-secondary: #4a5b5d;         /* Dark Gray/Charcoal - Supporting neutral */
    --color-secondary-rgb: 74, 91, 93;
    
    /* Accent Colors */
    --color-accent: #ffffff;             /* White - For clarity and contrast */
    --color-accent-rgb: 255, 255, 255;
    
    /* Additional Colors */
    --color-light-gray: #efefef;        /* Light Gray */
    --color-light-gray-rgb: 222, 222, 222;
    
    /* Font Families */
    --font-primary: 'Soleil', sans-serif;
    --font-alternative: 'Aptos', sans-serif;
    --font-heading: 'Soleil', sans-serif;
    
    /* Font Weights */
    --font-weight-extra-bold: 800;       /* Soleil Extra Bold - Headers */
    --font-weight-bold: 700;             /* Aptos Bold - Headers */
    --font-weight-semibold: 600;         /* Soleil Semibold - Highlighting */
    --font-weight-book: 400;             /* Soleil Book - Highlighting */
    --font-weight-light: 300;            /* Soleil/Aptos Light - Subheaders & Paragraphs */
    
    /* Font Sizes - Brand Guidelines */
    --font-size-h1: 48px;                /* All Pages */
    --font-size-h2: 36px;                /* All Pages */
    --font-size-h3: 28px;                /* All Pages */
    --font-size-lead-paragraph: 22px;    /* Blogs */
    --font-size-body: 18px;              /* All Pages */
    --font-size-cta: 16px;               /* All Pages */
    --font-size-cta-description: 16px;   /* Blogs */
    --font-size-faqs: 22px;              /* All Pages */
    --font-size-article-heading: 22px;   /* All Pages */
    --font-size-feature-heading: 28px;   /* All Pages */
    --font-size-feature-description: 15px; /* All Pages */
    
    /* Button Variables - Brand Guidelines */
    --button-padding-vertical: 1em;
    --button-padding-horizontal: 2em;
    --button-border-radius: 8px;
    --button-border-width: 2px;
    --button-letter-spacing: 0;
    --button-text-align: center;
}

/* ============================================
   TYPOGRAPHY CLASSES - Brand Guidelines
   ============================================ */

/* Heading Classes - Using Minion Pro Bold */
.typography-h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h1);
    color: var(--color-primary);
}

.typography-h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
}

.typography-h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h3);
    color: var(--color-primary);
}

/* Body Text Classes */
.typography-body {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
}

.typography-lead-paragraph {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-lead-paragraph);
    color: var(--color-secondary);
}

/* CTA Classes */
.typography-cta {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    color: var(--color-primary);
}

.typography-cta-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta-description);
    color: var(--color-secondary);
}

/* Article & Content Classes */
.typography-article-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
}

.typography-faqs {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-faqs);
    color: var(--color-primary);
}

/* Feature Classes */
.typography-feature-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-feature-heading);
    color: var(--color-primary);
}

.typography-feature-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary);
}

/* Alternative Font Classes (Aptos - for Office use) */
.typography-alt-h1,
.typography-alt-h2,
.typography-alt-h3 {
    font-family: var(--font-alternative);
    font-weight: var(--font-weight-bold);
}

.typography-alt-body {
    font-family: var(--font-alternative);
    font-weight: var(--font-weight-light);
}

/* Highlighting Classes */
.typography-highlight-book {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-book);
}

.typography-highlight-semibold {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
}

/* Color Utility Classes */
.color-primary {
    color: var(--color-primary);
}

.color-secondary {
    color: var(--color-secondary);
}

.color-accent {
    color: var(--color-accent);
}

.bg-primary {
    background-color: var(--color-primary);
}

.bg-secondary {
    background-color: var(--color-secondary);
}

.bg-accent {
    background-color: var(--color-accent);
}

.bg-light-gray {
    background-color: var(--color-light-gray);
}

.colour-picker {
    display: none;
}

.faq-section {
    margin-bottom: 0!important;
}

.faq-section .faq-row h3 {
    color: var(--color-accent);
}

.wrapper-wide {
    max-width: 100% !important;
    width: 1500px !important;
}

.wrapper-wide.product_intro_cont {
    padding: 0 4em!important;
}

.features_cont .big_header_text, .features_cont .fi_title {
    font-family: var(--font-heading)!important;
}

.video-section h3 {
    display: none!important;
}

.video-section h2 {
    margin-bottom:.5em!important;
}

/* ============================================
   BUTTON CLASSES - Brand Guidelines
   ============================================
   
   Base button styles following brand guidelines:
   - Font: Soleil Light
   - Text: Center aligned, 0 tracking, optical kerning
   - Consistent padding and border radius
   
   Available button classes:
   - .btn-primary: Dark blue background, white text
   - .btn-primary-outline: White background, dark blue text and border
   - .btn-secondary: Dark gray background, white text
   - .btn-secondary-outline: White background, dark gray text and border
   
   ============================================ */

/* Base Button Styles */
.btn,
button.btn,
a.btn,
input[type="submit"].btn,
input[type="button"].btn {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    text-align: var(--button-text-align) !important;
    letter-spacing: var(--button-letter-spacing) !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    font-kerning: auto !important;
    -webkit-font-kerning: auto !important;
    font-optical-sizing: auto !important;
}

/* Primary Button - Dark Blue Background, White Text */
.btn-primary,
button.btn-primary,
a.btn-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-accent) !important;
}

.btn-primary:hover,
button.btn-primary:hover,
a.btn-primary:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Primary Outline Button - White Background, Dark Blue Text and Border */
.btn-primary-outline,
button.btn-primary-outline,
a.btn-primary-outline {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border: var(--button-border-width) solid var(--color-primary) !important;
}

.btn-primary-outline:hover,
button.btn-primary-outline:hover,
a.btn-primary-outline:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-accent) !important;
}

/* Secondary Button - Dark Gray Background, White Text */
.btn-secondary,
button.btn-secondary,
a.btn-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-accent) !important;
}

.btn-secondary:hover,
button.btn-secondary:hover,
a.btn-secondary:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Secondary Outline Button - White Background, Dark Gray Text and Border */
.btn-secondary-outline,
button.btn-secondary-outline,
a.btn-secondary-outline {
    background-color: var(--color-accent) !important;
    color: var(--color-secondary) !important;
    border: var(--button-border-width) solid var(--color-secondary) !important;
}

.btn-secondary-outline:hover,
button.btn-secondary-outline:hover,
a.btn-secondary-outline:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-accent) !important;
}

/* Legacy .button class - maps to primary button */
.button {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    text-align: var(--button-text-align) !important;
    letter-spacing: var(--button-letter-spacing) !important;
    color: var(--color-accent) !important;
    background-color: var(--color-primary) !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    font-kerning: auto !important;
    -webkit-font-kerning: auto !important;
    font-optical-sizing: auto !important;
    text-transform: uppercase !important;
}

.button:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Additional button classes that need new design */
body .blue-button,
body .plc_button,
.reset-filters,
input[type="submit"]:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-primary-outline):not(.btn-secondary-outline) {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    text-align: var(--button-text-align) !important;
    letter-spacing: var(--button-letter-spacing) !important;
    color: var(--color-accent) !important;
    background-color: var(--color-primary) !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    border-radius: 0 !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    font-kerning: auto !important;
    -webkit-font-kerning: auto !important;
    font-optical-sizing: auto !important;
    text-transform: uppercase !important;
}

body .blue-button:hover,
body .plc_button:hover,
.reset-filters:hover,
input[type="submit"]:not(.btn):not(.btn-primary):not(.btn-secondary):not(.btn-primary-outline):not(.btn-secondary-outline):hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* ============================================
   PREMIUM STYLES
   ============================================ */

/* Default Typography - Updated to use brand guidelines */
h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h1);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h3);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

h4 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

h5 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-feature-description);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin-bottom: 1em;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

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

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

.align-right {
    text-align: right;
}

/* Premium Navigation Styles - Single Blue Header */
.premium-header .top-navigation.container {
    flex-direction: row;
    justify-content: flex-end;
    align-items: center;
    padding-bottom: .5em;
    min-height: 40px; /* Prevent container from starting small */
    width: 100%; /* Ensure full width from start */
}

.premium-header .top-navigation.container .premium-contact-info {
    font-size: 18px; /* Explicit size to prevent CLS during variable loading */
}

.premium-header .top-navigation.container .btn {
    padding-top: 0.5em!important;
    padding-bottom: 0.5em!important;
    font-size: 16px !important; /* Explicit size to prevent CLS during variable loading */
    padding-left: 2em !important; /* Explicit padding to prevent CLS */
    padding-right: 2em !important; /* Explicit padding to prevent CLS */
}

.premium-header .top-navigation.container .btn-primary-outline:hover {
    background-color: var(--color-light-gray);
    color: var(--color-primary);
}

.premium-header {
    background-color: var(--color-primary);
    padding: 20px 0;
    width: 100%;
}

.premium-header .container {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

/* Logo */
.premium-header .premium-logo {
    max-width: 300px;
    flex-shrink: 0;
}

.premium-header .premium-logo img {
    width: auto;
    max-width: 300px;
    height: auto;
    margin-left: 3em;
    display: block;
}

/* Center + Right Section */
.premium-header .premium-nav-right {
    display: flex;
    align-items: center;
    gap: 40px;
    margin-left: auto;
}

/* Desktop Menu */
.premium-desktop-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 35px;
    align-items: center;
}

.premium-desktop-menu .menu-item a {
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-book);
    transition: color 0.3s ease;
}

.premium-desktop-menu .menu-item a:hover {
    color: var(--color-light-gray);
}

/* Products Dropdown Menu */
.premium-desktop-menu .menu-item-has-dropdown {
    position: relative;
}

.premium-desktop-menu .menu-item-has-dropdown .dropdown-icon {
    font-size: 0.7em;
    margin-left: 5px;
    transition: transform 0.3s ease;
}

.premium-desktop-menu .menu-item-has-dropdown.dropdown-hover .dropdown-icon,
.premium-desktop-menu .menu-item-has-dropdown:hover .dropdown-icon {
    transform: rotate(180deg);
}

.premium-dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--color-accent);
    list-style: none;
    margin: 0;
    padding: 15px 0;
    min-width: 280px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
    transform: translateX(-50%) translateY(-10px);
    z-index: 1000;
    margin-top: 24px;
}

.premium-desktop-menu .menu-item-has-dropdown.dropdown-hover .premium-dropdown-menu,
.premium-desktop-menu .menu-item-has-dropdown:hover .premium-dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

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

.premium-dropdown-menu li a {
    display: block;
    padding: 5px 15px;
    color: var(--color-primary)!important;
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-book);
    transition: background-color 0.3s ease, color 0.3s ease;
    white-space: nowrap;
}

.premium-dropdown-menu li a:hover {
    background-color: var(--color-light-gray);
    color: var(--color-primary);
}

.premium-dropdown-menu .dropdown-view-all {
    border-top: 1px solid var(--color-light-gray);
    margin-top: 8px;
    padding-top: 8px;
}

.premium-dropdown-menu .dropdown-view-all a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Contact Info */
.premium-contact-info {
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--color-accent);
    font-size: 16px; /* Explicit size to prevent CLS during font/variable loading */
}

.premium-contact-info a {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.3s ease;
    font-size: 16px; /* Explicit size to prevent CLS */
}

.premium-contact-info a:hover {
    color: var(--color-light-gray);
}

.premium-contact-info .separator {
    color: var(--color-accent);
    font-size: 16px; /* Explicit size to prevent CLS */
}

.premium-contact-info .contact-icon {
    display: none;
}

.premium-contact-info .contact-text {
    display: inline;
    font-size: 16px; /* Explicit size to prevent CLS */
}

/* Burger Menu Button - Always Visible */
.premium-burger {
    display: flex;
    flex-direction: column;
    gap: 5px;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.premium-burger span {
    width: 25px;
    height: 2px;
    background-color: var(--color-accent);
    transition: all 0.3s ease;
}

.premium-burger.active span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.premium-burger.active span:nth-child(2) {
    opacity: 0;
}

.premium-burger.active span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
}

/* Right Side Overlay Navigation */
.premium-overlay-nav {
    position: fixed;
    top: 0;
    right: -100%;
    width: 400px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: right 0.4s ease;
    overflow-y: auto;
    padding: 30px;
}

.premium-overlay-nav.active {
    display: block !important; /* override critical CSS so overlay shows when opened */
    right: 0;
}

.premium-overlay-nav .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    padding-bottom: 20px;
    border-bottom: 2px solid var(--color-primary);
}

.premium-overlay-nav .overlay-logo img {
    max-height: 40px;
}

.premium-overlay-nav .overlay-close {
    font-size: var(--font-size-h3);
    cursor: pointer;
    color: var(--color-primary);
    font-weight: var(--font-weight-light);
    line-height: 1;
}

.premium-overlay-nav .overlay-menu {
    list-style: none;
    padding: 0;
    margin: 0 0 30px 0;
}

.premium-overlay-nav .overlay-menu .menu-item {
    margin-bottom: 0px;
}

/* Hide main navigation items when desktop menu is visible (above 1200px) */
.overlay-main-nav {
    display: none;
}

.premium-overlay-nav .overlay-menu .menu-item a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-semibold);
    display: block;
    padding: 10px 0;
    transition: color 0.3s ease;
}

.premium-overlay-nav .overlay-menu .menu-item a:hover {
    color: var(--color-secondary);
}

/* Overlay Dropdown Menu */
.overlay-menu-item-has-dropdown {
    position: relative;
}

.overlay-dropdown-toggle {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.overlay-dropdown-icon {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.overlay-menu-item-has-dropdown.active .overlay-dropdown-icon {
    transform: rotate(180deg);
}

.overlay-dropdown-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.overlay-menu-item-has-dropdown.active .overlay-dropdown-menu {
    max-height: 500px;
    padding-left: 20px;
    margin-top: 5px;
}

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

.overlay-dropdown-menu li a {
    display: block;
    padding: 8px 0;
    color: var(--color-secondary);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-book);
    transition: color 0.3s ease;
}

.overlay-dropdown-menu li a:hover {
    color: var(--color-primary);
}

.overlay-dropdown-menu .overlay-dropdown-view-all {
    border-top: 1px solid var(--color-light-gray);
    margin-top: 8px;
    padding-top: 8px;
}

.overlay-dropdown-menu .overlay-dropdown-view-all a {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.premium-overlay-nav .overlay-menu .menu-item.overlay-trade-button {
    margin-top: 20px;
    margin-bottom: 20px;
}

.premium-overlay-nav .overlay-menu .menu-item.overlay-trade-button a {
    display: inline-block;
    text-align: center;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    background-color: var(--color-primary);
    color: var(--color-accent);
    border-radius: 0;
    width: 100%;
    box-sizing: border-box;
}

.premium-overlay-nav .overlay-contact {
    margin-top: 40px;
    padding-top: 30px;
    border-top: 2px solid var(--color-primary);
}

.premium-overlay-nav .overlay-contact-item {
    margin-bottom: 15px;
}

.premium-overlay-nav .overlay-contact-item a {
    color: var(--color-primary);
    text-decoration: none;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-book);
    display: flex;
    align-items: center;
    gap: 10px;
}

.premium-overlay-nav .overlay-contact-item i {
    color: var(--color-secondary);
    font-size: var(--font-size-cta);
}

/* Overlay Backdrop */
.premium-overlay-backdrop {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 999;
    display: none;
}

.premium-overlay-backdrop.active {
    display: block !important; /* override critical CSS when overlay opens */
}

/* Premium Footer Styles */
.premium-footer {
    background-color: var(--color-primary);
    color: var(--color-accent);
    padding: 60px 0 20px;
    display: block;
    float: left; 
    width: 100%;
}

.premium-footer-container {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

/* Footer Top Section */
.premium-footer-top {
    display: grid;
    grid-template-columns: 30% 1fr 1fr 1fr;
    gap: 50px;
    padding-bottom: 50px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.2);
}

/* Left Section: Logo & Tagline */
.premium-footer-left {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.premium-footer-logo img {
    max-width: 200px;
    height: auto;
}

.premium-footer-tagline {
    font-size: var(--font-size-lead-paragraph);
    font-weight: var(--font-weight-book);
    margin: 0;
    color: var(--color-accent);
}

/* Center Section: Navigation Columns */
/* Centered column grid removed; four explicit columns used */

.premium-footer-column h4.premium-footer-heading {
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    margin-bottom: 20px;
}

/* Heading underline to match design */
.premium-footer-heading-hr {
    display: block;
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.8);
    margin: 6px 0 18px 0;
}

.premium-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

p.premium-footer-copy {
    font-size: var(--font-size-body);
    width: 85%;
    color: var(--color-accent);
}

.premium-footer-menu li {
    margin-bottom: 6px;
}

.premium-footer-menu li a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-book);
    transition: opacity 0.3s ease;
    display: block;
}

.premium-footer-menu li a:hover {
    opacity: 0.7;
}

.premium-footer-brand img {
    filter: brightness(0) invert(1);
    width: 100%;
    height: auto;
    max-width: 275px;
    margin-bottom: 20px;
    display: block;
    object-fit: contain;
    object-position: center;
    transition: filter 0.3s ease;
}

/* Right Section: Contact & Social */
.premium-footer-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.premium-footer-contact h4.premium-footer-heading,
.premium-footer-social h4.premium-footer-heading {
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    margin-bottom: 20px;
}

.premium-footer-contact-item {
    color: var(--color-accent);
    text-decoration: none;
    font-size: var(--font-size-lead-paragraph);
    font-weight: var(--font-weight-book);
    display: flex;
    align-items: center;
    gap: 12px;
    transition: opacity 0.3s ease;
}

.premium-footer-contactus .premium-footer-heading-hr {
    width: 100%;
}

.premium-footer-contact-item a:hover {
    opacity: 0.8;
}

.premium-footer-contact-item i {
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
}

.premium-social-icons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.premium-social-icons a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 45px;
    height: 45px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    color: var(--color-accent);
    font-size: var(--font-size-feature-description);
    transition: all 0.3s ease;
    text-decoration: none;
}

.premium-social-icons a:hover {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

/* Footer Bottom Section */
.premium-footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 30px;
    gap: 30px;
}

.premium-footer-bottom-left {
    flex: 1;
}

.premium-copyright {
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: var(--font-size-cta);
    line-height: 1.6;
    margin: 0;
    /* Prevent Apple devices from detecting VAT number as a link */
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* Override any Apple link detection styling on copyright text */
.premium-copyright,
.premium-copyright * {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* Prevent Apple from auto-detecting VAT number as link - target any auto-generated links */
.premium-copyright a[href^="tel:"],
.premium-copyright a[href^="mailto:"],
.premium-copyright a[href*="VAT"],
.premium-copyright a[href*="171"],
.premium-copyright a[data-auto-detected="true"] {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    -webkit-tap-highlight-color: transparent !important;
    pointer-events: none !important;
    cursor: default !important;
}

.premium-footer-bottom-links {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.premium-footer-bottom-links a {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    font-size: var(--font-size-cta);
    transition: opacity 0.3s ease;
}

.premium-footer-bottom-links a:hover {
    opacity: 0.7;
}

.premium-footer-bottom-links .separator {
    color: rgba(255, 255, 255, 0.5);
}

.premium-footer-certifications {
    display: flex;
    gap: 20px;
    align-items: center;
    flex-wrap: wrap;
}

.premium-footer-certifications img {
    height: 40px;
    width: auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
    filter: brightness(0) invert(1);
}

.premium-footer-certifications img:hover {
    opacity: 1;
}

/* Text Only Section */
.premium-text-body-only {
    padding:70px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-accent);
    text-align: center;
}

/* Blue background variant */
.premium-text-body-only.blue-background {
    background-color: var(--color-primary) !important;
}

.premium-text-body-only.blue-background .text-only-heading,
.premium-text-body-only.blue-background .text-only-content,
.premium-text-body-only.blue-background .text-only-content p,
.premium-text-body-only.blue-background .text-only-content p.typography-body,
.premium-text-body-only.blue-background .text-only-content .typography-body,
.premium-text-body-only.blue-background h2,
.premium-text-body-only.blue-background .frame h2 {
    color: var(--color-accent) !important;
}

/* General blue background - ensure all paragraphs are white for legibility */
.blue-background p {
    color: var(--color-accent) !important;
}

.premium-text-body-only h2,
.text-only-heading {
    margin-bottom: .5em;
    font-family: var(--font-heading);
    font-weight: 700;
}

.premium-text-body-only.blue-background .text-only-heading {
    color: var(--color-accent) !important;
}

.text-only-content {
    margin-bottom: 2em;
}

.text-only-content p {
    margin-bottom: 1em;
}

.text-only-content p:last-child {
    margin-bottom: 0;
}

/* Intro Credentials Two-Column Layout */
.premium-text-body-only.intro-credentials {
    padding: 60px 0;
    background-color: #fff;
}

.intro-credentials-inner {
    display: flex;
    gap: 60px;
    align-items: center;
}

.intro-credentials-text {
    flex: 0 0 55%;
}

.intro-credentials-text p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.7;
    text-align: left;
    margin-bottom: 0;
}

.intro-credentials-stats {
    flex: 0 0 calc(45% - 60px);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.intro-stat {
    background-color: var(--color-light-gray);
    border-radius: 4px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.intro-stat-number {
    font-family: var(--font-heading);
    font-size: 2.6rem;
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: 10px;
}

.intro-stat-label {
    font-family: var(--font-primary);
    font-size: 1.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    line-height: 1.4;
}

@media (max-width: 768px) {
    .intro-credentials-inner {
        flex-direction: column;
        gap: 40px;
    }

    .intro-credentials-text,
    .intro-credentials-stats {
        flex: none;
        width: 100%;
    }
}

.text-only-content ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-top: 1.5em;
    margin-bottom: 1em;
}

.text-only-content ul li {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    margin-bottom: 1em;
    line-height: 1.6;
}

.text-only-content ul li:last-child {
    margin-bottom: 0;
}

.text-only-content ul li strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.text-only-cta {
    margin-top: 2em;
}

.text-only-button {
    border-radius: 0;
}

/* Why Choose Granada Card Grid */
.premium-text-body-only.why-choose-granada {
    background-color: var(--color-light-gray);
}

.premium-text-body-only.why-choose-granada .text-only-heading {
    text-align: center;
    color: var(--color-primary);
    margin-bottom: 0.4em;
}

.why-choose-intro {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    text-align: center;
    max-width: 780px;
    margin: 0 auto 2.5em;
    line-height: 1.7;
}

.why-choose-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin-bottom: 0;
    margin-top: 3em;
}

.why-choose-card {
    background-color: #fff;
    border-left: 4px solid var(--color-primary);
    border-radius: 0 4px 4px 0;
    padding: 28px 28px 28px 28px;
    text-align: left;
}

.why-choose-card-title {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: 0.6em;
}

.why-choose-card p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.65;
    margin-bottom: 0;
}

.premium-text-body-only.why-choose-granada .text-only-cta {
    text-align: center;
    margin-top: 2.5em;
}

@media (max-width: 768px) {
    .why-choose-grid {
        grid-template-columns: 1fr;
    }
}

/* Icon List Section */
.icon-list-section {
    padding:70px 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--color-accent);
}


.home .card-section-minimalist.accent-background.contact-grid, .home .card-section-minimalist.featured-products, .home .card-section-minimalist.case-studies-section {
    padding: 3em 1em!important;
}

.case-studies-section h2 {
    margin-bottom: 0;
}

/* Case Studies Header */
.case-studies-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2em;
}

.case-studies-header h2 {
    margin-bottom: 0;
    flex: 1;
}

.case-studies-view-all {
    margin-left: auto;
    white-space: nowrap;
}

/* Case Studies Grid Section */
.case-studies-section {
    padding: 70px 0;
    width: 100%;
    background-color: var(--color-accent);
}

/* Consolidated accent-background modifier - shared across multiple sections */
.case-studies-section.accent-background,
.premium-accreditations-section.accent-background,
.premium-cpd-section.accent-background,
.premium-discuss-section.accent-background,
.icon-list-section.accent-background,
.accent-background {
    background-color: var(--color-light-gray);
}

/* Consolidated .frame styles - shared across multiple sections */
.case-studies-section .frame,
.premium-feature-list-section .frame,
.premium-accreditations-section .frame,
.premium-cpd-section .frame,
.premium-discuss-section .frame,
.video-benefits-section .frame,
.maximum-sizes-section .frame,
.product-gallery-section .frame,
.technical-documents-section .frame,
.other-products-section .frame,
.find-your-rep-section .frame,
.icon-list-section .frame,
.premium-text-body-only .frame,
.sg-installation-areas .frame,
.sg-installation-form-wrap .frame {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

/* Ensure custom installation landing sections use standard premium framing */
@media (max-width: 1024px) {
    .sg-installation-areas .frame,
    .sg-installation-form-wrap .frame {
        width: 90%;
    }
}

@media (max-width: 768px) {
    .sg-installation-areas .frame,
    .sg-installation-form-wrap .frame {
        width: 95%;
    }
}

.premium-text-body-only.blue-background .frame {
    max-width: 1232px;
}

.premium-text-body-only.blue-background .text-only-heading,
.premium-text-body-only.blue-background .text-only-content,
.premium-text-body-only.blue-background .text-only-cta {
    text-align: center;
}

.case-studies-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 3em;
    margin-top: 1em;
}

/* Case Studies with 3 columns (for commercial page) */
.case-studies-section:has(.case-studies-grid > *:nth-child(3)) .case-studies-grid,
.case-studies-grid.three-columns {
    grid-template-columns: repeat(3, 1fr);
}

.case-study-card,
.case-study-item {
    background-color: var(--color-accent);
    border-radius: 8px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.case-study-card:hover,
.case-study-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.case-study-card .case-study-image,
.case-study-item .case-study-image,
.case-study-card img.case-study-image,
.case-study-item img.case-study-image {
    width: 100%;
    height: 250px;
    object-fit: cover;
    display: block;
}

.case-study-card .case-study-content,
.case-study-item .case-study-content {
    padding: 2em;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: var(--color-light-gray);
}

.case-study-card .case-study-title,
.case-study-item .case-study-title,
.case-study-card h3,
.case-study-item h3 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.3;
}

.case-study-card .case-study-paragraph,
.case-study-item .case-study-paragraph,
.case-study-card p,
.case-study-item p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin-bottom: 0;
    line-height: 1.6;
}

.case-study-card .case-study-paragraph:last-of-type,
.case-study-item .case-study-paragraph:last-of-type,
.case-study-card p:last-of-type,
.case-study-item p:last-of-type {
    margin-bottom: 1em;
}

.case-study-card .case-study-button,
.case-study-item .case-study-button {
    margin-top: auto;
    align-self: flex-start;
}

.icon-list-section .flexbox {
    align-items: start;
    justify-content: center;
    display: flex;
    width: 100%;
    clear: both;
    float: left;
    gap: 3em;
}

.icon-list-section p:last-of-type {
    margin-bottom: 0;
    margin-top: 0;
    margin-bottom: 2em!important;
    text-align: center;
}

.icon-list-section h3 {
    margin-bottom: .5em;
    margin-top: 0;
}

.icon-list-section h4 {
    margin-bottom: .5em;
    font-weight: var(--font-weight-light);
    margin-top: .5em;
}

.icon-list-section .icon-item {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex-direction: column;
    gap: 1em;
    text-align: center;
    width: 320px;
    flex: 0 0 320px;
}

.icon-list-section .icon-item p {
    margin-bottom: 0;
    margin-top: 0.5em;
    line-height: 1.6;
    width: 100%;
}

.icon-list-section .icon-circle-container {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 2px solid var(--color-primary);
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.icon-list-section .icon-circle-container i {
    font-size: 4em;
    color: var(--color-primary);
}

.icon-list-section .cta {
    text-align: center;
    margin-top: 3em!important;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    float: left;
}

.icon-list-section .icon-item h4 {
    margin-bottom: 0;
}

/* Strapline Section */
.strapline-section {
    background: var(--color-primary);
    color: var(--color-accent);
    padding-top: 0;
    padding-bottom: 0;
}

.strapline-section .wrapper-ultra-wide {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 2em;
}

.strapline-section .line {
    width: 5%;
    height: 5px;
    border-radius: 10px;
    background: var(--color-accent);
}

.strapline-section .text-center {
    padding: 1em 0;
}

.strapline-section .text-center h2 {
    color: var(--color-accent);
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    margin-bottom: 0;
    text-align: center;
}

.strapline-section h3 {
    margin-top: 1em;
    margin-bottom: 0;
    font-size: 17px;
    font-weight: 100;
    text-transform: uppercase;
    margin-bottom: 0;
    color: var(--color-accent);
    text-align: center;
    margin-top: .5em;
}

/* Featured Products Section */
.featured-products .product-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
}

.featured-products .product-item {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-products .product-item-link {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    text-decoration: none;
    color: inherit;
    border-radius: 8px;
    overflow: hidden;
    background-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.featured-products .product-item-link:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.featured-products .product-item .product-image {
    width: 100%;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    flex-shrink: 0;
}

.featured-products .product-item .product-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}


.featured-products .product-item .product-title {
    width: 100%;
    object-fit: cover;
    padding: 1em;
    background: var(--color-primary);
    color: var(--color-accent)!important;
}

.featured-products .product-item .product-title .sub-header {
    font-style: inherit;
}

.featured-products .product-item .product-title h3, .featured-products .product-item .product-title .sub-header {
    margin-bottom: 0;
    margin-top: 0;
    color: var(--color-accent)!important;
}

.featured-products .product-item .product-description {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: var(--color-light-gray);
    padding: 1em;
}

.featured-products .product-item .product-description p {
    margin-bottom: 0;
    margin-top: 0;
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary)!important;
}

/* What to Do Next Section */
section.what-to-do-next .column-grid-4 {
    margin-bottom: 0;
}

.card-section-minimalist.contact-grid {
    background-color: var(--color-accent) !important;
    padding: 4em 1em !important;
}

.card-section-minimalist.contact-grid.accent-background {
    background-color: var(--color-light-gray) !important;
}

.contact-grid .wrapper-wide {
    max-width: 100% !important;
    width: 1500px !important;
    padding: 0;
}

.contact-grid-3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    align-items: center;
}   

.contact-grid-3 .column {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.contact-grid-3 .column h3 {
    display: block;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h3);
    color: var(--color-primary);
    margin-bottom: .5em;
    margin-top: 0;
    text-align: left;
}

.contact-grid-3 .column p {
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
}

.contact-grid-3 .column p:has(a.button) {
    margin-top: 20px;
}

.contact-grid-3 .column p a.button {
    color: var(--color-accent) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-cta) !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    border-radius: 0 !important;
}

.contact-grid-3 .column p a {
    color: var(--color-primary);
}

/* ============================================
   NEW COMMERCIAL PAGE SECTIONS
   ============================================ */

/* Hero Section */
.premium-hero-section {
    padding: 6em 0 8em 0;
    width: 100%;
    background-color: var(--color-accent);
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    text-align: center;
}

.premium-hero-section .frame {
    width: 90%;
    max-width: 1800px;
    margin: 0 auto;
}

.premium-hero-section .hero-h1 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h1);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 0.25em;
    line-height: 1.2;
}

.premium-hero-section .hero-h2 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-h2);
    color: var(--color-secondary);
    margin-bottom: 1em;
    line-height: 1.3;
}

.premium-hero-section .hero-intro {
    margin-bottom: 4em;
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.premium-hero-section .hero-intro p {
    margin-bottom: 1em;
    font-size: 21px;
}

.premium-hero-section .hero-features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 3em;
    margin-top: 0;
    align-items: start;
}

/* Card Flip Container */
.premium-hero-section .hero-feature-card {
    perspective: 1000px;
    height: 100%;
    width: 100%;
    min-height: 160px;
}

.premium-hero-section .hero-feature-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.premium-hero-section .hero-feature-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 240px;
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
}

.premium-hero-section .hero-feature-card:hover .hero-feature-card-front {
    opacity: 0.95;
}

.premium-hero-section .hero-feature-card:hover .hero-feature-card-inner,
.premium-hero-section .hero-feature-card:focus .hero-feature-card-inner {
    transform: rotateY(180deg);
}

.premium-hero-section .hero-feature-card-front,
.premium-hero-section .hero-feature-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: flex-start;
}

.premium-hero-section .hero-feature-card-back {
    transform: rotateY(180deg);
    padding: 1em;
    justify-content: center;
}

.premium-hero-section .hero-feature-icon {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid var(--color-light-gray);
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5em;
    flex-shrink: 0;
}

.premium-hero-section .hero-feature-icon i {
    font-size: 5em;
    color: var(--color-primary);
}

.premium-hero-section .hero-feature-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-feature-heading);
    color: var(--color-primary);
    margin-bottom: 0;
    margin-top: 0;
    max-width: 340px;
}

.premium-hero-section .hero-feature-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.6;
    padding: 0.5em;
}

.premium-hero-section .hero-cta {
    text-align: center;
    margin-top:2em;
}

/* Feature List Section */
.premium-feature-list-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}


.premium-feature-list-section h2 {
    margin-bottom: 1.5em;
}

.premium-feature-list-section .feature-list-intro {
    margin-bottom: 2em;
}

/* Consolidated list styles - shared across feature and CPD sections */
.premium-feature-list-section .feature-list,
.premium-cpd-section .cpd-benefits-list {
    list-style: none;
    padding: 0;
    margin: 2em 0;
    max-width: 900px;
}

/* Consolidated list item styles - shared typography and positioning */
.premium-feature-list-section .feature-list li,
.premium-cpd-section .cpd-benefits-list li {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    padding-left: 2em;
    position: relative;
    line-height: 1.6;
}

.premium-feature-list-section .feature-list li {
    margin-bottom: 1.5em;
}

.premium-feature-list-section .feature-list li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 1.5em;
    line-height: 1;
}

.premium-feature-list-section .feature-list-cta {
    margin-top: 2em;
    text-align: left;
}

/* Accreditations Section */
.premium-accreditations-section {
    padding: 3em 0;
    width: 100%;
    background-color: var(--color-accent);
}



/* Consolidated h2 margin-bottom - shared across multiple sections */
.premium-accreditations-section h2,
.premium-cpd-section h2,
.premium-technical-docs-section h2 {
    margin-bottom: .5em;
}

/* Consolidated intro styles - shared max-width pattern */
.premium-accreditations-section .accreditations-intro,
.premium-cpd-section .cpd-intro,
.premium-feature-list-section .feature-list-intro {
    max-width: 900px;
}

.premium-accreditations-section .accreditations-intro {
    margin-bottom: 3em;
}

.premium-accreditations-section .accreditations-intro p {
    margin-bottom: 1em;
}

.premium-accreditations-section .accreditations-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, auto));
    gap: 2.5em;
    align-items: center;
    margin: 1.5em auto 1.5em auto;
    max-width: 1200px;
    justify-content: center;
    width: 100%;
}

.premium-accreditations-section .accreditation-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1em;
}

.premium-accreditations-section .accreditation-logo {
    max-width: 100%;
    height: auto;
    max-height: 80px;
    object-fit: contain;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.premium-accreditations-section .accreditation-logo:hover {
    opacity: 0.9;
}

.premium-accreditations-section .accreditation-name {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    text-align: center;
}

.premium-accreditations-section .accreditations-cta {
    margin-top: 3em;
    text-align: center;
}

.premium-accreditations-section .accreditations-cta .button {
    margin: 0;
    float:left;
}

html {
    scroll-behavior: smooth;
}

/* CPD Section */
.premium-cpd-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}



.premium-cpd-section .cpd-intro {
    margin-bottom: 2em;
}

.premium-cpd-section .cpd-intro p {
    margin-bottom: 1em;
}

.premium-cpd-section .cpd-benefits-list li:before {
    content: "·";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 1.5em;
    line-height: 1;
    font-weight: var(--font-weight-extra-bold);
}

.premium-cpd-section .cpd-additional-text {
    margin-top: 2em;
    margin-bottom: 2em;
}

.premium-cpd-section .cpd-additional-text p {
    margin-bottom: 0;
}

.premium-cpd-section .cpd-cta {
    margin-top: 2em;
    text-align: left;
}

/* CPD Section with Image Layout */
.premium-cpd-section.has-image .cpd-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: stretch;
}

.premium-cpd-section.has-image.image-left .cpd-container {
    grid-template-columns: 1fr 1fr;
}

.premium-cpd-section.has-image.image-left .cpd-content-wrapper {
    order: 2;
    padding: 2em 0;
}

.premium-cpd-section.has-image.image-left .cpd-image-wrapper {
    order: 1;
}

.premium-cpd-section.has-image.image-right .cpd-container {
    grid-template-columns: 1fr 1fr;
}

.premium-cpd-section.has-image.image-right .cpd-content-wrapper {
    order: 1;
}

.premium-cpd-section.has-image.image-right .cpd-image-wrapper {
    order: 2;
}

.premium-cpd-section.has-image .cpd-content-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.premium-cpd-section.has-image .cpd-content {
    max-width: 100%;
}

.premium-cpd-section.has-image .cpd-content p {
    margin-bottom: 1em;
}

.premium-cpd-section.has-image .cpd-content p:first-child {
    margin-top: 0;
}

.premium-cpd-section.has-image .cpd-content p:last-child {
    margin-bottom: 0;
}

.premium-cpd-section.has-image .cpd-image-wrapper {
    position: relative;
    overflow: hidden;
}

.premium-cpd-section.has-image .cpd-image {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    border-radius: var(--button-border-radius);
}

/* Technical Documents Section */
.premium-technical-docs-section {
    padding: 70px 0;
    width: 100%;
    background-color: var(--color-accent);
}

.premium-technical-docs-section .frame {
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
}

.premium-technical-docs-section .technical-docs-intro {
    margin-bottom: 2em;
    width: 100%;
    max-width: 100%;
}

.premium-technical-docs-section .technical-docs-intro p {
    margin-bottom: 1em;
    width: 100%;
    max-width: 100%;
}

.premium-technical-docs-section .technical-docs-buttons {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    margin-top: 2em;
}

.premium-technical-docs-section .technical-docs-buttons .button {
    margin: 0;
}

/* Downloads Section - Filters */
.premium-technical-docs-section .filters {
    margin-bottom: 1em;
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
    padding: 1em;
    background-color: var(--color-accent);
    border: 1px solid var(--color-light-gray);
    align-items: center;
    align-content: center;
    flex-direction: row;
}

.premium-technical-docs-section .filters h3 {
    margin: 0 !important;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
}

.premium-technical-docs-section .filters select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-light-gray);
    border: 1px solid var(--color-light-gray);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding-vertical) 35px var(--button-padding-vertical) 15px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a5b5d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    transition: border-color 0.3s ease;
}

.premium-technical-docs-section .filters select:hover {
    border-color: var(--color-secondary);
}

.premium-technical-docs-section .filters select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.premium-technical-docs-section .reset-filters {
    background-color: var(--color-primary) !important;
    border: var(--button-border-width) solid var(--color-primary) !important;
    border-radius: 0 !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    color: var(--color-accent) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
}

.premium-technical-docs-section .reset-filters:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-accent) !important;
    transform: translateY(-1px) !important;
    opacity: 0.9 !important;
}

.premium-technical-docs-section .reset-filters:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Downloads Section */
.premium-technical-docs-section .downloads-section {
    margin-top: 3em;
    width: 100%;
}

/* Downloads Table */
.premium-technical-docs-section .downloads-table {
    width: 100%;
    text-align: left;
    margin-bottom: 1em;
    font-family: var(--font-primary);
}

.premium-technical-docs-section .downloads-table thead {
    background-color: var(--color-light-gray);
}

.premium-technical-docs-section .downloads-table .view-button,
.premium-technical-docs-section .downloads-table .download-button {
    margin-right: 1em;
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-block;
}

.premium-technical-docs-section .downloads-table .view-button:hover,
.premium-technical-docs-section .downloads-table .download-button:hover {
    color: var(--color-secondary);
}

.premium-technical-docs-section .downloads-table .category-header:first-of-type {
    padding-top: 0;
}

.premium-technical-docs-section .downloads-table .category-header td {
    color: var(--color-primary) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    font-size: var(--font-size-article-heading) !important;
    padding-top: 2em;
    padding-bottom: 0.75em;
    border-bottom: none;
    padding-bottom: 0.75em;
    border-bottom: 1px solid var(--color-primary);
}

.premium-technical-docs-section .downloads-table .category-header:first-of-type td {
    padding-top: 1.5em;
}

.premium-technical-docs-section .downloads-table th {
    padding: 1em 15px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
}

.premium-technical-docs-section .downloads-table td {
    padding: 1em 15px;
    border-bottom: 1px solid var(--color-light-gray);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
}

.premium-technical-docs-section .downloads-table td:last-of-type {
    text-align: left;
}

.premium-technical-docs-section .downloads-table th:last-of-type {
    text-align: left;
}

.premium-technical-docs-section .full-downloads-link {
    text-align: right;
    margin-top: 2em;
}

.premium-technical-docs-section .full-downloads-link a {
    display: inline-block;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta);
    text-align: var(--button-text-align);
    letter-spacing: var(--button-letter-spacing);
    padding: var(--button-padding-vertical) var(--button-padding-horizontal);
    border-radius: 0;
    background-color: var(--color-primary);
    color: var(--color-accent);
    text-decoration: none;
    transition: all 0.3s ease;
    font-kerning: auto;
    -webkit-font-kerning: auto;
    font-optical-sizing: auto;
    text-transform: uppercase;
}

.premium-technical-docs-section .full-downloads-link a:hover {
    opacity: 0.9;
    transform: translateY(-1px);
    text-decoration: none;
}

/* Discuss Section */
.premium-discuss-section {
    padding: 70px 0;
    width: 100%;
    background-color: var(--color-accent);
    text-align: center;
}



.premium-discuss-section h3 {
    margin-bottom: .5em;
    margin-top: 0;
}

.premium-discuss-section .discuss-intro {
    margin-bottom: 2em;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.premium-discuss-section .discuss-intro p {
    margin-bottom: 1em;
}

.premium-discuss-section .discuss-phone {
    margin-top: 2em;
}

.premium-discuss-section .discuss-phone p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin: 0;
}

.premium-discuss-section .discuss-phone a {
    color: var(--color-primary);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
}

.premium-discuss-section .discuss-phone a:hover {
    text-decoration: underline;
}

/* ============================================
   CASE STUDY SINGLE PAGE LAYOUT
   ============================================ */

/* New Case Study Layout Container */
.case-study-new-layout {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
    padding-bottom: 8em!important;
}

/* Top Section: Image offset right, Blue box left */
.case-study-hero {
    position: relative;
    display: flex;
    align-items: stretch;
    max-height: 550px;
    margin-bottom: 4em;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
}

.case-study-hero-left {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 4em 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 47%;
    position: relative;
    z-index: 2;
}

.case-study-content-container {
    width: 100%;
    max-width: 640px;
    text-align: left; /* Desktop: align right to match design */
}

.case-study-hero-right {
    width: 55%;
    position: relative;
    z-index: 1;
}

.case-study-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

section.case-study-new-layout {
    padding: 0;
    border-top: 1px solid var(--color-accent);
}

.case-study-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h1);
    text-transform: uppercase;
    line-height: 1.1;
    margin: 0 0 .5em 0;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.case-study-overview {
    margin-top: 2em;
}

.case-study-overview h3 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-article-heading);
    margin: 0 0 1em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.case-study-overview-item {
    margin-bottom: 1.5em;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    line-height: 1.6;
    color: var(--color-accent);
}

.case-study-overview-item:last-child {
    margin-bottom: 0;
}

.case-study-overview-item strong {
    display: block;
    margin-bottom: 0.5em;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    font-size: var(--font-size-cta);
    letter-spacing: 0.05em;
    opacity: 0.85;
    color: rgba(255, 255, 255, 0.9);
}

/* Bottom Section: 60/40 split */
.case-study-content-section {
    display: flex;
    gap: 4em;
    margin-top: 4em;

    width: 80%; /* Match frame width for consistent padding */
    max-width: 1500px;
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    box-sizing: border-box;
}

.case-study-text {
    flex: 0 0 60%;
    padding-right: 2em;
}

.case-study-text h2 {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-feature-heading);
    color: var(--color-primary);
    margin: 1.5em 0 .5em 0;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.case-study-text h2:first-of-type {
    margin-top: 0;
}

.case-study-text p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    line-height: 1.8;
    color: var(--color-secondary);
    margin-bottom: 1.5em;
}

.case-study-text ul {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5em 0;
}

.case-study-text ul li {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    line-height: 1.8;
    color: var(--color-secondary);
    padding-left: 1.5em;
    position: relative;
}

.case-study-text ul li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: var(--font-weight-extra-bold);
    font-size: 1.5em;
    line-height: 1;
}

/* Testimonial Box (now in gallery) */
.case-study-testimonial {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 2.5em;
    margin: 0;
    border-left: 4px solid rgba(255, 255, 255, 0.3);
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.case-study-testimonial h3 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-article-heading);
    margin: 0 0 1em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-accent);
}

.case-study-text h4 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-article-heading);
    margin: 0 0 .5em 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.case-study-text h5 {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-article-heading);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-primary);
}

.case-study-text p {
    margin-top: 0;
}

.case-study-main-content {
    margin-top: 2em;
    border-top: 1px solid var(--color-primary);
    padding-top: 2em;
}

.case-study-testimonial p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    line-height: 1.8;
    margin: 0;
    font-style: italic;
    color: var(--color-accent);
}

.case-study-testimonial-item {
    grid-column: span 2;
}

/* Masonry Gallery */
.case-study-gallery {
    flex: 0 0 40%;
}

.case-study-gallery-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5em;
    align-items: start;
}

.case-study-gallery-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: var(--color-light-gray);
    border-radius: 4px;
}

.case-study-gallery-item img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
    object-fit: cover;
}

.case-study-gallery-item:hover img {
    transform: scale(1.05);
}

/* Testimonial item styling */
.case-study-testimonial-item {
    grid-column: span 2;
    min-height: 200px;
}

/* Make some image items span 2 columns for masonry effect - but not testimonial */
/* Note: These selectors count ALL children, so testimonial affects the count */
.case-study-gallery-item:not(.case-study-testimonial-item):nth-child(4n + 3) {
    grid-column: span 2;
}

.case-study-gallery-item:not(.case-study-testimonial-item):nth-child(4n + 4) {
    grid-column: span 1;
}

/* Override: If last image item comes after testimonial, it should span 2 columns */
/* This will be handled by JavaScript, but CSS provides visual hint */

/* Last item can be made full width via JavaScript if alone in row */
.case-study-gallery-item.last-item-full-width {
    grid-column: span 2 !important;
}

/* Fallback: If last non-testimonial item comes after a testimonial, make it full width */
/* This is handled by JavaScript - see single-case-study.php */

/* Lightbox */
.lightbox {
    display: none;
    position: fixed;
    z-index: 9999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0, 0, 0, 0.9);
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.lightbox img {
    max-width: 90%;
    max-height: 90%;
    margin-top: 2%;
}

.lightbox-trigger {
    cursor: pointer;
}

.news-page h2 {
    margin-bottom: .5em;
    margin-top: .5em;
}

/* ============================================
   PREMIUM BLOG LAYOUT STYLES
   ============================================ */

/* Blog Header Section (Grey Background) */
.blog-premium-layout, .blog-premium-layout .wrapper {
    padding-top: 0px;
    padding-bottom: 0px;
}

/* CRITICAL: Reserve space to prevent 0.825 CLS */
.blog-premium-layout {
    width: 100%;
}

/* Prevent layout shifts in all blog sections */
.blog-premium-layout * {
    max-width: 100%;
}

/* Ensure images don't cause shifts */
.blog-premium-layout img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* Reserve space for unsized images */
.blog-premium-layout img:not([width]):not([height]):not([style*="width"]):not([style*="height"]) {
    aspect-ratio: 16 / 9;
    background-color: var(--color-light-gray);
}

.blog-header-section {
    background-color: var(--color-light-gray);
    padding: 4em 0;
    width: 100%;
    min-height: 300px; /* Prevent CLS */
}

.blog-header-section .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.blog-header-section .blog-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: .5em;
    line-height: 1.2;
}

.blog-header-section .blog-header-image {
    width: 100%;
    margin-bottom: 2em;
    text-align: center;
    min-height: 300px;
    max-height: 400px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-header-section .blog-header-image img {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    object-fit: cover;
    width: 100%;
    height: 100%;
    object-position: center;

}

/* Main news-page container - prevent CLS */
main.news-page {
    min-height: 100vh;
}

/* Critical: Prevent the massive 0.825 CLS in blog layout */
.blog-premium-layout {
    min-height: 100vh;
    width: 100%;
}

/* Ensure sections don't shift during load */
.blog-premium-layout > section {
    width: 100%;
}

/* Featured Image Section (standalone, not in header) */
.blog-featured-image-section {
    padding: 4em 0;
    width: 100%;
    min-height: 500px; /* Prevent CLS */
}

.blog-featured-image-section .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.blog-featured-image-container {
    width: 100%;
    text-align: center;
    min-height: 400px;
    max-height: 600px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.blog-featured-image-container img {
    max-width: 100%;
    height: 100%;
    border-radius: 4px;
    object-fit: cover;
    width: 100%;
    cursor: pointer;
    transition: transform 0.3s ease;
    display: block; /* Prevent inline spacing issues */
}

.blog-featured-image-container img:hover {
    transform: scale(1.02);
}

.blog-header-section .blog-caption {
    font-family: var(--font-primary);
    font-size: var(--font-size-lead-paragraph);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Blog Content Sections */
.blog-content-section {
    padding: 4em 0;
    background-color: var(--color-accent);
    min-height: 200px; /* Prevent CLS */
}

.blog-content-section .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

/* 50/50 Text & Image Section */
.blog-50-50-section {
    padding: 4em 0;
}

.blog-50-50-container {
    display: flex;
    align-items: center;
    gap: 3em;
    flex-wrap: wrap;
}

.blog-50-50-container.image-left {
    flex-direction: row;
}

.blog-50-50-container.image-left .blog-50-50-image {
    order: 1;
}

.blog-50-50-container.image-left .blog-50-50-text {
    order: 2;
}

.blog-50-50-container.image-right {
    flex-direction: row;
}

.blog-50-50-container.image-right .blog-50-50-image {
    order: 2;
}

.blog-50-50-container.image-right .blog-50-50-text {
    order: 1;
}

.blog-50-50-text {
    flex: 1 1 45%;
    min-width: 300px;
}

.blog-50-50-text h2,
.blog-50-50-text h3 {
    font-family: var(--font-primary);
    color: var(--color-primary);
    margin-bottom: .5em;
}

.blog-50-50-text h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-extra-bold);
}

.blog-50-50-text h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.blog-50-50-text p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 1em;
}

.blog-50-50-image {
    flex: 1 1 45%;
    min-width: 300px;
    aspect-ratio: 4 / 3;
    min-height: 250px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.blog-50-50-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Text Only Section (100% Width) */
.blog-text-only-section {
    padding: 0 0 4em;
    min-height: 300px; /* Prevent CLS */
}

.blog-premium-layout .blog-content-section:last-of-type {
    padding-bottom: 8em!important;
}

.blog-text-only-content {
    max-width: 900px;
    margin: 0 auto;
}

/* Prevent CLS for images in post content */
.blog-text-only-content img,
.blog-50-50-text img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* Reserve space for images without dimensions in content */
.blog-text-only-content img:not([width]):not([height]),
.blog-50-50-text img:not([width]):not([height]) {
    aspect-ratio: 16 / 9;
    min-height: 300px;
    object-fit: cover;
    background-color: var(--color-light-gray);
    width: 100%;
}

.blog-text-only-content h2,
.blog-text-only-content h3 {
    font-family: var(--font-heading);
    color: var(--color-primary);
    margin-bottom: .5em;
}

.blog-text-only-content h2 {
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-extra-bold);
}

.blog-text-only-content h3 {
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
}

.blog-text-only-content p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 1.5em;
}

/* Related Blog Posts Section */
.blog-related-posts-section {
    padding: 4em 0 6em;
    margin-top: 4em;    
    background-color: var(--color-light-gray);
    min-height: 400px; /* Prevent CLS */
}

.blog-related-posts-section .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em 0;
}

.related-posts-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 2em;
}

.related-posts-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 2em;
}

.related-post-card {
    background-color: var(--color-accent);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.related-post-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.related-post-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.related-post-image {
    width: 100%;
    height: 200px;
    min-height: 200px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-light-gray);
}

.related-post-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.related-post-content {
    padding: 1.5em;
}

.related-post-label {
    display: block;
    font-family: var(--font-primary);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0.5em;
}

.related-post-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: 0.5em;
    line-height: 1.3;
}

.related-post-date {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
}

/* ============================================
   PREMIUM NEWS PAGE LAYOUT STYLES
   ============================================ */

/* News Page Header */
.news-premium-header {
    background-color: var(--color-light-gray);
    padding: 4em 0;
    width: 100%;
}

.news-premium-header .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.news-page-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-h1);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    text-align: center;
    margin-bottom: .5em;
    line-height: 1.2;
    margin-top: 0;
}

.news-page-intro {
    font-family: var(--font-primary);
    font-size: var(--font-size-lead-paragraph);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

/* News Page Body Text */
.news-premium-intro {
    padding: 4em 0;
    background-color: var(--color-accent);
}

.news-premium-intro .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.news-intro-content {
    max-width: 900px;
    margin: 0 auto;
}

.news-intro-content p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 1.5em;
}

.news-intro-content p:last-child {
    margin-bottom: 0;
}

/* News Filters Section */
.news-filters-section {
    padding: 2em 0;
    background-color: var(--color-accent);
    border-bottom: 1px solid var(--color-light-gray);
}

.news-filters-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4em;
}

.news-filters-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2em;
}

.news-filter-left {
    flex: 0 0 auto;
}

.news-filter-right {
    flex: 1 1 auto;
    max-width: 400px;
    position: relative;
    margin-left: auto;
}

.news-category-dropdown {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: var(--color-light-gray);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--button-border-radius);
    padding: var(--button-padding-vertical) 35px var(--button-padding-vertical) 15px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a5b5d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 15px) center;
    transition: border-color 0.3s ease;
    min-width: 200px;
}

.news-category-dropdown:hover {
    border-color: var(--color-secondary);
}

.news-category-dropdown:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.news-search-input {
    width: 100%;
    padding: var(--button-padding-vertical) 45px var(--button-padding-vertical) 15px;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    background-color: var(--color-light-gray);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--button-border-radius);
    transition: border-color 0.3s ease;
}

.news-search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.news-search-input::placeholder {
    color: var(--color-secondary);
    opacity: 0.6;
}

.news-search-clear {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: var(--color-secondary);
    cursor: pointer;
    padding: 0.5em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    font-size: var(--font-size-cta);
}

.news-search-clear:hover {
    color: var(--color-primary);
}

/* News Articles Grid Section */
.news-premium-grid-section {
    padding: 4em 0 8em;
    background-color: var(--color-accent);
}

.news-premium-grid-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4em;
}

.news-articles-container {
    width: 100%;
}

/* Top Three Posts Container */
.news-top-three-container {
    display: flex;
    gap: 2em;
    margin-bottom: 3em;
}

/* Featured Article (50% width on left) */
.news-featured-article {
    flex: 0 0 calc(60% - 1em);
    background-color: var(--color-accent);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Right Column for Posts 2 and 3 */
.news-top-right-column {
    flex: 0 0 calc(40% - 1em);
    display: flex;
    flex-direction: column;
    gap: 2em;
}

.news-featured-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-featured-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

.news-featured-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    background-color: var(--color-light-gray);
    max-height: 820px;
}

.news-featured-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-featured-article:hover .news-featured-image img {
    transform: scale(1.05);
}

.news-featured-content {
    padding: 2.5em;
    background-color: var(--color-light-gray);
}

.news-featured-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: 0.5em;
    margin-top: 0;
    line-height: 1.3;
}

.news-featured-date {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    margin-bottom: 1em;
    margin-top: 0;
}

.news-featured-excerpt {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 1.5em;
    margin-top: 0;
}

.news-featured-cta-wrapper {
    display: inline-block;
    margin-top: 1em;
}

.news-featured-cta-wrapper .btn {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Grid Articles Container (2 columns) */
.news-grid-articles {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
    margin-bottom: 3em;
}

/* Grid Article */
.news-grid-article {
    background-color: var(--color-accent);
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    flex-direction: column;
}

.news-grid-article:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.news-grid-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
    height: 100%;
}

.news-grid-image {
    width: 100%;
    height: 250px;
    overflow: hidden;
    background-color: var(--color-light-gray);
}

.news-grid-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.news-grid-article:hover .news-grid-image img {
    transform: scale(1.05);
}

.news-grid-content {
    padding: 2em;
    background-color: var(--color-light-gray);
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    align-items: start;
}

.news-grid-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-bold);
    color: var(--color-primary);
    margin-bottom: 0.5em;
    margin-top: 0;
    line-height: 1.3;
}

.news-grid-date {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    margin-bottom: 1em;
    margin-top: 0;
}

.news-grid-excerpt {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin-bottom: 1.5em;
    margin-top: 0;
    flex-grow: 1;
}

.news-grid-cta-wrapper {
    display: inline-block;
    margin-top: auto;
    align-self: flex-start;
}

.news-grid-cta-wrapper .btn {
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* No Results Message */
.news-articles-container .no-results {
    text-align: center;
    padding: 3em 2em;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
}

/* Load More Button */
.news-load-more-container {
    text-align: center;
    margin-top: 3em;
}

.news-load-more-btn {
    font-family: var(--font-primary);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    color: var(--color-accent);
    background-color: var(--color-primary);
    border: none;
    padding: 1em 3em;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.2s ease;
}

.news-load-more-btn:hover:not(:disabled) {
    background-color: var(--color-secondary);
    transform: translateY(-2px);
}

.news-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

/* ============================================
   PRODUCT PAGE SECTIONS
   ============================================ */

/* Product Hero Section - Matches case-study-hero layout */
.product-hero-section {
    position: relative;
    display: flex;
    align-items: stretch;
    max-height: 550px;
    margin-bottom: 4em;
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding: 0;
}

.product-hero-section .case-study-hero-left {
    background: var(--color-primary);
    color: var(--color-accent);
    padding: 4em 3em;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-end;
    width: 47%;
    position: relative;
    z-index: 2;
}

.product-hero-section .case-study-hero-right {
    width: 55%;
    position: relative;
    z-index: 1;
}

.product-hero-section .case-study-hero-right img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-hero-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-accent);
    margin-bottom: 2em;
    line-height: 1.6;
}

.product-hero-ctas {
    display: flex;
    gap: 1.5em;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin-top: 2em;
}

/* Video & Benefits Section */
.video-benefits-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}


.video-benefits-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: start;
}

.video-benefits-video {
    position: relative;
    width: 100%;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.video-wrapper iframe,
.video-wrapper embed,
.video-wrapper object {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

/* Handle WordPress oEmbed wrapper div */
.video-wrapper > div {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.video-wrapper > div iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.benefits-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    text-transform: capitalize;
}

.benefits-paragraphs p {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    line-height: 1.8;
    margin-bottom: 1.5em;
}

.benefits-paragraphs p:last-child {
    margin-bottom: 0;
}

/* Video & Benefits Gallery Section */
.video-benefits-gallery-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.video-benefits-gallery-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 2em;
    box-sizing: border-box;
}

.video-benefits-gallery-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: start;
}

.video-benefits-gallery-section.nbs-spec-hub {
    background-color: var(--color-accent);
}

.video-benefits-gallery-section.nbs-spec-hub .video-benefits-gallery-container {
    grid-template-columns: 1fr;
    gap: 0;
}

.video-benefits-gallery-section.nbs-spec-hub .video-benefits-content {
    max-width: 100%;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-title {
    font-size: clamp(26px, 3vw, 36px);
    margin-bottom: 0.4em;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-content {
    max-width: 100%;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-content a {
    color: var(--color-primary);
    text-decoration: underline;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-ctas {
    margin-top: 1.5em;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-nbs-spec-banner {
    background: transparent;
    padding: 0;
    border-radius: 0;
    margin-top: 1.5em;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-nbs-specs {
    grid-template-columns: 1fr;
    gap: 0;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-nbs-spec-item {
    background: transparent;
    border-radius: 0;
    padding: 0;
}

.video-benefits-gallery-section.nbs-spec-hub .benefits-nbs-spec-iframe {
    width: 100%;
    min-height: 1125px;
    max-height: none;
    height: 1125px;
}

.video-benefits-gallery {
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.gallery-main-display {
    position: relative;
    width: 100%;
    margin-bottom: 1.5em;
}

.gallery-main-item {
    display: none;
    width: 100%;
}

.gallery-main-item.active {
    display: block;
}

.gallery-main-item .video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    border-radius: 8px;
}

.gallery-main-item .video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.gallery-main-item .gallery-image {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 8px;
    max-height: 700px;
    min-height: 700px;
    object-fit: contain;
}

.gallery-thumbnails {
    display: flex;
    gap: 1em;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 10px;
    scrollbar-width: thin;
    scrollbar-color: var(--color-primary) transparent;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.gallery-thumbnails::-webkit-scrollbar {
    height: 8px;
}

.gallery-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

.gallery-thumbnails::-webkit-scrollbar-thumb {
    background-color: var(--color-primary);
    border-radius: 4px;
}

.gallery-thumbnails::-webkit-scrollbar-thumb:hover {
    background-color: var(--color-secondary);
}

.gallery-thumbnail {
    position: relative;
    width: 80px;
    height: 80px;
    min-width: 80px;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 4px;
    overflow: hidden;
    border: 1px solid var(--color-secondary);
    transition: all 0.3s ease;
}

.gallery-thumbnail:hover {
    border-color: var(--color-primary);
    opacity: 0.8;
}

.gallery-thumbnail.active {
    border-color: var(--color-primary);
}

.gallery-thumbnail img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.video-thumbnail-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
}

.benefits-content {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    line-height: 1.8;
}


.benefits-content p:last-child {
    margin-bottom: 0;
}

.benefits-ctas {
    margin-top: 2em;
}

.benefits-nbs-spec-banner {
    margin-top: 3em;
    background: var(--color-primary);
    color: #fff;
    padding: 2em;
    border-radius: 8px;
}

.benefits-nbs-spec-banner-title {
    margin: 0 0 0.8em;
    color: #fff;
    font-family: var(--font-heading);
    font-size: 25px;
    margin-bottom: .5em !important;
    line-height: 1.2;
}

.benefits-nbs-specs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.9em 1em;
    width: 100%;
}

.benefits-nbs-spec-item {
    min-width: 0;
    background: #fff;
    border-radius: 6px;
    padding: 1.5em;
}

.benefits-nbs-spec-label {
    margin: 0 0 0.3em;
    font-family: var(--font-primary);
    font-size: 18px;
    margin-bottom: .25em !important;
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    line-height: 1.3;
}

.benefits-cta-links {
    margin-top: 1.1em;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75em;
}

.benefits-cta-links .btn {
    width: auto;
}

.benefits-nbs-spec-iframe {
    width: 100%;
    height: 72px;
    max-height: 70px;
    border: none;
    display: block;
}

/* Product Features Section */
.product-features-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.product-features-section .frame {
    max-width: 1500px;
    margin: 0 auto;
}

.product-features-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.product-features-tab {
    padding: 15px 30px;
    background-color: #f5f5f5;
    color: var(--color-secondary);
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    text-transform: capitalize;
    transition: all 0.3s ease;
    position: relative;
}

.product-features-tab:hover {
    background-color: #e5e5e5;
}

.product-features-tab.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

.product-features-tab.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

.product-features-content {
    position: relative;
}

.product-features-tab-content {
    display: none;
}

.product-features-tab-content.active {
    display: block;
}

/* Features Grid */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
    margin-top: 2em;
}

.feature-card {
    background-color: #f5f5f5;
    padding: 2em;
    border-radius: 8px;
}

/* Icon and heading alignment */
.feature-icon {
    float: left;
    margin-right: 1em;
    margin-bottom: 0;
    margin-top: 0;
}

.feature-icon svg {
    width: 60px;
    height: 60px;
    display: block;
}

.feature-card h3 {
    overflow: hidden;
    margin: 0;
    margin-bottom: 1em;
    min-height: 60px;
    display: flex;
    align-items: center;
    padding-top: 0;
}

.feature-card p {
    margin-bottom: 1em;
    line-height: 1.6;
    font-size: var(--font-size-feature-description);
}

.feature-card ul {
    list-style: disc;
    padding-left: 1.5em;
    margin-top: 1em;
    margin-bottom: 0;
    font-size: var(--font-size-feature-description);
}

.feature-card li {
    margin-bottom: 0.5em;
    line-height: 1.6;
    font-size: var(--font-size-feature-description);
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
}

/* Maximum Sizes Section */
.maximum-sizes-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}


.max-sizes-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2em;
    border-bottom: 2px solid var(--color-light-gray);
}

.max-sizes-tab {
    padding: 1em 2em;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
    text-transform: uppercase;
}

.max-sizes-tab:hover {
    color: var(--color-primary);
}

.max-sizes-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.max-sizes-content {
    position: relative;
}

.max-sizes-tab-content {
    display: none;
}

.max-sizes-tab-content.active {
    display: block;
}

.max-sizes-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-secondary);
    margin-bottom: 0.5em;
    text-transform: uppercase;
}

.max-sizes-note {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin-bottom: 2em;
    line-height: 1.6;
}

.max-sizes-table-wrapper {
    overflow-x: auto;
    margin-top: 2em;
}

.max-sizes-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    margin-top: 2em;
}

.max-sizes-table thead {
    background-color: var(--color-primary);
    color: var(--color-accent);
}

.max-sizes-table th {
    padding: 1em;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    text-transform: uppercase;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

.max-sizes-table td {
    padding: 1em;
    border-bottom: 1px solid var(--color-light-gray);
    border-right: 1px solid var(--color-light-gray);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
}

.max-sizes-table td:last-child {
    border-right: none;
}

.max-sizes-table tbody tr:hover {
    background-color: rgba(13, 58, 93, 0.05);
}

/* Product Gallery Section */
.product-gallery-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-light-gray);
}


.gallery-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: 0.5em;
    text-align: center;
}

.product-gallery-carousel {
    position: relative;
    width: 100%;
}

.gallery-carousel-track {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.gallery-carousel-slide {
    display: none;
    width: 100%;
}

.gallery-carousel-slide.active {
    display: block;
}

.gallery-carousel-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 4px;
}

.gallery-carousel-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2em;
    margin-top: 2em;
}

.gallery-carousel-prev,
.gallery-carousel-next {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: var(--font-size-cta);
}

.gallery-carousel-prev:hover,
.gallery-carousel-next:hover {
    background-color: var(--color-secondary);
    transform: scale(1.1);
}

.gallery-carousel-dots {
    display: flex;
    gap: 0.5em;
    align-items: center;
}

.gallery-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: var(--color-light-gray);
    cursor: pointer;
    transition: all 0.3s ease;
}

.gallery-carousel-dot.active {
    background-color: var(--color-primary);
    transform: scale(1.2);
}

/* Technical Documents Section */
.technical-documents-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}


.tech-docs-tabs {
    display: flex;
    gap: 0;
    margin-bottom: 2em;
    border-bottom: 2px solid var(--color-light-gray);
}

.tech-docs-tab {
    padding: 1em 2em;
    cursor: pointer;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    transition: all 0.3s ease;
}

.tech-docs-tab:hover {
    color: var(--color-primary);
}

.tech-docs-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
}

.tech-docs-content {
    position: relative;
}

.tech-docs-tab-content {
    display: none;
}

.tech-docs-tab-content.active {
    display: block;
}

.tech-docs-table-wrapper {
    overflow-x: auto;
    margin-top: 2em;
}

.tech-docs-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
}

.tech-docs-table thead {
    background-color: var(--color-primary);
    color: var(--color-accent);
}

.tech-docs-table th {
    padding: 1em;
    text-align: left;
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
    text-transform: uppercase;
}

.tech-docs-table td {
    padding: 1em;
    border-bottom: 1px solid var(--color-light-gray);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
}

.tech-docs-table tbody tr:hover {
    background-color: rgba(13, 58, 93, 0.05);
}

.tech-docs-action {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    padding: 0.5em 1em;
    background-color: transparent;
    border: 1px solid var(--color-primary);
    color: var(--color-primary);
    text-decoration: none;
    border-radius: var(--button-border-radius);
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-cta);
}

.tech-docs-action:hover {
    background-color: var(--color-primary);
    color: var(--color-accent);
}

.tech-docs-action input[type="checkbox"] {
    margin-right: 0.5em;
}

.nbs-logo {
    height: 20px;
    width: auto;
}

/* Looking for More Section */
.looking-for-more-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-light-gray);
    text-align: center;
}

.looking-for-more-section .frame {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

.looking-for-more-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: 0.5em;
}

.looking-for-more-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin-bottom: 2em;
    line-height: 1.6;
}

.looking-for-more-cta {
    margin-top: 2em;
}

/* Other Products Section */
.other-products-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}


.other-products-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: 1em;
    text-transform: capitalize;
}

.other-products-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 1em 0;
    margin: -1em 0;
}

.other-products-track {
    display: flex;
    gap: 2em;
    position: relative;
    transition: transform 0.5s ease;
}

.other-products-slide {
    flex: 0 0 calc(33.333% - 1.33em);
    min-width: calc(33.333% - 1.33em);
}

.other-product-card {
    background-color: var(--color-accent);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.other-product-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.other-product-image {
    width: 100%;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background-color: var(--color-accent);
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
}

.other-product-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.other-product-content {
    padding: 2em;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.other-product-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
    text-transform: uppercase;
    margin-bottom: 0;
    margin-top: 0;
}

.other-product-features {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    margin-bottom: 1em;
    line-height: 1.6;
}

.other-product-best-for {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary);
    margin-bottom: 1em!important;
    line-height: 1.6;
    display: block;
    float: left;
    width: 100%;
    margin-top: 0;
}

.other-product-best-for strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.other-product-content .button {
    margin-top: auto;
    align-self: flex-start;
}

.other-products-controls {
    display: flex;
    justify-content: center;
    gap: 1em;
    margin-top: 2em;
}

.other-products-prev,
.other-products-next {
    background-color: var(--color-primary);
    color: var(--color-accent);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: var(--font-size-cta);
}

.other-products-prev:hover,
.other-products-next:hover {
    background-color: var(--color-secondary);
    transform: scale(1.1);
}

/* Product FAQ Section */
.product-faq-section {
    padding: 6em 0;
    width: 100%;
    background-color: #ffffff;
}

.product-faq-section .frame {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

.product-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-top: 2px solid var(--color-primary);
}

.product-faq-item {
    background-color: #ffffff;
    border-radius: 0;
    margin-bottom: 0;
    padding: 0;
    overflow: hidden;
    box-shadow: none;
    border-bottom: 1px solid #dce6ef;
}

.product-faq-question {
    padding: 1.3em 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: color 0.2s ease;
}

.product-faq-question:hover {
    background-color: transparent;
}

.product-faq-question:hover .faq-question-text {
    color: var(--color-secondary);
}

.faq-question-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-faqs);
    color: var(--color-primary);
    flex: 1;
}

.faq-chevron {
    font-size: var(--font-size-cta);
    color: var(--color-primary);
    transition: transform 0.3s ease;
    margin-left: 1.5em;
    flex-shrink: 0;
}

.product-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.faq-answer-content {
    padding: 0 0 1.4em 0;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    line-height: 1.8;
}

.product-faq-item.active .product-faq-answer {
    max-height: 1000px;
}

.product-faq-item.active .product-faq-question {
    padding-bottom: 0.5em;
}

/* ============================================
   PANEL CAROUSEL STYLES
   ============================================ */

.panel-carousel-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.panel-carousel-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    height: 60vh;
    min-height: 500px;
}

.panel-carousel-track {
    display: flex;
    transition: transform 0.5s ease-in-out;
    will-change: transform;
}

.panel-carousel-slide {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 100%;
    position: relative;
    width: 100%;
    height: 60vh;
    min-height: 500px;
    overflow: hidden;
}

.panel-carousel-slide img {
    width: 100%;
    min-height: 100%;
    height: auto;
    object-fit: cover;
}

/* Bottom overlay with navigation */
.panel-carousel-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 5em 0 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1.5em;
}

/* Controls container */
.panel-carousel-controls {
    background: rgba(var(--color-accent-rgb), 0.95);
    padding: 1em 1em;
    border-radius: 50px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1.5em;
}

/* Blue gradient background for controls wrapper */
.panel-carousel-controls-wrapper {
    background: linear-gradient(to top, rgba(var(--color-primary-rgb), 0.95) 0%, rgba(var(--color-primary-rgb), 0.85) 50%, transparent 100%);
    width: 100%;
    padding: 2.5em 3em;
    border-radius: 0;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 2em;
}

/* Navigation arrows */
.panel-carousel-nav-arrows {
    display: flex;
    gap: 1em;
    align-items: center;
}

.panel-carousel-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-primary);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 1.5rem;
    color: var(--color-accent);
}

.panel-carousel-arrow:hover {
    background: rgba(var(--color-primary-rgb), 0.8);
    transform: scale(1.1);
}

.panel-carousel-arrow:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Pagination dots */
.panel-carousel-dots {
    display: flex;
    gap: 0.75em;
    align-items: center;
}

.panel-carousel-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--color-light-gray);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.panel-carousel-dot.active {
    width: 12px;
    height: 12px;
    background: var(--color-primary);
}

/* Title container */
.panel-carousel-title {
    text-align: center;
    margin-bottom: 2em;
}

.panel-carousel-title h1 {
    color: var(--color-accent);
    margin: 0;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.75), 0 1px 3px rgba(0, 0, 0, 0.9);
}

/* Button container */
.panel-carousel-buttons {
    display: flex;
    gap: 1.5em;
    justify-content: center;
    align-items: center;
    margin-bottom: 1.5em;
}

.panel-carousel-buttons .buttonc-container {
    display: flex;
    gap: 1.5em;
    flex-wrap: wrap;
    justify-content: center;
}

.panel-carousel-buttons .button {
    background: rgba(var(--color-accent-rgb), 0.95);
    color: var(--color-primary);
    padding: .75em 3.5em;
    border-radius: var(--button-border-radius);
    text-decoration: none;
    font-size: 1.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.panel-carousel-buttons .button:hover {
    background: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.panel-carousel-buttons .button .ball {
    font-size: 1.8em;
    line-height: 1;
}

/* Image description text */
.panel-carousel-description {
    color: var(--color-accent);
    font-size: 2rem;
    font-weight: 500;
    white-space: nowrap;
    text-align: right;
    margin-left: auto;
}

body.page-id-16226 {
    padding-top: 0!important;
}

body.page-id-16226 .simple-header {
    margin-top: 0!important;
}

/* ============================================
   DOWNLOADS PAGE OVERRIDES - Match Premium Style
   ============================================ */

/* Downloads Section - Override inline styles */
.downloads-section {
    width: 100% !important;
    background-color: var(--color-accent) !important;
}

.downloads-section .wrapper-wide {
    width: 1500px !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 0 2em !important;
}

/* Downloads Page Title */
.downloads-section h2 {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    font-size: var(--font-size-h2) !important;
    color: var(--color-primary) !important;
    margin-bottom: .5em !important;
}

.downloads-section p {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-body) !important;
    color: var(--color-secondary) !important;
    margin-bottom: 1em !important;
}

/* Filters - Match premium style */
.downloads-section .filters {
    margin-bottom: 2em !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 1em !important;
    padding: 1em !important;
    background-color: var(--color-accent) !important;
    border: 1px solid var(--color-light-gray) !important;
    align-items: center !important;
    align-content: center !important;
    flex-direction: row !important;
}

.downloads-section .filters h3 {
    margin: 0 !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-article-heading) !important;
    color: var(--color-primary) !important;
}

.downloads-section .filters select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--color-light-gray) !important;
    border: 1px solid var(--color-light-gray) !important;
    border-radius: 0 !important;
    padding: var(--button-padding-vertical) 35px var(--button-padding-vertical) 15px !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    color: var(--color-secondary) !important;
    cursor: pointer !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%234a5b5d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 15px) center !important;
    transition: border-color 0.3s ease !important;
    margin-right: 0 !important;
}

.downloads-section .filters select:hover {
    border-color: var(--color-secondary) !important;
}

.downloads-section .filters select:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

.downloads-section .reset-filters {
    background-color: var(--color-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    color: var(--color-accent) !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
}

.downloads-section .reset-filters:hover {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-accent) !important;
    transform: translateY(-1px) !important;
}

.downloads-section .reset-filters:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Downloads Table - Match premium style */
.downloads-section .downloads-table {
    width: 100% !important;
    text-align: left !important;
    margin-bottom: 1em !important;
    font-family: var(--font-primary) !important;
    border-collapse: collapse !important;
}

.downloads-section .downloads-table thead {
    background-color: var(--color-light-gray) !important;
}

.downloads-section .downloads-table .view-button,
.downloads-section .downloads-table .download-button {
    margin-right: 1em !important;
    color: var(--color-primary) !important;
    text-decoration: none !important;
    transition: color 0.3s ease !important;
    display: inline-block !important;
}

.downloads-section .downloads-table .view-button:hover,
.downloads-section .downloads-table .download-button:hover {
    color: var(--color-secondary) !important;
}

.downloads-section .downloads-table .category-header:first-of-type {
    padding-top: 0 !important;
}

.downloads-section .downloads-table .category-header td {
    color: var(--color-primary) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    font-size: var(--font-size-article-heading) !important;
    padding-top: 2em !important;
    padding-bottom: 0.75em !important;
    border-bottom: none !important;
    padding-bottom: 0.75em !important;
    border-bottom: 1px solid var(--color-primary) !important;
}

.downloads-section .downloads-table .category-header:first-of-type td {
    padding-top: 1.5em !important;
}

.downloads-section .downloads-table th {
    padding: 1em 15px !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-semibold) !important;
    font-size: var(--font-size-cta) !important;
    color: var(--color-secondary) !important;
}

.downloads-section .downloads-table td {
    padding: 1em 15px !important;
    border-bottom: 1px solid var(--color-light-gray) !important;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    color: var(--color-secondary) !important;
}

.downloads-section .downloads-table td:last-of-type {
    text-align: left !important;
}

.downloads-section .downloads-table th:last-of-type {
    text-align: left !important;
}

.downloads-section .downloads-table tbody tr:hover {
    background-color: rgba(13, 58, 93, 0.05) !important;
}

.downloads-section .downloads-table tbody tr.category-header:hover {
    background-color: transparent !important;
}

/* Download Selected Button */
.downloads-section .button,
.downloads-section #download-selected {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    text-align: var(--button-text-align) !important;
    letter-spacing: var(--button-letter-spacing) !important;
    padding: var(--button-padding-vertical) var(--button-padding-horizontal) !important;
    border-radius: 0 !important;
    background-color: var(--color-primary) !important;
    color: var(--color-accent) !important;
    border: none !important;
    cursor: pointer !important;
    text-decoration: none !important;
    display: inline-block !important;
    transition: all 0.3s ease !important;
    font-kerning: auto !important;
    -webkit-font-kerning: auto !important;
    font-optical-sizing: auto !important;
    float: none !important;
    margin-top: 1em !important;
}

.downloads-section .button:hover,
.downloads-section #download-selected:hover {
    opacity: 0.9 !important;
    transform: translateY(-1px) !important;
}

/* Checkbox styling */
.downloads-section .downloads-table input[type="checkbox"] {
    cursor: pointer !important;
    width: 18px !important;
    height: 18px !important;
    margin-left: 1em !important;
    accent-color: var(--color-primary) !important;
}

/* ============================================
   CONTACT PAGE STYLES
   ============================================ */

/* Split Header - Dark Blue Background (Generic Reusable Component) */
.split-header-blue {
    background-color: var(--color-primary);
    padding: 7.5em 0;
    width: 100%;
    border-top: 1px solid #eee;
    min-height: 400px; /* Prevent CLS */
}

.split-header-blue .frame {
    max-width: 1500px;
    width: 100%;
    margin: 0 auto;
    padding: 0 4em;
}

.split-header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4em;
    min-height: 200px; /* Prevent CLS */
}

.split-header-left {
    flex: 0 0 auto;
    max-width: 60%;
}

.split-header-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 600px;
}

.split-header-title {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
    min-height: 77px; /* Prevent CLS during font load (64px * 1.2) */
}

.split-header-description {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: var(--font-weight-light);
    color: var(--color-accent);
    margin: 0;
    line-height: 1.6;
    min-height: 38px; /* Prevent CLS during font load (24px * 1.6) */
}

.split-header-button {
    margin-top: 0.5em;
}

/* Legacy support for contact-page.php (backwards compatibility) */
.contact-header-blue {
    background-color: var(--color-primary);
    padding: 7.5em 0;
    width: 100%;
    border-top: 1px solid #eee;
}

.contact-header-blue .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 4em;
}

.contact-header-blue-container {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 4em;
}

.contact-header-blue-left {
    flex: 0 0 auto;
}

.contact-header-blue-right {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2em;
    max-width: 600px;
}

.contact-header-blue-title {
    font-family: var(--font-heading);
    font-size: 64px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0;
    line-height: 1.2;
    letter-spacing: 0;
}

.contact-header-blue-description {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: var(--font-weight-light);
    color: var(--color-accent);
    margin: 0;
    line-height: 1.6;
}

.contact-header-blue-button {
    margin-top: 0.5em;
}

/* Button White Style */
.button-white {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border: 2px solid var(--color-accent) !important;
}

.button-white:hover {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

/* Button Gold Style */
.button-gold {
    background-color: #D4AF37 !important;
    color: var(--color-accent) !important;
    border: 2px solid #D4AF37 !important;
}

.button-gold:hover {
    background-color: #C19A2B !important;
    border-color: #C19A2B !important;
    color: var(--color-accent) !important;
}

/* FAQ Sections */
.contact-faqs-section {
    padding: 4em 0;
    width: 100%;
    background-color: var(--color-accent);
    overflow: visible;
}

.contact-faqs-section .frame {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2em;
}

.contact-faqs-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    max-width: 900px;
    margin: 0 auto;
    overflow: visible;
}

.contact-faq-group {
    border-top: 1px solid var(--color-light-gray);
    border-bottom: 1px solid var(--color-light-gray);
    margin-bottom: -1px;
}

.contact-faq-group:first-child {
    border-top: 2px solid var(--color-light-gray);
}

.contact-faq-group:last-child {
    border-bottom: 2px solid var(--color-light-gray);
}

.contact-faq-header {
    padding: 1.5em 0;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.contact-faq-header:hover {
    background-color: rgba(13, 58, 93, 0.02);
}

.contact-faq-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-article-heading);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.contact-faq-chevron {
    font-size: var(--font-size-cta);
    color: var(--color-primary);
    transition: transform 0.3s ease;
}

.contact-faq-group.active .contact-faq-chevron {
    transform: rotate(180deg);
}

.contact-faq-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

.contact-faq-group.active .contact-faq-content {
    max-height: none;
    overflow: visible;
}

.contact-faq-list {
    padding-bottom: 1em;
}

.contact-faq-item {
    background-color: var(--color-accent);
    border-radius: 8px;
    margin-bottom: 1em;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.contact-faq-item.active {
    overflow: visible;
}

.contact-faq-question {
    padding: 1.5em;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: background-color 0.3s ease;
}

.contact-faq-question:hover {
    background-color: rgba(13, 58, 93, 0.05);
}

.contact-faq-question-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-body);
    color: var(--color-primary);
    flex: 1;
    padding-right: 1em;
}

.contact-faq-item-chevron {
    font-size: var(--font-size-cta);
    color: var(--color-primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.contact-faq-item.active .contact-faq-item-chevron {
    transform: rotate(180deg);
}

.contact-faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease;
}

.contact-faq-item.active .contact-faq-answer {
    max-height: none;
    overflow: visible;
}

.contact-faq-answer-content {
    padding: 0 1.5em 1.5em 1.5em;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    line-height: 1.8;
}

.contact-faq-answer-content p {
    margin-bottom: 1em;
}

.contact-faq-answer-content p:last-child {
    margin-bottom: 0;
}

.contact-faq-answer-content a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.contact-faq-answer-content a:hover {
    text-decoration: underline;
}

/* Contact Details & Map Section */
.contact-details-map-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-light-gray);
}

.contact-details-map-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 2em;
}

.contact-details-map-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: start;
}

.contact-details-left {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.contact-details-title {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: .5em;
    margin-top: 0;
}

.contact-details-content {
    display: flex;
    flex-direction: column;
    gap: 1.5em;
}

.contact-details-content p {
    margin-bottom: 0;
}

.contact-detail-item {
    margin-top: 0;
}

.contact-detail-item p {
    margin-bottom: 0;
    margin-top: 0;
}

.contact-detail-item a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.contact-detail-item a:hover {
    text-decoration: underline;
}

.contact-detail-item strong {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

/* Google Maps */
.contact-map-right {
    position: relative;
    width: 100%;
    min-height: 400px;
}

#contact-google-map {
    width: 100%;
    height: 400px;
    border-radius: var(--button-border-radius);
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    background-color: var(--color-light-gray);
}

/* Style Google Maps controls to match brand */
#contact-google-map .gm-style .gm-control-active,
#contact-google-map .gm-style button,
#contact-google-map .gm-style .gm-fullscreen-control,
#contact-google-map .gm-style .gm-zoom-control {
    background-color: var(--color-accent) !important;
    border: 1px solid var(--color-light-gray) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

#contact-google-map .gm-style .gm-control-active:hover,
#contact-google-map .gm-style button:hover {
    background-color: var(--color-light-gray) !important;
    border-color: var(--color-primary) !important;
}

#contact-google-map .gm-style .gm-style-cc {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-cta) !important;
}

#contact-google-map .gm-style .gm-style-mtc button {
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    color: var(--color-secondary) !important;
}

#contact-google-map .gm-style .gm-style-mtc button:hover {
    color: var(--color-primary) !important;
}

.contact-map-placeholder {
    width: 100%;
    height: 400px;
    background-color: var(--color-accent);
    border: 2px dashed var(--color-light-gray);
    border-radius: var(--button-border-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2em;
}

.contact-map-placeholder p {
    text-align: center;
    margin: 0;
}

/* Contact Button Wrapper */
.contact-button-wrapper {
    margin-top: 1.5em;
}

.contact-button-wrapper .button,
.contact-button-wrapper .contact-modal-trigger {
    width: auto !important;
    margin: 0 !important;
    float: none !important;
}

/* Contact Form Modal - Override style.css conflicts */
.contact-modal {
    display: none !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.contact-modal.active {
    display: flex !important;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
}

/* Override any contact-overlay-container styles from style.css */
.contact-modal .contact_form_cont,
.contact-modal .bspoke_form {
    margin-top: 0 !important;
    font-size: inherit !important;
    width: 100% !important;
    float: none !important;
}

/* Ensure contact overlay works with new design */
.contact-overlay-container {
    z-index: 9999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.contact-overlay-container .coc_dark {
    background: rgba(0, 0, 0, 0.8) !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    z-index: 10000 !important;
}

.contact-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(13, 58, 93, 0.85);
    backdrop-filter: blur(4px);
}

.contact-modal-content {
    position: relative;
    background-color: var(--color-accent);
    margin: 0 auto;
    max-width: 900px;
    width: 90%;
    max-height: 90vh;
    border-radius: 8px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.3s ease;
    z-index: 10001;
}

.contact-modal.active .contact-modal-content {
    transform: scale(1) translateY(0);
}

.contact-modal-close {
    position: absolute;
    top: 1.5em;
    right: 1.5em;
    background: transparent;
    border: 2px solid var(--color-light-gray);
    font-size: var(--font-size-article-heading);
    color: var(--color-secondary);
    cursor: pointer;
    z-index: 10002;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.3s ease;
    padding: 0;
}

.contact-modal-close:hover {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-accent);
    transform: rotate(90deg);
}

.contact-modal-close i {
    font-size: 1.2em;
}

.contact-modal-header {
    padding: 3em 3em 2em;
    border-bottom: 2px solid var(--color-light-gray);
    background-color: var(--color-accent);
}

.contact-modal-title {
    font-family: var(--font-primary);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.2;
}

.contact-modal-body {
    padding: 3em;
    overflow-y: auto;
    flex: 1;
    background-color: var(--color-accent);
}

/* Contact Form Styles - Override style.css conflicts */
.contact-modal .contact-form-row,
.contact-modal .bspoke_form .contact-form-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 2em !important;
    margin-bottom: 2em !important;
    float: none !important;
}

.contact-modal .contact-form-row:last-of-type,
.contact-modal .bspoke_form .contact-form-row:last-of-type {
    margin-bottom: 0 !important;
}

.contact-modal .contact-form-row.contact-form-submit,
.contact-modal .bspoke_form .contact-form-row.contact-form-submit {
    grid-template-columns: 1fr !important;
    justify-items: flex-end !important;
    margin-top: 3em !important;
    padding-top: 2em !important;
    border-top: 1px solid var(--color-light-gray) !important;
}

.contact-modal .contact-form-row.gc_wrap,
.contact-modal .bspoke_form .contact-form-row.gc_wrap {
    grid-template-columns: 1fr !important;
    margin-top: 1em !important;
}

.contact-modal .contact-form-row label,
.contact-modal .bspoke_form label {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75em !important;
    width: auto !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    gap: 0;
}

.contact-modal .contact-form-row label:nth-child(odd),
.contact-modal .contact-form-row label:nth-child(even),
.contact-modal .bspoke_form label:nth-child(odd),
.contact-modal .bspoke_form label:nth-child(even) {
    padding: 0 !important;
}

.contact-modal .contact-form-row label.full-width,
.contact-modal .bspoke_form label.full-width,
.contact-modal .contact-form-row label.ta_label,
.contact-modal .bspoke_form label.ta_label {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    padding: 0 !important;
}

.contact-modal .contact-form-row .full-label,
.contact-modal .bspoke_form .full-label {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-primary) !important;
    margin-bottom: 0 !important;
    line-height: 1.4 !important;
}

.contact-modal .contact-form-row input[type="text"],
.contact-modal .contact-form-row input[type="email"],
.contact-modal .contact-form-row input[type="tel"],
.contact-modal .contact-form-row select,
.contact-modal .contact-form-row textarea,
.contact-modal .bspoke_form input[type="text"],
.contact-modal .bspoke_form input[type="email"],
.contact-modal .bspoke_form input[type="tel"],
.contact-modal .bspoke_form select,
.contact-modal .bspoke_form textarea {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-light) !important;
    color: var(--color-secondary) !important;
    padding: .25em 1.25em !important;
    border: 2px solid var(--color-light-gray) !important;
    border-radius: var(--button-border-radius) !important;
    background-color: var(--color-accent) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    box-sizing: border-box !important;
    line-height: 1.5 !important;
    margin-top: 0 !important;
    float: none !important;
}

.contact-modal .contact-form-row input::placeholder,
.contact-modal .contact-form-row textarea::placeholder,
.contact-modal .bspoke_form input::placeholder,
.contact-modal .bspoke_form textarea::placeholder {
    color: rgba(74, 91, 93, 0.5) !important;
    font-weight: var(--font-weight-light) !important;
}

.contact-modal .contact-form-row input:hover,
.contact-modal .contact-form-row select:hover,
.contact-modal .contact-form-row textarea:hover,
.contact-modal .bspoke_form input:hover,
.contact-modal .bspoke_form select:hover,
.contact-modal .bspoke_form textarea:hover {
    border-color: rgba(13, 58, 93, 0.3) !important;
}

.contact-modal .contact-form-row input:focus,
.contact-modal .contact-form-row select:focus,
.contact-modal .contact-form-row textarea:focus,
.contact-modal .bspoke_form input:focus,
.contact-modal .bspoke_form select:focus,
.contact-modal .bspoke_form textarea:focus {
    outline: none !important;
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.15) !important;
}

.contact-modal .contact-form-row textarea,
.contact-modal .bspoke_form textarea,
.contact-modal .contact-form-row .ta_itself,
.contact-modal .bspoke_form .ta_itself {
    min-height: 140px !important;
    resize: vertical !important;
    font-family: var(--font-primary) !important;
    line-height: 1.6 !important;
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin-top: 0.75em !important;
}

.contact-modal .contact-form-row select,
.contact-modal .bspoke_form select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-color: var(--color-accent) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230d3a5d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: calc(100% - 1.25em) center !important;
    padding-right: 3em !important;
    cursor: pointer !important;
}

.contact-modal .contact-form-row select:focus,
.contact-modal .bspoke_form select:focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' fill='%230d3a5d' viewBox='0 0 16 16'%3E%3Cpath d='M7.247 11.14 2.451 5.658C1.885 5.013 2.345 4 3.204 4h9.592a1 1 0 0 1 .753 1.659l-4.796 5.48a1 1 0 0 1-1.506 0z'/%3E%3C/svg%3E") !important;
}

.contact-modal .gdpr-label,
.contact-modal .gc_wrap label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 1em !important;
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-light) !important;
    color: var(--color-secondary) !important;
    cursor: pointer !important;
    line-height: 1.6 !important;
    padding: 1em !important;
    background-color: var(--color-light-gray) !important;
    border-radius: var(--button-border-radius) !important;
    transition: background-color 0.3s ease !important;
    width: 100% !important;
    float: none !important;
    margin-bottom: 0 !important;
}

.contact-modal .gdpr-label:hover,
.contact-modal .gc_wrap label:hover {
    background-color: rgba(13, 58, 93, 0.05) !important;
}

.contact-modal .gdpr-label input[type="checkbox"],
.contact-modal .gc_wrap input[type="checkbox"],
.contact-modal .gdpr_checkbox {
    width: 20px !important;
    height: 20px !important;
    margin-top: 0.1em !important;
    cursor: pointer !important;
    accent-color: var(--color-primary) !important;
    flex-shrink: 0 !important;
    margin-right: 10px !important;
    margin-bottom: 0 !important;
    padding: 0 !important;
    float: none !important;
}

.contact-modal .gdpr-label a,
.contact-modal .gc_wrap label a {
    color: var(--color-primary) !important;
    text-decoration: none !important;
    font-weight: var(--font-weight-semibold) !important;
    transition: text-decoration 0.3s ease !important;
}

.contact-modal .gdpr-label a:hover,
.contact-modal .gc_wrap label a:hover {
    text-decoration: underline !important;
}

.contact-modal .contact-form-submit,
.contact-modal .bspoke_form .contact-form-submit {
    margin-top: 2em !important;
}

.contact-modal .contact-form-submit .button,
.contact-modal .bspoke_form .button {
    width: auto !important;
    margin: 0 !important;
    min-width: 200px !important;
    float: none !important;
}

/* Form Success Message - Override style.css */
.contact-modal .cfs_cont.contact_form_submitted {
    display: none !important;
    padding: 3em 2em !important;
    background-color: var(--color-light-gray) !important;
    border-radius: var(--button-border-radius) !important;
    text-align: center !important;
    margin-bottom: 2em !important;
    border: 2px solid var(--color-primary) !important;
}

.contact-modal .contact_form_ajax.submitted .cfs_cont.contact_form_submitted {
    display: block !important;
}

.contact-modal .contact_form_ajax.submitted .contact_form_cont {
    display: none !important;
}

.contact-modal .cfs_title {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-extra-bold) !important;
    color: var(--color-primary) !important;
    margin-bottom: 1em !important;
    line-height: 1.3 !important;
}

.contact-modal .cfs_content {
    font-family: var(--font-primary) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-light) !important;
    color: var(--color-secondary) !important;
    line-height: 1.6 !important;
    max-width: 600px !important;
    margin: 0 auto !important;
}

/* ============================================
   NEW CONTACT PAGE LAYOUT STYLES
   ============================================ */

/* Contact Details & Form Section */
.contact-details-form-section {
    padding: 5em 0 2em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.contact-details-form-section .frame {
    max-width: 1500px;
    margin: 0 auto;
}

.contact-details-form-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3em;
    align-items: stretch;
}

.contact-details-column {
    display: flex;
    flex-direction: column;
}

.contact-details-card {
    background-color: var(--color-light-gray);
    padding: 5em;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.contact-details-card p {
    font-size: var(--font-size-lead-paragraph);
}

.contact-form-card {
    background-color: var(--color-accent);
    padding: 3.5em;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* Contact Form Column - Right */
.contact-form-column {
    display: flex;
    flex-direction: column;
}

.contact-form-inline {
    width: 100%;
}

.contact-form-inline .contact-form-row {
    margin-bottom: 1.5em;
    display: flex;
    flex-direction: column;
}

.contact-form-inline .contact-form-row-split {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5em;
}

.contact-form-inline .contact-form-row label {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-bottom: 0;
}

.contact-form-inline .contact-form-row .full-label {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-secondary);
    margin-bottom: 0.5em;
}

.contact-form-inline .contact-form-row input[type="text"],
.contact-form-inline .contact-form-row input[type="email"],
.contact-form-inline .contact-form-row textarea {
    width: 100%;
    padding: 0.75em;
    border: 1px solid #4a5b5d;
    border-radius: 4px;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    background-color: var(--color-accent);
    transition: border-color 0.3s ease;
}

.contact-form-inline .contact-form-row input[type="text"]:focus,
.contact-form-inline .contact-form-row input[type="email"]:focus,
.contact-form-inline .contact-form-row textarea:focus {
    outline: none;
    border-color: var(--color-primary);
}

.contact-form-inline .contact-form-row textarea {
    min-height: 120px;
    resize: vertical;
}

.contact-form-inline .gdpr-label {
    display: block !important;
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    cursor: pointer;
    line-height: 1.5;
}

.contact-form-inline .gdpr-label input[type="checkbox"] {
    display: inline-block;
    margin: 0 0.5em 0 0;
    vertical-align: middle;
    cursor: pointer;
    accent-color: var(--color-primary);
    width: 18px;
    height: 18px;
}

.contact-form-inline .gdpr-label a {
    color: var(--color-primary);
    text-decoration: underline;
}

.contact-form-inline .gdpr-label a:hover {
    color: var(--color-secondary);
}

.contact-form-inline .contact-form-submit {
    margin-top: 1em;
    display: flex;
    justify-content: flex-end;
}

.contact-form-inline .contact-form-submit .button {
    width: auto;
    min-width: 150px;
}

/* Contact Map Section - Grey Container with Padding */
.contact-map-section {
    padding: 4em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.contact-map-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    
}

.contact-map-container {
    width: 100%;
    background-color: var(--color-light-gray);
    padding: 2em;
    border-radius: 8px;
}

.contact-map-container #contact-google-map {
    width: 100%;
    height: 500px;
    border-radius: 4px;
    overflow: hidden;
}

/* ============================================
   FIND YOUR REP SECTION
   ============================================ */

.find-your-rep-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-light-gray);
}


.find-your-rep-section h2 {
    margin-bottom: 0;
    margin-top: 0;
    text-align: left;
}

.find-rep-intro {
    margin-bottom: 2em;
    text-align: left;
}

.find-rep-intro p {
    margin-bottom: 0;
}

/* Map Legend Box */
.map-legend-box {
    background: var(--color-accent);
    border: 0;
    border-radius: var(--button-border-radius);
    padding: 1.5em;
    margin-bottom: 2em;
    margin-top: 1em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: 0.75em;
    margin-bottom: 0.75em;
    cursor: pointer;
    padding: 0.5em;
    border-radius: 4px;
    transition: background 0.3s ease;
}

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

.legend-item:hover {
    background: rgba(13, 58, 93, 0.1);
}

.legend-item.active {
    background: rgba(13, 58, 93, 0.15);
    border: 1px solid var(--color-primary);
}

.legend-color {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    flex-shrink: 0;
}

.legend-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.find-rep-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: start;
}

/* Left Side - Form */
.find-rep-left {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.find-rep-search-box {
    background-color: var(--color-accent);
    padding: 2em;
    border-radius: var(--button-border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.find-rep-search-box h3 {
    margin-top: 0;
    margin-bottom: .5em;
}

.postcode-search-form {
    display: flex;
    flex-direction: row;
    gap: 1em;
}

.postcode-input {
    width: 100%;
    padding: 1em;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-secondary);
    background-color: var(--color-accent);
    border: 2px solid var(--color-light-gray);
    border-radius: var(--button-border-radius);
    transition: border-color 0.3s ease;
}

.postcode-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px rgba(var(--color-primary-rgb), 0.2);
}

.postcode-input::placeholder {
    color: var(--color-secondary);
    opacity: 0.6;
}

.postcode-search-form .button {
    width: 100%;
    margin: 0;
}

/* Rep Result Card */
.find-rep-result {
    background-color: var(--color-accent);
    border: 2px solid var(--color-primary);
    border-radius: var(--button-border-radius);
    padding: 2em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.rep-card {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.rep-card .rep-name {
    margin: 0;
    color: var(--color-primary);
}

.rep-card .rep-title {
    margin: 0;
    font-size: var(--font-size-cta);
    color: var(--color-secondary);
}

.rep-contact {
    margin-top: 0.5em;
}

.rep-contact p {
    margin: 0.5em 0;
}

.rep-contact a {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-semibold);
}

.rep-contact a:hover {
    text-decoration: underline;
}

.rep-areas {
    margin-top: 0.5em;
    padding-top: 1em;
    border-top: 1px solid var(--color-light-gray);
}

.rep-areas p {
    margin: 0;
}

.rep-areas .areas-list {
    color: var(--color-primary);
}

/* Error Message */
.find-rep-error {
    background-color: var(--color-accent);
    border: 2px solid rgba(255, 0, 0, 0.5);
    border-radius: var(--button-border-radius);
    padding: 2em;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.find-rep-error p {
    margin: 0;
    color: var(--color-secondary);
}

/* Right Side - Map */
.find-rep-right {
    position: relative;
}

.uk-map-container {
    position: relative;
    width: 100%;
    background-color: var(--color-accent);
    border-radius: var(--button-border-radius);
    padding: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.uk-map-svg {
    width: 100%;
    height: auto;
    display: block;
    max-width: 100%;
}

/* ============================================
   MISSION, VISION, VALUES SECTION
   ============================================ */

.mission-vision-values-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-light-gray);
}

.mission-vision-values-section .frame {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
}

.mission-vision-values-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2em;
}

.mission-vision-values-box {
    background-color: var(--color-accent);
    padding: 3em 2.5em;
    border-radius: var(--button-border-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.mission-vision-values-box h3 {
    margin-bottom: 0;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.mission-vision-values-box p {
    margin-bottom: 0;
    margin-top: .25em;
    line-height: 1.8;
}

/* ============================================
   FIVE IMAGES SECTION
   ============================================ */

.five-images-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.five-images-section .frame {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

.five-images-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1.5em;
}

.five-images-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--button-border-radius);
    aspect-ratio: 4 / 3;
}

.five-images-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}

.five-images-item:hover .five-images-image {
    transform: scale(1.05);
}

/* ============================================
   STRATEGIES SECTION
   ============================================ */

.strategies-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.strategies-section .frame {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

.strategies-title {
    text-align: center;
    margin-bottom: 1em;
    text-transform: uppercase;
}

.strategies-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 1.5em;
    grid-auto-rows: minmax(300px, 500px);
}

.strategies-item {
    position: relative;
    overflow: hidden;
    border-radius: var(--button-border-radius);
    cursor: pointer;
}

.strategies-item-full {
    grid-column: span 12;
}

.strategies-item-two-thirds {
    grid-column: span 8;
}

.strategies-item-half {
    grid-column: span 6;
}

.strategies-item-third {
    grid-column: span 4;
}

.strategies-image-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    min-height: 300px;
    max-height: 500px;
    overflow: hidden;
}

.strategies-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease;
}

.strategies-item:hover .strategies-image {
    transform: scale(1.08);
}

.strategies-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(13, 58, 93, 0.95) 0%, rgba(13, 58, 93, 0.85) 50%, transparent 100%);
    padding: 2.5em 2em 2em;
    color: var(--color-accent);
    transform: translateY(0);
    transition: max-height 0.6s ease-in-out, padding 0.6s ease-in-out;
    max-height: 60%;
    overflow: hidden;
}

.strategies-item:hover .strategies-overlay {
    max-height: 100%;
    padding: 7.5em 2em 2em;
}

.strategies-overlay-title {
    color: var(--color-accent);
    margin-bottom: 0.25em;
    margin-top: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.strategies-overlay-description {
    color: var(--color-accent);
    margin-bottom: 0;
    margin-top: 0;
    line-height: 1.8;
    opacity: 0.95;
}

/* ============================================
   HERO BANNER SECTION
   ============================================ */

.hero-banner {
    position: relative;
    width: 100%;
    padding-top: 0;
    padding-bottom: 0;
}

.hero-banner-background {
    position: relative;
    width: 100%;
    min-height: 800px;
    max-height: 800px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    flex-direction: column;
}

.hero-banner-container {
    position: relative;
    width: 100%;
    max-width: 1500px;
    margin: 0 auto;
    height: 100%;
    min-height: 800px;
    align-self: stretch;
}

.hero-banner-overlay {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 650px;
    height: 100%;
    background-color: rgba(13, 58, 93, 0.85);
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 60px 40px;
}

.hero-banner-content {
    text-align: left;
    max-width: 600px;
    width: 100%;
    position: relative;
    z-index: 2;
    margin-left: 0;
}

.hero-banner-heading {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 64px;
    line-height: 1.2;
    color: var(--color-accent);
    margin: 0;
    text-transform: none;
    letter-spacing: 0;
    margin-bottom: .5em;
    /* text-shadow: 2px 2px 4px #696969; */
}

.hero-banner-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 20px;
    align-items: center;
}

.hero-banner-button {
    margin-top: 0;
}

.hero-banner-case-study {
    position: absolute;
    bottom: 75px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 10;
    text-align: right;
    max-width: 1250px;  
    margin: 0 auto;
}

.hero-banner-case-study-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 20px 0;
    background-color: transparent;
    display: none;
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: var(--font-weight-light);
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 1px 1px #1a1a1a;
}

.hero-banner-intro {
    background-color: transparent;
    padding: 0;
    width: 100%;
    position: relative;
    margin-top: -75px;
    z-index: 5;
}

.hero-banner-intro-container {
    max-width: 1250px;
    margin: 0 auto;
    padding: 60px 40px 30px 40px;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 40px;
}

.hero-banner-intro-left {
    flex: 1;
}

.hero-banner-intro-right {
    flex: 1;
}

.hero-banner-intro-divider {
    width: 2px;
    height: 80px;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.hero-banner-intro-text {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-primary);
    line-height: 1.6;
    margin: 0;
}

.hero-banner-intro-left .hero-banner-intro-text {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 34px;
    text-align: right;
    line-height: 1.25em;
}



/* ============================================
   CASE STUDY IMAGE CAROUSEL SECTION
   ============================================ */

.case-study-image-carousel-section {
    width: 100%;
    padding: 80px 0 80px 0;
    background-color: var(--color-accent);
}

.template-home .case-study-image-carousel-section {
    padding: 40px 0 80px 0;
}

.case-study-image-carousel-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.case-study-image-carousel-wrapper {
    display: flex;
    gap: 60px;
    align-items: center;
}

.case-study-image-carousel-image-container {
    flex: 1;
}

.case-study-image-carousel-content {
    flex: 1;
}

.case-study-image-carousel-image-container {
    position: relative;
    width: 100%;
    overflow: hidden;
    min-height: 400px;
    height: 400px;
}

.case-study-image-carousel-image-track {
    position: relative;
    width: 100%;
    min-height: 400px;
    height: 100%;
}

.case-study-image-carousel-image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.case-study-image-carousel-image-slide.active {
    position: absolute;
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.case-study-image-carousel-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center;
}

.case-study-image-carousel-nav-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.case-study-image-carousel-nav-arrow {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 18px;
    color: var(--color-primary);
    border-radius: 0;
}

.case-study-image-carousel-nav-arrow:hover {
    background-color: var(--color-accent);
    opacity: 0.95;
}

.case-study-image-carousel-nav-arrow:active {
    transform: scale(0.95);
}

.case-study-image-carousel-content {
    position: relative;
}

.case-study-image-carousel-content-slide {
    display: none;
}

.case-study-image-carousel-content-slide.active {
    display: block;
}

.case-study-image-carousel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    color: var(--color-primary);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.case-study-image-carousel-paragraph {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.case-study-image-carousel-button {
    margin-top: 20px;
}



/* ============================================
   CASE STUDY CAROUSEL SECTION
   ============================================ */

.case-study-carousel-section {
    width: 100%;
    padding: 80px 0 80px 0;
    background-color: var(--color-accent);
}

.case-study-carousel-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.case-study-carousel-wrapper {
    display: flex;
    gap: 60px;
    align-items: center;
}

.case-study-carousel-image-container {
    flex: 1;
    position: relative;
    width: 100%;
    overflow: hidden;
}

.case-study-carousel-image-container {
    min-height: 400px;
    height: 400px;
}

.case-study-carousel-image-track {
    position: relative;
    width: 100%;
    min-height: 400px;
    height: 100%;
}

.case-study-carousel-image-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.case-study-carousel-image-slide {
    height: 100%;
}

.case-study-carousel-image-slide.active {
    position: absolute;
    opacity: 1;
    visibility: visible;
    height: 100%;
}

.case-study-carousel-image {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover !important;
    object-position: center;
}

.email-input-field {
    display: none!important;
}

section.general-content {
    padding-top: 2em;
}

.case-study-carousel-nav-controls {
    position: absolute;
    bottom: 20px;
    right: 20px;
    display: flex;
    gap: 10px;
    z-index: 10;
}

.case-study-carousel-nav-arrow {
    width: 50px;
    height: 50px;
    background-color: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    font-size: 18px;
    color: var(--color-primary);
    border-radius: 0;
}

.case-study-carousel-nav-arrow:hover {
    background-color: var(--color-accent);
    opacity: 0.95;
}

.case-study-carousel-nav-arrow:active {
    transform: scale(0.95);
}

.case-study-carousel-content {
    flex: 1;
    position: relative;
}

.case-study-carousel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    color: var(--color-primary);
    margin: 0 0 .5em 0;
    line-height: 1;
}

.case-study-carousel-paragraph {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0 0 30px 0;
}

.case-study-carousel-button {
    margin-top: 20px;
}



/* ============================================
   FEATURE GRID SECTION
   ============================================ */

.feature-grid-section {
    width: 100%;
    padding: 80px 0;
    background-color: var(--color-accent);
}

.feature-grid-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.feature-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    align-items: center;
}

.feature-grid-item {
    text-align: center;
}

.feature-grid-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 28px;
    color: var(--color-primary);
    margin: 0 0 15px 0;
    line-height: 1.2;
}

.feature-grid-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    line-height: 1.6;
    margin: 0;
}



/* ============================================
   TWO COLUMN INVERTED SECTION
   ============================================ */

.two-column-inverted-section {
    width: 100%;
    padding: 80px 0;
    background-color: var(--color-primary);
}

.two-column-inverted-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.two-column-inverted-wrapper {
    display: flex;
    flex-direction: row;
    gap: 60px;
    align-items: center;
}

.two-column-inverted-content {
    flex: 1;
    flex-shrink: 0;
}

.two-column-inverted-content-full {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

.two-column-inverted-image {
    flex: 1;
    flex-shrink: 0;
    background-color: var(--color-accent);
    min-height: 400px;
    display: flex;
    align-items: stretch;
    justify-content: center;
}

.two-column-inverted-img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.two-column-inverted-placeholder {
    font-family: var(--font-primary);
    font-size: 24px;
    font-weight: var(--font-weight-light);
    color: var(--color-secondary);
    text-align: center;
    padding: 60px 40px;
}

.two-column-inverted-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 36px;
    color: var(--color-accent);
    margin: 0 0 30px 0;
    line-height: 1.2;
}

.two-column-inverted-text {
    color: var(--color-accent);
    margin-bottom: 30px;
}

.two-column-inverted-text p {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-light);
    color: var(--color-accent);
    line-height: 1.6;
    margin: 0 0 20px 0;
}

.two-column-inverted-text p:last-child {
    margin-bottom: 0;
}

.two-column-inverted-cta {
    margin-top: 30px;
}



/* ============================================
   STRAPLINE TEXT SECTION
   ============================================ */

.strapline-text-section {
    width: 100%;
    padding: 60px 0;
    background-color: var(--color-accent);
}

.strapline-text-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
}

.strapline-text-line {
    width: 60px;
    height: 2px;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.strapline-text-content {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-light);
    color: var(--color-primary);
    text-align: center;
    margin: 0;
    max-width: 800px;
}


/* ============================================
   IMAGE CARDS SECTION
   ============================================ */

.image-cards-section {
    width: 100%;
    padding: 60px 0 80px 0;
    background-color: var(--color-accent);
}

.image-cards-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.image-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.image-card-item {
    position: relative;
    display: block;
    text-decoration: none;
    overflow: hidden;
    border-radius: 0;
    transition: transform 0.3s ease;
}

.image-card-item:hover {
    transform: translateY(-8px);
}

.image-card-image {
    width: 100%;
    height: 400px;
    overflow: hidden;
    position: relative;
}

.image-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.image-card-item:hover .image-card-img {
    transform: scale(1.1);
}

/* Overlay for text readability */
.image-card-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(13, 58, 93, 0.6);
    transition: background-color 0.3s ease;
}

.image-card-item:hover .image-card-image::after {
    background-color: rgba(13, 58, 93, 0.7);
}

.image-card-title {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    padding: 30px;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 32px;
    color: var(--color-accent);
    margin: 0;
    line-height: 1.2;
    text-align: center;
    z-index: 2;
}

/* ============================================
   PRODUCTS PAGE STYLES
   ============================================ */

/* Products Introduction Section */
.products-intro-section {
    padding: 0 0 2em 0;
    width: 100%;
    background-color: var(--color-accent);
}

/* Header - mirrors hero-banner-intro styling */
.products-intro-header {
    background-color: transparent;
    padding: 0;
    width: 100%;
    position: relative;
}

.products-intro-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 60px 40px 60px 40px;
    background-color: var(--color-accent);
    display: flex;
    align-items: center;
    gap: 40px;
}

.products-intro-header-left {
    flex: 1;
}

.products-intro-header-right {
    flex: 1;
}

.products-intro-header-divider {
    width: 2px;
    height: 80px;
    background-color: var(--color-primary);
    flex-shrink: 0;
}

.products-intro-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 34px;
    color: var(--color-primary);
    margin: 0;
    line-height: 1.25em;
    text-align: right;
}

.products-intro-text {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-primary);
    margin: 0;
    line-height: 1.6;
}

/* Products Grid */
.products-intro-frame {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

.products-intro-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 2em;
}

.products-intro-card {
    display: flex;
    flex-direction: row;
    overflow: hidden;
    min-height: 320px;
}

.products-intro-card-image {
    width: 50%;
    flex-shrink: 0;
    overflow: hidden;
}

.products-intro-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.products-intro-card:hover .products-intro-card-image img {
    transform: scale(1.05);
}

.products-intro-card-content {
    width: 50%;
    padding: 4em 2em;
    display: flex;
    flex-direction: column;
    background-color: var(--color-primary);
}

.products-intro-card-subtitle {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-body);
    color: var(--color-accent);
    margin: 0 0 0.25em 0;
    line-height: 1.2;
}

.products-intro-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h3);
    color: var(--color-accent);
    margin: 0 0 1em 0;
    line-height: 1.2;
}

.products-intro-card-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-feature-description);
    color: var(--color-accent);
    margin: 0 0 1.5em 0;
    line-height: 1.6;
    flex-grow: 1;
}

.products-intro-card-btn {
    align-self: flex-start;
    margin-top: 1.5rem;
    font-family: var(--font-primary) !important;
    font-weight: var(--font-weight-light) !important;
    font-size: var(--font-size-cta) !important;
    padding: 0.75em 1.5em !important;
    margin-top: 2em;
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

.products-intro-card-btn:hover {
    background-color: var(--color-light-gray) !important;
}

/* Trusted By Section */
.trusted-by-section {
    padding: 4em 0;
    width: 100%;
    background-color: var(--color-primary);
    text-align: center;
}

.trusted-by-frame {
    width: 80%;
    max-width: 1200px;
    margin: 0 auto;
}

.trusted-by-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-accent);
    margin: 0 0 0.5em 0;
    line-height: 1.2;
}

.trusted-by-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-body);
    color: var(--color-accent);
    margin: 0 0 1em 0 !important;
    line-height: 1.6;
}

.trusted-by-btn {
    background-color: transparent !important;
    color: var(--color-accent) !important;
    border: 2px solid var(--color-accent) !important;
}

.trusted-by-btn:hover {
    background-color: var(--color-accent) !important;
    color: var(--color-primary) !important;
}

/* USP Icons Bar Section */
.usp-icons-bar-section {
    padding: 4em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.usp-icons-bar-frame {
    width: 90%;
    max-width: 1500px;
    margin: 0 auto;
}

.usp-icons-bar-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 2em;
    align-items: start;
    justify-items: center;
}

.usp-icons-bar-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.usp-icons-bar-icon-wrapper {
    width: 100px;
    height: 100px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1em;
}

.usp-icons-bar-icon-wrapper i {
    font-size: 4em;
    color: var(--color-primary);
}

.usp-icons-bar-image {
    max-width: 100%;
    max-height: 100px;
    height: auto;
    object-fit: contain;
}

.usp-icons-bar-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: var(--color-primary);
    margin: 0 0 0.5em 0;
    line-height: 1.2;
}

.usp-icons-bar-description {
    font-family: var(--font-primary);
    font-weight: var(--font-weight-light);
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary);
    margin: 0;
    line-height: 1.4;
}

/* ============================================
   RESPONSIVE STYLES - All Media Queries
   ============================================ */

/* 1400px Breakpoint */
@media (max-width: 1400px) {
    .premium-footer-top {
        grid-template-columns: 30% 1fr 1fr 1fr;
        gap: 60px;
    }

    .premium-accreditations-section .accreditations-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, auto));
    }
}

/* 1200px Breakpoint */
@media (max-width: 1200px) {
    .premium-desktop-menu {
        display: none;
    }
    
    /* Show main navigation items in overlay when desktop menu is hidden */
    .overlay-main-nav {
        display: list-item;
    }

    .premium-contact-info {
        font-size: var(--font-size-cta);
        gap: 15px;
    }

    .premium-footer-top {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }

    .premium-footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .premium-footer-bottom-links {
        order: 2;
    }

    .premium-footer-certifications {
        order: 3;
    }

    .premium-hero-section .hero-features-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 3em;
    }

    .premium-accreditations-section .accreditations-grid {
        grid-template-columns: repeat(2, auto);
        gap: 2em;
        justify-content: flex-start;
    }

    .case-studies-grid.three-columns {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-benefits-container {
        grid-template-columns: 1fr;
        gap: 3em;
    }

    .other-products-slide {
        flex: 0 0 calc(50% - 1em);
    }

    .panel-carousel-overlay {
        padding: 4em 0 0;
    }

    .panel-carousel-buttons .button {
        font-size: 1.6rem;
        padding: 0.8em 1.5em;
    }

    .panel-carousel-description {
        font-size: 1.6rem;
    }

    /* Mission, Vision, Values Responsive */
    .mission-vision-values-grid {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    /* Five Images Responsive */
    .five-images-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5em;
    }

    .five-images-item:nth-child(4),
    .five-images-item:nth-child(5) {
        grid-column: span 1;
    }

    /* Strategies Responsive */
    .strategies-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1.5em;
    }

    .strategies-item-full {
        grid-column: span 6;
    }

    /* Products Intro Responsive 1200px */
    .products-intro-grid {
        grid-template-columns: 1fr;
    }

    .products-intro-card {
        min-height: 280px;
    }

    /* USP Icons Bar Responsive 1200px */
    .usp-icons-bar-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 2em;
    }

    .strategies-item-two-thirds {
        grid-column: span 4;
    }

    .strategies-item-half {
        grid-column: span 3;
    }

    .strategies-item-third {
        grid-column: span 2;
    }
}

/* 1200px Breakpoint - Break earlier for video-benefits section */
@media (max-width: 1200px) {
    .video-benefits-gallery-section .frame {
        padding: 0 2.5em;
    }
    
    .video-benefits-gallery-container {
        gap: 3em;
    }
}

/* 1024px Breakpoint */
@media (max-width: 1024px) {
    /* Video Benefits Gallery Responsive - Break earlier due to content */
    .video-benefits-gallery-section {
        padding: 4em 0;
    }
    
    .video-benefits-gallery-section .frame {
        max-width: 100%;
        padding: 0 2em;
    }
    
    .video-benefits-gallery-container {
        grid-template-columns: 1fr;
        gap: 2.5em;
    }

    .video-benefits-gallery-section.nbs-spec-hub .video-benefits-gallery-container {
        gap: 0;
    }
    
    .gallery-main-display {
        margin-bottom: 1.5em;
    }
    
    .gallery-thumbnails {
        gap: 0.75em;
        margin: 0 -2em;
        padding: 0 2em 10px 2em;
    }
    
    .gallery-thumbnail {
        width: 70px;
        height: 70px;
        min-width: 70px;
    }
    
    .benefits-content {
        font-size: 16px;
    }
    
    .benefits-cta-links .btn {
        width: 100%;
        text-align: center;
    }

    .benefits-nbs-spec-banner {
        padding: 1em;
    }

    .benefits-nbs-spec-banner-title {
        font-size: 18px;
        margin-bottom: 0.7em;
    }

    .benefits-nbs-specs {
        grid-template-columns: 1fr;
    }
    
    .case-study-hero {
        flex-direction: column;
        min-height: auto;
        max-height: 100%;
    }

    .case-study-content-container {
        max-width: 100%;
    }

    .case-study-hero-left {
        width: 100%;
        margin-left: 0;
        padding: 3em 4em;
    }

    .premium-header .container {
        padding: 0 4em;
    }

    .case-study-hero-right {
        width: 100%;
        margin-left: 0;
        margin-top: -5%;
        min-height: 400px;
    }

    .case-study-content-section {
        flex-direction: column;
        gap: 3em;
        padding: 0 4em;
        width: 100% !important;
        max-width: 100% !important;
    }

    .case-study-text {
        padding-right: 0;
    }

    .case-study-gallery {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        padding: 0 !important;
    }

    .case-study-gallery-grid {
        grid-template-columns: 1fr !important;
        gap: 1.5em;
        width: 100%;
        max-width: 100%;
    }

    .case-study-gallery-item {
        grid-column: span 1 !important;
        width: 100%;
        max-width: 100%;
    }

    .case-study-gallery-item:not(.case-study-testimonial-item):nth-child(4n + 3),
    .case-study-gallery-item:not(.case-study-testimonial-item):nth-child(4n + 4) {
        grid-column: span 1 !important;
    }

    .case-study-testimonial-item {
        grid-column: span 1 !important;
    }

    .case-study-gallery-item.last-item-full-width {
        grid-column: span 1 !important;
    }

    .blog-50-50-container {
        flex-direction: column !important;
    }

    .blog-50-50-container.image-left .blog-50-50-text,
    .blog-50-50-container.image-right .blog-50-50-text {
        order: 1 !important;
    }

    .blog-50-50-container.image-left .blog-50-50-image,
    .blog-50-50-container.image-right .blog-50-50-image {
        order: 2 !important;
    }

    .blog-50-50-text,
    .blog-50-50-image {
        flex: 1 1 100%;
        width: 100%;
    }

    .related-posts-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .news-grid-articles {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }

    .product-hero-section {
        flex-direction: column;
        min-height: auto;
        max-height: 100%;
    }

    .product-hero-section .case-study-hero-left {
        width: 100%;
        margin-left: 0;
        padding: 3em 4em;
    }

    .product-hero-section .case-study-hero-right {
        width: 100%;
        margin-left: 0;
        margin-top: -5%;
        min-height: 400px;
    }
    .hero-banner-overlay {
        width: 450px;
    }
    
    .hero-banner-content {
        max-width: 500px;
    }
    
    .hero-banner-heading {
        font-size: 48px;
    }
    .case-study-image-carousel-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .case-study-image-carousel-image-container {
        width: 100%;
        min-height: 400px;
    }
    
    .case-study-image-carousel-image-track {
        min-height: 400px;
        height: 400px;
    }
    
    .case-study-image-carousel-content {
        width: 100%;
        min-height: auto;
    }
    
    .case-study-image-carousel-title {
        font-size: 28px;
        text-align: center;
    }
    
    .case-study-image-carousel-paragraph {
        text-align: center;
    }
    
    .case-study-image-carousel-button {
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    .case-study-image-carousel-content {
        text-align: center;
    }
    .case-study-carousel-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .case-study-carousel-image-container {
        width: 100%;
    }
    
    .case-study-carousel-content {
        width: 100%;
    }
    
    .case-study-carousel-title {
        font-size: 28px;
    }
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 40px;
    }
    .two-column-inverted-wrapper {
        flex-direction: column;
        gap: 40px;
    }
    
    .two-column-inverted-content {
        width: 100%;
    }
    
    .two-column-inverted-image {
        width: 100%;
        min-height: 300px;
    }
    
    .two-column-inverted-title {
        font-size: 28px;
    }
    .image-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 30px;
    }
    
    .image-cards-grid .image-card-item:last-child {
        grid-column: span 2;
    }
}

/* 768px Breakpoint */
@media (max-width: 768px) {
    .premium-header .premium-logo {
        max-width: 250px;
    }
    
    .premium-header .premium-logo img {
        margin-left: 0!important;
        max-width: 250px;
    }

    .premium-header .container {
        align-items: center;
        padding-top: .5em;
    }

    .hero-banner-content {
        text-align: center;
    }

    .hero-banner-content .btn {
        display: inline-block!important;
        float:none!important;
    }

    .hero-banner-buttons {
        justify-content: center;
        flex-direction: column;
        align-items: stretch;
    }

    .hero-banner-buttons .btn {
        text-align: center;
    }
    
    .find-rep-container {
        grid-template-columns: 1fr;
        gap: 2em;
    }
    
    .find-rep-left {
        order: 1;
    }
    
    .find-rep-right {
        order: 2;
    }
    
    .uk-map-container {
        padding: 1em;
    }
    
    .find-your-rep-section {
        padding: 4em 0;
    }
    
    .find-your-rep-section .frame {
        width: 90%;
    }
    
    .find-rep-search-box {
        padding: 1.5em;
    }
    
    .find-rep-result {
        padding: 1.5em;
    }
    
    /* Downloads Section Responsive */
    .downloads-section {
        padding: 4em 0 !important;
    }

    .downloads-section .wrapper-wide {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 1em !important;
    }
    
    .wrapper-wide {
        width: 100% !important;
        max-width: 100% !important;
    }

    .downloads-section .filters {
        flex-direction: column !important;
    }

    .downloads-section .filters select {
        width: 100% !important;
    }

    .downloads-section .reset-filters {
        width: 100% !important;
    }

    .downloads-section .downloads-table {
        font-size: 14px !important;
    }

    .downloads-section .downloads-table th,
    .downloads-section .downloads-table td {
        padding: 0.75em 10px !important;
        font-size: 14px !important;
    }

    .downloads-section .downloads-table .category-header td {
        font-size: 18px !important;
    }

    .downloads-section .button,
    .downloads-section #download-selected {
        width: 100% !important;
        text-align: center !important;
    }

    .premium-header .container {
        width: 90%;
        max-width: 90%;
    }

    .premium-contact-info {
        display: flex !important;
        align-items: center;
        gap: 15px;
    }
    
    .premium-contact-info .contact-text {
        display: none !important;
    }
    
    .premium-contact-info .separator {
        display: none !important;
    }
    
    .premium-contact-info .contact-icon {
        display: inline-block !important;
        font-size: 20px;
        color: var(--color-accent);
    }
    
    .premium-contact-info .contact-link {
        display: flex;
        align-items: center;
    }
    
    .premium-header .top-navigation.container {
        justify-content: space-between;
    }

    .premium-overlay-nav {
        width: 100%;
        right: -100%;
    }

    .premium-header .premium-nav-right {
        gap: 20px;
    }

    .premium-footer-container {
        width: 90%;
    }

    /* Video Benefits Gallery Responsive - Mobile */
    .video-benefits-gallery-section {
        padding: 3em 0;
    }
    
    .video-benefits-gallery-section .frame {
        padding: 0 1.5em;
    }
    
    .video-benefits-gallery-container {
        gap: 2em;
    }
    
    .gallery-main-display {
        margin-bottom: 1.25em;
    }
    
    .gallery-thumbnails {
        gap: 0.5em;
        margin: 0 -1.5em;
        padding: 0 1.5em 10px 1.5em;
    }
    
    .gallery-thumbnail {
        width: 60px;
        height: 60px;
        min-width: 60px;
    }
    
    .benefits-title {
        font-size: 28px;
    }
    
    .benefits-content {
        font-size: 16px;
    }
    
    .benefits-content p {
        margin-bottom: 1em;
    }
    
    .benefits-cta-links .btn {
        width: 100%;
        text-align: center;
        padding: 1em 2em;
    }

    .benefits-nbs-specs {
        grid-template-columns: 1fr;
    }
    
    /* Product Features Responsive */
    .product-features-tabs {
        flex-direction: column;
    }
    
    .product-features-tab {
        width: 100%;
        text-align: left;
    }
    
    .features-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .premium-footer {
        padding: 40px 0 20px;
        margin-top: 0;
        text-align: center;
    }

    .premium-footer-top {
        grid-template-columns: 1fr;
        gap: 35px;
        padding-bottom: 30px;
        text-align: center;
    }

    .premium-footer-left {
        text-align: center;
        align-items: center;
    }

    .premium-footer-logo {
        text-align: center;
        display: flex;
        justify-content: center;
    }

    .premium-footer-logo img,
    .premium-footer-brand img {
        margin: 0 auto;
    }

    .premium-footer-tagline {
        font-size: var(--font-size-article-heading);
        text-align: center !important;
    }

    .premium-footer-column {
        text-align: center;
    }

    .premium-footer-column h4.premium-footer-heading,
    .premium-footer-contact h4.premium-footer-heading,
    .premium-footer-social h4.premium-footer-heading {
        font-size: var(--font-size-article-heading);
        text-align: center !important;
    }

    .premium-footer-heading-hr {
        margin: 6px auto 18px auto;
    }

    .premium-footer-menu {
        text-align: center;
    }

    .premium-footer-menu li {
        text-align: center;
    }

    .premium-footer-menu li a,
    .premium-footer-contact-item a {
        font-size: var(--font-size-cta);
        text-align: center !important;
        justify-content: center;
    }

    .premium-footer-right {
        text-align: center;
        align-items: center;
    }

    .premium-footer-contact,
    .premium-footer-social {
        text-align: center;
    }

    .premium-footer-contact-item {
        justify-content: center;
        text-align: center;
    }

    .premium-social-icons {
        justify-content: center;
    }

    .premium-footer-copy {
        text-align: center !important;
        margin: 0 auto;
        width: 100% !important;
    }

    .premium-copyright {
        font-size: var(--font-size-cta);
        text-align: center !important;
    }

    .premium-footer-bottom-links a {
        font-size: var(--font-size-cta);
        text-align: center;
    }

    .premium-footer-bottom {
        align-items: center;
        text-align: center;
        flex-direction: column;
        gap: 20px;
    }

    .premium-footer-bottom-left {
        text-align: center;
        width: 100%;
    }

    .premium-footer-bottom-links {
        justify-content: center;
        text-align: center;
        width: 100%;
    }

    .premium-footer-certifications {
        justify-content: center;
    }

    .premium-footer-certifications {
        justify-content: center;
        width: 100%;
    }

    .premium-social-icons {
        justify-content: center;
    }

    .icon-list-section .flexbox {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2em;
    }

    .icon-list-section .icon-item {
        max-width: 100%;
    }

    .icon-list-section .frame {
        width: 90%;
    }

    .premium-text-body-only .frame {
        width: 90%;
    }

    .case-studies-grid {
        grid-template-columns: 1fr !important;
        gap: 2.5em;
    }

    .case-studies-section .frame {
        width: 90%;
    }

    .case-studies-section {
        padding: 4em 0;
    }

    .case-studies-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 1em;
    }

    .case-studies-header h2 {
        margin-bottom: 0;
    }

    .case-studies-view-all {
        display: none;
    }

    .case-studies-section h2 {
        margin-bottom: 0;
    }

    .case-study-card .case-study-content,
    .case-study-item .case-study-content {
        padding: 2em;
    }

    .case-study-card .case-study-image,
    .case-study-item .case-study-image {
        height: 200px;
    }

    .featured-products .product-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }

    .featured-products .product-item {
        max-width: 100%;
    }

    .card-section-minimalist.contact-grid {
        padding: 4em 0 !important;
    }

    .contact-grid .wrapper-wide {
        width: 100% !important;
        max-width: 100% !important;
    }

    .contact-grid-3 {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .contact-grid-3 .column {
        max-width: 100%;
        align-items: center;
        text-align: center;
    }

    .contact-grid-3 .column h3 {
        font-size: var(--font-size-h4);
        text-align: center !important;
    }

    .contact-grid-3 .column p {
        font-size: var(--font-size-cta);
        text-align: center !important;
    }

    /* Products Page Responsive 768px */
    .products-intro-section {
        padding: 0 0 4em 0;
    }

    .products-intro-frame {
        width: 90%;
    }

    .products-intro-header-container {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }

    .products-intro-header-divider {
        width: 100%;
        height: 2px;
    }

    .products-intro-title {
        font-size: 26px;
        text-align: center;
    }

    .products-intro-text {
        text-align: center;
    }

    .products-intro-grid {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .products-intro-card {
        flex-direction: column;
        min-height: auto;
    }

    .products-intro-card-image {
        width: 100%;
        height: 200px;
    }

    .products-intro-card-content {
        width: 100%;
        padding: 1.5em;
    }

    .products-intro-card-title {
        font-size: var(--font-size-article-heading);
    }

    .products-intro-card-description {
        font-size: var(--font-size-cta);
    }

    /* Trusted By Section Responsive 768px */
    .trusted-by-section {
        padding: 3em 0;
    }

    .trusted-by-frame {
        width: 90%;
    }

    .trusted-by-title {
        font-size: var(--font-size-h3);
    }

    .trusted-by-description {
        font-size: var(--font-size-cta);
    }

    /* USP Icons Bar Responsive 768px */
    .usp-icons-bar-section {
        padding: 3em 0;
    }

    .usp-icons-bar-frame {
        width: 90%;
    }

    .usp-icons-bar-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2em;
    }

    .usp-icons-bar-icon-wrapper {
        width: 80px;
        height: 80px;
    }

    .usp-icons-bar-icon-wrapper i {
        font-size: 3em;
    }

    .usp-icons-bar-image {
        max-height: 80px;
    }

    .usp-icons-bar-title {
        font-size: var(--font-size-body);
    }

    .usp-icons-bar-description {
        font-size: var(--font-size-cta);
    }

    .premium-hero-section {
        padding: 4em 0;
    }

    .premium-hero-section .hero-h1 {
        font-size: 36px;
    }

    .premium-hero-section .hero-h2 {
        font-size: 28px;
    }

    .premium-hero-section .hero-features-grid {
        grid-template-columns: 1fr;
        gap: 2.5em;
    }

    .premium-hero-section .hero-feature-card {
        min-height: 240px;
    }

    .premium-hero-section .hero-feature-card-inner {
        min-height: 240px;
    }

    .premium-hero-section .hero-feature-icon {
        width: 100px;
        height: 100px;
    }

    .premium-hero-section .hero-feature-icon i {
        font-size: 2.5em;
    }

    .premium-feature-list-section {
        padding: 4em 0;
    }

    .premium-feature-list-section .frame {
        width: 90%;
    }

    .premium-accreditations-section {
        padding: 4em 0;
    }

    .premium-accreditations-section .frame {
        width: 90%;
    }

    .premium-accreditations-section .accreditations-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.5em;
    }

    .premium-cpd-section {
        padding: 4em 0;
    }

    .premium-cpd-section .frame {
        width: 90%;
    }

    .premium-cpd-section.has-image .cpd-container {
        grid-template-columns: 1fr !important;
        gap: 3em;
    }

    .premium-cpd-section.has-image.image-left .cpd-container,
    .premium-cpd-section.has-image.image-right .cpd-container {
        grid-template-columns: 1fr !important;
    }

    .premium-cpd-section.has-image.image-left .cpd-content-wrapper,
    .premium-cpd-section.has-image.image-right .cpd-content-wrapper {
        order: 1 !important;
    }

    .premium-cpd-section.has-image.image-left .cpd-image-wrapper,
    .premium-cpd-section.has-image.image-right .cpd-image-wrapper {
        order: 2 !important;
    }

    .premium-cpd-section.has-image .cpd-image-wrapper {
        min-height: 300px;
        position: relative;
    }

    .premium-cpd-section.has-image .cpd-image {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        width: 100%;
        height: auto;
        min-height: 300px;
        object-fit: cover;
    }

    .premium-technical-docs-section {
        padding: 4em 0 !important;
    }

    .premium-technical-docs-section .frame {
        width: 90% !important;
        max-width: 100% !important;
        padding: 0 1em !important;
    }
    
    .premium-technical-docs-section .technical-docs-intro {
        width: 100%;
        max-width: 100%;
        padding: 0 1em !important;
        text-align: center !important;
    }
    
    .premium-technical-docs-section .technical-docs-intro p {
        text-align: center !important;
    }

    .premium-technical-docs-section .technical-docs-buttons {
        flex-direction: column;
        gap: 1em;
    }

    .premium-technical-docs-section .filters {
        flex-direction: column;
        padding: 1.5em !important;
        margin: 0 1em !important;
    }

    .premium-technical-docs-section .filters select {
        width: 100%;
    }

    .premium-technical-docs-section .technical-docs-buttons .button {
        width: 100%;
        text-align: center;
    }
    
    .premium-technical-docs-section .downloads-section {
        padding: 0 !important;
        margin: 0 !important;
    }

    .premium-technical-docs-section .downloads-section .filters {
        margin: 0!important;
        margin-bottom: 2em!important;
    }
    
    .premium-technical-docs-section .downloads-table {
        padding: 0 !important;
    }

    .premium-discuss-section {
        padding: 4em 0;
    }

    .premium-discuss-section .frame {
        width: 90%;
    }

    .case-study-title {
        font-size: 2.5em;
    }

    .case-study-hero-left {
        padding: 2em 1.5em;
        align-items: center !important;
    }
    
    .case-study-content-container {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .case-study-title {
        text-align: center !important;
    }
    
    .case-study-overview {
        text-align: center !important;
    }
    
    .case-study-overview h3,
    .case-study-overview-item,
    .case-study-overview-item strong {
        text-align: center !important;
    }

    .case-study-text h2 {
        font-size: 2em;
    }

    .case-study-content-section {
        padding: 0 2em !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden;
    }

    .case-study-text {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        padding-right: 0;
        padding-left: 0;
        text-align: center !important;
    }
    
    .case-study-text h2,
    .case-study-text p,
    .case-study-text ul,
    .case-study-text li,
    .case-study-main-content,
    .case-study-text h3,
    .case-study-text h4,
    .case-study-text h5 {
        text-align: center !important;
    }

    .case-study-gallery {
        flex: 1 1 100%;
        width: 100%;
        max-width: 100%;
        overflow: hidden;
        text-align: center !important;
    }
    
    .case-study-testimonial {
        text-align: center !important;
    }
    
    .case-study-testimonial h3,
    .case-study-testimonial p {
        text-align: center !important;
    }

    .case-study-gallery-grid {
        grid-template-columns: 1fr !important;
        width: 100%;
        max-width: 100%;
        gap: 1.5em;
    }

    .case-study-gallery-item {
        grid-column: span 1 !important;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    .case-study-gallery-item img {
        max-width: 100%;
        height: auto;
    }

    .case-study-hero-right {
        min-height: auto;
    }

    .premium-header .container,
    .premium-footer-container,
    .case-study-new-layout .frame,
    .case-study-hero-left,
    .case-study-text {
        padding-left: 2em;
        padding-right: 2em;
        width: 100% !important;
        max-width: 100% !important;
    }

    .blog-header-section {
        padding: 2em 0;
    }

    .blog-header-section .frame {
        width: 90%;
        padding: 0;
    }

    .blog-header-section .blog-title {
        font-size: 32px;
        margin-bottom: 1.5em;
    }

    .blog-header-section .blog-caption {
        font-size: var(--font-size-body);
    }

    .blog-content-section {
        padding: 2em 0;
    }

    .blog-content-section .frame {
        width: 90%;
        padding: 0;
    }

    .blog-50-50-section {
        padding: 2em 0;
    }

    .blog-text-only-section {
        padding: 2em 0;
    }

    .blog-related-posts-section {
        padding: 2em 0;
    }

    .blog-related-posts-section .frame {
        width: 90%;
        padding: 0;
    }

    .related-posts-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .related-posts-title {
        font-size: 28px;
        margin-bottom: 1.5em;
    }

    .news-premium-header {
        padding: 2em 0;
    }

    .news-premium-header .frame {
        width: 90%;
        padding: 0;
    }

    .news-page-title {
        font-size: 32px;
    }

    .news-page-intro {
        font-size: var(--font-size-body);
    }

    .news-premium-intro {
        padding: 2em 0;
    }

    .news-premium-intro .frame {
        width: 90%;
        padding: 0;
    }

    .news-premium-grid-section {
        padding: 2em 0 4em;
    }

    .news-premium-grid-section .frame {
        width: 90%;
        padding: 0;
    }

    .news-top-three-container {
        flex-direction: column;
        gap: 1.5em;
    }

    .news-featured-article {
        flex: 1 1 100%;
        margin-bottom: 0;
    }

    .news-top-right-column {
        flex: 1 1 100%;
        gap: 1.5em;
    }

    .news-featured-image {
        height: 250px;
    }

    .news-featured-content {
        padding: 1.5em;
    }

    .news-featured-title {
        font-size: var(--font-size-h3);
    }

    .news-grid-articles {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .news-grid-content {
        padding: 1.5em;
    }

    .news-grid-image {
        height: 200px;
    }

    .news-filters-section {
        padding: 1.5em 0;
    }

    .news-filters-container {
        flex-direction: column;
        gap: 1em;
        align-items: stretch;
    }

    .news-filter-left {
        width: 100%;
    }

    .news-filter-right {
        width: 100%;
        max-width: 100%;
    }

    .news-category-dropdown {
        width: 100%;
        min-width: 100%;
    }

    .news-search-input {
        width: 100%;
    }

    .product-hero-section {
        padding: 0;
    }

    .product-hero-section .case-study-hero-left {
        padding: 2em 1.5em;
    }

    .product-hero-ctas {
        flex-direction: column;
        align-items: stretch;
    }

    .product-hero-ctas .btn {
        width: 100%;
    }

    .video-benefits-section {
        padding: 4em 0;
    }

    .video-benefits-section .frame {
        width: 90%;
    }

    .maximum-sizes-section {
        padding: 4em 0;
    }

    .maximum-sizes-section .frame {
        width: 90%;
    }

    .max-sizes-tabs {
        flex-wrap: wrap;
    }

    .max-sizes-tab {
        padding: 0.75em 1em;
        font-size: 14px;
    }

    .max-sizes-table-wrapper {
        overflow-x: scroll;
    }

    .product-gallery-section {
        padding: 4em 0;
    }

    .product-gallery-section .frame {
        width: 90%;
    }

    .technical-documents-section {
        padding: 4em 0;
    }

    .technical-documents-section .frame {
        width: 90%;
    }

    .tech-docs-tabs {
        flex-wrap: wrap;
    }

    .tech-docs-tab {
        padding: 0.75em 1em;
        font-size: 14px;
    }

    .tech-docs-table-wrapper {
        overflow-x: scroll;
    }

    .looking-for-more-section {
        padding: 4em 0;
    }

    .looking-for-more-section .frame {
        width: 90%;
    }

    /* Trade Page Mobile Spacing */
    .split-header-section {
        padding: 4em 0 !important;
    }
    
    .split-header-section .frame {
        width: 90% !important;
        padding: 0 1em !important;
    }
    
    .content-carousel-section {
        padding: 4em 0 !important;
    }
    
    .content-carousel-section .frame {
        width: 90% !important;
        padding: 0 1em !important;
    }
    
    .feature-blocks-section {
        padding: 4em 0 !important;
    }
    
    .feature-blocks-section .frame {
        width: 90% !important;
        padding: 0 1em !important;
    }
    
    .other-products-section {
        padding: 4em 0;
    }

    .other-products-section .frame {
        width: 90%;
    }

    .other-products-slide {
        flex: 0 0 100%;
    }

    .product-faq-section {
        padding: 4em 0;
    }

    .product-faq-section .frame {
        width: 90%;
    }

    .faq-question-text {
        font-size: 18px;
    }

    .panel-carousel-container {
        height: 50vh;
        min-height: 400px;
    }
    
    .panel-carousel-slide {
        height: 50vh;
        min-height: 400px;
    }

    .panel-carousel-overlay {
        flex-direction: column-reverse;
        padding: 3em 0 0;
        gap: 1.5em;
    }

    .panel-carousel-title h1 {
        font-size: 32px;
    }

    .panel-carousel-controls {
        flex-direction: row;
        align-items: center;
    }

    .postcode-search-form {
        display: flex;
        flex-direction: column;
        gap: 1em;
    }

    /* Mission, Vision, Values Responsive */
    .mission-vision-values-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }

    .mission-vision-values-box {
        padding: 2em 1.5em;
    }

    /* Five Images Responsive */
    .five-images-grid {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    .five-images-item:last-child {
        grid-column: span 1;
    }

    /* Strategies Responsive */
    .strategies-grid {
        grid-template-columns: 1fr;
        gap: 2em;
        grid-auto-rows: auto;
    }

    .strategies-item-full,
    .strategies-item-two-thirds,
    .strategies-item-half,
    .strategies-item-third {
        grid-column: span 1;
    }

    .strategies-item {
        border-radius: var(--button-border-radius);
        height: auto;
    }

    .strategies-image-wrapper {
        min-height: auto;
        max-height: none;
        height: auto;
        border-radius: var(--button-border-radius) var(--button-border-radius) 0 0;
        overflow: hidden;
        position: relative;
    }

    .strategies-image {
        height: auto;
        min-height: 200px;
        max-height: 300px;
        object-fit: cover;
        width: 100%;
    }

    .strategies-overlay {
        transform: translateY(0);
        padding: 2em 1.5em 1.5em;
        position: absolute;
        background: linear-gradient(to top, rgba(13, 58, 93, 0.95) 0%, rgba(13, 58, 93, 0.85) 50%, transparent 100%);
        max-height: none;
        overflow: visible;
        height: auto;
        min-height: auto;
        border-radius: 0 0 var(--button-border-radius) var(--button-border-radius);
    }

    /* Contact Page Responsive */
    .contact-premium-header {
        padding: 2em 0;
    }

    .contact-premium-header .frame {
        width: 90%;
        padding: 0;
    }

    .contact-page-title {
        font-size: 32px;
    }

    .contact-page-intro {
        font-size: var(--font-size-body);
    }

    /* New Contact Page Header Responsive */
    .contact-header-blue {
        padding: 3em 0;
    }

    .contact-header-blue .frame {
        width: 90%;
        padding: 0 2em;
    }

    .contact-header-blue-container {
        flex-direction: column;
        gap: 2em;
    }

    .contact-header-blue-title {
        font-size: 42px;
    }

    .contact-header-blue-description {
        font-size: 20px;
    }

    /* Split Header Responsive */
    .split-header-blue {
        padding: 3em 0;
    }

    .split-header-blue .frame {
        width: 90%;
        padding: 0 2em;
    }

    .split-header-container {
        flex-direction: column;
        gap: 2em;
    }

    .split-header-left {
        max-width: 100%;
    }

    .split-header-title {
        font-size: 42px;
    }

    .split-header-description {
        font-size: 20px;
        text-align: center;
    }

    /* New Contact Details & Form Section Responsive */
    .contact-details-form-section {
        padding: 4em 0;
    }

    .contact-details-form-section .frame {
        width: 90%;
        padding: 0 2em;
    }

    .contact-details-form-container {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .contact-details-column {
        order: 1;
    }

    .contact-form-column {
        order: 2;
    }

    .contact-details-card,
    .contact-form-card {
        padding: 2em;
    }

    .contact-form-inline .contact-form-row-split {
        grid-template-columns: 1fr;
        gap: 1em;
    }

    /* Contact Map Section Responsive */
    .contact-map-section {
        padding: 4em 0;
    }

    .contact-map-section .frame {
        width: 90%;
        padding: 0 2em;
    }

    .contact-map-container {
        padding: 1.5em;
    }

    #contact-google-map {
        height: 300px;
    }

    .contact-faqs-section {
        padding: 2em 0;
    }

    .contact-faqs-section .frame {
        width: 90%;
        padding: 0;
    }

    .contact-faq-title {
        font-size: var(--font-size-body);
    }

    .contact-faq-header {
        padding: 1em 0;
    }

    .contact-details-map-section {
        padding: 4em 0;
    }

    .contact-details-map-section .frame {
        width: 90%;
        padding: 0;
    }

    .contact-details-map-container {
        grid-template-columns: 1fr;
        gap: 3em;
    }

    .contact-details-left {
        order: 1;
    }

    .contact-map-right {
        order: 2;
    }

    #contact-google-map {
        height: 300px;
    }

    .contact-map-placeholder {
        height: 300px;
    }

    /* Contact Modal Responsive */
    .contact-modal-content {
        width: 95%;
        margin: 1vh auto;
        max-height: 98vh;
    }

    .contact-modal-header {
        padding: 2em 2em 1.5em;
    }

    .contact-modal-title {
        font-size: var(--font-size-h3);
    }

    .contact-modal-body {
        padding: 2em 1.5em;
    }

    .contact-modal-close {
        top: 1em;
        right: 1em;
        width: 40px;
        height: 40px;
    }

    .contact-modal .contact-form-row,
    .contact-modal .bspoke_form .contact-form-row {
        grid-template-columns: 1fr !important;
        gap: 1.5em !important;
        margin-bottom: 1.5em !important;
    }

    .contact-modal .contact-form-row.contact-form-submit,
    .contact-modal .bspoke_form .contact-form-row.contact-form-submit {
        justify-items: stretch !important;
        margin-top: 2em !important;
        padding-top: 1.5em !important;
    }

    .contact-modal .contact-form-submit .button,
    .contact-modal .bspoke_form .button {
        width: 100% !important;
        min-width: auto !important;
    }

    .contact-button-wrapper {
        margin-top: 1em;
    }

    .contact-button-wrapper .button,
    .contact-button-wrapper .contact-modal-trigger {
        width: 100% !important;
    }

    .contact-modal .gdpr-label,
    .contact-modal .gc_wrap label {
        padding: 1em !important;
        gap: 0.75em !important;
    }

    .panel-carousel-nav-arrows {
        order: 1;
    }

    .panel-carousel-dots {
        order: 2;
    }

    .panel-carousel-buttons {
        order: 3;
        width: 100%;
    }

    .panel-carousel-buttons .buttonc-container {
        flex-direction: column;
        width: 100%;
    }

    .panel-carousel-buttons .button {
        width: 100%;
        justify-content: center;
    }

    .panel-carousel-description {
        order: 4;
        text-align: right;
        width: 100%;
        font-size: 1.4rem;
    }
    .hero-banner-background {
        min-height: 500px;
    }
    
    .hero-banner-container {
        min-height: 500px;
    }
    
    .hero-banner-overlay {
        width: 100%;
        background-color: rgba(13, 58, 93, 0.9);
        height: 80%;
    }
    
    .hero-banner-heading {
        font-size: 36px;
    }
    
    .hero-banner-case-study {
        margin-top: -40px;
    }
    
    .hero-banner-case-study-container {
        padding: 15px 20px;
        font-size: 12px;
    }
    
    .hero-banner-intro {
        margin-top: -100px;
    }
    
    .hero-banner-intro-container {
        flex-direction: column;
        gap: 30px;
        padding: 40px 20px;
    }
    
    .hero-banner-intro-divider {
        width: 100%;
        height: 2px;
    }
    
    .hero-banner-intro-left .hero-banner-intro-text {
        font-size: 26px;
        text-align: center !important;
    }
    
    .hero-banner-intro-text {
        text-align: center !important;
    }
    
    .hero-banner-intro-right .hero-banner-intro-text {
        text-align: center !important;
    }
    .case-study-image-carousel-section {
        padding: 60px 0;
    }
    
    .case-study-image-carousel-container {
        padding: 0 20px;
    }
    
    .case-study-image-carousel-wrapper {
        gap: 30px;
    }
    
    .case-study-image-carousel-nav-controls {
        bottom: 15px;
        right: 15px;
    }
    
    .case-study-image-carousel-nav-arrow {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    
    .case-study-image-carousel-title {
        font-size: 24px;
        margin-bottom: 20px;
    }
    
    .case-study-image-carousel-paragraph {
        margin-bottom: 20px;
    }
    .case-study-carousel-section {
        padding: 60px 0;
    }
    
    .case-study-carousel-container {
        padding: 0 20px;
    }
    
    .case-study-carousel-wrapper {
        gap: 30px;
    }
    
    .case-study-carousel-image-container {
        min-height: 400px;
        height: 400px;
    }
    
    .case-study-carousel-image-track {
        min-height: 400px;
        height: 400px;
    }
    
    .case-study-carousel-image-slide.active {
        height: 100%;
    }
    
    .case-study-carousel-nav-controls {
        bottom: 15px;
        right: 15px;
    }
    
    .case-study-carousel-nav-arrow {
        width: 45px;
        height: 45px;
        font-size: 16px;
    }
    
    .case-study-carousel-content {
        text-align: center;
    }
    
    .case-study-carousel-title {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center !important;
    }
    
    .case-study-carousel-paragraph {
        margin-bottom: 20px;
        text-align: center !important;
    }
    
    .case-study-carousel-button {
        text-align: center !important;
        display: flex;
        justify-content: center;
    }
    .feature-grid-section {
        padding: 60px 0;
    }
    
    .feature-grid-container {
        padding: 0 20px;
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
    
    .feature-grid-title {
        font-size: 24px;
    }
    .two-column-inverted-section {
        padding: 60px 0;
    }
    
    .two-column-inverted-container {
        padding: 0 20px;
    }
    
    .two-column-inverted-wrapper {
        gap: 30px;
    }
    
    .two-column-inverted-content {
        text-align: center;
    }
    
    .two-column-inverted-title {
        font-size: 24px;
        margin-bottom: 20px;
        text-align: center !important;
    }
    
    .two-column-inverted-text {
        text-align: center !important;
    }
    
    .two-column-inverted-text p {
        margin-bottom: 15px;
        text-align: center !important;
    }
    
    .two-column-inverted-cta {
        margin-top: 20px;
        text-align: center !important;
    }
    .strapline-text-section {
        padding: 40px 0;
    }
    
    .strapline-text-container {
        padding: 0 20px;
        gap: 20px;
    }
    
    .strapline-text-line {
        width: 40px;
    }
    
    .strapline-text-content {
        font-size: 28px;
    }
    .image-cards-section {
        padding: 40px 0 60px 0;
    }
    
    .image-cards-container {
        padding: 0 20px;
    }
    
    .image-cards-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
    
    .image-cards-grid .image-card-item:last-child {
        grid-column: span 1;
    }
    
    .image-card-image {
        height: 300px;
    }
    
    .image-card-title {
        font-size: 24px;
        padding: 20px;
    }
    
    .image-card-item:hover {
        transform: translateY(-5px);
    }
}

/* 480px Breakpoint */
@media (max-width: 480px) {
    .featured-products .product-grid {
        grid-template-columns: 1fr;
    }

    .panel-carousel-container {
        height: 40vh;
        min-height: 300px;
    }
    
    .panel-carousel-slide {
        height: 40vh;
        min-height: 300px;
    }

    .panel-carousel-buttons .button {
        font-size: 1.4rem;
        padding: 0.7em 1.2em;
    }

    .panel-carousel-description {
        font-size: 1.2rem;
    }

    /* Mission, Vision, Values Responsive */
    .mission-vision-values-grid {
        grid-template-columns: 1fr;
        gap: 2em;
    }

    .mission-vision-values-box {
        padding: 2em 2em;
    }

    /* Five Images Responsive */
    .five-images-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1em;
    }

    .five-images-item:last-child {
        grid-column: span 2;
    }

    /* Strategies Responsive */
    .strategies-grid {
        grid-template-columns: repeat(6, 1fr);
        gap: 1em;
    }

    .strategies-item-full {
        grid-column: span 6;
    }

    .strategies-item-two-thirds {
        grid-column: span 4;
    }

    .strategies-item-half {
        grid-column: span 3;
    }

    .strategies-item-third {
        grid-column: span 2;
    }

    .strategies-overlay {
        transform: translateY(0);
        padding: 1.5em 1.5em 1.5em;
    }

    .strategies-overlay-title {
        font-size: var(--font-size-article-heading);
    }

    .strategies-overlay-description {
        font-size: var(--font-size-feature-description);
    }

    /* Products Page Responsive 480px */
    .products-intro-card-content {
        padding: 1.25em;
    }

    .products-intro-card-title {
        font-size: var(--font-size-body);
    }

    .usp-icons-bar-grid {
        grid-template-columns: 1fr;
        gap: 1.5em;
    }
}

/* ============================================
   CONTENT CAROUSEL SECTION
   Image carousel with text content side-by-side
   ============================================ */

.content-carousel-section {
    padding: 4em 0;
    background: var(--color-accent);
}

.content-carousel-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.content-carousel-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4em;
    align-items: center;
}

.content-carousel-container.image-right {
    direction: rtl;
}

.content-carousel-container.image-right > * {
    direction: ltr;
}

.content-carousel-images {
    position: relative;
}

.content-carousel-slider {
    position: relative;
    overflow: hidden;
    border-radius: 0;
}

.content-carousel-slide {
    display: none;
}

.content-carousel-slide.active {
    display: block;
}

.content-carousel-img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.content-carousel-nav {
    position: absolute;
    bottom: 1em;
    left: 1em;
    display: flex;
    gap: 0.5em;
}

.content-carousel-prev,
.content-carousel-next {
    width: 36px;
    height: 36px;
    background: var(--color-accent);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
    color: var(--color-primary);
}

.content-carousel-prev:hover,
.content-carousel-next:hover {
    background: var(--color-primary);
    color: var(--color-accent);
}

.content-carousel-text {
    padding: 1em 0;
}

.content-carousel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: .5em;
    margin-top: 0;
}

.content-carousel-content {
    font-family: var(--font-primary);
    font-size: var(--font-size-body);
    color: var(--color-primary);
    line-height: 1.7;
}

.content-carousel-content p {
    margin-bottom: 1em;
}

.content-carousel-content p:last-child {
    margin-bottom: 0;
}

.content-carousel-buttons {
    display: flex;
    gap: 1em;
    margin-top: 1.5em;
    flex-wrap: wrap;
}

.content-carousel-buttons .button {
    padding: 0.75em 1.5em;
    font-family: var(--font-primary);
    font-size: var(--font-size-cta);
    font-weight: var(--font-weight-semibold);
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
}

/* Content Carousel Responsive */
@media (max-width: 900px) {
    .content-carousel-container {
        grid-template-columns: 1fr;
        gap: 2em;
    }
    
    .content-carousel-container.image-right {
        direction: ltr;
    }
}

/* ============================================
   FEATURE CARDS SECTION
   Side-by-side cards with background images
   ============================================ */

.feature-cards-section {
    padding: 4em 0;
    background: var(--color-accent);
}

.feature-cards-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.feature-cards-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
}

.feature-card-item {
    position: relative;
    min-height: 320px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    padding: 5em;
    text-decoration: none;
    overflow: hidden;
}

/* Card with image - has overlay */
.feature-card-item.has-image .feature-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(13, 58, 93, 0.55);
    z-index: 1;
}

/* Card without image - solid color */
.feature-card-item:not(.has-image) {
    background-color: #4a5d6a;
}

.feature-card-item:not(.has-image) .feature-card-overlay {
    display: none;
}

.feature-card-content {
    position: relative;
    z-index: 2;
    color: #ffffff;
}

.feature-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1em;
}

.feature-card-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h3);
    color: #ffffff;
    margin: 0;
    text-transform: capitalize;
}

.feature-card-icon {
    flex-shrink: 0;
    margin-left: 1em;
}

.feature-card-icon svg {
    width: 50px;
    height: 50px;
    color: #ffffff;
}

.feature-card-description {
    font-family: var(--font-primary);
    font-size: var(--font-size-feature-description);
    color: #ffffff;
    line-height: 1.6;
    max-width: 90%;
}

.feature-card-description p {
    margin: 0;
    color: #ffffff !important;
}

.feature-card-item p {
    color: #ffffff !important;
}

a.feature-card-item:hover .feature-card-overlay {
    background: rgba(13, 58, 93, 0.65);
}

/* Feature Cards Responsive */
@media (max-width: 768px) {
    .feature-cards-section {
        padding: 4em 0;
    }
    
    .feature-cards-section .frame {
        width: 90%;
    }
    
    .feature-cards-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card-item {
        min-height: 280px;
        padding: 1.5em;
        text-align: center;
    }
    
    .feature-card-header {
        justify-content: center !important;
        text-align: center !important;
    }
    
    .feature-card-title {
        text-align: center !important;
        margin: 0 auto !important;
    }
    
    .feature-card-icon {
        display: none;
    }
    
    .feature-card-description {
        text-align: center !important;
        max-width: 100% !important;
    }
    
    .feature-card-description p {
        text-align: center !important;
    }
    
    /* General text centering for template-premium.php components on mobile */
    /* All titles and headings */
    h1, h2, h3, h4, h5, h6,
    .title,
    [class*="-title"],
    .split-header-title,
    .split-header-description,
    .case-study-title,
    .case-study-card .case-study-title,
    .case-study-item .case-study-title,
    .hero-feature-title,
    .benefits-title,
    .gallery-title,
    .gallery-carousel-title,
    .looking-for-more-title,
    .other-products-title,
    .other-product-title,
    .product-title,
    .feature-block-title,
    .image-card-title,
    .rep-title,
    .strategies-title,
    .strategies-overlay-title {
        text-align: center !important;
    }
    
    .hero-section-content,
    .hero-section-content h1,
    .hero-section-content h2,
    .hero-section-content p,
    .hero-feature-card,
    .hero-feature-card h3,
    .hero-feature-card p {
        text-align: center !important;
    }
    
    .accreditations-section h2,
    .accreditations-section p,
    .accreditations-intro {
        text-align: center !important;
    }
    
    .case-studies-section h2,
    .case-studies-section .case-study-card,
    .case-study-card h3,
    .case-study-card p {
        text-align: center !important;
    }
    
    .cpd-section h2,
    .cpd-section p,
    .cpd-section ul {
        text-align: center !important;
    }
    
    .technical-docs-section h2,
    .technical-docs-section .intro-text {
        text-align: center !important;
    }
    
    .discuss-section h3,
    .discuss-section p {
        text-align: center !important;
    }
    
    .content-carousel-title,
    .content-carousel-content,
    .content-carousel-content p {
        text-align: center !important;
    }
    
    .feature-blocks-section h2,
    .feature-block-item,
    .feature-block-title {
        text-align: center !important;
    }
    
    .find-your-rep-section h2,
    .find-your-rep-section .intro-text {
        text-align: center !important;
    }
    
    .other-products-section h2,
    .other-products-section .product-item,
    .other-products-section .product-title,
    .other-products-section .product-features,
    .other-products-section .product-best-for {
        text-align: center !important;
    }
    
    .text-only-section h2,
    .text-only-section .text-only-content,
    .text-only-section .text-only-content p {
        text-align: center !important;
    }
    
    .gallery-carousel-section h2,
    .gallery-carousel-title {
        text-align: center !important;
    }
    
    .image-cards-section h2,
    .image-card-item,
    .image-card-title {
        text-align: center !important;
    }
    
    .benefits-title,
    .benefits-content,
    .benefits-content p {
        text-align: center !important;
    }
    
    .product-features-section h2 {
        text-align: center !important;
    }
    
    .looking-for-more-section h2,
    .looking-for-more-section p {
        text-align: center !important;
    }
    
    .product-faq-section h2,
    .faq-item,
    .faq-question,
    .faq-answer {
        text-align: center !important;
    }
}

/* ============================================
   GALLERY CAROUSEL SECTION
   Multi-image gallery with VIEW buttons
   ============================================ */

.gallery-carousel-section {
    padding: 4em 0;
    background: var(--color-accent);
}

.gallery-carousel-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.gallery-carousel-title {
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-h2);
    color: var(--color-primary);
    margin-bottom: .5em;
    margin-top: 0;
}

.gallery-carousel-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.gallery-carousel-arrow {
    position: absolute;
    z-index: 10;
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    border: 1px solid #ddd;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.gallery-carousel-arrow:hover {
    background: var(--color-primary);
    color: var(--color-accent);
    border-color: var(--color-primary);
}

.gallery-carousel-prev {
    left: -20px;
}

.gallery-carousel-next {
    right: -20px;
}

.gallery-carousel-track-container {
    flex: 1;
    overflow: hidden;
}

.gallery-carousel-track {
    display: flex;
    gap: 10px;
    transition: transform 0.4s ease;
}

.gallery-carousel-item {
    flex: 0 0 calc(25% - 7.5px);
    min-width: calc(25% - 7.5px);
}

.gallery-carousel-image-wrapper {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3/5;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.gallery-carousel-image-wrapper:hover {
    transform: scale(1.02);
}

.gallery-carousel-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.gallery-carousel-view-btn {
    position: absolute;
    bottom: 1em;
    left: 1em;
    background: var(--color-accent);
    color: var(--color-primary);
    padding: 0.4em 1em;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}

/* Gallery Carousel Responsive */
@media (max-width: 1024px) {
    .gallery-carousel-item {
        flex: 0 0 calc(33.333% - 6.67px);
        min-width: calc(33.333% - 6.67px);
    }
    
    .gallery-carousel-prev {
        left: 10px;
    }
    
    .gallery-carousel-next {
        right: 10px;
    }
}

@media (max-width: 768px) {
    .gallery-carousel-section {
        padding: 4em 0;
    }
    
    .gallery-carousel-section .frame {
        width: 90%;
    }
    
    .gallery-carousel-item {
        flex: 0 0 calc(50% - 5px);
        min-width: calc(50% - 5px);
    }
    
    .gallery-carousel-arrow {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 480px) {
    .gallery-carousel-item {
        flex: 0 0 100%;
        min-width: 100%;
    }
    
    .gallery-carousel-arrow {
        display: none;
    }
}

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

.gallery-lightbox {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.active {
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

.gallery-lightbox-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    cursor: pointer;
}

.gallery-lightbox-content {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gallery-lightbox-image {
    max-width: 100%;
    max-height: 90vh;
    object-fit: contain;
    display: block;
}

.gallery-lightbox-close {
    position: absolute;
    top: -40px;
    right: 0;
    background: transparent;
    border: none;
    color: var(--color-accent);
    font-size: 40px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color 0.3s ease;
    z-index: 2;
}

.gallery-lightbox-close:hover {
    color: #fff;
}

.gallery-lightbox-prev,
.gallery-lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: var(--color-accent);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 2;
}

.gallery-lightbox-prev {
    left: -70px;
}

.gallery-lightbox-next {
    right: -70px;
}

.gallery-lightbox-prev:hover,
.gallery-lightbox-next:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: var(--color-accent);
}

.gallery-lightbox-counter {
    position: absolute;
    bottom: -40px;
    left: 50%;
    transform: translateX(-50%);
    color: var(--color-accent);
    font-family: var(--font-primary);
    font-size: 14px;
}

@media (max-width: 768px) {
    .gallery-lightbox-prev {
        left: 10px;
    }
    
    .gallery-lightbox-next {
        right: 10px;
    }
    
    .gallery-lightbox-close {
        top: 10px;
        right: 10px;
    }
    
    .gallery-lightbox-counter {
        bottom: 10px;
    }
}

/* ============================================
   FEATURE BLOCKS SECTION
   Numbered feature blocks with images
   ============================================ */

.feature-blocks-section {
    padding: 4em 0;
    background: var(--color-accent);
}

.feature-blocks-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.feature-blocks-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5em;
}

.feature-block-item {
    position: relative;
    background: var(--color-accent);
    overflow: hidden;
}

.feature-block-image {
    position: relative;
    width: 100%;
    aspect-ratio: 1/1;
    overflow: hidden;
}

.feature-block-image::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.5) 100%);
    z-index: 1;
    pointer-events: none;
}

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

.feature-block-number {
    position: absolute;
    top: 1em;
    left: 1em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: 2.5em;
    color: #ffffff;
    z-index: 2;
}

.feature-block-title {
    position: absolute;
    bottom: 1em;
    left: 1em;
    right: 1em;
    font-family: var(--font-heading);
    font-weight: 700;
    font-size: var(--font-size-article-heading);
    color: #ffffff;
    margin: 0;
    text-transform: uppercase;
    z-index: 2;
}

/* Feature Blocks Responsive */
@media (max-width: 1024px) {
    .feature-blocks-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .feature-blocks-grid {
        grid-template-columns: 1fr;
    }
    
    .content-carousel-buttons {
        flex-direction: column;
    }
    
    .content-carousel-buttons .button {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   TRADE INVITATION FORM SECTION
   Invitation-style form with image
   ============================================ */

.trade-invitation-form-section {
    padding: 60px 0 80px;
    background-color: var(--color-accent);
}

.trade-invitation-form-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.trade-invitation-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
}

.trade-invitation-left {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.trade-invitation-image {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.1);
}

.trade-invitation-image img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

.trade-invitation-details {
    background: white;
    padding: 40px;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.trade-invitation-details h2 {
    font-family: var(--font-heading);
    font-size: 42px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 15px;
    margin-top: 0;
    line-height: 1.2;
}

.trade-event-date-large {
    display: flex;
    align-items: center;
    gap: 15px;
    background: var(--color-primary);
    padding: 20px 30px;
    border-radius: 8px;
    margin-bottom: 30px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid var(--color-primary);
}

.trade-event-date svg {
    flex-shrink: 0;
}

.trade-event-date-large svg {
    flex-shrink: 0;
}

.trade-event-date-large svg rect,
.trade-event-date-large svg path {
    stroke: white;
}

.trade-event-date-large span {
    font-family: var(--font-heading);
    font-size: 24px;
    font-weight: 700;
    color: white;
}

.trade-deadline-passed-notice {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff5f5;
    padding: 12px 20px;
    border-radius: 8px;
    margin-bottom: 25px;
    border-left: 4px solid #e74c3c;
}

.trade-deadline-passed-notice svg {
    flex-shrink: 0;
}

.trade-deadline-passed-notice span {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: #c0392b;
}

.trade-invitation-text p {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-secondary);
    margin-bottom: 30px;
}

.trade-invitation-highlights {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top:20px;
}

.trade-highlight-item {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-primary);
    font-size: 16px;
    font-weight: 500;
    color: var(--color-secondary);
}

.trade-highlight-item svg {
    flex-shrink: 0;
}

/* RSVP Card */
.trade-invitation-right {
    position: sticky;
    top: 20px;
    align-self: flex-start;
}

.trade-rsvp-card {
    background: white;
    padding: 50px 45px;
    border-radius: 12px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.12);
    border-top: 5px solid var(--color-primary);
}

.trade-rsvp-header {
    text-align: center;
    margin-bottom: 35px;
    padding-bottom: 30px;
    border-bottom: 2px solid #f0f0f0;
}

.trade-rsvp-header h3 {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 10px;
    margin-top: 0;
}

.trade-rsvp-header p {
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-secondary);
    opacity: 0.8;
    margin: 0;
}

/* Form Styles */
.trade-rsvp-form .trade-form-group {
    margin-bottom: 25px;
}

.trade-rsvp-form label {
    display: block;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 8px;
}

.trade-rsvp-form label.events-checkbox-option {
    display: flex;
    margin-bottom: 0;
}

.trade-rsvp-form .trade-required {
    color: #e74c3c;
}

.trade-rsvp-form input[type="text"],
.trade-rsvp-form input[type="email"],
.trade-rsvp-form input[type="tel"],
.trade-rsvp-form select,
.trade-rsvp-form textarea {
    width: 100%;
    padding: 14px 16px;
    font-family: var(--font-primary);
    font-size: 16px;
    color: var(--color-secondary);
    background: #f8f9fa;
    border: 2px solid #e0e4e8;
    border-radius: 8px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.trade-rsvp-form input[type="text"]:focus,
.trade-rsvp-form input[type="email"]:focus,
.trade-rsvp-form input[type="tel"]:focus,
.trade-rsvp-form select:focus,
.trade-rsvp-form textarea:focus {
    outline: none;
    background: white;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(13, 58, 93, 0.1);
}

.trade-rsvp-form textarea {
    resize: vertical;
    min-height: 80px;
}

.trade-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.trade-form-submit {
    margin-top: 35px;
    text-align: center;
}

.trade-btn-large {
    padding: 16px 40px !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    width: 100%;
}

.trade-form-note {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
    color: #7f8c9a;
    font-size: 13px;
}

/* Success Message */
.trade-invitation-success-section {
    padding: 80px 0;
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--color-accent);
}

.trade-invitation-success-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.trade-success-card {
    background: white;
    padding: 60px;
    border-radius: 16px;
    box-shadow: 0 10px 50px rgba(0, 0, 0, 0.1);
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

.trade-success-icon {
    margin: 0 auto 30px;
    width: 60px;
    height: 60px;
}

.trade-success-card h2 {
    font-family: var(--font-heading);
    font-size: 36px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 20px;
    margin-top: 0;
}

.trade-success-card p {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-secondary);
    margin-bottom: 15px;
}

.trade-success-card .button {
    margin-top: 30px;
    padding: 14px 35px !important;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .trade-invitation-container {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .trade-invitation-right {
        position: static;
    }
}

@media (max-width: 768px) {
    .trade-invitation-form-section {
        padding: 40px 0 60px;
    }
    
    .trade-invitation-form-section .frame {
        width: 90%;
        padding: 0;
    }
    
    .trade-invitation-details {
        padding: 30px;
    }
    
    .trade-invitation-details h2 {
        font-size: 32px;
    }
    
    .trade-invitation-text p {
        font-size: 16px;
    }
    
    .trade-rsvp-card {
        padding: 35px 25px;
    }
    
    .trade-rsvp-header h3 {
        font-size: 26px;
    }
    
    .trade-form-row {
        grid-template-columns: 1fr;
        gap: 25px;
    }
    
    .trade-success-card {
        padding: 40px 30px;
    }
    
    .trade-success-card h2 {
        font-size: 28px;
    }
    
    .trade-success-card p {
        font-size: 16px;
    }
    
    .trade-invitation-success-section .frame {
        width: 90%;
        padding: 0;
    }
}

@media (max-width: 480px) {
    .trade-invitation-details h2 {
        font-size: 28px;
    }
    
    .trade-rsvp-card {
        padding: 30px 20px;
    }
    
    .trade-rsvp-header {
        margin-bottom: 25px;
        padding-bottom: 20px;
    }
    
    .trade-rsvp-header h3 {
        font-size: 24px;
    }
    
    .trade-rsvp-header p {
        font-size: 14px;
    }
}

/* ============================================
   BIFOLD DARK SECTION
   Navy blue background with white text.
   Applied to: Why Choose carousel + FAQ on bifold pages.
   ============================================ */

/* Base dark background */
.bifold-dark-section {
    background-color: var(--color-primary) !important;
}

/* ── Content carousel in dark mode ── */
.content-carousel-section.bifold-dark-section .content-carousel-title {
    color: #ffffff;
}

.content-carousel-section.bifold-dark-section .content-carousel-content,
.content-carousel-section.bifold-dark-section .content-carousel-content p,
.content-carousel-section.bifold-dark-section .typography-body {
    color: rgba(255, 255, 255, 0.85);
}

.content-carousel-section.bifold-dark-section .feature-list {
    list-style: none;
    padding: 0;
}

.content-carousel-section.bifold-dark-section .feature-list li {
    color: rgba(255, 255, 255, 0.85);
    font-weight: var(--font-weight-light);
}

.content-carousel-section.bifold-dark-section .feature-list li::before {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* CTA button inverts to white on dark */
.content-carousel-section.bifold-dark-section .button.btn-primary,
.content-carousel-section.bifold-dark-section .button {
    background-color: #ffffff !important;
    color: var(--color-primary) !important;
    border-color: #ffffff !important;
}

.content-carousel-section.bifold-dark-section .button.btn-primary:hover,
.content-carousel-section.bifold-dark-section .button:hover {
    background-color: rgba(255, 255, 255, 0.88) !important;
}

/* ── Product features tabs in dark mode ── */

/* Override the light grey tab section background */
.bifold-product-features.bifold-dark-section.product-features-section {
    background: var(--color-primary);
}

/* Tab bar border */
.bifold-dark-section .product-features-tabs {
    border-bottom-color: rgba(255, 255, 255, 0.2);
}

/* Inactive tabs */
.bifold-dark-section .product-features-tab {
    background: rgba(255, 255, 255, 0.07);
    color: rgba(255, 255, 255, 0.7);
}

.bifold-dark-section .product-features-tab:hover {
    background: rgba(255, 255, 255, 0.13);
    color: #ffffff;
}

/* Active tab: white pill with navy text */
.bifold-dark-section .product-features-tab.active {
    background: #ffffff;
    color: var(--color-primary);
}

.bifold-dark-section .product-features-tab.active::after {
    background: #ffffff;
}

/* Feature card grid: dark borders
   Use combined selector for higher specificity than .bifold-product-features alone */
.bifold-product-features.bifold-dark-section .features-grid {
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.bifold-product-features.bifold-dark-section .feature-card {
    background: rgba(255, 255, 255, 0.06) !important;
    border-right-color: rgba(255, 255, 255, 0.1) !important;
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Top accent bar: white on dark */
.bifold-product-features.bifold-dark-section .feature-card::before {
    background: rgba(255, 255, 255, 0.35) !important;
}

/* Icon circle: lighter tint */
.bifold-product-features.bifold-dark-section .feature-icon {
    background: rgba(255, 255, 255, 0.1) !important;
}

/* Invert SVG icons to white */
.bifold-product-features.bifold-dark-section .feature-icon svg {
    filter: brightness(0) invert(1);
}

/* Card text — must beat .bifold-product-features .feature-card h3/p/li rules */
.bifold-product-features.bifold-dark-section .feature-card h3 {
    color: #ffffff !important;
}

.bifold-product-features.bifold-dark-section .feature-card p {
    color: rgba(255, 255, 255, 0.82) !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

.bifold-product-features.bifold-dark-section .feature-card ul {
    border-top-color: rgba(255, 255, 255, 0.15) !important;
    list-style: none !important;
    padding-left: 0 !important;
}

.bifold-product-features.bifold-dark-section .feature-card li {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: 14px !important;
}

.bifold-product-features.bifold-dark-section .feature-card li::before {
    color: rgba(255, 255, 255, 0.45) !important;
}

/* Tab content headings & body (Sizes, Glazing, Colours tabs only - NOT feature cards)
   Use doubled-up class for higher specificity to beat .bifold-product-features rules */
.bifold-product-features.bifold-dark-section .product-features-tab-content > h2,
.bifold-product-features.bifold-dark-section .product-features-tab-content > div > h2 {
    color: #ffffff !important;
    margin-top: 0;
}

.bifold-product-features.bifold-dark-section .product-features-tab-content > h3,
.bifold-product-features.bifold-dark-section .product-features-tab-content > div > h3 {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bifold-product-features.bifold-dark-section .product-features-tab-content > p,
.bifold-product-features.bifold-dark-section .product-features-tab-content > div > p:not(.bifold-product-features .feature-card p) {
    color: rgba(255, 255, 255, 0.8) !important;
}

/* List items outside feature cards (sizes/glazing option lists) */
.bifold-product-features.bifold-dark-section .product-features-tab-content > ul li,
.bifold-product-features.bifold-dark-section .product-features-tab-content > div > ul:not(.bifold-colour-swatches) li {
    color: rgba(255, 255, 255, 0.8) !important;
    list-style: disc;
}

/* Reduce gap between tab bar and content */
.bifold-product-features.bifold-dark-section .product-features-tabs {
    margin-bottom: 24px;
}

/* Tables: keep white as contrast elements on dark navy */
.bifold-dark-section .max-sizes-table {
    background: #ffffff;
}

.bifold-dark-section .max-sizes-table td {
    background: #ffffff;
    color: var(--color-secondary);
}

.bifold-dark-section .max-sizes-table tr:nth-child(even) td {
    background: #f4f8fc;
}

/* Colour swatch names */
.bifold-product-features.bifold-dark-section .bifold-swatch-name {
    color: rgba(255, 255, 255, 0.9) !important;
}

.bifold-product-features.bifold-dark-section .bifold-swatch-name small {
    color: rgba(255, 255, 255, 0.55) !important;
}

/* Finish type cards */
.bifold-product-features.bifold-dark-section .bifold-finish-types {
    background: rgba(255, 255, 255, 0.15) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

.bifold-product-features.bifold-dark-section .bifold-finish-type {
    background: rgba(255, 255, 255, 0.06) !important;
}

.bifold-product-features.bifold-dark-section .bifold-finish-type strong {
    color: #ffffff !important;
}

.bifold-product-features.bifold-dark-section .bifold-finish-type p {
    color: rgba(255, 255, 255, 0.78) !important;
    max-width: none !important;
    margin-bottom: 0 !important;
}

/* ── FAQ heading ── */
.product-faq-heading {
    font-family: var(--font-heading);
    font-size: var(--font-size-h2);
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 1em;
}

.product-faq-section.bifold-dark-section .product-faq-heading {
    color: #ffffff;
    margin-bottom: .5em;
}

/* ── FAQ in dark mode ── */
.product-faq-section.bifold-dark-section {
    background-color: var(--color-primary);
}

.product-faq-section.bifold-dark-section .product-faq-list {
    border-top-color: rgba(255, 255, 255, 0.25);
}

.product-faq-section.bifold-dark-section .product-faq-item {
    background-color: transparent;
    border-bottom-color: rgba(255, 255, 255, 0.12);
}

.product-faq-section.bifold-dark-section .faq-question-text {
    color: #ffffff;
}

.product-faq-section.bifold-dark-section .faq-chevron {
    color: rgba(255, 255, 255, 0.65);
}

.product-faq-section.bifold-dark-section .product-faq-question:hover .faq-question-text {
    color: rgba(255, 255, 255, 0.75);
}

.product-faq-section.bifold-dark-section .faq-answer-content {
    color: rgba(255, 255, 255, 0.78);
}

/* ============================================
   BIFOLD PRODUCT FEATURES — ENHANCED CARD STYLING
   Scoped to .bifold-product-features to avoid
   affecting secondary glazing product pages.
   ============================================ */

/* 2-column grid for 4 feature cards */
.bifold-product-features .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    margin-top: 0;
    border: 1px solid #dce6ef;
}

/* Cards: white, CSS Grid layout — icon inline with heading */
.bifold-product-features .feature-card {
    background: #ffffff;
    border-radius: 0;
    padding: 2.2em 2.4em 2em;
    border: none;
    border-right: 1px solid #dce6ef;
    border-bottom: 1px solid #dce6ef;
    position: relative;
    /* Grid: icon col | heading/text col */
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto auto;
    column-gap: 0.9em;
    row-gap: 0;
    align-items: start;
}

.bifold-product-features .feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: var(--color-primary);
}

/* Icon: col 1, row 1, circular container */
.bifold-product-features .feature-icon {
    float: none;
    grid-column: 1;
    grid-row: 1;
    width: 46px;
    height: 46px;
    min-width: 46px;
    background: rgba(13, 58, 93, 0.08);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0;
    align-self: center;
}

.bifold-product-features .feature-icon svg {
    width: 22px;
    height: 22px;
    display: block;
}

/* Heading: col 2, row 1 — sits inline with icon */
.bifold-product-features .feature-card h3 {
    grid-column: 2;
    grid-row: 1;
    float: none;
    overflow: visible;
    min-height: 0;
    padding: 0;
    margin: 0;
    font-family: var(--font-heading);
    font-size: 17px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    line-height: 1.3;
    display: flex;
    align-items: center;
    align-self: center;
}

/* Description: spans both columns */
.bifold-product-features .feature-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-secondary);
    margin: 0.85em 0 0;
    flex-grow: unset;
    max-width: none;
}

/* Spec list: spans both columns, arrow-prefixed */
.bifold-product-features .feature-card ul {
    grid-column: 1 / -1;
    grid-row: 3;
    list-style: none;
    padding: 0;
    margin: 0.9em 0 0;
    border-top: 1px solid rgba(13, 58, 93, 0.1);
    padding-top: 0.85em;
}

.bifold-product-features .feature-card li {
    padding-left: 1.4em;
    position: relative;
    font-size: 14px;
    color: var(--color-secondary);
    line-height: 1.55;
    margin-bottom: 0.35em;
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.01em;
}

.bifold-product-features .feature-card li::before {
    content: '→';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-size: 12px;
    top: 1px;
    font-weight: var(--font-weight-book);
}

/* Tab section: light background, padding enhancement */
.bifold-product-features.product-features-section {
    background: #f6f9fc;
    padding: 5em 0;
}

/* Headings inside tab content */
.bifold-product-features .product-features-tab-content h2 {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: var(--font-weight-extra-bold);
    color: var(--color-primary);
    margin-bottom: 0.4em;
    margin-top: 0;
}

.bifold-product-features .product-features-tab-content h3 {
    font-family: var(--font-heading);
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-top: 0;
    margin-bottom: 0.5em;
}

/* All p inside tab content (Sizes, Glazing, Colours, not inside feature cards) */
.bifold-product-features .product-features-tab-content p {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-secondary);
    margin-bottom: 1.4em;
    max-width: 840px;
}

/* Override for feature-card p — grid placement, no max-width */
.bifold-product-features .feature-card p {
    max-width: none !important;
    margin-bottom: 0 !important;
}

/* Lists in tab content outside feature cards (sizes, glazing option lists etc) */
.bifold-product-features .product-features-tab-content ul {
    list-style: disc;
    padding-left: 1.5em;
    margin: 0 0 1.4em;
}

.bifold-product-features .product-features-tab-content li {
    font-family: var(--font-primary);
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-secondary);
    margin-bottom: 0.4em;
}

/* Override: feature-card li gets its own tighter styling */
.bifold-product-features .feature-card li {
    font-size: 14px !important;
    margin-bottom: 0.35em !important;
    list-style: none !important;
}

.bifold-product-features .feature-card ul {
    list-style: none !important;
    padding-left: 0 !important;
}

/* Italic / small reference text */
.bifold-product-features .product-features-tab-content em,
.bifold-product-features .product-features-tab-content p em {
    font-size: 14px;
    color: #6b7f8a;
    font-style: italic;
}

/* Sizes / glazing tables: white background */
.bifold-product-features .max-sizes-table {
    width: 100%;
    margin-bottom: 1em;
    background: #ffffff;
}

.bifold-product-features .max-sizes-table td {
    background: #ffffff;
}

.bifold-product-features .max-sizes-table tr:nth-child(even) td {
    background: #f4f8fc;
}

/* ============================================
   BIFOLD COLOUR SWATCHES
   ============================================ */

.bifold-colour-swatches {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 1.8em 0 2em;
}

.bifold-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    width: 72px;
}

.bifold-swatch-chip {
    display: block;
    width: 52px;
    height: 52px;
    border-radius: 4px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Dual-colour chip: split diagonally */
.bifold-swatch-chip--dual {
    background: linear-gradient(135deg, var(--c1) 50%, var(--c2) 50%);
    border: 1px solid #ccc !important;
}

.bifold-swatch-name {
    font-family: var(--font-primary);
    font-size: 11px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    text-align: center;
    line-height: 1.35;
}

.bifold-swatch-name small {
    font-weight: var(--font-weight-book);
    color: var(--color-secondary);
    font-size: 10px;
    display: block;
    margin-top: 2px;
}

/* Finish type grid */
.bifold-finish-types {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 1px;
    background: #dce6ef;
    border: 1px solid #dce6ef;
    margin-top: 0.5em;
}

.bifold-finish-type {
    background: #fff;
    padding: 1.2em 1.4em;
}

.bifold-finish-type strong {
    display: block;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
    margin-bottom: 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bifold-finish-type p {
    font-size: 13px;
    line-height: 1.55;
    color: var(--color-secondary);
    margin: 0;
}

/* Responsive: bifold feature cards */
@media (max-width: 960px) {
    .bifold-product-features .features-grid {
        grid-template-columns: 1fr;
    }
    .bifold-finish-types {
        grid-template-columns: repeat(2, 1fr);
    }
    .bifold-colour-swatches {
        gap: 12px;
    }
}

@media (max-width: 600px) {
    .bifold-product-features .feature-card {
        padding: 1.6em 1.8em;
        grid-template-columns: 40px 1fr;
        column-gap: 0.75em;
    }
    .bifold-product-features .feature-icon {
        width: 40px;
        height: 40px;
        min-width: 40px;
    }
    .bifold-finish-types {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   BIFOLD PERFORMANCE SPECIFICATIONS SECTION
   Used by: Sliding BiFold (16364) & Folding BiFold (16498)
   ============================================ */

.bifold-specs-section {
    padding: 80px 0;
    background-color: var(--color-primary);
    color: var(--color-accent);
}

.bifold-specs-section .frame {
    width: 80%;
    max-width: 1500px;
    margin: 0 auto;
    padding: 0;
}

.bifold-specs-inner {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 60px;
    align-items: start;
}

/* Left column: heading + table */
.bifold-specs-table-col .bifold-specs-heading {
    color: var(--color-accent);
    font-family: var(--font-heading);
    font-weight: var(--font-weight-extra-bold);
    font-size: var(--font-size-h2);
    margin-top: 0;
    margin-bottom: 16px;
}

.bifold-specs-table-col .typography-body {
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 28px;
}

.bifold-specs-table-col .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.bifold-perf-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--font-primary);
    font-size: var(--font-size-cta);
}

.bifold-perf-table thead tr {
    background-color: rgba(255, 255, 255, 0.12);
}

.bifold-perf-table thead th {
    padding: 14px 18px;
    text-align: left;
    color: var(--color-accent);
    font-weight: var(--font-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-size: 13px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.25);
}

.bifold-perf-table tbody tr {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: background-color 0.15s ease;
}

.bifold-perf-table tbody tr:hover {
    background-color: rgba(255, 255, 255, 0.06);
}

.bifold-perf-table tbody td {
    padding: 14px 18px;
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--font-size-cta);
    vertical-align: middle;
}

.bifold-perf-table tbody td:first-child {
    font-weight: var(--font-weight-light);
    color: rgba(255, 255, 255, 0.75);
}

.bifold-perf-table tbody td:nth-child(2) {
    color: rgba(255, 255, 255, 0.55);
    font-size: 14px;
}

.bifold-perf-table tbody td strong {
    color: #ffffff;
    font-weight: var(--font-weight-semibold);
}

/* Right column: stat cards */
.bifold-specs-stats-col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

.bifold-stat-card {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 28px 22px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.bifold-stat-card:hover {
    background-color: rgba(255, 255, 255, 0.13);
    border-color: rgba(255, 255, 255, 0.3);
}

.bifold-stat-value {
    font-family: var(--font-heading);
    font-size: 32px;
    font-weight: var(--font-weight-extra-bold);
    color: #ffffff;
    line-height: 1;
    letter-spacing: -0.02em;
}

.bifold-stat-label {
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: var(--font-weight-light);
    color: rgba(255, 255, 255, 0.65);
    letter-spacing: 0.02em;
    line-height: 1.4;
    text-transform: uppercase;
}

/* Responsive: bifold specs */
@media (max-width: 1024px) {
    .bifold-specs-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .bifold-specs-stats-col {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 768px) {
    .bifold-specs-section {
        padding: 60px 0;
    }

    .bifold-specs-section .frame {
        width: 90%;
    }

    .bifold-specs-stats-col {
        grid-template-columns: repeat(2, 1fr);
        gap: 14px;
    }

    .bifold-stat-card {
        padding: 20px 16px;
    }

    .bifold-stat-value {
        font-size: 26px;
    }
}

@media (max-width: 480px) {
    .bifold-specs-stats-col {
        grid-template-columns: 1fr 1fr;
    }

    .bifold-perf-table thead th,
    .bifold-perf-table tbody td {
        padding: 10px 12px;
    }
}

/* Homepage FAQ Section */
.homepage-faq-section {
    background-color: var(--color-primary);
    padding: 80px 0;
}

.homepage-faq-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.homepage-faq-heading {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 48px;
}

.homepage-faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.homepage-faq-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.homepage-faq-item:first-child {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

.homepage-faq-question {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 24px;
    width: 100%;
    background: none;
    border: none;
    padding: 24px 0;
    cursor: pointer;
    font-family: var(--font-primary);
    font-size: 18px;
    font-weight: 600;
    color: var(--color-accent);
    text-align: left;
    line-height: 1.4;
    transition: opacity 0.2s ease;
}

.homepage-faq-question:hover {
    opacity: 0.8;
}

.homepage-faq-icon {
    display: inline-block;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    position: relative;
}

.homepage-faq-icon::before,
.homepage-faq-icon::after {
    content: '';
    position: absolute;
    background-color: var(--color-accent);
    border-radius: 2px;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.homepage-faq-icon::before {
    width: 24px;
    height: 2px;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
}

.homepage-faq-icon::after {
    width: 2px;
    height: 24px;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
}

.homepage-faq-question[aria-expanded="true"] .homepage-faq-icon::after {
    transform: translateX(-50%) rotate(90deg);
    opacity: 0;
}

.homepage-faq-answer {
    padding: 0 0 24px;
}

.homepage-faq-answer p {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.7;
    color: var(--color-accent);
    margin: 0;
    opacity: 0.85;
    max-width: 860px;
}

.homepage-faq-answer a {
    color: var(--color-accent);
    text-decoration: underline;
}

@media (max-width: 900px) {
    .homepage-faq-section {
        padding: 56px 0;
    }

    .homepage-faq-container {
        padding: 0 20px;
    }

    .homepage-faq-heading {
        font-size: 30px;
        margin-bottom: 32px;
    }

    .homepage-faq-question {
        font-size: 16px;
        padding: 20px 0;
    }
}

/* Performance Data for Specifiers Section */
.performance-data-section {
    background-color: var(--color-primary);
    padding: 80px 0;
}

.performance-data-container {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.performance-data-heading {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 20px;
}

.performance-data-intro {
    font-family: var(--font-primary);
    font-size: 18px;
    line-height: 1.6;
    color: var(--color-accent);
    opacity: 0.75;
    margin: 0 0 48px;
    max-width: 100%;
}

.performance-data-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-bottom: 0;
    margin-top: 2em;
}

.performance-data-item {
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 32px 36px;
}

.performance-data-item-title {
    font-family: var(--font-heading);
    font-size: 22px;
    font-weight: 700;
    color: var(--color-accent);
    margin: 0 0 16px;
}

.performance-data-item p {
    font-family: var(--font-primary);
    font-size: 16px;
    line-height: 1.75;
    color: var(--color-accent);
    opacity: 0.8;
    margin: 0;
}

.performance-data-cta {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    margin-top: 48px;
    padding-top: 32px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.performance-data-cta p {
    font-family: var(--font-primary);
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-accent);
    opacity: 0.8;
    margin: 0;
}

.performance-data-cta .btn {
    flex-shrink: 0;
    white-space: nowrap;
}

@media (max-width: 900px) {
    .performance-data-section {
        padding: 56px 0;
    }

    .performance-data-container {
        padding: 0 24px;
    }

    .performance-data-heading {
        font-size: 30px;
    }

    .performance-data-intro {
        font-size: 16px;
        margin-bottom: 36px;
    }

    .performance-data-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .performance-data-item {
        padding: 24px;
    }

    .performance-data-cta {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
        margin-top: 36px;
        padding-top: 28px;
    }

    .performance-data-cta .btn {
        align-self: stretch;
        text-align: center;
    }
}

/* ============================================================
   PREVIEW BANNER (?new_data=1)
   ============================================================ */

.preview-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    background: #f59e0b;
    color: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 24px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.preview-banner__text {
    display: flex;
    align-items: center;
    gap: 10px;
}

.preview-banner__icon {
    font-size: 16px;
}

.preview-banner__close {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    color: #1c1c1c;
    line-height: 1;
    padding: 0 4px;
    opacity: 0.7;
    transition: opacity 0.15s;
}

.preview-banner__close:hover {
    opacity: 1;
}

body.has-preview-banner {
    padding-top: 44px;
}

/* ============================================================
   PRODUCT TECHNICAL SPECIFICATIONS SECTION
   Deliberately matches .product-features-section styling
   ============================================================ */

.tech-specs-section {
    padding: 6em 0;
    width: 100%;
    background-color: var(--color-accent);
}

.tech-specs-section .frame {
    max-width: 1500px;
    margin: 0 auto;
}

/* Features grid above the stat bar / tabs — blue background block */
.tech-specs-features-above {
    background: var(--color-primary);
    border-radius: 8px;
    padding: 3.5em;
    margin-bottom: 0;
}

.tech-specs-features-heading {
    font-family: var(--font-primary);
    font-size: var(--font-size-h3);
    font-weight: var(--font-weight-semibold);
    color: #ffffff;
    margin: 0 0 .75em;
}

.tech-specs-features-above .features-grid {
    margin-top: 0;
}

.tech-specs-features-above .feature-card {
    background: #ffffff;
}

.tech-specs-features-above .feature-card h3,
.tech-specs-features-above .feature-card .typography-feature-heading {
    color: var(--color-primary);
}

.tech-specs-features-above .feature-card p,
.tech-specs-features-above .feature-card .typography-feature-description {
    color: var(--color-secondary);
}

.tech-specs-divider {
    border: none;
    border-top: 1px solid #e0e0e0;
    margin: 3em 0 2.5em;
}

.tech-specs-header {
    margin-bottom: 36px;
}

.tech-specs-title {
    margin-bottom: 12px;
}

.tech-specs-intro {
    max-width: 760px;
}

/* Stat bar — matches bifold-stat-card pattern */
.tech-specs-stat-bar {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
    margin-bottom: 48px;
}

.tech-spec-stat {
    background: var(--color-primary);
    color: #fff;
    border-radius: 4px;
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.tech-spec-stat-value {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.5px;
    font-family: var(--font-primary);
}

.tech-spec-stat-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.75;
    line-height: 1.3;
}

/* Tab buttons — identical to .product-features-tab */
.tech-specs-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--color-primary);
    margin-bottom: 0;
    flex-wrap: wrap;
}

.tech-specs-tab-btn {
    padding: 15px 30px;
    background-color: #f5f5f5;
    color: var(--color-secondary);
    cursor: pointer;
    border: none;
    font-family: var(--font-primary);
    font-weight: var(--font-weight-semibold);
    font-size: 16px;
    text-transform: capitalize;
    transition: all 0.3s ease;
    position: relative;
}

.tech-specs-tab-btn:hover {
    background-color: #e5e5e5;
}

.tech-specs-tab-btn.active {
    background-color: var(--color-primary);
    color: #ffffff;
}

.tech-specs-tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--color-primary);
}

/* Panels — contained data well */
.tech-specs-panels {
    position: relative;
    background: #f9f9f9;
    border: 1px solid #e4e4e4;
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 2.75em 2.5em 2.5em;
}

.tech-specs-panel {
    display: none;
}

.tech-specs-panel.active {
    display: block;
}

.tech-specs-tab-inner {
    max-width: 100%;
}

.tech-specs-tab-inner > *:first-child,
.tech-specs-tab-inner > .table-responsive:first-child {
    margin-top: 0;
}

/* Normalise all headings in tab panels — catches both .tech-specs-sub-heading
   and raw <h2>/<h3> tags from installation/colours HTML strings */
.tech-specs-tab-inner h2,
.tech-specs-tab-inner h3 {
    font-size: 19px;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    color: var(--color-primary);
    margin: 1.75em 0 0.5em;
    padding-left: 0.75em;
    border-left: 3px solid var(--color-primary);
    text-transform: none;
    letter-spacing: 0;
}

.tech-specs-tab-inner h2:first-child,
.tech-specs-tab-inner h3:first-child {
    margin-top: 0;
}

.tech-specs-sub-heading {
    font-size: 19px;
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-primary);
    color: var(--color-primary);
    margin: 1.75em 0 0.5em;
    padding-left: 0.75em;
    border-left: 3px solid var(--color-primary);
    border-bottom: none;
    text-transform: none;
    letter-spacing: 0;
}

.tech-specs-sub-heading:first-child {
    margin-top: 0;
}

/* Table styles — extend existing max-sizes-table */
.tech-specs-table {
    width: 100%;
    margin-bottom: 12px;
}

.tech-specs-table td.td-highlight {
    background: #d4edda;
    color: #155724;
    font-weight: 700;
}

/* Note text — matches feature-description size */
.tech-specs-note {
    font-size: var(--font-size-feature-description);
    color: #6b7a86;
    line-height: 1.6;
    margin-bottom: 1.25em;
}

.tech-specs-note--source {
    margin-top: 1.5em;
}

/* Thermal primary window key */
.tech-specs-thermal-key {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 12px 16px;
    margin-bottom: 1.25em;
    font-size: var(--font-size-feature-description);
    color: var(--color-secondary);
}

.thermal-key-divider {
    color: #b0bec9;
}

/* Technical notes grid */
.tech-specs-notes-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
}

.tech-specs-note-card {
    background: #ffffff;
    border: 1px solid #e4e4e4;
    border-radius: 4px;
    padding: 20px;
}

.tech-specs-note-heading {
    font-size: var(--font-size-cta);
    font-weight: 700;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    margin: 0 0 0.6em;
    font-family: var(--font-primary);
}

.tech-specs-note-body,
.tech-specs-note-body p,
.tech-specs-note-body li,
.tech-specs-note-body strong {
    font-size: 15px;
    color: var(--color-secondary);
    line-height: 1.6;
    font-family: var(--font-primary);
}

.tech-specs-note-body > *:first-child {
    margin-top: 0;
}

.tech-specs-note-body > *:last-child {
    margin-bottom: 0;
}

.tech-specs-note-body p {
    margin-bottom: 0.6em;
}

.tech-specs-note-body ul {
    padding-left: 16px;
    margin: 0;
}

.tech-specs-note-body li {
    margin-bottom: 4px;
}

.tech-specs-note-body li:last-child {
    margin-bottom: 0;
}

/* Source document link */
.tech-specs-source-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--color-primary);
    text-decoration: none;
    margin-top: 1em;
    padding: 8px 14px;
    border: 1px solid var(--color-primary);
    border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}

.tech-specs-source-link:hover {
    background: var(--color-primary);
    color: #ffffff;
}

.tech-specs-source-link svg {
    flex-shrink: 0;
}

/* Colour swatches */
.tech-specs-colour-swatches {
    margin-top: 2em;
    padding-top: 1.5em;
    border-top: 1px solid #e4e4e4;
}


.tech-specs-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5em 2.5em;
    align-items: flex-start;
    margin-top: 1.5em;
}

.tech-specs-swatch {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    text-align: center;
    min-width: 64px;
}

.tech-specs-swatch-circle {
    display: block;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(0,0,0,0.18);
}

.tech-specs-swatch-spectrum {
    background: linear-gradient(135deg,
        #F4F4F0 0%,
        #F2EDD7 15%,
        #d4a853 25%,
        #3A1F0F 38%,
        #c0392b 50%,
        #2980b9 62%,
        #27ae60 74%,
        #373F43 87%,
        #0D0D0D 100%
    );
    border: 1px solid #ddd;
}

.tech-specs-swatch-name {
    font-size: 13px;
    font-family: var(--font-primary);
    color: var(--color-secondary);
    line-height: 1.35;
    text-align: center;
    margin-top: 10px;
}

.tech-specs-swatch-name small {
    display: block;
    font-size: 11px;
    opacity: 0.6;
    margin-top: 1px;
}

/* Responsive */
@media (max-width: 768px) {
    .tech-specs-stat-bar {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
        margin-bottom: 32px;
    }

    .tech-spec-stat-value {
        font-size: 22px;
    }

    .tech-specs-panels {
        padding: 1.25em 1em 1.5em;
    }

    /* --- Tab strip: horizontal scroll instead of wrapping --- */
    .tech-specs-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        border-bottom: 2px solid var(--color-primary);
    }

    .tech-specs-tabs::-webkit-scrollbar {
        display: none;
    }

    .tech-specs-tab-btn {
        padding: 12px 16px;
        font-size: 14px;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* --- Card layout for programmatic tables (.tech-specs-table) --- */

    /* Remove the table-responsive margin/overflow — card layout doesn't need it */
    .tech-specs-tab-inner .table-responsive:has(.tech-specs-table) {
        overflow-x: visible;
        border: none;
    }

    .tech-specs-table {
        display: block;
        margin-top: 0;
        width: 100%;
    }

    .tech-specs-table thead {
        display: none;
    }

    .tech-specs-table tbody {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    /* Each row becomes a card */
    .tech-specs-table tbody tr {
        display: block;
        background: #ffffff;
        border: 1px solid #dde4ea;
        border-radius: 8px;
        overflow: hidden;
        box-shadow: 0 1px 4px rgba(0,0,0,0.06);
    }

    .tech-specs-table tbody tr:hover {
        background: #ffffff;
    }

    /* First cell — glass type — becomes the card header */
    .tech-specs-table td:first-child {
        display: block;
        background: var(--color-primary);
        color: #ffffff;
        padding: 11px 14px;
        font-size: 14px;
        font-weight: 700;
        border-bottom: none;
        border-right: none;
    }

    .tech-specs-table td:first-child strong {
        color: #ffffff;
        font-weight: 700;
    }

    /* Data cells — label on the left, value on the right */
    .tech-specs-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 9px 14px;
        border-bottom: 1px solid #f0f0f0;
        border-right: none;
        font-size: 14px;
        gap: 8px;
    }

    .tech-specs-table td:last-child {
        border-bottom: none;
    }

    .tech-specs-table td[data-label]::before {
        content: attr(data-label);
        font-weight: 600;
        color: var(--color-primary);
        font-size: 11px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        flex: 0 0 auto;
        max-width: 50%;
        line-height: 1.3;
    }

    /* Highlighted cells (e.g. Rw ≥ 50 dB, low U-values) stay green */
    .tech-specs-table td.td-highlight {
        background: #edf7ee;
        color: #155724;
        font-weight: 700;
    }

    /* --- Raw HTML tables (installation tab) — horizontal scroll --- */
    .tech-specs-tab-inner .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: 6px;
        border: 1px solid #e0e0e0;
    }

    /* Scroll hint indicator below raw tables */
    .tech-specs-tab-inner .table-responsive:not(:has(.tech-specs-table))::after {
        content: 'Scroll to see more →';
        display: block;
        text-align: center;
        font-size: 11px;
        color: #888;
        letter-spacing: 0.05em;
        padding: 6px 0;
        background: #f5f5f5;
        border-top: 1px solid #e0e0e0;
    }

    .tech-specs-thermal-key {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .thermal-key-divider {
        display: none;
    }

    .tech-specs-notes-grid {
        grid-template-columns: 1fr;
    }
}

/* =============================================================================
   EVENTS LISTING PAGE
   ============================================================================= */

/* Intro */
.events-intro-section {
    padding: 60px 0 20px;
    background-color: var(--color-accent);
}

.events-intro-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.events-intro-inner {
    max-width: 820px;
    margin: 0 auto;
    text-align: center;
}

.events-intro-inner p {
    font-family: var(--font-primary);
    font-size: 19px;
    line-height: 1.75;
    color: var(--color-secondary);
    margin-bottom: 0;
}

/* Event Cards */
.events-cards-section {
    padding: 50px 0 70px;
    background-color: var(--color-accent);
}

.events-cards-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.events-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 30px;
}

.event-card {
    background: white;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 6px 30px rgba(13, 58, 93, 0.10);
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.event-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 50px rgba(13, 58, 93, 0.15);
}

.event-card-header {
    background: var(--color-primary);
    padding: 32px 36px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.event-card-date {
    display: flex;
    align-items: center;
    gap: 16px;
}

.event-card-day {
    font-family: var(--font-heading);
    font-size: 72px;
    font-weight: 800;
    color: white;
    line-height: 1;
    letter-spacing: -2px;
}

.event-card-month-year {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.event-card-month {
    font-family: var(--font-heading);
    font-size: 26px;
    font-weight: 700;
    color: white;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.event-card-year {
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.65);
    line-height: 1;
}

.event-card-badge {
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: white;
    font-family: var(--font-primary);
    font-size: 13px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: 20px;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.event-card-body {
    padding: 36px;
    display: flex;
    flex-direction: column;
    gap: 18px;
    flex: 1;
}

.event-card-meta-row {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.event-card-meta-row svg {
    flex-shrink: 0;
    margin-top: 2px;
}

.event-card-venue strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 3px;
}

.event-card-location-sub {
    font-family: var(--font-primary);
    font-size: 14px;
    color: var(--color-secondary);
    opacity: 0.7;
}

.event-card-time span {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--color-secondary);
    font-weight: 500;
}

.event-card-highlights {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 2em;
    border-top: 1px solid #f0f2f4;
}

.event-card-highlight-item {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--color-secondary);
    font-weight: 500;
}

.event-card-highlight-item svg {
    flex-shrink: 0;
}

.event-card-cta {
    margin-top: auto;
    padding-top: 10px;
}

.event-card-btn {
    width: 100%;
    text-align: center;
    display: block !important;
    padding: 14px 20px !important;
    font-size: 16px !important;
}

/* Registration Form */
.events-registration-section {
    padding: 70px 0 90px;
    background: #f4f6f8;
}

.events-registration-section .frame {
    max-width: 1500px;
    margin: 0 auto;
    padding: 0 40px;
}

.events-registration-inner {
    max-width: 780px;
    margin: 0 auto;
}

.events-form-header {
    text-align: center;
    margin-bottom: 40px;
}

.events-form-header h2 {
    font-family: var(--font-heading);
    font-size: 40px;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: 12px;
    margin-top: 0;
}

.events-form-header p {
    font-family: var(--font-primary);
    font-size: 17px;
    color: var(--color-secondary);
    opacity: 0.85;
    margin: 0;
}

.events-form-card {
    background: white;
    border-radius: 14px;
    padding: 50px 55px;
    box-shadow: 0 6px 40px rgba(13, 58, 93, 0.10);
    border-top: 5px solid var(--color-primary);
}

/* Event Selector Checkboxes */
.events-selector-group > label:first-child {
    display: block;
    font-family: var(--font-primary);
    font-size: 15px;
    font-weight: 600;
    color: var(--color-secondary);
    margin-bottom: 14px;
}

.events-checkbox-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.events-checkbox-option {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 18px 20px;
    background: #f4f6f8;
    border: 2px solid #e0e4e8;
    border-radius: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.events-checkbox-option:hover {
    border-color: var(--color-primary);
    background: #eef2f6;
}

.events-checkbox-option input[type="checkbox"] {
    display: none;
}

.events-checkbox-option input[type="checkbox"]:checked ~ .events-checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.events-checkbox-option input[type="checkbox"]:checked ~ .events-checkbox-custom::after {
    opacity: 1;
}

.events-checkbox-option input[type="checkbox"]:checked ~ .events-checkbox-label-text strong {
    color: var(--color-primary);
}

.events-checkbox-option:has(input:checked) {
    border-color: var(--color-primary);
    background: #eef4fa;
}

.events-checkbox-custom {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border: 2px solid #c0c8d0;
    border-radius: 5px;
    background: white;
    position: relative;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.events-checkbox-custom::after {
    content: '';
    width: 6px;
    height: 11px;
    border: 2px solid white;
    border-top: none;
    border-left: none;
    transform: rotate(45deg) translate(-1px, -1px);
    opacity: 0;
    transition: opacity 0.15s ease;
    display: block;
}

.events-checkbox-label-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.events-checkbox-label-text strong {
    font-family: var(--font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--color-secondary);
    line-height: 1.2;
    transition: color 0.2s ease;
}

.events-checkbox-label-text span {
    font-family: var(--font-primary);
    font-size: 15px;
    color: var(--color-secondary);
    opacity: 0.7;
    line-height: 1.2;
}

/* Responsive */
@media (max-width: 900px) {
    .events-cards-grid {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .events-checkbox-grid {
        grid-template-columns: 1fr;
    }

    .events-form-card {
        padding: 35px 28px;
    }

    .event-card-day {
        font-size: 56px;
    }

    .event-card-month {
        font-size: 22px;
    }

    .events-form-header h2 {
        font-size: 32px;
    }
}

@media (max-width: 600px) {
    .events-intro-section .frame,
    .events-cards-section .frame,
    .events-registration-section .frame {
        padding: 0 20px;
    }

    .event-card-header {
        padding: 24px 24px;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }

    .event-card-body {
        padding: 26px 24px;
    }

    .events-form-card {
        padding: 28px 20px;
    }
}