/* AA Springbok Transport & Logistics CC: shared site stylesheet.
   Design notes live in DESIGN.md. Colors are tokens; never hardcode a hex below :root. */

/* Self-hosted fonts (SIL Open Font License), latin subset */
@font-face{font-family:'Oswald';font-style:normal;font-weight:500 700;font-display:swap;src:url('fonts/oswald.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Public Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url('fonts/public-sans.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-mono.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --ink:#17202A;
  --navy:#1B4A7A;
  --navy-deep:#0F2E4E;
  --navy-ink:#0B2440;
  --green:#0B6B49;
  --green-deep:#08523A;
  --green-light:#8FE0BE;
  --taupe:#9C8A70;
  --taupe-ink:#6B5C45;
  --sand:#F6F2EA;
  --sand-2:#ECE5D5;
  --paper:#FFFFFF;
  --line:#D8CDB5;
  --line-strong:#B9AB8D;
  --line-dark:rgba(255,255,255,0.2);
  --text-body:#3B3833;
  --text-soft:#59544A;
  --on-dark:#FFFFFF;
  --on-dark-soft:rgba(255,255,255,0.78);
  --error:#B42318;
  --focus:#1B4A7A;

  --font-display:'Oswald', 'Arial Narrow', sans-serif;
  --font-body:'Public Sans', system-ui, sans-serif;
  --font-mono:'IBM Plex Mono', ui-monospace, monospace;

  --fs-display:clamp(2.5rem, 4.6vw, 4rem);
  --fs-h1:clamp(2.1rem, 4.2vw, 3.3rem);
  --fs-h2:clamp(1.75rem, 3.2vw, 2.55rem);
  --fs-h3:1.2rem;
  --fs-lead:clamp(1.06rem, 1.4vw, 1.2rem);
  --fs-label:0.78rem;

  --space-section:clamp(72px, 9vw, 120px);
  --wrap:1200px;
  --gutter:32px;
  --desk-overlap:clamp(32px, 4vw, 56px);
}

*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;scroll-padding-top:24px;-webkit-text-size-adjust:100%;}
@media (min-width: 900px){html{scroll-padding-top:104px;}}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{transition:none !important;animation:none !important;}
}
body{
  margin:0;
  background:var(--sand);
  color:var(--ink);
  font-family:var(--font-body);
  font-size:1rem;
  line-height:1.6;
}
img,svg{max-width:100%;display:block;}
a{color:inherit;}
p{margin:0 0 1em;}
h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.01em;
  line-height:1.1;
  margin:0;
  color:var(--navy-deep);
  text-wrap:balance;
}
:focus-visible{outline:3px solid var(--focus);outline-offset:3px;}
.on-dark :focus-visible{outline-color:var(--green-light);}

.skip-link{
  position:absolute;left:12px;top:-60px;z-index:100;
  background:var(--navy-deep);color:var(--on-dark);padding:10px 16px;font-weight:600;
}
.skip-link:focus{top:12px;}
.visually-hidden{
  position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;
}

.wrap{max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter);}
.section{padding:var(--space-section) 0;}
.rule-top{border-top:1px solid var(--line);}

.label{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:0.1em;
  text-transform:uppercase;
}
.eyebrow{
  font-family:var(--font-mono);
  font-size:var(--fs-label);
  font-weight:600;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:var(--green);
  display:flex;align-items:center;gap:10px;
  margin:0 0 16px;
}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor;flex-shrink:0;}
.on-dark .eyebrow{color:var(--green-light);}

.lead{font-size:var(--fs-lead);color:var(--text-body);max-width:34em;}
.prose p:not(.eyebrow){color:var(--text-body);max-width:36em;}

