:root{
    --bg:#EDF6F9;
    --bg-raised:#FFFFFF;
    --paper:#E7F5FA;
    --paper-line:#C3E4EE;
    --ink:#0C2733;
    --ink-soft:#3F5D68;
    --ink-faint:#75949D;
    --line:#C7DEE5;
    --accent:#00ADEF;
    --accent-ink:#04202B;
    --teal:#0A7EA6;
    --stamp:#B23A2E;
    --stamp-green:#2A6B4C;
    --focus:#0A7EA6;
    --shadow: 0 1px 0 rgba(12,39,51,0.06);
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#0A1B22;
      --bg-raised:#102630;
      --paper:#123240;
      --paper-line:#1F4A58;
      --ink:#E4F1F4;
      --ink-soft:#A9C4CC;
      --ink-faint:#6E8F98;
      --line:#1D3E48;
      --accent:#22C2F5;
      --accent-ink:#03202B;
      --teal:#5FC7E0;
      --stamp:#E2685A;
      --stamp-green:#5FBE8B;
      --focus:#5FC7E0;
      --shadow: 0 1px 0 rgba(0,0,0,0.4);
    }
  }
  :root[data-theme="dark"]{
    --bg:#0A1B22;
    --bg-raised:#102630;
    --paper:#123240;
    --paper-line:#1F4A58;
    --ink:#E4F1F4;
    --ink-soft:#A9C4CC;
    --ink-faint:#6E8F98;
    --line:#1D3E48;
    --accent:#22C2F5;
    --accent-ink:#03202B;
    --teal:#5FC7E0;
    --stamp:#E2685A;
    --stamp-green:#5FBE8B;
    --focus:#5FC7E0;
    --shadow: 0 1px 0 rgba(0,0,0,0.4);
  }

  *{box-sizing:border-box;}
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Sans", system-ui, sans-serif;
    line-height:1.55;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--teal);}
  a:focus-visible, button:focus-visible, .btn:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:3px;
  }
  h1,h2,h3{
    font-family:"Source Serif 4", Georgia, "Times New Roman", serif;
    font-weight:700;
    text-transform:uppercase;
    letter-spacing:0.01em;
    text-wrap:balance;
    margin:0;
    color:var(--ink);
  }
  .mono{font-family:"IBM Plex Mono", ui-monospace, monospace;}
  .eyebrow{
    font-family:"IBM Plex Mono", ui-monospace, monospace;
    font-size:0.78rem;
    letter-spacing:0.14em;
    text-transform:uppercase;
    color:var(--teal);
    display:flex;
    align-items:center;
    gap:0.6em;
  }
  .eyebrow::before{
    content:"";
    width:1.4em;
    height:1px;
    background:var(--teal);
    display:inline-block;
  }
  .wrap{
    max-width:1120px;
    margin:0 auto;
    padding:0 24px;
  }
  img{max-width:100%;}

  /* ---------- header ---------- */
  header{
    border-bottom:1px solid var(--line);
    background:var(--bg-raised);
    position:relative;
    z-index:5;
  }
  .headerbar{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:16px;
    padding:18px 24px;
    max-width:1120px;
    margin:0 auto;
  }
  .brand{
    display:flex;
    flex-direction:column;
    line-height:1;
    gap:6px;
  }
  .brand .logo-mark{
    display:block;
    height:29px;
    width:auto;
  }
  .brand .tagline{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    letter-spacing:0.12em;
    text-transform:uppercase;
    color:var(--ink-faint);
  }
  nav.primary{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 22px;
  }
  nav.primary a{
    font-size:0.92rem;
    font-weight:500;
    color:var(--ink-soft);
    text-decoration:none;
    padding:6px 2px;
    border-bottom:2px solid transparent;
  }
  nav.primary a:hover{color:var(--ink); border-bottom-color:var(--line);}
  nav.primary a.current{color:var(--ink); border-bottom-color:var(--accent);}

  .btn{
    display:inline-flex;
    align-items:center;
    gap:0.5em;
    font-family:"IBM Plex Sans", sans-serif;
    font-weight:600;
    font-size:0.94rem;
    text-decoration:none;
    padding:11px 20px;
    border-radius:3px;
    border:1px solid transparent;
    cursor:pointer;
    white-space:nowrap;
  }
  .btn-primary{
    background:var(--accent);
    color:var(--accent-ink);
  }
  .btn-primary:hover{filter:brightness(1.06);}
  .btn-ghost{
    background:transparent;
    border-color:var(--line);
    color:var(--ink);
  }
  .btn-ghost:hover{border-color:var(--ink-soft);}

  /* ---------- hero ---------- */
  .hero{
    padding:64px 0 48px;
    border-bottom:1px solid var(--line);
  }
  .hero-grid{
    display:grid;
    grid-template-columns:1.15fr 0.85fr;
    gap:48px;
    align-items:center;
  }
  .hero h1{
    font-size:clamp(2.6rem, 5.6vw, 4.4rem);
    line-height:0.98;
  }
  .hero .sub{
    margin-top:22px;
    font-size:1.08rem;
    color:var(--ink-soft);
    max-width:52ch;
  }
  .hero .ctas{
    margin-top:30px;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
  }
  .stamp-badge{
    position:relative;
    justify-self:end;
    width:min(220px, 60vw);
    aspect-ratio:1;
    border:3px dashed var(--accent);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    transform:rotate(-9deg);
    color:var(--teal);
    text-align:center;
    padding:14px;
  }
  .stamp-badge .inner{
    font-family:"Big Shoulders Stencil", sans-serif;
    font-weight:700;
    font-size:1.05rem;
    letter-spacing:0.06em;
    line-height:1.15;
  }
  .stamp-badge .inner .small{
    display:block;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.6rem;
    letter-spacing:0.2em;
    margin-top:6px;
    font-weight:400;
  }

  .stat-strip{
    margin-top:44px;
    display:grid;
    grid-template-columns:repeat(3, 1fr);
    border-top:1px solid var(--line);
  }
  .stat{
    padding:20px 20px 4px 0;
    border-right:1px solid var(--line);
  }
  .stat:last-child{border-right:none;}
  .stat .num{
    font-family:"IBM Plex Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-size:1.7rem;
    font-weight:600;
    color:var(--teal);
  }
  .stat .label{
    font-size:0.82rem;
    color:var(--ink-faint);
    margin-top:4px;
  }
  .stat .label-sub{
    font-size:0.72rem;
    color:var(--ink-faint);
    opacity:0.8;
    margin-top:3px;
  }

  /* ---------- generic section ---------- */
  section{padding:64px 0;}
  section.alt{background:var(--bg-raised); border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .section-head{
    display:flex;
    justify-content:space-between;
    align-items:flex-end;
    gap:24px;
    flex-wrap:wrap;
    margin-bottom:36px;
  }
  .section-head h2{font-size:clamp(1.7rem, 3.4vw, 2.4rem);}
  .section-head .desc{
    max-width:46ch;
    color:var(--ink-soft);
    font-size:0.98rem;
  }

  /* ---------- route / how it works ---------- */
  .route{
    display:grid;
    grid-template-columns:repeat(4, 1fr);
    gap:0;
    position:relative;
  }
  .route-step{
    position:relative;
    padding:0 20px 0 0;
    border-right:1px dashed var(--line);
  }
  .route-step:last-child{border-right:none; padding-right:0;}
  .route-step .idx{
    font-family:"Big Shoulders Stencil", sans-serif;
    font-size:2.6rem;
    font-weight:700;
    color:var(--line);
    line-height:1;
  }
  .route-step h3{
    font-size:1.15rem;
    margin-top:6px;
    color:var(--ink);
  }
  .route-step p{
    font-size:0.92rem;
    color:var(--ink-soft);
    margin-top:8px;
  }
  .route-note{
    margin-top:28px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.85rem;
    color:var(--ink-soft);
    border-left:3px solid var(--teal);
    padding-left:14px;
  }
  .route-note b{color:var(--ink);}

  /* ---------- pricing ---------- */
  .rate-card{
    background:var(--paper);
    border:1px solid var(--paper-line);
    border-radius:4px;
    padding:32px;
  }
  table.rates{
    width:100%;
    border-collapse:collapse;
  }
  table.rates th{
    text-align:left;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.72rem;
    letter-spacing:0.1em;
    text-transform:uppercase;
    color:var(--ink-faint);
    padding-bottom:10px;
    border-bottom:1px solid var(--paper-line);
  }
  table.rates td{
    padding:14px 0;
    border-bottom:1px solid var(--paper-line);
    font-size:0.95rem;
    vertical-align:top;
  }
  table.rates tr:last-child td{border-bottom:none;}
  table.rates td.amount{
    font-family:"IBM Plex Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-weight:600;
    text-align:right;
    white-space:nowrap;
    color:var(--ink);
    width:11ch;
  }
  .table-scroll{overflow-x:auto;}
  .worked-example{
    margin-top:22px;
    padding-top:20px;
    border-top:1px dashed var(--paper-line);
    font-size:0.92rem;
    color:var(--ink-soft);
  }
  .worked-example .mono-figure{
    font-family:"IBM Plex Mono", monospace;
    color:var(--teal);
    font-weight:600;
  }
  .rate-links{
    margin-top:20px;
    font-size:0.92rem;
  }
  .duty-note{
    margin-top:20px;
    font-size:0.86rem;
    color:var(--ink-soft);
  }

  /* ---------- two-col info ---------- */
  .two-col{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:28px;
    align-items:start;
  }

  /* ---------- vendor stamp block ---------- */
  .customs-block{
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:4px;
    padding:28px 28px 24px;
    position:relative;
    overflow:hidden;
  }
  .customs-head{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
  }
  .customs-stamp{
    flex:none;
    border:3px solid var(--stamp);
    color:var(--stamp);
    border-radius:6px;
    padding:6px 10px;
    transform:rotate(-6deg);
    font-family:"Big Shoulders Stencil", sans-serif;
    font-weight:700;
    font-size:0.85rem;
    letter-spacing:0.08em;
    line-height:1.1;
    text-align:center;
  }
  .customs-block h3{font-size:1.35rem;}
  .vendor-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:8px 24px;
    list-style:none;
    margin:0 0 18px;
    padding:0;
  }
  .vendor-grid li{
    font-size:0.95rem;
    color:var(--ink);
    padding:6px 0;
    border-bottom:1px solid var(--line);
  }
  .vendor-grid li::before{
    content:"\2715  ";
    color:var(--stamp);
    font-weight:700;
  }
  .customs-fine{
    font-size:0.85rem;
    color:var(--ink-soft);
    padding-top:6px;
  }

  /* ---------- info cards (insurance/delivery) ---------- */
  .info-card{
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:4px;
    padding:26px;
    height:100%;
  }
  .info-card h3{font-size:1.2rem; margin-bottom:12px;}
  .info-card p{font-size:0.92rem; color:var(--ink-soft); margin:0 0 10px;}
  .info-card .figure{
    font-family:"IBM Plex Mono", monospace;
    color:var(--teal);
    font-weight:600;
  }

  /* ---------- faq teaser ---------- */
  .faq-row{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .faq-item{
    padding:20px 0;
    border-top:1px solid var(--line);
  }
  .faq-item h4{
    font-family:"IBM Plex Sans", sans-serif;
    text-transform:none;
    font-weight:600;
    font-size:1rem;
    margin:0 0 6px;
  }
  .faq-item p{margin:0; font-size:0.92rem; color:var(--ink-soft);}

  /* ---------- testimonial teaser ---------- */
  .teaser-band{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    flex-wrap:wrap;
    background:var(--paper);
    border:1px solid var(--paper-line);
    border-radius:4px;
    padding:26px 30px;
  }
  .teaser-band p{margin:0; font-size:1rem; color:var(--ink);}
  .teaser-band .sub{font-size:0.85rem; color:var(--ink-soft); margin-top:4px;}

  /* ---------- subpage intro (shared across non-home pages) ---------- */
  .page-head{
    padding:56px 0 44px;
    border-bottom:1px solid var(--line);
  }
  .page-head h1{font-size:clamp(2.1rem, 4.4vw, 3.1rem);}
  .lede{
    margin-top:18px;
    font-size:1.05rem;
    color:var(--ink-soft);
    max-width:62ch;
  }

  /* ---------- form controls (calculator, contact, etc) ---------- */
  .field label{
    display:block;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.68rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--ink-faint);
    margin-bottom:6px;
  }
  input[type="number"], input[type="text"], input[type="email"], textarea{
    width:100%;
    font-family:"IBM Plex Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-size:0.95rem;
    color:var(--ink);
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:3px;
    padding:9px 10px;
  }
  input:focus-visible, textarea:focus-visible{
    outline:2px solid var(--focus);
    outline-offset:2px;
  }
  .unit-toggle{
    display:inline-flex;
    border:1px solid var(--line);
    border-radius:3px;
    overflow:hidden;
  }
  .unit-toggle button{
    background:var(--bg-raised);
    border:none;
    padding:8px 16px;
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:var(--ink-soft);
    cursor:pointer;
  }
  .unit-toggle button.active{
    background:var(--accent);
    color:var(--accent-ink);
  }

  /* ---------- calculator ---------- */
  .calc-grid{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:28px;
    align-items:start;
  }
  .calc-card{
    background:var(--paper);
    border:1px solid var(--paper-line);
    border-radius:4px;
    padding:28px;
  }
  .calc-card h3{font-size:1.2rem;}
  .calc-card-head{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:16px;
    flex-wrap:wrap;
    margin-bottom:20px;
  }
  .calc-hint{
    font-size:0.82rem;
    color:var(--ink-faint);
    margin:-12px 0 20px;
  }
  .box-row{
    display:flex;
    flex-wrap:wrap;
    gap:12px;
    align-items:end;
    padding:14px 0;
    border-bottom:1px solid var(--paper-line);
  }
  .box-row:first-of-type{padding-top:0;}
  .box-row .field{flex:1 1 100px; min-width:90px;}
  .box-row .field.qty{flex:0 1 76px; min-width:76px;}
  .remove-box{
    flex:0 0 auto;
    width:38px;
    height:38px;
    background:transparent;
    border:1px solid var(--line);
    color:var(--stamp);
    border-radius:3px;
    font-size:1.1rem;
    line-height:1;
    cursor:pointer;
  }
  .remove-box:hover{background:var(--stamp); border-color:var(--stamp); color:#fff;}
  .add-box-btn{
    margin-top:16px;
    width:100%;
    background:transparent;
    border:1px dashed var(--line);
    color:var(--teal);
    font-family:"IBM Plex Sans", sans-serif;
    font-weight:600;
    font-size:0.9rem;
    padding:11px 16px;
    border-radius:3px;
    cursor:pointer;
  }
  .add-box-btn:hover{border-color:var(--teal);}
  .mini-stats{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line);
    margin:0 0 22px;
  }
  .mini-stats .stat{padding:16px 16px 16px 0;}
  .mini-stats .stat:last-child{border-right:none; padding-left:16px;}
  .calc-total-row{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    padding-top:16px;
    margin-top:6px;
    border-top:1px solid var(--paper-line);
  }
  .calc-total-row .amount{
    font-family:"IBM Plex Mono", monospace;
    font-variant-numeric:tabular-nums;
    font-size:1.6rem;
    font-weight:600;
    color:var(--teal);
  }
  .calc-min-note{
    margin-top:10px;
    font-size:0.82rem;
    color:var(--stamp);
  }
  .calc-disclaimer{
    margin-top:20px;
    font-size:0.82rem;
    color:var(--ink-soft);
    border-top:1px dashed var(--paper-line);
    padding-top:16px;
  }
  @media (min-width: 881px){
    .calc-card.sticky{position:sticky; top:24px;}
  }

  /* ---------- rate-card modifier ---------- */
  .rate-card.centered{text-align:center;}

  /* ---------- testimonials ---------- */
  .quote-grid{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    gap:20px;
  }
  .quote-grid > :last-child:nth-child(odd){grid-column:1 / -1;}
  .quote-card{
    background:var(--bg-raised);
    border:1px solid var(--line);
    border-radius:4px;
    padding:30px 26px 26px;
    position:relative;
  }
  .quote-card::before{
    content:"\201C";
    position:absolute;
    top:2px;
    left:22px;
    font-family:"Source Serif 4", serif;
    font-size:3.4rem;
    color:var(--paper-line);
    line-height:1;
  }
  .quote-card blockquote{
    margin:20px 0 16px;
    font-family:"Source Serif 4", serif;
    font-style:italic;
    font-size:1.02rem;
    line-height:1.6;
    color:var(--ink);
  }
  .quote-attribution{
    font-family:"IBM Plex Mono", monospace;
    font-size:0.78rem;
    letter-spacing:0.08em;
    text-transform:uppercase;
    color:var(--teal);
  }

  /* ---------- contact ---------- */
  .contact-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
    gap:20px;
  }

  /* ---------- faq ---------- */
  .faq-layout{
    display:grid;
    grid-template-columns:260px 1fr;
    gap:44px;
    align-items:start;
  }
  .faq-toc{
    display:flex;
    flex-direction:column;
  }
  .faq-toc a{
    padding:10px 0;
    border-bottom:1px solid var(--line);
    font-size:0.9rem;
    color:var(--ink-soft);
    text-decoration:none;
  }
  .faq-toc a:hover{color:var(--ink);}
  @media (min-width: 881px){
    .faq-toc{position:sticky; top:24px;}
  }
  .faq-answers{display:flex; flex-direction:column;}
  .faq-answer-block{
    padding:28px 0;
    border-bottom:1px solid var(--line);
    scroll-margin-top:24px;
  }
  .faq-answer-block:last-child{border-bottom:none;}
  .faq-answer-block h2{font-size:1.2rem;}
  .faq-answer-block p{
    margin:12px 0 0;
    font-size:0.95rem;
    color:var(--ink-soft);
  }

  /* ---------- final cta ---------- */
  .cta-band{
    text-align:center;
    padding:70px 0;
  }
  .cta-band h2{font-size:clamp(2rem, 4.5vw, 3rem);}
  .cta-band .btn{margin-top:28px;}
  .cta-band .sub{
    margin:16px auto 28px;
    max-width:48ch;
    color:var(--ink-soft);
  }

  /* ---------- footer ---------- */
  footer{
    border-top:1px solid var(--line);
    background:var(--bg-raised);
    padding:40px 0 28px;
  }
  .footer-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:space-between;
    gap:24px;
    margin-bottom:24px;
  }
  footer nav{
    display:flex;
    flex-wrap:wrap;
    gap:8px 20px;
  }
  footer nav a{
    font-size:0.88rem;
    color:var(--ink-soft);
    text-decoration:none;
  }
  footer nav a:hover{color:var(--ink);}
  .footer-note{
    font-size:0.8rem;
    color:var(--ink-faint);
    border-top:1px solid var(--line);
    padding-top:18px;
    max-width:80ch;
  }
  .footer-note b{color:var(--ink-soft);}

  @media (max-width: 880px){
    .hero-grid{grid-template-columns:1fr;}
    .stamp-badge{justify-self:start; margin-top:8px;}
    .stat-strip{grid-template-columns:1fr 1fr 1fr; gap:0;}
    .route{grid-template-columns:1fr 1fr; row-gap:28px;}
    .route-step{border-right:none; border-bottom:1px dashed var(--line); padding-bottom:20px;}
    .route-step:nth-child(2n){padding-left:20px;}
    .two-col{grid-template-columns:1fr;}
    .faq-row{grid-template-columns:1fr;}
    .calc-grid{grid-template-columns:1fr;}
    .quote-grid{grid-template-columns:1fr;}
    .faq-layout{grid-template-columns:1fr;}
    .faq-toc{flex-direction:row; flex-wrap:wrap; gap:4px 16px;}
    .faq-toc a{border-bottom:none; padding:4px 0;}
  }
  @media (max-width: 560px){
    .headerbar{padding:16px;}
    nav.primary{gap:4px 14px;}
    nav.primary a{font-size:0.86rem;}
    .stat-strip{grid-template-columns:1fr; }
    .stat{border-right:none; border-bottom:1px solid var(--line); padding-bottom:16px;}
    .route{grid-template-columns:1fr;}
    .route-step:nth-child(2n){padding-left:0;}
    .vendor-grid{grid-template-columns:1fr;}
    .customs-head{flex-direction:column; align-items:flex-start;}
  }

  @media (prefers-reduced-motion: no-preference){
    .fade-up{
      animation:fadeUp 0.6s ease-out both;
    }
    @keyframes fadeUp{
      from{opacity:0; transform:translateY(10px);}
      to{opacity:1; transform:translateY(0);}
    }
  }