/* ============================================================
   TAMEGUE GLOBAL INITIATIVE FOUNDATION
   Inner pages
   ------------------------------------------------------------
   Loaded only by the five inner pages. It adds no tokens, no fonts
   and no colours of its own: every value below resolves to a
   variable already declared in style.css.

   The homepage is the quality reference, not the template. Nothing
   here re-uses a homepage section composition — .hero, .compare,
   .conv, .mosaic and .leaders are all left alone — but the same
   type scale, spacing rhythm, radii, borders and motion curves are
   used throughout so the pages read as one site.
   ============================================================ */

/* ============================================================
   INNER PAGE HERO
   Three variants: paper (default), ink (.is-dark) and mist
   (.is-mist). Each page picks the one its neighbouring section
   does not use, so no two pages open the same way.
   ============================================================ */
.phero {
  position: relative;
  overflow: hidden;
  padding-top: clamp(44px, 6vw, 78px);
  padding-bottom: clamp(48px, 6.5vw, 88px);
}

.phero-glow {
  position: absolute;
  inset: -20% -10% auto -10%;
  height: 90%;
  background: radial-gradient(50% 60% at 26% 30%, color-mix(in srgb, var(--accent) 15%, transparent), transparent 70%);
  pointer-events: none;
}

/* The inner-page openers carry the same quiet weather as the homepage
   hero: two drifting colour fields in the glow and, every so often, a
   diagonal sheen crossing the surface. The keyframes (auroraA/B,
   beamSweep) live in style.css, which every page loads first. */
.phero-glow::before,
.phero-glow::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.phero-glow::before {
  width: 52%;
  height: 70%;
  left: -2%;
  top: 12%;
  background: radial-gradient(circle at 40% 40%, color-mix(in srgb, var(--accent) 13%, transparent), transparent 70%);
  filter: blur(56px);
  animation: auroraA 14s ease-in-out infinite alternate;
}

.phero-glow::after {
  width: 44%;
  height: 60%;
  right: 4%;
  bottom: -4%;
  background: radial-gradient(circle at 55% 45%, color-mix(in srgb, var(--brand-sky) 13%, transparent), transparent 70%);
  filter: blur(56px);
  animation: auroraB 18s ease-in-out infinite alternate-reverse;
}

.phero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, color-mix(in srgb, var(--accent) 8%, transparent) 50%, transparent 58%);
  transform: translateX(-130%) skewX(-14deg);
  animation: beamSweep 13s ease-in-out infinite;
}

/* On the navy opener an accent sheen would sink into the ink —
   there the beam is plain light, exactly as faint. */
.phero.is-dark::after {
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, .06) 50%, transparent 58%);
}

/* The opener plays the same deliberate arrival as the homepage hero —
   kicker, title, lede, then the facts — reusing the heroRise keyframes
   that style.css defines for every page. */
.phero-kicker {
  animation: heroRise .55s var(--ease-out) .08s both;
}

.phero-title {
  animation: heroRise .75s var(--ease-out) .16s both;
}

.phero-lede {
  animation: heroRise .7s var(--ease-out) .3s both;
}

.phero-facts,
.phero-rail {
  animation: heroRise .7s var(--ease-out) .42s both;
}

@media (prefers-reduced-motion:reduce) {

  .phero-glow::before,
  .phero-glow::after,
  .phero-kicker,
  .phero-title,
  .phero-lede,
  .phero-facts,
  .phero-rail {
    animation: none;
  }

  .phero::after {
    display: none;
  }
}

.phero.is-dark {
  background: var(--ink);
  color: #fff;
}

.phero.is-dark .eyebrow {
  color: rgba(255, 255, 255, .5)
}

.phero.is-mist {
  background: var(--mist)
}

.phero-in {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: clamp(26px, 4vw, 64px);
  align-items: end;
}

.phero-in.is-single {
  grid-template-columns: 1fr;
  max-width: 900px;
}

/* Breadcrumb-ish locator above the title — mono, tiny, with the
   initiative spectrum as a short rule under it */
.phero-kicker {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 22px;
}

.phero-kicker .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--accent-mid);
  flex: none;
}

.phero-title {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 116%;
  font-size: clamp(36px, 5.6vw, 62px);
  line-height: .93;
  letter-spacing: -.03em;
  text-transform: uppercase;
}

.phero-title em {
  font-style: normal;
  color: var(--accent-mid);
}

