@import url("./fonts/plex.css");

/* ---------------------------------------------------------------- tokens */
/* Values come from the handoff's "Design Tokens" sheet. */
:root {
  --green: #2c6e37;
  --green-dark: #24562d;
  --green-tint: #f0f7f1;
  --green-tint-deep: #dceee0;
  --navy: #132747;
  --charcoal: #1f1d19;
  --offwhite: #f4f3ee;
  --page: #fafaf8;
  --border: #e8e6df;
  --text: #1f1d19;
  --text-2: #4e4a42;
  --muted: #8a857a;
  --muted-light: #b0aba0;
  --on-dark: #d6d3c8;
  --wa: #25d366;
  --wa-dark: #1ebe5a;
  --white: #fff;

  --radius: 8px;
  --pill: 9999px;
  --container: 1280px;
  --header-h: 64px;

  --focus: 2px solid #1e4383;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--page);
  color: var(--text);
  font-family: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, "Noto Sans Arabic", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

img,
video {
  max-width: 100%;
}

h1,
h2,
h3,
h4,
p {
  margin: 0;
}

:where(a, button):focus-visible {
  outline: var(--focus);
  outline-offset: 2px;
}

/* Sticky header would otherwise cover the top of anchored sections. */
[id] {
  scroll-margin-top: calc(var(--header-h) + 8px);
}

.container {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 16px;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* --------------------------------------------------------------- buttons */
.btn {
  height: 48px;
  padding-inline: 24px;
  border-radius: var(--radius);
  font-size: 16px;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color 0.18s, color 0.18s, border-color 0.18s;
}

.btn--lg {
  height: 52px;
}

.btn--wa {
  background: var(--wa);
  color: var(--white);
  font-weight: 700;
}

.btn--wa:hover {
  background: var(--wa-dark);
}

.btn--outline {
  background: var(--white);
  color: var(--green);
  border-color: var(--green);
}

.btn--outline:hover {
  background: var(--green-tint);
}

.btn--ghost {
  background: transparent;
  color: var(--green);
}

.btn--ghost:hover {
  background: var(--green-tint-deep);
}

.btn--on-navy {
  background: rgb(255 255 255 / 0.1);
  color: var(--white);
  border-color: rgb(255 255 255 / 0.45);
}

.btn--on-navy:hover {
  background: rgb(255 255 255 / 0.2);
}

.icon-wa {
  width: 20px;
  height: 20px;
  flex: none;
  fill: currentColor;
}

/* ------------------------------------------------------------------ pill */
.eyebrow {
  align-self: flex-start;
  background: var(--green-tint);
  color: var(--green);
  border-radius: var(--pill);
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
}

.eyebrow--on-dark {
  background: rgb(255 255 255 / 0.12);
  border: 1px solid rgb(255 255 255 / 0.25);
  color: var(--white);
  backdrop-filter: blur(4px);
}

/* ---------------------------------------------------------------- header */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 1px 2px rgb(31 29 25 / 0.06);
}

/* Logo in the left corner, menu button in the right one — the same physical
   layout in both languages. LTR gets that from source order; RTL needs the
   reverse to undo the flip. */
.header__bar {
  height: var(--header-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

[dir="rtl"] .header__bar {
  flex-direction: row-reverse;
}

.header__logo {
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 40px;
  width: auto;
}

/* Sits at the far end so it balances against the logo. Centring it left a
   dead gap once the WhatsApp button came out of the header. */
.header__nav {
  display: none;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  justify-content: flex-end;
  flex: 1;
}

.header__nav a {
  font-size: 15px;
  font-weight: 600;
  padding: 8px 4px;
  transition: color 0.18s;
}

.header__nav a:hover {
  color: var(--green);
}

.header__actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Source order is [switcher, burger], which puts the burger on the outer edge
   under LTR. RTL needs the reverse to keep it there. */
[dir="rtl"] .header__actions {
  flex-direction: row-reverse;
}

.lang-switch {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--pill);
  overflow: hidden;
  font-size: 13px;
  font-weight: 700;
  flex: none;
}

.lang-switch a {
  padding: 8px 14px;
  color: var(--text-2);
  transition: background-color 0.18s, color 0.18s;
}

.lang-switch a:hover {
  background: var(--offwhite);
  color: var(--green);
}

/* aria-current marks the page you are already on. */
.lang-switch a[aria-current="page"] {
  background: var(--green);
  color: var(--white);
}

.lang-switch a[aria-current="page"]:hover {
  background: var(--green);
  color: var(--white);
}

.burger {
  width: 48px;
  height: 48px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: center;
  justify-content: center;
  flex: none;
}

.burger:hover {
  background: var(--offwhite);
}

.burger span {
  width: 20px;
  height: 2px;
  background: var(--text);
}

/* Drawer anchored to the right edge, sliding in right-to-left. Physical
   `right` rather than a logical property because the menu button it belongs to
   is pinned right by the row-reverse above. */
.mobile-nav {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 70;
  width: min(82vw, 320px);
  background: var(--white);
  padding: 16px;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  box-shadow: -8px 0 32px rgb(31 29 25 / 0.18);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.28s ease, visibility 0.28s;
}

.mobile-nav[data-open="true"] {
  transform: translateX(0);
  visibility: visible;
}

.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: 65;
  background: rgb(31 29 25 / 0.45);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.28s ease, visibility 0.28s;
}

.nav-backdrop[data-open="true"] {
  opacity: 1;
  visibility: visible;
}

body[data-nav-open="true"] {
  overflow: hidden;
}

/* The drawer is pinned right in both languages, so the close button belongs at
   its right edge — where the menu button the reader just tapped was. That is
   flex-start under RTL and flex-end under LTR. */
.mobile-nav__head {
  display: flex;
  justify-content: flex-start;
  padding-bottom: 8px;
}

[dir="ltr"] .mobile-nav__head {
  justify-content: flex-end;
}

.mobile-nav__close {
  width: 44px;
  height: 44px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: transparent;
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  color: var(--text);
}

.mobile-nav__close:hover {
  background: var(--offwhite);
}

.mobile-nav a {
  padding: 14px 8px;
  font-size: 16px;
  font-weight: 600;
  border-bottom: 1px solid var(--offwhite);
}

.mobile-nav a:hover {
  color: var(--green);
}

@media (min-width: 1024px) {
  .header__nav {
    display: flex;
  }

  .burger,
  .mobile-nav,
  .nav-backdrop {
    display: none !important;
  }
}

@media (min-width: 1024px) and (max-width: 1180px) {
  .header__nav {
    gap: 14px;
  }

  .header__nav a {
    font-size: 14px;
  }
}

/* ------------------------------------------------------------------ hero */
.hero {
  position: relative;
  min-height: 85vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  background: var(--charcoal);
}

.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgb(31 29 25 / 0.75), transparent);
}

