/* ========================================================================== 
   Homepage — section-specific composition
   Each section gets its own structural idea so the page reads as a sequence
   rather than the same block repeated: an offset hero panel, an overlapping
   editorial split, a sticky visual stage, a reveal tile grid, an offset index.
   ========================================================================== */

/* Homepage rhythm ---------------------------------------------------------
   The global section token is intentionally generous for short inner pages,
   but on the homepage it was being paid twice at every boundary: once below
   the outgoing section and once above the next. A tighter page-only rhythm
   keeps the narrative connected without changing spacing anywhere else. */
body.home {
  --cp-home-section-y: clamp(4rem, 3.25rem + 1.5vw, 5rem);
  --cp-home-head-gap: clamp(2.75rem, 2.25rem + 1vw, 4rem);
}

body.home .cp-section { padding-block: var(--cp-home-section-y); }

body.home .cp-services__head,
body.home .cp-challenges__head,
body.home .cp-approach__head,
body.home .cp-why__head,
body.home .cp-partners__head {
  margin-bottom: var(--cp-home-head-gap);
}

body.home .cp-statement { --cp-statement-band: 5rem; }
body.home .cp-statement__inner {
  padding-top: var(--cp-home-section-y);
  padding-bottom: calc(var(--cp-home-section-y) + var(--cp-statement-band));
}

/* ---- Media slot ---------------------------------------------------------
   Renders either a supplied photograph or a generated visual. Both sit in the
   same box so swapping one for the other changes nothing about the layout. */
.cp-media {
  position: relative;
  aspect-ratio: var(--ratio, 4 / 5);
  overflow: hidden;
  border-radius: var(--cp-radius-lg);
  background: linear-gradient(160deg, var(--cp-navy-raised), var(--cp-navy-deep));
  isolation: isolate;
}
.cp-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 900ms var(--cp-ease-out);
}
/* Keeps client photography sitting inside the palette rather than fighting it. */
/* Two jobs here. A photograph used as a SUBJECT (intro, services stage) only
   needs enough wash to sit in the palette. One used as a GROUND (hero panel,
   statement, partners) has to drop right back behind type. The tint strength is
   a variable so each context sets its own. */
.cp-media__tint {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    200deg,
    rgba(11, 25, 53, var(--tint-a, 0.24)),
    rgba(11, 25, 53, var(--tint-b, 0.42))
  );
  mix-blend-mode: multiply;
  pointer-events: none;
}
.cp-visual { position: absolute; inset: 0; }
.cp-visual svg { width: 100%; height: 100%; display: block; }

.cp-media--tall  { --ratio: 4 / 5; }
.cp-media--wide  { --ratio: 16 / 10; }
.cp-media--frame { --ratio: 4 / 3; border-radius: var(--cp-radius-lg); }
.cp-media--panel { --ratio: auto; height: 100%; border-radius: var(--cp-radius-lg); }

/* ==========================================================================
   INTRO / ABOUT — image-led editorial split

   This treatment is scoped to the homepage introduction. The image leads,
   a compact progression badge overlaps its lower edge, and the copy is reduced
   to one positioning paragraph plus three scannable benefits.
   ========================================================================== */

.cp-intro {
  padding-block: clamp(4.5rem, 3.5rem + 4vw, 7.5rem);
}

.cp-intro__grid {
  display: grid;
  gap: clamp(4.5rem, 3.5rem + 4vw, 6rem);
  align-items: center;
}
@media (min-width: 62rem) {
  .cp-intro__grid {
    grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
    gap: clamp(5rem, 4rem + 3vw, 7.5rem);
  }
}

.cp-intro__visual {
  position: relative;
  min-width: 0;
  margin-right: clamp(0rem, 0.75rem + 1vw, 2rem);
}

.cp-intro__visual .cp-media {
  width: 100%;
  aspect-ratio: 0.96;
  border-radius: var(--cp-radius-sm);
  box-shadow: 0 18px 54px rgba(11, 25, 53, 0.11);
}
.cp-intro__visual .cp-media__img {
  height: 100%;
  object-position: 50% 50%;
}
.cp-intro__visual .cp-media__tint { --tint-a: 0.02; --tint-b: 0.12; }

.cp-intro__badge {
  position: absolute;
  z-index: 2;
  right: clamp(-2rem, -1rem - 0.7vw, -1.25rem);
  bottom: clamp(-2rem, -1.25rem - 0.8vw, -1.5rem);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: clamp(8.25rem, 7.5rem + 1vw, 9rem);
  padding: clamp(1.35rem, 1.05rem + 0.8vw, 1.85rem);
  background:
    linear-gradient(145deg, var(--cp-navy-raised), var(--cp-navy-deep));
  color: var(--cp-on-dark);
  box-shadow: 0 22px 50px rgba(11, 25, 53, 0.24);
}
.cp-intro__badge strong {
  margin-bottom: 0.65rem;
  font-family: var(--cp-font-display);
  font-size: var(--cp-step-2);
  font-weight: 400;
  line-height: 1;
  color: var(--cp-azure-bright);
}
.cp-intro__badge span {
  font-size: 0.7rem;
  line-height: 1.85;
  letter-spacing: var(--cp-track-wide);
  text-transform: uppercase;
  color: var(--cp-on-dark-soft);
}

.cp-intro__copy { min-width: 0; }
.cp-intro__copy .cp-eyebrow { margin-bottom: var(--cp-space-md); }

.cp-intro__title {
  max-width: 16ch;
  font-size: clamp(2.6rem, 1.9rem + 2.65vw, 4.35rem);
  line-height: 1.03;
  color: var(--cp-ink);
}
/* The reference gives the final word editorial emphasis. It remains part of
   the same h2 and reveal sentence for assistive technology. */
.cp-intro__title .cp-word:last-of-type .cp-word__inner {
  font-style: italic;
  font-weight: 300;
}

.cp-intro__lede {
  max-width: 38rem;
  margin-top: var(--cp-space-md);
  font-size: var(--cp-step-1);
  line-height: 1.55;
  color: var(--cp-ink-soft);
}

.cp-intro__points {
  display: grid;
  gap: 0.85rem;
  margin-top: var(--cp-space-md);
}
.cp-intro__points li {
  display: grid;
  grid-template-columns: 0.75rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
}
.cp-intro__points p {
  margin: 0;
  font-size: var(--cp-step--1);
  line-height: 1.55;
  color: var(--cp-ink-soft);
}
.cp-intro__dot {
  width: 0.55rem;
  height: 0.55rem;
  margin-top: 0.42em;
  border: 2px solid #d9edf9;
  border-radius: 50%;
  background: var(--cp-azure-vivid);
  box-shadow: 0 0 0 2px #eaf4fa;
}