.phero.is-dark .phero-title em {
  color: var(--brand-amber);
}

.phero-lede {
  font-size: clamp(18px, 1.9vw, 23px);
  line-height: 1.5;
  color: var(--ink-soft);
  margin-top: clamp(20px, 2.5vw, 30px);
  max-width: 62ch;
}

.phero.is-dark .phero-lede {
  color: rgba(255, 255, 255, .74)
}

/* The seven-colour rail, reused as a page ornament */
.phero-rail {
  display: flex;
  gap: 4px;
  margin-top: clamp(26px, 3.4vw, 40px);
}

.phero-rail span {
  height: 6px;
  flex: 1;
  border-radius: 99px;
  transform-origin: left;
  animation: railIn .8s cubic-bezier(.2, .7, .3, 1) both;
}

@keyframes railIn {
  from {
    transform: scaleX(0)
  }

  to {
    transform: scaleX(1)
  }
}

/* A small definition list that sits beside the title on some pages */
.phero-facts {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 18px;
  overflow: hidden;
}

.phero.is-dark .phero-facts {
  background: rgba(255, 255, 255, .14);
  border-color: rgba(255, 255, 255, .16);
}

.phero-facts li {
  background: var(--paper);
  padding: 18px 20px;
}

.phero.is-dark .phero-facts li {
  background: rgba(255, 255, 255, .04);
}

.phero-facts dt,
.phero-facts .k {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px;
}

.phero.is-dark .phero-facts .k {
  color: rgba(255, 255, 255, .5)
}

.phero-facts .v {
  display: block;
  font-size: 15.5px;
  line-height: 1.45;
}

/* ============================================================
   SHARED SMALL PARTS
   ============================================================ */

/* A band that inverts the page — used sparingly, once per page */
.band-ink {
  background: var(--ink);
  color: #fff;
}

.band-ink .eyebrow {
  color: rgba(255, 255, 255, .5)
}

.band-ink .lede {
  color: rgba(255, 255, 255, .72)
}

.band-mist {
  background: var(--mist)
}

/* Section heading that spans the full width with a lede on the right */
.sec-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 64px);
  align-items: end;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}

.sec-split .h2 {
  margin-top: 16px
}

.sec-split .lede {
  margin-bottom: 4px
}

/* Mono note used for anything TGIF still has to supply. It is styled to
   read as an editorial flag, never as a published fact. */
.needs-content {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-top: 22px;
  padding: 15px 17px;
  border: 1px dashed color-mix(in srgb, var(--ink-soft) 40%, transparent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--mist) 70%, transparent);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-soft);
}

.needs-content b {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 5px;
  font-weight: 500;
}

.needs-content svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
  color: var(--grey);
}

.band-ink .needs-content {
  border-color: rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .05);
  color: rgba(255, 255, 255, .74);
}

.band-ink .needs-content b,
.band-ink .needs-content svg {
  color: rgba(255, 255, 255, .5)
}

/* Ghost button on an ink surface */
.band-ink .btn-ghost,
.phero.is-dark .btn-ghost,
.cta-band .btn-ghost {
  color: #fff;
  border-color: rgba(255, 255, 255, .5);
}

.band-ink .btn-ghost:hover,
.phero.is-dark .btn-ghost:hover,
.cta-band .btn-ghost:hover {
  border-color: transparent
}

/* ============================================================
   CALL-TO-ACTION BAND
   The shell is shared for brand consistency; each page fills it
   with a different composition.
   ============================================================ */
.cta-band {
  background: var(--ink);
  color: #fff;
  position: relative;
  overflow: hidden;
}

.cta-band::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 4px;
  background: var(--brand-grad);
}

.cta-band .eyebrow {
  color: rgba(255, 255, 255, .5)
}

.cta-title {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(30px, 4.4vw, 48px);
  line-height: 1;
  letter-spacing: -.025em;
  text-transform: uppercase;
  margin-top: 16px;
}

.cta-lede {
  font-size: clamp(17px, 1.7vw, 20px);
  line-height: 1.55;
  color: rgba(255, 255, 255, .74);
  margin-top: 20px;
  max-width: 58ch;
}

.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.cta-band .btn:not(.btn-ghost) {
  background: #fff;
  color: var(--ink);
}

.cta-band .btn:not(.btn-ghost):hover {
  color: #fff
}

/* Two-column CTA with a route list on the right */
.cta-split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

