@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@500;600;700&family=Public+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ==========================================================================
   MAPYSEA — stylesheet
   --------------------------------------------------------------------------
   Palette and type are drawn from actual trade paperwork rather than a
   generic SaaS template: ledger ink, manila envelope, customs-seal green,
   rubber-stamp red. Archivo (industrial signage) over Public Sans (a face
   designed for government forms) over IBM Plex Mono (technical documents).

   Class vocabulary is unchanged from the previous build, so index.html,
   products.html and partners.html all restyle from this one file and
   app.js keeps working untouched.
   ========================================================================== */

:root{
  --ink:      #10231F;   /* ledger ink — headings, body */
  --paper:    #FBFAF6;   /* document white */
  --manila:   #F1EEE4;   /* kraft envelope — section banding */
  --seal:     #0B6E5B;   /* customs seal green — primary */
  --seal-dark:#085446;
  --seal-lite:#5FCFAF;   /* on dark backgrounds only */
  --carbon:   #1E3A5F;   /* focus rings */
  --stamp:    #B3261E;   /* rubber stamp red — errors and stamps only */
  --rule:     #DCD8CB;
  --muted:    #5C6B66;

  --wrap: 1200px;
  --gut: 24px;

  --f-display:'Archivo', system-ui, sans-serif;
  --f-body:'Public Sans', system-ui, sans-serif;
  --f-mono:'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html{ scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:17px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

img{ max-width:100%; display:block; }
a{ color:inherit; }

h1,h2,h3,h4{
  font-family:var(--f-display);
  font-weight:700;
  letter-spacing:-0.025em;
  line-height:1.06;
  margin:0;
}

:focus-visible{ outline:2px solid var(--carbon); outline-offset:3px; }

.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 var(--gut); }
.mono{ font-family:var(--f-mono); }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:12px 18px; z-index:200;
  font-size:14px; text-decoration:none;
}
.skip-link:focus{ left:0; }

/* ==========================================================================
   NAV
   ========================================================================== */
.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(251,250,246,.93);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--rule);
}
.nav__row{
  display:flex; align-items:center; gap:30px;
  height:70px;
  max-width:var(--wrap); margin:0 auto; padding:0 var(--gut);
}
.nav__brand{
  display:flex; align-items:center; gap:11px;
  text-decoration:none; flex-shrink:0;
}
.nav__brand svg,
.nav__brand img{ width:34px; height:34px; flex-shrink:0; }
.nav__brand-text{
  font-family:var(--f-display);
  font-weight:700; font-size:20px; letter-spacing:0.01em;
}
.nav__brand-text span{ color:var(--seal); }

.nav__links{ display:flex; align-items:center; gap:26px; margin-left:auto; }
.nav__links a{
  text-decoration:none; font-size:15px; font-weight:500;
  padding:6px 0; border-bottom:1.5px solid transparent;
  white-space:nowrap;
  transition:border-color .18s ease;
}
.nav__links a:hover{ border-bottom-color:var(--seal); }

.nav__cta{
  background:var(--seal); color:#fff !important;
  padding:12px 20px !important; border-radius:3px;
  font-weight:600 !important; border-bottom:0 !important;
  transition:background .18s ease;
}
.nav__cta:hover{ background:var(--seal-dark); }

.nav__toggle{
  display:none; margin-left:auto;
  width:40px; height:36px; padding:0;
  background:transparent; border:1px solid var(--rule); border-radius:3px;
  cursor:pointer; position:relative;
}
.nav__toggle::before,
.nav__toggle::after,
.nav__toggle span{
  content:''; position:absolute; left:50%; transform:translateX(-50%);
  width:18px; height:1.5px; background:var(--ink);
}
.nav__toggle::before{ top:11px; }
.nav__toggle span{ top:17px; }
.nav__toggle::after{ top:23px; }

/* ==========================================================================
   BUTTONS
   ========================================================================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  font-family:var(--f-body); font-size:15px; font-weight:600;
  padding:14px 24px; border-radius:3px;
  border:1px solid transparent;
  text-decoration:none; cursor:pointer;
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.btn-primary{ background:var(--seal); color:#fff; }
.btn-primary:hover{ background:var(--seal-dark); }
.btn-outline{ background:transparent; color:var(--ink); border-color:var(--rule); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-dark{ background:var(--paper); color:var(--ink); }
.btn-dark:hover{ background:#fff; }
.btn[aria-busy="true"]{ opacity:.6; pointer-events:none; }

/* ==========================================================================
   HERO
   ========================================================================== */
