/* ============================================================
   IT System Integrators - itsystemintegrators.co.uk
   v1 - October 2026
   Palette and typography follow the Group Brand Guidelines (2026),
   shared with the other group sites. The ITSI logo uses the same greens
   and greys, so the tokens are unchanged; what makes this site ITSI's own
   is the interlocking-tile motif taken from the ITSI symbol.
   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 ITSI tile motif ---------- */
/* A miniature of the ITSI symbol: four tiles locking round a centre tile. */
.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:16px; block-size:16px; flex:none;
  background:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%225.8%22%20y%3D%225.3%22%20width%3D%228.4%22%20height%3D%2210.4%22%20rx%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23m%29%22%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%2210.5%22%20height%3D%227.6%22%20rx%3D%222%22%20fill%3D%22%233E6A2F%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%220%22%20width%3D%227.8%22%20height%3D%2211.4%22%20rx%3D%222%22%20fill%3D%22%233D3D3D%22%2F%3E%3Crect%20x%3D%22.7%22%20y%3D%2211.6%22%20width%3D%226.8%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%2213.2%22%20width%3D%228.6%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%227%22%20y%3D%226.5%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.6%22%20fill%3D%22%236FA556%22%2F%3E%3C%2Fsvg%3E") center/16px 16px 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%2020%2020%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%225.8%22%20y%3D%225.3%22%20width%3D%228.4%22%20height%3D%2210.4%22%20rx%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23m%29%22%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%2210.5%22%20height%3D%227.6%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%220%22%20width%3D%227.8%22%20height%3D%2211.4%22%20rx%3D%222%22%20fill%3D%22%239FA5A8%22%2F%3E%3Crect%20x%3D%22.7%22%20y%3D%2211.6%22%20width%3D%226.8%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%2213.2%22%20width%3D%228.6%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%23A6CE90%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%227%22%20y%3D%226.5%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.6%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%2020%2020%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%225.8%22%20y%3D%225.3%22%20width%3D%228.4%22%20height%3D%2210.4%22%20rx%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23m%29%22%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%2210.5%22%20height%3D%227.6%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%220%22%20width%3D%227.8%22%20height%3D%2211.4%22%20rx%3D%222%22%20fill%3D%22%239FA5A8%22%2F%3E%3Crect%20x%3D%22.7%22%20y%3D%2211.6%22%20width%3D%226.8%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%2213.2%22%20width%3D%228.6%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%23A6CE90%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%227%22%20y%3D%226.5%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.6%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%2020%2020%22%3E%3Cmask%20id%3D%22m%22%3E%3Crect%20width%3D%2220%22%20height%3D%2220%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%225.8%22%20y%3D%225.3%22%20width%3D%228.4%22%20height%3D%2210.4%22%20rx%3D%222.6%22%20fill%3D%22%23000%22%2F%3E%3C%2Fmask%3E%3Cg%20mask%3D%22url%28%23m%29%22%3E%3Crect%20x%3D%220%22%20y%3D%223%22%20width%3D%2210.5%22%20height%3D%227.6%22%20rx%3D%222%22%20fill%3D%22%235F9448%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%220%22%20width%3D%227.8%22%20height%3D%2211.4%22%20rx%3D%222%22%20fill%3D%22%239FA5A8%22%2F%3E%3Crect%20x%3D%22.7%22%20y%3D%2211.6%22%20width%3D%226.8%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%238FBF77%22%2F%3E%3Crect%20x%3D%2211.4%22%20y%3D%2213.2%22%20width%3D%228.6%22%20height%3D%226.8%22%20rx%3D%222%22%20fill%3D%22%23A6CE90%22%2F%3E%3C%2Fg%3E%3Crect%20x%3D%227%22%20y%3D%226.5%22%20width%3D%226%22%20height%3D%228%22%20rx%3D%221.6%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);
}
.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}
  @keyframes hero-arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;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__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__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)}
.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/itsi-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 ----------------------------------
   Four grounds, all inside the official palette, all contrast-checked
   against WCAG AA. Set on <html>: data-hero="forest" | "slate" |
   "slate-bronze" | "linen". ITSI uses slate (set in layout.html), so the
   green tiles of the hero illustration carry the colour.

   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);
}
.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 ----------------------------------------
   Greens and the secondary palette break up the linen sections: 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);
}