.cta-routes {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.cta-routes a {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 14px;
  background: rgba(255, 255, 255, .04);
  transition: background .25s, border-color .25s, transform .25s;
}

.cta-routes a:hover {
  background: rgba(255, 255, 255, .09);
  border-color: rgba(255, 255, 255, .4);
  transform: translateX(5px);
}

.cta-routes .n {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(255, 255, 255, .45);
}

.cta-routes strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.cta-routes small {
  display: block;
  font-size: 13.5px;
  line-height: 1.45;
  color: rgba(255, 255, 255, .6);
  margin-top: 3px;
}

.cta-routes svg {
  width: 17px;
  height: 17px;
  flex: none;
  color: rgba(255, 255, 255, .5);
  transition: transform .25s;
}

.cta-routes a:hover svg {
  transform: translateX(4px);
  color: #fff;
}

/* ============================================================
   THE MODEL — comparison switch
   Two states of one diagram rather than two cards side by side.
   ============================================================ */
.switch {
  display: inline-flex;
  padding: 5px;
  gap: 4px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
}

.switch button {
  font-family: var(--display);
  font-weight: 700;
  font-stretch: 106%;
  font-size: 12.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: 11px 20px;
  border: 0;
  border-radius: 99px;
  background: none;
  color: var(--ink-soft);
  cursor: pointer;
  transition: background .25s, color .25s;
}

.switch button[aria-selected="true"] {
  background: var(--ink);
  color: #fff;
}

.stage {
  position: relative;
  margin-top: clamp(26px, 3.4vw, 40px);
  border: 1px solid var(--rule);
  border-radius: 22px;
  background: var(--paper);
  padding: clamp(22px, 3.2vw, 40px);
  overflow: hidden;
}

.stage-head {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  margin-bottom: 26px;
}

.stage-head h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(19px, 2.2vw, 25px);
  text-transform: uppercase;
  letter-spacing: -.015em;
}

.stage-head p {
  font-size: 15.5px;
  color: var(--grey);
  flex: 1 1 320px;
}

/* Five departments as columns; the outcome either falls between them
   or runs straight across them. */
.depts {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
}

.dept {
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: #EDF2F9;
  color: var(--grey);
  padding: 16px 12px;
  min-height: 130px;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.35;
  display: flex;
  align-items: flex-start;
}

.outcome-line {
  position: relative;
  margin-top: 14px;
  border-radius: 12px;
  padding: 16px 18px;
  font-size: 15px;
  line-height: 1.5;
  display: flex;
  align-items: center;
  gap: 14px;
}

.outcome-line.is-orphan {
  border: 1px dashed color-mix(in srgb, var(--i-health) 55%, transparent);
  background: color-mix(in srgb, var(--i-health) 6%, #fff);
  color: var(--i-health-ink);
}

.outcome-line.is-held {
  border: 0;
  background: var(--accent-grad);
  color: #fff;
}

.outcome-line svg {
  width: 20px;
  height: 20px;
  flex: none;
}

/* Initiative crossing the columns */
.crossing {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  position: relative;
}

.crossing .dept {
  background: var(--paper);
  border-color: var(--rule);
  color: var(--ink);
}

.crossing .dept span {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 8px;
  font-weight: 500;
}

/* ============================================================
   THE MODEL — Design · Convene · Scale path
   ============================================================ */
.path {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(16px, 2.4vw, 32px);
  position: relative;
}

/* The rail that ties the three phases together */
.path::before {
  content: "";
  position: absolute;
  left: 6%;
  right: 6%;
  top: 27px;
  height: 3px;
  background: var(--brand-grad);
  opacity: .5;
}

.phase {
  position: relative;
  padding-top: 74px;
}

.phase-dot {
  position: absolute;
  top: 0;
  left: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--mono);
  font-weight: 700;
  font-size: 14px;
  color: #fff;
  background: var(--c, var(--ink));
  box-shadow: 0 0 0 8px var(--paper);
}

.phase h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(20px, 2.3vw, 26px);
  text-transform: uppercase;
  letter-spacing: -.018em;
}

.phase p {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 12px;
}

.phase ul {
  list-style: none;
  margin-top: 18px;
  border-top: 1px solid var(--rule);
}

.phase li {
  padding: 11px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14.5px;
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.phase li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c, var(--accent-mid));
}

