/* Orli v3 site · home (v2 launch home: the schools landing page, 31 Oct)
   ---------------------------------------------------------------------------
   One job per section, in this order (Ryan's batch, 3 Nov: WHAT, WHEN,
   WHO, WHY, HOW): the hero (../hero/school); the film (Jack's week); the
   schools that made Orli with us (logos); what Orli Schools is (three
   cards); where it fits (three pictures from the film, then the guidance
   one-pager); what schools tell us (voices and evidence); how it works
   (the five steps as the session carousel); co-create Orli with us (the
   islands journey); the offer and the box (the page's one deep band);
   questions.

   Loaded after shell/shell.css (the v2 system and the shell), the FAQ's,
   the showcase's (device frames only) and the trial box's stylesheets, and
   before the hero's. Lays out only what is particular to this page, with
   nothing but system tokens:

     type     the six steps          space    the 4px scale and rhythm gaps
     radii    control 12 · card 24 · pill
     shadow   --o-shadow, --o-shadow-raised
     colour   surfaces, ink, action, mint

   One card, one pill, one link, one section header. No handwriting on this
   page besides the footer's tagline (the shell's). Sections alternate canvas
   and warm by place, set in the markup (the role chooser that reordered them
   is gone), with the offer on the deep band.
   ------------------------------------------------------------------------- */

/* ================================================================= hero
   The hero is ../hero/final's (hero.css loads after this file, so these
   name the section too). The v2 lead and small print are longer than the
   first ones: a little more room keeps the lead to three lines beside the
   islands. */
.ar .ar__head { max-inline-size: 38rem; }
.ar .ar__head .o-lead { max-inline-size: 36rem; }
.ar .ar__small { max-inline-size: 34rem; }

/* ================================================================= film
   Jack's week (index.html #film; home.js, mountFilm). It follows the hero's
   landing, before the logos. The card is the width of the content and
   16:9 from the first paint, so nothing shifts when the film swaps in. Its
   radius is the card radius on phones and tablets and 28px from 1100px,
   as in Ryan's screenshot. The film's end card is the poster, and the
   whole card is the play button: a white disc with the action-green play
   mark in the middle. The captions pill is a dark glass pill at the
   bottom left. While the film plays the pill moves to the top left, clear
   of the browser's controls. Like those controls, it shows when the
   pointer moves or a key is pressed on the card (.is-awake, about 2.6 s),
   while the film is paused, or when it has keyboard focus. The section uses the logos' rhythm:
   its own space above, and the logos' top space below it. */
