/* Al-Alousi Group — landing page styles
   Direction: "the printed annual". The page is laid out like the audited report the firm signs:
   a masthead, one column line (the axis) every heading starts on, and whole pages of flat colour.
   No cards, no rules, no shadows at rest. Logical properties only, so RTL and LTR share one file. */

:root {
  --navy: #0E1D33;          /* colour pages, footer */
  --ink: #142945;           /* headings and running text on paper */
  --paper: #FBFBFA;         /* page ground */
  --stone: #ECEEF1;         /* one tone step from paper */
  --white: #FFFFFF;
  --orange: #F17E21;        /* brand: the action and the orange colour page */
  --orange-hover: #F59346;
  --on-navy: #F5F6F8;
  --on-navy-2: #C5CFDC;     /* secondary on navy, 9:1 */
  --note: #4A5568;          /* secondary notes only, 7.4:1 on paper */
  --ok: #1F6B45;
  --err: #A1281C;

  --font: "IBM Plex Sans Arabic", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* five sizes do all the work */
  --t-display: clamp(2.5rem, 1.2rem + 4.4vw, 5.5rem);
  --t-title:   clamp(1.875rem, 1.2rem + 2.4vw, 3.5rem);
  --t-sub:     clamp(1.25rem, 1.05rem + .7vw, 1.75rem);
  --t-body:    1.125rem;
  --t-small:   .9375rem;

  --wrap: 1360px;
  --gutter: clamp(16px, 3.4vw, 48px);
  --gap: clamp(24px, 4vw, 72px);
  --section: clamp(88px, 11vw, 168px);
  --ease: cubic-bezier(.2, .7, .1, 1);
  --hex: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);   /* flat-topped hexagon: the honeycomb from the brand profile */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-block-start: 80px; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.75;
}
:lang(en) body, body:lang(en) { line-height: 1.6; }

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; line-height: 1.25; text-wrap: balance; }
:lang(en) :is(h1, h2, h3) { line-height: 1.1; letter-spacing: -.02em; }
p, figure, blockquote, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
.num { font-variant-numeric: tabular-nums lining-nums; }
.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.wrap { max-inline-size: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }

/* the axis: a 42 / 58 split every section hangs from */
.axis { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: start; }
.axis > .side { grid-column: 1; }
.axis > .main { grid-column: 2; }
.axis > .full { grid-column: 1 / -1; }
/* a heading with nothing beside it starts at the page edge (right in Arabic, left in English) */
.axis > .main:only-child { grid-column: 1 / -1; }
@media (max-width: 900px) {
  .axis { grid-template-columns: minmax(0, 1fr); }
  .axis > .side, .axis > .main, .axis > .full { grid-column: 1; }
}

section { padding-block: var(--section); }
.title { font-size: var(--t-title); }
.lead { font-size: var(--t-sub); line-height: 1.6; margin-block-start: 24px; max-inline-size: 40ch; font-weight: 400; }
.head { margin-block-end: clamp(48px, 6vw, 88px); }
.caption { font-size: var(--t-small); color: var(--note); line-height: 1.6; margin-block-start: 14px; max-inline-size: 46ch; }

