/* ============================================================
   THE HOUSE OF ASWAKAA — Corporate Website
   Palette: Deep Navy + Gold + Ivory
   ============================================================ */
:root {
  --navy-900: #052A20;
  --navy-800: #0B4D3B;
  --navy-700: #0E5C46;
  --navy-600: #126B52;
  --navy-500: #17805F;
  --gold: #D4AF37;
  --gold-light: #E3C766;
  --gold-pale: #EFE4BB;
  --ivory: #F6F4EE;
  --white: #ffffff;
  --grey-100: #E7DFC7;
  --grey-300: #D9D2BC;
  --grey-500: #6B7A72;
  --grey-700: #35443C;
  --font-serif: "Trajan Pro", "Cinzel", Georgia, serif;
  --font-display: "Trajan Pro", "Cinzel", Georgia, serif;
  --font-sans: "Montserrat", "Segoe UI", Helvetica, Arial, sans-serif;
  --nav-h: 112px;
  --maxw: 1200px;
  --shadow-sm: 0 2px 10px rgba(6, 38, 29, .08);
  --shadow-md: 0 10px 34px rgba(6, 38, 29, .14);
  --shadow-lg: 0 24px 60px rgba(6, 38, 29, .22);
  --ease: cubic-bezier(.22, .8, .28, 1);
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 12px); }
body {
  font-family: var(--font-sans);
  font-size: 17px; line-height: 1.75;
  color: var(--grey-700);
  background: var(--ivory);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }

h1, h2, h3, .serif { font-family: var(--font-display); color: var(--navy-800); font-weight: 700; line-height: 1.18; }
h1 { font-size: clamp(2.4rem, 5.2vw, 4.2rem); letter-spacing: -.01em; }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.55rem); }

.container { width: min(var(--maxw), 92%); margin-inline: auto; }
section { padding: clamp(70px, 9vw, 120px) 0; position: relative; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 14px;
  font-size: .8rem; font-weight: 600; letter-spacing: .28em;
  text-transform: uppercase; color: var(--gold);
  margin-bottom: 18px;
}
.eyebrow::before { content: ""; width: 44px; height: 2px; background: var(--gold); }
.lead { font-size: clamp(1.08rem, 1.6vw, 1.3rem); color: var(--grey-500); max-width: 760px; }
.section-head { max-width: 820px; margin-bottom: clamp(36px, 5vw, 64px); }
.section-head p { margin-top: 16px; }
.center { text-align: center; }
.center .eyebrow { justify-content: center; }
.center .eyebrow::before { display: none; }
.center .section-head, .center .lead { margin-inline: auto; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 15px 34px; border-radius: 3px;
  font-weight: 600; font-size: .95rem; letter-spacing: .04em;
  transition: all .35s var(--ease); cursor: pointer; border: 1.5px solid transparent;
  position: relative; overflow: hidden;
}
.btn svg { transition: transform .35s var(--ease); }
.btn:hover svg { transform: translateX(5px); }
.btn-gold { background: linear-gradient(135deg, var(--gold) 0%, #B8952A 100%); color: var(--navy-900); box-shadow: 0 8px 24px rgba(212, 175, 55, .35); }
.btn-gold:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(212, 175, 55, .45); }
.btn-outline { border-color: rgba(255, 255, 255, .55); color: var(--white); }
.btn-outline:hover { background: rgba(255, 255, 255, .1); border-color: var(--white); transform: translateY(-3px); }
.btn-outline-dark { border-color: var(--navy-700); color: var(--navy-700); }
.btn-outline-dark:hover { background: var(--navy-700); color: var(--white); transform: translateY(-3px); }

/* ============================================================
   NAVIGATION
   ============================================================ */
.top-strip {
  background: var(--navy-900); color: rgba(255, 255, 255, .72);
  font-size: .78rem; letter-spacing: .06em;
  padding: 7px 0; position: relative; z-index: 1002;
}
.top-strip .container { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
.top-strip span b { color: var(--gold-light); font-weight: 600; }

.navbar {
  position: sticky; top: 0; z-index: 1000;
  height: var(--nav-h);
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(6, 38, 29, .07);
  transition: box-shadow .35s var(--ease), height .35s var(--ease);
}
.navbar.scrolled { box-shadow: var(--shadow-md); height: 88px; }
.navbar .container { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.nav-logo img { height: 96px; width: auto; transition: height .35s var(--ease); }
.navbar.scrolled .nav-logo img { height: 74px; }

.nav-menu { display: flex; align-items: center; gap: 6px; }
.nav-menu > li { position: relative; }
.nav-menu > li > a {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 15px; font-size: .92rem; font-weight: 500;
  color: var(--navy-800); letter-spacing: .02em;
  border-radius: 4px; transition: color .25s, background .25s;
}
.nav-menu > li > a:hover, .nav-menu > li > a.active { color: var(--gold); }
.nav-menu > li > a.active { font-weight: 600; }
.nav-menu > li > a .chev { transition: transform .3s var(--ease); }
.nav-menu > li:hover > a .chev { transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 14px); left: 50%;
  transform: translateX(-50%) translateY(14px);
  min-width: 260px; background: var(--white);
  border-radius: 8px; box-shadow: var(--shadow-lg);
  border-top: 3px solid var(--gold);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: all .3s var(--ease);
  padding: 10px;
}
/* invisible bridge across the 14px gap between the nav item and the panel.
   Without it the pointer leaves the li on the way down, :hover drops, and the
   dropdown closes before it can be reached. Inert while closed — the panel
   carries pointer-events: none until it opens. */
.dropdown::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -17px; height: 17px;
}
.nav-menu > li:hover .dropdown, .nav-menu > li:focus-within .dropdown {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.dropdown a {
  display: block; padding: 11px 16px; border-radius: 6px;
  font-size: .9rem; color: var(--grey-700); font-weight: 500;
  transition: all .22s;
}
.dropdown a small { display: block; font-size: .74rem; color: var(--grey-500); font-weight: 400; }
.dropdown a:hover { background: var(--grey-100); color: var(--navy-800); padding-left: 22px; }
.dropdown a:hover small { color: var(--gold); }

.nav-right { display: flex; align-items: center; gap: 16px; }

/* language switch */
.lang-switch {
  display: flex; border: 1.5px solid var(--grey-300); border-radius: 30px; overflow: hidden;
}
.lang-switch button {
  border: 0; background: transparent; padding: 7px 15px;
  font-size: .78rem; font-weight: 700; letter-spacing: .08em;
  color: var(--grey-500); cursor: pointer; transition: all .3s;
  font-family: var(--font-sans);
}
.lang-switch button.on { background: var(--navy-800); color: var(--gold-light); }

.nav-cta { display: inline-block; }
.nav-cta .btn {
  padding: 11px 24px; font-size: .85rem;
  background: linear-gradient(135deg, #2e8b57 0%, #1d6b40 55%, #124c2c 100%);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(29, 107, 64, .35);
}
.nav-cta .btn:hover {
  background: linear-gradient(135deg, #38a266 0%, #23784a 55%, #165934 100%);
  box-shadow: 0 14px 34px rgba(29, 107, 64, .45);
}

/* hamburger */
.hamburger {
  display: none; flex-direction: column; gap: 5.5px;
  background: none; border: 0; cursor: pointer; padding: 8px; z-index: 1101;
}
.hamburger span { width: 26px; height: 2.5px; background: var(--navy-800); border-radius: 2px; transition: all .35s var(--ease); }
/* on the dark full-screen overlay the navy bars vanish — go gold when open */
.hamburger.open span { background: var(--gold-light); }
.hamburger.open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.hamburger.open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* ============================================================
   HERO
   ============================================================ */
.hero {
  height: calc(100svh - var(--nav-h) - 34px); min-height: 560px;
  display: flex; align-items: center;
  background: var(--navy-900);
  color: var(--white); overflow: hidden; position: relative;
  padding: 0;
}
.hero-media {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
}
.hero-media video, .hero-media img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 30%;
  animation: kenburns 22s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to { transform: scale(1.05) translateX(-0.8%); }
}
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(90deg, rgba(5, 34, 26, .92) 0%, rgba(5, 34, 26, .72) 42%, rgba(5, 34, 26, .28) 78%, rgba(5, 34, 26, .15)),
    linear-gradient(0deg, rgba(5, 34, 26, .65) 0%, transparent 30%);
}
.hero .container { position: relative; z-index: 2; }
.hero-inner { max-width: 720px; }

.hero-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: .74rem; letter-spacing: .3em; text-transform: uppercase;
  color: var(--gold-light); font-weight: 600; margin-bottom: 18px;
}
.hero-eyebrow::before { content: ""; width: 36px; height: 1.5px; background: var(--gold); }

.hero h1 { color: var(--white); margin-bottom: 8px; font-size: clamp(2rem, 4.2vw, 3.3rem); }
.hero h1 .accent { color: var(--gold-light); font-style: italic; }
.typing-wrap { min-height: 1.3em; display: block; color: var(--gold-light); font-style: italic; }
.typing-cursor { display: inline-block; width: 3px; height: .9em; background: var(--gold-light); margin-left: 4px; vertical-align: -0.08em; animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero p.hero-sub { max-width: 620px; color: rgba(255, 255, 255, .82); font-size: clamp(.98rem, 1.4vw, 1.12rem); margin: 16px 0 28px; }
.hero-ctas { display: flex; gap: 16px; flex-wrap: wrap; }
.hero-credit {
  position: absolute; right: 16px; bottom: 12px; z-index: 2;
  font-size: .66rem; letter-spacing: .06em; color: rgba(255, 255, 255, .45);
}
.hero-credit a:hover { color: var(--gold-light); }


/* hero video carousel */
.hero-media.multi video {
  position: absolute; inset: 0;
  opacity: 0; transition: opacity 1.4s ease;
}
.hero-media.multi video.on { opacity: 1; }
.hc-dots {
  position: absolute; right: 22px; bottom: 18px; z-index: 3;
  display: flex; gap: 9px;
}
.hc-dots button {
  width: 11px; height: 11px; border-radius: 50%;
  border: 1.5px solid var(--gold-light); background: transparent;
  cursor: pointer; padding: 0; transition: all .3s var(--ease);
}
.hc-dots button:hover { transform: scale(1.25); }
.hc-dots button.on { background: var(--gold); border-color: var(--gold); box-shadow: 0 0 10px rgba(212, 175, 55, .7); }


/* hero slide content swap */
.hero-inner { transition: opacity .45s var(--ease), transform .45s var(--ease); }
.hero-inner.swap { opacity: 0; transform: translateY(26px); }

/* stats strip (below hero) — photo bg with emerald/gold duotone */
.stats-strip {
  position: relative; overflow: hidden;
  background-image: var(--stats-img, url("../bgimages/9bbbb.jpg"));
  background-size: cover; background-position: center; background-repeat: no-repeat;
  background-color: var(--navy-800);
  border-top: 3px solid var(--gold);
  padding: 40px 0;
}
.stat .num, .stat .lbl { text-shadow: 0 2px 6px rgba(4, 26, 20, .85), 0 0 22px rgba(4, 26, 20, .5); }
.stats-strip .container { position: relative; }
.stats-strip .container {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px;
}
.stats-strip.cols-3 .container { grid-template-columns: repeat(3, 1fr); }

/* Partnership section — an investor should get the whole arc in one read:
   what partnership means, who we work with, what we bring, where to go next. */
.partner-lead {
  margin-top: 18px; font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.9vw, 1.45rem); color: var(--navy-800); line-height: 1.45;
}
.partner-lead + p { margin-top: 14px; line-height: 1.8; }
.partner-lead + p b {
  font-weight: 600; color: var(--navy-800);
  box-shadow: inset 0 -.28em 0 rgba(212, 175, 55, .3);
}
.partner-who { margin-bottom: 4px; color: var(--grey-500); }

.sub-label {
  display: flex; align-items: center; gap: 12px;
  margin: 32px 0 12px;
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #8A6F1C;
}
.sub-label::after { content: ""; flex: 1; height: 1px; background: rgba(212, 175, 55, .35); }
.reveal-r > .sub-label { margin-top: 0; }

.partner-links {
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  margin-top: clamp(34px, 4.5vw, 52px); padding-top: 26px;
  border-top: 1px solid var(--grey-300);
}

/* "An Institution with a Long-Term Perspective".
   The copy is an antithesis — what we do NOT do, then what we do instead — so
   the pair is set as two blocks: the rejected approach recedes, the chosen one
   carries the gold. The outcome closes the section on a dark panel. */
.perspective-grid { align-items: center; }
.persp-lead {
  margin-top: 20px;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem); line-height: 1.75; color: var(--grey-700);
}
.persp-lead b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
  box-shadow: inset 0 -.3em 0 rgba(212, 175, 55, .32);
}