/* ---------- BUTTONS & LINKS ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  min-height:48px;padding:12px 24px;
  font-family:var(--font-mono);font-size:0.86rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  text-decoration:none;
  border:2px solid transparent;cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn svg{width:18px;height:18px;flex-shrink:0;}
.btn-primary{background:var(--green);color:var(--on-dark);}
.btn-primary:hover{background:var(--green-deep);}
.btn-secondary{border-color:var(--navy);color:var(--navy);background:transparent;}
.btn-secondary:hover{background:var(--navy);color:var(--on-dark);}
.on-dark .btn-secondary{border-color:var(--on-dark);color:var(--on-dark);}
.on-dark .btn-secondary:hover{background:var(--on-dark);color:var(--navy-deep);}
.on-dark .btn-primary{background:var(--on-dark);color:var(--green-deep);}
.on-dark .btn-primary:hover{background:var(--green-light);}

.text-link{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--font-mono);font-size:0.82rem;font-weight:600;letter-spacing:0.06em;text-transform:uppercase;
  color:var(--navy);text-decoration:none;
  border-bottom:2px solid currentColor;padding-bottom:2px;
}
.text-link:hover{color:var(--green);}
.on-dark .text-link{color:var(--on-dark);}
.on-dark .text-link:hover{color:var(--green-light);}

/* ---------- HEADER ---------- */
.site-header{background:var(--sand);border-bottom:1px solid var(--line);position:relative;z-index:50;}
@media (min-width: 900px){
  .site-header{position:sticky;top:0;}
}
.nav{
  max-width:var(--wrap);margin:0 auto;padding:12px var(--gutter);
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.brand{display:block;flex-shrink:0;}
.brand img{height:56px;width:auto;}
.nav-links{display:flex;gap:6px;margin:0;padding:0;list-style:none;}
.nav-links a{
  display:block;padding:10px 14px;
  font-weight:600;font-size:0.95rem;text-decoration:none;color:var(--ink);
  border-bottom:2px solid transparent;
}
.nav-links a:hover{color:var(--green);}
.nav-links a[aria-current="page"]{border-bottom-color:var(--green);color:var(--navy-deep);}
.nav-actions{display:flex;align-items:center;gap:18px;}
.nav-phone{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--font-mono);font-size:0.86rem;font-weight:600;color:var(--navy-deep);text-decoration:none;
}
.nav-phone svg{width:18px;height:18px;}
.nav-phone:hover{color:var(--green);}
.nav-actions .btn{min-height:44px;padding:10px 18px;}

/* ---------- PHOTO HEROES (every page) ---------- */
/* A photo covers the whole hero; a flat navy scrim (no gradient) keeps text at AA contrast. */
.hero-bg{position:relative;isolation:isolate;overflow:hidden;background:var(--navy-ink);color:var(--on-dark);}
.hero-bg .hero-img{position:absolute;inset:0;z-index:-2;margin:0;}
.hero-bg .hero-img img{width:100%;height:100%;object-fit:cover;}
.hero-bg::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--scrim, rgba(11,36,64,0.76));}
.hero-bg.scrim-strong{--scrim:rgba(11,36,64,0.86);}
.hero-bg h1{color:var(--on-dark);}
.hero-bg .lead{color:var(--on-dark);}
.hero-bg .eyebrow{color:var(--on-dark);}
.hero-bg .eyebrow::before{background:var(--green-light);}
.hero-caption{
  position:absolute;right:var(--gutter);bottom:14px;margin:0;
  font-family:var(--font-mono);font-size:0.72rem;letter-spacing:0.06em;text-transform:uppercase;color:var(--on-dark);
}

/* ---------- HOME HERO ---------- */
.hero{display:flex;align-items:center;min-height:clamp(560px, 80vh, 760px);padding:clamp(48px, 6vw, 88px) 0 clamp(64px, 7vw, 96px);}
.hero > .wrap{width:100%;}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;}
.hero h1{font-size:var(--fs-display);font-weight:700;line-height:1.02;margin-bottom:24px;}
.hero h1 em{font-style:normal;color:var(--green-light);}
.hero .lead{margin-bottom:32px;}

/* centred hero text (all pages) */
.hero-center{text-align:center;}
.hero-center .wrap{grid-template-columns:minmax(0,1fr) !important;justify-items:center;}
.hero-center .eyebrow{justify-content:center;}
.hero-center h1{margin-left:auto;margin-right:auto;max-width:17em;}
.hero-center .lead{margin-left:auto;margin-right:auto;}
.hero-center .actions{justify-content:center;}
.hero-center.page-intro{align-items:center;}
.hero-center.page-intro .lead{margin:0 auto;}
.hero-center.routes-band .route-map{max-width:620px;margin:0 auto;}
.hero-center.routes-band .map-note{max-width:40em;margin-left:auto;margin-right:auto;}
.hero-center .hero-caption{left:var(--gutter);right:var(--gutter);text-align:center;}

