@font-face {font-family: 'Public Sans'; src: local('Public Sans');}
:root {--navy:#0A2540;--dark-green:#0F5132;--accent:#1E7E34;--slate:#2E3A46;--bg:#FFFFFF;--gray:#F5F7FA;--text:#1b1f23;--focus:#264b96}
* {box-sizing: border-box}
html {scroll-behavior: smooth}
body {margin:0; font-family:'Public Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color:var(--text); background:var(--bg); line-height:1.6}
a {color:var(--accent); text-decoration:none}
a:hover {text-decoration:underline}
img {max-width:100%; height:auto; display:block}
button {font-family:inherit}
.visually-hidden {position:absolute; clip:rect(0 0 0 0); clip-path: inset(50%); width:1px; height:1px; overflow:hidden; white-space:nowrap}
.container {max-width:1120px; margin:0 auto; padding:0 16px}
.header {background:var(--navy); color:#fff; position:sticky; top:0; z-index:10}
.header-inner {display:flex; align-items:center; justify-content:space-between; padding:12px 0}
.brand {font-weight:700; letter-spacing:.5px}
.brand a {color:#fff}
.nav {display:flex; gap:24px}
.nav a {color:#fff; padding:8px 4px; border-radius:4px}
.nav a[aria-current="page"] {background:rgba(255,255,255,.12)}
.nav-toggle {display:none; background:transparent; border:0; color:#fff; font-size:18px}
.nav-toggle:focus-visible, .nav a:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible {outline:3px solid var(--focus); outline-offset:2px}
.skip-link {position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.skip-link:focus {position:static; width:auto; height:auto; padding:8px; background:#fff}
.hero {background:linear-gradient(0deg, rgba(10,37,64,.6), rgba(10,37,64,.6)), url('../../images/CBP-and-De-Minimis-parcels_1.jpg') 50%/cover no-repeat; color:#fff}
.hero .container {padding:80px 16px}
.hero h1 {font-size:32px; margin:0 0 12px}
.hero p {max-width:720px; margin:0 0 24px}
.btn {display:inline-block; background:var(--accent); color:#fff; padding:12px 16px; border-radius:6px}
.btn.secondary {background:transparent; border:2px solid #fff}
.grid {display:grid; gap:16px}
.grid.cols-2 {grid-template-columns:repeat(2,1fr)}
.grid.cols-3 {grid-template-columns:repeat(3,1fr)}
.grid.cols-4 {grid-template-columns:repeat(4,1fr)}
.card {background:#fff; border:1px solid #e5e7eb; border-radius:8px; padding:16px}
.card .icon {width:32px; height:32px; color:var(--dark-green)}
.card img {border-radius:6px; margin-bottom:12px}
.split {display:grid; grid-template-columns:1.1fr 0.9fr; gap:24px; align-items:center}
.split .image {border-radius:8px; overflow:hidden}
.split .image img {width:100%; height:auto; display:block}
.section {padding:40px 0}
.section.alt {background:var(--gray)}
.section h2 {font-size:24px; margin:0 0 12px; color:var(--navy)}
.lead {font-size:18px}
.list {list-style:none; padding:0; margin:0}
.list li {padding:8px 0}
.footer {background:var(--slate); color:#fff; padding:24px 0; margin-top:40px}
.small {font-size:14px}
.footer a {color:#fff}
.footer .small {opacity:.8}
form {max-width:720px}
label {display:block; margin:12px 0 6px}
input, textarea {width:100%; padding:12px; border:1px solid #d1d5db; border-radius:6px}
.form-row {display:grid; grid-template-columns:1fr 1fr; gap:12px}
.error {color:#b00020; margin-top:6px}
.map {border:0; width:100%; height:320px; border-radius:8px}
@media (max-width: 960px) {.grid.cols-4 {grid-template-columns:repeat(2,1fr)} .grid.cols-3 {grid-template-columns:repeat(2,1fr)} .hero h1 {font-size:28px}}
@media (max-width: 640px) {.nav {display:none} .nav.open {display:flex; flex-direction:column; gap:8px; padding:8px 0} .nav-toggle {display:block} .grid.cols-2, .grid.cols-3 {grid-template-columns:1fr} .form-row {grid-template-columns:1fr}}