/* ---- Member logos (supplied by NIFIAN) --------------------------------- */
.member__logo img,
.marquee__item img,
.mega__logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent;
}
.member__logo { padding: var(--sp-5); min-height: 110px; }
.member__logo img { max-height: 68px; }
.marquee__item { padding: var(--sp-4) var(--sp-6); min-width: 200px; height: 84px; }
.marquee__item img { max-height: 40px; filter: grayscale(1); opacity: .62; transition: filter var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.marquee__item:hover img { filter: none; opacity: 1; }
.mega__logo { padding: var(--sp-3); min-height: 62px; }
.mega__logo img { max-height: 30px; }

/* ==========================================================================
   NIFIAN — Components
   ========================================================================== */

/* ==========================================================================
   1. Buttons
   ========================================================================== */

.btn {
  --btn-bg: var(--green-900);
  --btn-fg: var(--white);
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 1rem 1.75rem;
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out),
              color var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              transform var(--dur-fast) var(--ease-out);
  min-height: 48px;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn:active { transform: translateY(0); }

.btn .btn__icon {
  width: 14px; height: 14px;
  flex: none;
  transition: transform var(--dur) var(--ease-out);
}
.btn:hover .btn__icon { transform: translateX(3px); }

.btn--primary { --btn-bg: var(--gold); --btn-fg: var(--green-950); }
.btn--primary:hover { --btn-bg: var(--gold-bright); }

.btn--dark { --btn-bg: var(--green-900); --btn-fg: var(--white); }
.btn--dark:hover { --btn-bg: var(--green-700); }

.btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--ink);
  border-color: var(--border);
}
.btn--ghost:hover { --btn-bg: var(--ink); --btn-fg: var(--white); border-color: var(--ink); }

.btn--ghost-light {
  --btn-bg: transparent;
  --btn-fg: var(--white);
  border-color: var(--on-dark-line);
}
.btn--ghost-light:hover { --btn-bg: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.4); }

.btn--sm { padding: 0.75rem 1.25rem; min-height: 40px; }
.btn--block { display: flex; width: 100%; justify-content: center; }

.btn-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }

/* Text link with arrow */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--gold-ink);
  border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
  transition: gap var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.link-arrow:hover { gap: var(--sp-3); text-decoration: none; }
.section--dark .link-arrow { color: var(--gold); }

/* ==========================================================================
   2. Header + mega menu
   ========================================================================== */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background: var(--white);
  border-bottom: 1px solid var(--border);
  transition: top var(--dur-slow) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
/* Hide-on-scroll moves the stick offset rather than applying a transform.
   A transform here would make .site-header the containing block for its own
   position:fixed descendant — the mobile drawer, parked off-screen right at
   translateX(100%) — which then counts toward document width and lets the
   whole page be swiped sideways mid-scroll. Animating `top` hides the header
   just as well and creates no containing block.
   (overflow-x:clip on <html> also stops the swipe, but it silently kills
   position:sticky on this header, so it is not an option.) */
.site-header.is-hidden { top: -140px; }
.site-header.is-stuck { box-shadow: 0 1px 0 var(--border), 0 8px 24px rgba(11,46,38,0.06); }

/* Utility bar */
.utility-bar {
  background: var(--green-950);
  color: var(--on-dark-muted);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}
.utility-bar__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-5);
  min-height: 36px;
}
.utility-bar a { color: inherit; text-decoration: none; transition: color var(--dur) var(--ease-out); }
.utility-bar a:hover { color: var(--gold); }
.utility-bar__social { display: flex; gap: var(--sp-4); align-items: center; }
@media (max-width: 1024px) { .utility-bar { display: none; } }

/* Nav bar */
.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-6);
  min-height: 84px;
  transition: min-height var(--dur) var(--ease-out);
}
.site-header.is-stuck .nav { min-height: 68px; }

.brand { display: flex; align-items: center; gap: var(--sp-3); text-decoration: none; flex: none; }

/* Real NIFIAN logo. The supplied PNG has an opaque white background, so on dark
   surfaces it sits on a white chip rather than being keyed out — keying would
   also punch through the negative space inside the mark. */
.brand__logo { height: 46px; width: auto; background: transparent; transition: height var(--dur) var(--ease-out); }
.site-header.is-stuck .brand__logo { height: 38px; }
@media (max-width: 520px) { .brand__logo { height: 36px; } }

.brand--chip {
  background: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-3) var(--sp-4);
  display: inline-flex;
}
.brand--chip .brand__logo { height: 52px; }
.brand__mark {
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--green-900);
  display: grid; place-items: center;
  flex: none;
}
.brand__mark svg { width: 22px; height: 22px; }
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--green-900);
}
.brand__tag {
  font-family: var(--font-mono);
  font-size: 0.5625rem;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--muted);
}
@media (max-width: 420px) { .brand__tag { display: none; } }

/* Primary nav list */
.nav__list {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  list-style: none;
  margin: 0; padding: 0;
}
.nav__item { position: relative; }

.nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0.6rem 0.85rem;
  border-radius: var(--r-pill);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.nav__link:hover,
.nav__item.is-open > .nav__link { background: var(--bone); text-decoration: none; }
.nav__link[aria-current="page"] { color: var(--green-700); font-weight: 600; }
.nav__link[aria-current="page"]::after {
  content: ""; position: absolute; left: 0.85rem; right: 0.85rem; bottom: -2px;
  height: 2px; background: var(--gold); border-radius: 2px;
}
.nav__chev { width: 10px; height: 10px; transition: transform var(--dur) var(--ease-out); opacity: 0.55; }
.nav__item.is-open .nav__chev { transform: rotate(180deg); }

.nav__actions { display: flex; align-items: center; gap: var(--sp-3); flex: none; }

/* ---- Mega panel -------------------------------------------------------- */
.mega {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: min(1100px, calc(100vw - 3rem));
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-float);
  padding: var(--sp-6);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out), visibility var(--dur);
}
.nav__item.is-open .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.mega::before { /* hover bridge so the cursor can travel to the panel */
  content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 16px;
}

/* Desktop: anchor every mega panel to the header container, not to its own nav
   item. Centring on the item pushed the left-most panel (About Us) off the
   left edge of the screen, because a 1100px panel centred on an item ~250px
   from the edge starts at roughly -300px. */
@media (min-width: 1101px) {
  .site-header .container { position: relative; }
  .nav__item--has-mega { position: static; }
  .mega {
    left: var(--gutter);
    right: var(--gutter);
    width: auto;
    max-width: none;
    transform: translateY(-8px);
  }
  .nav__item.is-open .mega { transform: translateY(0); }
}

