/* ==========================================================================
   SANPC — Corporate Social Investment page
   Scoped to .csi so nothing here can leak into the rest of the theme.
   ========================================================================== */

.csi {
  /* Brand */
  --amber:        #EE9422;
  --amber-deep:   #C2701A;
  --amber-tint:   #FDF1E2;
  --green:        #00A14B;
  --green-deep:   #00713A;
  --green-tint:   #E5F4EC;

  /* Neutrals */
  --navy:         #132530;
  --ink:          #1B2A33;
  --slate:        #55666F;
  --mist:         #EDF3F6;
  --paper:        #FFFFFF;
  --line:         #DEE7EB;

  /* Per-section accent, overridden on each focus area */
  --accent:       var(--amber);
  --accent-deep:  var(--amber-deep);
  --accent-tint:  var(--amber-tint);

  --shell:        1200px;
  --gutter:       clamp(20px, 5vw, 56px);
  --pad-y:        clamp(64px, 8vw, 118px);
  --radius:       14px;

  --font-display: "Newsreader", Georgia, "Times New Roman", serif;
  --font-body:    "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  font-family: var(--font-body);
  color: var(--ink);
  background: var(--paper);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.csi *,
.csi *::before,
.csi *::after { box-sizing: border-box; }

.csi img { max-width: 100%; height: auto; display: block; }

.csi p { margin: 0 0 1em; color: var(--slate); }
.csi p:last-child { margin-bottom: 0; }

.csi h1, .csi h2, .csi h3, .csi h4 {
  font-family: var(--font-display);
  font-weight: 500;
  color: var(--ink);
  margin: 0 0 .5em;
  line-height: 1.12;
  letter-spacing: -0.012em;
}

.csi a { color: var(--accent-deep); }

.csi :focus-visible {
  outline: 3px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* --------------------------------------------------------------- shell */
.csi-shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.csi-section { padding-block: var(--pad-y); position: relative; }
.csi-section--mist { background: var(--mist); }
.csi-section--tight { padding-block: clamp(44px, 5vw, 72px); }

/* --------------------------------------------------------------- type bits */
.csi-eyebrow {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--accent-deep);
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.csi-eyebrow::after {
  content: "";
  flex: 1;
  height: 2px;
  max-width: 120px;
  background: linear-gradient(90deg, var(--amber), var(--green));
  opacity: .85;
}
.csi-eyebrow--center { justify-content: center; }
.csi-eyebrow--center::after { display: none; }

.csi-h2 { font-size: clamp(2rem, 3.6vw, 3rem); }
.csi-lede { font-size: clamp(1.02rem, 1.35vw, 1.18rem); line-height: 1.7; max-width: 68ch; }

/* --------------------------------------------------------------- buttons */
.csi-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-body);
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 15px 28px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
  cursor: pointer;
}
.csi-btn svg { width: 16px; height: 16px; }
.csi-btn--primary { background: var(--amber); color: #fff; }
.csi-btn--primary:hover { background: var(--amber-deep); transform: translateY(-2px); color: #fff; }
.csi-btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.csi-btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; transform: translateY(-2px); }
.csi-btn--dark { background: var(--navy); color: #fff; }
.csi-btn--dark:hover { background: #0A171F; color: #fff; transform: translateY(-2px); }

/* --------------------------------------------------------------- hero */
.csi-hero {
  position: relative;
  min-height: min(72vh, 660px);
  display: flex;
  align-items: flex-end;
  padding-block: clamp(90px, 14vw, 150px) clamp(48px, 7vw, 84px);
  color: #fff;
  isolation: isolate;
  background: var(--navy);
}
.csi-hero__media { position: absolute; inset: 0; z-index: -2; overflow: hidden; }
.csi-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.csi-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(19,37,48,0) 0%, rgba(19,37,48,.30) 38%, rgba(19,37,48,.74) 72%, rgba(12,26,34,.92) 100%),
    linear-gradient(90deg, rgba(19,37,48,.62) 0%, rgba(19,37,48,.12) 68%);
}
.csi-hero__inner { max-width: 860px; }
.csi-hero .csi-eyebrow { color: #F7C58A; }
.csi-hero h1 {
  color: #fff;
  font-size: clamp(2.6rem, 6.4vw, 4.5rem);
  line-height: 1.02;
  margin-bottom: 22px;
  text-wrap: balance;
}
.csi-hero h1 em { font-style: italic; color: #FFB443; }
.csi-hero p { color: rgba(255,255,255,.86); font-size: clamp(1.03rem, 1.5vw, 1.22rem); max-width: 60ch; }
.csi-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 34px; }

/* --------------------------------------------------------------- sticky rail */
.csi-rail {
  position: sticky;
  top: 0;
  z-index: 40;
  background: var(--navy);
  border-top: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--amber), var(--green)) 1;
  box-shadow: 0 10px 30px rgba(10,23,31,.18);
}
.csi-rail__inner {
  display: flex;
  align-items: stretch;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: none;
}
.csi-rail__inner::-webkit-scrollbar { display: none; }
.csi-rail__label {
  display: flex;
  align-items: center;
  padding-right: 22px;
  margin-right: 8px;
  border-right: 1px solid rgba(255,255,255,.14);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.csi-rail a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px;
  color: rgba(255,255,255,.72);
  text-decoration: none;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.csi-rail a svg { width: 19px; height: 19px; flex: none; opacity: .9; }
.csi-rail a:hover { color: #fff; }
.csi-rail a.is-active { color: #fff; border-bottom-color: var(--amber); }
.csi-rail__cta { margin-left: auto; display: flex; align-items: center; padding-left: 18px; }
.csi-rail__cta .csi-btn { padding: 11px 22px; font-size: .76rem; }

/* --------------------------------------------------------------- approach */
.csi-approach__grid {
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: clamp(36px, 6vw, 84px);
  align-items: center;
}
.csi-approach__body p + p { margin-top: 1.1em; }
.csi-approach__note {
  margin-top: 30px;
  padding: 20px 24px;
  border-left: 3px solid var(--amber);
  background: var(--amber-tint);
  border-radius: 0 10px 10px 0;
  font-size: .95rem;
  color: var(--ink);
}
.csi-frame { position: relative; }
.csi-frame::before {
  content: "";
  position: absolute;
  inset: auto -18px -18px auto;
  width: 62%;
  height: 62%;
  background: var(--green);
  border-radius: var(--radius);
  z-index: 0;
}
.csi-frame > * { position: relative; z-index: 1; border-radius: var(--radius); overflow: hidden; }

/* --------------------------------------------------------------- vision / mission */
.csi-vm {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(24px, 3.4vw, 44px);
}
.csi-vm__item { display: flex; flex-direction: column; }
.csi-vm__media { border-radius: var(--radius); overflow: hidden; aspect-ratio: 16 / 10; }
.csi-vm__media img { width: 100%; height: 100%; object-fit: cover; }
.csi-vm__card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  border-radius: var(--radius);
  padding: clamp(24px, 3vw, 36px);
  margin: -60px 26px 0;
  box-shadow: 0 18px 44px rgba(19,37,48,.09);
}
.csi-vm__item:nth-child(2) { --accent: var(--green); --accent-deep: var(--green-deep); }
.csi-vm__card h3 { font-family: var(--font-body); font-size: .74rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--accent-deep); margin-bottom: 12px; }
.csi-vm__card p { font-family: var(--font-display); font-size: clamp(1.06rem, 1.5vw, 1.24rem); line-height: 1.55; color: var(--ink); }

/* --------------------------------------------------------------- pillars */
.csi-pillars__head { max-width: 62ch; margin: 0 auto clamp(36px, 4vw, 56px); text-align: center; }
.csi-pillars {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}
.csi-pillar {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px 26px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  text-decoration: none;
  color: inherit;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csi-pillar:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(19,37,48,.11); border-color: var(--accent); }
.csi-pillar__icon {
  width: 54px; height: 54px;
  display: grid; place-items: center;
  border-radius: 14px;
  background: var(--accent-tint);
  color: var(--accent-deep);
}
.csi-pillar__icon svg { width: 27px; height: 27px; }
.csi-pillar h3 { font-family: var(--font-body); font-size: 1.02rem; font-weight: 700; letter-spacing: -.005em; margin: 4px 0 0; }
.csi-pillar p { font-size: .92rem; margin: 0; }
.csi-pillar__go {
  margin-top: auto;
  padding-top: 14px;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-deep);
  display: flex; align-items: center; gap: 8px;
}
.csi-pillar__go svg { width: 14px; height: 14px; transition: transform .25s ease; }
.csi-pillar:hover .csi-pillar__go svg { transform: translateY(3px); }
.csi-pillar:nth-child(2) { --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint); }
.csi-pillar:nth-child(4) { --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint); }

