/* =============================================================================
   بيتك كلينر — base.css

   THERE IS NOT ONE HEX LITERAL IN THIS FILE, AND THAT IS THE POINT.
   Every colour comes from a custom property defined in <style id="theme-vars">,
   which build.js generates from content/theme.json. A colour written here would
   be invisible to the contrast check in theme.json, which means it would be
   wrong for ever without anyone noticing.

   EVERYTHING IS A LOGICAL PROPERTY. margin-inline, padding-block, inset-inline,
   border-inline-start, text-align:start. The default locale is Arabic and the
   page is RTL; physical left/right is how a mirrored icon or a reversed carousel
   survives review and reaches real content.

   THE ONE LAYOUT RULE WORTH STATING UP FRONT: vertical space is the scarcest
   thing on this page. Services scroll sideways in a rail. Areas sit in three
   fixed rows that scroll sideways. The proof band is a uniform full-bleed grid.
   All three exist so that a longer service list or a longer district list makes
   the page WIDER, never taller.
   ========================================================================== */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  /* What sits on top of the brand colour. Declared here and remapped inside the
     dark context, so a button never has to know which ground it is on. */
  --c-on-brand: var(--c-bg);
  --c-star: var(--c-accent-deep);
  background: var(--c-bg);
  color: var(--c-ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.9;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg, video { display: block; max-inline-size: 100%; }
img { block-size: auto; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { list-style: none; padding: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 3px solid var(--c-brand);
  outline-offset: 3px;
  border-radius: var(--r-1);
}

/* The skip link is the first tab stop on the page, and it is visible when it
   has focus. A skip link that is never visible is a skip link that never works. */
.skip {
  position: absolute;
  inset-block-start: -100%;
  inset-inline-start: var(--s-4);
  z-index: 100;
  padding: var(--s-3) var(--s-5);
  background: var(--c-brand);
  color: var(--c-on-brand);
  border-radius: 0 0 var(--r-3) var(--r-3);
  font-weight: 600;
}
.skip:focus { inset-block-start: 0; }

/* ── typography ───────────────────────────────────────────────────────────── */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.22;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
h1 { font-size: var(--step-6); font-weight: 700; }
h2 { font-size: var(--step-4); }
h3 { font-size: var(--step-2); }
h4 { font-size: var(--step-1); }
p { text-wrap: pretty; }

.lede { font-size: var(--step-1); color: var(--c-ink-muted); line-height: 1.75; }
.measure { max-inline-size: var(--measure); }

/* Arabic numerals in a Latin-shaped context (phone numbers, hours) read better
   as Western digits with tabular figures than as forced Arabic-Indic ones. */
.num { font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; }

/* ── icons ───────────────────────────────────────────────────────────────────
   fill, stroke-width, caps and joins are declared HERE and nowhere else. The
   sprite's <symbol>s deliberately set none of them, so they inherit through the
   <use> shadow boundary. --icon-accent is a custom property for the same reason:
   a plain descendant selector cannot reach inside a shadow tree, a custom
   property can. */
.icon {
  inline-size: var(--icon-size);
  block-size: var(--icon-size);
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  flex: none;
}
.icon--lg { --icon-size: 2rem; }
.icon--sm { --icon-size: 1.15rem; }

/* ── layout primitives ────────────────────────────────────────────────────── */
.wrap {
  inline-size: min(100% - (var(--gutter) * 2), var(--w-wide));
  margin-inline: auto;
}
.wrap--narrow { inline-size: min(100% - (var(--gutter) * 2), var(--w-narrow)); }

.band { padding-block: clamp(var(--s-7), 7vw, var(--s-9)); position: relative; }
.band[data-surface="base"] { background: var(--c-bg); }
.band[data-surface="tint"] { background: var(--c-tint); }
/* The closing ask. It was dark, and with a dark work band and a dark footer that
   made the bottom third of the page one unbroken black. A brand-tinted LIGHT band
   separates it from both neighbours and still reads as an event. */
.band[data-surface="brand"] { background: var(--c-brand-ghost); }

/* ── THE DARK CONTEXT ─────────────────────────────────────────────────────────
   LIGHT IS THE PAGE. Darkness is spent in four places and no more: the hero, the
   work band, the closing ask, and the footer. The first build made everything dark
   and it read as one long wash with no rhythm at all.

   Rather than restyling every component for a dark ground, this block REMAPS THE
   TOKENS locally. Every component already reads var(--c-ink), var(--c-surface) and
   the rest, so a card, a chip, a rule and an icon all invert on their own and there
   is exactly one place to get it right.

   --c-on-brand is what sits ON the brand colour, and it has to be remapped too:
   white text on the deep teal reads 5.7:1, but on a dark band --c-brand becomes the
   BRIGHT teal, where white would collapse to 2.2:1 and near-black rises to 9.2:1. */
.band[data-surface="dark"],
.hero,
.site-footer {
  --c-bg: var(--c-dark-bg);
  --c-tint: var(--c-dark-tint);
  --c-surface: var(--c-dark-surface);
  --c-surface-2: var(--c-dark-tint);
  --c-line: var(--c-dark-line);
  --c-line-soft: var(--c-dark-line);
  --c-ink: var(--c-dark-ink);
  --c-ink-muted: var(--c-dark-muted);
  --c-ink-faint: var(--c-dark-faint);
  --c-brand: var(--c-brand-bright);
  --c-on-brand: var(--c-dark-bg);
  --c-star: var(--c-accent);
  --icon-accent: var(--icon-accent-dark);
  color: var(--c-dark-ink);
}
.band[data-surface="dark"], .site-footer { background: var(--c-dark-bg); }

/* A hairline between two light bands, so the page has joints rather than one
   continuous sheet of white. Dark bands need no rule: the tone change is the joint. */
.band[data-surface="base"] + .band[data-surface="tint"],
.band[data-surface="tint"] + .band[data-surface="base"] {
  border-block-start: 1px solid var(--c-line-soft);
}

/* THE SECTION HEAD IS A CENTRED STACK. ALWAYS.
   There is no --split modifier and there must never be one: a heading sitting
   beside its own standfirst was rejected sitewide, in those words. */
.section__head {
  text-align: center;
  max-inline-size: 54ch;
  margin-inline: auto;
  margin-block-end: clamp(var(--s-6), 5vw, var(--s-8));
}
.section__eyebrow {
  display: inline-block;
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.08em;
  color: var(--c-brand);
  margin-block-end: var(--s-3);
}
.section__head p { margin-block-start: var(--s-4); color: var(--c-ink-muted); }

/* ── buttons ─────────────────────────────────────────────────────────────────
   NO BUTTON ON THIS PAGE CARRIES A PHONE NUMBER. An icon and one or two words.
   The number lives in the footer and in the tel: href, where it belongs. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r-pill);
  border: 1px solid transparent;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1;
  cursor: pointer;
  transition: transform var(--t-fast) var(--ease),
              background-color var(--t-fast) var(--ease),
              box-shadow var(--t-fast) var(--ease);
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--c-brand);
  color: var(--c-on-brand);
  box-shadow: var(--e-action);
}
.btn--primary:hover { background: var(--c-brand-deep); }

.btn--ghost {
  background: var(--c-surface);
  color: var(--c-ink);
  border-color: var(--c-line);
}
.btn--ghost:hover { background: var(--c-tint); border-color: var(--c-brand); }

.btn--amber { background: var(--c-accent); color: var(--c-ink); }
.btn--amber:hover { background: var(--c-accent-deep); }

.btn--quiet {
  padding-inline: 0;
  background: none;
  color: var(--c-brand);
  gap: var(--s-2);
}
.btn--quiet:hover { color: var(--c-ink); transform: none; }
.btn--quiet:hover .icon { transform: translateX(-4px); }
.btn--quiet .icon { transition: transform var(--t-fast) var(--ease); }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* ── site header ─────────────────────────────────────────────────────────── */
.site-header {
  position: relative;
  z-index: 20;
  padding-block: var(--s-4);
  background: var(--c-bg);
  border-block-end: 1px solid var(--c-line-soft);
}
.site-header__in {
  display: flex;
  align-items: center;
  gap: var(--s-5);
}
/* THE LOGO IS ONE IMAGE NOW. It used to be a mark beside live text set in Readex
   Pro; the client's kit supplies the wordmark as outlined Cairo Bold and Montserrat,
   which is the real brand typography, so rebuilding it in a different face beside
   the mark was a stand-in and is gone. */
.brand { display: flex; align-items: center; }
/* SIZED BY THE KIT'S OWN MINIMUM, not by eye. KIT-README.txt sets the lockup floor
   at 130px wide; the RTL lockup is 531x198, so 3.1rem of height is 133px of width and
   the footer's 3.4rem is 146px. A first pass used 2.6rem, which came out at 111px and
   was already below the client's stated minimum before anyone looked at a phone.
   Nothing shrinks on mobile for the same reason: at 390px the header still holds
   133px of logo, a call button and the gutters with room to spare. */
.brand__logo { block-size: 3.1rem; inline-size: auto; min-inline-size: 130px; }
.site-footer .brand__logo { block-size: 3.4rem; }
.site-nav { display: none; gap: var(--s-5); margin-inline-start: auto; }

/* THE NAV WAS BODY TEXT AT 400 IN A MUTED GREY, which is why it read as thin: it
   was styled like a paragraph that happened to be in the header. It is navigation,
   so it takes the display face, a real weight, and full-strength ink. */
.site-nav a {
  position: relative;
  font-family: var(--font-heading);
  font-weight: 500;
  font-size: var(--step-0);
  color: var(--c-ink);
  padding-block: var(--s-2);
  transition: color var(--t-fast) var(--ease);
}

/* The underline grows from the inline-start. WIDTH rather than a scaleX transform,
   deliberately: transform-origin has no logical keyword, so scaling would need one
   rule for RTL and another for LTR and they drift apart. inset-inline-start follows
   the writing direction on its own, and on a 2px bar nobody can measure the
   difference in cost. */
.site-nav a::after {
  content: "";
  position: absolute;
  inset-block-end: 0;
  inset-inline-start: 0;
  block-size: 2px;
  inline-size: 0;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  transition: inline-size var(--t-base) var(--ease);
}
.site-nav a:hover { color: var(--c-brand); }
.site-nav a:hover::after, .site-nav a:focus-visible::after { inline-size: 100%; }

/* THE PAGE YOU ARE ON. The nav had no current state at all, so every page looked
   like the same page. Same underline, permanently on, set by build.js from the
   filename rather than by hand in six copies of the header. */
.site-nav a[aria-current="page"] { color: var(--c-brand); }
.site-nav a[aria-current="page"]::after { inline-size: 100%; }
.site-header .btn { margin-inline-start: auto; }
.site-nav ~ .btn { margin-inline-start: 0; }
@media (min-width: 62rem) { .site-nav { display: flex; } }

/* ── hero ────────────────────────────────────────────────────────────────────
   NO PANEL. NO PLATE. NO BOX.
   An earlier client's hero put the copy inside a translucent card and the note
   back was that the box blocked the majority of the photograph. The veil below
   already carries every bit of contrast the text needs; the box only costs
   picture. The stack is three elements: headline, one sentence, two buttons. */
.hero {
  position: relative;
  isolation: isolate;
  min-block-size: clamp(34rem, 86vh, 52rem);
  display: grid;
  align-items: end;
  padding-block: clamp(var(--s-8), 10vh, var(--s-9)) clamp(var(--s-8), 9vw, var(--s-9));
  overflow: hidden;
}
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
}
.hero__media img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--scrim-hero);
}
.hero__text { text-align: center; }
/* The cap is on the HEADLINE, not on the block that holds it. Capping the block
   squeezed a 32-character line into five, and a headline stacked one word per
   line is a column, not a statement. 20ch lands it on two. */
