/* ==========================================================================
   طلال حمود — موزع معتمد لإسمنت البادية
   Hand-written CSS. No framework: the page already carries 1.26MB of hero
   frames, so every extra kilobyte here comes out of the user's patience.
   Logical properties throughout so the AR (rtl) and EN (ltr) pages share
   this one file.
   ========================================================================== */

:root {
  /* Palette lifted from the product itself: kraft paper bags, the green and
     red printed panels, and the concrete dust they sit in. */
  --kraft:        #e6d9bd;
  --kraft-dim:    #d3c3a1;
  --paper:        #f7f2e8;
  --green:        #17694a;
  --green-bright: #1f8b61;
  --red:          #b7312c;
  --red-bright:   #d6423b;
  --ink:          #1a1714;
  --ink-soft:     #4a423a;
  --concrete:     #2b2723;
  --concrete-mid: #3d3832;
  --line:         rgba(26, 23, 20, .14);
  --line-dark:    rgba(230, 217, 189, .16);

  --wa:           #25d366;
  --fb:           #1877f2;

  --shell:        min(1120px, 100% - 2.5rem);
  --bar-h:        4.5rem;

  --f-display: "Rubik", "Cairo", "Noto Kufi Arabic", "SF Arabic",
               "Segoe UI", system-ui, sans-serif;
  --f-body:    "Noto Naskh Arabic", "SF Arabic", "Segoe UI", system-ui,
               -apple-system, sans-serif;
}

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

/* Deliberately no `scroll-behavior: smooth`. It caused visible drift back
   when ScrollTrigger did the pinning; with the sticky pin that specific
   conflict is gone, but an animated scroll still fights a scroll-driven
   sequence — the position keeps moving after the finger stops. There is no
   in-page anchor nav that would benefit from it either. */
/* 112.5% = an 18px base instead of 16px. Everything downstream is sized in
   rem, so raising the root lifts type AND the spacing around it together —
   text gets bigger without the layout getting tighter around it. */
html { -webkit-text-size-adjust: 100%; font-size: 112.5%; }

body {
  margin: 0;
  font-family: var(--f-body);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--paper);
  /* Room for the sticky action bar so the last section is never trapped
     underneath it. */
  padding-block-end: var(--bar-h);

  /* NOT `overflow-x: hidden`. Per spec, when one axis is hidden the other
     computes from `visible` to `auto` — so body became `hidden auto`, i.e. a
     scroll container. `position: sticky` anchors to its nearest scroll
     container, so the pinned hero was anchoring to a body that never scrolls
     internally, and simply scrolled away instead of pinning.
     `clip` clips the same overflow WITHOUT establishing a scrollport, so
     sticky keeps resolving against the viewport. */
  overflow-x: clip;
}

h1, h2, h3, .display { font-family: var(--f-display); line-height: 1.15; }

a { color: inherit; }

img, canvas { display: block; max-width: 100%; }

.shell { inline-size: var(--shell); margin-inline: auto; }

/* --------------------------------------------------------------------------
   Preloader — holds the page for the first hero frame only, so the hero never
   renders as an empty box. The remaining 39 frames stream in behind the live
   page. Waiting for all forty cost ~25s on a slow connection; waiting for one
   costs a fraction of a second.
   -------------------------------------------------------------------------- */
#preloader {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-content: center;
  gap: 1.75rem;
  justify-items: center;
  background: var(--concrete);
  color: var(--kraft);
  text-align: center;
  padding: 2rem;
  transition: opacity .5s ease;
}
#preloader.done { opacity: 0; pointer-events: none; }