/* ============================================================
   THE MODEL — lifecycle
   A vertical spine with alternating stages.
   ============================================================ */
.life {
  position: relative;
  margin-top: clamp(20px, 3vw, 34px);
  padding-left: 0;
  list-style: none;
}

.life::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 8px;
  bottom: 8px;
  width: 2px;
  margin-left: -1px;
  background: linear-gradient(var(--rule), var(--rule));
}

.life li {
  position: relative;
  width: calc(50% - 40px);
  padding: clamp(18px, 2.4vw, 26px);
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  margin-bottom: 20px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

.life li:hover {
  border-color: var(--c);
  box-shadow: 0 20px 44px -34px rgba(6, 37, 74, .8);
  transform: translateY(-2px);
}

.life li:nth-child(even) {
  margin-left: calc(50% + 40px);
}

/* The node on the spine */
.life li::after {
  content: "";
  position: absolute;
  top: 30px;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  background: var(--c, var(--ink));
  border: 3px solid var(--paper);
  box-shadow: 0 0 0 2px var(--rule);
}

.life li:nth-child(odd)::after {
  right: -48px
}

.life li:nth-child(even)::after {
  left: -48px
}

.life-step {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--c-ink, var(--grey));
  font-weight: 500;
}

/* The card is paper-white inside a .band-ink section, so the heading has to
   name its own colour — otherwise it inherits the band's white and disappears
   against the card. The step label and the paragraph below already do this. */
.life h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 10px;
  color: var(--ink);
}

.life p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 10px;
}

/* ============================================================
   THE MODEL — the four-part record, driven by a picker
   ============================================================ */
.rec-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 22px;
}

.rec-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition: border-color .22s, color .22s, background .22s;
}

.rec-chip i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}

.rec-chip:hover {
  border-color: var(--c);
  color: var(--ink);
}

.rec-chip[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.rec-card {
  border: 1px solid var(--rule);
  border-radius: 22px;
  overflow: hidden;
  background: var(--paper);
  box-shadow: 0 26px 60px -46px rgba(6, 37, 74, .7);
}

.rec-top {
  padding: clamp(22px, 3vw, 32px);
  border-bottom: 1px solid var(--rule);
  border-top: 4px solid var(--c);
}

.rec-num {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--c-ink);
}

.rec-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.022em;
  margin-top: 10px;
}

.rec-sum {
  font-size: 16.5px;
  color: var(--ink-soft);
  margin-top: 12px;
  max-width: 62ch;
}

.rec-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--rule);
}

.rec-grid > div {
  background: var(--paper);
  padding: clamp(18px, 2.2vw, 26px);
}

.rec-grid dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 10px;
}

.rec-grid dd {
  font-size: 15px;
  line-height: 1.5;
}

/* ============================================================
   Participant matrix — who is in the room
   ============================================================ */
.matrix {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}

.matrix article {
  background: var(--paper);
  padding: clamp(20px, 2.6vw, 30px);
  transition: background .25s;
}

.matrix article:hover {
  background: var(--mist)
}

.matrix h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  display: flex;
  align-items: center;
  gap: 10px;
}

.matrix h3 i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--c, var(--accent-mid));
}

.matrix p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 12px;
}

.matrix .role {
  display: block;
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
  margin-top: 14px;
}

/* ============================================================
   INITIATIVES PAGE
   ============================================================ */

/* Sticky index rail under the header */
.init-jump {
  position: sticky;
  top: var(--nav-h);
  z-index: 40;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--rule);
}

.init-jump-in {
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  padding: 12px 0;
}

.init-jump-in::-webkit-scrollbar {
  display: none
}

.init-jump a {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  padding: 9px 15px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink-soft);
  white-space: nowrap;
  transition: border-color .22s, color .22s, background .22s;
}

.init-jump a i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}

.init-jump a:hover {
  border-color: var(--c);
  color: var(--ink);
}

