/* ==========================================================================
   GICC — sections.css
   Page-level composed blocks: hero, trade corridor, sectors, opportunities,
   events, news, partners, page headers, member profiles, CTAs.
   ========================================================================== */

/* ==========================================================================
   1. HOMEPAGE HERO  (Spec §4.1)
   ========================================================================== */
.hero {
  position: relative;
  min-height: clamp(620px, 92vh, 940px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-h) + var(--sp-12));
  padding-bottom: var(--sp-20);
  overflow: hidden;
  background: var(--navy-950);
  isolation: isolate;
}

/* -- Layer 1: background carousel (images, clips, YouTube/Vimeo) --
   Every slide is stacked in the same box and cross-faded. Only the active one
   is painted at full opacity, so there is never a gap between backgrounds. */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -3;
  background: var(--navy-950);
}
.hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1.1s var(--ease-in-out);
  will-change: opacity;
}
.hero__slide.is-active { opacity: 1; }

.hero__slide img,
.hero__slide video {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 32%;
  display: block;
}

/* The slow drift is what stops a still photograph reading as a dead panel.
   Applied per slide so each one restarts as it comes round. */
.hero__slide.is-active img,
.hero__slide.is-active video {
  animation: heroPan 26s var(--ease-in-out) infinite alternate;
}
@keyframes heroPan {
  from { transform: scale(1.06) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.4%, -1.6%, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__slide img, .hero__slide video { animation: none !important; transform: scale(1.02); }
  .hero__slide { transition: none; }
}

/* An embedded player has a fixed 16:9 shape, so it is scaled up until it
   covers the banner rather than letterboxed inside it. */
.hero__embed {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw;
  height: 56.25vw;           /* 16:9 */
  min-height: 100%;
  min-width: 177.78vh;       /* the same ratio, driven by height */
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.hero__embed iframe { width: 100%; height: 100%; border: 0; display: block; }

/* -- Slide indicators -- */
.hero__dots {
  position: absolute;
  right: clamp(1rem, 4vw, 3rem);
  bottom: var(--sp-6);
  z-index: 2;
  display: flex;
  gap: var(--sp-2);
}
.hero__dot {
  width: 34px; height: 4px;
  padding: 0;
  border: 0; border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.28);
  cursor: pointer;
  overflow: hidden;
  transition: background-color var(--dur-base) var(--ease-out);
}
.hero__dot:hover { background: rgba(255, 255, 255, 0.45); }
.hero__dot.is-active { background: rgba(255, 255, 255, 0.3); }
.hero__dot-fill {
  display: block;
  width: 100%; height: 100%;
  border-radius: inherit;
  background: var(--gold-400);
  transform: scaleX(0);
  transform-origin: left center;
}
.hero__dot.is-active .hero__dot-fill { transform: scaleX(1); transition: transform .5s var(--ease-out); }

@media (max-width: 640px) {
  .hero__dots { left: clamp(1rem, 4vw, 3rem); right: auto; bottom: var(--sp-5); }
}

/* -- Layer 2: colour grade + legibility scrim -- */
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -2;
  /* Three passes, each doing one job: a diagonal wash that keeps the left
     column readable over ANY uploaded picture, a vertical fade that anchors the
     header and stat rail, and a corner vignette so the frame holds together. */
  background:
    linear-gradient(104deg,
      rgba(6, 22, 39, 0.94) 0%,
      rgba(9, 29, 50, 0.84) 34%,
      rgba(13, 43, 77, 0.54) 64%,
      rgba(13, 43, 77, 0.26) 100%),
    linear-gradient(180deg,
      rgba(6, 22, 39, 0.72) 0%,
      transparent 26%,
      transparent 58%,
      rgba(5, 18, 33, 0.82) 100%),
    radial-gradient(120% 90% at 50% 50%,
      transparent 40%,
      rgba(4, 14, 26, 0.5) 100%);
}

/* -- Layer 2b: film grain. Barely visible, but it stops large flat gradients
   from banding on wide displays and gives the panel a photographic feel. -- */
.hero__grain {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.038;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* -- Layer 3: animated aurora mesh (pure CSS, no images) -- */
.hero__mesh {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.5;
  background:
    radial-gradient(38% 42% at 18% 30%, rgba(200, 145, 47, 0.32), transparent 62%),
    radial-gradient(34% 38% at 82% 22%, rgba(255, 153, 51, 0.2), transparent 60%),
    radial-gradient(42% 46% at 68% 78%, rgba(19, 136, 8, 0.16), transparent 64%),
    radial-gradient(30% 34% at 34% 84%, rgba(206, 17, 38, 0.14), transparent 60%);
  filter: blur(28px);
  animation: meshDrift 22s var(--ease-in-out) infinite alternate;
}
@keyframes meshDrift {
  from { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  to   { transform: translate3d(3%, -3%, 0) rotate(6deg) scale(1.1); }
}
@media (prefers-reduced-motion: reduce) { .hero__mesh { animation: none; } }

/* -- Content -- */
.hero__inner { position: relative; z-index: 1; width: 100%; }
/* The heading controls its own line breaks, so the block is given the full
   column and only the body copy is measured for readability. */
.hero__content { max-width: 100%; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-3);
  padding: 0.4375rem 0.9375rem 0.4375rem 0.5rem;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.09);
  border: 1px solid rgba(255, 255, 255, 0.17);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
}
.hero__flags { display: flex; align-items: center; gap: 5px; }
.hero__flag {
  width: 22px; height: 15px;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  flex: none;
}
.hero__flag--gh { background: linear-gradient(var(--gh-red) 33.3%, var(--gh-gold) 33.3% 66.6%, var(--gh-green) 66.6%); position: relative; }
.hero__flag--gh::after {
  content: '★';
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-size: 7px; color: var(--navy-950); line-height: 1;
}
.hero__flag--in { background: linear-gradient(var(--in-saffron) 33.3%, var(--in-white) 33.3% 66.6%, var(--in-green) 66.6%); position: relative; }
.hero__flag--in::after {
  content: '';
  position: absolute; left: 50%; top: 50%;
  width: 5px; height: 5px;
  transform: translate(-50%, -50%);
  border: 1px solid var(--in-chakra);
  border-radius: 50%;
}
.hero__arrow-icon { opacity: 0.7; font-size: 11px; }