.film { padding-block: var(--o-space-7) 0; }
@media (min-width: 900px) { .film { padding-block-start: var(--o-space-8); } }
.film__card {
  --film-r: var(--o-r-card);
  --film-inset: var(--o-space-3);
  position: relative; isolation: isolate;
  margin: 0; aspect-ratio: 16 / 9;
  border-radius: var(--film-r); overflow: clip;
  /* the poster's own colours (sky to hill) until it paints */
  background: linear-gradient(180deg, #3c5588, #6f5b9e 58%, #4f5040);
  box-shadow: var(--o-shadow-raised);
}
@media (min-width: 600px) { .film__card { --film-inset: var(--o-space-4); } }
@media (min-width: 1100px) { .film__card { --film-r: calc(var(--o-r-card) + 4px); --film-inset: var(--o-space-5); } }
/* one ring round the whole card, for the poster button and the film */
.film__card:has(:is(.film__poster, .film__video):focus-visible) { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.film__poster:focus-visible, .film__video:focus-visible { outline: none; }
@supports not selector(:has(*)) {
  .film__poster:focus-visible, .film__video:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
}

.film__poster {
  appearance: none; position: absolute; inset: 0; display: block;
  margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.film__still {
  display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-drag: none; user-select: none;
  transition: scale 700ms var(--o-ease);
}
.film__play {
  position: absolute; left: 50%; top: 50%; z-index: 1;
  display: grid; place-items: center;
  width: clamp(52px, 7.2vw, 88px); aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; background: #fff; color: var(--o-action);
  box-shadow: 0 2px 6px rgb(20 18 40 / .18), 0 16px 36px -10px rgb(20 18 40 / .5);
  transition: scale var(--o-t-interact) var(--o-settle), color var(--o-t-interact) var(--o-ease);
}
.film__play svg { display: block; width: 46%; height: 46%; fill: currentColor; }
.film__poster:is(:hover, :focus-visible) .film__play { scale: 1.07; color: var(--o-action-hover); }
.film__poster:hover .film__still { scale: 1.015; }
.film__poster:active .film__play { scale: .96; transition-duration: var(--o-t-press); }
html:is([data-motion="reduced"], [data-motion="still"]) :is(.film__play, .film__still) { transition: none; scale: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) :is(.film__play, .film__still) { transition: none; scale: none !important; }
}

.film__video {
  position: absolute; inset: 0; display: block;
  width: 100%; height: 100%; object-fit: contain; background: #000;
}
.film__video[hidden], .film__card.is-playing .film__poster { display: none; }

/* the captions pill: small dark glass, white words, a 44px target */
.film__cc {
  --o-focus: #fff; --o-focus-ring: 3px solid #fff;
  position: absolute; z-index: 2;
  inset-inline-start: var(--film-inset); inset-block-end: var(--film-inset);
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-block-size: 36px; margin: 0; padding: 0 var(--o-space-4) 0 var(--o-space-2);
  border: 0; border-radius: var(--o-r-pill);
  background: rgb(22 20 38 / .66);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  color: #fff; font: var(--o-weight-ui) var(--o-text-small) / 1 var(--o-font-ui);
  white-space: nowrap; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--o-t-interact) var(--o-ease), opacity var(--o-t-enter) var(--o-ease);
}
.film__cc::before { content: ""; position: absolute; inset: -4px; border-radius: inherit; }
.film__cc:hover { background: rgb(22 20 38 / .82); }
.film__cc-mark {
  display: inline-grid; place-items: center;
  min-inline-size: 26px; block-size: 20px; padding-inline: 3px;
  border: 1.5px solid currentColor; border-radius: 6px;
  font-size: .6875rem; font-weight: 800; letter-spacing: .04em; line-height: 1;
}
.film__cc[aria-pressed="true"] .film__cc-mark { background: #fff; border-color: #fff; color: rgb(22 20 38); }
.film__cc[aria-pressed="false"] .film__cc-mark { opacity: .8; }
.film__cc-time { color: rgb(255 255 255 / .82); }
@media (max-width: 599.98px) {
  .film__cc { min-block-size: 32px; padding-inline-end: var(--o-space-3); font-size: .8125rem; gap: 6px; }
  .film__cc::before { inset: -6px; }
  .film__cc-mark { min-inline-size: 24px; block-size: 18px; font-size: .625rem; }
}
.film__card.is-playing .film__cc { inset-block-end: auto; inset-block-start: var(--film-inset); }
.film__card.is-playing .film__cc-time { display: none; }
.film__card.is-playing:not(.is-paused, .is-awake) .film__cc:not(:focus-visible, :hover) { opacity: 0; pointer-events: none; }
/* Phones: on a card this small the pill would sit on the Orlis (bottom) or
   the logo (top), so it moves out under the film as a light chip, and stays
   there while the film plays (the video's own controls are on the picture). */
@media (max-width: 599.98px) {
  html.js .film__card { overflow: visible; margin-block-end: calc(44px + var(--o-space-3)); }
  .film__poster, .film__video { border-radius: inherit; overflow: clip; }
  .film__cc,
  .film__card.is-playing .film__cc,
  .film__card.is-playing:not(.is-paused, .is-awake) .film__cc:not(:focus-visible, :hover) {
    --o-focus: var(--o-action-press); --o-focus-ring: 3px solid var(--o-action-press);
    inset-block: calc(100% + var(--o-space-3)) auto; inset-inline-start: 0;
    min-block-size: 44px; padding-inline: var(--o-space-3) var(--o-space-4); gap: var(--o-space-2);
    opacity: 1; pointer-events: auto;
    background: var(--o-surface); color: var(--o-ink);
    box-shadow: inset 0 0 0 1px var(--o-line);
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .film__cc::before { inset: 0; }
  .film__cc:hover { background: var(--o-warm); }
  .film__cc[aria-pressed="true"] .film__cc-mark { background: var(--o-ink); border-color: var(--o-ink); color: var(--o-surface); }
  .film__cc-time { color: var(--o-ink-2); }
}

/* no script: the noscript film with its own controls stands in */
html:not(.js) :is(.film__poster, .film__cc) { display: none; }

@media (forced-colors: active) {
  .film__card { border: 1px solid CanvasText; }
  .film__card:has(:is(.film__poster, .film__video):focus-visible) { outline: 3px solid Highlight; }
  .film__play { border: 2px solid ButtonText; background: ButtonFace; color: ButtonText; box-shadow: none; }
  .film__cc { border: 1px solid ButtonText; background: ButtonFace; color: ButtonText; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .film__cc:focus-visible { outline: 3px solid Highlight; }
  .film__cc[aria-pressed="true"] .film__cc-mark { forced-color-adjust: none; background: ButtonText; border-color: ButtonText; color: ButtonFace; }
  .film__cc-time { color: ButtonText; }
}
@media print {
  .film__play, .film__cc { display: none; }
  .film__card { box-shadow: none; }
}

/* ======================================================== a product stage
   A warm 4:3 box holding today's screens in the showcase's device frames
   (positioned by their --x/--y/--w, home/product.js), a photo or a still. */
.h-stage {
  position: relative; isolation: isolate;
  aspect-ratio: 4 / 3; margin: 0;
  border-radius: var(--o-r-card); overflow: clip;
  background: var(--o-warm);
}
.h-stage > .o-media__tag { z-index: 12; }

/* ================================================================ logos
   The line, then the eleven logos, each on its own white card (several are
   JPEG-flat on white, so a card is their natural ground), drifting slowly
   across the page in one continuous loop (a hidden copy follows the list so
   it never runs out). Each card bobs gently on its own beat. Hover or
   keyboard focus stops it; Reduced and Still motion (the site's Motion
   setting) show one calm, centred, wrapping row instead. */
.logos { --o-section: var(--o-space-7); }
@media (min-width: 900px) { .logos { --o-section: var(--o-space-8); } }
.logos__head { text-align: center; }
.logos__title {
  margin: 0 auto;
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading); text-wrap: balance;
}
.logos__marquee {
  position: relative; overflow: hidden;
  margin-block-start: var(--o-space-5);
  padding-block: var(--o-space-4) var(--o-space-5);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 10%, #000 90%, transparent 100%);
}
.logos__track { display: flex; width: max-content; animation: logos-drift var(--logos-dur, 70s) linear infinite; }
.logos__marquee:hover .logos__track,
.logos__marquee:focus-within .logos__track { animation-play-state: paused; }
.logos__marquee:is(:hover, :focus-within) .logos__strip > li { animation-play-state: paused; }
ul.logos__strip {
  --card-h: 112px; --k: .62;
  display: flex; flex-wrap: nowrap; align-items: center;
  gap: var(--o-space-4); margin: 0; padding: 0 var(--o-space-4) 0 0;
  list-style: none;
}
.logos__strip > li {
  flex: none; display: grid; place-items: center;
  height: var(--card-h); min-width: calc(var(--card-h) * 1.5); padding: 14px 26px;
  background: #fff; border-radius: 22px;
  box-shadow: 0 0 0 1px rgb(47 46 43 / .06), 0 10px 24px -14px rgb(47 46 43 / .22);
  animation: logos-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s);
}
.logos__strip img { display: block; width: auto; height: min(calc(var(--logo-h) * var(--k)), calc(var(--card-h) - 28px)); max-width: 200px; object-fit: contain; }
@keyframes logos-drift { to { transform: translate3d(-50%, 0, 0); } }
@keyframes logos-bob { 0%, 100% { transform: translate3d(0, -4px, 0); } 50% { transform: translate3d(0, 4px, 0); } }
@media (max-width: 599.98px) {
  ul.logos__strip { --card-h: 84px; --k: .46; gap: var(--o-space-3); padding-inline-end: var(--o-space-3); }
  .logos__strip > li { padding: 10px 18px; border-radius: 18px; }
  .logos { --logos-dur: 52s; }
}
/* Reduced and Still motion: one calm, centred, wrapping set of cards, nothing moves. */
html:is([data-motion="reduced"], [data-motion="still"]) .logos__marquee { -webkit-mask-image: none; mask-image: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .logos__track { animation: none; width: auto; justify-content: center; }
html:is([data-motion="reduced"], [data-motion="still"]) ul.logos__strip { flex-wrap: wrap; justify-content: center; padding: 0 var(--o-gutter); }
html:is([data-motion="reduced"], [data-motion="still"]) .logos__strip > li { animation: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .logos__strip[aria-hidden="true"] { display: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .logos__marquee { -webkit-mask-image: none; mask-image: none; }
  html:not([data-motion]) .logos__track { animation: none; width: auto; justify-content: center; }
  html:not([data-motion]) ul.logos__strip { flex-wrap: wrap; justify-content: center; padding: 0 var(--o-gutter); }
  html:not([data-motion]) .logos__strip > li { animation: none; }
  html:not([data-motion]) .logos__strip[aria-hidden="true"] { display: none; }
}

/* ================================================================ WHAT
   What is Orli Schools? (Ryan's batch, 3 Nov): the title and its line, then
   the three concrete cards (guided sessions, companions and scrapbooks,
   pupil and school insights) as the reader cards. The class board and
   laptop stack is gone from here. */
/* the line's three parts, one to a line from 600px (as the earlier title's) */
.what__lead { max-inline-size: 44rem; }
@media (min-width: 600px) { .what__lead > span { display: block; } }
/* The readers: the system's link cards, each with its own felt-and-clay
   picture on its world's wash. (No pills over the titles since Ryan's
   review, 3 Nov: the section's line says who each card is for.) Every
   round arrow is the one action green
   (6.8:1 on the card), never a world's navy (Ryan, 2 Nov, note 1). The
   whole card goes to its page; on hover the card lifts (system), its arrow
   deepens and its picture drifts a little closer. Three across from 1100px;
   between 600 and 1100px each lies on its side, picture on the left. */
.reader .o-arrow { background: var(--o-action); transition: translate var(--o-t-interact) var(--o-ease), background-color var(--o-t-interact) var(--o-ease); }
@media (hover: hover) and (pointer: fine) { .reader:hover .o-arrow { background: var(--o-action-hover); } }
.reader:has(.o-card__link:focus-visible) .o-arrow { background: var(--o-action-hover); }
/* (Three across only from 1100px: at 900-1099px three cards left about 30
   characters a line, so there they lie on their side too; spacing rules,
   2 Nov.) */
.what__cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .what__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.reader__art { --ratio: 4 / 3; position: relative; }
.reader__art img { scale: 1.001; transition: scale 1100ms var(--o-ease); }
@media (hover: hover) and (pointer: fine) {
  .reader:hover .reader__art img { scale: 1.05; }
}
.reader .o-card__body { gap: var(--o-space-2); padding: var(--o-space-5) var(--o-space-5) var(--o-space-5); }
.reader .o-card__text { margin-block-end: var(--o-space-2); }
.reader .o-card__foot { border-block-start: 1px solid var(--o-line); }
.reader__go { font: var(--o-weight-ui) var(--o-text-body) / 1.35 var(--o-font-ui); text-wrap: balance; }
@media (min-width: 600px) and (max-width: 1099.98px) {
  .reader { flex-direction: row; }
  .reader__art { flex: 0 0 40%; aspect-ratio: auto; }
  .reader__art img { position: absolute; inset: 0; }
}

/* ============================================ the landing card's next step
   "Keep scrolling" (Ryan's review, 3 Nov), in place of "See how it works",
   which jumped past half the page: it goes to the very next section, the
   film (home.js scrolls there gently in full motion). The card's own words
   stay title size; the link is the UI's body text with the hand-drawn arrow
   turned to point down, which bobs a little in full motion only. */
.sw-land__next {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-height: var(--o-target);
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui);
  letter-spacing: -.005em;
}
.sw-land__down {
  flex: none; width: 18px; height: 11px; rotate: 90deg; translate: 0 1px;
  background: currentColor;
  -webkit-mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
  mask: url("../../../v2/system/assets/doodles/arrow-right.svg") center / contain no-repeat;
  transition: translate var(--o-t-interact) var(--o-ease);
}
@media (hover: hover) and (pointer: fine) { .sw-land__next:hover .sw-land__down { translate: 0 4px; } }
.sw-land__next:focus-visible .sw-land__down { translate: 0 4px; }
.is-moving .sw-land__down { animation: land-down 2.6s ease-in-out infinite; }
@keyframes land-down { 0%, 100% { translate: 0 -1px; } 50% { translate: 0 4px; } }
@media (forced-colors: active) { .sw-land__down { forced-color-adjust: none; background: LinkText; } }

/* WHEN's two-part line (engaged children, empowered staff: Ryan's review,
   3 Nov), one part to a line from 600px, as WHAT's */
.fits__lead { max-inline-size: 50rem; }
@media (min-width: 600px) { .fits__lead > span { display: block; } }

/* ========================================================== how it works
   The earlier home page's session carousel (Ryan, 1 Nov). (Without script
   the later slides sit to the right of the first: the section keeps them
   from widening the page.) Each step is one picture (Ryan, 2 Nov, note 2):
   a 4:3 still that fills its stage at every width, so nothing in it is ever
   cropped; in full motion its loop fades in over it once it's playing
   (home.js). Its height comes from the stage. */
.how { overflow-x: clip; }
.how__carousel { min-width: 0; }
.how .ps-carousel { margin-inline: 0; max-inline-size: none; }
.how .ps-stage { aspect-ratio: 4 / 3; }
.how__art { position: absolute; inset: 0; overflow: clip; border-radius: inherit; }
.how__art > :is(img, video) {
  position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover;
  -webkit-user-select: none; user-select: none; -webkit-user-drag: none;
}
.how__loop { opacity: 0; pointer-events: none; transition: opacity 420ms var(--o-ease); }
.how__loop.is-on { opacity: 1; }
/* Full motion: a step that isn't showing waits a touch closer, and settles
   back as it arrives. */
.is-moving .how .how__art { transition: scale 1600ms var(--o-ease); }
.is-moving .how .ps-carousel.is-enhanced .ps-slide[inert] .how__art { scale: 1.045; }
/* The picture stays within one screen: beside the steps from 900px (below),
   and under 900px no taller than the window leaves room for (its words and
   the dots follow it), centred. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .how .ps-carousel { max-inline-size: max(540px, calc((100svh - 300px) * 4 / 3)); margin-inline: auto; }
}
/* Phones: every dot is a 44px target (the labels stay for screen readers).
   The slides keep the longest step's height (step 4's words run a line
   longer), so the dots sit 16px under it, not 24 (review, 2 Nov). */
@container ps-carousel (max-width: 520px) {
  .how .ps-tab { flex: 0 0 44px; min-width: 44px; }
  .how .ps-tabs { gap: 0; }
  .how .ps-carousel__bar { margin-block-start: var(--o-space-4); }
}
/* Under 900px the step's title is already over the dots (its caption),
   so the dots carry no words of their own (the labels stay for screen
   readers). */
@media (max-width: 899.98px) {
  .how .ps-tab .ps-tab__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}
/* (the steps' words, copied into the tab list by home.js, show only in
   the two-column layout) */
.ps-tab__text { display: none; }
/* From 900px (was 1100: at 1024 the carousel stopped at 800px and left an
   empty column, review 2 Nov): the stage on the left (8 of 12 columns), the
   five steps on the right as the tab list, numbered, each step's words under
   it when it's the one showing, the ring on it while it plays; pause and the
   arrows beneath. */
@media (min-width: 900px) {
  .how .ps-carousel { display: grid; grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: clamp(var(--o-space-6), 4vw, var(--o-space-8)); align-items: center; }
  .how .ps-carousel__viewport { grid-column: 1; grid-row: 1; justify-self: start; width: 100%; max-inline-size: calc(68svh * 4 / 3); }
  .how .ps-slide__caption {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }
  .how .ps-carousel__bar {
    grid-column: 2; grid-row: 1;
    display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: "tabs tabs tabs" "play . arrows";
    row-gap: var(--o-space-6); margin: 0;
  }
  .how .ps-tabs { grid-area: tabs; flex-direction: column; align-items: stretch; gap: 0; }
  .how .ps-play { grid-area: play; }
  .how .ps-arrows { grid-area: arrows; }
  .how .ps-tab {
    display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--o-space-3); align-items: center;
    min-height: 56px; padding: var(--o-space-3) var(--o-space-3) var(--o-space-3) var(--o-space-2);
    border-radius: var(--o-r-control); white-space: normal;
    font-size: var(--o-text-body); line-height: 1.3; cursor: pointer;
  }
  .how .ps-tab + .ps-tab { border-block-start: 1px solid var(--o-line); }
  .how .ps-carousel .ps-tab .ps-tab__label { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; }
  .how .ps-carousel .ps-tab:not([aria-selected="true"]) { padding: var(--o-space-3) var(--o-space-3) var(--o-space-3) var(--o-space-2); }
  .how .ps-tab[aria-selected="true"] .ps-tab__text {
    display: block; grid-column: 2; margin-block-start: var(--o-space-2);
    font: var(--o-weight-body) var(--o-text-small) / var(--o-lh-small) var(--o-font-body); color: var(--o-ink-2);
  }
}

/* ======================================================= WHEN: where it fits
   (Ryan's batch, 3 Nov: under WHAT.) The header; then three cards, each one
   picture from Jack's week (4:3, the reader cards' ratio) and one short
   caption under its title: three across from 1100px; between 600 and
   1100px each on its side, picture on the left (40%, each picture's own
   focus, --pos); one column on a phone, picture on top. Under them, the way
   to the policy detail: the one-pager that maps Orli to Ofsted and DfE
   guidance as a link card on its side (its top showing like a sheet on the
   desk), and the inclusion strategy link beside it. */
.fits__cards { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 1100px) { .fits__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.fits__art { --ratio: 4 / 3; position: relative; }
.fits__art img { object-position: var(--pos, 50% 50%); }
.fits__card .o-card__body { gap: var(--o-space-2); padding: var(--o-space-5); }
.fits__card .o-card__title { font-size: var(--o-text-lead); line-height: 1.3; }
@media (min-width: 600px) and (max-width: 1099.98px) {
  .fits__card { flex-direction: row; }
  .fits__art { flex: 0 0 40%; aspect-ratio: auto; min-block-size: 12rem; }
  .fits__art img { position: absolute; inset: 0; }
  .fits__card .o-card__body { justify-content: center; padding: var(--o-space-6); }
}
/* the guidance one-pager and the inclusion link, a little apart from the cards */
.fits__more {
  display: grid; gap: var(--o-space-5) var(--o-space-7); justify-items: start; align-items: center;
  margin-block-start: var(--o-space-8);
}
/* (side by side only from 1100px: narrower, the card's words would be squeezed beside its sheet) */
@media (min-width: 1100px) { .fits__more { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); } }
.fits__doc { inline-size: 100%; }
@media (min-width: 760px) {
  .fits__doc { flex-direction: row; align-items: stretch; max-inline-size: 52rem; }
  .fits__doc .fits__paper { flex: 0 0 46%; }
  .fits__doc .o-card__body { justify-content: center; padding: var(--o-space-6); }
}
/* the sheet: its top, whole across, lying on the warm ground with the same
   inset either side, fading out toward the card's words (a deliberate crop,
   never words cut at the edge; fpol-home) */
.fits__paper { --ratio: auto; padding: var(--o-space-5) var(--o-space-5) 0; }
.o-card__media.fits__paper > img {
  width: 100%; max-width: none; height: auto; object-fit: initial;
  border-radius: 6px 6px 0 0; box-shadow: 0 1px 2px rgb(47 46 43 / .08), 0 6px 20px rgb(47 46 43 / .08);
  -webkit-mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
          mask-image: linear-gradient(to bottom, #000 62%, transparent 98%);
}
.fits__doc .o-card__body { gap: var(--o-space-3); }
.fits__doc-row { align-self: stretch; display: flex; align-items: flex-end; justify-content: space-between; gap: var(--o-space-5); }

/* ===================================================== co-create (research)
   (Ryan, 2 Nov, notes 3 and 4, and "can we have some type of animation in
   the image instead?"; the words, Ryan's batch, 3 Nov.) The journey: the islands picture, clean (nothing written on it),
   floating gently, with Orla in it. In full motion, when it comes into view,
   she drops in on the first plank at the primary school's end of the first
   bridge, hops up it, leaps the flower bed into the summer island's sandy
   clearing, pauses, leaps onto the second bridge, hops along it, leaps the
   hedge and goal onto the secondary school's pitch and settles in its
   centre circle, each island warming softly as she lands; then she rests
   there, blinking and bobbing now and then (home.js, mountJourney). She
   only ever lands on planks, sand or open pitch. Otherwise she simply sits
   on the pitch. Under the picture, the three stages as plain text, one
   under each island; while she travels, the one she's on is in full ink and
   the others are muted (Year 6 while she waits to start). No rope, buttons
   or numbers any more (img/magic/SPEC.md). */
/* Co-create Orli with us (Ryan's batch, 3 Nov). Narrow: the title and the
   invitation, the journey, then the partner line, the note that it's apart
   from the trial and the call. From 900px: the words on the left (the
   header, then the rest under it), centred against the journey on the
   right. */
.research__in {
  display: grid; grid-template-columns: minmax(0, 1fr);
  grid-template-areas: "head" "art" "body";
  row-gap: var(--o-space-7);
}
.research__head { grid-area: head; margin: 0; }
.research__art { grid-area: art; }
.research__body { grid-area: body; min-width: 0; }
@media (min-width: 900px) {
  .research__in {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". art" "head art" "body art" ". art";
    column-gap: var(--o-space-8); row-gap: 0; align-items: start;
  }
  .research__art { align-self: center; }
  .research__body { margin-block-start: var(--o-space-6); }
}
@media (min-width: 1100px) {
  .research__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: var(--o-space-9); }
}
.research__head .o-lead { max-inline-size: 36rem; text-wrap: pretty; }
.research__body { display: grid; justify-items: start; align-content: start; gap: var(--o-space-3); }
.research__partner { max-inline-size: 34em; font: var(--o-weight-ui) var(--o-text-body) / 1.45 var(--o-font-ui); text-wrap: pretty; }
.research__apart { max-inline-size: 34em; color: var(--o-ink-2); text-wrap: pretty; }
/* Book a call, then the one-pager beside it (under it on a phone) */
.research__go { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-4) var(--o-space-6); margin-block-start: var(--o-space-4); }
.research__pdf { display: inline-flex; align-items: flex-start; gap: var(--o-space-2); padding-block: max(0px, calc((var(--o-target) - 1lh) / 2)); font-weight: var(--o-weight-strong); }
/* (the icon level with the first line when the words wrap on a phone) */
.research__pdf .o-doodle { --size: 20px; flex: none; margin-block-start: calc((1lh - 20px) / 2); }
.research__size { font-weight: var(--o-weight-body); color: var(--o-ink-2); white-space: nowrap; }

/* the journey: the picture, then the three stages under it */
.research__art { position: relative; display: grid; gap: var(--o-space-5); margin: 0; min-width: 0; }
.research__pic {
  position: relative; aspect-ratio: 16 / 9;
  border-radius: var(--o-r-card); overflow: clip; isolation: isolate;
  background: #f3d6c0; box-shadow: var(--o-shadow-raised);
}
/* the picture sits a little larger than its frame, so its drift never shows an edge */
.research__float { position: absolute; inset: -3%; }
.research__float img { display: block; width: 100%; height: 100%; object-fit: cover; }
.is-moving .research__float { animation: research-float 11s ease-in-out infinite; }
@keyframes research-float {
  0%, 100% { translate: 0 0; }
  50% { translate: -.6% -1.4%; }
}
/* Orla's layer lies exactly over the picture (inside the float, so she drifts
   with it). Every place in it is a percentage of the picture itself, traced
   on research-islands-clear-2400 (x / 2400, y / 1350), so she stays on the
   bridges at every width. */
.research__scene { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
/* a soft warm light pooling on an island as she lands on it (home.js fades
   it up and away): soft-light, so the island warms and brightens without
   a haze over it */
.research__glow {
  position: absolute; left: calc(var(--gx) - var(--gw) / 2); top: calc(var(--gy) - var(--gh) / 2);
  width: var(--gw); height: var(--gh); border-radius: 50%;
  background: radial-gradient(closest-side, rgb(255 204 128 / .62), rgb(255 210 140 / .3) 50%, rgb(255 214 150 / 0));
  mix-blend-mode: soft-light; opacity: 0;
}
.research__glow[data-island="0"] { --gx: 17.9%; --gy: 64.4%; --gw: 30%; --gh: 40%; }
.research__glow[data-island="1"] { --gx: 49.2%; --gy: 37%; --gw: 24%; --gh: 32%; }
.research__glow[data-island="2"] { --gx: 82.9%; --gy: 38.5%; --gw: 28%; --gh: 38%; }
/* Orla: a layer the size of the picture, moved so its corner is her foot
   (--x, --y); at rest, on the secondary school's pitch, in the centre circle
   (1976, 570) */
.research__orla { position: absolute; inset: 0; translate: var(--x, 82.333%) var(--y, 42.222%); }
/* her contact shadow, under her foot */
.research__shadow {
  position: absolute; left: 0; top: 0; width: 3.4%; height: 1.5%; translate: -50% -55%;
  border-radius: 50%; background: radial-gradient(closest-side, rgb(86 56 34 / .42), rgb(86 56 34 / .16) 60%, rgb(86 56 34 / 0));
}
/* the official render (orli-orla-256: the ball 75% of the canvas, its foot on
   the bottom edge), the ball 4% of the picture's width as the bridges allow;
   warmed only a touch (sepia .12, no loss of saturation) so she sits in the
   picture's golden light and stays the brand's green */
.research__ball {
  position: absolute; left: 0; top: 0; width: 5.333%; aspect-ratio: 1;
  translate: -50% -100%; transform-origin: 50% 100%;
}
.research__ball img { display: block; width: 100%; height: 100%; filter: sepia(.12); }
/* On a phone 5.3% of the picture is about 17px: she stays at least 24px (her
   foot on the same point of the bridge), so her journey still reads. */
@media (max-width: 599.98px) {
  .research__ball { width: max(5.333%, 24px); }
  .research__shadow { width: max(3.4%, 15px); height: max(1.5%, 6px); }
}
.research__blink { position: absolute; inset: 0; opacity: 0; }
.research__art[data-journey="ready"] .research__orla { opacity: 0; }
.research__art[data-journey="play"] :is(.research__orla, .research__ball) { will-change: translate, scale; }
/* the three stages, plain text: three columns whose centres sit under the
   islands (15.2%, 50%, 84.8% of the picture's width, measured on the 2400
   picture with the float's -3% inset; true at every width, because the
   picture always fills the column) */
.research__path {
  display: grid; grid-template-columns: 30.4fr 39.2fr 30.4fr;
  margin: 0; padding: 0; list-style: none;
}
.research__stop { display: grid; justify-items: center; align-content: start; row-gap: 2px; padding-inline: var(--o-space-2); text-align: center; }
.research__name { font: var(--o-weight-title) var(--o-text-body) / 1.25 var(--o-font-ui); letter-spacing: var(--o-track-heading); text-wrap: balance; }
.research__where { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: balance; }
/* while she travels (full motion, home.js): the stage she's on is in full ink,
   the others muted (still 5:1 on the canvas); before she starts (waiting to
   be seen) Year 6 is in ink. Without script, or in Reduced or Still motion,
   there's no data-journey and all three are in full ink. */
.research__art[data-journey] :is(.research__name, .research__where) { transition: color 520ms var(--o-ease); }
.research__art[data-journey] .research__name { color: color-mix(in srgb, var(--o-ink) 72%, var(--o-section-bg, var(--o-canvas))); }
.research__art[data-journey] .research__where { color: color-mix(in srgb, var(--o-ink-2) 88%, var(--o-section-bg, var(--o-canvas))); }
.research__art[data-at="0"] .research__stop:nth-child(1) .research__name,
.research__art[data-at="1"] .research__stop:nth-child(2) .research__name,
.research__art[data-at="2"] .research__stop:nth-child(3) .research__name { color: var(--o-ink); }
.research__art[data-at="0"] .research__stop:nth-child(1) .research__where,
.research__art[data-at="1"] .research__stop:nth-child(2) .research__where,
.research__art[data-at="2"] .research__stop:nth-child(3) .research__where { color: var(--o-ink-2); }
/* narrow: smaller words; the stages stay under their islands */
@media (max-width: 599px) {
  .research__in { row-gap: var(--o-space-6); }
  .research__stop { padding-inline: 2px; }
  .research__name { font-size: .9375rem; }
  .research__where { font-size: .8125rem; line-height: 1.35; }
}
/* at rest after her journey, in full motion only: now and then she blinks,
   and every so often gives a small bob where she sits */
.is-moving .research__art[data-journey="rest"] .research__ball { animation: research-bob 6.8s ease-in-out 1.2s infinite; }
.is-moving .research__art[data-journey="rest"] .research__shadow { animation: research-bob-shadow 6.8s ease-in-out 1.2s infinite; }
.is-moving .research__art[data-journey="rest"] .research__blink { animation: research-blink 5.3s steps(1, end) 2.6s infinite; }
@keyframes research-bob {
  0%, 74%, 100% { translate: -50% -100%; scale: 1 1; }
  78% { translate: -50% -100%; scale: 1.06 .94; }
  84% { translate: -50% -114%; scale: .97 1.03; }
  90% { translate: -50% -100%; scale: 1.05 .95; }
  95% { translate: -50% -100%; scale: 1 1; }
}
@keyframes research-bob-shadow {
  0%, 74%, 90%, 100% { scale: 1; opacity: 1; }
  84% { scale: .82; opacity: .7; }
}
@keyframes research-blink { 0%, 95.6% { opacity: 0; } 96%, 98.3% { opacity: 1; } 98.4%, 100% { opacity: 0; } }

/* ================================================== evidence and voices
   The head teacher's words on paper (the section's focal point), the case
   study under them; beside both, the programme with its four figures, its
   limit and its source note. Each card says what it can't show. */
.evidence__grid { display: grid; gap: var(--o-space-5); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .evidence__quote { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: var(--o-space-8); align-items: end; }
}
/* the programme across the band: its title and numbers, the four rings in a row from 1100px (two by two below) */
@media (min-width: 1100px) { .evidence__card:not(.evidence__case) .evidence__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 900px) {
  .evidence__card:not(.evidence__case) .evidence__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .evidence__card:not(.evidence__case) .o-card__body { padding: var(--o-space-7); }
}
@media (min-width: 1100px) { .evidence__card:not(.evidence__case) .evidence__stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* the case study on its side from 900px: its picture on the left, its story on the right */
@media (min-width: 900px) {
  .evidence__case { flex-direction: row; }
  .evidence__case .evidence__art { flex: 0 0 44%; aspect-ratio: auto; position: relative; }
  .evidence__case .evidence__art > img { position: absolute; inset: 0; }
  .evidence__case .o-card__body { padding: var(--o-space-7); }
}
.evidence__quote {
  position: relative; isolation: isolate; overflow: clip;
  display: grid; gap: var(--o-space-5); margin: 0;
  padding: var(--o-space-8) var(--o-space-8) var(--o-space-7);
  border-radius: var(--o-r-card); background: var(--w-orla-deep); color: var(--o-paper);
  box-shadow: var(--o-shadow-raised);
}
/* the felt star (the hero's) resting on the card's corner */
.evidence__star { position: absolute; inset-block-start: var(--o-space-5); inset-inline-end: var(--o-space-6); width: 60px; height: 60px; rotate: 12deg; filter: drop-shadow(0 0 12px rgb(255 226 168 / .45)) drop-shadow(0 4px 6px rgb(0 0 0 / .2)); pointer-events: none; }
.is-moving .evidence__star { animation: evidence-star 7s ease-in-out infinite; }
@keyframes evidence-star { 0%, 100% { translate: 0 0; rotate: 12deg; } 50% { translate: 0 -7px; rotate: 2deg; } }
.evidence__quote blockquote { margin: 0; }
.evidence__quote blockquote p {
  font: var(--o-weight-ui) clamp(1.375rem, 1.2rem + .7vw, 1.75rem) / 1.38 var(--o-font-ui); letter-spacing: -.012em;
  color: var(--o-paper); text-wrap: pretty;
}
.evidence__quote blockquote p::before { content: "“"; } .evidence__quote blockquote p::after { content: "”"; }
.evidence__quote figcaption { display: grid; gap: 2px; padding-block-start: var(--o-space-4); border-block-start: 1px solid rgb(255 255 255 / .22); }
/* Rob's photo (2 Nov): a circle beside his name and role, his face centred, with a thin cream
   ring that echoes the card's stitch; the name and role sit to its right, centred on it */
.evidence__quote figcaption { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--o-space-3); align-items: center; }
.evidence__face {
  grid-row: 1 / span 2; width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
  box-shadow: 0 0 0 2px rgb(255 246 228 / .85), 0 3px 8px -2px rgb(0 0 0 / .35);
}
.evidence__quote figcaption > .evidence__name { grid-column: 2; align-self: end; }
.evidence__quote figcaption > .evidence__role { grid-column: 2; align-self: start; }
@media (forced-colors: active) { .evidence__face { box-shadow: none; outline: 1px solid CanvasText; } }
.evidence__name { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: #fff; }
.evidence__role { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: rgb(255 253 248 / .8); }
@media (min-width: 900px) {
  /* the quote across the band, its speaker beside its last line */
  .evidence__quote figcaption { padding-block-start: 0; padding-inline-start: var(--o-space-5); border-block-start: 0; border-inline-start: 1px solid rgb(255 255 255 / .22); }
}
.evidence__card .o-card__body { gap: var(--o-space-3); padding: var(--o-space-6); }
.evidence__meta { color: var(--o-ink-2); text-wrap: pretty; }
.evidence__story { text-wrap: pretty; }
.evidence__stats {
  display: grid; gap: var(--o-space-4) var(--o-space-5); grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  align-self: stretch; margin: var(--o-space-2) 0; padding: 0; list-style: none;
}
/* each figure as a ring filled to its own percentage, the number and its words beside it */
.evidence__stats > li {
  display: grid; grid-template-columns: 64px minmax(0, 1fr); column-gap: var(--o-space-4); row-gap: 2px; align-content: start; align-items: start;
  padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line);
}
.evidence__ring { grid-row: 1 / span 2; width: 64px; height: 64px; rotate: -90deg; overflow: visible; }
.evidence__ring-track, .evidence__ring-fill { fill: none; stroke-width: 6.5; }
.evidence__ring-track { stroke: var(--w-orla-soft); }
.evidence__ring-fill { stroke: var(--o-action); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.evidence__stats.is-armed:not([data-in]) .evidence__ring-fill { stroke-dasharray: 0 100; }
.evidence__stats.is-armed .evidence__ring-fill { transition: stroke-dasharray 1500ms var(--o-ease); }
.evidence__stats.is-armed > li:nth-child(2) .evidence__ring-fill { transition-delay: 140ms; }
.evidence__stats.is-armed > li:nth-child(3) .evidence__ring-fill { transition-delay: 280ms; }
.evidence__stats.is-armed > li:nth-child(4) .evidence__ring-fill { transition-delay: 420ms; }
.evidence__n { grid-column: 2; font: var(--o-weight-title) var(--o-text-title) / 1 var(--o-font-ui); letter-spacing: var(--o-track-title); font-variant-numeric: tabular-nums; }
.evidence__n sup { font-size: .4em; margin-inline-start: 2px; vertical-align: super; }
.evidence__n sup a { color: var(--o-action); text-decoration: none; padding: 0 2px; border-radius: 4px; }
.evidence__n sup a:hover { text-decoration: underline; }
.evidence__n sup a { position: relative; }
.evidence__n sup a::after { content: ""; position: absolute; inset: -6px -9px; }
.evidence__label { grid-column: 2; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
/* the case study's picture: the hero school's playground, drifting closer very slowly */
.evidence__art { --ratio: 16 / 10; }
.is-moving .evidence__art > img { animation: evidence-drift 24s ease-in-out infinite alternate; }
@keyframes evidence-drift { from { scale: 1; } to { scale: 1.07; translate: -1.2% -1%; } }
/* (a warm note inside a card: 16 / 24px inside, never wider than 68
   characters; meta and source lines 72ch at most; spacing rules, 2 Nov) */
.evidence__meta, .evidence__source { max-inline-size: 72ch; }
.evidence__limit {
  align-self: flex-start; max-inline-size: 68ch; padding: var(--o-space-4) var(--o-space-5);
  border-radius: var(--o-r-control); background: var(--o-warm);
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink); text-wrap: pretty;
}
.evidence__source { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; }
.evidence__card .o-link--arrow { margin-block-start: var(--o-space-1); }
/* the programme card runs the height of the quote and the case study: its
   limit and source note sit at its foot */
.evidence__card .evidence__limit { margin-block-start: var(--o-space-2); }
.evidence__all { margin-block-start: var(--o-space-6); }
/* no lone last word on a phone ("…what we’re / investigating") */
.evidence__all a { text-wrap: balance; }
/* The other named voices (Ryan's batch, 3 Nov): four calm quote cards, two
   by two from 600px, in the programme card's felt and stitch (a faint felt
   grain, a sage running stitch just inside the edge). The words at a
   comfortable reading size in curly quotes, as the head teacher's; under
   them a hairline and the speaker exactly as the old site published them
   (the name, then the role and school; the comma between is for screen
   readers). The cards in a row share one height, so the speakers line up. */
ul.evidence__voices {
  display: grid; gap: var(--o-space-5); grid-template-columns: minmax(0, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { ul.evidence__voices { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.evidence__say { isolation: isolate; }
.evidence__say::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .045; mix-blend-mode: multiply;
}
.evidence__say::after {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .3); border-radius: calc(var(--o-r-card) - 8px);
}
.evidence__say > figure {
  position: relative; z-index: 1; flex: 1;
  display: flex; flex-direction: column; gap: var(--o-space-5);
  margin: 0; padding: var(--o-space-7) var(--o-space-7) var(--o-space-6);
}
.evidence__say blockquote { flex: 1; margin: 0; }
.evidence__say blockquote p {
  max-inline-size: 40em;
  font: var(--o-weight-body) var(--o-text-lead) / 1.5 var(--o-font-ui); letter-spacing: -.005em;
  color: var(--o-ink); text-wrap: pretty;
}
.evidence__say blockquote p::before { content: "“"; } .evidence__say blockquote p::after { content: "”"; }
.evidence__say figcaption {
  display: grid; gap: 2px; padding-block-start: var(--o-space-4);
  border-block-start: 1px solid var(--o-line);
}
.evidence__say-name { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-ink); }
.evidence__say-role { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
@media (max-width: 599px) {
  .evidence__say > figure { padding: var(--o-space-6) var(--o-space-5) var(--o-space-5); gap: var(--o-space-4); }
}
@media (max-width: 599px) {
  /* (Rory rides the 75% ring's left edge: 12px in, he clears the card's stitch) */
  .evidence__stats > li { padding-inline-start: var(--o-space-3); }
  .evidence__quote { padding: var(--o-space-7) var(--o-space-5) var(--o-space-5); }
  .evidence__quote blockquote p { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); }
  .evidence__star { width: 44px; height: 44px; inset-block-start: var(--o-space-3); inset-inline-end: var(--o-space-4); }
  .evidence__card .o-card__body { padding: var(--o-space-5); }
}

/* Orli magic (Ryan, 2 Nov, notes 5 and 6; img/magic/SPEC.md): three Orlis
   peek over the head teacher's quote (now a felt patch: felt grain and a
   running stitch, like the star), and on the programme card each figure's
   ring is in one Orli's colour with that Orli riding its end (colour only).
   All of it is decoration (alt="", aria-hidden) and none of it covers a
   note. The three sit behind the card's top edge (the card is drawn over
   them), so only their tops show: each image is a 1:1 canvas with the ball
   75% of its width and its foot on the bottom edge. */
.evidence__voice { --peek: 128px; position: relative; isolation: isolate; padding-block-start: 52px; }
.evidence__peek {
  position: absolute; z-index: 0; inset-block-start: -38px; inset-inline-end: clamp(var(--o-space-7), 12%, 160px);
  display: flex; align-items: flex-end; pointer-events: none;
}
/* each sits so its eyes clear the edge (--t: how far it sinks, as a share of
   the image; measured per render) and leans out a little */
.evidence__orli {
  position: relative; display: block; flex: none; width: var(--peek); aspect-ratio: 1; margin-inline: calc(var(--peek) * -.13);
  translate: 0 calc(var(--peek) * var(--t, 0)); filter: drop-shadow(0 3px 6px rgb(60 57 50 / .14));
}
.evidence__orli img { display: block; width: 100%; height: 100%; }
.evidence__orli:nth-child(1) { rotate: -8deg; }
.evidence__orli:nth-child(2) { z-index: 1; }
.evidence__orli:nth-child(3) { rotate: 7deg; }
.evidence__orli[data-orli="orla"] { --t: 0; }      /* eyes and smile over the edge */
.evidence__orli[data-orli="luna"] { --t: -.05; }   /* her laugh over it */
.evidence__orli[data-orli="finn"] { --t: .03; }    /* just his eyes: the one peeking */
.evidence__quote { z-index: 1; }
/* the quote card as a felt patch: the felt grain over the deep green, a running stitch just inside its edge */
.evidence__quote::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .28; mix-blend-mode: soft-light;
}
.evidence__quote::after {
  content: ""; position: absolute; inset: 12px; z-index: -1; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .32); border-radius: calc(var(--o-r-card) - 10px);
}
/* the rings in the Orlis' colours (none is a world's navy; the 75% ring is Rory's red, 2 Nov) */
.evidence__stats > li[data-orli="orla"] { --ring: var(--w-orla-accent); --track: var(--w-orla-soft); }
.evidence__stats > li[data-orli="luna"] { --ring: var(--w-luna-accent); --track: var(--w-luna-soft); }
.evidence__stats > li[data-orli="nova"] { --ring: var(--w-nova-accent); --track: var(--w-nova-soft); }
.evidence__stats > li[data-orli="joy"]  { --ring: var(--w-joy-accent);  --track: var(--w-joy-soft); }
.evidence__stats > li[data-orli="zeke"] { --ring: var(--w-zeke-accent); --track: var(--w-zeke-soft); }
.evidence__stats > li[data-orli="rory"] { --ring: var(--w-rory-accent); --track: var(--w-rory-soft); }   /* a spare, if Zeke's blue is swapped out */
.evidence__stats > li[data-orli] .evidence__ring { grid-column: 1; }
.evidence__stats > li[data-orli] .evidence__ring-track { stroke: var(--track); }
.evidence__stats > li[data-orli] .evidence__ring-fill { stroke: var(--ring); }
/* each Orli rides the end of its ring's arc: centred on the ring, turned to the
   figure's angle, pushed out to the ring's radius (23/56 of 64px), turned back upright */
@property --evidence-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.evidence__roll {
  --evidence-a: calc(var(--p) * 3.6deg);
  grid-column: 1; grid-row: 1 / span 2; align-self: start; justify-self: start; z-index: 1;
  width: 40px; height: 40px; margin: 12px; pointer-events: none;
  transform: rotate(var(--evidence-a)) translateY(-26.3px) rotate(calc(-1 * var(--evidence-a)));
  filter: drop-shadow(0 1px 1.5px rgb(60 57 50 / .25));
}
.evidence__stats.is-armed:not([data-in]) .evidence__roll { --evidence-a: 0deg; opacity: 0; }
.evidence__stats.is-armed .evidence__roll { transition: --evidence-a 1500ms var(--o-ease), opacity 300ms var(--o-ease); }
.evidence__stats.is-armed > li:nth-child(2) .evidence__roll { transition-delay: 140ms; }
.evidence__stats.is-armed > li:nth-child(3) .evidence__roll { transition-delay: 280ms; }
.evidence__stats.is-armed > li:nth-child(4) .evidence__roll { transition-delay: 420ms; }
/* first time it's seen, in full motion: the card rises in (data-reveal), then
   the three come up from behind it one after another */
.evidence__voice.is-armed:not([data-in]) .evidence__orli { translate: 0 calc(var(--peek) * .82); }
.evidence__voice.is-armed .evidence__orli { transition: translate 900ms var(--o-settle) 380ms; }
.evidence__voice.is-armed .evidence__orli:nth-child(2) { transition-delay: 540ms; }
.evidence__voice.is-armed .evidence__orli:nth-child(3) { transition-delay: 700ms; }
/* then, in full motion only: a slow bob each, out of step, and Orla blinks now and then */
.is-moving .evidence__voice[data-in]:not(.is-armed) .evidence__orli { animation: evidence-bob 6.5s ease-in-out infinite; }
.is-moving .evidence__voice[data-in]:not(.is-armed) .evidence__orli:nth-child(2) { animation-duration: 7.4s; animation-delay: -2.2s; }
.is-moving .evidence__voice[data-in]:not(.is-armed) .evidence__orli:nth-child(3) { animation-duration: 5.9s; animation-delay: -4.1s; }
@keyframes evidence-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
.evidence__orli .evidence__blink { position: absolute; inset: 0; opacity: 0; }
.is-moving .evidence__voice[data-in]:not(.is-armed) .evidence__blink { animation: evidence-blink 5.2s steps(1, end) 1.4s infinite; }
@keyframes evidence-blink { 0%, 95.5% { opacity: 0; } 96%, 98.4% { opacity: 1; } 98.5%, 100% { opacity: 0; } }
/* Orli magic on the other two cards too (review of notes 5 and 6, 2 Nov): the felt-and-stitch of
   the quote card carried across, all of it decoration and none of it over a note or source line.
   - the riders are the real Orlis (Ryan, 2 Nov: "use our orlis"), rendered from their own felt GLBs
     with their own morphs (img/magic/rider-*-112): Orla calm, Luna laughing, Joy happy, Rory with
     his smile and rosy cheeks; 40px. Nova sits this one out: her sweat drop reads worried on a good stat
   - the programme card: a sage running stitch just inside its edge, on a faint felt grain
   - the case study: its photo sewn on (a cream stitch), a felt Orli peeking up over the photo's
     bottom edge, and its "Whole school · Years 1–6 · Sunderland" on a little felt tag
   Reduced and Still motion: all of it is simply there; nothing moves. */
.evidence__card:not(.evidence__case)::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .045; mix-blend-mode: multiply;
}
.evidence__card:not(.evidence__case)::after {
  content: ""; position: absolute; inset: 10px; z-index: 0; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .3); border-radius: calc(var(--o-r-card) - 8px);
}
.evidence__card > .o-card__body { position: relative; z-index: 1; }
.evidence__art { position: relative; isolation: isolate; }
.evidence__art::after {
  content: ""; position: absolute; inset: 10px; z-index: 2; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .7); border-radius: calc(var(--o-r-card) - 8px);
}
@media (min-width: 900px) { .evidence__case .evidence__art::after { border-radius: calc(var(--o-r-card) - 8px) 6px 6px calc(var(--o-r-card) - 8px); } }
@media (max-width: 899.98px) { .evidence__case .evidence__art::after { border-radius: calc(var(--o-r-card) - 8px) calc(var(--o-r-card) - 8px) 6px 6px; } }
.evidence__peeker {
  position: absolute; z-index: 3; inset-block-end: 0; inset-inline-end: 9%;
  width: clamp(76px, 18%, 104px); aspect-ratio: 1; translate: 0 34%; pointer-events: none;
  filter: drop-shadow(0 -2px 6px rgb(60 57 50 / .22));
}
.evidence__peeker img { display: block; width: 100%; height: 100%; }
.is-moving .evidence__peeker { animation: evidence-peeker 5.6s ease-in-out infinite; }
@keyframes evidence-peeker { 0%, 100% { translate: 0 34%; rotate: 0deg; } 45% { translate: 0 24%; rotate: -4deg; } 60% { translate: 0 25%; rotate: 2deg; } }
.evidence__tag {
  position: relative; align-self: flex-start; rotate: -1.5deg; margin-block-end: var(--o-space-1);
  padding: 7px 16px 8px; border-radius: 8px;
  background: var(--w-orla-soft) url(img/magic/felt-grain-256.webp) 0 0 / 200px 200px; background-blend-mode: soft-light;
  box-shadow: 0 1px 1px rgb(60 57 50 / .1), 0 3px 8px -4px rgb(60 57 50 / .3);
  font: var(--o-weight-strong) var(--o-text-small) / 1.3 var(--o-font-ui); color: var(--w-orla-deep);
}
.evidence__tag::after {
  content: ""; position: absolute; inset: 3px; pointer-events: none;
  border: 1.5px dashed rgb(25 84 64 / .42); border-radius: 6px;
}
@media (forced-colors: active) {
  .evidence__card::after, .evidence__art::after, .evidence__card::before, .evidence__say::before, .evidence__say::after { display: none; }
  .evidence__tag { border: 1px solid CanvasText; }
}
@media (max-width: 599px) {
  .evidence__voice { --peek: 72px; padding-block-start: 30px; }
  /* narrow: the three move to the card's left, so the star keeps the right corner to itself */
  .evidence__peek { inset-block-start: -21px; inset-inline: var(--o-space-6) auto; }
  .evidence__quote::after { inset: 8px; border-radius: calc(var(--o-r-card) - 7px); }
}

