/* ══════════ africa-arabia.html — the Africa → Arabia landing page (client batch 4, 2026-09-17c) ══════════
   Built in the language of the homepage "Loom" the client loves: woven African strips (ochre / terracotta) sewn to an
   Arabian khatam lattice (brass) by ONE gold FDN stitch, on dusk grounds (earth · plum · indigo).
   Colour law: ochre = Africa · brass = Arabia · gold (the --accent tokens only) = FDN.
   Every selector is scoped to .aap (the page's <main>) so nothing leaks into the shared header/footer. */

.aap{
  --aap-night:#140E17; --aap-earth:#2A1510; --aap-plum:#241424; --aap-indigo:#15142A;
  --aap-sand:#F1E4CC; --aap-sand-dim:rgba(241,228,204,.72); --aap-sand-low:rgba(241,228,204,.46);
  --aap-line:rgba(241,228,204,.14); --aap-line-hi:rgba(241,228,204,.26);
  --aap-terracotta:#C65A34; --aap-ochre:#E29B35; --aap-palm:#3F6B4F; --aap-brass:#C9A46A;
  --aap-ease:cubic-bezier(.19,1,.22,1); --aap-ease-io:cubic-bezier(.65,0,.35,1);
  --aap-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --aap-lat:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 15L45.36 27.07L57.68 22.32L52.93 34.64L65 40L52.93 45.36L57.68 57.68L45.36 52.93L40 65L34.64 52.93L22.32 57.68L27.07 45.36L15 40L27.07 34.64L22.32 22.32L34.64 27.07ZM40 15V0M65 40H80M40 65V80M15 40H0M57.68 22.32L76.5 3.5M57.68 57.68L76.5 76.5M22.32 57.68L3.5 76.5M22.32 22.32L3.5 3.5' fill='none' stroke='%23C9A46A' stroke-opacity='.75' stroke-width='5'/%3E%3C/svg%3E");
  --aap-lat-ink:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 80'%3E%3Cpath d='M40 15L45.36 27.07L57.68 22.32L52.93 34.64L65 40L52.93 45.36L57.68 57.68L45.36 52.93L40 65L34.64 52.93L22.32 57.68L27.07 45.36L15 40L27.07 34.64L22.32 22.32L34.64 27.07ZM40 15V0M65 40H80M40 65V80M15 40H0M57.68 22.32L76.5 3.5M57.68 57.68L76.5 76.5M22.32 57.68L3.5 76.5M22.32 22.32L3.5 3.5' fill='none' stroke='%230A0A0B' stroke-width='1.4'/%3E%3C/svg%3E");
  --aap-weave:
    repeating-linear-gradient(0deg, rgba(198,90,52,.6) 0 2px, transparent 2px 8px, rgba(226,155,53,.5) 8px 10px, transparent 10px 24px),
    repeating-linear-gradient(90deg, rgba(241,228,204,.18) 0 1px, transparent 1px 6px),
    linear-gradient(#2A1510,#2A1510);
  --aap-weave-ink:
    repeating-linear-gradient(0deg, rgba(10,10,11,.5) 0 2px, transparent 2px 8px, rgba(10,10,11,.28) 8px 10px, transparent 10px 24px),
    repeating-linear-gradient(90deg, rgba(10,10,11,.16) 0 1px, transparent 1px 6px);
  display:block; background:var(--aap-night); color:var(--aap-sand); overflow-x:clip; position:relative;
  font-family:var(--font-display);
}
.aap *{ border-radius:0; }
.aap p{ max-width:none; }
.aap .aap-gold{ color:var(--accent); -webkit-text-fill-color:currentColor; }
.aap .aap-ochre{ color:var(--aap-ochre); -webkit-text-fill-color:currentColor; }
.aap .aap-brass{ color:var(--aap-brass); -webkit-text-fill-color:currentColor; }
.aap b{ font-weight:inherit; }

/* ── shared type ─────────────────────────────────────────────────────────── */
.aap-sec{ position:relative; padding-block:clamp(96px, 11vw, 168px); }
.aap-h2{
  margin:0; font-weight:600; font-size:clamp(2.4rem, 5.2vw, 4.9rem); line-height:1.02; letter-spacing:-.038em;
  color:var(--aap-sand); text-wrap:balance;
}
.aap-h2--tight{ font-size:clamp(2.2rem, 3.9vw, 3.6rem); }
.aap-line{ display:inline-block; overflow:hidden; padding-bottom:.1em; margin-bottom:-.1em; vertical-align:top; }
.aap-line > span{ display:inline-block; }
.aap-mask{ display:inline-block; overflow:hidden; padding-bottom:.12em; margin-bottom:-.12em; }
.aap-mask > span{ display:inline-block; }
.aap-h3{ margin:0; font-weight:600; font-size:clamp(1.9rem, 3.3vw, 3rem); line-height:1.04; letter-spacing:-.03em; color:var(--aap-sand); }
.aap-lede{ margin:0; font-size:clamp(1.05rem, 1.35vw, 1.28rem); line-height:1.6; color:var(--aap-sand-dim); }
.aap-lede--xl{ font-size:clamp(1.35rem, 2.2vw, 2rem); line-height:1.25; letter-spacing:-.018em; color:var(--aap-sand); font-weight:500; }
.aap-lede--center{ text-align:center; margin-inline:auto; }
.aap-body{ margin:0; font-size:clamp(1rem, 1.12vw, 1.1rem); line-height:1.65; color:var(--aap-sand-dim); }
.aap-body--lg{ font-size:clamp(1.08rem, 1.35vw, 1.3rem); line-height:1.55; color:var(--aap-sand); }
.aap-statement{ margin:0; font-size:clamp(1.4rem, 2.2vw, 2rem); line-height:1.2; letter-spacing:-.02em; font-weight:500; color:var(--aap-sand); }
.aap-statement--xl{ font-size:clamp(1.7rem, 3.2vw, 3rem); line-height:1.1; letter-spacing:-.03em; font-weight:600; }
.aap-mini{ margin:0; font-size:.78rem; font-weight:600; letter-spacing:.28em; text-transform:uppercase; color:var(--aap-sand-low); }
.aap-mini--lead{ margin-top:18px; color:var(--accent); }

.aap-head{ display:grid; gap:24px; margin-bottom:clamp(56px, 6.5vw, 96px); }
.aap-head--split{ grid-template-columns:minmax(0,1.15fr) minmax(0,1fr); align-items:end; gap:clamp(28px, 5vw, 96px); }
.aap-head--split .aap-lede{ padding-bottom:.4em; }
.aap-head--center{ text-align:center; justify-items:center; }

/* swatches: the three threads (weave · lattice · stitch) */
.aap-swatch{ display:inline-block; flex:none; width:18px; height:18px; vertical-align:-3px; }
.aap-swatch--weave{ background:var(--aap-weave); }
.aap-swatch--lattice{ background:var(--aap-lat) 0 0/9px 9px, var(--aap-indigo); outline:1px solid rgba(201,164,106,.35); outline-offset:-1px; }
.aap-swatch--stitch{ background:linear-gradient(var(--accent),var(--accent)) 50% 0/2px 100% no-repeat, rgba(241,228,204,.04);
  box-shadow:inset 0 0 0 1px rgba(241,228,204,.16); }

/* buttons */
.aap .aap-btn{ min-height:54px; padding:15px 28px; font-weight:600; }
.aap .btn--glass.aap-btn{ background:rgba(241,228,204,.06); border:1px solid rgba(241,228,204,.26); color:var(--aap-sand); }
.aap .btn--glass.aap-btn:hover, .aap .btn--glass.aap-btn:focus-visible{ border-color:var(--accent); color:var(--accent); }
.aap .btn--solid.aap-btn{ color:var(--accent-on); }
.aap .aap-btn--ink{ background:var(--accent-on); color:var(--accent); border:1px solid rgba(10,10,11,.9); }
.aap .aap-btn--ink:hover, .aap .aap-btn--ink:focus-visible{ transform:translateY(-2px); color:var(--accent-hov); }
.aap .aap-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:3px; }
.aap .aap-btn--ink:focus-visible{ outline-color:var(--accent-on); }
.aap-btn__down{ display:inline-block; transition:transform .3s ease; }
.aap-btn:hover .aap-btn__down{ transform:translateY(4px); }

/* photos: gold-toned, dusk veil */
.aap-photo{ position:relative; margin:0; overflow:hidden; isolation:isolate; background:var(--aap-plum); }
.aap-photo img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; z-index:-2;
  filter:var(--gold-photo) brightness(.9) contrast(1.05); }
.aap-photo__veil{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(0deg, rgba(20,14,23,.72), rgba(20,14,23,0) 55%); }
.aap-photo__veil::after{ content:""; position:absolute; inset:0; background:var(--accent-glow); mix-blend-mode:soft-light; }