.hero__title {
  margin-top: var(--sp-6);
  font-size: var(--fs-5xl);
  font-weight: var(--fw-extra);
  line-height: 0.98;
  letter-spacing: var(--ls-tighter);
  color: var(--white);
  /* Two shadows: a tight one for edge contrast against a busy photograph, and
     a wide soft one that lifts the whole block off the background. */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 8px 40px rgba(0, 0, 0, 0.45);
}
.hero__title em {
  font-style: normal;
  display: inline-block;
  /* Static, and deliberately so. An animated sweep across a clipped gradient
     lands on a different colour every frame, and the pale end of the palette
     reads as grey rather than gold — unreliable is worse than still. */
  /* Every stop sits in the bright half of the palette. The darker golds are
     correct on paper but read as brown at display size over navy. */
  background: linear-gradient(96deg,
    var(--gold-400) 0%, var(--gold-300) 34%, var(--gold-200) 58%, var(--gold-300) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* The heading's dark text-shadow is painted behind TRANSPARENT glyphs here,
     so it bleeds through the gradient and greys it out. The accent gets its
     lift from a filter instead, which sits behind the painted pixels. */
  text-shadow: none;
  filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
}

.hero__lede {
  margin-top: var(--sp-6);
  font-size: var(--fs-lg);
  line-height: var(--lh-normal);
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
}

.hero__actions { margin-top: var(--sp-10); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* The primary action gets a soft glow so it wins against a bright photograph. */
.hero__actions .btn--primary { box-shadow: 0 10px 34px rgba(200, 145, 47, 0.32); }
.hero__actions .btn--primary:hover { box-shadow: 0 14px 44px rgba(200, 145, 47, 0.45); }
.hero__actions .btn--outline {
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.34);
}
.hero__actions .btn--outline:hover { background: rgba(255, 255, 255, 0.14); border-color: rgba(255,255,255,.55); }

.hero__pillars {
  margin-top: var(--sp-8);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-3) var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.62);
}
.hero__pillars li { display: flex; align-items: center; gap: var(--sp-3); list-style: none; }
.hero__pillars li + li::before {
  content: '';
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--gold-500);
  flex: none;
}
.hero__pillars ul { display: contents; }

/* Floating glass stat rail, bottom of hero */
.hero__rail {
  position: relative;
  z-index: 1;
  margin-top: var(--sp-16);
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-lg);
  overflow: hidden;
  backdrop-filter: blur(16px) saturate(1.15);
  -webkit-backdrop-filter: blur(16px) saturate(1.15);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
}
/* A gold hairline along the top edge — the one piece of brand colour on an
   otherwise neutral panel, which is what makes it read as designed. */
.hero__rail::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg,
    transparent, var(--gold-500) 22%, var(--gold-300) 50%, var(--gold-500) 78%, transparent);
  opacity: 0.8;
  z-index: 2;
}
.hero__rail-item {
  position: relative;
  background: rgba(10, 32, 54, 0.52);
  padding: var(--sp-5) var(--sp-6);
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
}
.hero__rail-item:hover {
  background: rgba(13, 43, 77, 0.8);
  transform: translateY(-2px);
}
.hero__rail-value {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  line-height: 1;
  color: var(--white);
  letter-spacing: var(--ls-tighter);
  font-variant-numeric: tabular-nums;
}
.hero__rail-value span { color: var(--gold-400); }
.hero__rail-label {
  margin-top: var(--sp-2);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
@media (max-width: 820px) { .hero__rail { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Scroll cue */
.hero__cue {
  position: absolute;
  left: 50%; bottom: var(--sp-6);
  transform: translateX(-50%);
  z-index: 1;
  width: 26px; height: 42px;
  border: 1.5px solid rgba(255, 255, 255, 0.3);
  border-radius: var(--r-pill);
}
.hero__cue::after {
  content: '';
  position: absolute;
  left: 50%; top: 8px;
  width: 3px; height: 7px;
  margin-left: -1.5px;
  border-radius: 2px;
  background: var(--gold-400);
  animation: cueDrop 1.9s var(--ease-in-out) infinite;
}
@keyframes cueDrop {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(15px); opacity: 0.2; }
}
@media (max-width: 900px) { .hero__cue { display: none; } }

/* ==========================================================================
   2. TRADE CORRIDOR  (Spec §5 — signature feature)
   ========================================================================== */
.corridor {
  position: relative;
  background: var(--navy-950);
  overflow: hidden;
}
.corridor::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(60% 55% at 12% 40%, rgba(206, 17, 38, 0.14), transparent 62%),
    radial-gradient(60% 55% at 88% 40%, rgba(255, 153, 51, 0.16), transparent 62%),
    radial-gradient(70% 60% at 50% 110%, rgba(200, 145, 47, 0.1), transparent 60%);
  pointer-events: none;
}
/* Faint dot-grid texture */
.corridor::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.055) 1px, transparent 1px);
  background-size: 26px 26px;
  mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 40%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse 80% 65% at 50% 50%, #000 40%, transparent 100%);
  pointer-events: none;
}
.corridor > .container { position: relative; z-index: 1; }

/* -- The arc map -- */
.corridor-map {
  position: relative;
  margin: var(--sp-12) auto var(--sp-16);
  max-width: 900px;
}
.corridor-map__svg { width: 100%; height: auto; overflow: visible; }