/* ======================================================== offer and box */
/* The page's one deep band (the closing ask is this band on every page), so
   the ask is unmistakably its own. Only the band is deep: everything is on
   the card, which keeps the light page's ink and focus ring. */
.trial { --o-section-bg: var(--o-action-press); }
/* The one card: the words and the two kit sizes on the left (5 of 11), the
   box on the right (6 of 11) on the canvas behind a hairline, as the
   trial-box demo. Under 900px the box follows the words, as it does in the
   DOM and the Tab order (WCAG 1.3.2, 2.4.3). */
.trialcard { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); overflow: clip; }
.trialcard__words { padding: var(--o-space-7); margin: 0; align-self: center; }
.trialcard__words .o-title { max-inline-size: 14ch; }
.trialcard__art {
  position: relative; display: grid; align-content: center; min-width: 0;
  /* (from 1100px the words column is the taller: the box sits level with the title, not
     floating mid-way; review, 2 Nov) */
  padding: var(--o-space-6);
  border-inline-start: 1px solid var(--o-line);
  background: var(--o-canvas);
}
/* Room for the box before its module draws (no jump below it) */
.trialcard__box:empty { min-block-size: 32rem; }
.trialcard__still { display: grid; gap: var(--o-space-3); margin: 0; }
.trialcard__still img { border-radius: var(--o-r-card); }
.trialcard__note { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); max-inline-size: 46ch; text-wrap: pretty; }
/* (a ruled aside: 32px above its rule, 24px under it; spacing rules, 2 Nov) */
ul.trialcard__talk { display: grid; gap: var(--o-space-3); margin: var(--o-space-4) 0 0; padding: var(--o-space-5) 0 0; list-style: none; border-block-start: 1px solid var(--o-line); align-self: stretch; }
.trialcard__talk li { color: var(--o-ink-2); text-wrap: pretty; }
.trialcard__talk .o-link { font-weight: var(--o-weight-strong); white-space: nowrap; }