.hero__inner {
  position: relative;
  width: 100%;
  padding-block: 64px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.hero h1 {
  font-size: clamp(30px, 4.5vw, 44px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  max-width: 760px;
  text-wrap: pretty;
}

.hero__sub {
  font-size: 18px;
  line-height: 1.8;
  color: var(--offwhite);
  max-width: 600px;
}

.hero__paths {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
  width: 100%;
  max-width: 640px;
}

.path-card {
  background: rgb(255 255 255 / 0.1);
  border: 1px solid rgb(255 255 255 / 0.35);
  border-radius: var(--radius);
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  backdrop-filter: blur(4px);
  transition: background-color 0.18s;
}

.path-card:hover {
  background: rgb(255 255 255 / 0.2);
}

.path-card b {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
}

.path-card span {
  font-size: 14px;
  color: rgb(255 255 255 / 0.75);
}

/* Three paths from 600px up: dates and dairy, then the one we build. Explicit
   columns rather than auto-fit, because auto-fit's 240px floor drops the third
   card onto its own row on a tablet. */
@media (min-width: 600px) {
  .hero__paths {
    grid-template-columns: repeat(3, 1fr);
    max-width: 960px;
  }
}

/* Below 600px the two cards already stack, and a third would push the H1 and
   the subline off a 390px fold. So the engineering path becomes one compact
   link under them -- same destination, a fraction of the height. Exactly one
   of the two is ever visible. */
.hero__eng-link {
  display: none;
}

@media (max-width: 599px) {
  .path-card--eng {
    display: none;
  }

  .hero__eng-link {
    display: inline-block;
    color: var(--white);
    font-size: 15px;
    font-weight: 600;
    text-decoration: underline;
  }
}

/* -------------------------------------------------------------- sections */
.section {
  padding-block: 80px;
}

.section--tight {
  padding-block: 64px;
}

.section--white {
  background: var(--white);
}

.section--sand {
  background: var(--offwhite);
}

.section--navy {
  background: var(--navy);
}

.section--mint {
  background: var(--green-tint);
}

.section__head {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section__head h2,
.split h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
}

.section__head p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 680px;
  text-wrap: pretty;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 32px;
}

.actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

/* --------------------------------------------------- silicone-seals split */
.split {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 40px;
  align-items: center;
}

.split video {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(31 29 25 / 0.08);
}

.split__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.split__copy p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 520px;
}

/* ----------------------------------------------------------------- cards */
/* 300px min gives 3 columns at container width: the 9 date-machine cards land
   as a clean 3x3, and the 5 dairy cards as 3+2. */
.cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 2px rgb(31 29 25 / 0.06);
  transition: box-shadow 0.2s, transform 0.2s;
}

.card:hover {
  box-shadow: 0 8px 24px rgb(31 29 25 / 0.1);
  transform: translateY(-1px);
}

/* height:auto is load-bearing — the width/height attributes on the <img> would
   otherwise win over aspect-ratio and stretch the photo to its intrinsic
   height, cropping it to a tall strip. */
.card img {
  aspect-ratio: 4 / 3;
  width: 100%;
  height: auto;
  object-fit: cover;
  border-bottom: 1px solid var(--border);
  display: block;
}

.card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}

.card__body h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.card__body p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
  flex: 1;
}

.card__cta {
  color: var(--green);
  font-size: 14px;
  font-weight: 600;
}

/* Dairy machines have no photography yet. Rather than an empty grey box, the
   slot reads as a deliberate "coming soon" panel. */
.card--soon .card__slot {
  aspect-ratio: 4 / 3;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(135deg, var(--green-tint) 0%, var(--green-tint-deep) 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.card--soon .card__slot svg {
  width: 40px;
  height: 40px;
  stroke: var(--green);
  opacity: 0.8;
  fill: none;
  stroke-width: 1.5;
}

.card--soon .card__slot span {
  font-size: 13px;
  font-weight: 600;
  color: var(--green);
  background: rgb(255 255 255 / 0.75);
  border-radius: var(--pill);
  padding: 4px 14px;
}

/* ----------------------------------------------------------- atrum/navy */
.atrum {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.atrum__copy {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: flex-start;
}

.atrum__copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  color: var(--white);
}

.atrum__copy p {
  font-size: 18px;
  line-height: 1.8;
  color: var(--offwhite);
  max-width: 600px;
  text-wrap: pretty;
}

.logo-chips {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.logo-chips span {
  background: var(--white);
  border-radius: var(--radius);
  padding: 8px 12px;
  display: inline-flex;
}

.logo-chips img {
  height: 36px;
  width: auto;
}

.atrum__map {
  width: 100%;
  height: 640px;
  border: 0;
  border-radius: 12px;
  display: block;
  background: var(--white);
}

/* --------------------------------------------------------------- partner */
.partner {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: center;
  max-width: 520px;
}

.partner img {
  height: 72px;
  width: auto;
  border-radius: 4px;
}

.partner h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.partner p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

.partner__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.section--tight h2 {
  font-size: clamp(20px, 2.5vw, 26px);
  font-weight: 600;
  line-height: 1.45;
}

/* ----------------------------------------------------------------- stats */
/* 1px grid gap over a border-coloured background reads as hairline dividers. */
.stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.stats div {
  background: var(--white);
  padding: 32px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  text-align: center;
}

.stats b {
  font-size: 34px;
  font-weight: 700;
  color: var(--green);
  line-height: 1.2;
}

.stats span {
  font-size: 14px;
  line-height: 1.75;
  color: var(--text-2);
}

/* ------------------------------------------------------------------- cta */
.cta {
  display: flex;
  flex-direction: column;
  gap: 24px;
  align-items: center;
  text-align: center;
}

.cta h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
}

.cta p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 520px;
}

.cta .actions {
  justify-content: center;
}

/* ---------------------------------------------------------------- footer */
.footer {
  background: var(--charcoal);
  padding-block: 64px 32px;
}

.footer__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 32px;
}

.footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer__col--brand {
  gap: 16px;
  align-items: flex-start;
}

.footer__col h2 {
  font-size: 16px;
  font-weight: 600;
  color: var(--white);
}

.footer__col p {
  font-size: 14px;
  line-height: 1.75;
  color: var(--offwhite);
}

.footer__col a {
  font-size: 14px;
  color: var(--on-dark);
  transition: color 0.18s;
}

.footer__col a:hover {
  color: var(--white);
}

.footer__inner {
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.footer__legal {
  border-top: 1px solid #33302b;
  padding-block-start: 24px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--muted);
}

/* --------------------------------------------------------- floating chat */
.wa-float {
  position: fixed;
  bottom: 16px;
  inset-inline-end: 16px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--wa);
  color: var(--white);
  box-shadow: 0 8px 24px rgb(31 29 25 / 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 60;
  animation: wa-pulse 6s ease-in-out infinite;
}

.wa-float .icon-wa {
  width: 28px;
  height: 28px;
}

@keyframes wa-pulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ================================================================ machine
   Landing-page template shared by every /ar/machines/* page and its /en/
   mirror. Nothing below introduces a colour, font, radius or shadow that
   is not already a token above. */

/* ------------------------------------------------------------ breadcrumb */
.crumbs {
  padding-block: 16px;
  font-size: 14px;
  color: var(--muted);
}

