/* ============================================================
 * ONSITE EXTRAS — the components that came from the OnSite
 * landing page (on-site.org.uk), 6 Nov 2026.
 *
 * WHAT THIS IS. The landing page was rebuilt on this site's own
 * design system, so almost everything it uses already lives in
 * foundation / home-v2 / product-v3 / product-page / onsite-v2 /
 * qa-blocks / modular. What did NOT exist here is in this file:
 * the price tiles, the Paxton band, the accreditation row, the
 * hero carousel, the Command Centre map and calculator, the
 * Alert screens and drill record, and the four Martyn's Law
 * procedure drawings.
 *
 * WHERE IT CAME FROM. Pulled out of three places in that
 * project by selector, not by line range, so the extract can be
 * re-run if the source moves:
 *   - styles/onsite-landing.css   (2,940 lines; ~a third kept)
 *   - the inline <style> in index.html
 *   - the inline <style> in command-centre.html
 * Comments came across with their rules, because that project
 * records WHY a number is what it is in the comment above it.
 *
 * WHAT WAS DELIBERATELY LEFT BEHIND:
 *   - .pv3g--fit — the landing page's "every hero the height of
 *     the home hero" system. Rebecca, 6 Nov: the OnSite hero
 *     keeps THIS site's height so it still matches One,
 *     Classroom and Sync. Do not add it back.
 *   - .cc-scene / .cc-pin / .cc-priv / .cc-ring / .cc-cal — the
 *     superseded drawn animation for Command Centre, replaced by
 *     real screenshots on 2 Nov. Dead on every current page.
 *   - .ckb — the landing page's own cookie banner. This site
 *     gates consent through scripts/cookie-banner.js instead,
 *     and loading both would build two banners.
 *   - .nv__ / .mm__ nav-fitting rules — written for the OnSite
 *     site's eight-link nav, not this site's switcher.
 *
 * ⚠ LOAD ORDER: this sheet goes in BEFORE styles/modular.css,
 * which must stay last on every page. modular.css carries
 * body.hv2 selectors at (0,2,1) that a bare class here cannot
 * beat however late it loads.
 * ============================================================ */

/* ============================================================
 * from styles/onsite-landing.css
 * ============================================================ */

/* .proof / .proofrow themselves are the design system's own components, styled
   in home-v2.css. modular.css zeroes .proofrow's negative top margin so it sits
   inside this band rather than hanging up over the hero, which is correct under
   modular bands: there is no flat section edge left to straddle. */

/* --- the accreditation strip --------------------------------------------- */

.hv2 .os-accred {
  margin-top: clamp(32px, 4vw, 48px);
  padding-top: clamp(24px, 3vw, 32px);
  border-top: 1px solid #E6ECF4;
}

/* Eyebrow, not a navy pill. The design system's .eyebrow is a filled navy pill
   and the rule is one per section; this strip sits inside the proof band and a
   second pill there would compete with the three claims above it. Uppercase is
   sanctioned for eyebrows, and 12px is the site-wide floor. */

.hv2 .os-accred__label {
  margin: 0 0 clamp(16px, 2vw, 22px);
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4A5876;
}

/* One quiet line: the label and the three marks, centred, on a single row.
   History, so nobody reinstates a rejected version (all 06/10/2026):
     · white tiles with names underneath, matching the feature tiles. Rejected:
       it put two rows of near-identical boxes a short scroll apart, with the
       LESS important row on top.
     · the same without boxes, names kept. Rejected in favour of this.
   What survived is the quietest treatment. These are a trust signal a reader
   glances at, not something to stop and read, so they sit below the three
   claims above them rather than competing. */

.hv2 .os-accred {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px clamp(28px, 4vw, 52px);
}

.hv2 .os-accred__label {
  margin: 0;
  text-align: center;
  font-size: 12px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #4A5876;
}

/* Fixed-height well, and the logos are matched on HEIGHT, never width: the
   three certificate files are different shapes and two carry their own white
   box baked in, so sizing by width left the G-Cloud mark a third larger than
   the other two and the row read as lopsided.
   Rebecca, 06/10/2026: "make the logos bigger". Was 34px; now up to 54px, so
   roughly half as tall again. They are the largest thing in this block, which
   is the intent: with the names gone the marks have to carry it alone. */

.hv2 .os-accred__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: clamp(42px, 4.6vw, 54px);
  border-radius: 10px;
  transition: opacity 200ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.hv2 .os-accred__logo img {
  display: block;
  width: auto;
  max-width: 100%;
  max-height: 100%;
}

.hv2 .os-accred__logo:hover { opacity: 0.72; }

.hv2 .os-accred__logo:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(47, 183, 241, 0.45);
}

@media (prefers-reduced-motion: reduce) {
  .hv2 .os-accred__logo { transition: none; }
}

/* Below tablet the label takes its own line above the three marks, rather than
   wrapping to sit alone and off-centre at the end of the row. */

@media (max-width: 620px) {
  .hv2 .os-accred__label { flex: 0 0 100%; }
  .hv2 .os-accred__logo { height: 40px; }
}

/* --- MIS section as a grey module ---------------------------------------- */

/* onsite-v2.css gives .os-mis clamp(48px,5.4vw,84px) top and clamp(80px,9vw,140px)
   bottom. That asymmetry is invisible on grouped.org.uk, where this section is
   white and the extra bottom padding just reads as the gap before the next
   band. Inside a grey card it is not invisible: it puts up to 56px more grey
   below the text than above it, and the panel looks like it has slipped.
   Balanced here, and only while the section is actually a module. */

.hv2 .os-mis.band--module {
  /* the site's one section padding (modular.css --band-pad), 23/10/2026; was
     clamp(48px, 5.4vw, 84px), 1.4px off every other tile at 1440 */
  padding-top: var(--band-pad);
  padding-bottom: var(--band-pad);
}

/* --- benefit grids: columns that suit the number of tiles ------------------ */

/* The design system ships this grid at 4 across, which is right for a 4-tile
   grid and leaves a widowed row otherwise.
   ⚠ THIS USED TO BE A BLANKET `repeat(3, 1fr)`, added 06/10/2026 so the
   homepage's SIX tiles read as 2 rows of 3. It was applied to every grid on
   every page, so the two FOUR-tile grids (partners, launch campaign) fell
   3 + 1, which looks like a mistake. Count-aware now:
     3 tiles -> 3 across (one clean row)
     6 tiles -> 3 across (two clean rows)
     anything else -> the system's 4, untouched
   ⚠ MIN-WIDTH, not a bare rule. product-v3.css already drops this grid to two
   columns under 1020px and one under 600px, and this sheet loads after it, so
   a bare rule would beat both and force three cramped columns onto a phone. */

@media (min-width: 1021px) {
  .hv2 .pv3-ben__grid:has(> .pv3-ben:nth-child(3)):not(:has(> .pv3-ben:nth-child(4))),
    .hv2 .pv3-ben__grid:has(> .pv3-ben:nth-child(6)):not(:has(> .pv3-ben:nth-child(7))) {
      grid-template-columns: repeat(3, 1fr);
    }
}

/* The icon tints cycle every FOUR tiles (home-v2.css ~4050): tile 1 keeps the
   base colour, then green, violet, amber. With six tiles the fifth falls back
   to the base, so tiles 1 and 5 matched, and in a 3-wide grid they sit directly
   above one another in column 1, which reads as a mistake.
   The design system already solved this for its own six-tile grids
   (.ph-ben__grid, .ml-caps) with a sky fifth. Same values, applied here. */

.hv2 .pv3-ben__grid > .pv3-ben:nth-child(4n + 5) .pv3-ben__ico {
  background: #D9F4FF;
  color: #1B367E;
}

/* --- the proof numbers inside a testimonial card --------------------------- */

/* Rebecca, 08/10/2026: these belong under the Cwmbran byline, small, rather
   than in a row below both testimonials. They are that school's own figures and
   the quote above them names the 1,200, so attributing them to the pair was
   misleading as well as loud.
   The numbers keep weight 700: the design system drops HEADINGS to 600 but big
   display figures stay bold, and these are figures. */

.hv2 .tcar__stats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px clamp(18px, 2.4vw, 28px);
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #EEF2F7;
  font-size: 13.5px;
  line-height: 1.45;
  color: #4A5876;
}

.hv2 .tcar__stats strong {
  font-weight: 700;
  color: #0F1438;
  /* tabular-nums so the box does not twitch while the count-up runs */
  font-variant-numeric: tabular-nums;
}

@media (max-width: 520px) {
  .hv2 .tcar__stats { flex-direction: column; gap: 4px; }
}

/* --- Paxton Net2 ----------------------------------------------------------- */

/* Spec'd 22/10/2026. Reuses .os-mis__grid, so this section and the MIS one
   above it share a layout as well as an argument. White, not band--module,
   so the two alternate instead of reading as one long grey panel.

   ⚠ THE CHIP IS WHITE BY PAXTON'S RULE, NOT BY OURS. Their wordmark is dark
   grey and disappears on any tint, so the mark must sit on white — which is
   why the chip keeps a visible border here even though the section behind it
   is already white: without it the logo floats with no container. Paxton
   publish no separate Net2 mark, so "Net2" is type, in their wordmark grey
   #3C3C3B, divided from the logo by a hairline. Do not recolour either.
   Check the final treatment against Paxton's integration-partner brand terms
   before this goes live. */

.hv2 .os-pax__chip {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 clamp(14px, 1.6vw, 20px);
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--ge-line, #E6ECF4);
  border-radius: 6px;
}

.hv2 .os-pax__chip img { height: 22px; width: auto; display: block; }

