/* ==========================================================================
   UNIT10 — design system ("Everyday care")
   Arabic-first RTL. Display: Beiruti · Text & UI: IBM Plex Sans Arabic 400/500 (both SIL OFL 1.1, self-hosted).
   Colour: juniper ink, limestone + white surfaces, one leaf accent (taken from the hero's tree).
   Signature: the stencil "cut" from the UNIT10 wordmark (eyebrow marks, photo gaps).
   ========================================================================== */

/* ---------- Fonts ---------- */
@font-face { font-family: "Beiruti"; src: url(../fonts/beiruti-ar-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "Beiruti"; src: url(../fonts/beiruti-lat-var.woff2) format("woff2"); font-weight: 200 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Text face: two static weights only (400 text, 500 UI) — no variable axis, no synthetic bold. */
@font-face { font-family: "U10 Text"; src: url(../fonts/plex-ar-400.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "U10 Text"; src: url(../fonts/plex-ar-500.woff2) format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; }
@font-face { font-family: "U10 Text"; src: url(../fonts/plex-lat-400.woff2) format("woff2"); font-weight: 400; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "U10 Text"; src: url(../fonts/plex-lat-500.woff2) format("woff2"); font-weight: 500; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------- Tokens ---------- */
:root {
  --ink: #0f2b27;
  --ink-hover: #1b4640;
  --ink-2: #3a4b47;
  --ink-3: #5c6b67;
  --muted: #8a9692;
  --hint: #66746f; /* placeholder / unchosen select text: 4.9:1 on white */
  --line: #e4dfd5;
  --line-2: #cfc8bb;
  --paper: #ffffff;
  --stone: #f4f1ea;
  --stone-2: #ebe6db;
  --leaf: #c8dc64;
  --leaf-2: #a9c23a;
  --leaf-ink: #4f6a14;
  --dark: #0f2b27;
  --dark-2: #173c36;
  --on-dark: #f2f4ee;
  --on-dark-2: #b9c6c1;
  --error: #b42318;

  --f-d: "Beiruti", "Segoe UI", Tahoma, "Arial", sans-serif;
  --f-t: "U10 Text", "Segoe UI", Tahoma, "Arial", sans-serif;

  /* Display scale (Beiruti) — unchanged. */
  --fs-h1: clamp(2.45rem, 1.35rem + 3.55vw, 4.5rem);
  --fs-h2: clamp(1.95rem, 1.3rem + 2.25vw, 3.3rem);
  --fs-h3: clamp(1.3rem, 1.12rem + .6vw, 1.7rem);
  --fs-statement: clamp(1.55rem, 1.05rem + 1.9vw, 2.75rem);
  /* Text scale (Plex): lead 17→19 · body 16→17 · ui 15.5 · small 14 · micro 13. Weights: 400 text, 500 UI. */
  --fs-lead: clamp(1.0625rem, 1rem + .25vw, 1.1875rem);
  --fs-body: clamp(1rem, .97rem + .14vw, 1.0625rem);
  --fs-ui: .96875rem;
  --fs-small: .875rem;
  --fs-micro: .8125rem;

  --wrap: 1400px;
  --gut: clamp(20px, 4.6vw, 64px);
  --side: max(var(--gut), calc((100% - var(--wrap)) / 2 + var(--gut)));
  --sec: clamp(4.5rem, 2.6rem + 6.4vw, 9rem);
  --hdr: 84px;
  --r: 8px;
  --ease: cubic-bezier(.2, .7, .2, 1);
}
@media (max-width: 1023px) { :root { --hdr: 64px; } }

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--hdr) + 16px); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
/* Homepage sections reached from the menu (/#services, /#contact …): land with the title just under the header,
   not a full section-padding lower. */
.svcs[id], .process[id], .contact[id], .bhome[id], .sd-form[id] { scroll-margin-top: calc(28px - var(--sec)); }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 var(--fs-body)/1.8 var(--f-t); font-synthesis: none; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { padding: 0; list-style: none; }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4 { font-family: var(--f-d); font-weight: 700; line-height: 1.15; color: var(--ink); text-wrap: balance; }
p { text-wrap: pretty; }
::selection { background: var(--leaf); color: var(--ink); }
:focus { outline: none; }
:focus-visible { outline: 2.5px solid var(--ink); outline-offset: 3px; border-radius: 3px; }
.value :focus-visible, .ftr :focus-visible { outline-color: var(--leaf); }
.main { display: block; }
.main:focus { outline: none; }
.wrap { width: min(100%, var(--wrap)); margin-inline: auto; padding-inline: var(--gut); }
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; inset-inline-start: 16px; top: -100px; z-index: 200; background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--r); }
.skip-link:focus { top: 12px; }
.ph, .pic img { width: 100%; height: 100%; object-fit: cover; }
.pic { display: contents; }
.br { display: inline; }
@media (max-width: 479px) { .br--wide { display: none; } }

/* ---------- Brand lockup (legacy wordmark as a recolourable mask) ---------- */
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.brand__mark { display: block; width: 98px; aspect-ratio: 891 / 315; background: currentColor;
  -webkit-mask: url(../brand/unit10-wordmark.png) center / contain no-repeat; mask: url(../brand/unit10-wordmark.png) center / contain no-repeat; }
