/* ════════════════════════════════════════════════════════════
   AFRICA 63 — DESIGN SYSTEM · v4 "FINAL MONOCHROME"
   Strict black & white · Montserrat · Lenis + GSAP + Splitting
   Fixes: working sticky-curtain footer · bulletproof mobile ·
          creative section transitions · glowing CTA · hero open
   ════════════════════════════════════════════════════════════ */

/* @property for the rotating conic gradient on the CTA glow */
@property --angle{
  syntax:'<angle>';
  initial-value:0deg;
  inherits:false;
}

:root{
  /* ── STRICT PALETTE ── */
  --bg-black:   #0a0a0a;
  --bg-white:   #f5f5f5;
  --ink:        #f5f5f5;

  --grey-70:  rgba(245,245,245,0.70);
  --grey-50:  rgba(245,245,245,0.50);
  --grey-30:  rgba(245,245,245,0.30);
  --grey-12:  rgba(245,245,245,0.12);
  --grey-06:  rgba(245,245,245,0.06);

  --ink-70:   rgba(10,10,10,0.70);
  --ink-50:   rgba(10,10,10,0.50);
  --ink-30:   rgba(10,10,10,0.30);
  --ink-12:   rgba(10,10,10,0.12);
  --ink-06:   rgba(10,10,10,0.06);

  /* warm gold accents used ONLY for the CTA glow + brand subtle */
  --gold-1: #c9a569;
  --gold-2: #b5934e;
  --gold-3: #d8be84;
  --gold-4: #a37b33;
  --gold-deep: #8a672a;   /* readable gold for small text on white */

  /* ── TYPE ── */
  --sans: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ── FLUID TYPE SCALE — tuned so the LONGEST word always fits its
       column (no mid-word breaks) on every screen ── */
  --fs-hero:    clamp(2.6rem, 7.6vw, 6.6rem);
  --fs-h2:      clamp(2rem, 4.2vw, 3.7rem);
  --fs-h3:      clamp(1.3rem, 2vw, 2rem);
  --fs-state:   clamp(1.35rem, 2.5vw, 2.3rem);
  --fs-marquee: clamp(1.9rem, 5.2vw, 4.6rem);
  --fs-body:    clamp(0.95rem, 1.05vw, 1.06rem);
  --fs-eyebrow: clamp(0.58rem, 0.75vw, 0.7rem);

  /* ── MOTION ── */
  --ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --ease-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);

  /* ── RHYTHM ── */
  --pad-x: clamp(20px, 5.5vw, 116px);
  --pad-y: clamp(80px, 12vh, 180px);
  --max:   1440px;
  --footer-h: clamp(640px, 90vh, 920px);
}

*,*::before,*::after{ margin:0; padding:0; box-sizing:border-box; }

html{
  font-size:16px;
  background:var(--bg-black);    /* paints the curtain area */
  -webkit-text-size-adjust:100%;
  scrollbar-width:thin;
  scrollbar-color:#3a3a3a transparent;
}
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }
.lenis.lenis-stopped{ overflow:hidden; }

body{
  background:transparent;        /* CRITICAL: lets the footer show */
  color:var(--ink);
  font-family:var(--sans);
  font-weight:400;
  line-height:1.65;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

::selection{ background:var(--bg-white); color:var(--bg-black); }
::-webkit-scrollbar{ width:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:#3a3a3a; }
::-webkit-scrollbar-thumb:hover{ background:#666; }

img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; cursor:pointer; }

/* keyboard focus — visible, on-brand */
:focus-visible{
  outline:2px solid var(--gold-3);
  outline-offset:3px;
}
:focus:not(:focus-visible){ outline:none; }

/* skip-to-content (a11y) */
.skip-link{
  position:fixed; top:14px; left:14px; z-index:10000;
  background:var(--bg-white); color:var(--bg-black);
  font-size:0.7rem; font-weight:700;
  letter-spacing:0.18em; text-transform:uppercase;
  padding:12px 20px;
  transform:translateY(-220%);
  transition:transform .3s var(--ease);
}
.skip-link:focus{ transform:translateY(0); }

/* ════════════════════════════════════════════════════════════
   THEME CLASSES
   ════════════════════════════════════════════════════════════ */
.theme-black{ background:var(--bg-black); color:var(--bg-white); }
.theme-white{ background:var(--bg-white); color:var(--bg-black); }

.theme-black .t-muted{ color:var(--grey-70); }
.theme-white .t-muted{ color:var(--ink-70); }
.theme-black .t-faint{ color:var(--grey-50); }
.theme-white .t-faint{ color:var(--ink-50); }

/* ════════════════════════════════════════════════════════════
   SECTION TRANSITIONS
   Applied to the section that flows INTO the next one. The
   pseudo-element sits at the bottom edge of the parent.
   ════════════════════════════════════════════════════════════ */
.fade-white,.fade-black,.seam-gold,
.melt-blur-white,.melt-blur-black{
  position:relative;
}

/* 1 · cinematic eased fade — a tall, smootherstep-curved scrim.
      Multi-stop so the blend has no hard band and no visible edge:
      photography / dark sections dissolve into the next surface. */
.fade-white::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(190px, 32vh, 400px);
  background:linear-gradient(to bottom,
    rgba(245,245,245,0)     0%,
    rgba(245,245,245,0.009) 10%,
    rgba(245,245,245,0.058) 20%,
    rgba(245,245,245,0.163) 30%,
    rgba(245,245,245,0.318) 40%,
    rgba(245,245,245,0.5)   50%,
    rgba(245,245,245,0.682) 60%,
    rgba(245,245,245,0.837) 70%,
    rgba(245,245,245,0.942) 80%,
    rgba(245,245,245,0.991) 90%,
    var(--bg-white)         100%);
  pointer-events:none; z-index:3;
}
.fade-black::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(190px, 32vh, 400px);
  background:linear-gradient(to bottom,
    rgba(10,10,10,0)     0%,
    rgba(10,10,10,0.009) 10%,
    rgba(10,10,10,0.058) 20%,
    rgba(10,10,10,0.163) 30%,
    rgba(10,10,10,0.318) 40%,
    rgba(10,10,10,0.5)   50%,
    rgba(10,10,10,0.682) 60%,
    rgba(10,10,10,0.837) 70%,
    rgba(10,10,10,0.942) 80%,
    rgba(10,10,10,0.991) 90%,
    var(--bg-black)      100%);
  pointer-events:none; z-index:3;
}

/* 2 · gold seam — a crisp editorial boundary: hairline rule with a
      glowing diamond, centred exactly on the section edge. Reads on
      both light and dark surfaces, so it works for any pairing. */
.seam-gold{ z-index:4; }
.seam-gold::after{
  content:''; position:absolute; left:50%; bottom:0;
  transform:translate(-50%, 50%);
  width:min(560px, 74vw); height:1px;
  background:linear-gradient(90deg,
    transparent, var(--gold-2) 18%, var(--gold-3) 50%, var(--gold-2) 82%, transparent);
  box-shadow:0 0 12px rgba(201,165,105,0.5);
  pointer-events:none; z-index:5;
}
.seam-gold::before{
  content:''; position:absolute; left:50%; bottom:0;
  transform:translate(-50%, 50%) rotate(45deg);
  width:7px; height:7px;
  background:linear-gradient(135deg, var(--gold-3), var(--gold-2));
  box-shadow:
    0 0 0 4px rgba(201,165,105,0.14),
    0 0 22px rgba(201,165,105,0.55);
  pointer-events:none; z-index:6;
}