.hero{ padding:60px 0 64px; }

.hero__eyebrow{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--seal); margin:0 0 18px;
}
.hero__title{ font-size:clamp(38px, 5vw, 62px); }
.hero__title em{ font-style:normal; color:var(--seal); display:block; }
.hero__sub{
  font-size:19px; color:var(--muted);
  max-width:58ch; margin:18px 0 0;
}
.hero__ctas{ display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }

/* two-column hero: copy left, request form right.
   Named areas so the form can be reordered on small screens. */
.hero__grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  grid-template-areas:
    "intro form"
    "aside form";
  column-gap:64px; row-gap:0;
  align-items:start;
}
.hero__intro{ grid-area:intro; }
.hero__aside{ grid-area:aside; }
.hero__form{  grid-area:form; }

.hero__points{ list-style:none; padding:0; margin:30px 0 0; }
.hero__points li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:15.5px; color:var(--muted); margin-bottom:11px;
}
.hero__points li::before{
  content:'✓'; color:var(--seal); font-weight:700; flex-shrink:0;
}
.hero__points strong{ color:var(--ink); font-weight:600; }

.quicknav{ display:flex; flex-wrap:wrap; gap:8px; margin-top:28px; }
.quicknav a{
  font-family:var(--f-mono); font-size:11px;
  letter-spacing:0.1em; text-transform:uppercase;
  text-decoration:none; color:var(--muted);
  border:1px solid var(--rule); border-radius:2px; padding:8px 13px;
  transition:border-color .16s ease, color .16s ease, background .16s ease;
}
.quicknav a:hover{ border-color:var(--seal); color:var(--seal); background:#fff; }

.hero__contact{
  margin-top:26px; padding-top:20px; border-top:1px solid var(--rule);
  font-family:var(--f-mono); font-size:13px; letter-spacing:0.03em;
  display:flex; flex-wrap:wrap; gap:8px 24px;
}
.hero__contact a{ color:var(--seal); text-decoration:none; }
.hero__contact a:hover{ text-decoration:underline; }
.hero__contact span{ color:var(--muted); }

/* ==========================================================================
   SECTIONS
   ========================================================================== */
.section{ padding:88px 0; }
.section--tight{ padding:52px 0; }
.section--paper{
  background:var(--manila);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
}
.section--ink{ background:var(--ink); color:var(--paper); }

.section__head{ max-width:62ch; margin-bottom:50px; }
.center-head{ margin-left:auto; margin-right:auto; text-align:center; }
.section__kicker{
  font-family:var(--f-mono); font-size:11px; font-weight:500;
  letter-spacing:0.16em; text-transform:uppercase;
  color:var(--seal); margin:0 0 16px;
}
.section__title{ font-size:clamp(30px,3.6vw,44px); }
.section__lede{
  font-size:18px; color:var(--muted);
  max-width:62ch; margin:18px 0 0;
}
.center-head .section__lede{ margin-left:auto; margin-right:auto; }

.section--ink .section__kicker{ color:var(--seal-lite); }
.section--ink .section__title,
.section--ink .hero__title{ color:var(--paper); }
.section--ink .section__lede{ color:rgba(251,250,246,.68); }

/* a constrained, centred column — used for the forms on index and partners */
.dual__col{ max-width:660px; margin:0 auto; }

/* generic two-column split — copy beside a panel */
.split{
  display:grid; grid-template-columns:.9fr 1.1fr;
  gap:60px; align-items:center;
}

/* ==========================================================================
   TICKER — trade lanes
   ========================================================================== */
.ticker{
  background:var(--ink);
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  overflow:hidden; padding:13px 0;
}
.ticker__track{
  display:flex; gap:44px; width:max-content;
  animation:ticker-slide 46s linear infinite;
  font-family:var(--f-mono); font-size:12.5px; letter-spacing:0.1em;
  color:rgba(251,250,246,.8); white-space:nowrap;
}
.ticker__track b{ color:var(--seal-lite); font-weight:500; }
@keyframes ticker-slide{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }

/* ==========================================================================
   TRUST STRIP
   ========================================================================== */
.trust{ padding:44px 0; border-bottom:1px solid var(--rule); }
.trust__list{
  list-style:none; padding:0; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden;
}
.trust__item{ background:var(--paper); padding:22px 20px; }
.trust__item strong{
  display:block;
  font-family:var(--f-mono); font-size:11px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--seal); margin-bottom:8px;
}
.trust__item span{ display:block; font-size:14.5px; color:var(--muted); line-height:1.5; }
.trust__icon{ display:none; }

