@import url(
'https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@500;600;700;800&display=swap'
);


:root {

    --primary:
        #0866ff;

    --primary-dark:
        #004ad8;

    --navy:
        #10233f;

    --text:
        #17243a;

    --muted:
        #66768e;

    --light-blue:
        #edf6ff;

    --super-light:
        #f7fafc;

    --border:
        #e4ebf2;

    --white:
        #ffffff;

    --green:
        #15a76d;

    --shadow:
        0 20px 60px
        rgba(38, 68, 105, .10);

    --font-heading:
        "Manrope",
        sans-serif;

    --font-body:
        "DM Sans",
        sans-serif;

}



* {

    margin: 0;

    padding: 0;

    box-sizing:
        border-box;

}



html {

    scroll-behavior:
        smooth;

}



body {

    font-family:
        var(--font-body);

    background:
        #ffffff;

    color:
        var(--text);

    line-height:
        1.6;

}



.container {

    width:
        min(
            1180px,
            calc(100% - 48px)
        );

    margin:
        0 auto;

}



.narrow {

    max-width:
        790px;

}



/* ==================================
   NAVIGATION
================================== */

.navbar {

    height:
        84px;

    display:
        flex;

    align-items:
        center;

    background:
        rgba(255,255,255,.94);

    backdrop-filter:
        blur(16px);

    border-bottom:
        1px solid
        var(--border);

    position:
        sticky;

    top:
        0;

    z-index:
        1000;

}



.nav-container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}



.logo {

    font-family:
        var(--font-heading);

    font-size:
        1.65rem;

    font-weight:
        800;

    text-decoration:
        none;

    color:
        var(--navy);

    letter-spacing:
        -1px;

}



.logo span {

    color:
        var(--primary);

}



.nav-links {

    display:
        flex;

    align-items:
        center;

    gap:
        31px;

}



.nav-links a {

    color:
        #506176;

    text-decoration:
        none;

    font-size:
        .9rem;

    font-weight:
        600;

    transition:
        .25s;

}



.nav-links a:hover,
.nav-links a.active {

    color:
        var(--primary);

}



.nav-actions {

    display:
        flex;

    align-items:
        center;

    gap:
        15px;

}



.nav-quote-btn {

    padding:
        11px 20px;

    color:
        white;

    background:
        var(--primary);

    text-decoration:
        none;

    border-radius:
        10px;

    font-size:
        .9rem;

    font-weight:
        700;

    transition:
        .25s;

}



.nav-quote-btn:hover {

    background:
        var(--primary-dark);

}



.mobile-menu {

    display:
        none;

    border:
        none;

    background:
        transparent;

    color:
        var(--navy);

    font-size:
        1.4rem;

}



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

.hero {

    overflow:
        hidden;

    background:

        radial-gradient(
            circle at 85% 25%,
            rgba(8,102,255,.11),
            transparent 32%
        ),

        linear-gradient(
            180deg,
            #f9fcff,
            #ffffff
        );

    padding:
        100px 0 110px;

}



.hero-grid {

    display:
        grid;

    grid-template-columns:
        1.05fr .95fr;

    align-items:
        center;

    gap:
        80px;

}



.eyebrow,
.section-label {

    color:
        var(--primary);

    font-size:
        .75rem;

    font-weight:
        800;

    letter-spacing:
        1.8px;

}



.eyebrow {

    display:
        flex;

    gap:
        9px;

    align-items:
        center;

    margin-bottom:
        21px;

}



.hero h1 {

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3.3rem,
            5.4vw,
            5.35rem
        );

    line-height:
        1.02;

    letter-spacing:
        -4px;

    color:
        var(--navy);

}



.hero h1 span {

    color:
        var(--primary);

    display:
        block;

}



.hero-description {

    color:
        var(--muted);

    max-width:
        650px;

    font-size:
        1.08rem;

    margin:
        28px 0 33px;

}



