/* ==========================================================================
   1. GLOBAL COLOR VARIABLES & RESET
   ========================================================================== */
:root {
    --color-dark-blue: #111344;
    --color-light-blue: #2AA6D1;
    --color-white: #ffffff;
    --color-hover-dark: #111344; /* A slightly lighter dark blue for the button hover */
    --color-text: #1e293b;
    --transition-smooth: all 0.3s ease;
}

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

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
/* ==========================================================================
   2. HEADER STRUCTURE (DESKTOP)
   ========================================================================== */
:root {
    --color-dark-blue: #121244;
    --color-light-blue: #33a3cb;
    --color-white: #ffffff;
    --transition-smooth: all 0.3s ease;
}

.site-header {
    background-color: var(--color-dark-blue) !important;
    position: sticky;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 99999;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 15px 20px;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 20px;
}

/* Logo Fixes */
.header-logo {
    margin-right: auto !important; /* Forcefully pushes everything else to the right */
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    z-index: 10002;
}

.header-logo a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    text-align: left !important;
}

.header-logo img {
    height: 75px !important;
    width: auto !important;
    display: block !important;
    margin-left: 0 !important;
}

/* Navigation Link Constraints */
.header-nav {
    display: flex !important;
    align-items: center !important;
    margin-left: auto !important; /* Pushes menu right, keeping button separate */
    margin-right: 20px !important;
}

.nav-menu {
    display: flex !important;
    flex-direction: row !important;
    list-style: none !important;
    gap: 35px !important;
    align-items: center !important;
}

.nav-menu a {
    color: var(--color-light-blue) !important;
    text-decoration: none !important;
    font-weight: 500;
    font-size: 1rem;
    transition: var(--transition-smooth);
    white-space: nowrap !important; /* Prevents words from breaking up */
}

.nav-menu a:hover {
    color: var(--color-white) !important;
}

.nav-menu a.active {
    color: var(--color-white) !important;
}

/* Isolated Action Button Constraints */
.header-actions {
    flex-shrink: 0 !important;
    display: block !important;
}

.header-actions .btn-cta {
    display: inline-block !important;
    background-color: var(--color-light-blue) !important;
    color: var(--color-white) !important;
    padding: 12px 24px !important;
    border-radius: 6px !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    border: 2px solid transparent !important;
    white-space: nowrap !important;
}

.header-actions .btn-cta:hover {
    background-color: transparent !important;
    border-color: var(--color-white) !important;
    color: var(--color-white) !important;
}

/* Hamburger Trigger */
.menu-toggle {
    display: none;
    flex-direction: column;
    justify-content: space-between;
    width: 30px;
    height: 21px;
    background: transparent;
    border: none;
    cursor: pointer;
}

.menu-toggle .bar {
    height: 3px;
    width: 100%;
    background-color: var(--color-white);
    border-radius: 10px;
    transition: var(--transition-smooth);
}

/* ==========================================================================
   3. RESPONSIVE LAYOUT (TABLET & MOBILE SCREEN FIXES)
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .menu-toggle {
        display: flex !important;
        z-index: 10001;
        margin-left: auto !important;
    }

    .menu-toggle.is-active .bar:nth-child(1) {
        transform: translateY(9px) rotate(45deg);
    }
    .menu-toggle.is-active .bar:nth-child(2) {
        opacity: 0;
    }
    .menu-toggle.is-active .bar:nth-child(3) {
        transform: translateY(-9px) rotate(-45deg);
    }

    /* Completely isolate and slide down navigation box */
    .header-nav {
        position: fixed !important;
        top: 0;
        right: -100%; /* Off-screen default */
        width: 80%;
        max-width: 320px;
        height: 100vh;
        background-color: #121244 !important; /* Forces solid dark blue background panel */
        padding: 100px 30px 40px 30px !important;
        box-shadow: -5px 0 25px rgba(0,0,0,0.3);
        transition: var(--transition-smooth);
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .header-nav.is-open {
        right: 0 !important; /* Slide open smoothly */
    }

    /* Dropdown List Items */
    .nav-menu {
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
    }

    .nav-menu li {
        width: 100% !important;
    }

    .nav-menu a {
        display: block !important;
        font-size: 1.2rem;
        padding: 12px 0 !important;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
        width: 100%;
    }

    /* DESKTOP BUTTON HIDDEN: Replaced with native panel element to stop overlaps */
    .header-actions {
        display: none !important; 
    }

    /* Instantly builds a perfectly sized responsive button inside the drawer */
    .header-nav.is-open::after {
        content: "Get Started";
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        background-color: var(--color-light-blue) !important;
        color: var(--color-white) !important;
        padding: 14px !important;
        border-radius: 6px !important;
        font-weight: 600;
        margin-top: 35px;
        cursor: pointer;
        box-sizing: border-box;
    }
}

@media screen and (max-width: 480px) {
    .header-container {
        padding: 12px 15px;
    }
    .header-logo img {
        height: 35px; /* Shrinks logo to provide screen space on smaller mobile screens */
    }
}

/* ==========================================================================
   4. NEW FRONT PAGE DESIGN ARCHITECTURE
   ========================================================================== */
.ndis-landing-grid {
    width: 100%;
    overflow-x: hidden;
}

.ndis-section {
    padding: 90px 0;
    width: 100%;
}

.ndis-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Structural Background Section Swaps */
.hero-section-white, .choose-us-white, .contact-form-section-white {
    background-color: var(--color-white);
}

.services-section-grey,
.testimonials-section-grey {
    background-color: #f8fafc; /* Standard crisp light grey tone */
}

/* Flex Grid Split Mechanics */
.split-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 50px;
}

.split-container.align-center {
    align-items: center;
}

.hero-left-col, .choose-left-text {
    flex: 1;
    max-width: 550px;
}

.hero-right-col, .choose-right-graphic {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Image Presentation Parameters */
.hero-fluid-img {
    width: 100%;
    max-width: 520px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 35px rgba(18,18,68,0.12);
    display: block;
}

/* Section Header Formats */
.ndis-tagline {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.hero-headline {
    color: var(--color-dark-blue);
    font-size: 3rem;
    line-height: 1.2;
    margin-bottom: 20px;
    font-weight: 700;
}

.hero-paragraph, .section-subtitle {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #475569;
    margin-bottom: 30px;
}

.section-center-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto 55px auto;
}

.section-title {
    color: var(--color-dark-blue);
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 15px;
}

/* Global Button Archetypes */
.btn-dark-blue {
    display: inline-block;
    background-color: var(--color-dark-blue);
    color: var(--color-white) !important;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
}

.btn-dark-blue:hover {
    background-color: var(--color-light-blue);
}

.btn-light-blue-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--color-light-blue) !important;
    border: 2px solid var(--color-light-blue);
    padding: 12px 28px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
}

.btn-light-blue-outline:hover {
    background-color: var(--color-light-blue);
    color: var(--color-white) !important;
}

/* Services 3-Column Card Architecture */
.services-cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 45px;
}