.persp-pair { display: grid; gap: 18px; }
.pp-item { border-radius: 12px; padding: 24px clamp(20px, 2.4vw, 30px); border-left: 3px solid; }
.pp-item p { margin: 0; line-height: 1.7; }
.pp-not {
  border-color: var(--grey-300); background: rgba(107, 122, 114, .07);
  color: var(--grey-500); font-size: 1.02rem;
}
.pp-do {
  border-color: var(--gold); background: var(--white);
  box-shadow: var(--shadow-sm); color: var(--navy-800);
  font-size: clamp(1.02rem, 1.4vw, 1.1rem); font-weight: 500;
}


.persp-pair .pp-do b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
  box-shadow: inset 0 -.28em 0 rgba(212, 175, 55, .3);
}

.persp-outcome {
  margin-top: clamp(38px, 5vw, 60px);
  border-radius: 16px; border-top: 3px solid var(--gold);
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  padding: clamp(30px, 4vw, 48px) clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow-md); text-align: center;
}
.persp-outcome p {
  margin: 0; max-width: 900px; margin-inline: auto;
  font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.9vw, 1.45rem); line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}
.persp-outcome b { color: var(--gold-light); font-weight: 600; }

/* "What We Believe" — one thesis line, then four proof lines.
   The thesis is the headline; each proof lands on a concrete noun, highlighted
   so the four commitments (decisions / partnerships / investments / culture)
   are readable in a single pass without reading the sentences. */
.beliefs-lead {
  /* keeps the two lines even instead of orphaning "statements." */
  text-wrap: balance; max-width: 17ch; margin-inline: auto;
}
.beliefs-lead em {
  font-style: normal; color: #8A6F1C;
  box-shadow: inset 0 -.14em 0 rgba(212, 175, 55, .45);
}

.beliefs-rule {
  display: flex; align-items: center; justify-content: center; gap: 14px;
  max-width: 300px; margin: 26px auto 0;
  color: var(--gold); font-size: .72rem; line-height: 1;
}
.beliefs-rule span { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, rgba(212, 175, 55, .65)); }
.beliefs-rule span:last-child { background: linear-gradient(90deg, rgba(212, 175, 55, .65), transparent); }

.beliefs-lines {
  list-style: none; padding: 0;
  max-width: 700px; margin: 14px auto 0;
  display: grid; gap: 10px; text-align: left;
}
.beliefs-lines li {
  position: relative; padding-left: 26px;
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.8; font-weight: 600; color: var(--navy-800);
}
.beliefs-lines li::before {
  content: "\2022"; position: absolute; left: 4px; top: 0;
  color: var(--gold); font-size: 1.1em; line-height: inherit;
}

/* Green fill on the cards themselves, section keeps its own background. */
.cards-green .value-card {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  border-color: rgba(255, 255, 255, .1);
}
.cards-green .value-card h3 { color: var(--white); }
.cards-green .value-card p { color: rgba(255, 255, 255, .7); }
.beliefs-cards { margin-top: 44px; }

/* "The Beginning of Something Greater" — the institutional opening statement.
   The two decisive lines are deliberately weighted for an investor scanning
   the page rather than reading it top to bottom. */
.beginning-body { max-width: 860px; margin-inline: auto; }

/* Our Geographic Advantage — what each location actually contributes.
   Three columns in the same order as the hubs below (Mauritius · Dubai ·
   Africa) so the prose and the cards line up. Left-aligned inside a centred
   section: these sentences are too long to read ragged-both-sides. */
.geo-intro {
  display: grid; gap: 28px 44px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  max-width: 1080px; margin: 0 auto clamp(40px, 5vw, 60px);
}
.geo-intro p {
  margin: 0; padding-top: 18px; border-top: 2px solid rgba(212, 175, 55, .45);
  font-size: clamp(1rem, 1.3vw, 1.06rem); line-height: 1.7; color: var(--grey-700);
  /* left-aligned, not justified — the columns are too narrow for justify, which
     opens rivers of white space between words */
  text-align: left;
}
/* inline, not block — splitting it off would leave each sentence starting
   mid-clause in lowercase */
.geo-intro b { font-weight: 600; color: var(--navy-800); }

/* Our Purpose — the three tests of a successful enterprise, as plain bullets
   with the whole sentence in bold. Lives in the narrow left column of the grid. */
.purpose-cards {
  list-style: none; padding: 0;
  margin: 28px 0 0; display: grid; gap: 10px;
}
.purpose-cards li {
  position: relative; padding-left: 26px;
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.8; font-weight: 600; color: var(--navy-800);
}
.purpose-cards li::before {
  content: "\2022"; position: absolute; left: 4px; top: 0;
  color: var(--gold); font-size: 1.1em; line-height: inherit;
}

/* opening statement of the section — sets the frame before the three kinds */
.beginning-open {
  margin: 0 0 1.4em !important; text-align: center;
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 2.6vw, 1.8rem) !important;
  line-height: 1.4 !important; color: var(--navy-800) !important;
  text-wrap: balance;
}
.beginning-open em {
  font-style: normal; color: #8A6F1C;
}

/* The three kinds of organisation — plain bullets, whole sentence in bold. */
.begin-three { list-style: none; padding: 0; margin: 0 0 1.5em; display: grid; gap: 10px; }
.begin-three li {
  position: relative; padding-left: 26px;
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.8; font-weight: 600; color: var(--navy-800);
}
.begin-three li::before {
  content: "•"; position: absolute; left: 4px; top: 0;
  color: var(--gold); font-size: 1.1em; line-height: inherit;
}
.beginning-body > p {
  font-size: clamp(1.02rem, 1.35vw, 1.12rem);
  line-height: 1.85; color: var(--grey-700); margin-bottom: 1.25em;
}
.beginning-claim {
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 3vw, 2rem) !important;
  line-height: 1.35 !important; color: var(--navy-800) !important;
  text-align: center; margin: 1.5em 0 !important;
  padding: 0 20px 26px; position: relative;
}
.beginning-claim::after {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  width: 64px; height: 2px; bottom: 0;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.beginning-close {
  margin: 2em 0 0; padding: 30px clamp(22px, 4vw, 42px);
  border-radius: 14px; border-left: 4px solid var(--gold);
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  color: rgba(255, 255, 255, .82);
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem); line-height: 1.5;
  box-shadow: var(--shadow-md);
}
.beginning-close span { display: block; margin-top: 6px; color: var(--gold-light); }
.beginning-cta { margin-top: 34px; text-align: center; }

/* about.html "Why Africa" — expands the Africa footprint card into the argument.
   Sits inside the ivory footprint section, below the three-city grid. */
.africa-block {
  margin-top: clamp(44px, 5.5vw, 70px);
  padding-top: clamp(36px, 4.5vw, 56px);
  border-top: 1px solid var(--grey-300);
}
.africa-grid { align-items: center; }
.africa-grid .sub-label { margin-top: 0; }
.africa-body { margin-top: 22px; line-height: 1.8; color: var(--grey-700); }
.africa-body b { font-weight: 600; color: var(--navy-800); }

.africa-intro {
  margin: 0 0 18px; font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.7; color: var(--grey-700);
}
.africa-pills { margin: 0; }

.africa-pair {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  margin-top: clamp(34px, 4.2vw, 50px);
}
.africa-pair .pp-do b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
}

.africa-close {
  max-width: 900px; margin: clamp(30px, 3.6vw, 42px) auto 0;
  text-align: center; font-size: clamp(1.02rem, 1.5vw, 1.15rem);
  line-height: 1.8; color: var(--grey-700);
}
.africa-close b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
}

/* about.html "Our Approach to Business" — diversification, then the discipline
   that makes it coherent. The closing antithesis reuses the .pp-not/.pp-do pair
   from the home page so "not X, but Y" always looks the same across the site. */
.approach .center-lead { margin-top: 18px; text-wrap: balance; }
.approach .center-lead b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
  box-shadow: inset 0 -.28em 0 rgba(212, 175, 55, .3);
}
.ap-label { max-width: var(--maxw); margin-top: 0; }

