@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700;800;900&family=Montserrat:wght@400;500;600;700;800;900&display=swap');

/* =========================================================
   Hatchway — Modern Enhanced Stylesheet
   Palette kept: Deep Navy + Charcoal + Metallic Gold
   ========================================================= */

:root {
    /* Monochrome B&W palette */
    --primary-color: #111111;
    --primary-deep: #000000;
    --secondary-color: #6b6b6b;
    --accent-color: #111111;
    --accent-soft: #4a4a4a;
    --accent-warm: #555555;          /* subtle gray for hover feedback */
    --accent-hover: #000000;
    --accent-glow: rgba(0, 0, 0, 0.12);
    --accent-tint: #f5f5f5;
    --light-bg: #ffffff;
    --light-bg-2: #f7f7f7;
    --light-bg-3: #ececec;
    --dark-bg: #0a0a0a;
    --text-dark: #111111;
    --text-muted: #6b6b6b;
    --text-light: #ffffff;
    --hairline: #e5e5e5;               /* fine border line */
    --hairline-dark: rgba(255,255,255,0.12);
    --transition-speed: 0.4s;
    --transition-smooth: cubic-bezier(0.22, 1, 0.36, 1);
    --transition-bouncy: cubic-bezier(0.34, 1.56, 0.64, 1);
    --border-radius: 2px;
    --shadow-sm: 0 6px 18px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 14px 32px rgba(0, 0, 0, 0.09);
    --shadow-lg: 0 28px 58px rgba(0, 0, 0, 0.14);
    --shadow-gold: 0 18px 40px rgba(0, 0, 0, 0.25);
}

* { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

html {
    scroll-behavior: smooth;
    /* Accounts for the sticky navbar height when arriving at a #section
       anchor from a cross-page link (e.g. facade.php#products). */
    scroll-padding-top: 90px;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    overflow-x: hidden;
    background-color: var(--light-bg);
    line-height: 1.7;
    opacity: 0;
    animation: pageFadeIn 0.7s var(--transition-smooth) forwards;
}

@keyframes pageFadeIn { to { opacity: 1; } }

h1, h2, h3, h4, h5, h6 {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.015em;
}

/* Brand accent — clean uppercase wedge, replaces the previous Playfair italic */
.display-serif {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-style: normal;
    font-weight: 800;
    color: var(--accent-warm);
    letter-spacing: 0;
}

::selection { background: var(--accent-color); color: var(--primary-deep); }

/* =========================================================
   Custom Scrollbar
   ========================================================= */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--light-bg-2); }
::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-color), var(--accent-hover));
    border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover { background: var(--primary-color); }

/* =========================================================
   Navbar
   ========================================================= */
.navbar {
    transition: all var(--transition-speed) var(--transition-smooth);
    padding: 18px 0;
    background: #ffffff;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}

.navbar.scrolled {
    padding: 8px 0;
    background: #ffffff;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.10);
}

.navbar-brand img {
    height: 52px;
    transition: transform var(--transition-speed) var(--transition-bouncy);
}
.navbar.scrolled .navbar-brand img { height: 42px; }
.navbar-brand:hover img { transform: scale(1.06) rotate(-1deg); }

/* ===== Co-branded navbar (TOSTEM page only) =====
   Hatchway + TOSTEM partner logos appear inline, both smaller than usual,
   separated by a thin vertical divider. */
.navbar-brand-cobranded {
    display: inline-flex;
    align-items: center;
    gap: 14px;
}
.navbar-brand-cobranded .brand-logo-hatchway { height: 40px; }
.navbar-brand-cobranded .brand-logo-tostem { height: 26px; width: auto; }
.navbar.scrolled .navbar-brand-cobranded .brand-logo-hatchway { height: 32px; }
.navbar.scrolled .navbar-brand-cobranded .brand-logo-tostem { height: 22px; }
.navbar-brand-cobranded .brand-divider {
    display: inline-block;
    width: 1px;
    height: 28px;
    background: #d8d8d8;
    flex: 0 0 auto;
}
.navbar.scrolled .navbar-brand-cobranded .brand-divider { height: 24px; }
.navbar-brand-cobranded:hover img { transform: none; }

@media (max-width: 575.98px) {
    .navbar-brand-cobranded { gap: 10px; }
    .navbar-brand-cobranded .brand-logo-hatchway { height: 32px; }
    .navbar-brand-cobranded .brand-logo-tostem { height: 22px; }
    .navbar-brand-cobranded .brand-divider { height: 24px; }
}

.nav-link {
    color: var(--primary-color) !important;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    font-size: 0.78rem;
    margin: 0 18px;
    position: relative;
    transition: color var(--transition-speed);
    padding: 8px 4px !important;
}

/* Mega Menu Styles */
.mega-dropdown-menu {
    padding: 0;
    border: none;
    border-radius: 0;
    box-shadow: 0 10px 40px rgba(0,0,0,0.15);
    /* Wider now that the TOSTEM pane has 2 columns (products + Our Series)
       — was 720px, which made WE PLUS / WE 70 / Ventilation System wrap. */
    width: min(1080px, 96vw);
    max-width: min(1080px, 96vw);
    background: #f4f4f4;
    overflow: hidden;
    /* Drop the panel directly beneath the Products toggle, centered on it */
    top: 100% !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
}
.mega-tab-container {
    display: flex;
    flex-direction: row;
    min-height: 380px;
}
.mega-sidebar {
    width: 320px;
    background: #000;
    padding: 20px 0;
    border-radius: 0;
    margin: 0 !important;
}
.mega-sidebar .nav-link {
    color: #fff !important;
    border-radius: 0;
    text-align: left;
    padding: 15px 25px !important;
    font-size: 0.95rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
    background: transparent;
    border: none;
    transition: all 0.2s;
    margin: 0;
}
.mega-sidebar .nav-link.active, .mega-sidebar .nav-link:hover {
    background: #f4f4f4 !important;
    color: #000 !important;
}
.mega-content {
    flex: 1;
    padding: 30px 40px;
    background: #f4f4f4;
}
/* Inner 3-level Menu styling */
.mega-tab-container-inner {
    display: flex;
    flex-direction: row;
}
.mega-sidebar-inner {
    width: 260px;
    background: transparent;
    border-right: 1px solid #e0e0e0;
    padding-right: 15px;
    margin: 20px 0 20px 20px;
}
.mega-sidebar-inner .nav-link {
    color: #555 !important;
    border-radius: 0;
    text-align: left;
    text-transform: none;
    letter-spacing: normal;
    padding: 10px 15px !important;
    font-size: 0.95rem;
    font-weight: 500;
    background: transparent;
    border: none;
    transition: color 0.2s, box-shadow 0.2s;
    margin: 0 0 5px 0;
    display: flex;
    align-items: center;
    width: 100%;
}
.mega-sidebar-inner .nav-link:hover {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111 !important;
}
.mega-sidebar-inner .nav-link.active {
    background: rgba(0, 0, 0, 0.05) !important;
    color: #111 !important;
    box-shadow: inset 3px 0 0 #111;
}
/* The top-nav animated underline (.nav-link::before) leaks onto mega-menu
   buttons and crosses the divider — disable it inside both sidebars. */
.mega-sidebar .nav-link::before,
.mega-sidebar-inner .nav-link::before { content: none; }
.mega-sidebar-inner .nav-link i {
    transition: transform 0.2s;
}
.mega-sidebar-inner .nav-link.active i, .mega-sidebar-inner .nav-link:hover i {
    transform: translateX(3px);
    opacity: 1 !important;
}
.mega-content-inner {
    flex: 1;
    padding: 20px 40px;
}
.mega-content-title {
    font-size: 0.85rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #000;
}
.mega-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.mega-content ul li a {
    display: block;
    padding: 8px 10px;
    margin: 0 -10px;
    color: #333;
    text-decoration: none;
    font-size: 0.95rem;
    border-radius: 3px;
    transition: color 0.2s, background-color 0.2s;
}
.mega-content ul li a:hover {
    color: var(--primary-color);
    background: rgba(0, 0, 0, 0.05);
    text-decoration: none;
}

/* 3-Level Mega Menu Grid Layout */
.mega-grid-4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 991.98px) {
    .mega-grid-4 {
        grid-template-columns: 1fr;
        gap: 15px;
    }
}
/* Mega menu — mobile: stack every level full-width inside the collapsed navbar */
@media (max-width: 991.98px) {
    .mega-dropdown-menu {
        position: static !important;
        width: 100% !important;
        max-width: 100% !important;
        transform: none !important;
        box-shadow: none !important;
        background: #fff !important;
        border-top: 1px solid #ececec;
        margin-top: 6px !important;
    }
    .mega-tab-container { flex-direction: column; min-height: auto; }
    .mega-sidebar { width: 100%; padding: 6px 0; }
    .mega-sidebar .nav-link { padding: 13px 20px !important; font-size: 0.95rem; }
    .mega-content { padding: 18px 20px; }
    .mega-tab-container-inner { flex-direction: column; }
    .mega-sidebar-inner {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e3e3e3;
        padding: 0 0 10px 0;
        margin: 0 0 14px 0;
    }
    .mega-content-inner { padding: 4px 0 0 0; }
}
@media (min-width: 992px) {
    .navbar .dropdown-menu {
        display: none !important;
        margin-top: 0;
    }
    .navbar .dropdown:hover .dropdown-menu {
        display: block !important;
        animation: fadeInDown 0.2s ease forwards;
    }
}
/* Mega menu — desktop: denser spacing so more text fits in less space */
@media (min-width: 992px) {
    .mega-tab-container { min-height: 290px; }
    .mega-sidebar { width: 264px; padding: 10px 0; }
    .mega-sidebar .nav-link { padding: 11px 20px !important; font-size: 0.9rem; }
    .mega-content { padding: 18px 18px 18px 10px; }
    .mega-sidebar-inner {
        width: 172px;
        padding-right: 6px;
        margin: 12px 0;
    }
    .mega-sidebar-inner .nav-link { padding: 7px 8px !important; font-size: 0.9rem; margin-bottom: 2px; }
    .mega-sidebar-inner .nav-link i { display: none; }
    .mega-content-inner { padding: 4px 6px 4px 18px; }
    .mega-content-title { margin-bottom: 10px; }
    .mega-content ul li a { padding: 5px 10px; font-size: 0.9rem; }
}

.nav-link::before {
    content: '';
    position: absolute;
    width: 0;
    height: 2px;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--accent-color), var(--accent-soft));
    transition: width 0.45s var(--transition-smooth);
}
.navbar .nav-link.dropdown-toggle {
    display: flex;
    align-items: center;
}

.nav-link:hover::before, .nav-link.active::before { width: 100%; }
.nav-link:hover, .nav-link.active { color: var(--accent-color) !important; }

.navbar-toggler { border: 0; padding: 6px 8px; }
.navbar-toggler:focus { box-shadow: none; }

/* =========================================================
   Hero Carousel
   ========================================================= */
.hero-section {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background-color: var(--dark-bg);
}

.carousel-item {
    height: 100vh;
    min-height: 600px;
    transition: transform 1.2s var(--transition-smooth), opacity 0.8s ease-in-out !important;
}

.carousel-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: kenBurns 22s ease-in-out infinite alternate;
    will-change: transform;
}

.hero-overlay {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 25% 25%, rgba(0, 0, 0, 0.22) 0%, transparent 55%),
        linear-gradient(120deg, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0.30) 55%, rgba(0, 0, 0, 0.10) 100%);
    z-index: 1;
}

/* Subtle dot grid layer + bottom warm wash */
.hero-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255,255,255,0.20) 1px, transparent 1px);
    background-size: 28px 28px;
    opacity: 0.35;
    mix-blend-mode: overlay;
}
.hero-overlay::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 30%;
    background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
}

.hero-content {
    position: absolute;
    bottom: 80px;
    left: 40px;
    color: var(--text-light);
    text-align: left;
    width: 100%;
    max-width: 900px;
    z-index: 2;
    padding: 0 24px;
}

.hero-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: rgba(255, 255, 255, 0.9);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 26px;
    opacity: 0;
    animation: fadeInDown 1s 0.2s var(--transition-smooth) forwards;
}
.hero-eyebrow::before, .hero-eyebrow::after {
    content: '';
    width: 40px; height: 1px;
    background: rgba(255, 255, 255, 0.5);
}

.hero-content h1 {
    color: var(--text-light);
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 700;
    line-height: 1.15;
    margin-bottom: 8px;
    /* Layered 3D extrusion + ambient shadow — lifts the headline off the photo
       for strong readability and a premium, dimensional feel. */
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.45),
        0 2px 0 rgba(0, 0, 0, 0.4),
        0 3px 0 rgba(0, 0, 0, 0.35),
        0 4px 0 rgba(0, 0, 0, 0.3),
        0 5px 1px rgba(0, 0, 0, 0.25),
        0 6px 1px rgba(0, 0, 0, 0.22),
        0 0 6px rgba(0, 0, 0, 0.35),
        0 14px 30px rgba(0, 0, 0, 0.6);
    opacity: 0;
    animation: heroReveal 1.2s 0.4s var(--transition-smooth) forwards;
}

.hero-content h1 .display-serif {
    display: inline-block;
    color: #ffffff;
    /* Inherit the same 3D treatment as the rest of the headline */
    text-shadow: inherit;
}

.hero-content p {
    font-size: clamp(0.9rem, 1.1vw, 1.1rem);
    font-weight: 400;
    margin-bottom: 0;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.92);
    text-shadow:
        0 1px 0 rgba(0, 0, 0, 0.4),
        0 2px 0 rgba(0, 0, 0, 0.3),
        0 6px 16px rgba(0, 0, 0, 0.55);
    opacity: 0;
    animation: heroReveal 1.2s 0.7s var(--transition-smooth) forwards;
}

.hero-content .btn-luxury {
    opacity: 0;
    animation: heroReveal 1.2s 0.9s var(--transition-smooth) forwards;
}

/* Per-slide brand logo — frosted white chip, top-left of the hero.
   A light backing keeps every (dark or coloured) logo crisp over the photo. */
.hero-brand-logo {
    position: absolute;
    top: 116px;
    left: 40px;
    z-index: 3;
    background: rgba(255, 255, 255, 0.94);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    padding: 12px 20px;
    border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
    display: inline-flex;
    align-items: center;
    opacity: 0;
    animation: fadeInDown 1s 0.3s var(--transition-smooth) forwards;
}
.hero-brand-logo img {
    height: 30px;
    width: auto;
    display: block;
}
@media (max-width: 575.98px) {
    .hero-brand-logo { top: 96px; left: 20px; padding: 9px 14px; }
    .hero-brand-logo img { height: 22px; }
}

/* Vertical accent rail on left edge */
.hero-section .hero-rail {
    position: absolute;
    top: 50%;
    left: 32px;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(255,255,255,0.85);
    font-size: 0.7rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    writing-mode: vertical-rl;
    transform-origin: center;
}
.hero-section .hero-rail::before {
    content: '';
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, var(--accent-color), transparent);
    writing-mode: horizontal-tb;
}
.hero-section .hero-rail::after {
    content: '';
    width: 1px;
    height: 60px;
    background: linear-gradient(180deg, transparent, var(--accent-color), transparent);
    writing-mode: horizontal-tb;
}
@media (max-width: 991px) { .hero-section .hero-rail { display: none; } }

/* Bottom hero info bar */
.hero-info-bar {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    z-index: 3;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(20px) saturate(140%);
    -webkit-backdrop-filter: blur(20px) saturate(140%);
    border-top: 1px solid rgba(255,255,255,0.12);
    padding: 22px 0;
    opacity: 0;
    transform: translateY(20px);
    animation: heroReveal 1.2s 1.2s var(--transition-smooth) forwards;
}
.hero-info-bar .info-item {
    color: rgba(255,255,255,0.92);
    display: flex;
    align-items: center;
    gap: 14px;
    justify-content: center;
    padding: 0 10px;
}
.hero-info-bar .info-item i {
    width: 38px; height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    display: inline-flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.hero-info-bar .info-item .info-text strong {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 1.3rem;
    color: #ffffff;
    line-height: 1;
}
.hero-info-bar .info-item .info-text span {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.85);
}
@media (max-width: 991px) {
    .hero-info-bar { display: none; }
    .hero-section .carousel-indicators { bottom: 60px; }
}

/* Scroll-down indicator */
.hero-scroll-indicator {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    color: rgba(255,255,255,0.85);
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0;
    animation: fadeInUp 1s 1.4s var(--transition-smooth) forwards;
    text-decoration: none;
}
.hero-scroll-indicator span { display: block; color: rgba(255,255,255,0.85); }
.hero-scroll-indicator .mouse {
    width: 24px; height: 38px;
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 14px;
    margin: 0 auto 10px;
    position: relative;
}
.hero-scroll-indicator .mouse::after {
    content: '';
    position: absolute;
    top: 7px; left: 50%;
    width: 4px; height: 8px;
    background: var(--accent-color);
    border-radius: 2px;
    transform: translateX(-50%);
    animation: scrollDown 1.8s ease-in-out infinite;
}

/* Redesigned carousel indicators */
.hero-section .carousel-indicators {
    bottom: 160px;
    margin-bottom: 0;
    gap: 8px;
    z-index: 3;
}
/* When info bar is absent, dock indicators lower */
.hero-section:not(:has(.hero-info-bar)) .carousel-indicators { bottom: 40px; }
.hero-section:not(:has(.hero-info-bar)) .hero-scroll-indicator { bottom: 40px; display: none; }
.hero-section .carousel-indicators button {
    width: 36px;
    height: 3px;
    background-color: rgba(255,255,255,0.4);
    border: 0;
    border-radius: 2px;
    transition: all 0.4s var(--transition-smooth);
    opacity: 1;
}
.hero-section .carousel-indicators button.active {
    background-color: var(--accent-color);
    width: 60px;
}

.carousel-control-prev, .carousel-control-next {
    width: 6%;
    opacity: 0.55;
    transition: opacity 0.3s;
}
.carousel-control-prev:hover, .carousel-control-next:hover { opacity: 1; }

/* =========================================================
   Buttons
   ========================================================= */
.btn-luxury, .btn-luxury-dark {
    position: relative;
    overflow: hidden;
    padding: 14px 38px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 600;
    border-radius: var(--border-radius);
    transition: all 0.5s var(--transition-smooth);
    text-decoration: none;
    display: inline-block;
    cursor: pointer;
    z-index: 1;
    border: 2px solid;
}

.btn-luxury {
    background-color: transparent;
    color: var(--text-light);
    border-color: rgba(255, 255, 255, 0.85);
}