.service-panel-card {
    background-color: var(--color-dark-blue);
    padding: 40px 30px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
    transition: var(--transition-smooth);
}

.service-panel-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(18,18,68,0.06);
    border-color: var(--color-light-blue);
    background-color: var(--color-light-blue);
}

.card-icon {
    font-size: 2.5rem;
    margin-bottom: 20px;
    width: 60px;
    height: 60px;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.service-panel-card h3 {
    color: var(--color-white);
    margin-bottom: 12px;
    font-size: 1.35rem;
}

.service-panel-card p {
    color: var(--color-white);
    line-height: 1.5;
    font-size: 0.95rem;
}

.center-action-row {
    text-align: center;
}

/* Section 3: Why Choose Us Lists */
.choose-bullets-list {
    list-style: none;
    margin-bottom: 35px;
}

.choose-bullets-list li {
    position: relative;
    padding-left: 30px;
    margin-bottom: 15px;
    font-size: 1.05rem;
    line-height: 1.5;
    color: #334155;
}

.choose-bullets-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 1.2rem;
}

.trust-badge-container {
    background-color: var(--color-dark-blue);
    padding: 50px 40px;
    border-radius: 12px;
    color: var(--color-white);
    width: 100%;
    max-width: 400px;
}

.badge-item {
    margin-bottom: 25px;
    font-size: 1.1rem;
}

.badge-item:last-child {
    margin-bottom: 0;
}

.badge-item span {
    display: block;
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-light-blue);
}

/* ==========================================================================
   4. TESTIMONIAL CSS SLIDER SYSTEMS (UPDATED COLORS)
   ========================================================================== */
.testimonials-section-grey {
    background-color: var(--color-light-blue) !important; /* Replaced with your global light blue */
    padding: 90px 0;
}

/* Force section header text inside light blue background to be white */
.testimonials-section-grey .section-title {
    color: var(--color-white) !important;
}

.testimonials-section-grey .section-subtitle {
    color: rgba(255, 255, 255, 0.85) !important; /* Soft white subtext */
}

.slider-viewport {
    width: 100%;
    overflow: hidden;
    padding: 10px 0;
}

.slider-track {
    display: flex;
    width: 100%;
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.testimonial-slide {
    flex: 0 0 50%; /* Holds 2 columns concurrently by default */
    padding: 0 15px;
    box-sizing: border-box;
}

/* Transformed card boxes to stand out beautifully on top of light blue background */
.slide-inner-box {
    background-color: var(--color-white) !important; /* Changes card back to pure white */
    padding: 35px;
    border-radius: 8px;
    border: 1px solid #e2e8f0; /* Crisp light grey border edge line */
    box-shadow: 0 10px 25px rgba(18, 18, 68, 0.1); /* Soft shadow depth */
    height: 100%; 
}

.stars-rating {
    color: #f59e0b; /* Soft pinkish gold accent stars that look elegant on blue */
    margin-bottom: 15px;
    font-size: 1.2rem;
}

.quote-text {
    font-style: italic;
    color: var(--color-text); !important; /* Sharp, readable dark charcoal black */
    font-size: 1.05rem;
    line-height: 1.6;
    margin-bottom: 20px;
}

.client-author {
    color: var(--color-dark-blue) !important;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: 0.5px;
}

/* Dot Navigation Adjustments for Blue Backdrop visibility */
.slider-dots-nav {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 35px;
}

.slider-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.4); /* Muted white dots */
    border: none;
    cursor: pointer;
    transition: var(--transition-smooth);
    padding: 0;
}

.slider-dot.is-active {
    background-color: var(--color-white) !important; /* Stark white active indicator */
    width: 24px;
    border-radius: 6px;
}

@media screen and (max-width: 1024px) {
    .testimonial-slide {
        flex: 0 0 100%; /* Spans full width on tablets/mobile devices */
    }
}

/* Section 5: Call To Action Frame */
.cta-dark-blue-bg {
    background-color: var(--color-dark-blue);
    padding: 60px 0;
}

.cta-inner-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
}

.cta-text-block h2 {
    color: var(--color-white);
    font-size: 2rem;
    margin-bottom: 10px;
}

.cta-text-block p {
    color: #94a3b8;
    font-size: 1.1rem;
}

.btn-white-cta {
    display: inline-block;
    background-color: var(--color-white);
    color: var(--color-dark-blue) !important;
    padding: 14px 32px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 1rem;
    font-weight: 700;
    white-space: nowrap;
    transition: var(--transition-smooth);
}

.btn-white-cta:hover {
    background-color: var(--color-light-blue);
    color: var(--color-white) !important;
}

/* Section 6: Intake Input Form Engine Layouts */
.form-narrow-container {
    max-width: 750px !important;
}

.ndis-intake-form {
    background-color: #f8fafc;
    padding: 40px;
    border-radius: 10px;
    border: 1px solid #e2e8f0;
}

.form-input-row {
    display: flex;
    gap: 20px;
}

.form-input-row .form-group {
    flex: 1;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 600;
    color: var(--color-dark-blue);
    font-size: 0.95rem;
}

.form-group input, .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    transition: var(--transition-smooth);
}

.form-group input:focus, .form-group textarea:focus {
    outline: none;
    border-color: var(--color-light-blue);
    box-shadow: 0 0 0 3px rgba(51,163,203,0.15);
}

.btn-submit-payload {
    background-color: var(--color-dark-blue);
    color: var(--color-white);
    border: none;
    padding: 14px 35px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    width: 100%;
}

.btn-submit-payload:hover {
    background-color: var(--color-light-blue);
}

.form-feedback {
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-weight: 500;
}

.success-alert {
    background-color: #dcfce7;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.error-alert {
    background-color: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

/* ==========================================================================
   5. COMPLETE RESPONSIVE INTENT OVERRIDES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .hero-headline { font-size: 2.25rem; }
    .split-container { flex-direction: column !important; gap: 40px; }
    .hero-left-col, .choose-left-text { max-width: 100%; text-align: center; }
    .hero-btn-row, .left-action-row { display: flex; justify-content: center; }
    .hero-right-col { order: -1; } /* Puts picture above title on tablet/mobile views */
    
    .services-cards-grid { grid-template-columns: repeat(2, 1fr); }
    .testimonial-slide { flex: 0 0 100%; } /* Transforms layout track to 1 slide view width */
    .cta-inner-wrapper { flex-direction: column; text-align: center; gap: 25px; }
}

@media screen and (max-width: 768px) {
    .ndis-section { padding: 60px 0; }
    .services-cards-grid { grid-template-columns: 1fr; }
    .form-input-row { flex-direction: column; gap: 0; }
    .ndis-intake-form { padding: 25px 20px; }
    .section-title { font-size: 1.75rem; }
}

/* ==========================================================================
   5. FOOTER
   ========================================================================== */
