/* ═══════════════════════════════════════════════════════════
   Mustadoon Al Mutaqadima — Logistics
   Hero choreography:
     0.22s  headline line 1 rises out of its mask, blur → sharp
     0.35s  headline line 2 follows
     0.50s+ sub-copy, buttons and stats lift in
     0.50s  the fleet begins queueing past — one rig every 2.5s, each drifting
            through and dissolving as it reaches the copy
     8.00s  the last rig drives in and parks instead of passing, on the
            deceleration fitted to the reference motion study (settles ≈11.2s)
   ═══════════════════════════════════════════════════════════ */

/* ─────────── tokens ─────────── */
:root {
  --navy:      #072249;
  --navy-2:    #0E3160;
  --navy-3:    #17427D;
  --orange:    #E87B08;
  --orange-2:  #F59B33;
  --bg:        #F3F3F3;
  --bg-2:      #EDEEF0;
  --surface:   #FFFFFF;
  --ink:       #072249;
  --muted:     #5C6879;
  --muted-2:   #7A8697;
  --line:      rgba(7, 34, 73, .10);
  --line-2:    rgba(7, 34, 73, .06);

  --f-ar: 'Tajawal', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-en: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font: var(--f-ar);

  --pad: clamp(1.25rem, 3.6vw, 4rem);
  --wrap: min(1720px, 94vw);   /* fills wide screens instead of a centred column */
  --r: 14px;

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-soft: cubic-bezier(.22, 1, .36, 1);

  --dir: -1;   /* physical side the truck travels in from: rtl → left */
}
html[dir="ltr"] { --dir: 1; --font: var(--f-en); }
html[dir="rtl"] { --dir: -1; --font: var(--f-ar); }

/* ─────────── base ─────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  margin: 0;
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; font-weight: 800; letter-spacing: -.02em; }
p { margin: 0; }
:focus-visible { outline: 2px solid var(--orange); outline-offset: 3px; border-radius: 4px; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--pad); }

/* ═══════════════ nav ═══════════════ */
.nav {
  position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 60;
  animation: nav-in .8s var(--ease-out) both;
}
.nav__inner {                    /* full-bleed bar, flush to the top edge */
  display: flex; align-items: center; gap: 24px;
  padding: 14px var(--pad);
  background: rgba(255, 255, 255, .78);
  border-bottom: 1px solid transparent;
  transition: background .35s ease, box-shadow .35s ease, border-color .35s ease;
}
/* The frosting is only applied once there is something to frost. At the top of
   the page the nav sits over flat colour, and blurring there would force the
   whole strip to re-composite on every frame of the hero animation. */
.nav.is-stuck .nav__inner {
  background: rgba(255, 255, 255, .82);
  backdrop-filter: blur(16px) saturate(1.6);
  -webkit-backdrop-filter: blur(16px) saturate(1.6);
  border-bottom-color: var(--line-2);
  box-shadow: 0 6px 24px -18px rgba(7, 34, 73, .5);
}

.brand { display: flex; align-items: center; gap: 11px; flex: 0 0 auto; }
.brand__mark { height: 32px; width: auto; }
.brand__words { display: block; }
.brand__word { height: 15px; width: auto; }
.brand__word[data-lang="en"] { height: 12px; }
.brand__word[hidden] { display: none; }

.nav__links { display: flex; align-items: center; gap: 4px; margin-inline-start: auto; }
.nav__links a {
  position: relative; padding: 8px 13px; border-radius: 100px;
  font-size: .875rem; font-weight: 600; color: var(--navy);
  opacity: .72; transition: opacity .2s ease, background .2s ease;
}
.nav__links a:hover, .nav__links a.is-active { opacity: 1; background: rgba(7, 34, 73, .05); }