/* Desktop parents navigate on click, so this is redundant there. On mobile the
   parent link toggles the accordion instead, and this is the only route to the
   section landing page. */
.mega__overview { display: none; }
@media (max-width: 1100px) {
  .mega__overview {
    display: flex; align-items: center; gap: var(--sp-2);
    font-family: var(--font-mono); font-size: 0.6875rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--gold-ink); text-decoration: none;
    padding: var(--sp-3) 0 var(--sp-4);
    min-height: 44px;
  }
}

.mega__grid { display: grid; gap: var(--sp-6); }
.mega__grid--3 { grid-template-columns: 1fr 1fr 1.15fr; }
.mega__grid--2 { grid-template-columns: 1fr 1fr; }
.mega__grid--dir { grid-template-columns: 0.8fr 2fr; }

.mega__heading {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 var(--sp-4);
}
.mega__list { list-style: none; margin: 0; padding: 0; }
.mega__list li { margin: 0; }
.mega__list a {
  display: block;
  padding: 0.55rem 0.75rem;
  margin-left: -0.75rem;
  border-radius: var(--r-sm);
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.mega__list a:hover { background: var(--bone); color: var(--green-700); text-decoration: none; }

/* Icon cards inside the What We Do panel */
.mega__cards { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.mega__card {
  display: flex; gap: var(--sp-3); align-items: flex-start;
  padding: var(--sp-3);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--ink);
  transition: background var(--dur-fast) var(--ease-out);
}
.mega__card:hover { background: var(--bone); text-decoration: none; }
.mega__card svg { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--green-700); }
.mega__card b { display: block; font-size: 0.9375rem; font-weight: 600; }
.mega__card span { font-size: 0.8125rem; color: var(--muted); line-height: 1.45; }

/* Feature/media card inside a panel */
.mega__feature {
  position: relative;
  border-radius: var(--r-md);
  overflow: hidden;
  min-height: 210px;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-5);
  color: var(--white);
  text-decoration: none;
  isolation: isolate;
}
.mega__feature img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: -2;
}
.mega__feature::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(180deg, rgba(11,46,38,0.25) 0%, rgba(7,31,25,0.92) 100%);
}
.mega__feature strong { font-family: var(--font-display); font-size: 1.0625rem; line-height: 1.3; display: block; }
.mega__feature span {
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--gold); margin-top: var(--sp-3); display: block;
}

/* Member logo grid inside the Members panel */
.mega__logos { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-2); }
.mega__logo {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-4) var(--sp-3);
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: 0.8125rem;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  color: var(--ink);
  min-height: 58px;
  transition: border-color var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out);
}
.mega__logo:hover { border-color: var(--green-700); background: var(--bone); text-decoration: none; }

.mega__footer {
  margin-top: var(--sp-5);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap;
  font-size: 0.875rem;
}

/* ---- Mobile nav -------------------------------------------------------- */
.nav__toggle {
  display: none;
  width: 48px; height: 48px;
  align-items: center; justify-content: center;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--r-pill);
  flex: none;
}
.nav__toggle span {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  position: relative; transition: background var(--dur-fast);
}
.nav__toggle span::before, .nav__toggle span::after {
  content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--ink);
  transition: transform var(--dur) var(--ease-out), top var(--dur) var(--ease-out);
}
.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }
.nav__toggle[aria-expanded="true"] span { background: transparent; }
.nav__toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav__toggle[aria-expanded="true"] span::after  { top: 0; transform: rotate(-45deg); }

@media (max-width: 1100px) {
  .nav__toggle { display: inline-flex; }
  .nav__actions .btn { display: none; }

  .nav__menu {
    position: fixed;
    inset: 0 0 0 auto;
    width: min(420px, 100%);
    background: var(--white);
    border-left: 1px solid var(--border);
    padding: 96px var(--gutter) var(--sp-8);
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform var(--dur-slow) var(--ease-out);
    z-index: var(--z-overlay);
    display: block;
    /* Own compositing layer so the scrim's backdrop-filter never samples it */
    isolation: isolate;
  }
  .nav__menu.is-open { transform: translateX(0); }

  .nav__list { flex-direction: column; align-items: stretch; gap: 0; }
  .nav__item { border-bottom: 1px solid var(--border); }
  .nav__link {
    width: 100%;
    justify-content: space-between;
    padding: 1rem 0;
    border-radius: 0;
    font-size: 1.0625rem;
    min-height: 56px;
  }
  .nav__link[aria-current="page"]::after { display: none; }

  /* Mega panels become plain accordions on mobile */
  .mega {
    position: static;
    transform: none;
    width: auto;
    border: 0; box-shadow: none; padding: 0 0 var(--sp-5);
    opacity: 1; visibility: visible; pointer-events: auto;
    display: none;
    background: transparent;
  }
  .nav__item.is-open .mega { display: block; transform: none; }
  .mega__grid--3, .mega__grid--2, .mega__grid--dir,
  .mega__cards, .mega__logos { grid-template-columns: 1fr; }
  .mega__feature { display: none; }

  .nav__mobile-cta { margin-top: var(--sp-6); display: block; }
  .nav__mobile-cta .btn { width: 100%; justify-content: center; }
}
@media (min-width: 1101px) { .nav__mobile-cta { display: none; } }

.nav-scrim {
  position: fixed; inset: 0;
  background: rgba(7,31,25,0.5);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
  /* Must sit BELOW --z-header. The drawer is a child of .site-header, which
     creates its own stacking context at z-index 100 — so a scrim above that
     would paint over the drawer and swallow its clicks. */
  z-index: 90;
}
.nav-scrim.is-open { opacity: 1; visibility: visible; }

/* Scroll progress bar */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 100%;
  transform: scaleX(0); transform-origin: 0 50%;
  background: var(--gold);
  z-index: var(--z-modal);
  pointer-events: none;
}

/* ==========================================================================
   3. Hero
   ========================================================================== */

.hero {
  position: relative;
  background: var(--green-900);
  color: var(--white);
  overflow: hidden;
  isolation: isolate;
}
.hero__slides { position: absolute; inset: 0; z-index: -3; }
.hero__slide {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--ease-out);
}
.hero__slide.is-active { opacity: 1; }
.hero__slide img {
  width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.06);
  transition: transform 7s linear;
}
.hero__slide.is-active img { transform: scale(1); }
.hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: linear-gradient(100deg,
    rgba(11,46,38,0.95) 0%,
    rgba(11,46,38,0.78) 42%,
    rgba(11,46,38,0.28) 100%);
}
.hero__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero__inner {
  min-height: min(88vh, 820px);
  display: flex; flex-direction: column; justify-content: center;
  padding-block: clamp(4rem, 10vh, 8rem);
  position: relative;
}
.hero--compact .hero__inner { min-height: min(52vh, 480px); }
.hero--page .hero__inner { min-height: min(46vh, 420px); }

