/* BookerInvest — dark navy canvas, gold hairlines, off-white type.
   Layout uses CSS logical properties (inline-start/end, margin-inline, …)
   so switching dir="rtl" / dir="ltr" needs no extra rules.

   House rules for this design: no shadows, no surface gradients.
   Corners are rounded on one consistent pair of tokens — 8px on
   surfaces, 6px on controls; nothing mixed. Icons are inline stroke
   SVG authored in this repo (no library, no npm), 1.5px on a 20px
   box, gold, with directional glyphs mirrored by transform under RTL.
   Separation is otherwise done with 1px rules and whitespace. Presence
   comes from type scale, asymmetry, and a near-invisible background
   mesh — never from ornament.

   The only repeating-linear-gradients here are hard-stop hairline
   patterns (the background mesh); nothing is a soft colour blend. */

:root {
  --navy: #0b1b2b;
  --gold: #c9a227;
  --gold-dim: #a8871f;
  --paper: #f2efe9;

  --muted: rgba(242, 239, 233, 0.58);
  --quiet: rgba(242, 239, 233, 0.48);
  --rule: rgba(201, 162, 39, 0.32);        /* gold hairline — section boundaries */
  --rule-quiet: rgba(242, 239, 233, 0.14); /* neutral hairline — inside sections */
  --mesh: rgba(242, 239, 233, 0.028);      /* background grid — barely there */
  --numeral: rgba(201, 162, 39, 0.075);    /* oversized section digits */

  --font-latin: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-arabic: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif;

  --container: 72rem;
  --track: 0.18em;   /* letter-spacing for latin small caps-ish labels */
  --mesh-step: 5.5rem;

  --radius-surface: 8px;   /* bounded surfaces — portrait, plates */
  --radius-control: 6px;   /* anything you press — buttons, toggles */
}

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  background: var(--navy);   /* propagates to the canvas; body stays transparent */
}

html[lang="en"] { font-family: var(--font-latin); }
html[lang="ar"] { font-family: var(--font-arabic); }

body {
  margin: 0;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 300;
  line-height: 1.6;
  color: var(--paper);
  background: transparent;
  -webkit-font-smoothing: antialiased;
}

html[lang="ar"] body { line-height: 1.8; }

/* Fixed navy-on-navy mesh. Sits behind everything (body has no background
   of its own, so a negative z-index still paints above the canvas). */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(to right, var(--mesh) 0 1px, transparent 1px var(--mesh-step)),
    repeating-linear-gradient(to bottom, var(--mesh) 0 1px, transparent 1px var(--mesh-step));
}

h1, h2, h3 { margin: 0 0 0.5em; font-weight: 300; line-height: 1.15; }
p { margin: 0 0 1em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--gold); color: var(--navy); }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

/* Latin labels are tracked-out uppercase; Arabic takes neither. */
.eyebrow,
.btn,
.lang-toggle,
.contact-label,
.footer-follow,
.portrait-fallback,
.site-nav a {
  letter-spacing: var(--track);
  text-transform: uppercase;
}

html[lang="ar"] .eyebrow,
html[lang="ar"] .btn,
html[lang="ar"] .lang-toggle,
html[lang="ar"] .contact-label,
html[lang="ar"] .footer-follow,
html[lang="ar"] .portrait-fallback,
html[lang="ar"] .site-nav a {
  letter-spacing: normal;
  text-transform: none;
}

/* ---------- accessibility helpers ---------- */

.skip-link {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: 1.5rem;
  z-index: 100;
  padding: 0.7rem 1.1rem;
  background: var(--gold);
  color: var(--navy);
  border-radius: var(--radius-control);
  font-size: 0.8rem;
}
.skip-link:focus { inset-block-start: 0; }

:focus-visible {
  outline: 1px solid var(--gold);
  outline-offset: 4px;
}

.load-error {
  margin: 0;
  padding: 1rem 1.5rem;
  background: transparent;
  color: var(--gold);
  border-block-end: 1px solid var(--rule);
  font-size: 0.85rem;
}

/* ---------- scroll entrance ----------
   The pre-reveal state is applied only once JS has confirmed it can run
   and that motion is welcome — no JS, no IntersectionObserver, or
   prefers-reduced-motion all leave the content plainly visible. */

html.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(12px);
}

