/* =========================================================
   Modern Power Company — themodernpower.com
   One stylesheet for both the English and the Arabic page.

   TO RE-SKIN THE SITE: change the brand values in :root below.
   Spacing uses "inline-start / inline-end" so the same rules
   work left-to-right (English) and right-to-left (Arabic).
   ========================================================= */

:root {
  /* Brand colors */
  --red: #e22126;        /* main brand red: buttons, big accents */
  --red-deep: #c01a1f;   /* small red text on light backgrounds, button hover */
  --red-soft: #ff6b6f;   /* small red text on dark backgrounds, focus rings */
  --ink: #0d0d0f;        /* darkest background */
  --coal: #17171b;       /* raised dark surface */
  --steel: #2a2a31;      /* borders on dark surfaces */
  --paper: #f6f4f0;      /* light section background */
  --card: #ffffff;       /* cards on light sections */
  --line: #e2ded7;       /* borders on light surfaces */
  --text: #17171a;       /* text on light */
  --muted: #5b5b64;      /* secondary text on light */
  --on-dark: #f4f4f6;    /* text on dark */
  --on-dark-muted: #b8b8bf; /* secondary text on dark */
  --field-line: #6f6f7a; /* form field borders */
  --error: #ff8a8d;

  /* Fonts */
  --font-display: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
  --font-body: "Archivo", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;

  /* Layout */
  --wrap: 1160px;
  --gutter: clamp(1.125rem, 4vw, 2rem);
  --radius: 14px;
  --header-h: 68px;
}

html[lang="ar"] {
  --font-display: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
  --font-body: "Tajawal", "Segoe UI", Tahoma, system-ui, sans-serif;
}

/* ---------- Base ---------- */

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

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--text);
  background: var(--ink);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

html[lang="ar"] body { line-height: 1.85; }

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; }

h1, h2, h3 { font-family: var(--font-display); }

/* Headings break into lines of similar length instead of leaving one word alone */
h1, h2, h3 { text-wrap: balance; }