.hero h1 { max-inline-size: 22ch; margin-inline: auto; margin-block-end: var(--s-6); }
/* The one accent word in the headline. Exactly one, and it is the word the
   whole page is arguing for. */
.hero h1 em { font-style: normal; color: var(--c-brand); }
.hero__subtitle {
  font-size: var(--step-1);
  color: var(--c-ink-muted);
  max-inline-size: 46ch;
  margin-inline: auto;
  margin-block-end: var(--s-7);
}
.hero .btn-row { justify-content: center; }

/* ── work band — "ما نقوم به" ────────────────────────────────────────────────
   Band two is proof, never a restatement of the hero. Uniform cells, edge to
   edge, every one the same size: a grid where some frames are big and some are
   small was called a mess, in those words, and it was right. */
.work { padding-block-end: 0; }
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2px;
}
@media (min-width: 40rem)  { .work__grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem)  { .work__grid { grid-template-columns: repeat(4, 1fr); } }

.work__cell {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--c-surface);
}
.work__cell img {
  inline-size: 100%;
  block-size: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.work__cell:hover img { transform: scale(1.05); }
.work__cell figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--s-5) var(--s-3) var(--s-3);
  font-size: var(--step--1);
  font-weight: 600;
  font-family: var(--font-heading);
  background: linear-gradient(to top, rgb(0 0 0 / 0.82), rgb(0 0 0 / 0));
  color: var(--c-ink);
}
.work__note {
  text-align: center;
  font-size: var(--step--1);
  color: var(--c-ink-faint);
  padding-block: var(--s-4);
}