.nav__end { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.lang {
  display: flex; align-items: center; gap: 2px; padding: 4px;
  background: rgba(7, 34, 73, .05); border: 0; border-radius: 100px;
  cursor: pointer; font-family: inherit;
}
.lang__opt {
  padding: 4px 10px; border-radius: 100px; font-size: .78rem; font-weight: 700;
  color: var(--muted); transition: all .22s ease; line-height: 1.5;
}
.lang__opt.is-on { background: var(--navy); color: #fff; }

.burger { display: none; width: 40px; height: 36px; padding: 0; border: 0; border-radius: 10px;
  background: rgba(7, 34, 73, .05); cursor: pointer; }
.burger span { display: block; width: 17px; height: 1.8px; margin: 4px auto; border-radius: 2px;
  background: var(--navy); transition: transform .3s var(--ease-out), opacity .2s; }
.burger[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
.burger[aria-expanded="true"] span:last-child  { transform: translateY(-3px) rotate(-45deg); }

@keyframes nav-in { from { opacity: 0; transform: translateY(-14px); } to { opacity: 1; transform: none; } }

/* ═══════════════ hero ═══════════════ */
.hero {
  position: relative;
  min-height: 100svh;
  display: grid; align-content: center;
  padding: 132px var(--pad) 90px;
  overflow: hidden;
  background:
    radial-gradient(120% 90% at 50% 0%, #F7F7F8 0%, var(--bg) 55%, var(--bg-2) 100%);
}
.hero::after {                      /* faint ground line the truck parks on */
  content: ''; position: absolute; inset-inline: 0; bottom: 5%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--line), transparent);
}
.hero__copy {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
}
.hero__copy > * { max-width: 34rem; }

/* Sits after .fleet in the DOM. On desktop the fleet is out of flow, so this
   still stacks straight under the copy; on mobile the fleet is in flow, which
   puts the KPI row beneath the trucks with the buttons above them. */
.hero__stats {
  position: relative; z-index: 2;
  width: 100%; max-width: var(--wrap); margin-inline: auto;
}

/* The fleet drives beneath the copy, so the text carries its own halo. A glow
   keeps it legible while still letting the trucks read through — a solid scrim
   would hide the thing we want people to see. */
.hero .headline,
.hero .sub,
.hero .proof {
  text-shadow:
    0 0 12px var(--bg), 0 0 24px var(--bg),
    0 0 42px var(--bg), 0 0 70px var(--bg);
}

.headline {
  font-size: clamp(2.4rem, 6vw, 4.5rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  margin-bottom: 26px;
  max-width: 42rem;
}
html[dir="rtl"] .headline {
  font-size: clamp(2.2rem, 5.4vw, 4.1rem);
  letter-spacing: 0; line-height: 1.22;
}
.headline em { font-style: normal; color: var(--orange-2); }

/* per-line mask: the blur is allowed to bleed a little, exactly as in the reference */
.line { display: block; overflow: hidden; padding-block: .1em; margin-block: -.1em; }
.line__in { display: block; }

.sub {
  font-size: clamp(1rem, 1.25vw, 1.125rem);
  line-height: 1.75; color: var(--muted); margin-bottom: 32px; max-width: 33rem;
}

.cta-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 40px; }
.cta-row--center { justify-content: center; margin-bottom: 30px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 15px 30px; border-radius: 8px;
  font-size: .82rem; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), background .25s;
  white-space: nowrap;
}
html[dir="rtl"] .btn { letter-spacing: 0; text-transform: none; font-size: .95rem; }
.btn--primary { background: var(--orange); color: #fff;
  box-shadow: 0 2px 6px rgba(232, 123, 8, .3), 0 14px 30px -12px rgba(232, 123, 8, .55); }
.btn--primary:hover { background: #d97207; transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(232, 123, 8, .34), 0 20px 38px -14px rgba(232, 123, 8, .6); }
/* opaque enough to stay readable when a rig passes behind it */
.btn--ghost { background: #E7E8EA; color: var(--navy); }
.btn--ghost:hover { background: #DCDEE1; transform: translateY(-2px); }
.btn--light { background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.btn--light:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.proof { display: flex; align-items: center; gap: clamp(14px, 2.4vw, 28px); }
.proof__stat { display: flex; flex-direction: column; gap: 1px; }
.proof__stat strong {
  font-size: 1.6rem; font-weight: 800; line-height: 1; color: var(--navy);
  letter-spacing: -.03em; font-family: var(--f-en);
  direction: ltr; unicode-bidi: isolate;   /* keep "25+" from flipping in RTL */
}
.proof__stat strong span { color: var(--orange); }
.proof__stat > span { font-size: .76rem; font-weight: 600; color: var(--muted-2); }
.proof__rule { width: 1px; height: 30px; background: var(--line); flex: none; }

/* ── the truck ── */
/* The track spans the whole hero so a rig can keep driving under the copy.
   It is masked, not faded on a timer: a rig stays fully solid across the open
   side and dissolves only where it slides beneath the text. */
.fleet {
  position: absolute; z-index: 1;    /* under .hero__copy (z-index 2) */
  inset-inline: 0;
  bottom: 5%;                        /* clear of the stats row above it */
  --rig-w: clamp(340px, 52vw, 1000px);
  height: calc(var(--rig-w) * 474 / 1026);   /* the shared rig canvas ratio */

  --lead: .5s;                       /* before the first rig enters       */
  --gap:  2.3s;                      /* spacing between rigs in the queue */
  --pass: 7.2s;                      /* one rig's full drift through      */
  --park: 3.2s;                      /* the last rig's drive-in and stop  */
}

/* Only the passing rigs are masked — they run at full strength and dissolve
   before they reach the copy, so the text stays readable. The rig that parks is
   deliberately outside this wrapper so the mask never touches it. */
.fleet__queue {
  position: absolute; inset: 0;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%;   mask-size: 100% 100%;
}
html[dir="ltr"] .fleet__queue {    /* open side right, copy left  */
  -webkit-mask-image: linear-gradient(to left,  #000 40%, transparent 66%);
          mask-image: linear-gradient(to left,  #000 40%, transparent 66%);
}
html[dir="rtl"] .fleet__queue {    /* open side left, copy right  */
  -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 66%);
          mask-image: linear-gradient(to right, #000 40%, transparent 66%);
}

.rig {
  position: absolute; inset-inline-end: 0; bottom: 0;
  width: var(--rig-w); aspect-ratio: 1026 / 474;
}
.rig img { width: 100%; height: auto; display: block; }
.rig::after {                        /* ground shadow travels with its own rig */
  content: ''; position: absolute; z-index: -1;
  inset-inline: 11%; bottom: 1.5%; height: 4.5%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(7, 34, 73, .22), rgba(7, 34, 73, 0) 72%);
  filter: blur(5px);
}

.replay {
  position: absolute; z-index: 3;
  inset-block-end: 26px; inset-inline-start: var(--pad);
  width: 38px; height: 38px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: 50%;
  background: rgba(255, 255, 255, .7); color: var(--navy-2);
  cursor: pointer; opacity: .5;
  transition: opacity .25s ease, transform .35s var(--ease-out), background .25s;
}
.replay:hover { opacity: 1; background: #fff; transform: rotate(-40deg); }

/* ═══════════════ hero animation ═══════════════ */
@keyframes rise {
  from { transform: translateY(112%); filter: blur(15px); opacity: 0; }
  to   { transform: translateY(0);    filter: blur(0);    opacity: 1; }
}
@keyframes up {
  from { transform: translateY(20px); filter: blur(8px); opacity: 0; }
  to   { transform: translateY(0);    filter: blur(0);   opacity: 1; }
}
/* a rig drifts steadily right through the frame — the container's mask, not this
   keyframe, is what dissolves it once it reaches the copy */
@keyframes rig-pass {
  0%   { transform: translateX(calc(var(--dir) *  115%)); }
  100% { transform: translateX(calc(var(--dir) * -165%)); }
}
/* the last rig does not pass — it drives in and parks, on the deceleration
   fitted to the reference motion study */
@keyframes rig-park {
  0%   { transform: translateX(calc(var(--dir) * 115%));
         animation-timing-function: cubic-bezier(.15, .25, .65, 1); }
  100% { transform: translateX(0); }
}

/* Armed by an inline script in <head> so the hero never flashes in its rest
   position. Without JS the class is absent and everything is simply visible. */
html.anim [data-anim] { opacity: 0; }
html.anim.play [data-anim="rise"] { animation: rise .95s var(--ease-out) var(--d, 0s) both; }
html.anim.play [data-anim="up"]   { animation: up   .85s var(--ease-out) var(--d, 0s) both; }

/* the queue: one rig every --gap, the last one parking instead of passing */
html.anim .rig { transform: translateX(calc(var(--dir) * 115%)); }
html.anim.play .rig {
  animation: rig-pass var(--pass) linear calc(var(--lead) + var(--i) * var(--gap)) both;
}
html.anim.play .rig--park {
  animation: rig-park var(--park) calc(var(--lead) + var(--i) * var(--gap)) both;
}

/* promoted only while the timeline runs — `filter` is not compositor-driven, so
   the blurred text needs its own layer to avoid repainting the hero each frame */
html.anim.play .rig        { will-change: transform, opacity; }
html.anim.play [data-anim] { will-change: transform, filter, opacity; }

/* rest state once the timeline is done — also the fallback if it never ran */
html.anim.settled [data-anim] { opacity: 1; }
/* passed rigs rest out of frame; the parked one holds the composition */
html.anim.settled .rig { transform: translateX(calc(var(--dir) * -165%)); }
html.anim.settled .rig--park { transform: none; }

/* ═══════════════ sections ═══════════════ */
.sec { padding: clamp(72px, 9vw, 128px) 0; position: relative; }
.sec--about { background: var(--surface); }
.sec--services { background: var(--bg); }
.sec--process { background: var(--surface); }
.sec--sea { background: var(--bg); }
.sec--p2p { background: var(--bg); }
.sec--ind { background: var(--bg); }
.sec--why { background: var(--surface); }

.sec__head { max-width: 720px; margin: 0 auto clamp(44px, 5vw, 68px); text-align: center; }
.kicker {
  display: inline-block; margin-bottom: 16px;
  font-size: .76rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--orange);
}
html[dir="rtl"] .kicker { letter-spacing: .04em; text-transform: none; font-size: .85rem; }
.kicker--light { color: var(--orange-2); }

.h2 { font-size: clamp(1.7rem, 3.3vw, 2.6rem); letter-spacing: -.03em; margin-bottom: 18px; }
html[dir="rtl"] .h2 { letter-spacing: 0; line-height: 1.35; }
.h2--light { color: #fff; }
.h3 { font-size: clamp(1.3rem, 2.2vw, 1.75rem); margin-bottom: 28px; }
html[dir="rtl"] .h3 { line-height: 1.4; }

.lede { font-size: clamp(1rem, 1.3vw, 1.15rem); line-height: 1.75; color: var(--muted); }
.lede--center { margin-inline: auto; }
.lede--light { color: rgba(255, 255, 255, .74); }
.body { font-size: 1rem; line-height: 1.85; color: var(--muted); margin-top: 18px; }

.grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(32px, 5vw, 76px); align-items: start; }
.col { min-width: 0; }
.sec--about .kicker, .sec--about .h2 { text-align: start; }

.quote {
  margin-top: 26px; padding-inline-start: 20px;
  border-inline-start: 3px solid var(--orange);
  font-size: 1.05rem; font-weight: 600; line-height: 1.7; color: var(--navy);
}

.vm { padding: 28px 30px; border-radius: var(--r); background: var(--bg); border: 1px solid var(--line-2); }
.vm + .vm { margin-top: 16px; }
.vm--alt { background: var(--navy); }
.vm__k { display: block; font-size: .74rem; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: var(--orange); margin-bottom: 10px; }
html[dir="rtl"] .vm__k { letter-spacing: .03em; text-transform: none; font-size: .84rem; }
.vm__t { font-size: 1.2rem; line-height: 1.45; margin-bottom: 12px; }
.vm--alt .vm__t { color: #fff; }
.vm__p { font-size: .95rem; line-height: 1.8; color: var(--muted); }

.ticks { display: grid; gap: 9px; }
.ticks li { position: relative; padding-inline-start: 24px; font-size: .93rem; color: rgba(255,255,255,.78); }
.ticks li::before {                 /* physical sides: a tick is not mirrored in RTL */
  content: ''; position: absolute; inset-inline-start: 0; top: .5em;
  width: 11px; height: 6px;
  border-left: 2px solid var(--orange); border-bottom: 2px solid var(--orange);
  transform: rotate(-45deg);
}

/* ── service cards ── */
.cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.card {
  padding: 30px 26px 26px; background: var(--surface); border: 1px solid var(--line-2);
  border-radius: var(--r); display: flex; flex-direction: column;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .3s;
}
.card:hover { transform: translateY(-5px); border-color: transparent;
  box-shadow: 0 2px 4px rgba(7,34,73,.04), 0 26px 50px -26px rgba(7,34,73,.32); }
.card__ico {
  width: 46px; height: 46px; display: grid; place-items: center; margin-bottom: 20px;
  border-radius: 12px; background: rgba(232, 123, 8, .1); color: var(--orange);
}
.card__ico svg { width: 24px; height: 24px; }
.card__t { font-size: 1.12rem; margin-bottom: 6px; }
html[dir="rtl"] .card__t { line-height: 1.45; }
.card__s { font-size: .82rem; font-weight: 700; color: var(--orange); margin-bottom: 12px; }
.card__p { font-size: .92rem; line-height: 1.8; color: var(--muted); margin-bottom: 18px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; }
.chips li {
  padding: 5px 11px; border-radius: 100px; background: rgba(7, 34, 73, .05);
  font-size: .74rem; font-weight: 600; color: var(--navy-2);
}

/* ── sea freight media ── */
.seahero { margin: clamp(34px, 4vw, 54px) 0 0; border-radius: var(--r); overflow: hidden;
  box-shadow: 0 30px 62px -32px rgba(7, 34, 73, .45); }
.seahero img { display: block; width: 100%; height: auto; }

.seastrip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: clamp(28px, 3.4vw, 44px); }
.seashot { margin: 0; overflow: hidden; border-radius: var(--r); background: var(--surface);
  box-shadow: 0 18px 40px -28px rgba(7, 34, 73, .34);
  transition: transform .45s var(--ease-soft), box-shadow .45s var(--ease-soft); }
.seashot:hover { transform: translateY(-4px); box-shadow: 0 26px 52px -26px rgba(7, 34, 73, .42); }
.seashot img { display: block; width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }
.seashot figcaption { padding: 16px 20px 20px; font-size: .88rem; line-height: 1.75; color: var(--muted); }
.seashot figcaption b { display: block; margin-bottom: 5px; font-size: .98rem; color: var(--ink); }

/* ── solution modes ── */
.modes { margin-top: clamp(56px, 6vw, 84px); text-align: center; }
.modes__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; text-align: start; }
.mode { padding: 26px 24px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line-2); }
.mode__n { display: inline-block; margin-bottom: 14px; font-family: var(--f-en);
  font-size: .78rem; font-weight: 800; letter-spacing: .08em; color: var(--orange); }
.mode h4 { font-size: 1.02rem; margin-bottom: 8px; }
html[dir="rtl"] .mode h4 { line-height: 1.45; }
.mode p { font-size: .89rem; line-height: 1.75; color: var(--muted); }

/* ── fleet ── */
.sec--fleet { background: var(--surface); }
.fleetgrid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 30px;                       /* room to breathe between vehicles */
}
.vcard {
  display: flex; flex-direction: column;
  padding: 20px 22px 26px; border-radius: var(--r);
  background: var(--bg); border: 1px solid var(--line-2);
  text-align: center;              /* the vehicle and its caption share an axis */
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out);
}
.vcard:hover { transform: translateY(-4px); box-shadow: 0 24px 46px -28px rgba(7,34,73,.34); }
.vcard__img {
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16 / 9; margin-bottom: 18px;
  padding: 14px; border-radius: 10px; background: #fff;
}
/* contain, never crop — the cab must always be in frame */
.vcard__img img {
  max-width: 100%; max-height: 100%; width: auto; height: auto;
  object-fit: contain; margin: auto;
}
.vcard h3 { font-size: 1.02rem; margin-bottom: 4px; }
html[dir="rtl"] .vcard h3 { line-height: 1.45; }
.vcard__s {
  display: block; margin-bottom: 10px;
  font-size: .78rem; font-weight: 700; color: var(--orange);
}
.vcard p { font-size: .88rem; line-height: 1.8; color: var(--muted); }

/* ── network (dark) ── */
.sec--track { background: var(--navy); }
.sec--net { background: var(--navy); overflow: hidden; }
.sec--net::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(80% 60% at 80% 0%, rgba(232,123,8,.16), transparent 60%);
  pointer-events: none;
}
.sec--net .wrap { position: relative; }
.net { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.net__card {
  padding: 28px 24px; border-radius: var(--r);
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
  transition: background .35s ease, transform .4s var(--ease-out);
}
.net__card:hover { background: rgba(255, 255, 255, .09); transform: translateY(-4px); }
.net__i { display: block; margin-bottom: 16px; font-family: var(--f-en);
  font-size: .8rem; font-weight: 800; color: var(--orange-2); letter-spacing: .06em; }
.net__card h3 { font-size: 1.08rem; color: #fff; margin-bottom: 10px; }
html[dir="rtl"] .net__card h3 { line-height: 1.45; }
.net__card p { font-size: .89rem; line-height: 1.8; color: rgba(255, 255, 255, .6); }

.routes { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 34px; }
.routes li {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 20px; border-radius: 100px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  font-size: .88rem; font-weight: 600; color: rgba(255, 255, 255, .88);
}
.routes i { font-style: normal; color: var(--orange-2); font-size: 1.05rem; }

/* ── process ── */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px;
  background: var(--line-2); border: 1px solid var(--line-2); border-radius: var(--r); overflow: hidden; }
.step { padding: 32px 28px; background: var(--surface); }
.step__n { display: block; margin-bottom: 16px; font-family: var(--f-en);
  font-size: 1.6rem; font-weight: 800; color: rgba(7, 34, 73, .16); letter-spacing: -.02em; }
.step h3 { font-size: 1.05rem; margin-bottom: 9px; }
html[dir="rtl"] .step h3 { line-height: 1.45; }
.step p { font-size: .9rem; line-height: 1.8; color: var(--muted); }

/* ── industries ── */
.inds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ind { padding: 28px 26px; border-radius: var(--r); background: var(--surface);
  border: 1px solid var(--line-2); position: relative; overflow: hidden;
  transition: transform .4s var(--ease-out), box-shadow .4s var(--ease-out); }
.ind::before { content: ''; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 100%; height: 3px; background: linear-gradient(90deg, var(--orange), transparent);
  transform: scaleX(0); transform-origin: var(--o, left); transition: transform .45s var(--ease-out); }
html[dir="rtl"] .ind::before { --o: right; }
.ind:hover { transform: translateY(-4px); box-shadow: 0 22px 44px -26px rgba(7,34,73,.34); }
.ind:hover::before { transform: scaleX(1); }
.ind h3 { font-size: 1.05rem; margin-bottom: 9px; }
html[dir="rtl"] .ind h3 { line-height: 1.45; }
.ind p { font-size: .9rem; line-height: 1.8; color: var(--muted); }

/* ── why ── */
.whys { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 3vw, 40px); }
.why { padding-inline-start: 22px; border-inline-start: 2px solid var(--line); }
.why__n { display: block; margin-bottom: 12px; font-family: var(--f-en);
  font-size: 1.45rem; font-weight: 800; color: var(--orange); letter-spacing: -.02em; }
.why h3 { font-size: 1.05rem; margin-bottom: 9px; }
html[dir="rtl"] .why h3 { line-height: 1.45; }
.why p { font-size: .9rem; line-height: 1.8; color: var(--muted); }

/* ── CTA ── */
.sec--cta { padding: clamp(72px, 8vw, 110px) 0; background: var(--bg); }
.cta-box {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(48px, 6vw, 82px) clamp(24px, 5vw, 72px);
  border-radius: 22px;
  background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 55%, #123A70 100%);
}
.cta-box::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(60% 90% at 85% 110%, rgba(232,123,8,.32), transparent 62%);
}
.cta-box > * { position: relative; }
.cta-box .lede { max-width: 46rem; margin-bottom: 34px; }
/* ── contact details ── */
.contacts {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-top: 44px; padding-top: 34px;
  border-top: 1px solid rgba(255, 255, 255, .14);
}
.contact {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  text-align: center;
}
.contact__ico {
  width: 40px; height: 40px; display: grid; place-items: center; margin-bottom: 6px;
  border-radius: 11px; background: rgba(255, 255, 255, .1); color: var(--orange-2);
}
.contact__ico svg { width: 20px; height: 20px; }
.contact__k {
  font-size: .74rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .5);
}
html[dir="rtl"] .contact__k { letter-spacing: .02em; text-transform: none; font-size: .82rem; }
.contact__v {
  font-size: 1rem; font-weight: 600; color: #fff;
  transition: color .2s ease;
}
a.contact__v:hover { color: var(--orange-2); }
.contact__v--num { font-family: var(--f-en); font-size: 1.12rem; letter-spacing: .02em; }