.site-footer {
    background-color: var(--color-dark-blue) !important;
    color: var(--color-white) !important;
    padding: 70px 0 0 0;
    font-family: inherit;
    border-top: 4px solid var(--color-light-blue);
    width: 100%;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px 50px 20px;
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 40px;
    box-sizing: border-box;
}

/* Base structural setups for content column boxes */
.footer-column {
    flex: 1;
}

.footer-brand-block {
    max-width: 380px;
}

.footer-logo img {
    height: 55px !important;
    width: auto !important;
    display: block;
    margin-bottom: 20px;
    border-radius: 4px;
}

.footer-tagline {
    font-size: 0.95rem;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.75);
}

/* Headings within column segments */
.footer-heading {
    color: var(--color-white) !important;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 10px;
}

/* Little graphical divider underline line under headers */
.footer-heading::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 3px;
    background-color: var(--color-light-blue);
    border-radius: 2px;
}

/* Column 2 Link Navigation Layout rules */
.footer-links-list {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.footer-links-list li {
    margin-bottom: 12px;
}

.footer-links-list a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
    display: inline-block;
}

.footer-links-list a:hover {
    color: var(--color-light-blue) !important;
    transform: translateX(4px);
}

/* Column 3 Contact info wrapper elements */
.footer-info-details {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 0 25px 0 !important;
}

.footer-info-details li {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 15px;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.8);
}

.footer-info-details a {
    color: rgba(255, 255, 255, 0.8) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.footer-info-details a:hover {
    color: var(--color-light-blue) !important;
}

/* Light blue unicode icon box parameter shapes */
.info-icon {
    color: var(--color-light-blue) !important;
    font-size: 1.1rem;
    flex-shrink: 0;
}

/* Interactive Social Media Icons Layout rules */
.footer-social-row {
    display: flex;
    gap: 15px;
    align-items: center;
}

.social-icon-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    background-color: rgba(255, 255, 255, 0.06);
    color: var(--color-light-blue) !important; /* Forces your light blue for icons */
    border-radius: 50%;
    transition: var(--transition-smooth);
    text-decoration: none !important;
}

.social-icon-link:hover {
    background-color: var(--color-light-blue);
    color: var(--color-white) !important; /* Flips text/vector paths to white on hover */
    transform: translateY(-3px);
}

/* Copyright Legal Base Strip */
.footer-copyright-bar {
    background-color: rgba(0, 0, 0, 0.2); /* Slightly darker shade layout plane for grounding */
    padding: 25px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    text-align: center;
}

.copyright-container {
    max-width: 1200px;
    margin: 0 auto;
}

.footer-copyright-bar p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0 0 6px 0;
}

.footer-copyright-bar p:last-child {
    margin-bottom: 0;
}

.ndis-disclaimer {
    font-size: 0.78rem !important;
    font-style: italic;
    color: rgba(255, 255, 255, 0.35) !important;
}

/* ==========================================================================
   6. FOOTER RESPONSIVE INTERCEPT MEDIA QUERIES 
   ========================================================================== */
@media screen and (max-width: 992px) {
    .footer-container {
        flex-direction: column !important; /* Stack columns flat vertically on tablet/mobile screens */
        gap: 35px;
        padding-bottom: 40px;
    }

    .footer-brand-block {
        max-width: 100%; /* Allows paragraph to fluidly occupy container spacing width */
    }

    .footer-heading {
        margin-bottom: 15px;
    }
}

@media screen and (max-width: 480px) {
    .site-footer {
        padding-top: 50px;
    }

    .footer-info-details li {
        align-items: flex-start; /* Prevents long text lines from distorting icon alignments on small viewports */
    }
}

/* ==========================================================================
   6. CUSTOM ABOUT US PAGE CONFIGURATIONS
   ========================================================================== */
.about-page-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.about-page-wrapper section {
    padding: 90px 0;
    box-sizing: border-box;
}

.about-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Base Structural Background Color Sets */
.section-bg-white {
    background-color: var(--color-white);
}

.section-bg-grey {
    background-color: #f8fafc; /* Crisp, clean light grey canvas */
}

.section-bg-darkblue {
    background-color: var(--color-dark-blue); /* Crisp, clean light grey canvas */
}

.section-bg-blue {
    background-color: var(--color-light-blue) !important; /* Global light blue */
}

/* Container Structure Definitions */
.split-about-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 60px;
}

.split-about-container.align-items-center {
    align-items: center;
}

.intro-left-text, .team-left-content {
    flex: 12;
    max-width: 600px;
}

