/* ==========================================================================
   ضامنلك — Damenlak
   Brand tokens extracted from the identity PDF:
   navy #1B2040, teal #6AB8A2, tagline «نصل إليك بأمان»
   ========================================================================== */

/* --------------------------------------------------------- fonts
   Self-hosted. These were on fonts.googleapis.com, which is render-blocking:
   when it stalls the browser holds first paint and the page looks dead. That
   is a single point of failure on networks where Google is slow or filtered,
   so the files are served from our own origin instead.
   Only the arabic and latin subsets are shipped. Noto Kufi is a variable font
   — Google serves one identical file for every weight — so it is declared once
   with a 600-800 range rather than three copies of the same bytes. */

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-400-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-400-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-500-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-500-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-600-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-600-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-700-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'IBM Plex Sans Arabic';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(/public/fonts/ibm-plex-sans-arabic-700-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* arabic */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/public/fonts/noto-kufi-arabic-var-arabic.woff2) format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}

/* latin */
@font-face {
  font-family: 'Noto Kufi Arabic';
  font-style: normal;
  font-weight: 600 800;
  font-display: swap;
  src: url(/public/fonts/noto-kufi-arabic-var-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  /* brand */
  --navy:        #1B2040;
  --navy-deep:   #10152B;
  --teal:        #6AB8A2;
  --teal-ink:    #2F7A64;   /* teal darkened to pass AA as text on light */
  --teal-deep:   #1F5B4A;
  --teal-tint:   #E6F2ED;
  --teal-panel:  #F1F8F5;
  --teal-line:   #C5E2D7;

  /* ground — warm paper, echoing the kraft packaging */
  --paper:       #F7F4EF;
  --paper-2:     #F2F0EA;
  --card:        #FBFAF7;
  --white:       #FFFFFF;

  /* ink */
  --ink:         #171A2E;
  --ink-2:       #4A5068;
  --ink-3:       #6B7189;
  --ink-invert:  #C7CBDA;
  --ink-invert-2:#8F96AD;

  /* lines */
  --line:        #E2DCD1;
  --line-strong: #CFC7B8;
  --field-line:  #DDD6C9;

  /* reject */
  --reject:      #A93B28;
  --reject-ink:  #8E3222;
  --reject-body: #7A3D30;
  --reject-panel:#FBF1EE;
  --reject-line: #EFCFC6;

  /* type */
  --display: 'Noto Kufi Arabic', 'Segoe UI', sans-serif;
  --body: 'IBM Plex Sans Arabic', 'Segoe UI', sans-serif;

  /* geometry */
  --r-sm: 10px;
  --r-md: 14px;
  --r-lg: 18px;
  --wrap: 1120px;
  --gutter: 24px;
  /* Widest the hero / split photograph is allowed to get. Below 2x this the
     media column is simply half the viewport; above it, the cap binds. */
  --media-max: 860px;
}

/* --------------------------------------------------------- base */

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

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.45; }
p { margin: 0; }
img, svg { display: block; max-width: 100%; }
ul { margin: 0; padding: 0; list-style: none; }

a { color: var(--teal-ink); text-decoration: none; }
a:hover { color: var(--teal-deep); }

:focus-visible {
  outline: 3px solid rgba(106, 184, 162, 0.85);
  outline-offset: 2px;
  border-radius: 4px;
}

