/*
Theme Name: Beeson Skinner Beverly LLP
Theme URI: https://www.beesonskinnerbeverly.com
Description: Custom WordPress theme for Beeson Skinner Beverly LLP
Version: 1.0
Author: Dan Gilroy Design
Author URI: https://www.dangilroy.com
*/

/* ========================================
   TABLE OF CONTENTS
   1. CSS Reset & Base Styles
   2. Typography
   3. Color Variables
   4. Global Utilities
   5. Header & Navigation
   6. Footer
   7. Home Page
   8. Responsive Breakpoints
======================================== */

/* ========================================
   3. COLOR VARIABLES
======================================== */

:root {
    --color-dark-blue: #1F386B;
    --color-light-blue: #D4E0F9;
    --color-orange: #F9A62D;
    --color-ecru: #F3F6FB;
    --color-white: #FFFFFF;
    --color-text: #333333;
    --color-text-light: #666666;
}


/* ========================================
   1. CSS RESET & BASE STYLES
======================================== */


* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
font-family: "Work Sans", sans-serif;
font-optical-sizing: auto;
font-weight: 400;
font-size: clamp(1rem, 1.5vw, 1.1rem);
font-style: normal;
line-height: 1.7;
color: #666;
background: #FFFFFF;
overflow-x: hidden;
}

/* Mobile Devices  */
@media only screen and (min-width: 0) and (max-width: 768px) {.desktop-only {display:none}}

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

a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

ul, ol {
    list-style-position: inside;
}

button {
    cursor: pointer;
    font-family: inherit;
}

/* ========================================
   2. TYPOGRAPHY
======================================== */

h1, h2, h3, h4, h5, h6,
.bsb-h1, .bsb-h2, .bsb-h3, .bsb-h4 {
    font-family: "Amiri", serif;
    font-weight: 400;
    color: #1F386B;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 1rem;
}

h1, .bsb-h1 {
    font-size: clamp(2rem, 4vw + 0.8rem, 3.2rem);
    line-height: 1.2;
}
h2, .bsb-h2 {
    font-size: clamp(1.6rem, 3.2vw + 0.4rem, 2.4rem);
}
h3, .bsb-h3 {
    font-size: clamp(1.2rem, 2.4vw + 0.2rem, 1.6rem);
}
h4, .bsb-h4 {
    font-size: clamp(1rem, 2vw, 1.2rem);
}

p {
    margin-bottom: 1.5rem;
}

.bsb-lead {
    font-weight: 400;
}

.bsb-small, small {
    font-size: clamp(0.875rem, 1.5vw, 1rem);
    color: #666666;
}

strong, b {
    font-weight: 600;
}

.bsb-testimonial-quote {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.8;
    font-style: italic;
    font-weight: 400;
    color: #1F386B;
}

/* ========================================
   SKIP LINK (Accessibility)
   Visible only on keyboard focus
   ======================================== */
.bsb-skip-link {
    position: absolute;
    top: -100%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    background: #1F386B;
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 0 0 4px 4px;
    box-shadow: 0 4px 12px rgba(31, 56, 107, 0.3);
    transition: top 0.2s ease;
}

.bsb-skip-link:focus {
    top: 0;
    outline: 3px solid #F9A62D;
    outline-offset: 2px;
}

/* ========================================
   SEARCH OVERLAY & MOBILE MENU
   Override [hidden] when active via JS
   ======================================== */
.bsb-search-overlay[hidden] {
    display: none !important;
}

.bsb-search-overlay.active {
    display: flex !important;
}

.bsb-mobile-menu[hidden] {
    display: none !important;
}

.bsb-mobile-menu.active {
    display: block !important;
}

/* ========================================
   BSB SCROLL ANIMATIONS & EFFECTS CSS
   Applied to ALL Pages
   ======================================== */

/* ========================================
   SCROLL PROGRESS INDICATOR & BACK-TO-TOP
   ======================================== */

.bsb-scroll-progress-container {
    position: fixed;
    top: 0;
    right: 0;
    width: 10px;
    height: 100vh;
    background: rgba(31, 56, 107, 0.1);
    z-index: 9999;
    pointer-events: none;
}

.bsb-scroll-progress-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0;
    background: linear-gradient(
        to bottom,
        #F9A62D 0%,
        #F9A62D 50%,
        rgba(249, 166, 45, 0.7) 100%
    );
    transition: height 0.1s ease-out;
    box-shadow: 0 0 8px rgba(249, 166, 45, 0.5);
}

.bsb-back-to-top-new {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 50px;
    height: 50px;
    background: #F9A62D;
    color: #FFFFFF;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px) scale(0.8);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 12px rgba(249, 166, 45, 0.3);
    z-index: 9998;
    pointer-events: auto;
}

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

.bsb-back-to-top-new:hover {
    background: #1F386B;
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 6px 20px rgba(31, 56, 107, 0.4);
}

.bsb-back-to-top-new:active {
    transform: translateY(-2px) scale(0.98);
}

.bsb-back-to-top-new svg {
    width: 24px;
    height: 24px;
}

/* Hide on mobile for cleaner experience */
@media (max-width: 768px) {
    .bsb-back-to-top-new {
        width: 44px;
        height: 44px;
        bottom: 1rem;
        right: 1rem;
    }
    
    .bsb-scroll-progress-container {
        width: 3px;
    }
}

/* ========================================
   SECTION ANIMATIONS
   Fade in & slide up
   ======================================== */

.bsb-section-animate {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-section-animate.bsb-section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
    .bsb-section-animate {
        transform: none;
        transition: opacity 0.4s ease;
    }
}

/* ========================================
   STAGGERED CARD ANIMATIONS
   ======================================== */

.bsb-quote-card,
.bsb-logo-card-v2,
.bsb-attorney-card,
.bsb-practice-card,
.bsb-testimonial-card,
.bsb-blog-card,
.bsb-service-card,
.bsb-tech-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-quote-card.bsb-stagger-visible,
.bsb-logo-card-v2.bsb-stagger-visible,
.bsb-attorney-card.bsb-stagger-visible,
.bsb-practice-card.bsb-stagger-visible,
.bsb-testimonial-card.bsb-stagger-visible,
.bsb-blog-card.bsb-stagger-visible,
.bsb-service-card.bsb-stagger-visible,
.bsb-tech-card.bsb-stagger-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   HERO PARALLAX SETUP
   ======================================== */

.bsb-home-hero,
.bsb-page-hero {
    position: relative;
    overflow: hidden;
}

.bsb-hero-image {
    will-change: transform;
    transition: transform 0.1s ease-out;
}

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
    .bsb-hero-image {
        will-change: auto;
        transform: none !important;
    }
}

/* ========================================
   CTA SECTION ANIMATIONS
   ======================================== */

.bsb-final-cta-section-v2,
.bsb-cta-section,
.bsb-contact-cta {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-final-cta-section-v2.bsb-cta-visible,
.bsb-cta-section.bsb-cta-visible,
.bsb-contact-cta.bsb-cta-visible {
    opacity: 1;
    transform: scale(1);
}

/* ========================================
   CONTENT FADE-IN ANIMATIONS
   ======================================== */

.bsb-fade-in {
    opacity: 0;
    transform: translateY(25px);
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-fade-in.bsb-fade-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Delay variations for multiple fade-in elements */
.bsb-fade-in:nth-child(1) { transition-delay: 0s; }
.bsb-fade-in:nth-child(2) { transition-delay: 0.1s; }
.bsb-fade-in:nth-child(3) { transition-delay: 0.2s; }
.bsb-fade-in:nth-child(4) { transition-delay: 0.3s; }

/* ========================================
   UNIFIED BUTTON SYSTEM
   Single source of truth for all button styles
   ======================================== */

/* Base Button Styles - Shared by all button types */
.bsb-button-primary,
.bsb-button-secondary,
.bsb-button-practice {
    /* Display & Layout */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    
    /* Sizing */
    padding: 1rem 2rem;
    
    /* Typography */
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    text-decoration: none;
    text-align: center;
    
    /* Borders & Radius */
    border-radius: 6px;
    border: 2px solid transparent;
    
    /* Transitions */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* Misc */
    cursor: pointer;
    position: relative;
    overflow: hidden;
    z-index: 1;
}

/* Primary Button - Orange with white text */
.bsb-button-primary {
    background: #e89820;
    color: #1F386B;
    border-color: #F9A62D;
}

.bsb-button-primary:hover {
    background: #F9A62D;
    box-shadow: 0 6px 20px rgba(249, 166, 45, 0.4);
}

.bsb-button-primary:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(249, 166, 45, 0.3);
}

/* Secondary Button - Transparent with white border */
.bsb-button-secondary {
    background:  rgba(31, 56, 107, 1.0);
    color: #FFFFFF;
}

.bsb-button-secondary:hover {
    background:  rgba(31, 56, 107, 0.8);
    color:#FFF;
      box-shadow: 0 6px 20px rgba(31, 56, 10, 0.4);
}

.bsb-button-secondary:active {
    transform: translateY(0);
}

/* Practice Button - Navy with light border */
.bsb-button-practice {
    background: #1F386B;
    color: #FFFFFF;
    border-color: #1F386B;
}

.bsb-button-practice:hover {
    background: #2a4a88;
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(31, 56, 107, 0.3);
}

.bsb-button-practice:active {
    transform: translateY(0);
}

/* Button Size Variations */
.bsb-button-small {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
}

.bsb-button-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.15rem;
}

/* Button Width Variations */
.bsb-button-full-width {
    width: 100%;
    display: flex;
}

.bsb-button-auto-width {
    width: auto;
}

/* Icon Support */
.bsb-button-primary svg,
.bsb-button-secondary svg,
.bsb-button-practice svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* Disabled State */
.bsb-button-primary:disabled,
.bsb-button-secondary:disabled,
.bsb-button-practice:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Loading State */
.bsb-button-loading {
    pointer-events: none;
    position: relative;
    color: transparent !important;
}

.bsb-button-loading::after {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    top: 50%;
    left: 50%;
    margin-left: -8px;
    margin-top: -8px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #FFFFFF;
    animation: bsb-button-spin 0.6s linear infinite;
}

@keyframes bsb-button-spin {
    to { transform: rotate(360deg); }
}

/* Focus States (Accessibility) */
.bsb-button-primary:focus-visible,
.bsb-button-secondary:focus-visible,
.bsb-button-practice:focus-visible {
    outline: 3px solid #F9A62D;
    outline-offset: 3px;
}

/* Responsive Adjustments */
@media (max-width: 768px) {
    .bsb-button-primary,
    .bsb-button-secondary,
    .bsb-button-practice {
        width: 100%;
        text-align: center;
        justify-content: center;
    }
    
    /* Override for inline button groups */
    .bsb-hero-cta .bsb-button-primary,
    .bsb-hero-cta .bsb-button-secondary,
    .bsb-cta-buttons .bsb-button-primary,
    .bsb-cta-buttons .bsb-button-secondary {
        width: 100%;
    }
}

