/* ==========================================================
   HOW WE WORK V21.2.54
   Practical buyer-facing rebuild
   ========================================================== */

.hww26-page{
    --hww-navy:#071f33;
    --hww-blue:#123f5d;
    --hww-orange:#ef7b00;
    --hww-ink:#102536;
    --hww-muted:#637887;
    --hww-soft:#f3f6f8;
    --hww-line:#d9e2e8;
    background:#fff;
    color:var(--hww-ink);
}

.hww26-page *{box-sizing:border-box}

.hww26-page h1,
.hww26-page h2,
.hww26-page h3,
.hww26-page p{margin-top:0}

.hww26-kicker{
    margin:0 0 12px;
    color:var(--hww-orange);
    font-size:12px;
    font-weight:900;
    letter-spacing:.16em;
}

.hww26-kicker.light{color:#ff9a52}


/* HERO */

.hww26-hero{
    padding:42px 0 46px;
    background:#eef3f6;
}

.hww26-hero-grid{
    display:grid;
    grid-template-columns:minmax(0,1.45fr) minmax(340px,.55fr);
    gap:70px;
    align-items:center;
}

.hww26-breadcrumb{
    display:flex;
    gap:8px;
    margin:0 0 32px;
    color:#718294;
    font-size:12px;
    font-weight:800;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.hww26-breadcrumb a{
    color:inherit;
    text-decoration:none;
}

.hww26-hero h1{
    max-width:820px;
    margin:0 0 18px;
    font-size:clamp(46px,5vw,66px);
    line-height:1.02;
    letter-spacing:-.045em;
}

.hww26-lead{
    max-width:760px;
    margin-bottom:0;
    color:var(--hww-muted);
    font-size:18px;
    line-height:1.65;
}

.hww26-actions{
    display:flex;
    align-items:center;
    gap:28px;
    margin-top:24px;
}

.hww26-text-link{
    color:var(--hww-blue);
    font-weight:900;
    text-decoration:none;
}

.hww26-brief{
    padding:28px 30px;
    background:var(--hww-navy);
    color:#fff;
    border-top:5px solid var(--hww-orange);
}

.hww26-brief-kicker{
    margin:0 0 10px;
    color:#ff9a52;
    font-size:11px;
    font-weight:900;
    letter-spacing:.16em;
}

.hww26-brief h2{
    margin:0 0 18px;
    font-size:28px;
    line-height:1.12;
}

.hww26-brief-list{
    border-top:1px solid rgba(255,255,255,.15);
}

.hww26-brief-list div{
    display:grid;
    grid-template-columns:38px 1fr;
    gap:10px;
    padding:12px 0;
    border-bottom:1px solid rgba(255,255,255,.15);
}

.hww26-brief-list span{
    color:#ff9a52;
    font-size:11px;
    font-weight:900;
}

.hww26-brief-list strong{
    font-size:15px;
}


/* GENERAL */

.hww26-section{
    padding:58px 0;
}

.hww26-heading{
    display:grid;
    grid-template-columns:minmax(0,1.15fr) minmax(300px,.65fr);
    gap:70px;
    align-items:end;
    margin-bottom:32px;
}

.hww26-heading h2{
    max-width:780px;
    margin:0;
    font-size:clamp(38px,4vw,52px);
    line-height:1.06;
    letter-spacing:-.035em;
}

.hww26-heading > p{
    margin:0;
    color:var(--hww-muted);
    font-size:16px;
    line-height:1.65;
}


/* INPUTS */

.hww26-input-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    border:1px solid var(--hww-line);
}

.hww26-input-grid article{
    min-height:190px;
    padding:24px;
    border-right:1px solid var(--hww-line);
}

.hww26-input-grid article:last-child{border-right:0}

.hww26-input-grid span,
.hww26-review-list div>span{
    color:var(--hww-orange);
    font-size:11px;
    font-weight:900;
    letter-spacing:.12em;
}

.hww26-input-grid h3{
    margin:28px 0 9px;
    font-size:20px;
}

.hww26-input-grid p{
    margin:0;
    color:var(--hww-muted);
    line-height:1.55;
}


/* REVIEW */

.hww26-review{background:var(--hww-soft)}

.hww26-review-list{
    border-top:1px solid #ccd7de;
}

.hww26-review-list article{
    display:grid;
    grid-template-columns:60px minmax(0,1fr) 190px;
    gap:26px;
    align-items:center;
    padding:22px 0;
    border-bottom:1px solid #ccd7de;
}

.hww26-review-list article>b{
    color:var(--hww-orange);
    font-size:24px;
}

.hww26-review-list h3{
    margin:5px 0 7px;
    font-size:20px;
}

.hww26-review-list p{
    max-width:760px;
    margin:0;
    color:var(--hww-muted);
    line-height:1.55;
}

.hww26-review-list article>strong{
    padding-left:18px;
    border-left:3px solid var(--hww-orange);
    color:var(--hww-blue);
    font-size:11px;
    letter-spacing:.1em;
}

.hww26-review-list article>strong small{
    color:var(--hww-ink);
    font-size:14px;
    letter-spacing:0;
}


/* OFFER */

.hww26-offer{
    padding:58px 0;
    background:var(--hww-navy);
    color:#fff;
}

.hww26-offer-grid{
    display:grid;
    grid-template-columns:.75fr 1.25fr;
    gap:80px;
    align-items:center;
}

.hww26-offer h2{
    margin:0 0 18px;
    font-size:clamp(38px,4vw,52px);
    line-height:1.06;
}

.hww26-offer-copy{
    max-width:480px;
    margin:0;
    color:#bdcbd5;
    line-height:1.65;
}

.hww26-offer-items{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid rgba(255,255,255,.16);
}

.hww26-offer-items div{
    display:grid;
    grid-template-columns:42px 1fr;
    gap:12px;
    padding:18px 12px 18px 0;
    border-bottom:1px solid rgba(255,255,255,.16);
}

.hww26-offer-items span{
    color:#ff9a52;
    font-size:11px;
    font-weight:900;
}

.hww26-offer-items strong{
    font-size:16px;
}


/* ORDER */

.hww26-order-flow{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:14px;
}

.hww26-order-flow article{
    min-height:180px;
    padding:24px;
    background:var(--hww-soft);
    border-top:3px solid var(--hww-orange);
}

.hww26-order-flow span{
    color:var(--hww-orange);
    font-size:12px;
    font-weight:900;
}

.hww26-order-flow h3{
    margin:24px 0 8px;
    font-size:20px;
}

.hww26-order-flow p{
    margin:0;
    color:var(--hww-muted);
    line-height:1.55;
}


/* CTA */

.hww26-cta{
    padding:46px 0;
    background:#123f5d;
    color:#fff;
}

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

.hww26-cta h2{
    max-width:820px;
    margin:0 0 10px;
    font-size:clamp(34px,3.6vw,48px);
    line-height:1.06;
}

.hww26-cta p:last-child{
    margin:0;
    color:#d2dee5;
}


/* RESPONSIVE */

@media(max-width:900px){

    .hww26-hero-grid,
    .hww26-heading,
    .hww26-offer-grid{
        grid-template-columns:1fr;
        gap:32px;
    }

    .hww26-input-grid,
    .hww26-order-flow{
        grid-template-columns:1fr 1fr;
    }

    .hww26-input-grid article:nth-child(2){border-right:0}

    .hww26-cta-inner{
        align-items:flex-start;
        flex-direction:column;
        gap:24px;
    }
}

@media(max-width:640px){

    .hww26-hero{
        padding:34px 0 38px;
    }

    .hww26-breadcrumb{
        margin-bottom:24px;
    }

    .hww26-hero h1{
        font-size:42px;
    }

    .hww26-section,
    .hww26-offer{
        padding:42px 0;
    }

    .hww26-input-grid,
    .hww26-order-flow,
    .hww26-offer-items{
        grid-template-columns:1fr;
    }

    .hww26-input-grid article{
        min-height:0;
        border-right:0;
        border-bottom:1px solid var(--hww-line);
    }

    .hww26-review-list article{
        grid-template-columns:42px 1fr;
        gap:14px;
    }

    .hww26-review-list article>strong{
        grid-column:2;
        margin-top:4px;
    }

    .hww26-brief{
        padding:24px;
    }

    .hww26-cta{
        padding:40px 0;
    }
}


/* ==========================================================
   BILITON_HOW_WE_WORK_HERO_IMAGE_V21_2_55
   Panoramic buyer-facing export hero
   ========================================================== */

.hww26-page .hww26-hero{
    position:relative;
    min-height:520px;
    padding:0 !important;
    display:flex;
    align-items:center;
    overflow:hidden;

    background-image:
        url('/public/images/about/how-we-work-hero-v21.2.55.webp');

    background-size:cover;
    background-position:center center;
    background-repeat:no-repeat;
    color:#fff;
}


/* Additional controlled overlay for HTML readability */

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

    background:
        linear-gradient(
            90deg,
            rgba(5,25,43,.94) 0%,
            rgba(5,25,43,.88) 30%,
            rgba(5,25,43,.66) 48%,
            rgba(5,25,43,.20) 68%,
            rgba(5,25,43,.03) 100%
        );
}


