/* ══════════════════════════════════════════════════════════════════════════
   0918 · A1 — africa-arabia.html: break the text walls with photography
   .claude/CLIENT-FEEDBACK-0918.md → "### AFRICA → ARABIA PAGE" · A1

   Client: "we need more pictures… it's more of text than pictures… if there's
   a better way they can be arranged, so it does not look too shaky."

   Nothing in the copy moved: every one of the 124 document lines is still on
   the page, verbatim and in document order. What changed is the ARRANGEMENT —
   the statements that ALREADY close each section now land full-bleed on a
   photograph, the two heaviest sequences (#partner, #pathways) became
   image-led, and the dead columns (#access left rail, #regions Africa block,
   the Mandate plate's empty right half) are filled with real photography from
   assets/img. No image is sourced from the web.

   Colour law unchanged: ochre = Africa · brass = Arabia · the --accent tokens
   = FDN. Every photo is graded with the shared tokens, var(--gold-photo) for
   colour and var(--gold-photo-mono) for the black-and-white source — never a
   hard-coded gold. THE PATTERN (.goldpat, css/style.css) goes on this page's
   two GOLD surfaces only: the Mandate plate and the gold route card.
   ══════════════════════════════════════════════════════════════════════════ */

/* ══════════ THE BAND · a full-bleed photographic statement ══════════
   The bands are section CHILDREN, outside .container, so they bleed edge to
   edge without a single negative margin — no 100vw, therefore no horizontal
   overflow at any width. */
.aap .aap-band{
  position: relative; isolation: isolate; overflow: clip;
  background: var(--aap-night);
  padding-block: clamp(96px, 11vw, 176px);
}
.aap .aap-band > .container{ position: relative; z-index: 1; }
.aap .aap-band__fig{ position: absolute; inset: 0; z-index: -1; margin: 0; overflow: hidden; }
.aap .aap-band__fig img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) brightness(.44) contrast(1.08);
  transform: scale(1.06); transition: transform 2.4s var(--aap-ease);
}
.aap .aap-band__fig--mono img{ filter: var(--gold-photo-mono) brightness(.5) contrast(1.14); }
.aap .aap-band__veil{
  position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(72% 62% at 50% 50%, rgba(20,14,23,.52), rgba(20,14,23,.74) 78%),
    linear-gradient(180deg, var(--aap-night) 0%, rgba(20,14,23,0) 24%, rgba(20,14,23,0) 76%, var(--aap-night) 100%);
}
.aap .aap-band__veil::after{
  content: ""; position: absolute; inset: 0;
  background: var(--accent-glow); mix-blend-mode: soft-light;
}
/* the photograph settles as its copy arrives */
.aap-js .aap-band:has(.is-in) .aap-band__fig img{ transform: scale(1); }

/* the bands sit flush against the section they close — they ARE the break */
.aap .aap-regions, .aap .aap-access, .aap .aap-partner{ padding-bottom: 0; }
.aap .aap-exchange{ padding-bottom: 0; }
.aap .aap-why{ padding-top: 0; }

/* ── the three closing statements ──────────────────────────────────────── */
.aap .aap-band--together{ padding-block: clamp(104px, 12vw, 190px); }
.aap .aap-band--together .aap-together{ margin-top: 0; }

.aap .aap-band--drop .aap-drop{ margin: 0; }
.aap .aap-band--drop{ padding-block: clamp(110px, 13vw, 200px); }

.aap .aap-band--enough .aap-enough{ margin-top: 0; }
.aap .aap-band--enough{ padding-block: clamp(96px, 11vw, 168px); }
.aap .aap-band--enough .aap-enough__drop{ border-top-color: rgba(241,228,204,.32); }

/* WHY FDN? — the header is the picture, the pillars sit under it */
.aap .aap-band--why{ padding-block: clamp(120px, 13vw, 200px); }
.aap .aap-band--why .aap-head{ margin-bottom: 0; }