/* generic tick list */
.tick{ list-style:none; padding:0; margin:0; }
.tick li{
  display:flex; gap:11px; align-items:flex-start;
  margin-bottom:12px; color:var(--muted);
}
.tick li::before{ content:'✓'; color:var(--seal); font-weight:700; flex-shrink:0; }
.section--ink .tick li{ color:rgba(251,250,246,.72); }
.section--ink .tick li::before{ color:var(--seal-lite); }

/* ==========================================================================
   MANIFEST — the clearance checklist
   ========================================================================== */
.manifest{
  border:1px solid var(--ink); background:#fff;
  border-radius:4px; overflow:hidden;
  box-shadow:6px 6px 0 rgba(16,35,31,.07);
}
.manifest__head{
  background:var(--ink); color:var(--paper);
  padding:14px 20px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
}
.manifest__head span{
  color:rgba(251,250,246,.55); font-weight:400;
  font-size:10.5px; letter-spacing:0.08em;
}
.manifest__cols,
.manifest__row{
  display:grid; grid-template-columns:1fr 74px 90px;
  align-items:center;
  padding:11px 20px;
  border-bottom:1px solid var(--rule);
}
.manifest__cols{
  background:var(--manila);
  font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  padding-top:9px; padding-bottom:9px;
}
.manifest__cols span:not(:first-child),
.manifest__row .manifest__mark{ text-align:center; }
.manifest__row:last-of-type{ border-bottom:0; }
.manifest__row .manifest__task{ font-weight:500; font-size:14.5px; }
.manifest__task small{
  display:block; margin-top:2px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:400;
  letter-spacing:0.04em; color:var(--muted);
}
.manifest__mark{ font-family:var(--f-mono); font-size:15px; font-weight:600; }
.manifest__mark--you{ color:#B9B4A6; }
.manifest__mark--us{ color:var(--seal); }

.manifest__code{
  font-family:var(--f-mono); font-size:11px; font-weight:600;
  letter-spacing:0.14em; color:var(--seal);
  display:block; margin-bottom:12px;
}

.manifest__foot{
  padding:16px 20px 20px;
  border-top:1px solid var(--ink); background:var(--manila);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.manifest__foot p{ margin:0; font-size:13px; color:var(--muted); max-width:32ch; }

/* rubber stamp */
.stamp-wrap{
  flex-shrink:0;
  border:2.5px solid var(--stamp); color:var(--stamp);
  border-radius:3px; padding:7px 13px;
  font-family:var(--f-mono); font-weight:600;
  font-size:12px; letter-spacing:0.1em; text-transform:uppercase;
  text-align:center; line-height:1.25;
  transform:rotate(-7deg); opacity:.9;
  animation:stamp-down .5s cubic-bezier(.2,1.4,.4,1) .4s backwards;
}
.stamp-wrap small{
  display:block; font-size:8.5px; font-weight:500;
  letter-spacing:0.08em; opacity:.8;
}
@keyframes stamp-down{
  from{ transform:rotate(-7deg) scale(2.4); opacity:0; }
  to{   transform:rotate(-7deg) scale(1);   opacity:.9; }
}

/* ==========================================================================
   SERVICES / PROCESS / LANES / INDUSTRIES / WHY
   ========================================================================== */
.svc-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden;
}
.svc{ background:var(--paper); padding:26px 22px 28px; transition:background .18s ease; }
.svc:hover{ background:#fff; }
.svc__code{
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; color:var(--muted);
  display:block; margin-bottom:14px;
}
.svc h3{ font-size:18px; margin-bottom:8px; letter-spacing:-0.015em; }
.svc p{ margin:0; font-size:14px; color:var(--muted); line-height:1.55; }

.steps{ display:grid; grid-template-columns:repeat(3,1fr); gap:36px; }
.step{ border-top:2px solid var(--seal-lite); padding-top:22px; }
.step h3{ font-size:22px; margin-bottom:10px; color:var(--paper); }
.step p{ margin:0; font-size:15px; color:rgba(251,250,246,.68); }

.lane-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden;
}
.lane{
  background:var(--paper); padding:20px 22px;
  display:flex; justify-content:space-between; align-items:center; gap:14px;
  text-decoration:none; transition:background .18s ease;
}
.lane:hover{ background:#fff; }
.lane__route{ font-family:var(--f-mono); font-size:14px; font-weight:500; }
.lane__route span{ color:var(--muted); }
.lane__mode{
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--seal);
  border:1px solid var(--rule); border-radius:2px;
  padding:3px 7px; white-space:nowrap;
}

.ind-grid{ display:flex; flex-wrap:wrap; gap:10px; }
.ind{
  border:1px solid var(--rule); border-radius:3px;
  padding:11px 17px; font-size:15px; font-weight:500;
  background:var(--paper);
}
.ind small{
  font-family:var(--f-mono); font-size:10.5px;
  color:var(--muted); margin-left:9px; letter-spacing:0.06em;
}

.why-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:40px 56px; }
.why h3{ font-size:20px; margin-bottom:9px; display:flex; align-items:center; gap:11px; }
.why h3::before{
  content:''; width:9px; height:9px; border-radius:1px;
  background:var(--seal); flex-shrink:0;
}
.why p{ margin:0; color:var(--muted); font-size:15.5px; }

