/* Belbin Scotland: shared styles for every page.
   Page-specific rules sit in a small <style> block on the page itself. */

/* Lato, served from this site rather than from fonts.googleapis.com. A Google-hosted font hands
   every visitor's IP address to Google on the first paint, before the cookie banner has been
   answered and without the cookie policy saying so. Four files, 91 KB, latin subset, under the SIL
   Open Font License, which allows this. Weight 300 was being fetched on every page and is used
   nowhere, so it has gone; italic 400 is new, and gives the 121 <em> elements in the copy real
   italics instead of the slanted uprights the browser was faking. (Campbell, 13 Oct 2026) */
@font-face{font-family:'Lato';font-style:normal;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-400.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:italic;font-weight:400;font-display:swap;
  src:url(/assets/fonts/lato-400-italic.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:700;font-display:swap;
  src:url(/assets/fonts/lato-700.woff2) format('woff2')}
@font-face{font-family:'Lato';font-style:normal;font-weight:900;font-display:swap;
  src:url(/assets/fonts/lato-900.woff2) format('woff2')}

:root{
  /* Colour comes from two places only, and nowhere else: the official Belbin palette below, and the
     neutrals belbin.com itself uses. Campbell's rule (23 Sep 2026): never invent a colour or a shade,
     ask him instead. Layout, imagery and type are ours; the colours follow the brand. */
  --green:#00843D;                                                    /* Belbin Green, Pantone 7732c */
  --plant:#FAD237;--ri:#A0326E;--co:#4B96D2;--sh:#B42D23;--me:#A59B96; /* the nine Team Role colours */
  --tw:#9BB937;--imp:#0069A0;--cf:#874B32;--sp:#B4AA69;
  /* Neutrals taken from Belbin UK's own site, belbin.com (Campbell, 23 Sep 2026: match HQ). The palette
     sheet defines no neutrals, so these are HQ's live values rather than invented greys. */
  --ink:#212121;                 /* headings */
  --text:#3E3E3E;                /* body copy: grey, as on belbin.com */
  --meta:#545454;                /* dates, captions, small print */
  --chrome:#FFFFFF;              /* header and footer are white on belbin.com */
  --band:#F3F3F3;                /* the light grey section bands HQ uses */
  --line:#E3E3E3;                /* hairlines and card borders */
  --edge:#C9C9C9;                /* dashed placeholder outlines, which need to be seen */
  --panel:var(--band);
  --wash:#FFFFFF;
  --grey:var(--me);              /* Monitor Evaluator grey stays a role colour, not a UI grey */
  --bg:#FFFFFF;
  --radius:18px;--wrap:1200px;
  --shadow:0 14px 40px -20px rgba(0,0,0,.18);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;font-size:17px}
body{font-family:'Lato',sans-serif;color:var(--text);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 40px}
h1,h2,h3,h4{font-weight:700;line-height:1.2;letter-spacing:-.01em;color:var(--ink)}
.eyebrow{font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--green);font-weight:900;margin-bottom:16px}
.skip{position:absolute;left:-9999px;top:0;background:var(--green);color:#fff;padding:10px 16px;z-index:100}
.skip:focus{left:16px;top:16px}

/* links in running text: bold, coloured, underline on hover or keyboard focus */
.inlink{color:var(--green);font-weight:700;text-decoration:none;text-underline-offset:3px;text-decoration-thickness:1.5px}
.inlink:hover,.inlink:focus-visible{text-decoration:underline}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:9px;font:inherit;font-size:.97rem;font-weight:700;padding:14px 28px;
  border-radius:999px;cursor:pointer;transition:.25s;border:1.5px solid var(--line);background:#fff;color:var(--ink);white-space:nowrap}
.btn svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2}
.btn-primary{background:var(--green);border-color:var(--green);color:#fff}
.btn-primary:hover{opacity:.88;transform:translateY(-2px)}
.btn-ghost:hover{border-color:var(--green);color:var(--green)}
.btn[disabled]{opacity:.45;cursor:not-allowed;transform:none}
.actions{display:flex;gap:14px;flex-wrap:wrap}
.actions.centre{justify-content:center;margin:26px 0}

/* ---------------------------------------------------------------- header and menu */
.topbar{background:var(--band);color:var(--meta);font-size:.8rem;border-bottom:1px solid var(--line)}
.topbar .wrap{display:flex;justify-content:space-between;gap:16px;padding-top:8px;padding-bottom:8px}
.topbar a{font-weight:700}
.topbar a{color:var(--text)}
.topbar a:hover{color:var(--green)}
header.site{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.96);backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid var(--line)}
.nav{display:flex;align-items:center;justify-content:space-between;height:84px;gap:14px}
/* 14, not 20: with 4px between the menu items and 10px before the Buy button, the right-hand
   cluster then reads as one even rhythm - 14 before Buy, 14 before the search - instead of
   4, 4, 4, 4, 4, 12, 26. (13 Oct 2026) */
/* Scotland sits under the wordmark rather than beside it (Campbell, 13 Oct 2026): side by side the
   block was 252px wide, stacked it is the width of the wordmark alone, which hands the menu back
   about 90px - room for the search icon and for another top-level item later. */
.logo{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  flex:none;line-height:1}
.logo img{height:34px;width:auto}
.logo span{font-weight:900;color:var(--ink);font-size:1.02rem;letter-spacing:.02em;line-height:1}
.menu{list-style:none;display:flex;align-items:center;gap:4px}
.menu>li{position:relative}
.menu>li>a{display:flex;align-items:center;gap:5px;font-size:.92rem;color:var(--text);padding:10px 9px;border-radius:10px;transition:.2s;white-space:nowrap}
.menu>li>a:hover,.menu>li:focus-within>a,.menu>li.on>a{color:var(--green)}
.menu>li.on>a{font-weight:700}
.menu .caret{width:10px;height:10px;stroke:currentColor;fill:none;stroke-width:2.4;transition:.2s}
.menu>li:hover .caret,.menu>li:focus-within .caret{transform:rotate(180deg)}
.sub{position:absolute;top:100%;left:0;min-width:250px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);
  padding:10px;list-style:none;opacity:0;visibility:hidden;transform:translateY(8px);transition:.2s}
.menu>li:hover>.sub,.menu>li:focus-within>.sub{opacity:1;visibility:visible;transform:translateY(0)}
.sub a{display:block;padding:9px 12px;border-radius:9px;font-size:.92rem;color:var(--text)}
.sub a:hover,.sub a:focus-visible{background:var(--band);color:var(--green)}
.sub .all{border-top:1px solid var(--line);margin-top:6px;padding-top:12px;font-weight:700;color:var(--green)}
.sub.cols{display:grid;grid-template-columns:1fr 1fr;min-width:520px;gap:0 6px}
.sub.cols .all-li{grid-column:1/-1}
/* grouped (mega) dropdown, used by Applications */
.sub.mega{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 10px;width:720px;left:50%;
  transform:translate(-50%,8px);padding:14px}