.approach-sectors {
  list-style: none; padding: 0; margin: 0;
  display: grid; gap: 14px;
  /* 320px floor lands on 3 columns at container width — a clean 3 × 2 for the
     six sectors rather than 4 + 2 orphans */
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}
.approach-sectors li {
  display: flex; align-items: baseline; gap: 14px;
  padding: 20px 22px;
  /* square on the left so the gold edge reads as a rule, not an arc */
  border-radius: 0 12px 12px 0;
  background: var(--white); border-left: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
/* gold bullet in place of the old 01–06 numbering */
.approach-sectors li::before {
  content: "\2022"; flex: none;
  color: var(--gold); font-size: 1.15em; line-height: 1.4;
}
.as-t {
  font-family: var(--font-display); font-weight: 600;
  font-size: clamp(1rem, 1.4vw, 1.12rem); line-height: 1.4; color: var(--navy-800);
}

.approach-common {
  max-width: 880px; margin: clamp(34px, 4.2vw, 48px) auto 0;
  text-align: center; font-size: clamp(1rem, 1.45vw, 1.12rem);
  line-height: 1.8; color: var(--grey-700);
}
.approach-common b { font-weight: 600; color: var(--navy-800); }

.approach-pair {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  align-items: stretch;
  max-width: 960px; margin: clamp(32px, 4vw, 46px) auto 0;
}
.approach-pair .pp-do b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
}
.approach-cta { margin-top: clamp(30px, 3.6vw, 42px); text-align: center; }

/* about.html "Stewardship" — the couplet is the whole idea, so it leads at
   headline scale: the temporary state recedes, the permanent one carries the
   weight. The four domains are set as a numbered ladder because "invest /
   govern / manage risk / develop people" is the concrete answer to "so what?" */
.steward-grid { align-items: center; }

/* shared couplet device: a rejected/lesser statement, then the one that matters.
   Used by Stewardship and Why Africa — same shape, so the rhetoric reads the same. */
.couplet { margin: 0; display: block; }
.c-a, .c-b {
  display: block; font-family: var(--font-display); line-height: 1.3;
}
.c-a {
  font-size: clamp(1.15rem, 2vw, 1.5rem);
  color: var(--grey-500);
}
.c-b {
  margin-top: 6px; font-size: clamp(1.6rem, 3.4vw, 2.5rem);
  color: var(--navy-800); position: relative; padding-bottom: 18px;
}
.c-b::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 68px; height: 2px; background: var(--gold);
}

.steward-lead {
  margin-top: 26px;
  font-size: clamp(1.05rem, 1.6vw, 1.22rem); line-height: 1.75; color: var(--grey-700);
}
.steward-lead b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
  box-shadow: inset 0 -.3em 0 rgba(212, 175, 55, .32);
}
.steward-body { margin-top: 14px; line-height: 1.8; color: var(--grey-700); }
.steward-body b { font-weight: 600; color: var(--navy-800); }

.steward-domains { list-style: none; padding: 0; margin: 0; }
.steward-domains li {
  display: flex; align-items: baseline; gap: 16px;
  padding: 16px 0; border-bottom: 1px solid var(--grey-300);
}
.steward-domains li:first-child { border-top: 1px solid var(--grey-300); }
.sd-n {
  flex: none; font-family: var(--font-display); font-size: .82rem;
  letter-spacing: .1em; color: var(--gold);
}
.sd-t {
  font-family: var(--font-display);
  font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--navy-800);
}

.steward-custodian {
  max-width: 860px; margin: clamp(40px, 5vw, 62px) auto 0;
  padding-top: clamp(26px, 3.4vw, 38px); border-top: 1px solid var(--grey-300);
  text-align: center;
  font-size: clamp(1.02rem, 1.5vw, 1.15rem); line-height: 1.75; color: var(--grey-700);
}
.steward-custodian b {
  font-family: var(--font-display); font-weight: 600; color: var(--navy-800);
}

/* about.html "Why We Exist" — a premise, a three-question test, then the verdict.
   Sits on the dark band, so everything here is light-on-navy. The reader should
   be able to follow the argument without reading every sentence: the need, the
   claim, the test, the disqualifier, the purpose. */
.exist-premise { max-width: 800px; margin: 0 auto; text-align: center; }
.exist-premise > p {
  font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.8;
  color: rgba(255, 255, 255, .72); margin-bottom: 1.1em;
}
.exist-need {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.6rem) !important;
  line-height: 1.5 !important; color: rgba(255, 255, 255, .92) !important;
}
.exist-need em { font-style: normal; color: var(--gold-light); }
.exist-claim {
  margin-bottom: 0 !important; padding-top: 22px;
  border-top: 1px solid rgba(212, 175, 55, .3);
  color: rgba(255, 255, 255, .82) !important;
}
.exist-claim b { font-weight: 600; color: var(--gold-light); }

.exist-test {
  max-width: 800px; margin: clamp(40px, 5vw, 62px) auto clamp(26px, 3vw, 34px);
  text-align: center; font-family: var(--font-display);
  font-size: clamp(1.05rem, 1.7vw, 1.28rem); line-height: 1.5;
  letter-spacing: .02em; color: var(--white);
}

.exist-verdict {
  margin: clamp(26px, 3.2vw, 38px) auto 0; max-width: 640px;
  text-align: center; font-size: clamp(.98rem, 1.4vw, 1.08rem); line-height: 1.7;
  color: rgba(255, 255, 255, .62);
}
.exist-verdict b { font-weight: 600; color: rgba(255, 255, 255, .9); }

.exist-belief {
  max-width: 820px; margin: clamp(44px, 5.5vw, 70px) auto 0;
  padding-top: clamp(30px, 4vw, 44px);
  border-top: 1px solid rgba(255, 255, 255, .14);
  text-align: center;
}
.exist-belief > p {
  margin: 0; font-size: clamp(1rem, 1.4vw, 1.1rem); line-height: 1.8;
  color: rgba(255, 255, 255, .74);
}
.exist-belief-close {
  margin-top: 20px !important; font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.55rem) !important; line-height: 1.4 !important;
  letter-spacing: .02em; color: var(--gold-light) !important;
}

/* "Looking Forward" — the closing argument of the home page.
   Three movements: the aspiration (an antithesis — largest vs respected),
   the five grounds on which respect is earned, and the generational
   responsibility that follows. The five grounds lead with the noun so an
   investor scanning the row reads leadership / partnerships / governance /
   value / lives without reading five near-identical sentences. */
.fw-aspiration { max-width: 820px; margin: 0 auto; text-align: center; }
.fw-not {
  margin: 0; font-size: clamp(1rem, 1.5vw, 1.12rem); line-height: 1.6;
  color: var(--grey-500);
}
/* the negation must not be struck through — a struck "not" scans as its opposite */
.fw-not b { font-weight: 600; color: var(--grey-700); letter-spacing: .01em; }
.fw-is {
  margin: 10px 0 0; font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.1vw, 2.15rem); line-height: 1.4;
  color: var(--navy-800); text-wrap: balance;
}
.fw-is em {
  font-style: normal; color: #8A6F1C;
  box-shadow: inset 0 -.16em 0 rgba(212, 175, 55, .5);
}

.fw-respected {
  list-style: none; padding: 0;
  margin: clamp(38px, 5vw, 58px) auto 0;
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.fw-respected li {
  padding: 24px 20px 22px; text-align: center;
  background: var(--white); border-radius: 12px;
  border-top: 3px solid var(--gold);
  box-shadow: var(--shadow-sm);
}
.fw-word {
  display: block; font-family: var(--font-display);
  font-size: clamp(1.1rem, 1.7vw, 1.28rem); line-height: 1.2;
  color: var(--navy-800); letter-spacing: .02em;
}
.fw-line {
  display: block; margin-top: 10px;
  font-size: .88rem; line-height: 1.6; color: var(--grey-500);
}

.fw-legacy {
  margin: clamp(38px, 5vw, 58px) auto 0; max-width: 900px;
  border-radius: 16px; border-top: 3px solid var(--gold);
  background: linear-gradient(140deg, var(--navy-900), var(--navy-700));
  padding: clamp(32px, 4.4vw, 52px) clamp(24px, 4vw, 56px);
  box-shadow: var(--shadow-md); text-align: center;
}
.fw-legacy-lead {
  margin: 0; font-family: var(--font-display);
  font-size: clamp(1.12rem, 2.1vw, 1.5rem); line-height: 1.55;
  color: rgba(255, 255, 255, .88); text-wrap: balance;
}
.fw-that {
  list-style: none; padding: 0;
  margin: clamp(22px, 3vw, 32px) auto 0; max-width: 620px;
}
.fw-that li {
  padding: 10px 0; font-size: clamp(.98rem, 1.4vw, 1.08rem); line-height: 1.6;
  color: rgba(255, 255, 255, .68);
}
.fw-that li + li { border-top: 1px solid rgba(212, 175, 55, .22); }
.fw-that b { font-weight: 600; color: rgba(255, 255, 255, .92); }
.fw-that li:last-child { padding-bottom: 0; }
.fw-that li:last-child b {
  font-family: var(--font-display); color: var(--gold-light);
  font-size: 1.06em;
}

/* home closing strip — the institutional promise */
.closing-strip {
  padding: 34px 0;
  background: linear-gradient(140deg, var(--navy-800), var(--navy-600));
  border-top: 3px solid var(--gold);
}
.closing-strip p {
  margin: 0; text-align: center;
  font-family: "Cinzel", Georgia, serif;
  font-size: clamp(.98rem, 1.7vw, 1.3rem);
  line-height: 1.7; letter-spacing: .04em;
  font-style: italic;
  color: rgba(255, 255, 255, .82);
}
.closing-strip p span { color: var(--gold-light); }
.stat { text-align: center; position: relative; }
.stat + .stat::before {
  content: ""; position: absolute; left: -12px; top: 12%; bottom: 12%;
  width: 1px; background: rgba(255, 255, 255, .14);
}
.stat .num {
  font-family: var(--font-display); font-size: clamp(2rem, 3.4vw, 2.8rem);
  font-weight: 700; color: var(--gold-light); line-height: 1;
}
.stat .num sup { font-size: .55em; color: var(--gold); }
.stat .lbl { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .66); margin-top: 8px; }

