/* ========================================
   21st Castle Developers - Modern Website
   ======================================== */

/* CSS Variables */
:root {
    /* Colors */
    --color-primary: #0a0a0a;
    --color-secondary: #1a1a1a;
    --color-accent: #c9a962;
    --color-accent-light: #e4d4a5;
    --color-accent-dark: #a08840;
    --color-white: #faf7f2;
    --color-gray-100: #f5f0e8;
    --color-gray-200: #e8e8e8;
    --color-gray-300: #d1d1d1;
    --color-gray-400: #a0a0a0;
    --color-gray-500: #707070;
    --color-gray-600: #505050;
    --color-text: #1a1a1a;
    --color-text-light: #666666;

    /* Gradients */
    --gradient-gold: linear-gradient(135deg, #c9a962 0%, #f0e6c8 50%, #c9a962 100%);
    --gradient-dark: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
    --gradient-hero: linear-gradient(135deg, rgba(10, 10, 10, 0.95) 0%, rgba(26, 26, 26, 0.9) 100%);

    /* Typography */
    --font-display: 'Cormorant Garamond', 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    /* Spacing */
    --spacing-xs: 0.5rem;
    --spacing-sm: 1rem;
    --spacing-md: 1.5rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;
    --spacing-2xl: 4rem;
    --spacing-3xl: 4.5rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 2px 4px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 16px 48px rgba(0, 0, 0, 0.2);
    --shadow-glow: 0 0 40px rgba(201, 169, 98, 0.3);

    /* Transitions */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-slower: 0.8s cubic-bezier(0.16, 1, 0.3, 1);

    /* Z-index */
    --z-cursor: 2147483001; /* must stay above #ccwRoot (chat widget) */
    --z-preloader: 9998;
    --z-modal: 1000;
    --z-header: 100;
    --z-overlay: 50;
}

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

html {
    font-size: 16px;
}

html.lenis, html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

body {
    font-family: var(--font-body);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--color-text);
    background-color: var(--color-white);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body.no-scroll {
    overflow: hidden;
}

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

a {
    text-decoration: none;
    color: inherit;
    transition: var(--transition-base);
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
}

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

/* Container */
.container {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text);
}

.text-gradient {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

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

/* Preloader */
.preloader {
    position: fixed;
    inset: 0;
    z-index: var(--z-preloader);
    pointer-events: all;
}

.preloader.done {
    pointer-events: none;
}

.preloader-top,
.preloader-bottom {
    position: absolute;
    left: 0;
    right: 0;
    height: 50%;
    background: var(--color-primary);
    will-change: transform;
}

.preloader-top {
    top: 0;
}

.preloader-bottom {
    bottom: 0;
}

.preloader-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
    gap: var(--spacing-md);
}

.preloader-logo {
    width: 160px;
    height: auto;
    opacity: 0;
}

@media (min-width: 768px) {
    .preloader-logo {
        width: 200px;
    }
}

.preloader-counter {
    font-family: var(--font-display);
    font-size: clamp(4rem, 12vw, 10rem);
    font-weight: 300;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.04em;
    opacity: 0;
}

.preloader-tagline {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 2vw, 1rem);
    color: var(--color-gray-400);
    letter-spacing: 0.3em;
    text-transform: uppercase;
    opacity: 0;
    transform: translateY(10px);
}

.preloader-progress {
    position: absolute;
    bottom: 50%;
    left: 10%;
    right: 10%;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
    transform: translateY(50%);
}

.preloader-progress-bar {
    height: 100%;
    width: 0%;
    background: var(--color-accent);
    will-change: width;
}

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

/* Custom Cursor */
.cursor, .cursor-follower {
    position: fixed;
    pointer-events: none;
    z-index: var(--z-cursor);
    mix-blend-mode: difference;
    display: none;
}

@media (min-width: 1024px) and (hover: hover) {
    .cursor, .cursor-follower {
        display: block;
    }

    body.cursor-active {
        cursor: none;
    }

    body.cursor-active a,
    body.cursor-active button {
        cursor: none;
    }
}

.cursor {
    width: 8px;
    height: 8px;
    background: var(--color-white);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.1s ease, background 0.2s ease;
}

.cursor-follower {
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: transform 0.15s ease, width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.cursor.hover {
    transform: translate(-50%, -50%) scale(0);
}

.cursor-follower.hover {
    width: 60px;
    height: 60px;
    border-color: var(--color-accent);
}

/* Header */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: var(--z-header);
    padding: 0.15rem 0;
    transition: var(--transition-base);
}

.header.scrolled {
    background: rgba(12, 10, 16, 0.55);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    padding: 0.15rem 0;
}

.header.scrolled .logo-text,
.header.scrolled .nav-link,
.header.scrolled .nav-phone {
    color: #ffffff;
}

.header.scrolled .menu-toggle span {
    background: #ffffff;
}

.nav {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
}

.logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
}

.logo-img {
    height: 52px;
    width: auto;
    object-fit: contain;
    transition: var(--transition-base);
}

@media (min-width: 768px) {
    .logo-img {
        height: 62px;
    }
}

/* Logo swap on scroll - white logo default, black logo when scrolled */
.logo-white {
    display: block;
}

.logo-black {
    display: none;
}

.header.scrolled .logo-white {
    display: block;
}

.header.scrolled .logo-black {
    display: none;
}

.nav-links {
    display: none;
    align-items: center;
    gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
    .nav-links {
        display: flex;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }

    /* Homepage, top of page only: drop the hidden CTA from layout so the
       4 nav links sit in the true symmetric center. Reverts on scroll. */
    body.home .header:not(.scrolled) .nav-cta {
        display: none;
    }
}

.nav-link {
    position: relative;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    letter-spacing: 0.02em;
    padding: var(--spacing-xs) 0;
    transition: var(--transition-base);
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-accent);
    transition: var(--transition-base);
}

.nav-link:hover::after,
.nav-link.active::after {
    width: 100%;
}

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

.nav-phone {
    display: none;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-white);
    transition: var(--transition-base);
}

@media (min-width: 768px) {
    .nav-phone {
        display: flex;
    }
}

.nav-phone:hover {
    color: var(--color-accent);
}

.phone-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.nav-phone:hover .phone-icon {
    background: var(--color-accent);
}

.menu-toggle {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 32px;
    height: 32px;
    padding: 4px;
}

@media (min-width: 1024px) {
    .menu-toggle {
        display: none;
    }
}

.menu-toggle span {
    display: block;
    width: 100%;
    height: 2px;
    background: var(--color-white);
    transition: var(--transition-base);
    transform-origin: center;
}

.menu-toggle.active span:nth-child(1) {
    transform: translateY(8px) rotate(45deg);
}

.menu-toggle.active span:nth-child(2) {
    opacity: 0;
}

.menu-toggle.active span:nth-child(3) {
    transform: translateY(-8px) rotate(-45deg);
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    background: var(--color-primary);
    z-index: calc(var(--z-header) - 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.mobile-menu.active {
    opacity: 1;
    visibility: visible;
}

.mobile-menu-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
}

.mobile-link {
    font-family: var(--font-display);
    font-size: 2rem;
    color: var(--color-white);
    opacity: 0;
    transform: translateY(20px);
    transition: var(--transition-base);
}

.mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active .mobile-link:nth-child(1) { transition-delay: 0.1s; }
.mobile-menu.active .mobile-link:nth-child(2) { transition-delay: 0.15s; }
.mobile-menu.active .mobile-link:nth-child(3) { transition-delay: 0.2s; }
.mobile-menu.active .mobile-link:nth-child(4) { transition-delay: 0.25s; }
.mobile-menu.active .mobile-link:nth-child(5) { transition-delay: 0.3s; }

.mobile-link:hover {
    color: var(--color-accent);
}

/* Hero Section */
.hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: var(--color-primary);
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-bg-image {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    z-index: 0;
}

.hero-bg-video {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    will-change: transform;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.8s ease;
}

.hero-bg-video.playing {
    opacity: 1;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: linear-gradient(
        180deg,
        rgba(10, 10, 10, 0.25) 0%,
        rgba(10, 10, 10, 0.25) 40%,
        rgba(10, 10, 10, 0.25) 60%,
        rgba(10, 10, 10, 0.25) 100%
    );
}

.hero-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.03;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='1'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

.hero-content {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 900px;
    padding: var(--spacing-3xl) var(--spacing-lg);
}

/* Homepage: nudge the hero text down a little to balance the top space */
body.home .hero-content {
    margin-top: 7vh;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-lg);
    background: rgba(201, 169, 98, 0.1);
    border: 1px solid rgba(201, 169, 98, 0.25);
    border-radius: var(--radius-full);
    margin-bottom: var(--spacing-xl);
    backdrop-filter: blur(8px);
}

.badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.5;
        transform: scale(1.2);
    }
}

.hero-badge span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-300);
    letter-spacing: 0.05em;
}

.hero-title {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--spacing-lg);
    line-height: 1.15;
    letter-spacing: -0.02em;
    text-shadow: 0 0 20px rgba(250, 247, 242, 0.5), 0 0 40px rgba(250, 247, 242, 0.3);
}

.title-line {
    display: block;
    overflow: hidden;
}

.title-line-inner {
    display: inline-block;
    will-change: transform;
}

.title-line.highlight .title-line-inner {
    background: var(--gradient-gold);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: none;
    filter: drop-shadow(0 0 20px rgba(201, 169, 98, 0.6)) drop-shadow(0 0 40px rgba(201, 169, 98, 0.35));
}

.title-line.title-at {
    font-size: clamp(2rem, 4.5vw, 3.2rem);
    color: var(--color-gray-400);
    font-weight: 400;
    font-style: normal;
    margin-top: var(--spacing-xs);
}

.title-line.title-brand {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: var(--color-white);
    font-weight: 400;
    margin-top: var(--spacing-xs);
    display: flex;
    justify-content: center;
    align-items: baseline;
    gap: 0.3em;
}

.title-line.title-brand .brand-name {
    color: var(--color-white);
    font-weight: 400;
}

/* "21" sized equal to "Castle" — force lining figures so digits match cap-height */
.title-line.title-brand .brand-number,
.section-title .brand-number {
    font-size: 1em;
    line-height: 1;
    vertical-align: baseline;
    font-weight: 400;
    font-variant-numeric: lining-nums;
    font-feature-settings: "lnum" 1;
}

/* "st" inline at baseline (same as the logo — not raised as superscript) */
.title-line.title-brand .brand-suffix,
.section-title .brand-suffix {
    font-size: 0.95em;
    vertical-align: baseline;
    margin-right: 0.15em;
    margin-left: 0.04em;
    font-weight: 400;
}

/* Tighter gap between "21st" and "Castle" in Visual Tour heading */
.section-title .brand-suffix {
    margin-right: 0;
}

.section-title .brand-name {
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: clamp(1rem, 2vw, 1.25rem);
    color: rgba(255, 255, 255, 0.65);
    max-width: 600px;
    margin: 0 auto var(--spacing-xl);
    line-height: 1.8;
    font-weight: 300;
    text-shadow: 0 1px 12px rgba(0, 0, 0, 0.5);
}

.hero-cta {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-3xl);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: 0.9375rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    position: relative;
    overflow: hidden;
}

.btn-primary {
    background: var(--color-accent);
    color: var(--color-primary);
    border: 1px solid var(--color-accent);
    font-weight: 700;
}

.btn-primary::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, transparent 0%, rgba(255, 255, 255, 0.3) 50%, transparent 100%);
    transform: translateX(-100%);
    transition: transform 0.5s ease;
}

.btn-primary:hover::before {
    transform: translateX(100%);
}

.btn-primary:hover {
    background: var(--color-white);
    border-color: var(--color-white);
    color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 32px rgba(201, 169, 98, 0.4);
}

.btn-outline {
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: var(--color-white);
}

.btn-outline:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-2px);
}

.btn-full {
    width: 100%;
}

.btn-whatsapp {
    background: #25D366;
    color: var(--color-white);
}

.btn-whatsapp:hover {
    background: #128C7E;
    transform: translateY(-2px);
}

/* Hero Stats */
.hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--spacing-lg);
}

@media (min-width: 640px) {
    .hero-stats {
        gap: var(--spacing-xl);
    }
}

.stat {
    text-align: center;
}

.stat-number {
    display: inline-block;
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1.1;
    vertical-align: baseline;
}

.stat-suffix {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 700;
    color: var(--color-accent);
    vertical-align: baseline;
}

.stat-label {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-400);
    margin-top: var(--spacing-xs);
}

.stat-divider {
    display: none;
    width: 1px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

@media (min-width: 640px) {
    .stat-divider {
        display: block;
    }
}

/* Hero Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--color-gray-400);
    font-size: 0.75rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.scroll-indicator {
    width: 24px;
    height: 40px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    display: flex;
    justify-content: center;
    padding-top: 8px;
}

.scroll-dot {
    width: 4px;
    height: 8px;
    background: var(--color-accent);
    border-radius: var(--radius-full);
    animation: scrollBounce 2s infinite;
}

@keyframes scrollBounce {
    0%, 100% {
        transform: translateY(0);
        opacity: 1;
    }
    50% {
        transform: translateY(12px);
        opacity: 0.3;
    }
}

/* Hero Shapes */
.hero-shapes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
}

.shape-1 {
    width: 400px;
    height: 400px;
    background: rgba(201, 169, 98, 0.2);
    top: -100px;
    right: -100px;
    animation: float 20s infinite ease-in-out;
}

.shape-2 {
    width: 300px;
    height: 300px;
    background: rgba(201, 169, 98, 0.15);
    bottom: -50px;
    left: -50px;
    animation: float 25s infinite ease-in-out reverse;
}

.shape-3 {
    width: 200px;
    height: 200px;
    background: rgba(201, 169, 98, 0.1);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: pulse 10s infinite ease-in-out;
}

@keyframes float {
    0%, 100% {
        transform: translate(0, 0);
    }
    25% {
        transform: translate(30px, -30px);
    }
    50% {
        transform: translate(-20px, 20px);
    }
    75% {
        transform: translate(20px, 30px);
    }
}

/* Section Styles */
.section-tag {
    display: inline-block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--color-accent);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: var(--radius-full);
    background: rgba(201, 169, 98, 0.08);
}

.section-tag.light {
    color: var(--color-accent-light);
    border-color: rgba(201, 169, 98, 0.2);
    background: rgba(201, 169, 98, 0.1);
}

.section-title {
    font-size: clamp(2.25rem, 5vw, 3.5rem);
    font-weight: 700;
    margin-bottom: var(--spacing-md);
    letter-spacing: -0.02em;
}