/* 3 · soft cloud / blurred organic blob */
.melt-blur-white::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(140px, 22vh, 260px);
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, var(--bg-white) 35%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(245,245,245,0.65) 65%, var(--bg-white) 100%);
  filter:blur(0.4px);
  pointer-events:none; z-index:3;
}
.melt-blur-black::after{
  content:''; position:absolute; left:0; right:0; bottom:-1px;
  height:clamp(140px, 22vh, 260px);
  background:
    radial-gradient(ellipse 120% 80% at 50% 100%, var(--bg-black) 35%, transparent 75%),
    linear-gradient(to bottom, transparent 0%, rgba(10,10,10,0.65) 65%, var(--bg-black) 100%);
  filter:blur(0.4px);
  pointer-events:none; z-index:3;
}

/* ════════════════════════════════════════════════════════════
   LAYOUT — sticky-curtain footer (FIXED MECHANICS)
   html background paints the curtain area; body is transparent
   so the footer (z-index:0) shows through when main scrolls past.
   ════════════════════════════════════════════════════════════ */
.site-main{
  position:relative;
  z-index:2;
  background:var(--bg-black);
  /* leave room for the curtain so main can scroll up over footer */
  padding-bottom:0;
  box-shadow:0 -1px 0 var(--bg-black),
             0 60px 120px rgba(0,0,0,0.55);
}
.section{ padding:var(--pad-y) var(--pad-x); position:relative; }
.container{ max-width:var(--max); margin:0 auto; width:100%; }

/* ── OVERFLOW SAFETY ──────────────────────────────────────────
   Grid/flex children default to min-width:auto and refuse to
   shrink below their content, which pushes long words off-screen.
   Force them to shrink and wrap text instead of overflowing. */
.split > *, .contact-grid > *, .work-head > *,
.footer-top > *, .svc-row > *, .tl-item > *{ min-width:0; }
.statement, .body-text, .hero-sub, .cta-sub,
.svc-row h3, .svc-row p, .tl-body p, .tl-body h4,
.trio-item p, .work-meta .t, .footer-tagline{
  overflow-wrap:break-word;
}

/* ════════════════════════════════════════════════════════════
   TYPOGRAPHY
   ════════════════════════════════════════════════════════════ */
.eyebrow{
  display:inline-flex; align-items:center; gap:16px;
  font-size:var(--fs-eyebrow);
  font-weight:700;
  letter-spacing:0.34em;
  text-transform:uppercase;
}
.eyebrow::before{
  content:''; width:44px; height:1px; background:currentColor; opacity:0.6;
}
.eyebrow .num{ opacity:0.45; font-weight:400; }

.kinetic-header{
  font-weight:900;
  font-size:var(--fs-h2);
  line-height:1.06;
  letter-spacing:-0.025em;
  text-transform:uppercase;
  margin-top:24px;
  overflow-wrap:break-word;       /* last-resort safety */
  text-wrap:balance;              /* even line lengths */
}
.kinetic-header.lower{ text-transform:none; letter-spacing:-0.02em; }

/* Each word stays atomic so characters NEVER break mid-word.
   white-space:nowrap is the key fix: it stops the inline-block word
   from shrink-wrapping and wrapping its chars. The word still wraps
   to the next line AS A WHOLE when the line runs out. */
.kinetic-header .word{
  display:inline-block;
  white-space:nowrap;
  overflow:hidden;
  vertical-align:top;
  padding-bottom:0.14em;
  margin-bottom:-0.14em;
}
.kinetic-header .char{ display:inline-block; will-change:transform; }
/* real, visible space between words — kept as a normal collapsible
   space so wrapped lines never start with a phantom indent */
.kinetic-header .whitespace{
  display:inline;
  white-space:normal;
}

.statement{
  font-weight:300;
  font-size:var(--fs-state);
  line-height:1.32;
  letter-spacing:-0.015em;
}
.statement strong{ font-weight:700; }

.body-text{
  font-size:var(--fs-body);
  font-weight:400;
  line-height:1.85;
}
.body-text + .body-text{ margin-top:1.3em; }
.theme-black .body-text{ color:var(--grey-70); }
.theme-white .body-text{ color:var(--ink-70); }

/* ════════════════════════════════════════════════════════════
   BUTTONS
   ════════════════════════════════════════════════════════════ */
.btn{
  display:inline-flex; align-items:center; gap:14px;
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  padding:20px 40px;
  border:1px solid currentColor;
  position:relative; overflow:hidden;
  transition:color .5s var(--ease);
  will-change:transform;
  white-space:nowrap;
  background:transparent;
}
.btn::before{
  content:''; position:absolute; inset:-1px;
  transform:scaleY(0); transform-origin:bottom;
  transition:transform .55s var(--ease);
  z-index:0;
}
.btn:hover::before{ transform:scaleY(1); }
.btn > *{ position:relative; z-index:1; }
.btn .arrow{ transition:transform .45s var(--ease); }
.btn:hover .arrow{ transform:translateX(7px); }

.theme-black .btn-ghost{ color:var(--bg-white); }
.theme-black .btn-ghost::before{ background:var(--bg-white); }
.theme-black .btn-ghost:hover{ color:var(--bg-black); }
.theme-white .btn-ghost{ color:var(--bg-black); }
.theme-white .btn-ghost::before{ background:var(--bg-black); }
.theme-white .btn-ghost:hover{ color:var(--bg-white); }

.theme-black .btn-fill{ background:var(--bg-white); color:var(--bg-black); border-color:var(--bg-white); }
.theme-black .btn-fill::before{ background:var(--bg-black); }
.theme-black .btn-fill:hover{ color:var(--bg-white); }
.theme-white .btn-fill{ background:var(--bg-black); color:var(--bg-white); border-color:var(--bg-black); }
.theme-white .btn-fill::before{ background:var(--bg-white); }
.theme-white .btn-fill:hover{ color:var(--bg-black); }