h2 {
  font-size: clamp(2rem, 5vw, 3.375rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.05;
  letter-spacing: -0.015em;
  max-width: 24ch;
}

html[lang="ar"] h2 { line-height: 1.4; letter-spacing: 0; max-width: 26ch; }
/* The Arabic heading size is set with :where(), so it weighs no more than the plain h2 rule
   and component rules such as .footer-title and .split h2 still win */
:where(html[lang="ar"]) h2 { font-size: clamp(2rem, 4.6vw, 3.1rem); }
/* Arabic body text one step heavier, so it carries the same weight as the English page */
html[lang="ar"] body { font-weight: 500; }

:focus-visible {
  outline: 3px solid var(--red-soft);
  outline-offset: 3px;
  border-radius: 6px;
}

.section--paper :focus-visible { outline-color: var(--red-deep); }

.skip {
  position: absolute;
  inset-inline-start: 1rem;
  top: -100px;
  z-index: 100;
  padding: 0.6rem 1rem;
  border-radius: 8px;
  background: #fff;
  color: #000;
  font-weight: 700;
}

.skip:focus { top: 1rem; }

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

/* ---------- Layout helpers ---------- */

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.section { padding-block: clamp(4rem, 9vw, 7rem); }
.section--dark { background: var(--ink); color: var(--on-dark); }
.section--coal { background: var(--coal); color: var(--on-dark); }
.section--paper { background: var(--paper); color: var(--text); }

.section-head { max-width: 760px; margin-bottom: clamp(2.25rem, 4.5vw, 3.5rem); }
.section-head p { margin-top: 1.1rem; }

.split { display: grid; gap: clamp(2rem, 5vw, 4rem); }

@media (min-width: 900px) {
  .split { grid-template-columns: 1fr 1fr; align-items: start; }
  .split--brand { grid-template-columns: 0.85fr 1.15fr; align-items: center; }
  /* About: the diagram sits level with the middle of the text beside it */
  .split--center { align-items: center; }
  /* Headings in a half-width column keep the smaller size, so they do not break into four lines */
  .split h2, .locations-head h2 { font-size: clamp(1.9rem, 4.2vw, 3rem); }
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}

/* A small red slash at the angle of the cut in the logo (the same lean in Arabic: the logo is not mirrored) */
.eyebrow::before {
  content: "";
  width: 8px;
  height: 17px;
  background: var(--red);
  transform: skewX(-33deg);
}

.section--dark .eyebrow,
.section--coal .eyebrow,
.hero .eyebrow { color: var(--red-soft); }

html[lang="ar"] .eyebrow { letter-spacing: 0; font-size: 1rem; }

.lead { font-size: clamp(1.1rem, 1.6vw, 1.3rem); }
.section--paper .lead, .section--paper .body-copy { color: var(--muted); }
.section--dark .body-copy, .section--coal .body-copy { color: var(--on-dark-muted); }
.body-copy { margin-top: 1.1rem; max-width: 58ch; }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 48px;
  padding: 0.7rem 1.45rem;
  border: 2px solid transparent;
  border-radius: 999px;
  font: inherit;
  font-weight: 700;
  font-size: 1rem;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn svg { width: 1.15em; height: 1.15em; flex: none; transition: transform 0.18s ease; }
.btn:hover svg { transform: translateX(3px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--red); color: #fff; }
.btn-primary:hover { background: var(--red-deep); }

.btn-ghost { border-color: rgba(255, 255, 255, 0.45); background: transparent; color: var(--on-dark); }
.btn-ghost:hover { border-color: #fff; background: #fff; color: var(--ink); }

.btn-sm { min-height: 40px; padding: 0.4rem 1.05rem; font-size: 0.9375rem; }

/* Arrows point the other way in right-to-left pages */
[dir="rtl"] .flip { transform: scaleX(-1); }
[dir="rtl"] .btn:hover .flip { transform: scaleX(-1) translateX(3px); }

/* ---------- Header ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(13, 13, 15, 0.9);
  -webkit-backdrop-filter: saturate(140%) blur(12px);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  color: var(--on-dark);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: inherit;
  text-decoration: none;
}

.brand-mark { width: auto; height: 34px; flex: none; }

.brand-name {
  display: flex;
  flex-direction: column;
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 800;
  font-stretch: 118%;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.brand-name small {
  margin-top: 0.32rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.34em;
  color: var(--on-dark-muted);
}

html[lang="ar"] .brand-name { font-size: 1.2rem; letter-spacing: 0; line-height: 1.15; }
html[lang="ar"] .brand-name small { margin-top: 0.1rem; font-size: 0.6rem; letter-spacing: 0.2em; }

.nav { display: flex; gap: 1.6rem; }

.nav a {
  padding: 0.5rem 0;
  color: var(--on-dark-muted);
  font-size: 0.9375rem;
  font-weight: 600;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav a:hover { color: #fff; }
html[lang="ar"] .nav a { font-size: 1.02rem; }

/* The menu marks the section you are reading */
.nav a[aria-current="true"] { color: #fff; }

/* On wide screens the red button already links to Contact */
@media (min-width: 981px) {
  .nav .nav-contact { display: none; }
  .nav a { position: relative; }

  .nav a[aria-current="true"]::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0.1rem;
    height: 2px;
    background: var(--red);
  }
}

.header-actions { display: flex; align-items: center; gap: 0.75rem; }

.lang {
  padding: 0.35rem 0.8rem;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 999px;
  color: var(--on-dark);
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.5;
  text-decoration: none;
}

.lang:hover { border-color: #fff; }

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 12px;
  background: transparent;
  color: var(--on-dark);
  cursor: pointer;
}

.nav-toggle svg { width: 22px; height: 22px; }

@media (max-width: 980px) {
  .nav {
    position: absolute;
    inset-inline: 0;
    top: 100%;
    display: none;
    flex-direction: column;
    gap: 0;
    padding: 0.25rem var(--gutter) 1.25rem;
    background: var(--ink);
    border-bottom: 1px solid var(--steel);
    /* On a short screen (a phone held sideways) the menu scrolls instead of running off the bottom */
    max-height: calc(100vh - var(--header-h));
    max-height: calc(100dvh - var(--header-h));
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav.open { display: flex; }

  .nav a {
    padding: 0.95rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    color: var(--on-dark);
    font-size: 1.05rem;
  }

  .nav-toggle { display: inline-flex; }
  .header-cta { display: none; }
}

/* Phones: tighten the header so logo, language switch and menu button all fit */
@media (max-width: 480px) {
  .header-inner { gap: 0.5rem; }
  .brand { gap: 0.55rem; }
  .brand-mark { height: 28px; }
  .brand-name { font-size: 0.85rem; }
  .brand-name small { font-size: 0.55rem; }
  .header-actions { gap: 0.5rem; }
  .lang { padding: 0.3rem 0.65rem; font-size: 0.875rem; }
}

@media (max-width: 350px) {
  .brand { gap: 0.45rem; }
  .brand-mark { height: 24px; }
  .brand-name { font-size: 0.72rem; }
  .nav-toggle { width: 40px; height: 40px; }
}

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  padding-block: 0 clamp(3rem, 6vw, 4.5rem);
  background: var(--ink);
  color: var(--on-dark);
}

/* A soft red glow behind the photo, like light from the booth (wide screens only) */
.hero::before {
  content: "";
  position: absolute;
  inset-block-start: 6%;
  inset-inline-end: -8%;
  display: none;
  width: min(640px, 60vw);
  aspect-ratio: 1;
  background: radial-gradient(closest-side, rgba(226, 33, 38, 0.22), rgba(226, 33, 38, 0));
  pointer-events: none;
}

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 1.75rem;
  align-items: center;
}

@media (min-width: 980px) {
  .hero { padding-block-start: clamp(2.5rem, 5vw, 4.5rem); }
  .hero::before { display: block; }
  .hero-inner { grid-template-columns: minmax(0, 1fr) minmax(0, 0.82fr); gap: clamp(2.5rem, 5vw, 4rem); }
}

@media (min-width: 1200px) {
  .hero-inner { grid-template-columns: minmax(0, 1fr) 520px; }
}

.hero h1 {
  margin-bottom: 1.25rem;
  font-size: clamp(2.75rem, 7.6vw, 6.25rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 0.94;
  letter-spacing: -0.03em;
}

.hero h1 em { font-style: normal; color: var(--red); }

html[lang="ar"] .hero h1 {
  font-size: clamp(2.6rem, 6.2vw, 4.75rem);
  line-height: 1.25;
  letter-spacing: 0;
}

.lede {
  max-width: 46ch;
  margin-bottom: 2rem;
  font-size: clamp(1.0625rem, 1.35vw, 1.1875rem);
  color: var(--on-dark-muted);
}

.cta-row { display: flex; flex-wrap: wrap; gap: 0.8rem; }
.cta-row .btn { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }

@media (max-width: 599.98px) {
  .hero h1 { font-size: clamp(2.6rem, 13.5vw, 4rem); }
  html[lang="ar"] .hero h1 { font-size: clamp(2.2rem, 11.5vw, 3.4rem); }
  .lede { font-size: 1rem; }
  .cta-row .btn { flex: 1 1 auto; }
}

/* Hero photo: one sharp picture of the DeProtein booth at Jeddah Fit Expo.
   On wide screens it stands beside the headline, with one corner cut at the angle of the cut in the logo.
   On phones and tablets it runs edge to edge under the header. */
.hero-photo { position: relative; }
.hero-photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; background: var(--coal); }

@media (max-width: 979.98px) {
  .hero-photo { order: -1; margin-inline: calc(var(--gutter) * -1); }

  /* the photo fades into the page, and its caption sits on it as a small label */
  .hero-photo::after {
    content: "";
    position: absolute;
    inset-inline: 0;
    bottom: 0;
    height: 72px;
    background: linear-gradient(rgba(13, 13, 15, 0), var(--ink));
    pointer-events: none;
  }

  .hero-photo figcaption {
    position: absolute;
    z-index: 1;
    inset-inline-start: var(--gutter);
    bottom: 0.75rem;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: rgba(13, 13, 15, 0.82);
    color: var(--on-dark);
    font-size: 0.8125rem;
    font-weight: 600;
    line-height: 1.5;
  }
}

@media (min-width: 600px) and (max-width: 979.98px) {
  .hero-photo img { aspect-ratio: 2 / 1; object-position: 50% 30%; }
}

@media (min-width: 980px) {
  .hero-photo { justify-self: end; width: 100%; max-width: 520px; }

  .hero-photo img {
    aspect-ratio: 10 / 11;
    border-radius: var(--radius);
    /* one corner cut at 57 degrees, the angle of the cut in the logo */
    clip-path: polygon(13.85% 0, 100% 0, 100% 100%, 0 100%, 0 19.4%);
  }

  .hero-photo figcaption { margin-top: 0.6rem; font-size: 0.875rem; color: var(--on-dark-muted); }
  html[lang="ar"] .hero-photo figcaption { font-size: 0.95rem; }
}

/* Company structure diagram */
.structure {
  display: grid;
  justify-items: center;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.015));
}