.hv2 .os-pax__chip span {
  padding-left: 14px;
  border-left: 1px solid #D7DBD7;
  font-size: 17px;
  line-height: 1;
  color: #3C3C3B;              /* Paxton's wordmark grey — not a GroupEd token */
}

/* the one line that has to land: it is the answer to the question a school's
   network manager asks before any of the rest matters */

/* ⚠ TWO CLASSES AND AN ELEMENT, deliberately. `.hv2 .os-pax__copy p` below
   sets `margin: 0 0 12px` on every paragraph in this column, and a two-class
   selector loses to it — which silently flattened this line's top margin and
   jammed it against the tick list. Keep the `p`. */

.hv2 .os-pax__copy p.os-pax__keep {
  margin: clamp(22px, 2.4vw, 30px) 0 0;
  padding-left: 14px;
  border-left: 3px solid var(--pp-ink, #614DBA);
  color: var(--ge-navy, #0F1438);
  max-width: none;
}

/* Its own grid, not .os-mis__grid, because this section now carries a photo
   and the MIS one carries logos — the photo wants the WIDER column and the
   MIS copy wants it, so sharing one rule would starve whichever came second.
   Photo LEFT, deliberately: MIS above is copy-left, so the two alternate and
   the eye is handed down the page instead of reading them as one slab. */

.hv2 .os-pax__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: clamp(28px, 4vw, 64px);
  align-items: center;
}

/* ⚠ THE PHOTO IS A FRAME FROM THE FILM (15.8s, the sixth-form student holding the card to the reader — sharper than 16.2s, where it is mid-tap and blurred; new file name onsite-paxton-student-tap.jpg so no browser shows a cached copy of the old one), and the
   card in it is DELIBERATELY BLANK. It replaced the staff-tap frame on
   22/10/2026 — Rebecca: "the words on her card are gibberish so i dont want
   people to be able to read them". That shot could not be widened: the film's
   "Staff. Tap a Paxton reader" caption sits bottom-left, and widening also
   brought in a lanyard ID badge with more made-up text and a face. This one is
   cropped to the right of the "Sixth form" caption (x >= 1024 of 2624), so
   re-cutting it from the film the same way keeps the caption out.
   23/10/2026: briefly re-cut further left to show the arm, then reverted to the
   original staff-tap frame (onsite-paxton-staff-tap.jpg, 13.4s) at Rebecca's
   request; she is retouching the made-up text off its card in Photoshop, and
   the retouched file replaces it. The notes above about the blank-card frames
   are history. */

.hv2 .os-pax__media {
  margin: 0;
  border-radius: clamp(16px, 1.6vw, 24px);
  overflow: hidden;
  background: var(--ge-blue-3, #D9F4FF);
}

.hv2 .os-pax__media img,
.hv2 .os-pax__media video {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 50%;
}

.hv2 .os-pax__copy h2 { margin: 0 0 14px; color: var(--ge-navy, #0F1438); }

.hv2 .os-pax__copy p {
  margin: 0 0 12px;
  font-size: 16.5px;
  line-height: 1.65;
  color: #4A5876;
  max-width: 54ch;
}

/* two columns, so four short lines read as a spec list and not as a fifth
   paragraph. They sit under the prose now that the photo owns the other half. */

.hv2 .os-pax__points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px clamp(16px, 2vw, 28px);
  margin: clamp(18px, 2vw, 26px) 0 0;
  padding: 0;
  list-style: none;
}

.hv2 .os-pax__point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  font-size: clamp(14.5px, 1.3vw, 16px);
  line-height: 1.45;
  color: #4A5876;
}

.hv2 .os-pax__tick {
  flex: none;
  width: 22px;
  height: 22px;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--ge-blue-3, #D9F4FF);
  color: var(--pp-ink, #614DBA);
  display: grid;
  place-items: center;
}

.hv2 .os-pax__tick svg { width: 12px; height: 12px; }

/* Collapses at 900px to match .os-mis__grid, which is set in onsite-v2.css —
   the two sections sit together, so a split breakpoint would stack one while
   the other was still side by side. Copy first when stacked: the heading is
   the point, the photo is the evidence. */

@media (max-width: 900px) {
  .hv2 .os-pax__grid { grid-template-columns: 1fr; }
  .hv2 .os-pax__media { order: 2; }
  .hv2 .os-pax__copy  { order: 1; }
  .hv2 .os-pax__media img,
    .hv2 .os-pax__media video { aspect-ratio: 16 / 10; }
}

@media (max-width: 560px) {
  .hv2 .os-pax__points { grid-template-columns: 1fr; }
}

/* --- hero photo below 1300px: stack it, don't delete it --------------------- */

/* Spec'd 22/10/2026 after a design pass measured the first screen at every
   width. product-v3.css:449 hides .pv3g__photowrap under 1300px — that cutoff
   covers EVERY iPad, every phone and most laptops, so the strongest thing on
   the page (a real photograph of a school) was visible only to desktop
   visitors over 1300px wide. The July reason for the rule was real: the copy
   column and the card cluster collided between ~1021-1300px. Hiding solved the
   collision; it also threw the picture away. This stacks instead, which solves
   the collision too because the two are no longer side by side.

   ⚠ WHY A COLUMN AND NOT A NARROWER ROW. Below 1300px the copy needs the full
   width for the headline (it wraps to four lines as it is). Any row keeps the
   collision; only stacking removes it.

   ⚠ THE FLOATING CARDS STAY HIDDEN. .pv3g__card--tr/--br are positioned to
   BLEED past the photo by clamp(16px,2vw,30px) (product-v3.css:539 explains
   why). Stacked, that bleed lands them outside the violet board. They are
   aria-hidden decoration, so the photo carries the slide on its own and the
   dots keep the carousel usable. */

@media (max-width: 1300px) {
  body.hv2 .pv3g__frame--photo .oshc__stack {
      /* 1.1/1 is the desktop portrait crop, sized by the frame's height. Stacked
         it is sized by WIDTH, so a portrait ratio would run most of a phone
         screen tall; 16/10 keeps the first screen readable without scrolling. */
      height: auto;
      width: 100%;
      aspect-ratio: 16 / 10;
    }
}

@media (max-width: 620px) {
  /* a phone is taller than it is wide, so the photo can afford to be squarer
       without pushing the buttons off the first screen */
  body.hv2 .pv3g__frame--photo .oshc__stack { aspect-ratio: 4 / 3; }
}

/* --- Command Centre hero: navy, not violet ---------------------------------- */

/* Rebecca, 22/10/2026: "can we mkae the command centre hero navy". Same hero as
   the home page in every other respect. product-v3.css:238 paints every OnSite
   .pv3g__frame violet (#614DBA) at two classes; this outranks it for this one
   hero only. The OnSite chip stays violet on purpose — it is the product's
   mark, and it reads as the one note of colour on the navy board.
   Nothing else needs changing: the headline, the dimmed span (product-v3.css:360
   sets it white), the lede and both buttons are already white or white-on-navy. */

body.hv2 .pv3g--navy .pv3g__frame { background: var(--ge-navy, #0F1438); }

/* --- Command Centre "Whose duty is it?": the two answers as tiles ----------- */

/* Rebecca, 22/10/2026: "can we pop the types in tiles". They reuse .pv3-ben,
   the exact tile the "What you see" cards above are built from, so the two
   sections read as one system: same white card, radius, shadow and type, and
   an icon tile in the usual style (a school for the trust, a civic building
   for the council). The second icon takes the green tint, matching the order
   the site's icon tiles cycle in.
   .os-mis__grid is 1.2fr / 1fr because the MIS section pairs copy with logos.
   Two equal answers want equal columns. MIN-WIDTH, because onsite-v2.css
   stacks .os-mis__grid at 900px and a bare rule here would outrank it. */

@media (min-width: 901px) {
  body.hv2 .cc-duty { grid-template-columns: 1fr 1fr; align-items: stretch; }
}

/* 02/11/2026, Rebecca: "lets stack the two tiles so i can put a photo on the left". The
   grid is now photo | the two tiles stacked. The photo fills the full height of the
   stack on a desktop and takes a 4:3 frame above the tiles once the grid stacks at
   900px (onsite-v2.css). */

body.hv2 .cc-duty__stack > .pv3-ben:nth-child(2) .pv3-ben__ico { background: #E6F3D9; color: #4F7D2C; }

body.hv2 .cc-duty .pv3-ben h3 { margin: 0 0 8px; color: var(--ge-navy, #0F1438); }

/* --- Command Centre hero chip: "OnSite | Command Centre" --------------------- */

/* Rebecca, 22/10/2026: "can we add the words command centre in the logo in the
   hero". There is no Command Centre logo file, so — as with "Paxton | Net2" on
   the home page — the product name is set in type beside the OnSite mark,
   divided from it by a hairline, in white Outfit to match the wordmark. The
   logo's alt stays "OnSite" so a screen reader hears "OnSite Command Centre".
   The chip is inline-GRID in product-v3.css:314 (one logo, centred); with two
   items it has to be a row. */

body.hv2 .cc-logochip {
  display: inline-flex;
  align-items: center;
  gap: clamp(12px, 1.2vw, 18px);
}

body.hv2 .cc-logochip__name {
  padding-left: clamp(12px, 1.2vw, 18px);
  border-left: 1px solid rgba(255, 255, 255, .4);
  font-size: clamp(22px, 2.1vw, 31px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.01em;
  color: #fff;
  white-space: nowrap;
}

/* a phone: smaller mark and name so the chip fits the board's width */

@media (max-width: 620px) {
  body.hv2 .cc-logochip img { height: 32px; }
  body.hv2 .cc-logochip__name { font-size: 18px; }
  body.hv2 .cc-logochip { padding: 12px 16px; border-radius: 16px; }
}

/* ============================================================================
   ILLUSTRATIONS — Alert, Martyn's Law, Become a partner (22/10/2026)
   Rebecca: "is there anywhere else where we could do some illustrations. it
   doesnt have to be an animation", then picked five. Same drawing rules as the
   Command Centre graphics above: the icons' 2px line, round ends, no shading,
   one ink per drawing, pale tiles; colour only where it means something.
   Only the screens on the Alert page move (once, via scripts/cc-scenes.js);
   the rest are still drawings.
   ============================================================================ */

body.hv2 .mlp svg *,
body.hv2 .al-scr svg *,
body.hv2 .al-rec svg *,
body.hv2 .bp-steps svg * { vector-effect: non-scaling-stroke; }

/* --- the honest line, everywhere it is used --------------------------------- */

/* ⚠ REGRESSION FIX. The Paxton rebuild (same day) moved this rule onto
   `.hv2 .os-pax__copy p.os-pax__keep` to win a specificity fight inside that
   section, which silently dropped the violet rule from the Alert page, where
   the same class carries "OnSite is not a compliance product on its own, and
   no software is." This is the general rule back; the Paxton one stays. */

body.hv2 .os-pax__keep {
  margin-top: clamp(18px, 2vw, 26px);
  padding-left: 14px;
  border-left: 3px solid var(--pp-ink, #614DBA);
  color: var(--ge-navy, #0F1438);
}

/* --- the four procedures ---------------------------------------------------- */

body.hv2 .mlp {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(12px, 1.4vw, 20px);
  margin: 0; padding: 0; list-style: none;
}

body.hv2 .mlp--alert { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* half a page wide */

body.hv2 .mlp__item {
  position: relative;
  display: flex; flex-direction: column; gap: 4px;
  padding: clamp(14px, 1.4vw, 18px);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 20, 56, .08);
}

body.hv2 .mlp__item b    { font-size: 16px; color: var(--ge-navy, #0F1438); }

body.hv2 .mlp__item > span:not(.mlp__art) { font-size: 14.5px; line-height: 1.45; color: #4A5876; }

body.hv2 .mlp__art {
  display: block; margin-bottom: 10px;
  aspect-ratio: 3 / 2; border-radius: 12px;
  background: var(--t-bg, #E8E4F9); color: var(--t-ink, #614DBA);
}

body.hv2 .mlp__art svg { display: block; width: 100%; height: 100%; stroke-width: 2.2; }

/* the site's icon-tile cycle, in the same order (home-v2.css ~4050) */

body.hv2 .mlp__item:nth-child(2) { --t-bg: #E6F3D9; --t-ink: #4F7D2C; }

body.hv2 .mlp__item:nth-child(3) { --t-bg: #ECE8FB; --t-ink: #4B3B9C; }

body.hv2 .mlp__item:nth-child(4) { --t-bg: #F9EFD0; --t-ink: #7A5C00; }

/* on the Alert page the point is ONE of the four, so the other three go quiet
   and communication is the only one in colour */

body.hv2 .mlp--alert .mlp__item { --t-bg: #EEF1F6; --t-ink: #8E9AB3; }

body.hv2 .mlp--alert .mlp__item.is-alert { --t-bg: var(--pp-ink, #614DBA); --t-ink: #fff; }

body.hv2 .mlp--alert .mlp__item.is-alert { box-shadow: 0 0 0 2px var(--pp-ink, #614DBA), 0 12px 28px rgba(97, 77, 186, .18); }

body.hv2 .mlp__tag {
  position: absolute; top: 10px; right: 10px;
  padding: 4px 9px; border-radius: 99px;
  background: #fff; color: var(--pp-ink, #614DBA);
  font-size: 13px; font-weight: 600; font-style: normal; line-height: 1.2;
  box-shadow: 0 4px 12px rgba(15, 20, 56, .12);
}

@media (max-width: 1020px) {
  body.hv2 .mlp { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

body.hv2 .ml-more .mlp + .ml-more__title { margin-top: clamp(36px, 4vw, 56px); }

/* --- Alert: the screens ------------------------------------------------------ */

body.hv2 .al-take { align-items: center; }

body.hv2 .al-take__points { grid-template-columns: minmax(0, 1fr); margin-top: 22px; gap: 10px; }

body.hv2 .al-screens {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 1.6vw, 22px) clamp(10px, 1.2vw, 18px);
  padding: clamp(18px, 2vw, 28px);
  border-radius: 20px;
  background: var(--pp-2, #E8E4F9);
  color: var(--pp-ink, #614DBA);                 /* the device outlines */
}

body.hv2 .al-scr { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; }

body.hv2 .al-scr--board { grid-column: 1 / -1; }

body.hv2 .al-scr--board svg { width: min(100%, 420px); }

body.hv2 .al-scr svg { display: block; width: 100%; height: auto; stroke-width: 2.2; }

body.hv2 .al-scr figcaption { font-size: 13px; font-weight: 600; color: var(--ge-navy, #0F1438); }

body.hv2 .al-scr__paper { fill: #fff; stroke: none; }

body.hv2 .al-scr__bar   { fill: #DCE3EE; stroke: none; }

body.hv2 .al-scr__red   { fill: #D7320F; stroke: none; }

/* lockdown red, as the product shows it */

body.hv2 .al-scr__ink   { color: #fff; stroke: #fff; }

body.hv2 .al-scr__ink * { stroke: #fff; }

body.hv2 .al-scr__word  { fill: #fff; stroke: none; font-family: inherit; font-weight: 600; letter-spacing: -.01em; }

/* --- Alert: the drill record ------------------------------------------------- */

body.hv2 .al-rec {
  margin-top: clamp(4px, 1vw, 12px);
  padding: clamp(20px, 2.4vw, 32px);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 8px 24px rgba(15, 20, 56, .08);
}

body.hv2 .al-rec svg { width: 20px; height: 20px; stroke-width: 2.2; display: block; }

body.hv2 .al-rec__head { display: flex; align-items: center; gap: 14px; margin-bottom: 18px; }

body.hv2 .al-rec__ico {
  display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: var(--pp-2, #E8E4F9); color: var(--pp-ink, #614DBA);
}

body.hv2 .al-rec__ico svg { width: 22px; height: 22px; }

body.hv2 .al-rec__title { display: flex; flex-direction: column; gap: 2px; font-size: 14.5px; color: #4A5876; }

body.hv2 .al-rec__title b { font-size: 17px; color: var(--ge-navy, #0F1438); }

body.hv2 .al-rec__eg {
  margin-left: auto; padding: 4px 10px; border-radius: 99px;
  background: #EEF1F6; color: #4A5876; font-size: 13px; font-weight: 600;
}

body.hv2 .al-rec__cols,
body.hv2 .al-rec__row {
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .7fr) minmax(0, 2.4fr) 3.2em 22px;
  align-items: center; column-gap: clamp(10px, 1.6vw, 22px);
}

body.hv2 .al-rec__cols { padding: 0 0 8px; font-size: 13px; font-weight: 600; color: #4A5876; }

body.hv2 .al-rec__cols span:nth-child(3) { grid-column: 3 / span 2; }

body.hv2 .al-rec__rows { margin: 0; padding: 0; list-style: none; }

body.hv2 .al-rec__row { padding: 12px 0; border-top: 1px solid #EEF1F6; font-size: 15px; color: var(--ge-navy, #0F1438); }

body.hv2 .al-rec__where { font-weight: 600; }

body.hv2 .al-rec__n { color: #4A5876; font-variant-numeric: tabular-nums; }

body.hv2 .al-rec__bar { height: 8px; border-radius: 99px; background: #EEF1F6; overflow: hidden; }

body.hv2 .al-rec__bar i { display: block; height: 100%; width: calc(var(--t) * 100%); border-radius: inherit; background: var(--pp-ink, #614DBA); }

body.hv2 .al-rec__t { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; color: #4A5876; }

body.hv2 .al-rec__ok { color: #4F7D2C; }

body.hv2 .al-rec__row.is-miss .al-rec__ok { color: #D7320F; }

body.hv2 .al-rec__miss {
  grid-column: 1 / -1; margin-top: 8px;
  padding: 8px 12px; border-radius: 10px;
  background: #FFF5F3; color: #B42A0C; font-size: 14px; font-weight: 600;
}

body.hv2 .al-rec__foot { max-width: none; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid #EEF1F6; font-size: 15px; color: #4A5876; }

body.hv2 .al-rec__foot b { color: var(--ge-navy, #0F1438); }

/* a phone: name and tick on one line, the bar and time underneath */

@media (max-width: 620px) {
  body.hv2 .al-rec__cols { display: none; }
  body.hv2 .al-rec__row {
      grid-template-columns: minmax(0, 1fr) auto 22px;
      grid-template-areas: "where n ok" "bar t t";          /* the time spans the last two columns, or "0.6 s" wraps */
      row-gap: 8px;
    }
  body.hv2 .al-rec__where { grid-area: where; }
  body.hv2 .al-rec__n     { grid-area: n; }
  body.hv2 .al-rec__ok    { grid-area: ok; }
  body.hv2 .al-rec__bar   { grid-area: bar; }
  body.hv2 .al-rec__t     { grid-area: t; }
  body.hv2 .al-rec__miss  { grid-column: 1 / -1; }
  body.hv2 .al-rec__eg    { display: none; }
}

/* --- the motion: the takeover sweeps across the screens, once --------------- */

@media (prefers-reduced-motion: no-preference) {
  .cc-motion .al-screens .al-scr__alert {
      animation: al-take 420ms cubic-bezier(.2, .9, .3, 1) both;
      animation-delay: calc(500ms + var(--i, 0) * 260ms);
    }
}

/* --- Command Centre: the price tile and calculator (22/10/2026) ------------- */

/* Replaces a centred pill + headline + one line that "looks lost". Left: the
   price and what it covers. Right: the sum, done for them. No pill. */

body.hv2 .ccp {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: stretch;
  padding: clamp(24px, 3vw, 44px);
  border-radius: 24px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 20, 56, .08);
}

body.hv2 .ccp__main h2 { margin: 0 0 12px; max-width: 18ch; color: var(--ge-navy, #0F1438); }

body.hv2 .ccp__main > p { margin: 0; }

body.hv2 .ccp__ticks { display: grid; gap: 10px; margin: 22px 0 22px; padding: 0; list-style: none; }

body.hv2 .ccp__ticks li { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 500; color: var(--ge-navy, #0F1438); }

body.hv2 .ccp__ticks svg { flex: none; width: 22px; height: 22px; color: var(--pp-ink, #614DBA); }

body.hv2 .ccp__link { font-weight: 600; color: var(--pp-ink, #614DBA); }

body.hv2 .ccc {
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
  padding: clamp(22px, 2.6vw, 36px);
  border-radius: 18px; background: var(--pp-2, #E8E4F9);
}

body.hv2 .ccc__q { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--ge-navy, #0F1438); }

body.hv2 .ccc__step { display: flex; align-items: center; gap: 12px; }

body.hv2 .ccc__btn {
  display: grid; place-items: center; flex: none;
  width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%;
  background: #fff; color: var(--pp-ink, #614DBA); cursor: pointer;
  box-shadow: 0 4px 12px rgba(15, 20, 56, .10);
  transition: transform 160ms ease, box-shadow 160ms ease;
}

body.hv2 .ccc__btn[hidden] { display: none; }

body.hv2 .ccc__btn svg { width: 20px; height: 20px; }

body.hv2 .ccc__btn:hover { box-shadow: 0 6px 16px rgba(15, 20, 56, .16); }

body.hv2 .ccc__btn:active { transform: scale(.94); }

body.hv2 .ccc__btn:focus-visible,
body.hv2 .ccc__n:focus-visible { outline: 3px solid var(--pp-ink, #614DBA); outline-offset: 2px; }

body.hv2 .ccc__n {
  width: 5.2ch; height: 56px; padding: 0 8px;
  border: 0; border-radius: 14px; background: #fff;
  font: inherit; font-size: 30px; font-weight: 700; text-align: center;
  font-variant-numeric: tabular-nums; color: var(--ge-navy, #0F1438);
  -moz-appearance: textfield;
}

body.hv2 .ccc__n::-webkit-outer-spin-button,
body.hv2 .ccc__n::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

body.hv2 .ccc__total {
  margin: 6px 0 0; max-width: none;
  font-size: 18px; font-weight: 500; color: var(--ge-navy, #0F1438);
}

body.hv2 .ccc__total output {
  display: block;
  font-size: clamp(38px, 4vw, 54px); font-weight: 700; line-height: 1.05; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}

body.hv2 .ccc__small { margin: 0; max-width: none; font-size: 14px; color: #4A5876; }

@media (max-width: 900px) {
  body.hv2 .ccp { grid-template-columns: minmax(0, 1fr); }
}

/* --- home page price: one tile (22/10/2026) ----------------------------------- */

/* Same shape as the Command Centre price tile (.ccp), so the site prices things
   one way: the price and what you do next on the left, what is included and
   what costs extra on the right. */

body.hv2 .osp {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: clamp(20px, 3vw, 44px); align-items: stretch;
  padding: clamp(24px, 3vw, 44px);
  border-radius: 24px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 20, 56, .08);
}

body.hv2 .osp__main { display: flex; flex-direction: column; gap: 12px; }

body.hv2 .osp__main h2 { margin: 0 0 4px; max-width: 16ch; color: var(--ge-navy, #0F1438); }

body.hv2 .osp__main h2 [hidden], body.hv2 .osp [hidden] { display: none; }

body.hv2 .osp__launch { margin: 0; max-width: 46ch; font-size: 17px; line-height: 1.55; color: var(--ge-navy, #0F1438); }

body.hv2 .osp__launch b { color: var(--pp-ink, #614DBA); font-variant-numeric: tabular-nums; }

body.hv2 .osp__small { margin: 0; max-width: 52ch; font-size: 14px; line-height: 1.5; color: #4A5876; }

body.hv2 .osp__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 22px; margin-top: 10px; }

body.hv2 .osp__trial { font-weight: 600; color: var(--pp-ink, #614DBA); padding-block: 8px; }

body.hv2 .osp__side {
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.6vw, 34px);
  border-radius: 18px; background: var(--pp-2, #E8E4F9);
}

body.hv2 .osp__label { margin: 0 0 10px; font-size: 14px; font-weight: 600; color: var(--pp-ink, #614DBA); }

body.hv2 .osp__ticks { display: grid; gap: 10px; margin: 0 0 22px; padding: 0; list-style: none; }

body.hv2 .osp__ticks li { display: flex; align-items: flex-start; gap: 10px; font-size: 16px; font-weight: 500; line-height: 1.4; color: var(--ge-navy, #0F1438); }

body.hv2 .osp__ticks svg { flex: none; width: 22px; height: 22px; color: var(--pp-ink, #614DBA); }

body.hv2 .osp__adds { display: grid; gap: 10px; margin: 0; }

body.hv2 .osp__adds div {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 14px;
  padding: 12px 14px; border-radius: 12px; background: #fff;
}

body.hv2 .osp__adds dt a { font-weight: 600; color: var(--ge-navy, #0F1438); }

body.hv2 .osp__adds dd { margin: 0; font-size: 14.5px; color: #4A5876; }

@media (max-width: 900px) {
  body.hv2 .osp { grid-template-columns: minmax(0, 1fr); }
}

/* the tile's main button is navy like every other primary button on a white
   surface (the contact band, Book a demo in the nav); .pp-btn alone paints it
   in the product's violet */

body.hv2 .osp .pp-btn { background: var(--ge-navy, #0F1438); color: #fff; }

body.hv2 .osp .pp-btn:hover { background: #1B2257; }

/* --- ghost OnSite mark in empty tile corners (22/10/2026) ------------------- */

/* Rebecca: "if theres areas in tiles that are empty like in this section where
   the top right corner is empy - add a ghost icon", then "i meant the onsite
   icon logo". Every grey tile whose heading sits on the left with nothing beside
   it carries the OnSite mark, faint and solid, in the empty top-right corner —
   the same device as the heroes' watermark, at the pale-background strength.
   The shape is the mark copied out of assets/images/brand/onsite-logo-violet.svg.
   Add one to a new tile by putting <span class="ghost"> straight inside its
   <section>; the rules below do the rest.
   ⚠ DESKTOP ONLY. Under 1020px the heading spans the full width and there is
   no empty corner — the mark would sit behind the words. */

body.hv2 section:has(> .ghost) { position: relative; }

body.hv2 section:has(> .ghost) > .container { position: relative; z-index: 1; }

/* Bigger and off the corner (Rebecca, 23/10/2026: "i want it bigger and in the
   corner with parts of it cropped"). The negative top/right push it past the
   tile's top-right corner; every tile that carries one is a .band--module, which
   is overflow:hidden with rounded corners (modular.css rule 2a), so the tile
   itself crops the mark along its edge and curve. Was 120-168px wide, sitting
   inside the corner at top 40-66px / right 52-116px; then 220-300px; then
   "the ghost needs to be bigger" (23/10/2026), so 300-440px; then "a good size
   but needs to be closer to the corner and bigger", so 340-500px and pushed
   further off the corner, which keeps the visible part about the same while
   the mark itself reads larger and sits tighter into the corner. Content that
   reaches it (Alert's feature cards) sits above it (z-index 1) and covers it. */

body.hv2 .ghost {
  position: absolute; z-index: 0;
  /* 400-600px (was 340-500), offsets scaled with it so it stays tucked in the
     corner: Rebecca, 23/10/2026, "make them bigger again", straight after
     asking for them lighter */
  top: clamp(-205px, -12vw, -120px); right: clamp(-190px, -11.4vw, -108px);
  width: clamp(400px, 37vw, 600px); aspect-ratio: 314 / 368;
  /* .05 (was .08): Rebecca, 23/10/2026, "can we make the ghost icon logos
     lighter they are a bit distracting" */
  color: var(--pp-ink, #614DBA); opacity: .05;
  pointer-events: none;
}

body.hv2 .ghost svg { display: block; width: 100%; height: 100%; }

body.hv2 .ghost path { fill: currentColor; stroke: none; }

@media (max-width: 1020px) {
  body.hv2 .ghost { display: none; }
}

/* --- Alert page price tile: the network check as the right half (22/10/2026) -- */

body.hv2 .osp__h { margin: 0 0 10px; font-size: clamp(18px, 1.5vw, 21px); line-height: 1.3; color: var(--ge-navy, #0F1438); }

body.hv2 .osp__p { margin: 0 0 10px; max-width: none; font-size: 15.5px; line-height: 1.6; color: #3E4A66; }

body.hv2 .osp__p:last-child { margin-bottom: 0; }

/* --- home: the crests and the badges close the testimonials ------------------ */

/* Rebecca, 22/10/2026, option B: under the hero, just the three proof cards; the
   crests and the badges moved down to "What schools say about OnSite". Then
   23/10/2026 the badges went up under the cards ("can we move the Accredited
   and approved section under the three tiles that are under the hero") and
   straight back down under the crests ("revert"). Tried and rejected first, on
   22/10: one logo line under the cards (crests left, badges right, two small
   grey labels).
   The crest wall uses home-v2.css's own .crests rules, unchanged. The badge row
   reuses .os-accred (above), tagged .os-accred--quiet, with two changes: no
   hairline above it, and a sentence-case label instead of the uppercase one.
   The Launch Campaign page's row is untagged and keeps the original look. */

body.hv2 .os-accred--quiet {
  margin-top: clamp(36px, 4vw, 56px);
  padding-top: 0;
  border-top: 0;
}

body.hv2 .os-accred--quiet .os-accred__label {
  font-size: 15px;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ge-text-secondary, #4A5876);
}

/* --- the ghost on the question tiles: up and to the left (23/10/2026) -------- */

/* Rebecca: "in the faqs move the ghost icon up and over to the left". The FAQ
   tiles are the .band.band--module sections (home, Martyn's Law, Become a
   partner); every other tile keeps the corner position set in the ghost rule
   above. Same size, just placed higher and further in from the right edge, so
   more of it is cropped by the top of the tile and less by the side. */

body.hv2 section.band.band--module > .ghost {
  top: clamp(-275px, -16.8vw, -168px);
  right: clamp(-72px, -2.4vw, -24px);
}

/* red icon for the Alert hero's lockdown tile (23/10/2026) — the design system's
   red pair, alongside product-v3.css's gold and green */

body.hv2 .pv3g__pillico--red {
  background: var(--ge-red-1, #FFF5F3); color: var(--ge-red-4, #D7320F);
  /* product-v3.css animates every tile icon through violet and green, which
     overrides a fixed colour; this one breathes in the reds instead */
  animation-name: pv3g-ico-loop-red;
}

/* --- Martyn's Law page: its questions ghost sits bottom right (23/10/2026) --- */

/* Rebecca: "for the martyns law page the faq ghost icon can go on the bottom
   right". The same size and the same off-the-corner crop as the top-right
   ghosts, mirrored to the tile's bottom edge. Martyn's Law only: Become a partner
   has an #faq too, so the page is picked out by its .ml-toc jump links. The
   home and Become a partner question tiles keep theirs at the top. */

body.hv2:has(.ml-toc) #faq.band.band--module > .ghost {
  top: auto;
  bottom: clamp(-205px, -12vw, -120px);
  right: clamp(-190px, -11.4vw, -108px);
}

/* Command Centre hero photo (23/10/2026): a 4:3 shot in the 1.1:1 hero frame,
   so its sides are cropped. Pushed right of centre to keep the whole iMac
   screen, the subject, and still show the officer looking at it. */

/* 02/11/2026: Rebecca's photo of an officer at the Bryngarth map (square, 1024px); the
   frame keeps the screen in view, which sits in the upper middle of the shot */

body.hv2 .cc-hero__photo { object-position: 60% 35%; }

/* Paxton tile photo (23/10/2026): a 2.25:1 shot in a 4:3 (16:10 on a phone)
   tile, anchored right so the reader, card and hand stay in and the corridor on
   the left is what gets cropped */

body.hv2 .os-pax__photo { object-position: 100% 50%; }

/* --- Command Centre: the overview on an iMac in "What you never see" (23/10/2026) --- */

/* Rebecca's mockup takes the place of the drawing that used to sit under the heading
   (the pupil list going in, numbers coming out). It is a see-through WebP so the
   pale band and the ghost show around the iMac. The three tiles under "What you
   see" keep their drawings. */

/* Rebecca, 23/10/2026: "make the what you never see have a better layout. the image
   doesnt need to be so big". Words on the left, the iMac on the right, in the
   .os-mis__grid split (1.2fr / 1fr) the MIS section uses, so the iMac takes the
   narrower column. Stacked below 900px (onsite-v2.css), the iMac is capped so it
   does not fill a tablet screen. */

body.hv2 .ccx-never .bandhead { margin-bottom: 0; }

body.hv2 .ccx-imac { margin: 0; }

body.hv2 .ccx-imac img { display: block; width: 100%; height: auto; }

@media (max-width: 900px) {
  body.hv2 .ccx-imac { width: 100%; max-width: 480px; }
}

/* Shorter tile (Rebecca, 02/11/2026: "the what you'll never see part is boring - can we
   make the tile not as tall"). The iMac stands on the tile's bottom edge: the frame
   shows the screen, chin and the top of the neck, and the rest of the stand and its
   floor shadow run off the bottom, cropped by the tile (which has overflow: hidden).
   The negative bottom margin takes it through the band's own bottom padding. */

/* lifted slightly (Rebecca, same day: "lift the imac slightly"): the frame shows more of
   the neck, 840 of the image's 994px height, so the iMac stands higher off the edge */

body.hv2 .ccx-imac { align-self: end; aspect-ratio: 1260 / 840; overflow: hidden; margin-bottom: calc(-1 * var(--band-pad, 76px)); }

/* "See the full price list" as a proper button (Rebecca, 02/11/2026): the site's navy
   filled button (.btn--dark, as "Book a demo" in the menu), with the arrow, under the ticks */

body.hv2 .ccp__btn { margin-top: 22px; }

/* --- LAs & MATs page: real Command Centre screens in "What you see" (02/11/2026) --- */

/* The WHOLE Bryngarth demo council stills, scaled to 960x540 WebP
   (assets/images/command-centre/cc-ui-*.webp). ⚠ Never crop or zoom them (Rebecca,
   02/11/2026), so the frame is 16:9 to match. Out of the tiles the same day ("CAN WE
   TAKE THEM ALL OUT OF THE TILES"): the card's colour, shadow, padding and ghost mark
   go, and each screen sits straight on the page at the column's full width with its
   heading and text under it. A soft edge keeps the light screens off the white band. */

body.hv2 .pv3-ben.ccx-plain { background: transparent; box-shadow: none; border-radius: 0; padding: 0; }

/* Then, from Rebecca's reference (a screen on a pale cream mount): "like this but using
   our background colours". Each screen sits whole and centred on its own pale mount,
   one palette tint per screen, with room all round; only the screen casts a shadow. */

body.hv2 .ccx-ui {
  margin: 0 0 20px;
  aspect-ratio: 3 / 2;
  display: grid; place-items: center;
  padding: 0 8%;
  border-radius: 18px;
  background: var(--ccx-mount);
}

body.hv2 .ccx-ui--map      { --ccx-mount: #E8E4F9; }

/* --ge-violet-2 */

body.hv2 .ccx-ui--incident { --ccx-mount: #D9F4FF; }

/* --ge-blue-3 */

body.hv2 .ccx-ui--drills   { --ccx-mount: #E6F3D9; }

/* --ge-green-2 */

body.hv2 .ccx-ui img {
  display: block; width: 100%; height: auto; aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 10px 28px rgba(15, 20, 56, .14), 0 0 0 1px rgba(15, 20, 56, .06);
}

/* The figure is no longer the clipping box: the floating tiles hang over the photo's
   edges as they do in the hero, so the rounding moves onto the photo itself. */

body.hv2 .cc-duty__photo { margin: 0; position: relative; }

body.hv2 .cc-duty__photo img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; object-position: 70% 40%; border-radius: 20px; background: #F3F7FA; }

/* keeps her face and hands in frame when the phone crops to 4:3 */

/* the count reads "37 of 38": only the 37 counts up (product-v3.js counts .pv3g__barval) */

body.hv2 .ccd-of { font-size: 15px; font-weight: 600; color: var(--pp-ink); white-space: nowrap; }

body.hv2 .cc-duty__photo .pv3g__cardbar { width: min(62%, 300px); }

/* stacked (tablet): the tiles sit inside the photo's corners instead of hanging off,
   so they never reach the screen edge; on a phone the photo is too small to carry
   them over her without covering her face, so they step out */

/* the top-left pill hangs off the photo only where the page margin is wide enough to
   take it (about 1300px up); narrower, it would reach the screen edge, so it tucks in */

@media (max-width: 1299px) {
  body.hv2 .cc-duty__photo .pv3g__card--tl { left: 14px; }
}

@media (max-width: 900px) {
  body.hv2 .cc-duty__photo .pv3g__card--tl { top: 14px; left: 14px; }
  body.hv2 .cc-duty__photo .pv3g__card--br { bottom: 14px; right: 14px; }
}

@media (max-width: 700px) {
  body.hv2 .cc-duty__photo .pv3g__card { display: none; }
}

body.hv2 .cc-duty__stack { display: grid; gap: clamp(16px, 1.8vw, 24px); }

/* desktop: the photo fills the height of the two stacked tiles */

@media (min-width: 901px) {
  body.hv2 .cc-duty__photo { height: 100%; }
  body.hv2 .cc-duty__photo img { height: 100%; aspect-ratio: auto; }
}

/* --- LAs & MATs: the "What you see" screens open larger (02/11/2026) ----------- */

/* Rebecca: "could be clickable so they pop out and the user can see a bit more
   detail". Each screen is a link (zoom cursor, a lift on hover, an expand badge so
   touch users can tell); scripts/cc-lightbox.js opens it in the .ccx-lb dialog. */

body.hv2 .ccx-ui__open { position: relative; display: block; width: 100%; border-radius: 8px; cursor: zoom-in; }

body.hv2 .ccx-ui__open img { transition: transform var(--dur-base, 200ms) var(--ease-standard, ease), box-shadow var(--dur-base, 200ms) var(--ease-standard, ease); }

body.hv2 .ccx-ui__open:hover img { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(15, 20, 56, .18), 0 0 0 1px rgba(15, 20, 56, .06); }

body.hv2 .ccx-ui__open:focus-visible { outline: 3px solid var(--pp-ink, #614DBA); outline-offset: 4px; }

body.hv2 .ccx-ui__badge {
  position: absolute; right: 10px; bottom: 10px;
  width: 32px; height: 32px; display: grid; place-items: center;
  border-radius: 999px; background: rgba(15, 20, 56, .78); color: #fff;
  transition: background var(--dur-base, 200ms) var(--ease-standard, ease);
}

body.hv2 .ccx-ui__badge svg { width: 15px; height: 15px; }

body.hv2 .ccx-ui__open:hover .ccx-ui__badge { background: var(--pp-ink, #614DBA); }

body.hv2 .ccx-lb {
  width: min(94vw, 1400px); max-width: none; max-height: 94vh;
  padding: 0; border: 0; border-radius: 16px; overflow: hidden;
  background: #fff; color: var(--ge-navy, #0F1438);
  box-shadow: 0 24px 64px rgba(15, 20, 56, .35);
}

body.hv2 .ccx-lb::backdrop { background: rgba(15, 20, 56, .78); }

body.hv2 .ccx-lb[open] { animation: ccx-lb-in var(--dur-slow, 360ms) var(--ease-standard, ease) both; }

@media (prefers-reduced-motion: reduce) {
  body.hv2 .ccx-lb[open] { animation: none; }
  body.hv2 .ccx-ui__open img { transition: none; }
}

/* A title bar above the screen, so the close button never covers part of it */

body.hv2 .ccx-lb__bar { display: flex; align-items: center; gap: 16px; padding: 10px 10px 10px 22px; border-bottom: 1px solid #E6ECF4; }

body.hv2 .ccx-lb__titles { flex: 1; min-width: 0; }

body.hv2 .ccx-lb__cap { margin: 0; font-size: 17px; font-weight: 600; color: var(--ge-navy, #0F1438); }

body.hv2 .ccx-lb__hint { display: none; margin: 2px 0 0; font-size: 13.5px; color: #4A5876; }

body.hv2 .ccx-lb__scroll img { display: block; width: 100%; height: auto; max-height: calc(94vh - 66px); object-fit: contain; background: #F3F7FA; }

body.hv2 .ccx-lb__close {
  flex: none; width: 44px; height: 44px; display: grid; place-items: center;
  border: 0; border-radius: 999px; background: #F3F7FA; color: var(--ge-navy, #0F1438); cursor: pointer;
}

body.hv2 .ccx-lb__close svg { width: 20px; height: 20px; }

body.hv2 .ccx-lb__close:hover { background: var(--ge-violet-2, #E8E4F9); }

body.hv2 .ccx-lb__close:focus-visible { outline: 3px solid var(--pp-ink, #614DBA); outline-offset: 2px; }

/* On a phone the screen is already full width in its tile, so the larger view shows it
   at about twice that and lets it scroll sideways, with a line saying so. Still the
   whole screen: nothing is cropped, it is wider than the phone. */

@media (max-width: 700px) {
  body.hv2 .ccx-lb__hint { display: block; }
  body.hv2 .ccx-lb__scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
  body.hv2 .ccx-lb__scroll img { width: 860px; max-width: none; max-height: none; }
}

/* the page behind stays put while the larger view is open */

html:has(.ccx-lb[open]) { overflow: hidden; }

/* ============================================================
 * from the landing page's inline <style> (index.html)
 * ============================================================ */

.oshc__stack {
  position: relative;
  height: 100%;
  aspect-ratio: 1.1 / 1;
  border-radius: clamp(18px, 2vw, 28px);
  overflow: hidden;
  box-shadow: 0 40px 90px rgba(0, 16, 20, 0.38);
}

.oshc .oshc__shot {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  aspect-ratio: auto;
  object-fit: cover;
  border-radius: 0;
  box-shadow: none;
  opacity: 0;
  transition: opacity 900ms var(--hv2-ease, ease);
}

.oshc .oshc__shot.is-on { opacity: 1; }

.oshc .oshc__shot:nth-child(2) { object-position: 60% 50%; }

.oshc .oshc__shot:nth-child(3) { object-position: 55% 50%; }

.oshc .oshc__shot:nth-child(4) { object-position: 50% 55%; }

.oshc .oshc__card {
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity 500ms var(--hv2-ease, ease), transform 500ms var(--hv2-ease, ease), visibility 0s linear 500ms;
}

.oshc .oshc__card.is-on {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition: opacity 600ms var(--hv2-ease, ease) 250ms, transform 600ms var(--hv2-ease, ease) 250ms, visibility 0s;
}

.oshc__dots {
  position: absolute;
  left: 22px;
  bottom: 20px;
  z-index: 3;
  display: flex;
  gap: 8px;
  padding: 7px 10px;
  border-radius: 999px;
  background: rgba(15, 20, 56, 0.45);
}

.oshc__dot {
  width: 9px; height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: width 300ms var(--hv2-ease, ease), background 300ms;
}

.oshc__dot.is-on { width: 24px; background: #fff; }

.oshc__dot:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  .oshc .oshc__shot, .oshc .oshc__card, .oshc__dot { transition: none; }
}

/* PRICE TILE, right half (23/10/2026: "it looks tagged onto the main prices
   to the left"). The violet panel had its content bunched at the top and a
   large empty bottom, so it read as a separate card pinned on. Scoped to
   .osp--home so the Alert and Command Centre tiles, which share .osp, are
   untouched. The panel now centres its content against the price, the two
   groups are split by a hairline, and each add-on shows its price on its
   own line so the rows line up. */

body.hv2 .osp--home { align-items: stretch; }

body.hv2 .osp--home .osp__side {
  justify-content: center;
  gap: 0;
  padding: clamp(26px, 3vw, 44px);
  background: linear-gradient(160deg, var(--ge-violet-1, #F6F4FF) 0%, var(--pp-2, #E8E4F9) 100%);
  box-shadow: inset 0 0 0 1px rgba(97, 77, 186, .10);
}

body.hv2 .osp--home .osp__label {
  margin: 0 0 14px;
  font-size: 13px; letter-spacing: .06em; text-transform: uppercase;
}

body.hv2 .osp--home .osp__ticks { gap: 14px; margin: 0; }

body.hv2 .osp--home .osp__ticks li { font-size: 17px; }

body.hv2 .osp--home .osp__ticks li + li { padding-top: 14px; border-top: 1px solid rgba(97, 77, 186, .14); }

body.hv2 .osp--home .osp__adds-wrap {
  margin-top: clamp(22px, 2.4vw, 32px);
  padding-top: clamp(20px, 2.2vw, 28px);
  border-top: 1px solid rgba(97, 77, 186, .22);
}

body.hv2 .osp--home .osp__adds { gap: 10px; }

body.hv2 .osp--home .osp__adds div {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 16px;
  padding: 14px 18px; border-radius: 14px;
  box-shadow: 0 2px 8px rgba(15, 20, 56, .05);
}

body.hv2 .osp--home .osp__adds dt a { font-size: 16px; }

body.hv2 .osp--home .osp__adds dd { text-align: right; font-size: 14px; line-height: 1.4; }

body.hv2 .osp--home .osp__adds dd b { display: block; font-size: 16px; font-weight: 600; color: var(--ge-navy, #0F1438); }

@media (max-width: 560px) {
  body.hv2 .osp--home .osp__adds div { grid-template-columns: minmax(0, 1fr); }
  body.hv2 .osp--home .osp__adds dd { text-align: left; }
}

/* QUESTIONS AS CARDS (23/10/2026: "this text looks a bit bunched, can we use
   the space better?"). The answers were capped at 46ch inside each column, so
   they ran as narrow blocks with wide gutters, and the fifth question sat alone
   under the first. Now each question is a white card filling its column, the
   46ch cap comes off, and an odd last card spans both columns.
   Scoped to .qa--cards: one.html and classroom.html keep the open list. */

body.hv2 .qa--cards .qa__item {
  padding: clamp(22px, 2.4vw, 32px);
  border-radius: 20px; background: #fff;
  box-shadow: 0 2px 10px rgba(15, 20, 56, .05);
}

body.hv2 .qa--cards .qa__item + .qa__item { border-top: 0; padding-top: clamp(22px, 2.4vw, 32px); margin-top: 16px; }

body.hv2 .qa--cards .qa__item h3 { font-size: 20px; max-width: none; }

body.hv2 .qa--cards .qa__item p { max-width: 62ch; font-size: 16px; line-height: 1.6; }

@media (min-width: 860px) {
  body.pp .qa.qa--cards { column-gap: 20px; row-gap: 20px; align-items: stretch; }
  body.pp .qa.qa--cards .qa__item,
    body.pp .qa.qa--cards .qa__item + .qa__item,
    body.pp .qa.qa--cards .qa__item:nth-child(n + 3) { margin-top: 0; padding-top: clamp(22px, 2.4vw, 32px); border-top: 0; }
  body.pp .qa.qa--cards .qa__item p { max-width: none; }
  body.pp .qa.qa--cards .qa__item h3 { max-width: none; }
  body.pp .qa.qa--cards .qa__item:last-child:nth-child(odd) { grid-column: 1 / -1; }
  body.pp .qa.qa--cards .qa__item:last-child:nth-child(odd) p { max-width: 90ch; }
}

/* MIS TICK LIST (26/10/2026: "the check marks are enormous and look silly").
   The three proof facts moved into the MIS section as a .psl__points list, but
   every .psl__tick rule in onsite-v2.css is scoped to .os-way__copy (the Four
   ways panels), so here the SVGs fell back to the browser's default size.
   Same rules, scoped to .os-mis: navy disc, white 12px glyph, the site standard. */

.os-mis .psl__points { margin: 18px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; }

.os-mis .psl__points li { position: relative; padding-left: 34px; font-size: 16px; line-height: 1.5; color: #2A3352; }

.os-mis .psl__tick {
  position: absolute;
  left: 0; top: 2px;
  width: 22px; height: 22px;
  border-radius: 999px;
  display: grid; place-items: center;
  background: var(--ge-navy, #0F1438);
  color: #fff;
}

.os-mis .psl__tick svg { width: 12px; height: 12px; }

/* The optional extra (26/10/2026): a small pill under the icon so nobody reads
   OnSite Alert as part of the flat price. Uppercase at 12px is the eyebrow
   convention. Solid navy with white text, the site's highlight-pill colour
   (Andrew, 26/10/2026: the pale violet tint did not stand out enough); amber
   or red would read as a warning, which it is not. */

#why-switch .pv3-ben--optional { position: relative; }

/* Floats in the tile's top-right corner, level with the icon disc, so the heading
   stays on the same line as the other three tiles' headings (Andrew, 26/10/2026:
   "it forces the heading down"). */

#why-switch .pv3-ben__pill { position: absolute; top: clamp(22px, 2.2vw, 30px); right: clamp(22px, 2.2vw, 30px); margin: 0; padding: 5px 11px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; background: var(--ge-navy, #0F1438); color: #fff; }

/* COMMAND CENTRE MAP (26/10/2026). The sign-in animation in the band's photo
   slot: the block inherits .pcband__photo's position and size, draws the
   country on a navy night ground, and carries the story cards. Styles are a
   port of auth-map.component.scss, renamed ccm-*, scoped to .os-cc__map. */

.os-cc__map { overflow: hidden; background: radial-gradient(120% 90% at 70% 40%, #1a2060 0%, #0F1438 55%, #090c26 100%); --feed-green: #2ed3a0; --feed-amber: #ffa028; --feed-red: #ff6b6b; --feed-blue: #5aa9ff; --feed-lilac: #c9bff5; }

.os-cc__map .ccm__canvas { display: block; width: 100%; height: 100%; }

.os-cc__map .ccm__card { display: flex; align-items: center; gap: 10px; box-sizing: border-box; min-height: 60px; padding: 10px 14px; border-radius: 16px; background: rgba(15, 20, 56, 0.72); border: 1px solid rgba(255, 255, 255, 0.14); backdrop-filter: blur(8px); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35); font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif; color: #fff; }

.os-cc__map .ccm__card[data-kind='raised'] { border-color: rgba(255, 160, 40, 0.55); background: rgba(70, 36, 10, 0.78); }

.os-cc__map .ccm__card[data-kind='help'] { border-color: rgba(255, 107, 107, 0.6); background: rgba(80, 22, 22, 0.78); }

.os-cc__map .ccm__card[data-kind='police'] { border-color: rgba(90, 169, 255, 0.55); background: rgba(14, 40, 84, 0.78); }

.os-cc__map .ccm__card[data-kind='log'] { border-color: rgba(201, 191, 245, 0.5); background: rgba(40, 32, 90, 0.78); }

.os-cc__map .ccm__card[data-kind='secure'], .os-cc__map .ccm__card[data-kind='stooddown'] { border-color: rgba(46, 211, 160, 0.45); background: rgba(10, 60, 46, 0.78); }

.os-cc__map .ccm__area { position: absolute; z-index: 2; right: 18px; top: 18px; animation: ccm-in 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both; transition: opacity 1s ease, background 0.6s ease, border-color 0.6s ease; }

.os-cc__map .ccm__feed { position: absolute; inset: 0; z-index: 2; pointer-events: none; transition: opacity 1s ease; }

.os-cc__map .ccm__area.is-leaving, .os-cc__map .ccm__feed.is-leaving { opacity: 0; }

.os-cc__map .ccm__pop { position: absolute; left: 0; top: 0; width: 224px; transform: translate(var(--x), var(--y)); animation: ccm-pop 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

.os-cc__map .ccm__dot { flex: none; width: 10px; height: 10px; border-radius: 999px; background: var(--feed-green); box-shadow: 0 0 0 4px rgba(46, 211, 160, 0.2); }

.os-cc__map [data-kind='raised'] .ccm__dot { background: var(--feed-amber); box-shadow: 0 0 0 4px rgba(255, 160, 40, 0.3); animation: ccm-pulse 1.1s ease-in-out infinite; }

.os-cc__map [data-kind='rooms'] .ccm__dot, .os-cc__map [data-kind='log'] .ccm__dot { background: var(--feed-lilac); box-shadow: 0 0 0 4px rgba(201, 191, 245, 0.22); }

.os-cc__map [data-kind='help'] .ccm__dot { background: var(--feed-red); box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.3); animation: ccm-pulse 0.9s ease-in-out infinite; }

.os-cc__map [data-kind='police'] .ccm__dot { background: var(--feed-blue); box-shadow: 0 0 0 4px rgba(90, 169, 255, 0.3); }

.os-cc__map .ccm__text { display: flex; flex-direction: column; min-width: 0; }

.os-cc__map .ccm__text b { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.os-cc__map .ccm__text > span { font-size: 12.5px; line-height: 1.3; color: #c9bff5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.os-cc__map [data-kind='raised'] .ccm__text > span, .os-cc__map [data-kind='help'] .ccm__text > span { color: #ffd9a8; }

.os-cc__map [data-kind='police'] .ccm__text > span { color: #bcdcff; }

.os-cc__map .ccm__pause { position: absolute; z-index: 3; left: 16px; bottom: 16px; width: 40px; height: 40px; padding: 0; border-radius: 999px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(15, 20, 56, 0.55); color: #c9bff5; display: grid; place-items: center; cursor: pointer; backdrop-filter: blur(8px); }

.os-cc__map .ccm__pause:hover { color: #fff; }

.os-cc__map .ccm__pause:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(201, 191, 245, 0.6); }

.os-cc__map .ccm__pause svg { width: 18px; height: 18px; }

/* Flipped band (26/10/2026): the card is on the right, so the label and the
   pause button move to the map's outer corners on the left and right. */

.pcband--flip .os-cc__map .ccm__area { right: auto; left: 18px; }

.pcband--flip .os-cc__map .ccm__pause { left: auto; right: 16px; }

@media (max-width: 899px) {
  .pcband--flip .os-cc__map .ccm__area { left: auto; right: 12px; top: 10px; }
  .pcband--flip .os-cc__map .ccm__pause { right: auto; left: 12px; bottom: 12px; }
}

.os-cc__map .ccm__pause .ccm__play-ico, .os-cc__map .ccm__pause.is-paused .ccm__pause-ico { display: none; }

.os-cc__map .ccm__pause.is-paused .ccm__play-ico { display: block; }

@media (prefers-reduced-motion: reduce) {
  .os-cc__map .ccm__card, .os-cc__map .ccm__pop, .os-cc__map .ccm__area, .os-cc__map .ccm__dot { animation: none; }
}

/* ============================================================
 * from command-centre.html's inline <style>
 * ============================================================ */

@media (min-width: 1301px) {
  body.hv2 .cc-hero .pv3g__copy--wide { max-width: none; flex: 1 1 0; min-width: 0; padding-right: clamp(32px, 4vw, 72px); }
  body.hv2 .cc-hero .pv3g__photowrap { flex: none; }
  body.hv2 .cc-hero h1 { max-width: 16ch; text-wrap: balance; }
  body.hv2 .cc-hero .pv3g__lede { max-width: 58ch; }
}

@media (max-width: 1300px) {
  body.hv2 .cc-hero .pv3g__lede { max-width: 64ch; }
}

/* Command Centre calculator visual (23/10/2026). Scoped to .ccc on this
   page; the shared .ccc rules in onsite-landing.css are untouched. */

body.hv2 .ccc { gap: 16px; background: linear-gradient(160deg, var(--ge-violet-1, #F6F4FF) 0%, var(--pp-2, #E8E4F9) 100%); box-shadow: inset 0 0 0 1px rgba(97, 77, 186, .10); }

body.hv2 .ccv { position: relative; padding: 16px; border-radius: 16px; background: #fff; box-shadow: 0 2px 10px rgba(15, 20, 56, .05); }

body.hv2 .ccv__grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 8px 6px; }

body.hv2 .ccv__pin { display: grid; place-items: center; aspect-ratio: 1; }

body.hv2 .ccv__pin svg { width: 100%; max-width: 26px; height: auto; fill: #E6E2F5; stroke: none; transition: fill 220ms ease, transform 220ms ease; }

body.hv2 .ccv__pin svg circle { fill: #fff; }

body.hv2 .ccv__pin.is-on svg { fill: var(--pp-ink, #614DBA); transform: translateY(-1px); }

body.hv2 .ccv__more {
  position: absolute; right: 12px; bottom: -12px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--ge-navy, #0F1438); color: #fff;
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums;
}

body.hv2 .ccv__more[hidden] { display: none; }

body.hv2 .ccc__sum { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; margin-top: 4px; }

body.hv2 .ccc__sum .ccc__total { margin: 0; }

body.hv2 .ccc__calc { margin: 0; font-size: 15px; font-weight: 500; color: #4A5876; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  body.hv2 .ccv__pin svg { transition: none; }
}

body.hv2 .ccp__main { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; }

body.hv2 .cc-hero .cc-h1for {
  display: block; margin-bottom: .3em;
  font-size: .5em; line-height: 1.2; letter-spacing: 0;
  color: var(--ge-violet-2, #E8E4F9);
}


/* ============================================================
 * THE FOUR-WAYS PANELS - full-bleed photo instead of a phone mock
 *
 * Added 6 Nov 2026. The first build shipped without these and the
 * panels rendered as plain violet blocks (Rebecca spotted it on the
 * Staff tab). .os-way__media--photo is an opt-in modifier, so the
 * phone-framed version is untouched wherever it is still used.
 * ============================================================ */

/* --- "Four ways your school will use OnSite": real photos, not screenshots --- */

/* Rebecca, 09/10/2026: "I want to refresh the photos used in the Four ways your
   school will use OnSite. I want to use real photos".
   The tile was built on 05/08/2026 as One's "Everything in One" treatment — a
   violet panel with a handset running off the bottom edge — and the four school
   photos that used to sit here came off as a consequence. This puts photography
   back, and keeps everything else about the tile: the violet panel, its radius,
   its 5:4 ratio and the sitewide chunky white frame around whatever it holds.
   Two of the four photos have OnSite on screen in them (the reception kiosk, the
   roll-call phone), so the product is still shown, in context rather than
   floating.
   ⚠ OPT-IN BY MODIFIER. Everything hangs off .os-way__media--photo, so the
   handset treatment is untouched and still available: delete the modifier and
   the --phone frame class comes back exactly as it was. */

.os-mods .os-way__media--photo {
  /* the handset deliberately overflowed the bottom, so the tile had
     padding-bottom:0. Nothing overflows now, so the padding is even. */
  align-items: stretch;
  padding: clamp(16px, 1.7vw, 28px);
}

.os-mods .os-way__media--photo .pv3-acc__frames {
  /* fill the tile rather than imposing a second ratio inside the 5:4 one —
     the four photos are 4:3 and 16:9, and cover crops them to the tile. */
  aspect-ratio: auto;
  flex: 1 1 auto;
  min-width: 0;
  border-radius: clamp(14px, 1.4vw, 20px);
}

.os-mods .os-way__media--photo .pv3-acc__shot {
  /* reset two phone-only rules: the screen's deep corner radius, and the
     top-anchored crop that kept a screenshot's status bar in view. */
  border-radius: 0;
  object-position: 50% 50%;
}

/* per-photo framing — each one has its subject somewhere different, and a
   centred crop loses it. Matched to the tab order: reception, staff,
   evacuation, lockdown. */

.os-mods .os-way__media--photo:nth-child(1) .pv3-acc__shot { object-position: 60% 50%; }

.os-mods .os-way__media--photo:nth-child(2) .pv3-acc__shot { object-position: 55% 50%; }

.os-mods .os-way__media--photo:nth-child(3) .pv3-acc__shot { object-position: 50% 55%; }

.os-mods .os-way__media--photo:nth-child(4) .pv3-acc__shot { object-position: 60% 50%; }

@media (min-width: 861px) {
  body.hv2 .os-mods .os-way__media--photo { aspect-ratio: auto; height: clamp(280px, 44svh, 420px); }
}

/* no white frame on the "Four ways" photos (Rebecca, 23/10/2026: "can we get rid
   of the white frame and just have the purple"). The frame is the sitewide
   photo frame from product-v3.css (.pv3-acc__frames, --photo-frame); here only,
   the photo now sits straight on the purple tile, inside the tile's own padding. */

body.hv2 .os-mods .os-way__media--photo .pv3-acc__frames {
  border: 0;
  background: transparent;
}


/* ============================================================
 * THE "WHY SCHOOLS SWITCH" LINKS — pinned to the bottom of their tile
 *
 * Rebecca, 6 Nov: "can we tidy up the buttons". The four links sat at
 * four different heights because .os-way__more carries a fixed
 * margin-top (onsite-v2.css:435) and each tile's paragraph is a
 * different length, so each link landed wherever its own copy stopped.
 * That rule was written for a link sitting INLINE in a row of copy,
 * which is where it still does the right thing — so this does not
 * touch it, it overrides it here only.
 *
 * ⚠ SCOPED TO #why-switch ON PURPOSE. .pv3-ben is used by ten tiles on
 * this page and by One, Classroom, Parent app, Parents, Alert and
 * Command Centre; only these four carry a link, and only they should
 * become flex columns.
 * ============================================================ */

#why-switch .pv3-ben { display: flex; flex-direction: column; }

/* the gap the link's old margin-top used to provide, moved onto the
   paragraph so `margin-top: auto` below is free to do the pushing */
#why-switch .pv3-ben p { margin-bottom: 22px; }

/* auto pushes it to the bottom of the tile, so all four sit on one line.
   align-self because .os-way__more is inline-flex: as a flex CHILD it
   would otherwise stretch the full width of the tile and the arrow would
   drift away from the words. */
#why-switch .pv3-ben .os-way__more { margin-top: auto; align-self: flex-start; }


/* ============================================================
 * NO HIGHLIGHT PILL IN A HERO ON THESE PAGES
 *
 * There was a rule here that made a wrapping hero pill break into
 * one neat pill per line. It is gone because the pill itself is gone:
 * Rebecca, 6 Nov, on the Alert hero - "there shouldnt be a pill
 * highlight in the hero". The headline now uses .dim, which is what
 * One, OnSite, Classroom and the Parent app hero all use.
 *
 * ⚠ If a .mark ever goes back into a hero here it will paint as a
 * single stepped box across two lines, because modular.css's hero
 * override (~line 1014) sets the colours and drops the padding,
 * radius and box-decoration-break that onsite-v2.css:60-68 and
 * product-page.css:120-127 both carry. That is a gap at source, not
 * something to patch here again.
 * ============================================================ */


/* ============================================================
 * ONE SPACING BETWEEN SECTIONS
 *
 * Rebecca, 6 Nov: "theres a big gap here too - can we make all section
 * gaps the same". She asked the same thing of the OnSite landing page on
 * 23/10/2026, and these two rules are that answer, brought across whole
 * from onsite-landing.css 2707-2734 rather than reinvented. The three
 * numbers they depend on - the card's straddle in contact-band.css, the
 * footer's top padding in home-v2.css, and --band-pad / --band-seam -
 * are identical in both projects, checked before porting.
 *
 * The baseline, measured at 1440: every section carries the same
 * --band-pad (76px) and tiles sit one --band-seam (24px) from their
 * neighbours, so tile-to-section is 100px and section-to-section ~176px.
 *
 * 1. modular.css hands .pp-final and .final2 the footer card's
 *    280-380px bottom reserve BY NAME, on the assumption they close the
 *    page. Here the questions follow the price, so that reserve showed
 *    as ~340px of empty white between them. It now applies only when
 *    the section really is the last one.
 * ============================================================ */

body.hv2 main > section.pp-final:not(:last-child),
body.hv2 main > section.final2:not(:last-child) {
  padding-bottom: var(--band-pad);
}

/* 2. A page that ENDS on a tile had that same reserve as padding INSIDE
      the tile, so a few hundred pixels of empty grey sat under the last
      answer and the contact card landed on top of it. The tile keeps its
      normal padding and the reserve moves OUTSIDE it as white space,
      sized so the card's top lands one --band-seam below the tile: the
      card rises clamp(190px, 21vw, 290px), less the footer's
      clamp(48px, 6vw, 80px) of top padding, plus the 24px seam.

      ⚠ This supersedes an earlier fix of mine that stopped the card
      straddling at all and sat it below the tile. That removed the gap
      but also removed the straddle, which is the site's signature at
      every other footer. This keeps both. */

body.hv2:has(.cb--footer) main > section:last-child.band--module,
body.hv2:has(.cb--footer) main > section:last-child.band--photo,
body.hv2:has(.cb--footer) main > section:last-child.band--blue,
body.hv2:has(.cb--footer) main > section:last-child.band--mlviolet {
  padding-bottom: var(--band-pad);
  margin-bottom: calc(clamp(190px, 21vw, 290px) - clamp(48px, 6vw, 80px) + var(--band-seam, 24px));
}


/* ============================================================
 * MARTYN'S LAW IN THE PAXTON SHAPE (6 Nov 2026)
 *
 * Two bits of tuning the shared .os-pax rules do not cover, because
 * Paxton's photo is a 2.25:1 crop and this one is a 4:3 portrait-ish
 * frame carrying more copy beside it.
 * ============================================================ */

/* The photo fills its column instead of sitting centred in it. .os-pax__media
   img is aspect-ratio: 4/3, which on Paxton's short copy is right; here the
   copy is ~620px and the photo would float with ~85px of white above and
   below it. Stretching it makes the two columns finish level. */
#martyns-law .os-pax__media { align-self: stretch; }
#martyns-law .os-pax__media img { aspect-ratio: auto; height: 100%; min-height: 320px; }

/* the button carries the gap the pcband card used to give it */
#martyns-law .os-pax__cta { margin-top: clamp(20px, 2.2vw, 28px); }

/* ...and it mirrors Paxton rather than repeating it. The two sit directly
   above one another and the design rules call for alternating feature rows,
   so Paxton is photo-left and this one is photo-right. Order, not direction,
   so the reading order in the markup (photo, then copy) is untouched.
   ⚠ NOT ON THE WELSH PAGE. There the section above is the four-ways tabs,
   whose media is already on the right, so a photo-right Martyn's Law would
   repeat it rather than alternate. cy/onsite.html has no Paxton band.
   ⚠ 901px, to dovetail exactly with the base rule's max-width: 900px, which
   stacks every .os-pax to one column. At 861px these two overlapped between
   861 and 900 and this one won on source order, forcing two columns into a
   width the base had already decided was too narrow for them. */
@media (min-width: 901px) {
  html:not(:lang(cy)) #martyns-law .os-pax__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); }
  html:not(:lang(cy)) #martyns-law .os-pax__media { order: 2; }
  html:not(:lang(cy)) #martyns-law .os-pax__copy  { order: 1; }
}