/* ═══════════════════════════════════════════════════════════════════════════
   service.css: the Service page, bright (src/pages/service.html). Unlayered, so it wins over
   the design system; every rule is scoped to .page--service and reads tokens only.

   Grounds, top to bottom (by token; since 9 Oct --blush is a warm sand and --cream a pale paper):
   sand (the head) · white (the coming days) · paper (the sign-up) · white (the six areas) ·
   sand (how a day runs) · white (schools and organisations) · sand, holding the page's one deep
   panel (the closing call). Each section stands into the one above with a row of teeth.
   Cranberry is the accent (the wheel, buttons, medallions, the lit rail): never a ground or a panel.

   Colour means something here. A day's card wears the colour of the area it serves (the Ocean
   Park days are children's days); a day with no area yet wears wine. Each of
   the six areas keeps its own colour on its name and on its panel. Every wheel is the logo's
   cranberry on a pale ground and white on a colour.

   Colours are never named for what they look like tonight. A field of colour is a .b-panel or a
   ground (bright.css), and what stands on it reads the tone that panel sets: --fg, --row,
   --btn-bg, --btn-fg, --on-area. So when the family's values change, or an area's colour turns
   from light to deep, this page follows without a line of it being touched.

   Nothing here hides content: the six areas take turns only once the page script has found the
   living wheel (.is-live), and the steps wait for the cog only while it is rolling (.is-rolling).
   Motion is transform, opacity and clip-path, and none of it under reduced motion.
   ═══════════════════════════════════════════════════════════════════════════ */

.page--service .b-eyebrow { display: flex; }
.page--service .section__head > .lead { margin-block-start: var(--space-m); }
.page--service .section__head > .lockup + .lead { max-inline-size: 38em; }

/* ───────────────────────────────────────── 1 The head · the countdown ──
   The title as the logo lays its own name out, the lead, and the countdown in a wine panel with its
   four numbers as tiles (the seconds, the one that moves, the other way round).
   The first screen holds all of it at 800 × 619 and at 588 × 612. */
.page--service .service-head { padding-block: calc(var(--clear-top, var(--bar-top)) + clamp(1.25rem, 4.6vh, 5rem)) clamp(2.25rem, 7vh, 5.5rem); }
.page--service .service-head__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, 2.6vh, 1.75rem); align-items: center; }
.page--service .service-head__title { display: grid; gap: .75rem; justify-items: start; min-inline-size: 0; }
.page--service .service-head__lead { max-inline-size: 36em; color: var(--fg-muted); }

.page--service .service-count {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-s);
  justify-items: start;
  padding: clamp(1rem, .75rem + 1.2vw, 1.75rem);
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
}
/* A white wheel, faint, half out of the panel's far corner: it turns as the page is scrolled. */
.page--service .service-count__cog { position: absolute; z-index: -1; inset-block-start: -38%; inset-inline-end: -7%; inline-size: min(46%, 19rem); aspect-ratio: 1; color: var(--row); pointer-events: none; }
.page--service .service-count__turn,
.page--service .service-count__turn .wheel { display: block; inline-size: 100%; block-size: 100%; }
.page--service .service-count .wheel-countdown { position: relative; gap: .625rem; inline-size: 100%; }
/* The label of the countdown is a plain label here, and the escapement ticks where its tooth would stand. */
.page--service .service-count .slate { color: var(--fg); }
/* In Chinese the build keeps each word of a short line whole in a span of its own; the bright slate line takes
   every span after the first for a new item and stands a dot before it. This label is one phrase. */
.page--service .service-count .slate > span::before { content: none; }
.page--service .service-count .wheel-countdown.is-enhanced > .slate { min-block-size: 2.75rem; padding-inline-start: 3.5rem; }
.page--service .service-count .wheel-countdown.is-enhanced > .slate::before { display: none; }
.page--service .service-count .wheel-countdown__escapement { position: absolute; inset-block-start: 0; inset-inline-start: 0; inline-size: 2.75rem; }

/* The four numbers as tiles, in the panel's own button colours (white with cranberry figures inside a deep
   panel); the seconds, the one that moves, the other way round. */