/* quote desk strip under the home hero */
.desk-strip{padding:0 0 clamp(48px,6vw,72px);}
.desk-strip .waybill{margin-top:calc(var(--desk-overlap) * -1);position:relative;}
.hero:has(+ .desk-strip){padding-bottom:calc(var(--desk-overlap) + 56px);}
.hero:has(+ .desk-strip) .hero-caption{bottom:calc(var(--desk-overlap) + 12px);}
.waybill.horizontal dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));}
.waybill.horizontal .waybill-row{border-top:none;grid-template-columns:minmax(0,1fr);gap:6px;align-content:start;}
.waybill.horizontal .waybill-row + .waybill-row{border-left:1px dashed var(--line-strong);}
.actions{display:flex;flex-wrap:wrap;gap:14px;}

/* waybill: the recurring "document" component */
.waybill{background:var(--paper);border:1px solid var(--line-strong);}
.waybill-head{
  display:flex;justify-content:space-between;align-items:center;gap:12px;
  padding:14px 22px;background:var(--navy-deep);color:var(--on-dark);
}
.waybill-head .label{color:var(--on-dark);}
.waybill-head .label + .label{color:var(--green-light);}
.waybill-row{display:grid;grid-template-columns:7.5em 1fr;gap:16px;padding:16px 22px;border-top:1px dashed var(--line-strong);}
.waybill-row:first-of-type{border-top:none;}
.waybill-row dt{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft);padding-top:3px;}
.waybill-row dd{margin:0;font-weight:600;color:var(--navy-deep);overflow-wrap:anywhere;}
.waybill-row dd a{text-decoration:none;border-bottom:1px solid var(--line-strong);}
.waybill-row dd a:hover{color:var(--green);border-color:currentColor;}
.waybill-row dd .big{font-family:var(--font-display);font-size:1.6rem;line-height:1;}
.waybill-row dd small{display:block;font-weight:400;color:var(--text-soft);font-size:0.88rem;margin-top:4px;}
.waybill dl{margin:0;}

.photo figcaption{
  position:absolute;left:0;bottom:0;
  background:var(--sand);color:var(--text-soft);
  padding:10px 16px;
  font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.06em;text-transform:uppercase;
}

/* ---------- SPLIT (photo + text) ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);align-items:center;}
.split.reverse > :first-child{order:2;}
.split h2{font-size:var(--fs-h2);margin-bottom:22px;}
.photo{position:relative;margin:0;}
.photo img{width:100%;height:100%;object-fit:cover;}
.photo.ratio-4-5 img{aspect-ratio:4/5;}
.photo.ratio-3-2 img{aspect-ratio:3/2;}

.facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));margin:32px 0 0;border-top:2px solid var(--navy-deep);}
.facts div{padding:16px 16px 0 0;}
.facts div + div{padding-left:16px;border-left:1px solid var(--line);}
.facts dt{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft);margin-bottom:6px;}
.facts dd{margin:0;font-family:var(--font-display);font-size:1.15rem;text-transform:uppercase;color:var(--navy-deep);line-height:1.2;}

/* ---------- ROUTE MAP BAND ---------- */
.band-navy{background:var(--navy-deep);color:var(--on-dark);}
.band-navy h1,.band-navy h2,.band-navy h3{color:var(--on-dark);}
.band-navy p:not(.eyebrow){color:var(--on-dark-soft);}
.routes-band .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:center;}
.routes-band h2{font-size:var(--fs-h2);margin-bottom:20px;}
.routes-band h1{font-size:var(--fs-h1);margin-bottom:20px;}

.route-map{width:100%;height:auto;}
.route-map .graticule{stroke:rgba(255,255,255,0.09);stroke-width:1;fill:none;}
.route-map .ocean{font-family:var(--font-mono);font-size:11px;letter-spacing:0.2em;fill:rgba(255,255,255,0.5);text-transform:uppercase;}
.route-map .namibia{fill:var(--taupe);fill-opacity:0.35;stroke:var(--sand);stroke-width:1.5;stroke-linejoin:round;}
.route-map .corridor{fill:none;stroke:var(--green-light);stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;}
.route-map .corridor.minor{stroke-dasharray:2 6;stroke-width:2;}
.route-map .hub{fill:var(--green-light);}
.route-map .hub-ring{fill:none;stroke:var(--green-light);stroke-width:1.5;}
.route-map .node{fill:var(--navy-deep);stroke:var(--on-dark);stroke-width:2.5;}
.route-map .port{fill:var(--sand);}
.route-map .name{font-family:var(--font-display);font-size:19px;font-weight:600;letter-spacing:0.02em;fill:var(--on-dark);text-transform:uppercase;}
.route-map .name.home{font-size:22px;fill:var(--sand);}
.route-map .minor-name{font-family:var(--font-mono);font-size:13px;letter-spacing:0.06em;fill:var(--on-dark-soft);text-transform:uppercase;}
.map-note{font-size:0.86rem;color:var(--on-dark-soft);margin-top:14px;}