.hww26-page .hww26-hero-grid{
    position:relative;
    z-index:1;

    display:block !important;
    min-height:520px;

    padding-top:48px;
    padding-bottom:48px;
}


.hww26-page .hww26-hero-copy{
    max-width:800px;
}


.hww26-page .hww26-breadcrumb{
    margin-bottom:30px;
    color:rgba(255,255,255,.70);
}


.hww26-page .hww26-breadcrumb a{
    color:inherit;
}


.hww26-page .hww26-hero .hww26-kicker{
    color:#ff922f;
}


.hww26-page .hww26-hero h1{
    max-width:800px;
    margin-bottom:18px;

    color:#fff;

    font-size:clamp(48px,4.7vw,64px);
    line-height:1.02;
    letter-spacing:-.045em;
}


.hww26-page .hww26-hero .hww26-lead{
    max-width:690px;

    color:#d7e2e9;

    font-size:18px;
    line-height:1.62;
}


.hww26-page .hww26-hero .hww26-actions{
    margin-top:26px;
}


.hww26-page .hww26-hero .hww26-text-link{
    color:#fff;
}


/* Old brief is no longer part of the visual system */

.hww26-page .hww26-brief{
    display:none !important;
}


/* ----------------------------------------------------------
   TABLET
   ---------------------------------------------------------- */

