/* facilitation.html — page-only overrides (loads after pages.css). Prefix: fac-. Tokens only. */

/* Wide "cinematic" strip photo (source is a 1536x450 banner): keep its own ratio on desktop,
   crop taller around Shay on tablet / phone so it never becomes a thin sliver. */
.fac-strip { aspect-ratio: 1536 / 450; max-height: none; }
@media (max-width: 1068px) { .fac-strip { aspect-ratio: 16 / 9; } }
@media (max-width: 734px)  { .fac-strip { aspect-ratio: 4 / 3; } }

/* Strip focus: desktop/tablet keep Shay centred; phone shifts right so Shay, flip chart and SanDisk agenda screen stay in frame */
.fac-strip { --pg-focus: 56% 40%; }
@media (max-width: 734px) { .fac-strip { --pg-focus: 62% 45%; } }

/* Hero subtitle (second half of the old-site H1) */
.fac-hero__sub { font-size: var(--fs-lead); font-weight: 600; line-height: var(--lh-body); color: var(--color-white); text-wrap: balance; }

/* "Techniques include": label + inline pills */
.fac-tech { margin-top: var(--space-6); display: flex; flex-direction: column; gap: var(--space-4); }
.fac-label { margin: 0; }
.fac-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-3); }
.fac-pills li { display: inline-flex; align-items: center; min-height: var(--btn-h-sm); padding: 0 var(--space-5); border-radius: var(--radius-pill);
  font-weight: 600; font-size: var(--fs-tagline); color: var(--color-blue-700); background: var(--tint-brand); box-shadow: inset 0 0 0 1px var(--hairline-light-strong); }

/* Hero on phone: deeper bottom gradient behind the text (token alpha only) */
@media (max-width: 734px) {
  .fac-hero::after { background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--color-navy-900) 40%, transparent) 30%, color-mix(in srgb, var(--color-navy-900) 70%, transparent) 100%), var(--overlay-hero); }
}

/* Where facilitation helps: 3-up numbered display row, no card chrome */
.fac-helps { list-style: none; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
.fac-helps li { display: flex; flex-direction: column; gap: var(--space-4); padding-top: var(--space-5); border-top: 2px solid var(--color-blue-700); }
.fac-helps__title { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-blue-700); text-wrap: balance; }
@media (max-width: 734px) {
  .fac-helps { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
  .fac-helps li { flex-direction: row; align-items: baseline; gap: var(--space-5); }
}

/* Benefits: large display-type numbered rows with hairlines */
.fac-benefits { width: 100%; list-style: none; margin: var(--space-6) 0 0; padding: 0; border-top: 1px solid var(--pg-line); }
.fac-benefits li { display: flex; align-items: baseline; gap: var(--space-5); padding: var(--space-5) 0; border-bottom: 1px solid var(--pg-line);
  font-family: var(--font-display); font-size: var(--fs-display-md); line-height: var(--lh-display); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--color-blue-700); }
.fac-benefits__num { flex: none; font-family: var(--font-body); font-size: var(--fs-label); font-weight: 700; letter-spacing: .08em; color: var(--color-blue-700); }
.fac-benefits li::marker { content: none; }

/* Proof quote: sentence case, readable body face, capped measure */
.fac-quote { max-width: 60ch; }
.fac-quote blockquote p { font-family: var(--font-body); font-size: var(--fs-display-sm); font-weight: 400; line-height: 1.45; letter-spacing: 0; text-transform: none; text-wrap: pretty; }
@media (max-width: 734px) {
  .fac-quote blockquote p { font-size: var(--fs-lead); }
  .fac-strip { aspect-ratio: 16 / 10; }
}

/* Why split: balance photo + text */
.pg-split:has(.fac-benefits) { align-items: center; }

/* Proof band: centred head */
.fac-proof-head { align-items: center; text-align: center; }

/* CTA band spacing = About CTA (lighter top after the previous band) */
.fac-cta { padding-top: calc(var(--section-pad-y) * 0.625); }