.skip {
  position: absolute; top: -100px; right: 16px; z-index: 50;
  background: var(--navy); color: #fff; padding: 12px 20px;
  border-radius: 0 0 var(--r-sm) var(--r-sm); font-weight: 600;
}
.skip:focus { top: 0; color: #fff; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); }

.section { padding: 64px 0; }
.section--white { background: var(--white); }
.section--paper { background: var(--paper); }
.section--navy  { background: var(--navy); color: #fff; }

.section-head { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; margin-bottom: 28px; }
.section-head h2 { font-size: 27px; font-weight: 700; color: var(--navy-deep); }
.section-head p { font-size: 15px; color: var(--ink-3); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 9px;
  height: 34px; padding: 0 15px; border-radius: 999px;
  background: var(--teal-tint); color: var(--teal-ink);
  font-size: 13.5px; font-weight: 600;
}
.eyebrow svg { width: 17px; height: 17px; }

/* --------------------------------------------------------- buttons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px;
  border: 1.5px solid transparent; border-radius: 13px;
  font-family: var(--body); font-size: 15.5px; font-weight: 600;
  cursor: pointer; text-align: center;
  transition: background-color .18s ease, border-color .18s ease, color .18s ease;
}
.btn svg { width: 17px; height: 17px; flex-shrink: 0; }

.btn--primary { background: var(--navy); color: #fff; }
.btn--primary:hover { background: #2A315C; color: #fff; }

.btn--accent { background: var(--teal); color: var(--navy-deep); font-weight: 700; }
.btn--accent:hover { background: #57A791; color: var(--navy-deep); }

.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { background: var(--paper-2); color: var(--ink); }

.btn--on-navy { background: transparent; color: #fff; border-color: rgba(255,255,255,.45); }
.btn--on-navy:hover { background: rgba(255,255,255,.1); color: #fff; }

.btn--sm { min-height: 44px; padding: 0 22px; font-size: 15px; border-radius: var(--r-sm); }

.link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; }
.link-arrow svg { width: 15px; height: 15px; flex-shrink: 0; }

/* --------------------------------------------------------- header */

.site-header {
  background: var(--white);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 30;
}
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-height: 84px; }

.brand { display: flex; align-items: center; flex-shrink: 0; }
.brand img { height: 30px; width: auto; }

.badge-country {
  display: inline-flex; align-items: center; gap: 7px;
  height: 30px; padding: 0 12px; border-radius: 999px;
  background: var(--paper-2); font-size: 13px; font-weight: 600; color: var(--ink-2);
  flex-shrink: 0;
}
.badge-country img { width: 19px; height: 13px; border-radius: 2px; }

.site-nav { display: flex; align-items: center; gap: 26px; flex-grow: 1; }
.site-nav a {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 15px; font-weight: 500; color: var(--ink-2);
  padding: 8px 0;
}
.site-nav a:hover { color: var(--ink); }
.site-nav a[aria-current="page"] {
  color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--teal);
}
.site-nav svg { width: 14px; height: 14px; flex-shrink: 0; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; flex-shrink: 0;
  color: var(--ink-2); background: none; border: 0; cursor: pointer;
}
.icon-btn:hover { color: var(--ink); }
.icon-btn svg { width: 21px; height: 21px; }

.nav-toggle { display: none; }

/* --------------------------------------------------------- hero */

.hero { background: var(--paper); }
.hero__inner { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
/* The text column is half the viewport, but its outer edge has to line up with
   the centred .wrap used by every section below. The column's own width is the
   percentage basis, so this stays exact at any viewport and — unlike 100vw —
   does not drift by the width of a classic scrollbar. */
.hero__text {
  display: flex; flex-direction: column; justify-content: center; gap: 22px;
  padding: 72px var(--gutter);
  padding-inline-start: max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter)));
}
.hero__text h1 { font-size: clamp(30px, 3.6vw, 47px); font-weight: 800; line-height: 1.42; color: var(--navy-deep); }
.hero__text > p { font-size: 17px; line-height: 1.95; color: var(--ink-2); max-width: 30em; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; }
.hero__note { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-3); }
.hero__note svg { width: 17px; height: 17px; flex-shrink: 0; }
.hero__media { min-height: 420px; }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }

/* --------------------------------------------------------- page head */

.page-head { background: var(--paper); padding: 56px 0; }
.page-head h1 { font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--navy-deep); margin: 14px 0; }
.page-head > .wrap > p { font-size: 16.5px; line-height: 1.9; color: var(--ink-2); max-width: 46em; }

.crumbs { display: flex; align-items: center; gap: 9px; font-size: 13.5px; color: var(--ink-3); }
.crumbs a { color: var(--ink-3); }
.crumbs strong { color: var(--ink); font-weight: 600; }