.section-subtitle {
    font-size: 1.125rem;
    color: var(--color-text-light);
    max-width: 600px;
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.section-header .section-subtitle {
    margin: 0 auto;
}

/* About Section */
.about {
    padding: var(--spacing-xl) 0;
    background: #0a0f1a;
    position: relative;
}

.about::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

/* The page canvas behind the sections. It is never visible on this page
   except through sub-pixel seams between stacked sections, which appear on
   some phones at fractional device pixel ratios. Left cream (the site
   default) those seams read as light hairlines above and below the wave
   divider; black they are invisible. Scoped to the about page. */
body.page-about {
    background: #0c0a10;
}

/* About page only: About, the wave divider and Leadership share one flat
   #0c0a10 surface. Scoped so the home page keeps its own navy About and
   its centre glow. */
.page-about .about {
    background: #0c0a10;
    /* Clears the fixed header. Was an inline style on the section, which made
       it impossible to reduce at mobile widths. */
    padding-top: 120px;
}

/* Kill the radial centre glow here — on this page the only light is the
   wave divider's line. */
.page-about .about::before {
    background: none;
}

@media (min-width: 768px) {
    .about {
        padding: var(--spacing-2xl) 0;
        padding-bottom: var(--spacing-xl);
    }
}

.about-grid {
    display: grid;
    gap: var(--spacing-3xl);
    position: relative;
    z-index: 1;
}

@media (min-width: 1024px) {
    .about-grid {
        grid-template-columns: 1fr 1fr;
        align-items: center;
    }
}

.about-text {
    font-size: 1.0625rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-md);
    line-height: 1.8;
}

.about-text strong {
    color: var(--color-white);
    font-weight: 600;
}

.about .section-header {
    position: relative;
    z-index: 1;
}

.about .section-tag {
    color: var(--color-accent-light);
    border-color: rgba(201, 169, 98, 0.2);
    background: rgba(201, 169, 98, 0.1);
}

/* ========================================
   About → Leadership wave divider
   Gold crest with the brand badge centred on
   it, over a soft navy swoosh. The SVG stretches
   edge-to-edge while vector-effect keeps stroke
   weights even, so the crest stays at
   y=80/200 = 40% and the badge pins there.
   ======================================== */
.about-wave {
    position: relative;
    height: 180px;
    background: #0c0a10;
    overflow: hidden;
}

/* No background wash here on purpose: the band stays flat #0c0a10 and every
   bit of light comes from the stroke itself, so no lit patch can show through. */

.about-wave-svg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}

.about-wave-path {
    fill: none;
    stroke: url(#waveGold);
    stroke-width: 2;
    vector-effect: non-scaling-stroke;
}

.about-wave-path--bloom {
    stroke-width: 9;
    opacity: 0.4;
}

.about-wave-path--glow {
    stroke-width: 5;
    opacity: 0.8;
}

.about-wave-path--soft {
    stroke-width: 1;
    opacity: 0.3;
}

.about-wave-badge {
    position: absolute;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
    width: 84px;
    height: 84px;
    border-radius: var(--radius-full);
    border: 1px solid rgba(201, 169, 98, 0.55);
    background: #0c0a10;
    /* Opaque ring masks the line behind the disc; the outer glow is kept tight
       so the badge reads as lit by the line, not as a light of its own. */
    box-shadow: 0 0 0 6px #0c0a10, 0 0 14px rgba(201, 169, 98, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Crops the wordmark off logo-white.png so only the shield reads at this size */
.about-wave-badge img {
    width: 78%;
    height: auto;
    aspect-ratio: 1 / 0.54;
    object-fit: cover;
    object-position: center top;
}

@media (max-width: 640px) {
    .about-wave {
        height: 120px;
    }

    .about-wave::before {
        width: 320px;
        height: 200px;
    }

    .about-wave-badge {
        width: 58px;
        height: 58px;
        box-shadow: 0 0 0 5px #0c0a10, 0 0 10px rgba(201, 169, 98, 0.25);
    }
}

.about .section-title {
    color: var(--color-white);
    font-size: clamp(1.5rem, 3.5vw, 2.5rem);
}

.about-values {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.value {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

.value:hover {
    transform: translateX(8px);
    background: rgba(201, 169, 98, 0.1);
    border-color: rgba(201, 169, 98, 0.3);
}

/* Dark value cards for Ethics & Trust */
.value.value-dark {
    background: var(--color-primary);
}

.value.value-dark:hover {
    box-shadow: var(--shadow-xl);
}

.value.value-dark .value-content h4 {
    color: var(--color-white);
}

.value.value-dark .value-content p {
    color: var(--color-gray-400);
}

.value-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(201, 169, 98, 0.1);
    border-radius: var(--radius-md);
    color: var(--color-accent);
    flex-shrink: 0;
}

.value-content h4 {
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    color: var(--color-white);
}

.value-content p {
    font-size: 0.875rem;
    color: var(--color-gray-400);
}

/* Founders Grid */
.founders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-sm);
    margin-top: var(--spacing-xl);
}

.founder-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    overflow: hidden;
    transition: var(--transition-base);
}

.founder-card:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: rgba(201, 169, 98, 0.3);
    transform: translateY(-4px);
}

.founder-image {
    width: 100%;
    aspect-ratio: 1;
    overflow: hidden;
    background: rgba(201, 169, 98, 0.1);
}

.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.founder-card:hover .founder-image img {
    transform: scale(1.05);
}

.founder-info {
    padding: var(--spacing-md);
    text-align: center;
}

.founder-info h4 {
    font-family: var(--font-display);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-white);
    margin-bottom: var(--spacing-xs);
}

.founder-title {
    font-size: 0.75rem;
    color: var(--color-accent);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

@media (max-width: 640px) {
    .founders-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-xs);
    }

    .founder-info {
        padding: var(--spacing-xs);
    }

    .founder-info h4 {
        font-size: 0.75rem;
    }

    .founder-title {
        font-size: 0.625rem;
    }
}

/* About Visual */
.about-visual {
    position: relative;
}

.visual-wrapper {
    position: relative;
    padding: var(--spacing-md);
    padding-top: 0;
}

.visual-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: var(--transition-slow);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.visual-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

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

.visual-card.logo-card {
    background: #1a1018;
    height: auto;
    width: auto;
    max-width: 200px;
}

.visual-card.logo-card img {
    object-fit: contain;
    width: 100%;
    height: auto;
}

/* Big hero logo card — replaces the project photo in About section.
   About page only (index.html uses .logo-card instead). Flat #0c0a10 to
   match the page, and the logo is centred rather than stretched: the
   source is 208x190, so filling the card would upscale it ~2.5x and
   soften it. Capped at native size it stays crisp. */
.visual-card.logo-feature-card {
    background: #0c0a10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-lg);
}

.visual-card.logo-feature-card img {
    width: auto;
    height: auto;
    max-width: 208px;
    max-height: 190px;
    object-fit: contain;
}

.card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 500;
}

/* Picture boxes - larger for visual impact */
.visual-card-1 {
    width: 100%;
    height: 360px;
    z-index: 2;
}

@media (min-width: 640px) {
    .visual-card-1 {
        width: 100%;
        height: 440px;
    }
}

@media (min-width: 1024px) {
    .visual-card-1 {
        height: 540px;
    }
}

.visual-card-2 {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 65%;
    height: 260px;
    z-index: 3;
}

@media (min-width: 640px) {
    .visual-card-2 {
        width: 58%;
        height: 300px;
    }
}

@media (min-width: 1024px) {
    .visual-card-2 {
        height: 320px;
    }
}

.visual-badge {
    position: absolute;
    top: -20px;
    right: 0;
    width: 160px;
    height: 160px;
    border-radius: var(--radius-lg);
    z-index: 4;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    background: rgba(201, 169, 98, 0.15);
    border: 1px solid rgba(201, 169, 98, 0.3);
    backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
    .visual-badge {
        top: -30px;
        right: -10px;
    }
}

@media (min-width: 1024px) {
    .visual-badge {
        top: -40px;
        right: -20px;
    }
}

.badge-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85%;
    height: 85%;
    object-fit: contain;
    opacity: 0.1;
}

.badge-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-sm);
}

.badge-number {
    display: block;
    font-family: var(--font-display);
    font-size: 2.75rem;
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
}

.badge-text {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-white);
    text-align: center;
    line-height: 1.3;
    margin-top: var(--spacing-xs);
}

/* Projects Section */
.projects {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(180deg, #f0e8d4 0%, #e8dcc4 50%, #f0e8d4 100%);
    position: relative;
}

.projects::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, var(--color-accent) 50%, transparent 100%);
}

@media (min-width: 768px) {
    .projects {
        padding: var(--spacing-3xl) 0;
    }
}

/* Projects Horizontal Scroll */
.projects-horizontal-wrapper {
    overflow: hidden;
    display: flex;
    justify-content: center;
}

.projects-horizontal-track {
    display: grid;
    gap: var(--spacing-xl);
    width: 100%;
    max-width: 600px;
}

@media (min-width: 768px) {
    .projects-horizontal-track {
        grid-template-columns: repeat(2, 1fr);
        max-width: none;
        margin: 0;
    }
}

@media (min-width: 1024px) {
    .projects-horizontal-wrapper {
        overflow: visible;
    }

    .projects-horizontal-track {
        display: flex;
        justify-content: center;
        gap: 2rem;
    }

    .projects-horizontal-track .project-card {
        flex: 0 0 min(600px, 50vw);
    }
}

.project-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    transition: var(--transition-slow);
    border: 1px solid var(--color-gray-200);
}

.project-card:hover {
    transform: translateY(-12px);
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.15);
    border-color: var(--color-accent);
}

.project-image {
    position: relative;
    height: 260px;
    overflow: hidden;
}

.project-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: var(--transition-slow);
}

.project-card:hover .project-image img {
    transform: scale(1.08);
}

.project-status {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    background: var(--color-accent);
    color: var(--color-primary);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-status.premium {
    background: linear-gradient(135deg, #1a1a1a 0%, #333 100%);
    color: var(--color-accent);
}

.project-content {
    padding: var(--spacing-lg);
}

.project-location {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-sm);
}

.project-location svg {
    color: var(--color-accent);
}

.project-title {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-sm);
}

.project-description {
    font-size: 0.9375rem;
    color: var(--color-text-light);
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.project-specs {
    display: flex;
    gap: var(--spacing-lg);
    padding: var(--spacing-sm) 0;
    border-top: 1px solid var(--color-gray-200);
    border-bottom: 1px solid var(--color-gray-200);
    margin-bottom: var(--spacing-md);
}

.spec {
    text-align: center;
    flex: 1;
}

.spec-value {
    display: block;
    font-family: var(--font-display);
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-accent);
    line-height: 1.2;
}

.spec-label {
    font-size: 0.75rem;
    color: var(--color-text-light);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.project-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-weight: 600;
    color: var(--color-accent-dark);
    padding: var(--spacing-xs) 0;
}

.project-cta svg {
    transition: var(--transition-base);
}

.project-cta:hover {
    color: var(--color-accent);
}

.project-cta:hover svg {
    transform: translateX(4px);
}

/* Scrolling Marquee Image Strip */
.marquee-strip {
    position: relative;
    width: 100%;
    height: 180px;
    overflow: hidden;
    background: #0c0a10;
}

@media (min-width: 768px) {
    .marquee-strip {
        height: 240px;
    }
}

@media (min-width: 1024px) {
    .marquee-strip {
        height: 280px;
    }
}

.marquee-track {
    display: flex;
    gap: 12px;
    height: 100%;
    width: max-content;
    animation: marqueeScroll 30s linear infinite;
}

.marquee-strip:hover .marquee-track {
    animation-play-state: paused;
}

.marquee-img {
    flex-shrink: 0;
    height: 100%;
    width: 400px;
    border-radius: var(--radius-md);
    overflow: hidden;
}

@media (min-width: 768px) {
    .marquee-img {
        width: 480px;
    }
}

@media (min-width: 1024px) {
    .marquee-img {
        width: 520px;
    }
}

.marquee-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.marquee-img:hover img {
    transform: scale(1.05);
}

.marquee-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        #0c0a10 0%,
        transparent 15%,
        transparent 85%,
        #0c0a10 100%
    );
    pointer-events: none;
}

/* Left/right fade edges */
.marquee-overlay::before,
.marquee-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 80px;
    z-index: 2;
    pointer-events: none;
}

.marquee-overlay::before {
    left: 0;
    background: linear-gradient(to right, #0c0a10, transparent);
}

.marquee-overlay::after {
    right: 0;
    background: linear-gradient(to left, #0c0a10, transparent);
}

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

/* Philosophy Section */
.philosophy {
    position: relative;
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(180deg, #f0e8d4 0%, #e8dcc4 50%, #f0e8d4 100%);
    overflow: hidden;
}

/* "Our Philosophy" tag override — gold accent on off-white bg */
.philosophy .section-tag.light {
    color: var(--color-accent);
    border-color: rgba(201, 169, 98, 0.3);
    background: rgba(201, 169, 98, 0.1);
}

.philosophy::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 98, 0.3) 50%, transparent 100%);
}

@media (min-width: 768px) {
    .philosophy {
        padding: var(--spacing-3xl) 0;
    }
}

.philosophy-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.12) 0%, transparent 70%);
}

.philosophy-content {
    position: relative;
    text-align: center;
    max-width: 800px;
    margin: 0 auto var(--spacing-2xl);
}

.philosophy-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    color: var(--color-text);
    margin-bottom: var(--spacing-lg);
}

.philosophy-text {
    font-size: 1.125rem;
    color: var(--color-text-light);
    line-height: 1.8;
    max-width: 700px;
    margin: 0 auto;
    text-align: center;
}

.features-grid {
    position: relative;
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 640px) {
    .features-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (min-width: 1024px) {
    .features-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

.feature {
    text-align: center;
    padding: var(--spacing-xl) var(--spacing-lg);
    /* Solid white cards with visible gold border — matches Road Ahead */
    background: var(--color-white);
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: var(--radius-lg);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    position: relative;
    overflow: hidden;
}

.feature:hover {
    border-color: rgba(201, 169, 98, 0.4);
    transform: translateY(-6px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* Feature card with cover image (Vision / Mission on About page) */
.feature-with-cover {
    padding-top: 0;
    overflow: hidden;
}

.feature-cover {
    position: relative;
    width: calc(100% + var(--spacing-lg) * 2);
    height: 160px;
    margin: 0 calc(var(--spacing-lg) * -1) var(--spacing-lg);
    overflow: hidden;
}

.feature-cover img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.feature-with-cover:hover .feature-cover img {
    transform: scale(1.05);
}

/* Mission card: frame the lower part of the photo (model house, keys, contract) */
#mission .feature-cover img {
    object-position: center 88%;
}

/* Compact "teaser" variant on home page — links to About > Philosophy */
.feature-teaser {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: inherit;
    padding: var(--spacing-lg) var(--spacing-md);
    min-height: 220px;
}

.feature-teaser .feature-icon {
    margin-bottom: var(--spacing-sm);
}

.feature-teaser h3 {
    margin-bottom: var(--spacing-xs);
}

.feature-teaser-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    margin-top: var(--spacing-xs);
}

.feature-teaser-link svg {
    transition: transform 0.3s ease;
}

.feature-teaser:hover .feature-teaser-link {
    color: var(--color-accent);
}

.feature-teaser:hover .feature-teaser-link svg {
    transform: translateX(4px);
}

.feature-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto var(--spacing-md);
    background: rgba(201, 169, 98, 0.15);
    border-radius: var(--radius-lg);
    color: var(--color-accent-dark);
}

.feature h3 {
    font-family: var(--font-body);
    font-size: 1.0625rem;
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-sm);
}

