/* OSAGAU — website concept v2 (trading-house style) */

:root {
  --navy: #0d215c;
  --navy-deep: #091842;
  --navy-ink: #071233;
  --orange: #e87025;
  --orange-soft: #f6a26f;
  --blue: #00a1d9;
  --text: #3f4450;
  --muted: #6b7280;
  --heading: #0d215c;
  --stone: #f3f1ed;
  --line: #e4e1dc;
  --white: #ffffff;
  --on-dark: rgba(255, 255, 255, 0.78);
  --on-dark-muted: rgba(255, 255, 255, 0.58);
  --font: "Lato", "Helvetica Neue", Arial, sans-serif;
  --container: 1240px;
  --gutter: 32px;
  --header-h: 88px;
}

@media (max-width: 767px) {
  :root {
    --gutter: 20px;
    --header-h: 68px;
  }
}

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

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

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

img {
  display: block;
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p,
figure {
  margin: 0;
}

/* even line lengths in headings and leads; no single-word last lines in body copy */
h1,
h2,
h3,
.hero-lead,
.head p,
.eyebrow {
  text-wrap: balance;
}

p,
li {
  text-wrap: pretty;
}

a {
  color: inherit;
}

.container {
  width: 100%;
  max-width: calc(var(--container) + 2 * var(--gutter));
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  z-index: 200;
  padding: 10px 16px;
  background: var(--white);
  color: var(--navy);
}

.skip-link:focus {
  left: 8px;
}

:focus-visible {
  outline: 2px solid var(--orange);
  outline-offset: 3px;
}

/* ---------- Header ---------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  height: var(--header-h);
  transition: background 0.3s, box-shadow 0.3s;
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
}

.site-header.scrolled,
.site-header.solid {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line), 0 8px 24px rgba(9, 24, 66, 0.06);
}

.logo {
  position: relative;
  display: block;
  height: 30px;
}

.logo img {
  height: 30px;
  width: auto;
  transition: opacity 0.3s;
}

.logo .logo-dark {
  position: absolute;
  inset: 0 auto auto 0;
  opacity: 0;
}

.scrolled .logo .logo-dark,
.solid .logo .logo-dark {
  opacity: 1;
}

.scrolled .logo .logo-light,
.solid .logo .logo-light {
  opacity: 0;
}

.nav {
  display: flex;
  align-items: center;
  gap: 40px;
}

.nav a {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: var(--white);
  text-decoration: none;
  padding: 6px 0;
  transition: color 0.3s;
}

.scrolled .nav a,
.solid .nav a {
  color: var(--navy);
}

.nav a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--orange);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s;
}

.nav a:hover::after,
.nav a[aria-current="page"]::after {
  transform: scaleX(1);
}

.burger {
  display: none;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--white);
  cursor: pointer;
}

.scrolled .burger,
.solid .burger,
.menu-open .burger {
  color: var(--navy);
}

.burger svg {
  width: 26px;
  height: 26px;
  stroke: currentColor;
  stroke-width: 1.6;
  fill: none;
}

.burger .burger-close,
.menu-open .burger .burger-open {
  display: none;
}

.menu-open .burger .burger-close {
  display: block;
}

@media (max-width: 899px) {
  .burger {
    display: inline-flex;
  }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    right: 0;
    bottom: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 16px var(--gutter);
    background: var(--white);
    display: none;
  }

  .menu-open .nav {
    display: flex;
  }

  .menu-open {
    background: var(--white);
  }

  .menu-open .logo .logo-dark {
    opacity: 1;
  }

  .menu-open .logo .logo-light {
    opacity: 0;
  }

  .nav a,
  .scrolled .nav a {
    color: var(--navy);
    font-size: 22px;
    padding: 18px 0;
    border-bottom: 1px solid var(--line);
  }

  .nav a::after {
    display: none;
  }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  color: var(--white);
  background: var(--navy-ink);
  overflow: hidden;
}

.hero-page {
  min-height: 78svh;
}

.hero-page.hero-short {
  min-height: 62svh;
}

.hero-media {
  position: absolute;
  inset: 0;
}

.hero-media picture {
  display: block;
  height: 100%;
}

/* the release build wraps every photo in a <picture> to offer WebP first; that wrapper must not change the layout */
picture {
  display: contents;
}

.hero-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7, 18, 51, 0.82) 0%, rgba(7, 18, 51, 0.5) 48%, rgba(7, 18, 51, 0.12) 100%),
    linear-gradient(180deg, rgba(7, 18, 51, 0.45) 0%, transparent 22%, transparent 55%, rgba(7, 18, 51, 0.7) 100%);
}

/* What we do: the photo's subject (the refinery columns) moves right, clear of the headline */
@media (min-width: 1024px) {
  .hero-shift .hero-media img {
    width: 140%;
    max-width: none;
    object-position: 0 50%;
  }
}

/* home: from 1024 px a widened copy of the photo (open water mirrored in on the left) keeps the sea
   running under the headline while the tanker stays on the right, clear of the text;
   below 1024 px the original photo sits above the text */