.btn-luxury-dark {
    background-color: var(--primary-color);
    color: var(--text-light);
    border-color: var(--primary-color);
}

/* Sliding fill effect */
.btn-luxury::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #ffffff;
    transition: left 0.5s var(--transition-smooth);
    z-index: -1;
}

.btn-luxury-dark::before {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 100%; height: 100%;
    background: #ffffff;
    transition: left 0.5s var(--transition-smooth);
    z-index: -1;
}

.btn-luxury:hover::before, .btn-luxury-dark:hover::before { left: 0; }

.btn-luxury:hover {
    color: #000000;
    border-color: #ffffff;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(255, 255, 255, 0.25);
}

.btn-luxury-dark:hover {
    background-color: transparent;
    color: #111111;
    border-color: #111111;
    transform: translateY(-2px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.15);
}

/* =========================================================
/* =========================================================
   Brand Lineup Strip — below carousel (3 cols, dividers)
   ========================================================= */
.brand-lineup {
    background: #ffffff;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-top: 0;
}
.brand-lineup::before {
    display: none;
}
.brand-lineup .container { position: relative; z-index: 1; }

.lineup-row {
    border-bottom: 1px solid #E3E3E3;
}

.lineup-row > [class*="col-"] {
    position: relative;
}

@media (min-width: 768px) {
    .lineup-row > [class*="col-"] {
        padding: 12px 0px 16px 0px;
    }
    .lineup-row > [class*="col-"]:nth-child(1),
    .lineup-row > [class*="col-"]:nth-child(2) {
        border-right: 1px solid #E3E3E3;
    }
    .lineup-row > [class*="col-"]:nth-child(3) {
        border-right: none;
    }
}

@media (max-width: 767px) {
    .lineup-row > [class*="col-"]:nth-child(1) {
        padding: 8px 15px 12px 15px;
        border-bottom: 1px solid #E3E3E3;
    }
    .lineup-row > [class*="col-"]:nth-child(2) {
        padding: 12px 15px 12px 15px;
        border-bottom: 1px solid #E3E3E3;
    }
    .lineup-row > [class*="col-"]:nth-child(3) {
        padding: 12px 15px 12px 15px;
        border-bottom: none;
    }
}

.lineup-item {
    text-align: center;
    padding: 0;
    position: relative;
    text-decoration: none; /* it's an <a> now — no link underline on the title */
    color: inherit;
    transition: transform 0.45s var(--transition-smooth);
}
.lineup-item:hover { transform: translateY(-2px); }

.lineup-item .lineup-tag {
    display: inline-block;
    font-size: 0.65rem;
    color: var(--accent-warm);
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    margin-bottom: 4px;
}
.lineup-item h3,
.lineup-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.25rem, 1.6vw, 1.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
    color: var(--primary-color);
    line-height: 1.2;
    text-align: center;
    transition: color 0.4s;
    /* Reserve space for 2 lines so 1-line and 2-line titles share a baseline,
       keeping the arrows below vertically aligned across all 3 columns. */
    min-height: 2.4em;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lineup-item:hover h3 { color: var(--accent-warm); }
.lineup-item p {
    display: none;
}
.brand-logo-container {
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px auto 8px;
}
.lineup-logo {
    /* Uniform height (width auto) so all three marks read as the same size,
       regardless of their different aspect ratios. max-width needs to be wide
       enough for the widest of the three logos — the FACADE SOLUTIONS mark
       at 426×58 (aspect 7.34:1) needs ~308px to reach the 42px height cap. */
    height: 42px;
    width: auto;
    max-width: 320px;
    object-fit: contain;
    transition: transform 0.4s var(--transition-smooth);
}
.lineup-item:hover .lineup-logo {
    transform: scale(1.04);
}
.lineup-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.68rem;
    font-weight: 700;
    border-bottom: 1px solid transparent;
    padding-bottom: 2px;
    margin-bottom: 4px;
    /* Hidden by default so the row is "just the logos"; the arrow fades in on
       hover to signal each logo links through to its brand page. */
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.4s var(--transition-smooth), transform 0.4s var(--transition-smooth), color 0.4s, border-color 0.4s;
}
.lineup-item:hover .lineup-link { opacity: 1; transform: translateY(0); }
.lineup-link i { transition: transform 0.35s var(--transition-smooth); color: var(--accent-warm); }
.lineup-link:hover {
    color: var(--accent-warm);
    border-bottom-color: var(--accent-color);
}
.lineup-link:hover i { transform: translateX(4px); }

/* =========================================================
   Our Mission & Our Vision (homepage + about)
   ========================================================= */
.mission-vision-section {
    padding: 80px 0;
    background: var(--light-bg);
}
.mv-divider {
    position: relative;
    height: 1px;
    background: var(--hairline);
    margin-bottom: 58px;
}
.mv-divider-badge {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 38px;
    height: 38px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
}
.mv-head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 16px;
}
.mv-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    font-size: 1.45rem;
    background: linear-gradient(135deg, #f3f3f3 0%, #e8e8e8 100%);
    border: 1px solid #e2e2e2;
}
.mv-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 1.7rem);
    font-weight: 700;
    color: var(--primary-color);
    margin: 0;
    line-height: 1.1;
}
.mv-text {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.85;
    margin: 0;
    padding-left: 72px; /* align under the title, past the icon */
}
@media (max-width: 575.98px) {
    .mission-vision-section { padding: 56px 0; }
    .mv-head { gap: 14px; }
    .mv-text { padding-left: 0; }
}

/* =========================================================
   General Sections
   ========================================================= */
.section-padding { padding: 110px 0; position: relative; }
@media (max-width: 768px) { .section-padding { padding: 70px 0; } }

.section-title { text-align: center; margin-bottom: 60px; position: relative; }
.section-title .eyebrow {
    display: inline-block;
    color: var(--accent-color);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    margin-bottom: 14px;
}
.section-title h2 {
    font-size: clamp(1.8rem, 3.2vw, 2.7rem);
    margin-bottom: 18px;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.section-title .divider {
    height: 3px;
    width: 60px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-soft));
    margin: 0 auto;
    border-radius: 2px;
    position: relative;
}
.section-title .divider::before, .section-title .divider::after {
    content: '';
    position: absolute;
    top: 50%; transform: translateY(-50%);
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--accent-color);
}
.section-title .divider::before { left: -14px; }
.section-title .divider::after { right: -14px; }

/* Decorative section background blobs */
.section-with-blob { position: relative; overflow: hidden; }
.section-with-blob::before {
    content: '';
    position: absolute;
    width: 520px; height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(0, 0, 0,0.14) 0%, transparent 70%);
    top: -240px; right: -220px;
    z-index: 0;
    pointer-events: none;
}
.section-with-blob > * { position: relative; z-index: 1; }

/* =========================================================
   About — Layered image frame
   ========================================================= */
.about-visual {
    position: relative;
    padding: 0 0 40px 40px;
}
.about-visual::before {
    /* Offset gold gradient frame */
    content: '';
    position: absolute;
    top: 40px; left: 0; bottom: 0; right: 40px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-warm) 100%);
    border-radius: 12px;
    z-index: 0;
    transition: all 0.6s var(--transition-smooth);
}
.about-visual:hover::before { top: 30px; left: -10px; bottom: 10px; right: 50px; }
.about-visual::after {
    /* Decorative grid pattern in background */
    content: '';
    position: absolute;
    top: -20px; left: -20px;
    width: 120px; height: 120px;
    background-image: radial-gradient(rgba(30,58,95,0.25) 1.5px, transparent 1.5px);
    background-size: 16px 16px;
    z-index: 0;
    opacity: 0.5;
}
.about-visual img {
    position: relative;
    z-index: 1;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: var(--shadow-lg);
}
.about-visual .about-badge {
    position: absolute;
    bottom: 0; right: 0;
    background: #fff;
    padding: 22px 28px;
    border-radius: 14px;
    box-shadow: var(--shadow-md);
    z-index: 3;
    display: flex;
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(0, 0, 0, 0.2);
}
.about-visual .about-badge .badge-icon {
    width: 48px; height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-warm));
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.1rem;
    box-shadow: var(--shadow-gold);
}
.about-visual .about-badge .badge-text strong {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-style: normal;
    font-size: 1.6rem;
    color: var(--primary-color);
    line-height: 1;
}
.about-visual .about-badge .badge-text span {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-muted);
    font-weight: 600;
}

/* About copy side */
.about-copy h2 { font-size: clamp(2rem, 3.5vw, 2.8rem); line-height: 1.15; margin-bottom: 22px; }
.about-copy .about-divider {
    width: 60px; height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-warm));
    margin-bottom: 28px;
    border-radius: 2px;
}
.about-copy .about-features {
    list-style: none;
    padding: 0;
    margin: 26px 0 30px;
}
.about-copy .about-features li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: 0.95rem;
    color: var(--text-dark);
    font-weight: 500;
}
.about-copy .about-features li i {
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-warm);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 0.7rem;
    flex-shrink: 0;
}

@media (max-width: 991px) {
    .about-visual { padding: 0 0 30px 20px; }
    .about-visual .about-badge { bottom: -10px; right: 10px; padding: 16px 20px; }
}

/* =========================================================
   Our Journey — Light Horizontal Marquee Timeline
   ========================================================= */
.journey-section {
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-tint) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--light-bg-2) 100%);
    position: relative;
    overflow: hidden;
    padding-top: 50px;
    padding-bottom: 54px; /* room for the road */
}
.journey-section .section-title .eyebrow {
    color: var(--accent-warm);
}
.journey-section .section-title h2 {
    color: var(--primary-color);
}
.journey-section .section-title h2 .display-serif {
    color: var(--secondary-color);
}
.journey-section .section-title .text-muted {
    color: var(--text-muted) !important;
}
.journey-section .divider {
    background: linear-gradient(90deg, var(--accent-color), var(--accent-warm));
}

/* Marquee wrapper — full bleed with edge fades */
.journey-marquee-wrapper {
    position: relative;
    width: 100%;
    overflow: hidden;
    padding: 16px 0 10px;
}
.journey-marquee-wrapper::before,
.journey-marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 100px;
    z-index: 3;
    pointer-events: none;
}
.journey-marquee-wrapper::before {
    left: 0;
    background: linear-gradient(90deg, #ffffff, transparent);
}
.journey-marquee-wrapper::after {
    right: 0;
    background: linear-gradient(-90deg, #ffffff, transparent);
}

/* The scrolling track */
.journey-marquee {
    display: flex;
    width: fit-content;
    animation: journeyScroll 45s linear infinite;
    gap: 0;
    align-items: flex-start;
}
.journey-marquee:hover {
    animation-play-state: paused;
}

@keyframes journeyScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* Each milestone */
.journey-milestone {
    position: relative;
    flex-shrink: 0;
    width: 280px;
    padding: 42px 28px 18px;
    text-align: left;
}

/* Horizontal connector line through the dots */
.milestone-connector {
    position: absolute;
    top: 24px;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, var(--accent-color), rgba(0,0,0,0.08));
}

/* Dot on the line */
.milestone-dot {
    position: absolute;
    top: 17px;
    left: 28px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid var(--accent-color);
    z-index: 2;
    transition: all 0.4s var(--transition-smooth);
    box-shadow: 0 0 0 4px rgba(196, 164, 105, 0.15);
}
.journey-milestone:hover .milestone-dot {
    background: var(--accent-color);
    box-shadow: 0 0 0 8px rgba(196, 164, 105, 0.2);
    transform: scale(1.25);
}

/* Year */
.milestone-year {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 2.4rem;
    font-weight: 900;
    /* Always highlighted / active (previously only darkened on hover) */
    color: var(--primary-color);
    line-height: 1;
    margin-bottom: 8px;
    letter-spacing: -0.02em;
    transition: color 0.4s var(--transition-smooth), transform 0.4s var(--transition-smooth);
}
.journey-milestone:hover .milestone-year {
    color: #000;
    transform: scale(1.04);
}

/* Title */
.journey-milestone h4 {
    font-size: 0.92rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--primary-color);
    margin-bottom: 8px;
    line-height: 1.3;
}

/* Description */
.journey-milestone p {
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.6;
    margin: 0;
}

/* ----- Immersive "Driving Through Time" Cityscape ----- */

/* Gradient sky — warm dawn on left fading to bright present on right */
.journey-sky {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: linear-gradient(
        180deg,
        rgba(237, 226, 208, 0.35) 0%,
        rgba(245, 240, 230, 0.2) 40%,
        transparent 70%
    );
    pointer-events: none;
}

/* ---- Scrolling Cityscape Silhouettes ---- */
.journey-cityscape {
    position: absolute;
    bottom: 48px; /* sit above road */
    left: 0;
    width: 100%;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* Far city layer — smaller, slower, lighter */
.journey-cityscape--far {
    height: 80px;
    opacity: 0.06;
}
.journey-cityscape--far::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        /* Building shapes using gradients */
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 40px,
            var(--primary-color) 40px,
            var(--primary-color) 52px,
            transparent 52px,
            transparent 70px,
            var(--primary-color) 70px,
            var(--primary-color) 88px,
            transparent 88px,
            transparent 110px,
            var(--primary-color) 110px,
            var(--primary-color) 120px,
            transparent 120px,
            transparent 160px,
            var(--primary-color) 160px,
            var(--primary-color) 180px,
            transparent 180px,
            transparent 200px,
            var(--primary-color) 200px,
            var(--primary-color) 214px,
            transparent 214px,
            transparent 250px
        );
    background-size: 250px 100%;
    background-position: bottom;
    mask-image: linear-gradient(
        0deg,
        #000 0%,
        #000 30%,
        transparent 50%,
        transparent 100%
    ),
    repeating-linear-gradient(90deg,
        transparent 0px,
        transparent 40px,
        #000 40px, #000 52px,
        transparent 52px, transparent 70px,
        #000 70px, #000 88px,
        transparent 88px, transparent 110px,
        #000 110px, #000 120px,
        transparent 120px, transparent 160px,
        #000 160px, #000 180px,
        transparent 180px, transparent 200px,
        #000 200px, #000 214px,
        transparent 214px, transparent 250px
    );
    mask-size: 100% 100%, 250px 100%;
    mask-composite: intersect;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 30%, transparent 60%);
    -webkit-mask-size: 100% 100%;
    animation: cityScrollFar 60s linear infinite;
}

/* Near city layer — taller, faster, darker */
.journey-cityscape--near {
    height: 60px;
    opacity: 0.04;
}
.journey-cityscape--near::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    background:
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 30px,
            var(--primary-color) 30px,
            var(--primary-color) 42px,
            transparent 42px,
            transparent 80px,
            var(--primary-color) 80px,
            var(--primary-color) 102px,
            transparent 102px,
            transparent 130px,
            var(--primary-color) 130px,
            var(--primary-color) 145px,
            transparent 145px,
            transparent 190px,
            var(--primary-color) 190px,
            var(--primary-color) 210px,
            transparent 210px,
            transparent 240px
        );
    background-size: 240px 100%;
    background-position: bottom;
    -webkit-mask-image: linear-gradient(0deg, #000 0%, #000 40%, transparent 70%);
    -webkit-mask-size: 100% 100%;
    animation: cityScrollNear 35s linear infinite;
}

@keyframes cityScrollFar {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}
@keyframes cityScrollNear {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Scrolling Trees / Poles ---- */
.journey-trees {
    position: absolute;
    bottom: 48px;
    left: 0;
    width: 100%;
    height: 45px;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}
.journey-trees::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 200%;
    height: 100%;
    /* Repeating tree-trunk + canopy shapes */
    background:
        /* Trunks — thin vertical bars */
        repeating-linear-gradient(90deg,
            transparent 0px,
            transparent 148px,
            rgba(90, 75, 55, 0.12) 148px,
            rgba(90, 75, 55, 0.12) 151px,
            transparent 151px,
            transparent 300px
        ),
        /* Canopy blobs — wider rounded shapes using radial */
        radial-gradient(ellipse 22px 18px at 150px 10px, rgba(90, 110, 70, 0.08) 70%, transparent 71%),
        radial-gradient(ellipse 18px 14px at 450px 12px, rgba(90, 110, 70, 0.06) 70%, transparent 71%);
    background-size: 300px 100%, 300px 100%, 300px 100%;
    background-position: bottom;
    animation: treesScroll 20s linear infinite;
}
@keyframes treesScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ---- Road ---- */
.journey-road {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 54px;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}
/* Road surface */
.road-surface {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(60, 60, 60, 0.07) 0%,
        rgba(50, 50, 50, 0.10) 35%,
        rgba(50, 50, 50, 0.10) 65%,
        rgba(60, 60, 60, 0.07) 100%
    );
}
/* Top and bottom road edges — solid lines */
.road-edge {
    position: absolute;
    left: 0;
    right: 0;
    height: 3px;
}
.road-edge--top {
    top: 0;
    background: rgba(196, 164, 105, 0.3);
}
.road-edge--bottom {
    bottom: 0;
    background: rgba(196, 164, 105, 0.2);
}
/* Center dashes — animated */
.road-dashes {
    position: absolute;
    top: 50%;
    left: 0;
    width: 200%;
    height: 3px;
    transform: translateY(-50%);
    background: repeating-linear-gradient(
        90deg,
        rgba(196, 164, 105, 0.45) 0px,
        rgba(196, 164, 105, 0.45) 45px,
        transparent 45px,
        transparent 90px
    );
    animation: roadDash 1.8s linear infinite;
}
@keyframes roadDash {
    0%   { transform: translateY(-50%) translateX(0); }
    100% { transform: translateY(-50%) translateX(-90px); }
}

/* CTA Button on the road */
.journey-road-cta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 54px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none; /* Let road be visible/clickable around it */
}
.journey-road-cta .btn-luxury-dark {
    pointer-events: auto;
    padding: 8px 24px;
    font-size: 0.75rem;
    background: #111;
    color: #fff;
    border: 1px solid rgba(196, 164, 105, 0.4);
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    border-radius: 4px;
    transition: all 0.3s ease;
}
.journey-road-cta .btn-luxury-dark:hover {
    background: #fff;
    color: #111;
    border-color: #111;
    transform: translateY(-2px);
}

/* Mobile */
@media (max-width: 767.98px) {
    .journey-milestone {
        width: 240px;
        padding: 46px 22px 22px;
    }
    .milestone-year {
        font-size: 1.8rem;
    }
    .journey-marquee-wrapper::before,
    .journey-marquee-wrapper::after {
        width: 40px;
    }
    .journey-cityscape,
    .journey-trees {
        display: none;
    }
    .journey-road {
        height: 40px;
    }
}