.skip {
  position: absolute; inset-inline-start: 16px; inset-block-start: -80px;
  background: var(--ink); color: #fff; padding: 12px 16px; z-index: 100;
}
.skip:focus { inset-block-start: 12px; }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ---------- buttons and links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-block-size: 56px; padding-inline: 28px; border-radius: 0;
  font: inherit; font-weight: 700; font-size: 1.0625rem; text-decoration: none; cursor: pointer;
  border: 0; transition: background-color .2s, color .2s, transform .12s var(--ease);
}
.btn:active { transform: translateY(1px) scale(.99); }
.btn svg { inline-size: 22px; block-size: 22px; flex: none; }
.btn-primary { background: var(--orange); color: var(--navy); }
.btn-primary:hover { background: var(--orange-hover); }
.btn-ink { background: var(--ink); color: var(--white); }
.btn-ink:hover { background: var(--navy); }
.btn-paper { background: var(--paper); color: var(--ink); }
.btn-paper:hover { background: var(--white); }
.btn-quiet { background: var(--stone); color: var(--ink); }
.btn-quiet:hover { background: #DFE3E8; }
.btn[disabled] { opacity: .6; cursor: progress; }

.go {
  display: inline-flex; align-items: center; min-block-size: 44px; font-weight: 700; text-decoration: underline;
  text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 8px;
  transition: text-underline-offset .2s var(--ease), color .2s;
}
.go:hover { text-underline-offset: 4px; }

/* ---------- header ---------- */
.site-header { position: sticky; inset-block-start: 0; z-index: 50; background: var(--paper); }
.site-header .wrap { display: flex; align-items: center; gap: 24px; min-block-size: 76px; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; margin-inline-end: auto; }
.brand img { inline-size: 40px; block-size: 40px; }
.brand-name { font-weight: 700; font-size: 1.2rem; line-height: 1.2; display: block; }
.nav ul { display: flex; gap: 4px; }
.nav a { display: flex; align-items: center; min-block-size: 44px; padding-inline: 12px; text-decoration: none; font-size: 1rem; }
.nav a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 8px; }
.lang { font-weight: 700; }
.header-cta { min-block-size: 48px; padding-inline: 20px; flex: none; }
.menu-btn {
  display: none; flex: none; inline-size: 48px; block-size: 48px; border: 0; background: var(--stone); color: var(--ink);
  cursor: pointer; align-items: center; justify-content: center;
}
.menu-btn svg { inline-size: 24px; block-size: 24px; }
@media (max-width: 1000px) {
  .menu-btn { display: inline-flex; }
  .header-cta span { display: none; }
  .header-cta { padding-inline: 14px; }
  .nav { position: absolute; inset-inline: 0; inset-block-start: 100%; background: var(--paper); display: none;
    box-shadow: 0 24px 40px rgb(14 29 51 / .14); }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; gap: 0; padding: 8px var(--gutter) 20px; }
  .nav a { min-block-size: 56px; font-size: 1.25rem; padding-inline: 0; }
}

/* ---------- hero: a dark stage, the tablet lit by a moving lamp (hero-gl.js) ---------- */
.stage { position: relative; isolation: isolate; overflow: hidden; background: var(--navy); color: var(--on-navy);
  min-block-size: clamp(640px, calc(100svh - 76px), 980px); display: grid; padding-block: 0; }
.stage-canvas { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; display: block; z-index: -1;
  opacity: 0; transition: opacity .4s; }
.stage.gl-on .stage-canvas { opacity: 1; }
.stage-grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--gap);
  padding-block: clamp(40px, 6vw, 96px); align-items: end; }