/* Mobile - smaller padding on tiny screens */
@media (max-width: 480px) {
    .bsb-button-primary,
    .bsb-button-secondary,
    .bsb-button-practice {
        padding: 0.875rem 1.5rem;
        font-size: 1rem;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .bsb-button-primary,
    .bsb-button-secondary,
    .bsb-button-practice {
        border-width: 3px;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .bsb-button-primary,
    .bsb-button-secondary,
    .bsb-button-practice {
        transition: none;
    }
    
    .bsb-button-primary:hover,
    .bsb-button-secondary:hover,
    .bsb-button-practice:hover {
        transform: none;
    }
}

/* ========================================
   SPECIAL CONTEXT OVERRIDES
   For buttons in specific page sections
   ======================================== */

/* About CTA Section - Primary button with navy text on white background */
.bsb-about-cta .bsb-button-primary {
    background: #F9A62D;
    color: #1F386B;
    border-color: #F9A62D;
}

.bsb-about-cta .bsb-button-primary:hover {
    background: #1F386B;
    color: #FFFFFF;
    border-color: #1F386B;
}

/* Practice Area Directory - Uses CSS variables for theming */
.bsb-pa-dir-hero .bsb-button-primary,
.bsb-pa-cta-section .bsb-button-primary {
    background: var(--pa-dir-gold, #F9A62D);
    color: var(--pa-dir-navy, #1F386B);
}

.bsb-pa-dir-hero .bsb-button-primary:hover,
.bsb-pa-cta-section .bsb-button-primary:hover {
    background: var(--pa-dir-navy, #1F386B);
    color: var(--pa-dir-white, #FFFFFF);
}

/* Final CTA Section - Enhanced animation effect */
.bsb-final-cta-section-v2 .bsb-button-primary::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: #1F386B;
    transition: left 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: -1;
}

.bsb-final-cta-section-v2 .bsb-button-primary:hover::before {
    left: 0;
}

.bsb-final-cta-section-v2 .bsb-button-primary:hover {
    color: #FFFFFF;
}

/* ========================================
   LIST ITEM ANIMATIONS
   ======================================== */

.bsb-animate-list li {
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-animate-list li.bsb-list-visible {
    opacity: 1;
    transform: translateX(0);
}

/* ========================================
   SMOOTH SCROLL BEHAVIOR
   ======================================== */

html {
    scroll-behavior: smooth;
}

/* Disable for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ========================================
   PERFORMANCE OPTIMIZATIONS
   ======================================== */

/* Use GPU acceleration for animated elements */
.bsb-section-animate,
.bsb-quote-card,
.bsb-logo-card-v2,
.bsb-attorney-card,
.bsb-practice-card,
.bsb-testimonial-card,
.bsb-blog-card,
.bsb-service-card,
.bsb-tech-card,
.bsb-fade-in,
.bsb-animate-list li,
.bsb-final-cta-section-v2,
.bsb-cta-section,
.bsb-contact-cta {
    backface-visibility: hidden;
    perspective: 1000px;
}

/* ========================================
   UTILITY CLASSES FOR MANUAL APPLICATION
   ======================================== */

/* Add these classes to elements you want to animate */

.bsb-slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.bsb-slide-in-left.bsb-fade-visible {
    opacity: 1;
    transform: translateX(0);
}

.bsb-slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.bsb-slide-in-right.bsb-fade-visible {
    opacity: 1;
    transform: translateX(0);
}

.bsb-zoom-in {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.bsb-zoom-in.bsb-fade-visible {
    opacity: 1;
    transform: scale(1);
}

.bsb-rotate-in {
    opacity: 0;
    transform: rotate(-5deg) scale(0.9);
    transition: opacity 0.7s ease, transform 0.7s ease;
}

.bsb-rotate-in.bsb-fade-visible {
    opacity: 1;
    transform: rotate(0) scale(1);
}

/* ========================================
   MOBILE OPTIMIZATION
   Simplify animations on smaller screens
   ======================================== */

@media (max-width: 768px) {
    /* Reduce animation complexity on mobile */
    .bsb-section-animate,
    .bsb-fade-in,
    .bsb-animate-list li {
        transform: translateY(15px);
    }
    
    /* Faster animations on mobile */
    .bsb-section-animate,
    .bsb-quote-card,
    .bsb-logo-card-v2,
    .bsb-attorney-card,
    .bsb-practice-card,
    .bsb-testimonial-card,
    .bsb-blog-card,
    .bsb-service-card,
    .bsb-tech-card,
    .bsb-fade-in {
        transition-duration: 0.5s;
    }
}

/* ========================================
   PRINT STYLES
   Remove animations for print
   ======================================== */

@media print {
    .bsb-scroll-progress-container,
    .bsb-back-to-top-new {
        display: none !important;
    }
    
    .bsb-section-animate,
    .bsb-quote-card,
    .bsb-logo-card-v2,
    .bsb-attorney-card,
    .bsb-practice-card,
    .bsb-testimonial-card,
    .bsb-blog-card,
    .bsb-service-card,
    .bsb-tech-card,
    .bsb-fade-in,
    .bsb-animate-list li {
        opacity: 1 !important;
        transform: none !important;
    }
}


/* ========================================
   4. GLOBAL UTILITIES
======================================== */

.bsb-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bsb-container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}



.bsb-section-small {
    padding: 3rem 0;
}

/* Fade-in animation utility */
.bsb-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bsb-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger children animation */
.bsb-stagger-children > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.bsb-stagger-children > *.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   5. HEADER & NAVIGATION
======================================== */

/* Top Bar (Phone & Time) */
.bsb-top-bar {
   background: rgba(31, 56, 107, 0.4);
    color: #FFFFFF;
    padding: 0;
    font-size: 0.875rem;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1001;
    transition: background 0.4s ease;
}

.bsb-top-bar.scrolled {
    background: rgba(31, 56, 107, 1.0);
}

.bsb-top-bar-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0;
}

.bsb-phone-link,
.bsb-time-display {
    color: #FFFFFF;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    text-decoration: none;
    transition: all 0.3s ease;
    padding: 0.5rem 1.5rem;
}

/* Different background colors for phone and time */
.bsb-phone-link {
    background: rgba(249, 166, 45, 1.0);
    color: #1F386B;
}

.bsb-time-display {
    background: #F8C06E;
    color: #1F386B;
}

/* On scroll - make backgrounds more opaque */
.bsb-top-bar.scrolled .bsb-phone-link {
    background: rgba(249, 166, 45, 1.0);
}

.bsb-top-bar.scrolled .bsb-time-display {
    background: #F8C06E;
}

.bsb-phone-link:hover {
    background: rgba(249, 166, 45, 0.5);
}

.bsb-phone-link i,
.bsb-time-display i {
    font-size: 1rem;
}

/* Main Header */
.bsb-header {
    position: fixed;
    top: 0px;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(31, 56, 107, 0.0);
    padding: 0.5rem 0 0.5rem      0;
    transition: all 0.4s ease;
}

.bsb-header.scrolled {
    background: rgba(31, 56, 107, 1.0);
    padding: 0.75rem 0;
    box-shadow: 0 2px 12px rgba(31, 56, 107, 0.3);
}

.bsb-header-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Logo - same logo on both states */
.bsb-header .bsb-logo {
    max-width: 360px;
    height: auto;
    transition: all 0.3s ease;
}

.bsb-header.scrolled .bsb-logo {
    max-width: 240px;
}

 /* ========================================
   5. HEADER & NAVIGATION - CONSOLIDATED
======================================== */

/* Navigation Wrapper */
.bsb-nav-wrapper {
    display: flex;
    align-items: center;
    gap: 1.5rem;
}

/* Main Navigation Container */
.bsb-nav-main {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
}

/* Navigation List */
.bsb-nav-list {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Navigation Items */
.bsb-nav-item {
    position: relative;
    list-style: none;
}

/* Navigation Links - Base Styles */
.bsb-nav-item > a {
    color: #FFFFFF;
    font-weight: 400;
    font-size: 15px;
    text-decoration: none;
    padding: 0.75rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    transition: all 0.3s ease;
    position: relative;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Keep navigation links WHITE on scroll */
.bsb-header.scrolled .bsb-nav-item > a {
    color: #FFFFFF;
}

/* Hover State - Orange */
.bsb-nav-item > a:hover {
    color: #F9A62D;
}

/* Underline Animation for All Links */
.bsb-nav-item > a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #F9A62D;
    transition: width 0.3s ease;
}

.bsb-nav-item > a:hover::after {
    width: 80%;
}

/* Dropdown Icon */
.bsb-dropdown-icon {
    font-size: 0.7em;
    transition: transform 0.3s ease;
}

.bsb-nav-item.has-dropdown:hover .bsb-dropdown-icon,
.bsb-nav-item.has-dropdown.active .bsb-dropdown-icon {
    transform: rotate(180deg);
}

/* ========================================
   DROPDOWN MENU - COMPLETE
======================================== */

/* Dropdown Container */
.bsb-dropdown {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-10px);
    background: #FFFFFF;
    min-width: 220px;
    padding: 0.5rem 0;
    border-radius: 0 0 8px 8px;
    box-shadow: 0 8px 24px rgba(31, 56, 107, 0.15);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    list-style: none;
    margin: 0;
    z-index: 1000;
}

/* Show Dropdown on Hover/Active */
.bsb-nav-item.has-dropdown:hover .bsb-dropdown,
.bsb-nav-item.has-dropdown.active .bsb-dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Dropdown Items */
.bsb-dropdown li {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Dropdown Links - ALWAYS Navy Blue */
.bsb-dropdown a {
    display: block;
    padding: 0.75rem 1.5rem;
    color: #1F386B !important;
    font-size: 14px;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

/* Dropdown Links Hover - Navy with Orange Accent */
.bsb-dropdown a:hover {
    background: rgba(249, 166, 45, 0.08);
    border-left-color: #F9A62D;
    padding-left: 1.75rem;
    color: #1F386B !important;
}

/* Ensure Dropdown Links Stay Navy on Scrolled Header */
.bsb-header.scrolled .bsb-dropdown a {
    color: #1F386B !important;
}

.bsb-header.scrolled .bsb-dropdown a:hover {
    color: #1F386B !important;
    background: rgba(249, 166, 45, 0.08);
    border-left-color: #F9A62D;
}

/* Remove Underline Animation from Dropdown Links */
.bsb-dropdown a::after {
    display: none !important;
}

/* Active Dropdown Item - Current Page */
.bsb-dropdown .current-menu-item > a,
.bsb-dropdown .current_page_item > a {
    background: rgba(249, 166, 45, 0.12);
    border-left-color: #F9A62D;
    color: #1F386B !important;
    font-weight: 600;
}

/* Active Dropdown Item on Scrolled Header */
.bsb-header.scrolled .bsb-dropdown .current-menu-item > a,
.bsb-header.scrolled .bsb-dropdown .current_page_item > a {
    color: #1F386B !important;
    background: rgba(249, 166, 45, 0.12);
    border-left-color: #F9A62D;
}

/* ========================================
   CONTACT LINK - SPECIAL STYLING
======================================== */

.bsb-nav-cta {
    background: none;
    color: #FFFFFF !important;
    padding: 0.75rem 1rem;
    border: none;
    border-radius: 0;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    position: relative;
}

/* Contact Stays WHITE on Scroll */
.bsb-header.scrolled .bsb-nav-cta {
    color: #FFFFFF !important;
}

/* Contact Hover - Orange */
.bsb-nav-cta:hover {
    transform: none;
    box-shadow: none;
    color: #F9A62D !important;
}

/* Contact Underline Animation */
.bsb-nav-cta::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 2px;
    background: #F9A62D;
    transition: width 0.3s ease;
}

.bsb-nav-cta:hover::after {
    width: 80%;
}

/* ========================================
   ACTIVE/CURRENT PAGE INDICATORS
======================================== */

/* Current Page - Exact Match (Top-Level Links) */
.bsb-nav-item.current-menu-item > a,
.bsb-nav-item.current_page_item > a {
    color: #F9A62D !important;
}

/* Current Page - Stay Orange on Scroll */
.bsb-header.scrolled .bsb-nav-item.current-menu-item > a,
.bsb-header.scrolled .bsb-nav-item.current_page_item > a {
    color: #F9A62D !important;
}

/* Current Page - Underline Always Visible */
.bsb-nav-item.current-menu-item > a::after,
.bsb-nav-item.current_page_item > a::after {
    width: 80%;
    background: #F9A62D;
}

/* Current Page Ancestor (Dropdown Parents) */
.bsb-nav-item.current-menu-ancestor > a,
.bsb-nav-item.current-page-ancestor > a {
    color: #F9A62D !important;
}

.bsb-header.scrolled .bsb-nav-item.current-menu-ancestor > a,
.bsb-header.scrolled .bsb-nav-item.current-page-ancestor > a {
    color: #F9A62D !important;
}

.bsb-nav-item.current-menu-ancestor > a::after,
.bsb-nav-item.current-page-ancestor > a::after {
    width: 80%;
}

/* ========================================
   SEARCH BUTTON
======================================== */

.bsb-search-toggle {
    background: rgba(249, 166, 45, 0.0);
    border: 0px solid rgba(249, 166, 45, 0.4);
    color: #FFFFFF;
    font-size: 1.2rem;
    cursor: pointer;
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bsb-search-toggle:hover {
    color: #F9A62D;
    transform: translateY(-2px);
}

/* ========================================
   SEARCH OVERLAY
======================================== */

.bsb-search-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(31, 56, 107, 0.98);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

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

.bsb-search-overlay-content {
    width: 90%;
    max-width: 800px;
    position: relative;
}

.bsb-search-close {
    position: absolute;
    top: -60px;
    right: 0;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 2.5rem;
    cursor: pointer;
    transition: color 0.3s ease;
    line-height: 1;
}

.bsb-search-close:hover {
    color: #F9A62D;
}

.bsb-search-form {
    position: relative;
}

.bsb-search-form input[type="search"] {
    width: 100%;
    padding: 1.5rem 5rem 1.5rem 2rem;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    border: none;
    border-bottom: 3px solid #F9A62D;
    background: transparent;
    color: #FFFFFF;
    outline: none;
}

.bsb-search-form input[type="search"]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.bsb-search-form input[type="search"]::placeholder {
    color: rgba(255, 255, 255, 0.6);
}

.bsb-search-form button[type="submit"] {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: #F9A62D;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    width: 60px;
    height: 60px;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.bsb-search-form button[type="submit"]:hover {
    background: #c49a67;
    transform: translateY(-50%) scale(1.05);
}

/* ========================================
   MOBILE MENU TOGGLE
======================================== */

.bsb-mobile-menu-toggle {
    display: none;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
}

/* Hamburger icon lines */
.bsb-hamburger-line {
    display: block;
    width: 24px;
    height: 2px;
    background: #FFFFFF;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.bsb-hamburger-line + .bsb-hamburger-line {
    margin-top: 5px;
}

.bsb-header.scrolled .bsb-hamburger-line {
    background: #1F386B;
}

.bsb-header.scrolled .bsb-mobile-menu-toggle {
    color: #FFFFFF;
}



/* ========================================
   MOBILE MENU
======================================== */

.bsb-mobile-menu {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    max-width: 400px;
    height: 100vh;
    background: #1F386B;
    z-index: 9998;
    padding: 5rem 2rem 2rem;
    transition: right 0.4s ease;
    overflow-y: auto;
}

.bsb-mobile-menu.active {
    right: 0;
}

/* Mobile Menu Close Button */
.bsb-mobile-menu-close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    background: none;
    border: none;
    color: #FFFFFF;
    font-size: 2rem;
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 10000;
}

.bsb-mobile-menu-close:hover {
    color: #F9A62D;
    transform: rotate(90deg);
}

/* Mobile Navigation List */
.bsb-mobile-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsb-mobile-nav-list > li {
    list-style: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.bsb-mobile-nav-list > li > a {
    color: #FFFFFF;
    font-size: 1.1rem;
    padding: 1rem 1.5rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.3s ease;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bsb-mobile-nav-list > li > a:hover {
    background: rgba(249, 166, 45, 0.1);
    padding-left: 2rem;
}

/* Mobile Submenu */
.bsb-mobile-submenu {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
    background: rgba(0, 0, 0, 0.2);
}

.bsb-mobile-has-children.active .bsb-mobile-submenu {
    max-height: 500px;
}

.bsb-mobile-submenu li {
    list-style: none;
}

.bsb-mobile-submenu a {
    display: block;
    padding: 0.875rem 1.5rem 0.875rem 2.5rem;
    color: #CFD2D3;
    font-size: 1rem;
    text-transform: none;
    letter-spacing: 0;
    transition: all 0.25s ease;
    border-left: 3px solid transparent;
}

.bsb-mobile-submenu a:hover {
    background: rgba(249, 166, 45, 0.1);
    border-left-color: #F9A62D;
    color: #FFFFFF;
    padding-left: 2.75rem;
}

/* Mobile Dropdown Icon Rotation */
.bsb-mobile-has-children > a i {
    transition: transform 0.3s ease;
}

.bsb-mobile-has-children.active > a i {
    transform: rotate(180deg);
}

/* Mobile Menu Overlay */
.bsb-mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(31, 56, 107, 0.5);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 9997;
    backdrop-filter: blur(2px);
}

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

/* ========================================
   MOBILE NAVIGATION ACTIVE STATES
======================================== */

/* Current Page in Mobile Menu */
.bsb-mobile-nav-list .current-menu-item > a,
.bsb-mobile-nav-list .current_page_item > a {
    color: #F9A62D;
    font-weight: 600;
    background: rgba(249, 166, 45, 0.1);
}

/* Current Parent in Mobile Menu */
.bsb-mobile-nav-list .current-menu-ancestor > a,
.bsb-mobile-nav-list .current-page-ancestor > a {
    color: #F9A62D;
}

/* Active Submenu Item in Mobile */
.bsb-mobile-submenu .current-menu-item > a,
.bsb-mobile-submenu .current_page_item > a {
    color: #FFFFFF;
    background: rgba(249, 166, 45, 0.15);
    border-left-color: #F9A62D;
    font-weight: 600;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
======================================== */

@media (max-width: 992px) {
    .bsb-nav-main {
        display: none;
    }
    
    .bsb-mobile-menu-toggle {
        display: block;
    }
}

@media (min-width: 993px) {
    .bsb-mobile-menu-toggle {
        display: none;
    }
    
    .bsb-mobile-menu,
    .bsb-mobile-overlay {
        display: none !important;
    }
}

/* ========================================
   CONTACT PROMPT SECTION
   Animated icons + Contact CTA link
   Replaces per-page CTA sections
   ======================================== */
.bsb-contact-prompt {
    background: #f7f8f9;
    padding: 4rem 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Subtle top gradient line */
.bsb-contact-prompt::before {
    content: '';
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 3px;
    background: linear-gradient(90deg, #F9A62D 0%, #97AAC6 100%);
    border-radius: 2px;
}

.bsb-contact-prompt-container {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5rem;
}

/* --- Animated Icon Cards --- */
.bsb-contact-prompt-icons {
    display: flex;
    justify-content: center;
    gap: 3rem;
}

.bsb-prompt-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #465666;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-prompt-icon-card:hover {
    color: #1F386B;
    transform: translateY(-4px);
}

.bsb-prompt-icon-circle {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F9A62D 0%, #c99d67 100%);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(217, 173, 119, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-prompt-icon-card:hover .bsb-prompt-icon-circle {
    transform: scale(1.1) rotateY(360deg);
    box-shadow: 0 10px 30px rgba(217, 173, 119, 0.4);
}

.bsb-prompt-icon-label {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #465666;
    transition: color 0.3s ease;
}

.bsb-prompt-icon-card:hover .bsb-prompt-icon-label {
    color: #F9A62D;
}

/* --- Contact CTA Link with Animated Line & Arrow --- */
.bsb-prompt-cta-link {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #1F386B;
    font-size: 1.15rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    position: relative;
    padding: 0.5rem 0;
    transition: color 0.3s ease;
}

.bsb-prompt-cta-link:hover {
    color: #F9A62D;
}

/* Animated underline */
.bsb-prompt-cta-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: #F9A62D;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-prompt-cta-link:hover .bsb-prompt-cta-line {
    width: 100%;
}

/* Arrow animation */
.bsb-prompt-cta-arrow {
    display: flex;
    align-items: center;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-prompt-cta-arrow svg {
    width: 20px;
    height: 20px;
}

.bsb-prompt-cta-link:hover .bsb-prompt-cta-arrow {
    transform: translateX(6px);
}


/* ========================================
   FOOTER - LIGHT BACKGROUND REDESIGN
   ======================================== */
.bsb-footer {
    background: #FFFFFF;
    color: #465666;
    padding: 0;
    position: relative;
}



.bsb-footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* ========================================
   FOOTER - ANIMATED CONTACT ICONS
   Centered above footer content grid
   ======================================== */
.bsb-footer-icons {
    display: flex;
    justify-content: center;
    gap: 3rem;
    padding: 3rem 0;
    border-top: 1px solid #D3E0F9;
}

.bsb-footer-icon-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: #465666;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-footer-icon-card:hover {
    color: #1F386B;
    transform: translateY(-4px);
}

.bsb-footer-icon-circle {
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F9A62D 0%, #F9A62D 100%);
    border-radius: 50%;
    color: #FFFFFF;
    font-size: 1.5rem;
    box-shadow: 0 6px 20px rgba(249, 166, 45, 0.25);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-footer-icon-card:hover .bsb-footer-icon-circle {
    transform: scale(1.1) rotateY(360deg);
    box-shadow: 0 10px 30px rgba(249, 166, 45, 0.4);
}

.bsb-footer-icon-label {
    font-size: 0.85rem;
    font-weight: 500;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: #1F386B;
    transition: color 0.3s ease;
}

.bsb-footer-icon-card:hover .bsb-footer-icon-label {
    color: #F9A62D;
}

/* --- Footer Main Grid --- */
.bsb-footer-main {
    display: grid;
    grid-template-columns: 1.4fr 0.8fr 0.8fr 1fr;
    gap: 3rem;
    padding: 4rem 0 3rem;
    align-items: start;
}

/* --- Footer Columns --- */
.bsb-footer-column {
    min-width: 0;
}

/* Column 1: Logo + Description */
.bsb-footer-logo {
    max-width: 260px;
    height: auto;
    margin-bottom: 1.25rem;
}

.bsb-footer-tagline {
    color: #1F386B;
    font-size: 0.92rem;
    line-height: 1.7;
    margin: 0;
}

/* Social icons (placeholder for future use) */
.bsb-footer-social {
    display: flex;
    gap: 1rem;
    margin-top: 1.5rem;
}

.bsb-footer-social a {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CFD2D3;
    border-radius: 50%;
    color: #465666;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.bsb-footer-social a:hover {
    background: #F9A62D;
    border-color: #F9A62D;
    color: #FFFFFF;
}

/* Column Headings */
.bsb-footer-heading {
    font-size: 1rem;
    color: #1F386B;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Small decorative line under headings (like SBH Legal) */
.bsb-footer-heading-line {
    width: 30px;
    height: 2px;
    background: #F9A62D;
    margin-bottom: 1.25rem;
}

/* Navigation Lists */
.bsb-footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsb-footer-menu li {
    margin-bottom: 0.6rem;
}

.bsb-footer-menu a {
    color: #1F386B;
    text-decoration: none;
    font-size: 0.92rem;
    font-weight: 400;
    transition: all 0.3s ease;
    position: relative;
    display: inline-block;
}

.bsb-footer-menu a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #F9A62D;
    transition: width 0.3s ease;
}

.bsb-footer-menu a:hover {
    color: #F9A62D;
}

.bsb-footer-menu a:hover::after {
    width: 100%;
}

/* Column 4: Office / Address */
.bsb-footer-address {
    font-style: normal;
    font-size: 0.92rem;
    line-height: 1.7;
    color: #1F386B;
}

.bsb-footer-address p {
    margin-bottom: 0.75rem;
}

.bsb-footer-phone,
.bsb-footer-email {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.bsb-footer-phone i,
.bsb-footer-email i {
    color: #F9A62D;
    font-size: 0.85rem;
    width: 16px;
    text-align: center;
}

.bsb-footer-phone a,
.bsb-footer-email a {
    color: #1F386B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-footer-phone a:hover,
.bsb-footer-email a:hover {
    color: #F9A62D;
}

/* --- Back to Top --- */
.bsb-footer-back-top {
    text-align: center;
    padding: 1.5rem 0;
}

.bsb-footer-back-top-link {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: 0.35rem;
    color: #F9A62D;
    text-decoration: none;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    transition: all 0.3s ease;
}

.bsb-footer-back-top-link i {
    font-size: 0.75rem;
    transition: transform 0.3s ease;
}

.bsb-footer-back-top-link:hover {
    color: #1F386B;
}

.bsb-footer-back-top-link:hover i {
    transform: translateY(-3px);
}

/* --- Footer Bottom Bar --- */
.bsb-footer-bottom {
    border-top: 1px solid #e8eaed;
    padding: 1.5rem 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.82rem;
    color: #8a929b;
}

.bsb-footer-copyright {
    margin: 0;
}

.bsb-footer-credit {
    margin: 0;
}

.bsb-footer-credit a {
    color: #8a929b;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-footer-credit a:hover {
    color: #F9A62D;
}


/* ========================================
   FOOTER - RESPONSIVE / MOBILE
   ======================================== */
@media (max-width: 1024px) {
    .bsb-footer-main {
        grid-template-columns: 1fr 1fr;
        gap: 2.5rem;
    }
    
    .bsb-footer-about {
        grid-column: 1 / -1;
        text-align: center;
    }
    
    .bsb-footer-logo {
        margin: 0 auto 1.25rem;
    }
    
    .bsb-footer-tagline {
        max-width: 500px;
        margin: 0 auto;
    }
    
    .bsb-footer-social {
        justify-content: center;
    }
}

@media (max-width: 768px) {
    /* Contact Prompt */
    .bsb-contact-prompt {
        padding: 3rem 0;
    }
    
    .bsb-contact-prompt-icons {
        gap: 2rem;
    }
    
    .bsb-prompt-icon-circle {
        width: 60px;
        height: 60px;
        font-size: 1.25rem;
    }
    
    .bsb-prompt-cta-link {
        font-size: 1rem;
    }
    
    /* Footer */
    .bsb-footer-main {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 0 2rem;
        text-align: center;
    }
    
    .bsb-footer-about {
        grid-column: auto;
    }
    
    .bsb-footer-logo {
        margin: 0 auto 1.25rem;
    }
    
    .bsb-footer-tagline {
        margin: 0 auto;
    }
    
    .bsb-footer-heading {
        text-align: center;
    }
    
    .bsb-footer-heading-line {
        margin: 0 auto 1.25rem;
    }
    
    .bsb-footer-menu {
        text-align: center;
    }
    
    .bsb-footer-address {
        text-align: center;
    }
    
    .bsb-footer-phone,
    .bsb-footer-email {
        justify-content: center;
    }
    
    .bsb-footer-social {
        justify-content: center;
    }
    
    /* Bottom bar stacks on mobile */
    .bsb-footer-bottom {
        flex-direction: column;
        gap: 0.5rem;
        text-align: center;
    }
}

@media (max-width: 480px) {
    .bsb-contact-prompt-icons {
        gap: 1.5rem;
    }
    
    .bsb-prompt-icon-circle {
        width: 52px;
        height: 52px;
        font-size: 1.1rem;
    }
    
    .bsb-prompt-icon-label {
        font-size: 0.75rem;
    }
}


/* ========================================
   8. RESPONSIVE BREAKPOINTS
======================================== */

@media (max-width: 992px) {
    .bsb-nav-main,
    .bsb-nav-cta,
    .bsb-search-toggle {
        display: none;
    }
    
    .bsb-mobile-menu-toggle {
        display: block;
    }
}

@media (max-width: 768px) {
    /* Hide top bar on mobile */
    .bsb-top-bar {
        display: none;
    }
    
    /* Adjust header for mobile without top bar */
    .bsb-header {
        top: 0;
    }
    
    .bsb-header .bsb-logo {
        max-width: 200px;
    }
    
    .bsb-header.scrolled .bsb-logo {
        max-width: 180px;
    }
    

    
    .bsb-hero-content {
        padding: 2rem 1.5rem;
    }
    

    .bsb-hero-cta {
        flex-direction: column;
    }
    



    
    .bsb-top-bar-container {
        justify-content: center;
        gap: 0;
    }
    
    .bsb-phone-link,
    .bsb-time-display {
        font-size: 0.75rem;
        padding: 0.5rem 1rem;
    }
    
    /* Mobile fixed CTA - center at bottom */
    .bsb-fixed-cta {
        left: 50%;
        transform: translateX(-50%);
        right: auto;
        bottom: 1rem;
        width: auto;
        padding: 0.75rem 1.5rem;
        border-radius: 50px;
    }
}









	
/* ========================================
   BEESON SKINNER BEVERLY LLP
   Homepage Sections - WITH B WATERMARKS
   ======================================== */

/* ========================================
   B WATERMARK ELEMENTS
   ======================================== */

/* 1. HERO SECTION - Large white B (upper right) */
.bsb-hero-watermark {
    position: absolute;
    bottom: 0;
    right: -5%;
    z-index: 2;
    opacity: 0;
    pointer-events: none;
    animation: fadeInWatermark 1.5s ease-out 1s forwards;
}

.bsb-hero-watermark img {
    width: 650px;
    height: auto;
    opacity: 0.12;
}

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

/* 2. EXPERIENCED SPECIALISTS - Navy B behind heading */
.bsb-specialists-watermark {
    position: absolute;
    top: 50%;
    left: -20%;
    transform: translateY(-50%);
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.bsb-specialists-watermark img {
    width: 350px;
    height: auto;
}

/* 3. WHAT WE CAN DO - Orange B behind heading */
.bsb-services-watermark {
    position: absolute;
    top: 50%;
    right: -25%;
    transform: translateY(-50%);
    opacity: 0.0;
    pointer-events: none;
    z-index: 0;
}

.bsb-services-watermark img {
    width: 380px;
    height: auto;
}

/* 4. TESTIMONIAL CARDS - Subtle orange B */
.bsb-quote-card {
    position: relative;
    overflow: hidden;
}

.bsb-quote-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    pointer-events: none;
    z-index: 0;
    transition: opacity 0.4s ease;
}

.bsb-quote-card:hover .bsb-quote-watermark {
    opacity: 0.08;
}

.bsb-quote-watermark img {
    width: 200px;
    height: auto;
}

/* Make sure content is above watermark */
.bsb-quote-text,
.bsb-quote-attribution {
    position: relative;
    z-index: 1;
}

/* 5. FINAL CTA - Navy B watermark */
.bsb-cta-watermark {
    position: absolute;
    bottom: 10%;
    right: 5%;
    opacity: 0.04;
    pointer-events: none;
    z-index: 0;
}

.bsb-cta-watermark img {
    width: 300px;
    height: auto;
}

/* 6. FOOTER - Subtle navy B in corner */
.bsb-footer-watermark {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.bsb-footer-watermark img {
    width: 250px;
    height: auto;
}

/* Position relative for watermark containers */
.bsb-grid-sidebar,
.bsb-final-cta-section {
    position: relative;
}

/* ========================================
   ORIGINAL STYLES (keeping all existing styles)
   ======================================== */

/* Typography */
.bsb-lead {
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.bsb-intro-text {
    margin-bottom: 2rem;
}

/* Accent text — slide in from right on scroll */
  .bsb-accent-text {
    display: inline-block;
    opacity: 0 !important;
    transform: translateX(30px) !important;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.bsb-accent-text.bsb-in-view {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .bsb-accent-text {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* Make the section label an inline flex column sized to its content */
.bsb-section-label {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
}

/* Hide the br since flexbox handles the line break */
.bsb-section-label br {
    display: none;
}

/* Accent text — slide in, settle right-aligned to parent width */
.bsb-accent-text-left {
    display: inline-block;
    align-self: flex-end;
    opacity: 0 !important;
    transform: translateX(30px) !important;
    transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.4, 0, 0.2, 1) !important;
}
.bsb-accent-text-left.bsb-in-view {
    opacity: 1 !important;
    transform: translateX(0) !important;
}

@media (prefers-reduced-motion: reduce) {
    .bsb-accent-text-left {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}


/* Layout Containers */
.bsb-container {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 3rem;
}

.bsb-container-wide {
    max-width: 1300px;
    margin: 0 auto;
    padding: 0 3rem;
}

.bsb-container-narrow {
    max-width: 800px;
    margin: 0 auto;
    padding: 0 3rem;
}

.bsb-section {
    padding: 6rem 0;
}

/* Animated Vertical Pipe Dividers */
.bsb-section-with-pipe {
    position: relative;
}

.bsb-grid-pipe-divider {
    width: 2px;
    background: #F9A62D;
    height: 0;
    opacity: 0;
    transition: height 1.2s ease-out, opacity 1.2s ease-out;
    align-self: stretch;
}

.bsb-section-with-pipe.pipe-animated .bsb-grid-pipe-divider {
    height: 100%;
    opacity: 1;
}

.bsb-grid-asymmetric {
    display: grid;
    grid-template-columns: 1fr 2px 2fr;
    gap: 3rem;
    align-items: start;
}

.bsb-grid-asymmetric.reversed {
    grid-template-columns: 2fr 2px 1fr;
}

.bsb-grid-sidebar {
    position: relative;
    top: 95px;
}

.bsb-grid-sidebar.second-sidebar {
    position: relative;
    top: 75px;
}

.bsb-section-label {

    font-weight: 400;
    line-height: 1.2;
    color: #1F386B;
    margin: 0;
}

/* Mobile ordering fix */
@media (max-width: 1024px) {
    .bsb-grid-asymmetric,
    .bsb-grid-asymmetric.reversed {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .bsb-grid-pipe-divider {
        display: none;
    }
    
    .bsb-grid-sidebar {
        position: static;
        order: -1;
    }
    
    .bsb-grid-sidebar.second-sidebar {
    position: relative;
    top: 0px;
}
    
    .bsb-grid-main {
        order: 1;
    }
    
    /* Hide watermarks on mobile for cleaner look */
    .bsb-specialists-watermark,
    .bsb-services-watermark,
    .bsb-hero-watermark {
        display: none;
    }
}

/* ========================================
   HERO SECTION - SMOOTH CROSSFADE VERSION
   ======================================== */

.bsb-home-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 550px;
    display: flex;
    align-items: center;
    overflow: hidden;
}

.bsb-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Multiple hero images - all positioned absolutely with layering */
.bsb-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    background-position: center top;
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0; /* Default: hidden behind */
}

/* Active image is visible */
.bsb-hero-image.active {
    opacity: 1;
}

/* Ken Burns Effect - Subtle Zoom In */
.bsb-hero-image.active {
    opacity: 1;
    animation: kenBurnsZoomIn 6s ease-out forwards;
}

@keyframes kenBurnsZoomIn {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.25); /* Subtle 8% zoom */
    }
}

/* Accessibility: Disable for users who prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bsb-hero-image.active {
        animation: none;
    }
}

/* Overlay stays on top of all images */
.bsb-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to right,
        rgba(0,0,0, 0.50) 0%,
        rgba(0,0,0, 0.40) 50%,
        rgba(0,0,0, 0.30) 75%,
         rgba(0,0,0, 0.30) 100%
    );
    z-index: 10; /* Above all images */
}

/* Content stays on top */
.bsb-hero-content {
    position: relative;
    z-index: 20; /* Above overlay */
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items:  center ;
    text-align: center;
    gap: 1.5rem;
}

.bsb-hero-pipe-top,
.bsb-hero-pipe-bottom {
    width: 2px;
    background: #F9A62D;
    margin-left: 0;
}

.bsb-hero-pipe-top {
    height: 60px;
    opacity: 1;
}

.bsb-hero-pipe-bottom {
    height: 0;
    opacity: 0;
    animation: pipeDrop 1.2s ease-out 0.8s forwards;
}

@keyframes pipeDrop {
    to {
        height: 80px;
        opacity: 1;
    }
}

.bsb-hero-content-center {
    max-width: 1200;
}

.bsb-hero-headline {
    color: #FFFFFF;
   font-size: clamp(2rem, 4vw + 0.8rem, 3.2rem);
    font-weight: 400;
    line-height: 1.5;
    margin: 0;
}

.bsb-hero-headline-primary {
    display: block;
    margin-bottom: 0.05rem;
}

.bsb-hero-headline-primary span {color:#FFF;}

.bsb-hero-headline-secondary {display: block;}

.bsb-hero-headline-secondary span {color:#FFF;}

.firm-name {
    color: #F9A62D;
    font-size: clamp(1.1rem, 2vw, 1.35rem);
    font-weight: 400;
    margin-top: 1.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase
}

.firm-type {
    color: #CFD2D3;
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 400;
    margin-top: 0.25rem;
      text-transform: uppercase
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .bsb-home-hero {
        height: 50vh;
    }
    
    .bsb-hero-content {
        padding: 0 1.5rem;
    }
}




/* Buttons */
.bsb-btn-primary {
    display: inline-block;
    background: #F9A62D;
    color: #FFFFFF;
    padding: 0.875rem 2.25rem;
    border-radius: 3px;
    font-weight: 400;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.bsb-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(249, 166, 45, 0.35);
}

.bsb-btn-secondary {
    display: inline-block;
    background: transparent;
    color: #1F386B;
    padding: 0.875rem 2.25rem;
    border: 1.5px solid #1F386B;
    border-radius: 3px;
    font-weight: 600;
    font-size: 0.9375rem;
    letter-spacing: 0.01em;
    transition: all 0.3s ease;
    cursor: pointer;
}

.bsb-btn-secondary:hover {
    background: #1F386B;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Intro Section */
.bsb-intro-section {
    background: #FFFFFF;
    color:#1F386B;
}

.bsb-content-block p {
    margin-bottom: 1.5rem;
    
}

.bsb-content-block p:last-child {
    margin-bottom: 0;
}

/* Services Section */
.bsb-services-section {
     background: linear-gradient(to right, #F3F6FB 0%, #D4E0F9 100%);
    color:#1F386B;
}

.bsb-services-list {
    list-style: none;
    margin-top: 2rem;
    padding-left: 0;
}

.bsb-services-list li {
    position: relative;
    padding-left: 2rem;
    margin-bottom: 1rem;
    line-height: 1.7;
}

.bsb-services-list li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0.6em;
    width: 6px;
    height: 6px;
    background: #F9A62D;
    border-radius: 50%;
}

/* Quotes Section */
.bsb-quotes-section {
    background-color: #ffffff;
background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23f7f9fa' fill-opacity='1' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");
    padding: 6rem 0;
}

.bsb-section-heading {
    text-align: center;
    color: #1F386B;
    margin-bottom: 4rem;
    letter-spacing: -0.01em;
}

/* ========================================
   TESTIMONIALS - MINIMAL QUOTES (REFINED)
======================================== */
.bsb-testimonials-minimal {
  background: linear-gradient(to bottom, #D4E0F9 0%, #E5ECFB 50%, #fbfcfe 85%, #FFF 100%);
  color: #1F386B;
  padding: 5rem 0 0 0;
}

/* Logo mark styling */
.bsb-quotes-logo-mark {
  text-align: center;
  margin-bottom: 1.5rem;
}

.bsb-logo-mark-icon {
  width: 60px;
  height: auto;
  margin: 0 auto;
  opacity: 0.8;
}

/* Section header */
.bsb-section-header-minimal {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 4rem;
}

.bsb-section-label {
  font-size: clamp(1.8rem, 3vw, 2.5rem);
  font-weight: 400;
  color: #1F386B;
  margin-bottom: 1.5rem;
}

.bsb-accent-text, .bsb-accent-text-left {
  color: #F9A62D;
  font-style: italic;
}

.bsb-section-introduction {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  line-height: 1.7;
  padding: 0;
  margin: 0;
}

/* Refined heading with decorative lines */
.bsb-quotes-heading-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 3.5rem;
}

.bsb-quotes-decorative-line {
  flex: 1;
  max-width: 120px;
  height: 1px;
  background: linear-gradient(to right, transparent, #CFD2D3, transparent);
}

.bsb-quotes-heading {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
  font-weight: 400;
  color: #1F386B;
  margin: 0;
  white-space: nowrap;
}

/* ========================================
   QUOTES GRID (CLEAN 3 → 2 → 1 RESPONSIVE)
======================================== */
.bsb-quotes-grid-minimal {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 equal columns */
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
  font-style: italic;
  font-family: "Amiri", serif;
  align-items: stretch; /* helps equal-height cards */
}

/* Individual quote styling */
.bsb-quote-minimal {
  background: #ffffff;
  border: 1px solid #e8eef2;
  border-radius: 8px;
  padding: 2rem 1.75rem;
  margin: 0;
  position: relative;
  transition: all 0.3s ease;
  text-align: center;
  height: 100%; /* ensures consistent card height within grid */
}

.bsb-quote-minimal:hover {
  transform: translateY(0);
  box-shadow: 0 8px 24px rgba(31, 56, 107, 0.12);
  border-color: #F9A62D;
}

/* Decorative quote icon (large background quote) */
.bsb-quote-icon {
  font-size: 4rem;
  line-height: 1;
  color: #f9ddb4;
  font-family: Georgia, serif;
  margin-bottom: 0.5rem;
  opacity: 0.5;
}

/* Quote text with dynamic orange quotation marks */
.bsb-quote-minimal p {
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.6;
  color: #1F386B;
  font-style: italic;
  font-weight: 400;
  margin: 0;
  position: relative;
}

/* Opening quote mark - orange */
.bsb-quote-minimal p::before {
  content: '"';
  color: #F9A62D;
  font-style: normal;
  padding-right: 10px;
}

/* Closing quote mark - orange */
.bsb-quote-minimal p::after {
  content: '"';
  color: #F9A62D;
  font-style: normal;
  padding-left: 10px;
}

/* Optional CTA link */
.bsb-quotes-cta {
  text-align: center;
  margin-top: 3.5rem;
}

.bsb-text-link {
  color: #F9A62D;
  font-size: 1.1rem;
  text-decoration: none;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.bsb-text-link:hover {
  color: #1F386B;
}

.bsb-arrow {
  display: inline-block;
  transition: transform 0.3s ease;
}

.bsb-text-link:hover .bsb-arrow {
  transform: translateX(4px);
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

/* Tablet (992px and below) */
@media (max-width: 992px) {
  .bsb-testimonials-minimal {
    padding: 4.5rem 0;
  }

  .bsb-quotes-grid-minimal {
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 2 equal columns */
    gap: 1.5rem;
  }

  .bsb-quotes-heading-wrapper {
    gap: 1rem;
  }

  .bsb-quotes-decorative-line {
    max-width: 60px;
  }
}

/* Mobile (640px and below) */
@media (max-width: 640px) {
  .bsb-testimonials-minimal {
    padding: 4rem 0;
  }

  .bsb-section-header-minimal {
    margin-bottom: 3rem;
  }

  .bsb-quotes-grid-minimal {
    grid-template-columns: 1fr; /* Single column */
    gap: 1.25rem;
  }

  .bsb-quote-minimal {
    padding: 1.5rem 1.25rem;
  }

  .bsb-quote-icon {
    font-size: 3rem;
  }

  .bsb-quotes-heading-wrapper {
    flex-direction: column;
    gap: 1rem;
  }

  .bsb-quotes-decorative-line {
    width: 80px;
    max-width: 80px;
  }

  .bsb-quotes-heading {
    white-space: normal; /* Allow wrapping on very small screens */
  }
}

/* ========================================
   CLIENT LOGOS SECTION - GRAYSCALE TO COLOR
   ======================================== */
.bsb-logos-section {
    background: linear-gradient(to bottom, #FFF 0%, #FFF 100%);
    padding:5rem 0 5rem 0;
}

.bsb-logos-label {
    text-align: center;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #97AAC6;
    font-weight: 400;
    margin-bottom: 3rem;
}

.bsb-logos-row {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    flex-wrap: nowrap;
}

.bsb-logo-item {
    flex: 0 1 auto;
    max-width: calc((100% - 12rem) / 7);
    transition: transform 0.3s ease;
}

.bsb-logo-item:hover {
    transform: translateY(-4px);
}

.bsb-logo-item img {
    max-height: 120px;
    max-width: 100%;
    width: auto;
    height: auto;
    opacity: 1.0;
    transition: all 0.4s ease;
}

/* Tablet adjustments */
@media (max-width: 1024px) {
    .bsb-logos-row {
        gap: 1.5rem;
    }

    .bsb-logo-item {
        max-width: calc((100% - 9rem) / 7);
    }

    .bsb-logo-item img {
        max-height: 100px;
    }
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bsb-logos-section {
        padding: 3rem 0;
    }

    .bsb-logos-row {
        flex-wrap: wrap;
        gap: 1.5rem;
        justify-content: center;
    }

    .bsb-logo-item {
        max-width: calc((100% - 3rem) / 3);
    }

    .bsb-logo-item img {
        max-height: 80px;
    }
}

/* Small mobile adjustments */
@media (max-width: 480px) {
    .bsb-logos-row {
        gap: 1rem;
    }

    .bsb-logo-item {
        max-width: calc((100% - 2rem) / 2);
    }

    .bsb-logo-item img {
        max-height: 60px;
    }
}

/* Final CTA Section */
.bsb-final-cta-section {
    background: #FFFFFF;
    padding: 6rem 0;
    text-align: center;
}

.bsb-cta-headline {
    font-size: 2.5rem;
    font-weight: 300;
    color: #1F386B;
    margin-bottom: 1rem;
    letter-spacing: -0.02em;
}

.bsb-cta-subtext {
    font-size: 1.125rem;
    line-height: 1.7;
    color: #4A4A4A;
    margin-bottom: 2.5rem;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.bsb-cta-buttons {
    margin-top: 2rem;
}

/* Responsive Design */
@media (max-width: 1024px) {
    .bsb-quotes-grid {
        grid-template-columns: 1fr;
    }
    
    .bsb-quotes-grid-two {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bsb-container,
    .bsb-container-wide,
    .bsb-container-narrow {
        padding: 0 1.5rem;
    }
    
    .bsb-section {
        padding: 4rem 0;
    }
    

    .bsb-hero-content {
        padding: 2rem 1.5rem;
    }
    
    .bsb-hero-overlay {
        background: rgba(0,0,0, 0.5);
    }
    
    .bsb-section-heading {
        font-size: 1.75rem;
        margin-bottom: 2.5rem;
    }
    
    .bsb-quote-card {
        padding: 2rem;
    }
    
    .bsb-logos-row {
        gap: 2.5rem;
    }
    
    .bsb-cta-headline {
        font-size: 2rem;
    }
    
    /* Hide watermarks on smaller screens */
    .bsb-cta-watermark,
    .bsb-footer-watermark {
        display: none;
    }
}




/* Footer watermark */
.bsb-footer-watermark {
    position: absolute;
    bottom: 2rem;
    right: 3rem;
    opacity: 0.03;
    pointer-events: none;
    z-index: 0;
}

.bsb-footer-watermark img {
    width: 250px;
    height: auto;
}

/* Hide on mobile */
@media (max-width: 768px) {
    .bsb-footer-watermark {
        display: none;
    }
}



/* ========================================
   SIDEBAR CTA BUTTONS
   ======================================== */

.bsb-sidebar-cta-group {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 2rem;
}

.bsb-sidebar-cta-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.50rem 0;
    border-radius: 4px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}


.bsb-sidebar-cta-button:hover::before {
    left: 0;
}

/* Button text - SIMPLIFIED */
.bsb-sidebar-cta-text {
    font-size: clamp(0.95rem, 2vw, 1.05rem);
    font-weight: 400;
    color: #1F386B;
    letter-spacing: 0.5px;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
    line-height: 1; /* Keep this for tight spacing */
}

.bsb-sidebar-cta-button:hover .bsb-sidebar-cta-text {
    color: #F9A62D;
}

/* Arrow icon */
.bsb-sidebar-cta-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    color: #1F386B;
    position: relative;
    z-index: 2;
    transition: all 0.3s ease;
}

.bsb-sidebar-cta-icon svg {
    width: 24px;
    height: 24px;
    stroke: currentColor;
    fill: none;
    stroke-width: 2.5;
    stroke-linecap: round;
    stroke-linejoin: round;
    display: block;
}

.bsb-sidebar-cta-button:hover .bsb-sidebar-cta-icon {
    color: #F9A62D;
    transform: translateX(4px);
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bsb-sidebar-cta-group {
        margin: 25px 0 50px 0;
    }
    
    .bsb-sidebar-cta-button {
        padding: 0 0;
    }
    
    .bsb-sidebar-cta-text {
        font-size: 0.95rem;
    }
}




/* ========================================
   FINAL REFINED BOTTOM SECTIONS CSS
   Beeson Skinner Beverly LLP
   All Client-Requested Modifications
   ======================================== */

/* ========================================
   CLIENT LOGOS SECTION - FINAL REFINEMENTS
   ======================================== */

.bsb-logos-section-v2 {
    background: #FFFFFF;
    padding: 6rem 0;
    position: relative;
}

/* Header with Navy B Watermark (SHIFTED 75PX RIGHT ON DESKTOP) */
.bsb-logos-header {
    position: relative;
    text-align: center;
    margin-bottom: 4rem;
    padding: 0 2rem;
}

.bsb-logos-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(calc(-50% + 35px), -50%); /* SHIFTED 75PX RIGHT */
    width: clamp(200px, 30vw, 400px);
    height: auto;
    opacity: 0.04;
    z-index: 1;
    pointer-events: none;
}

.bsb-logos-watermark img {
    width: 100%;
    height: auto;
    display: block;
}

.bsb-logos-heading {
    position: relative;
    z-index: 2;
    font-size: clamp(2rem, 4vw, 2.5rem);
    color: #1F386B;
    margin: 0;
    letter-spacing: -0.02em;
}

.bsb-logos-heading .bsb-accent-text {
    color: #F9A62D;
}

/* Premium Logo Grid (3 COLUMNS, BIGGER LOGOS) */
.bsb-logos-grid-v2 {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* EXACTLY 3 COLUMNS */
    gap: 2.5rem;
    max-width: 1200px;
    margin: 130px auto 0 auto;
}

/* Individual Logo Cards (BIGGER, NO GRAYSCALE) */
.bsb-logo-card-v2 {
    background: #FFFFFF;
    border: 0px solid rgba(31, 56, 107, 0.1);
    border-radius: 8px;
    padding: 3rem 2rem; /* INCREASED PADDING FOR BIGGER LOGOS */
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(31, 56, 107, 0.00);
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

.bsb-logo-card-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, #1F386B 0%, #F9A62D 100%);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.bsb-logo-card-v2:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 24px rgba(31, 56, 107, 0.15);
    border-color: rgba(249, 166, 45, 0.3);
}

.bsb-logo-card-v2:hover::before {
    transform: scaleX(1);
}

.bsb-logo-inner {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px; /* INCREASED HEIGHT */
}

.bsb-logo-inner img {
    max-width: auto; /* BIGGER LOGOS (was 180px) */
    max-height: 150px; /* BIGGER LOGOS (was 80px) */
    width: auto;
    height: auto;
    object-fit: contain;
    filter: none; /* NO GRAYSCALE */
    opacity: 1;
    transition: all 0.3s ease;
}

/* SOPHISTICATED HOVER OVERLAY */
.bsb-logo-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg, 
        rgba(31, 56, 107, 0.95) 0%, 
        rgba(31, 56, 107, 0.98) 100%
    );
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transform: scale(0.95);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.bsb-logo-card-v2:hover .bsb-logo-overlay {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.bsb-logo-overlay-content {
    text-align: center;
    transform: translateY(10px);
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s;
}

.bsb-logo-card-v2:hover .bsb-logo-overlay-content {
    transform: translateY(0);
}

.bsb-logo-overlay-name {
    font-size: clamp(1.3rem, 2.5vw, 1.6rem);
    color: #FFFFFF;
    margin: 0 0 0.75rem 0;
    letter-spacing: -0.01em;
}

.bsb-logo-overlay-industry {
    font-size: clamp(0.95rem, 1.5vw, 1.1rem);
    font-weight: 400;
    color: #F9A62D;
    margin: 0;
    line-height: 1.4;
}

/* TOUCH-FRIENDLY: Show overlay on tap/click on mobile */
.bsb-logo-card-v2.active .bsb-logo-overlay {
    opacity: 1;
    transform: scale(1);
    pointer-events: auto;
}

.bsb-logo-card-v2.active .bsb-logo-overlay-content {
    transform: translateY(0);
}

/* Tablet Adjustments (2 COLUMNS) */
@media (max-width: 968px) {
    .bsb-logos-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }
    
    .bsb-logo-card-v2 {
        padding: 2.5rem 1.5rem;
    }
    
    .bsb-logo-inner {
        min-height: 100px;
    }
    
    .bsb-logo-inner img {
        max-width: 200px;
        max-height: 85px;
    }
    
    /* Center watermark on tablet */
    .bsb-logos-watermark {
        transform: translate(-50%, -50%);
    }
}

/* Mobile Adjustments (2 COLUMNS, STACKED) */
@media (max-width: 640px) {
    .bsb-logos-section-v2 {
        padding: 4rem 0;
    }
    
    .bsb-logos-header {
        margin-bottom: 3rem;
    }
    
    .bsb-logos-grid-v2 {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.25rem;
    }
    
    .bsb-logo-card-v2 {
        padding: 2rem 1rem;
    }
    
    .bsb-logo-inner {
        min-height: 80px;
    }
    
    .bsb-logo-inner img {
        max-width: 160px;
        max-height: 70px;
    }
    
    .bsb-logo-overlay-name {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }
    
    .bsb-logo-overlay-industry {
        font-size: 0.9rem;
    }
    
    /* Center watermark on mobile */
    .bsb-logos-watermark {
        transform: translate(-50%, -50%);
    }
}


/* ========================================
   QUOTES SECTION REFINEMENTS
   BSB Logo Mark + Creative Heading
   ======================================== */

/* BSB Logo Mark Above Heading */
.bsb-quotes-logo-mark {
    text-align: center;
    margin-bottom: 1.5rem;
}

.bsb-logo-mark-icon {
    width: clamp(90px, 8vw, 220px);
    height: auto;
    margin: 0 auto;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.bsb-logo-mark-icon:hover {
    opacity: 1;
}

/* Updated Section Heading */
.bsb-quotes-section .bsb-section-heading {
    text-align: center;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #1F386B;
    margin-bottom: 4rem;
    letter-spacing: -0.01em;
}

.bsb-quotes-section .bsb-section-heading .bsb-accent-text {
    color: #F9A62D;
}

/* Add icon to "Read More" button */
.bsb-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: gap 0.3s ease;
}

.bsb-btn-secondary:hover {
    gap: 0.75rem;
}

.bsb-btn-secondary svg {
    transition: transform 0.3s ease;
}

.bsb-btn-secondary:hover svg {
    transform: translateX(3px);
}


/* ========================================
   FINAL CTA SECTION - WITH PHONE ICON
   ======================================== */

.bsb-final-cta-section-v2 {
    background: linear-gradient(135deg, #1F386B 0%, #2a4a7d 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

/* Subtle pattern overlay */
.bsb-final-cta-section-v2::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23FFFFFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 1;
    z-index: 1;
}

.bsb-cta-content-wrapper {
    position: relative;
    z-index: 2;
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
    padding: 0 2rem;
}

/* Navy B Watermark */
.bsb-cta-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(300px, 40vw, 600px);
    height: auto;
    opacity: 0.08;
    z-index: 1;
    pointer-events: none;
}

.bsb-cta-watermark img {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) invert(1);
}

.bsb-cta-content {
    position: relative;
    z-index: 2;
}

.bsb-cta-headline {
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    line-height: 1.2;
    margin-bottom: 1.5rem;
    letter-spacing: -0.02em;
}

.bsb-cta-headline .bsb-accent-text {
    color: #F9A62D;
}

.bsb-cta-subtext {
    color: #CFD2D3;
    font-size: clamp(1.1rem, 2.5vw, 1.35rem);
    line-height: 1.6;
    margin-bottom: 3rem;
    font-weight: 400;
}

.bsb-cta-button-wrapper {
    display: flex;
    justify-content: center;
}

/* Premium Large CTA Button WITH ICONS */
.bsb-btn-primary-large {
    background: #F9A62D;
    color: #FFFFFF;
    font-size: 1.15rem;
    padding: 1.25rem 3rem;
    border-radius: 6px;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 16px rgba(249, 166, 45, 0.3);
    position: relative;
    overflow: hidden;
}

.bsb-btn-primary-large .bsb-cta-icon-left {
    flex-shrink: 0;
}

.bsb-btn-primary-large::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
    transition: left 0.5s ease;
}

.bsb-btn-primary-large:hover::before {
    left: 100%;
}

.bsb-btn-primary-large:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 24px rgba(249, 166, 45, 0.5);
    background: #fdb24a;
    gap: 1rem;
}

.bsb-btn-primary-large svg {
    transition: transform 0.3s ease;
}

.bsb-btn-primary-large:hover svg:last-child {
    transform: translateX(4px);
}

/* Mobile Adjustments */
@media (max-width: 768px) {
    .bsb-final-cta-section-v2 {
        padding: 4rem 0;
    }
    
    .bsb-cta-headline {
        margin-bottom: 1.25rem;
    }
    
    .bsb-cta-subtext {
        margin-bottom: 2rem;
    }
    
    .bsb-btn-primary-large {
        width: 100%;
        justify-content: center;
        font-size: 1.05rem;
        padding: 1.15rem 2rem;
    }
}



/* ========================================
ABOUT PAGE STYLES - HERO WITH BACKGROUND IMAGE
======================================== */

.bsb-about-hero {
    position: relative;
    height: 600px;
    display: flex;
    align-items:  flex-end;
    justify-content: center;
    overflow: hidden;
}

.bsb-about-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

/* Hero background image */
.bsb-about-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Overlay with gradient for readability */
.bsb-about-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0, 0.4) 0%,
        rgba(0,0,0, 0.4) 50%,
        rgba(0,0,0, 0.4) 100%
    );
    z-index: 2;
}

/* Optional: Add subtle pattern overlay on top of image */
.bsb-about-hero-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D9AD77' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.bsb-about-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 2rem;
    max-width: 800px;
}

/* Hero title with orange accent */
.bsb-about-hero-title {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    color: #FFFFFF;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
    /* Subtle contrast boost on light imagery */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
}

.bsb-text-accent {
    color: #F9A62D;
}

.bsb-about-hero-subtitle {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.5rem);
    color: rgba(255, 255, 255, 0.85);
    margin: 0 0 80px 0;;
    letter-spacing: normal;;
        /* Slightly lighter than title to avoid “glow” */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);

}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bsb-about-hero {
        height: 50vh;
    }
    
    .bsb-about-hero-title {
        font-size: clamp(2rem, 7vw, 2.5rem);
        margin-bottom: 1rem;
        line-height: 1.25;
    }
    
    .bsb-about-hero-subtitle {
        font-size: clamp(0.95rem, 3vw, 1.05rem);
        margin: 0 0 50px 0;
        line-height: 1.6;
    }

    
       .bsb-about-hero#about-page {
        height: 35vh;
    }
    .bsb-about-hero-content {
        padding: 1.5rem;
    }
}

/* ----------------------------------------
   STORY SECTION - Main Content
   ---------------------------------------- */
/* ========================================
   ABOUT PAGE - BSB WATERMARK
   ======================================== */

.bsb-about-story {
    padding: 8rem 0 6rem 0;
    background-color: #FFFFFF;
    position: relative;
 
}

/* Watermark positioned at right center */
.bsb-about-story::before {
    content: '';
    position: absolute;
    right: 0;              /* lock to right edge */
    top: 50%;              /* vertical center reference */
    transform: translateY(-50%); /* true vertical centering */
    height: 100%;
    width: 1000px;
    max-width: 75vw;
    background-image: url('/wp-content/uploads/2026/01/BSB-Watermark-for-website.webp');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: right center; /* align image within pseudo-element */
    opacity: 0.03;
    z-index: 0;
    pointer-events: none;
}


/* Ensure content sits above watermark */
.bsb-about-story-grid {
    position: relative;
    z-index: 1;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bsb-about-story::before {
        width: 300px;
        max-width: 50vw;
        opacity: 0.03; /* Even more subtle on mobile */
    }
}


.bsb-about-story-grid {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: 4rem;
    align-items: start;
    max-width: 1100px;
    margin: 0 auto;
}

/* Sidebar Quote Styles */
.bsb-about-author-closing {
    border-top: 2px solid #D4E0F9;
    padding-top: 1.5rem;
    margin-top: 1.5rem;
}

.bsb-about-author-top + .bsb-about-author-closing {
    margin-top: 2rem;
}

.bsb-about-author-closing p {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(1.05rem, 1.8vw, 1.2rem);
    line-height: 1.65;
    color: #1F386B;
    font-style: italic;
    margin-bottom: 0.75rem;
}

.bsb-about-author-closing cite {
    display: block;
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 0.9rem;
    color: #666666;
    font-style: normal;
    letter-spacing: 0.01em;
    line-height: 1.5;
}

/* ----------------------------------------
   AUTHOR COLUMN - Brian Beverly
   ---------------------------------------- */
.bsb-about-author-column {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 200px);
    max-height: 800px;
}

.bsb-about-author-top {
    flex-shrink: 0;
}

.bsb-about-author-photo {
    width: 240px;
    height: 280px;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 12px 40px rgba(31, 56, 107, 0.18);
    margin-bottom: 1.5rem;
}

.bsb-about-author-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
    transition: transform 0.4s ease;
}

.bsb-about-author-photo:hover .bsb-about-author-image {
    transform: scale(1.03);
}

.bsb-about-author-info {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-bottom: 2rem;
}

.bsb-about-author-name {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: 1.25rem;
    color: #1F386B;
}

.bsb-about-author-title {
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: 0.9rem;
    color: #F9A62D;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Closing line anchored at bottom */
.bsb-about-author-closing {
    padding-top: 2rem;
     padding-bottom: 2rem;
    border-top: 2px solid #D4E0F9;
}

.bsb-about-author-closing p {
	font-family: "Amiri", serif; 
	font-size: clamp(1.1rem, 1.8vw, 1.3rem);
    line-height: 1.6;
    color: #1F386B;
    font-style: italic;
    font-weight: 400;
    margin: 0 0 20px 0;
    position: relative;
} 
	
.bsb-about-author-closing cite {color:  #999; line-height:1.0}

.bsb-about-closing-line {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.4;
    color: #1F386B;
    margin-bottom: 1.25rem;
    font-style: italic;
}

.bsb-about-author-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    font-family: "Work Sans", sans-serif;
    font-weight: 600;
    font-size: 0.95rem;
    color: #F9A62D;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-about-author-cta:hover {
    color: #1F386B;
}

.bsb-about-author-cta i {
    transition: transform 0.3s ease;
}

.bsb-about-author-cta:hover i {
    transform: translateX(4px);
}

/* ----------------------------------------
   STORY CONTENT - Narrative
   ---------------------------------------- */
.bsb-about-story-content {
    max-width: 700px;
}

.bsb-story-narrative {
    position: relative;
    padding-left: 2rem;
    border-left: 3px solid #D4E0F9;
}


/* Body paragraphs */
.bsb-about-story-content p {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

/* Story headings - key statements */
.bsb-about-story-heading {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: 1.35rem;
    line-height: 1.4;
    color: #1F386B;
    margin-top: 2.5rem;
    margin-bottom: 1rem;
    position: relative;
}

/* Animated orange bar - starts at 3px, expands to 6px on scroll */
.bsb-about-story-heading::before {
    content: '';
    position: absolute;
    left: -2rem;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #F9A62D;
    margin-left: -1.5px;
    transition: width 0.6s cubic-bezier(0.34, 1.56, 0.64, 1), 
                margin-left 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Expanded state when scrolled into view */
.bsb-about-story-heading.bsb-bar-expanded::before {
    width: 15px;
    margin-left: -3px;
}

/* ----------------------------------------
   CTA SECTION - White Background with B Watermark
   ---------------------------------------- */
.bsb-about-cta {
    padding: 5rem 0;
    background: #FFFFFF;
    position: relative;
    overflow: hidden;
    border-top: 1px solid #D4E0F9;
}

/* Large B watermark */
.bsb-about-cta-watermark {
    position: absolute;
    right: -5%;
    top: 50%;
    transform: translateY(-50%);
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(400px, 50vw, 600px);
    line-height: 1;
    color: #D4E0F9;
    opacity: 0.25;
    pointer-events: none;
    user-select: none;
    z-index: 1;
}

.bsb-about-cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

/* CTA headline - dark blue on white */
.bsb-about-cta-headline {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: #1F386B;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
}

.bsb-about-cta-text {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: 1.05rem;
    color: #666666;
    margin-bottom: 2rem;
    line-height: 1.6;
}

.bsb-about-cta-buttons {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}



/* ----------------------------------------
   RESPONSIVE - Tablet & Mobile
   ---------------------------------------- */
@media (max-width: 992px) {
    .bsb-about-hero {
        height: 50vh;
    }
    
    .bsb-about-story-grid {
        grid-template-columns: 220px 1fr;
        gap: 3rem;
    }
    
    .bsb-about-author-photo {
        width: 200px;
        height: 240px;
    }
    
    .bsb-about-author-column {
        height: auto;
        max-height: none;
    }
    
    .bsb-about-author-closing {
        margin-top: 2rem;
    }
    
    .bsb-about-cta-watermark {
        font-size: 350px;
        right: -10%;
    }
}

@media (max-width: 768px) {
    .bsb-about-hero {
        height: 50vh;
    }
    
    .bsb-about-hero-content {
        padding: 2rem 1.5rem;
    }
    
    .bsb-about-story {
        padding: 3.5rem 0 4rem;
    }
    
    .bsb-about-story-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    
    .bsb-about-author-column {
        position: relative;
        top: 0;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 1.5rem;
    }
    
    .bsb-about-author-top {
        display: flex;
        align-items: center;
        gap: 1.25rem;
        width: 100%;
    }
    
    .bsb-about-author-photo {
        width: 120px;
        height: 140px;
        margin-bottom: 0;
        flex-shrink: 0;
    }
    
    .bsb-about-author-info {
        flex: 1;
        margin-bottom: 0;
    }
    
    .bsb-about-author-closing {
        width: 100%;
        margin-top: 0;
        padding-top: 1.5rem;
    }
    
    .bsb-about-closing-line {
        font-size: 1.15rem;
    }
    
    .bsb-story-narrative {
        padding-left: 1.5rem;
    }
    
    .bsb-about-story-heading::before {
        left: -1.5rem;
    }
    
    .bsb-about-cta {
        padding: 4rem 0;
    }
    
    .bsb-about-cta-watermark {
        font-size: 250px;
        right: -15%;
        opacity: 0.15;
    }
    
    .bsb-about-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}



/* ----------------------------------------
   FADE-IN ANIMATION
   ---------------------------------------- */
.bsb-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bsb-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}
	



/* ========================================
   ANIMATION ENHANCEMENTS
   ======================================== */

/* Fade-in for logo cards */
.bsb-logo-card-v2 {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.bsb-logo-card-v2:nth-child(1) { animation-delay: 0.1s; }
.bsb-logo-card-v2:nth-child(2) { animation-delay: 0.2s; }
.bsb-logo-card-v2:nth-child(3) { animation-delay: 0.3s; }
.bsb-logo-card-v2:nth-child(4) { animation-delay: 0.4s; }
.bsb-logo-card-v2:nth-child(5) { animation-delay: 0.5s; }
.bsb-logo-card-v2:nth-child(6) { animation-delay: 0.6s; }

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

/* CTA section reveal */
.bsb-cta-content {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease 0.2s forwards;
}

/* Logo mark fade in */
.bsb-quotes-logo-mark {
    opacity: 0;
    transform: scale(0.9);
    animation: fadeInScale 0.6s ease 0.3s forwards;
}

@keyframes fadeInScale {
    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ========================================
   TOUCH INTERACTION - MOBILE FRIENDLY
   ======================================== */

/* Enable touch-friendly logo overlay on mobile */
@media (hover: none) {
    .bsb-logo-card-v2 {
        -webkit-tap-highlight-color: transparent;
    }
    
    /* Overlay shows on tap */
    .bsb-logo-card-v2.active .bsb-logo-overlay {
        opacity: 1;
        transform: scale(1);
    }
    
    .bsb-logo-card-v2.active .bsb-logo-overlay-content {
        transform: translateY(0);
    }
}


/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .bsb-logos-watermark,
    .bsb-cta-watermark,
    .bsb-logo-card-v2::before,
    .bsb-btn-primary-large::before,
    .bsb-logo-overlay {
        display: none !important;
    }
    
    .bsb-logo-inner img {
        filter: none !important;
    }
}



/* ========================================================================
   3. SECTION ANIMATIONS (Front Page Only)
   Uses new class to avoid conflicts with existing .bsb-section styles
   ======================================================================== */

.bsb-section-animate {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.bsb-section-animate.bsb-section-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero section gets special treatment - no transform to avoid Ken Burns conflict */
.bsb-home-hero.bsb-section-animate {
    opacity: 1; /* Don't fade hero, it has its own animations */
    transform: none; /* Don't transform hero */
}

.bsb-home-hero.bsb-section-visible {
    opacity: 1;
    transform: none;
}

/* ========================================================================
   4. STAGGERED ANIMATIONS FOR SPECIFIC CARDS
   Uses new class to avoid conflicts with existing .bsb-stagger-children
   ======================================================================== */

/* Quote cards - initial state (hidden) */
.bsb-quotes-grid .bsb-quote-card,
.bsb-quotes-grid-two .bsb-quote-card {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Quote cards - visible state */
.bsb-quotes-grid .bsb-quote-card.bsb-stagger-visible,
.bsb-quotes-grid-two .bsb-quote-card.bsb-stagger-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Logo cards - initial state (hidden) */
.bsb-logos-grid-v2 .bsb-logo-card-v2 {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

/* Logo cards - visible state */
.bsb-logos-grid-v2 .bsb-logo-card-v2.bsb-stagger-visible {
    opacity: 1;
    transform: translateY(0);
}

/* On hover, maintain the visible state */
.bsb-logos-grid-v2 .bsb-logo-card-v2.bsb-stagger-visible:hover {
    opacity: 1;
    transform: translateY(-4px); /* Existing hover effect preserved */
}

/* ========================================================================
   5. CTA SECTION ENTRANCE ANIMATION
   ======================================================================== */

.bsb-final-cta-section-v2 {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.bsb-final-cta-section-v2.bsb-cta-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Animate CTA button with delay */
.bsb-final-cta-section-v2.bsb-cta-visible .bsb-btn-primary-large {
    animation: ctaPulse 0.6s ease-out 0.4s backwards;
}

@keyframes ctaPulse {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.02);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* ========================================================================
   6. WATERMARK ANIMATIONS - REMOVED
   Your existing CSS already positions watermarks perfectly
   We won't interfere with them
   ======================================================================== */

/* Watermark animations removed to preserve your existing positioning */
/* Your style.css already has perfect watermark styling */

/* ========================================================================
   7. NO PARALLAX ON HERO IMAGES
   Removed to avoid conflict with Ken Burns effect
   ======================================================================== */

/* Previously had parallax here - removed to preserve Ken Burns animation */
/* The Ken Burns effect is already in main style.css and works beautifully */

/* ========================================================================
   8. MOBILE RESPONSIVENESS
   ======================================================================== */

@media (max-width: 768px) {
    /* Progress line thinner on mobile */
    .bsb-scroll-progress-container {
        width: 6px;
    }
    
    .bsb-scroll-progress-line {
        width: 6px;
    }
    
    /* Back-to-top button smaller */
    .bsb-back-to-top-new {
        width: 44px;
        height: 44px;
        bottom: 20px;
        right: 15px;
    }
    
    .bsb-back-to-top-new svg {
        width: 20px;
        height: 20px;
    }
    
    /* Reduce animation distances on mobile */
    .bsb-section-animate {
        transform: translateY(25px);
    }
    
    .bsb-quotes-grid .bsb-quote-card,
    .bsb-quotes-grid-two .bsb-quote-card,
    .bsb-logos-grid-v2 .bsb-logo-card-v2 {
        transform: translateY(20px);
    }
}




/* ========================================================================
   9. TABLET OPTIMIZATIONS
   ======================================================================== */

@media (min-width: 769px) and (max-width: 1024px) {
    .bsb-scroll-progress-container {
        width: 8px;
    }
    
    .bsb-scroll-progress-line {
        width: 8px;
    }
    
    .bsb-back-to-top-new {
        width: 48px;
        height: 48px;
    }
}

/* ========================================================================
   10. REDUCED MOTION SUPPORT (Accessibility)
   ======================================================================== */

@media (prefers-reduced-motion: reduce) {
    .bsb-section-animate,
    .bsb-quotes-grid .bsb-quote-card,
    .bsb-quotes-grid-two .bsb-quote-card,
    .bsb-logos-grid-v2 .bsb-logo-card-v2,
    .bsb-final-cta-section-v2,
    .bsb-back-to-top-new,
    .bsb-specialists-watermark,
    .bsb-services-watermark,
    .bsb-logos-watermark,
    .bsb-cta-watermark {
        transition: opacity 0.3s ease;
        transform: none !important;
        animation: none !important;
    }
    
    .bsb-scroll-progress-line {
        transition: height 0.2s linear;
    }
}

/* ========================================================================
   11. HIGH CONTRAST MODE SUPPORT
   ======================================================================== */

@media (prefers-contrast: high) {
    .bsb-scroll-progress-line {
        background: #FF8800;
        box-shadow: none;
        border: 2px solid #000000;
    }
    
    .bsb-back-to-top-new {
        background: #FF8800;
        border: 2px solid #000000;
        box-shadow: none;
    }
}

/* ========================================================================
   12. PRINT STYLES (Hide Interactive Elements)
   ======================================================================== */

@media print {
    .bsb-scroll-progress-container,
    .bsb-back-to-top-new {
        display: none !important;
    }
}

/* ========================================================================
   13. ENSURE NO CONFLICTS WITH EXISTING ANIMATIONS
   ======================================================================== */

/* Preserve existing logo card stagger delays from main CSS */
.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(1) { 
    transition-delay: 0.1s; 
}

.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(2) { 
    transition-delay: 0.2s; 
}

.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(3) { 
    transition-delay: 0.3s; 
}

.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(4) { 
    transition-delay: 0.4s; 
}

.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(5) { 
    transition-delay: 0.5s; 
}

.bsb-logos-grid-v2 .bsb-logo-card-v2:nth-child(6) { 
    transition-delay: 0.6s; 
}

/* ========================================================================
   END OF SCROLL EFFECTS STYLESHEET
   Safe Integration - No Conflicts with Existing Styles
   ======================================================================== */



















/* ========================================
   SECTION 2: EXPERIENCED SPECIALISTS
   (with B Watermark)
   ======================================== */

.bsb-specialists-section {
    padding: 8rem 0;
    background: linear-gradient(135deg, #F3F6FB 0%, #D4E0F9 100%);
    position: relative;
    overflow: hidden; /* Prevents watermark from extending beyond section */
}



/* Ensure content stays above watermark */
.bsb-specialists-section .bsb-container-wide {
    position: relative;
    z-index: 1;
}

.bsb-specialists-header {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 5rem;
}

.bsb-specialists-header .bsb-section-number {
    display: inline-block;
    margin-bottom: 1rem;
}

.bsb-section-intro {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    color: #1F386B;
    font-weight: 500;
    margin-top: 1.5rem;
}

.bsb-specialists-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

/* Specialist Cards - NO 3D TRANSFORM */
.bsb-specialist-card {
    background: #fff;
    border-radius: 16px;
    padding: 3rem 2.5rem;
    box-shadow: 
        0 10px 30px rgba(31, 56, 107, 0.08),
        0 5px 15px rgba(31, 56, 107, 0.04);
    transition: all 0.3s ease;
    position: relative;
}

.bsb-specialist-card:hover {
    transform: translateY(-5px);
    box-shadow: 
        0 20px 40px rgba(31, 56, 107, 0.12),
        0 10px 20px rgba(31, 56, 107, 0.08);
}

.bsb-card-icon-wrapper {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, rgba(249, 166, 45, 0.9) 0%, rgba(249, 166, 45, 0.5) 100%);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
}

.bsb-icon-float {
    animation: iconFloat 6s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-10px); }
}

.bsb-card-title {
    font-size: 1.5rem;
    color: #1F386B;
    margin-bottom: 1rem;
}

.bsb-card-text {
    font-size: 1rem;
    line-height: 1.7;
    color: #666;
    margin-bottom: 2rem;
}

.bsb-card-stat {
    padding-top: 2rem;
    border-top: 2px solid #F9A62D;
    display: flex;
    flex-direction: column;
}

.bsb-percentage {
    font-size: 2.5rem;
    color: #1F386B;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.bsb-card-stat .bsb-stat-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #999;
}

/* ========================================
   RESPONSIVE - Hide watermark on mobile/tablet
   ======================================== */

@media (max-width: 1200px) {
    .bsb-specialists-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Move watermark further left on smaller screens */
    .bsb-specialists-watermark {
        left: -15%;
    }
}

@media (max-width: 992px) {
    /* Hide watermark on tablet and below */
    .bsb-specialists-watermark {
        display: none;
    }
}

@media (max-width: 768px) {
    .bsb-specialists-section {
        padding: 4rem 0;
    }
    
    .bsb-specialist-card {
        padding: 2rem 1.5rem;
    }
}
/* ========================================
   SECTION 3: STRATEGIC PARTNERS
   ======================================== */

.bsb-partners-section {
    padding: 8rem 0;
    background: #fff;
    position: relative;
}

.bsb-partners-layout {
    display: grid;
    grid-template-columns: 1.3fr 0.7fr;
    gap: 5rem;
}

.bsb-partners-main .bsb-section-number {
    margin-bottom: 1rem;
}

.bsb-partners-text p {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #333;
    margin-bottom: 1.5rem;
}

.bsb-emphasis {
    font-size: 1.2rem;
    font-weight: 600;
    color: #1F386B;
    margin-top: 2rem;
}

.highlight-text {
    position: relative;
    color: #F9A62D;
}

/* CTA Button */
.bsb-cta-button {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: linear-gradient(135deg, #F9A62D 0%, #c49860 100%);
    color: #1F386B;
    padding: 1.25rem 2.5rem;
    border-radius: 50px;
    font-size: 1.05rem;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0 4px 15px rgba(249, 166, 45, 0.3);
    margin-top: 2rem;
}

.bsb-cta-button:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(249, 166, 45, 0.4);
}

.bsb-cta-button svg {
    transition: transform 0.3s ease;
}

.bsb-cta-button:hover svg {
    transform: translateX(5px);
}



/* ========================================
   HERO QUOTE ROTATOR - LIQUID GLASS STYLE
   WITH FADE ANIMATION
   ======================================== */
.bsb-hero-quotes-container {
    position: absolute;
bottom:300px;
   margin: 0 auto;   
    width: 100%;
    display: flex;    /* add */
    justify-content: center; /* add */
}


/* Quote Rotator Container */
.bsb-hero-quote-rotator {
  position: relative;
  width: min(980px, 100%);   /* constrain width if you want */
  min-height: 120px;
  overflow: hidden;
  z-index: 1;
}

/* Individual Quote Items - STACKED CROSSFADE */
.bsb-hero-quote-item {
  position: absolute;        /* key change */
  inset: 0;                  /* top:0; right:0; bottom:0; left:0 */
  display: flex;             /* center content cleanly */
  justify-content: center;
  align-items: center;

  width: 100%;
  margin: 0;
  text-align: center;

  opacity: 0;
  transition: opacity 1.2s ease, filter 1.2s ease;
  pointer-events: none;
  filter: blur(2px);
  will-change: opacity, filter;
}

.bsb-hero-quote-item.active {
  opacity: 1;
  pointer-events: auto;
  filter: blur(0);
}


/* Quote Text Styling */
.bsb-quote-text {
    font-size: clamp(1.15rem, 2vw, 1.4rem);
    line-height: 1.7;
    font-weight: 400;
    color: #F9A62D;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
        position: relative;
    padding-left: 0;
    z-index: 1;
    margin: 0;                 /* remove bottom gap that changes perceived baseline */
  max-width: 60ch;           /* consistent line length */
}



/* Quote Attribution */
.bsb-quote-attribution {
    display: block;
    font-size: clamp(0.9rem, 1.5vw, 1rem);
    color: #FFFFFF;
    font-style: normal;
    font-weight: 500;
    opacity: 0.95;
}

/* ========================================
   RESPONSIVE ADJUSTMENTS
======================================== */

@media (max-width: 1024px) {
  .bsb-hero-quotes-container {
    right: 0;
    left: 0;
    max-width: none;
    padding: 0; /* optional */
  }

  .bsb-hero-quote-rotator {
    width: min(380px, 100%);
    min-height: 110px;
  }
}


/* Mobile - Reposition to Bottom Center */
@media (max-width: 768px) {
    .bsb-hero-quotes-container {
        display:none
        
    }
    
    .bsb-hero-quote-rotator {
        min-height: 100px;
    }
    
    .bsb-hero-quote-item {
        transition: opacity 0.5s ease, filter 0.5s ease; /* Faster on mobile */
    }
    
    .bsb-quote-text {
        font-size: 1.05rem;
        padding-left: 1.5rem;
    }
    
    .bsb-quote-text::before {
        font-size: 1rem;
        left: 0;
    }
    
    .bsb-quote-attribution {
        font-size: 0.85rem;
    }
}

/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
    .bsb-hero-quotes-container {
        animation: none;
    }
    
    .bsb-hero-quote-item {
        transition: opacity 0.3s ease;
        filter: none !important; /* No blur for reduced motion */
    }
}


/* ========================================
   HERO PRACTICE BUTTONS
   ======================================== */

.bsb-button-practice {
    background: rgba(249, 166, 45, 0.2);
    border: 2px solid rgba(249, 166, 45, 0.6);
    color: #FFFFFF;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    font-weight: 600;
    text-decoration: none;
    display: inline-block;
    transition: all 0.3s ease;
    font-size: clamp(0.9rem, calc(0.8vw + 0.4vh), 1.05rem);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.bsb-button-practice:hover {
    background: rgba(249, 166, 45, 0.9);
    border-color: #F9A62D;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(249, 166, 45, 0.3);
}

/* ========================================
   FIXED BOTTOM RIGHT CTA
   ======================================== */
.bsb-fixed-cta {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    background: #F9A62D;
    color: #1F386B;
    padding: 1rem 1.5rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.3);
    z-index: 999;
    transition: all 0.3s ease;
    font-weight: 600;
    font-size: 0.95rem;
}

/* Only apply hover effect on devices with hover capability (desktop) */
@media (hover: hover) and (pointer: fine) {
    .bsb-fixed-cta:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 30px rgba(31, 56, 107, 0.4);
    }
}

.bsb-fixed-cta-link,
.bsb-fixed-phone-link {
    color: #1F386B;
    text-decoration: none;
    transition: color 0.3s ease;
}

@media (hover: hover) and (pointer: fine) {
    .bsb-fixed-cta-link:hover,
    .bsb-fixed-phone-link:hover {
        color: #FFFFFF;
    }
}

.bsb-fixed-divider {
    color: rgba(31, 56, 107, 0.3);
    font-weight: 300;
}

.bsb-fixed-phone-link i {
    font-size: 1.1rem;
}

/* ========================================
   MOBILE ADJUSTMENTS FOR FIXED CTA
   ======================================== */

@media (max-width: 768px) {
    .bsb-fixed-cta {
        display:none    }
    
    .bsb-fixed-phone-link i {
        font-size: 1rem;
    }
}


     



/* ========================================
   TESTIMONIALS PAGE - ALTERNATING ROW LAYOUT
   ======================================== */


/* ===== TESTIMONIALS SECTION ===== */
.bsb-testimonials-section {
	position:relative;
    padding: 8rem 0;
    background: #FAFAFA;
}

/* Watermark positioned at left bottom */
.bsb-testimonials-section::before {
   content: '';
    position: absolute;
    left: 0; /* Very left of the section */
    top: 5%; /* Start 10% from top */
    bottom: 5%; /* End 10% from bottom = 80% height */
    width: 1200px; /* Base width - adjust as needed */
    max-width: 100vw; /* Responsive on smaller screens */
    background-image: url('/wp-content/uploads/2026/01/BSB-lettermark-only-RGB-large.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: left center;
    opacity: 0.09; /* Very subtle watermark */
    z-index: 0; /* Behind content */
    pointer-events: none; /* Don't interfere with clicks */
}


.bsb-container-wide {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 3rem;
}

/* ===== TESTIMONIAL ROW (FULL WIDTH) ===== */
.bsb-testimonial-row {
    display: grid;
    gap: 4rem;
    margin-bottom: 6rem;
    align-items: center;
    /* REMOVED: opacity: 0; - Content now visible by default */
    /* REMOVED: transform: translateY(40px); */
    transition: opacity 0.8s ease, transform 0.8s ease;
}

/* Animation triggered by JavaScript (progressive enhancement) */
.bsb-testimonial-row.bsb-animate-on-scroll {
    opacity: 0;
    transform: translateY(40px);
}

.bsb-testimonial-row.bsb-animate-on-scroll.visible {
    opacity: 1;
    transform: translateY(0);
}

.bsb-testimonial-row:last-child {
    margin-bottom: 0;
}

/* ODD ROWS: Pull Quote Left (1/3) + Testimonial Right (2/3) */
.bsb-testimonial-row.bsb-row-odd {
    grid-template-columns: 1fr 2fr;
}

/* EVEN ROWS: Testimonial Left (2/3) + Pull Quote Right (1/3) */
.bsb-testimonial-row.bsb-row-even {
    grid-template-columns: 2fr 1fr;
}

/* ===== PULL QUOTE COLUMN ===== */
.bsb-pull-quote-column {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}

.bsb-pull-quote {
    position: relative;
    text-align: center;
    /* REMOVED initial hidden state for progressive enhancement */
    transition: opacity 1s ease, transform 1s ease;
}

.bsb-pull-quote.bsb-animate-on-scroll {
    opacity: 0;
    transform: scale(0.95);
}

.bsb-pull-quote.bsb-animate-on-scroll.visible {
    opacity: 1;
    transform: scale(1);
}

.bsb-quote-mark-top,
.bsb-quote-mark-bottom {
    font-family: Georgia, serif;
    font-size: 3rem;
    line-height: 1;
    color: #F9A62D;
    opacity: 0.3;
    font-weight: 400;
}

.bsb-quote-mark-top {
    margin-bottom: 0;
      text-align: left
}

.bsb-quote-mark-bottom {
    margin-top: 0;
    text-align: right;
}

.bsb-pull-quote-text {
    font-family: "Amiri", serif;
    font-size: clamp(1.3rem, 2.5vw, 1.8rem);
    font-weight: 400;
    font-style: italic;
    color: #1F386B;
    line-height: 1.5;
    margin: 0;
    position: relative;
    z-index: 1;
}

/* ===== TESTIMONIAL COLUMN ===== */
.bsb-testimonial-column {
    display: flex;
    align-items: stretch;
}

.bsb-testimonial-card {
    background: #FFFFFF;
    border-radius: 8px;
    padding: 3.5rem;
    box-shadow: 0 4px 30px rgba(31, 56, 107, 0.08);
    transition: all 0.4s ease;
    width: 100%;
    border-left: 4px solid transparent;
}

.bsb-testimonial-card:hover {
    box-shadow: 0 8px 40px rgba(31, 56, 107, 0.12);
    transform: translateY(-4px);
    border-left-color: #F9A62D;
}

/* ===== SCROLL-TRIGGERED FADE-IN ANIMATIONS ===== */
/* Override global CSS to set up proper fade-in animations for this page */

/* TESTIMONIAL ROWS - Fade in from below as user scrolls */
.bsb-testimonials-section .bsb-testimonial-row {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-testimonials-section .bsb-testimonial-row.visible {
    opacity: 1;
    transform: translateY(0);
}

/* PULL QUOTES - Subtle scale animation */
.bsb-testimonials-section .bsb-pull-quote {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s,
                transform 1s cubic-bezier(0.4, 0, 0.2, 1) 0.2s;
}

.bsb-testimonials-section .bsb-pull-quote.visible {
    opacity: 1;
    transform: scale(1);
}

/* TESTIMONIAL CARDS - Override global CSS stagger animation */
.bsb-testimonials-section .bsb-testimonial-card {
    opacity: 1 !important; /* Override global, let row control visibility */
    transform: none !important;
}

/* CTA SECTION - Fade in at bottom */
.bsb-testimonials-section .bsb-cta-content {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-testimonials-section .bsb-cta-content.visible {
    opacity: 1;
    transform: translateY(0);
}

.bsb-testimonial-content {
    position: relative;
}

.bsb-testimonial-text-wrapper {
    margin-bottom: 2.5rem;
    position: relative;
}

.bsb-testimonial-preview,
.bsb-testimonial-full {
    font-size: clamp(1.05rem, 2vw, 1.2rem);
    line-height: 1.9;
    color: #333333;
}

.bsb-testimonial-preview p,
.bsb-testimonial-full p {
    margin-bottom: 1.2rem;
}

.bsb-testimonial-preview p:last-child,
.bsb-testimonial-full p:last-child {
    margin-bottom: 0;
}

/* ===== SMOOTH EXPAND/COLLAPSE ANIMATION ===== */
.bsb-testimonial-preview {
    max-height: 500px; /* Enough for preview content */
    opacity: 1;
    overflow: hidden;
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}

.bsb-testimonial-preview.collapsing {
    max-height: 0;
    opacity: 0;
    margin-bottom: 0;
}

.bsb-testimonial-full {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height 0.6s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease 0.1s;
}

/* When expanded by user click */
.bsb-testimonial-full.expanding {
    max-height: 3000px;      /* Expand to full height */
    opacity: 1;              /* Fade in */
    transition: 2.6s;        /* Slightly longer than collapse */
    transition-delay: 0.1s;  /* Start after preview begins collapsing */
}

/* For short testimonials with no Read More button - always visible */
.bsb-testimonial-text-wrapper .bsb-testimonial-full:only-child {
    max-height: none;
    opacity: 1;
    overflow: visible;
}

/* ===== READ MORE BUTTON ===== */
.bsb-read-more-btn {
    background: none;
    border: none;
    color: #1F386B;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    padding: 0.5rem 0;
    margin-top: 1.5rem;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.3s ease;
}

.bsb-read-more-btn:hover {
    color: #F9A62D;
    transform: translateX(6px);
}

.bsb-read-more-btn i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.bsb-read-more-btn[aria-expanded="true"] i {
    transform: rotate(180deg);
}

/* Focus outline - ONLY for keyboard navigation (accessibility) */
.bsb-read-more-btn:focus {
    outline: none; /* Remove default outline for mouse clicks */
}

.bsb-read-more-btn:focus-visible {
    /* Only show outline when navigating with keyboard */
    outline: 2px solid #F9A62D;
    outline-offset: 4px;
    border-radius: 2px;
}

/* ===== TESTIMONIAL AUTHOR ===== */
.bsb-testimonial-divider {
    width: 80px;
    height: 4px;
    background: #F9A62D;
    margin-bottom: 1.5rem;
    transition: width 0.4s ease;
}

.bsb-testimonial-card:hover .bsb-testimonial-divider {
    width: 100px;
}

.bsb-testimonial-author {
    margin-top: 2.5rem;
}

.bsb-author-name {
    font-size: 1.2rem;
    color: #1F386B;
    margin-bottom: 0.5rem;
}

.bsb-author-title {
    font-size: 1rem;
    font-weight: 400;
    color: #666666;
    margin-bottom: 0.25rem;
}

.bsb-author-company {
    font-size: 1rem;
    font-weight: 600;
    color: #97AAC6;
    margin: 0;
}

/* ===== TESTIMONIALS CTA SECTION ===== */
.bsb-testimonials-cta {
    background: linear-gradient(135deg, #1F386B 0%, #2A4A7F 100%);
    padding: 6rem 0;
    text-align: center;
}

.bsb-cta-content {
    max-width: 800px;
    margin: 0 auto;
    /* REMOVED initial hidden state */
    transition: opacity 0.8s ease, transform 0.8s ease;
    opacity: 1 !important; /* Override global CSS */
}

.bsb-cta-content.bsb-animate-on-scroll {
    opacity: 0 !important;
    transform: translateY(30px) !important;
}

.bsb-cta-content.bsb-animate-on-scroll.visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

.bsb-cta-headline {
    color: #FFFFFF;
    font-size: clamp(2rem, 4vw, 2.75rem);
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.bsb-cta-subheadline {
    color: #CFD2D3;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.bsb-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ===== NO TESTIMONIALS MESSAGE ===== */
.bsb-no-testimonials {
    text-align: center;
    padding: 4rem 0;
    font-size: 1.2rem;
    color: #666666;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 992px) {
    .bsb-testimonial-row.bsb-row-odd,
    .bsb-testimonial-row.bsb-row-even {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* On mobile, always show pull quote first */
    .bsb-pull-quote-column {
        order: -1;
    }
    
    .bsb-testimonial-card {
        padding: 2.5rem;
    }
    
    .bsb-pull-quote-text {
        font-size: 1.3rem;
    }
    
    .bsb-quote-mark-top,
    .bsb-quote-mark-bottom {
        font-size: 4rem;
    }
    
    /* Reduce animation distance on mobile */
    .bsb-testimonials-section .bsb-testimonial-row {
        transform: translateY(30px);
    }
    
    .bsb-testimonials-section .bsb-cta-content {
        transform: translateY(20px);
    }
}

@media (max-width: 768px) {
    .bsb-testimonials-section {
        padding: 4rem 0;
    }
    
    .bsb-container-wide {
        padding: 0 1.5rem;
    }
    
    .bsb-testimonial-row {
        margin-bottom: 4rem;
    }
    
    .bsb-testimonial-card {
        padding: 2rem;
    }
    
    .bsb-testimonials-cta {
        padding: 4rem 0;
    }
    
    .bsb-cta-buttons {
        flex-direction: column;
        width: 100%;
    }
    


    
    /* Faster animations on mobile */
    .bsb-testimonials-section .bsb-testimonial-row,
    .bsb-testimonials-section .bsb-pull-quote,
    .bsb-testimonials-section .bsb-cta-content {
        transition-duration: 0.6s;
    }
}

/* REDUCE MOTION FOR ACCESSIBILITY */
@media (prefers-reduced-motion: reduce) {
    .bsb-testimonial-row,
    .bsb-pull-quote,
    .bsb-cta-content,
    .bsb-testimonial-card {
        transition: none !important;
        animation: none !important;
    }
    
    /* Instantly visible when in viewport */
    .bsb-testimonials-section .bsb-testimonial-row,
    .bsb-testimonials-section .bsb-pull-quote,
    .bsb-testimonials-section .bsb-cta-content {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .bsb-testimonial-preview {
        display: none !important;
    }
    
    .bsb-testimonial-full {
        display: block !important;
    }
    
    .bsb-read-more-btn {
        display: none !important;
    }
    
    .bsb-testimonial-card {
        box-shadow: none;
        border: 1px solid #CFD2D3;
        page-break-inside: avoid;
    }
    
    .bsb-testimonial-row {
        page-break-inside: avoid;
        margin-bottom: 2rem;
    }
}





//* ========================================
   ATTORNEY DIRECTORY - HERO
======================================== */

.atty-dir-hero {
    position: relative;
    height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Background gradient layer */
.atty-dir-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1E386B 0%, #1E386B 100%);
    z-index: 1;
}

/* Radial gradient overlays for depth */
.atty-dir-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        ellipse at top right,
        rgba(249, 166, 45, 0.15) 0%,
        transparent 60%
    ),
    radial-gradient(
        ellipse at bottom left,
        rgba(212, 224, 249, 0.1) 0%,
        transparent 50%
    );
    z-index: 2;
}

/* Animated SVG pattern */
.atty-dir-hero-pattern {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D9AD77' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.7;
    z-index: 3;
    animation: atty-dir-pattern-drift 60s linear infinite;
}

@keyframes atty-dir-pattern-drift {
    0% { transform: translate(0, 0); }
    100% { transform: translate(60px, 60px); }
}

/* Content container */
.atty-dir-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    padding: 2rem;
    max-width: 800px;
}

/* Accent text above title */
.atty-dir-hero-accent {
    display: inline-block;
    font-family: "Work Sans", sans-serif;
    font-weight: 500;
    font-size: clamp(0.85rem, 1.2vw, 0.95rem);
    color: #F9A62D;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    margin-bottom: 1rem;
}

/* Main hero title */
.atty-dir-hero-title {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(2.75rem, 5vw, 3.75rem);
    color: #FFFFFF;
    margin-bottom: 1rem;
    letter-spacing: 0.01em;
    line-height: 1.2;
}

/* Orange accent for specific words */
.atty-dir-hero-title .bsb-text-accent {
    color: #F9A62D;
}

/* Subtitle/description */
.atty-dir-hero-subtitle {
    font-family: "Work Sans", sans-serif;
    font-weight: 400;
    font-size: clamp(1rem, 1.5vw, 1.15rem);
    color: rgba(255, 255, 255, 0.85);
    margin: 0;
    letter-spacing: 0.03em;
    line-height: 1.6;
}

/* ========================================
   HERO RESPONSIVE
======================================== */

@media (max-width: 768px) {
    .atty-dir-hero {
        height: 380px;
    }
    
    .atty-dir-hero-content {
        padding: 1.5rem;
    }
    
    .atty-dir-hero-subtitle {
        font-size: 0.95rem;
    }
}

/* ========================================
   MAIN CONTAINER
======================================== */

.atty-dir-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 6rem 2rem;
}

/* ========================================
   ATTORNEY GRID
   Fixed-width columns with centered grid
   ensures equidistant spacing
======================================== */

.atty-dir-attorneys-grid {
    display: grid;
    grid-template-columns: repeat(2, 380px);
    gap: 2.5rem;
    justify-content: center;
}

/* ========================================
   ATTORNEY CARD - BASE
   Shared styles for both attorney & staff
======================================== */

.atty-dir-card {
    width: 100%;
    position: relative;
    background: #FFFFFF;
    border-radius: 0;
    overflow: hidden;
    box-shadow: 0 10px 40px rgba(31, 56, 107, 0.1);
    display: block;
    color: inherit;
}

/* ========================================
   ATTORNEY CARDS (linked, interactive)
   Hover effects only on attorney cards
======================================== */

.atty-dir-card-attorney {
    transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.atty-dir-card-attorney:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 60px rgba(31, 56, 107, 0.2);
}

/* Decorative bottom bar on hover — attorneys only */
.atty-dir-card-attorney::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, #F9A62D, #D4E0F9);
    transition: width 0.5s ease;
}

.atty-dir-card-attorney:hover::after {
    width: 100%;
}

/* Image zoom on hover — attorneys only */
.atty-dir-card-attorney:hover .atty-dir-image {
    transform: scale(1.03);
}

/* Image overlay on hover — attorneys only */
.atty-dir-card-attorney:hover .atty-dir-image-overlay {
    opacity: 1;
}

/* Name color change on hover — attorneys only */
.atty-dir-card-attorney:hover .atty-dir-name {
    color: #F9A62D;
}

/* ========================================
   STAFF CARDS (static, non-interactive)
   No hover effects, no pointer cursor
======================================== */

.atty-dir-card-staff {
    transition: none;
    cursor: default;
}

/* Static wrapper (replaces <a> tag for staff) */
.atty-dir-card-static {
    display: block;
    color: inherit;
    cursor: default;
}

/* ========================================
   CARD LINK (wraps image + name/title)
   Used only on attorney cards
======================================== */

.atty-dir-card-link {
    display: block;
    text-decoration: none;
    color: inherit;
    cursor: pointer;
}

/* ========================================
   IMAGE CONTAINER
======================================== */

.atty-dir-image-container {
    position: relative;
    width: 100%;
    height: 350px;
    overflow: hidden;
    background: #F3F6FB;
}

.atty-dir-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}



/* ========================================
   INFO SECTION
======================================== */

.atty-dir-info {
    padding: 2rem 2rem 0;
    position: relative;
    background: #FFFFFF;
}

.atty-dir-name {
    color: #1F386B;
    font-size: clamp(1.6rem, 2.5vw, 2rem);
    margin-bottom: 0.2rem;
    transition: color 0.3s ease;
}

.atty-dir-title {
    color: #F9A62D;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* ========================================
   CONTACT WRAPPER
======================================== */

.atty-dir-contact-wrapper {
    padding: 0 2rem 2rem;
    background: #FFFFFF;
}

/* ========================================
   DIVIDER
======================================== */

.atty-dir-divider {
    border: none;
    border-top: 1px solid #D4E0F9;
    margin: 1rem 0;
}

/* ========================================
   CONTACT INFO
======================================== */

.atty-dir-contact {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 0;
}

.atty-dir-contact-item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    transition: all 0.3s ease;
}

.atty-dir-contact-item:hover {
    text-decoration: underline;
}

.atty-dir-contact-item i {
    color: #F9A62D;
    font-size: 0.85rem;
}

/* Prevent icon from getting underlined on hover */
.atty-dir-contact-item:hover i {
    text-decoration: none;
}

/* ========================================
   BIO PREVIEW (currently commented out)
======================================== */

.atty-dir-bio-preview {
    color: #666666;
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 2rem;
}

/* ========================================
   EXPERTISE TAGS
======================================== */

.atty-dir-expertise {
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.atty-dir-expertise-tag {
    background: #F3F6FB;
    color: #1F386B;
    padding: 0.4rem 1rem;
    border-radius: 20px;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.3s ease;
}

.atty-dir-card-attorney:hover .atty-dir-expertise-tag {
    background: #1F386B;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* ========================================
   ANIMATIONS
======================================== */

@keyframes attyDirFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.atty-dir-fade-in-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
    transition-delay: calc(var(--animation-order, 0) * 100ms);
}

/* Hide ONLY after JS has opted this element into scroll animation */
.atty-dir-fade-in-scroll.bsb-animate-on-scroll:not(.bsb-in-view) {
    opacity: 0;
    transform: translateY(20px);
}

/* ========================================
   TABLET RESPONSIVE (max-width: 1024px)
======================================== */

@media (max-width: 1024px) {
    .atty-dir-attorneys-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .atty-dir-image-container {
        height: 400px;
    }
}

/* ========================================
   MOBILE RESPONSIVE (max-width: 768px)
======================================== */

@media (max-width: 768px) {
    .atty-dir-hero {
        padding: 6rem 1.5rem 4rem;
    }
    
    .atty-dir-container {
        padding: 4rem 1.5rem;
    }
    
    .atty-dir-attorneys-grid {
        grid-template-columns: 1fr;
        max-width: 600px;
        margin-left: auto;
        margin-right: auto;
    }
    
    .atty-dir-image-container {
        height: 400px;
    }
    
    .atty-dir-info {
        padding: 1.5rem 1.5rem 0;
    }
    
    .atty-dir-contact-wrapper {
        padding: 0 1.5rem 1.5rem;
    }
    
    .atty-dir-contact {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.5rem;
    }
}

/* ========================================
   PRINT STYLES
======================================== */

@media print {
    .atty-dir-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #D4E0F9;
    }
}

/* ========================================
   ATTORNEY BIO PAGE STYLES
======================================== */

   
/* ========================================
   ATTORNEY BIO PAGE STYLES
======================================== */

   
.atty-hero {
    position: relative;
    height: 70vh;
    min-height: 800px;
    background-size: cover;
    background-position: center top;
}

.atty-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(to bottom right,
  rgba(0,0,0,0.3) 0%,
  rgba(0,0,0,0.1) 25%,
  rgba(0,0,0,0.0) 100%
);}

.atty-hero-content {
    position: absolute;
    top: 50%;
    left: 14%;
    transform: translateY(-50%);
    z-index: 2;
    text-align: left;
}

.atty-hero-content .atty-name {
	font-family: "Amiri", serif;
    font-weight: 400;
    color: #FFFFFF;
    font-size: clamp(0.9rem, 3vw, 1.8rem);
    font-weight: 300;
    letter-spacing: 4px;
    text-transform: uppercase;
    margin-bottom: 0.25rem;
    opacity: 0;
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
}

.atty-hero-content .atty-title {
    color: #F9A62D;
    font-size: clamp(0.7rem, 1.5vw, 0.7rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    opacity: 0;
    animation: fadeIn 0.6s ease-out 1.5s forwards;
    margin-bottom: 0;
    padding-bottom: 0;
}


/* Hidden on desktop, visible on tablets/phones */
.atty-mobile-header {
    display: none;
}

@media (max-width: 1024px) {
    .atty-mobile-header {
        display: block;
    }
}

/* Hide on mobile */
@media (max-width: 1024px) {
    .atty-hero-content {
        display: none;
    }
    
    .atty-hero {
    position: relative;
    height: 60vh;
    min-height: 700px;
    background-size: cover;
    background-position: center top;
}
    
}

/* Hide on mobile */
@media (max-width: 768px) {
     
    .atty-hero {
    position: relative;
    height: 50vh;
    min-height: 400px;
    background-size: cover;
    background-position: center top;
}
    
}



@media only screen and (-webkit-min-device-pixel-ratio: 3) {
 .atty-hero-content {
        display: none;
    }
}

@media only screen and (min-device-width: 375px) and (max-device-width: 414px) and (-webkit-min-device-pixel-ratio: 3) {
.atty-hero-content {
        display: none;
    }
}

.atty-hero-contact {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid rgba(255, 255, 255, 0.0);
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    opacity: 0;
    animation: fadeIn 0.6s ease-out 2s forwards;
}

.atty-hero-contact-link {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.85rem;
    font-weight: 300;
    letter-spacing: 0.5px;
    text-decoration: none;
    transition: color 0.3s ease;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.atty-hero-contact-link:hover {
    color: #F9A62D;
}

.atty-hero-contact-link i {
    font-size: 0.75rem;
    color: #F9A62D;
    width: 14px;
    text-align: center;
}


/* ========================================
   ANIMATED ORANGE VERTICAL LINE SYSTEM
   ======================================== */



/* Base Reusable Class */
.atty-orange-line {
    position: absolute;
    left: 50%;
    transform: translateX(-50%) scaleY(0);
    transform-origin: var(--line-origin, top);
    width: var(--line-width, 3px);
    height: var(--line-height, 100px);
    background: #F9A62D;
    z-index: var(--line-z-index, 5);
    top: var(--line-top, auto);
    bottom: var(--line-bottom, auto);
    animation: lineGrow var(--line-duration, 1.2s) ease-out var(--line-delay, 0s) forwards;
}

@keyframes lineGrow {
    to { transform: translateX(-50%) scaleY(1); }
}

/* Page-Specific Configurations */
.atty-orange-line-hero {
    --line-height: 80px;
    --line-delay: 0.5s;
    --line-z-index: 3;
    --line-bottom: 0;
}

.atty-orange-line-quote {
    --line-height: 80px;
    --line-delay: 1.5s;
    --line-z-index: 1;
    --line-top: 0;
}

.atty-orange-line-after-quote {
    --line-height: 80px;
    --line-duration: 0.6s;
    --line-delay: 4.2s;
    --line-z-index: 5;
    --line-bottom: 0;
    --line-top: auto;
    --line-origin: top;  /* Grows upward from bottom */
}

.atty-orange-line-practice-directory {
    --line-height: 80px;
    --line-delay: 1.5s;
    --line-z-index: 1;
    --line-top: 0;
}


/* Example: Another Page */
.atty-orange-line-contact {
    --line-height: 150px;
    --line-width: 5px;
    --line-delay: 1s;
}

/* Hide orange accent lines on phones */
@media (max-width: 767px) {
  .atty-orange-line,
  .atty-orange-line-hero,
  .atty-orange-line-quote,
  .atty-orange-line-after-quote,
  .atty-orange-line-practice-directory,
  .atty-orange-line-contact {
    display: none !important;
    animation: none !important;
    transform: none !important;
  }
}


/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .atty-orange-line {
        animation: none;
        transform: translateX(-50%) scaleY(1);
    }
}




/* Main Container */
.atty-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 6rem 2rem;
    position: relative;
}

/* Grid Layout */
.bsb-grid {
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 3rem;
    position: relative;
}

.atty-sidebar {
    display: flex;
    flex-direction: column;
}



.atty-sidebar h3 {
    color: #1F386B;
    font-size: 1.1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 1.5rem;
    padding-top:10px;
}

/* =========================================
   PRACTICE AREAS LIST — DOT + LOAD CASCADE
========================================= */

/* PRACTICE AREAS LIST — DOT + LOAD CASCADE */

.atty-sidebar .practice-areas-list { flex-shrink: 0; }

.practice-areas-list ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.practice-areas-list li {
  position: relative;
  padding: 0.75rem 0 0.75rem 1.25rem;
  color: #1F386B;
  font-weight: 500;
  font-size: 0.95rem;

  transition:
    opacity 450ms ease var(--stagger-delay, 0ms),
    transform 450ms ease var(--stagger-delay, 0ms);
}

.practice-areas-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.15rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #F9A62D;

  transition:
    opacity 300ms ease var(--stagger-delay, 0ms),
    transform 300ms ease var(--stagger-delay, 0ms);
}

.practice-areas-list li::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, #eceded 0%, #eceded 70%, rgba(236,237,237,0) 100%);
}

.practice-areas-list li:last-child::after { display: none; }

/* hidden state */
.practice-areas-list.is-stagger li {
  opacity: 0;
  transform: translateY(10px);
}

.practice-areas-list.is-stagger li::before {
  opacity: 0;
  transform: scale(0.6);
}

/* revealed state */
.practice-areas-list.is-stagger.is-stagger-loaded li {
  opacity: 1;
  transform: translateY(0);
}

.practice-areas-list.is-stagger.is-stagger-loaded li::before {
  opacity: 1;
  transform: scale(1);
}




/* Quote container */
.atty-sidebar-quote {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 2.5rem 0;

  opacity: 0;
  transform: translateY(16px);
  transition: opacity 500ms ease, transform 500ms ease;
}

.atty-sidebar-quote.bsb-in-view {
  opacity: 1;
  transform: translateY(0);
}

.atty-sidebar-quote blockquote {
  margin: 0;
  padding: 0 1.25rem 0 0;
  border-right: 3px solid #F9A62D;
}

.atty-sidebar-quote blockquote p {
  font-family: "Amiri", serif;
  font-size: clamp(1.1rem, 1.8vw, 1.3rem);
  line-height: 1.65;
  color: #1F386B;
  font-style: italic;
  margin-bottom: 0.75rem;
}

.atty-sidebar-quote blockquote cite {
  display: block;
  font-family: "Work Sans", sans-serif;
  font-weight: 400;
  font-size: 0.9rem;
  color: #666666;
  font-style: normal;
  letter-spacing: 0.01em;
}

@media (max-width: 768px) {
  .atty-sidebar-quote {
    padding: 1.5rem 0 0.5rem;
  }
}


/* Main Content */
.atty-content {
    position: relative;
}

.atty-title {
    color: #F9A62D;
    font-size: clamp(1.2rem, 2.5vw, 1.8rem);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 2px;
    margin-bottom: 0;
    padding-bottom: 3rem;
    position: relative;
}

.atty-title::after {
    content: '';
    position: absolute;
    bottom: 1.5rem;
    left: 0;
    width: 0;
    height: 3px;
    background: #F9A62D;
    animation: lineExtend 0.8s ease-out 0.3s forwards;
}

@keyframes lineExtend {
    from {
        width: 0;
    }
    to {
        width: 100%;
    }
}

.atty-contact-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.atty-contact-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
    transition: color 0.3s ease;
}

.atty-contact-link:hover {
    color: #F9A62D;
}

.atty-contact-link i {
    color: #F9A62D;
    font-size: 0.9rem;
}


.atty-content h2 {
    color: #1F386B;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 1.5rem;
}

.atty-content p {
    margin-bottom: 1.5rem;
    font-size: 1.05rem;
}

/* ========================================
   RESPONSIVE STYLES
======================================== */

/* Tablet (1024px and below) */
@media (max-width: 1024px) {
   
    
    .atty-hero-content {
        padding: 0 2rem 3rem 2rem;
    }
    
    .atty-name {
        font-size: clamp(2rem, 4vw, 3rem);
    }
    
    .atty-title {
        font-size: clamp(1rem, 2vw, 1.4rem);
        padding-bottom: 2.5rem;
    }
    
    .atty-quote-section {
        padding: 3rem 2rem;
    }
    
    .atty-quote-carousel {
        padding: 40px 0;
        min-height: 180px;
    }
    
    .atty-quote-item blockquote {
        font-size: clamp(1.6rem, 4vw, 1.8rem);
    }
    
    .atty-container {
        padding: 3rem 2rem;
    }
    
    .bsb-grid {
        gap: 2.5rem;
    }
    
    /* Stack bio grid on tablet: content first, sidebar second */
    .atty-container > .bsb-grid:not(.atty-credentials) {
        grid-template-columns: 1fr;
    }
    
    .atty-container > .bsb-grid:not(.atty-credentials) .atty-content {
        order: 1;
    }
    
    .atty-container > .bsb-grid:not(.atty-credentials) .atty-sidebar {
        order: 2;
        border-top: 2px solid #CFD2D3;
        padding-top: 2rem;
        margin-top: 1rem;
        text-align: center;
    }
    
    /* Center name, title, and contact bar on tablet/mobile */
    .atty-content h1 {
        text-align: center;
    }
    
    .atty-content .atty-title {
        text-align: center;
    }
    
    .atty-content .atty-title::after {
        left: 50%;
        transform: translateX(-50%);
    }
    
    .atty-content .atty-contact-bar {
        justify-content: center;
    }
}

/* Tablet Portrait & Large Mobile (768px and below) */
@media (max-width: 768px) {

    
    .atty-hero-content {
        padding: 0 1.5rem 2.5rem 1.5rem;
    }
    
    .atty-name {
        font-size: clamp(1.8rem, 4vw, 2.5rem);
        margin-bottom: 0.75rem;
    }
    
    .atty-title {
        font-size: clamp(0.95rem, 2vw, 1.2rem);
        letter-spacing: 1.5px;
        padding-bottom: 2rem;
    }
    
    /* Adjust orange line animations for mobile */
    @keyframes lineGrowDown {
        from { height: 0; }
        to { height: 80px; }
    }
    
    @keyframes lineGrowAfterQuote {
        from { height: 0; }
        to { height: 60px; }
    }
    
    .atty-orange-line-hero,
    .atty-orange-line-quote,
    .atty-orange-line-after-quote {
        width: 6px;
    }
    
    .atty-quote-section {
        padding: 2.5rem 1.5rem;
    }
    
    .atty-quote-carousel {
        padding: 30px 0;
        min-height: 150px;
    }
    
    .atty-quote-item blockquote {
        font-size: clamp(1rem, 2.5vw, 1.4rem);
        line-height: 1.6;
        margin-bottom: 1rem;
    }
    
    .atty-quote-cite {
        font-size: 0.9rem;
    }
    
    .atty-container {
        padding: 2.5rem 1.5rem;
    }
    
    /* Stack grid layout on tablet/mobile */
    .bsb-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Practice areas styling for mobile */
    .atty-sidebar {
        border-bottom: none;
        padding-bottom: 2rem;
        margin-bottom: 1rem;
        text-align: center;
    }
    
    .atty-sidebar h3 {
        font-size: 1rem;
        	   padding-top:5px;
        margin-bottom: 1rem;
    }
    
    .practice-areas-list {
        display: block;
        margin: 0 auto;
    }
    
    .practice-areas-list li {
        padding: 0.5rem 1rem;
        border-radius: 4px;
        font-size: 0.9rem;
        flex: 0 1 auto;

    }
    
    .practice-areas-list li::after {
        display: none;
    }
    
    .atty-content p {
        font-size: 1rem;
        margin-bottom: 1.25rem;
    }
}


   /* Credentials Section */
.atty-credentials {
    margin-top: 6rem;
    position: relative;
}

.credentials-hr {
    width: 100%;
    height: 3px;
    margin: 2rem auto ;
    background: linear-gradient(
        to right,
        transparent 0%,
        #F9A62D 15%,
        #F9A62D 85%,
        transparent 100%
    );
    transform: scaleX(0);
    transition: transform 0.8s ease-out;
}

.credentials-hr.bsb-in-view {
    transform: scaleX(1);
}

.credentials-tabs {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-right: 3px solid #CFD2D3;
    position: relative;
    min-height: 100%;
}

.credentials-tab {
    font-family: "Amiri", serif;
    background: transparent;
    padding: 1rem 1.5rem;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 1.1rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: #516286;
    border: none;
    text-align: left;
    position: relative;
}

.credentials-tab::after {
    content: '';
    position: absolute;
    right: -3px;
    top: 0;
    bottom: 0;
    width: 3px;
    background: #F9A62D;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.credentials-tab.active::after {
    opacity: 1;
}

.credentials-tab.active {
    color: #F9A62D;

}

.credentials-tab:hover {
    color: #F9A62D;
}

.credentials-content {
    background: #FFFFFF;
    position: relative;
    padding-top: 15px;
}

.credentials-panel {
    display: none;
    padding: 0 2rem;
}

.credentials-panel.active {
    display: block;
}

.credentials-panel p {margin-bottom:0px}

.credentials-panel h4 {
    color: #1F386B;
    font-size: 1.6rem;
    margin-bottom: 1rem;
    margin-top: 1.5rem;
}

.credentials-panel h4:first-child {
    margin-top: 0;
}

.credentials-panel ul {
    list-style-type: disc;
    padding-left: 0;
}

.credentials-panel ul ul {
    list-style-type: none;
    padding-left: 20px;
}

.credentials-panel li {
    padding: 0.5rem 0;
    padding-left: 1.5rem;
    position: relative;
}

/* Ensure grid items are same height for divider */
.bsb-grid.atty-credentials {
    align-items: stretch;
}

.atty-credentials .atty-sidebar {
    display: flex;
    flex-direction: column;
}

.credentials-tabs {
    flex: 1;
}

/* Tablet Responsive (1024px and below) */
@media (max-width: 1024px) {
    .atty-credentials {
        margin-top: 4rem;
    }
    
    .credentials-content {
        min-height: auto;
    }
    
    .bsb-grid.atty-credentials {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    /* Tabs become full-width stacked buttons */
    .credentials-tabs {
        flex-direction: column;
        border-right: none;
        border-bottom: none;
        gap: 0.5rem;
    }
    
    .credentials-tab {
        background: #F5F5F5;
        padding: 1.25rem 1.5rem;
        border-left: 3px solid transparent;
        text-align: center;
    }
    
    .credentials-tab::after {
        content: '';
        position: absolute;
        left: 0;
        right: auto;
        top: 0;
        bottom: 0;
        width: 3px;
        height: 100%;
        background: #F9A62D;
        opacity: 0;
        transition: opacity 0.3s ease;
    }
    
    .credentials-tab.active {
        background: #FFFFFF;
        border-left-color: #F9A62D;
    }
    
    .credentials-tab.active::after {
        opacity: 1;
    }
    
    .credentials-panel {
        padding: 2rem 1rem;
    }
}

/* Mobile Responsive (768px and below) */
@media (max-width: 768px) {
    .atty-credentials {
        margin-top: 3rem;
    }
    
    .credentials-hr {
        top: -2rem;
    }
    
    .bsb-grid.atty-credentials {
        gap: 1.5rem;
    }
    
    .credentials-tabs {
        gap: 0.75rem;
    }
    
    .credentials-tab {
        padding: 1rem 1rem;
        font-size: 1rem;
    }
    
    .credentials-panel {
        padding: 1.5rem 0.5rem;
    }
    
    .credentials-panel h4 {
        font-size: 1.3rem;
    }
}


}


/* ========================================
   PRACTICE AREAS DIRECTORY PAGE
   ======================================== */

/* === COLOR VARIABLES === */
:root {
    --pa-dir-navy: #1F386B;
    --pa-dir-gold: #F9A62D;
    --pa-dir-putty: #D4E0F9;
    --pa-dir-ecru: #F3F6FB;
    --pa-dir-white: #FFFFFF;
}


/* ========================================
   PRACTICE AREAS GRID SECTION
   ======================================== */

.practice-areas-grid-section {
    background: #FFFFFF;
    padding: 0 2rem 5rem 2rem;
    position: relative;
}

.practice-areas-container {
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 5rem;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3rem;
}

/* Individual Practice Area Card */
.practice-area-card {
    position: relative;
    background: #FFFFFF;
    padding: 3rem 2rem;
    text-align: center;
    transition: transform 0.3s ease;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.practice-area-card:hover {
    transform: translateY(-5px);
}

/* Center Column - Add Vertical Dividers on Desktop */
@media (min-width: 993px) {
    .practice-area-card-center::before,
    .practice-area-card-center::after {
        content: '';
        position: absolute;
        top: 10%;
        height: 80%;
        width: 1px;
        background: #F9A62D;
        opacity: 0.5;
    }
    
    .practice-area-card-center::before {
        left: 0;
    }
    
    .practice-area-card-center::after {
        right: 0;
    }
}

/* Watermark Icon - Subtle Background */
.practice-icon-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12rem;
    color: #F9A62D;
    opacity: 0.0;
    z-index: 1;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.practice-area-card:hover .practice-icon-watermark {
    opacity: 0.05;
    transform: translate(-50%, -50%) scale(1.05);
}

/* Practice Title Link (wraps the h2) */
.practice-title-link {
    text-decoration: none;
    display: block;
    transition: opacity 0.3s ease;
}

.practice-title-link:hover {
    opacity: 0.8;
}

/* Practice Title */
.practice-title {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(1.75rem, 2.5vw, 2rem);
    color: #1F386B;
    margin-bottom: 0.5rem;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease;
}

.practice-title-link:hover .practice-title {
    color: #F9A62D;
}

/* Orange Underline - Animated on Hover */
.practice-title-underline {
    width: 60px;
    height: 3px;
    background: #F9A62D;
    margin: 0 auto 1.5rem;
    position: relative;
    z-index: 2;
    transition: width 0.3s ease;
}

.practice-area-card:hover .practice-title-underline {
    width: 100px;
}

/* Practice Description */
.practice-description {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1rem, 1.2vw, 1.1rem);
    color: #333;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    position: relative;
    z-index: 2;
}

/* Practice Link - Anchored to Bottom */
.practice-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    font-family: "Work Sans", sans-serif;
    font-size: 1rem;
    font-weight: 500;
    color: #1F386B;
    text-decoration: none;
    position: relative;
    z-index: 2;
    transition: color 0.3s ease, gap 0.3s ease;
    margin-top: auto; /* Pushes to bottom of flex container */
}

.practice-link:hover {
    color: #F9A62D;
    gap: 0.75rem;
}

.practice-link i {
    font-size: 0.875rem;
    transition: transform 0.3s ease;
}

.practice-link:hover i {
    transform: translateX(3px);
}

/* ========================================
   WHY CHOOSE BSB SECTION
   ======================================== */

.practice-why-section {
    background: #F3F6FB;
    padding: 5rem 2rem;
}

.practice-why-container {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}

.practice-why-title {
    font-family: "Amiri", serif;
    font-weight: 400;
    font-size: clamp(2rem, 4vw, 2.75rem);
    color: #1F386B;
    margin-bottom: 1.5rem;
    line-height: 1.3;
}

.practice-why-title .bsb-text-accent {
    color: #F9A62D;
}

.practice-why-text {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1.05rem, 1.5vw, 1.2rem);
    color: #666666;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

/* CTA Button Group */
.practice-cta-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 992px) {
    .practice-areas-container {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }

    .practice-area-card {
        padding: 2.5rem 2rem;
    }

    .practice-icon-watermark {
        font-size: 10rem;
    }
}

@media (max-width: 768px) {
    .atty-dir-hero {
        height: 380px;
    }
    
    .atty-dir-hero-content {
        padding: 1.5rem;
    }
    
    .atty-dir-hero-subtitle {
        font-size: 0.95rem;
    }

    .practice-areas-grid-section {
        padding: 0 1.5rem 3.5rem 1.5rem;
    }

    .practice-areas-container {
        padding-top: 3.5rem;
    }

    .practice-area-card {
        padding: 2rem 1.5rem;
    }

    .practice-icon-watermark {
        font-size: 8rem;
    }

    .practice-why-section {
        padding: 3.5rem 1.5rem;
    }

    .practice-cta-group {
        flex-direction: column;
    }

    .bsb-button-primary,
    .bsb-button-secondary {
        width: 100%;
        text-align: center;
    }

    /* Adjust hero orange line for mobile */
    @keyframes lineGrowDown {
        from { height: 0; }
        to { height: 80px; }
    }
}

@media (max-width: 480px) {
    .atty-dir-hero {
        height: 350px;
    }

    .practice-areas-grid-section {
        padding: 0 1rem 3rem 1rem;
    }

    .practice-areas-container {
        padding-top: 3rem;
    }

    .practice-area-card {
        padding: 1.5rem 1rem;
    }

    .practice-icon-watermark {
        font-size: 6rem;
    }

    .practice-why-section {
        padding: 3rem 1rem;
    }

    /* Further adjust hero orange line for small mobile */
    @keyframes lineGrowDown {
        from { height: 0; }
        to { height: 60px; }
    }
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .atty-dir-hero-pattern,
    .atty-orange-line-hero,
    .atty-orange-line-quote {
        display: none;
    }

    .practice-icon-watermark {
        opacity: 0.02;
    }

    .practice-link {
        color: #1F386B;
        text-decoration: underline;
    }

    .bsb-button-primary,
    .bsb-button-secondary {
        border: 2px solid #1F386B;
        background: transparent;
        color: #1F386B;
    }
}

/* ========================================
   ACCESSIBILITY ENHANCEMENTS
   ======================================== */

.practice-link:focus,
.bsb-button-primary:focus,
.bsb-button-secondary:focus {
    outline: 2px solid #F9A62D;
    outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  /* Only disable motion where you intentionally animate */
  .bsb-animate-on-scroll,
  .bsb-animate-once,
  .practice-areas-list li,
  .practice-areas-list li::before,
  .atty-sidebar-quote {
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
}


    .atty-dir-hero-pattern {
        animation: none;
    }


}


/* ========================================
   INTRODUCTION SECTION
   ======================================== */
.bsb-pa-dir-intro-section {
    padding: 6rem 0;
    background: var(--pa-dir-white);
}

.bsb-pa-dir-intro-grid {
    display: grid;
    grid-template-columns: 1.2fr 0.8fr;
    gap: 4rem;
    align-items: start;
}

.bsb-pa-dir-intro-content h2 {
    color: var(--pa-dir-navy);
    margin-bottom: 2rem;
}

.bsb-pa-dir-intro-text {
    color: #333333;
}

.bsb-pa-dir-intro-text .bsb-lead {
    margin-bottom: 2rem;
}

/* Feature List */
.bsb-pa-dir-feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsb-pa-dir-feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    margin-bottom: 1.5rem;
    padding: 1.5rem;
    background: var(--pa-dir-ecru);
    border-radius: 8px;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-feature-list li:hover {
    transform: translateX(8px);
    background: #dbd7d0;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.1);
}

.bsb-pa-dir-feature-list i {
    color: var(--pa-dir-gold);
    font-size: 1.5rem;
    margin-top: 0.2rem;
    flex-shrink: 0;
}

.bsb-pa-dir-feature-list strong {
    display: block;
    color: var(--pa-dir-navy);
    font-weight: 600;
    font-size: 1.1rem;
    margin-bottom: 0.25rem;
}

.bsb-pa-dir-feature-list span {
    color: #666666;
    font-size: 0.95rem;
}

/* Stats Container */
.bsb-pa-dir-stats-container {
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.bsb-pa-dir-stat-card {
    background: linear-gradient(135deg, var(--pa-dir-navy) 0%, #3a4a59 100%);
    padding: 2.5rem;
    border-radius: 12px;
    text-align: center;
    position: relative;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-stat-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        135deg,
        transparent 0%,
        rgba(249, 166, 45, 0.1) 100%
    );
    z-index: 1;
}

.bsb-pa-dir-stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(31, 56, 107, 0.3);
}

.bsb-pa-dir-stat-number {
    position: relative;
    z-index: 2;
    font-size: clamp(3rem, 5vw, 4rem);
    color: var(--pa-dir-gold);
    line-height: 1;
    margin-bottom: 0.5rem;
}

.bsb-pa-dir-stat-label {
    position: relative;
    z-index: 2;
    color: var(--pa-dir-putty);
    font-size: 1.1rem;
    font-weight: 500;
}

/* ========================================
   PRACTICE AREAS PREVIEW SECTION
   ======================================== */

.bsb-practice-preview-section {
    background:#FFF;
}

.bsb-practice-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.bsb-practice-car {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    text-decoration: none;
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.bsb-practice-car:hover {
    transform: translateY(-8px);
    box-shadow: 0 8px 24px rgba(31, 56, 107, 0.2);
}

/* ========================================
   PRACTICE PREVIEW CARD ENTRANCE ANIMATIONS
======================================== */

.bsb-practice-car {
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 0.85s cubic-bezier(0.4, 0, 0.2, 1),
    opacity 0.85s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Start positions */
.bsb-practice-car.bsb-slide-left   { transform: translateX(-40px); }
.bsb-practice-car.bsb-slide-right  { transform: translateX( 40px); }
.bsb-practice-car.bsb-slide-up     { transform: translateY( 30px); }

/* When in view */
.bsb-practice-car.bsb-in-view {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

/* Stagger timing (the order you asked for) */
.bsb-practice-car.bsb-delay-1 { transition-delay: 0ms; }
.bsb-practice-car.bsb-delay-2 { transition-delay: 140ms; }
.bsb-practice-car.bsb-delay-3 { transition-delay: 280ms; }

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .bsb-practice-car {
    opacity: 1;
    transform: none !important;
    transition: none !important;
  }
}


.bsb-practice-icon {
    font-size: 3rem;
    color: #F9A62D;
    margin-bottom: 1rem;
    display: block;
    transition: transform 0.3s ease, color 0.3s ease;
}

.bsb-practice-card:hover .bsb-practice-icon {
    transform: scale(1.1);
    color: #1F386B;
}

.bsb-practice-title {
    color: #1F386B;
    margin-bottom: 1rem;
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
}

.bsb-practice-description {
    color: #1F386B;
    margin-bottom: 1rem;
    line-height: 1.6;
}

.bsb-practice-link {
    color: #F9A62D;
    margin-top: 1rem;
    display: inline-block;
    transition: color 0.3s ease;
}

.bsb-practice-card:hover .bsb-practice-link {
    color: #1F386B;
}

/* Mobile adjustments */
@media (max-width: 768px) {
    .bsb-practice-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .bsb-practice-card {
        padding: 1.5rem;
    }
}

/* ========================================
   PRACTICE AREA SECTIONS
   ======================================== */
.bsb-pa-dir-section {
    padding: 6rem 0;
    position: relative;
}

.bsb-pa-dir-patents-section {
    background: var(--pa-dir-white);
}

.bsb-pa-dir-trademarks-section {
    background: var(--pa-dir-ecru);
}

.bsb-pa-dir-advisory-section {
    background: var(--pa-dir-white);
}

/* Practice Area Layout */
.bsb-pa-dir-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
}

.bsb-pa-dir-layout-reverse {
    direction: rtl;
}

.bsb-pa-dir-layout-reverse > * {
    direction: ltr;
}

/* Image Wrapper */
.bsb-pa-dir-image-wrapper {
    position: relative;
}

.bsb-pa-dir-image-container {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-image-container:hover {
    transform: translateY(-12px) scale(1.02);
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.3);
}

.bsb-pa-dir-practice-image {
    width: 100%;
    height: 500px;
    object-fit: cover;
    display: block;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-image-container:hover .bsb-pa-dir-practice-image {
    transform: scale(1.08);
}

.bsb-pa-dir-image-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        180deg,
        transparent 0%,
        rgba(31, 56, 107, 0.3) 100%
    );
    z-index: 1;
}

/* Floating Badge */
.bsb-pa-dir-badge {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    background: var(--pa-dir-gold);
    color: var(--pa-dir-white);
    padding: 1.25rem 2rem;
    border-radius: 50px;
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-weight: 600;
    font-size: 1rem;
    z-index: 2;
    box-shadow: 0 8px 24px rgba(249, 166, 45, 0.4);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-badge:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(249, 166, 45, 0.6);
}

.bsb-pa-dir-badge i {
    font-size: 1.25rem;
}

/* Content Wrapper */
.bsb-pa-dir-content-wrapper {
    padding: 2rem 0;
}

.bsb-pa-dir-label {
    display: inline-block;
    color: var(--pa-dir-gold);
    font-size: 1rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    margin-bottom: 1rem;
    padding: 0.5rem 1.5rem;
    background: rgba(249, 166, 45, 0.1);
    border-radius: 50px;
}

.bsb-pa-dir-practice-heading {
    color: var(--pa-dir-navy);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.bsb-pa-dir-practice-intro {
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.7;
    color: #555555;
    margin-bottom: 2.5rem;
}

/* Services Grid */
.bsb-pa-dir-services-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-bottom: 2.5rem;
}

.bsb-pa-dir-service-item {
    display: flex;
    gap: 1rem;
    padding: 1.5rem;
    background: var(--pa-dir-white);
    border-radius: 8px;
    border-left: 3px solid var(--pa-dir-gold);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-trademarks-section .bsb-pa-dir-service-item,
.bsb-pa-dir-advisory-section .bsb-pa-dir-service-item {
    background: var(--pa-dir-ecru);
}

.bsb-pa-dir-service-item:hover {
    transform: translateX(8px);
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.1);
    border-left-width: 6px;
}

.bsb-pa-dir-service-item i {
    color: var(--pa-dir-gold);
    font-size: 1.5rem;
    margin-top: 0.25rem;
    flex-shrink: 0;
}

.bsb-pa-dir-service-item h4 {
    color: var(--pa-dir-navy);
    font-size: 1.1rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
}

.bsb-pa-dir-service-item p {
    color: #666666;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* CTA Buttons */
.bsb-pa-dir-cta-buttons {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}



.bsb-button-large {
    padding: 1.25rem 2.5rem;
    font-size: 1.1rem;
}

/* ========================================
   FINAL CTA SECTION
   ======================================== */
.bsb-pa-dir-cta {
    background: linear-gradient(135deg, var(--pa-dir-navy) 0%, #3a4a59 100%);
    padding: 6rem 0;
    position: relative;
    overflow: hidden;
}

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

.bsb-pa-dir-cta-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.bsb-pa-dir-cta-headline {
    color: var(--pa-dir-white);
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.bsb-pa-dir-cta-text {
    color: var(--pa-dir-putty);
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
    margin-bottom: 3rem;
}

.bsb-pa-dir-cta-buttons-center {
    display: flex;
    justify-content: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

/* ========================================
   ANIMATIONS
   ======================================== */
@keyframes bsbPaDirFadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes bsbPaDirBounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}

/* Scroll-triggered fade-in */
.bsb-pa-dir-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-pa-dir-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

/* Large Tablets */
@media (max-width: 1024px) {
    .bsb-pa-dir-intro-grid,
    .bsb-pa-dir-layout {
        grid-template-columns: 1fr;
        gap: 3rem;
    }
    
    .bsb-pa-dir-layout-reverse {
        direction: ltr;
    }
    
    .bsb-pa-dir-services-grid {
        grid-template-columns: 1fr;
    }
    
    .bsb-pa-dir-stats-container {
        flex-direction: row;
    }
}

/* Tablets */
@media (max-width: 768px) {
    .bsb-pa-dir-hero {
        min-height: 50vh;
        padding: 6rem 1.5rem 3rem;
        margin-top: 80px;
    }
    
    .bsb-pa-dir-section {
        padding: 4rem 0;
    }
    
    .bsb-pa-dir-intro-section {
        padding: 4rem 0;
    }
    
    .bsb-pa-dir-intro-grid,
    .bsb-pa-dir-layout {
        gap: 2rem;
    }
    
    .bsb-pa-dir-practice-image {
        height: 400px;
    }
    
    .bsb-pa-dir-badge {
        bottom: 1rem;
        right: 1rem;
        padding: 1rem 1.5rem;
        font-size: 0.9rem;
    }
    
    .bsb-pa-dir-stats-container {
        flex-direction: column;
    }
    
    .bsb-pa-dir-cta-buttons,
    .bsb-pa-dir-cta-buttons-center {
        flex-direction: column;
    }
}



/* ========================================
   PRINT STYLES
   ======================================== */
@media print {
    .bsb-pa-dir-hero-overlay,
    .bsb-pa-dir-scroll-indicator,
    .bsb-pa-dir-cta-buttons,
    .bsb-pa-dir-cta-buttons-center {
        display: none;
    }
    
    .bsb-pa-dir-section,
    .bsb-pa-dir-cta {
        padding: 2rem 0;
    }
    
    .bsb-pa-dir-practice-image {
        height: auto;
        max-height: 400px;
    }
}

/* ========================================
   BEESON SKINNER BEVERLY LLP
   BLOG TEMPLATES - PREMIUM STYLING
   Version: 1.0
   ======================================== */

/* ========================================
   BLOG INDEX - HERO SECTION
   ======================================== */

.bsb-blog-hero {
    position: relative;
    width: 100%;
    min-height: 60vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin-top: 0; /* Offset for fixed header */
    padding-top: 80px;
}

.bsb-blog-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bsb-blog-hero-image,
.bsb-blog-hero-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.bsb-blog-hero-placeholder {
    background: linear-gradient(135deg, #1F386B 0%, #1F386B 100%);
}

.bsb-blog-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to bottom,
        rgba(31, 56, 107, 0.5) 0%,
        rgba(31, 56, 107, 0.7) 50%,
        rgba(31, 56, 107, 0.98) 100%
    );
    z-index: 2;
}

.bsb-blog-hero-content {
    position: relative;
    z-index: 3;
    max-width: 1000px;
    margin: 0 auto;
    padding: 4rem 2rem;
    width: 100%;
}

.bsb-blog-hero-label {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease-out;
}

.bsb-hero-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(249, 166, 45, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 166, 45, 0.3);
    border-radius: 50px;
    color: #F9A62D;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bsb-hero-category {
    color: #F9A62D;
    font-size: 0.95rem;
    font-weight: 500;
}

.bsb-blog-hero-title {
  font-size: clamp(2rem, 8vmin, 4.5rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 1.5rem;
  animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.bsb-blog-hero-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-blog-hero-title a:hover {
    color: #F9A62D;
}

.bsb-blog-hero-meta {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.bsb-meta-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}



.author-avatar,
.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    object-fit: cover;
}





.bsb-meta-date,
.bsb-meta-reading {
    color: #D4E0F9;
    font-size: 0.95rem;
    font-weight: 400;
}

.bsb-meta-divider {
    color: rgba(207, 210, 211, 0.4);
}

.bsb-blog-hero-excerpt {
    font-size: clamp(1.1rem, 2.5vw, 1.4rem);
    line-height: 1.7;
    color: #F3F6FB;
    margin-bottom: 2.5rem;
    max-width: 700px;
    animation: fadeInUp 0.8s ease-out 0.6s backwards;
}

.bsb-blog-hero-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem 2.5rem;
    background: #F9A62D;
    color: #FFFFFF;
    font-size: 1.05rem;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUp 0.8s ease-out 0.8s backwards;
}

.bsb-blog-hero-cta:hover {
    transform: translateY(-3px);
    background: #FFF;
    color: #1F386B;
}

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

.bsb-blog-hero-cta:hover .bsb-cta-arrow {
    transform: translateX(5px);
}

.bsb-scroll-indicator {
    position: absolute;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    animation: fadeIn 1s ease-out 1.5s backwards;
}

.bsb-scroll-line {
    width: 2px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #F9A62D);
    animation: scrollPulse 2s ease-in-out infinite;
}

.bsb-scroll-text {
    color: #F9A62D;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
}

@keyframes scrollPulse {
    0%, 100% {
        opacity: 0.4;
        transform: translateY(0);
    }
    50% {
        opacity: 1;
        transform: translateY(10px);
    }
}

/* ========================================
   BLOG GRID SECTION
   ======================================== */

.bsb-blog-grid-section {
    padding: 6rem 0;
    background: #FFFFFF;
}

.bsb-section-header {
    text-align: center;
    margin-bottom: 3rem;
}

.bsb-section-title {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    color: #1F386B;
    margin-bottom: 1rem;
}

.bsb-section-divider {
    width: 80px;
    height: 4px;
    background: linear-gradient(to right, transparent, #F9A62D, transparent);
    margin: 0 auto 1.5rem;
    border-radius: 2px;
}

.bsb-section-subtitle {
    font-size: clamp(1rem, 2vw, 1.2rem);
    color: #666666;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.6;
}

/* Filter Bar */
.bsb-blog-filters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 4rem;
}

.bsb-filter-btn {
    padding: 0.75rem 1.5rem;
    background: transparent;
    border: 2px solid #D4E0F9;
    border-radius: 50px;
    color: #1F386B;
    font-size: 0.95rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bsb-filter-btn:hover {
    border-color: #F9A62D;
    color: #1F386B;
    transform: translateY(-2px);
}

.bsb-filter-btn.active {
    background: #1F386B;
    border-color: #1F386B;
    color: #FFFFFF;
}

/* Blog Grid */
.bsb-blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 2.5rem;
    margin-bottom: 4rem;
}

.bsb-blog-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
}

.bsb-blog-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(31, 56, 107, 0.15);
}

.bsb-card-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%; /* 5:3 aspect ratio */
    overflow: hidden;
    background: #D4E0F9;
}

.bsb-card-image-link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bsb-card-image,
.bsb-card-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-blog-card:hover .bsb-card-image {
    transform: scale(1.08);
}

.bsb-card-placeholder {
    background: linear-gradient(135deg, #1F386B, #1F386B);
}

.bsb-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(31, 56, 107, 0.8), transparent);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 2rem;
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bsb-blog-card:hover .bsb-card-overlay {
    opacity: 1;
}

.bsb-card-read-more {
    color: #FFFFFF;
    font-size: 1rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.bsb-card-category-badge {
    position: absolute;
    top: 1.25rem;
    left: 1.25rem;
    padding: 0.5rem 1rem;
    background: rgba(249, 166, 45, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

.bsb-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bsb-card-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.875rem;
    color: #666666;
}

.bsb-card-title {
    font-size: clamp(1.25rem, 2.5vw, 1.5rem);
    line-height: 1.3;
    margin-bottom: 1rem;
    flex-grow: 1;
}

.bsb-card-title a {
    color: #1F386B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-card-title a:hover {
    color: #F9A62D;
}

.bsb-card-excerpt {
    color: #666666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
}

.bsb-card-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding-top: 1.5rem;
    border-top: 1px solid #F3F6FB;
}

.bsb-card-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
}

.bsb-card-author-name {
    color: #1F386B;
    font-size: 0.9rem;
    font-weight: 600;
}

/* Load More Button */
.bsb-load-more-wrapper {
    text-align: center;
}

.bsb-load-more-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 2.5rem;
    background: transparent;
    border: 2px solid #1F386B;
    border-radius: 6px;
    color: #1F386B;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bsb-load-more-btn:hover {
    background: #1F386B;
    color: #FFFFFF;
    transform: translateY(-2px);
}