/* The two kit sizes: each a choice (which box shows) and its own way to
   order. The chosen one has an ink edge and a filled mark (not colour
   alone); its Get Orli free is the primary button (home.js).
   One kit to a row (Ryan, 2 Nov, note 8: nothing squashed), 16px apart,
   24px inside (the card's 24px corners), each kit's name and price on one
   line where they fit. Its button sits under its words, lined up with
   them; once the words column is 34em or wider (one column, 600-899px) it
   moves to the end of the kit's row. */
.kits {
  display: grid; gap: var(--o-space-4); grid-template-columns: minmax(0, 1fr);
  align-self: stretch; margin: var(--o-space-2) 0 0; padding: 0; list-style: none;
}
.kit {
  display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-4); min-width: 0;
  padding: var(--o-space-5);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  background: var(--o-surface);
  transition: border-color var(--o-t-interact) var(--o-ease), box-shadow var(--o-t-interact) var(--o-ease);
}
.kit[data-on] { border-color: var(--o-ink); box-shadow: inset 0 0 0 1px var(--o-ink); }
.kit__pick {
  display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: var(--o-space-1) var(--o-space-3); align-content: start;
  width: 100%; min-block-size: var(--o-target); margin: 0; padding: 0;
  border: 0; border-radius: var(--o-r-control); background: none;
  font: inherit; color: inherit; text-align: start;
}
button.kit__pick { cursor: pointer; }
button.kit__pick:focus-visible { outline: var(--o-focus-ring); outline-offset: var(--o-focus-offset); }
.kit__tick {
  grid-column: 1; grid-row: 1; align-self: start; translate: 0 2px;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid var(--o-n4); background: var(--o-surface);
}
.kit__pick[aria-pressed="true"] .kit__tick { border-color: var(--o-action); background: var(--o-action); box-shadow: inset 0 0 0 4px var(--o-surface); }
.kit__title { grid-column: 2; font: var(--o-weight-title) var(--o-text-lead) / 1.25 var(--o-font-ui); letter-spacing: var(--o-track-heading); text-wrap: balance; }
.kit__price { grid-column: 2; font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: balance; }
.kit__go { justify-self: start; margin-inline-start: calc(22px + var(--o-space-3)); }
html:not(.js) .kit__go { margin-inline-start: 0; }
html:not(.js) .kit__tick { display: none; }
html:not(.js) .kit__pick { grid-template-columns: minmax(0, 1fr); }
html:not(.js) .kit__pick > * { grid-column: 1; }
@media (hover: hover) and (pointer: fine) {
  .kit:not([data-on]):has(button.kit__pick:hover) { border-color: var(--o-n4); }
}