.crumbs ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.crumbs a:hover {
  color: var(--green);
}

/* The separator is a chevron that has to point along the reading direction,
   so it is flipped rather than swapped for a second icon. */
.crumbs svg {
  width: 14px;
  height: 14px;
  stroke: var(--muted-light);
  fill: none;
  stroke-width: 2;
  flex: none;
}

[dir="rtl"] .crumbs svg {
  transform: scaleX(-1);
}

.crumbs [aria-current="page"] {
  color: var(--text-2);
  font-weight: 600;
}

/* ----------------------------------------------------------- machine hero */
/* 16:9 rather than the homepage 85vh: these pages are read, not landed on,
   and a full-viewport hero would push the outcome cards off the first screen. */
.mhero {
  position: relative;
  background: var(--charcoal);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
  min-height: 420px;
}

.mhero__media {
  position: absolute;
  inset: 0;
}

.mhero__inner {
  position: relative;
  width: 100%;
  padding-block: 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.mhero h1 {
  font-size: clamp(26px, 3.6vw, 40px);
  font-weight: 700;
  line-height: 1.35;
  color: var(--white);
  max-width: 820px;
  text-wrap: pretty;
}

.mhero__sub {
  font-size: 18px;
  line-height: 1.8;
  color: var(--offwhite);
  max-width: 640px;
  text-wrap: pretty;
}

@media (min-width: 1024px) {
  .mhero {
    min-height: 480px;
  }

  .mhero__inner {
    padding-block: 56px;
  }
}

/* --------------------------------------------------------- media + slots */
/* The frame owns the aspect ratio, so a missing photo costs zero layout
   shift: the placeholder underneath is already exactly the right size. */
.mfig {
  position: relative;
  margin: 0;
  overflow: hidden;
  background: var(--offwhite);
}

.mfig--wide {
  aspect-ratio: 16 / 9;
}

.mfig--product {
  aspect-ratio: 4 / 3;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgb(31 29 25 / 0.08);
}

.mfig img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hidden by an inline onerror when the file is not on disk yet, which
   uncovers the placeholder sitting behind it. */
.mfig img[hidden] {
  display: none;
}

.ph {
  position: absolute;
  inset: 0;
  background: var(--offwhite);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 16px;
  text-align: center;
}

.ph svg {
  width: 40px;
  height: 40px;
  stroke: var(--muted-light);
  fill: none;
  stroke-width: 1.5;
}

.ph span {
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}

/* The hero frame fills its absolutely-positioned wrapper, so it must not also
   carry an aspect ratio: 16/9 against a fixed height sizes the frame to less
   than the viewport width and leaves the charcoal backdrop showing beside the
   photograph. Invisible while the placeholder was charcoal too; obvious the
   moment a real picture lands. */
.mhero .mfig {
  aspect-ratio: auto;
  width: 100%;
  height: 100%;
}

/* In the hero the placeholder keeps the standard sand fill and grey icon, so a
   page waiting for its photograph reads as deliberate rather than broken -- the
   same slot the machine pages show everywhere else, just at the hero's ratio.
   It moves to the top because the H1 is bottom-aligned and a centred label
   would sit behind it; the hero scrim over the sand keeps the white type
   legible (measured: 8.9:1 where the H1 sits). */
.mhero .ph {
  justify-content: flex-start;
  padding-block-start: 32px;
}

/* The page scrim fades to nothing by the time it reaches the H1, which is fine
   over a photograph but not over a light placeholder. So the placeholder
   carries its own wash at the bottom -- it exists only while the photograph is
   missing, and disappears with it. */
.mhero .ph::after {
  content: "";
  position: absolute;
  inset: auto 0 0 0;
  height: 72%;
  background: linear-gradient(to top, rgb(31 29 25 / 0.8), transparent);
}

/* ------------------------------------------------------------- outcomes */
.outcomes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.outcome {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  box-shadow: 0 1px 2px rgb(31 29 25 / 0.06);
}

.outcome__icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius);
  background: var(--green-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.outcome__icon svg {
  width: 24px;
  height: 24px;
  stroke: var(--green);
  fill: none;
  stroke-width: 1.75;
}

.outcome h3 {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
}

.outcome p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
}

/* ------------------------------------------------------------- app tags */
.tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 0;
  margin: 0;
  list-style: none;
}

.tags li {
  background: var(--green-tint);
  color: var(--green);
  border-radius: var(--pill);
  padding: 6px 16px;
  font-size: 14px;
  font-weight: 600;
}

/* --------------------------------------------------------------- options */
/* The commercial heart of the page, so it gets the one panel with a green
   edge -- enough to pull the eye without inventing a colour. */
.options {
  background: var(--white);
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: 0 2px 8px rgb(31 29 25 / 0.08);
}