.bsb-load-icon {
    transition: transform 0.3s ease;
}

.bsb-load-more-btn:hover .bsb-load-icon {
    transform: translateY(3px);
}

/* ========================================
   NEWSLETTER SECTION
   ======================================== */

.bsb-newsletter-section {
    padding: 6rem 0;
    background: linear-gradient(135deg, #1F386B 0%, #1F386B 100%);
}

.bsb-newsletter-card {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;
    align-items: center;
    padding: 4rem;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
}

.bsb-newsletter-title {
    font-size: clamp(2rem, 4vw, 3rem);
        color: #FFFFFF;
    margin-bottom: 1rem;
}

.bsb-newsletter-text {
    color: #D4E0F9;
    line-height: 1.7;
    font-size: 1.1rem;
}

.bsb-form-group {
    display: flex;
    gap: 0.5rem;
}

.bsb-form-input {
    flex: 1;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 1rem;
    transition: all 0.3s ease;
}

.bsb-form-input::placeholder {
    color: rgba(255, 255, 255, 0.5);
}

.bsb-form-input:focus {
    outline: none;
    border-color: #F9A62D;
    background: rgba(255, 255, 255, 0.15);
}

.bsb-form-submit {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: #F9A62D;
    border: none;
    border-radius: 6px;
    color: #FFFFFF;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.bsb-form-submit:hover {
    background: #FFF;
    color:#1F386B;
    transform: translateY(-2px);
}

.bsb-form-privacy {
    margin-top: 0.75rem;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.6);
}

