/* ==========================================================
   Initial overrides for Dante Deo custom branding and styling
   ========================================================== */

        body {
            font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            color: #2b2b2b;
            overflow-x: hidden;
        }
        .fw-semibold { font-weight: 600 !important; }
        .letter-spacing-sm { letter-spacing: 0.05rem; }
        .hero-title { line-height: 1.15; }
        .metric-card {
            border-left: 1px solid #dee2e6;
            padding-left: 1.5rem;
        }
        @media (max-width: 767.98px) {
            .metric-card {
                border-left: none;
                border-top: 1px solid #dee2e6;
                padding-left: 0;
                padding-top: 1.5rem;
            }
        }
        .text-primary {
            color: #144443 !important;
        }
        .btn-primary {
            background-color: #266b74ff !important;
            border-color: #266b74ff !important;
        }
        .btn-primary:hover, .btn-primary:focus, .btn-primary:active {
            background-color: #0f3332 !important;
            border-color: #0f3332 !important;
        }
        .spinner-grow.text-primary {
            background-color: #144443 !important;
        }
        .navbar-brand{
            color: #144443 !important;
        }
/* ==========================================================
   1. MASTER STACKING LAYERS & HEIGHT CONTROL (SLIM & BALANCED)
   ========================================================== */
.navbar, header, .nav-container {
    padding-top: 8px !important;     /* Added elegant, slight top cushion */
    padding-bottom: 8px !important;  /* Added elegant, slight bottom cushion */
    min-height: auto !important;
    background-color: #ffffff;
    position: relative;
    z-index: 1050 !important;      
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05); 
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), 
                box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Ensure the logo wrapper has zero internal drag */
.navbar-brand {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    margin-right: 1.5rem;
    display: flex;
    align-items: center;
}

/* 3D Elevation Lift on Header Hover */
.navbar:hover, header:hover, .nav-container:hover {
    transform: translateY(-2px); 
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06), 0 5px 15px rgba(0, 0, 0, 0.04);
}

/* Balanced text links to align perfectly with a smaller centered logo */
.navbar-nav .nav-link {
    padding-top: 0.3rem !important;  
    padding-bottom: 0.3rem !important; 
    line-height: 1.2;                 
}

/* ==========================================================
   Expertise Cards: Smooth Hover Interaction & Premium Shadow Depth
   ========================================================== */


/* Smooth interaction for the expertise cards */
#our-approach .row > div > div,
#our-core-disciplines .row > div > div,
#our-services .row > div > div {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
    cursor: pointer;
}

/* Hover State: Gentle lift and premium shadow depth */
#our-approach .row > div > div:hover,
#our-core-disciplines .row > div > div:hover,
#our-services .row > div > div:hover {
    transform: translateY(-5px); /* Micro-lift upward */
    box-shadow: 0 12px 30px rgba(38, 107, 116, 0.25) !important; /* Soft custom teal glow */
}
/* ==========================================================
   FLIP CARD INTERACTIVE STYLES
   ========================================================== */
.flip-card-viewport {
    background-color: transparent;
    height: 280px; /* Anchors consistent vertical structure across the grid row */
    perspective: 1000px; /* Required for high-end 3D depth perspective */
}

.flip-card-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transform-style: preserve-3d;
}

/* Slow, deliberate flip for the pyramid triangle cards */
.pyramid-tri .flip-card-inner {
    transition-duration: 2s;
}

/* Trigger horizontal flip state on hover (desktop) or tap (touch — see the
   is-flipped class toggled by JS, since touchscreens have no :hover state) */
.flip-card-viewport:hover .flip-card-inner,
.flip-card-viewport.is-flipped .flip-card-inner {
    transform: rotateY(180deg);
}

/* Base face mechanics for both front and back layers */
.flip-card-front, .flip-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden; /* Safeguards older Safari architectures */
    backface-visibility: hidden;
    overflow: hidden;
}

/* Front Face adjustments to safely stretch the full wrapper container */
.flip-card-front {
    top: 0;
    left: 0;
}