.brand__ar { font: 600 15px/1 var(--f-d); color: var(--ink-2); padding-inline-start: 12px; border-inline-start: 1px solid var(--line-2); padding-block: 4px; }
.brand--sm .brand__mark { width: 86px; }
.brand--lg .brand__mark { width: 168px; }
.brand--lg .brand__ar { font-size: 18px; }
.brand--light { color: #fff; }
.brand--light .brand__ar { color: var(--on-dark-2); border-color: rgba(255, 255, 255, .22); }

/* ---------- Stencil marker + eyebrow ---------- */
.mark { flex: none; width: 12px; height: 12px; background: linear-gradient(90deg, var(--leaf-2) 0 38%, transparent 38% 58%, var(--leaf-2) 58%); }
.eyebrow { display: flex; align-items: center; gap: 12px; font: 500 var(--fs-small)/1.4 var(--f-t); color: var(--ink-2); margin-bottom: 22px; }
.eyebrow--light { color: var(--on-dark-2); }
.eyebrow--light .mark { background: linear-gradient(90deg, var(--leaf) 0 38%, transparent 38% 58%, var(--leaf) 58%); }

/* ---------- Buttons & links ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; max-width: 100%; padding: 0 26px; border-radius: var(--r);
  font: 500 var(--fs-ui)/1.2 var(--f-t); white-space: nowrap; transition: background-color .25s, color .25s, box-shadow .25s; }
.btn .arrow, .link .arrow, .svc__more .arrow { flex: none; transition: transform .35s var(--ease); }
.btn:hover .arrow, .link:hover .arrow { transform: translateX(-4px); }
.btn--ink { background: var(--ink); color: #fff; }
.btn--ink:hover { background: var(--ink-hover); }
.btn--line { color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn--line:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn--leaf { background: var(--leaf); color: var(--ink); }
.btn--leaf:hover { background: #d7e787; }
.btn--sm { min-height: 46px; padding: 0 20px; font-size: .9375rem; }
.btn--block { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; }
.link { display: inline-flex; align-items: center; gap: 10px; font: 500 var(--fs-ui)/1.4 var(--f-t); color: var(--ink); padding-bottom: 5px; background: linear-gradient(var(--leaf-2), var(--leaf-2)) 0 100% / 100% 1.5px no-repeat; transition: background-size .35s var(--ease); }
.link:hover { background-size: 100% 3px; }

/* ---------- Header ---------- */
.hdr { position: sticky; top: 0; z-index: 50; background: var(--paper); box-shadow: 0 1px 0 transparent; transition: box-shadow .3s; }
.hdr.is-scrolled { box-shadow: 0 1px 0 var(--line); }
.hdr__in { display: flex; align-items: center; gap: 36px; height: var(--hdr); }
.hdr__brand { display: flex; align-items: center; min-height: 44px; }
.hdr__nav { margin-inline-start: auto; }
.hdr__nav .menu { display: flex; gap: 6px; }
.hdr__nav a { position: relative; display: flex; align-items: center; min-height: 44px; padding: 0 14px; font: 400 var(--fs-ui)/1 var(--f-t); color: var(--ink-2); border-radius: 6px; transition: color .2s; }
.hdr__nav a:hover { color: var(--ink); }
.hdr__nav a::after { content: ""; position: absolute; inset-inline: 14px; bottom: 8px; height: 2px; background: var(--leaf-2); transform: scaleX(0); transition: transform .35s var(--ease); }
.hdr__nav a:hover::after, .hdr__nav a[aria-current]::after { transform: none; }
.hdr__nav a[aria-current] { color: var(--ink); font-weight: 500; }
.hdr__menu { display: none; }
.burger { position: relative; width: 22px; height: 12px; }
.burger span { position: absolute; inset-inline: 0; height: 1.6px; background: currentColor; border-radius: 2px; }
.burger span:first-child { top: 0; }
.burger span:last-child { bottom: 0; inset-inline-start: 7px; }
@media (max-width: 1023px) {
  .hdr__in { gap: 12px; }
  .hdr__nav, .hdr__cta { display: none; }
  .hdr__menu { display: inline-flex; align-items: center; gap: 12px; margin-inline-start: auto; min-height: 44px; padding-inline: 10px; margin-inline-end: -10px; font: 500 .9375rem/1 var(--f-t); color: var(--ink); }
  .brand__mark { width: 84px; }
  .brand__ar { font-size: 14px; }
}

/* ---------- Mobile menu sheet ----------
   Order follows the editable menu: الرئيسية · من نحن · الخدمات (+ five areas on demand) · المدونة · تواصل معنا.
   The links sit at the top; the bottom group (اطلب عرض سعر + approved channels) rests at the foot of the screen,
   so the sheet reads as complete on tall phones. When the content is taller than the screen, it simply scrolls. */
.mnav { position: fixed; inset: 0; z-index: 100; display: flex; flex-direction: column; background: var(--paper); overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; transform: translateY(-8px); transition: opacity .26s var(--ease), transform .26s var(--ease); }
.mnav.is-open { opacity: 1; transform: none; }
.mnav[hidden] { display: none; }
.mnav__top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 64px; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 1; background: var(--paper); }
.mnav__brand { display: flex; align-items: center; min-height: 44px; }
.mnav__close { width: 48px; height: 48px; display: grid; place-items: center; margin-inline-end: -12px; }
.x { position: relative; width: 20px; height: 20px; }
.x::before, .x::after { content: ""; position: absolute; top: 9px; inset-inline: 0; height: 1.6px; background: var(--ink); transform: rotate(45deg); }
.x::after { transform: rotate(-45deg); }
.mnav__body { flex: 1 0 auto; display: flex; flex-direction: column; padding-block: 12px calc(28px + env(safe-area-inset-bottom)); }
.mnav__list { display: grid; }
.mnav__item + .mnav__item { border-top: 1px solid var(--line); }
.mnav__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.mnav__link { display: flex; align-items: center; gap: 12px; min-height: 60px; font: 600 1.5rem/1.2 var(--f-d); color: var(--ink); }
.mnav__link[aria-current]::after { content: ""; width: 7px; height: 7px; background: var(--leaf-2); }
.mnav__toggle { flex: none; display: grid; place-items: center; width: 48px; height: 48px; margin-inline-end: -10px; border-radius: var(--r); color: var(--ink-2); }
.mnav__toggle .chev { transition: transform .3s var(--ease); }
.mnav__toggle[aria-expanded="true"] .chev { transform: rotate(180deg); }
/* The five service areas: a quieter second level (text face, indented on a rule). Collapsed until asked for;
   without JavaScript they simply stay open. */
.mnav__sub { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .3s var(--ease), visibility .3s; }
.mnav__sub > ul { min-height: 0; overflow: hidden; display: grid; margin-inline-start: 2px; padding-inline-start: 16px; border-inline-start: 1.5px solid var(--line-2); }
.mnav__sub li:last-child { padding-bottom: 14px; }
.js .mnav__item--group:not(.is-open) .mnav__sub { grid-template-rows: 0fr; visibility: hidden; }
.mnav__sub a { display: flex; align-items: center; min-height: 44px; font: 400 1rem/1.45 var(--f-t); color: var(--ink-2); }
.mnav__sub a:hover { color: var(--ink); }
.mnav__sub a[aria-current] { color: var(--ink); font-weight: 500; }
.mnav__nav { margin-bottom: 28px; }
.mnav__foot { display: grid; gap: 10px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--line); }
.mnav__foot .btn { min-height: 56px; }
/* Approved channels only, sharing the row equally (--cols is set from the count: 1–4 per row, balanced rows above 4). */
.cgrid { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 8px; }
.cgrid__a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 66px; padding: 10px 6px; border-radius: 10px; background: var(--stone); color: var(--ink); font: 500 12.5px/1.3 var(--f-t); text-align: center; transition: background-color .2s; }
.cgrid__a:hover { background: var(--leaf); }
.cgrid__ic { display: grid; place-items: center; }
.cgrid__ic .ic { width: 20px; height: 20px; stroke-width: 1.6; }
.cgrid__l { overflow-wrap: anywhere; }
.cgrid[data-count="1"] .cgrid__a { flex-direction: row; gap: 10px; min-height: 54px; font: 500 15px/1.4 var(--f-t); }
.cgrid__v { overflow-wrap: anywhere; }
@media (max-height: 640px) { .mnav__link { min-height: 52px; font-size: 1.3rem; } .mnav__sub a { min-height: 40px; } .mnav__nav { margin-bottom: 20px; } .mnav__foot { padding-top: 16px; } .cgrid__a { min-height: 58px; } }
html.is-locked { overflow: hidden; }
html.is-locked body { position: fixed; inset-inline: 0; width: 100%; overflow: hidden; } /* top is set inline to the saved offset */

/* ---------- Stencil cut on photographs ---------- */
.cut { position: relative; overflow: hidden; --cut-at: 21%; --cut-w: 10px; --cut-bg: var(--paper); }
.cut__gap { position: absolute; top: -1px; bottom: -1px; inset-inline-start: var(--cut-at); width: var(--cut-w); background: var(--cut-bg); pointer-events: none; }
.cut--sm { --cut-w: 8px; --cut-at: 16%; }

