/* Orli v3 site · Who we are (about.html)
   ---------------------------------------------------------------------------
   The v2 system (tokens, layout, components) plus this page's own layouts,
   brought up to the home page's finish (3 Nov): its sky, its felt and
   running stitch, its logo strip, its programme rings and its voices.
   System tokens only; the felt grain, the felt star and the sky are the
   home page's own pictures (home/img/magic, ../hero/school/assets).

   Sections, top to bottom (one focal point each):
     hero      the title in the home page's warm sky, and the team's own
               Orlis as a class photo on its cloud bank
     story     why we exist, beside its two real photos, sewn on
     approach  four principles, each beside an Orli on a felt mat (warm band)
     team      the founders on two felt cards, then everyone on a felt disc
               with their Orli and their photo; their words in a disclosure
     road      the milestones on a shooting-star path across five islands,
               floating in the sky (about.js draws the path and the star)
     schools   the logo strip, as on the home page
     results   the Sunderland figures inside rings on a felt card, the
               source note, the one-pager (warm band)
     voices    the head teacher's words on a felt patch (the team's Orlis
               peeking over it), three more on cards
     questions six questions about us (components/faq/; warm band)
     contact   the one deep band: the team's faces, the trial, the one-pager
   ------------------------------------------------------------------------- */

/* ============================================================ felt, stitch
   The home page's craft language, in two helpers:
   .a-felt   a card with a faint felt grain and a sage running stitch just
             inside its edge (the programme card; the small quote cards
             keep the grain only, so the stitch stays special)
   .a-sewn   a photo frame with a cream running stitch just inside it (the
             case study's picture) */
.a-felt { isolation: isolate; }
.a-felt::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .045; mix-blend-mode: multiply;
}
.a-felt::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);
}
.a-felt > * { position: relative; z-index: 1; }
.a-quotes .a-felt::after { display: none; }
.a-sewn::before {
  content: ""; position: absolute; inset: 10px; z-index: 3; pointer-events: none;
  border: 2px dashed rgb(255 246 228 / .72); border-radius: calc(var(--o-r-card) - 8px);
}

/* ================================================================== hero
   The home page's sky (../hero/school), running up under the header (clear
   at the top, glass once scrolled), its cloud bank low on the right where
   the team stands, two hazy islands far off. The sky fades into the canvas
   before "On this page". */
.a-hero { position: relative; isolation: isolate; }
html.js .a-hero { margin-block-start: calc(-1 * var(--o-header-h)); }
.a-hero__stage {
  position: relative; isolation: isolate; overflow: clip;
  padding-block: calc(var(--o-header-h) + var(--o-space-8)) var(--o-space-8);
  /* the sky itself, 40 × 22 px, until the real one paints (the home hero's inlined copy) */
  background: #f6d6bd url("data:image/webp;base64,UklGRowAAABXRUJQVlA4IIAAAABwBQCdASooABYAPrVOo0wypCMiKrgKAlAWiWMAxm/FgM73bwzZV+IHRshZjqMvCq4X3EwAAP7wT1pagFFTJ9fzavn0c9WDHWGAf3xnkewRsa0GkRRbd/VoCl5mxw1cRX7ai8I5de+CJ4FJvYJmHC88VuBxyESQD8sgcNZi5aAAAA==") 50% 100% / cover no-repeat;
}
html:not(.js) .a-hero__stage { padding-block-start: var(--o-space-8); }
@media (max-width: 899.98px) {
  .a-hero__stage {
    padding-block: calc(var(--o-header-h) + var(--o-space-7)) var(--o-space-8);
    background-image: url("data:image/webp;base64,UklGRn4AAABXRUJQVlA4IHIAAABwBQCdASoUACQAPqVAmkmxI6KhNVv8AiAUiWUAt7g3EzpTDNG9PM1Fu5MYM8rJ/XsjqnXAAP7xQ2T/YqmZXrTGmsrRWVr29cXxp5Iwy7siQ3y+v6RGMX7mdcj2U+eYQHCDQISyvI2tWljOKiPpRMgAAAA=");
  }
}
.a-hero__sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.a-hero__sky picture { position: absolute; inset: 0; display: block; }
/* the picture runs a little below the stage, so its cloud bank settles low,
   under the words and round the team's feet */
.a-hero__sky-img {
  position: absolute; left: 0; bottom: -16%; display: block; width: 100%; height: 116%; max-width: none;
  object-fit: cover; object-position: 30% 100%;
}
@media (max-width: 899.98px) { .a-hero__sky-img { bottom: -8%; height: 108%; } }
/* the sky settles into the canvas */
.a-hero__sky::after {
  content: ""; position: absolute; inset: auto 0 0; height: 20%;
  background: linear-gradient(rgb(252 250 248 / 0), var(--o-canvas));
}
.a-hero__far { position: absolute; display: block; height: auto; opacity: .85; }
.a-hero__far--a { left: 49%; top: 21%; width: 7vw; opacity: .62; }
.a-hero__far--d { left: 86%; top: 17%; width: 9.5vw; opacity: .8; }
@media (max-width: 899.98px) {
  .a-hero__far--a { display: none; }
  .a-hero__far--d { left: auto; right: -5vw; top: auto; bottom: 34%; width: 24vw; opacity: .7; }
}

.a-hero__in { position: relative; align-items: center; row-gap: var(--o-space-7); }
/* a small laptop or a tablet on its side: two even columns, so the two buttons share a row */
@media (min-width: 900px) and (max-width: 1199.98px) { .a-hero__in { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-7); } }
.a-hero__head { margin-block-end: 0; }
.a-hero__head .o-display { max-inline-size: 11ch; }
.a-hero__head .o-lead { max-inline-size: 30rem; }
.a-hero__contents { margin-block-start: 0; }

/* The class photo: ten Orlis on three tiers, like a school photo, now on
   the sky's cloud bank with two soft clouds in front of the front row.
   Placed in container units, so the group scales as one picture. Lucas's
   Orli hops now and then (full motion only; about.js). */