.hero__eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
}
.hero__content { max-width: 860px; }
.hero__content h1, .hero__content .display { color: var(--white); margin-bottom: var(--sp-5); }
.hero__content p {
  font-size: var(--fs-lead);
  color: rgba(255,255,255,0.78);
  max-width: 58ch;
  margin-bottom: var(--sp-7);
}

/* Slide text swap */
.hero__pane { display: none; }
.hero__pane.is-active { display: block; animation: heroIn 640ms var(--ease-out) both; }
@keyframes heroIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

.hero__dots {
  display: flex; gap: var(--sp-3); align-items: center;
  margin-top: var(--sp-8);
}
.hero__dot {
  width: 34px; height: 3px; border: 0; padding: 0;
  background: rgba(255,255,255,0.28);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  transition: background var(--dur) var(--ease-out);
}
/* The bar is 3px tall by design, which is far below the 24x24 minimum for a
   touch target — on a phone the slider dots were effectively untappable.
   ::before extends an invisible 44px-tall hit area around the bar without
   changing the layout. It must not be clipped, so the bar's fill is clipped
   by matching border-radius on ::after instead of overflow:hidden. */
.hero__dot::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 44px;
  transform: translateY(-50%);
}
.hero__dot::after {
  content: ""; position: absolute; inset: 0;
  background: var(--gold);
  border-radius: 2px;
  transform: scaleX(0); transform-origin: 0 50%;
}
.hero__dot.is-active::after { animation: dotFill 6s linear forwards; }
@keyframes dotFill { to { transform: scaleX(1); } }
.hero__dot:hover { background: rgba(255,255,255,0.5); }

.hero__scroll {
  position: absolute; bottom: var(--sp-6); right: var(--gutter);
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  display: flex; align-items: center; gap: var(--sp-3);
  text-decoration: none;
}
.hero__scroll::after {
  content: ""; width: 1px; height: 40px;
  background: linear-gradient(180deg, var(--gold), transparent);
  animation: scrollCue 2.2s var(--ease-out) infinite;
}
@keyframes scrollCue { 0%,100% { opacity: 0.35; transform: scaleY(0.7); } 50% { opacity: 1; transform: scaleY(1); } }
@media (max-width: 860px) { .hero__scroll { display: none; } }

/* Breadcrumb */
.breadcrumb {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
  margin-bottom: var(--sp-5);
}
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { color: var(--gold); }
.breadcrumb span { margin-inline: var(--sp-2); opacity: 0.5; }

/* Hero chips (stats sitting on the hero's lower edge) */
.hero__chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); }
.chip {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: 0.55rem 1rem;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,0.05);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.86);
}
.chip--light {
  background: var(--bone); border-color: var(--border); color: var(--ink);
}

/* ==========================================================================
   4. Cards
   ========================================================================== */

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  transition: transform var(--dur) var(--ease-out),
              border-color var(--dur) var(--ease-out),
              box-shadow var(--dur) var(--ease-out);
  display: flex; flex-direction: column;
  height: 100%;
}
a.card { text-decoration: none; color: inherit; }
.card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-card); }
.card h3 { margin-bottom: var(--sp-3); }
.card p { font-size: var(--fs-sm); color: var(--text-muted); }
.card .link-arrow { margin-top: auto; padding-top: var(--sp-5); align-self: flex-start; }

.card--dark {
  background: var(--green-800);
  border-color: rgba(255,255,255,0.10);
  color: var(--on-dark);
}
.card--dark h3 { color: var(--white); }
.card--dark p { color: var(--on-dark-muted); }
.card--dark:hover { border-color: var(--gold); }

.card--flat { background: var(--bone); border-color: transparent; }
.card--flat:hover { border-color: var(--gold); }

.card__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.12em;
  color: var(--gold-ink);
  margin-bottom: var(--sp-4);
  display: block;
}
.card--dark .card__num { color: var(--gold); }

.card__icon {
  width: 44px; height: 44px;
  border-radius: var(--r-md);
  background: var(--bone);
  display: grid; place-items: center;
  margin-bottom: var(--sp-5);
  color: var(--green-700);
  transition: background var(--dur) var(--ease-out), color var(--dur) var(--ease-out);
}
.card__icon svg { width: 20px; height: 20px; }
.card:hover .card__icon { background: var(--green-900); color: var(--gold); }
.card--dark .card__icon { background: rgba(255,255,255,0.07); color: var(--gold); }

.card__media {
  margin: calc(var(--sp-6) * -1) calc(var(--sp-6) * -1) var(--sp-5);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.card:hover .card__media img { transform: scale(1.04); }

.card__meta {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--sp-4);
}
.card__meta span { display: inline-flex; align-items: center; gap: 6px; }

.tag {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--bone);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
}
.tag--gold { background: color-mix(in srgb, var(--gold) 16%, transparent); border-color: color-mix(in srgb, var(--gold) 40%, transparent); color: var(--gold-ink); }
.tag--dark { background: rgba(255,255,255,0.08); border-color: var(--on-dark-line); color: var(--gold); }

/* ==========================================================================
   5. Stats / counters
   ========================================================================== */

.stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--on-dark-line);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.stat {
  background: var(--green-900);
  padding: var(--sp-6);
  min-height: 168px;
  display: flex; flex-direction: column; justify-content: center;
}
.stat__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 3.6vw, 2.875rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 2px;
  min-height: 1em;
}
.stat__value .unit { font-size: 0.55em; color: rgba(255,255,255,0.75); }
.stat__label {
  margin-top: var(--sp-4);
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--white);
}
.stat__note {
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
  color: var(--on-dark-muted);
}
@media (max-width: 1024px) { .stats { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 520px)  { .stats { grid-template-columns: 1fr; } }

/* Inline stat callouts on light */
.stat-inline { display: flex; flex-wrap: wrap; gap: var(--sp-6); margin-top: var(--sp-6); }
.stat-inline > div { flex: 1 1 160px; border-top: 2px solid var(--gold); padding-top: var(--sp-4); }
.stat-inline b {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-variant-numeric: tabular-nums;
}
/* Direct child only. A bare `.stat-inline span` also matched the counter span
   inside the <b>, which forced the number onto its own line at label size and
   orphaned the "%" underneath it. */
.stat-inline > div > span { font-size: var(--fs-sm); color: var(--text-muted); display: block; margin-top: var(--sp-2); }

/* This component is used inside dark bands, where nothing was setting the
   number's colour — so the figures rendered in near-black ink on dark green
   and the count-up was invisible. */
.on-dark .stat-inline b,
.section--dark .stat-inline b { color: var(--white); }
.on-dark .stat-inline > div > span,
.section--dark .stat-inline > div > span { color: var(--on-dark-muted); }

/* Floating stat card over an image */
.float-stat {
  position: absolute; right: -12px; bottom: -20px;
  background: var(--green-900);
  color: var(--white);
  border-radius: var(--r-md);
  padding: var(--sp-5);
  max-width: 260px;
  box-shadow: var(--shadow-float);
}
.float-stat b {
  display: block;
  font-family: var(--font-display);
  font-size: 1.75rem; font-weight: 600; letter-spacing: -0.02em;
  color: var(--gold);
}
.float-stat span { font-size: 0.8125rem; color: var(--on-dark-muted); display: block; margin-top: 4px; line-height: 1.4; }
@media (max-width: 640px) { .float-stat { position: static; margin-top: var(--sp-4); max-width: none; } }

/* ==========================================================================
   6. Media blocks
   ========================================================================== */

.media { position: relative; border-radius: var(--r-lg); overflow: hidden; }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall { aspect-ratio: 4 / 5; }
.media--wide { aspect-ratio: 16 / 10; }
.media--square { aspect-ratio: 1; }

.media-pair { position: relative; padding-bottom: 12%; padding-right: 10%; }
.media-pair__a { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 4/3; }
.media-pair__b {
  position: absolute; right: 0; bottom: 0;
  width: 46%;
  border-radius: var(--r-md); overflow: hidden;
  border: 6px solid var(--white);
  aspect-ratio: 1;
}
.section--alt .media-pair__b { border-color: var(--bone); }
.section--dark .media-pair__b { border-color: var(--green-900); }
.media-pair img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 640px) {
  .media-pair { padding: 0; }
  .media-pair__b { display: none; }
}

/* Full-bleed image band */
.band { position: relative; isolation: isolate; overflow: hidden; }
.band__bg { position: absolute; inset: 0; z-index: -2; }
.band__bg img { width: 100%; height: 100%; object-fit: cover; }
.band::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: rgba(7,31,25,0.88);
}
.band--soft::after { background: rgba(7,31,25,0.82); }

.band-split { display: grid; grid-template-columns: 1fr 1fr; }
.band-split img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 16/9; }
@media (max-width: 640px) { .band-split { grid-template-columns: 1fr; } }

.statement {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 3vw, 2.25rem);
  line-height: 1.28;
  letter-spacing: -0.018em;
  font-weight: 500;
  max-width: 24ch;
}

/* ==========================================================================
   7. Accordion / toggles
   ========================================================================== */

.accordion { border-top: 1px solid var(--border); }
.section--dark .accordion { border-color: var(--on-dark-line); }

.accordion__item { border-bottom: 1px solid var(--border); }
.section--dark .accordion__item { border-color: var(--on-dark-line); }

.accordion__trigger {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-5);
  padding: var(--sp-5) 0;
  background: none; border: 0;
  text-align: left;
  font-family: var(--font-display);
  font-size: clamp(1.0625rem, 1.6vw, 1.1875rem);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: inherit;
  min-height: 64px;
  transition: color var(--dur) var(--ease-out);
  /* The question text is an anonymous flex item, so it carries min-width:auto
     and refuses to shrink below its longest word — which pushed the +/- icon
     past the right edge at 320px. `anywhere` (not `break-word`) is the one
     that actually reduces the min-content size. */
  overflow-wrap: anywhere;
}
@media (max-width: 400px) { .accordion__trigger { gap: var(--sp-3); } }
.accordion__trigger:hover { color: var(--green-700); }
.section--dark .accordion__trigger:hover { color: var(--gold); }

.accordion__icon {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  position: relative;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.section--dark .accordion__icon { border-color: var(--on-dark-line); }
.accordion__icon::before, .accordion__icon::after {
  content: ""; position: absolute; background: currentColor;
}
.accordion__icon::before { width: 12px; height: 1.5px; }
.accordion__icon::after  { width: 1.5px; height: 12px; transition: opacity var(--dur) var(--ease-out); }
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); background: var(--gold); border-color: var(--gold); color: var(--green-950); }
.accordion__trigger[aria-expanded="true"] .accordion__icon::after { opacity: 0; }

.accordion__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--dur-slow) var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body { padding-bottom: var(--sp-6); max-width: 74ch; }
.accordion__body p { font-size: var(--fs-sm); color: var(--text-muted); }
.section--dark .accordion__body p { color: var(--on-dark-muted); }

/* ==========================================================================
   8. Marquee
   ========================================================================== */

.marquee { overflow: hidden; position: relative; padding-block: var(--sp-2); }
.marquee::before, .marquee::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 90px; z-index: 2; pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(90deg, var(--surface-alt), transparent); }
.marquee::after  { right: 0; background: linear-gradient(270deg, var(--surface-alt), transparent); }
.section--dark .marquee::before { background: linear-gradient(90deg, var(--green-900), transparent); }
.section--dark .marquee::after  { background: linear-gradient(270deg, var(--green-900), transparent); }

.marquee__track { display: flex; gap: var(--sp-4); width: max-content; animation: marquee 42s linear infinite; }
.marquee__track--reverse { animation-direction: reverse; animation-duration: 52s; }
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }

.marquee__item {
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-5) var(--sp-6);
  min-width: 210px;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.marquee__item:hover { color: var(--green-900); border-color: var(--gold); text-decoration: none; }
.section--dark .marquee__item { background: var(--green-800); border-color: var(--on-dark-line); color: rgba(255,255,255,0.62); }
.section--dark .marquee__item:hover { color: var(--white); border-color: var(--gold); }

/* ==========================================================================
   9. Tables
   ========================================================================== */

.table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  -webkit-overflow-scrolling: touch;
}
.section--dark .table-wrap { border-color: var(--on-dark-line); }

table.data {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  background: var(--white);
}
.section--dark table.data { background: var(--green-800); color: var(--on-dark); }

table.data th, table.data td {
  padding: var(--sp-4) var(--sp-5);
  text-align: left;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}
.section--dark table.data th, .section--dark table.data td { border-color: var(--on-dark-line); }

table.data thead th {
  background: var(--bone);
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
}
.section--dark table.data thead th { background: var(--green-950); color: var(--gold); }

table.data tbody tr:last-child td { border-bottom: 0; }
table.data tbody tr { transition: background var(--dur-fast) var(--ease-out); }
table.data tbody tr:hover { background: var(--bone); }
.section--dark table.data tbody tr:hover { background: rgba(255,255,255,0.04); }