.dest-list{list-style:none;margin:28px 0 32px;padding:0;display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line-dark);}
.dest-list li{display:flex;align-items:baseline;gap:12px;padding:12px 0;border-bottom:1px solid var(--line-dark);}
.dest-list li:nth-child(odd){padding-right:16px;}
.dest-list .code{font-family:var(--font-mono);font-size:var(--fs-label);color:var(--green-light);min-width:3em;}
.dest-list .country{font-family:var(--font-display);text-transform:uppercase;font-size:1.05rem;letter-spacing:0.02em;}

/* ---------- SECTION HEAD ---------- */
.section-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-bottom:clamp(32px,4vw,52px);}
.section-head h2{font-size:var(--fs-h2);max-width:16em;}
.section-head p{max-width:30em;color:var(--text-soft);margin:0;}

/* ---------- SERVICES GRID ---------- */
.service-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 clamp(32px,5vw,72px);list-style:none;margin:0;padding:0;}
.service{display:grid;grid-template-columns:52px 1fr;gap:20px;padding:30px 0;border-top:1px solid var(--line);}
.service:nth-last-child(-n+2){border-bottom:1px solid var(--line);}
.service .icn{width:52px;height:52px;border:2px solid var(--navy);display:grid;place-items:center;color:var(--navy);}
.service .icn svg{width:26px;height:26px;}
.service .num{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.08em;color:var(--green);display:block;margin-bottom:6px;}
.service h3{font-size:var(--fs-h3);margin-bottom:8px;}
.service p{color:var(--text-soft);margin:0;max-width:30em;}
.service-grid.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:0 32px;}
.service-grid.compact .service{grid-template-columns:1fr;border-top:4px solid var(--navy-deep);border-bottom:none;padding-top:22px;}
.service-grid.compact .num{font-size:1rem;}

/* ---------- NAMESAKE QUOTE ---------- */
.namesake{margin:28px 0 28px;}
.namesake blockquote{margin:0;border-left:4px solid var(--green);padding-left:22px;}
.namesake blockquote p{font-family:var(--font-display);font-weight:500;font-size:clamp(1.25rem,2vw,1.55rem);line-height:1.3;color:var(--navy-deep);margin:0;max-width:24em;}

/* ---------- CTA BAND ---------- */
.cta-band{background:var(--green-deep);color:var(--on-dark);padding:clamp(56px,7vw,88px) 0;}
.cta-band .wrap{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:32px 64px;align-items:center;}
.cta-band h2{color:var(--on-dark);font-size:var(--fs-h2);}
.cta-band .eyebrow{color:var(--green-light);}
.cta-contact{display:flex;flex-direction:column;gap:16px;align-items:flex-start;}
.cta-phone{
  display:inline-flex;align-items:center;gap:12px;
  font-family:var(--font-display);font-size:clamp(1.5rem,2.6vw,2rem);font-weight:600;letter-spacing:0.02em;
  color:var(--on-dark);text-decoration:none;border-bottom:2px solid var(--line-dark);
}
.cta-phone:hover{border-bottom-color:var(--on-dark);}
.cta-phone svg{width:26px;height:26px;color:var(--green-light);}
.cta-band.cta-light{background:var(--sand);color:var(--ink);border-top:4px solid var(--navy-deep);}
.cta-band.cta-light h2{color:var(--navy-deep);}
.cta-band.cta-light .eyebrow{color:var(--green);}
.cta-band.cta-light .cta-phone{color:var(--navy-deep);border-bottom-color:var(--line-strong);}
.cta-band.cta-light .cta-phone:hover{border-bottom-color:var(--navy-deep);}
.cta-band.cta-light .cta-phone svg{color:var(--green);}

/* ---------- PAGE INTRO (subpages) ---------- */
.page-intro{display:flex;align-items:flex-end;min-height:clamp(340px, 50vh, 500px);padding:clamp(56px,7vw,96px) 0 clamp(56px,6vw,80px);}
.page-intro > .wrap{width:100%;}
.page-intro .wrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end;}
.page-intro.text-only .wrap{grid-template-columns:minmax(0,1fr);}
.page-intro + .section{padding-top:clamp(48px,6vw,80px);}
.page-intro h1{font-size:var(--fs-h1);margin-bottom:20px;max-width:18em;}
.page-intro .lead{max-width:36em;}
.page-intro .lead{margin:0;}

