/**
 * ============================================================================
 * VIKAS DEVELOPER — DESIGN SYSTEM FOUNDATIONS (design-system.css)
 * ============================================================================
 * Scope: Global Design Tokens, Core Typography, Layout Containers, Base Buttons,
 *        Glass Surface Foundations, Badges, Tabs, and Project Card Primitives.
 *
 * SECTION INDEX:
 * 01. GLOBAL DESIGN TOKENS & CSS VARIABLES (Used by: Entire public website)
 * 02. GLOBAL TYPOGRAPHY & TEXT UTILITIES   (Used by: Entire public website)
 * 03. GLOBAL LAYOUT & CONTAINERS          (Used by: All public pages)
 * 04. BUTTONS & INTERACTIVE ACTIONS       (Used by: All public CTAs and forms)
 * 05. GLASS SURFACES & CARDS              (Used by: Reusable UI cards, modules)
 * 06. BADGES & STATUS CHIPS               (Used by: Cards, banners, headers)
 * 07. TAB NAVIGATION SYSTEMS              (Used by: Discovery filters, switchers)
 * 08. PROJECT CARD & SWIPE RAIL           (Component: project-card.php, project-rail.php)
 * 09. STATUTORY RERA COMPLIANCE           (Used by: Legal disclosures, trust boxes)
 * 10. SCROLL REVEAL & ACCESSIBILITY       (Used by: Global scroll animations)
 * ============================================================================
 */

/* ============================================================================
   01. GLOBAL DESIGN TOKENS & CSS VARIABLES
   Scope: GLOBAL
   Used by: Entire public website
   Dependencies: Shared by all views, components, and layouts.
   DO NOT remove: Essential palette, spacing, and glass tokens.
   ============================================================================ */
