:root {
    --brand-charcoal: #1C1F26;
    --brand-gray: #777;
    --brand-blue: #1556a9;
	--brand-navy: #0B1F3A;
	--brand-navy-hover: #08162a;
    --brand-off-white: #E6E8EB;
	
	 /* Brand typography */
    --brand-font: "Montserrat", sans-serif;

    /* Pico typography */
    --pico-font-family: var(--brand-font);
    --pico-font-family-sans-serif: var(--brand-font);
	--pico-font-size: 100%;
	--pico-font-weight: 400;
}

@media (min-width: 576px) {
    :root {
        --pico-font-size: 100%;
    }
}

/* Override Pico's light theme */
:root[data-theme="light"] {
    --pico-background-color: #FFFFFF;
    --pico-color: var(--brand-charcoal);

    --pico-primary: var(--brand-charcoal);
    --pico-primary-background: var(--brand-navy);
    --pico-primary-border: var(--brand-navy);
    --pico-primary-underline: none;

    --pico-primary-hover: var(--brand-slate);
    --pico-primary-hover-background: var(--brand-navy);
    --pico-primary-hover-border: var(--brand-navy-hover);
    --pico-primary-hover-underline: none;

    --pico-primary-focus: rgba(28, 31, 38, 0.25);
    --pico-primary-inverse: #FFFFFF;

    --pico-muted-color: var(--brand-slate);
	
	
	/* Secondary */
	--pico-secondary: var(--brand-off-white);
	--pico-secondary-background: var(--brand-off-white);
	--pico-secondary-border: var(--brand-off-white);
	--pico-secondary-hover: #FFFFFF;
	--pico-secondary-hover-background: var(--brand-off-white);
	--pico-secondary-hover-border: var(--brand-gray);
	--pico-secondary-focus: rgba(11, 31, 58, 0.25);
	--pico-secondary-inverse: var(--brand-navy);
}

/* ========================================
   Inverse Section
   ======================================== */

.inverse-section {
    --pico-background-color: var(--brand-navy);
    --pico-color: #FFFFFF;
    --pico-muted-color: rgba(255, 255, 255, 0.65);

    --pico-primary: #FFFFFF;
    --pico-primary-background: #FFFFFF;
    --pico-primary-border: #FFFFFF;
    --pico-primary-inverse: var(--brand-navy);

    --pico-secondary: #FFFFFF;
    --pico-secondary-background: transparent;
    --pico-secondary-border: #FFFFFF;
    --pico-secondary-inverse: var(--brand-navy);

    --pico-h1-color: #FFFFFF;
    --pico-h2-color: #FFFFFF;
    --pico-h3-color: #FFFFFF;
    --pico-h4-color: #FFFFFF;
    --pico-h5-color: #FFFFFF;
    --pico-h6-color: #FFFFFF;

    background-color: var(--brand-navy);
    color: #FFFFFF;

    padding-top: 5rem;
    padding-bottom: 5rem;
}

/*Remove white space margin between sections*/

section {
    margin-bottom: 0;
}

body > main {
    padding-block: 0;
}

/* ========================================
   Compliance Section
   ======================================== */

.compliance-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4rem;

    max-width: 1240px;
    margin: 0 auto 3.5rem;
}

.compliance-intro h2 {
    margin: 0;

    color: #FFFFFF;

    font-size: clamp(2.5rem, 4vw, 3.5rem);
    line-height: 1.05;

    --pico-font-weight: 500;
}

.compliance-intro p {
    align-self: center;

    max-width: 520px;
    margin: 0;

    color: rgba(255, 255, 255, 0.9);

    font-size: 1.1rem;
    line-height: 1.4;
}


/* Cards */

.compliance-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;

    max-width: 1240px;
    margin: 0 auto;
}

.compliance-card {
    display: flex;
    flex-direction: column;

    min-height: 375px;
    margin: 0;
    padding: 2.5rem;

    background: transparent;
    border: 2px solid #FFFFFF;
    border-radius: 1.25rem;
    box-shadow: none;
}

.compliance-card .card-icon {
    height: 75px;
    margin-bottom: 1.5rem;
}

.compliance-card h3 {
    margin-bottom: 1rem;

    color: #FFFFFF;

    font-size: 1.25rem;
    --pico-font-weight: 500;
}

