/* ========================================
   DESIGN TOKENS
   ======================================== */
:root {
    /* Brand Palette */
    --gold: #C9A96E;
    --gold-light: #D4BC8E;
    --gold-dark: #A88B4A;

    /* Dark Theme (Default) */
    --bg-primary: #0a0a0a;
    --bg-secondary: #141414;
    --bg-tertiary: #1e1e1e;
    --bg-elevated: #242424;
    --bg-card: var(--bg-secondary);
    --text-primary: #F0EDE8;
    --text-secondary: #8A8580;
    --text-tertiary: #5A5550;
    --border-accent: rgba(201, 169, 110, 0.15);
    --border-subtle: rgba(255, 255, 255, 0.06);
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.4);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.6);
    --nav-bg: rgba(10, 10, 10, 0.85);
    --mobile-nav-bg: rgba(10, 10, 10, 0.7);
    /* 70% opacity dark overlay for mobile menu */
    --overlay-heavy: rgba(0, 0, 0, 0.7);
    --overlay-light: rgba(0, 0, 0, 0.4);

    /* Typography */
    --font-heading: 'Playfair Display', Georgia, serif;
    --font-body: 'Inter', -apple-system, sans-serif;
    --font-testimonial: 'Lora', Georgia, serif;

    /* Spacing */
    --section-pad: 120px;
    --container-width: 1200px;

    /* Motion */
    --ease: cubic-bezier(0.25, 0.8, 0.25, 1);
    --transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-theme="light"] {
    --bg-primary: #FAF9F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #F3F1EE;
    --bg-elevated: #FFFFFF;
    --bg-card: #FFFFFF;
    --text-primary: #1A1A1A;
    --text-secondary: #666660;
    --text-tertiary: #999990;
    --border-accent: rgba(201, 169, 110, 0.3);
    --border-subtle: rgba(0, 0, 0, 0.06);
    --shadow-card: 0 4px 30px rgba(0, 0, 0, 0.06);
    --shadow-card-hover: 0 20px 50px rgba(0, 0, 0, 0.12);
    --nav-bg: rgba(250, 249, 247, 0.92);
    --mobile-nav-bg: rgba(10, 10, 10, 0.7);
    /* 70% opacity background for mobile menu */
    --overlay-heavy: rgba(0, 0, 0, 0.6);
    --overlay-light: rgba(0, 0, 0, 0.3);
}


/* ========================================
   RESET & BASE
   ======================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-body);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    line-height: 1.7;
    overflow-x: hidden;
    transition: background-color 0.5s ease, color 0.5s ease;
}

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

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

button {
    font-family: var(--font-body);
    cursor: pointer;
    border: none;
    background: none;
}

ul {
    list-style: none;
}

/* Accessibility: Skip Link */
.skip-link {
    position: absolute;
    top: -100px;
    left: 0;
    background: var(--gold);
    color: #000;
    padding: 10px 20px;
    z-index: 10000;
    font-weight: 600;
    transition: top 0.3s;
}

.skip-link:focus {
    top: 0;
}


/* ========================================
   LAYOUT
   ======================================== */
.container {
    width: 90%;
    max-width: var(--container-width);
    margin: 0 auto;
}

.section {
    padding: var(--section-pad) 0;
    position: relative;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 4px;
    color: var(--gold);
    margin-bottom: 20px;
    font-weight: 500;
}

.section-title {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 25px;
    color: var(--text-primary);
}

.section-subtitle {
    font-size: 1.05rem;
    color: var(--text-secondary);
    max-width: 600px;
    line-height: 1.8;
}

.section-header {
    text-align: center;
    margin-bottom: 60px;
}

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

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


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

p {
    color: var(--text-secondary);
    line-height: 1.8;
}


/* ========================================
   BUTTONS
   ======================================== */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 16px 36px;
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    border-radius: 0;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
    z-index: 1;
}

.btn-primary {
    background: var(--gold);
    color: #0a0a0a;
    border: 1px solid var(--gold);
}

.btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(201, 169, 110, 0.3);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--text-secondary);
}

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


/* ========================================
   NAVBAR
   ======================================== */
.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    padding: 24px 0;
    z-index: 1000;
    transition: background-color 0.3s ease, padding 0.3s ease, border-color 0.3s ease;
    transform: translateZ(0);
    will-change: transform, background-color;
}

.navbar.scrolled {
    background: var(--nav-bg);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    padding: 16px 0;
    border-bottom: 1px solid var(--border-subtle);
}

/* Disable backdrop-filter when mobile menu is open so position:fixed children aren't trapped */
.navbar.mobile-menu-active {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important;
    border-bottom: none !important;
}

body.mobile-menu-open {
    overflow: hidden !important;
}

.nav-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
}

.logo {
    position: relative;
    display: inline-flex;
    align-items: center;
    height: 40px;
    text-decoration: none;
}

.logo img {
    height: 40px;
    width: auto;
    display: block;
    /* Default: pure white SVG logo on dark hero / ambient background */
    filter: brightness(0) invert(1);
    transition: filter 0.35s ease, opacity 0.35s ease, transform 0.35s ease;
}

.logo:hover img {
    opacity: 0.9;
    transform: scale(1.02);
}

/* Scrolled light mode: dynamically change SVG logo to dark charcoal/black on the lighter banner */
[data-theme="light"] .navbar.scrolled:not(.mobile-menu-active) .logo img {
    filter: brightness(0);
}

/* Mobile drawer active on scrolled light mode: keep crisp white if header contrast demands */
[data-theme="light"] .navbar.scrolled.mobile-menu-active .logo img {
    filter: brightness(0) invert(1);
}

/* Optional CSS Mask utility for direct brand color fills (e.g. gold, bronze) */
.logo-mask {
    display: inline-block;
    height: 40px;
    width: 208px;
    background-color: var(--logo-color, #ffffff);
    -webkit-mask: url('assets/SD-Logos/SD-dark-nobg.svg') no-repeat left center / contain;
    mask: url('assets/SD-Logos/SD-dark-nobg.svg') no-repeat left center / contain;
    transition: background-color 0.35s ease, transform 0.35s ease;
}

[data-theme="light"] .navbar.scrolled:not(.mobile-menu-active) .logo-mask {
    background-color: var(--logo-color-dark, #111111);
}

.nav-links {
    display: flex;
    align-items: center;
    gap: 32px;
}

.nav-links a {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.8);
    position: relative;
    padding-bottom: 4px;
}

.navbar.scrolled .nav-links a {
    color: var(--text-primary);
}

.nav-links a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 1px;
    background-color: var(--gold);
    transition: width 0.4s var(--ease);
}

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

.nav-links a:hover {
    color: #fff;
}

.navbar.scrolled .nav-links a:hover {
    color: var(--gold);
}

/* Conventional Theme Toggle Switch (Yin-Yang Contrast) */
.theme-toggle {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px;
    transition: transform 0.3s ease;
}

.theme-toggle:hover {
    transform: scale(1.06);
}

.toggle-track {
    position: relative;
    width: 58px;
    height: 30px;
    border-radius: 30px;
    background: #0F0F12;
    /* Yin: Midnight Obsidian for Dark Mode */
    border: 1px solid rgba(201, 169, 110, 0.3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 7px;
    transition: background-color 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.6);
}

/* Yang: Crisp Bright White Track for Light Mode */
[data-theme="light"] .toggle-track {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.08);
}

.toggle-icon {
    width: 14px;
    height: 14px;
    z-index: 2;
    transition: opacity 0.3s ease, color 0.3s ease, filter 0.3s ease;
}

/* Sun Icon */
.icon-sun {
    color: rgba(255, 255, 255, 0.25);
    opacity: 0.3;
}

/* Moon Icon (Active in Dark Mode) */
.icon-moon {
    color: var(--gold);
    opacity: 1;
    filter: drop-shadow(0 0 4px rgba(201, 169, 110, 0.7));
}

/* Light Mode: Sun Active, Moon Dimmed */
[data-theme="light"] .icon-sun {
    opacity: 1;
    color: #D97706;
    filter: drop-shadow(0 0 3px rgba(217, 119, 6, 0.5));
}

[data-theme="light"] .icon-moon {
    opacity: 0.25;
    color: rgba(0, 0, 0, 0.3);
    filter: none;
}

/* Sliding Switch Thumb */
.toggle-thumb {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: #1C1C22;
    /* Dark Obsidian Thumb in Dark Mode */
    border: 1.5px solid var(--gold);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.7), inset 0 0 4px rgba(201, 169, 110, 0.3);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    transform: translateX(28px);
    /* Default (Dark Mode): Thumb over Moon on right */
    z-index: 1;
}

[data-theme="light"] .toggle-thumb {
    transform: translateX(0px);
    /* Light Mode: Thumb over Sun on left */
    background: #FFFDF9;
    /* Pure Bright White Thumb in Light Mode */
    border-color: #F59E0B;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15), inset 0 0 4px rgba(245, 158, 11, 0.2);
}

/* Mobile Menu Button */
.mobile-menu-btn {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    gap: 5px;
    padding: 8px;
    cursor: pointer;
    z-index: 10002;
    position: relative;
    border-radius: 50%;
    transition: background-color 0.3s ease;
}

.mobile-menu-btn:hover {
    background: rgba(201, 169, 110, 0.15);
}

.mobile-menu-btn span {
    display: block;
    width: 22px;
    height: 2px;
    background: #fff;
    border-radius: 2px;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.2s ease, background-color 0.3s ease;
    transform-origin: center;
}

.navbar.scrolled .mobile-menu-btn span {
    background: var(--text-primary);
}

/* High contrast white close X button when menu is open in any theme/scrolled state */
.mobile-menu-btn.active span,
.navbar.scrolled .mobile-menu-btn.active span {
    background: #ffffff !important;
}

.mobile-menu-btn.active:hover span {
    background: var(--gold) !important;
}

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

.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
    transform: scaleX(0);
}

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