:root {
    /* Frozen Primary Architectural Palette */
    --color-base: #fffdfa;          /* Canonical Crisp Architectural Canvas */
    --color-base-rgb: 255, 253, 250;
    --color-ink: #1C2B24;           /* Deep Forest / Ink */
    --color-ink-rgb: 28, 43, 36;
    --color-ink-secondary: #4D5952;
    --color-ink-muted: #5E6C65;
    --color-ink-light: #7A8981;

    /* Light-on-Dark Semantic Tokens (For deep green / dark surfaces) */
    --color-on-dark: #FFFDF8;               /* High-contrast crisp warm white (WCAG AAA >= 13.8:1 against #1C2B24) */
    --color-on-dark-secondary: #E8E3DB;     /* High-contrast soft beige-stone (WCAG AAA >= 11.2:1 against #1C2B24) */
    --color-on-dark-muted: #BDB4A4;         /* Muted warm grey (WCAG AA >= 7.0:1 against #1C2B24) */
    --color-on-dark-border: rgba(226, 222, 213, 0.22); /* Subtle hairline rule on dark */
    --color-on-dark-border-strong: rgba(226, 222, 213, 0.45);
    --color-on-dark-surface: rgba(255, 255, 255, 0.05); /* Faint elevated surface on dark */
    --color-on-dark-surface-hover: rgba(255, 255, 255, 0.09);
    --color-on-dark-accent: #D4AF37;        /* Vikas Heritage Gold on Dark (WCAG AA >= 6.7:1 against #1C2B24) */

    /* Base Surfaces */
    --color-surface: #FFFFFF;       /* Pure White Content Sheet */
    --color-surface-hover: #FCFAF7;
    --color-subtle: #F4EFE6;
    --color-muted: #E8E2D8;

    /* Heritage Architectural Gold */
    --color-accent: #8A732C;        /* Muted Architectural Gold */
    --color-accent-rgb: 138, 115, 44;
    --color-accent-hover: #735F23;
    --color-accent-light: #F4EEDC;
    --color-accent-subtle: rgba(138, 115, 44, 0.08);
    --color-accent-glow: rgba(138, 115, 44, 0.15);
    --color-accent-warm: #B5502E;   /* Terracotta Brick Accent */

    /* Statutory MahaRERA & Compliance Gold (Strict Isolation) */
    --color-signal: #B08D4F;        /* Compliance Gold */
    --color-signal-bg: #FAF6ED;     /* Statutory Parchment Surface */

    /* Neutral Stone & Structural Borders */
    --color-neutral: #8A8378;       /* Slate Taupe Neutral */
    --color-border: #E2DED5;        /* Hairline 1px Rule */
    --color-border-strong: #CFC4B2;
    --color-border-subtle: #EFECE6;

    /* Semantic States */
    --color-success: #1E6B47;
    --color-success-bg: rgba(30, 107, 71, 0.08);
    --color-error: #991B1B;
    --color-error-bg: rgba(153, 27, 27, 0.08);
    --color-warning: #B45309;
    --color-warning-bg: rgba(180, 83, 9, 0.08);

    /* Typography Font Stacks */
    --font-display: 'Fraunces', 'Newsreader', Georgia, serif;
    --font-heading: 'Fraunces', 'Newsreader', Georgia, serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-mono: 'JetBrains Mono', 'SFMono-Regular', Consolas, monospace;
    --font-devanagari: 'Noto Sans Devanagari', var(--font-body);

    /* Centralized Typography Scale Tokens (VIKAS-GLOBAL-TYPOGRAPHY-SCALE-01 - Refined Compact Luxury) */
    --text-display-2xl: clamp(1.55rem, 1.6vw + 0.75rem, 2.25rem);  /* H1 Hero Title (Desktop Max: ~36px, Mobile: ~25px) */
    --text-display-xl:  clamp(1.4rem, 1.3vw + 0.65rem, 1.95rem);   /* H1 Page Title / Editorial (Desktop Max: ~31px, Mobile: ~22px) */
    --text-display-lg:  clamp(1.15rem, 0.9vw + 0.55rem, 1.55rem);  /* H2 Section Headings (Desktop Max: ~25px, Mobile: ~18px) */
    --text-display-md:  clamp(1.0rem, 0.45vw + 0.55rem, 1.25rem);  /* H3 Card / Sub-Headings (Desktop Max: ~20px, Mobile: ~16px) */
    --text-display-sm:  clamp(0.875rem, 0.25vw + 0.55rem, 1.05rem);/* H4 Minor Headings (Desktop Max: ~17px, Mobile: ~14px) */

    /* Body & Microcopy Tokens */
    --text-lead:    clamp(0.925rem, 0.2vw + 0.725rem, 1.025rem);    /* Lead Paragraphs (14.8px to 16.4px) */
    --text-body-lg: 0.975rem;                                       /* Large Body Text (15.6px) */
    --text-body:    0.925rem;                                       /* Canonical Body Default (14.8px) */
    --text-body-sm: 0.825rem;                                       /* Small Body Text (13.2px) */
    --text-meta:    0.75rem;                                        /* Metadata & Captions (12px) */
    --text-label:   0.6875rem;                                      /* Eyebrow Labels & Badges (11px) */

    /* Line Heights */
    --leading-none:    1.0;
    --leading-tight:   1.15;
    --leading-snug:    1.25;
    --leading-normal:  1.6;
    --leading-relaxed: 1.7;

    /* Layout Dimensions */
    --site-header-height: 68px;
    --container-max: 1240px;
    --container-narrow: 900px;
    --container-wide: 1360px;

    /* Spacing Scale */
    --space-2xs: 0.25rem;
    --space-xs:  0.5rem;
    --space-sm:  0.75rem;
    --space-md:  1rem;
    --space-lg:  1.5rem;
    --space-xl:  2rem;
    --space-2xl: 3rem;
    --space-3xl: 4.5rem;

    /* Micro-Radii */
    --radius-xs: 2px;
    --radius-sm: 4px;
    --radius-md: 6px;
    --radius-lg: 6px;
    --radius-pill: 9999px;

    /* Shadows & Elevations */
    --shadow-xs: 0 1px 3px rgba(28, 43, 36, 0.04);
    --shadow-sm: 0 2px 8px rgba(28, 43, 36, 0.05);
    --shadow-md: 0 6px 20px rgba(28, 43, 36, 0.07);
    --shadow-lg: 0 12px 36px rgba(28, 43, 36, 0.10);
    --shadow-gold: 0 6px 20px rgba(138, 115, 44, 0.15);

    /* Standardized Micro-Interaction Transitions (180–240ms) */
    --transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-base: 240ms cubic-bezier(0.16, 1, 0.3, 1);
    --transition-slow: 280ms cubic-bezier(0.16, 1, 0.3, 1);

    /* Vikas Glass Surface System (Apple-inspired architectural frosted glass) */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.65);
    --glass-border-subtle: rgba(226, 222, 213, 0.65);
    --glass-blur: 18px;
    --glass-shadow: 0 8px 30px rgba(28, 43, 36, 0.04), 0 1px 2px rgba(28, 43, 36, 0.02);
    --glass-shadow-hover: 0 12px 32px rgba(28, 43, 36, 0.08);

    --glass-subtle-bg: rgba(255, 255, 255, 0.52);
    --glass-subtle-border: rgba(226, 222, 213, 0.50);
    --glass-subtle-blur: 12px;

    --glass-image-bg: rgba(28, 43, 36, 0.78);
    --glass-image-border: rgba(255, 255, 255, 0.14);
    --glass-image-blur: 16px;

    /* Apple-Style Frosted Glass Tokens (Translucent Brand Base with Hairline Border & Lifted Elevation) */
    --glass-frosted-bg: rgba(255, 253, 250, 0.78);          /* Brand off-white base with high translucency */
    --glass-frosted-bg-hover: rgba(255, 255, 255, 0.92);
    --glass-frosted-border: rgba(255, 255, 255, 0.85);        /* 1px light specular highlight hairline */
    --glass-frosted-border-outer: rgba(226, 222, 213, 0.55);  /* Subtle structural boundary */
    --glass-frosted-blur: 18px;                              /* Apple 16-20px diffusion */
    --glass-frosted-shadow: 0 10px 30px -5px rgba(28, 43, 36, 0.06), 0 4px 12px -2px rgba(28, 43, 36, 0.03), inset 0 1px 1px 0 rgba(255, 255, 255, 0.9);
    --glass-frosted-shadow-hover: 0 16px 36px -6px rgba(28, 43, 36, 0.12), 0 6px 16px -3px rgba(28, 43, 36, 0.05), inset 0 1px 1px 0 rgba(255, 255, 255, 0.95);
    /* Vikas Design System Compatibility Aliases */
    --vd-warm-ivory: #FFFDF8;
    --vd-forest-ink: #1C2B24;
    --vd-champagne: #8A732C;
    --vd-hairline: #E2DED5;
    --vd-hairline-strong: #CFC4B2;
    --vd-text-secondary: #4D5952;
    --vd-text-muted: #738077;
    --vd-z-header: 1000;
    --vd-transition-fast: 180ms cubic-bezier(0.16, 1, 0.3, 1);
    --vd-transition-base: 240ms cubic-bezier(0.16, 1, 0.3, 1);
    --vd-shadow-editorial: 0 4px 20px rgba(28, 43, 36, 0.06);
}