.hero-actions {

    display:
        flex;

    align-items:
        center;

    flex-wrap:
        wrap;

    gap:
        25px;

}



.primary-btn {

    padding:
        15px 23px;

    display:
        inline-flex;

    align-items:
        center;

    gap:
        12px;

    border-radius:
        11px;

    background:
        var(--primary);

    color:
        white;

    text-decoration:
        none;

    font-weight:
        700;

    transition:
        .25s;

}



.primary-btn:hover {

    background:
        var(--primary-dark);

    transform:
        translateY(-2px);

    box-shadow:
        0 12px 30px
        rgba(8,102,255,.22);

}



.text-btn {

    color:
        var(--navy);

    text-decoration:
        none;

    display:
        flex;

    align-items:
        center;

    gap:
        8px;

    font-weight:
        700;

}



.text-btn i {

    color:
        var(--primary);

}



.hero-trust {

    margin-top:
        32px;

    display:
        flex;

    gap:
        22px;

    flex-wrap:
        wrap;

    color:
        #6a788c;

    font-size:
        .84rem;

}



.hero-trust i {

    color:
        var(--green);

    margin-right:
        5px;

}



/* ==================================
   QUOTE MOCKUP
================================== */

.quote-preview {

    position:
        relative;

}



.quote-window {

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        24px;

    padding:
        29px;

    box-shadow:
        var(--shadow);

}



.quote-window-top {

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    margin-bottom:
        25px;

}



.small-label {

    color:
        #8a98aa;

    font-size:
        .65rem;

    letter-spacing:
        1px;

}



.quote-window h3 {

    color:
        var(--navy);

    margin-top:
        3px;

}



.live-pill {

    background:
        #ecfbf5;

    color:
        #11865a;

    padding:
        7px 11px;

    border-radius:
        50px;

    font-size:
        .7rem;

    font-weight:
        700;

}



.live-pill span {

    width:
        7px;

    height:
        7px;

    display:
        inline-block;

    border-radius:
        50%;

    background:
        #1fbe7c;

    margin-right:
        5px;

}



.shipment-mini {

    background:
        #f7faff;

    border-radius:
        13px;

    padding:
        15px;

    display:
        flex;

    justify-content:
        space-between;

    margin-bottom:
        18px;

}



.shipment-mini div {

    display:
        flex;

    flex-direction:
        column;

}



.shipment-mini small {

    color:
        #9aa7b8;

    font-size:
        .6rem;

}



.shipment-mini strong {

    color:
        var(--navy);

    font-size:
        .78rem;

}



.quote-option {

    position:
        relative;

    display:
        flex;

    align-items:
        center;

    padding:
        17px 11px;

    gap:
        12px;

    border-bottom:
        1px solid
        #edf1f5;

}



.quote-option.best {

    margin:
        8px -8px;

    padding:
        21px 18px;

    border:
        1px solid
        #bed6ff;

    border-radius:
        14px;

    background:
        #f3f8ff;

}



.best-label {

    position:
        absolute;

    right:
        9px;

    top:
        -8px;

    color:
        white;

    background:
        var(--primary);

    border-radius:
        50px;

    font-size:
        .52rem;

    font-weight:
        800;

    padding:
        4px 7px;

}



.company-icon {

    width:
        41px;

    height:
        41px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        10px;

    background:
        #edf5ff;

    color:
        var(--primary);

}



.quote-main {

    flex:
        1;

    display:
        flex;

    flex-direction:
        column;

}



.quote-main strong {

    font-size:
        .82rem;

}



.quote-main small {

    color:
        #8c99aa;

    font-size:
        .7rem;

}



.quote-price {

    text-align:
        right;

    display:
        flex;

    flex-direction:
        column;

}



.quote-price small {

    color:
        #a0abba;

    font-size:
        .55rem;

}



.quote-price strong {

    color:
        var(--navy);

}



.example-disclaimer {

    margin-top:
        16px;

    color:
        #9ba6b5;

    text-align:
        center;

    font-size:
        .61rem;

}



