/* Alfondia components -- header, nav, footer, buttons, journey strip, hero
   mark. Logical properties throughout so dir="rtl" mirrors correctly with
   no separate stylesheet. */

/* --- Buttons --- */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 8px; min-height: 50px; padding-inline: 26px;
  font-family: var(--font-body); font-weight: 600; font-size: 15.5px;
  border-radius: var(--radius); border: 1px solid transparent;
  cursor: pointer; text-decoration: none; white-space: nowrap;
}
html[dir="rtl"] .btn { font-family: var(--font-body-ar); }
.btn:hover { text-decoration: none; }
.btn-primary { background: var(--navy); color: #fff; }
.btn-primary:hover { background: var(--navy-soft); }
.btn-outline { background: transparent; color: var(--alf-navy); border-color: var(--alf-line-strong); }
.btn-outline:hover { border-color: var(--alf-navy); }
.btn-accent { background: var(--alf-blue); color: #fff; }
.btn-accent:hover { filter: brightness(0.92); }
.btn[disabled], .btn.is-placeholder { opacity: .55; cursor: default; pointer-events: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.btn-arrow { display: inline-block; transition: transform .12s ease; }
html[dir="rtl"] .btn-arrow { transform: scaleX(-1); }

/* --- Select affordance ---
   The one <select> on the site (contact page enquiry type) is disabled by
   design in this phase; several browsers render a disabled select's native
   chevron in a near-invisible gray against the field's own light
   background. Drawn as a CSS-only inline SVG data URI (no external asset,
   no image file) so the dropdown affordance stays visible while the field
   itself remains fully inert. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%235b6472' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 11px 7px;
}
html[dir="rtl"] select { background-position: left 14px center; }

/* --- Header --- */
.site-header { border-block-end: 1px solid var(--alf-line); background: var(--alf-bg); position: relative; }
.site-header .container {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 88px; gap: var(--space-sm); flex-wrap: nowrap;
}
.brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
/* Header logo lockup: the one element to replace when the final approved
   logo asset arrives. */
.brand-logo { display: inline-flex; align-items: center; gap: 12px; }
/* The A-symbol: navy body, gold arc. Ground-specific colors are set by
   overriding --mark-body on the container (white on navy). */
.brand-mark { width: 34px; height: auto; flex: 0 0 auto; }
.brand-mark .mk-body { fill: var(--mark-body, var(--navy)); }
.brand-mark .mk-arc { fill: url(#alf-gold); }
/* Optical alignment: the mark is bottom-heavy (apex above, feet below), so
   box-centering leaves it looking low against the wordmark caps. Nudged up
   3px in the header lockup only; size and proportions are unchanged. */
.brand-logo .brand-mark { transform: translateY(-3px); }
/* Wordmark is set in capitals with generous tracking, per the brand board;
   the source text stays "Alfondia" so it reads correctly to assistive tech
   and in both languages (the Latin name is used on the Arabic pages too). */
.wordmark {
  font-family: var(--font-body); font-weight: 600; font-size: 19px;
  color: var(--ink); text-transform: uppercase; letter-spacing: .2em; white-space: nowrap;
}
html[dir="rtl"] .wordmark { font-family: var(--font-body); font-weight: 600; letter-spacing: .2em; }
a.brand { text-decoration: none; }
a.brand:hover .wordmark { text-decoration: none; color: var(--alf-navy); }

.primary-nav { display: flex; align-items: center; gap: var(--space-lg); flex: 1 1 auto; min-width: 0; justify-content: center; }
.primary-nav ul { list-style: none; display: flex; gap: var(--space-sm); margin: 0; padding: 0; flex-wrap: nowrap; }
.primary-nav a {
  color: var(--alf-ink); font-size: var(--fs-nav); font-weight: 500; white-space: nowrap;
  padding-block: 6px; border-block-end: 2px solid transparent;
}
html[dir="rtl"] .primary-nav a { font-family: var(--font-body-ar); }
.primary-nav a:hover { color: var(--alf-navy); text-decoration: none; }
.primary-nav a[aria-current="page"] {
  color: var(--alf-navy); font-weight: 700; border-block-end-color: var(--alf-blue);
  text-decoration: none;
}

.header-actions { display: flex; align-items: center; gap: var(--space-sm); flex: 0 0 auto; }
/* Header CTA only: deliberately quieter than the shared .btn (50px / 15.5px /
   26px) so it never competes with the wordmark or the hero CTA. Hero and
   form buttons keep the shared size. */
.header-actions .btn {
  min-height: 42px; padding-inline: 20px; font-size: 14px; gap: 6px;
  background: var(--alf-blue-strong);
}
/* Narrow phones: tighter side gutters and gaps keep the row (wordmark + CTA +
   menu toggle) from touching or overflowing at 375px. */
@media (max-width: 430px) {
  .site-header .container { padding-inline: 12px; gap: 10px; }
  .header-actions { gap: 8px; }
  /* Tracked-capitals wordmark is wider than the old one; tighten it here so
     wordmark + CTA + menu toggle fit at 375px. */
  .brand-logo { gap: 8px; }
  .brand-logo .brand-mark { width: 28px; }
  .wordmark, html[dir="rtl"] .wordmark { font-size: 16px; letter-spacing: .14em; }
}

.lang-switch { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.lang-switch a { color: var(--alf-muted); font-weight: 600; padding: 4px 2px; }
.lang-switch a[aria-current="true"] { color: var(--alf-navy); text-decoration: underline; text-underline-offset: 3px; }
.lang-switch .sep { color: var(--alf-line-strong); }

.nav-toggle {
  display: none; background: none; border: 1px solid var(--alf-line-strong);
  border-radius: var(--radius); width: 46px; height: 46px;
  align-items: center; justify-content: center; cursor: pointer; flex: 0 0 auto;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  content: ""; display: block; width: 18px; height: 2px; background: var(--alf-navy);
  position: relative;
}
.nav-toggle span::before { position: absolute; top: -6px; }
.nav-toggle span::after { position: absolute; top: 6px; }

/* Desktop header. Grid tracks (auto | 1fr | auto) guarantee the logo, the
   links and the language+CTA group can never overlap; the links are centered
   in the middle track, so the bar reads as one line of evenly spaced items.
   Nav links carry 8px of inline padding at all times (so hover never shifts
   layout) and the list gap is reduced to compensate. */
@media (min-width: 1100px) {
  .site-header .container {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 16px;
  }
  .primary-nav { justify-self: center; }
  .primary-nav ul { gap: 8px; }
  .primary-nav ul a {
    padding-inline: 8px; border-radius: 6px;
    transition: background-color .18s ease, color .18s ease;
  }
  .primary-nav ul a:focus-visible { background-color: var(--alf-blue-soft); }
  .header-actions { gap: 20px; }
  .lang-switch--drawer { display: none; }
}
/* Hover tint only on devices that actually hover -- touch never gets a stuck
   hover state. Very pale blue, no underline/shadow, text stays navy. */
@media (min-width: 1100px) and (hover: hover) {
  .primary-nav ul a:hover { background-color: var(--alf-blue-soft); }
}

/* Below the desktop breakpoint the bar can't fit comfortably, so navigation
   and the language switcher collapse into the drawer; the persistent top row
   is only logo + CTA + toggle. */
@media (max-width: 1099px) {
  .lang-switch--bar { display: none; }
  .primary-nav { display: none; }
  .nav-toggle { display: inline-flex; }
  .site-header.is-open .primary-nav {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; inset-inline: 0; top: 88px;
    background: var(--alf-bg); border-block-end: 1px solid var(--alf-line);
    padding: var(--space-sm) var(--space-md); z-index: 20;
  }
  .site-header.is-open .primary-nav ul { flex-direction: column; gap: 0; }
  .site-header.is-open .primary-nav a {
    display: block; padding-block: 14px; border-block-end: 1px solid var(--alf-line);
  }
  .site-header.is-open .primary-nav .lang-switch {
    justify-content: center; padding-block: 14px; font-size: 15px;
  }
  .site-header.is-open .primary-nav a[aria-current="page"] { border-block-end-color: var(--alf-blue); }
}

/* --- Hero --- */
.hero { padding-block: var(--space-xl); }
.hero-grid { display: grid; grid-template-columns: minmax(0, var(--hero-col)) 1fr; gap: var(--space-xl); align-items: center; }
.hero h1 { max-width: 15ch; }
.hero .lede { margin-block-end: var(--space-md); }
.hero-mark { justify-self: center; width: min(330px, 100%); }
/* A_MARK_SVG carries the header's fixed 26x26 .brand-mark sizing everywhere
   it's reused -- override it here so the hero's larger decorative use isn't
   collapsed to logo size. Kept faint and modestly sized so it reads as a
   quiet brand motif, not a competing focal point next to the headline. */
.hero-mark .brand-mark { width: 100%; height: auto; }
@media (max-width: 980px) {
  .hero-grid { grid-template-columns: 1fr; }
  .hero-mark { display: none; }
}

/* --- Journey component: Demand -> ... -> Business --- */
.journey { margin-block-start: var(--space-md); }
.journey ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; gap: 0; overflow-x: auto; scroll-snap-type: x proximity;
  padding-block: var(--space-sm);
}
.journey li {
  flex: 0 0 auto; width: 176px; scroll-snap-align: start;
  padding-inline-end: var(--space-md); position: relative;
}
.journey li::before {
  content: ""; position: absolute; top: 7px; inset-inline: 0 var(--space-md);
  height: 1px; background: var(--alf-line-strong);
}
.journey li:last-child::before { display: none; }
.journey .node {
  width: 15px; height: 15px; border-radius: 50%; background: var(--alf-bg);
  border: 2px solid var(--alf-blue); margin-block-end: var(--space-sm); position: relative; z-index: 1;
}
.journey .stage-label { font-weight: 700; font-size: 15px; color: var(--alf-navy); margin-block-end: 4px; }
.journey .stage-note { font-size: var(--fs-small); color: var(--alf-muted); }

@media (min-width: 861px) {
  .journey ol { overflow-x: visible; }
  .journey li { flex: 1 1 0; }
}

/* --- Cards --- */
.card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-md); }
.card { border: 1px solid var(--alf-line); border-radius: var(--radius); padding: var(--space-md); background: var(--alf-bg); }
.card h3 { margin-block-end: var(--space-xs); }
.card ul { margin: 0; padding-inline-start: 20px; color: var(--alf-muted); font-size: 15px; }
.card ul li { margin-block-end: 8px; }

@media (max-width: 700px) { .card-grid { grid-template-columns: 1fr; } }

/* --- Three-column detail grid (journey stage explanations) --- */
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-md); margin-block-start: var(--space-lg); }
.grid-3 h3 { font-size: 16px; margin-block-end: 4px; }
.grid-3 p { font-size: 15px; color: var(--alf-muted); }
@media (max-width: 820px) { .grid-3 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .grid-3 { grid-template-columns: 1fr; } }

/* --- Compact inline point list (delegation composition, methodology steps) --- */
.tag-list { list-style: none; margin: var(--space-sm) 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 20px; }
.tag-list li { font-size: 14px; color: var(--alf-ink); }
.tag-list li::before { content: "•"; color: var(--alf-blue); margin-inline-end: 6px; }

/* --- Homepage composition -------------------------------------------------
   Light-dominant editorial page. Grounds: paper (hero) -> white (two sides)
   -> paper (method) -> tint (delegations) -> one short navy close. The navy
   is reserved for the final call to action so it lands as an ending, not as
   a heavy slab mid-page. Gold appears only as the A-mark's arc and as short
   structural rules. Logical properties throughout, so RTL is native. */
.home-surface-paper { background: var(--paper); }
.home-surface-white { background: var(--surface); border-block: 1px solid var(--rule); }
.home-surface-tint { background: var(--paper-tint); }
.band-navy.home-surface-navy { background: var(--navy); }
.home-surface-navy .btn-accent { background: var(--blue); }
.home-surface-navy .btn-accent:hover { background: var(--blue-deep); filter: none; }

.band-major { padding-block: 72px 56px; }
.band-quiet { padding-block: 56px; }
@media (max-width: 900px) {
  .band-major { padding-block: 48px 40px; }
  .band-quiet { padding-block: 44px; }
}

/* Hero: the proposition on one side, the A-mark as the graphic anchor on the
   other. Two equal doors carry the audience split -- neither is the "main"
   button. */
.hero-grid { align-items: center; }
/* Arabic homepage headline resolves to three balanced lines by container
   width, not by shrinking the type: 12.2em fits "الوصول إلى الأسواق والشركاء"
   (11.1em) but not the next word, and "المناسبين بين دول مجلس" (10.3em) but
   not "التعاون". Mobile simply wraps inside the narrower column. */
html[dir="rtl"] .home-surface-paper .hero h1 { max-width: 12.2em; }
.doors {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-sm);
  margin-block-start: var(--space-md);
}
.door {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: 14px 20px; background: var(--surface);
  border: 1px solid var(--rule-strong); border-block-start: 3px solid var(--gold);
  border-radius: var(--radius); color: var(--navy); font-weight: 600; font-size: 16.5px;
  line-height: 1.3; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
html[dir="rtl"] .door { font-family: var(--font-body-ar); }
.door:hover { text-decoration: none; border-color: var(--navy); box-shadow: 0 6px 18px -10px rgba(11, 31, 58, .35); }
.door .btn-arrow { color: var(--blue-deep); flex: 0 0 auto; }
.hero-more { margin-block: 18px 0; }
@media (max-width: 520px) { .doors { grid-template-columns: 1fr; } }

/* Split header: heading on one side, its lede on the other. */
/* The heading and its explanation are ONE content group: the heading takes its
   natural width (capped), the lede a readable measure, a fixed gap between,
   both top-aligned, and the whole group anchored at the reading-start edge.
   Empty space belongs outside the group, never between the two blocks. */
.split-head {
  display: grid; grid-template-columns: fit-content(44%) minmax(0, 62ch);
  column-gap: var(--space-lg); align-items: start; justify-content: start;
}
.split-head h2, .split-head .lede { margin: 0; }
.split-head--sub { grid-template-columns: fit-content(44%) minmax(0, 62ch); }
.split-head--sub h2 { font-size: clamp(22px, 2.4vw, 28px); }
@media (max-width: 860px) {
  .split-head { grid-template-columns: 1fr; row-gap: var(--space-xs); }
}

/* Two sides + markets -- two columns on white, separated by a hairline that
   carries the A-mark; the markets sit under their own side, then the
   "currently active" statement closes the section. */
.audiences-surface { position: relative; overflow: hidden; padding-block: 64px 56px; }
.audiences-surface > .container { position: relative; z-index: 1; }
/* The A-mark as an embedded brand element: one large, very faint mark centred
   on the divider and cropped by the section's lower edge. It sits behind the
   content and carries no meaning of its own. */
.sides-mark {
  position: absolute; z-index: 0; inset-inline-start: 50%; inset-block-start: 8%;
  width: min(820px, 96vw); opacity: .055; pointer-events: none;
  transform: translateX(-50%);
}
html[dir="rtl"] .sides-mark { transform: translateX(50%); }
.sides-mark .brand-mark { width: 100%; height: auto; display: block; }
.audiences-surface > .container > h2 { margin-block-end: var(--space-lg); }
.audience-grid, .coverage-markets {
  display: grid; grid-template-columns: minmax(0, 1fr) 44px minmax(0, 1fr); column-gap: var(--space-lg);
}
.audience-panel::before { content: ""; display: block; width: 40px; height: 3px; background: var(--gold); margin-block-end: 16px; }
.audience-panel h3 {
  font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.2;
  color: var(--navy); margin-block-end: var(--space-sm);
}
html[dir="rtl"] .audience-panel h3 { font-weight: 700; line-height: 1.5; }
.audience-panel-list { list-style: none; margin: 0 0 var(--space-md); padding: 0; }
.audience-panel-list li {
  padding-block: 10px; border-block-start: 1px solid var(--rule);
  font-size: 15.5px; line-height: 1.5; color: var(--ink);
}
.audience-panel-cta { display: inline-flex; align-items: center; gap: 8px; color: var(--blue-deep); font-weight: 700; text-decoration: none; }
.audience-panel-cta:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
.audience-divider { display: flex; flex-direction: column; align-items: center; }
.audience-divider::after, .market-rule::after { content: ""; flex: 1; width: 1px; background: var(--rule-strong); }
.market-rule { display: flex; flex-direction: column; align-items: center; }
.coverage { margin-block-start: var(--space-lg); padding-block-start: var(--space-md); border-block-start: 1px solid var(--rule-strong); }
.coverage-head {
  display: grid; grid-template-columns: fit-content(44%) minmax(0, 62ch); column-gap: var(--space-lg);
  align-items: start; justify-content: start; margin-block-end: var(--space-md);
}
.coverage-title { margin: 0; font-size: clamp(19px, 1.8vw, 22px); font-weight: 600; line-height: 1.25; color: var(--navy); }
html[dir="rtl"] .coverage-title { font-weight: 700; line-height: 1.5; }
/* Arabic heading is set as two lines (a line break in the content): "نطاق العمل الحالي:" then
   "دول مجلس التعاون الخليجي ↔ أوروبا" (14.84em). Capping the heading column at 15.2em keeps it
   exactly as wide as its longer line, so the explanation sits right beside it instead of after an
   empty gap. Desktop only; it stacks below. */
html[dir="rtl"] .coverage-title { white-space: pre-line; }
@media (min-width: 901px) { html[dir="rtl"] .coverage-title { max-width: 15.2em; } }
.coverage-lede { margin: 0; max-width: none; font-size: 15.5px; color: var(--ink-muted); }
.coverage-text .coverage-lede + .coverage-lede { margin-block-start: 6px; }
.market h3 {
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-muted); margin-block-end: 4px;
}
html[dir="rtl"] .market h3 { font-family: var(--font-body-ar); letter-spacing: 0; text-transform: none; font-size: 14px; }
.market p { max-width: none; margin: 0; color: var(--navy); font-size: clamp(18px, 1.8vw, 21px); line-height: 1.45; font-weight: 500; }
html[dir="rtl"] .market p { line-height: 1.8; font-weight: 600; }
@media (max-width: 900px) {
  .audience-grid, .coverage-markets { grid-template-columns: 1fr; row-gap: var(--space-lg); }
  .audience-divider, .market-rule { display: none; }
  .coverage-markets { row-gap: var(--space-md); }
  .coverage-head { grid-template-columns: 1fr; row-gap: var(--space-xs); }
}