.compliance-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    line-height: 1.4;
}

.compliance-card > a {
    margin-top: auto;

    color: #FFFFFF;
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 767px) {

    .inverse-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .compliance-intro {
        grid-template-columns: 1fr;
        gap: 1.5rem;

        margin-bottom: 2.5rem;
    }

    .compliance-intro h2 {
        font-size: 2.5rem;
    }

    .compliance-cards {
        grid-template-columns: 1fr;
    }

    .compliance-card {
        min-height: 340px;
        padding: 2rem;
    }
}

/* Remove underline from navigation links*/
a,
a:hover,
a:focus,
a:active,
button,
button:hover,
button:focus,
[role="button"],
[role="button"]:hover,
[role="button"]:focus {
    transform: none;
    translate: none;
}

.site-nav {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    width: 100%;
	position: relative;
}   

/* Logo */
.site-nav .nav-logo {
    justify-self: start;
    margin: 0;
}

.site-nav .nav-logo img {
    display: block;
    width: 130px;
    height: auto;
}

/* Center navigation */
.site-nav .nav-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.5rem;
    margin: 0;
    padding: 0;
}

/* Right CTA */
.site-nav .nav-cta {
    justify-self: end;
    margin: 0;
}

.site-nav .nav-cta a {
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* Nav follow on scroll */

.site-header {
    position: sticky;
    top: 0;
    z-index: 1000;
    background: #FFFFFF;
}

/* ========================================
   Mobile Navigation
   ======================================== */

.nav-mobile-toggle,
.mobile-menu {
    display: none;
}


@media (max-width: 767px) {

    /* ----------------------------------------
       Mobile navigation grid
       ---------------------------------------- */

    .site-nav {
        grid-template-columns: 1fr auto;
        grid-template-rows: auto auto;
    }


    /* ----------------------------------------
       Hide desktop navigation
       ---------------------------------------- */

    .site-nav .nav-links,
    .site-nav .nav-cta {
        display: none;
    }


    /* ----------------------------------------
       Logo
       ---------------------------------------- */

    .site-nav .nav-logo {
        grid-column: 1;
        grid-row: 1;

        justify-self: start;

        margin: 0;
        padding: 0;
    }


    /* ----------------------------------------
       Hamburger container
       ---------------------------------------- */

    .nav-mobile-toggle {
        display: flex;

        grid-column: 2;
        grid-row: 1;

        align-items: center;
        justify-content: flex-end;

        margin: 0;
        padding: 0;
    }


    /* ----------------------------------------
       Hamburger button
       ---------------------------------------- */

    #mobile-menu-button {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        width: 2.5rem;
        height: 2.5rem;

        margin: 0;
        padding: 0;

        background: transparent;
        border: 0;
        box-shadow: none;

        cursor: pointer;
    }


    /* Hamburger lines */

    #mobile-menu-button span {
        display: block;

        width: 1.5rem;
        height: 2px;

        margin: 3px 0;

        background: var(--brand-navy);

        transition:
            transform 0.2s ease,
            opacity 0.2s ease;
    }


    /* ----------------------------------------
       Hamburger → X
       ---------------------------------------- */

    .site-nav.menu-open #mobile-menu-button span:nth-child(1) {
        transform: translateY(8px) rotate(45deg);
    }

    .site-nav.menu-open #mobile-menu-button span:nth-child(2) {
        opacity: 0;
    }

    .site-nav.menu-open #mobile-menu-button span:nth-child(3) {
        transform: translateY(-8px) rotate(-45deg);
    }


    /* ----------------------------------------
       Mobile menu
       ---------------------------------------- */

    .mobile-menu {
        grid-column: 1 / -1;
        grid-row: 2;

        width: 100%;

        margin: 0;
        padding: 0.5rem 0 1rem;

        background: #FFFFFF;

        border-top: 1px solid var(--brand-off-white);

        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    }


    /* Only display when JavaScript
       adds .menu-open */

    .site-nav.menu-open .mobile-menu {
        display: block;
    }


    /* ----------------------------------------
       Mobile menu list
       ---------------------------------------- */

    .mobile-menu ul {
        display: flex;
        flex-direction: column;

        width: 100%;

        margin: 0;
        padding: 0;

        list-style: none;
    }


    .mobile-menu li {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0;
    }


    .mobile-menu a {
        display: block;

        width: 100%;

        margin: 0;
        padding: 0.75rem 1rem;

    }


    /* ----------------------------------------
       Contact button
       ---------------------------------------- */

    .mobile-menu li:last-child {
        padding: 0.75rem 1rem 0;
    }


    .mobile-menu li:last-child a {
        text-align: center;
    }
}