/* ── features and benefits ───────────────────────────────────────────────────
   Band two, and the only band on the page carrying illustration. Four drawn
   pictures, not four icons and not four photographs: an icon is too small to
   carry an argument and a photograph here would be decoration standing in for
   evidence, which is what the proof band further down is actually for. */
.features {
  display: grid;
  gap: var(--s-6) var(--s-5);
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 62rem) { .features { grid-template-columns: repeat(4, 1fr); } }
.feature { text-align: center; }
.feature img {
  inline-size: clamp(7rem, 22vw, 9.5rem);
  block-size: auto;
  margin-inline: auto;
  margin-block-end: var(--s-4);
}
.feature h3 { font-size: var(--step-1); margin-block-end: var(--s-2); }
.feature p { color: var(--c-ink-muted); font-size: var(--step-0); }

/* ── the services carousel ───────────────────────────────────────────────────
   ALL FORTY-THREE SERVICES, INTERNALLY LINKED, AT A CONSTANT HEIGHT.
   That is the whole brief: the block must not grow taller as the service list
   grows, because a home page that scrolls for a minute before reaching proof is
   a home page nobody reaches the proof on.

   Each slide is one viewport-width page of eight services and snaps. The track
   scrolls; nothing is absolutely positioned and nothing is faded in and out, so
   with JavaScript off it degrades to an ordinary horizontal scroller that still
   reaches every service. */
.carousel { position: relative; }
.carousel__track {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  gap: var(--s-5);
}
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-3);
}
@media (min-width: 40rem) { .carousel__slide { grid-template-columns: repeat(4, 1fr); } }

.svc-chip {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  box-shadow: var(--e-1);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.4;
  transition: transform var(--t-fast) var(--ease), background-color var(--t-fast) var(--ease);
}
.svc-chip .icon { --icon-size: 1.6rem; color: var(--c-ink); }
.svc-chip:hover { transform: translateY(-3px); background: var(--c-surface-2); }

.carousel__foot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  margin-block-start: var(--s-6);
}
.carousel__dots { display: flex; gap: var(--s-2); }
.carousel__dots button {
  inline-size: 0.6rem;
  block-size: 0.6rem;
  padding: 0;
  border: 0;
  border-radius: var(--r-pill);
  background: var(--c-line);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease), inline-size var(--t-fast) var(--ease);
}
.carousel__dots button[aria-current="true"] { background: var(--c-brand); inline-size: 1.6rem; }

/* ── services — two rails, one band ──────────────────────────────────────────
   A HORIZONTAL RAIL, not a grid. Uniform frames, one row, sideways scroll, and
   a "see all" at the end. A vertical grid of service cards is what turns a page
   into a wall, and adding the 44th service must not make this page taller. */