/* --------------------------------------------------------------- focus areas */
.csi-focus { scroll-margin-top: 74px; }
.csi-focus--green { --accent: var(--green); --accent-deep: var(--green-deep); --accent-tint: var(--green-tint); }
.csi-focus__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 40px;
  align-items: start;
  margin-bottom: clamp(32px, 4vw, 52px);
}
.csi-focus__head h2 { max-width: 16ch; }
.csi-focus__mark {
  width: clamp(88px, 10vw, 132px);
  height: clamp(88px, 10vw, 132px);
  display: grid; place-items: center;
  border-radius: 26px;
  background: var(--accent-tint);
  color: var(--accent);
  flex: none;
}
.csi-focus__mark svg { width: 52%; height: 52%; }
.csi-focus__kicker {
  margin-top: 26px;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink);
}

.csi-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(310px, 1fr));
  gap: clamp(16px, 1.8vw, 24px);
}
.csi-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease;
}
.csi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform .3s ease;
}
.csi-card:hover { transform: translateY(-4px); box-shadow: 0 18px 38px rgba(19,37,48,.10); }
.csi-card:hover::before { transform: scaleY(1); }
.csi-card__icon {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: 12px;
  background: var(--accent-tint);
  color: var(--accent-deep);
  flex: none;
}
.csi-card__icon svg { width: 22px; height: 22px; }
.csi-card p { font-size: .96rem; margin: 0; }
.csi-card ul { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.csi-card li {
  position: relative;
  padding-left: 20px;
  font-size: .91rem;
  color: var(--slate);
}
.csi-card li::before {
  content: "";
  position: absolute;
  left: 2px; top: .62em;
  width: 7px; height: 7px;
  border-radius: 50%;
  border: 1.5px solid var(--accent);
}

/* --------------------------------------------------------------- employees */
.csi-emp { background: var(--navy); color: #fff; }
.csi-emp__banner {
  position: relative;
  padding-block: clamp(56px, 7vw, 92px);
  background: linear-gradient(135deg, var(--green-deep), var(--green) 55%, #14B45F);
  text-align: center;
  overflow: hidden;
}
.csi-emp__banner::after {
  content: "";
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 22px 22px;
  opacity: .5;
}
.csi-emp__banner > * { position: relative; z-index: 1; }
.csi-emp__banner h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.8rem); }
.csi-emp__banner p { color: rgba(255,255,255,.9); max-width: 66ch; margin-inline: auto; }
.csi-emp__banner .csi-eyebrow { color: rgba(255,255,255,.78); justify-content: center; }
.csi-emp__banner .csi-eyebrow::after { display: none; }

.csi-emp__list { padding-block: clamp(56px, 7vw, 96px); display: grid; gap: clamp(48px, 6vw, 88px); }
.csi-entry {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 4.5vw, 64px);
  /* Top-aligned, not centred. Photo clusters and text blocks are never the
     same height, so centring made every row start at a different point down
     the page. Aligning to the top gives one consistent line across all five. */
  align-items: start;
}
.csi-entry > * { min-width: 0; }
.csi-entry:nth-child(even) .csi-entry__media { order: 2; }

