/* ===================================
   Kamal & Associates - Custom CSS
   Pure HTML/CSS/JS/Bootstrap Version
   Created by: Azmyen Mustafa Chowdhury
   =================================== */

/* ===== CSS Variables ===== */
:root {
    /* Core Color Palette */
    --background-color: #0F1113;
    --text-color: #F1F5F9;
    --text-muted: rgba(241, 245, 249, 0.72);
    --heading-color: #ECECEC;

    --card-bg: #13151A;
    --card-border: rgba(255, 255, 255, 0.08);

    --toggle-border: rgba(255, 255, 255, 0.2);
    --toggle-bg-hover: rgba(255, 255, 255, 0.12);

    --navbar-bg: #0B0D10;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --navbar-text: #F1F5F9;

    --footer-bg: #050607;
    --footer-text: #E5E7EB;

    --accent-color: #D4AF37;
    --accent-color-dark: #B48811;
    --accent-rgb: 212, 175, 55;

    --primary-color: var(--accent-color);
    --primary-dark: var(--accent-color-dark);
    --gradient-primary: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-dark) 100%);
    --gradient-primary-hover: linear-gradient(135deg, var(--accent-color-dark) 0%, var(--accent-color) 100%);

    --font-heading: 'Playfair Display', serif;
    --font-body: 'Inter', sans-serif;

    --transition: all 0.3s ease;
    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.6);

    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.15);

    /* Compatibility variables (legacy usage in this stylesheet) */
    --bg-dark: var(--background-color);
    --bg-dark-secondary: var(--card-bg);
    --text-light: var(--text-color);

    /* Attorney pages — premium redesign tokens (additive; used only by
       attorney-*.html / attorneys.html component styles below) */
    --gold-primary: #AFA939;
    --gold-secondary: #B48811;
    --gold-founder: #8C6A1E;
    --radius-card: 16px;
    --radius-pill: 999px;
    --hairline-gold: 1px solid rgba(175, 169, 57, 0.22);
}

.dark-mode {
    --background-color: #0F1113;
    --text-color: #F1F5F9;
    --text-muted: rgba(241, 245, 249, 0.72);
    --heading-color: #ECECEC;

    --card-bg: #13151A;
    --card-border: rgba(255, 255, 255, 0.08);

    --navbar-bg: #0B0D10;
    --navbar-border: rgba(255, 255, 255, 0.08);
    --navbar-text: #F1F5F9;

    --footer-bg: #050607;
    --footer-text: #E5E7EB;

    --toggle-border: rgba(255, 255, 255, 0.2);
    --toggle-bg-hover: rgba(255, 255, 255, 0.12);

    --accent-color: #D4AF37;
    --accent-color-dark: #B48811;
    --accent-rgb: 212, 175, 55;

    --shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
    --shadow-hover: 0 20px 60px rgba(0, 0, 0, 0.6);

    --input-bg: rgba(255, 255, 255, 0.08);
    --input-border: rgba(255, 255, 255, 0.15);

    --bg-dark: var(--background-color);
    --bg-dark-secondary: var(--card-bg);
    --text-light: var(--text-color);
}

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

html {
    scroll-behavior: smooth;
}

/* Keep AOS-tagged content visible if AOS JS is unavailable. */
html:not(.aos-enabled) [data-aos] {
    opacity: 1 !important;
    transform: none !important;
}

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

.navbar,
.footer-section,
.service-item,
.service-modal-content,
.popular-service-card,
.btn,
.theme-toggle {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    line-height: 1.3;
}

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

a:hover {
    color: var(--primary-color);
}

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

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

/* =========================================
   CAREERS PAGE STYLES
   ========================================= */
.careers-page {
    --ka-navy: #0a2342;
    --ka-gold: #d4af37;
    background-color: var(--background-color);
    color: var(--text-color);
}

.careers-page .text-muted,
.careers-page .small.text-muted,
.careers-page .form-text,
.careers-page p.text-muted {
    color: var(--text-muted) !important;
}

.careers-page .hero-careers {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    background-size: cover;
    background-position: center;
    color: #ffffff;
    padding: 8rem 0 5rem;
}

.careers-page .hero-careers h1 {
    font-weight: 700;
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}

.careers-page .hero-careers .lead {
    color: rgba(241, 245, 249, 0.85);
}

.careers-page .careers-note-sticky {
    top: 1rem;
}

.careers-page .form-placeholder-wrap {
    display: contents;
}

.careers-page .country-code-select {
    width: 115px;
    flex: 0 0 115px;
}

.careers-page .success-icon-wrap {
    width: 72px;
    height: 72px;
    background: rgba(10, 35, 66, 0.08);
    border: 2px solid rgba(199, 168, 90, 0.55);
}

.careers-page .success-icon {
    font-size: 2rem;
    color: #0a2342;
}

.careers-page .success-title {
    color: #0a2342;
}

.careers-page .success-email-box {
    background: #f9fafb;
}

.careers-page .success-email-title {
    color: #1f2937;
}

.careers-page .careers-intro {
    font-size: 0.88rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--accent-color);
}

.careers-page #why-join-us,
.careers-page #open-positions {
    position: relative;
}

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

.careers-page .why-card {
    background: linear-gradient(145deg, rgba(19, 21, 26, 0.95), rgba(11, 13, 16, 0.9));
    border: 1px solid rgba(212, 175, 55, 0.18);
    border-radius: 0.75rem;
    padding: 1.5rem;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.careers-page .why-card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.55);
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}

.careers-page .why-card h3 {
    color: var(--text-color);
}

.careers-page .why-icon {
    font-size: 2rem;
    color: var(--ka-gold);
}

.careers-page #open-positions {
    background: radial-gradient(circle at 15% 15%, rgba(212, 175, 55, 0.12), transparent 42%),
        radial-gradient(circle at 85% 10%, rgba(10, 35, 66, 0.24), transparent 45%),
        #14171d;
}

.careers-page #job-board .card {
    background: rgba(15, 17, 19, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.9rem;
    color: var(--text-color);
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.careers-page #job-board .card:hover {
    transform: translateY(-6px);
    border-color: rgba(212, 175, 55, 0.5);
    box-shadow: 0 16px 35px rgba(0, 0, 0, 0.35);
}

.careers-page #job-board .card-text,
.careers-page #job-board p {
    color: var(--text-muted) !important;
}

.careers-page #job-board .btn-apply {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #0f1113;
    font-weight: 600;
}

.careers-page #job-board .btn-apply:hover {
    background: var(--gradient-primary-hover);
    color: #0f1113;
}

.careers-page #applyModal .modal-content {
    background: #111318;
    border: 1px solid rgba(212, 175, 55, 0.28);
    color: var(--text-color);
}

.careers-page #applyModal .modal-header,
.careers-page #applyModal .modal-footer {
    border-color: rgba(255, 255, 255, 0.1);
}

.careers-page #applyModal .btn-close {
    filter: invert(1);
}

.careers-page #applyModal .bg-light-subtle,
.careers-page #applyModal .bg-white {
    background: rgba(19, 21, 26, 0.82) !important;
    color: var(--text-color);
}

.careers-page #applyModal .border,
.careers-page #applyModal .border-top,
.careers-page #applyModal .rounded-3,
.careers-page #applyModal .rounded-4 {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.careers-page #applyModal .form-control,
.careers-page #applyModal .form-select {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    color: var(--text-color);
}

.careers-page #applyModal .form-control:focus,
.careers-page #applyModal .form-select:focus {
    border-color: rgba(212, 175, 55, 0.65);
    box-shadow: 0 0 0 0.18rem rgba(212, 175, 55, 0.2);
}

.careers-page #applyModal .badge.text-bg-primary {
    background: rgba(212, 175, 55, 0.17) !important;
    color: var(--accent-color) !important;
}

.careers-page #applyModal .badge.text-bg-secondary {
    background: rgba(241, 245, 249, 0.1) !important;
}

.careers-page #applicationSuccessPanel {
    background: linear-gradient(155deg, rgba(19, 21, 26, 0.98), rgba(11, 13, 16, 0.96)) !important;
    border: 1px solid rgba(212, 175, 55, 0.28) !important;
}

.careers-page #applicationSuccessPanel .border {
    border-color: rgba(255, 255, 255, 0.14) !important;
}

.careers-page #applicationSuccessPanel h4,
.careers-page #applicationSuccessPanel p,
.careers-page #applicationSuccessPanel .fw-semibold {
    color: var(--text-color) !important;
}

.careers-page #applicationSuccessPanel .btn-outline-primary {
    border-color: var(--accent-color);
    color: var(--accent-color);
}

.careers-page #applicationSuccessPanel .btn-outline-primary:hover {
    background: var(--gradient-primary);
    color: #0f1113;
    border-color: transparent;
}

.careers-page #applicationPreviewBox .rv-header {
    background: #0a2342;
    color: #fff;
    padding: 1rem 1.25rem;
}

.careers-page #applicationPreviewBox .rv-logo {
    width: 42px;
    height: 42px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(199, 168, 90, 0.6);
    background: #fff;
}

.careers-page #applicationPreviewBox .rv-firm-name {
    font-size: 0.95rem;
    line-height: 1.1;
}

.careers-page #applicationPreviewBox .rv-firm-slogan {
    font-size: 0.64rem;
    opacity: 0.82;
    letter-spacing: 0.6px;
    text-transform: uppercase;
}

.careers-page #applicationPreviewBox .rv-subtitle {
    font-size: 0.62rem;
    letter-spacing: 2px;
    opacity: 0.65;
    text-transform: uppercase;
}

.careers-page #applicationPreviewBox .rv-subtext {
    font-size: 0.7rem;
    opacity: 0.75;
}

.careers-page #applicationPreviewBox .rv-tag {
    border-radius: 4px;
    padding: 1px 8px;
    font-size: 0.7rem;
}

.careers-page #applicationPreviewBox .rv-tag-primary {
    background: rgba(199, 168, 90, 0.2);
    border: 1px solid #c7a85a;
    color: #c7a85a;
}

.careers-page #applicationPreviewBox .rv-tag-neutral {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.25);
}

.careers-page #applicationPreviewBox .rv-photo {
    width: 80px;
    height: 100px;
    object-fit: cover;
    border: 2px solid #c7a85a;
    border-radius: 4px;
    flex-shrink: 0;
}

.careers-page #applicationPreviewBox .rv-photo-placeholder {
    width: 80px;
    height: 100px;
    border: 1px dashed rgba(199, 168, 90, 0.5);
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.careers-page #applicationPreviewBox .rv-photo-placeholder-text {
    opacity: 0.5;
    font-size: 0.65rem;
    text-align: center;
}

.careers-page #applicationPreviewBox .rv-body {
    background: #fff;
    padding: 1.25rem 1.25rem 1rem;
}

.careers-page #applicationPreviewBox .rv-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: #0a2342;
    border-bottom: 2px solid #c7a85a;
    padding-bottom: 4px;
    margin-bottom: 12px;
}

.careers-page #applicationPreviewBox .rv-cell {
    margin-bottom: 8px;
}

.careers-page #applicationPreviewBox .rv-lbl {
    display: block;
    font-size: 0.68rem;
    color: #6c757d;
    margin-bottom: 1px;
}

.careers-page #applicationPreviewBox .rv-cell strong {
    font-size: 0.82rem;
    color: #1a1a2e;
}

.careers-page #applicationPreviewBox .rv-declaration {
    border-top: 1px solid #e9ecef;
}

.careers-page #applicationPreviewBox .rv-declaration-text {
    max-width: 55%;
}

.careers-page #applicationPreviewBox .rv-signature {
    max-width: 160px;
    max-height: 70px;
    object-fit: contain;
    display: block;
    border-bottom: 1px solid #333;
    padding-bottom: 2px;
}

.careers-page #applicationPreviewBox .rv-signature-line {
    width: 160px;
    height: 60px;
    border-bottom: 1px solid #333;
}

.careers-page #applicationPreviewBox .rv-signature-label {
    font-size: 0.68rem;
    color: #6c757d;
}

@keyframes careersRiseIn {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.careers-page .careers-reveal {
    animation: careersRiseIn 0.7s ease both;
}

/* ===== Buttons ===== */
.btn-primary {
    background: var(--gradient-primary);
    border: none;
    color: #000;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: var(--transition);
}

.btn-primary:hover {
    background: var(--gradient-primary-hover);
    color: #000;
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(175, 169, 57, 0.3);
}

.btn-outline-primary {
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    background: transparent;
    font-weight: 600;
    padding: 12px 30px;
    border-radius: 8px;
    transition: var(--transition);
}

.btn-outline-primary:hover {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #000;
    transform: translateY(-2px);
}

.btn-lg {
    padding: 15px 40px;
    font-size: 1.1rem;
}

/* ==================== 
   NAVIGATION BAR STYLES 
   ==================== */

/* 1. Navbar Container */
.navbar-dark.bg-dark-custom {
    background-color: var(--navbar-bg);
    border-bottom: 1px solid var(--navbar-border);
    padding: 15px 0;
    transition: background 0.3s ease, color 0.3s ease;
}

.navbar-dark.bg-dark-custom .container {
    padding-left: clamp(12px, 2vw, 28px);
    padding-right: clamp(12px, 2vw, 28px);
}

/* Allow the navbar to span the full viewport width so nav links stay on a single line */
.navbar-dark.bg-dark-custom .container {
    max-width: 100% !important;
}

@media (min-width: 992px) {
    .navbar-dark.bg-dark-custom .container {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: space-between;
        gap: 0.75rem;
    }

    .navbar-brand {
        flex: 0 0 auto;
        min-width: 0;
    }

    .navbar-collapse {
        flex: 1 1 auto;
        min-width: 0;
        display: flex !important;
        justify-content: center;
    }

    .navbar-nav {
        display: flex;
        flex-wrap: nowrap;
        white-space: nowrap;
        align-items: center;
    }

    .action-zone {
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: flex-end;
        margin-left: auto;
    }
}

.action-zone {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
}
.action-zone .phone-group {
    order: 1;
}
.action-zone .btn-gold {
    order: 2;
    margin-left: 0 !important;
}
.action-zone .theme-toggle {
    order: 3;
}

@media (max-width: 991.98px) {
    .action-zone {
        justify-content: flex-end;
        gap: 0.4rem;
    }

    .action-zone .phone-group,
    .action-zone .btn-gold {
        display: none;
    }
}

/* 2. Brand Section (Logo + Text) */
.brand-logo {
    height: 50px;
    /* Adjust based on your actual logo file */
    width: auto;
}

.brand-name {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--navbar-text);
    line-height: 1;
    margin-bottom: 4px;
}

.brand-tagline {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    /* Gold */
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* 3. Navigation Links (Center) */
.navbar-nav .nav-link {
    color: var(--navbar-text) !important;
    font-weight: 500;
    font-size: 15px;
    padding: 0 15px !important;
    position: relative;
    transition: color 0.3s;
}

/* The navbar container is capped at 1440px wide (see width: min(100%, 1440px)
   further down) no matter how wide the viewport is, so there's never a
   "spacious desktop" tier to grow into above that — logo + 8 nav links +
   phone + CTA all need to fit in that same ≤1440px space from 992px up.
   This is intentionally compact at every inline width rather than only
   below some threshold, tightest right above the 992px collapse breakpoint
   where the least room is available. */
@media (min-width: 992px) {
    .navbar-nav .nav-link {
        font-size: 13.5px;
        padding: 0 9px !important;
    }

    .brand-logo {
        height: 44px;
    }

    .brand-name {
        font-size: 18px;
    }

    .brand-tagline {
        font-size: 9px;
        letter-spacing: 1px;
    }

    .navbar-dark.bg-dark-custom .container {
        gap: 0.5rem;
    }

    .action-zone {
        gap: 0.5rem !important;
    }

    .phone-group {
        margin-right: 0 !important;
    }

    .phone-number {
        font-size: 13.5px;
    }

    .action-zone .btn-gold {
        padding: 9px 15px;
        font-size: 13.5px;
    }
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .navbar-nav .nav-link {
        font-size: 12.5px;
        padding: 0 6px !important;
    }

    .brand-logo {
        height: 36px;
    }

    .brand-name {
        font-size: 15px;
    }

    .brand-tagline {
        font-size: 8px;
        letter-spacing: 0.5px;
    }

    .navbar-dark.bg-dark-custom .container {
        gap: 0.25rem;
    }

    .action-zone {
        gap: 0.2rem !important;
    }

    .phone-number {
        font-size: 12px;
    }

    .action-zone .btn-gold {
        padding: 6px 10px;
        font-size: 12px;
    }
}

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

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

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
    color: var(--accent-color) !important;
}

.nav-mobile-cta-item {
    display: none;
}

.navbar-toggler {
    border-color: var(--toggle-border);
    padding: 0.4rem 0.55rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 0.2rem rgba(175, 169, 57, 0.25);
}

.navbar-toggler-icon {
    background-image: none;
    width: 1.2rem;
    height: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-toggler-icon::before {
    content: "\f0c9";
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    color: var(--navbar-text);
    font-size: 1rem;
    line-height: 1;
}

/* 4. Action Zone (Right) */
.phone-number {
    color: var(--navbar-text);
    font-weight: 600;
    text-decoration: none;
    font-size: 15px;
}

.btn-gold {
    background-color: var(--accent-color);
    color: #000000 !important;
    font-weight: 600;
    padding: 10px 25px;
    border-radius: 6px;
    border: none;
    transition: background 0.3s ease, color 0.3s ease, transform 0.3s ease, box-shadow 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-gold:hover {
    background-color: var(--accent-color-dark);
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
}

.btn-outline-gold {
    color: #D4AF37;
    border: 1px solid rgba(212, 175, 55, 0.55);
    background: transparent;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 6px;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.btn-outline-gold:hover {
    background-color: rgba(212, 175, 55, 0.14);
    color: #D4AF37;
    border-color: #D4AF37;
}

.theme-toggle {
    background: transparent;
    border: 1px solid var(--toggle-border);
    color: var(--navbar-text);
    padding: 0.55rem 0.9rem;
    border-radius: 8px;
    font-size: 1rem;
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

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

/* 5. Sticky State (Optional: Adds shadow when scrolling) */
.navbar.scrolled {
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.15);
    padding: 10px 0;
    /* Shrinks slightly on scroll */
}

/* ===== Hero Section ===== */
.hero-section {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    background-image: url('../images/BG/Hero.jpg');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

.hero-section.about-hero {
    background-image: url('../images/Background/BG2.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center 18%;
    background-attachment: scroll;
    min-height: 72vh;
    padding: 120px 0 5rem;
    align-items: center;
}

.hero-section.about-hero .hero-overlay {
    background: linear-gradient(180deg,
        rgba(6, 7, 9, 0.62) 0%,
        rgba(6, 7, 9, 0.46) 22%,
        rgba(6, 7, 9, 0.16) 36%,
        rgba(6, 7, 9, 0) 46%,
        rgba(6, 7, 9, 0) 68%,
        rgba(6, 7, 9, 0.32) 80%,
        rgba(6, 7, 9, 0.82) 93%,
        rgba(6, 7, 9, 0.95) 100%);
}

.hero-section.about-hero .row.align-items-center {
    transform: translateY(11rem);
}

.hero-section.about-hero .hero-subtitle {
    margin-bottom: 4px;
}

.hero-section.about-hero .hero-title {
    margin-top: 4px;
}

.hero-section.attorneys-hero,
.hero-section.practice-areas-hero,
.hero-section.service-areas-hero,
.hero-section.u-inline-0001,
.hero-section.u-inline-0060,
.hero-section.u-inline-0067 {
    background-position: center 18%;
    background-attachment: scroll;
    min-height: 72vh;
    padding: 120px 0 5rem;
    align-items: center;
}

.hero-section.attorneys-hero .hero-overlay,
.hero-section.practice-areas-hero .hero-overlay,
.hero-section.service-areas-hero .hero-overlay,
.hero-section.u-inline-0001 .hero-overlay {
    background: linear-gradient(180deg,
        rgba(6, 7, 9, 0.62) 0%,
        rgba(6, 7, 9, 0.46) 22%,
        rgba(6, 7, 9, 0.16) 36%,
        rgba(6, 7, 9, 0) 46%,
        rgba(6, 7, 9, 0) 68%,
        rgba(6, 7, 9, 0.32) 80%,
        rgba(6, 7, 9, 0.82) 93%,
        rgba(6, 7, 9, 0.95) 100%);
}

.hero-section.u-inline-0060 .hero-overlay,
.hero-section.u-inline-0067 .hero-overlay {
    background:
        linear-gradient(180deg, rgba(15, 17, 19, 0.28) 0%, rgba(15, 17, 19, 0.72) 100%),
        linear-gradient(90deg, rgba(15, 17, 19, 0.62) 0%, rgba(15, 17, 19, 0.25) 55%, rgba(15, 17, 19, 0.5) 100%);
}

.hero-section.attorneys-hero .row.align-items-center,
.hero-section.practice-areas-hero .row.align-items-center,
.hero-section.service-areas-hero .row.align-items-center,
.hero-section.u-inline-0001 .row.align-items-center,
.hero-section.u-inline-0060 .row.align-items-center,
.hero-section.u-inline-0067 .row.align-items-center {
    transform: translateY(11rem);
}

.hero-section.attorneys-hero .hero-subtitle,
.hero-section.practice-areas-hero .hero-subtitle,
.hero-section.service-areas-hero .hero-subtitle,
.hero-section.u-inline-0001 .hero-subtitle,
.hero-section.u-inline-0060 .hero-subtitle,
.hero-section.u-inline-0067 .hero-subtitle {
    margin-bottom: 4px;
}

.hero-section.attorneys-hero .hero-title,
.hero-section.practice-areas-hero .hero-title,
.hero-section.service-areas-hero .hero-title,
.hero-section.u-inline-0001 .hero-title,
.hero-section.u-inline-0060 .hero-title,
.hero-section.u-inline-0067 .hero-title {
    margin-top: 4px;
}

/* Contact page hero — same background-image rule as index.html's #hero
   (background-position: center 45%), tuned so BG7 frames well on both
   desktop and mobile, just with contact's own image. */
.hero-section.u-inline-0001 {
    background-image: url('../images/Background/BG7.JPG');
    background-repeat: no-repeat;
    background-position: center 18%;
}

.careers-page .hero-careers {
    min-height: 72vh;
    align-items: center;
    background-image:
        linear-gradient(180deg,
            rgba(6, 7, 9, 0.62) 0%,
            rgba(6, 7, 9, 0.46) 22%,
            rgba(6, 7, 9, 0.16) 36%,
            rgba(6, 7, 9, 0) 46%,
            rgba(6, 7, 9, 0) 68%,
            rgba(6, 7, 9, 0.32) 80%,
            rgba(6, 7, 9, 0.82) 93%,
            rgba(6, 7, 9, 0.95) 100%),
        url("../images/Background/BG6.JPG");
    background-position: center 18%;
    background-attachment: scroll;
    padding: 120px 0 5rem;
}

.careers-page .hero-careers .container {
    transform: translateY(11rem);
}

.careers-page .hero-careers .careers-intro {
    margin-bottom: 4px !important;
}

.careers-page .hero-careers h1 {
    margin-top: 4px;
}

@media (max-width: 1199.98px) {
    .hero-section.about-hero,
    .hero-section.attorneys-hero,
    .hero-section.practice-areas-hero,
    .hero-section.service-areas-hero,
    .hero-section.u-inline-0001,
    .hero-section.u-inline-0060,
    .hero-section.u-inline-0067,
    .careers-page .hero-careers {
        min-height: 72vh;
        padding-top: 120px;
    }
}

@media (max-width: 991.98px) {
    .hero-section.about-hero,
    .hero-section.attorneys-hero,
    .hero-section.practice-areas-hero,
    .hero-section.service-areas-hero,
    .hero-section.u-inline-0001,
    .hero-section.u-inline-0060,
    .hero-section.u-inline-0067,
    .careers-page .hero-careers {
        min-height: 68vh;
        padding-top: 110px;
    }
}

@media (max-width: 767.98px) {
    .hero-section.about-hero,
    .hero-section.attorneys-hero,
    .hero-section.practice-areas-hero,
    .hero-section.service-areas-hero,
    .hero-section.u-inline-0001,
    .hero-section.u-inline-0060,
    .hero-section.u-inline-0067,
    .careers-page .hero-careers {
        min-height: 66vh;
        padding-top: 104px;
    }

    .hero-section.about-hero,
    .hero-section.attorneys-hero,
    .hero-section.practice-areas-hero,
    .hero-section.service-areas-hero,
    .hero-section.u-inline-0001,
    .hero-section.u-inline-0060,
    .hero-section.u-inline-0067,
    .careers-page .hero-careers,
    .hero-blog {
        background-size: auto 72vh !important;
        background-position: center 18% !important;
        background-repeat: no-repeat !important;
    }
}

@media (max-width: 575.98px) {
    .hero-section.about-hero,
    .hero-section.attorneys-hero,
    .hero-section.practice-areas-hero,
    .hero-section.service-areas-hero,
    .hero-section.u-inline-0001,
    .hero-section.u-inline-0060,
    .hero-section.u-inline-0067,
    .careers-page .hero-careers {
        min-height: 64vh;
        padding-top: 96px;
        padding-bottom: 3.5rem;
    }

    .hero-section.about-hero .row.align-items-center,
    .hero-section.attorneys-hero .row.align-items-center,
    .hero-section.practice-areas-hero .row.align-items-center,
    .hero-section.service-areas-hero .row.align-items-center,
    .hero-section.u-inline-0001 .row.align-items-center,
    .hero-section.u-inline-0060 .row.align-items-center,
    .hero-section.u-inline-0067 .row.align-items-center,
    .careers-page .hero-careers .container {
        transform: translateY(6rem);
    }
}

/* Attorney profile masthead — replaces the old inherited group-photo
   background (it was bleeding directly into each attorney's own portrait
   just below it). Solid surface + gold hairline instead of a second photo. */
.hero-section.hero-short {
    min-height: 0;
    background-image: none;
    background-color: var(--card-bg);
    background: linear-gradient(180deg, #14171B 0%, #0F1113 100%);
    border-top: 1px solid rgba(175, 169, 57, 0.35);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    padding: 132px 0 28px;
    display: flex;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.hero-section.hero-short::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 85% 0%, rgba(175, 169, 57, 0.08), transparent 55%);
    pointer-events: none;
}

.hero-masthead-toprow {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 28px;
}

.hero-masthead-toprow .breadcrumb {
    margin-bottom: 0;
}

.hero-masthead-kicker {
    display: block;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 12px;
    color: var(--gold-primary);
    font-weight: 600;
    margin-bottom: 8px;
}

.hero-masthead-name {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #fff;
    font-size: clamp(1.9rem, 3vw + 0.8rem, 2.9rem);
    line-height: 1.15;
    margin: 0 0 6px;
}

.hero-masthead-designation {
    color: #C9CDD3;
    font-size: 1rem;
    max-width: 640px;
    margin: 0 auto;
}

/* Founder variant — Adv. Mohammad Mostafa Kamal only */
.hero-masthead-founder {
    padding-top: 140px;
    padding-bottom: 40px;
    background: linear-gradient(180deg, #18140C 0%, #0F1113 100%);
    border-top-color: var(--gold-founder);
}

.hero-masthead-founder::after {
    background: radial-gradient(circle at 85% 0%, rgba(140, 106, 30, 0.18), transparent 55%);
}

.hero-masthead-founder .hero-masthead-name {
    font-size: clamp(2.2rem, 3.6vw + 0.8rem, 3.4rem);
}

.founder-seal {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 1px solid var(--gold-founder);
    position: relative;
    margin-bottom: 16px;
    color: var(--gold-founder);
    font-size: 20px;
}

.founder-seal::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(140, 106, 30, 0.5);
    border-radius: 50%;
}

.founder-established {
    display: block;
    margin-top: 12px;
    font-size: 12px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
}

@media (max-width: 767.98px) {
    .hero-section.hero-short {
        padding: 112px 0 24px;
    }

    .hero-masthead-founder {
        padding-top: 118px;
    }
}

/* =========================================
   HOME HERO — #hero only, fully self-contained.
   Was previously scattered across 5 separate locations in this file
   (base rules here + duplicate breakpoint overrides at three other
   points further down); consolidated into one block during the home
   page redesign. .hero-title/.hero-subtitle/.hero-description/
   .hero-buttons are NOT used here on purpose — those bare classes are
   shared/load-bearing on ~20 other pages (about, contact, attorneys,
   practice-areas, service-areas, every blog template), so the home
   hero gets its own dedicated classes instead of restyling them in
   place — same reasoning as .chamber-card vs .flip-card.

   Content sits in the two empty bands of the source photo, not one: the
   kicker+headline use the building-facade gap above the attorneys'
   heads (roughly the top 40% of the frame), and the lede+CTAs use the
   empty marble steps below their feet (roughly the bottom 20%). The
   people themselves, full-width in between, are never covered by
   either block. */
#hero.hero-section {
    min-height: 94vh;
    background-position: center 22%;
    background-attachment: scroll;
    align-items: flex-start;
    padding: 128px 0 0;
}

#hero .hero-overlay {
    background: linear-gradient(180deg,
        rgba(6, 7, 9, 0.62) 0%,
        rgba(6, 7, 9, 0.46) 22%,
        rgba(6, 7, 9, 0.16) 36%,
        rgba(6, 7, 9, 0) 46%,
        rgba(6, 7, 9, 0) 68%,
        rgba(6, 7, 9, 0.32) 80%,
        rgba(6, 7, 9, 0.82) 93%,
        rgba(6, 7, 9, 0.95) 100%);
}

#hero .hero-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

#hero .hero-kicker {
    position: relative;
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.4rem;
    margin: 0 0 0.6rem;
    padding: 0 0 0.5rem;
    color: #ffffff;
    font-family: var(--font-heading);
    font-size: clamp(1rem, 0.7vw + 0.8rem, 1.3rem);
    font-weight: 600;
    line-height: 1.2;
}

#hero .hero-kicker::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: min(180px, 70%);
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(175, 169, 57, 0.9), transparent);
    box-shadow: 0 0 18px rgba(175, 169, 57, 0.5);
    transform: translateX(-50%) scaleX(0);
    transform-origin: center;
    animation: heroKickerLine 1s ease 0.45s forwards;
}