/* Method, act 1 -- one journey rail (extends the .journey primitive). A single
   hairline runs across the six stages; small dots sit on it, the last one
   filled gold as the destination. Each stage carries label, note and body. */
.journey--rich { margin-block-start: var(--space-md); }
.journey--rich ol {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  overflow: visible; padding-block: 0;
}
.journey--rich li { width: auto; padding-block-start: 46px; padding-inline-end: var(--space-sm); }
.journey--rich li::before { inset-block-start: 26px; inset-inline: 16px 0; }
.journey--rich li::after {
  content: ""; position: absolute; inset-block-start: 22px; inset-inline-start: 0;
  width: 9px; height: 9px; box-sizing: border-box; border-radius: 50%;
  border: 1.5px solid var(--navy); background: var(--paper);
}
.journey--rich li:last-child::after { background: var(--gold); border-color: var(--gold); width: 11px; height: 11px; inset-block-start: 21px; }
.journey--rich .node {
  position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: auto;
  width: auto; height: auto; margin: 0; border: 0; border-radius: 0; background: transparent;
  color: var(--ink-muted); font-size: 12px; font-weight: 600; letter-spacing: .08em;
  font-variant-numeric: tabular-nums;
}
.journey--rich .stage-label { font-size: 16.5px; margin-block-end: 2px; color: var(--navy); }
.journey--rich .stage-note { margin: 0 0 6px; font-size: 13.5px; font-weight: 600; color: var(--blue-deep); }
.journey--rich .stage-body { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
@media (min-width: 720px) and (max-width: 1199px) {
  .journey--rich ol { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: var(--space-md); }
  .journey--rich li:nth-child(3n)::before { display: none; }
}
@media (max-width: 719px) {
  /* Vertical journey: the hairline runs down through the dots. */
  .journey--rich ol { grid-template-columns: 1fr; }
  .journey--rich li { padding: 0 0 24px; padding-inline-start: 34px; }
  .journey--rich .node { position: static; display: block; margin-block-end: 2px; }
  .journey--rich li::after { inset-block-start: 5px; }
  .journey--rich li:last-child::after { inset-block-start: 4px; }
  .journey--rich li::before { inset-block: 19px 0; inset-inline: 4px auto; width: 1px; height: auto; }
}

/* Method, act 2 -- the two qualification principles, then the section ends. */
.method-principles {
  margin-block-start: var(--space-lg); padding-block-start: var(--space-md);
  border-block-start: 1px solid var(--rule-strong);
}
.statements {
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-xl);
  margin-block-start: var(--space-md);
}
.statement::before { content: ""; display: block; width: 40px; height: 3px; background: var(--gold); margin-block-end: 14px; }
.statement h3 {
  font-size: clamp(22px, 2.3vw, 28px); font-weight: 600; line-height: 1.2;
  color: var(--navy); margin-block-end: 6px;
}
html[dir="rtl"] .statement h3 { font-weight: 700; line-height: 1.5; }
.statement p { margin: 0; font-size: 16.5px; color: var(--ink-muted); }
@media (max-width: 800px) {
  .statements { grid-template-columns: 1fr; row-gap: var(--space-md); }
}

