/* Fonts embedded so this review build renders identically offline. */




/* Boardmet — review build only. Styles the service pages need for the offer band
   and the on-page enquiry form. Not part of the live stylesheet. */

/* ---------- the offer ----------
   A firm with no client list cannot show testimonials. It can remove the buyer's
   risk instead, and say so where nobody can miss it. */
.offer{background:#E7CFBB;background:oklch(0.868 0.038 62);color:var(--ink);border-bottom:0}
.offer-in{display:flex;align-items:center;justify-content:space-between;gap:36px;
 flex-wrap:wrap;padding:30px 0 28px}
.offer .kicker{color:rgba(17,19,17,.72);margin-bottom:10px}
.offer-line{margin:0;font-size:15px;line-height:1.55;max-width:70ch;color:rgba(17,19,17,.78)}
.offer-line strong{color:var(--ink);font-weight:700;display:block;
 font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:26px;
 letter-spacing:.01em;text-transform:uppercase;line-height:1;margin-bottom:7px}
.offer-link{display:inline-flex;align-items:center;gap:9px;white-space:nowrap;
 font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
 text-decoration:none;color:var(--ink);padding-bottom:3px;
 border-bottom:1px solid rgba(17,19,17,.5)}
.offer-link span{transition:transform .25s ease}
.offer-link:hover{border-bottom-color:var(--ink)}
.offer-link:hover span{transform:translateX(4px)}
@media(max-width:760px){.offer-in{padding:24px 0 22px;gap:18px}.offer-line strong{font-size:22px}}

/* label — detail coverage lines read faster than a middot run-on */
.sched-cover li{display:block;margin-bottom:6px}
.sched-cover li:last-child{margin-bottom:0}
.sched-cover li:after{content:none}
.sched-cover li b{color:var(--ink);font-weight:700}


/* ---------- enquiry, on the page ---------- */
.enq-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:64px;align-items:start;
 padding-top:38px}
.enq-ask h2{font-size:clamp(46px,5.6vw,80px);line-height:.92;margin:0}
.enq-ask > p{font-size:15px;line-height:1.65;max-width:44ch;margin:24px 0 0}
.enq-term{font-size:13px;line-height:1.6;margin:22px 0 0;padding-top:18px;
 border-top:1px solid rgba(17,17,15,.22);max-width:46ch;opacity:.82}
.enq-term strong{opacity:1;font-weight:700}
.enq-direct{display:flex;gap:26px;flex-wrap:wrap;margin:24px 0 0;font-size:13px;font-weight:700}
.enq-direct a{text-decoration:none;border-bottom:1px solid rgba(17,17,15,.4);padding-bottom:2px}
.enq-form{background:var(--paper2);border:1px solid rgba(17,17,15,.16);padding:30px}
.enq-form .field label{font-size:9.5px}
@media(max-width:960px){.enq-grid{grid-template-columns:1fr;gap:34px;padding-top:28px}
 .enq-form{padding:24px 20px}}
.field-hint{font-size:10px;line-height:1.45;color:var(--muted)}
.bm-consent{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:640px;margin:0 auto;
 background:var(--paper2);border:1px solid var(--line);box-shadow:0 18px 50px rgba(0,0,0,.18);
 padding:18px 20px;display:grid;gap:14px}
.bm-consent p{margin:0;font-size:12.5px;line-height:1.6;color:var(--muted)}
.bm-consent a{text-decoration:underline}
.bm-consent-actions{display:flex;gap:10px;flex-wrap:wrap}
.bm-consent button{border:1px solid var(--ink);background:transparent;padding:9px 16px;font-size:11px;
 font-weight:800;letter-spacing:.08em;text-transform:uppercase}
.bm-consent .bm-accept{background:var(--ink);color:var(--paper)}
@media(max-width:620px){.bm-consent{left:10px;right:10px;bottom:10px}}