/* ---------- FEATURE LIST ---------- */
.two-col{display:grid;grid-template-columns:minmax(0,0.9fr) minmax(0,1.1fr);gap:clamp(32px,6vw,80px);}
.two-col h2{font-size:var(--fs-h2);margin-bottom:20px;}
.two-col > div:first-child p:not(.eyebrow){color:var(--text-body);max-width:28em;}
.feature-list{list-style:none;margin:0;padding:0;}
.feature{display:grid;grid-template-columns:40px 1fr;gap:20px;padding:24px 0;border-top:1px solid var(--line);}
.feature:last-child{border-bottom:1px solid var(--line);}
.feature .icn{width:40px;height:40px;border:2px solid var(--green);display:grid;place-items:center;color:var(--green);}
.feature .icn svg{width:20px;height:20px;}
.feature h3{font-family:var(--font-body);text-transform:none;font-weight:700;font-size:1.06rem;letter-spacing:0;margin-bottom:6px;color:var(--navy-deep);}
.feature p{color:var(--text-soft);margin:0;}
.feature-list.plain .feature{grid-template-columns:1fr;}
.feature-list.plain h3{font-family:var(--font-display);text-transform:uppercase;font-weight:600;font-size:var(--fs-h3);letter-spacing:0.01em;}
.band-sand2{background:var(--sand-2);}

/* ---------- PROCESS (services) ---------- */
.process{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));counter-reset:step;}
.process li{position:relative;padding:28px 28px 0 0;border-top:4px solid var(--navy-deep);counter-increment:step;}
.process li + li{padding-left:28px;border-left:1px solid var(--line);}
.process li::before{
  content:"Step 0" counter(step);
  display:block;margin-bottom:14px;
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;color:var(--green);
}
.process h3{font-size:var(--fs-h3);margin-bottom:10px;}
.process p{color:var(--text-soft);margin:0;}

.checklist{list-style:none;margin:0;padding:0;}
.checklist li{display:grid;grid-template-columns:28px 1fr;gap:12px;padding:14px 0;border-top:1px dashed var(--line-strong);}
.checklist li:last-child{border-bottom:1px dashed var(--line-strong);}
.checklist svg{width:20px;height:20px;color:var(--green);margin-top:3px;}
.checklist b{color:var(--navy-deep);}

/* ---------- ROUTE TABLE ---------- */
.table-scroll{overflow-x:auto;border:1px solid var(--line-strong);background:var(--paper);}
.route-table{width:100%;border-collapse:collapse;min-width:640px;}
.route-table caption{text-align:left;padding:14px 20px;background:var(--navy-deep);color:var(--on-dark);font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.1em;text-transform:uppercase;}
.route-table th,.route-table td{text-align:left;padding:16px 20px;border-top:1px solid var(--line);vertical-align:top;}
.route-table thead th{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-soft);background:var(--sand-2);border-top:none;}
.route-table tbody th{font-family:var(--font-display);font-weight:600;font-size:1.12rem;text-transform:uppercase;letter-spacing:0.02em;color:var(--navy-deep);}
.route-table .code{font-family:var(--font-mono);font-weight:600;color:var(--green);white-space:nowrap;}
.route-table tr.home{background:var(--sand);}
.route-table td{color:var(--text-body);}
.table-note{font-size:0.9rem;color:var(--text-soft);margin-top:14px;max-width:48em;}

/* ---------- CONTACT ---------- */
.contact-grid{display:grid;grid-template-columns:minmax(0,0.85fr) minmax(0,1.15fr);gap:clamp(32px,5vw,72px);align-items:start;}
.contact-grid h2{font-size:clamp(1.5rem,2.4vw,1.9rem);margin-bottom:14px;}
.contact-grid .waybill{margin-bottom:32px;}
.next-steps{list-style:none;margin:0;padding:0;counter-reset:n;}
.next-steps li{counter-increment:n;display:grid;grid-template-columns:36px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line);color:var(--text-body);}
.next-steps li::before{content:"0" counter(n);font-family:var(--font-mono);font-weight:600;color:var(--green);}

