/* 
 * Main Stylesheet for Workiify
 * Implements Mobile-First Responsive Design 
 */

/* ==========================================================================
   CSS Variables & Tokens
   ========================================================================== */
:root {
    /* Light Theme (Default) */
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #1e293b;
    --text-main: #1f2937;
    --text-muted: #6b7280;
    --bg-main: #ffffff;
    --bg-alt: #f8fafc;
    --border-color: #e2e8f0;
    
    /* Global */
    --whatsapp-color: #25D366;
    --whatsapp-hover: #128C7E;
    --max-content-width: 1200px;
    --font-family: 'Inter', sans-serif;
    --font-heading: 'Manrope', sans-serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 2rem;
    --spacing-lg: 4rem;
    --spacing-xl: 5rem;
    
    /* Header Height */
    --header-height: 80px;

    /* Smart Amenities (theme-aware) */
    --amenities-bg: var(--bg-alt);
    --amenities-title-color: var(--secondary-color);
    --amenities-card-bg: #ffffff;
    --amenities-card-border: var(--border-color);
    --amenities-card-hover-bg: #ffffff;
    --amenities-card-hover-border: rgba(37, 99, 235, 0.3);
    --amenities-card-hover-shadow: rgba(37, 99, 235, 0.12);
    --amenities-icon-color: var(--text-muted);
    --amenities-item-text-color: var(--text-main);
    --amenities-context-color: var(--primary-color);
    --amenities-core-color: var(--primary-color);
    --amenities-ambient-opacity: 0.35;

    /* Contact Section (theme-aware) */
    --contact-glass-bg: rgba(255, 255, 255, 0.65);
    --contact-glass-border: rgba(255, 255, 255, 0.8);
    --contact-icon-bg: rgba(37, 99, 235, 0.1);
    --primary-shadow: rgba(37, 99, 235, 0.25);
    --primary-shadow-strong: rgba(37, 99, 235, 0.32);
}

/* Dark Theme */
[data-theme="dark"] {
    --primary-color: #3b82f6;
    --primary-hover: #60a5fa;
    --secondary-color: #f1f5f9;
    --text-main: #f8fafc;
    --text-muted: #94a3b8;
    --bg-main: #0f172a;
    --bg-alt: #1e293b;
    --border-color: #334155;

    /* Smart Amenities (theme-aware) */
    --amenities-bg: #0B132B;
    --amenities-title-color: #ffffff;
    --amenities-card-bg: rgba(30, 41, 59, 0.4);
    --amenities-card-border: rgba(51, 65, 85, 0.5);
    --amenities-card-hover-bg: rgba(30, 41, 59, 0.7);
    --amenities-card-hover-border: rgba(255, 255, 255, 0.2);
    --amenities-card-hover-shadow: rgba(59, 130, 246, 0.15);
    --amenities-icon-color: #94a3b8;
    --amenities-item-text-color: #e2e8f0;
    --amenities-context-color: #38bdf8;
    --amenities-core-color: #60a5fa;
    --amenities-ambient-opacity: 1;

    /* Contact Section (theme-aware) */
    --contact-glass-bg: rgba(30, 41, 59, 0.55);
    --contact-glass-border: rgba(148, 163, 184, 0.18);
    --contact-icon-bg: rgba(59, 130, 246, 0.18);
    --primary-shadow: rgba(59, 130, 246, 0.3);
    --primary-shadow-strong: rgba(59, 130, 246, 0.4);
}

/* ==========================================================================
   Reset & Base Styles
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    overflow-x: hidden;
}

body {
    font-family: var(--font-family);
    color: var(--text-main);
    background-color: var(--bg-main);
    line-height: 1.6;
    overflow-x: hidden;
    padding-top: var(--header-height); /* Compensate for fixed header */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* When the mobile nav is open, allow overflow so the sidebar 
   is not clipped by the html/body overflow-x:hidden rule */
body.nav-open {
    overflow: hidden;
}

button, input, select, textarea {
    font-family: inherit;
}

a {
    text-decoration: none;
    color: inherit;
    transition: color 0.3s ease;
}

ul {
    list-style: none;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-heading);
    line-height: 1.2;
    margin-bottom: var(--spacing-sm);
    color: var(--secondary-color);
}

h1, h2 { letter-spacing: -0.02em; }

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

/* ==========================================================================
   Layout & Container (Max Content Width 1440px)
   ========================================================================== */
.container {
    width: 100%;
    max-width: var(--max-content-width);
    margin: 0 auto;
    padding: 0 28px;
}

/* Container Width Modifiers for varied section focus */
.container.max-w-1150 { max-width: 1150px; }
.container.max-w-1100 { max-width: 1100px; }
.container.max-w-700 { max-width: 700px; }

.text-center { text-align: center; }
.text-start { text-align: left; }
.flex-between { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/* ==========================================================================
   Buttons
   ========================================================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1.5rem;
    border-radius: 0.375rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.3s ease;
}

.btn-primary,
.btn-whatsapp {
    position: relative;
    overflow: hidden;
    z-index: 1;
    transition: all 0.3s ease, padding-right 0.3s ease;
}

/* The hover color sweeps in from the left instead of just snapping to a
   new color, and an arrow fades/slides in at the right edge to make it
   clear the button is clickable. */
.btn-primary::before,
.btn-whatsapp::before {
    content: '';
    position: absolute;
    inset: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.45s ease;
    z-index: -1;
}

.btn-primary:hover::before,
.btn-whatsapp:hover::before {
    transform: scaleX(1);
}

.btn-primary::after,
.btn-whatsapp::after {
    font-family: 'Font Awesome 6 Free', sans-serif;
    font-weight: 900;
    content: '\f061'; /* fa-arrow-right */
    position: absolute;
    right: 1rem;
    top: 50%;
    opacity: 0;
    transform: translate(8px, -50%);
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

.btn-primary:hover::after,
.btn-whatsapp:hover::after {
    opacity: 1;
    transform: translate(0, -50%);
}

.btn-primary:hover,
.btn-whatsapp:hover {
    padding-right: 2.5rem;
}

.btn-primary {
    background-color: var(--primary-color);
    color: #ffffff !important;
}

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

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 99, 235, 0.25);
}

.btn-whatsapp {
    background-color: var(--whatsapp-color);
    color: #ffffff !important;
}

.btn-whatsapp::before {
    background-color: var(--whatsapp-hover);
}

.btn-whatsapp:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(37, 211, 102, 0.3);
}

.btn-brochure {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.4rem;
    border-radius: 0.5rem;
    font-weight: 600;
    font-size: 0.9375rem;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    overflow: hidden;
    border: 1.5px solid transparent;
    background: 
        linear-gradient(135deg, #0b3b8c 0%, #1557c0 45%, #0080ff 100%) padding-box,
        linear-gradient(90deg, #2563eb 0%, #60a5fa 25%, #ffffff 50%, #38bdf8 75%, #2563eb 100%) border-box;
    background-size: 100% 100%, 250% 100%;
    background-position: 0 0, 0% 50%;
    box-shadow: 0 4px 14px rgba(11, 59, 140, 0.3);
    animation: brochureBorderStream 3s ease infinite;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease;
}

.btn-brochure i {
    font-size: 1.05rem;
    transition: transform 0.25s ease;
}

.btn-brochure:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(11, 59, 140, 0.42), 0 0 14px rgba(56, 189, 248, 0.35);
    background: 
        linear-gradient(135deg, #10449e 0%, #1e62d4 45%, #0099ff 100%) padding-box,
        linear-gradient(90deg, #3b82f6 0%, #93c5fd 25%, #ffffff 50%, #67e8f9 75%, #3b82f6 100%) border-box;
    background-size: 100% 100%, 250% 100%;
    color: #ffffff !important;
}

.btn-brochure:hover i {
    transform: translateY(2px);
}

.btn-brochure:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(11, 59, 140, 0.25);
}

@keyframes brochureBorderStream {
    0% {
        background-position: 0 0, 0% 50%;
    }
    50% {
        background-position: 0 0, 100% 50%;
    }
    100% {
        background-position: 0 0, 0% 50%;
    }
}

/* ==========================================================================
   Header & Navigation
   ========================================================================== */
.site-header {
    background-color: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: var(--header-height);
    display: flex;
    align-items: center;
    transform: translateY(0);
    transition: transform 0.3s ease;
}

.site-header.header-hidden {
    transform: translateY(-100%);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.brand-logo {
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
}

.brand-icon {
    position: relative;
    /* Force hardware acceleration to prevent SVG disappearing bug */
    transform: translateZ(0);
    backface-visibility: hidden;
}

.brand-icon img {
    /* The source SVG is a tall lockup (icon mark + illustration, then the
       WORKIIFY wordmark, then a tagline pill, all stacked in one file). The
       wordmark is already set separately in HTML, so crop to just the top
       icon/illustration region -- object-position must anchor to the TOP,
       not center, or the crop window lands on the seam and a sliver of the
       wordmark ghosts in underneath. */
    height: 60px;
    width: 68px;
    object-fit: cover;
    object-position: left top;
    display: block;
    /* Hardware acceleration for the SVG itself */
    transform: translateZ(0);
}

.brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.brand-name {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: 1.8rem;
    font-weight: 400; /* Anton is naturally very bold */
    letter-spacing: 1px;
    line-height: 1;
    color: var(--text-main);
    text-transform: uppercase;
    background: linear-gradient(120deg, var(--text-main) 0%, var(--text-main) 40%, var(--primary-color) 50%, var(--text-main) 60%, var(--text-main) 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: sweep 4s infinite linear;
    
    /* Display block/inline-block is safer for background-clip text */
    display: inline-block;
    /* Hardware acceleration to fix disappearances */
    transform: translateZ(0);
    will-change: background-position;
    backface-visibility: hidden;
}

@keyframes sweep {
    0% { background-position: -100% center; }
    100% { background-position: 200% center; }
}

.brand-logo .tagline {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-muted);
    margin-top: 2px;
    letter-spacing: 0.5px;
}

/* Light/Dark Mode Logo Toggling */
[data-theme="light"] .logo-dark,
.logo-dark {
    display: none;
}

[data-theme="light"] .logo-light,
.logo-light {
    display: block;
}

[data-theme="dark"] .logo-light {
    display: none;
}

[data-theme="dark"] .logo-dark {
    display: block;
}

.main-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.nav-links {
    display: flex;
    gap: var(--spacing-md);
}

.nav-links li {
    position: relative;
    display: flex;
}

.nav-links a {
    font-weight: 500;
    font-size: 0.95rem;
    padding: 8px 18px;
    border-radius: 30px;
    position: relative;
    z-index: 1;
    transition: color 0.3s ease;
}

.nav-links a::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 30px;
    background: rgba(37, 99, 235, 0.1);
    border: 1px solid rgba(37, 99, 235, 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: -1;
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.nav-links a:hover,
.nav-links a.active {
    color: var(--primary-color);
}

.nav-links a:hover::before,
.nav-links a.active::before {
    opacity: 1;
    transform: scale(1);
}

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

/* Icons only appear in the mobile drawer -- desktop nav stays plain text */
.nav-icon {
    display: none;
}

/* On desktop this is just a transparent wrapper around the Services link;
   the separate toggle button (for tap-to-expand on mobile) stays hidden. */
.nav-link-row {
    display: flex;
    align-items: center;
}

.dropdown-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    color: inherit;
}

.dropdown-icon,
.dropdown-icon-desktop {
    font-size: 0.7rem;
    margin-left: 6px;
    transition: transform 0.3s ease;
}

.nav-links .has-dropdown:hover .dropdown-icon-desktop {
    transform: rotate(180deg);
}

/* On desktop this wrapper has no effect: .dropdown-menu is position:absolute,
   so it's excluded from normal flow regardless of the wrapper's own display
   type and still positions itself relative to .has-dropdown. On mobile the
   wrapper becomes the collapse animator (see media query below). Deliberately
   NOT using display:contents here -- its cross-browser support (especially
   on older/other-vendor mobile browsers) has historically been inconsistent,
   and it buys nothing here since the child already escapes layout on its own. */
.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(15px);
    background: var(--bg-main);
    min-width: 220px;
    box-shadow: 0 12px 30px rgba(0,0,0,0.1);
    border-radius: 12px;
    padding: 10px 0;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    z-index: 100;
    list-style: none;
    border: 1px solid var(--border-color);
}

.nav-links .has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.dropdown-menu li {
    display: block;
    width: 100%;
}

.dropdown-menu li a {
    display: block;
    padding: 12px 20px;
    color: var(--text-main);
    font-size: 0.95rem;
    font-weight: 500;
    border-radius: 0;
    transition: background 0.2s, color 0.2s;
    text-align: left;
}

/* Icons are mobile-only (see .nav-icon); keep the desktop dropdown plain text */
.dropdown-menu li a i {
    display: none;
}

.dropdown-menu li a::before {
    display: none; /* Disable pill effect inside dropdown */
}

.dropdown-menu li a:hover {
    background: rgba(37, 99, 235, 0.05);
    color: var(--primary-color);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.theme-toggle {
    background: none;
    border: none;
    font-size: 1.25rem;
    color: var(--text-main);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.theme-toggle:hover {
    background-color: var(--bg-alt);
}

.mobile-nav-actions {
    display: none;
}

.mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    color: var(--text-main);
    cursor: pointer;
}

.btn-mobile-header {
    display: none;
}

/* ==========================================================================
   Free Tour Band
   ========================================================================== */
.free-tour-band {
    background-color: var(--bg-alt);
    padding: 3.75rem 0; /* was var(--spacing-xl) = 5rem */
    border-top: 1px solid var(--border-color);
}

.free-tour-band h2 {
    font-size: 2rem;
    margin-bottom: var(--spacing-xs);
}

.free-tour-band p {
    color: var(--text-muted);
    margin-bottom: var(--spacing-md);
    font-size: 1.1rem;
}

.tour-actions {
    display: flex;
    justify-content: center;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* ==========================================================================
   Multi-column footer (dark navy -> blue gradient)
   ========================================================================== */
.site-footer-mini {
    background: linear-gradient(
        90deg,
        #0a1733 0%,
        #123a66 55%,
        #1f5fa8 100%
    );
    color: rgba(255, 255, 255, 0.72);
    border-top: none;
    padding: 50px 0 0 0;
}

.footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1.3fr;
    gap: 2rem;
    padding-bottom: 12px;
}

.footer-col-title {
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #fff;
    margin: 0 0 16px;
}

.footer-col-links {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col-desc {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.6);
    margin: 10px 0 16px;
    line-height: 1.5;
    max-width: 260px;
}

.footer-mini-logo {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
}

.footer-mini-logo .brand-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.footer-mini-logo .brand-icon img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top;
    display: block;
}

/* Force the light-colored logo (logo-dark.svg) in the dark footer regardless of global theme */
.footer-mini-logo .brand-icon .logo-light { display: none !important; }
.footer-mini-logo .brand-icon .logo-dark { display: block !important; }

.footer-mini-logo .brand-name {
    font-family: 'Anton', 'Oswald', Impact, sans-serif;
    font-size: 1.1rem;
    font-weight: 400;
    letter-spacing: 1px;
    color: #fff;
    text-transform: uppercase;
    background: none;
    -webkit-text-fill-color: #fff;
}

.footer-mini-logo .brand-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-mini-logo .tagline {
    font-size: 0.65rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-top: 2px;
    letter-spacing: 0.5px;
}

.footer-col-links a {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    transition: color 0.2s ease;
    white-space: nowrap;
}

.footer-col-links a:hover {
    color: #7ec8ff;
}

.footer-mini-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 22px 0;
    margin-top: 28px;
    position: relative;
    border-top: 1px solid rgba(126, 200, 255, 0.35);
    flex-wrap: wrap;
}
.footer-mini-bottom::before {
    content: '';
    position: absolute;
    top: 0; left: -50vw; right: -50vw; bottom: 0;
    background: rgba(0, 0, 0, 0.14);
    z-index: -1;
}

.footer-address {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.65);
    max-width: 260px;
    line-height: 1.4;
}

.footer-address i {
    color: #7ec8ff;
    margin-top: 2px;
}

.footer-mini-socials {
    display: flex;
    gap: 0.75rem;
}

.footer-mini-socials a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.8rem;
    transition: all 0.2s ease;
}

.footer-mini-socials a:hover {
    background: #2563EB;
    color: #fff;
}

.footer-mini-copy {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    white-space: nowrap;
}

@media (max-width: 900px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        row-gap: 2rem;
    }
    .footer-col-desc {
        max-width: 100%;
    }
}

@media (max-width: 560px) {
    .footer-columns {
        grid-template-columns: 1fr 1fr;
        column-gap: 1rem;
        text-align: center;
        row-gap: 1.75rem;
    }
    /* Brand and Contact Us stay full-width; Quick Links and Support sit
       side by side in the two columns between them. */
    .footer-col-brand,
    .footer-col-contact {
        grid-column: 1 / -1;
    }
    .footer-mini-logo {
        justify-content: center;
    }
    .footer-col-desc {
        margin-left: auto;
        margin-right: auto;
    }
    .footer-mini-socials {
        justify-content: center;
    }
    .footer-address {
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        gap: 6px;
        max-width: 100%;
        margin: 0 auto;
    }
    .footer-mini-bottom {
        text-align: center;
    }
}

/* ==========================================================================
   Floating WhatsApp Button
   ========================================================================== */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    background-color: var(--whatsapp-color);
    color: white;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    z-index: 100;
    transition: transform 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    color: white;
}

/* ==========================================================================
   Enquiry Popup (shown once per session, shortly after first page view)
   ========================================================================== */
.enquiry-popup {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}
.enquiry-popup.active {
    opacity: 1;
    pointer-events: auto;
}
.enquiry-popup-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    backdrop-filter: blur(2px);
}
.enquiry-popup-panel {
    position: relative;
    width: 100%;
    max-width: 640px;
    max-height: 90vh;
    overflow-y: auto;
    background: var(--bg-main);
    border-radius: 16px;
    box-shadow: 0 30px 70px rgba(15, 23, 42, 0.35);
    padding: 2.25rem;
    transform: translateY(16px) scale(0.97);
    transition: transform 0.3s ease;
}
.enquiry-popup.active .enquiry-popup-panel {
    transform: translateY(0) scale(1);
}
.enquiry-popup-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    width: 34px;
    height: 34px;
    border: none;
    border-radius: 50%;
    background: var(--bg-alt);
    color: var(--text-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.enquiry-popup-close:hover {
    background: var(--border-color);
    color: var(--text-main);
}
.enquiry-popup-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    margin-bottom: 1.5rem;
    padding-right: 2rem;
}
.enquiry-popup-header i {
    flex-shrink: 0;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}
.enquiry-popup-header h3 { margin: 0 0 0.3rem; font-size: 1.3rem; color: var(--text-main); }
.enquiry-popup-header p { margin: 0; color: var(--text-muted); font-size: 0.92rem; }
.enquiry-popup .form-row { grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }

/* Inline success/error feedback, shared by this popup and the Home/Contact
   inline enquiry forms. */
.enquiry-result { font-size: 0.9rem; font-weight: 500; margin: 0.75rem 0; }
.enquiry-result:empty { margin: 0; }
.enquiry-result.success { color: #059669; }
.enquiry-result.error { color: #dc2626; }

@media (max-width: 767px) {
    .enquiry-popup-panel { padding: 1.5rem; }
    .enquiry-popup .form-row { grid-template-columns: 1fr; gap: 0; }
}

/* ==========================================================================
   Chat Assistant (quick-reply widget, no AI backend)
   ========================================================================== */
.chatbot-fab {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 64px;
    height: 64px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    box-shadow: 0 8px 24px rgba(24, 43, 73, 0.25);
    cursor: pointer;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Not clipped: the icon's "online" status dot and its pulsing ring
       animation both intentionally extend past the main circle's edge,
       and a hard circular mask here would cut them off. */
    overflow: visible;
    transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease;
}

.chatbot-fab.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: scale(0.8) translateY(20px);
}

.chatbot-fab:hover {
    transform: scale(1.08);
    box-shadow: 0 10px 28px rgba(24, 43, 73, 0.32);
}

.chatbot-fab img {
    /* The icon's own circle only fills ~67% of its square canvas, so at
       100% size there's a transparent gap around it that lets whatever
       happens to be scrolled behind the fixed button show through. Scale
       it up so the circle reaches the button's edges with nothing left
       to peek through. */
    position: absolute;
    top: 50%;
    left: 50%;
    width: 150%;
    height: 150%;
    transform: translate(-50%, -50%);
    object-fit: cover;
}

.chatbot-fab.is-active {
    transform: scale(0.9);
}

.chatbot-panel {
    position: fixed;
    bottom: 106px;
    right: 30px;
    width: 360px;
    max-width: calc(100vw - 40px);
    height: min(75vh, 520px);
    /* stay between the fixed header and the chat button on every screen height
       (dvh = the visible height on phones, where browser bars come and go) */
    max-height: calc(100vh - 106px - var(--header-height) - 12px);
    max-height: calc(100dvh - 106px - var(--header-height) - 12px);
    background: #fff;
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(24, 43, 73, 0.25);
    z-index: 998;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    opacity: 0;
    transform: translateY(16px) scale(0.96);
    pointer-events: none;
    transform-origin: bottom right;
    transition: opacity 0.25s ease, transform 0.25s ease;
}

.chatbot-panel.active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
}

.chatbot-panel-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    background: linear-gradient(135deg, #246BFD 0%, #182B49 100%);
    color: #fff;
    flex-shrink: 0;
}

.chatbot-panel-header img {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    padding: 3px;
    flex-shrink: 0;
}

.chatbot-panel-title {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
    margin-right: auto;
}

.chatbot-panel-title strong { font-size: 0.95rem; }
.chatbot-panel-title span { font-size: 0.75rem; opacity: 0.85; }

.chatbot-panel-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.85rem;
    transition: background-color 0.2s ease;
    flex-shrink: 0;
}

.chatbot-panel-close:hover {
    background: rgba(255, 255, 255, 0.3);
}

.chatbot-messages {
    flex: 1;
    min-height: min(220px, 30vh);
    overflow-y: auto;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #F8FAFC;
}

.chatbot-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 14px;
    font-size: 0.88rem;
    line-height: 1.5;
}

.chatbot-bubble.bot {
    align-self: flex-start;
    background: #fff;
    border: 1px solid #E2E8F0;
    color: #1f2937;
    border-bottom-left-radius: 4px;
}

.chatbot-bubble.user {
    align-self: flex-end;
    background: #246BFD;
    color: #fff;
    border-bottom-right-radius: 4px;
}

.chatbot-bubble .btn {
    font-size: 0.82rem;
    padding: 8px 16px;
    margin-top: 8px;
}

.chatbot-quick-replies {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.chatbot-chip {
    background: #EAF0FF;
    border: 1px solid transparent;
    color: #246BFD;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.2s ease, color 0.2s ease;
}

.chatbot-chip:hover {
    background: #246BFD;
    color: #fff;
}

.chatbot-typing {
    align-self: flex-start;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
}

.chatbot-typing span {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #94a3b8;
    animation: chatbotTypingBounce 1.2s infinite ease-in-out;
}

.chatbot-typing span:nth-child(2) { animation-delay: 0.15s; }
.chatbot-typing span:nth-child(3) { animation-delay: 0.3s; }

@keyframes chatbotTypingBounce {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
    30% { transform: translateY(-4px); opacity: 1; }
}

.chatbot-input-row {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-top: 1px solid #E2E8F0;
    background: #fff;
}

.chatbot-input-row input {
    flex: 1;
    min-width: 0;
    border: 1px solid #E2E8F0;
    border-radius: 20px;
    padding: 10px 16px;
    font-size: 0.88rem;
    font-family: inherit;
    color: #1f2937;
    background: #F8FAFC;
    transition: border-color 0.2s ease, background-color 0.2s ease;
}

.chatbot-input-row input:focus {
    outline: none;
    border-color: #246BFD;
    background: #fff;
}

.chatbot-send {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 50%;
    background: #246BFD;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 0.9rem;
    transition: background-color 0.2s ease, transform 0.2s ease;
}

.chatbot-send:hover {
    background: #1d56cc;
    transform: scale(1.05);
}

@media (max-width: 480px) {
    .chatbot-panel {
        right: 20px;
        bottom: 96px;
        width: calc(100vw - 40px);
        max-height: calc(100vh - 96px - var(--header-height) - 12px);
        max-height: calc(100dvh - 96px - var(--header-height) - 12px);
    }
    .chatbot-fab {
        right: 20px;
        bottom: 20px;
    }
}

/* Short screens (phones in landscape, small laptop windows): open the chat
   beside the chat button instead of above it, so it gets the full height
   below the header, and let the message list shrink and scroll. */
@media (max-height: 520px) {
    .chatbot-panel {
        bottom: 16px;
        right: 104px;
        width: min(360px, calc(100vw - 124px));
        max-height: calc(100vh - 16px - var(--header-height) - 12px);
        max-height: calc(100dvh - 16px - var(--header-height) - 12px);
    }
    .chatbot-messages {
        min-height: 0;
    }
}

/* ==========================================================================
   Home Page Sections
   ========================================================================== */
.section-padding { padding: 3rem 0; } /* was 4rem: smaller gap between sections */
.bg-alt { background-color: var(--bg-alt); }
.mt-4 { margin-top: var(--spacing-md); }
.mb-4 { margin-bottom: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-sm); }
.w-100 { width: 100%; }

.section-title { font-size: 2.5rem; font-weight: 700; margin-bottom: var(--spacing-sm); }
.section-subtitle { font-size: 1.1rem; color: var(--text-muted); margin-bottom: var(--spacing-md); }