.a-class { position: relative; display: grid; gap: var(--o-space-3); margin: 0; min-width: 0; }
.a-class__frame { position: relative; aspect-ratio: 3 / 2; container-type: inline-size; }
.a-class__orli {
  position: absolute; z-index: var(--z, 1);
  left: calc(var(--x) * 1%); bottom: calc(var(--y) * 1%);
  height: calc(var(--h) * 1cqw);
  translate: -50% 0;
}
.a-class__orli img { display: block; width: auto; height: 100%; max-width: none; }
/* each on a soft warm shadow, lighter than on paper: they stand on cloud */
.a-class__orli::before {
  content: ""; position: absolute; z-index: -1; left: calc(var(--sx, 50) * 1%); bottom: calc(var(--sy, 5) * 1%);
  width: calc(var(--sw, 15) * 1cqw); height: 2.2cqw; translate: -50% 50%; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(120 72 60 / .2), rgb(120 72 60 / 0));
}
/* back row: three, highest */
.a-class__orli--lucy    { --x: 25;   --y: 60; --h: 15;   --sw: 17; --sy: 9; }
.a-class__orli--lucas   { --x: 50;   --y: 60; --h: 17;   --sw: 12; --sy: 9; }
.a-class__orli--patrick { --x: 75;   --y: 60; --h: 15;   --sw: 12; --sx: 48; }
/* middle row: four, between the others */
.a-class__orli--ryan    { --x: 17;   --y: 36.5; --z: 2; --h: 14.5; --sw: 13; --sx: 52; --sy: 8; }
.a-class__orli--debbie  { --x: 38;   --y: 36.5; --z: 2; --h: 16;   --sw: 13; --sx: 52; --sy: 7; }
.a-class__orli--jazz    { --x: 62;   --y: 36.5; --z: 2; --h: 15.5; --sw: 12; --sx: 47; }
.a-class__orli--james   { --x: 84;   --y: 36.5; --z: 2; --h: 14;   --sw: 12; --sx: 56; }
/* front row: three, largest */
.a-class__orli--karla   { --x: 26;   --y: 12;  --z: 3; --h: 20;   --sw: 15; --sx: 49; }
.a-class__orli--mark    { --x: 50;   --y: 12;  --z: 3; --h: 20;   --sw: 15; --sx: 52; }
.a-class__orli--euan    { --x: 74;   --y: 12;  --z: 3; --h: 20;   --sw: 14; }
/* two of the home hero's clouds, drifting in front of the front row's feet line */
.a-class__cloud { position: absolute; z-index: 4; display: block; height: auto; max-width: none; pointer-events: none; opacity: .94; }
.a-class__cloud--l { left: -6cqw; bottom: -4.5cqw; width: 50cqw; }
.a-class__cloud--r { right: -8cqw; bottom: -4cqw; width: 46cqw; }
.a-class__caption { justify-self: center; margin-block-start: 3cqw; color: var(--o-ink-2); position: relative; z-index: 5; }

.a-class.is-bobbing .a-class__orli[data-bob] { animation: a-hop 5.2s var(--o-ease) infinite; }
.a-class.is-bobbing .a-class__orli[data-bob]::before { animation: a-hop-shadow 5.2s var(--o-ease) infinite; }
@keyframes a-hop {
  0%, 74%, 100% { translate: -50% 0; }
  81% { translate: -50% -1.8cqw; }
  88% { translate: -50% 0; }
  92% { translate: -50% -.35cqw; }
  95% { translate: -50% 0; }
}
@keyframes a-hop-shadow {
  0%, 74%, 88%, 100% { scale: 1; opacity: 1; }
  81% { scale: .78; opacity: .7; }
}

/* ================================================================= story
   The words on the left; on the right the two photos as a small scrapbook,
   each sewn on: the founders, and the workshop tucked over its corner. */
.a-story__in { display: grid; gap: var(--o-space-7); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 900px) {
  .a-story__in { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--o-space-8); align-items: center; }
  .a-story .o-title { max-inline-size: 18ch; }
}
.a-story .o-section-head { margin-block-end: var(--o-space-6); }
.a-story__prose { color: var(--o-ink-2); }
.a-story__prose > p { font-size: var(--o-text-body); }
/* The one moment in the story: the name, with the felt star beside it
   (the section's one decoration: "my light"). */
.a-story__prose > .a-story__name {
  color: var(--o-ink);
  font: var(--o-weight-title) var(--o-text-heading) / var(--o-lh-heading) var(--o-font-ui);
  letter-spacing: var(--o-track-heading);
  padding-block: var(--o-space-2);
}
.a-story__name em {
  font-style: normal;
  padding: .08em .3em; margin-inline: -.3em;
  background: radial-gradient(closest-side, rgb(255 222 160 / .62), rgb(255 222 160 / .3) 62%, rgb(255 222 160 / 0));
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.a-story__star { display: inline-block; vertical-align: middle; width: 48px; height: 48px; margin: -12px var(--o-space-3) -8px -2px; rotate: -10deg; }
.a-story__star img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 0 10px rgb(255 214 140 / .7)) drop-shadow(0 3px 5px rgb(60 57 50 / .2)); }
.is-moving .a-story__star { animation: a-twinkle 6.4s ease-in-out infinite; }
@keyframes a-twinkle { 0%, 100% { rotate: -10deg; scale: 1; } 50% { rotate: 2deg; scale: 1.06; } }

.a-story__media { display: grid; min-width: 0; }
.a-story__photo { position: relative; }
.a-story__photo .o-media__frame { box-shadow: var(--o-shadow); }
.a-story__photo--founders { rotate: -1deg; }
/* Ryan, 3 Nov: the two photos are the same size, one above the other, like a
   pair of prints (same width, same frame, cover-cropped round the faces) */
.a-story__photo--founders .o-media__frame,
.a-story__photo--making .o-media__frame { --ratio: 5 / 4; }
.a-story__photo--making { rotate: 1.5deg; margin-block-start: var(--o-space-6); }
.a-story__photo--making img { object-position: 40% 50%; }

/* ============================================================== approach
   Four principles, each beside an Orli standing on a small felt mat, with
   no card round them (the section is the warm band; the Orlis carry the
   colour). Four across from 1100 px, two by two from 600 px, and on a
   phone each Orli sits to the left of its words, so the four stay short. */