.cp-intro__action { margin-top: var(--cp-space-md); }
.cp-intro__action .cp-link { color: var(--cp-ink); }

@media (max-width: 61.99rem) {
  .cp-intro__visual {
    width: min(100% - 1rem, 42rem);
    margin-right: 1rem;
  }
  .cp-intro__visual .cp-media { aspect-ratio: 16 / 10; }
  .cp-intro__badge { right: -1rem; bottom: -2rem; }
  .cp-intro__copy { max-width: 42rem; }
}

@media (max-width: 30rem) {
  .cp-intro__grid { gap: 4rem; }
  .cp-intro__visual .cp-media { aspect-ratio: 4 / 3; }
  .cp-intro__badge {
    right: -0.25rem;
    bottom: -1.5rem;
    width: 7.5rem;
    padding: 1.1rem;
  }
  .cp-intro__badge strong { font-size: var(--cp-step-1); }
  .cp-intro__title { font-size: clamp(2.35rem, 1.7rem + 3.2vw, 2.8rem); }
}

/* ==========================================================================
   SERVICES — expanding horizontal panels

   The one pattern in the project that is not a column-and-list. Expansion is
   CSS only: a panel opens on :hover or :focus-within, and the panel that is
   open by default steps back whenever another is engaged. No JavaScript, so it
   behaves identically with scripts blocked.
   ========================================================================== */

.cp-services {
  overflow: hidden;
  background:
    radial-gradient(75% 65% at 8% 14%, rgba(39, 145, 214, 0.34), transparent 64%),
    radial-gradient(62% 70% at 94% 84%, rgba(101, 184, 237, 0.22), transparent 68%),
    linear-gradient(145deg, #102e52 0%, #0d2342 48%, #12385d 100%);
}

/* Broad reflected light and a very restrained technical grid give the section
   depth without adding another reusable atmosphere component. */
.cp-services::before,
.cp-services::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
.cp-services::before {
  background: linear-gradient(118deg,
    transparent 4%,
    rgba(255, 255, 255, 0.055) 24%,
    rgba(101, 184, 237, 0.08) 35%,
    transparent 52%);
}
.cp-services::after {
  opacity: 0.16;
  background-image:
    linear-gradient(rgba(202, 228, 247, 0.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(202, 228, 247, 0.16) 1px, transparent 1px);
  background-size: 5rem 5rem;
  -webkit-mask-image: radial-gradient(ellipse at 50% 48%, #000 0%, transparent 72%);
          mask-image: radial-gradient(ellipse at 50% 48%, #000 0%, transparent 72%);
}
.cp-services > .cp-shell { position: relative; z-index: 1; }

.cp-services__head {
  max-width: 58rem;
  margin-bottom: var(--cp-space-xl);
}
.cp-services .cp-eyebrow { color: #8ed2fb; }
.cp-services__head .cp-h2 {
  max-width: 24ch;
  color: #fff;
  text-shadow: 0 14px 42px rgba(101, 184, 237, 0.14);
}

.cp-panels {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 0.35rem;
  border: 1px solid rgba(202, 228, 247, 0.22);
  border-radius: calc(var(--cp-radius-lg) + 0.35rem);
  background: rgba(14, 30, 62, 0.65);
  box-shadow:
    inset 0 1px rgba(255, 255, 255, 0.15),
    0 30px 80px rgba(3, 11, 27, 0.30);
}

@media (min-width: 62rem) {
  .cp-panels {
    flex-direction: row;
    height: clamp(26rem, 52vh, 34rem);
  }
}

.cp-panel {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(221, 239, 252, 0.16);
  border-radius: var(--cp-radius-lg);
  background: var(--cp-navy-raised);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.16);
  min-height: 15rem;
}

/* A fixed reflected edge supplies the glossy finish. It is beneath the copy,
   so the sheen never lowers text contrast or implies an extra interaction. */
.cp-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  border-radius: inherit;
  background:
    linear-gradient(125deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.055) 13%, transparent 31%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.10), transparent 18%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035);
}

@media (min-width: 62rem) {
  .cp-panel {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    /* The width change is the whole interaction, so it gets the longest ease. */
    transition: flex-grow var(--cp-dur-lg) var(--cp-ease-out);
  }

  /* Default open panel. */
  .cp-panel.is-open { flex-grow: 2.6; }

  /* Engage another panel and the default one steps back. The :not() matters —
     without it this rule would also fight the default panel when it is itself
     the one being hovered, and it outranks the plain :hover rule below. */
  .cp-panels:hover .cp-panel.is-open:not(:hover),
  .cp-panels:focus-within .cp-panel.is-open:not(:focus-within) { flex-grow: 1; }

  .cp-panel:hover,
  .cp-panel:focus-within { flex-grow: 2.6; }
}

.cp-panel__link {
  position: absolute;
  inset: 0;
  display: block;
  text-decoration: none;
  color: var(--cp-on-dark);
  outline-offset: -3px;
}
@media (max-width: 61.99rem) {
  .cp-panel__link { position: relative; inset: auto; min-height: 20rem; }
}

/* --- photographic ground --- */
.cp-panel__media { position: absolute; inset: 0; }
.cp-panel__media .cp-media {
  aspect-ratio: auto;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.cp-panel__media .cp-media__img {
  height: 100%;
  transform: scale(1.06);
  filter: saturate(0.96) contrast(1.04) brightness(1.06);
  transition: transform var(--cp-dur-xl) var(--cp-ease-out);
}
/* The photography stays recognisable even while a panel is collapsed. The
   legibility work now happens in the short floor gradient below, not through a
   uniform dark wash over the full image. */
.cp-panel__media .cp-media__tint { --tint-a: 0.12; --tint-b: 0.40; }

/* A short floor wash protects the titles while leaving the top two-thirds of
   each photograph bright and properly coloured. */
.cp-panel__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(6, 18, 39, 0.02) 0%,
    rgba(6, 18, 39, 0.05) 46%,
    rgba(6, 18, 39, 0.56) 72%,
    rgba(6, 18, 39, 0.92) 100%);
}

