
/* ── How It Works timeline ────────────────────────────────────────────────── */
.hiw-wrap {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Timeline container — centered vertical line */
.hiw-timeline {
    position: relative;
    padding: 0 0 8px;
    max-width: 900px;
    margin: 0 auto;
}
.hiw-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    transform: translateX(-50%);
    background: var(--border);
    border-radius: 2px;
}

/* Step row — alternating layout */
.hiw-step {
    display: grid;
    grid-template-columns: 1fr 72px 1fr;
    align-items: start;
    position: relative;
    padding-bottom: 52px;
    gap: 0;
}
.hiw-step:last-child { padding-bottom: 0; }

/* Center column: the number circle */
.hiw-num {
    grid-column: 2;
    grid-row: 1;
    width: 64px;
    height: 64px;
    background: var(--bg);
    border: 2px solid var(--border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1;
    margin: 0 auto;
    transition: border-color .2s, background .2s;
    justify-self: center;
}
.hiw-step:hover .hiw-num {
    border-color: var(--red);
    background: rgba(4,42,71,.06);
}
.hiw-num-text {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: 17px;
    font-weight: 800;
    color: var(--red);
    letter-spacing: -.03em;
    line-height: 1;
}

/* Left and right slot */
.hiw-left  { grid-column: 1; padding-right: 32px; }
.hiw-right { grid-column: 3; padding-left: 32px; }
.hiw-empty { /* placeholder on opposite side */ }

/* Odd steps (1st, 3rd…): card on left, empty on right */
.hiw-step:nth-child(odd)  .hiw-card-slot { grid-column: 1; grid-row: 1; padding-right: 32px; padding-left: 0; }
.hiw-step:nth-child(odd)  .hiw-spacer    { grid-column: 3; grid-row: 1; }
/* Even steps (2nd, 4th…): card on right, empty on left */
.hiw-step:nth-child(even) .hiw-card-slot { grid-column: 3; grid-row: 1; padding-left: 32px; padding-right: 0; }
.hiw-step:nth-child(even) .hiw-spacer    { grid-column: 1; grid-row: 1; }

/* Card alignment */
.hiw-step:nth-child(odd)  .hiw-card { text-align: left; }
.hiw-step:nth-child(even) .hiw-card { text-align: left; }
.hiw-step:nth-child(even) .hiw-card-step { text-align: left; }

/* Content card */
.hiw-card {
    background: var(--surf);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 28px 32px;
    transition: border-color .2s, box-shadow .2s;
}
.hiw-card:hover {
    border-color: rgba(4,42,71,.35);
    box-shadow: var(--glow);
}
.hiw-card-step {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--red);
    margin-bottom: 8px;
}
.hiw-card-title {
    font-family: 'Bricolage Grotesque', system-ui, sans-serif;
    font-size: clamp(1.1rem, 2.2vw, 1.45rem);
    font-weight: 800;
    color: var(--ink);
    margin: 0 0 10px;
    line-height: 1.1;
    text-transform: uppercase;
    letter-spacing: -.02em;
}
.hiw-card-desc {
    font-size: 14px;
    color: var(--muted);
    line-height: 1.75;
    margin: 0;
}

/* Mobile: collapse to single column (left-aligned) */
@media (max-width: 700px) {
    .hiw-timeline::before { left: 28px; transform: none; }
    .hiw-step {
        grid-template-columns: 52px 1fr;
        grid-template-rows: auto;
    }
    .hiw-num { width: 52px; height: 52px; grid-column: 1; grid-row: 1; }
    .hiw-card-slot,
    .hiw-step:nth-child(odd)  .hiw-card-slot,
    .hiw-step:nth-child(even) .hiw-card-slot { grid-column: 2; grid-row: 1; padding-left: 16px; padding-right: 0; }
    .hiw-spacer { display: none; }
    .hiw-step:nth-child(even) .hiw-card { text-align: left; }
    .hiw-step:nth-child(even) .hiw-card-step { text-align: left; }
    .hiw-num-text { font-size: 13px; }
    .hiw-card { padding: 20px 18px; }
}