@media (min-width: 1024px) {
  .hero-split .hero-media img {
    object-position: 60% 40%;
  }

  /* no figures strip below: the headline block sits higher off the bottom edge */
  .hero-split .hero-content {
    padding-bottom: clamp(96px, 14vh, 160px);
  }

  .hero-split::after {
    background:
      linear-gradient(90deg, rgba(7, 18, 51, 0.86) 0%, rgba(7, 18, 51, 0.74) 30%, rgba(7, 18, 51, 0.4) 50%, rgba(7, 18, 51, 0.1) 64%, rgba(7, 18, 51, 0.04) 100%),
      linear-gradient(180deg, rgba(7, 18, 51, 0.45) 0%, transparent 22%, transparent 55%, rgba(7, 18, 51, 0.7) 100%);
  }
}

@media (max-width: 1023px) {
  .hero.hero-split,
  .shot .hero.hero-split {
    min-height: 0;
  }

  .hero-split .hero-media,
  .hero.hero-split::after {
    bottom: auto;
    height: min(52svh, 440px);
  }

  .hero.hero-split::after {
    background: linear-gradient(180deg, rgba(7, 18, 51, 0.45) 0%, rgba(7, 18, 51, 0.05) 28%, rgba(7, 18, 51, 0.15) 60%, var(--navy-ink) 100%);
  }

  .hero-split .hero-content {
    padding-top: calc(min(52svh, 440px) - 24px);
  }
}

@media (max-width: 1023px) {
  .hero::after {
    background: linear-gradient(180deg, rgba(7, 18, 51, 0.62) 0%, rgba(7, 18, 51, 0.72) 55%, rgba(7, 18, 51, 0.9) 100%);
  }
}

.hero-content {
  position: relative;
  z-index: 1;
  padding-top: calc(var(--header-h) + 64px);
  padding-bottom: 72px;
}

.hero h1 {
  font-size: clamp(2.75rem, 5.8vw, 5.5rem);
  line-height: 1.04;
  font-weight: 700;
  letter-spacing: -0.015em;
  max-width: 17ch;
}

.hero-page h1 {
  font-size: clamp(2.5rem, 5.4vw, 4.75rem);
  max-width: 20ch;
}

/* narrow phones: keep "From refinery gate" and "Ethics & compliance" on one line each */
@media (max-width: 479px) {
  .hero-split h1 {
    font-size: min(2.75rem, calc((100vw - 40px) * 0.118));
  }

  .hero-page h1 {
    font-size: min(2.5rem, calc((100vw - 40px) * 0.112));
  }
}

.hero-lead {
  margin-top: 28px;
  max-width: 40ch;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255, 255, 255, 0.9);
}

.hero-links {
  display: flex;
  flex-wrap: wrap;
  gap: 32px;
  margin-top: 40px;
}

.crumbs {
  position: relative;
  z-index: 1;
  background: rgba(7, 18, 51, 0.55);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

.crumbs .container {
  padding-top: 14px;
  padding-bottom: 14px;
}

.crumbs a {
  text-decoration: none;
}

.crumbs a:hover {
  color: var(--white);
}

/* ---------- Links ---------- */

.more {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 15px;
  font-weight: 700;
  color: var(--orange);
  text-decoration: none;
}

.more::after {
  content: "";
  width: 28px;
  height: 2px;
  background: currentColor;
  transition: width 0.25s;
}

.more:hover::after {
  width: 44px;
}

.more.light {
  color: var(--white);
}

.more.light::after {
  background: var(--orange);
}

/* ---------- Sections ---------- */

.section {
  padding: 120px 0;
}

@media (max-width: 767px) {
  .section {
    padding: 80px 0;
  }
}

.section.tight {
  padding: 88px 0;
}

.stone {
  background: var(--stone);
}

.dark {
  background: var(--navy-deep);
  color: var(--on-dark);
}

.eyebrow {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

/* line break used only where the heading has room for two full lines */
@media (max-width: 767px) {
  .br-wide {
    display: none;
  }
}

h2 {
  font-size: clamp(1.75rem, 3.7vw, 3.1rem);
  line-height: 1.12;
  font-weight: 700;
  color: var(--heading);
  letter-spacing: -0.01em;
}

.dark h2 {
  color: var(--white);
}

.eyebrow + h2 {
  margin-top: 18px;
}

.head {
  max-width: 780px;
}

.head p {
  margin-top: 22px;
  font-size: 19px;
  font-weight: 300;
  color: var(--text);
}

.dark .head p {
  color: var(--on-dark);
}

.head-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
  flex-wrap: wrap;
}

h3 {
  font-size: 23px;
  line-height: 1.25;
  font-weight: 700;
  color: var(--heading);
}

.dark h3 {
  color: var(--white);
}

/* Statement: big claim left, copy right */

.statement {
  display: grid;
  gap: 32px;
}

@media (min-width: 1024px) {
  .statement {
    grid-template-columns: 5fr 6fr;
    gap: 88px;
    align-items: start;
  }
}

.statement h2 {
  font-size: clamp(1.9rem, 3vw, 2.6rem);
}

.statement .copy p {
  font-size: 21px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--text);
}

