/* ============================================================
   بساط الريح لخدمات الشحن — maritime edition
   Navy / teal / amber design system
   Mobile-first · RTL & LTR via logical properties
   ============================================================ */

:root {
  --ink: #092d36;
  --ink-soft: #395961;
  --muted: #6a8a8f;

  --sea: #0c5966;
  --teal: #188b8b;
  --sea-pale: #d8efec;
  --amber: #eea83e;
  --amber-deep: #d4922a;

  --paper: #f8f5ef;
  --surface: #ffffff;
  --linen: #f0ebe3;
  --sand: #e8dfd3;
  --sand-deep: #d8b981;

  --line: rgba(9, 45, 54, 0.13);
  --line-soft: rgba(9, 45, 54, 0.08);

  --hero-bg: #073842;
  --hero-deep: #052a33;

  --accent: var(--sea);
  --accent-soft: #e4f2f0;

  --process-bg: var(--hero-deep);
  --process-ink: #faf6f0;
  --process-line: rgba(126, 228, 220, 0.3);
  --process-muted: #a0c8c3;

  --contact-bg: linear-gradient(135deg, #063a45, #07515d);
  --contact-ink: #fffdf7;
  --contact-muted: #c6dcda;

  --footer-bg: #022932;
  --footer-ink: #e7f1ed;
  --footer-mut: #8ebbb5;

  --atlas-land: var(--sea-pale);
  --atlas-route-main: var(--amber);
  --atlas-route-sec: var(--teal);
  --atlas-city: var(--teal);
  --atlas-city-primary: var(--amber);
  --atlas-label-bg: rgba(248, 245, 239, 0.88);

  --radius-lg: 18px;
  --radius-md: 12px;
  --radius-sm: 9px;
  --pill: 999px;

  --shadow-sm: 0 1px 2px rgba(5, 42, 51, 0.06);
  --shadow-md: 0 8px 26px -14px rgba(5, 42, 51, 0.18);
  --shadow-lg: 0 20px 55px rgba(5, 42, 51, 0.13);

  --header-h: 72px;
  /* Worst-case header height per breakpoint, in CSS alone. --header-h is
     refined to the exact px by JS, but layout must never depend on that
     having run, so spacing takes the larger of the two. */
  --header-safe: 72px;
  --gutter: clamp(20px, 4vw, 32px);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

/* ---------- Dark mode ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f6f0e6;
    --ink-soft: #c2d6d4;
    --muted: #93b7b2;
    --sea: #78d1ca;
    --teal: #64cfc7;
    --sea-pale: #163f47;
    --amber: #f6b454;
    --amber-deep: #d4922a;
    --paper: #092e37;
    --surface: #0d3b45;
    --linen: #0b3540;
    --sand: #0e3e4a;
    --sand-deep: #c99952;
    --line: rgba(232, 244, 240, 0.15);
    --line-soft: rgba(232, 244, 240, 0.08);
    --accent: var(--sea);
    --accent-soft: #163f47;
    --atlas-land: #163f47;
    --atlas-label-bg: rgba(9, 46, 55, 0.88);
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 8px 26px -14px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.22);
  }
}
:root[data-theme="dark"] {
  --ink: #f6f0e6;
  --ink-soft: #c2d6d4;
  --muted: #93b7b2;
  --sea: #78d1ca;
  --teal: #64cfc7;
  --sea-pale: #163f47;
  --amber: #f6b454;
  --amber-deep: #d4922a;
  --paper: #092e37;
  --surface: #0d3b45;
  --linen: #0b3540;
  --sand: #0e3e4a;
  --sand-deep: #c99952;
  --line: rgba(232, 244, 240, 0.15);
  --line-soft: rgba(232, 244, 240, 0.08);
  --accent: var(--sea);
  --accent-soft: #163f47;
  --atlas-land: #163f47;
  --atlas-label-bg: rgba(9, 46, 55, 0.88);
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 8px 26px -14px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 22px 55px rgba(0, 0, 0, 0.22);
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  background: var(--paper);
  scroll-padding-top: calc(max(var(--header-h), var(--header-safe)) + 28px);
  -webkit-text-size-adjust: 100%;
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.8;
  font-size: 1rem;
  min-height: 100vh;
  overflow-x: hidden;
}

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

/* The UA's [hidden] rule lives in the HTML-namespaced stylesheet, so it never
   reaches inline SVG: the theme toggle was painting its sun and moon stacked,
   and the moon overhung the button. */
[hidden] { display: none !important; }
button { font: inherit; color: inherit; cursor: pointer; border: 0; }
a { color: var(--accent); -webkit-tap-highlight-color: transparent; }

::selection { background: var(--amber); color: #092d36; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  inset-inline-start: 16px;
  top: -52px;
  z-index: 300;
  background: var(--amber);
  color: #092d36;
  padding: 8px 14px;
  font-weight: 700;
  border-radius: var(--pill);
  transition: top 0.2s var(--ease-out);
}
.skip-link:focus { top: 10px; }

:focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

.container {
  max-width: 1200px;
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 26px;
  border-radius: var(--radius-md);
  border: 1px solid transparent;
  font-weight: 700;
  font-size: 0.88rem;
  line-height: 1.4;
  min-height: 46px;
  text-decoration: none;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s var(--ease-out),
              background-color 0.18s var(--ease-out);
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }

.btn-primary {
  background: var(--amber);
  color: #17363d;
  box-shadow: 0 10px 25px rgba(238, 168, 62, 0.2);
}
.btn-primary:hover { transform: translateY(-3px); box-shadow: 0 15px 33px rgba(238, 168, 62, 0.32); }

.btn-ghost {
  border: 1px solid var(--line);
  background: var(--surface);
  color: var(--ink);
}
.btn-ghost:hover { border-color: var(--ink-soft); transform: translateY(-2px); }

.btn-hero-ghost {
  border: 1px solid rgba(232, 244, 240, 0.28);
  background: rgba(232, 244, 240, 0.08);
  color: #f9f8f1;
}
.btn-hero-ghost:hover { background: rgba(232, 244, 240, 0.16); transform: translateY(-2px); }

.btn-sm { padding: 8px 18px; font-size: 0.82rem; min-height: 38px; }
.btn-block { width: 100%; }

/* ---------- Eyebrow badge ---------- */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--teal);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.eyebrow-line {
  display: inline-block;
  width: 28px; height: 2px;
  background: currentColor;
}
.eyebrow-light { color: #94dad4; }

/* ---------- Floating pill header ---------- */
.site-header {
  position: fixed;
  top: 12px;
  inset-inline: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
}

.nav-pill {
  display: flex;
  align-items: center;
  gap: 20px;
  width: min(1240px, calc(100% - 2rem));
  min-height: 72px;
  padding: 14px 22px;
  padding-inline-start: 24px;
  background: rgba(3, 41, 49, 0.88);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(206, 231, 227, 0.25);
  border-radius: var(--radius-lg);
  box-shadow: 0 12px 35px rgba(0, 16, 21, 0.25);
  color: #fcf9f1;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex: none;
  margin-inline-end: 4px;
}

.logo-mark {
  position: relative;
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  flex: none;
  border: 2px solid var(--amber);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.logo-mark span {
  position: absolute;
  display: block;
  width: 19px; height: 2px;
  border-radius: 9px;
  background: var(--amber);
  transform: rotate(-20deg);
}
.logo-mark span:nth-child(2) { width: 15px; transform: translateY(6px) rotate(-20deg); background: #7ee4dc; }
.logo-mark span:nth-child(3) { width: 12px; transform: translateY(-6px) rotate(-20deg); background: #fff6e2; }

.logo-text { display: grid; line-height: 1.15; }
.logo-ar { font-weight: 800; font-size: 0.92rem; white-space: nowrap; }
.logo-en {
  font-size: 0.5rem; color: #a5cfca;
  letter-spacing: 0.09em; text-transform: uppercase; white-space: nowrap;
}

.nav { display: block; flex: 1 1 auto; min-width: 0; }
.nav-list {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 2px;
  justify-content: center;
}
.nav-list a {
  display: block;
  padding: 9px 13px;
  text-decoration: none;
  color: #d7e5e1;
  font-size: 0.82rem;
  font-weight: 600;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  transition: background-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.nav-list a:hover { background: rgba(255, 255, 255, 0.11); color: #fff; }
.nav-list a.nav-active { background: rgba(238, 168, 62, 0.18); color: var(--amber); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin-inline-start: 4px;
}

.btn-theme {
  display: grid;
  place-items: center;
  width: 38px; height: 38px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(206, 231, 227, 0.2);
  border-radius: var(--radius-sm);
  color: #fef7e8;
  transition: background 0.16s var(--ease-out), transform 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
}
.btn-theme:hover { transform: translateY(-2px); background: rgba(255, 255, 255, 0.2); border-color: rgba(206, 231, 227, 0.35); }
.btn-theme svg { width: 18px; height: 18px; }

.btn-lang {
  display: grid;
  place-items: center;
  height: 38px;
  padding: 0 14px;
  border-radius: var(--radius-sm);
  background: rgba(238, 168, 62, 0.18);
  border: 1px solid rgba(238, 168, 62, 0.45);
  color: #f8d48a;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  transition: background 0.16s var(--ease-out), transform 0.16s var(--ease-out), border-color 0.16s var(--ease-out), color 0.16s var(--ease-out);
}
.btn-lang:hover { transform: translateY(-2px); background: rgba(238, 168, 62, 0.3); border-color: rgba(238, 168, 62, 0.65); color: #fde5a8; }

/* ---- Responsive nav ---- */
@media (max-width: 1079px) {
  .nav-pill { gap: 10px; }
  .nav-list a { padding: 7px 9px; font-size: 0.76rem; }
}

@media (max-width: 979px) {
  .nav-pill {
    flex-wrap: wrap;
    gap: 8px 10px;
    padding: 12px 14px;
    min-height: 0;
    border-radius: var(--radius-md);
    /* .container already supplies the outer gutter; don't inset twice. */
    width: 100%;
  }
  .logo { flex: 1 1 auto; min-width: 0; }
  .logo-ar { font-size: 0.86rem; }
  .logo-mark { width: 34px; height: 34px; }
  .nav {
    order: 10;
    flex-basis: 100%;
    border-top: 1px solid rgba(225, 242, 238, 0.12);
    padding-top: 8px;
    margin-top: 2px;
  }
  /* Links wrap onto as many rows as the labels need. English labels
     ("Destinations", "Shipping journey") are far wider than the Arabic
     ones, so a single scrolling row put them out of reach. */
  .nav-list {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 6px;
  }
  .nav-list a { padding: 7px 10px; font-size: 0.74rem; }
  .btn-lang { height: 36px; padding: 0 12px; font-size: 0.74rem; }
  .btn-theme { width: 36px; height: 36px; }
}

/* Below this width the logo + the three controls can no longer share a row.
   The fixed bottom call bar already offers "call" persistently, so the
   header's duplicate of it is the one element that can go. */
@media (max-width: 560px) {
  .header-actions .btn { display: none; }
}

@media (max-width: 419px) {
  .nav-pill { padding: 10px 12px; gap: 8px; }
  .nav-list { gap: 4px; }
  .nav-list a { padding: 6px 9px; font-size: 0.72rem; }
  .btn-lang { height: 34px; padding: 0 10px; font-size: 0.7rem; }
  .btn-theme { width: 34px; height: 34px; }
  .logo-mark { width: 30px; height: 30px; }
  .logo-ar { font-size: 0.78rem; }
  .logo-en { font-size: 0.46rem; }
  /* The Arabic wordmark set nowrap is ~273px — wider than the pill's inner
     width on a phone. Letting it wrap keeps the logo beside the controls
     instead of pushing them each onto their own row. */
  .logo-text { min-width: 0; max-width: 110px; }
  .logo-ar { white-space: normal; }
}

/* Narrow phones: tighten the link chips just enough that the six English
   labels settle into two rows instead of three. Declared after the 419px
   block so it wins where both apply. */
@media (max-width: 360px) {
  .nav-list { gap: 3px 4px; }
  .nav-list a { padding: 5px 7px; font-size: 0.68rem; }
}

/* Measured worst-case header heights (English wraps taller than Arabic). */
@media (max-width: 979px) { :root { --header-safe: 130px; } }
@media (max-width: 560px) { :root { --header-safe: 160px; } }

/* ---- Mobile menu drawer (below 768px) ----
   The five links wrapped onto two rows here and drove the pill to 148px.
   They move into a panel below the header instead; the theme and language
   toggles stay in the collapsed bar because both are used often.
   The panel is anchored to the inline-end edge and slides from it, so the
   direction it travels flips with dir= rather than assuming left-to-right. */
:root { --drawer-off: 115%; --mobile-bar-h: 64px; }
[dir="rtl"] { --drawer-off: -115%; }

.btn-menu { display: none; }
.nav-backdrop { display: none; }

@media (max-width: 767px) {
  .btn-menu {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(206, 231, 227, 0.2);
    border-radius: var(--radius-sm);
    color: #fef7e8;
    transition: background 0.16s var(--ease-out), border-color 0.16s var(--ease-out);
  }
  .btn-menu:hover { background: rgba(255, 255, 255, 0.2); }
  .btn-menu[aria-expanded="true"] {
    background: rgba(238, 168, 62, 0.2);
    border-color: rgba(238, 168, 62, 0.5);
    color: var(--amber);
  }
  .btn-menu svg { width: 18px; height: 18px; }

  /* The 979px block zeroed min-height so the wrapped rows could size the pill.
     With the links gone it collapses to 59px, so give it a deliberate one.
     backdrop-filter must go: it makes the pill the containing block for
     fixed-position descendants, which would resolve the panel's top/bottom
     against the 68px pill instead of the viewport. */
  .nav-pill {
    min-height: 68px;
    /* The 979px block wraps the pill so the nav could take a second row. The
       nav is fixed and out of flow here, so that wrap can only misfire and
       drop the controls onto their own line. One row, always. */
    flex-wrap: nowrap;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .logo { gap: 9px; }
  .logo-mark { width: 32px; height: 32px; }

  /* Only one wordmark fits beside the controls in a 68px bar - stacking both
     is what made the header read as cramped. But hiding the Latin one
     outright left the bar in Arabic while the rest of the page was in
     English, so show whichever one matches the active language instead.
     applyLang() already stamps <html lang>, so CSS can do the swap. */
  .logo-ar { font-size: 0.9rem; }
  :root[lang="en"] .logo-ar { display: none; }
  .logo-en {
    display: none;
    /* A wordmark here, not the desktop sub-caption: drop the uppercase
       tracking treatment and match the Arabic line's weight and colour. */
    font-size: 0.84rem;
    font-weight: 800;
    line-height: 1.2;
    color: inherit;
    letter-spacing: 0;
    text-transform: none;
    white-space: normal;
  }
  :root[lang="en"] .logo-en { display: block; }

  /* Fixed, so it leaves the pill's flex flow and the pill collapses to one row.
     Sits below the pill and stops short of the fixed call bar, so it covers
     neither the toggle nor the bar. */
  .nav {
    position: fixed;
    inset-block: calc(var(--header-h) + 20px) calc(var(--mobile-bar-h) + 12px);
    inset-inline-end: 12px;
    z-index: 195;
    width: min(280px, calc(100vw - 24px));
    padding: 10px;
    background: rgba(5, 42, 51, 0.97);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(206, 231, 227, 0.22);
    border-radius: var(--radius-md);
    box-shadow: 0 18px 45px rgba(0, 16, 21, 0.45);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Off-canvas when closed; JS marks it inert so it leaves the tab order. */
    transform: translateX(var(--drawer-off));
    margin-top: 0; /* the 979px block adds 2px, which would offset the inset */
  }
  .nav.is-open { transform: translateX(0); }

  .nav-list {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
  }
  .nav-list a { padding: 13px 14px; font-size: 0.95rem; border-radius: var(--radius-sm); }

  .nav-backdrop {
    display: block;
    position: fixed; inset: 0;
    z-index: 190;
    background: rgba(2, 18, 22, 0.6);
    opacity: 0;
    pointer-events: none;
  }
  .nav-backdrop.is-open { opacity: 1; pointer-events: auto; }
}

/* Narrowest phones: with the menu button added as a third control, the logo
   has to yield width or the row wraps and the pill grows back to ~103px.
   A fixed cap is wrong here - it squeezed 375px screens that had room to
   spare. Dropping the cap lets flex hand the wordmark whatever is left, so
   it sets on one line where it fits and wraps only where it must. */
@media (max-width: 419px) {
  .logo-text { max-width: none; }
  .header-actions { gap: 6px; }
  /* 0.9rem runs to three lines once the bar drops under ~360px. */
  .logo-ar { font-size: 0.8rem; }
  .logo-en { font-size: 0.76rem; }
  .logo-mark { width: 30px; height: 30px; }
}

@media (max-width: 767px) and (prefers-reduced-motion: no-preference) {
  .nav { transition: transform 0.28s var(--ease-out); }
  .nav-backdrop { transition: opacity 0.24s var(--ease-out); }
}

/* Collapsed bar is ~68px, so the hero no longer needs the wrapped-nav floor. */
@media (max-width: 767px) { :root { --header-safe: 84px; } }

/* ---------- Section structure ---------- */
section { scroll-margin-top: calc(max(var(--header-h), var(--header-safe)) + 28px); }

.section { padding-block: clamp(64px, 9vw, 104px); }

.section-head {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.section-title {
  margin-top: 4px;
  font-size: clamp(1.8rem, 3.6vw, 2.8rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.03em;
  text-wrap: balance;
}

.section-sub {
  margin-top: 10px;
  color: var(--muted);
  max-width: 54ch;
  font-size: 0.92rem;
  line-height: 1.95;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: min(860px, 100svh);
  padding-block: calc(max(var(--header-h), var(--header-safe)) + clamp(40px, 7vw, 90px)) clamp(60px, 8vw, 100px);
  background: radial-gradient(circle at 78% 38%, rgba(27, 126, 128, 0.38), transparent 30%),
              linear-gradient(125deg, var(--hero-deep) 0%, var(--hero-bg) 58%, #0a4c57 100%);
  color: #fffdf7;
  isolation: isolate;
}

.hero-grain {
  position: absolute; inset: 0; z-index: -1; opacity: 0.13; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.7'/%3E%3C/svg%3E");
}
.hero-grid {
  position: absolute; inset: 0; z-index: -1; opacity: 0.14;
  background-image: linear-gradient(rgba(171, 224, 217, 0.5) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(171, 224, 217, 0.5) 1px, transparent 1px);
  background-size: 76px 76px;
  mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 30%, #000);
}

.hero-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.hero-title {
  margin-top: 12px;
  font-size: clamp(2.4rem, 5.5vw, 4.2rem);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -0.04em;
  max-width: 16ch;
  text-wrap: balance;
}

.hero-sub {
  margin-top: 18px;
  color: #cde0dc;
  font-size: clamp(0.95rem, 1.3vw, 1.08rem);
  line-height: 1.95;
  max-width: 52ch;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
}

.hero-route-card {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 440px;
  margin-top: 48px;
  padding: 12px 16px;
  border: 1px solid rgba(196, 226, 218, 0.19);
  border-radius: var(--radius-md);
  background: rgba(1, 25, 31, 0.19);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.route-card-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 36px; height: 36px;
  border-radius: 50%;
  color: #123a40;
  background: #85d7d0;
}
.route-card-icon svg { width: 17px; height: 17px; }
.route-card-text { display: grid; gap: 2px; min-width: 0; }
.route-card-text small {
  color: #a9cbc6; font-size: 0.56rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
}
.route-card-text strong { color: #fff; font-size: 0.84rem; white-space: nowrap; }
.route-card-tag {
  margin-inline-start: auto;
  color: #ffd27d;
  font-size: 0.65rem;
  font-weight: 700;
  font-style: normal;
  white-space: nowrap;
}

/* ---------- Flyer figures ---------- */
.flyer { display: block; }
.flyer-zoom {
  display: block; width: 100%; padding: 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  cursor: zoom-in; transition: box-shadow 0.25s ease, border-color 0.2s ease;
}
.flyer-zoom:hover { border-color: var(--ink-soft); }
.flyer-img { width: 100%; height: auto; border-radius: calc(var(--radius-lg) - 11px); }
.flyer-cap { margin-top: 14px; text-align: center; font-size: 0.84rem; color: var(--muted); }
.flyer-hero { margin-top: clamp(40px, 5vw, 56px); width: min(600px, 100%); }
.flyer-split { margin-inline: auto; width: min(440px, 100%); }

/* ---------- Facts strip ---------- */
.facts-strip {
  border-block: 1px solid var(--line);
  padding-block: clamp(28px, 4vw, 40px);
  background: var(--sand);
}
.facts-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px 20px; }
.fact { text-align: center; }
.fact-value { display: block; font-weight: 700; font-size: 0.98rem; line-height: 1.5; color: var(--ink); }
.fact-label { display: block; margin-top: 2px; font-size: 0.74rem; letter-spacing: 0.08em; color: var(--muted); }

@media (min-width: 860px) {
  .facts-row { grid-template-columns: repeat(4, 1fr); gap: 24px; }
  .fact + .fact { border-inline-start: 1px solid var(--line); }
}

/* ---------- Services ---------- */
.services { background: var(--surface); }

.services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line);
  border-inline-start: 1px solid var(--line);
}

.service-card {
  position: relative;
  min-height: 280px;
  padding: 24px 20px;
  border-bottom: 1px solid var(--line);
  border-inline-end: 1px solid var(--line);
  background: color-mix(in srgb, var(--surface) 68%, transparent);
  transition: background 0.22s var(--ease-out), transform 0.22s var(--ease-out), box-shadow 0.22s var(--ease-out), color 0.22s var(--ease-out);
}

@media (hover: hover) {
  .service-card:hover {
    z-index: 1;
    background: var(--sea);
    color: #fffdf7;
    box-shadow: 0 18px 38px rgba(6, 54, 62, 0.16);
    transform: translateY(-10px);
  }
  .service-card:hover .icon-tile { color: #113941; background: var(--amber); }
  .service-card:hover .card-title { color: #fff; }
  .service-card:hover .card-desc { color: #d3e3df; }
}

.service-index {
  color: var(--sand-deep);
  font-size: 0.71rem;
  font-weight: 700;
}

.icon-tile {
  display: grid;
  place-items: center;
  width: 42px; height: 42px;
  border-radius: 50%;
  background: var(--sea-pale);
  color: var(--sea);
  margin-bottom: 16px;
  transition: background 0.22s var(--ease-out), color 0.22s var(--ease-out);
}
.icon-tile svg { width: 22px; height: 22px; }

.service-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 28px;
}

.card-title { font-size: 1.06rem; font-weight: 700; line-height: 1.5; margin-bottom: 8px; color: var(--ink); }
.card-desc { color: var(--muted); font-size: 0.88rem; line-height: 1.85; }

@media (max-width: 979px) {
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .service-card { min-height: 240px; }
}
@media (max-width: 500px) {
  .services-grid { grid-template-columns: 1fr; }
}

/* ---------- Split: flyer beside list ---------- */
.split {
  display: grid; gap: 40px;
  margin-top: clamp(56px, 7vw, 84px);
  align-items: center;
}
.split-title { font-size: 1.28rem; font-weight: 700; margin-bottom: 18px; }
.check-list { list-style: none; padding: 0; }
.check-list li {
  position: relative; padding-inline-start: 28px; padding-block: 9px;
  color: var(--ink-soft); border-top: 1px solid var(--line);
}
.check-list li:last-child { border-bottom: 1px solid var(--line); }
.check-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 1.35em;
  width: 13px; height: 7px;
  border-left: 2px solid var(--teal); border-bottom: 2px solid var(--teal);
  transform: rotate(-45deg); border-radius: 1px;
}
.split-text .btn { margin-top: 26px; }

@media (min-width: 900px) {
  .split { grid-template-columns: 440px 1fr; gap: 60px; }
}

/* ---------- Destinations ---------- */
.destinations-sec { background: var(--linen); }

.dest-grid {
  display: grid; gap: 40px; align-items: center;
  max-width: 900px; margin-inline: auto;
}
.country-row { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 28px; }
.country-chip {
  padding: 7px 16px; border-radius: var(--pill);
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.87rem; font-weight: 600; color: var(--sea);
}
.city-list {
  list-style: none; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px 18px;
}
.city-list li {
  position: relative; padding-inline-start: 16px; color: var(--muted); font-size: 0.95rem;
}
.city-list li::before {
  content: ""; position: absolute; inset-inline-start: 0; top: 0.82em;
  width: 4px; height: 4px; border-radius: 50%; background: var(--amber);
}
.dest-note { margin-top: 26px; color: var(--muted); font-size: 0.93rem; }

/* ---------- Route atlas ---------- */
.route-atlas {
  position: relative; min-height: 420px; overflow: hidden;
  border: 1px solid var(--line); border-radius: 1.5rem;
  background: radial-gradient(circle at 35% 20%, rgba(31, 132, 131, 0.13), transparent 32%), var(--surface);
  box-shadow: var(--shadow-lg); margin-top: 40px;
}
.atlas-grid {
  position: absolute; inset: 0; opacity: 0.6;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 35px 35px;
  mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 70%);
}
.route-atlas svg { position: absolute; inset: 2%; width: 96%; height: 96%; }
.route-atlas .landmass { fill: var(--atlas-land); opacity: 0.82; }
.route-atlas .route-line { fill: none; stroke-linecap: round; stroke-dasharray: 8 8; }
.route-atlas .route-main { stroke: var(--atlas-route-main); stroke-width: 3px; }
.route-atlas .route-secondary { stroke: var(--atlas-route-sec); stroke-width: 2px; opacity: 0.75; }
.route-atlas .city { fill: var(--atlas-city); stroke: var(--surface); stroke-width: 3px; }
.route-atlas .city-primary { fill: var(--atlas-city-primary); }

.atlas-label {
  position: absolute; padding: 4px 7px; border-radius: 4px;
  background: var(--atlas-label-bg); color: var(--ink);
  font-size: 0.66rem; font-weight: 700;
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.atlas-label-doha     { top: 25%; left: 67%; }
.atlas-label-port     { top: 48%; left: 39%; }
.atlas-label-khartoum { bottom: 18%; left: 18%; }
.atlas-label-djibouti { bottom: 31%; right: 26%; }
.atlas-label-gulf     { top: 35%; right: 5%; }
.atlas-label-asmara   { top: 19%; left: 26%; }

.atlas-legend {
  position: absolute; bottom: 14px; inset-inline: 16px;
  display: flex; flex-wrap: wrap; gap: 12px;
  color: var(--muted); font-size: 0.66rem;
}
.atlas-legend span { display: flex; align-items: center; gap: 6px; }
.legend-dot { display: block; width: 8px; height: 8px; border-radius: 50%; }
.legend-dot-main { background: var(--amber); }
.legend-dot-sec  { background: var(--teal); }

@media (prefers-reduced-motion: no-preference) {
  .route-atlas .route-main { animation: route-flow 2.8s linear infinite; }
}
@keyframes route-flow { to { stroke-dashoffset: -32; } }

@media (max-width: 620px) {
  .route-atlas { min-height: 320px; }
  .atlas-label { font-size: 0.58rem; }
}

/* ---------- Process timeline ---------- */
.process {
  background: var(--process-bg);
  color: var(--process-ink);
  padding-block: clamp(64px, 9vw, 104px);
}
.process .eyebrow { color: #94dad4; }
.process .eyebrow-line { background: #94dad4; }
.process .section-title { color: var(--process-ink); }
.process .section-sub { color: var(--process-muted); }

.process-track {
  position: relative;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
  max-width: 1000px; margin-inline: auto;
}
.process-track::before {
  content: ""; position: absolute; top: 38px; inset-inline: 40px;
  height: 1px;
  background: linear-gradient(90deg, rgba(126, 228, 220, 0.1), #7ee4dc, rgba(126, 228, 220, 0.1));
}
.process-step { position: relative; }
.step-number {
  display: block; margin-bottom: 8px;
  color: var(--process-muted); font-size: 0.68rem; font-weight: 700;
}
.step-orb {
  display: grid; place-items: center;
  width: 28px; height: 28px; margin-bottom: 18px;
  border: 1px solid #7ee4dc; border-radius: 50%;
  background: var(--process-bg);
}
.step-orb span { width: 8px; height: 8px; border-radius: 50%; background: var(--amber); }
.process-step h3 { margin-bottom: 8px; font-size: 1rem; font-weight: 800; line-height: 1.5; }
.process-step p { max-width: 25ch; color: var(--process-muted); font-size: 0.8rem; line-height: 1.85; }

@media (max-width: 760px) {
  .process-track { grid-template-columns: repeat(2, 1fr); gap: 32px 20px; }
  .process-track::before { display: none; }
}
@media (max-width: 419px) {
  .process-track { grid-template-columns: 1fr; }
}

/* ---------- Other services ---------- */
.more { background: var(--sand); }
.more-grid { display: grid; gap: 0; max-width: 900px; margin-inline: auto; }
.more-item { padding-block: 20px; border-top: 1px solid var(--line); }
.more-grid > .more-item:last-child { border-bottom: 1px solid var(--line); }
.card-title-sm { font-size: 1rem; font-weight: 600; line-height: 1.6; }

@media (min-width: 760px) {
  .more-grid { grid-template-columns: repeat(2, 1fr); column-gap: 48px; }
  .more-grid > .more-item:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
}

/* ---------- About ---------- */
.about { background: var(--surface); }
.about-grid { display: grid; gap: 40px; }
.about-text p { color: var(--muted); max-width: 60ch; line-height: 2; }
.about-text p + p { margin-top: 14px; }
.about-text .section-title { margin-top: 0; margin-bottom: 18px; }
.about-note { margin-top: 22px; font-weight: 600; color: var(--ink) !important; }
.about-facts { display: flex; flex-direction: column; justify-content: center; }
.about-fact { padding-block: 18px; border-top: 1px solid var(--line); }
.about-fact:last-child { border-bottom: 1px solid var(--line); }
.about-fact-label { display: block; font-size: 0.76rem; letter-spacing: 0.08em; color: var(--muted); }
.about-fact-value { font-weight: 700; font-size: 1.06rem; line-height: 1.5; }

@media (min-width: 900px) {
  .about-grid { grid-template-columns: 1.35fr 1fr; gap: 72px; align-items: center; }
}

/* ---------- Contact ---------- */
.contact {
  background: var(--contact-bg);
  color: var(--contact-ink);
  padding-block: clamp(64px, 9vw, 104px);
}
.contact .eyebrow { color: #94dad4; }
.contact .eyebrow-line { background: #94dad4; }
.contact .section-title { color: var(--contact-ink); }
.contact .section-sub { color: var(--contact-muted); }

.contact-grid {
  display: grid; gap: 40px;
  max-width: 1080px; margin-inline: auto;
}
.contact-methods { display: grid; gap: 0 40px; align-content: start; }
.contact-item {
  display: flex; flex-direction: column; text-decoration: none; color: inherit;
  padding-block: 16px; border-top: 1px solid rgba(224, 243, 239, 0.15);
  transition: color 0.15s ease;
}
.contact-methods > .contact-item:last-child { border-bottom: 1px solid rgba(224, 243, 239, 0.15); }
.contact-label { font-size: 0.76rem; letter-spacing: 0.08em; color: var(--contact-muted); }
.contact-value { font-weight: 700; font-size: 1.04rem; line-height: 1.6; }
.contact-value-sm { font-size: 0.95rem; word-break: break-all; }
a.contact-item:hover .contact-value { color: var(--amber); }

.contact-form {
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(224, 243, 239, 0.19);
  border-radius: var(--radius-lg);
  background: rgba(0, 28, 34, 0.2);
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.form-group { margin-bottom: 16px; }
.form-row { display: grid; gap: 16px; }

.contact label {
  display: grid; gap: 5px; font-weight: 700; font-size: 0.72rem; color: #e2eeea;
}

.contact input[type="text"],
.contact input[type="tel"],
.contact input[type="email"],
.contact select,
.contact textarea {
  width: 100%; padding: 10px 12px;
  border: 1px solid rgba(222, 241, 236, 0.2);
  border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, 0.08);
  font: inherit; color: #fffdf7; font-size: 0.82rem;
  transition: border-color 0.18s var(--ease-out), background 0.18s var(--ease-out);
}
.contact input::placeholder, .contact textarea::placeholder { color: #b6d0cc; }
.contact select option { color: #173d44; background: #fffdf7; }
.contact input:focus, .contact select:focus, .contact textarea:focus {
  outline: none; border-color: #f3bb61; background: rgba(255, 255, 255, 0.12);
}
.contact textarea { resize: vertical; min-height: 100px; }

.form-hint { display: block; font-size: 0.68rem; color: #b7d2cd; margin-top: 10px; text-align: center; }
.form-actions { margin-top: 4px; }

.form-status {
  margin-top: 16px; padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500;
}
.form-status.ok { background: rgba(126, 228, 220, 0.15); color: #7ee4dc; }
.form-status.err { background: rgba(255, 193, 168, 0.15); color: #ffc1a8; }

@media (min-width: 620px) {
  .contact-methods { grid-template-columns: repeat(2, 1fr); }
  .contact-methods > .contact-item:nth-last-child(-n+2) { border-bottom: 1px solid rgba(224, 243, 239, 0.15); }
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1fr 1.15fr; gap: 56px; align-items: start; }
  .form-row { grid-template-columns: 1fr 1fr; }
}

/* ---------- File attachment ---------- */

/* ---------- Footer ---------- */
.site-footer {
  background: var(--footer-bg);
  color: var(--footer-ink);
  padding-block: 48px 28px;
}
.footer-inner {
  display: flex; flex-direction: column; gap: 22px;
}
.footer-brand { font-weight: 700; color: #fff; font-size: 1.05rem; }
.footer-copy { font-size: 0.76rem; color: var(--footer-mut); margin-top: 4px; line-height: 1.8; }
.footer-links {
  display: flex; flex-wrap: wrap; gap: 0 8px; margin-inline: -10px;
}
.footer-links a {
  color: var(--footer-ink); text-decoration: none;
  font-size: 0.86rem; padding: 11px 10px; transition: color 0.15s ease;
}
.footer-links a:hover { color: #fff; }

/* Footer identity: the brand mark with its social links directly beneath */
.footer-id { display: flex; align-items: flex-start; gap: 14px; }
.footer-id-text { min-width: 0; }
.footer-mark {
  position: relative; display: grid; place-items: center;
  width: 46px; height: 46px; flex: none;
  border: 2px solid var(--amber);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.footer-mark span {
  position: absolute; display: block;
  width: 22px; height: 2px; border-radius: 9px;
  background: var(--amber); transform: rotate(-20deg);
}
.footer-mark span:nth-child(2) { width: 17px; transform: translateY(7px) rotate(-20deg); background: #7ee4dc; }
.footer-mark span:nth-child(3) { width: 14px; transform: translateY(-7px) rotate(-20deg); background: #fff6e2; }
.footer-social { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.social-btn {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 42px; padding-inline: 12px 16px;
  border-radius: var(--pill);
  background: rgba(238, 168, 62, 0.14);
  border: 1px solid rgba(238, 168, 62, 0.42);
  color: #f8d48a; text-decoration: none;
  font-size: 0.86rem; font-weight: 700;
  transition: background-color 0.16s var(--ease-out), border-color 0.16s var(--ease-out),
              color 0.16s var(--ease-out), transform 0.16s var(--ease-out);
}
.social-btn svg { width: 18px; height: 18px; flex: none; }
.social-btn:hover { background: var(--amber); border-color: var(--amber); color: #17363d; transform: translateY(-2px); }

.footer-phones {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px;
  padding-block: 18px;
  border-top: 1px solid rgba(229, 242, 237, 0.14);
  border-bottom: 1px solid rgba(229, 242, 237, 0.14);
  margin-bottom: 18px;
}
.footer-phone { display: grid; gap: 3px; text-decoration: none; color: var(--footer-ink); transition: color 0.16s var(--ease-out); }
.footer-phone:hover { color: #f2c779; }
.footer-phone-label { font-size: 0.57rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--footer-mut); }
.footer-phone-num { font-weight: 700; font-size: 0.84rem; }

.footer-bottom {
  display: flex; justify-content: space-between; gap: 1rem;
  padding-top: 14px; color: var(--footer-mut); font-size: 0.68rem;
}
.footer-bottom a { display: inline-flex; align-items: center; gap: 4px; color: #e6d1a0; text-decoration: none; }

/* Studio credit. The hairline keeps it from reading as part of the
   contact block above, and 0.68rem is too small for a line meant to be
   read rather than skimmed past. */
.footer-bottom {
  margin-top: 24px;
  border-top: 1px solid rgba(224, 243, 239, 0.12);
}
.footer-credit { margin: 0; font-size: 0.78rem; }
.footer-credit a { font-weight: 700; letter-spacing: 0.04em; }
.footer-credit a:hover { color: #fff; }

@media (min-width: 760px) {
  .footer-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .footer-links { justify-content: flex-end; }
}
@media (max-width: 620px) {
  .footer-phones { grid-template-columns: repeat(2, 1fr); }
  .footer-bottom { flex-direction: column; }
}

/* ---------- Mobile call bar ---------- */
.mobile-bar {
  position: fixed; bottom: 0; inset-inline: 0; z-index: 150;
  display: none; align-items: center; gap: 10px;
  padding: 10px 16px;
  background: var(--amber); color: #10343c;
  box-shadow: 0 -8px 25px rgba(0, 0, 0, 0.14);
}
.mobile-bar-icon {
  display: grid; place-items: center; flex: none;
  width: 33px; height: 33px; border-radius: 50%;
  background: #0d4a54; color: #fff8e9;
}
.mobile-bar-text { display: grid; gap: 1px; min-width: 0; }
.mobile-bar-text small { font-size: 0.53rem; font-weight: 800; }
.mobile-bar-text strong { font-size: 0.78rem; }
/* Padded to a 44px tap target - as bare text this was ~21px tall, under the
   24px WCAG 2.5.8 minimum, and it is the primary call action on mobile. */
.mobile-bar-cta {
  margin-inline-start: auto;
  display: inline-flex; align-items: center;
  min-height: 44px; padding-inline: 14px;
  font-size: 0.72rem; font-weight: 800;
  text-decoration: none; color: inherit;
  border: 1px solid rgba(16, 52, 60, 0.35);
  border-radius: var(--pill);
}

@media (max-width: 900px) {
  .mobile-bar { display: flex; }
  body { padding-bottom: 56px; }
  .site-footer { padding-bottom: 72px; }
}

/* ---------- Lightbox ---------- */
.lightbox {
  border: 0; padding: 0; background: transparent;
  max-width: 100vw; max-height: 100vh; width: 100vw; height: 100vh; overflow: hidden;
}
.lightbox::backdrop { background: rgba(5, 42, 51, 0.92); }
.lightbox-img {
  max-width: min(92vw, 700px); max-height: 88vh;
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
  margin: auto; background: #fff;
}
.lightbox button {
  position: fixed; display: flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.14); color: #fff;
  transition: background-color 0.15s ease;
}
.lightbox button:hover { background: rgba(255, 255, 255, 0.28); }
.lightbox-close { top: 16px; inset-inline-end: 16px; }
.lightbox-prev { top: 50%; inset-inline-start: 12px; transform: translateY(-50%); }
.lightbox-next { top: 50%; inset-inline-end: 12px; transform: translateY(-50%); }

/* ---------- Reveal ---------- */
.reveal { opacity: 0; transform: translateY(10px); transition: opacity 0.5s ease, transform 0.5s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Animations ---------- */
@media (prefers-reduced-motion: no-preference) {
  .pulse-dot { animation: pulse 2s ease-in-out infinite; }
}
@keyframes pulse { 50% { box-shadow: 0 0 0 10px rgba(126, 228, 220, 0); } }
.pulse-dot {
  display: block; width: 7px; height: 7px;
  border-radius: 50%; background: #7ee4dc;
  box-shadow: 0 0 0 5px rgba(126, 228, 220, 0.12);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  .route-atlas .route-main { animation: none; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}