/* ========================================
   SINGLE POST - HERO
   ======================================== */

.bsb-post-hero {
    position: relative;
    min-height: 60vh;
    display: flex;
    align-items: center;
    margin-top: 0;
    padding-top: 80px;
}

.bsb-post-hero-image-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}

.bsb-post-hero-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.bsb-post-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        to top,
        rgba(31, 56, 107, 0.9) 0%,
        rgba(31, 56, 107, 0.8) 100%
    );
    z-index: 2;
}

.bsb-post-hero-content {
    position: relative;
    z-index: 3;
    width: 100%;
    padding: 4rem 0;
}

.bsb-container-narrow {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
}

/* Breadcrumb */
.bsb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    font-size: 0.9rem;
}

.bsb-breadcrumb a {
    color: #D4E0F9;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-breadcrumb a:hover {
    color: #FFFFFF;
}

.bsb-breadcrumb-separator {
    color: rgba(207, 210, 211, 0.4);
}

.bsb-post-category-badge {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    background: rgba(249, 166, 45, 0.15);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(249, 166, 45, 0.3);
    border-radius: 50px;
    color: #F9A62D;
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 1.5rem;
}

.bsb-post-title {
  font-size: clamp(2rem, 8vmin, 4.5rem);
  line-height: 1.1;
  color: #fff;
  margin-bottom: 2rem;
}