html.js-reveal [data-reveal].is-revealed {
  opacity: 1;
  transform: none;
  transition: opacity 400ms ease-out, transform 400ms ease-out;
}

/* ---------- header ---------- */

.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: 50;
  background: var(--navy);
  border-block-end: 1px solid var(--rule-quiet);
  transition: transform 0.3s ease;
}

/* One size at every scroll position — .is-hidden only slides it out of the
   way on scroll down, see setUpHeader() in app.js. Class-driven, so without
   JS the header simply stays put and sticky. */
.site-header.is-hidden { transform: translateY(-100%); }

/* align-items:center puts the mark and the nav text on one shared centre
   line, and the row gap is matched to the block padding so the space above
   the mark, below it, and between the wrapped rows all read as equal. */
.header-inner {
  display: flex;
  align-items: center;
  gap: 0.6rem 1rem;   /* row / column — row gap tracks padding-block */
  flex-wrap: wrap;
  padding-block: 0.6rem;
}

/* The brand is the mark and nothing else — no type sits beside it. If the
   SVG ever fails to load the img's alt (brand.name, i18n) stands in, which
   needs no JS and no styling of its own. */
.brand {
  display: inline-flex;
  align-items: center;
  color: var(--paper);
}

/* Height only, width always auto — the lockup is ~4:1, so any fixed width
   would squash it. */
.brand img {
  display: block;
  block-size: 44px;
  inline-size: auto;
}

.site-nav { order: 3; flex-basis: 100%; }

.site-nav ul {
  display: flex;
  gap: 1.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.site-nav ul::-webkit-scrollbar { display: none; }

.site-nav a {
  white-space: nowrap;
  font-size: 0.78rem;
  color: var(--muted);
  transition: color 0.2s ease;
}
html[lang="ar"] .site-nav a { font-size: 0.97rem; }   /* same 1.147× step as latin */
.site-nav a:hover { color: var(--gold); }

.lang-toggle {
  margin-inline-start: auto;
  font: inherit;
  font-size: 0.68rem;
  font-weight: 400;
  padding-block: 0.6rem;    /* padding alone defines the height — no fixed size */
  padding-inline: 1.05rem;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-control);   /* only shapes the focus ring now */
  cursor: pointer;
  transition: color 0.2s ease;
}
.lang-toggle:hover { color: var(--gold); }

/* This button's label is always in the language the page is NOT in, so it
   can't follow the page for anything. IBM Plex Sans Arabic ships a matching
   Latin, so one stack renders BOTH labels and the toggle reads exactly like
   the Arabic pages in either direction — no swapping.

   flex/white-space are what actually stop the clipping: the header is a
   nowrap flex row above 60rem, the button defaults to flex-shrink: 1, and a
   <button> clips its own overflow — so once the row got tight the label was
   being squeezed and cut off mid-word. One font-size serves both labels. */
#lang-toggle {
  /* Safari (all of iOS, and macOS) renders <button> with native appearance,
     which constrains the content box and clips tall scripts — it ignores
     overflow:visible on the button itself. Killing appearance and making the
     button a flex box means the label sits in a real line box we control. */
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;

  font-family: var(--font-arabic);
  font-size: 0.82rem;   /* one size for both labels, whichever is showing */
  line-height: 1.7;
  overflow: visible;
  flex: none;
  white-space: nowrap;
}

/* ---------- buttons ---------- */

/* Same treatment as #lang-toggle: a real line box we control, padding-defined
   height, nothing clipped. These are <a>, not <button>, so they escape
   Safari's native-control constraint — but they're the same shape, and the
   Arabic label runs a third larger than the Latin one. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
  gap: 0.6rem;            /* glyph → label; inert on the label-only buttons */
  line-height: 1.7;
  padding: 1.05rem 2.75rem;
  font-size: 0.72rem;
  font-weight: 400;
  color: var(--gold);
  background: transparent;
  border: 1px solid var(--gold);
  border-radius: var(--radius-control);
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}
html[lang="ar"] .btn { font-size: 0.92rem; }
.btn:hover { background: var(--gold); color: var(--navy); }

/* The quiet twin: no frame, gold type, underline arriving only on hover. */
.btn-secondary {
  padding-block: 0.4rem;
  padding-inline: 0;
  border: 0;
  color: var(--gold);
}
.btn-secondary:hover {
  background: transparent;
  color: var(--gold);
  text-decoration: underline;
  text-underline-offset: 0.35em;
}