/* ══════════ REGIONS · Africa gets faces, work and place ══════════ */
.aap .aap-trip{
  display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; margin-top: 4px;
}
.aap .aap-trip__i{
  position: relative; margin: 0; overflow: hidden; isolation: isolate;
  height: clamp(118px, 11vw, 168px); background: var(--aap-plum);
}
.aap .aap-trip__i img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) saturate(1.16) brightness(.86) contrast(1.06);
  transform: scale(1.02); transition: transform .9s var(--aap-ease), filter .5s ease;
}
.aap .aap-trip__veil{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,14,23,.62), rgba(20,14,23,.06) 62%),
              linear-gradient(118deg, color-mix(in srgb, var(--aap-ochre) 22%, transparent), transparent 64%);
}
.aap .aap-trip__i::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: var(--aap-ochre); transform: scaleX(0); transform-origin: left;
  transition: transform .6s var(--aap-ease);
}
.aap .aap-trip__i:hover img{ transform: scale(1.07); filter: var(--gold-photo) saturate(1.24) brightness(.96) contrast(1.06); }
.aap .aap-trip__i:hover::after{ transform: scaleX(1); }
.aap-js .aap-region--africa .aap-trip__i{ clip-path: inset(0 100% 0 0); transition: clip-path 1.1s cubic-bezier(.77,0,.18,1); }
.aap-js .aap-region--africa .aap-trip__i:nth-child(2){ transition-delay: .12s; }
.aap-js .aap-region--africa .aap-trip__i:nth-child(3){ transition-delay: .24s; }
.aap-js .aap-region--africa.is-in .aap-trip__i{ clip-path: inset(0); }

/* ══════════ EXCHANGE · each lane runs over the market it comes from ══════════
   The two lanes were pure type on a gradient — the loudest text-only stretch on
   the page. Each now travels over the region it leaves: Arabia → Africa over a
   Gulf skyline, Africa → Arabia over the Lagos waterfront, both masked back to
   the lane's own dusk so the running words stay the subject. */
.aap .aap-lane{ position: relative; isolation: isolate; }
.aap .aap-lane::before{
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-repeat: no-repeat; background-size: cover;
  filter: var(--gold-photo) brightness(.38) contrast(1.12); opacity: .62;
}
.aap .aap-lane--in::before{
  background-image: url('../assets/img/v4-place-05.webp'); background-position: 60% 58%;
  -webkit-mask-image: linear-gradient(270deg, #000, rgba(0,0,0,.35) 46%, transparent 82%);
          mask-image: linear-gradient(270deg, #000, rgba(0,0,0,.35) 46%, transparent 82%);
}
.aap .aap-lane--out::before{
  background-image: url('../assets/img/showcase-3.webp'); background-position: 45% 58%;
  -webkit-mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35) 46%, transparent 82%);
          mask-image: linear-gradient(90deg, #000, rgba(0,0,0,.35) 46%, transparent 82%);
}

/* ══════════ ACCESS · the empty left rail becomes a photograph ══════════
   The sticky block now runs the height of the viewport and the picture takes
   whatever the type leaves, so the ten questions always scroll past a face
   instead of past nothing. */
.aap .aap-access__stick{
  height: calc(100vh - clamp(150px, 19vh, 205px));
  max-height: 780px; min-height: 420px;
}
.aap .aap-access__fig{
  position: relative; flex: 1 1 auto; min-height: 0; margin: 4px 0 0;
  overflow: hidden; isolation: isolate; background: var(--aap-plum);
}
.aap .aap-access__fig img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) brightness(.76) contrast(1.08);
}
.aap .aap-access__figveil{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(22,17,31,.94), rgba(22,17,31,.12) 58%),
              linear-gradient(90deg, rgba(22,17,31,.5), transparent 46%);
}
.aap .aap-access__figveil::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
}

/* ══════════ PARTNER · a picture for every challenge ══════════
   The question column was a sticky line of type over a tall empty rail. It now
   carries the photograph that answers it, so all seven blocks read as pictures
   with a question on them rather than seven paragraphs in a row. */