/* The same diagram as a dark panel inside a light section */
.structure--panel { border-color: var(--steel); background: var(--ink); color: var(--on-dark); }

.node {
  width: 100%;
  max-width: 340px;
  padding: 1rem 1.2rem;
  border: 1px solid var(--steel);
  border-radius: 12px;
  background: var(--coal);
  text-align: center;
}

.node strong {
  display: block;
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 800;
  line-height: 1.25;
}

.node-kicker {
  display: block;
  margin-bottom: 0.2rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

html[lang="ar"] .node-kicker { letter-spacing: 0; font-size: 0.85rem; }

.node--brand { border-color: var(--red); background: var(--red); color: #fff; }
.node--brand .node-kicker { color: #fff; }

.link { width: 2px; height: 28px; background: var(--steel); }

.branches {
  position: relative;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  width: 100%;
  padding-top: 28px;
}

.branches::before {
  content: "";
  position: absolute;
  top: 0;
  inset-inline: calc((100% - 1.2rem) / 6);
  height: 2px;
  background: var(--steel);
}

.leaf {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 3.4rem;
  padding: 0.6rem 0.4rem;
  border: 1px solid var(--steel);
  border-radius: 10px;
  background: var(--coal);
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
  text-align: center;
}

.leaf::before {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  width: 2px;
  height: 28px;
  margin-left: -1px;
  background: var(--steel);
}

/* At-a-glance facts: four big numbers, divided by hairlines */
.glance {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin-top: clamp(2.25rem, 4vw, 3rem);
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}

.glance li { padding-block: 1.25rem; }

@media (max-width: 899.98px) {
  .glance li:nth-child(odd) { padding-inline-end: 1.125rem; }
  .glance li:nth-child(even) { padding-inline-start: 1.125rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
  .glance li:nth-child(n+3) { border-top: 1px solid rgba(255, 255, 255, 0.14); }
}

@media (min-width: 900px) {
  .glance { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .glance li { padding-block: 2rem 0.5rem; padding-inline-end: 1.5rem; }
  .glance li + li { padding-inline-start: 2rem; border-inline-start: 1px solid rgba(255, 255, 255, 0.14); }
}

.stat-num {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(3rem, 6.4vw, 5rem);
  font-weight: 800;
  font-stretch: 112%;
  font-variant-numeric: tabular-nums;
  line-height: 1;
  letter-spacing: -0.03em;
}

html[lang="ar"] .stat-num { letter-spacing: 0; }
.plus { color: var(--red); }

.stat-unit {
  display: block;
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark);
}

html[lang="ar"] .stat-unit { letter-spacing: 0; font-size: 1.05rem; }

.stat-label { display: block; margin-top: 0.45rem; color: var(--on-dark-muted); font-size: 0.975rem; }

/* ---------- About ---------- */

.stack { display: grid; gap: 1rem; }

/* Mission and vision side by side */
.pair { display: grid; gap: 1rem; margin-top: clamp(2.5rem, 5vw, 4rem); }

@media (min-width: 800px) {
  .pair { grid-template-columns: 1.15fr 0.85fr; }
}

.card {
  padding: 1.5rem 1.6rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.card h3 {
  margin-bottom: 0.6rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}

html[lang="ar"] .card h3 { letter-spacing: 0; font-size: 1.05rem; }

/* The mission, set large on a dark card: the first thing to read in this half of the section */
.card--statement { padding: clamp(1.75rem, 3vw, 2.5rem); border-color: var(--ink); background: var(--ink); color: var(--on-dark); }
.card--statement h3 { color: var(--red-soft); }
.card--statement p { font-family: var(--font-display); font-size: clamp(1.35rem, 2.3vw, 1.85rem); font-weight: 800; font-stretch: 105%; line-height: 1.2; letter-spacing: -0.01em; }
html[lang="ar"] .card--statement p { font-size: clamp(1.3rem, 2.1vw, 1.7rem); font-weight: 700; line-height: 1.6; letter-spacing: 0; }

.goals { display: grid; gap: 1.5rem; margin-top: 2rem; }

@media (min-width: 800px) {
  .goals { grid-template-columns: repeat(3, 1fr); gap: 2rem; }
}

/* Each goal sits under its own rule, with a large red number */
.goals li { padding-top: 1rem; border-top: 2px solid var(--text); }

.goal-n {
  display: block;
  margin-bottom: 0.75rem;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 2.6vw, 2.25rem);
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--red);
}

.goals p { font-weight: 600; font-size: 1.1rem; line-height: 1.45; }
html[lang="ar"] .goals p { line-height: 1.75; }

@media (max-width: 799.98px) {
  .goals li { display: grid; grid-template-columns: auto 1fr; column-gap: 1rem; align-items: baseline; }
  .goal-n { margin-bottom: 0; }
}

/* ---------- DeProtein ---------- */

/* Left column: the DeProtein logo above two photos of a real store */
.brand-visual { display: grid; gap: 0.75rem; }

.logo-card {
  display: grid;
  place-items: center;
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.5rem, 5vw, 3rem);
  border-radius: 20px;
  background: #fff;
}

.logo-card img { width: 100%; max-width: 380px; }

.photo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; }

.photo-pair img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
  background: var(--coal);
}