/* Hero Slider */
.hero-section { position: relative; height: 85vh; min-height: 700px; display: block; color: #fff; overflow: hidden; background: var(--bg-main); }
.slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 1s ease, visibility 1s; display: flex; align-items: center; }
.slide.active { opacity: 1; visibility: visible; }
.slide-bg { position: absolute; inset: 0; background-size: cover; background-position: center; transform: scale(1); transition: transform 7s linear; }
.slide.active .slide-bg { transform: scale(1.1); }
.hero-overlay {
    position: absolute;
    inset: 0;
    /* Solid indigo-blue tint — same technique as leading coworking brands.
       A uniform colour layer gives even contrast across any slide image
       so the white text is crisp everywhere, not just over dark patches. */
    background: rgba(18, 32, 100, 0.35);
    z-index: 5;
}
.hero-content { position: relative; z-index: 10; max-width: 860px; margin: 0 auto; text-align: center; opacity: 0; transform: translateY(20px); transition: opacity 0.8s ease 0.5s, transform 0.8s ease 0.5s; margin-top: -180px; }
.slide.active .hero-content { opacity: 1; transform: translateY(0); }
.hero-content h1 {
    color: #ffffff;
    font-size: 3.8rem;
    font-weight: 900;
    margin-bottom: var(--spacing-sm);
    line-height: 1.15;
    letter-spacing: -0.01em;
    text-shadow: none;
}
.hero-content p {
    font-size: 1.2rem;
    font-weight: 400;
    color: #ffffff;
    margin-bottom: var(--spacing-md);
    text-shadow: none;
    line-height: 1.7;
    opacity: 0.92;
}

/* Slider Controls */
.slider-btn { position: absolute; top: 40%; transform: translateY(-50%); z-index: 20; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.3); color: white; width: 50px; height: 50px; border-radius: 50%; cursor: pointer; transition: all 0.3s ease; display: flex; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.slider-btn:hover { background: var(--primary-color); border-color: var(--primary-color); }
.prev-btn { left: var(--spacing-md); }
.next-btn { right: var(--spacing-md); }
.hero-buttons { display: flex; justify-content: center; gap: var(--spacing-sm); flex-wrap: wrap; margin-bottom: 3rem; }

/* Hero Counters (iOS Blend) */
.hero-counters-wrapper {
    position: absolute;
    bottom: 90px;
    left: 0;
    width: 100%;
    z-index: 20;
    background: transparent;
    border-top: none;
    padding: 0;
}
.counters-grid { 
    display: grid; 
    grid-template-columns: repeat(4, 1fr); 
    align-items: center;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 16px;
    padding: 1.5rem 0;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    /* For hover focus effect */
    transition: all 0.4s ease;
}

/* When the grid is hovered, dim and slightly shrink all cards */
.counters-grid:hover .counter-card {
    opacity: 0.5;
    transform: scale(0.95);
    filter: blur(1px);
}

.counter-card { 
    text-align: center; 
    padding: 0 1.5rem; 
    flex: 1; 
    border-right: 1px solid rgba(255, 255, 255, 0.25); 
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    position: relative;
}

/* The specific hovered card pops out, sharpens, and scales up */
.counters-grid .counter-card:hover {
    opacity: 1;
    transform: scale(1.15) translateY(-2px);
    filter: blur(0);
    z-index: 10;
}