.corridor-arc {
  fill: none;
  stroke: url(#corridorGrad);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  transition: stroke-dashoffset 2.6s var(--ease-out);
}
.is-revealed .corridor-arc,
.corridor-map.is-active .corridor-arc { stroke-dashoffset: 0; }

.corridor-arc--ghost {
  fill: none;
  stroke: rgba(255, 255, 255, 0.13);
  stroke-width: 1.5;
  stroke-dasharray: 4 8;
}

/* Pulses sit at the SVG origin until <animateMotion> starts, so they stay
   hidden until JS activates the map — otherwise a stray dot appears at 0,0. */
.corridor-pulse {
  fill: #fff;
  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.95));
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease-out) 400ms;
}
.corridor-map.is-active .corridor-pulse { opacity: 1; }
@media (prefers-reduced-motion: reduce) {
  .corridor-pulse { display: none; }
}

/* -- Flag roundels -- */
.corridor-node--gh { color: var(--gh-gold); }
.corridor-node--in { color: var(--in-saffron); }

.corridor-node circle.node-glow {
  /* `transform-origin: center` alone resolves against the whole SVG viewport
     in SVG, not the element — which makes the halo scale away from its own
     node. `transform-box: fill-box` is what pins it to the circle. */
  transform-box: fill-box;
  transform-origin: center;
  animation: nodePulse 3.6s var(--ease-in-out) infinite;
}
/* The ring is drawn OVER the clipped flag, which hides the hard clip edge and
   gives the roundel the same brushed rim as the Chamber's seal. */
.corridor-node circle.node-ring {
  fill: none;
  stroke: url(#ringMetal);
  stroke-width: 3;
  filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.55));
}

.corridor-node .node-label {
  fill: var(--white);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}
.corridor-node tspan.sub {
  fill: rgba(255, 255, 255, 0.52);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
}
/* The local time is the one live element in the picture; gold marks it as
   information rather than decoration. */
.corridor-node tspan.clock {
  fill: var(--gold-400);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

/* -- Arc annotations -- */
.corridor-caption {
  fill: rgba(255, 255, 255, 0.58);
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
}
.corridor-chip {
  fill: rgba(255, 255, 255, 0.07);
  stroke: rgba(255, 255, 255, 0.2);
  stroke-width: 1;
}
.corridor-chip__text {
  fill: rgba(255, 255, 255, 0.9);
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
}
.corridor-meta {
  fill: rgba(255, 255, 255, 0.42);
  font-family: var(--font-sans, system-ui, sans-serif);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}

@keyframes nodePulse {
  0%, 100% { transform: scale(0.92); opacity: 0.85; }
  50%      { transform: scale(1.12); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  .corridor-node circle.node-glow { animation: none; }
  .corridor-arc { stroke-dashoffset: 0; transition: none; }
}

/* On a phone the annotations collapse into the roundels, so the wordier ones
   are dropped rather than overlapped. */
@media (max-width: 640px) {
  .corridor-meta { display: none; }
  .corridor-caption { letter-spacing: 0.16em; font-size: 10px; }
}

/* -- Sector cards -- */
.sector-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--sp-4);
}
@media (max-width: 1000px) { .sector-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .sector-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.sector {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6);
  border-radius: var(--r-lg);
  background: rgba(255, 255, 255, 0.045);
  border: 1px solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background-color var(--dur-base) var(--ease-out);
}
.sector::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(150deg, rgba(200, 145, 47, 0.22), transparent 58%);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.sector:hover {
  transform: translateY(-5px);
  border-color: rgba(230, 189, 104, 0.45);
  background: rgba(255, 255, 255, 0.07);
}
.sector:hover::before { opacity: 1; }

.sector__icon {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, 0.08);
  color: var(--gold-400);
  transition: transform var(--dur-base) var(--ease-spring),
              background-color var(--dur-base) var(--ease-out);
}
.sector:hover .sector__icon { transform: scale(1.1) rotate(-5deg); background: rgba(200, 145, 47, 0.22); }
.sector__icon svg { width: 21px; height: 21px; }

.sector__name {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  color: var(--white);
  letter-spacing: var(--ls-tight);
}
.sector__note {
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.55);
  line-height: var(--lh-normal);
}

/* -- Corridor statistics strip -- */
.corridor-stats {
  margin-top: var(--sp-14);
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 1px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: var(--r-lg);
  overflow: hidden;
}
@media (max-width: 900px) { .corridor-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.corridor-stats .stat {
  border: none;
  border-radius: 0;
  background: rgba(6, 22, 39, 0.5);
}
.corridor-stats .stat::after { display: none; }
.corridor-stats .stat__value { color: var(--white); font-size: var(--fs-2xl); }
.corridor-stats .stat__label { color: rgba(255, 255, 255, 0.5); }

/* ==========================================================================
   3. ABOUT / SPLIT MEDIA BLOCK
   ========================================================================== */
/* The offset frame sits on the WRAPPER, not the figure — the figure needs
   overflow:hidden to clip its own rounded image, which would otherwise eat
   the decoration. */
.media-block {
  position: relative;
  isolation: isolate;
}
.media-block--offset::after {
  content: '';
  position: absolute;
  right: -18px; bottom: -18px;
  width: 58%; height: 58%;
  border: 2px solid var(--gold-500);
  border-radius: var(--r-xl);
  z-index: -1;
  pointer-events: none;
}
.media-block__figure {
  position: relative;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-xl);
  aspect-ratio: 4 / 3.2;
  margin: 0;
}
.media-block__figure img { width: 100%; height: 100%; object-fit: cover; }
.media-block__badge {
  position: absolute;
  left: var(--sp-6); bottom: var(--sp-6);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(6, 22, 39, 0.82);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.14);
  color: var(--white);
  max-width: 260px;
}
.media-block__badge strong {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-extra);
  line-height: 1;
  color: var(--gold-400);
}
.media-block__badge span {
  display: block;
  margin-top: var(--sp-2);
  font-size: var(--fs-2xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.66);
}