table.data td strong { font-weight: 600; }
table.data .num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Two-column comparison card */
.compare { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.compare__col { border-radius: var(--r-lg); padding: var(--sp-6); border: 1px solid var(--border); }
.compare__col--yes { background: var(--green-900); color: var(--on-dark); border-color: transparent; }
.compare__col--yes h3 { color: var(--white); }
.compare__col--no { background: var(--bone); }
.compare__col h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-5); }
.compare__col ul { list-style: none; padding: 0; margin: 0; }
.compare__col li {
  position: relative; padding-left: var(--sp-6); margin-bottom: var(--sp-4);
  font-size: var(--fs-sm); line-height: 1.5;
}
.compare__col li::before {
  position: absolute; left: 0; top: 0;
  font-family: var(--font-mono); font-size: 0.875rem; font-weight: 600;
}
.compare__col--yes li { color: var(--on-dark-muted); }
.compare__col--yes li::before { content: "✓"; color: var(--gold); }
.compare__col--no li::before { content: "✕"; color: var(--danger); }
@media (max-width: 760px) { .compare { grid-template-columns: 1fr; } }

/* ==========================================================================
   10. Timeline / steps
   ========================================================================== */

.timeline { position: relative; padding-left: var(--sp-8); }
.timeline::before {
  content: ""; position: absolute; left: 11px; top: 8px; bottom: 8px;
  width: 2px; background: var(--border);
}
.timeline__fill {
  position: absolute; left: 11px; top: 8px;
  width: 2px; background: var(--gold);
  height: 0;
  transition: height 120ms linear;
}
.timeline__item { position: relative; padding-bottom: var(--sp-7); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: ""; position: absolute; left: calc(var(--sp-8) * -1 + 5px); top: 6px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--white); border: 2px solid var(--border);
  transition: border-color var(--dur) var(--ease-out), background var(--dur) var(--ease-out);
}
.timeline__item.is-reached::before { border-color: var(--gold); background: var(--gold); }
.timeline__year {
  font-family: var(--font-mono);
  font-size: 0.75rem; letter-spacing: 0.1em;
  color: var(--gold-ink);
  display: block; margin-bottom: var(--sp-2);
}
.timeline__item h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-2); }
.timeline__item p { font-size: var(--fs-sm); color: var(--text-muted); }

.timeline__more { margin-top: var(--sp-6); }
.timeline__item.is-hidden { display: none; }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: var(--sp-5); }
.steps--4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.step {
  position: relative;
  padding-top: var(--sp-6);
  border-top: 2px solid var(--border);
  transition: border-color var(--dur) var(--ease-out);
}
.step:hover { border-top-color: var(--gold); }
.step__num {
  font-family: var(--font-mono);
  font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--gold-ink);
  display: block; margin-bottom: var(--sp-4);
}
.section--dark .step { border-top-color: var(--on-dark-line); }
.section--dark .step__num { color: var(--gold); }
.step h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.step p { font-size: var(--fs-sm); color: var(--text-muted); }
@media (max-width: 1024px) { .steps--4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .steps--4 { grid-template-columns: 1fr; } }

/* ==========================================================================
   11. Filters / tabs
   ========================================================================== */

.filterbar {
  display: flex; flex-wrap: wrap; gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-7);
  padding-bottom: var(--sp-5);
  border-bottom: 1px solid var(--border);
}
.filter-btn {
  padding: 0.6rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  background: var(--white);
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  min-height: 44px;
  transition: all var(--dur) var(--ease-out);
}
.filter-btn:hover { border-color: var(--green-700); color: var(--green-700); }
.filter-btn[aria-pressed="true"] { background: var(--green-900); border-color: var(--green-900); color: var(--white); }

.filter-search {
  margin-left: auto;
  position: relative;
  flex: 0 1 280px;
}
.filter-search input {
  width: 100%;
  padding: 0.7rem 1rem 0.7rem 2.5rem;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-family: var(--font-body);
  font-size: var(--fs-sm);
  min-height: 44px;
  background: var(--white);
  color: var(--ink);
}
.filter-search svg {
  position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--muted); pointer-events: none;
}
@media (max-width: 760px) { .filter-search { margin-left: 0; flex-basis: 100%; } }

.is-filtered-out { display: none !important; }

.empty-state {
  padding: var(--sp-8);
  text-align: center;
  color: var(--text-muted);
  border: 1px dashed var(--border);
  border-radius: var(--r-lg);
}

/* ==========================================================================
   12. Forms
   ========================================================================== */

.form { display: grid; gap: var(--sp-5); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
@media (max-width: 640px) { .form__row { grid-template-columns: 1fr; } }

.field { display: flex; flex-direction: column; gap: var(--sp-2); }
.field label {
  font-size: var(--fs-sm);
  font-weight: 600;
}
.field .req { color: var(--danger); }
.field .hint { font-size: var(--fs-xs); color: var(--text-muted); }

.field input[type="text"],
.field input[type="email"],
.field input[type="tel"],
.field input[type="search"],
.field select,
.field textarea {
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  background: var(--white);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  color: var(--ink);
  min-height: 48px;
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.field textarea { min-height: 150px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='none' stroke='%235A6763' stroke-width='1.6'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1rem center; background-size: 12px; padding-right: 2.5rem; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none;
  border-color: var(--green-700);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--green-700) 16%, transparent);
}
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"], .field select[aria-invalid="true"] { border-color: var(--danger); }
.field .error { font-size: var(--fs-xs); color: var(--danger); display: none; }
.field .error.is-visible { display: block; }

.check { display: flex; gap: var(--sp-3); align-items: flex-start; font-size: var(--fs-sm); }
.check input { width: 20px; height: 20px; margin-top: 2px; flex: none; accent-color: var(--green-700); }

.form-note {
  font-size: var(--fs-xs);
  color: var(--text-muted);
  padding: var(--sp-4);
  background: var(--bone);
  border-radius: var(--r-md);
}

.form-success {
  display: none;
  padding: var(--sp-6);
  background: var(--green-900);
  color: var(--on-dark);
  border-radius: var(--r-lg);
}
.form-success.is-visible { display: block; }
.form-success h3 { color: var(--white); margin-bottom: var(--sp-3); }
.form-success p { color: var(--on-dark-muted); }

/* ---- Multi-step form --------------------------------------------------- */
.stepper {
  display: flex;
  gap: var(--sp-2);
  list-style: none;
  margin: 0 0 var(--sp-7);
  padding: 0;
  counter-reset: s;
}
.stepper__item {
  flex: 1;
  margin: 0;
  padding-top: var(--sp-4);
  border-top: 3px solid var(--border);
  transition: border-color var(--dur) var(--ease-out);
  min-width: 0;
}
.stepper__item.is-done { border-top-color: var(--green-700); }
.stepper__item.is-active { border-top-color: var(--gold); }