/* Autonomous Idle Wave Animation to show interactivity */
@keyframes autoFocusWave {
    0%, 15%, 100% { transform: scale(1) translateY(0); }
    7.5% { transform: scale(1.1) translateY(-2px); }
}
@keyframes autoFocusColor {
    0%, 15%, 100% { color: #fff; }
    7.5% { color: #4ade80; }
}

.counter-card {
    animation: autoFocusWave 8s infinite ease-in-out;
}
.counter-card h3,
.counter-card .counter-combo-value {
    animation: autoFocusColor 8s infinite ease-in-out;
}
/* Stagger the animation across the 4 cards */
.counter-card:nth-child(1), .counter-card:nth-child(1) h3, .counter-card:nth-child(1) .counter-combo-value { animation-delay: 0s; }
.counter-card:nth-child(2), .counter-card:nth-child(2) h3, .counter-card:nth-child(2) .counter-combo-value { animation-delay: 0.2s; }
.counter-card:nth-child(3), .counter-card:nth-child(3) h3, .counter-card:nth-child(3) .counter-combo-value { animation-delay: 0.4s; }
.counter-card:nth-child(4), .counter-card:nth-child(4) h3, .counter-card:nth-child(4) .counter-combo-value { animation-delay: 0.6s; }

/* Kill the autonomous wave entirely the moment the user interacts with the bar */
.counters-grid:hover .counter-card,
.counters-grid:hover .counter-card h3,
.counters-grid:hover .counter-card .counter-combo-value {
    animation: none !important;
}

.counter-card:last-child {
    border-right: none;
}
.counter-line { display: none; }
.counter-card h3 { color: #fff; font-size: 1.8rem; margin: 0 0 5px 0; font-weight: 700; transition: color 0.3s ease; }
.counter-card .counter-combo-value { transition: color 0.3s ease; }
.counter-card:hover h3, .counter-card:hover .counter-combo-value { color: #4ade80; } /* Accent glow on hover */
.counter-card p { font-size: 0.9rem; margin: 0; font-weight: 500; color: rgba(255,255,255,0.9); text-transform: uppercase; letter-spacing: 1px; }
.counters-note { margin-top: 1rem; font-size: 0.9rem; color: rgba(255,255,255,1); font-weight: 700; font-style: italic; text-align: center; letter-spacing: 0.5px; }

/* Combined "Floors + sq ft per floor" card: two mini stat-rows stacked in
   place of the single big number used by the other counter cards. */
.counter-card-combo { display: flex; flex-direction: column; justify-content: center; gap: 0.5rem; }
.counter-combo-row { display: flex; align-items: baseline; justify-content: center; gap: 0.45rem; flex-wrap: wrap; }
.counter-combo-value { color: #fff; font-size: 1.45rem; font-weight: 700; font-family: var(--font-heading); white-space: nowrap; }
.counter-combo-label { font-size: 0.85rem; font-weight: 500; color: rgba(255,255,255,0.85); text-transform: uppercase; letter-spacing: 1px; white-space: nowrap; }
.counter-combo-divider { width: 70%; height: 1px; background: rgba(255,255,255,0.2); margin: 0 auto; }

/* Phone card: same card chrome as the other stats, but the "big number"
   slot holds a tappable tel: link instead of a counted-up figure. */
.counter-card-phone h3 { font-size: 1.3rem; }
.counter-card-phone h3 a { color: #fff; text-decoration: none; display: inline-flex; align-items: center; gap: 8px; transition: color 0.2s ease; }
.counter-card-phone h3 a:hover { color: #4ade80; }
.counter-card-phone h3 i { font-size: 0.95rem; }



/* Services - Standard spacing */
.services-overview {
    position: relative;
    z-index: 30;
    padding-top: 0; /* let the card below overlap up into the hero */
    /* Pilot palette for this section only: warm cream + vivid blue + coral +
       deep navy, per the Komito-inspired direction. Scoped here rather than
       changed at :root so the rest of the site is untouched for now. */
    --services-bg-start: #F7F4EC;
    --services-bg-mid: #FFFFFF;
    --services-bg-end: #FFF0E9;
    --services-primary: #246BFD;
    --services-accent: #FF765F;
    --services-heading: #182B49;
}
.services-overview .container {
    /* Gradient + decorative background image is set inline in the view
       (needs URLROOT for the image path) so it paints flush with this
       card's true edges/corners instead of an inset child element. */
    border-radius: 0;
    padding: 3rem 2rem;
    box-shadow: 0 -20px 40px rgba(24, 43, 73, 0.08);
    position: relative;
    overflow: hidden;
    margin-top: -80px;
}

.services-overview .container > * {
    position: relative;
    z-index: 1;
}
.services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1rem; margin-top: var(--spacing-md); }
.grid-fixed-4 { grid-template-columns: repeat(4, 1fr) !important; }

.services-overview .section-title { color: var(--services-heading); }

.services-header-right {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.65rem !important;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.services-badge-icon {
    width: 34px !important;
    height: 34px !important;
    min-width: 34px !important;
    border-radius: 50% !important;
    background: #FF6B4A !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #ffffff !important;
    font-size: 0.85rem !important;
    box-shadow: 0 4px 10px rgba(255, 107, 74, 0.25) !important;
    flex-shrink: 0 !important;
    transition: transform 0.25s ease;
}

.services-header-right:hover .services-badge-icon {
    transform: scale(1.08);
}

.services-badge-text {
    color: var(--services-heading) !important;
    font-weight: 600 !important;
    font-size: 1rem !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    display: inline-block !important;
}

/* Global container animated gradient drop */
.services-container-animated {
    /* Large gradient: top half is solid #FFF5F3, bottom half gradients into white */
    background: linear-gradient(to bottom, #FFF5F3 0%, #FFF5F3 50%, #ffffff 85%, #ffffff 100%);
    background-size: 100% 200%;
    background-position: center top;
    transition: background-position 1.8s cubic-bezier(0.2, 0.8, 0.2, 1) 0.3s;
}

/* Triggered when AOS adds .aos-animate to the container */
.services-container-animated.aos-animate {
    background-position: center bottom;
}

.service-card { 
    background: #ffffff; 
    border: none;
    box-shadow: 0 4px 15px rgba(24, 43, 73, 0.03); 
    overflow: hidden; 
    transition: transform 0.4s ease, box-shadow 0.4s ease; 
    display: flex; 
    flex-direction: column; 
    text-align: center; 
    border-radius: 0; 
    position: relative;
}

/* Animated edge-to-edge drawing borders */
.service-card::before,
.service-card::after {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 12;
}
.service-card::before {
    border-top: 2px solid var(--card-accent, #3b82f6);
    border-bottom: 2px solid var(--card-accent, #3b82f6);
    transform: scaleX(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-card::after {
    border-left: 2px solid var(--card-accent, #3b82f6);
    border-right: 2px solid var(--card-accent, #3b82f6);
    transform: scaleY(0);
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.service-card:hover::before { transform: scaleX(1); }
.service-card:hover::after { transform: scaleY(1); }

.service-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(36, 107, 253, 0.12);
}
.service-card .placeholder-img { border-radius: 0; }

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

/* Same accent colors as the arrow badges, available to anything in the card */
.service-card:nth-child(4n+1) { --card-accent: #f97316; }
.service-card:nth-child(4n+2) { --card-accent: #3b82f6; }
.service-card:nth-child(4n+3) { --card-accent: #10b981; }
.service-card:nth-child(4n+4) { --card-accent: #8b5cf6; }

/* Colored line that grows from left to right across the image's bottom
   edge on hover, in the card's own accent color. */
.service-img-wrap::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--card-accent, var(--services-primary));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s ease;
    z-index: 2;
    pointer-events: none;
}
.service-card:hover .service-img-wrap::before {
    transform: scaleX(1);
}

/* Diagonal white shine that sweeps across the photo on hover -- a one-shot
   forward animation (not a transition), so it only ever plays on the card
   actually being hovered and snaps away instantly on mouseleave instead of
   animating back out. */
.service-img-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 1;
}
.service-card:hover .service-img-wrap::after {
    animation: serviceSweep 0.9s ease forwards;
}
@keyframes serviceSweep {
    from { left: -75%; }
    to { left: 125%; }
}

.service-card .service-img, .service-card img.service-img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
}
.service-card:hover .service-img, .service-card:hover img.service-img {
    transform: scale(1.08);
    filter: brightness(1.05);
}

.service-content { padding: 2rem var(--spacing-md); flex: 1; display: flex; flex-direction: column; background: #ffffff; transition: background-color 0.4s ease; position: relative; z-index: 11; }
.service-card:hover .service-content { background: #ffffff; }
.service-content h3 { color: var(--services-heading); font-size: 1.4rem; margin-bottom: 1rem; font-weight: 700; transition: color 0.3s ease; }
.service-card:hover .service-content h3 { color: var(--services-primary); }
.service-content p { color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }

/* Service Link styling (matching mockup) */
.service-link-wrapper {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 12px;
    margin-top: 1.5rem;
    transition: transform 0.3s ease;
}
.service-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    animation: idlePulse 2.5s infinite ease-in-out;
}

@keyframes idlePulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.12); }
}
.service-link-text {
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: underline;
    transition: opacity 0.3s ease;
}

/* Move the inner elements when hovered */
.service-card:hover .service-link-wrapper {
    transform: translateX(8px);
}
.service-card:hover .service-arrow {
    animation: none;
    transform: scale(1.15) translateX(4px);
}

/* Unique colors per card (Orange, Blue, Green, Purple) */
.service-card:nth-child(1) .service-arrow { background: #f97316; box-shadow: 0 4px 10px rgba(249, 115, 22, 0.4); }
.service-card:nth-child(1) .service-link-text { color: #f97316; text-decoration-color: #fdba74; }

.service-card:nth-child(2) .service-arrow { background: #3b82f6; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4); }
.service-card:nth-child(2) .service-link-text { color: #3b82f6; text-decoration-color: #93c5fd; }

.service-card:nth-child(3) .service-arrow { background: #10b981; box-shadow: 0 4px 10px rgba(16, 185, 129, 0.4); }
.service-card:nth-child(3) .service-link-text { color: #10b981; text-decoration-color: #6ee7b7; }

.service-card:nth-child(4) .service-arrow { background: #8b5cf6; box-shadow: 0 4px 10px rgba(139, 92, 246, 0.4); }
.service-card:nth-child(4) .service-link-text { color: #8b5cf6; text-decoration-color: #c4b5fd; }

/* Smart Workspace Amenities (2060 UI) */
.amenities-section {
    position: relative;
    overflow: hidden;
    background-color: var(--amenities-bg);
    color: var(--amenities-item-text-color);
    padding: 3.75rem 0; /* was var(--spacing-xl) = 5rem */
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Soft colour bridge from the Services card's warm cream/peach tone into
   this section's cool grey, instead of a hard cut between the two. */
.amenities-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 180px;
    background: linear-gradient(180deg, rgba(234, 240, 255, 0.85) 0%, rgba(234, 240, 255, 0) 100%);
    z-index: 2;
    pointer-events: none;
}

/* Ambient Background Layer */
.amenities-ambient-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: radial-gradient(circle at 50% 50%, rgba(29, 78, 216, 0.15) 0%, rgba(11, 19, 43, 0) 70%);
    mix-blend-mode: screen;
    opacity: var(--amenities-ambient-opacity);
    pointer-events: none;
    animation: ambientShift 30s ease-in-out infinite;
}

/* Day/Night cycle animation for ambient bg */
@keyframes ambientShift {
    0% { background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.2) 0%, rgba(11, 19, 43, 0) 70%); }
    50% { background: radial-gradient(circle at 70% 70%, rgba(14, 165, 233, 0.1) 0%, rgba(11, 19, 43, 0) 70%); }
    100% { background: radial-gradient(circle at 30% 30%, rgba(59, 130, 246, 0.2) 0%, rgba(11, 19, 43, 0) 70%); }
}

/* Canvas Network Layer */
.amenities-network-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.position-relative { position: relative; }
.z-10 { z-index: 10; }

.amenities-title {
    color: var(--amenities-title-color);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
    opacity: 0;
    transform: translateY(20px);
}

.amenities-subtitle {
    color: var(--text-muted);
    margin-bottom: var(--spacing-lg);
    opacity: 0;
    transform: translateY(20px);
}

.amenities-section.is-visible .amenities-title,
.amenities-section.is-visible .amenities-subtitle {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 800ms ease-out, transform 800ms ease-out;
}

.amenities-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    gap: 1.5rem;
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
}

/* Digital Core */
.amenities-core-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem 0;
    color: var(--amenities-core-color);
    font-size: 0.8rem;
    letter-spacing: 3px;
    opacity: 0;
}

.amenities-section.is-visible .amenities-core-indicator {
    opacity: 1;
    transition: opacity 1s ease-in 1s;
}

.core-pulse {
    width: 8px;
    height: 8px;
    background-color: var(--amenities-core-color);
    border-radius: 50%;
    margin-bottom: 0.5rem;
    box-shadow: 0 0 10px var(--amenities-core-color), 0 0 20px var(--amenities-core-color);
    animation: corePulse 4s infinite ease-in-out;
}

@keyframes corePulse {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 15px var(--amenities-core-color), 0 0 30px var(--amenities-core-color); }
}

.amenity-item {
    background: #ffffff;
    border: 1px solid transparent;
    box-shadow: 0 10px 25px rgba(24, 43, 73, 0.06);
    border-radius: 0;
    padding: 1.8rem 1.2rem;
    width: calc(25% - 1.5rem); /* 4 per row */
    min-width: 160px;
    color: #334155;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: all 300ms cubic-bezier(0.25, 0.8, 0.25, 1), background-color 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateY(15px) scale(0.95);
    cursor: default;
}

/* Cycle the same blue / coral / mint / violet accents used on Services
   and Gallery through the amenity tiles, four at a time. */
.amenity-item:nth-child(4n+1) { --amenity-accent: #246BFD; --amenity-accent-bg: #EAF0FF; --amenity-shadow: rgba(36, 107, 253, 0.2); }
.amenity-item:nth-child(4n+2) { --amenity-accent: #FF765F; --amenity-accent-bg: #FFE8E2; --amenity-shadow: rgba(255, 118, 95, 0.2); }
.amenity-item:nth-child(4n+3) { --amenity-accent: #2EC4B6; --amenity-accent-bg: #E1F8F4; --amenity-shadow: rgba(46, 196, 182, 0.2); }
.amenity-item:nth-child(4n+4) { --amenity-accent: #8B5CF6; --amenity-accent-bg: #EFE9FE; --amenity-shadow: rgba(139, 92, 246, 0.2); }

/* Top-to-bottom fill on hover */
.amenity-item::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--amenity-accent, var(--primary-color));
    transform: scaleY(0);
    transform-origin: top;
    z-index: 0;
    transition: transform 450ms cubic-bezier(0.16, 1, 0.3, 1);
}

.amenity-item:hover::before {
    transform: scaleY(1);
}

.amenities-section.is-visible .amenity-item {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 600ms cubic-bezier(0.16, 1, 0.3, 1), transform 600ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 300ms, border-color 300ms, background 300ms;
}

/* Stagger entrance delay */
.amenities-section.is-visible .amenity-item:nth-child(1) { transition-delay: 0ms; }
.amenities-section.is-visible .amenity-item:nth-child(2) { transition-delay: 80ms; }
.amenities-section.is-visible .amenity-item:nth-child(3) { transition-delay: 160ms; }
.amenities-section.is-visible .amenity-item:nth-child(4) { transition-delay: 240ms; }
.amenities-section.is-visible .amenity-item:nth-child(5) { transition-delay: 320ms; }
.amenities-section.is-visible .amenity-item:nth-child(6) { transition-delay: 400ms; }
.amenities-section.is-visible .amenity-item:nth-child(7) { transition-delay: 480ms; }
.amenities-section.is-visible .amenity-item:nth-child(8) { transition-delay: 560ms; }
.amenities-section.is-visible .amenity-item:nth-child(9) { transition-delay: 640ms; }
.amenities-section.is-visible .amenity-item:nth-child(10) { transition-delay: 720ms; }
.amenities-section.is-visible .amenity-item:nth-child(11) { transition-delay: 800ms; }
.amenities-section.is-visible .amenity-item:nth-child(12) { transition-delay: 880ms; }

.amenity-item:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 28px var(--amenity-shadow, rgba(24, 43, 73, 0.16));
    border-color: var(--amenity-accent, var(--primary-color));
    z-index: 20;
}

.amenity-icon-wrapper {
    position: relative;
    z-index: 1;
    width: 54px;
    height: 54px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem auto;
    background: var(--amenity-accent-bg, var(--bg-alt));
    transition: transform 300ms ease, background-color 300ms ease;
}

.amenity-item:hover .amenity-icon-wrapper {
    transform: scale(1.05);
    background: #ffffff;
}

.amenity-item i {
    font-size: 1.4rem;
    color: var(--amenity-accent, #475569);
    transition: color 300ms ease;
}

.amenity-item:hover i {
    color: var(--amenity-accent, #2563eb);
}

.amenity-item p {
    position: relative;
    z-index: 1;
    font-weight: 500;
    font-size: 0.95rem;
    color: #1e293b;
    margin: 0;
    transition: color 300ms ease;
}

.amenity-item:hover p {
    color: #ffffff;
}

.amenity-context {
    position: relative;
    z-index: 1;
    font-size: 0.75rem;
    color: #e2e8f0;
    margin-top: 0.5rem;
    height: 18px;
    opacity: 0;
    overflow: hidden;
    transition: opacity 250ms ease, color 300ms ease;
    transition-delay: 0ms;
}

.amenity-item:hover .amenity-context {
    opacity: 1;
    color: rgba(255, 255, 255, 0.85);
    transition-delay: 100ms;
}

/* Split Layouts */
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-lg); align-items: center; }
.split-layout.reverse .split-content { order: 1; }
.split-layout.reverse .split-img { order: 2; }
.placeholder-img { background-color: var(--border-color); color: var(--text-muted); display: flex; align-items: center; justify-content: center; min-height: 300px; border-radius: 8px; font-weight: 600; }

/* Gentle hover zoom on split-layout photos (Welcome to Workiify, Why
   Choose Us, etc.) -- the image keeps its own inline border-radius, this
   just clips the zoom to it. */
.split-img { overflow: visible; }

/* Premium Animated Images */
.premium-img-wrapper {
    position: relative;
    padding: 10px; /* Space for the glow and levitation */
}

/* Shine Sweep Animation: the light band moves inside the photo's own box only. (It used to wait
   outside, to the left of the photo, where it washed out the text and icons next to it.) */
.premium-img-wrapper::after {
    content: '';
    position: absolute;
    inset: 10px;
    background: linear-gradient(110deg, rgba(255,255,255,0) 35%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 65%) no-repeat;
    background-size: 250% 100%;
    background-position: 150% 0;
    opacity: 0;
    z-index: 5;
    pointer-events: none;
    border-radius: 12px;
}

.premium-img-wrapper:hover::after {
    animation: hoverShine 0.8s ease forwards;
}

@keyframes hoverShine {
    0% { opacity: 1; background-position: 150% 0; }
    100% { opacity: 1; background-position: -50% 0; }
}

/* Aurora Glow Background Blob */
.premium-img-wrapper::before {
    content: '';
    position: absolute;
    top: 5%;
    left: 5%;
    width: 90%;
    height: 90%;
    background: linear-gradient(135deg, var(--primary-color), #4ade80);
    filter: blur(40px);
    opacity: 0.2;
    z-index: 0;
    animation: blobPulse 8s infinite alternate ease-in-out;
}

/* Continuous Levitation and Styling */
.premium-img {
    width: 100%;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    object-fit: cover;
    aspect-ratio: 4/3;
    position: relative;
    z-index: 1;
    animation: levitate 6s ease-in-out infinite alternate;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* 3D Lift on Hover */
.premium-img-wrapper:hover .premium-img {
    animation-play-state: paused;
    transform: scale(1.03) translateY(-8px);
    box-shadow: 0 20px 40px rgba(36, 107, 253, 0.15);
}

@keyframes levitate {
    0% { transform: translateY(0); }
    100% { transform: translateY(-12px); }
}

@keyframes blobPulse {
    0% { transform: scale(1); opacity: 0.15; }
    100% { transform: scale(1.1); opacity: 0.25; }
}

/* Features */
.feature-list li { margin-bottom: var(--spacing-sm); display: flex; align-items: center; gap: 10px; font-size: 1.1rem; }
/* Multi-line items (icon + a wrapped sentence, e.g. inside an accordion
   answer or a location checklist) read better with the icon pinned to the
   first line than centered against the whole block. */
.faq-answer .feature-list li,
.split-content .feature-list li { align-items: flex-start; }
.faq-answer .feature-list i,
.split-content .feature-list i { margin-top: 0.2em; }
.feature-list i { 
    color: var(--primary-color); 
    font-size: 1.2rem; 
    min-width: 28px; 
    text-align: center; 
    animation: iconPulse 3s infinite ease-in-out;
}

@keyframes iconPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.15); }
}

/* Why Choose Us: each point nudges in and its check-mark pops slightly
   on hover, so the list feels a little more alive than plain static text. */
.why-choose-section .feature-list li { transition: transform 0.25s ease; }
.why-choose-section .feature-list li:hover { transform: translateX(6px); }
.why-choose-section .feature-list i { transition: transform 0.25s ease; }
.why-choose-section .feature-list li:hover i { transform: scale(1.2); }

/* Welcome to Workiify: give its CTA the same premium hover lift used on
   the enquiry form's button instead of the site's plain color-only hover. */
.welcome-section .btn-primary,
.why-choose-section .btn-primary {
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
    box-shadow: 0 12px 24px var(--primary-shadow);
}
.welcome-section .btn-primary:hover,
.why-choose-section .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 30px var(--primary-shadow-strong);
}

/* Teams */
.teams-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-sm); margin-top: var(--spacing-md); }
.team-tile {
    position: relative;
    padding: 2.5rem 2rem;
    background: #ffffff;
    border-radius: 16px;
    border: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
    z-index: 1;
}

/* Animated edge-to-edge drawing borders for Team Tiles with Rounded Corners */
.team-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    border: 2px solid var(--accent, #3b82f6);
    border-radius: 16px;
    box-sizing: border-box;
    pointer-events: none;
    z-index: 12;
    /* Animate a diamond clip-path expanding to a full rectangle */
    clip-path: polygon(
        50% 0%, 50% 0%, 
        100% 50%, 100% 50%, 
        50% 100%, 50% 100%, 
        0% 50%, 0% 50%
    );
    transition: clip-path 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.team-tile:hover::before { 
    clip-path: polygon(
        0% 0%, 100% 0%, 
        100% 0%, 100% 100%, 
        100% 100%, 0% 100%, 
        0% 100%, 0% 0%
    );
}



@keyframes gradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

.tile-glow {
    position: absolute;
    top: -20px;
    right: -20px;
    width: 140px;
    height: 140px;
    background: var(--accent);
    filter: blur(50px);
    opacity: 0.12;
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.team-tile:hover .tile-glow {
    opacity: 0.22;
}

.team-tile-icon {
    position: relative;
    z-index: 1;
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    box-shadow: 0 4px 15px rgba(0,0,0,0.04);
    color: var(--accent);
    font-size: 1.3rem;
    margin-bottom: 1.5rem;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.team-tile h3 { position: relative; z-index: 1; font-size: 1.15rem; font-weight: 700; color: var(--text-main); margin-bottom: 0.75rem; }
.team-tile p { position: relative; z-index: 1; color: var(--text-muted); font-size: 0.95rem; line-height: 1.5; margin: 0; flex-grow: 1; }

.team-tile:hover {
    transform: translateY(-4px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

/* Testimonials */
.google-rating { display: inline-flex; align-items: center; gap: 10px; background: var(--bg-main); padding: 10px 20px; border-radius: 30px; box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
.google-rating .fa-google { color: #DB4437; }
.google-rating .stars i { color: #F4B400; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); }
.testimonial-card { background: var(--bg-main); padding: var(--spacing-md); border-radius: 8px; text-align: left; box-shadow: 0 4px 15px rgba(0,0,0,0.02); }
.testimonial-card p { font-style: italic; color: var(--text-muted); margin-bottom: 1rem; }
.testimonial-card h4 { font-size: 1rem; color: var(--text-main); margin: 0; }

.testimonials-slider-wrapper { position: relative; }

.testimonial-nav-btn {
    display: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1);
    cursor: pointer;
}
.testimonial-nav-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.testimonial-nav-btn.prev { left: -6px; }
.testimonial-nav-btn.next { right: -6px; }

/* Gallery */
.contact-heading { font-size: 2rem; }

.eyebrow {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

.btn-outline {
    background: transparent;
    border: 1.5px solid var(--border-color);
    color: var(--text-main) !important;
}
.btn-outline:hover {
    background: var(--text-main);
    border-color: var(--text-main);
    color: var(--bg-main) !important;
}
.btn-pill { border-radius: 999px; padding: 0.75rem 1.75rem; }

/* Auto-sliding strip of photos (looping, pauses on hover) next to a static
   CTA panel that never moves. The track's image set is rendered twice in
   the markup, and sliding it exactly -50% loops seamlessly since the
   second half is an identical copy of the first. */
.gallery-row {
    display: flex;
    align-items: stretch;
    gap: 20px;
    height: 320px;
}

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

.gallery-track {
    display: flex;
    gap: 1rem;
    height: 100%;
    width: max-content;
    animation: galleryScroll 36s linear infinite;
}

.gallery-scroll-viewport:hover .gallery-track {
    animation-play-state: paused;
}

@keyframes galleryScroll {
    from { transform: translateX(0); }
    to { transform: translateX(calc(-50% - 0.5rem)); }
}

.gallery-img {
    flex: 0 0 480px;
    height: 100%;
    overflow: hidden;
    position: relative;
}

.gallery-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-img:hover img {
    transform: scale(1.08);
}

.gallery-collage-cta {
    flex: 0 0 340px;
    background: linear-gradient(135deg, #0f172a 0%, #1e3a8a 25%, #2563eb 50%, #0284c7 75%, #1d4ed8 100%);
    background-size: 260% 260%;
    animation: blueGradientFlow 8s ease infinite alternate;
    color: #fff;
    padding: 2.2rem 1.85rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.95rem;
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 14px 34px -8px rgba(37, 99, 235, 0.4);
    isolation: isolate;
}

.gallery-collage-cta::before {
    content: '';
    position: absolute;
    inset: -50%;
    background: radial-gradient(circle at 40% 40%, rgba(56, 189, 248, 0.28) 0%, rgba(37, 99, 235, 0.08) 45%, transparent 70%);
    animation: blueGlowDrift 10s linear infinite;
    pointer-events: none;
    z-index: 0;
}

.gallery-collage-cta > * {
    position: relative;
    z-index: 1;
}

.gallery-collage-cta i {
    font-size: 1.9rem;
    color: #ffffff;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.2));
    transition: transform 0.3s ease;
}

.gallery-collage-cta:hover i {
    transform: scale(1.1) rotate(-4deg);
}

.gallery-collage-cta h2 {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.25;
    margin: 0;
    color: #ffffff !important;
    text-shadow: 0 2px 10px rgba(15, 23, 42, 0.35);
}

.gallery-collage-cta p {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.92);
    margin: 0;
    max-width: 320px;
    line-height: 1.5;
}

.btn-light {
    background: #ffffff;
    color: #1d4ed8 !important;
    font-weight: 700;
    border: none;
    box-shadow: 0 4px 14px rgba(15, 23, 42, 0.15);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-light:hover {
    background: #ffffff;
    color: #0f172a !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.25);
}

@keyframes blueGradientFlow {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes blueGlowDrift {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ==========================================================================
   Gallery Page Layout
   ========================================================================== */
.gallery-filters {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px;
    margin-bottom: 30px;
}
.filter-btn {
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--text-main);
    padding: 10px 24px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
}
.filter-btn:hover, .filter-btn.active {
    background: #246BFD;
    color: #fff;
    border-color: #246BFD;
    box-shadow: 0 8px 20px rgba(36,107,253,0.2);
    transform: translateY(-2px);
}

/* Each real category gets its own accent from the same blue / coral /
   mint / violet set used on Services and Amenities. */
.filter-btn[data-filter="workspaces"].active, .filter-btn[data-filter="workspaces"]:hover { background: #246BFD; border-color: #246BFD; box-shadow: 0 8px 20px rgba(36,107,253,0.25); }
.filter-btn[data-filter="meeting-rooms"].active, .filter-btn[data-filter="meeting-rooms"]:hover { background: #FF765F; border-color: #FF765F; box-shadow: 0 8px 20px rgba(255,118,95,0.25); }
.filter-btn[data-filter="common-areas"].active, .filter-btn[data-filter="common-areas"]:hover { background: #2EC4B6; border-color: #2EC4B6; box-shadow: 0 8px 20px rgba(46,196,182,0.25); }
.filter-btn[data-filter="events"].active, .filter-btn[data-filter="events"]:hover { background: #8B5CF6; border-color: #8B5CF6; box-shadow: 0 8px 20px rgba(139,92,246,0.25); }

.gallery-page-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 25px;
    align-items: stretch;
}

.gallery-page-item {
    position: relative;
    border-radius: 0;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background-color: var(--bg-alt);
    cursor: pointer;
    box-shadow: 0 4px 20px rgba(24, 43, 73, 0.06);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
}

/* Thin top accent bar, colour-coded per category, revealed on hover */
.gallery-page-item[data-category="workspaces"] { --gallery-accent: #246BFD; }
.gallery-page-item[data-category="meeting-rooms"] { --gallery-accent: #FF765F; }
.gallery-page-item[data-category="common-areas"] { --gallery-accent: #2EC4B6; }
.gallery-page-item[data-category="events"],
.strip-item[data-category="events"],
.strip-item { --gallery-accent: #8B5CF6; }

.gallery-page-item::after,
.strip-item::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: var(--gallery-accent, #246BFD);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
    z-index: 2;
}

.gallery-page-item:hover::after,
.strip-item:hover::after {
    transform: scaleX(1);
}

.gallery-page-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.gallery-page-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(24, 43, 73, 0.14);
}

.gallery-page-item:hover img {
    transform: scale(1.08);
}

.gallery-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 60%, transparent 100%);
    color: #fff;
    padding: 25px 20px 20px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: 1.1rem;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.gallery-page-item:hover .gallery-caption,
.strip-item:hover .gallery-caption {
    transform: translateY(0);
}

.gallery-caption::before {
    content: '';
    flex-shrink: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--gallery-accent, #246BFD);
}

.gallery-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 50px;
}
.gallery-pagination .page-btn {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-main);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-weight: 600;
    transition: all 0.3s ease;
}
.gallery-pagination .page-btn.active, .gallery-pagination .page-btn:hover {
    background: #246BFD;
    color: #fff;
    border-color: #246BFD;
    box-shadow: 0 4px 15px rgba(36,107,253,0.2);
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.95);
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(8px);
}
.lightbox.active {
    opacity: 1;
    pointer-events: auto;
}
.lightbox-img {
    max-width: 90%;
    max-height: 80vh;
    border-radius: 12px;
    box-shadow: 0 20px 50px rgba(0,0,0,0.4);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.lightbox.active .lightbox-img {
    transform: scale(1);
}
.lightbox-caption {
    color: #fff;
    margin-top: 25px;
    font-size: 1.25rem;
    font-weight: 500;
}
.lightbox-close {
    position: absolute;
    top: 30px;
    right: 40px;
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    font-size: 2rem;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }
.lightbox-prev, .lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    transition: background 0.3s ease, transform 0.3s ease;
}
.lightbox-prev:hover { background: #246BFD; transform: translateY(-50%) translateX(-5px); }
.lightbox-next:hover { background: #246BFD; transform: translateY(-50%) translateX(5px); }
.lightbox-prev { left: 40px; }
.lightbox-next { right: 40px; }

/* Placeholder Styling */
.gallery-page-item.placeholder-img {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    padding: 20px;
    text-align: center;
    background: #f1f5f9;
    border: 2px dashed #cbd5e1;
    color: #64748b;
    font-weight: 500;
}
.gallery-page-item.placeholder-img em {
    font-size: 0.85rem;
    opacity: 0.7;
    margin-top: 8px;
}
/* Contact & Form */
.contact-section { background: linear-gradient(135deg, #f0f8ff 0%, #e0f2fe 100%); }
.contact-grid {
    position: relative;
    z-index: 2;
    align-items: stretch;
    background: var(--bg-main);
    border-radius: 24px;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.08);
    overflow: hidden;
}

.enquiry-form-container {
    padding: 2.75rem;
    width: 100%;
}

.form-header { margin-bottom: var(--spacing-md); }
.form-header h3 { font-size: 1.5rem; margin-bottom: 0.35rem; }
.form-header p { color: var(--text-muted); margin: 0; }

.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.form-group { margin-bottom: 1.25rem; }
.form-group label { display: block; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 0.5rem; font-size: 0.78rem; color: var(--text-muted); }
.required-star { color: #ef4444; margin-left: 2px; font-weight: bold; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    padding: 0.85rem 1rem;
    border: 1.5px solid var(--border-color);
    border-radius: 10px;
    background: var(--bg-main);
    color: var(--text-main);
    font-family: var(--font-family);
    font-size: 0.95rem;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}
.form-group input::placeholder, .form-group textarea::placeholder { color: var(--text-muted); opacity: 0.7; }
.form-group input:focus, .form-group select:focus, .form-group textarea:focus { outline: none; border-color: var(--primary-color); box-shadow: 0 0 0 4px var(--contact-icon-bg); }
.form-group input:disabled { background: var(--bg-alt); cursor: not-allowed; }
.form-group textarea { resize: vertical; min-height: 100px; }

/* Inline field validation error state matching design */
.enquiry-form .form-group input.is-invalid,
.enquiry-form .form-group select.is-invalid,
.enquiry-form .form-group textarea.is-invalid,
.enquiry-form .form-group .select-wrapper.is-invalid select {
    border-color: #f87171 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}

.form-error-msg {
    display: block;
    color: #ef4444;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.35rem;
    line-height: 1.35;
    animation: formErrorSlideIn 0.2s ease-out;
}

@keyframes formErrorSlideIn {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Testimonial / Feedback submission form */
.feedback-form-container {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    padding: 3rem 2.5rem;
    background: linear-gradient(160deg, #f0f8ff 0%, #f8fafc 60%);
    border: 1px solid var(--border-color);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(15, 23, 42, 0.08);
    overflow: hidden;
}

[data-theme="dark"] .feedback-form-container {
    background: var(--bg-alt);
}
.feedback-form-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), #38bdf8, var(--primary-color));
}

.feedback-form-header { text-align: center; margin-bottom: 2rem; }
.feedback-form-header .category-eyebrow { justify-content: center; }
.feedback-form-header h3 { font-size: 1.7rem; margin: 0.5rem 0 0.6rem; color: var(--secondary-color); }
.feedback-form-header p { color: var(--text-muted); margin: 0; }

.alert { display: flex; align-items: center; justify-content: center; gap: 0.6rem; padding: 0.9rem 1.25rem; border-radius: 10px; margin-bottom: 1.5rem; font-weight: 500; text-align: center; }
.alert-success { background: #d1fae5; color: #065f46; }
.alert-danger { background: #fee2e2; color: #b91c1c; }

.feedback-form .form-group input.is-invalid,
.feedback-form .form-group textarea.is-invalid {
    border-color: #f87171 !important;
    background-color: #fff !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.14) !important;
}
.invalid-feedback {
    display: block;
    color: #ef4444;
    font-size: 0.8125rem;
    font-weight: 500;
    margin-top: 0.35rem;
    line-height: 1.35;
    animation: formErrorSlideIn 0.2s ease-out;
}
.invalid-feedback:empty { display: none; }
.field-hint { color: var(--text-muted); font-size: 0.82rem; margin-top: 0.4rem; display: block; }

/* Star rating picker */
.rating-input {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.4rem;
    width: fit-content;
}
.rating-input input { position: absolute; opacity: 0; width: 0; height: 0; }
.rating-input label {
    font-size: 1.8rem;
    line-height: 1;
    color: #e2e8f0;
    cursor: pointer;
    transition: color 0.15s ease, transform 0.15s ease;
}
.rating-input input:checked ~ label { color: #fbbf24; }
.rating-input label:hover,
.rating-input label:hover ~ label { color: #f59e0b; transform: scale(1.12); }

/* Custom file input */
.file-input-wrapper { position: relative; }
.file-input-wrapper input[type="file"] {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}
.file-input-label {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
    border: 1.5px dashed var(--border-color);
    border-radius: 10px;
    color: var(--text-muted);
    background: var(--bg-alt);
    font-size: 0.9rem;
    transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.file-input-wrapper:hover .file-input-label,
.file-input-wrapper input[type="file"]:focus ~ .file-input-label {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: var(--contact-icon-bg);
}

.consent-group { background: var(--bg-alt); border-radius: 10px; padding: 1rem 1.1rem; margin-bottom: 1.5rem; }
.consent-label { display: flex !important; align-items: flex-start; gap: 0.7rem; cursor: pointer; font-weight: 400 !important; text-transform: none !important; letter-spacing: normal !important; }
.consent-label input[type="checkbox"] { width: auto; margin-top: 3px; accent-color: var(--primary-color); cursor: pointer; }
.consent-label span { font-size: 0.9rem; color: var(--text-main); }

.feedback-form .btn-primary {
    gap: 0.6rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 12px 24px var(--primary-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}
.feedback-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px var(--primary-shadow-strong); }

.select-wrapper { position: relative; }
.select-wrapper select { appearance: none; -webkit-appearance: none; -moz-appearance: none; padding-right: 2.5rem; cursor: pointer; }
.select-wrapper .select-arrow {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.75rem;
    color: var(--text-muted);
    pointer-events: none;
}

.enquiry-form .btn-primary {
    margin-top: 0.5rem;
    padding: 1rem 1.5rem;
    border-radius: 10px;
    font-size: 1rem;
    box-shadow: 0 12px 24px var(--primary-shadow);
    transition: transform 0.25s ease, box-shadow 0.25s ease, background-color 0.3s ease;
}
.enquiry-form .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 30px var(--primary-shadow-strong); }

/* ==========================================================================
   Inner Pages (About Us, Services, etc.)
   ========================================================================== */
/* Page Banner */
.page-banner {
    --banner-img: url('https://via.placeholder.com/1920x600/1e293b/ffffff?text=Page+Banner');
    position: relative;
    overflow: hidden;
    padding: 120px 0;
    color: #fff;
    background: var(--banner-img) center/cover no-repeat;
}

/* Slow continuous zoom (Ken Burns) on the banner photo, isolated on its own layer
   so the zoom never affects the overlay/content or the section's own box.
   Uses the same --banner-img custom property as the base layer (inherited
   reliably by the pseudo-element) rather than depending on `inherit` picking
   up the host's computed background-image. */
.page-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--banner-img);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: 0;
    animation: pageBannerZoom 10s linear infinite alternate;
}

@keyframes pageBannerZoom {
    from { transform: scale(1); }
    to { transform: scale(1.2); }
}

.banner-overlay { 
    position: absolute; 
    inset: 0; 
    /* Same solid tint technique — uniform contrast for all banner images */
    background: rgba(18, 32, 100, 0.35);
    z-index: 1; 
}
.banner-content { position: relative; z-index: 10; }
.banner-content h1 { 
    color: #FFFFFF; 
    font-size: 3rem; 
    font-weight: 900;
    margin-bottom: 0.5rem; 
    text-shadow: none;
    letter-spacing: -0.01em;
}

.banner-content .tagline { 
    font-size: 1.25rem; 
    color: #ffffff;
    font-weight: 500;
    margin-bottom: var(--spacing-sm);
    text-shadow: 0 1px 6px rgba(0,0,0,0.5);
}

.breadcrumb { 
    font-size: 0.95rem; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    gap: 0.5rem; 
    color: #ffffff;
    text-shadow: 0 1px 5px rgba(0,0,0,0.4);
}

.breadcrumb a { 
    color: #EAF0FF; 
    text-decoration: underline; 
    transition: opacity 0.2s ease;
}

.breadcrumb a:hover {
    opacity: 0.8;
}

.breadcrumb span { 
    color: #EAF0FF; 
    opacity: 0.9;
}

/* Counters (Inline variation for About Us) */
.our-story-section { padding-bottom: 0; } /* avoid stacking with the counters band's own top padding */
.inline-counters { margin-top: 0; padding: var(--spacing-md) 0; border-radius: 0; max-width: 100%; }

/* Mission & Vision */
.mission-vision-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-md); }
.mv-card { background: var(--bg-main); padding: var(--spacing-lg); border-radius: 8px; border-left: 4px solid var(--primary-color); box-shadow: 0 4px 15px rgba(0,0,0,0.02); text-align: left; }
/* .mv-card's default padding (--spacing-lg, 64px) was tuned for the About Us
   page's 2-card mission/vision layout. Reused in a denser 3-6 card grid, that
   much padding leaves barely 190px of text and forces awkward 2-3-word line
   wraps -- this variant trims it back to --spacing-md for denser grids. */
.mv-card-compact { padding: var(--spacing-md); }
.mv-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

/* "Our Purpose" — Mission & Vision, soft/calm treatment */
.purpose-section { position: relative; overflow: hidden; }
.purpose-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    pointer-events: none;
    z-index: 0;
    background: var(--primary-color);
}
.purpose-blob.blob-a { width: 340px; height: 340px; top: -120px; left: -100px; opacity: 0.08; }
.purpose-blob.blob-b { width: 300px; height: 300px; bottom: -120px; right: -80px; opacity: 0.08; }
.purpose-section .container { position: relative; z-index: 1; }

@keyframes purposeBlobDrift {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(30px, 20px) scale(1.1); }
}

.purpose-card {
    background: var(--bg-main);
    padding: var(--spacing-lg);
    border-radius: 20px;
    text-align: left;
    position: relative;
    overflow: hidden;
    box-shadow: 0 10px 35px rgba(37, 99, 235, 0.06);
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 700ms ease, transform 700ms ease, box-shadow 0.35s ease;
}
.purpose-section.is-visible .purpose-card { 
    opacity: 1; 
    transform: translateY(0); 
    transition: opacity 700ms ease, transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.35s ease;
}
.purpose-section.is-visible .mission-vision-grid .purpose-card:nth-child(2) { transition-delay: 150ms; }

.purpose-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 25px 50px -12px rgba(37, 99, 235, 0.25);
}

.purpose-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(120deg, #3b82f6, #8b5cf6, #ec4899, #3b82f6);
    background-size: 300% 300%;
    z-index: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.purpose-card:hover::before {
    opacity: 1;
    animation: gradientShift 4s ease infinite;
}

@keyframes purposeLineShimmer {
    0% { background-position: 150% 0; }
    100% { background-position: -150% 0; }
}

.purpose-card-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1.25rem;
    animation: purposeIconPulse 3.5s ease-in-out infinite;
    position: relative;
    z-index: 1;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.35s ease;
}
.purpose-card:hover .purpose-card-icon { transform: scale(1.1) rotate(-6deg); background: rgba(255, 255, 255, 0.2); color: #fff; }

@keyframes purposeIconPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0.25); }
    50% { box-shadow: 0 0 0 10px rgba(37, 99, 235, 0); }
}

.purpose-card h3 { position: relative; z-index: 1; font-size: 1.3rem; transition: color 0.3s ease; }
.purpose-card p { position: relative; z-index: 1; color: var(--text-muted); margin: 0; transition: color 0.3s ease; }
.purpose-card:hover h3, .purpose-card:hover p { color: #fff; }

/* "Find Your Workspace" — audience tiles, energetic/exploratory treatment */
.workspace-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--spacing-md); }
.workspace-tile {
    --tile-accent: var(--primary-color);
    --tile-glow: var(--primary-shadow);
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    padding: 2rem 1.75rem;
    text-align: left;
    position: relative;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.workspace-tile:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 35px -10px var(--tile-glow);
    border-color: transparent;
}
.workspace-tile::before {
    content: '';
    position: absolute;
    top: -40px;
    right: -40px;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    background: var(--tile-accent);
    opacity: 0.12;
    filter: blur(10px);
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.5s ease;
}
.workspace-tile:hover::before { 
    opacity: 0.22; 
    transform: scale(1.3);
}

/* Edge-to-edge drawing animated borders */
.workspace-tile-borders {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 5;
}
.workspace-tile-borders::before,
.workspace-tile-borders::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: none;
}
.workspace-tile-borders::before {
    border-top: 2px solid var(--tile-accent);
    border-bottom: 2px solid var(--tile-accent);
    transform: scaleX(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.workspace-tile-borders::after {
    border-left: 2px solid var(--tile-accent);
    border-right: 2px solid var(--tile-accent);
    transform: scaleY(0);
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.workspace-tile:hover .workspace-tile-borders::before {
    transform: scaleX(1);
}
.workspace-tile:hover .workspace-tile-borders::after {
    transform: scaleY(1);
}

.workspace-tile-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(6px);
    color: var(--tile-accent);
    font-size: 1.4rem;
    margin-bottom: 1.25rem;
    box-shadow: 0 8px 20px -10px var(--tile-glow);
}
[data-theme="dark"] .workspace-tile-icon { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); }

.workspace-tile h3 { font-size: 1.1rem; margin-bottom: 0.5rem; max-width: 220px; }
.workspace-tile p { color: var(--text-muted); font-size: 0.92rem; margin-bottom: 1.25rem; max-width: 220px; }
.workspace-tile-cta {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--tile-accent);
    transition: gap 0.25s ease;
}
.workspace-tile:hover .workspace-tile-cta { gap: 0.65rem; }

.workspace-tile.tile-sme { --tile-accent: #0ea5e9; --tile-glow: rgba(14, 165, 233, 0.16); }
.workspace-tile.tile-corporate { --tile-accent: #8b5cf6; --tile-glow: rgba(139, 92, 246, 0.16); }
.workspace-tile.tile-freelance { --tile-accent: #14b8a6; --tile-glow: rgba(20, 184, 166, 0.16); }
.workspace-tile.tile-student { --tile-accent: #a855f7; --tile-glow: rgba(168, 85, 247, 0.16); }

/* Icon Cards */
.icon-cards-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--spacing-md); }
.icon-card { 
    --ic-accent: #2563eb;
    --ic-gradient: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --ic-glow: rgba(37, 99, 235, 0.22);
    background: #ffffff; 
    padding: var(--spacing-lg) var(--spacing-md); 
    border-radius: 14px; 
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    display: flex; flex-direction: column; align-items: center; justify-content: center; 
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

/* Distinct theme colors for icon cards */
.icon-card:nth-child(4n+1) {
    --ic-accent: #2563eb;
    --ic-gradient: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --ic-glow: rgba(37, 99, 235, 0.22);
}
.icon-card:nth-child(4n+2) {
    --ic-accent: #0ea5e9;
    --ic-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --ic-glow: rgba(14, 165, 233, 0.22);
}
.icon-card:nth-child(4n+3) {
    --ic-accent: #8b5cf6;
    --ic-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --ic-glow: rgba(139, 92, 246, 0.22);
}
.icon-card:nth-child(4n+4) {
    --ic-accent: #10b981;
    --ic-gradient: linear-gradient(135deg, #059669 0%, #34d399 100%);
    --ic-glow: rgba(16, 185, 129, 0.22);
}

/* Up-to-down color slide layer */
.icon-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--ic-gradient);
    border-radius: inherit;
    transition: height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
}
.icon-card:hover::before,
.why-choose-cards .icon-card:hover::before {
    height: 100%;
}

.icon-card:hover,
.why-choose-cards .icon-card:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 18px 38px -8px var(--ic-glow) !important;
    border-color: transparent !important;
}
.icon-card i,
.why-choose-cards .icon-card i { 
    font-size: 2.2rem; 
    color: var(--ic-accent); 
    margin-bottom: 1.25rem; 
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.3s ease;
}
.icon-card:hover i,
.why-choose-cards .icon-card:hover i {
    transform: scale(1.25) rotate(6deg);
    color: #ffffff !important;
}
.icon-card p,
.why-choose-cards .icon-card p { 
    font-weight: 600; 
    font-size: 1.05rem; 
    color: var(--text-main); 
    line-height: 1.5; 
    margin: 0; 
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}
.icon-card:hover p,
.why-choose-cards .icon-card:hover p {
    color: #ffffff !important;
}

/* Denser variant for longer item lists (e.g. "Office rental includes") */
.icon-cards-grid.is-compact .icon-card { padding: var(--spacing-md); }
.icon-cards-grid.is-compact .icon-card i { font-size: 1.8rem; margin-bottom: 1rem; }
.icon-cards-grid.is-compact .icon-card p { font-size: 0.95rem; }

/* Plan / Booking badge on service detail pages */
.plan-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 1rem;
    border-radius: 999px;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.85rem;
}

/* Numbered steps ("How to become a member") */
.steps-grid { 
    display: grid; 
    grid-template-columns: repeat(5, 1fr); 
    gap: var(--spacing-md); 
    position: relative;
    padding-top: 1rem;
}
@media (max-width: 1024px) {
    .steps-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); padding-top: 0; }
}

/* Connecting dashed line for desktop */
@media (min-width: 1025px) {
    .steps-grid::before {
        content: '';
        position: absolute;
        top: 50px; /* Aligns with middle of the circle */
        left: 10%;
        right: 10%;
        height: 2px;
        background: repeating-linear-gradient(90deg, var(--border-color) 0, var(--border-color) 8px, transparent 8px, transparent 16px);
        z-index: 0;
    }
}

.step-card { 
    background: var(--bg-main); 
    padding: var(--spacing-md); 
    border-radius: 16px; 
    border: 1px solid var(--border-color); 
    text-align: center; 
    overflow: visible; 
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
.step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(37, 99, 235, 0.12);
    border-color: rgba(37, 99, 235, 0.3);
}

.step-number {
    position: relative;
    width: 64px;
    height: 64px;
    margin: 0 auto 1.5rem auto;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color) 0%, #60a5fa 100%);
    box-shadow: 0 8px 16px rgba(37, 99, 235, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}
.step-card:hover .step-number {
    transform: scale(1.1) rotate(5deg);
}
.step-number span {
    font-family: var(--font-heading);
    font-weight: 800;
    font-size: 1.75rem;
    color: #ffffff;
}
.step-card p { color: var(--text-muted); margin: 0; font-size: 0.95rem; line-height: 1.5; }

/* Benefits list (Virtual Office) reuses feature-list tick styling */
.benefits-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-md); }

/* Services page: in-page category jump nav */
.services-subnav {
    position: sticky;
    top: var(--header-height);
    z-index: 40;
    background: var(--bg-main);
    border-bottom: 1px solid var(--border-color);
    transition: top 0.3s ease;
}

body.header-hidden .services-subnav {
    top: 0;
}

/* Offset anchor-jump targets so they land below the sticky header + subnav */
#workspaces, #meetings-events, #virtual-day-pass, #whats-included, #how-to-join, #faq {
    scroll-margin-top: calc(var(--header-height) + 60px);
}
.services-subnav .container {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.75rem;
    overflow-x: auto;
    padding: 0.85rem 1.5rem;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE / Edge */
    -webkit-overflow-scrolling: touch;
}

@media (min-width: 1200px) {
    .services-subnav .container {
        justify-content: center;
        padding-left: 2rem;
        padding-right: 2rem;
    }
}

.services-subnav .container::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.services-subnav a {
    white-space: nowrap;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-muted);
    padding: 0.4rem 1rem;
    border-radius: 999px;
    transition: all 0.25s ease;
    border: 1px solid transparent;
    flex-shrink: 0;
}
.services-subnav a:hover { 
    color: var(--primary-color); 
    background: rgba(37, 99, 235, 0.08);
    border-color: rgba(37, 99, 235, 0.2);
}

/* ==========================================================================
   Services Page: Distinct Edge-to-Edge Border Streams per Category
   (All content, badges, and typography strictly preserve brand blue)
   ========================================================================== */

/* 1. Workspaces (Royal Sapphire Blue Border Stream) */
#workspaces {
    --cat-glow: rgba(37, 99, 235, 0.16);
    --cat-stream: linear-gradient(90deg, #1d4ed8 0%, #3b82f6 25%, #ffffff 50%, #60a5fa 75%, #1d4ed8 100%);
}

/* 2. Meetings & Events (Violet / Indigo Border Stream) */
#meetings-events {
    --cat-glow: rgba(124, 58, 237, 0.16);
    --cat-stream: linear-gradient(90deg, #6d28d9 0%, #a855f7 25%, #ffffff 50%, #c084fc 75%, #6d28d9 100%);
}

/* 3. Virtual & Day Pass (Cyan / Ocean Teal Border Stream) */
#virtual-day-pass {
    --cat-glow: rgba(6, 182, 212, 0.16);
    --cat-stream: linear-gradient(90deg, #0284c7 0%, #06b6d4 25%, #ffffff 50%, #38bdf8 75%, #0284c7 100%);
}

/* 4. What's Included (Sunset Amber Border Stream) */
#whats-included {
    --cat-glow: rgba(217, 119, 6, 0.16);
    --cat-stream: linear-gradient(90deg, #b45309 0%, #f59e0b 25%, #ffffff 50%, #fbbf24 75%, #b45309 100%);
}

/* 5. Coimbatore Guides (Coral Rose Border Stream) */
#coimbatore-guides {
    --cat-glow: rgba(225, 29, 72, 0.16);
    --cat-stream: linear-gradient(90deg, #be123c 0%, #f43f5e 25%, #ffffff 50%, #fb7185 75%, #be123c 100%);
}

/* Category section heading (eyebrow + title + subtitle) */
.category-eyebrow {
    display: block;
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.8rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 0.5rem;
}

/* Rich service card: photo, badge, title, bullets, CTA with edge-to-edge border stream */
.service-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
/* Explicit column counts for groups with more than 4 cards, so the last row
   stays tidy instead of auto-fit cramming in as many 250px columns as the
   container allows (e.g. 4 per row when 3 was intended for a 6-card group). */
.service-feature-grid.sfg-3 { grid-template-columns: repeat(3, 1fr); }
.service-feature-grid.sfg-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 992px) {
    /* Fixed column counts have no minmax floor, so drop to 2 columns before
       cards get uncomfortably narrow on tablet widths. */
    .service-feature-grid.sfg-3,
    .service-feature-grid.sfg-4 {
        grid-template-columns: repeat(2, 1fr);
    }
}
.service-feature-card {
    position: relative;
    background: 
        linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
        linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(226, 232, 240, 0.9) 100%) border-box;
    border: 1.5px solid transparent;
    border-radius: 14px;
    overflow: hidden;
    text-align: left;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease;
    display: flex;
    flex-direction: column;
}
.service-feature-card:hover { 
    transform: translateY(-6px); 
    background: 
        linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
        var(--cat-stream, linear-gradient(90deg, #2563eb 0%, #60a5fa 25%, #ffffff 50%, #38bdf8 75%, #2563eb 100%)) border-box;
    background-size: 100% 100%, 250% 100%;
    background-position: 0 0, 0% 50%;
    animation: brochureBorderStream 3s ease infinite;
    box-shadow: 0 18px 40px var(--cat-glow, rgba(37, 99, 235, 0.14)), 0 4px 12px rgba(0,0,0,0.04); 
}
.service-feature-card .sfc-photo { 
    position: relative;
    border-radius: 0; 
    min-height: 200px; 
    overflow: hidden;
}

/* Same uniform diagonal white shine as Home & About pages */
.service-feature-card .sfc-photo::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.55) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
}

.service-feature-card:hover .sfc-photo::after {
    animation: serviceSweep 0.9s ease forwards;
}

.service-feature-card .sfc-photo img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
    display: block;
    width: 100%;
}

.service-feature-card:hover .sfc-photo img {
    transform: scale(1.08);
    filter: brightness(1.05);
}
.service-feature-card .sfc-body { padding: var(--spacing-md); display: flex; flex-direction: column; flex: 1; }
.service-feature-card .plan-badge {
    background: var(--contact-icon-bg);
    color: var(--primary-color);
}
.service-feature-card h3 { font-size: 1.3rem; margin: 0.75rem 0 0.5rem; }
.service-feature-card > .sfc-body > p { color: var(--text-muted); margin-bottom: 1rem; }
.service-feature-card .feature-list { margin-bottom: 1.25rem; }
.service-feature-card .feature-list li { font-size: 0.95rem; margin-bottom: 0.6rem; }
.service-feature-card .feature-list li i { color: var(--primary-color); }
.sfc-cta { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--primary-color); margin-top: auto; transition: color 0.25s ease; }
.sfc-cta i { transition: transform 0.25s ease; }
.service-feature-card:hover .sfc-cta i { transform: translateX(4px); }
.service-feature-card:hover .sfc-cta { color: var(--primary-hover); }

/* What's Included: grouped category cards with edge-to-edge border stream */
.included-groups-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: var(--spacing-md); margin-top: var(--spacing-md); }
.included-group-card { 
    position: relative;
    background: 
        linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
        linear-gradient(135deg, rgba(37, 99, 235, 0.12) 0%, rgba(226, 232, 240, 0.9) 100%) border-box;
    border: 1.5px solid transparent; 
    border-radius: 14px; 
    padding: var(--spacing-md); 
    text-align: left; 
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, background 0.35s ease;
    overflow: hidden;
}
.included-group-card:hover {
    transform: translateY(-5px);
    background: 
        linear-gradient(var(--bg-main), var(--bg-main)) padding-box,
        var(--cat-stream, linear-gradient(90deg, #b45309 0%, #f59e0b 25%, #ffffff 50%, #fbbf24 75%, #b45309 100%)) border-box;
    background-size: 100% 100%, 250% 100%;
    background-position: 0 0, 0% 50%;
    animation: brochureBorderStream 3s ease infinite;
    box-shadow: 0 16px 36px var(--cat-glow, rgba(217, 119, 6, 0.14)), 0 4px 12px rgba(0,0,0,0.04);
}
.included-group-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 12px;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all 0.3s ease;
}
.included-group-card:hover .included-group-icon {
    transform: scale(1.08) translateY(-2px);
    background: var(--primary-color);
    color: #ffffff;
    box-shadow: 0 6px 16px rgba(37, 99, 235, 0.3);
}
.included-group-card .feature-list li i { color: var(--primary-color); }
.included-group-card h3 { font-size: 1.15rem; margin-bottom: 1rem; }
.included-group-card .feature-list li { font-size: 0.95rem; margin-bottom: 0.6rem; }

/* FAQ: intro/CTA sidebar + accordion */
.faq-layout { display: grid; grid-template-columns: 1fr 2fr; gap: var(--spacing-lg); align-items: start; }
.faq-intro h2 { margin-bottom: 0.75rem; }
.faq-intro p { color: var(--text-muted); margin-bottom: 1.5rem; }
.faq-layout .faq-accordion { margin: 0; }

/* Why Choose Cards */
.why-choose-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--spacing-md); }
.why-choose-card { 
    --wc-accent: #2563eb;
    --wc-gradient: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --wc-glow: rgba(37, 99, 235, 0.25);
    background: #ffffff; 
    padding: var(--spacing-lg); 
    border-radius: 16px; 
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: 0 8px 24px rgba(0,0,0,0.04);
    text-align: left; 
    position: relative;
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}

/* Distinct color per card */
.why-choose-card:nth-child(4n+1) {
    --wc-accent: #2563eb;
    --wc-gradient: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    --wc-glow: rgba(37, 99, 235, 0.25);
}
.why-choose-card:nth-child(4n+2) {
    --wc-accent: #8b5cf6;
    --wc-gradient: linear-gradient(135deg, #7c3aed 0%, #a855f7 100%);
    --wc-glow: rgba(139, 92, 246, 0.25);
}
.why-choose-card:nth-child(4n+3) {
    --wc-accent: #0ea5e9;
    --wc-gradient: linear-gradient(135deg, #0284c7 0%, #38bdf8 100%);
    --wc-glow: rgba(14, 165, 233, 0.25);
}
.why-choose-card:nth-child(4n+4) {
    --wc-accent: #10b981;
    --wc-gradient: linear-gradient(135deg, #059669 0%, #34d399 100%);
    --wc-glow: rgba(16, 185, 129, 0.25);
}

/* Up-to-down color slide layer */
.why-choose-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: var(--wc-gradient);
    border-radius: inherit;
    transition: height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
}
.why-choose-card:hover::before {
    height: 100%;
}

/* Card colored state on hover */
.why-choose-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 45px -10px var(--wc-glow);
    border-color: transparent;
}
.why-choose-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(36, 107, 253, 0.08), rgba(36, 107, 253, 0.15));
    color: var(--wc-accent);
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    box-shadow: inset 0 2px 5px rgba(255,255,255,0.8);
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.4s ease, color 0.4s ease, box-shadow 0.4s ease;
}
.why-choose-card:hover .why-choose-icon {
    transform: scale(1.12) rotate(-6deg);
    background: rgba(255, 255, 255, 0.95);
    color: var(--wc-accent);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.why-choose-card h3 { 
    position: relative; 
    z-index: 2;
    font-size: 1.3rem; 
    margin-bottom: 0.75rem; 
    font-weight: 700; 
    color: var(--text-main); 
    transition: color 0.35s ease;
}
.why-choose-card p { 
    position: relative; 
    z-index: 2;
    color: var(--text-muted); 
    margin: 0; 
    line-height: 1.6; 
    transition: color 0.35s ease;
}
.why-choose-card:hover h3 { color: #ffffff; }
.why-choose-card:hover p { color: rgba(255, 255, 255, 0.92); }

/* Photo Strip (Community Events) */
.photo-strip { 
    display: grid; 
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); 
    gap: 1.25rem; 
}
.strip-item { 
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    cursor: pointer;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.45s ease;
    background: #0f172a;
}
.strip-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: inherit;
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
}
.strip-item:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(24, 43, 73, 0.14);
}
.strip-item:hover img {
    transform: scale(1.08);
}

/* Community Quote */
.community-quote {
    max-width: 700px;
    margin: var(--spacing-md) auto;
    padding: var(--spacing-md) var(--spacing-lg);
    border-left: 4px solid var(--primary-color);
    background: var(--bg-main);
    border-radius: 8px;
    font-size: 1.15rem;
    font-style: italic;
    color: var(--text-main);
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.community-quote:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(36, 107, 253, 0.08);
}
.community-note { color: var(--text-muted); margin-top: var(--spacing-md); }

/* Logo Strip */
.logo-strip { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 4rem; margin-top: 3rem; }
.logo-item { display: flex; align-items: center; justify-content: center; min-width: 150px; border: none; filter: grayscale(100%); opacity: 0.5; transition: all 0.4s ease; cursor: pointer; }
.logo-item:hover { filter: grayscale(0%); opacity: 1; transform: scale(1.05); }
.logo-item img { max-height: 85px; width: auto; object-fit: contain; }

/* Extra Services */
.extra-services-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: var(--spacing-md); text-align: left; }

/* FAQ Accordion */
.faq-accordion { max-width: 100%; margin: 0 auto; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--spacing-sm) var(--spacing-md); align-items: start; }
@media (max-width: 768px) {
    .services-grid.grid-fixed-4 {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 0.5rem;
    }
    .services-grid .service-content {
        padding: 0.5rem;
        width: 100%;
        margin-top: 0;
    }
    .services-grid .service-content h3 {
        font-size: 0.85rem;
        margin-bottom: 0.2rem;
    }
    .services-grid .service-content p {
        display: none !important;
    }
    .services-grid .service-img {
        height: 150px !important;
    }
    .services-grid .service-link-wrapper {
        margin-top: 0.4rem;
    }
    .services-grid .service-arrow {
        width: 24px;
        height: 24px;
        font-size: 10px;
    }
}
.faq-cat-btn {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted);
    padding: 6px 14px;
    border-radius: 20px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.3s;
}
.faq-cat-btn:hover, .faq-cat-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}
.faq-item { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 8px; overflow: hidden; }
.faq-question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-sm); background: none; border: none; padding: var(--spacing-sm) var(--spacing-md); font-family: var(--font-family); font-size: 1.05rem; font-weight: 600; color: var(--text-main); text-align: left; cursor: pointer; }
.faq-question i { color: var(--primary-color); transition: transform 0.3s ease; flex-shrink: 0; }
.faq-item.active .faq-question i { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.faq-answer p { padding: 0 var(--spacing-md) var(--spacing-md); color: var(--text-muted); }
.faq-answer .feature-list { padding: 0 var(--spacing-md) var(--spacing-md); }
.faq-item.active .faq-answer { max-height: 600px; }

/* ==========================================================================
   Media Queries
   ========================================================================== */

/* Mobile: up to 1023px (Tablet/Mobile) */
@media screen and (max-width: 1023px) {
    .mobile-nav-actions {
        display: flex;
        align-items: center;
        gap: 0.65rem;
    }

    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        border-radius: 8px;
        background: var(--bg-alt);
        color: var(--text-main);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .btn-mobile-header {
        display: inline-flex !important;
        align-items: center;
        gap: 0.4rem;
        padding: 0.46rem 0.95rem;
        font-size: 0.8125rem;
        font-weight: 600;
        border-radius: 0.45rem;
        line-height: 1.2;
        box-shadow: 0 3px 10px rgba(11, 59, 140, 0.3);
        white-space: nowrap;
    }

    .btn-mobile-header i {
        font-size: 0.85rem;
    }

    .grid-fixed-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .enquiry-form-container {
        border-left: none;
        border-top: 1px solid rgba(37, 99, 235, 0.15);
    }

    .faq-layout {
        grid-template-columns: 1fr;
    }

    /* Mobile nav drawer: a slide-in panel (not full-width) with icon badges,
       a staggered entrance animation for each row, a tap-to-expand Services
       submenu animated via grid-rows (grows to its real content height
       instead of a guessed max-height), and the primary CTA pinned to the
       bottom. */
    .main-nav {
        position: fixed;
        top: var(--header-height);
        left: 0;
        width: 85%;
        max-width: 340px;
        height: calc(100vh - var(--header-height));
        background-color: var(--bg-main);
        flex-direction: column;
        justify-content: space-between;
        align-items: stretch;
        padding: 0;
        transform: translateX(-100%);
        transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.35s ease;
        overflow-y: auto;
        box-shadow: none;
        border-right: 1px solid var(--border-color);
    }

    .main-nav.active {
        transform: translateX(0);
        box-shadow: 10px 0 40px rgba(0,0,0,0.12);
    }

    .nav-links {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        gap: 0;
        padding: 0.5rem 0;
    }

    .nav-links li {
        display: block;
        width: 100%;
        text-align: left;
        opacity: 0;
        transition: opacity 0.25s ease;
    }

    .main-nav.active .nav-links > li {
        opacity: 1;
    }

    .main-nav.active .nav-links > li:nth-child(1) { transition-delay: 0.06s; }
    .main-nav.active .nav-links > li:nth-child(2) { transition-delay: 0.11s; }
    .main-nav.active .nav-links > li:nth-child(3) { transition-delay: 0.16s; }
    .main-nav.active .nav-links > li:nth-child(4) { transition-delay: 0.21s; }
    .main-nav.active .nav-links > li:nth-child(5) { transition-delay: 0.26s; }

    .nav-links a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.8rem 1.25rem;
        font-size: 1rem;
        border-radius: 0;
        border-bottom: none;
        border-left: 3px solid transparent;
        color: var(--text-main);
        transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    }

    .nav-links a::before {
        display: none;
    }

    .nav-links a:active {
        background: rgba(37, 99, 235, 0.12);
    }

    .nav-links a:hover,
    .nav-links a.active {
        background: rgba(37, 99, 235, 0.08);
        border-left-color: var(--primary-color);
        color: var(--primary-color);
    }

    .nav-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 32px;
        height: 32px;
        margin-right: 12px;
        font-size: 0.92rem;
        border-radius: 9px;
        background: var(--bg-alt);
        color: var(--text-muted);
        transition: background 0.2s ease, color 0.2s ease;
        flex-shrink: 0;
    }

    .dropdown-icon-desktop {
        display: none;
    }

    .nav-links a:hover .nav-icon,
    .nav-links a.active .nav-icon {
        background: rgba(37, 99, 235, 0.12);
        color: var(--primary-color);
    }

    .nav-link-row {
        align-items: stretch;
    }

    .nav-link-row a {
        flex: 1;
    }

    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        border-left: 1px solid var(--border-color);
        font-size: 0.85rem;
        color: var(--text-muted);
        transition: background 0.2s ease, color 0.2s ease;
    }

    .dropdown-toggle:active {
        background: rgba(37, 99, 235, 0.1);
    }

    .dropdown-toggle .dropdown-icon {
        margin: 0;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .has-dropdown.mobile-open .dropdown-toggle {
        color: var(--primary-color);
        background: rgba(37, 99, 235, 0.06);
    }

    .has-dropdown.mobile-open .dropdown-toggle .dropdown-icon {
        transform: rotate(180deg);
    }

    /* Collapse via max-height rather than animating grid-template-rows:
       interpolating "fr" track sizes is a newer, less consistently
       implemented animation across mobile browsers, and has been seen to
       render incorrectly (clipped/garbled content) on some devices. A
       generously-sized max-height (well above the 5-item list's real
       content height) is old, boring, and reliably supported everywhere. */
    .dropdown-menu-wrap {
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .has-dropdown.mobile-open .dropdown-menu-wrap {
        max-height: 420px;
    }

    .dropdown-menu {
        position: static !important;
        display: block !important;
        width: 100% !important;
        min-width: 0;
        min-height: 0;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        margin: 0 !important;
        box-shadow: none;
        border: none;
        border-radius: 0;
        background: transparent;
        padding: 0;
        overflow: visible;
    }

    .dropdown-menu li {
        width: 100%;
        opacity: 0;
        transition: opacity 0.2s ease;
    }

    .has-dropdown.mobile-open .dropdown-menu li {
        opacity: 1;
    }

    .dropdown-menu li a {
        display: flex;
        align-items: center;
        width: 100%;
        padding: 0.65rem 1.25rem 0.65rem 1.25rem;
        padding-left: 3.25rem;
        font-size: 0.88rem;
        color: var(--text-muted);
        border-left: 3px solid transparent;
    }

    .dropdown-menu li a:hover,
    .dropdown-menu li a:active,
    .dropdown-menu li a.active,
    .dropdown-menu li.active a {
        background: rgba(37, 99, 235, 0.08);
        color: var(--primary-color);
        border-left-color: var(--primary-color);
        font-weight: 600;
    }

    .dropdown-menu li a i {
        display: inline-flex;
        width: 16px;
        margin-right: 10px;
        font-size: 0.75rem;
        color: inherit;
    }

    .header-actions {
        margin-top: 0;
        flex-direction: column;
        width: 100%;
        padding: 1rem 1.25rem;
        border-top: 1px solid var(--border-color);
    }

    .header-actions .btn {
        width: 100%;
        justify-content: center;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }

    .nav-backdrop {
        position: fixed;
        inset: var(--header-height) 0 0 0;
        background: rgba(15, 23, 42, 0.45);
        z-index: 998;
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    .nav-backdrop.active {
        opacity: 1;
        visibility: visible;
    }

    @media screen and (max-width: 420px) {
        .brand-icon img {
            height: 48px;
            width: 54px;
        }
        .brand-name {
            font-size: 1.45rem;
        }
        .brand-logo .tagline {
            display: none;
        }
        .btn-mobile-header {
            padding: 0.42rem 0.72rem;
            font-size: 0.76rem;
            gap: 0.3rem;
        }
    }

    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
    
    .split-layout {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }
    
    .split-layout.reverse .split-content {
        order: 2;
    }
    
    .split-layout.reverse .split-img {
        order: 1;
    }
    
    .hero-content h1 {
        font-size: 2.6rem;
        font-weight: 900;
    }

    /* Below desktop width, stack the scrolling strip above the static CTA
       panel instead of squeezing them side by side. */
    .gallery-row {
        flex-direction: column;
        height: auto;
        gap: 20px;
    }

    .gallery-scroll-viewport {
        height: 190px;
    }

    .gallery-img {
        flex-basis: 300px;
    }

    .gallery-collage-cta {
        flex-basis: auto;
        padding: 2rem 1.75rem;
    }
}

/* Mobile: up to 767px (Small Mobile/Mobile) */
@media screen and (max-width: 767px) {
    :root {
        --spacing-xl: 3.5rem;
    }

    /* AOS's fade-left/fade-right reveal animations slide elements in from
       100px off to the side. In a single stacked mobile column that slide
       has no visual purpose (the before/after position is identical) and,
       worse, that offset briefly expands the page's horizontal scrollable
       area until the element settles -- causing a transient sideways
       scroll/misalignment on phones. Keep the fade, drop the slide. */
    [data-aos="fade-left"],
    [data-aos="fade-right"] {
        transform: none !important;
    }

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

    /* Amenities: the desktop layout sizes each card at 25% (4 per row) with a
       160px floor, so on a phone-width screen two cards no longer fit side by
       side and everything stacks into one long single-file column. Switch to
       a 3-column grid with compact spacing instead, sized to the content. */
    .amenities-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        align-items: stretch;
        gap: 0.7rem;
        max-width: 100%;
    }

    .amenity-item {
        width: auto;
        min-width: 0;
        min-height: 118px;
        padding: 1rem 0.5rem;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
    }

    .amenity-icon-wrapper {
        margin-bottom: 0.6rem;
    }

    .amenity-item i {
        font-size: 1.3rem;
    }

    .amenity-item p {
        font-size: 0.78rem;
        line-height: 1.3;
    }

    /* Trim the stacked padding at the Services -> Amenities seam: the services
       card's own bottom padding, the section's bottom padding, and the next
       section's top padding were all adding up on top of each other. The
       section itself has no background colour (only the card does), so any
       padding left here shows as a plain white gap before the Amenities
       section's own seam-blend gradient even starts. */
    .services-overview {
        padding-bottom: 0;
    }

    .services-header-right {
        margin-top: 0.25rem;
    }

    .services-badge-icon {
        width: 30px !important;
        height: 30px !important;
        min-width: 30px !important;
        font-size: 0.75rem !important;
    }

    .services-badge-text {
        font-size: 0.92rem !important;
        white-space: nowrap !important;
    }

    .amenities-section {
        padding: 2.25rem 0;
    }

    .amenity-context {
        font-size: 0.65rem;
        height: 14px;
    }


    .tour-actions {
        flex-direction: column;
    }
    
    .tour-actions .btn {
        width: 100%;
    }
    
    .footer-bottom .flex-between {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }

    .contact-grid {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        gap: 20px !important;
        overflow: visible !important;
        display: flex;
        flex-direction: column;
    }
    
    .contact-info {
        background: transparent !important;
        box-shadow: none !important;
        border-radius: 0 !important;
        width: 100%;
        box-sizing: border-box;
    }
    
    .contact-details {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(30, 70, 120, 0.08);
        padding: 22px 18px;
        margin-bottom: 0 !important;
    }
    
    .contact-badge {
        justify-content: center !important;
    }
    
    .contact-heading {
        text-align: center !important;
    }
    
    .contact-info-inner > p {
        text-align: center !important;
        margin-left: auto;
        margin-right: auto;
    }
    
    .enquiry-form-container {
        background: #ffffff;
        border-radius: 20px;
        box-shadow: 0 8px 30px rgba(30, 70, 120, 0.08);
        border: none !important;
        width: 100%;
        box-sizing: border-box;
        padding: 22px 18px !important;
    }

    .contact-info-inner {
        padding: 0 16px !important;
    }
    
    .contact-map {
        margin-top: 22px;
        overflow: hidden;
        border-radius: 16px;
        aspect-ratio: 16 / 9;
        height: auto !important;
    }
    
    .contact-map iframe {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
    }

    .contact-social a[aria-label="WhatsApp"] {
        position: fixed !important;
        right: 18px !important;
        bottom: 20px !important;
        width: 52px !important;
        height: 52px !important;
        z-index: 1000 !important;
        box-shadow: 0 4px 15px rgba(37, 211, 102, 0.4);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-heading {
        font-size: 2rem;
    }

    /* Testimonials (home page only): one card per row with arrow buttons to
       step through them, instead of all 3 cards stacked full-width. */
    .home-testimonials .testimonials-grid {
        display: flex;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        gap: var(--spacing-md);
    }

    .home-testimonials .testimonials-grid::-webkit-scrollbar {
        display: none;
    }

    .home-testimonials .testimonial-card {
        flex: 0 0 100%;
        scroll-snap-align: center;
    }

    .home-testimonials .testimonial-nav-btn {
        display: flex;
        top: auto;
        bottom: -40px;
        transform: none;
    }
    .home-testimonials .testimonial-nav-btn.prev {
        left: calc(50% - 45px);
    }
    .home-testimonials .testimonial-nav-btn.next {
        left: calc(50% + 5px);
        right: auto;
    }
    .testimonials-slider-wrapper {
        margin-bottom: 50px;
    }

    /* Smaller strip tiles on phones, CTA panel full-width below. */
    .gallery-scroll-viewport {
        height: 140px;
    }

    .gallery-img {
        flex: 0 0 240px;
    }

    .gallery-collage-cta {
        padding: 1.5rem 1.25rem;
        gap: 0.6rem;
        align-items: center;
        text-align: center;
    }

    .gallery-collage-cta i {
        font-size: 1.4rem;
    }

    .gallery-collage-cta h2 {
        font-size: 1.25rem;
    }

    .gallery-collage-cta p {
        font-size: 0.85rem;
        max-width: none;
    }

    .gallery-collage-cta .btn {
        padding: 0.6rem 1.4rem;
        font-size: 0.9rem;
    }

    .section-title {
        font-size: 2rem;
    }

    .banner-content h1 {
        font-size: 2.2rem;
    }

    .hero-content h1 {
        font-size: 2rem;
        font-weight: 900;
        text-shadow: none;
    }

    .hero-content p {
        font-size: 1.05rem;
        font-weight: 400;
        color: #ffffff;
        text-shadow: none;
    }

    /* Keep both hero buttons on one row on mobile. Wrapping them onto two
       lines makes the hero content taller than the hero section's fixed
       height can hold, so the second button (WhatsApp) was getting clipped
       off by the section's overflow:hidden instead of just reflowing. */
    .hero-buttons {
        flex-wrap: nowrap;
        gap: 0.5rem;
        margin-bottom: 1.5rem;
    }

    .hero-buttons .btn {
        padding: 0.65rem 0.9rem;
        font-size: 0.85rem;
        white-space: nowrap;
    }

    /* The hero section has a fixed min-height (it hosts absolutely-positioned
       cross-fading slides, so it can't just be height:auto) and the heading/
       paragraph wrap onto more lines the narrower the screen gets. Give it
       more room and shift the content up less aggressively so the buttons
       and stats panel reliably fit instead of being clipped by overflow:hidden. */
    .page-banner {
        padding: 60px 0;
    }

    .hero-section {
        min-height: 700px;
        height: 100vh;
    }

    .hero-content {
        margin-top: -220px;
    }

    /* On mobile the heading/paragraph wrap onto several lines and their total
       height varies per slide, so no single fixed arrow position stays clear
       of the text on every slide. The carousel already auto-rotates every 7s
       and there's no swipe gesture to replace these with, so hide them here
       rather than have them sit on top of the text. */
    .slider-btn {
        display: none;
    }

    .hero-counters-wrapper {
        bottom: 110px;
    }

    .counters-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--spacing-sm);
        padding: 1rem;
    }
    .counters-grid .counter-card {
        padding: 0 0.5rem;
    }
    .counters-grid .counter-card:nth-child(even) {
        border-right: none;
    }
    
    .why-choose-card,
    .purpose-card {
        padding: 1.5rem;
    }

    .icon-cards-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--spacing-sm);
    }

    /* Services page cards: on mobile, show two compact cards per row instead
       of one full card per row. Each card only has room for a photo, plan
       badge and title at this width, so the description and checklist (still
       shown in full on the dedicated service page) are hidden here, and the
       whole card becomes the tap target via the existing "Enquire about X"
       link stretched to cover it -- no need to show that link's text twice. */
    .service-feature-grid,
    .service-feature-grid.sfg-3,
    .service-feature-grid.sfg-4 {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.75rem;
    }

    .service-feature-card {
        position: relative;
    }

    .service-feature-card .sfc-photo,
    .service-feature-card .sfc-photo img {
        height: 100px !important;
        min-height: 100px;
    }

    .service-feature-card .sfc-body {
        padding: 0.75rem;
    }

    .service-feature-card .plan-badge {
        padding: 0.2rem 0.6rem;
        font-size: 0.68rem;
    }

    .service-feature-card h3 {
        font-size: 0.95rem;
        margin: 0.5rem 0 0;
        line-height: 1.3;
    }

    .service-feature-card > .sfc-body > p,
    .service-feature-card .feature-list {
        display: none;
    }

    /* Hide the link's text (the description already explains the plan) but
       keep its arrow icon as a small "tap for details" affordance. */
    .service-feature-card .sfc-cta {
        font-size: 0;
        margin-top: 0.4rem;
    }

    .service-feature-card .sfc-cta i {
        font-size: 0.8rem;
    }

    .service-feature-card .sfc-cta::before {
        content: '';
        position: absolute;
        inset: 0;
    }

    .counter-card h3 {
        font-size: 1.3rem;
    }

    .counter-card p {
        font-size: 0.7rem;
    }

    .counter-combo-value {
        font-size: 1.25rem;
    }

    .counter-combo-label {
        font-size: 0.75rem;
    }

    .counter-card-phone h3 {
        font-size: 0.98rem;
    }

    .counters-note {
        font-size: 0.75rem;
    }

    .amenities-title {
        font-size: 1.8rem;
    }

    .grid-fixed-4 {
        grid-template-columns: 1fr !important;
    }

    /* Home page "Our Services" cards: show 2 per row instead of 1, following
       the same simplified-card pattern used on the /services page -- image,
       title and a small arrow, with the longer description hidden since the
       whole card already links through to that service's full details. */
    

    .service-card .service-img,
    .service-card img.service-img {
        height: 130px !important;
    }

    .service-content {
        padding: 0.6rem 0.5rem;
    }

    .service-content h3 {
        font-size: 0.95rem;
        margin-bottom: 0.4rem;
    }

    .service-content p {
        display: none;
    }

    .service-arrow {
        width: 30px;
        height: 30px;
        font-size: 0.8rem;
    }
}


