/* ============================================================
   SAKKARY MACHINERY — sections · MIXED BANDS
   Every rule below reads semantic tokens, so each section renders
   correctly on white, on tint and on graphite without variants.
   ============================================================ */

.dot { color: var(--fg-3); margin-inline: .35em; }

.sec-head {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-5) var(--s-8);
  align-items: end;
  margin-bottom: var(--s-7);
}
.sec-head--center { grid-template-columns: 1fr; justify-items: center; text-align: center; }
@media (max-width: 900px) { .sec-head { grid-template-columns: 1fr; align-items: start; } }

/* ============================================================
   HERO — a graphite band, full bleed
   ============================================================ */

.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding-top: calc(var(--header-h) + var(--s-8));
  overflow: hidden;
  isolation: isolate;
}
/* The video used to sit at z-index:-2 inside the hero's `isolation:
   isolate` stacking context. A negative-index child has to paint behind
   its parent's background, which keeps the browser from giving the
   video its own compositor layer — so every single video frame
   repainted the scrim, the masked grid and the headline on top of it.
   Ordinary positive layering plus an explicit promotion hint puts the
   video on the GPU and leaves everything above it static. */
.hero__media { position: absolute; inset: 0; z-index: 0; background: #08090B; }
.hero__video, .hero__media > img {
  width: 100%; height: 100%; object-fit: cover;
  transform: translateZ(0);
  will-change: transform;
  backface-visibility: hidden;
}
.hero__scrim { z-index: 1; }
.hero__grid  { z-index: 2; }
.hero__in    { z-index: 3; }
.hero__rail  { z-index: 3; }
.hero__scrim {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top,   #0B0C0F 2%, rgba(11,12,15,.82) 38%, rgba(11,12,15,.42) 70%, rgba(11,12,15,.6) 100%),
    linear-gradient(to right, rgba(8,9,11,.92) 0%, rgba(8,9,11,.6) 48%, transparent 82%);
}
:root[dir="rtl"] .hero__scrim {
  background:
    linear-gradient(to top,  #0B0C0F 2%, rgba(11,12,15,.82) 38%, rgba(11,12,15,.42) 70%, rgba(11,12,15,.6) 100%),
    linear-gradient(to left, rgba(8,9,11,.92) 0%, rgba(8,9,11,.6) 48%, transparent 82%);
}
.hero__grid {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: 88px 88px;
  mask-image: radial-gradient(120% 90% at 50% 100%, #000 20%, transparent 78%);
}

/* margin-block:auto, and it is load-bearing. .hero is min-height:100svh
   but its content is only ~478px tall, so on a 1080p monitor roughly
   400px is left over and it has to sit somewhere. Bottom-anchored put
   all of it above the headline; a bottom-only auto margin put all of it
   under the buttons. Auto margins on both sides split it instead —
   250px above / 216px below at 1080p, 100/66 on a laptop — so there is
   no single hole. The rail stays pinned to the bottom because it is the
   last flex child, outside this element. */
.hero__in { position: relative; padding-bottom: var(--s-7); margin-block: auto; }
.hero__eyebrow::before { display: none; }
.hero__eyebrow { margin-bottom: var(--s-5); }

.hero__h1 {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--fs-hero);
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  text-transform: uppercase;
  margin-bottom: var(--s-5);
  /* 22ch, measured, not guessed: "solutions for your factory" is
     21.x characters wide once the uppercase transform and the
     display tracking are applied, so 15ch broke a two-line
     headline into four. `ch` scales with font-size, so this is not
     something a smaller type size could have fixed on its own. */
  max-width: 22ch;
}
.hero__h1 .cut-in { display: block; }
/* Arabic was one character short of holding its first line. */
:root[data-lang="ar"] .hero__h1 { max-width: 15ch; }
.hero__lede { color: var(--fg-2); font-size: var(--fs-lg); max-width: 56ch; margin-bottom: var(--s-6); }
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-3); }

/* The search sits under the buttons, not beside them: it is a second
   way in, not a competing call to action — and it ends exactly where
   "See the machines" ends.

   That alignment cannot be a fixed width, because the button says
   "See the machines" in one language and "اعرض الماكينات" in the
   other. So the two rows share a shrink-to-fit grid: the grid takes
   the width of its widest child, the search stretches to fill it,
   and .hero__search .sform__i below stops the input from being that
   widest child. What is left defining the width is the button row,
   in whichever language it is rendered.

   fit-content caps at the space available, so on a narrow screen the
   buttons still wrap as they always did. */