/* ---------- hero ---------- */

.hero {
  display: grid;
  align-content: center;
  min-block-size: 78vh;
  padding-block: 6rem 5rem;
}

.hero-title {
  font-size: clamp(3rem, 10.5vw, 7rem);
  font-weight: 300;
  line-height: 1.02;
  max-width: 15ch;
  margin: 0;
}
html[lang="en"] .hero-title { letter-spacing: -0.035em; }
html[lang="ar"] .hero-title { font-weight: 400; line-height: 1.22; letter-spacing: 0; }

/* thin gold rule that draws itself in beneath the headline */
.hero-rule {
  display: block;
  inline-size: min(26rem, 55%);
  block-size: 1px;
  margin-block: 2.75rem 0;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left center;
  animation: draw-rule 1100ms cubic-bezier(0.16, 1, 0.3, 1) 300ms forwards;
}
html[dir="rtl"] .hero-rule { transform-origin: right center; }

@keyframes draw-rule {
  to { transform: scaleX(1); }
}

.hero .btn { margin-block-start: 3rem; }

/* ---------- shared section furniture ---------- */

.section {
  position: relative;
  overflow: hidden;              /* clips the bleeding numeral */
  border-block-start: 1px solid var(--rule);
  padding-block: 4.5rem;
}

/* content rides above the oversized numeral */
.section > .container { position: relative; z-index: 1; }

.section-numeral {
  position: absolute;
  inset-block-start: 1.5rem;
  inset-inline-start: -0.05em;
  z-index: 0;
  font-family: var(--font-latin);
  font-size: clamp(6rem, 19vw, 14rem);
  font-weight: 300;
  line-height: 0.75;
  letter-spacing: -0.05em;
  color: var(--numeral);
  user-select: none;
  pointer-events: none;
}

.eyebrow {
  margin: 0 0 1.5rem;
  font-size: 0.68rem;
  font-weight: 400;
  color: var(--gold);
}
html[lang="ar"] .eyebrow { font-size: 0.85rem; }

.section-title {
  font-size: clamp(2.1rem, 6vw, 4rem);
  font-weight: 300;
  line-height: 1.08;
  max-width: 20ch;
  margin: 0 0 1.5rem;
}
html[lang="en"] .section-title { letter-spacing: -0.03em; }
html[lang="ar"] .section-title { line-height: 1.3; letter-spacing: 0; }

.section-intro {
  max-width: 44ch;
  font-size: 1rem;
  line-height: 1.65;
  color: var(--muted);
  margin-block-end: 3.5rem;
}
html[lang="ar"] .section-intro { line-height: 1.85; }

/* split sections keep their intro tight to the head block */
.section-head .section-intro { margin-block-end: 2.5rem; }

.split-grid { display: grid; gap: 3rem; }

/* item headings — one clear step below .section-title */
.about-points h3,
.ledger-head h3,
.feature-list h3,
.step-body h3 {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.35;
  margin-block-end: 0.55rem;
}

.about-points p,
.ledger-row p,
.feature-list p,
.step-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--muted);
}
html[lang="ar"] .about-points p,
html[lang="ar"] .ledger-row p,
html[lang="ar"] .feature-list p,
html[lang="ar"] .step-body p { line-height: 1.8; }

/* ---------- icons ----------
   Inline stroke SVG, authored on a 20-unit grid with a 2-unit margin so
   every glyph shares the same optical weight and live area. Meaning is
   carried by the adjacent text; the glyphs are aria-hidden. */

.icon {
  display: block;
  flex: none;
  inline-size: 20px;
  block-size: 20px;
  color: var(--gold);
}

/* Directional glyphs mirror with the writing direction — one asset,
   flipped, never a second file. */
html[dir="rtl"] .icon--flip { transform: scaleX(-1); }

/* Glyphs that sit on a line of type rather than above it: they take the
   colour of the label beside them, so they invert with .btn on hover and
   warm to gold with a footer link. Third-party brand marks wear this class
   too — those arrive filled on their own 24-unit grid and are never
   redrawn to the house stroke grid, nor mirrored under RTL. */
.icon-inline {
  display: block;
  flex: none;
  inline-size: 18px;
  block-size: 18px;
}

