/* ============================================================
   ABS Limited - abslimited.co.uk
   Draft 1 - September 2026
   Palette and typography are fixed by the ABS Brand Guidelines
   (2026). Do not substitute colours or faces.
   Accessibility notes:
     - Forest Green #5F9448 is a FILL colour. White text on it is
       3.61:1 and fails WCAG AA. Text-bearing green surfaces use
       Deep Forest #3E6A2F (6.35:1) or darker.
     - Graphite #9FA5A8 is 2.49:1 on white. Rules and icon strokes
       only, never body copy.
   ============================================================ */

/* ---------- 1. Tokens ---------- */
:root{
  /* Brand palette - verbatim from the guidelines */
  --brand-forest:#5F9448;
  --brand-forest-deep:#3E6A2F;
  --brand-slate-grey:#3D3D3D;
  --brand-slate-blue:#5C7E93;
  --brand-linen:#F9F1E8;
  --brand-silver:#D3D3D3;
  --brand-graphite:#9FA5A8;
  --brand-night:#2A2A2A;
  --brand-bronze:#B58A52;
  --brand-burgundy:#7B4C4C;

  /* Derived steps. Kept inside the brand hues, added only where the
     palette has no legible option. */
  --forest-darker:#32571F;   /* button hover, deep grounds */
  --forest-deepest:#1E3614;  /* hero ground */
  --sage:#8FBF77;            /* accent on dark grounds only */
  --linen-deep:#F1E6D8;      /* alternating band */

  /* Semantic - LIGHT (default, and the only fully-defined set) */
  --bg:#FFFFFF;
  --bg-alt:var(--brand-linen);
  --bg-band:var(--linen-deep);
  --bg-inverse:var(--forest-deepest);
  --surface:#FFFFFF;
  --surface-sunk:#FAF7F2;
  --ink:var(--brand-night);
  --ink-muted:#4F5A4E;       /* green-biased mid; 7.4:1 on linen */
  --ink-inverse:#F3EFE7;
  --ink-inverse-muted:#C6D4BC;
  --line:#E2DACD;
  --line-strong:#CFC5B4;
  --line-inverse:#3A5730;
  --accent:var(--brand-forest);
  --accent-text:var(--brand-forest-deep);   /* accent used as text */
  --accent-on-dark:var(--sage);
  --btn-bg:var(--brand-forest-deep);
  --btn-bg-hover:var(--forest-darker);
  --btn-ink:#FFFFFF;
  --focus:var(--brand-slate-blue);
  --info:var(--brand-slate-blue);
  --warn:#C8A24B;
  --err:#B85C5C;
  --shadow-card:0 1px 2px rgba(42,42,42,.04), 0 8px 24px -12px rgba(42,42,42,.14);
  --shadow-lift:0 2px 4px rgba(42,42,42,.06), 0 20px 48px -20px rgba(42,42,42,.28);

  /* Type */
  --font-display:'Plus Jakarta Sans','Helvetica Neue',Arial,sans-serif;
  --font-body:'Inter','Helvetica Neue',Arial,sans-serif;
  --font-hand:'Caveat','Segoe Print',cursive;

  /* Scale - 1.25 major third, clamped */
  --t-xs:0.75rem;
  --t-sm:0.875rem;
  --t-base:1.0625rem;
  --t-md:clamp(1.125rem,1rem + .4vw,1.25rem);
  --t-lg:clamp(1.35rem,1.15rem + .8vw,1.6rem);
  --t-xl:clamp(1.7rem,1.35rem + 1.6vw,2.25rem);
  --t-2xl:clamp(2.1rem,1.5rem + 2.6vw,3rem);
  --t-3xl:clamp(2.6rem,1.6rem + 4.4vw,4.25rem);
  --t-num:clamp(2.4rem,1.6rem + 3.4vw,3.6rem);

  --measure:64ch;
  --wrap:1200px;
  --wrap-narrow:760px;
  --r-sm:6px;
  --r:10px;
  --r-lg:18px;
  --nav-h:112px;
}

@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#141A11;
    --bg-alt:#1A2116;
    --bg-band:#1E2619;
    --bg-inverse:#0E1309;
    --surface:#1E2619;
    --surface-sunk:#182013;
    --ink:#EFEBE2;
    --ink-muted:#B4BFAE;
    --ink-inverse:#EFEBE2;
    --ink-inverse-muted:#B4BFAE;
    --line:#2E3A28;
    --line-strong:#3F4E37;
    --line-inverse:#2E3A28;
    --accent:var(--sage);
    --accent-text:var(--sage);
    --btn-bg:var(--brand-forest);
    --btn-bg-hover:var(--sage);
    --btn-ink:#12180F;
    --focus:#9FC7DE;
    --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
    --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.8);
  }
}
:root[data-theme="dark"]{
  --bg:#141A11; --bg-alt:#1A2116; --bg-band:#1E2619; --bg-inverse:#0E1309;
  --surface:#1E2619; --surface-sunk:#182013;
  --ink:#EFEBE2; --ink-muted:#B4BFAE;
  --ink-inverse:#EFEBE2; --ink-inverse-muted:#B4BFAE;
  --line:#2E3A28; --line-strong:#3F4E37; --line-inverse:#2E3A28;
  --accent:var(--sage); --accent-text:var(--sage);
  --btn-bg:var(--brand-forest); --btn-bg-hover:var(--sage); --btn-ink:#12180F;
  --focus:#9FC7DE;
  --shadow-card:0 1px 2px rgba(0,0,0,.4), 0 8px 24px -12px rgba(0,0,0,.6);
  --shadow-lift:0 2px 4px rgba(0,0,0,.5), 0 20px 48px -20px rgba(0,0,0,.8);
}

/* ---------- 2. Reset and base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font-body); font-size:var(--t-base); line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:var(--font-display); line-height:1.08; margin:0; text-wrap:balance}
h1{font-size:var(--t-3xl); font-weight:800; letter-spacing:-.035em}
h2{font-size:var(--t-2xl); font-weight:800; letter-spacing:-.028em}
h3{font-size:var(--t-lg); font-weight:700; letter-spacing:-.015em}
h4{font-size:var(--t-md); font-weight:700; letter-spacing:-.01em}
p{margin:0}
img,svg,video{max-width:100%; display:block}
a{color:var(--accent-text); text-decoration-thickness:1px; text-underline-offset:.18em}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:3px solid var(--focus); outline-offset:3px; border-radius:2px}
ul,ol{margin:0; padding:0}
li{list-style:none}
button{font:inherit; color:inherit}
hr{border:0; border-top:1px solid var(--line); margin:0}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.wrap-narrow{max-width:var(--wrap-narrow); margin-inline:auto; padding-inline:clamp(20px,5vw,40px)}
.measure{max-width:var(--measure)}
.section{padding-block:clamp(56px,8vw,104px)}
.section--tight{padding-block:clamp(40px,5vw,64px)}
section[id]{scroll-margin-top:calc(var(--nav-h) + 18px)}
.band-alt{background:var(--bg-alt)}
.band-sunk{background:var(--bg-band)}
.stack{display:flex; flex-direction:column}
.gap-xs{gap:8px} .gap-sm{gap:14px} .gap{gap:22px} .gap-lg{gap:34px} .gap-xl{gap:52px}
.skip{position:absolute; left:-9999px}
.skip:focus{left:12px; top:12px; z-index:200; background:var(--btn-bg); color:var(--btn-ink);
  padding:12px 18px; border-radius:var(--r); font-weight:600}
.vh{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- 3. Eyebrow with the ABS bar motif ---------- */
/* Three rounded bars (rx=2), matching the logo corners - Jude round 2. */
.eyebrow{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-size:var(--t-xs); font-weight:600;
  letter-spacing:.16em; text-transform:uppercase; color:var(--ink-muted);
}
.eyebrow::before{
  content:""; inline-size:18px; block-size:12px; flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%226%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3C%2Fsvg%3E") center/18px 12px no-repeat;
}
.eyebrow--on-dark{color:var(--ink-inverse-muted)}
.eyebrow--on-dark::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%226%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3C%2Fsvg%3E")}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .eyebrow::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%226%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3C%2Fsvg%3E")}
}
:root[data-theme="dark"] .eyebrow::before{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2012%22%3E%3Crect%20x%3D%220%22%20y%3D%224%22%20width%3D%224%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%227%22%20y%3D%220%22%20width%3D%224%22%20height%3D%2212%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2214%22%20y%3D%226%22%20width%3D%224%22%20height%3D%226%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3C%2Fsvg%3E")}

/* ---------- 4. Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  white-space:nowrap;
  font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  letter-spacing:-.005em; text-decoration:none; cursor:pointer;
  padding:14px 24px; border-radius:var(--r); border:1.5px solid transparent;
  background:var(--btn-bg); color:var(--btn-ink);
  transition:background .16s ease, transform .16s ease, box-shadow .16s ease;
}
.btn:hover{background:var(--btn-bg-hover); text-decoration:none}
.btn:active{transform:translateY(1px)}
.btn--lg{padding:17px 30px; font-size:var(--t-base)}
.btn--ghost{background:transparent; color:var(--accent-text); border-color:var(--line-strong)}
.btn--ghost:hover{background:var(--surface-sunk); border-color:var(--accent)}
.btn--on-dark{background:var(--sage); color:#12180F}
.btn--on-dark:hover{background:#A6CE90}
.btn--ghost-dark{background:transparent; color:var(--ink-inverse); border-color:var(--line-inverse)}
.btn--ghost-dark:hover{background:rgba(255,255,255,.07); border-color:var(--sage)}
.btn .arw{transition:transform .16s ease}
.btn:hover .arw{transform:translateX(3px)}
@media (prefers-reduced-motion:reduce){.btn,.btn .arw{transition:none}}

/* ---------- 5. Header / sticky nav ---------- */
.hdr{
  position:sticky; top:0; z-index:100;
  background:color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter:blur(10px) saturate(1.1);
  border-bottom:1px solid var(--line);
}
@supports not (backdrop-filter:blur(2px)){.hdr{background:var(--bg)}}
.hdr__in{
  max-width:var(--wrap); margin-inline:auto; padding-inline:clamp(20px,5vw,40px);
  min-height:var(--nav-h); display:flex; align-items:center; gap:clamp(12px,2vw,28px);
}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; flex:none}
.brand img{block-size:60px; inline-size:auto}
.brand__txt{display:none}
@media (min-width:420px){.brand__txt{display:block}}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:2.2rem;
  letter-spacing:.06em; color:var(--ink); line-height:1; display:block}
.brand__sub{font-size:.72rem; font-weight:600; letter-spacing:.15em; text-transform:uppercase;
  color:var(--ink-muted); line-height:1.5; display:block; margin-top:4px}
@media (max-width:1180px){
  .brand img{block-size:50px}
  .brand__name{font-size:1.85rem}
  .brand__sub{font-size:.62rem; letter-spacing:.13em}
}
@media (max-width:640px){
  .brand img{block-size:44px}
  .brand__name{font-size:1.6rem}
}
@media (max-width:460px){.brand__sub{display:none}}

/* The header is deliberately tall so the logo lands with weight on arrival.
   Once the visitor scrolls it condenses, so it is not eating a third of a
   phone screen for the rest of the page. */
.hdr{transition:min-height .18s ease}
.hdr__in{transition:min-height .18s ease}
.hdr.is-condensed .hdr__in{min-height:78px}
.hdr.is-condensed .brand img{block-size:44px}
.hdr.is-condensed .brand__name{font-size:1.6rem}
.hdr.is-condensed .brand__sub{font-size:.58rem}
.hdr .brand img, .hdr .brand__name, .hdr .brand__sub{
  transition:block-size .18s ease, font-size .18s ease;
}
@media (prefers-reduced-motion:reduce){
  .hdr, .hdr__in, .hdr .brand img, .hdr .brand__name, .hdr .brand__sub{transition:none}
}

.nav{margin-inline-start:auto; display:none}
@media (min-width:1024px){.nav{display:block}}
.nav__list{display:flex; align-items:center; gap:clamp(2px,.6vw,10px)}
.nav__link{
  display:inline-flex; align-items:center; gap:6px;
  font-family:var(--font-display); font-weight:600; font-size:.875rem;
  color:var(--ink); text-decoration:none; padding:10px 10px; border-radius:var(--r-sm);
  white-space:nowrap;
}
.nav__link:hover{color:var(--accent-text); background:var(--surface-sunk); text-decoration:none}
.nav__link[aria-current="page"]{color:var(--accent-text)}
.nav__link[aria-current="page"]::after{
  content:""; position:absolute; inset-inline:10px; bottom:-1px; block-size:2px; background:var(--accent)
}
.nav__item{position:relative}
.nav__link .chev{transition:transform .16s ease}
.nav__item--open .chev{transform:rotate(180deg)}