/* ==========================================================================
   PRODUCTS PAGE
   ========================================================================== */
.product-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden;
}
.product-card{
  background:var(--paper); padding:26px 24px 28px;
  display:flex; flex-direction:column;
  transition:background .18s ease;
}
.product-card:hover{ background:#fff; }
.cat-tag{
  font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); display:block; margin-bottom:14px;
}
.product-card h3{ font-size:19px; margin-bottom:9px; letter-spacing:-0.015em; }
.product-card p{ margin:0 0 20px; font-size:14.5px; color:var(--muted); line-height:1.55; }
.quote-link{
  margin-top:auto; align-self:flex-start;
  font-size:11.5px; font-weight:600;
  letter-spacing:0.1em; text-transform:uppercase;
  color:var(--seal); text-decoration:none;
  border-bottom:1px solid var(--rule); padding-bottom:3px;
  transition:border-color .16s ease;
}
.quote-link:hover{ border-bottom-color:var(--seal); }

.cta-band{
  background:var(--ink); color:var(--paper);
  padding:64px 0; text-align:center;
}
.cta-band h2{ font-size:clamp(28px,3.4vw,40px); color:var(--paper); }
.cta-band p{
  margin:18px auto 30px; max-width:52ch;
  color:rgba(251,250,246,.68); font-size:17.5px;
}

/* ==========================================================================
   FORMS
   ========================================================================== */
.formcard{
  background:#fff; border:1px solid var(--ink);
  border-radius:4px; overflow:hidden;
  box-shadow:6px 6px 0 rgba(16,35,31,.07);
  padding:28px 26px 30px;
  color:var(--ink);
}
.formcard > p{ font-size:14.5px; color:var(--muted); margin:0 0 22px; }

/* optional header strip — <div class="formcard__head"> */
.formcard__head{
  margin:-28px -26px 24px;
  background:var(--ink); color:var(--paper);
  padding:15px 26px;
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
}
.formcard__head span{
  color:rgba(251,250,246,.5); font-weight:400;
  font-size:10.5px; letter-spacing:0.08em;
}

#prefillNote{
  background:var(--manila); border-left:3px solid var(--seal);
  padding:11px 14px; margin:0 0 20px;
  font-size:12.5px; letter-spacing:0.04em; color:var(--ink);
}

.field{ margin-bottom:18px; }
.field label{
  display:block;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:var(--muted); margin-bottom:7px;
}
.req{ color:var(--stamp); }

.field input,
.field select,
.field textarea{
  width:100%;
  font-family:var(--f-body); font-size:16px; color:var(--ink);
  padding:12px 13px;
  border:1px solid var(--rule); border-radius:3px;
  background:var(--paper);
  transition:border-color .16s ease, box-shadow .16s ease;
}
.field textarea{ resize:vertical; min-height:88px; }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none; border-color:var(--seal);
  box-shadow:0 0 0 3px rgba(11,110,91,.13);
}

