/* Partners and the Partner programme on the section grammar (14 Oct 2026). Loaded after partners.css (used only by
   these two pages) and scoped to main.pg-partners / main.pg-programme. The partner paths are REKA's own call, so
   orange; each piece of joint work wears the division it belongs to. The ink tray (once per page) holds the partners'
   quotes. Pictures: a photo beside each hero, the logo wall, a photo beside the ways to partner (Partners); the four
   reasons each beside their own visual, a photo beside the application form (Programme). No hairlines between sections. */

/* shared: hero with a picture, chapter titles as Work */
:is(main.pg-partners,main.pg-programme) .pt-hero{padding:56px 0 8px}
:is(main.pg-partners,main.pg-programme) .pt-hgrid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:56px;align-items:center}
:is(main.pg-partners,main.pg-programme) .pt-hgrid>.ph{aspect-ratio:4/3;width:100%;border-radius:20px}
:is(main.pg-partners,main.pg-programme) .pt-hgrid>img{display:block;aspect-ratio:4/3;width:100%;border-radius:20px;object-fit:cover}
:is(main.pg-partners,main.pg-programme) .chap-head h2{font:600 56px/1.04 var(--sans);letter-spacing:-.035em;color:var(--ink);text-wrap:balance}
:is(main.pg-partners,main.pg-programme) .tray[data-tone] .ph{border-radius:20px}

/* ---------- Partners ---------- */
/* the wall: white logo tiles in the tray (partner-logos.js fills them; the name stays as the fallback) */
main.pg-partners .pwall{margin:0;gap:12px;background:none;border:0;border-radius:0;overflow:visible}
main.pg-partners .pwall li{border-radius:16px;box-shadow:inset 0 0 0 1px var(--line);min-height:104px}
/* what we built together: one card per piece of work, in its division */
main.pg-partners .pw-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
main.pg-partners .pw-grid li{display:flex}
main.pg-partners .pw-grid .card{flex:1;gap:10px}
main.pg-partners .pw-grid .tt{font-size:19px}
main.pg-partners .pw-with{font:500 14px/20px var(--sans);color:var(--ink)}
main.pg-partners .pw-with .k{color:var(--muted);font-weight:400}
main.pg-partners .pw-grid .code{color:var(--t-ink)}
/* the quotes: white cards in the page's one ink tray */
main.pg-partners .pquotes{margin:0;gap:16px}
main.pg-partners .pq.card{padding:32px;gap:24px;border:0}
main.pg-partners .pq figcaption b{color:var(--t-ink)}
main.pg-partners .pq blockquote::before,main.pg-partners .pq blockquote::after{color:var(--t-ink)}
/* the ways to partner: a picture beside three white cards, in REKA's orange tray */
main.pg-partners .pt-ways{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:24px;align-items:center}
main.pg-partners .pt-ways>.ph{aspect-ratio:4/3;width:100%}
main.pg-partners .pt-ways>img{display:block;aspect-ratio:4/3;width:100%;border-radius:20px;object-fit:cover}
main.pg-partners .pways{margin:0;grid-template-columns:minmax(0,1fr);gap:12px}
main.pg-partners .pways li{border-top:0;padding:20px 24px}
main.pg-partners .pways li p{margin-top:0;color:var(--muted)}
main.pg-partners .pt-cta{margin-top:20px}