/* In a button the glyph tracks the label, which is a third larger in Arabic. */
.btn .icon-inline {
  inline-size: 1.3em;
  block-size: 1.3em;
}

/* icon + gold marker share a line above the item title */
.item-meta {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-block-end: 0.9rem;
}
.item-meta .card-index { margin-block-end: 0; }

/* small tracked numerals — services ledger index */
.card-index {
  display: block;
  font-family: var(--font-latin);
  font-size: 0.7rem;
  font-weight: 400;
  letter-spacing: 0.12em;
  color: var(--gold);
  margin-block-end: 0.9rem;
}

/* ---------- about ---------- */

.about-grid { display: grid; gap: 2.5rem; }

.about-copy p:first-child {
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--paper);
}
html[lang="ar"] .about-copy p:first-child { line-height: 1.75; }
.about-copy p + p { color: var(--muted); font-size: 0.98rem; }
.about-copy p:last-child { margin-block-end: 0; }

.about-points {
  display: grid;
  gap: 1.75rem;
  margin-block-start: 3.5rem;
}

.about-points li {
  border-block-start: 1px solid var(--rule-quiet);
  padding-block-start: 1.35rem;
}

/* ---------- portrait (duotone: navy shadows, gold highlights) ---------- */

.portrait {
  position: relative;
  isolation: isolate;          /* keeps the blend off the page background */
  margin: 0;
  aspect-ratio: 4 / 5;
  background: var(--navy);
  border: 1px solid var(--rule-quiet);
  border-radius: var(--radius-surface);
  overflow: hidden;               /* clips the image to the radius */
}

.portrait img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.15);
  mix-blend-mode: screen;      /* map shadows onto the navy plate */
}

.portrait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--gold);
  mix-blend-mode: multiply;    /* …and highlights onto gold */
  pointer-events: none;
}

/* graceful fallback: JS adds .is-missing when the file doesn't load */
.portrait-fallback {
  display: none;
  font-size: 0.68rem;
  color: var(--quiet);
}
html[lang="ar"] .portrait-fallback { font-size: 0.82rem; }

.portrait.is-missing img { display: none; }
.portrait.is-missing::after { display: none; }
.portrait.is-missing {
  display: grid;
  place-content: center;
  border-color: var(--rule);
}
.portrait.is-missing .portrait-fallback { display: block; }

/* ---------- services (ledger rows) ---------- */

.ledger { display: block; }

.ledger-row {
  display: grid;
  gap: 0.75rem;
  border-block-start: 1px solid var(--rule-quiet);
  padding-block: 1.75rem;
}
.ledger-row:last-child { border-block-end: 1px solid var(--rule-quiet); }

/* ---------- why us ---------- */

.feature-list { display: grid; gap: 2.25rem; }

.feature-list li {
  border-block-start: 1px solid var(--rule-quiet);
  padding-block-start: 1.5rem;
}

/* ---------- process ---------- */

.steps { display: block; }

.step {
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: 1.25rem;
  align-items: start;
  border-block-start: 1px solid var(--rule-quiet);
  padding-block: 1.75rem;
}
.step:last-child { border-block-end: 1px solid var(--rule-quiet); }

.step-number {
  font-family: var(--font-latin);
  font-size: 1.75rem;
  font-weight: 300;
  line-height: 1;
  color: var(--gold);
}

.step-heading {
  display: flex;
  align-items: start;
  gap: 0.65rem;
  margin-block-end: 0.55rem;
}
.step-heading h3 { margin-block-end: 0; }
.step-heading .icon { margin-block-start: 0.1rem; }   /* optically on the first line */

/* ---------- contact ---------- */

.contact-grid { display: grid; gap: 3.5rem; }

.contact-details { align-content: start; }

.contact-details li {
  border-block-start: 1px solid var(--rule-quiet);
  padding-block: 1.15rem;
}
.contact-details li:last-child { border-block-end: 1px solid var(--rule-quiet); }

.contact-label {
  display: block;
  font-size: 0.66rem;
  color: var(--muted);
  margin-block-end: 0.3rem;
}
html[lang="ar"] .contact-label { font-size: 0.82rem; }

.contact-value { display: block; font-size: 1rem; }

/* Two calls to action stacked: Calendly framed and full width, WhatsApp
   centred beneath it with nothing around it. */