.csi-entry__media {
  position: relative;      /* the positioning context for the inset photo */
  padding-bottom: 46px;    /* reserves exactly the space the inset overhangs */
  padding-right: 46px;
}
.csi-entry__media .csi-shot--main { border-radius: var(--radius); overflow: hidden; aspect-ratio: 4 / 3; }
.csi-entry__media .csi-shot--main img { width: 100%; height: 100%; object-fit: cover; }
.csi-entry__media .csi-shot--inset {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%;
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  border: 6px solid var(--navy);
  box-shadow: 0 16px 34px rgba(0,0,0,.35);
}
.csi-entry__media .csi-shot--inset img { width: 100%; height: 100%; object-fit: cover; }

.csi-entry__body { padding-top: 4px; }
.csi-entry__site {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #7FD9A8;
  margin-bottom: 14px;
  display: flex; align-items: center; gap: 10px;
}
.csi-entry__site svg { width: 15px; height: 15px; }
.csi-entry h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.05rem); margin-bottom: 22px; }
.csi-entry dl { margin: 0; display: grid; gap: 0; }
.csi-entry .csi-row {
  display: grid;
  grid-template-columns: 168px 1fr;
  gap: 18px;
  padding: 15px 0;
  border-top: 1px solid rgba(255,255,255,.14);
}
.csi-entry .csi-row:last-child { border-bottom: 1px solid rgba(255,255,255,.14); }
.csi-entry dt {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  padding-top: 3px;
}
.csi-entry dd { margin: 0; color: rgba(255,255,255,.92); font-size: .97rem; }