.facts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.fact {
  display: inline-flex; align-items: center; gap: 9px;
  min-height: 42px; padding: 8px 16px; border-radius: 11px;
  background: var(--white); border: 1px solid var(--line);
  font-size: 14px;
}
.fact svg { width: 17px; height: 17px; flex-shrink: 0; color: var(--teal-ink); }

/* --------------------------------------------------------- grids + cards */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 24px 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.card--white { background: var(--white); }
.card h3 { font-family: var(--body); font-size: 17px; font-weight: 700; }
.card p { font-size: 14.5px; line-height: 1.8; color: var(--ink-2); }

.i-tile {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; flex-shrink: 0; border-radius: 11px;
  background: var(--teal-tint); color: var(--teal-ink);
}
.i-tile svg { width: 22px; height: 22px; }

.step-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--r-sm);
  background: var(--navy); color: var(--teal);
  font-family: var(--display); font-size: 17px; font-weight: 700;
}
.step-top { display: flex; align-items: center; justify-content: space-between; }
.step-top .ghost-icon { color: #C3BDB0; }
.step-top .ghost-icon svg { width: 24px; height: 24px; }

.numbered { display: flex; gap: 15px; align-items: flex-start; }
.numbered .n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; flex-shrink: 0; border-radius: 999px;
  border: 1.5px solid var(--teal); color: var(--teal-ink);
  font-family: var(--display); font-size: 15px; font-weight: 700;
}

.note-strip {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 13px 18px; border-radius: 11px;
  background: var(--paper-2); color: var(--ink-2); font-size: 14px;
}
.note-strip svg { width: 18px; height: 18px; flex-shrink: 0; }
.note-strip strong { color: var(--ink); font-weight: 600; }

/* --------------------------------------------------------- deadlines band */