/* =========================================================
   Stats Strip — bright cream band
   ========================================================= */
.stats-strip {
    background:
        radial-gradient(ellipse 50% 60% at 50% 50%, var(--accent-tint) 0%, transparent 70%),
        linear-gradient(135deg, var(--light-bg-2) 0%, var(--light-bg-2) 100%);
    padding: 90px 0;
    position: relative;
    overflow: hidden;
    color: var(--primary-color);
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}
.stats-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(0, 0, 0, 0.12) 1px, transparent 1px);
    background-size: 26px 26px;
    opacity: 0.6;
    mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    -webkit-mask-image: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
    pointer-events: none;
}
.stats-strip .container { position: relative; z-index: 1; }
.stat-item {
    text-align: center;
    padding: 28px 18px;
    position: relative;
    transition: transform 0.5s var(--transition-smooth);
}
.stat-item:hover { transform: translateY(-6px); }
.stat-item:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0; top: 30%; bottom: 30%;
    width: 1px;
    background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.18), transparent);
}
@media (max-width: 991px) { .stat-item:not(:last-child)::after { display: none; } }
.stat-item .stat-number {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(3rem, 5vw, 4.4rem);
    font-weight: 700;
    font-style: normal;
    color: var(--primary-color);
    line-height: 1;
    display: inline-block;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--accent-warm) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.stat-item .stat-suffix {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(2rem, 3vw, 2.8rem);
    color: var(--accent-color);
    margin-left: 2px;
    font-weight: 700;
}
.stat-item .stat-label {
    margin-top: 14px;
    color: var(--primary-color);
    font-size: 0.78rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    font-weight: 600;
}
.stat-item .stat-divider {
    width: 36px; height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-warm));
    margin: 16px auto 0;
    border-radius: 2px;
}

/* =========================================================
   Expertise Lineup — Silver Motors-style rows
   ========================================================= */
.expertise-lineup {
    background: #ffffff;
    padding: 0;
    overflow: hidden;
    position: relative;
    border-bottom: 1px solid #E3E3E3;
}

/* Individual Row */
.car-row {
    display: flex;
    width: 100%;
    min-height: 540px;
    background-color: #ffffff;
    border-top: 1px solid #E3E3E3;
}
.car-row:first-child {
    border-top: none;
}

/* Image Column (60% width) */
.car-image {
    flex: 0 0 60%;
    position: relative;
    overflow: hidden;
    clip-path: polygon(0 0, 100% 0, 90% 100%, 0 100%);
    z-index: 1;
}

/* Reverse Image Column (60% width, slanting leftwards) */
.reverse .car-image {
    clip-path: polygon(10% 0, 100% 0, 100% 100%, 0 100%);
}

/* Background Zoom Element */
.car-image-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 1.2s var(--transition-smooth);
    z-index: 1;
}
.car-row:hover .car-image-bg {
    transform: scale(1.04);
}

/* Specific background images for components */
.tostem-img {
    /* TOSTEM Aluminium Windows hero — interior with floor-to-ceiling sliding
       windows opening to a terrace, showcasing the windows category. */
    background-image: url('../images/carousel/tostem_front/hero_03.jpg');
}
.facade-img {
    background-image: url('../images/facade.jpg');
}
.hunter-douglas-img {
    background-image: url('../images/hunter_douglas_ceiling.jpg');
}

/* Dark Cinematic Gradient Overlay */
.car-image .overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.75) 0%, rgba(0, 0, 0, 0) 65%);
    opacity: 0;
    transition: opacity 0.4s var(--transition-smooth);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 40px;
    z-index: 2;
}
.car-row:hover .overlay {
    opacity: 1;
}

/* Content Column (40% width) */
.car-content {
    flex: 0 0 40%;
    background-color: #ffffff;
    z-index: 2;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: background-color 0.4s var(--transition-smooth);
}

/* Typography inside Content */
.car-content .lineup-brand-tag {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 4px;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secondary-color);
    margin-bottom: 12px;
}
.car-content h2 {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.8rem, 2.8vw, 2.3rem);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: -0.015em;
    color: var(--primary-color);
    line-height: 1.1;
    margin-bottom: 16px;
}
.car-content p.lead {
    font-size: 0.98rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin-bottom: 24px;
    font-weight: 400;
}

/* Specifications Grid */
.specs-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 24px;
    margin-bottom: 30px;
}
.spec-item {
    font-size: 0.84rem;
    color: var(--primary-color);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    letter-spacing: 0.5px;
}
.spec-item i {
    color: var(--secondary-color);
    font-size: 0.9rem;
    width: 16px;
    text-align: center;
}

/* Monochrome Outline CTA Buttons */
.btn-lineup-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--primary-color);
    background-color: transparent;
    color: var(--primary-color);
    padding: 11px 26px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: var(--border-radius);
    text-decoration: none;
    transition: all 0.3s var(--transition-smooth);
}
.btn-lineup-outline:hover {
    background-color: var(--primary-color);
    color: #ffffff;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Responsive Styles for Tablet & Mobile */
@media (max-width: 991.98px) {
    .car-row,
    .reverse.car-row {
        flex-direction: column !important;
        border-top: 1px solid #E3E3E3;
    }
    .car-row:first-child {
        border-top: none;
    }
    
    .car-image {
        flex: 1 1 auto;
        width: 100% !important;
        min-height: 350px;
        clip-path: none !important;
        order: 1 !important;
    }
    
    .car-content {
        flex: 1 1 auto;
        width: 100% !important;
        padding: 40px 30px 48px 30px !important;
        text-align: center !important;
        align-items: center !important;
        order: 2 !important;
    }
    
    .specs-grid {
        justify-content: center !important;
    }
    
    .car-content .d-flex {
        justify-content: center !important;
        width: 100%;
    }
    
    /* Keep overlay buttons visible for touch devices */
    .car-image .overlay {
        opacity: 1 !important;
        background: linear-gradient(to top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0) 70%);
        padding-bottom: 25px;
    }
}

/* =========================================================
   Process / Workflow — premium grid
   ========================================================= */
.about-section-home {
    background:
        radial-gradient(ellipse 70% 60% at 50% 0%, var(--accent-tint) 0%, transparent 55%),
        linear-gradient(180deg, #ffffff 0%, var(--light-bg-2) 100%);
    position: relative;
    overflow: hidden;
    padding-top: 80px;
    padding-bottom: 100px;
}
.about-section-home::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.04) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.04) 1px, transparent 1px);
    background-size: 80px 80px;
    mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
    -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 50%, #000 30%, transparent 90%);
    pointer-events: none;
}
.about-section-home > .container { position: relative; z-index: 1; }

.about-home-visual {
    position: relative;
    padding-right: 25px;
    padding-bottom: 25px;
}
.about-swiper {
    position: relative;
    width: 100%;
    height: 420px;
    border-radius: 12px;
}
/* Ensure cards that rotate outside aren't clipped */
.about-swiper.swiper {
    overflow: visible;
}
.about-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-md);
    background-color: #fff;
    width: 100%;
    height: 100%;
}
.about-swiper .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Floating overlay badge */
.about-home-badge {
    position: absolute;
    bottom: 0;
    right: 0;
    background: #ffffff;
    padding: 24px 30px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.05);
    text-align: center;
    z-index: 3;
    animation: floatY 4s ease-in-out infinite;
}
.about-home-badge .badge-num {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: 2.8rem;
    font-weight: 800;
    color: var(--primary-color);
    line-height: 1;
}
.about-home-badge .badge-lbl {
    display: block;
    font-size: 0.72rem;
    text-transform: uppercase;
    font-weight: 700;
    color: var(--secondary-color);
    letter-spacing: 1px;
    margin-top: 6px;
    white-space: nowrap;
}

.about-home-content {
    padding-left: 10px;
}
.about-home-content .eyebrow {
    display: inline-block;
    color: var(--accent-warm);
    letter-spacing: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.about-home-content h2 {
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--primary-color);
}
.about-home-content .lead-text {
    font-size: 1.1rem;
    color: var(--primary-color);
    line-height: 1.6;
    font-weight: 500;
}
.about-home-content .desc-text {
    font-size: 0.95rem;
    color: var(--text-muted);
    line-height: 1.7;
}

/* Highlight Box / Quote block */
.about-highlight-box {
    position: relative;
    padding: 24px 30px;
    background-color: var(--light-bg-2);
    border-left: 3px solid var(--primary-color);
    border-radius: 0 8px 8px 0;
}
.about-highlight-box .highlight-icon {
    position: absolute;
    top: 15px;
    left: 15px;
    font-size: 2rem;
    color: var(--light-bg-3);
    z-index: 0;
    pointer-events: none;
}
.about-highlight-box .highlight-quote {
    position: relative;
    font-size: 0.92rem;
    line-height: 1.6;
    color: var(--primary-color);
    font-style: italic;
    margin: 0;
    z-index: 1;
}

@media (max-width: 991.98px) {
    .about-home-visual {
        padding-right: 0;
        padding-bottom: 0;
        margin-bottom: 40px;
    }
    .about-home-badge {
        bottom: 15px;
        right: 15px;
        padding: 16px 22px;
    }
    .about-home-badge .badge-num {
        font-size: 2.2rem;
    }
    .about-home-content {
        padding-left: 0;
    }
}

/* =========================================================
   Projects Accordion
   ========================================================= */
.projects-accordion {
    display: flex;
    height: 520px;
    gap: 12px;
    width: 100%;
}
.project-card {
    flex: 1;
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    transition: flex 0.7s var(--transition-smooth);
    cursor: pointer;
    box-shadow: var(--shadow-sm);
}
.project-card:hover { flex: 3.2; }
.project-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1s var(--transition-smooth);
}
.project-card:hover img { transform: scale(1.08); }

.project-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(0deg, rgba(0, 0, 0,0.85) 0%, rgba(0, 0, 0,0.15) 50%, transparent 100%);
    z-index: 1;
    opacity: 0.75;
    transition: opacity 0.5s;
}
.project-card:hover::before { opacity: 1; }

.project-card-overlay {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 30px 26px;
    color: #fff;
    z-index: 2;
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.5s var(--transition-smooth) 0.1s;
}
.project-card:hover .project-card-overlay { opacity: 1; transform: translateY(0); }

.project-card-overlay h4 {
    color: #fff;
    margin-bottom: 4px;
    font-size: 1.5rem;
}
.project-card-overlay p {
    color: rgba(255, 255, 255, 0.7);
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.78rem;
    margin: 0;
}

/* Vertical label visible by default on non-hovered cards */
.project-card-label {
    position: absolute;
    top: 26px;
    left: 26px;
    color: #fff;
    z-index: 2;
    font-family: 'Montserrat', sans-serif;
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.72rem;
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    transition: opacity 0.3s;
}
.project-card:hover .project-card-label { opacity: 0; }

@media screen and (max-width: 768px) {
    .projects-accordion { flex-direction: column; height: auto; gap: 12px; }
    .project-card { height: 220px; flex: none; }
    .project-card-overlay { opacity: 1; transform: translateY(0); }
    .project-card-label { display: none; }
}

/* =========================================================
   Marquee (Trusted By)
   ========================================================= */
.marquee-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 30px 0;
    position: relative;
}
.marquee-wrapper::before, .marquee-wrapper::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 120px;
    z-index: 2;
    pointer-events: none;
}
.marquee-wrapper::before { left: 0; background: linear-gradient(90deg, var(--light-bg-2), transparent); }
.marquee-wrapper::after { right: 0; background: linear-gradient(-90deg, var(--light-bg-2), transparent); }

.marquee {
    display: flex;
    width: fit-content;
    animation: marqueeScroll 38s linear infinite;
    gap: 30px;
    margin-bottom: 24px;
}
.marquee.reverse { animation: marqueeScrollReverse 38s linear infinite; }
.marquee:hover, .marquee.reverse:hover { animation-play-state: paused; }

.marquee-item {
    background: #fff;
    padding: 18px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 180px;
    height: 95px;
    flex-shrink: 0;
    transition: all 0.4s var(--transition-smooth);
    border: 1px solid transparent;
}
.marquee-item:hover {
    transform: translateY(-6px) scale(1.04);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}
.marquee-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.4s var(--transition-smooth);
}
.marquee-item:hover img { transform: scale(1.05); }

@keyframes marqueeScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); }
}
@keyframes marqueeScrollReverse {
    0%   { transform: translateX(calc(-50% - 15px)); }
    100% { transform: translateX(0); }
}

/* =========================================================
   Awards
   ========================================================= */
.award-box {
    background: #fff;
    padding: 32px 22px;
    border-radius: 6px;
    text-align: center;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: all 0.45s var(--transition-smooth);
    border: 1px solid #eaeaea;
    position: relative;
    overflow: hidden;
}
.award-box::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--accent-color), var(--accent-soft));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--transition-smooth);
}
.award-box:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
    border-color: var(--accent-color);
}
.award-box:hover::before { transform: scaleX(1); }
.award-box img {
    height: 76px;
    object-fit: contain;
    margin-bottom: 18px;
    transition: transform 0.45s var(--transition-smooth);
}
.award-box:hover img { transform: scale(1.08); }
.award-box h6 { font-size: 0.92rem; margin-bottom: 4px; }

/* =========================================================
   Locations — Premium card grid
   ========================================================= */
.locations-strip {
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    background:
        radial-gradient(ellipse 60% 50% at 50% 0%, var(--accent-tint) 0%, transparent 60%),
        linear-gradient(180deg, #ffffff 0%, var(--light-bg-2) 100%);
}
.locations-strip::before {
    /* Map-paper crosshatch */
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 0, 0, 0.045) 1px, transparent 1px);
    background-size: 60px 60px;
    opacity: 0.6;
    mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 95%);
    -webkit-mask-image: radial-gradient(ellipse 90% 80% at 50% 50%, #000 30%, transparent 95%);
    pointer-events: none;
}
.locations-strip > .container { position: relative; z-index: 1; }

.location-card {
    position: relative;
    background: #fff;
    border-radius: 14px;
    padding: 38px 30px 30px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    transition: all 0.55s var(--transition-smooth);
    border: 1px solid var(--hairline);
    overflow: hidden;
    isolation: isolate;
    display: flex;
    flex-direction: column;
}

/* Giant watermark numeral */
.location-card .loc-number {
    position: absolute;
    top: 14px; right: 18px;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-weight: 700;
    font-style: normal;
    font-size: 6.5rem;
    line-height: 1;
    color: transparent;
    -webkit-text-stroke: 1.5px var(--accent-color);
    opacity: 0.45;
    transition: all 0.6s var(--transition-smooth);
    pointer-events: none;
    z-index: 0;
}
.location-card:hover .loc-number {
    color: var(--accent-color);
    -webkit-text-stroke: 0;
    opacity: 1;
    transform: scale(1.08) rotate(-3deg);
}

/* Gold bottom-accent panel that slides up */
.location-card::before {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--accent-warm), var(--accent-soft), var(--accent-color));
    transform-origin: center;
    transition: height 0.6s var(--transition-smooth);
    z-index: 0;
}
.location-card:hover::before { height: 10px; }

/* Soft top-right glow on hover */
.location-card::after {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 240px; height: 240px;
    background: radial-gradient(circle, rgba(0, 0, 0, 0.22) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.6s var(--transition-smooth);
    z-index: 0;
    pointer-events: none;
}
.location-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.18), 0 0 0 1px var(--accent-color);
    border-color: transparent;
}
.location-card:hover::after { opacity: 1; }

.location-card > * { position: relative; z-index: 1; }

.location-tag {
    display: inline-block;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: var(--accent-tint);
    padding: 6px 14px;
    border-radius: 50px;
    margin-bottom: 26px;
    border: 1px solid rgba(0, 0, 0, 0.35);
    transition: all 0.4s;
}
.location-card:hover .location-tag {
    background: var(--accent-color);
    color: var(--primary-deep);
    border-color: var(--accent-color);
}

.location-pin {
    width: 70px; height: 70px;
    border-radius: 18px;                          /* rounded square — feels modern */
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-warm) 100%);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 24px;
    position: relative;
    box-shadow: var(--shadow-gold);
    transition: all 0.55s var(--transition-bouncy);
}
.location-pin::before {
    /* Pulsing ring */
    content: '';
    position: absolute;
    inset: -6px;
    border: 2px solid var(--accent-color);
    border-radius: 22px;
    opacity: 0;
    transition: opacity 0.4s;
}
.location-card:hover .location-pin {
    transform: rotate(-6deg) scale(1.08);
    border-radius: 24px;
}
.location-card:hover .location-pin::before {
    opacity: 0.5;
    animation: pinPulse 1.6s ease-out infinite;
}
@keyframes pinPulse {
    0%   { opacity: 0.6; inset: -6px; }
    100% { opacity: 0;   inset: -20px; }
}

.location-card h5 {
    font-size: 1.25rem;
    margin-bottom: 8px;
    color: var(--primary-color);
    font-weight: 700;
    letter-spacing: -0.01em;
}
.location-card .location-company {
    font-size: 0.78rem;
    color: var(--accent-warm);
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.location-card address {
    font-style: normal;
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.7;
    margin-bottom: 24px;
    flex-grow: 1;
}

.location-link {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    color: var(--primary-color);
    text-decoration: none;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-top: 1px solid var(--hairline);
    padding-top: 20px;
    margin-top: auto;
    width: 100%;
    transition: all 0.4s var(--transition-smooth);
}
.location-link .arrow-circle {
    width: 32px; height: 32px;
    border-radius: 50%;
    background: var(--accent-tint);
    color: var(--accent-warm);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: all 0.4s var(--transition-smooth);
    margin-left: auto;
}
.location-link:hover { color: var(--accent-warm); border-top-color: var(--accent-color); }
.location-link:hover .arrow-circle {
    background: var(--accent-color);
    color: #fff;
    transform: translateX(4px) rotate(-45deg);
}

@media (max-width: 768px) {
    .locations-strip { padding: 70px 0; }
    .location-card { padding: 32px 26px 24px; }
    .location-card .loc-number { font-size: 5rem; top: 10px; right: 14px; }
}

/* =========================================================
   Footer — dark navy with locations grid (zackle style)
   ========================================================= */
.footer {
    background: #171717;
    color: rgba(255, 255, 255, 0.78);
    padding: 0;
    position: relative;
    overflow: hidden;
    border-top: 3px solid var(--accent-color);
}
.footer::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px);
    background-size: 60px 60px;
    mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 80%);
    -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 50%, rgba(0,0,0,0.6) 0%, transparent 80%);
    pointer-events: none;
}

