/* ==========================================================================
   1. Design System & CSS Variables
   ========================================================================== */
:root {
    --gold-accent: #f59e0b;
    --gold-light: #fbbf24;
    --gold-dark: #d97706;
    --blue-accent: #3b82f6;
    --dark-bg: #0f172a;
    --dark-glass: rgba(15, 23, 42, 0.75);
    --border-radius-sm: 8px;
    --border-radius-md: 12px;
    --border-radius-lg: 16px;
    --transition-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* ==========================================================================
   2. Global Reset & Base Typography
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

.Yeshiwas-Text {
    font-family: 'Courier New', Courier, monospace;
    font-style: oblique;
    font-size: 200%;
    margin-right: 2%;
}

.Yestext {
    color: var(--gold-accent);
}

.Office-Text {
    letter-spacing: 11px;
    font-family: 'Courier New', Courier, monospace;
}

/* --- Navigation --- */
nav ul li a:hover {
    background-color: #0000ff;
    text-decoration: underline;
    text-underline-offset: 4px;
}

/* --- Blockquote Footer Links --- */
.blockquote-footer a {
    display: inline-block;
    color: #ffffff;
    text-decoration: none;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.blockquote-footer a:hover {
    background: linear-gradient(135deg, #f5ed08 0%, #ec4899 100%);
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent !important;
    transform: translateY(-2px);
    filter: drop-shadow(0 2px 8px rgba(60, 2, 113, 0.4));
}

/* ==========================================================================
   3. Unified Hero Action Buttons
   ========================================================================== */
.btn-hero-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none !important;
    color: #ffffff !important;
    letter-spacing: 0.3px;
    transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out, filter 0.3s ease-in-out !important;
}

.btn-hero-action .arrow-icon {
    transition: transform 0.3s ease-in-out;
}

.btn-hero-action:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 0.75rem 1.25rem rgba(0, 0, 0, 0.25) !important;
    filter: brightness(1.12) !important;
    color: #ffffff !important;
}

.btn-hero-action:hover .arrow-icon {
    transform: translateX(4px);
}

.btn-hero-action:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 0.3rem 0.6rem rgba(0, 0, 0, 0.2) !important;
}

/* --- Button Color Variants --- */
.btn-portal {
    background: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #312e81 100%) !important;
    border: 1px solid rgba(168, 85, 247, 0.5) !important;
}

.btn-portal:hover {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%) !important;
    border-color: rgba(168, 85, 247, 0.8) !important;
}

.btn-message {
    background: linear-gradient(135deg, #f97316 0%, #9333ea 100%) !important;
}

.btn-call {
    background: linear-gradient(135deg, #10b981 0%, #06b6d4 100%) !important;
}

/* ==========================================================================
   4. Specialized CTA Buttons
   ========================================================================== */

/* Consultation Button (Gold/Amber) */
.btn-consultation {
    background: linear-gradient(135deg, #f50b78 0%, #d97706 50%, #09b44b 100%) !important;
    border: 5px solid rgba(251, 191, 36, 0.5) !important;
    color: #ffffff !important;
    letter-spacing: 0.3px;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--transition-smooth),
        box-shadow 0.35s var(--transition-smooth),
        filter 0.35s ease-in-out,
        background 0.35s ease-in-out,
        border-color 0.35s ease-in-out !important;
}

.btn-consultation:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #0626d9 100%) !important;
    border-color: rgba(251, 191, 36, 0.9) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.4), 0 0 15px rgba(251, 191, 36, 0.3) !important;
    filter: brightness(1.08) !important;
    color: #ffffff !important;
}

.btn-consultation:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.3) !important;
}

/* Shared Glassmorphism Buttons (Learn More & Clients) */
.btn-learn-more,
.btn-clients {
    color: #ffffff !important;
    letter-spacing: 0.3px;
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.35s var(--transition-smooth),
        box-shadow 0.35s var(--transition-smooth),
        background 0.35s ease-in-out,
        border-color 0.35s ease-in-out !important;
}

.btn-learn-more {
    background: #008000 !important;
    border: 5px solid rgba(26, 13, 124, 0.4) !important;
}

.btn-clients {
    background: linear-gradient(135deg, #f50b78 0%, #d97706 50%, #09b44b 100%) !important;
    border: 5px solid rgba(10, 2, 68, 0.4) !important;
}

.btn-learn-more:hover,
.btn-clients:hover {
    background: linear-gradient(135deg, #06c64c 0%, #3730a3 100%) !important;
    border-color: rgba(99, 102, 241, 0.8) !important;
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 10px 25px rgba(79, 70, 229, 0.35) !important;
    color: #ffffff !important;
}

.btn-learn-more:active,
.btn-clients:active {
    transform: translateY(-1px) scale(0.99);
    box-shadow: 0 4px 12px rgba(12, 3, 170, 0.2) !important;
}

/* ==========================================================================
   5. Interactive Animated Badges
   ========================================================================== */
.hero-badge-animated {
    letter-spacing: 0.5px;
    position: relative;
    cursor: default;
    border: 1px solid rgba(255, 255, 255, 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 10px rgba(103, 8, 103, 0.3);
    transition: transform 0.35s var(--transition-smooth),
        box-shadow 0.35s ease-in-out,
        background-color 0.35s ease-in-out,
        border-color 0.35s ease-in-out !important;
}

.hero-badge-animated:hover {
    transform: translateY(-3px) scale(1.04);
    background-color: rgb(130, 12, 130) !important;
    border-color: rgba(236, 72, 153, 0.6);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25), 0 0 18px rgba(168, 85, 247, 0.5) !important;
}

/* ==========================================================================
   6. Team Cards & Swiper Navigation
   ========================================================================== */
.team-card {
    height: 460px;
    background-color: #0d1117;
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

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

.team-card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 20%, rgba(0, 0, 0, 0.85) 80%, rgba(0, 0, 0, 0.95) 100%);
    transition: background 0.4s ease;
}

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

.team-card:hover .team-card-overlay {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.1) 10%, rgba(13, 17, 23, 0.9) 75%, rgba(13, 17, 23, 0.98) 100%);
}

.swiper-nav-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #ffffff;
    color: #111827;
    z-index: 10;
    transition: all 0.3s ease;
}

.swiper-nav-btn:hover {
    background: #4f46e5;
    color: #ffffff;
    transform: translateY(-50%) scale(1.1);
}

.btn-prev {
    left: -10px;
}

.btn-next {
    right: -10px;
}

/* ==========================================================================
   7. Legal Insights Cards System
   ========================================================================== */
.insight-card {
    border-radius: var(--border-radius-lg) !important;
    background: rgba(255, 255, 255, 0.03) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s var(--transition-smooth),
        box-shadow 0.4s var(--transition-smooth),
        border-color 0.4s ease-in-out !important;
}

.insight-card:hover {
    transform: translateY(-8px) scale(1.01);
}

/* Category Accent Palette */
.insight-tech {
    border: 1px solid rgba(6, 182, 212, 0.25) !important;
}

.insight-tech .insight-badge {
    background: rgba(6, 182, 212, 0.15) !important;
    color: #22d3ee !important;
    border: 1px solid rgba(6, 182, 212, 0.3);
}

.insight-tech:hover {
    box-shadow: 0 15px 30px rgba(6, 182, 212, 0.15), 0 0 20px rgba(6, 182, 212, 0.1) !important;
    border-color: rgba(6, 182, 212, 0.6) !important;
}

.insight-tech .insight-link {
    color: #22d3ee !important;
}

.insight-realestate {
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
}

.insight-realestate .insight-badge {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #34d399 !important;
    border: 1px solid rgba(16, 185, 129, 0.3);
}

.insight-realestate:hover {
    box-shadow: 0 15px 30px rgba(16, 185, 129, 0.15), 0 0 20px rgba(16, 185, 129, 0.1) !important;
    border-color: rgba(16, 185, 129, 0.6) !important;
}

.insight-realestate .insight-link {
    color: #34d399 !important;
}

.insight-corporate {
    border: 1px solid rgba(245, 158, 11, 0.25) !important;
}

.insight-corporate .insight-badge {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3);
}

.insight-corporate:hover {
    box-shadow: 0 15px 30px rgba(245, 158, 11, 0.15), 0 0 20px rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.6) !important;
}

.insight-corporate .insight-link {
    color: #fbbf24 !important;
}

.insight-criminal {
    border: 1px solid rgba(239, 68, 68, 0.25) !important;
}

.insight-criminal .insight-badge {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3);
}

.insight-criminal:hover {
    box-shadow: 0 15px 30px rgba(239, 68, 68, 0.15), 0 0 20px rgba(239, 68, 68, 0.1) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
}

.insight-criminal .insight-link {
    color: #f87171 !important;
}

.insight-tax {
    border: 1px solid rgba(168, 85, 247, 0.25) !important;
}

.insight-tax .insight-badge {
    background: rgba(168, 85, 247, 0.15) !important;
    color: #c084fc !important;
    border: 1px solid rgba(168, 85, 247, 0.3);
}

.insight-tax:hover {
    box-shadow: 0 15px 30px rgba(168, 85, 247, 0.15), 0 0 20px rgba(168, 85, 247, 0.1) !important;
    border-color: rgba(168, 85, 247, 0.6) !important;
}

.insight-tax .insight-link {
    color: #c084fc !important;
}

.insight-investment {
    border: 1px solid rgba(99, 102, 241, 0.25) !important;
}

.insight-investment .insight-badge {
    background: rgba(99, 102, 241, 0.15) !important;
    color: #818cf8 !important;
    border: 1px solid rgba(99, 102, 241, 0.3);
}

.insight-investment:hover {
    box-shadow: 0 15px 30px rgba(99, 102, 241, 0.15), 0 0 20px rgba(99, 102, 241, 0.1) !important;
    border-color: rgba(99, 102, 241, 0.6) !important;
}

.insight-investment .insight-link {
    color: #818cf8 !important;
}

.insight-badge {
    padding: 6px 14px;
    border-radius: 50px;
    font-weight: 600;
    letter-spacing: 0.3px;
    font-size: 0.75rem;
}

.insight-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: gap 0.3s ease;
}

.link-arrow {
    transition: transform 0.3s ease;
}

.insight-card:hover .link-arrow {
    transform: translateX(6px);
}

/* ==========================================================================
   8. Hero & About Section Component Styles
   ========================================================================== */
.hero-banner-section {
    background-color: var(--dark-bg);
}

.hero-overlay {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.75) 0%, rgba(15, 23, 42, 0.90) 100%);
}

.hero-bg-img {
    transition: transform 10s ease;
}

.hero-banner-section:hover .hero-bg-img {
    transform: scale(1.05);
}

.hero-pill-badge {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;
    border-radius: 50px;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}

.badge-dot {
    width: 8px;
    height: 8px;
    background-color: var(--gold-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold-light);
}

.btn-hero-primary {
    background: linear-gradient(135deg, var(--gold-accent), var(--gold-dark));
    color: var(--dark-bg) !important;
    border: none;
    border-radius: var(--border-radius-md);
    transition: all 0.3s var(--transition-smooth);
}

.btn-hero-primary:hover {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-accent));
    transform: translateY(-3px);
    box-shadow: 0 10px 25px rgba(245, 158, 11, 0.35) !important;
}

.btn-hero-glass {
    background: rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(10px);
    color: #ffffff !important;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
}

.btn-hero-glass:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-3px);
}

.btn-hero-outline {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff !important;
    border-radius: var(--border-radius-md);
    transition: all 0.3s ease;
}

.btn-hero-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* About Section Image Wrapper */
.about-image-wrapper {
    padding: 10px;
    position: relative;
}

.about-image-backdrop {
    position: absolute;
    top: -15px;
    left: -15px;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(59, 130, 246, 0.2));
    border-radius: 24px;
    z-index: 1;
}

.about-main-img {
    max-height: 600px;
    object-fit: cover;
    transition: transform 0.4s ease;
}

.about-image-wrapper:hover .about-main-img {
    transform: translateY(-5px);
}

.bg-glass-dark {
    background: rgba(15, 23, 42, 0.85);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.bg-gold-gradient {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-accent));
}

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

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

.btn-gold-action {
    background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-dark) 100%);
    color: var(--dark-bg) !important;
    border: none;
    border-radius: var(--border-radius-md);
    transition: all 0.3s var(--transition-smooth);
    display: inline-flex;
    align-items: center;
}

.btn-gold-action:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.4) !important;
}

.btn-gold-action:hover i {
    transform: translateX(5px);
}

.btn-gold-action i {
    transition: transform 0.3s ease;
}


/* ==========================================================================
   Get in Touch Section - Smart Effects & Transitions
   ========================================================================== */

/* Variables (Ensure these match your global :root variables) */
:root {
    --gold-accent: #f59e0b;
    --gold-light: #fbbf24;
    --gold-dark: #d97706;
    --transition-smooth: cubic-bezier(0.25, 0.8, 0.25, 1);
    --dark-glass-bg: rgba(15, 23, 42, 0.85);
    --light-glass-bg: rgba(255, 255, 255, 0.03);
}

/* Background Accent (Optional, if section isn't on a plain background) */
.contact-bg-accent {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    background: radial-gradient(circle, rgba(245, 158, 11, 0.05) 0%, rgba(15, 23, 42, 0) 70%);
    pointer-events: none;
}

/* 1. Shared Card Styling (Glassmorphism & Border Glow) */
.contact-card {
    border-radius: 20px !important;
    transition: transform 0.4s var(--transition-smooth),
        box-shadow 0.4s var(--transition-smooth),
        border-color 0.4s ease-in-out !important;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Form Section (Light Glass/Border) */
.form-section-card {
    background: var(--light-glass-bg) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
}

/* Info Section (Dark Glass) */
.info-section-card {
    background: var(--dark-glass-bg) !important;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* shared hover lift for both cards */
.contact-card:hover {
    transform: translateY(-8px);
}

/* Form section border glow on hover */
.form-section-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2), 0 0 25px rgba(245, 158, 11, 0.1) !important;
    border-color: rgba(245, 158, 11, 0.3) !important;
}

/* Info section border glow on hover */
.info-section-card:hover {
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4), 0 0 25px rgba(245, 158, 11, 0.15) !important;
    border-color: rgba(245, 158, 11, 0.4) !important;
}

/* 2. Custom Input Styling (Form Section) */
.custom-input,
.custom-select,
.custom-textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    color: #fff !important;
    border-radius: 12px !important;
    transition: all 0.3s ease-in-out !important;
}

/* Input Focus state */
.custom-input:focus,
.custom-select:focus,
.custom-textarea:focus {
    background-color: rgba(255, 255, 255, 0.08) !important;
    border-color: var(--gold-accent) !important;
    box-shadow: 0 0 10px rgba(245, 158, 11, 0.3) !important;
}

/* form-floating label state on dark inputs */
.form-floating>.form-control:focus~label,
.form-floating>.form-control:not(:placeholder-shown)~label,
.form-floating>.form-select~label {
    color: var(--gold-light) !important;
    opacity: 0.8;
}

/* Text color for placeholder shown when not focused */
.form-control::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

/* 3. Primary Submit Button (Gold Metallic) */
.btn-gold-submit {
    background: linear-gradient(135deg, var(--gold-accent) 0%, var(--gold-dark) 100%);
    color: #0f172a !important;
    /* Dark text for contrast */
    border: none;
    border-radius: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    position: relative;
    overflow: hidden;
}

/* Submit button hover lift and enhanced glow */
.btn-gold-submit:hover {
    background: linear-gradient(135deg, var(--gold-light) 0%, var(--gold-accent) 100%);
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 12px 28px rgba(245, 158, 11, 0.4) !important;
}

/* Arrow Slide Effect on Hover */
.btn-gold-submit .link-arrow {
    transition: transform 0.3s ease;
}

.btn-gold-submit:hover .link-arrow {
    transform: translateX(6px);
}

/* 4. Contact Information Block Effects (Right Column) */
.contact-info-block {
    transition: transform 0.3s ease;
}

/* Info block gently slides right on card hover */
.info-section-card:hover .contact-info-block {
    transform: translateX(5px);
}