/* Value list with tick markers */
.value-list { list-style: none; padding: 0; margin: var(--sp-6) 0 0; display: grid; gap: var(--sp-4); }
.value-list li { display: flex; gap: var(--sp-4); align-items: flex-start; }
.value-list__tick {
  flex: none;
  width: 26px; height: 26px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--gold-100);
  color: var(--gold-800);
  margin-top: 1px;
}
.on-dark .value-list__tick { background: rgba(200, 145, 47, 0.22); color: var(--gold-300); }
.value-list__tick svg { width: 13px; height: 13px; }
.value-list strong { display: block; font-family: var(--font-display); font-size: var(--fs-base); color: var(--fg-strong); }
.value-list p { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: 2px; line-height: var(--lh-normal); }

/* ==========================================================================
   4. OPPORTUNITY CARD  (Spec §9)
   ========================================================================== */
.opportunity {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  border-top: 3px solid var(--gold-600);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out);
}
.opportunity:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); }
.opportunity--investment  { border-top-color: var(--success-600); }
.opportunity--jv          { border-top-color: var(--info-600); }
.opportunity--distribution{ border-top-color: var(--gold-600); }

.opportunity__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.opportunity__title { font-size: var(--fs-lg); line-height: var(--lh-snug); }
.opportunity__title a { color: inherit; text-decoration: none; }
.opportunity__title a::after { content: ''; position: absolute; inset: 0; }
.opportunity__facts {
  display: grid;
  gap: var(--sp-2);
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  font-size: var(--fs-xs);
}
.opportunity__fact { display: flex; justify-content: space-between; gap: var(--sp-4); }
.opportunity__fact dt { color: var(--fg-subtle); font-weight: var(--fw-medium); white-space: nowrap; }
.opportunity__fact dd { color: var(--fg-strong); font-weight: var(--fw-semibold); text-align: right; }
.opportunity__foot { margin-top: auto; padding-top: var(--sp-2); }

/* ==========================================================================
   5. EVENT CARD  (Spec §10)
   ========================================================================== */
.event {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  position: relative;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.event:hover { transform: translateY(-3px); box-shadow: var(--sh-md); border-color: var(--border-strong); }

/* -- Optional cover image (Admin → Events → Cover image) -------------------
   Only cards that actually have one switch to the three-row layout, so a
   listing mixing events with and without a picture still lines up. The image
   bleeds to the card edges by cancelling the card's own padding. */
.event--media {
  grid-template-areas:
    "media media"
    "date  body";
  /* The media row hugs its aspect-ratio; the content row takes the remaining
     height so the date column still runs the full depth of the card, exactly
     as it does on a card with no picture. */
  grid-template-rows: auto 1fr;
}
.event--media .event__media { grid-area: media; }
.event--media .event__date  { grid-area: date; }
.event--media .event__body  { grid-area: body; }

.event__media {
  display: block;
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: var(--ink-050);
}
.event__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--dur-slow, .45s) var(--ease-out);
}
.event:hover .event__media img { transform: scale(1.04); }
@media (prefers-reduced-motion: reduce) {
  .event__media img, .event:hover .event__media img { transition: none; transform: none; }
}
.event__date {
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: var(--r-md);
  background: linear-gradient(160deg, var(--navy-850), var(--navy-700));
  color: var(--white);
  padding: var(--sp-4) var(--sp-2);
  box-shadow: var(--sh-inset-top);
}
.event__day {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: var(--fw-extra);
  line-height: 1;
  letter-spacing: var(--ls-tighter);
}
.event__month {
  margin-top: var(--sp-1);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--gold-400);
}
.event__year { font-size: var(--fs-3xs); color: rgba(255, 255, 255, 0.45); letter-spacing: var(--ls-wide); }
.event__body { display: flex; flex-direction: column; gap: var(--sp-2); min-width: 0; }
.event__title { font-size: var(--fs-md); line-height: var(--lh-snug); }
.event__title a { color: inherit; text-decoration: none; }
.event__title a::after { content: ''; position: absolute; inset: 0; }
.event__meta { display: flex; flex-wrap: wrap; gap: var(--sp-4); font-size: var(--fs-xs); color: var(--fg-muted); }
.event__meta span { display: inline-flex; align-items: center; gap: var(--sp-2); }
.event__meta svg { width: 14px; height: 14px; color: var(--fg-subtle); flex: none; }
.event__cta { margin-top: var(--sp-2); }

/* Capacity meter */
.capacity { margin-top: var(--sp-2); }
.capacity__bar {
  height: 5px;
  border-radius: var(--r-pill);
  background: var(--ink-200);
  overflow: hidden;
}
.capacity__fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-600), var(--gold-400));
  transition: width 1.2s var(--ease-out);
}
.capacity__text { margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--fg-subtle); }

@media (max-width: 520px) {
  .event { grid-template-columns: 72px minmax(0, 1fr); gap: var(--sp-4); }
  .event__day { font-size: var(--fs-xl); }
}

/* ==========================================================================
   6. NEWS
   ========================================================================== */
.news-lead {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: var(--navy-950);
  color: var(--fg-onDark);
  box-shadow: var(--sh-xl);
  position: relative;
}
.news-lead__media { position: relative; min-height: 340px; }
.news-lead__media img { width: 100%; height: 100%; object-fit: cover; }
.news-lead__media::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent 40%, rgba(6, 22, 39, 0.9) 100%);
}
.news-lead__body { padding: clamp(1.75rem, 3.5vw, 3rem); display: flex; flex-direction: column; justify-content: center; gap: var(--sp-4); }
.news-lead__title { font-size: var(--fs-xl); color: var(--white); line-height: var(--lh-snug); }
.news-lead__title a { color: inherit; text-decoration: none; }
.news-lead__title a::after { content: ''; position: absolute; inset: 0; }
.news-lead__excerpt { font-size: var(--fs-sm); color: rgba(255, 255, 255, 0.68); line-height: var(--lh-relaxed); }
@media (max-width: 860px) {
  .news-lead { grid-template-columns: 1fr; }
  .news-lead__media { min-height: 240px; }
  .news-lead__media::after { background: linear-gradient(180deg, transparent 40%, rgba(6, 22, 39, 0.92) 100%); }
}