.page--service .service-count .countdown[data-state="running"] .countdown__units { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; inline-size: 100%; }
.page--service .service-count .countdown__unit { gap: .15rem; justify-items: center; min-inline-size: 0; padding: .7rem .25rem .6rem; border-radius: var(--r-card); background: var(--btn-bg); color: var(--btn-fg); text-align: center; }
.page--service .service-count .countdown__num { color: inherit; font-size: clamp(2.25rem, 1.55rem + 3vw, 3.25rem); font-weight: var(--fw-display); }
.page--service .service-count .countdown__name { color: inherit; font-size: 1rem; font-weight: var(--fw-strong); letter-spacing: 0; text-transform: none; }
.page--service .service-count .countdown__unit:last-child { background: var(--btn-fg); color: var(--btn-bg); }
@media (max-width: 23.49rem) {
  .page--service .service-count .countdown[data-state="running"] .countdown__units { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* The day it counts to. Without scripts both confirmed days stand here in words. */
.page--service .service-count .countdown__date,
.page--service .service-count .countdown__tbc { max-inline-size: none; color: var(--fg); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-title); line-height: 1.3; }
.page--service .service-count .countdown[data-state="running"] .countdown__date { color: var(--fg); font-family: var(--font-text); font-size: var(--fs-body); font-weight: var(--fw-text); line-height: 1.45; }

@media (max-width: 43.99rem) {
  .page--service .service-head__lead { font-size: var(--fs-body); }
  .page--service .service-count__act { justify-self: stretch; }
}
/* A phone: a little less between and beside the four tiles, so "minutes" and "seconds" do not touch their edges. */
@media (max-width: 29.99rem) {
  .page--service .service-count { padding-inline: .75rem; }
  .page--service .service-count .countdown[data-state="running"] .countdown__units { gap: .375rem; }
  .page--service .service-count .countdown__unit { padding-inline: .125rem; }
}

/* A low pane about 590 wide (the one the President reads the site in): the label and the escapement step
   aside, and the day and the button share the last row, so the whole head is on the first screen. */
@media (min-width: 34rem) and (max-width: 43.99rem) and (max-height: 42rem) {
  .page--service .service-count:has(.wheel-countdown.is-enhanced[data-state="running"]) > * { grid-area: 1 / 1; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .slate { position: absolute; inline-size: 1px; block-size: 1px; min-block-size: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .wheel-countdown__escapement { display: none; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .countdown__date { display: grid; align-content: center; min-block-size: var(--btn-h); max-inline-size: calc(100% - 17rem); }
  .page--service .service-count:has(.wheel-countdown.is-enhanced[data-state="running"]) > .service-count__act { align-self: end; justify-self: end; }
}

/* From 704 to 1151 wide: a bar. The tiles at the start, the day and the button beside them. The button is the
   page's (not the countdown's), so it shares the countdown's cell and stands under the day by a known measure. */
@media (min-width: 44rem) and (max-width: 71.99rem) {
  /* The tiles are no wider than their words need, so the day beside them has its first line whole at 800
     ("Ocean Park day · Friday 6 November 2026," and the time under it; ten pixels short, the year fell to the
     second line alone). The line is filled in order here, never evened out: evened out, the year drops again. */
  .page--service .service-count { --tiles: clamp(20rem, 44%, 25rem); --bar-gap: 1.25rem; }
  .page--service .service-count:has(.wheel-countdown.is-enhanced[data-state="running"]) > * { grid-area: 1 / 1; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] { grid-template-columns: var(--tiles) minmax(0, 1fr); column-gap: var(--bar-gap); align-items: start; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .slate { grid-column: 1 / -1; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .countdown__units { grid-column: 1; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] .countdown__unit { padding-inline: .125rem; }
  .page--service .service-count .wheel-countdown.is-enhanced[data-state="running"] > .countdown__date { grid-column: 2; padding-block-end: calc(var(--btn-h) + .875rem); text-wrap: wrap; }
  .page--service .service-count:has(.wheel-countdown.is-enhanced[data-state="running"]) > .service-count__act { align-self: end; margin-inline-start: calc(var(--tiles) + var(--bar-gap)); }
}

/* Wide: the words at the start side, the countdown as a tall card beside them, its numbers two by two. */
@media (min-width: 72rem) {
  .page--service .service-head__inner { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); grid-template-areas: "title count" "lead count"; column-gap: clamp(2.5rem, 5vw, 5rem); row-gap: 1.5rem; }
  .page--service .service-head__title { grid-area: title; align-self: end; }
  .page--service .service-head__lead { grid-area: lead; align-self: start; }
  .page--service .service-count { grid-area: count; gap: 1.25rem; padding: clamp(1.75rem, 1rem + 1.6vw, 2.5rem); }
  .page--service .service-count .wheel-countdown { gap: .875rem; }
  .page--service .service-count .countdown[data-state="running"] .countdown__units { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .75rem; }
  .page--service .service-count .countdown__unit { padding: 1.1rem .5rem 1rem; }
  .page--service .service-count .countdown__num { font-size: clamp(3.5rem, 1.6rem + 3.2vw, 4.75rem); }
  .page--service .service-count__act { --btn-h: 3.5rem; --pad: 2rem; font-size: 1.125rem; }
  /* On the tall card the faint wheel stands in the foot corner, behind the day and the button (set from the head,
     as in the bar, only three of its teeth showed over the top edge). */
  .page--service .service-count__cog { inset-block: auto -24%; inset-inline-end: -26%; inline-size: 82%; }
}

/* ─────────────────────────────────────────────── 2 The coming days ──
   Three cards. The head of each is a field of its day's colour with the date large in it (heavy numerals
   for a day that is fixed, light ones for a day that is not yet) and the art producer's scene for the day
   in a cog frame. The body is that colour's pale tint. */
.page--service .service-trust { display: inline-flex; align-items: center; gap: .75rem; max-inline-size: none; margin-block-start: var(--space-m); padding: .4rem 1.25rem .4rem .4rem; border-radius: var(--r-card); background: var(--row); color: var(--fg); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--service .service-trust .b-medallion { --m: 2.5rem; }
.page--service .service-trust > span:last-child { text-wrap: balance; }   /* in two lines, two of a length: not the sponsor's last two words alone */

.page--service .service-days__list { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1rem, .75rem + 1.2vw, 1.75rem); }
.page--service .service-days__cell { display: grid; min-inline-size: 0; }
.page--service .service-day {
  --day-tint: var(--area-tint, var(--row));
  --day-pad: clamp(1.25rem, 1rem + 1.2vw, 1.75rem);
  --num: clamp(4.5rem, 3rem + 7vw, 6rem);
  --art: clamp(6.5rem, 4rem + 11vw, 8.5rem);
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-inline-size: 0;
  border-radius: var(--r-panel);
  background: var(--day-tint);
  color: var(--fg);
  overflow: hidden;
  overflow: clip;
  transition: box-shadow var(--dur-3) ease, transform var(--dur-3) var(--ease-out);
}
/* Under a fine pointer the card lifts a little (and the cog of its picture turns one tooth: below). */
@media (hover: hover) and (pointer: fine) {
  .page--service .service-day:hover { box-shadow: var(--shadow-float); transform: translate3d(0, -.25rem, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .page--service .service-day { transition: none; }
  .page--service .service-day:hover { transform: none; }
}
/* Two possible dates share the room of one: light, and smaller. */
.page--service .service-day--tbc { --num-scale: .64; }
/* The head is a .b-panel (the area's colour by data-area, wine otherwise): the panel paints it and sets
   the tone for everything on it. Here only its shape inside the card. */
.page--service .service-day__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  padding: var(--day-pad);
  border-radius: 0;
  overflow: hidden;
  isolation: isolate;
}
.page--service .service-day__date { display: grid; gap: .45rem; justify-items: start; max-inline-size: none; }
.page--service .service-day__nums { display: flex; align-items: baseline; gap: .1em; font-family: var(--font-display); font-size: calc(var(--num) * var(--num-scale, 1)); font-weight: var(--fw-display); line-height: .82; letter-spacing: var(--tracking-display); }
.page--service .service-day__weekday { font-size: var(--fs-lead); font-weight: var(--fw-strong); line-height: 1.2; }
.page--service .service-day__month { font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.2; }
.page--service .service-day--tbc .service-day__nums { font-weight: var(--fw-light); }
.page--service .service-day__or { margin-inline: .04em; font-weight: var(--fw-light); opacity: .7; }
/* A white wheel, faint, half out of the head: it turns as the page is scrolled. */
.page--service .service-day__cog { position: absolute; z-index: -1; inset-block-start: -46%; inset-inline-end: -16%; inline-size: min(60%, 16rem); aspect-ratio: 1; color: var(--row); pointer-events: none; }
.page--service .service-day__turn,
.page--service .service-day__turn .wheel { display: block; inline-size: 100%; block-size: 100%; }
/* The scene for the day: a cog frame on a white cog a little larger than itself. Under the hand the cog turns
   one tooth while the picture stays upright. */
.page--service .service-day__art { display: block; inline-size: var(--art); }
.page--service .service-day__mat { display: block; padding: 5%; background: var(--white); -webkit-mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; transition: transform var(--dur-4) var(--ease-out); }
.page--service .service-day__mat .frame { display: block; inline-size: 100%; }
.page--service .service-day__mat img { transition: transform var(--dur-4) var(--ease-out); }
.page--service .service-day:focus-within .service-day__mat { transform: rotate(15deg); }
.page--service .service-day:focus-within .service-day__mat img { transform: rotate(-15deg); }
@media (hover: hover) and (pointer: fine) {
  .page--service .service-day:hover .service-day__mat { transform: rotate(15deg); }
  .page--service .service-day:hover .service-day__mat img { transform: rotate(-15deg); }
}
@media (prefers-reduced-motion: reduce) {
  .page--service .service-day__mat,
  .page--service .service-day__mat img { transition: none; }
}

.page--service .service-day__body { display: grid; gap: .75rem; align-content: start; justify-items: start; padding: var(--day-pad) var(--day-pad) 0; }
/* Whether the date is fixed: a white pill with a medallion (a tick, or a clock). */
.page--service .service-day__status { display: inline-flex; align-items: center; gap: .55rem; max-inline-size: none; min-block-size: 2.5rem; padding: .25rem 1rem .25rem .3rem; border-radius: var(--r-full); background: var(--white); color: var(--fg); font-size: 1rem; font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--service .service-day__status .b-medallion { --m: 1.9375rem; }
.page--service .service-day__status .b-medallion .icon { inline-size: 58%; block-size: 58%; }
.page--service .service-day__title { font-size: calc(clamp(1.5rem, 1.36rem + .62vw, 1.9375rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: 1.12; letter-spacing: var(--tracking-sub); }
.page--service .service-day__when { max-inline-size: none; color: var(--fg); font-family: var(--font-display); font-size: var(--fs-lead); font-weight: var(--fw-light); line-height: 1.3; }
.page--service .service-day__facts { display: grid; gap: .5rem; }
.page--service .service-day__facts > li { display: flex; align-items: center; gap: .75rem; font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--service .service-day__facts .b-medallion { --m: 2.25rem; }
.page--service .service-day__note { color: var(--fg-muted); font-size: var(--fs-small); line-height: 1.5; }
.page--service .service-day__foot { display: grid; gap: .25rem; align-content: start; justify-items: start; padding: var(--space-m) var(--day-pad) var(--day-pad); }

/* A phone: the date line a size that keeps "09:30 to 14:00" on the line with its day, and a button that
   keeps its words on one line (the longest, for the day with no date yet, took two). */
@media (max-width: 29.99rem) {
  .page--service .service-day__when { font-size: 1rem; text-wrap: balance; }
  .page--service .service-day__foot { justify-items: stretch; }
  .page--service .service-day__foot .btn--primary { --pad: 1rem; font-size: 1rem; }
  .page--service .service-day__foot .service-calendar { justify-self: start; }
}

/* The two ways into a calendar, under a sign-up button and in the form. */
.page--service .service-calendar { display: flex; flex-wrap: wrap; align-items: center; gap: 0 1.25rem; }
.page--service .service-calendar .link { font-size: 1rem; }

/* The card the page was opened on (/service/#ocean-park-1) and the card whose day is in the form: ringed in
   cranberry and lifted. The chosen one's button wears the keyway tick in place of its cog. */
.page--service .service-day:is(.is-here, .is-chosen),
html:not(.js) .page--service .service-day:target { outline: 3px solid var(--accent); outline-offset: 4px; box-shadow: var(--shadow-float); }
.page--service .service-day.is-chosen .service-day__foot .btn--primary::before { -webkit-mask-image: var(--keyway-mask); mask-image: var(--keyway-mask); }

/* From 704 to 1087 wide: the head stands at the start side of its card, the date above and the scene below. */
@media (min-width: 44rem) and (max-width: 67.99rem) {
  .page--service .service-day { --num: clamp(5.5rem, 2rem + 8vw, 6.75rem); --art: min(100%, 10.5rem); grid-template-columns: clamp(13.5rem, 32%, 17rem) minmax(0, 1fr); grid-template-rows: 1fr auto; }
  .page--service .service-day--tbc { --num-scale: .6; }
  .page--service .service-day__head { grid-row: 1 / -1; grid-template-columns: minmax(0, 1fr); align-content: space-between; align-items: start; }
  .page--service .service-day__art { justify-self: center; }
  .page--service .service-day__cog { inset-block-start: auto; inset-block-end: -4%; inset-inline-end: -52%; inline-size: 120%; }
}
/* From 1088 wide: three side by side, on one set of rows, so heads, words and buttons line up whatever each has to say. */
@media (min-width: 68rem) {
  .page--service .service-days__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .page--service .service-day { --num: clamp(5.5rem, 2.6rem + 4.6vw, 7.25rem); --art: clamp(7.25rem, 3.5rem + 5.4vw, 9.25rem); }
  .page--service .service-day--tbc { --num-scale: .56; }
  .page--service .service-day__head { min-block-size: 13.5rem; }
  /* A subgrid takes its parent's gaps with its rows: inside a card there are none. */
  @supports (grid-template-rows: subgrid) {
    .page--service .service-days__cell { grid-row: span 3; grid-template-rows: subgrid; row-gap: 0; }
    .page--service .service-days__cell > .service-day { grid-row: 1 / -1; grid-template-rows: subgrid; row-gap: 0; }
  }
}

/* ─────────────────────────────────────────── Also in the calendar ── */
.page--service .service-also { display: grid; gap: var(--space-m); margin-block-start: clamp(3rem, 2rem + 4vw, 5.5rem); }
/* Two side by side only where each has room for its date on one line (26rem); at 800 they stand one under the other. */
.page--service .service-also__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(26rem, 100%), 1fr)); gap: var(--space-s); }
.page--service .service-line { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1rem; align-items: start; padding: clamp(1rem, .8rem + 1vw, 1.5rem); border-radius: var(--r-card); background: var(--row); }
.page--service .service-line__body { display: grid; gap: .3rem; justify-items: start; min-inline-size: 0; }
.page--service .service-line__when { max-inline-size: none; color: var(--cranberry-lit); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--service .service-line__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .15rem 1rem; max-inline-size: none; font-size: var(--fs-lead); line-height: var(--lh-ui); }
.page--service .service-line__place { display: inline-flex; align-items: center; gap: .35rem; color: var(--fg-muted); font-size: var(--fs-small); }
.page--service .service-line__place .icon { inline-size: 1.125rem; block-size: 1.125rem; color: var(--cranberry-lit); }
.page--service .service-line .link { font-size: 1rem; }
@media (max-width: 29.99rem) {
  /* A phone: a smaller medallion, so the date beside it keeps to one line. */
  .page--service .service-line { gap: .75rem; }
  .page--service .service-line > .b-medallion { --m: 2.75rem; }
  .page--service .service-line__when { font-size: 1rem; }
}

/* ──────────────────────────────────────────────────── 3 The sign-up ──
   The words, then the form in a white panel with its wheel. #signup is the block that holds both (not the
   section, whose head-room would push them down the screen), so a card's button lands with the form and the
   note for the chosen day in view. */
.page--service .service-signup__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-l); align-items: start; }
.page--service .service-signup__intro { display: grid; gap: var(--space-s); justify-items: start; min-inline-size: 0; }
.page--service .service-signup__intro > .lead { max-inline-size: 38em; }
.page--service .service-signup__panel { min-inline-size: 0; padding: clamp(1.25rem, 1rem + 2vw, 2.5rem); }
.page--service .service-signup__form { max-inline-size: none; }
.page--service .service-signup__form .form__preview > span { text-wrap: balance; }   /* where the note takes two lines, two of a length (not "is sent." alone on the second) */
.page--service .service-signup__form .field--choices .chips { flex-direction: column; align-items: stretch; }
.page--service .service-signup__form .field--choices .chip > span { inline-size: 100%; border-radius: var(--r-card); }
.page--service .service-signup__wheel { order: 2; justify-self: center; inline-size: 9rem; }
.page--service .service-signup__wheel .wheel-form { --wheel-size: 100%; }
.page--service .service-signup__ring { display: none; }           /* the meter's ring (below) */
/* Name and email side by side where the panel is wide enough for both. */
@media (min-width: 40rem) and (max-width: 63.99rem), (min-width: 80rem) {
  .page--service .service-signup__form { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-m); }
  .page--service .service-signup__form > * { grid-column: 1 / -1; }
  .page--service .service-signup__form > .field:has(> #signup-form-name),
  .page--service .service-signup__form > .field:has(> #signup-form-email) { grid-column: auto; }
}

/* The note for the chosen day, under the choice itself. With scripts only the one that applies is shown
   (service.js sets .is-on); while no day is chosen the block takes no room at all. */
.page--service .service-signup__notes { display: grid; gap: .5rem; }
.page--service .service-signup__note { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: .875rem; align-items: start; max-inline-size: none; padding: .875rem 1rem; border-radius: var(--r-card); background: var(--field); color: var(--fg); }
.page--service .service-signup__note > span:last-child { align-self: center; }
.page--service .service-signup__note .b-medallion { --m: 2.25rem; }
.page--service .service-signup__said { display: grid; gap: .15rem; justify-items: start; padding-block-start: .3rem; }
html.js .page--service .service-signup__note:not(.is-on) { display: none; }
html.js .page--service .service-signup__notes:not(:has(.is-on)) { display: none; }
@media (prefers-reduced-motion: no-preference) {
  html.js .page--service .service-signup__note.is-on { animation: service-note var(--dur-3) var(--ease-out) both; }
}
@keyframes service-note { from { opacity: 0; transform: translate3d(0, -.4rem, 0) scale(.98); } }

/* Where a card's button lands: the focus moves to the block itself (not a control, so it is out of the tab
   order). No line is drawn round half the page for it: the chosen day, filled in cranberry, says where you are. */
.page--service .service-signup__inner[tabindex="-1"]:focus-visible { outline: 0; }

/* Below 1024 wide, plain (no scripts): a still, lit wheel after the form.
   Below 1024 wide, with scripts: the wheel is a meter on the panel's corner. It starts on the corner, stays
   under the header while the fields go by beneath it, and comes to rest beside the send button (service.js
   measures that place: --service-park). The ring round it fills with each completed field; the wheel inside
   gains its teeth, lights when all are done and turns when the form is sent. It never takes a tap. */
@media (max-width: 63.99rem) {
  html.js .page--service .service-signup__panel { grid-area: 2 / 1; }
  html.js .page--service .service-signup__wheel {
    --service-meter: 3.5rem;
    grid-area: 2 / 1;
    justify-self: end;
    align-self: start;
    position: sticky;
    inset-block-start: calc(var(--header-h) + .75rem);
    z-index: 2;
    display: grid;
    place-items: center;
    inline-size: var(--service-meter);
    block-size: var(--service-meter);
    margin: -1rem -.25rem var(--service-park, 7rem) 0;
    border-radius: 50%;
    background: var(--white);
    box-shadow: var(--shadow-float);
    pointer-events: none;
  }
  html.js .page--service .service-signup__ring { --ring-size: var(--service-meter); grid-area: 1 / 1; display: block; }
  html.js .page--service .service-signup__wheel .wheel-form { grid-area: 1 / 1; inline-size: calc(var(--service-meter) * .62); }
}
@media (min-width: 40rem) and (max-width: 63.99rem) {
  html.js .page--service .service-signup__wheel { --service-meter: 4.75rem; margin-block-start: -1.5rem; margin-inline-end: -.75rem; }
}
/* A phone: the meter is smaller and stands further out, and the lines of running text in the form stop short
   of it, so it never passes over a word (it hid the end of the consent line as the form went by). */
@media (max-width: 29.99rem) {
  html.js .page--service .service-signup__wheel { --service-meter: 3rem; margin-inline-end: -.625rem; }
  html.js .page--service .service-signup__form :is(.check__label, .form__pics, .field__hint, .form__preview) { padding-inline-end: 1rem; }
}
/* From 1024 wide: the words and the wheel at the start side, the form beside them. The wheel keeps the reader company down the form. */
@media (min-width: 64rem) {
  .page--service .service-signup__inner { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-areas: "intro panel" "wheel panel"; grid-template-rows: auto 1fr; column-gap: clamp(2rem, 1rem + 4vw, 5rem); }
  .page--service .service-signup__intro { grid-area: intro; }
  .page--service .service-signup__panel { grid-area: panel; }
  .page--service .service-signup__wheel { grid-area: wheel; order: 0; align-self: start; position: sticky; inset-block-start: calc(var(--header-h) + 2rem); inline-size: clamp(11rem, 4rem + 12vw, 15rem); }
}

/* ────────────────────────────────────────────────── 4 The six areas ──
   Six names in six colours, the wheel, and the chosen area's panel in its own colour.
   Without scripts: the still wheel, then the six panels one under another.
   With the living wheel (.is-live): the wheel is the selector and the six take turns in one place. */
.page--service .service-areas .section__head .lockup__title { max-inline-size: 25ch; }
.page--service .service-areas__index { display: flex; flex-wrap: wrap; gap: .625rem; margin-block-end: clamp(1.5rem, 1rem + 2.4vw, 3rem); }
.page--service .service-areas__pick {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  min-block-size: 3rem;
  padding: .3rem 1.15rem .3rem .3rem;
  border-radius: var(--r-full);
  background: var(--area-tint);
  color: var(--fg);
  font-size: 1rem;
  font-weight: var(--fw-strong);
  line-height: var(--lh-ui);
  text-decoration: none;
  transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-3) var(--ease-out);
}
.page--service .service-areas__pick .b-medallion { --m: 2.4rem; --m-bg: var(--area); --m-fg: var(--on-area); transition: background-color var(--dur-2) ease, color var(--dur-2) ease, transform var(--dur-3) var(--ease-out); }
.page--service .service-areas__pick .b-medallion .icon { inline-size: 56%; block-size: 56%; }
/* The chosen one is filled with its colour, not only marked, and says so to assistive technology (aria-current). */
.page--service .service-areas__pick[aria-current="true"] { background: var(--area); color: var(--on-area); }
.page--service .service-areas__pick[aria-current="true"] .b-medallion { --m-bg: var(--white); --m-fg: var(--cranberry-press); }
.page--service .service-areas__pick.is-pressed { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .page--service .service-areas__pick:hover { transform: translate3d(0, -2px, 0); }
}
/* The six names in rows of a like length: three and three where four and two would fall (five and one, in
   Chinese), two and two and two in a narrow pane. The list is set as a line of text whose lines are balanced,
   which only a browser that knows text-wrap: balance can do; any other sets them row after row, as before. */
@supports (text-wrap: balance) {
  @media (min-width: 30rem) {
    .page--service .service-areas__index { display: block; margin-block-end: calc(clamp(1.5rem, 1rem + 2.4vw, 3rem) - .625rem); text-wrap: balance; }
    .page--service .service-areas__index > li { display: inline-block; margin: 0 .3rem .625rem 0; vertical-align: top; }
  }
}
/* A phone: two columns of three, each name as wide as its column (five ragged rows before). */
@media (max-width: 29.99rem) {
  .page--service .service-areas__index { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .page--service .service-areas__index > li { display: grid; }
  .page--service .service-areas__pick { padding-inline-end: .75rem; line-height: 1.2; }
}

.page--service .service-areas__stage { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 3vw, 4rem); align-items: start; }
/* The rotor is a square that turns: its corners (empty) would reach past a phone's screen as it goes round. */
.page--service .service-areas__wheel { position: relative; min-inline-size: 0; padding-block-start: 1.25rem; overflow-x: clip; }
/* The page shows its own panels, so the wheel's plain list of six would say everything twice. */
.page--service .service-areas__wheel .wheel-prop__label--plain { display: none; }
/* A hand at the wheel's foot: it can be dragged. It nods three times as it arrives, and goes once the wheel has been touched. */
.page--service .service-areas__hint { position: absolute; inset-block-end: 2%; inset-inline-start: calc(50% + min(34%, 9rem)); max-inline-size: none; pointer-events: none; transition: opacity var(--dur-3) ease; }
.page--service .service-areas:not(.is-live) .service-areas__hint,
.page--service .service-areas__wheel:has(.wheel-living.is-touched) .service-areas__hint { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .page--service .service-areas__hint.is-in .b-medallion { animation: service-nod 1.5s var(--ease-in-out) .9s 3; }
}
@keyframes service-nod { 0%, 100% { transform: none; } 35% { transform: translate3d(-.5rem, 0, 0) rotate(-14deg); } 70% { transform: translate3d(.35rem, 0, 0) rotate(10deg); } }

.page--service .service-areas__panels { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); min-inline-size: 0; }
/* One column of a known width, and running text takes the whole of it: a line of Chinese, kept whole word by
   word, is never asked how wide it would like to be (WebKit answers "the whole sentence" and it leaves the screen). */
.page--service .service-area { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m); align-content: start; min-inline-size: 0; isolation: isolate; }
.page--service .service-area > * { min-inline-size: 0; }
.page--service .service-area__cog { position: absolute; z-index: -1; inset: 0; overflow: hidden; border-radius: inherit; color: var(--row); pointer-events: none; }
.page--service .service-area__cog .wheel { position: absolute; inset-block-end: -20%; inset-inline-end: -14%; inline-size: min(72%, 24rem); block-size: auto; }
.page--service .service-area__head { display: flex; align-items: center; gap: 1rem; }
.page--service .service-area__name { font-size: calc(clamp(1.75rem, 1.5rem + 1.1vw, 2.5rem) * var(--display-scale)); font-weight: var(--fw-display); line-height: 1.08; letter-spacing: var(--tracking-display); }
.page--service .service-area__mark img { inline-size: 68%; block-size: 68%; object-fit: contain; }
.page--service .service-area__line { max-inline-size: 34em; color: var(--fg); }
/* Photographs in natural colour, each in a cog frame on a white cog a little larger than itself, over its dated caption. */
.page--service .service-area__photos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem clamp(.75rem, 2.5vw, 1.5rem); align-items: start; }
.page--service .service-area__photo { align-content: start; gap: .5rem; }
.page--service .service-area__iris { inline-size: 100%; max-inline-size: 13rem; }
.page--service .service-area__mat { padding: 4.5%; background: var(--white); -webkit-mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.page--service .service-area__mat .frame { inline-size: 100%; }
/* A picture that is not for a cog (a full hall, its faces small): a 4:3 print on a white card. */
.page--service .service-area__photo--wide .service-area__mat { padding: 4%; border-radius: var(--r-card); -webkit-mask: none; mask: none; }
.page--service .service-area__photo--wide .service-area__mat .frame { border-radius: calc(var(--r-card) - .45rem); }
.page--service .service-area__photo > figcaption { color: var(--fg); font-size: var(--fs-small); line-height: 1.4; text-wrap: wrap; }   /* each line filled in order: the dot between date and event ends a line, never begins one */
/* The record: each dated entry a soft row with its tooth. */
.page--service .service-area__record { display: grid; gap: .75rem; align-content: start; }
.page--service .service-area__list { gap: .5rem; }
.page--service .service-area__list > li { padding: .65rem 1rem .65rem 2.75rem; border-radius: .875rem; background: var(--row); line-height: 1.4; }
.page--service .service-area__list > li::before { inset-inline-start: 1rem; inset-block-start: calc(.65rem + .3em); }

.page--service .service-areas.is-live .service-areas__panels { gap: 0; }
/* Arriving on #area-<id>: leave room above the panel for the row of names, so the reader lands on the stage. */
.page--service .service-areas.is-live .service-area { scroll-margin-block-start: 7rem; }
/* The wheel marks the panel of the window it is on, or has just been sent to (.is-current), and keeps that mark
   while it turns, so the stage is never empty. One panel leaves while the next arrives over it. */
.page--service .service-areas.is-live .service-area {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-3) ease, visibility 0s linear var(--dur-3);
}
.page--service .service-areas.is-live .service-area.is-current {
  z-index: 1;
  opacity: 1;
  visibility: visible;
  transition: opacity var(--dur-3) ease, visibility 0s;
}
/* What the chosen area brings with it: the panel settles from a little lower, its medallion turns one window,
   its photographs open like an iris, its entries come in one after another. These are animations that play as
   the panel comes on, not states the others are left in: a picture kept clipped to nothing is never fetched
   by a browser that loads images lazily by what can be seen of them. */
@media (prefers-reduced-motion: no-preference) {
  .page--service .service-areas.is-live .service-area { transform: translate3d(0, .75rem, 0) scale(.985); transition: opacity var(--dur-3) ease, transform var(--dur-4) var(--ease-out), visibility 0s linear var(--dur-3); }
  .page--service .service-areas.is-live .service-area.is-current { transform: none; transition: opacity var(--dur-3) ease, transform var(--dur-4) var(--ease-out), visibility 0s; }
  .page--service .service-areas.is-live .service-area.is-current .service-area__mark { animation: service-turn var(--dur-5) var(--ease-out) both; }
  .page--service .service-areas.is-live .service-area.is-current .service-area__iris { animation: service-iris var(--dur-5) var(--ease-film) both; }
  .page--service .service-areas.is-live .service-area.is-current .service-area__photo + .service-area__photo .service-area__iris { animation-delay: var(--dur-2); }
  .page--service .service-areas.is-live .service-area.is-current .service-area__list > li { animation: service-row var(--dur-3) var(--ease-out) both; animation-delay: calc(var(--i, 1) * 70ms + 140ms); }
}
@keyframes service-turn { from { opacity: 0; transform: rotate(-60deg) scale(.7); } }
@keyframes service-iris { from { clip-path: circle(0% at 50% 50%); } to { clip-path: circle(75% at 50% 50%); } }
@keyframes service-row { from { opacity: 0; transform: translate3d(-.75rem, 0, 0); } }
@media (prefers-reduced-motion: reduce) {
  .page--service .service-areas.is-live .service-area,
  .page--service .service-areas.is-live .service-area.is-current { transition: none; }
}

/* A phone: a smaller wheel, so the head of the chosen panel is on the screen with the names and the wheel. */
@media (max-width: 33.99rem) {
  .page--service .service-areas__wheel { inline-size: min(100%, 17rem); justify-self: center; }   /* a stated width: the wheel inside is sized in per cent, so a box left to fit its content would have none */
}
/* A narrow pane (588 wide): the wheel and its panel still side by side, so a name that is pressed is seen to turn
   the wheel and change the panel at once (one under the other, the panel was a whole screen further down). */
@media (min-width: 34rem) and (max-width: 45.99rem) {
  .page--service .service-areas__stage { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 1rem; }
  .page--service .service-areas__wheel { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); }
  .page--service .service-areas__hint { inset-block-end: -6%; inset-inline: auto 0; }
  .page--service .service-area { padding: 1.25rem; }
  .page--service .service-area__head { gap: .75rem; }
  .page--service .service-area__mark { --m: 3.5rem; }
}
@media (min-width: 46rem) {
  .page--service .service-areas__stage { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  /* The wheel keeps the reader company down the panel (and, without scripts, down the list of six). */
  .page--service .service-areas__wheel { position: sticky; inset-block-start: calc(var(--header-h) + 1rem); }
}
@media (min-width: 72rem) {
  .page--service .service-area { grid-template-columns: minmax(0, 1fr) clamp(11rem, 28%, 13.5rem); grid-template-areas: "head photos" "line photos" "record photos"; grid-template-rows: auto auto 1fr; column-gap: clamp(1.5rem, 3vw, 2.5rem); }
  .page--service .service-area__head { grid-area: head; }
  .page--service .service-area__line { grid-area: line; }
  .page--service .service-area__record { grid-area: record; }
  .page--service .service-area__photos { grid-area: photos; grid-template-columns: minmax(0, 1fr); align-content: start; }
}

/* ───────────────────────────────────────── 5 How a service day runs ──
   Four stations on one line. Each is a numbered medallion with its step on a white card. With scripts and
   motion a small cog rolls along the line as the page is read (true rolling) and passes behind each station,
   which lights as it arrives; the line fills behind it. On a phone the line stands upright. */
.page--service .service-steps { --m: 3.5rem; --cog: 2.25rem; --rail: .375rem; --gap: var(--space-m); position: relative; padding-inline-start: .75rem; }
.page--service .service-steps__track { position: absolute; inset-block: 0; inset-inline-start: calc(.75rem + var(--m) / 2 - var(--rail) / 2); inline-size: var(--rail); border-radius: var(--r-full); background: var(--row); overflow: hidden; }
.page--service .service-steps__done { position: absolute; inset: 0; background: var(--accent); transform-origin: 0 0; }
.page--service .service-steps__cog { display: none; position: absolute; z-index: 1; inset-block-start: 0; inset-inline-start: calc(.75rem + var(--m) / 2 - var(--rail) / 2 - var(--cog)); inline-size: var(--cog); block-size: var(--cog); color: var(--wheel-colour); pointer-events: none; will-change: transform; }
.page--service .service-steps__cog .wheel { inline-size: 100%; block-size: 100%; }
.page--service .service-steps.is-rolling .service-steps__cog { display: block; }
.page--service .service-steps__list { position: relative; z-index: 2; display: grid; gap: var(--gap); }
.page--service .service-step { display: grid; grid-template-columns: var(--m) minmax(0, 1fr); gap: 1rem; align-items: start; }
.page--service .service-step__num { --m-size: var(--m); inline-size: var(--m); block-size: var(--m); font-family: var(--font-display); font-size: 1.5rem; font-weight: var(--fw-display); line-height: 1; transition: background-color var(--dur-3) ease, color var(--dur-3) ease; }
.page--service .service-step__card { display: grid; gap: .5rem; align-content: start; padding: clamp(1.125rem, .9rem + 1vw, 1.5rem); border-radius: var(--r-card); background: var(--row); }
.page--service .service-step__title { font-size: var(--fs-sub); }
.page--service .service-step__text { color: var(--fg-muted); }
/* While the cog rolls, a station it has not reached yet is white and waits. */
.page--service .service-steps.is-rolling .service-step:not(.is-reached) .service-step__num { --m-bg: var(--row); --m-fg: var(--cranberry-lit); }
@media (prefers-reduced-motion: no-preference) {
  .page--service .service-steps.is-rolling .service-step.is-reached .service-step__num { animation: service-pop var(--dur-3) var(--ease-out); }
}
@keyframes service-pop { 0% { transform: scale(.88); } 55% { transform: scale(1.14); } 100% { transform: none; } }
@media (min-width: 64rem) {
  .page--service .service-steps { --m: 4.25rem; --cog: 2.5rem; padding-inline-start: 0; padding-block-start: calc(var(--cog) + .25rem); }
  .page--service .service-steps__track { inset-block: calc(var(--cog) + .25rem + var(--m) / 2 - var(--rail) / 2) auto; inset-inline: 0; inline-size: auto; block-size: var(--rail); }
  .page--service .service-steps__cog { inset-block-start: calc(.25rem + var(--m) / 2 - var(--rail) / 2); inset-inline-start: 0; }
  .page--service .service-steps__list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(.875rem, 2vw, 1.75rem); }
  .page--service .service-step { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; align-items: stretch; justify-items: start; }
  .page--service .service-step__card { justify-self: stretch; }
}

/* ───────────────────────────────────── Schools and organisations ──
   One cream panel: a cranberry cog with a hand and a heart in it (the cog turns with the scroll), the words, the action. */
.page--service .service-partner__panel { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-m) var(--space-l); align-items: center; justify-items: start; }
.page--service .service-partner__mark { position: relative; background: none; isolation: isolate; }
.page--service .service-partner__disc { position: absolute; z-index: -1; inset: 0; background: var(--m-bg, var(--accent)); -webkit-mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; mask: var(--wheel-mask) center / calc(100% - 2px) calc(100% - 2px) no-repeat; }
.page--service .service-partner__mark .icon { inline-size: 40%; block-size: 40%; }
.page--service .service-partner__words { display: grid; gap: .75rem; justify-items: start; min-inline-size: 0; }
.page--service .service-partner__words .lockup__title { max-inline-size: 26ch; }
@media (min-width: 46rem) {
  .page--service .service-partner__panel { grid-template-columns: auto minmax(0, 1fr); }
  .page--service .service-partner__act { grid-column: 2; }
}
@media (min-width: 64rem) {
  .page--service .service-partner__panel { grid-template-columns: auto minmax(0, 1fr) auto; }
  .page--service .service-partner__act { grid-column: auto; }
}