/* --- content --- */
.cp-panel__body {
  position: absolute;
  inset: auto 0 0 0;
  display: block;
  padding: var(--cp-space-md);
  z-index: 2;
  text-shadow: 0 2px 14px rgba(2, 9, 24, 0.52);
}
@media (max-width: 61.99rem) {
  /* Every detail is open in the stacked layout, which makes the copy block
     taller and pushes its title above the desktop floor gradient. A translucent
     glass shelf gives that taller block one reliable ground while leaving the
     upper half of the photograph open and bright. */
  .cp-panel__body {
    border-top: 1px solid rgba(255, 255, 255, 0.52);
    background: linear-gradient(135deg, rgba(248, 252, 255, 0.92), rgba(217, 236, 248, 0.84));
    -webkit-backdrop-filter: blur(10px) saturate(130%);
            backdrop-filter: blur(10px) saturate(130%);
    color: var(--cp-ink);
    text-shadow: none;
  }
}

.cp-panel__num {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: var(--cp-step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  color: #8ed2fb;
  margin-bottom: 0.55rem;
}

.cp-panel__title {
  display: block;
  font-family: var(--cp-font-display);
  /* Collapsed panels are narrow, so the title sits a step down and scales up
     as the panel opens — a long name like "Start-Up & Early Stage Advisory"
     otherwise stacks four deep in a 190px column. */
  font-size: var(--cp-step-1);
  line-height: 1.22;
  text-wrap: balance;
  transition: font-size var(--cp-dur-lg) var(--cp-ease-out);
}
@media (min-width: 62rem) {
  .cp-panel.is-open .cp-panel__title,
  .cp-panel:hover .cp-panel__title,
  .cp-panel:focus-within .cp-panel__title { font-size: var(--cp-step-2); }

  .cp-panels:hover .cp-panel.is-open:not(:hover) .cp-panel__title,
  .cp-panels:focus-within .cp-panel.is-open:not(:focus-within) .cp-panel__title { font-size: var(--cp-step-1); }
}
@media (max-width: 61.99rem) {
  .cp-panel__title { font-size: var(--cp-step-2); }
}

.cp-panel__detail {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows var(--cp-dur-lg) var(--cp-ease-out);
}
.cp-panel__detail-inner { overflow: hidden; }

.cp-panel__lede {
  display: block;
  padding-top: var(--cp-space-sm);
  max-width: 26rem;
  font-size: var(--cp-step--1);
  line-height: 1.65;
  color: rgba(243, 246, 251, 0.88);
}
.cp-panel__more {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  margin-top: var(--cp-space-sm);
  font-size: var(--cp-step--1);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8ed2fb;
}

/* Stacked layout has no hover to reveal with, so everything is simply open. */
@media (max-width: 61.99rem) {
  .cp-panel__detail { grid-template-rows: 1fr; }
  .cp-services .cp-panel__title { color: var(--cp-ink); }
  .cp-services .cp-panel__lede { color: #344b60; }
  .cp-services .cp-panel__num,
  .cp-services .cp-panel__more { color: #0b609f; }
}

@media (min-width: 62rem) {
  .cp-panel.is-open .cp-panel__detail,
  .cp-panel:hover .cp-panel__detail,
  .cp-panel:focus-within .cp-panel__detail { grid-template-rows: 1fr; }

  .cp-panels:hover .cp-panel.is-open:not(:hover) .cp-panel__detail,
  .cp-panels:focus-within .cp-panel.is-open:not(:focus-within) .cp-panel__detail { grid-template-rows: 0fr; }

  /* The open panel's photograph settles and lifts. */
  .cp-panel.is-open .cp-panel__media .cp-media__img,
  .cp-panel:hover .cp-panel__media .cp-media__img,
  .cp-panel:focus-within .cp-panel__media .cp-media__img { transform: none; }

  .cp-panel.is-open .cp-panel__media .cp-media__tint,
  .cp-panel:hover .cp-panel__media .cp-media__tint,
  .cp-panel:focus-within .cp-panel__media .cp-media__tint { --tint-a: 0.05; --tint-b: 0.24; }

  .cp-panels:hover .cp-panel.is-open:not(:hover) .cp-panel__media .cp-media__tint,
  .cp-panels:focus-within .cp-panel.is-open:not(:focus-within) .cp-panel__media .cp-media__tint { --tint-a: 0.16; --tint-b: 0.46; }

  .cp-panels:hover .cp-panel.is-open:not(:hover) .cp-panel__media .cp-media__img,
  .cp-panels:focus-within .cp-panel.is-open:not(:focus-within) .cp-panel__media .cp-media__img { transform: scale(1.06); }
}

.cp-services .cp-actions { margin-top: var(--cp-space-lg); }
.cp-services .cp-btn--ghost {
  --btn-bd: rgba(221, 239, 252, 0.34);
  background: rgba(14, 30, 62, 0.6);
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.12), 0 12px 32px rgba(3, 11, 27, 0.16);
}

@media (prefers-reduced-motion: reduce) {
  .cp-panel,
  .cp-panel__detail,
  .cp-panel__media .cp-media__img { transition: none; }
}

/* ========================================================================== 
   WHERE WE HELP — business signal navigator

   Six photographic selectors sit above one executive briefing. This is a
   navigation instrument rather than a numbered route or left/right diagnostic:
   concise signals make scanning fast, while the selected situation pairs a
   full-height image with its response in a focused dark briefing plane.
   ========================================================================== */

.cp-challenges {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 8%, rgba(101, 184, 237, 0.2), transparent 25rem),
    linear-gradient(145deg, #f8fbfc 0%, #edf5f7 55%, #e8f1f3 100%);
}

.cp-challenges::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.38;
  background-image: linear-gradient(115deg, transparent 0 49.9%, rgba(17, 120, 199, 0.08) 50%, transparent 50.1%);
  background-size: 12rem 12rem;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 70%);
          mask-image: linear-gradient(90deg, transparent, #000 70%);
}

.cp-challenges .cp-shell { position: relative; }

.cp-challenges__head {
  max-width: 56rem;
  margin-bottom: var(--cp-space-xl);
}

.cp-signal-map {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(11, 25, 53, 0.14);
  border-radius: clamp(1rem, 0.8rem + 0.7vw, 1.5rem);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 28px 72px rgba(11, 25, 53, 0.12);
}

.cp-signal-map__topline {
  display: flex;
  justify-content: space-between;
  gap: var(--cp-space-md);
  padding: 0.9rem clamp(1.25rem, 0.9rem + 1.5vw, 2.5rem);
  border-bottom: 1px solid var(--cp-rule);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--cp-track-wide);
  text-transform: uppercase;
  color: var(--cp-ink-faint);
  background: linear-gradient(90deg, #fff, #f1f7f9);
}

.cp-signal-map__topline span:first-child { color: var(--cp-azure); }

.cp-signal-map__selector {
  position: relative;
  padding: clamp(0.6rem, 0.4rem + 0.7vw, 1rem);
  background:
    radial-gradient(circle at 50% 100%, rgba(101, 184, 237, 0.1), transparent 24rem),
    rgba(255, 255, 255, 0.92);
}

.cp-signal-map__signals {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: clamp(0.35rem, 0.2rem + 0.45vw, 0.65rem);
}

.cp-signal {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(11, 25, 53, 0.1);
  border-radius: 0.75rem;
  color: var(--cp-ink-faint);
  text-decoration: none;
  background: #fff;
  box-shadow: 0 4px 14px rgba(11, 25, 53, 0.045);
  transition:
    border-color var(--cp-dur-sm) var(--cp-ease),
    box-shadow var(--cp-dur-md) var(--cp-ease),
    color var(--cp-dur-sm) var(--cp-ease),
    transform var(--cp-dur-md) var(--cp-ease-out);
}

.cp-signal__thumb {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #e7f0f4;
}

.cp-signal__thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, transparent 42%, rgba(11, 25, 53, 0.15));
}

