/* ============================================================
   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%);
}

.hero__in { position: relative; padding-bottom: var(--s-7); }
.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);
  max-width: 15ch;
}
.hero__h1 .cut-in { display: block; }
:root[data-lang="ar"] .hero__h1 { max-width: 14ch; }
.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); }

.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); }

@media (min-width: 640px) { .card--cta { grid-column: span 2; } }
.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; }
@media (max-width: 639px) { .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); }

/* ============================================================
   FOOTER — graphite, anchoring the page
   ============================================================ */

.foot { padding-block: var(--s-9) var(--s-6); }
.foot__top {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.6fr);
  gap: var(--s-8);
  padding-bottom: var(--s-7);
  border-bottom: 1px solid var(--line);
}
.foot__mark { margin-bottom: var(--s-5); }
.foot__tag { margin-bottom: var(--s-3); }
.foot__est { color: var(--fg-3); }
.foot__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); gap: var(--s-6); }
.foot__h { margin-bottom: var(--s-4); color: var(--accent); }
.foot__row { display: flex; align-items: flex-start; gap: var(--s-3); margin-bottom: var(--s-4); color: var(--fg-2); font-size: var(--fs-sm); }
.foot__row svg { width: 17px; height: 17px; flex: none; color: var(--fg-3); margin-top: 3px; }
.foot__row a:hover { color: var(--accent); }
.foot__links { display: grid; gap: var(--s-2); font-size: var(--fs-sm); }
.foot__links a { color: var(--fg-2); }
.foot__links a:hover { color: var(--fg); }
.foot__bot { padding-top: var(--s-5); display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-4); }
.foot__legal { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) .6em; }

/* Ad Holic credit — plain text in the copyright's own .spec type, no
   mark. Inherits everything from .spec so the two read as one line.
   The dash is a ::before on this element rather than a node between
   the two <p>s: as the first inline child it lands on whichever side
   faces the copyright, so it stays between them in LTR and in RTL,
   where flex reverses the order. */
.foot__by { display: inline-flex; align-items: baseline; gap: .6em; }
.foot__by::before { content: "-"; }
.adholic {
  color: inherit;
  unicode-bidi: isolate;
  transition: color var(--dur-2) var(--ease-cut);
}
.adholic:hover, .adholic:focus-visible { color: var(--fg); }
.social { display: flex; gap: var(--s-2); }
.social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--fg-3);
  transition: color var(--dur-2), border-color var(--dur-2);
}
.social a:hover { color: var(--fg); border-color: var(--accent-bright); }
.social svg { width: 19px; height: 19px; }
@media (max-width: 900px) { .foot__top { grid-template-columns: 1fr; } }

/* ============================================================
   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; }

.logos {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--r-2);
  overflow: hidden;
}
@media (max-width: 760px) { .logos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.logos__cell {
  background: var(--surface);
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  padding: var(--s-4);
  text-align: center;
  transition: background var(--dur-2) var(--ease-cut);
}
.logos__cell:hover { background: var(--surface-2); }

/* Sixteen logos with wildly different proportions have to look like
   one set. Each carries its own --lh, sized by aspect ratio, so a long
   wordmark and a round emblem read at the same optical weight rather
   than the same pixel height. Grey at rest keeps sixteen competing
   palettes from shouting over the page; colour arrives on hover. */
.logos__cell img {
  max-width: 82%;
  max-height: var(--lh, 46px);
  width: auto;
  height: auto;
  object-fit: contain;
  /* Grayscale alone is not enough: half these marks are gold, light
     blue or thin outlines, and desaturating them just leaves them
     pale. Pulling brightness down first lands every logo in the same
     mid-grey band regardless of its original colour, while keeping
     internal detail that a flat silhouette would destroy. */
  filter: var(--f, grayscale(1) brightness(.62) contrast(1.3));
  opacity: .78;
  transition: filter var(--dur-3) var(--ease-cut), opacity var(--dur-3) var(--ease-cut);
}
.logos__cell:hover img { filter: none; opacity: 1; }
@media (max-width: 760px) { .logos__cell img { max-height: calc(var(--lh, 46px) * .82); } }

.clients__tally {
  margin-top: var(--s-6);
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: var(--s-3);
  text-align: center;
}
.logos__n {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2rem, 1.4rem + 2.2vw, 3.25rem);
  line-height: 1;
  letter-spacing: var(--tr-display);
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.clients__tallyl { color: var(--fg-2); max-width: 46ch; }

.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. */