/* Editorial CTA strip — plain text + outlined button, no big gold pill */
.footer-cta {
    border-top: 1px solid var(--hairline-dark);
    border-bottom: 1px solid var(--hairline-dark);
    padding: 50px 0;
    margin-top: 0;
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 28px;
}
.footer-cta h3 {
    color: #ffffff;
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    margin: 0;
    font-weight: 800;
    letter-spacing: -0.015em;
    line-height: 1.15;
    text-transform: uppercase;
}
.footer-cta .cta-sub {
    color: rgba(255, 255, 255, 0.62);
    font-size: 0.95rem;
    margin: 8px 0 0;
    font-weight: 400;
}
.footer-cta .btn-cta {
    background: #ffffff;
    color: var(--primary-deep);
    padding: 16px 38px;
    border-radius: 50px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-size: 0.78rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    gap: 14px;
    transition: all 0.4s var(--transition-smooth);
    border: 1.5px solid #ffffff;
    white-space: nowrap;
}
.footer-cta .btn-cta:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-3px);
}
.footer-cta .btn-cta i { transition: transform 0.3s; }
.footer-cta .btn-cta:hover i { transform: translateX(5px); }

/* Footer locations — editorial text columns (no cards, no boxes) */
.footer-locations {
    position: relative;
    z-index: 1;
    padding: 90px 0 50px;
    border-bottom: 1px solid var(--hairline-dark);
}
.footer-locations .section-eyebrow {
    display: inline-block;
    color: rgba(255, 255, 255, 0.55);
    text-transform: uppercase;
    letter-spacing: 4px;
    font-size: 0.72rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.footer-locations h2 {
    color: #ffffff;
    font-size: clamp(2rem, 3.2vw, 2.8rem);
    text-transform: uppercase;
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    font-weight: 800;
    line-height: 1.05;
}
.footer-locations .locations-lead {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.95rem;
    max-width: 540px;
    margin-bottom: 50px;
    line-height: 1.7;
}

.footer-loc {
    padding-right: 18px;
    border-left: 2px solid rgba(255, 255, 255, 0.18);
    padding-left: 20px;
    transition: border-color 0.45s var(--transition-smooth);
    height: 100%;
}
.footer-loc:hover { border-left-color: #ffffff; }

.footer-loc .loc-tag {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 600;
    margin-bottom: 10px;
    display: block;
}
.footer-loc h5 {
    color: #ffffff;
    font-size: 1.15rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: -0.01em;
    margin-bottom: 16px;
}
.footer-loc address {
    color: rgba(255, 255, 255, 0.58);
    font-size: 0.88rem;
    line-height: 1.7;
    font-style: normal;
    margin: 0 0 22px;
}
.footer-loc .loc-link {
    color: #ffffff;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    font-weight: 700;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.30);
    transition: all 0.35s var(--transition-smooth);
}
.footer-loc .loc-link i { transition: transform 0.3s; font-size: 0.7rem; }
.footer-loc .loc-link:hover { border-bottom-color: #ffffff; }
.footer-loc .loc-link:hover i { transform: translateX(5px); }

@media (max-width: 768px) {
    .footer-locations { padding: 60px 0 30px; }
    .footer-loc { margin-bottom: 24px; }
}

.footer-main {
    position: relative;
    z-index: 1;
    padding: 60px 0 40px;
}
.footer-main .footer-brand p {
    color: rgba(255, 255, 255, 0.68);
    line-height: 1.75;
    font-size: 0.93rem;
    max-width: 360px;
}

.footer h4 {
    color: #ffffff;
    margin-bottom: 26px;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 3px;
    font-weight: 700;
    position: relative;
    padding-bottom: 14px;
}
.footer h4::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0;
    width: 32px; height: 2px;
    background: #ffffff;
    border-radius: 2px;
}

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 12px; line-height: 1.5; }
.footer-links a {
    color: rgba(255, 255, 255, 0.65);
    text-decoration: none;
    transition: all 0.35s var(--transition-smooth);
    font-size: 0.92rem;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.footer-links a::before {
    content: '';
    width: 0; height: 1px;
    background: #ffffff;
    transition: width 0.35s var(--transition-smooth);
}
.footer-links a:hover { color: #ffffff; }
.footer-links a:hover::before { width: 14px; }

.footer-contact-list { list-style: none; padding: 0; margin: 0; }
.footer-contact-list li {
    margin-bottom: 18px;
    color: rgba(255, 255, 255, 0.72);
    font-size: 0.92rem;
    line-height: 1.65;
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.footer-contact-list li a {
    color: rgba(255, 255, 255, 0.72);
    text-decoration: none;
    transition: color 0.3s ease;
    padding-top: 6px;
}
.footer-contact-list li a:hover {
    color: #ffffff;
}
.footer-contact-list li i {
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    display: inline-flex; align-items: center; justify-content: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.88rem;
    flex-shrink: 0;
    margin-top: 2px;
    transition: all 0.35s;
}
.footer-contact-list li:hover i {
    background: #ffffff;
    color: #000000;
    border-color: #ffffff;
}
.footer-contact-list li span { padding-top: 6px; }

.social-icons a {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px;
    background: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    border-radius: 12px;
    margin-right: 10px;
    text-decoration: none;
    transition: all 0.4s var(--transition-smooth);
    border: 1px solid rgba(255, 255, 255, 0.10);
}
.social-icons a:hover {
    background: #ffffff;
    color: #000000;
    transform: translateY(-4px) rotate(-6deg);
    border-color: #ffffff;
    box-shadow: 0 10px 20px rgba(255, 255, 255, 0.15);
}

.footer-bottom {
    padding: 22px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.40);
    text-align: center;
    font-size: 0.85rem;
    letter-spacing: 0.5px;
    color: rgba(255, 255, 255, 0.55);
    position: relative;
    z-index: 1;
}
.footer-bottom .footer-bottom-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.footer-bottom p { margin: 0; }
.footer-bottom .footer-mini-links { display: flex; gap: 22px; }
.footer-bottom .footer-mini-links a {
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    font-size: 0.85rem;
    transition: color 0.3s;
}
.footer-bottom .footer-mini-links a:hover { color: #ffffff; }

@media (max-width: 768px) {
    .footer-cta {
        padding: 30px 28px;
        text-align: center;
        justify-content: center;
        margin: 60px 18px 0;
    }
    .footer-cta .btn-cta { padding: 14px 28px; }
    .footer-main { padding: 60px 0 30px; }
    .footer-bottom .footer-bottom-row { justify-content: center; }
}

/* =========================================================
   Scroll-reveal animations
   ========================================================= */
.animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--transition-smooth), transform 0.9s var(--transition-smooth);
    will-change: opacity, transform;
}
.animate-on-scroll.visible { opacity: 1; transform: translateY(0); }

[data-aos] {
    opacity: 0;
    transition: opacity 0.9s var(--transition-smooth), transform 0.9s var(--transition-smooth);
    will-change: opacity, transform;
}
[data-aos="fade-up"]    { transform: translateY(50px); }
[data-aos="fade-down"]  { transform: translateY(-50px); }
[data-aos="fade-left"]  { transform: translateX(50px); }
[data-aos="fade-right"] { transform: translateX(-50px); }
[data-aos="zoom-in"]    { transform: scale(0.92); }
[data-aos="fade"]       { transform: none; }

[data-aos].aos-visible { opacity: 1; transform: translate(0,0) scale(1); }

/* Stagger children */
[data-aos-stagger] > * {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s var(--transition-smooth), transform 0.8s var(--transition-smooth);
}
[data-aos-stagger].aos-visible > * { opacity: 1; transform: translateY(0); }
[data-aos-stagger].aos-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-aos-stagger].aos-visible > *:nth-child(2) { transition-delay: 0.15s; }
[data-aos-stagger].aos-visible > *:nth-child(3) { transition-delay: 0.25s; }
[data-aos-stagger].aos-visible > *:nth-child(4) { transition-delay: 0.35s; }
[data-aos-stagger].aos-visible > *:nth-child(5) { transition-delay: 0.45s; }
[data-aos-stagger].aos-visible > *:nth-child(6) { transition-delay: 0.55s; }
[data-aos-stagger].aos-visible > *:nth-child(7) { transition-delay: 0.65s; }
[data-aos-stagger].aos-visible > *:nth-child(8) { transition-delay: 0.75s; }

/* Keyframes */
@keyframes fadeInUp {
    from { opacity: 0; transform: translate(-50%, 20px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translateY(-20px); }
    to   { opacity: 1; transform: translateY(0); }
}
@keyframes heroReveal {
    from { opacity: 0; transform: translateY(28px); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0); filter: blur(0); }
}
@keyframes kenBurns {
    0%   { transform: scale(1) translateX(0); }
    100% { transform: scale(1.12) translateX(-2%); }
}
@keyframes scrollDown {
    0%   { transform: translate(-50%, 0); opacity: 1; }
    100% { transform: translate(-50%, 14px); opacity: 0; }
}
@keyframes floatY {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

/* =========================================================
   Horizontal Timeline (About page)
   ========================================================= */
.timeline-wrapper {
    width: 100%;
    overflow-x: auto;
    padding: 50px 0 30px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-color) #f1f1f1;
}
.timeline-wrapper::-webkit-scrollbar { height: 6px; }
.timeline-wrapper::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 4px; }
.timeline-wrapper::-webkit-scrollbar-thumb { background: var(--accent-color); border-radius: 4px; }

.timeline-horizontal {
    display: flex;
    min-width: max-content;
    padding: 30px 40px;
    gap: 30px;
    align-items: stretch;
    position: relative;
}
.timeline-horizontal::before {
    content: '';
    position: absolute;
    top: 50px;
    left: 40px;
    right: 40px;
    height: 2px;
    background: repeating-linear-gradient(90deg, var(--accent-color) 0 6px, transparent 6px 14px);
    opacity: 0.5;
    z-index: 0;
}

.timeline-item-h {
    width: 320px;
    background: #fff;
    padding: 36px 30px 30px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    position: relative;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    transition: all 0.45s var(--transition-smooth);
    margin-top: 20px;
    border-top: 4px solid var(--accent-color);
    z-index: 1;
}
.timeline-item-h::before {
    content: '';
    position: absolute;
    top: -32px;
    left: 30px;
    width: 18px;
    height: 18px;
    background: var(--accent-color);
    border: 4px solid var(--light-bg);
    border-radius: 50%;
    box-shadow: 0 0 0 4px var(--accent-glow);
    z-index: 2;
}
.timeline-item-h:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-md);
}
.timeline-year-h {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 2rem;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 14px;
    line-height: 1;
}

/* =========================================================
   Contact Page
   ========================================================= */
.contact-card {
    background: #fff;
    padding: 40px;
    border-radius: 6px;
    box-shadow: var(--shadow-sm);
    height: 100%;
    border-top: 3px solid transparent;
    transition: all 0.4s var(--transition-smooth);
    position: relative;
    overflow: hidden;
}
.contact-card::after {
    content: '';
    position: absolute;
    bottom: -50%; right: -50%;
    width: 100%; height: 100%;
    background: radial-gradient(circle, rgba(0, 0, 0,0.08) 0%, transparent 70%);
    transition: all 0.6s;
    pointer-events: none;
}
.contact-card:hover {
    border-top-color: var(--accent-color);
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
}
.contact-card:hover::after { bottom: -30%; right: -30%; }
.contact-card h4 { margin-bottom: 22px; font-size: 1.15rem; text-transform: uppercase; letter-spacing: 1px; }
.contact-card i { color: var(--accent-color); margin-right: 14px; }
.contact-form .form-control {
    padding: 16px 18px;
    border: 1px solid #e3e0d4;
    margin-bottom: 18px;
    background: #fafaf6;
    border-radius: 6px;
    transition: all 0.3s;
    font-size: 0.95rem;
}
.contact-form .form-control:focus {
    border-color: var(--accent-color);
    box-shadow: 0 0 0 4px var(--accent-glow);
    background: #fff;
}

/* =========================================================
   About — Intro / Team
   ========================================================= */
blockquote {
    position: relative;
    background: #fff;
    border-radius: 6px;
}
blockquote::before {
    content: '\201C';
    position: absolute;
    top: -22px;
    left: 18px;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 5rem;
    color: var(--accent-color);
    line-height: 1;
    opacity: 0.4;
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 991px) {
    .nav-link { margin: 4px 0; padding: 10px 0 !important; }
    .navbar-collapse {
        background: rgba(255,255,255,0.98);
        padding: 18px 22px;
        margin-top: 12px;
        border-radius: 8px;
        box-shadow: var(--shadow-md);
    }
    .hero-section .carousel-indicators { bottom: 80px; }
    .expertise-image img { min-height: 320px; }
    .expertise-content-edge { padding: 50px 28px !important; }
    .expertise-row.flex-lg-row-reverse .expertise-content-edge {
        text-align: left !important;
        align-items: flex-start !important;
    }
    .expertise-row.flex-lg-row-reverse .feature-badges {
        justify-content: flex-start !important;
    }
}

@media (max-width: 768px) {
    .hero-section, .carousel-item { min-height: 540px; height: 88vh; }
    .hero-section .carousel-indicators { bottom: 64px; }
    .hero-scroll-indicator { display: none; }
    .hero-content { padding: 0 18px; }
    .hero-content p { letter-spacing: 2px; margin-bottom: 28px; }
    .section-title { margin-bottom: 40px; }
    .stat-item { padding: 12px 6px; }
    .stat-item .stat-divider { margin: 12px auto 0; }
    .timeline-item-h { width: 280px; padding: 30px 24px 24px; }
    .footer { padding: 60px 0 24px; }
    .footer h4 { margin-top: 20px; }
}

@media (max-width: 480px) {
    .hero-content h1 { font-size: 1.9rem; line-height: 1.15; }
    .hero-eyebrow { letter-spacing: 2px; font-size: 0.7rem; }
    .hero-eyebrow::before, .hero-eyebrow::after { width: 22px; }
    .btn-luxury, .btn-luxury-dark { padding: 12px 28px; font-size: 0.75rem; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        transition-duration: 0.01ms !important;
    }
    .carousel-item img, .marquee, .marquee.reverse { animation: none !important; }
}

/* Custom Contact Modal */
.custom-contact-modal .modal-content {
    background-color: #f4f4f4;
    border: none;
    border-radius: 0;
    position: relative;
    padding-top: 15px;
}
.custom-contact-modal .modal-brand-badge {
    position: absolute;
    top: -20px;
    left: 50%;
    transform: translateX(-50%);
    background: #55585b;
    color: #fff;
    padding: 8px 25px;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: 1px;
    z-index: 10;
}
.custom-contact-modal .custom-close {
    position: absolute;
    top: 15px;
    right: 15px;
    opacity: 1;
    font-weight: bold;
    font-size: 1.2rem;
    background: none;
    border: none;
    padding: 0;
    z-index: 15;
}
.custom-contact-modal .custom-close::before {
    content: '\f00d';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    color: #000;
}
.custom-contact-modal .btn-close {
    background: none;
}
.custom-contact-modal .form-control, 
.custom-contact-modal .form-select {
    border-radius: 0;
    border: 1px solid #ddd;
    padding: 12px 15px;
    font-size: 0.95rem;
    background: #fff;
    color: #333;
}
.custom-contact-modal .form-control::placeholder {
    color: #888;
}
.custom-contact-modal .submit-btn {
    border-radius: 0;
    background: #000;
    color: #fff;
    letter-spacing: 1px;
    font-size: 1rem;
    transition: background 0.3s ease;
}
.custom-contact-modal .submit-btn:hover {
    background: #222;
}


/* ==========================================================================
   TOSTEM PRODUCT GRID STYLES
   ========================================================================== */

/* ===== TOSTEM page — brand intro section above the product grid ===== */
.tostem-intro-section {
    background: var(--light-bg);
    padding: 30px 0 50px;
}
.tostem-intro-heading {
    /* Matches the "Premium TOSTEM Aluminium Systems by Hatchway" tagline above
       (Outfit 800, accent-warm gray, no uppercase) via the .display-serif class. */
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.25;
    margin-bottom: 24px;
}
.tostem-intro-body {
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-muted);
    margin-bottom: 18px;
}
.tostem-intro-body:last-child { margin-bottom: 0; }

/* "TEXGUARD" — keep the patented mark slightly emphasized inline */
.texguard-mark {
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .tostem-intro-section { padding: 24px 0 40px; }
    .tostem-intro-heading { font-size: 1.4rem; }
    .tostem-intro-body { font-size: 0.98rem; line-height: 1.7; }
}

.product-grid-section {
    position: relative;
    overflow: hidden;
}

.product-card {
    background: #fff;
    border: 1px solid #eaeaea;
    transition: all 0.4s ease;
    overflow: hidden;
    height: 100%;
    display: flex;
    flex-direction: column;
}

.product-card:hover {
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.08);
    transform: translateY(-5px);
    border-color: transparent;
}

.product-img-wrap {
    overflow: hidden;
    position: relative;
}

.product-img-wrap img {
    width: 100%;
    height: 300px;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.product-card:hover .product-img-wrap img {
    transform: scale(1.05);
}

.product-info {
    padding: 25px 20px;
    background: #fff;
    text-align: center;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-title {
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--primary-color);
    margin: 0;
    letter-spacing: 0.5px;
    font-family: var(--font-primary);
}

/* ===== Product category filter (TOSTEM) ===== */
.product-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 14px;
    margin-bottom: 48px;
}
.product-filter-btn {
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-muted);
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-weight: 600;
    font-size: 1.02rem;
    letter-spacing: 0.2px;
    padding: 11px 26px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    white-space: nowrap;
}
.product-filter-btn:hover { color: var(--primary-color); }
.product-filter-btn.active {
    background: var(--primary-deep);
    color: #fff;
}
.product-filter-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

/* Soft fade re-triggered each time the grid is filtered */
.product-grid.is-filtering .product-item {
    animation: pfFadeIn 0.4s var(--transition-smooth) both;
}
@keyframes pfFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Empty state for categories that don't have products yet */
.product-empty-state {
    text-align: center;
    padding: 60px 24px;
    background: var(--light-bg-2);
    border: 1px dashed #d8d8d8;
    border-radius: 6px;
    margin-top: 8px;
}
.product-empty-state p {
    color: var(--text-muted);
    font-size: 1rem;
    letter-spacing: 0.3px;
    margin: 0;
}