.field__error{
  display:none;
  font-family:var(--f-mono); font-size:11px; letter-spacing:0.04em;
  color:var(--stamp); margin-top:6px;
}
.field.has-error input,
.field.has-error select,
.field.has-error textarea{ border-color:var(--stamp); }
.field.has-error .field__error{ display:block; }

.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

/* segmented radio control — Export / Import */
.seg{
  display:grid; grid-template-columns:1fr 1fr;
  border:1px solid var(--rule); border-radius:3px; overflow:hidden;
}
.seg input{ position:absolute; opacity:0; pointer-events:none; }
.seg label{
  margin:0; padding:12px 10px; text-align:center; cursor:pointer;
  font-family:var(--f-body); font-size:14.5px; font-weight:500;
  letter-spacing:0; text-transform:none; color:var(--muted);
  background:var(--paper);
  transition:background .16s ease, color .16s ease;
}
.seg label + input + label{ border-left:1px solid var(--rule); }
.seg input:checked + label{ background:var(--seal); color:#fff; }
.seg input:focus-visible + label{ outline:2px solid var(--carbon); outline-offset:-2px; }

.form__hidden{ position:absolute; left:-9999px; }

.form__submit{ width:100%; }

.form__hint{
  margin:14px 0 0;
  font-size:13px; color:var(--muted); line-height:1.5;
}

.form__success{
  display:none;
  border:1px solid var(--seal); border-left-width:3px;
  background:var(--manila); border-radius:3px;
  padding:24px 22px;
}
.form__success.is-visible{ display:block; }
.form__success h3{ font-size:20px; margin-bottom:8px; color:var(--seal); }
.form__success p{ margin:0; color:var(--muted); font-size:15px; }

/* ==========================================================================
   CONTACT
   ========================================================================== */
.contact-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1px; background:var(--rule);
  border:1px solid var(--rule); border-radius:4px; overflow:hidden;
}
.contact-cell{ background:var(--paper); padding:22px 20px; }
.contact-cell strong{
  display:block;
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:var(--muted); margin-bottom:9px;
}
.contact-cell a,
.contact-cell span{ font-size:15.5px; color:var(--ink); text-decoration:none; }
.contact-cell a{ color:var(--seal); }
.contact-cell a:hover{ text-decoration:underline; }

/* ==========================================================================
   FAQ
   ========================================================================== */
.faq{ border-top:1px solid var(--rule); }
.faq details{ border-bottom:1px solid var(--rule); }
.faq summary{
  list-style:none; cursor:pointer;
  padding:22px 0;
  display:flex; justify-content:space-between; gap:24px;
  font-family:var(--f-display); font-weight:600; font-size:18.5px;
  letter-spacing:-0.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:'+'; font-family:var(--f-mono); font-weight:400;
  font-size:22px; color:var(--seal); flex-shrink:0; line-height:1;
}
.faq details[open] summary::after{ content:'–'; }
.faq details p{
  margin:0 0 24px; max-width:78ch;
  color:var(--muted); font-size:15.5px;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer{ background:var(--ink); color:var(--paper); padding:64px 0 34px; }
.footer__row{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:44px; }
.footer__brand .nav__brand-text{ color:var(--paper); }
.footer__brand p{
  color:rgba(251,250,246,.6); font-size:14.5px;
  max-width:36ch; margin:16px 0 0;
}
.footer__links h4{
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.14em; text-transform:uppercase;
  color:rgba(251,250,246,.45); margin-bottom:15px;
}
.footer__links ul{ list-style:none; padding:0; margin:0; }
.footer__links li{ margin-bottom:9px; }
.footer__links a{
  text-decoration:none; font-size:14.5px;
  color:rgba(251,250,246,.82);
}
.footer__links a:hover{ color:var(--seal-lite); }
.footer__fine{
  margin-top:52px; padding-top:22px;
  border-top:1px solid rgba(251,250,246,.14);
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px;
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:0.06em;
  color:rgba(251,250,246,.45);
}
.footer__fine p{ margin:0; }

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */
@media (max-width:1000px){
  .hero__grid{
    grid-template-columns:1fr;
    grid-template-areas:"intro" "form" "aside";
    row-gap:36px;
  }
  .split{ grid-template-columns:1fr; gap:40px; }
  .svc-grid,
  .trust__list,
  .lane-grid,
  .product-grid{ grid-template-columns:repeat(2,1fr); }
  .footer__row{ grid-template-columns:1fr 1fr; gap:36px; }

  .nav__links{
    display:none;
    position:absolute; top:70px; left:0; right:0;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--paper); border-bottom:1px solid var(--rule);
    padding:8px var(--gut) 18px;
  }
  .nav__links.is-open{ display:flex; }
  .nav__links a{ padding:13px 0; border-bottom:1px solid var(--rule); }
  .nav__cta{
    margin-top:12px; text-align:center;
    border-bottom:0 !important;
  }
  .nav__toggle{ display:block; }
}