.init-jump a[aria-current="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

/* One initiative, full width, alternating side */
.init-full {
  padding-block: clamp(56px, 7vw, 92px);
  border-bottom: 1px solid var(--rule);
}

/* An anchored initiative has to clear the sticky header *and* the sticky jump
   rail underneath it. Scoped through .init-index so it outranks the generic
   `section[id]` offset in style.css, which only allows for the header. */
.init-index .init-full {
  scroll-margin-top: calc(var(--nav-h) + 76px);
}

.init-full:nth-child(even) {
  background: var(--mist)
}

.init-full-in {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.init-full:nth-child(even) .init-full-media {
  order: -1
}

.init-mark {
  display: flex;
  align-items: center;
  gap: 14px;
}

.init-mark .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 13px;
  color: var(--c-ink);
}

.init-mark .bar {
  height: 4px;
  flex: 1;
  max-width: 90px;
  border-radius: 99px;
  background: var(--c);
}

.init-full h2 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: .95;
  text-transform: uppercase;
  letter-spacing: -.028em;
  margin-top: 16px;
}

.init-full .descriptor {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: 14px;
  font-weight: 500;
}

.init-full .summary {
  font-size: clamp(17px, 1.8vw, 21px);
  line-height: 1.5;
  color: var(--ink);
  font-weight: 500;
  margin-top: 18px;
}

.init-full .detail {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-soft);
  margin-top: 16px;
  max-width: 60ch;
}

.init-record {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 16px;
  overflow: hidden;
  margin-top: 26px;
}

.init-record > div {
  background: var(--paper);
  padding: 17px 19px;
}

.init-full:nth-child(even) .init-record > div {
  background: var(--paper);
}

.init-record dt {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
  margin-bottom: 7px;
}

.init-record dd {
  font-size: 15px;
  line-height: 1.5;
}

.init-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 26px;
}

.init-full-media {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  position: sticky;
  top: calc(var(--nav-h) + 78px);
}

.init-full-media .ph:first-child {
  grid-column: 1/-1;
  aspect-ratio: 16/10;
}

.init-full-media .ph:not(:first-child) {
  aspect-ratio: 1
}

/* ============================================================
   WHY TGIF
   ============================================================ */

/* The handoff chain that breaks */
.chain {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(12px, 1.8vw, 22px);
  counter-reset: link;
}

.link {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  background: rgba(255, 255, 255, .04);
}

.link h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -.01em;
  margin-top: 12px;
}

.link p {
  font-size: 14.5px;
  line-height: 1.55;
  color: rgba(255, 255, 255, .68);
  margin-top: 10px;
}

.link .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .45);
}

/* The break between step 3 and step 4 */
.link.is-break {
  border-color: color-mix(in srgb, var(--brand-red) 60%, transparent);
  background: color-mix(in srgb, var(--brand-red) 12%, transparent);
}

.link.is-break .n {
  color: #FF8078
}

.chain-arrow {
  position: absolute;
  right: -14px;
  top: 50%;
  margin-top: -8px;
  width: 16px;
  height: 16px;
  color: rgba(255, 255, 255, .3);
}

/* Eight disciplines as a two-column ledger */
.disc {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
}

.disc article {
  background: var(--paper);
  padding: clamp(20px, 2.5vw, 28px);
  transition: background .25s;
}

.disc article:hover {
  background: var(--mist)
}

.disc .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .14em;
  color: var(--grey);
}

.disc h3 {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(17px, 1.9vw, 20px);
  text-transform: uppercase;
  letter-spacing: -.012em;
  margin-top: 10px;
}

.disc h3 i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex: none;
  background: var(--c);
}

.disc p {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 12px;
}

.disc .links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 16px;
}

.disc .links a {
  font-family: var(--mono);
  font-size: 9.5px;
  letter-spacing: .12em;
  text-transform: uppercase;
  padding: 6px 11px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  color: var(--ink-soft);
  transition: border-color .2s, color .2s;
}

.disc .links a:hover {
  border-color: var(--c);
  color: var(--c-ink);
}

/* Held vs handed off */
.versus {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(16px, 2.6vw, 34px);
}

.versus > div {
  border-radius: 20px;
  padding: clamp(22px, 3vw, 34px);
  border: 1px solid var(--rule);
}

.versus .is-loose {
  background: var(--paper)
}

.versus .is-tight {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
  box-shadow: 0 30px 70px -46px rgba(6, 37, 74, .9);
}

.versus h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(19px, 2.2vw, 24px);
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 12px;
}

.versus ul {
  list-style: none;
  margin-top: 20px;
}

.versus li {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 12px 0;
  border-top: 1px solid var(--rule);
  font-size: 15px;
  line-height: 1.5;
}

.versus .is-tight li {
  border-color: rgba(255, 255, 255, .15);
  color: rgba(255, 255, 255, .82);
}

.versus li svg {
  width: 17px;
  height: 17px;
  flex: none;
  margin-top: 2px;
}