.feature p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
    text-align: left;
}

.feature-list {
    list-style: none;
    text-align: left;
    font-size: 0.875rem;
    color: var(--color-text-light);
    line-height: 1.6;
}

.feature-list li {
    position: relative;
    padding-left: 1.25em;
    margin-bottom: 0.5em;
}

.feature-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-accent);
}

/* Testimonials Section */
.testimonials {
    padding: var(--spacing-3xl) 0;
    background: linear-gradient(180deg, #f0e8d4 0%, #e8dcc4 50%, #f0e8d4 100%);
    position: relative;
}

.testimonials .section-title {
    color: var(--color-text);
}

.testimonials .section-tag {
    border-color: rgba(201, 169, 98, 0.3);
    background: rgba(201, 169, 98, 0.15);
    color: var(--color-accent-dark);
}

.testimonials::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 98, 0.4) 50%, transparent 100%);
}

@media (min-width: 768px) {
    .testimonials {
        padding: var(--spacing-3xl) 0;
    }
}

.testimonials-slider {
    position: relative;
    overflow: hidden;
}

.testimonial-track {
    display: flex;
    transition: transform 0.5s ease;
}

.testimonial-card {
    flex: 0 0 100%;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.6);
    border-radius: var(--radius-xl);
    margin: 0 var(--spacing-md);
    border: 1px solid rgba(201, 169, 98, 0.2);
    transition: var(--transition-base);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

@media (min-width: 768px) {
    .testimonial-card {
        flex: 0 0 calc(50% - var(--spacing-lg));
        padding: var(--spacing-2xl);
    }
}

@media (min-width: 1024px) {
    .testimonial-card {
        flex: 0 0 calc(33.333% - var(--spacing-lg));
    }
}

.testimonial-rating {
    display: flex;
    gap: 4px;
    margin-bottom: var(--spacing-md);
    color: var(--color-accent);
}

.testimonial-text {
    font-size: 1.0625rem;
    color: var(--color-text);
    line-height: 1.8;
    margin-bottom: var(--spacing-lg);
    font-style: italic;
}

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

.author-avatar {
    width: 48px;
    height: 48px;
    background: var(--gradient-gold);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.875rem;
}

.author-info {
    display: flex;
    flex-direction: column;
}

.author-name {
    font-weight: 600;
    color: var(--color-text);
}

.author-location {
    font-size: 0.875rem;
    color: var(--color-text-light);
}

.testimonial-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-xl);
}

.nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(201, 169, 98, 0.25);
    border-radius: 50%;
    color: var(--color-text);
    transition: var(--transition-base);
}

.nav-btn:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.testimonial-dots {
    display: flex;
    gap: var(--spacing-xs);
}

.testimonial-dots .dot {
    width: 8px;
    height: 8px;
    background: rgba(201, 169, 98, 0.3);
    border-radius: 50%;
    transition: var(--transition-base);
    cursor: pointer;
}

.testimonial-dots .dot.active {
    background: var(--color-accent);
    width: 24px;
    border-radius: var(--radius-full);
}

/* Contact Section */
.contact {
    padding: var(--spacing-3xl) 0;
    background: #12090a;
    position: relative;
}

.contact::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 20% 20%, rgba(201, 169, 98, 0.1) 0%, transparent 50%),
                radial-gradient(ellipse at 80% 80%, rgba(201, 169, 98, 0.06) 0%, transparent 50%);
    pointer-events: none;
}

.contact::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 98, 0.4) 50%, transparent 100%);
}

.contact .container {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .contact {
        padding: var(--spacing-3xl) 0;
    }
}

/* Contact section - dark theme text colors */
.contact .section-tag {
    color: var(--color-accent-light);
    border-color: rgba(201, 169, 98, 0.2);
    background: rgba(201, 169, 98, 0.1);
}

.contact .section-title {
    color: var(--color-white);
}

.contact-grid {
    display: grid;
    gap: var(--spacing-3xl);
}

@media (min-width: 1024px) {
    .contact-grid {
        grid-template-columns: 1fr 1fr;
        align-items: start;
    }
}

.contact-text {
    font-size: 1.0625rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-xl);
    line-height: 1.8;
}

.contact-details {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.contact-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-md);
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-lg);
    transition: var(--transition-base);
}

a.contact-item:hover {
    background: rgba(201, 169, 98, 0.1);
    border-color: rgba(201, 169, 98, 0.3);
}

.contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-primary);
    flex-shrink: 0;
}

.contact-content {
    display: flex;
    flex-direction: column;
}

.contact-label {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 2px;
}

.contact-value {
    font-weight: 500;
    color: var(--color-white);
}

/* Contact Form */
.contact-form-wrapper {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-xl);
    padding: var(--spacing-xl);
}

@media (min-width: 768px) {
    .contact-form-wrapper {
        padding: var(--spacing-2xl);
    }
}

.form-header {
    margin-bottom: var(--spacing-xl);
}

.form-header h3 {
    font-size: 1.5rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-white);
}

.form-header p {
    font-size: 0.9375rem;
    color: var(--color-gray-400);
}

.form-group {
    position: relative;
    margin-bottom: var(--spacing-lg);
}

.form-row {
    display: grid;
    gap: var(--spacing-lg);
}

@media (min-width: 640px) {
    .form-row {
        grid-template-columns: 1fr 1fr;
    }
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-md);
    padding-top: var(--spacing-lg);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
    appearance: none;
    color: var(--color-white);
}

.form-group textarea {
    resize: vertical;
    min-height: 120px;
}

.form-group select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23a0a0a0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right var(--spacing-md) center;
}

.form-group select option {
    background: var(--color-secondary);
    color: var(--color-white);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(201, 169, 98, 0.15);
    background: rgba(255, 255, 255, 0.08);
}

.form-group label {
    position: absolute;
    left: var(--spacing-md);
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.9375rem;
    color: var(--color-gray-400);
    transition: var(--transition-base);
    pointer-events: none;
}

.form-group textarea + label {
    top: var(--spacing-lg);
    transform: none;
}

.form-group input:focus + label,
.form-group input:not(:placeholder-shown) + label,
.form-group textarea:focus + label,
.form-group textarea:not(:placeholder-shown) + label,
.form-group select:focus + label,
.form-group select:valid + label {
    top: var(--spacing-sm);
    font-size: 0.75rem;
    color: var(--color-accent);
    transform: none;
}

/* Form placeholder styling for dark theme */
.form-group input::placeholder,
.form-group textarea::placeholder {
    color: transparent;
}

/* Gallery Section */
.gallery {
    padding: var(--spacing-xl) 0 var(--spacing-2xl);
    background: #0a1014;
    position: relative;
}

.gallery::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.gallery .container {
    position: relative;
    z-index: 1;
}

@media (min-width: 768px) {
    .gallery {
        padding: var(--spacing-3xl) 0;
    }
}

/* Gallery section - dark theme text colors */
.gallery .section-tag {
    color: var(--color-accent-light);
    border-color: rgba(201, 169, 98, 0.2);
    background: rgba(201, 169, 98, 0.1);
}

.gallery .section-title {
    color: var(--color-white);
}

.gallery .section-subtitle {
    color: var(--color-gray-400);
}

/* Coverflow Gallery */
.coverflow-wrapper {
    position: relative;
    padding: var(--spacing-sm) 0 var(--spacing-lg);
    overflow: hidden;
}

.coverflow-stage {
    position: relative;
    width: 100%;
    height: 320px;
    perspective: 1200px;
    perspective-origin: 50% 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

@media (min-width: 768px) {
    .coverflow-stage {
        height: 400px;
    }
}

@media (min-width: 1024px) {
    .coverflow-stage {
        height: 440px;
    }
}

.coverflow-slide {
    position: absolute;
    width: 55%;
    max-width: 620px;
    aspect-ratio: 16 / 10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    cursor: pointer;
    transform-style: preserve-3d;
    transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    border: 2px solid transparent;
    will-change: transform, opacity;
}

.coverflow-slide.active {
    z-index: 5;
    border-color: rgba(201, 169, 98, 0.5);
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(201, 169, 98, 0.15);
}

.coverflow-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.coverflow-slide.active img {
    transform: scale(1.02);
}

/* Reflection glow under active slide */
.coverflow-slide.active::after {
    content: '';
    position: absolute;
    bottom: -30px;
    left: 10%;
    right: 10%;
    height: 30px;
    background: radial-gradient(ellipse, rgba(201, 169, 98, 0.2) 0%, transparent 70%);
    filter: blur(8px);
    pointer-events: none;
}

/* Caption */
.coverflow-caption {
    text-align: center;
    margin-top: var(--spacing-md);
    font-family: var(--font-display);
    font-size: clamp(1rem, 2vw, 1.3rem);
    color: var(--color-white);
    font-weight: 500;
    letter-spacing: 0.03em;
    min-height: 1.5em;
    transition: opacity 0.3s ease;
}

/* Navigation */
.coverflow-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
}

.coverflow-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(201, 169, 98, 0.1);
    border: 1px solid rgba(201, 169, 98, 0.3);
    color: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.coverflow-btn:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.coverflow-dots {
    display: flex;
    align-items: center;
    gap: 8px;
}

.coverflow-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.25);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.coverflow-dot.active {
    background: var(--color-accent);
    width: 24px;
    border-radius: 4px;
}

/* Mobile adjustments */
@media (max-width: 639px) {
    .coverflow-stage {
        height: 300px;
    }

    .coverflow-slide {
        width: 70%;
    }

    .coverflow-btn {
        width: 40px;
        height: 40px;
    }
}

/* Amenities Section */
.amenities {
    padding: var(--spacing-3xl) 0;
    background: var(--color-gray-100);
}

@media (min-width: 768px) {
    .amenities {
        padding: var(--spacing-3xl) 0;
    }
}

.amenities-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (min-width: 768px) {
    .amenities-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--spacing-lg);
    }
}

@media (min-width: 1024px) {
    .amenities-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* Amenities Showcase Images */
.amenities-showcase {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
}

@media (min-width: 640px) {
    .amenities-showcase {
        grid-template-columns: repeat(3, 1fr);
    }
}

.amenities-image {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    height: 220px;
}

@media (min-width: 768px) {
    .amenities-image {
        height: 260px;
    }
}

.amenities-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

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

.amenities-image-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--spacing-md);
    background: linear-gradient(transparent, rgba(0, 0, 0, 0.7));
    color: var(--color-white);
    font-weight: 500;
    font-size: 0.9375rem;
}

.amenity-card {
    background: var(--color-white);
    padding: var(--spacing-md);
    border-radius: var(--radius-md);
    text-align: center;
    transition: var(--transition-base);
    border: 0.8px solid var(--color-gray-200);
}

.amenity-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.amenity-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--spacing-sm);
    background: rgba(201, 169, 98, 0.08);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    transition: var(--transition-base);
}

.amenity-icon svg {
    width: 22px;
    height: 22px;
}

.amenity-card:hover .amenity-icon {
    background: var(--color-accent);
    color: var(--color-primary);
}

.amenity-card h4 {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    margin-bottom: 2px;
    color: var(--color-text);
}

.amenity-card p {
    font-size: 0.75rem;
    color: var(--color-text-light);
    line-height: 1.4;
}

/* Location Section */
.location {
    padding: var(--spacing-3xl) 0;
    background: var(--color-white);
}

@media (min-width: 768px) {
    .location {
        padding: var(--spacing-3xl) 0;
    }
}

.location-grid {
    display: grid;
    gap: var(--spacing-xl);
}

@media (min-width: 1024px) {
    .location-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-3xl);
        align-items: center;
    }
}

.location-text {
    font-size: 1.0625rem;
    color: var(--color-text-light);
    line-height: 1.8;
    margin-bottom: var(--spacing-xl);
}

.location-highlights {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
}

@media (min-width: 640px) {
    .location-highlights {
        grid-template-columns: repeat(3, 1fr);
    }
}

.highlight-item {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-md);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    transition: var(--transition-base);
}

.highlight-item:hover {
    background: var(--color-gray-200);
}

.highlight-icon {
    width: 40px;
    height: 40px;
    background: var(--color-accent);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.highlight-content {
    display: flex;
    flex-direction: column;
}

.highlight-distance {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.highlight-place {
    font-size: 0.8125rem;
    color: var(--color-text-light);
    line-height: 1.3;
}

.location-map {
    position: relative;
}

.map-wrapper {
    position: relative;
    height: 400px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

@media (min-width: 1024px) {
    .map-wrapper {
        height: 500px;
    }
}

.map-wrapper iframe {
    width: 100%;
    height: 100%;
}

.map-overlay-card {
    position: absolute;
    bottom: var(--spacing-lg);
    left: var(--spacing-lg);
    right: var(--spacing-lg);
    background: var(--color-white);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
}

@media (min-width: 640px) {
    .map-overlay-card {
        right: auto;
        max-width: 280px;
    }
}

.map-overlay-card h4 {
    font-size: 1.125rem;
    margin-bottom: var(--spacing-xs);
}

.map-overlay-card p {
    font-size: 0.875rem;
    color: var(--color-text-light);
    margin-bottom: var(--spacing-md);
}

.map-directions {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
}

.map-directions:hover {
    color: var(--color-accent);
}

/* Old floating contact buttons removed - replaced by Floating Action Bar */

/* Project Iframe Modal */
.project-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: var(--color-primary);
    display: flex;
    flex-direction: column;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.project-modal.active {
    opacity: 1;
    visibility: visible;
}

.project-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1.5rem;
    background: rgba(10, 10, 10, 0.95);
    border-bottom: 1px solid rgba(201, 169, 98, 0.2);
    backdrop-filter: blur(12px);
    z-index: 2;
    flex-shrink: 0;
}

.project-modal-title {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent);
    letter-spacing: 0.02em;
}

.project-modal-close {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(201, 169, 98, 0.1);
    border: 1px solid rgba(201, 169, 98, 0.3);
    border-radius: var(--radius-full);
    color: var(--color-white);
    cursor: pointer;
    font-family: var(--font-body);
    font-size: 0.85rem;
    transition: all 0.3s ease;
}

.project-modal-close:hover {
    background: var(--color-accent);
    color: var(--color-primary);
    border-color: var(--color-accent);
}

.project-modal-close svg {
    flex-shrink: 0;
}

.project-modal-iframe {
    flex: 1;
    width: 100%;
    border: none;
    background: #fff;
}

.project-modal-loader {
    position: absolute;
    inset: 0;
    top: 52px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    background: var(--color-primary);
    color: var(--color-gray-400);
    font-family: var(--font-body);
    font-size: 0.9rem;
    z-index: 1;
    transition: opacity 0.3s ease;
}

.project-modal-loader.hidden {
    opacity: 0;
    pointer-events: none;
}

.project-modal-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(201, 169, 98, 0.2);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: modalSpin 0.8s linear infinite;
}