/* ──────────────────────────────────────────── 6 The closing call ──
   The page's one deep field: a large panel on sand, a white wheel in it that turns with the scroll, and the four
   things a Rotaract club does as four pills (the first, this page's, in the panel's button colours). */
.page--service .service-cta__panel { padding: clamp(1.75rem, 1rem + 4.5vw, 4.5rem); overflow: hidden; overflow: clip; isolation: isolate; }
.page--service .service-cta__wheel { position: absolute; z-index: -1; inset: 0; pointer-events: none; }
.page--service .service-cta__turn { position: absolute; inset-block-end: clamp(-15rem, -17vw, -6rem); inset-inline-end: clamp(-8rem, -5vw, -2.5rem); inline-size: clamp(16rem, 38vw, 34rem); aspect-ratio: 1; color: var(--row); }
.page--service .service-cta__turn .wheel { inline-size: 100%; block-size: 100%; }
.page--service .service-cta__inner { display: grid; gap: var(--space-l); justify-items: start; }
.page--service .service-cta .lockup__title { max-inline-size: 22ch; }
.page--service .service-cta__four { display: flex; flex-wrap: wrap; gap: .625rem; }
.page--service .service-cta__strand { display: inline-flex; align-items: center; gap: .6rem; min-block-size: 2.75rem; padding: .3rem 1.1rem .3rem .3rem; border-radius: var(--r-full); background: var(--row); color: var(--fg); font-weight: var(--fw-strong); line-height: var(--lh-ui); }
.page--service .service-cta__strand .b-medallion { --m: 2.125rem; --m-bg: var(--row-hover); --m-fg: var(--fg); font-weight: var(--fw-strong); line-height: 1; }
.page--service .service-cta__strand.is-this { background: var(--btn-bg); color: var(--btn-fg); }
.page--service .service-cta__strand.is-this .b-medallion { --m-bg: var(--btn-fg); --m-fg: var(--btn-bg); }
/* The title is a whole sentence. In a narrow panel it takes a size that holds it in three lines on a phone (it took
   five) and in two in the 588 pane (it took three), and the panel keeps a little less at its sides. */
@media (max-width: 33.99rem) {
  .page--service .service-cta__panel { padding: 1.5rem 1.25rem 1.75rem; }
  .page--service .service-cta .lockup { --lockup-fs: min(var(--fs-section), 6.2vw); }
}
@media (min-width: 34rem) and (max-width: 49.99rem) {
  .page--service .service-cta__panel { padding-inline: 2rem; }
  .page--service .service-cta .lockup { --lockup-fs: min(var(--fs-section), 5.4vw); }
}