/* page hero (inner pages) — photo background via --ph */
.page-hero {
  background: var(--navy-900);
  color: var(--white); padding: clamp(64px, 8vw, 96px) 0;
  position: relative; overflow: hidden;
  min-height: 340px; max-height: 500px; display: flex; align-items: center;
}
.page-hero::before {
  content: ""; position: absolute; inset: 0;
  background-image: var(--ph, url("../assets/hero-texture.jpg"));
  background-size: cover; background-position: center;
  animation: kenburns 26s ease-in-out infinite alternate;
}
.page-hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(5, 34, 26, .93) 0%, rgba(5, 34, 26, .7) 48%, rgba(5, 34, 26, .3)),
    linear-gradient(0deg, rgba(5, 34, 26, .55), transparent 40%);
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: var(--white); max-width: 900px; }
.page-hero .lead { color: rgba(255, 255, 255, .75); margin-top: 18px; }
.breadcrumb { font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 22px; }
.breadcrumb a:hover { color: var(--gold-light); }
.breadcrumb .sep { margin: 0 10px; color: var(--gold); }

/* separator between place names in a heading — gold and slightly lighter than
   the words it divides, so the three names stay the emphasis */
.h-sep { margin: 0 .45em; color: var(--gold); font-weight: 400; }


/* gold base line under page header */
.page-hero .gold-base {
  position: absolute; left: 0; right: 0; bottom: 0; height: 8px; z-index: 3;
  background: linear-gradient(90deg, #6F5A13 0%, #D4AF37 22%, #F2E6B1 50%, #D4AF37 78%, #6F5A13 100%);
  box-shadow: 0 -2px 14px rgba(212, 175, 55, .55);
}
.page-hero .gold-base::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%);
  background-size: 220px 100%; background-repeat: no-repeat;
  animation: goldsheen 3.2s ease-in-out infinite;
}
@keyframes goldsheen {
  0% { background-position: -220px 0; }
  60%, 100% { background-position: calc(100% + 220px) 0; }
}

/* ============================================================
   SECTIONS / CARDS
   ============================================================ */
.bg-ivory { background: linear-gradient(180deg, #E7DFC7, #EFE9D6); }
.bg-navy { background: linear-gradient(150deg, var(--navy-900), var(--navy-700)); color: rgba(255, 255, 255, .8); }
.bg-navy h2, .bg-navy h3 { color: var(--white); }
.bg-navy .lead { color: rgba(255, 255, 255, .72); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(36px, 5vw, 72px); align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }

.card {
  background: var(--white); border-radius: 10px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1px solid rgba(6, 38, 29, .06);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
  display: flex; flex-direction: column;
}
.card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.card .card-img { position: relative; overflow: hidden; aspect-ratio: 16/10; }
.card .card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.card:hover .card-img img { transform: scale(1.07); }
.card .card-img .tag {
  position: absolute; top: 16px; left: 16px;
  background: rgba(6, 38, 29, .78); backdrop-filter: blur(6px);
  color: var(--gold-light); font-size: .7rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 30px;
}
.card .card-body { padding: 28px; flex: 1; display: flex; flex-direction: column; gap: 12px; }
.card .card-body h3 { transition: color .3s; }
.card:hover .card-body h3 { color: var(--gold); }
.card .card-body p { font-size: .95rem; color: var(--grey-500); flex: 1; }
.card .link {
  color: var(--white); font-weight: 600; font-size: .85rem; letter-spacing: .05em;
  display: inline-flex; align-items: center; gap: 10px;
  align-self: flex-start;
  padding: 9px 9px 9px 22px; border-radius: 40px;
  border: 1px solid var(--navy-900);
  background: linear-gradient(135deg, #17805F 0%, #126B52 45%, #0B4D3B 100%);
  transition: all .35s var(--ease);
  box-shadow: 0 4px 14px rgba(6, 38, 29, .25);
}
.card .link svg {
  width: 16px; height: 16px; padding: 6px;
  border: 1px solid var(--gold-light); border-radius: 50%;
  background: var(--white); color: var(--navy-900);
  stroke-width: 3;
  transition: all .35s var(--ease);
  flex-shrink: 0;
}
.card:hover .link, .card .link:hover {
  color: var(--white); border-color: var(--navy-900);
  background: linear-gradient(135deg, #1F9A72 0%, #17805F 50%, #0E5C46 100%);
  box-shadow: 0 10px 24px rgba(10, 61, 46, .4);
  transform: translateY(-2px);
}
.card:hover .link svg, .card .link:hover svg {
  border-color: var(--navy-900); color: var(--navy-900);
  background: var(--gold-light);
  transform: translateX(4px);
}

/* value / principle cards */
.value-card {
  background: var(--white); border-radius: 10px; padding: 36px 30px;
  border: 1px solid rgba(6, 38, 29, .07); box-shadow: var(--shadow-sm);
  transition: all .4s var(--ease); position: relative; overflow: hidden;
}
.value-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, var(--gold), var(--gold-pale));
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.value-card:hover { transform: translateY(-8px); box-shadow: var(--shadow-md); }
.value-card:hover::before { transform: scaleX(1); }
.value-card .num {
  font-family: var(--font-display); font-size: 2.6rem; font-weight: 700;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold);
  line-height: 1; margin-bottom: 16px; display: block;
}
.value-card h3 { margin-bottom: 10px; font-size: 1.25rem; }
.value-card p { font-size: .93rem; color: var(--grey-500); }

.bg-navy .value-card { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .1); }
.bg-navy .value-card p { color: rgba(255, 255, 255, .66); }

/* quote band */
.quote-band { text-align: center; padding: clamp(80px, 10vw, 130px) 0; }
.quote-band.nature {
  position: relative; overflow: hidden;
  background:
    linear-gradient(135deg, rgba(5, 38, 29, .92) 0%, rgba(9, 58, 44, .82) 35%, rgba(6, 44, 33, .88) 100%),
    var(--qn-img, none) center/cover no-repeat fixed;
}
.quote-band.nature::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(900px 400px at 80% 0%, rgba(212, 175, 55, .22), transparent 60%);
  pointer-events: none;
}
.quote-band.nature .container { position: relative; z-index: 1; }
.quote-band blockquote {
  font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2.3rem);
  font-style: italic; color: var(--white); max-width: 900px; margin: 0 auto; line-height: 1.45;
}
.quote-band blockquote .gold { color: var(--gold-light); }
.quote-band cite { display: block; margin-top: 26px; font-style: normal; font-size: .85rem; letter-spacing: .22em; text-transform: uppercase; color: var(--gold); }
.quote-mark { font-family: var(--font-display); font-size: 5.5rem; color: var(--gold); line-height: .4; display: block; margin-bottom: 30px; }

/* infographic figure */
.infographic { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-lg); border: 1px solid rgba(212, 175, 55, .25); }
figure figcaption { text-align: center; font-size: .82rem; color: var(--grey-500); margin-top: 14px; letter-spacing: .04em; }

/* prose blocks */
.prose { max-width: 800px; }
.prose p { margin-bottom: 1.2em; }
.prose p.pull { font-family: var(--font-display); font-size: 1.35rem; color: var(--navy-700); font-style: italic; border-left: 3px solid var(--gold); padding-left: 24px; margin: 1.6em 0; }

/* Chairman's Message — a long letter read start to finish rather than scanned,
   so the measure is 680px (≈70 characters at 17px) and centred in its section.
   The signature sits inside the same wrapper so it lines up with the text
   rather than the wider container.

   Everything here is set in the BODY face on purpose. var(--font-display) is
   Cinzel, which renders lowercase as small caps — fine for headings and short
   labels, but it turned the Chairman's own sentences into what looked like
   section titles. The letter now reads as prose, with emphasis carried by
   weight, size and colour instead of a change of typeface. */
.chairman-letter { max-width: 680px; margin-inline: auto; }
.chairman-letter p { margin-bottom: 1.35em; text-wrap: pretty; }

/* opening paragraph — a slightly larger on-ramp into a long letter */
.chairman-letter .cm-open { font-size: 1.1rem; color: var(--navy-700); margin-top: 20px; }

/* the letter's structural beats: single declarative sentences the Chairman sets
   apart. Emphasised prose, not headings — hence the body face. */
.chairman-letter .cm-line {
  font-family: var(--font-sans);
  font-size: clamp(1.1rem, 1.5vw, 1.18rem); line-height: 1.6;
  font-weight: 600; color: var(--navy-800);
  margin: 2em 0 1.4em;
}

/* runs of short clauses, each on its own line, gathered behind a gold rule */
.chairman-letter .cm-cadence {
  margin: 1.6em 0; padding-left: 24px;
  border-left: 2px solid rgba(212, 175, 55, .55);
  display: grid; gap: 6px;
}
.chairman-letter .cm-cadence li { line-height: 1.65; }
/* closing cadence — same device, weighted to carry the end of the letter */
.chairman-letter .cm-cadence.strong li {
  font-family: var(--font-sans); font-size: 1.05rem;
  font-weight: 600; color: var(--navy-800);
}

/* the house pull quote is Cinzel italic, which suits a short line; this one runs
   two full sentences, so let the gold rule and the size carry the emphasis */
.chairman-letter .prose p.pull {
  font-family: var(--font-sans); font-style: normal;
  font-size: clamp(1.18rem, 1.8vw, 1.3rem); font-weight: 500; line-height: 1.6;
  color: var(--navy-700);
  padding-left: 26px; margin: 2.1em 0;
}

/* pill list */
.pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pills li {
  font-size: .82rem; font-weight: 600; color: var(--navy-700);
  background: var(--grey-100); border: 1px solid var(--grey-300);
  padding: 8px 16px; border-radius: 30px; transition: all .3s;
}
.pills li:hover { background: var(--navy-800); color: var(--gold-light); border-color: var(--navy-800); transform: translateY(-2px); }
.bg-navy .pills li { background: rgba(255,255,255,.07); border-color: rgba(255,255,255,.16); color: rgba(255,255,255,.85); }
.bg-navy .pills li:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }

/* checklist */
.checklist li { display: flex; gap: 14px; margin-bottom: 14px; align-items: flex-start; font-size: .98rem; }
.checklist li::before {
  content: "✦"; color: var(--gold); font-size: .85rem; margin-top: 4px; flex-shrink: 0;
}