/* ── GOLD GLOW CTA — flowing conic border + halo ── */
.btn-glow{
  position:relative;
  display:inline-flex; align-items:center; gap:14px;
  font-family:var(--sans);
  font-size:0.74rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  padding:22px 46px;
  background:var(--bg-black); color:var(--bg-white);
  border:none;
  isolation:isolate;
  will-change:transform;
  white-space:nowrap;
  cursor:pointer;
  transition:transform .35s var(--ease-spring);
}
/* rotating gold conic ring (uses @property --angle so it animates) */
.btn-glow::before{
  content:''; position:absolute; inset:-2px;
  background:conic-gradient(from var(--angle, 0deg),
    var(--gold-1), var(--gold-3), var(--gold-2), var(--gold-4),
    var(--gold-2), var(--gold-3), var(--gold-1));
  z-index:-2;
  animation:btnGlowSpin 4s linear infinite;
  filter:blur(0.2px);
}
/* inner mask: shows ONLY the border ring */
.btn-glow::after{
  content:''; position:absolute; inset:0;
  background:var(--bg-black);
  z-index:-1;
}
/* outer soft halo */
.btn-glow{
  box-shadow:
    0 0 0 1px rgba(216,190,132,0.0),
    0 18px 48px -12px rgba(216,190,132,0.35),
    0 0 60px -20px rgba(181,147,78,0.45);
  transition:transform .35s var(--ease-spring), box-shadow .5s var(--ease);
}
.btn-glow:hover{
  transform:translateY(-2px) scale(1.02);
  box-shadow:
    0 0 0 1px rgba(216,190,132,0.0),
    0 26px 60px -14px rgba(216,190,132,0.55),
    0 0 80px -16px rgba(181,147,78,0.6);
}
.btn-glow .arrow{ transition:transform .45s var(--ease); }
.btn-glow:hover .arrow{ transform:translateX(7px); }
@keyframes btnGlowSpin{ to{ --angle:360deg; } }
/* fallback for browsers without @property */
@supports not (background: paint(something)){
  .btn-glow::before{
    background:
      linear-gradient(120deg, var(--gold-1), var(--gold-3), var(--gold-2), var(--gold-4), var(--gold-1));
    background-size:400% 100%;
    animation:btnGlowSlide 4s linear infinite;
  }
  @keyframes btnGlowSlide{
    0%{ background-position:0% 0%; }
    100%{ background-position:400% 0%; }
  }
}

.text-link{
  display:inline-flex; align-items:center; gap:12px;
  font-size:0.72rem; font-weight:700;
  letter-spacing:0.2em; text-transform:uppercase;
  padding-bottom:6px; position:relative;
}
.text-link::after{
  content:''; position:absolute; left:0; bottom:0;
  width:100%; height:1px; background:currentColor;
  transform:scaleX(0); transform-origin:left;
  transition:transform .5s var(--ease);
}
.text-link:hover::after{ transform:scaleX(1); }
.text-link .arrow{ transition:transform .45s var(--ease); }
.text-link:hover .arrow{ transform:translateX(7px); }

/* ════════════════════════════════════════════════════════════
   NAVIGATION — A63 mark in the TOP-LEFT corner;
   links + CTA (desktop) / hamburger (mobile) on the right
   ════════════════════════════════════════════════════════════ */
.nav{
  position:fixed; top:0; left:0; right:0;
  z-index:900;
  display:flex; align-items:center; justify-content:space-between;
  gap:24px;
  padding:22px var(--pad-x);
  transition:padding .5s var(--ease), background .5s var(--ease),
             border-color .5s var(--ease);
  border-bottom:1px solid transparent;
}
.nav.scrolled{
  background:rgba(10,10,10,0.78);
  backdrop-filter:blur(20px) saturate(120%);
  -webkit-backdrop-filter:blur(20px) saturate(120%);
  border-bottom:1px solid var(--grey-06);
  padding:12px var(--pad-x);
}
.nav-logo{
  display:flex; align-items:center;
  height:42px;
  flex-shrink:0;
}
.nav-logo img{
  height:clamp(30px, 3.4vw, 38px); width:auto;
  transition:height .5s var(--ease);
  filter:brightness(0) invert(1);   /* show the A63 mark in white on dark nav */
}
.nav.scrolled .nav-logo img{ height:28px; }
.nav-right{ display:flex; align-items:center; gap:42px; }

.nav-links{ display:flex; align-items:center; gap:38px; list-style:none; }
.nav-links a{
  font-size:0.66rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--grey-70);
  padding:6px 0; position:relative;
  transition:color .3s;
}
.nav-links a::after{
  content:''; position:absolute; left:0; bottom:0;
  width:0; height:1px; background:var(--bg-white);
  transition:width .45s var(--ease);
}
.nav-links a:hover, .nav-links a.active{ color:var(--bg-white); }
.nav-links a:hover::after, .nav-links a.active::after{ width:100%; }

.nav-cta{
  font-size:0.64rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--bg-black); background:var(--bg-white);
  padding:13px 26px;
  position:relative; overflow:hidden;
  transition:color .45s var(--ease);
  display:inline-block;
  will-change:transform;
}
.nav-cta::before{
  content:''; position:absolute; inset:0;
  background:var(--bg-black);
  transform:translateY(101%);
  transition:transform .5s var(--ease);
}
.nav-cta span{ position:relative; z-index:1; }
.nav-cta:hover::before{ transform:translateY(0); }
.nav-cta:hover{ color:var(--bg-white); box-shadow:inset 0 0 0 1px var(--bg-white); }

.nav-toggle{
  display:none; flex-direction:column; justify-content:center;
  align-items:flex-end; gap:7px;
  width:44px; height:44px;             /* full-size touch target */
  margin-right:-8px;                   /* optically align bars with the edge */
  background:none; border:none; padding:0;
}
.nav-toggle span{
  width:28px; height:2px; background:var(--bg-white);
  border-radius:2px;
  transition:transform .4s var(--ease-spring), opacity .25s,
             width .35s var(--ease);
}
.nav-toggle span:nth-child(2){ width:19px; }
.nav-toggle:hover span{ width:28px; }
.nav-toggle[aria-expanded="true"] span{ width:28px; }

.mobile-nav{
  position:fixed; inset:0; z-index:899;
  background:var(--bg-black);
  display:flex; flex-direction:column; justify-content:center;
  padding:0 var(--pad-x);
  transform:translateY(-100%);
  transition:transform .8s var(--ease);
}
.mobile-nav.open{ transform:translateY(0); }
.mobile-nav ul{ list-style:none; counter-reset:mnav; }
.mobile-nav li{ overflow:hidden; }
.mobile-nav a{
  display:block;
  font-weight:900;
  font-size:clamp(2rem, 10.5vw, 3.8rem);
  line-height:1.15;
  letter-spacing:-0.02em;
  text-transform:uppercase;
  color:var(--bg-white);
  padding:8px 0;
  transform:translateY(110%);
  transition:transform .8s var(--ease), color .3s, padding-left .45s var(--ease);
}
.mobile-nav ul a::before{
  counter-increment:mnav;
  content:'0' counter(mnav);
  font-size:0.58rem; font-weight:400;
  letter-spacing:0.2em;
  color:var(--grey-50);
  vertical-align:super;
  margin-right:16px;
}
.mobile-nav.open a{ transform:translateY(0); }
.mobile-nav.open li:nth-child(1) a{ transition-delay:.15s; }
.mobile-nav.open li:nth-child(2) a{ transition-delay:.23s; }
.mobile-nav.open li:nth-child(3) a{ transition-delay:.31s; }
.mobile-nav.open li:nth-child(4) a{ transition-delay:.39s; }
.mobile-nav a:hover{ color:var(--grey-50); padding-left:16px; }
.mobile-nav .mn-foot{
  margin-top:48px; padding-top:28px;
  border-top:1px solid var(--grey-12);
  font-size:0.72rem; letter-spacing:0.08em;
  color:var(--grey-50);
}
.mobile-nav .mn-foot a{ color:var(--bg-white); display:inline; font-size:0.8rem; }

