/* ==========================================================================
   TrustUs — design system
   ==========================================================================
   Everything shared by the pages built without Divi lives here and only here:
   the tokens, the type scale, the layout containers, the button family, and the
   floating capsule header.

   Page stylesheets (home-pro.css, about.css) load AFTER this one and hold only
   what is particular to that page. Nothing in this file may be restated there —
   that is how the header on one page ended up a different width, with a
   different gap and a different button shape from the header on another.

   Load order: tu-system.css -> the page's own stylesheet.
   ========================================================================== */


:root {
  /* The five that were still declared only on .hp. Everything is in one place
     now so the next template does not have to rediscover which scope a token
     happens to live in. */
  --paper: #fff;
  --line-strong: #d6ced2;
  --red-tint: rgba(167, 0, 30, .07);
  --red-edge: rgba(167, 0, 30, .28);

  /* Text on dark surfaces. */
  --on-dark: #fff;
  --on-dark-soft: rgba(255, 255, 255, .88);
  --on-dark-faint: rgba(255, 255, 255, .16);

  /* --- Type scale ---
     Seven steps. Section headings are the only fluid ones; body text stays
     fixed so line length is predictable at every width. */
  --fs-display: clamp(28px, 3.4vw, 46px);   /* hero */
  --fs-h2:      clamp(26px, 2.8vw, 38px);   /* section headings */
  --fs-h3:      clamp(18px, 1.7vw, 21px);   /* card and row titles */
  --fs-h4:      18px;
  --fs-lead:    17px;                        /* section intros */
  --fs-body:    15.5px;
  --fs-small:   14.5px;                      /* meta, captions, labels */
  --fs-caption: 13px;                        /* eyebrows */
  --fs-stat:    clamp(30px, 3.2vw, 42px);    /* the big numbers */

  --lh-tight: 1.25;    /* display */
  --lh-head: 1.45;     /* headings */
  --lh-body: 1.8;      /* running text */

  /* --- Spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 --- */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 24px;
  --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 80px; --sp-10: 96px;

  /* --- Radius --- */
  /* Two radii, named for what they are for, because "xs / md / lg" invited a
     third: there were 12px and 14px both meaning "a card", two pixels apart,
     which is not a distinction — it is an accident that then spread. Anything
     you click or type in is a control; anything that holds content is a
     surface. Nothing else gets a corner. */
  /* The button's height. Named because the hero's registration marks have to
     sit on the same row as it, and a second 52px written down somewhere else is
     a second 52px to forget. */
  --btn-h: 52px;

  --r-control: 3px;   /* buttons, inputs, options — nearly square, deliberately */
  --r-surface: 12px;  /* cards, panels, the header capsule, pictures in a layout */
  --r-pill: 999px;    /* pills and dots */

  /* --- Layout --- */
  --wrap: 1200px;
  --gutter: clamp(20px, 5vw, 64px);
  --section: clamp(56px, 7vw, 96px);   /* one section rhythm, top and bottom */
  --card-pad: var(--sp-5);
  --grid-gap: clamp(18px, 2.4vw, 30px);

  --red: #a7001e;
  --red-deep: #780016;
  --ink: #14121a;

  /* The dark *surface*, which is not the same thing as --ink. --ink is the
     colour type is set in and stays a neutral near-black, because red-tinted
     body text reads as a mistake. The page's dark grounds were #14121a and
     #221d29, two near-blacks a hair apart for no reason; they are this one.

     The footer is deliberately not: its charcoal is the site's own and matches
     what is published, and the client wants it kept. */
  --dark: #1b0710;
  --muted: #6b6270;
  --line: #e6e0e3;
  /* The banded sections, and the fills that go with them. Asked for as
     #ff270905 — rgba(255, 39, 9, .02) — and written here as what that paints
     over the page's white, because --wash is also the ground of the header's
     dropdown, which floats over the hero photograph: at 2% alpha that menu
     would have been see-through and unreadable. Same colour on the page, no
     surface that can be seen through. */
  --wash: #fffbfa;
  /* Single source for the inset, so the capsule and the hero frame are the
     same width by construction rather than by two matching numbers. */
  /* Drives the section width AND the header capsule, so the two can't drift.
     The hero is deliberately outside it — it is full-bleed (margin:0), so
     narrowing here pulls in every section except the hero, as asked. */
  --frame-inset: clamp(16px, 10vw, 176px);
  /* The inner gutter the header and the sections below it share. On :root, not
     on a page's class: with it scoped to the two pages that float their header,
     every other page fell back to a different one and came out a different
     width — which is exactly the "same menu in name only" this pair exists to
     prevent. */
  --frame-gutter: clamp(18px, 2.2vw, 32px);
  /* What the capsule occupies from the top of the page: its own top padding
     plus the logo and the padding around it. Pages that do not put a picture
     behind it reserve exactly this. */
  --hd-float-h: 88px;
  /* Separate from the side inset: they were the same value, so narrowing the
     page also pushed the hero a long way down. */
  --frame-top: clamp(10px, 1.3vw, 18px);
  background: #fff;
}