/* ---------- Hero ---------- */
.hero__grid { display: grid; grid-template-columns: var(--side) minmax(0, 5.6fr) minmax(0, 6.4fr); min-height: clamp(620px, calc(100svh - var(--hdr)), 860px); }
.hero__text { grid-column: 2; align-self: center; padding-block: 64px 80px; padding-inline-end: clamp(32px, 4.4vw, 80px); }
.hero__title { font-size: var(--fs-h1); line-height: 1.07; letter-spacing: -.005em; }
.hero__lead { margin-top: 28px; max-width: 30em; font-size: var(--fs-lead); line-height: 1.78; color: var(--ink-2); }
.hero__actions { margin-top: 40px; }
.hero__media { grid-column: 3; position: relative; margin: 0; min-height: 100%; }
.hero__media .ph, .hero__media img { position: absolute; inset: 0; object-position: 62% 50%; }
.hero__media { --cut-at: 71%; --cut-w: 12px; }
@media (max-width: 1023px) {
  .hero__grid { grid-template-columns: minmax(0, 1fr); min-height: 0; }
  .hero__text { grid-column: 1; padding: 36px var(--gut) 36px; }
  .hero__lead { margin-top: 20px; max-width: 34em; }
  .hero__actions { margin-top: 30px; }
  .hero__media { grid-column: 1; aspect-ratio: 16 / 10; min-height: 0; --cut-at: 19%; --cut-w: 9px; }
}
@media (max-width: 767px) {
  .hero__text { padding-top: 26px; padding-bottom: 30px; }
  .hero__media { aspect-ratio: 0.86; --cut-at: 17%; --cut-w: 7px; }
  .hero__media img { object-position: 50% 50%; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
  .hero__actions .btn { padding-inline: 12px; }
}
@media (max-width: 379px) { .hero__actions { grid-template-columns: 1fr; } }

/* ---------- Section heads ---------- */
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5vw, 76px); }
.sec-head__title { font-size: var(--fs-h2); line-height: 1.12; }
.sec-head__lead { margin-top: 22px; max-width: 34em; font-size: var(--fs-lead); line-height: 1.78; color: var(--ink-2); }
.sec-head--duo { max-width: none; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 20px clamp(48px, 6vw, 112px); align-items: end; }
.sec-head--duo .sec-head__lead { margin-top: 0; padding-bottom: 8px; }
@media (max-width: 1023px) { .sec-head--duo { grid-template-columns: minmax(0, 1fr); } }
.sec-head--split { max-width: none; display: flex; align-items: flex-end; justify-content: space-between; gap: 24px 48px; flex-wrap: wrap; }

/* ---------- Intro ---------- */
.intro { padding-block: var(--sec); }
.intro__grid { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); gap: 40px; }
.intro__head .eyebrow { margin-top: 12px; }
.statement { font: 600 var(--fs-statement)/1.5 var(--f-d); max-width: 25em; text-wrap: pretty; }
.statement__muted { color: var(--muted); }
.intro__band { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(36px, 6vw, 112px); align-items: end; margin-top: clamp(56px, 7vw, 112px); }
.intro__media { margin: 0; aspect-ratio: 16 / 11; }
.audience__label { font: 500 var(--fs-small)/1.5 var(--f-t); color: var(--ink-3); margin-bottom: 14px; }
.audience__list { display: grid; border-top: 1px solid var(--line-2); }
.audience__list li { display: flex; align-items: center; gap: 14px; min-height: 58px; padding-block: 10px; border-bottom: 1px solid var(--line); font: 600 clamp(1.1rem, 1rem + .35vw, 1.3rem)/1.4 var(--f-d); color: var(--ink); }
.audience__list li::before { content: ""; flex: none; width: 6px; height: 6px; background: var(--leaf-2); }
.intro .link { margin-top: 32px; }
@media (max-width: 1023px) {
  .intro__grid { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .intro__head .eyebrow { margin-top: 0; }
  .intro__band { grid-template-columns: minmax(0, 1fr); align-items: start; }
}
@media (max-width: 767px) {
  .intro__band { margin-top: 40px; gap: 28px; }
  .intro__media { aspect-ratio: 16 / 10; margin-inline: calc(var(--gut) * -1); }
  .intro__media.cut { --cut-at: 14%; --cut-w: 6px; }
  .audience__list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 18px; border-top: 0; }
  .audience__list li { min-height: 0; padding-block: 12px; font-size: 1.02rem; align-items: flex-start; border-bottom: 1px solid var(--line); }
  .audience__list li::before { margin-top: .55em; }
}

/* ---------- Services (home) ---------- */
.svcs { background: var(--stone); padding-block: var(--sec); --cut-bg: var(--stone); }
.svcs .cut { --cut-bg: var(--stone); }
.svcs__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(48px, 6vw, 112px); align-items: start; }
.svcs__list { border-top: 1px solid var(--line-2); }
.svc { position: relative; border-bottom: 1px solid var(--line-2); transition: opacity .35s var(--ease); }
.svc__img { display: none; }
.svc__body { display: grid; grid-template-columns: 52px minmax(0, 1fr); column-gap: 12px; padding-block: 30px 32px; padding-inline-end: 132px; }
.svc__num { grid-row: 1 / span 4; padding-top: 9px; font: 500 14px/1 var(--f-t); color: var(--ink-3); font-variant-numeric: tabular-nums; }
.svc__title { font: 650 clamp(1.45rem, 1.1rem + .95vw, 2rem)/1.25 var(--f-d); }
.svc__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.svc__tag { margin-top: 8px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.7; }
.svc__meta { margin-top: 12px; font-size: var(--fs-small); line-height: 1.7; color: var(--ink-3); }
.svc__more { position: absolute; inset-inline-end: 0; top: 36px; display: inline-flex; align-items: center; gap: 8px; font: 500 var(--fs-small)/1 var(--f-t); color: var(--ink); opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .4s var(--ease); }
.svc.is-active .svc__more, .svc:focus-within .svc__more { opacity: 1; transform: none; }
.svcs__list:hover .svc:not(:hover), .svcs__list:focus-within .svc:not(:focus-within) { opacity: .5; }
.svcs__media { position: sticky; top: calc(var(--hdr) + 32px); }
.svcs__frame { position: relative; aspect-ratio: 1 / 1.08; max-height: calc(100svh - var(--hdr) - 64px); width: 100%; }
.svcs__fig { position: absolute; inset: 0; margin: 0; opacity: 0; transform: scale(1.04); transition: opacity .6s var(--ease), transform 1.4s var(--ease); }
.svcs__fig.is-active { opacity: 1; transform: none; }
@media (hover: none) { .svc__more { opacity: 1; transform: none; } .svcs__list:hover .svc:not(:hover) { opacity: 1; } }
@media (max-width: 1079px) {
  .svcs__grid { grid-template-columns: minmax(0, 1fr); }
  .svcs__media { display: none; }
  .svcs__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 44px 28px; border-top: 0; }
  .svc { border-bottom: 0; }
  .svc__img { display: block; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--stone-2); }
  .svc__body { grid-template-columns: minmax(0, 1fr); padding: 22px 0 0; }
  .svc__num { grid-row: auto; padding: 0 0 10px; }
  .svc__more { position: static; margin-top: 18px; opacity: 1; transform: none; }
  .svcs__list:hover .svc:not(:hover), .svcs__list:focus-within .svc:not(:focus-within) { opacity: 1; }
}
@media (max-width: 767px) {
  .svcs__list { grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--line-2); }
  .svc { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; align-items: center; padding-block: 16px; border-bottom: 1px solid var(--line-2); }
  .svc__img { aspect-ratio: 1; border-radius: 6px; }
  .svc { position: relative; align-items: start; padding-block: 18px; }
  .svc__body { padding: 0; }
  .svc__num, .svc__meta { display: none; }
  .svc__title { font-size: 1.2rem; line-height: 1.35; }
  .svc__tag { margin-top: 4px; font-size: 14.5px; line-height: 1.6; }
  .svc__more { justify-self: start; margin-top: 8px; gap: 6px; font-size: 13.5px; line-height: 1.4; }
  .svc__more .arrow { width: 14px; height: 14px; }
  .svc:hover .svc__more .arrow { transform: translateX(-4px); }
}

