:root {
       --navy: #0d244d;
       --blue: #003e9d;
       --blue-lt: #1a55c0;
       --blue-pale: #e8f0fe;
       --blue-xlt: #f0f5ff;
       --white: #ffffff;
       --off: #f8fafd;
       --g200: #e2e8f0;
       --g400: #94a3b8;
       --g600: #475569;
       --g700: #334155;
       --green: #16a34a;
       --green-lt: #dcfce7;
       --amber: #d97706;
       --amber-lt: #fef3c7;
       --r: 12px;
   }

 
   /* ── SECTION WRAPPER ──────────────────────────────── */
   .hiw-section {
       padding: 96px 0;
       background: var(--white);
       position: relative;
       overflow: hidden;
   }

   /* faint dot grid backdrop */
   .hiw-section::before {
       content: '';
       position: absolute;
       inset: 0;
       background-image: radial-gradient(circle, #c7d8f5 1px, transparent 1px);
       background-size: 30px 30px;
       opacity: 0.3;
       pointer-events: none;
   }

   /* ── SECTION HEADER ───────────────────────────────── */
   .hiw-eyebrow {
       display: inline-flex;
       align-items: center;
       gap: 8px;
       font-size: 11px;
       font-weight: 700;
       letter-spacing: 2.5px;
       text-transform: uppercase;
       color: var(--blue);
       background: var(--blue-pale);
       border-radius: 50px;
       padding: 6px 18px;
       margin-bottom: 20px;
   }

   .hiw-title {
       font-family: 'Syne', sans-serif;
       font-size: clamp(32px, 4.5vw, 54px);
       font-weight: 800;
       letter-spacing: -1.5px;
       line-height: 1.0;
       color: var(--navy);
       margin-bottom: 16px;
   }

   .hiw-title span {
       -webkit-text-stroke: 2px var(--blue);
       color: transparent;
   }

   .hiw-subtitle {
       font-size: 17px;
       color: var(--g600);
       max-width: 520px;
       margin: 0 auto 64px;
       line-height: 1.7;
   }

   /* ── COLUMN HEADERS ───────────────────────────────── */
   .col-header {
       border-radius: var(--r);
       padding: 20px 24px;
       display: flex;
       align-items: center;
       gap: 14px;
       margin-bottom: 28px;
   }

   .col-header.customers {
       background: var(--navy);
   }

   .col-header.drivers {
       background: var(--blue);
   }

   .col-header-icon {
       width: 44px;
       height: 44px;
       border-radius: 10px;
       background: rgba(255, 255, 255, 0.12);
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 20px;
       color: var(--white);
       flex-shrink: 0;
   }

   .col-header-label {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 2.5px;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.5);
       margin-bottom: 2px;
   }

   .col-header-title {
       font-family: 'Syne', sans-serif;
       font-size: 18px;
       font-weight: 800;
       color: var(--white);
       letter-spacing: -0.3px;
   }

   /* ── STEP CARD ────────────────────────────────────── */
   .step-card {
       background: var(--white);
       border: 1.5px solid var(--g200);
       border-radius: var(--r);
       padding: 24px 22px;
       display: flex;
       align-items: flex-start;
       gap: 18px;
       position: relative;
       transition: border-color 0.22s, box-shadow 0.22s, transform 0.22s;
       margin-bottom: 14px;
   }

   .step-card:last-child {
       margin-bottom: 0;
   }

   .step-card:hover {
       border-color: var(--blue);
       box-shadow: 0 8px 28px rgba(0, 62, 157, 0.09);
       transform: translateX(4px);
   }

   /* coloured left accent strip */
   .step-card::before {
       content: '';
       position: absolute;
       left: 0;
       top: 16px;
       bottom: 16px;
       width: 3px;
       border-radius: 0 3px 3px 0;
       background: var(--g200);
       transition: background 0.22s;
   }

   .step-card:hover::before {
       background: var(--blue);
   }

   /* step number bubble */
   .step-num {
       flex-shrink: 0;
       width: 38px;
       height: 38px;
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-family: 'Syne', sans-serif;
       font-size: 15px;
       font-weight: 800;
   }

   .customers .step-num {
       background: var(--blue-pale);
       color: var(--blue);
   }

   .drivers .step-num {
       background: var(--blue-pale);
       color: var(--blue);
   }

   .step-body {}

   .step-title {
       font-family: 'Syne', sans-serif;
       font-size: 15px;
       font-weight: 700;
       color: var(--navy);
       margin-bottom: 4px;
       letter-spacing: -0.2px;
   }

   .step-desc {
       font-size: 13px;
       color: var(--g600);
       margin: 0;
       line-height: 1.55;
   }

   /* connector arrow between steps */
   .step-arrow {
       text-align: center;
       padding: 4px 0;
       color: var(--g200);
       font-size: 13px;
   }

   /* ── DIVIDER between columns (desktop) ────────────── */
   .col-divider {
       display: flex;
       flex-direction: column;
       align-items: center;
       justify-content: center;
       gap: 8px;
       padding: 0 12px;
   }

   .col-divider-line {
       flex: 1;
       width: 1px;
       background: var(--g200);
   }

   .col-divider-badge {
       width: 40px;
       height: 40px;
       background: var(--off);
       border: 1.5px solid var(--g200);
       border-radius: 50%;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 14px;
       color: var(--g400);
       flex-shrink: 0;
   }

   /* ── TRUST STATEMENT ──────────────────────────────── */
   .trust-block {
       margin-top: 64px;
       background: linear-gradient(135deg, var(--navy) 0%, var(--blue) 100%);
       border-radius: var(--r);
       padding: 44px 48px;
       display: flex;
       align-items: center;
       gap: 28px;
       position: relative;
       overflow: hidden;
   }

   .trust-block::before {
       content: '';
       position: absolute;
       top: -80px;
       right: -80px;
       width: 280px;
       height: 280px;
       border: 60px solid rgba(255, 255, 255, 0.05);
       border-radius: 50%;
       pointer-events: none;
   }

   .trust-block::after {
       content: '';
       position: absolute;
       bottom: -60px;
       left: 30%;
       width: 180px;
       height: 180px;
       background: rgba(255, 255, 255, 0.03);
       border-radius: 50%;
       pointer-events: none;
   }

   .trust-icon-wrap {
       flex-shrink: 0;
       width: 60px;
       height: 60px;
       background: rgba(255, 255, 255, 0.1);
       border-radius: 14px;
       display: flex;
       align-items: center;
       justify-content: center;
       font-size: 26px;
       color: var(--white);
       position: relative;
       z-index: 1;
   }

   .trust-text {
       position: relative;
       z-index: 1;
   }

   .trust-label {
       font-size: 10px;
       font-weight: 700;
       letter-spacing: 2.5px;
       text-transform: uppercase;
       color: rgba(255, 255, 255, 0.45);
       margin-bottom: 8px;
   }

   .trust-body {
       font-family: 'Syne', sans-serif;
       font-size: clamp(16px, 2vw, 20px);
       font-weight: 700;
       color: var(--white);
       letter-spacing: -0.3px;
       line-height: 1.4;
       margin: 0;
   }

   /* ── ANIMATIONS ───────────────────────────────────── */
   .fade-up {
       opacity: 0;
       transform: translateY(28px);
       transition: opacity 0.6s ease, transform 0.6s ease;
   }

   .fade-up.in {
       opacity: 1;
       transform: translateY(0);
   }

   @media (max-width: 767px) {
       .col-divider {
           display: none;
       }

       .hiw-section {
           padding: 64px 0;
       }

       .trust-block {
           flex-direction: column;
           text-align: center;
           padding: 32px 24px;
       }

       .trust-icon-wrap {
           margin: 0 auto;
       }
   }