@keyframes modalSpin {
    to { transform: rotate(360deg); }
}

@media (max-width: 640px) {
    .project-modal-header {
        padding: 0.5rem 1rem;
    }

    .project-modal-close span {
        display: none;
    }

    .project-modal-title {
        font-size: 0.95rem;
    }
}

/* Lightbox */
.lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.95);
    z-index: calc(var(--z-modal) + 1);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition-base);
}

.lightbox.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-close {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition-base);
}

.lightbox-close:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

.lightbox-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    transition: var(--transition-base);
}

.lightbox-nav:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

.lightbox-prev {
    left: var(--spacing-lg);
}

.lightbox-next {
    right: var(--spacing-lg);
}

.lightbox-content {
    max-width: 90vw;
    max-height: 80vh;
    text-align: center;
}

.lightbox-content img {
    max-width: 100%;
    max-height: 75vh;
    object-fit: contain;
    border-radius: var(--radius-md);
}

.lightbox-caption {
    color: var(--color-white);
    margin-top: var(--spacing-md);
    font-size: 1rem;
}

/* Footer */
.footer {
    background: var(--color-primary);
    color: var(--color-white);
    padding-top: var(--spacing-3xl);
}

.footer-top {
    display: grid;
    gap: var(--spacing-xl);
    padding-bottom: var(--spacing-2xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (min-width: 768px) {
    .footer-top {
        grid-template-columns: 1.5fr 2fr;
    }
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--spacing-md);
}

.footer-logo-img {
    height: 60px;
    width: auto;
    object-fit: contain;
}

@media (min-width: 768px) {
    .footer-logo-img {
        height: 70px;
    }
}

.footer-tagline {
    font-size: 0.9375rem;
    color: var(--color-gray-400);
    margin-bottom: var(--spacing-lg);
}

.footer-social {
    display: flex;
    gap: var(--spacing-sm);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-md);
    color: var(--color-white);
    transition: var(--transition-base);
}

.social-link:hover {
    background: var(--color-accent);
    color: var(--color-primary);
}

.footer-links {
    display: grid;
    gap: var(--spacing-xl);
    grid-template-columns: repeat(2, 1fr);
}

@media (min-width: 768px) {
    .footer-links {
        grid-template-columns: repeat(3, 1fr);
    }
}

.footer-column h4 {
    font-family: var(--font-body);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: var(--spacing-md);
}

.footer-column a {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-gray-400);
    padding: var(--spacing-xs) 0;
    transition: var(--transition-base);
}

.footer-column a:hover {
    color: var(--color-accent);
    padding-left: var(--spacing-xs);
}

.footer-bottom {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) 0;
    text-align: center;
}

@media (min-width: 768px) {
    .footer-bottom {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}

.footer-bottom p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.footer-legal {
    display: flex;
    gap: var(--spacing-lg);
}

.footer-legal a {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.footer-legal a:hover {
    color: var(--color-accent);
}

/* Back to Top */
.back-to-top {
    position: fixed;
    bottom: var(--spacing-lg);
    right: var(--spacing-lg);
    width: 48px;
    height: 48px;
    background: var(--color-accent);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: var(--transition-base);
    z-index: var(--z-overlay);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-glow);
}

/* ========================================
   Impact Numbers Strip
   ======================================== */
.impact-strip {
    background: var(--color-primary);
    padding: var(--spacing-3xl) 0;
    position: relative;
    overflow: hidden;
}

.impact-strip::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 50%, rgba(201, 169, 98, 0.12) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 50%, rgba(201, 169, 98, 0.08) 0%, transparent 50%);
    pointer-events: none;
}

.impact-strip::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent 0%, rgba(201, 169, 98, 0.4) 50%, transparent 100%);
}

.impact-grid {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xl);
    flex-wrap: wrap;
}

.impact-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.impact-number {
    font-family: var(--font-display);
    font-size: clamp(3rem, 7vw, 5rem);
    font-weight: 700;
    color: var(--color-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.impact-suffix {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    color: var(--color-accent);
    line-height: 1;
}

.impact-label {
    font-family: var(--font-body);
    font-size: 0.875rem;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-top: var(--spacing-xs);
}

.impact-divider {
    width: 1px;
    height: 50px;
    background: rgba(201, 169, 98, 0.3);
}

@media (max-width: 640px) {
    .impact-grid {
        gap: var(--spacing-lg) var(--spacing-xl);
    }

    .impact-divider {
        display: none;
    }

    .impact-item {
        flex: 0 0 40%;
    }
}

/* ========================================
   Trust Signals Section
   ======================================== */
.trust-signals {
    padding: var(--spacing-3xl) 0;
    background: var(--color-primary);
    position: relative;
}

.trust-signals::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.06) 0%, transparent 70%);
    pointer-events: none;
}

.trust-signals .container {
    position: relative;
    z-index: 1;
}

.trust-signals .section-tag {
    color: var(--color-accent-light);
    border-color: rgba(201, 169, 98, 0.2);
    background: rgba(201, 169, 98, 0.1);
}

.trust-signals .section-title {
    color: var(--color-white);
}

.trust-content {
    text-align: center;
    margin-bottom: var(--spacing-2xl);
}

.trust-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-lg);
}

@media (max-width: 768px) {
    .trust-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

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

.trust-item {
    text-align: center;
    padding: var(--spacing-xl);
    background: rgba(255, 255, 255, 0.03);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: var(--transition-base);
}

.trust-item:hover {
    border-color: rgba(201, 169, 98, 0.4);
    transform: translateY(-4px);
    background: rgba(201, 169, 98, 0.08);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 56px;
    height: 56px;
    background: rgba(201, 169, 98, 0.1);
    border-radius: 50%;
    margin-bottom: var(--spacing-md);
    color: var(--color-accent);
}

.trust-item h4 {
    font-family: var(--font-display);
    font-size: 1.125rem;
    margin-bottom: var(--spacing-xs);
    color: var(--color-white);
}

.trust-item p {
    font-size: 0.875rem;
    color: var(--color-gray-400);
    line-height: 1.6;
}

/* ========================================
   Navigation CTA Button
   ======================================== */
.nav-cta {
    display: none;
}

@media (min-width: 1024px) {
    .nav-cta {
        display: inline-flex;
        align-items: center;
        padding: 0.5rem 1.25rem;
        background: var(--color-accent);
        color: var(--color-primary);
        font-family: var(--font-body);
        font-size: 0.875rem;
        font-weight: 600;
        border-radius: var(--radius-full);
        text-decoration: none;
        transition: var(--transition-base);
        margin-left: var(--spacing-md);
        opacity: 0;
        transform: translateY(-10px);
        pointer-events: none;
    }

    .header.scrolled .nav-cta {
        opacity: 1;
        transform: translateY(0);
        pointer-events: all;
    }

    .nav-cta:hover {
        background: var(--color-white);
        color: var(--color-primary);
        transform: translateY(-2px);
        box-shadow: var(--shadow-md);
    }

    .header.scrolled .nav-cta:hover {
        transform: translateY(-2px);
    }
}

/* ========================================
   Floating Action Bar
   ======================================== */
.floating-action-bar {
    position: fixed;
    bottom: var(--spacing-lg);
    left: 50%;
    transform: translateX(-50%) translateY(100px);
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 6px;
    background: rgba(10, 10, 10, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(201, 169, 98, 0.2);
    border-radius: var(--radius-full);
    z-index: var(--z-overlay);
    opacity: 0;
    visibility: hidden;
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
                opacity 0.5s ease,
                visibility 0.5s ease;
}

.floating-action-bar.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    visibility: visible;
}

.fab-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    color: var(--color-gray-300);
    text-decoration: none;
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
    white-space: nowrap;
}

.fab-item:hover {
    background: rgba(201, 169, 98, 0.15);
    color: var(--color-accent);
}

.fab-item svg {
    flex-shrink: 0;
}

.fab-whatsapp:hover {
    background: rgba(37, 211, 102, 0.15);
    color: #25D366;
}

.fab-call:hover {
    background: rgba(201, 169, 98, 0.15);
    color: var(--color-accent);
}

@media (max-width: 768px) {
    .floating-action-bar {
        bottom: var(--spacing-sm);
        padding: 4px;
    }

    .fab-item {
        padding: 10px;
    }

    .fab-item span {
        display: none;
    }
}

/* ========================================
   Gold Shimmer Effect (Phase 6)
   ======================================== */
.brand-name {
    background: linear-gradient(
        90deg,
        var(--color-white) 0%,
        var(--color-white) 40%,
        var(--color-accent-light) 50%,
        var(--color-white) 60%,
        var(--color-white) 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: goldShimmer 4s linear infinite;
}

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

/* ========================================
   Context-Aware Cursor (Phase 6)
   ======================================== */
@media (min-width: 1024px) and (hover: hover) {
    .cursor-follower.cursor-view,
    .cursor-follower.cursor-explore {
        width: 80px !important;
        height: 80px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(201, 169, 98, 0.15);
        border: 1px solid rgba(201, 169, 98, 0.4);
        mix-blend-mode: normal;
    }

    .cursor-follower.cursor-view::after,
    .cursor-follower.cursor-explore::after {
        position: absolute;
        color: var(--color-accent);
        font-size: 0.65rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        font-family: var(--font-body);
    }

    .cursor-follower.cursor-view::after {
        content: 'View';
    }

    .cursor-follower.cursor-explore::after {
        content: 'Explore';
    }
}

/* 3D Particle Canvas */
.building-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.7;
}

.about-visual .visual-wrapper {
    position: relative;
    z-index: 1;
}

@media (max-width: 767px) {
    .building-canvas {
        display: none;
    }
}

/* GSAP handles [data-aos] animations via inline styles */

/* Utility Classes */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Responsive Adjustments */
@media (max-width: 640px) {
    /* --- Global mobile spacing --- */
    :root {
        --spacing-xl: 1.75rem;
        --spacing-2xl: 2rem;
        --spacing-3xl: 2.5rem;
    }

    .container {
        padding: 0 var(--spacing-sm);
    }

    .section-header {
        margin-bottom: var(--spacing-lg);
    }

    .section-title {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
        margin-bottom: var(--spacing-xs);
    }

    .section-subtitle {
        font-size: 0.875rem;
    }

    /* --- Hero mobile --- */
    .hero-content {
        padding: calc(var(--spacing-2xl) + 50px) var(--spacing-sm) var(--spacing-lg);
    }

    .hero-title {
        font-size: clamp(1.5rem, 6.5vw, 2.25rem);
        margin-bottom: var(--spacing-xs);
    }

    .hero-subtitle {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
        line-height: 1.5;
    }

    .hero-badge {
        margin-bottom: var(--spacing-sm);
        padding: 4px var(--spacing-sm);
    }

    .hero-badge span {
        font-size: 0.6875rem;
    }

    .hero-cta {
        margin-bottom: var(--spacing-lg);
        gap: var(--spacing-xs);
    }

    .hero-cta .btn {
        padding: 0.6rem var(--spacing-md);
        font-size: 0.8125rem;
    }

    /* Stats as compact inline row */
    .hero-stats {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--spacing-sm) var(--spacing-lg);
    }

    .stat-divider {
        display: none;
    }

    .stat {
        padding: 0;
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-suffix {
        font-size: 1rem;
    }

    .stat-label {
        font-size: 0.6875rem;
        margin-top: 1px;
    }

    .hero-scroll {
        display: none;
    }

    /* --- About section mobile --- */
    .about {
        padding: var(--spacing-lg) 0;
    }

    .about-grid {
        gap: var(--spacing-lg);
    }

    .about .section-title {
        font-size: clamp(1.25rem, 5vw, 1.5rem);
    }

    .about-text {
        font-size: 0.875rem;
        line-height: 1.6;
        margin-bottom: var(--spacing-sm);
    }

    .about-values {
        gap: var(--spacing-xs);
        margin-top: var(--spacing-md);
    }

    .value {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .value-icon {
        width: 40px;
        height: 40px;
    }

    .value-content h4 {
        font-size: 0.9375rem;
    }

    .value-content p {
        font-size: 0.8125rem;
    }

    .visual-wrapper {
        padding: var(--spacing-sm);
        padding-top: 0;
    }

    .visual-card-1 {
        height: 220px;
    }

    .visual-card-2 {
        height: 180px;
        width: 60%;
    }

    .visual-badge {
        width: 100px;
        height: 100px;
        top: -15px;
        right: 0;
    }

    .badge-number {
        font-size: 2rem;
    }

    .badge-text {
        font-size: 0.5625rem;
        margin-top: 2px;
    }

    /* --- Projects mobile --- */
    .projects {
        padding: var(--spacing-lg) 0;
    }

    .projects-horizontal-track {
        gap: var(--spacing-md);
    }

    .project-image {
        height: 180px;
    }

    .project-content {
        padding: var(--spacing-sm) var(--spacing-md);
    }

    .project-title {
        font-size: 1.125rem;
        margin-bottom: 4px;
    }

    .project-description {
        font-size: 0.8125rem;
        margin-bottom: var(--spacing-sm);
        line-height: 1.5;
    }

    .project-specs {
        gap: var(--spacing-xs);
        padding: var(--spacing-xs) 0;
        margin-bottom: var(--spacing-sm);
    }

    .spec-value {
        font-size: 1.125rem;
    }

    .spec-label {
        font-size: 0.625rem;
    }

    /* --- Philosophy mobile --- */
    .philosophy {
        padding: var(--spacing-lg) 0;
    }

    .philosophy-content {
        margin-bottom: var(--spacing-lg);
    }

    .philosophy-text {
        font-size: 0.875rem;
    }

    .features-grid {
        gap: var(--spacing-xs);
    }

    .feature {
        padding: var(--spacing-sm);
    }

    .feature-icon {
        width: 40px;
        height: 40px;
        margin-bottom: var(--spacing-xs);
    }

    .feature h3 {
        font-size: 0.875rem;
    }

    .feature p,
    .feature-list {
        font-size: 0.75rem;
    }

    /* --- Testimonials mobile --- */
    .testimonials {
        padding: var(--spacing-lg) 0;
    }

    .testimonial-card {
        padding: var(--spacing-sm) var(--spacing-md);
        margin: 0 var(--spacing-xs);
    }

    .testimonial-text {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-sm);
        line-height: 1.6;
    }

    .testimonial-nav {
        margin-top: var(--spacing-sm);
    }

    .nav-btn {
        width: 36px;
        height: 36px;
    }

    /* --- Gallery mobile --- */
    .gallery {
        padding: var(--spacing-lg) 0;
    }

    /* Coverflow mobile handled in main CSS */

    .gallery-caption {
        font-size: 0.875rem;
    }

    /* --- Amenities mobile --- */
    .amenities {
        padding: var(--spacing-lg) 0;
    }

    .amenities-showcase {
        gap: var(--spacing-xs);
        margin-bottom: var(--spacing-md);
    }

    .amenities-image {
        height: 180px;
    }

    .amenities-grid {
        gap: var(--spacing-sm);
    }

    .amenity-card {
        padding: var(--spacing-sm);
    }

    .amenity-icon {
        width: 36px;
        height: 36px;
        margin-bottom: var(--spacing-xs);
    }

    .amenity-icon svg {
        width: 18px;
        height: 18px;
    }

    .amenity-card h4 {
        font-size: 0.75rem;
    }

    .amenity-card p {
        font-size: 0.625rem;
    }

    /* --- Location mobile --- */
    .location {
        padding: var(--spacing-lg) 0;
    }

    .location-text {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
    }

    .location-highlights {
        gap: var(--spacing-sm);
    }

    .highlight-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-xs);
    }

    .highlight-icon {
        width: 32px;
        height: 32px;
    }

    .highlight-distance {
        font-size: 1rem;
    }

    .highlight-place {
        font-size: 0.75rem;
    }

    .map-wrapper {
        height: 300px;
        border-radius: var(--radius-lg);
    }

    .map-overlay-card {
        left: var(--spacing-sm);
        right: var(--spacing-sm);
        bottom: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .map-overlay-card h4 {
        font-size: 1rem;
    }

    .map-overlay-card p {
        font-size: 0.8125rem;
        margin-bottom: var(--spacing-sm);
    }

    /* --- Contact mobile --- */
    .contact {
        padding: var(--spacing-lg) 0;
    }

    .contact-grid {
        gap: var(--spacing-lg);
    }

    .contact-text {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
    }

    .contact-details {
        gap: var(--spacing-sm);
    }

    .contact-item {
        padding: var(--spacing-sm);
        gap: var(--spacing-sm);
    }

    .contact-icon {
        width: 40px;
        height: 40px;
    }

    .contact-label {
        font-size: 0.6875rem;
    }

    .contact-value {
        font-size: 0.875rem;
    }

    .contact-form-wrapper {
        padding: var(--spacing-md);
    }

    .form-header h3 {
        font-size: 1.25rem;
    }

    .form-header p {
        font-size: 0.8125rem;
    }

    .form-group {
        margin-bottom: var(--spacing-md);
    }

    /* --- Footer mobile --- */
    .footer {
        padding-top: var(--spacing-lg);
    }

    .footer-top {
        gap: var(--spacing-md);
        padding-bottom: var(--spacing-md);
    }

    .footer-tagline {
        font-size: 0.875rem;
        margin-bottom: var(--spacing-md);
    }

    .footer-links {
        gap: var(--spacing-lg);
    }

    .footer-column h4 {
        font-size: 0.75rem;
        margin-bottom: var(--spacing-sm);
    }

    .footer-column a {
        font-size: 0.875rem;
        padding: 3px 0;
    }

    .footer-bottom {
        padding: var(--spacing-md) 0;
        gap: var(--spacing-sm);
    }

    .footer-bottom p {
        font-size: 0.75rem;
    }

    .footer-legal a {
        font-size: 0.75rem;
    }

    /* --- Floating elements mobile --- */
    .back-to-top {
        bottom: var(--spacing-xs);
        right: var(--spacing-xs);
        width: 36px;
        height: 36px;
    }

    .back-to-top svg {
        width: 18px;
        height: 18px;
    }

    /* --- Lightbox mobile --- */
    .lightbox-close {
        top: var(--spacing-sm);
        right: var(--spacing-sm);
        width: 40px;
        height: 40px;
    }

    .lightbox-nav {
        width: 40px;
        height: 40px;
    }

    .lightbox-prev {
        left: var(--spacing-xs);
    }

    .lightbox-next {
        right: var(--spacing-xs);
    }

    .lightbox-content {
        max-width: 95vw;
    }

    .lightbox-caption {
        font-size: 0.875rem;
    }

    /* --- Mobile menu refinements --- */
    .mobile-link {
        font-size: 1.5rem;
    }

    .mobile-menu-content {
        gap: var(--spacing-md);
    }
}

/* Extra small phones (< 375px) */
@media (max-width: 374px) {
    .hero-title {
        font-size: 1.5rem;
    }

    .hero-stats {
        gap: var(--spacing-sm);
    }

    .stat-number {
        font-size: 1.5rem;
    }

    .stat-suffix {
        font-size: 1rem;
    }

    .founders-grid {
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-xs);
    }

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

    .location-highlights {
        grid-template-columns: 1fr;
    }
}

/* --- Clip-path Image Reveals --- */
[data-reveal="clip-left"] {
    clip-path: inset(0 100% 0 0);
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="clip-right"] {
    clip-path: inset(0 0 0 100%);
    transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

[data-reveal="clip-left"].revealed,
[data-reveal="clip-right"].revealed {
    clip-path: inset(0 0 0 0);
}

/* Mobile fallback — simple fade instead of clip-path */
@media (max-width: 640px) {
    [data-reveal="clip-left"],
    [data-reveal="clip-right"] {
        clip-path: none !important;
        opacity: 0;
        transform: translateY(30px);
        transition: opacity 0.8s ease, transform 0.8s ease;
    }

    [data-reveal="clip-left"].revealed,
    [data-reveal="clip-right"].revealed {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========================================
   UNIQUE INTERACTIVE FEATURES
   ======================================== */

/* --- 1. Trust Ticker (infinite scroll badges) --- */
.trust-ticker {
    background: var(--color-primary);
    border-top: 1px solid rgba(201, 169, 98, 0.15);
    border-bottom: 1px solid rgba(201, 169, 98, 0.15);
    padding: var(--spacing-sm) 0;
    overflow: hidden;
    white-space: nowrap;
}

.trust-ticker-track {
    display: inline-flex;
    gap: var(--spacing-2xl);
    animation: tickerScroll 25s linear infinite;
}

.trust-ticker-item {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-family: var(--font-body);
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-400);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    flex-shrink: 0;
}

.trust-ticker-item svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

.trust-ticker-dot {
    width: 4px;
    height: 4px;
    background: var(--color-accent);
    border-radius: 50%;
    flex-shrink: 0;
}

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

/* --- 3. Number Ticker Strip --- */
.number-ticker {
    background: var(--color-accent);
    overflow: hidden;
    padding: var(--spacing-sm) 0;
}

.number-ticker-track {
    display: inline-flex;
    gap: var(--spacing-2xl);
    animation: tickerScroll 20s linear infinite;
    white-space: nowrap;
}

.number-ticker-item {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3em;
    font-family: var(--font-display);
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-primary);
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.number-ticker-item span {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    opacity: 0.7;
}

/* --- 4. Stacking Cards on Scroll --- */
.stacking-cards {
    position: relative;
}

.stacking-card {
    position: sticky;
    top: 120px;
    transform-origin: center top;
}

/* --- 5. Full-Width Image Reveal --- */
.image-reveal {
    position: relative;
    height: 55vh;
    min-height: 380px;
    overflow: hidden;
    background: var(--color-primary);
}

.image-reveal-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: blur(20px);
    transform: scale(1.3);
    transition: none;
}

.image-reveal-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(10,10,10,0.3) 0%, rgba(10,10,10,0.85) 100%);
    z-index: 2;
}

.image-reveal-text {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    transform: translateY(-50%);
    text-align: center;
    z-index: 3;
    color: #ffffff;
}

.image-reveal-text h2 {
    font-size: clamp(2rem, 5vw, 3.5rem);
    margin-bottom: var(--spacing-sm);
    color: #ffffff;
    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.6);
}

.image-reveal-text p {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.85);
    max-width: 500px;
    margin: 0 auto;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* --- 6. Text Behind Image Reveal --- */
.text-behind {
    position: relative;
    height: 100vh;
    min-height: 600px;
    overflow: hidden;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.text-behind-headline {
    font-family: var(--font-display);
    font-size: clamp(3rem, 10vw, 8rem);
    font-weight: 700;
    color: rgba(201, 169, 98, 0.25);
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    line-height: 1;
    z-index: 1;
    position: relative;
}

.text-behind-image {
    position: absolute;
    width: 50%;
    max-width: 600px;
    height: 60%;
    z-index: 2;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.5);
}

.text-behind-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: opacity 1.2s ease-in-out;
}

.text-behind-slide.active {
    opacity: 1;
}

.text-behind-caption {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    text-align: center;
    color: #ffffff;
    opacity: 0;
}

.text-behind-caption h3 {
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    margin-bottom: var(--spacing-xs);
    color: #ffffff;
    text-shadow: 0 2px 15px rgba(0, 0, 0, 0.6);
}

.text-behind-caption p {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.8);
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.5);
}

/* --- 7. Before/After Comparison Slider --- */
.compare-section {
    padding: var(--spacing-3xl) 0;
    background: var(--color-gray-100);
}

.compare-slider {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border-radius: var(--radius-xl);
    cursor: ew-resize;
    user-select: none;
    aspect-ratio: 16 / 10;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

.compare-slider img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.compare-after {
    clip-path: inset(0 50% 0 0);
}

.compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background: var(--color-white);
    z-index: 5;
    transform: translateX(-50%);
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
}

.compare-handle::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.compare-handle::after {
    content: '⟨ ⟩';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 0.3em;
    z-index: 1;
}

.compare-label {
    position: absolute;
    bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-md);
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    border-radius: var(--radius-full);
    z-index: 4;
}

.compare-label-before { left: var(--spacing-md); }
.compare-label-after { right: var(--spacing-md); }

/* --- 8. Parallax Layered Contact CTA --- */
.contact-parallax {
    position: relative;
    overflow: hidden;
    min-height: 550px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-parallax-bg {
    position: absolute;
    inset: -20%;
    background-size: cover;
    background-position: center;
    z-index: 0;
    opacity: 0.35;
}

/* Dark overlay to separate text from background */
.contact-parallax::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(10, 10, 10, 0.7) 0%,
        rgba(10, 10, 10, 0.5) 50%,
        rgba(10, 10, 10, 0.8) 100%
    );
    z-index: 1;
}

.contact-parallax-mid {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, rgba(201, 169, 98, 0.08) 0%, transparent 60%);
    z-index: 2;
}

.contact-parallax-content {
    position: relative;
    z-index: 4;
}

/* --- 9. Video Background Section --- */
.video-bg-section {
    position: relative;
    overflow: hidden;
}

.video-bg-section video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%);
    z-index: 0;
    object-fit: cover;
    opacity: 0.4;
}

.video-bg-section .container {
    position: relative;
    z-index: 2;
}

/* --- Mobile guards for unique features --- */
@media (max-width: 768px) {
    .text-behind {
        height: 70vh;
        min-height: 450px;
    }

    .text-behind-image {
        width: 80%;
        height: 50%;
    }

    .text-behind-headline {
        font-size: clamp(2rem, 8vw, 4rem);
    }

    .image-reveal {
        height: 60vh;
        min-height: 400px;
    }

    .compare-slider {
        aspect-ratio: 4 / 3;
    }

    .stacking-card {
        position: relative !important;
        top: auto !important;
        transform: none !important;
    }
}

/* --- Scroll Progress Bar --- */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: var(--gradient-gold);
    z-index: 10000;
    width: 0%;
    box-shadow: 0 0 8px rgba(201, 169, 98, 0.6);
}

/* --- Glassmorphism Cards --- */
.feature {
    background: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(201, 169, 98, 0.15);
}

.feature:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(201, 169, 98, 0.5);
    box-shadow:
        0 20px 40px rgba(0, 0, 0, 0.08),
        0 0 20px rgba(201, 169, 98, 0.1);
}

.testimonial-card:hover {
    border-color: rgba(201, 169, 98, 0.4);
    box-shadow: 0 12px 40px rgba(160, 136, 64, 0.12);
    transform: translateY(-4px);
}

/* --- Button Upgrades --- */

/* Primary: enhanced glow on hover */
.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow:
        0 8px 25px rgba(201, 169, 98, 0.4),
        0 0 40px rgba(201, 169, 98, 0.15);
}

/* Outline: gold fill sweeps in from left */
.btn-outline {
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-outline::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: var(--color-accent);
    transition: left 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: -1;
}

.btn-outline:hover::before {
    left: 0;
}

.btn-outline:hover {
    color: var(--color-primary);
    border-color: var(--color-accent);
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(201, 169, 98, 0.3);
}

/* Arrow slides right on hover */
.btn svg,
.project-cta svg {
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn:hover svg {
    transform: translateX(5px);
}

/* Ripple click effect */
.btn-ripple {
    position: absolute;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.4);
    transform: scale(0);
    animation: rippleOut 0.6s ease-out forwards;
    pointer-events: none;
}

@keyframes rippleOut {
    to {
        transform: scale(4);
        opacity: 0;
    }
}


/* ============================================
   Upcoming Projects — smaller cards with map
   ============================================ */
.upcoming-projects {
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.upcoming-header {
    text-align: center;
    margin-bottom: 2.5rem;
}

.upcoming-title {
    font-family: var(--font-display);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.upcoming-subtitle {
    font-size: 1rem;
    color: var(--color-text-light);
}

.upcoming-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}

.upcoming-card {
    background: #ece4d0;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.upcoming-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
}

.upcoming-map {
    position: relative;
    display: block;
    height: 180px;
    overflow: hidden;
    background: #e8eef3;
}

.upcoming-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
    filter: saturate(1.05);
}

.upcoming-map-hover {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 10, 0.45);
    color: var(--color-white);
    font-family: var(--font-body);
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upcoming-map:hover .upcoming-map-hover {
    opacity: 1;
}

.upcoming-content {
    padding: 1.1rem 1.25rem 1.3rem;
}

.upcoming-name {
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 400;
    color: var(--color-text);
    margin-bottom: 0.4rem;
    letter-spacing: -0.01em;
}

.upcoming-location {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: var(--color-text-light);
    margin: 0;
}

.upcoming-location svg {
    color: var(--color-accent);
    flex-shrink: 0;
}

@media (max-width: 960px) {
    .upcoming-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px) {
    .upcoming-grid { grid-template-columns: 1fr; }
    .upcoming-map { height: 160px; }
}

/* Upcoming card — extended structure: tag, description, specs */
.upcoming-tag {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: rgba(201, 169, 98, 0.1);
    padding: 0.25rem 0.7rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.6rem;
}

.upcoming-description {
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-light);
    margin: 0.4rem 0 1rem;
}

.upcoming-specs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.5rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.upcoming-specs .spec {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.upcoming-specs .spec-value {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 400;
    color: var(--color-accent);
    line-height: 1;
}

.upcoming-specs .spec-label {
    font-size: 0.65rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-text-light);
    margin-top: 0.3rem;
}

/* ============================================
   The Road Ahead — interactive expanding fan
   Hover/focus a corridor: it grows + pops forward with a
   cursor-driven 3D tilt, while the others shrink and recede.
   ============================================ */