.cp-signal__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0;
}

.cp-signal__media .cp-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.88) brightness(1.04);
  transform: scale(1.01);
  transition: filter 700ms var(--cp-ease-out), transform 900ms var(--cp-ease-out);
}

.cp-signal__media .cp-media__tint { display: none; }

.cp-signal__title {
  display: flex;
  align-items: center;
  min-height: 3.4rem;
  padding: 0.65rem 0.75rem;
  font-size: clamp(0.72rem, 0.68rem + 0.14vw, 0.8rem);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: 0.035em;
}

.cp-signal.is-active {
  border-color: var(--cp-azure-vivid);
  color: var(--cp-ink);
  box-shadow: 0 0 0 1px var(--cp-azure-vivid), 0 10px 24px rgba(11, 25, 53, 0.12);
  transform: translateY(-0.18rem);
}

.cp-signal.is-active::after {
  content: "";
  position: absolute;
  right: 0.7rem;
  bottom: 0.7rem;
  width: 0.38rem;
  height: 0.38rem;
  border-radius: 50%;
  background: var(--cp-azure-vivid);
  box-shadow: 0 0 0 0.25rem rgba(17, 120, 199, 0.1);
}

.cp-signal:focus-visible {
  outline: 2px solid var(--cp-focus);
  outline-offset: 0.2rem;
}

.cp-signal-briefings {
  position: relative;
  color: var(--cp-on-dark);
  background:
    radial-gradient(circle at 78% 18%, rgba(101, 184, 237, 0.18), transparent 20rem),
    linear-gradient(120deg, #09162f 0%, #102a50 100%);
}

.cp-signal-briefing {
  position: relative;
  min-height: clamp(24rem, 20rem + 8vw, 29rem);
  overflow: hidden;
}

.js .cp-signal-briefing { display: none; }
.js .cp-signal-briefing.is-active {
  display: grid;
  animation: cp-signal-briefing-in var(--cp-dur-lg) var(--cp-ease-out) both;
}

.cp-signal-briefing__visual {
  position: relative;
  min-height: 100%;
  overflow: hidden;
  background: #dfe9ee;
}

.cp-signal-briefing__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 38%),
    linear-gradient(90deg, transparent 70%, rgba(11, 25, 53, 0.18));
}

.cp-signal-briefing__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0;
}

.cp-signal-briefing__media .cp-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(0.9) contrast(0.98) brightness(1.03);
  transform: scale(1.01);
  transition: transform 1200ms var(--cp-ease-out);
}

.cp-signal-briefing__media .cp-media__tint { display: none; }

.cp-signal-briefing__response {
  position: relative;
  z-index: 1;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 1.2rem + 3vw, 4.5rem);
  background:
    radial-gradient(circle at 92% 12%, rgba(101, 184, 237, 0.16), transparent 18rem),
    linear-gradient(135deg, #0b1b39, #15365e);
}

.cp-signal-briefing__response::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cp-azure-bright), rgba(101, 184, 237, 0.08));
}

.cp-signal-briefing__label {
  display: block;
  margin-bottom: 0.8rem;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: var(--cp-track-wide);
  text-transform: uppercase;
  color: var(--cp-azure-bright);
}

.cp-signal-briefing h3 {
  max-width: 21ch;
  margin: 0;
  font-size: clamp(1.65rem, 1.4rem + 1vw, 2.45rem);
  font-weight: 400;
  line-height: 1.15;
  color: #fff;
}

.cp-signal-briefing__response-label {
  display: block;
  width: fit-content;
  margin-top: clamp(1.5rem, 1.1rem + 1vw, 2.25rem);
  padding-top: 0.8rem;
  border-top: 1px solid rgba(101, 184, 237, 0.5);
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: var(--cp-track-wide);
  text-transform: uppercase;
  color: var(--cp-on-dark-faint);
}

.cp-signal-briefing__response p {
  max-width: 36rem;
  margin: 0.75rem 0 0;
  font-family: var(--cp-font-display);
  font-size: clamp(1.2rem, 1.06rem + 0.55vw, 1.55rem);
  line-height: 1.42;
  color: rgba(243, 246, 251, 0.92);
}

.cp-signal-briefing__cta {
  margin-top: clamp(1.75rem, 1.35rem + 1vw, 2.5rem);
  color: #fff;
}

.cp-signal-briefing:focus { outline: none; }
.cp-signal-briefing:focus-visible { outline: 2px solid var(--cp-focus); outline-offset: -4px; }

.no-js .cp-signal-briefings { display: grid; }
.no-js .cp-signal-briefing + .cp-signal-briefing { border-top: 1px solid var(--cp-rule-dark); }

@keyframes cp-signal-briefing-in {
  from { opacity: 0; transform: translate3d(0, 0.8rem, 0); }
  to { opacity: 1; transform: none; }
}

@media (min-width: 48rem) {
  .cp-signal-briefing.is-active,
  .no-js .cp-signal-briefing {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
  }
}

@media (max-width: 61.99rem) {
  .cp-signal-map__signals { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--cp-rule); }
  .cp-signal {
    border: 0;
    border-radius: 0;
    background: #fff;
    box-shadow: none;
  }
  .cp-signal.is-active { z-index: 1; box-shadow: 0 0 0 2px var(--cp-azure-vivid) inset; transform: none; }
  .cp-signal-map__selector { padding: 1px; background: var(--cp-rule); }
}

@media (max-width: 47.99rem) {
  .cp-signal-briefing__visual { min-height: 16rem; }
  .cp-signal-briefing__response { min-height: 24rem; }
}