/* ══════════ 01 · HERO ══════════ */
.aap-hero{
  position:relative; isolation:isolate; overflow:clip; min-height:100vh; min-height:100svh;
  display:flex; align-items:center;
  background:linear-gradient(180deg, rgba(10,8,12,.6), transparent 22%), linear-gradient(90deg, #2A1510 0%, #241424 50%, #15142A 100%);
}
.aap-hero::before{ content:""; position:absolute; inset:0; z-index:3; pointer-events:none; background:var(--aap-grain); opacity:.05; mix-blend-mode:overlay; }
.aap-loom{ position:absolute; inset:0; z-index:0; }
.aap-loom__weave, .aap-loom__stitch{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.aap-loom__weave{
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 12%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.14) 64%,rgba(0,0,0,.6) 92%);
          mask-image:linear-gradient(180deg,#000 0%,#000 12%,rgba(0,0,0,.22) 30%,rgba(0,0,0,.14) 64%,rgba(0,0,0,.6) 92%);
}
.aap-loom__stitch{ z-index:1; overflow:visible; }
.aap .aap-seam{ fill:none; stroke:var(--accent); stroke-width:1.5; stroke-dasharray:10 6; filter:drop-shadow(0 0 5px var(--accent-glow)); }
.aap-spark{ position:absolute; left:0; top:0; z-index:2; width:0; height:0; opacity:0; pointer-events:none; will-change:transform; }
.aap-spark > span{ position:absolute; left:-3px; top:-3px; width:6px; height:6px; background:var(--accent); transform:rotate(45deg);
  box-shadow:0 0 6px var(--accent), 0 0 14px var(--accent-glow); }
.aap-hero__glow{
  position:absolute; left:-10%; right:-10%; bottom:-30%; height:70%; z-index:0; pointer-events:none;
  background:radial-gradient(60% 50% at 50% 100%, rgba(226,155,53,.34), rgba(198,90,52,.12) 45%, transparent 72%);
}
.aap-hero__inner{ position:relative; z-index:4; padding-top:clamp(112px, 13vh, 150px); padding-bottom:clamp(40px, 6vh, 72px); }
.aap-hero__type{ position:relative; text-align:center; }
.aap-hero__type::before{ content:""; position:absolute; inset:-30% 6%; z-index:-1; pointer-events:none;
  background:radial-gradient(48% 46% at 50% 50%, rgba(18,12,22,.72), transparent 74%); }
.aap-title{
  display:grid; grid-template-columns:1fr auto 1fr; column-gap:.26em; align-items:baseline; margin:0;
  font-size:clamp(3.4rem, 9vw, 8.4rem); font-weight:500; line-height:.95; letter-spacing:-.045em; color:var(--aap-sand);
}
.aap-w{ display:block; overflow:hidden; padding-bottom:.08em; margin-bottom:-.08em; }
.aap-w > span{ display:inline-block; }
.aap-w--a{ justify-self:end; }
.aap-w--b{ justify-self:start; }
.aap-w--arrow{ color:var(--accent); }
.aap-hero__sub{ margin:clamp(16px, 2vw, 28px) auto 0; font-size:clamp(1.2rem, 2.1vw, 1.95rem); font-weight:500; letter-spacing:-.015em; line-height:1.25; color:var(--aap-sand); }

.aap-trio{
  margin:clamp(36px, 5.4vh, 64px) auto 0; width:min(1180px, 100%);
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  background:rgba(20,14,23,.52); border:1px solid var(--aap-line);
  -webkit-backdrop-filter:blur(14px) saturate(115%); backdrop-filter:blur(14px) saturate(115%);
}
.aap-trio__i{
  margin:0; display:flex; gap:14px; align-items:flex-start; padding:clamp(20px, 2.2vw, 30px);
  font-size:clamp(.98rem, 1.1vw, 1.08rem); line-height:1.5; color:var(--aap-sand-dim);
}
.aap-trio__i + .aap-trio__i{ border-left:1px solid var(--aap-line); }
.aap-trio__i b{ display:block; margin-bottom:4px; font-size:clamp(1.3rem, 1.7vw, 1.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.1; }
.aap-trio__i--fdn > span:last-child{ font-size:clamp(1.3rem, 1.7vw, 1.6rem); font-weight:600; letter-spacing:-.02em; line-height:1.1; color:var(--aap-sand); }
.aap-trio__i--fdn b{ display:inline; margin:0; }
.aap-trio__i .aap-swatch{ margin-top:5px; }

.aap-hero__foot{ margin:clamp(26px, 3.6vh, 44px) auto 0; width:min(1180px, 100%); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:18px 32px; }
.aap-hero__kick{ margin:0; font-size:clamp(1.05rem, 1.45vw, 1.35rem); font-weight:500; letter-spacing:-.012em; color:var(--aap-sand); }
.aap-hero__ctas{ margin:0; display:flex; flex-wrap:wrap; gap:12px; }

/* ══════════ 02 · REGIONS ══════════ */
.aap-regions{ background:linear-gradient(180deg, var(--aap-night), #1A1120 60%, var(--aap-night)); }
.aap-region{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 5vw, 96px); align-items:stretch; }
.aap-region + .aap-region{ margin-top:clamp(88px, 10vw, 150px); }
.aap-region__copy{ display:flex; flex-direction:column; gap:22px; justify-content:center; }
.aap-region__photo{ min-height:clamp(420px, 44vw, 640px); }
.aap-photo__edge{ position:absolute; top:0; bottom:0; width:16px; z-index:1; }
.aap-photo__edge--lattice{ left:0; background:var(--aap-lat) 0 0/16px 16px, var(--aap-indigo); }
.aap-photo__edge--weave{ right:0; background:var(--aap-weave); }
.aap-tag{ margin:0; display:flex; align-items:center; gap:14px; font-size:.84rem; font-weight:600; letter-spacing:.34em; }
.aap-tag--arabia{ color:var(--aap-brass); }
.aap-tag--africa{ color:var(--aap-ochre); }
.aap-tag .aap-swatch{ width:28px; height:28px; }

.aap-visions{ list-style:none; margin:6px 0 4px; padding:0; border-top:1px solid var(--aap-line); counter-reset:v; }
.aap-vision{
  position:relative; display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:baseline; gap:16px;
  padding:15px 0; border-bottom:1px solid var(--aap-line); overflow:hidden;
  font-size:clamp(1.02rem, 1.25vw, 1.2rem); line-height:1.3;
}
.aap-vision::before{ content:""; position:absolute; left:0; right:0; bottom:-1px; height:1px; background:var(--aap-brass); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--aap-ease); }
.aap-vision:hover::before{ transform:scaleX(1); }
.aap-vision__c{ font-weight:600; color:var(--aap-sand); }
.aap-vision__dot{ color:var(--aap-brass); font-size:.8em; }
.aap-vision__v{ color:var(--aap-brass); font-weight:500; text-align:right; }

.aap-universe{ list-style:none; margin:4px 0 0; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--aap-line); }
.aap-universe li{
  position:relative; padding:18px 18px 18px 26px; border-bottom:1px solid var(--aap-line);
  font-size:clamp(1.1rem, 1.5vw, 1.45rem); font-weight:500; letter-spacing:-.015em; color:var(--aap-sand); line-height:1.2;
  transition:background-color .35s ease, color .35s ease;
}
.aap-universe li:nth-child(odd){ border-right:1px solid var(--aap-line); }
.aap-universe li::before{ content:""; position:absolute; left:4px; top:50%; width:9px; height:9px; margin-top:-4px; background:var(--aap-ochre); transform:rotate(45deg); }
.aap-universe li:hover{ background:rgba(226,155,53,.08); color:var(--aap-ochre); }

.aap-together{
  position:relative; margin-top:clamp(96px, 11vw, 170px); display:grid; grid-template-columns:1fr auto 1fr; align-items:center; row-gap:28px;
}
.aap-together__thread{ height:2px; }
.aap-together__thread--l{ background:linear-gradient(90deg, transparent, var(--aap-ochre)); }
.aap-together__thread--r{ background:linear-gradient(90deg, var(--aap-brass), transparent); }
.aap-knot{ width:84px; height:84px; margin-inline:20px; overflow:visible; }
.aap-knot__star{ fill:none; stroke:var(--aap-brass); stroke-width:2.2; stroke-dasharray:1; stroke-dashoffset:0; }
.aap-knot__heart rect:first-child{ fill:var(--aap-ochre); }
.aap-knot__heart rect:last-child{ fill:var(--accent); }
.aap-together__h{
  grid-column:1 / -1; margin:0; text-align:center; text-wrap:balance;
  font-size:clamp(2rem, 4.4vw, 4.2rem); font-weight:600; line-height:1.04; letter-spacing:-.038em; color:var(--aap-sand);
}

/* ══════════ 03 · EXCHANGE ══════════ */
.aap-exchange{ padding-top:clamp(40px, 5vw, 80px); background:radial-gradient(70% 60% at 50% 0%, rgba(36,20,36,.9), transparent 70%), var(--aap-night); padding-bottom:clamp(96px, 10vw, 150px); }
.aap-exchange .aap-head{ margin-bottom:clamp(48px, 5vw, 80px); }
.aap-exchange__big{ margin:6px 0 0; font-size:clamp(1.7rem, 3vw, 2.8rem); font-weight:600; letter-spacing:-.03em; color:var(--accent); }
.aap-lanes{ border-top:1px solid var(--aap-line); }
.aap-lane{ position:relative; border-bottom:1px solid var(--aap-line); padding-block:clamp(22px, 2.4vw, 34px) 0; }
.aap-lane--in{ background:linear-gradient(270deg, rgba(21,20,42,.9), rgba(42,21,16,.55)); }
.aap-lane--out{ background:linear-gradient(90deg, rgba(42,21,16,.9), rgba(21,20,42,.55)); }
.aap-lane__head{ display:flex; }
.aap-lane--in .aap-lane__head{ justify-content:flex-end; }
.aap-lane__label{ margin:0; display:inline-flex; align-items:center; gap:.6em; font-size:.86rem; font-weight:600; letter-spacing:.3em; }
.aap-lane__arr{ color:var(--accent); letter-spacing:0; font-size:1.2em; }
.aap-lane__track{
  position:relative; overflow:hidden; padding-block:clamp(14px, 1.6vw, 22px) clamp(22px, 2.4vw, 34px);
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
          mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.aap-lane__track::after{ /* the gold stitch the goods travel along */
  content:""; position:absolute; left:0; right:0; bottom:12px; height:2px;
  background:repeating-linear-gradient(90deg, var(--accent) 0 10px, transparent 10px 16px); opacity:.55;
}
.aap-lane__run{ margin:0; display:flex; width:max-content; white-space:nowrap; align-items:center; }
.aap-lane__item{ font-size:clamp(2rem, 4.6vw, 4.4rem); font-weight:600; letter-spacing:-.04em; line-height:1.05; color:var(--aap-sand); padding-inline:.35em; }
.aap-lane--in .aap-lane__item:nth-child(4n+1){ color:var(--aap-brass); }
.aap-lane--out .aap-lane__item:nth-child(4n+1){ color:var(--aap-ochre); }
.aap-lane__sep{ color:var(--accent); font-size:clamp(1rem, 2vw, 1.8rem); }
.aap-lane__clone{ display:flex; align-items:center; }
.aap-gains{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 72px); margin-top:clamp(48px, 5vw, 72px); }
.aap-gain{ margin:0; position:relative; padding-top:26px; border-top:1px solid var(--aap-line-hi);
  font-size:clamp(1.12rem, 1.55vw, 1.45rem); line-height:1.42; letter-spacing:-.012em; color:var(--aap-sand); }
.aap-gain__mk{ position:absolute; top:-1px; left:0; width:72px; height:3px; }
.aap-gain--in .aap-gain__mk{ background:var(--aap-brass); }
.aap-gain--out .aap-gain__mk{ background:var(--aap-ochre); }
.aap-drop{ margin:clamp(72px, 8vw, 128px) 0 0; font-size:clamp(2.1rem, 4.8vw, 4.6rem); font-weight:600; line-height:1.02; letter-spacing:-.04em; color:var(--aap-sand); }
.aap-drop--center{ text-align:center; }

/* ══════════ 04 · ACCESS ══════════ */
.aap-access{ background:linear-gradient(180deg, var(--aap-night), #16111F); }
.aap-access__grid{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(32px, 6vw, 120px); }
.aap-access__stick{ position:sticky; top:clamp(110px, 14vh, 150px); display:flex; flex-direction:column; gap:22px; }
.aap-access__hard{ margin:6px 0 0; font-size:clamp(1.4rem, 2.2vw, 2rem); font-weight:600; letter-spacing:-.02em; color:var(--accent); }
.aap-access__meter{ margin:18px 0 0; display:flex; align-items:center; gap:16px; font-variant-numeric:tabular-nums; font-weight:600; color:var(--aap-sand-low); font-size:.9rem; letter-spacing:.1em; }
.aap-access__n{ color:var(--accent); font-size:2.2rem; letter-spacing:-.03em; min-width:2.2ch; }
.aap-access__bar{ flex:1; max-width:320px; height:2px; background:var(--aap-line); position:relative; }
.aap-access__bar > span{ position:absolute; inset:0; background:var(--accent); transform-origin:left; transform:scaleX(var(--aap-qp, 1)); box-shadow:0 0 8px var(--accent-glow); }
.aap-qs{ list-style:none; margin:0; padding:0; counter-reset:q; border-top:1px solid var(--aap-line); }
.aap-q{
  position:relative; counter-increment:q; display:grid; grid-template-columns:3.2rem minmax(0,1fr); gap:12px; align-items:baseline;
  padding:clamp(20px, 2.4vw, 32px) 0; border-bottom:1px solid var(--aap-line);
  transition:color .45s ease, opacity .45s ease;
}
.aap-q::before{ content:""; position:absolute; left:0; top:-1px; height:1px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .7s var(--aap-ease); }
.aap-q::after{ content:counter(q, decimal-leading-zero); grid-column:1; grid-row:1; font-size:.9rem; font-weight:600; letter-spacing:.08em; color:var(--aap-sand-low); font-variant-numeric:tabular-nums; transition:color .45s ease; }
.aap-q__t{ grid-column:2; grid-row:1; font-size:clamp(1.45rem, 2.5vw, 2.35rem); font-weight:600; line-height:1.12; letter-spacing:-.03em; color:var(--aap-sand); transition:color .45s ease, transform .6s var(--aap-ease); }
.aap-q.is-on::before{ transform:scaleX(1); }
.aap-q.is-on::after{ color:var(--accent); }
.aap-js .aap-q:not(.is-on):not(.is-past) .aap-q__t{ color:var(--aap-sand-low); }
.aap-js .aap-q.is-past .aap-q__t{ color:rgba(241,228,204,.62); }
.aap-js .aap-q.is-on .aap-q__t{ transform:translateX(10px); }

.aap-enough{ margin-top:clamp(96px, 11vw, 170px); display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px clamp(32px, 6vw, 120px); align-items:end; }
.aap-enough__h{ margin:0; font-size:clamp(2rem, 4.2vw, 4rem); font-weight:600; line-height:1.02; letter-spacing:-.038em; color:var(--aap-sand); }
.aap-enough__b{ margin:0; font-size:clamp(1.08rem, 1.4vw, 1.3rem); line-height:1.55; color:var(--aap-sand-dim); padding-bottom:.35em; }
.aap-enough__drop{
  grid-column:1 / -1; margin:clamp(40px, 5vw, 72px) 0 0; padding-top:clamp(40px, 5vw, 72px); border-top:1px dashed rgba(241,228,204,.2);
  font-size:clamp(2.6rem, 7.2vw, 7rem); font-weight:700; line-height:1; letter-spacing:-.05em; text-align:center; position:relative;
}
.aap-enough__drop .aap-mask > span{ background:var(--accent-sheen), var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); padding-bottom:.06em; }
.aap-enough__drop::before{ content:""; position:absolute; left:50%; top:0; width:2px; height:clamp(40px, 5vw, 72px); margin-left:-1px;
  background:repeating-linear-gradient(180deg, var(--accent) 0 8px, transparent 8px 13px); }

/* ══════════ 05 · GATEWAY ══════════ */
.aap-gateway{ isolation:isolate; overflow:clip; }
.aap-gateway__bg{ position:absolute; top:0; right:0; left:34%; height:min(1000px, 70%); z-index:-1;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(0deg, transparent, #000 40%); -webkit-mask-composite:source-in;
          mask-image:linear-gradient(90deg, transparent, #000 38%), linear-gradient(0deg, transparent, #000 40%); mask-composite:intersect; }
.aap-gateway{ background:radial-gradient(60% 50% at 80% 20%, rgba(42,21,16,.7), transparent 70%), var(--aap-night); }
.aap-gateway__bg img{ object-position:50% 25%; filter:var(--gold-photo-mono) brightness(.8) contrast(1.08); }
.aap-gateway__bg .aap-photo__veil{ background:linear-gradient(180deg, rgba(20,14,23,.55) 0%, rgba(20,14,23,.35) 40%, rgba(20,14,23,.6) 100%); }
.aap-gateway__inner{ display:flex; flex-direction:column; gap:clamp(40px, 5vw, 72px); }
.aap-count{ margin:0; display:grid; grid-template-columns:auto minmax(0,1fr); align-items:end; gap:10px clamp(22px, 3vw, 48px); border-top:1px solid var(--aap-line-hi); padding-top:clamp(28px, 3vw, 44px); }
.aap-count__n{ font-size:clamp(4.6rem, 13vw, 12.5rem); font-weight:700; line-height:.84; letter-spacing:-.06em; font-variant-numeric:tabular-nums;
  background:var(--accent-sheen), var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); padding-bottom:.04em; }
.aap-count__t{ font-size:clamp(1.3rem, 2.3vw, 2.2rem); font-weight:500; line-height:1.15; letter-spacing:-.02em; color:var(--aap-sand); padding-bottom:.35em; max-width:20ch; }
.aap-gateway__panel{
  padding:clamp(26px, 3vw, 44px); background:rgba(20,14,23,.6); border:1px solid var(--aap-line);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
}
.aap-ladder{ list-style:none; margin:22px 0 0; padding:0; display:grid; grid-template-columns:repeat(10, minmax(0,1fr)); gap:10px; align-items:end; height:clamp(230px, 22vw, 300px); }
.aap-ladder li{ position:relative; display:flex; flex-direction:column; justify-content:flex-end; height:100%; }
.aap-ladder__bar{
  display:block; width:100%; height:calc(22% + var(--k) * 7.4%);
  background:linear-gradient(180deg, color-mix(in srgb, var(--accent) 34%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); border-top:2px solid var(--accent);
  transform-origin:bottom; position:relative;
}
.aap-ladder li:nth-child(odd) .aap-ladder__bar{ background:linear-gradient(180deg, rgba(226,155,53,.22), rgba(198,90,52,.04)); border-top-color:var(--aap-ochre); }
.aap-ladder__t{ position:absolute; left:10px; right:6px; bottom:12px; font-size:clamp(.82rem, .95vw, .98rem); font-weight:600; line-height:1.2; letter-spacing:-.005em; color:var(--aap-sand); }
.aap-seeking{ margin-top:clamp(28px, 3vw, 40px); padding-top:clamp(24px, 2.6vw, 34px); border-top:1px dashed rgba(241,228,204,.18); display:grid; grid-template-columns:auto minmax(0,1fr); gap:14px 32px; align-items:center; }
.aap-chips{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:10px; }
.aap-chips li{
  padding:10px 16px; border:1px solid var(--aap-line-hi); background:rgba(241,228,204,.04);
  font-size:clamp(.92rem, 1vw, 1rem); font-weight:500; color:var(--aap-sand); line-height:1.2;
  transition:border-color .3s ease, color .3s ease, background-color .3s ease;
}
.aap-chips li:hover{ border-color:var(--accent); color:var(--accent); background:color-mix(in srgb, var(--accent) 7%, transparent); }
.aap-chips--lg li{ font-size:clamp(1rem, 1.3vw, 1.2rem); padding:12px 20px; }
.aap-gateway__foot{ display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:24px clamp(32px, 6vw, 120px); align-items:end; }

/* ══════════════════════════════════════════════════════════════════════════
   06 · PARTNER — the seven challenges as READ MORE cards (client batch 6, A1)
   "This 'Your Strategic Partner in Africa' — there should be a better way we
   can arrange it rather than having scrolling through one to seven. We can do
   this stuff of, this read more, like we have in the homepage of FDN Capital
   Partners."
   The pinned 01→07 rail is gone (its CSS and its scroll handler with it).
   Seven .rmcard — the homepage pattern, base rules in style.css, toggle wired
   by the .rmcard__toggle IIFE in js/main.js which this page already loads —
   re-dressed in this page's dusk/sand palette and woven into a loom grid: the
   two bookends (01 ORIGINATION, 07 STRATEGIC INFRASTRUCTURE) run two columns
   wide, the five between them run one, so the seven fill three rows exactly,
   no orphan cell and no flat box-grid rhythm. Nothing is cut: every card keeps
   its number, its question, its label, its answer copy and its photograph.
   ══════════════════════════════════════════════════════════════════════════ */
.aap-partner{ background:linear-gradient(180deg, #16111F, var(--aap-night) 30%); }

.aarm-grid{
  display:grid; grid-template-columns:repeat(3, minmax(0,1fr));
  gap:clamp(14px, 1.6vw, 22px); align-items:start;
  margin-top:clamp(36px, 4.4vw, 64px);
}
.rmcard--aar-wide{ grid-column:span 2; }

/* the card, in dusk */
.aap .rmcard--aar{
  aspect-ratio:auto; min-height:clamp(300px, 23vw, 380px);
  border-color:var(--aap-line); background:var(--aap-night);
  transition:border-color .4s ease;
}
.aap .rmcard--aar:hover{ border-color:var(--aap-line-hi); }
.aap .rmcard--aar .rmcard__veil{
  background:
    linear-gradient(180deg, rgba(20,14,23,.62) 0%, rgba(20,14,23,0) 36%),
    linear-gradient(0deg, rgba(20,14,23,.97) 0%, rgba(20,14,23,.93) 30%, rgba(20,14,23,.76) 54%, rgba(20,14,23,.3) 100%);
}
/* the photograph carries the gold, as it does everywhere else on this page */
.aap .rmcard--aar .rmcard__img{ filter:var(--gold-photo) saturate(1.2) contrast(1.06) brightness(.92); }
.aap .rmcard--aar .rmcard__veil::after{ background:rgba(20,14,23,.76); }
.aap .rmcard--aar .rmcard__content{ padding:clamp(22px, 2.2vw, 34px); }

/* the gold stitch across the top edge — this page's weave language, drawn
   when the card is hovered or opened */
.aap .rmcard--aar::after{
  content:""; position:absolute; left:0; top:0; width:100%; height:2px; z-index:2;
  background:var(--accent); box-shadow:0 0 10px var(--accent-glow);
  transform:scaleX(0); transform-origin:left; transition:transform .9s var(--aap-ease);
}
.aap .rmcard--aar:hover::after, .aap .rmcard--aar.is-open::after{ transform:scaleX(1); }

/* khatam lattice watermark, top-right — Arabia's mark over Africa's question */
.aarm__lat{
  position:absolute; right:0; top:0; z-index:1; width:clamp(88px, 9vw, 132px); aspect-ratio:1/1;
  background:var(--aap-lat) 0 0/44px 44px; opacity:.13; pointer-events:none;
  -webkit-mask-image:linear-gradient(225deg, #000, transparent 72%);
          mask-image:linear-gradient(225deg, #000, transparent 72%);
  transition:opacity .5s ease;
}
.aap .rmcard--aar:hover .aarm__lat, .aap .rmcard--aar.is-open .aarm__lat{ opacity:.26; }

/* the numeral keeps the outlined form it had on the old rail. It sits IN FLOW
   directly above the question, not pinned to the card's top corner: an opened
   card grows upward from the bottom edge and a pinned numeral gets run over. */
.aarm__ix{
  margin:0 0 10px; font-size:clamp(2.1rem, 2.7vw, 3rem); font-weight:700; line-height:.82; letter-spacing:-.06em;
  color:transparent; -webkit-text-stroke:1px rgba(241,228,204,.38); font-variant-numeric:tabular-nums;
  transition:-webkit-text-stroke-color .5s ease;
}
.aap .rmcard--aar:hover .aarm__ix, .aap .rmcard--aar.is-open .aarm__ix{ -webkit-text-stroke-color:var(--accent); }

.aap .rmcard--aar .aarm__q{
  color:var(--aap-sand); font-weight:600;
  font-size:clamp(1.18rem, 1.55vw, 1.62rem); line-height:1.16; letter-spacing:-.028em; text-wrap:balance;
}
.aap .rmcard--aar-wide .aarm__q{ font-size:clamp(1.3rem, 1.9vw, 2rem); max-width:24ch; }
.aap .rmcard--aar .aarm__label{
  margin-top:14px; display:flex; align-items:center; gap:11px;
  font-size:.74rem; font-weight:600; letter-spacing:.26em; color:var(--accent);
}
.aap .rmcard--aar .aarm__label::before{ content:""; width:28px; height:2px; background:var(--accent); flex:none; }

/* the drop-down body */
.aap .rmcard--aar .rmcard__inner > *:first-child{ margin-top:20px; }
.aap .rmcard--aar .rmcard__inner > * + *{ margin-top:14px; }
.aap .rmcard--aar .aap-ch__big{
  margin:0; font-size:clamp(1.2rem, 1.55vw, 1.55rem); font-weight:600; line-height:1.14;
  letter-spacing:-.026em; color:var(--aap-sand);
}
.aap .rmcard--aar .aap-ch__big + .aap-ch__big{ margin-top:2px; }
.aap .rmcard--aar .aap-ch__drop{
  margin:0; padding-top:16px; border-top:1px dashed rgba(241,228,204,.2);
  font-size:clamp(1.02rem, 1.3vw, 1.24rem); font-weight:600; letter-spacing:-.02em; line-height:1.24; color:var(--aap-sand);
}
.aap .rmcard--aar .aap-body{ font-size:.95rem; line-height:1.62; color:var(--aap-sand-dim); }
.aap .rmcard--aar .aap-body--lg{ font-size:1.02rem; line-height:1.5; color:var(--aap-sand); }
.aap .rmcard--aar .aap-chips{ gap:7px; }
.aap .rmcard--aar .aap-chips li{ font-size:.75rem; padding:6px 11px; }
.aap .rmcard--aar .aap-path li{ font-size:.92rem; padding:10px 10px 10px 0; gap:10px; }
.aap .rmcard--aar-wide .aap-path{ grid-template-columns:repeat(4, minmax(0,1fr)); }

/* the toggle, in sand */
.aap .rmcard--aar .rmcard__toggle{ margin-top:18px; color:var(--aap-sand); }
.aap .rmcard--aar .rmcard__plus{ border-color:rgba(241,228,204,.42); }

@media (prefers-reduced-motion: reduce){
  .aap .rmcard--aar::after, .aarm__lat, .aarm__ix{ transition:none; }
}

/* two columns: the wides stand down and 07 closes the grid full-width, so no
   row is left with a hole in it */
@media (max-width: 1160px) and (min-width: 881px){
  .aarm-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .rmcard--aar-wide{ grid-column:auto; }
  .aarm-grid > .rmcard--aar:last-child{ grid-column:span 2; }
  .aap .rmcard--aar-wide .aarm__q{ font-size:clamp(1.18rem, 1.55vw, 1.62rem); max-width:none; }
  .aap .rmcard--aar-wide .aap-path{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}
.aap-path{ list-style:none; margin:0; padding:0; counter-reset:p; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--aap-line); }
.aap-path li{
  counter-increment:p; position:relative; display:flex; align-items:center; gap:14px; padding:16px 14px 16px 0; border-bottom:1px solid var(--aap-line);
  font-size:clamp(1.05rem, 1.35vw, 1.3rem); font-weight:600; letter-spacing:-.015em; color:var(--aap-sand);
}
.aap-path li:nth-child(odd){ border-right:1px solid var(--aap-line); }
.aap-path li:nth-child(even){ padding-left:18px; }
.aap-path li::before{ content:counter(p, decimal-leading-zero); font-size:.8rem; letter-spacing:.06em; color:var(--accent); font-variant-numeric:tabular-nums; }
.aap-path li:not(:last-child)::after{ content:"\2192"; margin-left:auto; color:var(--aap-sand-low); font-weight:500; }

/* ══════════ 07 · MANDATE (gold plate) ══════════ */
.aap-mandate{ position:relative; padding:0 20px clamp(96px, 10vw, 150px); background:var(--aap-night); }
.aap-mandate__plate{
  position:relative; isolation:isolate; overflow:hidden; max-width:1440px; margin-inline:auto;
  background:var(--accent-sheen), var(--accent-grad); background-color:var(--accent); color:var(--accent-on);
  padding-block:clamp(72px, 8vw, 128px);
}
.aap-mandate__weave, .aap-mandate__lattice{ position:absolute; top:0; bottom:0; width:22%; z-index:-1; opacity:.16; pointer-events:none; }
.aap-mandate__weave{ left:0; background:var(--aap-weave-ink);
  -webkit-mask-image:linear-gradient(90deg,#000,transparent); mask-image:linear-gradient(90deg,#000,transparent); }
.aap-mandate__lattice{ right:0; background:var(--aap-lat-ink) 0 0/64px 64px; opacity:.2;
  -webkit-mask-image:linear-gradient(270deg,#000,transparent); mask-image:linear-gradient(270deg,#000,transparent); }
.aap-mandate__seam{ position:absolute; left:50%; top:0; height:clamp(40px, 5vw, 72px); width:2px; margin-left:-1px; z-index:-1;
  background:repeating-linear-gradient(180deg, rgba(10,10,11,.7) 0 8px, transparent 8px 13px); }
.aap-mandate__inner{ display:grid; gap:clamp(28px, 3vw, 44px); padding-inline:clamp(20px, 5vw, 96px); }
.aap-mandate__inner *{ -webkit-text-fill-color:currentColor; }
.aap-mandate__h{ margin:0; max-width:18ch; font-size:clamp(2.3rem, 5vw, 4.8rem); font-weight:700; line-height:1; letter-spacing:-.045em; color:var(--accent-on); }
.aap-mandate__cols{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(24px, 4vw, 72px); border-top:1px solid rgba(10,10,11,.2); padding-top:clamp(24px, 2.6vw, 36px); }
.aap-mandate__cols p{ margin:0; font-size:clamp(1.02rem, 1.25vw, 1.2rem); line-height:1.6; color:rgba(10,10,11,.84); font-weight:500; }
.aap-mandate__drop{ margin:clamp(8px, 1.4vw, 20px) 0 0; font-size:clamp(1.6rem, 3.1vw, 2.9rem); font-weight:700; line-height:1.08; letter-spacing:-.034em; color:var(--accent-on); max-width:28ch; }
.aap-mandate__cta{ margin:0; }

/* ══════════ 08 · PATHWAYS ══════════ */
.aap-paths{ background:linear-gradient(180deg, var(--aap-night), #1A1120); padding-top:clamp(40px, 5vw, 80px); }
.aap-routes{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:1px; background:var(--aap-line); border:1px solid var(--aap-line); }
.aap-route{
  position:relative; display:flex; flex-direction:column; gap:14px; min-height:clamp(280px, 24vw, 340px);
  padding:clamp(22px, 2.2vw, 32px); background:var(--aap-night); overflow:hidden;
  transition:background-color .45s ease;
}
.aap-route::before{ content:""; position:absolute; left:0; top:0; height:3px; width:100%; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .6s var(--aap-ease); }
.aap-route:nth-child(odd):not(.aap-route--gold)::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--aap-weave); opacity:0; transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 55%); mask-image:linear-gradient(0deg,#000,transparent 55%); }
.aap-route:nth-child(even):not(.aap-route--gold)::after{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:var(--aap-lat) 0 0/40px 40px; opacity:0; transition:opacity .5s ease;
  -webkit-mask-image:linear-gradient(0deg,#000,transparent 55%); mask-image:linear-gradient(0deg,#000,transparent 55%); }
.aap-route > *{ position:relative; z-index:1; }
.aap-route:hover{ background:#1E1524; }
.aap-route:hover::before{ transform:scaleX(1); }
.aap-route:hover::after{ opacity:.18 !important; }
.aap-route__n{ font-size:.86rem; font-weight:600; letter-spacing:.1em; color:var(--accent); font-variant-numeric:tabular-nums; }
.aap-route__t{ margin:clamp(56px, 6vw, 96px) 0 0; font-size:clamp(1.05rem, 1.35vw, 1.3rem); font-weight:700; letter-spacing:.06em; line-height:1.2; color:var(--aap-sand); }
.aap-route__d{ margin:0; font-size:clamp(.95rem, 1.02vw, 1.02rem); line-height:1.55; color:var(--aap-sand-dim); }
.aap-route__arr{ position:absolute !important; right:clamp(22px, 2.2vw, 32px); top:clamp(18px, 2vw, 28px); font-size:1.4rem; color:var(--aap-sand-low); transition:transform .45s var(--aap-ease), color .3s ease; }
.aap-route:hover .aap-route__arr{ transform:translateX(6px); color:var(--accent); }
.aap-route--gold{ background:var(--accent-sheen), var(--accent-grad); background-color:var(--accent); color:var(--accent-on); justify-content:space-between; gap:24px; }
.aap-route--gold:hover{ background-color:var(--accent); }
.aap-route--gold *{ -webkit-text-fill-color:currentColor; }
.aap-route__close{ margin:0; font-size:clamp(1.3rem, 1.9vw, 1.8rem); font-weight:700; line-height:1.12; letter-spacing:-.028em; color:var(--accent-on); }
.aap-route--gold .aap-btn{ align-self:flex-start; padding-inline:22px; }

/* ══════════ 09 · WHY FDN ══════════ */
.aap-why{ background:#1A1120; padding-top:clamp(40px, 5vw, 80px); }
.aap-paths{ padding-bottom:clamp(96px, 9vw, 140px); }
.aap-pillars{ list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); border-top:1px solid var(--aap-line); border-left:1px solid var(--aap-line); }
.aap-pillar{
  position:relative; display:flex; flex-direction:column; gap:14px; padding:clamp(26px, 2.8vw, 44px);
  border-right:1px solid var(--aap-line); border-bottom:1px solid var(--aap-line);
  transition:background-color .4s ease;
}
.aap-pillar:hover{ background:rgba(241,228,204,.035); }
.aap-pillar__n{ position:absolute; right:clamp(26px, 2.8vw, 44px); top:clamp(26px, 2.8vw, 44px); font-size:.84rem; font-weight:600; letter-spacing:.08em; color:var(--aap-sand-low); font-variant-numeric:tabular-nums; }
.aap-pillar__ico{ width:48px; height:48px; fill:none; stroke:var(--aap-brass); stroke-width:2.4; stroke-dasharray:1; stroke-dashoffset:0; overflow:visible; transition:stroke .3s ease; }
.aap-pillar:nth-child(even) .aap-pillar__ico{ stroke:var(--aap-ochre); }
.aap-pillar:hover .aap-pillar__ico{ stroke:var(--accent); animation:aapDraw 1.1s var(--aap-ease-io); }
@keyframes aapDraw{ from{ stroke-dashoffset:1; } to{ stroke-dashoffset:0; } }
.aap-pillar__orb{ display:block; width:84px; height:84px; margin:-18px 0 -18px -18px; }
.aap-pillar__orb .cq-orb{ width:100%; height:100%; }
.aap-pillar__t{ margin:clamp(22px, 2.4vw, 34px) 0 0; font-size:clamp(1.25rem, 1.75vw, 1.65rem); font-weight:600; letter-spacing:-.022em; line-height:1.15; color:var(--aap-sand); }
.aap-pillar:first-child .aap-pillar__t{ color:var(--accent); }
.aap-pillar__d{ margin:0; font-size:clamp(.96rem, 1.04vw, 1.04rem); line-height:1.58; color:var(--aap-sand-dim); }
.aap-pillar--cq{ background:radial-gradient(80% 70% at 20% 10%, color-mix(in srgb, var(--accent) 10%, transparent), transparent 70%); }

/* ══════════ 10 · CLOSE ══════════ */
.aap-close{ position:relative; isolation:isolate; overflow:clip; background:var(--aap-night); text-align:center; }
.aap-close__halves{ position:absolute; inset:0; z-index:-1; display:grid; grid-template-columns:1fr 1fr; }
.aap-close__half{ position:relative; overflow:hidden; }
.aap-close__half img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:var(--gold-photo) brightness(.62) contrast(1.05); }
.aap-close__half--africa img{ object-position:40% 40%; }
.aap-close__half--arabia img{ object-position:70% 60%; }
.aap-close__veil{ position:absolute; inset:0; grid-column:1 / -1;
  background:radial-gradient(60% 55% at 50% 50%, rgba(20,14,23,.9), rgba(20,14,23,.72) 60%, rgba(20,14,23,.55)),
             linear-gradient(180deg, var(--aap-night) 0%, rgba(20,14,23,0) 22%, rgba(20,14,23,0) 78%, var(--aap-night) 100%); }
.aap-close__veil::after{ content:""; position:absolute; inset:0; background:var(--accent-glow); mix-blend-mode:soft-light; }
.aap-close__thread{ position:absolute; left:50%; top:0; bottom:0; width:2px; margin-left:-1px; z-index:0;
  background:repeating-linear-gradient(180deg, var(--accent) 0 10px, transparent 10px 16px); opacity:.35; box-shadow:0 0 8px var(--accent-glow); }
.aap-close__inner{ position:relative; z-index:1; padding-block:clamp(120px, 13vw, 200px) clamp(110px, 12vw, 180px); display:flex; flex-direction:column; align-items:center; }
.aap-close__inner::before{ content:""; position:absolute; left:50%; top:50%; width:min(1100px, 100%); height:84%; transform:translate(-50%,-50%); z-index:-1; background:radial-gradient(50% 50% at 50% 50%, rgba(20,14,23,.86), transparent 72%); }
.aap-close__emblem{ position:absolute; left:50%; top:42%; width:min(620px, 80vw); height:auto; transform:translate(-50%,-50%); z-index:-1;
  fill:none; stroke:rgba(241,228,204,.08); stroke-width:.6; pointer-events:none; }
.aap-close__h{ margin:0; font-size:clamp(2.1rem, 4.6vw, 4.3rem); font-weight:600; line-height:1.06; letter-spacing:-.034em; color:var(--aap-sand); }
.aap-close__h .aap-line{ display:block; }
.aap-close__h .aap-line > span{ display:block; text-wrap:balance; }
.aap-close__two{ margin:clamp(30px, 3.4vw, 48px) 0 0; font-size:clamp(1.2rem, 1.8vw, 1.6rem); font-weight:600; letter-spacing:-.018em; color:var(--aap-sand); }
.aap-close__one{ margin:12px auto 0; max-width:54ch !important; font-size:clamp(1.02rem, 1.3vw, 1.2rem); line-height:1.6; color:var(--aap-sand-dim); }
.aap-close__kick{ margin:clamp(30px, 3.4vw, 44px) 0 0; font-size:.8rem; font-weight:600; letter-spacing:.26em; text-transform:uppercase; color:var(--aap-ochre); }
.aap-close__build{ margin:14px 0 0; font-size:clamp(2.9rem, 7.6vw, 7.4rem); font-weight:700; line-height:1; letter-spacing:-.05em; }
.aap-close__build .aap-mask > span{ background:var(--accent-sheen), var(--accent-grad); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--accent); padding-bottom:.06em; }
.aap-close__ctas{ margin:clamp(34px, 3.6vw, 52px) 0 0; display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.aap-hem{ position:relative; height:18px; background:var(--aap-indigo); }
.aap-hem::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:50%; background:var(--aap-weave); }
.aap-hem::after{ content:""; position:absolute; right:0; top:0; bottom:0; width:50%; background:var(--aap-lat) 0 0/18px 18px, var(--aap-indigo); box-shadow:-2px 0 0 0 var(--accent); }

/* ══════════ MOTION — start states exist only under .aap-js (defaults = final state) ══════════ */
.aap-js .aap-strip{ transform:translateY(-24px); opacity:0; transform-box:fill-box;
  transition:transform 900ms var(--aap-ease) calc(var(--i)*40ms), opacity 900ms var(--aap-ease) calc(var(--i)*40ms); }
.aap-js .aap-col{ stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1400ms var(--aap-ease-io) calc(var(--i)*55ms); }
.aap-js .aap-loom__stitch{ clip-path:inset(0 0 100% 0); transition:clip-path 1600ms var(--aap-ease-io) 300ms; }
.aap-js .aap-w--a > span, .aap-js .aap-w--b > span{ transform:translateY(110%); transition:transform 900ms var(--aap-ease) 250ms; }
.aap-js .aap-w--b > span{ transition-delay:340ms; }
.aap-js .aap-w--arrow > span{ transform:scaleX(0); transform-origin:left; transition:transform 800ms var(--aap-ease) 650ms; }
.aap-js .aap-hero__sub, .aap-js .aap-trio, .aap-js .aap-hero__foot{ opacity:0; transform:translateY(16px); transition:opacity 700ms ease-out 850ms, transform 700ms var(--aap-ease) 850ms; }
.aap-js .aap-trio{ transition-delay:1000ms; }
.aap-js .aap-hero__foot{ transition-delay:1150ms; }
.aap-js .aap-hero.is-in .aap-strip{ transform:none; opacity:1; }
.aap-js .aap-hero.is-in .aap-col{ stroke-dashoffset:0; }
.aap-js .aap-hero.is-in .aap-loom__stitch{ clip-path:inset(0); }
.aap-js .aap-hero.is-in .aap-w > span{ transform:none; }
.aap-js .aap-hero.is-in .aap-hero__sub, .aap-js .aap-hero.is-in .aap-trio, .aap-js .aap-hero.is-in .aap-hero__foot{ opacity:1; transform:none; }

/* generic reveal: masked lines rise, blocks fade up */
.aap-js [data-aap-in]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease-out, transform .9s var(--aap-ease); }
.aap-js [data-aap-in].is-in{ opacity:1; transform:none; }
.aap-js [data-aap-in] .aap-line > span, .aap-js [data-aap-in] .aap-mask > span{ transform:translateY(108%); transition:transform .95s var(--aap-ease) .12s; }
.aap-js [data-aap-in] .aap-line + .aap-line > span{ transition-delay:.24s; }
.aap-js [data-aap-in].is-in .aap-line > span, .aap-js [data-aap-in].is-in .aap-mask > span{ transform:none; }
.aap-js .aap-together .aap-knot__star{ stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--aap-ease-io) .3s; }
.aap-js .aap-together .aap-knot__heart{ opacity:0; transition:opacity .4s ease 1s; }
.aap-js .aap-together__thread--l{ transform:scaleX(0); transform-origin:right; transition:transform 1s var(--aap-ease-io) .1s; }
.aap-js .aap-together__thread--r{ transform:scaleX(0); transform-origin:left; transition:transform 1s var(--aap-ease-io) .1s; }
.aap-js .aap-together.is-in .aap-knot__star{ stroke-dashoffset:0; }
.aap-js .aap-together.is-in .aap-knot__heart{ opacity:1; }
.aap-js .aap-together.is-in .aap-together__thread{ transform:none; }
.aap-js .aap-region .aap-photo{ clip-path:inset(0 0 0 100%); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1) .1s; }
.aap-js .aap-region--africa .aap-photo{ clip-path:inset(0 100% 0 0); }
.aap-js .aap-region .aap-photo img{ transform:scale(1.1); transition:transform 1.8s var(--aap-ease); }
.aap-js .aap-region.is-in .aap-photo{ clip-path:inset(0); }
.aap-js .aap-region.is-in .aap-photo img{ transform:none; }
.aap-js .aap-ladder__bar{ transform:scaleY(0); transition:transform 1s var(--aap-ease) calc(.25s + var(--k) * 70ms); }
.aap-js .aap-gateway__panel.is-in .aap-ladder__bar{ transform:none; }
.aap-js .aap-mandate__plate{ opacity:1; transform:none; clip-path:inset(12% 6% 12% 6%); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1); }
.aap-js .aap-mandate__plate.is-in{ clip-path:inset(0); }
.aap-js .aap-mandate__inner{ opacity:0; transform:translateY(20px); transition:opacity .8s ease .45s, transform .9s var(--aap-ease) .45s; }
.aap-js .aap-mandate__plate.is-in .aap-mandate__inner{ opacity:1; transform:none; }
.aap-js .aap-routes .aap-route{ opacity:0; transform:translateY(22px); transition:opacity .7s ease calc(var(--r, 0) * 70ms), transform .8s var(--aap-ease) calc(var(--r, 0) * 70ms), background-color .45s ease; }
.aap-js .aap-routes.is-in .aap-route{ opacity:1; transform:none; }
.aap-js .aap-routes{ opacity:1; transform:none; }
.aap-js .aap-close__inner{ opacity:1; transform:none; }
.aap-js .aap-close__inner .aap-close__two, .aap-js .aap-close__inner .aap-close__one, .aap-js .aap-close__inner .aap-close__kick, .aap-js .aap-close__inner .aap-close__ctas{ opacity:0; transform:translateY(14px); transition:opacity .7s ease .5s, transform .8s var(--aap-ease) .5s; }
.aap-js .aap-close__inner .aap-line:nth-child(3) > span{ transition-delay:.36s; }
.aap-js .aap-close__inner .aap-mask > span{ transition-delay:.7s; }
.aap-js .aap-close__inner .aap-close__ctas{ transition-delay:.9s; }
.aap-js .aap-close__inner.is-in .aap-close__two, .aap-js .aap-close__inner.is-in .aap-close__one, .aap-js .aap-close__inner.is-in .aap-close__kick, .aap-js .aap-close__inner.is-in .aap-close__ctas{ opacity:1; transform:none; }

/* lanes flow (Arabia → Africa runs right-to-left; Africa → Arabia runs left-to-right) */
.aap-flow .aap-lane__run{ animation:aapFlowL var(--aap-dur, 48s) linear infinite; }
.aap-flow .aap-lane--out .aap-lane__run{ animation-name:aapFlowR; }
.aap-flow .aap-lane.is-paused .aap-lane__run{ animation-play-state:paused; }
@keyframes aapFlowL{ from{ transform:translate3d(0,0,0); } to{ transform:translate3d(-50%,0,0); } }
@keyframes aapFlowR{ from{ transform:translate3d(-50%,0,0); } to{ transform:translate3d(0,0,0); } }

.aap-static *, .aap-static *::before, .aap-static *::after{ transition:none !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){
  .aap *, .aap *::before, .aap *::after{ transition:none !important; animation:none !important; }
}

/* ══════════ ≤ 1180 ══════════ */
@media (max-width: 1180px){
  .aap-routes{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .aap-ladder{ gap:6px; }
  .aap-ladder__t{ left:6px; font-size:.8rem; }
}

/* ══════════ PHONE ≤ 880 ══════════ */
@media (max-width: 880px){
  .aap .container{ padding-inline:16px; }
  .aap-sec{ padding-block:84px; }
  .aap-head--split{ grid-template-columns:1fr; gap:18px; }
  .aap-head{ margin-bottom:44px; }
  .aap-h2{ font-size:clamp(2.2rem, 10.4vw, 2.9rem); }
  .aap-h2 .aap-line{ display:inline; overflow:visible; }
  .aap-h2 .aap-line > span{ display:inline; }

  .aap-hero{ align-items:flex-start; }
  .aap-hero__inner{ padding-top:108px; padding-bottom:40px; }
  .aap-title{ grid-template-rows:auto auto; column-gap:.12em; font-size:clamp(2.8rem, 14vw, 3.6rem); line-height:1; }
  .aap-w--a{ grid-column:1; grid-row:1; justify-self:end; }
  .aap-w--arrow{ grid-column:2; grid-row:1 / span 2; align-self:center; }
  .aap-w--b{ grid-column:3; grid-row:2; justify-self:start; }
  .aap-hero__sub{ font-size:1.22rem; padding-inline:6px; }
  .aap-trio{ grid-template-columns:1fr; margin-top:30px; }
  .aap-trio__i{ padding:16px 16px; font-size:.95rem; }
  .aap-trio__i + .aap-trio__i{ border-left:0; border-top:1px solid var(--aap-line); }
  .aap-trio__i b, .aap-trio__i--fdn > span:last-child{ font-size:1.2rem; }
  .aap-hero__foot{ flex-direction:column; align-items:stretch; margin-top:24px; gap:16px; }
  .aap-hero__kick{ text-align:center; font-size:1.02rem; }
  .aap-hero__ctas{ flex-direction:column; }
  .aap-hero__ctas .aap-btn{ width:100%; }

  .aap-region{ grid-template-columns:1fr; gap:28px; }
  .aap-region--arabia .aap-region__photo{ order:-1; }
  .aap-region__photo{ min-height:300px; }
  .aap-photo__edge{ top:auto; left:0 !important; right:0 !important; bottom:0; width:auto; height:10px; }
  .aap-vision{ grid-template-columns:1fr; gap:2px; padding:12px 0; }
  .aap-vision__dot{ display:none; }
  .aap-vision__v{ text-align:left; }
  .aap-universe{ grid-template-columns:1fr 1fr; }
  .aap-universe li{ font-size:1.02rem; padding:14px 10px 14px 22px; }
  .aap-together{ grid-template-columns:1fr auto 1fr; }
  .aap-knot{ width:60px; height:60px; margin-inline:12px; }
  .aap-together__h{ font-size:clamp(1.8rem, 8.4vw, 2.3rem); }

  .aap-lane__head{ justify-content:flex-start !important; }
  .aap-lane__label{ font-size:.74rem; letter-spacing:.22em; }
  .aap-lane__item{ font-size:2.1rem; }
  .aap-gains{ grid-template-columns:1fr; }
  .aap-drop{ font-size:clamp(1.9rem, 9vw, 2.4rem); margin-top:64px; }
  .aap-drop .aap-line{ display:inline; overflow:visible; }

  .aap-access__grid{ grid-template-columns:1fr; gap:36px; }
  .aap-access__stick{ position:relative; top:auto; }
  .aap-access__meter{ display:none; }
  .aap-q{ grid-template-columns:2.4rem minmax(0,1fr); padding:18px 0; }
  .aap-q__t{ font-size:1.35rem; }
  /* 21.6px/600 is below WCAG "large" (24px, or 18.66px at 700), so the upcoming
     questions need the 4.5:1 normal-text floor here, not 3:1 — .52 = 4.71:1. */
  .aap-js .aap-q:not(.is-on):not(.is-past) .aap-q__t{ color:rgba(241,228,204,.52); }
  .aap-js .aap-q.is-on .aap-q__t{ transform:none; }
  .aap-enough{ grid-template-columns:1fr; margin-top:80px; }
  .aap-enough__drop{ font-size:clamp(2.1rem, 10.4vw, 2.7rem); }

  .aap-count{ grid-template-columns:1fr; }
  .aap-count__n{ font-size:clamp(4.2rem, 24vw, 6rem); }
  .aap-count__t{ font-size:1.3rem; }
  .aap-ladder{ grid-template-columns:1fr; height:auto; gap:6px; }
  .aap-ladder li{ height:40px; flex-direction:row; justify-content:flex-start; align-items:stretch; }
  .aap-ladder__bar{ height:100%; width:calc(30% + var(--k) * 7.7%); border-top:0; border-left:2px solid var(--accent); transform-origin:left;
    background:linear-gradient(90deg, color-mix(in srgb, var(--accent) 30%, transparent), color-mix(in srgb, var(--accent) 4%, transparent)); }
  .aap-ladder li:nth-child(odd) .aap-ladder__bar{ border-left-color:var(--aap-ochre); background:linear-gradient(90deg, rgba(226,155,53,.22), rgba(198,90,52,.04)); }
  .aap-js .aap-ladder__bar{ transform:scaleX(0); }
  .aap-ladder__t{ left:12px; right:auto; top:50%; bottom:auto; transform:translateY(-50%); font-size:.95rem; white-space:nowrap; }
  .aap-seeking{ grid-template-columns:1fr; }
  .aap-gateway__foot{ grid-template-columns:1fr; }

  .aarm-grid{ grid-template-columns:1fr; gap:14px; margin-top:28px; }
  .rmcard--aar-wide, .aarm-grid > .rmcard--aar:last-child{ grid-column:auto; }
  .aap .rmcard--aar{ min-height:clamp(300px, 78vw, 400px); }
  .aap .rmcard--aar .aarm__q, .aap .rmcard--aar-wide .aarm__q{ font-size:1.32rem; max-width:none; }
  .aap .rmcard--aar .aarm__ix{ font-size:2.1rem; }
  .aap .rmcard--aar .aap-ch__big{ font-size:1.3rem; }
  .aap .rmcard--aar-wide .aap-path{ grid-template-columns:1fr; }
  .aap-path{ grid-template-columns:1fr; }
  .aap-path li:nth-child(odd){ border-right:0; }
  .aap-path li:nth-child(even){ padding-left:0; }

  .aap-mandate{ padding:0 0 84px; }
  .aap-mandate__inner{ padding-inline:16px; }
  .aap-mandate__cols{ grid-template-columns:1fr; }
  .aap-mandate__h{ font-size:clamp(2.1rem, 10vw, 2.6rem); }
  .aap-mandate__drop{ font-size:1.55rem; }
  .aap-mandate__weave, .aap-mandate__lattice{ width:40%; }
  .aap-mandate__cta .aap-btn{ width:100%; }

  .aap-routes{ grid-template-columns:1fr; }
  .aap-route{ min-height:0; }
  .aap-route__t{ margin-top:18px; }
  .aap-route--gold .aap-btn{ align-self:stretch; }

  .aap-pillars{ grid-template-columns:1fr; }
  .aap-pillar{ min-height:0; }
  .aap-pillar__t{ margin-top:10px; }

  .aap-close__halves{ grid-template-columns:1fr; grid-template-rows:1fr 1fr; }
  .aap-close__veil{ grid-row:1 / -1; }
  .aap-close__h{ font-size:clamp(1.75rem, 8.4vw, 2.2rem); }
  .aap-close__build{ font-size:clamp(2.4rem, 11.6vw, 3rem); }
  .aap-close__ctas{ flex-direction:column; width:100%; }
  .aap-close__ctas .aap-btn{ width:100%; }
}

/* reduced motion / no JS flow: the lanes are static, so every item wraps into view instead of running off the edge */
.aap-static:not(.aap-js) .aap-lane__run{ width:auto; flex-wrap:wrap; white-space:normal; row-gap:4px; padding-inline:clamp(4px, 2vw, 24px); }
.aap-static:not(.aap-js) .aap-lane__track{ -webkit-mask-image:none; mask-image:none; }
.aap-static:not(.aap-js) .aap-lane--in .aap-lane__run{ justify-content:flex-end; }

/* ══════════════════════════════════════════════════════════════════════════
   0917c · aarpage build review pass
   ══════════════════════════════════════════════════════════════════════════ */

/* R1 · FACILITATION path — the flow snakes: left cell hands off to the right
   ("→"), right cell hands down to the next row ("↓"). The old rule put a "→"
   on the right-hand cells too, so the sequence appeared to run off the edge. */
.aap-path li:not(:last-child)::after{ content:"\2192"; }
.aap-path li:nth-child(even):not(:last-child)::after{ content:"\2193"; }

/* R2 · the Africa photo. lagos.jpg is a hazy, cool source, so the shared
   var(--gold-photo) grade alone left it grey against the golden Arabian
   frame — G1 wants every photo carrying the gold. Extra grade + an ochre
   wash on its own veil (no hard-coded yellow: the wash is the ochre token). */
.aap-region--africa .aap-photo img{
  filter:var(--gold-photo) saturate(1.28) brightness(.94) contrast(1.12);
}
.aap-region--africa .aap-photo__veil{
  background:linear-gradient(0deg, rgba(20,14,23,.74), rgba(20,14,23,0) 58%),
             linear-gradient(118deg, color-mix(in srgb, var(--aap-ochre) 26%, transparent), transparent 62%);
}

/* R3 · nine distinct pillar marks. Multi-path icons need the draw animation
   to run per path, and the denser marks want a slightly finer stroke. */
.aap-pillar__ico{ stroke-width:2.1; stroke-linecap:square; stroke-linejoin:miter; }
.aap-pillar:hover .aap-pillar__ico path{ animation:aapDraw 1.1s var(--aap-ease-io); }
.aap-pillar:hover .aap-pillar__ico path:nth-child(2){ animation-delay:.09s; }
.aap-pillar:hover .aap-pillar__ico path:nth-child(3){ animation-delay:.18s; }

@media (prefers-reduced-motion: reduce){
  .aap-pillar:hover .aap-pillar__ico, .aap-pillar:hover .aap-pillar__ico path{ animation:none; }
}

/* ══════════ PHONE ≤ 880 — review pass ══════════ */
@media (max-width: 880px){
  /* R4 · the client's line breaks survive on phones. He asked repeatedly this
     round for lines to "start from a new line"; collapsing .aap-line to inline
     ran his two statements together ("You Bring the Mandate. We Bring Africa
     Within Reach." as one block). Blocks cost no extra lines at 390 because
     each half already wraps. */
  .aap-h2 .aap-line, .aap-drop .aap-line{ display:block; overflow:hidden; }
  .aap-h2 .aap-line > span, .aap-drop .aap-line > span{ display:inline-block; text-wrap:balance; }
  .aap-h2{ line-height:1.04; }

  /* R1 on phones: the path is a single column, so every hand-off points down. */
  .aap-path li:not(:last-child)::after,
  .aap-path li:nth-child(even):not(:last-child)::after{ content:"\2193"; }

  .aap-pillar__ico{ width:42px; height:42px; }
}

/* R6 · the pillar index numerals measured 3.94:1 on #1A1120 (node .claude/contrast.js).
   They are aria-hidden decoration, but this site holds every run of text to AA,
   so lift the sand one step: #8C8079 measures 4.79:1 and still sits back
   behind the pillar title. Neutral sand, not an accent — no gold hard-coded. */
.aap-pillar__n{ color:#8C8079; }

/* ══════════ batch 9 (AA-3) — client: "the text sliding left to right and right
   to left is TOO BIG." The lanes drop about a third; the separators follow so the
   rhythm holds, and the lane keeps its presence without taking the section over. */
.aap-lane__item{ font-size: clamp(1.15rem, 2.05vw, 2.05rem); letter-spacing: -.025em; }
.aap-lane__sep{ font-size: clamp(.8rem, 1.4vw, 1.2rem); }
@media (max-width: 880px){
  .aap-lane__item{ font-size: clamp(1.05rem, 4.2vw, 1.5rem); }
}

/* ══ 2026-09-23 · batch 13 · the gateway count reads as one sentence ═══════
   Client: "Access to a network spanning 10,000+ businesses through FDN and
   our ecosystem partners." Lead-in and tail carry the same type so the
   sentence wraps around the counting numeral rather than captioning it. */
.aap-count{ grid-template-areas:"pre pre" "n t"; row-gap:clamp(8px, 1vw, 16px); }
.aap-count__pre{ grid-area:pre; font-size:clamp(1.3rem, 2.3vw, 2.2rem); font-weight:500;
  line-height:1.15; letter-spacing:-.02em; color:var(--aap-sand); }
.aap-count__n{ grid-area:n; }
.aap-count__t{ grid-area:t; max-width:26ch; }
@media (max-width: 880px){
  .aap-count{ grid-template-areas:"pre" "n" "t"; }
  .aap-count__pre{ font-size:1.3rem; }
  .aap-count__t{ max-width:none; }
}

/* ══ 2026-09-23 · batch 9, closing items ══════════════════════════════════
   AA-3 "the text sliding left to right and right to left is too big" — the
   lanes are a ticker, not a headline. At 1440 they were computing to ~29px;
   this brings them to ~22px so they move under the section rather than
   competing with it. */
.aap-lane__item{ font-size: clamp(.95rem, 1.5vw, 1.45rem); letter-spacing: -.02em; }
.aap-lane__sep{ font-size: clamp(.7rem, 1.05vw, .95rem); }
@media (max-width: 880px){
  .aap-lane__item{ font-size: clamp(.95rem, 3.4vw, 1.25rem); }
}

/* AA-4 / AA-5 "the image is almost touching the text" — the clouds band
   started flush under the two gain paragraphs, so the photograph read as
   though it were overlaying them. Space above it, air under the line, and a
   masked top edge so the picture fades in instead of cutting in. */
.aap-band--drop{
  margin-top: clamp(64px, 7vw, 120px);
  padding-bottom: clamp(56px, 6vw, 100px);
}
.aap-band--drop .aap-band__fig img{
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 88%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 18%, #000 88%, transparent 100%);
}
.aap-band--drop .aap-drop{ margin-top: clamp(96px, 10vw, 168px); }
@media (max-width: 880px){
  .aap-band--drop{ margin-top: 56px; padding-bottom: 48px; }
  .aap-band--drop .aap-drop{ margin-top: 84px; }
}

/* AA-1 "instead of this 'Across Arabia', he wants it to come under, after
   'capital, ambition and transformation'" — the opening paragraph now sits
   inside the ARABIA block under its heading, so it reads as that region's
   own introduction rather than the section's. */
.aap-lede--region{
  margin: clamp(14px, 1.6vw, 22px) 0 clamp(20px, 2.2vw, 30px);
  font-size: clamp(1.02rem, 1.3vw, 1.22rem); line-height: 1.6; font-weight: 400;
  color: var(--aap-sand); opacity: .9; max-width: 56ch;
}
.aap-head--split:has(> :only-child){ display: block; }

/* ══ AA-10 · THE LEADERSHIP SHAPING ARABIA'S NEXT CHAPTER ═════════════════
   "Extremely visual. No biographies." Twelve names, twelve countries, in the
   client's order. Each plate is a portrait frame carrying that nation's
   published vision — a designed seal rather than a missing photograph, and
   the exact shape licensed portraits would drop into. */
.aap-leaders{ position: relative; }
.aap-leaders__grain{
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(60% 50% at 82% 0%, rgba(226,155,53,.10), transparent 70%),
    radial-gradient(50% 40% at 6% 100%, rgba(201,164,106,.08), transparent 70%);
}
.aap-leads{
  list-style: none; margin: clamp(38px, 4.4vw, 62px) 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(22px, 2.4vw, 38px) clamp(18px, 2vw, 30px);
}
.aap-lead{ position: relative; }
.aap-lead__plate{
  position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden;
  background: linear-gradient(168deg, var(--aap-plum) 0%, var(--aap-night) 62%, #1b1020 100%);
  border: 1px solid var(--aap-line-hi);
}
/* the khatam lattice the page already uses, at plate scale */
.aap-lead__lattice{
  position: absolute; inset: 0; opacity: .30;
  background-image:
    repeating-linear-gradient( 45deg, rgba(201,164,106,.55) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(201,164,106,.55) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(  0deg, rgba(226,155,53,.22) 0 1px, transparent 1px 44px),
    repeating-linear-gradient( 90deg, rgba(226,155,53,.22) 0 1px, transparent 1px 44px);
  -webkit-mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, rgba(0,0,0,.5) 62%, transparent 100%);
          mask-image: radial-gradient(72% 62% at 50% 42%, #000 0%, rgba(0,0,0,.5) 62%, transparent 100%);
}
.aap-lead__vision{
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1;
  padding: 12px 14px;
  background: linear-gradient(180deg, transparent, rgba(20,14,23,.86) 46%);
  font-family: var(--font-mono, inherit);
  font-size: clamp(.62rem, .72vw, .74rem); font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase; color: var(--aap-brass);
}
.aap-lead__name{
  margin: 16px 0 0; font-size: clamp(1rem, 1.12vw, 1.16rem); font-weight: 600;
  line-height: 1.3; letter-spacing: -.015em; color: var(--aap-sand); text-wrap: balance;
}
.aap-lead__country{
  margin: 6px 0 0; font-size: clamp(.68rem, .78vw, .78rem); font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--aap-ochre);
}
@media (max-width: 1080px){ .aap-leads{ grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px){
  .aap-leads{ grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 16px; }
  .aap-lead__name{ font-size: 1rem; }
  .aap-lead__vision{ font-size: .6rem; letter-spacing: .12em; padding: 10px 11px; }
}

/* the plates were reading as empty boxes — give the seal real presence */
.aap-lead__plate{
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(226,155,53,.16), transparent 62%),
    linear-gradient(168deg, #2E1A2E 0%, var(--aap-night) 64%, #1b1020 100%);
}
.aap-lead__lattice{
  opacity: .62;
  background-image:
    repeating-linear-gradient( 45deg, rgba(201,164,106,.62) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(-45deg, rgba(201,164,106,.62) 0 1px, transparent 1px 15px),
    repeating-linear-gradient(  0deg, rgba(226,155,53,.30) 0 1px, transparent 1px 30px),
    repeating-linear-gradient( 90deg, rgba(226,155,53,.30) 0 1px, transparent 1px 30px);
}
/* a gold corner rule top-left and bottom-right, the page's own framing device */
.aap-lead__plate::before,
.aap-lead__plate::after{
  content: ""; position: absolute; width: 26px; height: 26px; z-index: 1;
  border: 0 solid var(--accent); opacity: .8;
}
.aap-lead__plate::before{ top: 10px; left: 10px; border-top-width: 2px; border-left-width: 2px; }
.aap-lead__plate::after{ bottom: 10px; right: 10px; border-bottom-width: 2px; border-right-width: 2px; }
.aap-lead__vision{ color: var(--aap-sand); }
/* keep the vision label clear of the bottom-right corner rule when it wraps */
.aap-lead__vision{ padding-right: 48px; }

/* ══ 2026-09-23 · batch 14 ════════════════════════════════════════════════
   B-3 "this sliding section… I feel we might need to reduce it. Remove this
   dotted dash line in both of them and reduce the padding, top and bottom,
   for both." The gold stitch under each lane goes, the type comes down
   again, and both lanes lose height. */
.aap-lane__track::after{ display: none; }
.aap-lane{ padding-block: clamp(14px, 1.4vw, 20px) 0; }
.aap-lane__track{ padding-block: clamp(8px, .9vw, 13px) clamp(10px, 1.1vw, 16px); }
.aap-lane__item{ font-size: clamp(.86rem, 1.22vw, 1.18rem); }
.aap-lane__sep{ font-size: clamp(.6rem, .86vw, .8rem); }
.aap-lane__label{ font-size: .74rem; letter-spacing: .26em; }
@media (max-width: 880px){
  .aap-lane__item{ font-size: clamp(.86rem, 3vw, 1.08rem); }
  .aap-lane{ padding-block: 12px 0; }
}

/* B-4 "for this More Than an Investment Corridor, A Strategic Exchange —
   reduce the top and bottom padding too." The separation from the paragraphs
   above stays (that was his last note); the air inside the band comes down. */
.aap-band--drop{ padding-bottom: clamp(30px, 3vw, 52px); }
.aap-band--drop .aap-drop{ margin-top: clamp(48px, 5vw, 86px); }
@media (max-width: 880px){
  .aap-band--drop{ padding-bottom: 28px; }
  .aap-band--drop .aap-drop{ margin-top: 48px; }
}

/* B-6 "this Why FDN, reduce the top and bottom padding too, just a little bit." */
#why.aap-sec{ padding-block: clamp(70px, 8vw, 122px); }
@media (max-width: 880px){ #why.aap-sec{ padding-block: 62px; } }

/* B-7 "this section should be changed into two different sections." The
   two-regions block and the line that joins them now stand apart; the join
   band carries its own rhythm instead of trailing the previous section. */
.aap-sec--band{ padding-block: 0; }
#together .aap-band--together{ margin-block: clamp(56px, 6vw, 96px); }

/* ══ B-2 · the leadership register becomes a 3-up slideshow ═══════════════
   Client: "I would like this to be a slideshow rather than showing all of
   them, like showing three. Arrows left, right, you can press to move." */
.aap-leadwrap{ position: relative; margin-top: clamp(30px, 3.4vw, 50px); }
.aap-leadwrap__nav{
  display: flex; justify-content: flex-end; gap: 10px;
  margin-bottom: clamp(16px, 1.8vw, 24px);
}
.aap-leadbtn{
  width: 48px; height: 48px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--aap-line-hi);
  color: var(--aap-sand); cursor: pointer;
  transition: border-color .2s ease, color .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.aap-leadbtn svg{ width: 17px; height: 17px; }
.aap-leadbtn.is-arrow-on{
  border-color: var(--accent) !important; color: var(--accent) !important;
  box-shadow: 0 0 0 1px rgba(226,178,76,.28), 0 10px 30px -18px var(--accent-glow);
}
.aap-leadbtn.is-arrow-off{
  border-color: rgba(241,228,204,.14) !important; color: rgba(241,228,204,.26) !important;
  box-shadow: none !important; cursor: default; opacity: .6;
}
.aap-leads__view{ overflow: hidden; }
.aap-leads{
  margin: 0; padding: 0; list-style: none;
  display: flex; flex-wrap: nowrap;
  gap: clamp(18px, 2vw, 30px);
  transition: transform .62s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.aap-lead{ flex: 0 0 var(--aap-lead-w, calc((100% - 2 * clamp(18px, 2vw, 30px)) / 3)); }
@media (max-width: 1080px){
  .aap-lead{ flex-basis: calc((100% - clamp(18px, 2vw, 30px)) / 2); }
}
@media (max-width: 620px){
  .aap-lead{ flex-basis: 100%; }
  .aap-leadwrap__nav{ justify-content: space-between; }
  .aap-leadbtn{ width: 44px; height: 44px; }
}
@media (prefers-reduced-motion: reduce){ .aap-leads{ transition: none; } }

/* the plates now carry the portraits; the lattice stays only where no freely
   licensed photograph exists (Oman's Minister of Commerce) */
.aap-lead__img{
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 26%;
  filter: contrast(1.03) saturate(.98) brightness(.98);
}
.aap-lead__plate--photo .aap-lead__vision{
  background: linear-gradient(180deg, transparent, rgba(10,7,12,.92) 52%);
  padding-top: 24px;
}
.aap-lead__plate--photo::before,
.aap-lead__plate--photo::after{ opacity: .55; }
.aap-leadcredit{
  margin: clamp(18px, 2vw, 28px) 0 0;
  font-size: .72rem; line-height: 1.55; letter-spacing: .01em;
  color: rgba(241,228,204,.34); max-width: 92ch;
}

/* B-1 "I would like a more vivid picture of Arabia. The Africa one is okay."
   The photograph is new, but the section's gold veil was flattening it into
   sepia. On the ARABIA frame only, the grade steps back and the veil softens
   so the picture reads at full strength — Africa keeps the house treatment. */
.aap-region--arabia .aap-photo img{
  filter: saturate(1.12) contrast(1.08) brightness(1.02);
}
.aap-region--arabia .aap-photo__veil{
  background: linear-gradient(0deg, rgba(20,14,23,.56), rgba(20,14,23,0) 62%);
}
.aap-region--arabia .aap-photo__veil::after{ opacity: .35; }

/* ══ 2026-09-23 · batch 14b ═══════════════════════════════════════════════
   "I want the arrows to be by the right-hand side and the left-hand side of
   the image" — the arrows now flank the portraits and sit on the vertical
   centre of the plate (--aap-lead-mid is measured in JS, because the plate's
   height depends on how many cards are in view). */
.aap-leadwrap__nav{ display: block; margin: 0; }
.aap-leadbtn{
  position: absolute; z-index: 4;
  top: var(--aap-lead-mid, 42%); transform: translateY(-50%);
  background: rgba(12, 8, 14, .78);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.aap-leadbtn[data-aap-lead-prev]{ left: -22px; }
.aap-leadbtn[data-aap-lead-next]{ right: -22px; }
@media (max-width: 1240px){
  .aap-leadbtn[data-aap-lead-prev]{ left: 8px; }
  .aap-leadbtn[data-aap-lead-next]{ right: 8px; }
}

/* "show when you hover over one of them, because nothing's happening" —
   a real hover state: the frame goes gold, the portrait lifts and warms, and
   the vision plate rises into view. Still no biographies. */
.aap-lead__plate{
  transition: border-color .32s ease, transform .42s cubic-bezier(.22,.61,.36,1), box-shadow .32s ease;
}
.aap-lead__img{ transition: filter .42s ease, transform .6s cubic-bezier(.22,.61,.36,1); }
.aap-lead__vision{ transition: transform .32s ease, background .32s ease, color .32s ease; }
.aap-lead__name, .aap-lead__country{ transition: color .28s ease; }

.aap-lead:hover .aap-lead__plate,
.aap-lead:focus-within .aap-lead__plate{
  border-color: var(--accent);
  transform: translateY(-6px);
  box-shadow: 0 26px 60px -34px rgba(0,0,0,.95), 0 0 0 1px rgba(226,178,76,.34);
}
.aap-lead:hover .aap-lead__img,
.aap-lead:focus-within .aap-lead__img{
  filter: contrast(1.06) saturate(1.06) brightness(1.06);
  transform: scale(1.035);
}
.aap-lead:hover .aap-lead__plate::before,
.aap-lead:hover .aap-lead__plate::after,
.aap-lead:focus-within .aap-lead__plate::before,
.aap-lead:focus-within .aap-lead__plate::after{ opacity: 1; }
.aap-lead:hover .aap-lead__vision,
.aap-lead:focus-within .aap-lead__vision{
  background: linear-gradient(180deg, transparent, rgba(226,178,76,.92) 56%);
  color: #17110A;
}
.aap-lead:hover .aap-lead__name,
.aap-lead:focus-within .aap-lead__name{ color: #FFFFFF; }
.aap-lead:hover .aap-lead__country,
.aap-lead:focus-within .aap-lead__country{ color: var(--accent); }
@media (prefers-reduced-motion: reduce){
  .aap-lead__plate, .aap-lead__img, .aap-lead__vision{ transition: none; }
  .aap-lead:hover .aap-lead__plate{ transform: none; }
  .aap-lead:hover .aap-lead__img{ transform: none; }
}

/* ══ batch 14b · the close, split in two ══════════════════════════════════
   10a THE BRIDGE — the claim is laid across the split the photograph makes
   instead of stacked down the middle of it. */
.aap-bridge{ position: relative; overflow: hidden; padding-block: clamp(92px, 10vw, 156px); }
.aap-bridge__inner{ position: relative; z-index: 2; }
.aap-bridge__sides{
  display: grid; grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: clamp(20px, 3vw, 54px);
}
.aap-bridge__side{ margin: 0; display: block; }
.aap-bridge__side--africa{ text-align: right; }
.aap-bridge__side--arabia{ text-align: left; }
.aap-bridge__who{
  display: block; font-size: clamp(2.6rem, 5.6vw, 5.2rem); font-weight: 600;
  line-height: 1; letter-spacing: -.045em;
}
.aap-bridge__what{
  display: block; margin-top: .3em;
  font-size: clamp(1.02rem, 1.5vw, 1.42rem); font-weight: 500; line-height: 1.32;
  letter-spacing: -.01em; color: var(--aap-sand-dim); max-width: 17ch;
}
.aap-bridge__side--africa .aap-bridge__what{ margin-left: auto; }
.aap-bridge__seam{
  display: grid; place-items: center; align-self: stretch;
  position: relative; padding-inline: clamp(8px, 1.4vw, 22px);
}
.aap-bridge__seam::before,
.aap-bridge__seam::after{
  content: ""; position: absolute; left: 50%; width: 1px;
  background: linear-gradient(var(--dir, 180deg), rgba(226,178,76,0), rgba(226,178,76,.55));
}
.aap-bridge__seam::before{ top: 0; height: calc(50% - 34px); --dir: 180deg; }
.aap-bridge__seam::after{ bottom: 0; height: calc(50% - 34px); --dir: 0deg; }
.aap-bridge__seam .aap-close__emblem{ width: 46px; height: 46px; fill: var(--accent); stroke: var(--accent); stroke-width: 1.1; }
.aap-bridge__fdn{
  margin: clamp(34px, 4vw, 60px) 0 0; text-align: center;
  font-size: clamp(2.2rem, 5vw, 4.6rem); font-weight: 600; line-height: 1.02; letter-spacing: -.045em;
}
.aap-bridge__foot{
  margin-top: clamp(30px, 3.4vw, 50px); text-align: center;
  display: grid; gap: 10px; justify-items: center;
}
.aap-bridge__foot .aap-close__two,
.aap-bridge__foot .aap-close__one{ margin: 0; max-width: 62ch; }

/* 10b THE CALL — its own clean ground, so the line lands */
.aap-call{ position: relative; overflow: hidden; padding-block: clamp(84px, 9.4vw, 140px);
  background: linear-gradient(180deg, var(--aap-night) 0%, var(--aap-plum) 62%, var(--aap-night) 100%); }
.aap-call__pat{
  position: absolute; inset: 0; pointer-events: none; opacity: .5;
  background:
    radial-gradient(56% 48% at 16% 0%,  rgba(226,155,53,.14), transparent 68%),
    radial-gradient(52% 46% at 86% 100%, rgba(201,164,106,.12), transparent 68%);
}
.aap-call__inner{ position: relative; z-index: 2; text-align: center; }
.aap-call .aap-close__kick{ margin: 0; }
.aap-call .aap-close__build{ margin: clamp(16px, 1.8vw, 26px) 0 0; }
.aap-call .aap-close__ctas{ margin: clamp(32px, 3.6vw, 52px) 0 0; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 820px){
  .aap-bridge__sides{ grid-template-columns: 1fr; gap: 26px; }
  .aap-bridge__side--africa, .aap-bridge__side--arabia{ text-align: center; }
  .aap-bridge__side--africa .aap-bridge__what{ margin-inline: auto; }
  .aap-bridge__side--arabia .aap-bridge__what{ margin-inline: auto; }
  .aap-bridge__seam{ padding-block: 4px; }
  .aap-bridge__seam::before, .aap-bridge__seam::after{ display: none; }
  .aap-bridge__seam .aap-close__emblem{ width: 36px; height: 36px; }
  .aap-bridge{ padding-block: 74px; }
  .aap-call{ padding-block: 70px; }
}
/* the split photograph is painted at z-index:-1, so the new section needs its
   own stacking context and ground or the halves fall behind the page */
.aap-bridge{ isolation: isolate; background: var(--aap-night); }
/* the emblem's base rule is the giant centred watermark — at the seam it is a mark */
.aap-bridge__seam .aap-close__emblem{
  position: static; transform: none; left: auto; top: auto; z-index: 1;
  width: 44px; height: 44px; opacity: 1;
}

/* ══ 2026-09-24 · the close, second pass (desktop) ════════════════════════
   D-1 "instead of us writing hand as A-N-D, let's be the symbol, and let's
   have capital this side. So it's going to be a one-liner rather than a
   two-liner." */
.aap-bridge__what{ max-width: 26ch; }

/* D-3 / D-4 "the space between Capital Flows In… and Let's Build the
   Corridor… make them even and a bit closer to each other", and take the
   section's top and bottom padding down. */
.aap-call{ padding-block: clamp(56px, 6vw, 92px) clamp(44px, 4.6vw, 72px); }
.aap-call .aap-close__build{ margin-top: clamp(12px, 1.2vw, 18px); }
.aap-call .aap-close__ctas{ margin-top: clamp(24px, 2.6vw, 38px); }

/* D-2 "this pattern you have under the cities, directly under the city, you
   might have to bring it down" — the woven hem sat immediately beneath the
   buttons with dead space under it. It belongs on the section's bottom edge. */
#close .aap-hem{ margin-top: clamp(40px, 4.4vw, 70px); }