/* Back Face adjustments rotated 180 deg out of default frame sight */
.flip-card-back {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transform: rotateY(180deg);
    text-start: left;
}

/* Micro typography for back card labels */
.text-light-muted {
    color: rgba(248, 249, 250, 0.85);
    font-size: 0.825rem;
    line-height: 1.3;
}

/* ==========================================================
   PYRAMID TRIANGLE CARDS (Dante Deo Delta)
   Four triangle cards tiled into one large triangle/pyramid:
   1 apex card on top, 3 base cards below (centre one inverted).
   ========================================================== */
.pyramid-grid {
    position: relative;
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
    aspect-ratio: 1 / 0.9;
}

.pyramid-tri {
    position: absolute;
    width: 50%;
    height: 50%;
    padding: 4px;
}

.pyramid-tri.pos-top { top: 0;   left: 25%; }
.pyramid-tri.pos-bl  { top: 50%; left: 0; }
.pyramid-tri.pos-mid { top: 50%; left: 25%; }
.pyramid-tri.pos-br  { top: 50%; left: 50%; }

.pyramid-grid .flip-card-viewport {
    height: 100%;
}

/* Apex-up triangles: top card + the two outer base cards */
.tri-up .flip-card-front,
.tri-up .flip-card-back {
    clip-path: polygon(50% 0%, 0% 100%, 100% 100%);
}

/* Apex-down (inverted) triangle: centre base card */
.tri-down .flip-card-front,
.tri-down .flip-card-back {
    clip-path: polygon(0% 0%, 100% 0%, 50% 100%);
}

/* Keep text inside the wide part of each triangle, clear of the sloped edges, and centred */
.pyramid-tri .flip-card-front > div,
.pyramid-tri .flip-card-back > div {
    padding-left: 16% !important;
    padding-right: 16% !important;
    text-align: center !important;
}

.tri-up .flip-card-front > div {
    justify-content: flex-end !important;
    padding-bottom: 16% !important;
}

.tri-down .flip-card-front > div {
    justify-content: flex-start !important;
    padding-top: 16% !important;
}

/* Back face is its own flex container (d-flex align-items-end) — centre it horizontally too */
.pyramid-tri .flip-card-back {
    justify-content: center !important;
}

.tri-up .flip-card-back {
    align-items: flex-end !important;
    padding-bottom: 16% !important;
}

.tri-down .flip-card-back {
    align-items: flex-start !important;
    padding-top: 16% !important;
}

.pyramid-tri .flip-card-front h5,
.pyramid-tri .flip-card-back h6 {
    font-size: 1.15rem;
    line-height: 1.2;
}

/* The section-wide "#why-dante-deo .bg-white *" rule forces white text on any .bg-white
   element (it targets other cards in this section) — the centre triangle's front face also
   carries .bg-white for its base fill, so it gets caught too. Win back dark text here. */
#why-dante-deo .pyramid-tri.tri-down .flip-card-front,
#why-dante-deo .pyramid-tri.tri-down .flip-card-front h5 {
    color: #266B74 !important;
}

/* Small screens: keep the actual triangle/pyramid shape, just tighten text to fit */
@media (max-width: 575.98px) {
    .pyramid-tri .flip-card-front h5,
    .pyramid-tri .flip-card-back h6 {
        font-size: 0.7rem;
        line-height: 1.1;
    }
    .pyramid-tri .flip-card-front > div,
    .pyramid-tri .flip-card-back > div {
        padding-left: 8% !important;
        padding-right: 8% !important;
    }
}

/* ==========================================================
   BUTTONS
   ========================================================== */