.rail-group + .rail-group { margin-block-start: clamp(var(--s-6), 5vw, var(--s-7)); }
.rail__label {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  margin-block-end: var(--s-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-1);
}
.rail__label::after {
  content: "";
  flex: 1;
  block-size: 1px;
  background: var(--c-line);
  order: 1;
}
.rail__nav { display: flex; gap: var(--s-2); order: 2; }
.rail__btn {
  display: grid;
  place-items: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--c-line);
  background: transparent;
  color: var(--c-ink-muted);
  cursor: pointer;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.rail__btn:hover:not(:disabled) { color: var(--c-ink); border-color: var(--c-brand); }
.rail__btn:disabled { cursor: default; }
/* Touch devices scroll the rail with a finger; the buttons are a pointer
   affordance and only earn their space where there is a pointer. */
@media (hover: none) { .rail__nav { display: none; } }
.rail {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-block-end: var(--s-3);
  scrollbar-width: thin;
  scrollbar-color: var(--c-line) transparent;
}
.rail::-webkit-scrollbar { block-size: 6px; }
.rail::-webkit-scrollbar-thumb { background: var(--c-line); border-radius: var(--r-pill); }

/* THE WIDTH GOES ON THE <li>, NOT ON THE <a> INSIDE IT.
   The list item is the flex child of the rail; sizing the anchor instead left the
   items free to shrink to their content, so every card collapsed to about a third
   of its intended width and the labels broke over three ragged lines. */
.rail > li {
  scroll-snap-align: start;
  flex: 0 0 clamp(10rem, 32vw, 12.5rem);
  display: flex;
}
.rail__item {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5) var(--s-4);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-4);
  box-shadow: var(--e-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease),
              background-color var(--t-base) var(--ease);
}
.rail__item:hover {
  transform: translateY(-4px);
  background: var(--c-surface-2);
  box-shadow: var(--e-3);
}
.rail__item .icon { --icon-size: 1.8rem; color: var(--c-ink); }
.rail__item span {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.4;
}
.rail-foot { display: flex; justify-content: center; margin-block-start: var(--s-6); }

/* ── why us — a ruled index, not a strip of icon tiles ───────────────────────
   Four cards of icon-plus-label-plus-one-line is precisely what every competitor
   ships, and it was called out as poor. This is a ruled list instead: numbered,
   full measure, the claim carrying real typographic weight. */
.index { border-block-start: 1px solid var(--c-line); }
.index__row {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-5);
  align-items: start;
  padding-block: clamp(var(--s-5), 4vw, var(--s-6));
  border-block-end: 1px solid var(--c-line);
}
@media (min-width: 48rem) {
  .index__row { grid-template-columns: auto 22ch 1fr; align-items: center; }
}
.index__row .icon { --icon-size: 2rem; color: var(--c-ink); }
.index__title {
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-2);
  line-height: 1.3;
}
.index__body { color: var(--c-ink-muted); grid-column: 1 / -1; }
@media (min-width: 48rem) { .index__body { grid-column: auto; } }

/* ── process ─────────────────────────────────────────────────────────────── */
.steps {
  display: grid;
  gap: var(--s-5);
  counter-reset: step;
}
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(4, 1fr); gap: var(--s-4); } }
.step {
  counter-increment: step;
  padding-block-start: var(--s-5);
  border-block-start: 2px solid var(--c-line);
  position: relative;
}
.step::before {
  content: counter(step);
  position: absolute;
  inset-block-start: calc(var(--s-5) * -1);
  inset-inline-start: 0;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 700;
  color: var(--c-brand);
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--step-1); margin-block-end: var(--s-2); }
.step p { color: var(--c-ink-muted); font-size: var(--step-0); }

/* ── reviews ─────────────────────────────────────────────────────────────────
   Four real reviews, quoted verbatim from the Google profile, with the names
   they were written under. Not one word of this band is authored. The aggregate
   number is deliberately absent: "5.0" beside a count of four invites an audit
   it cannot survive, and the sentences are the stronger signal anyway. */
.quotes { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .quotes { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 70rem) { .quotes { grid-template-columns: repeat(4, 1fr); } }
.quote {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-4);
  box-shadow: var(--e-2);
}
.quote__stars { display: flex; gap: 2px; }
/* A RATING STAR IS GOLD. The set's accent is teal, and inheriting it here made
   five teal stars that read as ornament rather than as a rating; the colour is the
   signal, not the shape. This is the one place the accent is overridden, and
   because it is a custom property it reaches through the <use> shadow boundary
   where an ordinary descendant selector could not. */
.quote__stars .icon { --icon-size: 1.05rem; --icon-accent: var(--c-star); }
.quote blockquote { font-size: var(--step-0); line-height: 1.75; flex: 1; }
.quote figcaption { font-size: var(--step--1); color: var(--c-ink-faint); }
.quote figcaption b { color: var(--c-ink-muted); font-weight: 600; }
.quotes-foot { display: flex; justify-content: center; margin-block-start: var(--s-6); }

/* ── areas — three fixed rows that scroll sideways ───────────────────────────
   Wrapping pills grew to eight rows on a phone. Locking the block to three rows
   keeps its height constant however long the district list becomes, which is
   the only way a 185-entry list can live on a home page at all. */
/* The rows are wider than the page and that is the whole design, so the edge has
   to LOOK like more content rather than like a clipping bug. The mask fades the
   inline-end edge out; without it a half-cut pill at the boundary reads as broken. */