.csi-relief { border-top: 1px solid rgba(255,255,255,.14); padding-top: clamp(44px, 5vw, 72px); }
.csi-relief__grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 4vw, 56px); align-items: center; }
.csi-relief__shots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.csi-relief__shots > * { border-radius: 10px; overflow: hidden; aspect-ratio: 4 / 3; }
.csi-relief__shots > *:first-child { grid-column: span 2; aspect-ratio: 16 / 9; }
.csi-relief__shots img { width: 100%; height: 100%; object-fit: cover; }
.csi-relief h3 { color: #fff; font-size: clamp(1.5rem, 2.4vw, 2.05rem); }
.csi-relief p { color: rgba(255,255,255,.85); }
.csi-relief .csi-entry__site { color: #F7C58A; }

/* --------------------------------------------------------------- CTA */
.csi-cta { position: relative; overflow: hidden; background: var(--amber); isolation: isolate; }
.csi-cta__media { position: absolute; inset: 0; z-index: -2; }
.csi-cta__media img { width: 100%; height: 100%; object-fit: cover; }
.csi-cta::after {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(238,148,34,.97) 0%, rgba(238,148,34,.9) 55%, rgba(194,112,26,.82) 100%);
}
.csi-cta__inner {
  display: grid;
  grid-template-columns: 1.3fr auto;
  gap: 40px;
  align-items: center;
  padding-block: clamp(52px, 6vw, 84px);
}
.csi-cta h2 { color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.9rem); margin-bottom: 12px; }
.csi-cta p { color: rgba(255,255,255,.94); max-width: 58ch; }
.csi-cta .csi-eyebrow { color: rgba(255,255,255,.85); }
.csi-cta .csi-eyebrow::after { background: rgba(255,255,255,.6); }
.csi-cta__actions { display: grid; gap: 12px; justify-items: start; }
.csi-cta__note { font-size: .8rem; color: rgba(255,255,255,.85); }

/* --------------------------------------------------------------- reveal */
[data-reveal] { opacity: 0; transform: translateY(22px); transition: opacity .7s ease, transform .7s cubic-bezier(.22,.61,.36,1); }
[data-reveal].is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .csi *, .csi *::before, .csi *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .csi { scroll-behavior: auto; }
}

/* --------------------------------------------------------------- responsive */
@media (max-width: 1040px) {
  .csi-pillars { grid-template-columns: repeat(2, 1fr); }
  .csi-approach__grid { grid-template-columns: 1fr; }
  .csi-frame { max-width: 620px; }
  .csi-entry { grid-template-columns: 1fr; }
  .csi-entry:nth-child(even) .csi-entry__media { order: 0; }
  .csi-relief__grid { grid-template-columns: 1fr; }
  .csi-cta__inner { grid-template-columns: 1fr; }
}

@media (max-width: 780px) {
  .csi-vm { grid-template-columns: 1fr; }
  .csi-focus__head { grid-template-columns: 1fr; gap: 22px; }
  .csi-focus__mark { order: -1; }
  .csi-rail__label { display: none; }
  .csi-rail a { padding: 15px 12px; font-size: .78rem; }
  .csi-rail__cta { display: none; }
  .csi-entry .csi-row { grid-template-columns: 1fr; gap: 4px; }
  .csi-relief__shots > *:first-child { grid-column: span 2; }
}

@media (max-width: 560px) {
  .csi-pillars { grid-template-columns: 1fr; }
  .csi-vm__card { margin-inline: 14px; }
  .csi-hero__actions .csi-btn { width: 100%; justify-content: center; }
  .csi-entry__media { padding-right: 0; padding-bottom: 34px; }
  .csi-entry__media .csi-shot--inset { width: 52%; right: 8px; }
}

/* --------------------------------------------------------------- media helpers */
.csi-media { border-radius: var(--radius); overflow: hidden; background: var(--mist); }
.csi-media img { width: 100%; height: 100%; object-fit: cover; }

/* Placeholder shown while a photo slot is still empty — delete once every
   image in the $sanpc_csi_images map points at a real upload. */
.csi-ph {
  width: 100%; height: 100%; min-height: 150px;
  display: grid; place-items: center;
  background: repeating-linear-gradient(45deg, #DCE5EA, #DCE5EA 11px, #E7EEF1 11px, #E7EEF1 22px);
  color: #61757F;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  text-align: center;
  padding: 10px;
}

/* =============================================================================
   Colibri WP compatibility
   Colibri scopes every rule to html.colibri-wp-theme, which outranks a plain
   .csi selector. These few rules win it back. Nothing here affects any other
   page — the body.csi-page class only exists on the CSI template.
   ========================================================================== */

/* Colibri forces images to inline-block, which leaves gaps under every photo. */
html.colibri-wp-theme .csi img,
html.colibri-wp-theme .csi svg { display: block; }
html.colibri-wp-theme .csi img { max-width: 100%; height: auto; }

/* Colibri sets overflow:hidden on #page-top. An ancestor with overflow:hidden
   makes position:sticky stop working, so the focus rail would scroll away.
   overflow:clip clips identically without creating a scroll container. */
html.colibri-wp-theme body.csi-page #page-top {
  overflow-x: clip;
  overflow-y: visible;
}

/* Safari 15 and older have no overflow:clip — drop the stickiness there
   rather than leave a rail that half-works. */
@supports not (overflow: clip) {
  .csi-rail { position: static; }
}