.road-fan {
    display: flex;
    gap: 28px;
    height: 460px;
    margin-top: 3rem;
    perspective: 1500px;
}

.road-card {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-radius: 18px;
    overflow: hidden;
    cursor: pointer;
    background: #ece4d0;
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
    filter: saturate(0.45) brightness(0.98);
    transform-style: preserve-3d;
    transition: flex-grow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                box-shadow 0.6s ease,
                filter 0.6s ease,
                transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

.road-card.is-active {
    flex-grow: 4.6;
    filter: none;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.24);
    z-index: 2;
    /* Cursor tilt vars default to 0; JS updates them on mousemove */
    transform: translateZ(40px)
               rotateX(var(--tiltX, 0deg))
               rotateY(var(--tiltY, 0deg));
}

/* Map fills the whole card; body slides up over its lower portion */
.road-card-map {
    position: absolute;
    inset: 0;
    display: block;
    background: #e8eef3;
}

.road-card-map iframe {
    width: 100%;
    height: 100%;
    border: 0;
    display: block;
    pointer-events: none;
}

/* Map link only clickable on the active card */
.road-card .road-card-map { pointer-events: none; }
.road-card.is-active .road-card-map { pointer-events: auto; }

/* Tint overlay echoing the card's accent colour */
.road-card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--card-accent, var(--color-accent));
    mix-blend-mode: multiply;
    opacity: 0.18;
    pointer-events: none;
    transition: opacity 0.6s ease;
    z-index: 1;
}

.road-card.is-active::after { opacity: 0; }

/* Big index number, shown while the card is collapsed */
.road-card-index {
    position: absolute;
    top: 0.85rem;
    left: 1.05rem;
    z-index: 3;
    font-family: var(--font-display);
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text);
    text-shadow: 0 1px 6px rgba(255, 255, 255, 0.6);
    opacity: 0.92;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.road-card.is-active .road-card-index { opacity: 0; }

/* "View on Maps" chip — only on the active card, on map hover */
.road-card-pin {
    position: absolute;
    top: 1rem;
    right: 1rem;
    z-index: 4;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-text);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 0.35rem 0.8rem;
    border-radius: var(--radius-full);
    opacity: 0;
    transform: translateY(-4px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.road-card.is-active:hover .road-card-pin {
    opacity: 1;
    transform: translateY(0);
}

/* Vertical label shown while the card is collapsed */
.road-card-vlabel {
    position: absolute;
    bottom: 1.4rem;
    left: 50%;
    transform: translateX(-50%) rotate(180deg);
    writing-mode: vertical-rl;
    z-index: 3;
    font-family: var(--font-display);
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    color: #161616;
    background: rgba(255, 255, 255, 0.86);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    padding: 0.85rem 0.45rem;
    border-radius: 999px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
    white-space: nowrap;
    opacity: 1;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.road-card.is-active .road-card-vlabel { opacity: 0; }

/* Content panel — hidden below the card, slides up when active */
.road-card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    min-width: 280px;
    background: #fffdf8;
    padding: 1.4rem 1.6rem 1.7rem;
    border-top: 4px solid var(--card-accent, var(--color-accent));
    border-radius: 18px 18px 0 0;
    transform: translateY(102%);
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.road-card.is-active .road-card-body { transform: translateY(0); }

.road-card-tag {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #fff;
    background: var(--card-accent, var(--color-accent));
    padding: 0.28rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: 0.7rem;
}

.road-card-name {
    font-family: var(--font-display);
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
    white-space: nowrap;
}

.road-card-desc {
    font-size: 0.9rem;
    line-height: 1.6;
    color: var(--color-text-light);
    margin: 0;
}

/* Tablet */
@media (max-width: 960px) and (min-width: 769px) {
    .road-fan { height: 420px; }
    .road-card-name { font-size: 1.45rem; }
}

/* Mobile: drop the accordion — show full stacked cards */
@media (max-width: 768px) {
    .road-fan {
        flex-direction: column;
        height: auto;
        gap: 1.25rem;
        perspective: none;
    }
    .road-card {
        flex: none;
        filter: none;
        box-shadow: 0 6px 22px rgba(0, 0, 0, 0.08);
        transform: none !important;
    }
    .road-card::after { opacity: 0; }
    .road-card-index { display: none; }
    .road-card-map {
        position: relative;
        height: 175px;
    }
    .road-card-vlabel { display: none; }
    .road-card-body {
        position: relative;
        transform: none;
        min-width: 0;
        border-radius: 0;
    }
    .road-card-name { white-space: normal; }
}

/* Reduced motion: no tilt/transitions */
@media (prefers-reduced-motion: reduce) {
    .road-card,
    .road-card-body,
    .road-card::after { transition: none; }
    .road-card.is-active { transform: none; }
}

/* Testimonials heading — darken gradient text so it reads on sandy-gold bg */
.testimonials .section-title .text-gradient {
    background: linear-gradient(135deg, #8b6f2e 0%, #b8923f 50%, #8b6f2e 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Featured Projects heading — darken "Projects" so it reads on the beige bg */
.projects .section-title .text-gradient {
    background: linear-gradient(135deg, #6b531f 0%, #a07d2f 50%, #6b531f 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   Featured Projects — Tabbed Switcher Card (pill tabs + auto-slide)
   ============================================ */
.projects-switcher {
    position: relative;
    max-width: 1200px;
    margin: var(--spacing-xl) auto 0;
}

/* Pill tab group (Tilt-style floating selector) */
.ps-tabs {
    display: flex;
    justify-content: center;
    gap: 0.25rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 auto var(--spacing-lg);
    padding: 0.35rem;
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(201, 169, 98, 0.25);
    border-radius: var(--radius-full);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.07);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ps-tab {
    appearance: none;
    border: none;
    background: transparent;
    cursor: pointer;
    font-family: var(--font-display);
    font-size: clamp(0.85rem, 1.4vw, 1.05rem);
    font-weight: 600;
    letter-spacing: 0.03em;
    color: var(--color-text-light);
    padding: 0.6rem 1.5rem;
    border-radius: var(--radius-full);
    white-space: nowrap;
    transition: color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}

.ps-tab:hover { color: var(--color-text); }

.ps-tab.is-active {
    color: var(--color-text);
    background: linear-gradient(135deg, #f0e6cd 0%, #e4d4a5 100%);
    box-shadow: 0 4px 14px rgba(201, 169, 98, 0.35);
}

/* Card shell */
.ps-card {
    position: relative;
    background: #fffdf8;
    border: 1px solid rgba(201, 169, 98, 0.18);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.12);
    overflow: hidden;
}

/* Viewport: active panel sets height, others overlay */
.ps-viewport {
    position: relative;
}

.ps-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateX(40px);
    transition: opacity 0.55s ease, transform 0.55s ease, visibility 0s linear 0.55s;
    pointer-events: none;
}

.ps-panel.is-active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
    transition: opacity 0.55s ease, transform 0.55s ease;
    pointer-events: auto;
}

/* Inner grid: text left, visual right */
.project-slide-inner {
    width: 100%;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-xl);
    align-items: center;
    padding: clamp(1.75rem, 4vw, 3rem);
}

@media (min-width: 900px) {
    .project-slide-inner {
        grid-template-columns: 1fr 1.15fr;
        gap: var(--spacing-2xl);
    }
}

.project-slide-content {
    position: relative;
    z-index: 2;
}

.project-slide-index {
    display: inline-block;
    font-family: var(--font-display);
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-accent-dark);
    letter-spacing: 0.2em;
    margin-bottom: var(--spacing-sm);
    opacity: 0.7;
}

.project-slide-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4.5vw, 3.5rem);
    font-weight: 600;
    color: var(--color-text);
    margin-bottom: var(--spacing-md);
    line-height: 1.1;
    letter-spacing: -0.02em;
}

.project-slide-description {
    font-size: 1.0625rem;
    color: var(--color-text-light);
    line-height: 1.7;
    margin-bottom: var(--spacing-lg);
    max-width: 460px;
}

.ps-panel .project-specs {
    margin-bottom: var(--spacing-lg);
    border: none;
    padding: 0;
    background: transparent;
    display: flex;
    gap: var(--spacing-xl);
}

.ps-panel .project-specs .spec {
    border-left: 2px solid var(--color-accent);
    padding-left: var(--spacing-sm);
    text-align: left;
    flex: 0 0 auto;
}

.project-slide-visual {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    aspect-ratio: 16 / 11;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16);
}

.project-slide-visual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.ps-panel:hover .project-slide-visual img {
    transform: scale(1.03);
}

.project-slide-visual .project-status {
    position: absolute;
    top: var(--spacing-md);
    left: var(--spacing-md);
    z-index: 3;
}

.project-slide-badge {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: 0.05em;
    z-index: 3;
}

/* Controls row: prev / progress / next */
.ps-controls {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 0 clamp(1.75rem, 4vw, 3rem) clamp(1.25rem, 3vw, 1.75rem);
}

.ps-nav {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    display: grid;
    place-items: center;
    border: 1px solid rgba(201, 169, 98, 0.35);
    border-radius: var(--radius-full);
    background: #fff;
    color: var(--color-accent-dark);
    cursor: pointer;
    transition: background 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.ps-nav:hover {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    box-shadow: 0 6px 16px rgba(201, 169, 98, 0.4);
}

.ps-nav:active { transform: scale(0.94); }

/* Side nav arrows — sit beside the tiles, vertically centered on the card */
.ps-nav--side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 48px;
    height: 48px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1.5px solid rgba(0, 0, 0, 0.4);
    color: #1a1a1a;
    box-shadow: none;
}

.ps-nav--side:hover {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    transform: translateY(-50%) scale(1.06);
}

.ps-nav--side:active { transform: translateY(-50%) scale(0.94); }

/* Wrapper so the arrows can sit on the beige, outside the card, centered on it */
.ps-card-wrap {
    position: relative;
}

.ps-nav--prev { left: -66px; }
.ps-nav--next { right: -66px; }

/* Narrower desktops have less beige gutter — tuck the arrows closer to the edge */
@media (max-width: 1335px) {
    .ps-nav--prev { left: -22px; }
    .ps-nav--next { right: -22px; }
}

.ps-controls {
    justify-content: center;
}

.ps-progress {
    position: relative;
    flex: 0 0 auto;
    width: min(320px, 55%);
    height: 4px;
    border-radius: var(--radius-full);
    background: rgba(201, 169, 98, 0.18);
    overflow: hidden;
}

.ps-progress-bar {
    position: absolute;
    inset: 0;
    transform-origin: left center;
    transform: scaleX(0);
    border-radius: var(--radius-full);
    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-dark));
}

/* Mobile: stack text above visual, hide nav arrows (tabs + swipe-feel remain) */
@media (max-width: 899px) {
    .project-slide-visual {
        aspect-ratio: 4 / 3;
    }
    .ps-tab {
        padding: 0.55rem 1.1rem;
    }
    .ps-nav--side {
        display: none;
    }
}

/* Reduced motion: no slide transform, no progress animation */
@media (prefers-reduced-motion: reduce) {
    .ps-panel,
    .ps-panel.is-active {
        transform: none;
        transition: opacity 0.2s ease;
    }
    .ps-progress-bar { display: none; }
}

/* ============================================
   Testimonials Wall — 3 vertical infinite-scroll columns
   Columns alternate direction (up / down / up).
   ============================================ */
.testimonials-wall {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-xl);
}