.hero__actions { display: grid; gap: var(--s-5); width: fit-content; max-width: 100%; }

/* An <input> reports its size attribute as intrinsic width (~20
   characters). Zeroed here so the grid above measures the buttons,
   not the field; flex-grow then gives the field everything left over
   once the icon button has taken its 50px. */
.hero__search .sform__i { width: 0; flex: 1 1 auto; min-width: 0; }

.hero__rail { position: relative; border-top: 1px solid var(--line); background: linear-gradient(to top, rgba(11,12,15,.9), transparent); }
.hero__rail-in { display: flex; align-items: center; gap: var(--s-6); padding-block: var(--s-4); }
.hero__scroll { display: flex; align-items: center; gap: var(--s-3); flex: none; color: var(--fg-3); transition: color var(--dur-2); }
.hero__scroll:hover { color: var(--fg); }
.hero__scroll-line { display: block; width: 46px; height: 1px; background: var(--line); position: relative; overflow: hidden; }
.hero__scroll-line i {
  position: absolute; inset-block: 0; inset-inline-start: 0; width: 40%;
  background: var(--accent-bright);
  animation: rail-run 2.4s var(--ease-mech) infinite;
}
@keyframes rail-run { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
:root[dir="rtl"] .hero__scroll-line i { animation-name: rail-run-rtl; }
@keyframes rail-run-rtl { 0% { transform: translateX(100%); } 100% { transform: translateX(-250%); } }

.hero__facts { display: flex; gap: clamp(var(--s-5), 4vw, var(--s-9)); margin: 0; margin-inline-start: auto; }
.hero__facts div { display: flex; flex-direction: column; gap: 2px; }
.hero__facts dt { order: 2; }
.hero__facts dd {
  order: 1; margin: 0;
  font-family: var(--font-display);
  font-size: var(--fs-xl); font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.hero__facts .u { color: var(--accent-bright); }
.hero__facts em {
  font-style: normal; font-family: var(--font-body);
  font-size: var(--fs-sm); font-weight: 400; color: var(--fg-2);
  margin-inline-start: 4px;
}
@media (max-width: 1000px) { .hero__facts { display: none; } .hero__rail-in { justify-content: center; } }
@media (max-width: 620px) {
  .hero { min-height: 92svh; }
  .hero__lede { font-size: var(--fs-base); }
  .hero__cta .btn { flex: 1 1 100%; }
}

/* ============================================================
   SINCE 1958 — white
   ============================================================ */

.since__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: var(--s-8); align-items: center; }
.since__body { margin-top: var(--s-4); display: grid; gap: var(--s-4); }
.since__body p { color: var(--fg-2); max-width: 56ch; }
.since__fig { margin: 0; position: relative; }
.since__fig img {
  width: 100%; aspect-ratio: 3 / 2; object-fit: cover;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.since__fig figcaption { margin-top: var(--s-3); display: flex; align-items: center; gap: var(--s-2); }
.since__fig figcaption::before { content: ""; width: 18px; height: 2px; background: var(--accent-bright); flex: none; }

.stats {
  margin: var(--s-8) 0 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.stat {
  background: var(--surface-2);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  border-inline-start: 1px solid var(--line);
  position: relative;
}
.stat:first-child { border-inline-start: 0; }
.stat::after {
  content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0;
  width: 28px; height: 3px; background: var(--accent-bright);
}
:root.js-anim .stat::after { opacity: 0; transition: opacity var(--dur-3) var(--ease-cut); }
:root.js-anim .stat.is-in::after { opacity: 1; }
.stat__n {
  margin: 0;
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-3xl); line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat__l { order: 2; }
@media (max-width: 900px) {
  .since__grid { grid-template-columns: 1fr; }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat:nth-child(3) { border-inline-start: 0; }
  .stat:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 460px) {
  .stats { grid-template-columns: 1fr; }
  .stat { border-inline-start: 0; }
  .stat + .stat { border-top: 1px solid var(--line); }
}

/* ============================================================
   MACHINES — the graphite band. The photography is lit for this.
   ============================================================ */

.cards { display: grid; grid-template-columns: 1fr; gap: var(--s-4); }
@media (min-width: 640px)  { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1040px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card { min-width: 0; }

.card__a {
  display: flex; flex-direction: column; height: 100%;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  transition: border-color var(--dur-3) var(--ease-cut),
              transform var(--dur-3) var(--ease-cut),
              box-shadow var(--dur-3) var(--ease-cut),
              background var(--dur-3) var(--ease-cut);
}
.card__a:hover {
  border-color: var(--accent-bright);
  background: var(--surface-2);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.card__media { display: block; position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: #08090B; }
.card__media img {
  width: 100%; height: 100%; object-fit: cover;
  filter: saturate(.88) contrast(1.05);
  transition: transform 900ms var(--ease-cut), filter var(--dur-3);
}
.card__a:hover .card__media img { transform: scale(1.045); filter: saturate(1) contrast(1.05); }
.card__media::after {
  content: ""; position: absolute; inset-inline: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--red-light), transparent);
  transform: scaleX(0); transform-origin: inline-start;
  transition: transform 600ms var(--ease-cut);
}
.card__a:hover .card__media::after { transform: scaleX(1); }

.card__body { display: flex; flex-direction: column; gap: var(--s-2); padding: var(--s-5); flex: 1; }
.card__n { color: var(--cool); }
.card__t {
  font-family: var(--font-display); font-weight: 700;
  font-size: var(--fs-xl); line-height: 1.1;
  letter-spacing: var(--tr-display); text-transform: uppercase;
}
.card__d { color: var(--fg-2); font-size: var(--fs-sm); }
.card__go {
  margin-top: auto; padding-top: var(--s-4);
  display: flex; align-items: center; gap: var(--s-2);
  color: var(--fg-3);
  transition: color var(--dur-2) var(--ease-cut);
}
.card__go .btn__ico { transition: transform var(--dur-2) var(--ease-cut); }
.card__a:hover .card__go { color: var(--accent); }
.card__a:hover .card__go .btn__ico { transform: translateX(4px); }
:root[dir="rtl"] .card__a:hover .card__go .btn__ico { transform: scaleX(-1) translateX(4px); }

/* Nine machine cards and this one. At three columns the cards fill
   three exact rows and the call to action takes the fourth on its own;
   at two columns it occupies a single cell, so the ten items make five
   exact rows. Neither leaves an empty cell in the grid — which is what
   a 2-column span did once the tenth machine card was removed. */
@media (min-width: 1040px) { .card--cta { grid-column: span 3; } }
.card--cta .card__a {
  flex-direction: row; align-items: center; gap: var(--s-5);
  padding: var(--s-6);
  border-style: dashed;
  background: var(--bg-alt);
}
.card--cta .card__a:hover { border-style: solid; }
.card--cta .card__body { padding: 0; gap: var(--s-2); }
.card--cta .card__go { padding-top: var(--s-3); }
.card--cta .card__t { font-size: var(--fs-2xl); }
.card--cta .card__mark { width: 44px; height: 61px; flex: none; }
/* The mark sits beside the text only where there is room for both.
   Below the three-column breakpoint this card is one cell wide, and
   side by side would leave the text a sliver. */
@media (max-width: 1039px) { .card--cta .card__a { flex-direction: column; align-items: flex-start; } }

/* ============================================================
   BRANDS — white
   ============================================================ */

.plates {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.plate {
  background: var(--surface);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-2);
  border-inline-start: 1px solid var(--line);
  transition: background var(--dur-3) var(--ease-cut);
}
.plate:first-child { border-inline-start: 0; }
.plate:hover { background: var(--surface-2); }
.plate__n { font-family: var(--font-display); font-size: var(--fs-lg); font-weight: 700; text-transform: uppercase; }
.plate__o { color: var(--cool); }

.origins { margin-top: var(--s-6); display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-4); }
.origins__l { flex: none; }
.origins__list { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.origins__list li {
  padding: 6px var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  color: var(--fg-2);
}

/* ============================================================
   TOOLING — tint band
   ============================================================ */

.tooling__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); align-items: center; }
.tooling__fig { margin: 0; }
.tooling__fig img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
}
.ticks { display: grid; gap: var(--s-3); margin-block: var(--s-5) var(--s-6); }
.ticks li { display: flex; align-items: flex-start; gap: var(--s-3); color: var(--fg-2); }
.ticks svg { width: 18px; height: 18px; flex: none; color: var(--accent); margin-top: 3px; }
@media (max-width: 900px) { .tooling__grid { grid-template-columns: 1fr; } .tooling__fig { order: 2; } }

/* ============================================================
   SERVICE — graphite band with the photograph behind it
   ============================================================ */

.service { position: relative; isolation: isolate; overflow: hidden; }
.service__bg { position: absolute; inset: 0; z-index: -1; }
.service__bg img { width: 100%; height: 100%; object-fit: cover; opacity: .3; filter: grayscale(.35); }
.service__bg::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, #0B0C0F 4%, rgba(11,12,15,.86) 46%, rgba(11,12,15,.72) 100%);
}
.service__h { margin-bottom: var(--s-7); }
/* Six services divide evenly into three columns; auto-fit gave four
   across and left a hole under the last two. */