/* ---------- Value (the one dark chapter) ---------- */
.value { background: var(--dark); color: var(--on-dark); padding-block: var(--sec); }
.value .cut { --cut-bg: var(--dark); }
.value__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6.5vw, 120px); align-items: start; }
.value__media { margin: 0; aspect-ratio: 4 / 5; position: sticky; top: calc(var(--hdr) + 32px); }
.value__media .ph { will-change: transform; }
.value__title { font-size: var(--fs-h2); line-height: 1.14; color: #fff; }
.value__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 56px); margin-top: clamp(40px, 5vw, 64px); }
.vitem { padding-block: 28px 36px; border-top: 1px solid rgba(255, 255, 255, .16); }
.vitem__n { font: 500 14px/1 var(--f-t); color: var(--leaf); font-variant-numeric: tabular-nums; }
.vitem__t { margin-top: 16px; font: 650 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.3 var(--f-d); color: #fff; }
.vitem__p { margin-top: 10px; color: var(--on-dark-2); font-size: var(--fs-body); line-height: 1.8; max-width: 26em; }
@media (max-width: 1023px) {
  .value__grid { grid-template-columns: minmax(0, 1fr); }
  .value__media { position: relative; top: 0; aspect-ratio: 16 / 10; order: 2; }
  .value__body { order: 1; }
}
@media (max-width: 767px) {
  .value__list { grid-template-columns: minmax(0, 1fr); margin-top: 32px; }
  .vitem { display: grid; grid-template-columns: 34px minmax(0, 1fr); padding-block: 20px 22px; }
  .vitem__n { grid-row: 1 / span 2; padding-top: 7px; }
  .vitem__t { margin-top: 0; font-size: 1.2rem; }
  .vitem__p { margin-top: 6px; font-size: 15px; }
  .value__media { aspect-ratio: 16 / 9; }
}

/* ---------- Process / steps ---------- */
.process { padding-block: var(--sec); }
.steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-top: 1px solid var(--line-2); }
.step { position: relative; padding-block: 36px 8px; padding-inline-end: clamp(20px, 3vw, 48px); }
.step::before { content: ""; position: absolute; top: -6px; inset-inline-start: 0; width: 11px; height: 11px; background: linear-gradient(90deg, var(--leaf-2) 0 38%, var(--paper) 38% 58%, var(--leaf-2) 58%); }
.step__n { display: block; font: 300 clamp(2.6rem, 2rem + 2.2vw, 4.2rem)/1 var(--f-d); color: var(--ink); font-variant-numeric: tabular-nums; }
.step__t { margin-top: 22px; font: 650 clamp(1.3rem, 1.15rem + .5vw, 1.6rem)/1.3 var(--f-d); }
.step__p { margin-top: 10px; color: var(--ink-2); max-width: 22em; }
@media (max-width: 1023px) { .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 20px; } }
@media (max-width: 599px) {
  .steps { grid-template-columns: minmax(0, 1fr); border-top: 0; border-inline-start: 1px solid var(--line-2); padding-inline-start: 26px; margin-inline-start: 5px; row-gap: 0; }
  .step { display: grid; grid-template-columns: 44px minmax(0, 1fr); padding-block: 0 26px; padding-inline-end: 0; }
  .step::before { top: 8px; inset-inline-start: -32px; }
  .step__n { grid-row: 1 / span 2; font-size: 1.6rem; font-weight: 400; color: var(--ink-3); }
  .step__t { margin-top: 0; font-size: 1.2rem; }
  .step__p { margin-top: 4px; font-size: 15.5px; }
}

/* ---------- Contact (home) ---------- */
.contact { background: var(--stone); padding-block: var(--sec); }
.contact__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.contact__title { font-size: var(--fs-h2); line-height: 1.12; }
.contact__lead { margin-top: 22px; max-width: 26em; font-size: var(--fs-lead); line-height: 1.78; color: var(--ink-2); }
.contact__form { background: var(--paper); border-radius: 12px; padding: clamp(22px, 3.2vw, 48px); box-shadow: 0 1px 0 rgba(15, 43, 39, .04), 0 30px 60px -40px rgba(15, 43, 39, .35); }
@media (max-width: 1023px) { .contact__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) { .contact__form { margin-inline: calc(var(--gut) * -1 + 8px); border-radius: 10px; } }