/* The typeface is the document's, not one wrapper's. It was on .hp, so a page
   whose content is not wrapped in .hp — the legal pages — was set in the
   browser's default serif while the font file loaded and went unused. */
body {
  font-family: 'Almarai', Tahoma, Arial, sans-serif;
}

/* --- BASE ---
   Applies to any page whose content is wrapped in .hp. The palette, the scale
   and the layout values are the tokens above. */
.hp {
  font-size: var(--fs-lead);
  line-height: var(--lh-body);
  color: var(--muted);
  background: var(--paper);
}


.hp *, .hp *::before, .hp *::after { box-sizing: border-box; }
.hp img { max-width: 100%; display: block; }
.hp ul, .hp ol { list-style: none; margin: 0; padding: 0; }
.hp a { text-decoration: none; }
/* --- TYPOGRAPHY -----------------------------------------------------------
   Headings share one weight, colour and balance rule; only the step differs. */
/* Normal specificity, deliberately: these have to outrank Divi's own heading
   rules, which is what :where() cost them — headings came back at weight 500.
   Component rules are (0,1,1) too and are declared later, so they still win;
   the one exception is patched where it is defined. */
.hp h1, .hp h2, .hp h3, .hp h4 {
  margin: 0; color: var(--ink); font-weight: 800;
  line-height: var(--lh-head); text-wrap: balance;
}
.hp h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
.hp h2 { font-size: var(--fs-h2); }
.hp h3 { font-size: var(--fs-h3); }
.hp h4 { font-size: var(--fs-h4); }
.hp p  { font-size: var(--fs-body); line-height: var(--lh-body); }

/* --- LAYOUT --- */
/* One measure, every page. width:auto is required: with width:100% the inline
   margins push the box sideways instead of narrowing it. */
.hp-wrap {
  width: auto;
  max-width: none;
  margin-inline: var(--frame-inset);
  padding-inline: var(--frame-gutter);
}
.hp-section { padding-block: var(--section); }
.hp-section--wash { background: var(--wash); }

/* Three grounds, and no more: white, --wash, and --dark. Red is an accent — a
   heading, a button, a rule — and never a ground of its own.

   There was a fourth: a soft red bloom behind two sections, which put a fourth
   temperature on a page that already alternates three, and read as a tint that
   belonged to nothing. It is gone.

   --wash is for a section that is a list of many small things, where a ground
   groups them. Everything that is read rather than scanned sits on white, and
   the page ends on white before the footer's dark. Reading down the homepage:

     hero        dark        services    wash        blog        white
     ticker      wash        experience  dark        faq         white
     about       white       clients     white       footer      dark

   Reach for white first. A band has to earn itself. */

/* Eyebrow: a short rule then the label. The rule gives every section the same
   start point, which is what makes a long page feel ordered.
   No letter-spacing: these labels are Arabic, and Arabic is cursive — spacing
   the letters pulls apart glyphs that are meant to join. */
.hp-eyebrow {
  display: flex; align-items: center; gap: var(--sp-3);
  color: var(--red); font-size: var(--fs-caption); font-weight: 800;
  margin-bottom: var(--sp-4);
}
.hp-eyebrow::before { content: ""; width: 28px; height: 2px; background: currentColor; flex: none; }

.hp-head { max-width: 44ch; margin-bottom: clamp(32px, 4vw, 48px); }
.hp-head p { margin: var(--sp-4) 0 0; }

/* The frame inset is 10vw, which is right on a laptop and far too generous on
   a phone: at 390px it was taking 39px a side, and the gutter another 18, so
   276px of a 390px screen were left for the content. It lived in the homepage's
   stylesheet scoped to .tu-dark-hero, so it reached the two pages that open on
   a picture and no others — every other page kept the laptop measure on a
   phone. */
@media (max-width: 860px) {
  :root { --frame-inset: 16px; --frame-gutter: 0px; }
}

/* --- BUTTONS --------------------------------------------------------------
   One shape for every button on the page: same height, padding, radius, weight
   and transition. Variants change colour only, never geometry, so a primary
   and a ghost sitting side by side line up exactly. */
.hp-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2);
  min-height: var(--btn-h);
  padding: 0 var(--sp-6);
  border: 1.5px solid transparent;
  border-radius: var(--r-control);
  font-weight: 800; font-size: var(--fs-body); line-height: 1;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.hp-btn svg { width: 18px; height: 18px; flex: none; }

/* Primary — one per screen. */
.hp-btn { background: var(--red); border-color: var(--red); color: var(--on-dark); }
.hp-btn:hover { background: var(--red-deep); border-color: var(--red-deep); }
.hp-btn:active { background: var(--red-deep); border-color: var(--red-deep); }

/* Secondary/ghost — the same button with the fill removed. */
.hp-btn--ghost { background: transparent; border-color: var(--red-edge); color: var(--red); }
.hp-btn--ghost:hover { background: var(--red-tint); border-color: var(--red); color: var(--red); }

/* On dark surfaces. */
.hp-btn--light { background: var(--on-dark); border-color: var(--on-dark); color: var(--red); }
.hp-btn--light:hover { background: transparent; color: var(--on-dark); border-color: var(--on-dark); }
.hp-btn--outline { background: transparent; border-color: rgba(255,255,255,.5); color: var(--on-dark); }
.hp-btn--outline:hover { background: var(--on-dark); border-color: var(--on-dark); color: var(--red); }

.hp-btn[aria-disabled="true"], .hp-btn:disabled {
  background: var(--line); border-color: var(--line); color: var(--muted);
  pointer-events: none;
}

.hp a:focus-visible, .hp button:focus-visible, .hp summary:focus-visible {
  outline: 2px solid var(--red); outline-offset: 3px;
}


/* --- Capsule header ---
   Keyed to .tu-dark-hero rather than to a page template: this is the header a
   page gets when it opens on a dark hero, and two templates now do. The class
   is added in functions.php. */
.tu-hd {
  /* Fixed, not absolute: absolute scrolled the bar off with the hero, so it was
     gone before the section ended. Fixed keeps it in view all the way through,
     and site-header.js is what hides it — only once the hero is behind us and
     only while moving down. Scrolling up brings it straight back. */
  position: fixed;
  padding-top: var(--sp-4);
}
.tu-hd__inner {
  max-width: none;
  width: auto;
  margin-inline: var(--frame-inset);
  min-height: 0;
  padding: var(--sp-2) var(--sp-3) var(--sp-2) var(--sp-5);
  /* No plate at rest: the bar sits straight on whatever is behind it. Corner
     radius matches the hero frame it sits inside, so the two read as one. */
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-surface);
  gap: var(--sp-5);
  transition: background-color .3s ease, backdrop-filter .3s ease;
}