.svc { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-4); margin-bottom: var(--s-6); }
@media (max-width: 900px) { .svc { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .svc { grid-template-columns: 1fr; } }
.svc__i {
  padding: var(--s-5);
  background: rgba(23, 26, 33, .72);
  backdrop-filter: blur(8px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent-bright);
  border-radius: var(--r-2);
}
.svc__ico { width: 26px; height: 26px; color: var(--accent); margin-bottom: var(--s-4); }
.svc__t { font-family: var(--font-display); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: var(--tr-display); margin-bottom: var(--s-2); }
.svc__d { color: var(--fg-2); font-size: var(--fs-sm); }

/* ============================================================
   PROCESS — white
   ============================================================ */

.steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
.step {
  background: var(--surface);
  padding: var(--s-6) var(--s-5);
  display: flex; flex-direction: column; gap: var(--s-3);
  border-inline-start: 1px solid var(--line);
}
.step:first-child { border-inline-start: 0; }
.step__n {
  font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono); color: var(--accent);
  padding-bottom: var(--s-3); border-bottom: 1px solid var(--line);
}
.step__t { font-family: var(--font-display); font-size: var(--fs-lg); text-transform: uppercase; letter-spacing: var(--tr-display); }
.step__d { color: var(--fg-2); font-size: var(--fs-sm); }