/* ════════════════════════════════════════════════════════════
   PRELOADER — cinematic dark stage for the AFRICA63 wordmark.
   Everything lives in one centred column (.loader-core), so no
   element can collide with another at any viewport size.
   Logo: clip-path reveal → glint sweep → slow breathing.
   Exit: content lifts, then the curtain rises with a gold edge.
   ════════════════════════════════════════════════════════════ */
html:not(.js) #loader{ display:none; }
.js body.loading{ overflow:hidden; height:100vh; }

#loader{
  position:fixed; inset:0; z-index:9999;
  background:
    radial-gradient(ellipse 90% 70% at 50% 32%, #181818 0%, var(--bg-black) 62%);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
}
/* drifting brand aurora — faint green + gold atmosphere */
#loader::before{
  content:''; position:absolute; inset:-22%;
  background:
    radial-gradient(34% 26% at 31% 40%, rgba(40,112,52,0.17), transparent 72%),
    radial-gradient(30% 24% at 69% 60%, rgba(201,165,105,0.13), transparent 72%);
  filter:blur(46px);
  animation:loaderAurora 9s ease-in-out infinite alternate;
}
@keyframes loaderAurora{
  from{ transform:translate3d(-2.5%,-2%,0) rotate(-1.5deg) scale(1); }
  to{   transform:translate3d( 2.5%, 2%,0) rotate( 1.5deg) scale(1.07); }
}
/* gold hairline riding the bottom edge of the rising curtain */
#loader::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg,
    transparent, var(--gold-2) 20%, var(--gold-3) 50%, var(--gold-2) 80%, transparent);
  opacity:0; transition:opacity .4s var(--ease);
}
#loader.done{
  transform:translateY(-101%);
  transition:transform 1.1s var(--ease-expo) .12s;
}
#loader.done::after{ opacity:1; }

.loader-core{
  position:relative; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  gap:clamp(28px, 4.6vh, 44px);
  width:100%;
  padding:0 clamp(20px, 6vw, 56px);
  transition:opacity .5s var(--ease), transform .5s var(--ease);
}
#loader.done .loader-core{ opacity:0; transform:translateY(-28px) scale(0.985); }

/* tag — centred over the logo, wraps gracefully on tiny screens */
.loader-tag{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:clamp(10px, 2.6vw, 18px); row-gap:8px;
  font-size:clamp(0.55rem, 1.7vw, 0.66rem); font-weight:700;
  letter-spacing:clamp(0.24em, 1vw, 0.38em); text-transform:uppercase;
  color:var(--grey-50);
  text-align:center;
  opacity:0; animation:loadIn .9s var(--ease-expo) .25s forwards;
}
.loader-tag .lt-line{
  width:clamp(18px, 4.5vw, 44px); height:1px;
  background:linear-gradient(90deg, transparent, var(--grey-30));
}
.loader-tag .lt-line:last-child{
  background:linear-gradient(90deg, var(--grey-30), transparent);
}
.loader-tag .lt-dot{
  width:4px; height:4px; border-radius:50%;
  background:var(--gold-3);
  box-shadow:0 0 0 3px rgba(216,190,132,0.16);
}

/* logo — soft halo behind, clip reveal, then a slow breath */
.loader-logo{
  position:relative;
  width:clamp(240px, 66vw, 580px);
  opacity:0;
  animation:loaderLogoIn 1.2s var(--ease-expo) .3s forwards;
}
@keyframes loaderLogoIn{
  from{ opacity:0; transform:translateY(34px); }
  to{   opacity:1; transform:translateY(0); }
}
.loader-logo::before{
  content:''; position:absolute; inset:-38% -16%;
  background:radial-gradient(50% 50% at 50% 50%, rgba(245,245,245,0.085), transparent 70%);
  z-index:-1;
}
.loader-logo img{
  width:100%; height:auto;
  filter:brightness(1.22) drop-shadow(0 22px 54px rgba(0,0,0,0.55));
  clip-path:inset(0 100% 0 0);
  animation:loaderClip 1.5s var(--ease-expo) .45s forwards,
            loaderBreath 5.5s ease-in-out 2.1s infinite;
}
@keyframes loaderClip{ to{ clip-path:inset(0 0 0 0); } }
@keyframes loaderBreath{
  0%,100%{ transform:scale(1); }
  50%{ transform:scale(1.015); }
}
/* glint — a light band sweeping across the wordmark glyphs only
   (the logo PNG masks the band, so the sweep never shows as a box) */
@supports ((-webkit-mask-image:url('')) or (mask-image:url(''))){
  .loader-logo::after{
    content:''; position:absolute; inset:0;
    -webkit-mask:url('../logo/africa63-full-logo.PNG') center / contain no-repeat;
            mask:url('../logo/africa63-full-logo.PNG') center / contain no-repeat;
    background:linear-gradient(110deg,
      transparent 34%,
      rgba(255,255,255,0.05) 44%,
      rgba(255,255,255,0.75) 50%,
      rgba(255,255,255,0.05) 56%,
      transparent 66%);
    background-size:240% 100%;
    background-repeat:no-repeat;
    background-position:140% 0;
    animation:loaderSheen 2.8s var(--ease) 2s infinite;
    pointer-events:none;
  }
}
@keyframes loaderSheen{
  0%{ background-position:140% 0; }
  60%,100%{ background-position:-40% 0; }
}

/* progress — gold hairline bar, fed real values by JS */
.loader-track{
  width:min(340px, 66vw); height:2px;
  background:var(--grey-12);
  border-radius:2px;
  overflow:hidden;
  opacity:0; animation:loadIn .8s var(--ease-expo) .55s forwards;
}
.loader-bar{
  display:block; width:100%; height:100%;
  background:linear-gradient(90deg, var(--gold-2), var(--gold-3), var(--gold-1));
  box-shadow:0 0 16px rgba(216,190,132,0.55);
  transform:scaleX(0); transform-origin:left;
  will-change:transform;
}

/* counter — gold numerals pinned to the lower-right corner */
.loader-pct{
  position:absolute; right:clamp(20px, 5vw, 56px); bottom:clamp(22px, 4.5vh, 44px);
  z-index:2;
  font-weight:900; font-size:clamp(1.5rem, 4.6vw, 2.7rem);
  letter-spacing:-0.02em; line-height:1;
  font-variant-numeric:tabular-nums;
  background:linear-gradient(120deg, var(--gold-3), var(--gold-1));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  opacity:0; animation:loadIn .8s var(--ease-expo) .6s forwards;
}
/* brand line — lower-left counterweight, hidden on small screens */
.loader-note{
  position:absolute; left:clamp(20px, 5vw, 56px); bottom:clamp(26px, 4.8vh, 48px);
  z-index:2;
  font-size:0.56rem; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--grey-30);
  opacity:0; animation:loadIn .8s var(--ease-expo) .6s forwards;
}
@keyframes loadIn{ to{ opacity:1; } }

@media (max-width: 640px){
  .loader-note{ display:none; }
  .loader-logo{ width:clamp(240px, 76vw, 420px); }
}
@media (max-width: 480px){
  .loader-tag .lt-line{ display:none; }   /* keep the tag on one clean row */
}