@media (min-width: 1100px) { .trialcard__art { align-content: start; padding-block-start: var(--o-space-7); } }
@media (max-width: 1099px) {
  .trialcard__words { padding: var(--o-space-7) var(--o-space-6); }
  .trialcard__art { padding: var(--o-space-5); }
}
/* (900-1099px, still side by side: the box level with the title too, as
   from 1100px, not centred between empty bands; review, 2 Nov) */
@media (min-width: 900px) and (max-width: 1099px) { .trialcard__art { align-content: start; padding-block-start: var(--o-space-7); } }
@media (max-width: 899px) {
  .trialcard { grid-template-columns: minmax(0, 1fr); }
  .trialcard__words { padding: var(--o-space-6) var(--o-space-5); }
  .trialcard__art { padding: var(--o-space-4) var(--o-space-4) var(--o-space-5); border-inline-start: 0; border-block-start: 1px solid var(--o-line); }
}
@media (max-width: 599px) {
  .trialcard__art { padding: var(--o-space-4) var(--o-space-4) var(--o-space-5); }
  .trialcard__box:empty { min-block-size: 24rem; }
}
/* Under 400px: the words 16px from the card's edge (as the box under them),
   so the kits keep their 24px inside and their words more room. */
@media (max-width: 399.98px) {
  .trialcard__words { padding-inline: var(--o-space-4); }
}
/* The box module in the card (spacing rules, 2 Nov): 16px between its
   stage, caption, buttons and list (a button's lip and pop need it), 12px
   between its buttons; once the card is one column, its words and buttons
   line up with the card's words, 24px from the card's edge. (Scoped here,
   so the trial-box demo is untouched.) */