.stepper__num {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.stepper__item.is-active .stepper__num { color: var(--gold-ink); }
.stepper__item.is-done .stepper__num { color: var(--green-700); }

.stepper__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.stepper__item.is-active .stepper__label { color: var(--ink); font-weight: 600; }

@media (max-width: 640px) {
  .stepper__label { display: none; }
  .stepper__item { padding-top: var(--sp-3); }
}

.formstep { display: none; }
.formstep.is-active { display: grid; gap: var(--sp-5); animation: stepIn 320ms var(--ease-out) both; }
@keyframes stepIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .formstep.is-active { animation: none; } }

.formstep__legend {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold-ink);
  margin: 0;
}

.formnav {
  display: flex;
  gap: var(--sp-4);
  align-items: center;
  justify-content: space-between;
  margin-top: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--border);
}
.formnav__count {
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  letter-spacing: 0.06em;
  color: var(--text-muted);
}
@media (max-width: 560px) {
  .formnav { flex-wrap: wrap; }
  .formnav .btn { flex: 1 1 auto; justify-content: center; }
  .formnav__count { order: -1; flex-basis: 100%; }
}

/* Contact route cards */
.route-card {
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--white);
  text-decoration: none; color: inherit;
  height: 100%;
  transition: transform var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.route-card:hover { transform: translateY(-6px); border-color: var(--gold); box-shadow: var(--shadow-card); text-decoration: none; }
.route-card__badge {
  margin-top: auto;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold-ink);
  padding-top: var(--sp-4);
}

/* ==========================================================================
   13. Flip cards (myth vs fact)
   ========================================================================== */

.flipgrid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: var(--sp-5); }
@media (max-width: 1024px) { .flipgrid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .flipgrid { grid-template-columns: 1fr; } }

.flip { perspective: 1200px; min-height: 210px; background: none; border: 0; padding: 0; text-align: left;
  display: block; width: 100%; }
.flip__inner {
  /* Must be block. As a bare <span> it stayed display:inline, so width/height
     100% were ignored and the absolutely positioned faces collapsed against a
     thin inline box — the cards rendered as slivers with one word per line. */
  display: block;
  position: relative; width: 100%; height: 100%; min-height: 210px;
  transition: transform var(--dur-slow) var(--ease-out);
  transform-style: preserve-3d;
}
.flip[aria-pressed="true"] .flip__inner, .flip:hover .flip__inner { transform: rotateY(180deg); }
.flip__face {
  position: absolute; inset: 0;
  backface-visibility: hidden;
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  display: flex; flex-direction: column; justify-content: center;
  border: 1px solid var(--border);
}
.flip__face--front { background: var(--bone); }
.flip__face--back { background: var(--green-900); color: var(--on-dark); transform: rotateY(180deg); border-color: transparent; }
.flip__label {
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.12em; text-transform: uppercase;
  margin-bottom: var(--sp-4);
}
.flip__face--front .flip__label { color: var(--danger); }
.flip__face--back .flip__label { color: var(--gold); }
.flip__face p { font-size: var(--fs-sm); margin: 0; }
.flip__face--front p { font-family: var(--font-display); font-size: 1.0625rem; font-weight: 500; color: var(--ink); }
.flip__face--back p { color: rgba(255,255,255,0.85); }

@media (prefers-reduced-motion: reduce) {
  .flip__inner { transform: none !important; }
  .flip__face--back { position: static; transform: none; margin-top: var(--sp-3); }
  .flip__face--front { position: static; }
  .flip, .flip__inner { min-height: 0; }
}

/* ==========================================================================
   14. Scroller (horizontal sectors)
   ========================================================================== */

.scroller { position: relative; }
.scroller__track {
  display: flex; gap: var(--sp-5);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: var(--sp-5);
  scrollbar-width: thin;
}
.scroller__panel {
  flex: 0 0 min(560px, 82vw);
  scroll-snap-align: start;
  background: var(--green-800);
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-lg);
  overflow: hidden;
  display: flex; flex-direction: column;
}
.scroller__panel img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.scroller__body { padding: var(--sp-6); display: flex; flex-direction: column; flex: 1; }
.scroller__body h3 { color: var(--white); margin-bottom: var(--sp-3); }
.scroller__body p { color: var(--on-dark-muted); font-size: var(--fs-sm); }
.scroller__body .tag { margin-top: var(--sp-5); align-self: flex-start; }
.scroller__body .link-arrow { margin-top: var(--sp-5); align-self: flex-start; }
.scroller__progress {
  display: flex; align-items: center; gap: var(--sp-4);
  margin-top: var(--sp-5);
  font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.06em;
  color: var(--on-dark-muted);
}
.scroller__bar { flex: 1; height: 2px; background: var(--on-dark-line); border-radius: 2px; overflow: hidden; max-width: 260px; }
.scroller__bar i { display: block; height: 100%; background: var(--gold); width: 25%; transition: width var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }

@media (max-width: 760px) {
  .scroller__track { display: grid; grid-template-columns: 1fr; overflow: visible; }
  .scroller__panel { flex: none; }
  .scroller__progress { display: none; }
}

/* ==========================================================================
   15. Member profiles
   ========================================================================== */

.member {
  display: grid;
  grid-template-columns: 260px minmax(0,1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  padding: var(--sp-7) 0;
  border-bottom: 1px solid var(--border);
  scroll-margin-top: 120px;
}
.member:last-child { border-bottom: 0; }
.member__aside { position: sticky; top: 120px; align-self: start; }
.member__logo {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: var(--sp-6);
  display: grid; place-items: center;
  min-height: 96px;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.02em;
  color: var(--green-900);
  text-align: center;
  background: var(--white);
  margin-bottom: var(--sp-4);
}
.member__meta { display: flex; flex-direction: column; gap: var(--sp-2); }
.member__standfirst {
  font-family: var(--font-display);
  font-size: var(--fs-lead);
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.012em;
  margin-bottom: var(--sp-5);
  color: var(--ink);
}
.member h3 { margin-bottom: var(--sp-3); }
.member .values {
  margin-top: var(--sp-5); padding: var(--sp-5);
  background: var(--bone); border-radius: var(--r-md);
  font-size: var(--fs-sm);
}
.member .values b { display: block; margin-bottom: var(--sp-2); font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); }
@media (max-width: 860px) {
  .member { grid-template-columns: 1fr; }
  .member__aside { position: static; }
  .member__logo { min-height: 80px; }
}