.testimonial-column {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.testimonials-wall .testimonial-card {
    /* Override the default slider-card styles so cards size naturally in the column */
    flex: 0 0 auto;
    width: 100%;
    margin: 0;
    padding: var(--spacing-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(201, 169, 98, 0.15);
}

.testimonials-wall .testimonial-text {
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--spacing-md);
}

.testimonials-wall .testimonial-rating {
    margin-bottom: var(--spacing-sm);
}

@media (min-width: 768px) {
    .testimonials-wall {
        grid-template-columns: repeat(2, 1fr);
    }
    /* On tablet, hide the 3rd column so we keep symmetry */
    .testimonials-wall .testimonial-column:nth-child(3) {
        display: none;
    }
}

@media (min-width: 1024px) {
    .testimonials-wall {
        grid-template-columns: repeat(3, 1fr);
        height: 600px;
        overflow: hidden;
        /* Soft top/bottom fade so cards don't appear to be cut off mid-text */
        -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
        mask-image: linear-gradient(to bottom, transparent 0%, black 8%, black 92%, transparent 100%);
    }
    .testimonials-wall .testimonial-column:nth-child(3) {
        display: flex;
    }
    .testimonial-column[data-direction="up"] {
        animation: columnScrollUp 18s linear infinite;
    }
    .testimonial-column[data-direction="down"] {
        animation: columnScrollDown 18s linear infinite;
    }
    /* Pause animation when user hovers the wall */
    .testimonials-wall:hover .testimonial-column {
        animation-play-state: paused;
    }
}

@keyframes columnScrollUp {
    from { transform: translateY(0); }
    to   { transform: translateY(-50%); }
}

@keyframes columnScrollDown {
    from { transform: translateY(-50%); }
    to   { transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
    .testimonial-column {
        animation: none !important;
    }
    .testimonials-wall {
        height: auto !important;
        -webkit-mask-image: none !important;
        mask-image: none !important;
    }
}

/* ============================================
   Testimonials Wall — mobile/tablet: 3 thin horizontal
   auto-scrolling strips instead of tall stacked columns
   ============================================ */
@media (max-width: 1023px) {
    .testimonials-wall {
        display: flex;
        flex-direction: column;
        grid-template-columns: none;
        gap: var(--spacing-md);
        height: auto;
        overflow: hidden;
        /* Soft fade on the left/right edges */
        -webkit-mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
        mask-image: linear-gradient(to right, transparent 0%, black 6%, black 94%, transparent 100%);
    }

    /* Each column becomes a horizontal strip */
    .testimonials-wall .testimonial-column {
        flex-direction: row;
        flex-wrap: nowrap;
        align-items: stretch;
        width: max-content;
        gap: var(--spacing-md);
        animation: rowScrollLeft 38s linear infinite;
    }

    /* Keep all 3 strips visible (tablet rule hides the 3rd) */
    .testimonials-wall .testimonial-column:nth-child(3) {
        display: flex;
    }

    /* Middle strip scrolls the opposite way for visual variety */
    .testimonials-wall .testimonial-column[data-direction="down"] {
        animation: rowScrollRight 38s linear infinite;
    }

    /* Fixed-width cards so they form a neat strip */
    .testimonials-wall .testimonial-card {
        flex: 0 0 78vw;
        max-width: 320px;
        width: 78vw;
    }

    /* Pause while the user touches the strip */
    .testimonials-wall:active .testimonial-column {
        animation-play-state: paused;
    }
}

/* Phones: the 78vw/32px-padding tiles above still read as one big card
   with a lot of dead space — shrink to a compact tile. */
@media (max-width: 640px) {
    .testimonials-wall .testimonial-column {
        gap: var(--spacing-sm);
    }

    .testimonials-wall .testimonial-card {
        flex-basis: 62vw;
        width: 62vw;
        max-width: 240px;
        padding: var(--spacing-sm);
    }

    .testimonials-wall .testimonial-rating {
        gap: 2px;
        margin-bottom: 6px;
    }

    .testimonials-wall .testimonial-rating svg {
        width: 13px;
        height: 13px;
    }

    .testimonials-wall .testimonial-text {
        font-size: 0.8125rem;
        line-height: 1.45;
        margin-bottom: var(--spacing-sm);
    }

    .testimonials-wall .testimonial-author {
        gap: 10px;
    }

    .testimonials-wall .author-avatar {
        width: 32px;
        height: 32px;
        font-size: 0.6875rem;
    }

    .testimonials-wall .author-name {
        font-size: 0.8125rem;
    }

    .testimonials-wall .author-location {
        font-size: 0.75rem;
    }
}

@keyframes rowScrollLeft {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

@keyframes rowScrollRight {
    from { transform: translateX(-50%); }
    to   { transform: translateX(0); }
}

/* Reduced motion on small screens: make the strips swipeable instead of auto-scrolling */
@media (max-width: 1023px) and (prefers-reduced-motion: reduce) {
    .testimonials-wall {
        overflow: visible;
        -webkit-mask-image: none;
        mask-image: none;
    }
    .testimonials-wall .testimonial-column {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
    }
    .testimonials-wall .testimonial-card {
        scroll-snap-align: start;
    }
}

/* ============================================
   Coming Soon Hero — "Home Story" (Hoskote)
   Full-screen announcement panel that sits above the main
   hero. The background plate already carries a cream panel on
   its left that feathers into the render, so on desktop the
   copy simply sits on that cream. On narrower screens the
   plate's cream side gets cropped away, so .cs-hero-scrim
   rebuilds it in the same tone to keep the copy legible.
   ============================================ */
.cs-hero {
    /* Sampled from the left panel of images/eoi-hero.png so the rebuilt
       scrim is indistinguishable from the plate's own cream. */
    --cs-cream: #f0ded1;
    --cs-ink: #453322;
    --cs-ink-soft: #6d573e;
    /* Sampled from the lockup so the copy sits in the same family. */
    --cs-green-deep: #1e4a29;
    --cs-gold: #9c8752;
    position: relative;
    display: flex;
    /* Small screens read top-down: copy sits high on the cream and
       the render fills the space beneath it. Desktop re-centers. */
    align-items: flex-start;
    min-height: 100vh;
    overflow: hidden;
    background: var(--cs-cream);
    /* Paints above Section 2, which the transition pulls up underneath it. */
    z-index: 1;
}

body.home .hero {
    z-index: 0;
}

/* ScrollTrigger sizes the pin (and its spacer) from a measurement taken
   before the vertical scrollbar is accounted for, so both end up ~15px
   wider than the content box and the page creeps sideways. max-width
   clamps the used width regardless of the inline width GSAP writes. */
body.home .cs-hero,
body.home .pin-spacer {
    max-width: 100%;
}

/* svh keeps it honest against mobile browser chrome */
@supports (height: 100svh) {
    .cs-hero { min-height: 100svh; }
}

.cs-hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.cs-hero-img {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Bias toward the render so the towers stay in frame once
       the narrow viewport crops the plate's cream side off. */
    object-position: 72% center;
    display: block;
    will-change: transform, opacity;
}

/* Incoming clip for the scroll transition. inset/size deliberately mirror
   .hero-bg-video so that at scale 1 this is pixel-identical to Section 2's
   video — the pin can release without the framing shifting. */
.cs-cut-video {
    position: absolute;
    inset: -10%;
    width: 120%;
    height: 120%;
    object-fit: cover;
    object-position: center;
    z-index: 1;
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity, filter;
}

.cs-hero-scrim {
    position: absolute;
    inset: 0;
    z-index: 2;
    will-change: opacity;
    background: linear-gradient(
        180deg,
        var(--cs-cream) 0%,
        var(--cs-cream) 56%,
        rgba(240, 222, 209, 0.9) 66%,
        rgba(240, 222, 209, 0.5) 76%,
        rgba(240, 222, 209, 0) 90%
    );
}

.cs-hero-inner {
    position: relative;
    z-index: 1;
    width: 100%;
}

.cs-hero-content {
    max-width: 560px;
    /* Clears the fixed header while the copy is top-aligned. */
    padding-top: 116px;
    padding-bottom: var(--spacing-2xl);
}

/* Lockup asset — carries the chevron, "code name:", "HOME STORY"
   and the location line, so none of that is repeated as markup. */
.cs-logo {
    display: block;
    width: clamp(230px, 26vw, 330px);
    height: auto;
    margin-bottom: var(--spacing-xl);
}

.cs-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7.5vw, 4.75rem);
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.01em;
    text-transform: uppercase;
    color: var(--cs-green-deep);
    margin-bottom: var(--spacing-xs);
}

/* Regulatory acknowledgement — deliberately quiet, but kept legible.
   Sits directly under the heading, above the rule. */
.cs-rera {
    font-family: var(--font-body);
    font-size: clamp(0.6875rem, 1.15vw, 0.8125rem);
    font-weight: 500;
    letter-spacing: 0.04em;
    line-height: 1.4;
    color: var(--cs-ink-soft);
    margin-bottom: var(--spacing-md);
    /* The string has no spaces — allow it to break at the slashes on
       narrow screens instead of overflowing the panel. */
    overflow-wrap: anywhere;
}

/* Rule broken by a small diamond, as in the key art. */
.cs-ornament {
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: 420px;
    margin-bottom: var(--spacing-md);
}

.cs-ornament-line {
    flex: 1;
    height: 1px;
    background: rgba(156, 135, 82, 0.55);
}

.cs-ornament-diamond {
    width: 7px;
    height: 7px;
    flex-shrink: 0;
    background: var(--cs-gold);
    transform: rotate(45deg);
}

.cs-tagline {
    font-family: var(--font-body);
    font-size: clamp(0.8125rem, 1.7vw, 1.0625rem);
    font-weight: 500;
    letter-spacing: 0.3em;
    text-transform: uppercase;
    color: var(--cs-gold);
    margin-bottom: var(--spacing-xl);
}

/* Contact bar — WhatsApp and phone share one framed strip. */
.cs-contact-bar {
    display: inline-flex;
    align-items: stretch;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    border: 1px solid rgba(156, 135, 82, 0.4);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.34);
}

.cs-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding: 4px 6px;
    border-radius: var(--radius-sm);
    transition: var(--transition-base);
}

.cs-contact-item:hover {
    transform: translateY(-2px);
}

.cs-contact-divider {
    width: 1px;
    align-self: center;
    height: 38px;
    background: rgba(156, 135, 82, 0.45);
}

.cs-contact-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: var(--radius-full);
    transition: var(--transition-base);
}

.cs-contact-icon-wa {
    background: #25D366;
    color: #ffffff;
}

.cs-contact-icon-call {
    background: transparent;
    border: 1px solid rgba(156, 135, 82, 0.65);
    color: var(--cs-gold);
}

.cs-contact-item:hover .cs-contact-icon-call {
    background: var(--cs-gold);
    color: #ffffff;
}

.cs-contact-label {
    display: block;
    font-family: var(--font-body);
    font-size: 0.8125rem;
    font-weight: 400;
    line-height: 1.3;
    color: var(--cs-ink-soft);
}

.cs-contact-value {
    display: block;
    font-family: var(--font-body);
    font-size: 0.9375rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cs-green-deep);
}

/* --- Location tag + project highlights ---
   .cs-corner stacks the two and owns the positioning, so the tag always sits
   directly above the strip's right edge no matter how the strip reflows.
   Mobile-first: stays in the section's flow beneath the copy, because the
   narrow crop leaves no render to sit on. The 900px block lifts the pair out
   of flow onto the bottom-right of the plate. */
.cs-corner {
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    /* Right-aligns the tag over the strip's end at every width. */
    align-items: flex-end;
    gap: 10px;
}

/* Location tag — wordmark over the supplied STRR badge artwork. Both sit on
   the render rather than a panel, so the type carries its own shadow. */
.cs-loc {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
}

/* Carries its own dark chip rather than relying on a text shadow: this lands
   on the lit tower and sky on desktop but on the pale scrim on mobile, and no
   single text colour reads on both. The fill matches the strip below so the
   tagline, badge and strip read as one stack. */