/* Contact Section decorative background */
.contact-section { position: relative; overflow: hidden; }

.contact-bg-blob {
    position: absolute;
    border-radius: 50%;
    background: var(--primary-color);
    filter: blur(90px);
    pointer-events: none;
    z-index: 0;
}
.contact-bg-blob.blob-1 { width: 420px; height: 420px; top: -140px; left: -140px; opacity: 0.12; }
.contact-bg-blob.blob-2 { width: 360px; height: 360px; bottom: -160px; right: -120px; opacity: 0.08; }

/* Glassmorphism for Contact Info */
.contact-info {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
}

.contact-info-inner {
    padding: 2.75rem 2.75rem 2.75rem 1rem;
    width: 100%;
    display: flex;
    flex-direction: column;
}
.contact-info-inner p { color: var(--text-muted); }

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

.contact-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
}

.contact-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--contact-icon-bg);
    color: var(--primary-color);
    font-size: 1.05rem;
}

.contact-row h4 { font-size: 0.95rem; margin-bottom: 0.2rem; }
.contact-row p, .contact-row a { color: var(--text-muted); margin: 0; font-size: 0.95rem; }
.contact-row a:hover { color: var(--primary-color); }

.contact-social {
    margin-top: auto;
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--contact-glass-border);
}
.contact-social > span { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.75rem; }