.intro-right-image, .team-right-graphic {
    flex: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

.narrow-text-frame {
    max-width: 800px;
    margin: 0 auto;
    text-align: center;
}

/* Headings & Text Presentation Layout Rules */
.about-pre-title {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.about-main-title {
    color: var(--color-dark-blue) !important;
    font-size: 2.85rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 25px;
}

.about-section-heading {
    color: var(--color-white) !important;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.about-core-values {
    color: var(--color-dark-blue) !important;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.about-team {
    color: var(--color-dark-blue) !important;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
    text-align: center;
}

.about-section-heading.text-left {
    text-align: left !important;
}

.about-section-subheading {
    font-size: 1.15rem;
    color: #475569;
    text-align: center;
    max-width: 700px;
    margin: 0 auto 50px auto;
}

.about-lead-paragraph {
    font-size: 1.25rem;
    line-height: 1.6;
    color: #1e293b;
    margin-bottom: 20px;
    font-weight: 500;
}

.about-body-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-white);
    margin-bottom: 20px;
}

.about-team-text {
    font-size: 1.05rem;
    line-height: 1.65;
    color: var(--color-dark-blue);
    margin-bottom: 20px;
}

.about-body-text:last-child {
    margin-bottom: 0;
}

/* Color Modifiers for Light Blue Backdrop Frame */
.color-white {
    color: var(--color-white) !important;
}

.color-white-translucent {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Hero Fluid Image Properties */
.about-hero-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(18, 18, 68, 0.1);
    display: block;
}

/* Section 3: Why Choose Us (White Content Cards on Light Blue Background) */
.why-elaborated-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.why-extended-card {
    background-color: var(--color-white) !important;
    padding: 45px 30px;
    border-radius: 8px;
    box-shadow: 0 10px 25px rgba(18, 18, 68, 0.08);
    transition: var(--transition-smooth);
}

.why-extended-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(18, 18, 68, 0.15);
}

.why-card-icon {
    font-size: 2rem;
    margin-bottom: 20px;
    width: 55px;
    height: 55px;
    background-color: #f1f5f9;
    color: var(--color-dark-blue) !important; /* Dark blue icon marker */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.why-extended-card h3 {
    color: var(--color-dark-blue) !important; /* Dark blue title strings */
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.why-extended-card p {
    color: #475569;
    font-size: 0.95rem;
    line-height: 1.6;
}

/* Section 4: Vertical Value Row Items Layout */
.values-flex-rows {
    max-width: 900px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.value-row-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
    padding-bottom: 30px;
    border-bottom: 1px solid #e2e8f0;
}

.value-row-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.value-badge {
    background-color: var(--color-light-blue);
    color: var(--color-white) !important; /* Dark blue badge highlight */
    font-weight: 700;
    font-size: 1.2rem;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    flex-shrink: 0;
}

.value-text-block h3 {
    color: var(--color-dark-blue) !important;
    font-size: 1.4rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.value-text-block p {
    color: #475569;
    font-size: 1rem;
    line-height: 1.6;
}

/* Section 5: Team Highlight Promise Panel Box */
.promise-highlight-box {
    background-color: var(--color-dark-blue) !important; /* Dark blue callout container */
    padding: 50px 40px;
    border-radius: 12px;
    color: var(--color-white);
    width: 100%;
    max-width: 450px;
    box-shadow: 0 15px 30px rgba(18, 18, 68, 0.15);
}

.promise-highlight-box h3 {
    color: var(--color-white) !important;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.promise-highlight-box p {
    color: rgba(255, 255, 255, 0.8);
    font-size: 1rem;
    line-height: 1.6;
    margin-bottom: 30px;
}

/* Action Button Formatting */
.about-btn-dark {
    display: inline-block;
    background-color: var(--color-light-blue); /* Light blue accent button fill */
    color: var(--color-white) !important;
    text-decoration: none;
    padding: 14px 30px;
    border-radius: 6px;
    font-weight: 600;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
    text-align: center;
}

.about-btn-dark:hover {
    background-color: var(--color-white);
    color: var(--color-dark-blue) !important; /* Contrast inversion on hover */
}

/* ==========================================================================
   7. ABOUT PAGE RESPONSIVE INTERCEPT MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .about-page-wrapper section { padding: 65px 0; }
    .about-main-title { font-size: 2.25rem; }
    .about-section-heading { font-size: 1.85rem; }
    
    .split-about-container {
        flex-direction: column !important; /* Stack columns vertically on smaller devices */
        gap: 40px;
    }
    
    .intro-left-text, .team-left-content { max-width: 100%; text-align: center; }
    .about-section-heading.text-left { text-align: center !important; }
    
    .intro-right-image { order: -1; } /* Puts picture directly above title text on mobile layout sizes */
    .why-elaborated-grid { grid-template-columns: 1fr; gap: 25px; } /* Converts grid cards to full width rows */
    .promise-highlight-box { max-width: 100%; box-sizing: border-box; }
}

@media screen and (max-width: 600px) {
    .value-row-item { flex-direction: column; gap: 15px; text-align: center; align-items: center; }
    .about-hero-img { max-width: 100%; }
}

/* ==========================================================================
   8. CUSTOM SERVICES PAGE CATALOG CONFIGURATIONS
   ========================================================================== */
.services-page-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.services-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Page Section Background Swaps */
.services-page-wrapper section {
    padding: 100px 0;
    box-sizing: border-box;
    width: 100%;
}

.narrow-intro-frame {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

/* Text Element Design Specifications */
.services-pre-title {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 15px;
}

.services-main-title {
    color: var(--color-dark-blue) !important;
    font-size: 3rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 25px;
}

.services-lead-paragraph {
    font-size: 1.25rem;
    line-height: 1.65;
    color: #475569;
}

/* Two-Column Service Row Containers */
.split-services-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    align-items: center;
    gap: 60px;
}

.service-text-side {
    flex: 12;
}

.service-graphic-side {
    flex: 10;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Flip image and text position for a checkerboard layout layout effect */
.split-services-container.reverse-layout {
    flex-direction: row-reverse !important;
}

/* Component Details Design Settings */
.service-badge-icon {
    font-size: 2.2rem;
    background-color: #f1f5f9;
    color: var(--color-dark-blue) !important; /* Dark blue icon */
    width: 65px;
    height: 65px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    margin-bottom: 25px;
}

.service-badge-icon.bg-translucent-white {
    background-color: rgba(255, 255, 255, 0.15) !important;
    color: var(--color-white) !important;
}

.service-text-side h2 {
    color: var(--color-dark-blue) !important; /* Dark blue headings */
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.service-block-subtitle {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--color-light-blue);
    margin-bottom: 20px;
}

.service-description {
    font-size: 1.05rem;
    line-height: 1.65;
    color: #475569;
    margin-bottom: 25px;
}

/* Specialized Custom Bullet Lists */
.services-bullet-points {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.services-bullet-points li {
    position: relative;
    padding-left: 28px;
    margin-bottom: 12px;
    font-size: 1rem;
    line-height: 1.5;
    color: #334155;
}

.services-bullet-points li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--color-light-blue); /* Light blue checks */
    font-weight: 700;
    font-size: 1.1rem;
}

/* Override check colors for the light blue background block */
.services-bullet-points.points-white li {
    color: rgba(255, 255, 255, 0.9) !important;
}

.services-bullet-points.points-white li::before {
    color: var(--color-white) !important;
}

/* Layout Image Fluid Modifiers */
.service-featured-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(18,18,68,0.08);
    display: block;
}

/* Color Modifier Fixes for Section 3 Blue Block */
.color-white { color: var(--color-white) !important; }
.color-white-muted { color: rgba(255, 255, 255, 0.85) !important; }

/* Section 5: Matching Philosophy */
.philosophy-title {
    color: var(--color-dark-blue) !important;
    font-size: 2.25rem;
    font-weight: 700;
    margin-bottom: 20px;
}

.philosophy-text {
    font-size: 1.1rem;
    line-height: 1.7;
    color: #475569;
    margin-bottom: 40px;
}

/* Interactive Dark Blue Action Button */
.services-btn-dark-blue {
    display: inline-block;
    background-color: var(--color-dark-blue); /* Dark Blue Button Background */
    color: var(--color-white) !important; /* White Text */
    padding: 15px 35px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-smooth);
    border: 2px solid transparent;
}

.services-btn-dark-blue:hover {
    background-color: var(--color-light-blue); /* Light blue accent swap on hover */
    transform: translateY(-2px);
}

/* ==========================================================================
   9. CSS SCROLL REVEAL ANIMATION ENGINES
   ========================================================================== */
/* Header Static Fade-In */
.animate-fade-in {
    opacity: 0;
    animation: fadeInStatic 1s ease-out forwards;
}

@keyframes fadeInStatic {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Scroll Trigger Animation Baselines */
.scroll-reveal {
    opacity: 0;
    transform: translateY(35px); /* Starts 35px lower down */
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
    will-change: transform, opacity; /* Optimizes graphics engine processing rendering */
}

/* Triggered by Javascript Intersection Observer when scrolled into view */
.scroll-reveal.is-visible {
    opacity: 1;
    transform: translateY(0); /* Glides perfectly back up to target layout spacing */
}

/* Disable active layout transformations if user has system accessibility movement reductions checked */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
    .animate-fade-in {
        animation: none !important;
        opacity: 1 !important;
    }
}

/* ==========================================================================
   10. SERVICES TEMPLATE RESPONSIVE MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .services-page-wrapper section { padding: 70px 0; }
    .services-main-title { font-size: 2.25rem; }
    .service-text-side h2 { font-size: 1.75rem; }
    
    .split-services-container, .split-services-container.reverse-layout {
        flex-direction: column !important; /* Forces layout rows flat into vertical stacking views */
        gap: 40px;
    }
    
    .service-text-side { max-width: 100%; text-align: center; }
    .service-badge-icon { margin-left: auto; margin-right: auto; } /* Centers icons on mobile viewports */
    .services-bullet-points li { text-align: left; } /* Keeps bullet read strings legible and left-aligned */
    .service-graphic-side { order: -1; width: 100%; } /* Puts graphic block above content details for easy scanning */
}