.floating-saving {

    position:
        absolute;

    left:
        -50px;

    bottom:
        -35px;

    background:
        white;

    padding:
        15px 20px;

    display:
        flex;

    gap:
        12px;

    border-radius:
        14px;

    box-shadow:
        var(--shadow);

}



.saving-icon {

    width:
        40px;

    height:
        40px;

    display:
        grid;

    place-items:
        center;

    background:
        #e9f9f2;

    color:
        var(--green);

    border-radius:
        10px;

}



.floating-saving div:last-child {

    display:
        flex;

    flex-direction:
        column;

}



.floating-saving small {

    color:
        #8d9aab;

    font-size:
        .54rem;

}



.floating-saving strong {

    color:
        var(--green);

}



/* ==================================
   TRUST STRIP
================================== */

.trust-strip {

    border-top:
        1px solid
        var(--border);

    border-bottom:
        1px solid
        var(--border);

    padding:
        27px 0;

}



.trust-strip .container {

    display:
        flex;

    align-items:
        center;

    justify-content:
        space-between;

}



.trust-strip p {

    color:
        #7b899b;

    font-size:
        .86rem;

}



.transport-types {

    display:
        flex;

    gap:
        30px;

}



.transport-types div {

    display:
        flex;

    align-items:
        center;

    gap:
        7px;

    font-size:
        .82rem;

    font-weight:
        600;

    color:
        #56677d;

}



.transport-types i {

    color:
        var(--primary);

}



/* ==================================
   GENERAL SECTIONS
================================== */

.section {

    padding:
        105px 0;

}



.soft-section {

    background:
        var(--super-light);

}



.section-heading {

    max-width:
        720px;

    margin:
        0 auto 55px;

    text-align:
        center;

}



.section-heading h2,
.saving-copy h2 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.45rem
        );

    letter-spacing:
        -2.4px;

    line-height:
        1.08;

    margin-top:
        13px;

}



.section-heading h2 span,
.saving-copy h2 span {

    color:
        var(--primary);

}



.section-heading p {

    color:
        var(--muted);

    margin-top:
        17px;

}



/* ==================================
   FEATURES
================================== */

.feature-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap:
        20px;

}



.feature-card {

    padding:
        29px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

    position:
        relative;

    transition:
        .25s;

}



.feature-card:hover {

    transform:
        translateY(-5px);

    box-shadow:
        var(--shadow);

}



.feature-number {

    position:
        absolute;

    right:
        22px;

    top:
        18px;

    color:
        #d9e1ea;

    font-family:
        var(--font-heading);

    font-weight:
        800;

}



.feature-icon {

    width:
        48px;

    height:
        48px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        13px;

    margin-bottom:
        22px;

}



.feature-icon.blue {

    background:
        #eaf3ff;

    color:
        #0866ff;

}



.feature-icon.purple {

    background:
        #f1ebff;

    color:
        #7c47da;

}



.feature-icon.green {

    background:
        #e9faf3;

    color:
        #17a66d;

}



.feature-icon.orange {

    background:
        #fff2e5;

    color:
        #e88324;

}



.feature-card h3 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    margin-bottom:
        8px;

}



.feature-card p {

    color:
        var(--muted);

    font-size:
        .9rem;

}



/* ==================================
   SAVING COMPARISON
================================== */

.saving-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        95px;

    align-items:
        center;

}



.saving-copy p {

    color:
        var(--muted);

    margin:
        22px 0 28px;

}



.secondary-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--primary);

    text-decoration:
        none;

    font-weight:
        700;

}



.comparison-list {

    display:
        grid;

    gap:
        12px;

}



.comparison-row {

    display:
        flex;

    align-items:
        center;

    gap:
        17px;

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        14px;

    padding:
        18px;

}



