/* Project Support: offer cards with GOAL / OUTCOME notes, and "Example of results" bars. */

.pg-project-support[id], .ps-anchor { scroll-margin-top: var(--header-h); }
.ps-grey { background: #f1f4f7; }
.ps-title { margin-bottom: 24px; font-family: var(--font-head); font-size: clamp(28px, 3vw, 34px); letter-spacing: -.01em; }
.ps-title-next { margin-top: 40px; }

.ps-overview { padding: 32px; border: 1px solid var(--line); box-shadow: none; font-size: 15px; color: #334155; }
.ps-overview p:last-child { margin: 0; }

.ps-cards { gap: 32px; }
.ps-card { display: flex; flex-direction: column; padding: 34px; border: 1px solid var(--line); }
.ps-card h3 { margin-bottom: 20px; font-family: var(--font-head); font-size: 26px; font-weight: 600; line-height: 1.3; }
.ps-card > p { font-size: 16px; line-height: 1.65; }
.ps-points { display: grid; gap: 18px; margin: 16px 0 0; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ps-points dt { display: flex; align-items: center; gap: 12px; font-size: 13px; font-weight: 600; letter-spacing: .05em; color: var(--navy-text); }
.ps-points dt .icon { font-size: 17px; }
.ps-points dd { margin: 6px 0 0; font-size: 14px; line-height: 1.6; }
.ps-links { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-top: auto; padding-top: 20px; }
.ps-links .btn { padding: 14px 32px; font-size: 16px; font-weight: 700; }

.ps-text { font-size: 17px; line-height: 1.7; }
.ps-text ul { margin: 0 0 1em; padding-left: 2.4em; list-style: disc; }
.ps-text strong { color: var(--navy-text); }
.ps-lists { margin-top: 32px; }
.ps-lists h3 { font-size: 21px; }
.ps-lists ul { margin: 0 0 1.2em; padding-left: 2.4em; list-style: disc; font-size: 15px; line-height: 1.6; }
.ps-lists li { margin-bottom: 10px; }
.ps-lists .ps-spaced li { margin-bottom: 24px; }
.ps-lists .card > p { font-size: 15px; }

.ps-result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 32px 0 0; padding: 24px 26px;
  border: 1px solid var(--line); border-radius: 12px; background: #e9eef7;
}
.ps-result span { font-size: 12px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #56687f; }
.ps-result a { display: inline-flex; align-items: center; gap: 12px; font-size: 18px; font-weight: 600; color: var(--navy-text); text-decoration: none; }
.ps-result a .icon { font-size: 24px; }
.ps-result a:hover { color: #2a65a8; }
.ps-contact { margin-top: 24px; text-align: center; }
.ps-contact p { margin: 22px 0 0; font-size: 18px; }

@media (max-width: 760px) {
  .ps-card, .ps-overview { padding: 26px 20px; }
  .ps-card h3 { font-size: 23px; }
  .ps-links .btn { flex: 1 1 100%; }
  .ps-text ul, .ps-lists ul { padding-left: 1.4em; }
}

/* Banner (2026-11-05): the presenter's head (columns 1430-1590, rows 210-450 of 1920 x 1177) is the photo's
   focus, and it belongs beside the text, not behind it. From 761px up the photo is drawn at 120% of the banner's
   width and shifted so his head sits at about 88% across (the man at the far right is cut off, which is fine):
   x = 31.5%. Vertically his head's middle (28% down) is held at 270px: the photo is 120% x 1177/1920 = 73.6vw
   tall, so 20.6vw below its top; clamp() keeps the photo filling the banner. Phones keep it centred. */
@media (min-width: 761px) {
  .ps-hero { background-size: 120% auto; background-position: 31.5% clamp(100%, calc(270px - 20.6vw), 0px); }
}


/* ---- Dark mode, generated by tools/darkmode.py when the site is built. Don't edit this part in site/; change the light rule in src/, or add a hand-written dark rule. ---- */
@media (prefers-color-scheme: dark) {
  .ps-grey { background-color: #191f29; }
  .ps-overview { color: #c2d3ec; }
  .ps-result { background-color: #1e242e; }
  .ps-result span { color: #b1c5df; }
  .ps-result a:hover { color: #91c8ff; }
}