/* ==========================================================================
   Shared Workspace page (sw-*): varied layouts per section
   ========================================================================== */
.sw-proof { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 2.5rem; margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--border-color); }
.sw-proof span { font-weight: 600; color: var(--secondary-color); font-size: 0.95rem; }
.sw-proof i { color: var(--primary-color); margin-right: 0.5rem; }

/* Service Introduction Structured Showcase Card */
.sw-intro-section {
    padding-top: 2.75rem; /* was 3.5rem */
    padding-bottom: 2.75rem;
}

.sw-intro-card {
    position: relative;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    border-radius: 24px;
    padding: 3.25rem 3.5rem;
    box-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.04), 0 20px 25px -5px rgba(37, 99, 235, 0.03);
    text-align: center;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.sw-intro-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #2563eb, #38bdf8, #2563eb);
}

.sw-intro-header {
    margin-bottom: 1.5rem;
}

.sw-intro-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-color);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 0.4rem 1.1rem;
    border-radius: 999px;
    border: 1px solid rgba(37, 99, 235, 0.15);
    margin-bottom: 0.85rem;
}

.sw-intro-eyebrow i {
    font-size: 0.85rem;
}

.sw-intro-title {
    font-size: 2rem;
    font-weight: 700;
    color: var(--secondary-color);
    letter-spacing: -0.02em;
    margin: 0;
    line-height: 1.3;
}

.sw-intro-body {
    max-width: 880px;
    margin: 0 auto;
}

.sw-intro-lead {
    font-size: 1.125rem;
    line-height: 1.8;
    color: var(--text-muted);
    margin: 0;
}

.sw-intro-highlights {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
    margin-top: 2.25rem;
    padding-top: 2rem;
    border-top: 1px dashed var(--border-color);
}

.sw-intro-pill {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.85rem 1.1rem;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 14px;
    text-align: left;
    transition: all 0.25s ease;
}

.sw-intro-pill:hover {
    border-color: rgba(37, 99, 235, 0.35);
    background: var(--bg-main);
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(37, 99, 235, 0.08);
}

.sw-intro-pill-icon {
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 10px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.95rem;
    transition: background 0.25s ease, color 0.25s ease;
}

.sw-intro-pill:hover .sw-intro-pill-icon {
    background: var(--primary-color);
    color: #ffffff;
}

.sw-intro-pill-text {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--secondary-color);
    line-height: 1.35;
}

.sw-intro-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    margin-top: 2.5rem;
}

.sw-intro-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.85rem 2.5rem;
    font-size: 1.05rem;
    font-weight: 600;
    border-radius: 999px;
    box-shadow: 0 6px 18px var(--primary-shadow);
    transition: all 0.3s ease;
}

.sw-intro-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 24px var(--primary-shadow-strong);
}

.sw-intro-btn i {
    transition: transform 0.25s ease;
}

.sw-intro-btn:hover i {
    transform: translateX(4px);
}

/* Show only the hover arrow every .btn-primary adds (like the other buttons), not a second, always-visible one */
.sw-intro-btn i {
    display: none;
}

.sw-intro-subnote {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    font-weight: 500;
}

.sw-intro-subnote i {
    color: #10b981;
}