.comparison-icon {

    width:
        45px;

    height:
        45px;

    border-radius:
        12px;

    background:
        var(--light-blue);

    display:
        grid;

    place-items:
        center;

    color:
        var(--primary);

    font-weight:
        800;

}



.comparison-row strong {

    color:
        var(--navy);

}



.comparison-row p {

    color:
        var(--muted);

    font-size:
        .82rem;

}



/* ==================================
   BUSINESS BANNER
================================== */

.business-banner {

    min-height:
        340px;

    padding:
        55px 65px;

    border-radius:
        28px;

    display:
        grid;

    grid-template-columns:
        1.4fr .6fr;

    align-items:
        center;

    background:

        linear-gradient(
            130deg,
            #075bf0,
            #0a76ff
        );

    color:
        white;

    overflow:
        hidden;

}



.business-pill {

    display:
        inline-block;

    padding:
        7px 10px;

    border-radius:
        50px;

    background:
        rgba(255,255,255,.15);

    font-size:
        .67rem;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}



.business-banner h2 {

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2rem,
            4vw,
            3.2rem
        );

    line-height:
        1.07;

    letter-spacing:
        -2px;

    margin:
        18px 0;

    max-width:
        680px;

}



.business-banner p {

    color:
        rgba(255,255,255,.82);

    max-width:
        640px;

    margin-bottom:
        27px;

}



.white-btn {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        10px;

    background:
        white;

    color:
        var(--primary);

    padding:
        14px 20px;

    border-radius:
        10px;

    text-decoration:
        none;

    font-weight:
        700;

}



.business-graphic {

    font-size:
        9rem;

    color:
        rgba(255,255,255,.16);

    text-align:
        center;

}



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

.final-cta {

    padding-top:
        50px;

}



.cta-card {

    max-width:
        850px;

    margin:
        auto;

    text-align:
        center;

}



.cta-card span {

    color:
        var(--primary);

    font-size:
        .7rem;

    font-weight:
        800;

    letter-spacing:
        1.5px;

}



.cta-card h2 {

    color:
        var(--navy);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            2.3rem,
            4vw,
            3.8rem
        );

    line-height:
        1.08;

    letter-spacing:
        -2.5px;

    margin:
        12px 0 16px;

}



.cta-card p {

    color:
        var(--muted);

    margin-bottom:
        28px;

}



/* ==================================
   INNER PAGES
================================== */

.inner-hero {

    padding:
        105px 0 90px;

    background:

        linear-gradient(
            180deg,
            #f5faff,
            white
        );

    text-align:
        center;

}



.inner-hero h1 {

    color:
        var(--navy);

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

    line-height:
        1.05;

    letter-spacing:
        -3px;

    margin:
        14px 0;

}



.inner-hero h1 span {

    color:
        var(--primary);

}



.inner-hero p {

    max-width:
        630px;

    margin:
        auto;

    color:
        var(--muted);

}



/* ==================================
   PROCESS
================================== */

.process-list {

    max-width:
        920px;

}



.process-item {

    display:
        grid;

    grid-template-columns:
        150px 1fr;

    gap:
        40px;

    padding:
        50px 0;

    border-bottom:
        1px solid
        var(--border);

}



.process-number {

    font-family:
        var(--font-heading);

    font-size:
        4.5rem;

    color:
        #dbe5f2;

    font-weight:
        800;

}



.process-content i {

    color:
        var(--primary);

    font-size:
        1.8rem;

    margin-bottom:
        13px;

}



.process-content h2 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    margin-bottom:
        9px;

}



.process-content p {

    color:
        var(--muted);

}



/* ==================================
   TRANSPORT GRID
================================== */

.transport-grid {

    display:
        grid;

    grid-template-columns:
        repeat(4,1fr);

    gap:
        18px;

}



.transport-grid > div {

    background:
        white;

    border:
        1px solid
        var(--border);

    border-radius:
        17px;

    padding:
        30px;

}



.transport-grid i {

    color:
        var(--primary);

    font-size:
        2rem;

    margin-bottom:
        18px;

}