.options h2 {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.5;
}

.options > p {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
  margin-block-start: 6px;
}

.options ul {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.options li {
  display: flex;
  gap: 12px;
  font-size: 16px;
  line-height: 1.8;
  color: var(--text);
}

.options li svg {
  width: 20px;
  height: 20px;
  stroke: var(--green);
  fill: none;
  stroke-width: 2;
  flex: none;
  margin-block-start: 6px;
}

.options li b {
  font-weight: 600;
}

@media (min-width: 1024px) {
  .options {
    padding: 32px 36px;
  }
}

/* ------------------------------------------------------------- accordion */
/* No accordion existed on the site, so this is the simplest one consistent
   with the card language: same border, same radius, same 8px rhythm. */
.acc {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.acc details {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.acc summary {
  padding: 16px 20px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  list-style: none;
}

/* Safari draws its own disclosure triangle unless this is cleared. */
.acc summary::-webkit-details-marker {
  display: none;
}

.acc summary:hover {
  background: var(--offwhite);
}

.acc summary:focus-visible {
  outline: var(--focus);
  outline-offset: -2px;
}

.acc summary svg {
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  flex: none;
  transition: transform 0.2s;
}

.acc details[open] summary svg {
  transform: rotate(180deg);
}

.acc__body {
  padding: 0 20px 20px;
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
}

/* ----------------------------------------------------------------- specs */
.specs {
  width: 100%;
  border-collapse: collapse;
  font-size: 15px;
}

.specs th,
.specs td {
  text-align: start;
  padding: 12px 4px;
  border-block-end: 1px solid var(--border);
  line-height: 1.7;
  vertical-align: top;
}

.specs th {
  font-weight: 600;
  color: var(--text);
  width: 34%;
}

.specs td {
  color: var(--text-2);
}

.specs tr:last-child th,
.specs tr:last-child td {
  border-block-end: 0;
}

/* Narrow screens cannot hold a two-column table at a readable size, so each
   row stacks into a label above its value. */
@media (max-width: 599px) {
  .specs,
  .specs tbody,
  .specs tr,
  .specs th,
  .specs td {
    display: block;
    width: auto;
  }

  .specs th {
    border-block-end: 0;
    padding-block-end: 0;
  }

  .specs td {
    padding-block-start: 2px;
  }
}

/* ----------------------------------------------------------------- proof */
.proof p {
  font-size: 17px;
  line-height: 1.85;
  color: var(--text);
  max-width: 820px;
  text-wrap: pretty;
}

.proof__partners {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  margin-block-start: 20px;
}

.proof__partners img {
  height: 32px;
  width: auto;
}

/* -------------------------------------------------------------- page cta */
.mcta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}

.mcta h2 {
  font-size: clamp(22px, 2.6vw, 28px);
  font-weight: 700;
  line-height: 1.45;
}

.mcta p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  max-width: 620px;
}

/* ---------------------------------------------------------- nav dropdown */
/* Hover alone would strand keyboard and touch users, so :focus-within opens
   it too and the trigger stays a real link to the section it summarises. */
.navdrop {
  position: relative;
  display: none;
}

.navdrop > a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.navdrop > a svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  transition: transform 0.18s;
}

.navdrop__menu {
  position: absolute;
  inset-block-start: calc(100% + 8px);
  inset-inline-end: 0;
  z-index: 60;
  min-width: 460px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 8px 24px rgb(31 29 25 / 0.1);
  padding: 16px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 24px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s, transform 0.18s, visibility 0.18s;
}

.navdrop:hover .navdrop__menu,
.navdrop:focus-within .navdrop__menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.navdrop:hover > a svg,
.navdrop:focus-within > a svg {
  transform: rotate(180deg);
}

/* One group per dropdown now that each path has its own: the two-column menu
   the combined "Machines" dropdown needed would leave half of itself empty. */
.navdrop__menu--single {
  grid-template-columns: 1fr;
  min-width: 260px;
}

.navdrop__group h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  padding: 4px;
  margin-block-end: 4px;
}

.navdrop__group a {
  display: block;
  font-size: 14px;
  font-weight: 500;
  padding: 6px 4px;
  line-height: 1.5;
  border-radius: 4px;
}

.navdrop__group a:hover {
  color: var(--green);
  background: var(--green-tint);
}

@media (min-width: 1024px) {
  .navdrop {
    display: block;
  }
}

/* The drawer has no room for a flyout, so the same links render inline
   under a heading instead. */
.mobile-nav h3 {
  font-size: 13px;
  font-weight: 700;
  color: var(--muted);
  margin-block: 12px 4px;
  padding-inline: 4px;
}

.mobile-nav__sub {
  font-size: 14px;
  padding-inline-start: 16px;
}

