/* ============================================================
   GLOBAL IMPORT EXPORT — "World-trade map" design system
   Deep maritime navy · brass/gold · muted teal
   Signature: full-bleed animated SVG world map + dotted route lines
   Typography: authoritative serif headings · condensed display labels
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=Oswald:wght@400;500;600&display=swap');

:root{
  --navy-950:#03090f;
  --navy-900:#06121c;
  --navy-800:#0a1b28;
  --navy-700:#0f2433;
  --navy-600:#143045;
  --teal:#2c6e68;
  --teal-bright:#47a094;
  --teal-deep:#1e4d48;
  --brass:#c8a24a;
  --brass-bright:#e6c66a;
  --brass-deep:#94731f;
  --brass-muted:#87784b;
  --paper:#f6f2e8;
  --cream:#eee7d6;
  --white:#ffffff;
  --ink:#17212a;
  --ink-soft:#3c4a55;
  --ink-muted:#647583;
  --line:#ddd5c3;
  --line-soft:rgba(200,162,74,.30);

  --display:"Oswald","Arial Narrow","Franklin Gothic Medium","Helvetica Neue",sans-serif;
  --serif:"Fraunces",Georgia,"Times New Roman",serif;
  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;

  --maxw:1200px;
}

/* ---------- Reset ---------- */
*,*::before,*::after{ box-sizing:border-box; }
*{ margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans); color:var(--ink); background:var(--paper);
  line-height:1.65; font-size:16px; -webkit-font-smoothing:antialiased;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; }
ul,ol{ list-style:none; }
button{ font-family:inherit; cursor:pointer; }

/* ---------- Typography ---------- */
h1,h2,h3,h4{ font-family:var(--serif); color:var(--navy-800); line-height:1.1; font-weight:600; letter-spacing:-.01em; }
h1{ font-size:clamp(2.2rem,5vw,4rem); font-weight:600; }
h2{ font-size:clamp(1.7rem,3.4vw,2.7rem); }
h3{ font-size:clamp(1.17rem,2vw,1.45rem); }
p{ margin-bottom:1rem; }

.eyebrow{
  font-family:var(--display); font-weight:500; letter-spacing:.26em;
  text-transform:uppercase; font-size:.72rem; color:var(--brass-deep);
  margin-bottom:.85rem; display:flex; align-items:center; gap:.6rem;
}
.eyebrow::before{ content:""; width:26px; height:1px; background:var(--brass); }

.lede{ font-size:1.12rem; color:var(--ink-soft); }
.lede strong{ color:var(--navy-800); }
.section-title{ margin-bottom:.45rem; }

.label-cond{
  font-family:var(--display); font-weight:500; letter-spacing:.18em;
  text-transform:uppercase; font-size:.78rem; color:var(--brass-deep);
}