.transport-grid h3 {

    color:
        var(--navy);

}



.transport-grid p {

    color:
        var(--muted);

    font-size:
        .88rem;

    margin-top:
        8px;

}



/* ==================================
   BUSINESS PAGE
================================== */

.business-hero {

    background:

        linear-gradient(
            135deg,
            #074dcc,
            #1081ff
        );

    color:
        white;

    padding:
        105px 0;

}



.business-hero-grid {

    display:
        grid;

    grid-template-columns:
        1.15fr .85fr;

    gap:
        80px;

    align-items:
        center;

}



.white-label {

    color:
        rgba(255,255,255,.75);

}



.business-hero h1 {

    font-family:
        var(--font-heading);

    font-size:
        clamp(
            3rem,
            5vw,
            4.8rem
        );

    line-height:
        1.03;

    letter-spacing:
        -3px;

    margin:
        16px 0;

}



.business-hero h1 span {

    color:
        #bfe2ff;

}



.business-hero p {

    color:
        rgba(255,255,255,.8);

    max-width:
        620px;

    margin-bottom:
        30px;

}



.business-stat-box {

    padding:
        35px;

    border:
        1px solid
        rgba(255,255,255,.2);

    border-radius:
        24px;

    background:
        rgba(255,255,255,.1);

    backdrop-filter:
        blur(15px);

}



.business-stat-box div {

    padding:
        20px 0;

    display:
        flex;

    justify-content:
        space-between;

    border-bottom:
        1px solid
        rgba(255,255,255,.15);

}



.business-stat-box div:last-child {

    border-bottom:
        none;

}



.business-stat-box strong {

    font-size:
        1.5rem;

}



.business-stat-box span {

    color:
        rgba(255,255,255,.65);

}



.business-use-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2,1fr);

    gap:
        20px;

}



.use-card {

    padding:
        35px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

}



.use-card i {

    color:
        var(--primary);

    font-size:
        1.8rem;

    margin-bottom:
        17px;

}



.use-card h3 {

    color:
        var(--navy);

}



.use-card p {

    color:
        var(--muted);

    margin-top:
        8px;

}



.large-icon-card {

    min-height:
        330px;

    background:

        linear-gradient(
            135deg,
            #e6f2ff,
            #f5f9ff
        );

    border-radius:
        30px;

    display:
        grid;

    place-items:
        center;

}



.large-icon-card i {

    font-size:
        8rem;

    color:
        #8dbdff;

}



/* ==================================
   ABOUT
================================== */

.story-grid {

    display:
        grid;

    grid-template-columns:
        .9fr 1.1fr;

    gap:
        90px;

}



.story-title {

    color:
        var(--navy);

    font-family:
        var(--font-heading);

    font-size:
        2.7rem;

    line-height:
        1.1;

    letter-spacing:
        -2px;

    margin-top:
        13px;

}



.story-copy p {

    color:
        var(--muted);

    font-size:
        1.05rem;

    margin-bottom:
        21px;

}



.value-grid {

    display:
        grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:
        20px;

}



.value-card {

    background:
        white;

    padding:
        37px;

    border:
        1px solid
        var(--border);

    border-radius:
        18px;

}



.value-card span {

    color:
        #bbcae0;

    font-weight:
        800;

}



.value-card h3 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    font-size:
        1.4rem;

    margin:
        20px 0 8px;

}



.value-card p {

    color:
        var(--muted);

}



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

.faq-wrapper {

    max-width:
        850px;

}



.faq-item {

    border-bottom:
        1px solid
        var(--border);

}



.faq-question {

    width:
        100%;

    display:
        flex;

    justify-content:
        space-between;

    align-items:
        center;

    background:
        none;

    border:
        none;

    padding:
        27px 0;

    font-family:
        var(--font-heading);

    font-size:
        1.05rem;

    font-weight:
        700;

    color:
        var(--navy);

    cursor:
        pointer;

    text-align:
        left;

}