@media (max-width: 767px) {
  .statement .copy p {
    font-size: 18.5px;
  }
}

.statement .copy p + p {
  margin-top: 20px;
}

.statement .copy .more {
  margin-top: 32px;
}

/* Product cards */

/* five tiles (four oil products and natural gas): a row of five from 1200 px; below that two or three to a row,
   and the tiles left over are centred under the full row instead of hanging at its left edge */
.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 20px;
  margin-top: 64px;
}

.products > .product {
  flex: 0 0 100%;
}

@media (min-width: 640px) {
  .products > .product {
    flex-basis: calc((100% - 20px) / 2);
  }
}

@media (min-width: 900px) {
  .products > .product {
    flex-basis: calc((100% - 40px) / 3);
  }
}

@media (min-width: 1200px) {
  .products {
    gap: 16px;
  }

  .products > .product {
    flex-basis: calc((100% - 64px) / 5);
  }
}

/* a photo tile: the picture fills it; name, line and link sit over its darkened lower half */
.product {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  padding: 24px;
  overflow: hidden;
  background: var(--navy-deep);
  text-decoration: none;
}

@media (min-width: 640px) {
  .product {
    aspect-ratio: 2 / 3;
    padding: 28px;
  }
}

/* narrow tiles are taller, so the text still starts in the dark lower half (not above ~48 % of the tile) */
@media (min-width: 900px) and (max-width: 1023px) {
  .product {
    aspect-ratio: 3 / 5;
  }
}

@media (min-width: 1200px) {
  .product {
    aspect-ratio: 1 / 2;
    padding: 24px;
  }
}

@media (min-width: 1200px) and (max-width: 1279px) {
  .product {
    aspect-ratio: 4 / 9;
  }
}

.product figure {
  position: absolute;
  inset: 0;
}

.product img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.product:hover img {
  transform: scale(1.04);
}

.product h3,
.product p,
.product .more {
  position: relative;
}

.product h3 {
  font-size: 26px;
  color: var(--white);
}

.product p {
  margin-top: 10px;
  font-size: 15px;
  color: rgba(255, 255, 255, 0.82);
}

/* one grade for every editorial photo: the stock shots come from different sources */
.feature figure {
  position: relative;
}

.product img,
.feature figure img {
  filter: saturate(0.62) contrast(1.06) brightness(0.98);
}

.product figure::after,
.feature figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(13, 33, 92, 0.04) 0%, rgba(13, 33, 92, 0.16) 100%);
  pointer-events: none;
}

/* product tiles: darker towards the bottom, so their text never sits on a bright part of the photo */
.product figure::after {
  background: linear-gradient(180deg, rgba(9, 24, 66, 0.05) 0%, rgba(9, 24, 66, 0) 22%, rgba(9, 24, 66, 0.72) 52%,
    rgba(9, 24, 66, 0.96) 78%);
}

/* an email address inside running text is always a visible link */
main p a[href^="mailto:"] {
  font-weight: 700;
  color: var(--heading);
  text-underline-offset: 3px;
}

main p a[href^="mailto:"]:hover {
  color: var(--orange);
}

.product .more {
  margin-top: 20px;
}

/* the whole tile is the link: hovering anywhere on it stretches the dash */
.product:hover .more::after {
  width: 44px;
}

/* and the tile itself comes forward a little. `scale`, not `transform`: transform belongs to .reveal, which would
   otherwise reset it; the transition list keeps .reveal's own fade and rise */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .products > .product {
    transition: opacity 0.8s ease, transform 0.8s ease, scale 0.35s ease, box-shadow 0.35s ease;
  }

  .products > .product:hover,
  .products > .product:focus-visible {
    z-index: 1;
    scale: 1.03;
    box-shadow: 0 22px 44px -20px rgba(9, 24, 66, 0.6);
  }
}

/* Chain: how a cargo moves from source to customer (home) */

.chain {
  display: grid;
  max-width: 680px;
  margin: 72px 0 0;
  padding: 0;
  list-style: none;
}

.chain-stage {
  position: relative;
  padding: 0 0 44px 36px;
}

/* phones: a rail of dots runs down to the next stage, moving forward, and ends in an arrowhead
   (tablets hide it: the 2 × 2 grid is read by its numbers) */
.chain-stage:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 7px;
  top: 34px;
  bottom: 14px;
  width: 4px;
  background: radial-gradient(circle, var(--navy) 1.5px, transparent 2px) 50% 0 / 4px 10px repeat-y;
  animation: chain-flow-down 0.8s linear infinite;
}

.chain-stage:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 4px;
  bottom: 4px;
  width: 10px;
  height: 8px;
  background: var(--orange);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
}

@keyframes chain-flow-down {
  to {
    background-position: 50% 10px;
  }
}

@keyframes chain-flow-right {
  to {
    background-position: 10px 50%;
  }
}

.chain-step {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: -36px;
  padding: 6px 14px;
  background: var(--white);
  border: 2px solid var(--navy);
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--heading);
}

.chain-step b {
  color: var(--orange);
}