/* ==========================================================================
   11. CUSTOM CONTACT PAGE CONFIGURATIONS
   ========================================================================== */
.contact-page-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.contact-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

/* Base structural layout pad sections */
.contact-hero-section {
    padding: 80px 0;
    background-color: var(--color-white);
}

/* New Split Hero Flex Container */
.split-hero-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 50px;
}

.hero-text-side {
    flex: 1;
    text-align: left;
}

.hero-image-side {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}

/* Contact Hero Fluid Image styles */
.contact-hero-fluid-img {
    width: 100%;
    max-width: 500px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(18, 18, 68, 0.1);
}

.contact-body-section {
    padding: 90px 0;
    background-color: var(--color-dark-blue);
}

.contact-map-section {
    padding: 0 !important; /* Forces the map fluid edge-to-edge frame look */
    width: 100%;
    display: block;
}

/* Base Section Background Colors */
.section-bg-white { background-color: var(--color-white); }
.section-bg-grey  { background-color: #f8fafc; }

/* Grid Flex Alignments */
.split-contact-container {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between;
    gap: 60px;
}

.contact-details-side {
    flex: 10;
}

.contact-form-side {
    flex: 13;
}

/* Header Text Rule Structures */
.contact-pre-title {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.contact-main-title {
    color: var(--color-dark-blue) !important;
    font-size: 2.85rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
}

/* Updated to allow left alignment on desktop */
.contact-lead-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #475569;
    max-width: 750px;
    margin: 0 !important; 
    text-align: left;
}

/* ==========================================================================
   CONTACT RESPONSIVE INTERCEPT MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .contact-hero-section { 
        padding: 65px 0 35px 0; 
    }
    
    .contact-body-section { 
        padding: 65px 0; 
    }
    
    .contact-main-title { 
        font-size: 2.25rem; 
    }

    /* Stacks Hero columns into rows */
    .split-hero-container {
        flex-direction: column !important;
        text-align: center !important;
        gap: 30px;
    }
    
    .hero-text-side, 
    .hero-image-side {
        width: 100%;
        text-align: center;
    }

    /* Puts branding image on top of text on mobile views */
    .hero-image-side {
        order: -1;
        justify-content: center;
    }

    /* Re-centers header text blocks for clean mobile layout visibility */
    .contact-lead-paragraph {
        text-align: center;
        margin: 0 auto !important;
    }
    
    /* Stacks Contact Details and Intake Form elements */
    .split-contact-container {
        flex-direction: column !important;
        gap: 40px;
    }
    
    .contact-details-side, 
    .contact-form-side {
        width: 100%;
        max-width: 100%;
    }
    
    .contact-side-heading { 
        text-align: center; 
    }
    
    .contact-side-text { 
        text-align: center; 
        max-width: 600px; 
        margin-left: auto; 
        margin-right: auto; 
    }
}

@media screen and (max-width: 480px) {
    .modern-form-card { padding: 30px 20px; }
    .info-box-item { padding: 20px 15px; }
    .contact-hero-fluid-img { max-width: 100%; }
}
/* Left Content Channel Cards Design rules */
.contact-side-heading {
    color: var(--color-white) !important;
    font-size: 2rem;
    font-weight: 700;
    margin-bottom: 15px;
}

.contact-side-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color:  var(--color-white) !important;
    margin-bottom: 40px;
}

.info-card-rows {
    display: flex;
    flex-direction: column;
    gap: 25px;
}

.info-box-item {
    display: flex;
    gap: 20px;
    background-color: var(--color-white);
    padding: 25px;
    border-radius: 8px;
    border: 1px solid #e2e8f0;
}

.info-box-icon {
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
    background-color: #f1f5f9;
    color: var(--color-dark-blue) !important; /* Dark blue icon base tone */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    flex-shrink: 0;
}

.info-box-content h3 {
    color: var(--color-dark-blue) !important;
    font-size: 1.15rem;
    font-weight: 700;
    margin-bottom: 6px;
}

.info-box-content p {
    margin: 0 0 4px 0;
    font-size: 1.05rem;
    font-weight: 600;
}

.info-box-content p a {
    color: var(--color-dark-blue) !important;
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.info-box-content p a:hover {
    color: var(--color-light-blue) !important;
}

.info-box-content span {
    font-size: 0.85rem;
    color: #64748b;
}

/* Right Content: Modern Light Blue Floating Input Form Engine Card */
.modern-form-card {
    background-color: var(--color-white) !important; /* Light blue card box backdrop */
    padding: 45px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(18, 18, 68, 0.12);
    color: var(--color-white);
}

.modern-form-card h3 {
    color: var(--color-text) !important;
    font-size: 1.6rem;
    font-weight: 700;
    margin-bottom: 8px;
}

.modern-form-card p {
    color: var(--color-text) !important;
    font-size: 0.95rem;
    line-height: 1.5;
    margin-bottom: 35px;
}

/* Interactive Floating Text Input Group Layout Blocks */
.modern-form-group {
    position: relative;
    margin-bottom: 30px;
    display: flex;
    align-items: center;
}

.modern-form-group.textarea-group {
    align-items: flex-start;
}

.input-vector-icon {
    position: absolute;
    left: 0;
    bottom: 12px;
    font-size: 1.1rem;
    color: rgba(255, 255, 255, 0.6);
    user-select: none;
    transition: var(--transition-smooth);
}

.textarea-group .input-vector-icon {
    top: 10px;
    bottom: auto;
}

/* Fields Styles */
.modern-form-group input, 
.modern-form-group textarea {
    width: 100%;
    padding: 10px 10px 10px 30px; /* Space on left to make room for icon element */
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--color-text) !important; /* Muted base baseline edge */
    color: var(--color-text) !important;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none !important;
    transition: var(--transition-smooth);
}

/* Floating Label Animation Engines */
.modern-form-group label {
    position: absolute;
    left: 30px;
    bottom: 12px;
    color: var(--color-text);
    font-size: 1rem;
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}

.textarea-group label {
    top: 10px;
    bottom: auto;
}