#hero .hero-kicker span {
    display: inline-block;
    opacity: 0;
    background: linear-gradient(110deg, #ffffff 0%, #ffffff 42%, #d8cf74 50%, #ffffff 58%, #ffffff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: 0 8px 28px rgba(0, 0, 0, 0.35);
    animation: heroKickerReveal 0.75s ease forwards, heroKickerSheen 4.5s ease-in-out 1.2s infinite;
}

#hero .hero-kicker span:nth-child(1) { animation-delay: 0s, 1.2s; }
#hero .hero-kicker span:nth-child(2) { animation-delay: 0.12s, 1.32s; }
#hero .hero-kicker span:nth-child(3) { animation-delay: 0.24s, 1.44s; }
#hero .hero-kicker span:nth-child(4) { animation-delay: 0.36s, 1.56s; }

/* white-space: nowrap keeps "We Stand For Your <word>." on one line
   regardless of which rotating word is showing — clamp()'s vw component
   pulls the font down at narrow widths so the longest word ("Custody.")
   still fits without wrapping. */
#hero .hero-headline {
    font-family: var(--font-heading);
    font-weight: 700;
    color: #ffffff;
    font-size: clamp(1.5rem, 2.6vw + 0.85rem, 2.6rem);
    line-height: 1.15;
    margin: 0 0 14px;
    white-space: nowrap;
    text-shadow: 0 10px 34px rgba(0, 0, 0, 0.5);
}

#hero .hero-headline .txt-rotate {
    display: inline-block;
}

/* Lede + CTAs live in their own bottom-anchored block, independent of
   .hero-col (kicker/headline only, up top) — keeping it a separate
   absolutely-positioned piece means it can anchor to the empty steps at
   the very bottom of the photo without being forced through the middle
   of the frame where the people stand. */
#hero .hero-bottom {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding-bottom: 44px;
    z-index: 2;
}

#hero .hero-bottom .container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

#hero .hero-lede {
    max-width: 700px;
    margin: 0 0 18px;
    font-size: 1.02rem;
    line-height: 1.5;
    color: rgba(241, 245, 249, 0.88);
}

#hero .hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 14px 22px;
}

/* Overrides the sitewide .btn-lg{width:100%} rule below 767.98px — this
   hero's buttons stay compact and inline even on phones (see the
   991.98px breakpoint below for why: stacked full-width buttons push
   the block taller than the empty band it needs to fit in). */
#hero .hero-actions .btn {
    width: auto;
}

@keyframes heroKickerReveal {
    from {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(4px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes heroKickerLine {
    to {
        transform: translateX(-50%) scaleX(1);
    }
}

@keyframes heroKickerSheen {
    0%,
    40% {
        background-position: 120% center;
    }

    70%,
    100% {
        background-position: -120% center;
    }
}

@media (prefers-reduced-motion: reduce) {
    #hero .hero-kicker::after,
    #hero .hero-kicker span {
        animation: none;
    }

    #hero .hero-kicker::after {
        transform: translateX(-50%) scaleX(1);
    }

    #hero .hero-kicker span {
        opacity: 1;
        background: none;
        color: #ffffff;
        filter: none;
        transform: none;
    }
}

/* A 94vh section on a short laptop screen (e.g. 1366×800) makes the top
   empty-band gap shrink in absolute pixels even though the width is
   plenty — vh alone can't see that, so this compacts the stack whenever
   viewport height is the tight dimension, independent of width. */
@media (min-width: 992px) and (max-height: 860px) {
    #hero.hero-section {
        min-height: 88vh;
        padding-top: 108px;
    }

    #hero .hero-kicker {
        margin-bottom: 0.4rem;
        padding-bottom: 0.35rem;
    }

    #hero .hero-headline {
        font-size: clamp(1.6rem, 1.7vw + 1.2rem, 2.3rem);
    }

    #hero .hero-bottom {
        padding-bottom: 32px;
    }

    #hero .hero-lede {
        max-width: 720px;
        margin-bottom: 14px;
        font-size: 0.95rem;
        line-height: 1.45;
    }
}

@media (max-width: 991.98px) {
    #hero.hero-section {
        min-height: 72vh;
        padding: 104px 0 0;
    }

    #hero .hero-kicker {
        margin-bottom: 0.4rem;
        padding-bottom: 0.35rem;
    }

    #hero .hero-bottom {
        padding-bottom: 32px;
    }

    #hero .hero-lede {
        max-width: 480px;
        margin-bottom: 14px;
        font-size: 0.92rem;
        line-height: 1.45;
    }

    #hero .hero-actions {
        gap: 10px 16px;
    }
}

/* Phones keep the action row on one line (not the usual full-width
   stacked buttons) — stacking would roughly triple the row's height and
   push it taller than the empty band at the bottom of the photo. */
@media (max-width: 575.98px) {
    #hero.hero-section {
        min-height: 84vh;
        padding: 88px 0 0;
    }

    #hero .hero-kicker {
        font-size: clamp(0.78rem, 3.6vw, 1.05rem);
        gap: 0.3rem;
        margin-bottom: 0.3rem;
        padding-bottom: 0.25rem;
    }

    #hero .hero-headline {
        font-size: clamp(1.05rem, 5.6vw, 1.7rem);
    }

    #hero .hero-bottom {
        padding-bottom: 20px;
    }

    #hero .hero-lede {
        max-width: 300px;
        font-size: 0.8rem;
        line-height: 1.38;
        margin-bottom: 10px;
    }

    #hero .hero-actions {
        gap: 6px;
    }

    #hero .hero-actions .btn {
        width: auto;
        padding: 9px 14px;
        font-size: 0.8rem;
    }
}

.hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.6) 100%);
}

.divider {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 60px 0;
}

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

.hero-subtitle {
    display: inline-block;
    color: var(--primary-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 15px;
    text-transform: uppercase;
    letter-spacing: 2px;
}

.hero-title {
    font-size: clamp(1.75rem, 4vw + 0.75rem, 4.5rem);
    font-weight: 700;
    margin-bottom: 25px;
    line-height: 1.2;
}

.attorney-bio p {
    line-height: 1.8;
}

.attorney-bio h6 {
    letter-spacing: 1px;
}

/* hero-title now uses clamp() — no fixed breakpoint override needed */

.rotating-text-wrapper {
    display: block;
    margin-top: 10px;
}

.rotating-text {
    color: var(--primary-color);
    display: inline-block;
    animation: fadeInUp 0.5s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Typewriter Effect Cursor */
.txt-rotate>.wrap {
    border-right: 0.08em solid var(--primary-color);
    /* Uses your Gold color */
    padding-right: 5px;
    animation: blink-caret 0.75s step-end infinite;
}

/* The blinking animation */
@keyframes blink-caret {

    from,
    to {
        border-color: transparent
    }

    50% {
        border-color: var(--primary-color)
    }
}

/* Color for the Rotating Text */
.txt-rotate {
    color: var(--primary-color);
    /* This sets it to your Gold (#AFA939) */
    font-weight: 700;
    /* Optional: Makes the text bold */
}

.play-btn-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
}

.play-btn {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--transition);
    position: relative;
}

.play-btn::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    animation: pulse 2s infinite;
}

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

    100% {
        transform: scale(1.5);
        opacity: 0;
    }
}

.play-btn i {
    color: #000;
    font-size: 18px;
    margin-left: 3px;
}

.play-btn:hover {
    transform: scale(1.1);
}

.play-text {
    color: var(--text-light);
    font-weight: 500;
}

/* ===== Section Styles ===== */
.section-padding {
    padding: 100px 0;
}

.section-dark {
    background-color: var(--bg-dark-secondary);
}

.section-subtitle {
    display: inline-block;
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 3px;
    margin-bottom: 10px;
}

.section-title {
    font-size: clamp(1.5rem, 2.5vw + 1rem, 3rem);
    margin-bottom: 20px;
}

.section-description {
    color: var(--text-muted);
    font-size: 1.1rem;
    max-width: 600px;
    margin: 0 auto;
}

/* ===== Service Cards ===== */
.service-card {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    position: relative;
    transition: var(--transition);
    border: 1px solid rgba(175, 169, 57, 0.1);
}

.service-card:hover {
    transform: translateY(-10px);
    border-color: rgba(175, 169, 57, 0.3);
    box-shadow: var(--shadow);
}

.service-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 25px;
}

.service-icon i {
    font-size: 32px;
    color: #000;
}

.service-content h3 {
    font-size: 1.4rem;
    margin-bottom: 15px;
}

.service-content p {
    color: var(--text-muted);
    font-size: 0.95rem;
    margin-bottom: 20px;
}

.service-link {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: rgba(175, 169, 57, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    transition: var(--transition);
}

.service-link i {
    color: var(--primary-color);
}

.service-card:hover .service-link {
    background: var(--gradient-primary);
}

.service-card:hover .service-link i {
    color: #000;
}

/* ===== Counter Section ===== */
.counter-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.1) 0%, rgba(180, 136, 17, 0.1) 100%);
    border-top: 1px solid rgba(175, 169, 57, 0.2);
    border-bottom: 1px solid rgba(175, 169, 57, 0.2);
}

/* ===== Chatbot Widget ===== */
#kamal-chatbot-root {
    position: fixed;
    left: auto;
    right: 24px;
    bottom: 24px;
    z-index: 9999;
    font-family: var(--font-body);
    display: flex;
    align-items: flex-end;
}

.kamal-chatbot-bubble {
    width: 58px;
    height: 58px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark));
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #000;
    box-shadow: var(--shadow-hover);
    position: relative;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.kamal-chatbot-bubble:hover {
    transform: scale(1.08);
}

.kamal-chatbot-bubble-icon i {
    font-size: 18px;
}

.kamal-chatbot-tooltip {
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    background-color: var(--background-color);
    color: var(--text-color);
    padding: 6px 12px;
    border-radius: 12px;
    font-size: 12px;
    box-shadow: var(--shadow);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.kamal-chatbot-bubble:hover .kamal-chatbot-tooltip {
    opacity: 1;
}

.kamal-chatbot-window {
    position: absolute;
    right: 0;
    bottom: calc(100% + 12px);
    width: min(392px, calc(100vw - 36px));
    max-height: min(600px, calc(100vh - 78px));
    background: var(--card-bg);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.32);
    overflow: hidden;
    transform: translateY(16px) scale(0.95);
    transform-origin: bottom right;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
    display: flex;
    flex-direction: column;
    margin-top: 0;
}

.kamal-chatbot-window.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0) scale(1);
}

.kamal-chatbot-header {
    background: var(--navbar-bg);
    padding: 10px 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--navbar-border);
    position: relative;
}

.kamal-chatbot-header-left {
    display: flex;
    flex-direction: column;
}

.kamal-chatbot-title {
    font-weight: 700;
    font-size: 13px;
    color: var(--navbar-text);
}

.kamal-chatbot-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--text-muted);
    font-size: 10px;
}

.kamal-chatbot-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #34d399;
}

.kamal-chatbot-header-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}

.kamal-chatbot-btn {
    border: none;
    border-radius: 8px;
    background: rgba(175, 169, 57, 0.1);
    color: var(--text-color);
    padding: 8px 10px;
    cursor: pointer;
    font-size: 12px;
    transition: all 0.25s ease;
}

.kamal-chatbot-btn:hover {
    background: rgba(175, 169, 57, 0.2);
}

.icon-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.kamal-chatbot-overflow-wrap {
    position: relative;
}

.kamal-chatbot-overflow-menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 190px;
    background: var(--card-bg);
    border: 1px solid var(--navbar-border);
    border-radius: 12px;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.3);
    padding: 6px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    z-index: 10;
}

.kamal-chatbot-overflow-menu[hidden] {
    display: none;
}

.kamal-chatbot-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 10px;
    border-radius: 8px;
    border: none;
    background: transparent;
    color: var(--text-color);
    font-size: 12px;
    text-decoration: none;
    cursor: pointer;
    text-align: left;
    width: 100%;
}

.kamal-chatbot-overflow-item:hover {
    background: rgba(175, 169, 57, 0.12);
}

.kamal-chatbot-overflow-item i {
    width: 14px;
    text-align: center;
    color: var(--accent-color);
}

.kamal-chatbot-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 380px;
}

.kamal-chatbot-messages {
    flex: 1;
    overflow-y: auto;
    padding: 16px 14px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.kamal-chatbot-message {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.kamal-chatbot-message--bot {
    align-items: flex-start;
}

.kamal-chatbot-message--user {
    align-items: flex-end;
}

.kamal-chatbot-message-bot {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    max-width: 92%;
}

.kamal-chatbot-bot-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(175, 169, 57, 0.15);
    color: var(--accent-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    margin-top: 2px;
}

.kamal-chatbot-bot-body {
    line-height: 1.55;
    font-size: 13px;
    color: var(--text-color);
    white-space: pre-line;
}

.kamal-chatbot-message-bubble.user {
    max-width: 82%;
    border-radius: 16px 16px 4px 16px;
    padding: 9px 13px;
    line-height: 1.5;
    font-size: 13px;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark));
    color: #000;
}

.kamal-chatbot-attorney-note {
    margin: 6px 0 0 30px;
    padding: 8px 11px;
    border-radius: 10px;
    border: 1px solid rgba(175, 169, 57, 0.25);
    background: rgba(175, 169, 57, 0.08);
    font-size: 12px;
    color: var(--text-color);
}

.kamal-chatbot-attorney-label {
    color: var(--text-muted);
}

.kamal-chatbot-meta-link {
    display: inline-block;
    margin: 6px 0 0 30px;
    font-size: 12px;
    color: var(--accent-color);
}

.kamal-chatbot-meta-actions {
    margin: 8px 0 0 30px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.kamal-chatbot-meta-btn {
    font-size: 11px;
    padding: 7px 11px;
    background: var(--gradient-primary);
    border: none;
    border-radius: 999px;
    color: #000;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.kamal-chatbot-meta-btn:hover {
    transform: translateY(-1px);
}

.kamal-chatbot-typing-dots {
    color: var(--text-muted);
    font-style: italic;
}

.kamal-chatbot-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 0 14px 12px;
}

.kamal-chatbot-suggestions[hidden] {
    display: none;
}

.kamal-chatbot-suggestion-chip {
    border: 1px solid var(--navbar-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    border-radius: 999px;
    padding: 7px 13px;
    font-size: 11.5px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.kamal-chatbot-suggestion-chip:hover {
    border-color: rgba(175, 169, 57, 0.55);
    background: rgba(175, 169, 57, 0.12);
}

.kamal-chatbot-footer {
    border-top: 1px solid var(--navbar-border);
    background: var(--card-bg);
    padding: 10px 12px 8px;
}

.kamal-chatbot-input-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    border: 1px solid var(--input-border);
    background: var(--input-bg);
    border-radius: 999px;
    padding: 4px 4px 4px 12px;
}

.kamal-chatbot-input {
    flex: 1;
    border: none;
    background: transparent;
    color: var(--text-color);
    padding: 8px 4px;
    font-size: 13px;
    outline: none;
}

.kamal-chatbot-attach {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: none;
    background: transparent;
    color: var(--text-muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: color 0.2s ease, background 0.2s ease;
}

.kamal-chatbot-attach:hover {
    color: var(--accent-color);
    background: rgba(175, 169, 57, 0.12);
}

.kamal-chatbot-send {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: linear-gradient(135deg, var(--accent-color), var(--accent-color-dark));
    color: #000;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 13px;
    transition: transform 0.2s ease;
}

.kamal-chatbot-send:hover {
    transform: scale(1.06);
}

.kamal-chatbot-footer-note {
    font-size: 10px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 6px 2px;
    background: var(--card-bg);
}

@media (max-width: 768px) {
    #kamal-chatbot-root {
        left: auto;
        right: 12px;
        bottom: 12px;
    }

    .kamal-chatbot-window {
        width: calc(100vw - 24px);
        max-height: calc(100vh - 96px);
        right: 0;
        bottom: calc(100% + 10px);
        margin: 0;
        border-radius: 14px;
    }

    .kamal-chatbot-header {
        padding: 10px;
    }

    .kamal-chatbot-suggestions {
        padding: 0 10px 10px;
    }

    .kamal-chatbot-suggestion-chip {
        font-size: 11px;
        padding: 6px 11px;
    }
}

.counter-wrap {
    text-align: center;
    padding: 30px;
}

.counter-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.counter-icon i {
    font-size: 28px;
    color: #000;
}

.counter-number {
    font-family: var(--font-heading);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    color: var(--primary-color);
    margin-bottom: 10px;
}

.counter-label {
    color: var(--text-muted);
    font-size: 1rem;
    font-weight: 500;
}

/* ===== Flip Cards ===== */
.flip-card {
    height: 350px;
    perspective: 1000px;
    margin-bottom: 30px;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    transition: transform 0.8s;
    transform-style: preserve-3d;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    border-radius: 16px;
    overflow: hidden;
}

.flip-card-front {
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
}

.flip-card-front::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9) 0%, rgba(0, 0, 0, 0.3) 100%);
}

.flip-card-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    width: 100%;
}

.flip-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
}

.flip-icon i {
    font-size: 24px;
    color: #000;
}

.flip-card-front h3 {
    font-size: 1.4rem;
    color: var(--text-light);
}

.flip-card-back {
    background-color: rgba(0, 0, 0, 0.6);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-blend-mode: overlay;
    transform: rotateY(180deg);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center !important;
    padding: 30px;
    text-align: center;
    gap: 20px;
}

/* Background helpers for flip cards */
.flip-card-back.bg-nasrin { background-image: url('../images/Attorneys/Nasrin.JPG'); }
.flip-card-back.bg-harun { background-image: url('../images/Attorneys/Harun.JPG'); }
.flip-card-back.bg-chowdhury { background-image: url('../images/Attorneys/Chowdhury.JPG'); }
.flip-card-back.bg-kabir { background-image: url('../images/Attorneys/Kabir.JPG'); }
.flip-card-back.bg-rashed { background-image: url('../images/Attorneys/Rashed.JPG'); }
.flip-card-back.bg-mahadi { background-image: url('../images/Attorneys/Mahadi.JPG'); }

.flip-card-back.bg-sandip { background-image: url('../images/Staffs/Sandip.JPG'); }

.flip-card-back h3 {
    font-size: 1.5rem;
    color: #ffffff;
    margin: 0;
}

.flip-card-back p {
    color: #ffffff;
    margin: 0;
    line-height: 1.6;
}

.btn-flip {
    display: inline-flex;
    align-items: center;
    padding: 12px 25px;
    background: #000;
    color: var(--primary-color);
    border-radius: 8px;
    font-weight: 600;
    transition: var(--transition);
}

.btn-flip:hover {
    background: var(--bg-dark);
    color: var(--primary-color);
    transform: translateY(-2px);
}

/* ===== Case Studies ===== */
.nav-tabs-custom {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    list-style: none;
    padding: 0;
    margin: 0;
    justify-content: center;
}

.nav-tabs-custom .nav-link {
    background: rgba(175, 169, 57, 0.1);
    border: 1px solid rgba(175, 169, 57, 0.2);
    color: var(--text-light);
    padding: 10px 25px;
    border-radius: 30px;
    font-weight: 500;
    transition: var(--transition);
    cursor: pointer;
}

.nav-tabs-custom .nav-link:hover,
.nav-tabs-custom .nav-link.active {
    background: var(--gradient-primary);
    border-color: transparent;
    color: #000;
}

.case-study-card {
    background: var(--bg-dark);
    border-radius: 16px;
    overflow: hidden;
    transition: var(--transition);
    border: 1px solid rgba(175, 169, 57, 0.1);
    height: 100%;
}

.case-study-card:hover {
    transform: translateY(-10px);
    box-shadow: var(--shadow);
    border-color: rgba(175, 169, 57, 0.3);
}

.case-img {
    height: 200px;
    background-size: cover;
    background-position: center;
    position: relative;
}