@media (max-width: 35rem) {
  .cp-signal-map__topline span:last-child { display: none; }
  .cp-signal-map__signals { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cp-signal__thumb { aspect-ratio: 16 / 9; }
  .cp-signal__title { min-height: 3rem; padding: 0.55rem 0.65rem; }
  .cp-signal-briefing { min-height: 0; }
  .cp-signal-briefing__visual { min-height: 14rem; }
  .cp-signal-briefing__response { min-height: 23rem; padding: 2rem 1.25rem 2.25rem; }
  .cp-signal-briefing h3 { font-size: var(--cp-step-2); }
  .cp-signal-briefing__response p { font-size: var(--cp-step-1); }
}

@media (hover: hover) and (pointer: fine) {
  .cp-signal:hover { border-color: rgba(17, 120, 199, 0.5); color: var(--cp-ink); transform: translateY(-0.18rem); }
  .cp-signal:hover .cp-signal__media .cp-media__img { filter: saturate(0.98) brightness(1.06); transform: scale(1.06); }
  .cp-signal-briefing:hover .cp-signal-briefing__media .cp-media__img { transform: scale(1.035); }
}

@media (prefers-reduced-motion: reduce) {
  .js .cp-signal-briefing.is-active { animation: none; }
  .cp-signal,
  .cp-signal__media .cp-media__img,
  .cp-signal-briefing__media .cp-media__img { transition: none; }
}

/* ==========================================================================
   HOW WE WORK — cross-fading stage beside the scroll-drawn spine
   ========================================================================== */

.cp-approach__head { max-width: 46rem; margin-bottom: var(--cp-space-xl); }

.cp-approach__layout { display: grid; gap: var(--cp-space-xl); }

/* Declared before the media queries: it was previously after them, so it
   overrode `position: sticky` back to `relative` — and because `top` was still
   set, relative positioning then shunted the stage 154px down the page. */
.cp-approach__stage { position: relative; }

@media (min-width: 62rem) {
  .cp-approach__layout {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: var(--cp-space-2xl);
    align-items: start;
  }
  .cp-approach__stage {
    position: sticky;
    top: calc(var(--cp-header-h) + var(--cp-space-lg));
    aspect-ratio: 4 / 3;
  }
}
@media (max-width: 61.99rem) {
  /* One representative visual rather than a stage that cannot be scrolled past. */
  .cp-approach__stage { max-width: 26rem; }
  .cp-approach__frame:not(.is-active) { display: none; }
}

.cp-approach__frame {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--cp-dur-md) var(--cp-ease);
  pointer-events: none;
}
.cp-approach__frame.is-active { opacity: 1; }
@media (max-width: 61.99rem) {
  .cp-approach__frame { position: relative; inset: auto; opacity: 1; }
}

.cp-media--stage {
  --ratio: 4 / 3;
  height: 100%;
  border: 1px solid rgba(218, 236, 249, 0.36);
  background: #dce8ef;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.48) inset,
    0 28px 64px rgba(4, 18, 40, 0.28);
}
.cp-approach__frame .cp-media { height: 100%; }
.cp-media--stage .cp-media__img {
  filter: saturate(0.94) contrast(1.02) brightness(1.05);
}
.cp-media--stage .cp-media__tint { display: none; }

/* ========================================================================== 
   WHY COREPATH — image-led editorial mosaic

   Four commitments live inside one framed composition. Alternating clear
   photography and copy creates a restrained checkerboard at desktop widths;
   the frame becomes a readable image-first sequence on smaller screens.
   ========================================================================== */

.cp-why {
  overflow: hidden;
  background:
    radial-gradient(circle at 92% 12%, rgba(101, 184, 237, 0.18), transparent 26rem),
    linear-gradient(150deg, #f8fbfc 0%, #fff 48%, #edf5f7 100%);
}

.cp-why::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, 0.72), transparent 38%);
}

.cp-why .cp-shell { position: relative; }

.cp-why__head {
  max-width: 60rem;
  margin-bottom: var(--cp-space-xl);
}

.cp-why__statement { max-width: 20ch; }

.cp-why-stories {
  display: grid;
  margin: 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid rgba(11, 25, 53, 0.14);
  border-radius: clamp(0.9rem, 0.72rem + 0.5vw, 1.25rem);
  background: rgba(11, 25, 53, 0.12);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.96) inset,
    0 28px 72px rgba(11, 25, 53, 0.11);
  list-style: none;
}

.cp-why-story {
  position: relative;
  display: grid;
  min-width: 0;
  background: var(--cp-paper);
  isolation: isolate;
  transition:
    box-shadow var(--cp-dur-md) var(--cp-ease-out),
    transform var(--cp-dur-md) var(--cp-ease-out);
}

.cp-why-story__visual {
  position: relative;
  min-height: clamp(13rem, 48vw, 19rem);
  overflow: hidden;
  background: #e9f1f5;
}

.cp-why-story__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.18), transparent 42%),
    linear-gradient(0deg, rgba(11, 25, 53, 0.05), transparent 38%);
  transition: opacity var(--cp-dur-md) var(--cp-ease);
}

.cp-why-story__visual::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -35%;
  bottom: -35%;
  left: -48%;
  width: 28%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.34), transparent);
  opacity: 0;
  transform: translate3d(-180%, 0, 0) rotate(10deg);
}

.cp-why-story__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto !important;
  border-radius: 0;
}

.cp-why-story__media .cp-media__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 1;
  filter: saturate(0.9) contrast(0.97) brightness(1.05);
  transform: scale(1.001);
  transition:
    filter 850ms var(--cp-ease-out),
    transform 1100ms var(--cp-ease-out);
}

.cp-why-story__media .cp-media__tint { display: none; }
.cp-why-story:nth-child(2) .cp-media__img { object-position: 50% 56%; }
.cp-why-story:nth-child(3) .cp-media__img { object-position: 50% 38%; }
.cp-why-story:nth-child(4) .cp-media__img { object-position: 50% 50%; }

.cp-why-story__copy {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 17rem;
  padding: clamp(1.75rem, 1.2rem + 2vw, 3rem);
  background:
    radial-gradient(circle at 100% 0%, rgba(101, 184, 237, 0.12), transparent 15rem),
    linear-gradient(145deg, #fff 0%, #f8fbfc 100%);
  transition: background-color var(--cp-dur-md) var(--cp-ease);
}

.cp-why-story__copy::after {
  content: "";
  position: absolute;
  top: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  bottom: clamp(1.5rem, 1rem + 1vw, 2.25rem);
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, var(--cp-azure-bright), var(--cp-azure-vivid));
  opacity: 0;
  transform: scaleY(0.2);
  transform-origin: center;
  transition:
    opacity var(--cp-dur-md) var(--cp-ease),
    transform var(--cp-dur-md) var(--cp-ease-out);
}