/* company blocks */
.company-block {
  display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 64px);
  align-items: center; padding: clamp(44px, 6vw, 70px) 0;
  border-bottom: 1px solid rgba(6, 38, 29, .08);
}
.company-block:last-child { border-bottom: 0; }
.company-block.flip .cb-media { order: 2; }
.cb-media { border-radius: 12px; overflow: hidden; box-shadow: var(--shadow-md); position: relative; }
.cb-media img { width: 100%; aspect-ratio: 3/2; object-fit: cover; transition: transform .8s var(--ease); }
.company-block:hover .cb-media img { transform: scale(1.05); }
.cb-sector { font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; display: block; }
.cb-tagline { font-family: var(--font-display); font-style: italic; font-size: 1.15rem; color: var(--grey-500); margin: 6px 0 16px; }
.future-flag { display: inline-block; font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; background: var(--gold-pale); color: #7a621a; border-radius: 20px; padding: 4px 12px; margin-left: 10px; vertical-align: middle; }

/* CTA band */
.cta-band {
  background:
    radial-gradient(800px 400px at 15% 120%, rgba(212, 175, 55, .25), transparent 55%),
    linear-gradient(140deg, var(--navy-900), var(--navy-600));
  color: var(--white); text-align: center; border-radius: 16px;
  padding: clamp(56px, 7vw, 90px) clamp(24px, 5vw, 80px);
  position: relative; overflow: hidden;
}
.cta-band::before {
  content: ""; position: absolute; inset: 0;
  background: var(--cta-img, url("../assets/hero-texture.jpg")) center/cover;
  opacity: .32;
}
.cta-band {
  background:
    radial-gradient(800px 400px at 15% 120%, rgba(212, 175, 55, .35), transparent 55%),
    linear-gradient(140deg, rgba(5, 42, 32, .98), rgba(14, 92, 70, .94)) !important;
}
.cta-band > * { position: relative; }
.cta-band h2 { color: var(--white); margin-bottom: 16px; }
.cta-band p { color: rgba(255, 255, 255, .75); max-width: 620px; margin: 0 auto 34px; }

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(40px, 6vw, 80px); }
.contact-card { display: flex; gap: 18px; padding: 24px 0; border-bottom: 1px solid rgba(6, 38, 29, .08); }
.contact-card .ic {
  width: 52px; height: 52px; border-radius: 12px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  display: grid; place-items: center; color: var(--gold-light);
}
.contact-card h3 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; }
.contact-card p { font-size: .92rem; color: var(--grey-500); }

.form-card { background: var(--white); border-radius: 14px; box-shadow: var(--shadow-md); padding: clamp(28px, 4vw, 48px); border-top: 4px solid var(--gold); }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { margin-bottom: 18px; }
.field label { display: block; font-size: .8rem; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--navy-700); margin-bottom: 8px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 14px 16px; border: 1.5px solid var(--grey-300); border-radius: 6px;
  font-family: var(--font-sans); font-size: .95rem; color: var(--navy-800);
  transition: border .3s, box-shadow .3s; background: var(--white);
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: 0; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212, 175, 55, .15);
}
.form-note { font-size: .8rem; color: var(--grey-500); margin-top: 14px; }

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  background:
    linear-gradient(180deg, rgba(5, 42, 32, .55) 0%, rgba(5, 42, 32, .25) 100%),
    url("../bgimages/9bbbb.jpg") center/cover no-repeat, var(--navy-900);
  color: rgba(255, 255, 255, .68); font-size: .9rem;
}
.footer-bottom { background: rgba(4, 26, 20, .35); }
.footer-top { padding: clamp(56px, 7vw, 84px) 0 44px; display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 44px; }
.footer-top img { height: 96px; width: auto; margin-bottom: 20px; }
.footer-top h4 { color: var(--gold-light); font-size: .82rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 20px; font-weight: 700; }
.footer-top li { margin-bottom: 11px; }
.footer-top a { transition: color .25s, padding-left .25s; }
.footer-top a:hover { color: var(--gold-light); padding-left: 6px; }
.footer-tag { font-family: var(--font-display); font-style: italic; color: rgba(255, 255, 255, .8); font-size: 1.05rem; line-height: 1.5; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0; }
.footer-bottom .container { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: .8rem; }

/* ============================================================
   NEWS / MEDIA / GALLERY / NEWSLETTER
   ============================================================ */
.news-meta {
  display: flex; align-items: center; gap: 12px;
  font-size: .74rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 4px;
}
.news-meta .date { color: var(--grey-500); font-weight: 500; letter-spacing: .06em; text-transform: none; }
.news-meta::after { content: ""; flex: 1; height: 1px; background: rgba(6, 38, 29, .08); }

.featured-news {
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 0;
  background: var(--white); border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid rgba(6, 38, 29, .07);
  margin-bottom: clamp(36px, 5vw, 56px);
}
.featured-news .fn-img { position: relative; min-height: 320px; }
.featured-news .fn-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.featured-news .fn-body { padding: clamp(28px, 4vw, 52px); display: flex; flex-direction: column; gap: 14px; justify-content: center; }

.video-card {
  background: var(--navy-800); border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-md); border: 1px solid rgba(212, 175, 55, .25);
}
.video-card video { width: 100%; aspect-ratio: 16/9; object-fit: cover; display: block; background: var(--navy-900); }
.video-card .vc-body { padding: 20px 24px; }
.video-card .vc-body h3 { color: var(--white); font-size: 1.1rem; }
.video-card .vc-body p { color: rgba(255, 255, 255, .62); font-size: .85rem; margin-top: 4px; }