/* ------------------------------------------------- drawer machine groups */
/* Two collapsed groups instead of sixteen flat links. Shell, type, chevron
   size and rotate timing are the machine pages' .acc accordion; only the
   surface differs, because this one sits on the drawer's white panel rather
   than on a card. */
.nav-group {
  border-bottom: 1px solid var(--offwhite);
}

.nav-group__head {
  width: 100%;
  padding: 14px 8px;
  font-family: inherit;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  background: none;
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
  text-align: start;
}

.nav-group__head:hover {
  color: var(--green);
}

.nav-group__head:focus-visible {
  outline: var(--focus);
  outline-offset: -2px;
}

/* Chevron first in source order, so it sits on the inline-start side in both
   directions without a rule of its own. It is the down chevron -- symmetric
   about its own vertical axis -- so it needs no RTL mirroring: scaleX(-1)
   here would be a no-op. Rotation is what carries the state, as in .acc. */
.nav-group__head svg {
  width: 18px;
  height: 18px;
  stroke: var(--muted);
  fill: none;
  stroke-width: 2;
  flex: none;
  transition: transform 0.2s;
}

.nav-group__head[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-group__panel {
  display: flex;
  flex-direction: column;
  padding-bottom: 8px;
}

/* A class selector outranks the UA sheet's [hidden] { display: none }, so
   without this the collapsed panels keep their space and the drawer opens
   scrolled -- which is the whole thing the grouping was meant to fix. */
.nav-group__panel[hidden] {
  display: none;
}

/* The last child's rule would double up with the group's own bottom border. */
.nav-group__panel a:last-child {
  border-bottom: 0;
}

/* ------------------------------------------------------- parts catalogue */
/* One card in the parts grid links to a page of its own. It is the same
   .outcome card as its neighbours -- only the resting/hover shadow pair from
   .card is added, so it reads as clickable without becoming a new component. */
.outcome--link:hover {
  box-shadow: 0 8px 24px rgb(31 29 25 / 0.1);
}

/* Pushes the "view details" line to the bottom, so a linked card and a plain
   one beside it stay the same height whatever their copy runs to. */
.outcome--link .card__cta {
  margin-block-start: auto;
  padding-block-start: 6px;
}

/* ------------------------------------------- hero that is itself a sequence */
/* This picture is a three-stage journey with its stage names on it, low on the
   frame. Two things follow, and both are the reason the copy is NOT overlaid.
   
   It keeps its own 8:3 shape. cover-cropping it into a 420px-tall hero shows
   about a third of its width at 390px, and the three stages -- the whole point
   of the picture -- are gone.
   
   And at 8:3 the picture is 146px tall on a phone and 288px on a tablet, which
   cannot hold an H1 and a subline as well as three labels. So the copy sits
   beneath the picture in the page's own ink, at every width: the H1 can never
   land on the labels, and the layout is the same one everywhere rather than
   two that disagree at a breakpoint. */
.mhero--stages {
  display: block;
  min-height: 0;
  background: var(--offwhite);
}

/* The positioning context for the scrim and the labels is the picture, not the
   section -- the section is taller than the picture now that it holds the copy
   too, and 82% of the section is not 82% of the picture. */
.mhero--stages .mhero__media {
  position: relative;
  aspect-ratio: 8 / 3;
}

.mhero--stages .hero__scrim {
  inset: auto 0 0 0;
  height: 48%;
}

.mhero--stages .mhero__inner {
  padding-block: 32px 40px;
}

.mhero--stages h1 {
  color: var(--text);
}

.mhero--stages .mhero__sub {
  color: var(--text-2);
}

/* ------------------------------------------------------------------ prose */
/* Running paragraphs on the About page. Same measure and colour as every other
   body paragraph on the site (.section__head p); the only thing this adds is
   the spacing between one paragraph and the next. */
.prose {
  display: flex;
  flex-direction: column;
  gap: 16px;
  max-width: 680px;
}

.prose p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--text-2);
  text-wrap: pretty;
}

.prose b {
  font-weight: 700;
  color: var(--text);
}

/* ----------------------------------------------------- light-picture hero */
/* For a hero picture that carries its own clear area for the words: pale, with
   the subject to one side. The dark scrim and white type the photographic
   heroes need would bury such a picture, so this variant inverts both -- the
   words sit in the clear area, in the page's own ink. */
.mhero--light {
  background: var(--offwhite);
  align-items: center;
}

.mhero--light h1 {
  color: var(--text);
}

.mhero--light .mhero__sub {
  color: var(--text-2);
}

/* The scrim inverts with the picture: a soft white wash from the clear side,
   so the type keeps a calm ground where the photograph gets busy. `to right`
   is deliberately physical -- the clear area is on the picture's left in both
   languages, because a photograph does not turn around when the page does. */