.cp-why-story__meta {
  display: flex;
  justify-content: space-between;
  gap: var(--cp-space-md);
  margin-bottom: clamp(1.5rem, 1rem + 1vw, 2rem);
  color: var(--cp-azure);
  font-size: 0.64rem;
  font-weight: 650;
  letter-spacing: var(--cp-track-wide);
  line-height: 1.4;
  text-transform: uppercase;
}

.cp-why-story__meta span:first-child {
  display: inline-grid;
  place-items: center;
  width: 1.8rem;
  height: 1.8rem;
  margin-top: -0.55rem;
  border: 1px solid rgba(17, 120, 199, 0.24);
  border-radius: 50%;
  font-variant-numeric: tabular-nums;
  color: var(--cp-azure-vivid);
  background: rgba(255, 255, 255, 0.72);
  transition:
    color var(--cp-dur-sm) var(--cp-ease),
    background-color var(--cp-dur-sm) var(--cp-ease),
    border-color var(--cp-dur-sm) var(--cp-ease);
}

.cp-why-story h3 {
  max-width: 16ch;
  margin: 0;
  font-size: var(--cp-step-2);
  line-height: 1.12;
  color: var(--cp-ink);
  transition: transform var(--cp-dur-md) var(--cp-ease-out);
}

.cp-why-story p {
  max-width: 42ch;
  margin: var(--cp-space-sm) 0 0;
  font-size: var(--cp-step--1);
  line-height: 1.7;
  color: var(--cp-ink-soft);
}

.cp-why-story__rule {
  display: block;
  width: 3rem;
  height: 2px;
  margin-top: clamp(1.75rem, 1.2rem + 1vw, 2.25rem);
  background: linear-gradient(90deg, var(--cp-azure-vivid), var(--cp-azure-bright));
  transform-origin: left center;
  transition: width var(--cp-dur-md) var(--cp-ease-out);
}

.js .cp-why-stories[data-reveal-group] > .cp-why-story {
  transition:
    opacity var(--cp-dur-md) var(--cp-ease-out),
    transform var(--cp-dur-md) var(--cp-ease-out),
    box-shadow var(--cp-dur-md) var(--cp-ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .cp-why-story:hover {
    z-index: 2;
    box-shadow:
      0 0 0 1px rgba(17, 120, 199, 0.22) inset,
      0 18px 42px rgba(11, 25, 53, 0.12);
  }

  .cp-why-story:hover .cp-why-story__media .cp-media__img {
    filter: saturate(0.96) contrast(1) brightness(1.07);
    transform: scale(1.045);
  }

  .cp-why-story:hover .cp-why-story__visual::after { opacity: 0.55; }

  .cp-why-story:hover .cp-why-story__visual::before {
    opacity: 1;
    transform: translate3d(620%, 0, 0) rotate(10deg);
    transition:
      opacity 180ms var(--cp-ease),
      transform 950ms var(--cp-ease-out);
  }

  .cp-why-story:hover .cp-why-story__copy::after {
    opacity: 1;
    transform: scaleY(1);
  }

  .cp-why-story:hover .cp-why-story__meta span:first-child {
    border-color: var(--cp-azure-vivid);
    color: #fff;
    background: var(--cp-azure-vivid);
  }

  .cp-why-story:hover h3 { transform: translateX(0.28rem); }
  .cp-why-story:hover .cp-why-story__rule { width: 5rem; }
}

@media (min-width: 68rem) {
  .cp-why-stories {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1px;
  }

  .cp-why-story {
    grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr);
    min-height: 21rem;
  }

  .cp-why-story:nth-child(2),
  .cp-why-story:nth-child(3) {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }

  .cp-why-story:nth-child(2) .cp-why-story__visual,
  .cp-why-story:nth-child(3) .cp-why-story__visual { order: 2; }

  .cp-why-story:nth-child(2) .cp-why-story__copy,
  .cp-why-story:nth-child(3) .cp-why-story__copy { order: 1; }

  .cp-why-story__visual,
  .cp-why-story__copy {
    min-height: 21rem;
  }
}

@media (min-width: 48rem) and (max-width: 67.99rem) {
  .cp-why-story {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    min-height: 19rem;
    border-bottom: 1px solid rgba(11, 25, 53, 0.12);
  }

  .cp-why-story:last-child { border-bottom: 0; }
  .cp-why-story:nth-child(even) .cp-why-story__visual { order: 2; }
  .cp-why-story:nth-child(even) .cp-why-story__copy { order: 1; }

  .cp-why-story__visual,
  .cp-why-story__copy { min-height: 19rem; }
}

@media (max-width: 47.99rem) {
  .cp-why-stories { gap: 1px; }
  .cp-why-story__copy { min-height: 0; }
}

@media (max-width: 30rem) {
  .cp-why-story__visual { min-height: 13rem; }
  .cp-why-story__copy { padding: 1.5rem 1.25rem 1.75rem; }
  .cp-why-story__meta { margin-bottom: 1.25rem; }
  .cp-why-story h3 { font-size: var(--cp-step-1); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-why-story,
  .cp-why-story__media .cp-media__img,
  .cp-why-story__copy::after,
  .cp-why-story__meta span:first-child,
  .cp-why-story h3,
  .cp-why-story__rule {
    transition: none !important;
  }

  .cp-why-story__visual::before { display: none; }
  .cp-why-story__media .cp-media__img,
  .cp-why-story:hover .cp-why-story__media .cp-media__img { transform: none !important; }
  .cp-why-story:hover h3 { transform: none; }
}

/* ==========================================================================
   PRINCIPLES — hairline-ruled list

   A quiet list, not a display-type set piece: numeral and value on the left,
   what it means in practice on the right, one hairline between each. The words
   sit at step-2 so they stay clearly subordinate to the section's h2 (step-4) —
   at display scale four abstract nouns read as decoration rather than content.
   ========================================================================== */

.cp-values__head { max-width: 44rem; margin-bottom: var(--cp-space-xl); }

.cp-creed { display: grid; }

.cp-creed__row {
  display: grid;
  gap: var(--cp-space-xs);
  padding-block: var(--cp-space-md);
  border-top: 1px solid var(--cp-rule);
}
.cp-creed__row:last-child { border-bottom: 1px solid var(--cp-rule); }

@media (min-width: 48rem) {
  .cp-creed__row {
    grid-template-columns: minmax(0, 17rem) minmax(0, 1fr);
    gap: var(--cp-space-lg);
    /* Baseline, not centred. The word and the note are now close enough in size
       that their first lines should sit on one line together. */
    align-items: baseline;
  }
}

/* Numeral beside the word rather than in its own column, so the pairing holds
   at every width without a second grid. */
.cp-creed__term {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}

.cp-creed__index {
  font-size: var(--cp-step--1);
  font-weight: 500;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--cp-azure);
  flex: none;
}