/* ========================================
   Hero
   ======================================== */

.hero {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    min-height: 620px;

    text-align: center;

    background-color: var(--brand-navy);
	--pico-color: #fff;

}

.hero-content {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 5rem 1rem;
	position: relative;
    z-index: 1;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;

    background:
        radial-gradient(
            circle at 50% 50%,
            rgba(31, 111, 255, 0.16),
            transparent 60%
        ),
        radial-gradient(
            circle at 15% 20%,
            rgba(255, 255, 255, 0.05),
            transparent 35%
        ),
        radial-gradient(
            circle at 85% 80%,
            rgba(31, 111, 255, 0.06),
            transparent 40%
        );
}
.hero h1 {
    margin-bottom: 1.25rem;



    font-size: clamp(3rem, 7vw, 4.5rem);
    line-height: 1.05;
    letter-spacing: -0.02em;
    --pico-color: #fff;
    --pico-font-weight: 400;
}

.hero p {
    max-width: 800px;
    margin: 0 auto 2.5rem;
    --pico-color: #fff;
    font-size: 1.15rem;
    line-height: 1.45;
}

.hero-actions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.hero-actions a {
    min-width: 217px;
    margin: 0;
}

.hero-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;

    background: rgba(11, 31, 58, 0.08);

    border: 0;
}



.hero-demo:hover,
.hero-demo:focus {
    background: rgba(11, 31, 58, 0.14);

}

.demo-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 1rem;
    height: 1rem;

    font-size: 0.55rem;
    line-height: 1;
}


/* ========================================
   Hero - Mobile
   ======================================== */

@media (max-width: 767px) {

    .hero {
        min-height: 500px;
    }

    .hero-content {
        padding: 3rem 1rem;
    }

    .hero h1 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

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

    .hero-actions {
        flex-direction: column;
        width: 100%;
        gap: 0.75rem;
    }

    .hero-actions a {
        width: 100%;
        max-width: 320px;
    }
}

/* ========================================
   General Section Styles
   ======================================== */

.eyebrow {
    display: block;
    margin-bottom: 1rem;
    color: var(--brand-blue);
    font-size: 0.75rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.section-heading {
    max-width: 760px;
    margin-bottom: 4rem;
}

.section-heading.centered {
    margin-right: auto;
    margin-left: auto;
    text-align: center;
}

.section-heading h2 {
    margin-bottom: 1.25rem;
    color: var(--brand-navy);
    line-height: 1.1;
    --pico-font-weight: 500;
}

.section-heading p {
    margin-bottom: 0;
    color: var(--brand-slate);
    font-size: 1.05rem;
    line-height: 1.6;
}


/* ========================================
   Compliance Roadmap
   ======================================== */

.compliance-roadmap {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: #FFFFFF;
}

.roadmap {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.roadmap-step {
    flex: 1;
    padding: 0 1rem;
}

.roadmap-step:first-child {
    padding-left: 0;
}

.roadmap-step:last-child {
    padding-right: 0;
}

.roadmap-number {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    margin-bottom: 1.5rem;
    border: 1px solid var(--brand-navy);
    border-radius: 50%;
    color: var(--brand-navy);
    font-size: 0.75rem;
}

.roadmap-step h3 {
    margin-bottom: 0.75rem;
    color: var(--brand-navy);
    --pico-font-weight: 500;
}

.roadmap-step p {
    margin: 0;
    color: var(--brand-slate);
    font-size: 0.9rem;
    line-height: 1.55;
}

.roadmap-connector {
    flex: 0 0 3rem;
    height: 1px;
    margin-top: 1.5rem;
    background: rgba(11, 31, 58, 0.25);
}

.roadmap-step-maintain {
    position: relative;
}

.roadmap-step-maintain .roadmap-number {
    background: var(--brand-navy);
    color: #FFFFFF;
}

.roadmap-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid rgba(11, 31, 58, 0.12);
    text-align: center;
}

.roadmap-footer strong {
    color: var(--brand-navy);
}

.roadmap-footer span {
    color: var(--brand-slate);
}


/* ========================================
   Compliance Drift
   ======================================== */

.drift-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: var(--brand-off-white);
}