.bsb-post-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.bsb-meta-author-info {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.bsb-post-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
}

.bsb-meta-author-details {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}



.bsb-meta-items {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    color: #D4E0F9;
    font-size: 0.9rem;
}

.bsb-meta-dot {
    color: rgba(207, 210, 211, 0.4);
}

/* Share Buttons */
.bsb-share-buttons {
    display: flex;
    gap: 0.75rem;
}

.bsb-share-btn {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #FFFFFF;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bsb-share-btn:hover {
    background: #F9A62D;
    border-color: #F9A62D;
    transform: translateY(-3px);
}

/* ========================================
   SINGLE POST - BODY
   ======================================== */

.bsb-post-body {
    padding: 5rem 0;
    background: #FFFFFF;
}

.bsb-container-reading {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
}

.bsb-post-layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 4rem;
    align-items: start;
}

/* Main Content */
.bsb-post-content {
    max-width: 800px;
}

.bsb-post-lede {
    font-size: clamp(1.2rem, 2.5vw, 1.5rem);
    line-height: 1.7;
    color: #1F386B;
    font-weight: 500;
    padding: 2rem;
    background: #f8f9fa;
    border-left: 4px solid #F9A62D;
    border-radius: 4px;
    margin-bottom: 3rem;
}

.bsb-post-text {
    font-size: clamp(1.05rem, 2vw, 1.15rem);
    line-height: 1.8;
    color: #333333;
}