.news-list { display: grid; gap: var(--sp-1); }
.news-row {
  position: relative;
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--sp-5);
  padding: var(--sp-5) var(--sp-4);
  border-radius: var(--r-md);
  border-bottom: 1px solid var(--border-subtle);
  transition: background-color var(--dur-base) var(--ease-out);
}
.news-row:hover { background: var(--bg-subtle); }
.news-row__date { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--fg-subtle); }
.news-row__title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-semibold); color: var(--fg-strong); line-height: var(--lh-snug); }
.news-row__title a { color: inherit; text-decoration: none; }
.news-row__title a::after { content: ''; position: absolute; inset: 0; }
.news-row__cat { flex: none; }
@media (max-width: 720px) {
  .news-row { grid-template-columns: 1fr; gap: var(--sp-2); }
  .news-row__cat { justify-self: start; }
}

/* ==========================================================================
   7. PARTNERS MARQUEE
   ========================================================================== */
.marquee {
  position: relative;
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: var(--sp-16);
  width: max-content;
  animation: marquee 42s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .marquee__track { animation: none; flex-wrap: wrap; width: 100%; justify-content: center; gap: var(--sp-10); }
}
.marquee__item {
  display: grid;
  place-items: center;
  height: var(--logo-h, 62px);
  flex: none;
  /* Without this an over-wide logo stretches the flex track and drags the
     whole strip off the page. */
  max-width: 260px;
}
.marquee__item img {
  /* Absolute, NOT `max-height: 100%`. A percentage max-height on a grid item
     resolves against the grid area, which browsers treat as indefinite during
     intrinsic sizing — so it is ignored and the logo renders at its natural
     size. A 400x400 upload became a 400px block in a 62px row. */
  height: calc(var(--logo-h, 62px) - 18px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  /* Desaturated so a wall of mismatched brand colours reads as one row, but
     NOT darkened: brightness(.55) turned a photographic logo into a grey
     slab. Colour returns on hover. */
  filter: grayscale(1);
  opacity: 0.66;
  transition: filter var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.marquee__item:hover img { filter: none; opacity: 1; }
.on-dark .marquee__item img { filter: grayscale(1) brightness(1.9); opacity: 0.7; }
.on-dark .marquee__item:hover img { filter: none; opacity: 1; }

/* Partner logo placeholder (until real logos are dropped in) */
.logo-plate {
  display: grid;
  place-items: center;
  height: 62px;
  min-width: 168px;
  padding-inline: var(--sp-6);
  border-radius: var(--r-sm);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--fg-subtle);
  text-align: center;
  line-height: 1.25;
}

/* The same plate, holding artwork instead of a name. `min-width` is relaxed so
   a tall/square mark does not sit marooned in a 168px box, and padding is
   tighter because a logo brings its own whitespace. */
.logo-plate--image {
  min-width: 96px;
  padding-inline: var(--sp-4);
  background: #fff;
}
.on-dark .logo-plate--image { background: rgba(255, 255, 255, 0.06); }


/* ==========================================================================
   8. CTA BANDS
   ========================================================================== */
.cta-band {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, var(--navy-950) 0%, var(--navy-850) 55%, var(--navy-800) 100%);
  color: var(--fg-onDark);
  border-radius: var(--r-2xl);
  padding: clamp(2.5rem, 5.5vw, 4.5rem);
  isolation: isolate;
}
.cta-band::before {
  content: '';
  position: absolute;
  inset: -30% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 145, 47, 0.3), transparent 68%);
  z-index: -1;
  filter: blur(10px);
}
.cta-band::after {
  content: '';
  position: absolute;
  inset: auto auto -40% -8%;
  width: 46%; aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 153, 51, 0.18), transparent 66%);
  z-index: -1;
  filter: blur(12px);
}
.cta-band__title { font-size: var(--fs-3xl); color: var(--white); max-width: 20ch; }
.cta-band__text { margin-top: var(--sp-4); font-size: var(--fs-md); color: rgba(255, 255, 255, 0.72); max-width: 56ch; }
.cta-band__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-4); }
.cta-band__grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--sp-12); align-items: center; }
@media (max-width: 860px) { .cta-band__grid { grid-template-columns: 1fr; gap: var(--sp-8); } }

/* Membership CTA split with tier preview */
.tier-preview { display: grid; gap: var(--sp-3); }
.tier-preview__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-md);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.11);
  transition: background-color var(--dur-base) var(--ease-out),
              transform var(--dur-base) var(--ease-out);
  text-decoration: none;
}
.tier-preview__item:hover { background: rgba(255, 255, 255, 0.11); transform: translateX(4px); }
.tier-preview__name { display: block; font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--white); }
.tier-preview__for { display: block; font-size: var(--fs-2xs); color: rgba(255, 255, 255, 0.55); margin-top: 3px; line-height: 1.4; }

/* ==========================================================================
   9. INTERIOR PAGE HEADER
   ========================================================================== */