.faq-question i {

    color:
        var(--primary);

}



.faq-answer {

    max-height:
        0;

    overflow:
        hidden;

    transition:
        .3s ease;

}



.faq-answer p {

    color:
        var(--muted);

    padding-bottom:
        25px;

}



.faq-item.active
.faq-answer {

    max-height:
        300px;

}



/* ==================================
   FORM PAGE
================================== */

.quote-page {

    min-height:
        calc(100vh - 84px);

    background:
        #f5f9fd;

    padding:
        80px 0;

}



.quote-page-grid {

    display:
        grid;

    grid-template-columns:
        .8fr 1.2fr;

    gap:
        80px;

    align-items:
        start;

}



.quote-intro {

    position:
        sticky;

    top:
        130px;

}



.quote-intro h1 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    font-size:
        clamp(
            2.8rem,
            4vw,
            4.3rem
        );

    line-height:
        1.04;

    letter-spacing:
        -3px;

    margin:
        15px 0;

}



.quote-intro h1 span {

    color:
        var(--primary);

}



.quote-intro > p {

    color:
        var(--muted);

}



.quote-benefits {

    margin-top:
        32px;

    display:
        grid;

    gap:
        12px;

    color:
        #52667c;

}



.quote-benefits i {

    color:
        var(--green);

    margin-right:
        8px;

}



.modern-form-card {

    background:
        white;

    border:
        1px solid
        var(--border);

    box-shadow:
        var(--shadow);

    border-radius:
        22px;

    padding:
        38px;

}



.form-section-title {

    display:
        flex;

    align-items:
        center;

    gap:
        10px;

    color:
        var(--navy);

    font-weight:
        700;

    margin:
        13px 0 20px;

}



.form-section-title:first-child {

    margin-top:
        0;

}



.form-section-title span {

    width:
        26px;

    height:
        26px;

    display:
        grid;

    place-items:
        center;

    border-radius:
        50%;

    background:
        var(--light-blue);

    color:
        var(--primary);

    font-size:
        .72rem;

}



.form-row {

    display:
        grid;

    grid-template-columns:
        1fr 1fr;

    gap:
        16px;

}



.form-group {

    margin-bottom:
        18px;

}



.form-group label {

    display:
        block;

    color:
        #5e6e81;

    font-size:
        .72rem;

    font-weight:
        700;

    margin-bottom:
        7px;

}



.form-group input,
.form-group select,
.form-group textarea {

    width:
        100%;

    background:
        #fafcfe;

    border:
        1px solid
        #dce5ee;

    color:
        var(--text);

    border-radius:
        9px;

    padding:
        14px;

    font-family:
        var(--font-body);

    outline:
        none;

}



.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {

    background:
        white;

    border-color:
        var(--primary);

    box-shadow:
        0 0 0 3px
        rgba(8,102,255,.07);

}



.form-submit {

    width:
        100%;

    padding:
        15px;

    border:
        none;

    border-radius:
        10px;

    background:
        var(--primary);

    color:
        white;

    font-family:
        var(--font-body);

    font-weight:
        700;

    cursor:
        pointer;

}



.form-submit i {

    margin-left:
        9px;

}



.form-note {

    text-align:
        center;

    color:
        #9aa6b4;

    font-size:
        .7rem;

    margin-top:
        12px;

}



/* ==================================
   FOOTER
================================== */

footer {

    background:
        #f7fafc;

    border-top:
        1px solid
        var(--border);

    padding:
        65px 0 28px;

}



.footer-grid {

    display:
        grid;

    grid-template-columns:
        2fr 1fr 1fr;

    gap:
        50px;

}



.footer-logo {

    font-family:
        var(--font-heading);

    font-size:
        1.6rem;

    font-weight:
        800;

    color:
        var(--navy);

    text-decoration:
        none;

}



.footer-logo span {

    color:
        var(--primary);

}