.bsb-post-text p {
    margin-bottom: 1.5rem;
}

.bsb-post-text h2 {
    font-size: clamp(1.75rem, 3vw, 2.25rem);
    color: #1F386B;
    margin-top: 3rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 100px; /* For anchor link offset */
}

.bsb-post-text h3 {
    font-size: clamp(1.5rem, 2.5vw, 1.875rem);
    color: #1F386B;
    margin-top: 2.5rem;
    margin-bottom: 1.25rem;
}

.bsb-post-text h4 {
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 600;
    color: #1F386B;
    margin-top: 2rem;
    margin-bottom: 1rem;
}

/* Scroll offset for TOC targets */
.bsb-post-text h2,
.bsb-post-text h3 {
    scroll-margin-top: 170px;
    padding-top: 1rem; /* Extra visual spacing */
}

/* Active TOC link styling */
.bsb-toc-link.active {
    color: #F9A62D;
    border-left-color: #F9A62D;
    background: rgba(249, 166, 45, 0.05);
}

/* Fix for fixed header scroll offset */
html {
    scroll-padding-top: 170px;
}

.bsb-post-text h2,
.bsb-post-text h3 {
    scroll-margin-top: 170px;
}

.bsb-post-text blockquote {
    margin: 2.5rem 0;
    padding: 2rem 2rem 2rem 3rem;
    background: linear-gradient(135deg, #f8f9fa, #F3F6FB);
    border-left: 5px solid #F9A62D;
    border-radius: 4px;
    font-size: 1.2rem;
    font-style: italic;
    color: #1F386B;
    position: relative;
}

.bsb-post-text blockquote::before {
    content: '"';
    position: absolute;
    left: 1rem;
    top: 1.5rem;
    font-size: 4rem;
    color: #F9A62D;
    opacity: 0.3;
    line-height: 1;
}

.bsb-post-text ul,
.bsb-post-text ol {
    margin-bottom: 1.5rem;
    padding-left: 2rem;
}

.bsb-post-text li {
    margin-bottom: 0.75rem;
    line-height: 1.7;
}

.bsb-post-text a {
    color: #1F386B;
    font-weight: 600;
    text-decoration: underline;
    text-decoration-color: #F9A62D;
    text-decoration-thickness: 2px;
    text-underline-offset: 3px;
    transition: all 0.3s ease;
}

.bsb-post-text a:hover {
    color: #F9A62D;
    text-decoration-color: #F9A62D;
}

.bsb-post-text img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 2rem 0;
    box-shadow: 0 8px 30px rgba(31, 56, 107, 0.12);
}

/* Post Tags */
.bsb-post-tags {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-top: 4rem;
    padding-top: 3rem;
    border-top: 2px solid #F3F6FB;
}

.bsb-tags-label {
    color: #1F386B;
}

.bsb-tags-list {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.bsb-post-tags a {
    padding: 0.5rem 1rem;
    background: #f8f9fa;
    border-radius: 50px;
    color: #1F386B;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-post-tags a:hover {
    background: #1F386B;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* Post Navigation */
.bsb-post-navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    margin-top: 4rem;
}

.bsb-nav-link {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.bsb-nav-link:hover {
    background: #1F386B;
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(31, 56, 107, 0.2);
}

.bsb-nav-label {
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #F9A62D;
}

.bsb-nav-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #1F386B;
    line-height: 1.4;
    transition: color 0.3s ease;
}

.bsb-nav-link:hover .bsb-nav-title {
    color: #FFFFFF;
}

.bsb-nav-image {
    position: absolute;
    right: -20px;
    bottom: -20px;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    opacity: 0.1;
    transition: opacity 0.3s ease;
}

.bsb-nav-link:hover .bsb-nav-image {
    opacity: 0.2;
}

.bsb-nav-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ========================================
   SIDEBAR
   ======================================== */

.bsb-post-sidebar {
    position: relative;
}

.bsb-sidebar-sticky {
    position: sticky;
    top: 100px;
    display: flex;
    flex-direction: column;
    gap: 2rem;
}

.bsb-sidebar-module {
    padding: 2rem;
    background: #f8f9fa;
    border-radius: 8px;
    border: 1px solid #F3F6FB;
}

.bsb-sidebar-title {
    font-size: 1.1rem;
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 1.5rem;
}

/* Table of Contents */
.bsb-toc-nav {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bsb-toc-link {
    display: block;
    padding: 0.75rem;
    color: #1F386B;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    border-left: 3px solid transparent;
    transition: all 0.3s ease;
}

.bsb-toc-link:hover,
.bsb-toc-link.active {
    background: rgba(31, 56, 107, 0.05);
    border-left-color: #F9A62D;
    color: #1F386B;
    padding-left: 1rem;
}

/* Share Module */
.bsb-share-vertical {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bsb-share-btn-vertical {
    width: 100%;
    padding: 0.875rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    border: 2px solid #F3F6FB;
    border-radius: 6px;
    color: #1F386B;
    cursor: pointer;
    transition: all 0.3s ease;
}

.bsb-share-btn-vertical:hover {
    background: #1F386B;
    border-color: #1F386B;
    color: #FFFFFF;
    transform: translateX(5px);
}

/* Related Topics */
.bsb-sidebar-topics {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.bsb-topic-tag {
    padding: 0.75rem 1rem;
    background: #FFFFFF;
    border: 2px solid #F3F6FB;
    border-radius: 6px;
    color: #1F386B;
    font-size: 0.95rem;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
}

.bsb-topic-tag:hover {
    background: #1F386B;
    border-color: #1F386B;
    color: #FFFFFF;
    transform: translateX(5px);
}

/* Sidebar CTA */
.bsb-sidebar-cta {
    background: linear-gradient(135deg, #1F386B, #1F386B);
    color: #FFFFFF;
    border: none;
}

.bsb-sidebar-cta-title {
    color: #FFFFFF;
    margin-bottom: 1rem;
}



.bsb-sidebar-cta-btn {
    display: block;
    width: 100%;
    padding: 1rem;
    background: #F9A62D;
    color: #1F386B;
    font-weight: 400;
    text-align: center;
    text-decoration: none;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.bsb-sidebar-cta-btn:hover {
    background:#FFF;
    color:#1F386B;
    transform: translateY(-2px);
}

/* ========================================
   AUTHOR BIO SECTION
   ======================================== */

.bsb-author-bio-section {
    padding: 4rem 0;
    background: #f8f9fa;
}

.bsb-author-bio-card {
    display: flex;
    gap: 2rem;
    padding: 3rem;
    background: #FFFFFF;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.08);
}

.bsb-author-bio-image img {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 3px solid #F3F6FB;
}

.bsb-author-bio-content {
    flex: 1;
}

.bsb-author-bio-name {
    font-size: 1.75rem;
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 1rem;
}

.bsb-author-bio-text {
    color: #666666;
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

.bsb-author-bio-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-author-bio-link:hover {
    color: #F9A62D;
    transform: translateX(5px);
}

/* ========================================
   RELATED POSTS SECTION
   ======================================== */

.bsb-related-posts-section {
    padding: 6rem 0;
    background: #FFFFFF;
}

.bsb-related-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.bsb-related-card {
    background: #FFFFFF;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-related-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(31, 56, 107, 0.15);
}

.bsb-related-image-wrapper {
    position: relative;
    width: 100%;
    padding-top: 60%;
    overflow: hidden;
    background: #D4E0F9;
}

.bsb-related-image-wrapper a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.bsb-related-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-related-card:hover .bsb-related-image {
    transform: scale(1.08);
}

.bsb-related-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(31, 56, 107, 0.6), transparent);
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bsb-related-card:hover .bsb-related-overlay {
    opacity: 1;
}

.bsb-related-category {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    padding: 0.5rem 1rem;
    background: rgba(249, 166, 45, 0.95);
    backdrop-filter: blur(10px);
    border-radius: 50px;
    color: #FFFFFF;
    font-size: 0.75rem;
    font-weight: 400;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    z-index: 2;
}

.bsb-related-content {
    padding: 1.5rem;
}

.bsb-related-date {
    display: block;
    font-size: 0.875rem;
    color: #666666;
    margin-bottom: 0.75rem;
}

.bsb-related-title {
    font-size: 1.25rem;
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1rem;
}

.bsb-related-title a {
    color: #1F386B;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-related-title a:hover {
    color: #F9A62D;
}

.bsb-related-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-size: 0.9rem;
    font-weight: 400;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    transition: all 0.3s ease;
}

.bsb-related-link:hover {
    color: #F9A62D;
    transform: translateX(5px);
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 992px) {
    .bsb-blog-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .bsb-newsletter-card {
        grid-template-columns: 1fr;
        gap: 2.5rem;
        padding: 3rem 2rem;
    }

    .bsb-post-layout {
        grid-template-columns: 1fr;
    }

    .bsb-post-sidebar {
        display: none; /* Hide sidebar on tablet */
    }

    .bsb-related-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 2rem;
    }

    .bsb-author-bio-card {
        flex-direction: column;
        text-align: center;
        align-items: center;
    }

    .bsb-post-navigation {
        grid-template-columns: 1fr;
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .bsb-blog-hero {
        min-height: 70vh;
    }

    .bsb-blog-hero-content {
        padding: 3rem 1.5rem;
    }

    .bsb-blog-hero-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }

    .bsb-blog-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }

    .bsb-blog-filters {
        gap: 0.75rem;
    }

    .bsb-filter-btn {
        font-size: 0.875rem;
        padding: 0.625rem 1.25rem;
    }

    .bsb-container-narrow {
        padding: 0 1.5rem;
    }

    .bsb-post-hero {
        min-height: 50vh;
    }

    .bsb-post-meta {
        flex-direction: column;
        align-items: flex-start;
    }

    .bsb-share-buttons {
        width: 100%;
        justify-content: flex-start;
    }

    .bsb-related-grid {
        grid-template-columns: 1fr;
    }

    .bsb-author-bio-card {
        padding: 2rem 1.5rem;
    }

    .bsb-form-group {
        flex-direction: column;
    }

    .bsb-form-submit {
        width: 100%;
        justify-content: center;
    }
}

/* ========================================
   ANIMATIONS
   ======================================== */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* ========================================
   CATEGORY & ARCHIVE PAGES
   Beeson Skinner Beverly LLP
   Color Palette: Dark Blue (#1F386B), Light Blue/Gold (#F9A62D), 
                  Silly Putty (#D4E0F9), Ecru (#F3F6FB), White (#FFFFFF)
   ======================================== */

/* ========================================
   HERO SECTIONS
   ======================================== */

.bsb-category-hero,
.bsb-archive-hero {
    padding: 8rem 0 4rem;
    background: linear-gradient(135deg, #1F386B 0%, #556577 100%);
    position: relative;
    overflow: hidden;
}

.bsb-category-hero::before,
.bsb-archive-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23d4d9d3' fill-opacity='0.08'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
    z-index: 1;
}

.bsb-category-hero-content,
.bsb-archive-hero-content {
    position: relative;
    z-index: 2;
}

.bsb-category-meta,
.bsb-archive-meta {
    margin-bottom: 1.5rem;
}

.bsb-breadcrumb-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #D4E0F9;
    font-size: 0.95rem;
    font-weight: 500;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-breadcrumb-link:hover {
    color: #F9A62D;
    transform: translateX(-4px);
}

.bsb-breadcrumb-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.bsb-breadcrumb-link:hover svg {
    transform: translateX(-2px);
}

.bsb-category-title,
.bsb-archive-title {
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    animation: fadeInUp 0.8s ease-out;
}

.bsb-category-description,
.bsb-archive-description {
    color: #F3F6FB;
    font-size: clamp(1.1rem, 2vw, 1.3rem);
    line-height: 1.6;
    max-width: 800px;
    margin-bottom: 2rem;
    animation: fadeInUp 0.8s ease-out 0.2s backwards;
}

.bsb-category-count,
.bsb-archive-count {
    color: #D4E0F9;
    font-size: 1.1rem;
    font-weight: 500;
    animation: fadeInUp 0.8s ease-out 0.4s backwards;
}

.bsb-count-number {
    color: #F9A62D;
    font-size: 1.3rem;
    font-weight: 400;
}

/* ========================================
   POSTS GRID
   ======================================== */

.bsb-category-posts,
.bsb-archive-posts {
    padding: 5rem 0;
    background: #FFFFFF;
}

.bsb-posts-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
    gap: 3rem;
    margin-bottom: 4rem;
}

.bsb-post-card {
    background: #FFFFFF;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(31, 56, 107, 0.08);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    flex-direction: column;
    height: 100%;
}

.bsb-post-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px rgba(31, 56, 107, 0.15);
}

.bsb-post-card-image {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    display: block;
}

.bsb-post-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.bsb-post-card-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        to bottom,
        rgba(31, 56, 107, 0) 0%,
        rgba(31, 56, 107, 0.4) 100%
    );
    opacity: 0;
    transition: opacity 0.4s ease;
}

.bsb-post-card:hover .bsb-post-card-overlay {
    opacity: 1;
}

.bsb-post-card-content {
    padding: 2rem;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.bsb-post-card-meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: 0.9rem;
    color: #666666;
}

.bsb-post-date {
    color: #666666;
}

.bsb-post-category {
    color: #1F386B;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-post-category:hover {
    color: #F9A62D;
}

.bsb-meta-separator {
    color: #D4E0F9;
}

.bsb-post-read-time {
    color: #666666;
}

.bsb-post-card-title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    font-weight: 400;
    line-height: 1.3;
    margin-bottom: 1rem;
    color: #1F386B;
}

.bsb-post-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-post-card:hover .bsb-post-card-title a {
    color: #F9A62D;
}

.bsb-post-card-excerpt {
    color: #666666;
    line-height: 1.6;
    margin-bottom: 1.5rem;
    flex-grow: 1;
}

.bsb-post-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    margin-top: auto;
}

.bsb-post-card-link svg {
    width: 16px;
    height: 16px;
    transition: transform 0.3s ease;
}

.bsb-post-card:hover .bsb-post-card-link {
    color: #F9A62D;
}

.bsb-post-card:hover .bsb-post-card-link svg {
    transform: translateX(4px);
}

/* ========================================
   PAGINATION
   ======================================== */

.bsb-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    margin-top: 4rem;
}

.bsb-pagination .page-numbers {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    height: 44px;
    padding: 0 1rem;
    color: #1F386B;
    font-weight: 600;
    text-decoration: none;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: transparent;
}

.bsb-pagination .page-numbers:hover {
    background: #F9A62D;
    color: #FFFFFF;
}

.bsb-pagination .page-numbers.current {
    background: #1F386B;
    color: #FFFFFF;
}

.bsb-pagination .page-numbers.prev,
.bsb-pagination .page-numbers.next {
    gap: 0.5rem;
    padding: 0 1.5rem;
}