.cp-creed__word {
  margin: 0;
  min-width: 0;
  font-family: var(--cp-font-display);
  font-size: var(--cp-step-2);
  font-weight: 400;
  line-height: var(--cp-lh-snug);
  color: var(--cp-ink);
}

.cp-creed__note {
  margin: 0;
  max-width: 54ch;
  font-size: var(--cp-step-0);
  line-height: 1.7;
  color: var(--cp-ink-soft);
}

/* ==========================================================================
   PARTNERS — alliance map
   A dedicated composition used only here: Corepath is the dark advisory anchor,
   a restrained route diagram branches from it, and both partner records share
   one light roster. This is intentionally not a reusable card grid.
   ========================================================================== */

.cp-partners__head {
  max-width: 64rem;
  margin-bottom: var(--cp-space-xl);
}
.cp-partners__intro {
  max-width: 58rem;
  margin: var(--cp-space-md) 0 0;
  font-size: var(--cp-step-0);
  line-height: 1.75;
}

.cp-alliance {
  position: relative;
  display: grid;
  overflow: hidden;
  border: 1px solid rgba(11, 25, 53, 0.14);
  border-radius: var(--cp-radius-lg);
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.95) inset,
    0 30px 80px rgba(11, 25, 53, 0.14);
  isolation: isolate;
}

.cp-alliance::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.5) inset;
  pointer-events: none;
}

@media (min-width: 62rem) {
  .cp-alliance {
    grid-template-columns: minmax(20rem, 0.86fr) clamp(6.5rem, 8vw, 9rem) minmax(0, 1.45fr);
    min-height: 35rem;
  }
}

/* --- the anchor --- */
.cp-alliance__anchor {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: var(--cp-space-md);
  min-height: 21rem;
  padding: clamp(2rem, 1.35rem + 3vw, 4.5rem);
  overflow: hidden;
  background:
    radial-gradient(100% 80% at 0% 15%, rgba(17, 120, 199, 0.34), transparent 64%),
    linear-gradient(145deg, var(--cp-navy-raised), var(--cp-navy-deep));
  color: var(--cp-on-dark);
}

.cp-alliance__anchor::before {
  content: "";
  position: absolute;
  z-index: 0;
  top: -30%;
  bottom: -30%;
  left: -45%;
  width: 34%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  transform: skewX(-15deg);
  pointer-events: none;
}

.cp-alliance__anchor::after {
  content: "";
  position: absolute;
  right: -4.5rem;
  bottom: -4.5rem;
  width: 14rem;
  height: 14rem;
  border: 1px solid rgba(101, 184, 237, 0.16);
  border-radius: 50%;
  box-shadow:
    0 0 0 2.75rem rgba(101, 184, 237, 0.05),
    0 0 0 5.5rem rgba(101, 184, 237, 0.025);
  pointer-events: none;
}

.cp-alliance__anchor-label,
.cp-alliance__anchor-role,
.cp-alliance__role {
  font-size: var(--cp-step--1);
  letter-spacing: var(--cp-track-wide);
  text-transform: uppercase;
}
.cp-alliance__anchor-label {
  position: absolute;
  top: clamp(2rem, 1.35rem + 3vw, 4.5rem);
  left: clamp(2rem, 1.35rem + 3vw, 4.5rem);
  color: var(--cp-azure-bright);
}
.cp-alliance__logo {
  position: relative;
  z-index: 1;
  width: min(100%, 16rem);
  height: auto;
}
.cp-alliance__anchor-role {
  position: relative;
  z-index: 1;
  max-width: 23ch;
  color: var(--cp-on-dark-soft);
}
.cp-alliance__anchor-mark {
  position: absolute;
  z-index: 2;
  top: 50%;
  right: 0;
  width: 0.75rem;
  height: 0.75rem;
  border: 2px solid var(--cp-navy);
  border-radius: 50%;
  background: var(--cp-azure-bright);
  transform: translate(50%, -50%);
}

.cp-alliance__anchor-mark::after {
  content: "";
  position: absolute;
  inset: -0.45rem;
  border: 1px solid rgba(101, 184, 237, 0.58);
  border-radius: inherit;
  opacity: 0;
}

/* --- route diagram --- */
.cp-alliance__routes {
  display: none;
  position: relative;
  background:
    linear-gradient(180deg, rgba(238, 243, 244, 0.65), rgba(255, 255, 255, 0));
}
@media (min-width: 62rem) {
  .cp-alliance__routes { display: block; }
}
.cp-alliance__routes svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  fill: none;
  stroke: rgba(15, 109, 180, 0.48);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.cp-alliance__routes path {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.cp-alliance__routes circle {
  fill: var(--cp-azure-vivid);
  stroke: var(--cp-paper);
  stroke-width: 2;
  transform-box: fill-box;
  transform-origin: center;
}

/* --- partner roster --- */
.cp-alliance__list {
  display: grid;
  background: var(--cp-paper);
}
.cp-alliance__list > li { min-width: 0; }
.cp-alliance__list > li + li { border-top: 1px solid var(--cp-rule); }

.cp-alliance__partner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "mark index"
    "role index"
    "blurb blurb"
    "go go";
  align-content: center;
  column-gap: var(--cp-space-md);
  height: 100%;
  padding: clamp(2rem, 1.45rem + 2.3vw, 3.75rem);
  color: inherit;
  text-decoration: none;
}

.cp-alliance__partner::before {
  content: "";
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: 2px;
  background: linear-gradient(180deg, transparent, var(--cp-azure-vivid), transparent);
  transform: scaleY(0);
  transform-origin: center;
  transition: transform var(--cp-dur-md) var(--cp-ease-out);
}

a.cp-alliance__partner {
  transition:
    background-color var(--cp-dur-sm) var(--cp-ease),
    box-shadow var(--cp-dur-md) var(--cp-ease-out);
}
@media (hover: hover) {
  a.cp-alliance__partner:hover {
    background:
      radial-gradient(circle at 94% 12%, rgba(101, 184, 237, 0.12), transparent 12rem),
      rgba(17, 120, 199, 0.045);
    box-shadow: 0 18px 44px rgba(11, 25, 53, 0.075) inset;
  }
  a.cp-alliance__partner:hover::before { transform: scaleY(1); }
  a.cp-alliance__partner:hover .cp-alliance__mark { transform: translateX(0.3rem); }
}
a.cp-alliance__partner:focus-visible {
  outline-offset: -4px;
  background: rgba(17, 120, 199, 0.045);
}
a.cp-alliance__partner:focus-visible::before { transform: scaleY(1); }