.area-rows {
  display: grid;
  gap: var(--s-3);
  -webkit-mask-image: linear-gradient(to left, var(--c-bg) 88%, transparent 100%);
  mask-image: linear-gradient(to left, var(--c-bg) 88%, transparent 100%);
}
.area-row {
  display: flex;
  gap: var(--s-3);
  overflow-x: auto;
  scrollbar-width: none;
}
.area-row::-webkit-scrollbar { display: none; }
.area-row a {
  flex: none;
  padding: var(--s-2) var(--s-4);
  border: 1px solid var(--c-line);
  border-radius: var(--r-pill);
  font-size: var(--step--1);
  color: var(--c-ink-muted);
  white-space: nowrap;
  transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}
.area-row a:hover { color: var(--c-ink); border-color: var(--c-brand); }
.areas-foot { display: flex; justify-content: center; margin-block-start: var(--s-6); }

/* ── faq ─────────────────────────────────────────────────────────────────── */
.faq { max-inline-size: var(--w-narrow); margin-inline: auto; }
.faq__item { border-block-end: 1px solid var(--c-line); }
.faq__item:first-child { border-block-start: 1px solid var(--c-line); }
.faq__q {
  inline-size: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-4);
  padding-block: var(--s-5);
  background: none;
  border: 0;
  text-align: start;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-1);
  line-height: 1.4;
  cursor: pointer;
}
.faq__q .icon { margin-inline-start: auto; color: var(--c-brand); transition: transform var(--t-base) var(--ease); }
.faq__q[aria-expanded="true"] .icon { transform: rotate(180deg); }
.faq__a { display: none; padding-block-end: var(--s-5); color: var(--c-ink-muted); }
.faq__q[aria-expanded="true"] + .faq__a { display: block; }
.faq__a p + p { margin-block-start: var(--s-3); }

/* ── closing ask ─────────────────────────────────────────────────────────── */
/* The closing ask is the last thing on the page and it has to feel like an event,
   not like a tenth band. The one light band is already spent on the stakes, so this
   one earns its separation with a brand hairline, a brand-tinted ground and the
   largest type outside the hero. */
.band[data-surface="brand"] { border-block-start: 2px solid var(--c-brand); }
.cta__in { text-align: center; }
.cta__in h2 { font-size: var(--step-5); max-inline-size: 18ch; margin-inline: auto; }
.cta__in p { margin-block: var(--s-4) var(--s-6); color: var(--c-ink-muted); font-size: var(--step-1); }
.cta__in .btn-row { justify-content: center; }

/* ── footer ──────────────────────────────────────────────────────────────── */
.site-footer {
  border-block-start: 1px solid var(--c-line);
  padding-block: clamp(var(--s-7), 6vw, var(--s-8)) var(--s-6);
  font-size: var(--step-0);
}
.footer__grid { display: grid; gap: var(--s-7); }
@media (min-width: 46rem) { .footer__grid { grid-template-columns: 1.4fr 1fr 1fr; } }
@media (min-width: 68rem) { .footer__grid { grid-template-columns: 1.3fr 0.9fr 0.9fr 1.1fr; } }

/* The map sits in its own footer column. It is given a real height and a border so
   the frame reads as part of the page rather than as a hole punched through it. */
.footer__map iframe {
  inline-size: 100%;
  block-size: 13.5rem;
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  filter: grayscale(0.25) contrast(1.05);
}
.footer__map p { margin-block-start: var(--s-3); }
.footer__map a { display: inline-flex; align-items: center; gap: var(--s-2); }
.footer__map .icon { color: var(--c-brand); }
.footer__col h2 {
  font-size: var(--step-0);
  color: var(--c-ink);
  margin-block-end: var(--s-4);
  letter-spacing: 0.04em;
}
.footer__col li + li { margin-block-start: var(--s-2); }
.footer__col a, .footer__col p { color: var(--c-ink-muted); }
.footer__col a:hover { color: var(--c-brand); }
.footer__nap { display: grid; gap: var(--s-3); }
.footer__nap div { display: flex; align-items: start; gap: var(--s-3); }
.footer__nap .icon { --icon-size: 1.25rem; color: var(--c-brand); margin-block-start: 0.3em; }
.footer__legal {
  margin-block-start: var(--s-7);
  padding-block-start: var(--s-5);
  border-block-start: 1px solid var(--c-line);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-5);
  align-items: center;
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}
.footer__legal a { color: var(--c-ink-faint); }
.footer__legal a:hover { color: var(--c-ink-muted); }
.footer__legal p:first-child { margin-inline-end: auto; }

/* ── sticky call bar ─────────────────────────────────────────────────────────
   It STARTS VISIBLE in CSS and JS hides it while the hero is on screen. That
   order matters: a visitor with JS disabled gets a bar that is always there,
   rather than one that never appears. This deliberately overrides the system
   guidance that the bar must not animate in on scroll. */
.callbar {
  position: fixed;
  inset-inline: 0;
  inset-block-end: 0;
  z-index: 40;
  display: flex;
  gap: var(--s-2);
  padding: var(--s-3) var(--gutter) max(var(--s-3), env(safe-area-inset-bottom));
  background: var(--c-surface);
  border-block-start: 1px solid var(--c-line);
  box-shadow: var(--e-4);
  transition: transform var(--t-base) var(--ease), opacity var(--t-base) var(--ease);
}
.callbar[data-hidden="true"] {
  transform: translateY(110%);
  opacity: 0;
  pointer-events: none;
}
.callbar .btn { flex: 1; justify-content: center; }
@media (min-width: 62rem) { .callbar { display: none; } }
@media (max-width: 61.99rem) { body { padding-block-end: 5rem; } }