.case-img--corporate { background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600'); }
.case-img--property { background-image: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600'); }
.case-img--criminal { background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=600'); }
.case-img--family { background-image: url('https://images.unsplash.com/photo-1511895426328-dc8714191300?w=600'); }

.badge-category {
    position: absolute;
    top: 15px;
    left: 15px;
    background: var(--gradient-primary);
    color: #000;
    padding: 5px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}

.case-content {
    padding: 25px;
}

.case-content h3 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.case-content p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin-bottom: 15px;
}

.case-result {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 0.9rem;
}

.case-result i {
    font-size: 1.1rem;
}

.case-item {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

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

/* ===== Award Cards =====
   Visual treatment only brought in line with the site's hairline-gold/
   radius-card system here — the claims themselves (names, issuing bodies)
   are unverified and were deliberately left exactly as written; see
   redesign notes. */
.award-card {
    background: var(--bg-dark-secondary);
    border-radius: var(--radius-card);
    padding: 40px 30px;
    text-align: center;
    transition: var(--transition);
    border: var(--hairline-gold);
    height: 100%;
}

.award-card:hover {
    transform: translateY(-10px);
    border-color: var(--gold-primary);
    box-shadow: var(--shadow);
}

.award-icon {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.award-icon i {
    font-size: 32px;
    color: #000;
}

.award-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.award-card p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
}

/* ===== Attorney Cards =====
   The home page "Meet Our Attorneys" preview now reuses .chamber-card
   (see ATTORNEY PAGES — PREMIUM REDESIGN COMPONENTS below) instead of a
   second, older card style, so this used to be a two-style split — the
   .attorney-card/.attorney-img/.attorney-info trio below is now dead
   everywhere on the site. .attorney-social + .social-link stay: the
   "Other Attorneys" compact cards on attorney-*.html still use them. */
.attorney-social {
    position: absolute;
    bottom: -60px;
    left: 0;
    right: 0;
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    transition: var(--transition);
}

.attorney-social .social-link {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    transition: var(--transition);
    cursor: pointer;
}

.attorney-social .social-link:hover {
    transform: translateY(-3px);
}

/* ===== Testimonials ===== */
/* The Card Itself */

/* Option B: Subtle Gradient */
.testimonials-bg {
    background: linear-gradient(to bottom, #0F1113, #1A1D21) !important;
}

.testimonial-card {
    background-color: #1A1D21;
    /* Dark Secondary Background */
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 30px;
    height: 100%;
    transition: transform 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    /* Subtle lift on hover */
    border-color: var(--primary-color);
}

/* Stars */
.star-rating {
    color: var(--primary-color);
    /* Gold Color */
    font-size: 14px;
    margin-bottom: 20px;
    letter-spacing: 2px;
}

/* Quote Text */
.testimonial-text {
    color: #9CA3AF;
    /* Muted Grey */
    font-style: italic;
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 25px;
    min-height: 80px;
    /* Ensures all cards align nicely even with short text */
}

/* Author Section (Bottom) */
.testimonial-author {
    display: flex;
    align-items: center;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 20px;
}

/* Author logo badge — the "headshot" slot holds a company logo, not a
   person, so it gets a small white card the logo can sit on rather than
   being cropped into a circle like a photo. */
.author-logo-badge {
    flex-shrink: 0;
    width: 64px !important;
    /* Force override carousel styles */
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ffffff;
    border-radius: 8px;
    padding: 6px 8px;
    margin-right: 15px;
    border: 1px solid rgba(175, 169, 57, 0.35);
}

.author-logo {
    width: 100% !important;
    height: 100%;
    object-fit: contain;
}

.author-name {
    color: #FFFFFF;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 2px;
    font-family: var(--font-heading);
}

.author-role {
    color: #6B7280;
    /* Darker grey for role */
    font-size: 13px;
    display: block;
}

/* ==================== 
   CLIENT LOGO CAROUSEL (FIXED SIZES) 
   ==================== */

/* 1. The Container Slot */
/* This forces every carousel item to be exactly the same size */
.logo-carousel .item {
    height: 100px;
    /* Fixed height for the container */
    display: flex;
    /* Uses Flexbox */
    align-items: center;
    /* Vertically centers the logo */
    justify-content: center;
    /* Horizontally centers the logo */
    padding: 0 15px;
    /* Adds breathing room on sides */
}

/* 2. The Logo Image */
.client-logo {
    max-height: 80px !important;
    /* Forces all logos to be 50px tall */
    width: auto !important;
    /* Lets width adjust automatically */
    max-width: 100%;
    /* Ensures it doesn't overflow */

    /* Styling */
    opacity: 0.5;
    filter: grayscale(100%) invert(1);
    /* White/Grey look */
    transition: all 0.4s ease;
    display: block;
}

/* 3. Hover Effect */
.client-logo:hover {
    opacity: 1;
    filter: grayscale(0%) invert(0);
    /* Reveal original colors */
    transform: scale(1.1);
}

/* ===== CTA Section ===== */
.cta-section {
    padding: 80px 0;
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.1) 0%, rgba(180, 136, 17, 0.1) 100%);
    border-top: 1px solid rgba(175, 169, 57, 0.2);
    border-bottom: 1px solid rgba(175, 169, 57, 0.2);
}

.cta-section h2 {
    font-size: 2.5rem;
    margin-bottom: 20px;
}

.cta-section p {
    font-size: 1.1rem;
    color: var(--text-muted);
    margin-bottom: 30px;
}

.cta-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 15px;
}

/* ========================
   COMPACT FOOTER NEWSLETTER
   ======================== */

/* 1. The Input Field */
.subscribe-form-compact .form-control {
    background: rgba(255, 255, 255, 0.1);
    /* Transparent/Dark bg */
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border-radius: 4px 0 0 4px;
    /* Rounded left only */
    padding: 10px 15px;
    height: 45px;
}

.subscribe-form-compact .form-control::placeholder {
    color: #6c757d;
    /* Muted placeholder text */
    font-size: 14px;
}

.subscribe-form-compact .form-control:focus {
    background: rgba(255, 255, 255, 0.15);
    border-color: var(--primary-color);
    /* Gold border on click */
    box-shadow: none;
}

/* 2. The Gold Button */
.subscribe-form-compact .btn-gold {
    background-color: var(--primary-color);
    /* Your Gold #AFA939 */
    color: #000000;
    border: none;
    padding: 0 20px;
    border-radius: 0 4px 4px 0;
    /* Rounded right only */
    transition: all 0.3s ease;
}

.subscribe-form-compact .btn-gold:hover {
    background-color: #ffffff;
    /* Turns white on hover */
    color: var(--primary-color);
}


/* ===== Consultation Form ===== */
.consultation-form-wrap {
    background: var(--bg-dark);
    border-radius: 20px;
    padding: clamp(20px, 5vw, 50px);
    border: 1px solid rgba(175, 169, 57, 0.1);
}

.form-label {
    color: var(--text-light);
    font-weight: 500;
    margin-bottom: 8px;
}

.form-control,
.form-select {
    background: rgba(175, 169, 57, 0.05);
    border: 1px solid rgba(175, 169, 57, 0.2);
    border-radius: 10px;
    color: var(--text-light);
    padding: 12px 18px;
    transition: var(--transition);
}

.form-control:focus,
.form-select:focus {
    background: rgba(175, 169, 57, 0.1);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(175, 169, 57, 0.1);
    color: var(--text-light);
}

.form-control::placeholder {
    color: var(--text-muted);
}

.form-select option {
    background: var(--bg-dark);
    color: var(--text-light);
}

.form-check-input {
    background-color: rgba(175, 169, 57, 0.1);
    border-color: rgba(175, 169, 57, 0.3);
}

.form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.form-check-label {
    color: var(--text-muted);
}

.form-check-label a {
    color: var(--primary-color);
}

/* ===== Contact Section ===== */
.contact-info-card {
    background: var(--bg-dark-secondary);
    border-radius: 16px;
    padding: 40px 30px;
    text-align: center;
    height: 100%;
    transition: var(--transition);
    border: 1px solid rgba(175, 169, 57, 0.1);
}

.contact-info-card:hover {
    transform: translateY(-10px);
    border-color: rgba(175, 169, 57, 0.3);
    box-shadow: var(--shadow);
}

.contact-icon {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.contact-icon i {
    font-size: 24px;
    color: #000;
}

.contact-info-card h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}

.contact-info-card p {
    color: var(--text-muted);
    margin: 0;
}

.contact-info-card a {
    color: var(--text-muted);
}

.contact-info-card a:hover {
    color: var(--primary-color);
}

.map-wrapper {
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(175, 169, 57, 0.2);
}

.contact-office-map {
    width: 100%;
    height: 100%;
    min-height: 350px;
    background: #121416;
}

.map-wrapper .leaflet-container {
    width: 100%;
    height: 100%;
    background: #121416;
    font-family: 'Inter', sans-serif;
}

/* Keep the Leaflet map close to the earlier embedded-map tone. */
.map-wrapper .leaflet-tile-pane {
    filter: grayscale(100%) invert(90%);
}

.contact-map-note {
    color: var(--text-muted);
    font-size: 0.95rem;
}

.office-map-marker {
    position: relative;
    width: 18px;
    height: 18px;
}

.office-map-marker__dot {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-dark) 100%);
    border: 2px solid rgba(15, 17, 19, 0.9);
    box-shadow: 0 0 0 4px rgba(212, 175, 55, 0.22);
    z-index: 2;
}

.office-map-marker__pulse,
.office-map-marker__pulse::after {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
    border: 2px solid rgba(212, 175, 55, 0.58);
    animation: office-map-blink 1.9s ease-out infinite;
    z-index: 1;
}

.office-map-marker__pulse::after {
    animation-delay: 0.7s;
}

@keyframes office-map-blink {
    0% {
        transform: scale(0.35);
        opacity: 0.95;
    }

    70% {
        transform: scale(1.15);
        opacity: 0.2;
    }

    100% {
        transform: scale(1.45);
        opacity: 0;
    }
}

.office-map-popup h6 {
    margin: 0 0 0.4rem;
    font-size: 0.95rem;
    color: #111;
}

.office-map-popup p {
    margin: 0;
    color: #3f4650;
    line-height: 1.55;
    font-size: 0.88rem;
}

.office-map-popup .office-map-directions {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.65rem;
    padding: 0.38rem 0.7rem;
    border-radius: 999px;
    background: linear-gradient(135deg, var(--accent-color) 0%, var(--accent-color-dark) 100%);
    color: #111;
    font-size: 0.78rem;
    font-weight: 700;
    text-decoration: none;
}

.office-map-popup .office-map-directions:hover {
    color: #111;
    filter: brightness(1.06);
}

@media (max-width: 575.98px) {
    .contact-office-map {
        min-height: 320px;
    }
}

/* ===== Footer ===== */
/* ========================
   FOOTER SECTION STYLES
   ======================== */

.footer-section {
    background-color: var(--footer-bg);
    color: var(--footer-text);
    padding: 80px 0 30px 0;
    font-family: 'Inter', sans-serif;
    border-top: 3px solid var(--accent-color);
}

/* 1. Brand Styling */
.footer-logo {
    color: var(--footer-text);
    font-family: 'Playfair Display', serif;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 5px;
}

.footer-tagline {
    color: var(--accent-color);
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 2px;
    display: block;
}

.footer-desc {
    font-size: 15px;
    line-height: 1.6;
    margin-top: 15px;
    max-width: 350px;
}

/* 2. Headings */
.footer-heading {
    color: var(--footer-text);
    font-family: 'Playfair Display', serif;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Optional: Small gold line under headings */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 30px;
    height: 2px;
    background-color: var(--primary-color);
}

/* 3. Links */
.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: var(--footer-text);
    opacity: 0.8;
    text-decoration: none;
    transition: color 0.3s, padding-left 0.3s;
    font-size: 15px;
}

.footer-links a:hover {
    color: var(--accent-color);
    padding-left: 5px;
}

/* 4. Business Hours */
.business-hours li {
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    font-size: 14px;
}

.business-hours li:last-child {
    border-bottom: none;
}

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

/* 5. Social Icons */
.footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.05);
    color: #fff;
    border-radius: 50%;
    /* Circle shape */
    margin-right: 10px;
    transition: all 0.3s ease;
    text-decoration: none;
}

.footer-social a:hover {
    background: var(--primary-color);
    color: #000;
    transform: translateY(-3px);
}

/* 6. Middle Bar (Chambers & Contact) */
.footer-middle-bar {
    background: rgba(255, 255, 255, 0.03);
    /* Very subtle overlay */
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 40px;
    margin-top: 20px;
}

/* Contact Pills (Phone/Email) */
.contact-pill {
    color: #ffffff;
    font-size: 18px;
    font-weight: 500;
    text-decoration: none;
    transition: 0.3s;
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.contact-pill i {
    font-size: 16px;
}

.contact-pill:hover {
    color: var(--primary-color);
}

.border-bottom-light {
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* Chamber Titles */
.chamber-title {
    color: #ffffff;
    font-family: 'Playfair Display', serif;
    /* Matching your brand font */
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
    letter-spacing: 0.5px;
}

/* Chamber Addresses */
.chamber-address {
    color: #9CA3AF;
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 0;
}

/* Dividers for Desktop View */
@media (min-width: 768px) {
    .border-start-md {
        border-left: 1px solid rgba(255, 255, 255, 0.1);
    }

    .border-end-md {
        border-right: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Hover Effect for Chambers */
.chamber-box {
    padding: 10px;
    transition: all 0.3s ease;
}

.chamber-box:hover .chamber-title {
    color: var(--primary-color);
}

/* 7. Bottom Bar (Legal) */
.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: 25px;
    font-size: 14px;
}

.established-text {
    color: rgba(255, 255, 255, 0.5);
    margin-left: 5px;
}

.legal-links a {
    color: #9CA3AF;
    text-decoration: none;
    transition: 0.3s;
}

.legal-links a:hover {
    color: var(--primary-color);
}

.legal-links .divider {
    margin: 0 10px;
    color: rgba(255, 255, 255, 0.2);
}

/* ===== Video Modal ===== */
#videoModal .modal-content {
    background: #000;
    border: none;
    border-radius: 16px;
}

#videoModal .modal-header {
    border: none;
    position: absolute;
    right: 10px;
    top: 10px;
    z-index: 10;
}

#videoModal .modal-body {
    padding: 0;
}

#videoModal iframe {
    border-radius: 16px;
}

/* ===== Back to Top Button ===== */
.back-to-top {
    position: fixed;
    bottom: 30px;
    left: 30px;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--gradient-primary);
    border: none;
    color: #000;
    font-size: 18px;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transition: var(--transition);
    z-index: 999;
}

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

.back-to-top:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 30px rgba(175, 169, 57, 0.3);
}

/* ===== Expertise Card ===== */
.expertise-card {
    margin-top: 1.5rem;
    border: 2px solid rgba(212, 175, 55, 0.3);
    background: rgba(26, 30, 34, 0.5);
    border-radius: 0.5rem;
}

.expertise-content {
    padding: 1.5rem;
}

.expertise-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 1rem;
}

.expertise-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.expertise-pill {
    padding: 0.25rem 0.75rem;
    border: 1px solid rgba(212, 175, 55, 0.3);
    border-radius: 9999px;
    font-size: 0.75rem;
    background: rgba(212, 175, 55, 0.1);
    color: #B0B0B0;
}

/* ===== Responsive Styles ===== */
@media (max-width: 991px) {
    .navbar-collapse {
        background: var(--card-bg);
        padding: 20px;
        border-radius: 16px;
        margin-top: 15px;
        border: 1px solid var(--card-border);
        box-shadow: var(--shadow);
    }

    .navbar-nav .nav-link {
        padding: 8px 0 !important;
    }

    .nav-mobile-cta-item {
        display: block;
        margin-bottom: 10px;
    }

    .nav-mobile-cta-link {
        background: var(--gradient-primary);
        color: #000 !important;
        border-radius: 8px;
        padding: 10px 14px !important;
        font-weight: 600;
        display: inline-flex;
        align-items: center;
    }

    .nav-mobile-cta-link:hover {
        color: #000 !important;
        transform: translateY(-1px);
    }

    .navbar-nav .nav-link::after {
        display: none;
    }

    .hero-title {
        font-size: 2.5rem;
    }

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

    .testimonial-wrap {
        padding: 30px;
    }

    .consultation-form-wrap {
        padding: 30px;
    }
}

@media (max-width: 767px) {
    .section-padding {
        padding: 60px 0;
    }

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

    .hero-description {
        font-size: 1rem;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: flex-start;
    }

    .counter-number {
        font-size: 2.5rem;
    }

    .flip-card {
        height: 300px;
    }

    .testimonial-author {
        flex-direction: column;
        text-align: center;
    }

    .newsletter-form {
        flex-direction: column;
    }

    .cta-buttons {
        flex-direction: column;
    }

    .cta-buttons .btn {
        width: 100%;
    }
}

/* ===== Animation Classes ===== */
.fade-in {
    animation: fadeIn 0.5s ease forwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Success Message ===== */
.success-message {
    background: rgba(175, 169, 57, 0.1);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 20px;
    text-align: center;
    margin-top: 20px;
}

.success-message i {
    font-size: 3rem;
    color: var(--primary-color);
    margin-bottom: 15px;
}

.success-message h4 {
    margin-bottom: 10px;
}

.success-message p {
    color: var(--text-muted);
    margin: 0;
}

/* =========================================
   REACT PORT: HEAD OF CHAMBER (Exact Match)
   ========================================= */

/* 1. The Main Card Container */
/* React: border-2 transition-all group overflow-hidden bg-[#1a1e22]/50 border-[var(--primary-color)]/30 hover:border-[var(--primary-color)] */
.head-chamber-card {
    background-color: rgba(26, 30, 34, 0.5);
    /* Head of Chamber gets the founder accent, not the standard gold —
       distinguishes it from the .chamber-card grid below on attorneys.html */
    border: 2px solid var(--gold-founder);
    border-radius: var(--radius-card);
    /* standard rounded-lg/xl */
    overflow: hidden;
    transition: all 0.5s ease;
    position: relative;
}

/* Hover Effect: Border turns solid Gold */
.head-chamber-card:hover {
    border-color: var(--gold-founder);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

.head-chamber-card h3 {
    font-family: var(--font-heading);
    font-size: clamp(1.5rem, 1.6vw + 1rem, 2.1rem) !important;
}

.head-chamber-established {
    display: inline-block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.45);
    margin-bottom: 14px;
}

/* 2. The Image Section */
/* React: md:col-span-2 relative overflow-hidden */
.head-img-wrapper {
    height: 100%;
    min-height: 400px;
    /* React: min-h-[400px] */
    position: relative;
    overflow: hidden;
}

/* The Image Animation */
/* React: group-hover:scale-110 transition-transform duration-500 */
.head-img-wrapper img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}

.head-chamber-card:hover .head-img-wrapper img {
    transform: scale(1.1);
    /* Zoom in 10% */
}

/* The Gradient Overlay */
/* React: bg-gradient-to-t from-black via-black/50 to-transparent */
.head-img-overlay {
    position: absolute;
    inset: 0;
    /* top/bottom/left/right: 0 */
    background: linear-gradient(to top, #000000, rgba(0, 0, 0, 0.5), transparent);
    z-index: 1;
}

/* 3. Expertise Badges */
/* React: px-3 py-1 border rounded-full bg-[var(--primary-color)]/10 border-[var(--primary-color)]/30 text-[#B0B0B0] */
.expertise-badge {
    display: inline-block;
    padding: 4px 12px;
    font-size: 12px;
    border-radius: 50px;
    background-color: rgba(175, 169, 57, 0.1);
    border: 1px solid rgba(175, 169, 57, 0.3);
    color: #B0B0B0;
    margin-right: 8px;
    margin-bottom: 8px;
}

/* 4. Bottom Details Section */
/* React: space-y-2 text-sm border-t pt-4 text-[#B0B0B0] border-[var(--primary-color)]/20 */
.head-details-box {
    border-top: 1px solid rgba(175, 169, 57, 0.2);
    padding-top: 16px;
    margin-top: 24px;
    font-size: 14px;
    color: #B0B0B0;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    /* React: space-y-2 */
}

/* =========================================
   ATTORNEY GRID: FLIP CARDS + STATS BOX
   ========================================= */

/* --- 1. THE FLIP CARD (2:3 Portrait) --- */
.flip-card {
    background-color: transparent;
    height: 450px;
    /* Portrait Ratio */
    perspective: 1000px;
    margin-bottom: 20px;
    cursor: pointer;
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    transform-style: preserve-3d;
    border-radius: 12px;
}

.flip-card:hover .flip-card-inner {
    transform: rotateY(180deg);
}

/* Common Face Styles */
.flip-card-front,
.flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}

/* Front Face */
.flip-card-front img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.flip-card-front::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent 60%);
}

.flip-front-caption {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    text-align: left;
}

/* Back Face (With Image & Overlay) */
.flip-card-back {
    /* Base styling */
    background-color: #1A1D21;
    border: 1px solid var(--primary-color);
    transform: rotateY(180deg);

    /* Background Image Handling */
    background-size: cover;
    background-position: center top;
    /* Focuses on the face usually */
    background-repeat: no-repeat;

    /* Layout: Push content to bottom */
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: center;
    padding: 30px;

    /* Important for the overlay */
    position: relative;
    z-index: 1;
}

/* The Dark Overlay (Crucial for reading text over the photo) */
.flip-card-back::before {
    content: '';
    position: absolute;
    inset: 0;
    /* Covers the whole card */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.85) 10%, rgba(0, 0, 0, 0.3) 100%);
    z-index: -1;
    /* Puts it behind the text but in front of the image */
    border-radius: 11px;
    /* Matches card radius */
}

/* Ensures text is clickable and visible */
.flip-back-content {
    position: relative;
    z-index: 2;
    width: 100%;
    text-align: center;
}

/* --- 2. THE STATS BOX (Bottom) --- */
.attorney-stats-box {
    background: rgba(26, 30, 34, 0.3);
    border: 1px solid rgba(212, 175, 55, 0.1);
    border-radius: 8px;
    padding: 16px;
    margin-top: 0;
    /* Can adjust gap if needed */
    backdrop-filter: blur(5px);
}

.stats-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--primary-color);
    /* Gold */
    font-weight: 600;
    margin-bottom: 8px;
    display: block;
}

.expertise-pill {
    display: inline-block;
    padding: 3px 10px;
    font-size: 11px;
    border-radius: 50px;
    background: rgba(212, 175, 55, 0.1);
    border: 1px solid rgba(212, 175, 55, 0.2);
    color: #B0B0B0;
    margin-right: 4px;
    margin-bottom: 4px;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: #B0B0B0;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding-top: 6px;
}

/* =========================================
   ATTORNEY DETAIL: HERO & NAV
   ========================================= */

/* 1. Page Wrapper (Handles the dark background & overflow) */
.page-wrapper {
    position: relative;
    overflow-x: hidden;
    background-color: #0F1113;
    /* Deep Dark Theme */
    min-height: 100vh;
}

/* 2. Glow Blobs (Atmosphere) */
.glow-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* Soft glow */
    z-index: 0;
    pointer-events: none;
    /* Let clicks pass through */
}

.blob-gold {
    background-color: var(--primary-color);
    /* Gold */
}

/* Specific positions for Profile Page */
.blob-profile-top {
    top: -100px;
    right: -100px;
    width: 400px;
    height: 400px;
    opacity: 0.15;
}

.blob-profile-side {
    top: 400px;
    left: -150px;
    width: 500px;
    height: 500px;
    opacity: 0.08;
}

/* 3. The "Back to Attorneys" Button (React Style) */
.btn-back {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    color: #B0B0B0;
    /* Muted Text */
    font-weight: 500;
    text-decoration: none;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 50px;
    /* Pill shape */
    transition: all 0.3s ease;
}

.btn-back i {
    margin-right: 8px;
    transition: transform 0.3s ease;
}

.btn-back:hover {
    color: var(--primary-color);
    /* Gold on hover */
    border-color: rgba(212, 175, 55, 0.3);
    background: rgba(212, 175, 55, 0.05);
    transform: translateX(-5px);
    /* Slight slide left effect */
}

.btn-back:hover i {
    transform: translateX(-3px);
    /* Arrow moves slightly more */
}

/* =========================================
   REACT PORT: DETAIL PROFILE IMAGE (Exact Match)
   ========================================= */

/* 1. The Sticky Container (Holds Image + Contact) */
.profile-sticky-wrapper {
    position: sticky;
    top: 100px;
    /* React: top-24 (96px) */
    z-index: 10;
}

/* 2. The Image Wrapper */
.profile-detail-img-wrapper {
    position: relative;
    border-radius: 16px;
    /* React: rounded-2xl */
    /* React: shadow-2xl */
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
    margin-bottom: 24px;
    /* Space between image and contact info */
}

/* 3. The Image Itself */
.profile-detail-img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
    /* React: rounded-2xl */

    /* React: border-4 border-[var(--primary-color)]/30 */
    border: 4px solid rgba(175, 169, 57, 0.3);

    /* Smooth transition if you want subtle hover effects later */
    transition: all 0.3s ease;
}