.versus .is-loose li svg {
  color: var(--grey)
}

.versus .is-tight li svg {
  color: var(--brand-green)
}

.versus .is-tight .eyebrow {
  color: rgba(255, 255, 255, .5)
}

/* Institution chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border: 1px solid var(--rule);
  border-radius: 99px;
  background: var(--paper);
  font-size: 15px;
  font-weight: 500;
  transition: border-color .22s, transform .22s;
}

.chip i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
  background: var(--c, var(--accent-mid));
}

.chip:hover {
  border-color: var(--ink);
  transform: translateY(-2px);
}

/* What we publish — evidence ledger */
.ledger {
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
}

.ledger-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  gap: clamp(14px, 2.4vw, 32px);
  padding: clamp(18px, 2.4vw, 26px) clamp(20px, 2.6vw, 30px);
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
}

.ledger-row:last-child {
  border-bottom: 0
}

.ledger-row dt {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--grey);
}

.ledger-row dd {
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink-soft);
}

/* ============================================================
   LEADERSHIP
   ============================================================ */
.people-index {
  list-style: none;
  display: grid;
  gap: 1px;
  background: var(--rule);
  border-block: 1px solid var(--rule);
}

.people-index a {
  display: grid;
  grid-template-columns: 58px 1fr auto;
  align-items: center;
  gap: clamp(14px, 2.4vw, 28px);
  padding: clamp(16px, 2.2vw, 24px) 4px;
  background: var(--paper);
  transition: padding-left .25s, background .25s;
}

.people-index a:hover {
  background: var(--mist);
  padding-left: 16px;
}

.people-index .mark {
  font-family: var(--display);
  font-weight: 900;
  font-stretch: 116%;
  font-size: 26px;
  letter-spacing: -.03em;
  color: var(--c-mid);
}

.people-index .who strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 110%;
  font-size: clamp(19px, 2.3vw, 25px);
  line-height: 1.05;
  text-transform: uppercase;
  letter-spacing: -.018em;
}

.people-index .who span {
  display: block;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--c-ink);
  margin-top: 8px;
}

.people-index svg {
  width: 18px;
  height: 18px;
  color: var(--grey);
  transition: transform .25s;
}

.people-index a:hover svg {
  transform: translateX(5px);
  color: var(--c-ink);
}

/* Full profile */
.profile {
  padding-block: clamp(56px, 7vw, 92px);
  border-bottom: 1px solid var(--rule);
  scroll-margin-top: calc(var(--nav-h) + 16px);
}

.profile:nth-of-type(even) {
  background: var(--mist)
}

.profile-in {
  display: grid;
  grid-template-columns: .8fr 1.2fr;
  gap: clamp(28px, 4vw, 60px);
  align-items: start;
}

.profile:nth-of-type(even) .profile-portrait {
  order: 2
}

.profile-portrait {
  position: sticky;
  top: calc(var(--nav-h) + 24px);
  text-align: center;
}

/* The monogram from the homepage, taller here because it stands alone */
.profile-portrait .mono-portrait {
  aspect-ratio: 4/4.4;
  border-radius: 22px;
}

/* Capped rather than filling the column. The portrait column is .8fr, which
   comes out near 400px on a wide screen — more than two of the four supplied
   photographs actually contain (Chrystelle Tamegue is 320px across the crop,
   Patience Emeni 260px), so filling it would blow them up past their own
   resolution and show it. 360px keeps every portrait close to 1:1, and keeps
   all four the same size, which matters more here than any one being larger.
   Raise this once higher-resolution portraits arrive. */
.profile-portrait .portrait {
  max-width: 500px;
  border-radius: 22px;
  margin: 0 auto;
}

/* One line per title. Jules holds two — the foundation and JT Holdings Group
   — and stacking them keeps both readable at this size instead of running
   them together on one long uppercase line. */
.profile-role,
.profile-roles li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .17em;
  text-transform: uppercase;
  color: var(--c-ink);
  font-weight: 500;
}

.profile-roles {
  list-style: none;
  display: grid;
  gap: 7px;
  line-height: 1.45;
}

/* Focus areas, as the client writes them: "Health Information Technology |
   Digital Transformation | Strategic Advisory". The pipes are the list, so
   they are drawn as separators rather than typed into the text. */