/* form controls */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:24px}
.form-grid{grid-template-columns:1fr}
.field{display:grid;gap:6px}
.field label{font-size:10px;text-transform:uppercase;letter-spacing:.1em;font-weight:800}
.field label{font-size:9.5px}
.field input,.field select,.field textarea{border:1px solid var(--line);background:white;padding:12px 13px}
.field textarea{border:1px solid var(--line);background:white;padding:12px 13px}
.field textarea{min-height:110px;resize:vertical}
.field-hint{font-size:10px;line-height:1.45;color:var(--muted)}
.form-status{display:none;margin-top:16px;padding:13px 14px;border:1px solid var(--line);font-size:12px;line-height:1.5}
.form-status.is-visible{display:block}
.form-status.success{background:var(--mint2)}
.form-status.error{background:#f5e2df}

/* compact credentials strip for the landing pages */
.lp-cred{background:var(--paper2);color:var(--ink);padding:34px 0;
 border-bottom:1px solid rgba(17,17,15,.16)}
.lp-cred-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.lp-cred-grid > div{padding:0 26px;border-right:1px solid rgba(17,17,15,.16)}
.lp-cred-grid > div:first-child{padding-left:0}
.lp-cred-grid > div:last-child{border-right:0;padding-right:0}
.lp-cred b{display:block;font-size:13px;margin-bottom:6px}
.lp-cred p{font-size:11.5px;line-height:1.5;color:#4A463F;margin:0}
.lp-cred a{color:inherit}
@media(max-width:860px){.lp-cred-grid{grid-template-columns:1fr 1fr;gap:22px}
 .lp-cred-grid > div{border-right:0;padding:0}}

/* ═══════════════════════════════════════════════════════════════════════
   DESIGN SYSTEM — bringing the interior pages into the homepage language.
   One device throughout: numbered items, hairline divisions, a marginal
   note. The register, not the card grid.
   ═══════════════════════════════════════════════════════════════════════ */

/* "What is included" — was a 2-column bordered grid, now a schedule */
.inc{display:block;border-top:1px solid var(--ink);border-bottom:0}
.inc > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:0 36px;
 padding:22px 0 20px;border-bottom:1px solid var(--line);border-right:0;
 position:relative;transition:background .28s ease}
.inc > div:nth-child(odd),.inc > div:nth-child(even){padding-left:0;padding-right:0;border-right:0}
/* .n, h3 and p are three siblings in a two-column grid, so auto-placement drops
   the paragraph back into the numeral column. Place them explicitly. */
.inc .n{grid-column:1;grid-row:1 / span 2;
 font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
 font-size:40px;line-height:.8;color:var(--yellow);opacity:1;font-variant-numeric:tabular-nums;
 transition:none}
.inc h3{grid-column:2;grid-row:1}
.inc p{grid-column:2;grid-row:2}
.inc h3{font-size:16px;font-weight:700;margin:0 0 5px;line-height:1.3;
 font-family:"Inter Tight",Arial,sans-serif;text-transform:none;letter-spacing:0}
.inc p{font-size:13.5px;line-height:1.6;color:var(--muted);margin:0;max-width:56ch}
@media(max-width:760px){
 .inc > div{grid-template-columns:54px minmax(0,1fr);gap:0 18px;padding:18px 0 16px}
 .inc .n{font-size:30px}
}

/* Related services — ruled rows, not floating cards */
.related{display:block;border-top:1px solid var(--ink);margin-top:26px}
.related a{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:baseline;
 padding:22px 0 20px;border:0;border-bottom:1px solid var(--line);background:transparent;
 position:relative;transition:padding-left .28s ease}
.related a:hover{background:transparent;padding-left:12px}
.related .n{font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint);
 display:block;margin-bottom:8px}
.related h3{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
 text-transform:uppercase;font-size:34px;line-height:.95;margin:0 0 8px}
.related p{font-size:13px;line-height:1.55;color:var(--muted);margin:0;max-width:52ch}
.related a:after{content:"\2192";font-size:17px;align-self:center;opacity:.42;
 transition:transform .28s ease,opacity .28s ease}
.related a:hover:after{opacity:1;transform:translateX(4px)}
@media(max-width:640px){.related h3{font-size:27px}}


/* Visible focus, everywhere — a governance audience uses the keyboard. */
a:focus-visible,button:focus-visible,input:focus-visible,
select:focus-visible,textarea:focus-visible,summary:focus-visible{
 outline:2px solid var(--ink);outline-offset:3px;border-radius:1px}

@media(prefers-reduced-motion:reduce){
 .inc > div,.related a,.related a:after,.inc .n{transition:none}
 .related a:hover{padding-left:0}
}