/* ---------- Contact methods (icon + label + value; the whole row is the link) ---------- */
.channels { display: grid; gap: 4px; margin-top: 32px; }
.channel { display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 14px; min-height: 56px; padding-block: 6px; color: var(--ink); }
.channel__ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 10px; background: var(--stone); color: var(--ink); transition: background-color .25s; }
.channel__ic .ic { width: 19px; height: 19px; stroke-width: 1.6; }
.channel__t { display: grid; gap: 1px; min-width: 0; }
.channel__l { font: 400 var(--fs-small)/1.4 var(--f-t); color: var(--ink-3); }
.channel__v { font: 500 1rem/1.45 var(--f-t); color: var(--ink); overflow-wrap: anywhere; }
.channel__v[dir="ltr"] { text-align: right; } /* LTR value (email, number) aligned to the RTL column edge */
a.channel:hover .channel__ic { background: var(--leaf); }
a.channel:hover .channel__v { text-decoration: underline; text-decoration-color: var(--leaf-2); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.contact .channel__ic, .sd-form .channel__ic { background: var(--paper); }
.channels--menu { margin-top: 0; }
.channels--menu .channel { min-height: 48px; padding-block: 2px; }
.channels--menu .channel__ic { width: 36px; height: 36px; border-radius: 8px; }
.channels--menu .channel { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
.channels--dark { margin-top: 0; }
.channels--dark .channel { color: #fff; }
.channels--dark .channel__ic { background: rgba(255, 255, 255, .08); color: var(--leaf); }
.channels--dark .channel__l { color: var(--on-dark-2); }
.channels--dark .channel__v { color: #fff; font-weight: 400; }
.channels--dark a.channel:hover .channel__ic { background: var(--leaf); color: var(--ink); }

/* ---------- Quote form (markup from UNIT10 Core) ---------- */
.u10-form { position: relative; }
/* Honeypot: kept in place and clipped. Never push it off-canvas: an inline-start offset of -9999px becomes
   right:-9999px in RTL, which made mobile browsers (Firefox, iOS-style meta viewport) widen the layout
   viewport ×4 and leave a blank white band after the footer. */
.u10-form__hp { position: absolute !important; inset-block-start: 0; inset-inline-start: 0; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; opacity: 0; pointer-events: none; }
.u10-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 16px; }
.field--full { grid-column: 1 / -1; }
.field label { display: flex; align-items: baseline; gap: 8px; margin-bottom: 8px; font: 500 var(--fs-small)/1.5 var(--f-t); color: var(--ink); }
.opt { font: 400 var(--fs-micro)/1.5 var(--f-t); color: var(--ink-3); }
.field input[type="text"], .field input[type="tel"], .field input[type="email"], .field select, .field textarea {
  width: 100%; min-height: 52px; padding: 13px 16px; border: 1px solid var(--line-2); border-radius: var(--r); background: var(--paper);
  font: 400 1rem/1.5 var(--f-t); color: var(--ink); transition: border-color .2s, box-shadow .2s; -webkit-appearance: none; appearance: none; }
.field input::placeholder, .field textarea::placeholder { color: var(--hint); opacity: 1; }
.field input[dir="ltr"] { text-align: right; }
.field input[dir="ltr"]:not(:placeholder-shown) { text-align: left; }
.field select { padding-inline-end: 44px; cursor: pointer; background: var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%235c6b67' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat left 18px center; }
/* An unchosen select reads like placeholder text, not like an answer. */
.field select.is-empty, .field select:has(option[value=""]:checked) { color: var(--hint); }
.field select option { color: var(--ink); }
.field textarea { min-height: 120px; resize: vertical; line-height: 1.7; }
.field input:hover, .field select:hover, .field textarea:hover { border-color: #b4ad9f; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(169, 194, 58, .4); }
.field [aria-invalid="true"] { border-color: var(--error); }
.field__error { margin-top: 6px; font-size: var(--fs-small); line-height: 1.5; color: var(--error); }
@media (prefers-reduced-motion: no-preference) { .field__error:not(:empty) { animation: err-in .2s var(--ease); } @keyframes err-in { from { opacity: 0; } to { opacity: 1; } } }
.field__error:empty { display: none; }
.u10-form__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin-top: 28px; }
.u10-form__actions .btn { border: 0; min-width: 200px; }
/* Point-of-collection privacy notice: a single quiet link, available before sending (no checkbox, no paragraph). */
.u10-form__privacy { display: inline-flex; align-items: center; min-height: 44px; font: 400 var(--fs-small)/1.5 var(--f-t); color: var(--ink-2); text-decoration: underline; text-decoration-color: var(--line-2); text-decoration-thickness: 1px; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.u10-form__privacy:hover { color: var(--ink); text-decoration-color: var(--leaf-2); }
.u10-form__status { display: none; margin-bottom: 22px; padding: 16px 18px; border-radius: var(--r); font: 400 var(--fs-ui)/1.7 var(--f-t); }
.u10-form__status.is-error { display: block; background: #fdeeec; color: #86190f; }
.u10-form__status.is-success { display: block; background: #eef5d5; color: #2e4708; }
.u10-form.is-sent .u10-form__status { font: 600 clamp(1.25rem, 1.1rem + .6vw, 1.6rem)/1.5 var(--f-d); padding: 28px 24px; margin: 0; }
.u10-form.is-sent .u10-form__grid, .u10-form.is-sent .u10-form__actions { display: none; }
.u10-form.is-busy .btn { opacity: .7; pointer-events: none; }
@media (max-width: 599px) {
  .u10-form__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .u10-form__actions { justify-content: center; gap: 2px; margin-top: 24px; }
  .u10-form__actions .btn { width: 100%; }
}

/* ---------- Inner page hero (no breadcrumbs: the page opens on its eyebrow + title) ---------- */
.phero { padding-block: clamp(48px, 7vw, 120px) clamp(40px, 5vw, 80px); }
.phero__text { max-width: 54rem; }
.phero__title { font-size: clamp(2.3rem, 1.3rem + 3.6vw, 4.5rem); line-height: 1.08; max-width: 14em; }
.phero__lead { margin-top: 24px; max-width: 34em; font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-2); }
.phero__actions { margin-top: 34px; }
@media (max-width: 599px) { .phero__actions .btn { width: 100%; } }

/* Wide photograph under page heroes: aligned to the content grid on both sides. */
.band { margin-block: 0; }
.band__media { aspect-ratio: 21 / 9; margin: 0; background: var(--stone-2); }
@media (max-width: 1023px) { .band__media { aspect-ratio: 16 / 9; } }
@media (max-width: 599px) { .band { padding-inline: 0; } .band__media { aspect-ratio: 4 / 3; } }
/* On phones the stencil cut would leave a thin strip at the edge of narrow photos, which reads as a broken or
   partial image. It stays on the homepage hero and on wider screens, where it reads as the brand mark. */
@media (max-width: 599px) { .band__media .cut__gap, .discuss__media .cut__gap, .intro__media .cut__gap, .value__media .cut__gap, .split-media__fig .cut__gap { display: none; } }

/* ---------- Prose (editor content) ---------- */
.prose { color: var(--ink-2); font-size: var(--fs-body); line-height: 1.9; }
.prose > * + * { margin-top: 1.1em; }
.prose h2 { margin-top: 1.8em; font: 650 clamp(1.45rem, 1.2rem + .8vw, 1.9rem)/1.3 var(--f-d); color: var(--ink); }
.prose h3 { margin-top: 1.6em; font: 650 1.3rem/1.35 var(--f-d); color: var(--ink); }
.prose h2 + *, .prose h3 + * { margin-top: .6em; }
.prose ul, .prose ol { display: grid; gap: .5em; }
.prose ul li { position: relative; padding-inline-start: 22px; }
.prose ul li::before { content: ""; position: absolute; inset-inline-start: 0; top: .78em; width: 6px; height: 6px; background: var(--leaf-2); }
.prose ol { counter-reset: n; }
.prose ol li { counter-increment: n; position: relative; padding-inline-start: 30px; }
.prose ol li::before { content: counter(n) "."; position: absolute; inset-inline-start: 0; color: var(--ink-3); font-weight: 500; }
.prose a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--leaf-2); text-decoration-thickness: 1.5px; text-underline-offset: 4px; }
.prose strong { color: var(--ink); font-weight: 500; }
.prose .u10-note, .prose blockquote { padding: 18px 20px; background: var(--stone); border-inline-start: 3px solid var(--leaf-2); font-size: var(--fs-ui); color: var(--ink-2); }
.prose > :first-child { margin-top: 0; }

/* ---------- CTA band (inner pages) ---------- */
.ctaband { background: var(--stone); padding-block: clamp(64px, 8vw, 120px); }
.ctaband__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px 64px; align-items: end; }
.ctaband__title { font-size: var(--fs-h2); line-height: 1.14; }
.ctaband__text { margin-top: 18px; max-width: 30em; color: var(--ink-2); font-size: var(--fs-lead); line-height: 1.75; }
.ctaband .actions { justify-content: flex-end; }
.ctaband--paper { background: var(--paper); }
@media (max-width: 1023px) { .ctaband__grid { grid-template-columns: minmax(0, 1fr); } .ctaband .actions { justify-content: flex-start; } }
@media (max-width: 599px) { .ctaband .actions .btn { flex: 1 1 100%; } }

/* ---------- Service detail ---------- */
.scope { padding-block: var(--sec); }
.scope__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(40px, 6vw, 112px); align-items: start; }
.scope__title { font-size: clamp(1.7rem, 1.25rem + 1.5vw, 2.5rem); line-height: 1.18; }
.scope__list { margin-top: 30px; border-top: 1px solid var(--line-2); counter-reset: s; }
.scope__list li { counter-increment: s; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; padding-block: 16px; border-bottom: 1px solid var(--line); font-size: var(--fs-body); color: var(--ink); line-height: 1.6; }
.scope__list li::before { content: counter(s, decimal-leading-zero); font: 500 13.5px/1.9 var(--f-t); color: var(--ink-3); }
.scope__aside { position: sticky; top: calc(var(--hdr) + 32px); }
/* The opening sentence of each service text works as its intro. */
.scope .prose > p:first-child { font-size: var(--fs-lead); line-height: 1.75; color: var(--ink); }
.discuss { background: var(--stone); padding-block: var(--sec); }
.discuss .cut { --cut-bg: var(--stone); }
.discuss__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 112px); align-items: center; }
.qlist { margin-top: 32px; display: grid; }
.qlist li { position: relative; padding-block: 18px; padding-inline-start: 34px; border-top: 1px solid var(--line-2); font: 400 var(--fs-body)/1.7 var(--f-t); color: var(--ink); }
.qlist li::before { content: "؟"; position: absolute; inset-inline-start: 2px; top: 16px; font: 700 20px/1.3 var(--f-d); color: var(--leaf-ink); }
.discuss__media { margin: 0; aspect-ratio: 4 / 5; }
/* «مجالات أخرى»: suggestions at the end of the page, after the request form. Whole card is the link. */
.others { padding-block: clamp(56px, 7vw, 112px); }
.others__head { margin-bottom: clamp(28px, 3.5vw, 48px); }
.others__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; }
.ocard { position: relative; }
.ocard__img { aspect-ratio: 4 / 3; overflow: hidden; border-radius: 4px; background: var(--stone-2); }
.ocard__img .ph { transition: transform 1s var(--ease); }
.ocard:hover .ocard__img .ph { transform: scale(1.04); }
.ocard__t { margin-top: 16px; font: 650 1.2rem/1.35 var(--f-d); }
.ocard__t a::after { content: ""; position: absolute; inset: 0; }
.ocard:hover .ocard__t a { color: var(--ink-hover); }
.ocard__p { margin-top: 6px; font-size: var(--fs-small); color: var(--ink-3); line-height: 1.6; }
.ocard__go { display: none; }
.sd-form { padding-block: var(--sec); background: var(--stone); }
@media (max-width: 1023px) {
  .scope__grid, .discuss__grid { grid-template-columns: minmax(0, 1fr); }
  .scope__aside { position: static; }
  .discuss__media { aspect-ratio: 16 / 10; }
  .others__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .others__list { grid-template-columns: minmax(0, 1fr); gap: 0; border-bottom: 1px solid var(--line); }
  .ocard { display: grid; grid-template-columns: 96px minmax(0, 1fr) 20px; gap: 16px; align-items: center; min-height: 104px; padding-block: 14px; border-top: 1px solid var(--line); }
  .ocard__img { aspect-ratio: 1; border-radius: 6px; }
  .ocard__t { margin-top: 0; font-size: 1.1rem; }
  .ocard__p { margin-top: 2px; font-size: var(--fs-micro); }
  .ocard__go { display: block; color: var(--ink-2); }
  .ocard:active { background: var(--stone); }
}

/* ---------- About ---------- */
.belief { padding-block: var(--sec); }
.belief__grid { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 6vw, 112px); }
.belief__title { font-size: var(--fs-h2); line-height: 1.14; }
.vm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 clamp(28px, 4vw, 64px); margin-top: clamp(48px, 6vw, 88px); }
.vm__item { padding-top: 26px; border-top: 1px solid var(--ink); }
.vm__label { font: 500 var(--fs-small)/1 var(--f-t); color: var(--ink-3); }
.vm__text { margin-top: 18px; font: 600 clamp(1.35rem, 1.1rem + .9vw, 1.9rem)/1.45 var(--f-d); color: var(--ink); }
.values { background: var(--stone); padding-block: var(--sec); }
.values__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.val { padding-top: 26px; border-top: 1px solid var(--line-2); }
.val .mark { margin-bottom: 22px; }
.val__t { font: 650 1.45rem/1.3 var(--f-d); }
.val__p { margin-top: 10px; color: var(--ink-2); font-size: var(--fs-body); line-height: 1.75; }
@media (max-width: 1023px) {
  .belief__grid { grid-template-columns: minmax(0, 1fr); }
  .values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .vm, .values__grid { grid-template-columns: minmax(0, 1fr); }
  .vm__item + .vm__item { margin-top: 36px; }
  .values__grid { gap: 0; }
  .val { padding-block: 22px 26px; }
  .val .mark { display: none; }
}

/* ---------- Legal / generic pages ---------- */
.page-body { padding-block: 0 var(--sec); }
.page-body .prose { max-width: 46rem; }

/* ---------- 404 / search ---------- */
.lost { padding-block: clamp(48px, 8vw, 140px) var(--sec); }
.lost__links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 36px; }
.results { display: grid; margin-top: 12px; border-top: 1px solid var(--line); }
.results li { padding-block: 22px; border-bottom: 1px solid var(--line); }
.results a { font: 650 1.4rem/1.4 var(--f-d); }
.results p { margin-top: 6px; color: var(--ink-2); }
.searchform { display: flex; gap: 10px; margin-top: 28px; max-width: 34rem; }
.searchform input { flex: 1; min-width: 0; min-height: 54px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: var(--r); }
.searchform .btn { flex: none; }

/* ---------- Footer ----------
   Identity · روابط مهمة · خدماتنا · تواصل معنا عبر, then ©. ≥1200: four columns. 768–1199: identity above three
   columns. <768: every block full width, one under the other. No CTA, no sticky elements. The privacy notice is
   linked beside each form's submit button, where data is collected. */