/* Shared base button resets to ensure professional spacing */
.btn{
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.5px;
    padding: 0.6rem 1.4rem;
    border-radius: 4px; /* Softens the harsh boxy corners */
    box-shadow: 0 4px 12px rgba(44, 43, 60, 0.15);
    text-transform: uppercase;
    transition: all 0.3s ease-in-out;
}
/* Menu Button Outline Navy */
.btn-outline-nav {
    color: #2c2b3c !important;
    background-color: transparent;
    border: 2px solid #2c2b3c;
}
.btn-outline-nav:hover {
    color: #f5f5f7 !important; /* Soft platinum color highlight on text */
    background-color: #2c2b3c !important;
}
/* Hero Button Outline White */
#hero .btn-outline-white {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
}
#hero .btn-outline-white:hover {
    color: #2c2b3c !important; /* Reverses to dark slate text on white background hover */
    background-color: #ffffff !important;
    
}
/* Hereo Button: Background White*/
#hero .btn-background-white {
    color: #2c2b3c !important; /* Reverses to dark slate text on white background hover */
    background-color: #ffffff !important;
}
#hero .btn-background-white:hover {
    color: #ffffff !important;
    background-color: transparent !important;
    border: 2px solid #ffffff !important;
}

/* Dropdown Menu Item Visual Enhancements */
.dropdown-menu {
    background-color: #ffffff;
    min-width: 240px;
}
/* How We Work: two-level menu — 3 category headings, each revealing its
   own item list on hover (desktop) or tap (mobile) instead of showing
   every item at once. */
.dropdown-submenu {
    position: relative;
}
.dropdown-submenu-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
}
.dropdown-submenu-toggle .submenu-caret {
    font-size: 0.7rem;
    color: #266B74;
    margin-left: 0.5rem;
    transition: transform 0.2s ease;
}
.dropdown-submenu-panel {
    display: none;
    position: static;
    margin: 0;
    padding-left: 1rem;
    border: none;
    box-shadow: none;
    background-color: transparent;
}
.dropdown-submenu.show > .dropdown-submenu-panel {
    display: block;
}
.dropdown-submenu.show > .dropdown-submenu-toggle .submenu-caret {
    transform: rotate(90deg);
}
.dropdown-submenu-panel .dropdown-item {
    white-space: normal;
}
@media (min-width: 992px) {
    [aria-labelledby="howWeWorkDropdown"] {
        width: 260px;
    }
    .dropdown-submenu-panel {
        display: none;
        position: absolute;
        top: 0;
        left: 100%;
        margin-left: 0.25rem;
        padding-left: 0;
        width: 380px;
        min-width: 380px;
        background-color: #ffffff;
        border: 1px solid rgba(0, 0, 0, 0.08);
        border-radius: 0.375rem;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        padding: 0.5rem 0;
    }
    .dropdown-submenu:hover > .dropdown-submenu-panel,
    .dropdown-submenu.show > .dropdown-submenu-panel {
        display: block;
    }
    .dropdown-submenu:hover > .dropdown-submenu-toggle .submenu-caret {
        transform: rotate(90deg);
    }
}
.dropdown-item {
    color: #495057;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.dropdown-item:hover {
    background-color: #f8f9fa;
    color: #2c2b3c;
    font-weight: 600;
}
.dropdown-header {
    font-weight: 700;
    color: #266B74;
}


.btn-custom-outline-nav {
    background-color: transparent;
    color: #2c2b3c;
    border: 1.5px solid #2c2b3c;
}

.btn-custom-outline-nav:hover {
    background-color: #2c2b3c;
    color: #f5f5f7; /* Soft platinum text on hover */
    box-shadow: 0 4px 12px rgba(44, 43, 60, 0.15); /* Soft, subtle lifting shadow */
    transform: translateY(-1px); /* Micro-interaction lift */
}

/* ==========================================================
    Infinite Logo Ticker Styling
   ========================================================== */   

   .logo-ticker-container {
    overflow: hidden;
    background-color: #ffffff; /* Matches standard clean backgrounds */
    padding: 0 0;
    border-bottom: 1px solid #e9ecef;
    border-top: 1px solid #e9ecef;
    display: flex;
}

.logo-ticker-track {
    display: flex;
    width: max-content;
    animation: scrollTicker 40s linear infinite; /*speed*/
}

/* Pause the scrolling animation on hover */
.logo-ticker-container:hover .logo-ticker-track {
    animation-play-state: paused;
}