.focus-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.focus-tags li {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--c-ink);
  background: color-mix(in srgb, var(--c) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
  border-radius: 99px;
  padding: 7px 13px;
}

.profile-quote {
  margin-top: 26px;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--c);
}

.profile-quote p {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(18px, 2vw, 23px);
  line-height: 1.3;
  letter-spacing: -.01em;
}

.profile-quote p::before {
  content: "“";
}

.profile-quote p::after {
  content: "”";
}

.profile-name {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 114%;
  font-size: clamp(30px, 4.4vw, 50px);
  line-height: .96;
  text-transform: uppercase;
  letter-spacing: -.028em;
  margin-top: 14px;
}

/* The biography is now several paragraphs, so the type steps down a little
   from the single-sentence standfirst it used to be — 20px over five
   paragraphs is a wall. The first paragraph keeps the larger size and carries
   the profile, the rest read as body copy under it. */
.profile-bio {
  margin-top: 22px;
  max-width: 58ch;
}

.profile-bio p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ink-soft);
}

.profile-bio p+p {
  margin-top: 15px;
}

.profile-bio p:first-child {
  font-size: clamp(17px, 1.8vw, 20px);
  line-height: 1.6;
  color: var(--ink);
}

.remit {
  list-style: none;
  margin-top: 30px;
  border-top: 2px solid var(--c);
}

.remit li {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--rule);
}

.remit .n {
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--c-ink);
  padding-top: 3px;
}

.remit strong {
  display: block;
  font-size: 16px;
  font-weight: 600;
}

.remit span {
  display: block;
  font-size: 15px;
  color: var(--ink-soft);
  margin-top: 5px;
}

/* Governance */
.gov {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(16px, 2.4vw, 28px);
}

.gov article {
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px;
  padding: clamp(20px, 2.8vw, 30px);
  background: rgba(255, 255, 255, .04);
}

.gov h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(18px, 2vw, 22px);
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 12px;
}

.gov p {
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, .72);
  margin-top: 12px;
}

.gov .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: rgba(255, 255, 255, .45);
}

/* ============================================================
   THE FIELD
   ============================================================ */

/* Strategy → environment, as three linked plates */
.plates {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 26px);
}

.plate {
  position: relative;
  border: 1px solid var(--rule);
  border-radius: 20px;
  padding: clamp(20px, 2.8vw, 30px);
  background: var(--paper);
  overflow: hidden;
}

.plate::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--c);
}

.plate .n {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .16em;
  color: var(--grey);
}

.plate h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: clamp(18px, 2.1vw, 23px);
  text-transform: uppercase;
  letter-spacing: -.015em;
  margin-top: 11px;
}

.plate p {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--ink-soft);
  margin-top: 12px;
}

/* Initiative → environment table */
.envs {
  border: 1px solid var(--rule);
  border-radius: 20px;
  overflow: hidden;
  background: var(--paper);
}

.env-row {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
  padding: clamp(16px, 2.2vw, 22px) clamp(18px, 2.4vw, 28px);
  border-bottom: 1px solid var(--rule);
  transition: background .25s;
}

.env-row:last-child {
  border-bottom: 0
}

.env-row:hover {
  background: var(--mist)
}

.env-name {
  display: flex;
  align-items: center;
  gap: 11px;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 108%;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -.012em;
}

.env-name i {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: none;
  background: var(--c);
}

.env-where {
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ink-soft);
}

/* Image-led field strips */
.strip {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-radius: 22px;
  overflow: hidden;
  border: 1px solid var(--rule);
  background: var(--paper);
}

.strip + .strip {
  margin-top: clamp(16px, 2.4vw, 26px)
}

.strip:nth-child(even) .strip-media {
  order: 2
}

.strip-media {
  position: relative;
  min-height: 300px;
}

.strip-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .8s cubic-bezier(.2, .7, .3, 1);
}

.strip:hover .strip-media img {
  transform: scale(1.04)
}

.strip-media .ph-wash {
  z-index: 2
}

.strip-body {
  padding: clamp(24px, 3.4vw, 44px);
  align-self: center;
}

.strip-body .n {
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--c-ink);
}

.strip-body h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 112%;
  font-size: clamp(23px, 3vw, 34px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: -.024em;
  margin-top: 12px;
}

.strip-body .where {
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 14px;
}

.strip-body .cap {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--grey);
}

.strip-body .cap::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--c);
}