/* ── section slogan ── */
.slogan {
  margin: -6px 0 16px;
  font-size: clamp(.95rem, 1.35vw, 1.1rem); font-weight: 700;
  color: var(--orange); letter-spacing: -.01em;
}
html[dir="rtl"] .slogan { letter-spacing: 0; }
.slogan--light { color: var(--orange-2); }
.sec--about .slogan { text-align: start; }

/* ── footer ── */
.foot { background: var(--surface); border-top: 1px solid var(--line-2); padding-top: 56px; }
.foot__inner { display: flex; justify-content: space-between; align-items: flex-start;
  gap: 40px; flex-wrap: wrap; padding-bottom: 40px; }
.foot__logo { height: 76px; width: auto; margin-bottom: 14px; }
.foot__logo[hidden] { display: none; }
.foot__tag { font-size: .92rem; font-weight: 600; color: var(--muted); max-width: 24rem; }
.foot__contact { display: flex; flex-wrap: wrap; gap: 6px 22px; margin-top: 14px; }
.foot__contact a {
  font-size: .9rem; font-weight: 600; color: var(--navy);
  transition: color .2s ease;
}
.foot__contact a:hover { color: var(--orange); }
.foot__nav { display: flex; flex-wrap: wrap; gap: 10px 26px; }
.foot__nav a { font-size: .9rem; font-weight: 600; color: var(--muted);
  transition: color .2s ease; }