/* Mobile navigation overlay */
@media (max-width: 768px) {
    .mobile-menu-btn {
        display: flex;
    }

    .nav-links {
        display: none;
    }

    .nav-links.mobile-open {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        background: var(--mobile-nav-bg);
        /* 70% opacity controlled by CSS variable */
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        transform: translateZ(0);
        will-change: opacity, transform;
        z-index: 10001;
        gap: 32px;
        padding: 90px 24px 40px;
        overflow-y: auto;
    }

    .nav-links.mobile-open a {
        font-size: 1.2rem;
        font-weight: 500;
        letter-spacing: 3px;
        text-transform: uppercase;
        color: #f0ede8 !important;
        padding: 8px 16px;
        transition: color 0.3s ease, transform 0.3s ease;
    }

    .nav-links.mobile-open a:hover,
    .nav-links.mobile-open a.active {
        color: var(--gold) !important;
        transform: translateY(-2px);
    }

    .nav-links.mobile-open a::after {
        display: none;
    }

    .nav-links.mobile-open .theme-toggle {
        margin-top: 12px;
        padding: 2px;
    }
}


/* ========================================
   HERO
   ======================================== */
.hero {
    height: 100vh;
    min-height: 600px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    color: #fff;
    overflow: hidden;
}

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

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    animation: heroZoom 25s ease-in-out infinite alternate;
}

@keyframes heroZoom {
    0% {
        transform: scale(1);
    }

    100% {
        transform: scale(1.08);
    }
}

.hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.8) 100%);
    z-index: -1;
}

.hero-content {
    max-width: 800px;
    padding: 0 20px;
    z-index: 1;
}

.hero-content h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    color: #fff;
    font-style: italic;
    font-weight: 400;
    margin-bottom: 20px;
    opacity: 0;
    transform: translateY(40px);
}

.hero-content .hero-sub {
    font-size: 1rem;
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 50px;
    opacity: 0;
    transform: translateY(30px);
}

.hero-ctas {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
    opacity: 0;
    transform: translateY(30px);
}

.hero-scroll-indicator {
    position: absolute;
    bottom: 40px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    animation: scrollBounce 2s ease-in-out infinite;
}

.hero-scroll-indicator span {
    width: 1px;
    height: 40px;
    background: rgba(255, 255, 255, 0.3);
}

@keyframes scrollBounce {

    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }

    50% {
        transform: translateX(-50%) translateY(10px);
    }
}


/* ========================================
   SERVICES
   ======================================== */
.services-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 24px;
}

.service-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: 50px 35px;
    transition: var(--transition);
    position: relative;
    overflow: hidden;
}

.service-card::before {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: var(--gold);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s var(--ease);
}

.service-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-card-hover);
    border-color: var(--border-accent);
}

.service-card:hover::before {
    transform: scaleX(1);
}

.service-card .card-icon {
    width: 48px;
    height: 48px;
    margin-bottom: 24px;
    color: var(--gold);
}

.service-card .card-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.5;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.service-card h3 {
    font-size: 1.3rem;
    margin-bottom: 14px;
}

.service-card p {
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--text-secondary);
}


/* ========================================
   PROCESS TIMELINE
   ======================================== */
.process-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
}

/* Vertical gold line */
.timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--border-accent);
    transform: translateX(-50%);
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 60px;
    position: relative;
    opacity: 0;
    transform: translateY(30px);
}

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

.timeline-item:nth-child(odd) {
    flex-direction: row;
    text-align: right;
    padding-right: calc(50% + 40px);
}

.timeline-item:nth-child(even) {
    flex-direction: row-reverse;
    text-align: left;
    padding-left: calc(50% + 40px);
}

/* Dot on the line */
.timeline-item::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 8px;
    width: 12px;
    height: 12px;
    background: var(--gold);
    border-radius: 50%;
    transform: translateX(-50%);
    border: 3px solid var(--bg-secondary);
    z-index: 1;
}

.timeline-item .step-number {
    font-size: 0.7rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 6px;
    font-weight: 500;
}

.timeline-item h4 {
    font-size: 1.2rem;
    margin-bottom: 8px;
}

.timeline-item p {
    font-size: 0.9rem;
    color: var(--text-secondary);
}


/* ========================================
   PORTFOLIO
   ======================================== */
.portfolio-section {
    background: var(--bg-primary);
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    background: transparent;
    transition: var(--transition);
    font-weight: 400;
}

.filter-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a0a0a;
    font-weight: 500;
}

/* ========================================
   PORTFOLIO (CLEAN ARCHITECTURAL MONOGRAPH)
   Photo 100% Unobstructed Above, Info Cleanly Below
   ======================================== */
.portfolio-section {
    background: var(--bg-primary);
}

.portfolio-filters {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 50px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--text-secondary);
    border: 1px solid var(--border-subtle);
    background: transparent;
    transition: var(--transition);
    font-weight: 400;
}

.filter-btn:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.filter-btn.active {
    background: var(--gold);
    border-color: var(--gold);
    color: #0a0a0a;
    font-weight: 500;
}

/* Option 03 Minimalist Gallery Strip Grid */
.portfolio-grid.opt3-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
    gap: 40px 30px;
    align-items: start;
}

.portfolio-item.opt3-card {
    cursor: pointer;
    display: flex;
    flex-direction: column;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item.hidden {
    display: none;
}

.portfolio-item.opt3-card:hover {
    transform: translateY(-5px);
}

.opt3-media {
    position: relative;
    aspect-ratio: 4/3;
    border-radius: 6px;
    overflow: hidden;
    background: #0d0d0f;
    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.45);
    margin-bottom: 16px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    transition: border-color 0.4s ease, box-shadow 0.4s ease;
}

.portfolio-item.opt3-card:hover .opt3-media {
    border-color: rgba(197, 160, 89, 0.45);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6), 0 0 20px rgba(197, 160, 89, 0.12);
}

.opt3-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.portfolio-item.opt3-card:hover .opt3-media img {
    transform: scale(1.045);
}

.opt3-photo-count {
    position: absolute;
    top: 14px;
    right: 14px;
    background: rgba(12, 12, 14, 0.72);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 4px 10px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
}

.portfolio-item.opt3-card:hover .opt3-photo-count {
    background: rgba(197, 160, 89, 0.85);
    color: #000;
    border-color: var(--gold);
}

/* Two-Tier Spec Baseline */
.opt3-spec-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 2px 2px 0;
}

.opt3-row-primary {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
}

.opt3-title {
    font-family: var(--font-serif);
    font-size: 1.15rem;
    font-weight: 600;
    color: #ffffff;
    margin: 0;
    line-height: 1.25;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.3s ease;
}

.portfolio-item.opt3-card:hover .opt3-title {
    color: var(--gold-light);
}

.opt3-typology-tag {
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.55px;
    color: var(--gold);
    font-weight: 600;
    white-space: nowrap;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    padding: 2px 7px;
    border-radius: 3px;
    background: rgba(197, 160, 89, 0.08);
    border: 1px solid rgba(197, 160, 89, 0.22);
    line-height: 1.3;
}

.opt3-row-secondary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
}

