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

.skip-to-content{position:absolute;top:-40px;left:0;background:#0032A0;color:#fff;padding:8px 16px;border-radius:0 0 6px 0;font-size:13px;font-weight:600;z-index:9999;text-decoration:none;transition:top .15s}.skip-to-content:focus{top:0}
/* ====== Extracted from index.html block 1 ====== */

    /* ========== RESET & GLOBAL ========== */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      font-family: "DM Sans", sans-serif !important;
    }
    /* Belt-and-braces: native <option> rendering can ignore inherited
       font-family from the universal rule above in some browsers, even
       with !important - confirmed repeatedly this session. Covers every
       select's dropdown options site-wide rather than needing a per-select
       fix each time a new one is added. */
    select option {
      font-family: "DM Sans", sans-serif !important;
    }

    body {
      background: #f0efed;
      color: #1c1c1c;
      padding: 1.5rem 0;
      overflow-x: hidden;
    }

    .page-wrap {
      width: 92%;
      max-width: 960px;
      margin: 0 auto;
      display: flex;
      flex-direction: column;
      gap: 1.5rem;
    }

    /* ========== HEADER ========== */
    .hdr {
      border-radius: 12px;
      overflow: hidden;
      position: relative;
      height: 90px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.5rem;
      background: linear-gradient(to right, #f5e8e8 0%, #faf2ee 25%, #ffffff 50%, #eef5f0 75%, #e8eef5 100%);
    }
    .hdr-band-top, .hdr-band-bottom {
      position: absolute;
      left: 0;
      right: 0;
      height: 4px;
    }
    .hdr-band-top { top: 0; background: linear-gradient(to right, #DA251D, #FFCD00 30%, #ffffff 50%, #007A4D 70%, #0032A0); }
    .hdr-band-bottom { bottom: 0; background: linear-gradient(to right, #0032A0, #007A4D 30%, #ffffff 50%, #FFCD00 70%, #DA251D); }
    .hdr-title {
      font-size: 20px;
      font-weight: 600;
      text-transform: uppercase;
      text-align: center;
      color: #1c1c1c;
      flex: 1;
    }
    .hdr-flag {
      height: 60px;
      width: auto;
      display: block;
      flex-shrink: 0;
      opacity: 0.85;
      filter: saturate(0.95);
      border-radius: 4px;
      transition: opacity .2s;
    }
    .hdr-flag:hover { opacity: 1; }

    /* ========== NAVIGATION ========== */
    .site-nav {
      background: #1c1c1c;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 1.5rem;
      min-height: 44px;
      border-radius: 10px;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .site-nav-left, .site-nav-right {
      display: flex;
      align-items: center;
      gap: 1rem;
      flex-wrap: wrap;
    }
    .site-nav a {
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 600;
      transition: border-bottom 0.2s;
    }
    .site-nav a.active {
      border-bottom: 2px solid #FFCD00;
      padding-bottom: 2px;
    }
    /* Login / My Account button -- always visible, right side of nav */
    .nav-login-btn {
      display: inline-flex !important;
      align-items: center;
      gap: .35rem;
      background: #FFCD00;
      color: #1a3e8c !important;
      font-size: 13px !important;
      font-weight: 700 !important;
      padding: .35rem .85rem;
      border-radius: 99px;
      text-decoration: none !important;
      border-bottom: none !important;
      white-space: nowrap;
      transition: background .15s, transform .1s;
    }
    .nav-login-btn:hover { background: #ffe033; transform: translateY(-1px); }
    .nav-login-btn.logged-in { background: #e8f9f3; color: #0f6e56 !important; border: 1.5px solid #6ee7b7; }
    #lang-selector {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      font-size: 12px;
      color: #1c1c1c;
      background-color: #fff;
      border: 0.5px solid rgba(255,255,255,0.15);
      border-radius: 6px;
      padding: 5px 26px 5px 10px;
      cursor: pointer;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%231a3e8c' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 6px center;
      background-size: 14px;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    #lang-selector option {
      font-family: "DM Sans", sans-serif;
    }
    #lang-selector:focus {
      outline: none;
      border-color: #1a3e8c;
      box-shadow: 0 0 0 3px rgba(26,62,140,0.15);
    }
    .site-nav a.admin-link {
      color: #aaa !important;
      font-size: 12px !important;
      font-weight: 500 !important;
      padding: 4px 8px !important;
      border: 0.5px solid #555 !important;
      border-radius: 4px !important;
      text-decoration: none !important;
    }
    .site-nav a.admin-link:hover { color: #fff !important; border-color: #888 !important; }
    select, button {
      cursor: pointer;
    }

    /* ========== CARDS ========== */
    .section-card {
      background: #fff;
      border-radius: 16px;
      border: 0.5px solid rgba(0,0,0,0.07);
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      overflow: hidden;
      transition: box-shadow .15s;
    }
    .section-card-accent-bar {
      height: 4px;
      background: linear-gradient(to right, #DA251D, #FFCD00 30%, #ffffff 50%, #007A4D 70%, #0032A0);
    }
    .section-card-header {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 1.25rem 1.75rem;
      border-bottom: 0.5px solid rgba(0,0,0,0.07);
    }
    .section-card-icon {
      width: 42px;
      height: 42px;
      border-radius: 10px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .section-card-icon.blue { background: linear-gradient(135deg,#1a3e8c,#0032A0); }
    .section-card-icon.red { background: linear-gradient(135deg,#c0241c,#e02d23); }
    .section-card-icon.green { background: linear-gradient(135deg,#0f6e56,#17916e); }
    .section-card-title { font-size: 17px; font-weight: 700; color: #1c1c1c; }
    .section-card-sub { font-size: 12px; color: #555; margin-top: 3px; }
    .section-card-body { padding: 1.5rem 1.75rem; }

    /* ========== STEP BADGES ========== */
    .step-badge {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.8px;
      text-transform: uppercase;
      color: #1a3e8c;
      background: #eef4ff;
      border-radius: 20px;
      padding: 3px 10px;
      margin-bottom: 1rem;
    }

    /* ========== TABS ========== */
    .tab-row {
      display: flex;
      gap: 12px;
      margin-bottom: 1.5rem;
    }
    .tab-btn {
      flex: 1;
      padding: 18px 12px 14px;
      border-radius: 12px;
      border: 2px solid #e2e8f0;
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      line-height: 1.3;
      box-shadow: 0 1px 4px rgba(0,0,0,.06);
    }
    .tab-btn .tab-icon { font-size: 22px; }
    .tab-btn .tab-desc { font-size: 11px; font-weight: 400; color: #94a3b8; }
    .tab-btn:hover { border-color: #1a3e8c; box-shadow: 0 2px 10px rgba(26,62,140,.12); }
    .tab-btn.active {
      background: linear-gradient(135deg, #1a3e8c, #0f6e56);
      color: #fff;
      border-color: transparent;
      box-shadow: 0 4px 16px rgba(26,62,140,.25);
    }
    .tab-btn.active .tab-desc { color: rgba(255,255,255,.75); }

    /* ========== DELIVERY METHOD CARDS ========== */
    .delivery-card { cursor:pointer; border:2px solid #e2e8f0; border-radius:10px; padding:1rem .75rem; text-align:center; transition:border-color .15s,background .15s,box-shadow .15s; background:#fff; }
    .delivery-card:hover { border-color:#1a3e8c; box-shadow:0 2px 8px rgba(26,62,140,.1); }
    .delivery-card.selected { border-color:#1a3e8c; background:#f0f4ff; }
    .delivery-card .dc-icon { font-size:22px; margin-bottom:.35rem; }
    .delivery-card .dc-title { font-weight:600; font-size:13px; color:#1e293b; }
    .delivery-card .dc-desc { font-size:11px; color:#64748b; margin-top:.25rem; line-height:1.4; }

    /* ========== FORM FIELDS ========== */
    .fields-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 1.25rem;
    }
    .field-group {
      display: flex;
      flex-direction: column;
      gap: 5px;
    }
    .field-label {
      font-size: 12px;
      font-weight: 500;
      color: #333;
    }
    .field-input {
      padding: 10px 12px;
      border-radius: 8px;
      border: 0.5px solid #ccc;
      background: #fff;
      width: 100%;
      font-size: 15px;
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      color: #1c1c1c;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .field-input:focus {
      outline: none;
      border-color: #1a3e8c;
      box-shadow: 0 0 0 3px rgba(26,62,140,0.1);
    }
    select.field-input {
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a3e8c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 10px center;
      background-size: 18px;
      padding-right: 36px;
      cursor: pointer;
    }
    select.field-input option {
      font-family: "DM Sans", sans-serif;
    }
    .quick-select {
      margin-bottom: 12px;
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .quick-select label {
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      font-weight: 600;
      color: #1c1c1c;
    }
    .quick-select select {
      padding: 6px 10px;
      border-radius: 8px;
      border: 0.5px solid #ccc;
      background: #fff;
      font-size: 13px;
      font-family: "DM Sans", sans-serif;
    }
    .quick-select select option {
      font-family: "DM Sans", sans-serif;
    }

    /* ========== TRACK STRIP ========== */
    .track-strip {
      display: flex;
      align-items: center;
      gap: 8px;
      background: #f4f7ff;
      border: 0.5px solid #c5d4f5;
      border-left: 3px solid #1a3e8c;
      border-radius: 10px;
      padding: 8px 12px;
      flex-wrap: wrap;
    }
    .track-strip span {
      font-size: 13px;
      font-weight: 600;
      color: #1a3e8c;
    }
    .track-strip input {
      flex: 1;
      min-width: 140px;
      padding: 6px 10px;
      border-radius: 7px;
      border: 0.5px solid #c5d4f5;
      font-size: 13px;
    }
    .track-strip button {
      padding: 6px 16px;
      border-radius: 7px;
      background: linear-gradient(135deg, #1a3e8c, #0f6e56);
      color: #fff;
      border: none;
      font-size: 13px;
      font-weight: 500;
    }

    /* ========== ALERTS ========== */
    .alert-box {
      border-radius: 8px;
      padding: 10px 14px;
      font-size: 13px;
      margin-bottom: 12px;
      display: flex;
      gap: 9px;
      background: #FAEEDA;
      border: 0.5px solid #EF9F27;
      color: #633806;
    }
    .hidden { display: none; }

    /* ========== RESULT PANEL ========== */
    .result-panel {
      background: #fff;
      border-radius: 14px;
      border: 0.5px solid #e2e0da;
      overflow: hidden;
      margin-bottom: 10px;
      --col-local-w: 140px;
      --col-zar-w: 110px;
    }
    .result-row {
      display: grid;
      grid-template-columns: 1fr var(--col-local-w) var(--col-zar-w);
      align-items: center;
      padding: 12px 20px;
      border-top: 0.5px solid #f2f2ef;
    }
    .result-row-weight .result-local, .result-row-weight .result-zar { font-size: 18px; font-weight: 800; }
    .result-local { color: #DA251D; text-align: right; font-weight: 700; }
    .result-zar { color: #1a3e8c; text-align: right; font-weight: 700; }
    .result-row-total { background: linear-gradient(to right, #f8f9fe, #f4fbf8); }
    .result-row-label {
      font-size: 12.5px;
      font-weight: 500;
      color: #444;
      display: flex;
      align-items: center;
      gap: 7px;
      flex-wrap: wrap;
    }
    .result-row-pct {
      display: inline-flex;
      align-items: center;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.3px;
      padding: 2px 6px;
      border-radius: 20px;
      white-space: nowrap;
    }
    .result-row-pct.heavy { background: #fdecea; border: 0.5px solid #f5c4c4; color: #c0241c; }
    .result-row-pct.oversize { background: #eef4ff; border: 0.5px solid #c5d8f8; color: #1a3e8c; }
    .result-col-headers {
      display: grid;
      grid-template-columns: 1fr var(--col-local-w) var(--col-zar-w);
      padding: 7px 20px 5px;
      background: #fafaf8;
      border-bottom: 0.5px solid #ededea;
    }
    .result-col-hdr {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 1px;
      color: #bbb;
      text-align: right;
    }
    .result-col-hdr:first-child { text-align: left; }
    .result-weight-badge { font-size: 30px; font-weight: 700; color: #0f6e56; }
    .result-group-hdr {
      padding: 9px 20px 3px;
      font-size: 10.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
      color: #94a3b8;
      border-top: 0.5px solid #f2f2ef;
      background: #fafaf8;
    }
    .result-group-hdr:first-of-type { border-top: none; }
    .result-weight-method { font-size: 11px; color: #888; }

    /* ========== FORMULA NOTE (card-per-section, colour-coded) ========== */
    /* The outer .formula-note is a transparent flow wrapper only.         */
    /* Each .formula-section-hdr opens a new visually distinct card.      */
    /* Each section gets its own colour identity so they read as clearly   */
    /* separate blocks at a glance, not just separated lines.              */
    .formula-note {
      font-size: 13px;
      font-weight: 500;
      color: #1a3e8c;
      margin-bottom: 1rem;
    }

    /* --- Base card structure (all sections share this) --- */
    .formula-section-hdr {
      margin-top: 10px;
      border-radius: 10px 10px 0 0;
      border-top: 1px solid transparent;
      border-left: 4px solid transparent; /* coloured per-section below */
      border-right: 1px solid transparent;
      border-bottom: none;
      padding: 9px 14px 8px;
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .formula-section-hdr:first-child { margin-top: 0; }
    .formula-line {
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 12px;
      padding: 7px 14px 7px 18px; /* 18px left = 14px + 4px border compensation */
      border-left: 4px solid transparent;
      border-right: 1px solid transparent;
      border-bottom: 1px solid rgba(0,0,0,.04);
      background: #fff;
      line-height: 1.4;
    }
    .formula-line:last-child {
      border-bottom: 1px solid transparent;
      border-radius: 0 0 10px 10px;
    }
    .formula-label { color: #55606e; flex: 1 1 auto; min-width: 0; }
    .formula-label small { display: block; font-size: 10.5px; color: #9aa4b1; font-weight: 400; margin-top: 1px; }
    .formula-value { flex: 0 0 auto; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; color: #1a3e8c; font-weight: 600; }
    .formula-line strong { color: #1a3e8c; }

    /* === SECTION 1: Package Details -- slate/neutral === */
    .fsc-details {
      background: #f0f4f8;
      color: #3d5166;
      border-color: #8eaac5 #dde6ef #dde6ef #8eaac5;
      box-shadow: inset 0 -1.5px 0 0 #c8d8e8;
    }
    .fsc-details + .formula-line,
    .fsc-details ~ .formula-line:not(.fsc-freight ~ .formula-line):not(.fsc-declared ~ .formula-line):not(.fsc-customs ~ .formula-line):not(.fsc-total ~ .formula-line) {
      border-left-color: #8eaac5;
      border-right-color: #dde6ef;
      border-bottom-color: #eaf0f6;
    }

    /* === SECTION 2: Freight Costing -- blue === */
    .fsc-freight {
      background: #eff6ff;
      color: #1e40af;
      border-color: #3b82f6 #bfdbfe #bfdbfe #3b82f6;
      box-shadow: inset 0 -1.5px 0 0 #93c5fd;
    }

    /* === SECTION 3: Declared Value & Charges -- amber === */
    .fsc-declared {
      background: #fffbeb;
      color: #92400e;
      border-color: #f59e0b #fde68a #fde68a #f59e0b;
      box-shadow: inset 0 -1.5px 0 0 #fcd34d;
    }

    /* === SECTION 4: Customs Estimate -- purple/informational === */
    .fsc-customs {
      background: #f5f3ff;
      color: #5b21b6;
      border-color: #8b5cf6 #ddd6fe #ddd6fe #8b5cf6;
      box-shadow: inset 0 -1.5px 0 0 #c4b5fd;
    }

    /* === SECTION 5: Freight Charge (was "Total") -- green, larger === */
    .fsc-total {
      background: #ecfdf5;
      color: #065f46;
      border-color: #10b981 #a7f3d0 #a7f3d0 #10b981;
      box-shadow: inset 0 -1.5px 0 0 #6ee7b7;
      font-size: 12px;
    }

    /* Lines inherit their section's left border colour via data attribute */
    /* Applied in JS by adding data-section to each line */
    .formula-line[data-s="details"]  { border-left-color: #8eaac5;  border-right-color: #dde6ef;  border-bottom-color: #eaf0f6;  }
    .formula-line[data-s="freight"]  { border-left-color: #3b82f6;  border-right-color: #bfdbfe;  border-bottom-color: #eff6ff;  }
    .formula-line[data-s="declared"] { border-left-color: #f59e0b;  border-right-color: #fde68a;  border-bottom-color: #fffbeb;  }
    .formula-line[data-s="customs"]  { border-left-color: #8b5cf6;  border-right-color: #ddd6fe;  border-bottom-color: #f5f3ff;  }
    .formula-line[data-s="total"]    { border-left-color: #10b981;  border-right-color: #a7f3d0;  border-bottom-color: #ecfdf5;  }
    .formula-line[data-s="total"]:last-child { border-bottom-color: #a7f3d0; }

    /* Fact lines (grey text, slightly tinted bg) */
    .formula-line-fact { background: rgba(0,0,0,.018); }
    .formula-line-fact .formula-label, .formula-line-fact .formula-value { color: #7c8794; font-weight: 500; }

    /* Subtotal lines (bold) */
    .formula-line-subtotal .formula-label, .formula-line-subtotal .formula-value { font-weight: 700; }
    .formula-line[data-s="freight"].formula-line-subtotal  .formula-value { color: #1e40af; }
    .formula-line[data-s="declared"].formula-line-subtotal .formula-value { color: #92400e; }
    .formula-line[data-s="customs"].formula-line-subtotal  .formula-value { color: #5b21b6; }

    /* The grand total line -- green, larger */
    .formula-line-total {
      background: #d1fae5 !important;
      border-top: 1px solid #6ee7b7 !important;
    }
    .formula-line-total .formula-label,
    .formula-line-total .formula-value {
      font-weight: 800;
      color: #065f46;
      font-size: 14px;
    }

    /* Inactive lines (e.g. insurance not selected) */
    .formula-line-inactive .formula-label,
    .formula-line-inactive .formula-value { color: #b3bcc6; font-weight: 400; }
    /* ========== MULTI-PACKAGE BOOKING FORM ========== */
    .mpkg-section-hdr {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .8px;
      color: #4a6080;
      margin-bottom: .6rem;
      padding-bottom: .35rem;
      border-bottom: 1.5px solid #e8eef5;
    }
    .pkg-card {
      border: 1px solid #dde6ef;
      border-radius: 10px;
      margin-bottom: .75rem;
      overflow: hidden;
    }
    .pkg-card-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      padding: .65rem 1rem;
      background: #f0f5fa;
      cursor: pointer;
      user-select: none;
    }
    .pkg-card-header-left { display: flex; align-items: center; gap: .65rem; }
    .pkg-seq-badge {
      width: 26px; height: 26px; border-radius: 50%;
      background: #1a3e8c; color: #fff;
      font-size: 12px; font-weight: 700;
      display: flex; align-items: center; justify-content: center; flex-shrink: 0;
    }
    .pkg-header-name { font-size: 13px; font-weight: 600; color: #1a3e8c; }
    .pkg-header-price { font-size: 12px; color: #0f6e56; font-weight: 600; }
    .pkg-card-toggle { font-size: 18px; color: #94a3b8; line-height: 1; transition: transform .2s; }
    .pkg-card.collapsed .pkg-card-toggle { transform: rotate(-90deg); }
    .pkg-card-body { padding: 1rem; background: #fff; border-top: 1px solid #e8eef5; }
    .pkg-card.collapsed .pkg-card-body { display: none; }
    .pkg-dims-row {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: .5rem;
      margin-bottom: .75rem;
    }
    .pkg-dims-row .bfield { margin-bottom: 0; }
    .pkg-dims-row .bfield-label { font-size: 11px; }
    .pkg-dims-copy-note {
      font-size: 11px; color: #94a3b8;
      margin-bottom: .75rem; padding: .3rem .6rem;
      background: #f7f9fc; border-radius: 5px; border-left: 2px solid #bfd6f0;
    }
    .pkg-price-strip {
      margin-top: .75rem; padding: .6rem .9rem;
      background: #f4f8fd; border-radius: 8px; border: 1px solid #dde6ef;
      display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
    }
    .pkg-price-strip-label { font-size: 12px; color: #475569; font-weight: 500; }
    .pkg-price-strip-zar { font-size: 15px; font-weight: 800; color: #1a3e8c; }
    .pkg-price-strip-vnd { font-size: 11.5px; color: #64748b; }
    .pkg-remove-btn {
      font-size: 11.5px; color: #b91c1c; background: none; border: none;
      cursor: pointer; padding: 0; font-family: inherit; text-decoration: underline; margin-top: .5rem;
    }
    .pkg-remove-btn:hover { color: #7f1d1d; }
    .mpkg-add-btn {
      display: inline-flex; align-items: center; gap: .4rem;
      font-size: 13px; font-weight: 600; color: #1a3e8c;
      background: #fff; border: 1.5px solid #1a3e8c;
      border-radius: 99px; padding: .45rem 1rem;
      cursor: pointer; font-family: inherit; transition: background .15s;
    }
    .mpkg-add-btn:hover { background: #eff6ff; }
    .mpkg-add-btn:disabled { opacity: .45; cursor: not-allowed; }
    .mpkg-order-total {
      margin-top: 1rem; padding: .9rem 1.1rem;
      background: linear-gradient(to right, #f8f9fe, #f4fbf8);
      border: 1px solid #d0dce9; border-radius: 10px; margin-bottom: .75rem;
    }
    /* ========== END MULTI-PACKAGE ========== */
    .delivery-estimate {
      font-size: 12.5px;
      background: #f0f6ff;
      border: 0.5px solid #d0e4f8;
      border-left: 3px solid #0032A0;
      border-radius: 6px;
      padding: 10px 14px;
      margin-bottom: 1rem;
      color: #1a3e8c;
      line-height: 1.5;
    }

    /* ========== INSURANCE GROUP ========== */
    .insurance-group {
      margin-top: 1rem;
    }
    .insurance-title {
      font-size: 11px;
      font-weight: 700;
      text-transform: uppercase;
      color: #555;
      margin-bottom: 6px;
    }
    .insurance-checkbox-label {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      cursor: pointer;
    }

    /* ========== COMPLIANCE ACCORDIONS ========== */
    .compliance-accordion {
      margin-bottom: 12px;
      background: #fff;
      border-radius: 12px;
      border: 0.5px solid #e9edf2;
      overflow: hidden;
    }
    .compliance-accordion-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 16px 20px;
      cursor: pointer;
      background: white;
      position: relative;
    }
    .compliance-accordion-header::before {
      content: '';
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
    }
    .compliance-accordion.prohibited .compliance-accordion-header::before { background: #DA251D; }
    .compliance-accordion.restricted .compliance-accordion-header::before  { background: #FFCD00; }
    .compliance-accordion.permitted .compliance-accordion-header::before   { background: #0f6e56; }
    .accordion-title { font-weight: 600; font-size: 15px; color: #1f2a3e; }
    .accordion-sub { font-size: 12px; color: #6c7a8e; margin-top: 3px; }
    .toggle-icon {
      width: 26px;
      height: 26px;
      border-radius: 30px;
      background: #f1f5f9;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }
    .compliance-accordion-body {
      display: none;
      background: #f8fafc;
      padding: 16px 20px;
      border-top: 0.5px solid #eef2f6;
      font-size: 13px;
    }
    .compliance-accordion-body.open { display: block; }
    .item-list { list-style: none; }
    .item-list li { padding: 8px 0; border-bottom: 0.5px solid #eef2f6; }
    .item-list li:last-child { border-bottom: none; }

    /* ========== DECLARATION QUESTIONS ========== */
    .declaration-question {
      background: #f8fafc;
      border-radius: 10px;
      padding: 12px 16px;
      margin-bottom: 12px;
      border: 0.5px solid #eef2f6;
    }
    .declaration-question label {
      font-weight: 600;
      font-size: 13px;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
    }
    .declaration-question input[type="checkbox"] {
      margin-top: 2px;
      width: 16px;
      height: 16px;
      accent-color: #0f6e56;
    }
    .declaration-warning {
      background: #fff8e7;
      border-left: 4px solid #f0b429;
      padding: 10px 14px;
      border-radius: 8px;
      margin: 10px 0;
      font-size: 13px;
      color: #8a6e2d;
    }
    .country-specific-warning {
      background: #fef2f0;
      border-left: 4px solid #c0241c;
      padding: 10px 14px;
      border-radius: 8px;
      margin: 12px 0;
      font-size: 13px;
    }
    .declaration-nested {
      margin-top: 8px;
      margin-left: 26px;
      padding-left: 12px;
      border-left: 2px solid #ddd;
    }

    /* ========== ITEMISED DECLARATION LINES ========== */
    .item-line {
      background: #fff;
      border: 0.5px solid #e0e6f5;
      border-radius: 12px;
      padding: 12px 16px;
      margin-bottom: 12px;
    }
    .item-line-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      font-weight: 600;
      font-size: 13px;
    }
    .item-row {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 16px;
      margin-bottom: 8px;
    }
    .item-desc-field { flex: 2; min-width: 150px; }
    .item-value-field { flex: 1; min-width: 120px; }
    .item-type-field {
      flex: 3;
      min-width: 280px;
      display: flex;
      gap: 20px;
      align-items: center;
      flex-wrap: wrap;
    }
    .item-type-field label {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 500;
      cursor: pointer;
      white-space: nowrap;
    }
    .item-type-field input { margin: 0; width: 16px; height: 16px; accent-color: #0f6e56; }
    .add-item-btn {
      background: #eef4ff;
      border: none;
      padding: 8px 16px;
      border-radius: 8px;
      font-weight: 500;
      cursor: pointer;
      margin: 8px 0;
      font-size: 13px;
    }
    .btn-secondary {
      background: #eef4ff;
      border: none;
      padding: 4px 12px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 12px;
    }
    .upload-area {
      border: 1.5px dashed #ccc;
      border-radius: 10px;
      padding: 10px;
      text-align: center;
      margin-top: 8px;
      cursor: pointer;
      font-size: 12px;
    }
    .upload-area:hover { background: #f4f7ff; }
    .file-list { font-size: 11px; margin-top: 4px; color: #0f6e56; }

    /* ========== COMPLIANCE CHECKBOXES ========== */
    .compliance-checkbox-group { margin-top: 0.5rem; }
    .compliance-checkbox-item {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      margin-bottom: 12px;
    }
    .compliance-checkbox-item input {
      margin-top: 2px;
      width: 16px;
      height: 16px;
      accent-color: #0f6e56;
    }
    .compliance-checkbox-item label {
      font-size: 13px;
      line-height: 1.55;
      cursor: pointer;
    }

    /* ========== TRANSFER BANNER ========== */
    .transfer-banner {
      margin-top: 1.5rem;
      background: linear-gradient(135deg, #f8fafc 0%, #ffffff 100%);
      border-radius: 20px;
      border: 1px solid #e2edf2;
      box-shadow: 0 8px 20px rgba(0,0,0,0.05);
      overflow: hidden;
    }
    .transfer-banner-title {
      background: #eef4ff;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 700;
      color: #1a3e8c;
      border-bottom: 1px solid #c5d8f8;
    }
    .transfer-banner-content { padding: 1.5rem; }
    .transfer-summary {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 24px;
      margin-bottom: 1.5rem;
    }
    .summary-item {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 6px 0;
      border-bottom: 1px dashed #e2e8f0;
    }
    .summary-label { font-size: 13px; font-weight: 600; color: #334155; }
    .summary-value { font-size: 14px; font-weight: 700; color: #1e293b; }
    .summary-value.deposit { color: #0f6e56; }
    .summary-item-highlight {
      display: flex;
      justify-content: space-between;
      align-items: baseline;
      padding: 10px 14px;
      border-radius: 8px;
      margin: 8px 0;
      border-bottom: none;
    }
    .summary-item-highlight.deposit-highlight { background: #fffbeb; border: 1.5px solid #fbbf24; }
    .summary-item-highlight.deposit-highlight .summary-label { color: #92400e; font-size: 13.5px; }
    .summary-item-highlight.deposit-highlight .summary-value { color: #92400e; font-size: 16px; }
    .summary-item-highlight.total-highlight { background: #f0fdf4; border: 1.5px solid #4ade80; }
    .summary-item-highlight.total-highlight .summary-label { color: #166534; font-size: 14px; font-weight: 700; }
    .summary-item-highlight.total-highlight .summary-value { color: #166534; font-size: 19px; }
    .refund-note { font-size: 11px; color: #0f6e56; margin-left: 6px; font-weight: normal; }
    .result-row-desc { display: block; font-size: 11px; color: #94a3b8; font-weight: 400; line-height: 1.5; margin-top: 2px; }
    .transfer-btn-row {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    .transfer-btn {
      padding: 10px 24px;
      border-radius: 40px;
      border: none;
      font-size: 13px;
      font-weight: 600;
      cursor: pointer;
    }
    .transfer-btn.yes { background: linear-gradient(135deg, #1a3e8c, #0f6e56); color: #fff; }
    .transfer-btn.no { background: #eef4ff; color: #1a3e8c; border: 0.5px solid #c5d8f8; }
    .book-btn {
      width: 100%;
      padding: 14px;
      border-radius: 10px;
      border: none;
      font-size: 15px;
      font-weight: 600;
      cursor: pointer;
      margin-top: 1rem;
    }
    .book-btn.enabled { background: linear-gradient(135deg, #1a3e8c, #0f6e56); color: #fff; }
    .book-btn.disabled { background: #f0efed; color: #888; border: 0.5px solid #ddd; cursor: not-allowed; }

    /* ========== BOOKING FORM ========== */
    .booking-cols {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
      margin-bottom: 1rem;
    }
    .booking-col-panel {
      background: #f8f9fe;
      border-radius: 12px;
      border: 0.5px solid #e0e6f5;
      padding: 1rem;
    }
    .booking-col-panel.receiver-panel { background: #f6fbf8; border-color: #c8e6d4; }
    .bfield {
      margin-bottom: 8px;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .bfield-label {
      font-size: 11px;
      font-weight: 600;
      text-transform: uppercase;
      color: #444;
    }
    .bfield-input {
      padding: 7px 10px;
      border-radius: 8px;
      border: 0.5px solid #ddd;
      width: 100%;
      font-size: 13px;
      font-family: "DM Sans", sans-serif;
      font-weight: 500;
      color: #1c1c1c;
      transition: border-color 0.15s, box-shadow 0.15s;
    }
    .bfield-input:focus {
      outline: none;
      border-color: #1a3e8c;
      box-shadow: 0 0 0 3px rgba(26,62,140,0.1);
    }
    select.bfield-input {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%231a3e8c' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 8px center;
      background-size: 16px;
      padding-right: 30px;
      cursor: pointer;
    }
    .submit-btn {
      width: 100%;
      padding: 15px;
      border-radius: 12px;
      background: linear-gradient(135deg, #1a3e8c, #0f6e56);
      color: #fff;
      border: none;
      font-weight: 600;
      cursor: pointer;
      margin-top: 1rem;
      font-size: 15px;
      transition: opacity .15s, transform .12s;
    }
    .submit-btn:disabled {
      opacity: 0.6;
      cursor: not-allowed;
    }
    .booking-footer-note {
      font-size: 11px;
      color: #555;
      text-align: center;
      margin-top: 12px;
    }
    .site-footer {
      text-align: center;
      font-size: 12px;
      color: #666;
      padding: 1.25rem 1rem;
      background: #fff;
      border-radius: 12px;
      border: 0.5px solid rgba(0,0,0,0.07);
      line-height: 1.8;
    }
    .site-footer a { color: #1a3e8c; text-decoration: none; }
    .site-footer a:hover { text-decoration: underline; }
    .footer-address { color: #444; font-size: 11.5px; margin-bottom: 4px; }
    .footer-links { margin-bottom: 4px; }
    .footer-sep { margin: 0 8px; color: #ccc; }
    /* ========== BOOKING PANEL HEADER ========== */
    .booking-sub-header {
      font-size: 13px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.6px;
      color: #1a3e8c;
      padding-bottom: 10px;
      margin-bottom: 10px;
      border-bottom: 2px solid #eef4ff;
    }

    /* ========== ADDRESS CASCADE ========== */
    .addr-helper { font-size: 11px; color: #0f6e56; margin-top: 3px; font-style: italic; }
    .bfield select.bfield-input { background-color: #fff; }

    /* ========== RESPONSIVE ========== */
    @media (max-width: 900px) {
      .fields-grid { grid-template-columns: 1fr; }
      .booking-cols { grid-template-columns: 1fr !important; }
      .result-grid { grid-template-columns: 1fr !important; }
      .tab-btn { font-size: 13px; padding: 11px 10px; }
    }
    @media (max-width: 700px) {
      .page-wrap { width: 97%; }
      .item-row { flex-direction: column; align-items: stretch; gap: 10px; }
      .site-nav { flex-wrap: nowrap; overflow-x: auto; padding: 0 .75rem; min-height: 44px; }
      .site-nav a { font-size: 12px; white-space: nowrap; }
      .booking-cols { grid-template-columns: 1fr; }
      .transfer-summary { grid-template-columns: 1fr; }
      .fields-grid { grid-template-columns: 1fr; }
    }
    @media (max-width: 480px) {
      .tab-btn { font-size: 12px; padding: 10px 8px; }
      .result-weight-badge { font-size: 24px; }
    }
  
    /* -- WhatsApp floating button -- */
    .wa-btn {
      position: fixed;
      bottom: 1.5rem;
      right: 1.5rem;
      width: 54px;
      height: 54px;
      border-radius: 50%;
      background: #25D366;
      box-shadow: 0 4px 16px rgba(37,211,102,.45);
      display: flex;
      align-items: center;
      justify-content: center;
      text-decoration: none;
      z-index: 9999;
      transition: transform .15s, box-shadow .15s;
    }
    .wa-btn:hover { transform: scale(1.08); box-shadow: 0 6px 24px rgba(37,211,102,.55); }
    .wa-btn svg { width: 30px; height: 30px; fill: #fff; }
    .wa-tooltip {
      position: fixed;
      bottom: 4.5rem;
      right: 5rem;
      background: #1e293b;
      color: #fff;
      font-size: 12px;
      font-weight: 500;
      padding: 6px 12px;
      border-radius: 8px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity .15s;
      z-index: 9998;
    }
    .wa-tooltip::after {
      content: '';
      position: absolute;
      right: -6px;
      top: 50%;
      transform: translateY(-50%);
      border: 6px solid transparent;
      border-left-color: #1e293b;
      border-right: none;
    }
    .wa-btn:hover + .wa-tooltip, .wa-btn:focus + .wa-tooltip { opacity: 1; }
    @media (max-width: 480px) {
      .wa-btn { bottom: 1rem; right: 1rem; width: 48px; height: 48px; }
      .wa-tooltip { display: none; }
    }
  
    /* -- Sticky live result bar (always visible at top of calculator) -- */
    .calc-sticky-bar {
      background: linear-gradient(135deg, #eaf1fd 0%, #e9f8f2 100%);
      border: 1px solid rgba(26,62,140,0.12);
      border-radius: 10px;
      padding: 10px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
      box-shadow: 0 2px 10px rgba(15,31,61,0.06);
      flex-wrap: wrap;
    }
    .sticky-kg {
      font-size: 1.4rem;
      font-weight: 800;
      color: #92400e;
      white-space: nowrap;
    }
    .sticky-label {
      font-size: 0.7rem;
      color: #64748b;
      text-transform: uppercase;
      letter-spacing: .06em;
      margin-bottom: 1px;
    }
    .sticky-amount {
      text-align: right;
    }
    .sticky-vnd {
      font-size: 1rem;
      font-weight: 700;
      color: #c0241c;
      white-space: nowrap;
    }
    .sticky-zar {
      font-size: 1rem;
      font-weight: 700;
      color: #0f1f3d;
      white-space: nowrap;
    }
    .sticky-method {
      font-size: 0.72rem;
      color: #64748b;
      margin-top: 2px;
    }
    @media (max-width: 480px) {
      .sticky-kg { font-size: 1.1rem; }
      .sticky-vnd, .sticky-zar { font-size: 0.85rem; }
    }
    
    /* ========== EXTRACTED INLINE STYLES ========== */

    /* display:none utility (was inline on 12 elements) */
    .d-none { display: none; }

    /* Result panel: discount value text */
    .text-positive { color: #0f6e56; font-weight: 600; }

    /* DHL comparator widget */
    .dhl-widget-inner {
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 0.5rem;
    }
    .dhl-label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #92660a;
    }
    .dhl-price {
      font-size: 1.35rem;
      font-weight: 800;
      color: #1e293b;
    }
    .dhl-saving {
      margin-top: 0.5rem;
      font-size: 0.8rem;
      color: #166534;
    }
    .dhl-note {
      margin-top: 0.35rem;
      font-size: 0.73rem;
      color: #92660a;
    }
    .our-label {
      font-size: 0.72rem;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #0f6e56;
    }
    .our-price {
      font-size: 1.35rem;
      font-weight: 800;
      color: #0f6e56;
    }
    .col-right { text-align: right; }

    /* Booking form section spacing */
    .form-section-gap { margin-top: 1.5rem; }
    .form-section-gap-sm { margin-top: 1rem; }

    /* Discount / voucher section */
    .voucher-section {
      margin: 1.25rem 0;
      padding: 1rem 1.25rem;
      background: #f8faff;
      border-radius: 8px;
      border: 0.5px solid #e2e8f0;
    }
    .voucher-section-title {
      font-size: 13px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: .6rem;
    }
    .voucher-login-prompt {
      font-size: 12.5px;
      color: #475569;
      margin-bottom: .75rem;
      padding: .6rem .85rem;
      background: #eff6ff;
      border-radius: 6px;
      border: 0.5px solid #bfdbfe;
    }
    .voucher-email-applied {
      font-size: 12.5px;
      color: #0f6e56;
      margin-bottom: .75rem;
      padding: .6rem .85rem;
      background: #f0fdf4;
      border-radius: 6px;
      border: 0.5px solid #bbf7d0;
    }
    .voucher-input-row {
      display: flex;
      gap: .5rem;
      align-items: flex-start;
      flex-wrap: wrap;
    }
    .voucher-input-wrap { flex: 1; min-width: 180px; }
    .voucher-code-field {
      width: 100%;
      padding: .5rem .75rem;
      font-size: 13px;
      border: 0.5px solid #e2e8f0;
      border-radius: 6px;
      text-transform: uppercase;
      font-family: inherit;
    }
    .voucher-apply-btn {
      padding: .5rem 1.1rem;
      font-size: 13px;
      border: 0.5px solid #1a3e8c;
      background: #1a3e8c;
      color: #fff;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
      white-space: nowrap;
    }
    .voucher-remove-btn {
      padding: .5rem 1rem;
      font-size: 13px;
      border: 0.5px solid #dc2626;
      background: #fff;
      color: #dc2626;
      border-radius: 6px;
      cursor: pointer;
      font-family: inherit;
    }
    .voucher-msg {
      margin-top: .5rem;
      font-size: 12px;
      min-height: 1.2em;
    }

    /* Footer copyright line */
    .footer-copy {
      font-size: 10px;
      color: #bbb;
      margin-top: 4px;
      letter-spacing: .04em;
    }

    /* Loyalty discount link */
    .loyalty-link { color: #0032A0; text-decoration: underline; }

  
    /* Utility: narrow width + margin */
    .track-result-wrap { width: 100%; margin-top: 6px; }

    /* Result rows hidden by default until calculator fires */
    .result-initially-hidden { display: none; }

    /* DHL comparator card */
    .dhl-comparator-card {
      margin-top: 1rem;
      background: #fff9e6;
      border: 1px solid #f0d060;
      border-left: 4px solid #f5c400;
      border-radius: 8px;
      padding: 0.85rem 1rem;
    }

    /* Address form divider line */
    .addr-section-divider {
      border-top: 1px solid #eef4ff;
      margin: 10px 0 8px;
    }

    /* Booking sub-section label */
    .booking-sublabel {
      font-size: 13px;
      font-weight: 500;
    }

  
    /* ========== LANDING HERO ========== */
    /* ========== HERO ========== */
    .hero-section {
      background: #fff;
      border-radius: 16px;
      border: 0.5px solid rgba(0,0,0,0.07);
      box-shadow: 0 2px 20px rgba(0,0,0,0.06);
      overflow: hidden;
      margin-bottom: 1.25rem;
    }
    .hero-inner {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.5rem;
      padding: 1.25rem 1.75rem;
      flex-wrap: wrap;
    }
    .hero-text { flex: 1; min-width: 0; }
    .hero-eyebrow {
      font-size: 10px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .1em;
      color: #0032A0;
      margin-bottom: .35rem;
    }
    .hero-headline {
      font-size: 1.35rem;
      font-weight: 800;
      color: #0f1f3d;
      line-height: 1.25;
      margin: 0 0 .45rem;
    }
    .hero-highlight { color: #0032A0; }
    .hero-sub {
      font-size: .85rem;
      color: #475569;
      line-height: 1.55;
      margin: 0;
    }
    .hero-actions {
      display: flex;
      gap: .6rem;
      align-items: center;
      flex-shrink: 0;
      flex-wrap: wrap;
    }
    .hero-cta-btn {
      display: inline-block;
      background: linear-gradient(135deg, #1a3e8c, #0032A0);
      color: #fff;
      text-decoration: none;
      font-weight: 700;
      font-size: .85rem;
      padding: .6rem 1.25rem;
      border-radius: 8px;
      white-space: nowrap;
      transition: opacity .15s, transform .12s;
    }
    .hero-cta-btn:hover { opacity: .88; }
    .hero-cta-secondary {
      display: inline-block;
      background: #fff;
      color: #0032A0;
      text-decoration: none;
      font-weight: 600;
      font-size: .85rem;
      padding: .6rem 1.25rem;
      border-radius: 8px;
      border: 1.5px solid #0032A0;
      white-space: nowrap;
      transition: background .15s;
    }
    .hero-cta-secondary:hover { background: #eff6ff; }
    @media (max-width: 600px) {
      .hero-inner { padding: 1rem 1.25rem; gap: 1rem; }
      .hero-headline { font-size: 1.15rem; }
      .hero-actions { width: 100%; }
      .hero-cta-btn, .hero-cta-secondary { flex: 1; text-align: center; font-size: .82rem; padding: .55rem 1rem; }
    }

/* ====== Extracted from index.html block 2 ====== */

  #wa-float:hover { transform: scale(1.1); }
  @media (max-width:600px) { #wa-float { bottom:1rem;right:1rem;width:46px;height:46px; } }


    /* ========== FAQ ========== */
    .faq-section {
      margin-bottom: 1.25rem;
    }
    .faq-heading {
      font-size: 1.15rem;
      font-weight: 700;
      color: #0f1f3d;
      margin-bottom: .1rem;
    }
    .faq-sub {
      font-size: .82rem;
      color: #64748b;
      margin-bottom: 1rem;
    }
    .faq-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: .5rem;
    }
    .faq-item {
      background: #fff;
      border: .5px solid #e2e8f0;
      border-radius: 10px;
      overflow: hidden;
    }
    .faq-question {
      width: 100%;
      text-align: left;
      padding: .85rem 1rem;
      font-size: .88rem;
      font-weight: 600;
      color: #1e293b;
      background: none;
      border: none;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: .5rem;
      font-family: inherit;
      line-height: 1.4;
    }
    .faq-question:hover { background: #f8fafc; }
    .faq-chevron {
      flex-shrink: 0;
      width: 16px;
      height: 16px;
      color: #94a3b8;
      transition: transform .2s;
    }
    .faq-item.open .faq-chevron { transform: rotate(180deg); }
    .faq-answer {
      display: none;
      padding: 0 1rem .85rem;
      font-size: .84rem;
      color: #475569;
      line-height: 1.65;
      border-top: .5px solid #f1f5f9;
    }
    .faq-item.open .faq-answer { display: block; animation: faqFadeIn .18s ease; }
@keyframes faqFadeIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
    .faq-answer a { color: #0032A0; }

    @media (max-width: 768px) {
      .faq-grid { grid-template-columns: 1fr; }
    }

  
    /* ========== SOCIAL LINKS IN FOOTER ========== */
    .footer-social {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: .6rem;
      margin-bottom: .5rem;
    }
    .footer-social a {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: #f0efed;
      border: .5px solid #e2e8f0;
      color: #475569;
      text-decoration: none;
      transition: background .15s, color .15s;
      flex-shrink: 0;
    }
    .footer-social a:hover { background: #0032A0; color: #fff; border-color: #0032A0; }
    .footer-social a svg { display: block; }

  
    /* ========== 375px MOBILE AUDIT FIXES ========== */
    @media (max-width: 420px) {

      /* Hero: stack CTA card, reduce padding, fix headline */
      .hero-inner {
        grid-template-columns: 1fr;
        padding: 1.25rem 1rem 1rem;
        gap: 1rem;
      }
      .hero-headline { font-size: 1.35rem; }
      .hero-sub { font-size: .83rem; }
      .hero-cta-btn { font-size: .85rem; padding: .65rem 1rem; }
      .hero-routes { gap: .3rem; }

      /* Nav: keep horizontal, scroll if needed */
      .site-nav { flex-direction: row; flex-wrap: nowrap; padding: 0 .75rem; min-height: 44px; overflow-x: auto; gap: .25rem; }
      .site-nav-left, .site-nav-right { gap: .4rem; flex-wrap: nowrap; }
      .site-nav a { font-size: 11px; white-space: nowrap; padding: 4px 0; }
      .admin-link { font-size: 10px !important; padding: 3px 5px !important; }

      /* Calculator tabs */
      .tab-btn { font-size: 11px; padding: 9px 7px; }

      /* Result table: allow internal scroll, never widen page */
      .result-panel { overflow-x: auto; }
      .result-table { min-width: 300px; font-size: 12px; }
      .result-col-hdr { font-size: 11px; padding: 6px 6px; }
      .result-cell { font-size: 12px; padding: 5px 6px; }

      /* Book + PDF buttons: stack vertically */
      #book-btn, .btn-pdf-quote {
        width: 100%;
        font-size: 13px;
        padding: 11px 12px;
      }

      /* Sticky bar: compact on small screens */
      .sticky-bar { box-shadow: 0 -4px 20px rgba(0,50,160,.10); border-top: 2px solid #0032A0;
        padding: .4rem .75rem;
        flex-wrap: wrap;
        gap: .35rem;
      }
      .sticky-total-local { font-size: 14px; }
      .sticky-total-zar { font-size: 12px; }

      /* Track strip: stack on very small screens */
      .track-strip { flex-wrap: wrap; gap: .4rem; padding: .5rem .75rem; }
      .track-strip input { min-width: 0; flex: 1 1 140px; }
      .track-strip button { flex: 1 1 80px; }

      /* Booking form */
      .form-row { flex-direction: column; gap: .4rem; }
      .field-input, .rate-input { font-size: 14px; }

      /* Section card header */
      .section-card-title { font-size: 1rem; }

      /* FAQ grid: already 1 col at 768px via earlier rule, fine */

      /* Delivery estimate: wrap note text */
      .delivery-estimate { font-size: 11.5px; }

      /* Footer social icons: allow wrapping */
      .footer-social { flex-wrap: wrap; gap: .4rem; }

      /* Photo preview thumbnails */
      #photo-preview-row img { width: 64px; height: 64px; }

      /* Voucher section */
      .voucher-input-row { flex-direction: column; gap: .4rem; }
      .voucher-apply-btn, .voucher-remove-btn { width: 100%; }

      /* Page wrap slightly wider on very small screens */
      .page-wrap { width: 98%; }
    }

  
    /* Special handling flags */
    .special-flag-label {
      display: inline-flex;
      cursor: pointer;
      user-select: none;
    }
    .special-flag-label input[type="checkbox"] {
      position: absolute;
      opacity: 0;
      width: 0;
      height: 0;
    }
    .special-flag-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 5px 12px;
      border-radius: 99px;
      border: 1.5px solid #e2e8f0;
      background: #fff;
      font-size: 12.5px;
      font-weight: 500;
      color: #475569;
      transition: border-color .15s, background .15s, color .15s;
    }
    .special-flag-label input:checked + .special-flag-badge {
      border-color: #0032A0;
      background: #eff6ff;
      color: #0032A0;
    }
    .special-flag-label:hover .special-flag-badge {
      border-color: #94a3b8;
    }
/* ========== BOOKING PROGRESS BAR ========== */
.booking-progress {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 1.25rem;
  padding: .75rem 1.25rem;
  background: #fff;
  border-radius: 10px;
  border: .5px solid #e2e8f0;
  overflow-x: auto;
}
.bp-step {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
}
.bp-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f1f5f9;
  border: 2px solid #e2e8f0;
  color: #94a3b8;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, border-color .2s, color .2s;
}
.bp-dot.active   { background: #0032A0; border-color: #0032A0; color: #fff; }
.bp-dot.complete { background: #0f6e56; border-color: #0f6e56; color: #fff; }
.bp-label {
  font-size: 11px;
  color: #94a3b8;
  margin-left: 6px;
  white-space: nowrap;
  font-weight: 500;
  transition: color .2s;
}
.bp-label.active   { color: #0032A0; font-weight: 600; }
.bp-label.complete { color: #0f6e56; }
.bp-line {
  flex: 1;
  height: 2px;
  background: #e2e8f0;
  margin: 0 6px;
  min-width: 12px;
  transition: background .2s;
}
.bp-line.complete { background: #0f6e56; }
@media (max-width: 600px) {
  .bp-label { display: none; }
  .bp-step { flex: 0 0 auto; }
  .bp-line  { min-width: 8px; flex: 1; }
}

/* ========== FOCUS VISIBLE (accessibility) ========== */
:focus-visible {
  outline: 2.5px solid #0032A0;
  outline-offset: 2px;
  border-radius: 3px;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2.5px solid #0032A0;
  outline-offset: 2px;
}

/* ========== MICRO-INTERACTIONS ========== */
.route-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,50,160,.12);
  transition: transform .15s, box-shadow .15s;
}
.submit-btn:hover {
  opacity: .93;
  transform: translateY(-1px);
}
.submit-btn:active {
  transform: translateY(0);
}
.hero-cta-btn:hover {
  opacity: .92;
  transform: translateY(-1px);
}
.faq-question:hover {
  background: #f8faff;
}


/* ========== 375px TARGETED FIXES ========== */
@media (max-width: 375px) {

  /* Hero: tighter, cleaner on small phones */
  .hero-headline { font-size: 1.2rem; line-height: 1.25; }
  .hero-sub      { font-size: .79rem; line-height: 1.55; }
  .hero-eyebrow  { font-size: 10px; }
  .hero-inner    { padding: 1rem .85rem .85rem; }

  /* Calculator tabs  2 per row max */
  .tabs-row { flex-wrap: wrap; }
  .tab-btn  { flex: 1 1 calc(50% - 4px); font-size: 11px; padding: 8px 4px; }

  /* Booking form  full width inputs */
  .bfield-input, .rate-input { font-size: 14px; }
  .booking-cols { grid-template-columns: 1fr; }

  /* Progress bar dots only */
  .bp-label { display: none; }
  .bp-dot   { width: 24px; height: 24px; font-size: 10px; }

  /* Track strip stacks */
  .track-strip { flex-direction: column; align-items: stretch; }
  .track-strip input  { width: 100%; }
  .track-strip button { width: 100%; }

  /* FAQ single column */
  .faq-grid { grid-template-columns: 1fr; }

  /* Collection date row stacks */
  #collection-date,
  #collection-time { width: 100%; }

  /* Special flags wrap */
  .special-flag-badge { font-size: 11px; padding: 4px 8px; }

  /* Sticky bar compact */
  .sticky-bar { padding: .35rem .6rem; gap: .25rem; }
  .sticky-total-local { font-size: 13px; }
  .sticky-total-zar   { font-size: 11px; }

  /* Submit button full width */
  .submit-btn { width: 100%; font-size: 14px; }

  /* Page wrap edge to edge */
  .page-wrap { width: 100%; border-radius: 0; }

  /* Hero inner full width */
  .hero-section { border-radius: 0; }
}

/* ========== HOW IT WORKS ========== */
.how-section {
  background: #fff;
  border-radius: 14px;
  border: .5px solid #e2e8f0;
  padding: 2rem 2.25rem;
  margin-bottom: 1.25rem;
  text-align: center;
}
.how-heading {
  font-size: 1.3rem;
  font-weight: 700;
  color: #0f1f3d;
  margin-bottom: .3rem;
}
.how-sub {
  font-size: .88rem;
  color: #64748b;
  margin-bottom: 1.75rem;
}
.how-steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.how-step {
  flex: 1;
  min-width: 180px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
}
.how-step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0032A0;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: #f0f5ff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.how-step-title {
  font-size: .92rem;
  font-weight: 700;
  color: #1e293b;
}
.how-step-desc {
  font-size: .82rem;
  color: #475569;
  line-height: 1.6;
}
.how-step-arrow {
  padding-top: 2.5rem;
  flex-shrink: 0;
}
@media (max-width: 600px) {
  .how-step-arrow { display: none; }
  .how-step { max-width: 100%; min-width: 0; width: 100%; flex-direction: row; text-align: left; gap: 1rem; }
  .how-step-num { flex-shrink: 0; }
  .how-step-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: 10px; }
  .how-steps { flex-direction: column; align-items: stretch; }
}

/* ========== COMPREHENSIVE MOBILE RESPONSIVE FIX ========== */
@media (max-width: 768px) {
  /* Hero stacks vertically */
  .hero-inner { grid-template-columns: 1fr !important; }
  .hero-content { padding: 1.25rem 1rem; }
  .hero-headline { font-size: 1.35rem; }

  /* Page wrap edge padding */
  .page-wrap { width: 96% !important; }

  /* Section cards tighter */
  .section-card-body { padding: 1rem !important; }
  .section-card-header { padding: 1rem !important; }

  /* Booking columns single */
  .booking-cols { grid-template-columns: 1fr !important; }
  .booking-col-panel { min-width: 0; }

  /* Fields full width */
  .fields-grid { grid-template-columns: 1fr !important; }
  .field-input { font-size: 16px; } /* Prevents iOS zoom */

  /* Tabs wrap */
  .tab-row { flex-wrap: wrap; gap: .35rem; }
  .tab-btn { font-size: 12px; padding: 8px 10px; flex: 1 1 auto; }

  /* Result grid */
  .result-grid { grid-template-columns: 1fr !important; }

  /* Sticky bar */
  .sticky-bar { padding: .4rem .75rem; gap: .35rem; }
  .sticky-total-local { font-size: 14px; }

  /* Progress bar */
  .bp-label { display: none; }
  .bp-dot { width: 26px; height: 26px; font-size: 10px; }

  /* How it works */
  .how-step { flex-direction: row; text-align: left; gap: .75rem; max-width: 100%; }
  .how-step-arrow { display: none; }
  .how-steps { flex-direction: column; }

  /* FAQ */
  .faq-grid { grid-template-columns: 1fr !important; }

  /* Hero CTA buttons stack */
  .hero-cta-btns { flex-direction: column; gap: .5rem; }
  .hero-cta-btn { width: 100%; text-align: center; }

  /* Trust badges */
  .trust-badge-sep { display: none; }
  .trust-badge { flex: 0 1 calc(50% - .5rem); min-width: 140px; }
}

@media (max-width: 480px) {
  .page-wrap { width: 100% !important; border-radius: 0; }
  .section-card { border-radius: 10px; }
  .hero-section { border-radius: 0; }
  .site-nav { border-radius: 0; }
  .field-input { font-size: 16px; padding: 10px; }
  .tab-btn { font-size: 11px; padding: 7px 8px; }
  .trust-badge { flex: 0 1 100%; }
  .submit-btn { width: 100%; font-size: 15px; padding: 14px; }

  /* Booking form full width items */
  .bfield-input { font-size: 16px; }
  .item-row { flex-direction: column !important; }

  /* Special flags wrap */
  .special-flags-row { flex-wrap: wrap; gap: .35rem; }
}

/* ===========================================================================
   REDUCED MOTION
   Honours the operating-system "reduce motion" accessibility setting (macOS:
   Accessibility > Display > Reduce motion; Windows: Settings > Accessibility >
   Visual effects > Animation effects; also set by some browser extensions).

   Users who enable it include people with vestibular disorders, for whom
   movement on screen can trigger genuine nausea and dizziness. Honouring it is
   a WCAG 2.1 success criterion (2.3.3 Animation from Interactions).

   Transitions are reduced to 1ms rather than removed outright: a zero/none
   value can cause JS that waits on transitionend to hang forever, whereas 1ms
   still fires the event immediately. scroll-behavior is reset because smooth
   scrolling is itself motion.
   ======================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}