/* ==================================================================
   LUNAR MARITIME SOLUTIONS
   Core stylesheet — palette, layout, components, and the hero scene.
   No external fonts, no frameworks, no CDN calls.
   ================================================================== */

:root {
  --navy-900: #060F1C;
  --navy-800: #0B1F35;
  --navy-700: #12304F;
  --navy-600: #1B4570;
  --steel:    #4A5A6A;
  --steel-2:  #8595A5;
  --paper:    #FFFFFF;
  --paper-2:  #F4F7FA;
  --line:     #DDE4EC;
  --amber:    #F0A202;
  --amber-2:  #FFC24B;
  --amber-dk: #C98500;
  --ink:      #16232F;
  --sea:      #0E3556;

  --wrap: 1180px;
  --radius: 8px;
  --shadow: 0 1px 3px rgba(11,31,53,.07), 0 10px 30px rgba(11,31,53,.07);
  --shadow-lg: 0 24px 70px rgba(6,15,28,.28);
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --ease: cubic-bezier(.16,.84,.44,1);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; display: block; }
a { color: var(--navy-700); text-underline-offset: 2px; }
a:hover { color: var(--amber-dk); }

h1, h2, h3, h4 { line-height: 1.16; margin: 0 0 .5em; color: var(--navy-800); letter-spacing: -.02em; }
h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 800; }
h2 { font-size: clamp(1.55rem, 3vw, 2.3rem); font-weight: 780; }
h3 { font-size: 1.18rem; font-weight: 700; }
p  { margin: 0 0 1.1em; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 24px; }

.eyebrow {
  text-transform: uppercase; letter-spacing: .15em;
  font-size: .74rem; font-weight: 700; color: var(--amber-dk); margin: 0 0 .9em;
}
.bg-dark .eyebrow, .hero .eyebrow { color: var(--amber-2); }


/* ==================================================================
   HEADER
   ================================================================== */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  transition: background .3s var(--ease), box-shadow .3s var(--ease), border-color .3s;
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck {
  background: rgba(255,255,255,.94);
  backdrop-filter: saturate(160%) blur(12px);
  border-bottom-color: var(--line);
  box-shadow: 0 1px 20px rgba(11,31,53,.06);
}
.header-inner { display: flex; align-items: center; gap: 22px; min-height: 78px; }

/* LOGO LOCKUP — the round seal plus the company name set in live text.
   The seal is square, so it can be tall without eating the width the nav
   needs. The nav bar keeps its 78px height and its original spacing. */
.logo { display: flex; align-items: center; gap: 13px; text-decoration: none; flex-shrink: 0; }
.logo-seal { height: 120px; width: auto; display: block; }
.logo-word {
  font-size: .98rem; font-weight: 800; line-height: 1.12; letter-spacing: .015em;
  color: #fff; white-space: nowrap;
}
.is-stuck .logo-word { color: var(--navy-800); }
/* The seal is full colour on every background, so no invert filter here.
   The old wordmark PNG needed one; the seal must never get one. */