/* ════════════════════════════════════════════════════════════
   HERO — wordmark + designed "Public Affairs" eyebrow
   Background swaps africa1.jpg (desktop) -> africa2.jpg (mobile)
   ════════════════════════════════════════════════════════════ */
.hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:clamp(120px, 16vh, 180px) var(--pad-x) clamp(160px, 24vh, 280px);
  overflow:hidden;
  isolation:isolate;
}
.hero-bg{
  position:absolute; inset:-14% 0 0;
  background-image:url('../images/africa1.jpg');
  background-size:cover;
  background-position:50% 18%;
  z-index:-2;
  will-change:background-position, opacity, transform;
}
.hero-shade{
  position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom,
    rgba(10,10,10,0.86) 0%,
    rgba(10,10,10,0.50) 38%,
    rgba(10,10,10,0.62) 72%,
    rgba(10,10,10,0.94) 100%);
}

/* designed eyebrow above the wordmark */
.hero-eyebrow{
  display:inline-flex; align-items:center; gap:18px;
  font-size:clamp(0.6rem, 0.85vw, 0.74rem);
  font-weight:700; letter-spacing:0.38em;
  text-transform:uppercase;
  color:var(--bg-white);
  margin-bottom:clamp(28px, 4vh, 44px);
  position:relative;
}
.hero-eyebrow .he-line{
  width:clamp(42px, 6vw, 80px); height:1px;
  background:linear-gradient(90deg, transparent, var(--bg-white), transparent);
  background-size:200% 1px;
  animation:eyebrowGlow 4s var(--ease) infinite;
}
.hero-eyebrow .he-divider{
  width:5px; height:5px; border-radius:50%;
  background:var(--bg-white);
  box-shadow:0 0 0 3px rgba(245,245,245,0.18);
}
@keyframes eyebrowGlow{
  0%,100%{ background-position:0% 0%; opacity:0.85; }
  50%{ background-position:100% 0%; opacity:1; }
}

/* the AFRICA63 wordmark — large, centered, with open animation */
.hero-brand-wrap{
  width:clamp(260px, 56vw, 760px);
  margin:0 auto clamp(40px, 6vh, 64px);
  position:relative;
}
.hero-brand-mask{
  overflow:hidden;
  display:block;
  clip-path:inset(0 100% 0 0);
}
.hero-ready .hero-brand-mask{
  animation:heroClipReveal 1.6s var(--ease-expo) .15s forwards;
}
.hero-brand-mask img{
  width:100%;
  transform:translateY(40px) scale(1.05);
  opacity:0;
  filter:brightness(1.18) drop-shadow(0 8px 40px rgba(0,0,0,0.55));
}
.hero-ready .hero-brand-mask img{
  animation:heroBrandRise 1.4s var(--ease-expo) .3s forwards;
}
@keyframes heroClipReveal{
  to{ clip-path:inset(0 0 0 0); }
}
@keyframes heroBrandRise{
  to{ transform:translateY(0) scale(1); opacity:1; }
}

.hero-sub{
  font-weight:300;
  font-size:clamp(1rem, 1.4vw, 1.24rem);
  line-height:1.78;
  color:var(--grey-70);
  max-width:60ch;
  margin:0 auto;
  opacity:0; transform:translateY(20px);
}
.hero-ready .hero-sub{
  animation:loadIn .9s var(--ease-expo) 1.0s forwards,
            loadInY .9s var(--ease-expo) 1.0s forwards;
}
@keyframes loadInY{ to{ transform:none; } }

.hero-actions{
  display:flex; gap:18px; flex-wrap:wrap; justify-content:center;
  margin-top:clamp(38px, 5vh, 56px);
  opacity:0; transform:translateY(20px);
}
.hero-ready .hero-actions{
  animation:loadIn .9s var(--ease-expo) 1.25s forwards,
            loadInY .9s var(--ease-expo) 1.25s forwards;
}

.hero-eyebrow{ opacity:0; }
.hero-ready .hero-eyebrow{ animation:loadIn .8s var(--ease-expo) 0s forwards; }

.hero-scroll{
  position:absolute; bottom:30px; left:50%;
  transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:12px;
  font-size:0.56rem; font-weight:700;
  letter-spacing:0.32em; text-transform:uppercase; color:var(--grey-50);
  z-index:4; opacity:0;
}
.hero-ready .hero-scroll{ animation:loadIn .6s var(--ease) 1.6s forwards; }
.hero-scroll::after{
  content:''; width:1px; height:42px;
  background:linear-gradient(to bottom, var(--grey-50), transparent);
  animation:scrollDrip 2.2s var(--ease) infinite;
}
@keyframes scrollDrip{
  0%{ transform:scaleY(0); transform-origin:top; }
  55%{ transform:scaleY(1); transform-origin:top; }
  56%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}

/* interior page hero */
.page-hero{
  padding:clamp(150px, 22vh, 240px) var(--pad-x) clamp(110px, 18vh, 200px);
  overflow:hidden; isolation:isolate;
}

/* ════════════════════════════════════════════════════════════
   WORK GRID / ENGAGEMENTS — full-colour photography, soft-radius
   media, gold sector chips, and an explicit arrow affordance so
   every card reads as clickable.
   ════════════════════════════════════════════════════════════ */
.work-head{
  display:flex; justify-content:space-between; align-items:flex-end;
  gap:32px; flex-wrap:wrap; margin-bottom:clamp(40px, 6vh, 64px);
}
.work-lead{
  font-size:clamp(0.98rem, 1.15vw, 1.1rem);
  font-weight:300; line-height:1.8;
  max-width:56ch;
  margin:18px 0 0;
  color:var(--ink-70);
}
.work-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:clamp(34px, 4.5vh, 56px) clamp(16px, 2vw, 28px);
}
.work-card{ position:relative; display:block; }
.work-card.span-7{ grid-column:span 7; }
.work-card.span-5{ grid-column:span 5; }
.work-media{
  position:relative; overflow:hidden;
  background:#161616;
  border-radius:clamp(12px, 1.4vw, 18px);
  box-shadow:0 14px 34px -18px rgba(10,10,10,0.35);
  transition:transform .6s var(--ease), box-shadow .6s var(--ease);
}
.work-card:hover .work-media{
  transform:translateY(-7px);
  box-shadow:0 34px 70px -26px rgba(10,10,10,0.5);
}
.work-card.span-7 .work-media{ aspect-ratio:16/10; }
.work-card.span-5 .work-media{ aspect-ratio:4/5; }
.work-media img{
  width:100%; height:100%; object-fit:cover;
  will-change:transform;
}
.work-media::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.42), transparent 44%);
  pointer-events:none;
}
.work-tag{
  position:absolute; top:16px; left:16px; z-index:2;
  font-size:0.56rem; font-weight:700;
  letter-spacing:0.24em; text-transform:uppercase;
  background:linear-gradient(120deg, var(--gold-3), var(--gold-1));
  color:var(--bg-black);
  padding:8px 16px;
  border-radius:100px;
  box-shadow:0 8px 22px rgba(10,10,10,0.35);
}
.work-meta{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; padding-top:18px;
}
.work-chip{
  display:inline-block;
  font-size:0.55rem; font-weight:700;
  letter-spacing:0.22em; text-transform:uppercase;
  color:var(--gold-deep);
  background:rgba(201,165,105,0.12);
  border:1px solid rgba(181,147,78,0.35);
  border-radius:100px;
  padding:5px 12px;
  margin:0 6px 10px 0;
}
.theme-black .work-chip{
  color:var(--gold-3);
  background:rgba(201,165,105,0.1);
  border-color:rgba(216,190,132,0.3);
}
.work-meta .t{
  font-weight:900; font-size:clamp(1rem, 1.4vw, 1.25rem);
  letter-spacing:-0.01em; text-transform:uppercase;
  line-height:1.2;
}
.work-meta .y{
  font-size:0.62rem; font-weight:700;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--grey-50);
  margin-top:8px;
}
.theme-white .work-meta .y{ color:var(--ink-50); }
.wm-arrow{
  flex-shrink:0;
  width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:1.05rem; line-height:1;
  color:var(--gold-deep);
  border:1px solid rgba(181,147,78,0.45);
  transition:background .45s var(--ease), color .45s var(--ease),
             transform .45s var(--ease), border-color .45s var(--ease);
}
.work-card:hover .wm-arrow{
  background:linear-gradient(120deg, var(--gold-3), var(--gold-1));
  border-color:transparent;
  color:var(--bg-black);
  transform:rotate(-45deg);
}