/* ══ INTERIOR PAGES ═══════════════════════════════════════════════════════════
   The home page earns a photographic hero. Interior pages do not: a stock frame
   at the top of a terms page is decoration pretending to be content. They open on
   type instead, which is also what makes them feel like the same site rather than
   five variations on it. */

.page-head {
  background: var(--c-tint);
  border-block-end: 1px solid var(--c-line);
  padding-block: clamp(var(--s-7), 7vw, var(--s-8));
  text-align: center;
}
.page-head h1 { font-size: var(--step-5); max-inline-size: 20ch; margin-inline: auto; }
.page-head p {
  margin-block-start: var(--s-4);
  color: var(--c-ink-muted);
  font-size: var(--step-1);
  max-inline-size: 52ch;
  margin-inline: auto;
}
.crumbs {
  display: flex;
  justify-content: center;
  gap: var(--s-2);
  margin-block-end: var(--s-4);
  font-size: var(--step--1);
  color: var(--c-ink-faint);
}
.crumbs a:hover { color: var(--c-brand); }

/* ── long-form prose ─────────────────────────────────────────────────────────
   Capped at the measure, because a 1200px line of Arabic is a line nobody
   finishes. */
.prose { max-inline-size: var(--measure); margin-inline: auto; }
.contact-cards + .prose { margin-block-start: clamp(var(--s-7), 6vw, var(--s-8)); }
.prose h2 { font-size: var(--step-3); margin-block: var(--s-7) var(--s-4); }
.prose h2:first-child { margin-block-start: 0; }
.prose h3 { font-size: var(--step-1); margin-block: var(--s-5) var(--s-3); }
.prose p { color: var(--c-ink-muted); }
.prose p + p { margin-block-start: var(--s-4); }
.prose ul { margin-block-start: var(--s-4); display: grid; gap: var(--s-3); }
.prose ul li {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  color: var(--c-ink-muted);
}
.prose ul .icon { --icon-size: 1.3rem; color: var(--c-brand); margin-block-start: 0.35em; }
.prose strong { color: var(--c-ink); font-weight: 600; }

/* ── the services listing ────────────────────────────────────────────────────
   Image cards, uniform, grouped by segment. Every card is the same 4:3 frame and
   the same width; the label sits under the image rather than over it, so a long
   Arabic service name never has to compete with a photograph for legibility.

   A first pass built this as a ruled text index on the grounds that "photographs
   live in the hero and the work band only". That rule is a HOME PAGE rule: there,
   a photo on a service card was decoration standing in for evidence. Here the
   photograph is how you find the service you came for. */
.svc-group + .svc-group { margin-block-start: clamp(var(--s-7), 6vw, var(--s-8)); }
.svc-group > h2 {
  display: flex;
  align-items: center;
  gap: var(--s-4);
  font-size: var(--step-2);
  margin-block-end: var(--s-5);
}
.svc-group > h2::after { content: ""; flex: 1; block-size: 1px; background: var(--c-line); }

.svc-cards {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--s-4);
}
@media (min-width: 40rem) { .svc-cards { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 64rem) { .svc-cards { grid-template-columns: repeat(4, 1fr); } }

.svc-card {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-4);
  overflow: hidden;
  box-shadow: var(--e-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.svc-card img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.svc-card span {
  padding: var(--s-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step-0);
  line-height: 1.45;
}
.svc-card:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.svc-card:hover img { transform: scale(1.05); }

/* ── contact methods ─────────────────────────────────────────────────────── */
.contact-cards { display: grid; gap: var(--s-4); }
@media (min-width: 46rem) { .contact-cards { grid-template-columns: repeat(2, 1fr); } }
.contact-card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3) var(--s-4);
  align-items: start;
  padding: var(--s-5);
  background: var(--c-surface);
  border-radius: var(--r-4);
  box-shadow: var(--e-2);
}
.contact-card .icon { --icon-size: 1.6rem; color: var(--c-ink); margin-block-start: 0.15em; }
.contact-card h2 { font-size: var(--step-1); }
.contact-card p { grid-column: 1 / -1; color: var(--c-ink-muted); font-size: var(--step-0); }
.contact-card .big {
  grid-column: 1 / -1;
  font-family: var(--font-heading);
  font-size: var(--step-2);
  font-weight: 600;
  color: var(--c-brand);
}

/* ── 404 ─────────────────────────────────────────────────────────────────── */
.notfound { text-align: center; padding-block: clamp(var(--s-8), 12vw, var(--s-9)); }
.notfound h1 { font-size: var(--step-4); }
.notfound p { margin-block: var(--s-4) var(--s-6); color: var(--c-ink-muted); }
.notfound .btn-row { justify-content: center; }

/* ── english locale ──────────────────────────────────────────────────────────
   Only what direction genuinely changes. Everything else is already logical. */
html[dir="ltr"] body { line-height: 1.7; }
html[dir="ltr"] h1, html[dir="ltr"] h2, html[dir="ltr"] h3 { line-height: 1.12; }
/* "Forward" is the other way in LTR, so every arrow that means it turns around.
   The POSITIONS are already correct in both directions, because the controls are
   laid out with flexbox and the first child follows the writing direction on its
   own. What does not follow it is the glyph inside: prev sits on the correct side
   in English and was still drawing a right-pointing chevron. */
