/* K-Logistics Jeddah — design preview (v11)

   PALETTE AND ROLES
   navy-900  #06182b   footer, deepest surfaces
   navy-800  #0a2540   dark sections, cards over photographs
   navy-700  #143b5e   borders and raised tiles on dark sections
   ink       #151b2b   text on light surfaces (the navy of the logo)
   green     #008461   primary action, links and accents on light surfaces (the green of the logo)
   mint      #7fe0b8   accents and links on dark surfaces
   sand      #f5f1e8   warm light sections (echoes the sunset of the Jeddah picture)
   mist      #eef4f2   cool light surfaces: tiles on white, form background
   white     #ffffff   default page surface
   Sections alternate photo → sand → white → navy, so no page is all white or all blue. */

:root {
  --navy-900: #06182b;
  --navy-800: #0a2540;
  --navy-700: #143b5e;
  --ink: #151b2b;
  --green: #008461;
  --green-deep: #006349;
  --mint: #7fe0b8;
  --sand: #f5f1e8;
  --sand-line: #e4dccb;
  --mist: #eef4f2;
  --line: #dce5df;
  --muted: #55626b;
  --on-dark: #d3deea;
  --night: #020e20;   /* deep sea tone at the lower edge of the hero picture */
  --card: #fbfaf5;    /* milky white of the director's card */
  --sheet-top: var(--sand);   /* colour of the first section under a pinned hero; set per page on <main> */

  --hh: 84px;         /* header height */
  --hh-c: 62px;       /* compact header height once the page is scrolled; sticky offsets use this one */
  --banner-h: 31px;   /* measured and updated by app.js */
  --ease: cubic-bezier(.22, .61, .36, 1);
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--hh-c) + 14px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: Arial, Tahoma, sans-serif;
  color: var(--ink);
  background: #fff;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; color: inherit; }
img { max-width: 100%; }
[hidden] { display: none !important; }
ul, ol { margin: 0; padding: 0; list-style: none; }

p { font-size: 16px; line-height: 1.7; color: var(--muted); margin: 0 0 1em; }

h1, h2, h3 { margin: 0; }
h1 { font-size: clamp(34px, min(4.1vw, 7.2vh), 68px); letter-spacing: -.05em; line-height: 1.05; }
h2 { font-size: clamp(30px, 3vw, 46px); letter-spacing: -.04em; line-height: 1.12; }
h3 { font-size: 20px; letter-spacing: -.02em; line-height: 1.25; }
h2 + p { margin-top: 18px; }

.eyebrow {
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--green);
  font-weight: bold;
  margin: 0 0 20px;
}

.icon { width: 44px; height: 44px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Focus and shared link states ---------- */

:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; }
.band--navy :focus-visible, .scene-stage :focus-visible, .quote-intro :focus-visible, footer :focus-visible { outline-color: #fff; }
.bizcard :focus-visible { outline-color: var(--green); }

.arr { display: inline-block; transition: transform .3s var(--ease); }
a:hover .arr, a:focus-visible .arr, button:hover .arr, button:focus-visible .arr { transform: translate(2px, -2px); }
[dir="rtl"] a:hover .arr, [dir="rtl"] a:focus-visible .arr,
[dir="rtl"] button:hover .arr, [dir="rtl"] button:focus-visible .arr { transform: translate(-2px, -2px); }
a:hover .arr-down, a:focus-visible .arr-down, [dir="rtl"] a:hover .arr-down, [dir="rtl"] a:focus-visible .arr-down { transform: translateY(3px); }
a:hover .arr-up, a:focus-visible .arr-up, [dir="rtl"] a:hover .arr-up, [dir="rtl"] a:focus-visible .arr-up { transform: translateY(-3px); }

.button {
  display: inline-block;
  background: var(--green);
  color: #fff;
  padding: 17px 24px;
  border: 0;
  font-size: 14px;
  font-weight: bold;
  transition: background-color .25s ease, box-shadow .25s ease, color .25s ease;
}
.button:hover, .button:focus-visible { background: var(--green-deep); }
.button--light { background: var(--mint); color: #06281e; }
.button--light:hover, .button--light:focus-visible { background: #a6ecd0; }
.small { padding: 12px 18px; }

.textlink {
  font-size: 14px;
  padding-bottom: 5px;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 100% 1px no-repeat;
  transition: background-size .3s var(--ease), color .25s ease;
}
.textlink:hover, .textlink:focus-visible { background-size: 100% 2px; }

.skip-link {
  position: absolute;
  inset-inline-start: 12px;
  top: 8px;
  z-index: 60;
  padding: 12px 16px;
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  transform: translateY(-200%);
}
.skip-link:focus { transform: none; }

/* ---------- Preview banner and sticky header ---------- */

.draft {
  background: var(--mist);
  color: #4a5d55;
  text-align: center;
  font-size: 11px;
  padding: 9px 12px;
  letter-spacing: .08em;
}

/* Sticky on every screen size. None of its ancestors may get overflow or transform, or sticky stops working. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  height: var(--hh);
  padding: 0 4%;
  background: #fff;
  border-bottom: 1px solid var(--line);
  transition: height .3s var(--ease), margin-bottom .3s var(--ease), box-shadow .3s ease;
}
/* Compact once scrolled. The margin gives back the height that was removed, so the page below never jumps. */
.site-header.is-compact {
  height: var(--hh-c);
  margin-bottom: calc(var(--hh) - var(--hh-c));
  box-shadow: 0 8px 26px rgba(6, 24, 43, .1);
}

.brand { display: block; line-height: 0; flex: none; }
/* Height drives the size; width follows the file's own 1280:853 ratio, so the logo is never stretched. */
.brand img { display: block; height: calc(var(--hh) - 20px); width: auto; aspect-ratio: 1280 / 853; transition: height .3s var(--ease); }
.is-compact .brand img { height: calc(var(--hh-c) - 12px); }

nav { display: flex; gap: 22px; font-size: 14px; }
nav a:not(.button) {
  padding: 8px 0;
  white-space: nowrap;
  background: linear-gradient(var(--green), var(--green)) 0 100% / 0 2px no-repeat;
  transition: background-size .3s var(--ease), color .25s ease;
}
[dir="rtl"] nav a:not(.button) { background-position: 100% 100%; }
nav a:not(.button):hover, nav a:not(.button):focus-visible, nav a[aria-current="page"] { background-size: 100% 2px; color: var(--green-deep); }
.nav-cta { display: none; }

.actions { display: flex; align-items: center; gap: 16px; }

/* IATA mark with its caption. */
.iata {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding-inline: 16px;
  border-inline-start: 1px solid var(--line);
  line-height: 1;
}
.iata img { display: block; height: 28px; width: auto; transition: height .3s var(--ease); }
.iata span { font-size: 10px; letter-spacing: .02em; white-space: nowrap; color: #4f5d6b; transition: color .25s ease; }
.iata:hover span, .iata:focus-visible span { color: var(--ink); }
.is-compact .iata img { height: 22px; }

.lang { border: 0; background: none; font-size: 14px; padding: 10px 4px; transition: color .25s ease; }
.lang:hover { color: var(--green-deep); }

.menu { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 0; position: relative; }
.menu span, .menu span::before, .menu span::after {
  content: "";
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: var(--ink);
  transition: transform .3s var(--ease), background-color .2s ease;
}
.menu span { top: 21px; }
.menu span::before { left: 0; top: -7px; }
.menu span::after { left: 0; top: 7px; }
.menu[aria-expanded="true"] span { background: transparent; }
.menu[aria-expanded="true"] span::before { transform: translateY(7px) rotate(45deg); }
.menu[aria-expanded="true"] span::after { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Hero scenes: home, Road and Sea ----------
   One flattened picture, fitted to the WIDTH of the stage at every screen shape, so the subject keeps
   the same horizontal position (from 45% of the width) and the text column can stay clear of it.
   --r-desk / --r-phone are the picture's height as a percentage of its width (home: 1672 x 941). */

.hero { position: relative; background: var(--night); --pin: 30vh; --fold-gap: var(--banner-h); }
.hero.is-pinned { --fold-gap: calc(var(--banner-h) + var(--hh) - var(--hh-c)); }

.scene-stage {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  overflow: clip;   /* unlike hidden, clip can never be scrolled sideways by focus or scroll-into-view */
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - var(--hh));
  color: #fff;
  background: var(--night);
  --p: 0;   /* scroll progress 0 → 1, set by app.js */
}
@supports (height: 1svh) {
  .hero { --pin: 30svh; }
  .scene-stage { min-height: calc(100svh - var(--hh)); }
}

.scene {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  --w: 1vw;
  --photo-h: calc(var(--r-desk, 56.28) * var(--w));
}
@supports (width: 1cqw) {
  .scene { container-type: inline-size; --w: 1cqw; }
}
/* Arabic: mirror the concept picture, but never one that carries the logo or any lettering (.hero--fixed). */
[dir="rtl"] .hero:not(.hero--fixed) .scene { transform: scaleX(-1); }

.scene-photo {
  display: block;
  position: absolute;
  left: 0;
  width: 100%;
  aspect-ratio: 100 / var(--r-desk, 56.28);
  top: min(0px, calc((100% - var(--photo-h)) * .3));
  overflow: hidden;
  overflow: clip;
}
.scene-photo img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  /* Light parallax of the whole frame: a slow zoom anchored on the left wingtip, drifting away from the text. */
  transform-origin: 45% 31%;
  transform: translate3d(calc(var(--p) * 1.2 * var(--w)), calc(var(--p) * -.5 * var(--w)), 0) scale(calc(1 + var(--p) * .06));
}
.scene::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  --feather: clamp(0px, calc((100% - var(--photo-h)) * 1.4 + 28px), calc(20 * var(--w)));
  top: calc(var(--photo-h) - var(--feather));
  height: calc(var(--feather) + 2px);
  background: linear-gradient(to bottom, rgba(2, 14, 32, 0) 0%, rgba(2, 14, 32, .5) 45%, var(--night) 96%);
}
.scene-scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(2, 12, 28, .74) 0%, rgba(2, 12, 28, .58) 22%, rgba(2, 12, 28, .24) 38%, rgba(2, 12, 28, 0) 52%),
    linear-gradient(180deg, rgba(2, 12, 28, .34), rgba(2, 12, 28, 0) 28%);
}

@keyframes cue { from { transform: translateY(-100%); } to { transform: translateY(260%); } }
@keyframes rise { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } }
@keyframes marquee { to { transform: translate3d(-50%, 0, 0); } }
@keyframes marquee-rtl { to { transform: translate3d(50%, 0, 0); } }

.hero-copy {
  position: relative;
  width: min(36%, 560px);   /* ends before the wingtip at 45% */
  margin-inline-start: 7%;
  padding-block: clamp(26px, 6vh, 64px) clamp(84px, 13vh, 150px);
  text-shadow: 0 1px 20px rgba(2, 10, 24, .5);
}
/* Arrival of the text when the page opens. app.js adds .settled a moment later, so the arrival cannot
   replay when motion is paused and resumed; with motion paused or reduced there is no arrival at all. */
html:not(.settled):not(.motion-off) .hero-copy > * { animation: rise .9s var(--ease) both; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }

.hero-copy .eyebrow { color: var(--mint); margin-bottom: clamp(14px, 2.6vh, 26px); }
.hero-copy h1 { margin-bottom: clamp(14px, 2.6vh, 24px); }
.lead { max-width: 460px; margin: 0; color: #e2ebf2; }

.hero-links { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 26px; margin-top: clamp(18px, 3.4vh, 30px); }
.hero-links .button { text-shadow: none; box-shadow: 0 10px 30px rgba(2, 10, 24, .4); }
.hero-links .textlink { color: #fff; background-image: linear-gradient(var(--mint), var(--mint)); }

.affiliation { display: flex; gap: 14px; align-items: center; margin-top: clamp(20px, 4.4vh, 40px); }
.affiliation span { font-size: 28px; font-weight: bold; line-height: 1.15; border: 1px solid rgba(255, 255, 255, .45); padding: 7px 13px; }
.affiliation p { font-size: 12px; margin: 0; color: #d6e0ea; line-height: 1.6; }

.scene-reserve { display: none; }

.scene-meta {
  position: absolute;
  inset-inline-end: 5%;
  bottom: calc(var(--fold-gap) + 14px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.scene-caption {
  margin: 0;
  max-width: 300px;
  padding: 7px 10px;
  font-size: 10px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: end;
  color: #fff;
  background: rgba(2, 12, 28, .62);
}

/* Shared "pause motion" control: hero, logo band and footer all switch the same state. */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: none;
  min-height: 36px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: .04em;
  color: #fff;
  background: rgba(2, 12, 28, .62);
  border: 1px solid rgba(255, 255, 255, .5);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.motion-toggle:hover, .motion-toggle:focus-visible { background: rgba(2, 12, 28, .88); border-color: #fff; }
.motion-toggle--light { color: var(--ink); background: #fff; border-color: #b9c8c0; }
.motion-toggle--light:hover, .motion-toggle--light:focus-visible { background: var(--mist); border-color: var(--ink); }
.motion-icon { display: block; width: 9px; height: 10px; border-left: 3px solid currentColor; border-right: 3px solid currentColor; }
.motion-off .motion-icon { width: 0; height: 0; border: 5px solid transparent; border-left: 9px solid currentColor; border-right: 0; }

.scroll-cue {
  position: absolute;
  left: 50%;
  bottom: calc(var(--fold-gap) + 10px);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 1px 10px rgba(2, 10, 24, .7);
  opacity: calc(1 - var(--p) * 5);
  pointer-events: none;
}
.scroll-cue i { display: block; position: relative; overflow: hidden; width: 1px; height: 34px; background: rgba(255, 255, 255, .4); }
.scroll-cue i::after { content: ""; position: absolute; inset: 0 0 auto; height: 40%; background: #fff; }
/* Self-moving parts run only when app.js is active, because that is what provides the pause control. */
.js:not(.motion-off) .scroll-cue i::after { animation: cue 2.4s var(--ease) infinite; }

/* Pinned mode (added by app.js only when the whole stage fits the screen and motion is allowed).
   The stage stays in place for --pin of scrolling, then the content sheet slides over it. */
.hero.is-pinned { height: calc(var(--stage-h) * 2 + var(--pin)); }
.hero.is-pinned .scene-stage { position: sticky; top: var(--hh-c); height: var(--stage-h); min-height: 0; }
.hero.is-pinned + .sheet { margin-top: calc(var(--stage-h) * -1); }
.hero.is-pinned .hero-copy { opacity: clamp(.2, calc(2.7 - var(--p) * 2.5), 1); }

.sheet { position: relative; z-index: 2; background: var(--sheet-top); }
.hero.is-pinned + .sheet::before {
  content: "";
  position: absolute;
  inset: auto 0 100%;
  height: min(22vh, 170px);
  pointer-events: none;
  background: var(--sheet-top);
  -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .86) 16%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .1) 82%, transparent 100%);
  mask-image: linear-gradient(to top, #000 0%, rgba(0, 0, 0, .86) 16%, rgba(0, 0, 0, .6) 38%, rgba(0, 0, 0, .3) 60%, rgba(0, 0, 0, .1) 82%, transparent 100%);
}
.hero:not(.is-pinned) .scene-stage::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 40px;
  pointer-events: none;
  background: var(--sheet-top);
  -webkit-mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .5) 40%, transparent);
  mask-image: linear-gradient(to top, #000, rgba(0, 0, 0, .5) 40%, transparent);
}

/* Motion switched off by the visitor: static picture, no parallax, no self-moving parts. */
.motion-off .scene-stage { --p: 0 !important; }

/* Road and Sea first screens reuse the stage above. */
.hero-copy .back { display: inline-block; font-size: 12px; color: #d6e0ea; margin-bottom: clamp(12px, 2.4vh, 22px); transition: color .25s ease; }
.hero-copy .back:hover, .hero-copy .back:focus-visible { color: #fff; }

/* A frame that carries the logo is not mirrored for Arabic, so the text stays over its calm side. */
[dir="rtl"] .hero--fixed:not(.hero--panel):not(.hero--localized) .hero-copy { margin-inline-start: auto; margin-inline-end: 7%; }
[dir="rtl"] .hero--fixed:not(.hero--panel):not(.hero--localized) .scene-meta { inset-inline-end: auto; right: 5%; }

/* A frame with the logo has its own turned copy for Arabic (.hero--localized): app.js swaps the file, the
   element itself is not mirrored, so the mark reads the right way. Only the shading and the drift follow. */
[dir="rtl"] .hero--localized .scene-scrim { transform: scaleX(-1); }
[dir="rtl"] .hero--localized.hero--cover .scene-photo img {
  object-position: var(--focus-ar, 0% 50%);
  transform-origin: 55% 31%;
  transform: translate3d(calc(var(--p) * -1.2 * var(--w)), calc(var(--p) * -.5 * var(--w)), 0) scale(calc(1 + var(--p) * .06));
}

/* Cover mode (Air, Road, Sea): the scene fills the whole first screen.
   The frame always spans the full width, so the transport keeps its place and never slides under the text.
   A wide window crops the frame at the top and bottom (around --focus); in a tall window the frame sits at
   the bottom and the sky simply continues above it, in the colours of the frame's own top edge.
   The text sits low on the calm side. */
.hero--cover .scene { container-type: size; }   /* lets the blend strip below measure the gap (cqh) */
.hero--cover .scene::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: max(0px, calc(100% - var(--photo-h) + 2px));
  background: linear-gradient(180deg, var(--sky-up, #082a55), var(--sky-c, #23568c));
}
.hero--cover .scene-photo { top: auto; bottom: 0; height: min(100%, var(--photo-h)); aspect-ratio: auto; }
.hero--cover .scene-photo::after {   /* soft join between the continued sky and the frame; has no height when there is no gap */
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: clamp(0px, calc((100cqh - var(--photo-h)) * 4), calc(12 * var(--w)));
  pointer-events: none;
  background: var(--sky-c, #23568c);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent);
  mask-image: linear-gradient(180deg, #000, transparent);
}
.hero--cover .scene-photo img { object-position: var(--focus, 100% 35%); }
.hero--cover .scene::after { display: none; }
.hero--cover .scene-stage { justify-content: flex-end; }
.hero--cover .hero-copy { width: min(34%, 540px); padding-top: 0; }
.hero--cover .scene-scrim {
  background:
    linear-gradient(90deg, rgba(2, 12, 28, .66) 0%, rgba(2, 12, 28, .52) 24%, rgba(2, 12, 28, .22) 42%, rgba(2, 12, 28, 0) 56%),
    linear-gradient(0deg, rgba(2, 12, 28, .5) 0%, rgba(2, 12, 28, .2) 34%, rgba(2, 12, 28, 0) 58%),
    linear-gradient(180deg, rgba(2, 12, 28, .28), rgba(2, 12, 28, 0) 20%);
}
/* A bright daylight frame with a pale horizon behind the text gets a stronger local shade. */
.hero--deep .scene-scrim {
  background:
    linear-gradient(90deg, rgba(2, 12, 28, .8) 0%, rgba(2, 12, 28, .7) 24%, rgba(2, 12, 28, .38) 42%, rgba(2, 12, 28, 0) 58%),
    linear-gradient(0deg, rgba(2, 12, 28, .5) 0%, rgba(2, 12, 28, .2) 34%, rgba(2, 12, 28, 0) 58%),
    linear-gradient(180deg, rgba(2, 12, 28, .28), rgba(2, 12, 28, 0) 20%);
}
/* Soft arrival of the scene when the page opens (the text already rises in after it). */
@keyframes scene-in { from { opacity: 0; transform: scale(1.035); } to { opacity: 1; transform: none; } }
html.js:not(.settled):not(.motion-off) .hero--cover .scene-photo { animation: scene-in 1.5s var(--ease) both; }

/* Panel mode: the frame in this slot is still a small concept preview. It is shown beside the text at no more
   than its own pixel size (--iw), instead of being stretched across the stage. */
.hero--panel .scene-stage { background: linear-gradient(118deg, #041427 0%, #0a2540 52%, #0e3a52 100%); }
.hero--panel .scene {
  inset: auto;
  inset-inline-end: 5%;
  top: 48%;
  width: min(50%, calc(var(--iw) * 1px));
  aspect-ratio: 100 / var(--r-desk);
  transform: translateY(-50%);
  z-index: 0;
}
.hero--panel .scene::after { display: none; }
.hero--panel .scene::before {   /* offset outline: a quiet geometric accent behind the frame */
  content: "";
  position: absolute;
  inset: 18px -18px -18px 18px;
  border: 1px solid rgba(127, 224, 184, .45);
}
[dir="rtl"] .hero--panel .scene::before { inset: 18px 18px -18px -18px; }
.hero--panel .scene-photo { top: 0; box-shadow: 0 30px 70px rgba(2, 10, 24, .5); }
.hero--panel .scene-scrim { display: none; }
[dir="rtl"] .hero--panel .scene-photo img { transform-origin: 55% 31%; transform: translate3d(calc(var(--p) * -1.2 * var(--w)), calc(var(--p) * -.5 * var(--w)), 0) scale(calc(1 + var(--p) * .06)); }

/* ---------- Section rhythm ---------- */

.band { position: relative; padding: 96px 7%; }
.band--sand { background: var(--sand); }
.band--mist { background: var(--mist); }
.band--navy { background: var(--navy-800); color: #fff; }
.band--navy p { color: var(--on-dark); }
.band--navy .eyebrow { color: var(--mint); }
.band--navy .textlink { background-image: linear-gradient(var(--mint), var(--mint)); }

.band-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 30px 60px; margin-bottom: 48px; }
.band-head > div { max-width: 640px; }
.band-head > p { max-width: 400px; margin: 0; }
.note { font-size: 13px; line-height: 1.6; margin: 26px 0 0; padding-inline-start: 14px; border-inline-start: 2px solid var(--green); max-width: 760px; }
.band--navy .note { border-color: var(--mint); }

/* ---------- Home: Air / Road / Sea panels ----------
   Three vertical photo panels of equal height with a slightly slanted outline (--slant, a share of the
   panel's width). Only the outline is slanted: .mode-shape clips the picture, while the picture itself,
   the text and the arrow stay upright. Each panel is one link; only the lower part, under the text,
   carries a soft gradient. The arrow and the green line show it is a link without hovering. */

.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(12px, 1.4vw, 20px); max-width: 1400px; margin-inline: auto; --slant: 5%; }
.mode {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  aspect-ratio: 4 / 5;
  color: #fff;
}
.mode-shape {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: var(--navy-800);
  /* the same slant on both sides, so the gaps between neighbouring panels stay even */
  clip-path: polygon(var(--slant) 0, 100% 0, calc(100% - var(--slant)) 100%, 0 100%);
}
[dir="rtl"] .mode-shape { clip-path: polygon(0 0, calc(100% - var(--slant)) 0, 100% 100%, var(--slant) 100%); }
.mode img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; transition: transform .9s var(--ease); }
.mode-shape::after {   /* local gradient under the text only */
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 60%;
  pointer-events: none;
  background: linear-gradient(0deg, rgba(4, 16, 32, .92) 0%, rgba(4, 16, 32, .72) 36%, rgba(4, 16, 32, .3) 70%, rgba(4, 16, 32, 0) 100%);
}
.mode::after {   /* thin green line along the lower edge of the shape */
  content: "";
  position: absolute;
  inset: auto var(--slant) 0 0;
  z-index: 2;
  height: 3px;
  background: var(--mint);
  transform: scaleX(.2);
  transform-origin: 0 50%;
  transition: transform .5s var(--ease);
}
[dir="rtl"] .mode::after { inset: auto 0 0 var(--slant); transform-origin: 100% 50%; }
.mode:hover img, .mode:focus-visible img { transform: scale(1.045); }
.mode:hover::after, .mode:focus-visible::after { transform: scaleX(1); }
.mode:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.mode-body { position: relative; z-index: 2; display: block; padding: 0 clamp(18px, 2vw, 28px) clamp(24px, 2.4vw, 32px); padding-inline-end: calc(var(--slant) + 78px); }
.mode-no { display: block; font-size: 11px; letter-spacing: .18em; color: var(--mint); font-weight: bold; margin-bottom: 10px; }
.mode h3 { font-size: clamp(24px, 2.2vw, 32px); letter-spacing: -.03em; margin-bottom: 8px; }
.mode-line { display: block; font-size: 14px; line-height: 1.5; color: #e6edf4; }
.mode-arrow {
  position: absolute;
  z-index: 2;
  inset-inline-end: calc(var(--slant) + 16px);   /* clear of the slanted lower corner */
  bottom: clamp(24px, 2.4vw, 32px);
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255, 255, 255, .75);
  border-radius: 50%;
  font-size: 18px;
  line-height: 1;
  transition: transform .35s var(--ease), background-color .25s ease, border-color .25s ease, color .25s ease;
}
.mode:hover .mode-arrow, .mode:focus-visible .mode-arrow { transform: translate(3px, -3px); background: var(--mint); border-color: var(--mint); color: #06281e; }
[dir="rtl"] .mode-arrow { transform: scaleX(-1); }
[dir="rtl"] .mode:hover .mode-arrow, [dir="rtl"] .mode:focus-visible .mode-arrow { transform: scaleX(-1) translate(3px, -3px); }
.photo-credits { margin: 22px auto 0; max-width: 1400px; font-size: 11px; line-height: 1.6; color: #6c7479; text-align: end; }

/* ---------- Home: how an enquiry works ---------- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
.steps li { position: relative; padding-inline-end: 34px; }
.steps li + li { padding-inline-start: 34px; border-inline-start: 1px solid var(--line); }
.steps .icon { color: var(--green); margin-bottom: 18px; }
.steps b { display: block; font-size: 11px; letter-spacing: .16em; color: var(--green); margin-bottom: 8px; }
.steps h3 { margin-bottom: 8px; }
.steps p { font-size: 14px; margin: 0; }

/* ---------- Home: Jeddah office ---------- */

.about { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.about-tags { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.about-tags li { font-size: 11px; letter-spacing: .12em; padding: 9px 12px; border: 1px solid var(--navy-700); color: #fff; }

/* ---------- Home: logo band ---------- */

.clients { padding-block: 80px; overflow: hidden; }
.clients-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px 40px; padding-inline: 7%; margin-bottom: 30px; }
.clients-head h2 { font-size: clamp(22px, 2vw, 28px); letter-spacing: -.03em; }
.clients-head p { margin: 8px 0 0; max-width: 560px; font-size: 13px; line-height: 1.6; }

/* Without JavaScript, with reduced motion or when paused, the logos are a plain wrapped grid. */
.marquee { padding-inline: 7%; }
.marquee-track { display: flex; flex-wrap: wrap; gap: 14px; }
.logo-set { display: contents; }
.logo-set[aria-hidden="true"] { display: none; }
.logo-tile {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 214px;
  height: 104px;
  background: #fff;
  border: 1px solid var(--line);
}
/* Shown at the files' own 170 × 70 px: never stretched beyond what the source can carry. */
.logo-tile img { display: block; width: 170px; height: 70px; object-fit: contain; }

.js:not(.motion-off) .marquee { padding-inline: 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.js:not(.motion-off) .marquee-track { flex-wrap: nowrap; gap: 0; width: max-content; animation: marquee 70s linear infinite; }
.js:not(.motion-off) .logo-set, .js:not(.motion-off) .logo-set[aria-hidden="true"] { display: flex; gap: 14px; padding-inline-end: 14px; }
.js:not(.motion-off)[dir="rtl"] .marquee-track { animation-name: marquee-rtl; }
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track, .marquee:focus .marquee-track { animation-play-state: paused; }

/* ---------- Enquiry form ---------- */

.quote { display: grid; grid-template-columns: minmax(280px, 5fr) 7fr; gap: 0; padding: 0; background: var(--mist); }
.quote-intro { background: var(--navy-800); color: #fff; padding-block: 96px; padding-inline: 16% 9%; }
.quote-intro .eyebrow { color: var(--mint); }
.quote-intro p { color: var(--on-dark); margin-top: 20px; }
.notice {
  padding: 18px 20px;
  border: 1px solid var(--navy-700);
  border-inline-start: 3px solid var(--mint);
  font-size: 13px;
  line-height: 1.65;
  margin-top: 34px;
  color: #fff;
}
.quote-list { margin-top: 30px; display: grid; gap: 12px; }
.quote-list li { display: flex; gap: 12px; align-items: center; font-size: 13px; color: var(--on-dark); }
.quote-list .icon { width: 28px; height: 28px; color: var(--mint); }

.quote form { padding-block: 80px; padding-inline: 8% 12%; }
fieldset { border: 0; margin: 0 0 22px; padding: 0; min-width: 0; }
legend { padding: 0; font-size: 12px; font-weight: bold; letter-spacing: .04em; margin-bottom: 10px; }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }
label { display: block; font-size: 12px; margin-bottom: 18px; }
label > span { display: block; margin-bottom: 8px; color: #2d3a44; }
input, textarea, select {
  width: 100%;
  border: 1px solid #b9c8c0;
  padding: 12px;
  background: #fff;
  color: var(--ink);
  border-radius: 0;
  transition: border-color .25s ease, box-shadow .25s ease;
}
input:hover, textarea:hover, select:hover { border-color: #7f958a; }
input:focus-visible, textarea:focus-visible, select:focus-visible { border-color: var(--green); outline-offset: 2px; }

/* Transport mode: real radio buttons drawn as a segmented control. */
.mode-switch { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border: 1px solid #b9c8c0; background: #fff; }
.mode-switch label { margin: 0; position: relative; }
.mode-switch input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; padding: 0; cursor: pointer; }
.mode-switch label > span {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  min-height: 48px;
  padding: 8px 6px;
  font-size: 13px;
  text-align: center;
  color: var(--ink);
  transition: background-color .25s ease, color .25s ease;
}
.mode-switch label + label > span { border-inline-start: 1px solid #b9c8c0; }
.mode-switch .icon { width: 22px; height: 22px; }
.mode-switch input:checked + span { background: var(--navy-800); color: #fff; }
.mode-switch input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 2px; }
.mode-switch input:hover:not(:checked) + span { background: var(--mist); }

.dim-row { display: grid; grid-template-columns: 1fr 1.2fr 1.2fr 1.2fr 1fr 44px; gap: 0 10px; align-items: end; }
.dim-row label { margin-bottom: 10px; }
.dim-remove { width: 44px; height: 44px; margin-bottom: 10px; border: 1px solid #b9c8c0; background: #fff; font-size: 18px; line-height: 1; transition: border-color .25s ease, color .25s ease; }
.dim-remove:hover, .dim-remove:focus-visible { border-color: #a23b3b; color: #a23b3b; }
.dim-row:first-child .dim-remove { visibility: hidden; }
.add-piece { border: 0; background: none; padding: 6px 0; font-size: 13px; font-weight: bold; color: var(--green); }
.add-piece:hover, .add-piece:focus-visible { color: var(--green-deep); }
.hint { font-size: 12px; margin: 0 0 16px; }
#form-status { font-size: 13px; min-height: 1.7em; margin: 14px 0 0; color: var(--green-deep); font-weight: bold; }

/* ---------- Contact and footer ---------- */

/* The director's card, after the approved white reference: a logo face and a details face.
   Two faces of one ratio, so the same design can become a printed front and back later. */
.bizcard { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(18px, 3vw, 40px); max-width: 1160px; }
.bizcard-face {
  position: relative;
  overflow: hidden;
  aspect-ratio: 85 / 54;
  container-type: inline-size;
  background: var(--card);
  border: 1px solid var(--sand-line);
  border-radius: 14px;
  box-shadow: 0 26px 50px rgba(21, 27, 43, .12);
}
.bizcard-front { display: grid; place-items: center; }
/* multiply lets the white of the logo file take the milky colour of the card */
.bizcard-front img { display: block; width: auto; height: 82%; max-width: 86%; object-fit: contain; mix-blend-mode: multiply; }
/* cqw below is a share of the face's own width, so the card keeps its proportions at every size */
.bizcard-body { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 8cqw; height: 100%; padding-inline: 9cqw 34cqw; color: var(--ink); }
.bizcard-art { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[dir="rtl"] .bizcard-art { transform: scaleX(-1); }
.bizcard-id { margin: 0; line-height: 1.15; color: var(--ink); }
.bizcard-id strong { display: block; font-size: clamp(22px, 6.6cqw, 42px); letter-spacing: -.03em; white-space: nowrap; }
.bizcard-id span { display: block; margin-top: .55em; font-size: clamp(14px, 3.3cqw, 20px); font-weight: bold; letter-spacing: .2em; color: var(--green); }
.bizcard-lines { display: grid; gap: 2.8cqw; }
.bizcard-lines li { display: flex; align-items: center; gap: 2.6cqw; font-size: clamp(15px, 3.3cqw, 19px); line-height: 1.3; color: var(--ink); }
.bizcard-lines svg { flex: none; width: 1.35em; height: 1.35em; fill: none; stroke: var(--green); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.bizcard-lines a { text-decoration: underline; text-decoration-color: rgba(0, 132, 97, .5); text-underline-offset: 4px; transition: color .25s ease; }
.bizcard-lines a:hover, .bizcard-lines a:focus-visible { color: var(--green-deep); }

/* Office details that are still to be confirmed stay outside the card. */
.contact-status { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; max-width: 1160px; margin-top: 40px; border-top: 1px solid var(--sand-line); }
.contact-status li { display: grid; gap: 6px; align-content: start; padding-top: 18px; font-size: 14px; line-height: 1.5; }
.contact-status b { font-size: 11px; letter-spacing: .12em; color: var(--muted); }
.contact-status small { display: block; font-size: 12px; color: var(--muted); margin-top: 3px; }

footer {
  background: var(--navy-900);
  color: #fff;
  padding: 44px 7% 34px;
  display: grid;
  grid-template-columns: 1.3fr 1fr 1fr auto;
  gap: 30px 40px;
  align-items: start;
  font-size: 13px;
}
footer strong { font-size: 19px; }
footer small { display: block; font-size: 9px; letter-spacing: .22em; margin-top: 5px; color: var(--on-dark); }
footer ul { display: grid; gap: 9px; }
footer a { color: var(--on-dark); transition: color .25s ease; }
footer a:hover, footer a:focus-visible { color: #fff; }
footer .foot-note { color: #9fb1c4; font-size: 12px; line-height: 1.6; margin: 14px 0 0; }
.foot-tools { display: grid; gap: 12px; justify-items: end; }

/* ---------- Service pages: tiles, icon rows, memo lists ---------- */

.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.tiles--3 { grid-template-columns: repeat(3, 1fr); }
.tile { background: var(--mist); padding: 26px 24px 28px; border-top: 3px solid var(--green); }
.band--sand .tile, .band--mist .tile { background: #fff; }
.band--navy .tile { background: var(--navy-700); border-top-color: var(--mint); }
.tile .icon { color: var(--green); margin-bottom: 18px; }
.band--navy .tile .icon { color: var(--mint); }
.tile h3 { font-size: 18px; margin-bottom: 8px; }
.tile p { font-size: 14px; line-height: 1.6; margin: 0; }
.tile--request { background: none !important; border: 1px dashed #9db0a6; border-top: 3px dashed #9db0a6; }
.tile--request .icon { color: var(--muted); }
.tag { display: inline-block; font-size: 10px; letter-spacing: .12em; font-weight: bold; color: var(--green-deep); border: 1px solid currentColor; padding: 4px 7px; margin-bottom: 14px; }
.band--navy .tag { color: var(--mint); }

.icon-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; border-top: 1px solid var(--sand-line); border-bottom: 1px solid var(--sand-line); }
.icon-row li { padding: 30px 26px; text-align: start; }
.icon-row li + li { border-inline-start: 1px solid var(--sand-line); }
.icon-row .icon { width: 56px; height: 56px; color: var(--ink); margin-bottom: 14px; }
.icon-row h3 { font-size: 17px; margin-bottom: 6px; }
.icon-row p { font-size: 13px; line-height: 1.55; margin: 0; }

.memo { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.memo li { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px; border: 1px solid var(--navy-700); font-size: 13px; line-height: 1.4; color: #fff; }
.memo .icon { width: 30px; height: 30px; color: var(--mint); }
.memo small { color: var(--on-dark); font-size: 12px; }
.band:not(.band--navy) .memo li { border-color: var(--line); color: var(--ink); background: #fff; }
.band:not(.band--navy) .memo .icon { color: var(--green); }
.band:not(.band--navy) .memo small { color: var(--muted); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 28px; margin-top: 40px; }
.cta-row p { margin: 0; font-size: 13px; max-width: 520px; }

/* ---------- Service pages: four stages ----------
   Default: four consecutive blocks, each a picture with its text on it. That is what shows without
   JavaScript, with motion paused or reduced, or on a screen too short for the scene.
   app.js adds .is-pinned when motion is allowed and everything fits: the block then becomes one full-screen
   scene, pinned for a short stretch, whose background picture cross-fades together with the text as the
   page scrolls. Nothing is hidden until an animation runs, and nothing moves on a timer. */

.story { position: relative; padding: 96px 7%; background: var(--navy-800); color: #fff; }
.story .eyebrow { color: var(--mint); }
.story-head { max-width: 640px; margin-bottom: 34px; }
.story-nav { display: none; }

.story-steps { display: grid; gap: 22px; }
.story-step { position: relative; display: flex; align-items: flex-end; min-height: clamp(340px, 46vw, 620px); overflow: hidden; background: var(--navy-900); }
.story-frame { position: absolute; inset: 0; margin: 0; }
.story-frame img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--pos, 70% 50%); }
/* Arabic: the text sits on the right, so the scene is turned round. A frame that carries the logo is never
   mirrored: it has its own turned copy (.story-step--fixed), with the mark placed again the right way. */
[dir="rtl"] .story-step:not(.story-step--fixed) .story-frame img { transform: scaleX(-1); }
[dir="rtl"] .story-step--fixed .story-frame img { object-position: var(--pos-ar, 30% 50%); }
.story-frame::after {   /* local darkening on the calm side, where the text sits */
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(4, 16, 32, .86) 0%, rgba(4, 16, 32, .7) 24%, rgba(4, 16, 32, .34) 46%, rgba(4, 16, 32, 0) 64%),
    linear-gradient(0deg, rgba(4, 16, 32, .5) 0%, rgba(4, 16, 32, 0) 40%);
}
[dir="rtl"] .story-frame::after { transform: scaleX(-1); }
.story-frame figcaption { position: absolute; z-index: 1; inset-inline-end: 14px; bottom: 12px; padding: 5px 8px; line-height: 1; background: rgba(2, 12, 28, .62); }
.slot-note { font-size: 10px; line-height: 1.5; letter-spacing: .04em; color: #fff; }
.story-text { position: relative; z-index: 1; width: min(48%, 500px); padding: clamp(24px, 4vw, 54px); text-shadow: 0 1px 18px rgba(2, 10, 24, .55); }
.story-text b { display: block; font-size: 11px; letter-spacing: .16em; color: var(--mint); margin-bottom: 12px; }
.story-text h3 { font-size: clamp(24px, 2.4vw, 34px); margin-bottom: 12px; }
.story-text p { margin: 0; color: #e6edf4; }
.story > .note { margin-top: 30px; border-color: var(--mint); color: var(--on-dark); }

/* The pinned full-screen scene */
.story.is-pinned { padding: 0 0 56px; }
.story.is-pinned .story-track { height: calc(var(--story-room) + var(--story-len) * 4); }
.story.is-pinned .story-stage {
  position: sticky;
  top: var(--hh-c);
  height: var(--story-room);
  overflow: hidden;
  overflow: clip;
  display: flex;
  flex-direction: column;
  background: var(--navy-900);
}
.story.is-pinned .story-head { position: relative; z-index: 2; max-width: none; margin: 0; padding: clamp(24px, 6vh, 60px) 7% 0; text-shadow: 0 1px 18px rgba(2, 10, 24, .55); pointer-events: none; }
.story.is-pinned .story-head .eyebrow { margin-bottom: 12px; }
.story.is-pinned .story-head h2 { font-size: clamp(26px, min(3vw, 5.4vh), 44px); }
.story.is-pinned .story-steps { position: absolute; inset: 0; display: block; }
/* Cross-fade: the new stage fades in on top of the old one, which stays solid underneath until the
   fade has finished. The background therefore never shows through, in either scroll direction. */
.story.is-pinned .story-step { position: absolute; inset: 0; min-height: 0; display: block; opacity: 0; pointer-events: none; transition: opacity 0s linear .6s; }
.story.is-pinned .story-step.is-active { z-index: 1; opacity: 1; pointer-events: auto; transition: opacity .6s var(--ease); }
.story.is-pinned .story-text {
  position: absolute;
  inset-inline-start: 7%;
  bottom: calc(var(--story-nav-h, 76px) + clamp(20px, 5vh, 56px));
  width: min(42%, 480px);
  padding: 0;
}
.story.is-pinned .story-text > * { transform: translate3d(0, 10px, 0); transition: transform .6s var(--ease); }
.story.is-pinned .story-step.is-active .story-text > * { transform: none; }
.story.is-pinned .story-frame figcaption { inset-inline-end: 7%; bottom: calc(var(--story-nav-h, 76px) + 14px); }
.story.is-pinned .story-nav {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  margin-top: auto;
  padding: 0 7%;
  background: linear-gradient(0deg, rgba(3, 13, 28, .92), rgba(3, 13, 28, .7));
  border-top: 1px solid rgba(255, 255, 255, .2);
  --sp: 0;
}
.story.is-pinned .story-nav::after {   /* progress through the four stages, driven by the scroll position */
  content: "";
  position: absolute;
  inset: -1px 7% auto;
  height: 2px;
  background: var(--mint);
  transform-origin: 0 50%;
  transform: scaleX(var(--sp));
}
[dir="rtl"] .story.is-pinned .story-nav::after { transform-origin: 100% 50%; }
.story-tab {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-height: 64px;
  padding: 20px 14px 20px 0;
  border: 0;
  background: none;
  text-align: start;
  font-size: 13px;
  line-height: 1.35;
  color: #b9c7d6;
  transition: color .25s ease;
}
.story-tab b { font-size: 11px; letter-spacing: .14em; color: inherit; }
.story-tab:hover, .story-tab:focus-visible, .story-tab.is-active { color: #fff; }
.story-tab.is-active b { color: var(--mint); }
.story-tab:focus-visible { outline-color: #fff; outline-offset: -4px; }
.story.is-pinned > .note { margin: 26px 7% 0; }
.motion-off .story-step, .motion-off .story-text > * { transition: none !important; }

/* ---------- Service pages: route strips and diagrams ---------- */

.route { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; align-items: start; gap: 0; }
.route-node { text-align: center; padding: 0 12px; }
.route-node .icon { width: 64px; height: 64px; padding: 14px; border-radius: 50%; background: var(--mist); color: var(--green); margin-bottom: 16px; }
.band--navy .route-node .icon { background: var(--navy-700); color: var(--mint); }
.band--sand .route-node .icon { background: #fff; }
.route-node--hub .icon, .band--sand .route-node--hub .icon { background: var(--green); color: #fff; }
.band--navy .route-node--hub .icon { background: var(--mint); color: #06281e; }
.route-node h3 { font-size: 18px; margin-bottom: 6px; }
.route-node p { font-size: 13px; line-height: 1.55; margin: 0 auto; max-width: 250px; }
.route-link { align-self: start; width: clamp(40px, 9vw, 150px); margin-top: 31px; border-top: 2px dashed #9db0a6; position: relative; }
.band--navy .route-link { border-color: #5f7f9c; }
.route-link::after { content: ""; position: absolute; inset-inline-end: -2px; top: -7px; border: 6px solid transparent; border-inline-start-color: #9db0a6; }
.band--navy .route-link::after { border-inline-start-color: #5f7f9c; }

.split { display: grid; grid-template-columns: 1fr 1fr; gap: 70px; align-items: center; }
/* Three airline marks of equal visual weight. --lw sets each logo's width so that a long wordmark and a
   compact emblem read as the same size. The tiles are not links: the hover is a quiet visual response only. */
.airlines { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2vw, 26px); margin-top: 48px; }
.airline {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 136px;
  padding: 28px 22px;
  background: #fff;
  border: 1px solid var(--line);
  transition: border-color .3s ease, box-shadow .3s ease, transform .3s var(--ease);
}
.airline::before {   /* thin green accent that runs along the top on hover */
  content: "";
  position: absolute;
  top: -1px;
  inset-inline-start: -1px;
  width: 44px;
  height: 2px;
  background: var(--green);
  transition: width .45s var(--ease);
}
.airline:hover { border-color: #b4cdc1; box-shadow: 0 16px 34px rgba(21, 27, 43, .08); transform: translateY(-2px); }
.airline:hover::before { width: calc(100% + 2px); }
.airline img { display: block; width: min(var(--lw, 200px), 86%); height: auto; }
.airlines + .note { margin-top: 22px; }
.hub { display: block; width: 100%; height: auto; max-width: 560px; margin-inline: auto; }
.hub text { font-family: Arial, Tahoma, sans-serif; font-size: 13px; fill: var(--muted); }
.hub .hub-name { font-size: 17px; font-weight: bold; fill: var(--ink); }
.diagram-note { font-size: 12px; text-align: center; margin: 10px 0 0; }

.loads { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.load { padding: 34px 34px 38px; background: var(--mist); border-top: 3px solid var(--green); }
.load--alt { background: var(--sand); border-top-color: var(--ink); }
.load svg { display: block; width: 100%; max-width: 380px; height: auto; margin-bottom: 26px; }
.load h3 { font-size: 26px; letter-spacing: -.03em; margin-bottom: 4px; }
.load .load-sub { font-size: 12px; letter-spacing: .12em; color: var(--muted); margin-bottom: 14px; }
.load p { font-size: 15px; margin: 0; }

/* ---------- About: the cargo leads the story downwards ----------
   Default = seven ordinary blocks, a picture and a text each.  That is the page without JavaScript,
   with motion paused or reduced, and on screens too small for the scene.
   about.js adds .is-live and turns the same markup into one pinned scene driven by the scroll position
   (.is-tall = text above the scene, for phones and upright tablets).  Layers named .tl-* are built there. */

.tale { position: relative; background: var(--sand); color: var(--ink); }
.tale-scene, .tale-rail { display: none; }
.tale-chapter {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: 30px 7%;
  padding: 76px 7%;
  border-top: 1px solid var(--sand-line);
}
.tale-chapter:first-child { border-top: 0; }
.tale-chapter:nth-child(even) .tale-figure { order: 2; }
.tale-figure { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 18px 3%; margin: 0; min-width: 0; }
.tale-figure img { display: block; width: auto; height: auto; max-width: 100%; max-height: 380px; }
.tale-figure--trio img { max-width: 47%; max-height: 180px; }
.tale-copy { max-width: 540px; }
.tale-no { display: block; font-size: 11px; letter-spacing: .16em; color: var(--green); margin-bottom: 18px; }
.tale-copy .eyebrow { margin-bottom: 14px; color: var(--muted); }
.tale-copy h1, .tale-copy h2 { font-size: clamp(30px, 3.4vw, 50px); letter-spacing: -.04em; line-height: 1.1; }
.tale-copy h1 + p, .tale-copy h2 + p { margin-top: 18px; }
.tale-copy > p:last-child { margin-bottom: 0; }

/* What to send: a plain card here, the sheet on the clipboard in the scene. */
.tale-sheet { margin: 24px 0 18px; padding: 22px 24px 10px; background: #fff; border: 1px solid var(--sand-line); border-top: 3px solid var(--green); }
.tale-sheet-title { font-size: 11px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; font-weight: bold; color: var(--green); margin: 0 0 14px; }
.tale-group { margin-bottom: 14px; }
.tale-group > b { display: block; font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.tale-group li { font-size: 15px; line-height: 1.35; padding: 7px 0; border-bottom: 1px solid var(--line); }
.tale-sheet-note { font-size: 13px; line-height: 1.6; }

.tale-options { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.tale-options li { display: inline-flex; align-items: center; gap: 9px; padding: 8px 14px; font-size: 13px; font-weight: bold; background: #fff; border: 1px solid var(--sand-line); border-top: 2px solid var(--green); }
.tale-options b { font-size: 11px; letter-spacing: .08em; color: var(--green); }

.tale-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 22px 7% 46px; }
.tale-note { font-size: 12px; line-height: 1.5; margin: 0; }

.tale-cta .band-head { margin-bottom: 0; }
.tale-cta .band-head p:last-child { margin: 26px 0 0; }

/* ----- the scene ----- */

.tale.is-live .tale-track { height: var(--tale-h); }
.tale.is-live .tale-stage {
  position: sticky;
  top: var(--hh-c);
  height: var(--tale-room);
  overflow: hidden;
  background: radial-gradient(115% 85% at 56% 58%, #fffdf7 0, var(--sand) 58%, #ebe3d2 100%);
}
[dir="rtl"] .tale.is-live .tale-stage { background: radial-gradient(115% 85% at 44% 58%, #fffdf7 0, var(--sand) 58%, #ebe3d2 100%); }
.tale.is-live .tale-scene { display: block; position: absolute; inset: 0; pointer-events: none; }
.tale.is-live .tale-figure { display: none; }
.tale.is-live .tale-chapters { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.tale.is-live .tale-chapter {
  position: absolute;
  display: block;
  inset-inline-start: 6.5%;
  top: 0;
  bottom: 0;
  width: min(26%, 390px);
  padding: 0;
  border: 0;
  opacity: 0;
}
.tale.is-live .tale-copy { position: absolute; inset-inline: 0; top: 46%; transform: translateY(-50%); max-width: none; }
.tale.is-live .tale-copy h1, .tale.is-live .tale-copy h2 { font-size: clamp(26px, min(3.1vw, 5.6vh), 46px); }
.tale.is-live .tale-copy p { font-size: clamp(14px, 1.15vw, 16px); line-height: 1.65; }
.tale.is-live .tale-copy .eyebrow { font-size: 11px; }
.tale.is-live .tale-copy .tale-sheet-note { font-size: 13px; line-height: 1.55; margin-top: 14px; padding-inline-start: 12px; border-inline-start: 2px solid var(--green); }

/* Phones: the text has its own opaque band above the scene and the controls one below it.
   Whatever leaves or arrives slides under these bands and never crosses the words. */
.tale.is-tall .tale-stage { background: linear-gradient(180deg, #f3eee3 0, #f3eee3 34%, #fdfaf4 60%, #f3eee3 88%, #f3eee3 100%); }
.tale.is-tall .tale-chapters::before, .tale.is-tall .tale-chapters::after { content: ""; position: absolute; left: 0; right: 0; }
.tale.is-tall .tale-chapters::before { top: 0; height: var(--tale-veil, 0px); background: linear-gradient(180deg, #f3eee3 0, #f3eee3 calc(100% - 26px), rgba(243, 238, 227, 0) 100%); }
.tale.is-tall .tale-chapters::after { bottom: 0; height: calc(var(--tale-gap, 0px) + 96px); background: linear-gradient(0deg, #f3eee3 0, #f3eee3 calc(100% - 24px), rgba(243, 238, 227, 0) 100%); }
.tale.is-tall .tale-chapter { inset-inline: 6%; width: auto; }
.tale.is-tall .tale-copy { top: 14px; transform: none; }
.tale.is-tall .tale-no { display: none; }
.tale.is-tall .tale-copy .eyebrow { margin-bottom: 8px; }
.tale.is-tall .tale-copy h1, .tale.is-tall .tale-copy h2 { font-size: clamp(23px, 6.4vw, 34px); }
.tale.is-tall .tale-copy h1 + p, .tale.is-tall .tale-copy h2 + p { margin-top: 10px; }
.tale.is-tall .tale-copy p { font-size: 14px; line-height: 1.5; margin-bottom: .5em; }
.tale.is-tall .tale-copy .tale-sheet-note { font-size: 12px; line-height: 1.45; margin-top: 8px; }

/* chapter buttons */
.tale.is-live .tale-rail {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  position: absolute;
  z-index: 3;
  inset-inline-end: 20px;
  top: 50%;
  transform: translateY(-50%);
}
.tale-dot { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 6px; background: none; border: 0; font-size: 11px; letter-spacing: .1em; color: #6b7780; }
.tale-dot span { order: 1; max-width: 0; overflow: hidden; white-space: nowrap; opacity: 0; transition: opacity .25s ease, max-width .3s var(--ease); }
.tale-dot b { order: 2; }
.tale-dot::after { content: ""; order: 3; width: 14px; height: 2px; background: currentColor; opacity: .45; transition: width .3s var(--ease), opacity .25s ease, background-color .25s ease; }
.tale-dot:hover, .tale-dot:focus-visible, .tale-dot[aria-current] { color: var(--ink); }
.tale-dot:hover span, .tale-dot:focus-visible span, .tale-dot[aria-current] span { max-width: 150px; opacity: 1; }
.tale-dot[aria-current]::after { width: 34px; opacity: 1; background: var(--green); }
.tale.is-tall .tale-rail { flex-direction: row; align-items: center; inset-inline-start: calc(6% - 6px); inset-inline-end: auto; top: auto; bottom: calc(var(--tale-gap, 0px) + 10px); transform: none; }
.tale.is-tall .tale-dot { justify-content: center; min-width: 27px; min-height: 40px; padding: 6px 3px; }
.tale.is-tall .tale-dot span { position: absolute; width: 1px; height: 1px; max-width: none; clip-path: inset(50%); }
.tale.is-tall .tale-dot::after { display: none; }
.tale.is-tall .tale-dot b { padding-bottom: 4px; border-bottom: 2px solid transparent; }
.tale.is-tall .tale-dot[aria-current] b { border-bottom-color: var(--green); }

.tale.is-live .tale-meta {
  position: absolute;
  z-index: 3;
  inset-inline-start: 6.5%;
  bottom: calc(var(--tale-gap, 0px) + 22px);
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
.tale.is-live .tale-note { font-size: 11px; }
.tale.is-tall .tale-meta { inset-inline: 6%; bottom: calc(var(--tale-gap, 0px) + 10px); align-items: flex-end; gap: 4px; }
.tale.is-tall .tale-note { align-self: stretch; font-size: 10.5px; line-height: 1.3; }
.tale.is-tall .tale-meta .motion-toggle { min-height: 40px; }

/* ----- scene layers (all built and moved by about.js) ----- */

.tl { position: absolute; left: 0; top: 0; transform-origin: 0 0; visibility: hidden; }
.tl-in { position: absolute; }
.tl-in > img { display: block; position: absolute; left: 0; top: 0; max-width: none; user-select: none; -webkit-user-drag: none; }
.tl-in > svg, .tl-lines svg { display: block; position: absolute; left: 0; top: 0; overflow: visible; }
.tl-sky, .tl-lines, .tl-opts { position: absolute; inset: 0; }
.tl-wall { position: absolute; }
.tl-sky, .tl-wall { visibility: hidden; }
.tl-sky { background: linear-gradient(180deg, #b7dbf5 0, #d6eaf9 50%, #ecf3f2 84%, rgba(245, 241, 232, 0) 100%); }
.tl-cloud svg { filter: blur(2.5px); opacity: .97; }
.tl-lines path { fill: none; stroke: var(--navy-700); stroke-width: 1.5; stroke-linecap: round; }
.tl-lines circle { fill: var(--green); }

/* carton: number on the green label (the label itself is part of the picture), soft contact shadow */
.tl-shadow { position: absolute; left: 10px; top: 850px; width: 1360px; height: 330px; background: radial-gradient(closest-side, rgba(21, 27, 43, .34), rgba(21, 27, 43, 0)); }
.tl-label {
  position: absolute; left: 143px; top: 330px; width: 252px; height: 158px;
  display: flex; align-items: center; justify-content: center;
  transform: skewY(5.7deg); transform-origin: 0 0;
  font: bold 96px/1 Arial, sans-serif; letter-spacing: .03em; color: #fff;
}

/* landing pad */
.tl-pad-base { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(ellipse at 50% 34%, #fff 0, #fbf7ee 52%, #e9e1cf 100%); border: 2px solid #fff; box-shadow: 0 20px 0 -3px #d5ccb6, 0 58px 60px -22px rgba(21, 27, 43, .3); }
.tl-pad-ring, .tl-pad-pulse { position: absolute; inset: 14px 56px; border-radius: 50%; border: 3px solid var(--green); opacity: 0; }

/* clipboard: the real list, laid on the sheet */
.tl-paper { position: absolute; left: 0; top: 0; width: 600px; height: 930px; transform-origin: 0 0; }
.tale.is-live .tale-sheet { margin: 0; padding: 0; background: none; border: 0; font-size: 42px; color: var(--ink); }
.tale.is-live .tale-sheet-title { font-size: .78em; margin: 0 0 .7em; padding-bottom: .5em; border-bottom: .16em solid var(--green); }
.tale.is-live .tale-group { margin: 0 0 .5em; }
.tale.is-live .tale-group > b { font-size: .7em; margin: 0; }
.tale.is-live .tale-group li { font-size: 1em; line-height: 1.22; padding: .22em 0; border-bottom: 0; }
.tale.is-live .tale-sheet.is-tight .tale-group > b { display: none; }
.tale.is-live .tale-sheet.is-tight .tale-group { margin: 0; }
.tale.is-live .tale-sheet.is-paged .tale-fields { position: relative; }
.tale.is-live .tale-sheet.is-paged .tale-group { position: absolute; inset-inline: 0; top: 0; }

/* route names at the end of the three options */
.tale.is-live .tale-options { display: block; margin: 0; }
.tale.is-live .tale-options li { position: absolute; left: 0; top: 0; opacity: 0; padding: 6px 12px; font-size: 12px; white-space: nowrap; background: rgba(255, 255, 255, .94); transition: border-color .3s ease, color .3s ease; }
.tale.is-live .tale-options li.is-on { border-color: var(--green); color: var(--green-deep); }
.tale.is-tall .tale-options li { padding: 5px 9px; font-size: 11px; gap: 6px; }

/* truck: roller shutter inside the door opening, then the same surface fills the view */
.tl-shutter { position: absolute; left: 208px; top: 206px; width: 826px; height: 688px; overflow: hidden; }
.tl-shutter i { position: absolute; inset: 0; --sl: 38px; box-shadow: inset 16px 0 18px -12px rgba(20, 28, 36, .5), inset -16px 0 18px -12px rgba(20, 28, 36, .5); }
.tl-shutter i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 30px; background: linear-gradient(180deg, #7b838a 0, #3a4148 100%); }
.tl-shutter i, .tl-slats {
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, .34) 38%, rgba(255, 255, 255, 0) 70%),
    repeating-linear-gradient(180deg, #eff1f2 0, #dde0e2 calc(var(--sl) * .2), #c8ccd0 calc(var(--sl) * .7), #a1a7ac calc(var(--sl) * .9), #7d848a var(--sl));
}
/* the surface fades out before it reaches the text column (or, on phones, the text above and the controls below) */
.tl-wall { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%); }
.tale.is-tall .tl-wall { -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 6%, #000 94%, transparent 100%); }
.tl-slats { position: absolute; left: 0; right: 0; height: 160%; --sl: 20px; }
.tl-wall--curtain {
  background:
    linear-gradient(180deg, rgba(8, 40, 29, 0) 0, rgba(8, 40, 29, 0) 86%, rgba(8, 40, 29, .34) 86.4%, rgba(8, 40, 29, .12) 100%),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .09) 0, rgba(255, 255, 255, 0) 10px, rgba(0, 0, 0, 0) 96px, rgba(4, 30, 21, .16) 118px, rgba(255, 255, 255, .09) 124px),
    linear-gradient(100deg, #2f6f57 0, #24614b 48%, #1c5540 100%);
}

/* air cargo container: the curtain that closes the opening */
.tl-veil {
  position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0) 819px, #0d6c50 819px, #0a5741 847px, rgba(0, 0, 0, 0) 847px),
    linear-gradient(90deg, rgba(0, 0, 0, 0) 1205px, #0d6c50 1205px, #0a5741 1233px, rgba(0, 0, 0, 0) 1233px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .26) 0, rgba(255, 255, 255, 0) 70px, rgba(40, 46, 54, .07) 130px, rgba(255, 255, 255, .26) 190px),
    linear-gradient(180deg, #c6c8cb 0, #dadbdd 26%, #cdcfd2 100%);
}
.tl-hem { position: absolute; left: 0; top: 0; height: 18px; transform-origin: 0 0; background: linear-gradient(180deg, #9a9ea3 0, #5e646b 100%); }

/* sea container: two door leaves, slings */
.tl-leaf { position: absolute; left: 0; top: 0; width: 330px; height: 880px; max-width: none; transform-origin: 0 0; }
.tl-slings line, .tl-slings path { fill: none; stroke: var(--navy-700); stroke-width: var(--lw, 6px); stroke-linecap: round; }
.tl-slings .is-far { stroke-opacity: .5; }
.tl-slings rect { fill: var(--navy-800); }
.tl-slings circle { fill: var(--mint); }
.tl-slings .lug { fill: var(--navy-700); }

/* aircraft: hold door */
.tl-hatch .hole { fill: url(#kl-hold); }
.tl-hatch .rim { fill: none; stroke: var(--green); stroke-width: 3.5; stroke-linejoin: round; }

/* ship: water behind and in front of the hull */
.tl-seaback { position: absolute; left: -500px; top: 250px; width: 2800px; height: 620px; border-radius: 50%; transform: rotate(6deg); background: radial-gradient(closest-side, rgba(38, 122, 150, .6) 0, rgba(38, 122, 150, .34) 55%, rgba(38, 122, 150, 0) 100%); }
.tl-water { -webkit-mask-image: radial-gradient(48% 74% at 50% 46%, #000 62%, transparent 100%); mask-image: radial-gradient(48% 74% at 50% 46%, #000 62%, transparent 100%); }
.tl-water .waves { fill: none; stroke: #fff; stroke-opacity: .32; stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 46 240; }
.tl-ground { position: absolute; left: -40px; top: 690px; width: 1700px; height: 170px; transform: rotate(2.9deg); border-radius: 50%; background: radial-gradient(closest-side, rgba(21, 27, 43, .3), rgba(21, 27, 43, 0)); }
.tl-road svg { -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); mask-image: linear-gradient(90deg, transparent 0, #000 14%, #000 86%, transparent 100%); }
.tl-road line { stroke: #b3a88f; stroke-width: 5; stroke-linecap: round; stroke-dasharray: 120 100; }

[dir="rtl"] .tale-no, [dir="rtl"] .tale-sheet-title, [dir="rtl"] .tale-group > b, [dir="rtl"] .tale-options b, [dir="rtl"] .tale-dot { letter-spacing: 0; }
[dir="rtl"] .tale-copy h1, [dir="rtl"] .tale-copy h2 { letter-spacing: 0; line-height: 1.3; }
[dir="rtl"] .tale.is-live .tale-group li { line-height: 1.38; }
[dir="rtl"] .tale-dot { font-size: 12px; }

@media (min-width: 600px) {
  /* upright tablets: the same layout as phones, with a comfortable measure and larger type */
  .tale.is-tall .tale-copy { max-width: 620px; }
  .tale.is-tall .tale-copy h1, .tale.is-tall .tale-copy h2 { font-size: 38px; }
  .tale.is-tall .tale-copy p { font-size: 16px; line-height: 1.55; }
  .tale.is-tall .tale-copy .tale-sheet-note { font-size: 13px; }
  .tale.is-tall .tale-note { font-size: 11px; }
  .tale.is-tall .tale-dot { min-width: 34px; font-size: 12px; }
}
@media (max-width: 1000px) {
  .tale-chapter { padding: 60px 7%; }
}
@media (max-width: 760px) {
  .tale-chapter, .tale-chapter:first-child { grid-template-columns: minmax(0, 1fr); gap: 26px; padding: 46px 6%; }
  .tale-chapter:nth-child(even) .tale-figure { order: 0; }
  .tale-figure img { max-height: 250px; }
  .tale-figure--trio img { max-height: 120px; }
  .tale-meta { padding: 18px 6% 36px; }
}
@media (prefers-reduced-motion: reduce) {
  .tale-dot span, .tale-dot::after, .tale-options li { transition: none !important; }
}
@media print {
  .tale.is-live .tale-track { height: auto; }
  .tale.is-live .tale-stage { position: static; height: auto; }
}

/* ---------- Scroll reveal ----------
   .reveal-on is added by app.js only after the observer is running, so nothing is hidden
   when JavaScript, IntersectionObserver or motion is unavailable. */
.reveal-on [data-reveal] {
  opacity: 0;
  transform: translate3d(0, 20px, 0);
  transition: opacity .7s var(--ease), transform .7s var(--ease);
  transition-delay: calc(var(--i, 0) * 100ms);
}
.reveal-on [data-reveal].is-in { opacity: 1; transform: none; }

/* ---------- Arabic ---------- */

:lang(ar) body, :lang(ar) button, :lang(ar) input, :lang(ar) textarea, :lang(ar) select {
  font-family: system-ui, -apple-system, "Segoe UI", "Noto Sans Arabic", Tahoma, Arial, sans-serif;
}
[dir="rtl"] h1, [dir="rtl"] h2 { letter-spacing: 0; line-height: 1.35; }
[dir="rtl"] h3, [dir="rtl"] .mode h3, [dir="rtl"] .load h3 { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .scroll-cue, [dir="rtl"] .scene-caption, [dir="rtl"] .motion-toggle, [dir="rtl"] .draft,
[dir="rtl"] .iata span, [dir="rtl"] .mode-no, [dir="rtl"] .tag, [dir="rtl"] .about-tags li, [dir="rtl"] .contact-status b,
[dir="rtl"] .steps b, [dir="rtl"] .story-text b, [dir="rtl"] .story-tab b, [dir="rtl"] legend, [dir="rtl"] .load .load-sub,
[dir="rtl"] .bizcard-id span, [dir="rtl"] .slot-note { letter-spacing: 0; }
[dir="rtl"] .eyebrow, [dir="rtl"] .scroll-cue, [dir="rtl"] .scene-caption, [dir="rtl"] .motion-toggle, [dir="rtl"] .mode-no,
[dir="rtl"] .steps b, [dir="rtl"] .story-text b, [dir="rtl"] .contact-status b, [dir="rtl"] .tag, [dir="rtl"] .slot-note { font-size: 12px; }
[dir="rtl"] .story-tab { padding: 20px 0 20px 14px; }

/* ---------- Narrower desktop and tablet: navigation moves into the menu ---------- */

@media (max-width: 1200px) {
  .js .menu { display: block; }
  .js nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    gap: 0;
    padding: 6px 6% 22px;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: 0 22px 34px rgba(21, 27, 43, .12);
    font-size: 16px;
    max-height: calc(100vh - var(--hh-c));
    overflow-y: auto;
  }
  .js nav.open { display: flex; }
  .js nav a:not(.button) { padding: 15px 0; border-bottom: 1px solid var(--line); background: none; }
  /* No JavaScript: keep the links visible instead of hiding them behind a menu button. */
  html:not(.js) .site-header { flex-wrap: wrap; height: auto; padding-block: 10px; }
  html:not(.js) nav { order: 3; flex: 1 0 100%; flex-wrap: wrap; gap: 4px 16px; font-size: 13px; }
  .scene-caption { max-width: 210px; }
}

@media (max-width: 1000px) {
  .scroll-cue { display: none; }
  .band, .story { padding: 72px 6%; }
  .band-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; }
  .about, .split { grid-template-columns: 1fr; gap: 40px; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
  .icon-row { grid-template-columns: repeat(2, 1fr); }
  .icon-row li:nth-child(3) { border-inline-start: 0; }
  .icon-row li:nth-child(n + 3) { border-top: 1px solid var(--sand-line); }
  .quote { grid-template-columns: 1fr; }
  .quote-intro { padding: 64px 6%; }
  .quote form { padding: 56px 6% 64px; }
  .story.is-pinned { padding: 0 0 48px; }
  .story-text { width: min(62%, 480px); }
  .story.is-pinned .story-text { width: min(58%, 460px); }
  .contact-status { grid-template-columns: 1fr; }
  .contact-status li { padding-block: 16px; border-bottom: 1px solid var(--sand-line); }
  .contact-status li:last-child { border-bottom: 0; }
  .mode h3 { font-size: 22px; }
  .mode-body { padding-inline-end: calc(var(--slant) + 10px); }
  .mode-arrow { top: 16px; bottom: auto; inset-inline-end: 16px; width: 38px; height: 38px; font-size: 16px; }
  footer { grid-template-columns: 1fr 1fr; }
  .foot-tools { justify-items: start; }
  .hero { --pin: 26vh; }
  @supports (height: 1svh) { .hero { --pin: 26svh; } }
}

/* ---------- Stacked framing of the home hero: phones and portrait tablets ---------- */

@media (max-width: 650px), (max-width: 900px) and (orientation: portrait) {
  .scene-stage { justify-content: flex-start; background: linear-gradient(180deg, #03122a 0%, #06203f 58%, #0c2f58 100%); }
  .scene::after { display: none; }
  .scene-photo {
    top: auto;
    bottom: 0;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 17%);
    mask-image: linear-gradient(to bottom, transparent 0%, #000 17%);
  }
  .scene-photo img { transform-origin: 62% 38%; transform: scale(calc(1 + var(--p) * .05)); }
  .scene-scrim { display: none; }
  .hero-copy { flex: 1 0 auto; display: flex; flex-direction: column; justify-content: center; width: auto; margin-inline: 6%; padding-block: 26px 12px; }
  .scene-reserve { display: block; flex: 0 0 auto; min-height: calc(var(--r-desk, 56.28) * .9vw); }
  /* Cover hero, stacked: the phone crop shows the whole aircraft across the width; the backdrop above it
     continues the sky, so the first screen still reads as one picture with the text over it. */
  .hero--cover .scene-stage {
    justify-content: flex-start;
    background:
      radial-gradient(90% 46% at 100% 74%, rgba(var(--glow, 222, 160, 104), var(--glow-a, 0)), rgba(var(--glow, 222, 160, 104), 0) 70%),
      linear-gradient(180deg, var(--sky-a, #04122b) 0%, var(--sky-b, #0d2f5e) 52%, var(--sky-c, #23568c) 100%);
  }
  [dir="rtl"] .hero--cover .scene-stage {
    background:
      radial-gradient(90% 46% at 0% 74%, rgba(var(--glow, 222, 160, 104), var(--glow-a, 0)), rgba(var(--glow, 222, 160, 104), 0) 70%),
      linear-gradient(180deg, var(--sky-a, #04122b) 0%, var(--sky-b, #0d2f5e) 52%, var(--sky-c, #23568c) 100%);
  }
  .hero--cover .scene::before, .hero--cover .scene-photo::after { display: none; }
  .hero--cover .scene-photo {
    top: auto;
    height: auto;
    aspect-ratio: 100 / var(--r-desk);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 30%);
    mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, .5) 14%, #000 30%);
  }
  .hero--cover .scene-photo img, [dir="rtl"] .hero--localized.hero--cover .scene-photo img { object-position: 50% 50%; transform-origin: 50% 60%; transform: scale(calc(1 + var(--p) * .05)); }
  .hero--cover .hero-copy { width: auto; padding-top: 26px; }
  /* Panel mode, stacked: the preview frame goes under the text, still no wider than its own pixels. */
  .hero--panel .scene, [dir="rtl"] .hero--panel .scene { inset: 0; width: auto; aspect-ratio: auto; transform: none; }
  .hero--panel .scene::before { display: none; }
  .hero--panel .scene-photo { top: auto; left: 50%; width: min(100%, calc(var(--iw) * 1px)); transform: translateX(-50%); box-shadow: none; }
  .hero--panel .scene-photo img, [dir="rtl"] .hero--panel .scene-photo img { transform-origin: 50% 60%; transform: scale(calc(1 + var(--p) * .05)); }
  .scene-meta { inset-inline: 6%; justify-content: space-between; gap: 12px; }
  .scene-caption { text-align: start; max-width: 200px; }
  .hero:not(.is-pinned) .scene-meta { bottom: 30px; }
  .hero:not(.is-pinned) .scene-stage::after { height: 28px; }
}

/* ---------- Phone ---------- */

@media (max-width: 650px) {
  :root { --hh: 68px; --hh-c: 56px; }
  .site-header { padding-inline: 5%; gap: 10px; }
  .actions { gap: 6px; }
  .header-cta { display: none; }
  .js .nav-cta { display: block; margin-top: 18px; text-align: center; }
  .iata { padding-inline: 8px; gap: 3px; border: 0; }
  .iata img { height: 22px; }
  .is-compact .iata img { height: 20px; }
  .iata span { font-size: 9px; }

  .hero { --pin: 20vh; }
  @supports (height: 1svh) { .hero { --pin: 20svh; } }
  .scene { --photo-h: calc(var(--r-phone, 83.33) * var(--w)); }
  .scene-photo, .hero--cover .scene-photo { aspect-ratio: 100 / var(--r-phone, 83.33); }
  .scene-photo img { transform-origin: 55% 40%; }
  .scene-reserve { min-height: calc(var(--r-phone, 83.33) * .9vw); }

  h1 { font-size: clamp(30px, 9vw, 44px); }
  h2 { font-size: clamp(27px, 7.4vw, 34px); }
  .hero-copy .eyebrow, .hero-copy h1 { margin-bottom: 14px; }
  .lead { font-size: 15px; line-height: 1.6; }
  .hero-links { gap: 12px 18px; margin-top: 18px; }
  .hero-links .button { padding: 15px 20px; }
  .affiliation { margin-top: 18px; gap: 12px; }
  .affiliation span { font-size: 20px; padding: 5px 10px; }
  .affiliation p { font-size: 11px; line-height: 1.55; }
  .motion-toggle { min-height: 40px; }

  .band, .story { padding: 56px 6%; }
  .band-head { margin-bottom: 28px; }

  /* Mode panels: stacked, with a lighter slant */
  .modes { grid-template-columns: 1fr; gap: 12px; --slant: 3%; }   /* stacked, with a gentler slant */
  .mode { aspect-ratio: 1 / 1; }
  .mode h3 { font-size: 26px; }
  .mode-body { padding: 0 22px 26px; padding-inline-end: calc(var(--slant) + 58px); }
  .mode-arrow { top: auto; bottom: 26px; inset-inline-end: calc(var(--slant) + 10px); width: 40px; height: 40px; font-size: 17px; }
  .photo-credits { text-align: start; }

  .steps { grid-template-columns: 1fr; gap: 26px; }
  .steps li, .steps li + li { padding: 0; border: 0; }
  .steps li { display: grid; grid-template-columns: 44px 1fr; column-gap: 18px; }
  .steps .icon { grid-row: 1 / 4; margin: 0; }

  .clients { padding-block: 56px; }
  .logo-tile { width: 190px; height: 92px; }
  .js:not(.motion-off) .marquee-track { animation-duration: 55s; }
  html:not(.js) .logo-tile, .motion-off .logo-tile { width: calc(50% - 7px); }

  .fields { grid-template-columns: 1fr; }
  .mode-switch { grid-template-columns: 1fr 1fr; }
  .mode-switch label:nth-child(3) > span { border-inline-start: 0; }
  .mode-switch label:nth-child(n + 3) > span { border-top: 1px solid #b9c8c0; }
  .dim-row { grid-template-columns: 1fr 1fr 1fr; }
  .dim-row .dim-remove { justify-self: start; }

  .bizcard { grid-template-columns: 1fr; gap: 18px; }
  /* Stages as a list: the picture first, its text under it */
  .story-step { display: block; min-height: 0; overflow: visible; background: none; }
  .story-frame { position: relative; inset: auto; aspect-ratio: 4 / 3; overflow: hidden; }
  .story-frame::after, [dir="rtl"] .story-frame::after { background: linear-gradient(0deg, rgba(4, 16, 32, .45), rgba(4, 16, 32, 0) 40%); transform: none; }
  .story-text { width: auto; padding: 16px 0 12px; text-shadow: none; }
  /* Stages as a pinned scene: heading on top, text above the numbered tabs */
  .story.is-pinned .story-head { padding: 22px 6% 0; }
  .story.is-pinned .story-head h2 { font-size: 24px; }
  .story.is-pinned .story-step { position: absolute; inset: 0; background: var(--navy-900); }
  .story.is-pinned .story-frame { position: absolute; inset: 0; aspect-ratio: auto; }
  .story.is-pinned .story-frame::after, [dir="rtl"] .story.is-pinned .story-frame::after {
    transform: none;
    /* measured in pixels from the edges, so the shade always sits under the heading and under the text,
       whatever the height of the phone */
    background:
      linear-gradient(180deg, rgba(4, 16, 32, .84) 0, rgba(4, 16, 32, .68) 140px, rgba(4, 16, 32, 0) 240px),
      linear-gradient(0deg, rgba(4, 16, 32, .94) 0, rgba(4, 16, 32, .86) 170px, rgba(4, 16, 32, .74) 280px, rgba(4, 16, 32, .26) 360px, rgba(4, 16, 32, 0) 420px);
  }
  .story.is-pinned .story-text { inset-inline: 6%; width: auto; bottom: calc(var(--story-nav-h, 56px) + 34px); padding: 0; text-shadow: 0 1px 18px rgba(2, 10, 24, .55); }
  .story.is-pinned .story-frame figcaption { inset-inline-end: 6%; bottom: calc(var(--story-nav-h, 56px) + 8px); }
  .story.is-pinned .story-nav { padding: 0 6%; }
  .story.is-pinned .story-nav::after { inset-inline: 6%; }
  .story-tab, [dir="rtl"] .story-tab { justify-content: center; min-height: 52px; padding: 14px 0; }
  .story-tab span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .story-tab b { font-size: 13px; }
  .story.is-pinned > .note { margin-inline: 6%; }
  .story.is-pinned { padding: 0 0 40px; }
  footer { grid-template-columns: 1fr; padding: 40px 6% 30px; }


  .tiles, .tiles--3 { grid-template-columns: 1fr; }
  .icon-row { grid-template-columns: 1fr 1fr; }
  .icon-row li { padding: 22px 16px; }
  .route { grid-template-columns: 1fr; gap: 0; justify-items: center; }
  .route-link { width: 0; height: 34px; margin: 10px 0; border-top: 0; border-inline-start: 2px dashed #9db0a6; }
  .route-link::after { inset-inline-end: auto; inset-inline-start: -7px; top: auto; bottom: -8px; border: 6px solid transparent; border-top-color: #9db0a6; }
  .band--navy .route-link::after { border-color: transparent; border-top-color: #5f7f9c; }
  .loads { grid-template-columns: 1fr; }
  .load { padding: 26px 22px 30px; }
  .logo-tile img { width: 150px; height: 62px; }
  .airlines { grid-template-columns: 1fr; gap: 12px; margin-top: 34px; }
  .airline { min-height: 124px; }
}

/* ---------- Reduced motion: static picture, no parallax, no pin, no moving band ---------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-cue i::after, .hero-copy > *, .marquee-track, .scene-photo { animation: none !important; }
  .scene-stage { --p: 0 !important; }
  .scroll-cue { display: none; }
  .site-header, .brand img, .iata img, .arr, .button, .textlink, nav a, .mode img, .mode::after, .mode-arrow, .airline, .airline::before, .story-step, .story-text > *, .story-tab, .menu span, .menu span::before, .menu span::after { transition: none !important; }
  .reveal-on [data-reveal] { opacity: 1; transform: none; transition: none; }
}

@media print {
  .reveal-on [data-reveal] { opacity: 1 !important; transform: none !important; }
  .site-header { position: static; }
}

/* v12: restrained document styling and grounded cargo shadows. */
.tl-document-board { position: absolute; left: 150px; top: 180px; width: 724px; height: 1176px; border-radius: 30px; background: linear-gradient(145deg,#0b6552,#08483e); box-shadow: 12px 24px 32px rgba(9,37,50,.16), inset 0 0 0 3px rgba(255,255,255,.15); }
.tl-document-board::before { content: ''; position: absolute; inset: 58px 30px 30px; border-radius: 8px; background: #fffefa; box-shadow: 0 7px 12px rgba(0,0,0,.12); }
.tl-document-board::after { content: ''; position: absolute; width: 224px; height: 66px; top: -16px; left: 250px; border: 4px solid #b5c3c5; border-radius: 12px; background: linear-gradient(#eef2f1,#9badaf); box-shadow: 0 6px 8px rgba(0,0,0,.12); }
.tale.is-live .tale-sheet-title { border-bottom-width: .06em; padding-bottom: .7em; }
.tale.is-live .tale-group li { border-bottom: 1px solid rgba(10,37,64,.12); }
.tl-label { font-size: 70px; font-weight: 500; letter-spacing: .12em; }
.tl-shadow { background: radial-gradient(closest-side,rgba(21,27,43,.22),rgba(21,27,43,0)); transform-origin: center; }
.tl-pad-base { border-color: rgba(255,255,255,.7); box-shadow: 0 9px 0 -3px #d5ccb6,0 30px 50px -22px rgba(21,27,43,.18); }
[dir="rtl"] .bizcard-id strong { letter-spacing: 0; }

.document-preview { width: min(60%,240px); margin: 32px auto; padding: 42px 28px; aspect-ratio: 3 / 4; border: 12px solid #0b6552; border-radius: 12px; background: #fffefa; box-shadow: 0 20px 35px rgba(9,37,50,.12); position: relative; }
.document-preview::before { content: ''; position: absolute; width: 32%; height: 18px; top: -18px; left: 34%; border-radius: 4px; background: linear-gradient(#e8eeee,#99aaad); }
.document-preview span { display: block; font-size: 11px; letter-spacing: .1em; color: #0b6552; margin-bottom: 25px; }
.document-preview i { display: block; height: 1px; background: #d8e3df; margin-top: 28px; }

/* v13 — uncomplicated full-screen About chapters. */
.about-simple { background: var(--navy-900); }
.about-panel { min-height: 100vh; min-height: 100svh; position: relative; isolation: isolate; display: flex; align-items: center; padding: 110px max(6vw,24px) 70px; overflow: hidden; scroll-margin-top: var(--hh-c); }
.about-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 65% center; z-index: -3; }
.about-shade { position: absolute; inset: 0; z-index: -2; background: linear-gradient(90deg,rgba(6,24,43,.94) 0%,rgba(6,24,43,.84) 32%,rgba(6,24,43,.27) 66%,rgba(6,24,43,.1)),linear-gradient(0deg,rgba(6,24,43,.75),transparent 22%); }
.about-panel-copy { max-width: 520px; width: 44%; color: #fff; }
.about-panel-copy h1,.about-panel-copy h2 { font-size: clamp(36px,4.6vw,72px); margin: 24px 0; color: #fff; }
.about-panel-copy p { color: #e3edf4; font-size: clamp(16px,1.2vw,19px); }
.about-panel-copy .eyebrow { color: var(--mint); font-size: 12px; }
.about-count { display: inline-block; color: #b9ced9; font-size: 12px; letter-spacing: .2em; padding-bottom: 15px; border-bottom: 2px solid var(--mint); }
.about-details { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; margin: 24px 0; }
.about-details li { padding: 11px 12px; border: 1px solid rgba(255,255,255,.22); border-radius: 5px; background: rgba(6,24,43,.55); font-size: 13px; line-height: 1.4; }
.about-action { margin-top: 28px; }
.about-note-band { padding: 24px max(6vw,24px); }
.about-scene-note { color: #b9ced9; margin: 0; font-size: 12px; }
.air-world-map { width: 100%; display: block; border: 1px solid rgba(127,224,184,.2); border-radius: 16px; }
.air-world .diagram-note { color: #b9ced9; margin-top: 16px; }
[dir="rtl"] .about-shade { transform: scaleX(-1); }
[dir="rtl"] .about-panel-copy h1,[dir="rtl"] .about-panel-copy h2 { letter-spacing: 0; }
@media(max-width:900px) { .about-panel-copy { width: 64%; } .about-panel { padding-inline: 5vw; } }
@media(max-width:600px) { .about-panel { padding: 104px 24px 48px; align-items: flex-end; } .about-panel-copy { width: 100%; max-width: none; } .about-panel-copy h1,.about-panel-copy h2 { font-size: 40px; } .about-shade { background: linear-gradient(0deg,rgba(6,24,43,.98) 0%,rgba(6,24,43,.9) 46%,rgba(6,24,43,.22) 100%); } .about-backdrop { object-position: 68% center; } .about-panel-copy p { font-size: 16px; } }
@media(prefers-reduced-motion:reduce) { .about-panel-copy { transition: none !important; } }

/* v14: airy geographic map and a useful, substantial quote checklist. */
.air-world { background: #edf3ef; color: var(--ink); }
.air-world h2 { color: var(--ink); }
.air-world .eyebrow { color: var(--green-deep); }
.air-world .band-head > p,.air-world .diagram-note { color: #4c6259; }
.air-world-map { border: 0; box-shadow: 0 20px 65px rgba(14,49,37,.08); border-radius: 22px; }
.air-quote-guide .memo { grid-template-columns: repeat(12,minmax(0,1fr)); gap: 16px; counter-reset: details; }
.air-quote-guide .memo li { counter-increment: details; grid-column: span 3; position: relative; min-height: 175px; padding: 26px; border-radius: 14px; background: #fff; border: 1px solid #d9e3dd; box-shadow: 0 6px 20px rgba(10,37,64,.04); gap: 22px; }
.air-quote-guide .memo li:nth-child(n+5) { grid-column: span 4; }
.air-quote-guide .memo li::after { content: counter(details,decimal-leading-zero); position: absolute; top: 24px; inset-inline-end: 24px; font-size: 12px; letter-spacing: .12em; color: #7d9389; }
.air-quote-guide .memo .icon { width: 38px; height: 38px; background: #edf6f0; padding: 7px; border-radius: 10px; }
.air-quote-guide .memo strong { font-size: 16px; display: block; }
.air-quote-guide .memo small { font-size: 13px; display: block; margin-top: 8px; line-height: 1.6; }
.air-quote-guide .memo span br { display: none; }
.air-quote-guide .cta-row { margin-top: 30px; padding-top: 26px; border-top: 1px solid #d9e3dd; }
@media(max-width:900px) { .air-quote-guide .memo { grid-template-columns: repeat(2,minmax(0,1fr)); } .air-quote-guide .memo li,.air-quote-guide .memo li:nth-child(n+5) { grid-column: auto; } .air-quote-guide .memo li:last-child { grid-column: 1 / -1; } }
@media(max-width:520px) { .air-quote-guide .memo { grid-template-columns: 1fr; } .air-quote-guide .memo li { min-height: 120px; flex-direction: row; align-items: center; gap: 18px; padding: 22px; } .air-quote-guide .memo .icon { flex-shrink: 0; } .air-quote-guide .memo li::after { top: 12px; inset-inline-end: 16px; font-size: 10px; } }

/* v15: restored client strip, full-colour originals and a calm gallery rhythm. */
.clients { background: linear-gradient(180deg,#f7faf7,#eef4f0); padding-block: 74px 80px; border-block: 1px solid #e2ebe5; }
.clients-head { align-items: center; margin-bottom: 34px; }
.clients-head .eyebrow { font-size: 11px; letter-spacing: .18em; color: var(--green-deep); margin: 0 0 12px; }
.clients-head h2 { font-size: clamp(28px,3vw,42px); line-height: 1.12; }
.clients .motion-toggle { color: var(--green-deep); border-color: #a7bfb3; }
.clients .logo-tile { width: 234px; height: 126px; border: 1px solid #e3ebe5; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(10,37,64,.035); }
.clients .logo-tile img { width: 170px; height: 70px; object-fit: contain; }
.clients .logo-tile--hd img { width: 192px; height: 78px; }
.clients .marquee-track { padding-block: 8px 24px; }
.js:not(.motion-off) .clients .marquee-track { animation-duration: 110s; }
.js:not(.motion-off) .clients .logo-set { gap: 18px; padding-inline-end: 18px; }
.motion-off .clients .marquee-track,html:not(.js) .clients .marquee-track { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 16px; }
.motion-off .clients .logo-tile,html:not(.js) .clients .logo-tile { width: 100%; }
@media(max-width:600px) { .clients { padding-block: 48px; } .clients .logo-tile { width: 206px; height: 112px; } .clients .logo-tile--hd img { width: 178px; height: 74px; } .js:not(.motion-off) .clients .marquee-track { animation-duration: 125s; } .motion-off .clients .marquee-track,html:not(.js) .clients .marquee-track { grid-template-columns: repeat(2,minmax(0,1fr)); } .motion-off .clients .logo-tile img,html:not(.js) .clients .logo-tile img { max-width: 90%; } }

/* Confirmed contact details: keep long email addresses inside the card. */
.bizcard-lines li { min-width: 0; }
.bizcard-lines a { overflow-wrap: anywhere; min-width: 0; }
.contact-status a { overflow-wrap: anywhere; text-underline-offset: 4px; }
.contact-status b:not(:first-child) { margin-top: 12px; }
.quote-intro > .btn { margin-top: 20px; }

/* v17: quiet contact hierarchy and a spacious director card. */
.brand-group { display:flex; align-items:center; gap:14px; flex:none; }
.header-email { font-size:12px; color:var(--green-deep); text-decoration:none; white-space:nowrap; }
.bizcard-back { background:#fff; box-shadow:0 12px 32px rgba(21,27,43,.07); }
.bizcard-art { display:none; }
.bizcard-back::after { content:""; position:absolute; inset:0 0 auto; height:4px; background:var(--green); }
.bizcard-body { padding:7cqw 8cqw; gap:5cqw; }
.bizcard-id strong { font-size:clamp(22px,5.6cqw,36px); }
.bizcard-id span { font-size:clamp(12px,2.7cqw,17px); letter-spacing:.12em; }
.bizcard-lines { gap:2.5cqw; }
.bizcard-lines li { font-size:clamp(12px,2.8cqw,17px); gap:2.4cqw; }
.bizcard-lines a { text-decoration:none; }
.bizcard-lines a:hover { text-decoration:underline; }
.contact-status { grid-template-columns:1fr 1fr; }
@media(max-width:700px) { .header-email { font-size:10px; } .brand-group { gap:8px; } .contact-status { grid-template-columns:1fr; } }
@media(max-width:380px) { .brand-group { flex-direction:column; align-items:flex-start; gap:3px; } .brand-group .brand img { height:38px; } .header-email { font-size:9px; } }

/* v18: white business card with a clear emerald signature. */
.bizcard-face { background:#fff; border-color:#dbe6df; border-radius:12px; box-shadow:0 16px 36px rgba(17,53,42,.10); }
.bizcard-front::before { content:""; position:absolute; inset:auto 0 0; height:11%; background:linear-gradient(110deg,#006349 0%,#008461 70%,#239b79 100%); }
.bizcard-front::after { content:""; position:absolute; inset:auto 0 13%; height:1px; background:#cbe3d8; }
.bizcard-front img { height:74%; transform:translateY(-3%); }
.bizcard-back::after { display:none; }
.bizcard-art { display:block; }
.bizcard-body { padding:7cqw 23cqw 7cqw 8cqw; gap:5cqw; }
[dir="rtl"] .bizcard-body { padding:7cqw 8cqw 7cqw 23cqw; }
.bizcard-id span { display:inline-block; width:fit-content; padding:0 0 1.5cqw; border-bottom:2px solid #008461; letter-spacing:.12em; }
.bizcard-lines li { font-size:clamp(11px,2.55cqw,16px); }
.bizcard-lines svg { width:1.15em; height:1.15em; }
.bizcard-lines li:first-child a { font-size:clamp(10px,2.35cqw,15px); }