/* If your Colibri header is set to sticky, put its height here and both the
   rail and the anchor scroll positions follow. */
.csi { --csi-header-offset: 0px; }
html.colibri-wp-theme .csi .csi-rail { top: var(--csi-header-offset); }
html.colibri-wp-theme .csi .csi-focus { scroll-margin-top: calc(var(--csi-header-offset) + 74px); }

/* --------------------------------------------------------------- photo-optional states */
/* Vision/Mission with no photo: the card stands on its own, no hanging overlap. */
.csi-vm__item--solo .csi-vm__card {
  margin: 0;
  background: var(--paper);
  padding: clamp(28px, 3.6vw, 44px);
}
.csi-vm__item--solo .csi-vm__card p { font-size: clamp(1.1rem, 1.6vw, 1.32rem); }

/* Employee entry with only one photo: drop the inset's reserved space. */
.csi-entry__media--single { padding-bottom: 0; padding-right: 0; }

/* Disaster relief with no photos: single readable column. */
.csi-relief__grid--solo { grid-template-columns: 1fr; max-width: 70ch; }

/* Hero and CTA crops: keep the people in frame when the box is wider than the photo. */
.csi-hero__media img { object-position: center 58%; }
.csi-cta__media img { object-position: center 45%; }

/* --------------------------------------------------------------- hero without a photo */
/* The site header directly above this hero sits on SANPC orange. The hero
   therefore opens on exactly that orange and dissolves down into navy, so the
   two blend into one another with no visible seam.
   If your header orange differs, change this one value and everything follows. */