.opt3-location {
    font-size: 0.76rem;
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 0;
    flex: 1;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.opt3-location svg {
    color: var(--gold);
    flex-shrink: 0;
    width: 11px;
    height: 11px;
}

.opt3-client {
    font-size: 0.74rem;
    color: var(--gold-light, #d8bc7e);
    margin: 0;
    flex-shrink: 0;
    white-space: nowrap;
    text-align: right;
    opacity: 0.88;
}

@media (max-width: 768px) {
    .portfolio-grid.opt3-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 32px 20px;
    }
}

@media (max-width: 480px) {
    .portfolio-grid.opt3-grid {
        grid-template-columns: 1fr;
        gap: 26px;
    }

    .opt3-row-primary {
        flex-wrap: wrap;
        gap: 6px;
    }

    .opt3-row-secondary {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

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

/* Light Theme Overrides for Option 03 */
[data-theme="light"] .opt3-media {
    background: #e8e6e1;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

[data-theme="light"] .portfolio-item.opt3-card:hover .opt3-media {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.14), 0 0 15px rgba(184, 142, 63, 0.2);
    border-color: rgba(184, 142, 63, 0.4);
}

[data-theme="light"] .opt3-title {
    color: #111111;
}

[data-theme="light"] .opt3-location {
    color: #666666;
}

[data-theme="light"] .opt3-typology-tag {
    color: #8c6a28;
    background: rgba(184, 148, 77, 0.1);
    border-color: rgba(184, 148, 77, 0.3);
}

[data-theme="light"] .opt3-client {
    color: #795b22;
}

[data-theme="light"] .opt3-photo-count {
    background: rgba(255, 255, 255, 0.85);
    color: #111;
    border-color: rgba(0, 0, 0, 0.12);
}


/* ========================================
   RE-ENGINEERED LIGHTBOX (EXPANDED PHOTO)
   Max Screen Utilization + Translucent Caption Panel
   ======================================== */
.lightbox {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgba(4, 4, 6, 0.92);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
    padding: 16px;
}

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

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 24px;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: #fff;
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 10002;
    transition: all 0.3s ease;
    line-height: 1;
}

.lightbox-close:hover {
    background: var(--gold);
    color: #000;
    transform: rotate(90deg);
}

.lightbox-stage {
    position: relative;
    width: 100%;
    max-width: min(95vw, 1560px);
    height: 94vh;
    max-height: 94vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.lightbox-stage .swiper {
    width: 100%;
    height: 100%;
    border-radius: 6px;
}

.lightbox-stage .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    background: transparent;
    padding: 8px;
}

.lightbox-stage .swiper-slide img {
    max-width: 100%;
    max-height: 87vh;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 6px;
    box-shadow: 0 24px 70px rgba(0, 0, 0, 0.75);
}

/* Translucent Glassmorphic Caption Card OVER Expanded Photo (Compact Low-Profile) */
.lightbox-floating-caption {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    width: calc(100% - 36px);
    max-width: 860px;
    z-index: 10001;
    background: rgba(12, 12, 15, 0.52);
    backdrop-filter: blur(14px) saturate(180%);
    -webkit-backdrop-filter: blur(14px) saturate(180%);
    border: 1px solid rgba(197, 160, 89, 0.28);
    border-radius: 8px;
    padding: 10px 18px;
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.08);
    display: flex;
    flex-direction: column;
    gap: 3px;
    pointer-events: auto;
}

.lfc-body {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.lfc-title-group {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.lfc-title {
    font-family: var(--font-serif);
    font-size: 1.22rem;
    color: #fff;
    margin: 0;
    line-height: 1.2;
}

.lfc-client {
    font-size: 0.78rem;
    color: var(--gold-light, #d8bc7e);
    font-weight: 500;
    margin: 0;
    letter-spacing: 0.4px;
}

.lfc-desc {
    font-size: 0.8rem;
    color: rgba(240, 237, 232, 0.85);
    font-weight: 300;
    line-height: 1.38;
    margin: 0;
}

/* Bottom Row: Tags + Location + Counter on Left, Action Button on Right */
.lfc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    margin-top: 5px;
    padding-top: 5px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.lfc-footer-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.lfc-badge {
    font-size: 0.68rem;
    padding: 2px 9px;
    border-radius: 4px;
    letter-spacing: 0.8px;
    font-weight: 600;
    line-height: 1.4;
}

.lfc-badge.typology {
    background: rgba(197, 160, 89, 0.16);
    color: var(--gold);
    border: 1px solid rgba(197, 160, 89, 0.35);
    text-transform: uppercase;
}

.lfc-badge.location {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(240, 237, 232, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.14);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.lfc-badge.location svg {
    color: var(--gold);
}

.lfc-counter {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.6);
    letter-spacing: 1px;
    font-weight: 500;
    margin-left: 4px;
}

.lfc-footer .btn {
    padding: 5px 15px;
    font-size: 0.72rem;
    letter-spacing: 1.2px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Swiper navigation buttons in Lightbox */
.lightbox-stage .swiper-button-next,
.lightbox-stage .swiper-button-prev {
    color: #fff;
    width: 46px;
    height: 46px;
    background: rgba(14, 14, 16, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    backdrop-filter: blur(8px);
    transition: all 0.3s ease;
}

.lightbox-stage .swiper-button-next:hover,
.lightbox-stage .swiper-button-prev:hover {
    background: var(--gold);
    color: #000;
    border-color: var(--gold);
}

.lightbox-stage .swiper-button-next::after,
.lightbox-stage .swiper-button-prev::after {
    font-size: 16px;
    font-weight: 700;
}

/* Swiper Navigation in lightbox */
.lightbox .swiper-button-next,
.lightbox .swiper-button-prev {
    color: #fff;
    --swiper-navigation-size: 28px;
}

.lightbox .swiper-pagination-bullet {
    background: #fff;
}

.lightbox .swiper-pagination-bullet-active {
    background: var(--gold);
}


/* ========================================
   ABOUT
   ======================================== */
.about-section {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.about-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

.about-image {
    position: relative;
}

.about-image-frame {
    position: relative;
    z-index: 1;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
}

.about-image-frame img {
    width: 100%;
    height: auto;
    display: block;
    transform: scale(1.12);
    transform-origin: center 30%;
    transition: transform var(--transition-normal);
}

.about-image:hover .about-image-frame {
    transform: translate(-3px, -3px);
    box-shadow: 0 22px 48px rgba(0, 0, 0, 0.45);
}

.about-image:hover .about-image-frame img {
    transform: scale(1.09);
}

.about-image::before {
    content: '';
    position: absolute;
    top: -16px;
    left: -16px;
    right: 16px;
    bottom: 16px;
    border: 1px solid var(--gold);
    opacity: 0.45;
    z-index: 0;
    border-radius: 4px;
    transition: transform var(--transition-normal), opacity var(--transition-normal);
}

.about-image:hover::before {
    transform: translate(3px, 3px);
    opacity: 0.75;
}

.about-text .section-title {
    text-align: left;
}

.about-text .architect-name {
    font-family: var(--font-body);
    font-size: 1rem;
    color: var(--gold);
    font-weight: 500;
    margin-bottom: 24px;
    letter-spacing: 1px;
}

.about-text p {
    margin-bottom: 24px;
    font-size: 1.02rem;
    line-height: 1.85;
    color: var(--text-secondary);
}

.why-us-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-top: 36px;
}

.why-us-item {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.why-us-item .why-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--gold);
    margin-top: 3px;
}

.why-us-item .why-icon svg {
    width: 100%;
    height: 100%;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}

.why-us-item span {
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.5;
}


/* ========================================
   CONNECT (formerly Contact)
   ======================================== */
.connect-section,
.contact-section {
    background: var(--bg-primary);
    padding-top: clamp(20px, 4vw, 40px);
    /* Reduced gap */
}

.connect-grid,
.contact-grid {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 70px;
    align-items: start;
}

.contact-form-wrap .form-header {
    margin-bottom: 24px;
}

.contact-form-wrap h3 {
    font-size: 1.6rem;
    margin-bottom: 8px;
    color: var(--text-primary);
}

.contact-form-wrap .form-subtitle {
    font-size: 0.92rem;
    color: var(--text-secondary);
    line-height: 1.6;
    margin: 0;
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.form-group {
    margin-bottom: 16px;
}

.form-group label {
    display: block;
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-secondary);
    margin-bottom: 8px;
    font-weight: 400;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.95rem;
    transition: var(--transition);
    outline: none;
    border-radius: 0;
    -webkit-appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    border-color: var(--gold);
}

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

.form-group select {
    cursor: pointer;
}

.form-submit {
    margin-top: 10px;
}

/* Single Unified Connect Panel (No duplicate boxes, No location repetition) */
.connect-info-wrap {
    display: flex;
    flex-direction: column;
}

.connect-info-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: 40px 38px;
    display: flex;
    flex-direction: column;
    gap: 32px;
    position: relative;
    transition: border-color var(--transition), box-shadow var(--transition);
}

.connect-info-card:hover {
    border-color: rgba(201, 169, 110, 0.35);
}

.connect-header h3 {
    font-size: 1.6rem;
    margin-bottom: 12px;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.connect-header p {
    color: var(--text-secondary);
    line-height: 1.65;
    font-size: 0.95rem;
    margin: 0;
}

.connect-details {
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.connect-item {
    display: flex;
    align-items: center;
    gap: 16px;
}

.connect-item .c-icon {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border-accent);
    flex-shrink: 0;
    color: var(--gold);
    background: rgba(201, 169, 110, 0.04);
    transition: var(--transition);
}

.connect-item:hover .c-icon {
    border-color: var(--gold);
    background: rgba(201, 169, 110, 0.12);
    color: var(--gold-light, #f0e6d2);
}

.connect-item .c-icon svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 1.6;
}

.connect-item .c-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.connect-item .c-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.connect-item a,
.connect-item p {
    font-size: 0.95rem;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.4;
    transition: color 0.25s ease;
}

.connect-item a:hover {
    color: var(--gold);
}

.connect-item .c-sub {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    line-height: 1.35;
    margin-top: 2px;
}

.connect-action {
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}

.btn-whatsapp-connect {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 14px 20px;
    border: 1px solid var(--border-accent);
    color: var(--gold);
    background: transparent;
    font-size: 0.88rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-weight: 500;
    transition: var(--transition);
}

.btn-whatsapp-connect:hover {
    background: var(--gold);
    color: #0a0a0a;
    border-color: var(--gold);
}

.btn-whatsapp-connect svg {
    width: 17px;
    height: 17px;
    fill: currentColor;
    flex-shrink: 0;
}

.map-container {
    width: 100%;
    height: 220px;
    border: 1px solid var(--border-subtle);
    overflow: hidden;
}

.map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) invert(0.92) contrast(0.83);
}

[data-theme="light"] .map-container iframe {
    filter: grayscale(0.3) contrast(0.9);
}


/* ========================================
   FOOTER
   ======================================== */
footer {
    background: var(--bg-secondary);
    border-top: 1px solid var(--border-subtle);
    padding: 60px 0 24px;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 60px;
    margin-bottom: 50px;
}

.footer-brand {
    width: 270px;
    max-width: 100%;
    display: flex;
    flex-direction: column;
}

.footer-logo-wrap {
    position: relative;
    display: block;
    width: 100%;
    margin-bottom: 18px;
}

.footer-brand .footer-logo {
    width: 100%;
    height: auto;
    max-height: 52px;
    display: block;
    margin-bottom: 0;
    object-fit: contain;
    object-position: left center;
    /* Default dark footer: crisp pure white SVG logo */
    filter: brightness(0) invert(1);
    transition: filter 0.35s ease, opacity 0.35s ease;
}

/* Light mode footer: deep dark charcoal SVG logo */
[data-theme="light"] .footer-brand .footer-logo {
    filter: brightness(0);
}

.footer-brand p {
    width: 100%;
    font-size: 0.88rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin: 0 0 20px 0;
}

.footer-social-row {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 0 16px 0;
}

.footer-social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-subtle);
    color: var(--text-secondary);
    transition: all 0.25s ease;
}

.footer-social-btn:hover {
    background: var(--gold);
    color: #0a0a0a;
    border-color: var(--gold);
    transform: translateY(-2px);
}

[data-theme="light"] .footer-social-btn {
    background: rgba(0, 0, 0, 0.04);
}

[data-theme="light"] .footer-social-btn:hover {
    background: var(--gold);
    color: #ffffff;
    border-color: var(--gold);
}

.footer-social-btn.provisional {
    opacity: 0.72;
}

.footer-social-btn.provisional:hover {
    background: rgba(197, 160, 89, 0.15);
    color: var(--gold);
    border-color: var(--gold);
    transform: translateY(-2px);
}

.provisional-link {
    display: inline-flex !important;
    align-items: center;
    gap: 7px;
}

.footer-provisional-pill {
    font-size: 0.60rem;
    padding: 1px 6px;
    border-radius: 8px;
    background: rgba(197, 160, 89, 0.12);
    color: var(--gold);
    border: 1px solid rgba(197, 160, 89, 0.32);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1.3;
}

.footer-col h4 {
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 20px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-weight: 500;
}

.footer-col a {
    display: block;
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px;
}

.footer-col a:hover {
    color: var(--gold);
}


/* ========================================
   FOOTER LEGAL & POLICY ACCORDION (v1.8)
   ======================================== */
.footer-legal-accordion {
    margin-top: 48px;
    margin-bottom: 28px;
    border-top: 1px solid var(--border-subtle);
}

.legal-accordion-item {
    border-bottom: 1px solid var(--border-subtle);
}

.legal-accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 0.82rem;
    font-weight: 500;
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: left;
    cursor: pointer;
    transition: color 0.3s ease;
}

.legal-accordion-trigger:hover {
    color: var(--gold);
}

.legal-accordion-trigger .lat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    transition: transform 0.35s var(--ease), color 0.35s ease;
}

.legal-accordion-trigger:hover .lat-icon {
    color: var(--gold);
}

.legal-accordion-trigger[aria-expanded="true"] .lat-icon {
    transform: rotate(180deg);
    color: var(--gold);
}

.legal-accordion-trigger[aria-expanded="true"] .lat-title {
    color: var(--gold);
}

.legal-accordion-panel {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.4s var(--ease), opacity 0.35s var(--ease), padding 0.35s var(--ease);
}

.legal-accordion-panel.active {
    max-height: 400px;
    opacity: 1;
    padding-bottom: 20px;
}

.legal-panel-inner {
    padding-top: 4px;
    padding-right: 24px;
}

.legal-panel-inner p {
    font-size: 0.82rem;
    line-height: 1.65;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.legal-panel-inner p:last-child {
    margin-bottom: 0;
}


/* ========================================
   FOOTER BROCHURE DOWNLOAD CTA & LINKS
   ======================================== */
.footer-brochure-cta {
    margin: 0;
    width: 100%;
    display: flex;
}

.footer-download-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.35);
    border-radius: 4px;
    color: var(--gold);
    font-family: var(--font-body);
    font-size: 0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 100%;
    box-sizing: border-box;
}

.footer-download-btn svg {
    flex-shrink: 0;
    stroke: var(--gold);
    transition: transform 0.25s ease;
}

.footer-download-btn .fdb-badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 3px;
    background: rgba(201, 169, 110, 0.16);
    color: var(--gold-light);
    letter-spacing: 0.05em;
    font-weight: 600;
}

.footer-download-btn:hover {
    background: var(--gold);
    color: #0a0a0a !important;
    border-color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(201, 169, 110, 0.25);
}

.footer-download-btn:hover svg {
    stroke: #0a0a0a;
    transform: translateY(1.5px);
}

.footer-download-btn:hover .fdb-badge {
    background: rgba(0, 0, 0, 0.2);
    color: #0a0a0a;
}

[data-theme="light"] .footer-download-btn {
    background: rgba(168, 139, 74, 0.06);
    border-color: rgba(168, 139, 74, 0.32);
    color: #8F7234;
}

[data-theme="light"] .footer-download-btn svg {
    stroke: #8F7234;
}

[data-theme="light"] .footer-download-btn .fdb-badge {
    background: rgba(168, 139, 74, 0.12);
    color: #72571F;
}

[data-theme="light"] .footer-download-btn:hover {
    background: var(--gold);
    color: #ffffff !important;
    border-color: var(--gold);
}

[data-theme="light"] .footer-download-btn:hover svg {
    stroke: #ffffff;
}

[data-theme="light"] .footer-download-btn:hover .fdb-badge {
    background: rgba(255, 255, 255, 0.25);
    color: #ffffff;
}

/* Connect Column Brochure Link (inherits standard .footer-col a typography) */
.footer-brochure-nav-link {
    color: var(--text-secondary);
    transition: color 0.25s ease;
}

.footer-brochure-nav-link:hover {
    color: var(--gold);
}

/* Footer Bottom Bar */
.footer-bottom {
    border-top: 1px solid var(--border-subtle);
    padding-top: 24px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
    text-align: right;
}

.footer-bottom p {
    font-size: 0.8rem;
    color: var(--text-tertiary);
    margin: 0;
    text-align: right;
}


/* ========================================
   FLOATING WHATSAPP
   ======================================== */
.floating-whatsapp {
    position: fixed;
    bottom: 30px;
    right: 30px;
    width: 56px;
    height: 56px;
    background: #25D366;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    z-index: 900;
    box-shadow: 0 4px 20px rgba(37, 211, 102, 0.4);
    transition: transform 0.3s var(--ease), box-shadow 0.3s ease;
}

.floating-whatsapp:hover {
    transform: scale(1.1);
    box-shadow: 0 6px 30px rgba(37, 211, 102, 0.5);
}

.floating-whatsapp svg {
    width: 28px;
    height: 28px;
    fill: currentColor;
}


/* ========================================
   BACK TO TOP
   ======================================== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    right: 100px;
    width: 44px;
    height: 44px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    z-index: 900;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    cursor: pointer;
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
}

.back-to-top:hover {
    background: var(--gold);
    color: #0a0a0a;
    border-color: var(--gold);
}

.back-to-top svg {
    width: 18px;
    height: 18px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2;
}


/* ========================================
   CONSULTATION MODAL
   ======================================== */
.modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease);
}

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

.modal-box {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: 48px;
    width: 90%;
    max-width: 480px;
    max-height: 90vh;
    overflow-y: auto;
    position: relative;
    transform: translateY(24px) scale(0.97);
    transition: all 0.4s var(--ease);
}

.modal-overlay.active .modal-box {
    transform: translateY(0) scale(1);
}

.modal-close {
    position: absolute;
    top: 20px;
    right: 20px;
    color: var(--text-secondary);
    font-size: 20px;
    padding: 4px;
    transition: var(--transition);
}

.modal-close:hover {
    color: var(--text-primary);
    transform: rotate(90deg);
}

.modal-box h3 {
    font-size: 1.6rem;
    margin-bottom: 6px;
}

.modal-box .modal-sub {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 28px;
}


/* ========================================
   SCROLL REVEAL (initial states)
   ======================================== */
.reveal {
    opacity: 0;
    transform: translateY(40px);
}

.reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}

.reveal-delay-1 {
    transition-delay: 0.1s !important;
}

.reveal-delay-2 {
    transition-delay: 0.2s !important;
}

.reveal-delay-3 {
    transition-delay: 0.3s !important;
}

.reveal-delay-4 {
    transition-delay: 0.4s !important;
}

.reveal-delay-5 {
    transition-delay: 0.5s !important;
}


/* ========================================
   RESPONSIVE
   ======================================== */
@media (max-width: 1024px) {
    :root {
        --section-pad: 80px;
    }

    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .portfolio-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .about-grid {
        gap: 50px;
    }

    .lightbox-inner {
        flex-direction: column;
        gap: 24px;
        max-height: 90vh;
        overflow-y: auto;
    }

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

@media (max-width: 768px) {
    :root {
        --section-pad: 60px;
    }

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

    .portfolio-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .portfolio-item {
        min-height: 350px;
    }

    .portfolio-floating-caption {
        bottom: 12px;
        left: 12px;
        right: 12px;
        padding: 12px 14px;
    }

    .caption-building {
        font-size: 1.12rem;
    }

    .caption-client {
        font-size: 0.72rem;
    }

    .caption-view-desc {
        font-size: 0.73rem;
        -webkit-line-clamp: 2;
    }

    .about-grid {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-image {
        order: -1;
    }

    .contact-grid,
    .connect-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

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

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

    .footer-bottom {
        justify-content: flex-end;
        text-align: right;
        gap: 12px;
    }

    /* Timeline single-column */
    .timeline::before {
        left: 16px;
    }

    .timeline-item:nth-child(odd),
    .timeline-item:nth-child(even) {
        padding-left: 50px;
        padding-right: 0;
        text-align: left;
        flex-direction: row;
    }

    .timeline-item::before {
        left: 16px;
    }

    .why-us-grid {
        grid-template-columns: 1fr;
    }

    .hero-content h1 {
        font-size: 2.4rem;
    }

    .back-to-top {
        right: 20px;
        bottom: 100px;
    }
}

/* Custom Select Chevron Indicator */
.form-group select {
    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='%23C9A96E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 16px;
    padding-right: 40px !important;
}

/* Toast Notification Feedback */
.toast-notification {
    position: fixed;
    bottom: 30px;
    left: 30px;
    z-index: 9999;
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--gold);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    padding: 16px 24px;
    border-radius: 4px;
    max-width: 420px;
    opacity: 0;
    transform: translateY(20px);
    visibility: hidden;
    transition: opacity 0.4s ease, transform 0.4s ease, visibility 0.4s ease;
}

.toast-notification.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

.toast-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(201, 169, 110, 0.15);
    color: var(--gold);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

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

.toast-content h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
    font-family: var(--font-body);
}

.toast-content p {
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.toast-close {
    background: transparent;
    border: none;
    color: var(--text-tertiary);
    font-size: 20px;
    cursor: pointer;
    padding: 0 4px;
    margin-left: auto;
    transition: color 0.3s ease;
}

.toast-close:hover {
    color: var(--text-primary);
}


/* ========================================
   v0.3 PROCESS DEMO VARIANTS
   ======================================== */
.process-demo-switcher {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

/* ========================================
   v0.5 OUR PROCESS: UNIFIED EDITORIAL ACCORDION
   (Synthesizing Style 02 Open Flow & Gold Expander
    with Style 03 Typography & Deliverable Tags)
   ======================================== */
.process-editorial-list {
    display: flex;
    flex-direction: column;
    max-width: 960px;
    margin: 40px auto 0;
}

.process-item {
    border-bottom: 1px solid var(--border-subtle);
    transition: background var(--transition), border-color var(--transition), box-shadow var(--transition);
    position: relative;
}

/* Hover glow & invite-to-click effect */
.process-item:hover {
    border-bottom-color: rgba(201, 169, 110, 0.45);
    background: linear-gradient(90deg, rgba(201, 169, 110, 0.05) 0%, rgba(201, 169, 110, 0.015) 45%, transparent 100%);
    box-shadow: 0 4px 20px -2px rgba(201, 169, 110, 0.08);
}

[data-theme="light"] .process-item:hover {
    border-bottom-color: rgba(201, 169, 110, 0.5);
    background: linear-gradient(90deg, rgba(201, 169, 110, 0.07) 0%, rgba(201, 169, 110, 0.02) 45%, transparent 100%);
    box-shadow: 0 4px 18px -2px rgba(201, 169, 110, 0.12);
}

/* Striking vertical gold line expanding on the left (scaleY) */
.process-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--gold);
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease, box-shadow 0.3s ease;
}

/* Subtle glow preview on hover before clicking (invite to click) */
.process-item:not(.active):hover::before {
    opacity: 0.75;
    transform: scaleY(0.45);
    box-shadow: 0 0 10px rgba(201, 169, 110, 0.6);
}

.process-item.active::before {
    opacity: 1;
    transform: scaleY(1);
    box-shadow: 0 0 12px rgba(201, 169, 110, 0.4);
}

.process-header {
    width: 100%;
    padding: 24px 20px 24px 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: transparent;
    border: none;
    color: var(--text-primary);
    cursor: pointer;
    text-align: left;
    transition: var(--transition);
}

.process-header-left {
    display: flex;
    align-items: center;
    gap: 24px;
}

.process-num {
    font-family: var(--font-heading);
    font-size: 1.65rem;
    font-style: italic;
    color: var(--text-tertiary);
    min-width: 36px;
    letter-spacing: -0.5px;
    transition: color 0.3s ease, text-shadow 0.3s ease, transform 0.3s ease;
}

.process-item:hover .process-num {
    color: var(--gold);
    text-shadow: 0 0 14px rgba(201, 169, 110, 0.35);
    transform: translateX(2px);
}

.process-item.active .process-num {
    color: var(--gold);
    text-shadow: 0 0 16px rgba(201, 169, 110, 0.5);
}

.process-title-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.process-title {
    font-family: var(--font-heading);
    font-size: 1.22rem;
    font-weight: 500;
    letter-spacing: 0.2px;
    color: var(--text-primary);
    margin: 0;
    transition: color 0.3s ease, transform 0.3s ease;
}

.process-item:hover .process-title {
    color: var(--gold-light, #f0e6d2);
    transform: translateX(2px);
}

.process-phase {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--text-tertiary);
    font-weight: 600;
    transition: color 0.3s ease, letter-spacing 0.3s ease;
}

.process-item:hover .process-phase {
    color: var(--gold);
    letter-spacing: 1.8px;
}

.process-item.active .process-phase {
    color: var(--gold);
}

.process-toggle-icon {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    color: var(--text-tertiary);
    background: transparent;
    flex-shrink: 0;
    transition: color 0.25s ease;
}

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

.process-toggle-icon .v-line {
    transition: transform 0.25s ease, opacity 0.2s ease;
    transform-origin: center;
}

/* Subtle, elegant hover state */
.process-item:hover .process-toggle-icon {
    color: var(--gold);
}

/* Active state: clean collapse of vertical line (+ to -) */
.process-item.active .process-toggle-icon {
    color: var(--gold);
}

.process-item.active .process-toggle-icon .v-line {
    transform: scaleY(0);
    opacity: 0;
}

.process-content {
    max-height: 0;
    overflow: hidden;
    padding: 0 20px 0 82px;
    transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1), padding 0.35s ease;
}

.process-item.active .process-content {
    max-height: 240px;
    padding: 0 20px 28px 82px;
}

.process-desc {
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.7;
    margin-bottom: 16px;
    max-width: 760px;
}

.process-deliverables {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.process-pill {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
    border-radius: 20px;
    color: var(--text-secondary);
    transition: var(--transition);
}

[data-theme="light"] .process-pill {
    background: rgba(0, 0, 0, 0.03);
}

.process-item.active .process-pill {
    border-color: rgba(201, 169, 110, 0.25);
    background: rgba(201, 169, 110, 0.06);
}

.process-pill:hover {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(201, 169, 110, 0.12);
}

@media (max-width: 768px) {
    .process-header {
        padding: 20px 14px 20px 16px;
    }

    .process-header-left {
        gap: 16px;
    }

    .process-num {
        font-size: 1.3rem;
        min-width: 28px;
    }

    .process-title {
        font-size: 1.05rem;
    }

    .process-content {
        padding: 0 14px 0 60px;
    }

    .process-item.active .process-content {
        padding: 0 14px 22px 60px;
    }
}


/* ========================================
   v0.3 SIGNATURE VIDEO WALKTHROUGH
   ======================================== */
.video-section {
    background: var(--bg-primary);
    padding: clamp(60px, 7vw, 100px) 0;
    border-top: 1px solid var(--border-subtle);
}

.video-preview-card {
    max-width: 920px;
    margin: 0 auto;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.4);
}

[data-theme="light"] .video-section {
    background: var(--bg-primary);
}

[data-theme="light"] .video-preview-card {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.08);
}

.video-poster {
    position: relative;
    height: 440px;
    overflow: hidden;
}

.video-poster img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.8s var(--ease);
}

.video-preview-card:hover .video-poster img {
    transform: scale(1.04);
}

.video-overlay-tint {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
}

.play-video-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--gold);
    color: #0a0a0a;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 0 30px rgba(201, 169, 110, 0.5);
    transition: transform 0.3s ease, background-color 0.3s ease;
    border: none;
    z-index: 2;
}

.play-video-btn svg {
    width: 26px;
    height: 26px;
    margin-left: 4px;
}

.play-video-btn:hover {
    transform: translate(-50%, -50%) scale(1.12);
    background: var(--gold-light);
}

.video-caption {
    padding: 24px 32px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.video-caption .v-badge {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 600;
}

.video-caption h4 {
    font-size: 1.2rem;
    color: var(--text-primary);
}

.video-caption p {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ========================================
   v2.1 DEVELOPER COLLABORATORS SECTION
   ======================================== */
.collaborators-section {
    background: var(--bg-primary);
    position: relative;
    padding: 95px 0 45px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: none;
}

.collaborators-grid {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px 36px;
    max-width: 1140px;
    margin: 20px auto 0;
    padding: 0 16px;
}

.collaborator-item {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1 1 0;
    height: 52px;
    text-decoration: none;
    outline: none;
    cursor: pointer;
    transition: transform 0.35s var(--ease);
}

.collaborator-item:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 4px;
    border-radius: 4px;
}

.collaborator-logo {
    display: block;
    width: auto;
    object-fit: contain;
    opacity: 0.88;
    filter: none;
    transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
    user-select: none;
    -webkit-user-drag: none;
}

/* Calibrated optical visual weights for cropped brand marks */
.collaborator-logo.godrej-logo {
    height: 25px;
}

.collaborator-logo.kalpataru-logo {
    height: 24px;
}

.collaborator-logo.viceroy-logo {
    height: 20px;
}

.collaborator-logo.lodha-logo {
    height: 17.5px;
}

.collaborator-logo.raheja-logo {
    height: 19px;
}

.collaborator-logo.bhoomi-logo {
    height: 25px;
}

.collaborator-item:hover .collaborator-logo {
    opacity: 1;
    transform: translateY(-2px) scale(1.06);
}

/* Targeted Project Card Glow Highlight (Navigated from collaborator deep link) */
.project-card.project-card-targeted {
    animation: projectCardPulse 2.2s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

@keyframes projectCardPulse {
    0% {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        transform: translateY(0);
    }

    25% {
        box-shadow: 0 0 35px 6px rgba(201, 169, 110, 0.6), 0 20px 45px rgba(0, 0, 0, 0.5);
        transform: translateY(-8px);
        border-color: rgba(201, 169, 110, 0.8);
    }

    70% {
        box-shadow: 0 0 28px 4px rgba(201, 169, 110, 0.4), 0 16px 36px rgba(0, 0, 0, 0.4);
        transform: translateY(-6px);
        border-color: rgba(201, 169, 110, 0.5);
    }

    100% {
        box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
        transform: translateY(0);
        border-color: var(--border-subtle);
    }
}

/* Light Theme Mode Fidelity */
[data-theme="light"] .collaborators-section {
    background: var(--bg-primary);
}

[data-theme="light"] .collaborator-logo {
    filter: brightness(0);
    opacity: 0.82;
}

[data-theme="light"] .collaborator-item:hover .collaborator-logo {
    filter: brightness(0);
    opacity: 1;
}

/* Responsive Layout */
@media (max-width: 991px) {
    .collaborators-grid {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 36px 28px;
        max-width: 680px;
    }

    .collaborators-section {
        padding: 60px 0 25px;
    }

    .collaborators-header {
        margin-bottom: 32px;
    }

    .collaborator-logo.godrej-logo {
        height: 23px;
    }

    .collaborator-logo.kalpataru-logo {
        height: 22px;
    }

    .collaborator-logo.viceroy-logo {
        height: 18px;
    }

    .collaborator-logo.lodha-logo {
        height: 16px;
    }

    .collaborator-logo.raheja-logo {
        height: 17px;
    }

    .collaborator-logo.bhoomi-logo {
        height: 23px;
    }
}

@media (max-width: 576px) {
    .collaborators-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 28px 20px;
        max-width: 340px;
    }

    .collaborators-section {
        padding: 48px 0 20px;
    }

    .collaborator-item {
        height: 42px;
    }

    .collaborator-logo.godrej-logo {
        height: 20px;
    }

    .collaborator-logo.kalpataru-logo {
        height: 19px;
    }

    .collaborator-logo.viceroy-logo {
        height: 16px;
    }

    .collaborator-logo.lodha-logo {
        height: 14px;
    }

    .collaborator-logo.raheja-logo {
        height: 15px;
    }

    .collaborator-logo.bhoomi-logo {
        height: 20px;
    }
}

/* ========================================
   v1.0 TRUSTED PARTNERS (35 BRANDS KINETIC RIBBON)
   ======================================== */
.partners-section {
    background: var(--bg-primary);
    position: relative;
    padding: 45px 0 95px;
    border-top: none;
    border-bottom: 1px solid var(--border-subtle);
}

[data-theme="light"] .partners-section {
    background: var(--bg-primary);
}

.kinetic-ribbon-wrapper {
    overflow: hidden;
    width: 100%;
    padding: 24px 0 32px;
    mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, black 7%, black 93%, transparent 100%);
}