.a-principles {
  display: grid; gap: var(--o-space-7) var(--o-grid-gap); grid-template-columns: minmax(0, 1fr);
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 600px) { .a-principles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--o-space-8) var(--o-space-7); } }
@media (min-width: 1100px) { .a-principles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--o-grid-gap); } }
.a-principle { display: grid; align-content: start; gap: var(--o-space-5); min-width: 0; }
.a-principle__art {
  --mat: 150px;
  position: relative; isolation: isolate; display: grid; place-items: end start;
  inline-size: var(--mat); block-size: 132px; padding-block-end: 12px;
}
/* the felt mat: a soft oval of warm felt (a faint grain) under the Orli */
.a-principle__art::before {
  content: ""; position: absolute; z-index: -1; inset: auto 0 0; block-size: 34px; border-radius: 50%;
  background:
    linear-gradient(rgb(234 225 210 / .9), rgb(234 225 210 / .9)),
    url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px,
    #eae1d2;
  box-shadow: inset 0 2px 3px rgb(120 90 60 / .1), 0 1px 0 rgb(255 255 255 / .8);
}
.a-principle__art::after {
  content: ""; position: absolute; z-index: -1; left: 50%; bottom: 14px; inline-size: 64%; block-size: 16px;
  translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgb(60 57 50 / .26), rgb(60 57 50 / 0));
}
.a-principle__art img {
  display: block; justify-self: center; inline-size: calc(var(--w, 1) * 132px); max-inline-size: none; height: auto;
}
.a-principle__body { display: grid; gap: var(--o-space-2); align-content: start; }
.a-principle__title {
  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; max-inline-size: 18ch;
}
.a-principle__text { color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 34ch; }
@media (max-width: 599.98px) {
  .a-principles { gap: var(--o-space-6); }
  .a-principle { grid-template-columns: 96px minmax(0, 1fr); align-items: start; gap: var(--o-space-4); }
  .a-principle__art { --mat: 96px; block-size: 92px; padding-block-end: 8px; }
  .a-principle__art::before { block-size: 24px; }
  .a-principle__art::after { bottom: 9px; block-size: 12px; }
  .a-principle__art img { inline-size: calc(var(--w, 1) * 86px); }
  .a-principle__body { padding-block-start: var(--o-space-2); }
}

/* ================================================================== team */
.a-founders, .a-people { margin: 0; padding: 0; list-style: none; }
.a-person { min-width: 0; }
.a-person__name, .a-person__role { overflow-wrap: anywhere; }
.a-person__name { font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); letter-spacing: -.005em; }
.a-person__role { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.a-person__name + .a-person__role { margin-block-start: var(--o-space-1); }
.a-person__photo { flex: none; border-radius: 50%; object-fit: cover; background: var(--o-warm); }
/* the felt every Orli stands on: warm paper, the felt grain, a soft pool of light */
.a-person__art { position: relative; isolation: isolate; background: radial-gradient(58% 50% at 50% 60%, var(--o-paper), rgb(255 253 248 / 0)), var(--o-warm); }
.a-person__art::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .07; mix-blend-mode: multiply;
}
.a-person__orli { position: absolute; z-index: 1; object-fit: contain; object-position: 50% 100%; }