.footer-description {

    color:
        var(--muted);

    margin-top:
        13px;

    max-width:
        310px;

}



.footer-grid > div:not(:first-child) {

    display:
        flex;

    flex-direction:
        column;

    gap:
        10px;

}



.footer-grid strong {

    color:
        var(--navy);

    margin-bottom:
        7px;

}



.footer-grid a {

    color:
        var(--muted);

    text-decoration:
        none;

    font-size:
        .86rem;

}



.footer-bottom {

    border-top:
        1px solid
        var(--border);

    margin-top:
        45px;

    padding-top:
        22px;

    display:
        flex;

    justify-content:
        space-between;

    gap:
        20px;

    color:
        #929eac;

    font-size:
        .7rem;

}



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

@media(max-width:900px) {


    .mobile-menu {

        display:
            block;

    }


    .nav-quote-btn {

        display:
            none;

    }


    .nav-links {

        display:
            none;

        position:
            absolute;

        top:
            84px;

        left:
            0;

        right:
            0;

        background:
            white;

        padding:
            30px;

        flex-direction:
            column;

        align-items:
            flex-start;

        border-bottom:
            1px solid
            var(--border);

    }


    .nav-links.open {

        display:
            flex;

    }


    .hero {

        padding:
            65px 0 90px;

    }


    .hero-grid,
    .saving-grid,
    .business-hero-grid,
    .story-grid,
    .quote-page-grid {

        grid-template-columns:
            1fr;

        gap:
            50px;

    }


    .hero h1 {

        letter-spacing:
            -2.5px;

    }


    .floating-saving {

        left:
            10px;

    }


    .feature-grid,
    .transport-grid {

        grid-template-columns:
            repeat(2,1fr);

    }


    .business-use-grid {

        grid-template-columns:
            1fr;

    }


    .value-grid {

        grid-template-columns:
            1fr;

    }


    .business-banner {

        grid-template-columns:
            1fr;

    }


    .business-graphic {

        display:
            none;

    }


    .trust-strip .container {

        flex-direction:
            column;

        gap:
            18px;

    }


    .transport-types {

        flex-wrap:
            wrap;

        justify-content:
            center;

    }


    .quote-intro {

        position:
            static;

    }


}



@media(max-width:600px) {


    .container {

        width:
            min(
                100% - 30px,
                1180px
            );

    }


    .hero {

        padding-top:
            50px;

    }


    .hero h1 {

        font-size:
            3rem;

    }


    .feature-grid,
    .transport-grid,
    .form-row {

        grid-template-columns:
            1fr;

    }


    .quote-window {

        padding:
            20px;

    }


    .floating-saving {

        position:
            relative;

        left:
            auto;

        bottom:
            auto;

        margin-top:
            15px;

    }


    .process-item {

        grid-template-columns:
            1fr;

        gap:
            5px;

    }


    .process-number {

        font-size:
            2rem;

    }


    .business-banner {

        padding:
            37px 27px;

    }


    .business-hero {

        padding:
            70px 0;

    }


    .modern-form-card {

        padding:
            24px 18px;

    }


    .footer-grid {

        grid-template-columns:
            1fr;

    }


    .footer-bottom {

        flex-direction:
            column;

    }

}


/* ==================================
   HOMEPAGE CLIENT EXPERIENCE
================================== */

.reviews-section {

    display: block;

    width: 100%;

    padding: 110px 0;

    background:
        linear-gradient(
            180deg,
            #f5f9ff 0%,
            #ffffff 100%
        );

    border-top:
        1px solid var(--border);

    border-bottom:
        1px solid var(--border);

}


.reviews-heading {

    max-width: 720px;

    margin: 0 auto 55px;

    text-align: center;

}


.reviews-heading h2 {

    font-family:
        var(--font-heading);

    color:
        var(--navy);

    font-size:
        clamp(
            2.2rem,
            4vw,
            3.45rem
        );

    line-height: 1.08;

    letter-spacing: -2.4px;

    margin-top: 13px;

}