/* CSS Focus Triggers: Moves label seamlessly upwards when typing or active */
.modern-form-group input:focus ~ label,
.modern-form-group input:not(:placeholder-shown) ~ label,
.modern-form-group textarea:focus ~ label,
.modern-form-group textarea:not(:placeholder-shown) ~ label {
    top: -18px;
    bottom: auto;
    left: 0px;
    font-size: 0.8rem;
    color: var(--color-text);
    font-weight: 600;
}

/* Animated bottom highlight bar asset */
.modern-form-group .focus-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--color-white); /* Stark white expansion underline */
    transition: width 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.modern-form-group input:focus ~ .focus-bar,
.modern-form-group textarea:focus ~ .focus-bar {
    width: 100%;
}

/* Shifts input vectors active color on click focus triggers */
.modern-form-group input:focus ~ .input-vector-icon,
.modern-form-group textarea:focus ~ .input-vector-icon {
    color: var(--color-white);
}

/* Button Submit Layout Specs */
.btn-modern-submit {
    width: 100%;
    background-color: var(--color-dark-blue); /* Dark Blue submission block background */
    color: var(--color-white);
    border: none;
    padding: 15px;
    font-size: 1.05rem;
    font-weight: 700;
    border-radius: 6px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 10px rgba(18, 18, 68, 0.15);
}

.btn-modern-submit:hover {
    background-color: var(--color-white);
    color: var(--color-dark-blue) !important; /* Flips color on hover interaction */
    transform: translateY(-2px);
}

/* Form System Alert Modules */
.form-alert {
    padding: 12px 15px;
    border-radius: 6px;
    margin-bottom: 25px;
    font-size: 0.95rem;
    font-weight: 600;
}

.success-box { background-color: #dcfce7; color: #166534; }
.error-box { background-color: #fee2e2; color: #991b1b; }

/* Fluid Map Frame Boundaries */
.map-fluid-viewport {
    width: 100%;
    line-height: 0;
    display: block;
}

.map-fluid-viewport iframe {
    display: block;
    width: 100%;
}

/* ==========================================================================
   12. CONTACT RESPONSIVE INTERCEPT MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .contact-hero-section { padding: 65px 0 35px 0; }
    .contact-body-section { padding: 65px 0; }
    .contact-main-title { font-size: 2.25rem; }
    
    .split-contact-container {
        flex-direction: column !important; /* Flatten grid segments into vertical stacks */
        gap: 40px;
    }
    
    .contact-details-side, .contact-form-side {
        width: 100%;
        max-width: 100%;
    }
    
    .contact-side-heading { text-align: center; }
    .contact-side-text { text-align: center; max-width: 600px; margin-left: auto; margin-right: auto; }
}

@media screen and (max-width: 480px) {
    .modern-form-card { padding: 30px 20px; }
    .info-box-item { padding: 20px 15px; }
}

/* ==========================================================================
   13. CUSTOM INSIGHTS & BLOG ARCHIVE PLANNERS
   ========================================================================== */
.blog-archive-wrapper, .blog-detail-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.blog-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.narrow-article-frame {
    max-width: 800px;
    margin: 0 auto;
}

/* Section Background Layout Definitions */
.blog-archive-wrapper section, 
.blog-detail-wrapper section {
    padding: 90px 0;
    box-sizing: border-box;
}

.post-detail-header {
    padding: 80px 0 60px 0;
}

/* Split Blog Hero Section Layout */
.split-blog-hero {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    justify-content: space-between;
    gap: 50px;
}

.blog-hero-text {
    flex: 12;
    text-align: left;
}

.blog-hero-graphic {
    flex: 10;
    display: flex;
    justify-content: flex-end;
}

.blog-hero-fluid-img {
    width: 100%;
    max-width: 480px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(18, 18, 68, 0.08);
}

/* Headings Typography Layout Profiles */
.blog-pre-title {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.blog-main-title {
    color: var(--color-dark-blue) !important;
    font-size: 2.85rem;
    font-weight: 700;
    line-height: 1.2;
    margin-bottom: 20px;
}

.blog-lead-paragraph {
    font-size: 1.2rem;
    line-height: 1.6;
    color: #475569;
}

/* Multi-Column Listing Grid Architecture */
.blog-cards-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 2 Columns by Default on Desktop layouts */
    gap: 40px;
}

.blog-post-card {
    background-color: var(--color-white);
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e2e8f0;
    box-shadow: 0 4px 15px rgba(18, 18, 68, 0.02);
    transition: var(--transition-smooth);
}

.blog-post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(18, 18, 68, 0.08);
}

.card-image-wrap {
    position: relative;
    width: 100%;
    height: 240px;
    overflow: hidden;
    background-color: #f1f5f9;
}

.blog-grid-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Category Badge Highlighters inside cards */
.blog-category-badge {
    position: absolute;
    top: 15px;
    left: 15px;
    background-color: var(--color-light-blue); /* Light Blue Category Pill */
    color: var(--color-white);
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 4px;
    letter-spacing: 0.5px;
    z-index: 2;
}

.card-content-wrap {
    padding: 30px;
}

.post-meta-strip {
    font-size: 0.85rem;
    color: #64748b;
    margin-bottom: 12px;
}

.card-content-wrap h3 {
    color: var(--color-dark-blue) !important; /* Dark Blue Article Links */
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.3;
    margin-bottom: 12px;
}

.card-content-wrap p {
    color: #475569;
    font-size: 0.98rem;
    line-height: 1.55;
    margin-bottom: 20px;
}

.blog-read-more-link {
    display: inline-block;
    color: var(--color-light-blue) !important; /* Light blue textual action triggers */
    font-weight: 700;
    text-decoration: none !important;
    font-size: 0.95rem;
    transition: var(--transition-smooth);
}

.blog-read-more-link:hover {
    color: var(--color-dark-blue) !important;
    transform: translateX(4px);
}

.no-posts-found {
    grid-column: 1 / -1;
    padding: 40px;
    color: #64748b;
    font-size: 1.1rem;
}

/* ==========================================================================
   14. SINGLE INDIVIDUAL POST VIEW STYLING
   ========================================================================== */
.detail-category-tag {
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.95rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: 10px;
}

.single-post-title {
    color: var(--color-dark-blue) !important; /* Dark blue post main headers */
    font-size: 2.5rem;
    font-weight: 700;
    line-height: 1.25;
    margin-bottom: 20px;
}

.single-meta-row {
    display: flex;
    gap: 25px;
    flex-wrap: wrap;
    font-size: 0.9rem;
    color: #475569;
    border-top: 1px solid #e2e8f0;
    padding-top: 15px;
}