/* ---------- 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/itsi-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. 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/itsi-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(4,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){.credential-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.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){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){transition-delay:.18s}
html.has-reveal .xgrid > :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 .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 ----------------------------------
   Charcoal and green, soft corners everywhere, 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/itsi-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/itsi-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--us .g-msg__av{background:var(--brand-forest-deep);border-color:var(--brand-forest-deep);padding:6px}
.g-msg--us .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--us .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. Colour, notes and movement ------------------------------
   Problem-led labels in the How we help menu and footer; a hand-written
   note on every page; movement, colour, boxes and illustration so no page
   reads as flat. Same rule as above: 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{
  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: the ITSI symbol's tiles in the accent colours, set into the
   bottom-right corner, plus a hand-written note */
.phead__tiles{position:absolute; inset-inline-end:clamp(20px,5vw,40px);
  inset-block-end:calc(-1 * clamp(40px,5vw,64px) - 30px);
  inline-size:clamp(190px,18vw,240px); block-size:clamp(190px,18vw,240px); pointer-events:none}
/* the tile cluster is the page-header motif, so no watermark behind it */
.phead::after{content:none}
.phead__tiles i{position:absolute; display:block; border-radius:14px}
.phead__tiles i:nth-child(1){left:0; top:14%; width:52%; height:38%; background:var(--brand-forest-deep)}
.phead__tiles i:nth-child(2){left:57%; top:0; width:38%; height:59%; background:var(--brand-slate-blue)}
.phead__tiles i:nth-child(3){left:3%; top:58%; width:34%; height:34%; background:var(--brand-bronze)}
.phead__tiles i:nth-child(4){left:57%; top:66%; width:43%; height:34%; background:var(--brand-forest)}
.phead__tiles i:nth-child(5){left:35.5%; top:33.7%; width:31%; height:40%; background:var(--sage);
  box-shadow:0 0 0 7px var(--brand-night)}
.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) + clamp(200px,19vw,252px))}
}
@media (max-width:760px){.phead__tiles{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__tiles i:not(:last-child){animation:tile-drift 3.4s ease-in-out infinite alternate}
  .phead__tiles i:nth-child(1){--dx:-6px; --dy:-4px}
  .phead__tiles i:nth-child(2){--dx:6px; --dy:-6px; animation-delay:-.9s}
  .phead__tiles i:nth-child(3){--dx:-6px; --dy:6px; animation-delay:-1.7s}
  .phead__tiles i:nth-child(4){--dx:6px; --dy:5px; animation-delay:-2.5s}
}
@keyframes note-in{from{opacity:0; translate:0 8px}to{opacity:1; translate:0 0}}
@keyframes tile-drift{from{translate:0 0}to{translate:var(--dx,0) var(--dy,0)}}

/* 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}}

/* About: illustrated, colour-coded sector cards */
.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)}