.trialcard__art .tb { gap: var(--o-space-4); }
.trialcard__art .tb__bar { gap: var(--o-space-3); }
@media (max-width: 899px) {
  .trialcard__art .tb > :not(.tb__stage) { padding-inline: var(--o-space-2); }
}
/* A wide words column (one column, 600-899px): each kit's button at the
   end of its row. */
.trialcard__words { container: offer-words / inline-size; }
@container offer-words (width >= 34em) {
  .kit { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--o-space-5); }
  .kit__go { margin-inline-start: 0; }
}

/* ================================================================== FAQ */
/* The shared component (components/faq/faq.css). The header on the left,
   staying in view while the groups pass (as schools.html and about.html);
   above them on narrow screens. */
.home-faq__in { display: grid; gap: var(--o-head-gap); grid-template-columns: minmax(0, 1fr); align-items: start; }
.home-faq__head { margin: 0; }
@media (min-width: 900px) {
  .home-faq__in { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: var(--o-space-8); }
  .home-faq__head { position: sticky; top: calc(var(--o-header-h) + var(--o-space-6)); }
}
.faq__a p + p { margin-block-start: var(--o-space-3); }
/* group names in two even lines on a phone, never "Data, and what comes / next" */
.faq__group-button > span:first-child { text-wrap: balance; }