.page-head {
  position: relative;
  padding-top: calc(var(--header-h) + var(--sp-14));
  padding-bottom: var(--sp-14);
  background: linear-gradient(140deg, var(--navy-950) 0%, var(--navy-850) 62%, var(--navy-800) 100%);
  color: var(--fg-onDark);
  overflow: hidden;
  isolation: isolate;
}
.page-head::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(46% 60% at 88% 12%, rgba(200, 145, 47, 0.2), transparent 62%),
    radial-gradient(40% 52% at 8% 96%, rgba(35, 90, 140, 0.35), transparent 60%);
}
.page-head::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: linear-gradient(180deg, transparent, #000);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000);
}
.page-head--media { background: var(--navy-950); }
.page-head__bg { position: absolute; inset: 0; z-index: -2; }
.page-head__bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.35; }
.page-head__title { font-size: var(--fs-4xl); color: var(--white); margin-top: var(--sp-4); }
.page-head__lede { margin-top: var(--sp-5); font-size: var(--fs-lg); color: rgba(255, 255, 255, 0.72); max-width: 62ch; }
.page-head__actions { margin-top: var(--sp-8); display: flex; flex-wrap: wrap; gap: var(--sp-3); }

/* ==========================================================================
   10. TEAM / LEADERSHIP
   ========================================================================== */
.person {
  text-align: center;
  transition: transform var(--dur-base) var(--ease-out);
}
.person:hover { transform: translateY(-4px); }
.person__photo {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: var(--r-xl);
  overflow: hidden;
  background: linear-gradient(150deg, var(--navy-100), var(--navy-200));
  margin-bottom: var(--sp-5);
  box-shadow: var(--sh-sm);
}
.person__photo img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.person:hover .person__photo img { transform: scale(1.05); }
.person__initials {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-3xl);
  font-weight: var(--fw-extra);
  color: var(--navy-500);
  letter-spacing: var(--ls-tight);
}
.person__name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--fg-strong); }
.person__role { margin-top: var(--sp-1); font-size: var(--fs-xs); color: var(--fg-subtle); letter-spacing: var(--ls-wide); text-transform: uppercase; font-weight: var(--fw-semibold); }

/* ==========================================================================
   11. MEMBER DIRECTORY  (Spec §7)
   ========================================================================== */
.directory-bar {
  position: sticky;
  top: var(--header-h-sticky);
  z-index: var(--z-sticky);
  padding: var(--sp-5) 0;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border-subtle);
}
.directory-toolbar { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; }
@media (max-width: 760px) { .directory-toolbar { grid-template-columns: 1fr; } }

.member-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-6);
  background: var(--bg-elevated);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.member-card:hover { transform: translateY(-4px); box-shadow: var(--sh-lg); border-color: var(--navy-300); }
.member-card__head { display: flex; gap: var(--sp-4); align-items: flex-start; }
.member-card__logo {
  width: 58px; height: 58px;
  flex: none;
  border-radius: var(--r-sm);
  object-fit: contain;
  background: var(--bg-subtle);
  border: 1px solid var(--border-subtle);
  padding: var(--sp-2);
}
.member-card__logo--fallback {
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-extra);
  color: var(--navy-500);
  padding: 0;
}
.member-card__name { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--fg-strong); line-height: var(--lh-snug); }
.member-card__name a { color: inherit; text-decoration: none; }
.member-card__name a::after { content: ''; position: absolute; inset: 0; }
.member-card__meta { margin-top: var(--sp-2); display: flex; flex-wrap: wrap; gap: var(--sp-3); font-size: var(--fs-2xs); color: var(--fg-subtle); }
.member-card__seek {
  padding: var(--sp-4);
  border-radius: var(--r-sm);
  background: var(--bg-subtle);
  font-size: var(--fs-xs);
  display: grid;
  gap: var(--sp-2);
}
.member-card__seek dt { font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; font-size: var(--fs-3xs); color: var(--fg-subtle); }
.member-card__seek dd { color: var(--fg-default); }

/* ==========================================================================
   12. MATCHMAKING WIZARD  (Spec §8)
   ========================================================================== */
.matchmaker {
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--r-xl);
  background: var(--white);
  box-shadow: var(--sh-xl);
  border: 1px solid var(--border-subtle);
}
.matchmaker__steps { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-8); }
.matchmaker__step {
  flex: 1;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-200);
  overflow: hidden;
}
.matchmaker__step.is-done { background: var(--gold-500); }
.matchmaker__step.is-current { background: linear-gradient(90deg, var(--gold-500) 50%, var(--ink-200) 50%); }

/* ==========================================================================
   13. TIMELINE (used on About — bilateral milestones)
   ========================================================================== */
.timeline { position: relative; padding-left: var(--sp-8); }
.timeline::before {
  content: '';
  position: absolute;
  left: 7px; top: 6px; bottom: 6px;
  width: 2px;
  background: linear-gradient(180deg, var(--gold-500), var(--navy-300));
  border-radius: 2px;
}
.timeline__item { position: relative; padding-bottom: var(--sp-8); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
  content: '';
  position: absolute;
  left: calc(var(--sp-8) * -1 + 2px);
  top: 6px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: var(--white);
  border: 3px solid var(--gold-600);
}
.timeline__date { font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--gold-700); }
.timeline__title { font-family: var(--font-display); font-size: var(--fs-md); font-weight: var(--fw-bold); color: var(--fg-strong); margin-top: var(--sp-1); }
.timeline__text { font-size: var(--fs-sm); color: var(--fg-muted); margin-top: var(--sp-2); }

/* ==========================================================================
   14. PRICING / MEMBERSHIP TIERS  (Spec §6.3)
   ========================================================================== */
.tier {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: var(--sp-8);
  border-radius: var(--r-xl);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.tier:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); }