.border-white-10 {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

/* 5. Gold Headline */
.text-gradient-gold {
    background: linear-gradient(135deg, var(--gold-light), var(--gold-dark));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    display: inline-block;
}



/* ==========================================================================
   VANGUARD HERO SECTION STYLES: GLOBAL OVERRIDES & COMPONENT STYLES
   ========================================================================== */

/* Universal Transition for all interactive elements in this section */
.vanguard-hero-section *,
.vanguard-hero-section *::after,
.vanguard-hero-section *::before {
    transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 1. Global Section Styles */
.vanguard-hero-section {
    background-color: #0f172a;
    /* Sophisticated deep blue-black */
}

.dynamic-vignette {
    background: linear-gradient(180deg, rgba(15, 23, 42, 0.65) 0%, rgba(15, 23, 42, 0.90) 100%);
}

/* Ken Burns Effect (Slow, Subtle Background Zoom) */
.animated-ken-burns {
    animation: kenBurns 15s infinite alternate ease-in-out;
    transform: scale(1.01);
}

@keyframes kenBurns {
    0% {
        transform: scale(1);
        filter: brightness(1.1);
    }

    100% {
        transform: scale(1.08);
        filter: brightness(0.9);
    }
}

/* 2. Left Column Styles */
.lead-vanguard {
    line-height: 1.15;
}

.text-vanguard-blue {
    background: linear-gradient(135deg, #0ea5e9 0%, #3b82f6 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

.text-vanguard-cyan {
    background: linear-gradient(135deg, #22d3ee 0%, #06b6d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
}

/* Glassmorphism Badge/Pill */
.glass-pill {
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.85);
}

/* Refactored ClauseBit Link Effect */
.clausebit-link:hover .arrow-lift {
    transform: translate(3px, -3px);
    color: #0ea5e9 !important;
}



/* 3. Button Styles (Shared and Unique) */
.btn-hero-lg {
    border-radius: 12px;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    gap: 10px;
    display: inline-flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* 1. Consultation (Gold Metallic Gradient) */
.btn-consultation-vanguard {
    background: linear-gradient(135deg, #f59e0b 0%, #d97706 50%, #fbbf24 100%);
    color: #0f172a !important;
    border: none;
}

.btn-consultation-vanguard:hover {
    background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 50%, #d97706 100%);
    transform: translateY(-3px) scale(1.03);
    box-shadow: 0 10px 25px rgba(217, 119, 6, 0.4), 0 0 15px rgba(251, 191, 36, 0.3) !important;
}

.btn-consultation-vanguard:hover .arrow-slide {
    transform: translateX(5px);
}

/* 2. Portal (Indigo/Magenta Glass Effect) */
.btn-portal-vanguard {
    background: rgba(30, 27, 75, 0.6);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 85, 247, 0.5);
    color: #fff !important;
}

.btn-portal-vanguard:hover {
    background: rgba(49, 46, 129, 0.9);
    border-color: rgba(236, 72, 153, 0.7);
    box-shadow: 0 10px 25px rgba(168, 85, 247, 0.35) !important;
    transform: translateY(-3px) scale(1.03);
}

/* 3. Hollow (Hollow to Fill Effect) */
.btn-hollow-vanguard {
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #fff !important;
    background: transparent;
}

.btn-hollow-vanguard:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
    transform: translateY(-3px) scale(1.03);
}

/* Client Logos */
.client-logo {
    height: 35px;
    opacity: 0.7;
    filter: brightness(0) invert(1);
}

/* 4. Right Column Styles (Image and Floating Badges) */
.hero-image-vanguard-frame {
    display: inline-block;
    cursor: pointer;
}

.hero-profile-image {
    transition: transform 0.4s ease, filter 0.4s ease;
    max-height: 520px;
    width: auto;
}

/* Float Animation for Floating Badges */
@keyframes floatBadge {
    0% {
        transform: translateY(0);
    }

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

.glass-float-badge {
    position: absolute;
    background: rgba(30, 41, 59, 0.65);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    gap: 15px;
    animation: floatBadge 3s infinite alternate ease-in-out;
    width: max-content;
}

.badge-top-right {
    top: 15%;
    right: -10%;
    animation-delay: 0.5s;
}

.badge-bottom-left {
    bottom: 10%;
    left: -20%;
    animation-delay: 0s;
}

.text-gold {
    color: #fbbf24;
}

/* Simulate dynamic light burst background on hover ( simulated via CSS only) */
.light-pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    background: radial-gradient(circle, rgba(14, 165, 233, 0.25) 0%, rgba(15, 23, 42, 0) 70%);
    opacity: 0;
    z-index: 1;
    border-radius: 50%;
    transition: opacity 0.5s ease;
}

.vanguard-hero-section:hover .light-pulse {
    opacity: 1;
}

/* MOBILE RESPONSIVENESS OVERRIDES */
@media (max-width: 991.98px) {
    .lead-vanguard {
        font-size: 2.8rem;
    }

    .vanguard-hero-section {
        text-align: center;
    }

    .glass-pill {
        justify-content: center;
    }

    .btn-hero-lg {
        justify-content: center;
        width: 100%;
    }

    .glass-float-badge {
        position: static;
        animation: none;
        margin-top: 15px;
        justify-content: center;
    }

    .hero-profile-image {
        max-height: 400px;
        margin-top: 50px;
    }
}


/* ==========================================================================
   9. SHARED SITE SHELL, NAVBAR & FOOTER (from the home page, now on every page)
   ========================================================================== */
:root { --nav-h: 72px; --text-soft: #cbd5e1; --text-mute: #94a3b8; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body.site-body { background: #0f172a; color: #e2e8f0; min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; }
.site-main { flex: 1 0 auto; padding-top: var(--nav-h); }
img, svg, video { max-width: 100%; }
img { height: auto; }
.site-main [id] { scroll-margin-top: calc(var(--nav-h) + 1rem); }
.tracking-tight { letter-spacing: -0.01em; } .tracking-wide { letter-spacing: 0.08em; } .tracking-wider { letter-spacing: 0.12em; }
.fs-7 { font-size: 0.8rem; }
.min-vh-50 { min-height: 50vh; } .min-vh-75 { min-height: 75vh; }

/* Accessibility */
.skip-link { position: fixed; top: 8px; left: 8px; z-index: 2000; background: #fbbf24; color: #0f172a; padding: .6rem 1rem; border-radius: 8px; font-weight: 700; text-decoration: none; }
a:focus-visible, .btn:focus-visible, button:focus-visible, .form-control:focus-visible, .form-select:focus-visible { outline: 3px solid #fbbf24; outline-offset: 3px; }
.btn { min-height: 44px; }

/* Contrast fixes on dark surfaces */
.site-body .text-muted { color: var(--text-mute) !important; }
.site-body .text-secondary { color: var(--text-soft) !important; }
.site-body .text-white-50 { color: rgba(226, 232, 240, 0.78) !important; }
.site-body .text-accent { color: #60a5fa; }
.site-body .lead { color: #e2e8f0; }

/* ---------- Glass navigation ---------- */
.vanguard-nav { background: rgba(15, 23, 42, 0.78) !important; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); transition: background .35s ease, box-shadow .35s ease; }
.vanguard-nav.is-scrolled { background: rgba(15, 23, 42, 0.93) !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35); }
@supports not (backdrop-filter: blur(1px)) { @supports not (-webkit-backdrop-filter: blur(1px)) { .vanguard-nav { background: #0f172a !important; } } }
.vanguard-nav ul li a:hover { background-color: transparent; text-decoration: none; }
.brand-name-glow { background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; font-size: clamp(1.1rem, 3.8vw, 1.5rem) !important; }
.nav-link-vanguard { position: relative; color: rgba(255, 255, 255, 0.9) !important; font-size: 1.05rem; padding: .5rem 1rem !important; transition: color .3s ease; }
.nav-link-vanguard::after { content: ''; position: absolute; bottom: 0; left: 50%; width: 0; height: 2px; background: linear-gradient(90deg, #38bdf8, #818cf8); transition: all .3s ease; transform: translateX(-50%); border-radius: 2px; }
.nav-link-vanguard:hover, .nav-link-vanguard.active { color: #fff !important; }
.nav-link-vanguard:hover::after, .nav-link-vanguard.active::after { width: 80%; }
.vanguard-dropdown { background: rgba(15, 23, 42, 0.96); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 16px; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5); padding: 1rem; min-width: min(320px, calc(100vw - 2rem)); margin-top: 10px; }
.vanguard-dropdown .dropdown-item { color: rgba(255, 255, 255, 0.88); border-radius: 10px; padding: .6rem .8rem; transition: all .25s ease; display: flex; align-items: center; gap: 12px; white-space: normal; }
.vanguard-dropdown .dropdown-item:hover, .vanguard-dropdown .dropdown-item:focus { background: rgba(56, 189, 248, 0.14); color: #7dd3fc; transform: translateX(4px); }
.vanguard-dropdown .dropdown-item i { font-size: 1.1rem; color: #38bdf8; }
.btn-nav-cta { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); color: #0f172a !important; border: none; border-radius: 50px; padding: .55rem 1.4rem !important; font-weight: 700; box-shadow: 0 4px 15px rgba(245, 158, 11, 0.3); transition: all .3s ease; }
.btn-nav-cta:hover { transform: translateY(-2px) scale(1.03); box-shadow: 0 8px 25px rgba(245, 158, 11, 0.5); background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%); }
.navbar-toggler { border: 1px solid rgba(255, 255, 255, 0.3); padding: .5rem .75rem; min-height: 44px; }
.navbar-toggler:focus { box-shadow: 0 0 0 .25rem rgba(56, 189, 248, 0.3); }

/* ---------- Footer ---------- */
.vanguard-footer { background: linear-gradient(180deg, #0f172a 0%, #090d16 100%); border-top: 1px solid rgba(56, 189, 248, 0.2) !important; position: relative; overflow: hidden; }
.vanguard-footer::before { content: ''; position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 60%; height: 1px; background: linear-gradient(90deg, transparent, #38bdf8, #818cf8, transparent); box-shadow: 0 0 15px #38bdf8; }
.footer-brand-name { background: linear-gradient(135deg, #ffffff 0%, #38bdf8 100%); -webkit-background-clip: text; background-clip: text; color: transparent !important; }
.footer-heading { color: #f8fafc; font-size: .875rem; letter-spacing: 1.2px; position: relative; padding-bottom: 8px; }
.footer-heading::after { content: ''; position: absolute; bottom: 0; left: 0; width: 28px; height: 2px; background: #38bdf8; border-radius: 2px; }
.footer-link { color: rgba(226, 232, 240, 0.82); text-decoration: none; transition: all .25s ease; display: inline-flex; align-items: center; gap: 6px; padding: 2px 0; }
.footer-link:hover { color: #7dd3fc !important; transform: translateX(5px); }
.footer-link i { font-size: .75rem; opacity: .6; transition: opacity .25s ease, color .25s ease; }
.footer-link:hover i { opacity: 1; color: #7dd3fc; }
.tech-ecosystem-card { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 10px; padding: 8px 12px; transition: all .3s ease; text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.tech-ecosystem-card:hover { background: rgba(14, 165, 233, 0.12); border-color: rgba(56, 189, 248, 0.45); transform: translateY(-2px); }
.social-btn { width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); color: #e2e8f0; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; transition: all .3s ease; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.social-btn:hover { background: linear-gradient(135deg, #0ea5e9, #2563eb); border-color: transparent; color: #fff !important; transform: translateY(-3px); box-shadow: 0 6px 15px rgba(14, 165, 233, 0.4); }

/* ==========================================================================
   10. REFINED BUTTONS (one consistent, professional system)
   ========================================================================== */
.btn-consultation { background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%) !important; border: 1px solid rgba(251, 191, 36, 0.6) !important; color: #0f172a !important; font-weight: 700 !important; }
.btn-consultation:hover { background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%) !important; color: #0f172a !important; border-color: #fde68a !important; }
.btn-clients { background: rgba(30, 27, 75, 0.72) !important; border: 1px solid rgba(165, 180, 252, 0.6) !important; }
.btn-learn-more { background: rgba(255, 255, 255, 0.12) !important; border: 1px solid rgba(255, 255, 255, 0.35) !important; }
.btn-learn-more:hover, .btn-clients:hover { background: rgba(255, 255, 255, 0.22) !important; border-color: #fff !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3) !important; }
.btn-hero-action:hover { filter: none !important; }
.hero-badge-animated { background: rgba(255, 255, 255, 0.1) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid rgba(255, 255, 255, 0.25); }
.btn-hero-lg { font-size: clamp(1rem, 2.6vw, 1.25rem) !important; }

/* ==========================================================================
   11. COMPONENT POLISH (cards, forms, sections)
   ========================================================================== */
.site-body .card { --bs-card-color: #e2e8f0; --bs-card-title-color: #f8fafc; color: #e2e8f0; }
.practice-card { background: rgba(255, 255, 255, 0.04) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1) !important; border-top: 3px solid var(--gold-accent) !important; border-radius: var(--border-radius-lg) !important; transition: transform .4s var(--transition-smooth), box-shadow .4s var(--transition-smooth), border-color .4s ease; }
.practice-card:hover { transform: translateY(-6px); box-shadow: 0 16px 32px rgba(0, 0, 0, 0.35), 0 0 20px rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.45) !important; }
.page-intro { font-size: clamp(1.05rem, 2.5vw, 1.5rem) !important; max-width: 60rem; margin-inline: auto; }
.hero-lead-text { font-size: clamp(1rem, 2.4vw, 1.35rem) !important; }
.hero-headline { overflow-wrap: anywhere; }
.custom-select option { color: #0f172a; background: #fff; }
.contact-bg-accent { width: 100%; height: 100%; }
.contact-info-block i { flex-shrink: 0; }
.contact-info-block p { overflow-wrap: anywhere; }
.contact-hero-logo { max-height: clamp(140px, 38vw, 270px) !important; }
.about-main-img { max-height: clamp(320px, 60vw, 600px); }
.team-card { height: clamp(340px, 70vw, 460px); }
.team-title-band { background: linear-gradient(135deg, rgba(245, 158, 11, 0.08), rgba(59, 130, 246, 0.1)); border-bottom: 1px solid rgba(255, 255, 255, 0.08); }

/* ==========================================================================
   12. RESPONSIVE BREAKPOINTS  (320px phones  ->  4K displays)
   ========================================================================== */
/* Large desktops & 2K / 4K */
@media (min-width: 1600px) { html { font-size: 112.5%; } .container { max-width: 1500px; } }
@media (min-width: 2200px) { html { font-size: 125%; } .container { max-width: 1800px; } }

/* Laptops / small desktops */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .badge-top-right { right: -4%; }
    .badge-bottom-left { left: -8%; }
    .nav-link-vanguard { padding: .5rem .6rem !important; font-size: 1rem; }
}

/* Tablets & below: collapsed navigation */
@media (max-width: 991.98px) {
    :root { --nav-h: 66px; }
    .vanguard-nav .navbar-collapse { background: rgba(15, 23, 42, 0.97); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 16px; padding: .75rem 1rem 1rem; margin-top: .6rem; max-height: calc(100vh - var(--nav-h) - 12px); max-height: calc(100dvh - var(--nav-h) - 12px); overflow-y: auto; }
    .vanguard-dropdown { min-width: 0; width: 100%; box-shadow: none; margin-top: .25rem; padding: .5rem; background: rgba(255, 255, 255, 0.04); }
    .nav-link-vanguard { padding: .75rem .5rem !important; }
    .nav-link-vanguard::after { left: .5rem; transform: none; }
    .nav-link-vanguard:hover::after, .nav-link-vanguard.active::after { width: 3rem; }
    .btn-nav-cta { display: flex !important; justify-content: center; width: 100%; padding: .8rem 1.4rem !important; }
    .min-vh-75, .min-vh-50 { min-height: auto; }
    .lead-vanguard { font-size: clamp(2.1rem, 7vw, 3rem); }
    .hero-profile-image { margin-top: 2rem; }
    .about-floating-badge { position: static !important; margin: 1rem 0 0 !important; }
}

/* Phones */
@media (max-width: 767.98px) {
    .vanguard-nav .navbar-brand img { height: 40px !important; }
    .btn-hero-action, .btn-hero-primary, .btn-hero-glass, .btn-hero-outline, .btn-gold-action { width: 100%; justify-content: center; }
    .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
    .contact-card:hover, .insight-card:hover, .practice-card:hover { transform: none; }
    .swiper-nav-btn { display: none; }
}
@media (max-width: 575.98px) {
    .about-image-backdrop { top: -8px; left: -8px; }
    .vanguard-footer .col-6 { flex: 0 0 100%; max-width: 100%; }
    .hero-pill-badge { font-size: .75rem; padding: 6px 14px; }
    .footer-heading { margin-top: .5rem; }
}
/* Very small phones (<= 360px) */
@media (max-width: 360px) {
    .vanguard-nav .navbar-brand img { height: 34px !important; }
    .vanguard-nav .container { padding-inline: .75rem; }
    .btn-lg { --bs-btn-padding-x: 1rem; --bs-btn-font-size: 1rem; }
    .display-4, .display-5 { font-size: 1.9rem; }
}
/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
    :root { --nav-h: 58px; }
    .vanguard-hero-section .py-5, .hero-banner-section .py-5 { padding-top: 1.5rem !important; padding-bottom: 1.5rem !important; }
    .vanguard-nav .navbar-collapse { max-height: calc(100vh - 70px); }
}
/* Touch devices: no sticky hover lifts */
@media (hover: none) {
    .contact-card:hover, .insight-card:hover, .practice-card:hover, .btn:hover { transform: none !important; }
}
/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}


/* ==========================================================================
   13. TEAM PAGE
   ========================================================================== */
.reveal { transition: opacity .7s var(--transition-smooth), transform .7s var(--transition-smooth); }
.js .reveal { opacity: 0; transform: translateY(28px); }
.js .reveal.is-visible { opacity: 1; transform: none; }

.team-hero-glass { background: rgba(255, 255, 255, 0.07); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 20px; }

/* Founder spotlight */
.team-feature { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: 24px; padding: clamp(1.25rem, 4vw, 3rem); position: relative; overflow: hidden; transition: border-color .4s ease, box-shadow .4s ease; }
.team-feature::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 90% 0%, rgba(245, 158, 11, 0.12), transparent 55%); pointer-events: none; }
.team-feature:hover { border-color: rgba(245, 158, 11, 0.4); box-shadow: 0 20px 45px rgba(0, 0, 0, 0.4), 0 0 28px rgba(245, 158, 11, 0.1); }
.team-feature .about-main-img { aspect-ratio: 4 / 5; width: 100%; object-position: top center; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 50px; font-size: .78rem; font-weight: 600; letter-spacing: .3px; background: rgba(245, 158, 11, 0.14); color: #fbbf24; border: 1px solid rgba(245, 158, 11, 0.35); }
.chip-blue { background: rgba(56, 189, 248, 0.12); color: #7dd3fc; border-color: rgba(56, 189, 248, 0.35); }

/* Filter pills */
.btn-filter { background: rgba(255, 255, 255, 0.06); color: #e2e8f0; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 50px; padding: .55rem 1.2rem; font-weight: 600; font-size: .95rem; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s var(--transition-smooth); }
.btn-filter:hover { background: rgba(255, 255, 255, 0.14); border-color: #fff; color: #fff; transform: translateY(-2px); }
.btn-filter.active, .btn-filter[aria-pressed="true"] { background: linear-gradient(135deg, var(--gold-accent), var(--gold-dark)); color: #0f172a; border-color: transparent; box-shadow: 0 8px 20px rgba(245, 158, 11, 0.3); }

/* Member cards */
.member-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-lg); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform .4s var(--transition-smooth), box-shadow .4s var(--transition-smooth), border-color .4s ease; }
.member-card:hover { transform: translateY(-8px); border-color: rgba(245, 158, 11, 0.5); box-shadow: 0 18px 36px rgba(0, 0, 0, 0.4), 0 0 22px rgba(245, 158, 11, 0.12); }
.member-photo { position: relative; aspect-ratio: 4 / 4.2; overflow: hidden; background: linear-gradient(135deg, #1e293b, #0f172a 60%, #1e1b4b); }
.member-initials { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: clamp(2.5rem, 9vw, 4rem); font-weight: 800; letter-spacing: .05em; background: linear-gradient(135deg, #fbbf24, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: .85; }
.member-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .6s var(--transition-smooth); }
.member-card:hover .member-photo img { transform: scale(1.08); }
.member-photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(15, 23, 42, 0.85) 100%); pointer-events: none; }
.member-social { position: absolute; left: 0; right: 0; bottom: 0; z-index: 2; display: flex; justify-content: center; gap: .5rem; padding: .9rem; transform: translateY(110%); transition: transform .4s var(--transition-smooth); }
.member-card:hover .member-social, .member-card:focus-within .member-social { transform: none; }
.member-social a { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; color: #fff; text-decoration: none; background: rgba(15, 23, 42, 0.7); border: 1px solid rgba(255, 255, 255, 0.25); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s ease; }
.member-social a:hover { background: linear-gradient(135deg, #0ea5e9, #2563eb); border-color: transparent; transform: translateY(-3px); }
.member-body { padding: 1.25rem 1.25rem 1.4rem; display: flex; flex-direction: column; flex: 1; }
.member-role { color: #fbbf24; font-size: .85rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.member-body .btn-glass { margin-top: auto; }
.btn-glass { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; background: rgba(255, 255, 255, 0.08); color: #fff !important; border: 1px solid rgba(255, 255, 255, 0.28); border-radius: var(--border-radius-md); font-weight: 600; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s var(--transition-smooth); }
.btn-glass:hover { background: rgba(255, 255, 255, 0.18); border-color: #fff; transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0, 0, 0, 0.3); }
.btn-glass i { transition: transform .3s ease; } .btn-glass:hover i { transform: translateX(5px); }
.member-item.is-filtered-out { display: none; }
.member-item.is-filtering-in { animation: memberIn .5s var(--transition-smooth) both; }
@keyframes memberIn { from { opacity: 0; transform: translateY(18px) scale(.98); } to { opacity: 1; transform: none; } }

/* Values */
.value-card { background: rgba(255, 255, 255, 0.04); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.1); border-radius: var(--border-radius-lg); padding: 1.5rem; height: 100%; transition: transform .4s var(--transition-smooth), border-color .4s ease, box-shadow .4s ease; }
.value-card:hover { transform: translateY(-6px); border-color: rgba(56, 189, 248, 0.5); box-shadow: 0 14px 30px rgba(14, 165, 233, 0.14); }
.value-icon { width: 54px; height: 54px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; margin-bottom: 1rem; color: #0f172a; background: linear-gradient(135deg, var(--gold-light), var(--gold-accent)); box-shadow: 0 6px 16px rgba(245, 158, 11, 0.3); }

/* Call to action */
.team-cta { background: linear-gradient(135deg, rgba(245, 158, 11, 0.12), rgba(59, 130, 246, 0.14)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255, 255, 255, 0.14); border-radius: 24px; padding: clamp(1.75rem, 5vw, 3.5rem); }

@media (max-width: 767.98px) { .member-social { transform: none; } .member-card:hover, .value-card:hover { transform: none; } .btn-filter { padding: .5rem .95rem; font-size: .88rem; } }
@media (hover: none) { .member-social { transform: none; } }


/* ==========================================================================
   14. ABOUT PAGE (extended effects)
   ========================================================================== */
.ab-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2100; background: linear-gradient(90deg, #f59e0b, #fbbf24, #38bdf8, #818cf8); box-shadow: 0 0 12px rgba(251,191,36,.7); }
.reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-zoom { transform: scale(.92); }
.js .reveal-left, .js .reveal-right, .js .reveal-zoom { opacity: 0; }
.js .reveal-left.is-visible, .js .reveal-right.is-visible, .js .reveal-zoom.is-visible { opacity: 1; transform: none; }
.ab-grad-text { background: linear-gradient(90deg, #fbbf24, #38bdf8, #a78bfa, #fbbf24); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: abShift 8s linear infinite; }
@keyframes abShift { to { background-position: 300% 0; } }
.ab-eyebrow { display: inline-flex; align-items: center; gap: .6rem; text-transform: uppercase; letter-spacing: .14em; font-size: .8rem; font-weight: 800; color: #7dd3fc; margin-bottom: .75rem; }
.ab-eyebrow::before { content: ''; width: 34px; height: 2px; background: linear-gradient(90deg, #f59e0b, #38bdf8); border-radius: 2px; }
.ab-section { position: relative; padding: clamp(3rem, 7vw, 6rem) 0; }
.ab-title { font-weight: 800; font-size: clamp(1.9rem, 4.5vw, 3rem); color: #fff; line-height: 1.15; }

/* Hero */
.ab-hero { position: relative; overflow: hidden; min-height: clamp(560px, 88vh, 900px); display: flex; align-items: center; }
.ab-hero .hero-bg-img { height: 120%; will-change: transform; }
.ab-orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .35; pointer-events: none; animation: ptFloat 14s ease-in-out infinite alternate; z-index: 1; }
.ab-orb.o1 { width: 300px; height: 300px; background: #0ea5e9; top: 8%; left: -80px; } .ab-orb.o2 { width: 340px; height: 340px; background: #f59e0b; bottom: -80px; right: -60px; animation-delay: -6s; opacity: .28; }
.ab-type::after { content: '|'; margin-left: 4px; color: #fbbf24; animation: abBlink 1s steps(1) infinite; -webkit-text-fill-color: #fbbf24; }
@keyframes abBlink { 50% { opacity: 0; } }
.ab-float-chip { position: absolute; z-index: 3; display: none; align-items: center; gap: .6rem; padding: .7rem 1rem; border-radius: 16px; background: rgba(255,255,255,.08); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.2); color: #fff; font-weight: 600; font-size: .9rem; box-shadow: 0 14px 34px rgba(0,0,0,.35); animation: abBob 5s ease-in-out infinite; }
.ab-float-chip i { font-size: 1.3rem; color: #fbbf24; }
.ab-float-chip.c1 { top: 22%; left: 5%; } .ab-float-chip.c2 { top: 30%; right: 5%; animation-delay: -1.5s; } .ab-float-chip.c3 { bottom: 16%; left: 9%; animation-delay: -3s; } .ab-float-chip.c4 { bottom: 20%; right: 8%; animation-delay: -2.2s; }
@media (min-width: 1200px) { .ab-float-chip { display: inline-flex; } }
@keyframes abBob { 50% { transform: translateY(-14px); } }
.ab-scroll { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 3; width: 28px; height: 46px; border: 2px solid rgba(255,255,255,.6); border-radius: 20px; }
.ab-scroll::after { content: ''; position: absolute; top: 8px; left: 50%; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #fbbf24; animation: abWheel 1.6s infinite; }
@keyframes abWheel { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(16px); } }
.btn-shine { position: relative; overflow: hidden; }
.btn-shine::after { content: ''; position: absolute; top: 0; left: -120%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-20deg); transition: left .7s ease; }
.btn-shine:hover::after { left: 140%; }

/* Stats */
.ab-stats { margin-top: -3.5rem; position: relative; z-index: 5; }
.ab-stat { text-align: center; padding: 1.5rem 1rem; height: 100%; background: rgba(255,255,255,.06); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.14); border-radius: 22px; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.ab-stat:hover { transform: translateY(-8px); border-color: rgba(245,158,11,.55); box-shadow: 0 18px 38px rgba(0,0,0,.4), 0 0 24px rgba(245,158,11,.15); }
.ab-stat b { display: block; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.1; background: linear-gradient(135deg, #fde68a, #f59e0b 50%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ab-stat span { color: #cbd5e1; font-weight: 600; font-size: .9rem; }

/* Tilt cards */
.ab-tilt { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out, border-color .4s, box-shadow .4s; transform-style: preserve-3d; }
.ab-vmv { position: relative; overflow: hidden; height: 100%; padding: clamp(1.4rem, 3vw, 2rem); background: rgba(255,255,255,.045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; }
.ab-vmv::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f59e0b, #38bdf8, #a78bfa); background-size: 200% 100%; animation: abShift 6s linear infinite; }
.ab-vmv::after { content: ''; position: absolute; width: 220px; height: 220px; right: -90px; bottom: -90px; border-radius: 50%; background: radial-gradient(circle, rgba(56,189,248,.22), transparent 70%); transition: transform .6s ease; }
.ab-vmv:hover { border-color: rgba(56,189,248,.5); box-shadow: 0 20px 44px rgba(0,0,0,.4); } .ab-vmv:hover::after { transform: scale(1.5); }

/* Timeline */
.ab-tl { position: relative; list-style: none; margin: 0; padding: 0 0 0 2.6rem; }
.ab-tl::before { content: ''; position: absolute; left: 14px; top: 8px; bottom: 8px; width: 3px; border-radius: 3px; background: linear-gradient(180deg, #f59e0b, #38bdf8, #a78bfa); }
.ab-tl-item { position: relative; margin-bottom: 1.6rem; }
.ab-tl-dot { position: absolute; left: -2.6rem; top: .6rem; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: #0f172a; border: 3px solid #f59e0b; color: #fbbf24; font-size: .95rem; z-index: 1; animation: ptRing 2.4s infinite; }
.ab-tl-card { padding: 1.25rem 1.4rem; background: rgba(255,255,255,.05); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 20px; transition: transform .4s var(--transition-smooth), border-color .4s; }
.ab-tl-card:hover { transform: translateX(8px); border-color: rgba(245,158,11,.5); }
@media (min-width: 992px) {
  .ab-tl { padding: 0; max-width: 1000px; margin-inline: auto; } .ab-tl::before { left: 50%; transform: translateX(-50%); }
  .ab-tl-item { width: 50%; padding-right: 3.2rem; } .ab-tl-item:nth-child(even) { margin-left: 50%; padding-right: 0; padding-left: 3.2rem; }
  .ab-tl-dot { left: auto; right: -16px; } .ab-tl-item:nth-child(even) .ab-tl-dot { right: auto; left: -16px; }
  .ab-tl-item:nth-child(even) .ab-tl-card:hover { transform: translateX(-8px); } .ab-tl-item:nth-child(odd) .ab-tl-card:hover { transform: translateX(8px); }
}

/* Tabs */
.ab-tabs { gap: .6rem; flex-wrap: wrap; justify-content: center; }
.ab-tabs .nav-link { display: inline-flex; align-items: center; gap: .55rem; color: #e2e8f0; font-weight: 700; border-radius: 50px; padding: .7rem 1.3rem; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s var(--transition-smooth); }
.ab-tabs .nav-link:hover { background: rgba(255,255,255,.14); transform: translateY(-2px); }
.ab-tabs .nav-link.active { color: #0f172a; border-color: transparent; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 10px 24px rgba(245,158,11,.35); }
.ab-pane { padding: clamp(1.4rem, 4vw, 2.6rem); background: rgba(255,255,255,.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.12); border-radius: 26px; }
.ab-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.ab-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .8rem 1rem; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); transition: transform .3s ease, border-color .3s; }
.ab-list li:hover { transform: translateX(6px); border-color: rgba(56,189,248,.5); } .ab-list i { color: #fbbf24; font-size: 1.15rem; margin-top: 2px; }
.ab-bigicon { width: 96px; height: 96px; border-radius: 28px; display: inline-flex; align-items: center; justify-content: center; font-size: 2.8rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #38bdf8); box-shadow: 0 16px 40px rgba(245,158,11,.35); animation: abBob 5s ease-in-out infinite; }

/* Marquee */
.ab-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ab-track { display: flex; gap: 1rem; width: max-content; animation: abScroll 38s linear infinite; padding: .5rem 0; }
.ab-marquee:hover .ab-track { animation-play-state: paused; }
@keyframes abScroll { to { transform: translateX(-50%); } }
.ab-area { display: inline-flex; align-items: center; gap: .7rem; padding: .9rem 1.5rem; border-radius: 50px; white-space: nowrap; color: #fff; text-decoration: none; font-weight: 700; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s var(--transition-smooth); }
.ab-area i { color: #fbbf24; font-size: 1.2rem; }
.ab-area:hover { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); transform: translateY(-4px) scale(1.04); box-shadow: 0 12px 26px rgba(245,158,11,.35); } .ab-area:hover i { color: #0f172a; }

/* Process */
.ab-step { position: relative; height: 100%; padding: 2rem 1.5rem 1.5rem; background: rgba(255,255,255,.045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.ab-step:hover { transform: translateY(-8px); border-color: rgba(56,189,248,.5); box-shadow: 0 18px 38px rgba(14,165,233,.15); }
.ab-step-n { position: absolute; top: -22px; left: 1.5rem; width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.25rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 20px rgba(245,158,11,.4); }

/* LegalTech spotlight */
.ab-tech { position: relative; overflow: hidden; border-radius: 28px; padding: clamp(1.6rem, 5vw, 3.5rem); background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(99,102,241,.22) 50%, rgba(245,158,11,.18)); border: 1px solid rgba(255,255,255,.18); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); }
.ab-tech::before { content: ''; position: absolute; inset: -40%; background: conic-gradient(from 0deg, transparent, rgba(56,189,248,.18), transparent 30%); animation: abSpin 14s linear infinite; pointer-events: none; }
@keyframes abSpin { to { transform: rotate(360deg); } }
.ab-tech > * { position: relative; }
.ab-code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .85rem; padding: 1.1rem 1.2rem; border-radius: 16px; background: rgba(2,6,23,.75); border: 1px solid rgba(255,255,255,.12); color: #bae6fd; overflow-x: auto; }
.ab-code .k { color: #fbbf24; } .ab-code .c { color: #94a3b8; } .ab-code .s { color: #6ee7b7; }

/* FAQ */
.ab-faq .accordion-item { background: rgba(255,255,255,.045); border: 1px solid rgba(255,255,255,.12) !important; border-radius: 18px !important; margin-bottom: .8rem; overflow: hidden; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); transition: border-color .3s, box-shadow .3s; }
.ab-faq .accordion-item:hover { border-color: rgba(245,158,11,.45) !important; }
.ab-faq .accordion-button { background: transparent; color: #f8fafc; font-weight: 700; box-shadow: none; padding: 1.1rem 1.3rem; }
.ab-faq .accordion-button:not(.collapsed) { color: #fde68a; background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(56,189,248,.08)); }
.ab-faq .accordion-body { color: #cbd5e1; }

/* CTA */
.ab-cta { position: relative; overflow: hidden; text-align: center; border-radius: 30px; padding: clamp(2rem, 6vw, 4.5rem) clamp(1.2rem, 4vw, 3rem); background: linear-gradient(120deg, #92400e, #b45309 25%, #1e3a8a 70%, #312e81); background-size: 200% 200%; animation: abBg 10s ease infinite; border: 1px solid rgba(255,255,255,.2); }
@keyframes abBg { 50% { background-position: 100% 50%; } }
.ab-cta::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 45%); }
.ab-cta > * { position: relative; }
.ab-top { position: fixed; right: 18px; bottom: 18px; z-index: 1029; width: 48px; height: 48px; border-radius: 14px; border: 1px solid rgba(255,255,255,.25); color: #fff; background: rgba(15,23,42,.7); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .35s var(--transition-smooth); }
.ab-top.show { opacity: 1; visibility: visible; transform: none; } .ab-top:hover { background: linear-gradient(135deg, #f59e0b, #d97706); color: #0f172a; }
@media (max-width: 767.98px) { .ab-stats { margin-top: -2rem; } .ab-tl-card:hover, .ab-step:hover, .ab-stat:hover { transform: none; } .ab-hero { min-height: 0; padding: 2rem 0 4rem; } .ab-scroll { display: none; } .ab-tabs .nav-link { padding: .6rem 1rem; font-size: .9rem; } }
@media (hover: none) { .ab-tilt { transform: none !important; } }


/* ==========================================================================
   15. HOME PAGE (long-form, marquees, spotlight cards)
   ========================================================================== */
@keyframes ptFloat { from { transform: translate(0,0) scale(1); } to { transform: translate(30px,-26px) scale(1.12); } }
@keyframes ptRing { 0% { box-shadow: 0 0 0 0 rgba(251,191,36,.6); } 100% { box-shadow: 0 0 0 14px rgba(251,191,36,0); } }
.ab-track { animation-duration: var(--d, 38s); }
.ab-track.rev { animation-direction: reverse; }
.hm-mesh { background: radial-gradient(circle at 12% 18%, rgba(56,189,248,.10), transparent 42%), radial-gradient(circle at 90% 80%, rgba(245,158,11,.10), transparent 42%); }
.hm-band { padding: 1.1rem 0; border-block: 1px solid rgba(255,255,255,.08); background: linear-gradient(90deg, rgba(14,165,233,.08), rgba(245,158,11,.08)); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.hm-word { display: inline-flex; align-items: center; gap: 1rem; white-space: nowrap; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; font-size: clamp(.95rem, 2vw, 1.2rem); color: #e2e8f0; }
.hm-word i { color: #fbbf24; font-size: .8em; }
.hm-word.g { background: linear-gradient(90deg, #fde68a, #f59e0b, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-big { display: inline-flex; align-items: center; gap: 2rem; white-space: nowrap; font-size: clamp(3rem, 10vw, 7.5rem); font-weight: 900; line-height: 1.1; letter-spacing: -.02em; -webkit-text-stroke: 2px rgba(255,255,255,.28); color: transparent; transition: color .4s; }
.hm-big:hover { color: rgba(255,255,255,.08); }
.hm-big b { -webkit-text-stroke: 0; background: linear-gradient(135deg, #fde68a, #f59e0b 45%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 900; }
.hm-big i { font-size: .45em; color: #fbbf24; -webkit-text-stroke: 0; }

/* spotlight cards (cursor-follow glow) */
.hm-spot { position: relative; overflow: hidden; }
.hm-spot::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .35s; background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(56,189,248,.16), transparent 45%); }
.hm-spot:hover::before { opacity: 1; }

/* practice cards */
.hm-pa { display: flex; flex-direction: column; height: 100%; padding: 1.6rem; text-decoration: none; color: inherit; background: rgba(255,255,255,.045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 24px; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.hm-pa:hover { transform: translateY(-10px); border-color: rgba(245,158,11,.55); box-shadow: 0 22px 44px rgba(0,0,0,.42), 0 0 28px rgba(245,158,11,.14); color: inherit; }
.hm-pa .value-icon { transition: transform .5s var(--transition-smooth); } .hm-pa:hover .value-icon { transform: rotate(-8deg) scale(1.12); }
.hm-pa .more { margin-top: auto; padding-top: 1rem; font-weight: 700; color: #fbbf24; display: inline-flex; align-items: center; gap: .4rem; }
.hm-pa .more i { transition: transform .3s; } .hm-pa:hover .more i { transform: translateX(7px); }
.hm-pa.feat { background: linear-gradient(135deg, rgba(14,165,233,.22), rgba(99,102,241,.2)); border-color: rgba(56,189,248,.4); }

/* why-choose (sticky) */
.hm-sticky { position: sticky; top: calc(var(--nav-h) + 24px); }
.hm-why { display: flex; gap: 1.2rem; padding: 1.5rem; margin-bottom: 1rem; background: rgba(255,255,255,.045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; transition: transform .4s var(--transition-smooth), border-color .4s; }
.hm-why:hover { transform: translateX(10px); border-color: rgba(56,189,248,.5); }
.hm-why .n { font-size: 2.6rem; font-weight: 900; line-height: 1; min-width: 64px; background: linear-gradient(180deg, #fde68a, rgba(245,158,11,.25)); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* journey */
.hm-journey { position: relative; }
@media (min-width: 992px) { .hm-journey::before { content: ''; position: absolute; top: 0; left: 6%; right: 6%; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #f59e0b, #38bdf8, #a78bfa, #f59e0b); background-size: 200% 100%; animation: abShift 6s linear infinite; } }

/* portal showcase */
.hm-win { border-radius: 22px; overflow: hidden; background: rgba(15,23,42,.8); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 30px 70px rgba(0,0,0,.55), 0 0 40px rgba(56,189,248,.12); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.hm-win-bar { display: flex; align-items: center; gap: 7px; padding: .75rem 1rem; background: rgba(255,255,255,.05); border-bottom: 1px solid rgba(255,255,255,.1); }
.hm-win-bar i { width: 11px; height: 11px; border-radius: 50%; background: #f87171; } .hm-win-bar i:nth-child(2) { background: #fbbf24; } .hm-win-bar i:nth-child(3) { background: #34d399; }
.hm-win-bar span { margin-left: auto; margin-right: auto; font-size: .75rem; color: #94a3b8; }
.hm-win-body { display: grid; grid-template-columns: 56px 1fr; min-height: 320px; }
.hm-win-side { display: flex; flex-direction: column; align-items: center; gap: .9rem; padding: 1rem 0; background: rgba(0,0,0,.25); color: #94a3b8; } .hm-win-side i.on { color: #fbbf24; }
.hm-win-main { padding: 1.1rem; display: grid; gap: .9rem; }
.hm-mini { padding: .9rem; border-radius: 14px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); }
.hm-barx { height: 8px; border-radius: 8px; background: rgba(255,255,255,.1); overflow: hidden; margin-top: .5rem; }
.hm-barx span { display: block; height: 100%; width: 0; border-radius: 8px; background: linear-gradient(90deg, #f59e0b, #38bdf8); transition: width 1.6s var(--transition-smooth) .4s; }
.is-visible .hm-barx span { width: var(--w); }
.hm-task { display: flex; align-items: center; gap: .6rem; font-size: .85rem; color: #e2e8f0; padding: .35rem 0; } .hm-task i { color: #34d399; }
.hm-notify { position: absolute; right: -12px; bottom: 28px; z-index: 3; display: flex; align-items: center; gap: .7rem; padding: .7rem 1rem; border-radius: 16px; background: rgba(15,23,42,.88); border: 1px solid rgba(251,191,36,.5); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); color: #fff; font-size: .85rem; font-weight: 600; box-shadow: 0 16px 36px rgba(0,0,0,.5); animation: abBob 4s ease-in-out infinite; }
.hm-notify i { color: #fbbf24; font-size: 1.2rem; }

/* insight cards */
.hm-icard { display: flex; flex-direction: column; width: min(340px, 82vw); white-space: normal; padding: 1.4rem; text-decoration: none; background: rgba(255,255,255,.055); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.13); border-radius: 22px; color: #e2e8f0; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.hm-icard:hover { transform: translateY(-8px); border-color: rgba(245,158,11,.55); box-shadow: 0 18px 38px rgba(0,0,0,.4); color: #fff; }
.hm-icard h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin: .9rem 0 .6rem; }
.hm-icard p { font-size: .85rem; color: #94a3b8; margin-bottom: 1rem; }
.hm-icard .go { margin-top: auto; color: #fbbf24; font-weight: 700; font-size: .9rem; }

/* contact info */
.hm-info { display: flex; gap: 1rem; align-items: flex-start; padding: 1.1rem 1.2rem; border-radius: 18px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); text-align: left; }
.hm-info i { font-size: 1.5rem; color: #fbbf24; }

@media (max-width: 991.98px) { .hm-sticky { position: static; } .hm-notify { right: 8px; } }
@media (max-width: 575.98px) { .hm-win-body { grid-template-columns: 44px 1fr; } .hm-why { flex-direction: column; gap: .5rem; } .hm-why:hover, .hm-pa:hover, .hm-icard:hover { transform: none; } }
@media (hover: none) { .hm-pa:hover, .hm-why:hover, .hm-icard:hover { transform: none; } .hm-spot::before { display: none; } }


/* ==========================================================================
   16. HOME PAGE ADDITIONS: videos, finder, map, navigator, particles
   ========================================================================== */
.hm-trust { display: inline-flex; align-items: center; gap: .55rem; padding: .45rem .95rem; border-radius: 50px; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); color: #e2e8f0; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: all .3s ease; }
.hm-trust:hover { border-color: rgba(56,189,248,.6); transform: translateY(-3px); background: rgba(56,189,248,.14); }
.hm-trust i { font-size: 1.15rem; color: #38bdf8; } .hm-trust b { color: #f1f5f9; font-size: .9rem; }

/* videos */
.hm-vid { height: 100%; background: rgba(255,255,255,.045); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; overflow: hidden; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.hm-vid:hover { transform: translateY(-8px); border-color: rgba(245,158,11,.55); box-shadow: 0 20px 42px rgba(0,0,0,.42); }
.hm-video { position: relative; aspect-ratio: 16 / 9; background: linear-gradient(135deg, #1e293b, #0f172a 60%, #1e1b4b) center / cover no-repeat; }
.hm-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.hm-video::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 50%, rgba(15,23,42,.7)); pointer-events: none; transition: opacity .3s; }
.hm-video.playing::after, .hm-video.empty::after { display: none; }
.hm-play { position: absolute; inset: 0; z-index: 2; width: 100%; border: 0; background: transparent; display: flex; align-items: center; justify-content: center; }
.hm-play i { width: 68px; height: 68px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 10px 30px rgba(245,158,11,.5); animation: ptRing 2s infinite; transition: transform .3s var(--transition-smooth); }
.hm-vid:hover .hm-play i { transform: scale(1.15); }
.hm-empty { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem; color: #94a3b8; font-weight: 600; font-size: .9rem; border: 2px dashed rgba(255,255,255,.2); margin: 12px; border-radius: 14px; }
.hm-empty i { font-size: 2.2rem; color: #f87171; }
.hm-vid-body { padding: 1.1rem 1.25rem 1.3rem; } .hm-vid-body h3 { font-size: 1.05rem; font-weight: 700; color: #fff; margin-bottom: .35rem; } .hm-vid-body p { font-size: .85rem; color: #94a3b8; margin: 0; }

/* practice-area finder */
.hm-finder { max-width: 1000px; margin-inline: auto; padding: clamp(1.4rem, 4vw, 3rem); background: rgba(255,255,255,.05); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(255,255,255,.14); border-radius: 28px; box-shadow: 0 24px 60px rgba(0,0,0,.4); position: relative; overflow: hidden; }
.hm-fprog { height: 6px; border-radius: 6px; background: rgba(255,255,255,.1); margin-bottom: 1.6rem; overflow: hidden; } .hm-fprog span { display: block; height: 100%; width: 33%; border-radius: 6px; background: linear-gradient(90deg, #f59e0b, #38bdf8); transition: width .6s var(--transition-smooth); }
.hm-fstep { display: none; } .hm-fstep.active { display: block; animation: ptUp .5s var(--transition-smooth) both; }
.hm-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .8rem; }
.hm-opt { display: flex; align-items: center; gap: .8rem; text-align: left; padding: 1rem 1.1rem; border-radius: 16px; font-weight: 600; color: #f1f5f9; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); transition: all .3s var(--transition-smooth); min-height: 60px; }
.hm-opt i { font-size: 1.4rem; color: #fbbf24; flex-shrink: 0; }
.hm-opt:hover { background: rgba(245,158,11,.14); border-color: rgba(245,158,11,.6); transform: translateY(-4px); box-shadow: 0 12px 26px rgba(0,0,0,.3); }
.hm-result { border-radius: 20px; padding: 1.4rem; background: linear-gradient(135deg, rgba(14,165,233,.18), rgba(245,158,11,.12)); border: 1px solid rgba(255,255,255,.16); }

/* section navigator + mobile bar */
.hm-dots { position: fixed; right: 18px; top: 50%; transform: translateY(-50%); z-index: 1029; display: none; flex-direction: column; gap: 6px; padding: 10px 7px; border-radius: 30px; background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.12); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.hm-dots a { position: relative; display: block; width: 22px; height: 22px; }
.hm-dots a span { position: absolute; inset: 7px; border-radius: 50%; background: rgba(255,255,255,.35); transition: all .3s; }
.hm-dots a:hover span, .hm-dots a.active span { background: #fbbf24; inset: 5px; box-shadow: 0 0 12px rgba(251,191,36,.8); }
.hm-dots a::before { content: attr(data-label); position: absolute; right: 32px; top: 50%; transform: translate(8px, -50%); white-space: nowrap; padding: 4px 10px; border-radius: 8px; font-size: .75rem; font-weight: 700; color: #0f172a; background: #fbbf24; opacity: 0; pointer-events: none; transition: all .25s; }
.hm-dots a:hover::before, .hm-dots a:focus-visible::before { opacity: 1; transform: translate(0, -50%); }
@media (min-width: 1300px) { .hm-dots { display: flex; } }
.hm-mobilebar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1029; display: none; gap: .6rem; padding: .7rem .8rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(15,23,42,.82); border-top: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); transform: translateY(110%); transition: transform .4s var(--transition-smooth); }
.hm-mobilebar .btn { flex: 1; font-weight: 700; padding: .7rem .5rem; }
.hm-mobilebar.show { transform: none; }
@media (max-width: 767.98px) { .hm-mobilebar { display: flex; } .hm-page .ab-top { bottom: 84px; } .hm-page .site-footer { padding-bottom: 5.5rem !important; } }

/* particle network */
.hm-net { position: absolute !important; inset: 0; width: 100%; height: 100%; pointer-events: none; opacity: .75; }

/* footer map */
.hm-map-card { height: 100%; padding: 1.6rem; border-radius: 24px; background: linear-gradient(135deg, rgba(14,165,233,.14), rgba(245,158,11,.1)); border: 1px solid rgba(255,255,255,.14); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.hm-map-frame { position: relative; height: 100%; min-height: 340px; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 20px 50px rgba(0,0,0,.45); background: #0b1220; }
.hm-map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; transition: filter .5s ease; }
.hm-map-frame.dark iframe { filter: invert(.92) hue-rotate(180deg) contrast(.92) saturate(.85); }
.hm-pin { position: absolute; top: 14px; left: 14px; z-index: 2; display: inline-flex; align-items: center; gap: .5rem; padding: .5rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; color: #fff; background: rgba(15,23,42,.8); border: 1px solid rgba(251,191,36,.5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); pointer-events: none; }
.hm-pin i { color: #fbbf24; animation: abBob 2.5s ease-in-out infinite; }


/* ==========================================================================
   17. PRACTICE AREAS PAGE
   ========================================================================== */
.pa-hero { min-height: clamp(520px, 80vh, 820px); }
.pa-search { display: flex; align-items: center; gap: .6rem; max-width: 680px; padding: .45rem .5rem .45rem 1.1rem; border-radius: 60px; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.3); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 18px 44px rgba(0,0,0,.3); transition: box-shadow .3s, border-color .3s; }
.pa-search:focus-within { border-color: #fbbf24; box-shadow: 0 18px 44px rgba(0,0,0,.3), 0 0 0 4px rgba(251,191,36,.22); }
.pa-search i { color: #fbbf24; font-size: 1.15rem; }
.pa-search input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: #fff; font-size: 1rem; padding: .6rem 0; }
.pa-search input::placeholder { color: rgba(255,255,255,.7); }
.pa-search .btn { border-radius: 50px; }
.pa-quick { padding: .4rem 1rem; border-radius: 50px; font-size: .88rem; font-weight: 600; color: #fff; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: all .3s var(--transition-smooth); min-height: 38px; }
.pa-quick:hover { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #0f172a; border-color: transparent; transform: translateY(-3px); }

/* toolbar */
.pa-toolbar { position: relative; z-index: 20; padding: 1.1rem 1.25rem; border-radius: 22px; background: var(--surface, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.18)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 14px 34px rgba(0,0,0,.2); }
@media (min-width: 768px) { .pa-toolbar { position: sticky; top: calc(var(--nav-h) + 10px); } }
.pa-input { display: flex; align-items: center; gap: .6rem; padding: 0 .9rem; min-height: 48px; border-radius: 14px; background: var(--input, rgba(255,255,255,.08)); border: 1px solid var(--line, rgba(255,255,255,.2)); transition: border-color .3s, box-shadow .3s; margin: 0; }
.pa-input:focus-within { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.25); }
.pa-input i { color: var(--acc, #fbbf24); }
.pa-input input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text, #fff); padding: .7rem 0; }
.pa-input input::placeholder { color: var(--mute, #94a3b8); }
.pa-x { width: 32px; height: 32px; border-radius: 50%; border: 0; background: var(--surface2, rgba(255,255,255,.15)); color: var(--text, #fff); display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; flex-shrink: 0; transition: transform .25s, background .25s; }
.pa-x:hover { transform: rotate(90deg); background: rgba(248,113,113,.35); }
.pa-select { min-height: 48px; border-radius: 14px !important; background-color: var(--input, rgba(255,255,255,.08)) !important; color: var(--text, #fff) !important; border: 1px solid var(--line, rgba(255,255,255,.2)) !important; }
.pa-select option { color: #0f172a; background: #fff; }
.pa-view { width: 48px; height: 48px; border: 1px solid var(--line, rgba(255,255,255,.2)); background: var(--input, rgba(255,255,255,.08)); color: var(--text, #fff); font-size: 1.1rem; transition: all .25s; }
.pa-view:first-child { border-radius: 14px 0 0 14px; } .pa-view:last-child { border-radius: 0 14px 14px 0; }
.pa-view.active { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #0f172a; border-color: transparent; }
.pa-badge { min-width: 22px; height: 22px; padding: 0 6px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; font-weight: 800; background: rgba(255,255,255,.18); color: inherit; transition: all .3s; }
.pa-badge.on { background: #f59e0b; color: #0f172a; animation: ptRing 1.6s 2; }
.pa-cats { display: flex; flex-wrap: wrap; gap: .5rem; }
.pa-cat-btn { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1.1rem; border-radius: 50px; font-weight: 600; font-size: .9rem; color: var(--text, #fff); background: var(--input, rgba(255,255,255,.08)); border: 1px solid var(--line, rgba(255,255,255,.2)); transition: all .3s var(--transition-smooth); min-height: 42px; }
.pa-cat-btn b { font-size: .72rem; padding: 2px 8px; border-radius: 10px; background: rgba(128,150,190,.25); }
.pa-cat-btn:hover { transform: translateY(-2px); border-color: #f59e0b; }
.pa-cat-btn.active { color: #0f172a; border-color: transparent; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 10px 22px rgba(245,158,11,.3); }
.pa-cat-btn.active b { background: rgba(15,23,42,.18); }

/* cards */
.pa-grid > .pa-item { transition: opacity .5s var(--transition-smooth), transform .5s var(--transition-smooth); }
.pa-item.is-hidden { display: none; }
.pa-item.pa-in { animation: ptUp .55s var(--transition-smooth) both; }
.pa-card { position: relative; display: flex; flex-direction: column; height: 100%; padding: 1.5rem; border-radius: 24px; overflow: hidden; background: var(--surface, rgba(255,255,255,.06)); border: 1px solid var(--line, rgba(255,255,255,.14)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .45s var(--transition-smooth), box-shadow .45s var(--transition-smooth), border-color .45s; }
.pa-card::after { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f59e0b, #38bdf8, #a78bfa); background-size: 200% 100%; transform: scaleX(0); transform-origin: left; transition: transform .5s var(--transition-smooth); }
.pa-card:hover { transform: translateY(-10px); border-color: rgba(245,158,11,.55); box-shadow: 0 24px 48px rgba(0,0,0,.35), 0 0 28px rgba(245,158,11,.14); }
.pa-card:hover::after { transform: scaleX(1); animation: abShift 4s linear infinite; }
.pa-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 1rem; }
.pa-icon { width: 58px; height: 58px; border-radius: 16px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #fbbf24); box-shadow: 0 10px 24px rgba(245,158,11,.35); transition: transform .5s var(--transition-smooth); }
.pa-icon.sm { width: 40px; height: 40px; font-size: 1.15rem; border-radius: 12px; }
.pa-card:hover .pa-icon { transform: rotate(-8deg) scale(1.1); }
.pa-save { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line, rgba(255,255,255,.2)); background: var(--input, rgba(255,255,255,.08)); color: var(--text, #fff); font-size: 1.1rem; display: inline-flex; align-items: center; justify-content: center; transition: all .3s var(--transition-smooth); }
.pa-save:hover { transform: scale(1.12); border-color: #f59e0b; }
.pa-save.on { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #0f172a; border-color: transparent; animation: ptPop .4s var(--transition-smooth); }
@keyframes ptPop { from { transform: scale(.7); } 60% { transform: scale(1.2); } to { transform: scale(1); } }
.pa-cat { display: inline-block; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .12em; color: var(--acc2, #7dd3fc); margin-bottom: .35rem; }
.pa-title { font-size: 1.3rem; font-weight: 800; color: var(--text, #fff); margin-bottom: .6rem; }
.pa-desc { color: var(--mute, #94a3b8); font-size: .95rem; }
.pa-points { list-style: none; padding: 0; margin: .25rem 0 1.2rem; display: grid; gap: .45rem; font-size: .9rem; color: var(--soft, #cbd5e1); }
.pa-points i { color: var(--acc, #fbbf24); margin-right: .4rem; }
.pa-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: .6rem; }
.pa-flash { animation: paFlash 2.4s ease; }
@keyframes paFlash { 0%, 100% { filter: none; } 20%, 60% { filter: drop-shadow(0 0 22px rgba(251,191,36,.9)); } }

/* list view */
.pa-grid.is-list > .pa-item { flex: 0 0 100%; max-width: 100%; }
.pa-grid.is-list .pa-card { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.pa-grid.is-list .pa-top { margin: 0; flex-direction: row; gap: 1rem; align-items: center; order: 1; }
.pa-grid.is-list .pa-save { order: 5; }
.pa-grid.is-list .pa-cat, .pa-grid.is-list .pa-title, .pa-grid.is-list .pa-desc { margin: 0; }
.pa-grid.is-list .pa-cat { order: 2; } .pa-grid.is-list .pa-title { order: 3; flex: 1 1 200px; font-size: 1.15rem; }
.pa-grid.is-list .pa-desc { order: 4; flex: 2 1 280px; }
.pa-grid.is-list .pa-points { display: none; }
.pa-grid.is-list .pa-actions { order: 6; margin: 0; }
@media (max-width: 767.98px) { .pa-grid.is-list .pa-card { flex-direction: column; align-items: flex-start; } .pa-grid.is-list .pa-top { width: 100%; justify-content: space-between; } }

.pa-empty { max-width: 560px; margin: 2rem auto 0; padding: 2.5rem 1.5rem; border-radius: 24px; background: var(--surface, rgba(255,255,255,.06)); border: 1px dashed var(--line, rgba(255,255,255,.3)); }
.pa-empty[hidden] { display: none; }
.chip-btn { cursor: pointer; transition: all .3s var(--transition-smooth); min-height: 36px; }
.chip-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 18px rgba(0,0,0,.25); }
.pa-h6 { color: var(--acc, #fbbf24); letter-spacing: .12em; }

/* shortlist */
.pa-fab { position: fixed; left: 18px; bottom: 18px; z-index: 1029; display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.1rem; border-radius: 50px; font-weight: 700; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); border: 0; box-shadow: 0 14px 30px rgba(245,158,11,.45); opacity: 0; visibility: hidden; transform: translateY(20px) scale(.9); transition: all .4s var(--transition-smooth); }
.pa-fab.show { opacity: 1; visibility: visible; transform: none; }
.pa-fab:hover { transform: translateY(-4px) scale(1.04); }
.pa-fab b { min-width: 24px; height: 24px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; background: #0f172a; color: #fde68a; font-size: .78rem; }
@media (max-width: 767.98px) { .pa-fab { bottom: 84px; } }
.pa-offcanvas { --bs-offcanvas-bg: var(--modal, #223866); --bs-offcanvas-color: var(--text, #fff); border-left: 1px solid var(--line, rgba(255,255,255,.2)); backdrop-filter: blur(20px); }
.pa-offcanvas .btn-close { filter: none; }
html[data-theme="navy"] .pa-offcanvas .btn-close, html[data-theme="dark"] .pa-offcanvas .btn-close, html[data-theme="medium"] .pa-offcanvas .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.pa-short-row { display: flex; align-items: center; gap: .8rem; padding: .7rem; border-radius: 14px; margin-bottom: .6rem; background: var(--surface, rgba(255,255,255,.08)); border: 1px solid var(--line, rgba(255,255,255,.18)); animation: ptUp .4s var(--transition-smooth) both; }
.pa-short-name { flex: 1; text-align: left; background: transparent; border: 0; color: var(--text, #fff); font-weight: 700; padding: 0; }
.pa-short-name:hover { color: var(--acc, #fbbf24); }

/* modal */
.modal-content.pa-modal { color: var(--text, #fff); background: var(--modal, #223866); border: 1px solid var(--line, rgba(255,255,255,.2)); border-radius: 26px; box-shadow: 0 30px 80px rgba(0,0,0,.5); overflow: hidden; }
.pa-modal .modal-header { background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(56,189,248,.12)); padding: 1.4rem 1.5rem 1rem; }
.pa-modal .btn-close { filter: none; }
html[data-theme="navy"] .pa-modal .btn-close, html[data-theme="dark"] .pa-modal .btn-close, html[data-theme="medium"] .pa-modal .btn-close { filter: invert(1) grayscale(1) brightness(2); }
.modal.fade .modal-dialog { transform: translateY(40px) scale(.96); transition: transform .45s var(--transition-smooth); } .modal.show .modal-dialog { transform: none; }

/* checklist */
.pa-panel { padding: clamp(1.2rem, 3vw, 2rem); border-radius: 26px; background: var(--surface, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.18)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.pa-donut { --p: 0%; width: 104px; aspect-ratio: 1; border-radius: 50%; flex-shrink: 0; position: relative; background: conic-gradient(#34d399 0 var(--p), rgba(128,150,190,.3) var(--p) 100%); transition: background .6s; }
.pa-donut::after { content: ''; position: absolute; inset: 11px; border-radius: 50%; background: var(--bg2, #223866); }
.pa-donut span { position: absolute; inset: 0; z-index: 1; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.3rem; color: var(--text, #fff); }
.pa-ck-item { display: flex; align-items: center; gap: .9rem; padding: .85rem 1rem; margin-bottom: .6rem; border-radius: 14px; cursor: pointer; background: var(--input, rgba(255,255,255,.05)); border: 1px solid var(--line, rgba(255,255,255,.14)); transition: all .3s var(--transition-smooth); }
.pa-ck-item:hover { transform: translateX(6px); border-color: #38bdf8; }
.pa-ck-item input { position: absolute; opacity: 0; pointer-events: none; }
.pa-ck-item .box { width: 28px; height: 28px; flex-shrink: 0; border-radius: 9px; border: 2px solid var(--mute, #94a3b8); display: inline-flex; align-items: center; justify-content: center; color: transparent; transition: all .3s; }
.pa-ck-item input:focus-visible + .box { outline: 3px solid #fbbf24; outline-offset: 2px; }
.pa-ck-item.done .box { background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: transparent; color: #0f172a; animation: ptPop .35s var(--transition-smooth); }
.pa-ck-item.done .txt { text-decoration: line-through; opacity: .65; }
.pa-ck-item .txt { color: var(--text, #fff); font-weight: 600; }

@media (max-width: 575.98px) { .pa-toolbar { padding: .9rem; } .pa-search { padding-left: .8rem; } .pa-search .btn { padding-inline: 1rem; } }
@media (hover: none) { .pa-card:hover, .pa-ck-item:hover { transform: none; } }

/* ==========================================================================
   18. SOCIAL LINKS (animated brand buttons, every page footer)
   ========================================================================== */
.soc-row { display: flex; flex-wrap: wrap; align-items: center; gap: .65rem; padding-top: .25rem; }
.social-btn { --brand: #1e3a5f; position: relative; width: 46px; height: 46px; border-radius: 15px; display: inline-flex; align-items: center; justify-content: center; color: #fff !important; text-decoration: none; font-size: 1.2rem; border: 1px solid rgba(255,255,255,.28) !important; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand) 55%, color-mix(in srgb, var(--brand) 78%, #000)) !important; box-shadow: 0 8px 18px color-mix(in srgb, var(--brand) 40%, transparent), inset 0 1px 0 rgba(255,255,255,.35); overflow: visible; isolation: isolate; transition: transform .4s var(--transition-smooth), box-shadow .4s ease; animation: socIn .6s var(--transition-smooth) both; animation-delay: calc(var(--i, 0) * 70ms + 100ms); }
.social-btn::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.55) 50%, transparent 65%) 130% 0 / 260% 100% no-repeat; transition: background-position .8s ease; z-index: 1; pointer-events: none; }
.social-btn::after { content: attr(data-label); position: absolute; bottom: calc(100% + 12px); left: 50%; transform: translate(-50%, 8px) scale(.9); white-space: nowrap; padding: .35rem .75rem; border-radius: 10px; font-size: .75rem; font-weight: 700; letter-spacing: .02em; color: #fff; background: var(--brand); box-shadow: 0 8px 20px rgba(0,0,0,.35); opacity: 0; pointer-events: none; transition: all .3s var(--transition-smooth); z-index: 5; }
.social-btn i { position: relative; z-index: 2; transition: transform .4s var(--transition-smooth); filter: drop-shadow(0 2px 3px rgba(0,0,0,.25)); }
.social-btn:hover, .social-btn:focus-visible { transform: translateY(-7px) rotate(-5deg) scale(1.1); box-shadow: 0 16px 30px color-mix(in srgb, var(--brand) 60%, transparent), 0 0 0 4px color-mix(in srgb, var(--brand) 30%, transparent) !important; color: #fff !important; }
.social-btn:hover::before, .social-btn:focus-visible::before { background-position: -30% 0; }
.social-btn:hover::after, .social-btn:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.social-btn:hover i { transform: scale(1.18) rotate(8deg); }
.social-btn:active { transform: translateY(-2px) scale(.96); }
.soc-row:hover .social-btn:not(:hover) { filter: saturate(.7) brightness(.85); }
@keyframes socIn { from { opacity: 0; transform: translateY(18px) scale(.6) rotate(-12deg); } to { opacity: 1; transform: none; } }
@media (max-width: 575.98px) { .social-btn { width: 44px; height: 44px; } .social-btn::after { display: none; } }
@media (hover: none) { .social-btn:hover { transform: none; } }


/* ==========================================================================
   19. INSIGHT PAGE
   ========================================================================== */
.in-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; font-size: .8rem; color: var(--mute, #94a3b8); margin-bottom: .6rem; }
.in-meta i { color: var(--acc, #fbbf24); margin-right: .3rem; }

/* featured */
.in-feature { --rx: 0deg; --ry: 0deg; display: grid; grid-template-columns: minmax(220px, 38%) 1fr; height: 100%; min-height: 380px; overflow: hidden; border-radius: 28px; background: var(--surface, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.18)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 56px rgba(0,0,0,.28); transform: perspective(1100px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .25s ease-out, border-color .4s; }
.in-feature:hover { border-color: rgba(245,158,11,.55); }
.in-feature-art { position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; background: linear-gradient(135deg, #38bdf8, #2563eb 50%, #4338ca); }
.in-feature-art::before { content: ''; position: absolute; inset: -30%; background: conic-gradient(from 0deg, transparent, rgba(255,255,255,.28), transparent 30%); animation: abSpin 12s linear infinite; }
.in-feature-art::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(255,255,255,.2), transparent 50%); }
.in-feature-art i { position: relative; z-index: 1; font-size: clamp(5rem, 12vw, 8rem); color: rgba(255,255,255,.92); filter: drop-shadow(0 12px 28px rgba(0,0,0,.35)); animation: abBob 5s ease-in-out infinite; }
.in-feature-body { padding: clamp(1.4rem, 3.5vw, 2.6rem); display: flex; flex-direction: column; justify-content: center; }
@media (max-width: 767.98px) { .in-feature { grid-template-columns: 1fr; } .in-feature-art { min-height: 190px; } }
.in-latest { width: 100%; display: flex; align-items: center; gap: .85rem; padding: .7rem; margin-bottom: .55rem; border-radius: 14px; background: var(--input, rgba(255,255,255,.05)); border: 1px solid var(--line, rgba(255,255,255,.14)); color: var(--text, #fff); transition: all .3s var(--transition-smooth); }
.in-latest:hover { transform: translateX(6px); border-color: #f59e0b; background: var(--surface2, rgba(255,255,255,.12)); }
.in-latest b { display: block; font-size: .9rem; line-height: 1.3; color: var(--text, #fff); } .in-latest small { color: var(--mute, #94a3b8); }

/* topic tiles */
.in-tile { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; gap: .45rem; padding: 1.3rem .8rem; text-align: center; border-radius: 22px; color: var(--text, #fff); background: var(--surface, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.16)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); position: relative; overflow: hidden; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.in-tile-i { width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 10px 22px rgba(245,158,11,.32); transition: transform .5s var(--transition-smooth); }
.in-tile b { font-size: .95rem; } .in-tile small { color: var(--mute, #94a3b8); }
.in-tile:hover { transform: translateY(-8px); border-color: #38bdf8; box-shadow: 0 18px 36px rgba(14,165,233,.2); }
.in-tile:hover .in-tile-i { transform: rotate(-10deg) scale(1.12); }
.in-tile.on { border-color: #f59e0b; box-shadow: 0 0 0 3px rgba(245,158,11,.3); }

/* cards */
.in-item.is-hidden { display: none; }
.in-item.pa-in { animation: ptUp .55s var(--transition-smooth) both; }
.in-card { display: flex; flex-direction: column; height: 100%; overflow: hidden; border-radius: 24px; background: var(--surface, rgba(255,255,255,.06)); border: 1px solid var(--line, rgba(255,255,255,.14)); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: transform .45s var(--transition-smooth), box-shadow .45s, border-color .45s; }
.in-card:hover { transform: translateY(-10px); border-color: rgba(245,158,11,.55); box-shadow: 0 24px 48px rgba(0,0,0,.32), 0 0 26px rgba(245,158,11,.12); }
.in-cover { position: relative; height: 150px; display: flex; align-items: flex-start; justify-content: space-between; padding: 1rem; overflow: hidden; }
.in-cover::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 85% 20%, rgba(255,255,255,.28), transparent 45%), repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 2px, transparent 2px 14px); }
.in-cover > i { position: absolute; right: -8px; bottom: -22px; font-size: 7.5rem; color: rgba(255,255,255,.28); transform: rotate(-12deg); transition: transform .6s var(--transition-smooth); }
.in-card:hover .in-cover > i { transform: rotate(0) scale(1.15); }
.in-topic { position: relative; z-index: 1; padding: .35rem .85rem; border-radius: 50px; font-size: .75rem; font-weight: 800; letter-spacing: .04em; color: #fff; background: rgba(15,23,42,.45); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.in-save { position: relative; z-index: 2; background: rgba(15,23,42,.45) !important; color: #fff !important; border-color: rgba(255,255,255,.35) !important; }
.in-save.on { background: linear-gradient(135deg, #fde68a, #f59e0b) !important; color: #0f172a !important; border-color: transparent !important; }
.c-business { background: linear-gradient(135deg, #f59e0b, #b45309 45%, #1d4ed8); }
.c-personal { background: linear-gradient(135deg, #a78bfa, #7c3aed 50%, #be185d); }
.c-disputes { background: linear-gradient(135deg, #f87171, #dc2626 45%, #7c2d12); }
.c-finance { background: linear-gradient(135deg, #34d399, #059669 45%, #0e7490); }
.c-prop { background: linear-gradient(135deg, #38bdf8, #2563eb 50%, #4338ca); }
.in-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem 1.4rem 1.4rem; }
.in-title { font-size: 1.15rem; font-weight: 800; line-height: 1.35; color: var(--text, #fff); margin-bottom: .55rem; }
.in-sum { font-size: .9rem; color: var(--mute, #94a3b8); }
.in-tags { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1rem; }
.in-tag { font-size: .72rem; font-weight: 700; padding: .2rem .6rem; border-radius: 50px; color: var(--acc2, #7dd3fc); background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.28); }
.in-actions { margin-top: auto; }
.in-grid.is-list > .in-item { flex: 0 0 100%; max-width: 100%; }
.in-grid.is-list .in-card { flex-direction: row; }
.in-grid.is-list .in-cover { width: 230px; height: auto; flex-shrink: 0; }
@media (max-width: 767.98px) { .in-grid.is-list .in-card { flex-direction: column; } .in-grid.is-list .in-cover { width: 100%; height: 130px; } }

/* continue reading */
.in-cont { display: flex; align-items: center; gap: 1rem; padding: .9rem 1.2rem; margin-bottom: 1rem; border-radius: 18px; background: linear-gradient(135deg, rgba(245,158,11,.16), rgba(56,189,248,.12)); border: 1px solid var(--line, rgba(255,255,255,.2)); animation: ptUp .5s var(--transition-smooth) both; }
.in-cont[hidden] { display: none; }
.in-cont > i { font-size: 1.6rem; color: var(--acc, #fbbf24); } .in-cont small { display: block; color: var(--mute, #94a3b8); } .in-cont b { color: var(--text, #fff); }

/* quick tips */
.in-tips { position: relative; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 28px; overflow: hidden; background: var(--surface, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.18)); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 24px 56px rgba(0,0,0,.25); }
.in-tips::before { content: '\201C'; position: absolute; top: -34px; left: 18px; font-size: 11rem; font-family: Georgia, serif; line-height: 1; color: rgba(245,158,11,.18); pointer-events: none; }
.in-tip-stage { position: relative; min-height: 220px; }
.in-tip { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: column; justify-content: center; opacity: 0; visibility: hidden; transform: translateX(40px); transition: opacity .6s var(--transition-smooth), transform .6s var(--transition-smooth), visibility .6s; }
.in-tip.on { opacity: 1; visibility: visible; transform: none; }
.in-tip-n { font-size: 3rem; font-weight: 900; line-height: 1; background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; }
.in-tip blockquote { font-size: clamp(1.25rem, 3vw, 1.9rem); font-weight: 700; line-height: 1.4; color: var(--text, #fff); margin: .5rem 0 1.2rem; }
.in-tip figcaption { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.2rem; }
.in-tip-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.2rem; }
.in-tip-dots { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.in-tip-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: var(--line, rgba(255,255,255,.3)); transition: all .3s; }
.in-tip-dots button.on { width: 34px; border-radius: 8px; background: linear-gradient(90deg, #f59e0b, #38bdf8); }
@media (max-width: 575.98px) { .in-tip-stage { min-height: 300px; } }

/* glossary flip cards */
.g-item.is-hidden { display: none; }
.in-flip { perspective: 1000px; height: 200px; cursor: pointer; outline: none; }
.in-flip:focus-visible { outline: 3px solid #fbbf24; outline-offset: 4px; border-radius: 22px; }
.in-flip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .8s var(--transition-smooth); }
.in-flip:hover .in-flip-in { transform: rotateY(12deg) rotateX(4deg); }
.in-flip.flipped .in-flip-in, .in-flip.flipped:hover .in-flip-in { transform: rotateY(180deg); }
.in-face { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.2rem; border-radius: 22px; border: 1px solid var(--line, rgba(255,255,255,.18)); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden; }
.in-face.front { background: var(--surface, rgba(255,255,255,.08)); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
.in-face.back { transform: rotateY(180deg); background: linear-gradient(135deg, rgba(14,165,233,.28), rgba(99,102,241,.26)), var(--modal, #223866); }
.in-letter { position: absolute; top: -18px; right: 8px; font-size: 6.5rem; font-weight: 900; line-height: 1; color: rgba(245,158,11,.2); }
.in-face h3 { font-size: 1.2rem; font-weight: 800; color: var(--text, #fff); margin-bottom: .4rem; position: relative; }
.in-face.front small { color: var(--mute, #94a3b8); position: relative; } .in-face.back p { color: var(--soft, #e2e8f0); font-size: .93rem; margin: 0; }

/* quiz */
.in-opt { display: flex; align-items: center; gap: .9rem; width: 100%; text-align: left; padding: .9rem 1.1rem; border-radius: 16px; font-weight: 600; color: var(--text, #fff); background: var(--input, rgba(255,255,255,.06)); border: 1px solid var(--line, rgba(255,255,255,.18)); transition: all .3s var(--transition-smooth); min-height: 56px; }
.in-opt-l { width: 34px; height: 34px; flex-shrink: 0; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; font-weight: 800; background: rgba(128,150,190,.25); transition: all .3s; }
.in-opt:hover:not(:disabled) { transform: translateX(6px); border-color: #f59e0b; }
.in-opt.ok { border-color: #34d399; background: rgba(52,211,153,.16); animation: ptPop .4s var(--transition-smooth); } .in-opt.ok .in-opt-l { background: #34d399; color: #052e22; }
.in-opt.bad { border-color: #f87171; background: rgba(248,113,113,.16); animation: abShake .45s; } .in-opt.bad .in-opt-l { background: #f87171; color: #3b0a0a; }
.in-opt.dim { opacity: .55; }
@keyframes abShake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
.in-explain { padding: .9rem 1.1rem; border-radius: 14px; background: rgba(56,189,248,.12); border: 1px solid rgba(56,189,248,.35); color: var(--soft, #e2e8f0); animation: ptUp .4s var(--transition-smooth) both; }
.in-explain[hidden] { display: none; } .in-explain i { color: var(--acc2, #7dd3fc); margin-right: .4rem; }

/* media */
.in-yt { color: #fff !important; background: linear-gradient(135deg, #ff4b4b, #cc0000) !important; border: 0; box-shadow: 0 12px 28px rgba(255,0,0,.35); transition: transform .3s var(--transition-smooth), box-shadow .3s; }
.in-yt:hover { transform: translateY(-4px) scale(1.03); box-shadow: 0 18px 36px rgba(255,0,0,.5); }
.in-wave { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; height: 190px; border-radius: 26px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.2); }
.in-wave span { width: 9px; height: 30%; border-radius: 8px; background: linear-gradient(180deg, #fde68a, #38bdf8); animation: abEq 1.2s ease-in-out infinite; }
.in-wave span:nth-child(odd) { animation-duration: 1.6s; } .in-wave span:nth-child(3n) { animation-delay: -.4s; } .in-wave span:nth-child(4n) { animation-delay: -.8s; } .in-wave span:nth-child(5n) { animation-delay: -1.1s; }
.in-wave i { position: absolute; font-size: 2.2rem; color: #0f172a; width: 74px; height: 74px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 12px 30px rgba(245,158,11,.5); animation: ptRing 2s infinite; }
@keyframes abEq { 0%, 100% { height: 18%; } 50% { height: 78%; } }

/* reader */
.in-read-bar { position: absolute; top: 0; left: 0; right: 0; height: 4px; z-index: 5; background: rgba(128,150,190,.25); } .in-read-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #38bdf8, #a78bfa); transition: width .15s linear; }
.in-article p { font-size: calc(1.02rem * var(--in-fs, 1)); line-height: 1.9; color: var(--soft, #e2e8f0); }
#rBody { --in-fs: 1; } #rBody .lead { font-size: calc(1.2rem * var(--in-fs, 1)); }
.in-note { padding: .8rem 1rem; border-radius: 12px; font-size: .85rem; color: var(--mute, #94a3b8); background: var(--input, rgba(255,255,255,.06)); border: 1px dashed var(--line, rgba(255,255,255,.25)); } .in-note i { color: var(--acc2, #7dd3fc); margin-right: .4rem; }
@media (hover: none) { .in-card:hover, .in-tile:hover, .in-latest:hover, .in-opt:hover { transform: none; } .in-flip:hover .in-flip-in { transform: none; } }

.in-opts { display: grid; gap: 1rem; } .in-opts[hidden] { display: none; }


/* ==========================================================================
   20. SITE-WIDE EXTRAS: nav tools, search, language, cookies, accessibility
   ========================================================================== */
body.site-body { animation: pageIn .55s ease both; }
body.site-body.page-leave { opacity: 0; transition: opacity .22s ease; }
@keyframes pageIn { from { opacity: 0; } to { opacity: 1; } }
html[lang="am"] body, html[lang="am"] button, html[lang="am"] input { font-family: 'Noto Sans Ethiopic', 'Nyala', 'Abyssinica SIL', system-ui, sans-serif; }

.nav-tool { display: inline-flex; align-items: center; justify-content: center; gap: .35rem; min-width: 44px; height: 44px; padding: 0 .75rem; border-radius: 50px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); color: #fff !important; font-weight: 700; font-size: .85rem; transition: all .3s var(--transition-smooth); }
.nav-tool:hover, .nav-tool[aria-expanded="true"] { background: rgba(255,255,255,.2); border-color: #fff; transform: translateY(-2px); }
.nav-tool i { font-size: 1.05rem; }
.nav-tool.dropdown-toggle::after { display: none; }
.lang-menu { min-width: min(230px, calc(100vw - 2rem)); }
.lang-opt { width: 100%; display: flex; align-items: center; gap: .75rem; background: transparent; border: 0; text-align: left; }
.lang-opt b { width: 34px; height: 24px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; font-size: .72rem; background: rgba(255,255,255,.14); }
.lang-opt .tick { margin-left: auto; color: #fbbf24; opacity: 0; transition: opacity .25s; }
.lang-opt.active { background: rgba(251,191,36,.12) !important; } .lang-opt.active .tick { opacity: 1; }
@media (min-width: 992px) and (max-width: 1399.98px) {
  .vanguard-nav .navbar-nav { gap: .1rem !important; }
  .nav-link-vanguard { padding: .5rem .55rem !important; font-size: .95rem !important; }
  .vanguard-nav .navbar-brand .brand-name-glow { font-size: 1.15rem !important; }
  .btn-nav-cta { padding: .5rem 1rem !important; }
}
@media (max-width: 991.98px) { .nav-tool { width: 100%; justify-content: center; } .nav-tools-row { display: flex; gap: .6rem; } .nav-tools-row > li { flex: 1; } }

/* search overlay */
.sx { position: fixed; inset: 0; z-index: 3500; display: flex; align-items: flex-start; justify-content: center; padding: clamp(.75rem, 8vh, 5rem) .75rem .75rem; }
.sx[hidden] { display: none; }
.sx-backdrop { position: absolute; inset: 0; background: rgba(6,12,30,.62); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); animation: ptFade .25s both; }
.sx-box { position: relative; width: min(760px, 100%); max-height: min(82vh, 760px); display: flex; flex-direction: column; border-radius: 26px; background: var(--modal, #223866); color: var(--text, #fff); border: 1px solid var(--line, rgba(255,255,255,.2)); box-shadow: 0 40px 100px rgba(0,0,0,.55); overflow: hidden; animation: sxIn .35s var(--transition-smooth) both; }
@keyframes sxIn { from { opacity: 0; transform: translateY(-24px) scale(.97); } to { opacity: 1; transform: none; } }
.sx-head { display: flex; align-items: center; gap: .8rem; padding: 1rem 1.2rem; border-bottom: 1px solid var(--line, rgba(255,255,255,.18)); background: linear-gradient(135deg, rgba(245,158,11,.12), rgba(56,189,248,.1)); }
.sx-head > i { font-size: 1.3rem; color: var(--acc, #fbbf24); }
.sx-head input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--text, #fff); font-size: 1.15rem; padding: .4rem 0; }
.sx-head input::placeholder { color: var(--mute, #94a3b8); }
.sx-head input::-webkit-search-cancel-button { display: none; }
kbd { display: inline-block; padding: .1rem .5rem; border-radius: 6px; font-size: .72rem; font-family: inherit; font-weight: 700; color: var(--soft, #e2e8f0); background: var(--input, rgba(255,255,255,.1)); border: 1px solid var(--line, rgba(255,255,255,.25)); border-bottom-width: 2px; }
.sx-x { width: 36px; height: 36px; border-radius: 50%; border: 0; font-size: 1.2rem; line-height: 1; color: var(--text, #fff); background: var(--surface2, rgba(255,255,255,.15)); transition: transform .25s; } .sx-x:hover { transform: rotate(90deg); }
.sx-filters { display: flex; flex-wrap: wrap; gap: .45rem; padding: .8rem 1.2rem 0; }
.sx-chip { padding: .35rem .9rem; border-radius: 50px; font-size: .8rem; font-weight: 700; color: var(--text, #fff); background: var(--input, rgba(255,255,255,.08)); border: 1px solid var(--line, rgba(255,255,255,.2)); transition: all .25s; min-height: 34px; }
.sx-chip:hover { border-color: #f59e0b; } .sx-chip.on { color: #0f172a; border-color: transparent; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.sx-body { overflow-y: auto; padding: .8rem 1rem 1rem; }
.sx-group { font-size: .7rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2, #7dd3fc); padding: .8rem .4rem .35rem; }
.sx-item { display: flex; align-items: center; gap: .9rem; padding: .7rem .8rem; border-radius: 14px; text-decoration: none; color: var(--text, #fff); border: 1px solid transparent; transition: background .2s, border-color .2s, transform .2s; }
.sx-item:hover, .sx-item.sel { background: var(--surface2, rgba(255,255,255,.12)); border-color: rgba(245,158,11,.5); transform: translateX(4px); color: var(--text, #fff); }
.sx-ic { width: 40px; height: 40px; flex-shrink: 0; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.sx-t { display: block; font-weight: 700; } .sx-d { display: block; font-size: .8rem; color: var(--mute, #94a3b8); line-height: 1.4; }
.sx-item mark { background: rgba(251,191,36,.35); color: inherit; border-radius: 4px; padding: 0 2px; }
.sx-go { margin-left: auto; color: var(--mute, #94a3b8); opacity: 0; transition: opacity .2s; } .sx-item.sel .sx-go, .sx-item:hover .sx-go { opacity: 1; }
.sx-chips { display: flex; flex-wrap: wrap; gap: .5rem; padding: 0 .4rem; }
.sx-foot { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; padding: .7rem 1rem; font-size: .78rem; color: var(--mute, #94a3b8); border-top: 1px solid var(--line, rgba(255,255,255,.18)); }
.sx-empty { text-align: center; padding: 2rem 1rem; color: var(--mute, #94a3b8); } .sx-empty i { font-size: 2.4rem; color: var(--acc, #fbbf24); display: block; margin-bottom: .6rem; }
@media (max-width: 575.98px) { .sx-foot span:nth-child(3) { display: none; } }

/* cookie banner + dialog */
.ck-bar { position: fixed; left: 16px; bottom: 16px; z-index: 3200; width: min(470px, calc(100vw - 32px)); padding: 1.3rem 1.4rem; border-radius: 22px; color: var(--text, #fff); background: color-mix(in srgb, var(--modal, #223866) 94%, transparent); border: 1px solid var(--line, rgba(255,255,255,.22)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 24px 60px rgba(0,0,0,.45); animation: ckIn .6s var(--transition-smooth) both; }
.ck-bar[hidden] { display: none; }
@keyframes ckIn { from { opacity: 0; transform: translateY(30px) scale(.96); } to { opacity: 1; transform: none; } }
.ck-bar h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .4rem; display: flex; align-items: center; gap: .55rem; } .ck-bar h2 i { color: var(--acc, #fbbf24); font-size: 1.3rem; animation: abBob 3s ease-in-out infinite; }
.ck-bar p { font-size: .86rem; color: var(--soft, #e2e8f0); margin: 0 0 1rem; } .ck-bar p a { color: var(--acc2, #7dd3fc); }
.ck-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.ck-actions .btn { font-size: .85rem; padding: .55rem 1rem; font-weight: 700; flex: 1 1 auto; }
.ck-dialog { position: fixed; inset: 0; z-index: 3600; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.ck-dialog[hidden] { display: none; }
.ck-panel { position: relative; width: min(560px, 100%); max-height: 90vh; overflow-y: auto; padding: 1.6rem; border-radius: 26px; color: var(--text, #fff); background: var(--modal, #223866); border: 1px solid var(--line, rgba(255,255,255,.2)); box-shadow: 0 40px 100px rgba(0,0,0,.55); animation: sxIn .35s var(--transition-smooth) both; }
.ck-row { display: flex; align-items: center; gap: 1rem; padding: .9rem 1rem; margin-bottom: .7rem; border-radius: 16px; background: var(--input, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.16)); }
.ck-row b { display: block; } .ck-row small { color: var(--mute, #94a3b8); display: block; }
.ck-sw { position: relative; width: 52px; height: 30px; flex-shrink: 0; margin-left: auto; }
.ck-sw input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; z-index: 2; }
.ck-sw span { position: absolute; inset: 0; border-radius: 30px; background: rgba(128,150,190,.4); transition: background .3s; }
.ck-sw span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0,0,0,.3); transition: transform .3s var(--transition-smooth); }
.ck-sw input:checked + span { background: linear-gradient(135deg, #f59e0b, #d97706); } .ck-sw input:checked + span::after { transform: translateX(22px); }
.ck-sw input:disabled { cursor: not-allowed; } .ck-sw input:disabled + span { opacity: .6; }
.ck-sw input:focus-visible + span { outline: 3px solid #fbbf24; outline-offset: 3px; }
.ck-map { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8rem; text-align: center; padding: 1.5rem; color: #fff; background: radial-gradient(circle at 50% 30%, #1e3a6e, #0b1220); }
.ck-map i { font-size: 2.4rem; color: #fbbf24; }

/* accessibility widget */
.ax-btn { position: fixed; right: 18px; bottom: 78px; z-index: 3000; width: 48px; height: 48px; border-radius: 50%; border: 2px solid rgba(255,255,255,.55); color: #fff; font-size: 1.35rem; background: linear-gradient(135deg, #2563eb, #1d4ed8); box-shadow: 0 12px 28px rgba(37,99,235,.5); display: flex; align-items: center; justify-content: center; transition: transform .3s var(--transition-smooth); }
.ax-btn:hover { transform: scale(1.12) rotate(-8deg); }
@media (max-width: 767.98px) { .ax-btn { bottom: 142px; width: 44px; height: 44px; } }
.ax-panel { position: fixed; right: 18px; bottom: 136px; z-index: 3100; width: min(330px, calc(100vw - 36px)); padding: 1.2rem; border-radius: 22px; color: var(--text, #fff); background: var(--modal, #223866); border: 1px solid var(--line, rgba(255,255,255,.22)); box-shadow: 0 28px 70px rgba(0,0,0,.5); animation: sxIn .3s var(--transition-smooth) both; }
.ax-panel[hidden] { display: none; }
@media (max-width: 767.98px) { .ax-panel { bottom: 196px; } }
.ax-panel h2 { font-size: 1.05rem; font-weight: 800; margin: 0 0 .8rem; display: flex; justify-content: space-between; align-items: center; }
.ax-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.ax-opt { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: .7rem .4rem; border-radius: 14px; font-size: .78rem; font-weight: 700; text-align: center; color: var(--text, #fff); background: var(--input, rgba(255,255,255,.07)); border: 1px solid var(--line, rgba(255,255,255,.18)); transition: all .25s; min-height: 70px; }
.ax-opt i { font-size: 1.3rem; color: var(--acc, #fbbf24); }
.ax-opt:hover { border-color: #f59e0b; transform: translateY(-2px); }
.ax-opt[aria-pressed="true"] { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #0f172a; border-color: transparent; } .ax-opt[aria-pressed="true"] i { color: #0f172a; }
.ax-size { grid-column: 1 / -1; flex-direction: row; justify-content: space-between; }
.ax-size button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line, rgba(255,255,255,.25)); background: var(--surface2, rgba(255,255,255,.12)); color: var(--text, #fff); font-weight: 800; }
.ax-reset { grid-column: 1 / -1; background: transparent; border: 1px dashed var(--line, rgba(255,255,255,.3)); border-radius: 12px; color: var(--soft, #e2e8f0); padding: .5rem; font-weight: 700; }
/* accessibility modes */
html.ax-links a:not(.btn):not(.nav-link):not(.social-btn):not(.sx-item) { text-decoration: underline !important; text-underline-offset: 3px; }
html.ax-font body, html.ax-font body * { font-family: Verdana, Tahoma, 'Segoe UI', sans-serif !important; letter-spacing: .02em; word-spacing: .08em; }
html.ax-font .bi, html.ax-font [class^="bi-"], html.ax-font [class*=" bi-"] { font-family: 'bootstrap-icons' !important; }
html.ax-focus *:focus-visible { outline: 4px solid #ffbf00 !important; outline-offset: 4px !important; }
html.ax-motion *, html.ax-motion *::before, html.ax-motion *::after { animation: none !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
html.ax-contrast, html.ax-contrast[data-theme] { --bg: #000; --bg2: #0a0a0a; --modal: #000; --surface: #000; --surface2: #1a1a1a; --input: #000; --line: #fff; --text: #fff; --soft: #fff; --mute: #f2f2f2; --acc: #ffd400; --acc2: #6cf; --nav: #000; --foot1: #000; --foot2: #000; --shadow: none; --shadow-h: none; }
html.ax-contrast body { background: #000 !important; }
html.ax-contrast :is(.pa-card, .in-card, .ab-vmv, .hm-pa, .member-card, .value-card, .practice-card, .ab-step, .ab-stat, .pa-panel, .lg-card, .tm-card) { border: 2px solid #fff !important; background: #000 !important; }
html.ax-contrast a:not(.btn) { color: #6cf; }

/* ==========================================================================
   21. LEGAL PAGES
   ========================================================================== */
.lg-hero { position: relative; overflow: hidden; padding: clamp(3rem, 8vw, 5.5rem) 0 clamp(2.5rem, 6vw, 4rem); color: #fff; }
.lg-hero .hero-overlay { position: absolute; inset: 0; z-index: 1; } .lg-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lg-hero .container { position: relative; z-index: 3; }
.lg-icon { width: 84px; height: 84px; border-radius: 26px; display: inline-flex; align-items: center; justify-content: center; font-size: 2.4rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #38bdf8); box-shadow: 0 18px 44px rgba(245,158,11,.4); animation: abBob 5s ease-in-out infinite; }
.lg-crumbs { display: flex; flex-wrap: wrap; gap: .4rem; list-style: none; padding: 0; margin: 0 0 1rem; font-size: .85rem; } .lg-crumbs a { color: #bae6fd; text-decoration: none; } .lg-crumbs li + li::before { content: '/'; margin-right: .4rem; opacity: .6; }
.lg-meta { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.2rem; }
.lg-meta span { display: inline-flex; align-items: center; gap: .45rem; padding: .4rem .9rem; border-radius: 50px; font-size: .82rem; font-weight: 600; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .lg-meta i { color: #fbbf24; }
.lg-progress { position: fixed; top: 0; left: 0; height: 3px; width: 0; z-index: 2100; background: linear-gradient(90deg, #f59e0b, #fbbf24, #38bdf8, #818cf8); box-shadow: 0 0 12px rgba(251,191,36,.7); }
.lg-layout { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3.5rem); align-items: start; }
@media (max-width: 991.98px) { .lg-layout { grid-template-columns: 1fr; } }
.lg-toc { position: sticky; top: calc(var(--nav-h) + 20px); padding: 1.2rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); max-height: calc(100vh - var(--nav-h) - 40px); overflow-y: auto; }
@media (max-width: 991.98px) { .lg-toc { position: static; max-height: none; } .lg-toc ol { display: none; } .lg-toc.open ol { display: block; } .lg-toc-btn { display: flex !important; } }
.lg-toc h2 { font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--acc2); margin: 0 0 .8rem; }
.lg-toc-btn { display: none; width: 100%; justify-content: space-between; align-items: center; background: transparent; border: 0; color: var(--text); font-weight: 800; padding: 0; }
.lg-toc ol { list-style: none; margin: 0; padding: 0 0 0 .9rem; border-left: 2px solid var(--line); counter-reset: toc; }
.lg-toc li { counter-increment: toc; }
.lg-toc a { display: block; position: relative; padding: .42rem .6rem; margin-left: -1px; font-size: .88rem; font-weight: 600; color: var(--mute); text-decoration: none; border-radius: 8px; transition: all .25s; }
.lg-toc a::before { content: counter(toc) '. '; opacity: .7; }
.lg-toc a:hover { color: var(--text); background: var(--surface2); }
.lg-toc a.on { color: var(--acc); background: var(--surface2); box-shadow: inset 3px 0 0 var(--gold-accent); font-weight: 800; }
.lg-tools { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--line); }
.lg-tools .btn { flex: 1 1 auto; font-size: .82rem; padding: .5rem .7rem; }
.lg-content { counter-reset: sec; }
.lg-sec { position: relative; margin-bottom: 1.2rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 24px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); counter-increment: sec; transition: border-color .4s, transform .4s var(--transition-smooth); }
.lg-sec:hover { border-color: rgba(245,158,11,.45); }
.lg-sec h2 { display: flex; align-items: center; gap: .9rem; font-size: clamp(1.2rem, 2.4vw, 1.55rem); font-weight: 800; color: var(--text); margin: 0 0 1rem; }
.lg-sec h2::before { content: counter(sec); flex-shrink: 0; width: 42px; height: 42px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.05rem; font-weight: 800; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 8px 18px rgba(245,158,11,.3); }
.lg-sec p, .lg-sec li { color: var(--soft); line-height: 1.85; } .lg-sec ul { padding-left: 1.2rem; } .lg-sec li::marker { color: var(--acc); }
.lg-sec a { color: var(--acc2); }
.lg-sec h3 { font-size: 1.05rem; font-weight: 800; color: var(--text); margin: 1.2rem 0 .5rem; }
.lg-callout { display: flex; gap: 1rem; padding: 1rem 1.2rem; margin: 1rem 0; border-radius: 16px; border: 1px solid; }
.lg-callout > i { font-size: 1.5rem; flex-shrink: 0; margin-top: .15rem; } .lg-callout p { margin: 0; color: var(--text); }
.lg-callout.info { background: rgba(56,189,248,.12); border-color: rgba(56,189,248,.4); } .lg-callout.info > i { color: var(--acc2); }
.lg-callout.warn { background: rgba(251,191,36,.14); border-color: rgba(251,191,36,.5); } .lg-callout.warn > i { color: var(--acc); }
.lg-callout.ok { background: rgba(52,211,153,.12); border-color: rgba(52,211,153,.4); } .lg-callout.ok > i { color: var(--ok); }
.lg-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 1rem; margin: 1rem 0; }
.lg-card { padding: 1.2rem; border-radius: 20px; background: var(--input); border: 1px solid var(--line); transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; position: relative; overflow: hidden; }
.lg-card:hover { transform: translateY(-6px); border-color: #38bdf8; box-shadow: var(--shadow-h); }
.lg-card .ic { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); margin-bottom: .8rem; }
.lg-card h3 { margin: 0 0 .4rem; font-size: 1rem; } .lg-card p { margin: 0; font-size: .88rem; line-height: 1.6; }
.lg-table-wrap { overflow-x: auto; margin: 1rem 0; border-radius: 16px; border: 1px solid var(--line); }
.lg-table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .9rem; }
.lg-table th { text-align: left; padding: .8rem 1rem; font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--acc); background: var(--surface2); }
.lg-table td { padding: .8rem 1rem; color: var(--soft); border-top: 1px solid var(--line); vertical-align: top; }
.lg-table tr:hover td { background: var(--surface); } .lg-table code { color: var(--acc2); background: transparent; }
.lg-yes { color: var(--ok); } .lg-no { color: var(--bad); }
.lg-help { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.2rem 1.5rem; border-radius: 22px; background: linear-gradient(135deg, rgba(245,158,11,.14), rgba(56,189,248,.12)); border: 1px solid var(--line); }
.lg-help button { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line); background: var(--surface2); color: var(--text); font-size: 1.2rem; transition: all .3s var(--transition-smooth); } .lg-help button:hover { transform: scale(1.15); border-color: #f59e0b; } .lg-help button.on { background: linear-gradient(135deg, #fde68a, #f59e0b); color: #0f172a; }
.lg-rel a { display: flex; align-items: center; gap: .9rem; height: 100%; padding: 1rem 1.2rem; border-radius: 18px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: all .35s var(--transition-smooth); } .lg-rel a:hover { transform: translateY(-5px); border-color: #f59e0b; box-shadow: var(--shadow-h); color: var(--text); }
.lg-rel i.main { font-size: 1.6rem; color: var(--acc); } .lg-rel small { display: block; color: var(--mute); }
.lg-stor { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .82rem; }
.lg-vcard { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.lg-kv { padding: 1rem 1.2rem; border-radius: 16px; background: var(--input); border: 1px solid var(--line); } .lg-kv small { display: block; text-transform: uppercase; letter-spacing: .1em; font-size: .7rem; font-weight: 800; color: var(--acc2); } .lg-kv b { color: var(--text); overflow-wrap: anywhere; }
.lg-ph { background: rgba(251,191,36,.2); color: var(--acc); padding: 0 .35rem; border-radius: 5px; font-weight: 700; }
.lg-filter { max-width: 520px; margin: 0 auto 2rem; }
.sm-group { margin-bottom: 1.5rem; } .sm-group h2 { font-size: 1rem; text-transform: uppercase; letter-spacing: .12em; color: var(--acc2); margin-bottom: .8rem; }
.sm-link { display: flex; align-items: center; gap: .8rem; padding: .8rem 1rem; border-radius: 14px; text-decoration: none; color: var(--text); background: var(--surface); border: 1px solid var(--line); transition: all .3s var(--transition-smooth); height: 100%; } .sm-link:hover { transform: translateX(6px); border-color: #f59e0b; color: var(--text); } .sm-link i { color: var(--acc); font-size: 1.2rem; } .sm-link small { display: block; color: var(--mute); }
@media print { .vanguard-nav, .vanguard-footer, .lg-toc, .lg-tools, .lg-help, .lg-progress, .hm-dots, .hm-mobilebar, .ab-top, .ax-btn, .ck-bar, .lg-hero img, .lg-rel, .sx { display: none !important; } .lg-layout { display: block; } .lg-sec { break-inside: avoid; box-shadow: none; border: 1px solid #bbb; background: #fff; } .lg-sec * { color: #000 !important; } body.site-body { background: #fff !important; color: #000 !important; } .lg-hero { color: #000; padding: 1rem 0; } }

/* ==========================================================================
   22. TESTIMONIALS
   ========================================================================== */
.tm-wrap { position: relative; }
.tm-stage { position: relative; min-height: 340px; }
.tm-card { position: absolute; inset: 0; display: grid; grid-template-columns: 220px 1fr; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center; padding: clamp(1.4rem, 4vw, 2.6rem); border-radius: 28px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); opacity: 0; visibility: hidden; transform: translateX(50px) scale(.97); transition: opacity .6s var(--transition-smooth), transform .6s var(--transition-smooth), visibility .6s; overflow: hidden; }
.tm-card.on { opacity: 1; visibility: visible; transform: none; }
.tm-card::before { content: '\201C'; position: absolute; top: -40px; right: 20px; font-family: Georgia, serif; font-size: 13rem; line-height: 1; color: rgba(245,158,11,.14); pointer-events: none; }
.tm-person { text-align: center; }
.tm-av { width: 104px; height: 104px; margin: 0 auto 1rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 800; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b 55%, #38bdf8); box-shadow: 0 0 0 5px var(--surface2), 0 16px 36px rgba(245,158,11,.35); }
.tm-person b { display: block; color: var(--text); } .tm-person small { color: var(--mute); }
.tm-stars { color: #fbbf24; letter-spacing: .15em; margin: .6rem 0; font-size: 1.05rem; }
.tm-quote { font-size: clamp(1.05rem, 2.2vw, 1.4rem); line-height: 1.7; font-weight: 600; color: var(--text); margin: 0 0 1rem; }
.tm-tag { display: inline-flex; gap: .4rem; align-items: center; }
.tm-sample { position: absolute; top: 14px; right: 18px; z-index: 2; font-size: .68rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; padding: .25rem .7rem; border-radius: 50px; color: var(--acc); background: rgba(251,191,36,.14); border: 1px dashed rgba(251,191,36,.6); }
.tm-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: 1.4rem; }
.tm-dots { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: center; }
.tm-dots button { width: 11px; height: 11px; padding: 0; border-radius: 50%; border: 0; background: var(--line); transition: all .3s; } .tm-dots button.on { width: 34px; border-radius: 8px; background: linear-gradient(90deg, #f59e0b, #38bdf8); }
.tm-bar { height: 3px; border-radius: 3px; background: var(--line); overflow: hidden; margin-top: 1rem; } .tm-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f59e0b, #38bdf8); }
@media (max-width: 767.98px) { .tm-card { grid-template-columns: 1fr; text-align: center; align-content: start; } .tm-stage { min-height: 520px; } .tm-av { width: 80px; height: 80px; font-size: 1.5rem; margin-bottom: .5rem; } }

/* footer legal row */
.legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: .35rem 1.1rem; padding: 1.2rem 0 .2rem; margin: 0; list-style: none; border-top: 1px solid rgba(255,255,255,.1); }
.legal-links a, .legal-links button { position: relative; padding: .2rem 0; font-size: .82rem; color: rgba(226,232,240,.82); text-decoration: none; background: transparent; border: 0; transition: color .25s; }
.legal-links a::after, .legal-links button::after { content: ''; position: absolute; left: 0; bottom: -1px; width: 0; height: 2px; background: linear-gradient(90deg, #f59e0b, #38bdf8); transition: width .3s; }
.legal-links a:hover, .legal-links button:hover { color: #fff; } .legal-links a:hover::after, .legal-links button:hover::after { width: 100%; }


/* ==========================================================================
   23. ABOUT PAGE v2
   ========================================================================== */
.fd-ring { position: relative; width: min(380px, 86%); aspect-ratio: 1; margin: 0 auto; padding: 12px; border-radius: 50%; background: conic-gradient(from 0deg, #f59e0b, #38bdf8, #a78bfa, #f59e0b); animation: fdSpin 10s linear infinite; box-shadow: 0 30px 70px rgba(0,0,0,.4), 0 0 60px rgba(245,158,11,.2); }
.fd-ring img { width: 100%; height: 100%; object-fit: cover; object-position: top center; border-radius: 50%; border: 6px solid var(--bg, #1b2d54); animation: fdSpin 10s linear infinite reverse; background: var(--bg2, #223866); }
@keyframes fdSpin { to { transform: rotate(360deg); } }
.fd-chip { position: absolute; z-index: 3; padding: .5rem 1rem; border-radius: 50px; font-size: .82rem; font-weight: 800; color: #fff; white-space: nowrap; background: rgba(15,23,42,.75); border: 1px solid rgba(255,255,255,.35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 12px 28px rgba(0,0,0,.4); }
.fd-wrap { position: relative; } .fd-wrap .fd-chip { animation: abBob 5s ease-in-out infinite; }
.fd-chip.c1 { top: 8%; left: -4%; } .fd-chip.c2 { top: 46%; right: -6%; animation-delay: -1.6s; } .fd-chip.c3 { bottom: 6%; left: 6%; animation-delay: -3s; }
.fd-chip i { color: #fbbf24; margin-right: .4rem; }
.fd-fact { display: flex; gap: 1rem; align-items: center; padding: 1rem 1.2rem; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); transition: all .35s var(--transition-smooth); height: 100%; }
.fd-fact:hover { transform: translateY(-5px); border-color: #f59e0b; box-shadow: var(--shadow-h); }
.fd-fact i { font-size: 1.6rem; color: var(--acc); } .fd-fact b { color: var(--text); display: block; } .fd-fact small { color: var(--mute); }

/* law + code */
.lc-scales { width: min(260px, 70%); margin: 0 auto 1.5rem; display: block; overflow: visible; }
.lc-beam { transform-origin: 130px 40px; animation: lcSwing 6s ease-in-out infinite; }
.lc-pan-l, .lc-pan-r { animation: lcPan 6s ease-in-out infinite; transform-box: fill-box; transform-origin: top center; } .lc-pan-r { animation-direction: reverse; }
@keyframes lcSwing { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes lcPan { 0%, 100% { transform: translateY(-9px); } 50% { transform: translateY(9px); } }
.lc-wrap { display: flex; gap: 1rem; align-items: stretch; }
.lc-panel { position: relative; flex: 1; overflow: hidden; padding: clamp(1.4rem, 3vw, 2.4rem); border-radius: 28px; border: 1px solid rgba(255,255,255,.22); color: #fff; min-height: 340px; transition: flex .7s var(--transition-smooth), box-shadow .5s; outline: none; }
.lc-law { background: linear-gradient(145deg, #b45309, #f59e0b 60%, #fbbf24); } .lc-code { background: linear-gradient(145deg, #1d4ed8, #0ea5e9 60%, #38bdf8); }
.lc-panel:hover, .lc-panel:focus-visible, .lc-panel:focus-within { flex: 1.6; box-shadow: 0 30px 60px rgba(0,0,0,.4); }
.lc-panel::before { content: attr(data-word); position: absolute; right: -10px; bottom: -34px; font-size: 7rem; font-weight: 900; letter-spacing: -.03em; color: rgba(255,255,255,.14); line-height: 1; pointer-events: none; transition: transform .7s var(--transition-smooth); }
.lc-panel:hover::before { transform: translateX(-16px) scale(1.06); }
.lc-panel h3 { font-weight: 800; color: #fff; display: flex; align-items: center; gap: .7rem; margin-bottom: 1rem; } .lc-panel h3 i { font-size: 1.8rem; }
.lc-panel ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; position: relative; z-index: 1; } .lc-panel li { display: flex; gap: .6rem; align-items: flex-start; padding: .65rem .9rem; border-radius: 12px; background: rgba(15,23,42,.28); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); color: #fff; font-weight: 600; transition: transform .3s; } .lc-panel li:hover { transform: translateX(6px); }
.lc-plus { align-self: center; flex-shrink: 0; width: 56px; height: 56px; margin: 0 -2rem; z-index: 2; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; font-weight: 800; color: #0f172a; background: #fff; box-shadow: 0 12px 30px rgba(0,0,0,.4); animation: ptRing 2.4s infinite; }
.lc-result { margin-top: 1.5rem; text-align: center; font-size: clamp(1.2rem, 3vw, 1.8rem); font-weight: 800; color: var(--text); }
@media (max-width: 767.98px) { .lc-wrap { flex-direction: column; } .lc-plus { margin: -1.9rem auto; } .lc-panel { min-height: 0; padding-bottom: 3rem; } .lc-panel:hover, .lc-panel:focus-within { flex: 1; } }

/* principles bento */
.bn-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; }
.bn-item { position: relative; overflow: hidden; padding: 1.6rem; border-radius: 26px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: var(--shadow); transition: transform .45s var(--transition-smooth), border-color .45s, box-shadow .45s; grid-column: span 2; }
.bn-item:nth-child(1) { grid-column: span 3; } .bn-item:nth-child(2) { grid-column: span 3; } .bn-item:nth-child(4) { grid-column: span 4; } .bn-item:nth-child(5) { grid-column: span 2; } .bn-item:nth-child(6) { grid-column: span 2; }
.bn-item:hover { transform: translateY(-8px); border-color: #38bdf8; box-shadow: var(--shadow-h); }
.bn-item .n { position: absolute; right: 14px; top: -8px; font-size: 5.5rem; font-weight: 900; color: rgba(245,158,11,.14); line-height: 1; }
.bn-item h3 { color: var(--text); font-size: 1.2rem; font-weight: 800; margin: .9rem 0 .4rem; position: relative; } .bn-item p { color: var(--mute); margin: 0; position: relative; }
@media (max-width: 991.98px) { .bn-grid { grid-template-columns: repeat(2, 1fr); } .bn-item, .bn-item:nth-child(n) { grid-column: span 1; } }
@media (max-width: 575.98px) { .bn-grid { grid-template-columns: 1fr; } }

/* areas by category */
.ar-card { height: 100%; padding: 1.5rem; border-radius: 24px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); position: relative; overflow: hidden; transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; }
.ar-card::before { content: ''; position: absolute; inset: 0 0 auto 0; height: 4px; background: linear-gradient(90deg, #f59e0b, #38bdf8, #a78bfa); }
.ar-card:hover { transform: translateY(-8px); border-color: #f59e0b; box-shadow: var(--shadow-h); }
.ar-card h3 { color: var(--text); font-size: 1.15rem; font-weight: 800; display: flex; align-items: center; gap: .6rem; } .ar-card h3 i { color: var(--acc); }
.ar-chips { display: flex; flex-wrap: wrap; gap: .45rem; }

/* comparison */
.cmp { border-radius: 26px; overflow: hidden; border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow); }
.cmp-row { display: grid; grid-template-columns: 1.1fr 1fr 1fr; align-items: center; border-top: 1px solid var(--line); transition: background .3s; }
.cmp-row:first-child { border-top: 0; }
.cmp-row:not(.cmp-head):hover { background: var(--surface2); }
.cmp-row > div { padding: 1rem 1.2rem; color: var(--soft); }
.cmp-row > div:first-child { font-weight: 800; color: var(--text); }
.cmp-head > div { font-size: .75rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--acc); background: var(--surface2); }
.cmp-head > div:last-child { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); }
.cmp-row .bi-x-circle-fill { color: var(--bad); } .cmp-row .bi-check-circle-fill { color: var(--ok); } .cmp-row i { margin-right: .5rem; }
@media (max-width: 767.98px) { .cmp-row { grid-template-columns: 1fr; } .cmp-row > div:first-child { background: var(--surface2); } .cmp-head { display: none; } }

/* connect cards */
.cn-card { --brand: #1e3a5f; position: relative; display: flex; align-items: center; gap: 1rem; height: 100%; padding: 1.1rem 1.3rem; border-radius: 22px; text-decoration: none; color: #fff; overflow: hidden; background: linear-gradient(145deg, color-mix(in srgb, var(--brand) 88%, #fff), var(--brand) 60%, color-mix(in srgb, var(--brand) 75%, #000)); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 12px 28px color-mix(in srgb, var(--brand) 40%, transparent); transition: transform .45s var(--transition-smooth), box-shadow .45s; }
.cn-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%) 130% 0 / 260% 100% no-repeat; transition: background-position .8s ease; pointer-events: none; }
.cn-card:hover { transform: translateY(-8px) rotate(-1deg); box-shadow: 0 22px 44px color-mix(in srgb, var(--brand) 60%, transparent); color: #fff; } .cn-card:hover::after { background-position: -30% 0; }
.cn-card > i:first-child { font-size: 2rem; flex-shrink: 0; width: 54px; height: 54px; border-radius: 16px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,.18); }
.cn-card b { display: block; font-size: 1.05rem; } .cn-card small { opacity: .85; } .cn-card .go { margin-left: auto; transition: transform .3s; } .cn-card:hover .go { transform: translateX(6px); }
@media (hover: none) { .cn-card:hover, .bn-item:hover, .ar-card:hover, .fd-fact:hover { transform: none; } }


/* ==========================================================================
   24. LAYOUT SAFETY FIXES (no sideways scrolling on small screens)
   ========================================================================== */
.lg-layout { grid-template-columns: 290px minmax(0, 1fr); }
@media (max-width: 991.98px) { .lg-layout { grid-template-columns: minmax(0, 1fr); } }
.lg-layout > *, .lg-content, .lg-sec { min-width: 0; }
.lg-sec { overflow-wrap: anywhere; }
.tm-wrap { overflow-x: clip; padding-bottom: .5rem; }
.fd-wrap { overflow-x: clip; padding: 0 16px; }
@media (max-width: 767.98px) { .fd-chip.c1 { left: 2%; } .fd-chip.c2 { right: 2%; } .fd-chip.c3 { left: 8%; } }
.site-main { overflow-x: clip; }
.trust-card { display: flex; gap: 1rem; align-items: flex-start; height: 100%; padding: 1.3rem; border-radius: 22px; text-decoration: none; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); box-shadow: var(--shadow); transition: transform .4s var(--transition-smooth), border-color .4s, box-shadow .4s; position: relative; overflow: hidden; }
.trust-card:hover { transform: translateY(-8px); border-color: #f59e0b; box-shadow: var(--shadow-h); }
.trust-card .ic { width: 52px; height: 52px; flex-shrink: 0; border-radius: 15px; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); transition: transform .5s var(--transition-smooth); }
.trust-card:hover .ic { transform: rotate(-10deg) scale(1.1); }
.trust-card b { display: block; color: var(--text); font-size: 1.05rem; } .trust-card small { color: var(--mute); display: block; margin-top: .2rem; line-height: 1.5; }
.trust-card .go { margin-left: auto; align-self: center; color: var(--acc); transition: transform .3s; } .trust-card:hover .go { transform: translateX(6px); }
.consent-note { font-size: .82rem; color: var(--mute); margin: .8rem 0 0; } .consent-note a { color: var(--acc2); }
@media (hover: none) { .trust-card:hover { transform: none; } }


/* ==========================================================================
   25. CONTACT PAGE
   ========================================================================== */
.ct-status { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem; border-radius: 50px; font-size: .9rem; font-weight: 700; color: #fff; background: rgba(15,23,42,.55); border: 1px solid rgba(255,255,255,.28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.ct-dot { width: 11px; height: 11px; border-radius: 50%; background: #94a3b8; flex-shrink: 0; }
.ct-status.open .ct-dot { background: #34d399; animation: ctPulse 1.8s infinite; } .ct-status.closed .ct-dot { background: #fbbf24; } .ct-status.appt .ct-dot { background: #38bdf8; }
@keyframes ctPulse { 0% { box-shadow: 0 0 0 0 rgba(52,211,153,.7); } 100% { box-shadow: 0 0 0 12px rgba(52,211,153,0); } }
.ct-urgent { position: relative; overflow: hidden; display: flex; flex-wrap: wrap; align-items: center; gap: 1.2rem 2rem; padding: clamp(1.2rem, 3vw, 2rem); border-radius: 26px; color: #fff; background: linear-gradient(120deg, #991b1b, #dc2626 45%, #ea580c); box-shadow: 0 24px 56px rgba(220,38,38,.35); border: 1px solid rgba(255,255,255,.3); }
.ct-urgent::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(135deg, rgba(255,255,255,.07) 0 14px, transparent 14px 28px); }
.ct-urgent > * { position: relative; } .ct-urgent .ic { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.9rem; background: rgba(255,255,255,.22); animation: ptRing 2s infinite; }
.ct-urgent h2 { font-size: clamp(1.2rem, 2.6vw, 1.7rem); font-weight: 800; margin: 0 0 .25rem; color: #fff; } .ct-urgent p { margin: 0; opacity: .92; color: #fff; }
.ct-call { color: #991b1b !important; background: #fff !important; border: 0; font-weight: 800; }

/* wizard */
.ct-wiz { padding: clamp(1.2rem, 3.5vw, 2.4rem); border-radius: 30px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: var(--shadow); }
.ct-steps { display: flex; list-style: none; padding: 0; margin: 0 0 1.8rem; }
.ct-step { flex: 1; text-align: center; position: relative; }
.ct-step::before { content: ''; position: absolute; top: 19px; left: -50%; width: 100%; height: 3px; background: var(--line); z-index: 0; } .ct-step:first-child::before { display: none; }
.ct-step.done::before, .ct-step.on::before { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.ct-step b { position: relative; z-index: 1; width: 40px; height: 40px; margin: 0 auto .4rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--mute); background: var(--bg2); border: 2px solid var(--line); transition: all .4s var(--transition-smooth); }
.ct-step span { font-size: .78rem; font-weight: 700; color: var(--mute); }
.ct-step.on b { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: transparent; box-shadow: 0 0 0 6px rgba(245,158,11,.22); } .ct-step.on span { color: var(--text); }
.ct-step.done b { color: #0f172a; background: #34d399; border-color: transparent; }
.ct-pane { animation: ptUp .45s var(--transition-smooth) both; } .ct-pane[hidden] { display: none; }
.ct-pane h3 { font-size: 1.35rem; font-weight: 800; color: var(--text); margin-bottom: 1rem; }
.ct-areas { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: .6rem; }
.ct-area { display: flex; align-items: center; gap: .65rem; text-align: left; padding: .75rem .9rem; border-radius: 14px; font-weight: 600; font-size: .92rem; color: var(--text); background: var(--input); border: 1px solid var(--line); transition: all .3s var(--transition-smooth); min-height: 52px; }
.ct-area i { color: var(--acc); font-size: 1.2rem; } .ct-area:hover { transform: translateY(-3px); border-color: #f59e0b; }
.ct-area.sel { color: #0f172a; border-color: transparent; background: linear-gradient(135deg, #fde68a, #f59e0b); box-shadow: 0 10px 22px rgba(245,158,11,.35); } .ct-area.sel i { color: #0f172a; }
.ct-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; margin-bottom: 1.2rem; }
.ct-type { position: relative; } .ct-type input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; z-index: 2; margin: 0; }
.ct-type span { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding: 1rem .6rem; border-radius: 16px; text-align: center; font-weight: 700; font-size: .88rem; color: var(--text); background: var(--input); border: 1px solid var(--line); transition: all .3s var(--transition-smooth); } .ct-type i { font-size: 1.5rem; color: var(--acc); }
.ct-type input:checked + span { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: transparent; transform: translateY(-3px); box-shadow: 0 12px 24px rgba(245,158,11,.35); } .ct-type input:checked + span i { color: #0f172a; }
.ct-type input:focus-visible + span { outline: 3px solid #fbbf24; outline-offset: 3px; }
.ct-cal { padding: 1rem; border-radius: 20px; background: var(--input); border: 1px solid var(--line); }
.ct-cal-h { display: flex; align-items: center; justify-content: space-between; margin-bottom: .6rem; font-weight: 800; color: var(--text); }
.ct-cal-h button { width: 40px; height: 40px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface2); color: var(--text); }
.ct-cal-g { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; } .ct-cal-g .h { font-size: .7rem; font-weight: 800; text-transform: uppercase; color: var(--mute); padding: 4px 0; }
.ct-d { aspect-ratio: 1; border-radius: 10px; border: 0; background: transparent; color: var(--text); font-size: .88rem; font-weight: 600; transition: all .2s; min-height: 36px; }
.ct-d:hover:not(:disabled) { background: var(--surface2); transform: scale(1.1); } .ct-d:disabled { opacity: .3; cursor: not-allowed; } .ct-d.today { box-shadow: inset 0 0 0 2px #38bdf8; } .ct-d.sel { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); font-weight: 800; } .ct-d.sun { color: var(--bad); }
.ct-times { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.ct-time { padding: .5rem 1rem; border-radius: 50px; font-weight: 700; font-size: .85rem; color: var(--text); background: var(--input); border: 1px solid var(--line); transition: all .25s; min-height: 40px; } .ct-time:hover { border-color: #f59e0b; } .ct-time.sel { color: #0f172a; background: linear-gradient(135deg, #fde68a, #f59e0b); border-color: transparent; }
.ct-nav { display: flex; justify-content: space-between; gap: .8rem; margin-top: 1.6rem; }
.ct-err { color: var(--bad); font-size: .85rem; margin-top: .6rem; } .ct-err[hidden] { display: none; }
.ct-sum { display: grid; gap: .5rem; margin: 0 0 1.2rem; } .ct-sum div { display: flex; gap: 1rem; padding: .7rem 1rem; border-radius: 12px; background: var(--input); border: 1px solid var(--line); } .ct-sum dt { width: 110px; flex-shrink: 0; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--acc2); } .ct-sum dd { margin: 0; color: var(--text); overflow-wrap: anywhere; }
.ct-send { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: .7rem; }
.ct-send .btn { font-weight: 700; padding: .8rem 1rem; } .ct-wa { background: linear-gradient(135deg, #25d366, #128c7e) !important; color: #fff !important; border: 0; }
.ct-done { text-align: center; padding: 1rem; } .ct-done i { font-size: 3rem; color: #34d399; }

/* office card + hours */
.ct-office { position: sticky; top: calc(var(--nav-h) + 20px); padding: 1.6rem; border-radius: 28px; background: var(--surface); border: 1px solid var(--line); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: var(--shadow); }
@media (max-width: 991.98px) { .ct-office { position: static; } }
.ct-clock { font-size: 2.4rem; font-weight: 800; line-height: 1; background: linear-gradient(135deg, #fde68a, #f59e0b 60%, #38bdf8); -webkit-background-clip: text; background-clip: text; color: transparent; font-variant-numeric: tabular-nums; }
.ct-hours { width: 100%; border-collapse: collapse; font-size: .9rem; } .ct-hours td { padding: .5rem .2rem; color: var(--soft); border-top: 1px solid var(--line); } .ct-hours td:last-child { text-align: right; font-weight: 700; color: var(--text); }
.ct-hours tr.today td { color: var(--acc); font-weight: 800; }
.ct-info { display: flex; gap: .9rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--line); } .ct-info:first-of-type { border-top: 0; } .ct-info i { font-size: 1.3rem; color: var(--acc); margin-top: .1rem; } .ct-info b { display: block; color: var(--text); } .ct-info a, .ct-info span { color: var(--soft); text-decoration: none; overflow-wrap: anywhere; } .ct-info a:hover { color: var(--acc); }
.ct-dir { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; }
.ct-dir .btn { font-weight: 700; padding: .8rem; }
.ct-prep { height: 100%; padding: 1.4rem; border-radius: 22px; background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); transition: all .4s var(--transition-smooth); } .ct-prep:hover { transform: translateY(-6px); border-color: #38bdf8; box-shadow: var(--shadow-h); } .ct-prep h3 { color: var(--text); font-size: 1.05rem; font-weight: 800; margin: .8rem 0 .3rem; } .ct-prep p { color: var(--mute); margin: 0; font-size: .9rem; }
.ct-cmp-row { grid-template-columns: .8fr 1.2fr 1.2fr; } .cmp-row.ct-cmp-row i { color: var(--acc); }
@media (max-width: 767.98px) { .ct-steps .ct-step span { display: none; } .ct-sum div { flex-direction: column; gap: .2rem; } .ct-sum dt { width: auto; } .ct-cmp-row { grid-template-columns: 1fr; } }
@media (hover: none) { .ct-prep:hover, .ct-area:hover { transform: none; } }

/* contact calendar: compact day cells, centred grid */
.ct-cal-g { max-width: 460px; margin-inline: auto; }
.ct-d { aspect-ratio: auto; height: 44px; }
@media (max-width: 575.98px) { .ct-d { height: 40px; } }