.csi { --csi-header-orange: #EE9422; }

.csi-hero--plain {
  background:
    linear-gradient(180deg,
      var(--csi-header-orange) 0%,
      rgba(238,148,34,.86) 9%,
      rgba(238,148,34,.42) 22%,
      rgba(238,148,34,.12) 36%,
      rgba(238,148,34,0) 50%),
    radial-gradient(760px 440px at 12% 30%, rgba(238,148,34,.30), transparent 62%),
    radial-gradient(900px 500px at 92% 94%, rgba(0,161,75,.32), transparent 60%),
    linear-gradient(160deg, #1D3746 0%, var(--navy) 52%, #0B1821 100%);
}
.csi-hero--plain::after {
  background-image: radial-gradient(rgba(255,255,255,.10) 1px, transparent 1px);
  background-size: 26px 26px;
}
/* Amber-to-green hairline where the hero meets the focus rail. */
.csi-hero--plain { position: relative; }
.csi-hero--plain { border-bottom: 2px solid transparent; }

/* Approach section with no photo: one comfortable reading column. */
.csi-approach__grid--solo { grid-template-columns: 1fr; }
.csi-approach__grid--solo .csi-lede,
.csi-approach__grid--solo .csi-approach__body p { max-width: 72ch; }

/* --------------------------------------------------------------- refinements */

/* The health icon is the red cross, per the media brief. Everything else in
   the section keeps the SANPC amber so the palette holds. */
.csi-pillar--health .csi-pillar__icon,
.csi-focus--health .csi-focus__mark { color: #D64541; background: #FBEAE9; }

/* Focus area shown as a chip, tying each project back to its funding area. */
.csi-chip {
  display: inline-block;
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(127, 217, 168, .15);
  border: 1px solid rgba(127, 217, 168, .45);
  color: #A6E7C4;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .02em;
}

/* Photos lift very slightly on hover — enough to feel alive, not showy. */
.csi-shot--main,
.csi-shot--inset,
.csi-vm__media,
.csi-media { overflow: hidden; }
.csi-shot--main img,
.csi-shot--inset img,
.csi-vm__media img,
.csi-media img { transition: transform .6s cubic-bezier(.22,.61,.36,1); }
.csi-entry:hover .csi-shot--main img,
.csi-entry:hover .csi-shot--inset img { transform: scale(1.035); }

/* Banner subtitle from the media brief. */
.csi-emp__kicker {
  color: rgba(255,255,255,.82) !important;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-top: -4px !important;
  margin-bottom: 18px !important;
}

/* Entries are numbered like a field report. */
.csi-entry { counter-increment: csi-entry; }
.csi-emp__list { counter-reset: csi-entry; }
.csi-entry__body { position: relative; }
.csi-entry__num {
  font-family: var(--font-display);
  font-size: .84rem;
  font-weight: 500;
  color: rgba(255,255,255,.34);
  letter-spacing: .1em;
  display: block;
  margin-bottom: 6px;
}
.csi-entry__num::before { content: counter(csi-entry, decimal-leading-zero) " / 05"; }

/* Nicer wrapping for headings and lead paragraphs. */
.csi h1, .csi h2, .csi h3 { text-wrap: balance; }
.csi p { text-wrap: pretty; }

/* =============================================================================
   Motion
   One easing curve and one distance for everything, so the page feels like a
   single system rather than a pile of effects.
   ========================================================================== */

.csi { --ease: cubic-bezier(.22, .68, .36, 1); }

[data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .78s var(--ease), transform .78s var(--ease);
  transition-delay: calc(var(--i, 0) * 80ms);
}
[data-reveal].is-in { opacity: 1; transform: none; }

/* Cards arrive with a touch of scale so grids feel like they assemble. */
.csi-card[data-reveal],
.csi-pillar[data-reveal] { transform: translateY(26px) scale(.985); }
.csi-card[data-reveal].is-in,
.csi-pillar[data-reveal].is-in { transform: none; }

/* Project entries come in from the side they sit on. */
.csi-entry[data-reveal] { transform: translateY(30px); }
@media (min-width: 1041px) {
  .csi-entry[data-reveal] .csi-entry__media { transform: translateX(-28px); opacity: 0; transition: opacity .8s var(--ease) .1s, transform .8s var(--ease) .1s; }
  .csi-entry[data-reveal] .csi-entry__body  { transform: translateX(22px);  opacity: 0; transition: opacity .8s var(--ease) .2s, transform .8s var(--ease) .2s; }
  .csi-entry:nth-child(even)[data-reveal] .csi-entry__media { transform: translateX(28px); }
  .csi-entry:nth-child(even)[data-reveal] .csi-entry__body  { transform: translateX(-22px); }
  .csi-entry[data-reveal].is-in .csi-entry__media,
  .csi-entry[data-reveal].is-in .csi-entry__body { transform: none; opacity: 1; }
}

/* Hero types itself in on load, line by line. */
.csi-hero__inner > * {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.csi-hero.is-ready .csi-hero__inner > *  { opacity: 1; transform: none; }
.csi-hero.is-ready .csi-eyebrow          { transition-delay: .05s; }
.csi-hero.is-ready h1                    { transition-delay: .16s; }
.csi-hero.is-ready p                     { transition-delay: .30s; }
.csi-hero.is-ready .csi-hero__actions    { transition-delay: .42s; }

/* A very slow drift on the hero backdrop. Twenty-eight seconds, six percent —
   you shouldn't be able to catch it moving, only notice it isn't static. */
@keyframes csi-drift {
  from { transform: scale(1.02) translate3d(0, 0, 0); }
  to   { transform: scale(1.09) translate3d(0, -1.2%, 0); }
}
.csi-hero__media img { animation: csi-drift 28s var(--ease) forwards; will-change: transform; }

@media (prefers-reduced-motion: reduce) {
  .csi-hero__media img { animation: none; }
  .csi-hero__inner > * { opacity: 1; transform: none; }
  .csi-entry[data-reveal] .csi-entry__media,
  .csi-entry[data-reveal] .csi-entry__body { opacity: 1; transform: none; }
}

/* =============================================================================
   Hero with the blurred backdrop
   ========================================================================== */

/* The photograph blends into the colour rather than sitting on top of it.
   Luminosity blending takes the light and shade from the image and every hue
   from the wash behind it, so the palette stays SANPC amber, green and navy
   while the picture supplies texture and depth.
   The mask holds it clear of the orange band at the very top, keeping the
   join with the site header clean. */
.csi-hero__media {
  mix-blend-mode: luminosity;
  opacity: .46;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%, #000 100%);
  mask-image: linear-gradient(180deg, transparent 0%, rgba(0,0,0,.35) 20%, #000 46%, #000 100%);
}
.csi-hero__media img { filter: contrast(1.06) saturate(.72); }

/* Fallback for browsers without blend-mode support: just a quiet photo. */
@supports not (mix-blend-mode: luminosity) {
  .csi-hero__media { opacity: .3; }
}

/* =============================================================================
   Vision & Mission — equal height, quieter, better
   ========================================================================== */

.csi-vm { align-items: stretch; }
.csi-vm__item { height: 100%; }
.csi-vm__item--solo .csi-vm__card {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: clamp(30px, 3.6vw, 46px);
  border: 1px solid var(--line);
  border-top: 3px solid var(--accent);
  background:
    linear-gradient(180deg, var(--accent-tint) 0%, rgba(255,255,255,0) 58%),
    var(--paper);
  overflow: hidden;
}
.csi-vm__badge {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  border-radius: 13px;
  background: var(--accent);
  color: #fff;
  flex: none;
}
.csi-vm__badge svg { width: 23px; height: 23px; }
.csi-vm__item--solo .csi-vm__card h3 { margin: 4px 0 0; }
.csi-vm__item--solo .csi-vm__card p {
  font-size: clamp(1.08rem, 1.5vw, 1.26rem);
  line-height: 1.6;
  margin-top: auto;
}
/* A large, very faint copy of the badge sitting behind the text. */
.csi-vm__mark {
  position: absolute;
  right: -22px; bottom: -28px;
  width: 168px; height: 168px;
  color: var(--accent);
  opacity: .06;
  pointer-events: none;
}
.csi-vm__mark svg { width: 100%; height: 100%; }

/* =============================================================================
   Lightbox
   ========================================================================== */

.csi-zoomable { cursor: zoom-in; position: relative; }
.csi-zoomable::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(12,26,34,0);
  transition: background .35s var(--ease);
  pointer-events: none;
}
.csi-zoomable:hover::after { background: rgba(12,26,34,.14); }
.csi-zoomable:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }

body.csi-lb-open { overflow: hidden; }

.csi-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  background: rgba(8, 18, 24, .90);
  -webkit-backdrop-filter: blur(9px) saturate(115%);
  backdrop-filter: blur(9px) saturate(115%);
  opacity: 0;
  transition: opacity .34s var(--ease, ease);
}
.csi-lightbox.is-open { display: block; }
.csi-lightbox.is-shown { opacity: 1; }

.csi-lb__frame {
  position: fixed;
  margin: 0;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 40px 90px rgba(0, 0, 0, .55);
  transition: top .42s var(--ease, ease), left .42s var(--ease, ease),
              width .42s var(--ease, ease), height .42s var(--ease, ease);
  will-change: top, left, width, height;
}
.csi-lb__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: opacity .17s ease;
}
.csi-lb__frame.is-swapping img { opacity: 0; }

.csi-lb__bar {
  position: fixed;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 18px;
  max-width: min(92vw, 760px);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .08);
  border: 1px solid rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .9);
  font-family: var(--font-body, sans-serif);
  font-size: .84rem;
}
.csi-lb__caption { margin: 0; color: rgba(255,255,255,.9); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.csi-lb__counter { margin: 0; color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; flex: none; }

.csi-lb__close,
.csi-lb__nav {
  position: fixed;
  display: grid;
  place-items: center;
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.08);
  color: #fff;
  cursor: pointer;
  transition: background .25s ease, transform .25s var(--ease, ease), border-color .25s ease;
}
.csi-lb__close:hover,
.csi-lb__nav:hover { background: rgba(255,255,255,.2); border-color: rgba(255,255,255,.4); transform: scale(1.07); }
.csi-lb__close svg,
.csi-lb__nav svg { width: 21px; height: 21px; }
.csi-lb__close { top: 22px; right: 22px; }
.csi-lb__nav--prev { left: 20px; top: 50%; margin-top: -34px; }
.csi-lb__nav--next { right: 20px; top: 50%; margin-top: -34px; }