/* ════════════════════════════════════════════════════════════
   PARTNER MARQUEE
   ════════════════════════════════════════════════════════════ */
.partner-marquee{
  overflow:hidden;
  padding:clamp(30px, 5vh, 56px) 0;
  border-top:1px solid var(--ink-12);
  border-bottom:1px solid var(--ink-12);
  width:100%;
}
.theme-black .partner-marquee{ border-color:var(--grey-12); }
.partner-track{
  display:flex; align-items:center;
  width:max-content;
  will-change:transform;
}
.partner-item{
  display:flex; align-items:center;
  gap:clamp(24px, 4vw, 60px);
  padding-right:clamp(24px, 4vw, 60px);
  font-weight:900;
  font-size:var(--fs-marquee);
  letter-spacing:-0.02em;
  text-transform:uppercase;
  white-space:nowrap;
  line-height:1.15;
}
.theme-white .partner-item{ color:var(--bg-black); }
.theme-black .partner-item{ color:var(--bg-white); }
.partner-item.outline{
  color:transparent !important;
  -webkit-text-stroke:1.5px var(--bg-black);
}
.theme-black .partner-item.outline{ -webkit-text-stroke-color:var(--bg-white); }
.partner-item .dot{
  width:clamp(7px, 0.9vw, 12px); height:clamp(7px, 0.9vw, 12px);
  border-radius:50%; flex-shrink:0;
}
.theme-white .partner-item .dot{ background:var(--bg-black); }
.theme-black .partner-item .dot{ background:var(--bg-white); }

.no-motion .partner-track{ animation:cssMarquee 30s linear infinite; }
@keyframes cssMarquee{ to{ transform:translateX(-50%); } }

/* ════════════════════════════════════════════════════════════
   SERVICE ROWS
   ════════════════════════════════════════════════════════════ */
.svc-rows{ border-top:1px solid var(--grey-12); }
.theme-white .svc-rows{ border-color:var(--ink-12); }
.svc-row{
  display:grid;
  grid-template-columns:80px 1fr auto;
  align-items:center;
  gap:clamp(16px, 3vw, 56px);
  padding:clamp(24px, 4vh, 42px) 0;
  border-bottom:1px solid var(--grey-12);
  transition:padding-left .5s var(--ease);
}
.theme-white .svc-row{ border-color:var(--ink-12); }
.svc-row:hover{ padding-left:clamp(8px, 1.8vw, 22px); }
.svc-row .num{
  font-weight:300; font-size:0.74rem;
  letter-spacing:0.2em; color:var(--grey-50);
  font-variant-numeric:tabular-nums;
}
.theme-white .svc-row .num{ color:var(--ink-50); }
.svc-row h3{
  font-weight:900;
  font-size:var(--fs-h3);
  letter-spacing:-0.015em;
  text-transform:uppercase;
  line-height:1.1;
}
.svc-row p{
  grid-column:2;
  font-size:0.94rem; line-height:1.75;
  color:var(--grey-70); max-width:62ch;
  margin-top:6px; font-weight:300;
}
.theme-white .svc-row p{ color:var(--ink-70); }
.svc-row .arr{
  font-size:1.3rem;
  opacity:0; transform:translateX(-12px);
  transition:all .45s var(--ease);
  grid-row:1; grid-column:3;
}
.svc-row:hover .arr{ opacity:1; transform:none; }

/* trio (approach / values) */
.trio{
  display:grid; grid-template-columns:repeat(3, 1fr);
  gap:clamp(28px, 4vw, 60px);
}
.trio-item{ padding-top:22px; border-top:1px solid var(--ink-12); }
.theme-black .trio-item{ border-color:var(--grey-12); }
.trio-item .num{
  font-weight:900; font-size:clamp(2rem, 3.6vw, 3.2rem);
  letter-spacing:-0.03em; line-height:1; opacity:0.18;
}
.trio-item h4{
  font-weight:900; font-size:clamp(1.1rem, 1.7vw, 1.5rem);
  text-transform:uppercase; letter-spacing:-0.01em;
  margin-top:14px;
}
.trio-item p{
  font-size:0.94rem; font-weight:300; line-height:1.78; margin-top:12px;
}
.theme-black .trio-item p{ color:var(--grey-70); }
.theme-white .trio-item p{ color:var(--ink-70); }

/* timeline */
.timeline{ border-top:1px solid var(--grey-12); }
.theme-white .timeline{ border-color:var(--ink-12); }
.tl-item{
  display:grid; grid-template-columns:220px 1fr;
  gap:clamp(20px, 3.5vw, 70px);
  padding:clamp(30px, 4.5vh, 50px) 0;
  border-bottom:1px solid var(--grey-12);
  transition:padding-left .5s var(--ease);
}
.theme-white .tl-item{ border-color:var(--ink-12); }
.tl-item:hover{ padding-left:14px; }
.tl-year{
  font-weight:900; font-size:clamp(1.25rem, 1.9vw, 1.85rem);
  letter-spacing:-0.02em; line-height:1.15; text-transform:uppercase;
}
.tl-body h4{
  font-weight:700; font-size:1.06rem; letter-spacing:0.01em;
  text-transform:uppercase;
}
.tl-body p{
  font-size:0.94rem; font-weight:300; line-height:1.78;
  margin-top:10px; max-width:64ch;
}
.theme-black .tl-body p{ color:var(--grey-70); }
.theme-white .tl-body p{ color:var(--ink-70); }

/* split */
.split{
  display:grid; grid-template-columns:0.85fr 1.15fr;
  gap:clamp(36px, 5vw, 100px); align-items:start;
}
.split-sticky{ position:sticky; top:120px; }