.logo-ticker-track img {
    height: 50px; /* Adjust this height based on Dante Deo's specific asset dimensions */
    width: auto;
    margin: 0 40px; /* Space between client logos (was padding on the removed <a> wrapper) */
    filter: grayscale(0%); /* Keeps logos looking uniform and professional */
    opacity: 0.9;
    transition: all 0.2s ease-in-out;
}
.logo-ticker-track_old img {
    height: 35px;
    width: auto;
    object-fit: contain;
    filter: grayscale(1000%);
    opacity: 0.6;
    transition: all 0.3s ease-in-out; /* Smooth transition for both color and dimming */
}

.logo-ticker-track:hover img {
    filter: grayscale(100%);
    opacity: 0.3; /* Softly dims the background logos */
}

/* 3. Hovering the Specific Logo: The single image under the cursor 
   snaps back to full color and maximum brightness */
.logo-ticker-track img:hover {
    filter: grayscale(0%);
    opacity: 1;
    transform: scale(1.08); /* Subtle pop to feel responsive */
}

/* Smooth continuous movement keyframes */
@keyframes scrollTicker {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Slides exactly half the width before seamlessly restarting */
    }
}
/* --- END Infinite Logo Ticker Styling --- */
/* ==========================================================
    Metric Flip Cards Styling 
   ========================================================== */
/* Unique Non-Standard Card Aesthetics */
.custom-premium-card {
    min-height: 300px;
    border: 1px solid rgba(0,0,0,0.05) !important;
    border-radius: 1rem !important; /* Premium organic curve */
    transition: all 0.35s cubic-bezier(0.25, 1, 0.5, 1);
    background: #ffffff;
}

/* Giant Typography Emphasis Override */
.metric-giant {
    font-size: 2.6rem;
    font-weight: 900;
    letter-spacing: -1px;
}

.tracking-wider {
    letter-spacing: 0.08em;
}

/* The Graphic Watermark: Moves it deep into the background and offsets it */
.card-graphic-watermark {
    position: absolute;
    right: -15px;
    top: -15px;
    font-size: 6.5rem;
    color: rgba(38, 107, 116, 0.04); /* Fades your brand teal to a near invisible layer */
    line-height: 1;
    transition: all 0.4s ease-in-out;
    transform: rotate(-10deg);
    pointer-events: none;
}

/* Dynamic Top Indicator Line Accent */
.accent-line {
    width: 35px;
    height: 4px;
    border-radius: 2px;
    transition: width 0.3s ease;
}

/* Custom Interaction Engine */
.custom-premium-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 15px 30px rgba(38, 107, 116, 0.06) !important; /* Soft glowing brand tint drop shadow */
    border-color: rgba(38, 107, 116, 0.25) !important;
}

/* Micro animations occurring when card gets hovered */
.custom-premium-card:hover .accent-line {
    width: 60px; /* Line expands outwards beautifully */
}

.custom-premium-card:hover .card-graphic-watermark {
    transform: scale(1.15) rotate(0deg);
    color: rgba(38, 107, 116, 0.08); /* Darkens slightly to indicate deep space focus */
}

/* Action Text Accent Styling */
.custom-card-action {
    color: #266B74;
    transition: opacity 0.2s ease;
}

.arrow-slide {
    display: inline-block;
    transition: transform 0.25s ease;
}

.custom-premium-card:hover .arrow-slide {
    transform: translateX(6px);
}

/* ==========================================================
   OUR CORE DISCIPLINES — top-aligned, alternating dark/light cards.
   Deliberately distinct from the "Our Services" accordion below it and
   from the plain white Client Impact stat cards: giant ghost numerals
   and alternating dark-teal / white / slate treatments.
   ========================================================== */