.form-panel{background:var(--paper);border:1px solid var(--line-strong);padding:clamp(24px,4vw,40px);}
.form-panel h2{margin-bottom:6px;}
.form-panel .form-intro{color:var(--text-soft);margin-bottom:28px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0 20px;}
.field{margin-bottom:22px;}
.field.full{grid-column:1 / -1;}
.field label{display:block;font-weight:600;font-size:0.95rem;color:var(--navy-deep);margin-bottom:6px;}
.field .req{color:var(--error);}
.field .hint{display:block;font-size:0.86rem;color:var(--text-soft);margin:-2px 0 6px;}
.field input,.field select,.field textarea{
  width:100%;min-height:48px;
  border:1px solid var(--line-strong);border-bottom:2px solid var(--text-soft);border-radius:0;
  background:var(--paper);padding:10px 12px;
  font:inherit;font-size:1rem;color:var(--ink);
}
.field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%230F2E4E' stroke-width='2'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;padding-right:38px;}
.field textarea{min-height:128px;resize:vertical;}
.field input:focus,.field select:focus,.field textarea:focus{outline:3px solid var(--focus);outline-offset:0;border-bottom-color:var(--navy);}
.field [aria-invalid="true"]{border-color:var(--error);border-bottom-color:var(--error);}
.field .error{display:none;align-items:center;gap:6px;color:var(--error);font-size:0.9rem;font-weight:600;margin-top:6px;}
.field .error svg{width:16px;height:16px;flex-shrink:0;}
.field.has-error .error{display:flex;}
#copy-result{margin-left:12px;font-weight:600;color:var(--green);}
.form-foot{display:flex;flex-wrap:wrap;align-items:center;gap:14px 20px;margin-top:6px;}
.form-foot p{font-size:0.88rem;color:var(--text-soft);margin:0;max-width:26em;}
.form-status{margin-top:24px;padding:20px 22px;border:1px solid var(--green);border-left-width:6px;background:var(--sand);}
.form-status[hidden]{display:none;}
.form-status h3{font-family:var(--font-body);text-transform:none;font-size:1.06rem;letter-spacing:0;margin-bottom:8px;}
.form-status p{color:var(--text-body);margin-bottom:10px;}
.form-status pre{white-space:pre-wrap;font-family:var(--font-mono);font-size:0.84rem;background:var(--paper);border:1px dashed var(--line-strong);padding:12px;margin:0 0 12px;max-height:240px;overflow:auto;}

/* ---------- FOOTER ---------- */
.site-footer{background:var(--navy-ink);color:var(--on-dark-soft);padding:64px 0 28px;}
.footer-top{display:grid;grid-template-columns:1.4fr 0.8fr 1fr 1.2fr;gap:40px;padding-bottom:40px;border-bottom:1px solid var(--line-dark);margin-bottom:24px;}
.footer-logo{background:var(--sand);display:inline-block;padding:10px 14px;margin-bottom:18px;}
.footer-logo img{height:56px;width:auto;}
.site-footer p{font-size:0.92rem;max-width:22em;}
.site-footer h2{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.1em;color:var(--green-light);margin-bottom:16px;}
.site-footer ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px;}
.site-footer ul a{display:inline-block;padding:4px 0;font-size:0.95rem;color:var(--on-dark);text-decoration:none;}
.site-footer ul a:hover{color:var(--green-light);text-decoration:underline;}
.site-footer li{font-size:0.95rem;}
.foot-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;font-size:0.86rem;}
.foot-bottom a{color:var(--on-dark);}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1080px){
  .nav-phone span{display:none;}
}
@media (max-width: 899px){
  .nav{flex-wrap:wrap;padding-top:10px;padding-bottom:0;gap:10px 16px;}
  .brand img{height:46px;}
  .nav > nav{order:3;flex-basis:calc(100% + var(--gutter) * 2);border-top:1px solid var(--line);margin:0 calc(var(--gutter) * -1);padding:0 calc(var(--gutter) - 10px);}
  .nav-links{justify-content:space-between;}
  .nav-links a{padding:12px 6px;font-size:0.9rem;}
  .nav-phone{border:2px solid var(--navy);width:44px;justify-content:center;}
  .hero .wrap,.split,.routes-band .wrap,.page-intro .wrap,.two-col,.contact-grid,.cta-band .wrap{grid-template-columns:minmax(0,1fr);}
  .split.reverse > :first-child{order:0;}
  .hero{min-height:0;}
        .service-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr));}
  .photo.ratio-4-5 img{aspect-ratio:4/3;object-position:center 72%;}
  .service-grid{grid-template-columns:minmax(0,1fr);}
  .service:nth-last-child(2){border-bottom:none;}
  .process{grid-template-columns:minmax(0,1fr);gap:28px;}
  .process li + li{padding-left:0;border-left:none;}
  .footer-top{grid-template-columns:1fr 1fr;}
}
@media (max-width: 600px){
  :root{--gutter:20px;}
  .nav-actions .btn{padding:10px 14px;font-size:0.8rem;}
  .facts{grid-template-columns:minmax(0,1fr);}
  .facts div + div{padding-left:0;border-left:none;border-top:1px solid var(--line);}
  .facts div{padding:12px 0;}
  .dest-list{grid-template-columns:minmax(0,1fr);}
  .dest-list li:nth-child(odd){padding-right:0;}
  .form-grid{grid-template-columns:minmax(0,1fr);}
  .footer-top{grid-template-columns:minmax(0,1fr);}
  .waybill-row{grid-template-columns:minmax(0,1fr);gap:4px;}
  .waybill.horizontal dl{grid-template-columns:minmax(0,1fr);}
  .waybill.horizontal .waybill-row + .waybill-row{border-left:none;border-top:1px dashed var(--line-strong);}
  .actions .btn{flex:1 1 100%;}
  .service-grid.compact{grid-template-columns:minmax(0,1fr);}
  .hero-center .eyebrow::before{display:none;}
    .route-map .name{font-size:25px;}
  .route-map .name.home{font-size:27px;}
  .route-map .minor-name{font-size:18px;}
  .route-table{min-width:0;}
  .route-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);}
  .route-table tr{display:grid;grid-template-columns:auto 1fr;align-items:baseline;gap:6px 14px;padding:16px;border-top:1px solid var(--line);}
  .route-table th,.route-table td{padding:0;border:none;}
  .route-table td[data-label]{grid-column:1 / -1;}
  .route-table td[data-label]::before{content:attr(data-label) ": ";font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-soft);}
  .route-table tbody th:first-child{grid-column:1 / -1;}
}
@media (max-width: 380px){
  .brand img{height:40px;}
  .nav-actions{gap:10px;}
}