/* ============================================================ motion modes */
.nowrap { white-space: nowrap; }
html[data-motion="still"] :is(.how__n, .how__stage > .how__pic, .kit) { transition: none !important; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .how__stage > .how__pic { transition: none; }
}

/* Software renderer: the soft shadows cost the most per frame, so they go flat. */
html[data-gpu="soft"] :is(.o-card, .ps-dev__frame, .evidence__quote) { box-shadow: 0 1px 0 var(--o-line); }
html[data-gpu="soft"] .evidence__quote::before { display: none; }
html[data-gpu="soft"] :is(.evidence__orli, .evidence__roll, .research__ball img) { filter: none; }
html[data-gpu="soft"] .research__glow { display: none; }

@media (forced-colors: active) {
  /* drawn marks (masks over a fill, circles) keep their shape in system colours */
  .how__n { forced-color-adjust: none; background: Canvas; color: CanvasText; border: 2px solid CanvasText; }
  .how__body.is-live .how__step[data-on] .how__n { background: Highlight; color: HighlightText; border-color: Highlight; }
  .path__mark { border: 2px solid CanvasText; }
  .path::before { forced-color-adjust: none; }
  .kit { border: 1px solid CanvasText; }
  .kit[data-on] { border-width: 3px; }
  .kit__tick { forced-color-adjust: none; border-color: CanvasText; background: Canvas; }
  .kit__pick[aria-pressed="true"] .kit__tick { background: Highlight; border-color: Highlight; box-shadow: inset 0 0 0 4px Canvas; }
  .evidence__limit { border: 1px solid CanvasText; }
  /* the felt goes; Orla keeps her picture, without its glow and shadow */
  .evidence__quote::before, .evidence__quote::after { display: none; }
  .research__glow, .research__shadow { display: none; }
}

/* =================================================== small reveals
   home.js arms these (.is-armed) only in full motion, and lets go once
   they're in (data-in), so a hover's own transition is never delayed.
   Without script, or under Reduced or Still motion, everything is simply
   there and nothing floats (.is-moving is full motion only). */
.is-armed { transition: opacity 760ms var(--o-ease), translate 760ms var(--o-ease); transition-delay: calc(var(--i, 0) * 120ms); }
.is-armed:not([data-in]) { opacity: 0; translate: 0 22px; }
/* A card an address jumps to (index.html#fits-routines) is simply there:
   its 22px rise-in would otherwise be counted into the jump and then lift
   it under the header. (The hero's places go to other pages now: Ryan's
   review, 3 Nov.) */
.is-armed:target { opacity: 1; translate: none; transition: none; }
.evidence__stats.is-armed:not([data-in]) { translate: none; opacity: 1; }