.cp-alliance__index {
  grid-area: index;
  align-self: start;
  padding-top: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  font-variant-numeric: tabular-nums;
  color: var(--cp-ink-faint);
}

/* Logos keep their own proportions and clearspace — never stretched. */
.cp-alliance__mark {
  grid-area: mark;
  display: flex;
  align-items: center;
  min-width: 0;
  min-height: 4rem;
  transition: transform var(--cp-dur-md) var(--cp-ease-out);
}
.cp-alliance__mark img {
  display: block;
  width: auto;
  height: auto;
  max-width: min(100%, 18rem);
  max-height: 4rem;
  object-fit: contain;
  object-position: left center;
}
.cp-alliance__name {
  font-family: var(--cp-font-display);
  font-size: var(--cp-step-4);
  line-height: 1.1;
  color: var(--cp-ink);
}

.cp-alliance__role {
  grid-area: role;
  display: block;
  margin-top: 0.45rem;
  color: var(--cp-azure);
}

.cp-alliance__blurb {
  grid-area: blurb;
  display: block;
  max-width: 55ch;
  margin-top: var(--cp-space-md);
  font-size: var(--cp-step-0);
  line-height: 1.7;
  color: var(--cp-ink-soft);
}

.cp-alliance__go {
  grid-area: go;
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 0.5em;
  margin-top: var(--cp-space-md);
  padding-bottom: 0.25rem;
  border-bottom: 1px solid currentColor;
  font-size: var(--cp-step--1);
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--cp-azure);
}
a.cp-alliance__partner:hover .cp-alliance__go svg,
a.cp-alliance__partner:focus-visible .cp-alliance__go svg { transform: translate3d(3px, -3px, 0); }
.cp-alliance__go svg { transition: transform var(--cp-dur-sm) var(--cp-ease-out); }

/* The alliance assembles whenever it re-enters the viewport: the dedicated
   observer removes `is-alliance-active` after it leaves, resetting the route,
   records and light accents off-screen so the next mouse-wheel pass can replay
   the relationship. It still behaves as a static composition while visible. */
.js .cp-alliance[data-alliance-motion]:not(.is-alliance-active) .cp-alliance__routes path {
  stroke-dashoffset: 1;
}
.js .cp-alliance[data-alliance-motion]:not(.is-alliance-active) .cp-alliance__routes circle {
  opacity: 0;
  transform: scale(0.25);
}
.js .cp-alliance[data-alliance-motion]:not(.is-alliance-active) .cp-alliance__partner {
  opacity: 0;
  transform: translateX(1.25rem);
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__routes path {
  transition: stroke-dashoffset 950ms var(--cp-ease-out) 260ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__routes path:nth-child(2) {
  transition-delay: 430ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__routes circle {
  opacity: 1;
  transform: scale(1);
  transition: opacity 260ms var(--cp-ease) 610ms, transform 600ms var(--cp-ease-out) 610ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__list > li:first-child .cp-alliance__partner {
  --cp-partner-enter-delay: 640ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__list > li:nth-child(2) .cp-alliance__partner {
  --cp-partner-enter-delay: 790ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__partner {
  opacity: 1;
  transform: none;
  transition-property: opacity, transform, background-color, box-shadow;
  transition-duration: 650ms, 650ms, var(--cp-dur-sm), var(--cp-dur-md);
  transition-timing-function: var(--cp-ease-out), var(--cp-ease-out), var(--cp-ease), var(--cp-ease-out);
  transition-delay: var(--cp-partner-enter-delay, 0ms), var(--cp-partner-enter-delay, 0ms), 0ms, 0ms;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__anchor::before {
  animation: cp-alliance-sheen 1200ms var(--cp-ease-out) 180ms both;
}
.js .cp-alliance[data-alliance-motion].is-alliance-active .cp-alliance__anchor-mark::after {
  animation: cp-alliance-pulse 1700ms var(--cp-ease-out) 620ms 2;
}

@keyframes cp-alliance-sheen {
  from { transform: translateX(0) skewX(-15deg); }
  to { transform: translateX(520%) skewX(-15deg); }
}

@keyframes cp-alliance-pulse {
  0% { opacity: 0; transform: scale(0.55); }
  32% { opacity: 0.65; }
  100% { opacity: 0; transform: scale(1.7); }
}

@media (max-width: 61.99rem) {
  .cp-alliance__anchor-mark {
    top: auto;
    right: 50%;
    bottom: 0;
    transform: translate(50%, 50%);
  }
  .cp-alliance__list { position: relative; }
  .cp-alliance__list::before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    left: 50%;
    width: 1px;
    height: 1.5rem;
    background: var(--cp-azure);
    transform: translateX(-50%);
  }
  .cp-alliance__partner { padding-top: clamp(2.5rem, 2rem + 2vw, 3.5rem); }
}

@media (prefers-reduced-motion: reduce) {
  .cp-alliance__anchor::before,
  .cp-alliance__anchor-mark::after { animation: none !important; }
  .cp-alliance__routes path { stroke-dashoffset: 0 !important; }
  .cp-alliance__routes circle,
  .cp-alliance__partner {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   PHOTOGRAPHIC GROUNDS

   Shared by the hero, every page header, the statement and the footer. Do not fold this into a section block: it
   was once positioned between the Principles and Partners blocks and a rewrite
   of Principles took it out with them, which left every background photograph
   rendering full-size and fully opaque in the flow.
   ========================================================================== */

.cp-media--bleed {
  /* corepath_media() writes style="--ratio:…" inline, and an inline custom
     property beats a class rule — so overriding --ratio does nothing here. The
     aspect-ratio itself has to be cleared or the element stays locked to the
     slot's ratio and covers only part of its container. */
  aspect-ratio: auto;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  background: none;
}
.cp-media--bleed .cp-media__img { height: 100%; }

/* Partners used to share this block. It now sits on a light ground with no
   photograph, so only the statement is left here — see the ground note in
   sections.css. Removing the rules with the markup, because a stylesheet rule
   naming a class no longer emitted is the one thing audit-classes.py cannot
   see (tools/README.md §3). */
.cp-statement__bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  /* The statement's light band is painted by ::after at z-index -1, so the
     photograph is pushed a layer further back to sit beneath it. */
  z-index: -2;
  opacity: 0.20;
}
.cp-statement__bg .cp-media__img { opacity: 0.9; }
.cp-statement__bg .cp-media__tint { mix-blend-mode: normal; }