.aap .aap-ch__fig{
  position: relative; margin: clamp(22px, 2.4vw, 32px) 0 0;
  height: clamp(196px, 17vw, 268px); overflow: hidden; isolation: isolate;
  background: var(--aap-plum);
}
.aap .aap-ch__fig img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) brightness(.72) contrast(1.06) saturate(1.05);
  transform: scale(1.05); transition: transform 1.4s var(--aap-ease), filter .6s ease;
}
.aap .aap-ch__figveil{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(20,14,23,.78), rgba(20,14,23,.1) 64%);
}
.aap .aap-ch__figveil::after{
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--accent); transform: scaleY(0); transform-origin: top;
  transition: transform .8s var(--aap-ease);
}
.aap .aap-ch.is-on .aap-ch__fig img{ transform: scale(1); filter: var(--gold-photo) brightness(.92) contrast(1.06) saturate(1.12); }
.aap .aap-ch.is-on .aap-ch__figveil::after{ transform: scaleY(1); }
/* With a picture in the question column the two halves no longer match in
   height, so the answer centres against the picture instead of hanging from the
   top and leaving a hole under itself. */
.aap .aap-ch__ans{ padding-top: 0; justify-content: center; }

/* ══════════ PATHWAYS · the seven routes become picture cards ══════════
   Each card had ~90px of empty space above its title. That space is now the
   photograph, the index sits on it, and the copy runs beneath — the same
   card family, finally carrying an image. */
.aap .aap-routes .aap-route:not(.aap-route--gold){
  display: grid; grid-template-rows: auto auto 1fr; gap: 0; padding: 0;
  min-height: clamp(300px, 25vw, 360px);
}
.aap .aap-route__fig{
  position: relative; grid-row: 1; margin: 0; overflow: hidden; isolation: isolate;
  height: clamp(146px, 12.5vw, 188px); background: var(--aap-plum);
}
.aap .aap-route__fig img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) brightness(.7) contrast(1.06);
  transform: scale(1.03); transition: transform 1s var(--aap-ease), filter .5s ease;
}
.aap .aap-route__figveil{
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, var(--aap-night), rgba(20,14,23,.18) 58%),
              linear-gradient(180deg, rgba(20,14,23,.62), transparent 46%);
}
.aap .aap-routes .aap-route:not(.aap-route--gold) .aap-route__n{
  position: absolute; left: clamp(20px, 2.2vw, 30px); top: clamp(16px, 1.8vw, 24px); z-index: 2;
}
.aap .aap-routes .aap-route:not(.aap-route--gold) .aap-route__t{
  grid-row: 2; margin: 0; padding: clamp(20px, 2.1vw, 28px) clamp(20px, 2.2vw, 30px) 0;
}
.aap .aap-routes .aap-route:not(.aap-route--gold) .aap-route__d{
  grid-row: 3; padding: 12px clamp(20px, 2.2vw, 30px) clamp(22px, 2.2vw, 30px);
}
.aap .aap-route:hover .aap-route__fig img{ transform: scale(1.08); filter: var(--gold-photo) brightness(.86) contrast(1.06); }
/* the hover weave/lattice wash belongs under the copy, never over the picture */
.aap .aap-route:not(.aap-route--gold)::after{ top: clamp(146px, 12.5vw, 188px); }

/* THE PATTERN on the one gold card here (G3: gold surfaces only).
   africa-arabia.css sets `.aap-route > *{position:relative;z-index:1}` for the
   weave/lattice wash, which would knock .goldpat out of its absolute box —
   so the layer is re-pinned here explicitly. */
.aap .aap-route--gold{ position: relative; }
.aap .aap-route--gold > *:not(.goldpat){ position: relative; z-index: 1; }
.aap .aap-route--gold > .goldpat{ position: absolute; inset: 0; z-index: 0; }

/* ══════════ MANDATE · the gold plate carries THE PATTERN and a face ══════════
   The plate's right half was empty. It now holds the mandate portrait — a
   single, clearly-named, swappable <img src> for the photo Dara is supplying. */