.stage-copy { grid-column: 1; grid-row: 1; }
.stage-figure { grid-column: 2; grid-row: 1; align-self: center; display: grid; gap: 28px; }
.stage-object { aspect-ratio: 1200 / 1096; inline-size: min(100%, 64svh); justify-self: center; position: relative; }
.stage-object img { inline-size: 100%; block-size: 100%; object-fit: contain; transition: opacity .8s; }
.stage.gl-on .stage-object img, .gl .stage-object img { opacity: 0; }
.stage { background: #070F1C; }  /* the room before the lamp */
/* the tablet sits on the left in both languages (Arabic gets this from RTL order) */
:lang(en) .stage-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
:lang(en) .stage-figure { grid-column: 1; }
:lang(en) .stage-copy { grid-column: 2; }
.stage-label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 20px; align-items: end; }
.since { display: flex; flex-direction: column; line-height: 1.1; }
.since span { font-size: 1rem; color: var(--on-navy-2); }
.since strong { font-size: clamp(2.75rem, 1.5rem + 3.2vw, 4.75rem); line-height: .95; color: var(--orange); letter-spacing: -.02em; }
.stage-label .caption { margin: 0; color: var(--on-navy-2); font-size: .875rem; max-inline-size: 40ch; }
.hero h1 { font-size: clamp(2.5rem, 1rem + 4vw, 4.75rem); color: var(--on-navy); max-inline-size: 13em; }
.hero .lead { max-inline-size: 46ch; font-size: clamp(1.125rem, 1rem + .4vw, 1.3125rem); margin-block-start: 20px; color: var(--on-navy-2); }
.hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-block-start: 32px; }
.btn-night { background: #1C2F4C; color: var(--on-navy); }
.btn-night:hover { background: #26405F; }
.hero-note { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 24px; margin-block-start: 16px; font-size: var(--t-small); color: var(--on-navy-2); }
.hero-note a { display: inline-flex; align-items: center; min-block-size: 44px; color: var(--on-navy); font-weight: 700; text-decoration: none; }
.hero-note a:hover { text-decoration: underline; text-decoration-color: var(--orange); }
@media (max-width: 480px) { .hero h1 { font-size: clamp(1.875rem, 8.6vw, 2.25rem); } }
:lang(en) .hero h1 { font-size: clamp(1.75rem, .7rem + 3.4vw, 3.75rem); max-inline-size: 15em; }
.stage + .figures { padding-block-start: clamp(56px, 7vw, 112px); }
@media (max-width: 900px) {
  .stage { min-block-size: 0; }
  .stage-grid, :lang(en) .stage-grid { grid-template-columns: minmax(0, 1fr); padding-block: 24px 48px; }
  .stage-figure, :lang(en) .stage-figure { grid-column: 1; grid-row: 1; gap: 16px; }
  .stage-copy, :lang(en) .stage-copy { grid-column: 1; grid-row: 2; margin-block-start: 28px; }
  .stage-object { inline-size: min(78%, 40svh); }
  .stage-label .caption { display: none; }
  .stage-label { grid-template-columns: auto; justify-content: start; text-align: start; }
  .since { flex-direction: row; align-items: baseline; gap: 10px; }
  .since strong { font-size: 2rem; }
}

/* ---------- colour pages ---------- */
.navy { background: var(--navy); color: var(--on-navy); }
.navy .lead, .navy .caption { color: var(--on-navy-2); }
.orange { background: var(--orange); color: var(--navy); }
.stone { background: var(--stone); }

/* figures: the firm's numbers next to the oldest accounts ever kept */
.plate { background: #E6E5E3; }
.plate img { inline-size: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.figs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) var(--gap); margin-block-start: clamp(40px, 5vw, 72px); }
.figs div { display: flex; flex-direction: column-reverse; justify-content: flex-end; gap: 8px; }
.figs dd { font-size: var(--t-display); font-weight: 700; line-height: 1; color: var(--orange); letter-spacing: -.02em; }
.figs dt { font-size: var(--t-body); color: var(--on-navy-2); max-inline-size: 26ch; }
.figures { position: relative; overflow: hidden; }
.figures::after { content: ""; position: absolute; z-index: 0; pointer-events: none; inline-size: 210px; aspect-ratio: 339 / 312;
  inset-inline-end: -48px; inset-block-start: -36px; background: url("../img/honeycomb.svg") no-repeat center / contain; }
:lang(en) .figures::after { transform: scaleX(-1); }
.figures > .wrap { position: relative; z-index: 1; }
@media (max-width: 900px) { .figures::after { display: none; } }
.figures .accr { margin-block-start: clamp(40px, 5vw, 72px); font-size: var(--t-sub); line-height: 1.5; max-inline-size: 34ch; }
@media (max-width: 900px) { .figures .side { margin-block-start: 48px; order: 2; } .plate img { aspect-ratio: 4 / 3; } }
@media (max-width: 520px) { .figs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- services: heading and index stay put on the left, services scroll beside them ---------- */
.svc { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: var(--gap); align-items: start; }
/* heading on the reading side: right in Arabic, left in English (grid follows dir) */
.svc-head { grid-column: 1; grid-row: 1; }
.service-list { grid-column: 2; grid-row: 1; }
.svc-head { position: sticky; inset-block-start: 112px; }
.svc-head .lead { max-inline-size: 34ch; }
.svc-index { margin-block-start: 40px; }
.svc-index ul { display: grid; gap: 2px; }
.svc-index a { display: flex; align-items: center; gap: 14px; min-block-size: 44px; text-decoration: none; font-weight: 700;
  color: var(--note); transition: color .2s; }
.svc-index a::before { content: ""; inline-size: 12px; block-size: 10.4px; background: var(--stone); clip-path: var(--hex); flex: none; transition: background-color .2s, transform .2s var(--ease); }
.svc-index a:hover, .svc-index a.on { color: var(--ink); }
.svc-index a.on::before { background: var(--orange); transform: scale(1.3); }
.service-list { display: grid; gap: 4px; }
.service-list > li { background: var(--stone); padding: clamp(24px, 3vw, 40px); scroll-margin-block-start: 100px; }
.service-list h3 { font-size: var(--t-sub); margin-block-end: 12px; }
.svc-body > p { max-inline-size: 60ch; }
.service-list .go { margin-block-start: 12px; }
.points { margin-block-start: 16px; display: grid; gap: 8px; max-inline-size: 60ch; }
.points li { position: relative; padding-inline-start: 24px; line-height: 1.6; }
.points li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .62em; inline-size: 12px; block-size: 10.4px; background: var(--orange); clip-path: var(--hex); }
.iso { margin-block-start: 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; max-inline-size: 60ch; }
.iso li { background: var(--paper); padding: 12px 14px; line-height: 1.4; }
.iso b { display: block; font-size: 1.0625rem; }
@media (max-width: 900px) {
  .svc { grid-template-columns: minmax(0, 1fr); }
  .svc-head { position: static; grid-column: 1; grid-row: 1; margin-block-end: 32px; }
  .svc-index { display: none; }
  /* phones: one swipeable row instead of a long column */
  .service-list { grid-column: 1; grid-row: 2; }
  .service-list { grid-auto-flow: column; grid-auto-columns: 86%; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter); padding-inline: var(--gutter); padding-block-end: 12px;
    margin-inline: calc(var(--gutter) * -1); scrollbar-width: thin; }
  .service-list > li { scroll-snap-align: start; padding: 24px 20px; }
  .iso { grid-template-columns: minmax(0, 1fr); }
}
.swipe-hint { display: none; }
@media (max-width: 900px) { .swipe-hint { display: block; margin-block-start: 12px; font-size: var(--t-small); color: var(--note); } }

/* ---------- why + licences: the orange page ---------- */
.statement { font-size: clamp(1.375rem, 1.1rem + 1.2vw, 2.25rem); font-weight: 700; line-height: 1.45; max-inline-size: 26ch; }
.reasons { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px var(--gap); margin-block-start: clamp(48px, 6vw, 80px); }
.reason-ico { display: block; inline-size: 30px; block-size: 30px; color: var(--navy); opacity: .7; margin-block-end: 14px; }
.reasons h3 { font-size: var(--t-sub); margin-block-end: 8px; }
.licences { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-block-start: clamp(64px, 8vw, 120px); }
.licences li { background: var(--navy); color: var(--on-navy); padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; gap: 12px; }
.licences .lic-label { font-size: var(--t-small); color: var(--on-navy-2); }
.licences .lic-no { font-size: var(--t-display); font-weight: 700; line-height: 1; color: var(--orange); }
.licences p { line-height: 1.55; }
.licences-title { font-size: var(--t-sub); margin-block-start: clamp(64px, 8vw, 120px); }
.licences-title + .licences { margin-block-start: 24px; }
@media (max-width: 900px) { .reasons { margin-block-start: 48px; } .licences { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 600px) { .reasons { grid-template-columns: minmax(0, 1fr); } }

/* ---------- partners ---------- */
.odoo { display: grid; place-items: center; padding-block: 24px; }
.odoo img { inline-size: min(100%, 260px); }
.partners h3 { font-size: var(--t-sub); max-inline-size: 22ch; }
.partners .main p { margin-block-start: 12px; max-inline-size: 56ch; }
/* partners: plain list, one-colour transparent logos, no boxes */
.partner-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(40px, 5vw, 64px) var(--gap); margin-block-start: clamp(56px, 7vw, 96px); }
.partner { display: grid; gap: 14px; align-content: start; }
.partner-logo img { display: block; block-size: 46px; inline-size: auto; max-inline-size: 180px; object-fit: contain; }
.partner-logo img[width="180"][height="180"] { block-size: 64px; }   /* square marks need more height to match the wide ones */
.partner h3 { font-size: 1.125rem; max-inline-size: none; }
.partner p { font-size: 1rem; line-height: 1.65; max-inline-size: 52ch; }
/* --w / --h are set per logo in the HTML so every logo covers about the same area, whatever its shape */
@media (max-width: 900px) { .partners .main { margin-block-start: 32px; } }
@media (max-width: 900px) { .partner-list { grid-template-columns: minmax(0, 1fr); } }

/* ---------- who we serve + how we work ---------- */
.audience li { font-size: var(--t-sub); font-weight: 700; line-height: 1.35; padding-block: 14px; display: flex; align-items: flex-start; gap: 16px; }
.aud-ico { flex: none; inline-size: 28px; block-size: 28px; margin-block-start: .15em; color: var(--navy); opacity: .7; }
.how .title { margin-block-end: 40px; }
.sequence { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.sequence li { background: var(--paper); padding: clamp(20px, 2.6vw, 32px); }
.sequence li:first-child { background: var(--navy); color: var(--on-navy); }
.sequence h3 { font-size: 1.25rem; margin-block-end: 8px; }
@media (max-width: 900px) { .how { margin-block-start: 72px; } }
@media (max-width: 520px) { .sequence { grid-template-columns: minmax(0, 1fr); } }

/* ---------- training ---------- */
.school { margin-block: clamp(48px, 6vw, 88px) 0; }
.school .frame { overflow: hidden; block-size: clamp(260px, 52vh, 560px); }
.school img { inline-size: 100%; block-size: 115%; object-fit: cover; object-position: 50% 60%; }
.school figcaption { margin-block-start: 14px; }
.benefits { display: grid; gap: 16px; }
.benefits li { font-size: 1.25rem; font-weight: 700; line-height: 1.45; padding-inline-start: 28px; position: relative; }
.benefits li::before { content: ""; position: absolute; inset-inline-start: 0; inset-block-start: .58em; inline-size: 14px; block-size: 12.1px; background: var(--orange); clip-path: var(--hex); }
.training-body { margin-block-start: clamp(56px, 7vw, 96px); }
.list-title { font-size: var(--t-sub); margin-block-end: 24px; }

.courses { display: grid; gap: 4px; }
.course { background: var(--stone); padding: 20px 24px; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) auto; gap: 8px 24px; align-items: center; }
.course h3 { font-size: 1.25rem; line-height: 1.35; }
.course dl { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: var(--t-small); line-height: 1.6; }
.course dt { color: var(--note); }
.course dd { font-weight: 700; }
.seats { grid-column: 1 / -1; font-size: var(--t-small); font-weight: 700; order: 5; }
.course .btn { min-block-size: 48px; padding-inline: 20px; }
@media (max-width: 760px) { .course { grid-template-columns: minmax(0, 1fr); } .course .btn { inline-size: 100%; } .seats { order: 0; } }
.mock-note { margin-block-start: 12px; font-size: var(--t-small); color: var(--note); }
.mock-note[hidden] { display: none; }

.tracks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); margin-block-start: clamp(72px, 8vw, 120px); }
.tracks h3 { font-size: var(--t-sub); margin-block-end: 20px; }
.tracks dt { font-weight: 700; margin-block-start: 20px; line-height: 1.45; }
.tracks dt:first-child { margin-block-start: 0; }
.tracks dd { line-height: 1.65; margin-block-start: 4px; }
.in-house { margin-block-start: clamp(48px, 6vw, 72px); font-size: var(--t-sub); line-height: 1.5; }
@media (max-width: 900px) { .tracks { grid-template-columns: minmax(0, 1fr); gap: 48px; } .training-body .main { margin-block-start: 56px; } }