/* One header, every page: the same capsule, the same measure, the same logo and
   the same menu. All of this used to be scoped to the two pages that open on a
   photograph — under a comment saying it lived there so a light page could not
   end up with a differently-shaped menu, which is what it caused: those two got
   a 54px logo on a 1152px measure and every other page got a 78px logo on
   1180px.

   What differs between pages is only what is behind the capsule. On a page that
   opens on a picture there is a picture; on a page that does not, the capsule
   paints its own dark ground, so the white logo and the white menu read the
   same way on both. */
.tu-hd__logo img { height: 54px; }
.tu-menu > li > a { font-size: 13px; }
.tu-hd__cta {
  /* The site's button corner, not a pill. It was the only pill button on the
     site, sitting in a capsule that is itself a 12px surface, while the five
     calls to action down the page are all near-square. */
  border-radius: var(--r-control);
  padding: var(--sp-3) var(--sp-5);
  font-size: 13px;
}
/* Tighter once the page has moved, never taller: the whole point of the
   scrolled state is to give the reader back some of the screen. */
.tu-scrolled .tu-hd__inner { min-height: 0; padding-block: var(--sp-2); }
.tu-scrolled .tu-hd__logo img { height: 44px; }

/* No picture behind it, so the capsule brings its own ground — and on a light
   one the logo is the drawn logo and the menu is read in ink. Same capsule,
   same measure, same everything else; only what it is standing on changed, so
   what is standing on it changes with it. The page begins below it because it
   is fixed. */
/* `:root:not(.tu-scrolled)` on the front, because this is the header at rest
   and the scrolled one has to be able to replace it. Without it these rules —
   which carry a `body:not()` and are therefore more specific — beat the
   scrolled state, and the header stayed light all the way down the page. */
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__inner {
  background: var(--paper);
  border-color: var(--line);
}
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__logo img { filter: none; }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-menu > li > a { color: var(--ink); text-shadow: none; }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-menu > li > a:hover { color: var(--red); }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-menu > li > .tu-sub-toggle { color: var(--ink); }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__lang { color: var(--muted); }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__lang:hover { color: var(--red); }
/* وزرّ البحث معهما. لونه الأبيض مكتوبٌ في search-modal.css بحجّة أن ما حوله
   أبيض «في كل صفحة» — وهذه القاعدة نفسها نقضت ذلك: على شريطٍ أبيض تُغمَّق
   الروابط ويبقى الزرّ أبيضَ على أبيض فيختفي. يأخذ لون جاره. */
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__search { color: var(--muted); }
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__search:hover,
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__search:focus-visible {
  color: var(--red); background: var(--red-tint);
}
:root:not(.tu-scrolled) body:not(.tu-dark-hero) .tu-hd__burger span { background: var(--ink); }
/* The page has to start below the header, and the reserve has to sit on the
   element that carries the ground — on the wrapper around it, it was a band of
   page-white above the first section's own colour, so the page opened on a line
   right under the menu. Templates with no section of their own take it on the
   main element; ones that open on a section put it there themselves. */
body:not(.tu-dark-hero) .tu-page,
body:not(.tu-dark-hero) .tu-fallback {
  padding-top: calc(var(--hd-float-h) + var(--sp-6));
}