@media(max-width:900px){

    .hww26-page .hww26-hero{
        min-height:500px;
        background-position:62% center;
    }

    .hww26-page .hww26-hero-grid{
        min-height:500px;
        padding-top:42px;
        padding-bottom:42px;
    }

    .hww26-page .hww26-hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(5,25,43,.96) 0%,
                rgba(5,25,43,.90) 42%,
                rgba(5,25,43,.58) 70%,
                rgba(5,25,43,.20) 100%
            );
    }

}


/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media(max-width:640px){

    .hww26-page .hww26-hero{
        min-height:500px;
        background-position:68% center;
    }

    .hww26-page .hww26-hero-grid{
        min-height:500px;
        padding-top:34px;
        padding-bottom:36px;
    }

    .hww26-page .hww26-hero::before{
        background:
            linear-gradient(
                90deg,
                rgba(5,25,43,.97) 0%,
                rgba(5,25,43,.94) 58%,
                rgba(5,25,43,.72) 82%,
                rgba(5,25,43,.48) 100%
            );
    }

    .hww26-page .hww26-breadcrumb{
        margin-bottom:22px;
    }

    .hww26-page .hww26-hero h1{
        max-width:560px;
        font-size:40px;
        line-height:1.04;
    }

    .hww26-page .hww26-hero .hww26-lead{
        max-width:540px;
        font-size:16px;
        line-height:1.58;
    }

    .hww26-page .hww26-hero .hww26-actions{
        gap:18px;
        flex-wrap:wrap;
        margin-top:22px;
    }

}