html[dir="ltr"] .btn--quiet .icon { transform: scaleX(-1); }
html[dir="ltr"] .btn--quiet:hover .icon { transform: scaleX(-1) translateX(-4px); }
html[dir="ltr"] .rail__btn .icon { transform: scaleX(-1); }

/* ══ REVISION: LIGHT-PRIMARY PAGE ═════════════════════════════════════════════
   Everything below was added or reworked when the page inverted from dark-primary
   to light-primary and the home page was rebuilt a second time. */

/* ── the hero trust strip ────────────────────────────────────────────────────
   Four items under the paragraph, and they are NOT four cards. An icon-plus-label
   tile grid under a hero is what every competitor ships and it was called poor in
   review on an earlier client. This is one inline row, no boxes, no borders, no
   background: it reads as a caption to the hero rather than as a second component.
   Both reference sites run the same four-item row, which is where the pattern is
   from; the treatment is what differs. */
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--s-3) var(--s-6);
  margin-block-start: var(--s-8);
  padding-block-start: var(--s-6);
  border-block-start: 1px solid rgb(255 255 255 / 0.16);
  max-inline-size: 46rem;
  margin-inline: auto;
}
.hero__trust li {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step--1);
  color: var(--c-dark-ink);
}
.hero__trust .icon { --icon-size: 1.25rem; color: var(--c-brand-bright); }

/* ── services carousel, now image cards ──────────────────────────────────────
   The chips were called basic and they were: a row of icons and words on a page
   whose whole subject is how a place LOOKS. These are the same photographs the
   services page uses, deliberately, so the two surfaces agree rather than showing
   a service two different ways. Height is still fixed: eight cards a slide, two
   rows, and the block does not grow when the 44th service is added. */
.carousel__slide { gap: var(--s-4); }

.svc-tile {
  display: flex;
  flex-direction: column;
  block-size: 100%;
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  overflow: hidden;
  box-shadow: var(--e-1);
  transition: transform var(--t-base) var(--ease), box-shadow var(--t-base) var(--ease);
}
.svc-tile img {
  inline-size: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}
.svc-tile span {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-3) var(--s-4);
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: var(--step--1);
  line-height: 1.4;
  min-block-size: 3.75rem;
}
.svc-tile .icon { --icon-size: 1.15rem; color: var(--c-brand); }
.svc-tile:hover { transform: translateY(-4px); box-shadow: var(--e-3); }
.svc-tile:hover img { transform: scale(1.06); }

/* ── process, now illustrated ────────────────────────────────────────────────
   The steps were type and a rule. They are still four short steps, but each one
   now carries its own drawing, so the band reads at a glance rather than being
   read. The number moves onto the illustration as a counter rather than sitting
   above a border. */
.steps--illus { counter-reset: step; }
.steps--illus .step {
  border-block-start: 0;
  padding-block-start: 0;
  text-align: center;
}
/* The counter that the plain steps use is switched OFF here, because the illustrated
   step carries its number in a badge on the artwork. Leaving both on printed the
   number twice, once in teal above the drawing and once inside it. */
.steps--illus .step::before { content: none; }
.step__art { position: relative; inline-size: clamp(7rem, 20vw, 9rem); margin-inline: auto; }
.step__art img { inline-size: 100%; block-size: auto; }
.step__n {
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  inline-size: 2.2rem;
  block-size: 2.2rem;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-brand);
  color: var(--c-on-brand);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-0);
  font-variant-numeric: tabular-nums;
}
.steps--illus h3 { margin-block: var(--s-4) var(--s-2); }

/* ── testimonials, larger ────────────────────────────────────────────────────
   Two per row instead of four, so each review gets room to be read rather than
   glanced at, and each one gains a watermark, a real author row and its source.
   The four are all there is: no fifth was invented to balance the grid. */
.quotes--lg { grid-template-columns: 1fr; gap: var(--s-5); }
@media (min-width: 52rem) { .quotes--lg { grid-template-columns: repeat(2, 1fr); } }
.quotes--lg .quote {
  position: relative;
  overflow: hidden;
  padding: var(--s-6);
  gap: var(--s-4);
}
.quote__mark {
  position: absolute;
  inset-block-start: var(--s-4);
  inset-inline-end: var(--s-4);
  --icon-size: 3.5rem;
  color: var(--c-brand);
  opacity: 0.1;
  pointer-events: none;
}
.quotes--lg blockquote {
  font-family: var(--font-heading);
  font-size: var(--step-1);
  font-weight: 500;
  line-height: 1.7;
  color: var(--c-ink);
}
.quote__author { display: flex; align-items: center; gap: var(--s-3); }
.quote__avatar {
  inline-size: 2.75rem;
  block-size: 2.75rem;
  flex: none;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--c-brand-ghost);
  color: var(--c-brand);
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: var(--step-1);
}
.quote__who { display: grid; gap: 2px; }
.quote__who b { font-family: var(--font-heading); font-weight: 600; font-size: var(--step-0); }
.quote__who span { font-size: var(--step--1); color: var(--c-ink-faint); }
.quote__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  margin-inline-start: var(--s-2);
  padding: 2px var(--s-2);
  border-radius: var(--r-pill);
  background: var(--c-brand-ghost);
  color: var(--c-brand);
  font-size: var(--step--1);
  font-weight: 600;
}