/* The founders: a felt card each, their Orli on top, their words below. */
.a-founders { display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr); margin-block-end: var(--o-space-9); }
@media (min-width: 900px) { .a-founders { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-person--lead {
  position: relative; display: grid; grid-template-rows: auto 1fr; overflow: clip;
  background: var(--o-surface); border: 1px solid var(--o-line); border-radius: var(--o-r-card); box-shadow: var(--o-shadow);
}
.a-person--lead .a-person__art { aspect-ratio: 2 / 1; }
.a-person--lead .a-person__orli { left: 50%; bottom: 13%; width: 70%; height: 72%; translate: -50% 0; filter: drop-shadow(0 10px 8px rgb(60 57 50 / .14)); }
.a-person--lead .a-person__body { display: grid; gap: var(--o-space-4); align-content: start; padding: var(--o-space-6); }
.a-person--lead .a-person__id { display: flex; align-items: center; gap: var(--o-space-4); }
.a-person--lead .a-person__id > div { min-width: 0; }
.a-person--lead .a-person__photo { width: 64px; height: 64px; box-shadow: 0 0 0 3px var(--o-surface), 0 0 0 4px var(--o-line); }
.a-person--lead .a-person__name { font-size: var(--o-text-heading); line-height: var(--o-lh-heading); letter-spacing: var(--o-track-heading); }
.a-person__quote { margin: 0; }
.a-person--lead .a-person__quote p { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); color: var(--o-ink); text-wrap: pretty; }
@media (max-width: 599.98px) {
  .a-person--lead .a-person__art { aspect-ratio: 16 / 10; }
  .a-person--lead .a-person__body { padding: var(--o-space-5); }
  .a-person--lead .a-person__photo { width: 56px; height: 56px; }
}

/* Ryan, 3 Nov: bigger Orlis and photos. Everyone else: their Orli on a round felt disc with a running stitch,
   their photo sewn on at its edge, their name and role under it. Four to
   a row from 768 px, two on a phone (not cards: a team gallery). */
.a-people {
  display: grid; gap: var(--o-space-7) var(--o-grid-gap);
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (min-width: 768px) { .a-people { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-people .a-person { display: flex; flex-direction: column; align-items: center; text-align: center; }
.a-people .a-person__art {
  inline-size: min(100%, 264px); aspect-ratio: 1; border-radius: 50%;
  margin-block-end: var(--o-space-4);
  box-shadow: inset 0 0 0 1px rgb(47 46 43 / .04);
}
.a-people .a-person__art::after {
  content: ""; position: absolute; inset: 8px; z-index: 0; border-radius: 50%; pointer-events: none;
  border: 2px dashed rgb(50 131 96 / .26);
}
.a-people .a-person__orli {
  left: 50%; bottom: 14%; width: auto; height: calc(60% * var(--k, 1)); max-width: none; translate: -50% 0;
  filter: drop-shadow(0 8px 6px rgb(60 57 50 / .14));
}
/* every Orli at one height, so each is the same size whatever sits beside it (Ryan, 3 Nov); wide pictures reach past the disc */
/* …then each nudged by eye so the Orli itself, not its props, is the same size */
.a-people .a-person__orli[src*="/ryan-orli"] { --k: 0.88; }
.a-people .a-person__orli[src*="/patrick-orli"] { --k: 0.94; }
.a-people .a-person__orli[src*="/jazz-orli"] { --k: 0.95; }
.a-people .a-person__orli[src*="/lucy-orli"] { --k: 0.95; }
.a-people .a-person__orli[src*="/debbie-orli"] { --k: 1.04; }
.a-people .a-person__orli[src*="/james-orli"] { --k: 1.0; }
.a-people .a-person__orli[src*="/karla-orli"] { --k: 1.12; }
.a-people .a-person__orli[src*="/lucas-orli"] { --k: 1.16; }
.a-people .a-person__photo {
  position: absolute; z-index: 2; right: -6%; bottom: -3%; width: 40%; height: auto; aspect-ratio: 1;
  box-shadow: 0 0 0 3px var(--o-canvas), 0 4px 10px -3px rgb(60 57 50 / .3);
}
@media (max-width: 767.98px) { .a-people .a-person__photo { right: 0; bottom: -2%; width: 36%; } }
.a-people .a-person__name { max-inline-size: 14em; text-wrap: balance; }
.a-people .a-person__role { max-inline-size: 16em; text-wrap: balance; }

/* "What each of us says": the site's one disclosure (as evidence.html's
   "Read the full case study"). The label stays put; the chevron turns. */
.a-more { margin-block-start: var(--o-space-8); border-block-start: 1px solid var(--o-line); padding-block-start: var(--o-space-4); }
.a-more__toggle {
  display: inline-flex; align-items: center; gap: var(--o-space-2);
  min-height: var(--o-target); cursor: pointer; list-style: none;
  font: var(--o-weight-ui) var(--o-text-body) / 1.2 var(--o-font-ui);
  border-radius: var(--o-r-control);
}
.a-more__toggle::-webkit-details-marker { display: none; }
.a-more__label {
  text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .24em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
}
.a-more__toggle:hover .a-more__label { text-decoration-color: currentColor; }
.a-more__chev {
  flex: none; width: 14px; height: 9px; background: currentColor;
  -webkit-mask: var(--chev) center / contain no-repeat; mask: var(--chev) center / contain no-repeat;
  --chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 10'%3E%3Cpath d='M1.6 1.8c2.1 2 4.1 4.3 6.5 6.4 2.2-2.3 4.2-4.3 6.3-6.5' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  transition: rotate var(--o-t-interact) var(--o-ease);
}
.a-more[open] .a-more__chev { rotate: 180deg; }
.a-says {
  display: grid; gap: var(--o-space-6) var(--o-grid-gap); grid-template-columns: minmax(0, 1fr);
  margin: var(--o-space-5) 0 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { .a-says { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.a-says__item { display: grid; gap: var(--o-space-2); align-content: start; max-inline-size: 60ch; }
.a-says__who { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 var(--o-space-2); }
.a-says__name { font: var(--o-weight-title) var(--o-text-body) / 1.3 var(--o-font-ui); }
.a-says__role { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.a-says__quote { margin: 0; color: var(--o-ink-2); text-wrap: pretty; }

/* ================================================== the road so far
   The home page's sky behind the islands, faded in and out of the canvas,
   so the five worlds float in it. z order: the path (0) < the star (1) <
   the islands (2) < the cards (3). about.js runs the path in a lane between
   each island and its card (a rail in the left gutter when the stops
   stack), dipping briefly behind each island's near rim. It never crosses
   words or an Orli, and never goes under a card. */
/* The sky is one screen of the hero's own picture (the same file, so it's
   already cached), held still behind the islands as they pass (sticky, so
   it's always painted at screen size, never blown up over the section's
   full height), faded in and out of the canvas at the section's ends. */
.a-road { position: relative; isolation: isolate; overflow: clip; padding-block-start: var(--o-space-8); }
.a-road__sky {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  -webkit-mask-image: linear-gradient(transparent, #000 220px, #000 calc(100% - 260px), transparent);
          mask-image: linear-gradient(transparent, #000 220px, #000 calc(100% - 260px), transparent);
}
.a-road__sky picture { position: sticky; top: 0; display: block; width: 100%; height: 100vh; height: 100lvh; }
.a-road__sky img { display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: 30% 60%; }
.a-road__in { position: relative; }
.a-road__journey { position: relative; }
.a-road__path {
  position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none;
}
/* cream dots on the sky, like a vapour trail; gold where the star has been */
.a-road__path .base { stroke: rgb(255 253 248 / .95); }
.a-road__path .trail { stroke: var(--o-star); }
.a-road__stops { position: relative; display: grid; gap: var(--o-space-8); margin: 0; padding: 0; list-style: none; }
.a-stop { position: relative; display: grid; gap: var(--o-space-5); }
.a-stop__island { position: relative; z-index: 2; width: min(76%, 380px); justify-self: end; }
.a-stop__island img { position: relative; width: 100%; height: auto; filter: drop-shadow(0 18px 22px rgb(120 72 60 / .16)); }
.a-stop__shadow { display: none; }
.a-stop__card {
  position: relative; z-index: 3; isolation: isolate;
  display: grid; gap: 0;
  background: var(--o-surface); color: var(--o-ink);
  border: 1px solid var(--o-line); border-radius: var(--o-r-card);
  box-shadow: var(--o-shadow-raised);
  padding: var(--o-space-3) var(--o-space-5);
}
.a-stop__card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .045; mix-blend-mode: multiply;
}
.a-entry { display: grid; gap: var(--o-space-2); padding-block: var(--o-space-4); }
.a-entry + .a-entry { border-block-start: 1px solid var(--o-line); }
.a-entry__date { font: var(--o-weight-ui) var(--o-text-small) / var(--o-lh-small) var(--o-font-ui); color: var(--o-ink-2); letter-spacing: .01em; }
.a-entry__title {
  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;
}
.a-entry__text { color: var(--o-ink-2); text-wrap: pretty; }

/* Stacked (below 900 px): the islands sit to the right and the cards
   leave a rail on the left for the path. */
@media (max-width: 899.98px) {
  .a-stop__island { width: min(70%, 380px); }
  .a-stop__card { margin-inline-start: var(--o-space-7); }
  .a-road__star { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
}
@media (min-width: 600px) and (max-width: 899.98px) {
  .a-stop__card { margin-inline-start: var(--o-space-8); }
}
@media (min-width: 600px) {
  .a-stop__card { padding: var(--o-space-4) var(--o-space-6); }
  .a-entry { padding-block: var(--o-space-5); }
}
/* Wide: island and card side by side, swapping sides each stop. The
   islands stay smaller than the cards, so the words lead (RULES 1). */
@media (min-width: 900px) {
  .a-road__stops { gap: var(--o-space-9); }
  .a-stop { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: var(--o-space-8); }
  .a-stop__island { width: min(76%, 340px); justify-self: center; }
  .a-stop:nth-child(even) .a-stop__island { order: 2; }
}

/* The shooting star: the home page's felt star (its landing and its quote).
   about.js moves it along the path. */
.a-road__star {
  position: absolute; z-index: 1; left: 0; top: 0;
  width: 44px; height: 44px; margin: -22px 0 0 -22px;
  pointer-events: none; opacity: 0;
  filter: drop-shadow(0 0 10px rgb(255 226 168 / .7)) drop-shadow(0 3px 4px rgb(60 57 50 / .22));
}
.a-road__star::before {
  content: ""; position: absolute; inset: 0; rotate: 12deg;
  background: url(../../hero/school/assets/star-felt-96.webp) center / contain no-repeat;
}
.a-road__star.is-ready { opacity: 1; transition: opacity var(--o-t-interact) var(--o-ease); }
.a-road__star.is-ready.is-behind { opacity: 0; }

/* ================================================================ schools
   The home page's logo strip: 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
   (about.js adds a hidden copy after the list so it never runs out). Each
   card bobs gently on its own beat. Hover stops it, and so does the small
   "Pause the logos" button under it (WCAG 2.2.2: the strip holds nothing
   to focus); Reduced and Still motion show one calm, centred set instead
   (three to a row on a phone), and the button isn't needed. */
.a-schools__head { margin-block-end: 0; }
.a-schools__head .o-title { max-inline-size: 22ch; }
.a-logos {
  position: relative; overflow: hidden;
  margin-block-start: var(--o-space-6);
  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%);
}
.a-logos__track { display: flex; width: max-content; animation: a-logos-drift var(--logos-dur, 70s) linear infinite; }
.a-logos:hover .a-logos__track,
.a-logos:focus-within .a-logos__track,
.a-schools.is-paused .a-logos__track { animation-play-state: paused; }
.a-logos:is(:hover, :focus-within) .a-logos__strip > li,
.a-schools.is-paused .a-logos__strip > li { animation-play-state: paused; }
/* the pause button: quiet, under the strip's right end */
.a-logos__controls { display: flex; justify-content: flex-end; margin-block-start: var(--o-space-1); }
.a-logos__pause[hidden] { display: none; }
.a-logos__icon {
  -webkit-mask-image: url("../../../../design-kit/icons/schools-doodles/session--doodles--pause.svg");
          mask-image: url("../../../../design-kit/icons/schools-doodles/session--doodles--pause.svg");
}
.a-schools.is-paused .a-logos__icon {
  -webkit-mask-image: url("../../../../design-kit/icons/schools-doodles/session--doodles--play.svg");
          mask-image: url("../../../../design-kit/icons/schools-doodles/session--doodles--play.svg");
}
ul.a-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;
}
.a-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: a-logos-bob 7s ease-in-out infinite; animation-delay: calc(var(--i, 0) * -.9s);
}
.a-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 a-logos-drift { to { transform: translate3d(-50%, 0, 0); } }
@keyframes a-logos-bob { 0%, 100% { transform: translate3d(0, -4px, 0); } 50% { transform: translate3d(0, 4px, 0); } }
@media (max-width: 599.98px) {
  ul.a-logos__strip { --card-h: 84px; --k: .46; gap: var(--o-space-3); padding-inline-end: var(--o-space-3); }
  .a-logos__strip > li { padding: 10px 18px; border-radius: 18px; }
  .a-schools { --logos-dur: 52s; }
}

/* =============================================================== results
   Each figure inside its own ring, filled to its percentage in one colour
   of the Orli palette (colour only), its words under it. Quieter than the
   home page's rings (no Orlis riding them), so the pages don't repeat each
   other. Four across from 1100 px, two by two from 600 px, and on a phone
   each ring sits to the left of its words. */
.a-results__card { gap: var(--o-space-6); padding: var(--o-space-6) var(--o-space-5); }
@media (min-width: 600px) { .a-results__card { padding: var(--o-space-7); } }
.a-stats {
  --ring: 116px;
  display: grid; gap: var(--o-space-7) var(--o-space-6); grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
@media (min-width: 1100px) { .a-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.a-stat { position: relative; display: grid; align-content: start; justify-items: start; gap: var(--o-space-4); min-width: 0; }
.a-stat__ring { inline-size: var(--ring); block-size: var(--ring); rotate: -90deg; overflow: visible; }
.a-stat__track, .a-stat__fill { fill: none; stroke-width: 5; }
.a-stat__track { stroke: var(--track, var(--w-orla-soft)); }
.a-stat__fill { stroke: var(--tone, var(--o-action)); stroke-linecap: round; stroke-dasharray: var(--p) 100; }
.a-stat[data-tone="orla"] { --tone: var(--w-orla-accent); --track: var(--w-orla-soft); }
.a-stat[data-tone="luna"] { --tone: var(--w-luna-accent); --track: var(--w-luna-soft); }
.a-stat[data-tone="zeke"] { --tone: var(--w-zeke-accent); --track: var(--w-zeke-soft); }
.a-stat[data-tone="rory"] { --tone: var(--w-rory-accent); --track: var(--w-rory-soft); }
.a-stat[data-tone="joy"] { --tone: var(--w-joy-accent); --track: var(--w-joy-soft); }
/* Ryan, 3 Nov: the Orlis ride their rings again (as on the home page). Each
   sits on its ring at the end of the arc, a little outside the line so the
   figure in the middle stays clear; it rolls round as the ring fills. */
@property --a-stat-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.a-stat__roll {
  --rs: calc(var(--ring) * .42); --a-stat-a: calc(var(--p) * 3.6deg);
  position: absolute; z-index: 1; pointer-events: none;
  inset-block-start: calc(var(--ring) / 2 - var(--rs) / 2); inset-inline-start: calc(var(--ring) / 2 - var(--rs) / 2);
  inline-size: var(--rs); block-size: var(--rs); max-width: none;
  transform: rotate(var(--a-stat-a)) translateY(calc(var(--ring) * -.47)) rotate(calc(-1 * var(--a-stat-a)));
  filter: drop-shadow(0 1px 1.5px rgb(60 57 50 / .25));
}
.a-stats.is-armed:not([data-in]) .a-stat__roll { --a-stat-a: 0deg; opacity: 0; }
.a-stats.is-armed .a-stat__roll { transition: --a-stat-a 1500ms var(--o-ease), opacity 300ms var(--o-ease); }
.a-stats.is-armed > li:nth-child(2) .a-stat__roll { transition-delay: 140ms; }
.a-stats.is-armed > li:nth-child(3) .a-stat__roll { transition-delay: 280ms; }
.a-stats.is-armed > li:nth-child(4) .a-stat__roll { transition-delay: 420ms; }

.a-stat__words { display: grid; gap: var(--o-space-1); }
/* the number, centred in its ring */
.a-stat__n {
  position: absolute; inset-block-start: 0; inset-inline-start: 0;
  display: grid; place-items: center; inline-size: var(--ring); block-size: var(--ring);
  font: var(--o-weight-title) calc(var(--ring) * .25) / 1 var(--o-font-ui);
  letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--o-ink);
}
.a-stat__label { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 26ch; }
/* What "belonging" means on this site (05 §7.3), under the row. */
.a-stats__def {
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); text-wrap: pretty; max-inline-size: 78ch;
  padding-block-start: var(--o-space-5); border-block-start: 1px dashed var(--o-n2);
}
/* Each ¹ goes to the source note: a quiet link whose own box is a 28 px
   target, with a 44 px touch area round it, without moving anything. */
.a-stat__ref { font-size: .8em; line-height: 0; vertical-align: super; margin-inline-start: 1px; }
.a-stat__ref a {
  position: relative; display: inline-grid; place-items: center;
  min-inline-size: 28px; min-block-size: 28px; margin: -8px -14px -8px -1px; place-items: center start; padding-inline-start: 2px;
  font-weight: var(--o-weight-ui); color: var(--o-action); text-decoration: none; border-radius: 4px;
}
.a-stat__ref a::after { content: ""; position: absolute; inset: -8px; }
@media (hover: hover) and (pointer: fine) { .a-stat__ref a:hover { text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: .2em; } }
/* below 1100 px each ring sits to the left of its words: two columns on
   a tablet, one on a phone */
@media (max-width: 1099.98px) {
  .a-stats { --ring: 100px; gap: var(--o-space-6) var(--o-space-7); }
  .a-stat { grid-template-columns: var(--ring) minmax(0, 1fr); align-items: center; column-gap: var(--o-space-5); }
}
@media (max-width: 599.98px) {
  .a-stats { --ring: 84px; grid-template-columns: minmax(0, 1fr); gap: var(--o-space-5); }
  .a-stat { column-gap: var(--o-space-4); }
  .a-stat__label { max-inline-size: none; }
}
.a-stats.is-armed:not([data-in]) .a-stat__fill { stroke-dasharray: 0 100; }
.a-stats.is-armed .a-stat__fill { transition: stroke-dasharray 1500ms var(--o-ease); }
.a-stats.is-armed > li:nth-child(2) .a-stat__fill { transition-delay: 140ms; }
.a-stats.is-armed > li:nth-child(3) .a-stat__fill { transition-delay: 280ms; }
.a-stats.is-armed > li:nth-child(4) .a-stat__fill { transition-delay: 420ms; }

.a-source {
  display: grid; gap: var(--o-space-2); justify-items: start;
  scroll-margin-block-start: calc(var(--o-header-h) + var(--o-space-9));
  font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2);
  max-inline-size: 78ch; text-wrap: pretty;
}
.a-source .o-link--arrow { min-height: var(--o-target); }

/* The one-pager: a paper card with the real page peeking out of it. */
.a-share {
  display: grid; grid-template-columns: minmax(0, 1fr);
  margin-block-start: var(--o-space-7);
}
.a-share__text { display: grid; align-content: center; justify-items: start; gap: var(--o-space-4); padding: var(--o-space-6) var(--o-space-5); }
.a-share__lead { color: var(--o-ink-2); max-inline-size: 40ch; text-wrap: pretty; }
.a-share__action { display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-space-3) var(--o-space-4); margin-block-start: var(--o-space-3); }
.a-share__meta { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
.a-share__paper { position: relative; isolation: isolate; height: clamp(170px, 44vw, 260px); background: var(--o-warm); overflow: clip; }
.a-share__paper::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .07; mix-blend-mode: multiply;
}
.a-share__paper img {
  position: absolute; left: 50%; translate: -50% 0; top: var(--o-space-6); width: min(84%, 520px); height: auto;
  border-radius: 6px 6px 0 0; rotate: -2deg; transform-origin: 50% 100%;
  box-shadow: var(--o-shadow-raised);
}
@media (min-width: 900px) {
  .a-share { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .a-share__text { padding: var(--o-space-7); }
  .a-share__paper { height: auto; min-height: 300px; }
  .a-share__paper img { left: 9%; translate: none; width: 88%; top: var(--o-space-7); }
}

/* ================================================================ voices
   As the home page's voices: the head teacher's words on a deep green felt
   patch with a running stitch and the felt star. Peeking over its top edge
   (decoration: alt="", aria-hidden, never over words), this page's own:
   three of the team's Orlis, listening (the home page has the cast there).
   The other three quotes on calm felt cards. */
.a-voice { --peek: 120px; position: relative; isolation: isolate; padding-block-start: 48px; }
.a-voice__peek {
  position: absolute; z-index: 0; inset-block-start: -34px; inset-inline-start: clamp(var(--o-space-7), 9%, 128px);
  display: flex; align-items: flex-end; pointer-events: none;
}
.a-voice__orli {
  position: relative; display: block; flex: none; inline-size: calc(var(--peek) * var(--w, 1)); margin-inline: calc(var(--peek) * -.1);
  translate: 0 calc(var(--peek) * var(--t, 0)); filter: drop-shadow(0 3px 6px rgb(60 57 50 / .14));
}
.a-voice__orli img { display: block; width: 100%; height: auto; }
.a-voice__orli:nth-child(1) { rotate: -6deg; }
.a-voice__orli:nth-child(2) { z-index: 1; }
.a-voice__orli:nth-child(3) { rotate: 7deg; }
.a-voice__orli[data-who="debbie"] { --w: 1.4; --t: .04; }
.a-voice__orli[data-who="mark"]   { --w: 1.12; --t: .14; }
.a-voice__orli[data-who="euan"]   { --w: 1.05; --t: .02; }

.a-quote { margin: 0; }
.a-quote blockquote { margin: 0; }
.a-quote--feature {
  position: relative; z-index: 1; isolation: isolate; overflow: clip;
  display: grid; gap: var(--o-space-5);
  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);
}
.a-quote--feature::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .28; mix-blend-mode: soft-light;
}
.a-quote--feature::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);
}
.a-quote__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; }
.a-quote--feature 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; max-inline-size: 34em;
}
.a-quote blockquote p::before { content: "“"; }
.a-quote blockquote p::after { content: "”"; }
.a-quote--feature figcaption {
  display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--o-space-3); row-gap: 2px; align-items: center;
  padding-block-start: var(--o-space-4); border-block-start: 1px solid rgb(255 255 255 / .22);
}
.a-quote__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);
}
.a-quote--feature .a-quote__name { grid-column: 2; align-self: end; font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: #fff; }
.a-quote--feature .a-quote__role { grid-column: 2; align-self: start; 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 */
  .a-quote--feature { grid-template-columns: minmax(0, 8fr) minmax(0, 3fr); column-gap: var(--o-space-8); align-items: end; }
  .a-quote--feature 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); }
}