/* On white the logo is used as drawn — inverting it here would erase it. */
.tu-dark-hero .tu-hd__logo img { filter: brightness(0) invert(1) drop-shadow(0 1px 3px rgba(0, 0, 0, .35)); }
.tu-dark-hero .tu-menu > li > a { color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .4); }
.tu-dark-hero .tu-menu > li > a:hover { color: #fff; opacity: .8; }
.tu-hd__cta { background: var(--red); border-color: var(--red); color: #fff; }
.tu-hd__cta:hover { background: var(--red-deep); border-color: var(--red-deep); color: #fff; }
.tu-dark-hero .tu-hd__burger span { background: #fff; }

/* Scrolled state keeps the capsule, just tightens it. */
.tu-scrolled .tu-hd {
  position: fixed;
  padding-top: var(--sp-3);
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
}
/* Once the page has moved, every page has the same header: the dark capsule
   the homepage has always had once its hero is behind you. A page that started
   light hands its logo and its menu over to it. */
.tu-scrolled .tu-hd__inner {
  background: rgba(20, 15, 22, .72);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-color: rgba(255, 255, 255, .12);
}
.tu-scrolled .tu-hd__logo img { filter: brightness(0) invert(1); }
.tu-scrolled .tu-menu > li > a { color: #fff; text-shadow: none; }
.tu-scrolled .tu-menu > li > a:hover { color: #fff; opacity: .8; }
.tu-scrolled .tu-menu > li > .tu-sub-toggle,
.tu-scrolled .tu-hd__lang { color: rgba(255, 255, 255, .8); }
.tu-scrolled .tu-hd__burger span { background: #fff; }



/* The two rules below finish the capsule's geometry. They were living in the
   homepage's own stylesheet, scoped to .tu-dark-hero, which is exactly why the
   About header came out 1037px wide with a 24px gap against the homepage's
   1152px and 16px — the same menu in name only. */
.tu-hd__inner {
  /* Matches the gutter the sections below start on, so the first menu item and
     the section headings land on the same vertical line. */
  padding-inline: var(--frame-gutter);
  gap: var(--sp-4);
}

/* No shadows anywhere on these pages, per the brief. */
.tu-hd__inner,
.tu-menu .sub-menu { box-shadow: none; }

/* Dropdown panel. Its shape is the header's; its colours follow whichever
   header this is, the same way the menu's own do. */
.tu-menu .sub-menu {
  border-top: 2px solid var(--red);
  border-radius: 0 0 var(--r-surface) var(--r-surface);
}
.tu-dark-hero .tu-menu .sub-menu {
  background: rgba(20, 15, 22, .96);
  border: 1px solid rgba(255, 255, 255, .1);
  border-top: 2px solid var(--red);
}
.tu-dark-hero .tu-menu .sub-menu a { color: var(--on-dark-soft); }
.tu-dark-hero .tu-menu .sub-menu a:hover { color: #fff; background: rgba(255, 255, 255, .06); }

body:not(.tu-dark-hero) .tu-menu .sub-menu {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 2px solid var(--red);
}
body:not(.tu-dark-hero) .tu-menu .sub-menu a { color: var(--muted); }
body:not(.tu-dark-hero) .tu-menu .sub-menu a:hover { color: var(--red); background: var(--wash); }


/* Menu beside the call to action rather than centred, so the capsule reads as
   logo on one side and the whole navigation group on the other. */
.tu-hd__nav { justify-content: flex-end; }



/* The mobile panel: one sheet, every page. It was scoped to the two that float
   their header, so on every other page the panel opened with no ground and
   white links on white. */
@media (max-width: 1280px) {
  /* The capsule had no horizontal padding, so the logo ended 1px from its own
     rounded corner — the mark looked stuck to the edge of the bar it sits in.
     The burger at the other end was flush for the same reason. */
  .tu-hd__inner {
    border-radius: var(--r-surface);
    padding-inline: clamp(12px, 4vw, 20px);
  }

  /* The sheet's own gutter. --frame-gutter is 0 below this width, because the
     page's sections go edge to edge on a phone — but a menu read at arm's
     length cannot start on the edge of the glass, and a toggle placed against
     it hung 6px off the screen. */
  .tu-hd__nav { --nav-gutter: clamp(18px, 5vw, 28px); }

  /* The sheet covers the screen — the bar included. It carries its own mark and
     its own way out, so nothing of the page shows behind it and the list has the
     whole height to itself. Pinned to all four edges rather than given a height
     in viewport units: dvh is the viewport at its tallest and svh at its
     shortest, and this has to end where the screen ends right now. */
  .tu-hd__nav {
    inset: 0;
    height: auto;
    max-height: none;
    margin: 0;
    padding: 0 0 calc(env(safe-area-inset-bottom, 0px) + 40px);
    border-radius: 0;
    background: var(--paper);
    overscroll-behavior: contain;
    z-index: 20;
  }

  /* An ancestor that transforms or filters becomes the containing block for
     anything fixed inside it. The header slides away on scroll with a transform
     and its capsule blurs its backdrop — so while either was on, `inset: 0`
     meant the bar's own 88px and the sheet had no height at all. Neither is
     doing anything worth keeping while the sheet is over them. */
  /* Only while the sheet is open — the bar still slides away on scroll the rest
     of the time, and that is what the transform is for. An identity transform
     establishes the containing block just as a real one does, which is why this
     has to say `none` and not `translateY(0)`. */
  .tu-nav-open .tu-hd { transform: none; }
  .tu-nav-open .tu-hd__inner {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent;
    border: 0;
    box-shadow: none;
  }
  .tu-nav-open, .tu-nav-open body { overflow: hidden; }

  /* The floating chat button belongs to the page, not to the menu. Every
     selector the chat plugin has used is here because which one it renders
     depends on its version. */
  .tu-nav-open .ht-ctc,
  .tu-nav-open .ht-ctc-chat,
  .tu-nav-open #ht-ctc-chat,
  .tu-nav-open [class*="ht-ctc"],
  .tu-nav-open [id*="whatsapp"],
  .tu-nav-open [class*="whatsapp-button"] { display: none !important; }

  /* --- The sheet's own top row --- */
  .tu-nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px var(--nav-gutter);
  }
  .tu-nav__logo img { height: 46px; width: auto; display: block; }
  .tu-nav__close {
    padding: 8px 4px;
    border: 0;
    background: none;
    color: var(--ink);
    font: inherit;
    font-size: 15px;
    font-weight: 800;
    cursor: pointer;
  }
  .tu-nav__close:hover { color: var(--red); }

  /* --- The list --- */
  /* Big, and separated by air rather than by a rule under every item. Seven
     lines of the same weight with a line under each read as a table; this is a
     menu, so the sections carry the size and the pages under them do not. */
  .tu-menu { padding: 8px 0 0; }
  .tu-dark-hero .tu-menu > li > a,
  .tu-scrolled .tu-menu > li > a,
  .tu-menu > li > a {
    padding: 12px var(--nav-gutter);
    border: 0;
    color: var(--ink);
    text-shadow: none;
    font-size: clamp(17px, 4.4vw, 20px);
    font-weight: 800;
    line-height: 1.45;
  }

  /* The toggle is a plus that becomes a minus, on the far edge from the word. */
  .tu-menu > li { position: relative; }
  .tu-dark-hero .tu-menu > li > .tu-sub-toggle,
  .tu-scrolled .tu-menu > li > .tu-sub-toggle,
  .tu-menu > li > .tu-sub-toggle {
    position: absolute;
    inset-block-start: 8px;
    inset-inline-end: calc(var(--nav-gutter) - 10px);
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--ink);
    cursor: pointer;
  }
  /* Centred by their own offsets: the button is a grid, and a grid does not
     place an absolutely positioned child. */
  /* A plus that becomes a minus. site-header.css draws this pseudo as a
     chevron with two borders, so they are cleared here — otherwise the open
     state kept its rotated corner and the mark came out as a diagonal. */
  .tu-menu > li > .tu-sub-toggle::before,
  .tu-menu > li > .tu-sub-toggle::after {
    content: "";
    position: absolute;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    border: 0;
    background: currentColor;
    transition: transform .2s ease, opacity .2s ease;
  }
  .tu-menu > li > .tu-sub-toggle::before {
    width: 17px; height: 2px;
    transform: translate(50%, -50%);
  }
  .tu-menu > li > .tu-sub-toggle::after {
    width: 2px; height: 17px;
    transform: translate(50%, -50%);
  }
  /* Three parts, to match the chevron's own open-state rule in site-header.css
     rather than lose to it. */
  .tu-menu > li.is-open > .tu-sub-toggle::before { transform: translate(50%, -50%); }
  .tu-menu > li.is-open > .tu-sub-toggle::after { opacity: 0; transform: translate(50%, -50%) scaleY(0); }

  /* --- The nested list --- */
  /* Part of the sheet, not a panel over a dark header:
     `.tu-dark-hero .tu-menu .sub-menu` is three classes and beat the single
     mobile rule, so on the homepage it opened as a black block inside white
     paper. */
  .tu-dark-hero .tu-menu .sub-menu,
  .tu-scrolled .tu-menu .sub-menu,
  .tu-menu .sub-menu {
    background: none;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    padding: 0 0 10px;
  }
  .tu-dark-hero .tu-menu .sub-menu a,
  .tu-scrolled .tu-menu .sub-menu a,
  .tu-menu .sub-menu a {
    padding: 9px var(--nav-gutter);
    padding-inline-start: var(--nav-gutter);
    color: var(--muted);
    text-shadow: none;
    font-size: 14.5px;
    font-weight: 500;
  }
  .tu-dark-hero .tu-menu .sub-menu a:hover,
  .tu-scrolled .tu-menu .sub-menu a:hover,
  .tu-menu .sub-menu a:hover { color: var(--red); background: none; }

  /* --- The foot --- */
  /* The header's own hover for this button is `background: transparent` with
     white text — written for a bar over a photograph. On the sheet's white
     paper that is white on white: pointing at it made the words vanish. */
  .tu-hd__cta--mobile { margin: 20px var(--nav-gutter) 4px; }
  .tu-hd__cta--mobile:hover,
  .tu-hd__cta--mobile:focus-visible {
    background: var(--red-deep);
    border-color: var(--red-deep);
    color: #fff;
  }

  /* The sheet is outside .hp, and the reset that clears link underlines is
     `.hp a` — so the pages at the foot of it came out underlined. */
  .tu-hd__nav a { text-decoration: none; }

  /* The row opens the section, not just the plus. site-header.css takes the
     pointer off these links so they cannot follow their own "#"; the script
     handles that instead, and the whole line becomes the target. */
  .tu-menu > li.menu-item-has-children > a { pointer-events: auto; cursor: pointer; }

  /* Pointing at a line turns it red, not white. Both header states hover to
     white — right over a photograph, invisible on the sheet's white paper, and
     it took "خدماتنا" with it because that one has no submenu to open. */
  .tu-dark-hero .tu-menu > li > a:hover,
  .tu-scrolled .tu-menu > li > a:hover,
  .tu-menu > li > a:hover,
  .tu-dark-hero .tu-menu > li > a:focus-visible,
  .tu-scrolled .tu-menu > li > a:focus-visible,
  .tu-menu > li > a:focus-visible { color: var(--red); opacity: 1; }

  .tu-nav__foot { padding: 22px var(--nav-gutter) 0; }
  .tu-nav__label {
    margin: 22px 0 12px;
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    text-transform: uppercase;
  }
  .tu-nav__foot .tu-nav__label:first-child { margin-top: 0; }
  .tu-nav__social {
    list-style: none; margin: 0; padding: 0;
    display: flex; flex-wrap: wrap; gap: 10px;
  }
  .tu-nav__social a {
    display: grid; place-items: center;
    width: 46px; height: 46px;
    border-radius: 50%;
    background: var(--red-tint);
    color: var(--red);
    transition: background-color .2s ease, color .2s ease;
  }
  .tu-nav__social a:hover { background: var(--red); color: #fff; }

  .tu-nav__more { list-style: none; margin: 0; padding: 0; }
  .tu-nav__more li + li { margin-top: 2px; }
  .tu-nav__more a {
    display: block;
    padding: 10px 0;
    color: var(--ink);
    font-size: 16px;
    font-weight: 700;
  }
  .tu-nav__more a:hover { color: var(--red); }
}

/* The sheet's own furniture is for the sheet only. */
@media (min-width: 1101px) {
  .tu-nav__top,
  .tu-nav__foot { display: none; }
}


/* --- Content frame --------------------------------------------------------
   Sections, the header capsule and the hero all sit on one inset, so the first
   menu item and the section headings land on the same vertical line. This has
   to live here: scoped to a page's own class it left the other page's sections
   running edge to edge. */

/* Wider containers would otherwise stretch running text past a readable
   measure; the caps stay so only the container grew, not the line length. */
.hp-head { max-width: 48ch; }