/* ============================================================
   ARABTECH — SITE CHROME  ·  MODERN CORPORATE B2B
   Utility bar, sticky white header, tinted hero, teal figures
   band, deep teal footer.
   ------------------------------------------------------------
   WORDPRESS NOTE. These classes are worn by the template parts in
   parts/ (utility-bar, header, footer). The drawer is driven by
   assets/js/app.js; core/navigation's own responsive overlay is
   dressed to match in components.css, so either one is coherent.
   ============================================================ */

/* ---------- UTILITY BAR ---------- */
.util { background: var(--teal-d); color: #DCE9ED; font-size: var(--t-nano); }
.util__in {
  max-width: var(--page-max); margin-inline: auto;
  padding: .5rem var(--sheet-gutter);
  display: flex; flex-wrap: wrap; gap: .4rem 1.75rem; justify-content: flex-end;
}
.util a { color: #DCE9ED; text-decoration: none; }
.util a:hover { text-decoration: underline; }
.util strong { color: #fff; font-weight: 600; }

/* ---------- HEADER ---------- */
.rail {
  position: sticky; top: 0; z-index: 100;
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-block-end: 1px solid var(--line);
}
.rail__inner {
  max-width: var(--page-max); margin-inline: auto;
  padding: .875rem var(--sheet-gutter);
  display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap;
}
.rail__logo { display: flex; align-items: center; flex: none; }
.rail__logo img, .rail__logoimg { inline-size: clamp(128px, 16vw, 168px); block-size: auto; }

.rail__nav { margin-inline-start: auto; }
.rail__list { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; list-style: none; margin: 0; padding: 0; }
.rail__link {
  display: inline-block;
  padding: .5rem .75rem;
  border-radius: var(--r-sm);
  font-family: var(--font-display); font-size: var(--t-small); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--ink); text-decoration: none;
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.rail__link:hover { background: var(--teal-l); color: var(--teal-d); }
.rail__link[aria-current="page"] { background: var(--teal-l); color: var(--teal-d); }
.rail__aside { display: flex; align-items: center; gap: var(--s-3); flex: none; }
.lang-switch { display: flex; border: 1px solid var(--line); border-radius: var(--r-pill); overflow: hidden; }
.lang-switch a {
  padding: .45rem .8rem;
  font-family: var(--font-display); font-size: var(--t-nano); font-weight: 600;
  letter-spacing: 0; text-transform: none;
  color: var(--teal); text-decoration: none;
}
.lang-switch a[aria-current="true"] { background: var(--teal); color: #fff; }
.lang-switch a:hover:not([aria-current="true"]) { background: var(--teal-l); color: var(--teal-d); }

.rail__burger {
  display: none; inline-size: 2.75rem; block-size: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  align-items: center; justify-content: center; color: var(--teal);
}
.rail__burger:hover { border-color: var(--gr-300); background: var(--teal-l); }
.burger-bars { display: grid; gap: 4px; }
.burger-bars i { display: block; inline-size: 18px; block-size: 2px; background: currentColor; border-radius: 2px; }

@media (max-width: 78rem) {
  .rail__nav, .rail__aside .btn { display: none; }
  .rail__burger { display: inline-flex; }
  .rail__aside { margin-inline-start: auto; }
}

/* ---------- MOBILE DRAWER ---------- */
.drawer {
  position: fixed; inset: 0; z-index: 200;
  background: #fff;
  padding: var(--s-5) var(--sheet-gutter);
  overflow-y: auto;
  display: grid; align-content: start; gap: var(--s-2);
}
.drawer[hidden] { display: none; }
.drawer__top { display: flex; align-items: center; justify-content: space-between; margin-block-end: var(--s-6); }
.drawer__close {
  inline-size: 2.75rem; block-size: 2.75rem;
  border: 1px solid var(--line); border-radius: var(--r-sm);
  color: var(--teal); font-size: 1.25rem;
}
.drawer a.drawer__link {
  display: flex; align-items: center; gap: var(--s-4);
  padding: var(--s-4) 0;
  border-block-end: 1px solid var(--line);
  font-family: var(--font-display); font-size: var(--t-h3); font-weight: 700;
  color: var(--ink); text-decoration: none;
}
.drawer a.drawer__link:hover { color: var(--red-d); }

/* ---------- FOOTER ---------- */
.foot { background: var(--teal-d); color: #C9DBE0; margin-block-start: var(--s-16); }
.foot__inner { max-width: var(--page-max); margin-inline: auto; padding: clamp(2.5rem,5vw,4rem) var(--sheet-gutter) 1.5rem; }
.foot__grid { display: grid; gap: var(--s-8); grid-template-columns: repeat(auto-fit, minmax(min(13rem,100%), 1fr)); }
.foot :is(h2, h3, h4, h5) {
  color: #fff; font-family: var(--font-display);
  font-size: var(--t-nano); font-weight: 700;
  letter-spacing: var(--tr-label); text-transform: uppercase;
  margin-block-end: var(--s-4);
}
.foot ul { list-style: none; padding: 0; display: grid; gap: var(--s-3); }
.foot a { color: #C9DBE0; text-decoration: none; font-size: var(--t-small); }
.foot a:hover { color: #fff; text-decoration: underline; }
.foot address { font-style: normal; color: #C9DBE0; font-size: var(--t-small); line-height: var(--lh-loose); }
.foot img { filter: brightness(0) invert(1); opacity: .95; }
.foot__bar {
  margin-block-start: var(--s-10); padding-block-start: var(--s-5);
  border-block-start: 1px solid rgba(255,255,255,.16);
  display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-8); align-items: center;
  font-size: var(--t-nano); color: #A9C3CA;
}
.foot__bar a { font-size: inherit; color: #A9C3CA; }

/* ---------- HERO ---------- */
.hero {
  background: var(--bg-2);
  border-block-end: 1px solid var(--line);
  padding-block: clamp(2.75rem, 6vw, 5rem);
  margin-block-end: clamp(2rem, 4vw, 3.5rem);
}
.hero__sheet { display: grid; gap: 0; background: transparent; border: 0; box-shadow: none; padding: 0; }
.hero__body { padding: 0; display: grid; gap: var(--s-5); }
.hero__title {
  font-family: var(--font-display);
  font-size: var(--t-display-1);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  font-weight: 800; text-wrap: balance;
  color: var(--ink);
  max-width: 18ch;
}
.hero__title em { font-style: normal; color: var(--teal); }
.hero__lede { font-size: var(--t-body-lg); color: var(--ink-secondary); max-width: 56ch; line-height: var(--lh-normal); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-block-start: var(--s-3); }
.hero__tb { margin-block-start: var(--s-6); }

/* The red eyebrow above the hero heading, as chosen. */
.eyebrow {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--t-nano); letter-spacing: .1em; text-transform: uppercase;
  color: var(--red-d); margin-block-end: .5rem; display: block;
}

/* ---------- SECTION HEADS ---------- */
.sec-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--s-6); flex-wrap: wrap;
  padding-block-end: 0; border-block-end: 0;
  margin-block-end: clamp(1.75rem, 3vw, 2.5rem);
}
.sec-head h2 { color: var(--ink); font-size: var(--t-h2); font-weight: 700; }
.sec-head p { color: var(--ink-tertiary); font-size: var(--t-small); max-width: 52ch; margin-block-start: var(--s-2); }
.sec-head--onSheet h2 { color: var(--ink); }
.sec-head--onSheet p { color: var(--ink-tertiary); }

/* ---------- PROSE ---------- */
.prose { max-width: var(--measure); }
.prose > * + * { margin-block-start: var(--s-4); }
.prose h2, .prose h3 { margin-block-start: var(--s-10); }
.prose h2:first-child, .prose h3:first-child { margin-block-start: 0; }
.prose p { color: var(--ink-secondary); line-height: var(--lh-loose); }
.prose strong { color: var(--ink); font-weight: 700; }
.prose ul, .prose ol { padding-inline-start: var(--s-5); display: grid; gap: var(--s-2); color: var(--ink-secondary); }
.prose li::marker { color: var(--teal); }

/* ---------- BREADCRUMB ---------- */
.crumbs {
  display: flex; flex-wrap: wrap; gap: var(--s-2); align-items: center;
  list-style: none; padding: 0; margin-block-end: var(--s-5);
  font-size: var(--t-micro); color: var(--ink-tertiary);
}
.crumbs a { color: var(--teal); text-decoration: none; }
.crumbs a:hover { color: var(--red-d); text-decoration: underline; }
.crumbs li + li::before { content: "/"; margin-inline-end: var(--s-2); color: var(--gr-400); }
[dir="rtl"] .crumbs li + li::before { content: "\\"; }

/* ---------- FIGURES BAND — deep teal ---------- */
.figures {
  display: grid; gap: var(--s-5);
  grid-template-columns: repeat(auto-fit, minmax(min(10rem,100%), 1fr));
  background: var(--teal);
  border: 0; border-radius: var(--r-lg);
  padding: clamp(1.75rem, 3vw, 2.5rem);
}
.figure { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--r-md); padding: var(--s-5); }
.figure__n {
  font-family: var(--font-display); font-size: clamp(1.5rem,3.2vw,2.25rem);
  font-weight: 800; letter-spacing: -.02em; color: #fff; line-height: 1.05;
}
.figure__n small { font-size: .5em; color: #D3E4E8; }
.figure__l {
  margin-block-start: var(--s-2); font-family: var(--font-body);
  font-size: var(--t-micro); font-weight: 400; letter-spacing: 0;
  text-transform: none; color: #D3E4E8; line-height: 1.45;
}

/* ---------- SPLIT HERO + HONEST ART PANEL ---------- */
.hero__in {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
}
@media (max-width: 60rem) { .hero__in { grid-template-columns: 1fr; } }

.ph { background: #fff; border: 1px solid var(--line); border-radius: var(--r-lg);
      overflow: hidden; box-shadow: var(--sh); margin: 0; }
.ph__art { display: block; inline-size: 100%; block-size: auto; background: var(--bg-3); }
.ph__cap { display: flex; gap: .625rem; align-items: flex-start; padding: .875rem 1.125rem;
           font-size: var(--t-nano); line-height: 1.5; color: var(--ink-tertiary);
           border-block-start: 1px solid var(--line); margin: 0; }
.ph__cap b { font-family: var(--font-display); color: var(--ink); font-weight: 700; white-space: nowrap; }