/* P1 hub · shared pieces on top of the v4 system (../../../shared/cs/style.css) */

:root {
  --c-web: #1F7A4D;   /* P2 website + form  (board: green) */
  --c-tts: #6E56CF;   /* Talk to a Student  (board: purple) */
  --c-visit: #1D6FD7; /* Centre visit audit (board: blue) */
  --c-online: #363636;
  --c-centre: #DD8400;
}

/* Hero · two-image diptych: P2's green and P3+4's purple, one logo across */
.hero-media.duo { display: grid; grid-template-columns: 1fr 1fr; background: #2b2b33; }
.hero-media.duo .half { position: relative; overflow: hidden; }
.hero-media.duo .half img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.hero-media.duo .half.web img { object-position: 30% 60%; }
.hero-media.duo:hover .half img { transform: scale(1.03); }

/* Hero · single image (Figma 52-7553), plain cover fit like P3+4 */
.hero .hero-img { top: 0; height: 100%; object-fit: cover; object-position: 50% 50%; }

/* FigJam board under the funnel (same caption style as P3+4) */
.fj-cap { margin: 40px 0 12px; font: 500 14px/20px var(--sans); color: var(--muted); }
.fj-cap + .figjam { margin-top: 0; }
@media (max-width: 809.98px) { .fj-cap { margin-top: 32px; } }

/* Funnel section shell (shared by all four versions) */
.funnel-sec { padding: 108px 0; }
.col-l { display: inline-flex; align-items: center; gap: 8px; font: 600 12px/16px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.col-l::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .5; }

/* Project card (V1, V3 reuse it) */
.pcard {
  --c: var(--c-web);
  position: relative; display: flex; flex-direction: column; gap: 12px; text-decoration: none; color: inherit;
  background: var(--cream); border-radius: 16px; padding: 24px; border-top: 3px solid var(--c);
  transition: background .4s var(--ease);
}
.pcard:hover, .pcard:focus-visible { background: var(--mint); }
.pcard.tts { --c: var(--c-tts); }
.pcard.visit { --c: var(--c-visit); }
.pc-k { font: 500 12px/16px var(--sans); color: var(--muted); }
.pc-t { font: 500 20px/26px var(--sans); color: #000; letter-spacing: -0.01em; padding-right: 56px; }
.pc-n { font: 700 40px/48px var(--serif); color: var(--c); font-variant-numeric: tabular-nums; white-space: nowrap; }
.pc-nl { font-size: 13px; line-height: 18px; color: #000; margin-top: -10px; }
.pc-d { font-size: 14px; line-height: 22px; color: var(--muted); }
.pc-go { position: absolute; right: 20px; top: 20px; width: 44px; height: 44px; transition: transform .5s var(--ease); }
.pcard:hover .pc-go, .pcard:focus-visible .pc-go { transform: rotate(-45deg); }

/* Project card · Figma 51-7427: blurred colour image, white text, "View Case Study" */
.pcard2 {
  position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column;
  min-height: 350px; padding: 24px; border-radius: 16px; color: #fff; text-decoration: none; background: #3b3b44;
}
.pc2-bg { position: absolute; left: -12%; top: -12%; width: 124%; height: 124%; max-width: none; object-fit: cover; filter: blur(16px) saturate(1.08); z-index: -2; transition: transform .9s var(--ease); }
.pcard2::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0,0,0,.14), rgba(0,0,0,0) 45%, rgba(0,0,0,.16)); }
.pcard2:hover .pc2-bg, .pcard2:focus-visible .pc2-bg { transform: scale(1.06); }
.pc2-top { display: grid; gap: 8px; }
.pc2-t { font: 500 24px/32px var(--sans); letter-spacing: -0.01em; color: #fff; }
.pc2-d { font-size: 14px; line-height: 24px; color: rgba(255,255,255,.88); }
.pc2-stat { margin-top: 16px; }
.pc2-n { font: 700 48px/53px var(--serif); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pc2-l { font-size: 14px; line-height: 24px; color: rgba(255,255,255,.88); }
.pc2-cta { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 12px; font: 500 16px/19px var(--sans); }
.pc2-cta img { transition: transform .35s var(--ease); }
.pcard2:hover .pc2-cta img, .pcard2:focus-visible .pc2-cta img { transform: translateX(4px); }

/* Landing nodes (enrolments → split → revenue) */
.node {
  display: inline-flex; flex-direction: column; align-items: center; gap: 2px; padding: 14px 24px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line); text-align: center; min-width: 200px;
}
.node b { font: 700 36px/42px var(--serif); color: var(--ink); font-variant-numeric: tabular-nums; }
.node > span { font-size: 13px; line-height: 18px; color: var(--muted); }
.node.online b { color: var(--c-online); }
.node.centre b { color: var(--c-centre); }
.node.total { background: var(--green); border-color: var(--green); padding: 18px 32px; }
.node.total b { color: #fff; font-size: 44px; line-height: 52px; }
.node.total > span { color: rgba(255,255,255,.8); }

.fn-caveat { margin-top: 32px; font-size: 12px; line-height: 18px; color: var(--muted); max-width: 688px; }

/* Clean House footnote accordion */
.ch { margin-top: 40px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.ch-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 20px 0;
  background: none; border: 0; cursor: pointer; text-align: left; font: 500 16px/24px var(--sans); color: #000; letter-spacing: -0.01em;
}
.ch-btn em { font-style: normal; color: var(--muted); font-weight: 400; }
.ch-ic { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: transform .4s var(--ease), background .3s; }
.ch-ic::before { content: ""; width: 7px; height: 7px; border: solid #000; border-width: 0 1.5px 1.5px 0; transform: translateY(-2px) rotate(45deg); }
.ch-btn:hover .ch-ic { background: var(--cream); }
.ch.open .ch-ic { transform: rotate(180deg); }
.ch-panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .5s var(--ease); }
.ch.open .ch-panel { grid-template-rows: 1fr; }
.ch-in { min-height: 0; overflow: hidden; }
.ch-body { padding: 0 0 24px; display: grid; gap: 16px; max-width: 688px; }
.ch-body p { font-size: 14px; line-height: 22px; color: #000; }
.ch-stats { display: flex; flex-wrap: wrap; gap: 8px; }
.ch-stats span { padding: 8px 12px; border-radius: 999px; background: var(--cream); border: 1px solid var(--line); font: 500 13px/1 var(--sans); color: #000; }
.ch-stats b { color: var(--green); font-weight: 600; }
.ch-how { font-size: 12px !important; line-height: 18px !important; color: var(--muted) !important; max-width: 640px; }
.ch-how b { color: #000; font-weight: 600; }
.ch-still { padding-left: 4px; display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--green); font-weight: 500; }
.ch-still::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 4px rgba(31,122,77,.15); }

/* Student quote (dark band) */
.quote-sec .wrap { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 24px; }
.q-t { font: 700 40px/1.2 var(--serif); color: #fff; max-width: 860px; text-wrap: balance; }
.q-t em { font-style: normal; color: var(--lilac); }
.q-by { font-size: 14px; line-height: 20px; color: rgba(255,255,255,.61); }

/* Capabilities reuse .rcards; the proof line sits under the bullets */
.cap .rc-more ul { list-style: none; padding-left: 0; gap: 10px; }
.cap .rc-more li:first-child { font-weight: 500; }
.cap .rc-more li + li { color: var(--muted); }

/* Version switcher reuses .vswitch from the v4 stylesheet */

@media (max-width: 900px) {
  .q-t { font-size: 32px; }
}
@media (max-width: 640px) {
  .hero .hero-img { width: 100%; object-position: 50% 50%; }
  .hero-media.duo { grid-template-columns: 1fr; grid-template-rows: 1fr 1fr; }
  .funnel-sec { padding: 24px 0; }
  .pcard2 { min-height: 0; }
  .pc2-n { font-size: 40px; line-height: 48px; }
  .pc-n { font-size: 36px; line-height: 44px; }
  .node { min-width: 0; width: 100%; }
  .q-t { font-size: 28px; }
  .ch-btn { font-size: 15px; }
}

/* Capabilities: four equal cards in one row */
.rcards.cap { grid-template-columns: repeat(4, 1fr); gap: 24px; }
.rcards.cap .rc-title { font-size: 26px; line-height: 30px; }
@media (max-width: 1140px) { .rcards.cap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rcards.cap { grid-template-columns: 1fr; } }