.mhero--light .hero__scrim {
  background: linear-gradient(to right, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0) 62%);
}

/* ...and for the same reason the words are pinned to the picture's left half,
   not to the page's start edge. In RTL that is flex-end. */
.mhero--light .mhero__inner {
  align-items: flex-start;
}

[dir="rtl"] .mhero--light .mhero__inner {
  align-items: flex-end;
}

.mhero--light h1,
.mhero--light .mhero__sub {
  max-width: 46%;
}

/* On a phone the hero box is taller than it is wide, so object-fit: cover
   crops most of the clear area away. Bias the crop back towards it, let the
   words use the full measure, and carry the wash across the whole width. */
@media (max-width: 599px) {
  .mhero--light .mfig img {
    object-position: 22% center;
  }

  .mhero--light h1,
  .mhero--light .mhero__sub {
    max-width: none;
  }

  .mhero--light .hero__scrim {
    background: linear-gradient(to right, rgb(255 255 255 / 0.82), rgb(255 255 255 / 0.58));
  }
}

/* ------------------------------------------------- centred-subject hero */
/* For a hero picture whose subject holds the middle and whose clear areas are
   the two edges -- the About photograph: the company sign on the wall at the
   left, a person in the centre, the production line behind glass at the right.
   Neither the full-width bottom scrim nor a start-edge text block works here;
   both land on the face.

   Everything below is physical, not logical, for the reason written at
   .mfig--band: the photograph does not turn around when the page does, so the
   words stay on the picture's right in both languages and the scrim stays in
   the picture's bottom-right corner. In RTL the words still set right-aligned
   inside their own block -- that is the page direction doing its job, and it
   needs no override. */

/* The band takes the picture's own ratio instead of a fixed height, so there
   is no horizontal crop at all and the subject stays exactly where it was
   measured: sign ends at 30% of the width, face at 47%, the ghutra's last
   edge at 57%. Past 1573px the cap takes over and the crop becomes vertical,
   off the bottom -- which costs only the thobe and the machine bases, the part
   of the picture the words and the scrim are sitting on anyway. */
.mhero--portrait {
  min-height: min(39.4vw, 620px);
}

/* Viewport-relative, not container-relative. The container is capped at
   1280px while the picture keeps growing with the viewport, so a block pinned
   to the container's edge walks left across the subject on a wide screen --
   measured, it reaches the shoulder at 1920px. A percentage of the viewport
   tracks the picture instead, and 38% + 3vw of padding keeps the block's inner
   edge at 59% of the width: two clear points past the ghutra at 57%. */
.mhero--portrait .mhero__inner {
  max-width: none;
  padding-inline: clamp(24px, 3vw, 56px);
  align-items: flex-end;
}

[dir="rtl"] .mhero--portrait .mhero__inner {
  align-items: flex-start;
}

.mhero--portrait h1,
.mhero--portrait .mhero__sub {
  max-width: 38%;
}

/* The scrim is local: an ellipse anchored in the bottom-right corner, narrow
   enough horizontally that it dies before the face and long before the sign.
   Same charcoal as the standard scrim, only the shape differs. The opacity
   over the words is set by the brightest thing under them -- the daylight in
   the window is about 245, and white type needs the composite at or below 119
   to clear AA, which puts the floor at 0.59. It holds ~0.73 there. */
.mhero--portrait .hero__scrim {
  background: radial-gradient(46% 160% at 100% 100%,
                              rgb(31 29 25 / 0.84) 0%,
                              rgb(31 29 25 / 0.82) 75%,
                              rgb(31 29 25 / 0.72) 100%,
                              rgb(31 29 25 / 0) 128%);
}

/* Below the tablet breakpoint the clear areas are too narrow to hold a block
   of text at any size, so the overlay is abandoned rather than shrunk: the
   picture runs full width at its own ratio -- nothing cropped, sign and face
   both whole -- and the words move below it onto the page's own ground, in the
   page's own ink. Nothing sits on top of the person on a phone. */
@media (max-width: 767px) {
  .mhero--portrait {
    display: block;
    min-height: 0;
    background: var(--offwhite);
  }

  .mhero--portrait .mhero__media {
    position: static;
  }

  /* The picture's exact ratio, so object-fit: cover has no slack to crop. */
  .mhero--portrait .mfig {
    aspect-ratio: 1241 / 489;
    height: auto;
  }

  .mhero--portrait .hero__scrim {
    display: none;
  }

  .mhero--portrait .mhero__inner {
    max-width: var(--container);
    padding-inline: 16px;
    padding-block: 24px 32px;
    align-items: flex-start;
  }

  .mhero--portrait h1 {
    color: var(--text);
  }

  .mhero--portrait .mhero__sub {
    color: var(--text-2);
  }

  .mhero--portrait h1,
  .mhero--portrait .mhero__sub {
    max-width: none;
  }
}