/* ===== Completed Projects — centered-active carousel =====================
   The active (center) slide is full size; its left/right neighbours are
   scaled down + greyed out so they read as context. Click anywhere on a
   slide to open the fullscreen auto-playing gallery modal. */
.completed-projects-section {
    background: #ffffff;
    /* Keep visible so the soft drop-shadow + rounded corners never clip. The
       body already has overflow-x: hidden as a global safety net. */
    overflow: visible;
}
.completed-projects-carousel {
    position: relative;
    padding-bottom: 80px; /* room for the prev/next nav below */
    overflow: visible;
}
.cp-swiper,
.vg-swiper {
    /* Swiper bundle's CSS loads AFTER our style.css and sets
       `.swiper { overflow: hidden }` — which would clip the scaled-up active
       card and its soft drop-shadow. Override with !important and add a
       generous vertical padding so the shadow has room to breathe top + bottom. */
    overflow: visible !important;
    padding: 60px 0 80px !important;
}
.cp-swiper .swiper-wrapper,
.vg-swiper .swiper-wrapper { align-items: center; }
.cp-swiper .swiper-slide,
.vg-swiper .swiper-slide {
    /* Slide-layout width is 38% — combined with the side-scale below, this
       fits three visuals cleanly within the viewport with margin on each edge. */
    width: 38%;
    max-width: 700px;
    transition: transform 0.55s var(--transition-smooth),
                filter 0.55s ease,
                opacity 0.55s ease;
    /* Side slides display at ~55% of their layout box (~21% of viewport);
       active scales slightly up. !important needed because Swiper / Bootstrap
       quietly reset transform. */
    transform: scale(0.55) !important;
    filter: grayscale(1) brightness(0.9);
    opacity: 0.85;
    will-change: transform, filter, opacity;
}
.cp-swiper .swiper-slide-active,
.vg-swiper .swiper-slide-active {
    transform: scale(1.05) !important;
    filter: grayscale(0) brightness(1);
    opacity: 1;
    z-index: 2;
}
.cp-slide-button,
.vg-slide-button {
    display: block;
    width: 100%;
    padding: 0;
    border: 0;
    background: transparent;
    cursor: pointer;
    /* Soft, floating drop shadow (active card) — the "presentable" look */
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.06),
        0 38px 80px rgba(0, 0, 0, 0.18);
    transition: box-shadow 0.55s var(--transition-smooth);
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 16 / 10;
}
.cp-swiper .swiper-slide:not(.swiper-slide-active) .cp-slide-button,
.vg-swiper .swiper-slide:not(.swiper-slide-active) .vg-slide-button {
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 18px 36px rgba(0, 0, 0, 0.10);
}
.cp-slide-button img,
.vg-slide-button img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cp-swiper .swiper-slide-active .cp-slide-button:hover img,
.vg-swiper .swiper-slide-active .vg-slide-button:hover img {
    transform: none;
}

/* Prev / next nav buttons (circular, centered below the carousel) */
.cp-nav {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 18px;
    z-index: 2;
}
.cp-nav-btn {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid #e0e0e0;
    color: var(--primary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s var(--transition-smooth);
    font-size: 0.85rem;
}
.cp-nav-btn:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: scale(1.05);
}
.cp-nav-btn:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 3px;
}
.cp-nav-btn.swiper-button-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

@media (max-width: 991.98px) {
    .cp-swiper .swiper-slide, .vg-swiper .swiper-slide { width: 56%; transform: scale(0.7) !important; }
    .cp-swiper .swiper-slide-active, .vg-swiper .swiper-slide-active { transform: scale(1) !important; }
}
@media (max-width: 575.98px) {
    .cp-swiper .swiper-slide, .vg-swiper .swiper-slide { width: 78%; transform: scale(0.82) !important; }
    .cp-swiper .swiper-slide-active { transform: scale(1) !important; }
    .cp-nav-btn { width: 42px; height: 42px; }
    .cp-slide-button, .vg-slide-button { border-radius: 12px; }
}

/* ===== Fullscreen gallery modal (auto-playing slideshow) =============== */
.cp-gallery-modal .modal-content {
    background: #0a0a0a;
    border: 0;
    border-radius: 0;
    color: #fff;
}
.cp-gallery-modal .modal-dialog {
    margin: 0;
    max-width: 100%;
    height: 100vh;
}
.cp-gallery-swiper {
    width: 100%;
    height: 100%;
    background: #0a0a0a;
}
.cp-gallery-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 30px;
}
.cp-gallery-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
}
.cp-modal-close {
    position: absolute;
    top: 18px;
    right: 22px;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 1.05rem;
}
.cp-modal-close:hover { background: rgba(255, 255, 255, 0.22); }
.cp-gallery-pagination {
    position: absolute;
    bottom: 28px;
    left: 0; right: 0;
    text-align: center;
    z-index: 5;
}
.cp-gallery-pagination .swiper-pagination-bullet {
    background: #fff;
    opacity: 0.45;
    width: 8px; height: 8px;
    margin: 0 4px !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.cp-gallery-pagination .swiper-pagination-bullet-active {
    opacity: 1;
    transform: scale(1.25);
}
.cp-gallery-counter {
    position: absolute;
    top: 24px;
    left: 30px;
    z-index: 5;
    color: rgba(255, 255, 255, 0.7);
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.85rem;
    letter-spacing: 2px;
}
.cp-gallery-counter .cp-current { color: #fff; font-weight: 600; }

/* ===== Factory Infrastructure block (Façade Solutions page) =========== */
.factory-section { background: var(--light-bg); }
.factory-visual {
    background: linear-gradient(135deg, #f4f4f4 0%, #e9e9e9 100%);
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 60px 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 360px;
    box-shadow: 0 24px 50px rgba(0, 0, 0, 0.06);
}
.factory-img {
    max-width: 70%;
    max-height: 240px;
    width: auto;
    height: auto;
    object-fit: contain;
}
.factory-body {
    color: var(--text-muted);
    font-size: 1.02rem;
    line-height: 1.85;
    margin-bottom: 16px;
}
.factory-body:last-child { margin-bottom: 0; }

@media (max-width: 991.98px) {
    .factory-visual { padding: 40px 24px; min-height: 280px; }
}

/* ===== Video Gallery — re-uses the .cp-swiper carousel layout, adds a
   YouTube play-icon overlay and a fullscreen iframe modal ===================== */
.video-gallery-section {
    background: var(--light-bg-2);
    overflow: visible;
}
.video-gallery-carousel {
    position: relative;
    padding-bottom: 80px;
    overflow: visible;
}
.vg-slide-button {
    position: relative;
}
.vg-slide-button img {
    background: #111; /* fallback while loading the YouTube thumbnail */
}
/* Central translucent play-button overlay on each video thumbnail */
.vg-play-icon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #111;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    padding-left: 4px; /* nudge the play triangle visually centered */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    transition: transform 0.45s var(--transition-smooth),
                background 0.3s ease;
    pointer-events: none;
    z-index: 2;
}
.vg-slide-button:hover .vg-play-icon {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
}
.vg-swiper .swiper-slide:not(.swiper-slide-active) .vg-play-icon {
    width: 52px;
    height: 52px;
    font-size: 1rem;
    background: rgba(255, 255, 255, 0.85);
}

/* Video player modal */
.vg-modal .modal-content {
    background: #000;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
}
.vg-modal .modal-dialog {
    max-width: min(1100px, 92vw);
}
.vg-video-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    background: #000;
}
.vg-video-frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.vg-modal-close {
    position: absolute;
    top: -54px;
    right: 0;
    z-index: 10;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    font-size: 1.05rem;
}
.vg-modal-close:hover { background: rgba(255, 255, 255, 0.28); }

@media (max-width: 575.98px) {
    .vg-play-icon { width: 56px; height: 56px; font-size: 1.1rem; }
    .vg-modal-close { top: -46px; width: 38px; height: 38px; }
}

/* ============================================================
   PROJECTS PAGE LAYOUTS — 4 candidates linked from the navbar
   ============================================================ */

/* Shared baseline */
.projects-page { padding-bottom: 80px; }
.ps-empty {
    text-align: center;
    padding: 70px 30px;
    background: linear-gradient(180deg, #f7f7f7 0%, #ececec 100%);
    border-radius: 12px;
    max-width: 700px;
    margin: 40px auto 0;
}
.ps-empty-mark {
    width: 78px; height: 78px;
    margin: 0 auto 20px;
    border-radius: 999px;
    background: #111;
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.3rem;
    letter-spacing: 1px;
}
.ps-empty h3 { font-family: 'Outfit', sans-serif; font-weight: 700; margin-bottom: 8px; color: var(--primary-color); }
.ps-empty p { color: var(--text-muted); margin: 0; }

/* Projects dropdown in the navbar */
.projects-dropdown .projects-dropdown-menu {
    border: 0;
    border-radius: 4px;
    box-shadow: 0 18px 50px rgba(0, 0, 0, 0.14);
    padding: 8px 0;
    background: #fff;
    min-width: 230px;
}
.projects-dropdown .dropdown-item {
    padding: 10px 18px;
    font-size: 0.88rem;
    color: var(--primary-color);
    transition: background 0.2s ease, color 0.2s ease;
}
.projects-dropdown .dropdown-item:hover {
    background: #f5f5f5;
    color: #000;
}

/* ===== LAYOUT 1 — TABS (baseline) ===================================== */
.pt-projects-tabs {
    border: 0;
    border-bottom: 1px solid #ececec;
    margin: 40px 0 30px;
}
.pt-projects-tabs .nav-link {
    border: 0 !important;
    color: #888 !important;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 1rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    padding: 16px 32px !important;
    position: relative;
    background: transparent !important;
}
.pt-projects-tabs .nav-link.active {
    color: var(--primary-color) !important;
}
.pt-projects-tabs .nav-link.active::after {
    content: '';
    position: absolute;
    left: 32px; right: 32px;
    bottom: -1px;
    height: 2px;
    background: var(--primary-color);
}
.pt-card {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}
.pt-card img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.pt-card:hover img { transform: scale(1.04); }

/* L1 mobile: let tabs wrap onto multiple lines with smaller padding */
@media (max-width: 575.98px) {
    .pt-projects-tabs { flex-wrap: wrap; }
    .pt-projects-tabs .nav-link { padding: 12px 16px !important; font-size: 0.78rem; letter-spacing: 1.5px; }
    .pt-projects-tabs .nav-link.active::after { left: 16px; right: 16px; }
}

/* ===== LAYOUT 2 — BRAND SWITCHER with FLIP ============================ */
.ps-switcher {
    position: relative;
    display: flex;
    justify-content: center;
    gap: 60px;
    margin: 60px 0 50px;
    flex-wrap: wrap;
}
.ps-brand {
    border: 0;
    background: transparent;
    padding: 14px 4px 22px;
    cursor: pointer;
    text-align: center;
    position: relative;
    transition: opacity 0.4s var(--transition-smooth), transform 0.4s var(--transition-smooth);
    opacity: 0.4;
}
.ps-brand:hover { opacity: 0.7; }
.ps-brand.is-active {
    opacity: 1;
    transform: translateY(-2px);
}
.ps-brand-name {
    display: block;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 3.2vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--primary-color);
    line-height: 1.1;
}
.ps-brand-meta {
    display: block;
    margin-top: 8px;
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.ps-underline {
    position: absolute;
    bottom: 8px;
    left: 0;
    height: 3px;
    background: var(--primary-color);
    border-radius: 2px;
    transition: left 0.55s var(--transition-smooth), width 0.55s var(--transition-smooth);
    pointer-events: none;
}
.ps-grid-wrap { position: relative; min-height: 400px; }
.ps-grid {
    animation: psGridIn 0.55s var(--transition-smooth) both;
}
@keyframes psGridIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ps-card-col { animation: psCardFlip 0.55s var(--transition-smooth) both; animation-delay: calc(var(--idx, 0) * 60ms); }
@keyframes psCardFlip {
    from { opacity: 0; transform: translateY(30px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.ps-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.10);
    transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s var(--transition-smooth);
}
.ps-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px rgba(0, 0, 0, 0.18); }
.ps-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.ps-card:hover img { transform: scale(1.06); }
.ps-card-meta {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 20px 22px;
    color: #fff;
    background: linear-gradient(to top, rgba(0,0,0,0.78), rgba(0,0,0,0));
    display: flex;
    justify-content: space-between;
    align-items: end;
    pointer-events: none;
}
.ps-card-brand {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}
.ps-card-num {
    font-family: 'Outfit', sans-serif;
    font-size: 0.65rem;
    letter-spacing: 2px;
    opacity: 0.8;
    text-transform: uppercase;
}

/* L2 mobile: stack brand labels vertically; hide the JS underline indicator
   (it would have to leap vertically) and show a static accent line instead. */
@media (max-width: 767.98px) {
    .ps-switcher {
        flex-direction: column;
        align-items: center;
        gap: 22px;
        margin: 40px 0 32px;
    }
    .ps-underline { display: none; }
    .ps-brand { padding: 10px 4px 18px; }
    .ps-brand-name { font-size: clamp(1.5rem, 7vw, 2rem); }
    .ps-brand.is-active::after {
        content: '';
        position: absolute;
        left: 50%; bottom: 6px;
        transform: translateX(-50%);
        width: 50px; height: 3px;
        background: var(--primary-color);
        border-radius: 2px;
    }
}

/* ===== LAYOUT 3 — 3D BRAND STACK COVERFLOW ============================ */
.p3-stack {
    margin: 60px 0 60px;
    perspective: 1500px;
    perspective-origin: center 60%;
    /* Give the section title more breathing room */
}
.p3-stage {
    position: relative;
    height: 500px;
    transform-style: preserve-3d;
    overflow: visible;
}
.p3-card {
    /* Each card sits absolute at the stage center; the data-position attribute
       drives the visible left/center/right transform below. Using
       translate(-50%, -50%) on top:50%/left:50% guarantees the click hit-area
       always matches the visible card position. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(260px, 30vw, 420px);
    aspect-ratio: 4 / 5;
    border: 0;
    padding: 0;
    border-radius: 16px;
    overflow: hidden;
    background: #1a1a1a;
    cursor: pointer;
    transform-origin: center center;
    transform-style: preserve-3d;
    transition: transform 0.7s var(--transition-smooth),
                box-shadow 0.7s var(--transition-smooth),
                filter 0.5s ease,
                opacity 0.5s ease;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.25);
}
.p3-card-img {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.p3-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.35) 40%, rgba(0,0,0,0.05) 75%);
    pointer-events: none;
}
.p3-card-meta {
    position: absolute;
    left: 26px; right: 26px; bottom: 26px;
    color: #fff;
    text-align: left;
    z-index: 2;
}
.p3-card-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    opacity: 0.75;
}
.p3-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.3rem, 2vw, 1.8rem);
    font-weight: 800;
    color: #fff;
    margin: 8px 0 6px;
}
.p3-card-tagline {
    font-size: 0.8rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.8);
}
/* Positions are named (left / center / right) and the click hit-area always
   matches the visible card because we translate around its own center. */
.p3-card[data-position="center"] {
    transform: translate(-50%, -50%) rotateY(0) scale(1);
    filter: none;
    z-index: 3;
    opacity: 1;
}
.p3-card[data-position="left"] {
    transform: translate(-50%, -50%) translateX(-110%) rotateY(28deg) scale(0.78);
    filter: grayscale(0.85) brightness(0.7);
    z-index: 1;
    opacity: 0.85;
}
.p3-card[data-position="right"] {
    transform: translate(-50%, -50%) translateX(110%) rotateY(-28deg) scale(0.78);
    filter: grayscale(0.85) brightness(0.7);
    z-index: 1;
    opacity: 0.85;
}
.p3-card[data-position="left"]:hover,
.p3-card[data-position="right"]:hover {
    filter: grayscale(0.4) brightness(0.92);
}

.p3-grid-wrap { margin-top: 40px; }
.p3-grid-title {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 1.6rem;
    margin-bottom: 24px;
    display: flex;
    align-items: baseline;
    gap: 14px;
}
.p3-grid-count {
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}
.p3-img-card {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 8px 22px rgba(0,0,0,0.10);
    animation: p3CardIn 0.5s var(--transition-smooth) both;
    animation-delay: calc(var(--idx, 0) * 50ms);
}
.p3-img-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.p3-img-card:hover img { transform: scale(1.06); }
@keyframes p3CardIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

/* Mobile: drop the 3D coverflow — stack the cards vertically. Much easier to
   tap and read on small screens; the dramatic effect doesn't translate well. */
@media (max-width: 767.98px) {
    .p3-stack { perspective: none; margin: 30px 0; }
    .p3-stage {
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 14px;
    }
    .p3-card {
        position: relative;
        top: auto; left: auto;
        width: 100%;
        aspect-ratio: 16 / 9;
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
    .p3-card:not([data-position="center"]) { opacity: 0.7 !important; }
}

/* ===== LAYOUT 4 — VERTICAL BRAND REELS ================================ */
.pr-stack { margin-top: 50px; }
.pr-reel {
    position: relative;
    overflow: hidden;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.pr-reel-header {
    position: relative;
    display: block;
    width: 100%;
    height: 200px;
    border: 0;
    padding: 0;
    background: #1a1a1a;
    cursor: pointer;
    overflow: hidden;
    transition: height 0.6s var(--transition-smooth);
}
.pr-reel.is-open .pr-reel-header { height: 420px; }
.pr-reel-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    transition: transform 8s ease, filter 0.6s ease;
    filter: grayscale(1) brightness(0.45);
    transform: scale(1.05);
}
.pr-reel:hover .pr-reel-bg,
.pr-reel.is-open .pr-reel-bg {
    filter: grayscale(0) brightness(0.7);
    transform: scale(1.1);
}
.pr-reel-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0,0,0,0.65) 0%, rgba(0,0,0,0.35) 50%, rgba(0,0,0,0.55) 100%);
}
.pr-reel-content {
    position: relative;
    z-index: 2;
    padding: 0 60px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #fff;
    text-align: left;
}
.pr-reel-eyebrow {
    font-family: 'Outfit', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    margin-bottom: 12px;
}
.pr-reel-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(2rem, 5vw, 3.6rem);
    font-weight: 800;
    margin: 0 0 8px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: #fff;                    /* Override global heading colour (#111) */
    text-shadow: 0 2px 16px rgba(0, 0, 0, 0.45);
    transition: transform 0.5s var(--transition-smooth);
}
.pr-reel:hover .pr-reel-title { transform: translateX(8px); }
.pr-reel.is-open .pr-reel-title { transform: translateX(0); }
.pr-reel-tagline {
    color: rgba(255,255,255,0.7);
    font-size: 0.95rem;
    letter-spacing: 1px;
}
.pr-reel-chev {
    position: absolute;
    right: 60px; top: 50%;
    transform: translateY(-50%);
    font-size: 1.2rem;
    transition: transform 0.5s var(--transition-smooth);
}
.pr-reel.is-open .pr-reel-chev { transform: translateY(-50%) rotate(180deg); }