@media (max-width: 991px) {
    .sw-intro-card {
        padding: 2.5rem 2rem;
    }
    .sw-intro-highlights {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    .sw-intro-title {
        font-size: 1.65rem;
    }
}

@media (max-width: 640px) {
    .sw-intro-card {
        padding: 2rem 1.25rem;
        border-radius: 18px;
    }
    .sw-intro-highlights {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    .sw-intro-title {
        font-size: 1.35rem;
    }
    .sw-intro-lead {
        font-size: 1rem;
        line-height: 1.7;
    }
    .sw-intro-btn {
        width: 100%;
        justify-content: center;
    }
    .sw-intro-subnote {
        font-size: 0.78rem;
        text-align: center;
    }
}


/* Editorial 24/7 */
.sw-editorial { display: grid; grid-template-columns: 1.1fr 1fr; gap: 4rem; align-items: center; }
.sw-ed-media { position: relative; }
.sw-ed-media img { width: 100%; height: 100%; min-height: 380px; max-height: 520px; object-fit: cover; border-radius: 14px; display: block; }
.sw-ed-badge { position: absolute; left: -1rem; bottom: 2rem; background: var(--primary-color); color: #fff; border-radius: 12px; padding: 1rem 1.4rem; font-family: var(--font-heading); box-shadow: 0 12px 30px var(--primary-shadow); }
.sw-ed-badge strong { display: block; font-size: 2rem; line-height: 1; }
.sw-ed-badge small { font-size: 0.8rem; opacity: 0.9; }
.sw-ed-body .section-title { text-align: left; }
.sw-ed-body > p { color: var(--text-muted); }


/* Workspace listing cards */
.sw-listings { display: grid; grid-template-columns: 1.25fr 1fr 1fr; gap: 1.5rem; margin-top: 2.5rem; align-items: stretch; text-align: left; }
.sw-listing { background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; transition: transform .25s, box-shadow .25s; }
.sw-listing:hover { transform: translateY(-4px); box-shadow: 0 16px 36px var(--primary-shadow); }
.sw-listing-img { position: relative; }
.sw-listing-img img { width: 100%; height: 230px; object-fit: cover; display: block; }
.sw-listing.featured .sw-listing-img img { height: 230px; }
.sw-tag { position: absolute; top: 0.9rem; left: 0.9rem; background: rgba(15, 23, 42, .85); color: #fff; font-size: 0.75rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 999px; }
.sw-listing-body { padding: 1.4rem; display: flex; flex-direction: column; gap: 0.75rem; flex: 1; }
.sw-listing-body h3 { margin: 0; font-size: 1.2rem; }
.sw-listing-body p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }
.sw-meta { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.sw-meta span { font-size: 0.78rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 999px; padding: 0.2rem 0.65rem; color: var(--text-main); }
.sw-listing-foot { margin-top: auto; padding-top: 1rem; border-top: 1px solid var(--border-color); display: flex; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.85rem; color: var(--text-muted); }
.sw-listing-foot a { color: var(--primary-color); font-weight: 600; text-decoration: none; white-space: nowrap; }

/* Location: full-width image + overlay panel */
.sw-location { position: relative; min-height: 560px; display: flex; align-items: center; background-size: cover; background-position: center; color: #fff; }
.sw-location::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15,23,42,.92) 0%, rgba(15,23,42,.7) 45%, rgba(15,23,42,.15) 100%); }
.sw-location .container { position: relative; }
.sw-loc-panel { max-width: 540px; }
.sw-loc-panel .category-eyebrow { color: #93c5fd; }
.sw-loc-panel h2 { color: #fff; text-align: left; }
.sw-loc-panel p { color: #e2e8f0; }
.sw-address { display: flex; gap: 0.8rem; align-items: flex-start; margin: 1.25rem 0; padding: 1rem 1.2rem; border: 1px solid rgba(255,255,255,.25); border-radius: 12px; background: rgba(255,255,255,.08); backdrop-filter: blur(6px); }
.sw-address i { color: #93c5fd; margin-top: 0.25rem; }
.sw-loc-points { list-style: none; padding: 0; margin: 0 0 1.5rem; display: grid; gap: 0.9rem; }
.sw-loc-points li { color: #e2e8f0; font-size: 0.95rem; padding-left: 1.4rem; position: relative; }
.sw-loc-points li::before { content: "\f3c5"; font-family: "Font Awesome 6 Free", sans-serif; font-weight: 900; position: absolute; left: 0; color: #93c5fd; font-size: 0.8rem; top: 0.15rem; }
.sw-loc-points strong { color: #fff; display: block; }

/* Bento amenities */
.sw-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: 1rem; margin-top: 2.5rem; text-align: left; }
.sw-tile { position: relative; border-radius: 16px; overflow: hidden; padding: 1.4rem; display: flex; flex-direction: column; justify-content: flex-end; background: var(--bg-alt); border: 1px solid var(--border-color); }
.sw-tile h3 { margin: 0 0 0.35rem; font-size: 1.05rem; }
.sw-tile p { margin: 0; font-size: 0.9rem; color: var(--text-muted); }
.sw-tile > i { position: absolute; top: 1.2rem; left: 1.4rem; font-size: 1.5rem; color: var(--primary-color); }
.sw-tile.photo { border: 0; color: #fff; background-size: cover; background-position: center; }
.sw-tile.photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 25%, rgba(15,23,42,.88) 100%); }
.sw-tile.photo > * { position: relative; }
.sw-tile.photo h3 { color: #fff; }
.sw-tile.photo p { color: #e2e8f0; }
.sw-tile.photo > i { top: auto; left: auto; color: #93c5fd; margin-bottom: 0.6rem; }
.sw-tile.accent { background: var(--primary-color); border: 0; color: #fff; }
.sw-tile.accent h3, .sw-tile.accent p, .sw-tile.accent > i { color: #fff; }
.sw-tile.big { grid-column: span 2; grid-row: span 2; }
.sw-tile.wide { grid-column: span 2; }
.sw-tile.tall { grid-row: span 2; }

/* Audience stories */
.sw-stories { display: grid; gap: 4rem; margin-top: 3rem; text-align: left; }
.sw-story { display: grid; grid-template-columns: 1fr 1fr; gap: 3.5rem; align-items: center; }
.sw-story:nth-child(even) .sw-story-img { order: 2; }
.sw-story-img img { width: 100%; height: 300px; object-fit: cover; border-radius: 14px; display: block; }
.sw-story-num { font-family: var(--font-heading); font-weight: 800; font-size: 0.9rem; color: var(--primary-color); letter-spacing: .1em; }
.sw-story h3 { font-size: 1.6rem; margin: 0.4rem 0 0.8rem; }
.sw-story p { color: var(--text-muted); margin: 0; }

/* Why shared: big numerals, no boxes */
.sw-why { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 3rem; text-align: left; }
.sw-why > div { padding: 0 2rem; border-left: 1px solid var(--border-color); }
.sw-why > div:first-child { border-left: 0; padding-left: 0; }
.sw-why > div:last-child { padding-right: 0; }
.sw-why .num { font-family: var(--font-heading); font-size: 4.5rem; font-weight: 800; line-height: 1; color: var(--primary-color); opacity: .25; }
.sw-why h3 { margin: 0.5rem 0 0.7rem; font-size: 1.2rem; }
.sw-why p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Horizontal steps */
.sw-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-top: 3rem; position: relative; text-align: center; }
.sw-steps::before { content: ""; position: absolute; top: 28px; left: 16.6%; right: 16.6%; border-top: 2px dashed var(--border-color); }
.sw-step { position: relative; }
.sw-step-dot { width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.1rem; background: var(--primary-color); color: #fff; display: grid; place-items: center; font-family: var(--font-heading); font-weight: 800; font-size: 1.2rem; box-shadow: 0 0 0 8px var(--bg-alt); }
.sw-step h3 { font-size: 1.1rem; margin: 0 0 0.5rem; }
.sw-step p { margin: 0; color: var(--text-muted); font-size: 0.95rem; }

/* Closing photographic CTA */
.sw-cta { position: relative; padding: 7rem 0; text-align: center; color: #fff; background-size: cover; background-position: center; }
.sw-cta::before { content: ""; position: absolute; inset: 0; background: rgba(15, 23, 42, .72); }
.sw-cta .container { position: relative; }
.sw-cta h2 { color: #fff; }
.sw-cta p { color: #e2e8f0; max-width: 640px; margin: 0.75rem auto 0; }

@media (max-width: 992px) {
    .sw-editorial, .sw-story { grid-template-columns: 1fr; gap: 2rem; }
    .sw-story:nth-child(even) .sw-story-img { order: 0; }
    .sw-ed-badge { left: 1rem; }
    .sw-listings { grid-template-columns: 1fr; }
    .sw-bento { grid-template-columns: repeat(2, 1fr); }
    .sw-why { grid-template-columns: 1fr; gap: 2rem; }
    .sw-why > div { border-left: 0; border-top: 1px solid var(--border-color); padding: 1.5rem 0 0; }
    .sw-why > div:first-child { border-top: 0; padding-top: 0; }
    .sw-steps { grid-template-columns: 1fr; text-align: left; }
    .sw-steps::before { display: none; }
    .sw-step { display: grid; grid-template-columns: 56px 1fr; gap: 1rem; }
    .sw-step-dot { margin: 0; }
    .sw-location::before { background: rgba(15, 23, 42, .82); }
}
@media (max-width: 560px) {
    .sw-bento { grid-template-columns: 1fr; grid-auto-rows: 170px; }
    .sw-tile.big, .sw-tile.wide { grid-column: auto; }
    .sw-tile.big, .sw-tile.tall { grid-row: span 2; }
    .sw-cta { padding: 4.5rem 0; }
}
/* Shared Workspace Page Styles */
.sw-proof {
    display: flex;
    justify-content: center;
    gap: 2rem;
    flex-wrap: wrap;
    margin-top: 3rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border-color, #eaeaea);
}
.sw-proof span {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.95rem;
    color: var(--text-muted, #555);
}
.sw-proof i {
    color: var(--primary-color, #0056b3);
}

.sw-editorial {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}
.sw-ed-media {
    position: relative;
    border-radius: 1rem;
    overflow: visible;
}
.sw-ed-media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.sw-ed-badge {
    position: absolute;
    bottom: -2rem;
    left: -2rem;
    background: var(--primary-color, #0d6efd);
    color: #fff;
    padding: 1rem 1.5rem;
    border-radius: 0.5rem;
    display: flex;
    flex-direction: column;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.3);
    z-index: 2;
}
.sw-ed-badge strong {
    font-size: 1.8rem;
    line-height: 1;
}
.sw-listings {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
}
.sw-listing {
    background: #fff;
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    text-align: left;
    display: flex;
    flex-direction: column;
}
.sw-listing:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.sw-listing-img {
    position: relative;
    height: 230px;
}
.sw-listing-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sw-tag {
    position: absolute;
    top: 1rem;
    left: 1rem;
    background: rgba(255,255,255,0.9);
    color: var(--text-main);
    padding: 0.25rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    font-weight: 600;
}
.sw-listing-body {
    padding: 2rem;
    flex: 1;
    display: flex;
    flex-direction: column;
}
.sw-listing-body h3 {
    margin-bottom: 1rem;
    font-size: 1.25rem;
}
.sw-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1.5rem 0;
}
.sw-meta span {
    background: #f3f4f6;
    padding: 0.4rem 0.75rem;
    border-radius: 2rem;
    font-size: 0.8rem;
    color: #4b5563;
}
.sw-listing-foot {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: auto;
    padding-top: 1.5rem;
    border-top: 1px solid #eaeaea;
    font-size: 0.9rem;
}
.sw-listing-foot span {
    white-space: nowrap;
    color: var(--text-muted);
}
.sw-listing-foot a {
    color: var(--primary-color, #0d6efd);
    font-weight: 600;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.sw-location {
    padding: 4rem 0;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: auto;
}
.sw-location::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 100%);
}
.sw-location .container {
    position: relative;
    z-index: 1;
}
.sw-loc-panel { background: rgba(255, 255, 255, 0.75); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.5); padding: 2.5rem; border-radius: 20px; max-width: 440px; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(255,255,255,0.2) inset; }
.sw-loc-panel .category-eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.05em;
    margin-bottom: 0.5rem;
    display: block;
    color: var(--primary-color, #0d6efd);
    text-transform: uppercase;
    font-weight: 700;
}
.sw-loc-panel h2 { color: #0f172a; font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 0.75rem 0; }
.sw-loc-panel p { color: #334155; font-size: 14px; line-height: 1.6; margin: 0 0 1.25rem 0; }
.sw-address { display: flex; gap: 1rem; margin: 0 0 1.5rem 0; padding: 1rem; border: 1px solid rgba(255,255,255,0.6); border-radius: 12px; background: rgba(255, 255, 255, 0.5); align-items: flex-start; }
.sw-address i {
    color: var(--primary-color, #0d6efd);
    font-size: 1rem;
    margin-top: 0.1rem;
}
.sw-address span { font-size: 13px; line-height: 1.5; color: #1e293b; font-weight: 600; }
.sw-loc-points { list-style: none; padding: 0; margin: 0 0 1.75rem 0; display: flex; flex-direction: column; gap: 1.25rem; }
.sw-loc-points li { font-size: 13px; color: #475569; line-height: 1.5; padding-left: 1.75rem; position: relative; margin: 0; }
.sw-loc-points li::before {
    content: "\f041";
    font-family: "Font Awesome 6 Free", sans-serif;
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0.1rem;
    color: #93c5fd;
    font-size: 0.7rem;
}
.sw-loc-points strong { display: block; margin-bottom: 0.25rem; color: #0f172a; font-size: 14px; font-weight: 700; }
.sw-loc-panel .btn { padding: 0.85rem 1.75rem; font-size: 14px; font-weight: 600; border-radius: 10px; background: #0f172a; color: #fff; border: none; box-shadow: 0 8px 16px rgba(15, 23, 42, 0.2); transition: all 0.3s ease; display: inline-block; width: auto; text-decoration: none; }
.sw-loc-panel .btn:hover { background: var(--primary-color); transform: translateY(-2px); box-shadow: 0 12px 20px rgba(13, 110, 253, 0.3); }
@media (max-width: 768px) {
    .sw-loc-panel {
        max-width: 100%;
        margin: 0 auto;
    }
}

.sw-bento {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-auto-rows: 250px;
    gap: 1.5rem;
    margin-top: 3rem;
}
.sw-tile {
    background: #fff;
    border-radius: 1rem;
    padding: 2rem;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    overflow: hidden;
    position: relative;
}
.sw-tile i {
    font-size: 2rem;
    color: var(--primary-color, #0d6efd);
    margin-bottom: 1rem;
}
.sw-tile h3 {
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
}
.sw-tile p {
    font-size: 0.95rem;
    color: var(--text-muted, #555);
}
.sw-tile.photo {
    background-size: cover;
    background-position: center;
    color: #fff;
    position: relative;
    justify-content: flex-end;
}
.sw-tile.photo::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.85), transparent);
}
.sw-tile.photo > * {
    position: relative;
    z-index: 1;
}
.sw-tile.photo i, .sw-tile.photo h3, .sw-tile.photo p {
    color: #fff;
}
.sw-tile.big {
    grid-column: span 2;
    grid-row: span 2;
}
.sw-tile.tall {
    grid-row: span 2;
}
.sw-tile.wide {
    grid-column: span 2;
}
.sw-tile.accent {
    background: var(--primary-color, #0d6efd);
    color: #fff;
}
.sw-tile.accent i {
    color: rgba(255,255,255,0.8);
}
.sw-tile.accent h3, .sw-tile.accent p {
    color: #fff;
}

.sw-stories {
    margin-top: 3rem;
}
.sw-story {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
    text-align: left;
}
.sw-story:nth-child(even) {
    direction: rtl;
}
.sw-story:nth-child(even) > div {
    direction: ltr;
}
.sw-story-img img {
    width: 100%;
    border-radius: 1rem;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}
.sw-story-num {
    font-size: 4rem;
    font-weight: 800;
    color: var(--primary-color, #0d6efd);
    opacity: 0.15;
    margin-bottom: 0;
    line-height: 1;
    display: block;
}
.sw-story h3 {
    margin-top: -1rem;
    margin-bottom: 1rem;
    font-size: 1.5rem;
}

.sw-why {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
    margin-top: 3rem;
    text-align: left;
}
.sw-why .num {
    font-size: 4rem;
    font-weight: 800;
    color: #e5e7eb;
    margin-bottom: 1rem;
    line-height: 1;
}
.sw-why h3 {
    font-size: 1.25rem;
    margin-bottom: 1rem;
    font-weight: 600;
}
.sw-why p {
    color: var(--text-muted, #555);
}

.sw-steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 3rem;
    text-align: center;
}
.sw-step {
    padding: 2.5rem 2rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}
.sw-step-dot {
    width: 60px;
    height: 60px;
    background: var(--primary-color, #0d6efd);
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: 700;
    margin: 0 auto 1.5rem;
    box-shadow: 0 10px 20px rgba(13, 110, 253, 0.2);
}
.sw-step h3 {
    font-size: 1.2rem;
    margin-bottom: 1rem;
}

.sw-cta {
    padding: 4.5rem 0; /* was 6rem */
    background-size: cover;
    background-position: center;
    position: relative;
    color: #fff;
    text-align: center;
}
.sw-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.75);
}
.sw-cta .container {
    position: relative;
    z-index: 1;
}
.sw-cta h2 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
    color: #fff;
}
.sw-cta p {
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto 2rem auto;
    opacity: 0.9;
}

/* Responsive adjustments */
@media (max-width: 992px) {
    .sw-editorial, .sw-story, .sw-why, .sw-steps {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    .sw-listings {
        grid-template-columns: repeat(2, 1fr);
    }
    .sw-bento {
        grid-template-columns: repeat(2, 1fr);
    }
    .sw-story:nth-child(even) {
        direction: ltr;
    }
    .sw-ed-badge {
        left: 2rem;
        bottom: -1rem;
    }
}
@media (max-width: 768px) {
    .sw-listings {
        grid-template-columns: 1fr;
    }
    .sw-bento {
        grid-template-columns: 1fr;
        grid-auto-rows: minmax(200px, auto);
    }
    .sw-tile.big, .sw-tile.tall, .sw-tile.wide {
        grid-column: span 1;
        grid-row: span 1;
    }
    .sw-loc-panel {
        padding: 2rem;
    }
}

/* Amenities Sidebar Layout */
.sw-amenities-tabs {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 2rem;
    margin-top: 3rem;
    text-align: left;
}
.sw-amenities-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sw-amenity-tab {
    background: transparent;
    border: 1px solid transparent;
    text-align: left;
    padding: 1rem 1.25rem;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-muted, #4b5563);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.sw-amenity-tab:hover {
    background: #f1f5f9;
    color: #1e293b;
}
.sw-amenity-tab.active {
    background: #fff;
    border: 1px solid var(--border-color, #eaeaea);
    color: var(--primary-color, #0d6efd);
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}
.sw-amenity-tab i {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}
.sw-amenities-content { background: #0f172a; border-radius: 16px; border: none; overflow: hidden; position: relative; min-height: 480px; box-shadow: 0 16px 40px rgba(0,0,0,0.1); }
.sw-amenity-pane { display: none; width: 100%; height: 100%; position: relative; }
.sw-amenity-pane.active { display: block; animation: fadeIn 0.4s ease-in-out; }
.sw-amenity-pane img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sw-amenity-pane::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,23,42,0) 40%, rgba(15,23,42,0.95) 100%); pointer-events: none; }
.sw-amenity-pane-text { position: absolute; bottom: 0; left: 0; width: 100%; padding: 2.5rem; z-index: 2; }
.sw-amenity-pane-text h3 { margin-top: 0; font-size: 1.6rem; color: #fff; margin-bottom: 0.5rem; }
.sw-amenity-pane-text p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.5; margin: 0; max-width: 90%; }
@media (max-width: 992px) {
    .sw-amenities-tabs {
        grid-template-columns: 1fr;
    }
    .sw-amenities-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
        -webkit-overflow-scrolling: touch;
    }
    .sw-amenity-tab {
        white-space: nowrap;
        padding: 0.75rem 1rem;
    }
}
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}



/* Cinematic Location Section */
.sw-location-cinematic {
    padding: 6rem 0;
    background-size: cover;
    background-position: center;
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
}
.sw-location-cinematic::before {
    display: none;
}
.sw-loc-panel-cinematic {
    position: relative;
    z-index: 2;
    max-width: 440px;
    color: #fff;
}
.sw-loc-panel-cinematic .category-eyebrow { color: #f59e0b; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 0.5rem; display: block; opacity: 0; }
.sw-loc-panel-cinematic .section-title { font-size: 2.25rem; line-height: 1.2; margin-bottom: 1.5rem; opacity: 0; transform: translateY(20px); background: linear-gradient(135deg, #ffffff 0%, #93c5fd 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
.sw-loc-panel-cinematic .sw-address {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    padding: 1rem;
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    opacity: 0;
    transform: translateY(20px);
}
.sw-loc-panel-cinematic .sw-address i { color: #f59e0b; margin-top: 0.2rem; }
.sw-loc-panel-cinematic .sw-address span {
    font-size: 0.95rem;
    line-height: 1.5;
    color: #e2e8f0;
}
.sw-divider {
    border: 0;
    height: 1px;
    background: rgba(255,255,255,0.1);
    margin: 2rem 0;
}
.sw-rotator-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
    font-family: monospace;
    color: #94a3b8;
    font-size: 0.85rem;
}
.sw-rotator-controls button {
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    font-size: 1rem;
    padding: 0.25rem 0.5rem;
    opacity: 0.5;
    transition: opacity 0.2s;
}
.sw-rotator-controls button:hover {
    opacity: 1;
}
.sw-rotator-slides {
    position: relative;
    min-height: 200px;
}
.sw-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-slide.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.sw-slide strong { display: block; font-size: 1.25rem; color: #60a5fa; margin-bottom: 0.75rem; font-weight: 700; }
.sw-slide p {
    font-size: 0.95rem;
    line-height: 1.6;
    color: #cbd5e1;
    margin: 0;
}
.btn-animated { margin-top: 1.5rem; display: inline-flex; align-items: center; gap: 0.5rem; background: linear-gradient(135deg, #2563eb, #1d4ed8); color: #fff; font-weight: 600; padding: 0.85rem 1.75rem; border-radius: 8px; text-decoration: none; transition: all 0.3s ease; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.4); border: 1px solid rgba(255,255,255,0.1); }
.btn-animated i {
    transition: transform 0.3s ease;
}
.btn-animated:hover { background: linear-gradient(135deg, #1d4ed8, #1e40af); transform: translateY(-2px); color: #fff; box-shadow: 0 12px 24px rgba(37, 99, 235, 0.6); }
.btn-animated:hover i {
    transform: translateX(4px);
}
.pulse-icon {
    animation: pulseIcon 2s infinite;
}

#sw-cinematic-panel.is-visible .anim-fade-in {
    animation: fadeIn 0.8s ease forwards;
}
#sw-cinematic-panel.is-visible .anim-slide-up {
    animation: slideUp 0.8s ease 0.2s forwards;
}
#sw-cinematic-panel.is-visible .anim-slide-up-delay {
    animation: slideUp 0.8s ease 0.4s forwards;
}

@keyframes pulseIcon {
    0% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.2); opacity: 0.8; }
    100% { transform: scale(1); opacity: 1; }
}
@keyframes slideUp {
    to { opacity: 1; transform: translateY(0); }
}


/* Sticky Scroll Layout */
.sw-stories-sticky-layout {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 4rem;
    margin-top: 4rem;
    position: relative;
    text-align: left;
}
.sw-sticky-content {
    position: sticky;
    top: 120px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sw-sticky-text {
    position: absolute;
    top: 50%;
    transform: translateY(-50%) translateX(-20px);
    opacity: 0;
    pointer-events: none;
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-sticky-text.active {
    opacity: 1;
    transform: translateY(-50%) translateX(0);
    pointer-events: auto;
}
.sw-sticky-text .sw-story-num {
    font-size: 5rem;
    font-weight: 800;
    color: var(--primary-color, #0d6efd);
    opacity: 0.1;
    line-height: 1;
    margin-bottom: -1.5rem;
    display: block;
}
.sw-sticky-text h3 {
    font-size: 2rem;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.2;
    position: relative;
    z-index: 2;
}
.sw-sticky-text p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #475569;
}
.sw-scrollable-images {
    display: flex;
    flex-direction: column;
    gap: 15vh;
    padding-bottom: 10vh;
}
.sw-story-image-container {
    height: 60vh;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.sw-story-image-container.dimmed {
    transform: scale(0.95);
    opacity: 0.5;
}
.sw-story-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sw-mobile-text {
    display: none;
}
@media (max-width: 992px) {
    .sw-stories-sticky-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .sw-sticky-content {
        display: none;
    }
    .sw-mobile-text { 
        display: block; 
        padding: 1rem 0 2rem 0;
    }
    .sw-mobile-text .sw-story-num {
        font-size: 3rem;
        color: var(--primary-color);
        opacity: 0.2;
        margin-bottom: -1rem;
        display: block;
        font-weight: 800;
    }
    .sw-mobile-text h3 { font-size: 1.5rem; margin-bottom: 0.5rem; color: #1e293b; position: relative; z-index: 2; }
    .sw-mobile-text p { font-size: 1rem; color: #475569; line-height: 1.5; }
    .sw-scrollable-images { gap: 3rem; padding-bottom: 3rem; }
    .sw-story-image-container { height: auto; box-shadow: none; border-radius: 0; }
    .sw-story-image-container img { height: 300px; border-radius: 16px; }
    .sw-story-image-container.dimmed { transform: none; opacity: 1; }
}

/* Audience Accordion */
.sw-audience-accordion {
    display: flex;
    gap: 1rem;
    height: 500px;
    margin-top: 3rem;
}
.sw-aud-card {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    flex: 1;
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}
.sw-aud-card.active {
    flex: 3;
}
.sw-aud-card img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}
.sw-aud-card:hover img {
    transform: scale(1.05);
}
.sw-aud-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(15,23,42,0) 0%, rgba(15,23,42,0.85) 100%);
    pointer-events: none;
}
.sw-aud-card-content {
    position: absolute;
    inset: 0;
    padding: 2.5rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-start;
    z-index: 2;
    text-align: left;
}
.sw-aud-num {
    font-size: 3.5rem;
    font-weight: 800;
    color: rgba(255,255,255,0.2);
    margin-bottom: auto;
    line-height: 1;
    transition: color 0.6s ease;
}
.sw-aud-card.active .sw-aud-num { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-shadow: none; }
.sw-aud-text {
    width: 100%;
    max-width: 450px;
}
.sw-aud-text h3 { color: #fff; font-size: 1.5rem; margin-bottom: 0; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); white-space: nowrap; transform: translateY(15px); }
.sw-aud-card.active .sw-aud-text h3 { white-space: normal; transform: translateY(0); }
.sw-aud-text p { color: #cbd5e1; font-size: 1.05rem; line-height: 1.5; margin: 0; max-height: 0; opacity: 0; transform: translateY(20px); overflow: hidden; transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1); }
.sw-aud-card.active .sw-aud-text p { max-height: 200px; opacity: 1; transform: translateY(0); margin-top: 1rem; transition-delay: 0.2s; }

@media (max-width: 992px) {
    .sw-audience-accordion {
        flex-direction: column;
        height: auto;
    }
    .sw-aud-card {
        height: 120px;
        flex: none;
    }
    .sw-aud-card.active {
        height: 400px;
        flex: none;
    }
    .sw-aud-text h3 {
        white-space: normal;
        font-size: 1.25rem;
    }
}

/* Robust Sticky Scroll Layout */
.sw-stories-sticky-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    margin-top: 4rem;
    position: relative;
    text-align: left;
    align-items: start;
}
.sw-sticky-content {
    position: sticky;
    top: 140px; 
    height: 450px; 
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sw-sticky-text {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    opacity: 0;
    pointer-events: none;
    transform: translateY(-40%);
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
.sw-sticky-text.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
}
.sw-sticky-text .sw-story-num {
    font-size: 5rem;
    font-weight: 800;
    color: var(--primary-color, #0d6efd);
    opacity: 0.15;
    line-height: 1;
    margin-bottom: -1rem;
    display: block;
}
.sw-sticky-text h3 {
    font-size: 1.85rem;
    color: #1e293b;
    margin-bottom: 1rem;
    line-height: 1.25;
    position: relative;
    z-index: 2;
}
.sw-sticky-text p {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #475569;
}
.sw-scrollable-images {
    display: flex;
    flex-direction: column;
    gap: 4rem;
    padding-bottom: 2rem;
}
.sw-story-image-container {
    height: 450px; 
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 12px 30px rgba(0,0,0,0.08);
    transition: transform 0.5s ease, opacity 0.5s ease;
}
.sw-story-image-container.dimmed {
    transform: scale(0.95);
    opacity: 0.4;
}
.sw-story-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sw-mobile-text {
    display: none;
}
@media (max-width: 992px) {
    .sw-stories-sticky-layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .sw-sticky-content {
        display: none;
    }
    .sw-mobile-text { 
        display: block; 
        padding: 1rem 0 1.5rem 0;
    }
    .sw-mobile-text .sw-story-num {
        font-size: 3rem;
        color: var(--primary-color);
        opacity: 0.15;
        margin-bottom: -1rem;
        display: block;
        font-weight: 800;
    }
    .sw-mobile-text h3 { font-size: 1.4rem; margin-bottom: 0.5rem; color: #1e293b; position: relative; z-index: 2; }
    .sw-mobile-text p { font-size: 0.95rem; color: #475569; line-height: 1.5; }
    .sw-scrollable-images { gap: 2.5rem; padding-bottom: 2rem; }
    .sw-story-image-container { height: auto; box-shadow: none; border-radius: 0; }
    .sw-story-image-container img { height: 280px; border-radius: 16px; }
    .sw-story-image-container.dimmed { transform: none; opacity: 1; }
}





/* Extremely Smooth Grid Height Animation */
.sw-aud-text {
    width: 380px; 
    opacity: 0;
    pointer-events: none;
    transform: translateX(-15px);
    transition: all 0.5s ease;
}
.sw-aud-card.active .sw-aud-text {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    transition-delay: 0.1s;
}

.sw-aud-text h3 {
    white-space: normal !important;
    margin-bottom: 0 !important;
    transform: none !important;
}

.sw-aud-text-wrapper {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}
.sw-aud-card.active .sw-aud-text-wrapper {
    grid-template-rows: 1fr;
    transition-delay: 0.1s;
}

.sw-aud-text-inner {
    overflow: hidden;
}
.sw-aud-text p {
    margin: 1rem 0 0 0 !important; 
    opacity: 0 !important;
    transform: translateY(10px) !important;
    max-height: none !important;
    transition: opacity 0.4s ease, transform 0.5s ease !important;
}
.sw-aud-card.active .sw-aud-text p {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition-delay: 0.25s !important;
}

.sw-aud-num {
    transform: translateY(60px);
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), background 0.5s ease;
}
.sw-aud-card.active .sw-aud-num {
    transform: translateY(0);
}

/* Enhancing Why Shared Workspace Numbers */
.sw-why .num {
    font-size: 5rem !important;
    font-weight: 900 !important;
    background: linear-gradient(135deg, #2563eb 0%, #93c5fd 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    opacity: 1 !important;
    color: #2563eb !important;
    margin-bottom: 0.5rem !important;
    display: inline-block !important;
    line-height: 1 !important;
}

/* === Cinematic Location Section === */
.sw-location-cinematic {
    position: relative;
    width: 100%;
    min-height: 650px;
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
    display: flex;
    align-items: center;
    overflow: hidden;
    border-radius: 20px;
    margin: 2rem 0;
}
.sw-location-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, rgba(15, 23, 42, 0.68) 0%, rgba(15, 23, 42, 0.38) 42%, rgba(15, 23, 42, 0.05) 75%, transparent 100%);
    z-index: 1;
}
.sw-location-content {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 4rem;
    width: 100%;
    padding: 4rem 2rem;
}
.sw-location-text {
    color: #fff;
    text-align: left;
}
.sw-location-eyebrow {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #38bdf8;
    margin-bottom: 1rem;
    display: inline-block;
    font-weight: 700;
    background: rgba(56, 189, 248, 0.14);
    padding: 0.35rem 0.9rem;
    border-radius: 999px;
    border: 1px solid rgba(56, 189, 248, 0.28);
}
.sw-location-title {
    font-size: 2.75rem;
    font-weight: 800;
    color: #fff;
    line-height: 1.15;
    margin-bottom: 1.5rem;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}
.sw-text-gradient {
    background: linear-gradient(135deg, #93c5fd 0%, #38bdf8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.sw-location-address {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    margin-bottom: 2rem;
    background: rgba(15, 23, 42, 0.55);
    padding: 1.25rem 1.5rem;
    border-radius: 14px;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
.sw-location-address i {
    color: #fbbf24;
    font-size: 1.4rem;
    margin-top: 0.15rem;
    flex-shrink: 0;
}
.sw-location-address p {
    margin: 0;
    color: #ffffff;
    font-size: 1.05rem;
    line-height: 1.5;
    font-weight: 500;
}
.sw-location-ticker { height: 80px; overflow: hidden; position: relative; }
.sw-ticker-item { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; transform: translateY(20px); transition: all 0.5s ease; font-size: 1.15rem; line-height: 1.5; color: #ffffff; display: flex; align-items: flex-start; gap: 0.75rem; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4); }
.sw-ticker-item.active {
    opacity: 1;
    transform: translateY(0);
}
.sw-ticker-item i { color: #38bdf8; margin-top: 0.2rem; flex-shrink: 0; }

@media (max-width: 992px) {
    .sw-location-content {
        grid-template-columns: 1fr;
    }
    .sw-location-overlay {
        background: linear-gradient(180deg, rgba(15,23,42,0.75) 0%, rgba(15,23,42,0.45) 100%);
    }
    .sw-location-title {
        font-size: 2.25rem;
    }
}

/* === Premium Tabbed Amenities === */
.sw-amenities-tabs { display: grid; grid-template-columns: 300px 1fr; gap: 3rem; background: rgba(255, 255, 255, 0.5); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid rgba(255, 255, 255, 0.8); border-radius: 24px; padding: 2rem; box-shadow: 0 16px 40px rgba(0,0,0,0.04), inset 0 0 0 1px rgba(255,255,255,0.4); text-align: left; }
.sw-tabs-sidebar {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.sw-tab-btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: transparent;
    border: none;
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: left;
    color: #475569;
    font-size: 1.1rem;
    font-weight: 600;
}
.sw-tab-btn:hover {
    background: #f8fafc;
    color: #1e293b;
}
.sw-tab-btn.active {
    background: #eff6ff;
    color: #2563eb;
    box-shadow: inset 4px 0 0 #2563eb;
}
.sw-tab-icon {
    font-size: 1.25rem;
    width: 24px;
    text-align: center;
}
.sw-tabs-content {
    position: relative;
    min-height: 400px;
    border-radius: 16px;
    overflow: hidden;
    background: #0f172a;
}
.sw-tab-pane {
    position: absolute;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.sw-tab-pane.active {
    opacity: 1;
    pointer-events: auto;
    z-index: 2;
}
.sw-tab-pane img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sw-tab-pane::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.8) 100%);
    pointer-events: none;
}
.sw-pane-info {
    position: relative;
    z-index: 3;
    padding: 3rem;
    color: #fff;
    transform: translateY(20px);
    transition: transform 0.5s ease 0.1s;
}
.sw-tab-pane.active .sw-pane-info {
    transform: translateY(0);
}
.sw-pane-info h3 {
    font-size: 2rem;
    color: #fff;
    margin-bottom: 1rem;
}
.sw-pane-info p {
    font-size: 1.1rem;
    line-height: 1.6;
    color: #e2e8f0;
    max-width: 600px;
    margin: 0;
}

@media (max-width: 992px) {
    .sw-amenities-tabs {
        grid-template-columns: 1fr;
        padding: 1.5rem;
    }
    .sw-tabs-sidebar {
        flex-direction: row;
        overflow-x: auto;
        padding-bottom: 1rem;
    }
    .sw-tab-btn {
        flex: 0 0 auto;
        padding: 1rem;
        box-shadow: none !important;
        border-bottom: 3px solid transparent;
        border-radius: 8px;
    }
    .sw-tab-btn.active {
        border-bottom-color: #2563eb;
        background: transparent;
    }
    .sw-tabs-content {
        min-height: 350px;
    }
    .sw-pane-info {
        padding: 2rem;
    }
    .sw-pane-info h3 {
        font-size: 1.5rem;
    }
}




/* === Shared carousel (24/7 / why-section slides), reused by the Coimbatore service pages === */
.sw-ed-body { min-width: 0; }
.sw-carousel-container { position: relative; margin-top: 1.5rem; padding: 0 2.5rem; }
.sw-carousel-viewport { overflow: hidden; width: 100%; border-radius: 16px; }
.sw-carousel-track { display: flex; gap: 1.5rem; will-change: transform; transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1); }
.sw-carousel-slide { flex: 0 0 100%; min-width: 100%; width: 100%; box-sizing: border-box; display: flex; flex-direction: column; gap: 1rem; background: #fff; padding: 2rem; border-radius: 16px; box-shadow: 0 8px 24px rgba(0,0,0,0.04); border: 1px solid var(--border-color); transition: transform 0.3s ease; }
.sw-carousel-slide:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.08); }
.sw-carousel-slide i { color: var(--primary-color); font-size: 1.5rem; background: rgba(37, 99, 235, 0.1); width: 54px; height: 54px; display: flex; align-items: center; justify-content: center; border-radius: 12px; flex-shrink: 0; margin-bottom: 0.5rem; }
.sw-carousel-slide h3 { font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--text-main); }
.sw-carousel-slide p { margin: 0; color: var(--text-muted); font-size: 0.95rem; line-height: 1.6; }
.sw-carousel-btn { position: absolute; top: 50%; transform: translateY(-50%); background: #fff; border: 1px solid var(--border-color); width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.05); color: var(--text-main); z-index: 10; transition: all 0.3s ease; }
.sw-carousel-btn:hover { background: var(--primary-color); color: #fff; border-color: var(--primary-color); }
.sw-carousel-btn.sw-prev { left: -10px; }
.sw-carousel-btn.sw-next { right: -10px; }
@media (max-width: 768px) {
    .sw-carousel-container { padding: 0 2rem; }
    .sw-carousel-btn { display: flex; width: 34px; height: 34px; font-size: 0.85rem; }
    .sw-carousel-btn.sw-prev { left: -6px; }
    .sw-carousel-btn.sw-next { right: -6px; }
    .sw-carousel-slide { padding: 1.25rem; }
}

/* ==========================================================================
   Services mega dropdown: 3-column grid, icon + heading + short description
   ========================================================================== */
.dd-text { display: flex; flex-direction: column; min-width: 0; }
.dd-text strong { font-weight: 600; font-size: 0.95rem; color: var(--text-main); line-height: 1.3; }
.dd-text small { font-size: 0.78rem; color: var(--text-muted); line-height: 1.4; margin-top: 2px; }

@media (min-width: 1024px) {
    .dropdown-menu {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
        width: 760px;
        max-width: calc(100vw - 2rem);
        padding: 14px;
        border-radius: 18px;
        box-shadow: 0 24px 60px rgba(15, 23, 42, 0.16);
    }
    /* invisible bridge so the menu doesn't close while the pointer crosses the gap */
    .dropdown-menu::before {
        content: "";
        position: absolute;
        left: 0; right: 0; top: -16px; height: 16px;
    }
    .dropdown-menu li a {
        display: flex;
        align-items: flex-start;
        gap: 12px;
        height: 100%;
        padding: 12px;
        border-radius: 12px;
    }
    .dropdown-menu li a .dd-icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 38px;
        height: 38px;
        border-radius: 10px;
        background: rgba(37, 99, 235, 0.1);
        color: var(--primary-color);
        transition: background 0.2s, color 0.2s, transform 0.2s;
    }
    .dropdown-menu li a .dd-icon i { display: inline-block; font-size: 0.95rem; }
    .dropdown-menu li a:hover,
    .dropdown-menu li a.active,
    .dropdown-menu li.active a { 
        background: #ffffff; 
        box-shadow: 0 4px 15px rgba(37, 99, 235, 0.1);
    }
    .dropdown-menu li a:hover .dd-text strong,
    .dropdown-menu li a.active .dd-text strong,
    .dropdown-menu li.active a .dd-text strong { 
        color: var(--primary-color); 
    }
    .dropdown-menu li a:hover .dd-icon,
    .dropdown-menu li a.active .dd-icon,
    .dropdown-menu li.active a .dd-icon { 
        background: var(--primary-color); 
        color: #fff; 
        transform: translateY(-1px); 
        box-shadow: 0 4px 10px rgba(37, 99, 235, 0.3);
    }
    .dropdown-menu li a.active,
    .dropdown-menu li.active a {
        border: 1px solid rgba(37, 99, 235, 0.18);
    }
}

/* Mobile drawer keeps the compact list: heading only, small icon */
@media (max-width: 1023px) {
    .dropdown-menu li a .dd-icon { display: inline-flex; }
    .dropdown-menu li a .dd-text small { display: none; }
    .dropdown-menu li a .dd-text strong { font-weight: 500; font-size: 0.88rem; color: inherit; }
}


/* === Premium Glassmorphism Mega Menu === */
@media (min-width: 1024px) {
    .dropdown-menu {
        background: rgba(255, 255, 255, 0.85) !important;
        backdrop-filter: blur(24px) !important;
        -webkit-backdrop-filter: blur(24px) !important;
        border: 1px solid rgba(255, 255, 255, 0.6) !important;
        box-shadow: 0 30px 70px rgba(0, 0, 0, 0.05), inset 0 0 0 1px rgba(255, 255, 255, 0.5) !important;
        border-radius: 24px !important;
        padding: 18px !important;
    }
}

/* ==========================================================================
   Responsive polish: Coimbatore service pages (tablet + phone)
   Placed last so it wins over the earlier, overlapping sw-* rules.
   ========================================================================== */

/* FAQ: two columns inside a 2fr column is too tight below desktop */
@media (max-width: 1100px) {
    .faq-accordion { grid-template-columns: 1fr; }
    .sw-ed-badge { left: 1rem; }
}

/* Touch devices have no hover, so the audience cards, tabs and location
   ticker must work without it. */
@media (max-width: 992px) {
    /* --- Audience accordion -> stacked cards, text always visible --- */
    .sw-audience-accordion { flex-direction: column; height: auto; gap: 1rem; }
    .sw-aud-card, .sw-aud-card.active { flex: none; height: auto; border-radius: 18px; cursor: default; }
    .sw-aud-card-content { position: relative; inset: auto; min-height: 300px; padding: 1.5rem; }
    .sw-aud-num { transform: none !important; font-size: 2.5rem; margin-bottom: auto; }
    .sw-aud-card .sw-aud-num { background: linear-gradient(135deg, #60a5fa 0%, #2563eb 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
    .sw-aud-text, .sw-aud-card.active .sw-aud-text { width: 100%; max-width: none; opacity: 1; pointer-events: auto; transform: none; }
    .sw-aud-text-wrapper, .sw-aud-card.active .sw-aud-text-wrapper { grid-template-rows: 1fr; }
    .sw-aud-text p, .sw-aud-card.active .sw-aud-text p { opacity: 1 !important; transform: none !important; font-size: 0.95rem; margin-top: 0.75rem !important; }
    .sw-aud-text h3 { font-size: 1.25rem; }
    .sw-aud-card::after { background: linear-gradient(180deg, rgba(15,23,42,0.15) 0%, rgba(15,23,42,0.9) 100%); }

    /* --- Location: show the photo, let the ticker breathe --- */
    .sw-location-cinematic { min-height: 0; background-attachment: scroll; border-radius: 16px; margin: 1rem 0; }
    .sw-location-overlay { background: linear-gradient(180deg, rgba(15,23,42,0.94) 0%, rgba(15,23,42,0.8) 55%, rgba(15,23,42,0.35) 100%); }
    .sw-location-content { padding: 2.5rem 1.25rem; gap: 0; }
    .sw-location-title { font-size: 2rem; margin-bottom: 1rem; }
    .sw-location-address { padding: 1rem; margin-bottom: 1.5rem; }
    .sw-location-address p { font-size: 1rem; }
    .sw-location-ticker { height: 150px !important; }
    .sw-ticker-item { font-size: 1rem; }
    .sw-location-visual { display: block; min-height: 60px; }

    /* --- Amenity / buying-guide tabs: stacked image + text --- */
    .sw-tabs-content { min-height: 0; background: #0f172a; }
    .sw-tab-pane { position: relative; inset: auto; display: none; opacity: 1; pointer-events: auto; }
    .sw-tab-pane.active { display: flex; }
    .sw-tab-pane::after { display: none; }
    .sw-tab-pane img { position: static; height: 230px; }
    .sw-pane-info { padding: 1.25rem 1.25rem 1.5rem; transform: none; }
    .sw-pane-info h3 { font-size: 1.25rem; margin-bottom: 0.6rem; }
    .sw-pane-info p { font-size: 0.95rem; }
    .sw-tabs-sidebar { gap: 0.25rem; scrollbar-width: none; }
    .sw-tabs-sidebar::-webkit-scrollbar { display: none; }
    .sw-tab-btn { white-space: nowrap; font-size: 0.95rem; }

    /* --- Steps: compact left-aligned rows --- */
    .sw-steps { gap: 1rem; text-align: left; margin-top: 2rem; }
    .sw-step { display: grid; grid-template-columns: 48px 1fr; gap: 1rem; padding: 1.25rem; text-align: left; align-items: start; }
    .sw-step-dot { width: 48px; height: 48px; font-size: 1.1rem; margin: 0; }
    .sw-step h3 { font-size: 1.05rem; margin-bottom: 0.4rem; }
    .sw-step p { font-size: 0.92rem; }
}

@media (max-width: 560px) {
    .sw-proof { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1rem; text-align: left; }
    .sw-proof span { font-size: 0.85rem; }
    .sw-amenities-tabs { padding: 1rem; border-radius: 18px; gap: 1rem; }
    .sw-tab-btn { padding: 0.75rem 0.9rem; }
    .sw-tab-pane img { height: 190px; }
    .sw-why .num { font-size: 3.5rem !important; }
    .sw-cta h2 { font-size: 1.75rem; }
    .sw-listing-foot { flex-wrap: wrap; }
    .page-banner .tagline { font-size: 0.95rem; }
    .plan-badge { font-size: 0.75rem; }
}

/* Editorial split: image first on small screens (matches the other sections); keep row icons aligned */
.sw-rows {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sw-rows li {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.85rem 1.15rem;
    background: #ffffff;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

[data-theme="dark"] .sw-rows li {
    background: var(--bg-alt, #1e293b);
    border-color: rgba(255, 255, 255, 0.08);
}

.sw-rows li:hover {
    transform: translateX(4px);
    border-color: var(--primary-color, #2563eb);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.08);
    background: rgba(37, 99, 235, 0.02);
}

.sw-rows li > i {
    width: 36px;
    height: 36px;
    font-size: 1.15rem;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color, #2563eb);
    background: rgba(37, 99, 235, 0.08);
    border-radius: 8px;
    flex-shrink: 0;
    margin: 0;
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.sw-rows li:hover > i {
    background: var(--primary-color, #2563eb);
    color: #ffffff;
    transform: scale(1.08);
}

.sw-rows li > div {
    flex: 1;
    min-width: 0;
}

.sw-rows h3 {
    margin: 0;
    font-size: 0.98rem;
    font-weight: 600;
    color: var(--text-main, #1e293b);
    line-height: 1.4;
}

.sw-rows p {
    margin: 0.2rem 0 0;
    color: var(--text-muted);
    font-size: 0.88rem;
    line-height: 1.4;
}

/* Compact mode (when rows only have titles with no secondary description text) */
.sw-rows.sw-rows-compact {
    gap: 0.65rem;
}

.sw-rows.sw-rows-compact li {
    padding: 0.75rem 1rem;
}

.sw-rows.sw-rows-compact li > i {
    width: 32px;
    height: 32px;
    font-size: 1rem;
    border-radius: 8px;
}

.sw-rows.sw-rows-compact h3 {
    font-size: 0.95rem;
    font-weight: 500;
}

@media (max-width: 992px) {
    .sw-ed-media { order: -1; }
}

/* 3. Options / Listing Cards with Image Zoom & Shine */
.sw-listing {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.45s ease, border-color 0.3s ease;
}
.sw-listing:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(15, 23, 42, 0.12);
    border-color: rgba(37, 99, 235, 0.3);
}
.sw-listing-img {
    overflow: hidden;
    position: relative;
}
.sw-listing-img img {
    transition: transform 0.6s cubic-bezier(0.25, 0.8, 0.25, 1), filter 0.6s ease;
}
.sw-listing:hover .sw-listing-img img {
    transform: scale(1.08);
}
.sw-listing-img::after {
    content: '';
    position: absolute;
    top: 0;
    left: -75%;
    width: 50%;
    height: 100%;
    background: linear-gradient(120deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-20deg);
    pointer-events: none;
    z-index: 2;
}
.sw-listing:hover .sw-listing-img::after {
    animation: hoverShine 0.85s ease forwards;
}
.sw-meta span {
    transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}
.sw-listing:hover .sw-meta span {
    background: rgba(37, 99, 235, 0.08);
    color: var(--primary-color, #2563eb);
    border-color: rgba(37, 99, 235, 0.2);
}
.sw-listing-foot a i {
    transition: transform 0.3s ease;
}
.sw-listing-foot a:hover i {
    transform: translateX(4px);
}

/* 4. Specification Tabs Interactive Glow */
.sw-tab-btn {
    transition: transform 0.3s ease, background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.sw-tab-btn:hover {
    transform: translateX(5px);
    background: #f1f5f9;
}
.sw-tab-btn.active {
    transform: translateX(8px);
}
.sw-tab-btn .sw-tab-icon {
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sw-tab-btn:hover .sw-tab-icon {
    transform: scale(1.2);
}

/* 5. Key Points (Why Shared) Number Cards */
.sw-why > div {
    position: relative;
    border-radius: 16px;
    padding: 2rem !important;
    background: #ffffff;
    border: 1px solid rgba(226, 232, 240, 0.8) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
    overflow: hidden;
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.sw-why {
    gap: 1.5rem !important;
}
.sw-why > div::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    border-radius: inherit;
    transition: height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
}
.sw-why > div:hover::before {
    height: 100%;
}
.sw-why > div:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    border-color: transparent !important;
}
.sw-why .num {
    position: relative;
    z-index: 2;
    transition: color 0.35s ease, opacity 0.35s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.sw-why > div:hover .num {
    color: #ffffff !important;
    opacity: 0.9 !important;
    transform: scale(1.08);
}
.sw-why h3 {
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}
.sw-why > div:hover h3 {
    color: #ffffff !important;
}
.sw-why p {
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}
.sw-why > div:hover p {
    color: rgba(255, 255, 255, 0.92) !important;
}

/* 6. Step Cards */
.sw-step {
    position: relative;
    overflow: hidden;
    border: 1px solid rgba(226, 232, 240, 0.8);
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.4s ease, border-color 0.3s ease;
}
.sw-step::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0;
    background: linear-gradient(135deg, #1d4ed8 0%, #3b82f6 100%);
    border-radius: inherit;
    transition: height 0.45s cubic-bezier(0.25, 0.8, 0.25, 1);
    z-index: 1;
    pointer-events: none;
}
.sw-step:hover::before {
    height: 100%;
}
.sw-step:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(37, 99, 235, 0.2);
    border-color: transparent;
}
.sw-step-dot {
    position: relative;
    z-index: 2;
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
}
.sw-step:hover .sw-step-dot {
    transform: scale(1.15) rotate(-6deg);
    background: #ffffff;
    color: var(--primary-color, #2563eb);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.sw-step h3 {
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}
.sw-step:hover h3 {
    color: #ffffff;
}
.sw-step p {
    position: relative;
    z-index: 2;
    transition: color 0.35s ease;
}
.sw-step:hover p {
    color: rgba(255, 255, 255, 0.92);
}

/* 7. FAQ Items Hover Polish */
.faq-item {
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    border-radius: 12px;
}
.faq-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.05);
}
.faq-question {
    transition: color 0.25s ease;
}
.faq-question:hover {
    color: var(--primary-color, #2563eb);
}

/* ==========================================================================
   Testimonials Enhanced Album Grid & Lightbox Viewer
   ========================================================================== */
.testimonials-showcase-bg {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eef3ff 0%, #ffffff 55%, #fff7ec 100%);
}

.testimonials-showcase-bg::before {
    content: '';
    position: absolute;
    top: -140px;
    right: -140px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(37, 99, 235, 0.12), transparent 70%);
    pointer-events: none;
}

[data-theme="dark"] .testimonials-showcase-bg {
    background: var(--bg-alt);
}

.share-experience-bg {
    position: relative;
    background: linear-gradient(160deg, #eaf2ff 0%, #f5f9ff 55%, #ffffff 100%);
}

[data-theme="dark"] .share-experience-bg {
    background: var(--bg-main);
}

.testimonials-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
    margin-bottom: 2.5rem;
}

/* Flex basis + max-width (instead of CSS Grid's 1fr columns) so a leftover
   row with fewer than 3 cards centers instead of sticking to the left edge. */
.testimonials-grid .testimonial-card {
    flex: 0 0 calc((100% - 60px) / 3);
    max-width: calc((100% - 60px) / 3);
}

@media (max-width: 992px) {
    .testimonials-grid .testimonial-card {
        flex-basis: calc((100% - 30px) / 2);
        max-width: calc((100% - 30px) / 2);
    }
}

@media (max-width: 640px) {
    .testimonials-grid .testimonial-card {
        flex-basis: 100%;
        max-width: 100%;
    }
}

/* Pagination below the testimonials grid */
.testimonials-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 4rem;
}

.tpg-btn {
    min-width: 40px;
    height: 40px;
    padding: 0 8px;
    border-radius: 10px;
    border: 1.5px solid var(--border-color);
    background: var(--bg-main);
    color: var(--text-main);
    font-weight: 600;
    font-size: 0.92rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.tpg-btn:hover:not(:disabled) {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.tpg-btn.is-active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: #fff;
}

.tpg-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.testimonial-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    background: var(--bg-alt);
    padding: 30px;
    border-radius: 16px;
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    height: 330px;
    cursor: pointer;
    user-select: none;
}

.testimonial-card:hover .card-open-hint {
    opacity: 1;
    color: var(--primary-color, #2563eb);
    transform: translate(1px, -1px);
}

.testimonial-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(37, 99, 235, 0.09);
    border-color: rgba(37, 99, 235, 0.3);
}

.testimonial-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.testimonial-card-header .rating {
    display: flex;
    gap: 4px;
    color: #fbbf24;
    font-size: 1.15rem;
}

.testimonial-card-header .quote-icon {
    font-size: 1.8rem;
    color: rgba(37, 99, 235, 0.12);
}

.feedback-text {
    font-style: italic;
    color: var(--text-main);
    font-size: 0.98rem;
    line-height: 1.65;
    margin: 0 0 20px;
    flex-grow: 1;
    word-break: break-word;
}

.testimonial-card .feedback-text {
    display: -webkit-box;
    -webkit-line-clamp: 6;
    line-clamp: 6;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Balanced appearance when no photos are attached */
.testimonial-card.no-photos .feedback-text {
    min-height: 110px;
}

/* Dedicated Album Gallery Container */
.testimonial-album-wrap {
    margin-bottom: 22px;
    width: 100%;
}

.testimonial-album {
    width: 100%;
    height: 190px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(15, 23, 42, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .testimonial-album {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}

/* 1 Image: Full width presentation */
.testimonial-album.album-grid-1 {
    display: block;
    width: 100%;
    height: 100%;
}
.testimonial-album.album-grid-1 .album-thumb-item {
    width: 100%;
    height: 100%;
}

/* 2 Images: Balanced 2-column split */
.testimonial-album.album-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
    height: 100%;
}

/* 3 Images: 1 Featured left + 2 stacked right */
.testimonial-album.album-grid-3 {
    display: grid;
    grid-template-columns: 1.25fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    width: 100%;
    height: 100%;
}
.testimonial-album.album-grid-3 .album-thumb-item:nth-child(1) {
    grid-row: 1 / span 2;
    grid-column: 1;
}
.testimonial-album.album-grid-3 .album-thumb-item:nth-child(2) {
    grid-row: 1;
    grid-column: 2;
}
.testimonial-album.album-grid-3 .album-thumb-item:nth-child(3) {
    grid-row: 2;
    grid-column: 2;
}

/* 4 or more Images: Symmetrical 2x2 grid */
.testimonial-album.album-grid-4 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 6px;
    width: 100%;
    height: 100%;
}

/* Album Thumbnail Item */
.album-thumb-item {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
    border-radius: 8px;
    cursor: pointer;
    background: #0f172a;
}

.album-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.35s ease, filter 0.3s ease;
}

.album-thumb-item:hover img {
    transform: scale(1.06);
    filter: brightness(1.03);
}

/* Zoom Hover Indicator */
.album-zoom-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-size: 1.15rem;
    opacity: 0;
    transition: opacity 0.25s ease;
    border-radius: 8px;
}

.album-thumb-item:hover .album-zoom-overlay {
    opacity: 1;
}

/* +N Additional Images Badge Overlay */
.album-badge-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.74);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    text-align: center;
    border-radius: 8px;
    transition: background 0.25s ease;
    user-select: none;
}

.album-thumb-item:hover .album-badge-overlay {
    background: rgba(15, 23, 42, 0.86);
}

.album-badge-overlay .badge-num {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1;
    margin-bottom: 3px;
    color: #ffffff;
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.album-badge-overlay .badge-label {
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: #e2e8f0;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* Client Info Footer in Card */
.testimonial-card .client-info {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(0, 0, 0, 0.06);
}

[data-theme="dark"] .testimonial-card .client-info {
    border-top-color: rgba(255, 255, 255, 0.08);
}

.testimonial-card .avatar-placeholder {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #2563eb), #6366f1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.22);
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.testimonial-card .avatar-placeholder .client-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 50%;
}

.testimonial-card .client-details {
    flex: 1;
    min-width: 0;
}

.testimonial-card .client-name {
    margin: 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.testimonial-card .client-role {
    margin: 2px 0 0;
    font-size: 0.85rem;
    color: var(--text-muted);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Profile Photo Avatar Upload Row in Feedback Form */
.avatar-upload-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    padding: 12px;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 12px;
}

.avatar-preview-box {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: #e2e8f0;
    border: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.15);
}

.avatar-preview-box .default-avatar-icon {
    font-size: 2.2rem;
    color: #94a3b8;
}

.avatar-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.avatar-upload-action {
    flex: 1;
    min-width: 0;
}

.avatar-upload-action .field-hint {
    margin-top: 6px;
    display: block;
}

/* ==========================================================================
   Lightbox / Fullscreen Testimonial Photo Modal
   ========================================================================== */
.testimonial-lightbox {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;
}

.tl-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.94);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    cursor: pointer;
}

.tl-dialog {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 860px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    background: #0f172a;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7);
    overflow: hidden;
    animation: tlFadeIn 0.25s ease;
}

.tl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: #1e293b;
    color: #ffffff;
}

.tl-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.tl-icon {
    color: #38bdf8;
    font-size: 1.25rem;
}

.tl-meta-text {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
}

.tl-author-caption {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

.tl-subtitle {
    font-size: 0.78rem;
    color: #94a3b8;
}

.tl-counter {
    background: rgba(37, 99, 235, 0.25);
    border: 1px solid rgba(37, 99, 235, 0.5);
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 700;
    color: #93c5fd;
}

.tl-close-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #cbd5e1;
    font-size: 1.2rem;
    cursor: pointer;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
}

.tl-close-btn:hover {
    background: #ef4444;
    color: #ffffff;
    transform: scale(1.05);
}

.tl-body {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 380px;
    max-height: 60vh;
    padding: 20px;
    background: #0b1120;
    user-select: none;
}

.tl-image-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    max-height: 58vh;
}

.tl-active-img {
    max-width: 100%;
    max-height: 56vh;
    object-fit: contain;
    border-radius: 10px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.6);
    transition: opacity 0.2s ease, transform 0.2s ease;
}

.tl-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 23, 42, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 10;
}

.tl-prev {
    left: 20px;
}

.tl-next {
    right: 20px;
}

.tl-nav-btn:hover {
    background: var(--primary-color, #2563eb);
    border-color: transparent;
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 0 15px rgba(37, 99, 235, 0.5);
}

.tl-thumbnails {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 12px 20px;
    background: #1e293b;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    max-height: 84px;
}

.tl-thumb-item {
    width: 54px;
    height: 54px;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    opacity: 0.5;
    border: 2px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
    background: #000;
}

.tl-thumb-item:hover {
    opacity: 0.85;
}

.tl-thumb-item.active {
    opacity: 1;
    border-color: #38bdf8;
    box-shadow: 0 0 10px rgba(56, 189, 248, 0.6);
    transform: scale(1.05);
}

.tl-thumb-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@keyframes tlFadeIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ==========================================================================
   Animated Coverflow Testimonials Carousel (Home & About Pages)
   ========================================================================== */
.about-testimonials-section,
.home-testimonials-section {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #eef3ff 0%, #ffffff 52%, #fff7ec 100%);
    padding: 3.75rem 0; /* was 5rem */
}

[data-theme="dark"] .about-testimonials-section,
[data-theme="dark"] .home-testimonials-section {
    background: var(--bg-main);
}

/* Soft decorative glow in the corner so the wide section doesn't feel empty */
.about-testimonials-section::before {
    content: '';
    position: absolute;
    top: -120px;
    right: -120px;
    width: 420px;
    height: 420px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(251, 191, 120, 0.18), transparent 70%);
    pointer-events: none;
}

.testimonial-stack-wrapper {
    position: relative;
    max-width: 980px;
    margin: 0 auto;
    padding: 10px 16px 0;
}

.testimonial-coverflow-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 18px;
}

.testimonial-coverflow-clip {
    position: relative;
    flex: 1;
    min-width: 0;
    overflow: hidden;
}

.testimonial-stack {
    position: relative;
    height: 340px;
}

/* Nav arrows that sit just outside the clipped card row */
.tcf-arrow {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--bg-main);
    border: 1px solid var(--border-color);
    color: var(--primary-color, #2563eb);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 8px 20px rgba(15, 23, 42, 0.1);
    transition: all 0.2s ease;
    z-index: 6;
}
.tcf-arrow:hover {
    background: var(--primary-color, #2563eb);
    color: #fff;
    transform: scale(1.06);
    box-shadow: 0 10px 24px rgba(37, 99, 235, 0.3);
}

/* Premium card with an edge-to-edge gradient border; positioned by data-coverflow-pos.
   Percentage translateX resolves against the card's own (already-scaled) width, so the
   layout stays proportional at any container size without extra breakpoints. */
.testimonial-stack-card {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 64%;
    border-radius: 16px;
    padding: 2px; /* housing for the gradient border */
    background:
        linear-gradient(var(--bg-alt), var(--bg-alt)) padding-box,
        linear-gradient(90deg, #2563eb 0%, #60a5fa 25%, #ffffff 50%, #38bdf8 75%, #2563eb 100%) border-box;
    box-shadow: 0 10px 28px rgba(15, 23, 42, 0.12), 0 0 12px rgba(37, 99, 235, 0.06);
    user-select: none;
    cursor: pointer;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.6s ease, filter 0.6s ease;
    will-change: transform, opacity;
}

.testimonial-stack-card[data-coverflow-pos="center"] {
    transform: translate(-50%, -50%) scale(1) rotate(0deg);
    opacity: 1;
    z-index: 3;
}
.testimonial-stack-card[data-coverflow-pos="center"]:hover {
    transform: translate(-50%, calc(-50% - 6px)) scale(1.015);
    box-shadow: 0 18px 36px rgba(37, 99, 235, 0.18), 0 0 20px rgba(56, 189, 248, 0.25);
}
.testimonial-stack-card[data-coverflow-pos="left"] {
    transform: translate(calc(-50% - 78%), -50%) scale(0.82) rotate(-4deg);
    opacity: 0.65;
    filter: brightness(0.97) blur(0.4px);
    z-index: 2;
}
.testimonial-stack-card[data-coverflow-pos="right"] {
    transform: translate(calc(-50% + 78%), -50%) scale(0.82) rotate(4deg);
    opacity: 0.65;
    filter: brightness(0.97) blur(0.4px);
    z-index: 2;
}
.testimonial-stack-card[data-coverflow-pos="hidden-left"] {
    transform: translate(calc(-50% - 140%), -50%) scale(0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}
.testimonial-stack-card[data-coverflow-pos="hidden-right"] {
    transform: translate(calc(-50% + 140%), -50%) scale(0.7);
    opacity: 0;
    pointer-events: none;
    z-index: 1;
}

.testimonial-stack-card .at-card-inner {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 100%;
    min-height: 260px;
    background: var(--bg-alt);
    border-radius: 14px;
    padding: 26px 28px;
    box-sizing: border-box;
    overflow: hidden;
}

.testimonial-stack-card .testimonial-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.testimonial-stack-card .feedback-body {
    flex-grow: 1;
    position: relative;
    overflow: hidden;
    margin-bottom: 12px;
}

.testimonial-stack-card .feedback-text {
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--text-main);
    font-style: italic;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.testimonial-stack-card .read-more-trigger {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--primary-color, #2563eb);
    margin-top: 6px;
}

.testimonial-stack-card[data-coverflow-pos="center"]:hover .read-more-trigger {
    color: #1d4ed8;
}

.testimonial-stack-card .read-more-trigger .read-more-link {
    text-decoration: underline;
    text-underline-offset: 2px;
}

.testimonial-stack-card .client-info {
    padding-top: 12px;
    border-top: 1px solid var(--border-color);
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

.testimonial-stack-card .avatar-placeholder {
    width: 42px;
    height: 42px;
    font-size: 1rem;
    border-radius: 50%;
    background: var(--bg-main);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    overflow: hidden;
}

.testimonial-stack-card .client-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
}

.testimonial-stack-card .client-details {
    min-width: 0;
}

.testimonial-stack-card .client-name {
    font-size: 1rem;
    margin: 0;
}

.testimonial-stack-card .client-role {
    font-size: 0.82rem;
    margin: 2px 0 0;
    color: var(--text-muted);
}

/* Progress dots below the stack */
.testimonial-stack-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 28px 0 8px;
}

.testimonial-stack-cta {
    margin-top: 2.5rem;
}

.stack-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--border-color);
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

.stack-dot:hover {
    background: var(--primary-color, #2563eb);
}

.stack-dot.is-active {
    background: var(--primary-color, #2563eb);
    width: 22px;
    border-radius: 4px;
}

/* Responsiveness for mobile screens */
@media (max-width: 860px) {
    .testimonial-stack-card {
        width: 72%;
    }
    .testimonial-stack-card[data-coverflow-pos="left"] {
        transform: translate(calc(-50% - 68%), -50%) scale(0.8) rotate(-4deg);
    }
    .testimonial-stack-card[data-coverflow-pos="right"] {
        transform: translate(calc(-50% + 68%), -50%) scale(0.8) rotate(4deg);
    }
}

@media (max-width: 640px) {
    .testimonial-stack-wrapper {
        max-width: 100%;
        padding: 10px 0 0;
    }
    .testimonial-coverflow-row {
        gap: 8px;
    }
    .tcf-arrow {
        width: 38px;
        height: 38px;
        font-size: 0.85rem;
    }
    .testimonial-stack {
        height: 320px;
    }
    .testimonial-stack-card {
        width: 100%;
    }
    /* Not enough room to peek the side cards on narrow screens */
    .testimonial-stack-card[data-coverflow-pos="left"],
    .testimonial-stack-card[data-coverflow-pos="right"] {
        opacity: 0;
        pointer-events: none;
        transform: translate(-50%, -50%) scale(0.9);
    }
    .testimonial-stack-card .at-card-inner {
        padding: 20px;
    }
}

/* ==========================================================================
   Testimonial Detail Reader Modal Popup (Clean, Minimal, Modern)
   ========================================================================== */
.testimonial-detail-modal {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
}

.testimonial-detail-modal.is-open {
    opacity: 1;
    visibility: visible;
}

.tdm-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.65);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.tdm-dialog {
    position: relative;
    z-index: 2;
    background: var(--bg-alt);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    max-width: 540px;
    width: 100%;
    padding: 32px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25), 0 0 40px rgba(37, 99, 235, 0.12);
    transform: scale(0.94) translateY(12px);
    transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.testimonial-detail-modal.is-open .tdm-dialog {
    transform: scale(1) translateY(0);
}

.tdm-close-btn {
    position: absolute;
    top: 18px;
    right: 18px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg, #ffffff);
    color: var(--text-muted);
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
}

[data-theme="dark"] .tdm-close-btn {
    background: #1e293b;
    color: #e2e8f0;
}

.tdm-close-btn:hover {
    background: #fee2e2;
    color: #ef4444;
    border-color: #fca5a5;
    transform: rotate(90deg);
}

.tdm-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 22px;
    padding-right: 48px; /* Safe space to prevent counter/text from overlapping the close button */
}

.tdm-avatar-wrap {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--primary-color, #2563eb), #6366f1);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    overflow: hidden;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.25);
    border: 2px solid #ffffff;
}

.tdm-avatar-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.tdm-author-meta {
    flex: 1;
    min-width: 0;
}

.tdm-meta-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.tdm-name {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--primary-dark);
    line-height: 1.3;
}

.tdm-role {
    margin: 4px 0 6px;
    font-size: 0.88rem;
    color: var(--text-muted);
    line-height: 1.3;
}

.tdm-rating {
    display: flex;
    gap: 3px;
    color: #f59e0b;
    font-size: 0.88rem;
}

.tdm-counter {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(37, 99, 235, 0.1);
    color: var(--primary-color, #2563eb);
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: 12px;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.tdm-body {
    position: relative;
    padding: 18px 0;
    border-top: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}

.tdm-quote-icon {
    font-size: 1.6rem;
    color: var(--primary-color, #2563eb);
    opacity: 0.25;
    margin-bottom: 10px;
    display: block;
}

.tdm-full-text {
    font-size: 1.02rem;
    line-height: 1.7;
    color: var(--text-main);
    font-style: italic;
    margin: 0;
    max-height: 320px;
    overflow-y: auto;
    padding-right: 8px;
}

.tdm-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
}

.tdm-verified-tag {
    font-size: 0.82rem;
    font-weight: 600;
    color: #10b981;
    display: flex;
    align-items: center;
    gap: 6px;
}

.tdm-close-action {
    padding: 6px 18px;
    font-size: 0.88rem;
    border-radius: 20px;
}

/* Modal Carousel Navigation Arrows */
.tdm-nav-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid var(--border-color);
    background: var(--card-bg, #ffffff);
    color: var(--primary-color, #2563eb);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
    transition: all 0.25s ease;
    z-index: 10;
}

[data-theme="dark"] .tdm-nav-arrow {
    background: #1e293b;
    color: #60a5fa;
}

.tdm-prev-arrow {
    left: -22px;
}

.tdm-next-arrow {
    right: -22px;
}

.tdm-nav-arrow:hover {
    background: var(--primary-color, #2563eb);
    color: #ffffff;
    border-color: var(--primary-color, #2563eb);
    transform: translateY(-50%) scale(1.1);
    box-shadow: 0 8px 20px rgba(37, 99, 235, 0.35);
}

@media (max-width: 640px) {
    .tdm-prev-arrow {
        left: 8px;
        top: auto;
        bottom: 16px;
        transform: none;
    }
    .tdm-next-arrow {
        right: 8px;
        top: auto;
        bottom: 16px;
        transform: none;
    }
    .tdm-nav-arrow:hover {
        transform: scale(1.08);
    }
}

.card-open-hint {
    font-size: 0.78rem;
    color: var(--text-muted);
    opacity: 0.5;
    transition: all 0.2s ease;
}

.testimonial-stack-card[data-coverflow-pos="center"]:hover .card-open-hint {
    opacity: 1;
    color: var(--primary-color, #2563eb);
    transform: translate(1px, -1px);
}

/* ==========================================================================
   Share Your Experience Button: Minimal, Floating, Brand-Aligned
   ========================================================================== */
.floating-cta-wrapper {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.35s ease, visibility 0.35s ease;
    animation: floatCtaEntrance 0.5s ease-out both;
}

.floating-cta-wrapper.is-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    transform: translate(-50%, 25px) scale(0.92) !important;
}

@keyframes floatCtaEntrance {
    from {
        opacity: 0;
        transform: translate(-50%, 20px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}

.btn-share-experience {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    padding: 0.75rem 1.6rem;
    border-radius: 999px;
    font-family: var(--font-family, 'Inter', sans-serif);
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: normal;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    background-color: var(--primary-color, #2563eb);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35), 0 1px 3px rgba(0, 0, 0, 0.1);
    transition: background-color 0.25s ease, transform 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
}

.btn-share-experience i {
    font-size: 0.9rem;
    line-height: 1;
}

.btn-share-experience .btn-chevron {
    font-size: 0.75rem;
    transition: transform 0.25s ease;
    opacity: 0.85;
}

.btn-share-experience:hover {
    background-color: var(--primary-hover, #1d4ed8);
    transform: translateY(-2px);
    box-shadow: 0 8px 22px rgba(37, 99, 235, 0.45);
    color: #ffffff !important;
}

.btn-share-experience:hover .btn-chevron {
    transform: translateY(2px);
    opacity: 1;
}

.btn-share-experience:active {
    transform: translateY(0);
    box-shadow: 0 3px 10px rgba(37, 99, 235, 0.3);
}

@media (max-width: 640px) {
    .floating-cta-wrapper {
        bottom: 20px;
    }
    .btn-share-experience {
        padding: 0.7rem 1.35rem;
        font-size: 0.875rem;
    }
}

/* Feedback Form Targeted Attention Glow (active when clicked or scrolled to) */
.feedback-form-container {
    scroll-margin-top: 100px;
    transition: box-shadow 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.6s ease;
}

.feedback-form-container.highlight-glow {
    border-color: #38bdf8 !important;
    transform: translateY(-4px);
    box-shadow: 0 25px 65px rgba(37, 99, 235, 0.22), 0 0 35px rgba(56, 189, 248, 0.45) !important;
    animation: formGlowPulse 2.8s ease-in-out infinite;
}

@keyframes formGlowPulse {
    0%, 100% {
        box-shadow: 0 25px 65px rgba(37, 99, 235, 0.22), 0 0 30px rgba(56, 189, 248, 0.4);
    }
    50% {
        box-shadow: 0 28px 75px rgba(37, 99, 235, 0.3), 0 0 45px rgba(56, 189, 248, 0.65);
    }
}







/* ==========================================================================
   Compact footer on phones (only applies at 560px and below; desktop/tablet unchanged)
   ========================================================================== */
@media (max-width: 560px) {
    .site-footer-mini { padding-top: 26px; }
    .footer-columns { row-gap: 1.1rem; column-gap: 0.75rem; padding-bottom: 0; }
    .footer-mini-logo .brand-icon { width: 30px; height: 30px; }
    .footer-mini-logo .brand-name { font-size: 1rem; }
    .footer-mini-logo .tagline { font-size: 0.6rem; }
    .footer-col-desc { font-size: 0.76rem; margin: 6px auto 10px; }
    .footer-mini-socials { gap: 0.6rem; }
    .footer-mini-socials a { width: 28px; height: 28px; font-size: 0.75rem; }
    .footer-col-title { font-size: 0.7rem; margin-bottom: 8px; }
    .footer-col-links { gap: 5px; }
    .footer-col-links a { font-size: 0.8rem; }
    .footer-address { font-size: 0.74rem; line-height: 1.45; max-width: 300px; gap: 4px; }
    .footer-mini-bottom { margin-top: 16px; padding: 12px 0; }
    .footer-mini-copy { font-size: 0.68rem; white-space: normal; }
}
@media (max-width: 360px) {
    .site-footer-mini { padding-top: 20px; }
    .footer-columns { row-gap: 0.9rem; }
    .footer-col-links a { font-size: 0.76rem; }
    .footer-address { font-size: 0.7rem; }
}

/* ==========================================================================
   Logo fix: the animated SVG logo must NOT sit on its own GPU layer.
   With transform: translateZ(0) Chrome rasterises the <img> once and never
   repaints its SVG animation frames, so the logo stayed on its first (blank)
   frame until something forced a repaint (e.g. switching browser tabs).
   Removing the layer has no visual effect; the animation now always plays.
   ========================================================================== */
.brand-icon,
.brand-icon img,
.footer-mini-logo .brand-icon,
.footer-mini-logo .brand-icon img {
    transform: none;
    backface-visibility: visible;
    will-change: auto;
}

/* ==========================================================================
   Admin Login button (header) - Requirement 10.8
   Same box as the Brochure button (padding, height, font, radius, width) in a
   distinct teal so the two are easy to tell apart. Desktop/laptop: next to
   Brochure. Tablet/phone: full-width inside the slide-out menu.
   ========================================================================== */
.btn-admin-login {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55rem;
    padding: 0.72rem 1.4rem;
    flex-shrink: 0;
    border-radius: 0.5rem;
    border: 1.5px solid transparent;
    background: linear-gradient(135deg, #0f766e 0%, #0d9488 50%, #14b8a6 100%);
    color: #ffffff !important;
    font-weight: 600;
    font-size: 0.9375rem;
    white-space: nowrap;
    text-decoration: none;
    box-shadow: 0 4px 14px rgba(13, 148, 136, 0.3);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, filter 0.3s ease;
}

.btn-admin-login i {
    font-size: 1.05rem;
}

.btn-admin-login:hover,
.btn-admin-login:focus-visible {
    color: #ffffff !important;
    transform: translateY(-2px);
    filter: brightness(1.08);
    box-shadow: 0 8px 24px rgba(13, 148, 136, 0.42);
}

.btn-admin-login:active {
    transform: translateY(0);
}

.btn-admin-login:focus-visible {
    outline: 2px solid #14b8a6;
    outline-offset: 2px;
}

/* Desktop: both header buttons share one box size; the menu spacing is
   tightened (item gap 32px -> 20px, link padding 18px -> 12px) so the menu
   stays on one line next to them. */
@media screen and (min-width: 1024px) {
    .nav-links {
        gap: 1.25rem;
    }

    .nav-links a {
        padding-left: 12px;
        padding-right: 12px;
    }

    .main-nav {
        gap: 1.5rem;
    }

    .header-actions {
        gap: 0.75rem;
    }

    .header-actions .btn-brochure,
    .header-actions .btn-admin-login {
        min-width: 10.5rem;
    }
}

@media screen and (max-width: 1023px) {
    .header-actions .btn-admin-login {
        width: 100%;
        padding: 0.85rem 1.25rem;
        font-size: 0.95rem;
    }
}

/* Contact page: when Contact Details or the Enquiry Form is switched off in the CMS,
   the remaining column uses the full width instead of half the grid. */
.contact-grid.contact-grid-single {
    grid-template-columns: 1fr;
    max-width: 760px;
}

.contact-grid.contact-grid-single .enquiry-form-container {
    border-left: none !important;
}

/* Map "Get Directions" button: its inline padding blocks the usual hover growth,
   so give the hover arrow its own room instead of letting it sit on the text. */
.btn-map-directions:hover {
    padding-right: 2.4rem !important;
}
.btn-map-directions::after {
    right: 0.9rem;
}

/* Gallery: smaller gap between the photos / page numbers and the "Book your free coworking tour" section */
.gallery-photos-section { padding-bottom: 2rem; }
.gallery-photos-section .container > p:empty { display: none; }
.gallery-photos-section .gallery-pagination { margin-top: 36px; }
/* Gallery pagination Previous / Next arrows */
.gallery-pagination .page-btn.page-arrow { font-size: 0.85rem; }
.gallery-pagination .page-btn:disabled,
.gallery-pagination .page-btn:disabled:hover {
    opacity: 0.4;
    cursor: not-allowed;
    background: var(--bg-main);
    color: var(--text-main);
    border-color: var(--border-color);
    box-shadow: none;
}

/* About Us "Your Ideal & Flexible Workspace Solution" cards: Explore links line up at the bottom */
.workspace-tile { display: flex; flex-direction: column; align-items: flex-start; }
.workspace-tile-cta { margin-top: auto; }

/* Form messages (e.g. "Thank you! Your feedback has been submitted..."): keep the icon beside the
   text and the text left-aligned, so a message that wraps to two lines stays tidy */
.alert { justify-content: flex-start; text-align: left; line-height: 1.5; }
.alert > i { flex-shrink: 0; }

/* Chatbot "Enquire Now" / "View All Services" buttons: room for the hover arrow so it doesn't sit on the text */
.btn.chatbot-cta:hover { padding-right: 2.4rem !important; }
.btn.chatbot-cta::after { right: 0.85rem; }

/* ============ Privacy Policy page (pp-*) ============ */
.pp-section { position: relative; }
/* body's overflow-x:hidden stops position:sticky; clip hides sideways overflow the same way but keeps sticky (this page only) */
body:has(.pp-section) { overflow-x: clip; }
.pp-intro {
    display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center;
    padding: 2rem 2.25rem; margin-bottom: 2rem;
    background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 20px;
    box-shadow: 0 10px 30px rgba(15, 23, 42, 0.05);
}
.pp-updated {
    display: inline-flex; align-items: center; gap: 8px; margin-bottom: 0.9rem; padding: 6px 14px;
    border-radius: 999px; background: rgba(37, 99, 235, 0.1); color: var(--primary-color);
    font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em;
}
.pp-intro-text p { margin: 0; color: var(--text-muted); font-size: 1rem; line-height: 1.75; }
.pp-intro-text strong { color: var(--text-main); }
.pp-promises { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.85rem; }
.pp-promise {
    display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.95rem 1rem;
    background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 14px;
    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}
.pp-promise:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.35); box-shadow: 0 10px 22px rgba(37, 99, 235, 0.1); }
.pp-promise > i {
    flex-shrink: 0; width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
    border-radius: 10px; background: var(--primary-color); color: #fff; font-size: 0.95rem;
}
.pp-promise strong { display: block; color: var(--text-main); font-size: 0.9rem; line-height: 1.3; }
.pp-promise span { display: block; margin-top: 3px; color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }

.pp-layout { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 2rem; align-items: start; }
.pp-toc { position: sticky; top: calc(var(--header-height) + 20px); }
.pp-toc-inner { padding: 1.25rem; background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 18px; }
.pp-toc-title { display: block; margin: 0 0 0.75rem 0.5rem; color: var(--text-muted); font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; }
.pp-toc nav { display: flex; flex-direction: column; gap: 2px; }
.pp-toc a {
    display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px;
    color: var(--text-main); font-size: 0.88rem; font-weight: 500; text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease;
}
.pp-toc a span { color: var(--text-muted); font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.pp-toc a:hover { background: var(--bg-alt); color: var(--primary-color); }
.pp-toc a.is-active { background: rgba(37, 99, 235, 0.1); color: var(--primary-color); font-weight: 700; }
.pp-toc a.is-active span { color: var(--primary-color); }

.pp-content { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.pp-card {
    position: relative; padding: 2rem 2.25rem; scroll-margin-top: calc(var(--header-height) + 20px);
    background: var(--bg-main); border: 1px solid var(--border-color); border-radius: 18px;
    transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.pp-card:hover { border-color: rgba(37, 99, 235, 0.25); box-shadow: 0 12px 30px rgba(15, 23, 42, 0.06); }
.pp-card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 1rem; }
.pp-sec-icon {
    flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px;
    border-radius: 14px; background: rgba(37, 99, 235, 0.1); color: var(--primary-color); font-size: 1.15rem;
}
.pp-card h2 { display: flex; align-items: baseline; gap: 10px; margin: 0; color: var(--text-main); font-family: var(--font-heading); font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.pp-sec-num { color: var(--primary-color); font-size: 0.95rem; font-weight: 800; opacity: 0.7; }
.pp-card p { margin: 0 0 0.9rem; color: var(--text-muted); font-size: 0.97rem; line-height: 1.75; }
.pp-card p:last-child { margin-bottom: 0; }
.pp-card strong { color: var(--text-main); }
.pp-sub { margin: 1.4rem 0 0.5rem; color: var(--text-main); font-size: 1.05rem; font-weight: 700; }

.pp-ticks { list-style: none; margin: 0 0 0.9rem; padding: 0; display: flex; flex-direction: column; gap: 0.7rem; }
.pp-ticks:last-child { margin-bottom: 0; }
.pp-ticks li { position: relative; padding-left: 30px; color: var(--text-muted); font-size: 0.97rem; line-height: 1.7; }
.pp-ticks li::before {
    content: '\f00c'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    position: absolute; left: 0; top: 3px; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
    border-radius: 50%; background: rgba(37, 99, 235, 0.12); color: var(--primary-color); font-size: 0.62rem;
}

.pp-collect-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0.4rem 0 1.1rem; }
.pp-collect { padding: 1.2rem 1.2rem 1.1rem; background: var(--bg-alt); border: 1px solid var(--border-color); border-radius: 14px; }
.pp-collect-head { display: flex; align-items: center; gap: 10px; }
.pp-collect-head i { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: var(--primary-color); color: #fff; font-size: 0.85rem; flex-shrink: 0; }
.pp-collect-head h3 { margin: 0; color: var(--text-main); font-size: 1rem; font-weight: 700; }
.pp-card .pp-collect-where { margin: 0.6rem 0 0.7rem; font-size: 0.8rem; line-height: 1.45; }
.pp-collect ul { list-style: none; margin: 0; padding: 0; }
.pp-collect li { position: relative; padding-left: 16px; color: var(--text-main); font-size: 0.88rem; line-height: 1.55; margin-bottom: 5px; }
.pp-collect li::before { content: ''; position: absolute; left: 2px; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--primary-color); }
.pp-card .pp-note {
    display: flex; gap: 10px; align-items: flex-start; padding: 0.85rem 1rem; border-radius: 12px;
    background: rgba(37, 99, 235, 0.07); border: 1px solid rgba(37, 99, 235, 0.18); font-size: 0.9rem; line-height: 1.6;
}
.pp-note i { color: var(--primary-color); margin-top: 4px; }

.pp-chips { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.pp-chip {
    display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 999px;
    background: var(--bg-alt); border: 1px solid var(--border-color); color: var(--text-main); font-size: 0.84rem; font-weight: 500;
}
.pp-chip i { color: var(--primary-color); }

.pp-table-wrap { margin: 0.3rem 0 1rem; overflow-x: auto; border: 1px solid var(--border-color); border-radius: 14px; }
.pp-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.pp-table th { padding: 0.8rem 1rem; background: var(--bg-alt); color: var(--text-main); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-align: left; text-transform: uppercase; }
.pp-table td { padding: 0.85rem 1rem; border-top: 1px solid var(--border-color); color: var(--text-muted); line-height: 1.5; vertical-align: top; }
.pp-table td:first-child { color: var(--text-main); font-weight: 600; }

.pp-rights { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.85rem; margin: 0.3rem 0 1.1rem; }
.pp-right {
    display: flex; flex-direction: column; gap: 4px; padding: 1.1rem; background: var(--bg-alt);
    border: 1px solid var(--border-color); border-radius: 14px; transition: transform 0.25s ease, border-color 0.25s ease;
}
.pp-right:hover { transform: translateY(-3px); border-color: rgba(37, 99, 235, 0.35); }
.pp-right i { margin-bottom: 6px; color: var(--primary-color); font-size: 1.15rem; }
.pp-right strong { font-size: 0.95rem; }
.pp-right span { color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }

.pp-contact-card { background: linear-gradient(135deg, rgba(37, 99, 235, 0.06), rgba(14, 165, 233, 0.06)), var(--bg-main); border-color: rgba(37, 99, 235, 0.25); }
.pp-contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem 1.5rem; margin: 0.4rem 0 1.4rem; }
.pp-contact-grid .pp-contact-item:nth-child(3) { grid-column: 1 / -1; }
.pp-contact-item { display: flex; gap: 0.85rem; align-items: flex-start; min-width: 0; }
.pp-contact-icon { flex-shrink: 0; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--contact-icon-bg, rgba(37, 99, 235, 0.1)); color: var(--primary-color); }
.pp-contact-item h4 { margin: 2px 0 4px; color: var(--text-main); font-size: 0.85rem; font-weight: 700; }
.pp-contact-item a { display: block; color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; text-decoration: none; overflow-wrap: anywhere; }
.pp-contact-item a:hover { color: var(--primary-color); }
.pp-card .pp-contact-item p { margin: 0; font-size: 0.88rem; line-height: 1.55; }

@media (max-width: 1024px) {
    .pp-intro { grid-template-columns: minmax(0, 1fr); }
    .pp-collect-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .pp-rights { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
    .pp-layout { grid-template-columns: minmax(0, 1fr); }
    .pp-toc { display: none; }
}
@media (max-width: 600px) {
    .pp-intro, .pp-card { padding: 1.4rem 1.2rem; border-radius: 16px; }
    .pp-promises, .pp-collect-grid, .pp-rights, .pp-contact-grid { grid-template-columns: minmax(0, 1fr); }
    .pp-card h2 { font-size: 1.25rem; }
}