.mega{
  position:absolute; top:calc(100% + 10px); inset-inline-start:-14px; z-index:110;
  min-inline-size:min(560px,86vw); padding:12px;
  background:var(--brand-night); border:1px solid #454545; border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift);
  display:grid; grid-template-columns:1fr 1fr; gap:4px;
}
.mega[hidden]{display:none}
.mega__item{display:grid; gap:2px; padding:12px 14px; border-radius:var(--r); border-inline-start:3px solid var(--brand-forest); text-decoration:none}
.mega__item:hover{background:#383D38; text-decoration:none}
.mega__item b{font-family:var(--font-display); font-weight:700; font-size:.92rem; color:#F3EFE7}
.mega__item span{font-size:.8rem; color:#C6D4BC; line-height:1.45}

.hdr__actions{display:flex; align-items:center; gap:8px; margin-inline-start:auto}
@media (min-width:1024px){.hdr__actions{margin-inline-start:0}}
.iconbtn{
  display:grid; place-items:center; inline-size:42px; block-size:42px;
  background:transparent; border:1.5px solid var(--line); border-radius:var(--r);
  cursor:pointer; color:var(--ink);
}
.iconbtn:hover{border-color:var(--accent); color:var(--accent-text)}
.hdr__cta{display:none}
@media (min-width:640px){.hdr__cta{display:inline-flex}}
.burger{display:grid}
@media (min-width:1024px){.burger{display:none}}

/* search drawer */
.searchbar{border-bottom:1px solid var(--line); background:var(--surface-sunk)}
.searchbar[hidden]{display:none}
.searchbar form{max-width:var(--wrap); margin-inline:auto; padding:16px clamp(20px,5vw,40px);
  display:flex; gap:10px}
.searchbar input{flex:1}

/* mobile menu */
.mnav{border-bottom:1px solid var(--line); background:var(--surface)}
.mnav[hidden]{display:none}
@media (min-width:1024px){.mnav{display:none!important}}
.mnav__in{padding:12px clamp(20px,5vw,40px) 24px; display:grid; gap:2px}
.mnav a{padding:13px 4px; font-family:var(--font-display); font-weight:600;
  color:var(--ink); text-decoration:none; border-bottom:1px solid var(--line)}
.mnav a.sub{padding-inline-start:22px; font-weight:500; font-size:.9rem; color:var(--ink-muted)}
.mnav .btn{margin-top:16px}

/* ---------- 6. Hero ---------- */
.hero{
  background:var(--hero-bg); color:var(--hero-ink);
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--hero-line);
}
/* ascending-bar motif - real elements so the corners can be rounded
   to match the logo. Decorative only, hidden from assistive tech. */
.hero__motif{
  position:absolute; inset-block-end:30px; inset-inline-end:-30px;
  inline-size:420px; block-size:190px; opacity:.16; pointer-events:none;
  display:flex; align-items:flex-end; gap:20px;
}
.hero__motif i{
  display:block; inline-size:56px; border-radius:16px;   /* all four, like the logo */
  background:var(--hero-motif);
}
.hero__motif i:nth-child(1){block-size:74px}
.hero__motif i:nth-child(2){block-size:124px}
.hero__motif i:nth-child(3){block-size:96px}
.hero__motif i:nth-child(4){block-size:158px}
@media (max-width:760px){.hero__motif{display:none}}
.hero__in{
  max-width:var(--wrap); margin-inline:auto; padding:clamp(44px,6vw,80px) clamp(20px,5vw,40px) clamp(52px,7vw,88px);
  display:grid; gap:clamp(32px,5vw,56px); align-items:center; position:relative; z-index:1;
}
@media (min-width:960px){.hero__in{grid-template-columns:minmax(0,1fr) minmax(0,1.06fr)}}
.hero h1{color:var(--hero-ink)}
.hero h1 em{font-style:normal; color:var(--hero-em)}
.hero__lede{font-size:var(--t-md); color:var(--hero-ink-muted); max-width:46ch; margin-top:20px}
.hero__lede strong{color:var(--hero-ink); font-weight:600}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:30px}
.hero__note{margin-top:22px; font-size:var(--t-sm); color:var(--hero-ink-muted)}

@media (prefers-reduced-motion:no-preference){
  .hero__in > div:first-child{animation:hero-arrive .65s ease-out both}
  .hero__in .vplayer{animation:hero-arrive .8s cubic-bezier(.2,.8,.2,1) .12s both}
  @keyframes hero-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
}

/* video */
.vplayer{
  position:relative; border-radius:var(--r-lg); overflow:hidden;
  background:#0B0F08; border:1px solid var(--line-inverse); box-shadow:var(--shadow-lift);
  aspect-ratio:16/9;
}
.vplayer img,.vplayer video{inline-size:100%; block-size:100%; object-fit:cover}
.vplayer video{display:none}
.vplayer.is-playing video{display:block}
.vplayer.is-playing .vplayer__ui{display:none}
.vplayer__ui{
  position:absolute; inset:0; display:grid; place-items:center;
  border:0; padding:0; cursor:pointer; inline-size:100%;
  background:linear-gradient(180deg, rgba(11,15,8,.12) 0%, rgba(11,15,8,.55) 100%);
}
.vplayer__ui:hover .vplayer__play{transform:scale(1.06); background:var(--sage)}
.vplayer__play{
  inline-size:76px; block-size:76px; border-radius:50%;
  background:rgba(249,241,232,.94); color:var(--forest-deepest);
  display:grid; place-items:center; transition:transform .18s ease, background .18s ease;
  box-shadow:0 10px 30px -8px rgba(0,0,0,.6);
}
.vplayer__cap{
  position:absolute; inset-inline:0; inset-block-end:0; padding:16px 20px;
  display:flex; align-items:baseline; justify-content:space-between; gap:12px;
  font-size:var(--t-sm); color:#F3EFE7; text-align:start;
}
.vplayer__cap b{font-family:var(--font-display); font-weight:700}
.vplayer__cap span{font-variant-numeric:tabular-nums; color:#C6D4BC; flex:none}
@media (prefers-reduced-motion:reduce){.vplayer__play,.vplayer__ui:hover .vplayer__play{transition:none;transform:none}}

/* ---------- 7. Symptom picker (the "what's not working" tool) ---------- */
.picker{display:grid; gap:clamp(24px,4vw,44px)}
@media (min-width:900px){.picker{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr); align-items:start}}
.picker__list{display:grid; gap:8px}
.symptom{
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:14px;
  inline-size:100%; text-align:start; cursor:pointer;
  padding:16px 18px; border-radius:var(--r); border:1.5px solid var(--line);
  background:var(--surface); color:var(--ink);
  font-family:var(--font-display); font-weight:600; font-size:.98rem; line-height:1.3;
  transition:border-color .14s ease, background .14s ease;
}
.symptom:hover{border-color:var(--accent)}
.symptom__dot{
  inline-size:11px; block-size:11px; border-radius:3px; flex:none;
  background:var(--line-strong); transition:background .14s ease;
}
.symptom__arw{opacity:0; color:var(--accent-text); transition:opacity .14s ease}
.symptom[aria-selected="true"]{border-color:var(--accent); background:var(--surface-sunk)}
.symptom[aria-selected="true"] .symptom__dot{background:var(--accent)}
.symptom[aria-selected="true"] .symptom__arw{opacity:1}

.answer{
  border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:clamp(24px,3.5vw,38px); box-shadow:var(--shadow-card);
  display:grid; gap:18px; align-content:start;
}
.answer__head{display:flex; align-items:center; gap:14px}
.answer__ico{
  inline-size:52px; block-size:52px; border-radius:var(--r); flex:none;
  display:grid; place-items:center; background:var(--surface-sunk); border:1px solid var(--line);
}
.answer__ico svg{inline-size:30px; block-size:30px}
.answer h3{margin:0}
.answer__kicker{font-size:var(--t-xs); font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-muted)}
.answer__body{color:var(--ink-muted)}
.answer__body strong{color:var(--ink); font-weight:600}
.answer__foot{display:flex; flex-wrap:wrap; gap:12px; align-items:center; padding-top:4px}
.answer__pill{
  font-size:var(--t-xs); font-weight:600; letter-spacing:.06em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; background:var(--surface-sunk);
  border:1px solid var(--line); color:var(--ink-muted);
}

/* ---------- 8. Expertise grid ---------- */
.xgrid{display:grid; gap:18px}
@media (min-width:680px){.xgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.xgrid{grid-template-columns:repeat(3,1fr)}}
.xcard{
  display:grid; grid-template-rows:auto auto 1fr auto; gap:14px;
  padding:clamp(22px,2.5vw,30px); border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface); text-decoration:none; color:var(--ink);
  transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease;
}
.xcard:hover{border-color:var(--accent); box-shadow:var(--shadow-card); transform:translateY(-2px); text-decoration:none}
@media (prefers-reduced-motion:reduce){.xcard,.xcard:hover{transition:none;transform:none}}
.xcard__ico{inline-size:46px; block-size:46px}
.xcard h3{color:var(--ink)}
.xcard p{color:var(--ink-muted); font-size:var(--t-sm); line-height:1.6}
.xcard__more{font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  color:var(--accent-text); display:inline-flex; align-items:center; gap:7px}
.xcard--featured{border-color:var(--line-strong); background:var(--surface-sunk)}
.xcard__partner{block-size:26px; inline-size:auto; opacity:.9}

/* ---------- 9. Numbers + credibility ---------- */
/* Big numbers - separate bold boxes rather than one divided slab, each
   carrying a different colour from the palette so the row has rhythm. */