/* image band */
.img-band{ position:relative; overflow:hidden; }
.img-band img{
  width:100%; height:100%; object-fit:cover;
  filter:grayscale(1) contrast(1.05);
  will-change:transform;
}
.img-band .cap{
  position:absolute; left:22px; bottom:18px; z-index:2;
  font-size:0.58rem; font-weight:700;
  letter-spacing:0.24em; text-transform:uppercase;
  color:var(--bg-white);
  text-shadow:0 1px 14px rgba(0,0,0,0.7);
}
.img-band::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(to top, rgba(10,10,10,0.5), transparent 50%);
  pointer-events:none;
}

/* CTA */
.cta{ text-align:center; max-width:1000px; margin:0 auto; }
.cta-sub{
  font-weight:300;
  font-size:clamp(1rem, 1.32vw, 1.18rem);
  line-height:1.72; max-width:54ch;
  margin:28px auto 0;
}
.theme-white .cta-sub{ color:var(--ink-70); }
.theme-black .cta-sub{ color:var(--grey-70); }
.cta-actions{
  display:flex; gap:18px; justify-content:center;
  flex-wrap:wrap; margin-top:48px;
}

/* ════════════════════════════════════════════════════════════
   CONTACT FORM
   ════════════════════════════════════════════════════════════ */
.contact-grid{
  display:grid; grid-template-columns:0.9fr 1.1fr;
  gap:clamp(36px, 5vw, 96px); align-items:start;
}
.contact-info{ display:flex; flex-direction:column; gap:30px; margin-top:46px; }
.ci-item{ display:flex; gap:18px; align-items:flex-start; }
.ci-icon{
  width:44px; height:44px; flex-shrink:0;
  border:1px solid var(--ink-30);
  display:flex; align-items:center; justify-content:center;
  transition:all .45s var(--ease);
}
.ci-item:hover .ci-icon{
  background:var(--bg-black); color:var(--bg-white); border-color:var(--bg-black);
}
.ci-k{
  font-size:0.56rem; font-weight:700;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--ink-50);
}
.ci-v{ font-size:0.98rem; font-weight:700; margin-top:6px; }
.ci-v a:hover{ opacity:0.55; }

.form{
  background:var(--bg-black); color:var(--bg-white);
  padding:clamp(28px, 4vw, 54px);
}
.form .field{ margin-bottom:24px; }
.form .field label{
  font-size:0.56rem; font-weight:700;
  letter-spacing:0.26em; text-transform:uppercase;
  color:var(--grey-50); margin-bottom:11px; display:block;
  transition:color .3s;
}
.form .field:focus-within label{ color:var(--bg-white); }
.form-row{ display:grid; grid-template-columns:1fr 1fr; gap:22px; }
.field input, .field select, .field textarea{
  font-family:var(--sans); font-size:1rem; font-weight:400;
  color:var(--bg-white);
  background:transparent; border:none;
  border-bottom:1px solid var(--grey-30);
  padding:12px 0; outline:none; width:100%;
  transition:border-color .3s;
}
.field input:focus, .field select:focus, .field textarea:focus{
  border-bottom-color:var(--bg-white);
}
.field input::placeholder, .field textarea::placeholder{ color:var(--grey-30); }
.field textarea{ resize:none; height:124px; line-height:1.65; }
.field select{
  appearance:none; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23f5f5f5' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 2px center;
  padding-right:22px;
}
.field select option{ background:var(--bg-black); color:var(--bg-white); }
.form-foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:18px; flex-wrap:wrap; margin-top:8px;
}
.form-note{ font-size:0.6rem; letter-spacing:0.1em; color:var(--grey-50); }
.form-note span{ color:var(--bg-white); font-weight:700; }
.form .btn{ color:var(--bg-white); border-color:var(--bg-white); }
.form .btn::before{ background:var(--bg-white); }
.form .btn:hover{ color:var(--bg-black); }
.form-success{
  display:none; flex-direction:column; align-items:center;
  justify-content:center; text-align:center;
  min-height:320px; gap:18px;
}
.form-success.show{ display:flex; }
.form-success .fs-icon{
  width:60px; height:60px;
  border:1px solid var(--bg-white);
  display:flex; align-items:center; justify-content:center;
  font-size:1.4rem;
}
.form-success h4{
  font-weight:900; font-size:1.4rem;
  text-transform:uppercase; letter-spacing:-0.01em;
}
.form-success p{ font-weight:300; color:var(--grey-70); }

/* ════════════════════════════════════════════════════════════
   WORLD-CLASS FOOTER — sticky curtain reveal (FIXED)
   Now actually visible on PC + mobile because:
     · html bg paints the curtain area
     · body bg is transparent
     · footer z-index 0 (NOT -1) so it stacks above html bg
     · main z-index 2 covers the footer until scrolled past
   ════════════════════════════════════════════════════════════ */
.site-footer{
  position:sticky;
  bottom:0;
  z-index:0;                       /* below main(z:2), above html bg */
  background:var(--bg-black);
  color:var(--bg-white);
  display:flex; flex-direction:column;
  justify-content:flex-end;
  min-height:var(--footer-h);
  overflow:hidden;
}
.footer-inner{
  padding:clamp(70px, 10vh, 130px) var(--pad-x) 0;
  position:relative; z-index:2;
}
/* hairline gold accent at the very top of the footer */
.footer-inner::before{
  content:''; position:absolute; left:var(--pad-x); right:var(--pad-x); top:0;
  height:1px;
  background:linear-gradient(90deg,
    transparent, var(--gold-2) 18%, var(--gold-3) 50%, var(--gold-2) 82%, transparent);
  opacity:0.55;
}
.footer-top{
  display:grid;
  grid-template-columns:1.6fr 1fr 1fr 1.2fr;
  gap:clamp(34px, 4vw, 76px);
  padding-bottom:clamp(46px, 7vh, 90px);
}
.footer-tagline{
  font-weight:900;
  font-size:clamp(1.3rem, 2.2vw, 2.05rem);
  line-height:1.2; letter-spacing:-0.02em;
  text-transform:uppercase;
  max-width:17ch;
}
.footer-tagline em{
  font-style:normal;
  background:linear-gradient(120deg, var(--gold-3), var(--gold-1));
  -webkit-background-clip:text;
          background-clip:text;
  color:transparent;
}
.footer-col h5{
  font-size:0.58rem; font-weight:700;
  letter-spacing:0.3em; text-transform:uppercase;
  color:var(--grey-50); margin-bottom:24px;
}
.footer-col ul{ list-style:none; }
.footer-col li{ margin-bottom:14px; }
.footer-col a{
  display:inline-block;
  font-size:0.93rem; font-weight:400;
  color:var(--grey-70);
  transition:color .3s;
  will-change:transform;
}
.footer-col a:hover{ color:var(--bg-white); }

.footer-bar{
  display:flex; justify-content:space-between; align-items:center;
  gap:18px; flex-wrap:wrap;
  padding:24px 0 0;
  border-top:1px solid var(--grey-12);
  font-size:0.6rem; letter-spacing:0.14em;
  color:var(--grey-50);
  text-transform:uppercase;
}
.footer-bar a{ color:var(--bg-white); }
.footer-socials{ display:flex; gap:10px; margin-top:24px; }
.f-soc{
  width:36px; height:36px;
  border:1px solid var(--grey-30);
  display:flex; align-items:center; justify-content:center;
  font-size:0.6rem; font-weight:700; letter-spacing:0.04em;
  color:var(--grey-70);
  transition:all .45s var(--ease);
}
.f-soc:hover{ background:var(--bg-white); color:var(--bg-black); border-color:var(--bg-white); }