/* ---------- verify: the navy page with one big field ---------- */
.verify-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px; margin-block-start: 8px; }
.verify-form label { grid-column: 1 / -1; font-weight: 700; margin-block-end: 8px; }
.verify-form input {
  min-block-size: 72px; padding-inline: 20px; font: inherit; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem); font-weight: 700;
  letter-spacing: .04em; color: var(--ink); background: var(--white); border: 0; border-radius: 0; inline-size: 100%;
}
.verify-form input::placeholder { color: #8A94A3; font-weight: 400; letter-spacing: 0; }
.verify-form .btn { min-block-size: 72px; padding-inline: 36px; font-size: 1.125rem; }
.verify-form input:focus { outline: 4px solid var(--orange); outline-offset: 0; }
.verify-form input[aria-invalid="true"] { outline: 4px solid #F2A39A; }
/* Turnstile bot check: invisible for most visitors; shows a checkbox under the field only when needed */
.verify-form .turnstile { grid-column: 1 / -1; order: 3; }
.verify-form .turnstile:not(:empty) { margin-block-start: 12px; }
[data-turnstile]:not(:empty) { margin-block-start: 16px; }
.result { margin-block-start: 20px; min-block-size: 1.6em; font-size: 1.125rem; }
.navy .result.ok { color: #9BE2B8; } .navy .result.err { color: #FFB4A9; }
.result strong { display: block; font-size: var(--t-sub); color: var(--on-navy); }
@media (max-width: 520px) { .verify-form { grid-template-columns: minmax(0, 1fr); } .verify-form .btn { min-block-size: 56px; } }
.verify .main { padding-block-start: 8px; }
@media (max-width: 900px) { .verify .main { margin-block-start: 40px; } }

/* ---------- verify page ---------- */
.verify-page { min-block-size: clamp(420px, 56svh, 640px); display: grid; align-items: center; }
.verify-points li + li { margin-block-start: 6px; }
.verify-help { margin-block-start: 28px; max-inline-size: 60ch; }

/* ---------- about ---------- */
.about .side img { inline-size: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.prose p { max-inline-size: 62ch; }
.prose p + p { margin-block-start: 20px; }
.mv { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; margin-block-start: clamp(40px, 5vw, 64px); }
.mv > div { background: var(--stone); padding: clamp(20px, 2.6vw, 32px); }
.mv h3 { font-size: 1.25rem; margin-block-end: 8px; }
@media (max-width: 900px) { .about .side { margin-block-end: 40px; } }
@media (max-width: 600px) { .mv { grid-template-columns: minmax(0, 1fr); } }

/* ---------- leadership ---------- */
.leaders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(56px, 6vw, 96px) var(--gap); }
.leader { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 0 24px; align-content: start; }
.leader > :not(.face) { grid-column: 2; }
.face { grid-row: 1 / span 3; inline-size: 96px; block-size: 96px; }
.monogram { display: grid; place-items: center; background: var(--navy); color: var(--orange); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.portrait { object-fit: cover; background: var(--stone); clip-path: var(--hex); block-size: 83px; align-self: start; }
.leader h3 { font-size: var(--t-sub); }
.leader .role { font-weight: 700; color: var(--note); margin-block-start: 4px; line-height: 1.5; }
.creds { margin-block-start: 6px; font-size: var(--t-small); font-weight: 700; direction: ltr; text-align: start; }
:lang(ar) .creds { text-align: end; }
.mini-stats { display: flex; flex-wrap: wrap; gap: 20px 32px; margin-block: 24px 20px; }
.mini-stats div { display: flex; flex-direction: column-reverse; justify-content: flex-end; max-inline-size: 18ch; }
.mini-stats dt { font-size: var(--t-small); color: var(--note); line-height: 1.45; }
.mini-stats dd { font-size: 2.25rem; font-weight: 700; line-height: 1.1; color: var(--ink); }
.leader .points { font-size: 1rem; }
.cv-title { font-size: 1.0625rem; font-weight: 700; color: var(--ink); margin-block: 24px 4px; }
.mini-stats + .cv-title { margin-block-start: 4px; }
@media (max-width: 960px) { .leaders { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) {
  .leader { grid-template-columns: minmax(0, 1fr); }
  .leader > :not(.face), .face { grid-column: 1; grid-row: auto; }
  .face { margin-block-end: 16px; inline-size: 80px; block-size: 80px; }
  .portrait { block-size: 69px; }
}

/* ---------- clients ---------- */
/* clients as a honeycomb: flat-topped hexagon cells (the brand motif), filled column by column,
   every other column dropped half a cell so the cells interlock. Desktop: 14 columns of 3 (42 logos). */
.logo-wall {
  --cols: 14; --rows: 3;
  --hw: min(150px, calc((min(100vw - 16px, var(--wrap)) - 2 * var(--gutter)) / (var(--cols) * .75 + .25)));   /* cell width, from the content width (16px leaves room for a scrollbar) */
  --hh: calc(var(--hw) * .866);                                                        /* cell height */
  display: grid; grid-auto-flow: column;
  grid-template-columns: repeat(var(--cols), calc(var(--hw) * .75));
  grid-template-rows: repeat(var(--rows), var(--hh));
  padding-block-end: calc(var(--hh) / 2); padding-inline-end: calc(var(--hw) * .25);
  inline-size: max-content; max-inline-size: 100%; margin-inline: auto;
}
.logo-wall li { position: relative; inline-size: var(--hw); block-size: var(--hh); background: var(--stone);
  clip-path: polygon(26% 2%, 74% 2%, 98% 50%, 74% 98%, 26% 98%, 2% 50%); transition: background-color .2s; }
.logo-wall li:hover { background: #E2E6EB; }
.logo-wall li:nth-child(6n+4), .logo-wall li:nth-child(6n+5), .logo-wall li:nth-child(6n+6) { inset-block-start: calc(var(--hh) / 2); }
.logo-wall img { position: absolute; inset: 0; margin: auto; inline-size: var(--w, 50%); block-size: var(--h, 38%); object-fit: contain; mix-blend-mode: multiply; }
/* phones: 4 columns of 11 */
@media (max-width: 760px) {
  .logo-wall { --cols: 4; --rows: 11; }
  .logo-wall li:nth-child(n) { inset-block-start: 0; }
  .logo-wall li:is(:nth-child(22n+12), :nth-child(22n+13), :nth-child(22n+14), :nth-child(22n+15), :nth-child(22n+16), :nth-child(22n+17), :nth-child(22n+18), :nth-child(22n+19), :nth-child(22n+20), :nth-child(22n+21), :nth-child(22n+22)) { inset-block-start: calc(var(--hh) / 2); }
}



/* ---------- faq ---------- */
.faq { display: grid; gap: 4px; }
.faq details { background: var(--paper); }
.faq summary { cursor: pointer; list-style: none; padding: 22px 24px; font-weight: 700; font-size: 1.1875rem; line-height: 1.45;
  display: flex; justify-content: space-between; gap: 16px; align-items: center; min-block-size: 64px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 1.75rem; font-weight: 400; line-height: 1; flex: none; color: var(--ink); transition: transform .25s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq summary:hover { background: var(--white); }
.faq details p { padding: 0 24px 24px; max-inline-size: 66ch; }
.faq a { text-decoration-color: var(--orange); text-decoration-thickness: 2px; }
@media (max-width: 900px) { .faq-wrap .main { margin-block-start: 8px; } }

/* ---------- contact ---------- */
.dusk { block-size: clamp(200px, 36vh, 400px); overflow: hidden; background: var(--navy); }
.dusk img { inline-size: 100%; block-size: 115%; object-fit: cover; object-position: 50% 55%; }
.contact { padding-block-start: clamp(64px, 8vw, 120px); }
.form-panel { background: var(--paper); color: var(--ink); padding: clamp(24px, 4vw, 48px); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.form-grid .full { grid-column: 1 / -1; }
@media (max-width: 520px) { .form-grid { grid-template-columns: minmax(0, 1fr); } }
.field label { display: block; font-weight: 700; font-size: 1rem; margin-block-end: 8px; }
.field .opt { color: var(--note); font-weight: 400; }
.field input, .field select, .field textarea {
  inline-size: 100%; min-block-size: 52px; padding: 12px 16px; font: inherit; font-size: 1.0625rem; color: var(--ink);
  background: var(--stone); border: 0; border-block-end: 3px solid transparent; border-radius: 0;
}
.field textarea { min-block-size: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-block-end-color: var(--orange); background: var(--white); }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.field input[aria-invalid="true"] { border-block-end-color: var(--err); }
.form-actions { margin-block-start: 24px; }
.hp { position: absolute !important; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.form-status { margin-block-start: 14px; font-weight: 700; min-block-size: 1.5em; }
.form-status.ok { color: var(--ok); } .form-status.err { color: var(--err); }

.details { display: grid; gap: 28px; }
.details dt { font-size: var(--t-small); color: var(--on-navy-2); }
.details dd { font-size: 1.25rem; font-weight: 700; line-height: 1.5; }
.details dd.addr { font-size: 1.125rem; font-weight: 400; color: var(--on-navy); }
.details a { text-decoration: none; }
.details a:hover { text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.map-actions { display: flex; flex-wrap: wrap; gap: 4px; margin-block-start: 36px; }
.map-box { margin-block-start: 4px; }
.map-box iframe { display: block; inline-size: 100%; block-size: 300px; border: 0; }
@media (max-width: 900px) { .contact .side { margin-block-end: 48px; } }

/* ---------- footer: the name returns at full width ---------- */
.site-footer { background: var(--navy); color: var(--on-navy-2); padding-block: clamp(56px, 7vw, 96px) 40px; font-size: var(--t-small); }
.footer-name { font-size: clamp(2.75rem, 1rem + 8vw, 9.5rem); font-weight: 700; line-height: 1; color: var(--on-navy); letter-spacing: -.02em; }
.footer-name span { color: var(--orange); }
.footer-row { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 24px var(--gap); margin-block-start: clamp(40px, 5vw, 64px); }
.footer-row p + p { margin-block-start: 8px; }
.site-footer a { color: var(--on-navy); }
.social { display: flex; gap: 4px; margin-block-start: 20px; }
.social a { display: grid; place-items: center; inline-size: 48px; block-size: 48px; background: #1A2C47; transition: background-color .2s; }
.social a:hover { background: var(--orange); color: var(--navy); }
.social svg { inline-size: 22px; block-size: 22px; }
.credits { color: #9AA7B8; line-height: 1.6; }
.credits a { color: inherit; }
@media (max-width: 900px) { .footer-row { grid-template-columns: minmax(0, 1fr); } }

/* ---------- dialog (floats, so it may cast a shadow) ---------- */
dialog { border: 0; border-radius: 0; padding: 0; inline-size: min(560px, calc(100% - 32px)); box-shadow: 0 30px 80px rgb(0 0 0 / .3); color: var(--ink); background: var(--paper); }
dialog::backdrop { background: rgb(14 29 51 / .7); }
.dialog-body { padding: 32px; }
.dialog-body h2 { font-size: var(--t-sub); margin-block-end: 8px; padding-inline-end: 40px; }
.dialog-body > p { margin-block-end: 24px; }
.dialog-close { position: absolute; inset-inline-end: 8px; inset-block-start: 8px; inline-size: 48px; block-size: 48px;
  border: 0; background: transparent; font-size: 1.75rem; cursor: pointer; color: var(--ink); }
.dialog-close:hover { background: var(--stone); }
.dialog-actions { display: flex; gap: 4px; margin-block-start: 24px; flex-wrap: wrap; }

/* ---------- phone action bar ---------- */
.action-bar { display: none; }
@media (max-width: 760px) {
  .action-bar { position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 60; display: grid; grid-template-columns: 1fr 1fr; gap: 4px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom)); background: var(--navy); }
  .action-bar .btn { inline-size: 100%; min-block-size: 52px; }
  body { padding-block-end: 72px; }
}
noscript p { background: var(--stone); padding: 12px 16px; margin-block-end: 16px; }

/* ---------- motion: everything is readable without it ---------- */
@keyframes mask-in { from { clip-path: inset(0 0 100% 0); transform: translateY(.25em); } to { clip-path: inset(0 0 -10% 0); transform: none; } }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .hero h1 { animation: mask-in 1.1s var(--ease) .1s both; }
  .hero .lead, .hero-actions, .hero-note, .stage-label { animation: rise .9s var(--ease) both; }
  .hero .lead { animation-delay: .5s; } .hero-actions { animation-delay: .65s; } .hero-note { animation-delay: .75s; } .stage-label { animation-delay: 1.4s; }
  .js-motion [data-rv] { opacity: 0; transform: translateY(24px); transition: opacity .8s var(--ease), transform .8s var(--ease); transition-delay: var(--d, 0ms); }
  .js-motion [data-rv].in { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .school img { animation: drift linear both; animation-timeline: view(); }
    .dusk img { animation: drift linear both; animation-timeline: view(); }
    @keyframes drift { from { transform: translateY(-8%); } to { transform: translateY(0); } }
  }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } }