/* =========================================================================
   BARRACUDA EXPORTS
   Palette: abyssal hull dark, pearl, single verdigris accent (oxidised
   copper — the colour a hull goes at sea). Type echoes the 1980s squared
   grotesque in the logo: Michroma for labels only, Schibsted Grotesk for
   everything you actually read.
   ========================================================================= */

:root{
  --abyss:#050D10;
  --hull:#0B1B21;
  --deep:#123039;
  --steel:#5A6E78;
  --mist:#9AAAB2;
  --pearl:#E6E7E4;
  --paper:#F1F0EC;
  --verd:#2F8F7B;
  --verd-lt:#8FD6C8;
  --copper:#7C4A3A;

  --label:'Michroma','Courier New',monospace;
  --text:'Schibsted Grotesk','Helvetica Neue',Arial,sans-serif;

  --shell:1280px;
  --mast-h:82px;
}

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

html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; }

body{
  margin:0;
  background:var(--abyss);
  color:var(--pearl);
  font-family:var(--text);
  font-size:17px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
}

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

h1,h2,h3{ margin:0 0 .5em; line-height:1.05; letter-spacing:-.028em; font-weight:900; text-wrap:balance; }
h1{ font-size:clamp(2.7rem,6.6vw,5.4rem); }
h2{ font-size:clamp(1.9rem,3.8vw,3.1rem); }
h3{ font-size:1.32rem; letter-spacing:-.018em; }
p{ margin:0 0 1.15em; }
p:last-child{ margin-bottom:0; }

.shell{ width:100%; max-width:var(--shell); margin-inline:auto; padding-inline:28px; }