ul.a-quotes {
  display: grid; gap: var(--o-grid-gap); grid-template-columns: minmax(0, 1fr);
  margin: var(--o-grid-gap) 0 0; padding: 0; list-style: none;
}
@media (min-width: 900px) { ul.a-quotes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.a-quotes .a-quote > figure {
  flex: 1; display: flex; flex-direction: column; gap: var(--o-space-5);
  margin: 0; padding: var(--o-space-7) var(--o-space-6) var(--o-space-6);
}
.a-quotes blockquote { flex: 1; }
.a-quotes blockquote p { 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; }
.a-quotes figcaption { display: grid; gap: 2px; padding-block-start: var(--o-space-4); border-block-start: 1px solid var(--o-line); }
.a-quotes .a-quote__name { font: var(--o-weight-ui) var(--o-text-body) / 1.3 var(--o-font-ui); color: var(--o-ink); }
.a-quotes .a-quote__role { font-size: var(--o-text-small); line-height: var(--o-lh-small); color: var(--o-ink-2); }
@media (max-width: 599.98px) {
  .a-voice { --peek: 76px; padding-block-start: 30px; }
  .a-voice__peek { inset-block-start: -22px; inset-inline-start: var(--o-space-5); }
  .a-quote--feature { padding: var(--o-space-8) var(--o-space-5) var(--o-space-5); }
  .a-quote--feature::after { inset: 8px; border-radius: calc(var(--o-r-card) - 7px); }
  .a-quote--feature blockquote p { font-size: var(--o-text-lead); line-height: var(--o-lh-lead); }
  .a-quote__star { width: 40px; height: 40px; inset-block-start: var(--o-space-4); inset-inline-end: var(--o-space-4); }
  .a-quotes .a-quote > figure { padding: var(--o-space-6) var(--o-space-5) var(--o-space-5); gap: var(--o-space-4); }
}

/* ================================================================== FAQ */
.a-faq__in { align-items: start; }
.a-faq__head > .a-faq__more { margin-block-start: calc(var(--o-gap-tight) - var(--o-gap)); }
.a-nw, .nowrap { white-space: nowrap; }
@media (min-width: 900px) {
  .a-faq__head { position: sticky; top: calc(var(--o-header-h) + var(--o-space-6)); }
}

/* ================================================================== CTA
   The deep band in the felt of the head teacher's quote; above the title,
   the team's faces in a row (the founders in the middle, a little larger). */
.a-cta { position: relative; isolation: isolate; overflow: clip; }
.a-cta::before {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: url(../home/img/magic/felt-grain-256.webp) 0 0 / 256px 256px; opacity: .22; mix-blend-mode: soft-light;
}
.a-cta .o-section-head { margin-block-end: 0; }
.a-cta .o-title { max-inline-size: 18ch; }
.a-cta .o-lead { max-inline-size: 46ch; text-wrap: balance; }
.a-cta__faces { display: flex; justify-content: center; align-items: center; margin-block-end: var(--o-space-3); padding-inline-start: 12px; }
.a-cta__faces img {
  width: 52px; height: 52px; margin-inline-start: -12px; border-radius: 50%; object-fit: cover;
  background: var(--o-paper); /* full colour (Ryan, 3 Nov: the softened faces looked desaturated) */
  box-shadow: 0 0 0 2.5px var(--o-paper), 0 0 0 5px rgb(25 84 64 / .9), 0 6px 12px -3px rgb(0 0 0 / .4);
}
.a-cta__faces img.a-cta__face--lead { position: relative; z-index: 1; width: 64px; height: 64px; }
@media (max-width: 479.98px) {
  .a-cta__faces img { width: 40px; height: 40px; margin-inline-start: -10px; }
  .a-cta__faces img.a-cta__face--lead { width: 50px; height: 50px; }
}

/* =================================================== small reveals
   about.js arms these (.is-armed) only in full motion, and lets them go
   once they're in (data-in), so a hover's own transition is never delayed:
   the principles, the team, the story's photos, the quote cards and the
   share card rise in, one after another; the rings fill; the three Orlis
   come up from behind the quote. The slow floats (the felt star by "my
   light", the peekers' bob, Lucas's hop) run under .is-moving on the body,
   full motion only.
   Without script, or under Reduced or Still motion, everything is simply
   there and nothing moves. */
.is-armed { transition: opacity 760ms var(--o-ease), translate 760ms var(--o-ease); transition-delay: calc(var(--i, 0) * 110ms); }
.is-armed:not([data-in]) { opacity: 0; translate: 0 22px; }
.is-armed:target,
.is-armed:focus-within { opacity: 1; translate: none; transition: none; }
.a-stats.is-armed:not([data-in]) { translate: none; opacity: 1; }
.a-voice.is-armed:not([data-in]) { opacity: 1; translate: none; }
.a-voice.is-armed:not([data-in]) .a-quote--feature { opacity: 0; translate: 0 22px; }
.a-voice.is-armed .a-quote--feature { transition: opacity 760ms var(--o-ease), translate 760ms var(--o-ease); }
.a-voice.is-armed:not([data-in]) .a-voice__orli { translate: 0 calc(var(--peek) * .82); }
.a-voice.is-armed .a-voice__orli { transition: translate 900ms var(--o-settle) 380ms; }
.a-voice.is-armed .a-voice__orli:nth-child(2) { transition-delay: 540ms; }
.a-voice.is-armed .a-voice__orli:nth-child(3) { transition-delay: 700ms; }
.is-moving .a-voice[data-in]:not(.is-armed) .a-voice__orli { animation: a-bob 6.5s ease-in-out infinite; }
.is-moving .a-voice[data-in]:not(.is-armed) .a-voice__orli:nth-child(2) { animation-duration: 7.4s; animation-delay: -2.2s; }
.is-moving .a-voice[data-in]:not(.is-armed) .a-voice__orli:nth-child(3) { animation-duration: 5.9s; animation-delay: -4.1s; }
.is-moving .a-quote__star { animation: a-star 7s ease-in-out infinite; }
@keyframes a-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes a-star { 0%, 100% { translate: 0 0; rotate: 12deg; } 50% { translate: 0 -7px; rotate: 2deg; } }

/* =========================================================== motion levels
   Reduced and Still motion (the site's Motion setting, or the system's
   when it's unset): the logo strip becomes one calm, centred, wrapping set,
   the chevron turns at once, and nothing loops. about.js starts the hop,
   the star's ride, the reveals and the floats only with full motion. */
html:is([data-motion="reduced"], [data-motion="still"]) .a-logos { -webkit-mask-image: none; mask-image: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .a-logos__track { animation: none; width: auto; justify-content: center; }
html:is([data-motion="reduced"], [data-motion="still"]) ul.a-logos__strip { flex-wrap: wrap; justify-content: center; padding: 0 var(--o-gutter); }
html:is([data-motion="reduced"], [data-motion="still"]) .a-logos__strip > li { animation: none; }
html:is([data-motion="reduced"], [data-motion="still"]) .a-logos__strip[aria-hidden="true"] { display: none; }
html[data-motion="still"] .a-more__chev { transition: none; }
/* Without script there's no copy to loop into: the calm set as well. */
html:not(.js) .a-logos { -webkit-mask-image: none; mask-image: none; }
html:not(.js) .a-logos__track { animation: none; width: auto; justify-content: center; }
html:not(.js) ul.a-logos__strip { flex-wrap: wrap; justify-content: center; padding: 0 var(--o-gutter); }
html:not(.js) .a-logos__strip > li { animation: none; }
@media (prefers-reduced-motion: reduce) {
  html:not([data-motion]) .a-logos { -webkit-mask-image: none; mask-image: none; }
  html:not([data-motion]) .a-logos__track { animation: none; width: auto; justify-content: center; }
  html:not([data-motion]) ul.a-logos__strip { flex-wrap: wrap; justify-content: center; padding: 0 var(--o-gutter); }
  html:not([data-motion]) .a-logos__strip > li { animation: none; }
  html:not([data-motion]) .a-logos__strip[aria-hidden="true"] { display: none; }
  html:not([data-motion]) .a-more__chev { transition: none; }
}

/* The calm set on a phone: three to a row (the last row centred), each
   logo still readable. */
@media (max-width: 599.98px) {
  html:is([data-motion="reduced"], [data-motion="still"]) ul.a-logos__strip,
  html:not(.js) ul.a-logos__strip { --k: .62; gap: var(--o-space-2); flex: 1; min-width: 0; padding: 0 var(--o-gutter); }
  html:is([data-motion="reduced"], [data-motion="still"]) .a-logos__strip > li,
  html:not(.js) .a-logos__strip > li { flex: 0 0 calc((100% - 2 * var(--o-space-2)) / 3); min-width: 0; height: 76px; padding: 8px 10px; border-radius: 16px; }
  html:is([data-motion="reduced"], [data-motion="still"]) .a-logos__strip img,
  html:not(.js) .a-logos__strip img { max-width: 100%; height: min(calc(var(--logo-h) * var(--k)), 58px); }
}
@media (max-width: 599.98px) and (prefers-reduced-motion: reduce) {
  html:not([data-motion]) ul.a-logos__strip { --k: .62; gap: var(--o-space-2); flex: 1; min-width: 0; padding: 0 var(--o-gutter); }
  html:not([data-motion]) .a-logos__strip > li { flex: 0 0 calc((100% - 2 * var(--o-space-2)) / 3); min-width: 0; height: 76px; padding: 8px 10px; border-radius: 16px; }
  html:not([data-motion]) .a-logos__strip img { max-width: 100%; height: min(calc(var(--logo-h) * var(--k)), 58px); }
}

/* ================================================================= print */
@media print {
  .a-more > .a-more__toggle { display: none; }
  .a-more::details-content { content-visibility: visible; }
  .a-hero__sky, .a-road__sky, .a-class__cloud, .a-voice__peek, .a-cta__faces { display: none; }
  html.js .a-hero { margin-block-start: 0; }
  .a-hero__stage { background: none; padding-block-start: var(--o-space-6); }
  .a-logos { -webkit-mask-image: none; mask-image: none; }
  .a-logos__track { animation: none; width: auto; }
  ul.a-logos__strip { flex-wrap: wrap; }
  .a-logos__strip[aria-hidden="true"] { display: none; }
}

/* ======================================================== forced colours */
@media (forced-colors: active) {
  .a-hero__sky, .a-road__sky, .a-class__cloud { display: none; }
  .a-hero__stage { background: Canvas; }
  .a-stop__card, .a-share, .a-person--lead, .a-quote--feature { border: 1px solid CanvasText; }
  .a-felt::before, .a-felt::after, .a-sewn::before, .a-stop__card::before, .a-stop__card::after,
  .a-person__art::before, .a-person__art::after, .a-principle__art::before, .a-principle__art::after,
  .a-quote--feature::before, .a-quote--feature::after, .a-share__paper::before, .a-cta::before { display: none; }
  .a-road__path .trail { stroke: Highlight; }
  .a-road__path .base { stroke: GrayText; }
  .a-road__star::before { background: CanvasText; -webkit-mask: url("../../../../design-kit/icons/schools-doodles/resources--doodle-star.svg") center / contain no-repeat; mask: url("../../../../design-kit/icons/schools-doodles/resources--doodle-star.svg") center / contain no-repeat; }
  .a-class__orli::before { display: none; }
  .a-story__name em { box-shadow: none; text-decoration: underline; }
  .a-quote__face { box-shadow: none; outline: 1px solid CanvasText; }
  .a-logos__strip > li { border: 1px solid CanvasText; }
}