.reviews-heading h2 span {

    color:
        var(--primary);

}


.reviews-heading p {

    color:
        var(--muted);

    margin-top: 17px;

    font-size: 1rem;

}


.reviews-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


.review-card {

    display: block;

    min-height: 260px;

    padding: 32px;

    background:
        #ffffff;

    border:
        1px solid var(--border);

    border-radius: 20px;

    box-shadow:
        0 10px 40px
        rgba(25, 60, 100, .06);

    transition:
        transform .25s ease,
        box-shadow .25s ease,
        border-color .25s ease;

}


.review-card:hover {

    transform:
        translateY(-6px);

    border-color:
        #c9dcf8;

    box-shadow:
        0 20px 55px
        rgba(25, 60, 100, .12);

}


.review-icon {

    width: 52px;

    height: 52px;

    display: grid;

    place-items: center;

    margin-bottom: 25px;

    border-radius: 14px;

    background:
        var(--light-blue);

    color:
        var(--primary);

    font-size: 1.25rem;

}


.review-card h3 {

    color:
        var(--navy);

    font-family:
        var(--font-heading);

    font-size:
        1.2rem;

    margin-bottom: 10px;

}


.review-card p {

    color:
        var(--muted);

    font-size:
        .9rem;

    line-height:
        1.7;

}


/* TABLET */

@media(max-width:900px) {

    .reviews-grid {

        grid-template-columns:
            repeat(2, 1fr);

    }

}


/* MOBILE */

@media(max-width:600px) {

    .reviews-section {

        padding:
            75px 0;

    }


    .reviews-grid {

        grid-template-columns:
            1fr;

    }


    .review-card {

        min-height:
            auto;

    }

}


.contact-details {
    margin-top: 38px;
    padding-top: 30px;
    border-top: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 22px;
}

.contact-detail {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.contact-detail > i {
    width: 42px;
    height: 42px;
    flex-shrink: 0;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: var(--light-blue);
    color: var(--primary);
}

.contact-detail div {
    display: flex;
    flex-direction: column;
}

.contact-detail small {
    color: var(--primary);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.2px;
    margin-bottom: 4px;
}

.contact-detail strong {
    color: var(--navy);
    font-size: .9rem;
    line-height: 1.6;
}

.contact-detail span {
    color: var(--muted);
    font-size: .72rem;
    margin-top: 3px;
}


/* =========================================================
   TRADE REQUEST DEMO COMPLETION
========================================================= */

.trade-success-message {
    text-align: center;
    padding: 65px 35px;
    animation: successFade .45s ease;
}

.success-icon {
    width: 76px;
    height: 76px;
    margin: 0 auto 24px;

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

    border-radius: 50%;

    background: #eaf8f0;
    color: #18a558;

    font-size: 2rem;
}

.trade-success-message h2 {
    font-family: var(--font-heading);
    color: var(--navy);
    font-size: 2rem;
    margin: 12px 0 15px;
}

.trade-success-message > p {
    color: var(--muted);
    max-width: 460px;
    margin: 0 auto 28px;
    line-height: 1.75;
}

.success-reference {
    max-width: 330px;
    margin: 0 auto 30px;

    padding: 18px 22px;

    background: var(--super-light);
    border: 1px solid var(--border);
    border-radius: 12px;

    display: flex;
    flex-direction: column;
    gap: 5px;
}

.success-reference small {
    color: var(--muted);
    font-size: .68rem;
    font-weight: 800;
    letter-spacing: 1.3px;
}

.success-reference strong {
    color: var(--navy);
    font-size: 1rem;
    letter-spacing: .7px;
}

.new-request-btn {
    width: auto;
    display: inline-flex;
    margin: 0 auto;
}

.form-submit:disabled {
    opacity: .8;
    cursor: not-allowed;
}


@keyframes successFade {

    from {
        opacity: 0;
        transform: translateY(12px);
    }

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

}