/* gallery */
.gallery-filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.gallery-filters button {
  font-family: var(--font-sans); font-size: .82rem; font-weight: 600; letter-spacing: .05em;
  padding: 9px 22px; border-radius: 40px; cursor: pointer;
  border: 1px solid var(--navy-800); color: var(--navy-800);
  background: linear-gradient(135deg, #ffffff, var(--gold-pale));
  transition: all .3s var(--ease);
}
.gallery-filters button:hover { transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.gallery-filters button.on {
  background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
  color: var(--gold-light); border-color: var(--navy-900);
}
.gallery-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.gallery-item {
  position: relative; border-radius: 10px; overflow: hidden; cursor: zoom-in;
  aspect-ratio: 4/3; box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), opacity .4s;
}
.gallery-item.tall { grid-row: span 2; aspect-ratio: auto; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s var(--ease); }
.gallery-item:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-item .gi-cap {
  position: absolute; inset: auto 0 0 0; padding: 36px 18px 14px;
  background: linear-gradient(transparent, rgba(5, 34, 26, .85));
  color: var(--white); font-size: .82rem; font-weight: 600; letter-spacing: .03em;
  opacity: 0; transform: translateY(10px); transition: all .4s var(--ease);
}
.gallery-item .gi-cap small { display: block; color: var(--gold-light); font-size: .66rem; letter-spacing: .18em; text-transform: uppercase; }
.gallery-item:hover .gi-cap { opacity: 1; transform: none; }
.gallery-item.hide { display: none; }

.lightbox {
  position: fixed; inset: 0; z-index: 2000;
  background: rgba(4, 26, 20, .92); backdrop-filter: blur(8px);
  display: none; align-items: center; justify-content: center; padding: 4vh 4vw;
}
.lightbox.open { display: flex; animation: lbfade .3s var(--ease); }
@keyframes lbfade { from { opacity: 0; } }
.lightbox img { max-width: 100%; max-height: 92vh; border-radius: 8px; box-shadow: var(--shadow-lg); border: 1px solid rgba(212, 175, 55, .4); }
.lightbox .lb-close {
  position: absolute; top: 22px; right: 28px; background: none; border: 1px solid rgba(255,255,255,.4);
  color: var(--white); font-size: 1.1rem; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  transition: all .3s;
}
.lightbox .lb-close:hover { border-color: var(--gold); color: var(--gold-light); transform: rotate(90deg); }

/* newsletter */
.nl-panel {
  display: grid; grid-template-columns: 1fr 1fr; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.nl-side {
  background:
    radial-gradient(600px 300px at 0% 110%, rgba(212, 175, 55, .3), transparent 60%),
    linear-gradient(150deg, var(--navy-900), var(--navy-600));
  color: var(--white); padding: clamp(32px, 5vw, 60px);
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.nl-side h2 { color: var(--white); }
.nl-side p { color: rgba(255, 255, 255, .75); }
.nl-form { background: var(--white); padding: clamp(32px, 5vw, 60px); }

@media (max-width: 900px) {
  .featured-news, .nl-panel { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .gallery-grid { grid-template-columns: 1fr; }
}


/* ============================================================
   ECOSYSTEM WHEEL (pure CSS/JS, replaces PNG)
   ============================================================ */
.eco-wheel {
  position: relative; width: min(780px, 92vw); aspect-ratio: 1/1;
  margin: 0 auto; font-family: var(--font-sans);
}
.eco-links { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.eco-links .orbit {
  fill: none; stroke: rgba(212, 175, 55, .6); stroke-width: .35;
  stroke-dasharray: 1.6 1.6;
  transform-origin: 50% 50%;
  animation: ecoOrbit 60s linear infinite;
}
@keyframes ecoOrbit { to { transform: rotate(360deg); } }
.eco-links .spoke { stroke: rgba(212, 175, 55, .7); stroke-width: .3; }

.eco-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 30%; height: 30%; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, .08), transparent 55%),
    linear-gradient(150deg, var(--navy-700), var(--navy-900));
  border: 3px solid var(--gold);
  box-shadow: 0 0 0 6px rgba(212, 175, 55, .18), 0 18px 44px rgba(6, 38, 29, .45);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; z-index: 3; gap: 2px;
  animation: ecoPulse 4.5s ease-in-out infinite;
}
@keyframes ecoPulse {
  0%, 100% { box-shadow: 0 0 0 6px rgba(212, 175, 55, .16), 0 18px 44px rgba(6, 38, 29, .45); }
  50% { box-shadow: 0 0 0 14px rgba(212, 175, 55, .07), 0 18px 44px rgba(6, 38, 29, .45); }
}
.eco-center .ec-t {
  font-family: var(--font-display); font-weight: 700; color: var(--gold-light);
  font-size: clamp(.85rem, 2.6vw, 1.5rem); line-height: 1.15;
}
.eco-center .ec-s {
  font-size: clamp(.5rem, 1.15vw, .72rem); letter-spacing: .16em; text-transform: uppercase;
  color: rgba(255, 255, 255, .75); margin-top: 6px;
}
.eco-center .ec-s::before { content: ""; display: block; width: 34px; height: 1.5px; background: var(--gold); margin: 0 auto 6px; }

.eco-node {
  position: absolute; transform: translate(-50%, -50%);
  width: 26%; height: 26%; border-radius: 50%; overflow: hidden;
  background: linear-gradient(155deg, #0F5541 0%, var(--navy-800) 70%);
  border: 2px solid var(--gold);
  box-shadow: 0 10px 26px rgba(6, 38, 29, .35);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 6px; padding: 8%;
  cursor: pointer; z-index: 2;
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
  animation: ecoFloat 5.2s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
@keyframes ecoFloat { 0%, 100% { margin-top: 0; } 50% { margin-top: -8px; } }
/* nine-node wheel — smaller nodes on a wider orbit so they don't collide */
.eco-wheel.nodes-9 .eco-node { width: 21.5%; height: 21.5%; gap: 4px; padding: 6%; }
.eco-wheel.nodes-9 .eco-node .en-ic { width: 26px; height: 26px; }
.eco-wheel.nodes-9 .eco-node .en-ic svg { width: 15px; height: 15px; }
.eco-wheel.nodes-9 .eco-node .en-lbl { font-size: clamp(.5rem, 1.05vw, .68rem); line-height: 1.25; }

/* below tablet the radial layout can't hold nine legible labels — fall back to a grid */
@media (max-width: 700px) {
  .eco-wheel.nodes-9 {
    width: 100%; aspect-ratio: auto;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px;
  }
  .eco-wheel.nodes-9 .eco-links { display: none; }
  .eco-wheel.nodes-9 .eco-center {
    position: static; transform: none; grid-column: 1 / -1;
    width: 100%; height: auto; border-radius: 18px; padding: 22px 16px;
    animation: none;
  }
  .eco-wheel.nodes-9 .eco-node {
    position: static; transform: none; animation: none;
    width: auto; height: auto; aspect-ratio: 1 / 1;
    border-radius: 18px; padding: 14px 10px; gap: 8px;
  }
  .eco-wheel.nodes-9 .eco-node::after { border-radius: 14px; }
  .eco-wheel.nodes-9 .eco-node .en-ic { width: 34px; height: 34px; }
  .eco-wheel.nodes-9 .eco-node .en-ic svg { width: 18px; height: 18px; }
  .eco-wheel.nodes-9 .eco-node .en-lbl { font-size: .78rem; }
  .eco-wheel.nodes-9 .eco-node:hover, .eco-wheel.nodes-9 .eco-node:focus-visible { transform: scale(1.04); }
}
.eco-node::after {
  content: ""; position: absolute; inset: 5px; border-radius: 50%;
  border: 1px solid rgba(212, 175, 55, .3); pointer-events: none;
}
.eco-node .en-ic {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(212, 175, 55, .14); border: 1px solid rgba(212, 175, 55, .5);
  display: grid; place-items: center; color: var(--gold-light);
  transition: all .4s var(--ease);
}
.eco-node .en-ic svg { width: 18px; height: 18px; }
.eco-node .en-lbl {
  color: var(--ivory); font-weight: 600;
  font-size: clamp(.52rem, 1.35vw, .84rem); line-height: 1.25;
  max-width: 100%; overflow-wrap: break-word;
}
.eco-node:hover, .eco-node:focus-visible {
  transform: translate(-50%, -50%) scale(1.09);
  border-color: var(--gold-light); z-index: 4;
  box-shadow: 0 0 0 8px rgba(212, 175, 55, .14), 0 20px 44px rgba(6, 38, 29, .5);
  animation-play-state: paused;
}
.eco-node:hover .en-ic { background: var(--gold); color: var(--navy-900); transform: rotate(360deg); }

.eco-stage {
  background:
    radial-gradient(700px 380px at 85% 8%, rgba(212, 175, 55, .12), transparent 60%),
    linear-gradient(155deg, var(--navy-900), var(--navy-700));
  border-radius: 18px; padding: clamp(30px, 5vw, 64px) clamp(16px, 3vw, 44px);
  border: 1px solid rgba(212, 175, 55, .25);
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
}
.eco-stage::before {
  content: ""; position: absolute; inset: 0; opacity: .5; pointer-events: none;
  background-image: radial-gradient(rgba(255, 255, 255, .05) 1px, transparent 1.5px);
  background-size: 44px 44px;
}
.eco-caption { text-align: center; color: rgba(255,255,255,.55); font-size: .8rem; margin-top: 26px; letter-spacing: .05em; position: relative; }

@media (prefers-reduced-motion: reduce) {
  .eco-links .orbit, .eco-center, .eco-node { animation: none !important; }
}



/* transparent wheel wrapper (no stage background) */
.eco-plain { background: transparent; padding: clamp(10px, 2vw, 24px) 0; }
.eco-plain .eco-caption { color: var(--grey-500); }

/* ============================================================
   GEOGRAPHY BAND (CSS/JS, replaces PNG on index)
   ============================================================ */
.geo-band { position: relative; }
.geo-track {
  position: relative;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 3vw, 40px);
  padding-top: 130px;
}
.geo-track::before {
  content: ""; position: absolute; top: 56px; left: 12%; right: 12%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--gold) 0 10px, transparent 10px 18px);
  opacity: .55;
}
.geo-hub { position: relative; }
.geo-hub .gh-node {
  position: absolute; top: -130px; left: 50%; transform: translateX(-50%);
  width: 112px; height: 112px; border-radius: 50%;
  background: linear-gradient(155deg, #0F5541, var(--navy-800));
  border: 3px solid var(--gold);
  display: grid; place-items: center; color: var(--gold-light);
  box-shadow: 0 0 0 10px rgba(212, 175, 55, .1), 0 14px 30px rgba(6, 38, 29, .4);
  transition: all .4s var(--ease);
  animation: ecoFloat 5.6s ease-in-out infinite;
  animation-delay: var(--fd, 0s);
}
.geo-hub .gh-node svg { width: 44px; height: 44px; }
.geo-hub .gh-node::after {
  content: ""; position: absolute; inset: -14px; border-radius: 50%;
  border: 1px dashed rgba(212, 175, 55, .4);
  animation: ecoOrbit 34s linear infinite;
}
.geo-card {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
  border: 1px solid rgba(255, 255, 255, .1); border-top: 4px solid var(--gold);
  border-radius: 14px;
  padding: 28px 24px 24px; text-align: center; height: 100%;
  box-shadow: var(--shadow-sm);
  transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s;
}
.geo-card h3 { color: var(--white); font-size: clamp(1.3rem, 2vw, 1.7rem); }
.geo-card .gc-role { color: var(--gold); font-weight: 700; font-size: .8rem; letter-spacing: .12em; text-transform: uppercase; margin-top: 4px; }
.geo-card .gc-sep { width: 54px; height: 2px; background: var(--gold); margin: 14px auto; opacity: .7; }
.geo-card ul { text-align: left; display: inline-block; }
.geo-card li {
  color: rgba(255, 255, 255, .7); font-size: .88rem; padding: 5px 0 5px 22px; position: relative;
}
.geo-card li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 9px;
  border: 2px solid var(--gold); border-radius: 50%;
}
.geo-hub:hover .geo-card { transform: translateY(-8px); border-color: var(--gold-light); box-shadow: 0 18px 40px rgba(6, 38, 29, .45); }
.geo-hub:hover .gh-node { background: var(--gold); color: var(--navy-900); animation-play-state: paused; }
.geo-tagline {
  display: flex; align-items: center; justify-content: center; gap: 26px;
  margin-top: clamp(40px, 5vw, 60px);
}
.geo-tagline .gt-line { flex: 1; max-width: 180px; height: 2px;
  background: linear-gradient(90deg, transparent, var(--gold)); }
.geo-tagline .gt-line:last-child { background: linear-gradient(90deg, var(--gold), transparent); }
.geo-tagline p {
  font-family: var(--font-display); font-weight: 600;
  color: var(--navy-800); font-size: clamp(1.25rem, 2.6vw, 2rem); line-height: 1.35;
  text-align: center;
}
.geo-tagline p em { color: var(--gold); font-style: italic; }
.geo-tagline .gt-mark { color: var(--gold); font-size: 1.4em; line-height: 0; vertical-align: -0.18em; }
@media (max-width: 700px) { .geo-tagline .gt-line { display: none; } }

@media (max-width: 900px) {
  .geo-track { grid-template-columns: 1fr; gap: 110px; padding-top: 130px; }
  .geo-track::before { left: 50%; right: auto; top: 40px; bottom: 40px; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--gold) 0 10px, transparent 10px 18px); }
}

/* ============================================================
   PILLARS STACK (CSS/JS, replaces PNG on index)
   ============================================================ */
.pillar-stack { display: flex; flex-direction: column; gap: 16px; }
.pillar-item {
  position: relative; overflow: hidden;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-700));
  border: 1px solid rgba(212, 175, 55, .35); border-radius: 12px;
  padding: 22px 24px 22px 30px; cursor: pointer;
  transition: all .45s var(--ease);
}
.pillar-item::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px;
  background: linear-gradient(180deg, #6F5A13, var(--gold), #F2E6B1, var(--gold), #6F5A13);
}
.pillar-item .pi-head { display: flex; align-items: baseline; gap: 14px; }
.pillar-item .pi-num {
  font-family: var(--font-display); font-weight: 700; font-size: 1.9rem;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold); line-height: 1;
}
.pillar-item h3 { color: var(--gold-light); font-size: 1.3rem; letter-spacing: .04em; }
.pillar-item .pi-sub { color: rgba(255, 255, 255, .8); font-weight: 600; font-size: .85rem; margin-top: 4px; }
.pillar-item ul { max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s var(--ease); }
.pillar-item li { color: rgba(255, 255, 255, .68); font-size: .86rem; padding: 3px 0 3px 20px; position: relative; }
.pillar-item li::before { content: "✦"; position: absolute; left: 0; color: var(--gold); font-size: .7rem; top: 6px; }
.pillar-item:hover, .pillar-item.open {
  transform: translateX(8px); border-color: var(--gold-light);
  box-shadow: 0 14px 34px rgba(6, 38, 29, .35);
}
.pillar-item:hover ul, .pillar-item.open ul { max-height: 160px; margin-top: 12px; }
.pillar-hint { font-size: .78rem; color: var(--grey-500); margin-top: 10px; font-style: italic; }

@media (prefers-reduced-motion: reduce) {
  .geo-hub .gh-node, .geo-hub .gh-node::after { animation: none !important; }
}


/* ============================================================
   ORG STRUCTURE STACK (about.html, replaces group PNG)
   ============================================================ */