/* Use cases: one colour each */
.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"]) .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"]) .sector-card--bronze .sector-card__index,
  :root:not([data-theme="light"]) .use-case-grid > :nth-child(3) > span{color:#D9B27A}
}
: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"] .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__tiles 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__tiles, .phead__note{display:none!important}
  .phead{background:none; color:#000; padding:0}
  .phead h1, .phead p{color:#000}
  .legal{display:block}
}

/* ---------- 28. ITSI components ------------------------------------------
   Everything below is ITSI's own. The rule from section 24 still applies:
   the resting state is the finished state, and every animation is off
   under prefers-reduced-motion.
   ------------------------------------------------------------------------ */

/* Hero illustration: the ITSI symbol, built from real elements so each
   tile can carry a label and slide into place. Geometry is measured from
   the logo artwork (percentages of a square). The centre tile's "cut" is
   a ring in the hero ground colour, exactly as the logo does it. */
.hero__visual{position:relative; display:grid; place-items:center}
.tiles{position:relative; container-type:inline-size; inline-size:min(100%,500px); aspect-ratio:1; margin:0}
.tiles__t{position:absolute; display:flex; padding:4.2cqi; border-radius:7cqi; box-shadow:0 22px 40px -26px rgba(0,0,0,.7)}
.tiles__t b{align-self:var(--lbl-y,flex-start); margin-inline:var(--lbl-x,0 auto);
  padding:1.3cqi 2.4cqi; border-radius:2cqi; background:rgba(18,24,15,.62); color:#FFFFFF;
  font:700 clamp(.72rem,3.1cqi,.95rem)/1.15 var(--font-display); letter-spacing:.005em; white-space:nowrap}
.tiles__t--tl{left:0; top:14%; width:51.8%; height:38%; background:linear-gradient(180deg,#62954A,#3E6A2F)}
.tiles__t--tr{left:56.9%; top:0; width:38.1%; height:58.8%; background:linear-gradient(90deg,#3D3D3D,#9A9A9A)}
.tiles__t--bl{left:3.4%; top:58.2%; width:34%; height:33.6%; background:linear-gradient(90deg,#5F9448,#3E6A2F); --lbl-y:flex-end}
.tiles__t--br{left:56.9%; top:65.9%; width:43.1%; height:34.1%; background:linear-gradient(90deg,#62A045,#82B866); --lbl-y:flex-end; --lbl-x:auto 0}
.tiles__t--c{left:35.5%; top:33.7%; width:31.1%; height:39.6%; z-index:2; flex-direction:column; justify-content:center; align-items:center; gap:2.4cqi;
  background:linear-gradient(160deg,#62A045,#82B866); box-shadow:0 0 0 3.5cqi var(--hero-bg), 0 26px 50px -20px rgba(0,0,0,.8)}
.tiles__t--c b{align-self:center; margin:0; background:rgba(18,24,15,.78); font-size:clamp(.78rem,3.4cqi,1.02rem)}
.tiles__t--c img{inline-size:38%; block-size:auto; filter:drop-shadow(0 4px 8px rgba(0,0,0,.25))}
@media (prefers-reduced-motion:no-preference){
  .tiles__t{animation:tile-in .9s cubic-bezier(.2,.9,.25,1.15) both, tile-float 4.2s ease-in-out 1.9s infinite alternate}
  .tiles__t--tl{--from:-16cqi -10cqi; --dx:-.8cqi; --dy:-.6cqi; animation-delay:.15s, 1.9s}
  .tiles__t--tr{--from:14cqi -14cqi;  --dx:.8cqi;  --dy:-.8cqi; animation-delay:.3s, 2.6s}
  .tiles__t--bl{--from:-14cqi 14cqi;  --dx:-.8cqi; --dy:.8cqi;  animation-delay:.45s, 3.1s}
  .tiles__t--br{--from:16cqi 12cqi;   --dx:.8cqi;  --dy:.6cqi;  animation-delay:.6s, 2.2s}
  .tiles__t--c{animation:tile-click .7s cubic-bezier(.3,1.5,.5,1) 1.05s both}
  .tiles__t b{animation:note-in .5s ease-out 1.5s both}
}
@keyframes tile-in{from{opacity:0; translate:var(--from,0 0)}to{opacity:1; translate:0 0}}
@keyframes tile-float{to{transform:translate(var(--dx,0),var(--dy,0))}}
@keyframes tile-click{0%{opacity:0; transform:scale(.55)}70%{opacity:1; transform:scale(1.06)}100%{opacity:1; transform:none}}
.tiles__cap{position:absolute; inset-inline:0; inset-block-end:-34px; text-align:center; font-size:var(--t-xs); color:var(--hero-ink-muted)}
@media (max-width:959px){.tiles{inline-size:min(100%,380px)}.hero__visual{padding-bottom:30px}}

/* Screenshot showcase: tabs beside a framed screen. Without JS every
   screen shows, stacked, and the tabs are plain links down to them. */
.showcase-band{position:relative; overflow:hidden; background:var(--brand-night); color:var(--ink-inverse)}
.showcase-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%)}
.showcase-band h2{color:#FFFFFF}
.showcase-band .lede{color:#D0D6D0; font-size:var(--t-md); max-width:56ch}
.showcase{display:grid; gap:clamp(24px,4vw,44px)}
@media (min-width:960px){.showcase{grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr); align-items:center}}
.showcase__tabs{display:grid; gap:8px}
.showcase__tab{display:grid; grid-template-columns:auto 1fr; column-gap:14px; row-gap:3px; padding:15px 18px;
  border:1.5px solid #4A504C; border-radius:var(--r); background:#343936; color:#E5E9E4; text-decoration:none;
  transition:border-color .15s ease, background .15s ease}
.showcase__tab:hover{border-color:var(--sage); text-decoration:none}
.showcase__tab i{grid-row:span 2; align-self:center; inline-size:12px; block-size:12px; border-radius:4px; background:#58615B; transition:background .15s ease}
.showcase__tab b{font:700 1rem/1.25 var(--font-display); color:#FFFFFF}
.showcase__tab span{font-size:var(--t-sm); line-height:1.45; color:#BFC9BF}
.showcase__tab[aria-selected="true"]{border-color:var(--sage); background:#36472F}
.showcase__tab[aria-selected="true"] i{background:var(--sage)}
.showcase__stage{position:relative; display:grid; gap:26px}
.showcase.is-ready .showcase__stage{gap:0}
.showcase.is-ready .shot:not(.is-active){display:none}
@media (prefers-reduced-motion:no-preference){.showcase.is-ready .shot.is-active{animation:hero-arrive .45s ease-out both}}
.shot{position:relative; margin:0}
.shot img{inline-size:100%; block-size:auto}
.shot figcaption{margin-top:10px; font-size:var(--t-xs); color:var(--ink-muted); text-align:center}
.showcase-band .shot figcaption{color:#BFC9BF}
.showcase__note{position:absolute; z-index:3; inset-block-start:-14px; inset-inline-end:8px; color:#A6CE90;
  font:600 clamp(19px,1.6vw,24px)/1 var(--font-hand); transform:rotate(-4deg); pointer-events:none}
@media (max-width:959px){.showcase__note{display:none}}

/* Software cards: Standard ERP leads, partner products beside it */
.software{display:grid; gap:18px}
@media (min-width:700px){.software{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:1040px){.software{grid-template-columns:1.25fr 1fr 1fr}.soft--lead{grid-row:span 2}}
.soft{--soft:var(--brand-forest); display:grid; gap:14px; align-content:start; padding:clamp(22px,2.6vw,30px);
  border:1px solid var(--line); border-block-start:4px solid var(--soft); border-radius:var(--r-lg);
  background:var(--surface); color:var(--ink); text-decoration:none; box-shadow:var(--shadow-card);
  transition:border-color .16s ease, transform .16s ease, box-shadow .16s ease}
a.soft:hover{transform:translateY(-2px); box-shadow:var(--shadow-lift); text-decoration:none}
.soft--lead{background:var(--brand-night); border-color:var(--brand-night); border-block-start-color:var(--sage); color:var(--ink-inverse)}
.soft:nth-child(2){--soft:var(--brand-slate-blue)}
.soft:nth-child(3){--soft:var(--brand-burgundy)}
.soft:nth-child(4){--soft:var(--brand-forest-deep)}
.soft:nth-child(5){--soft:var(--brand-bronze)}
.soft__kicker{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.soft--lead .soft__kicker{color:#A6CE90}
.soft h3{font-size:var(--t-lg)}
.soft--lead h3{font-size:var(--t-xl); color:#FFFFFF; letter-spacing:-.005em; word-spacing:.14em}
.soft p{font-size:var(--t-sm); color:var(--ink-muted)}
.soft--lead p{color:#D0D6D0; font-size:var(--t-base)}
.soft ul{display:grid; gap:8px; margin-top:2px}
.soft li{position:relative; padding-inline-start:20px; font-size:var(--t-sm); color:var(--ink-muted)}
.soft--lead li{color:#D0D6D0}
.soft li::before{content:""; position:absolute; inset-inline-start:0; inset-block-start:.55em; inline-size:8px; block-size:8px; border-radius:3px; background:var(--soft)}
.soft--lead li::before{background:var(--sage)}
.soft__more{margin-top:auto; padding-top:6px; display:inline-flex; align-items:center; gap:7px;
  font:700 var(--t-sm)/1 var(--font-display); color:var(--accent-text)}
.soft--lead .soft__more{color:#A6CE90}
.soft__logo{block-size:38px; inline-size:auto; justify-self:start; padding:4px 8px; border-radius:6px; background:#FFFFFF}
@media (prefers-reduced-motion:reduce){a.soft:hover{transform:none}}

/* Chip lists: platforms, sectors, file formats */
.chips{display:flex; flex-wrap:wrap; gap:8px}
.chips li{padding:7px 13px; border-radius:999px; border:1px solid var(--line); background:var(--surface);
  font:600 var(--t-sm)/1.2 var(--font-display); color:var(--ink)}
.chips--dark li{background:#343936; border-color:#4A504C; color:#E5E9E4}

/* Standard ERP modules */
.mods{display:grid; gap:14px; grid-template-columns:repeat(auto-fill,minmax(220px,1fr))}
.mod{--m:var(--brand-forest); display:grid; gap:10px; align-content:start; padding:22px;
  border:1px solid var(--line); border-block-start:4px solid var(--m); border-radius:var(--r-lg);
  background:var(--surface); box-shadow:var(--shadow-card)}
.mod:nth-child(4n+2){--m:var(--brand-slate-blue)}
.mod:nth-child(4n+3){--m:var(--brand-bronze)}
.mod:nth-child(4n+4){--m:var(--brand-forest-deep)}
.mod h3{font-size:var(--t-md)}
.mod p{font-size:var(--t-sm); line-height:1.55; color:var(--ink-muted)}
html.has-reveal .mods > :nth-child(3n+2){transition-delay:.08s}
html.has-reveal .mods > :nth-child(3n){transition-delay:.16s}

/* Team */
.team{display:grid; gap:16px; grid-template-columns:repeat(3,minmax(0,1fr))}
.person{display:grid; gap:12px; align-content:start; padding:24px; border:1px solid var(--line);
  border-block-start:4px solid var(--p,var(--brand-forest)); border-radius:var(--r-lg); background:var(--surface); box-shadow:var(--shadow-card)}
.person:nth-child(2){--p:var(--brand-slate-blue)}
.person:nth-child(3){--p:var(--brand-bronze)}
.person__photo{position:relative; display:grid; place-items:center; aspect-ratio:4/3; border-radius:var(--r);
  border:1.5px dashed var(--line-strong); background:var(--surface-sunk); overflow:hidden}
.person__photo span{font:800 2.4rem/1 var(--font-display); letter-spacing:.06em; color:var(--p,var(--brand-forest))}
.person__photo small{position:absolute; inset-block-end:10px; font-size:var(--t-xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#8A6A28}
.person h3{font-size:var(--t-lg)}
.person__role{font-size:var(--t-xs); font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--accent-text)}
.person p:last-child{font-size:var(--t-sm); color:var(--ink-muted)}
@media (max-width:900px){.team{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.team{grid-template-columns:1fr}}

/* Associated company callout - ECS for websites and e-commerce */
.ecs{display:grid; grid-template-columns:auto 1fr auto; gap:18px 26px; align-items:center; padding:clamp(22px,3vw,32px);
  border:1.5px dashed var(--brand-bronze); border-radius:var(--r-lg); background:var(--bg-alt)}
.ecs__mark{display:grid; place-items:center; inline-size:64px; block-size:64px; border-radius:16px; background:var(--brand-bronze);
  color:#1A1A1A; font:800 1.15rem/1 var(--font-display); letter-spacing:.06em}
.ecs h3{font-size:var(--t-md)}
.ecs p{font-size:var(--t-sm); color:var(--ink-muted); margin-top:5px; max-width:62ch}
@media (max-width:700px){.ecs{grid-template-columns:1fr}}

/* Why ITSI: a checklist on a dark panel */
.whylist{display:grid; gap:12px 28px; grid-template-columns:repeat(2,minmax(0,1fr))}
.whylist li{display:grid; grid-template-columns:auto 1fr; gap:12px; align-items:start; font:600 var(--t-base)/1.4 var(--font-display); color:var(--ink)}
.whylist svg{inline-size:22px; block-size:22px; margin-top:1px; color:var(--brand-forest)}
@media (max-width:640px){.whylist{grid-template-columns:1fr}}

/* Hosting - a nightly check sheet */
.g-status{display:grid; gap:10px}
.g-status__row{display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:12px 14px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-sunk); font-size:var(--t-sm)}
.g-status__row svg{inline-size:18px; block-size:18px; color:var(--brand-forest)}
.g-status__row b{font:700 var(--t-sm)/1.3 var(--font-display)}
.g-status__row small{display:block; font-size:var(--t-xs); color:var(--ink-muted); font-weight:400}
.g-status__row time{font-size:var(--t-xs); font-weight:600; color:var(--brand-bronze); font-variant-numeric:tabular-nums}

/* Framed product image on a light card (FreeLife artwork has a white ground) */
.artcard{margin:0; padding:clamp(14px,2vw,22px); border-radius:var(--r-lg); background:#FFFFFF; border:1px solid var(--line)}
.artcard img{inline-size:100%; block-size:auto; border-radius:var(--r-sm)}
.artcard figcaption{margin-top:10px; font-size:var(--t-xs); color:#4F5A4E; text-align:center}

/* Standard ERP in the middle of the moving system map, and the ITSI mark
   inside the service illustrations (in place of a partner logo on white) */
.erp-flow__core{flex-direction:column; gap:2px}
.erp-flow__core strong{font-size:1.15rem}
.erp-flow__by{font-size:var(--t-xs); color:#C6D4BC; letter-spacing:.06em}
.g-modules__core img.g-modules__mark, .g-link__core img.g-modules__mark{inline-size:34px; block-size:34px; padding:0; background:none; border-radius:0}

/* the sibling-company chip in the footer carries a short descriptor */
.ftr__sib small{margin-inline-start:6px; font-weight:600; font-family:var(--font-body); color:#C6D4BC}

@media (prefers-reduced-motion:reduce){
  .tiles__t, .tiles__t b, .showcase.is-ready .shot.is-active{animation:none!important; opacity:1; translate:none; transform:none}
}