.kinetic-ribbon-track {
    display: flex;
    gap: 16px;
    width: max-content;
    margin-bottom: 16px;
}

.kinetic-ribbon-track.track-forward {
    animation: ribbonScrollForward 55s linear infinite;
}

.kinetic-ribbon-track.track-reverse {
    animation: ribbonScrollReverse 52s linear infinite;
}

.kinetic-ribbon-track:hover {
    animation-play-state: paused;
}

@keyframes ribbonScrollForward {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

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

    100% {
        transform: translateX(0);
    }
}

.kinetic-ribbon-group {
    display: flex;
    gap: 16px;
    flex-shrink: 0;
}

.ribbon-capsule {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 22px;
    background: var(--bg-card);
    border: 1px solid var(--border-subtle);
    border-radius: 999px;
    white-space: nowrap;
    transition: var(--transition);
    cursor: default;
}

.ribbon-capsule:hover {
    border-color: var(--gold);
    background: rgba(201, 169, 110, 0.08);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px -2px rgba(201, 169, 110, 0.15);
}

.ribbon-capsule .r-name {
    font-family: var(--font-heading);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: var(--text-primary);
}

.ribbon-capsule:hover .r-name {
    color: var(--gold);
}

.ribbon-capsule .r-dot {
    color: var(--gold);
    font-weight: bold;
}

.ribbon-capsule .r-trade {
    font-size: 0.76rem;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

@media (max-width: 768px) {
    .kinetic-ribbon-track {
        gap: 12px;
        margin-bottom: 12px;
    }

    .kinetic-ribbon-group {
        gap: 12px;
    }

    .ribbon-capsule {
        padding: 10px 16px;
        gap: 8px;
    }

    .ribbon-capsule .r-name {
        font-size: 0.85rem;
        letter-spacing: 1.2px;
    }

    .ribbon-capsule .r-trade {
        font-size: 0.7rem;
    }
}


/* ========================================
   v0.3 JOURNAL / INSIGHTS
   ======================================== */
.journal-section {
    background: var(--bg-secondary);
}

.journal-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
}

.journal-card {
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    overflow: hidden;
    transition: var(--transition);
}

.journal-card:hover {
    border-color: var(--gold);
    transform: translateY(-4px);
}

.journal-card .j-img {
    height: 220px;
    overflow: hidden;
}

.journal-card .j-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s var(--ease);
}

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

.journal-card .j-body {
    padding: 28px;
}

.journal-card .j-date {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold);
    display: block;
    margin-bottom: 10px;
}

.journal-card h3 {
    font-size: 1.25rem;
    line-height: 1.4;
    margin-bottom: 12px;
}

.journal-card p {
    font-size: 0.9rem;
    margin-bottom: 16px;
}

.journal-card .j-link {
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold);
    font-weight: 500;
}


/* ========================================
   v0.3 VIDEO MODAL
   ======================================== */
.video-modal-box {
    max-width: 800px;
    padding: 32px;
}

.video-container {
    margin-top: 16px;
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
    background: #000;
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.process-modal-box {
    max-width: 600px;
}

.modal-process-list {
    margin-top: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.m-proc-step {
    display: flex;
    gap: 16px;
    text-align: left;
    background: var(--bg-primary);
    border: 1px solid var(--border-subtle);
    padding: 16px 20px;
}

.m-proc-step span {
    font-size: 1.1rem;
    font-family: var(--font-heading);
    color: var(--gold);
    font-weight: 700;
}

.m-proc-step h4 {
    font-size: 1rem;
    margin-bottom: 4px;
}

.m-proc-step p {
    font-size: 0.85rem;
}


/* ========================================
   v1.0 TESTIMONIALS SECTION (8 ARCHITECTURAL OPTIONS)
   Spacious yet Compact · Mobile-First · Zero E-Commerce Clutter
   ======================================== */
.testimonials-section {
    background: var(--bg-secondary);
    position: relative;
    padding: clamp(60px, 8vw, 100px) 0;
    overflow: hidden;
    border-bottom: 1px solid var(--border-subtle);
}

[data-theme="light"] .testimonials-section {
    background: var(--bg-secondary);
}

/* Option Switcher Bar */
.testimonials-switcher-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
}

.t-switcher-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 960px;
    padding: 0 4px;
    flex-wrap: wrap;
}

.t-switcher-label {
    font-size: 0.72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.t-compare-link {
    font-size: 0.72rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    text-decoration: none;
    transition: var(--transition);
    border-bottom: 1px dashed rgba(201, 169, 110, 0.4);
    padding-bottom: 2px;
}

.t-compare-link:hover {
    color: var(--text-primary);
    border-bottom-color: var(--gold);
}

.testimonials-switcher {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: 6px;
    border-radius: 999px;
    max-width: 100%;
}

.t-switch-btn {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.8px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px 14px;
    border-radius: 999px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    white-space: nowrap;
}

.t-switch-btn:hover {
    color: var(--text-primary);
}

.t-switch-btn.active {
    background: var(--gold);
    color: #0a0a0a;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(201, 169, 110, 0.3);
}

/* ─────────────────────────────────────────
   CIRCULAR CLIENT DP (DISPLAY PICTURE) SYSTEM
   ───────────────────────────────────────── */
.t-client-avatar {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 20%;
    border: 1.5px solid var(--gold);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition: var(--transition);
    background: var(--bg-card);
    display: inline-block;
}

.t-client-avatar:hover {
    transform: scale(1.05);
    border-color: #dfc28d;
    box-shadow: 0 6px 20px rgba(201, 169, 110, 0.4);
}

.t-client-avatar.xs {
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
    border-width: 1px;
}

.t-client-avatar.sm {
    width: 52px;
    height: 52px;
    max-width: 52px;
    max-height: 52px;
    border-width: 1.5px;
}

.t-client-avatar.md {
    width: 64px;
    height: 64px;
    max-width: 64px;
    max-height: 64px;
    border-width: 1.5px;
}

.t-client-avatar.lg {
    width: 76px;
    height: 76px;
    max-width: 76px;
    max-height: 76px;
    border-width: 2px;
}

.t-client-avatar.xl {
    width: 84px;
    height: 84px;
    max-width: 84px;
    max-height: 84px;
    border-width: 2px;
}

.t-client-avatar.ring-slate {
    border-color: var(--gold);
    outline: 2px solid rgba(201, 169, 110, 0.25);
    outline-offset: 3px;
}

.t-author-with-dp {
    display: flex;
    align-items: center;
    gap: 12px;
}

.t-author-with-dp h4 {
    margin: 0 0 2px;
    font-family: var(--font-heading);
    font-size: 1.02rem;
    color: var(--text-primary);
    line-height: 1.2;
}

.t-author-with-dp p {
    margin: 0;
    font-size: 0.78rem;
    color: var(--text-secondary);
    line-height: 1.3;
}

.t-author-with-dp strong {
    color: var(--text-primary);
    font-size: 0.88rem;
    display: block;
    line-height: 1.2;
}

/* Spatial positioning helpers across concepts */
.t-bp-body-split {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
}

.t-bp-body-split .t-bp-quote {
    margin-bottom: 0;
    flex: 1;
}

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

.t-plinth-header-row .t-plinth-top {
    margin-bottom: 0;
}

.t-tab-split-content {
    display: flex;
    align-items: center;
    gap: 28px;
    text-align: left;
}

.t-tab-text-wrap {
    flex: 1;
}

.t-tab-text-wrap blockquote {
    margin-bottom: 12px;
}

.t-editorial-body-split {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 28px;
    margin-bottom: 24px;
    flex: 1;
}

.t-editorial-body-split .t-editorial-body {
    font-family: var(--font-testimonial);
    font-size: 1.04rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.8;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.1px;
    flex: 1;
}

.t-editorial-body-split .t-client-avatar {
    flex-shrink: 0;
}

.t-editorial-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.t-editorial-top-row .t-editorial-index {
    margin-bottom: 0;
}

.t-stamp-meta-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.t-glide-content-split {
    display: flex;
    align-items: center;
    gap: 32px;
    text-align: left;
    max-width: 820px;
    margin: 0 auto;
}

.t-glide-text-wrap {
    flex: 1;
}

.t-glide-text-wrap .t-glide-quote {
    font-family: var(--font-testimonial);
    font-size: clamp(1.06rem, 1.35vw, 1.18rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin-bottom: 22px;
    letter-spacing: 0.1px;
}

.t-asym-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 18px;
}

.t-asym-top-row .t-asym-pill {
    margin-bottom: 0;
}

.t-drawer-body-split {
    display: flex;
    align-items: center;
    gap: 20px;
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
}

.t-drawer-body-split .t-drawer-quote {
    border-top: none;
    padding-top: 0;
    margin: 0;
    flex: 1;
}

/* Panes */
.testimonials-options-container {
    position: relative;
}

.t-option-pane {
    display: none;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.35s var(--ease), transform 0.35s var(--ease);
}

.t-option-pane.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

/* ─────────────────────────────────────────
   OPTION 01: ARCHITECTURAL BLUEPRINT MASTER SHEET (RADICAL ARCHITECTURAL REDESIGN)
   Master CAD drawing sheet with authentic Title Block and stacked schedule strips
   ───────────────────────────────────────── */
.t-blueprint-sheet {
    display: grid;
    grid-template-columns: 260px 1fr;
    background: var(--bg-secondary);
    border: 1px solid var(--border-accent);
    border-radius: 10px;
    overflow: hidden;
    max-width: 1160px;
    margin: 0 auto;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.28);
    background-image: radial-gradient(rgba(201, 169, 110, 0.09) 1px, transparent 1px);
    background-size: 20px 20px;
    position: relative;
}