.strip-link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 22px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--ink);
  border-bottom: 2px solid var(--c);
  padding-bottom: 5px;
  transition: gap .25s;
}

.strip-link:hover {
  gap: 15px
}

.strip-link svg {
  width: 15px;
  height: 15px;
}

/* Stakeholders */
.holders {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 18px;
  overflow: hidden;
}

.holders div {
  background: var(--ink);
  padding: clamp(18px, 2.4vw, 26px);
  transition: background .25s;
}

.holders div:hover {
  background: rgba(255, 255, 255, .05)
}

.holders strong {
  display: block;
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 15px;
  text-transform: uppercase;
  letter-spacing: -.005em;
}

.holders span {
  display: block;
  font-size: 14px;
  line-height: 1.5;
  color: rgba(255, 255, 255, .66);
  margin-top: 9px;
}

/* Coordination problems */
.frictions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(14px, 2.2vw, 24px);
  counter-reset: friction;
}

.friction {
  position: relative;
  padding: clamp(20px, 2.6vw, 28px);
  padding-top: 52px;
  border: 1px solid var(--rule);
  border-radius: 18px;
  background: var(--paper);
  transition: border-color .25s, transform .25s;
}

.friction::before {
  counter-increment: friction;
  content: counter(friction, decimal-leading-zero);
  position: absolute;
  top: clamp(20px, 2.6vw, 28px);
  left: clamp(20px, 2.6vw, 28px);
  font-family: var(--mono);
  font-weight: 700;
  font-size: 12px;
  color: var(--accent-ink);
}

.friction:hover {
  border-color: var(--ink);
  transform: translateY(-3px);
}

.friction h3 {
  font-family: var(--display);
  font-weight: 800;
  font-stretch: 106%;
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.friction p {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-soft);
  margin-top: 11px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1000px) {

  .phero-in,
  .sec-split,
  .cta-split,
  .path,
  .versus,
  .disc,
  .profile-in,
  .plates,
  .init-full-in,
  .strip {
    grid-template-columns: 1fr;
  }

  .path::before {
    display: none
  }

  .matrix,
  .frictions,
  .gov {
    grid-template-columns: 1fr 1fr;
  }

  .holders {
    grid-template-columns: 1fr 1fr
  }

  .rec-grid {
    grid-template-columns: 1fr 1fr
  }

  .chain {
    grid-template-columns: 1fr 1fr
  }

  .depts,
  .crossing {
    grid-template-columns: repeat(2, 1fr)
  }

  .init-full-media,
  .profile-portrait {
    position: static;
  }

  .init-full:nth-child(even) .init-full-media,
  .profile:nth-of-type(even) .profile-portrait,
  .strip:nth-child(even) .strip-media {
    order: 0
  }

  .strip-media {
    min-height: 260px;
    aspect-ratio: 16/9;
  }

  .profile-portrait .mono-portrait {
    aspect-ratio: 4/2.4
  }

  /* Once the profile is a single column the portrait would otherwise stretch
     to the full width of the page — a metre of face above the name. The
     monogram above flattens instead because it has no subject to protect; a
     photograph keeps its 4:5 and is simply held to a sensible size. */
  .profile-portrait .portrait {
    max-width: 320px;
  }

  .ledger-row,
  .env-row {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  /* The spine moves to the left edge so the cards can use full width */
  .life::before {
    left: 7px;
    margin-left: 0;
  }

  .life li,
  .life li:nth-child(even) {
    width: auto;
    margin-left: 38px;
  }

  .life li:nth-child(odd)::after,
  .life li:nth-child(even)::after {
    left: -46px;
    right: auto;
  }
}

@media (max-width:760px) {

  .matrix,
  .frictions,
  .gov,
  .holders,
  .rec-grid,
  .chain,
  .init-record,
  .init-full-media,
  .depts,
  .crossing {
    grid-template-columns: 1fr;
  }

  .init-jump {
    top: var(--nav-h)
  }

  .chain-arrow {
    display: none
  }

  .people-index a {
    grid-template-columns: 44px 1fr auto
  }

  .strip-body {
    padding: 24px 20px
  }
}

@media (prefers-reduced-motion:reduce) {

  .phero-rail span {
    animation: none
  }

  .life li,
  .friction,
  .chip,
  .strip-media img,
  .people-index a,
  .people-index svg,
  .cta-routes a,
  .cta-routes svg,
  .strip-link {
    transition: none
  }
}