/* Delegations -- tinted band. The key sentence is set as a statement; the six
   elements are hairline-ruled numbered rows (no boxes, no icons, nothing that
   reads as travel or events); the eligibility note is a footnote under them. */
.modules-split {
  display: grid; grid-template-columns: minmax(0, 6fr) minmax(0, 7fr); column-gap: var(--space-xl);
  grid-template-areas: "title list" "lede list" "cta note";
  grid-template-rows: auto 1fr auto; align-items: start;
}
.ms-title { grid-area: title; }
.ms-lede {
  grid-area: lede; max-width: none; margin: 0 0 var(--space-md); color: var(--navy);
  font-size: clamp(18px, 1.6vw, 21px); line-height: 1.5; font-weight: 500;
}
html[dir="rtl"] .ms-lede { line-height: 1.8; font-weight: 600; }
.ms-cta { grid-area: cta; }
.ms-note {
  grid-area: note; max-width: none; margin: var(--space-sm) 0 0; padding-block-start: 14px;
  border-block-start: 1px solid var(--rule-strong); color: var(--ink-muted); font-size: 14px;
}
.modules {
  grid-area: list; list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--space-lg);
}
.modules li {
  display: grid; grid-template-columns: 2.4em 1fr; align-items: baseline;
  padding-block: 16px 18px; border-block-start: 1px solid var(--rule-strong);
}
.modules-num { color: var(--blue-deep); font-size: 13px; font-weight: 700; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.modules-text { color: var(--navy); font-size: 16px; font-weight: 700; line-height: 1.45; }
@media (max-width: 900px) {
  .modules-split {
    grid-template-columns: 1fr; row-gap: 0;
    grid-template-areas: "title" "lede" "list" "note" "cta"; grid-template-rows: auto;
  }
  .modules { margin-block-end: var(--space-xs); }
  .ms-cta { margin-block-start: var(--space-md); }
}
@media (max-width: 540px) { .modules { grid-template-columns: 1fr; } }

/* Closing call to action -- the page's only dark band, kept short. */
.home-surface-navy .closing-mark { display: block; width: 52px; margin: 0 auto 20px; --mark-body: #ffffff; }
.home-surface-navy .closing-mark .brand-mark { width: 100%; }

/* --- Bands --- */
.band { background: var(--alf-bg-soft); border-block: 1px solid var(--alf-line); }
.band-navy { background: var(--alf-navy); color: #eef2f8; }
.band-navy h2 { color: #fff; }
.band-navy .lede { color: #c7d0de; }

/* --- Footer ---
   Four peer columns (Brand, Business, Company, Connect) -- naturally
   balanced, since Business and Company each hold 3 links and Connect
   holds 2, so no column stretches far past its own content. `align-items:
   start` (not the grid default `stretch`) is what actually removes the
   dead space a shorter column would otherwise be forced to carry to match
   a taller sibling. Padding uses its own value (--space-lg, not the
   site-wide --space-xl every mid-page .section uses) so the footer has a
   distinct, tighter closing rhythm instead of repeating the page's rhythm. */
.site-footer { border-block-start: 1px solid var(--rule-strong); background: var(--paper); }
.footer-grid {
  display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; align-items: start;
  gap: var(--space-lg); padding-block: var(--space-lg);
}
.footer-grid h4 {
  font-family: var(--font-body); font-size: var(--fs-eyebrow); letter-spacing: .1em;
  text-transform: uppercase; color: var(--alf-muted); margin-block-end: var(--space-sm); font-weight: 600;
}
html[dir="rtl"] .footer-grid h4 { font-family: var(--font-body-ar); letter-spacing: 0; text-transform: none; }
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-block-end: 10px; }
.footer-grid a { color: var(--alf-ink); font-size: 15px; }
.footer-grid a:hover { color: var(--alf-blue); text-decoration: none; }
.footer-static { color: var(--alf-ink); font-size: 15px; }
/* The wordmark is a real link to Home here, but must read exactly like the
   plain brand mark it always has -- never like a conventional text link,
   at rest or on hover. */
a.wordmark:hover { text-decoration: none; }
.footer-bottom {
  border-block-start: 1px solid var(--rule); padding-block: var(--space-md);
  display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: var(--space-sm);
  font-size: var(--fs-small); color: var(--ink-muted);
}
/* Approved public legal identity, stated plainly above the copyright line. */
.footer-legal { margin: 0 0 4px; max-width: 62ch; color: var(--ink); }

@media (max-width: 860px) and (min-width: 701px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 700px) {
  .footer-grid { grid-template-columns: 1fr; gap: var(--space-md); }
}

/* --- Connect page (mobile-first, standalone) --- */
.connect-page { min-height: 100dvh; display: flex; flex-direction: column; }
.connect-main {
  flex: 1; display: flex; flex-direction: column; justify-content: center;
  gap: var(--space-md); padding: var(--space-lg) var(--space-md); max-width: 460px; margin-inline: auto; width: 100%;
}
.connect-main .btn { width: 100%; text-align: start; justify-content: flex-start; padding-inline: 22px; }

.path-list { display: flex; flex-direction: column; gap: 14px; margin-block-start: var(--space-sm); }
.path-card {
  display: block; border: 1px solid var(--alf-line-strong); border-radius: var(--radius);
  padding: 22px 24px; background: var(--alf-bg); text-decoration: none; color: var(--alf-ink);
  min-height: 44px; /* touch-target minimum, well exceeded by actual content */
  transition: border-color .12s ease, background .12s ease;
}
.path-card:hover, .path-card:focus-visible { border-color: var(--alf-navy); background: var(--alf-bg-soft); text-decoration: none; }
.path-card h3 { margin: 0 0 6px; font-size: 19px; color: var(--alf-navy); }
.path-card .btn-arrow { color: var(--alf-blue); }
.path-card p { margin: 0; font-size: 14.5px; color: var(--alf-muted); max-width: none; }
.path-card .path-meta {
  margin-block-start: 8px; font-size: 12.5px; font-weight: 600; color: var(--alf-blue);
  letter-spacing: .01em;
}

/* Arabic Delegations page only: tighten the vertical rhythm between the
   hero and the "how it forms" section (was hero padding-block-end 76px +
   section padding-block-start 76px = 152px of pure whitespace between the
   hero lede and the h2, before either element's own margin). Scoped to
   this page+language via body.page-delegations under html[lang="ar"] --
   .hero/.section stay untouched everywhere else, including the English
   Delegations page, which shares the same body class but is excluded by
   the lang selector. */
html[lang="ar"] body.page-delegations .hero { padding-block-end: var(--space-lg); }
html[lang="ar"] body.page-delegations main > .section { padding-block-start: var(--space-lg); }

/* Arabic Contact page only: the short headline reads as oversized at the
   global H1 system's 60px desktop ceiling. Same clamp shape as --fs-h1
   (tokens.css), floor and vw-scaling unchanged, only the ceiling is
   lowered -- so it only takes effect at the same widths the 60px cap
   already applied at (~1174px+); everything below that, including every
   tested mobile width, is untouched. Scoped via body.page-contact under
   html[lang="ar"] so the English Contact page and every other Arabic
   page are unaffected. */
html[lang="ar"] body.page-contact h1 { font-size: clamp(34px, 4.6vw, 54px); }

/* Contact form status region (#form-note): empty at rest, populated by
   contact-form.js during/after submission. min-height reserves its line
   so the sending/success/error text doesn't shift the CTA/page below it
   when it appears. Colors are existing tokens only -- the site's palette
   has no error/red hue (tokens.css is deliberately navy/blue/neutral), so
   success and error states are distinguished by wording, not color. */
.form-status {
  display: block;
  min-height: 1.4em;
  margin-block-start: var(--space-xs);
  font-size: var(--fs-small);
  color: var(--alf-muted);
}
.form-status.is-success,
.form-status.is-error {
  color: var(--alf-navy);
  font-weight: 600;
}

/* --- Audience pages: exact Arabic wrapping ---------------------------------
   European hero: 13.2em holds "لديك قدرات إنتاجية أو منتجات؟" (12.5em) but not
   the next word (15.8em), and "ألفونديا تربطها بطلب تجاري" (10.9em) but not
   "خليجي" (13.9em) -- three lines from container width, no font shrinking.
   Narrow screens wrap inside their own column. */
.hero .hero-title--eu { max-width: 20ch; }
html[dir="rtl"] .hero-title--eu { max-width: 13.2em; }
/* Qualification / disclaimer sentence: one line wherever it physically fits
   (about 550px at 14px), natural wrapping on phones. */
@media (min-width: 640px) {
  html[dir="rtl"] .disclaimer { max-width: none; white-space: nowrap; }
}

/* Market lists may carry a deliberate line break in the content (the Arabic
   GCC list is set as two lines); other lines wrap normally. */
.market p { white-space: pre-line; }

/* --- GCC Companies page additions (existing primitives, small modifiers) --------------- */
/* Three-point row: three across from 700px, single column below (no orphaned 2+1 layout). */
.grid-3--points { margin-block-start: var(--space-md); }
@media (max-width: 820px) and (min-width: 700px) { .grid-3--points { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 699px) { .grid-3--points { grid-template-columns: 1fr; } }
.grid-3--points h3 { font-size: 17px; }
/* Four-step numbered rail: four columns on desktop, 2 x 2 on tablet, vertical on phones. */
@media (min-width: 1200px) { .journey--four ol { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 720px) and (max-width: 1199px) {
  .journey--four ol { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .journey--four li:nth-child(3n)::before { display: block; }
  .journey--four li:nth-child(2n)::before { display: none; }
}
/* One statement, at a readable measure. */
.statements--single { grid-template-columns: minmax(0, 760px); margin-block-start: 0; }

/* Delegations page: the English "Further details..." placeholder note is 88ch long, past the
   sitewide p{max-width:62ch} readability cap, so it wrapped even though the container has room.
   Scoped to this one note only -- the sitewide paragraph cap is untouched everywhere else. */
/* Short single-sentence disclaimers/statements: let them sit on one line at desktop widths
   where the actual column has room, instead of wrapping under the sitewide p{max-width:62ch}
   rule. Narrower screens still wrap naturally -- nothing below is forced. */
.disclaimer { max-width: none; }
.statements--single .statement p { max-width: none; }

/* --- How It Works: illustrative examples (reuses .card / .card-grid) ------------------- */
.example-grid { margin-block-start: var(--space-lg); }
.example-section-note {
  margin: 4px 0 0; font-size: var(--fs-small); color: var(--alf-faint); font-style: italic;
}
.example-card .eyebrow { margin-block-end: 8px; }
.example-note {
  margin: var(--space-sm) 0 0; font-size: var(--fs-small); color: var(--alf-faint);
  font-style: italic; max-width: none;
}

/* --- Cookie consent banner + preferences panel -----------------------------
   Native-looking, reuses existing tokens/buttons; no new design language.
   Logical properties throughout so RTL mirrors correctly with no separate
   rules beyond the couple of alignment tweaks below. Both start [hidden] in
   markup; consent.js (assets/js/consent.js) removes [hidden] once it has
   checked stored consent state -- nothing here shows on its own. */
.consent-banner {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 60;
  background: var(--surface); border-block-start: 1px solid var(--rule-strong);
  box-shadow: 0 -8px 24px -12px rgba(11, 31, 58, .18);
  padding-block: var(--space-sm);
}
.consent-banner[hidden] { display: none; }
.consent-banner-inner {
  max-width: var(--container); margin-inline: auto; padding-inline: var(--space-md);
  display: flex; align-items: center; gap: var(--space-md); flex-wrap: wrap;
}
.consent-message { flex: 1 1 320px; margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-muted); }
.consent-actions { display: flex; gap: 10px; flex-wrap: wrap; flex: 0 0 auto; }
.consent-btn-sm { min-height: 40px; padding-inline: 18px; font-size: 13.5px; }

.consent-panel {
  position: fixed; inset: 0; z-index: 70; background: rgba(11, 31, 58, .45);
  display: flex; align-items: center; justify-content: center; padding: var(--space-md);
}
.consent-panel[hidden] { display: none; }
.consent-panel-card {
  background: var(--surface); border-radius: var(--radius); width: 100%; max-width: 460px;
  max-height: 90vh; overflow-y: auto; padding: var(--space-lg);
  box-shadow: 0 24px 64px -12px rgba(11, 31, 58, .35);
}
.consent-panel-heading { margin: 0 0 8px; font-size: 20px; }
.consent-panel-intro { margin: 0 0 var(--space-md); font-size: 14px; color: var(--ink-muted); }
.consent-category { padding-block-start: var(--space-sm); border-block-start: 1px solid var(--rule); margin-block-start: var(--space-sm); }
.consent-category:first-of-type { padding-block-start: 0; border-block-start: 0; margin-block-start: 0; }
.consent-category-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); }
.consent-category-label { font-weight: 600; font-size: 14.5px; color: var(--ink); }
.consent-category-status { font-size: 12px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: .04em; }
html[dir="rtl"] .consent-category-status { text-transform: none; }
.consent-category-description { margin: 4px 0 0; font-size: 13.5px; color: var(--ink-muted); }
.consent-toggle { width: 38px; height: 22px; accent-color: var(--navy); cursor: pointer; flex: 0 0 auto; }
.consent-panel-actions { display: flex; justify-content: flex-end; gap: 10px; margin-block-start: var(--space-md); flex-wrap: wrap; }

/* Plain-text-styled trigger reused in the footer and on /connect -- opens the
   preferences panel; never navigates, so it is a real <button>, not a link. */
.footer-link-button {
  background: none; border: 0; padding: 0; font: inherit; color: inherit;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.footer-link-button:hover { color: var(--alf-blue); }

@media (max-width: 700px) {
  .consent-banner-inner { flex-direction: column; align-items: stretch; }
  .consent-actions { justify-content: stretch; }
  .consent-actions .btn { flex: 1 1 auto; }
}

/* --- Privacy Policy (and future legal pages): page-scoped only ------------
   Reuses the shared header/footer/hero/.section/.container primitives; only
   the body-copy measure, line-height and heading scale are overridden here.
   Body 14px/1.55 (EN) and 1.7 (AR) -- a compact, professional legal-document
   density, sized down ~2px and proportionally tighter line-height from the
   original 16px/1.75 (1.9 AR) pass. Section rhythm and internal spacing are
   cut ~25% (48px -> 36px between sections; 16px -> 12px heading/paragraph/
   list gaps). Heading sizes and content width are unchanged. Nothing here
   touches any other page. */
body.page-privacy .hero h1, body.page-terms .hero h1 { font-size: clamp(28px, 4vw, 32px); max-width: none; }
body.page-privacy .legal-updated, body.page-terms .legal-updated { margin: 8px 0 0; font-size: 14px; color: var(--ink-muted); }
/* The shared .hero (64px top+bottom) stacked with the shared .section (64px
   top) left ~128px of pure whitespace between "Last updated" and the first
   heading -- fine for a marketing hero, far too much for a legal document.
   Scoped to .legal-page (the wrapper any legal page, incl. a future Terms
   page, uses) rather than .hero/.section themselves, so no other page is
   affected. */
.legal-page .hero { padding-block: var(--space-xl) 12px; }
.legal-page .section { padding-block-start: 20px; }
.legal-container { max-width: 800px; }
.legal-section { padding-block-start: 18px; border-block-start: 1px solid var(--rule); margin-block-start: 18px; }
.legal-section:first-child { padding-block-start: 0; border-block-start: 0; margin-block-start: 0; }
.legal-section h2 { font-size: 21px; font-weight: 600; margin-block-end: 12px; }
.legal-section p { font-size: 14px; line-height: 1.55; color: var(--ink); max-width: none; margin-block: 0 12px; }
.legal-list { margin: 0 0 12px; padding-inline-start: 22px; }
.legal-list li { font-size: 14px; line-height: 1.55; color: var(--ink); margin-block-end: 6px; }
.legal-contact-block { font-size: 14px; line-height: 1.6; color: var(--ink); }
html[dir="rtl"] body.page-privacy .hero h1, html[dir="rtl"] body.page-terms .hero h1 { font-size: clamp(27px, 4.2vw, 31px); }
/* html[dir="rtl"] h2 in base.css (clamp 25-30px) otherwise outranks the plain
   .legal-section h2 rule above on specificity; match its shape to win. */
html[dir="rtl"] .legal-section h2 { font-family: var(--font-body-ar); font-size: 21px; font-weight: 600; }
html[dir="rtl"] .legal-section p, html[dir="rtl"] .legal-list li, html[dir="rtl"] .legal-contact-block { line-height: 1.7; }
@media (max-width: 700px) {
  .legal-section h2, html[dir="rtl"] .legal-section h2 { font-size: 20px; }
  .legal-section p, .legal-list li, .legal-contact-block { font-size: 14px; }
}

/* Contact page "Other ways to reach us": Email/LinkedIn/WhatsApp as one
   consistent icon+label row -- same size, same muted-to-blue treatment as
   every other inline link on the site, no brand-colored blocks. Icons are
   aria-hidden; the visible label is each link's accessible name. */
.contact-icons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md); margin-block-start: 10px; }
.contact-icon-link { display: inline-flex; align-items: center; gap: 8px; color: var(--alf-muted); font-size: 15px; }
.contact-icon-link:hover { color: var(--alf-blue); text-decoration: none; }
.contact-icon-link svg { width: 21px; height: 21px; flex: 0 0 auto; }