/* ============================================================================
   02. GLOBAL TYPOGRAPHY & TEXT UTILITIES
   Scope: GLOBAL
   Used by: Entire public website
   Dependencies: Fraunces (Headings), Inter (Body), JetBrains Mono (Codes)
   ============================================================================ */
.font-display {
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

.font-heading {
    font-family: var(--font-heading);
}

.font-body {
    font-family: var(--font-body);
}

.font-mono {
    font-family: var(--font-mono);
}

.font-devanagari {
    font-family: var(--font-devanagari);
}

/* Semantic Typography Utility Classes (Enforcing Global Maximums) */
.type-h1, .hero-title, .page-title {
    font-family: var(--font-display);
    font-size: var(--text-display-xl);
    line-height: var(--leading-tight, 1.15);
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--color-ink);
}

.type-h2, .section-title {
    font-family: var(--font-display);
    font-size: var(--text-display-lg);
    line-height: var(--leading-snug, 1.25);
    font-weight: 700;
    letter-spacing: -0.015em;
    color: var(--color-ink);
}

.type-h3 {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    line-height: var(--leading-snug, 1.3);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-ink);
}

.card-title {
    font-family: var(--font-display);
    font-size: var(--text-display-md);
    line-height: var(--leading-snug, 1.3);
    font-weight: 600;
    color: var(--color-ink);
}

.type-h4 {
    font-family: var(--font-display);
    font-size: var(--text-display-sm);
    line-height: 1.35;
    font-weight: 600;
    color: var(--color-ink);
}

.eyebrow {
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 800;
    color: var(--color-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-block;
    margin-bottom: 0.5rem;
}

.text-lead {
    font-size: var(--text-lead);
    color: var(--color-ink-secondary);
    line-height: 1.65;
}

.text-muted {
    color: var(--color-neutral);
}

.text-ink {
    color: var(--color-ink);
}

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

/* ============================================================================
   03. GLOBAL LAYOUT CONTAINERS & SECTION SPACING
   Scope: GLOBAL
   Used by: All public pages
   Purpose: Standardizes page widths, responsive padding, and vertical rhythm.
   ============================================================================ */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: 1.25rem;
    padding-right: 1.25rem;
}

.container-narrow {
    max-width: var(--container-narrow);
}

.container-wide {
    max-width: var(--container-wide);
}

.section {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.section-padding {
    padding-top: clamp(3.5rem, 6vw, 5.5rem);
    padding-bottom: clamp(3.5rem, 6vw, 5.5rem);
}

.section-padding-sm {
    padding-top: clamp(2rem, 3.5vw, 3rem);
    padding-bottom: clamp(2rem, 3.5vw, 3rem);
}

.section-padding-lg {
    padding-top: clamp(4.5rem, 8vw, 7rem);
    padding-bottom: clamp(4.5rem, 8vw, 7rem);
}

/* Responsive Display Utility Classes */
.hidden-desktop {
    display: none !important;
}

@media (max-width: 767px) {
    .hidden-desktop {
        display: block !important;
    }
    .hidden-mobile {
        display: none !important;
    }
}

@media (min-width: 768px) {
    .hidden-desktop {
        display: none !important;
    }
    .hidden-tablet-desktop {
        display: none !important;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    .hidden-tablet {
        display: none !important;
    }
}

/* ============================================================================
   04. BUTTONS & INTERACTIVE ACTIONS
   Scope: GLOBAL
   Used by: All public CTAs, forms, and interactive buttons
   Rule: Maintain single primary action per section to avoid CTA competition.
   ============================================================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: var(--font-body);
    font-weight: 700;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    transition: background-color var(--transition-fast), 
                border-color var(--transition-fast), 
                color var(--transition-fast), 
                transform var(--transition-fast), 
                box-shadow var(--transition-fast);
    position: relative;
    overflow: hidden;
}

.btn-lg {
    padding: 0.85rem 1.65rem;
    font-size: 0.9375rem;
}

.btn-md {
    padding: 0.7rem 1.25rem;
    font-size: 0.875rem;
}

.btn-sm {
    padding: 0.45rem 0.85rem;
    font-size: 0.775rem;
}

/* Primary Gold Action Button with Subtle Sheen on Hover */
.btn-accent {
    background-color: var(--color-accent);
    color: #FFFFFF !important;
    border-color: var(--color-accent);
    box-shadow: 0 2px 8px rgba(138, 115, 44, 0.2);
}
.btn-accent:hover,
.btn-accent:focus-visible {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
    transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(138, 115, 44, 0.28);
}
.btn-accent::after {
    content: '';
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);
    transform: skewX(-20deg);
    transition: left 0.6s ease;
    pointer-events: none;
}
.btn-accent:hover::after {
    left: 140%;
}

/* Outline Ink Action Button */
.btn-outline-ink {
    background-color: transparent;
    color: var(--color-ink) !important;
    border-color: var(--color-ink);
}
.btn-outline-ink:hover,
.btn-outline-ink:focus-visible {
    background-color: var(--color-ink);
    color: var(--color-base) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-sm);
}