.cs-loc-place {
    margin: 0;
    padding: 4px 10px;
    font-family: var(--font-body);
    /* Inter uppercase (cap ~0.73em) vs Cormorant headings (cap ~0.64em), so
       .cs-fact-head may be up to ~1.13x this value and still read smaller. */
    font-size: 0.9375rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    line-height: 1.2;
    text-transform: uppercase;
    color: #e6c179;
    border: 1px solid rgba(224, 185, 110, 0.38);
    border-radius: var(--radius-sm);
    background: rgba(12, 26, 17, 0.78);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.cs-loc-badge {
    display: block;
    width: clamp(120px, 11vw, 158px);
    height: auto;
    filter: drop-shadow(0 8px 20px rgba(20, 12, 6, 0.38));
}

.cs-facts {
    --cs-fact-gold: #e0b96e;
    --cs-fact-cream: #f2e6d6;
    position: relative;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 12px;
    list-style: none;
    margin: 0;
    padding: 16px 18px;
    border: 1px solid rgba(224, 185, 110, 0.5);
    border-radius: var(--radius-md);
    background: rgba(14, 30, 19, 0.82);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    text-align: center;
}

.cs-fact {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(224, 185, 110, 0.28);
}

.cs-fact:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

.cs-fact-head {
    font-family: var(--font-display);
    font-size: clamp(0.9375rem, 3.2vw, 1.0625rem);
    font-weight: 600;
    letter-spacing: 0.01em;
    line-height: 1.25;
    color: var(--cs-fact-gold);
}

.cs-fact-line {
    font-family: var(--font-body);
    font-size: clamp(0.75rem, 2.7vw, 0.875rem);
    font-weight: 400;
    line-height: 1.45;
    color: var(--cs-fact-cream);
}

/* Below 900px the section stacks: copy at the top of the cream, the strip
   pushed down onto the render at the bottom. The panel is pinned by
   ScrollTrigger, so everything here has to fit inside one viewport height —
   the compaction below is what buys that room. */
@media (max-width: 899px) {
    .cs-hero {
        flex-direction: column;
        /* Copy top, strip bottom: fills the panel instead of leaving a gap
           under the contact bar, and puts the strip over the render as on
           desktop. */
        justify-content: space-between;
    }

    /* .cs-hero keeps align-items: flex-start, which in column direction sizes
       children to their content width — that is what pushed the strip past the
       right edge. Stretching it to the section width is the fix. */
    .cs-corner {
        align-self: stretch;
        box-sizing: border-box;
        width: auto;
        max-width: 100%;
        /* Same gutter as .container, so it lines up with the copy above. */
        margin-inline: var(--spacing-lg);
        margin-bottom: var(--spacing-sm);
        gap: 7px;
    }

    /* The badge is the tallest single item in the stack, so it is the first
       thing to give when the pinned viewport gets tight. */
    .cs-loc-badge {
        width: 96px;
    }

    .cs-facts {
        align-self: stretch;
        box-sizing: border-box;
        width: auto;
        max-width: 100%;
        padding: 14px 16px;
        gap: 10px;
        border-radius: var(--radius-sm);
        /* Sits on the render here rather than the cream, so it carries a
           little more weight than the desktop panel. */
        background: rgba(12, 26, 17, 0.86);
        box-shadow: 0 12px 32px rgba(20, 12, 6, 0.28);
    }

    /* The base scrim feathers out over the full height, which left the render
       behind the strip a flat haze. Hold the cream solid through the contact
       bar, then clear it quickly so the tower and curtain read properly
       underneath the panel. */
    .cs-hero-scrim {
        background: linear-gradient(
            180deg,
            var(--cs-cream) 0%,
            var(--cs-cream) 56%,
            rgba(240, 222, 209, 0.8) 62%,
            rgba(240, 222, 209, 0.35) 69%,
            rgba(240, 222, 209, 0) 78%
        );
    }

    .cs-fact {
        padding-bottom: 10px;
    }

    .cs-fact-head {
        font-size: 1rem;
        line-height: 1.2;
    }

    .cs-fact-line {
        font-size: 0.8125rem;
        line-height: 1.35;
    }

    /* Reclaim vertical space so the copy, contact bar and strip all clear
       100svh without the pin clipping the bottom. Centred here to match the
       main hero below — the left-aligned key-art layout only reads as
       deliberate once there is a cream panel wide enough to sit on, and the
       narrow crop takes that away. */
    .cs-hero-content {
        padding-top: 88px;
        padding-bottom: var(--spacing-sm);
        margin-inline: auto;
        /* Also centres .cs-contact-bar, which is inline-level. */
        text-align: center;
    }

    .cs-logo {
        width: clamp(186px, 44vw, 260px);
        margin-bottom: var(--spacing-sm);
        margin-inline: auto;
    }

    /* Block-level flex rows need centring explicitly. */
    .cs-ornament {
        margin-inline: auto;
    }

    /* The bar itself centres, but its labels stay left so the two routes
       keep a common edge to read down. */
    .cs-contact-bar {
        text-align: left;
    }

    .cs-title {
        font-size: clamp(2.125rem, 8.5vw, 3rem);
    }

    .cs-rera {
        margin-bottom: var(--spacing-xs);
    }

    .cs-ornament {
        max-width: 320px;
        margin-bottom: var(--spacing-xs);
    }

    .cs-tagline {
        margin-bottom: var(--spacing-md);
    }
}

/* Matches .container's tighter gutter at this width. */
@media (max-width: 640px) {
    .cs-corner {
        margin-inline: var(--spacing-sm);
    }
}

/* Tablets: the panel is still full width and in flow, but there is now room
   for the three columns side by side. Stacked, they left a lot of dead space
   either side of each row. */
@media (min-width: 700px) and (max-width: 899px) {
    .cs-facts {
        flex-direction: row;
        align-items: stretch;
        justify-content: center;
        gap: 0;
        padding: 14px 18px;
        text-align: center;
    }

    .cs-fact {
        flex: 0 1 auto;
        min-width: 0;
        gap: 2px;
        padding: 0 clamp(14px, 2.4vw, 26px);
        border-bottom: 0;
        border-right: 1px solid rgba(224, 185, 110, 0.35);
    }

    .cs-fact:last-child {
        border-right: 0;
    }

    .cs-fact-head {
        font-size: 0.9375rem;
    }

    .cs-fact-line {
        font-size: 0.75rem;
        line-height: 1.4;
    }
}

/* Short phones (and landscape) — the pin gives no scroll room, so trade
   type scale for fit rather than let the strip get cut off. Raised to 800px
   once the badge joined the stack: at 740 the common 360x740 handsets were
   losing the last row of the strip. */
@media (max-width: 899px) and (max-height: 800px) {
    .cs-hero-content {
        padding-top: 70px;
    }

    /* The contact bar is the tallest block in the copy stack (~150px at
       360x740), so trimming its icons and padding buys the most room for the
       least visible change. */
    .cs-contact-bar {
        padding: 10px;
    }

    .cs-contact-icon {
        width: 32px;
        height: 32px;
    }

    .cs-contact-item {
        padding: 2px 4px;
    }

    .cs-logo {
        width: clamp(146px, 35vw, 195px);
    }

    .cs-title {
        font-size: clamp(1.75rem, 7vw, 2.25rem);
    }

    .cs-tagline {
        margin-bottom: var(--spacing-xs);
    }

    .cs-corner {
        gap: 4px;
        margin-bottom: 10px;
    }

    .cs-facts {
        gap: 7px;
        padding: 11px 14px;
    }

    .cs-loc {
        gap: 3px;
    }

    .cs-loc-place {
        font-size: 0.8125rem;
        letter-spacing: 0.13em;
        padding: 3px 8px;
    }

    .cs-loc-badge {
        width: 86px;
    }

    .cs-fact {
        padding-bottom: 7px;
    }

    .cs-fact-head {
        /* Badge is 13px here, so 14.4px is the ceiling that still reads smaller */
        font-size: 0.9rem;
    }

    .cs-fact-line {
        font-size: 0.75rem;
        line-height: 1.3;
    }
}

/* Very short viewports (360x640-class handsets, and phones in landscape).
   The panel is pinned, so this is all the room there will ever be. The tag
   turns into a single row beside the badge and every block gives a few more
   pixels; below this the copy would have to start dropping out. */
@media (max-width: 899px) and (max-height: 700px) {
    .cs-hero-content {
        padding-top: 62px;
    }

    .cs-logo {
        width: clamp(112px, 27vw, 140px);
    }

    .cs-title {
        font-size: clamp(1.5rem, 6vw, 1.875rem);
    }

    /* Kept: this is the RERA acknowledgement, not decoration. */
    .cs-rera {
        font-size: 0.625rem;
    }

    /* Purely decorative, and the last ~15px needed to clear the fold. */
    .cs-ornament {
        display: none;
    }

    .cs-contact-bar {
        padding: 8px;
    }

    .cs-contact-icon {
        width: 28px;
        height: 28px;
    }

    /* Side by side rather than stacked — saves the tagline's full height. */
    .cs-loc {
        flex-direction: row;
        align-items: center;
        gap: 8px;
    }

    .cs-loc-badge {
        width: 74px;
    }

    .cs-loc-place {
        font-size: 0.75rem;
        letter-spacing: 0.1em;
        padding: 3px 7px;
    }

    .cs-facts {
        gap: 5px;
        padding: 9px 12px;
    }

    .cs-fact {
        padding-bottom: 5px;
    }

    .cs-fact-head {
        /* Shortest viewports: badge is 12px, so 13.4px is the ceiling */
        font-size: 0.84rem;
    }

    .cs-fact-line {
        font-size: 0.6875rem;
        line-height: 1.25;
    }
}

/* Desktop: the plate supplies its own cream panel, so the scrim
   only needs to guarantee contrast where the copy actually sits. */
@media (min-width: 900px) {
    .cs-hero {
        align-items: center;
    }

    .cs-hero-content {
        padding-top: var(--spacing-2xl);
    }

    .cs-hero-img {
        object-position: center;
    }

    .cs-hero-scrim {
        /* The plate's own cream runs solid to ~36% and feathers out by ~48%.
           Matching those stops keeps the scrim invisible on wide viewports
           and stops it washing over the curtain. */
        background: linear-gradient(
            90deg,
            var(--cs-cream) 0%,
            rgba(240, 222, 209, 0.95) 30%,
            rgba(240, 222, 209, 0.65) 42%,
            rgba(240, 222, 209, 0) 55%
        );
    }

    /* Out of flow, pinned to the bottom-right of the render as in the key art.
       Anchors to .cs-hero, which is the nearest positioned ancestor and
       carries no transform of its own. */
    .cs-corner {
        position: absolute;
        right: clamp(20px, 3vw, 52px);
        bottom: clamp(24px, 4.5vh, 48px);
        left: auto;
        /* Sized so each column's longest line ("bang on Chintamani-Hoskote
           Highway") holds on one line without the panel dominating the render. */
        max-width: min(52vw, 640px);
    }

    .cs-facts {
        flex-direction: row;
        align-items: stretch;
        gap: 0;
        width: auto;
        max-width: 100%;
        margin: 0;
        padding: 14px 18px;
        border-radius: var(--radius-sm);
        text-align: center;
    }

    /* Content-sized rather than equal thirds: the first column's longest line
       needs more room than the other two, and forcing equal widths was what
       wrapped it onto a second row and made the panel taller. */
    .cs-fact {
        flex: 0 1 auto;
        min-width: 0;
        gap: 2px;
        padding: 0 clamp(12px, 1.3vw, 18px);
        border-bottom: 0;
        border-right: 1px solid rgba(224, 185, 110, 0.35);
    }

    .cs-fact:last-child {
        border-right: 0;
    }

    .cs-fact-head {
        /* Badge is 15px here; 17px Cormorant caps still sit under 15px Inter caps */
        font-size: clamp(0.9375rem, 1.05vw, 1.0625rem);
        margin-bottom: 1px;
    }

    .cs-fact-line {
        font-size: clamp(0.6875rem, 0.72vw, 0.75rem);
        line-height: 1.4;
    }
}

@media (max-width: 480px) {
    .cs-hero-content {
        max-width: none;
    }

    .cs-tagline {
        letter-spacing: 0.18em;
    }

    /* Stack the two contact routes; side by side they overflow 390px.
       inline-flex (not flex) so the bar shrinks to its content and the
       centred text-align above can centre it, instead of spanning the
       full width and stranding the two routes on the left. */
    .cs-contact-bar {
        display: inline-flex;
        flex-direction: column;
        align-items: stretch;
        gap: var(--spacing-xs);
        padding: var(--spacing-sm);
        text-align: left;
    }

    .cs-contact-divider {
        width: 100%;
        height: 1px;
        align-self: stretch;
    }

    .cs-contact-icon {
        width: 38px;
        height: 38px;
    }
}

/* --- Header over the coming-soon panel ---
   Every band across the top of the plate is light, so the
   transparent header's white logo/links would disappear.
   Swap to the dark marks until the header picks up its own
   scrolled glass background. */
body.home .header:not(.scrolled) .logo-white {
    display: none;
}

body.home .header:not(.scrolled) .logo-black {
    display: block;
    /* The two logo files are composed differently: the shield fills 59.5% of
       logo-black's artwork but 70.5% of logo-white's. At the shared 52px box
       height that made the symbol jump ~18% larger the moment the header
       swapped on scroll. Scaling compensates without touching the layout box,
       so the header height stays put. */
    transform: scale(1.185);
    transform-origin: left center;
}

body.home .header:not(.scrolled) .nav-link,
body.home .header:not(.scrolled) .nav-phone {
    color: #3d2e1f;
}

body.home .header:not(.scrolled) .nav-link:hover,
body.home .header:not(.scrolled) .nav-phone:hover {
    color: var(--color-accent-dark);
}

body.home .header:not(.scrolled) .phone-icon {
    background: rgba(61, 46, 31, 0.1);
}

body.home .header:not(.scrolled) .menu-toggle span {
    background: #3d2e1f;
}

/* ============================================================
   LEADERSHIP — About page (compact)
   Flat #0c0a10, matching About and the wave divider above it and
   the marquee strip below, so the whole run reads as one surface.
   No radial wash, so no halo shows around the LEADERSHIP tag.
   ============================================================ */
.md-section {
    position: relative;
    padding: var(--spacing-2xl) 0;
    background: #0c0a10;
    overflow: hidden;
}

.md-section > .container {
    position: relative;
    z-index: 1;
}

.md-header {
    text-align: center;
    margin-bottom: var(--spacing-lg);
}

.md-header .section-tag {
    margin-bottom: var(--spacing-sm);
}

/* .section-title has no colour of its own and inherits the light-page body
   colour, so it must be set explicitly on this dark section. */
.md-header .section-title {
    color: var(--color-white);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    margin-bottom: var(--spacing-sm);
}

.md-header .section-subtitle {
    font-size: 1rem;
    max-width: 620px;
    margin: 0 auto;
}

.md-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-md);
}

.md-card {
    padding: var(--spacing-lg) var(--spacing-md);
    text-align: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(201, 169, 98, 0.18);
    border-radius: var(--radius-lg);
    transition: transform var(--transition-base),
                border-color var(--transition-base),
                box-shadow var(--transition-base);
}

.md-card:hover {
    transform: translateY(-4px);
    border-color: rgba(201, 169, 98, 0.55);
    box-shadow: var(--shadow-lg);
}

.md-name {
    font-family: var(--font-display);
    font-size: 1.1875rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-white);
    margin-bottom: 4px;
}

.md-role {
    font-size: 0.625rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    color: var(--color-accent);
}

/* Years-of-experience badge, sits under the role */
.md-exp {
    display: inline-block;
    margin-top: 6px;
    padding: 3px 10px;
    font-size: 0.625rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--color-accent-light);
    background: rgba(201, 169, 98, 0.10);
    border: 1px solid rgba(201, 169, 98, 0.25);
    border-radius: var(--radius-full);
}

.md-bio {
    font-size: 0.8125rem;
    line-height: 1.6;
    color: rgba(250, 247, 242, 0.58);
    text-align: left;
}

/* Gold rule between the badge and the first bio paragraph */
.md-bio:first-of-type::before {
    content: '';
    display: block;
    width: 28px;
    height: 1px;
    margin: var(--spacing-sm) auto;
    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);
}

.md-bio + .md-bio {
    margin-top: var(--spacing-xs);
}

/* Tablet — 2 across, third card centred on its own row */
@media (max-width: 899px) {
    .md-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .md-grid .md-card:last-child {
        grid-column: 1 / -1;
        width: 100%;
        max-width: 360px;
        margin: 0 auto;
    }
}

/* Phone — single column */
@media (max-width: 599px) {
    .md-grid {
        grid-template-columns: 1fr;
    }

    .md-grid .md-card:last-child {
        max-width: none;
    }
}

/* Collapsible bio ------------------------------------------- */
.md-bio-wrap {
    position: relative;
}

.md-card.is-collapsible .md-bio-wrap {
    max-height: 6.9em;              /* ~4 lines at 16px/1.7 */
    overflow: hidden;
    transition: max-height 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.md-card.is-collapsible .md-bio-wrap::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1.5em;
    background: linear-gradient(to bottom, rgba(16, 18, 25, 0), #101219 90%);
    pointer-events: none;
    opacity: 1;
    transition: opacity var(--transition-base);
}

.md-card.is-collapsible.is-open .md-bio-wrap {
    max-height: 100em;
}

.md-card.is-collapsible.is-open .md-bio-wrap::after {
    opacity: 0;
}

/* Read more toggle ------------------------------------------ */
.md-more {
    display: none;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    padding: 4px 2px;
    font-family: var(--font-body);
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-accent);
    background: none;
    border: 0;
    cursor: pointer;
    transition: color var(--transition-base);
}

.md-more:hover {
    color: var(--color-accent-light);
}

.md-more:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 3px;
    border-radius: var(--radius-sm);
}

.md-more-icon {
    width: 13px;
    height: 13px;
    transition: transform var(--transition-base);
}

.md-card.is-collapsible .md-more {
    display: inline-flex;
}

.md-card.is-open .md-more-icon {
    transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
    .md-bio-wrap,
    .md-more-icon {
        transition: none;
    }
}

/* Cards size to their own content, so expanding one bio does not
   stretch its neighbours into tall empty boxes. */
body.page-about .md-grid {
    align-items: start;
}
/* ============================================================
   ABOUT PAGE — MOBILE COMPACTION (<= 640px)
   The page ran 5143px (6.15 phone frames). Every section was
   already inside the 1-2 frame target except Philosophy, so the
   length came from eight stacked sections, not one tall one.

   NOTE: explicit rem values, not spacing vars. The scale is NOT
   monotonic at mobile -- the <=640px block shrinks --spacing-xl
   to 1.75rem while --spacing-lg stays 2rem, so "xl" is SMALLER
   than "lg" on phones. Swapping a var for a nominally smaller
   one silently grew several blocks.

   Scoped to body.page-about: .philosophy, .marquee-strip,
   .impact-strip and .number-ticker are shared with index.html.
   ============================================================ */
@media (max-width: 640px) {

    /* Header clearance: the mobile header is far shorter than desktop's */
    body.page-about .about {
        padding-top: 88px;
        padding-bottom: 1.5rem;
    }

    body.page-about .about-grid {
        gap: 1.5rem;
    }

    /* The logo is capped at 208px, so a 360px card was mostly empty space */
    body.page-about .visual-card-1 {
        height: 240px;
    }

    body.page-about .about-wave {
        height: 100px;
    }

    /* --- Leadership --- */
    body.page-about .md-section {
        padding: 1.5rem 0;
    }

    body.page-about .md-grid {
        gap: 0.875rem;
    }

    body.page-about .md-card {
        padding: 1.25rem 1.25rem;
    }

    /* Shorter teaser before "Read more"; full text still one tap away */
    body.page-about .md-card.is-collapsible .md-bio-wrap {
        max-height: 4.6em;
    }

    /* --- Marquee --- */
    body.page-about .marquee-strip {
        height: 120px;
    }

    /* --- Philosophy: was the only section over 2 frames --- */
    body.page-about .philosophy {
        padding: 1.75rem 0;
    }

    body.page-about .philosophy-content {
        margin-bottom: 1.5rem;
    }

    body.page-about .philosophy-title {
        margin-bottom: 1rem;
    }

    body.page-about .philosophy-text {
        font-size: 1rem;
    }

    body.page-about .features-grid {
        gap: 1.25rem;
    }

    body.page-about .feature {
        padding: 1.25rem;
    }

    /* Cover height nearly halved. The negative margin must track the card's
       horizontal padding above, or the image stops bleeding to the edges. */
    body.page-about .feature-cover {
        height: 96px;
        width: calc(100% + 2.5rem);
        margin: 0 -1.25rem 1.25rem;
    }

    /* --- Duplicated figures: the ticker repeats the Impact strip verbatim --- */
    body.page-about .number-ticker {
        display: none;
    }

    body.page-about .impact-strip {
        padding: 1.75rem 0;
    }

    /* --- Footer --- */
    body.page-about .footer {
        padding-top: 1.75rem;
    }

    body.page-about .footer-top {
        gap: 1.5rem;
        padding-bottom: 1.5rem;
    }

    body.page-about .footer-links {
        gap: 1.25rem;
    }

    body.page-about .footer-column h4 {
        margin-bottom: 0.75rem;
    }

    body.page-about .footer-bottom {
        gap: 0.75rem;
        padding: 1rem 0;
    }
}