.chain-stage h3 {
  margin-top: 20px;
  font-size: 21px;
}

.chain-key {
  margin-top: 6px;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.45;
  color: var(--heading);
}

/* two lines reserved so the lists below start on one line across the row */
@media (min-width: 1100px) {
  .chain-key {
    min-height: 2.9em;
  }
}

.chain ul {
  margin: 18px 0 0;
  padding: 18px 0 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

.chain ul li {
  position: relative;
  padding-left: 20px;
  font-size: 15.5px;
}

.chain ul li + li {
  margin-top: 8px;
}

.chain ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 11px;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

/* tablets: a 2 × 2 grid, the numbers carry the order */
@media (min-width: 640px) and (max-width: 1099px) {
  .chain {
    grid-template-columns: 1fr 1fr;
    gap: 48px 40px;
    max-width: none;
  }

  .chain-stage {
    padding: 0;
  }

  .chain-stage:not(:last-child)::before,
  .chain-stage:not(:last-child)::after {
    display: none;
  }

  .chain-step {
    margin-left: 0;
  }
}

@media (min-width: 1100px) {
  .chain {
    grid-template-columns: repeat(4, 1fr);
    gap: 48px;
    max-width: none;
  }

  .chain-stage {
    padding: 0;
  }

  .chain-step {
    margin-left: 0;
  }

  /* the rail of dots runs from each stage to the next label, moving forward; the arrowhead touches the label */
  .chain-stage:not(:last-child)::before {
    left: 0;
    right: -40px;
    top: 16px;
    bottom: auto;
    width: auto;
    height: 4px;
    background: radial-gradient(circle, var(--navy) 1.5px, transparent 2px) 0 50% / 10px 4px repeat-x;
    animation-name: chain-flow-right;
  }

  .chain-stage:not(:last-child)::after {
    left: auto;
    right: -48px;
    top: 13px;
    bottom: auto;
    width: 8px;
    height: 10px;
    clip-path: polygon(0 0, 100% 50%, 0 100%);
  }

  .chain-stage h3 {
    margin-top: 28px;
  }
}

.note-line {
  margin-top: 56px;
  padding: 24px 28px;
  border-left: 3px solid var(--orange);
  background: var(--stone);
  font-size: 17px;
}

.note-line strong {
  color: var(--heading);
}

.note-line p {
  margin: 0;
}

/* label left, statement right: keeps the line length readable on a full-width strip */
@media (min-width: 768px) {
  .note-line {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 32px;
    align-items: baseline;
  }
}

/* Routes: sourcing regions, four ways to move a cargo, markets (What we do) */

.routes {
  margin-top: 64px;
}

.routes-end {
  display: flex;
  flex-direction: column;
  padding: 32px;
  background: var(--navy-deep);
  color: var(--on-dark);
}

.routes-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange-soft);
}

/* a compound name that must not break at its hyphen */
.nowrap {
  white-space: nowrap;
}

.routes-title {
  margin-top: 14px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.3;
  color: var(--white);
  text-wrap: balance;
}

.routes-end ul {
  margin: 0;
  padding: 28px 0 0;
  list-style: none;
}

.routes-end li {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 15.5px;
  font-weight: 700;
  color: var(--white);
}

.routes-arrow {
  display: grid;
  place-items: center;
  padding: 14px 0;
  color: var(--orange);
}

.routes-arrow svg {
  width: 32px;
  height: 32px;
  stroke: currentColor;
  stroke-width: 1.5;
  fill: none;
}

.routes-modes {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}

@media (min-width: 640px) and (max-width: 1099px) {
  .routes-modes {
    grid-template-columns: 1fr 1fr;
  }

  .routes-end ul {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 32px;
  }
}

.route {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 20px;
  align-items: start;
  padding: 28px;
  background: var(--white);
}

/* one icon style for the delivery modes and customers (What we do) and the principles (About) */
.route-icon,
.pillar-icon,
.cell-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--stone);
  color: var(--navy);
}

.route-icon svg,
.pillar-icon svg,
.cell-icon svg {
  width: 30px;
  height: 30px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.route h3 {
  font-size: 19px;
}

.route p {
  margin-top: 6px;
  font-size: 15.5px;
}

/* from 1100 px the same top-to-bottom flow as on phones: a sources band, the four modes in one row,
   a markets band — no tall side panels with empty middles */
@media (min-width: 1100px) {
  /* label and title on the left, the list in one row on the right
     (sources: who and the five regions; markets: where and the four customer groups) */
  .routes-end {
    display: grid;
    grid-template-columns: 300px 1fr;
    grid-template-areas:
      "label list"
      "title list";
    column-gap: 48px;
    align-items: center;
    padding: 36px 40px;
  }

  .routes-label {
    grid-area: label;
    align-self: end;
  }

  .routes-title {
    grid-area: title;
    align-self: start;
  }

  /* one row; longer names take more room, so "South-East Europe" stays on one line next to four others */
  .routes-end ul {
    grid-area: list;
    display: flex;
    padding: 0;
  }

  .routes-end li {
    flex: 1 1 auto;
    white-space: nowrap;
    padding: 4px 12px 4px 16px;
    border-top: 0;
    border-left: 1px solid rgba(255, 255, 255, 0.18);
    font-size: 15px;
  }

  .routes-modes {
    grid-template-columns: repeat(4, 1fr);
  }

  .route {
    grid-template-columns: 1fr;
    align-content: start;
    gap: 18px;
    padding: 32px 28px;
  }
}

/* full container width: a wider label column */
@media (min-width: 1240px) {
  .routes-end {
    grid-template-columns: 360px 1fr;
  }

  .routes-end li {
    padding-left: 20px;
    font-size: 15.5px;
  }
}

/* Commitments (dark) */

.commitments {
  display: grid;
  gap: 1px;
  margin-top: 64px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.12);
}