/* ---------- Partner programme ---------- */
/* why partner: each reason in a white card beside its own visual, sides swapping down the tray */
main.pg-programme .prows{margin:0;display:grid;gap:16px}
main.pg-programme .prow{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:stretch;padding:0;border-top:0}
main.pg-programme .prow-t{justify-content:center;padding:40px;gap:0}
main.pg-programme .prow-t .tt{font:600 30px/36px var(--sans);letter-spacing:-.6px;color:var(--ink)}
main.pg-programme .prow-t p{margin-top:12px;font-size:16px;line-height:25px;color:var(--muted)}
main.pg-programme .prow-t .btn{margin-top:20px;align-self:flex-start}
main.pg-programme .vis{border:0;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);display:flex;flex-direction:column;justify-content:center}
main.pg-programme .vis.photo{box-shadow:none}
main.pg-programme .vis.photo img{height:100%;object-fit:cover}
main.pg-programme .vis.shot{padding:20px}
main.pg-programme .vis.dia{box-shadow:none}
/* the four paths as cards: who, what you do, what you get */
main.pg-programme .pp-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
main.pg-programme .pp-grid .card{gap:14px}
main.pg-programme .pp-grid .tt{color:var(--brand-text)}
main.pg-programme .pp-grid dl{margin:0;display:flex;flex-direction:column}
main.pg-programme .pp-grid dt{font:600 11.5px/1.2 var(--sans);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
main.pg-programme .pp-grid dd{margin:6px 0 16px;font:400 15px/22px var(--sans);color:var(--ink)}
main.pg-programme .pp-grid dd:last-child{margin-bottom:0}
/* application: the steps as white cards on REKA's tray, then a picture beside the form */
main.pg-programme .apply .flow{margin:0 0 16px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
main.pg-programme .apply .flow li{position:relative;display:block;padding:20px 22px;border-radius:20px;background:#fff;box-shadow:inset 0 0 0 1px var(--line)}
main.pg-programme .apply .flow li span{max-width:none}
main.pg-programme .apply .flow li:not(:last-child)::after{position:absolute;right:-14px;top:50%;margin:0;transform:translateY(-50%);font-size:15px;color:var(--t-ink)}
main.pg-programme .ap-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.55fr);gap:16px;align-items:start}
main.pg-programme .ap-two>.ph{aspect-ratio:4/3;width:100%;position:sticky;top:110px}
main.pg-programme .apply .apwrap{max-width:none;margin:0}
main.pg-programme .apply .rkf{border-color:transparent;border-radius:20px}
main.pg-programme .apply .rf-done{padding:32px;border-radius:20px;background:#fff}
/* questions: one white card, the rows divided inside it (as Contact) */
main.pg-programme .faq .chap-head h2{margin-bottom:0}
main.pg-programme .faq-card{display:block;padding:8px 32px;max-width:880px;margin:0 auto}
main.pg-programme .faq-card details:last-child{border-bottom:0}
main.pg-programme .faq-card summary{font-size:16.5px;line-height:23px}
main.pg-programme .faq-card details p{font-size:15.5px;line-height:24px;color:var(--muted)}

@media (max-width:1100px){
  main.pg-partners .pw-grid,main.pg-programme .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-programme .apply .flow{grid-template-columns:repeat(2,minmax(0,1fr))}
  main.pg-programme .apply .flow li:nth-child(2)::after{display:none}
}
@media (max-width:900px){
  :is(main.pg-partners,main.pg-programme) .pt-hero{padding:40px 0 0}
  :is(main.pg-partners,main.pg-programme) .pt-hgrid{grid-template-columns:minmax(0,1fr);gap:28px}
  :is(main.pg-partners,main.pg-programme) .chap-head h2{font-size:38px;line-height:1.08}
  main.pg-partners .pt-ways,main.pg-programme .prow,main.pg-programme .ap-two{grid-template-columns:minmax(0,1fr)}
  main.pg-programme .prow.flip .vis{order:0}
  main.pg-programme .ap-two>.ph{position:relative;top:auto}
}
@media (max-width:760px){
  main.pg-partners .pw-grid,main.pg-programme .pp-grid,main.pg-programme .apply .flow{grid-template-columns:minmax(0,1fr);gap:10px}
  main.pg-programme .apply .flow li::after{display:none}
  main.pg-partners .pq.card{padding:22px}
  main.pg-partners .pways li{padding:18px 20px}
  main.pg-programme .prow-t{padding:24px 20px}
  main.pg-programme .prow-t .tt{font-size:24px;line-height:30px}
  main.pg-programme .vis.shot{padding:12px}
  main.pg-programme .faq-card{padding:4px 20px}
  main.pg-programme .apply .rkf{padding:20px 16px}
}
/* logos sit centred in their tiles (the shared partners.css capped them at their natural size, top left) */
main.pg-partners .pwall li img{max-width:none;max-height:none;width:100%;height:100%;box-sizing:border-box;padding:24px 22px!important}
/* the clinic picture takes a 2 x 2 block of the grid, beside the first four cards */
main.pg-partners .pw-grid .pw-pic{grid-column:span 2;grid-row:span 2}
main.pg-partners .pw-pic .ph{width:100%;height:100%;min-height:100%;border-radius:20px}
main.pg-partners .pw-pic>img{display:block;width:100%;height:100%;min-height:100%;border-radius:20px;object-fit:cover}
main.pg-programme .ap-two>.ph{aspect-ratio:3/4}
@media (max-width:1100px){main.pg-partners .pw-grid .pw-pic{grid-row:auto}main.pg-partners .pw-pic .ph,main.pg-partners .pw-pic>img{aspect-ratio:16/10}}
@media (max-width:900px){main.pg-programme .ap-two>.ph{aspect-ratio:4/3}}
@media (max-width:760px){main.pg-partners .pw-grid .pw-pic{grid-column:auto}main.pg-partners .pw-pic .ph,main.pg-partners .pw-pic>img{aspect-ratio:1/1}}
/* the paths: a picture beside the four cards, two by two */
main.pg-programme .pp-tray{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2fr);gap:16px;align-items:stretch}
main.pg-programme .pp-tray>.ph{width:100%;height:100%;min-height:320px;border-radius:20px}
main.pg-programme .pp-tray .pp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:900px){main.pg-programme .pp-tray{grid-template-columns:minmax(0,1fr)}main.pg-programme .pp-tray>.ph{height:auto;min-height:0;aspect-ratio:4/3}}
@media (max-width:760px){main.pg-programme .pp-tray .pp-grid{grid-template-columns:minmax(0,1fr)}}
/* phones (owner, 14 Oct: "fix the phone gaps too"): the clinic picture moves down the stack to sit just before
   "Audience analytics in clinics", so eight cards don't run on unbroken */