.foot__nav a:hover { color: var(--orange); }
.foot__base { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  padding-block: 20px 24px; border-top: 1px solid var(--line-2);
  font-size: .8rem; color: var(--muted-2); }

/* ═══════════════ scroll reveal ═══════════════ */
html.anim [data-reveal] {
  opacity: 0; transform: translateY(20px); filter: blur(7px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out), filter .8s var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
html.anim [data-reveal].in { opacity: 1; transform: none; filter: none; }

/* ═══════════════ responsive ═══════════════ */
@media (max-width: 1080px) {
  .cards, .modes__grid, .net { grid-template-columns: repeat(2, 1fr); }
  .fleetgrid { grid-template-columns: repeat(2, 1fr); }
  .steps, .inds, .whys { grid-template-columns: repeat(2, 1fr); }
  .contacts { gap: 20px; }
  .fleet { --rig-w: clamp(360px, 58vw, 640px); bottom: 5%; }
  .hero__copy > * { max-width: 30rem; }
  .headline { max-width: 32rem; }
}

@media (max-width: 900px) {
  .nav__links {
    position: absolute; inset-inline: var(--pad); inset-block-start: calc(100% + 8px);
    flex-direction: column; align-items: stretch; gap: 2px; padding: 10px;
    background: rgba(255, 255, 255, .95);
    backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    border: 1px solid var(--line-2); border-radius: 16px;
    box-shadow: 0 20px 44px -20px rgba(7, 34, 73, .34);
    opacity: 0; visibility: hidden; transform: translateY(-8px);
    transition: opacity .25s ease, transform .3s var(--ease-out), visibility .25s;
  }
  .nav__links.is-open { opacity: 1; visibility: visible; transform: none; }
  .nav__links a { padding: 11px 14px; font-size: .95rem; }
  .burger { display: block; }
  /* the links leave the flow above, so the controls need their own push */
  .nav__inner { gap: 10px; padding: 10px var(--pad); }
  .nav__end { margin-inline-start: auto; }
  .brand__mark { height: 26px; }
  .brand__word { height: 13px; }
  .brand__word[data-lang="en"] { height: 10px; }
  .grid-2 { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .hero { min-height: auto; padding-top: 132px; padding-bottom: 0; }
  .hero__copy > * { max-width: none; }
  .headline { max-width: none; }
  /* stacked layout: the queue becomes a band under the copy, so it fades at
     both ends rather than toward a column of text that is no longer beside it */
  .fleet {
    position: relative; inset-inline: auto; bottom: auto;
    --rig-w: 92vw;
    margin-block: 28px 20px;
  }
  .rig { inset-inline-end: 4vw; }
  html[dir="ltr"] .fleet__queue,
  html[dir="rtl"] .fleet__queue {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
            mask-image: linear-gradient(to right, transparent 0, #000 14%, #000 86%, transparent 100%);
  }
  .hero::after { bottom: 4%; }
  .replay { position: static; margin: 18px auto 26px; }
  .cards, .modes__grid, .net, .steps, .inds, .whys, .seastrip { grid-template-columns: 1fr; }
  .fleetgrid { grid-template-columns: 1fr; }
  .contacts { grid-template-columns: 1fr; gap: 26px; }
  .proof { flex-wrap: wrap; gap: 16px 20px; }
  .foot__inner { flex-direction: column; gap: 26px; }
}

/* ═══════════════ accessibility ═══════════════ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  html.anim [data-anim], html.anim.play [data-anim] { opacity: 1; animation: none; }
  /* no parade — just the parked rig */
  html.anim .rig, html.anim.play .rig {
    animation: none; transform: translateX(calc(var(--dir) * -165%));
  }
  html.anim .rig--park, html.anim.play .rig--park { transform: none; }
  html.anim [data-reveal] { opacity: 1; transform: none; filter: none; transition: none; }
  .nav { animation: none; }
  .replay { display: none; }
  * { scroll-behavior: auto !important; }
}