.discipline-row {
    align-items: flex-start;
}
.discipline-card {
    display: flex;
    flex-direction: column;
    min-height: 420px;
    color: inherit;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.discipline-card:hover {
    transform: translateY(-8px);
}
.discipline-card:hover .arrow-slide {
    transform: translateX(6px);
}
.discipline-ghost-num {
    position: absolute;
    top: -1rem;
    right: 0.5rem;
    font-size: 7.5rem;
    font-weight: 900;
    line-height: 1;
    opacity: 0.1;
    pointer-events: none;
    user-select: none;
}
.discipline-icon-badge {
    width: 56px;
    height: 56px;
    flex-shrink: 0;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    position: relative;
    z-index: 1;
}
.discipline-card h3 {
    position: relative;
    z-index: 1;
}
.discipline-body {
    position: relative;
    z-index: 1;
    flex-grow: 1;
}
.discipline-link {
    position: relative;
    z-index: 1;
    margin-top: auto;
}

/* Variant 1: dark teal */
.discipline-card-dark {
    background-color: #266B74;
    color: #ffffff;
    box-shadow: 0 0.75rem 1.75rem rgba(38, 107, 116, 0.3);
}
.discipline-card-dark:hover { box-shadow: 0 1.5rem 2.5rem rgba(38, 107, 116, 0.4); }
.discipline-card-dark .discipline-ghost-num { color: #ffffff; }
.discipline-card-dark .discipline-icon-badge { background: rgba(255, 255, 255, 0.16); color: #ffffff; }
.discipline-card-dark .discipline-body { color: rgba(255, 255, 255, 0.85); }
.discipline-card-dark .discipline-link { color: #ffffff; }

/* Variant 2: white / outlined */
.discipline-card-light {
    background-color: #ffffff;
    color: #2c2b3c;
    border: 1.5px solid #e3e3e8;
    box-shadow: 0 0.5rem 1.25rem rgba(44, 43, 60, 0.08);
}
.discipline-card-light:hover { box-shadow: 0 1.5rem 2.5rem rgba(44, 43, 60, 0.15); }
.discipline-card-light .discipline-ghost-num { color: #266B74; }
.discipline-card-light .discipline-icon-badge { background: #266B74; color: #ffffff; }
.discipline-card-light .discipline-body { color: #5b5b66; }
.discipline-card-light .discipline-link { color: #266B74; }

/* Variant 3: brand slate */
.discipline-card-slate {
    background-color: #2c2b3c;
    color: #ffffff;
    box-shadow: 0 0.75rem 1.75rem rgba(44, 43, 60, 0.35);
}
.discipline-card-slate:hover { box-shadow: 0 1.5rem 2.5rem rgba(44, 43, 60, 0.45); }
.discipline-card-slate .discipline-ghost-num { color: #ffffff; }
.discipline-card-slate .discipline-icon-badge { background: rgba(255, 255, 255, 0.12); color: #7fe0c9; }
.discipline-card-slate .discipline-body { color: rgba(255, 255, 255, 0.8); }
.discipline-card-slate .discipline-link { color: #7fe0c9; }

/* ==========================================================
   Call to Action Section Styling
   ========================================================== */


/* Clean, Solid White Call to Action Section */
section.py-6.position-relative {
    position: relative !important;
    background-image: none !important; /* Completely kills any lingering map paths */
    background-color: #ffffff !important; /* Forces a solid, clean white background */
}

/* Call to Action Spacing & Typography Fixes */
.py-6 {
    padding-top: 5.5rem !important;
    padding-bottom: 5.5rem !important;
}
.fw-black { font-weight: 900 !important; }
.lh-11 { line-height: 1.15; letter-spacing: -1.5px; }
.cta-brand-text { color: #266B74; }

/* Premium White Interaction Button */
.btn-white-premium {
    background-color: #ffffff;
    color: #266B74 !important;
    padding: 0.9rem 1.75rem;
    font-size: 0.8rem;
    border-radius: 0.5rem;
    border: 1px solid #ffffff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}
.btn-white-premium:hover {
    background-color: transparent;
    color: #ffffff !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}
.btn-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}
.btn-white-premium:hover .btn-arrow {
    transform: translateX(4px);
}
.opacity-95 { opacity: 0.95; }
/* ==========================================================
   Services / Expertise Overview Section Styling
   ========================================================== */


/* Ensures the inner text-center block doesn't inherit any clipping alignment */
#why-dante-deo .text-center.mb-3 {
    padding-top: 1 rem !important;
}

/* Ensures the inner row doesn't push down with default spacing */
#why-dante-deo .row {
    margin-top: 0 !important;
}

/* Keeps the text block beautifully balanced without shifting down */
#why-dante-deo .col-lg-6.d-flex {
    padding-top: 4rem !important; /* Adjust this value if you want the text higher or lower */
}

/* Custom Dante Deo Theme Integration */
#why-dante-deo .card,
#why-dante-deo .bg-white {
    background-color: #266B74 !important;
    border-color: #266B74 !important;
    color: #ffffff !important;
}

/* Force all child text elements, icons, and muted labels to render white */
#why-dante-deo .card *,
#why-dante-deo .bg-white *,
#why-dante-deo .text-muted,
#why-dante-deo .text-secondary {
    color: #ffffff !important;
}

/* The Strategic Outcomes callout sits on this section's plain white
   background (not a teal card), so win the grey body-text colour back
   from the blanket white-text rule above. */
#why-dante-deo .strategic-outcomes-text {
    color: #6c757d !important;
}

/* The Delta section's intro paragraph also sits on the plain white
   background, above the pyramid image — same fix as above. */
#why-dante-deo .delta-intro-text {
    color: #6c757d !important;
}

/* Optional: If you have checkmarks or icons that should stay bright or switch to an accent white */
#why-dante-deo .text-primary {
    color: #ffffff !important; 
    opacity: 0.9;
}

/* Highlights the main expertise text in Dante Deo Green */
#why-dante-deo .text-primary,
#why-dante-deo h3,
#why-dante-deo .text-uppercase {
    color: #266B74 !important;
}

/* Keeps the checkmarks matching the corporate green theme */
#why-dante-deo .list-unstyled span.text-primary {
    color: #266B74 !important;
}

/* ==========================================================
   Footer Links and Legal Link Styling
   ========================================================== */
#pre-footer-accent {
    height: 120px; 
    background-color: #ffffff; 
    border-top: 1px solid rgba(0,0,0,0.03); 
    border-bottom: 1px solid rgba(0,0,0,0.03); 
    margin-bottom: -60px; z-index: 1;"
}
#horizontal-particle-canvas{
    opacity: 0.25; 
    mix-blend-mode: multiply;
}
footer, .main-footer {
    position: relative !important;
    z-index: 2 !important;
    background-color: #2c2b3c; /* Or whatever your solid footer background color is */
}
.custom-footer-links a, .custom-legal-link {
    color: #C8C7CD !important;
    transition: color 0.2s ease, padding-left 0.2s ease, text-decoration 0.2s ease;
}
.custom-footer-links a:hover {
    color: #F5F5F7 !important;
    padding-left: 4px;
    text-decoration: underline !important;
}
.custom-legal-link:hover {
    color: #F5F5F7 !important;
    text-decoration: underline !important;
}
.form-control::placeholder {
    color: #96959E !important;
    opacity: 1;
}



/* ==========================================================
   HERO 'TEAL WAVE' INTEGRATION STYLES
   ========================================================== */

/* Defines the base background anchor for the hero section (Deep brand slate #2C2B3C) */
#hero.bg-light {
    background-color: #2c2b3c !important; /* Forces the deep slate as the base foundation */
    color: #f5f5f7 !important; /* Forces all standard text to a light platinum tone */
}

