* {
  box-sizing:border-box}
html {
  scroll-behavior:smooth}
body {
  margin:0;
  font:17px/1.65 system-ui,sans-serif}
a {
  color:inherit;
  text-underline-offset:.25em}
a:hover {
  text-decoration-thickness:2px}
a:focus-visible {
  outline:3px solid #fff;
  outline-offset:3px;
  box-shadow:0 0 0 7px #111}
a {
  border-radius:2px}
a:active {
  opacity:.8}
.skip {
  position:absolute;
  left:1rem;
  top:-8rem;
  z-index:20;
  background:#fff;
  color:#111;
  padding:1rem}
.skip:focus {
  top:1rem}
.wrap {
  width:min(1200px,calc(100% - 3rem));
  margin:auto}
header {
  padding:1.5rem 0}
nav {
  display:flex;
  flex-wrap:wrap;
  gap:.4rem 1.4rem}
nav a {
  padding:.4rem 0;
  font-size:.9rem}
h1,h2,h3,p {
  margin:0 0 1.2rem}
h1,h2 {
  line-height:1.08;
  letter-spacing:-.04em}
h1 {
  font-size:clamp(3rem,6vw,6.3rem)}
h2 {
  font-size:clamp(2.1rem,4vw,4rem)}
h3 {
  font-size:1.25rem;
  line-height:1.3}
section {
  padding:5rem 0;
  scroll-margin-top:1rem}
img {
  display:block;
  width:100%;
  height:auto;
  object-fit:cover}
figure {
  margin:0}
figcaption {
  font-size:.78rem;
  padding:.6rem 0}
address {
  font-style:normal}
small,.micro {
  font-size:.84rem;
  line-height:1.65}
.eyebrow {
  font-size:.76rem;
  letter-spacing:.14em;
  text-transform:uppercase;
  font-weight:650}
.button {
  display:inline-block;
  padding:.85rem 1.4rem;
  text-decoration:none;
  font-size:.95rem;
  font-weight:650;
  border:1px solid currentColor}
.contact-details>div {
  padding:1rem 0}
.contact-details span {
  display:block;
  font-size:.76rem;
  text-transform:uppercase;
  letter-spacing:.1em}
.contact-details a {
  overflow-wrap:anywhere}
.steps {
  list-style:none;
  padding:0;
  margin:2rem 0 0;
  counter-reset:step}
.steps li {
  counter-increment:step}
.step-number {
  font-size:.85rem;
  font-weight:700;
  display:block;
  margin-bottom:1.2rem}
.brand {
  text-decoration:none;
  font-weight:750;
  letter-spacing:-.03em;
  font-size:1.35rem}
.monogram {
  margin-right:.7rem}
.footer-inner {
  display:flex;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
  font-size:.75rem}
footer {
  padding:2rem 0}
main {
  overflow:clip}
main:focus {
  outline:none}
@media(max-width:700px) {
  .wrap {
  width:calc(100% - 2rem)}
section {
  padding:3.5rem 0}
h1 {
  font-size:clamp(2.8rem,12vw,4.8rem)}
header {
  padding:1rem 0}
.nav {
  gap:1rem}
nav {
  gap:.3rem 1rem}
nav a {
  min-height:44px;
  display:flex;
  align-items:center}
.button {
  padding:.85rem 1rem}
footer {
  padding:1.5rem 0}
}
@media(prefers-reduced-motion:reduce) {
  html {
  scroll-behavior:auto}
*,*::before,*::after {
  animation:none!important;
  transition:none!important}
}
body {
  background:#f3f8fa;
  color:#102f43}
h1,h2 {
  font-weight:750}
.nav {
  display:flex;
  align-items:center;
  justify-content:space-between}
.monogram {
  border:1px solid #102f43;
  padding:.4rem}
.port-opening {
  background:#102f43;
  color:#fff;
  position:relative;
  padding-bottom:0}
.port-grid {
  display:grid;
  grid-template-columns:1.1fr 1fr;
  gap:4rem;
  align-items:center}
.port-grid h1 span {
  color:#68d9e8}
.port-grid p {
  max-width:34rem}
.port-image img {
  height:410px;
  object-position:70%}
.button {
  background:#68d9e8;
  color:#102f43;
  border-color:#68d9e8}
.wave {
  height:55px;
  margin-top:3rem;
  background:repeating-radial-gradient(ellipse at 50% -15px,transparent 0 15px,#68d9e8 16px 17px,transparent 18px 28px)}
.route-grid {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:4rem;
  align-items:center}
.route-map {
  padding:2rem;
  border:1px solid #aac9d4;
  background-color:#e6f2f5;
  background-image:linear-gradient(#cadee5 1px,transparent 1px),linear-gradient(90deg,#cadee5 1px,transparent 1px);
  background-size:30px 30px}
.route-map>p {
  background:#e6f2f5;
  padding:.5rem}
.route-track {
  display:flex;
  align-items:center;
  gap:1rem;
  margin:3rem 0}
.route-track span {
  font-size:.85rem}
.route-track b {
  display:block;
  font-size:2.5rem;
  line-height:1.2}
.route-track i {
  flex:1;
  border-top:2px dashed #23556c;
  min-width:20px}
.cargo-section {
  background:#e2eff3}
.cargo-title {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:3rem}
.cargo-modules {
  display:grid;
  grid-template-columns:1.5fr 1fr;
  gap:2rem}
.cargo-image img {
  height:330px}
.cargo-modules article {
  padding:2rem;
  background:#fff;
  border-top:4px solid #16728c}
.steps {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:2rem;
  position:relative}
.steps li {
  border-top:3px solid #16728c;
  padding-top:1.5rem}
.step-number {
  background:#102f43;
  color:#fff;
  padding:.4rem .8rem;
  display:inline-block}
.registry,.contact-port {
  display:grid;
  grid-template-columns:1fr 1.4fr;
  gap:5rem}
.contact {
  background:#102f43;
  color:#fff}
footer {
  background:#081f2e;
  color:#fff}
@media(max-width:900px) {
  .port-grid,.route-grid {
  gap:2rem}
.port-grid h1 {
  font-size:3.8rem}
}
@media(max-width:700px) {
  .nav {
  display:block}
.nav nav {
  margin-top:1rem}
.port-grid,.route-grid,.cargo-title,.cargo-modules,.registry,.contact-port {
  grid-template-columns:1fr;
  gap:2rem}
.port-grid h1 {
  font-size:clamp(2.8rem,11vw,4.5rem)}
.port-image img {
  height:280px}
.route-map {
  padding:1rem}
.route-track {
  gap:.6rem}
.steps {
  grid-template-columns:1fr}
.cargo-image img {
  height:280px}
}