.contact-cta {
  display: grid;
  justify-items: stretch;
  gap: 1rem;
  align-self: center;
}

.contact-cta .btn { padding-inline: 1.5rem; }

/* hit area matches the type, so the hover underline reads as a link */
.contact-cta .btn-secondary {
  justify-self: center;
  padding-inline: 0;
}

/* ---------- footer ---------- */

.site-footer {
  border-block-start: 1px solid var(--rule);
  padding-block: 3rem;
  font-size: 0.8rem;
  color: var(--muted);
}
.footer-brand { margin-block-end: 1.75rem; }
.footer-brand img { block-size: 32px; }

.footer-inner p { margin: 0; }
.footer-note { color: var(--quiet); margin-block-start: 0.5rem; }

/* social row — quiet links, wrapping to as many lines as the width needs */
.footer-social { margin-block-start: 2rem; }

.footer-follow {
  margin: 0 0 0.9rem;
  font-size: 0.66rem;
  font-weight: 400;
  color: var(--quiet);
}
html[lang="ar"] .footer-follow { font-size: 0.82rem; }

.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65rem 1.75rem;
}

.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  color: var(--muted);
  transition: color 0.2s ease;
}
html[lang="ar"] .footer-links a { font-size: 0.9rem; }
.footer-links a:hover { color: var(--gold); }

.footer-disclaimer {
  max-width: 78ch;
  margin: 2rem 0 0;
  padding-block-start: 1.5rem;
  border-block-start: 1px solid var(--rule-quiet);
  font-size: 0.74rem;
  line-height: 1.7;
  color: var(--quiet);
}
html[lang="ar"] .footer-disclaimer { font-size: 0.8rem; }

/* ---------- larger screens ---------- */

@media (min-width: 40rem) {
  :root { --mesh-step: 7rem; }

  .container { padding-inline: 2.5rem; }
  .hero { min-block-size: 82vh; padding-block: 8rem 6rem; }
  .section { padding-block: 6rem; }
  .section-numeral { inset-block-start: 2rem; }

  .about-points { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .feature-list { grid-template-columns: repeat(2, 1fr); gap: 2.5rem 3rem; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 4rem; }
}

@media (min-width: 60rem) {
  .header-inner { flex-wrap: nowrap; }
  .site-nav { order: 0; flex-basis: auto; margin-inline-start: 3.5rem; }
  .site-nav ul { overflow: visible; }

  .hero { min-block-size: 88vh; padding-block: 10rem 8rem; }
  .section { padding-block: 8rem; }

  /* Asymmetric splits, alternating which side leads. */

  /* about — copy leads 58 / portrait trails 42 */
  .about-grid { grid-template-columns: 1.4fr 1fr; gap: 4.5rem; align-items: start; }
  .about-points { margin-block-start: 5rem; }

  /* services — index + title 42 / description 58, as ledger rows */
  .ledger-row {
    grid-template-columns: 0.72fr 1fr;
    gap: 3.5rem;
    padding-block: 2.25rem;
  }
  .ledger-head h3 { margin-block-end: 0; }

  /* why us — head leads 38 / items 62 */
  .split-grid { grid-template-columns: 0.62fr 1fr; gap: 5rem; }
  .section-split .section-head .section-intro { margin-block-end: 0; }

  /* process — steps lead 62 / head trails 38; the numeral follows the head */
  .section-split-reverse .split-grid { grid-template-columns: 1fr 0.62fr; }
  .section-split-reverse .section-numeral {
    inset-inline-start: auto;
    inset-inline-end: -0.05em;
  }
  .section-split-reverse .section-head { grid-column: 2; grid-row: 1; }
  .section-split-reverse .steps { grid-column: 1; grid-row: 1; }

  .step { grid-template-columns: 4.5rem 1fr; gap: 2rem; padding-block: 2.25rem; }
  .step-number { font-size: 2.25rem; }

  /* contact — details lead 62 / action trails 38 */
  .contact-grid { grid-template-columns: 1.25fr 0.75fr; gap: 6rem; }

  .footer-inner { display: flex; justify-content: space-between; align-items: baseline; }
  .footer-note { margin-block-start: 0; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * {
    transition: none !important;
    animation: none !important;
  }
  .hero-rule { transform: scaleX(1); }
  html.js-reveal [data-reveal] { opacity: 1; transform: none; }
}