/* Master Architectural Title Block */
.t-bp-titleblock {
    background: rgba(13, 20, 30, 0.75);
    border-right: 1px solid var(--border-subtle);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
}

.t-bp-tb-badge {
    font-size: 0.65rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    margin-bottom: 8px;
}

.t-bp-tb-title {
    font-family: var(--font-heading);
    font-size: 1.32rem;
    line-height: 1.25;
    color: var(--text-primary);
    letter-spacing: 1px;
    margin-bottom: 22px;
}

.t-bp-tb-table {
    display: flex;
    flex-direction: column;
    gap: 12px;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
    padding: 16px 0;
    margin-bottom: 22px;
}

.t-bp-tb-row {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.t-bp-tb-k {
    font-size: 0.62rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.t-bp-tb-v {
    font-size: 0.76rem;
    letter-spacing: 0.8px;
    font-weight: 600;
    color: var(--text-primary);
}

.t-bp-tb-stamp {
    border: 1.5px dashed rgba(201, 169, 110, 0.45);
    border-radius: 4px;
    padding: 10px 12px;
    text-align: center;
    background: rgba(201, 169, 110, 0.05);
}

.t-bp-stamp-seal {
    display: block;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: var(--gold);
    font-weight: 600;
    text-transform: uppercase;
}

.t-bp-stamp-sub {
    display: block;
    font-size: 0.58rem;
    letter-spacing: 1px;
    color: var(--text-secondary);
    text-transform: uppercase;
    margin-top: 2px;
}

/* Right Schedule Zone: Two Stacked Technical Strips */
.t-bp-schedule-zone {
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.t-bp-strip {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.t-bp-strip-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.t-bp-tag-group {
    display: flex;
    align-items: center;
    gap: 12px;
}

.t-bp-dwg-tag {
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 3px;
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.22);
}

.t-bp-prop-name {
    font-size: 0.86rem;
    color: var(--text-primary);
    font-weight: 500;
    letter-spacing: 0.3px;
}

.t-bp-scope-tag {
    font-size: 0.7rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
}

.t-bp-strip-content {
    display: flex;
    align-items: center;
    gap: 22px;
}

.t-bp-avatar-reticle {
    position: relative;
    flex-shrink: 0;
}

.t-bp-reticle-mark {
    position: absolute;
    top: -6px;
    right: -6px;
    font-size: 0.9rem;
    color: var(--gold);
    line-height: 1;
    pointer-events: none;
}

.t-bp-quote-wrap {
    flex: 1;
}

.t-bp-sheet-quote {
    font-family: var(--font-testimonial);
    font-size: 1.02rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin: 0 0 10px 0;
    letter-spacing: 0.1px;
}

.t-bp-client-sign {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

.t-bp-client-sign strong {
    color: var(--text-primary);
    font-weight: 600;
}

/* Datum Divider between strips */
.t-bp-datum-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 18px 0;
    opacity: 0.65;
}

.t-bp-datum-line {
    flex: 1;
    height: 1px;
    background: repeating-linear-gradient(90deg, var(--gold) 0, var(--gold) 4px, transparent 4px, transparent 8px);
}

.t-bp-datum-label {
    font-size: 0.6rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
}

/* ─────────────────────────────────────────
   OPTION 02: FLOATING ARCHITECTURAL PLINTHS
   Cantilevered dark slate with left gold accent notch
   ───────────────────────────────────────── */
.t-plinth-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.t-plinth-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--gold);
    border-radius: 0 8px 8px 0;
    padding: 32px 34px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
}

.t-plinth-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 36px -8px rgba(0, 0, 0, 0.5);
    border-color: rgba(201, 169, 110, 0.35);
    border-left-color: var(--gold);
}

.t-plinth-top {
    font-size: 0.7rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 16px;
    font-weight: 500;
}

.t-plinth-quote {
    font-family: var(--font-testimonial);
    font-size: 1.05rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin-bottom: 22px;
    letter-spacing: 0.1px;
}

.t-plinth-client {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.t-plinth-client h4 {
    font-family: var(--font-heading);
    font-size: 1.05rem;
    color: var(--text-primary);
}

.t-plinth-client p {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────
   OPTION 03: PROJECT SEGMENTED TABS
   Zero-scroll instant cross-fade, extreme compact footprint
   ───────────────────────────────────────── */
.t-tabs-wrap {
    max-width: 840px;
    margin: 0 auto;
    text-align: center;
}

.t-tabs-nav {
    display: inline-flex;
    justify-content: center;
    gap: 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    padding: 4px;
    border-radius: 999px;
    margin-bottom: 28px;
    flex-wrap: wrap;
}

.t-tab-item {
    font-family: var(--font-body);
    font-size: 0.76rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 8px 18px;
    border-radius: 999px;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: var(--transition);
}

.t-tab-item.active {
    background: rgba(201, 169, 110, 0.15);
    color: var(--gold);
    font-weight: 600;
}

.t-tab-content-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-accent);
    border-radius: 12px;
    padding: 40px 48px;
    position: relative;
    min-height: 180px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.t-tab-quote-panel {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.t-tab-quote-panel.active {
    display: block;
    opacity: 1;
}

.t-tab-quote-panel blockquote {
    font-family: var(--font-testimonial);
    font-size: clamp(1.06rem, 1.4vw, 1.2rem);
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin-bottom: 20px;
    letter-spacing: 0.1px;
}

.t-tab-meta h4 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--gold);
    margin-bottom: 2px;
}

.t-tab-meta p {
    font-size: 0.82rem;
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────
   OPTION 04: THE EDITORIAL RULE SPREAD
   Zero-container broadsheet magazine spread with refined typography
   ───────────────────────────────────────── */
.t-editorial-spread {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 0;
    border-top: 1px solid var(--border-subtle);
    border-bottom: 1px solid var(--border-subtle);
}

.t-editorial-pane {
    padding: 36px 42px;
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-bottom: 1px solid var(--border-subtle);
}

/* Vertical hairline cross-rule between columns */
.t-editorial-pane:nth-child(odd) {
    border-right: 1px solid var(--border-subtle);
}

/* Remove bottom border on the final row */
.t-editorial-pane:nth-last-child(-n+2) {
    border-bottom: none;
}

.t-editorial-index {
    font-family: var(--font-heading);
    font-size: 1.08rem;
    font-weight: 400;
    letter-spacing: 2px;
    color: var(--gold);
    margin-bottom: 16px;
    opacity: 0.9;
}

.t-editorial-body-split {
    display: flex;
    align-items: center;
    gap: 26px;
    margin-bottom: 22px;
}

.t-editorial-body {
    font-family: var(--font-testimonial);
    font-size: 1.04rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.82;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.1px;
    flex: 1;
}

.t-editorial-body-split img.t-client-avatar {
    width: 72px;
    height: 72px;
    min-width: 72px;
    min-height: 72px;
    border-radius: 50%;
    border: 1px solid rgba(201, 169, 110, 0.38);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.22);
    flex-shrink: 0;
}

.t-editorial-cite {
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
}

.t-editorial-author {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.t-editorial-author h4 {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--text-primary);
    letter-spacing: 0.2px;
    margin: 0;
}

.t-editorial-author p {
    font-family: var(--font-body);
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin: 0;
}

.t-editorial-badge {
    font-family: var(--font-body);
    font-weight: 500;
    font-size: 0.66rem;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--gold);
    background: rgba(201, 169, 110, 0.08);
    border: 1px solid rgba(201, 169, 110, 0.2);
    padding: 4px 10px;
    border-radius: 3px;
    white-space: nowrap;
    align-self: flex-start;
}

@media (max-width: 768px) {
    .t-editorial-spread {
        grid-template-columns: 1fr;
    }

    .t-editorial-pane {
        padding: 28px 20px;
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle);
    }

    .t-editorial-pane:last-child {
        border-bottom: none;
    }

    .t-editorial-body-split {
        flex-direction: column-reverse;
        align-items: flex-start;
        gap: 16px;
    }

    .t-editorial-cite {
        flex-direction: column;
        gap: 8px;
        align-items: flex-start;
    }
}

/* ─────────────────────────────────────────
   OPTION 05: ARCHITECTURAL STAMP PLAQUES
   Double hairline framed certificate plaques
   ───────────────────────────────────────── */
.t-stamp-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

.t-stamp-card {
    background: var(--bg-secondary);
    border: 1px solid rgba(201, 169, 110, 0.25);
    outline: 1px solid rgba(255, 255, 255, 0.05);
    outline-offset: -6px;
    padding: 34px 32px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: var(--transition);
}

.t-stamp-card:hover {
    border-color: var(--gold);
    outline-color: rgba(201, 169, 110, 0.15);
}

.t-stamp-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.t-stamp-seal {
    font-size: 0.68rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    border: 1px solid rgba(201, 169, 110, 0.3);
    padding: 3px 8px;
    border-radius: 2px;
    font-weight: 500;
}

.t-stamp-year {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    letter-spacing: 1px;
}

.t-stamp-quote {
    font-family: var(--font-testimonial);
    font-size: 1.06rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin-bottom: 22px;
    letter-spacing: 0.1px;
}

.t-stamp-author {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    border-top: 1px solid var(--border-subtle);
    padding-top: 16px;
}

.t-stamp-author h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.t-stamp-author p {
    font-size: 0.78rem;
    color: var(--text-secondary);
}

/* ─────────────────────────────────────────
   OPTION 06: CINEMATIC SPOTLIGHT GLIDE
   Peek-ahead carousel track with 18s auto-advance
   ───────────────────────────────────────── */
