/* Bright Beam Logistics — bbl.taxi
   Minimal: white ground, thin slate lines and one orange accent, taken from the bbl logo. */

/* Thmanyah typeface — © Thmanyah Publishing & Distribution, used under its licence
   (see THMANYAH-FONT-LICENSE.pdf at the repo root). Files are the unmodified
   originals from font.thmanyah.com; the licence forbids altering them, so they
   are NOT subsetted. Only the five weights the design actually uses are shipped. */
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay-Light.woff2") format("woff2");
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Display";
  src: url("/fonts/thmanyahserifdisplay-Bold.woff2") format("woff2");
  font-weight: 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("/fonts/thmanyahseriftext-Regular.woff2") format("woff2");
  font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Thmanyah Serif Text";
  src: url("/fonts/thmanyahseriftext-Medium.woff2") format("woff2");
  font-weight: 500; font-style: normal; font-display: swap;
}

:root {
  --ground: #FFFFFF;
  --ink: #12252E;
  --slate: #2D5264;
  --muted: #5C7079;
  --line: #E1E8EB;
  --accent: #F29627;
  --ok: #1D7A4A;
  --error: #B42318;

  --font-display: "Thmanyah Serif Display", "Segoe UI", Tahoma, serif;
  --font-body: "Thmanyah Serif Text", "Segoe UI", Tahoma, Arial, serif;

  --gutter: clamp(20px, 5vw, 40px);
}

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

html { scroll-behavior: smooth; scroll-padding-top: 88px; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.8;
}

h1, h2, h3, h4, p, ul, ol { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 400; line-height: 1.35; text-wrap: balance; }
a { color: inherit; text-decoration: none; }
svg { display: block; }

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

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

.skip {
  position: absolute; inset-inline-start: 12px; top: -60px; z-index: 100;
  background: var(--ink); color: #fff; padding: 8px 14px;
}
.skip:focus { top: 12px; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.header-row { display: flex; align-items: center; gap: 32px; min-height: 72px; }
.brand { display: flex; align-items: center; gap: 14px; }
.brand-mark { width: 66px; height: 37px; flex: none; color: var(--slate); }
.brand-name { font-family: var(--font-display); font-weight: 400; font-size: 1rem; }

.nav { display: flex; gap: 32px; margin-inline-start: auto; }
.nav a, .lang-btn { font-size: .9375rem; color: var(--muted); transition: color .15s ease; }
.nav a:hover, .lang-btn:hover { color: var(--ink); }
.lang-btn {
  min-width: 44px; min-height: 44px; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--font-display); font-weight: 700; color: var(--ink);
  line-height: 1;
}
/* The button shows "EN" on the Arabic page but a single "ع" on the English one;
   one Arabic letter needs to be set larger to carry the same optical weight. */
html[lang="en"] .lang-btn { font-size: 1.625rem; }

@media (max-width: 720px) {
  .nav { display: none; }
  .lang-btn { margin-inline-start: auto; }
}

/* ---------- Hero ---------- */
.hero { padding-block: clamp(72px, 12vw, 160px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(32px, 6vw, 96px); align-items: center; }
.eyebrow { font-size: .875rem; color: var(--muted); margin-bottom: 28px; }
.hero h1 { font-weight: 300; font-size: clamp(2.25rem, 6vw, 4.25rem); line-height: 1.3; }
[lang="en"] .hero h1 { line-height: 1.12; letter-spacing: -.02em; }
.dot { color: var(--accent); }
.lede { margin-top: 28px; max-width: 32em; color: var(--muted); font-size: 1.125rem; }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 32px; margin-top: 44px; }

/* The bowl of the logo's "b": thin ring, orange disc */
.hero-mark { width: clamp(180px, 24vw, 300px); height: auto; color: var(--slate); }
@media (max-width: 720px) {
  .hero-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-mark { display: none; }
}

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 12px 32px;
  background: var(--ink); color: #fff;
  border: 0; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-weight: 400; font-size: 1rem; line-height: 1.2;
  transition: background-color .15s ease;
}
.btn:hover { background: var(--slate); }
.btn[disabled] { opacity: .55; cursor: progress; }
.link { padding-block: 4px; border-bottom: 1px solid var(--ink); transition: color .15s ease, border-color .15s ease; }
.link:hover { color: var(--accent); border-color: var(--accent); }

/* ---------- Sections ---------- */
.section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.label {
  display: flex; align-items: center; gap: 12px;
  font-family: var(--font-body); font-size: .9375rem; font-weight: 500; color: var(--muted);
  margin-bottom: clamp(32px, 5vw, 56px);
}
.label::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }

/* Services */
.lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px clamp(32px, 8vw, 120px); }
.lanes h3 { font-weight: 300; font-size: clamp(1.5rem, 3vw, 2rem); margin-bottom: 16px; }
.svc-list li { padding-block: 18px; border-top: 1px solid var(--line); }
.svc-list h4 { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.6; }
.svc-list p { color: var(--muted); font-size: 1rem; }
@media (max-width: 720px) { .lanes { grid-template-columns: minmax(0, 1fr); } }