/* ============================================================
   PROOF — tint band
   ============================================================ */

.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: var(--s-4); }
.quote {
  padding: var(--s-6) var(--s-5);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  display: flex; flex-direction: column; gap: var(--s-4);
  position: relative;
  box-shadow: var(--shadow-1);
}
.quote::before {
  content: ""; position: absolute;
  inset-block-start: -1px; inset-inline-start: var(--s-5);
  width: 34px; height: 3px;
  background: linear-gradient(90deg, var(--accent-bright), var(--blue));
}
.quote blockquote { margin: 0; }
.quote p { font-size: var(--fs-lg); line-height: 1.5; }
.quote__by { margin-top: auto; color: var(--fg-3); }

/* ============================================================
   CLIENTS — a logo wall on white, because that is the ground every
   brand's guidelines assume. Hairlines come from a 1px grid gap over
   a line-coloured backing, so the table stays perfect at any column
   count without nth-child bookkeeping.
   ============================================================ */

.clients__lede { margin-inline: auto; }

.clients__tallyl { color: var(--fg-2); max-width: 46ch; }
/* The scale line, since the animated counter was retired. Larger and
   centred, with the lead phrase carrying the display face's weight. */
.clients__tallyl--big { max-width: 40ch; font-size: var(--fs-lg); color: var(--fg); }
.clients__tallyl--big b { font-family: var(--font-display); font-weight: 700; letter-spacing: var(--tr-display); }

.clients__note { margin-top: var(--s-4); text-align: center; color: var(--fg-3); }

/* ============================================================
   TRAINING
   ============================================================ */

.trn {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
  margin-bottom: var(--s-6);
}
.trn__i {
  background: var(--surface);
  padding: var(--s-6) var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  border-inline-start: 1px solid var(--line);
}
.trn__i:first-child { border-inline-start: 0; }
.trn__k {
  color: var(--accent);
  padding-bottom: var(--s-3);
  border-bottom: 1px solid var(--line);
}
.trn__t {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  text-transform: uppercase;
  letter-spacing: var(--tr-display);
}
.trn__d { color: var(--fg-2); font-size: var(--fs-sm); }

/* ---------- Floating WhatsApp ----------
   Kept in WhatsApp's own green because that is what people recognise,
   but the darker brand green is used for the fill so the white glyph
   clears 4.1:1 — the signature #25D366 only manages 2:1 with white. */