.site-footer .logo-seal { height: 64px; }
.site-footer .logo-word { color: #fff; }
@media (max-width: 900px) {
  .logo-seal { height: 64px; }
  .logo-word { font-size: .86rem; }
}
@media (max-width: 420px) { .logo-word { display: none; } }

/* ==================================================================
   BRAND HOVER CARD
   Hovering (or keyboard-focusing) the header logo opens a panel with
   the seal shown large and a click-to-call number under it. The card
   is a SIBLING of the home link, never inside it — otherwise the
   phone number would inherit the link to the home page.
   ================================================================== */
.brand { position: relative; display: flex; align-items: center; flex-shrink: 0; }
.brand-card {
  position: absolute; top: calc(100% + 10px); left: -14px;
  width: min(392px, 88vw);
  padding: 26px 26px 22px;
  background: rgba(6,15,28,.93);
  backdrop-filter: saturate(150%) blur(14px);
  border: 1px solid rgba(240,162,2,.30);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  text-align: center;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(-8px) scale(.94); transform-origin: 90px -10px;
  transition: opacity .26s var(--ease), transform .26s var(--ease), visibility .26s;
  z-index: 70;
}
.brand:hover .brand-card,
.brand:focus-within .brand-card {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0) scale(1);
}
.brand-card-seal {
  width: min(340px, 74vw); height: auto; display: block; margin: 0 auto 18px;
}
.brand-card-label {
  display: block; font-size: .68rem; font-weight: 800; letter-spacing: .18em;
  text-transform: uppercase; color: var(--amber-2); margin-bottom: 7px;
}
a.brand-card-tel {
  display: inline-block; font-size: 1.32rem; font-weight: 800; letter-spacing: .01em;
  color: #fff; text-decoration: none; padding: 7px 16px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,.20); transition: background .2s, border-color .2s, color .2s;
}
a.brand-card-tel:hover, a.brand-card-tel:focus-visible {
  background: var(--amber); border-color: var(--amber); color: var(--navy-900);
}
.brand-card-note { font-size: .78rem; color: #9FB5CA; margin: 11px 0 0; }
/* No hover on touch screens, and no room for it either. The hero already
   carries a full-width Call button on phones. */
@media (max-width: 900px) { .brand-card { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .brand-card { transition: opacity .01s, visibility .01s; transform: none; }
  .brand:hover .brand-card, .brand:focus-within .brand-card { transform: none; }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav > a {
  color: rgba(255,255,255,.9); text-decoration: none; font-size: .93rem; font-weight: 600;
  padding: 5px 0; border-bottom: 2px solid transparent; transition: color .2s, border-color .2s; white-space: nowrap;
}
.nav > a:hover { color: #fff; border-bottom-color: var(--amber); }
.nav > a[aria-current="page"] { color: #fff; border-bottom-color: var(--amber); }
.is-stuck .nav > a { color: var(--navy-800); }
.is-stuck .nav > a:hover, .is-stuck .nav > a[aria-current="page"] { color: var(--navy-900); }
.nav .btn { border-bottom: none; }

.nav-toggle {
  display: none; background: none; border: 1px solid rgba(255,255,255,.35); border-radius: var(--radius);
  padding: 9px 13px; font-size: .9rem; font-weight: 600; cursor: pointer; color: #fff;
}
.is-stuck .nav-toggle { border-color: var(--line); color: var(--navy-800); }

/* language switcher */
.lang-switch { display: inline-flex; gap: 2px; padding: 3px; border-radius: 100px; background: rgba(255,255,255,.14); }
.is-stuck .lang-switch { background: var(--paper-2); }
.lang-btn {
  border: 0; background: transparent; cursor: pointer;
  font: inherit; font-size: .74rem; font-weight: 800; letter-spacing: .06em;
  color: rgba(255,255,255,.72); padding: 5px 10px; border-radius: 100px; transition: .18s;
}
.lang-btn:hover { color: #fff; }
.lang-btn.is-active { background: var(--amber); color: var(--navy-900); }
.is-stuck .lang-btn { color: var(--steel); }
.is-stuck .lang-btn:hover { color: var(--navy-800); }
.is-stuck .lang-btn.is-active { background: var(--amber); color: var(--navy-900); }

/* ==================================================================
   BUTTONS
   ================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 22px; border-radius: var(--radius);
  font-weight: 700; font-size: .94rem; text-decoration: none;
  border: 2px solid transparent; cursor: pointer; white-space: nowrap;
  transition: transform .18s var(--ease), background .18s, border-color .18s, color .18s, box-shadow .18s;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--amber); color: var(--navy-900); border-color: var(--amber); box-shadow: 0 6px 20px rgba(240,162,2,.32); }
.btn-primary:hover { background: var(--amber-2); border-color: var(--amber-2); color: var(--navy-900); box-shadow: 0 10px 28px rgba(240,162,2,.42); }
.btn-outline { background: transparent; color: var(--navy-800); border-color: var(--line); }
.btn-outline:hover { border-color: var(--navy-800); background: var(--paper-2); color: var(--navy-800); }
.btn-glass { background: rgba(255,255,255,.1); color: #fff; border-color: rgba(255,255,255,.42); backdrop-filter: blur(6px); }
.btn-glass:hover { background: rgba(255,255,255,.2); border-color: #fff; color: #fff; }
.btn-lg { padding: 16px 30px; font-size: 1.02rem; }

/* ==================================================================
   HERO — real video footage of a vessel, with a photographic fallback
   ------------------------------------------------------------------
   Three layers, in order of preference:
     1. assets/video/hero.mp4      → plays muted + looping
     2. assets/img/hero-poster.jpg → shows if there's no video (slow drift)
     3. deep navy gradient         → shows if there's neither
   ================================================================== */
.hero {
  position: relative; min-height: 100svh; display: flex; align-items: center;
  overflow: hidden;
  background: radial-gradient(900px 500px at 72% 18%, #1B4570 0%, transparent 64%), var(--navy-900);
}

.hero-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }

/* Layer 1 — the cargo ship entering port. Always present, so the hero is
   never empty. A photo or video simply covers it when you add one. */
.hero-art {
  position: absolute; inset: 0; width: 100%; max-width: none; height: 100%;
  object-fit: cover; object-position: center bottom; display: block;
}

/* the still — poster photo, slowly drifting so it never feels dead */
.hero-still {
  position: absolute; inset: -4%; background-color: transparent;
  background-image: url("img/hero-poster.jpg?v=17");
  background-size: cover; background-position: center 58%;
  animation: kenburns 34s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.13) translate3d(-1.6%, -1.2%, 0); }
}

/* the video — sits on top of the still and covers it once it plays */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 55%;
  opacity: 0; transition: opacity 1.1s var(--ease);
}
.hero-video.is-playing { opacity: 1; }
/* if no video file is present, app.js removes it entirely */

/* optional: the original vector scene, if you ever want it back */
.scene { position: absolute; inset: 0; z-index: 0; }
.scene svg { width: 100%; height: 100%; display: block; }
.scene [data-depth] { will-change: transform; }

/* readability veil over the artwork */
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(100deg, rgba(6,15,28,.95) 0%, rgba(6,15,28,.86) 30%, rgba(6,15,28,.34) 58%, rgba(6,15,28,.12) 78%, rgba(6,15,28,.40) 100%),
    linear-gradient(0deg, rgba(6,15,28,.80) 0%, transparent 30%);
}

.hero-inner { position: relative; z-index: 2; width: 100%; padding-top: 130px; padding-bottom: 96px; }
.hero h1 { color: #fff; max-width: 15ch; margin-bottom: .42em; }
.hero h1 .l2 { display: block; color: var(--amber-2); }
.hero-sub { font-size: clamp(1rem, 1.5vw, 1.18rem); color: #C3D3E2; max-width: 56ch; margin-bottom: 2em; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-note { margin-top: 26px; font-size: .87rem; color: #8FA7BE; max-width: 48ch; }

/* entrance */
.hero .anim { opacity: 0; transform: translateY(22px); animation: riseIn .9s var(--ease) forwards; }
.hero .d1 { animation-delay: .15s } .hero .d2 { animation-delay: .28s }
.hero .d3 { animation-delay: .41s } .hero .d4 { animation-delay: .54s } .hero .d5 { animation-delay: .67s }
@keyframes riseIn { to { opacity: 1; transform: none; } }

/* scroll cue */
.scroll-cue {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 9px;
  color: rgba(255,255,255,.55); font-size: .68rem; text-transform: uppercase; letter-spacing: .22em; font-weight: 700;
}
.scroll-cue i { display: block; width: 1px; height: 42px; background: linear-gradient(180deg, var(--amber), transparent); animation: cue 2s ease-in-out infinite; }
@keyframes cue { 0%,100% { opacity: .25; transform: scaleY(.55); transform-origin: top; } 50% { opacity: 1; transform: scaleY(1); transform-origin: top; } }

/* --- scene animations --- */
.ship { animation: sail 3.4s var(--ease) both, bob 7s ease-in-out 3.4s infinite; }
@keyframes sail { from { transform: translateX(-520px); opacity: 0; } 35% { opacity: 1; } to { transform: translateX(0); opacity: 1; } }
@keyframes bob  { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(9px) rotate(.35deg); } }

.wave-a { animation: drift 18s linear infinite; }
.wave-b { animation: drift 27s linear infinite reverse; }
.wave-c { animation: drift 38s linear infinite; }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(-360px); } }

.cloud-a { animation: float 78s linear infinite; }
.cloud-b { animation: float 116s linear infinite; }
@keyframes float { from { transform: translateX(-260px); } to { transform: translateX(1700px); } }

.moon-glow { animation: pulse 9s ease-in-out infinite; transform-origin: center; }
@keyframes pulse { 0%,100% { opacity: .55; transform: scale(1); } 50% { opacity: .9; transform: scale(1.07); } }

.twinkle { animation: tw 4.5s ease-in-out infinite; }
.twinkle:nth-of-type(2n) { animation-delay: 1.1s }
.twinkle:nth-of-type(3n) { animation-delay: 2.3s }
.twinkle:nth-of-type(5n) { animation-delay: 3.4s }
@keyframes tw { 0%,100% { opacity: .18 } 50% { opacity: .95 } }

.beacon { animation: blink 3.2s ease-in-out infinite; }
.beacon.b2 { animation-delay: 1.5s }
@keyframes blink { 0%,72%,100% { opacity: .15 } 82% { opacity: 1 } }

.wake { animation: wake 5.5s ease-in-out infinite; transform-origin: right center; }
@keyframes wake { 0%,100% { opacity: .30; transform: scaleX(1); } 50% { opacity: .58; transform: scaleX(1.06); } }

/* ==================================================================
   SECTIONS
   ================================================================== */
section { padding: 92px 0; position: relative; }
section.tight { padding: 56px 0; }
.bg-soft { background: var(--paper-2); }
.bg-dark { background: var(--navy-800); color: #DDE7F1; }
.bg-dark h2, .bg-dark h3 { color: #fff; }
.bg-deep {
  background: radial-gradient(900px 420px at 15% 0%, var(--navy-600) 0%, transparent 62%), var(--navy-900);
  color: #DDE7F1;
}
.bg-deep h2, .bg-deep h3 { color: #fff; }

.section-head { max-width: 60ch; margin-bottom: 46px; }
.section-head p { color: var(--steel); font-size: 1.06rem; margin-bottom: 0; }
.bg-dark .section-head p, .bg-deep .section-head p { color: #9FB5CA; }

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.reveal.is-in { opacity: 1; transform: none; }
.reveal.r1 { transition-delay: .08s } .reveal.r2 { transition-delay: .16s }
.reveal.r3 { transition-delay: .24s } .reveal.r4 { transition-delay: .32s }
html:not(.js-ready) .reveal { opacity: 1; transform: none; }

/* ==================================================================
   STAT BAR
   ================================================================== */
.statbar { background: linear-gradient(90deg, var(--navy-800), var(--navy-700)); color: #fff; position: relative; z-index: 2; }
.statbar .grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.stat { padding: 34px 24px; border-right: 1px solid rgba(255,255,255,.10); }
.stat:last-child { border-right: 0; }
.stat b { display: block; font-size: clamp(1.7rem, 3vw, 2.3rem); font-weight: 800; color: #fff; letter-spacing: -.03em; line-height: 1; margin-bottom: 8px; }
.stat b .u { color: var(--amber); }
.stat span { font-size: .76rem; text-transform: uppercase; letter-spacing: .11em; color: #93AAC0; font-weight: 600; }

/* ==================================================================
   CARDS
   ================================================================== */
.cards { display: grid; gap: 24px; grid-template-columns: repeat(3, 1fr); }
.cards.two { grid-template-columns: repeat(2, 1fr); }
.card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 32px 28px; display: flex; flex-direction: column; position: relative; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s;
}
.card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--amber), var(--amber-2));
  transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow); border-color: #C6D2DF; }
.card:hover::before { transform: scaleX(1); }
.card h3 { margin-bottom: .45em; }
.card p { color: var(--steel); font-size: .96rem; flex-grow: 1; }
.card-link { font-weight: 700; font-size: .92rem; text-decoration: none; color: var(--navy-700); margin-top: 8px; }
.card-link::after { content: " →"; transition: margin .2s; display: inline-block; }
.card:hover .card-link::after { margin-left: 5px; }
.card-icon { width: 44px; height: 44px; margin-bottom: 18px; color: var(--amber-dk); }

.bg-dark .card, .bg-deep .card { background: rgba(255,255,255,.045); border-color: rgba(255,255,255,.12); }
.bg-dark .card p, .bg-deep .card p { color: #A6BBCF; }
.bg-dark .card-link, .bg-deep .card-link { color: var(--amber-2); }

/* ==================================================================
   PROCESS
   ================================================================== */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step { position: relative; padding-top: 8px; margin-top: 22px; }
/* Step numbers (01-04) removed. The amber rule above each step is .step::after. */
.step::after { content: ""; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: var(--amber); }
.step h3 { font-size: 1.02rem; }
.step p { font-size: .93rem; margin: 0; color: var(--steel); }
.bg-dark .step p, .bg-deep .step p { color: #9FB5CA; }

/* ==================================================================
   TAGS / TABLES
   ================================================================== */
.taglist { display: flex; flex-wrap: wrap; gap: 9px; padding: 0; margin: 0; list-style: none; }
.taglist li {
  border: 1px solid var(--line); background: #fff; border-radius: 100px;
  padding: 8px 16px; font-size: .88rem; color: var(--navy-800); font-weight: 600;
  transition: border-color .2s, transform .2s;
}
.taglist li:hover { border-color: var(--amber); transform: translateY(-2px); }

.table-wrap { position: relative; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }
/* When a table is too wide for the screen (phones), say so and fade the
   right edge so it's obvious the table scrolls sideways. */
.table-wrap.is-scrollable::after {
  content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 42px;
  pointer-events: none; border-radius: 0 var(--radius) var(--radius) 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.96));
}
.table-hint {
  display: none; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase;
  font-weight: 600; color: var(--steel); margin: 10px 2px 0;
}
.table-hint.on { display: block; }
table { width: 100%; border-collapse: collapse; font-size: .95rem; }
th, td { text-align: left; padding: 15px 20px; border-bottom: 1px solid var(--line); vertical-align: top; }
th { background: var(--paper-2); font-weight: 700; color: var(--navy-800); font-size: .74rem; text-transform: uppercase; letter-spacing: .09em; }
tbody tr:last-child td { border-bottom: none; }
tbody tr { transition: background .18s; }
tbody tr:hover { background: #FAFCFE; }
td strong { color: var(--navy-800); }

/* ==================================================================
   SPLIT / CTA / FORM
   ================================================================== */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; }
.split.wide-left { grid-template-columns: 1.12fr .88fr; }

.cta-band {
  background: linear-gradient(135deg, var(--navy-800) 0%, var(--navy-600) 100%);
  color: #fff; border-radius: var(--radius); padding: 52px 48px;
  display: flex; align-items: center; justify-content: space-between; gap: 34px; flex-wrap: wrap;
  position: relative; overflow: hidden; box-shadow: var(--shadow-lg);
}
.cta-band::before {
  content: ""; position: absolute; right: -70px; top: -70px; width: 280px; height: 280px; border-radius: 50%;
  background: radial-gradient(circle, rgba(240,162,2,.30), transparent 68%);
}
.cta-band > * { position: relative; }
.cta-band h2 { color: #fff; margin-bottom: .3em; }
.cta-band p { color: #B6CADB; margin: 0; max-width: 50ch; }

.form-card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 34px; box-shadow: var(--shadow); }
.field { margin-bottom: 18px; }
.field label { display: block; font-weight: 700; font-size: .87rem; color: var(--navy-800); margin-bottom: 6px; }
.field .hint { font-weight: 400; color: var(--steel-2); }
.field input, .field select, .field textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: .96rem;
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--navy-700); box-shadow: 0 0 0 3px rgba(18,48,79,.13);
}
.field textarea { min-height: 130px; resize: vertical; }
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-note { font-size: .84rem; color: var(--steel); margin-top: 14px; }

.routes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.route { border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; background: #fff; }
.route h3 { font-size: 1rem; margin-bottom: .25em; }
.route p { font-size: .89rem; color: var(--steel); margin: 0 0 .4em; }
.route a { font-weight: 700; text-decoration: none; }

.emergency {
  background: linear-gradient(100deg, var(--amber), var(--amber-2));
  color: var(--navy-900); border-radius: var(--radius); padding: 24px 28px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap; font-weight: 600;
}
.emergency strong { font-size: 1.2rem; }
.emergency a { color: var(--navy-900); }

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 0; font-weight: 700; color: var(--navy-800);
  list-style: none; display: flex; justify-content: space-between; gap: 18px; align-items: center;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--amber-dk); font-size: 1.5rem; font-weight: 300; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { color: var(--steel); padding-bottom: 6px; margin-bottom: 14px; max-width: 78ch; }

/* interior page head */
.page-head {
  background: radial-gradient(800px 380px at 78% 0%, var(--navy-600) 0%, transparent 64%), var(--navy-800);
  color: #fff; padding: 168px 0 74px;
}
.page-head h1 { color: #fff; max-width: 20ch; font-size: clamp(1.9rem, 3.8vw, 2.9rem); }
.page-head p { color: #B6CADB; max-width: 62ch; font-size: 1.06rem; margin-bottom: 0; }
.crumbs { font-size: .82rem; color: #8FA7BE; margin-bottom: 18px; }
.crumbs a { color: #8FA7BE; text-decoration: none; }
.crumbs a:hover { color: var(--amber-2); }

.detail { border-top: 1px solid var(--line); padding: 28px 0; display: grid; grid-template-columns: 260px 1fr; gap: 36px; }
.detail:last-of-type { border-bottom: 1px solid var(--line); }
.detail h3 { margin: 0; }
.detail .meta { color: var(--steel); font-size: .86rem; margin-top: 6px; }
.detail p:last-child { margin-bottom: 0; }

/* ==================================================================
   FOOTER
   ================================================================== */
.site-footer { background: var(--navy-900); color: #A2B8CC; padding: 66px 0 28px; font-size: .92rem; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 40px; }
.site-footer h4 { color: #fff; font-size: .74rem; text-transform: uppercase; letter-spacing: .14em; margin-bottom: 1.2em; }
.site-footer a { color: #A2B8CC; text-decoration: none; }
.site-footer a:hover { color: var(--amber); }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: 10px; }
.footer-about p { color: #8299AE; max-width: 40ch; font-size: .91rem; }
.footer-bottom {
  margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.11);
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; font-size: .83rem; color: #74899E;
}
.footer-bottom a { color: inherit; text-decoration: none; }
.footer-bottom a:hover { color: var(--amber); }

.skip { position: absolute; left: -9999px; top: 0; background: var(--amber); color: var(--navy-900); padding: 12px 18px; z-index: 100; font-weight: 700; }
.skip:focus { left: 0; }

/* utilities */
.lead { font-size: 1.1rem; color: var(--steel); }
.bg-dark .lead, .bg-deep .lead { color: #B6CADB; }
.mb0 { margin-bottom: 0 } .mt32 { margin-top: 32px } .muted { color: var(--steel) } .small { font-size: .87rem }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 1000px) {
  .cards, .cards.two { grid-template-columns: 1fr 1fr; }
  .steps { grid-template-columns: 1fr 1fr; row-gap: 34px; }
  .statbar .grid { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; border-right: 0; }
  .stat:nth-child(-n+2) { border-bottom: 1px solid rgba(255,255,255,.10); }
  .stat:nth-child(2n) { border-right: 0; }
  .split, .split.wide-left { grid-template-columns: 1fr; gap: 40px; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .detail { grid-template-columns: 1fr; gap: 12px; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }
  .nav {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 22px;
    box-shadow: 0 20px 40px rgba(6,15,28,.16);
  }
  .nav.open { display: flex; }
  .nav > a { color: var(--navy-800); padding: 15px 0; border-bottom: 1px solid var(--line); }
  /* the current page link is white in the desktop bar — on the white
     drop-down panel that made it invisible. Force it dark here. */
  .nav > a[aria-current="page"],
  .is-stuck .nav > a[aria-current="page"] {
    color: var(--navy-900); font-weight: 700; border-bottom-color: var(--amber);
  }
  .nav .btn { margin-top: 14px; }
  .nav .lang-switch { margin-top: 14px; align-self: flex-start; background: var(--paper-2); }
  .nav .lang-btn { color: var(--steel); }
  .nav-toggle { display: block; margin-left: auto; }
  .cards, .cards.two, .routes, .steps { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  section { padding: 62px 0; }
  .hero-inner { padding-top: 116px; padding-bottom: 90px; }
  .cta-band { padding: 34px 26px; }
  .form-card { padding: 24px 20px; }
  .page-head { padding: 132px 0 56px; }
  .scroll-cue { display: none; }

  /* On narrow screens the vessel would sit under the headline.
     Push the scene right and darken it so the copy always wins. */
  .scene svg { transform: translateX(26%) scale(1.18); transform-origin: right center; }
  .hero::after {
    background:
      linear-gradient(180deg, rgba(6,15,28,.90) 0%, rgba(6,15,28,.74) 40%, rgba(6,15,28,.62) 66%, rgba(6,15,28,.94) 100%);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero .anim { opacity: 1 !important; transform: none !important; }
}

/* ==================================================================
   MARKET TICKER — sits directly under the navigation, sitewide
   ================================================================== */
.ticker {
  background: var(--navy-900);
  border-top: 1px solid rgba(255,255,255,.08);
  border-bottom: 1px solid rgba(255,255,255,.08);
  height: 46px; overflow: hidden;
}
.ticker .tradingview-widget-container,
.ticker .tradingview-widget-container__widget { height: 46px; }
.ticker iframe { height: 46px !important; display: block; }
/* TradingView injects its own attribution link; keep it out of the strip */
.ticker .tradingview-widget-copyright { display: none; }

/* the header is fixed, so everything below it shifts down by the strip height */
.hero-inner  { padding-top: 150px; padding-bottom: 110px; }
.page-head   { padding-top: 214px; }

/* ==================================================================
   LIVE AIS MAP
   ================================================================== */
.map-frame {
  position: relative; width: 100% !important; height: 620px !important;
  border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius);
  overflow: hidden; background: var(--navy-800); box-shadow: var(--shadow-lg);
}
.map-frame iframe { width: 100% !important; height: 620px !important; border: 0; display: block; }

@media (max-width: 760px) {
  .map-frame, .map-frame iframe { height: 460px !important; }
  .hero-inner { padding-top: 150px; padding-bottom: 90px; }
  .page-head  { padding-top: 178px; }
}


/* ==================================================================
   HERO LIVE CAMERA — small panel, bottom right of the hero
   ================================================================== */
.hero-cam {
  position: absolute; right: 40px; top: 54%; z-index: 3; margin: 0;
  width: 330px; max-width: calc(100vw - 48px);
  background: var(--navy-900); border: 1px solid rgba(255,255,255,.18);
  border-radius: var(--radius); overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,.45);
  transition: transform .25s var(--ease), border-color .25s;
}
.hero-cam:hover { transform: translateY(-3px); border-color: rgba(240,162,2,.65); }
.hero-cam-video { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; }
.hero-cam-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.hero-cam figcaption {
  display: flex; flex-direction: column; gap: 2px; padding: 10px 13px;
  border-top: 1px solid rgba(255,255,255,.10);
}
.hero-cam figcaption strong { color: #fff; font-size: .84rem; line-height: 1.25; }
.hero-cam figcaption span { color: #8FA7BE; font-size: .66rem; text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }

.cam-live {
  position: absolute; top: 8px; left: 8px; z-index: 2; pointer-events: none;
  display: inline-flex; align-items: center; gap: 5px;
  background: rgba(6,15,28,.75); color: #fff; backdrop-filter: blur(4px);
  font-size: .58rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 100px;
}
.cam-live::before {
  content: ""; width: 5px; height: 5px; border-radius: 50%; background: #FF4D4D;
  animation: livepulse 1.8s ease-in-out infinite;
}
@keyframes livepulse { 0%,100% { opacity: 1 } 50% { opacity: .25 } }

@media (max-width: 1100px) { .hero-cam { width: 250px; right: 22px; top: 60%; } }
@media (max-width: 900px)  { .hero-cam { display: none; } }

/* ==================================================================
   CEO LETTER — leadership page
   ================================================================== */
.ceo { padding: 88px 0 96px; }
.ceo-grid { display: grid; grid-template-columns: 270px minmax(0,1fr); gap: 62px; align-items: start; }

.ceo-frame {
  background: #fff; padding: 11px; border: 1px solid var(--line);
  box-shadow: 0 22px 48px rgba(11,31,53,.16);
}
.ceo-frame img { display: block; width: 100%; height: auto; max-width: none; }

.ceo-letter .ceo-eyebrow {
  display: flex; align-items: center; gap: 14px;
  text-transform: uppercase; letter-spacing: .19em; font-size: .74rem;
  font-weight: 700; color: var(--amber-dk); margin: 0 0 1.1em;
}
.ceo-eyebrow i { display: block; width: 34px; height: 1.5px; background: var(--amber); flex: none; }

.ceo-title {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-weight: 700; font-size: clamp(1.75rem, 2.7vw, 2.45rem);
  line-height: 1.18; letter-spacing: -.01em; color: var(--navy-900); margin: 0 0 .85em;
}
.ceo-letter p { color: #384A5C; font-size: 1.04rem; line-height: 1.72; margin: 0 0 1.35em; }

.ceo-letter .ceo-sign {
  font-family: Georgia, "Iowan Old Style", "Times New Roman", serif;
  font-style: italic; font-size: 1.45rem; color: var(--navy-900);
  margin: 1.9em 0 .12em !important;
}
.ceo-letter .ceo-role {
  text-transform: uppercase; letter-spacing: .13em; font-size: .74rem;
  font-weight: 600; color: var(--steel); margin: 0 0 1.4em !important;
}
.ceo-letter .ceo-contact { font-size: .92rem; margin: 0 !important; display: flex; gap: 10px; flex-wrap: wrap; }
.ceo-letter .ceo-contact a { color: var(--navy-700); font-weight: 600; text-decoration: none; }
.ceo-letter .ceo-contact a:hover { color: var(--amber-dk); text-decoration: underline; }
.ceo-letter .ceo-contact span { color: var(--steel-2); }

@media (max-width: 900px) {
  .ceo-grid { grid-template-columns: 1fr; gap: 34px; }
  .ceo-photo { max-width: 250px; }
  .ceo { padding: 60px 0 66px; }
}

/* ==================================================================
   NAVIGATION COLLAPSE — 900px
   The full bar (six links + language switcher + quote button) needs
   more room than an iPad in portrait gives it, so the Menu button
   takes over well before phone width.
   ================================================================== */
@media (max-width: 900px) {
  .nav {
    display: none; position: absolute; top: 78px; left: 0; right: 0;
    background: #fff; border-bottom: 1px solid var(--line);
    flex-direction: column; align-items: stretch; gap: 0; padding: 12px 24px 22px;
    box-shadow: 0 20px 40px rgba(6,15,28,.16);
  }
  .nav.open { display: flex; }
  .nav > a { color: var(--navy-800); padding: 15px 0; border-bottom: 1px solid var(--line); }
  .nav > a[aria-current="page"],
  .is-stuck .nav > a[aria-current="page"] {
    color: var(--navy-900); font-weight: 700; border-bottom-color: var(--amber);
  }
  .nav .btn { margin-top: 14px; }
  .nav .lang-switch { margin-top: 14px; align-self: flex-start; background: var(--paper-2); }
  .nav .lang-btn { color: var(--steel); }
  .nav-toggle { display: block; margin-left: auto; }
}

/* ==================================================================
   CONTACT PANEL
   ================================================================== */
.contact-panel {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff;
  overflow: hidden; box-shadow: var(--shadow);
}
.contact-row {
  display: grid; grid-template-columns: 190px 1fr; gap: 18px;
  padding: 16px 22px; border-bottom: 1px solid var(--line); align-items: baseline;
}
.contact-row:last-child { border-bottom: 0; }
.contact-label {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .1em;
  color: var(--navy-800);
}
.contact-value { font-size: .97rem; color: var(--navy-700); font-weight: 600; text-decoration: none; line-height: 1.5; }
a.contact-value:hover { color: var(--amber-dk); text-decoration: underline; }
.contact-value.plain { color: var(--steel); font-weight: 400; }

.subject-lines .subject-head {
  font-size: .78rem; text-transform: uppercase; letter-spacing: .1em;
  font-weight: 700; color: var(--steel); margin-bottom: .9em;
}
.subject-lines ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 1px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.subject-lines li {
  background: #fff; padding: 13px 20px; display: flex; align-items: baseline;
  justify-content: space-between; gap: 16px; flex-wrap: wrap;
}
.subject-lines a { font-weight: 700; color: var(--navy-700); text-decoration: none; font-size: .95rem; }
.subject-lines a:hover { color: var(--amber-dk); text-decoration: underline; }
.subject-lines span { color: var(--steel); font-size: .86rem; }

@media (max-width: 620px) {
  .contact-row { grid-template-columns: 1fr; gap: 5px; }
}


/* ==================================================================
   VESSEL SEARCH — sits above the live AIS map on the home page.
   The form's flex layout is also written inline in index.html so a
   stale stylesheet cannot break it (same rule as the hero camera).
   ================================================================== */
.vf-search { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 18px; }
.vf-search-label {
  font-size: .72rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--amber-2); margin-right: 4px;
}
.vf-search-input {
  flex: 1 1 260px; max-width: 360px;
  padding: 11px 14px; font-size: .95rem; font-family: inherit;
  color: #fff; background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.20); border-radius: 8px;
  transition: border-color .2s, background .2s;
}
.vf-search-input::placeholder { color: #7F94A8; }
.vf-search-input:focus {
  outline: none; background: rgba(255,255,255,.11);
  border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240,162,2,.18);
}
.vf-search .btn { padding: 11px 20px; }
.vf-hint { color: #9FB5CA; margin: 0 0 20px; max-width: 62ch; }
@media (max-width: 620px) {
  .vf-search { gap: 8px; }
  .vf-search-input { flex: 1 1 100%; max-width: none; }
  .vf-search .btn { flex: 1 1 auto; }
}