.t-glide-wrap {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.t-glide-container {
    overflow: hidden;
    padding: 14px 0 18px;
}

.t-glide-track {
    display: flex;
    gap: 24px;
    transition: transform 0.65s cubic-bezier(0.2, 0.8, 0.2, 1);
    align-items: stretch;
}

.t-glide-slide {
    flex: 0 0 84%;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 34px 38px;
    text-align: left;
    opacity: 0.42;
    transform: scale(0.965);
    transition: opacity 0.5s ease, transform 0.5s ease, border-color 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
    user-select: none;
}

.t-glide-slide.active {
    opacity: 1;
    transform: scale(1);
    border-color: var(--border-accent);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28);
    cursor: default;
}

.t-glide-slide:not(.active):hover {
    opacity: 0.72;
    border-color: rgba(201, 169, 110, 0.4);
}

.t-glide-quote {
    font-family: var(--font-heading);
    font-size: clamp(1.15rem, 1.6vw, 1.35rem);
    font-style: italic;
    line-height: 1.68;
    color: var(--text-primary);
    margin-bottom: 22px;
}

.t-glide-author h4 {
    font-family: var(--font-heading);
    font-size: 1.12rem;
    color: var(--gold);
    margin-bottom: 2px;
}

.t-glide-author p {
    font-size: 0.84rem;
    color: var(--text-secondary);
}

.t-glide-nav {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
}

.t-glide-arrow {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--border-subtle);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
}

.t-glide-arrow:hover {
    border-color: var(--gold);
    color: var(--gold);
}

.t-glide-dots {
    display: flex;
    gap: 6px;
}

.t-glide-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--border-subtle);
    cursor: pointer;
    transition: var(--transition);
}

.t-glide-dot.active {
    background: var(--gold);
    width: 24px;
    border-radius: 4px;
}

/* ─────────────────────────────────────────
   OPTION 07: ASYMMETRIC MATRIX CARDS (DYNAMIC MOSAIC)
   Interlocking diagonal 12-column architectural masonry (7/5 & 5/7)
   ───────────────────────────────────────── */
.t-asym-matrix-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 22px;
    max-width: 1160px;
    margin: 0 auto;
}

.t-matrix-card {
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 10px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    position: relative;
    transition: var(--transition);
    overflow: hidden;
}

.t-matrix-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* 12-column span rhythm: 7/5 then 5/7 */
.t-matrix-card.col-span-7 {
    grid-column: span 7;
}

.t-matrix-card.col-span-5 {
    grid-column: span 5;
}

/* Card 1: The Penthouse Pavilion (Major 7-col) */
.t-matrix-card.card-pavilion {
    border-left: 3px solid var(--gold);
}

/* Card 4: The Heritage Atelier (Major 7-col) */
.t-matrix-card.card-atelier {
    border-right: 3px solid var(--gold);
}

/* Card 2: Coastal Pillar (Minor 5-col) */
.t-matrix-card.card-pillar {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(201, 169, 110, 0.04) 100%);
}

/* Card 3: Coastal Monolith (Minor 5-col) */
.t-matrix-card.card-monolith {
    background: linear-gradient(145deg, rgba(201, 169, 110, 0.04) 0%, var(--bg-secondary) 100%);
}

/* Header & Meta */
.t-matrix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.t-matrix-plate {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.t-matrix-badge {
    font-size: 0.66rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
}

/* Body Splits */
.t-matrix-split-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    flex: 1;
}

.t-matrix-split-right {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    flex: 1;
}

.t-matrix-quote {
    font-family: var(--font-testimonial);
    font-size: 1.03rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.1px;
    flex: 1;
}

.t-matrix-card.card-pillar .t-matrix-quote,
.t-matrix-card.card-monolith .t-matrix-quote {
    font-size: 1.02rem;
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Footers */
.t-matrix-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    margin-top: auto;
}

.t-matrix-author h4 {
    font-family: var(--font-heading);
    font-size: 1rem;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.t-matrix-author p {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin: 0;
}

.t-matrix-author-row {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Tablet & Mobile Breakpoints */
@media (max-width: 960px) {
    .t-asym-matrix-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .t-matrix-card.col-span-7,
    .t-matrix-card.col-span-5 {
        grid-column: span 1;
    }

    .t-matrix-split-left,
    .t-matrix-split-right {
        flex-direction: column;
        gap: 14px;
    }
}

/* ─────────────────────────────────────────
   OPTION 08: THE ATELIER DIPTYCH
   Dual architectural gallery plates with corner drafting crosshairs
   ───────────────────────────────────────── */
.t-diptych-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    max-width: 1120px;
    margin: 0 auto;
}

.t-diptych-card {
    position: relative;
    background: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: 8px;
    padding: 26px 28px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: var(--transition);
    overflow: hidden;
}

.t-diptych-card:hover {
    border-color: var(--border-accent);
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
}

/* Drafting corner crosshair registration marks */
.t-diptych-card::before,
.t-diptych-card::after {
    content: '+';
    position: absolute;
    font-family: var(--font-body);
    font-size: 0.85rem;
    line-height: 1;
    color: rgba(201, 169, 110, 0.35);
    pointer-events: none;
    font-weight: 300;
}

.t-diptych-card::before {
    top: 8px;
    left: 10px;
}

.t-diptych-card::after {
    bottom: 8px;
    right: 10px;
}

.t-diptych-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 12px;
    margin-bottom: 16px;
}

.t-diptych-plate {
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 600;
}

.t-diptych-spec {
    font-size: 0.68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--text-secondary);
    padding: 3px 8px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--border-subtle);
}

.t-diptych-split {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    margin-bottom: 16px;
    flex: 1;
}

.t-diptych-quote {
    font-family: var(--font-testimonial);
    font-size: 1.03rem;
    font-weight: 400;
    font-style: normal;
    line-height: 1.76;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: 0.1px;
    flex: 1;
}

.t-diptych-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid var(--border-subtle);
    padding-top: 14px;
    margin-top: auto;
}

.t-diptych-author strong {
    display: block;
    font-family: var(--font-heading);
    font-size: 0.95rem;
    color: var(--text-primary);
    letter-spacing: 0.3px;
}

.t-diptych-author span {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.t-diptych-badge {
    font-size: 0.65rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: var(--gold);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.t-diptych-badge::before {
    content: '✓';
    font-size: 0.72rem;
}

/* ─────────────────────────────────────────
   LIGHT THEME OVERRIDES FOR ALL 8
   ───────────────────────────────────────── */
[data-theme="light"] .testimonials-switcher {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .t-blueprint-sheet {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.04);
    background-image: radial-gradient(rgba(0, 0, 0, 0.05) 1px, transparent 1px);
}

[data-theme="light"] .t-bp-titleblock {
    background: #F8F9FA;
    border-right-color: rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .t-blueprint-module,
[data-theme="light"] .t-plinth-card,
[data-theme="light"] .t-tab-content-card,
[data-theme="light"] .t-stamp-card,
[data-theme="light"] .t-glide-slide,
[data-theme="light"] .t-glide-slide.active {
    border-color: rgba(201, 169, 110, 0.45);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.08);
}

[data-theme="light"] .t-glide-slide,
[data-theme="light"] .t-asym-hero,
[data-theme="light"] .t-asym-companion,
[data-theme="light"] .t-diptych-card,
[data-theme="light"] .t-drawer-item {
    background: #FFFFFF;
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.03);
}

[data-theme="light"] .t-stamp-card {
    outline-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(201, 169, 110, 0.4);
}

[data-theme="light"] .t-editorial-spread {
    border-color: rgba(201, 169, 110, 0.4);
}

[data-theme="light"] .t-editorial-pane:first-child {
    border-right-color: rgba(201, 169, 110, 0.4);
}

[data-theme="light"] .t-client-avatar {
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
    border-color: var(--gold);
}

/* ─────────────────────────────────────────
   MOBILE-FIRST RESPONSIVE PERFECTION
   ───────────────────────────────────────── */
@media (max-width: 900px) {

    .t-blueprint-grid,
    .t-plinth-grid,
    .t-stamp-grid,
    .t-asym-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .t-editorial-spread {
        grid-template-columns: 1fr;
    }

    .t-editorial-pane {
        border-right: none !important;
        border-bottom: 1px solid var(--border-subtle) !important;
        padding: 32px 20px;
    }

    .t-editorial-pane:last-child {
        border-bottom: none !important;
    }

    .t-tab-content-card {
        padding: 30px 24px;
    }
}

@media (max-width: 600px) {
    .testimonials-switcher {
        border-radius: 14px;
        gap: 4px;
        padding: 4px;
    }

    .t-switch-btn {
        font-size: 0.68rem;
        padding: 7px 10px;
    }

    .t-blueprint-module,
    .t-plinth-card,
    .t-stamp-card,
    .t-asym-hero,
    .t-asym-companion {
        padding: 24px 20px;
    }

    .t-tabs-nav {
        border-radius: 12px;
    }

    .t-tab-item {
        font-size: 0.7rem;
        padding: 6px 12px;
    }

    .t-drawer-header {
        padding: 16px 18px;
    }

    .t-drawer-item.active .t-drawer-body {
        padding: 0 18px 18px;
    }

    .t-client-avatar.md {
        width: 54px;
        height: 54px;
        max-width: 54px;
        max-height: 54px;
    }

    .t-client-avatar.lg {
        width: 62px;
        height: 62px;
        max-width: 62px;
        max-height: 62px;
    }

    .t-client-avatar.xl {
        width: 70px;
        height: 70px;
        max-width: 70px;
        max-height: 70px;
    }

    .t-bp-body-split {
        gap: 14px;
    }

    .t-tab-split-content,
    .t-glide-content-split,
    .t-diptych-split,
    .t-editorial-body-split,
    .t-drawer-body-split {
        gap: 16px;
    }

    .t-glide-slide {
        flex: 0 0 82%;
        padding: 24px 20px;
    }

    .t-glide-track {
        gap: 14px;
    }

    .t-author-with-dp {
        gap: 10px;
    }
}