/* Specific text color overrides for high contrast on the dark wave */
#hero h1 {
    color: #ffffff !important;
}
#hero p.lead {
    color: #f5f5f7 !important; /* Soft platinum color highlight on the subtitle text */
    opacity: 0.9;
}

/* Light Teal Accent color specifically for headlines inside the hero block */
.text-primary-light {
    color: #007bff !important; /* Direct implementation of the brand teal color */
    filter: brightness(115%); /* Slightly lightens the accent word for optimal contrast on the slate wave */
}



/* Responsive Padding for the Hero Area */
@media (min-width: 992px) {
    .py-lg-6 {
        padding-top: 6.5rem !important;
        padding-bottom: 6.5rem !important;
    }
}
/* ==========================================================
   COMPACT HERO SPACING ADJUSTMENTS
   ========================================================== */

/* Tightens the header spacing profile on desktop screens */
@media (min-width: 992px) {
    .py-lg-5 {
        padding-top: 3.5rem !important;
        padding-bottom: 3.5rem !important;
    }
}
/* Client Impact case study cards: reserves enough height for the longest
   stat caption in the section ("Cut in datasource connections" wraps to
   3 lines), applied to every caption so all three cards' numbers-rows end
   up the same height regardless of how short their own captions are. This
   keeps the divider line, numbers, and "Explore Case Study" link aligned
   across all three cards (that block itself is bottom-aligned via mt-auto
   on the card). */