.bsb-pagination .page-numbers.prev svg,
.bsb-pagination .page-numbers.next svg {
    width: 16px;
    height: 16px;
}

/* ========================================
   NO POSTS MESSAGE
   ======================================== */

.bsb-no-posts {
    padding: 6rem 0;
    text-align: center;
}

.bsb-no-posts-content {
    max-width: 600px;
    margin: 0 auto;
}

.bsb-no-posts h2 {
    color: #1F386B;
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    margin-bottom: 1rem;
}

.bsb-no-posts p {
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

/* ========================================
   CATEGORIES SECTION
   ======================================== */

.bsb-other-categories,
.bsb-browse-categories {
    padding: 5rem 0;
    background: linear-gradient(to bottom, #FFFFFF 0%, #F3F6FB 100%);
}

.bsb-section-title {
    text-align: center;
    color: #1F386B;
    font-size: clamp(2rem, 3vw, 2.5rem);
    font-weight: 400;
    margin-bottom: 3rem;
}

.bsb-categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
}

.bsb-category-card {
    background: #FFFFFF;
    padding: 2rem;
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(31, 56, 107, 0.08);
    position: relative;
    overflow: hidden;
}

.bsb-category-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 4px;
    height: 0;
    background: #F9A62D;
    transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-category-card:hover::before {
    height: 100%;
}

.bsb-category-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(31, 56, 107, 0.15);
}

.bsb-category-card-name {
    color: #1F386B;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
    transition: color 0.3s ease;
}

.bsb-category-card:hover .bsb-category-card-name {
    color: #F9A62D;
}

.bsb-category-card-count {
    color: #666666;
    font-size: 0.95rem;
    margin-bottom: 0;
}

.bsb-category-card-arrow {
    position: absolute;
    bottom: 2rem;
    right: 2rem;
    color: #D4E0F9;
    font-size: 1.5rem;
    transition: all 0.3s ease;
}

.bsb-category-card:hover .bsb-category-card-arrow {
    color: #F9A62D;
    transform: translateX(4px);
}

/* ========================================
   DATE NAVIGATION (for archives)
   ======================================== */

.bsb-archive-date-nav {
    display: flex;
    justify-content: space-between;
    margin-bottom: 3rem;
    padding-bottom: 2rem;
    border-bottom: 2px solid #D4E0F9;
}

.bsb-date-nav-prev,
.bsb-date-nav-next {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-size: 1.1rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.75rem 1.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    background: transparent;
}

.bsb-date-nav-prev:hover,
.bsb-date-nav-next:hover {
    background: #F9A62D;
    color: #FFFFFF;
    transform: translateY(-2px);
}

/* ========================================
   MONTHLY ARCHIVES
   ======================================== */

.bsb-monthly-archives {
    padding: 5rem 0;
    background: #FFFFFF;
}

.bsb-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.5rem;
}

.bsb-month-card {
    display: flex;
    flex-direction: column;
    padding: 1.5rem;
    background: linear-gradient(135deg, #1F386B 0%, #556577 100%);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 12px rgba(31, 56, 107, 0.15);
}

.bsb-month-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 30px rgba(31, 56, 107, 0.25);
}

.bsb-month-name {
    color: #FFFFFF;
    font-size: 1.3rem;
    font-weight: 400;
    margin-bottom: 0.5rem;
}

.bsb-month-count {
    color: #D4E0F9;
    font-size: 0.95rem;
}

/* ========================================
   RESPONSIVE BREAKPOINTS
   ======================================== */

@media (max-width: 768px) {
    .bsb-category-hero,
    .bsb-archive-hero {
        padding: 6rem 0 3rem;
    }
    
    .bsb-posts-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    
    .bsb-post-card-image {
        height: 200px;
    }
    
    .bsb-categories-grid {
        grid-template-columns: 1fr;
    }
    
    .bsb-archive-date-nav {
        flex-direction: column;
        gap: 1rem;
    }
    
    .bsb-months-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
    
    .bsb-pagination {
        flex-wrap: wrap;
        gap: 0.25rem;
    }
    
    .bsb-pagination .page-numbers {
        min-width: 40px;
        height: 40px;
        font-size: 0.9rem;
    }
}




/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .bsb-category-hero,
    .bsb-archive-hero {
        background: #FFFFFF;
        padding: 2rem 0;
    }
    
    .bsb-category-title,
    .bsb-archive-title {
        color: #1F386B;
    }
    
    .bsb-post-card {
        page-break-inside: avoid;
        box-shadow: none;
        border: 1px solid #D4E0F9;
    }
    
    .bsb-post-card-link,
    .bsb-breadcrumb-link,
    .bsb-pagination {
        display: none;
    }
}

/* ========================================
   SEARCH PAGE STYLES
   ======================================== */

/* Search Hero Section */
/* Search Hero Section */
.bsb-search-hero {
    background-image: url('/wp-content/uploads/2026/01/bsb-stock-photo-1.webp');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 12rem 2rem 6rem;
    min-height: 50vh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

.bsb-search-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(
        135deg,
        rgba(0,0,0, 0.4) 0%,
        rgba(0,0,0, 0.4) 50%,
        rgba(0,0,0, 0.4) 100%
    );
    z-index: 1;
}

.bsb-search-hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    
    z-index: 2;
}

.bsb-search-hero-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}


.bsb-search-title {
    color: #FFFFFF;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1rem;
    line-height: 1.2;
}

.bsb-search-title .search-query {
    color: #F9A62D;
    display: block;
    margin-top: 0.5rem;
    font-style: italic;
}

.bsb-search-count {
    color: #F3F6FB;
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.bsb-search-form-wrapper {
    margin-top: 2rem;
}

.bsb-custom-search-form {
    display: flex;
    max-width: 600px;
    margin: 0 auto;
    background: #FFFFFF;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    transition: all 0.3s ease;
}

.bsb-custom-search-form:focus-within {
    box-shadow: 0 6px 30px rgba(249, 166, 45, 0.3);
    transform: translateY(-2px);
}

.bsb-search-input {
    flex: 1;
    padding: 1rem 1.5rem;
    border: none;
    font-size: 1rem;
    color: #1F386B;
    background: transparent;
}

.bsb-search-input::placeholder {
    color: #999;
}

.bsb-search-input:focus {
    outline: none;
}

.bsb-search-button {
    background: #F9A62D;
    color: #FFFFFF;
    border: none;
    padding: 1rem 2rem;
    font-weight: 600;
    font-size: 1rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    white-space: nowrap;
}

.bsb-search-button:hover {
    background: #c99d68;
}

.bsb-search-button svg {
    width: 18px;
    height: 18px;
}

/* Search Results Section */
.bsb-search-results {
    padding: 4rem 0;
    background: #FFFFFF;
}

.bsb-search-results-grid {
    display: grid;
    gap: 2rem;
    margin-bottom: 3rem;
}

/* Individual Search Result */
.bsb-search-result-item {
    background: #FFFFFF;
    border: 2px solid #F3F6FB;
    border-radius: 8px;
    padding: 2rem;
    transition: all 0.3s ease;
}

.bsb-search-result-item:hover {
    border-color: #F9A62D;
    box-shadow: 0 4px 20px rgba(249, 166, 45, 0.15);
    transform: translateY(-2px);
}

.bsb-result-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.bsb-result-type {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #D4E0F9;
    color: #1F386B;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border-radius: 4px;
}

.bsb-result-date {
    color: #666;
    font-size: 0.9rem;
}

.bsb-result-title {
    font-size: clamp(1.3rem, 2vw, 1.6rem);
    color: #1F386B;
    margin-bottom: 1rem;
    line-height: 1.3;
}

.bsb-result-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-result-title a:hover {
    color: #F9A62D;
}

.bsb-result-excerpt {
    color: #666;
    line-height: 1.7;
    margin-bottom: 1.5rem;
    font-size: 1rem;
}

.bsb-result-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 1rem;
    border-top: 1px solid #F3F6FB;
}

.bsb-result-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #F9A62D;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-result-link:hover {
    color: #c99d68;
    gap: 0.75rem;
}

.bsb-result-categories {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.bsb-result-cat {
    display: inline-block;
    padding: 0.25rem 0.75rem;
    background: #F3F6FB;
    color: #1F386B;
    font-size: 0.85rem;
    border-radius: 4px;
}

/* Pagination */
.bsb-search-pagination {
    margin-top: 3rem;
}

.bsb-search-pagination .page-numbers {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    list-style: none;
    padding: 0;
    margin: 0;
}

.bsb-search-pagination .page-numbers li {
    list-style: none;
}

.bsb-search-pagination a,
.bsb-search-pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 45px;
    height: 45px;
    padding: 0.5rem 1rem;
    background: #FFFFFF;
    border: 2px solid #F3F6FB;
    color: #1F386B;
    text-decoration: none;
    font-weight: 600;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.bsb-search-pagination a:hover {
    background: #F9A62D;
    border-color: #F9A62D;
    color: #FFFFFF;
}

.bsb-search-pagination .current {
    background: #1F386B;
    border-color: #1F386B;
    color: #FFFFFF;
}

.bsb-search-pagination .prev,
.bsb-search-pagination .next {
    gap: 0.5rem;
}

/* No Results Section */
.bsb-no-results {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 800px;
    margin: 0 auto;
}

.bsb-no-results-icon {
    margin-bottom: 2rem;
}

.bsb-no-results-title {
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    color: #1F386B;
    margin-bottom: 1rem;
}

.bsb-no-results-text {
    font-size: 1.1rem;
    color: #666;
    line-height: 1.7;
    margin-bottom: 3rem;
}

.bsb-no-results-text strong {
    color: #F9A62D;
}


/* Responsive Design */
@media (max-width: 768px) {
    .bsb-search-hero {
        padding: 3rem 0 2rem;
    }
    
    .bsb-search-title {
        font-size: 1.8rem;
    }
    
    .bsb-custom-search-form {
        flex-direction: column;
        border-radius: 12px;
    }
    
    .bsb-search-input {
        border-bottom: 1px solid #F3F6FB;
    }
    
    .bsb-search-button {
        justify-content: center;
        padding: 1rem;
    }
    
    .bsb-search-result-item {
        padding: 1.5rem;
    }
    
    .bsb-result-footer {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }
    
    .bsb-helpful-links-grid {
        grid-template-columns: 1fr;
    }
    
    .bsb-search-pagination a,
    .bsb-search-pagination span {
        min-width: 40px;
        height: 40px;
        padding: 0.5rem;
        font-size: 0.9rem;
    }
}

/* Animation on scroll */
.bsb-search-result-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.bsb-search-result-item:nth-child(1) { animation-delay: 0.1s; }
.bsb-search-result-item:nth-child(2) { animation-delay: 0.2s; }
.bsb-search-result-item:nth-child(3) { animation-delay: 0.3s; }
.bsb-search-result-item:nth-child(4) { animation-delay: 0.4s; }
.bsb-search-result-item:nth-child(5) { animation-delay: 0.5s; }

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



/* ========================================
   SEARCH RESULTS HIGHLIGHTING
   ======================================== */

/* Highlight mark styling */
.bsb-search-highlight,
mark.bsb-search-highlight {
    background: #F9A62D;
    color: #FFFFFF;
    padding: 2px 4px;
    border-radius: 2px;
    font-weight: 500;
}

/* Excerpt styling */
.bsb-result-excerpt {
    color: #666666;
    line-height: 1.6;
    margin: 1rem 0;
}

.bsb-result-excerpt mark {
    font-style: normal;
}

/* ========================================
   SINGLE PRACTICE AREA - SOPHISTICATED TEMPLATE
   Beeson Skinner Beverly LLP
   ======================================== */

/* ========================================
   PRACTICE AREA PAGES
   Clean, refined design for Patents, Trademarks, Business Advisory pages
   Addresses client feedback: "too busy, difficult to read and absorb"
======================================== */

/* ----------------------------------------
   Practice Area Hero Section
---------------------------------------- */

.bsb-practice-hero {
    /* Inherits from .bsb-about-hero */
    /* Minimal customization for consistency */
}



/* ----------------------------------------
   Main Content Area
---------------------------------------- */

.bsb-practice-content {
    padding: 6rem 0 5rem;
    background: #FFFFFF;
}

/* ----------------------------------------
   Introduction Paragraph
---------------------------------------- */

.bsb-practice-intro {
    margin-bottom: 2.5rem;
    padding-bottom: 0rem;
}

.bsb-lead-paragraph {

    font-weight: 400;
    max-width: 100%;
}

/* ----------------------------------------
   Why Choose BSB Section
---------------------------------------- */

.bsb-practice-why-section {
    margin-bottom: 2.50rem;
}

.bsb-practice-why-section .bsb-section-heading {
    font-family: "Amiri", serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 3rem;
    letter-spacing: -0.01em;
    text-align: left;
}

.bsb-practice-why-grid {
    display: grid;
    gap: 2.5rem;
}

.bsb-practice-why-item {
    /* Each item gets generous space */
    padding-bottom: 2.5rem;
    border-bottom: 1px solid rgba(31, 56, 107, 0.08);
}

.bsb-practice-why-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.bsb-practice-why-title {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1.15rem, 1.8vw, 1.35rem);
    font-weight: 600;
    color: #1F386B;
    margin-bottom: 0.75rem;
    letter-spacing: 0.01em;
}

.bsb-practice-why-description {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1rem, 1.5vw, 1.1rem);
    line-height: 1.7;
    color: #333333;
    margin: 0;
}

/* ----------------------------------------
   Industries/Fields Section
---------------------------------------- */

.bsb-practice-industries-section {
    margin-top: 4rem;
    padding-top: 4rem;
    border-top: 2px solid #F9A62D;
    width: 100%; /* ADD THIS */
    max-width: 100%; /* ADD THIS */
}



.bsb-practice-industries-section .bsb-section-heading {
    font-family: "Amiri", serif;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 2rem;
    text-align: left;
}

.bsb-industries-intro {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(1.05rem, 1.6vw, 1.2rem);
    line-height: 1.65;
    color: #333333;
    margin-bottom: 2.5rem;
}

.bsb-practice-industries-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* REDUCE from 280px */
    gap: 1rem 2rem;
}
.bsb-practice-industries-list li {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.6;
    color: #1F386B;
    padding-left: 1.5rem;
    position: relative;
}

.bsb-practice-industries-list li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #F9A62D;
    font-size: 1.2em;
    line-height: 1;
    top: 0.1em;
}



/* ----------------------------------------
   Sidebar Design
---------------------------------------- */

.bsb-grid-sidebar.bsb-practice-sidebar {
   position: relative;
    top: 0;
}

/* Main Takeaways Box */
.bsb-practice-sidebar-box {
    background: linear-gradient(135deg, #F3F6FB 0%, #D4E0F9 100%);
    border-radius: 8px;
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 2px 12px rgba(31, 56, 107, 0.08);
}

.bsb-sidebar-heading {
    font-family: "Amiri", serif;
    font-size: clamp(1.4rem, 2.2vw, 1.65rem);
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 1.75rem;
    letter-spacing: -0.01em;
}

.bsb-practice-sidebar-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 1.75rem;
}

.bsb-practice-sidebar-list li {
    font-family: "Work Sans", sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    line-height: 1.6;
    color: #1F386B;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.bsb-practice-sidebar-list li strong {
    font-weight: 600;
    display: block;
}

.bsb-sidebar-description {
    font-size: clamp(0.9rem, 1.3vw, 1rem);
    color: #333333;
    line-height: 1.5;
}

/* Sidebar CTA Box */
.bsb-practice-sidebar-cta {
    background: #1F386B;
    border-radius: 8px;
    padding: 2rem 1.75rem;
    text-align: center;
}

.bsb-sidebar-cta-heading {
    font-family: "Amiri", serif;
    font-size: clamp(1.25rem, 2vw, 1.5rem);
    font-weight: 400;
    color: #FFFFFF;
    margin-bottom: 0.75rem;
}



.bsb-button-small {
    font-size: clamp(0.95rem, 1.3vw, 1.05rem);
    padding: 0.85rem 1.75rem;
    display: inline-block;
}


/* ----------------------------------------
   Responsive Design - Tablet
---------------------------------------- */

@media (max-width: 1024px) {
    .bsb-practice-content {
        padding: 4rem 0;
    }
    
    .bsb-practice-intro {
        margin-bottom: 3.5rem;
        padding-bottom: 2.5rem;
    }
    
    .bsb-practice-why-section {
        margin-bottom: 3.5rem;
    }
    
    .bsb-practice-why-grid {
        gap: 2rem;
    }
    
    .bsb-practice-why-item {
        padding-bottom: 2rem;
    }
    
    .bsb-practice-industries-list {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        gap: 0.85rem 1.5rem;
    }
    
    .bsb-practice-sidebar-box {
        padding: 2rem 1.75rem;
    }
    
    .bsb-practice-sidebar-list {
        gap: 1.5rem;
    }
}

/* ----------------------------------------
   Responsive Design - Mobile
---------------------------------------- */

@media (max-width: 768px) {
    .bsb-practice-hero {
        height: 50vh;
    }
    
    .bsb-practice-content {
        padding: 3rem 0;
    }
    
    .bsb-practice-intro {
        margin-bottom: 3rem;
        padding-bottom: 2rem;
    }
    
    .bsb-practice-why-section {
        margin-bottom: 3rem;
    }
    
    .bsb-practice-why-section .bsb-section-heading {
        margin-bottom: 2rem;
    }
    
    .bsb-practice-why-grid {
        gap: 1.75rem;
    }
    
    .bsb-practice-why-item {
        padding-bottom: 1.75rem;
    }
    
    .bsb-practice-industries-section {
        margin-top: 3rem;
        padding-top: 3rem;
    }
    
    .bsb-practice-industries-section .bsb-section-heading {
        margin-bottom: 1.5rem;
    }
    
    .bsb-industries-intro {
        margin-bottom: 2rem;
    }
    
    .bsb-practice-industries-list {
        grid-template-columns: 1fr;
        gap: 0.75rem;
    }
    
    /* Sidebar moves to top on mobile (handled by .bsb-grid-sidebar) */
    .bsb-practice-sidebar-box {
        padding: 1.75rem 1.5rem;
        margin-bottom: 1.5rem;
    }
    
    .bsb-sidebar-heading {
        margin-bottom: 1.5rem;
    }
    
    .bsb-practice-sidebar-list {
        gap: 1.25rem;
    }
    
    .bsb-practice-sidebar-cta {
        padding: 1.75rem 1.5rem;
    }
    
    .bsb-related-practices-section {
        padding: 3.5rem 0 4rem;
    }
    
    .bsb-related-practices-section .bsb-section-heading {
        margin-bottom: 2rem;
    }
    
    .bsb-related-practices-grid {
        grid-template-columns: 1fr;
        gap: 1.75rem;
    }
    
    .bsb-related-practice-card {
        padding: 2rem 1.75rem;
    }
}

/* ----------------------------------------
   Animation Classes for Scroll Effects
---------------------------------------- */

.bsb-practice-content.pipe-animated .bsb-grid-pipe-divider {
    animation: bsb-pipe-grow 1.2s ease-out forwards;
}

@keyframes bsb-pipe-grow {
    0% {
        height: 0;
        opacity: 0;
    }
    100% {
        height: 100%;
        opacity: 1;
    }
}

/* Fade-in on scroll for content sections */
.bsb-practice-why-item,
.bsb-practice-industries-section {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bsb-practice-why-item:not(.bsb-in-view),
.bsb-practice-industries-section:not(.bsb-in-view) {
    opacity: 0;
    transform: translateY(20px);
}

/* Stagger effect for why items */
.bsb-practice-why-item:nth-child(1) { transition-delay: 0.1s; }
.bsb-practice-why-item:nth-child(2) { transition-delay: 0.2s; }
.bsb-practice-why-item:nth-child(3) { transition-delay: 0.3s; }
.bsb-practice-why-item:nth-child(4) { transition-delay: 0.4s; }
.bsb-practice-why-item:nth-child(5) { transition-delay: 0.5s; }
.bsb-practice-why-item:nth-child(6) { transition-delay: 0.6s; }
.bsb-practice-why-item:nth-child(7) { transition-delay: 0.7s; }
.bsb-practice-why-item:nth-child(8) { transition-delay: 0.8s; }
.bsb-practice-why-item:nth-child(9) { transition-delay: 0.9s; }



/* Similar fix for practice area cards */
.bsb-related-practice-card,
.bsb-practice-why-item {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    transition-delay: var(--stagger-delay, 0s);
}

/* ========================================
   END PRACTICE AREA PAGES
======================================== */

/* ========================================
   RESPONSIVE DESIGN
   ======================================== */

@media (max-width: 1024px) {
    .bsb-pa-content-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .bsb-pa-sidebar {
        position: static;
        max-width: 600px;
        margin: 0 auto;
    }

    .bsb-pa-approach-cards {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .bsb-pa-hero {
        height: 40vh;
        min-height: 350px;
    }

    .bsb-pa-hero-content {
        padding: 2rem 0;
    }

    .bsb-pa-content-section {
        padding: 3rem 0;
    }

    .bsb-pa-section {
        margin-bottom: 3rem;
    }

    .bsb-pa-service-item {
        grid-template-columns: 1fr;
        gap: 1rem;
        padding: 1.5rem;
    }

    .bsb-pa-service-marker {
        display: none;
    }

    .bsb-pa-industries-grid {
        gap: 0.75rem;
    }

    .bsb-pa-industry-tag {
        font-size: 0.85rem;
        padding: 0.6rem 1.2rem;
    }

    .bsb-pa-why-section {
        padding: 2rem;
    }

    .bsb-pa-cta-inline {
        padding: 2rem;
    }

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

    .bsb-pa-sidebar-card {
        padding: 1.5rem;
    }
}

/* ----------------------------------------
   Practice Areas Sidebar Navigation Menu
---------------------------------------- */

.bsb-practice-sidebar-nav {
    background: #FFFFFF;
    border: 1px solid rgba(31, 56, 107, 0.12);
    border-radius: 8px;
    padding: 2rem;
    margin-bottom: 2rem;
}

.bsb-practice-sidebar-nav .bsb-sidebar-heading {
    font-family: "Amiri", serif;
    font-size: clamp(1.3rem, 2vw, 1.5rem);
    font-weight: 400;
    color: #1F386B;
    margin-bottom: 1.25rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid #F9A62D;
    letter-spacing: -0.01em;
}

.bsb-practice-nav-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.bsb-practice-nav-item {
    border-bottom: 1px solid rgba(31, 56, 107, 0.06);
}

.bsb-practice-nav-item:last-child {
    border-bottom: none;
}

.bsb-practice-nav-item a {
    display: block;
    font-family: "Work Sans", sans-serif;
    font-size: clamp(0.95rem, 1.4vw, 1.05rem);
    font-weight: 500;
    color: #1F386B;
    padding: 0.85rem 1rem;
    border-left: 3px solid transparent;
    transition: all 0.25s ease;
    text-decoration: none;
}

.bsb-practice-nav-item a:hover {
    background: rgba(31, 56, 107, 0.04);
    border-left-color: #97AAC6;
    color: #1F386B;
}

/* Current / Active Page Highlight */
.bsb-practice-nav-item.bsb-practice-nav-current a {
    background: rgba(249, 166, 45, 0.08);
    border-left-color: #F9A62D;
    font-weight: 600;
    color: #1F386B;
}

/* ----------------------------------------
   Mobile Reordering: Sidebar After Content
---------------------------------------- */

@media (max-width: 1024px) {
    .bsb-practice-content .bsb-grid-asymmetric.reversed {
        display: flex;
        flex-direction: column;
    }

    .bsb-practice-content .bsb-practice-main-content {
        order: 1;
    }

    .bsb-practice-content .bsb-grid-pipe-divider {
        order: 2;
        display: none;
    }

    .bsb-practice-content .bsb-grid-sidebar.bsb-practice-sidebar {
        order: 3;
        position: static;
    }

    .bsb-practice-sidebar-nav {
        padding: 1.5rem;
    }
}



/* ========================================
   ANIMATIONS
   ======================================== */

.bsb-fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bsb-fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ========================================
   PRINT STYLES
   ======================================== */

@media print {
    .bsb-pa-hero {
        height: auto;
        min-height: auto;
        page-break-after: avoid;
    }

    .bsb-pa-sidebar {
        display: none;
    }

    .bsb-pa-content-grid {
        grid-template-columns: 1fr;
    }

    .bsb-pa-cta-inline {
        display: none;
    }
}

/* ========================================
   CONTACT PAGE
   ======================================== */

.bsb-contact-hero {
    position: relative;
    width: 100%;
    height: 50vh;
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bsb-contact-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #1F386B 0%, #2a3340 100%);
    z-index: 1;
}

.bsb-contact-hero-gradient {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(
        circle at 30% 40%,
        rgba(249, 166, 45, 0.15) 0%,
        transparent 60%
    );
    z-index: 2;
}

/* Animated Globe Rings */
.bsb-contact-globe-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    height: 400px;
    z-index: 3;
    opacity: 0.15;
}

.bsb-contact-globe-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border: 2px solid #F9A62D;
    border-radius: 50%;
    transform-style: preserve-3d;
    animation: rotateGlobe 20s linear infinite;
}

.bsb-ring-1 {
    width: 300px;
    height: 300px;
    margin: -150px 0 0 -150px;
    animation-duration: 20s;
}

.bsb-ring-2 {
    width: 240px;
    height: 240px;
    margin: -120px 0 0 -120px;
    animation-duration: 15s;
    animation-direction: reverse;
}

.bsb-ring-3 {
    width: 180px;
    height: 180px;
    margin: -90px 0 0 -90px;
    animation-duration: 25s;
}

.bsb-contact-globe-center {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 20px;
    height: 20px;
    margin: -10px 0 0 -10px;
    background: #F9A62D;
    border-radius: 50%;
    box-shadow: 0 0 30px rgba(249, 166, 45, 0.6);
}

@keyframes rotateGlobe {
    0% { transform: rotateX(75deg) rotateZ(0deg); }
    100% { transform: rotateX(75deg) rotateZ(360deg); }
}

/* Hero Content */
.bsb-contact-hero-content {
    position: relative;
    z-index: 4;
    text-align: center;
    max-width: 800px;
    padding: 2rem;

}

.bsb-contact-hero-title {
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.bsb-contact-hero-subtitle {
    color: #D4E0F9;
    font-size: clamp(1.2rem, 2.5vw, 1.6rem);
    font-weight: 400;
    line-height: 1.6;
    margin: 0;
}

/* ========================================
   CONTACT INFO CARDS - ROW LAYOUT
   ======================================== */
.bsb-contact-info-section {
    padding: 8rem 0;
    background: #f8f9fa;
    position: relative;
    margin-top: 0rem;
    z-index: 10;
}

.bsb-contact-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
}

.bsb-contact-info-card {
    background: #FFFFFF;
    border-radius: 16px;
    padding: 2.5rem 2rem;
    text-align: center;
    box-shadow: 
        0 8px 30px rgba(31, 56, 107, 0.08),
        0 0 0 1px rgba(31, 56, 107, 0.04);
    transition: all 0.4s ease;
    position: relative;
    overflow: hidden;
}

.bsb-contact-info-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, #F9A62D 0%, #fbc16c 100%);
    transform: translateX(-100%);
    transition: transform 0.4s ease;
}

.bsb-contact-info-card:hover {
    transform: translateY(-8px);
    box-shadow: 
        0 16px 50px rgba(31, 56, 107, 0.15),
        0 0 0 1px rgba(31, 56, 107, 0.08);
}

.bsb-contact-info-card:hover::before {
    transform: translateX(0);
}

.bsb-contact-card-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #F9A62D 0%, #F9A62D 100%);
    border-radius: 50%;
    color: #FFFFFF;
    box-shadow: 0 8px 24px rgba(249, 166, 45, 0.3);
    transition: all 0.4s ease;
}

.bsb-contact-info-card:hover .bsb-contact-card-icon {
    transform: scale(1.1) rotateY(360deg);
}

.bsb-contact-card-title {
    color: #1F386B;
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.bsb-contact-card-content {
    color: #666666;
    font-size: 1.1rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.bsb-contact-card-content a {
    color: inherit;
    text-decoration: none;
    transition: color 0.3s ease;
}

.bsb-contact-card-content a:hover {
    color: #F9A62D;
}

.bsb-contact-card-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #F9A62D;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
}

.bsb-contact-card-link:hover {
    color: #1F386B;
    gap: 0.75rem;
}

/* ========================================
   CONTACT FORM SECTION - FULL WIDTH
   ======================================== */
.bsb-contact-form-section {
    padding: 6rem 0;
    background: #FFFFFF;
    position: relative;
}

.bsb-contact-form-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.bsb-contact-form-title {
    color: #1F386B;

    margin-bottom: 1rem;
}

.bsb-contact-form-subtitle {
    color: #666666;
    font-size: 1.2rem;
    line-height: 1.6;
}

.bsb-contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #f8f9fa;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 
        0 8px 40px rgba(31, 56, 107, 0.08),
        0 0 0 1px rgba(31, 56, 107, 0.04);
}