/* Outline Light Button (For Dark Contexts) */
.btn-outline-light {
    background-color: transparent;
    color: #FAF7F2 !important;
    border: 1px solid rgba(250, 247, 242, 0.4);
}
.btn-outline-light:hover,
.btn-outline-light:focus-visible {
    background-color: #FAF7F2;
    color: var(--color-ink) !important;
    border-color: #FAF7F2;
    transform: translateY(-2px);
}

/* Subtle Link Button */
.btn-subtle {
    background-color: transparent;
    color: var(--color-ink-secondary);
    border-color: var(--color-border);
}
.btn-subtle:hover,
.btn-subtle:focus-visible {
    background-color: var(--color-surface);
    color: var(--color-ink);
    border-color: var(--color-border-strong);
    transform: translateY(-1px);
}

.btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ============================================================================
   05. GLASS SURFACES & CARD FOUNDATIONS
   Scope: GLOBAL / REUSABLE COMPONENTS
   Used by: Project cards, commercial cards, calculator containers, trust cards
   Rule: Use only 3 standardized glass classes (.glass, .glass-subtle, .glass-image).
   ============================================================================ */

/* 1. Base Glass Surface (Standard Bounded Cards / Panels) */
.glass {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-subtle);
    box-shadow: var(--glass-shadow);
}

/* 2. Subtle Glass Surface (Tools, Specs, Amenities, Calculators, Guides) */
.glass-subtle {
    background-color: var(--glass-subtle-bg);
    backdrop-filter: blur(var(--glass-subtle-blur));
    -webkit-backdrop-filter: blur(var(--glass-subtle-blur));
    border: 1px solid var(--glass-subtle-border);
}

/* 3. Image Glass Surface (Overlays over Media / Cinematic Hero) */
.glass-image {
    background-color: var(--glass-image-bg);
    backdrop-filter: blur(var(--glass-image-blur));
    -webkit-backdrop-filter: blur(var(--glass-image-blur));
    border: 1px solid var(--glass-image-border);
    color: #FFFFFF;
}

/* 4. Apple-Style Frosted Glass Card / Stat Panels (Architectural Translucency) */
.card-glass-frosted,
.glass-frosted {
    background-color: var(--glass-frosted-bg);
    backdrop-filter: blur(var(--glass-frosted-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-frosted-blur)) saturate(180%);
    border: 1px solid var(--glass-frosted-border);
    box-shadow: var(--glass-frosted-shadow);
    border-radius: var(--radius-sm);
    position: relative;
    transition: transform var(--transition-base), 
                border-color var(--transition-base), 
                box-shadow var(--transition-base),
                background-color var(--transition-base);
}

.card-glass-frosted:hover,
.glass-frosted:hover {
    transform: translateY(-2px);
    background-color: var(--glass-frosted-bg-hover);
    border-color: var(--color-accent);
    box-shadow: var(--glass-frosted-shadow-hover);
}

/* Dark Frosted Glass Surface (For deep charcoal / forest overlays) */
.card-glass-frosted--dark,
.glass-frosted--dark {
    background-color: var(--glass-frosted-dark-bg);
    backdrop-filter: blur(var(--glass-frosted-blur)) saturate(180%);
    -webkit-backdrop-filter: blur(var(--glass-frosted-blur)) saturate(180%);
    border: 1px solid var(--glass-frosted-dark-border);
    box-shadow: var(--glass-frosted-dark-shadow);
    color: var(--color-on-dark);
}

@supports not (backdrop-filter: blur(10px)) {
    .glass { background-color: #FFFFFF; }
    .glass-subtle { background-color: var(--color-surface); }
    .glass-image { background-color: rgba(28, 43, 36, 0.94); }
    .card-glass-frosted,
    .glass-frosted { background-color: var(--color-base); }
    .card-glass-frosted--dark,
    .glass-frosted--dark { background-color: var(--color-ink); }
}

@media (max-width: 768px) {
    :root {
        --glass-blur: 10px;
        --glass-subtle-blur: 8px;
        --glass-image-blur: 10px;
        --glass-frosted-blur: 14px;
    }
}

.card {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-sm);
    padding: 1.5rem;
    box-shadow: var(--glass-shadow);
    transition: transform var(--transition-base), 
                border-color var(--transition-base), 
                box-shadow var(--transition-base),
                background-color var(--transition-base);
}