.ftr { background: var(--dark); color: var(--on-dark-2); padding-block: clamp(56px, 7vw, 104px) 28px; }
.ftr__top { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 2.4fr) minmax(0, 3.4fr) minmax(0, 3.2fr); gap: 40px clamp(28px, 3vw, 48px); }
.ftr__brand { display: inline-block; }
.ftr__tag { margin-top: 20px; max-width: 19em; font-size: var(--fs-ui); line-height: 1.75; }
.ftr__h { margin-bottom: 10px; font: 500 var(--fs-small)/1.5 var(--f-t); color: #fff; }
.ftr__list { display: grid; }
.ftr__list a { display: inline-flex; align-items: center; min-height: 40px; font-size: var(--fs-ui); line-height: 1.45; color: var(--on-dark-2); transition: color .2s; }
.ftr__list a:hover, .ftr__base a:hover { color: #fff; }
.ftr .channels { gap: 2px; margin-top: 0; }
.ftr .channel { min-height: 52px; }
.ftr__base { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 32px; margin-top: clamp(48px, 6vw, 88px); padding-top: 18px; border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-micro); line-height: 1.7; color: #95a8a2; }
.ftr__base a { display: inline-flex; align-items: center; min-height: 44px; color: #b9c6c1; }
@media (max-width: 1199px) {
  .ftr__top { grid-template-columns: minmax(0, 2.4fr) minmax(0, 3.4fr) minmax(0, 3.2fr); }
  .ftr__id { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .ftr { padding-block: 56px calc(18px + env(safe-area-inset-bottom)); }
  .ftr__top { grid-template-columns: minmax(0, 1fr); gap: 36px; }
  .ftr__tag { margin-top: 16px; }
  .ftr__h { margin-bottom: 6px; }
  .ftr__base { margin-top: 44px; }
}

/* ---------- Blog: article card (index grid, homepage carousel, related) ----------
   Photograph → Beiruti title → short description. The whole card is one link (stretched title link):
   hover zooms the photo and underlines the title; keyboard focus draws a ring around the card. */
.pcard { position: relative; display: flex; flex-direction: column; height: 100%; }
.pcard__img { position: relative; flex: none; aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; background: var(--stone-2); }
.pcard__img .ph { transition: transform 1s var(--ease); }
.pcard:hover .pcard__img .ph { transform: scale(1.035); }
.pcard__ph { display: grid; place-items: center; width: 100%; height: 100%; background: var(--stone); }
.pcard__ph .brand__mark { width: 28%; background: var(--line-2); }
.pcard__body { display: flex; flex-direction: column; flex: 1 1 auto; padding-top: 20px; }
.pcard__t { font: 650 clamp(1.2rem, 1.1rem + .35vw, 1.4rem)/1.45 var(--f-d); color: var(--ink); }
.pcard__link { text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 1.5px; text-underline-offset: 6px; transition: color .2s, text-decoration-color .2s; }
.pcard__link::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.pcard:hover .pcard__link { color: var(--ink-hover); text-decoration-color: var(--leaf-2); }
.pcard__x { margin-top: 10px; font-size: .9375rem; line-height: 1.75; color: var(--ink-2); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
@supports selector(:has(a)) {
  .pcard__link:focus-visible { outline: none; }
  .pcard:has(.pcard__link:focus-visible) { outline: 2.5px solid var(--ink); outline-offset: 6px; border-radius: 6px; }
}

/* ---------- Blog index / category archive ---------- */
.blist { padding-block: 0 var(--sec); }
.bgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(44px, 4.4vw, 64px) clamp(20px, 2.2vw, 32px); }
@media (max-width: 1023px) { .bgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .bgrid { grid-template-columns: minmax(0, 1fr); gap: 44px; } }
.pager { margin-top: clamp(48px, 5vw, 80px); padding-top: 24px; border-top: 1px solid var(--line); }
.pager ul { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.pager li:has(.prev) { margin-inline-end: auto; }
.pager li:has(.next) { margin-inline-start: auto; }
.pager .page-numbers { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-width: 44px; min-height: 44px; padding: 0 12px; border-radius: var(--r); font: 500 var(--fs-ui)/1 var(--f-t); color: var(--ink-2); font-variant-numeric: tabular-nums; transition: background-color .2s, color .2s; }
.pager a.page-numbers:hover { background: var(--stone); color: var(--ink); }
.pager .current { background: var(--ink); color: #fff; }
.pager .dots { min-width: 24px; padding: 0; }
.empty { max-width: 44rem; padding: clamp(28px, 4vw, 56px); background: var(--stone); border-radius: 12px; }
.empty__t { font: 650 clamp(1.4rem, 1.2rem + .6vw, 1.8rem)/1.3 var(--f-d); color: var(--ink); }
.empty__p { margin-top: 10px; max-width: 34em; color: var(--ink-2); }
.empty .actions { margin-top: 26px; }

/* ---------- Homepage: latest articles carousel ----------
   The track starts on the content grid and runs to the viewport edge, so the next card visibly peeks out.
   Native scrolling + scroll-snap (touch, trackpad, keyboard when focused); arrows move one screenful. */
.bhome { padding-block: var(--sec); }
.process + .bhome { padding-top: 0; }
.process + .bhome .bhome__head { padding-top: var(--sec); border-top: 1px solid var(--line); }
.bhome__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: clamp(32px, 4vw, 56px); }
.cnav { display: flex; flex: none; gap: 10px; }
.cnav[hidden] { display: none; }
.cnav__btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--r); color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line-2); transition: box-shadow .2s, opacity .2s; }
.cnav__btn:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.cnav__btn[aria-disabled="true"] { opacity: .35; cursor: default; box-shadow: inset 0 0 0 1.5px var(--line-2); }
.arrow--back { transform: scaleX(-1); }
.carousel { --cg: clamp(16px, 2vw, 28px); display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * var(--cg)) / 3.3); gap: var(--cg);
  padding: 4px var(--side) 12px; scroll-padding-inline: var(--side); overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none; }
.carousel::-webkit-scrollbar { display: none; }
.carousel__item { min-width: 0; scroll-snap-align: start; }
.carousel:focus-visible { outline: 2.5px solid var(--ink); outline-offset: -3px; border-radius: 6px; }
.bhome__foot { margin-top: clamp(24px, 3vw, 40px); }
@media (max-width: 1099px) { .carousel { grid-auto-columns: calc((100% - 2 * var(--cg)) / 2.3); } }
@media (max-width: 767px) {
  .carousel { grid-auto-columns: calc((100% - var(--cg)) / 1.16); }
  .cnav { display: none; }
}

/* ---------- Single article: a calm Arabic reading column ---------- */
.article__head { padding-block: clamp(48px, 7vw, 112px) clamp(28px, 3.5vw, 48px); }
.article__col { max-width: 46rem; margin-inline: auto; }
.article__title { font-size: clamp(2rem, 1.35rem + 2.4vw, 3.4rem); line-height: 1.16; }
.article__lead { margin-top: 20px; font-size: var(--fs-lead); line-height: 1.8; color: var(--ink-2); }
.article__meta { margin-top: 18px; font: 400 var(--fs-small)/1.5 var(--f-t); color: var(--ink-3); }
.article__media { margin: 0 auto; max-width: calc(1100px + 2 * var(--gut)); }
.article__media .ph { height: auto; aspect-ratio: 16 / 9; border-radius: 6px; background: var(--stone-2); }
.article__body { padding-block: clamp(36px, 4.5vw, 64px) var(--sec); }
.article__body .prose { max-width: 46rem; margin-inline: auto; }
.eyebrow__link { display: inline-flex; align-items: center; min-height: 32px; color: inherit; text-decoration: underline; text-decoration-color: transparent; text-underline-offset: 5px; transition: color .2s, text-decoration-color .2s; }
.eyebrow__link:hover { color: var(--ink); text-decoration-color: var(--leaf-2); }
@media (max-width: 599px) { .article__media { padding-inline: 0; } .article__media .ph { aspect-ratio: 3 / 2; border-radius: 0; } }