.hiw-intro{background:var(--bg);padding:58px 0 12px}
.hiw-intro-grid{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:56px;align-items:center}
.hiw-video{width:100%;min-width:0;border-radius:18px;overflow:hidden;background:#101114;border:1px solid var(--border);box-shadow:0 12px 35px rgba(0,0,0,.08)}
.hiw-video video{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#101114}
.hiw-video video:focus-visible{outline:3px solid var(--red);outline-offset:-3px}
.hiw-video-empty{aspect-ratio:16/9;display:grid;place-items:center;padding:28px;color:#fff;text-align:center}
.hiw-intro-copy{min-width:0}
.hiw-intro-eyebrow{display:flex;align-items:center;gap:9px;color:var(--red);font-size:11px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;margin-bottom:16px}
.hiw-intro-eyebrow::before{content:"";width:6px;height:6px;flex-shrink:0;border-radius:50%;background:currentColor}
.hiw-intro h2{font-family:'Bricolage Grotesque',system-ui,sans-serif;font-size:clamp(25px,2.4vw,36px);font-weight:800;line-height:1.12;letter-spacing:-.025em;text-transform:uppercase;color:var(--ink);margin:0 0 20px}
.hiw-intro-copy p{font-size:15px;line-height:1.8;color:var(--muted);margin:0 0 15px}.hiw-intro-copy p:last-child{margin-bottom:0}
@media(max-width:900px){.hiw-intro-grid{grid-template-columns:1fr;gap:28px}.hiw-intro{padding:36px 0 0}.hiw-intro h2{font-size:29px}.hiw-video{border-radius:13px}}


@media(max-width:600px){
    .hiw-cta-actions { flex-direction:column; width:100%; }
    .hiw-cta-actions a { width:100%; justify-content:center; box-sizing:border-box; }
}

.mdr-about-page{color:#092345}.mdr-about-title{padding:48px 0 38px;background:#f4f7fa;border-bottom:1px solid #dce5ed}.mdr-about-title .mdr-rule{height:5px;width:100px;margin:0 0 20px}.mdr-about-title h1{font-size:clamp(38px,5vw,62px);margin:0 0 14px}.mdr-about-title p{max-width:820px;font-size:16px;line-height:1.8;color:#647488}.mdr-about-page .hiw-intro{padding:58px 0 25px}.mdr-about-page .hiw-video img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}.mdr-about-page .hiw-intro h2,.mdr-about-page .hiw-card-title{font-family:Anton,Impact,sans-serif;font-weight:400;letter-spacing:0;line-height:1.3}.mdr-about-page .hiw-intro h2{font-size:35px}.mdr-about-page .hiw-intro-eyebrow{color:#07528b}.mdr-about-page .hiw-card-step{letter-spacing:.05em}.mdr-about-page .hiw-intro-copy p{font:15px/1.85 Arial,sans-serif;color:#647488}.mdr-about-page .hiw-intro-copy .mdr-btn{margin-top:12px}.mdr-about-timeline{padding:65px 0 72px}.mdr-about-page .hiw-card:hover{border-color:#07528b;box-shadow:0 8px 24px #042a4710}.mdr-about-page .hiw-step:hover .hiw-num{background:#fffbd2;border-color:#07528b}.mdr-about-values{background:#f3f6f8;padding:58px 0 68px}.mdr-about-values h2{font-size:38px;margin:0 0 30px}.mdr-values-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}.mdr-values-grid article{background:white;border:1px solid #dce5ed;padding:28px}.mdr-values-grid article>i{color:#07528b;font-size:25px;margin-bottom:20px}.mdr-values-grid h3{font-size:20px;color:#042a47;margin:0 0 12px}.mdr-values-grid p{font-size:14px;line-height:1.85;color:#647488;margin:0}.mdr-about-cta{padding:60px 0}.mdr-about-cta>.hiw-wrap{display:flex;align-items:center;justify-content:space-between;gap:38px}.mdr-about-cta h2{font-size:35px;margin:0 0 14px}.mdr-about-cta p{max-width:760px;font-size:15px;line-height:1.8;color:#647488}.mdr-about-cta .mdr-btn{white-space:nowrap}.mdr-about-stats{display:flex;flex-wrap:wrap;gap:30px;padding-top:40px;padding-bottom:15px}.mdr-about-stats>div{flex:1;text-align:center}.mdr-about-stats strong{display:block;font-size:35px;color:#07528b}.mdr-about-stats span{display:block;margin-top:7px;color:#647488;font-size:13px}
@media(max-width:760px){.mdr-values-grid{grid-template-columns:1fr}.mdr-about-cta>.hiw-wrap{flex-direction:column;align-items:flex-start}.mdr-about-title{padding:30px 0}.mdr-about-page .hiw-intro h2{font-size:29px}.mdr-about-timeline{padding:42px 0}.mdr-about-values h2,.mdr-about-cta h2{font-size:30px}}