.card-hover:hover {
    transform: translateY(-3px);
    background-color: rgba(255, 255, 255, 0.88);
    border-color: var(--color-accent);
    box-shadow: var(--glass-shadow-hover);
}

.card-base {
    background-color: var(--color-base);
}

/* Image Micro-Zoom Container */
.img-zoom-wrap {
    overflow: hidden;
    position: relative;
    border-radius: var(--radius-sm);
}

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

.img-zoom-wrap:hover .img-zoom {
    transform: scale(1.025);
}

/* ============================================================================
   06. BADGES, CHIPS & STATUS PILLS
   Scope: COMPONENT / REUSABLE
   Used by: Project cards, commercial highlights, statutory indicators
   ============================================================================ */
.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-family: var(--font-body);
    font-size: var(--text-label);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-xs);
    line-height: 1;
}

.badge-accent {
    background-color: var(--color-accent-subtle);
    color: var(--color-accent);
    border: 1px solid rgba(138, 115, 44, 0.3);
}

.badge-ink {
    background-color: var(--color-ink);
    color: #FFFFFF;
}

.badge-stone {
    background-color: var(--color-base-alt);
    color: var(--color-neutral);
    border: 1px solid var(--color-border);
}

.badge-success {
    background-color: var(--color-success-bg);
    color: var(--color-success);
    border: 1px solid rgba(30, 107, 71, 0.3);
}

/* ============================================================================
   07. TAB NAVIGATION SYSTEMS
   Scope: COMPONENT
   Used by: Property discovery, filter headers, gallery categories
   ============================================================================ */
.tab-nav {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 0.5rem;
    overflow-x: auto;
    scrollbar-width: none;
}
.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    font-family: var(--font-body);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-ink-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    padding: 0.6rem 1.15rem;
    cursor: pointer;
    transition: color var(--transition-fast), border-color var(--transition-fast);
    white-space: nowrap;
}

.tab-btn:hover {
    color: var(--color-ink);
}

.tab-btn.is-active {
    color: var(--color-ink);
    border-bottom-color: var(--color-accent);
}

.tab-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Reusable Accordions & FAQ System */
.accordion-item {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color var(--transition-fast);
}

.accordion-item[open] {
    border-color: var(--color-accent);
}

.accordion-summary {
    padding: 1.15rem 1.5rem;
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--color-ink);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    list-style: none;
}
.accordion-summary::-webkit-details-marker {
    display: none;
}

.accordion-chevron {
    color: var(--color-accent);
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform var(--transition-fast);
    display: inline-block;
}

.accordion-item[open] .accordion-chevron {
    transform: rotate(45deg);
}

.accordion-content {
    padding: 0 1.5rem 1.25rem;
    font-size: 0.9rem;
    color: var(--color-ink-secondary);
    line-height: 1.65;
    border-top: 1px solid var(--color-border-subtle);
    margin-top: 0.35rem;
    padding-top: 0.85rem;
}

/* Reusable Form Inputs */
.form-group {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 1.15rem;
}

.form-label {
    font-size: 0.825rem;
    font-weight: 700;
    color: var(--color-ink);
}

.form-input,
.form-select,
.form-textarea {
    width: 100%;
    padding: 0.75rem 0.85rem;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: var(--font-body);
    color: var(--color-ink);
    background: #FFFFFF;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px var(--color-accent-glow);
    outline: none;
}

/* Reusable Breadcrumb Trail */
.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 0.825rem;
    color: var(--color-neutral);
}

.breadcrumb a {
    color: var(--color-neutral);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb a:hover {
    color: var(--color-accent);
    text-decoration: underline;
}

.breadcrumb-sep {
    margin: 0 0.4rem;
    color: var(--color-neutral);
}

.breadcrumb-current {
    color: var(--color-ink);
    font-weight: 600;
}

/* Reusable Metric Cell */
.stat-card {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    padding: 1.25rem;
}

.stat-value {
    font-family: var(--font-display);
    font-size: clamp(1.65rem, 2vw + 0.6rem, 2.15rem);
    font-weight: 800;
    color: var(--color-accent);
    line-height: 1.1;
    margin: 0.25rem 0;
}

.stat-label {
    font-size: 0.725rem;
    font-weight: 700;
    color: var(--color-neutral);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* ============================================================================
   08. PROJECT CARD & SWIPE RAIL PRIMITIVES
   Scope: COMPONENT
   Components: views/components/project-card.php, views/components/project-rail.php
   Used by: /, /projects, /commercial, /projects/{slug}
   Purpose: Canonical 16:10 ratio project card with frosted tactile info surface.
   ============================================================================ */

/* Standardized 6-Element Scan-Friendly Project Card */
.project-card {
    position: relative;
    display: flex;
    flex-direction: column;
    height: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 220ms ease, border-color 220ms ease;
    user-select: none;
}

.project-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 50%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(197, 160, 89, 0.08), transparent);
    transform: skewX(-25deg);
    transition: left 0.6s ease;
    pointer-events: none;
    z-index: 5;
}

