/* ==========================================================
   Light theme in the Ternion logo colours (navy + orange).
   Loaded last; "dark" sections now render in logo navy,
   "tint" is a cool light grey, "sec-orange" is a full orange band.
   ========================================================== */
:root {
  --orange: #f5770f;
  --orange-2: #ff8f2e;
  --navy: #0b1f4d;
  --navy-2: #13306e;
  --ink: var(--navy);
  --ink-2: var(--navy-2);
  --paper: #ffffff;
  --tint: #eef2f8;
  --frame: #e3e8ef;
  --text-l: #0b1f4d;
  --mute-l: #56627a;
  --text-d: #ffffff;
  --mute-d: #b4c1dc;
  --line-d: rgba(255, 255, 255, .12);
  --line-l: rgba(11, 31, 77, .1);
}
body { background: var(--frame); color: var(--text-l); }
.frame { background: #fff; }
.light { background: #fff; color: var(--text-l); }
.tint { background: var(--tint); }
.dark { background: var(--navy); }

/* ---------- header: white ---------- */
.topbar { background: rgba(255, 255, 255, .96); color: var(--navy); border-bottom: 1px solid var(--line-l); }
.nav a { color: var(--navy); }
.nav a:hover, .nav a.is-active { color: var(--orange); }
.phone { color: var(--navy); }
.burger span { background: var(--navy); }
@media (max-width: 980px) {
  .nav { background: #fff; border-bottom: 1px solid var(--line-l); box-shadow: 0 20px 40px -20px rgba(11, 31, 77, .25); }
  .nav a { border-top-color: var(--line-l); }
}

/* ---------- video hero ---------- */
.hero-v { position: relative; background: #fcfcfc; overflow: hidden; padding-top: 40px; }
.hero-v__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; align-items: end; }
.hero-v__text { display: grid; gap: 22px; justify-items: start; padding-bottom: 110px; align-self: center; }
.hero-v__text .eyebrow { margin: 0; }
.hero-v__text h1 { font-size: clamp(32px, 4.4vw, 58px); }
.hero-v__text .lead { margin: 0; }
.hero-v__facts { list-style: none; padding: 18px 0 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 0; border-top: 1px solid var(--line-l); }
.hero-v__facts li { padding: 0 22px; border-left: 1px solid var(--line-l); }
.hero-v__facts li:first-child { padding-left: 0; border-left: 0; }
.hero-v__facts strong { display: block; font: 600 16px/1.2 var(--head); text-transform: uppercase; color: var(--navy); }
.hero-v__facts span { font: 700 10px/1.8 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-l); }
.hero-v__media { position: relative; margin-left: -60px; margin-right: calc(-1 * max(32px, (100vw - var(--wrap)) / 2 + 32px)); }
.hero-v__video { display: block; width: 100%; height: auto; position: relative; z-index: 1;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to bottom, transparent 0, #000 8%);
  -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 6%), linear-gradient(to bottom, transparent 0, #000 8%); mask-composite: intersect; }
/* the clip's navy ground continues under the headline, full width */
.hero-v__media::before {
  content: ""; position: absolute; right: 92%; bottom: 0; width: 100vw; height: 12.8%;
  background: #13274c; pointer-events: none;
}
.hero-v__media::after { /* orange edge line along the road, like a kerb */
  content: ""; position: absolute; left: -100vw; right: 0; bottom: 12.8%; height: 2px; background: var(--orange); opacity: .9; z-index: 2;
}

/* ---------- buttons on light ---------- */
.light .btn--ghost { color: var(--navy); box-shadow: inset 0 0 0 1px var(--navy); }
.light .btn--ghost:hover { color: #fff; background: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }

/* ---------- orange sections ---------- */
.sec-orange { background: var(--orange); color: #fff; }
.sec-orange h1 span, .sec-orange h2 span { color: var(--navy); }
.sec-orange .eyebrow, .sec-orange .eyebrow--chev { color: #fff; }
.sec-orange .eyebrow--chev::before { background: var(--navy); }
.sec-orange .lead, .sec-orange .vm__text { color: rgba(255, 255, 255, .92); }
.sec-orange .btn { background: var(--navy); color: #fff; }
.sec-orange .btn:hover { background: var(--navy-2); }
.sec-orange .btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px #fff; }
.sec-orange .btn--ghost:hover { background: #fff; color: var(--navy); }
.sec-orange .grid-lines i, .sec-orange .grid-lines::before { background: rgba(255, 255, 255, .16); }
.vm.sec-orange .vm__big { color: #fff; }
.closer.sec-orange .closer__type .l1, .closer.sec-orange .closer__type .l3 { color: #fff; }
.closer.sec-orange .closer__type .l2, .closer.sec-orange .closer__type .l4 { color: var(--navy); }
.closer.sec-orange .closer__type .l4 em { color: #fff; }
.closer.sec-orange .closer__side { border-left-color: var(--navy); }

/* ---------- navy sections ---------- */
.dark .acc p { color: var(--mute-d); }
.fleet.dark .fleet__media .truck { filter: drop-shadow(0 30px 30px rgba(0, 0, 0, .35)); }
.footer.dark { background: #081a40; }
.footer__grid > div:not(.footer__brand) { color: rgba(255, 255, 255, .78); }

/* ---------- values on tint ---------- */
.values.light { border-top: 0; }
.values.light .values__grid { border-top-color: var(--line-l); }
.values.light .value + .value { border-left-color: var(--line-l); }
.values.light .value__num { -webkit-text-stroke: 1px rgba(11, 31, 77, .28); }
.values.light .value p:last-child { color: var(--mute-l); }
@media (max-width: 980px) { .values.light .value, .values.light .value + .value { border-top-color: var(--line-l); } }

/* ---------- inner page hero on tint ---------- */
.page-hero.light .page-hero__media .truck { filter: drop-shadow(0 26px 22px rgba(11, 31, 77, .2)); }
.page-hero.light .page-hero__media::before { background: radial-gradient(closest-side, rgba(245, 119, 15, .16), transparent); }

/* ---------- contact on tint ---------- */
.quote.light dl.contacts > div { border-top-color: var(--line-l); }
.quote.light dl.contacts dd { color: var(--navy); }
.light .form { background: #fff; border: 1px solid var(--line-l); box-shadow: 0 30px 60px -30px rgba(11, 31, 77, .28); }
.light .field > span { color: var(--mute-l); }
.light .field input, .light .field select, .light .field textarea { color: var(--navy); border-bottom-color: rgba(11, 31, 77, .2); }
.light .field select option { background: #fff; }
.light .field ::placeholder { color: #9aa5b8; }
.light .field input[type="date"] { color-scheme: light; }
.light .form__legal { color: var(--mute-l); }
.light .alert { color: var(--navy); }

/* ---------- misc ---------- */
.track.tint { background: var(--tint); }
.size, .fs-svg { color: var(--navy); }

@media (max-width: 980px) {
  .hero-v__grid { grid-template-columns: 1fr; }
  .hero-v__text { padding-bottom: 10px; }
  .hero-v__media { margin-left: -32px; margin-right: -32px; }
  .hero-v__media::before, .hero-v__media::after { display: none; }
}
@media (max-width: 600px) {
  .hero-v__media { margin-left: -16px; margin-right: -16px; }
  .hero-v__facts li { padding: 0 12px; }
}

/* ---------- vision / mission over the container stack ---------- */
.vm--bg { position: relative; overflow: hidden; background: #fefefe; padding: 110px 0 120px; min-height: 760px; }
.vm__bg {
  position: absolute; right: 0; bottom: 0; height: 100%; width: auto; max-width: none;
  pointer-events: none; user-select: none;
  /* blend the photo's left edge into the page */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 22%);
  mask-image: linear-gradient(to right, transparent 0, #000 22%);
}
.vm__stack { position: relative; z-index: 1; display: grid; gap: 56px; max-width: var(--wrap); }
.vm--bg .vm__item { max-width: 620px; }
.vm--bg .vm__big { font-size: clamp(26px, 3.4vw, 46px); line-height: 1.15; color: var(--navy); }
.vm__item--mission {
  max-width: 480px !important; padding: 28px 30px; background: rgba(255, 255, 255, .9);
  border-left: 3px solid var(--orange); box-shadow: 0 24px 50px -30px rgba(11, 31, 77, .35);
  backdrop-filter: blur(4px);
}
.vm__item--mission .vm__text { color: var(--mute-l); }
@media (max-width: 980px) {
  .vm--bg { min-height: 0; padding-bottom: 0; display: flex; flex-direction: column; }
  .vm--bg .vm__stack { order: 1; width: 100%; }
  .vm--bg .vm__bg { order: 2; }
  .vm__bg { position: relative; display: block; height: auto; width: 100%; margin-top: -120px;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 30%); mask-image: linear-gradient(to bottom, transparent 0, #000 30%); }
  .vm__stack { gap: 36px; }
}

/* ---------- Why us (ship photo) ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.why { position: relative; color: #fff; padding-bottom: 100px;
  background: linear-gradient(180deg, #083856 0%, #04304d 45%, #012b46 100%); }
.why::after { /* subtle water texture continuing below the photo */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50%; background: url("../img/why-us-ocean.webp") center / cover;
  opacity: .35; mix-blend-mode: screen; pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30%); mask-image: linear-gradient(to bottom, transparent, #000 30%);
}
.why__hero img { display: block; width: 100%; height: auto;
  -webkit-mask-image: linear-gradient(to bottom, #000 82%, transparent); mask-image: linear-gradient(to bottom, #000 82%, transparent); }
.why .wrap { z-index: 1; }
.why__grid { list-style: none; padding: 0; margin: -40px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 40px; }
.why__item { text-align: center; display: grid; justify-items: center; gap: 12px; }
.why__item svg { width: 64px; height: 64px; stroke: #fff; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.why__item h3 { margin: 4px 0 0; font: 600 20px/1.2 var(--head); letter-spacing: -.005em; }
.why__item h3::after { content: ""; display: block; width: 32px; height: 2px; background: var(--orange); margin: 12px auto 0; }
.why__item p { margin: 0; max-width: 300px; font-size: 14px; line-height: 1.65; color: rgba(255, 255, 255, .78); }
.why__item:hover svg { stroke: var(--orange); }
.why__cta { display: flex; justify-content: center; margin-top: 60px; }
@media (max-width: 980px) { .why__grid { grid-template-columns: repeat(2, 1fr); margin-top: -10px; } }
@media (max-width: 600px) {
  .why { padding-bottom: 70px; }
  .why__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 10px; }
  .why::after { height: 70%; }
}

/* ---------- hero journey steps (sit on the video's road band) ---------- */
.hero-v__steps {
  position: absolute; left: 6%; right: 2%; bottom: 0; height: 12.8%; z-index: 3;
  list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: space-between;
}
.hero-v__steps li { position: relative; }
.hero-v__steps button {
  all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 6px; padding: 6px 2px;
  font: 700 10.5px/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .55);
  transition: color .25s;
}
.hero-v__steps button b { font: 600 10px/1 var(--head); letter-spacing: 0; color: rgba(255, 255, 255, .35); transition: color .25s; }
.hero-v__steps button:hover, .hero-v__steps button:focus-visible { color: #fff; }
.hero-v__steps button:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; }
.hero-v__steps li.is-active button, .hero-v__steps li.is-active button b { color: #fff; }
.hero-v__steps li.is-active button b { color: var(--orange); }
.hero-v__steps li::after { /* progress line under the active step */
  content: ""; position: absolute; left: 0; bottom: -2px; height: 2px; width: calc(var(--p, 0) * 100%);
  background: var(--orange); opacity: 0; transition: opacity .2s;
}
.hero-v__steps li.is-active::after { opacity: 1; }
@media (max-width: 980px) {
  .hero-v__steps { position: static; height: auto; background: #13274c; padding: 12px 16px; margin-top: -1px; flex-wrap: wrap; gap: 6px 14px; justify-content: center; }
}
@media (max-width: 600px) {
  .hero-v__steps button { font-size: 9.5px; letter-spacing: .1em; }
}

/* ---------- hero: video fills the whole section (desktop) ---------- */
@media (min-width: 981px) {
  .hero-v { padding: 0; min-height: max(640px, calc(100vh - 84px)); display: flex; align-items: center; background: #0b1f4d; }
  .hero-v__grid { position: static; display: block; width: 100%; }
  .hero-v__media { position: absolute; inset: 0; margin: 0; z-index: 0; }
  .hero-v__video {
    position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% 50%;
    -webkit-mask-image: none; mask-image: none; z-index: 0;
  }
  /* soft white fade on the left keeps the headline readable over every scene */
  .hero-v__media::before {
    display: block; content: ""; position: absolute; left: 0; top: 0; bottom: 0; right: auto; width: 64%; height: auto;
    background: linear-gradient(90deg, rgba(252, 252, 252, .97) 0%, rgba(252, 252, 252, .9) 48%, rgba(252, 252, 252, 0) 100%);
    z-index: 1; pointer-events: none;
  }
  .hero-v__media::after { display: none; }
  .hero-v__text { position: relative; z-index: 2; max-width: 560px; padding: 56px 0 120px; }
  .hero-v__steps {
    left: 0; right: 0; bottom: 0; height: 58px; z-index: 3;
    padding: 0 max(32px, calc((100% - var(--wrap)) / 2 + 32px));
    background: rgba(11, 31, 77, .9); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border-top: 2px solid var(--orange);
  }
}

/* ---------- hero: transparent over the video, white text (desktop) ---------- */
@media (min-width: 981px) {
  .hero-v__media::before {
    background: linear-gradient(90deg, rgba(6, 18, 46, .6) 0%, rgba(6, 18, 46, .46) 45%, rgba(6, 18, 46, 0) 88%);
  }
  .hero-v__text { color: #fff; text-shadow: 0 1px 2px rgba(4, 14, 38, .35), 0 2px 22px rgba(4, 14, 38, .5); }
  .hero-v__text h1 { color: #fff; }
  .hero-v__text h1 span { color: var(--orange); }
  .hero-v__text .eyebrow { color: #fff; }
  .hero-v__text .lead { color: rgba(255, 255, 255, .92); }
  .hero-v__text .btn { text-shadow: none; }
  .hero-v__text .btn--ghost { color: #fff; box-shadow: inset 0 0 0 1px #fff; }
  .hero-v__text .btn--ghost:hover { color: #fff; background: var(--orange); box-shadow: inset 0 0 0 1px var(--orange); }
  .hero-v__facts { border-top-color: rgba(255, 255, 255, .3); }
  .hero-v__facts li { border-left-color: rgba(255, 255, 255, .3); }
  .hero-v__facts strong { color: #fff; }
  .hero-v__facts span { color: rgba(255, 255, 255, .8); }
}

/* ---------- hero: static (video removed) ---------- */
.hero-s { position: relative; overflow: hidden; padding: 70px 0 90px; background: #fff; }
.hero-s::after { /* navy road strip the truck stands on, ending in an orange kerb */
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 56px; background: var(--navy);
  border-top: 3px solid var(--orange);
}
.hero-s__grid { display: grid; grid-template-columns: .95fr 1.05fr; gap: 30px; align-items: center; }
.hero-s__text { display: grid; gap: 22px; justify-items: start; position: relative; z-index: 2; }
.hero-s__text .eyebrow { margin: 0; }
.hero-s__text h1 { font-size: clamp(32px, 4.4vw, 58px); }
.hero-s__text .lead { margin: 0; }
.hero-s__facts { list-style: none; padding: 18px 0 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; border-top: 1px solid var(--line-l); }
.hero-s__facts li { padding: 0 22px; border-left: 1px solid var(--line-l); }
.hero-s__facts li:first-child { padding-left: 0; border-left: 0; }
.hero-s__facts strong { display: block; font: 600 16px/1.2 var(--head); text-transform: uppercase; color: var(--navy); }
.hero-s__facts span { font: 700 10px/1.8 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute-l); }
.hero-s__media { position: relative; z-index: 1; margin-right: calc(-1 * max(32px, (100vw - var(--wrap)) / 2 + 32px)); align-self: end; margin-bottom: -60px; }
.hero-s__media .truck { position: relative; width: 100%; height: auto; filter: drop-shadow(0 26px 22px rgba(11, 31, 77, .22)); }
.hero-s__media .sketch-bg { width: 112%; right: -14%; top: -62%; opacity: .14; }
@media (max-width: 980px) {
  .hero-s { padding: 50px 0 70px; }
  .hero-s__grid { grid-template-columns: 1fr; }
  .hero-s__media { margin: 10px -32px -48px 10%; }
}
@media (max-width: 600px) {
  .hero-s__media { margin: 10px -16px -40px 0; }
  .hero-s__facts li { padding: 0 12px; }
  .hero-s::after { height: 44px; }
}