/* ---------- IMAGE-LED COMPONENTS ---------- */
.media-cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;}
.media-card figure{margin:0 0 16px;overflow:hidden;aspect-ratio:3/2;background:var(--sand-2);}
.media-card img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.media-card:hover img{transform:scale(1.06);}
.media-card .num{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.08em;color:var(--green);display:block;margin-bottom:6px;}
.media-card h3{font-size:var(--fs-h3);margin-bottom:6px;}
.media-card p{color:var(--text-soft);margin:0;font-size:0.95rem;}

.call-tile{
  display:flex;flex-direction:column;justify-content:space-between;gap:12px;
  aspect-ratio:3/2;margin:0 0 16px;padding:20px;
  background:var(--navy-deep);color:var(--on-dark);text-decoration:none;
  transition:background-color .2s ease;
}
.call-tile:hover{background:var(--green-deep);}
.call-tile svg{width:34px;height:34px;color:var(--green-light);}
.call-tile .call-number{font-family:var(--font-display);font-size:clamp(1.3rem,2vw,1.6rem);font-weight:600;letter-spacing:0.02em;line-height:1.1;}
.call-tile .call-hint{font-family:var(--font-mono);font-size:var(--fs-label);letter-spacing:0.08em;text-transform:uppercase;color:var(--green-light);}

.zigzag{display:flex;flex-direction:column;gap:clamp(48px,7vw,96px);}
.zz-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);align-items:center;}
.zz-row:nth-child(even) > :first-child{order:2;}
.zz-row figure,.zz-row .call-tile{margin:0;overflow:hidden;aspect-ratio:3/2;}
.zz-row figure img{width:100%;height:100%;object-fit:cover;transition:transform .6s cubic-bezier(.2,.7,.2,1);}
.zz-row:hover figure img{transform:scale(1.04);}
.zz-row .call-tile{padding:clamp(24px,4vw,40px);}
.zz-row .call-tile .call-number{font-size:clamp(1.8rem,3.4vw,2.6rem);}
.zz-row .num{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.1em;color:var(--green);display:block;margin-bottom:10px;text-transform:uppercase;}
.zz-row h3{font-size:clamp(1.5rem,2.6vw,2.1rem);margin-bottom:12px;}
.zz-row p{color:var(--text-body);font-size:1.05rem;max-width:26em;}
.tags{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.tags li{font-family:var(--font-mono);font-size:var(--fs-label);font-weight:600;letter-spacing:0.06em;text-transform:uppercase;color:var(--navy-deep);border:1px solid var(--line-strong);padding:6px 10px;}

.gallery{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;}
.gallery figure{position:relative;margin:0;overflow:hidden;aspect-ratio:4/5;}
.gallery img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1);}
.gallery figure:hover img{transform:scale(1.06);}
.gallery figcaption{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;background:var(--navy-deep);color:var(--on-dark);}
.gallery figcaption b{display:block;font-family:var(--font-display);font-weight:600;font-size:1.15rem;text-transform:uppercase;letter-spacing:0.02em;}
.gallery figcaption span{font-size:0.9rem;color:var(--on-dark-soft);}