@media (max-width: 640px) {
  .csi-lb__nav--prev { left: 12px; }
  .csi-lb__nav--next { right: 12px; }
  .csi-lb__close { top: 14px; right: 14px; width: 42px; height: 42px; }
  .csi-lb__caption { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .csi-lb__frame { transition: none; }
}

/* A photo that fails to load hides its frame instead of showing a broken icon. */
.csi-missing { display: none !important; }
.csi-entry__media:has(> .csi-shot--main.csi-missing) { display: none; }

/* =============================================================================
   Button legibility
   Colibri prints its Customizer CSS inline in the head, after this stylesheet,
   so source order alone can recolour link text inside the buttons. These rules
   are deliberately specific and marked important — narrowly, on buttons only —
   so the label stays white whatever the theme decides about links.
   ========================================================================== */

html.colibri-wp-theme .csi a.csi-btn,
html.colibri-wp-theme .csi a.csi-btn:link,
html.colibri-wp-theme .csi a.csi-btn:visited,
html.colibri-wp-theme .csi a.csi-btn:hover,
html.colibri-wp-theme .csi a.csi-btn:focus,
html.colibri-wp-theme .csi a.csi-btn:active,
.csi a.csi-btn,
.csi a.csi-btn:link,
.csi a.csi-btn:visited,
.csi a.csi-btn:hover,
.csi a.csi-btn:focus {
  color: #FFFFFF !important;
  text-decoration: none !important;
}

/* White on the brand amber measures 2.4:1, well under the 4.5:1 that text this
   size needs to stay readable — which is exactly the problem you spotted. The
   button therefore uses a deeper amber that carries white cleanly at 4.9:1,
   while the brand amber keeps its role everywhere else on the page. */
html.colibri-wp-theme .csi a.csi-btn--primary,
.csi a.csi-btn--primary,
.csi button.csi-btn--primary {
  background-color: #A85F14 !important;
  border-color: #A85F14 !important;
}
html.colibri-wp-theme .csi a.csi-btn--primary:hover,
.csi a.csi-btn--primary:hover,
.csi button.csi-btn--primary:hover {
  background-color: #8C4E0F !important;
  border-color: #8C4E0F !important;
}

/* On the amber apply band the dark button already reads well — hold it there. */
html.colibri-wp-theme .csi a.csi-btn--dark,
.csi a.csi-btn--dark {
  background-color: var(--navy) !important;
  border-color: var(--navy) !important;
}
html.colibri-wp-theme .csi a.csi-btn--dark:hover,
.csi a.csi-btn--dark:hover {
  background-color: #0A171F !important;
  border-color: #0A171F !important;
}

/* A little lift so the hero button separates from the photograph behind it. */
.csi-hero .csi-btn--primary { box-shadow: 0 10px 26px rgba(8, 18, 24, .38); }

/* =============================================================================
   Project rows — deterministic layout
   The earlier version swapped columns with `order` and hung the second photo
   off the first with absolute positioning. Both work until something else on
   the page nudges them, and then rows drift out of line independently of each
   other. This replaces both with explicit grid placement: every element is
   told exactly which column and row it occupies, so nothing is left to
   auto-placement or to a positioning context that might move.
   ========================================================================== */

@media (min-width: 1041px) {
  /* Odd rows: photos left, text right. Even rows: the reverse. Stated
     outright rather than reordered, so the two can never disagree. */
  .csi-entry .csi-entry__media { grid-column: 1; grid-row: 1; order: 0; }
  .csi-entry .csi-entry__body  { grid-column: 2; grid-row: 1; order: 0; }

  .csi-entry:nth-child(even) .csi-entry__media { grid-column: 2; grid-row: 1; order: 0; }
  .csi-entry:nth-child(even) .csi-entry__body  { grid-column: 1; grid-row: 1; order: 0; }
}

/* The photo cluster is now a plain two-column grid. Both pictures share one
   aspect ratio and one baseline, so the block's height is always predictable
   and the row below it can never be pushed out of alignment. */
.csi-entry .csi-entry__media {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  padding: 0;
  position: static;
}

.csi-entry .csi-entry__media .csi-shot--main {
  grid-column: 1 / -1;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius);
  overflow: hidden;
}