.numbers{display:grid; gap:16px}
@media (min-width:560px){.numbers{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.numbers{grid-template-columns:repeat(4,1fr)}}
.numbers__cell{
  background:var(--surface); padding:clamp(24px,3vw,32px);
  border:2px solid var(--num-tint, var(--accent)); border-radius:var(--r-lg);
  display:grid; gap:8px; align-content:start; position:relative; overflow:hidden;
}
.numbers__cell::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:6px;
  background:var(--num-tint, var(--accent));
}
.numbers__cell:nth-child(1){--num-tint:var(--brand-forest-deep)}
.numbers__cell:nth-child(2){--num-tint:var(--brand-slate-blue)}
.numbers__cell:nth-child(3){--num-tint:var(--brand-bronze)}
.numbers__cell:nth-child(4){--num-tint:var(--brand-forest)}
.numbers__fig{
  font-family:var(--font-display); font-weight:800; font-size:var(--t-num);
  letter-spacing:-.04em; line-height:1; color:var(--num-tint, var(--accent-text));
  font-variant-numeric:tabular-nums; margin-top:6px;
}
.numbers__lbl{font-size:var(--t-sm); color:var(--ink-muted); line-height:1.45}
/* the bronze and forest tints are too light on a dark ground - lift them */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .numbers__cell:nth-child(1){--num-tint:#8FBF77}
  :root:not([data-theme="light"]) .numbers__cell:nth-child(2){--num-tint:#9FC7DE}
  :root:not([data-theme="light"]) .numbers__cell:nth-child(3){--num-tint:#D9B27A}
  :root:not([data-theme="light"]) .numbers__cell:nth-child(4){--num-tint:#A6CE90}
}
:root[data-theme="dark"] .numbers__cell:nth-child(1){--num-tint:#8FBF77}
:root[data-theme="dark"] .numbers__cell:nth-child(2){--num-tint:#9FC7DE}
:root[data-theme="dark"] .numbers__cell:nth-child(3){--num-tint:#D9B27A}
:root[data-theme="dark"] .numbers__cell:nth-child(4){--num-tint:#A6CE90}
.tbd{
  display:inline-block; padding:0 .22em; border-radius:3px;
  background:repeating-linear-gradient(45deg,#C8A24B22,#C8A24B22 6px,#C8A24B44 6px,#C8A24B44 12px);
  box-shadow:inset 0 0 0 1.5px #C8A24B; color:var(--ink);
}
.tbd-note{
  display:inline-flex; align-items:center; gap:8px; font-size:var(--t-xs); font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:#8A6A28;
  background:#C8A24B1F; border:1px solid #C8A24B66; padding:7px 13px; border-radius:999px;
}
:root[data-theme="dark"] .tbd-note,
:root:not([data-theme="light"]) .tbd-note{color:#DFBC6A}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .tbd-note{color:#8A6A28}}

.cred{display:flex; flex-wrap:wrap; align-items:center; gap:10px 26px}
.cred__item{
  display:inline-flex; align-items:center; gap:9px; font-size:var(--t-sm);
  font-weight:600; color:var(--ink-muted); font-family:var(--font-display);
}
.cred__item svg{inline-size:18px; block-size:18px; color:var(--accent); flex:none}

/* ---------- 9b. Proof strip ---------- */
.trust-strip{background:var(--surface); border-block:1px solid var(--line)}
.trust-strip__grid{display:grid; grid-template-columns:repeat(4,minmax(0,1fr))}
.trust-strip__item{display:grid; align-content:center; gap:6px; min-height:112px; padding:22px 24px; border-inline-start:1px solid var(--line)}
.trust-strip__item:first-child{border-inline-start:0; padding-inline-start:0}
.trust-strip__item strong{font-family:var(--font-display); font-size:var(--t-xl); line-height:1.05; color:var(--accent-text); font-variant-numeric:tabular-nums}
.trust-strip__item span{font-size:var(--t-sm); line-height:1.45; color:var(--ink-muted)}
@media (max-width:820px){
  .trust-strip__grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .trust-strip__item{min-height:100px; padding:18px}
  .trust-strip__item:nth-child(odd){border-inline-start:0; padding-inline-start:0}
  .trust-strip__item:nth-child(n+3){border-block-start:1px solid var(--line)}
}
@media (max-width:420px){
  .trust-strip__item{padding-inline:12px}
  .trust-strip__item strong{font-size:var(--t-lg)}
}



/* ---------- 10. Quote / proof ---------- */
.quote{
  display:grid; gap:20px; padding:clamp(26px,3.5vw,44px);
  border-radius:var(--r-lg); background:var(--bg-inverse); color:var(--ink-inverse);
  align-content:start;
}
.quote blockquote{margin:0; font-family:var(--font-display); font-weight:700;
  font-size:var(--t-lg); letter-spacing:-.02em; line-height:1.28; color:#fff; text-wrap:pretty}
@media (min-width:1040px){.quote blockquote{font-size:var(--t-xl)}}
.quote figcaption{font-size:var(--t-sm); color:var(--ink-inverse-muted)}
.quote figcaption b{font-weight:600}

/* ---------- 11. Split CTA ---------- */
.cta{display:grid; gap:clamp(24px,4vw,48px); align-items:center}
@media (min-width:860px){.cta{grid-template-columns:1.15fr .85fr}}
.cta__panel{
  border:1.5px solid var(--line); border-radius:var(--r-lg); background:var(--surface);
  padding:clamp(24px,3vw,34px); display:grid; gap:16px; box-shadow:var(--shadow-card);
}
.field{display:grid; gap:7px}
.field > label{font-size:var(--t-sm); font-weight:600; font-family:var(--font-display)}
.field .hint{font-size:var(--t-xs); color:var(--ink-muted)}
input,select,textarea{
  font:inherit; font-size:var(--t-sm); color:var(--ink); background:var(--bg);
  border:1.5px solid var(--line-strong); border-radius:var(--r); padding:12px 14px; inline-size:100%;
}
input:focus,select,textarea:focus{border-color:var(--accent)}
textarea{min-block-size:110px; resize:vertical}
select{appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--ink-muted) 50%),
  linear-gradient(135deg,var(--ink-muted) 50%,transparent 50%);
  background-position:calc(100% - 20px) 55%, calc(100% - 14px) 55%;
  background-size:6px 6px,6px 6px; background-repeat:no-repeat; padding-inline-end:40px}

/* ---------- 12. Footer ---------- */
.ftr{background:var(--bg-inverse); color:var(--ink-inverse); padding-block:clamp(48px,6vw,72px) 28px}
.ftr__grid{display:grid; gap:clamp(28px,4vw,48px)}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.3fr 1fr 1fr 1fr}}
.ftr h4{color:#fff; font-size:var(--t-sm); letter-spacing:.1em; text-transform:uppercase; margin-bottom:14px}
.ftr a{color:var(--ink-inverse-muted); text-decoration:none; font-size:var(--t-sm)}
.ftr a:hover{color:#fff; text-decoration:underline}
.ftr ul{display:grid; gap:9px}
.ftr__brand img{block-size:64px; inline-size:auto; margin-bottom:8px}
.ftr__blurb{font-size:var(--t-sm); color:var(--ink-inverse-muted); max-width:34ch}
.ftr__sibs{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px}
.ftr .ftr__sib{border:1px solid var(--line-inverse); border-radius:var(--r); padding:8px 13px;
  font-family:var(--font-display); font-weight:700; font-size:.78rem; color:var(--ink-inverse-muted)}
.ftr a.ftr__sib:hover{border-color:var(--sage); color:#fff; text-decoration:none}
.ftr__base{margin-top:clamp(36px,5vw,56px); padding-top:22px; border-top:1px solid var(--line-inverse);
  display:flex; flex-wrap:wrap; gap:10px 26px; align-items:center; justify-content:space-between;
  font-size:var(--t-xs); color:var(--ink-inverse-muted)}
.ftr__legal{display:flex; flex-wrap:wrap; gap:8px 20px}

/* ---------- 13. Talk-to-us launcher + chat panel ---------- */
.talk{
  position:fixed; inset-block-end:22px; inset-inline-end:22px; z-index:120;
  display:inline-flex; align-items:center; gap:11px;
  padding:14px 20px 14px 17px; border-radius:999px; border:0; cursor:pointer;
  background:var(--btn-bg); color:var(--btn-ink);
  font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  box-shadow:0 8px 28px -6px rgba(30,54,20,.55);
}
.talk:hover{background:var(--btn-bg-hover)}
/* display:inline-flex above beats the browser's own [hidden] rule, so say it:
   once tawk.to has loaded, its button replaces this one (Phil, 2 Nov) */
.talk[hidden]{display:none}
.talk__status{inline-size:9px; block-size:9px; border-radius:50%; background:#8FBF77; flex:none;
  box-shadow:0 0 0 3px rgba(143,191,119,.28)}
.talk[data-state="offline"] .talk__status{background:#C8A24B; box-shadow:0 0 0 3px rgba(200,162,75,.28)}
.chat{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:130;
  inline-size:min(374px,calc(100vw - 32px)); max-block-size:min(600px,calc(100vh - 40px));
  background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--r-lg);
  box-shadow:var(--shadow-lift); overflow:auto;
}
.chat[hidden]{display:none}
.chat__head{
  background:var(--bg-inverse); color:var(--ink-inverse); padding:18px 20px;
  display:flex; align-items:flex-start; gap:12px;
}
.chat__head h3{color:#fff; font-size:var(--t-md)}
.chat__head p{font-size:var(--t-xs); color:var(--ink-inverse-muted); margin-top:4px}
.chat__x{margin-inline-start:auto; background:transparent; border:0; color:var(--ink-inverse-muted);
  cursor:pointer; font-size:1.3rem; line-height:1; padding:2px 4px}
.chat__x:hover{color:#fff}
.chat__body{padding:20px; display:grid; gap:14px}
.chat__sla{
  font-size:var(--t-xs); color:var(--ink-muted); background:var(--surface-sunk);
  border:1px solid var(--line); border-radius:var(--r); padding:11px 13px;
}
.chat__sla b{color:var(--ink)}

/* ---------- 14. Page header (inner pages) ---------- */
.phead{position:relative; isolation:isolate; overflow:hidden; background:var(--brand-night); color:var(--ink-inverse);
  border-bottom:1px solid #454545; padding-block:clamp(40px,5vw,64px)}
.phead::before{content:""; position:absolute; z-index:-1; inset:0 0 auto; height:4px;
  background:linear-gradient(90deg,var(--brand-forest-deep) 0 26%,var(--brand-forest) 26% 52%,var(--brand-slate-blue) 52% 76%,var(--brand-bronze) 76%)}
.phead::after{content:""; position:absolute; z-index:-1; width:300px; aspect-ratio:1; inset-inline-end:4%; inset-block-start:50%;
  transform:translateY(-50%); background:url("../logos/abs-symbol-white.png") center/contain no-repeat; opacity:.055; pointer-events:none}
.phead h1{font-size:var(--t-2xl); color:var(--ink-inverse)}
.phead p{color:var(--ink-inverse-muted); font-size:var(--t-md); margin-top:14px; max-width:56ch}
.crumb{display:flex; gap:8px; font-size:var(--t-xs); color:var(--ink-inverse-muted); margin-bottom:14px}
.crumb a{color:var(--ink-inverse-muted)}
.phead .wrap{position:relative; z-index:1}
@media (max-width:600px){.phead::after{width:180px; inset-inline-end:-40px; opacity:.035}}

/* generic prose */
.prose{display:grid; gap:18px; max-width:var(--measure)}
.prose h2{margin-top:22px}
.prose h3{margin-top:14px}
.prose p,.prose li{color:var(--ink-muted)}
.prose ul{display:grid; gap:9px; padding-inline-start:2px}
.prose ul li{position:relative; padding-inline-start:20px}
.prose ul li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  inline-size:7px; block-size:7px; border-radius:3px; background:var(--accent);
}
.prose ul li b, .prose ul li strong{color:var(--ink); font-weight:600}

/* placeholder tiles for content we do not have yet */
.holder{
  border:1.5px dashed var(--line-strong); border-radius:var(--r-lg); background:var(--surface-sunk);
  padding:clamp(22px,3vw,32px); display:grid; gap:10px; align-content:start; min-block-size:170px;
}
.holder h3{color:var(--ink)}
.holder p{font-size:var(--t-sm); color:var(--ink-muted)}
.holder__tag{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em;
  text-transform:uppercase; color:#8A6A28}
:root[data-theme="dark"] .holder__tag{color:#DFBC6A}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .holder__tag{color:#DFBC6A}}

/* ---------- 15. Proof layout ---------- */
.proof{display:grid; gap:20px}
@media (min-width:720px){.proof{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){
  .proof{grid-template-columns:repeat(3,1fr)}
  .proof > .quote{grid-column:span 2}
}

/* prose lists also work when .prose is on the <ul> itself */
ul.prose{gap:9px}
ul.prose > li{position:relative; padding-inline-start:20px; color:var(--ink-muted)}
ul.prose > li::before{
  content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  inline-size:7px; block-size:7px; border-radius:3px; background:var(--accent);
}

@media (prefers-reduced-motion:no-preference){
  html.has-reveal [data-reveal]{opacity:0; transform:translateY(18px); transition:opacity .6s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
  html.has-reveal [data-reveal].is-visible{opacity:1; transform:none}
}

/* ---------- 16. Hero colour variants ----------------------------------
   Michelle's note on Draft 1 was that the green front page reads as
   "snot green". These four options run from most green to least, all
   inside the official palette, all contrast-checked against WCAG AA.

   Set on <html>: data-hero="forest" | "slate" | "slate-bronze" | "linen".
   Default (no attribute) is forest, i.e. Draft 1 as built.

   Contrast of the emphasised headline word on its ground:
     forest        Sage   #8FBF77 on #1E3614   6.21:1
     slate         Sage   #8FBF77 on #2A2A2A   6.76:1
     slate-bronze  Bronze #B58A52 on #2A2A2A   4.59:1
     linen         Deep Forest #3E6A2F on #F9F1E8  5.68:1
   -------------------------------------------------------------------- */
:root,
:root[data-hero="forest"]{
  --hero-bg:#1E3614;
  --hero-ink:#FFFFFF;
  --hero-ink-muted:#C6D4BC;
  --hero-em:#8FBF77;
  --hero-motif:#8FBF77;
  --hero-line:#3A5730;
  --hero-btn-bg:#8FBF77;
  --hero-btn-ink:#12180F;
  --quote-em:#8FBF77;
}
:root[data-hero="slate"]{
  --hero-bg:#2A2A2A;
  --hero-ink:#FFFFFF;
  --hero-ink-muted:#C4C8C6;
  --hero-em:#8FBF77;
  --hero-motif:#8FBF77;
  --hero-line:#3F3F3F;
  --hero-btn-bg:#8FBF77;
  --hero-btn-ink:#12180F;
  --bg-inverse:#2A2A2A;
  --line-inverse:#3F3F3F;
  --ink-inverse-muted:#C4C8C6;
  --quote-em:#8FBF77;
}
:root[data-hero="slate-bronze"]{
  --hero-bg:#2A2A2A;
  --hero-ink:#FFFFFF;
  --hero-ink-muted:#C4C8C6;
  --hero-em:#B58A52;
  --hero-motif:#B58A52;
  --hero-line:#3F3F3F;
  --hero-btn-bg:#F9F1E8;
  --hero-btn-ink:#2A2A2A;
  --bg-inverse:#2A2A2A;
  --line-inverse:#3F3F3F;
  --ink-inverse-muted:#C4C8C6;
  --quote-em:#B58A52;
}
:root[data-hero="linen"]{
  --hero-bg:#F9F1E8;
  --hero-ink:#2A2A2A;
  --hero-ink-muted:#4F5A4E;
  --hero-em:#3E6A2F;
  --hero-motif:#5F9448;
  --hero-line:#E2DACD;
  --hero-btn-bg:#3E6A2F;
  --hero-btn-ink:#FFFFFF;
  --bg-inverse:#2A2A2A;
  --line-inverse:#3F3F3F;
  --ink-inverse-muted:#C4C8C6;
  --quote-em:#8FBF77;
}
/* the light hero needs a dark equivalent so it is not a white slab at night */
@media (prefers-color-scheme:dark){
  :root[data-hero="linen"]:not([data-theme="light"]){
    --hero-bg:#1E2619; --hero-ink:#EFEBE2; --hero-ink-muted:#B4BFAE;
    --hero-em:#8FBF77; --hero-line:#2E3A28;
    --hero-btn-bg:#8FBF77; --hero-btn-ink:#12180F;
  }
}
:root[data-theme="dark"][data-hero="linen"]{
  --hero-bg:#1E2619; --hero-ink:#EFEBE2; --hero-ink-muted:#B4BFAE;
  --hero-em:#8FBF77; --hero-line:#2E3A28;
  --hero-btn-bg:#8FBF77; --hero-btn-ink:#12180F;
}

/* hero-scoped chrome, so the variant tokens reach the buttons and eyebrow */
.hero .eyebrow--on-dark{color:var(--hero-ink-muted)}

.hero .btn--on-dark{background:var(--hero-btn-bg); color:var(--hero-btn-ink)}
.hero .btn--on-dark:hover{filter:brightness(1.08)}
.hero .btn--ghost-dark{color:var(--hero-ink); border-color:var(--hero-line)}
.hero .btn--ghost-dark:hover{
  background:color-mix(in srgb, var(--hero-ink) 8%, transparent);
  border-color:var(--hero-motif);
}
.hero .vplayer{border-color:var(--hero-line)}
.quote figcaption b{color:var(--quote-em)}

/* footer lockup - same horizontal construction as the header */
.ftr__lockup{display:flex; align-items:center; gap:14px; margin-bottom:20px}
.ftr__lockup img{block-size:73px; inline-size:auto; margin:0}
.ftr__lockup .brand__name{color:#fff; font-size:2.2rem}
.ftr__lockup .brand__sub{color:var(--ink-inverse-muted)}

/* ---------- 17. Section tints ----------------------------------------
   Jude: keep using greens / secondary palette on the linen sections so
   the page breaks up. A tinted top rule plus a tinted eyebrow, rather
   than tinting whole blocks, which would fight the brand's calm. */
.band-alt, .band-sunk{position:relative}
.band-alt::before, .band-sunk::before{
  content:""; position:absolute; inset-block-start:0; inset-inline:0; block-size:4px;
  background:linear-gradient(90deg,
    var(--brand-forest-deep) 0 22%, var(--brand-forest) 22% 48%,
    var(--brand-slate-blue) 48% 74%, var(--brand-bronze) 74% 100%);
}
.section--tinted{--accent:var(--brand-slate-blue); --accent-text:#41606F}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .section--tinted{--accent:#9FC7DE; --accent-text:#9FC7DE}
}
:root[data-theme="dark"] .section--tinted{--accent:#9FC7DE; --accent-text:#9FC7DE}

/* ---------- 18. Partner logos ---------- */
.partners{display:flex; flex-wrap:wrap; align-items:center; gap:18px 34px}
.partners img{block-size:44px; inline-size:auto; padding:5px 10px; background:#fff; border:1px solid var(--line); border-radius:var(--r)}
.partner-holder{
  display:inline-flex; align-items:center; gap:9px; block-size:38px; padding:0 16px;
  border:1.5px dashed var(--line-strong); border-radius:var(--r);
  font-family:var(--font-display); font-weight:700; font-size:var(--t-sm);
  color:var(--ink-muted);
}

/* ---------- 19. Industry news (built from RSS at deploy) ---------- */
.newsgrid{display:grid; gap:14px}
@media (min-width:680px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.newsgrid{grid-template-columns:repeat(3,1fr)}}
.newsitem{
  display:grid; gap:9px; align-content:start; text-decoration:none;
  padding:20px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--surface);
  transition:border-color .16s ease, transform .16s ease;
}
.newsitem:hover{border-color:var(--accent); transform:translateY(-2px); text-decoration:none}
@media (prefers-reduced-motion:reduce){.newsitem,.newsitem:hover{transition:none;transform:none}}
.newsitem__src{
  font-size:var(--t-xs); font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-text);
}
.newsitem__title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  line-height:1.32; color:var(--ink); text-wrap:pretty;
}
.newsitem__date{font-size:var(--t-xs); color:var(--ink-muted); font-variant-numeric:tabular-nums}

/* ---------- 20. Insights: ABS content beside an industry rail ----------
   Two columns on desktop, stacked on mobile with the industry feed last -
   the rail is supporting material, so it should never push the ABS content
   down the page on a phone. */
.insights-split{display:grid; gap:clamp(34px,4vw,56px)}
@media (min-width:1000px){
  .insights-split{grid-template-columns:minmax(0,1.9fr) minmax(290px,0.9fr); align-items:start}
}
.insights-main{display:grid; gap:clamp(20px,2.6vw,30px); align-content:start}

.insights-rail{display:grid; gap:16px; align-content:start}
@media (min-width:1000px){
  .insights-rail{
    border-inline-start:1px solid var(--line);
    padding-inline-start:clamp(24px,2.6vw,36px);
  }
}
.insights-column__head{display:grid;gap:9px;padding-bottom:20px;border-bottom:1px solid var(--line)}
.insights-column__head h2{font-size:var(--t-xl)}
.insights-column__head > p:last-child{font-size:var(--t-sm);color:var(--ink-muted);max-width:48ch}
.insight-feed{display:grid;gap:12px}
.insight-card{position:relative;display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:start;
  padding:22px 24px;border:1px solid var(--line);border-inline-start:4px solid var(--brand-forest);
  border-radius:var(--r-lg);background:var(--surface);color:var(--ink);text-decoration:none;
  box-shadow:var(--shadow-card);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.insight-card:hover{transform:translateY(-3px);border-color:var(--brand-forest);box-shadow:var(--shadow-lift);text-decoration:none}
.insight-card--lead{background:var(--brand-night);border-color:var(--brand-night);color:var(--ink-inverse)}
.insight-card--lead:hover{border-color:var(--brand-forest)}
.insight-card__number{grid-row:span 3;font:700 1.8rem/1 var(--font-display);color:var(--brand-forest);font-variant-numeric:tabular-nums}
.insight-card__topic{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}
.insight-card--lead .insight-card__topic{color:var(--sage)}
.insight-card h3{font-size:1.12rem;line-height:1.25;margin-top:5px}
.insight-card p{grid-column:2;color:var(--ink-muted);font-size:var(--t-sm);line-height:1.5;margin-top:7px}
.insight-card--lead p{color:var(--ink-inverse-muted)}
.insight-card__link{grid-column:2;display:flex;justify-content:space-between;align-items:center;gap:12px;
  margin-top:16px;font:700 var(--t-xs)/1 var(--font-display);color:var(--accent-text)}
.insight-card--lead .insight-card__link{color:var(--sage)}
.insight-card__link b{font-size:1.3rem;line-height:.8;transition:transform .18s ease}
.insight-card:hover .insight-card__link b{transform:translateX(4px)}
.insight-feed__note{font-size:var(--t-xs);color:var(--ink-muted);padding-inline-start:4px}
@media (prefers-reduced-motion:reduce){.insight-card,.insight-card:hover,.insight-card__link b{transition:none;transform:none}}
.railhead{display:grid; gap:9px}
.railhead h2{font-size:var(--t-lg)}
.railhead p{font-size:var(--t-sm); color:var(--ink-muted); line-height:1.55}
.rail-note{font-size:var(--t-xs); color:var(--ink-muted); line-height:1.5}

/* two-up cards, because the main column is narrower than a full-width grid */
@media (min-width:640px){.xgrid--pair{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1040px){.xgrid--pair{grid-template-columns:repeat(2,1fr)}}

/* news items stack in the rail whatever the viewport - two class names, so
   this beats the base .newsgrid column rules without !important */
.newsgrid.newsgrid--rail{grid-template-columns:1fr; gap:10px}
.newsgrid--rail .newsitem{padding:15px 17px; gap:6px}
.newsgrid--rail .newsitem__title{font-size:.94rem; line-height:1.3}
.newsgrid--rail .newsitem__src{font-size:.66rem}

/* ---------- 21. Homepage ERP explainer and moving system map ---------- */
.erp-explainer{position:relative;overflow:hidden;background:var(--brand-night);color:var(--ink-inverse)}
.erp-explainer::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-forest-deep) 0 34%,var(--brand-forest) 34% 68%,var(--brand-slate-blue) 68%)}
.erp-explainer__layout{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(32px,6vw,76px);align-items:center}
.erp-explainer__copy{display:grid;justify-items:start;gap:18px}
.erp-explainer__copy .eyebrow{color:var(--ink-inverse-muted)}
.erp-explainer__copy h2{color:#fff;font-size:var(--t-2xl)}
.erp-explainer__copy > p:not(.eyebrow){color:#D0D6D0;font-size:var(--t-md);max-width:43ch}
.erp-flow{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:center;gap:14px;min-height:360px;
  margin:0;padding:92px clamp(18px,3vw,34px) 22px;border:1px solid #515753;border-radius:var(--r-lg);
  background:#343936;box-shadow:0 28px 60px -38px rgba(0,0,0,.8)}
.erp-flow__mark{position:absolute;z-index:-1;width:290px;height:290px;object-fit:contain;inset-inline-end:-68px;inset-block-end:-94px;opacity:.055}
.erp-flow__scribble{position:absolute;inset-block-start:14px;inset-inline-end:20px;color:#A6CE90;font:600 25px/1 var(--font-hand);transform:rotate(-4deg)}
.erp-flow__scribble svg{position:absolute;width:82px;height:42px;inset-block-start:22px;inset-inline-start:-78px;overflow:visible}
.erp-flow__systems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.erp-flow__systems span{display:grid;place-items:center;min-height:44px;padding:8px;border:1px solid #58615B;border-radius:var(--r);background:#3D4540;color:#E5E9E4;
  font:600 var(--t-sm)/1.2 var(--font-display);text-align:center}
.erp-flow__lane{position:relative;width:66%;height:1px;margin-inline:auto;background:#6A8A62}
.erp-flow__lane i{position:absolute;inset-block-start:-3px;inset-inline-start:0;width:7px;height:7px;border-radius:50%;background:#A6CE90;box-shadow:0 0 10px #8FBF7777;animation:erp-data-flow 2.6s linear infinite}
.erp-flow__lane i:nth-child(2){animation-delay:.8s}.erp-flow__lane i:nth-child(3){animation-delay:1.6s}
.erp-flow__lane--reverse i{animation-direction:reverse}
.erp-flow__core{display:flex;align-items:center;justify-content:center;gap:18px;min-height:78px;padding:14px 18px;border:1px solid #6E9A61;border-radius:var(--r-lg);
  background:linear-gradient(105deg,#315329,#243D2E);box-shadow:0 12px 30px -20px rgba(0,0,0,.8)}
.erp-flow__core img{width:112px;height:34px;object-fit:contain;padding:4px 8px;border-radius:6px;background:#fff}
.erp-flow__core strong{font:700 1rem/1.2 var(--font-display);color:#fff}
.erp-flow figcaption{color:#BFC9BF;font-size:var(--t-xs);text-align:center;margin-top:2px}
@keyframes erp-data-flow{to{inset-inline-start:calc(100% - 7px)}}
@media (max-width:900px){.erp-explainer__layout{grid-template-columns:1fr}.erp-explainer__copy{max-width:60ch}}
@media (max-width:520px){.erp-flow{min-height:320px;padding:82px 14px 18px}.erp-flow__systems{gap:6px}.erp-flow__systems span{font-size:.78rem;min-height:42px}.erp-flow__core{gap:10px;padding:12px}.erp-flow__core img{width:92px}.erp-flow__core strong{font-size:.86rem}.erp-flow__scribble{inset-inline-end:12px;font-size:22px}}
@media (prefers-reduced-motion:reduce){.erp-flow__lane i{animation:none;inset-inline-start:50%}}

/* ---------- 22. About and sector panels ---------- */
.about-story{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(34px,6vw,76px);align-items:center}
.about-aside{position:relative;isolation:isolate;overflow:hidden;display:grid;align-content:center;gap:16px;min-height:320px;padding:clamp(26px,4vw,44px);border-radius:var(--r-lg);background:var(--brand-night);color:var(--ink-inverse)}
.about-aside::after{content:"";position:absolute;z-index:-1;inset:0 0 0 auto;width:45%;background:url("../logos/abs-symbol-white.png") center/contain no-repeat;opacity:.07}
.about-aside .eyebrow{color:var(--ink-inverse-muted)}
.about-aside h2{font-size:var(--t-xl);max-width:15ch}
.about-aside > p:last-child{color:var(--ink-inverse-muted);max-width:34ch}
.about-aside__mark{position:absolute;inset-inline-end:20px;inset-block-end:0;color:#fff;font:800 4rem/1 var(--font-display);letter-spacing:.1em;opacity:.08}
.sector-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.sector-card{position:relative;display:grid;align-content:start;gap:18px;min-height:270px;padding:26px;border:1px solid var(--line);border-block-start:4px solid var(--brand-forest);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.sector-card--lead{background:var(--brand-night);color:var(--ink-inverse);border-color:var(--brand-night);border-block-start-color:var(--brand-forest)}
.sector-card__index{font:700 1.3rem/1 var(--font-display);color:var(--brand-forest)}
.sector-card h3{font-size:var(--t-lg);margin-top:4px}
.sector-card .eyebrow{font-size:.65rem;color:var(--accent-text)}
.sector-card--lead .eyebrow{color:#A6CE90}
.sector-card > p:last-child{font-size:var(--t-sm);color:var(--ink-muted)}
.sector-card--lead > p:last-child{color:var(--ink-inverse-muted)}
@media (max-width:900px){.about-story{grid-template-columns:1fr}.sector-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.sector-grid{grid-template-columns:1fr}.sector-card{min-height:0}}

/* ---------- 23. Why ABS proof layouts ---------- */
.page-nav{position:relative;z-index:2;background:var(--surface);border-bottom:1px solid var(--line)}
.page-nav .wrap{display:flex;gap:clamp(16px,3vw,32px);overflow-x:auto;scrollbar-width:none;padding-block:13px}
.page-nav .wrap::-webkit-scrollbar{display:none}
.page-nav a{flex:none;color:var(--ink-muted);font:700 var(--t-xs)/1 var(--font-display);text-decoration:none}
.page-nav a:hover{color:var(--accent-text)}
.why-intro{position:relative;overflow:hidden;background:var(--brand-night);color:var(--ink-inverse)}
.why-intro::after{content:"";position:absolute;inset-inline-end:-70px;inset-block-end:-180px;width:480px;height:480px;background:url("../logos/abs-symbol-white.png") center/contain no-repeat;opacity:.04;pointer-events:none}
.why-intro__grid{position:relative;z-index:1;display:grid;grid-template-columns:1fr .8fr;gap:clamp(32px,7vw,88px);align-items:center}
.why-intro h2{font-size:var(--t-2xl);max-width:16ch}
.why-intro .eyebrow{color:var(--ink-inverse-muted);margin-bottom:18px}
.why-intro__aside{color:#D0D6D0}
.why-facts{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:26px;padding-top:20px;border-top:1px solid #515753}
.why-facts div{display:grid;gap:5px}
.why-facts b{font:700 var(--t-md)/1.2 var(--font-display);color:#A6CE90}
.why-facts span{font-size:var(--t-xs);color:#C6D4BC}
.why-section-head{display:flex;justify-content:space-between;align-items:end;gap:24px}
.why-section-head h2{font-size:var(--t-xl)}
.why-section-head > span:last-child{font-size:var(--t-xs);color:var(--ink-muted);max-width:34ch}
.sample-tag{display:inline-flex;align-items:center;max-width:32ch;padding:8px 12px;border:1px solid #C8A24B66;border-radius:var(--r);
  background:#C8A24B1F;color:#785E24;font-size:var(--t-xs);font-weight:700;line-height:1.35}
.testimonial-grid{display:grid;grid-template-columns:1.2fr .8fr;gap:16px}
.testimonial{position:relative;display:flex;flex-direction:column;min-height:290px;padding:clamp(24px,4vw,42px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.testimonial--lead{background:var(--brand-night);border-color:var(--brand-night);color:var(--ink-inverse)}
.testimonial__quote-mark{height:48px;color:var(--brand-forest);font:600 5rem/.9 Georgia,serif}
.testimonial blockquote{margin:0;font:700 var(--t-lg)/1.35 var(--font-display);color:var(--ink);max-width:35ch;text-wrap:pretty}
.testimonial--lead blockquote{color:#fff}
.testimonial figcaption{display:grid;gap:4px;margin-top:auto;padding-top:24px;font-size:var(--t-xs);color:var(--ink-muted)}
.testimonial figcaption b{font:700 var(--t-sm)/1.2 var(--font-display);color:var(--accent-text)}
.testimonial--lead figcaption{color:var(--ink-inverse-muted)}
.testimonial--lead figcaption b{color:#A6CE90}
.why-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.why-case{overflow:hidden;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.why-case--lead{grid-column:span 2}
.why-case__art{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:end;gap:12px;height:150px;padding:22px;background:#2A2A2A}
.why-case__art::after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(135deg,transparent 0 48%,rgba(95,148,72,.36) 48% 51%,transparent 51%)}
.why-case__art i{display:block;width:15%;min-height:32px;border-radius:8px;background:linear-gradient(180deg,#8FBF77,#3E6A2F);box-shadow:0 12px 26px #0005}
.why-case__art i:nth-child(1){height:38%}.why-case__art i:nth-child(2){height:66%}.why-case__art i:nth-child(3){height:92%}
.why-case__art--health{background:#3D3D3D}.why-case__art--health i{width:30%;height:56%;border-radius:var(--r);background:linear-gradient(135deg,#5C7E93,#3E6A2F)}
.why-case__art--services{background:#26333A}.why-case__art--services i{width:25%;height:70%;border-radius:var(--r);background:linear-gradient(180deg,#9FC7DE,#5C7E93)}
.why-case__body{padding:22px 24px 24px}
.why-case__body h3{font-size:var(--t-lg);margin-top:8px}
.why-case__facts{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.why-case__facts div{padding-top:10px;border-top:2px solid var(--brand-forest)}
.why-case__facts b{font:700 var(--t-xs)/1 var(--font-display);color:var(--accent-text)}
.why-case__facts p{margin-top:7px;font-size:var(--t-xs);line-height:1.45;color:var(--ink-muted)}
.use-case-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.use-case{display:grid;align-content:start;gap:14px;padding:24px;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.use-case > span{font:700 1.5rem/1 var(--font-display);color:var(--brand-forest)}
.use-case h3{font-size:var(--t-lg)}
.use-case p{font-size:var(--t-sm);color:var(--ink-muted)}
.use-case a{align-self:end;margin-top:8px;font:700 var(--t-xs)/1.3 var(--font-display);text-decoration:none}
.credential-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.credential{display:grid;align-content:start;gap:12px;padding:20px;border:1px solid var(--line);border-top:3px solid var(--brand-forest);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.credential__logo{display:grid;place-items:center;min-height:82px;padding:10px;background:#fff;border-radius:var(--r)}
.credential__logo img{display:block;max-width:100%;max-height:58px;width:auto;height:auto}
.credential h3{font-size:var(--t-md)}
.credential p{font-size:var(--t-xs);line-height:1.5;color:var(--ink-muted)}
.credential--pending{border-style:dashed;border-color:var(--line-strong);border-top:3px dashed var(--brand-bronze)}
.credential__iso{display:grid;place-items:center;min-height:82px;border-radius:var(--r);background:var(--surface-sunk);color:var(--ink-muted);font:800 2rem/1 var(--font-display);letter-spacing:.12em}
.home-proof{display:grid;grid-template-columns:1fr 1fr auto;gap:24px;align-items:center}
.home-proof h2{font-size:var(--t-xl)}
.home-proof > p{color:var(--ink-muted);max-width:44ch}
.home-proof__logos{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:14px 28px;margin-top:10px;padding-top:24px;border-top:1px solid var(--line)}
.home-proof__logos > span{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-muted)}
.support-callout{display:grid;gap:10px;padding:22px;border:1px solid var(--line);border-inline-start:4px solid var(--brand-forest);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.support-callout h3{font-size:var(--t-md)}
.support-callout p:not(.eyebrow){font-size:var(--t-sm);color:var(--ink-muted)}
.support-callout__actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:3px}
.support-callout a:not(.btn){font-size:var(--t-sm)}
@media (max-width:1000px){.why-case-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:760px){.why-intro__grid,.testimonial-grid{grid-template-columns:1fr}.why-case--lead{grid-column:auto}.why-section-head{align-items:start;flex-direction:column}.home-proof{grid-template-columns:1fr}.home-proof .btn{justify-self:start}}
@media (max-width:560px){.why-case-grid,.use-case-grid,.credential-grid{grid-template-columns:1fr}.why-case__facts{grid-template-columns:1fr}.page-nav .wrap{padding-inline:20px}.hand-note{font-size:17px}.hand-note svg{width:44px;height:26px}}
html.has-reveal .sector-grid > :nth-child(2),html.has-reveal .why-case-grid > :nth-child(2),html.has-reveal .credential-grid > :nth-child(2),html.has-reveal .insight-feed > :nth-child(2){transition-delay:.1s}
html.has-reveal .sector-grid > :nth-child(3),html.has-reveal .why-case-grid > :nth-child(3),html.has-reveal .credential-grid > :nth-child(3),html.has-reveal .insight-feed > :nth-child(3){transition-delay:.18s}
html.has-reveal .xgrid > :nth-child(2),html.has-reveal .newsgrid > :nth-child(2),html.has-reveal .posts > :nth-child(2),html.has-reveal .work-grid > :nth-child(2){transition-delay:.1s}
html.has-reveal .xgrid > :nth-child(3),html.has-reveal .newsgrid > :nth-child(3),html.has-reveal .posts > :nth-child(3),html.has-reveal .work-grid > :nth-child(3){transition-delay:.18s}
@media (prefers-reduced-motion:reduce){html.has-reveal [data-reveal]{opacity:1;transform:none;transition:none}}

/* ---------- 24. Round 2: shared pieces ----------------------------------
   Jude, round 2: more charcoal and green, soft corners everywhere, more
   movement and layering, hand-written notes pointing at things. Everything
   here follows one rule: the resting state is the finished state. Motion is
   only layered on when JS has added html.has-reveal, and it is switched off
   under prefers-reduced-motion, so the page never depends on it.
   ------------------------------------------------------------------------ */
.case-tag{font-size:var(--t-xs);font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-text)}

/* dark closing band used at the foot of inner pages */
.cta-band{position:relative;isolation:isolate;overflow:hidden;background:var(--brand-night);color:var(--ink-inverse);padding-block:clamp(48px,6vw,80px)}
.cta-band::before{content:"";position:absolute;inset:0 0 auto;height:4px;background:linear-gradient(90deg,var(--brand-forest-deep) 0 34%,var(--brand-forest) 34% 68%,var(--brand-slate-blue) 68%)}
.cta-band::after{content:"";position:absolute;z-index:-1;inset-inline-start:-70px;inset-block-end:-140px;width:380px;height:380px;background:url("../logos/abs-symbol-white.png") center/contain no-repeat;opacity:.05;pointer-events:none}
.cta-inner{display:grid;grid-template-columns:1fr auto;gap:clamp(24px,4vw,56px);align-items:center}
.cta-inner .eyebrow{color:var(--ink-inverse-muted)}
.cta-inner h2{color:#fff;font-size:var(--t-xl);margin-top:14px}
.cta-inner p:not(.eyebrow){color:#D0D6D0;margin-top:12px;max-width:52ch}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-actions .btn{background:var(--sage);color:#12180F}
.cta-actions .btn:hover{background:#A6CE90}
@media (max-width:760px){.cta-inner{grid-template-columns:1fr}}

/* hand-written note with a drawn arrow. Position with the modifier, or
   inline styles for one-offs. Decorative: always aria-hidden in the markup. */
.hand-note{position:absolute;z-index:3;display:inline-flex;align-items:center;gap:6px;color:var(--accent-text);
  font:600 clamp(19px,1.5vw,24px)/1 var(--font-hand);transform:rotate(-3deg);pointer-events:none;white-space:nowrap}
.hand-note--on-dark{color:#A6CE90}
.hand-note svg{width:58px;height:34px;flex:none;overflow:visible}
.hand-note svg path{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:180;stroke-dashoffset:0}
.hand-note--tr{inset-block-start:14px;inset-inline-end:18px}
.hand-note--tl{inset-block-start:14px;inset-inline-start:18px;transform:rotate(2deg)}
.hand-note--br{inset-block-end:14px;inset-inline-end:18px}
.hand-note--flip svg{transform:scaleX(-1)}
html.has-reveal .hand-note svg path{stroke-dashoffset:180}
html.has-reveal [data-reveal].is-visible .hand-note svg path{animation:hand-draw .9s ease-out .5s forwards}
@keyframes hand-draw{to{stroke-dashoffset:0}}

/* ---------- 25. How we help: service sections with a live visual ---------- */
.svc__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(32px,6vw,72px);align-items:center}
.svc--flip .svc__visual{order:-1}
.svc__copy{display:grid;gap:14px;justify-items:start}
.svc__copy .prose{margin-top:6px}
.svc__index{font:700 1.3rem/1 var(--font-display);color:var(--brand-forest)}
.svc__visual{position:relative;isolation:isolate;overflow:hidden;margin:0;min-height:340px;display:grid;align-content:center;
  padding:clamp(22px,3vw,36px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface);box-shadow:var(--shadow-card)}
.svc__visual--dark{background:var(--brand-night);border-color:#454545;color:var(--ink-inverse);box-shadow:0 28px 60px -38px rgba(0,0,0,.8)}
.svc__visual--dark::after{content:"";position:absolute;z-index:-1;inset-inline-end:-60px;inset-block-end:-80px;width:260px;height:260px;background:url("../logos/abs-symbol-white.png") center/contain no-repeat;opacity:.06;pointer-events:none}
.svc__visual figcaption{margin-top:16px;font-size:var(--t-xs);color:var(--ink-muted);text-align:center}
.svc__visual--dark figcaption{color:#BFC9BF}
@media (max-width:900px){.svc__grid{grid-template-columns:1fr}.svc--flip .svc__visual{order:0}.svc__visual{min-height:0}}

/* generic staged entrance for the pieces inside a visual */
html.has-reveal [data-reveal] .stage{opacity:0;transform:translateY(10px) scale(.97)}
html.has-reveal [data-reveal].is-visible .stage{animation:stage-in .55s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * .12s + .25s)}
@keyframes stage-in{to{opacity:1;transform:none}}

/* 1. Priority ERP - six modules settle into one system */
.g-modules{display:grid;gap:10px}
.g-modules__tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.g-modules__tiles span{display:grid;place-items:center;min-height:62px;padding:10px;border:1px solid #58615B;border-radius:var(--r);background:#3D4540;color:#E5E9E4;font:600 var(--t-sm)/1.2 var(--font-display);text-align:center}
.g-modules__tiles span:nth-child(2n){background:#344A2E;border-color:#4E7A43}
.g-modules__core{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:6px;padding:14px 18px;border:1px solid #6E9A61;border-radius:var(--r-lg);
  background:linear-gradient(105deg,#315329,#243D2E)}
.g-modules__core img{width:112px;height:34px;object-fit:contain;padding:4px 8px;border-radius:6px;background:#fff}
.g-modules__core strong{font:700 1rem/1.2 var(--font-display);color:#fff}

/* 2. IT support - a request being handled by a person */
.g-ticket{display:grid;gap:12px}
.g-ticket__head{display:flex;justify-content:space-between;align-items:start;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.g-ticket__head b{display:block;font:700 1rem/1.3 var(--font-display)}
.g-ticket__head small{display:block;margin-top:3px;font-size:var(--t-xs);color:var(--ink-muted)}
.g-pill{flex:none;padding:5px 10px;border-radius:999px;background:#5F944826;color:var(--accent-text);font:700 .7rem/1 var(--font-body);letter-spacing:.06em;text-transform:uppercase}
.g-msg{display:grid;grid-template-columns:32px 1fr;gap:10px;align-items:start}
.g-msg__av{display:grid;place-items:center;width:32px;height:32px;border-radius:9px;background:var(--surface-sunk);border:1px solid var(--line);font:700 .7rem/1 var(--font-display);color:var(--ink-muted)}
.g-msg--abs .g-msg__av{background:var(--brand-forest-deep);border-color:var(--brand-forest-deep);padding:6px}
.g-msg--abs .g-msg__av img{width:100%;height:100%;object-fit:contain}
.g-msg__body{padding:10px 13px 11px;border:1px solid var(--line);border-radius:4px 12px 12px 12px;background:var(--surface-sunk)}
.g-msg--abs .g-msg__body{background:#5F944814;border-color:#5F944840}
.g-msg__meta{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;font-size:var(--t-xs);color:var(--ink-muted)}
.g-msg__meta b{font:700 .84rem/1.2 var(--font-display);color:var(--ink)}
.g-msg__meta time{margin-inline-start:auto;font-weight:600;color:var(--brand-bronze)}
.g-msg__body p{margin-top:4px;font-size:var(--t-sm);line-height:1.45;color:var(--ink-muted)}
.g-fixed{display:inline-flex;align-items:center;gap:5px;margin-top:8px;padding:4px 9px 4px 7px;border-radius:999px;background:#5F944826;color:var(--accent-text);font:700 .72rem/1 var(--font-body)}
.g-fixed svg{width:12px;height:12px}
.g-ticket__bar{display:grid;gap:7px;padding-top:12px;border-top:1px solid var(--line);font-size:var(--t-xs);color:var(--ink-muted)}
.g-ticket__bar > div{display:flex;justify-content:space-between;gap:12px}
.g-ticket__bar i{display:block;height:8px;border-radius:4px;background:var(--surface-sunk);border:1px solid var(--line);overflow:hidden}
.g-ticket__bar i::before{content:"";display:block;width:34%;height:100%;border-radius:4px;background:linear-gradient(90deg,var(--brand-forest-deep),var(--brand-forest))}
html.has-reveal [data-reveal] .g-ticket__bar i::before{width:0}
html.has-reveal [data-reveal].is-visible .g-ticket__bar i::before{animation:bar-fill 1.1s cubic-bezier(.2,.8,.2,1) 1.1s forwards}
@keyframes bar-fill{to{width:34%}}

/* 3. Microsoft 365 - a licence review, the gap is the point */
.g-seats{display:grid;gap:18px}
.g-seats__head{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.g-seats__head b{font:700 1rem/1.3 var(--font-display)}
.g-seats__head span{font-size:var(--t-xs);color:var(--ink-muted)}
.g-seats__row{display:grid;gap:8px}
.g-seats__row > div{display:flex;justify-content:space-between;gap:12px;font-size:var(--t-sm);color:var(--ink-muted)}
.g-seats__row b{font-family:var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.g-seats__row i{position:relative;display:block;height:30px;border-radius:var(--r);background:var(--surface-sunk);border:1px solid var(--line);overflow:hidden}
.g-seats__row i::before{content:"";position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:var(--r);background:var(--brand-graphite)}
.g-seats__row--used i::before{background:linear-gradient(90deg,var(--brand-forest-deep),var(--brand-forest))}
.g-seats__row--paid i::after{content:"";position:absolute;inset:0 0 0 var(--used);background:repeating-linear-gradient(135deg,transparent 0 5px,#B58A5255 5px 8px)}
.g-seats__note{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;padding:12px 14px;border-radius:var(--r);background:#B58A521A;border:1px solid #B58A5255;font-size:var(--t-sm);color:var(--ink-muted)}
.g-seats__note b{font:800 1.5rem/1 var(--font-display);color:#8A6A28}
html.has-reveal [data-reveal] .g-seats__row i::before{width:0}
html.has-reveal [data-reveal].is-visible .g-seats__row i::before{animation:seats-fill 1s cubic-bezier(.2,.8,.2,1) .5s forwards}
html.has-reveal [data-reveal].is-visible .g-seats__row--used i::before{animation-delay:.8s}
@keyframes seats-fill{to{width:var(--w)}}

/* 4. Integrations - data moves once, in both directions */
.g-link{display:grid;grid-template-columns:1fr auto 1fr;gap:14px;align-items:center}
.g-link__col{display:grid;gap:10px}
.g-link__col span{display:grid;place-items:center;min-height:52px;padding:10px;border:1px solid #58615B;border-radius:var(--r);background:#3D4540;color:#E5E9E4;font:600 var(--t-sm)/1.2 var(--font-display);text-align:center}
.g-link__lanes{display:grid;gap:10px;width:clamp(60px,9vw,110px)}
.g-link__lane{position:relative;height:52px;display:grid;align-items:center}
.g-link__lane::before{content:"";display:block;height:1px;background:#6A8A62}
.g-link__lane i{position:absolute;inset-block-start:calc(50% - 3.5px);inset-inline-start:0;width:7px;height:7px;border-radius:50%;background:#A6CE90;box-shadow:0 0 10px #8FBF7777;animation:erp-data-flow 2.4s linear infinite}
.g-link__lane:nth-child(2) i{animation-delay:.8s;animation-direction:reverse}
.g-link__lane:nth-child(3) i{animation-delay:1.4s}
.g-link__core{display:grid;place-items:center;gap:8px;padding:18px 14px;border:1px solid #6E9A61;border-radius:var(--r-lg);background:linear-gradient(160deg,#315329,#243D2E)}
.g-link__core img{width:110px;height:32px;object-fit:contain;padding:4px 8px;border-radius:6px;background:#fff}
.g-link__core strong{font:700 .9rem/1.2 var(--font-display);color:#fff;text-align:center}
@media (max-width:420px){.g-link{grid-template-columns:1fr auto 1fr;gap:8px}.g-link__col span{font-size:.78rem;padding:8px 6px}}

/* 5. Reporting - a dashboard that answers the question itself */
.g-dash{display:grid;gap:14px}
.g-dash__bar{display:flex;align-items:center;gap:6px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.g-dash__bar i{width:8px;height:8px;border-radius:50%;background:var(--line-strong)}
.g-dash__bar span{margin-inline-start:10px;font:600 var(--t-xs)/1 var(--font-display);color:var(--ink-muted)}
.g-dash__kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.g-dash__kpis div{display:grid;gap:4px;padding:12px 14px;border:1px solid var(--line);border-top:3px solid var(--kpi,var(--brand-forest));border-radius:var(--r);background:var(--surface-sunk)}
.g-dash__kpis div:nth-child(2){--kpi:var(--brand-slate-blue)}.g-dash__kpis div:nth-child(3){--kpi:var(--brand-bronze)}
.g-dash__kpis b{font:800 1.3rem/1 var(--font-display);color:var(--ink);font-variant-numeric:tabular-nums}
.g-dash__kpis span{font-size:var(--t-xs);color:var(--ink-muted)}
.g-dash__chart{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;align-items:end;height:120px;padding:10px 12px 0;border:1px solid var(--line);border-radius:var(--r);background:var(--surface-sunk)}
.g-dash__chart i{display:block;height:var(--h);border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,var(--brand-forest),var(--brand-forest-deep));transform-origin:bottom}
.g-dash__chart i:nth-child(2n){background:linear-gradient(180deg,#8FBF77,var(--brand-forest))}
.g-dash__chart i:last-child{background:linear-gradient(180deg,#9FC7DE,var(--brand-slate-blue))}
html.has-reveal [data-reveal] .g-dash__chart i{transform:scaleY(0)}
html.has-reveal [data-reveal].is-visible .g-dash__chart i{animation:bar-grow .7s cubic-bezier(.2,.8,.2,1) forwards;animation-delay:calc(var(--i,0) * .08s + .5s)}
@keyframes bar-grow{to{transform:none}}

@media (prefers-reduced-motion:reduce){
  .hand-note svg path,.stage,.g-ticket__bar i::before,.g-seats__row i::before,.g-dash__chart i,.g-link__lane i{animation:none!important;opacity:1;transform:none;stroke-dashoffset:0}
  .g-ticket__bar i::before{width:34%}
  .g-seats__row i::before{width:var(--w)}
  .g-link__lane i{inset-inline-start:50%}
}

/* ---------- 26. Round 3 --------------------------------------------------
   Jude, round 3: headings on charcoal too tight to read; problem-led labels
   in the How we help menu and footer; a hand-written note on every page; and
   more movement, colour, boxes and illustration so no page reads as flat.
   Same rule as round 2: the resting state is the finished state, and every
   animation is off under prefers-reduced-motion.
   ------------------------------------------------------------------------ */

/* Headings on charcoal. The display face at 800 with negative tracking runs
   the words together on a dark ground, so open the tracking and add word
   space wherever a heading sits on charcoal. */
.phead h1,
.erp-explainer__copy h2, .why-intro h2, .cta-inner h2, .about-aside h2,
.sector-card--lead h3, .testimonial--lead blockquote, .insight-card--lead h3,
.group-tile--abs b{
  letter-spacing:-.005em; word-spacing:.14em;
}
.phead h1{max-width:20ch; line-height:1.12}
.phead p{line-height:1.55}

/* How we help menu: the problem leads, the service sits underneath it */
.mega{min-inline-size:min(660px,90vw)}
.mega__item b{font-size:.95rem; line-height:1.3}
.mega__item span{display:block; margin-top:2px}
.mega__item em{display:block; margin-bottom:3px; font-style:normal; font-size:.66rem; font-weight:700;
  letter-spacing:.12em; text-transform:uppercase; color:#A6CE90}
.mnav a.sub small{display:block; margin-top:3px; font-size:.68rem; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--accent-text)}
@media (min-width:760px){.ftr__grid{grid-template-columns:1.2fr 1.4fr .8fr 1fr}}
.ftr__svc{gap:12px}
.ftr__svc a{display:grid; gap:2px; line-height:1.4}
.ftr__svc small{font-size:.66rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#A6CE90}

/* Page header: logo bars in the four accent colours, rising from the
   bottom edge, plus a hand-written note */
.phead__bars{position:absolute; inset-inline-end:clamp(20px,5vw,40px);
  inset-block-end:calc(-1 * clamp(40px,5vw,64px) - 12px);
  display:flex; align-items:flex-end; gap:12px; pointer-events:none}
.phead__bars i{display:block; inline-size:30px; border-radius:10px}
.phead__bars i:nth-child(1){block-size:76px; background:var(--brand-forest-deep)}
.phead__bars i:nth-child(2){block-size:116px; background:var(--brand-forest)}
.phead__bars i:nth-child(3){block-size:92px; background:var(--brand-slate-blue)}
.phead__bars i:nth-child(4){block-size:144px; background:var(--brand-bronze)}
.phead .phead__note{display:inline-flex; align-items:flex-end; gap:6px; max-width:none; margin-top:20px;
  color:#A6CE90; font:600 clamp(21px,1.8vw,27px)/1 var(--font-hand); transform:rotate(-3deg); transform-origin:left center}
.phead__note svg{inline-size:52px; block-size:30px; flex:none; overflow:visible}
.phead__note svg path, .hero__scribble svg path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
@media (min-width:1100px){
  /* level with the headline, which is capped at 20ch, so it never meets a long intro paragraph */
  .phead .phead__note{position:absolute; margin:0; inset-block-start:52px;
    inset-inline-end:calc(clamp(20px,5vw,40px) + 172px)}
}
@media (max-width:760px){.phead__bars{display:none}}
.phead__actions{display:flex; flex-wrap:wrap; gap:12px; margin-top:26px}

/* Homepage hero: a note pointing at the film */
.hero__scribble{display:none}
@media (min-width:960px){
  .hero__scribble{position:absolute; z-index:2; margin:0; display:inline-flex; align-items:flex-start; gap:6px;
    inset-block-start:clamp(14px,2.2vw,30px); inset-inline-end:clamp(70px,12vw,190px);
    color:var(--hero-em); font:600 27px/1 var(--font-hand); transform:rotate(-4deg)}
  .hero__scribble svg{inline-size:58px; block-size:34px; margin-top:12px; overflow:visible}
}

@media (prefers-reduced-motion:no-preference){
  .phead .phead__note, .hero__scribble{animation:note-in .6s ease-out .4s both}
  .phead__note svg path, .hero__scribble svg path{stroke-dasharray:180; stroke-dashoffset:180; animation:hand-draw .9s ease-out .9s forwards}
  .phead__bars i, .hero__motif i{animation:bar-bob 3.4s ease-in-out infinite alternate}
  .phead__bars i:nth-child(2), .hero__motif i:nth-child(2){animation-delay:-.9s}
  .phead__bars i:nth-child(3), .hero__motif i:nth-child(3){animation-delay:-1.7s}
  .phead__bars i:nth-child(4), .hero__motif i:nth-child(4){animation-delay:-2.5s}
}
@keyframes note-in{from{opacity:0; translate:0 8px}to{opacity:1; translate:0 0}}
@keyframes bar-bob{from{transform:translateY(0)}to{transform:translateY(-12px)}}

/* Stickers: small tilted labels in the accent colours. Every pairing is
   AA for bold text: sage/ink 6.8:1, bronze/#1A1A1A 5.5:1, burgundy/white
   7.0:1, slate #41606F/white 6.7:1. */
.sticker{--rot:-3deg; display:inline-flex; align-items:center; gap:8px; margin:0; inline-size:max-content;
  padding:9px 15px; border-radius:var(--r); background:var(--st-bg,#8FBF77); color:var(--st-ink,#12180F);
  font:800 var(--t-sm)/1.1 var(--font-display); letter-spacing:.01em; word-spacing:.08em;
  transform:rotate(var(--rot)); box-shadow:0 10px 22px -12px rgba(0,0,0,.5)}
.sticker--sage{--st-bg:#8FBF77; --st-ink:#12180F}
.sticker--bronze{--st-bg:#B58A52; --st-ink:#1A1A1A}
.sticker--burgundy{--st-bg:#7B4C4C; --st-ink:#FFFFFF}
.sticker--slate{--st-bg:#41606F; --st-ink:#FFFFFF}
.sticker--pin-tr{position:absolute; z-index:2; inset-block-start:18px; inset-inline-end:20px; --rot:4deg}
.sticker--pin-br{position:absolute; z-index:2; inset-block-end:18px; inset-inline-end:24px; --rot:-5deg}
html.has-reveal [data-reveal] .sticker{opacity:0; transform:rotate(calc(var(--rot) - 14deg)) scale(.6)}
html.has-reveal [data-reveal].is-visible .sticker{animation:sticker-pop .55s cubic-bezier(.3,1.6,.5,1) .55s forwards}
html.has-reveal [data-reveal].is-visible .sticker--pin-br{animation-delay:.8s}
@keyframes sticker-pop{to{opacity:1; transform:rotate(var(--rot))}}

/* Offset colour block behind a panel - a solid shadow in an accent colour.
   No extra markup and no layout cost; the shadow never causes overflow. */
.offset{--off:var(--brand-forest); box-shadow:12px 12px 0 0 var(--off), var(--shadow-card)}
.offset--forest{--off:var(--brand-forest)}
.offset--slate{--off:var(--brand-slate-blue)}
.offset--bronze{--off:var(--brand-bronze)}
.offset--sage{--off:var(--sage)}
.offset--burgundy{--off:var(--brand-burgundy)}
@media (max-width:600px){.offset{box-shadow:7px 7px 0 0 var(--off), var(--shadow-card)}}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  .offset{transition:transform .25s ease, box-shadow .25s ease}
  html.has-reveal .offset[data-reveal]{transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1), box-shadow .25s ease}
  .offset:hover, html.has-reveal .offset[data-reveal].is-visible:hover{transform:translate(-4px,-4px);
    box-shadow:16px 16px 0 0 var(--off), var(--shadow-lift)}
}

/* Homepage ticker */
.ticker{overflow:hidden; background:var(--brand-forest-deep); color:#FFFFFF; border-block:1px solid var(--forest-darker)}
.ticker__track{display:flex; inline-size:max-content}
.ticker__list{display:flex; flex:none; padding-block:17px}
.ticker__list li{display:flex; align-items:center; gap:30px; padding-inline-end:30px; white-space:nowrap;
  font:700 var(--t-md)/1 var(--font-display); word-spacing:.1em}
.ticker__list li::after{content:""; inline-size:12px; block-size:12px; border-radius:4px; background:var(--sage); flex:none}
.ticker__list li:nth-child(3n+2)::after{background:var(--brand-bronze)}
.ticker__list li:nth-child(3n)::after{background:#9FC7DE}
@media (prefers-reduced-motion:no-preference){
  .ticker__track{animation:ticker 42s linear infinite}
  .ticker:hover .ticker__track{animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .ticker__track{inline-size:auto}
  .ticker__list{flex-wrap:wrap; justify-content:center; row-gap:12px; padding-inline:20px}
  .ticker__list[aria-hidden]{display:none}
}
@keyframes ticker{to{transform:translateX(-50%)}}

/* Proof strip: a short colour bar over each figure */
.trust-strip__item{position:relative}
.trust-strip__item::before{content:""; inline-size:30px; block-size:5px; border-radius:3px; margin-bottom:4px; background:var(--brand-forest)}
.trust-strip__item:nth-child(2)::before{background:var(--brand-slate-blue)}
.trust-strip__item:nth-child(3)::before{background:var(--brand-bronze)}
.trust-strip__item:nth-child(4)::before{background:var(--brand-burgundy)}

/* Homepage service cards: one accent each, icon on a tinted tile */
.xgrid > .xcard{--card:var(--brand-forest); border-block-start:4px solid var(--card)}
.xgrid > .xcard:nth-child(2){--card:var(--brand-slate-blue)}
.xgrid > .xcard:nth-child(3){--card:var(--brand-bronze)}
.xgrid > .xcard:nth-child(4){--card:var(--brand-forest-deep)}
.xgrid > .xcard:nth-child(5){--card:var(--brand-burgundy)}
.xgrid > .xcard .xcard__ico{inline-size:64px; block-size:64px; padding:9px; border-radius:16px;
  background:color-mix(in srgb, var(--card) 15%, transparent); transition:transform .2s ease}
.xgrid > .xcard:hover .xcard__ico{transform:rotate(-6deg) scale(1.06)}
@media (prefers-reduced-motion:reduce){.xgrid > .xcard:hover .xcard__ico{transform:none}}

/* Contact: what happens next */
.steps-band{background:var(--bg-alt); border-bottom:1px solid var(--line); padding-block:clamp(30px,4vw,46px)}
.steps{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,3vw,40px)}
.steps__item{position:relative; display:grid; gap:6px; align-content:start}
.steps__item b{font:700 var(--t-md)/1.25 var(--font-display); margin-top:8px}
.steps__item > span:last-child{font-size:var(--t-sm); color:var(--ink-muted)}
.steps__num{display:grid; place-items:center; inline-size:46px; block-size:46px; border-radius:14px;
  background:var(--brand-forest-deep); color:#FFFFFF; font:800 1.25rem/1 var(--font-display); position:relative; z-index:1}
.steps__item:nth-child(2) .steps__num{background:#41606F}
.steps__item:nth-child(3) .steps__num{background:var(--brand-burgundy)}
.steps__item:not(:last-child)::after{content:""; position:absolute; inset-block-start:22px; inset-inline-start:58px;
  inset-inline-end:calc(-1 * clamp(18px,3vw,40px) + 10px); block-size:2px;
  background:repeating-linear-gradient(90deg,var(--line-strong) 0 8px,transparent 8px 14px) 0 0/14px 2px}
@media (prefers-reduced-motion:no-preference){.steps__item::after{animation:march 1.1s linear infinite}}
@keyframes march{to{background-position:14px 0}}
@media (max-width:760px){.steps{grid-template-columns:1fr}.steps__item::after{display:none}}

/* Glossary cards */
.gloss-intro{display:flex; flex-wrap:wrap; align-items:center; gap:14px 26px}
.gloss-intro > p:last-child{color:var(--ink-muted); max-width:60ch}
.gloss-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px}
.gloss{--g:var(--brand-forest-deep); display:grid; align-content:start; gap:10px; padding:24px;
  border:1px solid var(--line); border-block-start:4px solid var(--g); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-card)}
.gloss:nth-child(4n+2){--g:#41606F}
.gloss:nth-child(4n+3){--g:var(--brand-burgundy)}
.gloss:nth-child(4n+4){--g:var(--brand-bronze)}
.gloss__tile{display:grid; place-items:center; inline-size:46px; block-size:46px; border-radius:13px;
  background:var(--g); color:#FFFFFF; font:800 1.35rem/1 var(--font-display)}
.gloss h3{font-size:var(--t-md); margin-top:4px}
.gloss p{font-size:var(--t-sm); line-height:1.6; color:var(--ink-muted)}
html.has-reveal .gloss-grid > :nth-child(3n+2){transition-delay:.08s}
html.has-reveal .gloss-grid > :nth-child(3n){transition-delay:.16s}
@media (prefers-reduced-motion:no-preference) and (hover:hover){
  html.has-reveal .gloss[data-reveal].is-visible:hover, .gloss:hover{transform:translateY(-4px) rotate(-.6deg); box-shadow:var(--shadow-lift)}
}
@media (max-width:960px){.gloss-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.gloss-grid{grid-template-columns:1fr}}

/* Insights: jargon buster box and coloured cards */
.jargon{display:grid; grid-template-columns:auto 1fr; gap:14px 22px; align-items:center; padding:24px 26px;
  border:1.5px dashed var(--brand-bronze); border-radius:var(--r-lg); background:var(--bg-alt);
  color:var(--ink); text-decoration:none}
.jargon:hover{text-decoration:none; border-style:solid}
.jargon__sticker{--rot:-7deg; padding:16px 16px; font-size:1.25rem; transition:rotate .2s ease, scale .2s ease}
/* rotate/scale rather than transform, so the hover still works after the pop-in animation has filled forwards */
.jargon:hover .jargon__sticker{rotate:12deg; scale:1.08}
.jargon__copy{display:grid; gap:6px}
.jargon__copy b{font:700 var(--t-md)/1.25 var(--font-display)}
.jargon__copy > span:last-child{font-size:var(--t-sm); color:var(--ink-muted)}
.jargon__go{grid-column:2; display:flex; align-items:center; gap:8px; font:700 var(--t-xs)/1 var(--font-display); color:var(--accent-text)}
.jargon__go b{font-size:1.2rem; line-height:.8; transition:transform .18s ease}
.jargon:hover .jargon__go b{transform:translateX(4px)}
@media (max-width:480px){.jargon{grid-template-columns:1fr}.jargon__go{grid-column:auto}}
@media (prefers-reduced-motion:reduce){.jargon__sticker,.jargon__go b{transition:none}.jargon:hover .jargon__sticker{rotate:none; scale:none}}
.insight-feed > :nth-child(2){border-inline-start-color:var(--brand-slate-blue)}
.insight-feed > :nth-child(3){border-inline-start-color:var(--brand-bronze)}
.insight-feed > :nth-child(2) .insight-card__number{color:var(--brand-slate-blue)}
.insight-feed > :nth-child(3) .insight-card__number{color:var(--brand-burgundy)}
.newsgrid--rail .newsitem{border-inline-start:4px solid var(--brand-forest)}
.newsgrid--rail .newsitem:nth-child(3n+2){border-inline-start-color:var(--brand-slate-blue)}
.newsgrid--rail .newsitem:nth-child(3n){border-inline-start-color:var(--brand-bronze)}

/* About: illustrated, colour-coded sector cards and the group tiles */
.sector-card__ico{inline-size:52px; block-size:52px}
.sector-card--slate{border-block-start-color:var(--brand-slate-blue)}
.sector-card--slate .sector-card__index{color:var(--brand-slate-blue)}
.sector-card--bronze{border-block-start-color:var(--brand-bronze)}
.sector-card--bronze .sector-card__index{color:var(--brand-burgundy)}
.group-row{position:relative; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; padding-top:48px}
.group-row__note{inset-block-start:0; inset-inline-start:clamp(70px,9vw,130px)}
.group-tile{display:grid; gap:8px; padding:26px; border:1px solid var(--line); border-block-start:4px solid var(--brand-forest);
  border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card)}
.group-tile b{font:800 var(--t-xl)/1 var(--font-display); letter-spacing:.06em}
.group-tile span{font-size:var(--t-sm); color:var(--ink-muted)}
.group-tile--abs{background:var(--brand-night); border-color:var(--brand-night); border-block-start-color:var(--sage); color:#FFFFFF;
  box-shadow:10px 10px 0 0 var(--brand-forest), var(--shadow-card)}
.group-tile--abs b{color:#A6CE90}
.group-tile--abs span{color:#C6D4BC}
.group-tile--itsi{border-block-start-color:var(--brand-slate-blue)}
.group-tile--ecs{border-block-start-color:var(--brand-bronze)}
@media (max-width:760px){.group-row{grid-template-columns:1fr}}

/* Why ABS: colour across the use cases */
.use-case{border-block-start:4px solid var(--brand-forest)}
.use-case-grid > :nth-child(2){border-block-start-color:var(--brand-slate-blue)}
.use-case-grid > :nth-child(2) > span{color:var(--brand-slate-blue)}
.use-case-grid > :nth-child(3){border-block-start-color:var(--brand-bronze)}
.use-case-grid > :nth-child(3) > span{color:var(--brand-burgundy)}

/* Lift the darker accents on dark grounds where they are used as text */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .insight-feed > :nth-child(2) .insight-card__number,
  :root:not([data-theme="light"]) .sector-card--slate .sector-card__index,
  :root:not([data-theme="light"]) .use-case-grid > :nth-child(2) > span{color:#9FC7DE}
  :root:not([data-theme="light"]) .insight-feed > :nth-child(3) .insight-card__number,
  :root:not([data-theme="light"]) .sector-card--bronze .sector-card__index,
  :root:not([data-theme="light"]) .use-case-grid > :nth-child(3) > span{color:#D9B27A}
}
:root[data-theme="dark"] .insight-feed > :nth-child(2) .insight-card__number,
:root[data-theme="dark"] .sector-card--slate .sector-card__index,
:root[data-theme="dark"] .use-case-grid > :nth-child(2) > span{color:#9FC7DE}
:root[data-theme="dark"] .insight-feed > :nth-child(3) .insight-card__number,
:root[data-theme="dark"] .sector-card--bronze .sector-card__index,
:root[data-theme="dark"] .use-case-grid > :nth-child(3) > span{color:#D9B27A}

@media (prefers-reduced-motion:reduce){
  .phead .phead__note, .hero__scribble, .phead__bars i, .hero__motif i, .ticker__track, .steps__item::after{animation:none!important}
  .phead__note svg path, .hero__scribble svg path{stroke-dashoffset:0}
  html.has-reveal [data-reveal] .sticker{opacity:1; transform:rotate(var(--rot))}
}

/* ---------- 27. Legal pages (privacy, cookies, terms) --------------------
   One layout for every legal document: a sticky contents list beside
   numbered sections, a plain-English summary up front, and tables that
   scroll sideways on a phone rather than breaking the page.
   ------------------------------------------------------------------------ */
.legal{display:grid; grid-template-columns:minmax(200px,240px) minmax(0,1fr); gap:clamp(32px,5vw,64px); align-items:start}
.legal__toc{position:sticky; inset-block-start:100px; display:grid; gap:12px; padding:20px 22px;
  border:1px solid var(--line); border-block-start:4px solid var(--brand-forest); border-radius:var(--r-lg); background:var(--surface)}
.legal__toc > p{font-size:var(--t-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--ink-muted)}
.legal__toc ol{display:grid; gap:7px; counter-reset:toc}
.legal__toc li{counter-increment:toc; display:grid; grid-template-columns:1.6em 1fr; font-size:var(--t-sm); line-height:1.35}
.legal__toc li::before{content:counter(toc); font:700 var(--t-xs)/1.6 var(--font-display); color:var(--accent-text)}
.legal__toc a{color:var(--ink-muted); text-decoration:none}
.legal__toc a:hover{color:var(--accent-text); text-decoration:underline}
.legal__body{display:grid; gap:16px; max-width:72ch; counter-reset:sec}
.legal__meta{display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-size:var(--t-sm); color:var(--ink-muted)}
.legal__summary{display:grid; gap:12px; padding:clamp(20px,3vw,28px); border-radius:var(--r-lg); background:var(--bg-alt);
  border:1px solid var(--line); border-inline-start:4px solid var(--brand-forest)}
.legal__summary h2{font-size:var(--t-lg)}
.legal__body h2{display:flex; gap:14px; align-items:baseline; margin-top:26px; font-size:var(--t-xl); scroll-margin-top:110px}
.legal__body h2::before{counter-increment:sec; content:counter(sec); flex:none; font:800 var(--t-lg)/1 var(--font-display); color:var(--brand-forest)}
.legal__body .legal__summary h2{margin-top:0}
.legal__body .legal__summary h2::before{content:none; counter-increment:none}
.legal__body h3{font-size:var(--t-md); margin-top:10px}
.legal__body p, .legal__body li{color:var(--ink-muted)}
.legal__body b, .legal__body strong{color:var(--ink); font-weight:600}
.legal__body ul{display:grid; gap:8px}
.legal__body ul li{position:relative; padding-inline-start:20px}
.legal__body ul li::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:.6em;
  inline-size:7px; block-size:7px; border-radius:3px; background:var(--accent)}
.legal__table{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r)}
.legal__table table{inline-size:100%; border-collapse:collapse; font-size:var(--t-sm); min-inline-size:560px}
.legal__table th, .legal__table td{padding:11px 14px; text-align:start; vertical-align:top; border-block-end:1px solid var(--line)}
.legal__table th{font-family:var(--font-display); font-weight:700; color:var(--ink); background:var(--surface-sunk)}
.legal__table td{color:var(--ink-muted)}
.legal__table tr:last-child td{border-block-end:0}
@media (max-width:900px){.legal{grid-template-columns:1fr}.legal__toc{position:static}}
@media print{
  .hdr, .ftr, .talk, .chat, .legal__toc, .phead__bars, .phead__note{display:none!important}
  .phead{background:none; color:#000; padding:0}
  .phead h1, .phead p{color:#000}
  .legal{display:block}
}

/* ---------- 28. Round 4: sixth service, menu overview link ---------------
   Data migration is the sixth service. The How we help menu now holds six
   services in two columns, so the overview link spans both underneath.
   ------------------------------------------------------------------------ */
.mega__item--all{grid-column:1 / -1}
.xgrid > .xcard:nth-child(6){--card:var(--brand-slate-grey)}
.offset--deep{--off:var(--brand-forest-deep)}
/* migration only flows one way, unlike integrations */
.g-link--oneway .g-link__lane:nth-child(2) i{animation-direction:normal}
/* three partner cards since ISO moved to Phase 2: stay in one row, then stack */
@media (max-width:760px){.credential-grid{grid-template-columns:1fr}}

/* ---------- 29. ABS character -------------------------------------------
   The group sites share sections 1-27, so ABS and ITSI started out reading
   as the same site. ITSI now goes precise and engineered; ABS leans the
   other way - warm, human, a bit hand-made - by pushing what it already
   has rather than changing the approved look.

     - a hand-drawn underline under the hero's emphasised word
     - the logo bars grow up on arrival with a little spring, then bob
     - scroll reveals settle like paper landing: a soft rise with a slight
       tilt and a gentle overshoot
     - a faint paper grain on the linen bands
     - cards tilt a fraction on hover, as if picked up
   Everything is off under prefers-reduced-motion, and the resting state is
   the finished state.
   ------------------------------------------------------------------------ */

/* Paper grain on the linen bands - an SVG noise tile, very faint */
.band-alt, .band-sunk{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .36 0 0 0 0 .25 0 0 0 .12 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Hand-drawn underline under the hero's emphasised word */
.hero h1 em{
  padding-bottom:.08em;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 14' preserveAspectRatio='none'%3E%3Cpath d='M3 9c40-6 95-7 150-5s95 3 144-1' fill='none' stroke='%238FBF77' stroke-width='4' stroke-linecap='round'/%3E%3C/svg%3E") 0 100%/100% .2em no-repeat;
}

@media (prefers-reduced-motion:no-preference){
  /* the underline draws itself after the headline lands */
  .hero h1 em{animation:abs-underline .8s cubic-bezier(.6,.05,.3,1) .7s both}

  /* logo bars grow up from the baseline, then carry on bobbing. scale is
     a separate property from the bob's transform, so the two combine. */
  .phead__bars i, .hero__motif i{transform-origin:50% 100%;
    animation:abs-bar-grow .9s cubic-bezier(.34,1.56,.64,1) both, bar-bob 3.4s ease-in-out 1.2s infinite alternate}
  .phead__bars i:nth-child(1), .hero__motif i:nth-child(1){animation-delay:.15s, 1.2s}
  .phead__bars i:nth-child(2), .hero__motif i:nth-child(2){animation-delay:.27s, .3s}
  .phead__bars i:nth-child(3), .hero__motif i:nth-child(3){animation-delay:.39s, -.5s}
  .phead__bars i:nth-child(4), .hero__motif i:nth-child(4){animation-delay:.51s, -1.3s}

  /* scroll reveals land like paper: a soft rise, a slight tilt, a small overshoot */
  html.has-reveal [data-reveal]{transform:translateY(22px) rotate(-.6deg); transform-origin:0 100%;
    transition:opacity .6s ease, transform .85s cubic-bezier(.34,1.3,.64,1)}

  /* pieces inside the visuals drop in with a little give */
  html.has-reveal [data-reveal] .stage{transform:translateY(12px) rotate(-1.5deg) scale(.96)}
  html.has-reveal [data-reveal].is-visible .stage{animation:stage-in .6s cubic-bezier(.34,1.45,.64,1) forwards;
    animation-delay:calc(var(--i,0) * .12s + .25s)}

  /* cards tilt a fraction on hover, as if picked up */
  .xgrid > .xcard:hover, .insight-card:hover{rotate:-.5deg}
  .xgrid > .xcard, .insight-card{transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease, rotate .25s cubic-bezier(.34,1.56,.64,1)}
  html.has-reveal .insight-card[data-reveal]{transition:opacity .6s ease, transform .85s cubic-bezier(.34,1.3,.64,1),
    border-color .18s ease, box-shadow .18s ease, rotate .25s cubic-bezier(.34,1.56,.64,1)}
}
@keyframes abs-underline{from{background-size:0 .2em}to{background-size:100% .2em}}
@keyframes abs-bar-grow{from{scale:1 0}to{scale:1 1}}

/* ---------- 30. Pre-launch: Jude's amends, and more ECS-style whimsy ----
   Fixes from Jude's pre-launch list, then the cartoons and hand-written
   notes Phil asked for after looking at the ECS mock-up:
     - pencil sketches that draw themselves in when they scroll into view
       ([data-sketch] gets .go from site.js)
     - the team as stick people walking about on About
     - a ringing desk phone on the homepage, a tangle-to-tidy sketch on
       Why ABS, the office with a train going past on Contact
   Resting state is the finished drawing: without JavaScript, and under
   prefers-reduced-motion, everything is drawn and still.
   ------------------------------------------------------------------------ */

/* --- Jude: the coloured lines on the proof boxes sit on one line --- */
.trust-strip__item{align-content:start}

/* --- Jude: the "70 seconds" note sits just above the film --- */
.hero__film{position:relative; min-inline-size:0}
@media (min-width:960px){
  .hero__film .hero__scribble{inset-block-start:auto; inset-block-end:calc(100% - 4px); inset-inline-end:clamp(24px,6vw,96px)}
}

/* --- Jude: the ABS symbol in each picker box and in the answer --- */
.symptom__logo{inline-size:22px; block-size:auto; flex:none; filter:grayscale(1); opacity:.4; transition:filter .14s ease, opacity .14s ease}
.symptom:hover .symptom__logo{opacity:.7}
.symptom[aria-selected="true"] .symptom__logo{filter:none; opacity:1}
.answer__ico img{inline-size:34px; block-size:auto}

/* --- Jude: footer tagline on one line, ECS framed as a cross-sell --- */
.ftr__tagline{margin-top:10px; white-space:nowrap; font:700 var(--t-sm)/1.3 var(--font-display); color:var(--ink-inverse)}
.ftr .ftr__ecs{display:grid; gap:4px; margin-top:20px; max-inline-size:32ch; padding:14px 16px;
  border:1px solid var(--line-inverse); border-radius:var(--r); color:var(--ink-inverse-muted);
  font-size:var(--t-sm); line-height:1.45; text-decoration:none; transition:border-color .16s ease, transform .2s ease}
.ftr .ftr__ecs:hover{border-color:var(--sage); color:var(--ink-inverse); text-decoration:none}
.ftr__ecs-kicker{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--sage)}
.ftr__ecs b{font-family:var(--font-display); color:var(--ink-inverse)}
.ftr__ecs-go{display:inline-flex; align-items:center; gap:6px; margin-top:4px; font-weight:600; color:var(--sage)}

/* --- How we help: the header arrow swoops down to the six services --- */
.phead .phead__note--down{flex-direction:column; align-items:flex-start; gap:2px}
.phead__note--down svg{inline-size:150px; block-size:140px}
@media (min-width:1100px){
  /* clear of the intro text, with the arrow reaching the bottom edge of the header */
  .phead .phead__note--down{inset-block-start:auto; inset-block-end:calc(-1 * clamp(40px,5vw,64px) + 6px)}
  .phead__note--down svg{block-size:190px; margin-inline-start:30px}
}
@media (max-width:1099px){.phead__note--down svg{inline-size:60px; block-size:56px; margin-inline-start:0}}
.phead__note--down svg path{stroke-dasharray:400}
@media (prefers-reduced-motion:no-preference){.phead__note--down svg path{stroke-dashoffset:400}}

/* --- How we help: "Is Priority right for us?" on a taped note --- */
.fit-note{position:relative; margin-top:22px; padding:24px 24px 20px; border-radius:6px;
  background:#F9F1E8; border:1px solid #D3D3D3; color:#2A2A2A; box-shadow:0 18px 30px -24px rgba(42,42,42,.45);
  rotate:-.8deg}
.fit-note h3{margin:0 0 8px; font-size:var(--t-lg); color:#2A2A2A}
.fit-note p{color:#4F5A4E; margin:0}
.fit-note p + p{margin-top:10px}
.fit-note a{color:#3E6A2F; font-weight:600}
.fit-note__tape{position:absolute; inset-block-start:-11px; inset-inline-start:50%; inline-size:92px; block-size:22px;
  translate:-50% 0; rotate:3deg; background:rgba(181,138,82,.45); border-radius:2px}
.fit-note__scribble{position:absolute; inset-block-start:-30px; inset-inline-end:8px; rotate:5deg;
  font:600 22px/1 var(--font-hand); color:#7B4C4C; white-space:nowrap}

/* --- extra hand-written notes --- */
.picker-head{position:relative}
/* sits in the gap after the intro, arrow curling down into the list */
.picker-head__note{inset-block-start:auto; inset-block-end:-30px; inset-inline-start:min(40%,300px); align-items:flex-end; rotate:2deg}
.picker-head__note svg{margin-bottom:-14px}
@media (max-width:899px){.picker-head__note{display:none}}

.xgrid{position:relative}
.xgrid__note{inset-block-start:-34px; inset-inline-start:clamp(120px,18vw,230px); rotate:-2deg}
@media (max-width:679px){.xgrid__note{display:none}}

/* --- homepage Why ABS: the team's faces, bobbing --- */
.home-team{grid-column:1 / -1; display:flex; flex-wrap:wrap; align-items:center; gap:14px 20px; margin-top:6px;
  color:var(--accent-text); text-decoration:none}
.home-team:hover{text-decoration:none}
.home-team__faces{display:flex; padding-inline-start:10px}
.home-team__face{display:block; inline-size:54px; block-size:62px; margin-inline-start:-10px; overflow:hidden;
  background:#FFFFFF; border:1.5px solid var(--line-strong); border-radius:50% 50% 16px 16px;
  transition:margin .3s cubic-bezier(.34,1.56,.64,1)}
.home-team__face svg{display:block; inline-size:100%; block-size:100%}
.home-team:hover .home-team__face{margin-inline-start:-2px}
.home-team__txt{font:700 var(--t-md)/1.2 var(--font-display); text-decoration:underline; text-decoration-thickness:2px;
  text-underline-offset:5px; text-decoration-color:var(--brand-forest)}
.home-team__note{position:relative; inset:auto}
@media (prefers-reduced-motion:no-preference){
  .home-team__face{animation:abs-bob 2.4s ease-in-out infinite alternate; animation-delay:calc(var(--k) * -.4s)}
}
@keyframes abs-bob{from{translate:0 0}to{translate:0 -5px}}

/* --- pencil sketches (ECS-style) ---
   Lines carry pathLength="1" so one dash covers any shape. --d staggers
   the drawing order inside a sketch. */
.sketch-card, .team-scene{position:relative; margin:0; padding:clamp(10px,2vw,18px) clamp(10px,2vw,20px) 4px;
  background:#FFFFFF; border:1px solid var(--line); border-radius:22px; box-shadow:0 30px 60px -44px rgba(42,42,42,.4)}
.sketch-card svg, .team-scene__svg{display:block; inline-size:100%; block-size:auto; overflow:visible}
.sk-line{fill:none; stroke:#2A2A2A; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.sk-line--thin{stroke-width:1.5}
.sk-line--thick{stroke-width:3}
.sk-line--soft{stroke:#9FA5A8}
.sk-line--accent{stroke:#7B4C4C}
.sk-line--fill{fill:rgba(95,148,72,.14)}
.sk-hand{font:600 21px/1 var(--font-hand); fill:#2A2A2A}
.sk-hand--muted{fill:#3D3D3D; font-size:20px}
.sk-hand--big{font-size:30px; fill:#3E6A2F}
html.has-reveal [data-sketch] .sk-line{stroke-dasharray:1; stroke-dashoffset:1}
html.has-reveal [data-sketch] .sk-fade{opacity:0}
html.has-reveal [data-sketch] .sk-logo{opacity:0; transform-box:fill-box; transform-origin:50% 50%; scale:.5}
html.has-reveal [data-sketch] .sk-line--fill{fill-opacity:0}
html [data-sketch].go .sk-line{stroke-dashoffset:0; transition:stroke-dashoffset .8s cubic-bezier(.6,.1,.3,1) calc(var(--d,0) * .16s), fill-opacity .5s ease calc(var(--d,0) * .16s + .6s)}
html [data-sketch].go .sk-line--fill{fill-opacity:1}
html [data-sketch].go .sk-fade{opacity:1; transition:opacity .5s ease calc(var(--d,0) * .16s + .4s)}
html [data-sketch].go .sk-logo{opacity:1; scale:1; transition:scale .55s cubic-bezier(.34,1.7,.5,1) 1.1s, opacity .2s ease 1.1s}
html .tangle-sketch.go .sk-logo{transition-delay:1.6s}
.tangle-sketch{max-inline-size:900px; margin-inline:auto; rotate:-.6deg}
.office-sketch{max-inline-size:860px}

/* homepage CTA: the desk phone */
.phone-sketch{margin:22px 0 0; max-inline-size:300px; color:var(--accent-text)}
.phone-sketch svg{display:block; inline-size:100%; block-size:auto; overflow:visible}
.phone-sketch__handset path{fill:#F9F1E8; stroke:#2A2A2A; stroke-width:2; stroke-linejoin:round}
.phone-sketch__handset{transform-box:fill-box; transform-origin:12% 90%}
.phone-sketch__ring path{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; opacity:0}
.phone-sketch__note{fill:currentColor; font-size:22px}
.phone-sketch .sk-line--accent{stroke:currentColor}
:root[data-theme="dark"] .phone-sketch .sk-line:not(.sk-line--accent),
:root:not([data-theme="light"]) .phone-sketch .sk-line:not(.sk-line--accent){stroke:var(--ink)}
@media (prefers-color-scheme:light){:root:not([data-theme="dark"]) .phone-sketch .sk-line:not(.sk-line--accent){stroke:#2A2A2A}}

/* Contact: the office */
.office-win{fill:rgba(95,148,72,.14)}
.office-sign{font-size:30px; fill:#3E6A2F}
.office-hello{fill:#7B4C4C; font-size:24px}
.office-wave{transform-box:view-box}
.office-train{translate:120px 0}

/* --- About: the team, walking about --- */
.team-scene{padding-block-start:8px}
.team-scene__note{inset-block-start:18px; inset-inline-start:22px; align-items:flex-start; color:#7B4C4C; rotate:-3deg}
.team-scene__note svg{margin-top:10px}
@media (max-width:699px){.team-scene__note{display:none}}
.tm-name{font:600 21px/1 var(--font-hand); fill:#2A2A2A}
.tm-bubble-txt{font:600 21px/1 var(--font-hand); fill:#7B4C4C}
.tm-prop-txt{font:700 9px/1 var(--font-display); fill:#2A2A2A}
.tm-shadow{fill:rgba(42,42,42,.09)}
.tm-face{scale:var(--f,1) 1}
.tm-walker--still .tm-arm--front{rotate:-150deg}
/* a natural stance when standing still (and under reduced motion) */
.tm-leg--a{rotate:9deg}
.tm-leg--b{rotate:-7deg}
/* writing on a prop flips back, so it never reads mirrored */
.tm-prop-txt{transform-box:fill-box; transform-origin:center; scale:var(--f,1) 1}

.people{display:grid; gap:18px; grid-template-columns:repeat(auto-fill,minmax(min(100%,320px),1fr))}
.person{--c:var(--brand-forest); display:grid; grid-template-columns:64px minmax(0,1fr); gap:16px; align-items:start;
  padding:20px; background:var(--surface); border:1px solid var(--line); border-block-start:4px solid var(--c); border-radius:var(--r-lg)}
.person--michelle{--c:var(--brand-slate-blue)}
.person--jamie{--c:var(--brand-forest-deep)}
.person--nathan{--c:var(--brand-bronze)}
.person--nicky{--c:var(--sage)}
.person--jude{--c:var(--brand-burgundy)}
.person__face{inline-size:64px; block-size:75px; background:#FFFFFF; border:1px solid var(--line); border-radius:50% 50% 14px 14px}
.person h3{font-size:var(--t-md); margin:0}
.person__role{margin:4px 0 8px; font:700 var(--t-xs)/1.3 var(--font-display); letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text)}
.person p:not(.person__role){font-size:var(--t-sm); color:var(--ink-muted)}

@media (prefers-reduced-motion:no-preference){
  /* sketches: the phone keeps getting picked up; someone waves; a train goes by */
  .phone-sketch.go .phone-sketch__handset{animation:abs-lift 4s ease-in-out 1.6s infinite}
  .phone-sketch.go .phone-sketch__ring path{animation:abs-ring 4s ease-in-out 1.6s infinite}
  .office-sketch.go .office-wave{animation:abs-wave .9s ease-in-out 1.4s infinite alternate}
  .office-sketch.go .office-train{animation:abs-train 14s linear 1s infinite}
  .tangle-sketch.go .sk-logo{animation:abs-bob 2.6s ease-in-out 2.4s infinite alternate}
  .person:hover .person__face{rotate:-6deg}
  .person__face{transition:rotate .3s cubic-bezier(.34,1.56,.64,1)}

  /* the team: walkers stroll and turn; everyone's limbs swing */
  .tm-walker:not(.tm-walker--still){animation:tm-stroll var(--t) linear var(--o) infinite}
  .tm-walker:not(.tm-walker--still) .tm-face,
  .tm-walker:not(.tm-walker--still) .tm-prop-txt{animation:tm-turn var(--t) step-end var(--o) infinite}
  .tm-walker:not(.tm-walker--still) .tm-body{animation:tm-bob .45s ease-in-out infinite alternate}
  .tm-walker:not(.tm-walker--still) .tm-leg--a{animation:tm-swing .9s ease-in-out infinite alternate}
  .tm-walker:not(.tm-walker--still) .tm-leg--b{animation:tm-swing .9s ease-in-out -.9s infinite alternate}
  .tm-walker:not(.tm-walker--still) .tm-arm--front{animation:tm-swing-arm .9s ease-in-out infinite alternate}
  .tm-walker:not(.tm-walker--still) .tm-arm--back{animation:tm-swing-arm .9s ease-in-out -.9s infinite alternate}
  .tm-michelle .tm-leg, .tm-michelle .tm-arm, .tm-nicky .tm-leg, .tm-nicky .tm-arm{animation-duration:.75s!important}
  .tm-walker--still .tm-arm--front{animation:tm-wave 1.3s ease-in-out infinite alternate}
  .tm-jude .tm-arm--front{animation-duration:2.2s}
  .tm-walker--still .tm-arm--back{rotate:8deg}
  .tm-walker--still .tm-body{animation:tm-bob 1.6s ease-in-out infinite alternate}
  .tm-steam{animation:tm-steam 2s ease-in-out infinite}
  .tm-bubble{animation:tm-bubble 5s ease-in-out infinite}
  .tm-jude .tm-bubble{animation-delay:-2.5s}
  .team-scene:hover *, .team-scene:hover{animation-play-state:paused!important}
}
@keyframes abs-lift{0%,12%{translate:0 0; rotate:0deg}28%,70%{translate:8px -24px; rotate:-14deg}86%,100%{translate:0 0; rotate:0deg}}
@keyframes abs-ring{0%,4%{opacity:0}8%,24%{opacity:1}30%,100%{opacity:0}}
@keyframes abs-wave{from{rotate:-18deg}to{rotate:22deg}}
@keyframes abs-train{0%{translate:790px 0}55%{translate:120px 0}100%{translate:120px 0}}
@keyframes tm-stroll{0%{translate:0 0}50%{translate:var(--d) 0}100%{translate:0 0}}
@keyframes tm-turn{0%{scale:var(--f) 1}50%{scale:calc(var(--f) * -1) 1}}
@keyframes tm-bob{from{translate:0 0}to{translate:0 -2.5px}}
@keyframes tm-swing{from{rotate:-20deg}to{rotate:20deg}}
@keyframes tm-swing-arm{from{rotate:18deg}to{rotate:-18deg}}
@keyframes tm-wave{from{rotate:-165deg}to{rotate:-128deg}}
@keyframes tm-steam{0%,100%{opacity:.2; translate:0 0}50%{opacity:1; translate:0 -3px}}
@keyframes tm-bubble{0%,10%{opacity:0}18%,62%{opacity:1}72%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .tm-bubble{opacity:1}
  .phone-sketch__ring path{opacity:1}
}
/* notes inside a sketch draw their arrow when the sketch starts */
html [data-sketch].go .hand-note svg path{animation:hand-draw .9s ease-out .8s forwards}

/* Why ABS: no hairline between the header and the dark intro under it (Jude, pre-launch) */
.phead:has(+ .why-intro){border-bottom:0}

/* --- Hover without flicker (Jude, round 5: "flickering when you hover") ---
   Panels and cards used to lift 2-4px on hover. With the pointer near their
   lower or right edge, the lift moved the box out from under the pointer,
   the hover ended, the box dropped back under the pointer, and so on - a
   flicker. They now stay where they are: the hover still darkens the border
   and deepens the shadow, and icons and arrows inside still move, but the
   box itself never moves, so the pointer cannot fall off it. */
.offset:hover, html.has-reveal .offset[data-reveal].is-visible:hover{transform:none}
.xcard:hover, .xgrid > .xcard:hover, .newsitem:hover{transform:none; rotate:none}
.insight-card:hover, html.has-reveal .insight-card[data-reveal].is-visible:hover{transform:none; rotate:none}
.gloss:hover, html.has-reveal .gloss[data-reveal].is-visible:hover{transform:none; rotate:none}

/* ---------- 31. Insights: Phil's articles in the trade press ----------
   A dated list, newest first, grouped by year, from Phil's byline record.
   Each entry is a plain link out to the publisher. Like every other card
   since round 5, hovering changes the border and never moves the box. */
.press{display:grid; gap:clamp(30px,4vw,56px)}
.press__head{position:relative; display:grid; gap:12px; align-content:start}
@media (min-width:960px){
  .press{grid-template-columns:minmax(0,.85fr) minmax(0,1.6fr); align-items:start}
  /* the intro and counts stay in view while the list scrolls past */
  .press__head{position:sticky; inset-block-start:110px}
}
.press__head h2{font-size:var(--t-xl)}
.press__head > p:not(.eyebrow){color:var(--ink-muted); max-width:44ch}
.press__stats{display:grid; grid-template-columns:repeat(3,auto); justify-content:start; gap:10px clamp(16px,2vw,26px); margin:8px 0 0; padding-top:16px; border-top:1px solid var(--line-strong)}
.press__stats div{display:grid; gap:2px; align-content:start}
.press__stats dt{order:2; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-muted)}
.press__stats dd{order:1; margin:0; font:700 var(--t-2xl)/1 var(--font-display); color:var(--accent-text); font-variant-numeric:tabular-nums}
.press__stats div:nth-child(2) dd{color:var(--brand-slate-blue)}
.press__stats div:nth-child(3) dd{color:var(--brand-burgundy)}
.press__note{position:static; justify-self:start; margin-top:4px; rotate:-2deg}
@media (min-width:960px){.press__note svg{scale:-1 1}}

.press__list{display:grid; gap:14px}
.press__year{display:flex; align-items:center; gap:12px; margin:10px 0 0;
  font:700 var(--t-sm)/1 var(--font-display); letter-spacing:.14em; color:var(--ink-muted)}
.press__year::after{content:""; flex:1; border-top:1px dashed var(--line-strong)}
.press__year:first-child{margin-top:0}
.press__items{display:grid; gap:10px; margin:0; padding:0; list-style:none}
.press-item{display:grid; gap:6px; padding:16px 18px; border:1px solid var(--line); border-inline-start:4px solid var(--brand-forest);
  border-radius:var(--r); background:var(--surface); color:var(--ink); text-decoration:none;
  transition:border-color .16s ease, box-shadow .16s ease}
.press-item:hover{border-color:var(--brand-forest); box-shadow:var(--shadow-lift); text-decoration:none}
.press__items > li:nth-child(3n+2) .press-item{border-inline-start-color:var(--brand-slate-blue)}
.press__items > li:nth-child(3n) .press-item{border-inline-start-color:var(--brand-bronze)}
.press-item__meta{display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px 14px; font-size:var(--t-xs)}
.press-item__pub{font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--accent-text)}
.press-item__meta time{color:var(--ink-muted); font-variant-numeric:tabular-nums; white-space:nowrap}
.press-item__title{font:700 1.06rem/1.3 var(--font-display)}
.press-item__title::after{content:" \2197"; font-weight:400; color:var(--ink-muted); transition:color .16s ease}
.press-item:hover .press-item__title::after{color:var(--accent-text)}
.press-item__sum{font-size:var(--t-sm); line-height:1.5; color:var(--ink-muted)}
.press-item__tag{justify-self:start; padding:3px 9px; border-radius:999px; background:var(--bg-alt);
  font-size:var(--t-xs); font-weight:600; color:var(--ink-muted)}
.press-item--comment{background:var(--surface-sunk)}
@media (prefers-reduced-motion:reduce){.press-item, .press-item__title::after{transition:none}}
/* the slate and burgundy counts are too dark on the dark ground - lifted as in 26 */
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .press__stats div:nth-child(2) dd{color:#9FC7DE}
  :root:not([data-theme="light"]) .press__stats div:nth-child(3) dd{color:#D9B27A}
}
:root[data-theme="dark"] .press__stats div:nth-child(2) dd{color:#9FC7DE}
:root[data-theme="dark"] .press__stats div:nth-child(3) dd{color:#D9B27A}

/* ---------- 32. Legal pages: label/value tables and the SLA ----------
   Company details and version tables are two short columns, so they do not
   need the 560px minimum the wider tables keep for sideways scrolling.
   The SLA keeps the document's own clause numbers (1.1, 12.3) in front of
   each clause, and puts "covered" beside "excluded" in each service module. */
.legal__table--keys table{min-inline-size:0}
.legal__table--keys th{inline-size:36%}
.legal__table tbody th{font-family:var(--font-body); font-weight:600; background:var(--surface-sunk)}
.sla__no{display:inline-block; min-inline-size:2.6em; font:700 var(--t-sm)/1 var(--font-display); color:var(--accent-text); font-variant-numeric:tabular-nums}
.sla__applies{font-size:var(--t-sm); font-style:italic}
.sla__cols{display:grid; gap:4px 28px; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-sunk)}
.sla__cols > div{display:grid; gap:8px; align-content:start}
@media (min-width:700px){.sla__cols{grid-template-columns:1fr 1fr}}
/* footer: LinkedIn, the logo in the link colour so it lifts with it on hover */
.ftr a.ftr__social{display:inline-flex; align-items:center; gap:8px}
.ftr a.ftr__social svg{flex:none}
/* enquiry forms: the honeypot is off-screen and out of the tab order (a person
   never fills it, a bot does); the Turnstile slot takes no room until shown */
.form-hp{position:absolute; inset-inline-start:-9999px; inline-size:1px; block-size:1px; overflow:hidden}
[data-turnstile]:empty{display:none}