/* edge-to-edge AFRICA63 wordmark at the bottom of footer */
.footer-logo{
  display:block;
  width:100vw;
  margin-left:calc(50% - 50vw);
  padding-top:clamp(24px, 4vh, 50px);
  line-height:0;
  user-select:none; pointer-events:none;
  position:relative; z-index:1;
}
.footer-logo img{
  width:100%; height:auto; display:block;
  filter:brightness(1.16);
  transform-origin:bottom center;
  will-change:transform;
}

/* ════════════════════════════════════════════════════════════
   BACK TO TOP
   ════════════════════════════════════════════════════════════ */
.to-top{
  position:fixed; bottom:26px; right:24px; z-index:850;
  width:48px; height:48px;
  background:var(--bg-white); color:var(--bg-black);
  border:1px solid var(--bg-white);
  display:flex; align-items:center; justify-content:center;
  font-size:1rem; font-weight:700;
  opacity:0; pointer-events:none; transform:translateY(14px);
  transition:opacity .4s var(--ease), transform .4s var(--ease),
             background .35s var(--ease), color .35s var(--ease);
}
.to-top.show{ opacity:1; pointer-events:auto; transform:none; }
.to-top:hover{ background:var(--bg-black); color:var(--bg-white); }

/* ════════════════════════════════════════════════════════════
   NO-JS SAFETY — content must be fully readable without JS
   ════════════════════════════════════════════════════════════ */
html:not(.js) .hero-eyebrow,
html:not(.js) .hero-sub,
html:not(.js) .hero-actions,
html:not(.js) .hero-scroll{ opacity:1 !important; transform:none !important; }
html:not(.js) .hero-brand-mask{ clip-path:none !important; }
html:not(.js) .hero-brand-mask img{ opacity:1 !important; transform:none !important; }
html:not(.js) .partner-track{ animation:cssMarquee 32s linear infinite; }
html:not(.js) .to-top{ display:none; }

/* ════════════════════════════════════════════════════════════
   404 PAGE
   ════════════════════════════════════════════════════════════ */
.err-hero{
  min-height:100svh;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  text-align:center;
  padding:120px var(--pad-x) 80px;
  isolation:isolate; overflow:hidden;
}
.err-code{
  font-weight:900;
  font-size:clamp(6rem, 24vw, 17rem);
  line-height:0.9; letter-spacing:-0.05em;
  background:linear-gradient(120deg, var(--bg-white) 30%, var(--grey-30));
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
}
.err-title{
  font-weight:900; text-transform:uppercase;
  font-size:clamp(1.1rem, 2.4vw, 1.7rem);
  letter-spacing:0.08em; margin-top:18px;
}
.err-sub{
  font-weight:300; color:var(--grey-70);
  max-width:46ch; margin-top:16px; line-height:1.8;
}

/* ════════════════════════════════════════════════════════════
   CUSTOM CURSOR
   ════════════════════════════════════════════════════════════ */
.cursor-dot,.cursor-ring{
  position:fixed; top:0; left:0;
  pointer-events:none; z-index:9998;
  transform:translate(-50%,-50%);
  mix-blend-mode:difference;
  will-change:transform;
}
.cursor-dot{
  width:6px; height:6px; border-radius:50%;
  background:var(--bg-white);
}
.cursor-ring{
  width:38px; height:38px; border-radius:50%;
  border:1px solid var(--bg-white);
  transition:width .35s var(--ease), height .35s var(--ease), opacity .3s;
}
.cursor-ring.is-link{ width:68px; height:68px; }
body.cursor-hidden .cursor-dot,
body.cursor-hidden .cursor-ring{ opacity:0; }
@media (hover:none),(pointer:coarse){
  .cursor-dot,.cursor-ring{ display:none; }
}

/* ════════════════════════════════════════════════════════════
   RESPONSIVE — bulletproof mobile + PC
   ════════════════════════════════════════════════════════════ */

/* MOBILE BG SWAP — africa2.jpg is the mobile-perfect image */
@media (max-width: 820px){
  .hero-bg{ background-image:url('../images/africa2.jpg'); background-position:50% 30%; }
}

@media (max-width: 1080px){
  .split{ grid-template-columns:1fr; gap:40px; }
  .split-sticky{ position:static; }
  .contact-grid{ grid-template-columns:1fr; gap:50px; }
  .footer-top{ grid-template-columns:1fr 1fr; gap:42px 32px; }
  .footer-tagline{ grid-column:1 / -1; max-width:24ch; }
  .trio{ grid-template-columns:1fr; gap:30px; }
  .work-card.span-7, .work-card.span-5{ grid-column:span 12; }
  .work-card.span-5 .work-media{ aspect-ratio:16/10; }
  .tl-item{ grid-template-columns:1fr; gap:12px; }
  .work-head{ flex-direction:column; align-items:flex-start; }
}

@media (max-width: 820px){
  .nav-links, .nav-cta{ display:none; }
  .nav-toggle{ display:flex; }
  .nav-right{ gap:0; }
  .svc-row{ grid-template-columns:48px 1fr auto; gap:14px 22px; }
  .svc-row p{ grid-column:2 / -1; }
  .form-row{ grid-template-columns:1fr; gap:0; }
  .hero-brand-wrap{ width:80vw; }
  .footer-tagline{ font-size:1.5rem; }
  .nav-logo img{ height:26px; }
  .nav.scrolled .nav-logo img{ height:22px; }
  .work-grid{ row-gap:34px; }
  .work-meta{ padding-top:15px; }
  .wm-arrow{ width:40px; height:40px; font-size:0.95rem; }
  .seam-gold::after{ width:min(420px, 80vw); }
}

@media (max-width: 560px){
  :root{
    --pad-y:clamp(60px, 9vh, 100px);
    --footer-h:auto;
  }
  .footer-top{ grid-template-columns:1fr; gap:36px; padding-bottom:40px; }
  .hero-actions{ width:100%; }
  .hero-actions .btn, .hero-actions .btn-glow, .cta-actions .btn, .cta-actions .btn-glow{
    flex:1 1 100%; justify-content:center;
  }
  .field input, .field select, .field textarea{ font-size:16px; } /* no iOS zoom */
  .btn-glow{ padding:18px 28px; }
  .site-footer{ position:relative; }  /* simplify on tiny screens */
  .hero-eyebrow{ font-size:0.58rem; letter-spacing:0.32em; gap:14px; }
  .hero-eyebrow .he-line{ width:30px; }
  .footer-bar{ font-size:0.55rem; }
}

@media (max-width: 380px){
  .partner-item{ font-size:1.8rem; }
  .nav-logo img{ height:22px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    scroll-behavior:auto !important;
  }
  .no-motion .partner-track{ animation:none !important; }
  .hero-brand-mask{ clip-path:none !important; }
  .hero-brand-mask img{ transform:none !important; opacity:1 !important; }
}