.stat-caption {
    min-height: 4.6em;
}

/* Adjusts font sizing slightly so content easily fits above the fold */
#hero h1.display-5 {
    font-size: calc(1.425rem + 2.1vw) !important;
    line-height: 1.2;
}

/* Three-tier hero headline sizing: "Dante Deo" (medium) < "Delivering a
   Difference." (small) < "Turning Commercial Complexity..." (large, the
   dominant line). All scale together responsively via vw. */
#hero .hero-eyebrow {
    font-size: calc(0.8rem + 1.15vw);
    font-weight: 700;
    letter-spacing: 0.5px;
}
#hero h1 .hero-line-small {
    font-size: calc(0.55rem + 0.85vw);
    line-height: 1.3;
    margin-bottom: 0.25rem;
}
#hero h1 .hero-line-large {
    font-size: calc(1.425rem + 2.1vw);
    line-height: 1.2;
}

/* Reduces paragraph line gaps slightly */
#hero p.small-lead {
    font-size: 1.05rem !important;
    line-height: 1.5;
    margin-bottom: 1.5rem !important;
}

/* Smaller hero body copy on mobile so it doesn't dominate the screen */
@media (max-width: 767.98px) {
    #hero p.hero-body-text {
        font-size: 0.9rem;
    }
}

/* Button size balancing */
#hero .btn-md {
    font-size: 0.9rem;
    padding: 0.55rem 1.5rem;
    font-weight: 600;
}

/* ==========================================================
   Scroll to Top Button Styling
   ========================================================== */
/* Base structural properties for the button shape and colors */
.btnScrollToTop {
    width: 45px !important;   
    height: 45px !important; 
    z-index: 1050 !important; 
    background-color: #266B74 !important;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3) !important;
    border: none !important;
    padding: 0 !important;
    transition: background-color 0.2s ease;
}

/* Force the SVG arrow color to be white natively */
.btnScrollToTop svg,
.btnScrollToTop svg path {
    fill: #ffffff !important;
    transition: fill 0.2s ease;
}

/* Hover State: Button Background changes */
.btnScrollToTop:hover {
    background-color: #144443 !important;
}

/* Hover State: SVG Arrow changes to your Crimson Red */
.btnScrollToTop:hover svg,
.btnScrollToTop:hover svg path {
    fill: #ffffff !important;
}

/* ==========================================================
   Site-wide content typography (consolidated from per-page inline styles)
   ========================================================== */

/* Body copy on content/case-study pages: 1rem on mobile & tablet, 1.25rem from desktop up */
.site-body-text { font-size: 1rem; }
@media (min-width: 1200px) { .site-body-text { font-size: 1.25rem; } }

/* Pull-quote styling on case study pages */
.case-quote { font-size: 1.15rem; line-height: 1.45; }
@media (min-width: 1200px) { .case-quote { font-size: 1.75rem; } }

/* Sliding arrow hover effect for standalone in-page text links (outside .custom-premium-card) */
.custom-card-action:hover .arrow-slide { transform: translateX(6px); }

.navbar-toggler:focus {
    box-shadow: none;
    outline: none;
}
.navbar-toggler:hover {
    background-color: rgba(38, 107, 116, 0.1);
    border-radius: 4px;
}
.navbar-toggler:hover .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23266B74' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