.tier--featured {
  border-color: var(--gold-500);
  box-shadow: var(--sh-lg);
}
.tier--featured::before {
  content: attr(data-flag);
  position: absolute;
  top: 0; left: 50%;
  transform: translate(-50%, -50%);
  padding: 0.3125rem 0.875rem;
  border-radius: var(--r-pill);
  background: var(--gold-600);
  color: var(--navy-950);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  white-space: nowrap;
}
.tier__name {
  font-family: var(--font-display);
  font-size: var(--fs-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--gold-700);
}
.tier__for { margin-top: var(--sp-4); font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-normal); }
.tier__price { margin-top: var(--sp-5); font-family: var(--font-display); font-size: var(--fs-3xl); font-weight: var(--fw-extra); color: var(--fg-strong); letter-spacing: var(--ls-tighter); line-height: 1; }
.tier__price small { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--fg-subtle); letter-spacing: 0; margin-left: var(--sp-2); }
/* Placeholder shown until the client sets the fee schedule (Spec §6.3). */
.tier__price--tbc {
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  color: var(--fg-subtle);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}
.tier__benefits { list-style: none; padding: 0; margin: var(--sp-6) 0 var(--sp-8); display: grid; gap: var(--sp-3); font-size: var(--fs-sm); }
.tier__benefits li { display: flex; gap: var(--sp-3); align-items: flex-start; color: var(--fg-muted); }
.tier__benefits svg { width: 15px; height: 15px; flex: none; margin-top: 4px; color: var(--success-600); }
.tier__benefits strong { color: var(--fg-strong); font-weight: var(--fw-semibold); }
.tier__cta { margin-top: auto; }

/* Benefit group heading inside a tier */
.tier__group {
  margin-top: var(--sp-5);
  font-family: var(--font-display);
  font-size: var(--fs-3xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--navy-600);
}

/* ==========================================================================
   15. ENQUIRY ROUTER  (Spec §12.1 — multiple conversion points)
   ========================================================================== */
.router-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-5); }
@media (max-width: 900px) { .router-grid { grid-template-columns: 1fr; } }
.router-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-8);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1.5px solid var(--border-subtle);
  text-decoration: none;
  overflow: hidden;
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.router-card::after {
  content: '';
  position: absolute;
  inset: auto 0 0 0;
  height: 100%;
  background: linear-gradient(180deg, transparent 55%, rgba(200, 145, 47, 0.09));
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
  pointer-events: none;
}
.router-card:hover { transform: translateY(-5px); box-shadow: var(--sh-lg); border-color: var(--gold-500); }
.router-card:hover::after { opacity: 1; }
.router-card__q {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--fg-strong);
  line-height: var(--lh-snug);
}
.router-card__a { font-size: var(--fs-sm); color: var(--fg-muted); line-height: var(--lh-normal); }
.router-card__go { margin-top: auto; }

/* ==========================================================================
   16. GALLERY
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: var(--sp-3);
}
.gallery-item {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--navy-100);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slower) var(--ease-out); }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item__cap {
  position: absolute;
  inset: auto 0 0 0;
  padding: var(--sp-8) var(--sp-4) var(--sp-4);
  background: linear-gradient(180deg, transparent, rgba(6, 22, 39, 0.88));
  color: var(--white);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out);
}
.gallery-item:hover .gallery-item__cap { opacity: 1; transform: translateY(0); }
.gallery-item--wide { grid-column: span 2; }
@media (max-width: 620px) { .gallery-item--wide { grid-column: span 1; } }

/* ==========================================================================
   17. KNOWLEDGE CENTRE / PUBLICATION  (Spec §11.2)
   ========================================================================== */
.publication {
  position: relative;
  display: grid;
  grid-template-columns: 84px minmax(0, 1fr);
  gap: var(--sp-5);
  padding: var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid var(--border-subtle);
  background: var(--bg-elevated);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.publication:hover { transform: translateY(-3px); box-shadow: var(--sh-md); }
.publication__cover {
  aspect-ratio: 3 / 4;
  border-radius: var(--r-sm);
  background: linear-gradient(155deg, var(--navy-850), var(--navy-600));
  display: grid;
  place-items: center;
  color: var(--gold-400);
  box-shadow: var(--sh-sm);
}
.publication__cover svg { width: 28px; height: 28px; }
/* An uploaded cover fills the tile; the navy gradient stays as the backdrop
   for anything not perfectly 3:4, and for titles with no cover at all. */
.publication__cover { overflow: hidden; }
.publication__cover img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.publication__title { font-family: var(--font-display); font-size: var(--fs-base); font-weight: var(--fw-bold); color: var(--fg-strong); line-height: var(--lh-snug); }
.publication__title a { color: inherit; text-decoration: none; }
.publication__title a::after { content: ''; position: absolute; inset: 0; }
.publication__meta { margin-top: var(--sp-2); font-size: var(--fs-2xs); color: var(--fg-subtle); letter-spacing: var(--ls-wide); text-transform: uppercase; }
.publication__text { margin-top: var(--sp-3); font-size: var(--fs-sm); color: var(--fg-muted); }

/* ==========================================================================
   18. QUOTE / TESTIMONIAL
   ========================================================================== */
.quote {
  position: relative;
  padding: clamp(2rem, 4vw, 3.25rem);
  border-radius: var(--r-xl);
  background: var(--bg-subtle);
  border-left: 4px solid var(--gold-600);
}
.quote::before {
  content: '\201C';
  position: absolute;
  top: -0.1em; right: 0.3em;
  font-family: var(--font-display);
  font-size: 9rem;
  line-height: 1;
  color: var(--gold-500);
  opacity: 0.16;
  pointer-events: none;
}
.quote__text {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  font-weight: var(--fw-medium);
  line-height: var(--lh-normal);
  color: var(--fg-strong);
  letter-spacing: var(--ls-tight);
}
.quote__by { margin-top: var(--sp-6); display: flex; align-items: center; gap: var(--sp-4); }
.quote__avatar { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; flex: none; }
.quote__name { font-family: var(--font-display); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--fg-strong); }
.quote__role { font-size: var(--fs-xs); color: var(--fg-subtle); }