.aap .aap-mandate__plate > .goldpat{ z-index: 0; opacity: .075; }
.aap .aap-mandate__weave{ opacity: .1; }
.aap .aap-mandate__lattice{ opacity: .12; }
.aap .aap-mandate__inner{
  position: relative; z-index: 1;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  column-gap: clamp(32px, 4.4vw, 80px); align-items: start;
}
.aap .aap-mandate__h,
.aap .aap-mandate__cols,
.aap .aap-mandate__drop,
.aap .aap-mandate__cta{ grid-column: 1; }
.aap .aap-mandate__cols{ grid-template-columns: 1fr; gap: 18px; }
.aap .aap-mandate__fig{
  grid-column: 2; grid-row: 1 / span 4; align-self: stretch; position: relative; margin: 0;
  overflow: hidden; isolation: isolate; min-height: clamp(360px, 33vw, 540px);
  background: var(--accent-deep);
}
.aap .aap-mandate__fig img{
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  filter: var(--gold-photo) contrast(1.04);
}
.aap .aap-mandate__fig::after{
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(0deg, rgba(10,10,11,.34), transparent 52%);
  box-shadow: inset 0 0 0 1px rgba(10,10,11,.28);
}

/* ══════════ WHY FDN · the pillar grid reads lighter under its picture ══════════ */
.aap .aap-why .aap-pillars{ margin-top: clamp(64px, 7vw, 104px); }

/* ══════════ ≤ 1180 ══════════ */
@media (max-width: 1180px){
  .aap .aap-mandate__inner{ grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); }
  .aap .aap-mandate__fig{ min-height: 320px; }
  .aap .aap-ch__fig{ height: clamp(170px, 20vw, 220px); }
}

/* ══════════ PHONE ≤ 880 ══════════ */
@media (max-width: 880px){
  .aap .aap-band{ padding-block: 76px; }
  .aap .aap-band--together,
  .aap .aap-band--drop,
  .aap .aap-band--enough,
  .aap .aap-band--why{ padding-block: 80px; }
  .aap .aap-band__veil{
    background: radial-gradient(90% 60% at 50% 50%, rgba(20,14,23,.56), rgba(20,14,23,.8) 82%),
                linear-gradient(180deg, var(--aap-night) 0%, rgba(20,14,23,0) 18%, rgba(20,14,23,0) 82%, var(--aap-night) 100%);
  }

  .aap .aap-trip{ gap: 6px; }
  .aap .aap-trip__i{ height: 104px; }

  /* the sticky rail is static on phones, so the picture takes a fixed band */
  .aap .aap-access__stick{ height: auto; max-height: none; min-height: 0; }
  .aap .aap-access__fig{ flex: none; height: 240px; margin-top: 14px; }

  .aap .aap-ch__fig{ height: 200px; margin-top: 18px; }
  .aap .aap-routes .aap-route:not(.aap-route--gold){ min-height: 0; }
  .aap .aap-route__fig{ height: 200px; }
  .aap .aap-route:not(.aap-route--gold)::after{ top: 200px; }

  .aap .aap-mandate__inner{ grid-template-columns: 1fr; }
  .aap .aap-mandate__fig{ grid-column: 1; grid-row: auto; min-height: 0; height: 280px; margin-top: 6px; }
  .aap .aap-why .aap-pillars{ margin-top: 0; }
}

/* ══════════ reduced motion ══════════ */
@media (prefers-reduced-motion: reduce){
  .aap .aap-band__fig img,
  .aap .aap-trip__i img,
  .aap .aap-ch__fig img,
  .aap .aap-route__fig img{ transform: none !important; }
  .aap .aap-trip__i{ clip-path: none !important; }
}
.aap-static .aap-band__fig img,
.aap-static .aap-trip__i img,
.aap-static .aap-ch__fig img,
.aap-static .aap-route__fig img{ transform: none; }
.aap-static .aap-trip__i{ clip-path: none; }
/* Reduced motion never runs the scroll pass, so no challenge is ever "on" —
   without this every one of the seven pictures would sit at its dimmed
   resting grade. Static readers get all seven fully lit. */
.aap:not(.aap-js) .aap-ch__fig img,
.aap-static .aap-ch__fig img{
  filter: var(--gold-photo) brightness(.92) contrast(1.06) saturate(1.12);
}
.aap:not(.aap-js) .aap-ch__figveil::after,
.aap-static .aap-ch__figveil::after{ transform: scaleY(1); }