.band { background: var(--navy); color: #fff; padding: 56px 0; }
.band__head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 20px; }
.band__head h2 { font-size: 27px; font-weight: 700; color: #fff; }
.band .eyebrow {
  background: rgba(106,184,162,.14); border: 1px solid rgba(106,184,162,.38); color: var(--teal);
  height: 32px; font-size: 13px;
}
.band .eyebrow svg { width: 16px; height: 16px; }

.deadline {
  display: flex; align-items: center; gap: 22px;
  padding: 22px 26px; border-radius: 16px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.16);
}
.deadline--urgent { background: rgba(106,184,162,.14); border-color: rgba(106,184,162,.55); }
.deadline__fig { width: 100px; flex-shrink: 0; display: flex; flex-direction: column; align-items: center; }
.deadline__fig b { font-family: var(--display); font-size: 40px; font-weight: 800; line-height: 1.2; color: #fff; }
.deadline__fig span { font-size: 13.5px; font-weight: 600; color: var(--ink-invert-2); }
.deadline--urgent .deadline__fig b { color: var(--teal); }
.deadline--urgent .deadline__fig span { color: #A9D6C7; }
.deadline h3 { font-family: var(--body); font-size: 16.5px; font-weight: 700; color: #fff; margin-bottom: 7px; }
.deadline p { font-size: 14px; line-height: 1.8; color: var(--ink-invert); }

.band .link-arrow { color: var(--teal); margin-top: 20px; }
.band .link-arrow:hover { color: #A9D6C7; }

/* --------------------------------------------------------- verdict panels */

.verdict { border-radius: var(--r-lg); padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.verdict--yes { background: var(--teal-panel); border: 1px solid var(--teal-line); }
.verdict--no  { background: var(--reject-panel); border: 1px solid var(--reject-line); }
.verdict__head { display: flex; align-items: center; gap: 12px; }
.verdict__head h3 { font-family: var(--body); font-size: 18.5px; font-weight: 700; }
.verdict--yes h3 { color: var(--teal-deep); }
.verdict--no  h3 { color: var(--reject-ink); }
.mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; flex-shrink: 0; border-radius: 999px; color: #fff;
}
.mark--yes { background: var(--teal-ink); }
.mark--no  { background: var(--reject); }
.mark svg { width: 17px; height: 17px; }

.chips { display: flex; flex-wrap: wrap; gap: 9px; }
.chip { padding: 9px 15px; border-radius: 999px; background: var(--white); font-size: 14px; }
.verdict--yes .chip { border: 1px solid var(--teal-line); color: var(--teal-deep); }
.verdict--no  .chip { border: 1px solid var(--reject-line); color: var(--reject-ink); }

.verdict__foot { font-size: 14px; line-height: 1.85; padding-top: 16px; }
.verdict--yes .verdict__foot { color: #37604F; border-top: 1px solid var(--teal-line); }
.verdict--no  .verdict__foot { color: var(--reject-body); border-top: 1px solid var(--reject-line); }

/* --------------------------------------------------------- proof examples */

.proof { border-radius: var(--r-lg); overflow: hidden; display: flex; flex-direction: column; }
.proof--yes { background: var(--teal-panel); border: 1px solid var(--teal-line); }
.proof--no  { background: var(--reject-panel); border: 1px solid var(--reject-line); }
.proof img { width: 100%; height: 280px; object-fit: cover; }
.proof__body { padding: 16px 20px 18px; display: flex; flex-direction: column; gap: 7px; }
.proof__body h3 { font-family: var(--body); font-size: 16.5px; font-weight: 700; }
.proof--yes h3 { color: var(--teal-deep); }
.proof--no  h3 { color: var(--reject-ink); }
.proof__body p { font-size: 14px; line-height: 1.8; }
.proof--yes p { color: #37604F; }
.proof--no  p { color: var(--reject-body); }
.proof__label { display: flex; align-items: center; gap: 10px; }
.proof__label .mark { width: 28px; height: 28px; }
.proof__label .mark svg { width: 13px; height: 13px; }

/* --------------------------------------------------------- waybills + video */

.thumbs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.thumb {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md);
  padding: 12px; cursor: pointer; display: flex; align-items: center; justify-content: center;
  min-height: 160px;
}
.thumb:hover { border-color: var(--teal); }
.thumb img { max-height: 200px; width: auto; }

.video { display: flex; align-items: center; gap: 40px; flex-wrap: wrap; }
.video__poster {
  position: relative; width: 196px; height: 348px; flex-shrink: 0;
  border-radius: var(--r-lg); overflow: hidden; background: var(--navy); display: block;
}
.video__poster img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.video__poster .play {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(16,21,43,.26);
}
.video__poster .play span {
  display: flex; align-items: center; justify-content: center;
  width: 62px; height: 62px; border-radius: 999px; background: var(--teal); color: var(--navy-deep);
}
.video__poster .play svg { width: 24px; height: 24px; margin-right: 3px; }
.video__text { flex: 1 1 320px; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.video__text h2 { font-size: 26px; font-weight: 700; color: var(--navy-deep); }
.video__text p { font-size: 16px; line-height: 1.9; color: var(--ink-2); max-width: 40em; }

/* lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 60; display: none;
  align-items: center; justify-content: center; padding: 32px;
  background: rgba(16,21,43,.88);
}
.lightbox[open] { display: flex; }
.lightbox img { max-width: 100%; max-height: 100%; border-radius: var(--r-md); }
.lightbox__close {
  position: absolute; top: 20px; left: 20px;
  width: 48px; height: 48px; border-radius: 999px; border: 0; cursor: pointer;
  background: rgba(255,255,255,.14); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.lightbox__close svg { width: 20px; height: 20px; }

/* --------------------------------------------------------- split (about) */

.split { display: grid; grid-template-columns: 1fr 1fr; align-items: stretch; }
.split__text {
  display: flex; flex-direction: column; justify-content: center; gap: 16px; align-items: flex-start;
  padding: 64px var(--gutter);
  padding-inline-start: max(var(--gutter), calc(100% - var(--wrap) / 2 + var(--gutter)));
}
.split__text h2 { font-size: 27px; font-weight: 700; color: var(--navy-deep); }
.split__text p { font-size: 16px; line-height: 1.95; color: var(--ink-2); }
.split__media { min-height: 340px; }
.split__media img { width: 100%; height: 100%; object-fit: cover; }

.ticks { display: flex; flex-direction: column; gap: 13px; }
.ticks li { display: flex; gap: 11px; align-items: flex-start; font-size: 15px; line-height: 1.75; }
.ticks .mark { width: 22px; height: 22px; margin-top: 2px; }
.ticks .mark svg { width: 12px; height: 12px; }
.ticks .mark--muted { background: #D9D2C5; }

.stamp { font-family: var(--display); font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.stamp--problem { color: var(--reject); }
.stamp--solution { color: var(--teal-ink); }
.stamp--promise { color: var(--teal); }

.card--navy { background: var(--navy); border-color: var(--navy); }
.card--navy h3 { color: #fff; }
.card--navy p { color: var(--ink-invert); }

/* --------------------------------------------------------- form */

.form-card {
  background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: 26px 28px 28px; margin: 0 0 26px;
}
.form-card legend {
  padding: 0 10px; margin-right: -4px;
  font-family: var(--display); font-size: 15px; font-weight: 700; color: var(--teal-ink);
}
.field { display: flex; flex-direction: column; gap: 8px; margin-top: 20px; }
.field:first-of-type { margin-top: 4px; }
.field > label { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.field .help { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); }
.req { color: var(--reject); }

.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.field-row .field { margin-top: 20px; }

input[type="email"], input[type="tel"], input[type="url"],
input[type="number"], input[type="text"], select, textarea {
  width: 100%; font-family: inherit; font-size: 15px; color: var(--ink);
  background: var(--white); border: 1.5px solid var(--field-line);
  border-radius: 12px; padding: 0 16px; height: 52px;
}
textarea { height: 124px; padding: 14px 16px; line-height: 1.75; resize: vertical; }
::placeholder { color: #A39C8E; }
input:focus, select:focus, textarea:focus {
  outline: 3px solid rgba(106,184,162,.5); outline-offset: 1px; border-color: var(--teal-ink);
}
input:user-invalid, textarea:user-invalid, select:user-invalid { border-color: var(--reject); }

.form-foot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.form-foot p { font-size: 14px; line-height: 1.8; color: var(--ink-3); }
.form-status {
  display: none; align-items: flex-start; gap: 12px;
  padding: 20px 24px; border-radius: var(--r-md);
  background: var(--teal-panel); border: 1px solid var(--teal-line); color: var(--teal-deep);
}
.form-status[data-shown] { display: flex; }
.form-status svg { width: 22px; height: 22px; flex-shrink: 0; }
.form-status h3 { font-family: var(--body); font-size: 16.5px; font-weight: 700; margin-bottom: 4px; }
.form-status p { font-size: 14.5px; line-height: 1.8; color: #37604F; }

/* --------------------------------------------------------- cta + footer */

.cta { background: var(--navy); padding: 72px 0; text-align: center; }
.cta h2 { font-size: clamp(24px, 3vw, 31px); font-weight: 700; color: #fff; }
.cta p { font-size: 15.5px; color: var(--ink-invert); margin-top: 12px; }
.cta__row { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.site-footer { background: var(--navy-deep); padding: 40px 0; }
.site-footer__top { display: flex; align-items: center; gap: 36px; flex-wrap: wrap; }
.site-footer__top img { height: 28px; width: auto; }
.site-footer nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; flex-grow: 1; }
.site-footer nav a { font-size: 14.5px; color: var(--ink-invert); }
.site-footer nav a:hover { color: #fff; }
.site-footer .icon-btn { color: var(--ink-invert); }
.site-footer .icon-btn:hover { color: #fff; }
.site-footer hr { border: 0; height: 1px; background: rgba(255,255,255,.12); margin: 24px 0; }
.site-footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.site-footer__bottom span { font-size: 13.5px; color: var(--ink-invert-2); }
.tagline { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; color: var(--teal); }
.tagline svg { width: 16px; height: 16px; }

/* --------------------------------------------------------- 404 */

.notfound { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 80px var(--gutter); }
.notfound b { font-family: var(--display); font-size: 68px; font-weight: 800; color: var(--teal); line-height: 1; }
.notfound h1 { font-size: 27px; font-weight: 700; color: var(--navy-deep); }
.notfound p { font-size: 16px; color: var(--ink-2); }

/* --------------------------------------------------------- responsive */

/* Past 2x --media-max the photograph stops growing and the text column takes
   the slack. The alignment formula changes basis with it — at the crossover
   both branches resolve to the same value, so nothing jumps.
   Declared after the .hero / .split base rules so it wins the cascade. */
@media (min-width: 1721px) {
  .hero__inner, .split { grid-template-columns: 1fr var(--media-max); }
  .hero__text, .split__text {
    padding-inline-start: calc(50% - (var(--wrap) - var(--media-max)) / 2 + var(--gutter));
  }
}

@media (max-width: 1000px) {
  .hero__inner, .split { grid-template-columns: 1fr; }
  /* single column now, so the half-width alignment calc no longer applies */
  .hero__text, .split__text { padding: 44px var(--gutter); padding-inline-start: var(--gutter); }
  .hero__media { min-height: 260px; order: 2; }
  .hero__media img { object-position: 50% 58%; }
  .split__media { min-height: 260px; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .thumbs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .nav-toggle { display: inline-flex; }
  .site-header .wrap { min-height: 64px; gap: 12px; }
  .brand img { height: 24px; }
  .site-nav {
    display: none; position: absolute; top: 100%; right: 0; left: 0;
    flex-direction: column; align-items: stretch; gap: 0;
    background: var(--white); border-bottom: 1px solid var(--line);
    padding: 8px var(--gutter) 16px;
  }
  .site-nav[data-open] { display: flex; }
  .site-nav a { padding: 14px 0; border-bottom: 1px solid var(--line); }
  .site-nav a:last-child { border-bottom: 0; }
  .header-cta { display: none; }
  .site-header .wrap { position: relative; }
}

@media (max-width: 760px) {
  .section { padding: 44px 0; }
  .section-head { margin-bottom: 20px; }
  .section-head h2, .band__head h2, .video__text h2, .split__text h2 { font-size: 21px; }
  .grid, .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; gap: 14px; }
  .field-row { grid-template-columns: 1fr; gap: 0; }
  .band { padding: 40px 0; }
  .deadline { gap: 16px; padding: 18px 20px; }
  .deadline__fig { width: 76px; }
  .deadline__fig b { font-size: 32px; }
  .card, .verdict { padding: 20px; }
  .form-card { padding: 20px 18px 22px; }
  .video__poster { width: 100%; height: 320px; }
  .video__poster img { object-position: 50% 38%; }
  .proof img { height: 200px; }
  /* Two-up waybills fall to ~135px on a small phone, which is too small to
     recognise your own label. One per row keeps them legible. */
  .thumbs { grid-template-columns: 1fr; }
  .thumb img { max-height: 260px; }
  .cta { padding: 52px 0; }
  .cta__row .btn { width: 100%; }
  .site-footer nav { flex-direction: column; align-items: flex-start; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

@media print {
  .site-header, .cta, .video, .lightbox, .btn { display: none; }
  body { background: #fff; }
}

/* --------------------------------------------------- FormFacade embed
   The request form is the third-party FormFacade widget wrapping the Google
   Form (same as the jawda site). It renders inline — no iframe — so it can be
   skinned properly. Selectors below are the widget's real classes, read off
   the rendered DOM. Kept in the stylesheet rather than injected at runtime the
   way the old site did, so there is no flash of unstyled form.
   If FormFacade ever changes its markup this degrades to their default skin,
   which is functional but off-brand. */

.form-embed {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--r-lg); padding: 26px 28px 28px;
}
.form-embed__fallback { font-size: 15px; line-height: 1.8; color: var(--ink-2); margin-bottom: 16px; }
.form-embed__note { font-size: 14px; line-height: 1.8; color: var(--ink-3); margin-top: 18px; }

#ff-compose, #ff-compose * { font-family: var(--body) !important; }

/* The widget ships .ff-text-left; this is an RTL form. */
#ff-compose .ff-form,
#ff-compose .ff-text-left,
#ff-compose .ff-section,
#ff-compose .ff-item { direction: rtl; text-align: right; }

/* The widget prints the Google Form's own title, which still reads
   «اهلا بك في جودة …» — the old brand. Our own <h2> above already introduces
   the form, so this is redundant as well as wrong. Hidden until the Google
   Form itself is renamed; delete this rule once it is. */
#ff-compose .ff-title, #ff-compose .ff-has-title > .ff-title { display: none; }
#ff-compose .ff-item { margin-bottom: 22px; }
#ff-compose .ff-item-qs { font-size: 14.5px; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
/* .ff-required is a span inside the label holding the asterisk, not a wrapper. */
#ff-compose .ff-required { color: var(--reject) !important; font-weight: 700; }
#ff-compose .ff-editwidget { display: none; }   /* owner-only settings cog */
#ff-compose .ff-help { font-size: 13.5px; line-height: 1.7; color: var(--ink-3); margin-top: 6px; }

#ff-compose .rest-form-control,
#ff-compose input[type="text"],
#ff-compose input[type="email"],
#ff-compose select,
#ff-compose textarea {
  width: 100%; direction: rtl; text-align: right;
  font-size: 15px; color: var(--ink); background: var(--white);
  border: 1.5px solid var(--field-line); border-radius: 12px;
  padding: 0 16px; height: 52px; box-shadow: none;
}
#ff-compose textarea { height: auto; min-height: 118px; padding: 14px 16px; line-height: 1.75; }
#ff-compose .rest-form-control:focus,
#ff-compose input:focus, #ff-compose select:focus, #ff-compose textarea:focus {
  outline: 3px solid rgba(106, 184, 162, .5); outline-offset: 1px;
  border-color: var(--teal-ink);
}
#ff-compose .ff-widget-error { color: var(--reject-ink); font-size: 13.5px; margin-top: 6px; }

/* File pickers. FormFacade handles the upload itself — no Google sign-in — but
   ships a bare 127px-wide link. Structure is .ff-file-upload > a.addfile, so
   the outer div becomes the dropzone and the link becomes the button inside.
   (Styling both identically is what produced the double dashed border.) */
#ff-compose .ff-item.ff-file .ff-widget-control { width: 100%; }
#ff-compose .ff-file-upload {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; min-height: 104px; padding: 20px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md);
  background: var(--card);
}
#ff-compose .addfile {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 24px; border: 0; border-radius: var(--r-sm);
  background: var(--navy) !important; color: #fff !important;
  text-decoration: none; cursor: pointer;
  font-size: 0;   /* suppresses the widget's English "Add file" text node */
}
#ff-compose .addfile::after {
  content: "إرفاق ملف"; font-size: 15px; font-weight: 600; line-height: 1;
}
#ff-compose .addfile:hover { background: #2A315C !important; }

#ff-compose .ff-button-bar { display: flex; justify-content: flex-start; gap: 12px; margin-top: 8px; }
#ff-compose .rest-btn {
  min-height: 54px; padding: 0 28px; border: 1.5px solid transparent; border-radius: 13px;
  font-size: 15.5px; font-weight: 600; cursor: pointer; box-shadow: none;
}
/* FormFacade's own sheet loads after ours and sets these with !important,
   so the brand colours have to match its weight. */
#ff-compose .rest-btn-primary {
  background: var(--navy) !important; border-color: var(--navy) !important; color: #fff !important;
}
#ff-compose .rest-btn-primary:hover { background: #2A315C !important; border-color: #2A315C !important; }
#ff-compose .rest-btn-secondary, #ff-compose .ff-back {
  background: transparent !important; border-color: var(--line-strong) !important; color: var(--ink) !important;
}
#ff-compose .rest-btn-secondary:hover, #ff-compose .ff-back:hover { background: var(--paper-2) !important; }

@media (max-width: 760px) {
  .form-embed { padding: 20px 16px 22px; }
  #ff-compose .ff-button-bar { flex-direction: column; }
  #ff-compose .rest-btn { width: 100%; }
}