/* A pill is right for a two-word eyebrow; the ATRUM agency sentence is long
   enough to wrap, and pill ends on a four-line box look like a mistake. */
.eyebrow--block {
  border-radius: var(--radius);
  max-width: 640px;
  line-height: 1.6;
  text-wrap: pretty;
}

/* The engineering page numbers its five steps instead of giving each an icon,
   reusing the outcome card rather than adding a second card component. */
.outcome__icon b {
  font-size: 18px;
  font-weight: 700;
  color: var(--green);
}

/* A captioned figure. .mfig owns the aspect ratio that reserves the picture's
   space, so the caption has to sit outside that box rather than inside it. */
.mfig-wrap {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mfig-wrap figcaption {
  font-size: 15px;
  line-height: 1.8;
  color: var(--text-2);
  text-wrap: pretty;
}

/* A full-width band sits outside .container so the picture can run edge to
   edge -- detail near the frame edges would otherwise lose the 16px gutter on
   both sides. The caption still needs the container's measure and gutter. */
.section > .mfig-wrap > figcaption {
  max-width: var(--container);
  width: 100%;
  margin-inline: auto;
  padding-inline: 16px;
}

/* -------------------------------------------- homepage idea-to-machine band */
/* One composite whose three stages blend into each other. .mfig--wide is 16:9
   and object-fit: cover, so it would crop a third of the width away and cut
   the sketch off the frame -- the band takes the ratio the file has. */
.mfig--band {
  aspect-ratio: 8 / 3;
}

/* The banner is a photograph of a progression: pencil sketch on the left, 3D
   model in the middle, finished machine on the right. It reads that way in
   Arabic too. Mirroring it reads result -> idea, which is the opposite of the
   claim the section makes, so this says so outright rather than relying on
   nothing else ever adding an RTL transform. */
.mfig--band img {
  transform: none;
}

/* The same scrim the machine hero images use, scoped to the bottom band: over
   a picture this wide a full-height fade leaves barely any tint where the
   labels sit, and they have to stay legible over pale paper AND bright
   factory floor. */
.mfig--band .hero__scrim {
  inset: auto 0 0 0;
  height: 48%;
}

/* Three labels, each over its own third of the picture, sitting low in that
   third. direction: ltr is load-bearing, not cosmetic: the cells are pinned to
   the picture's thirds, and in RTL the grid would otherwise put "الفكرة" in
   the right-hand cell, over the finished machine. */
.idea-band__stages {
  position: absolute;
  inset-inline: 0;
  top: 82%;
  transform: translateY(-50%);
  direction: ltr;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  padding-inline: 8px;
}

.idea-band__stages span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 600;
  font-size: clamp(13px, 2vw, 18px);
  line-height: 1.4;
}

/* A short rule under each label, so the three read as markers on a timeline
   rather than three words floating over a photograph. */
.idea-band__stages span::after {
  content: "";
  width: 24px;
  height: 1px;
  background: rgb(255 255 255 / 0.6);
}

/* The homepage engineering band. The picture reserves a cream area down its
   left side; the section's words live in it, in the page's own ink -- no scrim,
   because there is nothing there to darken. `left` is physical on purpose:
   that is where the clear area is, in Arabic as in English. The Arabic text
   still sets right-aligned inside its own column, which the page direction
   already handles. */
.idea-band {
  position: relative;
  margin-block: 32px;
}

.idea-band__copy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
  padding: 24px 16px 0;
}

[dir="rtl"] .idea-band__copy {
  align-items: flex-end;
}

.idea-band__copy h2 {
  font-size: clamp(24px, 3vw, 34px);
  font-weight: 700;
  line-height: 1.4;
  text-wrap: pretty;
}

.idea-band__copy p {
  font-size: 16px;
  line-height: 1.8;
  color: var(--text-2);
  text-wrap: pretty;
}

/* Overlaid only where the clear area can actually hold the words. Measured,
   not guessed: the copy needs 521px against 432px of picture at 768 and still
   overflows by 12px at 820; it first fits around 860 and has 160px of headroom
   at 1024. 1024 is the switch -- the site's existing desktop breakpoint, and
   enough slack that a longer line will not push the text off the picture.
   Below it the copy drops out and sits underneath at full width, where it can
   never land on the machine or the drawing.

   Horizontally there is nothing to test: the column is 38% of the picture and
   the drawing starts near 48%, and both are ratios, so the clearance holds at
   every width. */
@media (min-width: 1024px) {
  .idea-band__copy {
    position: absolute;
    inset-block: 0;
    left: 0;
    width: 38%;
    justify-content: center;
    padding: 0 40px;
  }
}