/* ==========================================================
   BILITON_HWW_REQUIREMENT_REVIEW_V21_2_57
   Requirement Review section refinement
   ========================================================== */

.hww26-page .hww26-section:first-of-type .hww26-heading{
    margin-bottom:26px;
}

.hww26-page .hww26-section:first-of-type .hww26-heading h2{
    max-width:760px;
    font-size:clamp(38px,3.7vw,48px);
    line-height:1.07;
}

.hww26-page .hww26-section:first-of-type .hww26-heading > p{
    max-width:450px;
    line-height:1.6;
}

.hww26-page .hww26-input-grid article{
    min-height:165px;
    padding:20px 24px;
}

.hww26-page .hww26-input-grid h3{
    margin:20px 0 8px;
}

.hww26-page .hww26-input-grid p{
    line-height:1.5;
}

@media(max-width:640px){

    .hww26-page .hww26-input-grid article{
        min-height:0;
        padding:20px;
    }

}


/* ==========================================================
   BILITON_HWW_SUPPLY_REVIEW_V21_2_58
   Supply Review refinement
   ========================================================== */

.hww26-page .hww26-review{
    padding-top:50px;
    padding-bottom:50px;
}

.hww26-page .hww26-review .hww26-heading{
    margin-bottom:24px;
}

.hww26-page .hww26-review .hww26-heading h2{
    max-width:760px;
    font-size:clamp(38px,3.7vw,48px);
    line-height:1.07;
}

.hww26-page .hww26-review .hww26-heading > p{
    max-width:470px;
    line-height:1.58;
}

.hww26-page .hww26-review-list article{
    padding-top:16px;
    padding-bottom:16px;
}

.hww26-page .hww26-review-list h3{
    margin:4px 0 6px;
}

.hww26-page .hww26-review-list p{
    line-height:1.48;
}

.hww26-page .hww26-review-list article > strong{
    line-height:1.35;
}

@media(max-width:640px){

    .hww26-page .hww26-review{
        padding-top:42px;
        padding-bottom:42px;
    }

    .hww26-page .hww26-review-list article{
        padding-top:16px;
        padding-bottom:16px;
    }

}


/* ==========================================================
   BILITON_HWW_ORDER_FLOW_V21_2_60
   After Order Confirmation refinement
   ========================================================== */

.hww26-page .hww26-order{
    padding-top:50px;
    padding-bottom:50px;
}

.hww26-page .hww26-order .hww26-heading{
    margin-bottom:26px;
}

.hww26-page .hww26-order .hww26-heading h2{
    max-width:720px;
    font-size:clamp(38px,3.7vw,48px);
    line-height:1.07;
}

.hww26-page .hww26-order .hww26-heading > p{
    max-width:460px;
    line-height:1.58;
}

.hww26-page .hww26-order-flow{
    gap:12px;
}

.hww26-page .hww26-order-flow article{
    min-height:155px;
    padding:20px 22px;
}

.hww26-page .hww26-order-flow h3{
    margin:18px 0 7px;
}

.hww26-page .hww26-order-flow p{
    line-height:1.5;
}

@media(max-width:640px){

    .hww26-page .hww26-order{
        padding-top:42px;
        padding-bottom:42px;
    }

    .hww26-page .hww26-order-flow article{
        min-height:0;
        padding:20px;
    }

}