@media (max-width: 1080px){
  .media-cards{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width: 899px){
  .zz-row{grid-template-columns:minmax(0,1fr);}
  .zz-row:nth-child(even) > :first-child{order:0;}
  .gallery{grid-template-columns:minmax(0,1fr) minmax(0,1fr);}
  .gallery figure:last-child{grid-column:1 / -1;aspect-ratio:16/9;}
}
@media (max-width: 600px){
  .media-cards{grid-template-columns:minmax(0,1fr);}
  .gallery{grid-template-columns:minmax(0,1fr);}
  .gallery figure,.gallery figure:last-child{aspect-ratio:4/3;}
}

/* ---------- MOTION ----------
   Everything here is progressive: without JS (no .js class) nothing is hidden,
   and prefers-reduced-motion switches it all off (see the reset near the top). */
@keyframes hero-zoom{from{transform:scale(1.02);}to{transform:scale(1.12);}}
@keyframes rise{from{opacity:0;transform:translateY(18px);}to{opacity:1;transform:none;}}
@keyframes lift{from{transform:translateY(22px);}to{transform:none;}}
@keyframes hub-pulse{0%{r:10;opacity:0.9;}100%{r:30;opacity:0;}}

.hero-bg .hero-img img{animation:hero-zoom 22s ease-out both;}
.hero-bg h1{animation:lift .8s cubic-bezier(.2,.7,.2,1) both;}
.hero-bg .eyebrow{animation:rise .7s .05s cubic-bezier(.2,.7,.2,1) both;}
.hero-bg .lead{animation:rise .8s .2s cubic-bezier(.2,.7,.2,1) both;}
.hero-bg .actions{animation:rise .8s .35s cubic-bezier(.2,.7,.2,1) both;}
.hero-bg .hero-caption{animation:rise .8s .6s ease both;}

.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .75s ease, transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d, 0ms);}
.js .reveal.is-visible{opacity:1;transform:none;}

.text-link svg{transition:transform .2s ease;}
.text-link:hover svg{transform:translateX(4px);}
.btn{transition:background-color .15s ease, color .15s ease, border-color .15s ease, transform .15s ease;}
.btn:hover{transform:translateY(-2px);}

.route-map .hub-pulse{fill:none;stroke:var(--green-light);stroke-width:1.5;opacity:0;}
.js .route-map .corridor path{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1);}
.js .route-map .corridor path:nth-child(2){transition-delay:.25s;}
.js .route-map .corridor path:nth-child(3){transition-delay:.45s;}
.js .route-map .corridor path:nth-child(4){transition-delay:.65s;}
.js .route-map .corridor path:nth-child(5){transition-delay:.85s;}
.js .route-map .node,.js .route-map .name,.js .route-map .minor-name,.js .route-map .corridor.minor,.js .route-map .port{opacity:0;transition:opacity .6s ease 1.4s;}
.js .route-map.is-visible .corridor path{stroke-dashoffset:0;}
.js .route-map.is-visible .node,.js .route-map.is-visible .name,.js .route-map.is-visible .minor-name,.js .route-map.is-visible .corridor.minor,.js .route-map.is-visible .port{opacity:1;}
.js .route-map.is-visible .hub-pulse{animation:hub-pulse 2.4s 2s ease-out infinite;}

@media (prefers-reduced-motion: reduce){
  .js .reveal{opacity:1;transform:none;}
  .js .route-map .corridor path{stroke-dashoffset:0;}
  .js .route-map .node,.js .route-map .name,.js .route-map .minor-name,.js .route-map .corridor.minor,.js .route-map .port{opacity:1;}
  .media-card:hover img,.zz-row:hover figure img,.gallery figure:hover img,.btn:hover{transform:none;}
}