.project-card:hover {
    transform: translateY(-3px);
    border-color: var(--color-accent);
    box-shadow: var(--glass-shadow-hover);
}

.project-card:hover::before {
    left: 150%;
}

.project-card__media {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background-color: var(--color-subtle);
    border-bottom: 1px solid var(--color-border);
}

.project-card__media a {
    display: block;
    width: 100%;
    height: 100%;
}

.project-card__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 35%;
    display: block;
    transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__image {
    transform: scale(1.015);
}

.project-card__badges {
    position: absolute;
    top: 0.75rem;
    left: 0.75rem;
    right: 0.75rem;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    pointer-events: none;
    gap: 0.5rem;
    z-index: 2;
}

.project-card__badge-tag {
    background: rgba(28, 43, 36, 0.88);
    color: #FFFFFF;
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.project-card__badge-status {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.55rem;
    border-radius: var(--radius-sm);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.project-card__badge-status.is-ongoing {
    background: rgba(138, 115, 44, 0.92);
    color: #FFFFFF;
}

.project-card__badge-status.is-delivered {
    background: rgba(30, 41, 59, 0.9);
    color: #FFFFFF;
}

.project-card__body {
    background-color: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border-top: 1px solid var(--glass-border-subtle);
    padding: 1.25rem 1.35rem;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    justify-content: space-between;
    transition: background-color var(--transition-base);
}

.project-card:hover .project-card__body {
    background-color: rgba(255, 255, 255, 0.88);
}

.project-card__location {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    color: var(--color-accent);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 0.35rem;
}

.project-card__title {
    font-size: 1.1875rem;
    color: var(--color-ink);
    margin: 0 0 0.35rem;
    line-height: 1.25;
}

.project-card__title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.15s ease;
}

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

.project-card__facts {
    font-size: 0.825rem;
    font-weight: 600;
    color: var(--color-ink-secondary);
    line-height: 1.4;
    margin-bottom: 0.85rem;
}

.project-card__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 0.75rem;
    border-top: 1px solid var(--color-border);
    gap: 0.75rem;
}

.project-card__price {
    display: flex;
    flex-direction: column;
}

.project-card__price-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--color-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.project-card__price-value {
    font-size: 0.875rem;
    font-weight: 700;
    color: var(--color-ink);
    white-space: nowrap;
}

.project-card__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    margin-left: auto;
    transition: color 0.15s ease;
}

.project-card__cta-arrow {
    transition: transform 220ms cubic-bezier(0.16, 1, 0.3, 1);
}

.project-card:hover .project-card__cta-arrow {
    transform: translateX(4px);
}

/* Reusable Horizontal Project Swipe Rail */
.project-rail {
    position: relative;
    width: 100%;
    margin: 2rem 0 2.5rem;
}

.project-rail__header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 1.25rem;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.project-rail__header-text {
    max-width: 720px;
}

.project-rail__eyebrow {
    margin-bottom: 0.35rem;
    display: block;
}

.project-rail__title {
    font-size: var(--text-display-lg);
    color: var(--color-ink);
    line-height: 1.2;
    margin: 0;
}

.project-rail__lead {
    font-size: 0.95rem;
    color: var(--color-ink-secondary);
    line-height: 1.55;
    margin-top: 0.5rem;
}

.project-rail__actions {
    display: flex;
    align-items: center;
    gap: 1.25rem;
}

.project-rail__see-all {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--color-accent);
    text-decoration: none;
    white-space: nowrap;
    transition: color 0.15s ease, transform 0.15s ease;
}

.project-rail__see-all:hover {
    color: var(--color-accent-hover);
    transform: translateX(2px);
}

.project-rail__controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.project-rail__btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
}

.project-rail__btn:hover:not(:disabled) {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-accent);
    transform: translateY(-1px);
}

.project-rail__btn:active:not(:disabled) {
    transform: translateY(0);
}

.project-rail__btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    border-color: var(--color-border);
}

/* Track Viewport */
.project-rail__viewport {
    width: 100%;
    overflow: hidden;
    position: relative;
    outline: none;
}

.project-rail__viewport:focus-visible {
    outline: 2px solid var(--color-accent);
    border-radius: var(--radius-sm);
}

.project-rail__track {
    display: flex;
    gap: 1.5rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding: 0.5rem 0 1rem 0;
}

.project-rail__track::-webkit-scrollbar {
    display: none;
}

/* Card slide widths providing next-card affordance */
.project-rail__slide {
    flex: 0 0 34%;
    scroll-snap-align: start;
    scroll-snap-stop: normal;
    display: flex;
}

.project-rail__slide > * {
    width: 100%;
}