/* ==========================================================================
   19. IMAGE FALLBACK — shown until real media is dropped in.
        Any <img> that fails to load gets .is-missing from js/gicc.js
   ========================================================================== */
/* A genuinely broken/missing image renders as an on-brand plate rather than
   a browser error glyph. Applied by initImageFallback() in js/gicc.js. */
.img-fallback,
img.is-missing {
  position: relative;
  min-height: 100%;
  background:
    linear-gradient(140deg, var(--navy-850) 0%, var(--navy-600) 55%, var(--navy-700) 100%);
}
img.is-missing {
  object-fit: contain;
  padding: 18%;
  opacity: 1;
  /* Draw a subtle corridor arc glyph in place of the missing photo */
  background-image:
    linear-gradient(140deg, var(--navy-850) 0%, var(--navy-600) 55%, var(--navy-700) 100%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 60'%3E%3Cpath d='M14 44a46 46 0 0 1 92 0' fill='none' stroke='rgba(255,255,255,.28)' stroke-width='2.5' stroke-linecap='round'/%3E%3Ccircle cx='14' cy='44' r='5' fill='rgba(255,255,255,.4)'/%3E%3Ccircle cx='106' cy='44' r='5' fill='rgba(255,255,255,.4)'/%3E%3C/svg%3E");
  background-repeat: no-repeat, no-repeat;
  background-position: center, center;
  background-size: cover, 44% auto;
}

.media-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  gap: var(--sp-2);
  background: linear-gradient(140deg, var(--navy-850), var(--navy-600));
  color: rgba(255, 255, 255, 0.4);
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  text-align: center;
  padding: var(--sp-4);
}

/* -----------------------------------------------------------------------------
 | Section backdrop (Spec §14)
 |
 | Wrapper emitted by render_section() only when the Section Manager has an
 | image for a section that does not place one itself. Three layers, in order:
 | the section's own background, then the photograph at low opacity, then the
 | content — so text contrast survives whatever picture is uploaded.
 * -------------------------------------------------------------------------- */
.section-canvas { position: relative; }
.section-canvas > * { position: relative; z-index: 2; }
.section-canvas::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background-image: var(--section-bg);
  background-size: cover;
  background-position: center;
  opacity: .14;
}
/* Dark sections carry light text, so the picture is dimmed further there. */
.section-canvas:has(.on-dark)::after { opacity: .22; }

@media (prefers-reduced-motion: no-preference) {
  .section-canvas::after { transition: opacity var(--dur-slow, .4s) ease; }
}

/* ==========================================================================
   LIGHTBOX  (album photograph viewer)
   ========================================================================== */
.lightbox {
  position: fixed;
  inset: 0;
  /* Must sit above the sticky header (--z-header: 500), or the site nav floats
     over the photograph. The project's scale has a slot for exactly this. */
  z-index: var(--z-modal);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(4, 14, 26, 0.94);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity var(--dur-base) var(--ease-out);
}
.lightbox[hidden] { display: none; }
.lightbox.is-open { opacity: 1; }

.lightbox__figure {
  margin: 0;
  max-width: min(1200px, 100%);
  max-height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  align-items: center;
}
.lightbox__img {
  max-width: 100%;
  /* Leaves room for the caption row beneath. */
  max-height: calc(100vh - 11rem);
  width: auto; height: auto;
  /* `flex: 0 0 auto` matters: as a column flex item the image was being
     shrunk on its main axis while its width stayed at max-width, which
     squashed a 1400x950 photograph into a 946x774 box. object-fit is the
     belt to that braces. */
  flex: 0 0 auto;
  min-height: 0;
  object-fit: contain;
  border-radius: var(--r-md);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}
.lightbox__cap {
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  flex-wrap: wrap;
  justify-content: center;
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--fs-sm);
  text-align: center;
}
.lightbox__counter {
  font-variant-numeric: tabular-nums;
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--fs-xs);
  letter-spacing: var(--ls-wide);
}

.lightbox__close,
.lightbox__nav {
  position: absolute;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  line-height: 1;
  transition: background-color var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
}
.lightbox__close:hover,
.lightbox__nav:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.35); }

.lightbox__close {
  top: clamp(.75rem, 2vw, 1.5rem);
  right: clamp(.75rem, 2vw, 1.5rem);
  width: 44px; height: 44px;
  font-size: 1.6rem;
}
.lightbox__nav {
  top: 50%;
  transform: translateY(-50%);
  width: 48px; height: 48px;
  font-size: 2rem;
}
.lightbox__nav--prev { left: clamp(.5rem, 2vw, 1.5rem); }
.lightbox__nav--next { right: clamp(.5rem, 2vw, 1.5rem); }

/* A single-image album has nothing to page through. */
.lightbox.is-single .lightbox__nav { display: none; }

@media (max-width: 560px) {
  .lightbox__nav { width: 40px; height: 40px; font-size: 1.6rem; }
  .lightbox__img { max-height: calc(100vh - 13rem); }
}

/* A person card that links to a profile. The card itself was never clickable,
   so it needs the affordances a link is expected to have. */
.person--link { display: block; text-decoration: none; color: inherit; }
.person--link:hover .person__name { color: var(--fg-accent, var(--gold-600)); }
.person--link .person__photo { transition: transform var(--dur-base) var(--ease-out),
                                           box-shadow var(--dur-base) var(--ease-out); }
.person--link:hover .person__photo { transform: translateY(-3px); box-shadow: var(--sh-md); }

/* The larger portrait on the profile page's identity card. */
.person__photo--profile { aspect-ratio: 1; width: 100%; }

/* Profile identity card. The shared fact list right-aligns its values, which
   suits a one-word figure but not a three-line birthplace — so on a profile
   the label sits above and the value reads left. */
.person-facts .opportunity__fact { display: block; }
.person-facts dt { display: block; margin-bottom: .15rem; }
.person-facts dd { text-align: left; margin: 0; }