/* Steps — a real sequence, so it is numbered */
.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px clamp(24px, 5vw, 64px); counter-reset: step; }
.steps li { counter-increment: step; }
.steps li::before {
  content: counter(step, decimal-leading-zero);
  display: block; margin-bottom: 14px;
  font-family: var(--font-display); font-weight: 300; font-size: 2rem; line-height: 1; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
[lang="ar"] .steps li::before { content: counter(step, arabic-indic); }
.steps h3 { font-family: var(--font-body); font-weight: 500; font-size: 1.0625rem; line-height: 1.6; }
.steps p { color: var(--muted); font-size: 1rem; }
@media (max-width: 720px) { .steps { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 56px clamp(32px, 8vw, 120px); align-items: start; }
.channels li { border-top: 1px solid var(--line); }
.channels li:last-child { border-bottom: 1px solid var(--line); }
.channels a { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 4px 16px; padding-block: 18px; }
.ch-label { color: var(--muted); font-size: .9375rem; }
.ch-value { font-family: var(--font-display); font-weight: 400; font-size: 1.0625rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; transition: color .15s ease; }
.channels a:hover .ch-value { color: var(--accent); }

.form { position: relative; display: grid; gap: 24px; }
.field { display: grid; gap: 4px; }
.field label { font-size: .875rem; color: var(--muted); }
.field input, .field select, .field textarea {
  width: 100%; min-height: 44px; padding: 8px 0;
  font: inherit; color: var(--ink);
  background: transparent; border: 0; border-bottom: 1px solid var(--slate); border-radius: 0;
}
.field textarea { resize: vertical; min-height: 96px; line-height: 1.7; }
.field ::placeholder { color: #9AA9B0; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-bottom: 2px solid var(--accent); padding-bottom: 7px; }
[dir="rtl"] .field input[dir="ltr"] { text-align: right; }
.field [aria-invalid="true"] { border-bottom-color: var(--error); }
.hp { position: absolute; inset-inline-start: 0; bottom: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); opacity: 0; pointer-events: none; }
.form .btn { justify-self: start; }
.form-status { min-height: 1.8em; font-size: .9375rem; }
.form-status.ok { color: var(--ok); }
.form-status.err { color: var(--error); }
@media (max-width: 720px) {
  .contact-grid { grid-template-columns: minmax(0, 1fr); }
  .form .btn { justify-self: stretch; }
}

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding-block: 32px calc(32px + env(safe-area-inset-bottom, 0px)); color: var(--muted); font-size: .875rem; }
.footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 32px; }
.footer-name { color: var(--ink); }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; }
}

/* ============================================================
   Motion
   Gated on .js (set by lang-boot.js before the first paint), so with scripting
   off nothing is hidden. Everything is opacity/transform only — no layout
   properties — so it stays cheap on low-end phones, and all of it is switched
   off under prefers-reduced-motion at the end of this block.
   ============================================================ */

/* ---------- Hero: settles in on load, no JS involved ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.035); } }

.js .hero-copy > * { animation: rise .7s cubic-bezier(.22, .61, .36, 1) backwards; }
.js .hero-copy > *:nth-child(1) { animation-delay: .05s; }
.js .hero-copy > *:nth-child(2) { animation-delay: .14s; }
.js .hero-copy > *:nth-child(3) { animation-delay: .23s; }
.js .hero-copy > *:nth-child(4) { animation-delay: .32s; }

.js .hero-mark { animation: fade .8s ease backwards .15s; }
/* 2πr for r=156 ≈ 980 — the ring draws itself on. */
.js .hero-mark .ring { stroke-dasharray: 980; stroke-dashoffset: 980; animation: draw 1.5s cubic-bezier(.22, .61, .36, 1) forwards .2s; }
.js .hero-mark .disc { transform-origin: 160px 160px; animation: breathe 7s ease-in-out infinite 1.2s; }

/* ---------- Scroll reveal ---------- */
/* app.js adds .in as each element comes into view, and sets .reveal-ready on <html>
   to switch the safety animation off. If app.js never loads, that safety reveals
   everything after 4s so content is never stranded behind broken JS. */
.js [data-reveal] {
  opacity: 0; transform: translateY(14px);
  animation: rise .01s linear 4s both;
}
.js.reveal-ready [data-reveal] { animation: none; }
.js [data-reveal].in {
  opacity: 1; transform: none; animation: none;
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, .61, .36, 1);
}
/* Stagger items within a list/row. */
.js [data-reveal]:nth-child(2).in { transition-delay: .06s; }
.js [data-reveal]:nth-child(3).in { transition-delay: .12s; }
.js [data-reveal]:nth-child(4).in { transition-delay: .18s; }

/* ---------- Hover / focus polish ---------- */
.brand-mark { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.brand:hover .brand-mark { transform: scale(1.05); }
.btn { transition: background-color .15s ease, transform .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.svc-list h4 { transition: color .15s ease; }
.svc-list li:hover h4 { color: var(--accent); }
.steps li::before { transition: transform .3s cubic-bezier(.22, .61, .36, 1); }
.steps li:hover::before { transform: translateY(-2px); }

/* ---------- Respect the OS setting ---------- */
@media (prefers-reduced-motion: reduce) {
  .js .hero-copy > *,
  .js .hero-mark,
  .js .hero-mark .ring,
  .js .hero-mark .disc,
  .js [data-reveal],
  .js [data-reveal].in {
    animation: none;
    transition: none;
    opacity: 1;
    transform: none;
    stroke-dashoffset: 0;
  }
  .brand-mark, .btn, .svc-list h4, .steps li::before { transition: none; }
  .brand:hover .brand-mark, .btn:hover, .steps li:hover::before { transform: none; }
}