.csi-entry .csi-entry__media .csi-shot--inset {
  position: static;
  grid-column: 2 / -1;
  width: auto;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: var(--radius);
  box-shadow: none;
  overflow: hidden;
}

/* One photo only: it takes the full width on its own. */
.csi-entry .csi-entry__media--single { grid-template-columns: 1fr; }
.csi-entry .csi-entry__media--single .csi-shot--main { grid-column: 1 / -1; }

.csi-entry .csi-entry__media .csi-shot--main img,
.csi-entry .csi-entry__media .csi-shot--inset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

@media (max-width: 1040px) {
  .csi-entry .csi-entry__media,
  .csi-entry .csi-entry__body { grid-column: 1; }
  .csi-entry .csi-entry__media { grid-row: 1; }
  .csi-entry .csi-entry__body { grid-row: 2; }
}

/* =============================================================================
   Criteria & General Exclusions
   Two numbered policy sections an applicant needs before they click apply.
   Criteria reads as a checklist to work through; exclusions reads as a firm,
   short list to rule things out quickly — different shapes for different jobs.
   ========================================================================== */

.csi-criteria { background: var(--paper); }
.csi-criteria__head { max-width: 68ch; margin: 0 auto 40px; text-align: center; }
.csi-criteria__intro { margin: 0 auto; }

.csi-criteria__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 880px;
  display: grid;
  gap: 14px;
}
.csi-criteria__list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 18px 22px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.csi-criteria__list li:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 32px rgba(19,37,48,.08);
  border-color: var(--amber);
}
.csi-num {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border-radius: 10px;
  background: var(--amber-tint);
  color: var(--amber-deep);
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 1rem;
}
.csi-criteria__list p { margin: 0; padding-top: 6px; font-size: .97rem; color: var(--ink); }

/* Exclusions: dense, quiet, unmistakably "no". */
.csi-exclusions { background: var(--mist); }
.csi-exclusions__list {
  list-style: none;
  margin: 0 auto;
  padding: 0;
  max-width: 980px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 12px 20px;
}
.csi-exclusions__list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .93rem;
  color: var(--slate);
  padding: 4px 0;
}
.csi-exclusions__list li svg {
  width: 18px; height: 18px;
  flex: none;
  margin-top: 2px;
  color: #C0392B;
  opacity: .85;
}

@media (max-width: 640px) {
  .csi-criteria__list li { grid-template-columns: 36px 1fr; padding: 15px 16px; gap: 14px; }
  .csi-num { width: 34px; height: 34px; font-size: .9rem; }
}

.csi .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.csi{scroll-behavior:smooth}