/* WP Forms Styling */
.bsb-contact-form-wrapper .wpforms-container {
    max-width: 100%;
}

.bsb-contact-form-wrapper .wpforms-field-container {
    display: grid;
    gap: 1.5rem;
}

.bsb-contact-form-wrapper label {
    color: #1F386B;
    font-weight: 600;
    font-size: 1rem;
    margin-bottom: 0.5rem;
    display: block;
}

.bsb-contact-form-wrapper input[type="text"],
.bsb-contact-form-wrapper input[type="email"],
.bsb-contact-form-wrapper input[type="tel"],
.bsb-contact-form-wrapper textarea {
    width: 100%;
    padding: 1rem 1.25rem;
    border: 2px solid #D4E0F9;
    border-radius: 8px;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #FFFFFF;
}

.bsb-contact-form-wrapper input[type="text"]:focus,
.bsb-contact-form-wrapper input[type="email"]:focus,
.bsb-contact-form-wrapper input[type="tel"]:focus,
.bsb-contact-form-wrapper textarea:focus {
    border-color: #F9A62D;
    outline: none;
    box-shadow: 0 0 0 4px rgba(249, 166, 45, 0.1);
}

.bsb-contact-form-wrapper textarea {
    min-height: 150px;
    resize: vertical;
}

.bsb-contact-form-wrapper button[type="submit"],
.bsb-contact-form-wrapper .wpforms-submit {
    background: #F9A62D;
    color: #FFFFFF;
    padding: 1rem 2.5rem;
    border: none;
    border-radius: 8px;
    font-size: 1.05rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    margin-top: 1rem;
}

.bsb-contact-form-wrapper button[type="submit"]:hover,
.bsb-contact-form-wrapper .wpforms-submit:hover {
    background: #1F386B;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(31, 56, 107, 0.25);
}

/* ========================================
   MAP SECTION
   ======================================== */
.bsb-contact-map-section {
    padding: 6rem 0;
    background: #f8f9fa;
}

.bsb-contact-map-container {
    background: #FFFFFF;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 
        0 8px 40px rgba(31, 56, 107, 0.12),
        0 0 0 1px rgba(31, 56, 107, 0.06);
}

.bsb-contact-map-header {
    padding: 2rem 2.5rem;
    background: linear-gradient(135deg, #1F386B 0%, #2a3340 100%);
}

.bsb-contact-map-title {
    color: #FFFFFF;

    margin: 0;
}

.bsb-contact-map-wrapper {
    position: relative;
    width: 100%;
    height: 450px;
}

.bsb-contact-map-iframe {
    width: 100%;
    height: 100%;
    border: none;
    display: block;
}

.bsb-contact-map-overlay {
    padding: 1.5rem 2.5rem;
    background: #f8f9fa;
    border-top: 1px solid #D4E0F9;
}

.bsb-contact-map-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: #1F386B;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 1.05rem;
}

.bsb-contact-map-link:hover {
    color: #F9A62D;
    gap: 0.75rem;
}

/* ========================================
   CTA SECTION
   ======================================== */
.bsb-contact-cta-section {
    padding: 6rem 0;
    background: #455665;
    position: relative;
    overflow: hidden;
}

.bsb-contact-cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: 
        radial-gradient(circle at 20% 50%, rgba(249, 166, 45, 0.15) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(249, 166, 45, 0.1) 0%, transparent 50%);
    z-index: 1;
}

.bsb-contact-cta-section-pattern {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23D9AD77' fill-opacity='0.05'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.3;
    z-index: 2;
}

.bsb-contact-cta-content {
    position: relative;
    z-index: 3;
    text-align: center;
    max-width: 800px;
    margin: 0 auto;
}

.bsb-contact-cta-title {
    color: #FFFFFF;
    font-size: clamp(2rem, 4vw, 3rem);
    margin-bottom: 1.5rem;
}

.bsb-contact-cta-text {
    color: #D4E0F9;
    font-size: 1.25rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.bsb-contact-cta-buttons {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
}


/* ========================================
   FADE-IN ANIMATION
   ======================================== */
.bsb-fade-in {
    opacity: 0;
    transform: translateY(30px);
    animation: fadeInUp 0.8s ease forwards;
}

.bsb-fade-in:nth-child(1) { animation-delay: 0.1s; }
.bsb-fade-in:nth-child(2) { animation-delay: 0.2s; }
.bsb-fade-in:nth-child(3) { animation-delay: 0.3s; }

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

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */
@media (max-width: 992px) {
    .bsb-contact-info-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    
    .bsb-contact-form-wrapper {
        padding: 2rem 1.5rem;
    }
    
    .bsb-contact-cta-buttons {
        flex-direction: column;
        align-items: center;
    }
}

@media (max-width: 768px) {
    .bsb-contact-hero {
        height: 60vh;
        min-height: 350px;
    }
    
    .bsb-contact-hero-content {
        padding: 1.5rem;
    }
    
    .bsb-contact-globe-container {
        width: 250px;
        height: 250px;
    }
    
    .bsb-ring-1 {
        width: 200px;
        height: 200px;
        margin: -100px 0 0 -100px;
    }
    
    .bsb-ring-2 {
        width: 160px;
        height: 160px;
        margin: -80px 0 0 -80px;
    }
    
    .bsb-ring-3 {
        width: 120px;
        height: 120px;
        margin: -60px 0 0 -60px;
    }
    
    .bsb-contact-info-section {
        padding: 3rem 0;
    }
    
    .bsb-contact-info-card {
        padding: 2rem 1.5rem;
    }
    
    .bsb-contact-form-section,
    .bsb-contact-map-section,
    .bsb-contact-cta-section {
        padding: 4rem 0;
    }
    
    .bsb-contact-map-wrapper {
        height: 350px;
    }
}





/* ========================================
   BSB CONTACT FORM - WP FORMS CUSTOM CSS
   Specifically for Form ID #149
   Updated to match actual form structure
   ======================================== */

/* ========================================
   FORM CONTAINER & WRAPPER
   ======================================== */
.bsb-contact-form-section {
    padding: 6rem 0;
    background: #FFFFFF;
}

.bsb-contact-form-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 3rem;
}

.bsb-contact-form-title {
    color: #1F386B;

    margin-bottom: 1rem;
}

.bsb-contact-form-subtitle {
    color: #666666;
    font-size: 1.2rem;
    line-height: 1.6;
}

.bsb-contact-form-wrapper {
    max-width: 900px;
    margin: 0 auto;
    background: #f8f9fa;
    border-radius: 20px;
    padding: 3rem;
    box-shadow: 
        0 8px 40px rgba(31, 56, 107, 0.08),
        0 0 0 1px rgba(31, 56, 107, 0.04);
}

/* ========================================
   WP FORMS GLOBAL OVERRIDES
   ======================================== */
.wpforms-container {
    margin: 0;
    padding: 0;
}

.wpforms-form {
    margin: 0;
    padding: 0;
}

.wpforms-field-container {
    margin: 0;
    padding: 0;
}

.wpforms-field {
    padding: 0 !important;
    margin-bottom: 1.5rem !important;
}

/* Remove WP Forms default background */
div.wpforms-container-full .wpforms-form {
    background: transparent;
    border: none;
    padding: 0;
}

/* ========================================
   LABELS
   ======================================== */
.wpforms-field-label {
    color: #333333 !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    margin-bottom: 0.5rem !important;
    display: block !important;
    line-height: 1.5 !important;
}

/* Keep labels hidden if set to hide in WP Forms */
.wpforms-label-hide {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    margin: -1px !important;
    padding: 0 !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* Required asterisk */
.wpforms-required-label {
    color: #F9A62D !important;
    font-weight: 700 !important;
}

/* ========================================
   INPUT FIELDS - ALL TYPES
   ======================================== */
.wpforms-field input[type="text"],
.wpforms-field input[type="email"],
.wpforms-field input[type="tel"],
.wpforms-field select,
.wpforms-field textarea {
    width: 100% !important;
    padding: 1rem 1.25rem !important;
    font-size: 1rem !important;
    color: #333333 !important;
    background: #FFFFFF !important;
    border: 2px solid #D4E0F9 !important;
    border-radius: 8px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-shadow: none !important;
    max-width: 100% !important;
}

/* Placeholder styling */
.wpforms-field input::placeholder,
.wpforms-field textarea::placeholder {
    color: #999999 !important;
    opacity: 1 !important;
}

/* Focus states */
.wpforms-field input[type="text"]:focus,
.wpforms-field input[type="email"]:focus,
.wpforms-field input[type="tel"]:focus,
.wpforms-field select:focus,
.wpforms-field textarea:focus {
    border-color: #F9A62D !important;
    box-shadow: 0 0 0 4px rgba(249, 166, 45, 0.1) !important;
    background: #FFFFFF !important;
    outline: none !important;
}

/* Hover states */
.wpforms-field input[type="text"]:hover:not(:focus),
.wpforms-field input[type="email"]:hover:not(:focus),
.wpforms-field input[type="tel"]:hover:not(:focus),
.wpforms-field select:hover:not(:focus),
.wpforms-field textarea:hover:not(:focus) {
    border-color: #b8bfc4 !important;
}

/* ========================================
   DROPDOWN / SELECT FIELD
   ======================================== */
.wpforms-field select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23465666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 1.25rem center !important;
    background-size: 12px !important;
    padding-right: 3rem !important;
    cursor: pointer !important;
}

/* Dropdown placeholder (first option) */
.wpforms-field select option.placeholder {
    color: #999999 !important;
}

.wpforms-field select option {
    color: #333333 !important;
    padding: 0.75rem !important;
}

/* ========================================
   TEXTAREA
   ======================================== */
.wpforms-field textarea {
    min-height: 150px !important;
    resize: vertical !important;
    line-height: 1.6 !important;
}

/* ========================================
   TWO-COLUMN LAYOUT (Email & Phone)
   ======================================== */
.wpforms-field-layout-columns {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 1.5rem !important;
    margin-bottom: 1.5rem !important;
}

.wpforms-layout-column {
    width: 100% !important;
}

.wpforms-field-layout .wpforms-field {
    margin-bottom: 0 !important;
}

/* ========================================
   HTML FIELD (Privacy Disclaimer)
   ======================================== */
.wpforms-field-html {
    margin: 2rem 0 !important;
    padding: 0 !important;
}

#wpforms-149-field_18 {
    padding: 1.5rem !important;
    background: #f8f9fa !important;
    border-left: 4px solid #F9A62D !important;
    border-radius: 8px !important;
}

#wpforms-149-field_18 p {
    font-size: 0.95rem !important;
    line-height: 1.7 !important;
    color: #333333 !important;
    margin: 0 !important;
    font-style: italic !important;
}

#wpforms-149-field_18 b,
#wpforms-149-field_18 strong {
    font-weight: 700 !important;
    font-style: normal !important;
    color: #1F386B !important;
}

/* ========================================
   SUBMIT BUTTON
   ======================================== */
.wpforms-submit-container {
    margin-top: 2rem !important;
    padding: 0 !important;
    text-align: left !important;
}

.wpforms-submit,
button.wpforms-submit {
    background: #F9A62D !important;
    color: #000000 !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    letter-spacing: 1px !important;
    padding: 1rem 2.5rem 2.5rem 2.5rem !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    text-transform: uppercase !important;
    box-shadow: 0 4px 12px rgba(249, 166, 45, 0.25) !important;
    display: inline-block !important;
    width: auto !important;
    line-height: 1.5 !important;
}

.wpforms-submit:hover,
button.wpforms-submit:hover {
    background: #c49963 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(249, 166, 45, 0.4) !important;
    color: #000000 !important;
}

.wpforms-submit:active,
button.wpforms-submit:active {
    transform: translateY(0) !important;
    box-shadow: 0 2px 8px rgba(249, 166, 45, 0.3) !important;
}

/* Submit spinner */
.wpforms-submit-spinner {
    display: none !important;
}

/* ========================================
   FIELD SIZES - OVERRIDE WP FORMS
   ======================================== */
.wpforms-field-large,
.wpforms-field-medium,
.wpforms-field-small {
    width: 100% !important;
    max-width: 100% !important;
}

/* ========================================
   ERROR STATES
   ======================================== */
.wpforms-error input,
.wpforms-error select,
.wpforms-error textarea {
    border-color: #e74c3c !important;
}

.wpforms-error input:focus,
.wpforms-error select:focus,
.wpforms-error textarea:focus {
    border-color: #e74c3c !important;
    box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.1) !important;
}

.wpforms-error-container {
    color: #e74c3c !important;
    font-size: 0.875rem !important;
    margin-top: 0.5rem !important;
}

/* ========================================
   SUCCESS/CONFIRMATION MESSAGE
   ======================================== */
.wpforms-confirmation-container-full {
    background: #f0f9ff !important;
    border: 2px solid #F9A62D !important;
    border-radius: 12px !important;
    padding: 2rem !important;
    color: #1F386B !important;
    font-size: 1.1rem !important;
    text-align: center !important;
}

/* ========================================
   HONEYPOT FIELD (Should be hidden)
   ======================================== */
#wpforms-149-field_5-container {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    left: -9999px !important;
}

/* ========================================
   RESPONSIVE DESIGN - MOBILE
   ======================================== */

/* Tablets and smaller */
@media (max-width: 992px) {
    .wpforms-field-layout-columns {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    .bsb-contact-form-wrapper {
        padding: 2rem 1.5rem !important;
    }
}

/* Mobile devices */
@media (max-width: 768px) {
    .bsb-contact-form-section {
        padding: 4rem 0 !important;
    }
    
    .bsb-contact-form-header {
        margin-bottom: 2rem !important;
    }
    
    .bsb-contact-form-wrapper {
        padding: 2rem 1.5rem !important;
        border-radius: 16px !important;
    }
    
    .wpforms-field {
        margin-bottom: 1.25rem !important;
    }
    
    .wpforms-field input[type="text"],
    .wpforms-field input[type="email"],
    .wpforms-field input[type="tel"],
    .wpforms-field select,
    .wpforms-field textarea {
        padding: 0.875rem 1rem !important;
    }
    
    .wpforms-submit,
    button.wpforms-submit {
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 2rem !important;
    }
    
    #wpforms-149-field_18 {
        padding: 1rem !important;
    }
    
    #wpforms-149-field_18 p {
        font-size: 0.875rem !important;
    }
}




/* ========================================
   ACCESSIBILITY IMPROVEMENTS
   ======================================== */

/* Focus visible for keyboard navigation */
.wpforms-field input:focus-visible,
.wpforms-field select:focus-visible,
.wpforms-field textarea:focus-visible,
.wpforms-submit:focus-visible {
    outline: 3px solid #F9A62D !important;
    outline-offset: 2px !important;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    .wpforms-field input[type="text"],
    .wpforms-field input[type="email"],
    .wpforms-field input[type="tel"],
    .wpforms-field select,
    .wpforms-field textarea {
        border-width: 3px !important;
    }
}

/* ========================================
   ADDITIONAL WP FORMS OVERRIDES
   ======================================== */

/* Remove any default WP Forms styling conflicts */
.wpforms-container * {
    box-sizing: border-box !important;
}

/* Ensure proper spacing between all fields */
.wpforms-field-container > .wpforms-field:last-of-type {
    margin-bottom: 0 !important;
}

/* Remove bottom margin from layout field */
.wpforms-field-layout {
    margin-bottom: 0 !important;
}

/* Adjust field spacing inside layout columns */
.wpforms-field-layout .wpforms-field-container .wpforms-field {
    margin-bottom: 0 !important;
}

/* ========================================
   PRINT STYLES (OPTIONAL)
   ======================================== */
@media print {
    .wpforms-submit {
        display: none !important;
    }
    
    .bsb-contact-form-wrapper {
        box-shadow: none !important;
        border: 1px solid #D4E0F9 !important;
    }
}


/* ========================================
   HERO SECTION REDESIGN — CLIENT FEEDBACK R1
   
   Changes:
   1. Ken Burns: faster zoom, larger final scale, bridge overlap with nav
   2. Orange pipe lines removed
   3. Unified centered layout — headline, identity, quote as one block
   4. More vibrant bridge color via adjusted overlay
   ======================================== */


/* ========================================
   HERO SECTION REDESIGN — CLIENT FEEDBACK R1
   
   Changes:
   1. Ken Burns: faster zoom, larger final scale, bridge overlap with nav
   2. Orange pipe lines removed
   3. Unified centered layout — headline, identity, quote as one block
   4. More vibrant bridge color via adjusted overlay
   ======================================== */


/* --- 1. HERO CONTAINER — taller to let bridge overlap nav --- */

.bsb-home-hero {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 600px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.bsb-hero-background {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
}


/* --- 2. KEN BURNS — faster, more dramatic, bridge-centric --- */

.bsb-hero-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 65% center;       /* bias toward the bridge tower */
    opacity: 0;
    transition: opacity 1.5s ease-in-out;
    z-index: 0;
}

.bsb-hero-image.active {
    opacity: 1;
    animation: kenBurnsZoomIn 4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

@keyframes kenBurnsZoomIn {
    0% {
        transform: scale(1.02);
        /* start barely zoomed — camera already "in motion" */
    }
    100% {
        transform: scale(1.32);
        /* large final zoom — bridge tower fills right half, top overlaps nav area */
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsb-hero-image.active {
        animation: none;
        transform: scale(1.08);
    }
}


/* --- 3. OVERLAY — asymmetric for bridge vibrancy --- */
/*
   Left side stays dark for text contrast.
   Right side opens up to let the warm bridge tones breathe.
   A subtle warm layer enhances the golden hues on the tower.
*/

.bsb-hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    /* Two-layer approach using gradient overlay */
    background:
        /* Warm accent — subtle golden glow on the bridge side */
        radial-gradient(
            ellipse 60% 80% at 72% 45%,
            rgba(249, 166, 45, 0.06) 0%,
            transparent 70%
        ),
        /* Main readability gradient — dark left, transparent right */
        linear-gradient(
            108deg,
            rgba(0, 0, 0, 0.62) 0%,
            rgba(0, 0, 0, 0.48) 35%,
            rgba(0, 0, 0, 0.22) 60%,
            rgba(0, 0, 0, 0.15) 100%
        );
}


/* --- 4. PIPES — removed --- */

.bsb-hero-pipe-top,
.bsb-hero-pipe-bottom {
    display: none !important;
}


/* --- 5. HERO CONTENT — unified centered composition --- */
/*
   Everything lives inside a single centered column.
   The quote rotator is now part of the content flow,
   not absolutely positioned at the bottom.
*/

.bsb-hero-content {
    position: relative;
    z-index: 20;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 2rem;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 0;                             /* we control spacing precisely */
}

.bsb-hero-content-center {
    max-width: 800px;
    width: 100%;
}

/* Headline */
.bsb-hero-headline {
    color: #FFFFFF;
    font-size: clamp(2.2rem, 4.5vw + 0.5rem, 3.6rem);
    font-weight: 400;
    line-height: 1.35;
    margin: 0 0 0.2rem 0;
    letter-spacing: -0.01em;
}

.bsb-hero-headline-primary {
    display: block;
    margin-bottom: 0;
}

.bsb-hero-headline-primary span { color: #FFF; }
.bsb-hero-headline-secondary { display: block; }
.bsb-hero-headline-secondary span { color: #FFF; }


/* --- Decorative divider between headline and firm identity --- */
.bsb-hero-content-center::after {
    content: '';
    display: block;
    width: 100px;
    height: 1px;
    background: rgba(249, 166, 45, 0.5);
    margin: 1.6rem auto 1.4rem;
    transform-origin: center;
}

/* Firm name & type — tighter to headline */
.firm-name {
    color: #F9A62D;
    font-size: clamp(0.85rem, 1.4vw, 1rem);
    font-weight: 500;
    margin-top: 0;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.firm-type {
    color: rgba(207, 210, 211, 0.85);
    font-size: clamp(0.78rem, 1.2vw, 0.9rem);
    font-weight: 400;
    margin-top: 0.3rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}


/* --- 6. QUOTE ROTATOR — repositioned into content flow --- */
/*
   No longer absolutely positioned at bottom.
   Now sits directly below the firm identity block,
   creating a unified vertical composition.
*/

.bsb-hero-quotes-container {
    position: relative;                 /* was: absolute */
    bottom: auto;                       /* was: 300px */
    width: 100%;
    display: flex;
    justify-content: center;
    margin-top: 2.8rem;                 /* breathable gap from firm identity */
    z-index: 20;
}

.bsb-hero-quote-rotator {
    position: relative;
    width: min(700px, 100%);
    min-height: 60px;                   /* shorter — quotes are short teasers */
    overflow: hidden;
    z-index: 1;
}

.bsb-hero-quote-item {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin: 0;
    text-align: center;
    opacity: 0;
    transition: opacity 1.2s ease, filter 1.2s ease;
    pointer-events: none;
    filter: blur(2px);
    will-change: opacity, filter;
}

.bsb-hero-quote-item.active {
    opacity: 1;
    pointer-events: auto;
    filter: blur(0);
}

.bsb-quote-text {
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    line-height: 1.6;
    font-weight: 400;
    color: #F9A62D;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    padding: 0;
    z-index: 1;
    margin: 0;
    max-width: 55ch;
}

.bsb-quote-text .fa-quote-left,
.bsb-quote-text .fa-quote-right {
    font-size: 0.7em;
    opacity: 0.7;
    vertical-align: super;
    margin: 0 0.3em;
}


/* --- 7. ENTRANCE ANIMATIONS — staggered fade-up for content elements --- */

.bsb-hero-headline {
    animation: heroFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

.bsb-hero-content-center::after {
    animation: heroLineExpand 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.55s both;
}

.firm-name {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
}

.firm-type {
    animation: heroFadeUp 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.75s both;
}

.bsb-hero-quotes-container {
    animation: heroFadeUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.1s both;
}

@keyframes heroFadeUp {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes heroLineExpand {
    from {
        opacity: 0;
        transform: scaleX(0);
    }
    to {
        opacity: 1;
        transform: scaleX(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .bsb-hero-headline,
    .bsb-hero-content-center::after,
    .firm-name,
    .firm-type,
    .bsb-hero-quotes-container {
        animation: none;
    }
}


/* --- 8. RESPONSIVE --- */

@media (max-width: 1024px) {
    .bsb-hero-image {
        object-position: 60% center;
    }

    .bsb-hero-quotes-container {
        margin-top: 2.2rem;
    }

    .bsb-hero-quote-rotator {
        width: min(550px, 100%);
        min-height: 55px;
    }
}

@media (max-width: 768px) {
    .bsb-home-hero {
        height: 100vh;
        min-height: 500px;
    }

    .bsb-hero-content {
        padding: 0 1.5rem;
    }

    .bsb-hero-image {
        object-position: 70% center;
    }

    .bsb-hero-overlay {
        background:
            linear-gradient(
                to bottom,
                rgba(0, 0, 0, 0.55) 0%,
                rgba(0, 0, 0, 0.35) 40%,
                rgba(0, 0, 0, 0.50) 100%
            );
    }

    .bsb-hero-headline {
        font-size: clamp(1.8rem, 6vw, 2.4rem);
    }

    .bsb-hero-quotes-container {
        display: flex;                  /* show on mobile — was hidden */
        margin-top: 2rem;
    }

    .bsb-hero-quote-rotator {
        width: 100%;
        min-height: 50px;
    }

    .bsb-quote-text {
        font-size: 0.95rem;
    }

    .bsb-hero-quote-item {
        transition: opacity 0.5s ease, filter 0.5s ease;
    }
}

@media (max-width: 480px) {
    .bsb-hero-headline {
        font-size: clamp(1.6rem, 5.5vw, 2rem);
    }

    .bsb-hero-content-center::after {
        width: 60px;
        margin: 1.2rem auto 1rem;
    }

    .firm-name {
        font-size: 0.8rem;
        letter-spacing: 0.1em;
    }

    .firm-type {
        font-size: 0.75rem;
    }
}


/* ========================================
   PROGRESSIVE ENHANCEMENT STYLES
   Content visible by default, JS adds animations
   ======================================== */

/* ==================== CORE ANIMATION CLASS ==================== */
.bsb-animate-on-scroll {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    transition-delay: var(--stagger-delay, 0s);
}

/* Hide only until IntersectionObserver marks it in view */
.bsb-animate-on-scroll:not(.bsb-in-view) {
    opacity: 0;
    transform: translateY(20px);
}


/* ==================== FRONT PAGE ==================== */

/* Section Animations */
.bsb-section-animate,
.bsb-home-hero {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-section-animate:not(.bsb-section-visible) {
    opacity: 0;
    transform: translateY(30px);
}

/* Staggered Cards */
.bsb-quote-card,
.bsb-logo-card-v2 {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 0.6s ease,
                transform 0.6s ease;
}

.bsb-quote-card:not(.bsb-stagger-visible),
.bsb-logo-card-v2:not(.bsb-stagger-visible) {
    opacity: 0;
    transform: translateY(20px);
}

/* ==================== ATTORNEY PAGES ==================== */


/* Credentials Panel Measurement Helper */
.credentials-panel.bsb-measuring {
    display: block !important;
    position: absolute;
    visibility: hidden;
    height: auto !important;
}

/* ==================== PRACTICE AREA PAGES ==================== */

.bsb-practice-why-item,
.bsb-practice-industries-section,
.bsb-related-practice-card,
.bsb-practice-industries-list li,
.bsb-practice-sidebar {
    /* Uses .bsb-animate-on-scroll class */
}

/* ==================== BLOG ==================== */

/* Blog Filter */
.bsb-blog-card {
    display: flex;
    opacity: 1;
    transition: opacity 0.3s ease;
}

.bsb-blog-card.bsb-filtered-out {
    display: none;
}

/* Blog Images */
.bsb-blog-card img,
.bsb-post-text img {
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bsb-blog-card img.bsb-img-loaded,
.bsb-post-text img.bsb-img-loaded {
    opacity: 1;
}

/* Reading Progress Bar */
.bsb-reading-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: rgba(31, 56, 107, 0.1);
    z-index: 9999;
}

.bsb-progress-fill {
    height: 100%;
    background: linear-gradient(to right, #465666, #F9A62D);
    width: 0%;
    transition: width 0.2s ease;
}

/* Loading Spinner */
.bsb-loading-spinner {
    animation: bsb-spin 1s linear infinite;
}

@keyframes bsb-spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

/* ==================== CONTACT PAGE ==================== */

.bsb-contact-card {
    transition: transform 0.3s ease;
}

.bsb-contact-card.bsb-card-hover {
    transform: translateY(-5px);
}

.bsb-contact-card-icon {
    transition: transform 0.3s ease;
}

.bsb-contact-card.bsb-card-hover .bsb-contact-card-icon {
    transform: scale(1.1) rotate(5deg);
}

/* ==================== CAROUSELS ==================== */

/* Attorney Bio - Quote Carousel */
.atty-quote-item {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.atty-quote-item:first-child,
.atty-quote-item.active {
    display: block;
    opacity: 1;
}

/* Testimonial Carousel */
.bsb-testimonial-slide {
    display: none;
    opacity: 0;
    transition: opacity 0.5s ease;
}

.bsb-testimonial-slide:first-child,
.bsb-testimonial-slide.active {
    display: block;
    opacity: 1;
}

/* Hero Quote Rotator */
/* Quote item styles moved to main hero section (line 4228) to prevent conflicts */

/* ==================== GLOBAL ==================== */

/* Fade-In Elements */
.bsb-fade-in {
    /* Uses .bsb-animate-on-scroll class */
}

/* Pipe Divider Animation */
.bsb-section-with-pipe::before {
    opacity: 1;
    height: 100%;
    transition: height 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.bsb-section-with-pipe:not(.pipe-animated)::before {
    height: 0;
}

/* ==================== ACCESSIBILITY ==================== */

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    .bsb-reduced-motion *,
    .bsb-reduced-motion *::before,
    .bsb-reduced-motion *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Ensure all animated elements are visible for reduced motion */
@media (prefers-reduced-motion: reduce) {
    .bsb-section-animate,
    .bsb-animate-on-scroll,
    .bsb-fade-in,
    .bsb-quote-card,
    .bsb-logo-card-v2,
    .atty-dir-fade-in-scroll {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

/* ========================================
   END OF STYLES
   ======================================== */
   
   
   
   
   /* Hero quote styles are in main hero section (lines 4203-4355) */


   
   
   
   
   

/* ========================================
   ATTORNEY DIRECTORY - FIXED VERSION
   ======================================== */

/* Image Container - FIXED: Added semicolon */
.atty-dir-image-container {
    position: relative;
    width: 100%; /* ← FIXED */
    height: 500px;
    overflow: hidden;
    background: #F3F6FB;
}




/* General Animation Classes */
.bsb-animate-on-scroll {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

.bsb-animate-on-scroll.bsb-in-view {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger Effect */
.bsb-animate-on-scroll[style*="--animation-order"] {
    transition-delay: calc(var(--animation-order) * 0.1s);
}