/* Person cards */
/* Square frame: the Council portraits come from the corporate profile and are
   mostly landscape. A 4:5 frame sliced half the width out of each one, which
   read as stretched faces. 1:1 crops far less. */
.person__photo { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 1/1; margin-bottom: var(--sp-5); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease-out); }
.person:hover .person__photo img { transform: scale(1.03); }
.person__role { font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase; color: var(--gold-ink); margin-bottom: var(--sp-3); display: block; }
.person h3 { margin-bottom: var(--sp-2); }
.person p { font-size: var(--fs-sm); color: var(--text-muted); }
.placeholder-flag {
  margin-top: var(--sp-4);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--danger);
  border: 1px dashed color-mix(in srgb, var(--danger) 50%, transparent);
  border-radius: var(--r-sm);
  padding: var(--sp-2) var(--sp-3);
  display: inline-block;
}

/* ==========================================================================
   16. Pricing / membership tiers
   ========================================================================== */

.tiers { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: var(--sp-4); align-items: stretch; }
@media (max-width: 1100px) { .tiers { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 620px)  { .tiers { grid-template-columns: 1fr; } }

.tier {
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  padding: var(--sp-6);
  background: var(--white);
  display: flex; flex-direction: column;
}
.tier--featured {
  background: var(--green-900); color: var(--on-dark);
  border-color: var(--gold);
  position: relative;
}
.tier--featured h3 { color: var(--white); }
.tier--featured .tier__who { color: var(--on-dark-muted); }
.tier__flag {
  position: absolute; top: -12px; left: var(--sp-6);
  background: var(--gold); color: var(--green-950);
  font-family: var(--font-mono); font-size: 0.625rem; letter-spacing: 0.1em; text-transform: uppercase;
  padding: 0.35rem 0.75rem; border-radius: var(--r-pill);
}
.tier h3 { font-size: var(--fs-h4); margin-bottom: var(--sp-3); }
.tier__who { font-size: var(--fs-sm); color: var(--text-muted); margin-bottom: var(--sp-5); }
.tier__list { list-style: none; padding: 0; margin: 0 0 var(--sp-5); }
.tier__list li {
  font-size: 0.875rem; padding-left: var(--sp-5); position: relative; margin-bottom: var(--sp-3);
}
.tier__list li::before { content: "✓"; position: absolute; left: 0; color: var(--green-700); font-weight: 600; }
.tier--featured .tier__list li::before { color: var(--gold); }
.tier__list li.is-off { color: var(--text-muted); }
.tier__list li.is-off::before { content: "–"; color: var(--text-muted); }
.tier__price {
  margin-top: auto; padding-top: var(--sp-5); border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: var(--fs-xs); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text-muted);
}
.tier--featured .tier__price { border-color: var(--on-dark-line); color: var(--gold); }

/* ==========================================================================
   17. Footer
   ========================================================================== */

.site-footer {
  background: var(--green-950);
  color: var(--on-dark-muted);
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-top: 2px solid var(--gold);
}
.site-footer__bg { position: absolute; inset: 0; z-index: -1; opacity: 0.10; }
.site-footer__bg img { width: 100%; height: 100%; object-fit: cover; }

.footer__grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.2fr;
  gap: var(--sp-7);
  padding-block: var(--sp-9) var(--sp-7);
}
@media (max-width: 1024px) { .footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px)  { .footer__grid { grid-template-columns: 1fr; } }

.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: var(--sp-5);
  font-weight: 500;
}
.footer__list { list-style: none; padding: 0; margin: 0; }
/* Padding on the link rather than margin on the li, so the tap target clears
   24px on a phone. The li margin drops by the same 8px, so the visual rhythm
   of the footer is unchanged. */
.footer__list li { margin-bottom: calc(var(--sp-3) - 8px); }
.footer__list a { color: var(--on-dark-muted); text-decoration: none; font-size: var(--fs-sm); transition: color var(--dur) var(--ease-out); display: inline-block; padding-block: 4px; }
.footer__list a:hover { color: var(--white); text-decoration: none; }

.footer__brand .brand__name { color: var(--white); }
.footer__brand .brand__tag { color: var(--on-dark-muted); }
.footer__brand p { font-size: var(--fs-sm); margin-top: var(--sp-5); max-width: 34ch; }

.footer__social { display: flex; gap: var(--sp-3); margin-top: var(--sp-5); }
.footer__social a {
  width: 40px; height: 40px;
  border: 1px solid var(--on-dark-line);
  border-radius: var(--r-pill);
  display: grid; place-items: center;
  color: var(--on-dark-muted);
  transition: all var(--dur) var(--ease-out);
}
.footer__social a:hover { border-color: var(--gold); color: var(--gold); }
.footer__social svg { width: 16px; height: 16px; }

.footer__bottom {
  border-top: 1px solid var(--on-dark-line);
  padding-block: var(--sp-5);
  display: flex; flex-wrap: wrap; gap: var(--sp-4);
  align-items: center; justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  letter-spacing: 0.04em;
}
.footer__bottom a { color: inherit; text-decoration: none; }
.footer__bottom a:hover { color: var(--gold); }
.footer__legal { display: flex; gap: var(--sp-5); flex-wrap: wrap; align-items: center; }
/* Clears the 24px minimum touch target on a phone. */
.footer__legal a { display: inline-block; padding-block: 4px; }

/* Verify flag — visible reminder of unresolved client data */
.verify {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.625rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #E8B4B0;
  background: rgba(179,38,30,0.22);
  border: 1px dashed rgba(232,180,176,0.5);
  border-radius: 4px;
  padding: 1px 6px;
  margin-left: 6px;
  vertical-align: middle;
}
.section--alt .verify, .section .verify {
  color: #8A2B24; background: rgba(179,38,30,0.08); border-color: rgba(138,43,36,0.4);
}

/* ==========================================================================
   16b. Glossary — sticky aside
   The term list is long; on laptop and desktop the heading, intro and image
   stay in view instead of leaving a column of white space behind.
   ========================================================================== */

@media (min-width: 1025px) {
  .glossary__aside {
    position: sticky;
    top: 116px;                 /* clears the sticky header */
    align-self: start;
    max-height: calc(100vh - 140px);
    overflow: auto;
    scrollbar-width: none;
  }
  .glossary__aside::-webkit-scrollbar { display: none; }
}

/* The term list scrolls inside its own frame so the sticky aside has
   something to travel against without the page growing unbounded. */
.glossary__list { max-height: none; }
@media (min-width: 1025px) {
  .glossary__list .table-wrap { border-radius: var(--r-lg); }
}

/* ==========================================================================
   17b. Small-screen button behaviour
   Long CTA labels + white-space:nowrap pushed the document past the viewport
   on 375px screens. Allow wrapping below 640px.
   ========================================================================== */