@media (max-width:660px){
  body{ font-size:16px; }
  .section{ padding:60px 0; }
  .section--tight{ padding:44px 0; }
  .hero{ padding:40px 0 44px; }
  .steps,
  .why-grid,
  .svc-grid,
  .trust__list,
  .lane-grid,
  .product-grid{ grid-template-columns:1fr; }
  .why-grid{ gap:30px; }
  .footer__row{ grid-template-columns:1fr; }
  .field-row{ grid-template-columns:1fr; }
  .seg{ grid-template-columns:1fr; }
  .seg label + input + label{ border-left:0; border-top:1px solid var(--rule); }
  .manifest__cols,
  .manifest__row{ grid-template-columns:1fr 56px 70px; padding-left:16px; padding-right:16px; }
  .manifest__foot{ flex-direction:column; align-items:flex-start; }
  .formcard{ padding:22px 18px 24px; }
  .formcard__head{ margin:-22px -18px 20px; padding:14px 18px; }
  .hero__ctas .btn{ flex:1 1 100%; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .ticker__track,
  .stamp-wrap{ animation:none; }
}

/* ==========================================================================
   CREDENTIALS STRIP
   The single highest-value trust element. Competitors put memberships
   above the fold; this sits directly under the hero.
   ========================================================================== */
.creds{
  border-top:1px solid var(--rule); border-bottom:1px solid var(--rule);
  background:var(--paper); padding:18px 0;
}
.creds__row{
  display:flex; flex-wrap:wrap; align-items:center; gap:14px 30px;
  justify-content:center;
}
.creds__label{
  font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  letter-spacing:0.16em; text-transform:uppercase; color:var(--muted);
}
.creds__item{
  display:flex; align-items:baseline; gap:8px;
  font-size:14.5px; font-weight:600;
}
.creds__item small{
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}
.creds__item::before{
  content:''; width:7px; height:7px; border-radius:50%;
  background:var(--seal); flex-shrink:0; align-self:center;
}

/* ==========================================================================
   TOOLS — calculators and reference
   Every serious competitor leads with free tools. These are pure
   arithmetic and published standards, so nothing here can go stale.
   ========================================================================== */
.tools__card{
  border:1px solid var(--ink); background:#fff;
  border-radius:4px; overflow:hidden;
  box-shadow:6px 6px 0 rgba(16,35,31,.07);
}
.tools__tabs{
  display:flex; background:var(--ink);
  overflow-x:auto; scrollbar-width:none;
}
.tools__tabs::-webkit-scrollbar{ display:none; }
.tools__tab{
  flex:1 1 auto; white-space:nowrap;
  background:transparent; border:0; cursor:pointer;
  padding:15px 20px;
  font-family:var(--f-mono); font-size:11.5px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase;
  color:rgba(251,250,246,.55);
  border-bottom:2px solid transparent;
  transition:color .16s ease, border-color .16s ease;
}
.tools__tab:hover{ color:var(--paper); }
.tools__tab[aria-selected="true"]{
  color:var(--paper); border-bottom-color:var(--seal-lite);
}
.tools__panel{ padding:28px 26px 30px; }
.tools__panel[hidden]{ display:none; }
.tools__intro{ margin:0 0 22px; font-size:14.5px; color:var(--muted); max-width:64ch; }

.calc-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.calc-grid--3{ grid-template-columns:repeat(3,1fr); }
.calc-grid .field{ margin-bottom:0; }

.tools__out{
  margin-top:24px; padding:20px 22px;
  background:var(--manila); border:1px solid var(--rule);
  border-left:3px solid var(--seal); border-radius:3px;
}
.tools__figs{ display:flex; flex-wrap:wrap; gap:28px 44px; }
.tools__fig strong{
  display:block;
  font-family:var(--f-display); font-weight:700; font-size:27px;
  letter-spacing:-0.02em; line-height:1.1;
}
.tools__fig span{
  display:block; margin-top:4px;
  font-family:var(--f-mono); font-size:10.5px; font-weight:500;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
}
.tools__note{
  margin:18px 0 0; font-size:12.5px; color:var(--muted);
  line-height:1.55; max-width:70ch;
}
.tools__actions{ margin-top:20px; display:flex; flex-wrap:wrap; gap:12px; }

/* Incoterms reference table */
.terms-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
.terms-table th{
  text-align:left; padding:11px 12px;
  border-bottom:1px solid var(--ink);
  font-family:var(--f-mono); font-size:10px; font-weight:600;
  letter-spacing:0.12em; text-transform:uppercase; color:var(--muted);
  white-space:nowrap;
}
.terms-table td{ padding:12px; border-bottom:1px solid var(--rule); vertical-align:top; }
.terms-table tr:last-child td{ border-bottom:0; }
.terms-table td:first-child{
  font-family:var(--f-mono); font-weight:600; color:var(--seal); white-space:nowrap;
}
.terms-table .who{ font-size:13.5px; color:var(--muted); }
.terms-wrap{ overflow-x:auto; }

/* ==========================================================================
   TESTIMONIALS
   ========================================================================== */
.quotes{ display:grid; grid-template-columns:repeat(3,1fr); gap:1px;
  background:var(--rule); border:1px solid var(--rule);
  border-radius:4px; overflow:hidden; }
.quote-card{ background:var(--paper); padding:28px 24px; display:flex; flex-direction:column; }
.quote-card p{
  margin:0 0 20px; font-size:16px; line-height:1.6;
  font-family:var(--f-display); font-weight:500; letter-spacing:-0.01em;
}
.quote-card p::before{ content:'“'; color:var(--seal); }
.quote-card p::after{ content:'”'; color:var(--seal); }
.quote-card__who{ margin-top:auto; padding-top:16px; border-top:1px solid var(--rule); }
.quote-card__who strong{ display:block; font-size:14.5px; font-weight:600; }
.quote-card__who span{
  display:block; margin-top:2px;
  font-family:var(--f-mono); font-size:10.5px;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--muted);
}