/* ---------- Layout ---------- */
.container{ width:100%; max-width:var(--maxw); margin:0 auto; padding:0 clamp(1.15rem,3.5vw,2.5rem); }
.section{ padding:clamp(3.5rem,7vw,6rem) 0; }
.section--tight{ padding:clamp(2.5rem,5vw,4rem) 0; }
.section--navy{ background:linear-gradient(165deg,var(--navy-700) 0%,var(--navy-950) 100%); color:#d7e0e6; }
.section--navy h2,.section--navy h3{ color:#f6f1e5; }
.section--navy .lede{ color:#aebcc6; }
.section--navy .eyebrow{ color:var(--brass-bright); }
.section--navy .eyebrow::before{ background:var(--brass-bright); }
.section--cream{ background:var(--cream); }
.section--white{ background:var(--white); }
.section--teal{ background:linear-gradient(150deg,var(--navy-600),var(--teal-deep)); color:#d7e6e2; }
.section--teal h2,.section--teal h3{ color:#f4f9f7; }
.lead-row{ max-width:780px; }
.center{ text-align:center; }
.center .lead-row{ margin:0 auto; }
.center .eyebrow{ justify-content:center; }
.center .eyebrow::before{ display:none; }

/* ---------- Header ---------- */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(6,18,28,.97); backdrop-filter:saturate(140%) blur(9px);
  border-bottom:1px solid var(--line-soft);
}
.topbar{ border-bottom:1px solid rgba(255,255,255,.06); }
.topbar-inner{
  display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.4rem;
  min-height:36px; padding-block:.45rem;
  font-family:var(--display); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
  color:#7f96a5;
}
.topbar-item{ white-space:nowrap; }
.topbar-item b{ color:var(--brass-bright); font-weight:500; }
.topbar-mid{ color:#5e7686; }
.topbar-link{ color:#9fb3c0; text-decoration:none; transition:color .15s ease; }
.topbar-link:hover{ color:var(--brass-bright); }
.lang-switch{
  display:inline-flex; align-items:center; gap:.45rem; margin-left:auto;
  font-family:var(--display); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase;
}
.lang-switch .lang-link{ color:#9fb3c0; text-decoration:none; transition:color .15s ease; }
.lang-switch .lang-link:hover{ color:var(--brass-bright); }
.lang-switch .lang-link.is-active{ color:var(--brass-bright); font-weight:600; }
.lang-switch .lang-sep{ color:#4a6272; }
.nav-wrap{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; height:78px; position:relative; }
.brand{ display:inline-flex; align-items:center; gap:.8rem; text-decoration:none; }
.brand-mark{ flex:0 0 auto; }
.brand-text{ display:flex; flex-direction:column; line-height:1.05; }
.brand-text .t{
  font-family:var(--serif); font-weight:700; font-size:1.06rem; color:#f6f1e5;
  letter-spacing:.05em; white-space:nowrap;
}
.brand-text .s{ font-family:var(--display); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--brass); }

.site-nav{ display:flex; align-items:center; gap:.15rem; }
.site-nav a{
  color:#c6d3dd; text-decoration:none; font-family:var(--display); font-weight:500;
  font-size:.8rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.55rem .68rem; border-radius:0; transition:color .18s ease, background .18s ease; position:relative;
}
.site-nav a:hover{ color:#fff; }
.site-nav a:hover::after,
.site-nav a[aria-current="page"]::after{
  content:""; position:absolute; left:.68rem; right:.68rem; bottom:.34rem; height:1px; background:var(--brass);
}
.site-nav a[aria-current="page"]{ color:var(--brass-bright); }
.site-nav .nav-cta{
  margin-left:.5rem; border:1px solid var(--brass); color:var(--brass-bright);
  padding:.6rem 1.05rem; background:rgba(200,162,74,.06);
}
.site-nav .nav-cta:hover{ background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:var(--navy-950); }
.site-nav .nav-cta::after{ display:none; }
.nav-toggle{
  display:none; background:none; border:1px solid rgba(200,162,74,.45); border-radius:0;
  width:44px; height:44px; position:relative; flex:0 0 auto;
}
.nav-toggle span{ display:block; width:20px; height:2px; background:var(--brass); margin:0 auto; transition:transform .2s ease, opacity .2s ease; }
.nav-toggle span + span{ margin-top:5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ---------- Home hero (full-bleed world map) ---------- */
.hero{
  position:relative; isolation:isolate; overflow:hidden; color:#e9eef2;
  min-height:600px; min-height:min(96svh,900px); display:flex; align-items:center;
  background:
    radial-gradient(1200px 620px at 82% -10%, rgba(44,110,104,.30), transparent 60%),
    radial-gradient(900px 500px at -6% 110%, rgba(200,162,74,.16), transparent 55%),
    linear-gradient(165deg, var(--navy-700) 0%, var(--navy-950) 78%);
}
.hero-map{ position:absolute; inset:0; z-index:0; }
.hero-map svg{ width:100%; height:100%; transform:none; }
.hero-scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(90deg, rgba(3,9,15,.78) 0%, rgba(3,9,15,.42) 44%, rgba(3,9,15,.06) 74%),
    linear-gradient(180deg, rgba(3,9,15,.35) 0%, transparent 28%, transparent 62%, rgba(3,9,15,.55) 100%);
}
.hero .container{ position:relative; z-index:2; }
.hero-copy{ max-width:780px; }
.hero h1{ color:#f8f3e6; font-size:clamp(2.3rem,5.2vw,4.4rem); }
.hero .kicker{
  display:inline-flex; align-items:center; gap:.7rem;
  font-family:var(--display); font-size:.7rem; letter-spacing:.28em; text-transform:uppercase;
  color:var(--brass-bright); border:1px solid rgba(200,162,74,.42); padding:.5rem 1rem; margin-bottom:1.5rem; font-weight:500;
}
.hero .kicker::before{ content:""; width:8px; height:8px; border-radius:50%; background:var(--brass-bright); box-shadow:0 0 0 4px rgba(230,198,106,.22); }
.hero .lede{ color:#c0cdd6; font-size:1.18rem; margin-top:1.15rem; max-width:660px; }
.hero-actions{ display:flex; flex-wrap:wrap; gap:.9rem; margin-top:2rem; }
.hero-tags{ display:flex; flex-wrap:wrap; gap:.55rem; margin-top:1.9rem; }
.hero-tags span{
  font-family:var(--display); font-size:.72rem; letter-spacing:.12em; text-transform:uppercase;
  color:#c6d3dc; border:1px dashed rgba(230,198,106,.3); padding:.4rem .75rem;
}

/* map drawing primitives */
.grat{ stroke:rgba(71,160,148,.13); }
.land{ fill:rgba(44,110,104,.10); stroke:rgba(71,160,148,.32); stroke-dasharray:1.2 5; stroke-width:1.1; }
.sea-lane{ fill:none; stroke:rgba(200,162,74,.16); stroke-width:1; stroke-dasharray:2 6; }
.marker{ fill:var(--brass-bright); }
.marker-ring{
  fill:none; stroke:var(--brass-bright); stroke-width:1.2; transform-box:fill-box; transform-origin:center;
  animation:marker-pulse 2.8s ease-out infinite;
}
.marker--teal{ fill:var(--teal-bright); }
.map-label{ font-family:var(--display); font-size:11px; letter-spacing:.16em; fill:rgba(230,198,106,.72); text-transform:uppercase; }
.map-label--dim{ fill:rgba(127,150,165,.7); }

.arc{
  fill:none; stroke:var(--brass-bright); stroke-width:1.4; stroke-linecap:round;
  stroke-dasharray:3 9; opacity:.85; animation:arc-flow 4.5s linear infinite;
}
.arc--teal{ stroke:var(--teal-bright); opacity:.8; animation-duration:6.5s; }
.arc--dim{ stroke:var(--brass); opacity:.5; animation-duration:7.5s; }
@keyframes arc-flow{ to{ stroke-dashoffset:-160; } }
@keyframes marker-pulse{ 0%{ transform:scale(.35); opacity:.9; } 70%{ transform:scale(2.7); opacity:0; } 100%{ opacity:0; } }

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.55rem; text-decoration:none;
  font-family:var(--display); font-weight:500; font-size:.86rem; letter-spacing:.12em; text-transform:uppercase;
  padding:.82rem 1.5rem; border:1px solid transparent; transition:transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease;
}
.btn:hover{ transform:translateY(-2px); }
.btn--gold{ background:linear-gradient(180deg,var(--brass-bright),var(--brass)); color:var(--navy-950); box-shadow:0 8px 24px rgba(200,162,74,.28); }
.btn--gold:hover{ box-shadow:0 12px 30px rgba(200,162,74,.4); }
.btn--outline{ color:#e6edf2; border-color:rgba(200,162,74,.6); background:rgba(200,162,74,.06); }
.btn--outline:hover{ background:rgba(200,162,74,.18); color:#fff; }
.btn--navy{ background:var(--navy-800); color:#f5efe0; }
.btn--navy:hover{ background:var(--navy-700); }
.btn--ghost{ border-color:var(--line); color:var(--navy-800); background:var(--white); }
.btn--ghost:hover{ border-color:var(--brass); background:var(--cream); }
.btn--lg{ padding:1rem 1.8rem; font-size:.92rem; }

/* ---------- Stat band ---------- */
.stat-band{
  background:
    linear-gradient(180deg, rgba(200,162,74,.11) 0%, rgba(200,162,74,.03) 55%, rgba(3,9,15,0) 100%),
    var(--navy-900);
  border-block:1px solid var(--line-soft);
}
.band{ display:grid; grid-template-columns:repeat(4,1fr); }
.band-stat{
  padding:clamp(1.7rem,3.5vw,2.7rem) clamp(1rem,2.5vw,2.2rem);
  border-left:1px dashed rgba(200,162,74,.22);
}
.band-stat:first-child{ border-left:none; }
.band-stat .n{
  font-family:var(--display); font-weight:500; font-size:clamp(2.2rem,5vw,3.6rem);
  line-height:1; color:var(--brass-bright); letter-spacing:.02em;
}
.band-stat .n sup{ font-size:.45em; color:var(--brass); vertical-align:super; }
.band-stat .l{
  margin-top:.65rem; font-family:var(--display); font-size:.72rem; letter-spacing:.14em;
  text-transform:uppercase; color:#93a9b6;
}

/* ---------- Shipping-route rows (products) ---------- */
.routes{ display:flex; flex-direction:column; gap:1.3rem; margin-top:2.6rem; }
.route-row{
  position:relative; border:1px solid var(--line); background:var(--paper);
  padding:clamp(1.4rem,2.6vw,2.1rem) clamp(1.3rem,2.6vw,2.2rem);
}
.route-row::after{
  content:""; position:absolute; top:-1px; left:1.4rem; right:1.4rem; height:3px;
  background:var(--brass);
}
.route-head{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:1.2rem; }
.route-tag{ font-family:var(--display); letter-spacing:.2em; text-transform:uppercase; font-size:.7rem; }
.route-origin{ color:var(--teal-deep); text-align:left; }
.route-origin b,.route-dest b{ color:var(--navy-800); font-weight:600; display:block; font-size:.95rem; letter-spacing:.04em; font-family:var(--serif); }
.route-dest{ color:var(--brass-deep); text-align:right; }
.route-track{ position:relative; min-width:220px; }
.route-track svg{ width:100%; height:44px; overflow:visible; }
.route-dash{ fill:none; stroke:var(--brass); stroke-width:1.4; stroke-dasharray:5 6; animation:arc-flow 7s linear infinite; }
.route-arrow{ fill:none; stroke:var(--teal); stroke-width:1.6; stroke-linecap:round; }
.route-body{ display:grid; grid-template-columns:auto 1fr auto; gap:1.5rem; align-items:center; margin-top:1.5rem; padding-top:1.4rem; border-top:1px dashed var(--line); }
.route-body h3{ margin-bottom:.45rem; }
.route-body p{ color:var(--ink-soft); margin-bottom:0; max-width:560px; }
.route-more{ color:var(--brass-deep); font-family:var(--display); letter-spacing:.12em; text-transform:uppercase; font-size:.8rem; text-decoration:none; white-space:nowrap; }
.route-more:hover{ color:var(--navy-800); }

/* ---------- Compact process timeline ---------- */
.timeline{ display:grid; grid-template-columns:repeat(3,1fr); margin-top:3.2rem; position:relative; }
.timeline::before{
  content:""; position:absolute; top:13px; left:0; right:0; height:2px;
  background-image:repeating-linear-gradient(90deg, var(--brass) 0 5px, transparent 5px 12px);
}
.t-step{ position:relative; padding:0 clamp(1rem,2.4vw,2rem); }
.t-num{
  position:relative; z-index:1; display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:var(--navy-800); color:var(--brass-bright);
  font-family:var(--display); font-size:.82rem; letter-spacing:.06em;
  border:1px solid var(--brass); margin-bottom:1.1rem;
}
.t-step h3{ margin-bottom:.5rem; }
.t-step p{ color:#c9d6dd; font-size:.95rem; }

/* ---------- Ledger index (capabilities) ---------- */
.ledger{ border-top:1px solid var(--line); margin-top:2.8rem; }
.ledger-item{
  display:grid; grid-template-columns:auto 58px 1fr; gap:1.4rem; align-items:start;
  padding:1.25rem 0; border-bottom:1px solid var(--line);
}
.ledger-item .idx{ font-family:var(--display); color:var(--brass-deep); font-size:.8rem; letter-spacing:.14em; padding-top:.35rem; }
.ledger-item .ico{ width:44px; height:44px; color:var(--navy-800); }
.ledger-item h3{ margin-bottom:.35rem; font-size:1.18rem; }
.ledger-item p{ color:var(--ink-soft); margin-bottom:0; }

/* ---------- Feature / split ---------- */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(1.8rem,4.5vw,4rem); align-items:center; }
.split--right{ grid-template-columns:.9fr 1.1fr; }
.split-art{
  background:linear-gradient(160deg,var(--navy-800),var(--navy-600));
  border:1px solid var(--line-soft); padding:1.8rem; position:relative; overflow:hidden;
}
.check-list li{ display:flex; gap:.7rem; margin-bottom:.85rem; color:var(--ink-soft); }
.check-list li::before{
  content:""; flex:0 0 auto; width:16px; height:16px; margin-top:.32em;
  background:var(--teal);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size:11px; background-position:center; background-repeat:no-repeat;
}
.section--navy .check-list li{ color:#b9c6cf; }
.section--navy .check-list li::before{ background:var(--brass); background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 8.4l2.4 2.4L12 5.2' fill='none' stroke='%230a1b28' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.check-list strong{ color:var(--navy-800); }
.section--navy .check-list strong{ color:#f6f1e5; }

/* ---------- Cards (reskinned to ledger, non-uniform) ---------- */
.card-grid{ display:grid; gap:1.4rem; }
.g-2{ grid-template-columns:repeat(2,1fr); }
.g-3{ grid-template-columns:repeat(3,1fr); }
.g-4{ grid-template-columns:repeat(4,1fr); }
.card{
  background:var(--white); border:none; border-top:3px solid var(--brass);
  border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line);
  padding:1.6rem 1.5rem; position:relative;
}
.card h3{ margin-bottom:.6rem; }
.card p{ color:var(--ink-soft); font-size:.98rem; }
.card .card-num{ font-family:var(--display); font-size:.78rem; color:var(--brass-deep); letter-spacing:.16em; text-transform:uppercase; }
.card .ico{ width:46px; height:46px; margin-bottom:1rem; color:var(--navy-800); }
.card--navy{
  background:linear-gradient(170deg,var(--navy-600),var(--navy-900)); color:#d6e0e7; border-top:3px solid var(--brass);
  border-left:1px solid rgba(200,162,74,.2); border-right:1px solid rgba(200,162,74,.2); border-bottom:1px solid rgba(200,162,74,.2);
}
.card--navy h3{ color:#f6f1e5; }
.card--navy p{ color:#b8c6cf; }
.card--line{ }
.more{ color:var(--brass-deep); font-family:var(--display); font-weight:500; letter-spacing:.1em; text-transform:uppercase; font-size:.8rem; text-decoration:none; }
.more:hover{ color:var(--navy-800); }

/* ---------- Stats (legacy grid fallback) ---------- */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.2rem; }
.stat{ border:1px dashed var(--line-soft); padding:1.5rem 1.2rem; text-align:center; background:rgba(12,31,44,.4); }
.stat .n{ font-family:var(--display); font-size:clamp(1.9rem,3.6vw,2.7rem); font-weight:500; color:var(--brass-bright); }
.stat .l{ font-family:var(--display); font-size:.74rem; letter-spacing:.1em; text-transform:uppercase; color:#c2d0d9; margin-top:.3rem; }

/* ---------- Table ---------- */
.table-wrap{ overflow-x:auto; border:1px solid var(--line); background:var(--white); }
table{ width:100%; border-collapse:collapse; font-size:.95rem; min-width:560px; }
th,td{ text-align:left; padding:.95rem 1.1rem; border-bottom:1px solid var(--line); vertical-align:top; }
th{ background:var(--navy-800); color:#e9d9a8; font-family:var(--display); font-weight:500; font-size:.76rem; letter-spacing:.14em; text-transform:uppercase; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:nth-child(even){ background:var(--cream); }
td:first-child, th:first-child{ font-weight:600; color:var(--navy-800); }

/* ---------- Forms ---------- */
.form-card{ background:var(--white); border:1px solid var(--line); border-top:4px solid var(--brass); padding:clamp(1.5rem,3vw,2.4rem); }
.form-card--navy{ background:linear-gradient(170deg,var(--navy-600),var(--navy-900)); border-color:rgba(200,162,74,.25); }
.form-card--navy h3{ color:#f6f1e5; }
.form-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.field{ display:flex; flex-direction:column; gap:.4rem; }
.field--full{ grid-column:1 / -1; }
.field label{ font-family:var(--display); font-weight:500; letter-spacing:.08em; text-transform:uppercase; font-size:.78rem; color:var(--navy-800); }
.form-card--navy .field label{ color:#dfe7ec; }
.field .req{ color:var(--brass-deep); }
input,select,textarea{
  font-family:inherit; font-size:.97rem; color:var(--ink);
  padding:.75rem .85rem; border:1px solid #cfc9b9; border-radius:0; background:#fffdf8;
  transition:border-color .15s ease, box-shadow .15s ease;
}
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--brass); box-shadow:0 0 0 3px rgba(200,162,74,.22); }
textarea{ resize:vertical; min-height:110px; }
.field-hint{ font-size:.78rem; color:var(--ink-muted); }
.form-success{ display:none; margin-top:1rem; padding:1rem 1.1rem; background:#e8f2ee; border:1px solid #a8cfc4; border-left:4px solid var(--teal); color:#17524b; font-weight:500; }
.form-success.show{ display:block; }

/* ---------- Motifs (legacy route primitives) ---------- */
.route-line{ stroke:var(--brass); stroke-width:1.4; stroke-dasharray:4 5; fill:none; opacity:.85; }
.route-solid{ stroke:var(--teal-bright); stroke-width:1.2; fill:none; }
.route-dot{ fill:var(--brass-bright); }
.motif-navy text{ fill:#cfdbe3; }

/* ---------- Page hero / breadcrumb ---------- */
.page-hero{
  position:relative; isolation:isolate; overflow:hidden;
  background:
    radial-gradient(1000px 480px at 85% -20%, rgba(44,110,104,.34), transparent 60%),
    linear-gradient(165deg,var(--navy-700) 0%,var(--navy-950) 100%);
  color:#d9e2e9; padding:clamp(3rem,6vw,5rem) 0; border-bottom:1px solid var(--line-soft);
}
.page-hero::after{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background-image:
    radial-gradient(rgba(71,160,148,.16) 1px, transparent 1.4px);
  background-size:26px 26px; opacity:.55;
}
.page-hero .container{ position:relative; z-index:1; }
.page-hero h1{ color:#f7f2e4; font-size:clamp(2rem,4.2vw,3.4rem); }
.page-hero .lede{ color:#b9c7d0; max-width:780px; }
.breadcrumb{ display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; font-family:var(--display); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:#7f96a5; margin-bottom:1.3rem; }
.breadcrumb a{ color:var(--brass); text-decoration:none; }
.breadcrumb a:hover{ color:var(--brass-bright); }
.breadcrumb .sep{ color:#4a6272; }

/* ---------- Prose (legal) ---------- */
.prose{ max-width:840px; }
.prose h2{ margin:2.4rem 0 .9rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.prose h2:first-child{ border-top:none; padding-top:0; }
.prose h3{ margin:1.5rem 0 .6rem; font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.04em; color:var(--navy-700); }
.prose p,.prose li{ color:var(--ink-soft); }
.prose ul{ margin:.8rem 0 1.2rem 1.1rem; list-style:none; }
.prose ul li{ padding-left:1.1rem; position:relative; margin-bottom:.55rem; }
.prose ul li::before{ content:""; position:absolute; left:0; top:.6em; width:6px; height:6px; background:var(--brass); }
.prose ol{ margin:.8rem 0 1.2rem 1.1rem; list-style:decimal; }
.prose li{ margin-bottom:.5rem; }
.prose .placeholder{ background:#fdf3df; border:1px dashed var(--brass-deep); color:#7a5b16; padding:.05rem .45rem; font-weight:600; white-space:nowrap; }
.prose .callout{ background:var(--cream); border-left:4px solid var(--brass); padding:1.2rem 1.4rem; margin:1.6rem 0; }
.prose .callout--navy{ background:var(--navy-800); border-left-color:var(--brass); color:#d6e0e7; }
.prose .callout--navy p,.prose .callout--navy li{ color:#c2d0d9; }
.prose .callout strong{ color:var(--navy-800); }
.prose .callout--navy strong{ color:var(--brass-bright); }
.prose table{ min-width:520px; margin:1.4rem 0; }
.prose a{ color:#8f6c1a; }

/* ---------- Blog ---------- */
.blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; }
.post{ background:var(--white); border:none; border-top:3px solid var(--brass); border-left:1px solid var(--line); border-right:1px solid var(--line); border-bottom:1px solid var(--line); display:flex; flex-direction:column; overflow:hidden; }
.post-cover{ height:150px; position:relative; overflow:hidden; }
.post-body{ padding:1.4rem; display:flex; flex-direction:column; flex:1; }
.post-meta{ font-family:var(--display); font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--brass-deep); }
.post h3{ margin:.4rem 0 .6rem; }
.post p{ color:var(--ink-soft); font-size:.94rem; flex:1; }

/* ---------- Tag pills ---------- */
.pill{
  display:inline-block; font-family:var(--display); font-size:.7rem; font-weight:500; letter-spacing:.14em; text-transform:uppercase;
  padding:.4rem .8rem; border:1px solid var(--line-soft); color:var(--navy-800); background:var(--white);
}
.pill--gold{ background:rgba(200,162,74,.14); border-color:rgba(200,162,74,.4); color:var(--brass-deep); }
.pill--teal{ background:rgba(44,110,104,.12); border-color:rgba(44,110,104,.35); color:var(--teal-deep); }

/* ---------- Footer (maritime manifest) ---------- */
.site-footer{
  background:linear-gradient(170deg,var(--navy-950) 0%, #020609 100%);
  color:#aebcc6; padding:clamp(3rem,6vw,4.5rem) 0 2rem; border-top:3px solid var(--brass);
}
.footer-brand-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:1.5rem 3rem; justify-content:space-between; padding-bottom:2rem; border-bottom:1px dashed rgba(200,162,74,.28); }
.footer-logo{ display:flex; align-items:center; gap:.7rem; }
.footer-brand-row .brand-text .t{ font-size:1.2rem; }
.footer-tagline{ color:#8fa2af; font-size:.95rem; margin:0; max-width:360px; }
.footer-manifest{ display:grid; grid-template-columns:1.25fr 1fr 1.4fr; gap:2.5rem; padding:2.4rem 0; }
.manifest-block h3{
  color:var(--brass-bright); font-family:var(--display); font-weight:500; font-size:.76rem;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:1rem;
}
.manifest-block ul li{ margin-bottom:.6rem; font-size:.92rem; color:#aebcc6; }
.manifest-block ul li em{ color:#7d90a0; font-style:normal; }
.manifest-block ul li a{ color:#c6d3dd; text-decoration:none; transition:color .15s ease; }
.manifest-block ul li a:hover{ color:var(--brass-bright); }
.manifest-legal .legal-lst{ display:flex; flex-direction:column; }
.footer-bottom{
  padding-top:1.6rem; border-top:1px solid rgba(255,255,255,.08);
  display:flex; flex-wrap:wrap; gap:.8rem; justify-content:space-between; font-size:.84rem; color:#71848f;
}
.footer-bottom b{ color:#c2d0d9; font-weight:600; }

/* ---------- Cookie banner ---------- */
.cookie-banner{
  position:fixed; left:0; right:0; bottom:0; z-index:100; display:none;
  background:rgba(6,18,28,.98); border-top:1px solid rgba(200,162,74,.45);
  box-shadow:0 -10px 40px rgba(6,18,28,.5);
}
.cookie-banner.show{ display:block; }
.cookie-banner::before{ content:""; display:block; height:3px; width:100%; background:repeating-linear-gradient(90deg, var(--brass) 0 8px, transparent 8px 16px); }
.cookie-inner{
  max-width:var(--maxw); margin:0 auto; display:flex; flex-wrap:wrap;
  align-items:center; gap:1rem; justify-content:space-between; padding:1.1rem clamp(1.15rem,3.5vw,2.5rem);
}
.cookie-inner p{ color:#c2d0d9; font-size:.9rem; margin:0; max-width:720px; }
.cookie-inner p a{ color:var(--brass-bright); }
.cookie-btns{ display:flex; gap:.7rem; flex-wrap:wrap; }

/* ---------- Reveal (progressive; visible by default without JS) ---------- */
.reveal{ transition:opacity .6s ease, transform .6s ease; }
html.js-anim .reveal{ opacity:0; transform:translateY(14px); }
html.js-anim .reveal.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  html.js-anim .reveal{ opacity:1; transform:none; transition:none; }
  .arc,.route-dash,.marker-ring{ animation:none !important; }
}

/* ---------- Misc ---------- */
.mt-1{ margin-top:.6rem; }
.mt-2{ margin-top:1.4rem; }
.mt-3{ margin-top:2.2rem; }
.mb-2{ margin-bottom:1.4rem; }
.mb-3{ margin-bottom:2.2rem; }
.small{ font-size:.85rem; color:var(--ink-muted); }
.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-link{ position:absolute; left:-9999px; top:0; background:var(--brass); color:var(--navy-950); padding:.7rem 1rem; z-index:200; font-family:var(--display); letter-spacing:.1em; text-transform:uppercase; }
.skip-link:focus{ left:0; }
.divider-route{ display:block; margin:1.5rem 0; }

/* ---------- Responsive ---------- */
@media (max-width: 960px){
  .hero{ min-height:auto; padding:4.5rem 0 4rem; }
  .hero-copy{ max-width:640px; }
  .band{ grid-template-columns:repeat(2,1fr); }
  .band-stat:nth-child(3){ border-left:none; }
  .band-stat:nth-child(1),.band-stat:nth-child(2){ border-bottom:1px dashed rgba(200,162,74,.22); }
  .split,.split--right{ grid-template-columns:1fr; }
  .g-3,.g-4,.blog-grid{ grid-template-columns:repeat(2,1fr); }
  .timeline{ grid-template-columns:1fr; gap:1.8rem; }
  .timeline::before{ display:none; }
  .t-num{ margin-bottom:.8rem; }
  .route-head{ grid-template-columns:1fr; gap:.9rem; }
  .route-track{ order:2; }
  .route-origin,.route-dest{ text-align:left; }
  .route-body{ grid-template-columns:1fr; gap:.8rem; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .footer-manifest{ grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px){
  .g-2,.g-3,.g-4,.blog-grid,.form-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:1fr 1fr; }
  .band{ grid-template-columns:1fr; }
  .band-stat{ border-left:none; }
  .band-stat:nth-child(1),.band-stat:nth-child(2){ border-bottom:none; }
  .footer-manifest{ grid-template-columns:1fr; gap:1.8rem; }
  .footer-brand-row{ flex-direction:column; }
  .nav-toggle{ display:block; }
  .topbar-inner{ gap:.3rem 1rem; }
  .topbar-mid{ display:none; }
  .site-nav{
    position:absolute; top:78px; left:0; right:0; flex-direction:column; align-items:stretch;
    background:rgba(6,18,28,.99); padding:.6rem 1.2rem 1.3rem; gap:.05rem;
    border-bottom:1px solid rgba(200,162,74,.3); display:none;
  }
  .site-nav.open{ display:flex; }
  .site-nav a{ padding:.74rem .5rem; border-bottom:1px solid rgba(255,255,255,.07); }
  .site-nav a[aria-current="page"]::after{ left:.5rem; right:.5rem; bottom:.2rem; }
  .site-nav .nav-cta{ margin-left:0; text-align:center; }
  .hero{ padding-top:2.8rem; }
  .hero .kicker{ font-size:.62rem; }
  .btn--lg{ width:100%; justify-content:center; }
  .ledger-item{ grid-template-columns:auto 1fr; }
  .ledger-item .ico{ display:none; }
}