.org-stack { display: flex; flex-direction: column; gap: 0; }
.org-apex {
  background: linear-gradient(135deg, #F2E6B1 0%, var(--gold) 45%, #B08D22 100%);
  color: var(--navy-900); border-radius: 12px; padding: 20px 26px; text-align: center;
  box-shadow: 0 12px 30px rgba(212, 175, 55, .35);
  position: relative; z-index: 2;
}
.org-apex h3 { color: var(--navy-900); font-size: 1.3rem; }
.org-apex p { font-size: .82rem; font-weight: 600; color: rgba(8, 45, 34, .75); }
.org-stem { width: 2px; height: 26px; margin: 0 auto; background: linear-gradient(var(--gold), rgba(212, 175, 55, .4)); }
.org-rows { display: flex; flex-direction: column; gap: 12px; }
.org-row {
  position: relative; overflow: hidden; cursor: pointer;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-700));
  border: 1px solid rgba(212, 175, 55, .35); border-radius: 12px;
  padding: 16px 20px 16px 26px;
  transition: all .45s var(--ease);
}
.org-row::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, #6F5A13, var(--gold), #F2E6B1, var(--gold), #6F5A13);
}
.org-row .or-head { display: flex; align-items: center; gap: 12px; }
.org-row .or-ic {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  background: rgba(212, 175, 55, .14); border: 1px solid rgba(212, 175, 55, .5);
  display: grid; place-items: center; color: var(--gold-light);
  transition: all .4s var(--ease);
}
.org-row .or-ic svg { width: 17px; height: 17px; }
.org-row h3 { color: var(--gold-light); font-size: 1.02rem; font-family: var(--font-sans); font-weight: 700; letter-spacing: .06em; }
.org-row .or-count {
  margin-left: auto; font-size: .7rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255, 255, 255, .55); border: 1px solid rgba(255, 255, 255, .25);
  border-radius: 20px; padding: 2px 10px; transition: all .4s;
}
.org-row .or-chips { display: flex; flex-wrap: wrap; gap: 8px; max-height: 0; overflow: hidden; transition: max-height .5s var(--ease), margin .5s var(--ease); }
.org-row .or-chips span {
  font-size: .78rem; font-weight: 600; color: var(--ivory);
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 20px; padding: 5px 14px; transition: all .3s;
}
.org-row .or-chips span:hover { background: var(--gold); color: var(--navy-900); border-color: var(--gold); }
.org-row .or-chips .future { border-style: dashed; color: rgba(255, 255, 255, .6); }
.org-row:hover, .org-row.open {
  transform: translateX(8px); border-color: var(--gold-light);
  box-shadow: 0 14px 30px rgba(6, 38, 29, .35);
}
.org-row:hover .or-ic { background: var(--gold); color: var(--navy-900); transform: rotate(360deg); }
.org-row:hover .or-count, .org-row.open .or-count { color: var(--gold-light); border-color: var(--gold); }
.org-row:hover .or-chips, .org-row.open .or-chips { max-height: 120px; margin-top: 12px; }
.org-note { font-size: .76rem; color: var(--grey-500); font-style: italic; margin-top: 12px; }

/* ============================================================
   PILLAR GRID (about.html full-width, replaces pillars PNG)
   ============================================================ */
.pillar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; text-align: left; position: relative; }
.pillar-col {
  position: relative; overflow: hidden;
  background: linear-gradient(160deg, #0F5541, var(--navy-800));
  border: 1px solid rgba(212, 175, 55, .35); border-radius: 14px;
  padding: 34px 28px 28px;
  transition: transform .45s var(--ease), box-shadow .45s var(--ease), border-color .45s;
}
.pillar-col::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px;
  background: linear-gradient(90deg, #6F5A13, var(--gold), #F2E6B1, var(--gold), #6F5A13);
}
.pillar-col::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 50%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .08), transparent);
  transform: skewX(-20deg); transition: left .7s var(--ease);
}
.pillar-col:hover::after { left: 130%; }
.pillar-col .pc-num {
  font-family: var(--font-display); font-weight: 700; font-size: 2.6rem; line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px var(--gold); display: block; margin-bottom: 14px;
}
.pillar-col h3 { color: var(--gold-light); font-size: 1.45rem; letter-spacing: .05em; }
.pillar-col .pc-sub { color: rgba(255, 255, 255, .85); font-weight: 600; font-size: .9rem; margin: 6px 0 16px; }
.pillar-col .pc-sep { width: 100%; height: 1px; background: rgba(212, 175, 55, .35); margin-bottom: 16px; }
.pillar-col li { color: rgba(255, 255, 255, .68); font-size: .88rem; padding: 5px 0 5px 22px; position: relative; }
.pillar-col li::before {
  content: ""; position: absolute; left: 0; top: 12px; width: 9px; height: 9px;
  border: 2px solid var(--gold); border-radius: 50%; transition: background .3s;
}
.pillar-col:hover { transform: translateY(-10px); border-color: var(--gold-light); box-shadow: 0 22px 48px rgba(6, 38, 29, .45); }
.pillar-col:hover li::before { background: var(--gold); }

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


/* ============================================================
   OUR JOURNEY (about.html)
   ============================================================ */
.journey-media { position: relative; padding: 0 26px 26px 0; }
.journey-media::before {
  content: ""; position: absolute; top: 26px; left: 26px; right: 0; bottom: 0;
  border: 2px solid var(--gold); border-radius: 14px; opacity: .6;
}
.journey-media .jm-img {
  position: relative; border-radius: 14px; overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.journey-media .jm-img img { width: 100%; aspect-ratio: 4/3.4; object-fit: cover; transition: transform 1s var(--ease); }
.journey-media:hover .jm-img img { transform: scale(1.06); }
.journey-media .jm-img::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(15deg, rgba(6, 38, 29, .55), transparent 45%);
}
.journey-media .jm-badge {
  position: absolute; left: -18px; bottom: 8px; z-index: 2;
  background: linear-gradient(135deg, #F2E6B1, var(--gold) 55%, #B08D22);
  color: var(--navy-900); border-radius: 12px; padding: 18px 24px;
  max-width: 250px; box-shadow: 0 16px 36px rgba(143, 116, 24, .45);
  transition: transform .4s var(--ease);
}
.journey-media:hover .jm-badge { transform: translateY(-6px) rotate(-1.5deg); }
.journey-media .jm-badge small { display: block; font-size: .66rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; opacity: .75; }
.journey-media .jm-badge span { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; line-height: 1.3; }

.journey-steps { position: relative; margin-top: 26px; }
.journey-steps::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px; width: 2px;
  background: linear-gradient(180deg, var(--gold), rgba(212, 175, 55, .15));
}
.j-step { position: relative; padding: 0 0 22px 44px; cursor: default; transition: transform .35s var(--ease); }
.j-step:last-child { padding-bottom: 0; }
.j-step::before {
  content: ""; position: absolute; left: 3px; top: 6px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--white); border: 3px solid var(--gold);
  transition: all .35s var(--ease); z-index: 1;
}
.j-step h3 { font-size: 1.05rem; font-family: var(--font-sans); font-weight: 700; color: var(--navy-800); }
.j-step p { font-size: .9rem; color: var(--grey-500); margin-top: 2px; }
.j-step:hover { transform: translateX(8px); }
.j-step:hover::before { background: var(--gold); box-shadow: 0 0 0 6px rgba(212, 175, 55, .2); }
.j-step:hover h3 { color: var(--gold); }

@media (max-width: 900px) {
  .journey-media { margin-bottom: 46px; }
  .journey-media .jm-badge { left: 8px; }
}


/* ============================================================
   FOOTPRINT CARDS (about.html — photo backgrounds)
   ============================================================ */
.fp-card {
  position: relative; border-radius: 14px; overflow: hidden;
  min-height: 430px; display: flex; flex-direction: column; justify-content: flex-end;
  padding: 30px 28px; text-align: left;
  box-shadow: var(--shadow-md);
  transition: transform .45s var(--ease), box-shadow .45s var(--ease);
}
.fp-card .fp-bg {
  position: absolute; inset: 0; z-index: 0;
  background-size: cover; background-position: center;
  transition: transform 1.1s var(--ease);
}
.fp-card::before {
  content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(8deg, rgba(5, 34, 26, .93) 22%, rgba(5, 34, 26, .55) 55%, rgba(5, 34, 26, .12));
  transition: background .5s;
}
.fp-card::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 5px; z-index: 2;
  background: linear-gradient(90deg, #6F5A13, var(--gold), #F2E6B1, var(--gold), #6F5A13);
  transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease);
}
.fp-card > * { position: relative; z-index: 2; }
.fp-card .fp-flag {
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 8px;
}
.fp-card h3 { color: var(--white); font-size: 1.6rem; }
.fp-card p { color: rgba(255, 255, 255, .82); font-size: .92rem; margin-top: 10px; }
.fp-card:hover { transform: translateY(-10px); box-shadow: var(--shadow-lg); }
.fp-card:hover .fp-bg { transform: scale(1.09); }
.fp-card:hover::after { transform: scaleX(1); }



/* ============================================================
   INTRO PRELOADER (index.html)
   ============================================================ */
.preloader {
  position: fixed; inset: 0; z-index: 5000;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 28px; text-align: center; padding: 24px;
  background:
    linear-gradient(180deg, rgba(5, 42, 32, .35) 0%, rgba(5, 42, 32, .12) 60%, rgba(5, 42, 32, .05) 100%),
    url("../bgimages/9bbbb.jpg") center/cover no-repeat,
    linear-gradient(150deg, #052A20 0%, #0B4D3B 55%, #0E5C46 100%);
  transition: transform .9s cubic-bezier(.7, 0, .3, 1), opacity .9s;
}
.preloader.done { transform: translateY(-100%); opacity: 0; pointer-events: none; }
.preloader .pl-logo {
  width: min(280px, 56vw); height: auto;
  opacity: 0; transform: scale(.72);
  animation: plLogo 1.1s cubic-bezier(.22, .8, .28, 1) .15s forwards;
}
@keyframes plLogo { to { opacity: 1; transform: scale(1); } }
.preloader .pl-line {
  width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold), transparent);
  animation: plLine .8s cubic-bezier(.22, .8, .28, 1) 1.1s forwards;
}
@keyframes plLine { to { width: min(360px, 70vw); } }
.preloader .pl-msg {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(1.3rem, 3.4vw, 2.6rem); line-height: 1.3;
  color: var(--ivory); letter-spacing: .04em; max-width: 900px;
  opacity: 0; transform: translateY(26px);
  animation: plMsg .9s cubic-bezier(.22, .8, .28, 1) 1.45s forwards;
}
.preloader .pl-msg em { color: var(--gold-light); font-style: normal; }
.preloader .pl-msg .pl-house,
.preloader .pl-msg .pl-sub { display: block; }
.preloader .pl-msg .pl-house { text-transform: uppercase; letter-spacing: .12em; }
.preloader .pl-msg .pl-sub {
  margin-top: 10px;
  font-size: .48em; font-weight: 500; letter-spacing: .1em;
  color: rgba(246, 244, 238, .78);
}
@keyframes plMsg { to { opacity: 1; transform: none; } }
.preloader .pl-skip {
  position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%);
  font-size: .7rem; letter-spacing: .22em; text-transform: uppercase;
  color: rgba(255, 255, 255, .45); cursor: pointer; background: none; border: 0;
  font-family: var(--font-sans);
}
.preloader .pl-skip:hover { color: var(--gold-light); }