/* ── audit fixes (matches index.html) ── */
.field label{font-size:11px!important}
.brand small{font-size:8.5px!important}
.field-hint{font-size:11px!important}
@media (pointer: coarse){
  .svc-card-link,.footer-col a,.contact a,a.enquire{
    padding-top:13px;padding-bottom:13px;
  }
  /* Underlined links get their hit area from a pseudo-element instead: padding
     would drag the rule 13px clear of the baseline and leave it floating. */
  .offer-link,.enq-direct a{position:relative}
  .offer-link::after,.enq-direct a::after{content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .footer-col{gap:0}
  .enq-direct{gap:18px 26px}
}

.bm-mark{display:block;flex:none}
.brand.has-mark{display:flex;align-items:center;gap:11px}
.brand.has-mark .brand-txt{display:block}
@media(max-width:560px){.brand.has-mark{gap:9px}.brand.has-mark .bm-mark{width:26px;height:26px}}


/* ══════════════════════════════════════════════════════════════════
   DETAIL-PAGE CHROME recovered from the retired stylesheet.
   The review sub-pages never carried these rules: they linked out to
   the old production boardmet-page.css by absolute URL for .phero,
   .crumb, .rule, .btns and .prose. That link is gone, so the rules
   move here where they belong.
   ══════════════════════════════════════════════════════════════════ */


/* breadcrumb */
.crumb{font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
 padding:22px 0 0}

.crumb a{text-decoration:none}

.crumb a:hover{text-decoration:underline}


/* hero */
/* Was padding:34px 0 62px with a 104px h1: homepage-hero scale on a page whose
   substance is the sheet below it. The article pages already run their title at
   64px and read better for it, so this follows that precedent. Still the first
   thing on the page, no longer shouting over the facts. */
.phero{padding:32px 0 44px;border-bottom:1px solid var(--line)}

.phero h1{font-size:clamp(38px,4.6vw,64px);line-height:.94;margin:14px 0 0}

.phero .lead{font-size:17px;line-height:1.62;max-width:660px;margin:20px 0 0}

.phero .lead strong{font-weight:700}

.rule{width:74px;height:5px;background:var(--yellow);margin:26px 0 0}


/* buttons */
.btns{display:flex;gap:12px;flex-wrap:wrap;margin:32px 0 0}

.prose{max-width:720px}

.prose p{font-size:15.5px;line-height:1.72;color:#2b2a27;margin:0 0 18px}

.prose ul{margin:0 0 20px;padding-left:20px}

.prose li{font-size:15px;line-height:1.7;color:#2b2a27;margin:0 0 9px}

.prose strong{font-weight:700;color:var(--ink)}



/* ── privacy page extras, merged so every sub-page loads the same two sheets ── */
/* Fonts embedded so this review build renders identically offline. */





.todo{background:#f7e6c8;border-left:4px solid var(--yellow);padding:14px 18px;margin:0 0 22px;
 font-size:13.5px;line-height:1.6}
.todo strong{display:block;font-size:10px;letter-spacing:.12em;text-transform:uppercase;margin-bottom:5px}
.prose h3{margin-top:30px}

/* ── audit fixes (matches index.html) ── */
.field label{font-size:11px!important}
.brand small{font-size:8.5px!important}
.field-hint{font-size:11px!important}
@media (pointer: coarse){
  .svc-card-link,.footer-col a,.contact a,a.enquire{
    padding-top:13px;padding-bottom:13px;
  }
  /* Underlined links get their hit area from a pseudo-element instead: padding
     would drag the rule 13px clear of the baseline and leave it floating. */
  .offer-link,.enq-direct a{position:relative}
  .offer-link::after,.enq-direct a::after{content:"";position:absolute;
    left:0;right:0;top:50%;transform:translateY(-50%);height:44px}
  .footer-col{gap:0}
  .enq-direct{gap:18px 26px}
}

.bm-mark{display:block;flex:none}
.brand.has-mark{display:flex;align-items:center;gap:11px}
.brand.has-mark .brand-txt{display:block}
@media(max-width:560px){.brand.has-mark{gap:9px}.brand.has-mark .bm-mark{width:26px;height:26px}}


/* ══════════════════════════════════════════════════════════════════
   The step numerals were set in brand yellow #E9AA2B on paper: 1.79:1,
   against the 3:1 that 40px/900 text needs. They carry sequence, so
   they are content, not decoration. #A07100 is the ochre already used
   for the fourth brand mark, so the fix reuses the palette rather than
   inventing a value. Measured 3.78:1.
   ══════════════════════════════════════════════════════════════════ */
.inc .n{color:#A07100}

/* Turnstile sits above the submit button when a site key is configured. */
.turnstile-slot{margin:0 0 18px;min-height:0}
.turnstile-slot:empty{display:none}


/* ═══ service page: what you get ═══
   Eight deliverables, one line each, two columns. This replaces a numbered card
   grid plus a before/during/after narrative that between them said the same
   thing three times over 2.1 screens. */
.gets{margin:24px 0 0;padding:0;list-style:none;display:grid;
  grid-template-columns:1fr 1fr;gap:0 46px}
.gets li{padding:13px 0;border-top:1px solid var(--line);
  font-size:15.5px;line-height:1.52;color:#3a3833}
.gets li:before{content:none}
.gets b{color:var(--ink);font-weight:800}
@media(max-width:720px){.gets{grid-template-columns:1fr;gap:0}}

/* Scope, set as one dense paragraph rather than a bulleted list. A list of
   meeting types a headteacher already knows the names of does not need
   whitespace around every item. */
.scope{margin:16px 0 0;font-size:15.5px;line-height:1.65;color:#3a3833;max-width:64ch}
.scope b{color:var(--ink);font-weight:800}

/* Related services as a single line of links, not four cards. */
.also{margin:0;font-size:15px;line-height:1.7;color:var(--muted)}
.also a{color:var(--ink);font-weight:700}

/* ═══ service pages: scanning rhythm, not marketing rhythm ═══
   The homepage runs on 118px section padding and 46-72px section headings.
   That cadence is right for a page someone is being persuaded by and wrong for
   one they are checking: six sections of it put close to two screens of empty
   space between a headteacher and the answer they came for. Same components,
   tighter metre. */
.svc .section{padding:54px 0}
.svc main > .section:first-of-type{padding-top:38px;border-bottom:0}
.svc .section h2.display.small{font-size:clamp(27px,2.7vw,37px);line-height:1;margin:0}
.svc .gets{margin-top:20px}
.svc .scope,.svc .also{margin-top:14px}
.svc .faq-list{margin-top:18px}
/* The base summary already carries 20px top and bottom; adding padding to
   details as well was stacking two paddings and making a collapsed answer
   98px tall. Four of them cost two thirds of a screen to say nothing. */
.svc .faq-list details{padding:0}
.svc .faq-list summary{padding:15px 0;font-size:16px;line-height:1.4}
.svc .faq-list details[open] summary{padding-bottom:6px}
.svc .faq-list p{margin:9px 0 0;font-size:15.5px;line-height:1.65}
/* The related-services line is a signpost, not a section. */
.svc .section:has(.also){padding:34px 0}


/* ═══════════════ service pages ═══════════════
   The homepage already gives every service a colour: Interim is mint, Meeting
   Cover rose, Panels coral, Recovery ochre. The service pages ignored it and
   ran identical cream, so clicking a mint card landed you somewhere that looked
   like nowhere in particular. The colour now follows the click.

   Where it goes matters more than that it exists. Until now the loudest colour
   on the page was the peach offer band, carrying the third most important
   message, sitting above the facts. So the running order changed:

     hero          paper    title, promise, two ways to start
     COMMITMENTS   TONE     the four numbers, in the colour they clicked
     credentials   paper2   a thin rule, not a section
     sheet         paper2   deliverables beside scope, quiet, reference
     answers       paper2   four, collapsed
     offer         peach    risk reversal, against the form where the ask is

   One colour event, one supporting note, and the yellow reserved for the single
   strongest claim on the page: that a missed date is not charged. */
.svc[data-tone="mint"]  {--tone:var(--mint)}
.svc[data-tone="rose"]  {--tone:var(--rose)}
.svc[data-tone="coral"] {--tone:var(--coral)}
.svc[data-tone="ochre"] {--tone:var(--ochre)}
.svc .section{padding:52px 0;border-bottom:0}

/* the four commitments, on the service's own colour */
.commit{background:var(--tone);border-top:1px solid var(--ink)}
.commit-row{display:grid;grid-template-columns:repeat(4,1fr);margin:0}
.commit-row > div{padding:26px 30px 24px;border-left:1px solid rgba(17,19,17,.22)}
.commit-row > div:first-child{border-left:0;padding-left:0}
.commit-row dt{margin:0 0 9px;font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;
  font-weight:800;color:rgba(17,19,17,.66)}
.commit-row dd{margin:0;font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;
  font-weight:900;font-size:clamp(24px,2.5vw,34px);line-height:1;color:var(--ink)}

/* credentials: a rule under the colour, not a band of its own */
.svc .lp-cred{background:var(--paper2);border-bottom:1px solid var(--line);padding:16px 0}

/* the sheet is reference material and is deliberately quiet */
.svc .sheet-wrap{padding:44px 0 46px;background:var(--paper2)}
.sheet{border:1px solid var(--ink)}
.sheet h2{font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-size:10.5px;
  letter-spacing:.15em;text-transform:uppercase;font-weight:800;color:var(--muted);
  margin:0 0 13px;line-height:1}
.sheet-main{display:grid;grid-template-columns:1.55fr 1fr}
.sheet-get{padding:24px 28px 26px;border-right:1px solid var(--line);min-width:0}
.sheet-side{display:grid;align-content:start}
.sheet-block{padding:24px 28px 26px}
.sheet-block + .sheet-block{border-top:1px solid var(--line)}
.sheet-block p{margin:0;font-size:15px;line-height:1.62;color:#3a3833}
.sheet-block b{color:var(--ink);font-weight:800}
/* the one claim worth the brand's attention colour */
.sheet-flag{background:rgba(233,170,43,.2);border-top:1px solid var(--ink)!important}

.gets{margin:0;padding:0;list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 40px}
.gets li{padding:11px 0;border-top:1px solid var(--line);font-size:14.5px;line-height:1.5;color:#3a3833}
.gets li:before{content:none}
.gets li:nth-child(1),.gets li:nth-child(2){border-top:0;padding-top:0}
.gets b{color:var(--ink);font-weight:800}

.sheet-faq{border-top:1px solid var(--ink);padding:20px 28px 6px}
.sheet-faq .faq-list{border-top:0}
.sheet-faq details{border-bottom:1px solid var(--line)}
.sheet-faq details:last-child{border-bottom:0}
.sheet-faq summary{padding:14px 0;font-size:15.5px}
.sheet-faq details[open] summary{padding-bottom:5px}
.sheet-faq p{margin:0 0 15px;font-size:15px;line-height:1.62;color:#3a3833;max-width:78ch}

.also{margin:18px 0 0;font-size:14.5px;line-height:1.7;color:var(--muted)}
.also a{color:var(--ink);font-weight:700}

@media(max-width:1000px){
  .sheet-main{grid-template-columns:1fr}
  .sheet-get{border-right:0;border-bottom:1px solid var(--line)}
}
@media(max-width:820px){
  .commit-row{grid-template-columns:1fr 1fr}
  .commit-row > div{padding:20px 24px}
  .commit-row > div:nth-child(odd){border-left:0;padding-left:0}
  .commit-row > div:nth-child(n+3){border-top:1px solid rgba(17,19,17,.22)}
}
@media(max-width:620px){
  .commit-row{grid-template-columns:1fr}
  .commit-row > div{border-left:0;padding-left:0}
  .commit-row > div + div{border-top:1px solid rgba(17,19,17,.22)}
  .gets{grid-template-columns:1fr;gap:0}
  .gets li:nth-child(2){border-top:1px solid var(--line);padding-top:11px}
  .sheet-get,.sheet-block,.sheet-faq{padding-left:20px;padding-right:20px}
}

/* ═══ final pass on the service pages ═══

   Four calls, each one about removing competition rather than adding anything.

   1. The offer band loses the peach. It sits immediately above the form, so at
      the exact moment a headteacher decides, a warm band was competing with the
      yellow button for the eye. The message is risk reversal and it should be
      read, not shouted; the button is the only thing that should be bright at
      the point of the ask. Scoped to .svc, because on the homepage the peach
      sits high on the page with nothing to fight and does useful work there.

   2. The deliverables get numerals. Ogilvy's Rolls-Royce ad was thirteen
      numbered facts, and the numbering was not decoration: it told you the list
      was finite and counted. Same here. Eight things, all of them, and you can
      see there are eight without counting.

   3. The lead drops to a 62ch measure. At 660px it was running to eighty
      characters, which is past comfortable for a paragraph nobody has committed
      to reading yet.

   4. The offer's text link becomes a button, because it is an action. */

.svc .offer{background:var(--paper);border-top:1px solid var(--ink)}
.svc .offer-in{padding:34px 0 36px}
.svc .offer .kicker{color:var(--muted)}
.svc .offer-line{color:#3a3833}
.svc .offer-line strong{font-size:27px;line-height:1.12;margin-bottom:10px}
.svc .offer-link{border-bottom:0;background:var(--yellow);border:1px solid var(--yellow);
  padding:14px 20px;font-size:12px;font-weight:700;min-height:46px;
  display:inline-flex;align-items:center;gap:12px}
.svc .offer-link:hover{background:#e0a026;border-color:#e0a026}

.svc .phero .lead{max-width:62ch}

/* The numeral is positioned, not a grid column. Making the li a grid turned its
   bare text node into a third grid item, which wrapped the description into the
   26px numeral column and took every item to roughly 300px tall. */
.gets{counter-reset:get}
.gets li{counter-increment:get;position:relative;padding-left:30px}
.gets li:before{content:counter(get,decimal-leading-zero);position:absolute;left:0;top:11px;
  font-family:"Barlow Condensed","Arial Narrow",Arial,sans-serif;font-weight:900;
  font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums}
.gets li:nth-child(1):before,.gets li:nth-child(2):before{top:0}