/* 4. The Gradient Overlay */
/* React: bg-gradient-to-t from-black/50 to-transparent */
.profile-img-gradient {
    position: absolute;
    inset: 0;
    /* Top/Right/Bottom/Left: 0 */
    background: linear-gradient(to top, rgba(0, 0, 0, 0.5), transparent);
    border-radius: 12px;
    /* Slightly smaller to fit inside border */
    pointer-events: none;
    /* Allows clicks to pass through if needed */
}

/* 5. Adjust Contact Card to sit nicely below */
/* Since image is now separate, we style the contact box as a separate rounded card */
.profile-contact-box {
    background: rgba(26, 30, 34, 0.5);
    border: 1px solid rgba(212, 175, 55, 0.2);
    border-radius: 16px;
    padding: 24px;
    backdrop-filter: blur(10px);
}


/* =========================================
   REACT PORT: QUICK CONTACT CARD (Compact)
   ========================================= */

/* 1. The Card Container */
/* React: mt-6 border-2 bg-[#1a1e22]/50 border-[var(--primary-color)]/30 */
.quick-contact-card {
    margin-top: 24px;
    /* mt-6 */
    background-color: rgba(26, 30, 34, 0.5);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    padding: 24px;
    /* p-6 */
    backdrop-filter: blur(5px);
}

/* 2. The Title */
/* React: text-theme-accent font-semibold mb-4 */
.quick-contact-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 18px;
    /* Standard h3 size */
}

/* 3. The Links (Phone/Email) */
/* React: flex items-center space-x-3 text-[#B0B0B0] hover:text-[var(--primary-color)] */
.quick-contact-link {
    display: flex;
    align-items: center;
    color: #B0B0B0;
    text-decoration: none;
    font-size: 14px;
    /* text-sm */
    transition: color 0.3s ease;
    margin-bottom: 12px;
    /* space-y-3 gap equivalent */
}

.quick-contact-link:last-child {
    margin-bottom: 0;
}

.quick-contact-link:hover {
    color: var(--primary-color);
}

.quick-contact-link i {
    width: 16px;
    /* w-4 */
    height: 16px;
    /* h-4 */
    margin-right: 12px;
    /* space-x-3 */
}

/* 4. The Button (Gradient Gold) */
/* React: bg-gradient-gold text-[#0F1113] w-full font-semibold */
.btn-gold-gradient {
    display: block;
    width: 100%;
    /* Create the gold gradient look */
    background: linear-gradient(to right, var(--primary-color), #FFE5B4, var(--primary-color));
    background-size: 200% auto;
    color: #0F1113;
    font-weight: 600;
    padding: 10px 16px;
    border-radius: 8px;
    border: none;
    text-align: center;
    text-decoration: none;
    transition: all 0.3s ease;
}

.btn-gold-gradient:hover {
    background-position: right center;
    /* Shine animation */
    color: #000;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(212, 175, 55, 0.25);
}


/* =========================================
   REACT PORT: EXPERTISE CARD (Sidebar)
   ========================================= */

/* 1. The Card Container (Same base style as Contact Card) */
/* React: mt-6 border-2 bg-[#1a1e22]/50 border-[var(--primary-color)]/30 */
.expertise-card {
    margin-top: 24px;
    /* mt-6 */
    background-color: rgba(26, 30, 34, 0.5);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    padding: 24px;
    /* p-6 */
    backdrop-filter: blur(5px);
}

/* 2. The Title */
/* React: text-theme-accent font-semibold mb-4 */
.expertise-title {
    color: var(--primary-color);
    font-weight: 600;
    margin-bottom: 16px;
    font-size: 18px;
}

/* 3. The Tags Wrapper */
/* React: flex flex-wrap gap-2 */
.expertise-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    /* gap-2 (0.5rem) */
}

/* 4. The Individual Pills */
/* React: px-3 py-1 border rounded-full text-xs bg-[var(--primary-color)]/10 border-[var(--primary-color)]/30 text-[#B0B0B0] */
.expertise-pill-sidebar {
    display: inline-block;
    padding: 4px 12px;
    /* px-3 py-1 */
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 50px;
    /* rounded-full */
    font-size: 12px;
    /* text-xs */
    background-color: rgba(175, 169, 57, 0.1);
    color: #B0B0B0;
    transition: all 0.3s ease;
    cursor: default;
}

/* Optional Hover Effect (To make it feel premium) */
.expertise-pill-sidebar:hover {
    background-color: rgba(175, 169, 57, 0.2);
    border-color: var(--primary-color);
    color: #fff;
    transform: translateY(-1px);
}

/* =========================================
   REACT PORT: PROFILE CONTENT HEADER
   ========================================= */

/* 1. Name: text-5xl font-bold mb-2 */
.profile-name {
    font-size: clamp(1.75rem, 3.5vw + 0.5rem, 3rem);
    line-height: 1.1;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.75rem;
}

/* 2. Designation: text-2xl text-theme-accent font-semibold mb-2 */
.profile-designation {
    font-size: 1.5rem;
    /* 24px - Matches Tailwind text-2xl */
    line-height: 1.3;
    font-weight: 600;
    color: var(--primary-color);
    /* Theme Accent */
    margin-bottom: 0.75rem;
}

/* 3. Credentials: text-lg text-[#B0B0B0] mb-2 */
.profile-credentials {
    font-size: 1.125rem;
    /* 18px - Matches Tailwind text-lg */
    color: #B0B0B0;
    margin-bottom: 0.5rem;
}

/* 4. Title: text-[#B0B0B0] */
.profile-title {
    font-size: 1rem;
    /* 16px - Base size */
    color: #B0B0B0;
    margin-bottom: 0;
}

/* profile-name now uses clamp() — no separate mobile override needed */


/* ==================== 
   LAYOUT FIXES: WIDER & BREATHABLE 
   ==================== */

/* 1. Widen the Content Area (The "Viewport" fix) */
/* Standard Bootstrap stops at 1140px or 1320px. We force it wider. */
@media (min-width: 1400px) {
    .container {
        max-width: 1440px !important;
        /* Significantly wider */
    }
}

/* 2. Increase Vertical Breathing Room — no !important so mobile overrides work */
/* Base rule at .section-padding already sets padding: 100px 0. */

/* 3. Improve Text Readability ("Air" inside the text) */
body {
    line-height: 1.8 !important;
    /* Standard is 1.5. This adds space between lines */
}

p {
    margin-bottom: 1.5rem;
    /* Adds more space after paragraphs */
}

/* 4. Add Space Between Grid Items — only on md+ to prevent mobile overflow */
@media (min-width: 768px) {
    .row {
        margin-right: -20px;
        margin-left: -20px;
    }

    .col-1, .col-2, .col-3, .col-4, .col-5, .col-6,
    .col-7, .col-8, .col-9, .col-10, .col-11, .col-12,
    .col, .col-auto,
    .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6,
    .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12,
    .col-md-1, .col-md-2, .col-md-3, .col-md-4, .col-md-5, .col-md-6,
    .col-md-7, .col-md-8, .col-md-9, .col-md-10, .col-md-11, .col-md-12,
    .col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, .col-lg-5, .col-lg-6,
    .col-lg-7, .col-lg-8, .col-lg-9, .col-lg-10, .col-lg-11, .col-lg-12 {
        padding-right: 20px;
        padding-left: 20px;
    }
}

/* =========================================
   ATTORNEY DETAIL PAGE NEW STYLES
   ========================================= */

/* Hero Section Gradient Overlay */
.hero-gradient-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.1) 0%, rgba(15, 17, 19, 0.8) 100%);
    pointer-events: none;
}

/* Quick Info Grid */
.quick-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 24px;
    margin-bottom: 3rem;
}

.quick-info-item {
    display: flex;
    align-items: center;
    background: rgba(26, 30, 34, 0.5);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    padding: 20px;
    backdrop-filter: blur(5px);
    transition: all 0.3s ease;
}

.quick-info-item:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(212, 175, 55, 0.1);
}

.quick-info-icon {
    width: 50px;
    height: 50px;
    background: linear-gradient(135deg, var(--primary-color), #FFE5B4);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #0F1113;
    font-size: 20px;
    margin-right: 16px;
    flex-shrink: 0;
}

.quick-info-content h4 {
    color: var(--primary-color);
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.quick-info-content p {
    color: #ECECEC;
    font-size: 14px;
    margin: 0;
}

/* Profile Sections */
.profile-section {
    margin-bottom: 3rem;
}

.section-title {
    color: #ECECEC;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 24px;
    position: relative;
}

.section-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 60px;
    height: 3px;
    background: linear-gradient(90deg, var(--primary-color), #FFE5B4);
    border-radius: 2px;
}

.text-center .section-title::after {
    left: 50%;
    transform: translateX(-50%);
}

.profile-text {
    color: #ffffff;
    font-size: 16px;
    line-height: 1.7;
    margin-bottom: 16px;
}

/* Education List */
.education-list {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.education-item {
    background: rgba(26, 30, 34, 0.5);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    padding: 20px;
    transition: all 0.3s ease;
}

.education-item:hover {
    border-color: rgba(212, 175, 55, 0.4);
    transform: translateY(-2px);
}

.education-degree {
    margin-bottom: 16px;
}

.education-degree:last-child {
    margin-bottom: 0;
}

.education-degree h4 {
    color: #ECECEC;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
}

.education-institution {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
}

/* Practice Areas Grid */
.practice-areas-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

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

.practice-area-card {
    background: rgba(26, 30, 34, 0.5);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    transition: all 0.3s ease;
    cursor: pointer;
}

.practice-area-card:hover {
    border-color: rgba(212, 175, 55, 1);
}

.practice-area-content {
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.practice-area-content i {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.practice-area-content span {
    color: #B0B0B0;
    transition: color 0.3s ease;
}

.practice-area-card:hover .practice-area-content span {
    color: var(--primary-color);
}

/* CTA Section */
.cta-section {
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.1) 0%, rgba(26, 30, 34, 0.8) 100%);
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 16px;
    padding: clamp(20px, 4vw, 40px);
    text-align: center;
    margin-top: 3rem;
}

.cta-content h2 {
    color: #ECECEC;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 16px;
}

.cta-content p {
    color: #B0B0B0;
    font-size: 18px;
    margin-bottom: 32px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.cta-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.cta-buttons .btn {
    padding: 12px 24px;
    border-radius: 8px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.cta-buttons .btn-primary {
    background: linear-gradient(135deg, var(--primary-color), #FFE5B4);
    color: #0F1113;
    border: none;
}

.cta-buttons .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(175, 169, 57, 0.3);
}

.cta-buttons .btn-outline {
    background: transparent;
    color: var(--primary-color);
    border: 2px solid var(--primary-color);
}

.cta-buttons .btn-outline:hover {
    background: var(--primary-color);
    color: #0F1113;
    transform: translateY(-2px);
}

/* =========================================
   ATTORNEY PAGES — PREMIUM REDESIGN COMPONENTS
   Used by attorneys.html + attorney-*.html only.
   Deliberately new class names (.chamber-card, .staff-card,
   .overseas-*, .founder-*) instead of restyling .flip-card /
   .attorney-social in place — those two selectors are also used by
   index.html and/or practice-areas.html and must not change there.
   ========================================= */

/* Founder pull-quote (Kamal's page only) */
.founder-quote {
    position: relative;
    padding: 8px 0 8px 28px;
    margin-bottom: 2rem;
    border-left: 2px solid var(--gold-founder);
}

.founder-quote p {
    font-family: var(--font-heading);
    font-style: italic;
    font-size: clamp(1.15rem, 1.4vw + 0.7rem, 1.5rem);
    line-height: 1.5;
    color: #F1E9D6;
    margin: 0;
}

.founder-quote p::before {
    content: '\201C';
    color: var(--gold-founder);
    font-size: 1.4em;
    line-height: 0;
    vertical-align: -0.15em;
    margin-right: 2px;
}

/* Overseas Visits — editorial list, replaces the flat expertise-pill wall.
   Region grouping is optional per-attorney: add <li class="overseas-region">
   rows only when there are enough countries to warrant grouping (Kamal);
   shorter lists (Nasrin, Chowdhury) can skip straight to overseas-row items. */
.overseas-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.overseas-region-label {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: rgba(255, 255, 255, 0.4);
    margin: 16px 0 6px;
}

.overseas-region-label:first-child {
    margin-top: 0;
}

.overseas-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-size: 14px;
    color: #D6D9DD;
}

.overseas-row:last-child {
    border-bottom: none;
}

.overseas-count {
    color: var(--gold-primary);
    font-family: var(--font-heading);
    font-size: 13px;
}

.overseas-summary {
    margin-top: 14px;
    padding-top: 14px;
    border-top: var(--hairline-gold);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    color: var(--gold-primary);
    text-align: center;
}

/* Photo placeholder — used wherever a real photo file doesn't exist yet
   (Jagadish, Habibur). Swap in a real <img src> later; no template change
   needed since it takes the same slot as .chamber-card-photo / etc. */
.photo-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(160deg, #1C1F24 0%, #0F1113 100%);
    width: 100%;
    height: 100%;
}

.photo-placeholder-initials {
    font-family: var(--font-heading);
    color: var(--gold-primary);
    border: 1px solid rgba(175, 169, 57, 0.35);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    width: 34%;
    min-width: 56px;
    max-width: 140px;
    font-size: 2.2rem;
}

.profile-detail-img-wrapper .photo-placeholder {
    border-radius: 16px;
}

/* Attorneys.html grid card — static (no hover-flip), shows photo, name,
   designation, specialization and stats all at once. Replaces
   .flip-card + the separate .attorney-stats-box that used to sit under it. */
.chamber-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(26, 30, 34, 0.55);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    overflow: hidden;
    text-decoration: none;
    transition: var(--transition);
}

.chamber-card:hover {
    border-color: var(--gold-primary);
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
    text-decoration: none;
}

.chamber-card-photo {
    position: relative;
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.chamber-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
    display: block;
}

.chamber-card:hover .chamber-card-photo img {
    transform: scale(1.04);
}

.chamber-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.chamber-card-name {
    font-family: var(--font-heading);
    font-size: 18px;
    color: #fff;
    margin: 0 0 4px;
}

.chamber-card-role {
    color: var(--gold-primary);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.chamber-card-spec {
    color: #B0B0B0;
    font-size: 13px;
    margin-bottom: 14px;
}

.chamber-card-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.chamber-card-stats {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 11px;
    color: #8A8F96;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.chamber-card-stats strong {
    display: block;
    color: #ECECEC;
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    margin-top: 2px;
}

/* Founder-tier variant — home page's featured Kamal card, above the
   attorney-carousel. Same .chamber-card component, founder-gold accent
   instead of the standard gold used by the carousel below it. */
.chamber-card--founder {
    border: 2px solid var(--gold-founder);
}

.chamber-card--founder:hover {
    border-color: var(--gold-founder);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
}

.chamber-card--founder .chamber-card-name {
    font-size: 20px;
    text-align: center;
}

.chamber-card-role--founder {
    color: var(--gold-founder);
}

.chamber-card--founder .chamber-card-role {
    text-align: center;
}

/* Home page cards run smaller than the attorneys.html grid — scoped to
   .chamber-card--founder and .attorney-carousel (both home-page-only)
   so the full-size cards on attorneys.html are untouched. */
.chamber-card--founder .chamber-card-photo,
.attorney-carousel .chamber-card-photo {
    aspect-ratio: 4 / 5;
}

.chamber-card--founder .chamber-card-body,
.attorney-carousel .chamber-card-body {
    padding: 14px;
}

.chamber-card--founder .chamber-card-name {
    font-size: 17px;
}

.attorney-carousel .chamber-card-name {
    font-size: 15px;
}

.chamber-card--founder .chamber-card-role,
.attorney-carousel .chamber-card-role {
    font-size: 11px;
    margin-bottom: 6px;
}

.chamber-card--founder .chamber-card-spec,
.attorney-carousel .chamber-card-spec {
    font-size: 12px;
    margin-bottom: 10px;
}

.attorney-carousel .chamber-card-pills {
    gap: 5px;
    margin-bottom: 10px;
}

.attorney-carousel .chamber-card-pills .expertise-pill-sidebar {
    padding: 3px 10px;
    font-size: 11px;
}

.chamber-card--founder .chamber-card-stats,
.attorney-carousel .chamber-card-stats {
    padding-top: 10px;
    font-size: 10px;
}

.chamber-card--founder .chamber-card-stats strong,
.attorney-carousel .chamber-card-stats strong {
    font-size: 12px;
}

/* Office Staff — dedicated small variant, no legal-practice stat fields */
.staff-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: rgba(26, 30, 34, 0.55);
    border: var(--hairline-gold);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.staff-card-photo {
    aspect-ratio: 3 / 4;
    overflow: hidden;
}

.staff-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    display: block;
}

.staff-card-body {
    padding: 20px;
    text-align: center;
}

.staff-card-name {
    font-family: var(--font-heading);
    font-size: 17px;
    color: #fff;
    margin: 0 0 4px;
}

.staff-card-role {
    color: #B0B0B0;
    font-size: 13px;
}

@media (max-width: 767.98px) {
    .chamber-card-photo,
    .staff-card-photo {
        aspect-ratio: 4 / 5;
    }
}

/* Other Attorneys Section */
.other-attorneys-section {
    background: rgba(15, 17, 19, 0.95);
    position: relative;
}

.other-attorneys-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(212, 175, 55, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.section-header .section-title {
    color: #ECECEC;
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 16px;
}

.section-subtitle {
    color: #B0B0B0;
    font-size: 18px;
    margin: 0;
}

/* Attorney Card Compact */
.attorney-card-compact {
    background: rgba(26, 30, 34, 0.8);
    border: 1px solid rgba(175, 169, 57, 0.2);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
    height: 100%;
}

.attorney-card-compact:hover {
    border-color: rgba(175, 169, 57, 0.4);
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(175, 169, 57, 0.15);
}

.attorney-img-compact {
    position: relative;
    height: 250px;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

.attorney-img-compact img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.3s ease;
}

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

.attorney-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 16px;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.attorney-card-compact:hover .attorney-overlay {
    opacity: 1;
}

.attorney-social {
    display: flex;
    gap: 12px;
}

.attorney-social .social-link {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ECECEC;
    text-decoration: none;
    transition: all 0.3s ease;
}

.attorney-social .social-link:hover {
    background: var(--primary-color);
    color: #0F1113;
    transform: translateY(-2px);
}

.attorney-info-compact {
    padding: 20px;
}

.attorney-info-compact h4 {
    color: #ECECEC;
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
}

.attorney-info-compact .position {
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    margin-bottom: 8px;
    display: block;
}

.attorney-info-compact .specialization {
    color: #B0B0B0;
    font-size: 14px;
    margin: 0;
    line-height: 1.4;
}

/* Attorney Card Link */
.attorney-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
    height: 100%;
    pointer-events: auto;
    position: relative;
    z-index: 10;
}

.attorney-card-link:hover {
    text-decoration: none;
    color: inherit;
}

/* Attorneys Carousel Styles */
#attorneysCarousel .carousel-control-prev,
#attorneysCarousel .carousel-control-next {
    width: 50px;
    height: 50px;
    background: rgba(175, 169, 57, 0.9);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    border: none;
    opacity: 0.8;
    transition: all 0.3s ease;
}

#attorneysCarousel .carousel-control-prev {
    left: -25px;
}

#attorneysCarousel .carousel-control-next {
    right: -25px;
}

#attorneysCarousel .carousel-control-prev:hover,
#attorneysCarousel .carousel-control-next:hover {
    background: var(--primary-color);
    opacity: 1;
    transform: translateY(-50%) scale(1.1);
}

#attorneysCarousel .carousel-control-prev-icon,
#attorneysCarousel .carousel-control-next-icon {
    width: 20px;
    height: 20px;
}

#attorneysCarousel .carousel-indicators {
    bottom: -50px;
}

#attorneysCarousel .carousel-indicators button {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(175, 169, 57, 0.3);
    border: none;
    margin: 0 5px;
    transition: all 0.3s ease;
}

#attorneysCarousel .carousel-indicators button.active {
    background-color: var(--primary-color);
    transform: scale(1.2);
}

/* Carousel item centering for single attorney */
#attorneysCarousel .carousel-item .row {
    min-height: 400px;
    align-items: center;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .quick-info-grid {
        grid-template-columns: 1fr;
    }

    .practice-areas-grid {
        grid-template-columns: 1fr;
    }

    .cta-buttons {
        flex-direction: column;
        align-items: center;
    }

    .cta-buttons .btn {
        width: 100%;
        max-width: 300px;
    }

    .section-title {
        font-size: 24px;
    }

    .cta-content h2 {
        font-size: 24px;
    }

    .attorney-img-compact {
        height: 200px;
    }

    #attorneysCarousel .carousel-control-prev {
        left: 10px;
    }

    #attorneysCarousel .carousel-control-next {
        right: 10px;
    }

    #attorneysCarousel .carousel-indicators {
        bottom: -40px;
    }
}

/* Simple Functional Profile Button */
.btn-view-profile {
    display: block;
    width: 100%;
    padding: 10px 15px;
    background-color: #b8860b;
    color: #000 !important;
    text-align: center;
    text-decoration: none;
    font-weight: 600;
    border: 1px solid #b8860b;
    border-radius: 4px;
    transition: all 0.2s ease;
}

.btn-view-profile:hover {
    background-color: transparent;
    color: #b8860b !important;
}

/* =========================================
   PRACTICE AREA MODAL STYLES
   ========================================= */
.practice-modal-content {
    background-color: var(--bg-dark);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    box-shadow: 0 15px 40px rgba(0, 0, 0, 0.7);
    color: var(--text-light);
}

.border-bottom-gold {
    border-bottom: 1px solid rgba(175, 169, 57, 0.3);
    padding: 20px 25px;
}

.border-top-gold {
    border-top: 1px solid rgba(175, 169, 57, 0.3);
    padding: 20px 25px;
}

.practice-modal-icon {
    width: 45px;
    height: 45px;
    background: var(--gradient-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
    font-size: 1.2rem;
}

.modal-title {
    font-family: var(--font-heading);
    color: #ffffff;
    font-weight: 700;
    margin: 0;
}

.btn-close-white {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: 0.8;
}

.btn-close-white:hover {
    opacity: 1;
}

.practice-overview {
    font-size: 1.05rem;
    line-height: 1.7;
    margin-bottom: 25px;
    color: #d1d5db !important;
    /* Tailwind gray-300 equivalent */
}

/* Service List */
.practice-service-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
}

@media (min-width: 768px) {
    .practice-service-list {
        grid-template-columns: 1fr 1fr;
    }
}

.practice-service-list li {
    position: relative;
    padding-left: 25px;
    color: var(--text-muted);
}

.practice-service-list li::before {
    content: "\f00c";
    /* FontAwesome Check Icon */
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 2px;
    color: var(--primary-color);
    font-size: 0.85rem;
}

/* Why Choose Us Items */
.why-choose-item {
    display: flex;
    gap: 15px;
    margin-bottom: 15px;
}

.why-choose-icon {
    width: 35px;
    height: 35px;
    min-width: 35px;
    background: rgba(175, 169, 57, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    border: 1px solid rgba(175, 169, 57, 0.2);
}

.why-choose-text h6 {
    color: #fff;
    margin-bottom: 4px;
    font-size: 1rem;
}

.why-choose-text p {
    color: var(--text-muted);
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
}

/* Modal Body Padding */
.modal-body {
    padding: clamp(16px, 4vw, 30px);
}


/* ===== Flip Card Backgrounds ===== */
.flip-card-front.bg-corporate {
    background-image: url("https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=600");
}

.flip-card-front.bg-banking {
    background-image: url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=600");
}

.flip-card-front.bg-realestate {
    background-image: url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600");
}

.flip-card-front.bg-family {
    background-image: url("https://images.unsplash.com/photo-1511895426328-dc8714191300?w=600");
}

.flip-card-front.bg-criminal {
    background-image: url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=600");
}

.flip-card-front.bg-ip {
    background-image: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=600");
}

/* Updated Flip Card Content Style */
.flip-card-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
}


/* Fix for Flip Card Button Clickability */
.flip-card:hover .flip-card-front {
    z-index: -1;
}

.flip-card:hover .flip-card-back {
    z-index: 100;
}

/* ===== Service Areas Page ===== */
.service-areas-hero {
    background-image: url('../images/Background/BG3.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    min-height: 90vh;
    padding: 6rem 0 4rem;
    align-items: flex-start;
}

.service-areas-hero .hero-content {
  min-height: 55vh;
}

.service-areas-hero .hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero-section .breadcrumb {
  background: transparent;
}

.hero-section .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65);
}

@media (max-width: 768px) {
  .service-areas-hero .hero-title {
    font-size: 2.5rem;
  }
}

.practice-areas-hero,
.attorneys-hero {
    background-image: url('../images/Background/BG4.JPG');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center top;
    background-attachment: fixed;
    min-height: 90vh;
    padding: 10rem 0 4rem;
    align-items: flex-start;
}

.attorneys-hero {
    padding: 6rem 0 4rem;
}