@media (min-width: 768px) {
  .commitments {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .commitments {
    grid-template-columns: repeat(3, 1fr);
  }
}

.commitment {
  padding: 40px 36px;
  background: var(--navy-deep);
}

.commitment .num {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--orange);
}

.commitment h3 {
  margin-top: 14px;
  font-size: 21px;
}

.commitment p {
  margin-top: 12px;
  font-size: 16px;
  color: var(--on-dark);
}

.commitment a {
  color: var(--white);
  font-weight: 700;
}

.lists {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.lists span {
  padding: 3px 9px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--white);
}

.dark-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 56px;
}

.dark-foot p {
  max-width: 60ch;
  color: var(--on-dark);
}

/* Pillars */

.pillars {
  display: grid;
  gap: 40px;
  margin-top: 72px;
}

@media (min-width: 768px) {
  .pillars {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .pillars {
    grid-template-columns: repeat(4, 1fr);
  }
}

.pillar {
  padding-top: 28px;
  border-top: 1px solid var(--line);
}

/* the principles sit on stone, so their icon circles are white */
.pillar-icon {
  margin-bottom: 22px;
  background: var(--white);
}

.pillar h3 {
  font-size: 21px;
}

.pillar p {
  margin-top: 12px;
  font-size: 16px;
}

/* Timeline */

.timeline {
  position: relative;
  display: grid;
  gap: 0;
  margin-top: 72px;
}

/* one column per milestone, however many there are */
@media (min-width: 1200px) {
  .timeline {
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
  }

  .timeline::before {
    content: "";
    position: absolute;
    top: 9px;
    left: 0;
    right: 0;
    height: 2px;
    background: var(--line);
  }
}

.milestone {
  position: relative;
  padding: 0 24px 40px 32px;
}

@media (min-width: 1200px) {
  .milestone {
    padding: 44px 20px 0 0;
  }
}

.milestone::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--orange);
}

@media (max-width: 1199px) {
  .timeline {
    max-width: 640px;
  }

  .milestone::after {
    content: "";
    position: absolute;
    left: 7px;
    top: 22px;
    bottom: 0;
    width: 2px;
    background: var(--line);
  }

  .milestone:last-child::after {
    display: none;
  }
}

.milestone .year {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--heading);
}

.milestone h3 {
  margin-top: 12px;
  font-size: 18px;
}

.milestone p {
  margin-top: 8px;
  font-size: 15.5px;
}

/* Entities */

.entities {
  display: grid;
  gap: 24px;
  margin-top: 64px;
}

@media (min-width: 900px) {
  .entities {
    grid-template-columns: repeat(3, 1fr);
  }
}

.entity {
  display: flex;
  flex-direction: column;
  padding: 36px 32px;
  background: var(--white);
  border-top: 3px solid var(--navy);
  box-shadow: 0 1px 2px rgba(9, 24, 66, 0.05), 0 12px 32px rgba(9, 24, 66, 0.06);
}

.entity .country {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
}

.entity h3 {
  margin-top: 12px;
  font-size: 22px;
}

.entity .role {
  margin-top: 4px;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted);
}

.entity p {
  margin-top: 16px;
  font-size: 16px;
  flex: 1;
}

.entity dl {
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}

.entity dl div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
}

.entity dl div + div {
  margin-top: 6px;
}

.entity dt {
  color: var(--muted);
}

.entity dd {
  margin: 0;
  font-weight: 700;
  color: var(--heading);
  text-align: right;
}

.entity dd a {
  color: var(--heading);
}

/* Feature rows (image + text) */

.feature {
  display: grid;
  gap: 40px;
  align-items: center;
}

.feature + .feature {
  margin-top: 112px;
}

@media (min-width: 1024px) {
  .feature {
    grid-template-columns: 1fr 1fr;
    gap: 88px;
  }

  .feature.flip figure {
    order: 2;
  }
}

/* What we do: the product rows are sheets that slide over one another as the page scrolls. site.js turns this on
   (not for ?shot, not with reduced motion) and sets each sheet's sticky top; --cover (0–1) is how far the next
   sheet has slid over this one, which pushes this one back a little */
.stack-on .stack > .feature {
  position: sticky;
  transform-origin: 50% 0;
  scale: calc(1 - var(--cover, 0) * 0.04);
  box-shadow: 0 -14px 32px -18px rgba(13, 33, 92, 0.22);
}