@media (max-width:760px){
  main.pg-partners .pw-grid .pw-pic{order:1}
  main.pg-partners .pw-grid>li:nth-child(n+7){order:2}
  main.pg-partners .pw-pic .ph,main.pg-partners .pw-pic>img{aspect-ratio:4/3}
}
/* (owner, 14 Oct: "fix the phone gaps too") Questions get a picture beside them (above them on phones). On phones the
   four steps sit two to a row, and the first-call picture opens the application tray, before the steps */
main.pg-programme .faq-two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.7fr);gap:16px;align-items:start}
main.pg-programme .faq-two .faq-card{max-width:none;margin:0}
main.pg-programme .faq-ph{--phb:#DDD9CF;width:100%;aspect-ratio:4/5;border-radius:20px;position:sticky;top:110px}
@media (max-width:900px){
  main.pg-programme .faq-two{grid-template-columns:minmax(0,1fr)}
  main.pg-programme .faq-ph{position:relative;top:auto;aspect-ratio:16/9}
}
@media (max-width:760px){
  main.pg-programme .apply .tray{display:flex;flex-direction:column}
  main.pg-programme .apply .ap-two{display:contents}
  main.pg-programme .apply .ap-two>.ph{order:-1;margin-bottom:16px}
  main.pg-programme .apply .flow{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  main.pg-programme .apply .flow li{padding:14px 14px}
  main.pg-programme .apply .flow li span{font-size:15px;line-height:21px;overflow-wrap:break-word}
}