/* ── the work band on a dark ground ──────────────────────────────────────────
   The band is one of the page's three dark moments, and it is dark on purpose:
   twelve photographs against near-black read as a contact sheet, and the light
   bands either side make it land. */
.band[data-surface="dark"] .work__note { color: var(--c-dark-faint); }

/* ══ MOBILE NAVIGATION ════════════════════════════════════════════════════════
   THE SITE HAD NONE. Below 62rem the nav was simply display:none and the only
   thing left in the header was the call button, so on a phone there was no way to
   reach the services page, the about page or anything else except the footer.

   The drawer reuses .site-nav rather than duplicating the links into a second
   menu. Two lists of the same links is how one of them goes stale. */

.nav-toggle {
  display: grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  /* HARD AGAINST THE INLINE-END EDGE, which is the far left in Arabic and the far
     right in English. It used to carry only a small start-margin, and with the
     header's call button hidden on mobile nothing was left to push it outward, so
     it sat in the middle of the bar next to the logo: measured at 165-209 of a
     375px viewport in Arabic and 212-256 in English. A menu button in the middle
     of a header does not read as a menu button. */
  margin-inline-start: auto;
  border: 1px solid var(--c-line);
  border-radius: var(--r-3);
  background: var(--c-surface);
  color: var(--c-ink);
  cursor: pointer;
  transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-toggle:hover { border-color: var(--c-brand); color: var(--c-brand); }
@media (min-width: 62rem) { .nav-toggle { display: none; } }

/* Three bars that become a cross. The middle bar fades while the outer two travel
   to the centre and rotate, so it is one motion rather than a swap. */
.nav-toggle__bars { position: relative; inline-size: 1.25rem; block-size: 0.875rem; }
.nav-toggle__bars span {
  position: absolute;
  inset-inline: 0;
  block-size: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform var(--t-base) var(--ease), opacity var(--t-fast) var(--ease);
}
.nav-toggle__bars span:nth-child(1) { inset-block-start: 0; }
.nav-toggle__bars span:nth-child(2) { inset-block-start: calc(50% - 1px); }
.nav-toggle__bars span:nth-child(3) { inset-block-end: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(0.375rem) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-0.375rem) rotate(-45deg); }

/* The drawer slides in from the INLINE-END, which is the side the toggle is on in
   both directions. transform has no logical keyword, so the distance is a custom
   property set per direction and the rule itself stays direction-free. */
html[dir="rtl"] { --nav-slide: -100%; }
html[dir="ltr"] { --nav-slide: 100%; }

.nav-backdrop {
  position: fixed;
  inset: 0;
  /* BELOW the header, not above it. .site-header is position:relative with z-index
     20, which makes it a stacking context, so the drawer's z-index 60 only competes
     INSIDE the header and a backdrop at 50 painted straight over the top of it.
     Sitting under the header keeps the drawer clear and leaves the toggle live. */
  z-index: 10;
  background: var(--scrim-nav);
  opacity: 0;
  transition: opacity var(--t-base) var(--ease);
}
.nav-backdrop[data-open="true"] { opacity: 1; }

@media (max-width: 61.99rem) {
  .site-nav {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 60;
    inline-size: min(84vw, 20rem);
    padding: calc(var(--s-8) + var(--s-4)) var(--s-5) var(--s-6);
    background: var(--c-surface);
    box-shadow: var(--e-4);
    overflow-y: auto;
    overscroll-behavior: contain;
    transform: translateX(var(--nav-slide));
    visibility: hidden;
    transition: transform var(--t-base) var(--ease), visibility var(--t-base) var(--ease);
  }
  .site-nav[data-open="true"] { transform: translateX(0); visibility: visible; }

  .site-nav a {
    font-size: var(--step-1);
    padding-block: var(--s-4);
    border-block-end: 1px solid var(--c-line-soft);
  }
  /* The growing underline is a pointer affordance and there is no pointer here. */
  .site-nav a::after { content: none; }
  .site-nav a[aria-current="page"] { color: var(--c-brand); }

  /* Links arrive one after another rather than all at once. `backwards` so they are
     hidden through the delay instead of flashing at full opacity first. */
  .site-nav[data-open="true"] a { animation: nav-in var(--t-base) var(--ease) backwards; }
  .site-nav[data-open="true"] a:nth-child(1) { animation-delay: 60ms; }
  .site-nav[data-open="true"] a:nth-child(2) { animation-delay: 105ms; }
  .site-nav[data-open="true"] a:nth-child(3) { animation-delay: 150ms; }
  .site-nav[data-open="true"] a:nth-child(4) { animation-delay: 195ms; }
  .site-nav[data-open="true"] .site-nav__cta { animation: nav-in var(--t-base) var(--ease) 240ms backwards; }

  .site-nav__cta { display: grid; gap: var(--s-3); margin-block-start: var(--s-6); }
  .site-nav__cta .btn { justify-content: center; }

  /* The header's own call button would be a third copy of the same action once the
     drawer carries one. */
  .site-header__in > .btn { display: none; }
}
@media (min-width: 62rem) { .site-nav__cta { display: none; } }

@keyframes nav-in {
  from { opacity: 0; transform: translateY(10px); }
}

/* While the drawer is open the page behind it does not scroll, and the sticky call
   bar goes with it: at z-index 40 it would otherwise float above the veil and read
   as part of the menu. */
body[data-nav-open="true"] { overflow: hidden; }
body[data-nav-open="true"] .callbar { opacity: 0; pointer-events: none; }