.lede{ font-size:1.18rem; color:var(--mist); }
.lede-wide{ max-width:64ch; }
.band-paper .lede{ color:#4A5A63; }

.skip{ position:absolute; left:-9999px; background:var(--verd); color:var(--abyss); padding:12px 18px; z-index:300; }
.skip:focus{ left:12px; top:12px; }
:focus-visible{ outline:2px solid var(--verd-lt); outline-offset:3px; }

/* label face — used sparingly, it is heavy at any size */
.eyebrow,.rule span,.class-no,.step-no,.manifest dt,.figures dd,.port-code,.draft-cap,.foot-col h2{
  font-family:var(--label);
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:400;
}

/* ------------------------------- MASTHEAD ------------------------------ */
.mast{
  position:fixed; inset:0 0 auto 0; z-index:120;
  height:var(--mast-h);
  display:flex; align-items:center;
  transition:background .3s ease, border-color .3s ease;
  border-bottom:1px solid transparent;
}
.mast[data-stuck="true"]{
  background:rgba(5,13,16,.93);
  border-bottom-color:rgba(230,231,228,.12);
  backdrop-filter:blur(9px);
}
.mast-in{ display:flex; align-items:center; gap:26px; }
.mast-logo{ display:block; margin-right:auto; }
.mast-logo img{ width:206px; }

.burger{
  display:none; align-items:center; gap:10px;
  background:none; border:1px solid rgba(230,231,228,.28); color:var(--pearl);
  font-family:var(--label); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding:11px 14px; cursor:pointer;
}
.burger-bars{ width:16px; height:1.5px; background:var(--verd-lt); box-shadow:0 5px 0 var(--verd-lt),0 -5px 0 var(--verd-lt); }

.nav ul{ display:flex; align-items:center; gap:6px; list-style:none; margin:0; padding:0; }
.nav a{
  display:block; text-decoration:none; padding:9px 14px;
  font-size:.9rem; font-weight:500; color:var(--mist);
  transition:color .18s ease;
}
.nav a:hover{ color:var(--pearl); }
.nav-cta a{ border:1px solid var(--verd); color:var(--verd-lt); margin-left:12px; }
.nav-cta a:hover{ background:var(--verd); color:var(--abyss); }

/* --------------------------- DRAFT MARK RAIL --------------------------
   Signature element. A ship's bow carries a painted depth scale; this is
   the page's. The fill descends as you scroll — the site takes on draft.
   ---------------------------------------------------------------------- */
.draft-rail{
  position:fixed; left:26px; top:50%; transform:translateY(-50%);
  z-index:110; width:56px; pointer-events:none;
  display:flex; flex-direction:column; align-items:flex-start; gap:0;
}
.draft-line{
  position:absolute; left:11px; top:6px; bottom:22px;
  width:1px; background:rgba(230,231,228,.18);
}
.draft-line i{
  position:absolute; inset:0 auto auto 0; width:100%;
  height:0; background:var(--verd-lt);
  transition:height .12s linear;
}
.draft-ticks{ list-style:none; margin:0; padding:0; display:grid; gap:34px; }
.draft-ticks li{
  display:flex; align-items:center; gap:9px;
  font-family:var(--label); font-size:.52rem; letter-spacing:.1em;
  color:rgba(230,231,228,.32);
  transition:color .25s ease;
}
.draft-ticks li::before{
  content:''; width:23px; height:1px; background:currentColor;
}
.draft-ticks li[data-live="true"]{ color:var(--verd-lt); }
.draft-cap{
  margin-top:14px; padding-left:2px;
  font-size:.46rem; color:rgba(230,231,228,.3);
}

/* --------------------------------- HERO -------------------------------- */
.hero{
  position:relative; min-height:100svh;
  display:flex; flex-direction:column; justify-content:flex-end;
  padding-top:calc(var(--mast-h) + 40px);
  overflow:hidden;
  background:
    radial-gradient(120% 70% at 50% 100%, #14343D 0%, #081418 55%, var(--abyss) 100%);
}
.hero-copy{ position:relative; z-index:2; padding-bottom:26px; }
.eyebrow{ font-size:.62rem; color:var(--verd-lt); margin-bottom:26px; }
.hero h1{ max-width:15ch; }
.hero h1 span{ display:block; color:var(--mist); }
.hero-sub{ max-width:54ch; font-size:1.16rem; color:var(--mist); margin-top:22px; }

.hero-vessel{
  margin:0; position:relative; z-index:1;
  width:100%; pointer-events:none;
  animation:drift 26s ease-in-out infinite alternate;
}
.hero-vessel img{ width:100%; }
@keyframes drift{ from{ transform:translate3d(0,0,0) } to{ transform:translate3d(-16px,-7px,0) } }

.cta-row{ display:flex; flex-wrap:wrap; gap:13px; margin-top:34px; }
.cta-mid{ justify-content:center; }

.btn{
  display:inline-flex; align-items:center; justify-content:center;
  padding:15px 28px; text-decoration:none;
  font-size:.94rem; font-weight:700; letter-spacing:.01em;
  border:1px solid var(--verd); transition:background .18s ease,color .18s ease;
}
.btn-solid{ background:var(--verd); color:var(--abyss); }
.btn-solid:hover{ background:var(--verd-lt); border-color:var(--verd-lt); }
.btn-line{ color:var(--pearl); border-color:rgba(230,231,228,.32); }
.btn-line:hover{ border-color:var(--pearl); background:rgba(230,231,228,.08); }
.band-paper .btn-line{ color:var(--hull); border-color:rgba(11,27,33,.28); }

/* manifest strip beneath the vessel */
.manifest{
  position:relative; z-index:2; margin:0;
  display:grid; grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(230,231,228,.16);
  background:rgba(5,13,16,.6);
}
.manifest div{
  padding:20px 28px 22px;
  border-right:1px solid rgba(230,231,228,.1);
}
.manifest div:last-child{ border-right:0; }
.manifest dt{ font-size:.53rem; color:var(--verd-lt); margin-bottom:7px; }
.manifest dd{ margin:0; font-size:1rem; font-weight:700; }

/* -------------------------------- BANDS -------------------------------- */
.band{ padding:120px 0; position:relative; }
.band-tight{ padding:84px 0; }
.band-paper{ background:var(--paper); color:var(--hull); }
.band-close{ background:linear-gradient(180deg,var(--abyss),#0A1D24); }
.band-head{ max-width:18ch; margin-bottom:.45em; }

/* section rule — a waterline with the section number riding on it */
.rule{
  display:flex; align-items:center; gap:18px;
  margin:0 0 46px; color:var(--steel);
}
.rule span{ font-size:.56rem; white-space:nowrap; }
.rule::after{ content:''; flex:1; height:1px; background:rgba(11,27,33,.2); }
.rule-dark{ color:var(--verd-lt); }
.rule-dark::after{ background:rgba(230,231,228,.16); }

.split{ display:grid; grid-template-columns:1fr 1.25fr; gap:56px; align-items:start; }
.split-body p:first-child{ margin-bottom:1.3em; }
.band-paper .split-body p{ color:#3E4C55; }

.figures{
  display:grid; grid-template-columns:repeat(4,1fr); gap:26px;
  margin:82px 0 0; padding-top:38px;
  border-top:1px solid rgba(11,27,33,.16);
}
.figures div{ margin:0; }
.figures dt{
  font-size:clamp(2.1rem,3.6vw,3rem); font-weight:900;
  letter-spacing:-.04em; line-height:1; color:var(--hull);
}
.figures dd{
  margin:12px 0 0; font-size:.55rem; line-height:1.7;
  color:var(--steel); max-width:22ch;
}

/* ----------------------------- CARGO CLASSES --------------------------- */
.class-row{
  display:grid; grid-template-columns:1.05fr 1fr;
  gap:0; align-items:stretch;
  max-width:1480px; margin:0 auto;
  border-top:1px solid rgba(230,231,228,.12);
}
.class-row:first-of-type{ margin-top:34px; }
.class-flip .class-plate{ order:2; }
.class-plate{ margin:0; overflow:hidden; background:var(--hull); }
.class-plate img{
  width:100%; height:100%; object-fit:cover; min-height:420px;
  transition:transform 1.1s cubic-bezier(.2,.7,.3,1);
}
.class-row:hover .class-plate img{ transform:scale(1.035); }
.class-copy{
  padding:64px clamp(28px,4.6vw,78px);
  display:flex; flex-direction:column; justify-content:center;
}
.class-no{ font-size:.56rem; color:var(--verd-lt); margin-bottom:20px; }
.class-copy h3{ font-size:clamp(1.5rem,2.5vw,2.15rem); margin-bottom:.55em; }
.class-copy > p{ color:var(--mist); max-width:52ch; }

.spec{ list-style:none; margin:28px 0 0; padding:0; }
.spec li{
  padding:13px 0 13px 24px; position:relative;
  font-size:.95rem; color:var(--mist);
  border-top:1px solid rgba(230,231,228,.1);
}
.spec li::before{
  content:''; position:absolute; left:0; top:21px;
  width:9px; height:1px; background:var(--verd);
}

/* -------------------------------- STEPS -------------------------------- */
.steps{
  list-style:none; margin:64px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:0;
  border-top:1px solid rgba(11,27,33,.22);
}
.steps li{
  padding:34px 30px 8px;
  border-right:1px solid rgba(11,27,33,.14);
}
.steps li:last-child{ border-right:0; }
.step-no{ display:block; font-size:.53rem; color:var(--verd); margin-bottom:20px; }
.steps h3{ margin-bottom:.5em; }
.steps p{ font-size:.95rem; color:#4A5A63; }

/* ------------------------------- NETWORK ------------------------------- */
.band-port{ padding:0; background:var(--hull); }
.port-plate{ margin:0; }
.port-plate img{ width:100%; height:clamp(300px,44vh,520px); object-fit:cover; }
.port-copy{ padding:96px 28px 120px; }
.ports{ display:grid; grid-template-columns:repeat(2,1fr); gap:38px; margin-top:54px; }
.port{
  padding:34px 34px 36px;
  border:1px solid rgba(230,231,228,.14);
  background:rgba(5,13,16,.4);
}
.port-code{ font-size:.62rem; color:var(--verd-lt); margin-bottom:16px; }
.port h3{ margin-bottom:.6em; }
.port p{ color:var(--mist); font-size:.98rem; }
.port-note{ margin-top:16px; font-size:.88rem; color:var(--steel); }

/* ------------------------------- PARTNERS ------------------------------ */
.partners{
  list-style:none; margin:52px 0 0; padding:0;
  display:grid; grid-template-columns:repeat(6,1fr); gap:18px; align-items:center;
}
.partners li{
  display:flex; align-items:center; justify-content:center;
  padding:22px 12px;
  border:1px solid rgba(11,27,33,.1);
}
.partners img{
  width:100%; max-width:150px;
  opacity:.5; filter:grayscale(1);
  transition:opacity .25s ease;
}
.partners li:hover img{ opacity:1; }

/* -------------------------------- CLOSE -------------------------------- */
.u-mid{ text-align:center; }
.u-mid .rule{ justify-content:center; }
.u-mid .rule::after{ display:none; }
.u-mid .rule::before{ content:''; flex:0 0 60px; height:1px; background:rgba(230,231,228,.2); }
.u-mid h2{ max-width:20ch; margin-inline:auto; }
.u-mid .lede{ max-width:56ch; margin-inline:auto; }

/* --------------------------------- FOOT -------------------------------- */
.foot{
  background:#03090B; padding:74px 0 34px;
  border-top:1px solid rgba(230,231,228,.1);
}
.foot-grid{ display:grid; grid-template-columns:1.6fr 1fr 1fr; gap:48px; padding-bottom:48px; }
.foot-logo{ width:214px; opacity:.9; }
.foot-line{ margin-top:22px; max-width:34ch; color:var(--steel); font-size:.96rem; }
.foot-col h2{ font-size:.56rem; color:var(--verd-lt); margin-bottom:16px; font-weight:400; }
.foot-col p{ color:var(--mist); font-size:.95rem; }
.foot-legal{
  border-top:1px solid rgba(230,231,228,.1); padding-top:26px;
  font-size:.8rem; color:#4C5A61;
}

/* ------------------------------ REVEALS -------------------------------- */
.rise{ opacity:0; transform:translateY(24px); transition:opacity .8s ease, transform .8s cubic-bezier(.2,.7,.3,1); }
.rise[data-in="true"]{ opacity:1; transform:none; }

/* ----------------------------- RESPONSIVE ------------------------------ */
@media (max-width:1180px){
  .draft-rail{ display:none; }
  .partners{ grid-template-columns:repeat(3,1fr); }
}

@media (max-width:960px){
  .split{ grid-template-columns:1fr; gap:26px; }
  .figures{ grid-template-columns:repeat(2,1fr); gap:34px; }
  .steps{ grid-template-columns:repeat(2,1fr); }
  .steps li:nth-child(2){ border-right:0; }
  .steps li:nth-child(1),.steps li:nth-child(2){ border-bottom:1px solid rgba(11,27,33,.14); }
  .class-row{ grid-template-columns:1fr; }
  .class-flip .class-plate{ order:0; }
  .class-plate img{ min-height:0; height:56vw; max-height:420px; }
  .class-copy{ padding:44px 28px 54px; }
  .ports{ grid-template-columns:1fr; gap:20px; }
  .manifest{ grid-template-columns:repeat(2,1fr); }
  .manifest div:nth-child(2){ border-right:0; }
  .manifest div:nth-child(1),.manifest div:nth-child(2){ border-bottom:1px solid rgba(230,231,228,.1); }
  .foot-grid{ grid-template-columns:1fr; gap:34px; }
}

@media (max-width:720px){
  body{ font-size:16px; }
  .band{ padding:76px 0; }
  .band-tight{ padding:60px 0; }
  .shell{ padding-inline:22px; }

  .burger{ display:inline-flex; }
  .mast-in{ position:relative; }
  .mast-logo img{ width:164px; }
  .nav{
    display:none; position:absolute; left:-22px; right:-22px; top:calc(100% + 18px);
    background:rgba(5,13,16,.98); border-block:1px solid rgba(230,231,228,.12);
    padding:10px 22px 20px;
  }
  .nav[data-open="true"]{ display:block; }
  .nav ul{ flex-direction:column; align-items:stretch; gap:0; }
  .nav a{ padding:15px 0; border-bottom:1px solid rgba(230,231,228,.09); }
  .nav-cta a{ margin:16px 0 0; text-align:center; padding:15px; border-bottom:1px solid var(--verd); }

  .hero{ min-height:88svh; }
  .hero-sub{ font-size:1.04rem; }
  .manifest div{ padding:15px 22px 16px; }
  .partners{ grid-template-columns:repeat(2,1fr); }
  .port-copy{ padding:64px 22px 78px; }
  .figures{ margin-top:52px; }
}

@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation-duration:.001ms !important; transition-duration:.001ms !important; }
  .rise{ opacity:1; transform:none; }
}