.stack-on .stack > .feature {
  padding: 20px 20px 28px;
  background: var(--white);
  border: 1px solid var(--line);
  filter: brightness(calc(1 - var(--cover, 0) * 0.05));
}

.stack-on .stack > .feature + .feature {
  margin-top: 40px;
}

@media (min-width: 1024px) {
  .stack-on .stack > .feature {
    padding: 40px;
    gap: 64px;
  }
}

.feature figure {
  aspect-ratio: 5 / 4;
  overflow: hidden;
  background: #d9d6d0;
}

.feature figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.feature .text p {
  margin-top: 18px;
  font-size: 18px;
}

.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tags span {
  padding: 5px 12px;
  background: var(--stone);
  font-size: 13.5px;
  font-weight: 700;
  color: var(--heading);
}

/* Checklist (KYC pack) */

.checklist {
  display: grid;
  gap: 0 32px;
  margin: 24px 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--line);
}

@media (min-width: 640px) {
  .checklist {
    grid-template-columns: 1fr 1fr;
  }
}

.checklist li {
  position: relative;
  padding: 14px 0 14px 28px;
  border-bottom: 1px solid var(--line);
  font-size: 16px;
  font-weight: 700;
  color: var(--heading);
}

.checklist li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 21px;
  width: 12px;
  height: 7px;
  border-left: 2px solid var(--orange);
  border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* Customers / simple grid */

.grid-4 {
  display: grid;
  gap: 0;
  margin-top: 56px;
  border-top: 1px solid var(--line);
}

@media (min-width: 768px) {
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1100px) {
  .grid-4 {
    grid-template-columns: repeat(4, 1fr);
  }
}

.cell {
  padding: 32px 28px 32px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 1100px) {
  .cell + .cell {
    padding-left: 28px;
    border-left: 1px solid var(--line);
  }
}

.cell h3 {
  font-size: 19px;
}

.cell-icon {
  margin-bottom: 20px;
}

.cell p {
  margin-top: 10px;
  font-size: 15.5px;
}

/* Process */

.process {
  display: grid;
  gap: 24px;
  margin-top: 64px;
}

@media (min-width: 640px) {
  .process {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1200px) {
  .process {
    grid-template-columns: repeat(4, 1fr);
  }
}

.process-step {
  position: relative;
  padding: 32px 28px;
  background: var(--white);
  border: 1px solid var(--line);
}

@media (min-width: 1200px) {
  .process-step:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 52px;
    right: -19px;
    width: 10px;
    height: 10px;
    border-top: 2px solid var(--orange);
    border-right: 2px solid var(--orange);
    transform: rotate(45deg);
  }
}

/* KYC request address under the section heading */
.kyc-request {
  max-width: 360px;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 2px solid var(--orange);
}

.kyc-request span {
  display: block;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.kyc-request a {
  display: inline-block;
  margin-top: 8px;
  font-size: clamp(1.25rem, 2vw, 1.6rem);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  word-break: break-word;
}

.kyc-request a:hover {
  color: var(--orange);
}

.process-step .num {
  font-size: 40px;
  font-weight: 300;
  line-height: 1;
  color: var(--orange);
}

.process-step h3 {
  margin-top: 18px;
  font-size: 19px;
}

.process-step p {
  margin-top: 10px;
  font-size: 15.5px;
}

/* Contact */

.contact-grid {
  display: grid;
  gap: 24px;
  margin-top: 64px;
}

.contact-grid:first-child {
  margin-top: 0;
}

@media (min-width: 900px) {
  .contact-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.contact-card {
  padding: 40px 36px;
  background: var(--white);
  border-top: 3px solid var(--orange);
  box-shadow: 0 12px 32px rgba(9, 24, 66, 0.06);
}

.contact-card .label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-card a.big-link {
  display: inline-block;
  margin-top: 12px;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem);
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
  word-break: break-word;
}

.contact-card a.big-link:hover {
  color: var(--orange);
}

.contact-card p {
  margin-top: 12px;
  font-size: 16px;
}

.office-list {
  display: grid;
  gap: 0;
  margin-top: 64px;
  border-top: 2px solid var(--navy);
}

@media (min-width: 900px) {
  .office-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

.office {
  padding: 36px 32px 36px 0;
  border-bottom: 1px solid var(--line);
}

@media (min-width: 900px) {
  .office + .office {
    padding-left: 32px;
    border-left: 1px solid var(--line);
  }
}

.office-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
}

.office h3 {
  font-size: 28px;
  font-weight: 300;
}

.office .time {
  font-size: 14px;
  font-weight: 700;
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.office .what {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--orange);
}

.office .company {
  margin-top: 18px;
  font-weight: 700;
  color: var(--heading);
}

.office address {
  margin-top: 4px;
  font-style: normal;
  font-size: 16px;
}

.office a {
  display: block;
  width: fit-content;
  margin-top: 12px;
  font-weight: 700;
  color: var(--heading);
  text-decoration: none;
}

.office a:hover {
  color: var(--orange);
}

/* phone and email of one office read as one contact block */
.office a + a {
  margin-top: 4px;
}

/* CTA band: light, so a page never ends on three dark blues in a row */

.cta {
  background: var(--white);
  color: var(--heading);
}

.cta .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 32px;
  flex-wrap: wrap;
  padding-top: 104px;
  padding-bottom: 104px;
}