.post-featured-graphic-frame {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    margin-bottom: 40px;
    box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.post-main-img {
    width: 100%;
    height: auto;
    max-height: 450px;
    object-fit: cover;
    display: block;
}

/* Deep Dive Rich Text Sub-Engine Layout Parameters */
.post-body-rich-text {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #334155;
}

.post-body-rich-text h2, .post-body-rich-text h3 {
    color: var(--color-dark-blue) !important; 
    font-weight: 700;
    margin: 40px 0 20px 0;
}

.post-body-rich-text h2 { font-size: 1.65rem; }
.post-body-rich-text h3 { font-size: 1.4rem; }

.post-body-rich-text p {
    margin-bottom: 25px;
}

/* Blockquotes configurations inside articles */
.post-body-rich-text blockquote {
    margin: 35px 0;
    padding: 20px 30px;
    border-left: 4px solid var(--color-light-blue); /* Light Blue Blockquote Border Accent */
    background-color: #f8fafc;
    font-style: italic;
    color: #1e293b;
    border-radius: 0 8px 8px 0;
}

.post-body-rich-text ul, .post-body-rich-text ol {
    margin: 0 0 30px 25px !important;
}

.post-body-rich-text li {
    margin-bottom: 10px;
}

/* Article Conversion Footer Sign-off Callouts */
.article-sign-off-block {
    background-color: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 40px;
    margin-top: 60px;
    text-align: center;
}

.article-sign-off-block h3 {
    color: var(--color-dark-blue) !important;
    font-size: 1.35rem;
    font-weight: 700;
    margin-bottom: 10px;
}

.article-sign-off-block p {
    color: #475569;
    font-size: 1rem;
    margin-bottom: 25px;
}

.blog-cta-btn-dark {
    display: inline-block;
    background-color: var(--color-dark-blue); /* Dark Blue Action Button */
    color: var(--color-white) !important;
    padding: 14px 30px;
    border-radius: 6px;
    font-weight: 600;
    text-decoration: none !important;
    transition: var(--transition-smooth);
}

.blog-cta-btn-dark:hover {
    background-color: var(--color-light-blue);
    transform: translateY(-2px);
}

/* ==========================================================================
   15. BLOG GRID RESPONSIVE INTERCEPT MEDIA QUERIES
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .blog-archive-wrapper section, 
    .blog-detail-wrapper section { padding: 65px 0; }
    
    .split-blog-hero {
        flex-direction: column !important; /* Collapses hero grid into row layout views */
        text-align: center;
        gap: 30px;
    }
    
    .blog-hero-text, .blog-hero-graphic { width: 100%; text-align: center; }
    .blog-hero-graphic { order: -1; justify-content: center; }
    
    .blog-cards-layout-grid {
        grid-template-columns: 1fr; /* Flattens matching post stream cards down to a single wide row track */
        gap: 30px;
    }
    
    .single-post-title { font-size: 2rem; }
}

@media screen and (max-width: 480px) {
    .card-content-wrap { padding: 20px; }
    .article-sign-off-block { padding: 30px 20px; }
}

/* ==========================================================================
   16. CUSTOM COMPREHENSIVE REFERRAL INTAKE ARCHITECTURE
   ========================================================================== */
.referral-page-wrapper {
    width: 100%;
    overflow-x: hidden;
}

.referral-max-width {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    box-sizing: border-box;
}

.form-narrow-frame {
    max-width: 1000px;
    margin: 0 auto;
}

.referral-hero-section {
    padding: 80px 0;
    background-color: var(--color-white);
}

.referral-form-section {
    padding: 90px 0;
}

/* Asymmetrical Hero Column Mechanics */
.referral-hero-section .split-hero-container {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between;
    gap: 50px;
}

.referral-hero-section .hero-text-side {
    flex: 12;
    text-align: left;
}

.referral-hero-section .hero-image-side {
    flex: 10;
    display: flex;
    justify-content: flex-end;
}

.referral-pre-title {
    display: inline-block;
    color: var(--color-light-blue);
    font-weight: 700;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1.5px;
    margin-bottom: 12px;
}

.referral-main-title {
    color: var(--color-dark-blue) !important;
    font-size: 2.85rem;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: 20px;
}

.referral-lead-paragraph {
    font-size: 1.15rem;
    line-height: 1.6;
    color: #475569;
    margin: 0;
    text-align: left;
}

.referral-hero-fluid-img {
    width: 100%;
    max-width: 460px;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(18, 18, 68, 0.08);
}

/* Form Top Banner Header Row Grouping */
.form-header-banner {
    background: var(--color-dark-blue);
    padding: 16px;
    border-radius: 30px;
    text-align: center;
    margin-bottom: 45px;
    box-shadow: 0 4px 15px rgba(18, 163, 203, 0.2);
}

.form-header-banner h2 {
    color: var(--color-white) !important;
    font-size: 1.2rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin: 0;
}

/* Master Form Card Element Configuration (Light Blue Canvas, White Text) */
.referral-modern-light-blue-card {
    background-color: var(--color-white) !important; /* Forces your light blue background */
    padding: 50px 45px;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(18, 18, 68, 0.12);
    color: var(--color-text) !important;
}

/* Steps Block Segmentation Boundaries */
.form-step-segment {
    margin-bottom: 45px;
    padding-bottom: 35px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
}

.form-step-segment:last-of-type {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Wireframe Segment Section Heading Accents */
.segment-title-header {
    color: var(--color-text) !important;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin: 0 0 30px 0;
    text-transform: uppercase;
    position: relative;
    padding-bottom: 8px;
}

.segment-title-header::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    background-color: rgba(255, 255, 255, 0.4); /* Matches blue divider wireframe lines */
}

/* Adaptive Layout Field Matrix Rows */
.input-grid-row {
    display: flex;
    gap: 25px;
    margin-bottom: 22px;
    width: 100%;
}

.input-grid-row.dual-cols .modern-input-group { flex: 1; min-width: 0; }
.input-grid-row.triple-cols .modern-input-group { flex: 1; min-width: 0; }

.modern-input-group {
    margin-bottom: 22px;
}

.modern-input-group.full-width-row {
    width: 100%;
    display: block;
}

.modern-input-group label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--color-text) !important; /* White labels */
    margin-bottom: 8px;
}

/* Modern Minimalist Input Fields with Vector Icons */
.input-with-icon, .textarea-with-icon {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
}

.input-with-icon span, .textarea-with-icon span {
    position: absolute;
    left: 15px;
    font-size: 1.1rem;
    color: #94a3b8;
    user-select: none;
    pointer-events: none;
}

.textarea-with-icon span {
    top: 14px;
}

.modern-input-group input[type="text"],
.modern-input-group input[type="email"],
.modern-input-group input[type="tel"],
.modern-input-group input[type="date"],
.modern-input-group textarea {
    width: 100%;
    padding: 12px 16px 12px 42px; /* Leaves space on left for input alignment vector icon tags */
    background-color: rgba(255, 255, 255, 0.12) !important; /* Soft transparent white frame layers */
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px;
    color: var(--color-text) !important;
    font-size: 1rem;
    font-family: inherit;
    box-sizing: border-box;
    outline: none;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
}

.modern-input-group textarea {
    resize: vertical;
    padding-top: 12px;
}

/* Input Focus Glows States */
.modern-input-group input:focus,
.modern-input-group textarea:focus {
    background-color: rgba(255, 255, 255, 0.2) !important;
    border-color: var(--color-dark-blue) !important;
    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.15);
}