@media (max-width: 1024px) {
    .project-rail__slide {
        flex: 0 0 49%;
    }
}

@media (max-width: 640px) {
    .project-rail__slide {
        flex: 0 0 85%;
    }
    .project-rail__track {
        gap: 1rem;
        padding-right: 1.5rem;
    }
}

/* Thin Progress Line Indicator */
.project-rail__progress {
    margin-top: 0.75rem;
    padding: 0 0.25rem;
}

.project-rail__progress-bar {
    position: relative;
    width: 100%;
    height: 2px;
    background: var(--color-border);
    border-radius: 999px;
    overflow: visible;
}

.project-rail__progress-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 25%;
    background: var(--color-accent);
    border-radius: 999px;
    transition: transform 0.12s ease-out, width 0.2s ease;
}

.project-rail__progress-indicator::after {
    content: '';
    position: absolute;
    right: -3px;
    top: -3px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-accent);
    box-shadow: 0 0 0 2px var(--color-surface);
}

/* Standardized Project Filters Bar */
.project-filters {
    margin-bottom: 1.5rem;
}

.project-filters__track {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.project-filters__btn {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-ink-secondary);
    font-size: 0.8rem;
    font-weight: 700;
    padding: 0.45rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: all 0.18s ease;
    white-space: nowrap;
}

.project-filters__btn:hover {
    border-color: var(--color-accent);
    color: var(--color-accent);
    background: var(--color-accent-subtle);
}

.project-filters__btn.is-active {
    background: var(--color-ink);
    color: #FFFFFF;
    border-color: var(--color-ink);
    box-shadow: var(--shadow-sm);
}

/* ========================================================================= */
/* 9. EDITORIAL 7:5 ASYMMETRIC SPREADS & ARCHITECTURAL TYPOLOGIES           */
/* ========================================================================= */
.editorial-split-7-5 {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 3.5rem;
    align-items: center;
}