.prose--article { font-size: clamp(1.0625rem, 1rem + .3vw, 1.1875rem); line-height: 2; }
.prose--article > * + * { margin-top: 1.25em; }
.prose--article h2 { margin-top: 2em; font-size: clamp(1.5rem, 1.25rem + .9vw, 2rem); }
.prose--article h3 { margin-top: 1.7em; font-size: clamp(1.25rem, 1.15rem + .4vw, 1.45rem); }
.prose--article h2 + *, .prose--article h3 + * { margin-top: .55em; }
.prose figure, .prose .wp-block-image { margin-inline: 0; }
.prose--article figure, .prose--article .wp-block-image, .prose--article .wp-block-table { margin-block: 2em; }
.prose img { height: auto; border-radius: 4px; }
.prose figcaption, .prose .wp-element-caption { margin-top: 10px; font: 400 var(--fs-small)/1.6 var(--f-t); color: var(--ink-3); }
.prose .aligncenter { margin-inline: auto; text-align: center; }
.prose .aligncenter img { margin-inline: auto; }
.prose .alignleft { float: left; max-width: 50%; margin: .4em 1.6em 1em 0; }
.prose .alignright { float: right; max-width: 50%; margin: .4em 0 1em 1.6em; }
.prose blockquote p + p { margin-top: .8em; }
.prose blockquote cite, .prose .wp-block-quote cite { display: block; margin-top: 10px; font: 400 var(--fs-small)/1.5 var(--f-t); font-style: normal; color: var(--ink-3); }
.prose--article blockquote { padding: 22px 24px; font-size: 1.0625rem; line-height: 1.9; }
.prose .wp-block-pullquote { padding: 28px 0; border-block: 1px solid var(--line-2); font: 600 clamp(1.3rem, 1.15rem + .6vw, 1.7rem)/1.6 var(--f-d); color: var(--ink); }
.prose .wp-block-pullquote blockquote { padding: 0; background: none; border: 0; font: inherit; color: inherit; }
.prose .wp-block-table { overflow-x: auto; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-ui); line-height: 1.65; }
.prose th, .prose td { padding: 12px 14px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
.prose thead th { font-weight: 500; color: var(--ink); background: var(--stone); border-bottom-color: var(--line-2); }
.prose hr, .prose .wp-block-separator { height: 1px; margin-block: 2.4em; border: 0; background: var(--line-2); }
.prose .wp-block-gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.prose .wp-block-gallery figure { margin: 0; }
.prose .wp-block-gallery img { width: 100%; height: 100%; object-fit: cover; }
.prose .wp-block-embed__wrapper { position: relative; aspect-ratio: 16 / 9; }
.prose .wp-block-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.prose .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; }
.prose .wp-block-button__link { display: inline-flex; align-items: center; min-height: 52px; padding: 0 24px; border-radius: var(--r); background: var(--ink); color: #fff; font: 500 var(--fs-ui)/1.2 var(--f-t); text-decoration: none; }
.prose .wp-block-button__link:hover { background: var(--ink-hover); }
.prose code { padding: .1em .35em; border-radius: 4px; background: var(--stone); font: .9em/1.6 ui-monospace, Consolas, monospace; direction: ltr; unicode-bidi: isolate; }
.prose pre { overflow-x: auto; padding: 16px 18px; border-radius: 6px; background: var(--stone); direction: ltr; text-align: left; font-size: .875rem; line-height: 1.6; }
.prose pre code { padding: 0; background: none; }
.prose iframe, .prose video { max-width: 100%; }
.prose::after { content: ""; display: table; clear: both; }
@media (max-width: 599px) { .prose .alignleft, .prose .alignright { float: none; max-width: 100%; margin-inline: 0; } .prose .wp-block-gallery.columns-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Related articles (end of an article) ---------- */
.related { background: var(--stone); padding-block: clamp(56px, 7vw, 112px); }
.related__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 32px; margin-bottom: clamp(28px, 3.5vw, 48px); }

/* ---------- Editors-only flag ---------- */
.editor-flag { width: min(100% - 2 * var(--gut), var(--wrap) - 2 * var(--gut)); margin: 0 auto 24px; padding: 10px 14px; border-radius: var(--r); background: #fff4d6; color: #6b4a00; font-size: 14px; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes gap-in { from { transform: scaleX(0); } to { transform: none; } }
  .js .hero__eyebrow, .js .hero__title, .js .hero__lead, .js .hero__actions { animation: rise .8s var(--ease) both; }
  .js .hero__title { animation-delay: .06s; }
  .js .hero__lead { animation-delay: .16s; }
  .js .hero__actions { animation-delay: .24s; }
  .js .hero__media .cut__gap { transform-origin: 50% 50%; animation: gap-in 1.1s .2s var(--ease) both; }
  .reveal-on [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(18px); }
  /* Base scale for the desktop scroll-linked photos is set from first paint, so GSAP never causes a visible jump. */
  @media (min-width: 1024px) {
    .hero__media img { transform: scale(1.08); }
    [data-parallax] img { transform: scale(1.1); }
  }
  .reveal-on [data-reveal] { transition: opacity .9s var(--ease), transform .9s var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* ---------- Print ---------- */
@media print {
  .hdr, .mnav, .ftr__top, .u10-form, .cut__gap, .cnav, .bhome { display: none !important; }
  body { color: #000; }
}

/* ---------- Small helpers ---------- */
.btn__arrow { flex: none; width: 20px; height: 12px; background: currentColor; transition: transform .35s var(--ease);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M19 6H1.6M6.4 1.2 1.6 6l4.8 4.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 12'%3E%3Cpath d='M19 6H1.6M6.4 1.2 1.6 6l4.8 4.8' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; }
.btn:hover .btn__arrow { transform: translateX(-4px); }

/* ---------- Editor palette classes (theme.json colours, in case editors colour text in an article) ---------- */
.has-paper-color { color: var(--paper) !important; } .has-paper-background-color { background-color: var(--paper) !important; }
.has-stone-color { color: var(--stone) !important; } .has-stone-background-color { background-color: var(--stone) !important; }
.has-ink-color { color: var(--ink) !important; } .has-ink-background-color { background-color: var(--ink) !important; }
.has-muted-color { color: var(--ink-3) !important; } .has-muted-background-color { background-color: var(--ink-3) !important; }
.has-leaf-color { color: var(--leaf-ink) !important; } .has-leaf-background-color { background-color: var(--leaf) !important; }
.has-text-align-center { text-align: center; } .has-text-align-left { text-align: left; } .has-text-align-right { text-align: right; }