.cta h2 {
  color: var(--heading);
  max-width: 18ch;
}

.cta .more.light {
  color: var(--heading);
}

.cta-actions {
  display: flex;
  gap: 32px;
  flex-wrap: wrap;
}

/* ---------- Footer ---------- */

.site-footer {
  background: var(--navy-ink);
  color: var(--on-dark-muted);
  font-size: 15px;
}

.footer-top {
  display: grid;
  gap: 48px;
  padding: 88px 0 64px;
}

@media (max-width: 899px) {
  .footer-top {
    grid-template-columns: 1fr 1fr;
    gap: 40px 24px;
  }

  .footer-top .about {
    grid-column: 1 / -1;
  }
}

@media (min-width: 900px) {
  .footer-top {
    grid-template-columns: 1.6fr 1fr 1fr;
  }
}

.footer-top .about img {
  height: 30px;
  width: auto;
}

.footer-top .about p {
  margin-top: 24px;
  max-width: 44ch;
  color: var(--on-dark);
}

/* LinkedIn circle under the Company list (06.11.2026): a plain link, no LinkedIn widget, so nothing loads from
   LinkedIn */
.footer-social {
  display: flex;
  gap: 12px;
  margin-top: 28px;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.24);
  color: var(--on-dark);
  transition: border-color 0.25s, color 0.25s;
}

.footer-social a:hover {
  border-color: var(--orange);
  color: var(--white);
}

.footer-social svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

.footer-top h4 {
  margin: 0 0 18px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--white);
}

.footer-top ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-top li + li {
  margin-top: 10px;
}

.footer-top a {
  color: var(--on-dark);
  text-decoration: none;
}

.footer-top a:hover {
  color: var(--white);
}

.footer-bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 24px 0 32px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 13px;
}

.footer-bottom nav {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
}

.footer-bottom a {
  color: var(--on-dark-muted);
  text-decoration: none;
}

.footer-bottom a:hover {
  color: var(--white);
}

/* ---------- Intro: logo with a burning flame ---------- */