@media (max-width: 640px) {
  .btn {
    white-space: normal;
    max-width: 100%;
    text-align: center;
  }
  .btn-row { width: 100%; }
}

/* ==========================================================================
   18. Scroll reveal
   ========================================================================== */

/* Scoped to .js (set in <head> before first paint). If site.js is blocked or
   fails, nothing is hidden and the page still reads — rather than rendering
   blank because every reveal block is stuck at opacity 0. */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 620ms var(--ease-out), transform 620ms var(--ease-out);
  will-change: opacity, transform;
}
.js [data-reveal].is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
  .hero__slide { transition: none; }
  .hero__slide img { transform: none !important; transition: none; }
  .hero__dot.is-active::after { animation: none; transform: scaleX(1); }
  .marquee__track { animation: none; }
}

/* Demo mode — hide the outstanding-data chips for a live client walkthrough.
   Off by default on purpose: the chips exist so nothing ships unresolved.
   Turn on with ?demo in the URL (persists for the browser session) or Shift+V. */
html.demo-mode .verify { display: none !important; }

/* ==========================================================================
   Dark-surface overrides
   --------------------------------------------------------------------------
   Same root cause as the .stat-inline bug: components authored for a light
   background get reused inside .section--dark / .band / .on-dark, where
   --gold-ink (#8A6D12, tuned for AA on white) and --text-muted (#5A6763) fall
   to roughly 2.5-3:1 against deep green and become very hard to read.
   --gold and --on-dark-muted are the dark-surface equivalents.
   ========================================================================== */

/* Timeline — About Us history. Year was 2.98:1, body copy 2.48:1. */
.section--dark .timeline__year,
.on-dark .timeline__year { color: var(--gold); }
.section--dark .timeline__item p,
.on-dark .timeline__item p { color: var(--on-dark-muted); }
.section--dark .timeline::before,
.on-dark .timeline::before { background: var(--on-dark-line); }
.section--dark .timeline__item::before,
.on-dark .timeline__item::before { background: var(--green-800); border-color: var(--on-dark-line); }

/* Key-points box — the heading was 2.98:1 on the dark panel. */
.section--dark .keypoints,
.on-dark .keypoints { background: var(--green-800); border-color: var(--on-dark-line); }
.section--dark .keypoints h4,
.on-dark .keypoints h4 { color: var(--gold); }
.section--dark .keypoints li::before,
.on-dark .keypoints li::before { background: var(--gold); }

/* Card meta rows — date/read-time/author were 2.48:1 on dark. */
.section--dark .card__meta,
.on-dark .card__meta { color: var(--on-dark-muted); }

/* Steps — the number and heading had dark overrides, the body copy did not,
   so the actual instructions sat at 2.48:1 (Join NIFIAN's four steps and the
   murabaha explainer's five). */
.section--dark .step p,
.on-dark .step p { color: var(--on-dark-muted); }

/* ==========================================================================
   Gallery
   ========================================================================== */

.gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-auto-rows: 232px;
  gap: var(--sp-4);
}
.gallery__item {
  position: relative;
  margin: 0;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--green-900);
}
/* One feature tile carries the set; the rest fill around it so the mosaic
   tiles exactly with no holes at 3, 2 or 1 columns. */
.gallery__item--feature { grid-column: span 2; grid-row: span 2; }
.gallery__item img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 32%;   /* keep heads in frame when cropping */
  transition: transform var(--dur-slow) var(--ease-out);
}
.gallery__item figcaption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: var(--sp-6) var(--sp-4) var(--sp-3);
  font-size: var(--fs-sm);
  color: #fff;
  background: linear-gradient(to top, rgba(7,31,25,0.86), rgba(7,31,25,0));
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out);
}
.gallery__item:hover img, .gallery__item:focus-within img { transform: scale(1.04); }
.gallery__item:hover figcaption, .gallery__item:focus-within figcaption { opacity: 1; transform: none; }

/* Captions must not be hover-only on touch, where there is no hover. */
@media (hover: none) {
  .gallery__item figcaption { opacity: 1; transform: none; }
}

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 200px; }
  .gallery__item--feature { grid-column: span 2; grid-row: span 1; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: minmax(0, 1fr); grid-auto-rows: 220px; }
  .gallery__item--feature { grid-column: span 1; }
}

[data-lightbox] .gallery__item { cursor: zoom-in; }

@media (max-width: 900px) {
  .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gallery__item--wide { grid-column: span 2; }
}
@media (max-width: 560px) {
  .gallery { grid-template-columns: minmax(0, 1fr); }
  .gallery__item--wide { grid-column: span 1; }
}

/* Lightbox ---------------------------------------------------------------- */
.lightbox {
  position: fixed; inset: 0;
  z-index: var(--z-overlay);
  display: grid; place-items: center;
  padding: var(--sp-5);
  background: rgba(7,31,25,0.93);
  opacity: 0; visibility: hidden;
  transition: opacity var(--dur) var(--ease-out), visibility var(--dur);
}
.lightbox.is-open { opacity: 1; visibility: visible; }
.lightbox img {
  max-width: min(1200px, 94vw);
  max-height: 84vh;
  width: auto; height: auto;
  border-radius: var(--r-md);
}
.lightbox__cap {
  margin-top: var(--sp-4);
  color: rgba(255,255,255,0.82);
  font-size: var(--fs-sm);
  text-align: center;
  max-width: 60ch;
}
.lightbox__close, .lightbox__nav {
  position: absolute;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.22);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 1.25rem; line-height: 1;
}
.lightbox__close { top: var(--sp-5); right: var(--sp-5); }
.lightbox__nav--prev { left: var(--sp-5); top: 50%; transform: translateY(-50%); }
.lightbox__nav--next { right: var(--sp-5); top: 50%; transform: translateY(-50%); }
.lightbox__close:hover, .lightbox__nav:hover { background: rgba(255,255,255,0.2); }
@media (max-width: 560px) {
  .lightbox__nav--prev { left: var(--sp-3); }
  .lightbox__nav--next { right: var(--sp-3); }
}

/* Compact nav band ---------------------------------------------------------
   The primary nav carries eight items. Between the desktop breakpoint and
   1400px that does not fit at the default spacing, which previously pushed the
   Join button off the right edge. Tighten only within this band. */
@media (min-width: 1101px) and (max-width: 1400px) { /* nav-compact */
  .nav__list { gap: 0; }
  .nav__link { padding-inline: 0.5rem; }
  .nav__actions { gap: var(--sp-2); }
  .nav__actions .btn { padding-inline: 0.95rem; }
  .brand__logo { height: 34px; }
}