.practice-areas-hero {
    background-image: url('../images/Background/BG5.JPG');
    padding: 6rem 0 4rem;
}

.practice-areas-hero .row.align-items-center,
.attorneys-hero .row.align-items-center {
    min-height: 55vh;
}

.practice-areas-hero .hero-title,
.attorneys-hero .hero-title {
  font-size: 3rem;
  margin-bottom: 1rem;
}

@media (max-width: 768px) {
  .practice-areas-hero .hero-title,
  .attorneys-hero .hero-title {
    font-size: 2.5rem;
  }
}

.service-search .form-control {
  background: var(--input-bg);
  border-radius: 12px;
  border: 1px solid var(--input-border);
  height: 56px;
  color: var(--text-color);
}

.service-search .form-control:focus {
  box-shadow: 0 0 0 0.2rem rgba(175, 169, 57, 0.3);
  border-color: rgba(175, 169, 57, 0.8);
}

.service-search .input-group-text {
  border-radius: 12px 0 0 12px;
  border: 1px solid var(--input-border);
  border-right: 0;
}

.service-search {
    position: relative;
    z-index: 2100;
}

.service-search-row {
    position: relative;
    z-index: 2090;
}

.service-search-row,
.service-search-row > [class*="col-"] {
    overflow: visible;
}

.service-search-suggestions {
    position: absolute;
    top: calc(100% + 0.4rem);
    left: 0;
    right: 0;
    z-index: 2110;
    border: 1px solid var(--card-border);
    border-radius: 12px;
    background: rgba(14, 18, 22, 0.98);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.38);
    overflow: hidden;
    max-height: 320px;
    overflow-y: auto;
}

.service-search-suggestions[hidden] {
    display: none !important;
}

.service-search-suggestion {
    width: 100%;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: transparent;
    color: var(--text-color);
    text-align: left;
    padding: 0.7rem 0.9rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: var(--transition);
}

.service-search-suggestion:last-child {
    border-bottom: none;
}

.service-search-suggestion:hover,
.service-search-suggestion.active {
    background: rgba(175, 169, 57, 0.18);
}

.service-search-suggestion:focus-visible {
    outline: 2px solid rgba(175, 169, 57, 0.75);
    outline-offset: -2px;
}

.service-search-suggestion-title {
    font-weight: 600;
    color: var(--text-light);
    flex: 1 1 auto;
    min-width: 0;
}

.service-search-suggestion-meta {
    font-size: 0.8rem;
    color: var(--text-muted);
    white-space: nowrap;
    flex: 0 0 auto;
    padding-left: 0.5rem;
}

.service-search-suggestion.is-service .service-search-suggestion-title {
    font-weight: 700;
}

.service-search-suggestion.is-phrase .service-search-suggestion-title {
    font-weight: 500;
}

@media (max-width: 576px) {
    .service-search-suggestion {
        flex-direction: column;
        align-items: flex-start;
    }

    .service-search-suggestion-meta {
        white-space: normal;
        padding-left: 0;
    }
}

.service-category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    justify-content: center;
}

.service-category-chip {
    border: 1px solid var(--card-border);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-color);
    border-radius: 999px;
    padding: 0.5rem 0.95rem;
    font-size: 0.9rem;
    font-weight: 600;
    transition: var(--transition);
}

.service-category-chip:hover,
.service-category-chip.active {
    background: rgba(175, 169, 57, 0.2);
    border-color: rgba(175, 169, 57, 0.45);
    color: var(--text-light);
}

.service-category-chip:focus-visible {
    outline: 2px solid rgba(175, 169, 57, 0.7);
    outline-offset: 2px;
}

.popular-service-card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  transition: var(--transition);
  height: 100%;
  display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    min-height: 120px;
}

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

.popular-service-card .service-card-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: rgba(175, 169, 57, 0.15);
  display: grid;
  place-items: center;
  margin-bottom: 1.25rem;
  font-size: 1.4rem;
  color: var(--primary-color);
}

#popularServices > [class*="col-"] {
    display: flex;
}

.popular-service-card .service-item-icon {
    margin: 0;
}

.popular-service-card .service-item-title {
    min-height: 0;
    margin: 0;
    line-height: 1.4;
    text-align: center;
}

.popular-service-card .service-card-title {
  font-size: 1.2rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.popular-service-card .service-card-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 600;
  color: var(--primary-color);
}

.popular-service-card .service-card-link i {
  transition: transform 0.2s ease;
}

.popular-service-card:hover .service-card-link i {
  transform: translateX(4px);
}

.alphabet-nav {
    position: sticky;
    top: 92px;
    z-index: 1040;
    padding: 0.5rem 0;
    background: var(--card-bg);
    border-radius: 999px;
    border: 1px solid var(--card-border);
    transition: opacity 0.24s ease, transform 0.24s ease, visibility 0.24s ease;
}

@media (min-width: 769px) {
    .alphabet-nav {
        position: fixed;
        top: 92px;
        left: 50%;
        transform: translateX(-50%);
        max-width: min(92vw, 1020px);
        padding: 0.55rem 0.9rem;
        box-shadow: 0 18px 60px rgba(0, 0, 0, 0.18);
        background: rgba(15, 17, 19, 0.96);
        backdrop-filter: blur(12px);
    }

    .alphabet-nav-row {
        min-height: 80px;
    }
}

.alphabet-nav.is-hidden {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(-8px);
}

.alphabet-nav-row {
        position: relative;
        z-index: 2200;
}

.alphabet-list .alphabet-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin: 0 4px 8px;
  border-radius: 999px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.12);
  transition: var(--transition);
}

.alphabet-list .alphabet-link:hover,
.alphabet-list .alphabet-link.active {
  background: rgba(175, 169, 57, 0.2);
  color: var(--text-light);
  border-color: rgba(175, 169, 57, 0.25);
}

.alphabet-list .alphabet-link.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 768px) {
    .alphabet-nav {
        position: fixed;
        top: 88px;
        right: 10px;
        z-index: 12000;
        padding: 0.4rem 0.25rem;
        border-radius: 16px;
        background: rgba(11, 13, 16, 0.92);
        backdrop-filter: blur(6px);
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    }

    .alphabet-nav.is-hidden {
        transform: translateX(14px);
    }

    .alphabet-list {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0.28rem;
        max-height: calc(100vh - 120px);
        overflow-y: auto;
        padding: 0.2rem;
        margin: 0;
    }

    .alphabet-list .list-inline-item {
        display: block;
        margin: 0;
    }

    .alphabet-list .alphabet-link {
        width: 30px;
        height: 30px;
        margin: 0;
        font-size: 0.78rem;
    }
}

.service-directory .service-section {
  margin-bottom: 3.5rem;
    scroll-margin-top: 110px;
}

.service-directory .service-section-title {
  font-size: 2.2rem;
  font-weight: 700;
  margin-bottom: 1.75rem;
  color: var(--primary-color);
    scroll-margin-top: 110px;
}

.service-directory .service-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}

.service-item {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  cursor: pointer;
  transition: var(--transition);
}

.service-item:hover {
  transform: translateX(4px);
  box-shadow: var(--shadow-hover);
  border-color: var(--accent-color);
}

.service-item:focus-visible {
    outline: 2px solid rgba(175, 169, 57, 0.75);
    outline-offset: 3px;
}

.service-item-icon {
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: rgba(175, 169, 57, 0.15);
  display: grid;
  place-items: center;
  font-size: 1.2rem;
  color: var(--primary-color);
  flex-shrink: 0;
}

.service-item-title {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text-color);
}

/* Keep popular service card content centered even with shared .service-item styles. */
#popularServices .popular-service-card.service-item {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    gap: 0.85rem;
    min-height: 120px;
    text-align: center;
}

#popularServices .popular-service-card.service-item .service-item-icon {
    margin: 0;
    flex: 0 0 auto;
}

#popularServices .popular-service-card.service-item .service-item-title {
    margin: 0;
    min-height: 0;
    text-align: center;
}

#popularServices .popular-service-card.service-item:hover {
    transform: translateY(-6px);
}

.service-item-description {
  margin: 0.35rem 0 0;
  color: var(--text-muted);
  font-size: 0.95rem;
  line-height: 1.5;
}

.service-rescue {
    margin-top: 2rem;
    border: 1px solid rgba(175, 169, 57, 0.35);
    border-radius: 16px;
    padding: 1.4rem;
    background: linear-gradient(145deg, rgba(175, 169, 57, 0.16), rgba(11, 13, 16, 0.86));
}

.service-rescue-title {
    margin: 0;
    font-size: 1.2rem;
    color: var(--text-light);
}

.service-rescue-text {
    margin: 0.45rem 0 0;
    color: var(--text-muted);
}

.service-rescue-did-you-mean {
    margin: 0.65rem 0 0;
    color: var(--text-muted);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-rescue-suggestions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.service-rescue-suggestion {
    border: 1px solid rgba(175, 169, 57, 0.3);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-light);
    border-radius: 999px;
    padding: 0.45rem 0.9rem;
    font-size: 0.85rem;
    transition: var(--transition);
}

.service-rescue-suggestion:hover {
    background: rgba(175, 169, 57, 0.2);
}

.service-rescue-actions {
    margin-top: 1rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.service-rescue-action {
    font-size: 0.9rem;
}

.service-modal {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 1050;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  overflow-y: auto;
  transition: opacity 0.25s ease;
}

.service-modal.show {
  display: flex;
  opacity: 1;
}

.service-modal-dialog {
    max-width: 800px;
  width: 100%;
}

.service-modal-content {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 18px;
  padding: 2rem;
  position: relative;
  box-shadow: var(--shadow);
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}

.service-modal-close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  background: transparent;
  border: none;
  font-size: 2rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}

.service-modal-close:hover {
  color: var(--accent-color);
}

.service-modal-title {
  margin-top: 0;
  font-size: 2rem;
  color: var(--accent-color);
}

.service-modal-text {
  margin: 1rem 0 1.2rem;
  color: var(--text-color);
  line-height: 1.7;
}

.service-modal-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

.service-modal-list {
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  color: var(--text-color);
  margin: 0;
}

@media (max-width: 575px) {
  .service-modal-list {
    grid-template-columns: 1fr;
  }
}

.service-modal-list .service-modal-subservice-item {
  margin: 0;
  padding: 0.1rem 0 0.1rem 25px;
  border: 0;
  border-radius: 0;
  background: transparent;
  position: relative;
  color: var(--text-muted);
}

.service-modal-list .service-modal-subservice-item::before {
  content: "\f00c";
  font-family: "Font Awesome 5 Free";
  font-weight: 900;
  position: absolute;
  left: 0;
  top: 3px;
  color: var(--primary-color);
  font-size: 0.85rem;
}

.service-subservice-title {
    display: block;
    font-weight: 700;
    color: var(--text-light);
}

.service-subservice-meta {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.88rem;
    color: var(--text-muted);
}

.service-subservice-also {
    display: inline-block;
    margin-top: 0.45rem;
    font-size: 0.8rem;
    color: var(--accent-color);
}

.service-regulatory-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.service-regulatory-item {
    border: 1px solid rgba(175, 169, 57, 0.3);
    background: rgba(175, 169, 57, 0.12);
    color: var(--text-light);
    border-radius: 999px;
    padding: 0.32rem 0.7rem;
    font-size: 0.82rem;
    line-height: 1.3;
}

.service-readiness-score {
    margin: 0.75rem 0 0;
    font-size: 0.9rem;
    color: var(--text-muted);
}

.service-modal-mini-subtitle {
    margin: 1rem 0 0.4rem;
    font-size: 0.95rem;
    color: var(--text-light);
    font-weight: 700;
}

.service-escalation-list {
    margin: 0;
    padding-left: 1.1rem;
    color: var(--text-muted);
}

.service-escalation-list li {
    margin-bottom: 0.3rem;
}

.service-lawyer-card {
    border: 1px solid rgba(175, 169, 57, 0.35);
    border-radius: 14px;
    padding: 1rem;
    background: rgba(255, 255, 255, 0.04);
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
}

.service-lawyer-name {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-light);
}

.service-lawyer-role,
.service-lawyer-trust {
    margin: 0.35rem 0 0;
    color: var(--text-muted);
    font-size: 0.9rem;
}

.service-lawyer-profile-link {
    color: var(--accent-color);
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

.service-modal-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.75rem;
}

.service-action-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    font-weight: 700;
}

@media (max-width: 768px) {
  .service-areas-hero .hero-title {
    font-size: 3rem;
  }

    .service-category-filters {
        justify-content: flex-start;
    }

    .service-lawyer-card {
        flex-direction: column;
    }

    .service-modal-actions {
        grid-template-columns: 1fr;
    }

  .service-modal-content {
    padding: 1.5rem;
  }
}

/* ===== Global Responsive Refinements ===== */
@media (max-width: 991.98px) {
    .hero-section {
        background-attachment: scroll;
        min-height: 88vh;
    }

    .section-padding {
        padding: 80px 0;
    }
}

@media (max-width: 767.98px) {
    .navbar-brand {
        max-width: calc(100% - 56px);
        min-width: 0;
    }

    .brand-logo {
        height: 42px;
    }

    .brand-name {
        font-size: 18px;
    }

    .navbar-collapse {
        padding-top: 0.75rem;
    }

    .navbar-nav .nav-link {
        padding: 10px 0 !important;
    }

    .hero-subtitle {
        font-size: 0.95rem;
        letter-spacing: 1.5px;
    }

    .hero-title {
        font-size: clamp(2rem, 8vw, 3rem) !important;
        line-height: 1.2;
    }

    .hero-description {
        font-size: 1rem;
        max-width: 100%;
        margin-bottom: 24px;
    }

    .hero-buttons {
        gap: 14px;
    }

    .btn-lg {
        width: 100%;
        padding: 13px 20px;
    }

    .section-title {
        font-size: clamp(1.7rem, 7vw, 2.2rem) !important;
    }

    .section-description {
        font-size: 1rem;
    }

    .service-directory .service-section-title {
        font-size: 1.6rem;
    }

    .service-directory .service-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .service-item {
        padding: 1rem;
    }

    .flip-card {
        height: 340px;
    }

    .profile-sticky-wrapper {
        position: static;
    }

    .blob-profile-top {
        width: 220px;
        height: 220px;
        right: -70px;
        top: -50px;
    }

    .blob-profile-side {
        width: 260px;
        height: 260px;
        left: -110px;
        top: 280px;
    }
}

@media (max-width: 575.98px) {
    .container,
    .container-sm {
        padding-left: 16px;
        padding-right: 16px;
    }

    .action-zone {
        gap: 0.3rem;
    }

    .service-modal {
        padding: 1rem 0.6rem;
    }

    .service-modal-dialog {
        max-width: 100%;
    }

    .service-modal-content {
        max-height: calc(100vh - 2rem);
        padding: 1.15rem;
    }
}