@media (max-width: 1024px) {
    .editorial-split-7-5 {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Commercial Typology Architectural Slices */
.typology-slice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    margin: 2rem 0;
}

.typology-slice {
    background: var(--glass-bg);
    backdrop-filter: blur(var(--glass-blur));
    -webkit-backdrop-filter: blur(var(--glass-blur));
    border: 1px solid var(--glass-border-subtle);
    border-radius: var(--radius-sm);
    padding: 2.5rem 2rem;
    position: relative;
    overflow: hidden;
    box-shadow: var(--glass-shadow);
    transition: border-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    text-decoration: none;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.typology-slice:hover {
    background: rgba(255, 255, 255, 0.88);
    border-color: var(--color-accent);
    transform: translateY(-2px);
    box-shadow: var(--glass-shadow-hover);
}

@media (max-width: 768px) {
    .typology-slice-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .typology-slice {
        padding: 1.75rem 1.25rem;
    }
}

/* ============================================================================
   09. STATUTORY RERA COMPLIANCE CONTAINERS
   Scope: COMPLIANCE / ISOLATED
   Used by: MahaRERA trust badges, statutory registration boxes, footer disclosures
   Rule: DO NOT apply frosted glass or background blur to statutory containers.
   ============================================================================ */
.statutory-rera-box {
    background: var(--color-signal-bg, #FAF6ED);
    border: 1px solid var(--color-signal, #B08D4F);
    border-radius: var(--radius-sm);
    padding: 1.5rem 1.75rem;
}

/* ============================================================================
   10. SCROLL REVEAL & ACCESSIBILITY
   Scope: GLOBAL MOTION & ACCESSIBILITY
   Used by: Entire public website (IntersectionObserver triggers)
   Timing: 450–650ms quiet arrival with 14px translateY
   Dependencies: public/assets/js/app.js (IntersectionObserver)
   Rule: Fully disabled under @media (prefers-reduced-motion: reduce).
   ============================================================================ */
html.js .reveal-on-scroll:not(.is-revealed),
html.js [data-reveal]:not(.is-revealed),
html.js [data-reveal-group]:not(.is-revealed) > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

/* Staggered Child Reveal Timing (60–90ms spacing) */
[data-reveal-group] > *:nth-child(1) { transition-delay: 0ms; }
[data-reveal-group] > *:nth-child(2) { transition-delay: 75ms; }
[data-reveal-group] > *:nth-child(3) { transition-delay: 150ms; }
[data-reveal-group] > *:nth-child(4) { transition-delay: 225ms; }
[data-reveal-group] > *:nth-child(5) { transition-delay: 300ms; }
[data-reveal-group] > *:nth-child(6) { transition-delay: 375ms; }

.reveal-on-scroll.is-revealed,
[data-reveal].is-revealed,
[data-reveal-group].is-revealed > * {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 550ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 550ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Subtle Image Reveal */
html.js .img-reveal:not(.is-revealed) {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

.img-reveal.is-revealed {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity 650ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 650ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* Fallback: No-JS environments show all content immediately */
html.no-js .reveal-on-scroll,
html.no-js [data-reveal],
html.no-js [data-reveal-group] > *,
html.no-js .img-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
}

/* Accessibility: prefers-reduced-motion disables all movement */
@media (prefers-reduced-motion: reduce) {
    .reveal-on-scroll,
    [data-reveal],
    [data-reveal-group] > *,
    .img-reveal,
    .project-card,
    .project-card__image,
    .project-card__cta-arrow {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        will-change: auto !important;
    }
}

/* ============================================================================
   11. DESKTOP FLOATING CONCIERGE DOCK (Compact Icon-First Expandable Actions)
   ============================================================================ */
.desktop-concierge-dock {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    z-index: 1050;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(28, 43, 36, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    padding: 0.3rem 0.35rem;
    border-radius: 999px;
    border: 1px solid var(--color-on-dark-border, rgba(226, 222, 213, 0.22));
    box-shadow: 0 6px 20px rgba(18, 27, 22, 0.22);
    transition: border-color 0.28s ease, box-shadow 0.28s ease;
}

.desktop-concierge-dock:hover {
    border-color: rgba(212, 175, 55, 0.45);
    box-shadow: 0 8px 28px rgba(18, 27, 22, 0.30);
}

.concierge-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 38px;
    min-width: 38px;
    padding: 0 10px;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 700;
    text-decoration: none;
    cursor: pointer;
    border: none;
    transition: background-color 0.28s ease, color 0.28s ease, transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
}

.concierge-btn svg {
    flex-shrink: 0;
    display: block;
}

.concierge-label {
    display: inline-block;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    margin-left: 0;
    transition: max-width 300ms cubic-bezier(0.16, 1, 0.3, 1),
                opacity 260ms ease,
                margin-left 300ms cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-body, 'Inter', sans-serif);
    font-size: 0.775rem;
    font-weight: 700;
    letter-spacing: 0.02em;
}

.concierge-btn:hover,
.concierge-btn:focus-visible {
    transform: translateY(-1px);
}

.concierge-btn:hover .concierge-label,
.concierge-btn:focus-visible .concierge-label {
    max-width: 100px;
    opacity: 1;
    margin-left: 0.45rem;
}

.concierge-btn:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.concierge-btn--wa {
    background: rgba(37, 211, 102, 0.15);
    color: #25D366;
    border: 1px solid rgba(37, 211, 102, 0.3);
}

.concierge-btn--wa:hover,
.concierge-btn--wa:focus-visible {
    background: #25D366;
    color: #0E1612;
    border-color: #25D366;
}

.concierge-btn--enquire {
    background: var(--color-accent, #8A732C);
    color: #FFFFFF;
    border: 1px solid transparent;
}

.concierge-btn--enquire:hover,
.concierge-btn--enquire:focus-visible {
    background: var(--color-accent-hover, #735F23);
    color: #FFFFFF;
}

.concierge-btn--call {
    background: rgba(255, 255, 255, 0.12);
    color: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.concierge-btn--call:hover,
.concierge-btn--call:focus-visible {
    background: rgba(255, 255, 255, 0.25);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.45);
}

.desktop-concierge-dock.is-suspended,
.mobile-conversion-dock.is-suspended {
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(16px) !important;
}

.desktop-concierge-dock.is-contextual {
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 300ms cubic-bezier(0.16, 1, 0.3, 1),
                transform 300ms cubic-bezier(0.16, 1, 0.3, 1),
                border-color 0.28s ease,
                box-shadow 0.28s ease;
}

.desktop-concierge-dock.is-contextual.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.mobile-conversion-dock.is-contextual {
    opacity: 0;
    pointer-events: none;
    transform: translateY(100%);
    transition: opacity 280ms ease, transform 280ms cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-conversion-dock.is-contextual.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

@media (max-width: 767px) {
    .desktop-concierge-dock {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .concierge-btn,
    .concierge-label,
    .desktop-concierge-dock,
    .mobile-conversion-dock {
        transition: none !important;
        transform: none !important;
    }
}





/* ============================================================================
   11. SCROLL ARCHITECTURE
   Scope: GLOBAL — same-page anchor navigation and scroll-spy
   Used by: All pages with section navigation, TOC, or anchor links.
   ============================================================================ */

/**
 * --scroll-offset: The offset applied to anchor targets to account for the
 * sticky navigation bar. Ensures section headings are not hidden beneath the
 * fixed nav when scrolled to via an anchor link or smooth scroll.
 *
 * Adjust this value if the sticky nav height changes.
 * Default: 80px (matches the main navigation bar height).
 */
:root {
    --scroll-offset: 80px;
}

/**
 * .scroll-target: Apply to any element that is the target of a same-page
 * anchor link (e.g. <section id="section-name" class="scroll-target">).
 * This ensures the section heading is visible below the sticky nav.
 */
.scroll-target {
    scroll-margin-top: var(--scroll-offset);
}

/**
 * Smooth scroll for intentional same-page navigation only.
 * Applied globally but respects prefers-reduced-motion below.
 */
html {
    scroll-behavior: smooth;
}

/**
 * Disable smooth scroll for users who prefer reduced motion.
 * This overrides the global scroll-behavior: smooth above.
 */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}