.photo-pair img { aspect-ratio: 4 / 3; }

/* Tablets: the logo card and the two store photos share one row */
@media (min-width: 640px) and (max-width: 899.98px) {
  .brand-visual { grid-template-columns: 1.3fr 1fr 1fr; align-items: stretch; }
  .photo-pair { display: contents; }
  .logo-card { padding: 1.25rem; }
}

.chips { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-block: 1.6rem; }

.chips li {
  padding: 0.4rem 0.95rem;
  border: 1px solid #45454f;
  border-radius: 999px;
  font-size: 0.9375rem;
  font-weight: 600;
}

.checks { display: grid; gap: 0.65rem; margin-bottom: 2rem; }

.checks li {
  position: relative;
  padding-inline-start: 1.9rem;
  color: var(--on-dark-muted);
}

.checks li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  top: 0.32em;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  background: var(--red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 8'/%3E%3C/svg%3E") center / 72% no-repeat;
}

html[lang="ar"] .checks li::before { top: 0.5em; }

/* ---------- Channels ---------- */

.channels { display: grid; gap: 1rem; }

@media (min-width: 780px) {
  .channels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1080px) {
  .channels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.channel {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

/* Wide screens: each card opens with a real photo; the icon tile overlaps its lower edge */
.channel-photo { width: 100%; aspect-ratio: 2 / 1; object-fit: cover; background: var(--coal); }
.channel-body { padding: 0 1.6rem 1.6rem; }

.channel-icon {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-top: -23px;
  margin-bottom: 0.9rem;
  border-radius: 12px;
  background: var(--ink);
  color: #fff;
  box-shadow: 0 0 0 3px var(--card);
}

.channel-icon svg { width: 24px; height: 24px; }
.channel h3 { margin-bottom: 0.5rem; font-size: 1.2rem; font-weight: 800; line-height: 1.3; }
.channel p { color: var(--muted); }

/* Phones and tablets: the photo becomes a small thumbnail beside the title.
   The originals are small, and at this size they stay sharp. */
@media (max-width: 1079.98px) {
  .channel { display: grid; grid-template-columns: 128px minmax(0, 1fr); align-items: center; align-content: start; gap: 0.9rem 1rem; padding: 1rem 1.1rem 1.2rem; }
  .channel-body { display: contents; }
  .channel-photo { grid-column: 1; grid-row: 1; width: 128px; aspect-ratio: 4 / 3; border-radius: 10px; }
  .channel h3 { grid-column: 2; grid-row: 1; margin: 0; }
  .channel p { grid-column: 1 / -1; }
  .channel-icon { display: none; }
}

@media (max-width: 359.98px) {
  .channel { grid-template-columns: 104px minmax(0, 1fr); }
  .channel-photo { width: 104px; }
}

/* ---------- For brands (services) ---------- */

.section--dark .section-head .lead,
.section--coal .section-head .lead { color: var(--on-dark-muted); }

/* Three services as one joined panel, each with a solid red icon tile */
.services { display: grid; border: 1px solid var(--steel); border-radius: 20px; overflow: hidden; background: var(--ink); }
.service { padding: clamp(1.5rem, 3vw, 2.25rem); }

.service-icon {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 1.1rem;
  border-radius: 12px;
  background: var(--red);
  color: #fff;
}

.service-icon svg { width: 24px; height: 24px; }
.service h3 { margin-bottom: 0.5rem; font-size: 1.35rem; font-weight: 800; font-stretch: 110%; line-height: 1.2; }
.service p { color: var(--on-dark-muted); }

@media (min-width: 900px) {
  .services { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .service + .service { border-inline-start: 1px solid var(--steel); }
}

@media (max-width: 899.98px) {
  .service + .service { border-top: 1px solid var(--steel); }
}

/* Tablets: the icon on one side, the title and text beside it */
@media (min-width: 580px) and (max-width: 899.98px) {
  .service { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 1.25rem; }
  .service-icon { grid-row: 1 / span 2; margin: 0; }
}

.section-cta { margin-top: 2rem; }

/* On the ground: event facts beside real event photos */
.activations {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem);
  padding-top: clamp(2.5rem, 5vw, 3.5rem);
  border-top: 1px solid var(--steel);
}

/* The photo column is capped so the photos are never stretched past their real size */
@media (min-width: 900px) {
  .activations { grid-template-columns: 1fr minmax(0, 540px); }
  /* the text column is narrow just above 900px: keep the button on one line */
  .activations .section-cta { white-space: nowrap; }
}

.activations h3 {
  max-width: 20ch;
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 800;
  font-stretch: 110%;
  line-height: 1.12;
  letter-spacing: -0.01em;
}

html[lang="ar"] .activations h3 { line-height: 1.45; letter-spacing: 0; max-width: 24ch; }
.activations p { max-width: 54ch; margin-top: 1rem; color: var(--on-dark-muted); }

.event-stats { display: flex; flex-wrap: wrap; gap: 2rem 2.75rem; margin-top: 1.75rem; }

.event-stats strong {
  display: block;
  font-family: var(--font-display);
  font-size: 2.6rem;
  font-weight: 800;
  font-stretch: 112%;
  line-height: 1;
  color: var(--red);
}

.event-stats span { display: block; max-width: 16ch; margin-top: 0.4rem; font-weight: 600; line-height: 1.35; }
html[lang="ar"] .event-stats span { line-height: 1.6; }

.shots { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; max-width: 540px; }
.shot { position: relative; overflow: hidden; border-radius: var(--radius); background: var(--ink); }
.shot--wide { grid-column: 1 / -1; }
.shot img { width: 100%; height: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform 0.4s ease; }
.shot--wide img { aspect-ratio: 3 / 2; }

/* The wide tile holds a short silent clip. Its picture shows until the clip plays,
   and the round button pauses and restarts it. */
.shot-clip { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; background: var(--ink); }

.shot-toggle {
  position: absolute;
  inset-inline-end: 0.6rem;
  top: 0.6rem;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(13, 13, 15, 0.82);
  color: #fff;
  cursor: pointer;
}

.shot-toggle[hidden] { display: none; }
.shot-toggle:hover { background: var(--red); }
.shot-toggle svg { width: 20px; height: 20px; }
.shot-toggle .icon-pause,
.shot-toggle.is-playing .icon-play { display: none; }
.shot-toggle.is-playing .icon-pause { display: block; }
.shot:hover img { transform: scale(1.03); }

.shot figcaption {
  position: absolute;
  inset-inline-start: 0.6rem;
  bottom: 0.6rem;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: rgba(13, 13, 15, 0.82);
  color: var(--on-dark);
  font-size: 0.8125rem;
  font-weight: 600;
  line-height: 1.5;
}

html[lang="ar"] .shot figcaption { font-size: 0.9rem; }

/* Small phones: a smaller label, so a long caption stays on one line inside its photo */
@media (max-width: 400px) {
  .shot figcaption,
  html[lang="ar"] .shot figcaption {
    inset-inline-start: 0.4rem;
    bottom: 0.4rem;
    padding: 0.2rem 0.5rem;
    font-size: 0.6875rem;
  }

  html[lang="ar"] .shot figcaption { font-size: 0.75rem; }
}

@media (max-width: 340px) {
  .shot figcaption { font-size: 0.625rem; }
}

/* Tablets: the clip takes two thirds of the row and the two photos stack beside it */
@media (min-width: 600px) and (max-width: 899.98px) {
  .shots { max-width: none; grid-template-columns: 2fr 1fr; }
  .shot--wide { grid-column: 1; grid-row: 1 / span 2; }
  .shot:not(.shot--wide) img { aspect-ratio: auto; height: 100%; }
}

/* ---------- Brands ---------- */

/* Logo wall: the brands' own logo images in one white panel, divided by hairlines */
.brand-logos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1.5rem;
  border-radius: 20px;
  overflow: hidden;
  background: var(--line);
}

@media (min-width: 480px) {
  .brand-logos { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (min-width: 640px) {
  .brand-logos { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.brand-logos li { position: relative; aspect-ratio: 1; overflow: hidden; background: #fff; }

/* The image fills its cell and is scaled to fit, never cropped.
   --s evens out logos whose artwork is drawn small or large inside its file. */
.brand-logos img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; transform: scale(var(--s, 1)); }

/* Wide screens: the cells are wider than tall, so wide wordmarks get their own, larger scale (--w) */
@media (min-width: 980px) {
  .brand-logos li { aspect-ratio: 4 / 3; }
  .brand-logos img { transform: scale(var(--w, var(--s, 1))); }
}

.fineprint { font-size: 0.875rem; color: var(--on-dark-muted); }
#brands { padding-block-end: clamp(3rem, 6vw, 4.5rem); }

/* ---------- Locations ---------- */

/* Three real points of sale above the list of regions */
/* The heading sits beside a tight set of six small photos. The originals are small,
   so they are shown small: that keeps them sharp on high-resolution screens. */
.locations-head { display: grid; gap: clamp(1.5rem, 4vw, 3rem); margin-bottom: clamp(2rem, 4vw, 3rem); }
.locations-head .section-head { margin-bottom: 0; }

@media (min-width: 900px) {
  .locations-head { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center; }
  .place-photos { justify-self: end; }
}

.place-photos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.6rem; width: 100%; max-width: 560px; }
.place-photos img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; background: var(--coal); }
.place-photos figcaption { grid-column: 1 / -1; margin-top: 0.15rem; font-size: 0.875rem; color: var(--muted); }
html[lang="ar"] .place-photos figcaption { font-size: 0.95rem; }

@media (max-width: 480px) {
  .place-photos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Tablets: one strip of six */
@media (min-width: 640px) and (max-width: 899.98px) {
  .place-photos { max-width: none; grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.regions { display: grid; gap: 1rem; }

@media (min-width: 680px) {
  .regions { grid-template-columns: repeat(2, 1fr); }
  .region--wide { grid-column: span 2; }
}

@media (min-width: 1040px) {
  .regions { grid-template-columns: repeat(4, 1fr); }
}

.region {
  padding: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--card);
}

.region-kicker {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red-deep);
}

html[lang="ar"] .region-kicker { letter-spacing: 0; font-size: 0.95rem; }

.region h3 { margin: 0.2rem 0 0.9rem; font-size: 1.45rem; font-weight: 800; line-height: 1.3; }
.region p { color: var(--muted); }

.districts { display: flex; flex-wrap: wrap; gap: 0.4rem; }

.districts li {
  padding: 0.28rem 0.75rem;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-size: 0.9rem;
}

html[lang="ar"] .districts li { font-size: 0.98rem; }

/* ---------- Franchise band ---------- */

.franchise {
  padding-block: clamp(3.5rem, 8vw, 6rem);
  background: var(--red);
  color: #fff;
}

.franchise-inner { display: grid; gap: 1.75rem; align-items: center; }

@media (min-width: 860px) {
  .franchise-inner { grid-template-columns: 1fr auto; gap: 3rem; }
}

.franchise .eyebrow { color: #fff; }
.franchise .eyebrow::before { background: #fff; }
.franchise h2 { max-width: 18ch; font-size: clamp(2.2rem, 5.6vw, 4rem); }
html[lang="ar"] .franchise h2 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.35; }
.franchise .btn { min-height: 56px; padding-inline: 1.75rem; font-size: 1.0625rem; }
.franchise .body-copy { color: #fff; }
.franchise :focus-visible { outline-color: #fff; }

.btn-light { justify-self: start; background: #fff; color: var(--ink); }
.btn-light:hover { background: var(--paper); }

/* ---------- Contact ---------- */

.contact-list { display: grid; gap: 1.1rem; margin-top: 2rem; }
.contact-list li { display: flex; align-items: flex-start; gap: 0.9rem; }

.contact-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  border: 1px solid var(--steel);
  border-radius: 12px;
  background: var(--coal);
  color: var(--red-soft);
}

.contact-icon svg { width: 22px; height: 22px; }

.contact-key {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

html[lang="ar"] .contact-key { letter-spacing: 0; font-size: 0.92rem; }

.contact-list a, .contact-value { font-size: 1.1rem; font-weight: 600; overflow-wrap: anywhere; }
.contact-list a { text-decoration-color: rgba(255, 255, 255, 0.35); text-underline-offset: 0.2em; }
.contact-list a:hover { text-decoration-color: var(--red-soft); }
.contact-list [dir="ltr"] { display: inline-block; }

.form {
  display: grid;
  gap: 1rem;
  padding: clamp(1.25rem, 3vw, 2rem);
  border: 1px solid var(--steel);
  border-radius: 20px;
  background: var(--coal);
  color-scheme: dark;
}

.field { display: grid; gap: 0.4rem; }
.field-row { display: grid; gap: 1rem; }

@media (min-width: 560px) {
  .field-row { grid-template-columns: 1fr 1fr; }
}

/* Side-by-side fields share their rows (label, box, error), so a label that wraps
   or an error under one box cannot push the box next to it out of line */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 560px) {
    .field-row > .field { grid-row: span 3; grid-template-rows: subgrid; }
    .field-row > .field > label { align-self: end; }
  }
}

.form label { font-size: 0.9375rem; font-weight: 600; }
html[lang="ar"] .form label { font-size: 1rem; }
.optional { font-weight: 400; color: var(--on-dark-muted); }

.form input,
.form select,
.form textarea {
  width: 100%;
  min-height: 48px;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--field-line);
  border-radius: 10px;
  background: #0f0f12;
  color: var(--on-dark);
  font: inherit;
}

.form textarea { min-height: 140px; resize: vertical; }

.form input:focus-visible,
.form select:focus-visible,
.form textarea:focus-visible {
  outline: 3px solid var(--red-soft);
  outline-offset: 1px;
  border-radius: 10px;
}

.form [aria-invalid="true"] { border-color: var(--error); }
.field-error { font-size: 0.875rem; color: var(--error); }
.field-error:empty { display: none; }

.form-status { font-size: 0.95rem; color: var(--on-dark-muted); }
.form-status:empty { display: none; }
.form-status a { color: var(--on-dark); font-weight: 600; }
.form .btn { justify-self: start; }

/* Two ways to send: by email or on WhatsApp */
.form-actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }

/* Narrowest phones: keep the email address and the send button on one line */
@media (max-width: 350px) {
  .contact-list a, .contact-value { font-size: 1rem; }
  .form .btn { padding-inline: 1rem; }
}

/* ---------- Floating WhatsApp button ---------- */

.wa-float {
  position: fixed;
  inset-inline-end: 1.1rem;
  bottom: 1.1rem;
  z-index: 40;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 52px;
  padding: 0 1.15rem;
  border-radius: 999px;
  background: #25d366; /* WhatsApp's own green, so people recognise it */
  color: var(--ink);
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
  transition: transform 0.18s ease;
}

.wa-float:hover { transform: translateY(-2px); }
.wa-float:focus-visible { outline-color: #fff; box-shadow: 0 0 0 6px var(--ink); }
.wa-float svg { width: 24px; height: 24px; flex: none; }

/* On phones it is a round icon; the label is still read out by screen readers */
@media (max-width: 640px) {
  .wa-float { width: 52px; padding: 0; justify-content: center; }
  .wa-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* ---------- Footer ---------- */

.site-footer {
  padding-block: clamp(2.5rem, 5vw, 3.5rem) 1.75rem;
  border-top: 1px solid var(--steel);
  background: var(--ink);
  color: var(--on-dark-muted);
  font-size: 0.95rem;
}

html[lang="ar"] .site-footer { font-size: 1rem; }

/* On phones, leave room so the floating WhatsApp button never covers the copyright line */
@media (max-width: 640px) {
  .site-footer { padding-bottom: 5.5rem; }
}

.footer-inner { display: grid; gap: 2rem; }

@media (min-width: 800px) {
  .footer-inner { grid-template-columns: 1.4fr 1fr 1fr; }
}

.site-footer .brand { margin-bottom: 0.9rem; color: var(--on-dark); }
.footer-title {
  max-width: none;
  margin-bottom: 0.7rem;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  font-stretch: 100%;
  line-height: 1.5;
  letter-spacing: 0;
  color: var(--on-dark);
}
.footer-contact { margin-top: 0.8rem; }
.footer-contact a { color: var(--on-dark); text-decoration: none; }
.footer-contact a:hover { text-decoration: underline; }
.footer-links { display: grid; gap: 0.15rem; }
.footer-links a { display: inline-block; padding-block: 0.3rem; text-decoration: none; }
.footer-links a:hover { color: #fff; text-decoration: underline; }

.footer-base {
  margin-top: 2.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  font-size: 0.875rem;
}

/* ---------- Clients ---------- */

.clients { margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: clamp(2rem, 4vw, 2.75rem); border-top: 1px solid var(--steel); }
.section--paper .clients { border-top-color: var(--line); }

.clients h3 {
  margin-bottom: 1rem;
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  font-stretch: 100%;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--on-dark-muted);
}

html[lang="ar"] .clients h3 { letter-spacing: 0; font-size: 1rem; }
.section--paper .clients h3 { color: var(--muted); }

/* The clients' own logo files, unaltered, in one white panel divided by hairlines.
   --h sets each logo's height so that wide wordmarks and tall badges look the same size. */
.client-logos {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 1px;
  border-radius: 20px;
  overflow: hidden;
  background: var(--line);
}

/* phones: two per row, the seventh across the full row */
.client-logos li { grid-column: span 3; display: grid; place-items: center; min-height: 104px; padding: 1.1rem 1rem; background: #fff; }
.client-logos li:last-child { grid-column: 1 / -1; }
.client-logos img { width: auto; max-width: 100%; height: var(--h, 40px); object-fit: contain; }

/* tablets: four, then three */
@media (min-width: 640px) {
  .client-logos { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .client-logos li, .client-logos li:last-child { grid-column: span 3; }
  .client-logos li:nth-child(n+5) { grid-column: span 4; }
}

/* wide screens: all seven in one row */
@media (min-width: 980px) {
  .client-logos { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .client-logos li, .client-logos li:last-child, .client-logos li:nth-child(n+5) { grid-column: auto; }
  .client-logos li { min-height: 124px; }
}

/* ---------- Scroll reveal (only when scripts run and motion is welcome) ---------- */

@media screen and (prefers-reduced-motion: no-preference) {
  .js .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s ease;
  }

  .js .reveal.in { opacity: 1; transform: none; }

  /* Once shown, buttons keep their own hover and pressed motion */
  .js .btn.reveal.in { transition: opacity 0.6s ease, transform 0.18s ease, background-color 0.18s ease, border-color 0.18s ease; }
  .js .btn.reveal.in:active { transform: translateY(1px); }
}

/* ---------- Print: every section shows, and on-screen controls stay off the paper ---------- */

@media print {
  .wa-float, .nav-toggle, .skip { display: none; }
  .site-header { position: static; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .btn, .nav a { transition: none; }
}