/* Custom Accessible Radio Options Mechanics */
.modern-radio-row-wrapper {
    display: flex;
    gap: 30px;
    align-items: center;
    padding: 10px 0;
}

.modern-radio-row-wrapper.wrap-flexible {
    flex-wrap: wrap;
    gap: 20px 30px;
}

.custom-radio-container {
    position: relative;
    padding-left: 28px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    color: var(--color-text);
    user-select: none;
    display: inline-flex;
    align-items: center;
}

.custom-radio-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-checkmark {
    position: absolute;
    left: 0;
    height: 18px;
    width: 18px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid #cbd5e1;
    border-radius: 50%;
    transition: all 0.2s;
}

.custom-radio-container:hover input ~ .radio-checkmark {
    background-color: rgba(255, 255, 255, 0.3);
}

.custom-radio-container input:checked ~ .radio-checkmark {
    background-color: var(--color-white);
    border-color: 1 px solid var(--color-white);
}

/* Inner dot element inside active radio choices */
.radio-checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 4px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    border-color:1px solid var(--color-light-blue);
    background: var(--color-light-blue); /* Contrasts against the outer active circle */
}

.custom-radio-container input:checked ~ .radio-checkmark::after {
    display: block;background-color: var(--color-light-blue); /* Fills inner circle with your brand light blue */
    border-color: var(--color-light-blue);
}

/* Multi-Column Risk Matrix Block Definition Layouts */
.risk-matrix-layout-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 25px 40px;
    
    padding: 30px;
    border-radius: 8px;
    margin-top: 25px;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.risk-cell-box label {
    display: block;
    font-weight: 600;
    font-size: 0.95rem;
    margin-bottom: 5px;
    color: var(--color-text);
}

/* Modern File Upload Input Elements Field Styles */
.referral-file-upload-block {
    background-color: rgba(255, 255, 255, 0.08);
    padding: 25px;
    border-radius: 6px;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    margin-bottom: 30px;
}

.referral-file-upload-block .upload-title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 4px;
}

.referral-file-upload-block .upload-subtitle {
    display: block;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 15px;
}

.file-trigger-row {
    display: flex;
    align-items: center;
    gap: 15px;
}

.custom-file-btn {
    background-color: var(--color-dark-blue);
    color: var(--color-white) !important;
    padding: 10px 22px;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    display: inline-block;
    transition: background 0.2s;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

.custom-file-btn:hover {
    background-color: var(--color-light-blue);
    color: var(--color-dark-blue) !important;
}

.file-trigger-row input[type="file"] {
    display: none !important; /* Safely overlays the ugly input structure with the button template */
}

.file-status-text {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.8);
}

/* Legal Compliance Box Layout elements */
.referral-compliance-checkbox {
    margin-bottom: 35px;
}

.checkbox-flex-container {
    position: relative;
    padding-left: 30px;
    cursor: pointer;
    display: block;
    user-select: none;
}

.checkbox-flex-container input {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.checkbox-checkmark {
    position: absolute;
    left: 0;
    top: 2px;
    height: 18px;
    width: 18px;
    background-color: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.6);
    border-radius: 4px;
    transition: all 0.2s;
}

.checkbox-flex-container:hover input ~ .checkbox-checkmark {
    background-color: rgba(255, 255, 255, 0.3);
}

.checkbox-flex-container input:checked ~ .checkbox-checkmark {
    background-color: var(--color-white);
    border-color: var(--color-white);
}

.checkbox-checkmark::after {
    content: "✓";
    position: absolute;
    display: none;
    left: 3px;
    top: -2px;
    color: var(--color-light-blue);
    font-weight: 800;
    font-size: 0.85rem;
}

.checkbox-flex-container input:checked ~ .checkbox-checkmark::after {
    display: block;
}

.checkbox-label-text {
    font-size: 0.95rem;
    font-weight: 500;
    line-height: 1.4;
}

.req-star {
    color: #fca5a5;
    font-weight: 700;
}

/* Action Execution Row Area Formats */
.referral-submit-row {
    text-align: left;
}

.btn-referral-submit-action {
    background-color: var(--color-dark-blue); /* Solid action button choice */
    color: var(--color-white);
    border: none;
    padding: 12px 50px;
    font-size: 1rem;
    font-weight: 700;
    border-radius: 4px;
    cursor: pointer;
    transition: var(--transition-smooth);
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}

.btn-referral-submit-action:hover {
    background-color: var(--color-light-blue); /* Inverts colors cleanly on user interaction triggers */
    color: var(--color-dark-blue);
    transform: translateY(-2px);
}

/* Form Alert Status Feedback Containers */
.referral-alert {
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 30px;
    font-weight: 600;
}

.alert-success-box { background-color: #dcfce7; color: #166534; border: 1px solid #bbf7d0; }
.alert-error-box   { background-color: #fee2e2; color: #991b1b; border: 1px solid #fecaca; }

/* ==========================================================================
   17. COMPREHENSIVE INTAKE RESPONSIVE MATRIX MEDIA INTERCEPTS
   ========================================================================== */
@media screen and (max-width: 1024px) {
    .referral-hero-section { padding: 60px 0 30px 0; }
    .referral-form-section { padding: 60px 0; }
    .referral-main-title { font-size: 2.25rem; }
    
    .referral-hero-section .split-hero-container {
        flex-direction: column !important; /* Stack columns flat vertically on tablet metrics */
        text-align: center !important;
        gap: 30px;
    }

    .referral-hero-section .hero-text-side,
    .referral-hero-section .hero-image-side {
        width: 100%;
        text-align: center;
    }

    .referral-hero-section .hero-image-side {
        order: -1; /* Floats image asset container element over text string blocks */
        justify-content: center;
    }

    .referral-lead-paragraph {
        text-align: center;
    }
}

@media screen and (max-width: 768px) {
    .referral-modern-light-blue-card { padding: 35px 20px; }
    .input-grid-row { flex-direction: column; gap: 0; } /* Collapses inline grid grids to flat blocks */
    .risk-matrix-layout-grid { grid-template-columns: 1fr; padding: 20px; } /* Risk matrix adapts to single stream rows */
    .modern-radio-row-wrapper { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* Custom Placeholder Color Adjustments for Referral Form Fields */
.referral-modern-light-blue-card input::placeholder,
.referral-modern-light-blue-card textarea::placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important; /* Overrides Firefox default opacity override mechanics */
}

/* Fallback support for older rendering engines */
.referral-modern-light-blue-card input::-webkit-input-placeholder,
.referral-modern-light-blue-card textarea::-webkit-input-placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}

.referral-modern-light-blue-card input::-moz-placeholder,
.referral-modern-light-blue-card textarea::-moz-placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
    opacity: 1 !important;
}

.referral-modern-light-blue-card input:-ms-input-placeholder,
.referral-modern-light-blue-card textarea:-ms-input-placeholder {
    color: rgba(255, 255, 255, 0.65) !important;
}