.pre-mark {
  font-family: var(--f-display);
  font-size: clamp(1.5rem, 6vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.01em;
}
.pre-sub {
  font-size: .8rem;
  letter-spacing: .18em;
  color: var(--kraft-dim);
  opacity: .75;
  margin-block-start: .5rem;
}

.pre-track {
  inline-size: min(17rem, 70vw);
  block-size: 3px;
  background: rgba(230, 217, 189, .18);
  overflow: hidden;
}
.pre-fill {
  block-size: 100%;
  inline-size: 0%;
  background: var(--kraft);
  transition: inline-size .18s linear;
}
.pre-pct {
  font-family: var(--f-display);
  font-size: 2.6rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pre-note { font-size: .82rem; color: var(--kraft-dim); opacity: .7; }

/* Page content stays hidden until the loader hands over. */
body.loading main,
body.loading .actionbar { visibility: hidden; }

/* --------------------------------------------------------------------------
   Hero — pinned canvas, scrubbed frame sequence
   -------------------------------------------------------------------------- */
/* The pin is CSS, not JavaScript. The section is one viewport tall for the
   hero itself plus 150svh of travel; the inner panel sticks to the top and
   stays put while that travel scrolls past underneath. GSAP used to build an
   equivalent spacer element at runtime — `position: sticky` does the same job
   declaratively, cannot be broken by a script optimiser, and keeps working
   even if main.js never loads. */
/* GSAP build: ScrollTrigger pins the panel and inserts its own spacer at
   runtime, so the section keeps its natural height and the panel stays in
   normal flow. (The library-free build does this with `position: sticky` and
   a 250svh section instead.) */
.hero {
  position: relative;
  background: var(--concrete);
}

.hero-pin {
  position: relative;
  block-size: 100svh;
  overflow: hidden;
  display: grid;
}
.hero-canvas {
  grid-area: 1 / 1;
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}

/* Legibility floor over a bright, high-contrast photograph. */
/* The middle stops carry the headline. Measured against the actual canvas
   pixels, the earlier .30/.34 scrim let white text fall to 1.99:1 where a
   letter landed on a sunlit kraft bag — the bright cream panels are the
   brightest thing in the shot. Average contrast looked fine (6.8:1) and hid
   it. These values hold the worst pixel above 4.5:1. */
.hero-scrim {
  grid-area: 1 / 1;
  background:
    linear-gradient(to bottom,
      rgba(20, 18, 15, .80) 0%,
      rgba(20, 18, 15, .58) 32%,
      rgba(20, 18, 15, .62) 60%,
      rgba(20, 18, 15, .90) 100%);
}

.hero-copy {
  grid-area: 1 / 1;
  position: relative;
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: 2rem 1.5rem calc(2rem + var(--bar-h));
  color: var(--paper);
}

.hero-stage { grid-area: 1 / 1; max-inline-size: 34rem; }
.hero-stage.is-hidden { opacity: 0; }

.eyebrow {
  display: inline-block;
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .16em;
  padding: .45rem .9rem;
  border: 1px solid rgba(247, 242, 232, .38);
  color: var(--paper);
  margin-block-end: 1.1rem;
}

.hero-name {
  font-size: clamp(2.4rem, 12vw, 4.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .75rem;
  /* Tight dark shadow first for edge definition against bright bags, wide
     halo second for overall separation. A 24px blur alone was too soft. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 20px rgba(0, 0, 0, .6);
}
.hero-line {
  font-size: clamp(1.05rem, 4.6vw, 1.4rem);
  margin: 0;
  color: rgba(247, 242, 232, .9);
  text-shadow: 0 1px 3px rgba(0, 0, 0, .8), 0 2px 16px rgba(0, 0, 0, .55);
}
.hero-big {
  font-family: var(--f-display);
  font-size: clamp(1.9rem, 8.5vw, 3rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 .6rem;
  /* Tight dark shadow first for edge definition against bright bags, wide
     halo second for overall separation. A 24px blur alone was too soft. */
  text-shadow: 0 1px 3px rgba(0, 0, 0, .85), 0 2px 20px rgba(0, 0, 0, .6);
}
.hero-big em { font-style: normal; color: #7ee3b0; }

.scroll-hint {
  position: absolute;
  inset-block-end: calc(1.1rem + var(--bar-h));
  inset-inline: 0;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .18em;
  color: rgba(247, 242, 232, .6);
  animation: bob 2.2s ease-in-out infinite;
}
@keyframes bob {
  0%, 100% { transform: translateY(0);     opacity: .45; }
  50%      { transform: translateY(.35rem); opacity: .9; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.section { padding-block: clamp(3.5rem, 11vw, 6rem); }
.section--dark { background: var(--concrete); color: var(--kraft); }
.section--kraft { background: var(--kraft); }

.section-tag {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .2em;
  color: var(--green);
  margin: 0 0 .7rem;
}
.section--dark .section-tag { color: #7ee3b0; }

.section-title {
  font-size: clamp(1.75rem, 7vw, 2.6rem);
  font-weight: 800;
  letter-spacing: -.02em;
  margin: 0 0 1rem;
}
.section-intro {
  max-inline-size: 42ch;
  color: var(--ink-soft);
  margin: 0 0 2.25rem;
}
.section--dark .section-intro { color: rgba(230, 217, 189, .72); }

.rule {
  border: 0;
  border-block-start: 2px solid var(--ink);
  inline-size: 3rem;
  margin: 0 0 1.75rem;
  opacity: .85;
}
.section--dark .rule { border-color: var(--kraft); }

/* Features ---------------------------------------------------------------- */
.feature-grid {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 40rem) {
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}
.feature {
  background: var(--paper);
  padding: 1.5rem 1.35rem;
  display: grid;
  gap: .4rem;
  align-content: start;
}
.feature-n {
  font-family: var(--f-display);
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  color: var(--green);
}
.feature h3 { font-size: 1.15rem; font-weight: 700; margin: 0; }
.feature p  { margin: 0; font-size: .94rem; color: var(--ink-soft); }

/* FAQ --------------------------------------------------------------------- */
/* Same hairline grid as the features, but one column at every width: an answer
   is two or three lines of prose, and prose set in a half-width column wraps
   into ragged two-word lines. */
.faq-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.faq {
  background: var(--paper);
  padding: 1.4rem 1.35rem;
  display: grid;
  gap: .45rem;
  align-content: start;
}
.faq h3 { font-size: 1.08rem; font-weight: 700; margin: 0; }
.faq p  { margin: 0; color: var(--ink-soft); }

/* Products ---------------------------------------------------------------- */
.product-grid { display: grid; gap: 1.1rem; }
@media (min-width: 44rem) {
  .product-grid { grid-template-columns: repeat(2, 1fr); }
}

.product {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  padding: 1.75rem 1.5rem;
  display: grid;
  gap: .5rem;
  align-content: start;
  overflow: hidden;
}
/* The colour bar is the product's actual identity — these bags are told
   apart on site by the green or red panel, nothing else. */
.product::before {
  content: "";
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  inline-size: 6px;
  background: var(--accent);
}
.product--green { --accent: var(--green); }
.product--red   { --accent: var(--red); }

.product-grade {
  font-family: var(--f-display);
  font-size: 2.9rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.product h3 { font-size: 1.3rem; font-weight: 700; margin: 0; }
.product p  { margin: 0; color: var(--ink-soft); font-size: .94rem; }

.product-meta {
  margin-block-start: .75rem;
  padding-block-start: .75rem;
  border-block-start: 1px solid var(--line);
  font-size: .86rem;
  color: var(--ink-soft);
}

/* Delivery ---------------------------------------------------------------- */
.deliver-head {
  display: grid;
  gap: 1.25rem;
  margin-block-end: 2rem;
}
@media (min-width: 46rem) {
  .deliver-head { grid-template-columns: repeat(2, 1fr); }
}
.stat {
  border: 1px solid var(--line-dark);
  padding: 1.35rem 1.25rem;
}
.stat-v {
  font-family: var(--f-display);
  font-size: clamp(1.8rem, 7vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: #7ee3b0;
  line-height: 1.1;
}
.stat-k {
  font-size: .84rem;
  letter-spacing: .05em;
  color: rgba(230, 217, 189, .7);
  margin-block-start: .3rem;
}

.gov-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
}
@media (min-width: 34rem) { .gov-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 52rem) { .gov-grid { grid-template-columns: repeat(4, 1fr); } }

.gov {
  background: var(--concrete);
  padding: .85rem .75rem;
  font-size: .92rem;
  text-align: center;
  color: rgba(230, 217, 189, .9);
}

/* Certificate ------------------------------------------------------------- */
.cert-box {
  border: 1px solid var(--line);
  background: var(--paper);
  padding: 1.75rem 1.5rem;
  display: grid;
  gap: 1rem;
  justify-items: start;
}

/* Contact ----------------------------------------------------------------- */
.contact-grid { display: grid; gap: 1px; background: var(--line-dark);
                border: 1px solid var(--line-dark); }
@media (min-width: 44rem) {
  .contact-grid { grid-template-columns: repeat(3, 1fr); }
}
.contact-card {
  background: var(--concrete);
  padding: 1.5rem 1.35rem;
  display: grid;
  gap: .3rem;
  align-content: start;
}
.contact-role {
  font-family: var(--f-display);
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  color: #7ee3b0;
}
.contact-name { font-size: 1.1rem; font-weight: 700; }
.contact-num {
  font-family: var(--f-display);
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .02em;
  direction: ltr;
  unicode-bidi: embed;
  font-variant-numeric: tabular-nums;
}
.contact-links { display: flex; gap: .6rem; margin-block-start: .75rem; }

.info-row {
  display: grid;
  gap: 1px;
  background: var(--line-dark);
  border: 1px solid var(--line-dark);
  border-block-start: 0;
}
@media (min-width: 44rem) { .info-row { grid-template-columns: repeat(2, 1fr); } }
.info-cell { background: var(--concrete); padding: 1.25rem 1.35rem; }
.info-k {
  font-size: .74rem;
  letter-spacing: .14em;
  color: rgba(230, 217, 189, .55);
  margin-block-end: .2rem;
}
.info-v { font-size: 1.05rem; font-weight: 700; }

/* --------------------------------------------------------------------------
   Buttons
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  /* 44px floor: this gets tapped with dusty hands on a building site. */
  min-block-size: 2.9rem;
  padding: .7rem 1.35rem;
  font-family: var(--f-display);
  font-size: .95rem;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid transparent;
  cursor: pointer;
  transition: transform .12s ease, background-color .18s ease, opacity .18s ease;
}
.btn:active { transform: scale(.97); }
.btn svg { inline-size: 1.15rem; block-size: 1.15rem; flex: none; }

.btn--wa    { background: var(--wa);    color: #04301a; }
.btn--call  { background: var(--kraft); color: var(--ink); }
.btn--ghost { background: transparent;  color: inherit; border-color: currentColor; opacity: .85; }
.btn--ghost:hover { opacity: 1; }
/* 2.75rem = 44px. These get tapped outdoors with dusty hands; the previous
   2.4rem rendered at 39px, under the 44pt recommended control size. */
.btn--sm    { min-block-size: 2.75rem; padding: .45rem 1rem; font-size: .84rem; }

/* --------------------------------------------------------------------------
   Sticky action bar — the whole point of the page. Present at every scroll
   position so the decision to call never depends on finding a button.
   -------------------------------------------------------------------------- */
.actionbar {
  position: fixed;
  inset-block-end: 0;
  inset-inline: 0;
  z-index: 90;
  display: grid;
  /* Single column now: WhatsApp lifted out into the floating button below,
     so Call takes the full bar. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: rgba(0, 0, 0, .25);
  border-block-start: 1px solid rgba(0, 0, 0, .2);
  /* Clears the iOS home indicator. */
  padding-block-end: env(safe-area-inset-bottom, 0);
}
.actionbar .btn { border-radius: 0; min-block-size: var(--bar-h); font-size: 1rem; }

/* --------------------------------------------------------------------------
   Header / footer
   -------------------------------------------------------------------------- */
.topbar {
  position: absolute;
  inset-block-start: 0;
  inset-inline: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  color: var(--paper);
}
.wordmark {
  font-family: var(--f-display);
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -.01em;
}
.lang {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--f-display);
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-decoration: none;
  /* 2.75rem = 44px in both axes. This one slipped past the touch-target pass
     because it is not a .btn — it was rendering at 32x36, the smallest tap
     target on the page. The min-size also keeps the pill from collapsing to
     a lopsided oval on the single-character Arabic label. */
  min-inline-size: 2.75rem;
  min-block-size: 2.75rem;
  padding-inline: .8rem;
  border: 1px solid rgba(247, 242, 232, .4);
  border-radius: 999px;
  color: var(--paper);
  transition: background-color .18s ease, transform .12s ease;
}
.lang:hover  { background: rgba(247, 242, 232, .14); }
/* Press feedback on pointer-down, matching the other controls. */
.lang:active { transform: scale(.94); }

.foot {
  background: #16130f;
  color: rgba(230, 217, 189, .55);
  font-size: .84rem;
  padding-block: 2rem;
  text-align: center;
}
.foot strong { color: var(--kraft); font-weight: 700; }

/* --------------------------------------------------------------------------
   Desktop — the source clip is 9:16. Stretching it across a wide viewport
   would crop the truck out of its own shot, so it stays a column and the
   copy moves beside it.
   -------------------------------------------------------------------------- */
@media (min-width: 60rem) {
  .hero-pin { display: grid; grid-template-columns: 1fr 1fr; place-items: center; }
  .hero-canvas {
    grid-area: 1 / 1;
    inline-size: min(420px, 90%);
    block-size: min(88svh, 760px);
    justify-self: center;
    object-fit: cover;
  }
  /* On desktop the copy sits beside the footage, not on it, so the scrim only
     has to keep the column from glaring — it carries no text. */
  .hero-scrim {
    grid-area: 1 / 1;
    inline-size: min(420px, 90%);
    block-size: min(88svh, 760px);
    justify-self: center;
    background: linear-gradient(to bottom,
      rgba(20, 18, 15, .5), rgba(20, 18, 15, .15) 40%, rgba(20, 18, 15, .7));
  }
  .hero-copy {
    grid-area: 1 / 2;
    justify-items: start;
    text-align: start;
    padding-inline: 3rem;
  }
  .actionbar {
    inline-size: max-content;
    inset-inline-start: 50%;
    transform: translateX(-50%);
    inset-block-end: 1.25rem;
    grid-template-columns: auto auto;
    border: 1px solid rgba(0, 0, 0, .25);
  }
  .actionbar .btn { min-block-size: 3.25rem; padding-inline: 2rem; }
  body { padding-block-end: 0; }
}

/* --------------------------------------------------------------------------
   Reduced motion — a scrubbed 40-frame sequence is exactly the kind of
   scroll-coupled movement that triggers vestibular symptoms. The frames still
   preload (the client's call), but nothing moves: one still frame, normal page.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-hint { display: none; }
  .hero-stage.is-hidden { opacity: 1; }
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}

/* --------------------------------------------------------------------------
   Arabic letter-spacing reset

   Arabic is a cursive script: glyphs join along a baseline. Any letter-spacing
   forces gaps into connections that should be continuous, and negative
   tracking crushes them into each other. Both read as broken text to an Arabic
   reader — the tracked-out labels (.section-tag at 2.3px, .eyebrow at 1.8px)
   and the tightened display type (-.02em on .hero-name) were equally wrong.

   Tracking is a Latin typographic device. It stays on the English page, where
   it does its job, and is switched off wherever the script is Arabic.
   -------------------------------------------------------------------------- */
[dir="rtl"] .wordmark,
[dir="rtl"] .pre-mark,
[dir="rtl"] .pre-sub,
[dir="rtl"] .lang,
[dir="rtl"] .eyebrow,
[dir="rtl"] .hero-name,
[dir="rtl"] .hero-big,
[dir="rtl"] .hero-line,
[dir="rtl"] .scroll-hint,
[dir="rtl"] .section-tag,
[dir="rtl"] .section-title,
[dir="rtl"] .feature h3,
[dir="rtl"] .faq h3,
[dir="rtl"] .product h3,
[dir="rtl"] .stat-v,
[dir="rtl"] .stat-k,
[dir="rtl"] .contact-role,
[dir="rtl"] .contact-name,
[dir="rtl"] .info-k,
[dir="rtl"] .info-v,
[dir="rtl"] .btn {
  letter-spacing: normal;
}

/* Latin numerals are not connected, so tracking is safe — and wanted — on the
   grade figures and phone numbers even in the RTL page. */
[dir="rtl"] .product-grade { letter-spacing: -.03em; }
[dir="rtl"] .contact-num   { letter-spacing: .02em; }

/* --------------------------------------------------------------------------
   Floating action buttons

   A column rather than two independently positioned elements, so the gap and
   the alignment are defined once and neither can drift out from under the
   other on a different viewport.

   Order matters: WhatsApp sits at the bottom, nearest the thumb, because it
   is the button that earns money. Facebook stacks above it and is deliberately
   smaller — same shape, less weight, so the hierarchy is legible without a
   label on either.

   Icon-only, so each carries its accessible name on aria-label.
   `inset-inline-end` mirrors the column with the layout: bottom-right on the
   English page, bottom-left on the Arabic one.
   -------------------------------------------------------------------------- */
.fabs {
  position: fixed;
  inset-block-end: calc(var(--bar-h) + 1rem + env(safe-area-inset-bottom, 0px));
  inset-inline-end: 1rem;
  z-index: 95;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}

.fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  /* Deeper than the flat bar: these read as lifted off the page, and they
     have to hold an edge over both the dark hero and the pale sections. */
  box-shadow: 0 4px 6px rgba(0, 0, 0, .18), 0 8px 24px rgba(0, 0, 0, .28);
  transition: transform .14s ease, box-shadow .18s ease;
}
.fab:hover  { box-shadow: 0 6px 10px rgba(0, 0, 0, .2), 0 12px 30px rgba(0, 0, 0, .32); }
/* Press feedback on pointer-down, consistent with every other control. */
.fab:active { transform: scale(.93); }

.fab-wa {
  inline-size: 3.5rem;   /* 56px — the primary action */
  block-size: 3.5rem;
  background: var(--wa);
  color: #04301a;
}
.fab-wa svg { inline-size: 1.75rem; block-size: 1.75rem; }

.fab-fb {
  inline-size: 3rem;     /* 48px — secondary, still past the 44px floor */
  block-size: 3rem;
  background: var(--fb);
  color: #fff;
}
.fab-fb svg { inline-size: 1.4rem; block-size: 1.4rem; }

@media (min-width: 60rem) {
  /* The bar becomes a centred island on desktop, so the column clears it by
     sitting at the viewport edge instead of stacking above it. */
  .fabs   { inset-block-end: 1.5rem; inset-inline-end: 1.5rem; }
  .fab-wa { inline-size: 3.75rem; block-size: 3.75rem; }
  .fab-fb { inline-size: 3.25rem; block-size: 3.25rem; }
}

@media (prefers-reduced-motion: reduce) {
  .fab { transition: none; }
}

/* The language toggle carries the *other* language's label — "EN" on the
   Arabic page, "ع" on the English one. So it is the content, not the page
   direction, that decides whether tracking applies. */
[dir="rtl"] .lang        { letter-spacing: .08em; }
.lang[lang="ar"]         { letter-spacing: normal; }

/* --------------------------------------------------------------------------
   Corner radius — applied site-wide

   One scale rather than ad-hoc values, so the curves read as a system:
   small controls tighter, large containers softer.

   The grid sections (features, governorates, contacts) draw their dividers
   with a 1px gap over a background colour, so their children have no borders
   of their own to round. Rounding each cell would let the divider colour show
   through at every corner. The radius therefore goes on the container and
   `overflow: hidden` clips the cells to it.
   -------------------------------------------------------------------------- */
:root {
  --r-sm:   .5rem;    /*  8px — buttons, chips */
  --r-md:   .875rem;  /* 14px — cards */
  --r-lg:   1.25rem;  /* 20px — large containers */
  --r-pill: 999px;
}

/* Controls ---------------------------------------------------------------- */
.btn            { border-radius: var(--r-sm); }
.btn--sm        { border-radius: var(--r-sm); }
.eyebrow        { border-radius: var(--r-pill); }
.pre-track,
.pre-fill       { border-radius: var(--r-pill); }
.rule           { border-radius: var(--r-pill); }

/* Cards ------------------------------------------------------------------- */
.product,
.stat,
.cert-box       { border-radius: var(--r-md); }

/* Gap-grid containers: radius here, clipping for the cells inside ---------- */
.feature-grid,
.faq-list,
.gov-grid       { border-radius: var(--r-lg); overflow: hidden; }

/* Contacts and the info strip below read as one block, so the radius wraps
   the pair: top corners on the grid, bottom corners on the strip. */
.contact-grid   { border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.info-row       { border-radius: 0 0 var(--r-lg) var(--r-lg); overflow: hidden; }

/* Action bar -------------------------------------------------------------- */
/* Only the top corners on mobile — it is flush to the bottom edge, and
   rounding the bottom would expose two slivers of page behind it. */
.actionbar      { border-radius: var(--r-lg) var(--r-lg) 0 0; overflow: hidden; }
.actionbar .btn { border-radius: 0; }

@media (min-width: 60rem) {
  /* On desktop the bar is a centred island, so it rounds on all four sides. */
  .actionbar { border-radius: var(--r-pill); }
  /* The hero is a 420px column here rather than full-bleed, so it can take a
     radius. On mobile it stays square: rounding edge-to-edge footage just
     carves slivers of background out of the corners. */
  .hero-canvas,
  .hero-scrim { border-radius: var(--r-lg); overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Glass plate behind the topbar identity

   The wordmark sits directly on moving footage, so its legibility changed
   frame to frame. A translucent plate gives it a constant ground to sit on
   without hiding the video behind it.

   The blur is paired with a *dark* tint, not a light one: the footage is
   bright concrete and cream bags, and pale text needs the surface under it to
   stay dark whatever scrolls past. The top edge is lit slightly brighter than
   the rest of the border — that is what reads as a real material catching
   light rather than a flat rectangle.

   The language toggle gets the same treatment: they are siblings in the same
   bar, and one glass pill beside one outlined pill would look like a bug.
   -------------------------------------------------------------------------- */
.topbar .wordmark,
.topbar .lang {
  background: rgba(18, 16, 13, .42);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
          backdrop-filter: blur(14px) saturate(140%);
  border: 1px solid rgba(247, 242, 232, .14);
  border-block-start-color: rgba(247, 242, 232, .30);
  box-shadow: 0 2px 14px rgba(0, 0, 0, .22);
}

.topbar .wordmark {
  /* A span will not take vertical padding as an inline box. */
  display: inline-flex;
  align-items: center;
  min-block-size: 2.75rem;      /* matches the toggle beside it */
  padding-inline: 1rem;
  border-radius: var(--r-pill);
  /* Slightly heavier over a translucent surface — thin strokes lose their
     edge against a blurred, shifting background. */
  font-weight: 800;
}

/* Not everyone gets translucency: when it is turned off, the plate becomes a
   solid dark pill instead of vanishing and dumping the text back onto the
   video. */
@media (prefers-reduced-transparency: reduce) {
  .topbar .wordmark,
  .topbar .lang {
    background: rgba(18, 16, 13, .92);
    -webkit-backdrop-filter: none;
            backdrop-filter: none;
  }
}

/* --------------------------------------------------------------------------
   Readability pass

   The root bump above lifts everything by 12.5%. These are the labels that
   were still too small after it — the tracked-out micro-caps in particular,
   which were sitting near 12px.
   -------------------------------------------------------------------------- */
.section-tag,
.eyebrow,
.scroll-hint    { font-size: .82rem; }
.contact-role,
.info-k         { font-size: .82rem; }
.stat-k         { font-size: .92rem; }
.product-meta   { font-size: .92rem; }
.feature p,
.faq p,
.product p      { font-size: 1rem; }
.gov            { font-size: 1rem; }
.pre-sub        { font-size: .88rem; }
.pre-note       { font-size: .88rem; }
.btn            { font-size: 1rem; }
.btn--sm        { font-size: .92rem; }
.foot           { font-size: .92rem; }
.cert-box p     { font-size: 1rem !important; }

/* Without the scrub there is nothing to scroll through, so the hero collapses
   back to a single screen instead of leaving 150svh of dead space. The scroll
   cue goes too — there is nothing below the fold of this section to scroll to
   any more, so pointing at it would be a lie. */
@media (prefers-reduced-motion: reduce) {
  .hero { block-size: auto; }
  .hero-pin { position: relative; block-size: 100svh; }
  .scroll-hint { display: none; }
}