.intro {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  background: radial-gradient(1100px 700px at 50% 52%, #12266a 0%, var(--navy-ink) 62%);
  transition: opacity 0.9s ease, visibility 0.9s;
  /* failsafe: never block the site if the script does not run */
  animation: intro-failsafe 0s linear 9s forwards;
}

.intro img {
  width: min(860px, 92vw);
  height: auto;
  transition: transform 1.1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* until the logo has loaded Chrome draws an empty image frame in its place — on a slow connection that frame shows */
.intro img:not(.ready) {
  visibility: hidden;
}

.intro.out {
  opacity: 0;
  visibility: hidden;
}

.intro.out img {
  transform: scale(1.06);
}

.no-js .intro,
.intro-skip .intro {
  display: none;
}

@keyframes intro-failsafe {
  to {
    opacity: 0;
    visibility: hidden;
  }
}

/* the page waits behind the intro, then rises into place */
.intro-on .site-header,
.intro-on .hero-content,
.intro-on .crumbs {
  opacity: 0;
}

.intro-reveal .site-header {
  animation: intro-fade 0.8s ease 0.25s both;
}

.intro-reveal .hero-content {
  animation: intro-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.15s both;
}

.intro-reveal .crumbs {
  animation: intro-rise 1s cubic-bezier(0.2, 0.8, 0.2, 1) 0.35s both;
}

@keyframes intro-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes intro-fade {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ---------- Concept tools ---------- */

.concept-pill {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 8px 8px 16px;
  background: rgba(7, 18, 51, 0.92);
  color: var(--white);
  font-size: 13px;
  font-weight: 700;
  border: 1px solid rgba(255, 255, 255, 0.16);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* phones and tablets: the pill slides away while reading down (site.js) */
.concept-pill.is-tucked {
  transform: translateY(calc(100% + 28px));
  opacity: 0;
  pointer-events: none;
}

.concept-pill .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--orange);
}

.concept-pill button {
  font: inherit;
  font-weight: 700;
  color: var(--white);
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.28);
  padding: 6px 12px;
  cursor: pointer;
}

.concept-pill button:hover,
.concept-pill button[aria-pressed="true"] {
  border-color: var(--orange);
  color: var(--orange-soft);
}

.concept-pill .pill-link {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

/* without the items-to-confirm button the last link ends the pill */
.concept-pill > .pill-link:last-child {
  margin-right: 8px;
}

.concept-pill .pill-link:hover {
  color: var(--white);
  text-decoration: underline;
}

@media (max-width: 539px) {
  .concept-pill .label-long,
  .concept-pill .pill-link {
    display: none;
  }
}

.tbc {
  position: relative;
}

.show-tbc .tbc {
  outline: 2px dashed var(--orange);
  outline-offset: 5px;
}

.show-tbc .tbc::after {
  content: attr(data-note);
  position: absolute;
  z-index: 20;
  top: calc(100% + 10px);
  left: 0;
  width: max-content;
  max-width: 280px;
  padding: 7px 11px;
  background: var(--orange);
  color: #1f0d02;
  font-family: var(--font);
  font-size: 12.5px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0;
  text-transform: none;
  text-align: left;
  white-space: normal;
  pointer-events: none;
}

.shot .concept-pill {
  display: none;
}

.shot .hero {
  min-height: 900px;
}

.shot .hero.hero-page {
  min-height: 700px;
}

.shot .hero.hero-short {
  min-height: 560px;
}

.shot .chain-stage::before {
  animation: none;
}

.shot .reveal,
.shot .routes-modes.reveal .route > * {
  opacity: 1;
  transform: none;
  transition: none;
}

/* ---------- Reveal on scroll ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* What we do: the route diagram builds in the order a cargo moves — source band, arrow, the four modes, arrow,
   markets band (site.js staggers the parts that come into view together). The modes frame appears as one piece,
   its cards' contents follow left to right: a hidden card would show the frame's grey lines as a solid block */
.routes-modes.reveal .route > * {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.routes-modes.reveal.in .route > * {
  opacity: 1;
  transform: none;
}

.routes-modes.reveal .route:nth-child(2) > * {
  transition-delay: 0.12s;
}

.routes-modes.reveal .route:nth-child(3) > * {
  transition-delay: 0.24s;
}

.routes-modes.reveal .route:nth-child(4) > * {
  transition-delay: 0.36s;
}

.no-js .reveal,
.no-js .routes-modes.reveal .route > * {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .reveal,
  .routes-modes.reveal .route > * {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .product img {
    transition: none;
  }

  .chain-stage::before {
    animation: none;
  }
}

/* ---------- Legal pages (Privacy notice, Terms of use, Legal disclaimer) ---------- */

/* plain pages: a white header from the start, a stone title band, the text in one reading column */
.legal-head {
  padding: calc(var(--header-h) + 64px) 0 56px;
  background: var(--stone);
  border-bottom: 1px solid var(--line);
}

.legal-crumbs {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.legal-crumbs a {
  color: var(--muted);
  text-decoration: none;
}

.legal-crumbs a:hover {
  color: var(--orange);
}

.legal-head h1 {
  margin-top: 28px;
  font-size: clamp(2.2rem, 4.6vw, 3.4rem);
  line-height: 1.08;
  color: var(--heading);
}

.legal-meta {
  margin-top: 14px;
  font-size: 15px;
  color: var(--muted);
}

/* the title band already separates the page from the header: less air above the text than a normal section */
.legal-head + .section {
  padding-top: 72px;
}

@media (max-width: 767px) {
  .legal-head + .section {
    padding-top: 48px;
  }
}

.legal {
  display: grid;
  gap: 40px;
}

/* phones and tablets: the three documents in one row (sized to fit one line down to 360 px) */
.legal-nav ul {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.legal-nav a {
  font-size: 14.5px;
  font-weight: 700;
  color: var(--muted);
  text-decoration: none;
}

.legal-nav a:hover,
.legal-nav a[aria-current="page"] {
  color: var(--heading);
}

.legal-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-color: var(--orange);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

/* desktop: the three documents as a list on the left that stays in view */
@media (min-width: 1024px) {
  .legal {
    grid-template-columns: 220px minmax(0, 720px);
    gap: 96px;
  }

  .legal-nav {
    position: sticky;
    top: calc(var(--header-h) + 40px);
    align-self: start;
  }

  .legal-nav ul {
    display: block;
    border-left: 1px solid var(--line);
  }

  .legal-nav a {
    display: block;
    margin-left: -1px;
    padding: 9px 0 9px 18px;
    border-left: 2px solid transparent;
  }

  .legal-nav a[aria-current="page"] {
    border-left-color: var(--orange);
    text-decoration: none;
  }
}

/* sections numbered 01, 02… like the steps elsewhere on the site */
.prose {
  counter-reset: section;
}

.prose .lead {
  font-size: 19px;
  font-weight: 300;
  line-height: 1.6;
  color: var(--heading);
}

.prose h2 {
  margin-top: 52px;
  font-size: 22px;
  line-height: 1.3;
  counter-increment: section;
}

.prose h2::before {
  content: counter(section, decimal-leading-zero);
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--orange);
}

.prose p {
  margin-top: 14px;
  font-size: 16.5px;
  line-height: 1.75;
}

.prose ul {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
}

.prose li {
  position: relative;
  padding-left: 20px;
  font-size: 16.5px;
  line-height: 1.7;
}

.prose li + li {
  margin-top: 6px;
}

.prose li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 13px;
  width: 10px;
  height: 2px;
  background: var(--orange);
}

.prose a {
  font-weight: 700;
  color: var(--heading);
  text-underline-offset: 3px;
}

.prose a:hover {
  color: var(--orange);
}