.drift-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
    margin-bottom: 5rem;
}

.drift-heading h2 {
    max-width: 600px;
    margin: 0;
    color: var(--brand-navy);
    font-size: clamp(2.25rem, 4vw, 3.5rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.drift-content {
    max-width: 650px;
}

.drift-content p {
    color: var(--brand-slate);
    line-height: 1.65;
}

.drift-content .lead {
    color: var(--brand-navy);
    font-size: 1.2rem;
    line-height: 1.5;
}

.drift-items {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.drift-items article {
    padding: 2rem;
    background: #FFFFFF;
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: 0.75rem;
}

.drift-icon {
    display: block;
    margin-bottom: 2rem;
    color: var(--brand-blue);
    font-size: 0.75rem;
}

.drift-items h3 {
    margin-bottom: 0.75rem;
    color: var(--brand-navy);
    --pico-font-weight: 500;
}

.drift-items p {
    margin: 0;
    color: var(--brand-slate);
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ========================================
   Inverse Compliance Services
   ======================================== */

.inverse-section {
    --pico-background-color: var(--brand-navy);
    --pico-color: #FFFFFF;
    --pico-muted-color: rgba(255, 255, 255, 0.65);

    --pico-primary: #FFFFFF;
    --pico-primary-background: #FFFFFF;
    --pico-primary-border: #FFFFFF;
    --pico-primary-inverse: var(--brand-navy);

    --pico-secondary: #FFFFFF;
    --pico-secondary-background: transparent;
    --pico-secondary-border: #FFFFFF;
    --pico-secondary-inverse: var(--brand-navy);

    --pico-h1-color: #FFFFFF;
    --pico-h2-color: #FFFFFF;
    --pico-h3-color: #FFFFFF;
    --pico-h4-color: #FFFFFF;
    --pico-h5-color: #FFFFFF;
    --pico-h6-color: #FFFFFF;

    background: var(--brand-navy);
    color: #FFFFFF;
}

.compliance-services {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.compliance-intro {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: end;
    margin-bottom: 4rem;
}

.compliance-intro h2 {
    margin: 0;
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.compliance-intro p {
    max-width: 600px;
    margin: 0;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.05rem;
    line-height: 1.6;
}

.compliance-services .eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

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

.compliance-card {
    display: flex;
    flex-direction: column;
    min-height: 350px;
    padding: 2rem;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 0.75rem;
}

.card-number {
    margin-bottom: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}

.compliance-card h3 {
    margin-top: 3rem;
    margin-bottom: 1rem;
    color: #FFFFFF;
    --pico-font-weight: 500;
}

.compliance-card p {
    margin-bottom: 2rem;
    color: rgba(255, 255, 255, 0.65);
    font-size: 0.9rem;
    line-height: 1.6;
}

.compliance-card a {
    margin-top: auto;
    color: #FFFFFF;
}


/* ========================================
   What We Manage
   ======================================== */

.manage-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: #FFFFFF;
}

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

.manage-card {
    padding: 2rem;
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: 0.75rem;
}

.manage-card h3 {
    margin-bottom: 1.5rem;
    color: var(--brand-navy);
    --pico-font-weight: 500;
}

.manage-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.manage-card li {
    padding: 0.7rem 0;
    border-top: 1px solid rgba(11, 31, 58, 0.08);
    color: var(--brand-slate);
    font-size: 0.9rem;
}


/* ========================================
   Difference
   ======================================== */

.difference-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: var(--brand-off-white);
}

.difference-table {
    max-width: 900px;
    margin: 0 auto;
    overflow: hidden;
    border: 1px solid rgba(11, 31, 58, 0.12);
    border-radius: 0.75rem;
    background: #FFFFFF;
}

.difference-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

.difference-row > div {
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(11, 31, 58, 0.08);
}

.difference-row > div:first-child {
    border-right: 1px solid rgba(11, 31, 58, 0.08);
    color: var(--brand-slate);
}

.difference-row > div:last-child {
    color: var(--brand-navy);
}

.difference-header {
    background: var(--brand-navy);
}

.difference-header > div {
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: #FFFFFF !important;
    font-weight: 500;
}

.difference-callout {
    max-width: 900px;
    margin: 3rem auto 0;
    text-align: center;
    color: var(--brand-navy);
}

.difference-callout strong {
    font-size: 1.15rem;
}


/* ========================================
   Outcomes
   ======================================== */

.outcomes-section {
    padding-top: 7rem;
    padding-bottom: 7rem;
    background: #FFFFFF;
}

.outcomes-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 7rem;
    align-items: start;
}

.outcomes-heading h2 {
    margin-bottom: 1.5rem;
    color: var(--brand-navy);
    font-size: clamp(2.5rem, 5vw, 4rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.outcomes-heading p {
    max-width: 500px;
    color: var(--brand-slate);
    line-height: 1.6;
}

.outcome {
    display: grid;
    grid-template-columns: 3rem 1fr;
    gap: 1.5rem;
    padding: 1.75rem 1.5rem;
    border-top: 1px solid rgba(11, 31, 58, 0.12);
}

.outcome > span {
    color: var(--brand-blue);
    font-size: 0.75rem;
}

.outcome h3 {
    margin-bottom: 0.5rem;
    color: var(--brand-navy);
    --pico-font-weight: 500;
}

.outcome p {
    margin: 0;
    color: var(--brand-slate);
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ========================================
   Process
   ======================================== */

.process-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: var(--brand-off-white);
}

.process-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.process-step {
    padding: 2rem;
    border-top: 2px solid var(--brand-navy);
    background: #FFFFFF;
}

.process-step > span {
    display: block;
    margin-bottom: 3rem;
    color: var(--brand-blue);
    font-size: 0.75rem;
}

.process-step h3 {
    margin-bottom: 1rem;
    color: var(--brand-navy);
    --pico-font-weight: 500;
}

.process-step p {
    margin: 0;
    color: var(--brand-slate);
    font-size: 0.9rem;
    line-height: 1.55;
}


/* ========================================
   FAQ
   ======================================== */

.faq-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: #FFFFFF;
}

.faq-grid {
    display: grid;
    grid-template-columns: 0.8fr 1.2fr;
    gap: 7rem;
    align-items: start;
}

.faq-heading h2 {
    margin-bottom: 1.5rem;
    color: var(--brand-navy);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.faq-heading p {
    color: var(--brand-slate);
    line-height: 1.6;
}

.faq-list details {
    margin: 0;
    padding: 1.25rem 0;
    border-bottom: 1px solid rgba(11, 31, 58, 0.12);
}

.faq-list summary {
    color: var(--brand-navy);
    font-weight: 500;
}

.faq-list details p {
    max-width: 700px;
    margin: 1rem 0 0;
    color: var(--brand-slate);
    font-size: 0.95rem;
    line-height: 1.6;
}


/* ========================================
   Final CTA
   ======================================== */

.final-cta {
    padding-top: 7rem;
    padding-bottom: 7rem;
    background: var(--brand-navy);
    color: #FFFFFF;
    text-align: center;
}

.final-cta-content {
    max-width: 800px;
    margin: 0 auto;
}

.final-cta .eyebrow {
    color: rgba(255, 255, 255, 0.55);
}

.final-cta h2 {
    margin-bottom: 1.5rem;
    color: #FFFFFF;
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.final-cta p {
    max-width: 600px;
    margin: 0 auto 2rem;
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.1rem;
}

.final-cta a {
    min-width: 200px;
}


/* ========================================
   Mobile
   ======================================== */

@media (max-width: 767px) {

    .compliance-roadmap,
    .drift-section,
    .compliance-services,
    .manage-section,
    .difference-section,
    .outcomes-section,
    .process-section,
    .faq-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .section-heading {
        margin-bottom: 3rem;
    }

    /* Roadmap */

    .roadmap {
        flex-direction: column;
    }

    .roadmap-step,
    .roadmap-step:first-child,
    .roadmap-step:last-child {
        padding: 0;
    }

    .roadmap-step {
        display: grid;
        grid-template-columns: 3rem 1fr;
        column-gap: 1rem;
    }

    .roadmap-number {
        grid-row: span 2;
        margin-bottom: 0;
    }

    .roadmap-step h3 {
        margin: 0 0 0.5rem;
    }

    .roadmap-step p {
        grid-column: 2;
        margin-bottom: 1.5rem;
    }

    .roadmap-connector {
        display: none;
    }

    .roadmap-footer {
        flex-direction: column;
        gap: 0.25rem;
        margin-top: 2rem;
    }

    /* Drift */

    .drift-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
        margin-bottom: 3rem;
    }

    .drift-items {
        grid-template-columns: 1fr;
    }

    /* Services */

    .compliance-intro {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .compliance-cards {
        grid-template-columns: 1fr;
    }

    .compliance-card {
        min-height: 300px;
    }

    /* Manage */

    .manage-grid {
        grid-template-columns: 1fr;
    }

    /* Difference */

    .difference-row {
        grid-template-columns: 1fr;
    }

    .difference-row > div:first-child {
        border-right: 0;
        border-bottom: 0;
        padding-bottom: 0.35rem;
    }

    .difference-row > div:last-child {
        padding-top: 0.35rem;
    }

    .difference-header {
        display: none;
    }

    /* Outcomes */

    .outcomes-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* Process */

    .process-grid {
        grid-template-columns: 1fr;
    }

    /* FAQ */

    .faq-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    /* CTA */

    .final-cta {
        padding-top: 5rem;
        padding-bottom: 5rem;
    }
}

/* ========================================
   Contact Section
   ======================================== */

.contact-section {
    padding-top: 6rem;
    padding-bottom: 6rem;
    background: var(--brand-off-white);
}

.contact-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;
    gap: 5rem;
    align-items: start;
}


/* ----------------------------------------
   Contact Introduction
   ---------------------------------------- */

.contact-intro {
    padding-top: 0.25rem;
}

.contact-intro h2 {
    margin-bottom: 1.5rem;
    color: var(--brand-navy);
    font-size: clamp(2.5rem, 5vw, 3.75rem);
    line-height: 1.05;
    --pico-font-weight: 500;
}

.contact-intro > p {
    max-width: 540px;
    margin-bottom: 2rem;
    color: var(--brand-slate);
    font-size: 1rem;
    line-height: 1.7;
}

.contact-benefits {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.contact-benefits li {
    display: flex;
    align-items: flex-start;
    gap: 0.8rem;
    margin: 0;
    padding: 0;
    color: var(--brand-navy);
}

.contact-benefits li span {
    flex: 0 0 auto;
    color: var(--brand-blue);
    font-size: 1.1rem;
    line-height: 1.4;
}


/* ----------------------------------------
   Form Container
   ---------------------------------------- */

.contact-form-wrapper {
    padding: 2rem;
    border: 1px solid rgba(11, 31, 58, 0.1);
    border-radius: 0.75rem;
    background: #FFFFFF;
    box-shadow: 0 1rem 2.5rem rgba(11, 31, 58, 0.06);
}

.contact-form {
    margin: 0;
}


/* ----------------------------------------
   Honeypot
   ---------------------------------------- */

.honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}


/* ----------------------------------------
   Form Layout
   ---------------------------------------- */

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
}

.contact-form label {
    display: block;
    margin-bottom: 1rem;
    color: var(--brand-navy);
    font-size: 0.85rem;
    font-weight: 500;
}

.contact-form input,
.contact-form select,
.contact-form textarea {
    margin-top: 0.4rem;
}

.contact-form textarea {
    min-height: 125px;
    resize: vertical;
}


/* ----------------------------------------
   Warning
   ---------------------------------------- */

.contact-warning {
    margin: 0 0 1rem;
    padding: 0.9rem;
    border-radius: 0.4rem;
    background: #EEF3F9;
    color: var(--brand-slate);
    font-size: 0.75rem;
    line-height: 1.5;
}

.contact-warning strong {
    color: var(--brand-navy);
}


/* ----------------------------------------
   Submit
   ---------------------------------------- */

.contact-submit {
    width: 100%;
    margin: 0;
}


/* ----------------------------------------
   Mobile
   ---------------------------------------- */

@media (max-width: 767px) {

    .contact-section {
        padding-top: 4rem;
        padding-bottom: 4rem;
    }

    .contact-grid {
        grid-template-columns: 1fr;
        gap: 3rem;
    }

    .contact-intro h2 {
        font-size: clamp(2.5rem, 12vw, 3.5rem);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .contact-form-wrapper {
        padding: 1.25rem;
    }
}