.pr-reel-body {
    max-height: 0;
    overflow: hidden;
    background: #fff;
    transition: max-height 0.7s var(--transition-smooth), padding 0.5s ease;
    padding: 0 0;
}
.pr-reel.is-open .pr-reel-body {
    max-height: 5000px;
    padding: 50px 0 70px;
}
.pr-img-card {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 4 / 3;
    box-shadow: 0 10px 28px rgba(0,0,0,0.10);
    cursor: pointer;
}
/* The animation used to fire on page load with a per-card delay (up to
   ~5s for 65 cards), which made cards inside closed reels appear blank
   when later opened and the first reel feel slow. Trigger it instead
   when a reel actually opens — instant feedback and the cap is the
   delay of the last card in the visible reel. */
.pr-reel.is-open .pr-img-card {
    animation: prCardIn 0.55s var(--transition-smooth) both;
    animation-delay: calc(var(--idx, 0) * 40ms + 80ms);
}
.pr-img-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.7s ease; }
.pr-img-card:hover img { transform: scale(1.06); }
.pr-img-num {
    position: absolute;
    top: 16px; right: 18px;
    background: rgba(255,255,255,0.92);
    color: #111;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.7rem;
    letter-spacing: 2px;
    padding: 4px 10px;
    border-radius: 4px;
}
@keyframes prCardIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 767.98px) {
    .pr-reel-header { height: 150px; }
    .pr-reel.is-open .pr-reel-header { height: 280px; }
    .pr-reel-content { padding: 0 24px; }
    .pr-reel-chev { right: 24px; font-size: 1rem; }
    .pr-reel-eyebrow { font-size: 0.65rem; letter-spacing: 2px; }
    .pr-reel.is-open .pr-reel-body { padding: 30px 0 40px; }
}

/* ============================================================
   BLOGS — listing and article-detail pages
   ============================================================ */

.blogs-page { padding-bottom: 100px; }

/* Featured (hero) article — large 2-column layout */
.blog-featured-wrap { margin: 60px auto; }
.blog-featured {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 0;
    text-decoration: none !important;
    border-radius: 14px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 18px 60px rgba(0, 0, 0, 0.08);
    transition: transform 0.45s var(--transition-smooth),
                box-shadow 0.45s var(--transition-smooth);
}
.blog-featured:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 80px rgba(0, 0, 0, 0.16);
}
.blog-featured-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.blog-featured-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1s ease;
}
.blog-featured:hover .blog-featured-img img { transform: scale(1.05); }
.blog-featured-body {
    padding: 48px 52px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.blog-featured-title {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.25;
    margin: 14px 0 16px;
    transition: color 0.3s ease;
}
.blog-featured:hover .blog-featured-title { color: #000; }
.blog-featured-excerpt {
    color: var(--text-muted);
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 22px;
}

/* Category pill */
.blog-pill {
    display: inline-block;
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.66rem;
    letter-spacing: 2.5px;
    text-transform: uppercase;
    color: var(--primary-color);
    background: #f0f0f0;
    border: 1px solid #e6e6e6;
    padding: 5px 12px;
    border-radius: 999px;
}
.blog-pill-light {
    color: #fff;
    background: rgba(255, 255, 255, 0.18);
    border: 1px solid rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(6px);
}

/* Meta line (author · date · read time) */
.blog-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.85rem;
    margin-bottom: 18px;
}
.blog-meta-dot { opacity: 0.5; }
.blog-meta-hero {
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 0;
    margin-top: 26px;
    font-size: 0.95rem;
}

/* Read-more CTA */
.blog-cta {
    display: inline-flex;
    align-items: center;
    color: var(--primary-color);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    transition: gap 0.3s ease, color 0.3s ease;
}
.blog-featured:hover .blog-cta,
.blog-card:hover .blog-cta { color: #000; }
.blog-featured:hover .blog-cta i { transform: translateX(4px); }
.blog-cta i { transition: transform 0.3s ease; }

/* Grid of regular articles */
.blog-grid { padding-top: 10px; }
.blog-card {
    display: flex;
    flex-direction: column;
    text-decoration: none !important;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transition: transform 0.45s var(--transition-smooth),
                box-shadow 0.45s var(--transition-smooth);
    height: 100%;
}
.blog-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.14);
}
.blog-card-img {
    overflow: hidden;
    aspect-ratio: 4 / 3;
}
.blog-card-img img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 0.8s ease;
}
.blog-card:hover .blog-card-img img { transform: scale(1.06); }
.blog-card-body {
    padding: 26px 26px 28px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.blog-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--primary-color);
    margin: 12px 0 12px;
    line-height: 1.35;
    transition: color 0.3s ease;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.blog-card:hover .blog-card-title { color: #000; }
.blog-card-excerpt {
    color: var(--text-muted);
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 18px;
    flex-grow: 1;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== BLOG DETAIL PAGE ============================================ */
.blog-hero {
    min-height: 60vh;
    padding: 180px 0 80px;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    color: #fff;
}
.blog-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.75) 100%);
}
.blog-hero-content {
    position: relative;
    z-index: 2;
    max-width: 900px;
}
.blog-back-link {
    display: inline-flex;
    align-items: center;
    color: rgba(255,255,255,0.85);
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-decoration: none;
    margin-bottom: 30px;
    transition: color 0.3s ease, gap 0.3s ease;
    gap: 8px;
}
.blog-back-link:hover { color: #fff; gap: 12px; }
.blog-hero-title {
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.8rem, 4.4vw, 3.4rem);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.5px;
    margin: 18px 0 0;
    text-shadow: 0 2px 24px rgba(0, 0, 0, 0.5);
}

/* Article body */
.blog-body {
    padding: 80px 0 60px;
    background: #fff;
}
.blog-content {
    font-family: 'Inter', sans-serif;
    font-size: 1.05rem;
    line-height: 1.85;
    color: #333;
}
.blog-content .lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: #1a1a1a;
    font-weight: 500;
    margin-bottom: 32px;
    padding-bottom: 28px;
    border-bottom: 1px solid #ececec;
}
.blog-content h2 {
    font-family: 'Outfit', sans-serif;
    font-size: clamp(1.4rem, 2.6vw, 1.85rem);
    font-weight: 700;
    color: var(--primary-color);
    margin: 50px 0 18px;
    line-height: 1.3;
}
.blog-content h3 {
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    margin: 32px 0 14px;
}
.blog-content p { margin-bottom: 20px; }
.blog-content ul, .blog-content ol {
    margin: 0 0 24px;
    padding-left: 24px;
}
.blog-content li { margin-bottom: 10px; }
.blog-content strong { color: #111; font-weight: 700; }
.blog-content a { color: var(--primary-color); text-decoration: underline; }

/* Article footer — back link + share row */
.blog-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 22px;
    margin-top: 50px;
    padding-top: 36px;
    border-top: 1px solid #ececec;
}
.blog-cta-dark {
    color: #fff;
    background: var(--primary-color);
    padding: 12px 24px;
    border-radius: 4px;
    transition: background 0.3s ease, transform 0.3s ease;
}
.blog-cta-dark:hover { background: #000; color: #fff; transform: translateX(-4px); }
.blog-share {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}
.blog-share-label {
    font-family: 'Outfit', sans-serif;
    font-size: 0.75rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-right: 6px;
}
.blog-share a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px; height: 36px;
    border-radius: 999px;
    border: 1px solid #ddd;
    color: var(--primary-color);
    text-decoration: none;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}
.blog-share a:hover {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

/* Related articles section */
.blog-related-section {
    padding: 80px 0 100px;
    background: linear-gradient(180deg, #fbfaf6 0%, #ffffff 100%);
}

/* Responsive */
@media (max-width: 991.98px) {
    .blog-featured { grid-template-columns: 1fr; }
    .blog-featured-body { padding: 36px 30px; }
}
@media (max-width: 575.98px) {
    .blog-featured-wrap { margin: 40px auto; }
    .blog-featured-body { padding: 28px 22px; }
    .blog-card-body { padding: 22px 22px 26px; }
    .blog-body { padding: 50px 0 40px; }
    .blog-related-section { padding: 60px 0 80px; }
    .blog-footer { flex-direction: column; align-items: flex-start; }
    .blog-content { font-size: 1rem; }
}

/* ===== Editorial product card (TOSTEM products grid) ====================
   Full-bleed image, dark gradient overlay, title always visible. On hover the
   overlay deepens, the category eyebrow fades in, the title scales up, an
   arrow icon slides in from the right, and the whole tile lifts. The card
   itself is a <button> that opens the contact modal — every product is a
   lead-capture surface. */
.product-card-v2 {
    display: block;
    position: relative;
    width: 100%;
    /* Taller card so portrait products read larger; landscape products also
       gain some vertical room without losing the contain (no-crop) behavior. */
    aspect-ratio: 5 / 7;
    overflow: hidden;
    border: 0;
    padding: 0;
    /* Soft cream backing so portrait product photos read cleanly without
       being cropped by object-fit: cover. The dark gradient overlay below
       still drives the title legibility on hover. */
    background: #f4f1ea;
    cursor: pointer;
    text-align: left;
    color: #fff;
    transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s var(--transition-smooth);
    -webkit-tap-highlight-color: transparent;
}
.product-card-v2:hover,
.product-card-v2:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
    outline: none;
}
.product-card-v2:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

/* Image fits the card while always showing the full product — `contain`
   handles both portrait and landscape source crops gracefully. */
.pcv2-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 1.1s var(--transition-smooth), filter 0.5s ease;
    will-change: transform;
}
.product-card-v2:hover .pcv2-img {
    transform: scale(1.06);
}

/* Dark gradient overlay — soft at rest, deeper on hover for legibility */
.pcv2-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 28%,
        rgba(0, 0, 0, 0.05) 55%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: background 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}
.product-card-v2:hover .pcv2-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.6) 45%,
        rgba(0, 0, 0, 0.15) 85%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Title + eyebrow — anchored bottom-left */
.pcv2-meta {
    position: absolute;
    left: 26px;
    right: 70px;
    bottom: 24px;
    transition: transform 0.45s var(--transition-smooth);
}
.product-card-v2:hover .pcv2-meta {
    transform: translateY(-4px);
}
.pcv2-eyebrow {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.04s, transform 0.4s var(--transition-smooth) 0.04s;
}
.product-card-v2:hover .pcv2-eyebrow {
    opacity: 1;
    transform: translateY(0);
}
.pcv2-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.45s var(--transition-smooth);
}

/* Right-aligned arrow chip — only appears on hover */
.pcv2-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-size: 0.8rem;
    opacity: 0;
    transform: translate(8px, 0);
    transition: opacity 0.4s ease 0.1s, transform 0.4s var(--transition-smooth) 0.1s;
    pointer-events: none;
}
.product-card-v2:hover .pcv2-arrow {
    opacity: 1;
    transform: translate(0, 0);
}

/* Placeholder variant — no image, sophisticated gradient + frame */
.product-card-v2.is-placeholder {
    background:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.08), transparent 50%),
        linear-gradient(135deg, #2a2a2a 0%, #111 100%);
}
.product-card-v2.is-placeholder::before {
    content: '';
    position: absolute;
    inset: 18px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}
.product-card-v2.is-placeholder .pcv2-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.5) 0%,
        rgba(0, 0, 0, 0.15) 50%,
        rgba(0, 0, 0, 0) 100%
    );
}

/* Mobile: tighten spacing, ease the arrow size */
@media (max-width: 575.98px) {
    .product-card-v2 { aspect-ratio: 4 / 5; }
    .pcv2-meta { left: 20px; right: 60px; bottom: 20px; }
    .pcv2-arrow { right: 18px; bottom: 18px; width: 34px; height: 34px; }
    .pcv2-eyebrow { letter-spacing: 2px; font-size: 0.62rem; }
}

/* On touch devices, surface the eyebrow/arrow without requiring hover */
@media (hover: none) {
    .pcv2-eyebrow { opacity: 1; transform: translateY(0); }
    .pcv2-arrow { opacity: 1; transform: translate(0, 0); }
}

/* Image-less product cards — clean text-only tile with subtle gradient */
.product-card.product-card-placeholder {
    height: 100%;
    min-height: 290px;
    background:
        linear-gradient(135deg, #f7f7f7 0%, #ececec 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    border: 1px solid #ebebeb;
    position: relative;
}
.product-card.product-card-placeholder::before {
    content: '';
    position: absolute;
    inset: 22px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    pointer-events: none;
}
.product-card.product-card-placeholder .product-info {
    background: transparent;
    padding: 28px 20px;
    position: relative;
    z-index: 1;
}
.product-card.product-card-placeholder .product-title {
    color: var(--accent-warm);
}
.product-card.product-card-placeholder:hover {
    background: linear-gradient(135deg, #f0f0f0 0%, #e2e2e2 100%);
}

/* ===== Key Features & Benefits — appears after the product grid ===== */
.key-features-wrapper {
    margin-top: 60px;
    padding-top: 50px;
    border-top: 1px solid var(--hairline);
}
.key-features-block { display: none; }
.key-features-block.active { display: block; animation: kfFadeIn 0.4s var(--transition-smooth) both; }
@keyframes kfFadeIn {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}
.key-features-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.4rem, 2.2vw, 1.9rem);
    font-weight: 700;
    text-align: center;
    color: var(--primary-color);
    margin-bottom: 40px;
    text-transform: none;
    letter-spacing: 0;
}
.key-features-grid { row-gap: 28px; }
.kf-item {
    padding: 0 24px;
}
.kf-item h5 {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 8px;
    line-height: 1.35;
    position: relative;
    padding-left: 16px;
}
.kf-item h5::before {
    content: '';
    position: absolute;
    left: 0; top: 6px;
    width: 6px; height: 6px;
    background: var(--accent-warm);
    border-radius: 50%;
}
.kf-item p {
    color: var(--text-muted);
    font-size: 0.94rem;
    line-height: 1.7;
    margin: 0;
    padding-left: 16px;
}

@media (max-width: 575.98px) {
    .key-features-wrapper { margin-top: 40px; padding-top: 36px; }
    .key-features-title { margin-bottom: 28px; }
    .key-features-grid { row-gap: 22px; }
    .kf-item { padding: 0 12px; }
}

@media (max-width: 575.98px) {
    .product-filters { gap: 8px; margin-bottom: 34px; }
    .product-filter-btn { font-size: 0.9rem; padding: 9px 16px; }
    .product-empty-state { padding: 40px 18px; }
}

/* Hero Video Styles */
.video-hero-section {
    height: 100vh;
    width: 100%;
    overflow: hidden;
    position: relative;
}

.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    transform: translate(-50%, -50%);
    object-fit: contain;
    z-index: -2;
    background: #000;
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(180deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%);
    z-index: -1;
}


/* Navbar Logo Cool Animation */
.navbar-brand img {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), filter 0.4s ease;
    will-change: transform, filter;
}