@media (max-width: 991.98px) {
    .navbar-collapse {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background-color: #ffffff;
        box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
        z-index: 1049;
        padding: 1rem 1.5rem 1.5rem;
        max-height: calc(100vh - 70px);
        overflow-y: auto;
    }
    .navbar-collapse .navbar-nav {
        align-items: flex-end;
        text-align: right;
    }
    .navbar-collapse .dropdown-menu {
        text-align: right;
    }
    .navbar-collapse .nav-item,
    .navbar-collapse .dropdown-menu {
        width: 100%;
    }
    .breadcrumb {
        font-size: 0.7rem;
    }
}

.stat-callout-number {
    font-size: 1.5rem;
    font-weight: 900;
    line-height: 1.1;
}
@media (min-width: 992px) {
    .stat-callout-number {
        font-size: 3.5rem;
    }
}


/* ==========================================================
   Homepage: Expertise Accordion
   ========================================================== */

.expertise-accordion .accordion-button,
.expertise-accordion .accordion-button:not(.collapsed) {
    color: #ffffff;
    background-color: transparent;
    box-shadow: none;
}
.expertise-accordion .accordion-button:focus {
    box-shadow: none;
    border-color: transparent;
}
.expertise-accordion .accordion-button::after {
    filter: invert(1) grayscale(100%) brightness(200%);
}
.expertise-accordion .accordion-body {
    background-color: #ffffff;
    color: #266B74;
}


/* ==========================================================
   Homepage: Client Impact case study cards (mobile/tablet swipe)
   ========================================================== */

@media (max-width: 991.98px) {
    #client-impact .case-study-row {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #client-impact .case-study-row::-webkit-scrollbar {
        display: none;
    }
    #client-impact .case-study-row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
        scroll-snap-align: start;
    }
}

.case-study-swipe-hint {
    position: absolute;
    top: 50%;
    right: 0.5rem;
    transform: translateY(-50%);
    z-index: 5;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: none;
    background-color: #266B74;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    font-size: 1.1rem;
    transition: background-color 0.2s ease;
}
.case-study-swipe-hint:hover,
.case-study-swipe-hint:focus {
    background-color: #1d5259;
    color: #ffffff;
}


/* ==========================================================
   Interior Page Headlines: shrink on mobile/tablet
   (Homepage hero h1 is handled separately by the more specific
   #hero h1.display-5 rule above and is unaffected by this)
   ========================================================== */

h1.display-5 {
    line-height: 1.15;
}
@media (max-width: 767.98px) {
    h1.display-5 {
        font-size: 1.85rem !important;
    }
}
@media (min-width: 768px) and (max-width: 991.98px) {
    h1.display-5 {
        font-size: 2.35rem !important;
    }
}


/* ==========================================================
   Cookie Consent Banner
   ========================================================== */

#cookie-consent-banner {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1080;
    background-color: #2c2b3c;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    opacity: 0;
    transition: transform 0.35s ease, opacity 0.35s ease;
}
#cookie-consent-banner.show {
    transform: translateY(0);
    opacity: 1;
}
.cookie-consent-inner {
    max-width: 1140px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
}
.cookie-consent-text {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.5;
    color: #C8C7CD;
    flex: 1 1 320px;
}
.cookie-consent-text a {
    color: #ffffff;
    text-decoration: underline;
}
.cookie-consent-actions {
    display: flex;
    gap: 0.75rem;
    flex-shrink: 0;
}
.btn-cookie-accept {
    background-color: #266B74;
    border: 1px solid #266B74;
    color: #ffffff;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}
.btn-cookie-accept:hover {
    background-color: #1d5259;
    border-color: #1d5259;
    color: #ffffff;
}
.btn-outline-cookie {
    background-color: transparent;
    border: 1px solid #C8C7CD;
    color: #F5F5F7;
    font-weight: 600;
    font-size: 0.875rem;
    padding: 0.5rem 1.25rem;
    border-radius: 0.375rem;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn-outline-cookie:hover {
    background-color: rgba(255, 255, 255, 0.08);
    color: #ffffff;
    border-color: #ffffff;
}
@media (max-width: 575.98px) {
    .cookie-consent-inner {
        flex-direction: column;
        align-items: stretch;
    }
    .cookie-consent-actions {
        justify-content: stretch;
    }
    .cookie-consent-actions .btn {
        flex: 1;
    }
}