/* intro sound toggle — sits above Skip Intro. Browsers block audible autoplay
   without a gesture, so this doubles as the "turn it on" affordance. */
.preloader .pl-sound {
  position: absolute; bottom: 62px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 9px;
  padding: 8px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(212, 175, 55, .35);
  color: rgba(255, 255, 255, .6);
  font-family: var(--font-sans);
  font-size: .64rem; letter-spacing: .2em; text-transform: uppercase;
  transition: color .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
.preloader .pl-sound:hover {
  color: var(--gold-light); border-color: var(--gold); background: rgba(212, 175, 55, .1);
}
.preloader .pl-sound .pls-on { display: none; }
.preloader .pl-sound[aria-pressed="true"] { color: var(--gold-light); border-color: var(--gold); }
.preloader .pl-sound[aria-pressed="true"] .pls-on { display: block; }
.preloader .pl-sound[aria-pressed="true"] .pls-off { display: none; }

body.pl-lock { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { .preloader { display: none; } }


/* ============================================================
   PLATFORM FOCUS AREAS — emerald panel (ecosystem.html)
   ============================================================ */
/* small provenance/disclaimer note under a page-hero lead */
.page-hero .ph-note {
  margin-top: 10px; font-size: .8rem; letter-spacing: .04em;
  color: rgba(255, 255, 255, .62); font-style: italic;
}

/* Newsroom holding state */
.newsroom-holding {
  text-align: center; border: 1px solid var(--grey-300); border-radius: 16px;
  background: var(--white); box-shadow: var(--shadow-sm);
  padding: clamp(40px, 6vw, 72px) clamp(24px, 5vw, 60px);
}
.newsroom-holding .nh-mark { display: block; color: var(--gold); font-size: 1.6rem; margin-bottom: 16px; }
.newsroom-holding h2 { margin: 6px 0 18px; }
.newsroom-holding p { max-width: 620px; margin-inline: auto; }
.newsroom-holding p + p { margin-top: 14px; }

/* Chairman's signature block */
.signature { margin-top: 46px; }
.signature .sig-rule {
  display: block; width: 92px; height: 2px; margin-bottom: 18px;
  background: linear-gradient(90deg, var(--gold), rgba(212, 175, 55, 0));
}
.signature .sig-name {
  font-family: var(--font-display); font-size: clamp(1.3rem, 2.4vw, 1.75rem);
  color: var(--navy-800); margin: 0 0 4px;
}
.signature .sig-role,
.signature .sig-org {
  margin: 0; font-size: .82rem; letter-spacing: .16em; text-transform: uppercase; color: var(--grey-500);
}
.signature .sig-org { margin-top: 2px; color: #8A6F1C; }

/* "Group company:" attribution under a platform block */
.cb-group {
  margin-top: 14px; font-size: .92rem; color: var(--grey-700);
}
.cb-group > span {
  font-size: .68rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase;
  color: #8A6F1C; display: block; margin-bottom: 4px;
}
.cb-group a { color: inherit; text-decoration: underline; text-decoration-color: rgba(212, 175, 55, .6); text-underline-offset: 3px; }
.cb-group a:hover { color: #8A6F1C; }

/* Future Investments closing panel on the ecosystem page */
.future-panel {
  margin-top: 8px; border: 1px dashed var(--gold); border-radius: 12px;
  padding: 26px clamp(20px, 3vw, 34px); background: rgba(212, 175, 55, .06);
}
.future-panel .fp-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: #8A6F1C; margin-bottom: 8px;
}
.future-panel p:last-child { margin: 0; }

.focus-panel {
  margin-top: 22px;
  background: linear-gradient(150deg, var(--navy-800), var(--navy-900));
  border: 1px solid var(--gold); border-radius: 12px;
  padding: 20px 24px;
  box-shadow: 0 10px 26px rgba(6, 38, 29, .18);
  transition: box-shadow .4s var(--ease), border-color .4s;
  position: relative; overflow: hidden;
}
.focus-panel::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #6F5A13, var(--gold), #F2E6B1, var(--gold), #6F5A13);
}
.focus-panel:hover { border-color: var(--gold-light); box-shadow: 0 16px 36px rgba(6, 38, 29, .3); }
.focus-panel .fp-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
  color: var(--gold-light); margin-bottom: 10px; display: flex; align-items: center; gap: 10px;
}
.focus-panel .fp-label::after { content: ""; flex: 1; height: 1px; background: rgba(212, 175, 55, .35); }
.focus-panel ul { display: flex; flex-wrap: wrap; gap: 6px 28px; margin: 0; }
.focus-panel li {
  color: var(--ivory); font-size: .88rem; font-weight: 500;
  padding: 4px 0 4px 22px; position: relative; transition: color .3s;
}
.focus-panel li::before {
  content: "\2726"; position: absolute; left: 0; top: 4px;
  color: var(--gold); font-size: .8rem; transition: transform .3s var(--ease);
}
.focus-panel li:hover { color: var(--gold-light); }
.focus-panel li:hover::before { transform: rotate(180deg) scale(1.2); }

/* ============================================================
   REVEAL / ANIMATION PRIMITIVES (JS adds .in)
   ============================================================ */
.reveal { opacity: 0; transform: translateY(44px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
.reveal-l { opacity: 0; transform: translateX(-54px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-r { opacity: 0; transform: translateX(54px); transition: opacity .9s var(--ease), transform .9s var(--ease); }
.reveal-l.in, .reveal-r.in { opacity: 1; transform: none; }
[data-stagger] > * { opacity: 0; transform: translateY(36px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
[data-stagger].in > * { opacity: 1; transform: none; }

/* On narrow viewports a ±54px horizontal start offset makes the page wider than
   the screen until each element animates in, producing real sideways scroll.
   Same effect, vertical axis, no overflow. */
@media (max-width: 900px) {
  .reveal-l, .reveal-r { transform: translateY(30px); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-l, .reveal-r, [data-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-media video, .hero-media img, .page-hero::before { animation: none !important; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1080px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  :root { --nav-h: 96px; }
  .navbar.scrolled { height: 80px; }
  .nav-logo img { height: 80px; }
  .navbar.scrolled .nav-logo img { height: 66px; }
  .hamburger { display: flex; }
  .nav-cta { display: none; }
  /* backdrop-filter makes .navbar a containing block for fixed-position
     descendants, which traps the full-screen menu inside the header box.
     The mobile bar is near-opaque anyway, so drop the blur here. */
  .navbar { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255, 255, 255, .97); }
  /* .navbar is the stacking context for .nav-menu, so it must outrank .top-strip
     (z-index 1002) for the overlay to cover the full screen */
  .navbar { z-index: 1003; }
  .nav-menu {
    position: fixed; inset: 0; z-index: 1100;
    background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
    flex-direction: column; align-items: center; gap: 4px;
    /* start below the header and scroll: centering clips unreachable items once a
       submenu is expanded, so the menu must never rely on vertical centering */
    justify-content: flex-start;
    box-sizing: border-box;
    padding: calc(var(--nav-h) + 6px) 16px 48px;
    overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch;
    opacity: 0; visibility: hidden; transition: opacity .4s var(--ease);
  }
  .nav-menu.open { opacity: 1; visibility: visible; }
  .nav-menu > li { width: min(420px, 88%); text-align: center; opacity: 0; transform: translateY(18px); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .nav-menu.open > li { opacity: 1; transform: none; }
  .nav-menu > li + li { border-top: 1px solid rgba(255, 255, 255, .08); }
  .nav-menu > li > a { justify-content: center; color: var(--white); font-size: 1.12rem; font-family: var(--font-display); padding: 15px 13px; }
  .nav-menu > li > a .chev { transition: transform .35s var(--ease); }
  .nav-menu > li.sub-open > a { color: var(--gold-light); }
  .nav-menu > li.sub-open > a .chev { transform: rotate(180deg); }
  .dropdown {
    position: static; transform: none; opacity: 1; visibility: visible; pointer-events: auto;
    background: transparent; box-shadow: none; border: 0; min-width: 0; padding: 0;
    max-height: 0; overflow: hidden; transition: max-height .4s var(--ease);
  }
  /* no gap to bridge in the accordion — the panel sits directly under its link */
  .dropdown::before { display: none; }
  /* the desktop hover/focus rule centres the flyout with translateX(-50%).
     Tapping a parent link focuses it, so :focus-within matches on touch and
     that transform would drag the in-flow accordion panel half its width
     off-screen. Must be neutralised at matching specificity. */
  .nav-menu > li:hover .dropdown,
  .nav-menu > li:focus-within .dropdown { transform: none; top: auto; left: auto; }
  /* generous ceiling so the count of submenu items can change without clipping */
  .nav-menu > li.sub-open .dropdown { max-height: 620px; margin-bottom: 8px; }
  .dropdown a { color: rgba(255, 255, 255, .78); text-align: center; padding: 12px 16px; font-size: .95rem; }
  .dropdown a + a { border-top: 1px solid rgba(255, 255, 255, .06); }
  .dropdown a small { display: none; }
  .dropdown a:hover, .dropdown a:focus-visible { background: rgba(255, 255, 255, .07); color: var(--gold-light); padding-left: 16px; }
  .dropdown a.active { color: var(--gold-light); }
  .grid-2, .grid-3, .contact-grid, .company-block { grid-template-columns: 1fr; }
  .company-block.flip .cb-media { order: 0; }
  .stats-strip .container { grid-template-columns: repeat(2, 1fr); gap: 30px; }
  .stat + .stat::before { display: none; }
  .footer-top { grid-template-columns: 1fr 1fr; }
  .top-strip .container { justify-content: center; }
  .top-strip .strip-loc { display: none; }
  .quote-band.nature { background-attachment: scroll; }
}
@media (max-width: 560px) {
  .grid-4, .footer-top { grid-template-columns: 1fr; }
  .stats-strip.cols-3 .container { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  :root { --nav-h: 82px; }
  .navbar.scrolled { height: 70px; }
  .nav-logo img { height: 68px; }
  .navbar.scrolled .nav-logo img { height: 56px; }
}