/* INLINE STYLE MIGRATION UTILITIES - AUTO GENERATED START */
.u-inline-0001 { min-height: 50vh; background-image: url("https://images.unsplash.com/photo-1497366216548-37526070297c?w=1920"); }
.u-inline-0002 { min-height: 50vh; }
.u-inline-0003 { font-size: 3rem; }
.u-inline-0004 { background: transparent; }
.u-inline-0005 { background: #0F1113; border-top: 1px solid rgba(175, 169, 57, 0.1); overflow: hidden; }
.u-inline-0006 { max-width: 400px; position: relative; }
.u-inline-0007 { border: 1px solid rgba(175, 169, 57, 0.2); }
.u-inline-0008 { position: absolute; bottom: -15px; right: -15px; background: #afa939; padding: 15px; border-radius: 10px; box-shadow: 0 10px 25px rgba(0,0,0,0.3); z-index: 2; }
.u-inline-0009 { font-size: 20px; }
.u-inline-0010 { letter-spacing: 2px; font-size: 14px; }
.u-inline-0011 { font-family: 'Playfair Display', serif; font-size: 42px; }
.u-inline-0012 { font-size: 17px; line-height: 1.9; }
.u-inline-0013 { background: rgba(175, 169, 57, 0.05); border-left: 4px solid #afa939; border-radius: 0 12px 12px 0; max-width: 350px; }
.u-inline-0014 { font-size: 19px; font-family: 'Playfair Display', serif; font-style: italic; line-height: 1.5; }
.u-inline-0015 { font-weight: 700; }
.u-inline-0016 { font-size: 14px; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; }
.u-inline-0017 { background: #1A1D21; }
.u-inline-0018 { position: relative; }
.u-inline-0019 { position: absolute; bottom: -30px; right: -30px; background: linear-gradient(135deg, #afa939 0%, #b48811 100%); padding: 30px; border-radius: 12px; text-align: center; }
.u-inline-0020 { font-size: 48px; font-weight: 700; color: #0f1113; }
.u-inline-0021 { font-size: 14px; color: #0f1113; font-weight: 600; }
.u-inline-0022 { font-size: 16px; line-height: 1.8; }
.u-inline-0023 { background: #111315; }
.u-inline-0024 { background: #0f1113; }
.u-inline-0025 { background: rgba(175, 169, 57, 0.1); border-radius: 12px; border-left: 4px solid #afa939; }
.u-inline-0026 { position: relative; padding-left: 30px; }
.u-inline-0027 { position: absolute; left: 15px; top: 0; bottom: 0; width: 2px; background: linear-gradient(to bottom, #afa939, #b48811); }
.u-inline-0028 { position: absolute; left: -23px; top: 25px; width: 16px; height: 16px; background: #afa939; border-radius: 50%; border: 3px solid #0f1113; }
.u-inline-0029 { background: #1c1e20; border-radius: 12px; border: 1px solid rgba(175, 169, 57, 0.15); margin-left: 20px; }
.u-inline-0030 { font-size: 28px; font-weight: 700; }
.u-inline-0031 { background-image: url("../images/Staffs/Sandip.JPG"); }
.u-inline-0032 { min-height: 50vh; background-image: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=1920'); }
.u-inline-0033 { min-height: 50vh; }
.u-inline-0034 { font-size: 3rem; }
.u-inline-0035 { background: transparent; }
.u-inline-0036 { cursor: pointer; }
.u-inline-0037 { background-image: url('https://images.unsplash.com/photo-1554224154-26032ffc0d07?w=600'); }
.u-inline-0038 { background: linear-gradient(135deg, #AFA939 0%, #B48811 100%); color: #0F1113; }
.u-inline-0039 { background-image: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=600'); }
.u-inline-0040 { background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=600'); }
.u-inline-0041 { background-image: url('https://images.unsplash.com/photo-1462899006636-339e08d1844e?w=600'); }
.u-inline-0042 { background-image: url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?w=600'); }
.u-inline-0043 { background-image: url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=600'); }
.u-inline-0044 { background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=600'); }
.u-inline-0045 { background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600'); }
.u-inline-0046 { background-image: url('https://images.unsplash.com/photo-1473448912268-2022ce9509d8?w=600'); }
.u-inline-0047 { background-image: url('https://images.unsplash.com/photo-1589994965851-a8f479c573a9?w=600'); }
.u-inline-0048 { background-image: url('https://images.unsplash.com/photo-1554224154-26032ffc0d07?w=200'); }
.u-inline-0049 { background-image: url('https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=200'); }
.u-inline-0050 { background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=200'); }
.u-inline-0051 { background-image: url('https://images.unsplash.com/photo-1462899006636-339e08d1844e?w=200'); }
.u-inline-0052 { background-image: url('https://images.unsplash.com/photo-1520607162513-77705c0f0d4a?w=200'); }
.u-inline-0053 { background-image: url('https://images.unsplash.com/photo-1554224155-8d04cb21cd6c?w=200'); }
.u-inline-0054 { background-image: url('https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=200'); }
.u-inline-0055 { background-image: url('https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=200'); }
.u-inline-0056 { background-image: url('https://images.unsplash.com/photo-1473448912268-2022ce9509d8?w=200'); }
.u-inline-0057 { background-image: url('https://images.unsplash.com/photo-1589994965851-a8f479c573a9?w=200'); }
.u-inline-0058 { max-height: 400px; object-fit: cover; }
.u-inline-0059 { list-style: none; }
.u-inline-0060 { min-height: 50vh; background-image: url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=1920"); }
.u-inline-0061 { background-image: url("https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=600"); }
.u-inline-0062 { background-image: url("https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600"); }
.u-inline-0063 { background-image: url("https://images.unsplash.com/photo-1511895426328-dc8714191300?w=600"); }
.u-inline-0064 { background-image: url("https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=600"); }
.u-inline-0065 { background-image: url("https://images.unsplash.com/photo-1450101499163-c8848c66ca85?w=600"); }
.u-inline-0066 { background-image: url("https://images.unsplash.com/photo-1454165804606-c3d57bc86b40?w=600"); }
.u-inline-0067 { min-height: 50vh; background-image: url("https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1920"); }
.u-inline-0068 { background: rgba(175, 169, 57, 0.1); border-color: rgba(175, 169, 57, 0.3); color: #ececec; }
.u-inline-0069 { color: #9CA3AF; font-weight: normal; }
.u-inline-0070 { border: 2px dashed rgba(175, 169, 57, 0.5); border-radius: 8px; padding: 30px; text-align: center; cursor: pointer; background: rgba(175, 169, 57, 0.05); transition: all 0.3s ease; margin-bottom: 15px; }
.u-inline-0071 { font-size: 32px; color: #AFA939; margin-bottom: 10px; display: block; }
.u-inline-0072 { color: #ECECEC; }
.u-inline-0073 { display: none; }
.u-inline-0074 { margin-top: 15px; }
.u-inline-0075 { cursor: pointer; background-color: #2A2D32; }
.u-inline-0076 { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: #AFA939; cursor: pointer; pointer-events: none; }
.u-inline-0077 { display: none; position: absolute; top: 19%; left: 80px; background: #1C1E20; border: 1px solid rgba(175, 169, 57, 0.3); border-radius: 8px; padding: 15px; width: 320px; z-index: 1000; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); }
.u-inline-0078 { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.u-inline-0079 { padding: 5px 10px; background: transparent; border: 1px solid rgba(175, 169, 57, 0.3); color: #AFA939; border-radius: 4px; }
.u-inline-0080 { font-weight: 600; color: #AFA939; min-width: 150px; text-align: center; }
.u-inline-0081 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 10px; }
.u-inline-0082 { text-align: center; font-size: 12px; color: #AFA939; font-weight: 600; }
.u-inline-0083 { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.u-inline-0084 { display: none; }
.u-inline-0085 { border-color: rgba(175, 169, 57, 0.15); margin: 30px 0; }
.u-inline-0086 { height: 40px; }
.u-inline-0087 { font-size: 30px; color: #8b2f89; }
.u-inline-0088 { font-size: 30px; color: #afa939; }
.u-inline-0089 { font-size: 30px; color: #e91e63; }
.u-inline-0090 { font-size: 30px; color: #2196f3; }
.u-inline-0091 { font-size: 18px; }
.u-inline-0092 { background: rgba(175, 169, 57, 0.1); border-radius: 12px; border: 1px solid rgba(175, 169, 57, 0.2); text-align: left; }
.u-inline-0093 { border-color: rgba(175, 169, 57, 0.2); }
.u-inline-0094 { height: 30px; margin-right: 10px; }
.u-inline-0095 { height: 30px; }
.u-inline-0096 { padding-top: 0; }
.u-inline-0097 { display:none; }
.u-inline-0098 { height: 350px; }
.u-inline-0099 { background: #1c1e20; border-radius: 12px; border: 1px solid rgba(175, 169, 57, 0.15); }
.u-inline-0100 { color: #25D366; }
.u-inline-0101 { background: #1c1e20; border: 1px solid rgba(175, 169, 57, 0.15); border-radius: 12px; }
.u-inline-0102 { background: transparent; color: #ececec; }
.u-inline-0103 { background-image: url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?w=600'); }
.u-inline-0104 { background-image: url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=600'); }
.u-inline-0105 { background-image: url('https://images.unsplash.com/photo-1554224154-26032ffc0d07?w=600'); }
.u-inline-0106 { background-image: url('https://images.unsplash.com/photo-1560518883-ce09059eeffa?w=600'); }
.u-inline-0107 { background-image: url('https://images.unsplash.com/photo-1453945619913-79ec89a82c51?w=600'); }
.u-inline-0108 { background-image: url('https://images.unsplash.com/photo-1589829545856-d10d557cf95f?w=600'); }
.u-inline-0109 { background-image: url("https://images.unsplash.com/photo-1554224155-6726b3ff858f?w=600"); }
.u-inline-0110 { background-image: url("https://images.unsplash.com/photo-1554224154-26032ffc0d07?w=600"); }
.u-inline-0111 { background-image: url("https://images.unsplash.com/photo-1453945619913-79ec89a82c51?w=600"); }
.u-inline-0112 { background-image: url("https://images.unsplash.com/photo-1589394815804-964ed0be2eb5?w=600"); }
.u-inline-0113 { background-image: url("https://images.unsplash.com/photo-1521791136064-7986c2920216?w=600"); }
.u-inline-0114 { background-image: url("https://images.unsplash.com/photo-1436491865332-7a61a109cc05?w=600"); }
.u-inline-0115 { background-image: url("https://images.unsplash.com/photo-1518770660439-4636190af475?w=600"); }
.u-inline-0116 { background-image: url("https://images.unsplash.com/photo-1473341304170-971dccb5ac1e?w=600"); }
.u-inline-0117 { width: 50px; height: 50px; background: rgba(175, 169, 57, 0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; }
.u-inline-0118 { font-weight: 500; }
/* INLINE STYLE MIGRATION UTILITIES - AUTO GENERATED END */



/* ========================================================
   BLOG — Landing Page & Article Pages
   All blog-specific styles centralised from inline/block CSS
   ======================================================== */

/* ---------- Reading progress bar ---------- */
.reading-progress {
    position: fixed; top: 0; left: 0; height: 4px;
    background: linear-gradient(90deg, #AFA939, #B48811);
    width: 0%; z-index: 1000;
}

/* ---------- Sticky article sub-header ---------- */
.blog-sticky-header {
    position: sticky; top: 0; z-index: 999;
    background: rgba(28, 30, 32, 0.95);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(175, 169, 57, 0.15);
    padding: 12px 0;
}
.sticky-content { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sticky-back { color: #AFA939; text-decoration: none; font-size: 0.9rem; display: flex; align-items: center; gap: 5px; }
.sticky-back:hover { color: #ECECEC; }
.sticky-title { color: #ECECEC; font-size: 0.95rem; font-weight: 600; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sticky-actions { display: flex; align-items: center; gap: 12px; }
.sticky-share { color: #9CA3AF; text-decoration: none; font-size: 1.1rem; }
.sticky-share:hover { color: #AFA939; }

/* ---------- Article header section ---------- */
.article-header {
    padding: 60px 0 40px;
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.08) 0%, rgba(28, 30, 32, 0.98) 100%);
    border-bottom: 1px solid rgba(175, 169, 57, 0.15);
}

/* Breadcrumb */
.article-breadcrumb { font-size: 0.85rem; margin-bottom: 20px; }
.article-breadcrumb ol { background: transparent; padding: 0; margin: 0; }
.article-breadcrumb .breadcrumb-item a { color: #AFA939; text-decoration: none; }
.article-breadcrumb .breadcrumb-item a:hover { text-decoration: underline; }
.article-breadcrumb .breadcrumb-item.active { color: #9CA3AF; }

/* Category badge */
.article-category {
    display: inline-block;
    background: linear-gradient(135deg, #AFA939 0%, #B48811 100%);
    color: #0F1113; padding: 6px 14px; border-radius: 20px;
    font-size: 0.8rem; font-weight: 600; letter-spacing: 0.05em;
    margin-bottom: 15px; text-transform: uppercase;
}

/* Article title */
.article-title { font-size: clamp(1.8rem, 5vw, 2.8rem); font-weight: 700; color: #ECECEC; margin-bottom: 20px; line-height: 1.2; }
.article-title .text-accent { color: #AFA939; }

/* Hero image */
.article-hero-media { width: 100%; height: 400px; object-fit: cover; border-radius: 14px; border: 1px solid rgba(175, 169, 57, 0.22); margin-bottom: 36px; display: block; }

/* Meta bar */
.article-meta-bar {
    margin-top: 24px; padding: 14px 16px;
    background: rgba(27, 31, 35, 0.72);
    border: 1px solid rgba(175, 169, 57, 0.2);
    border-radius: 14px; backdrop-filter: blur(10px);
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px;
}
.meta-author { display: inline-flex; align-items: center; gap: 10px; }
.meta-author img { width: 42px; height: 42px; border-radius: 50%; object-fit: cover; border: 2px solid #AFA939; }
.meta-author-name { color: #ECECEC; font-weight: 600; line-height: 1.1; }
.meta-author-role { color: #9CA3AF; font-size: 0.8rem; }
.meta-right { display: inline-flex; flex-wrap: wrap; gap: 14px; align-items: center; color: #9CA3AF; font-size: 0.9rem; }
.meta-right .share-button { width: 34px; height: 34px; }

/* ---------- Article body ---------- */
.article-content { padding: 60px 0; }
.article-content h2 {
    font-size: 1.8rem; font-weight: 700; color: #ECECEC;
    margin-top: 45px; margin-bottom: 20px;
    padding-bottom: 15px; border-bottom: 2px solid rgba(175, 169, 57, 0.2);
}
.section-divider {
    height: 1px;
    margin: 34px 0 6px;
    background: linear-gradient(90deg, transparent 0%, rgba(175, 169, 57, 0.6) 50%, transparent 100%);
}
.article-content h3 { font-size: 1.4rem; font-weight: 600; color: #ECECEC; margin-top: 30px; margin-bottom: 15px; }
.article-content p { color: #D1D5DB; font-size: 1.05rem; line-height: 1.8; margin-bottom: 18px; }
.article-content ul,
.article-content ol { color: #D1D5DB; margin-bottom: 20px; padding-left: 25px; }
.article-content li { margin-bottom: 10px; line-height: 1.7; }
.article-content strong { color: #F3F4F6; font-weight: 600; }
.article-content a { color: #AFA939; text-decoration: none; border-bottom: 1px solid rgba(175, 169, 57, 0.3); }
.article-content a:hover { color: #F7E8A3; border-bottom-color: #AFA939; }
.article-content .btn { border-bottom: none; }

/* Callout box */
.article-callout {
    background: linear-gradient(145deg, rgba(175, 169, 57, 0.12) 0%, rgba(24, 27, 31, 0.96) 100%);
    border: 1px solid rgba(175, 169, 57, 0.35); border-left: 4px solid #AFA939;
    border-radius: 10px; padding: 25px; margin: 30px 0;
}
.article-callout h5 { color: #AFA939; margin-bottom: 10px; font-weight: 600; }
.article-callout p { margin: 0; color: #D1D5DB; font-size: 0.95rem; }
.article-callout.callout-important { border-left-color: #f3b43f; background: linear-gradient(145deg, rgba(243, 180, 63, 0.15) 0%, rgba(24, 27, 31, 0.96) 100%); }
.article-callout.callout-pro-tip { border-left-color: #66d9a3; background: linear-gradient(145deg, rgba(102, 217, 163, 0.14) 0%, rgba(24, 27, 31, 0.96) 100%); }
.article-callout.callout-case-study { border-left-color: #78b8ff; background: linear-gradient(145deg, rgba(120, 184, 255, 0.14) 0%, rgba(24, 27, 31, 0.96) 100%); }

.phase8-feature-image {
    border-radius: 14px;
    border: 1px solid rgba(175, 169, 57, 0.35);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.34);
}

.byline-badge {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    border: 1px dashed rgba(175, 169, 57, 0.45);
    border-radius: 12px;
    background: rgba(175, 169, 57, 0.08);
}
.byline-badge-img {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(175, 169, 57, 0.65);
}
.byline-badge-text { display: flex; flex-direction: column; line-height: 1.2; }
.byline-badge-text strong { color: #f6f7f8; font-size: 0.92rem; }
.byline-badge-text small { color: #cfd4da; font-size: 0.76rem; }
.byline-label {
    color: #AFA939;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-size: 0.65rem;
    margin-bottom: 3px;
}

.last-updated-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border-radius: 999px;
    background: rgba(175, 169, 57, 0.18);
    border: 1px solid rgba(175, 169, 57, 0.32);
    color: #f0e2a4;
    font-size: 0.8rem;
}

.phase8-stats {
    margin: 22px 0 28px;
    padding: 18px;
    border: 1px solid rgba(175, 169, 57, 0.22);
    border-radius: 12px;
    background: rgba(175, 169, 57, 0.07);
}
.phase8-stats h4 { color: #f1e7bb; margin: 0 0 12px; font-size: 1rem; }
.phase8-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}
.stat-card {
    border: 1px solid rgba(175, 169, 57, 0.24);
    background: rgba(15, 17, 19, 0.75);
    border-radius: 10px;
    padding: 12px;
}
.stat-card strong { display: block; color: #AFA939; font-size: 1.3rem; margin-bottom: 4px; }
.stat-card span { color: #c4cad0; font-size: 0.86rem; line-height: 1.3; display: block; }

.phase8-quote {
    margin: 24px 0;
    padding: 16px 18px;
    border-left: 4px solid #AFA939;
    background: rgba(28, 30, 32, 0.88);
    border-radius: 10px;
}
.phase8-quote p { margin: 0 0 8px; color: #e3e7ec; font-style: italic; }
.phase8-quote cite { color: #AFA939; font-size: 0.85rem; font-style: normal; }

.phase8-law-block {
    margin: 30px 0;
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 12px;
    overflow: hidden;
}
.law-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    background: rgba(175, 169, 57, 0.14);
}
.law-head h4 { margin: 0; font-size: 0.95rem; color: #f0e2a4; }
.copy-law-btn {
    border: 1px solid rgba(175, 169, 57, 0.45);
    background: #1f2226;
    color: #f1e8be;
    font-size: 0.78rem;
    border-radius: 8px;
    padding: 5px 10px;
}
.phase8-law-block pre {
    margin: 0;
    padding: 14px;
    background: #0f1113;
    color: #d3dbe4;
    overflow-x: auto;
}

.phase8-table-wrap { margin: 28px 0; }
.phase8-table-wrap h4 { color: #f1e7bb; margin-bottom: 10px; font-size: 1rem; }
.phase8-table-scroll {
    overflow-x: auto;
    border: 1px solid rgba(175, 169, 57, 0.25);
    border-radius: 12px;
}
.phase8-table {
    width: 100%;
    min-width: 680px;
    border-collapse: collapse;
    background: rgba(20, 22, 24, 0.95);
}
.phase8-table th,
.phase8-table td {
    padding: 10px 12px;
    border-bottom: 1px solid rgba(175, 169, 57, 0.18);
    text-align: left;
    color: #d7dde4;
    font-size: 0.9rem;
}
.phase8-table th { color: #f0e3ab; background: rgba(175, 169, 57, 0.12); }

@media (max-width: 767.98px) {
    .phase8-stats-grid { grid-template-columns: 1fr; }
    .byline-badge { align-items: flex-start; }
}

/* ---------- Sidebar ---------- */
.sidebar-stack { position: sticky; top: 100px; }
.table-of-contents {
    background: rgba(24, 27, 31, 0.96);
    border: 1px solid rgba(175, 169, 57, 0.2);
    border-radius: 12px; padding: 25px;
}
.table-of-contents h5 { color: #AFA939; font-size: 1rem; font-weight: 600; margin-bottom: 15px; }
.table-of-contents ul { list-style: none; padding: 0; margin: 0; }
.table-of-contents li { margin-bottom: 8px; }
.table-of-contents a { color: #9CA3AF; text-decoration: none; font-size: 0.9rem; border: none; transition: color 0.2s; }
.table-of-contents a:hover { color: #AFA939; }
.sidebar-widget { background: #1C1E20; border-radius: 12px; padding: 25px; border: 1px solid rgba(175, 169, 57, 0.15); margin-top: 18px; }
.sidebar-widget h4 { color: #AFA939; margin-bottom: 12px; font-size: 1.2rem; }
.newsletter-note { color: #9CA3AF; font-size: 0.93rem; margin-bottom: 14px; }
.newsletter-feedback { display: none; margin-top: 12px; color: #AFA939; font-size: 0.88rem; }

/* ---------- Social share row ---------- */
.article-share { display: flex; gap: 12px; align-items: center; padding: 20px 0; border-top: 1px solid rgba(175, 169, 57, 0.15); border-bottom: 1px solid rgba(175, 169, 57, 0.15); margin: 40px 0; }
.share-label { color: #9CA3AF; font-weight: 600; margin-right: 10px; }
.share-button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(175, 169, 57, 0.1); color: #AFA939;
    text-decoration: none; border: 1px solid rgba(175, 169, 57, 0.2);
    transition: all 0.3s ease;
}
.share-button:hover { background: #AFA939; color: #0F1113; transform: translateY(-3px); }

/* ---------- Author profile card ---------- */
.author-profile {
    background: linear-gradient(145deg, rgba(175, 169, 57, 0.08) 0%, rgba(24, 27, 31, 0.96) 100%);
    border: 1px solid rgba(175, 169, 57, 0.15);
    border-radius: 12px; padding: 30px; margin: 50px 0; text-align: center;
}
.author-profile-img { width: 100px; height: 100px; border-radius: 50%; object-fit: cover; border: 3px solid #AFA939; margin: 0 auto 20px; display: block; }
.author-profile-name { color: #ECECEC; font-size: 1.3rem; font-weight: 600; margin-bottom: 5px; }
.author-profile-title { color: #AFA939; font-size: 0.9rem; font-weight: 600; margin-bottom: 15px; }
.author-profile-bio { color: #D1D5DB; font-size: 0.95rem; line-height: 1.6; margin-bottom: 20px; }
.author-profile-link {
    display: inline-block; color: #AFA939; text-decoration: none; font-weight: 600;
    border: 1px solid #AFA939; padding: 8px 20px; border-radius: 4px; transition: all 0.2s;
}
.author-profile-link:hover { background: #AFA939; color: #0F1113; }

/* ---------- In-article CTA ---------- */
.article-cta {
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.15) 0%, rgba(24, 27, 31, 0.96) 100%);
    border: 1px solid rgba(175, 169, 57, 0.35);
    border-radius: 12px; padding: 40px; margin: 50px 0; text-align: center;
}
.article-cta h4 { color: #AFA939; font-size: 1.4rem; margin-bottom: 12px; }
.article-cta p { color: #D1D5DB; margin-bottom: 25px; }

/* ---------- Related articles ---------- */
.related-articles { margin-top: 80px; padding-top: 40px; border-top: 2px solid rgba(175, 169, 57, 0.2); }
.related-articles h3 { color: #ECECEC; font-size: 1.6rem; margin-bottom: 30px; }
.related-card { background: #1C1E20; border: 1px solid rgba(175, 169, 57, 0.1); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; height: 100%; }
.related-card:hover { transform: translateY(-5px); border-color: rgba(175, 169, 57, 0.3); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); }
.related-card-img { width: 100%; height: 150px; object-fit: cover; display: block; }
.related-card-body { padding: 20px; }
.related-card-category { display: inline-block; background: rgba(175, 169, 57, 0.2); color: #AFA939; padding: 4px 10px; border-radius: 4px; font-size: 0.75rem; margin-bottom: 8px; text-transform: uppercase; font-weight: 600; }
.related-card-title { color: #ECECEC; font-size: 1rem; font-weight: 600; margin-bottom: 8px; }
.related-card-date { color: #9CA3AF; font-size: 0.85rem; }

/* ---------- Floating consultation CTA ---------- */
.sticky-consult-btn {
    position: fixed; right: 22px; bottom: 22px; z-index: 998;
    border-radius: 999px; padding: 12px 18px;
    background: linear-gradient(135deg, #AFA939 0%, #B48811 100%);
    color: #0F1113; text-decoration: none; font-weight: 700;
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.32);
    opacity: 0; transform: translateY(14px); transition: all 0.25s ease;
}
.sticky-consult-btn:hover { color: #0F1113; }
.sticky-consult-btn.is-visible { opacity: 1; transform: translateY(0); }

/* ---------- Blog landing page ---------- */
.hero-blog {
    position: relative; min-height: 68vh;
    display: grid; place-items: center;
    padding: 120px 0 80px;
    background:
        linear-gradient(120deg, rgba(15,17,19,0.88), rgba(15,17,19,0.6)),
        url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1600&h=900&fit=crop') center/cover no-repeat;
    border-bottom: 1px solid rgba(175, 169, 57, 0.2);
}
.hero-chip {
    display: inline-block;
    background: linear-gradient(135deg, #AFA939, #B48811);
    color: #0F1113; padding: 8px 14px; border-radius: 999px;
    font-size: 0.78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.hero-title { font-family: 'Playfair Display', serif; font-size: clamp(2.1rem, 5vw, 3.6rem); margin: 18px 0 14px; line-height: 1.15; color: #e9edf2; }
.hero-title span { color: #AFA939; }
.hero-subtitle { color: #c4cbd4; max-width: 760px; }

.search-glass {
    margin-top: 26px; background: rgba(27, 31, 35, 0.72);
    border: 1px solid rgba(175, 169, 57, 0.2);
    backdrop-filter: blur(12px); border-radius: 14px;
    padding: 10px 12px; display: flex; align-items: center; gap: 10px; max-width: 680px;
}
.search-glass i { color: #AFA939; }
.search-glass input { background: transparent; border: none; color: #e9edf2; outline: none; width: 100%; }

.section-wrap { padding: 58px 0 76px; }
.section-heading { font-family: 'Playfair Display', serif; font-size: 1.8rem; margin-bottom: 22px; color: #e9edf2; }
.section-heading span { color: #AFA939; }

/* Blog grid cards */
.glass-card {
    background: rgba(27, 31, 35, 0.72); border: 1px solid rgba(175, 169, 57, 0.2);
    backdrop-filter: blur(10px); border-radius: 16px; overflow: hidden;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; height: 100%;
}
.glass-card:hover { transform: translateY(-8px); border-color: rgba(175, 169, 57, .4); box-shadow: 0 20px 48px rgba(0,0,0,.35); }
.card-media { height: 210px; position: relative; overflow: hidden; }
.card-media-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(15,17,19,.78) 100%);
    pointer-events: none;
}
.badge-soft {
    position: absolute; left: 14px; top: 14px; z-index: 1;
    background: rgba(175, 169, 57, .2); border: 1px solid rgba(175, 169, 57, .4);
    color: #f7e8a3; font-size: .73rem; padding: 5px 10px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .06em;
}
.card-bodyx { padding: 18px 18px 20px; }
.meta-row { color: #9ca3af; font-size: .85rem; margin-bottom: 10px; }
.card-titlex { font-size: 1.08rem; line-height: 1.4; margin-bottom: 10px; }
.card-titlex a { color: #e9edf2; text-decoration: none; }
.card-titlex a:hover { color: #AFA939; }
.read-link { color: #AFA939; text-decoration: none; font-weight: 600; }

/* Blog sidebar panels */
.side-panel {
    background: rgba(27, 31, 35, 0.72); border: 1px solid rgba(175, 169, 57, 0.2);
    backdrop-filter: blur(10px); border-radius: 14px; padding: 20px; margin-bottom: 18px;
}
.side-panel h4 { color: #AFA939; font-size: 1.05rem; margin-bottom: 12px; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { border-bottom: 1px solid rgba(175, 169, 57, .14); padding: 8px 0; }
.side-list li:last-child { border-bottom: none; }
.side-list a { color: #d7dde6; text-decoration: none; display: flex; justify-content: space-between; gap: 10px; }
.side-list a:hover { color: #AFA939; }
.recent-item { display: flex; gap: 10px; padding: 8px 0; border-bottom: 1px solid rgba(175, 169, 57, .14); align-items: flex-start; }
.recent-item:last-child { border-bottom: none; }
.recent-thumb { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; flex-shrink: 0; }
.recent-item a { color: #e5e9ee; text-decoration: none; font-size: .88rem; line-height: 1.35; }
.recent-item a:hover { color: #AFA939; }

/* Featured carousel */
.feature-wrap { position: relative; border-radius: 16px; overflow: hidden; border: 1px solid rgba(175, 169, 57, 0.2); }
.feature-wrap img { width: 100%; height: 290px; object-fit: cover; display: block; filter: brightness(0.8); }
.feature-content { position: absolute; inset: auto 0 0 0; padding: 18px; background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); }
.feature-content h3 { font-size: 1.22rem; margin-bottom: 8px; }
.feature-content h3 a { color: #fff; text-decoration: none; }
.feature-content h3 a:hover { color: #f7e8a3; }

/* Phase 7 blog management */
.hero-blog-archive {
    min-height: 52vh;
}

.filter-panel {
    border-color: rgba(175, 169, 57, 0.28);
}

.filter-label {
    color: #cfd5de;
    font-size: 0.82rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 6px;
}

.filter-panel .form-control,
.filter-panel .form-select {
    background: rgba(11, 13, 16, 0.82);
    border: 1px solid rgba(175, 169, 57, 0.24);
    color: #e6ebf2;
}

.filter-panel .form-control:focus,
.filter-panel .form-select:focus {
    border-color: rgba(175, 169, 57, 0.58);
    box-shadow: 0 0 0 0.2rem rgba(175, 169, 57, 0.17);
}

.results-summary {
    color: #d7dee8;
    font-size: 0.92rem;
}

.active-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-pill,
.filter-pill-empty {
    border: 1px solid rgba(175, 169, 57, 0.3);
    background: rgba(175, 169, 57, 0.12);
    color: #f2e7ac;
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 0.8rem;
}

.filter-pill {
    cursor: pointer;
}

.filter-pill:hover {
    background: rgba(175, 169, 57, 0.24);
}

.filter-pill-empty {
    color: #99a4b3;
    background: rgba(156, 163, 175, 0.08);
    border-color: rgba(156, 163, 175, 0.18);
}

.card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 14px;
}

.tag-chip {
    border: 1px solid rgba(175, 169, 57, 0.28);
    background: rgba(175, 169, 57, 0.1);
    color: #e8deab;
    border-radius: 999px;
    padding: 4px 10px;
    font-size: 0.76rem;
    line-height: 1.2;
}

.tag-chip:hover {
    background: rgba(175, 169, 57, 0.24);
}

.tag-cloud {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.tag-cloud-item {
    border: none;
    background: transparent;
    color: #d2dae5;
    padding: 0;
    line-height: 1;
}

.tag-cloud-item:hover {
    color: #AFA939;
}

.tag-size-1 { font-size: 0.8rem; opacity: 0.72; }
.tag-size-2 { font-size: 0.92rem; opacity: 0.8; }
.tag-size-3 { font-size: 1.04rem; opacity: 0.88; }
.tag-size-4 { font-size: 1.14rem; opacity: 0.94; }
.tag-size-5 { font-size: 1.24rem; opacity: 1; }

/* Blog footer */
.blog-footer-text { text-align: center; color: #9CA3AF; padding: 30px 0; margin: 0; }

/* Utility */
.is-hidden { display: none !important; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .sidebar-stack { position: relative; top: auto; }
    .table-of-contents { margin: 30px 0 0; }
}
@media (max-width: 767.98px) {
    .sticky-title { display: none; }
    .article-hero-media { height: 260px; }
}

/* —— Blog article footer helpers —— */
.article-footer { margin-top: 80px; padding-top: 50px; border-top: 1px solid rgba(175, 169, 57, 0.15); }
.footer-copyright-bar { border-top: 1px solid rgba(175, 169, 57, 0.15); padding-top: 20px; margin-top: 40px; text-align: center; }
.footer-copyright-bar p { color: #9CA3AF; margin: 0; }
.footer-section .footer-desc { color: #9CA3AF; }

/* TOC dynamic heading levels */
.toc-h3 { margin-left: 20px; }

/* Phase 3 blog intelligence */
.word-count-meta {
    color: #d7dfeb;
    font-size: 0.86rem;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(175, 169, 57, 0.12);
    border: 1px solid rgba(175, 169, 57, 0.24);
    border-radius: 999px;
    padding: 5px 10px;
}

.jump-links {
    margin-top: 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.jump-links a {
    text-decoration: none;
    color: #dbe3ee;
    border: 1px solid rgba(175, 169, 57, 0.24);
    background: rgba(175, 169, 57, 0.08);
    border-radius: 999px;
    font-size: 0.82rem;
    padding: 6px 11px;
    transition: all 0.2s ease;
}

.jump-links a:hover {
    color: #0F1113;
    background: #AFA939;
}

.expertise-badge {
    display: inline-block;
    margin-top: 12px;
    border-radius: 999px;
    border: 1px solid rgba(175, 169, 57, 0.35);
    background: rgba(175, 169, 57, 0.14);
    color: #f5e9b0;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 6px 12px;
}

.author-archive-link {
    margin-top: 14px;
    display: inline-block;
    color: #AFA939;
    text-decoration: none;
    font-weight: 600;
}

.author-archive-link:hover {
    color: #f7e8a3;
}

.article-nav {
    margin: 34px 0 14px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.article-nav-link {
    text-decoration: none;
    border: 1px solid rgba(175, 169, 57, 0.24);
    background: rgba(22, 24, 26, 0.82);
    border-radius: 12px;
    padding: 14px 16px;
    min-height: 88px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    transition: all 0.2s ease;
}

.article-nav-link .dir {
    color: #9CA3AF;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 5px;
}

.article-nav-link .title {
    color: #ECECEC;
    font-size: 0.92rem;
    line-height: 1.35;
}

.article-nav-link.next {
    text-align: right;
}

.article-nav-link:hover {
    transform: translateY(-2px);
    border-color: rgba(175, 169, 57, 0.52);
    background: rgba(28, 30, 32, 0.95);
}

@media (max-width: 767.98px) {
    .article-nav {
        grid-template-columns: 1fr;
    }

    .article-nav-link.next {
        text-align: left;
    }
}

/* Phase 4 social and content actions */
.content-action-bar {
    margin: 14px 0 28px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.action-btn {
    border: 1px solid rgba(175, 169, 57, 0.28);
    background: rgba(20, 22, 25, 0.92);
    color: #e9edf2;
    border-radius: 999px;
    padding: 8px 14px;
    font-size: 0.84rem;
    font-weight: 600;
    transition: all 0.2s ease;
}

.action-btn i {
    margin-right: 6px;
}

.action-btn:hover {
    background: rgba(175, 169, 57, 0.16);
    border-color: rgba(175, 169, 57, 0.5);
}

.action-btn.is-bookmarked,
.action-btn.is-success {
    background: rgba(175, 169, 57, 0.24);
    border-color: rgba(175, 169, 57, 0.62);
    color: #f7e8a3;
}

.quote-share-widget {
    position: absolute;
    z-index: 1200;
    display: none;
    gap: 8px;
    background: rgba(15, 17, 19, 0.96);
    border: 1px solid rgba(175, 169, 57, 0.32);
    border-radius: 12px;
    padding: 8px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.quote-share-widget.is-visible {
    display: inline-flex;
}

.quote-share-widget button {
    border: 1px solid rgba(175, 169, 57, 0.22);
    background: rgba(175, 169, 57, 0.08);
    color: #e5e9ee;
    border-radius: 8px;
    font-size: 0.77rem;
    font-weight: 600;
    padding: 5px 9px;
}

.quote-share-widget button:hover {
    background: rgba(175, 169, 57, 0.2);
}

@media print {
    .navbar,
    .blog-sticky-header,
    .sticky-consult-btn,
    .table-of-contents,
    .sidebar-stack,
    .content-action-bar,
    .article-share,
    .quote-share-widget,
    .related-articles,
    .article-nav,
    footer {
        display: none !important;
    }

    body,
    .article-content,
    .article-header,
    .container,
    .row,
    .col-lg-8 {
        background: #ffffff !important;
        color: #000000 !important;
    }

    .article-content p,
    .article-content li,
    .article-content h2,
    .article-content h3,
    .article-title,
    .article-category,
    .meta-right,
    .meta-author-name,
    .meta-author-role {
        color: #000000 !important;
    }

    .article-hero-media {
        max-height: 260px !important;
        object-fit: cover;
    }
}

/* Reading list page */
.reading-list-page {
    padding: 130px 0 60px;
    background: linear-gradient(180deg, rgba(18, 20, 22, 0.98) 0%, rgba(15, 17, 19, 1) 100%);
    min-height: 70vh;
}

.reading-list-head {
    display: flex;
    justify-content: space-between;
    gap: 24px;
    align-items: flex-end;
    margin-bottom: 28px;
    border-bottom: 1px solid rgba(175, 169, 57, 0.22);
    padding-bottom: 18px;
}

.reading-list-sub {
    color: #b5beca;
    margin-top: 8px;
}

.reading-list-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.reading-list-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.reading-item {
    border: 1px solid rgba(175, 169, 57, 0.24);
    border-radius: 14px;
    background: rgba(24, 27, 31, 0.86);
    padding: 16px;
}

.reading-item-top {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 8px;
}

.reading-item-category {
    font-size: 0.74rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #f5e9b0;
}

.reading-item-date {
    color: #9ca3af;
    font-size: 0.8rem;
}

.reading-item-title {
    font-size: 1.02rem;
    line-height: 1.45;
    margin-bottom: 14px;
}

.reading-item-title a {
    color: #ececec;
    text-decoration: none;
}

.reading-item-title a:hover {
    color: #afa939;
}

.reading-item-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.reading-list-empty {
    border: 1px dashed rgba(175, 169, 57, 0.36);
    border-radius: 14px;
    text-align: center;
    padding: 40px 20px;
    color: #c8d1dd;
}

.reading-list-empty i {
    font-size: 2rem;
    color: #afa939;
    margin-bottom: 10px;
}

@media (max-width: 991.98px) {
    .reading-list-grid {
        grid-template-columns: 1fr;
    }

    .reading-list-head {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ================================================================
   PHASE 5 — Lead Generation & Conversion
   ================================================================ */

/* ── 1. Top CTA Banner ─────────────────────────────────────────── */
.article-top-cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    background: rgba(175, 169, 57, 0.07);
    border: 1px solid rgba(175, 169, 57, 0.28);
    border-left: 4px solid #AFA939;
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 32px;
    transition: opacity 0.35s ease, transform 0.35s ease;
}
.article-top-cta.is-dismissed {
    opacity: 0;
    transform: translateY(-8px);
}
.top-cta-content {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}
.top-cta-icon {
    font-size: 1.4rem;
    color: #AFA939;
    flex-shrink: 0;
}
.top-cta-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.top-cta-text strong {
    color: #ECECEC;
    font-size: 0.95rem;
}
.top-cta-text span {
    color: #9CA3AF;
    font-size: 0.84rem;
}
.top-cta-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}
.top-cta-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #AFA939;
    color: #0d0d0d;
    font-size: 0.85rem;
    font-weight: 700;
    padding: 8px 16px;
    border-radius: 6px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, transform 0.2s;
}
.top-cta-btn:hover {
    background: #c9c23a;
    color: #0d0d0d;
    transform: translateY(-1px);
}
.top-cta-dismiss {
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.2s;
}
.top-cta-dismiss:hover { color: #ECECEC; }
@media (max-width: 575.98px) {
    .article-top-cta { flex-direction: column; align-items: flex-start; }
    .top-cta-actions { width: 100%; justify-content: space-between; }
    .top-cta-btn { flex: 1; justify-content: center; }
}

/* ── 2. Contextual Mid-Article CTA ─────────────────────────────── */
.contextual-cta {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: rgba(175, 169, 57, 0.06);
    border-left: 4px solid #AFA939;
    border-radius: 0 10px 10px 0;
    padding: 20px 24px;
    margin: 44px 0;
}
.contextual-cta-icon {
    font-size: 1.6rem;
    color: #AFA939;
    margin-top: 2px;
    flex-shrink: 0;
}
.contextual-cta-body strong {
    display: block;
    color: #ECECEC;
    font-size: 1.05rem;
    margin-bottom: 7px;
}
.contextual-cta-body p {
    color: #9CA3AF;
    font-size: 0.9rem;
    margin-bottom: 10px;
}
.contextual-cta-link {
    color: #AFA939;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
    transition: color 0.2s;
}
.contextual-cta-link:hover { color: #c9c23a; }

/* ── 3. Bottom CTA Banner ───────────────────────────────────────── */
.article-bottom-cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    background: #0f0f0f;
    border: 1px solid rgba(175, 169, 57, 0.25);
    border-radius: 16px;
    overflow: hidden;
    margin: 52px 0;
}
.bottom-cta-left {
    padding: 44px 40px;
    background: linear-gradient(135deg, #141414 0%, #0f0f0f 100%);
    border-right: 1px solid rgba(175, 169, 57, 0.15);
}
.bottom-cta-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(175, 169, 57, 0.14);
    color: #AFA939;
    font-size: 0.74rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 5px 12px;
    border-radius: 20px;
    margin-bottom: 18px;
}
.bottom-cta-heading {
    color: #ECECEC;
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}
.bottom-cta-pitch {
    color: #9CA3AF;
    font-size: 0.92rem;
    line-height: 1.65;
    margin-bottom: 18px;
}
.bottom-cta-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 28px 0;
}
.bottom-cta-bullets li {
    color: #D1D5DB;
    font-size: 0.88rem;
    padding: 4px 0;
    display: flex;
    align-items: center;
    gap: 9px;
}
.bottom-cta-bullets li i {
    color: #AFA939;
    font-size: 0.78rem;
    flex-shrink: 0;
}
.bottom-cta-buttons {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.btn-cta-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #AFA939;
    color: #0d0d0d;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
}
.btn-cta-primary:hover {
    background: #c9c23a;
    color: #0d0d0d;
    transform: translateY(-2px);
}
.btn-cta-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: #AFA939;
    font-weight: 600;
    font-size: 0.9rem;
    padding: 11px 22px;
    border-radius: 8px;
    text-decoration: none;
    border: 1px solid rgba(175, 169, 57, 0.45);
    transition: background 0.2s, border-color 0.2s;
}
.btn-cta-secondary:hover {
    background: rgba(175, 169, 57, 0.1);
    border-color: #AFA939;
    color: #AFA939;
}
/* Bottom CTA — Right side (inline form) */
.bottom-cta-right { padding: 36px; background: #141414; }
.inline-consult-form-wrap { height: 100%; }
.form-wrap-heading {
    color: #ECECEC;
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.form-wrap-heading i { color: #AFA939; }
.inline-consult-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.form-field { display: flex; flex-direction: column; gap: 5px; }
.form-field-label {
    color: #9CA3AF;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}
.form-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(175, 169, 57, 0.22);
    border-radius: 7px;
    color: #ECECEC;
    font-size: 0.9rem;
    padding: 10px 14px;
    width: 100%;
    outline: none;
    transition: border-color 0.2s, background 0.2s;
}
.form-input:focus {
    border-color: #AFA939;
    background: rgba(175, 169, 57, 0.06);
}
.form-input::placeholder { color: #6B7280; }
.form-textarea { resize: vertical; min-height: 82px; }
.form-submit-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: #AFA939;
    color: #0d0d0d;
    font-weight: 700;
    font-size: 0.95rem;
    padding: 12px;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    margin-top: 4px;
    transition: background 0.2s, transform 0.2s;
}
.form-submit-btn:hover:not(:disabled) {
    background: #c9c23a;
    transform: translateY(-1px);
}
.form-submit-btn:disabled { opacity: 0.65; cursor: not-allowed; }
.form-note {
    color: #6B7280;
    font-size: 0.77rem;
    text-align: center;
    margin: 5px 0 0;
}
.form-success-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 32px 20px;
}
.form-success-state.is-hidden { display: none; }
.inline-consult-form.is-hidden { display: none; }
.form-success-icon { font-size: 2.5rem; color: #AFA939; }
.form-success-state strong { color: #ECECEC; font-size: 1.05rem; }
.form-success-state p { color: #9CA3AF; font-size: 0.9rem; margin: 0; }
.form-success-link {
    color: #AFA939;
    font-weight: 600;
    font-size: 0.9rem;
    text-decoration: none;
}
.form-success-link:hover { color: #c9c23a; }
/* Bottom CTA responsive */
@media (max-width: 991.98px) {
    .article-bottom-cta { grid-template-columns: 1fr; }
    .bottom-cta-left { border-right: none; border-bottom: 1px solid rgba(175,169,57,0.15); padding: 36px 28px; }
    .bottom-cta-right { padding: 32px 28px; }
    .bottom-cta-buttons { flex-direction: row; flex-wrap: wrap; }
}
@media (max-width: 575.98px) {
    .bottom-cta-left, .bottom-cta-right { padding: 28px 20px; }
    .bottom-cta-heading { font-size: 1.25rem; }
    .bottom-cta-buttons { flex-direction: column; }
}

/* ── 4. Sidebar Practice Area Widget ────────────────────────────── */
.sidebar-practice-widget {
    background: rgba(175, 169, 57, 0.06) !important;
    border: 1px solid rgba(175, 169, 57, 0.25) !important;
}
.sidebar-practice-title {
    color: #AFA939;
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 10px;
}
.sidebar-practice-pitch {
    color: #9CA3AF;
    font-size: 0.84rem;
    line-height: 1.58;
    margin-bottom: 12px;
}
.sidebar-practice-bullets {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
}
.sidebar-practice-bullets li {
    color: #D1D5DB;
    font-size: 0.83rem;
    padding: 3px 0;
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.45;
}
.sidebar-practice-bullets li i {
    color: #AFA939;
    font-size: 0.74rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.sidebar-practice-link {
    display: inline-block;
    color: #AFA939;
    font-weight: 600;
    font-size: 0.87rem;
    text-decoration: none;
    border: 1px solid rgba(175, 169, 57, 0.4);
    padding: 7px 14px;
    border-radius: 6px;
    transition: background 0.2s, border-color 0.2s;
}
.sidebar-practice-link:hover {
    background: rgba(175, 169, 57, 0.12);
    border-color: #AFA939;
    color: #AFA939;
}

/* ── Sidebar newsletter — subscribed state ──────────────────────── */
button.is-subscribed,
.btn.is-subscribed {
    background: rgba(175, 169, 57, 0.18) !important;
    color: #AFA939 !important;
    border: 1px solid rgba(175, 169, 57, 0.4) !important;
    cursor: default;
}
.newsletter-feedback.is-visible { display: block !important; }

/* ── 5/6. Sticky Newsletter Bar ─────────────────────────────────── */
.sticky-newsletter-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 1040;
    background: #111111;
    border-top: 2px solid rgba(175, 169, 57, 0.4);
    box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5);
    transform: translateY(100%);
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
.sticky-newsletter-bar.is-visible { transform: translateY(0); }
.snb-inner {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 24px;
    flex-wrap: wrap;
}
.snb-text {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 1;
    min-width: 220px;
}
.snb-icon { font-size: 1.4rem; color: #AFA939; flex-shrink: 0; }
.snb-text strong { display: block; color: #ECECEC; font-size: 0.92rem; }
.snb-text span { color: #9CA3AF; font-size: 0.82rem; }
.snb-form {
    display: flex;
    gap: 8px;
    flex: 1;
    min-width: 260px;
    max-width: 440px;
}
.snb-email-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 6px;
    color: #ECECEC;
    font-size: 0.88rem;
    padding: 9px 13px;
    outline: none;
    transition: border-color 0.2s;
}
.snb-email-input:focus { border-color: #AFA939; }
.snb-email-input::placeholder { color: #6B7280; }
.snb-submit-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: #AFA939;
    color: #0d0d0d;
    font-weight: 700;
    font-size: 0.85rem;
    padding: 9px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.snb-submit-btn:hover { background: #c9c23a; }
.snb-close-btn {
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 1.3rem;
    line-height: 1;
    cursor: pointer;
    padding: 6px;
    margin-left: auto;
    flex-shrink: 0;
    transition: color 0.2s;
}
.snb-close-btn:hover { color: #ECECEC; }
.snb-success { gap: 12px; justify-content: center; }
.snb-success-icon { font-size: 1.3rem; color: #AFA939; }
.snb-success strong { color: #ECECEC; }
.snb-success span { color: #9CA3AF; font-size: 0.85rem; }
@media (max-width: 767.98px) {
    .snb-inner { padding: 12px 16px; gap: 12px; }
    .snb-text { min-width: unset; width: 100%; }
    .snb-form { min-width: unset; width: 100%; max-width: none; }
}

/* ── 7. Exit Intent Overlay ─────────────────────────────────────── */
.exit-intent-overlay {
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.76);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s ease;
    backdrop-filter: blur(3px);
}
.exit-intent-overlay.is-visible {
    opacity: 1;
    pointer-events: auto;
}
.exit-intent-card {
    position: relative;
    background: #141414;
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 16px;
    padding: 44px 40px;
    max-width: 500px;
    width: 100%;
    text-align: center;
    box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
    transform: scale(0.86);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.exit-intent-overlay.is-visible .exit-intent-card { transform: scale(1); }
.exit-close-btn {
    position: absolute;
    top: 14px;
    right: 16px;
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 1rem;
    cursor: pointer;
    padding: 6px 8px;
    transition: color 0.2s;
}
.exit-close-btn:hover { color: #ECECEC; }
.exit-brand-icon {
    width: 60px;
    height: 60px;
    background: rgba(175, 169, 57, 0.12);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 18px;
    font-size: 1.5rem;
    color: #AFA939;
}
.exit-heading { color: #ECECEC; font-size: 1.5rem; font-weight: 700; margin-bottom: 10px; }
.exit-sub { color: #9CA3AF; font-size: 0.91rem; line-height: 1.65; margin-bottom: 22px; }
.exit-form {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}
.exit-email-input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(175, 169, 57, 0.3);
    border-radius: 7px;
    color: #ECECEC;
    font-size: 0.92rem;
    padding: 11px 14px;
    outline: none;
    transition: border-color 0.2s;
}
.exit-email-input:focus { border-color: #AFA939; }
.exit-email-input::placeholder { color: #6B7280; }
.exit-subscribe-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: #AFA939;
    color: #0d0d0d;
    font-weight: 700;
    font-size: 0.88rem;
    padding: 11px 18px;
    border: none;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.2s;
}
.exit-subscribe-btn:hover { background: #c9c23a; }
.exit-form-success {
    text-align: center;
    padding: 16px 0;
    color: #AFA939;
    font-size: 0.95rem;
    margin-bottom: 16px;
}
.exit-form-success.is-hidden { display: none; }
.exit-form.is-hidden { display: none; }
.exit-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #4B5563;
    font-size: 0.8rem;
    margin: 16px 0;
}
.exit-divider::before,
.exit-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(175, 169, 57, 0.15);
}
.exit-consult-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: transparent;
    color: #AFA939;
    font-weight: 600;
    font-size: 0.92rem;
    border: 1px solid rgba(175, 169, 57, 0.45);
    padding: 12px 22px;
    border-radius: 8px;
    text-decoration: none;
    margin-bottom: 14px;
    transition: background 0.2s, border-color 0.2s;
}
.exit-consult-btn:hover {
    background: rgba(175, 169, 57, 0.1);
    border-color: #AFA939;
    color: #AFA939;
}
.exit-skip-btn {
    background: transparent;
    border: none;
    color: #6B7280;
    font-size: 0.82rem;
    cursor: pointer;
    padding: 4px;
    text-decoration: underline;
    transition: color 0.2s;
}

/* ===== Responsive Enhancements ===== */
@media (max-width: 1199px) {
    .hero-section {
        min-height: 85vh;
    }

    .hero-title {
        font-size: 3rem;
    }

    .hero-description,
    .section-description {
        max-width: 100%;
    }
}

@media (max-width: 991px) {
    .hero-section {
        min-height: 70vh;
        background-attachment: scroll;
    }

    .hero-title {
        font-size: 2.6rem;
    }

    .hero-description {
        font-size: 1rem;
        margin-bottom: 30px;
    }

    .section-padding {
        padding: 70px 0;
    }

    .hero-buttons {
        justify-content: flex-start;
    }

    .play-text {
        display: none;
    }

    .navbar-dark.bg-dark-custom .container {
        padding-left: 18px;
        padding-right: 18px;
    }

    .navbar-collapse.show .navbar-nav {
        flex-direction: column;
        gap: 0.5rem;
        align-items: stretch;
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.85rem 1rem !important;
        width: 100%;
    }
}

@media (max-width: 767px) {
    .hero-section {
        min-height: 58vh;
        padding-top: 80px;
    }

    .hero-title {
        font-size: 2.2rem;
    }

    .hero-description {
        font-size: 0.98rem;
        line-height: 1.7;
    }

    .hero-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 16px;
    }

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

    .action-zone {
        justify-content: flex-end;
        gap: 0.5rem;
    }

    .brand-logo {
        height: 44px;
    }

    .brand-name {
        font-size: 18px;
    }
}

@media (max-width: 575px) {
    .section-padding {
        padding: 50px 0;
    }

    .hero-title {
        font-size: 1.85rem;
    }

    .navbar-nav .nav-link {
        font-size: 14px;
        padding: 0.75rem 0.9rem !important;
    }

    .phone-number {
        font-size: 14px;
    }

    .hero-subtitle,
    .section-subtitle {
        font-size: 0.95rem;
    }
}

.exit-skip-btn:hover { color: #9CA3AF; }
@media (max-width: 575.98px) {
    .exit-intent-card { padding: 36px 24px; }
    .exit-heading { font-size: 1.25rem; }
    .exit-form { flex-direction: column; }
}

/* ── Phase 5: print suppression ─────────────────────────────────── */
@media print {
    .article-top-cta,
    .contextual-cta,
    .article-bottom-cta,
    #sidebarPracticeWidget,
    .sticky-newsletter-bar,
    .exit-intent-overlay { display: none !important; }
}

/* ================================================================
   PHASE 6 — Technical SEO Enhancements
   ================================================================ */
.phase6-internal-links,
.phase6-authority-links {
    margin-top: 26px;
}

.phase6-links-list {
    list-style: none;
    padding: 0;
    margin: 14px 0 0;
}

.phase6-links-list li {
    margin: 6px 0;
    color: #D1D5DB;
}

.phase6-links-list a {
    color: #AFA939;
    text-decoration: none;
    border-bottom: 1px dashed rgba(175, 169, 57, 0.45);
    transition: color 0.2s ease, border-color 0.2s ease;
}

.phase6-links-list a:hover {
    color: #c9c23a;
    border-color: #c9c23a;
}

.phase6-lead-keyword {
    color: #D1D5DB;
    font-size: 1rem;
    background: rgba(175, 169, 57, 0.07);
    border-left: 3px solid rgba(175, 169, 57, 0.6);
    padding: 12px 14px;
    border-radius: 0 8px 8px 0;
    margin: 14px 0 18px;
}

@media (max-width: 575.98px) {
    .phase6-lead-keyword {
        font-size: 0.94rem;
        padding: 10px 12px;
    }
}

/* ============================================================
   GLOBAL RESPONSIVE SYSTEM
   Mobile ≤767px | Tablet 768–1279px | Desktop ≥1280px
   ============================================================ */

/* Prevent horizontal scroll at the document root */
html {
    overflow-x: hidden;
}

/* Ensure all media elements are fluid */
img,
video,
iframe,
embed,
object {
    max-width: 100%;
    height: auto;
}

/* Embedded maps & video iframes must stay full-width */
.map-wrapper iframe,
#videoModal iframe,
.contact-office-map {
    width: 100%;
}

/* ---- Tablet: 768px – 1279px ---- */
@media (min-width: 768px) and (max-width: 1279px) {
    .section-padding {
        padding: 80px 0;
    }

    .hero-section {
        min-height: 90vh;
    }

    .footer-section {
        padding: 60px 0 24px;
    }

    .cta-section {
        padding: 60px 0;
    }

    .flip-card {
        height: 380px;
    }
}

/* ---- Mobile: ≤767px ---- */
@media (max-width: 767px) {
    /* Section breathing room */
    .section-padding {
        padding: 56px 0;
    }

    /* Footer */
    .footer-section {
        padding: 48px 0 20px;
    }

    .footer-middle-bar {
        padding: 20px 14px;
        margin-bottom: 24px;
    }

    .footer-desc {
        max-width: 100%;
    }

    .contact-pill {
        font-size: 0.95rem;
    }

    /* CTA section */
    .cta-section {
        padding: 50px 0;
    }

    .cta-section h2 {
        font-size: clamp(1.4rem, 6vw, 2rem);
    }

    /* Careers hero */
    .careers-page .hero-careers {
        padding: 5rem 0 3rem;
        min-height: auto;
    }

    /* Counter section */
    .counter-section {
        padding: 48px 0;
    }

    .counter-wrap {
        padding: 16px 8px;
    }

    /* Service cards */
    .service-card {
        padding: 28px 18px;
    }

    .service-icon {
        width: 64px;
        height: 64px;
    }

    .service-icon i {
        font-size: 26px;
    }

    /* Consultation form */
    .consultation-form-wrap {
        border-radius: 12px;
    }

    /* Attorney profile — stop sticky sidebar so it doesn't overlap */
    .profile-sticky-wrapper {
        position: static;
    }

    /* Head-of-chamber image */
    .head-img-wrapper {
        min-height: 260px;
    }

    /* Flip cards */
    .flip-card {
        height: 300px;
    }

    /* Attorney compact card image */
    .attorney-img-compact {
        height: 200px;
    }

    /* Divider spacing */
    .divider {
        margin: 36px 0;
    }

    /* Legal page header */
    .page-header {
        padding: 130px 0 50px;
    }

    /* Legal content */
    .legal-content {
        padding: 22px 16px;
    }

    /* Section subtitle label */
    .section-subtitle {
        font-size: 0.75rem;
        letter-spacing: 2px;
    }

    /* Hero description */
    .hero-description {
        max-width: 100%;
    }
}

/* ---- Very small: ≤400px ---- */
@media (max-width: 400px) {
    /* Brand */
    .brand-logo {
        height: 36px;
    }

    .brand-name {
        font-size: 16px;
    }

    /* Buttons */
    .btn-gold {
        padding: 8px 16px;
        font-size: 0.875rem;
    }

    .btn-lg {
        padding: 12px 20px;
        font-size: 1rem;
    }

    /* Hero buttons stacked on tiny screens */
    .hero-buttons .btn {
        width: 100%;
        justify-content: center;
    }

    /* Footer contact pills wrap nicely */
    .contact-pill {
        font-size: 0.875rem;
    }

    /* Testimonial card */
    .testimonial-card {
        padding: 20px 14px;
    }

    /* Award card */
    .award-card {
        padding: 28px 16px;
    }

    /* Contact info card */
    .contact-info-card {
        padding: 28px 16px;
    }

    /* Inline utility: some fixed font-sizes need clamping on tiny screens */
    .u-inline-0003,
    .u-inline-0034 {
        font-size: clamp(1.5rem, 8vw, 3rem) !important;
    }

    .u-inline-0011 {
        font-size: clamp(1.5rem, 9vw, 42px) !important;
    }
}

/* ---- Ensure navbar brand stays on one line at all widths ---- */
@media (max-width: 360px) {
    .brand-name {
        font-size: 14px;
    }

    .brand-tagline {
        display: none;
    }

    .brand-logo {
        height: 32px;
        margin-right: 0.5rem !important;
    }
}

/* ---- Desktop ≥1280px ---- */
@media (min-width: 1280px) {
    .section-padding {
        padding: 100px 0;
    }
}

/* Alternating section palette.
   JavaScript assigns these classes in DOM order, skipping hero and stats/counter sections. */
#main-content > section.site-section-dark {
    background:
        radial-gradient(circle at top left, rgba(175, 169, 57, 0.055), transparent 34%),
        linear-gradient(180deg, #0f1113 0%, #111418 100%) !important;
    border-top: 1px solid rgba(175, 169, 57, 0.08);
    border-bottom: 1px solid rgba(175, 169, 57, 0.08);
}

#main-content > section.site-section-lifted {
    background:
        radial-gradient(circle at top right, rgba(175, 169, 57, 0.09), transparent 32%),
        linear-gradient(180deg, #15181d 0%, #1a1e23 100%) !important;
    border-top: 1px solid rgba(175, 169, 57, 0.13);
    border-bottom: 1px solid rgba(175, 169, 57, 0.13);
}

#main-content > section.site-section-dark,
#main-content > section.site-section-lifted {
    position: relative;
    overflow: hidden;
}

#main-content > section.site-section-dark::before,
#main-content > section.site-section-lifted::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.018), transparent 42%, rgba(175, 169, 57, 0.025));
}

#main-content > section.site-section-dark > .container,
#main-content > section.site-section-lifted > .container {
    position: relative;
    z-index: 1;
}

#statsSection {
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.1) 0%, rgba(180, 136, 17, 0.1) 100%) !important;
}

@media (max-width: 767.98px) {
    .careers-page .hero-careers {
        min-height: 66vh;
        padding: 104px 0 5rem;
        background-size: auto 72vh !important;
        background-position: center 18% !important;
        background-repeat: no-repeat !important;
    }

    .careers-page .hero-careers .container {
        transform: translateY(6rem);
    }
}

@media (max-width: 575.98px) {
    .careers-page .hero-careers {
        min-height: 64vh;
        padding: 96px 0 3.5rem;
        background-size: auto 72vh !important;
        background-position: center 18% !important;
        background-repeat: no-repeat !important;
    }
}

.hero-blog {
    min-height: 72vh;
    padding: 120px 0 5rem;
    background:
        linear-gradient(180deg, rgba(15, 17, 19, 0.28) 0%, rgba(15, 17, 19, 0.72) 100%),
        linear-gradient(90deg, rgba(15, 17, 19, 0.62) 0%, rgba(15, 17, 19, 0.25) 55%, rgba(15, 17, 19, 0.5) 100%),
        url('https://images.unsplash.com/photo-1521791136064-7986c2920216?w=1600&h=900&fit=crop') center 18% / cover no-repeat !important;
    background-attachment: scroll;
}

.hero-blog .container {
    transform: translateY(11rem);
}

@media (max-width: 767.98px) {
    .hero-blog {
        min-height: 66vh;
        padding: 104px 0 5rem;
        background-size: auto 72vh !important;
        background-position: center 18% !important;
        background-repeat: no-repeat !important;
    }

    .hero-blog .container {
        transform: translateY(6rem);
    }
}

@media (max-width: 575.98px) {
    .hero-blog {
        min-height: 64vh;
        padding: 96px 0 3.5rem;
        background-size: auto 72vh !important;
        background-position: center 18% !important;
        background-repeat: no-repeat !important;
    }
}

/* ==========================================================
   HOME PAGE RESPONSIVE FIXES
   ========================================================== */

html {
    overflow-x: hidden;
}

body {
    overflow-x: hidden;
    width: 100%;
}

img,
video,
iframe {
    display: block;
    max-width: 100%;
}

.navbar-dark.bg-dark-custom .container {
    width: min(100%, 1440px);
}

.navbar-brand,
.brand-text,
.action-zone,
.hero-buttons,
.cta-buttons,
.contact-pill-wrapper,
.legal-links,
.subscribe-form-compact .input-group {
    min-width: 0;
}

.navbar-toggler {
    min-width: 44px;
    min-height: 44px;
}

.navbar-collapse {
    min-width: 0;
}

@media (max-width: 991.98px) {
    .navbar-dark.bg-dark-custom {
        padding: 12px 0;
    }

    .navbar-dark.bg-dark-custom .container {
        align-items: flex-start;
        gap: 0.75rem;
    }

    .navbar-brand {
        max-width: calc(100% - 3.5rem);
    }

    .brand-text {
        min-width: 0;
    }

    .navbar-collapse {
        flex-basis: 100%;
        width: 100%;
        order: 3;
    }

    .navbar-collapse.show {
        display: block;
        max-height: calc(100vh - 88px);
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .navbar-nav {
        width: 100%;
        padding-top: 0.25rem;
    }

    .navbar-nav .nav-item,
    .navbar-nav .nav-link {
        width: 100%;
    }

    .navbar-nav .nav-link {
        padding: 0.85rem 0 !important;
    }

    .action-zone {
        display: none;
    }

    .nav-mobile-cta-item {
        display: block;
        margin-bottom: 0.25rem;
    }

    .nav-mobile-cta-link {
        width: 100%;
        justify-content: center;
    }

    .section-padding {
        padding: 84px 0;
    }
}

@media (max-width: 767.98px) {
    .hero-section.about-hero {
        min-height: clamp(220px, 66.666vw, 400px);
        height: clamp(220px, 66.666vw, 400px);
        padding: 0;
        align-items: flex-end;
        background-size: 100% auto !important;
        background-position: center 36px !important;
        background-repeat: no-repeat !important;
        background-color: #0f1113;
        background-attachment: scroll;
    }

    .hero-section.service-areas-hero,
    .hero-section.practice-areas-hero,
    .hero-section.attorneys-hero {
        min-height: clamp(220px, 66.666vw, 400px);
        height: clamp(220px, 66.666vw, 400px);
        padding: 0;
        align-items: flex-end;
        background-size: 100% auto !important;
        background-position: center 24px !important;
        background-repeat: no-repeat !important;
        background-color: #0f1113;
        background-attachment: scroll;
    }

    .hero-section.attorneys-hero {
        background-position: center 52px !important;
    }

    .hero-section.about-hero .container,
    .hero-section.service-areas-hero .container,
    .hero-section.practice-areas-hero .container,
    .hero-section.attorneys-hero .container {
        position: absolute;
        inset: 0;
        display: block;
        height: 100%;
        padding: 0 18px;
    }

    .hero-section.about-hero .row.align-items-center,
    .hero-section.service-areas-hero .hero-content,
    .hero-section.practice-areas-hero .row.align-items-center,
    .hero-section.attorneys-hero .row.align-items-center {
        position: absolute;
        top: auto;
        bottom: clamp(12px, 3vw, 22px);
        left: 0;
        right: 0;
        width: 100%;
        min-height: 0 !important;
        height: auto;
        margin: 0;
        transform: none !important;
    }

    .hero-section.service-areas-hero .hero-subtitle,
    .hero-section.practice-areas-hero .hero-subtitle,
    .hero-section.attorneys-hero .hero-subtitle {
        font-size: 0.78rem;
        margin-bottom: 4px;
    }

    .hero-section.service-areas-hero .hero-title,
    .hero-section.practice-areas-hero .hero-title,
    .hero-section.attorneys-hero .hero-title {
        font-size: clamp(1.55rem, 6vw, 2.1rem);
        line-height: 1.08;
        margin-bottom: 0.4rem;
    }

    .hero-section.service-areas-hero .breadcrumb,
    .hero-section.practice-areas-hero .breadcrumb,
    .hero-section.attorneys-hero .breadcrumb {
        margin-bottom: 0;
        font-size: 0.82rem;
    }

    .hero-section.about-hero .col-md-8 {
        position: static;
        top: auto;
        transform: none !important;
    }

    .section-padding {
        padding: 64px 0;
    }

    .home-why-choose.section-padding {
        padding-top: 14px;
    }

    .section-title {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    .service-card,
    .award-card,
    .testimonial-card,
    .attorney-card {
        padding-left: 20px;
        padding-right: 20px;
    }

    .service-card {
        padding-top: 30px;
        padding-bottom: 26px;
    }

    .homepage-card-grid {
        --bs-gutter-y: 1.5rem;
    }

    .service-icon {
        width: 64px;
        height: 64px;
        margin-bottom: 18px;
    }

    .service-icon i {
        font-size: 26px;
    }

    .service-content h3 {
        font-size: 1.2rem;
    }

    .counter-section {
        padding: 60px 0;
    }

    .counter-wrap {
        padding: 24px 18px;
    }

    .counter-icon {
        width: 56px;
        height: 56px;
    }

    .counter-icon i {
        font-size: 24px;
    }

    .counter-number {
        font-size: clamp(2rem, 9vw, 2.6rem);
    }

    .cta-section {
        padding: 60px 0;
    }

    .cta-section h2 {
        font-size: clamp(2rem, 6vw, 2.5rem);
    }

    .cta-buttons {
        flex-direction: column;
        align-items: stretch;
    }

    .cta-buttons .btn {
        width: 100%;
    }

    .footer-section {
        padding: 64px 0 24px;
    }

    .footer-middle-bar {
        padding: 28px 18px;
    }

    .contact-pill-wrapper {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.75rem 1rem;
    }

    .contact-pill {
        font-size: 1rem;
        white-space: normal;
        text-align: center;
        justify-content: center;
    }

    .footer-bottom .row {
        row-gap: 0.75rem;
    }

    .legal-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem 0.6rem;
    }

    .legal-links .divider {
        margin: 0 0.35rem;
    }

    .subscribe-form-compact .input-group {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .subscribe-form-compact .form-control {
        width: 100%;
        flex: 1 1 220px;
        border-radius: 4px;
    }

    .subscribe-form-compact .btn-gold {
        border-radius: 4px;
        min-width: 54px;
    }

    #kamal-chatbot-root {
        right: max(10px, env(safe-area-inset-right));
        bottom: max(10px, env(safe-area-inset-bottom));
    }

    .kamal-chatbot-bubble {
        width: 54px;
        height: 54px;
    }

    .back-to-top {
        width: 46px;
        height: 46px;
        left: max(12px, env(safe-area-inset-left));
        bottom: max(12px, env(safe-area-inset-bottom));
    }

    .practice-modal-content .modal-footer {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
    }

    .practice-modal-content .modal-footer > div {
        display: flex;
        flex-direction: column;
        gap: 0.5rem;
        width: 100%;
    }

    .practice-modal-content .modal-footer .btn {
        width: 100%;
        margin-left: 0 !important;
    }
}

@media (max-width: 575.98px) {
    .navbar-dark.bg-dark-custom .container {
        gap: 0.5rem;
    }

    .brand-logo {
        height: 40px;
        margin-right: 0.5rem !important;
    }

    .brand-name {
        font-size: 15px;
    }

    .brand-tagline {
        display: none;
    }

    .navbar-collapse.show {
        max-height: calc(100vh - 84px);
    }

    .hero-section.about-hero {
        min-height: clamp(220px, 66.666vw, 400px);
        height: clamp(220px, 66.666vw, 400px);
        padding: 0;
        align-items: flex-end;
        background-size: 100% auto !important;
        background-position: center 36px !important;
        background-repeat: no-repeat !important;
        background-color: #0f1113;
    }

    .hero-section.about-hero .hero-subtitle {
        display: none;
    }

    .hero-section.about-hero .container {
        position: absolute;
        inset: 0;
        display: block;
        height: 100%;
        padding: 0 16px;
    }

    .hero-section.about-hero .row.align-items-center {
        position: absolute;
        top: auto;
        bottom: clamp(8px, 2.5vw, 14px);
        left: 0;
        right: 0;
        width: 100%;
        min-height: 0 !important;
        height: auto;
        margin: 0;
        transform: none !important;
    }

    .hero-section.service-areas-hero .hero-content,
    .hero-section.practice-areas-hero .row.align-items-center,
    .hero-section.attorneys-hero .row.align-items-center {
        bottom: clamp(8px, 2.5vw, 14px);
    }

    .hero-section.about-hero .col-md-8 {
        position: static;
        top: auto;
        transform: none !important;
    }

    .hero-section.about-hero .hero-title {
        font-size: clamp(1.8rem, 8vw, 2.35rem);
        line-height: 1.08;
        margin-bottom: 0.45rem;
    }

    .hero-section.about-hero .breadcrumb {
        margin-bottom: 0;
        font-size: 0.82rem;
    }

    .btn-lg {
        padding-left: 28px;
        padding-right: 28px;
        font-size: 1rem;
    }

    .section-padding {
        padding: 56px 0;
    }

    .home-why-choose.section-padding {
        padding-top: 0;
        margin-top: 0;
    }

    .u-inline-0018 > .u-inline-0019 {
        right: 0;
        bottom: -14px;
        padding: 14px 16px;
        border-radius: 10px;
    }

    .u-inline-0018 > .u-inline-0019 .u-inline-0020 {
        font-size: 32px;
        line-height: 1;
    }

    .u-inline-0018 > .u-inline-0019 .u-inline-0021 {
        font-size: 11px;
        line-height: 1.2;
    }

    .section-subtitle {
        letter-spacing: 2px;
    }

    .service-card,
    .award-card,
    .testimonial-card,
    .attorney-card {
        padding-left: 18px;
        padding-right: 18px;
    }

    .footer-logo {
        font-size: 22px;
    }

    .footer-heading {
        margin-bottom: 18px;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .legal-links {
        font-size: 0.92rem;
    }

    .subscribe-form-compact .btn-gold {
        width: 100%;
        justify-content: center;
    }

    .subscribe-form-compact .form-control {
        border-radius: 4px;
    }

    .contact-pill {
        font-size: 0.95rem;
    }

    .back-to-top {
        left: max(10px, env(safe-area-inset-left));
        bottom: max(10px, env(safe-area-inset-bottom));
    }
}

@media (hover: none) and (pointer: coarse), (max-width: 767.98px) {
    .flip-card {
        height: 320px;
        perspective: 1000px;
        cursor: pointer;
    }

    .flip-card-inner {
        display: block;
        transform-style: preserve-3d;
        transition: transform 0.8s;
    }

    .flip-card.is-flipped .flip-card-inner {
        transform: rotateY(180deg);
    }

    .flip-card:hover .flip-card-inner {
        transform: none;
    }

    .flip-card-back {
        padding: 24px;
    }

    .flip-card-back::before {
        border-radius: 12px;
    }
}

@media (max-width: 575.98px) {
    .flip-card {
        height: 300px;
    }
}

/* ========================================================
   PREMIUM BLOG REDESIGN — Article Reading Experience
   & Editorial Listing Page (blog.html)
   Appended at end of file so these rules win the cascade
   against earlier BLOG declarations of equal specificity.
   ======================================================== */

/* ---------- Hero image: consistent duotone/overlay treatment ---------- */
.article-hero-frame {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    margin-bottom: 40px;
    border: 1px solid rgba(175, 169, 57, 0.24);
    box-shadow: 0 24px 56px rgba(0, 0, 0, 0.38);
}
.article-hero-frame::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, rgba(15, 17, 19, 0) 45%, rgba(15, 17, 19, 0.62) 100%),
        linear-gradient(115deg, rgba(175, 169, 57, 0.16) 0%, rgba(15, 17, 19, 0) 55%);
    pointer-events: none;
}
.article-hero-media {
    width: 100%;
    height: 460px;
    object-fit: cover;
    display: block;
    margin-bottom: 0;
    border: none;
    border-radius: 0;
    box-shadow: none;
    filter: saturate(0.82) contrast(1.06) brightness(0.92);
}
@media (max-width: 991.98px) {
    .article-hero-media { height: 340px; }
}
@media (max-width: 767.98px) {
    .article-hero-media { height: 240px; }
}

/* Drop cap on the article's opening paragraph (js/blog-phase8.js may inject a
   .phase8-stats block right after the first h2 on some pages, so match both cases) */
.article-content h2:first-of-type + p::first-letter,
.article-content h2:first-of-type + .phase8-stats + p::first-letter {
    font-family: 'Playfair Display', serif;
    font-size: 3.6em;
    line-height: 0.78;
    float: left;
    padding: 6px 10px 0 0;
    color: #AFA939;
    font-weight: 700;
}

/* ---------- Differentiated callout system ---------- */
.article-callout {
    position: relative;
    background: linear-gradient(145deg, rgba(175, 169, 57, 0.1) 0%, rgba(24, 27, 31, 0.97) 100%);
    border: 1px solid rgba(175, 169, 57, 0.26);
    border-left: 4px solid #AFA939;
    border-radius: 12px;
    padding: 26px 28px;
    margin: 34px 0;
}
.article-callout h5 {
    display: flex;
    align-items: center;
    gap: 12px;
    color: #F3EFD9;
    margin-bottom: 12px;
    font-weight: 700;
    font-size: 1.02rem;
}
.article-callout h5 i {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(175, 169, 57, 0.18);
    color: #AFA939;
    font-size: 0.9rem;
    margin-right: 0 !important;
}
.article-callout p,
.article-callout li { color: #D1D5DB; font-size: 0.96rem; line-height: 1.7; }
.article-callout ul { margin: 0; padding-left: 22px; }
.article-callout > *:last-child { margin-bottom: 0; }

/* Key Legal Points — primary gold summary */
.article-callout.callout-summary {
    border-left-width: 5px;
    background: linear-gradient(145deg, rgba(175, 169, 57, 0.15) 0%, rgba(24, 27, 31, 0.97) 100%);
}
.article-callout.callout-summary h5 i { background: rgba(175, 169, 57, 0.24); }

/* Action / link-out callouts (Related Services, topic-specific consultation prompts) */
.article-callout.callout-action {
    border-left: none;
    border: 1px solid rgba(175, 169, 57, 0.42);
    background: linear-gradient(135deg, rgba(175, 169, 57, 0.17) 0%, rgba(24, 27, 31, 0.97) 100%);
}
.article-callout.callout-action h5 i { background: #AFA939; color: #0F1113; }
.article-callout.callout-action .btn { margin-top: 14px; }

/* Practical Insight — editorial commentary */
.article-callout.callout-pro-tip {
    border-left-color: #66d9a3;
    background: linear-gradient(145deg, rgba(102, 217, 163, 0.12) 0%, rgba(24, 27, 31, 0.97) 100%);
}
.article-callout.callout-pro-tip h5 { color: #bdf0d6; }
.article-callout.callout-pro-tip h5 i { background: rgba(102, 217, 163, 0.2); color: #66d9a3; }

/* Legal Advisory Note — disclaimer / warning */
.article-callout.callout-important {
    border-left-color: #f3b43f;
    background: linear-gradient(145deg, rgba(243, 180, 63, 0.12) 0%, rgba(24, 27, 31, 0.97) 100%);
}
.article-callout.callout-important h5 { color: #ffdba0; }
.article-callout.callout-important h5 i { background: rgba(243, 180, 63, 0.2); color: #f3b43f; }

/* ---------- Sidebar TOC: active-section highlighting ---------- */
.table-of-contents { padding: 26px; }
.table-of-contents h5 { display: flex; align-items: center; gap: 8px; }
.table-of-contents ul { border-left: 1px solid rgba(175, 169, 57, 0.18); }
.table-of-contents li { margin-bottom: 2px; }
.table-of-contents a {
    display: block;
    padding: 7px 0 7px 16px;
    margin-left: -1px;
    border-left: 2px solid transparent;
    line-height: 1.4;
    transition: color 0.2s ease, border-color 0.2s ease;
}
.table-of-contents li.toc-h3 a { font-size: 0.84rem; padding-left: 30px; color: #7c8592; }
.table-of-contents a:hover { color: #AFA939; }
.table-of-contents a.active {
    color: #AFA939;
    border-left-color: #AFA939;
    font-weight: 600;
}
.table-of-contents li.toc-h3 a.active { color: #f0e2a4; }

/* ---------- Meta bar / author / share polish ---------- */
.meta-author img { width: 46px; height: 46px; }
.meta-right { border-left: 1px solid rgba(175, 169, 57, 0.18); padding-left: 14px; }
@media (max-width: 575.98px) {
    .meta-right { border-left: none; padding-left: 0; }
}

.author-profile { padding: 34px; }
.author-profile-img { width: 110px; height: 110px; border-width: 3px; }

.article-cta { position: relative; overflow: hidden; }
.article-cta::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(circle at 15% 20%, rgba(175, 169, 57, 0.16), transparent 55%);
    pointer-events: none;
}

/* ========================================================
   Blog listing (blog.html) — editorial redesign
   ======================================================== */

/* Featured hero (single lead article, replaces carousel) */
.featured-hero {
    position: relative;
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: stretch;
    background: linear-gradient(160deg, rgba(27, 31, 35, 0.86), rgba(15, 17, 19, 0.97));
    border: 1px solid rgba(175, 169, 57, 0.26);
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 50px;
    box-shadow: 0 26px 64px rgba(0, 0, 0, 0.42);
}
.featured-hero-media { position: relative; display: block; overflow: hidden; min-height: 340px; }
.featured-hero-media img {
    width: 100%; height: 100%; object-fit: cover; display: block;
    filter: saturate(0.84) contrast(1.05) brightness(0.88);
    transition: transform 0.6s ease;
}
.featured-hero:hover .featured-hero-media img { transform: scale(1.045); }
.featured-hero-media::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(15, 17, 19, 0) 55%, rgba(15, 17, 19, 0.5) 100%);
    pointer-events: none;
}
.featured-hero-body { padding: 44px 46px; display: flex; flex-direction: column; justify-content: center; gap: 14px; }
.featured-hero-chip { width: fit-content; }
.featured-hero-category { color: #AFA939; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.78rem; font-weight: 700; }
.featured-hero-title { font-size: clamp(1.5rem, 2.6vw, 2.15rem); line-height: 1.22; margin: 0; }
.featured-hero-title a { color: #f2f4f7; text-decoration: none; }
.featured-hero-title a:hover { color: #f7e8a3; }
.featured-hero-excerpt { color: #c7cdd6; font-size: 1rem; line-height: 1.65; margin: 0; }
.featured-hero-meta { display: flex; flex-wrap: wrap; gap: 18px; color: #9CA3AF; font-size: 0.85rem; }
.featured-hero-meta i { color: #AFA939; margin-right: 6px; }
.featured-hero-cta { width: fit-content; margin-top: 6px; }
@media (max-width: 991.98px) {
    .featured-hero { grid-template-columns: 1fr; }
    .featured-hero-media { min-height: 240px; }
    .featured-hero-body { padding: 30px 26px; }
}

/* Cluster quick-filter pills */
.cluster-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 30px; }
.cluster-pill {
    border: 1px solid rgba(175, 169, 57, 0.28);
    background: rgba(27, 31, 35, 0.6);
    color: #cfd5de;
    padding: 8px 16px;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
.cluster-pill:hover { border-color: rgba(175, 169, 57, 0.55); color: #f0e2a4; }
.cluster-pill.is-active { background: linear-gradient(135deg, #AFA939, #B48811); color: #0F1113; border-color: transparent; }

/* Category clusters (default grouped view) */
.category-cluster { margin-bottom: 44px; }
.cluster-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 20px; padding-bottom: 12px; border-bottom: 1px solid rgba(175, 169, 57, 0.16); }
.cluster-head h3 { font-size: 1.3rem; margin: 0; color: #e9edf2; }
.cluster-head .cluster-count { color: #9CA3AF; font-size: 0.8rem; font-weight: 500; margin-left: 8px; }
.cluster-link { color: #AFA939; font-size: 0.85rem; text-decoration: none; font-weight: 600; white-space: nowrap; }
.cluster-link:hover { color: #f7e8a3; }

/* Card polish: image treatment consistent with article hero, reading-time badge */
.card-media { height: 200px; }
.card-media-img {
    filter: saturate(0.85) contrast(1.04) brightness(0.92);
    transition: transform 0.45s ease;
}
.glass-card:hover .card-media-img { transform: scale(1.07); }
.badge-readtime {
    position: absolute; right: 14px; top: 14px; z-index: 1;
    background: rgba(15, 17, 19, 0.72);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
    color: #e9edf2; font-size: 0.72rem; padding: 5px 10px; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}
.badge-readtime i { color: #AFA939; margin-right: 5px; }
.meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.meta-dot { color: #5b6169; }
.meta-author-link { color: #9CA3AF; text-decoration: none; }
.meta-author-link:hover { color: #AFA939; }

@media (max-width: 767.98px) {
    .featured-hero-body { padding: 24px 22px; }
    .cluster-head { flex-direction: column; align-items: flex-start; gap: 6px; }
}

/* Fix: Bootstrap's .row is a flex container, and a lone .col-lg-8 (no bare .col)
   has no width rule below the lg breakpoint, so it sizes to its content's
   preferred width instead of the viewport — causing horizontal overflow on
   mobile for the article header/body columns. Force it to respect the row. */
.article-header .row.justify-content-center > [class*="col-"],
.article-content .row > [class*="col-"] {
    min-width: 0;
}