/* ==========================================================================
   STICKY MOBILE ACTION BAR
   Mobile-first market, WhatsApp-first buyer. Puts the two actions that
   actually convert within thumb reach at every scroll position.
   ========================================================================== */
.actionbar{ display:none; }
@media (max-width:820px){
  .actionbar{
    display:grid; grid-template-columns:1fr 1fr;
    position:fixed; left:0; right:0; bottom:0; z-index:80;
    background:var(--paper);
    border-top:1px solid var(--rule);
    box-shadow:0 -4px 16px rgba(16,35,31,.08);
    padding-bottom:env(safe-area-inset-bottom);
  }
  .actionbar__btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    padding:15px 10px; text-decoration:none;
    font-size:15px; font-weight:600;
    border:0; cursor:pointer; font-family:var(--f-body);
  }
  .actionbar__btn--wa{ background:var(--seal); color:#fff; }
  .actionbar__btn--quote{ background:var(--paper); color:var(--ink); }
  .actionbar__btn svg{ width:17px; height:17px; flex-shrink:0; }
  body{ padding-bottom:58px; }
}

/* ==========================================================================
   BACK TO TOP
   ========================================================================== */
.totop{
  position:fixed; right:22px; bottom:22px; z-index:70;
  width:42px; height:42px; border-radius:3px;
  background:var(--ink); color:var(--paper);
  border:0; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  opacity:0; pointer-events:none;
  transition:opacity .22s ease;
}
.totop.is-visible{ opacity:.92; pointer-events:auto; }
.totop:hover{ opacity:1; }
@media (max-width:820px){ .totop{ bottom:72px; right:14px; } }

@media (max-width:1000px){
  .calc-grid, .calc-grid--3{ grid-template-columns:1fr 1fr; }
  .quotes{ grid-template-columns:1fr; }
}
@media (max-width:660px){
  .calc-grid, .calc-grid--3{ grid-template-columns:1fr; }
  .tools__panel{ padding:22px 18px 24px; }
  .tools__figs{ gap:20px 30px; }
  .creds__row{ justify-content:flex-start; gap:12px 20px; }
}