.navbar-brand:hover img {
    transform: scale(1.08) rotate(-1deg);
    filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

/* =========================================================
   TOSTEM page — June updates
   ========================================================= */

/* Intro tagline title — matched to the brand-intro heading size */
.tostem-lead-title {
    font-size: clamp(1.5rem, 2.6vw, 2.2rem);
    line-height: 1.25;
}
@media (max-width: 575.98px) {
    .tostem-lead-title { font-size: 1.4rem; }
}

/* ----- What Makes TOSTEM a Leading Brand (TEXGUARD) — full width ----- */
.texguard-section {
    width: 100%;
    background: #f4f4f5;
    overflow: hidden;
}
.texguard-grid {
    display: grid;
    grid-template-columns: minmax(300px, 32%) 1fr;
    align-items: stretch;
    min-height: 580px;
}
.texguard-visual {
    position: relative;
    background: #0b0d10;
    min-height: 320px;
}
.texguard-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 38%;
    display: block;
}
.texguard-content {
    display: flex;
    align-items: center;
    padding: 64px clamp(24px, 5vw, 80px);
}
.texguard-content-inner { width: 100%; max-width: 780px; }
.texguard-head {
    display: flex;
    align-items: center;
    gap: 22px;
    margin-bottom: 26px;
}
.texguard-rule {
    display: block;
    width: 64px;
    height: 2px;
    background: var(--primary-color);
    flex: none;
}
.texguard-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-size: clamp(1.5rem, 2.4vw, 2.15rem);
    line-height: 1.12;
    margin: 0;
    color: var(--primary-color);
}
.texguard-body-row {
    display: flex;
    gap: 44px;
    align-items: flex-start;
    flex-wrap: wrap;
}
.texguard-copy {
    font-size: 1.05rem;
    line-height: 1.8;
    color: var(--text-muted);
    max-width: 460px;
    margin: 0;
    flex: 1 1 320px;
}
.texguard-collage {
    flex: 0 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto auto;
    gap: 12px;
    align-items: center;
}
.texguard-collage figure { margin: 0; }
.tg-badge {
    grid-column: 1;
    grid-row: 1 / 3;
    width: 148px;
}
.tg-badge img { width: 100%; height: auto; display: block; }
.tg-shot {
    width: 132px;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
.tg-shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tg-shot-handle { grid-column: 2; grid-row: 1; height: 112px; }
.tg-shot-window { grid-column: 2; grid-row: 2; }
.texguard-know-more {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-top: 30px;
    padding: 13px 30px;
    background: var(--primary-color);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 0.78rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border-radius: 2px;
    text-decoration: none;
    transition: background 0.3s ease, gap 0.3s ease, transform 0.3s ease;
}
.texguard-know-more:hover { background: var(--accent-warm); color: #fff; gap: 16px; }
.texguard-know-more i { font-size: 0.72rem; }
.texguard-features {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 50px;
}
.tg-feature {
    border: 1px solid #d8d8da;
    background: #fafafa;
    min-height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 16px 14px;
    transition: border-color 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;
}
.tg-feature:hover {
    border-color: var(--primary-color);
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.07);
    transform: translateY(-3px);
}
.tg-feature span {
    font-family: 'Outfit', sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    line-height: 1.35;
    color: var(--primary-color);
}
@media (max-width: 991.98px) {
    .texguard-grid { grid-template-columns: 1fr; min-height: 0; }
    .texguard-visual { min-height: 0; }
    .texguard-visual img { height: auto; object-position: center; }
    .texguard-content { padding: 44px 22px 50px; }
    .texguard-body-row { gap: 30px; }
    .texguard-features { grid-template-columns: repeat(2, 1fr); margin-top: 34px; }
}
@media (max-width: 575.98px) {
    .texguard-title { font-size: 1.5rem; }
    .tg-badge { width: 124px; }
    .tg-shot { width: 112px; }
    .tg-shot-handle { height: 96px; }
    .texguard-copy { flex-basis: 100%; }
}

/* ----- Pre-Engineered Windows ----- */
.pre-eng-section { background: #ffffff; }
.pre-eng-brand {
    /* Renders TOSTEM at the same size + weight as the title that follows,
       so the whole heading reads as "TOSTEM Pre-Engineered Windows". */
    display: block;
    font-family: 'Outfit', sans-serif;
    font-weight: 800;
    letter-spacing: 0;
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    text-transform: none;
    color: var(--primary-color);
    margin-bottom: 0;
}
.pre-eng-title {
    font-size: clamp(1.7rem, 3vw, 2.4rem);
    line-height: 1.15;
    margin: 0 0 4px;
    color: var(--primary-color);
}
.pre-eng-copy {
    font-size: 1.05rem;
    line-height: 1.85;
    color: var(--text-muted);
    margin-top: 22px;
}
.pre-eng-visual img {
    width: 100%;
    height: auto;
    display: block;
}

/* ----- Product carousel (auto-sliding, landscape cards) ----- */
.product-carousel {
    position: relative;
    overflow: hidden;        /* clips off-canvas slides */
    padding: 18px 0 74px;    /* room for the hover lift + the nav below */
}
.product-swiper {
    /* Swiper's bundle CSS sets .swiper{overflow:hidden} after ours — override
       so the card lift + drop-shadow aren't clipped (outer carousel clips the
       horizontal off-canvas slides instead). */
    overflow: visible !important;
}
.product-swiper .swiper-slide { height: auto; }
.product-swiper .product-card-v2 {
    /* Taller card so portrait + landscape product photos both read larger
       inside the carousel. object-fit: contain prevents any cropping. */
    aspect-ratio: 5 / 6;
}

/* =========================================================
   Company-page footer variant — 2 showrooms with bigger white
   headline label, no "Corporate Office / Viman Nagar" sublabel,
   plus email + phone per location.
   ========================================================= */
.footer--company .footer-loc .loc-headline {
    color: #ffffff;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 1.7rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: 0 0 18px;
    line-height: 1.15;
}
.footer--company .footer-loc address { margin-bottom: 16px; }
.footer--company .footer-loc .loc-contact {
    list-style: none;
    padding: 0;
    margin: 0 0 22px;
}
.footer--company .footer-loc .loc-contact li {
    color: rgba(255, 255, 255, 0.78);
    font-size: 0.92rem;
    line-height: 1.7;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.footer--company .footer-loc .loc-contact i {
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.82rem;
    width: 16px;
    text-align: center;
    flex: none;
}
.footer--company .footer-loc .loc-contact a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s;
}
.footer--company .footer-loc .loc-contact a:hover { color: #ffffff; }
@media (max-width: 768px) {
    .footer--company .footer-loc .loc-headline { font-size: 1.4rem; }
}

/* =========================================================
   Façade page tweaks — enlarged intro headline + image-paired
   "Trusted Specialists" section (no longer a flat slab of text).
   ========================================================= */
.intro-headline-xl {
    font-size: clamp(1.9rem, 3.6vw, 3rem) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.5px;
}
.facade-specialists-section { padding: 90px 0; }
.facade-specialists-section .tostem-intro-heading {
    text-align: left;
    margin-bottom: 24px;
}
.facade-specialists-section .tostem-intro-body { text-align: left; }
.facade-specialists-visual {
    position: relative;
    border-radius: 6px;
    overflow: hidden;
    box-shadow: 0 30px 60px -25px rgba(0,0,0,0.35), 0 12px 24px -12px rgba(0,0,0,0.18);
}
.facade-specialists-visual img {
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    transition: transform 1.2s cubic-bezier(.2,.7,.2,1);
}
.facade-specialists-visual:hover img { transform: scale(1.04); }
.facade-specialists-badge {
    position: absolute;
    left: 18px;
    bottom: 18px;
    background: #0a0a0a;
    color: #fff;
    padding: 16px 22px;
    display: inline-flex;
    flex-direction: column;
    border-radius: 4px;
    line-height: 1;
}
.facade-specialists-badge .num {
    font-family: 'Outfit', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.5px;
}
.facade-specialists-badge .num sup {
    font-size: 0.7em;
    color: var(--accent-warm, #c79a55);
    margin-left: 2px;
}
.facade-specialists-badge .lbl {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 2.5px;
    margin-top: 6px;
    color: rgba(255,255,255,0.7);
}
@media (max-width: 991px) {
    .facade-specialists-section { padding: 60px 0; }
    .facade-specialists-section .tostem-intro-heading,
    .facade-specialists-section .tostem-intro-body { text-align: center; }
    .facade-specialists-visual img { aspect-ratio: 16 / 10; }
}

/* =========================================================
   Façade systems — tabbed landscape carousels
   ========================================================= */
.facade-systems-section { background: var(--light-bg, #f7f5f0); }

.fs-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
    margin: 0 auto 36px;
    max-width: 980px;
}
.fs-tab {
    background: #fff;
    border: 1px solid var(--hairline, #e3e3e3);
    color: var(--primary-color, #111);
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.82rem;
    font-weight: 600;
    letter-spacing: 0.4px;
    padding: 11px 20px;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.35s var(--transition-smooth, cubic-bezier(.2,.7,.2,1));
    line-height: 1.1;
}
.fs-tab:hover { border-color: var(--primary-color, #111); transform: translateY(-1px); }
.fs-tab.active {
    background: var(--primary-color, #111);
    color: #fff;
    border-color: var(--primary-color, #111);
    box-shadow: 0 6px 18px -8px rgba(0,0,0,0.45);
}

.fs-panels { position: relative; }
.fs-panel {
    display: none;
    animation: fsFadeIn 0.45s var(--transition-smooth, cubic-bezier(.2,.7,.2,1));
}
.fs-panel.active { display: block; }
@keyframes fsFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Façade systems carousel — TOSTEM-style cards (4:5, 3-up on desktop).
   Important: keep overflow visible on .fs-swiper so the -6px hover lift +
   shadow aren't clipped; the panel itself isn't clipped either. */
.fs-swiper {
    position: relative;
    overflow: visible !important;
    padding-bottom: 8px;
}
.fs-swiper .swiper-slide {
    height: auto;
}
.fs-slide-button {
    /* Tile card — same look as TOSTEM .product-card-v2 */
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: #1a1a1a;
    cursor: pointer;
    text-align: left;
    color: #fff;
    transition: transform 0.5s var(--transition-smooth), box-shadow 0.5s var(--transition-smooth);
    -webkit-tap-highlight-color: transparent;
}
.fs-slide-button:hover,
.fs-slide-button:focus-visible {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(0, 0, 0, 0.22);
    outline: none;
}
.fs-slide-button:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 4px;
}

.fs-slide-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--transition-smooth), filter 0.5s ease;
    will-change: transform;
}
.fs-slide-button:hover .fs-slide-img { transform: scale(1.06); }

.fs-slide-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.78) 0%,
        rgba(0, 0, 0, 0.45) 28%,
        rgba(0, 0, 0, 0.05) 55%,
        rgba(0, 0, 0, 0) 100%
    );
    transition: background 0.4s ease, opacity 0.4s ease;
    pointer-events: none;
}
.fs-slide-button:hover .fs-slide-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.88) 0%,
        rgba(0, 0, 0, 0.6) 45%,
        rgba(0, 0, 0, 0.15) 85%,
        rgba(0, 0, 0, 0) 100%
    );
}

.fs-slide-meta {
    position: absolute;
    left: 26px;
    right: 70px;
    bottom: 24px;
    display: flex;
    flex-direction: column;
    pointer-events: none;
    transition: transform 0.45s var(--transition-smooth);
}
.fs-slide-button:hover .fs-slide-meta { transform: translateY(-4px); }

.fs-slide-eyebrow {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.66rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 6px;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.4s ease 0.04s, transform 0.4s var(--transition-smooth) 0.04s;
}
.fs-slide-button:hover .fs-slide-eyebrow { opacity: 1; transform: translateY(0); }

.fs-slide-title {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.05rem, 1.4vw, 1.3rem);
    font-weight: 700;
    line-height: 1.25;
    color: #fff;
    margin: 0;
    letter-spacing: 0;
    text-shadow: 0 2px 14px rgba(0, 0, 0, 0.35);
    transition: transform 0.45s var(--transition-smooth);
}

.fs-slide-arrow {
    position: absolute;
    right: 22px;
    bottom: 22px;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #111;
    border-radius: 999px;
    font-size: 0.8rem;
    opacity: 0;
    transform: translate(8px, 0);
    transition: opacity 0.4s ease 0.1s, transform 0.4s var(--transition-smooth) 0.1s;
    pointer-events: none;
}
.fs-slide-button:hover .fs-slide-arrow { opacity: 1; transform: translate(0, 0); }

/* Prev / next nav — centered below the carousel, identical to TOSTEM
   .cp-nav.product-nav (uses the shared .cp-nav-btn styles). */
.fs-panel-nav {
    margin-top: 26px;
}

.fs-empty {
    text-align: center;
    padding: 80px 30px;
    background: #fff;
    border: 1px dashed var(--hairline, #e3e3e3);
    border-radius: 8px;
    color: #777;
}

/* On touch devices, surface eyebrow + arrow without requiring hover */
@media (hover: none) {
    .fs-slide-eyebrow { opacity: 1; transform: translateY(0); }
    .fs-slide-arrow { opacity: 1; transform: translate(0, 0); }
}

/* Tabs stay at the original 768px breakpoint (tabs are Façade-specific).
   Card-internal mobile rules align with TOSTEM's .product-card-v2 at 575.98px. */
@media (max-width: 768px) {
    .fs-tab { font-size: 0.74rem; padding: 9px 14px; }
    .fs-tabs { gap: 8px; }
}
@media (max-width: 575.98px) {
    .fs-slide-meta { left: 20px; right: 60px; bottom: 20px; }
    .fs-slide-arrow { right: 18px; bottom: 18px; width: 34px; height: 34px; }
    .fs-slide-eyebrow { letter-spacing: 2px; font-size: 0.62rem; }
}

/* HD navbar logo bump — Hunter Douglas wordmark + icon is small at 26px;
   bump to 40px so it carries weight next to Hatchway. Targets only the HD
   variant; TOSTEM stays at its original size. */
.navbar-brand-cobranded .brand-logo-partner--hd { height: 40px; }
.navbar.scrolled .navbar-brand-cobranded .brand-logo-partner--hd { height: 34px; }
@media (max-width: 991px) {
    .navbar-brand-cobranded .brand-logo-partner--hd { height: 32px; }
}

/* =========================================================
   Awards & Certificates — clickable thumbnail grid + fullscreen
   lightbox modal (reuses Bootstrap modal + Swiper, mirrors the
   existing Project Gallery pattern).
   ========================================================= */
.awards-cert-grid {
    /* Flex (not grid) so a partially-filled last row centers cleanly. */
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-top: 8px;
}
.awards-cert-grid.is-single .awards-cert-card {
    /* Single-cert pages (TOSTEM) get a contained card width instead of
       stretching across the row. */
    flex: 0 1 320px;
}
.awards-cert-card {
    /* Borderless, no cream backing — the full certificate stays visible
       (object-fit: contain) so nothing gets cropped. Card is taller-than-
       wide so portrait + landscape certs both fit comfortably. */
    position: relative;
    background: transparent;
    border: 0;
    border-radius: 4px;
    overflow: visible;
    cursor: pointer;
    padding: 0;
    text-align: center;
    transition: transform 0.45s var(--transition-smooth), filter 0.45s var(--transition-smooth);
    aspect-ratio: 4 / 5;
    display: block;
    flex: 0 0 220px;
}
.awards-cert-card:hover,
.awards-cert-card:focus-visible {
    transform: translateY(-4px);
    outline: none;
}
.awards-cert-card img {
    width: 100%;
    height: 100%;
    object-fit: contain;       /* full image always visible — no cropping */
    object-position: center;
    padding: 0;
    background: transparent;
    /* Drop-shadow filter follows the certificate's actual outline (not the
       card box), so the cert reads as a free-floating object on the page. */
    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.18));
    transition: transform 0.6s var(--transition-smooth), filter 0.6s ease;
}
.awards-cert-card:hover img {
    transform: scale(1.03);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.28));
}
.awards-cert-card:hover img { transform: scale(1.03); }

.awards-cert-zoom {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.35s, transform 0.35s var(--transition-smooth);
    pointer-events: none;
}
.awards-cert-card:hover .awards-cert-zoom,
.awards-cert-card:focus-visible .awards-cert-zoom {
    opacity: 1;
    transform: translateY(0);
}
.awards-cert-caption {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    padding: 14px 16px 12px;
    background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 100%);
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: left;
    pointer-events: none;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.35s, transform 0.35s var(--transition-smooth);
}
.awards-cert-card:hover .awards-cert-caption,
.awards-cert-card:focus-visible .awards-cert-caption {
    opacity: 1;
    transform: translateY(0);
}

/* Fullscreen lightbox (reuses the project-gallery modal styling baseline) */
.awards-lightbox .modal-content {
    background: rgba(0, 0, 0, 0.96);
    border: 0;
    border-radius: 0;
}
.awards-lightbox-close {
    position: absolute;
    top: 22px;
    right: 22px;
    z-index: 10;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.95);
    color: #111;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: all 0.3s;
}
.awards-lightbox-close:hover { background: #fff; transform: scale(1.06); }

.awards-lightbox-swiper {
    height: 100vh;
    width: 100vw;
}
.awards-lightbox-swiper .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 80px 80px 60px;
}
.awards-lightbox-swiper .swiper-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    display: block;
}
.awards-lightbox-caption {
    position: absolute;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-family: 'Outfit', sans-serif;
    font-size: 0.95rem;
    letter-spacing: 0.4px;
    text-align: center;
    z-index: 8;
}
.awards-lightbox-counter {
    position: absolute;
    top: 30px;
    left: 30px;
    color: rgba(255, 255, 255, 0.75);
    font-family: 'Outfit', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 1.5px;
    z-index: 8;
}
.awards-lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: 0;
    background: rgba(255, 255, 255, 0.12);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    z-index: 8;
    transition: all 0.3s;
}
.awards-lightbox-nav:hover { background: rgba(255, 255, 255, 0.22); transform: translateY(-50%) scale(1.06); }
.awards-lightbox-prev { left: 22px; }
.awards-lightbox-next { right: 22px; }

@media (max-width: 768px) {
    .awards-cert-grid { gap: 18px; }
    .awards-cert-card { flex: 0 0 160px; }
    .awards-lightbox-swiper .swiper-slide { padding: 56px 16px 56px; }
    .awards-lightbox-nav { width: 42px; height: 42px; }
    .awards-lightbox-prev { left: 8px; }
    .awards-lightbox-next { right: 8px; }
}

/* =========================================================
   Façade products — full-width per-product hero strips.
   Replaces the previous tabbed carousel; one immersive image
   per product, with overlay text + Enquire CTA. The whole
   strip is a button (opens the Contact modal with product
   context).
   ========================================================= */
.facade-products-section {
    padding: 90px 0 60px;
    background: var(--light-bg, #f7f5f0);
}
.facade-products-section .section-title { margin-bottom: 50px; }

.fp-strip {
    /* Block-level button; positions the image edge-to-edge and
       reserves a 16:5 (cinematic) aspect ratio. */
    display: block;
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 6;
    border: 0;
    padding: 0;
    margin-bottom: 36px;
    background: #1a1a1a;
    overflow: hidden;
    cursor: pointer;
    text-align: left;
    color: #fff;
    transition: transform 0.55s var(--transition-smooth), box-shadow 0.55s var(--transition-smooth);
    -webkit-tap-highlight-color: transparent;
}
.fp-strip:last-child { margin-bottom: 0; }
.fp-strip:hover,
.fp-strip:focus-visible {
    transform: translateY(-4px);
    box-shadow: 0 30px 60px -22px rgba(0,0,0,0.32);
    outline: none;
}
.fp-strip:focus-visible {
    outline: 2px solid var(--primary-color, #111);
    outline-offset: 4px;
}

.fp-strip-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 1.4s var(--transition-smooth);
}
.fp-strip:hover .fp-strip-img { transform: scale(1.04); }

.fp-strip-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.78) 0%,
        rgba(0,0,0,0.55) 35%,
        rgba(0,0,0,0.2) 65%,
        rgba(0,0,0,0.05) 100%
    );
    transition: background 0.4s ease;
    pointer-events: none;
}
.fp-strip:hover .fp-strip-overlay {
    background: linear-gradient(
        to right,
        rgba(0,0,0,0.85) 0%,
        rgba(0,0,0,0.65) 40%,
        rgba(0,0,0,0.25) 75%,
        rgba(0,0,0,0.1) 100%
    );
}

.fp-strip-content {
    position: absolute;
    left: 6%;
    right: auto;
    top: 50%;
    transform: translateY(-50%);
    max-width: 540px;
    pointer-events: none;
}

.fp-strip-eyebrow {
    display: block;
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: 0.72rem;
    letter-spacing: 3.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.78);
    margin-bottom: 14px;
}

.fp-strip-title {
    font-family: 'Outfit', 'Montserrat', sans-serif;
    font-size: clamp(1.6rem, 3.2vw, 2.8rem);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
    color: #fff;
    margin: 0 0 14px;
    text-shadow: 0 4px 22px rgba(0,0,0,0.4);
}

.fp-strip-tagline {
    font-size: 1rem;
    line-height: 1.55;
    color: rgba(255,255,255,0.88);
    margin: 0 0 22px;
    max-width: 480px;
}