.menu>li:hover>.sub.mega,.menu>li:focus-within>.sub.mega{transform:translate(-50%,0)}
.sub.mega .top-li,.sub.mega .all-li{grid-column:1/-1}
/* feature panel above the groups (Case Studies): its own section, not a heading */
.sub.mega .top-li{margin-bottom:8px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.sub .feature{display:flex;align-items:center;gap:14px;padding:14px 16px;border-radius:12px;
  background:var(--band);border:1.5px solid var(--green);transition:.2s}
.sub .feature:hover,.sub .feature:focus-visible{background:var(--green);border-color:var(--green)}
.feature .f-ic{flex:none;width:40px;height:40px;border-radius:10px;background:var(--green);display:flex;align-items:center;justify-content:center;transition:.2s}
.feature .f-ic svg{width:21px;height:21px;stroke:#fff;fill:none;stroke-width:1.8}
.feature .f-tx{flex:1;line-height:1.35}
.feature .f-tx b{display:block;font-size:1rem;color:var(--ink);transition:.2s}
.feature .f-tx small{font-size:.86rem;color:var(--text);transition:.2s}
.feature .f-go{flex:none;width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:2;transition:.2s}
.sub .feature:hover .f-ic,.sub .feature:focus-visible .f-ic{background:#fff}
.sub .feature:hover .f-ic svg,.sub .feature:focus-visible .f-ic svg{stroke:var(--green)}
.sub .feature:hover b,.sub .feature:hover small,.sub .feature:focus-visible b,.sub .feature:focus-visible small{color:#fff}
.sub .feature:hover .f-go,.sub .feature:focus-visible .f-go{stroke:#fff;transform:translateX(3px)}
.sub.mega .grp{padding:6px 0 8px}
.sub.mega .grp ul{list-style:none}
.grp-h{display:block;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;font-weight:900;color:var(--green);padding:4px 12px 6px}
.menu>li.buy{margin-left:10px}
.menu>li.buy>a{background:var(--green);color:#fff;border-radius:999px;padding:10px 20px;font-weight:700}
.menu>li.buy>a:hover,.menu>li.buy:focus-within>a{opacity:.88;color:#fff}
.menu>li.buy .sub{left:auto;right:0}
.menu .sub-toggle{display:none}
.burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px}
.burger span{width:24px;height:2px;background:var(--ink);transition:.2s}

/* breadcrumb */
.crumbs{font-size:.84rem;color:var(--meta);padding-top:22px}
.crumbs a:hover{color:var(--green)}
.crumbs span{margin:0 8px}

/* ---------------------------------------------------------------- page building blocks */
.hero{padding:40px 0 80px}
.hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center}
.hero h1{font-size:3rem;margin-bottom:18px}
.hero h1 em{font-style:normal;color:var(--green)}
.hero .lede{font-size:1.15rem;max-width:580px;margin-bottom:30px}
.hero-art{display:flex;justify-content:center}
.hero-art img{max-height:380px;width:auto}
.price-tag{display:inline-flex;align-items:baseline;gap:8px;border:1.5px solid var(--green);color:var(--green);border-radius:999px;padding:8px 18px;font-weight:700;margin-bottom:24px}
.price-tag b{font-size:1.3rem;font-weight:900;color:var(--green)}
/* the price under a report summary on the range page: quieter than the hero pill */
.price-line{color:var(--green);font-weight:700;margin:-6px 0 16px}
.price-line b{font-size:1.25rem;font-weight:900}

.section{padding:72px 0}   /* 144px between two sections: enough to separate them, not a hole */
.section.tint{background:var(--band)}
/* A clay render is white right to its edges, so on a tinted band it reads as a white
   rectangle. Multiply drops that white into the tint and leaves the subject, with no
   re-rendering and no cut-out halo. Only the renders: the role icons are already
   transparent, and the video stills are photographs that multiply would dull. */
.section.tint .art img{mix-blend-mode:multiply}

.section.tight{padding:64px 0}
.section-head{max-width:760px;margin:0 auto 52px;text-align:center}
.section-head h2{font-size:2.15rem;margin-bottom:14px}
.section-head p{font-size:1.08rem}
/* a lead-in of more than one paragraph: nothing sets a margin on p, so they would otherwise touch */
.section-head p+p{margin-top:12px}
.prose{max-width:820px;margin:0 auto}
.prose p{margin-bottom:16px;font-size:1.06rem}
.prose h2{font-size:1.7rem;margin:40px 0 14px}
.prose h3{font-size:1.25rem;margin:28px 0 10px}
.prose ul{margin:0 0 18px 0;list-style:none}
.prose li{position:relative;padding-left:26px;margin-bottom:8px}
.prose li::before{content:"";position:absolute;left:4px;top:.62em;width:8px;height:8px;border-radius:50%;background:var(--green)}

.stats{background:var(--green);color:#fff}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;padding-top:36px;padding-bottom:36px}
.stat{text-align:center}
.stat b{display:block;font-size:1.9rem;font-weight:900;color:#fff;line-height:1.1}
.stat span{font-size:.92rem;color:rgba(255,255,255,.88)}

.grid-1{display:grid;grid-template-columns:1fr;gap:24px}
/* a grid of equals can cycle the palette across its cards, where the colour is decoration
   and carries no Team Role meaning. Green leads, then Implementer blue, Resource
   Investigator purple and Plant yellow */
.cards.cycle .card:nth-child(4n+2){--c:var(--imp)}
.cards.cycle .card:nth-child(4n+3){--c:var(--ri)}
.cards.cycle .card:nth-child(4n+4){--c:var(--plant)}
/* a card the full width of the page would otherwise set its copy in 140-character lines, so
   the body keeps the same 820px measure as .prose */
.grid-1 .card .card-body{max-width:820px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}

.card{background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:30px 28px;position:relative;overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.card::before{content:"";position:absolute;left:0;top:0;right:0;height:5px;background:var(--c,var(--green))}
.card.plain::before{display:none}
/* a card that points at another page shows its picture: one fixed box per card, so the
   headings line up whatever shape the image is */
.card-thumb{height:120px;display:flex;align-items:center;justify-content:center;margin:0 0 14px}
.card-thumb img{width:auto;height:auto;max-width:100%;max-height:120px}
a.card:hover,.card.lift:hover{transform:translateY(-5px);box-shadow:var(--shadow);border-color:transparent}
.card h3{font-size:1.18rem;margin-bottom:8px}
.card p{font-size:.98rem;margin-bottom:14px}
.card .more{margin-top:auto;font-weight:700;color:var(--green);display:inline-flex;gap:8px;align-items:center;transition:.2s}
a.card:hover .more,.card .more:hover{gap:12px}
.more svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}
.ic{width:52px;height:52px;border-radius:14px;background:var(--c,var(--green));display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.ic svg{width:26px;height:26px;stroke:var(--oc,#fff);fill:none;stroke-width:1.7}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;counter-reset:s}
.step{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;counter-increment:s;display:flex;flex-direction:column}
.step::before{content:counter(s);width:40px;height:40px;border-radius:50%;background:var(--green);color:#fff;font-weight:900;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.step h3{font-size:1.15rem;margin-bottom:8px}
.step p{font-size:.98rem;margin-bottom:18px;flex:1}
.step .more{font-weight:700;color:var(--green);display:inline-flex;gap:8px;align-items:center;transition:.2s}
.step .more:hover{gap:12px}

.callout{display:grid;grid-template-columns:auto 1fr;gap:28px;align-items:center;background:var(--bg);border-radius:var(--radius);padding:34px 40px}
.callout .big{font-size:3.4rem;font-weight:900;color:var(--green);line-height:1}
.callout h3{font-size:1.25rem;margin-bottom:6px}

.quotes{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.quotes.three{grid-template-columns:repeat(3,1fr)}
.quote{border-left:4px solid var(--green);background:#fff;border-radius:0 var(--radius) var(--radius) 0;padding:28px 30px;box-shadow:var(--shadow)}
.quote p{font-size:1.02rem;color:var(--ink);margin-bottom:14px}
.quote b{display:block;color:var(--green)}   /* the person who said it, in Belbin green */
.quote span{display:block;font-size:.88rem;color:var(--meta)}
.quote .org{color:var(--ink);font-weight:700;margin-top:2px}

/* the accordion sits in a white panel, so it holds together on a grey band as well as on white */
.faq{max-width:860px;margin:0 auto;background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:6px 30px;overflow:hidden}
.faq details{border-bottom:1px solid var(--line)}
.faq details:last-child{border-bottom:0}
.faq details[open]{background:var(--band);margin:0 -30px;padding:0 30px}
.faq summary{cursor:pointer;list-style:none;padding:22px 44px 22px 0;font-weight:700;color:var(--ink);font-size:1.05rem;position:relative;transition:.2s}
.faq summary:hover,.faq summary:focus-visible{color:var(--green)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";position:absolute;right:8px;top:16px;width:26px;height:26px;border-radius:50%;
  background:var(--green);color:#fff;font-size:1.05rem;line-height:25px;text-align:center;font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq .ans{padding:0 44px 22px 0}
.faq .ans p{margin-bottom:12px}
.faq .ans ul{margin:0 0 12px 20px}
.faq .ans li{margin-bottom:6px}

.cta{background:var(--green);color:#fff;border-radius:24px;padding:60px;text-align:center}
.cta h2{color:#fff;font-size:2.1rem;margin-bottom:12px}
.cta p{max-width:620px;margin:0 auto 28px;opacity:.92;font-size:1.08rem}
.cta .btn{background:#fff;border-color:#fff;color:var(--green)}
.cta .btn:hover{transform:translateY(-2px)}
.cta .btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.cta .btn-ghost:hover{border-color:#fff;color:#fff}
/* a link in the copy of a green band cannot be Belbin green: it reads as invisible against it.
   White and underlined, so it is legible and still obviously a link. */
.cta a,.cta a.inlink{color:#fff;text-decoration:underline;text-underline-offset:3px}
.cta a:hover,.cta a.inlink:hover{text-decoration-thickness:2px}
.cta .btn,.cta .btn:hover{text-decoration:none}
.cta .actions{justify-content:center}
.cta-wrap{margin-top:92px}

/* ===== The nine Team Roles, on a ring =====
   A spoke spans the whole circle and is rotated by --a; the icon sits at the top of it and is
   rotated back, so a position needs no radius arithmetic. The ring turns as a whole and the <i>
   inside each icon turns the other way at the same speed, which is what keeps the icons upright
   while it moves. Hover or focus one and the ring stops, that role lifts, and the hub names it.
   Colour comes from --c on each orb: the nine role colours, nothing invented. */
.orbs{position:relative;aspect-ratio:1/1;max-width:460px;margin:0 auto;width:100%}
.ring{position:absolute;inset:0;animation:orbit 120s linear infinite}
/* 223.5% of the orb's own height is 38% of the circle: the radius the ring has always had */
.orb{position:absolute;left:50%;top:50%;width:17%;aspect-ratio:1;margin:-8.5% 0 0 -8.5%;
  transform:rotate(var(--a)) translateY(-223.5%) rotate(calc(-1 * var(--a)));
  display:block;border-radius:50%;outline-offset:4px}
.orb i{display:block;animation:orbit-back 120s linear infinite}
.orb img{display:block;width:100%;height:100%;border-radius:50%;
  filter:drop-shadow(0 14px 18px rgba(0,0,0,.22));
  transition:transform .35s cubic-bezier(.2,.8,.3,1.3),filter .35s,opacity .35s}

@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes orbit-back{to{transform:rotate(-360deg)}}

/* each icon arrives from the centre, one after another, and settles with a slight overshoot */
@keyframes orb-in{from{transform:scale(.2) translateY(44%);opacity:0}
  to{transform:scale(1) translateY(0);opacity:1}}
.orbs .orb i{animation:orbit-back 120s linear infinite}
.orbs .orb img{animation:orb-in .7s cubic-bezier(.2,.9,.3,1.25) backwards}
.ring .orb:nth-child(1) img{animation-delay:.05s}
.ring .orb:nth-child(2) img{animation-delay:.11s}
.ring .orb:nth-child(3) img{animation-delay:.17s}
.ring .orb:nth-child(4) img{animation-delay:.23s}
.ring .orb:nth-child(5) img{animation-delay:.29s}
.ring .orb:nth-child(6) img{animation-delay:.35s}
.ring .orb:nth-child(7) img{animation-delay:.41s}
.ring .orb:nth-child(8) img{animation-delay:.47s}
.ring .orb:nth-child(9) img{animation-delay:.53s}

/* hovering one holds the ring still, so the reader can take it in */
.orbs:hover .ring,.orbs:focus-within .ring,
.orbs:hover .orb i,.orbs:focus-within .orb i{animation-play-state:paused}
.orbs.on .orb img{opacity:.45}
.orb:hover img,.orb:focus-visible img{opacity:1;transform:scale(1.18);
  filter:drop-shadow(0 18px 22px rgba(0,0,0,.3))}

/* the hub: nine roles by default, the role's name while one is held */
.orb-hub{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:38%;aspect-ratio:1;
  border-radius:50%;background:var(--hub,var(--green));
  box-shadow:0 30px 50px -20px rgba(0,0,0,.45);display:grid;place-items:center;
  color:var(--hub-on,#fff);
  text-align:center;padding:6%;margin:0;transition:background .35s,color .35s}
.orb-hub>span{grid-area:1/1;transition:opacity .3s,transform .3s}
.orb-hub b{display:block;font-size:2.6rem;font-weight:900;line-height:1}
.orb-hub small{display:block;font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  font-weight:700}
.hub-role{opacity:0;transform:scale(.9)}
.hub-role b{font-size:1.02rem;line-height:1.2;letter-spacing:.01em}
.orbs.on .hub-9{opacity:0;transform:scale(.9)}
.orbs.on .hub-role{opacity:1;transform:scale(1)}

/* and the one-line description, under the ring rather than crammed inside it */
/* the ring's children are all positioned, so a line left in normal flow lands at the TOP of the
   box, above the circle. It belongs under it. */
.orb-line{position:absolute;top:calc(100% + 6px);left:50%;transform:translateX(-50%);
  width:min(340px,96%);margin:0;text-align:center;font-size:.92rem;color:var(--meta);
  opacity:0;transition:opacity .3s;pointer-events:none;line-height:1.45}
.orb-line span{display:block}   /* a sentence per line, not wherever the text happens to wrap */
.orbs.on .orb-line{opacity:1}

@media (prefers-reduced-motion:reduce){
  .ring,.orb i,.orb img{animation:none!important}
  .orb img,.orb-hub>span,.orb-line{transition:none}
}
@media (max-width:860px){
  .orbs{max-width:320px}
  .orb-hub b{font-size:2rem}
  .hub-role b{font-size:.88rem}
  .orb-line{font-size:.86rem;max-width:280px}
}

/* a lede of more than one paragraph: .lede carries 30px below it, which is right after the last
   one and too much between them */
.lede-group .lede{margin-bottom:14px}
.lede-group .lede:last-child{margin-bottom:30px}

/* ===== Client logos =====
   Thirty-five marks in thirty-five different brand colours would fight each other and fight the
   Belbin palette, so they sit in grey and take their own colour when you point at one. That also
   keeps the page honest to the rule that only Belbin colours appear unprompted. Sizes are capped
   both ways so a wide wordmark and a square roundel carry the same visual weight.
   (Campbell, 14 Oct 2026) */
.clients{list-style:none;margin:0;padding:0;display:grid;gap:14px;
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.clients li{background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  min-height:104px;display:grid;place-items:center;padding:18px 16px}
.clients img{max-width:112px;max-height:56px;width:auto;height:auto;object-fit:contain;
  filter:grayscale(1);opacity:.62;transition:filter .3s,opacity .3s,transform .3s}
.clients li:hover img,.clients li:focus-within img{filter:grayscale(0);opacity:1;
  transform:scale(1.04)}
@media (max-width:600px){
  .clients{grid-template-columns:repeat(auto-fill,minmax(124px,1fr));gap:10px}
  .clients li{min-height:86px;padding:14px 12px}
  .clients img{max-width:92px;max-height:46px}
}
@media (prefers-reduced-motion:reduce){.clients img{transition:none}}
/* on paper the grey would print as mud, and hover never happens */
@media print{.clients img{filter:none;opacity:1}}

/* forms */
.form{display:grid;gap:18px}
.form .row{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.form label{display:block;font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:6px}
.form input,.form select,.form textarea{width:100%;font:inherit;font-size:1rem;color:var(--ink);padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;transition:.2s}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--bg)}
.form textarea{min-height:140px;resize:vertical}
.form .hint{font-size:.85rem;color:var(--text);margin-top:4px}
/* contact form: the spam trap stays out of sight, and the status line under the button */
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-msg{margin:0;font-size:.95rem;color:var(--meta);min-height:1.2em}
.form-msg.is-error{color:var(--sh);font-weight:700}
.form button[disabled]{opacity:.6;cursor:default;transform:none}

/* HubSpot's embedded form, dressed to match the rest of the site. HubSpot ships its own stylesheet, so a
   few of these need the extra weight of a doubled class to win. Field names come from HubSpot's markup. */
.hs-wrap .hs-form{display:grid;gap:18px}
.hs-wrap .hs-form-field{margin:0}
.hs-wrap .hs-form-field > label{display:block;font-weight:700;color:var(--ink);font-size:.92rem;margin-bottom:6px}
.hs-wrap .hs-form-field > label .hs-form-required{color:var(--sh);margin-left:2px}
.hs-wrap .hs-input:not([type=checkbox]):not([type=radio]){width:100%;font:inherit;font-size:1rem;
  color:var(--ink);padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  transition:.2s;box-sizing:border-box}
.hs-wrap .hs-input:focus{outline:none;border-color:var(--green);box-shadow:0 0 0 4px var(--bg)}
.hs-wrap textarea.hs-input{min-height:140px;resize:vertical}
.hs-wrap .hs-field-desc{font-size:.85rem;color:var(--meta);margin-top:4px}
.hs-wrap .inputs-list{list-style:none;margin:0;padding:0}
.hs-wrap .hs-form-booleancheckbox label,.hs-wrap .hs-form-checkbox label{display:flex;gap:10px;
  align-items:flex-start;font-weight:400;font-size:.95rem;color:var(--text)}
.hs-wrap .legal-consent-container{font-size:.92rem;color:var(--text)}
.hs-wrap .legal-consent-container p{margin:0 0 8px}
.hs-wrap .hs-button{display:inline-flex;align-items:center;gap:10px;font:inherit;font-weight:700;
  font-size:1rem;padding:14px 26px;border:0;border-radius:999px;background:var(--green);color:#fff;
  cursor:pointer;transition:.2s}
.hs-wrap .hs-button:hover{opacity:.88;transform:translateY(-2px)}
.hs-wrap .hs-error-msg,.hs-wrap .hs-main-font-element{color:var(--sh);font-size:.88rem}
.hs-wrap .hs-richtext{font-size:.95rem;color:var(--text)}
.hs-wrap .submitted-message{font-size:1.05rem;color:var(--ink)}
.hs-fallback{color:var(--meta);font-size:.95rem}
@media (max-width:760px){.hs-wrap .hs-form{gap:14px}}
.mock-note{background:var(--bg);border:1.5px solid var(--sh);color:var(--sh);border-radius:12px;padding:14px 18px;font-size:.9rem}

/* ---------------------------------------------------------------- content pages (built by tools/build.py) */
.section-head.left{max-width:820px;margin:0 auto 26px;text-align:left}
.section-head.left h2{font-size:1.95rem;margin:0}
.prose ol{margin:0 0 18px 22px}
/* the privacy policy: lettered lists (a, b, c...) and the lawful-basis table */
.prose ol.lettered{list-style:lower-alpha;margin-left:26px}
.prose ol.lettered li{padding-left:4px}
.prose ol.lettered li::before{content:none}
.policy-table{width:100%;border-collapse:collapse;margin:0 0 22px;font-size:.95rem}
.policy-table caption{text-align:left;font-weight:700;padding-bottom:10px;color:var(--meta)}
.policy-table th,.policy-table td{border:1px solid var(--line);padding:10px 12px;vertical-align:top;text-align:left}
.policy-table th{background:var(--band);font-weight:700}
@media (max-width:620px){
  .policy-table,.policy-table tbody,.policy-table tr,.policy-table td{display:block;width:100%}
  .policy-table thead{display:none}
  .policy-table tr{border:1px solid var(--line);margin-bottom:12px}
  .policy-table td{border:0;border-bottom:1px solid var(--line)}
  .policy-table td:last-child{border-bottom:0}
  .policy-table td::before{content:attr(data-label);display:block;font-weight:700;font-size:.78rem;
    letter-spacing:.08em;text-transform:uppercase;color:var(--meta);margin-bottom:4px}
}
.prose ol li{padding-left:6px}
.prose ol li::before{display:none}
.prose h4{font-size:1.08rem;margin:22px 0 8px}
.prose strong{color:var(--ink)}
/* bold inside a link must not repaint it: some links are <a><strong>, others <strong><a> */
.prose a strong,.prose a b{color:inherit}
.prose table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.96rem}
.prose th,.prose td{border-bottom:1px solid var(--grey);padding:10px 12px;text-align:left;vertical-align:top}
.prose th{color:var(--ink)}
.prose>*:last-child{margin-bottom:0}
.section.cp .wrap>*+*{margin-top:34px}
.section.cp .wrap>.section-head+*{margin-top:0}
.section.cp .wrap>.actions,.section.cp .wrap>.samples{justify-content:center}
.split{display:grid;grid-template-columns:.8fr 1.2fr;gap:56px;align-items:center;max-width:1100px;margin-left:auto;margin-right:auto}
.split.flip{grid-template-columns:1.2fr .8fr}
.split.long{align-items:start}
.split.long .split-media{position:sticky;top:120px}
.split.flip .split-media{order:2}
.split-h{font-size:1.95rem;margin-bottom:18px}
.split .prose{margin:0;max-width:none}
.split-body>*+*{margin-top:22px}
.fig-wrap{max-width:820px;margin-left:auto;margin-right:auto}
.note{max-width:820px;margin:28px auto 0;font-size:.95rem;color:var(--meta);text-align:center}
.byline{font-size:.92rem;color:var(--meta);margin:-4px 0 18px}

/* image placeholders: replaced by the 3D renders later (briefs in tools/image-briefs.md) */
.ph{width:100%;border-radius:var(--radius);border:2px dashed var(--edge);
  background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:10px;padding:22px;text-align:center;color:var(--meta)}
.ph svg{width:38px;height:38px;stroke:var(--green);fill:none;stroke-width:1.5;opacity:.8}
.ph figcaption{font-size:.84rem;line-height:1.45;max-width:320px}
.ph figcaption b{display:block;font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:900;margin-bottom:2px}
.ph-hero{max-width:520px}
.ph-thumb{border-radius:12px;padding:12px;margin-bottom:18px}
.ph-thumb svg{width:28px;height:28px}
.ph-thumb figcaption{font-size:.78rem}

/* a placeholder once its render exists (shot list and assignments in tools/art_map.py) */
/* block, not flex: a percentage-width image inside a shrink-to-fit flex box resolves to zero width,
   which then never intersects the viewport, so the lazy image never loads */
.art{display:block;text-align:center;margin:0}
/* build.py sets each figure's width from the render's own shape (ART_CAPS), so a standing figure and a
   group shot come out the same height; width + the height attribute reserve the space before it loads */
.art{max-width:100%;margin-left:auto;margin-right:auto}
.art img{display:block;width:100%;height:auto;margin:0 auto}
/* card thumbnails sit in a grid, so every one gets the same box and the image is centred inside it.
   Without this a tall standing figure comes out a third the width of a group shot and the cards in a
   row stop lining up. */
.art-thumb{height:150px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.art-thumb img{width:auto;height:auto;max-width:100%;max-height:150px}

/* the nine roles, one pair, or one role (official Belbin icons) */
.rolestrip{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;max-width:980px;margin-left:auto;margin-right:auto}
.rolestrip span{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:5px 14px 5px 5px;font-weight:700;font-size:.88rem;
  background:var(--bg);border:1px solid var(--line);color:var(--ink)}
.rolestrip img{width:30px;height:30px}
.pair{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.pair img{width:64px;height:64px}
.pair span{font-weight:900;font-size:1.4rem;color:var(--text)}
.one-role{display:flex;justify-content:center}
.one-role img{width:96px;height:96px}
.card .one-role{justify-content:flex-start;margin-bottom:14px}
.card .one-role img{width:56px;height:56px}

/* stand-in report cover */
.cover{aspect-ratio:3/4;width:100%;max-width:250px;margin:0 auto;border-radius:14px;padding:26px 22px;display:flex;flex-direction:column;
  background:var(--green);color:#fff;box-shadow:var(--shadow)}
.cover-logo{font-weight:900;letter-spacing:.06em;background:#fff;color:var(--green);border-radius:999px;padding:3px 12px;align-self:flex-start;font-size:.8rem}
.cover b{font-size:1.3rem;line-height:1.2;margin-top:auto}
.cover-sub{opacity:.8;font-size:.9rem;margin-bottom:16px}
.cover-dots{display:flex;gap:5px}
.cover-dots i{width:14px;height:14px;border-radius:50%;background:var(--c);border:1.5px solid rgba(255,255,255,.7)}
.hero-art .cover{max-width:290px}
/* the cover is a link to that report's sample, so it lifts a little under the pointer */
.cover-link{display:block;transition:.25s}
.cover-link:hover{transform:translateY(-3px)}
.cover-link:focus-visible{outline:3px solid var(--green);outline-offset:4px;border-radius:18px}

/* sample PDF downloads: outlined buttons, like the ghost button, with the document mark in green
   so they still read as a PDF rather than another call to action */
.samples{display:flex;flex-wrap:wrap;gap:12px}
/* a row of sample links under a row of buttons, wherever the two meet, not just in a hero */
.samples{margin-top:18px}
.actions+.samples,.samples+.actions{margin-top:18px}
.sample{display:inline-flex;align-items:center;gap:10px;font-size:.92rem;font-weight:700;
  padding:12px 22px;border-radius:999px;border:1.5px solid var(--line);background:#fff;color:var(--ink);
  transition:.25s}
.sample svg{width:18px;height:18px;stroke:var(--green);fill:none;stroke-width:1.8;flex:none}
.sample:hover{border-color:var(--green);color:var(--green)}
.sample:hover svg{stroke:currentColor}

/* videos: our own still until clicked, so nothing is fetched from YouTube (and no cookie set) before then */
.vids{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.vids.one{grid-template-columns:1fr;max-width:820px;margin-left:auto;margin-right:auto}
.vid a.yt,.vid iframe{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:var(--band);border:1px solid var(--line)}
.vid a.yt img{width:100%;height:100%;object-fit:cover;transition:.3s}
.vid a.yt:hover img{transform:scale(1.03)}
/* play button in the corner rather than over the middle of the picture */
.play{position:absolute;left:16px;bottom:16px;width:52px;height:52px;border-radius:50%;background:var(--green);box-shadow:0 6px 20px rgba(0,0,0,.3);transition:.2s}
.play::after{content:"";position:absolute;left:21px;top:16px;border-left:15px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.vid a.yt:hover .play{transform:scale(1.08)}
.runtime{position:absolute;right:12px;bottom:12px;background:rgba(33,33,33,.86);color:#fff;font-size:.82rem;font-weight:700;line-height:1;padding:6px 9px;border-radius:7px;letter-spacing:.02em;font-variant-numeric:tabular-nums}
.vid figcaption{font-weight:700;color:var(--ink);margin-top:12px;line-height:1.35}

/* on-page contents for long pages */
.toc{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:-40px;margin-bottom:10px}
.toc b{font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--meta);margin-right:6px}
.toc a{border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;font-weight:700;font-size:.86rem;color:var(--ink);transition:.2s}
.toc a:hover{border-color:var(--green);color:var(--green)}
section[id]{scroll-margin-top:100px}

/* cards made from live content */
.cards .card h3{font-size:1.15rem}
.card-body p{font-size:.98rem;margin-bottom:12px}
.card-body ul{list-style:none;margin-bottom:12px}
/* the dot belongs to an unordered list. An ordered list keeps its numbers, and drawing both gave
   "1. -" on every line */
.card-body ol{margin:0 0 12px 24px}
.card-body li,.card.outline li{position:relative;margin-bottom:6px;font-size:.96rem}
.card-body ul>li,.card.outline ul>li{padding-left:20px}
.card-body ul>li::before,.card.outline ul>li::before{content:"";position:absolute;left:2px;top:.62em;width:7px;height:7px;border-radius:50%;background:var(--c,var(--green))}
.card.outline ul{list-style:none}
.card .dur{font-size:.9rem;font-weight:700;color:var(--green);margin:-2px 0 14px}
.card .tag{font-size:.7rem;letter-spacing:.18em;text-transform:uppercase;font-weight:900;color:var(--green);margin-bottom:8px}
.card .card-body{flex:1}
.link-card h3{margin-bottom:16px}
.reports a.card{--c:var(--green)}
/* the GetSet family cards carry a price and a sample link: both sit on the foot of the card so
   they line up across the row however long the description runs */
.reports .card .price-line{margin-top:auto;padding-top:14px}
.reports .card .samples{margin-top:14px}
.in-section{padding-top:24px}
.enquiry{max-width:760px;margin-left:auto;margin-right:auto;background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:34px}

/* blog index */
.post-card .ph{margin-bottom:18px}
.post-card time{font-size:.85rem;color:var(--meta);margin-bottom:6px;display:block}

/* ---------------------------------------------------------------- footer */
footer.site{background:var(--chrome);color:var(--text);margin-top:92px;padding:64px 0 28px;font-size:.93rem;border-top:1px solid var(--line)}
.foot-grid{display:grid;grid-template-columns:1.5fr repeat(5,1fr);gap:28px}
footer.site h4{color:var(--ink);font-size:.95rem;margin-bottom:14px}
footer.site ul{list-style:none}
footer.site li{margin-bottom:8px}
footer.site a:hover{color:var(--green)}
.foot-brand img{height:30px;width:auto;margin-bottom:14px}
.foot-brand p{margin-bottom:10px}
.foot-brand a{color:var(--green);font-weight:700}
.foot-base{border-top:1px solid var(--line);margin-top:44px;padding-top:22px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.82rem;color:var(--meta)}

/* mock-up label, removed at launch */
.mock{position:fixed;left:16px;bottom:16px;z-index:99;background:#B42D23;color:#fff;font-size:.75rem;font-weight:700;padding:6px 12px;border-radius:999px;letter-spacing:.04em}

/* ---------------------------------------------------------------- responsive */
/* 1200, not 1140: the full menu needs 159 for the logo, 876 for itself, 38 for the search icon and
   two 20px gaps, which is 1113 inside a wrap that keeps 40px of padding each side. Below that the
   search icon was being pushed past the edge of the bar. Another top-level item would move this to
   about 1300. (13 Oct 2026) */
@media (max-width:1200px){
  .menu{display:none}
  .burger{display:flex}
  .nav.open .menu{display:flex;flex-direction:column;align-items:stretch;gap:0;position:absolute;top:84px;left:0;right:0;background:#fff;
    padding:12px 40px 24px;border-bottom:1px solid var(--grey);max-height:calc(100vh - 84px);overflow:auto;box-shadow:var(--shadow)}
  .nav.open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .nav.open .burger span:nth-child(2){opacity:0}
  .nav.open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  .menu>li{border-bottom:1px solid var(--grey);display:flex;flex-wrap:wrap;align-items:center}
  .menu>li>a{flex:1;padding:14px 0;font-size:1rem}
  .menu .caret{display:none}
  .menu .sub-toggle{display:flex;align-items:center;justify-content:center;width:44px;height:44px;background:none;border:0;cursor:pointer;color:var(--ink)}
  .menu .sub-toggle svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.4;transition:.2s}
  .menu li.expanded .sub-toggle svg{transform:rotate(180deg)}
  .sub,.sub.cols,.sub.mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;padding:0 0 12px 12px;min-width:0;display:none;width:100%}
  .menu>li:hover>.sub.mega,.menu>li:focus-within>.sub.mega{transform:none}
  .sub.mega .top-li{margin:4px 0 6px;padding-bottom:10px}
  .sub .feature{padding:12px 14px}
  .sub.mega .grp{padding:4px 0 2px}
  .grp-h{padding:10px 12px 2px}
  .menu>li:hover>.sub,.menu>li:focus-within>.sub{display:none}
  .menu li.expanded>.sub{display:block}
  .menu>li.buy{margin:16px 0 0;border:0}
  .menu>li.buy>a{justify-content:center;flex:1}
  .menu>li.buy .sub-toggle{margin-left:8px}
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .quotes.three{grid-template-columns:1fr 1fr}
  .vids{grid-template-columns:1fr 1fr}
  .split{gap:36px}
  .foot-grid{grid-template-columns:1fr 1fr 1fr}
}
@media (max-width:760px){
  html{font-size:16px}
  .wrap{padding:0 16px}
  .nav.open .menu{padding:8px 16px 20px}
  .topbar .wrap span:first-child{display:none}
  .hero{padding:24px 0 56px}
  .hero-grid{grid-template-columns:1fr;gap:28px}
  .hero h1{font-size:2.2rem}
  .orbs{max-width:320px}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .section{padding:52px 0}
  .section-head h2{font-size:1.75rem}
  .grid-2,.grid-3,.grid-4,.steps,.quotes,.quotes.three{grid-template-columns:1fr}
  .callout{grid-template-columns:1fr;padding:28px 24px}
  .cta{padding:40px 22px}
  .cta h2{font-size:1.6rem}
  .form .row{grid-template-columns:1fr}
  .split,.split.flip{grid-template-columns:1fr;gap:24px}
  .split-h{font-size:1.6rem}
  .split.flip .split-media{order:0}
  .split.long .split-media{position:static}
  .vids{grid-template-columns:1fr}
  .section-head.left h2{font-size:1.6rem}
  .toc{margin-top:-24px}
  .enquiry{padding:22px}
  .ph-hero{max-width:360px}
  .foot-grid{grid-template-columns:1fr 1fr}
  .foot-brand{grid-column:1/-1}
}
.step-card .card-body .prose p{font-size:.98rem}
.card .prose{max-width:none;margin:0}
.role-card .one-role{justify-content:flex-start;margin-bottom:14px}
.role-card .one-role img{width:60px;height:60px}
.role-card::before{background:var(--c)}
.go-card{background:var(--band);border:1.5px solid var(--green);justify-content:center}
.go-card::before{display:none}
.go-card h3{color:var(--green)}
/* grid items may shrink below their content width (stops long words or labels widening the page) */
.split>*,.grid-2>*,.grid-3>*,.grid-4>*,.hero-grid>*{min-width:0}
@media (max-width:760px){
  .btn{white-space:normal;text-align:center;justify-content:center}
  .prose a,.card a{overflow-wrap:anywhere}
}

/* ---------------------------------------------------------------- cookie consent
   Shown until the visitor chooses; analytics and HubSpot load only on accept, and only on belbin.scot. */
.cookie-bar{position:fixed;left:0;right:0;bottom:0;z-index:4000;background:var(--bg);border-top:1px solid var(--line);
  box-shadow:0 -14px 40px -24px rgba(0,0,0,.3);padding:20px 16px;transform:translateY(100%);transition:transform .28s ease}
.cookie-bar.show{transform:translateY(0)}
.cookie-in{max-width:var(--wrap);margin:0 auto;display:flex;align-items:center;gap:26px;flex-wrap:wrap;padding:0 24px}
.cookie-in p{flex:1;min-width:280px;font-size:.93rem;margin:0}
.cookie-btns{display:flex;gap:12px;flex-wrap:wrap}
.cookie-btns .btn{padding:11px 24px;font-size:.92rem}
@media (prefers-reduced-motion:reduce){.cookie-bar{transition:none}}
@media (max-width:760px){
  .cookie-in{flex-direction:column;align-items:stretch;gap:16px;padding:0 4px}
  .cookie-btns{justify-content:stretch}
  .cookie-btns .btn{flex:1;justify-content:center}
}

/* ---------- Printing ------------------------------------------------------------------------
   Any page can be printed or saved as a PDF, so every page needs to produce a sensible document:
   the site furniture gone, the margins set here rather than left to the browser's 0.4in default,
   headings kept with the text they introduce, and nothing split down the middle of a card. */
@media print{
  @page{size:A4;margin:16mm 14mm 18mm}

  /* furniture that means nothing on paper */
  .topbar,header.site,footer,.crumbs,.skip,.burger,.cookie-bar,.cta-wrap,.toc,
  .actions,.samples,.form,.enquiry,.hs-wrap,.hs-fallback,.vids,.vid,.play,.mock,.no-print{
    display:none!important}

  html,body{background:#fff}
  body{font-size:10.5pt;line-height:1.5}
  .wrap{max-width:none;padding:0}
  .section{padding:0 0 16pt!important;border:0!important}
  .section.tint{background:transparent}          /* a full-bleed grey band is only ink on paper */

  h1{font-size:21pt}
  h2{font-size:14.5pt}
  h3{font-size:11.5pt}
  h4{font-size:10.5pt}
  .section-head{margin-bottom:12pt}
  /* a heading at the foot of a page with its text overleaf is the commonest print fault */
  h1,h2,h3,h4,.eyebrow,.split-h,.section-head{break-after:avoid;page-break-after:avoid}
  p,li,blockquote{orphans:3;widows:3}            /* never one line of a paragraph on its own */

  /* keep anything boxed in one piece */
  figure,table,img,.card,.quote,.callout,.note,.faq,.step-card,.role-card,.post-card,
  .link-card,.go-card,.stat,.art,.split,.reports>*,.price-line,.price-tag{
    break-inside:avoid;page-break-inside:avoid}
  tr,td,th{break-inside:avoid}
  thead{display:table-header-group}              /* repeat the header on a table that runs over */
  img{max-width:100%!important;height:auto!important}
  .hero-art,.art{max-height:70mm}
  .hero-art img,.art img{max-height:70mm;width:auto;object-fit:contain}
  .ph,.ph-hero,.ph-thumb{max-height:40mm;min-height:0!important}   /* a slot with no image yet */

  /* the brand colours in a coloured panel have to be told to print */
  .ic,.cover,.rolestrip,.orb,.stage-no,.profile-head,.btn-primary{
    -webkit-print-color-adjust:exact;print-color-adjust:exact}

  /* a link is not clickable on paper, so the ones that carry meaning show their address */
  a{text-decoration:none;color:inherit}
  .prose a[href^="/"]::after{content:" (belbin.scot" attr(href) ")";font-size:.82em;color:#545454}
  .prose a[href^="http"]:not([href*="belbin.scot"])::after{content:" (" attr(href) ")";font-size:.82em;color:#545454}

  /* A collapsed answer printed as a question with nothing under it: on the FAQs that was 93
     headings and no answers, and the onboarding and employability pages lost whole sections the
     same way. site.js opens every one for the print and closes them again afterwards, because CSS
     alone cannot reveal a closed <details>. These make an opened one look right on paper: no grey
     band behind it, no plus control, and a question never left at the foot of a page on its own. */
  .faq details[open]{background:transparent;margin:0;padding:0}
  .faq summary::after{display:none}
  summary{break-after:avoid;page-break-after:avoid}
}

/* where a hero offers several samples, a lead-in line names what they are so each button can be
   just the report's short name and the row still reads clearly */
.samples{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.samples-lead{flex:0 0 100%;font-size:.76rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--meta);font-weight:700}

.prose p.centre{text-align:center}

/* A link in running text is Belbin green, bold, and underlines on hover. Most of the copy came off
   the live site with the link wrapped in <strong> and some without, which read as two styles on the
   same page; the weight is set here so every in-text link matches whatever the markup says. */
.prose a.inlink,.prose a.inlink strong,.prose a.inlink b,
.card a.inlink,.card a.inlink strong,.card a.inlink b{font-weight:700}

/* a section whose cards run the full width: the heading, the picture and the line that introduces
   them all centre together, while the cards keep their own left-aligned text */
.stacked>.split-h{text-align:center}
.stacked>.prose{text-align:center;max-width:780px;margin-left:auto;margin-right:auto}
.stacked>.prose>ul,.stacked>.prose>ol{text-align:left;display:inline-block}
.stacked .cards{text-align:left}
.wide-fig{display:flex;justify-content:center;margin:0 auto 26px}
.wide-fig .art{max-width:320px}

/* multiply blends an image with its backdrop inside the nearest stacking context, and a sticky
   media column makes one - so on a shaded section that column carries the band colour itself,
   and the white corners of a render still disappear into the band. */
.section.tint .split-media,.section.tint .wide-fig{background:var(--band)}

/* an article reads as one column: on a blog post the hero text is left-aligned, so the body below
   it starts at the same edge rather than being centred 150px to its right. The related cards and
   the testimonials band keep their own alignment. */
.post .section .prose{margin-left:0;margin-right:0}
/* and a picture beside the text would break that column, so on a post a split stacks: the picture
   above, the words below, both starting at the same edge as the heading. Two posts use one. */
.post .split{grid-template-columns:1fr;gap:26px;max-width:820px;margin-left:0;margin-right:0}
.post .split .split-media,.post .split.flip .split-media{order:0}
.post .split .art{margin-left:0}
/* the same goes for a video or any other panel in the middle of an article */
.post .section:not(.related) .vids,.post .section:not(.related) .vid,
.post .section:not(.related) .faq,.post .section:not(.related) .quotes{margin-left:0;margin-right:0}
/* an article's own sub-headings are part of the column, not centred banners over it */
.post .section:not(.related) .section-head{text-align:left;max-width:820px;margin:0 0 20px}
/* and its sections are paragraphs of one piece, not the site's full-height bands: 92px top and
   bottom put 184px of white space between one part of an article and the next */
.post .section:not(.related){padding:38px 0}
/* :first-of-type never matched here - the hero is the first <section> - so the hero's own 80px
   of bottom padding was still pushing the article down the page */
.post .hero{padding-bottom:22px}
.post .hero+.section{padding-top:12px}
/* a heading that is entirely a link is still a heading: it keeps the heading's colour and shows
   that it is a link on hover. One green item among nine black ones in a numbered list, otherwise */
.post h2>a.inlink:only-child{color:inherit;font-weight:inherit}
.post h2>a.inlink:only-child:hover{color:var(--green)}

/* each case study's own heading in Belbin green, so the eight read as a set apart from the
   section heading above them */
/* ...and the same on the pages listed in GREEN_HEADS, where the cards carry the substance of the
   page rather than a list of features */
#case-studies .card h3,.section.gh .card h3{color:var(--green)}
/* a heading and one short paragraph introducing the section below it: drop its own bottom padding
   and pull the paragraph up under the heading so the lead-in does not float in white space */
.section.lead{padding:64px 0 0}
.section.lead .section-head{margin-bottom:24px}
/* a section often stacks several card grids rather than one long one - the live pages put each pair
   in its own row - and with nothing between them the cards touch. */
.cards+.cards{margin-top:32px}

/* a grid of a few words a card: narrower than the page and centred, so four short labels read as a
   set rather than a thin strip stretched across the full width */
.cards.tight{max-width:720px;margin-left:auto;margin-right:auto}
.cards.tight .card{text-align:center}

/* ===== Site search =====
   A magnifier at the end of the menu opens a panel over the page, as on the White Cube site.
   Colours are the palette tokens only: Belbin green for the focus ring and the highlight, the
   existing greys for everything else. */
.search-open{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:0;background:none;color:var(--ink);cursor:pointer;border-radius:50%}
/* 44 square: the Buy button beside it is 46 tall, so a 38px circle read as the lighter of the
   two, and 44 is the smallest comfortable target for a finger. */
.search-open svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.search-open:hover,.search-open:focus-visible{background:var(--band);color:var(--green)}

body.search-on{overflow:hidden}
.searchbox{position:fixed;inset:0;z-index:200}
.search-back{position:absolute;inset:0;background:rgba(33,33,33,.38)}
.search-panel{position:relative;max-width:720px;margin:10vh auto 0;background:#fff;
  border-radius:var(--radius);box-shadow:0 30px 80px -30px rgba(0,0,0,.45);overflow:hidden}
.search-top{display:flex;align-items:center;gap:12px;padding:16px 18px;
  border-bottom:1px solid var(--line)}
.search-ic{width:22px;height:22px;flex:0 0 auto;fill:none;stroke:var(--meta);stroke-width:2;
  stroke-linecap:round}
.search-in{flex:1;border:0;outline:0;font:inherit;font-size:1.12rem;color:var(--ink);
  background:none;padding:6px 0}
.search-in::placeholder{color:var(--meta)}
.search-in::-webkit-search-cancel-button{display:none}
.search-x{border:0;background:none;color:var(--meta);cursor:pointer;padding:6px;border-radius:8px;
  display:inline-flex}
.search-x svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round}
.search-x:hover,.search-x:focus-visible{background:var(--band);color:var(--ink)}

.search-body{max-height:62vh;overflow:auto}
.search-note{padding:30px 24px;text-align:center;color:var(--meta);font-size:1rem;margin:0}
.search-list{list-style:none;margin:0;padding:6px}
.search-list a{display:block;padding:12px 14px;border-radius:12px;text-decoration:none;color:inherit}
.search-list a:hover,.search-list a.on,.search-list a:focus-visible{background:var(--band)}
.search-list .s-tag{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--green);font-weight:700;margin-bottom:3px}
.search-list .s-t{display:block;font-weight:700;color:var(--ink);font-size:1.02rem;line-height:1.35}
.search-list .s-d{display:block;color:var(--meta);font-size:.9rem;line-height:1.45;margin-top:3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.search-list mark{background:none;color:var(--green);font-weight:700}   /* the matched words in Belbin green, not a highlighter: a tinted background would mean
      inventing a pale green, and the palette does not have one */

@media (max-width:860px){
  .search-panel{margin:0;max-width:none;height:100%;border-radius:0}
  .search-body{max-height:calc(100% - 68px)}
}
@media print{.search-open,.searchbox{display:none!important}}