.fp-strip-cta {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    border-radius: 999px;
    background: #fff;
    color: #111;
    font-family: 'Outfit', sans-serif;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: transform 0.35s var(--transition-smooth), background 0.3s, color 0.3s;
}
.fp-strip-cta i { transition: transform 0.35s var(--transition-smooth); }
.fp-strip:hover .fp-strip-cta { background: var(--accent-warm, #c79a55); color: #fff; }
.fp-strip:hover .fp-strip-cta i { transform: translateX(5px); }

@media (max-width: 991px) {
    .facade-products-section { padding: 60px 0 40px; }
    .fp-strip { aspect-ratio: 16 / 9; margin-bottom: 24px; }
    .fp-strip-content { left: 6%; right: 6%; max-width: none; }
    .fp-strip-overlay {
        background: linear-gradient(
            to top,
            rgba(0,0,0,0.85) 0%,
            rgba(0,0,0,0.5) 50%,
            rgba(0,0,0,0.15) 100%
        );
    }
    .fp-strip-content { top: auto; bottom: 24px; transform: none; }
    .fp-strip-tagline { font-size: 0.92rem; margin-bottom: 16px; }
    .fp-strip-cta { padding: 10px 18px; font-size: 0.72rem; }
}
@media (max-width: 575.98px) {
    .fp-strip { aspect-ratio: 4 / 5; }
}

/* Dark-backing modifier for client logos whose official source is white-on-
   transparent (Ravetkar Group SVG, Hublikar Constructions PNG, Majestique
   Landmarks PNG). The image's monochrome strokes need a dark backing chip to
   render. */
.marquee-item.is-dark-bg {
    background: #111;
    border-color: #111;
}
.marquee-item.is-dark-bg:hover { border-color: var(--accent-color); }

/* =========================================================
   Brand keyword highlighting — wherever TOSTEM, Hunter Douglas
   or Hatchway appear in body text, they should display in
   their respective brand colour for instant brand recognition.
   ========================================================= */
/* TOSTEM + Hunter Douglas: rendered as plain inline text — no colour or weight
   override so they flow visually with the surrounding copy. The wrapper class
   stays in the markup so it's easy to re-style later. */
.brand-tostem    { color: inherit; font-weight: inherit; letter-spacing: inherit; }
.brand-hd        { color: inherit; font-weight: inherit; letter-spacing: inherit; }
.brand-hatchway  { color: #2D3F5F; font-weight: 700; }
/* Inside dark hero overlays, brand colours shouldn't be lost; lighten the
   navy so it stays visible. Hunter Douglas orange already pops on dark. */

.hero-content .brand-hatchway,
.fp-strip-content .brand-hatchway,
.texguard-section .brand-hatchway,
.fs-slide-meta .brand-hatchway,
.factory-section .brand-hatchway,
.facade-systems-section .brand-hatchway,
.completed-projects-section .brand-hatchway,
.video-gallery-section .brand-hatchway,
.footer .brand-hatchway,
.cp-gallery-modal .brand-hatchway { color: #9BB0D4; }

/* =========================================================
   Satisfied Clients (Façade page) — panel image extracted
   from the 2025 brochure, with 5 clients painted out
   per user request.
   ========================================================= */
.satisfied-clients-section { padding-top: 70px; padding-bottom: 80px; }
.satisfied-clients-wrap {
    max-width: 1200px;
    margin: 30px auto 0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
    box-shadow: 0 25px 60px -25px rgba(0, 0, 0, 0.15), 0 8px 18px -10px rgba(0, 0, 0, 0.08);
    padding: 20px;
}
.satisfied-clients-wrap img {
    display: block;
    width: 100%;
    height: auto;
}
@media (max-width: 768px) {
    .satisfied-clients-wrap { padding: 12px; }
}

/* Make the entire expertise-row image clickable (wraps the background div). */
.car-image .car-image-link {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
}

/* =========================================================
   TOSTEM Product Series — sits below the per-category Key
   Features blocks on tostem.php; always visible regardless
   of the active product category filter.
   ========================================================= */
.tostem-series {
    margin-top: 90px;
    padding-top: 60px;
    border-top: 1px solid var(--hairline, #e3e3e3);
}
.tostem-series-grid {
    margin-top: 12px;
}
.tostem-series-card {
    /* scroll-margin-top puts an air gap above the card when an anchor link
       jumps to it — keeps the card below the sticky navbar. */
    scroll-margin-top: 100px;
    position: relative;
    overflow: hidden;
    border-radius: 6px;
    background: #1a1a1a;
    box-shadow: 0 22px 50px -25px rgba(0, 0, 0, 0.25), 0 8px 18px -10px rgba(0, 0, 0, 0.12);
    transition: transform 0.55s var(--transition-smooth), box-shadow 0.55s var(--transition-smooth);
}
.tostem-series-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 32px 60px -25px rgba(0, 0, 0, 0.32), 0 12px 24px -12px rgba(0, 0, 0, 0.18);
}
.tostem-series-card img {
    display: block;
    width: 100%;
    height: auto;
    aspect-ratio: 12 / 7;
    object-fit: cover;
    transition: transform 1.4s var(--transition-smooth);
}
.tostem-series-card:hover img {
    transform: scale(1.03);
}
@media (max-width: 575.98px) {
    .tostem-series { margin-top: 50px; padding-top: 40px; }
}

/* =========================================================
   YouTube Shorts thumbnails — portrait 9:16 aspect, dark
   YOUR-SHORTS-LIKE backdrop with the red badge overlay.
   ========================================================= */
.vg-slide-button--short {
    /* Shorter portrait ratio (was 9/16) so reels don't tower over the
       landscape video cards in the same carousel row. */
    aspect-ratio: 9 / 12;
    max-height: 340px;
    margin-inline: auto;
}
.vg-slide-short { display: flex; align-items: center; }
.vg-slide-button--short img {
    /* Shorts thumbs from hqdefault are 16:9 with letterboxing; cover-crop
       to fill the portrait frame, centered on the action. */
    object-fit: cover;
    object-position: center;
}
.vg-shorts-badge {
    position: absolute;
    top: 14px;
    left: 14px;
    z-index: 3;
    background: #ff0000;
    color: #fff;
    font-family: 'Outfit', sans-serif;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 1.5px;
    padding: 4px 9px;
    border-radius: 3px;
    text-transform: uppercase;
}

/* =========================================================
   Façade hero carousel — overlay text stays put while images
   cross-fade beneath. Stronger gradient + text-shadow keep
   the white-on-image copy legible even on bright sky shots.
   ========================================================= */
.facade-hero-carousel { position: relative; overflow: hidden; }
.facade-hero-carousel .carousel-inner { height: 100%; }
.facade-hero-carousel .carousel-item { transition: opacity 1s ease-in-out; }
.facade-hero-carousel .carousel-item .hero-overlay {
    /* Diagonal gradient — darker on the side where text sits, fading to
       reveal the image on the opposite side. Works on any slide. */
    background: linear-gradient(
        100deg,
        rgba(0, 0, 0, 0.62) 0%,
        rgba(0, 0, 0, 0.46) 35%,
        rgba(0, 0, 0, 0.20) 70%,
        rgba(0, 0, 0, 0.10) 100%
    );
}
.facade-hero-content {
    /* Sits OUTSIDE .carousel-inner so it doesn't fade with the slides. */
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 0 6%;
    pointer-events: none;
    color: #fff;
}
.facade-hero-content > * { pointer-events: auto; }
.facade-hero-content .hero-eyebrow,
.facade-hero-content h1,
.facade-hero-content p {
    /* Belt-and-braces readability on any slide colour — text shadow keeps
       the copy legible if a slide happens to render mostly white. */
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45);
}
@media (max-width: 768px) {
    .facade-hero-content { padding: 0 5%; }
}

/* =========================================================
   TOSTEM mega menu — 2-column tab pane:
     left  = active category's product list (varies per tab)
     right = shared Our Series block (same across all tabs)
   ========================================================= */
.mega-content-inner--two-col .tab-pane {
    display: none;
}
.mega-content-inner--two-col .tab-pane.active.show,
.mega-content-inner--two-col .tab-pane.show.active {
    display: grid;
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: 28px;
    align-items: start;
}
/* Categories that don't have a "Our Series" right column (Airflow, Interior,
   Car Ports) opt out of the 2-column grid so the products list spans the
   full width instead of leaving an empty 1fr slot. */
.mega-content-inner--two-col .tab-pane.mega-pane--single-col.active.show,
.mega-content-inner--two-col .tab-pane.mega-pane--single-col.show.active {
    grid-template-columns: 1fr;
}
.mega-content-inner--two-col .mega-series-col {
    border-left: 1px solid var(--hairline, #e3e3e3);
    padding-left: 24px;
}
.mega-content-inner--two-col .mega-series-col .mega-content-title {
    /* Subtle differentiation from the products column header */
    color: var(--accent-warm, #6b6b6b);
    letter-spacing: 0.6px;
}
.mega-content-inner--two-col .mega-products-col ul,
.mega-content-inner--two-col .mega-series-col ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
/* Series items use a two-line layout — name on top, tagline below in muted
   grey — instead of the single-line bulleted links used by the products
   column. Each <li> is its own block of breathing room. */
.mega-series-list li {
    margin-bottom: 18px;
}
.mega-series-list li:last-child {
    margin-bottom: 0;
}
.mega-series-list a {
    display: block;
    text-decoration: none;
}
.mega-series-name {
    display: block;
    color: #111;
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.3;
}
.mega-series-tagline {
    display: block;
    color: #888;
    font-weight: 400;
    font-size: 0.85rem;
    line-height: 1.35;
    margin-top: 2px;
}
.mega-series-list a:hover .mega-series-name {
    color: #000;
}
.mega-series-list a:hover .mega-series-tagline {
    color: #555;
}
@media (max-width: 991px) {
    .mega-content-inner--two-col .tab-pane.active.show {
        grid-template-columns: 1fr;
    }
    .mega-content-inner--two-col .mega-series-col {
        border-left: 0;
        border-top: 1px solid var(--hairline, #e3e3e3);
        padding-left: 0;
        padding-top: 16px;
        margin-top: 6px;
    }
}

/* =========================================================
   MOBILE RESPONSIVENESS — fixes for navbar/megamenu overflow,
   video carousels, marquees, and general horizontal scroll.
   Scoped to <992px so desktop is untouched.
   ========================================================= */

/* Global guard against horizontal overflow on every page. */
html, body { overflow-x: hidden; max-width: 100vw; }

@media (max-width: 991.98px) {
    /* ----- Navbar mega-menu — restructure as inline drilldown ----- */
    .mega-dropdown-menu {
        width: 100% !important;
        max-width: 100% !important;
        position: static !important;
        transform: none !important;
        background: #f4f4f4;
        box-shadow: none;
        margin-top: 4px !important;
    }
    .mega-tab-container {
        flex-direction: column;
        min-height: 0;
    }
    /* Brand selector (TOSTEM / Facade / Hunter Douglas) on top */
    .mega-sidebar {
        width: 100%;
        background: #111;
        padding: 6px 0;
        display: flex;
        flex-direction: column;
    }
    .mega-sidebar .nav-link {
        color: #fff !important;
        padding: 12px 18px !important;
        font-size: 0.92rem;
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .mega-sidebar .nav-link:last-child { border-bottom: 0; }
    .mega-sidebar .nav-link.active,
    .mega-sidebar .nav-link:hover {
        background: rgba(255,255,255,0.08) !important;
        color: #fff !important;
    }
    /* Selected brand's content shows below */
    .mega-content {
        width: 100%;
        padding: 0;
        background: #f4f4f4;
    }
    /* Inner: brand subcategories on top, then products */
    .mega-tab-container-inner {
        flex-direction: column;
        min-height: 0;
    }
    .mega-sidebar-inner {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #e0e0e0;
        padding: 0;
        margin: 0;
        background: #fff;
        display: flex;
        flex-wrap: wrap;
    }
    .mega-sidebar-inner .nav-link {
        font-size: 0.85rem;
        padding: 10px 14px !important;
        margin: 4px;
        border-radius: 999px;
        background: #f0f0f0;
        color: #222 !important;
        display: inline-flex;
        width: auto;
        flex: 0 0 auto;
    }
    .mega-sidebar-inner .nav-link .fa-chevron-right { display: none; }
    .mega-sidebar-inner .nav-link.active,
    .mega-sidebar-inner .nav-link:hover {
        background: #111 !important;
        color: #fff !important;
    }
    .mega-content-inner { padding: 14px 18px; }
    /* TOSTEM 2-column pane stacks vertically on mobile */
    .mega-content-inner--two-col .tab-pane.active.show {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .mega-content-inner--two-col .mega-series-col {
        border-left: 0;
        border-top: 1px solid #e0e0e0;
        padding-left: 0;
        padding-top: 14px;
    }

    /* ----- Mobile drilldown: brand → category → product ----- */
    /* The menu has a tall scrollable body; the header is sticky on top so the
       back button + title stay visible while the user scrolls a long product list. */
    .mega-dropdown-menu {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .mega-mobile-header {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        background: #111;
        color: #fff;
        position: sticky;
        top: 0;
        z-index: 10;
        border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    .mega-back-btn {
        background: transparent;
        border: 0;
        color: #fff;
        font-size: 1rem;
        padding: 4px 8px;
        cursor: pointer;
        line-height: 1;
    }
    .mega-back-btn[hidden] { display: none !important; }
    .mega-mobile-title {
        font-weight: 600;
        font-size: 0.95rem;
        letter-spacing: 0.3px;
    }

    /* Step 1 — show only brand list, hide the active brand's pane content */
    .mega-dropdown-menu[data-mobile-step="brand"] .mega-content { display: none; }

    /* Step 2 — hide brand list, show only the active brand's categories
       (the inner sidebar). Hide the inner product/series content. */
    .mega-dropdown-menu[data-mobile-step="category"] .mega-sidebar { display: none; }
    .mega-dropdown-menu[data-mobile-step="category"] .mega-content-inner { display: none; }
    .mega-dropdown-menu[data-mobile-step="category"] .mega-content > .tab-pane:not(.mega-tab-container-inner) ul,
    .mega-dropdown-menu[data-mobile-step="category"] .mega-content > .tab-pane > h6 {
        /* Facade pane has no inner sidebar — at category step the user shouldn't
           see its product list either; but Facade has data-has-categories=0 so
           it jumps directly to the product step. This rule is defensive. */
        display: none;
    }

    /* Step 3 — hide brand list AND the category pill row, show only product list */
    .mega-dropdown-menu[data-mobile-step="product"] .mega-sidebar { display: none; }
    .mega-dropdown-menu[data-mobile-step="product"] .mega-sidebar-inner { display: none; }

    /* Make category pills feel tappable — full-width rows with chevron at end */
    .mega-dropdown-menu[data-mobile-step="category"] .mega-sidebar-inner {
        flex-direction: column;
        flex-wrap: nowrap;
        padding: 8px 0;
    }
    .mega-dropdown-menu[data-mobile-step="category"] .mega-sidebar-inner .nav-link {
        margin: 0;
        border-radius: 0;
        background: transparent !important;
        color: #222 !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid #eee;
        font-size: 0.95rem;
        width: 100%;
        justify-content: space-between;
    }
    .mega-dropdown-menu[data-mobile-step="category"] .mega-sidebar-inner .nav-link .fa-chevron-right {
        display: inline !important;
        opacity: 0.5;
    }
    .mega-dropdown-menu[data-mobile-step="category"] .mega-sidebar-inner .nav-link.active {
        background: transparent !important;
        color: #222 !important;
        font-weight: 600;
    }

    /* ----- Hero carousels — full-bleed and contained ----- */
    .hero-section,
    .facade-hero-carousel,
    #heroCarousel {
        max-width: 100vw;
        overflow: hidden;
    }

    /* ----- Swiper carousels — prevent slides from exceeding viewport ----- */
    .product-swiper,
    .product-carousel,
    .cp-swiper,
    .vg-swiper,
    .fs-swiper,
    .awards-lightbox-swiper,
    .completed-projects-carousel,
    .video-gallery-carousel,
    .marquee-wrapper {
        max-width: 100vw;
        overflow: hidden !important;
    }

    /* Video gallery — landscape video cards constrained to viewport */
    .vg-swiper .swiper-slide:not(.vg-slide-short) {
        max-width: calc(100vw - 60px);
    }
    .vg-swiper .vg-slide-button:not(.vg-slide-button--short) {
        aspect-ratio: 16 / 9;
        max-width: calc(100vw - 60px);
    }
    /* Shorts cards already constrained via max-height: 340px, just narrow them. */
    .vg-swiper .vg-slide-short {
        max-width: calc(100vw - 120px);
    }
    .vg-slide-button--short {
        max-width: 240px;
    }

    /* Marquee items shouldn't overflow */
    .marquee { gap: 14px; }
    .marquee-item { width: 120px; height: 72px; padding: 10px; flex-shrink: 0; }

    /* TOSTEM Project Gallery (.cp-swiper) — keep within viewport */
    .cp-swiper .swiper-slide {
        max-width: calc(100vw - 60px);
    }

    /* Façade products full-width strips */
    .fp-strip-content {
        padding: 0 5%;
    }

    /* TOSTEM Series grid — 1 column on mobile */
    .tostem-series-grid > .col-md-6 { padding-inline: 8px; }

    /* Mission/Vision section spacing */
    .mission-vision-section .container { padding-inline: 18px; }

    /* Awards & Certificates — already centered via flex, just contain */
    .awards-cert-grid { padding-inline: 12px; }

    /* Footer location cards — full width */
    .footer-loc { padding-left: 16px; }
}

/* Extra-small phones — further tighten */
@media (max-width: 575.98px) {
    /* TOSTEM hero text overflow guards */
    .hero-content { padding-inline: 18px; }
    .hero-content h1 { font-size: clamp(1.5rem, 6vw, 2.2rem) !important; line-height: 1.2; }
    /* Pre-engineered windows hero brand size */
    .pre-eng-brand { font-size: clamp(1.4rem, 6vw, 1.9rem); }
    .pre-eng-title { font-size: clamp(1.4rem, 6vw, 1.9rem); }
}

/* -----------------------------------------------------------
   Mobile overflow fix — Bootstrap g-5 row gutter (3rem = 48px)
   has -24px horizontal negative margins, which exceeds the
   .container's 12px side padding on phones. That makes every
   .row.g-5 push 24px past the viewport on each side. Shrinking
   the gutter on small screens removes the overflow without
   touching desktop spacing (Bootstrap mobile-up media queries
   leave > md untouched).
   ----------------------------------------------------------- */
@media (max-width: 991.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; }
    .row.g-4 { --bs-gutter-x: 1rem; }
    /* Hero content shouldn't stretch past viewport */
    .hero-content.h-100.d-flex { max-width: 100vw; padding-inline: 18px; box-sizing: border-box; }
    /* TEXGUARD visual block — keep contained */
    .texguard-visual { max-width: 100%; margin-inline: 0; }
}