/* GENERATED by deliverables/build_page.py - do not edit.
   Source: the <style> block in prototype.html, plus the brand layer and
   SITE_CSS in the builder. Your changes here are lost on the next build. */


/* ============================================================
   TOKENS
   ============================================================ */
:root{
  --paper:#EFF2F1;
  --surface:#FFFFFF;
  --surface-2:#F7F9F9;
  --ink:#0E1A1C;
  --ink-2:#3D4E52;
  --muted:#6C7E82;
  --line:#D6DEDD;
  --line-soft:#E5EBEA;

  --band-bg:#0E1F20;
  --band-ink:#F2F5F4;
  --band-ink-2:#A8BAB8;
  --band-line:#254040;
  --band-sheet:#FBFCFC;

  --accent:#A8482F;
  --accent-hi:#C4573B;
  --accent-ink:#8F3B25;
  --accent-wash:#F7EAE6;

  --ok:#2E7358;
  --warn:#B07C1E;
  --risk:#A8402A;

  --shadow-sm:0 1px 2px rgba(14,26,28,.05), 0 6px 18px -10px rgba(14,26,28,.16);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.55), 0 4px 12px rgba(0,0,0,.25);

  --display:"Archivo","Helvetica Neue",Helvetica,Arial,sans-serif;
  --prose:"Source Serif 4",Georgia,"Iowan Old Style","Palatino Linotype",serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --measure:62ch;
  --field:460px;
  --gutter:clamp(20px,4vw,44px);
  --maxw:1160px;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#0C1516; --surface:#131F20; --surface-2:#182626;
    --ink:#E8EEED; --ink-2:#AFC0BE; --muted:#7B8D8C;
    --line:#243434; --line-soft:#1D2C2C;
    --band-bg:#081413; --band-ink:#F2F5F4; --band-ink-2:#A8BAB8;
    --band-line:#223A39; --band-sheet:#EDF1F0;
    --accent:#CD6046; --accent-hi:#DE7259; --accent-ink:#E58267; --accent-wash:#2A1712;
    --ok:#4E9C79; --warn:#CC9A3A; --risk:#CE6249;
    --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
    --shadow-lg:0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"]{
  --paper:#0C1516; --surface:#131F20; --surface-2:#182626;
  --ink:#E8EEED; --ink-2:#AFC0BE; --muted:#7B8D8C;
  --line:#243434; --line-soft:#1D2C2C;
  --band-bg:#081413; --band-ink:#F2F5F4; --band-ink-2:#A8BAB8;
  --band-line:#223A39; --band-sheet:#EDF1F0;
  --accent:#CD6046; --accent-hi:#DE7259; --accent-ink:#E58267; --accent-wash:#2A1712;
  --ok:#4E9C79; --warn:#CC9A3A; --risk:#CE6249;
  --shadow-sm:0 1px 2px rgba(0,0,0,.4), 0 6px 18px -10px rgba(0,0,0,.6);
  --shadow-lg:0 24px 60px -20px rgba(0,0,0,.75), 0 4px 12px rgba(0,0,0,.4);
}

/* ============================================================
   BASE
   ============================================================ */
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--display);font-size:17px;line-height:1.6;-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--display);font-weight:700;line-height:1.07;letter-spacing:-.024em;margin:0;text-wrap:balance}
h1{font-size:clamp(2.15rem,4.4vw,3.5rem);font-weight:800;letter-spacing:-.038em;line-height:1.02}
h2{font-size:clamp(1.55rem,3vw,2.15rem)}
h3{font-size:1.05rem;font-weight:650;letter-spacing:-.012em}
p{margin:0}
a{color:var(--accent-ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:3px}

.shell{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gutter)}
.stack{display:flex;flex-direction:column}
.s8{gap:8px}.s12{gap:12px}.s16{gap:16px}.s20{gap:20px}.s28{gap:28px}.s36{gap:36px}

.band{padding-block:clamp(21px,2.75vw,34px);border-top:1px solid var(--line)}
.band--raised{background:var(--surface)}

.lede{font-family:var(--prose);font-size:clamp(1.06rem,1.6vw,1.19rem);color:var(--ink-2);line-height:1.58;max-width:var(--measure)}
.body-2{font-family:var(--prose);color:var(--ink-2);line-height:1.6}
.small{font-size:.86rem;color:var(--muted)}

/* ============================================================
   MASTHEAD
   ============================================================ */
.masthead{position:sticky;top:0;z-index:60;background:var(--band-bg);border-bottom:1px solid var(--band-line)}
.masthead__inner{max-width:var(--maxw);margin:0 auto;padding:13px var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:18px}
.wordmark{font-family:var(--display);font-weight:800;font-size:.95rem;letter-spacing:.01em;color:var(--band-ink);text-decoration:none}
.wordmark i{font-style:normal;font-weight:400;color:var(--band-ink-2)}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{font-family:var(--display);font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;justify-content:center;gap:9px;padding:13px 24px;border-radius:3px;border:1px solid transparent;text-decoration:none;cursor:pointer;transition:background .16s,border-color .16s,color .16s}
.btn--solid{background:var(--accent);color:#fff}
.btn--solid:hover{background:var(--accent-hi)}
.btn--line{background:transparent;color:var(--ink);border-color:var(--line)}
.btn--line:hover{border-color:var(--ink-2)}
.btn--ghost{background:transparent;color:var(--band-ink);border-color:var(--band-line)}
.btn--ghost:hover{border-color:var(--band-ink-2)}
.btn--sm{padding:8px 15px;font-size:.85rem}
.btn--lg{padding:16px 30px;font-size:1.02rem}
.btn:disabled{opacity:.55;cursor:not-allowed}

/* ============================================================
   HERO
   ============================================================ */
.hero{background:var(--band-bg);color:var(--band-ink);padding-block:clamp(20px,2.5vw,32px);overflow:hidden}
.hero__grid{display:grid;gap:clamp(40px,5vw,60px);grid-template-columns:1fr;align-items:center}
@media(min-width:920px){.hero__grid{grid-template-columns:1.04fr .96fr}}
.hero h1{color:var(--band-ink)}

.stance{display:flex;flex-direction:column;gap:5px;max-width:44ch}
.stance p{font-size:clamp(1rem,1.6vw,1.14rem);line-height:1.45;color:var(--band-ink-2)}
.stance p b{color:var(--band-ink);font-weight:650}
.stance p.verdict{color:var(--band-ink);font-weight:650;padding-top:7px}

.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__terms{display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;font-size:.88rem;color:var(--band-ink-2)}
.hero__terms i{font-style:normal;color:var(--band-line);user-select:none}

/* ---- the deliverable ---- */
.sheet{background:var(--band-sheet);color:#12201F;border-radius:4px;box-shadow:var(--shadow-lg);max-height:470px;overflow:hidden;position:relative}
.sheet::after{content:"";position:absolute;inset:auto 0 0 0;height:88px;background:linear-gradient(to bottom,rgba(251,252,252,0),var(--band-sheet))}
.sheet__top{padding:20px 26px 16px;border-bottom:1px solid #DCE4E3;display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.sheet__id{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:#7A8C8A}
.sheet__title{font-size:1.14rem;font-weight:700;letter-spacing:-.022em;margin-top:5px;color:#12201F}
/* 01/09 audit: was 9px at 2.65:1. This is the label that says the sample is
   not a real client's findings, so it is the one thing on the sheet nobody
   should be able to miss. --muted is 5.05:1 on the sheet. */
.sheet__stamp{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);border:1px solid var(--muted);padding:3px 8px;border-radius:2px;white-space:nowrap}
.verdictbox{padding:18px 26px;background:#F1F5F4;border-bottom:1px solid #DCE4E3}
.verdictbox span{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:#7A8C8A;display:block;margin-bottom:6px}
.verdictbox p{font-size:.99rem;font-weight:650;line-height:1.4;color:#12201F;letter-spacing:-.014em}
.sheet__rows{padding:6px 26px 34px}
.srow{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-bottom:1px solid #E7EDEC;font-size:.9rem;color:#33474A}
.srow:last-child{border-bottom:0}
.srow__v{display:flex;align-items:center;gap:7px;font-size:.78rem;font-weight:600;white-space:nowrap;flex:none}
.dot{width:7px;height:7px;border-radius:50%;flex:none}
.dot--ok{background:#2E7358}.dot--warn{background:#B07C1E}.dot--risk{background:#A8402A}
.v--ok{color:#2E7358}.v--warn{color:#8F6416}.v--risk{color:#8F3623}

/* ============================================================
   SYMPTOMS - cold open, no numbering
   ============================================================ */
.symptoms{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));column-gap:44px;border-top:1px solid var(--line);margin-top:30px}
.symptom{padding:17px 0;border-bottom:1px solid var(--line-soft);color:var(--ink-2);font-size:.99rem;line-height:1.5}

/* ============================================================
   POLICY vs SYSTEM
   ============================================================ */
.gapwrap{display:grid;gap:clamp(30px,4vw,52px);grid-template-columns:1fr;align-items:start}
@media(min-width:940px){.gapwrap{grid-template-columns:.8fr 1.2fr}}
.gaptable{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface)}
.gaphead{display:grid;grid-template-columns:1fr 1fr;background:var(--surface-2);border-bottom:1px solid var(--line)}
.gaphead span{padding:12px 18px;font-size:.82rem;font-weight:650;color:var(--ink-2)}
.gaphead span:last-child{border-left:1px solid var(--line);color:var(--accent-ink)}
.gaprow{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line-soft)}
.gaprow:last-child{border-bottom:0}
.gaprow p{padding:16px 18px;font-size:.94rem;line-height:1.45;color:var(--ink-2)}
.gaprow p:last-child{border-left:1px solid var(--line);background:var(--accent-wash);color:var(--ink)}
@media(max-width:520px){
  .gaphead,.gaprow{grid-template-columns:1fr}
  .gaphead span:last-child,.gaprow p:last-child{border-left:0;border-top:1px solid var(--line)}
}

/* ============================================================
   AREAS - no tags
   ============================================================ */
.areas{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;grid-template-columns:repeat(auto-fit,minmax(262px,1fr));margin-top:28px}
.area{background:var(--surface);padding:22px 20px;display:flex;flex-direction:column;gap:7px}
.area p{font-size:.92rem;color:var(--ink-2);line-height:1.5}

/* ============================================================
   GENERIC
   ============================================================ */
.ticks{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:12px}
.ticks li{position:relative;padding-left:26px;color:var(--ink-2);font-size:.99rem;line-height:1.5;font-family:var(--prose)}
.ticks li::before{content:"";position:absolute;left:2px;top:.45em;width:12px;height:6px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

.steps{display:grid;gap:1px;background:var(--line);border-block:1px solid var(--line);grid-template-columns:repeat(auto-fit,minmax(228px,1fr));margin-top:30px}
.step{background:var(--paper);padding:24px 20px;display:flex;flex-direction:column;gap:7px}
.step__n{font-size:1.5rem;font-weight:800;letter-spacing:-.04em;color:var(--line);line-height:1;margin-bottom:4px}
.step p{font-size:.92rem;color:var(--ink-2);line-height:1.5}

.split{display:grid;gap:clamp(34px,5vw,56px);grid-template-columns:1fr}
@media(min-width:900px){.split{grid-template-columns:1fr 1fr}}
.chips{display:flex;flex-wrap:wrap;gap:7px}
.tag{font-size:.84rem;padding:5px 11px;border:1px solid var(--line);border-radius:2px;color:var(--ink-2)}

/* ============================================================
   QUESTIONNAIRE
   ============================================================ */
.eyebrow{font-family:var(--mono);font-size:.69rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent-ink)}
.qcard{background:var(--surface);border:1px solid var(--line);border-radius:4px;box-shadow:var(--shadow-sm);overflow:hidden;max-width:1040px}
.qhead{padding:18px clamp(20px,3vw,32px);border-bottom:1px solid var(--line);background:var(--surface-2);display:flex;flex-direction:column;gap:11px}
.qhead__row{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;justify-content:space-between}
.qhead strong{font-size:1rem;font-weight:700;letter-spacing:-.016em}
.qhead__count{font-size:.85rem;color:var(--muted)}
.qbar{height:3px;border-radius:2px;background:var(--line);overflow:hidden}
.qbar i{display:block;height:100%;background:var(--accent);transition:width .3s cubic-bezier(.4,0,.2,1)}

.qbody{padding:clamp(24px,3vw,40px);max-width:900px}
.qstep{display:none;flex-direction:column;gap:28px}
.qstep.is-active{display:flex}
.qstep__intro{font-family:var(--prose);font-size:1rem;color:var(--ink-2)}

.q{display:flex;flex-direction:column;gap:10px}
.q__label{font-weight:640;font-size:.99rem;letter-spacing:-.01em;line-height:1.35}
.q__help{font-size:.85rem;color:var(--muted);line-height:1.45;margin-top:-3px}
.q__req{color:var(--accent);font-weight:400}

.opts{display:flex;flex-wrap:wrap;gap:7px}
.opt{display:inline-flex;align-items:center;gap:9px;cursor:pointer;font-size:.92rem;color:var(--ink-2);padding:9px 15px;border:1px solid var(--line);border-radius:3px;background:var(--surface);transition:border-color .14s,background .14s,color .14s}
.opt:hover{border-color:var(--ink-2)}
.opt input{position:absolute;opacity:0;width:0;height:0}
.opt__dot{width:14px;height:14px;border-radius:50%;border:1.5px solid var(--line);flex:none;transition:border-color .14s,border-width .14s}
.opt input:checked ~ .opt__dot{border-color:var(--accent);border-width:4.5px}
.opt:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}
.opt:has(input:focus-visible){outline:2px solid var(--focus);outline-offset:2px}


.opt--check .opt__box{width:14px;height:14px;border-radius:2px;border:1.5px solid var(--line);flex:none;position:relative;transition:border-color .14s,background .14s}
.opt--check input:checked ~ .opt__box{border-color:var(--accent);background:var(--accent)}
.opt--check input:checked ~ .opt__box::after{content:"";position:absolute;left:3.5px;top:1px;width:4px;height:8px;border-right:2px solid #fff;border-bottom:2px solid #fff;transform:rotate(40deg)}
.opt--check:has(input:checked){border-color:var(--accent);background:var(--accent-wash);color:var(--ink)}

.qnav{display:flex;flex-wrap:wrap;gap:5px;padding:14px clamp(20px,3vw,32px);border-bottom:1px solid var(--line);background:var(--surface-2)}
.qnav button{
  font-family:var(--display);font-size:.74rem;font-weight:600;letter-spacing:-.005em;
  padding:5px 10px;border-radius:2px;border:1px solid var(--line);background:var(--surface);
  color:var(--muted);cursor:pointer;transition:all .14s;
}
.qnav button:hover{border-color:var(--ink-2);color:var(--ink-2)}
.qnav button.is-here{background:var(--accent);border-color:var(--accent);color:#fff}
.qnav button.is-done{border-color:var(--accent);color:var(--accent-ink)}
.qnav button.is-skipped{opacity:.4;text-decoration:line-through}
.qnav__label{font-size:.72rem;color:var(--muted);align-self:center;margin-right:4px}

.mnav{display:flex;gap:18px;margin-left:auto;margin-right:20px}
.mnav a{font-size:.88rem;font-weight:500;color:var(--band-ink-2);text-decoration:none;padding:4px 0;border-bottom:2px solid transparent;transition:color .14s,border-color .14s}
.mnav a:hover{color:var(--band-ink)}
.mnav a.is-here{color:var(--band-ink);border-bottom-color:var(--accent-hi)}
/* Below 620px the nav used to be display:none, which left a phone with a
   wordmark, a Book a call button and no way to reach any other page except by
   scrolling to the footer. Four items fit on a second row; an always-visible
   row beats a menu behind an icon, and it needs no JavaScript. */
/* 01/09 audit: this used to end at 620px while the desktop nav began at
   900px, and between the two the masthead had no layout of its own -- the
   desktop nav appeared, "WFM Health Check" wrapped to three lines and Book
   Call was pushed off the right edge on every page. 660px is 200% zoom on a
   1280 laptop, so it was not an exotic case. The two layouts now meet. */
@media(max-width:899px){
  .masthead__inner{flex-wrap:wrap;row-gap:10px;padding-bottom:6px}
  .wordmark{order:1}
  .mact{order:2;margin-left:auto}
  /* One scrolling row rather than two wrapped ones (Andy, 01/09). The links
     stay on a single line and the strip scrolls sideways; the scrollbar is
     hidden but scrolling, keyboard focus and swipe all still work.
     scroll-padding keeps a focused link clear of the edge. */
  .mnav{order:3;flex-basis:100%;margin:0;column-gap:18px;row-gap:0;flex-wrap:nowrap;
        border-top:1px solid var(--band-line);padding-top:6px;
        overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;-ms-overflow-style:none;
        scroll-padding-inline:20px;overscroll-behavior-x:contain}
  .mnav::-webkit-scrollbar{display:none}
  /* 10px vertical padding takes each link to ~45px tall -- the 44px touch
     target (2.5.5). It was 39px. */
  .mnav a{padding:10px 0;font-size:.9rem;flex:none;white-space:nowrap}
  /* A fade on the trailing edge is the only cue that there is more to see. */
  .masthead__inner{position:relative}
  .mnav{-webkit-mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent);
        mask-image:linear-gradient(to right,#000 calc(100% - 28px),transparent)}
}

.mnav__item{position:relative;display:flex;align-items:center}
.mnav__btn{
  font-family:var(--display);font-size:.88rem;font-weight:500;color:var(--band-ink-2);
  background:none;border:0;padding:4px 0;cursor:pointer;display:flex;align-items:center;gap:6px;
  border-bottom:2px solid transparent;transition:color .14s,border-color .14s;
}
.mnav__btn:hover{color:var(--band-ink)}
.mnav__btn.is-here{color:var(--band-ink);border-bottom-color:var(--accent-hi)}
.mnav__btn svg{width:9px;height:6px;transition:transform .16s}
.mnav__item.is-open .mnav__btn svg{transform:rotate(180deg)}
.mnav__item.is-open .mnav__btn{color:var(--band-ink)}

.mnav__menu{
  position:absolute;top:calc(100% + 12px);left:-14px;min-width:210px;z-index:80;
  background:var(--surface);border:1px solid var(--line);border-radius:4px;
  box-shadow:0 12px 32px -10px rgba(0,0,0,.45);padding:6px;display:none;flex-direction:column;
}
.mnav__item.is-open .mnav__menu{display:flex}
.mnav__menu a{
  display:block;padding:9px 12px;border-radius:3px;font-size:.9rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;border:0;transition:background .12s,color .12s;
}
.mnav__menu a:hover{background:var(--surface-2);color:var(--ink)}
.mnav__menu a.is-here{color:var(--accent-ink);background:var(--accent-wash)}
.mnav__menu small{display:block;font-size:.78rem;color:var(--muted);font-weight:400;margin-top:2px;line-height:1.35}

.page{display:none}
.page.is-live{display:block}

.offer{display:grid;gap:1px;background:var(--line);border:1px solid var(--line);border-radius:4px;overflow:hidden;margin-top:32px}
.offer__row{background:var(--surface);display:grid;grid-template-columns:1fr;gap:0}
@media(min-width:860px){.offer__row{grid-template-columns:.9fr 1.1fr}}
.offer__problem{padding:28px 26px;background:var(--surface-2);display:flex;flex-direction:column;gap:10px;justify-content:center}
.offer__problem span{font-size:.78rem;font-weight:600;color:var(--accent-ink)}
.offer__problem p{font-family:var(--prose);font-size:1.06rem;line-height:1.45;color:var(--ink);font-style:italic}
.offer__answer{padding:28px 26px;display:flex;flex-direction:column;gap:10px}
.offer__answer h3{font-size:1.18rem;font-weight:700}
.offer__answer p{font-size:.96rem;color:var(--ink-2);line-height:1.55}
.offer__list{list-style:none;padding:0;margin:6px 0 0;display:flex;flex-direction:column;gap:7px}
.offer__list li{position:relative;padding-left:22px;font-size:.92rem;color:var(--ink-2);line-height:1.45}
.offer__list li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:5px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg)}

.booking{border:1px solid var(--line);border-radius:4px;background:var(--surface-2);padding:26px;display:flex;flex-direction:column;gap:14px;align-items:center;max-width:520px;margin:6px auto 0}
.booking h3{font-size:1.14rem}
.booking p{font-size:.95rem;color:var(--ink-2);line-height:1.5;text-align:center;max-width:42ch}
.booking .placeholder{font-size:.78rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:12px;margin-top:4px;width:100%;text-align:center}

.btn--skip{background:transparent;border-color:transparent;color:var(--muted);font-weight:500;padding:13px 14px}
.btn--skip:hover{color:var(--accent-ink);text-decoration:underline}
.skipnote{
  display:none;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 16px;margin-bottom:22px;border:1px dashed var(--line);border-radius:3px;
  background:var(--surface-2);font-size:.92rem;color:var(--muted);
}
.skipnote.is-shown{display:flex}
.skipnote button{
  font-family:var(--display);font-size:.85rem;font-weight:600;color:var(--accent-ink);
  background:none;border:0;cursor:pointer;padding:0;text-decoration:underline;
}

.assignbox{display:none;flex-direction:column;gap:16px;padding:20px;margin-bottom:24px;border:1px solid var(--accent);border-radius:3px;background:var(--accent-wash)}
.assignbox.is-shown{display:flex}
.assignbox h3{font-family:var(--display);font-size:1rem;font-weight:700;margin:0;letter-spacing:-.014em}
.assignbox p.hint{font-size:.88rem;color:var(--ink-2);line-height:1.5;margin:-6px 0 0}
.assignbox .pair{gap:14px}
.assignbox input,.assignbox textarea{background:var(--surface);max-width:100%}
.assignbox textarea{min-height:64px}
.assignbox .row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}

.picker__bar{display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-bottom:2px}
.picker__acts{display:flex;gap:14px}
.picker__acts button{font-family:var(--display);font-size:.83rem;font-weight:600;color:var(--accent-ink);background:none;border:0;padding:0;cursor:pointer;text-decoration:underline}
.picker__acts button:disabled{color:var(--muted);cursor:not-allowed;text-decoration:none}

.sharetop{margin-top:10px;padding:22px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2);display:flex;flex-direction:column;gap:12px}
.sharetop h3{font-family:var(--display);font-size:1.02rem;font-weight:700;margin:0;letter-spacing:-.014em}
.sharetop p{font-size:.92rem;color:var(--ink-2);line-height:1.55;margin:0;max-width:62ch}
.sharetop .btn{align-self:flex-start}
.sharetop__reveal{display:none;flex-direction:column;gap:12px;padding-top:4px}
.sharetop__reveal.is-shown{display:flex}
.sharetop__list{display:flex;flex-direction:column;gap:7px}
.sharetop__list:empty{display:none}
.sharerow{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:10px 13px;font-size:.9rem}
.sharerow b{font-weight:650}
.sharerow span{color:var(--muted)}
.sharerow em{font-style:normal;color:var(--ink-2)}

.asglist{display:flex;flex-direction:column;gap:8px}
.asgperson{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;background:var(--surface);border:1px solid var(--line);border-radius:3px;padding:12px 14px}
.asgperson__who{display:flex;flex-direction:column;gap:3px;min-width:0}
.asgperson__who b{font-size:.94rem;font-weight:650}
.asgperson__who span{font-size:.85rem;color:var(--muted);word-break:break-word}
.asgperson__secs{font-size:.85rem;color:var(--ink-2);margin-top:3px}
.asgperson button{font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--accent-ink);background:none;border:0;cursor:pointer;text-decoration:underline;flex:none;padding:0}
.asgdone{font-size:.86rem;color:var(--ink-2);margin:0}
.check--taken{opacity:.75}
.check--taken span em{display:block;font-style:normal;font-size:.78rem;color:var(--accent-ink);margin-top:2px}

.qnav button.is-assigned{border-color:var(--accent);background:var(--accent-wash);color:var(--accent-ink)}
.qnav button.is-assigned::after{content:" \2709";font-size:.85em}

.btn--assign{background:transparent;border-color:var(--line);color:var(--ink-2);font-weight:500}
.btn--assign:hover{border-color:var(--accent);color:var(--accent-ink)}

.assigned-note{border-color:var(--accent);background:var(--accent-wash);color:var(--ink-2)}
.assigned-note strong{color:var(--ink)}

.demo-note{background:var(--warn-wash,#F8EEDA);border:1px dashed var(--warn);color:#7A560F;border-radius:3px;padding:11px 14px;font-size:.85rem;line-height:1.5;margin-bottom:26px}
:root{--warn-wash:#F8EEDA}
:root[data-theme="dark"] .demo-note,
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .demo-note{background:#2A2114;color:#D9A244}}

.signin{max-width:440px;background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:30px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:16px}
.signin h2{font-size:1.3rem}
.signin p{font-size:.94rem;color:var(--ink-2);line-height:1.5}

.prog{border:1px solid var(--line);border-radius:4px;overflow:hidden;background:var(--surface);margin-top:26px}
.prog__head{display:grid;grid-template-columns:1.4fr 1.3fr 1fr auto;gap:12px;padding:12px 18px;background:var(--surface-2);border-bottom:1px solid var(--line);font-size:.8rem;font-weight:650;color:var(--ink-2)}
.prow{display:grid;grid-template-columns:1.4fr 1.3fr 1fr auto;gap:12px;padding:15px 18px;border-bottom:1px solid var(--line-soft);align-items:center;font-size:.93rem}
.prow:last-child{border-bottom:0}
.prow b{font-weight:650;color:var(--ink)}
.prow span{color:var(--ink-2)}
.pill{display:inline-flex;align-items:center;justify-self:start;gap:6px;font-size:.76rem;font-weight:650;padding:4px 10px;border-radius:100px;white-space:nowrap}
.pill i{width:6px;height:6px;border-radius:50%;flex:none}
.pill--done{background:var(--ok-wash,#E4F0EB);color:var(--ok)}
.pill--done i{background:var(--ok)}
.pill--wait{background:var(--warn-wash);color:#8F6416}
.pill--wait i{background:var(--warn)}
.pill--you{background:var(--accent-wash);color:var(--accent-ink)}
.pill--you i{background:var(--accent)}
.pill--skip{background:var(--surface-2);color:var(--muted)}
.pill--skip i{background:var(--muted)}
.prow .btn{padding:7px 14px;font-size:.82rem;justify-self:end}
@media(max-width:760px){
  .prog__head{display:none}
  .prow{grid-template-columns:1fr;gap:6px;padding:16px 18px}
}
.progsum{display:flex;flex-wrap:wrap;gap:26px;margin-top:22px;padding:18px 20px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2)}
.progsum div{display:flex;flex-direction:column;gap:2px}
.progsum b{font-family:var(--display);font-size:1.5rem;font-weight:800;letter-spacing:-.03em}
.progsum span{font-size:.8rem;color:var(--muted)}

.onesec{max-width:720px}
.onesec__from{border-left:3px solid var(--accent);padding:4px 0 4px 18px;margin:20px 0 8px;font-family:var(--prose);font-size:1.02rem;color:var(--ink-2);line-height:1.5}
.onesec__from b{color:var(--ink);font-weight:600}

.qsaved{font-size:.8rem;color:var(--muted);margin-left:auto}
.follow{margin-left:12px;padding:16px 0 2px 20px;border-left:2px solid var(--accent-wash);display:none;flex-direction:column;gap:18px}
.follow.is-open{display:flex}
.follow::before{content:"Follow-up";font-size:.8rem;font-weight:600;color:var(--accent-ink)}

/* ══════════ focused list ══════════
   One question open at a time inside a section you can see all of. Answered
   questions collapse to a single line showing the answer, so the page
   compresses as you work down it. Everything below hangs off .qstep--focus,
   which only the area steps carry - step 1 stays an ordinary form. */
.q__tick,.q__num,.q__answer,.q__go,.opt__key{display:none}
.qkeys{display:none;font-family:var(--mono);font-size:.7rem;letter-spacing:.04em;color:var(--muted)}
.qstep--focus .qkeys{display:block;margin:7px 0 16px}
.qstep--focus.is-active{gap:0}
.qstep--focus .qstep__intro{margin:0;max-width:62ch}
.qstep--focus .q{gap:0;border-bottom:1px solid var(--line-soft)}
.qstep--focus > .q:last-of-type{border-bottom:0}
.qstep--focus .follow{margin:0;padding:0 0 0 18px;gap:0}
.qstep--focus .follow::before{display:none}

/* collapsed rows - answered and not-yet-reached */
.qstep--focus .q--done,.qstep--focus .q--todo{
  flex-direction:row;align-items:center;gap:14px;padding:13px 4px;cursor:pointer;
  transition:background .14s,opacity .14s}
.qstep--focus .q--done:hover,.qstep--focus .q--todo:hover{background:var(--surface-2)}
.qstep--focus .q--done .q__label,.qstep--focus .q--todo .q__label{
  flex:1;min-width:0;font-size:.93rem;font-weight:500;line-height:1.4}
.qstep--focus .q--done .q__label{color:var(--muted)}
.qstep--focus .q--todo{opacity:.5}
.qstep--focus .q--todo:hover{opacity:.9}
.qstep--focus .q--todo .q__label{color:var(--ink-2)}
.qstep--focus .q--done .q__help,.qstep--focus .q--todo .q__help,
.qstep--focus .q--done .opts,.qstep--focus .q--todo .opts,
.qstep--focus .q--done textarea,.qstep--focus .q--todo textarea{display:none}
.qstep--focus .q--done .q__tick{
  display:grid;place-items:center;width:17px;height:17px;flex:none;border-radius:50%;background:var(--ok)}
.qstep--focus .q--done .q__tick::after{
  content:"";width:6px;height:3px;border-left:2px solid #fff;border-bottom:2px solid #fff;
  transform:rotate(-45deg) translate(0,-1px)}
.qstep--focus .q--todo .q__num{
  display:block;width:17px;flex:none;text-align:center;font-family:var(--mono);
  font-size:.7rem;color:var(--muted)}
.qstep--focus .q--done .q__answer{
  display:block;flex:none;max-width:46%;text-align:right;font-size:.88rem;font-weight:650;
  color:var(--accent-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the one that's open */
.qstep--focus .q--now{padding:26px 4px 26px;gap:0;background:var(--surface)}
.qstep--focus .q--now .q__num{
  display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-ink);margin-bottom:9px}
.qstep--focus .q--now .q__num::before{content:attr(data-sec) " · "}
.qstep--focus .q--now .q__label{
  font-size:clamp(1.05rem,1.9vw,1.3rem);font-weight:700;letter-spacing:-.02em;
  line-height:1.25;max-width:36ch}
.qstep--focus .q--now .q__help{margin-top:10px;max-width:54ch}
.qstep--focus .q--now .opts{margin-top:18px;gap:8px}
.qstep--focus .q--now .opt{padding:11px 15px;font-size:.95rem;border-width:1.5px}
.qstep--focus .q--now .opt:hover{border-color:var(--accent);color:var(--ink)}
.qstep--focus .q--now .opt__dot{display:none}
.qstep--focus .q--now .opt__key{
  display:grid;place-items:center;order:-1;width:20px;height:20px;flex:none;border-radius:3px;
  border:1px solid var(--line);background:var(--surface-2);font-family:var(--mono);
  font-size:.67rem;color:var(--muted);transition:border-color .14s,color .14s}
.qstep--focus .q--now .opt:hover .opt__key,
.qstep--focus .q--now .opt:has(input:checked) .opt__key{border-color:var(--accent);color:var(--accent-ink)}
.qstep--focus .q--now textarea{margin-top:16px}
.qstep--focus .q--now .q__go{display:inline-flex;align-self:flex-start;margin-top:16px}

.qcomplete{display:none;align-items:center;gap:16px;flex-wrap:wrap;margin-top:24px;
  padding:16px 18px;border:1px solid var(--line);border-radius:4px;background:var(--surface-2)}
.qcomplete.is-shown{display:flex}
.qcomplete span{font-size:.93rem;color:var(--ink-2);flex:1;min-width:180px}
.qcomplete .btn{flex:none}
.qhead__sec{color:var(--accent-ink);font-weight:600}
.btn.is-ready{box-shadow:0 0 0 3px var(--accent-wash)}
@media(max-width:620px){
  .qkeys{display:none!important}
  .qstep--focus .q--now .opt__key{display:none}
  .qstep--focus .q--done .q__answer{max-width:100%;text-align:left;white-space:normal;flex:1 0 100%;
    padding-left:31px;margin-top:3px;font-size:.85rem}
  .qstep--focus .q--done{flex-wrap:wrap}
}

input[type=text],input[type=email],select,textarea{width:100%;max-width:var(--field);padding:10px 12px;font-family:var(--display);font-size:.96rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:3px;transition:border-color .15s,background .15s}
select{max-width:340px;appearance:none;cursor:pointer}
textarea{max-width:100%;min-height:88px;resize:vertical;line-height:1.5}
input[type=text]:focus,input[type=email]:focus,select:focus,textarea:focus{background:var(--surface);border-color:var(--accent);outline:2px solid var(--accent-wash);outline-offset:0}
.pair{display:grid;gap:18px;grid-template-columns:1fr}
@media(min-width:560px){.pair{grid-template-columns:1fr 1fr}}
.pair input{max-width:100%}
.checks{display:grid;gap:7px;grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.check{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:.9rem;color:var(--ink-2);line-height:1.4;padding:9px 11px;border:1px solid var(--line);border-radius:3px;transition:border-color .14s,background .14s}
.check:hover{border-color:var(--ink-2);background:var(--surface-2)}
.check input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--accent)}
.consent{display:flex;gap:11px;align-items:flex-start;padding:14px;border-radius:3px;background:var(--surface-2);border:1px solid var(--line);font-size:.86rem;color:var(--ink-2);line-height:1.5;cursor:pointer}
.consent input{margin:2px 0 0;width:15px;height:15px;flex:none;accent-color:var(--accent)}

.qfoot{padding:16px clamp(20px,3vw,32px);border-top:1px solid var(--line);background:var(--surface-2);display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between}
.qerr{display:none;font-size:.89rem;color:var(--risk);background:var(--accent-wash);border-radius:3px;padding:10px 13px;margin:0 clamp(20px,3vw,32px) 18px}
.qerr.is-shown{display:block}

.modal{position:fixed;inset:0;z-index:120;background:rgba(8,16,16,.55);display:none;align-items:flex-start;justify-content:center;padding:24px;overflow-y:auto}
.modal.is-open{display:flex}
.modal__panel{background:var(--surface);border:1px solid var(--line);border-radius:5px;box-shadow:0 30px 70px -20px rgba(0,0,0,.55);width:100%;max-width:640px;margin:auto;display:flex;flex-direction:column}
.modal__head{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px 24px;border-bottom:1px solid var(--line)}
.modal__head h3{font-size:1.2rem;font-weight:700;letter-spacing:-.02em}
.modal__x{background:none;border:0;font-size:1.6rem;line-height:1;color:var(--muted);cursor:pointer;padding:0 4px}
.modal__x:hover{color:var(--ink)}
.modal__body{padding:24px;display:flex;flex-direction:column;gap:22px}
.modal__body .qstep{display:flex!important}
.modal__foot{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center;padding:18px 24px;border-top:1px solid var(--line);background:var(--surface-2)}
.modal .qerr{margin:0 24px 4px}
@media(max-width:560px){.modal{padding:0}.modal__panel{border-radius:0;min-height:100%}}

.done{text-align:center;padding:clamp(34px,6vw,60px) 24px;display:flex;flex-direction:column;gap:14px;align-items:center}
.done__mark{width:42px;height:42px;border-radius:50%;background:var(--accent-wash);display:flex;align-items:center;justify-content:center}
.done__mark::after{content:"";width:14px;height:7px;border-left:2.5px solid var(--ok);border-bottom:2.5px solid var(--ok);transform:rotate(-45deg) translate(1px,-2px)}
.done p{max-width:46ch;color:var(--ink-2);font-family:var(--prose)}

/* ============================================================
   FAQ + FOOTER
   ============================================================ */
.faq{border-top:1px solid var(--line);max-width:74ch;margin-top:26px}
.faq details{border-bottom:1px solid var(--line-soft)}
.faq summary{cursor:pointer;list-style:none;padding:17px 34px 17px 0;position:relative;font-weight:640;font-size:1rem;letter-spacing:-.014em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";position:absolute;right:6px;top:50%;width:10px;height:10px;border-right:1.7px solid var(--accent);border-bottom:1.7px solid var(--accent);transform:translateY(-70%) rotate(45deg);transition:transform .18s}
.faq details[open] summary::after{transform:translateY(-30%) rotate(-135deg)}
.faq details p{padding:0 40px 19px 0;color:var(--ink-2);font-size:1rem;font-family:var(--prose);line-height:1.6}

.footer{background:var(--band-bg);color:var(--band-ink-2);padding-block:40px;border-top:1px solid var(--band-line)}
.footer__inner{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:flex-start}
.footer p{font-size:.86rem;line-height:1.6}
.footer strong{color:var(--band-ink);font-weight:700;font-size:.93rem}
.footer a{color:var(--band-ink)}

.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--surface);color:var(--ink);padding:10px 16px;border-radius:3px}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){*{transition:none!important}html{scroll-behavior:auto}}

/* Advocate Advisory brand layer - see BRAND.md. Generated, do not hand-edit.

   Selectors are doubled (:root:root) deliberately. The prototype ships its own
    inside the body, so this block loses on source order at equal
   specificity - doubling wins on specificity instead, and keeps this layer in
   the head where it belongs rather than trailing the document. */
/* ---------------------------------------------------------------------------
   Self-hosted type, 08/09/2026. Both faces used to come from Google, which cost
   two extra origins, a render-blocking stylesheet, and a request carrying every
   visitor's IP to Google on every page load. That last one is the reason this
   changed: the privacy notice lists Railway, Neon and Google Workspace as the
   services that process visitor data, and Google Fonts was not among them. It
   is not a tracking script, so the notice was not false -- but "we do not use
   third-party tracking scripts" is a weaker answer to a procurement question
   than not making the request at all. Self-hosting removes the question.

   Inter is the VARIABLE file: one 48KB download covers 400 through 800, where
   Google was serving five separate static weights. latin-ext is declared but
   only fetched if a glyph in that range actually appears on the page, which on
   this site is close to never -- that is what unicode-range is for.

   Declared as "Inter" rather than "Inter Variable" so --display and --prose
   keep working unchanged. Weights stay 100-900 so the variable axis is used
   rather than the browser synthesising a bold.
   --------------------------------------------------------------------------- */
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,
                U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,
                U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:"Inter";font-style:normal;font-weight:100 900;font-display:swap;
  src:url(/fonts/inter-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,
                U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,
                U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}
@font-face{
  font-family:"Cinzel";font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/cinzel-latin-600-normal.woff2) format("woff2");
}

:root:root{
  --paper:#F2EFE7;          /* ivory */
  --surface:#FFFFFF;
  --surface-2:#F8F6F0;
  --ink:#2E3A45;            /* ink - 11.62:1 on white, 10.11:1 on ivory */
  --ink-2:#5E6B77;          /* secondary - 4.75:1 on ivory */
  --muted:#5E6B77;          /* the palette defines one secondary tone, not two */
  --line:#8C8779;           /* border - 3.12:1 on ivory */
  --line-soft:#DDD8CC;

  --band-bg:#2E3A45;        /* ink - the dark ground */
  --band-ink:#F2EFE7;       /* ivory on ink, 10.11:1 */
  --band-ink-2:#B7B1A6;     /* stone on ink, 5.45:1 */
  --band-line:#8C8779;      /* border on ink, 3.24:1 - passes non-text */
  --band-sheet:#FBFAF7;

  --accent:#7E642C;         /* deep gold - light grounds, 4.88:1 on ivory */
  --accent-label:#FFFFFF;   /* white on deep gold, 5.61:1 */
  --accent-hi:#6A541F;
  --accent-ink:#7E642C;
  --accent-wash:#F5EFE1;

  --ok:#2F6B3F;             /* on track */
  --warn:#8A5A00;           /* watch */
  --risk:#9B2C2C;           /* at risk */

  --display:"Inter","Aptos","Calibri",Arial,sans-serif;
  --prose:"Inter","Aptos","Calibri",Arial,sans-serif;
  --mono:"Inter","Aptos","Calibri",Arial,sans-serif;
  --wordmark:"Cinzel",Georgia,serif;
}

/* Dark grounds take the other half of the gold pair. Gold is 5.09:1 on ink and
   1.99:1 on ivory - which is exactly why the accent is two values, not one.

   `.band` was in this list until 27/08 and should never have been. Every .band
   in the prototype is a LIGHT section - paper, or surface via .band--raised -
   so listing it here handed gold to eleven light sections at 1.99:1 for links
   and 2.11:1 for buttons. It shipped on 24/08 and survived because the test
   only ever sampled `.hero`. The test now walks every ground on every page.

   Membership rule: an element belongs here if and only if it paints a dark
   background itself. Nothing else. */
:root:root .masthead,
:root:root .hero,
:root:root .phero,
:root:root .howband,
:root:root .across,
:root:root .dx,
:root:root .cmp,
:root:root .drift,
:root:root .vcurve,
:root:root .fig--framed .fsample__top,
:root:root .footer,
:root:root .sfoot{
  --accent:#C8A76A;
  --accent-label:#2E3A45;   /* ink on gold, 5.09:1. NOT white - that is 2.28:1 */
  --accent-hi:#D8BC85;
  --accent-ink:#C8A76A;
}

/* The prototype follows the OS dark preference. The brand guidelines are
   silent on dark mode, so rather than drop the behaviour this maps it onto
   brand colours: ink grounds, ivory text, gold accent throughout -
   which is the combination the palette already supports. */
@media (prefers-color-scheme:dark){
  :root:root:not([data-theme="light"]){
    --paper:#1B2229; --surface:#242F38; --surface-2:#2E3A45;
    --ink:#F2EFE7; --ink-2:#C7CDD3; --muted:#9BA5AE;
    --line:#8C8779; --line-soft:#3A4650;
    --band-bg:#161C22; --band-sheet:#242F38;
    --accent:#C8A76A; --accent-hi:#D8BC85; --accent-ink:#C8A76A;
    --accent-wash:#2A2519;
    /* 17/09: this was missed when the accent pair was fixed for dark
       GROUNDS. In dark MODE --accent becomes gold and --accent-label
       stayed white, so every solid button - Book a Call included - was
       white on gold at 2.28:1, which BRAND.md names as the one
       combination never to use. */
    --accent-label:#2E3A45;
  }
}
:root:root[data-theme="dark"]{
  --paper:#1B2229; --surface:#242F38; --surface-2:#2E3A45;
  --ink:#F2EFE7; --ink-2:#C7CDD3; --muted:#9BA5AE;
  --line:#8C8779; --line-soft:#3A4650;
  --band-bg:#161C22; --band-sheet:#242F38;
  --accent:#C8A76A; --accent-hi:#D8BC85; --accent-ink:#C8A76A;
  --accent-wash:#2A2519;
  /* 17/09: this was missed when the accent pair was fixed for dark
     GROUNDS. In dark MODE --accent becomes gold and --accent-label
     stayed white, so every solid button - Book a Call included - was
     white on gold at 2.28:1, which BRAND.md names as the one
     combination never to use. */
  --accent-label:#2E3A45;
}

/* The mono slots are small eyebrow labels. Inter needs the tracking to keep
   the same texture now that the monospace is gone. */
.eyebrow,.kicker,[class*="mono"]{ letter-spacing:.08em; }

/* The wordmark is the identity until the logo decision lands, and the brand
   guidelines are specific: Cinzel, letter-spaced. Without this the page loaded
   Cinzel and used it for nothing. */
:root:root .wordmark{
  font-family:var(--wordmark);
  font-weight:600;
  letter-spacing:.14em;
  font-size:1.08rem;
  display:inline-flex;
  align-items:center;
  gap:.45em;
  color:#C8A76A; /* all gold, both words - Andy, 31/08. 5.09:1 on ink. */
}
:root:root .wordmark i{ font-weight:600; letter-spacing:.14em; color:#C8A76A; }
/* The mark between the words - sized to the cap height, never squashed. */
:root:root .wordmark .wm-mark{ height:1.5em; width:1.5em; flex:none; display:block; }

/* Submission failure. Must be legible on the light ground. */
.submit-error{
  margin:0 0 12px; padding:10px 12px;
  border:1px solid var(--risk); border-radius:8px;
  background:#FCF2F2; color:#7A2020;
  font:500 .95rem/1.45 var(--display);
}

/* Privacy line above the submit control. Must not read as small print -
   it is the thing the consent tick box is consenting to. */
.consent-notice{
  margin:0 0 10px; font:400 .9rem/1.5 var(--display); color:var(--ink-2);
}
.consent-notice a{ color:var(--accent); text-underline-offset:2px; }

/* The accent pair has three values, not two: fill, and the label ON that fill.
   The prototype hard-codes color:#fff, which is 5.61:1 on deep gold and 2.28:1
   on gold - so every button on a dark ground failed from the day the masthead
   was built. BRAND.md always said ink on gold; the code never carried it. */
:root:root .btn--solid{ color:var(--accent-label); }

/* Statutory particulars. Small, but legible - 4.5:1 minimum. */
.statutory{ font-size:.85rem; line-height:1.6; }

/* A 76-question form is navigated by keyboard more than you would expect. */
/* 01/09 audit: the ring was gold everywhere. On the dark band that is 5.09:1;
   on ivory it was 1.99:1 and on a white tile 2.28:1, under the 3:1 a focus
   indicator needs (1.4.11), so keyboard users lost the ring on two-thirds of
   every page. The colour now follows the surface: ink by default, gold inside
   the dark containers. */
:root{ --focus:var(--ink); }
.masthead,.hero,.phero,.footer,.sfoot{ --focus:var(--accent); }
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--focus); outline-offset:2px;
}
/* Visually hidden, still read aloud. The standard clip pattern. */
.vh{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
    clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---- pages generated from content/ ---------------------------------- */
.prose{max-width:66ch}
/* 03/09, Andy: "bit more space before Whose side we're on" - the first
   section sat too close under the hero band. Was clamp(14px,1.5vw,21px). */
.phero + .band{padding-top:clamp(30px,3vw,46px)}
.prose>h2:first-child,.prose>h1:first-child{margin-top:0}
.prose h2{font:600 1.45rem/1.3 var(--display);color:var(--ink);margin:40px 0 10px}
.prose h3{font:600 1.08rem/1.35 var(--display);color:var(--ink);margin:28px 0 6px}
.prose p,.prose li{font:400 1rem/1.7 var(--prose);color:var(--ink-2)}
.prose p{margin:0 0 16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent-ink);text-underline-offset:2px}
.prose ul{padding-left:1.15em;margin:10px 0}
.prose li{margin:6px 0}
.prose blockquote{margin:20px 0;padding-left:18px;border-left:3px solid var(--accent-ink)}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:36px 0}
.prose code{font-family:var(--mono);font-size:.92em}

/* The privacy notice predates this template and uses its own class. */
.prose-page{max-width:66ch;color:var(--ink)}
.prose-page h1{font:700 2rem/1.2 var(--display);margin:0 0 8px}
.prose-page h2{font:600 1.15rem/1.3 var(--display);margin:32px 0 8px}
.prose-page p,.prose-page li{font:400 1rem/1.65 var(--prose);color:var(--ink-2)}
.prose-page p{margin:0 0 14px}
.prose-page .lead{font-size:1.05rem;color:var(--ink)}
.prose-page a{color:var(--accent-ink)}
.prose-page ul{padding-left:1.2em}
.prose-page li{margin:4px 0}

/* ---- page hero -------------------------------------------------------
   No accent bar above the headline. A short coloured rule over an H1 is the
   most recognisable stock-landing-page device on the current internet, and it
   was doing no work here beyond decoration.

   Asymmetric instead: statement left, the qualifying line and the control in a
   narrower right column. A reader's eye lands on the claim, then on what to do
   about it, rather than travelling down a centred stack. */
.phero{background:var(--band-bg);color:var(--band-ink);padding-block:clamp(30px,4vw,56px);
       border-bottom:1px solid var(--band-line)}
.phero h1{font:600 clamp(1.9rem,3.6vw,2.9rem)/1.12 var(--display);color:var(--band-ink);
          letter-spacing:-.015em;max-width:18ch;margin:0;text-wrap:balance}
.phero p{font:400 1.02rem/1.65 var(--prose);color:var(--band-ink-2);max-width:44ch;margin:0}
.phero .btn{margin-top:20px}
.phero .phero__note{font-size:.82rem;color:var(--band-ink-2);margin-top:20px;letter-spacing:.01em}

/* The questionnaire page carries the prototype's own hero, which is taller and
   two-column. Andy asked for the header banner to be consistent everywhere
   (28/08), so it takes the same band metrics, type scale and accent rule as
   every other page. The example summary sheet stays; only the framing aligns. */
:root:root .hero{padding-block:clamp(30px,4vw,56px);border-bottom:1px solid var(--band-line)}
:root:root .hero h1{font:700 clamp(1.85rem,3.5vw,2.7rem)/1.15 var(--display);letter-spacing:-.01em}

/* ---- one page width ---------------------------------------------------
   Andy, 28/08: the empty bands either side looked like a mistake rather than a
   margin. The cause was three different widths on one page - a ~620px text
   column, cards breaking out to 1040px, and a masthead spanning 1160px. On a
   wide monitor that reads as a narrow column adrift in a field.

   The text measure itself is not the thing to change: 65-75 characters is where
   prose stays readable, and widening it to match the cards would make it worse
   to read, not better. So the page comes in to meet the text instead. */
:root:root{ --maxw:1080px; }
@media(min-width:1400px){ :root:root{ --maxw:1160px; } }

/* ---- use the second half of a desktop screen --------------------------
   Measured 28/08: at 1920 the inked content ran 464–1456 - 52% of the screen -
   and the reading column itself was 620px, under a third of the width. Every
   page, all fourteen. It read as a phone layout centred on a monitor, which is
   what it was.

   The paragraph measure is NOT the thing to change: past about 75 characters
   the eye loses its place on the return sweep, so widening the prose would
   make reading worse in order to make the page look busier. What changes is
   everything that is not a paragraph.

   The margin-column heading treatment is deliberately not back. It was tried
   on 27/08 and Andy's read was that it looked disjointed - heading far left,
   text far right, the eye travelling on every section. That judgement stands.

   1. Long lists go two-up. These pages are mostly lists: the Health Check has
      an eight-item and a seven-item list, About has an eight-item one. A list
      is the one block that reads just as well in two columns as one, because
      each item is its own unit and nothing wraps across the gap. */
@media(min-width:900px){
  .prose > ul:not(.areagrid):has(li:nth-child(5)),
  .prose > ol:not(.howsteps):has(li:nth-child(5)),
  .prose > .plainlist:has(li:nth-child(5)){
    columns:2;
    column-gap:clamp(28px,4vw,64px);
    max-width:none;
  }
  .prose > ul:not(.areagrid):has(li:nth-child(5)) > li,
  .prose > ol:has(li:nth-child(5)) > li,
  .prose > .plainlist:has(li:nth-child(5)) > li{
    break-inside:avoid;
  }
  /* An ordered list in two columns must keep its numbers visible; the default
     marker sits outside the box and gets clipped at a column edge. */
  .prose > ol:has(li:nth-child(5)){list-style-position:inside;padding-left:0}
}

/* ---- masthead controls ------------------------------------------------ */
.mact{display:flex;gap:10px;align-items:center;flex-shrink:0}
@media(max-width:820px){.mact .btn--ghost{display:none}}

/* 02/09, Andy: the masthead button matches the hero CTA - solid gold, same
   as everywhere else. This reverses the 1920px-review decision to outline it
   (which set the reading order headline -> hero CTA -> header CTA); the
   consistent solid treatment won, so there is no masthead override and the
   plain .btn--solid rules do the work. */

/* ---- hero band height (Andy, 03/09) -----------------------------------
   "hero needs to be in the same place on each page ... looks weird when
   you move around." Each hero was only as tall as its content, so the
   dark band's bottom edge - and with it the start of the page body -
   jumped by up to 130px between pages. The band now reserves the height
   of the tallest hero at each breakpoint (measured: the Health Check with
   its price lead, About's three-line headline under 900px, the platform
   pages at phone widths). Content stays anchored to the top, so the
   headline and the CTA sit at the same y on every page and the band ends
   on the same line; a shorter hero simply carries more dark below it.
   Values are the measured natural maximum plus a small buffer - if a new
   page's hero outgrows them the equal-heights test fails and the numbers
   get raised, not the rule removed.
   RAISED 08/09/2026, and the reason matters more than the numbers. The
   originals were measured in the test browser, which had no route to
   fonts.googleapis.com -- so they were measured in the FALLBACK face, not in
   Inter. Every live visitor has been getting Inter, which is wider, so the
   tallest heroes have been outgrowing the reservation on the live site since
   the day it shipped, and the equal-heights test could not see it. Self-
   hosting the fonts (same commit) is what exposed it: the test browser can
   now load the real face. Re-measured against Inter, the maxima are 292 at
   desktop (Supplier Selection), 329 between 480 and 899 (About), and 394 on
   a phone (Implementation Recovery).
   Content is CENTRED in the reserved band ("this is all over the place" -
   top-anchoring left all the slack at the bottom, so a one-line headline
   floated above a void while a three-line one filled the band). Centred,
   every page is internally balanced and the band's edges stay put. */
.phero{min-height:292px;display:flex;align-items:center}
.phero>.shell{width:100%}
@media(max-width:899px){.phero{min-height:329px}}
/* The kicker adds a line above three-line phone headlines. */
@media(max-width:479px){.phero{min-height:394px}}

/* ---- page hero -------------------------------------------------------
   Reverted 28/08 to the card-led treatment. The editorial margin-column
   layout was tried and read disjointed at wide viewports: the heading sat
   far left, the text far right, and the eye had to travel between them on
   every section. */
/* Padding was clamp(30px,4vw,56px); trimmed 03/09 with the band-height
   reduction - the min-height cannot go below the tallest hero's content,
   so the content box had to shrink with it. */
.phero{background:var(--band-bg);color:var(--band-ink);padding-block:clamp(22px,2.5vw,34px);
       border-bottom:1px solid var(--band-line)}
.phero__inner{max-width:none}
.phero__act{text-align:center}
/* A hero whose intro paragraph is a direct child of .phero__inner (the /wfm
   hub) rather than wrapped in .phero__body. `.phero p{margin:0}` would
   otherwise leave it flush against the h1. */
.phero__inner > h1 + p{margin-top:18px}
.phero__body{display:grid;gap:clamp(20px,3vw,52px);grid-template-columns:1fr;
             align-items:center;margin-top:18px}
/* The CTA layout. Same two tracks as .phero__body, but the split starts at the
   headline instead of below it. .phero__body is what remains for heroes with
   an intro and no CTA. */
/* align-items:center (was start + a first-line padding offset on the act
   column): 03/09, Andy, of the Health Check hero with the price under the
   button - "They should be inline." The headline block and the action
   stack now centre against each other, so however tall each side runs,
   the pair reads as one level row. */
.phero__split{display:grid;gap:clamp(20px,3vw,52px);grid-template-columns:1fr;
              align-items:center}
.phero__sub{margin-top:18px}
/* The column was `auto`, so its width came from the button's own label and the
   CTA landed at a different x on every page - 885px on the home page and 814px
   on the Health Check page at 1440, two pages one click apart. A fixed track
   gives the primary action the same edge everywhere. 340px, not 300: at 300
   the reassurance line under the button wrapped to two lines, and because the
   columns are bottom-aligned that pushed the paragraph down and opened a 52px
   hole under the headline. At 340 the note holds one line and the gap closes
   to 24px. */
@media(min-width:900px){
  .phero__body{grid-template-columns:minmax(0,1fr) 340px}
  .phero__split{grid-template-columns:minmax(0,1fr) 340px}
  /* The first-line padding offset (Andy, 01/09: "inline with the bottom of
     where it says management") is gone - superseded 03/09 by centring the
     whole split row, which is what made the price-under-button stack hang
     below the headline instead of sitting level with it. */
}
/* max-width:26ch holds the line length; margin-inline:auto centres that BOX in
   the hero. text-align:center alone only centred the text inside a box still
   pinned to the left margin, so the heading merely shifted right. */
.phero h1{font:700 clamp(1.85rem,3.5vw,2.7rem)/1.15 var(--display);color:var(--band-ink);
          letter-spacing:-.01em;max-width:26ch;margin:0 auto;text-wrap:balance;text-align:center}
/* The heading centres over the TEXT COLUMN, not the whole hero. The hero is
   two tracks (text | 340px action); centring across both parked the h1 to the
   right of the paragraph it belongs to. Same arithmetic as the grid above, so
   the two cannot drift apart. Must come AFTER the base rule: equal specificity,
   so source order decides. */
@media(min-width:900px){
  .phero h1{width:calc(100% - 340px - clamp(20px,3vw,52px));max-width:none;margin:0}
  /* Inside .phero__lead the grid has already taken the action column out, so
     subtracting it a second time would narrow the headline twice. Two class
     names beat one, so this wins regardless of source order. */
  /* "Ever so slightly to the left" (Andy, 01/09). The heading is centred
     over its column; trimming the right of the box it centres in moves the
     text left by half the trim -- about 25px at 1440 -- without abandoning
     the centring, which text-align:left would (line two would jump 85px). */
  .phero .phero__lead h1{width:auto;padding-right:clamp(32px,5%,60px)}
}
/* hero_align: left. The headline sits flush with the intro paragraphs below
   it instead of centring over the column. max-width:26ch still holds the
   line length; text-wrap:balance stays so the three lines break evenly. */
.phero--left h1{margin:0;text-align:left}
/* 03/09, Andy, of /contact ("move Tell us what's happening. up and left a
   bit"): a one-line headline centred against the button-plus-note stack sat
   low and mid-column. The left variant tops-aligns the split row, so the
   short headline starts level with the button instead of below its centre. */
.phero--left .phero__split{align-items:start}
/* hero_compact: a step smaller than the shared hero size, for a headline
   simply longer than everyone else's. With WFM spelt out (03/09) About ran
   to four lines at mid-desktop and its band outgrew every other page's; at
   this size it holds to three, centred like all the rest - the left-align
   opt-out came off the same day ("about page is the only one that looks
   funny"): it existed for an intro paragraph that no longer exists. */
.phero--compact h1{font-size:clamp(1.7rem,3vw,2.4rem)}
@media(min-width:900px){
  /* Was 26ch - with WFM spelt out in full ("Workforce Management", 03/09)
     that cap wrapped About's headline to four lines and made its band the
     tallest on the site. The split's own column track now sets the width. */
  .phero--left .phero__lead h1{padding-right:0;max-width:none}
}
.phero p{font:400 1.06rem/1.65 var(--prose);color:var(--band-ink-2);max-width:62ch;margin:0}
.phero__sub p+p{margin-top:14px}
.phero .btn{margin-top:0;white-space:nowrap}
/* nowrap keeps a CTA from breaking mid-phrase, which is right at every width
   the site is actually read at -- but at 320px "Talk Through Your Problem"
   in Inter is 321px wide, and a nowrap button wider than the viewport does not
   clip, it drags the whole page into a horizontal scroll. Below 360px the
   button wraps instead. Found 08/09 when self-hosting the fonts let the test
   browser load Inter for the first time; in the fallback face the string fit,
   so the no-horizontal-scroll test had never seen it. */
@media(max-width:359px){.phero .btn{white-space:normal}}
.phero .phero__note{font-size:.85rem;color:var(--band-ink-2);margin:20px 0 0}

/* ---- prose ------------------------------------------------------------ */
/* 72ch held the line length in the comfortable range, and left the right
   third of the shell empty on a desktop. Andy, 01/09, with the empty region
   marked up: the text should run to the shell edge, level with the hero CTA
   and the tiles. So it does, from 900px up. Below that the shell is already
   narrower than 72ch and nothing changes. */
.prose{max-width:72ch}
@media(min-width:900px){.prose{max-width:none}}
.prose h2{font:600 1.5rem/1.3 var(--display);color:var(--ink);margin:38px 0 12px}
/* A body h1 exists only on the hero-less page (/contact). Unstyled it came
   out at display-heading scale and dwarfed everything ("the box in red
   looks odd") - it sits one step above h2, not five. */
.prose h1{font:600 1.7rem/1.25 var(--display);color:var(--ink);margin:0 0 12px}
/* The credentials line under "WFM experience that comes from delivery".
   Display face, deep gold, a little tracking: it should read as a strip of
   credentials, not a sentence. The dot is generated so it never ends a line. */
/* Bold and centred (Andy, 01/09), then given more weight the same day: it
   read as incidental footer text, and it is the evidence the section rests
   on. A hairline above and below, room around it, a slightly larger size and
   gold dots make it a deliberate strip without turning it into a statistics
   bar -- no numbers, no icons. */
/* ::statement:: - centred, one headline, two short paragraphs. */
.statement{text-align:center;max-width:1000px;margin:8px auto 0;padding:8px 0 4px}
/* 15/09, Andy: "Why Advocate Advisory needs to be bigger" - a section
   heading, not an eyebrow. */
.statement h2.statement__h{font:700 clamp(1.6rem,2.6vw,2.2rem)/1.15 var(--display);color:var(--ink);
  letter-spacing:-.02em;text-transform:none;margin:0 0 20px}
.statement h2.statement__h--gold{color:var(--accent-ink)}
.statement .statement__eye{margin:0 0 12px;font-size:.84rem;color:var(--ink)}
.statement p:not(.eyebrow){font:400 clamp(1.05rem,1.5vw,1.2rem)/1.65 var(--prose);color:var(--ink-2);margin:0 auto 18px;max-width:80ch}
.statement p:last-child{margin-bottom:0}
.statement p.statement__gold{font:700 clamp(1.15rem,1.8vw,1.5rem)/1.3 var(--display);color:var(--accent-ink);margin:-8px auto 0;max-width:none}
/* ::services-rail:: - the home page services as a row of cards.
   Typography is scoped under .rail so the prose rules cannot override it. */
.rail{margin:14px 0 8px;width:min(calc(var(--maxw) - 2 * var(--gutter)),calc(100vw - 2 * var(--gutter)))}
/* Below the desktop width the cards stack down the page (Andy, 11/09: "on
   mobile i shouldn't have to scroll ... it should just go down the page and
   not right"); two across from 620px, five across from 980px. */
.rail__list{list-style:none;margin:0;padding:4px 0 8px;display:grid;grid-template-columns:1fr;gap:16px}
.rail__card{display:flex;min-width:0}
@media(min-width:620px) and (max-width:979px){.rail__list{grid-template-columns:1fr 1fr}.rail__card:last-child{grid-column:1/-1}}
.rail .rail__link{display:flex;flex-direction:column;width:100%;text-decoration:none;color:inherit;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(46,58,69,.06);
  transition:border-color .16s,transform .16s,box-shadow .16s}
.rail .rail__link:hover{border-color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 6px 18px rgba(46,58,69,.10)}
.rail__head{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:14px;align-items:center;
  padding:18px 20px;background:var(--accent-wash);border-bottom:1px solid var(--line-soft)}
.rail__tile{grid-row:1/3;width:52px;height:52px;border-radius:12px;background:var(--surface);border:1px solid var(--line-soft);
  display:flex;align-items:center;justify-content:center}
.rail__tile .tile__mark{width:28px;height:28px;margin:0;color:var(--ink-2)}
.rail .rail__stage{font:500 .72rem/1.3 var(--display);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.rail .rail__name{font:700 1.08rem/1.3 var(--display);color:var(--ink);margin:0}
.rail__body{padding:18px 20px 20px;display:flex;flex-direction:column;flex:1}
.rail .rail__k{font:600 .68rem/1.3 var(--display);letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);margin:0 0 6px}
.rail .rail__x{font:400 .95rem/1.55 var(--prose);color:var(--ink-2);margin:0}
.rail .rail__body hr{border:0;border-top:1px solid var(--line-soft);margin:16px 0}
/* "Find out more" is drawn as a button so the card reads as something you
   press (Andy, 11/09: "clear they are clickable"). The whole card is the
   link; the button is the affordance. It shows on the desktop row only -
   stacked cards on a phone do without it. */
.rail .rail__go{display:none}
.rail .rail__link:hover .rail__name{color:var(--accent-ink)}
.rail .rail__link:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-color:var(--accent-ink)}
/* All five in view on a desktop (Andy, 11/09: "need to see all 5 on the page
   though ... without scrolling"): the rail becomes a five-column grid and the
   hint goes. Below that width it scrolls. */
@media(min-width:980px){
  /* The five cards break out of the text column into the side margins (Andy,
     11/09: "break out into the empty space at the side"). --railw is the
     viewport minus the gutters, capped so it stops growing on very wide
     screens; the negative margin centres it on the viewport, which is where
     the shell is centred too. */
  .rail{--railw:min(1480px - 2 * var(--gutter),100vw - 2 * var(--gutter));width:var(--railw);
        margin-left:calc(50% - var(--railw) / 2);margin-top:22px;margin-bottom:12px}
  .rail__list{grid-template-columns:repeat(5,minmax(0,1fr));padding-bottom:4px}
  .rail__link{min-width:0}
  .rail__head{column-gap:12px;padding:16px 16px 14px}
  .rail__tile{width:44px;height:44px}
  .rail__tile .tile__mark{width:24px;height:24px}
  .rail .rail__name{font-size:1rem;min-height:2.6em}
  .rail__body{padding:14px 16px 16px}
  .rail .rail__x{font-size:.88rem;line-height:1.5}
  /* The situation lines run one to three lines; holding three keeps the rule
     and "What we do" on the same line across the row. */
  .rail .rail__body>p:nth-of-type(2){min-height:4.5em}
  .rail .rail__body hr{margin:12px 0}
  .rail .rail__x:last-of-type{margin-bottom:18px}
  .rail .rail__go{margin-top:auto;align-self:flex-start;display:inline-flex;align-items:center;gap:8px;
    padding:9px 15px;border-radius:3px;background:var(--accent);color:#fff;
    font:600 .85rem/1.2 var(--display);text-decoration:none;transition:background .16s,gap .16s}
  .rail .rail__go::after{content:"\2192";font-size:1em;line-height:1}
  .rail .rail__link:hover .rail__go,.rail .rail__link:focus-visible .rail__go{background:var(--accent-hi);gap:12px}
}
/* ::trio:: - three statements in a row (About, 21/09). The same width as
   the service pillars under it, so the two grids share their edges and the
   row sits centred on the page rather than hugging the left (Andy, 21/09:
   "higher and in the middle", then "move these here and centralise
   the text" - the text is centred in each column; the
   hero-to-row distance is the gold rule's, set below). The
   h2 margins are the prose ones, so they are reset to sit under the
   eyebrow. */
.prose .trio{display:grid;grid-template-columns:1fr;gap:28px;margin:8px 0 18px;text-align:center;
  width:min(1480px - 2 * var(--gutter),calc(100vw - 2 * var(--gutter)))}
@media(min-width:760px){.prose .trio{grid-template-columns:repeat(3,minmax(0,1fr));gap:34px}}
/* With the gold rule above it (Andy, 21/09: "add this mark to where
   shown") the row follows the rule at the hero-to-mark distance every
   marked page uses; the rule under it hands over to Our Services. */
.prose .pagerule + .trio{margin-top:-6px}
.prose .trio + .pagerule{margin-top:34px;margin-bottom:8px}
.prose .trio .trio__eye{margin:0 0 10px}
.prose .trio h2{font-size:1.12rem;margin:0 0 8px}
.prose .trio p:not(.trio__eye){font-size:.93rem;line-height:1.55;margin:0}
/* ::industries:: - sector cards: picture on top, name, one line. The grids
   fill the shell like .tiles does, not the prose column. Two rows: the lead
   sectors large, the rest smaller and five across on a desktop. */
.inds{display:grid;gap:20px;grid-template-columns:1fr;margin:18px 0 8px;
      width:min(calc(var(--maxw) - 2 * var(--gutter)),calc(100vw - 2 * var(--gutter)))}
@media(min-width:620px){.inds{grid-template-columns:1fr 1fr}}
@media(min-width:980px){
  .inds--lead{gap:24px;margin-top:22px}
  .inds--rest{grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
  .inds--rest .ind__body{padding:4px 16px 18px}
  .inds--rest .ind h3{font-size:1.05rem}
  .inds--rest .ind p{font-size:.86rem;line-height:1.45}
}
@media(min-width:620px) and (max-width:979px){.inds--rest .ind:last-child:nth-child(odd){grid-column:1/-1}}
.inds__also{margin:34px 0 0;font-size:.78rem}
.inds__also.inds__first{margin-top:6px}
/* 15/09, Andy: "shrink this to fit so you can see it all on one screen" -
   on a desktop the whole Industries page (hero, intro, both rows) sits
   inside a 900px-tall window: shallower pictures, tighter bodies. */
@media(min-width:980px){
  .inds--lead{gap:14px;margin-top:10px}
  /* Shallow crops: keep the faces (upper third of every photo) in frame. */
  .inds .ind__pic img{object-position:50% 28%}
  /* No lead overrides for the picture slot or the body here: the lead cards
     lay themselves out sideways below (17/09, study B) and the sizes that
     used to shrink a 4.6/1 photograph now only fought that. */
  .inds .ind--lead h3{font-size:1.45rem;margin-bottom:8px}
  .inds .ind--lead p{font-size:.98rem;line-height:1.5}
  .inds .ind__tag{margin-bottom:4px;font-size:.66rem}
  .inds__also{margin-top:12px}
  .inds.inds--rest{margin-top:14px}
  .inds.inds--rest .ind__pic{aspect-ratio:2.5/1}
  /* The five are deliberately smaller than the two (17/09): smaller mark,
     tighter body, shorter lines in the content file. */
  .inds.inds--rest .ind__pic--drawn{padding:18px 0 2px}
  .inds.inds--rest .ind__pic--drawn .tile__mark{width:32px;height:32px}
  .inds.inds--rest .ind__body{padding:2px 14px 16px}
  .inds.inds--rest .ind h3{font-size:.95rem;margin-bottom:3px}
  .inds.inds--rest .ind p{font-size:.8rem;line-height:1.4}
}
.ind{display:flex;flex-direction:column;background:var(--surface);border:1px solid var(--line);
     border-radius:14px;overflow:hidden;box-shadow:0 1px 2px rgba(46,58,69,.06);min-width:0}
.inds a.ind{text-decoration:none;color:inherit;transition:border-color .16s,transform .16s,box-shadow .16s}
.inds a.ind:hover{border-color:var(--accent-ink);transform:translateY(-2px);box-shadow:0 6px 18px rgba(46,58,69,.10)}
.ind__pic{position:relative;aspect-ratio:16/9;background:var(--surface-2);overflow:hidden}
.ind__pic img{display:block;width:100%;height:100%;object-fit:cover;margin:0}
/* The picture fades into the card the way the reference page's photos do. */
.ind__pic::after{content:"";position:absolute;inset:auto 0 0 0;height:38%;
  background:linear-gradient(to bottom,transparent,var(--surface))}
/* No photo yet: a drawn panel in the palette with the sector mark. */
.ind__pic--drawn{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--accent-wash) 0%,var(--surface-2) 70%)}
/* The badge: the whole icon in deep gold inside a tinted rounded square
   (Andy, 17/09, the left of the two on the icon sheet - "ie gold one").
   It was an 84px grey drawing filling a 16:9 photograph slot, which is what
   the slot was built for. The card no longer holds a photograph, so the
   slot stops pretending to be one: no aspect ratio, no fade at its foot,
   and the badge sized to the icon. */
.ind__pic--drawn{aspect-ratio:auto;background:transparent;padding:24px 0 4px}
.ind__pic--drawn::after{display:none}
/* No box round it (Andy, 17/09: "can it be just this bit"). The tinted
   square was the icon sheet's presentation frame, not part of the icon -
   and inside a card that already has a border and a radius it was a box in
   a box. The icon sits on the card's own ground, which is what every other
   mark on the site does. */
.ind__badge{display:inline-flex;align-items:center;justify-content:center}
.ind__pic--drawn .tile__mark{width:42px;height:42px;margin:0;order:0;
  color:var(--accent);stroke-width:1.4}
.ind__pic--drawn .tile__mark .m-a{color:var(--accent);stroke:var(--accent)}
.ind__body{padding:8px 22px 22px}
/* Titles and lines centred (Andy, 15/09: "put the titles centralised"). */
.inds .ind__body{text-align:center}
.inds .ind h3{font:600 1.15rem/1.25 var(--display);color:var(--ink);margin:0 0 6px}
.inds .ind p{font:400 .92rem/1.5 var(--prose);color:var(--ink-2);margin:0}
/* Resources (14/09): three across, the tag on every card, a gold link line
   pinned to the bottom so the three read as one row. */
/* A rail, not a grid (Andy, 15/09: "this will need to be scrollable when
   more articles are added"): three across on a desktop, further cards
   scroll sideways with snap points; on a phone one card and a peek of
   the next. */
.inds.inds--res{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;gap:20px;padding:4px 2px 12px;
  scrollbar-width:thin;scrollbar-color:var(--line-soft) transparent;-webkit-overflow-scrolling:touch;scroll-padding-inline:2px}
/* position:relative so the visually-hidden "(PDF)" span inside a card
   link is contained by the card - otherwise, once cards scroll off the
   right, that span widens the page itself. */
.inds.inds--res .ind{flex:0 0 min(85%,340px);scroll-snap-align:start;position:relative}
@media(min-width:900px){.inds.inds--res .ind{flex-basis:calc((100% - 40px) / 3)}}
.inds.inds--res.inds--one{justify-content:center}
@media(min-width:900px){.inds.inds--res.inds--one .ind{flex-basis:min(100%,460px)}}
.ind--res .ind__body{display:flex;flex-direction:column;flex:1 1 auto}
.inds .ind__go{margin-top:auto;padding-top:14px;font:600 .9rem/1.3 var(--display);color:var(--accent-ink)}
.inds a.ind:hover .ind__go{text-decoration:underline;text-underline-offset:3px}
/* Lead cards: a gold edge and larger type. They used to take a 2/1
   photograph as well, which is where their extra height came from; with an
   icon in that slot the height was left over rather than earned (Andy,
   17/09: "can you make the boxes smaller for aged care and hospitality").
   The padding above and below is cut to bring them close to the five under
   them, and the aspect ratio goes with the photograph it was sizing. */
.ind--lead{border-color:var(--accent);box-shadow:0 2px 6px rgba(46,58,69,.08)}
.ind--lead .ind__body{padding:2px 28px 20px}
.ind--lead .ind__pic--drawn{padding:20px 0 2px}
/* A bigger mark on the lead cards. With the photograph gone, their size was
   the only thing making them lead, and a 42px icon in a card twice the
   width read as a small icon in a big empty box (17/09). */
.ind--lead .ind__pic--drawn .tile__mark{width:58px;height:58px}
/* The lead cards change shape, not just size (Andy, 17/09, study B). Once
   the photograph came off, "lead" was being carried by height alone, and
   height with nothing in it reads as a gap - which is what made the page
   look odd. Side by side, the mark sits beside the words and the extra
   width goes into the line rather than into empty card. Below 620px there
   is no room for two columns, so they stack and centre like the rest. */
@media(min-width:620px){
  .inds--lead .ind--lead{display:grid;grid-template-columns:auto minmax(0,1fr);
    gap:24px;align-items:start;padding:32px 32px 30px}
  .inds--lead .ind--lead .ind__pic--drawn{display:block;padding:2px 0 0}
  .inds--lead .ind--lead .ind__body{padding:0;text-align:left}
  .inds--lead .ind--lead .ind__pic--drawn .tile__mark{width:60px;height:60px}
}
.inds .ind__tag{font:600 .7rem/1.3 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--accent-ink);margin:0 0 8px}
.inds .ind--lead h3{font-size:1.6rem;margin-bottom:8px}
.inds .ind--lead p{font-size:1.05rem;line-height:1.55}
/* The masthead uses the whole width (Andy, 14/09: logo left, page choices
   centred, Book a Call right). A three-column grid so the nav is centred
   on the page, not merely between the other two. */
@media(min-width:900px){
  .masthead__inner{max-width:none;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
  .masthead .wordmark{justify-self:start}
  .masthead .mnav{margin:0;justify-self:center;gap:26px}  /* 15/09, Andy: "space these slightly" */
  .masthead .mact{justify-self:end}
}
/* Services dropdown (Andy, 15/09, "similar to how humanforce have"). The
   panel is a sibling of the nav inside .masthead__inner (see
   services_panel); :has() ties it to the button's hover/focus/open state. */
/* The button copies the link box exactly (font, leading, padding, border) so
   "Services" sits on the same line as its neighbours: phone links are
   10px-padded touch targets, desktop links are 4px-padded. */
.mnav__has{display:flex;align-items:flex-start}
.masthead .mnav .mnav__btn{font:500 .9rem/1.6 var(--display);color:var(--band-ink-2);background:none;border:0;
  border-bottom:2px solid transparent;padding:10px 0;margin:0;cursor:pointer;display:inline-flex;align-items:center;gap:6px;
  white-space:nowrap;transition:color .14s,border-color .14s}
@media(min-width:900px){.masthead .mnav .mnav__btn{font-size:.88rem;padding:4px 0}}
.masthead .mnav .mnav__btn:hover,.masthead .mnav .mnav__btn[aria-expanded="true"]{color:var(--band-ink)}
.masthead .mnav .mnav__btn.is-here{color:var(--band-ink);border-bottom-color:var(--accent-hi)}
.masthead .mnav .mnav__btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.masthead .mnav .mnav__btn svg{width:10px;height:6px;transition:transform .16s}
.mnav__has.is-open .mnav__btn svg{transform:rotate(180deg)}
.masthead__inner{position:relative}
.mpanel{display:none;position:absolute;top:100%;z-index:70;text-align:left;
  background:var(--surface);color:var(--ink);border:1px solid var(--line);
  box-shadow:0 18px 48px rgba(46,58,69,.18)}
/* No overflow:hidden on the panel: it clipped the hover bridge (::before)
   above it, so the panel closed as the pointer crossed the gap (Andy,
   15/09: "at the moment you have to click on it"). The rounded corners
   come from the head and body instead. */
.mpanel__head{border-radius:inherit;border-bottom-left-radius:0;border-bottom-right-radius:0}
.mpanel__body{border-radius:inherit;border-top-left-radius:0;border-top-right-radius:0}
.masthead__inner:has(.mnav__has.is-open) .mpanel{display:block}
/* Inside the masthead the nav-link and button rules would reach in; reset. */
.mpanel a{white-space:normal;flex:initial;padding:0;border-bottom:0;font-size:inherit;font-weight:inherit;color:inherit;text-decoration:none}
.mpanel .btn{display:inline-flex;padding:9px 16px;font:600 .85rem/1.2 var(--display);color:var(--accent-label,#fff);
  background:var(--accent);border-radius:3px;flex:none;white-space:nowrap}
.mpanel .btn:hover{background:var(--accent-hi);color:var(--ink)}
.mpanel__head{display:flex;align-items:center;justify-content:space-between;gap:24px;
  padding:18px 22px;background:var(--wash);border-bottom:1px solid var(--line-soft)}
.mpanel__title{font:700 1.35rem/1.2 var(--display);color:var(--ink);margin:0;letter-spacing:-.02em}
.mpanel__sub{font:400 .95rem/1.4 var(--prose);color:var(--ink-2);margin:4px 0 0}
.mpanel__body{padding:18px 22px 20px}
.mpanel__label{margin:0 0 12px}
.mpanel__grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr;gap:4px}
.mpanel__grid a{display:flex;align-items:flex-start;gap:12px;padding:10px 10px;border-radius:8px;color:var(--ink)}
.mpanel__grid a:hover,.mpanel__grid a:focus-visible{background:var(--surface-2);color:var(--ink)}
.mpanel__grid a.is-here{background:var(--accent-wash);color:var(--ink)}
.mpanel__grid a>span{min-width:0}
.mpanel__grid .tile__mark{width:26px;height:26px;margin:2px 0 0;flex:none;color:var(--accent-ink)}
.mpanel__grid b{display:block;font:600 1rem/1.3 var(--display);color:var(--ink)}
.mpanel__grid small{display:block;font:400 .84rem/1.4 var(--prose);color:var(--ink-2);margin-top:2px}
/* Phone: a full-width sheet under the masthead, opened by the button. */
@media(max-width:899px){
  .mpanel{left:0;right:0;border-left:0;border-right:0;border-radius:0 0 12px 12px;max-height:calc(100vh - 120px);overflow-y:auto}
  .mpanel__head{border-radius:0}
}
/* Desktop: a centred card, on hover as well as click. */
@media(min-width:900px){
  .mpanel{left:50%;transform:translateX(-50%);width:min(980px,calc(100vw - 32px));margin-top:14px;border-radius:12px}
  .mpanel::before{content:"";position:absolute;left:0;right:0;top:-14px;height:14px}
  .masthead__inner:has(.mnav__has:hover) .mpanel,
  .masthead__inner:has(.mnav__btn:focus-visible) .mpanel,
  .mpanel:hover,.mpanel:focus-within{display:block}
  .masthead__inner:has(.mnav__has:hover) .mnav__btn svg{transform:rotate(180deg)}
  @media(prefers-reduced-motion:no-preference){
    .mpanel{animation:mpanel-in .16s ease-out}
    @keyframes mpanel-in{from{opacity:0;transform:translate(-50%,-6px)}to{opacity:1;transform:translate(-50%,0)}}
  }
  .mpanel__head{padding:20px 28px}
  .mpanel__body{padding:22px 28px 24px}
  .mpanel__grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 24px}
}
@media(min-width:900px) and (max-width:1099px){.masthead .mnav .mnav__btn{font-size:.85rem}}
/* Seven items since Resources arrived (14/09): between 900 and 1100px the
   row is 3px too wide for the window, so the links sit a little closer. */
@media(min-width:900px) and (max-width:1099px){
  .masthead__inner{gap:16px}
  .masthead .mnav{gap:15px}
  .masthead .mnav a{font-size:.85rem}
}
/* ::pillars:: - five numbered cards in one row on the home page (15/09). */
/* Doubled class so these outrank the generic .tiles column rules further
   down the sheet (same specificity, later wins). */
.tiles.tiles--pillars{gap:18px;margin-top:34px}
/* Two statements in a row (Why ... then the services heading, 15/09) need
   air between them. */
.statement + .statement{margin-top:clamp(40px,5vw,64px)}
@media(min-width:620px){.tiles.tiles--pillars{grid-template-columns:1fr 1fr}}
@media(min-width:900px){.tiles.tiles--pillars{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(min-width:1100px){.tiles.tiles--pillars{grid-template-columns:repeat(5,minmax(0,1fr));gap:20px}}
.tiles.tiles--pillars:not(.tiles--mini) .tile:first-child:nth-last-child(5){grid-column:auto}
.tiles .tile--pillar{align-items:flex-start;text-align:left;padding:30px 24px 24px;border-radius:12px;gap:0;overflow:visible}
.tiles .tile--pillar .pillar__num{position:absolute;top:-14px;left:-14px;width:30px;height:30px;border-radius:50%;
  background:var(--ink);color:var(--paper);font:700 .8rem/30px var(--display);text-align:center;
  box-shadow:0 0 0 4px var(--paper)}
.tiles .tile--pillar .pillar__mark{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;
  border-radius:12px;background:var(--wash);border:1.5px solid var(--accent);margin:0 0 18px}
.tiles .tile--pillar .pillar__mark .tile__mark{width:28px;height:28px;margin:0;color:var(--accent-ink)}
.tiles .tile--pillar h3{font:700 1.15rem/1.25 var(--display);color:var(--ink);margin:0 0 4px}
.tiles .tile--pillar .pillar__sit{font:400 .95rem/1.45 var(--prose);color:var(--ink-2);margin:0 0 16px}
.tiles .tile--pillar .pillar__pts{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:8px}
.tiles .tile--pillar .pillar__pts li{position:relative;padding-left:16px;font:400 .92rem/1.4 var(--prose);color:var(--ink)}
.tiles .tile--pillar .pillar__pts li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:50%;background:var(--accent)}
.tiles .tile--pillar .tile__go{padding-top:0}
/* Mark, name and situation line centred (Andy, 15/09: "centralise these
   titles"); the points list and the link stay left-aligned. */
.tiles .tile--pillar .pillar__mark,.tiles .tile--pillar .tile__go{align-self:center}
.tiles .tile--pillar h3,.tiles .tile--pillar .pillar__sit{align-self:stretch;text-align:center}
.is-home .tiles--pillars .tile{padding:30px 24px 24px}
.is-home .tiles--pillars .tile p{font-size:.95rem}
/* The home page runs at the hero's width all the way down (Andy, 15/09:
   "use this space better on the homepage, ie spread out more"): the shell
   and the service tiles follow the 1480px hero shell rather than the
   1160px reading column. Other pages keep the column. */
/* The wider shell follows the five numbered cards, rather than being a
   home-page fact: About shows them now too, and at 1160 the rail either
   wrapped badly or overflowed its shell (16/09). */
.is-home .band>.shell,.band>.shell:has(.tiles--pillars){max-width:1480px}
/* "budge this up slightly" (15/09): the Why section sits a little closer
   under the home hero than the page-wide rule allows. */
/* 15/09, Andy: the rule under the hero is back on the home page ("add this
   line back in"), drawn inside the shell so it lines up with the content,
   and a matching rule between the two statements. */
/* The home page takes the Health Check's separator (Andy, 16/09): a short
   gold mark instead of a rule across the page, under the hero and between
   the two statements. The band and the statement each draw it themselves
   rather than gaining a ::rule:: element, because both already own the
   space it sits in. */
.is-home .lhero + .band{position:relative;
  padding-top:calc(clamp(30px,3.4vw,50px) + 30px)}
/* The mark sits the same distance below the hero as the Health Check's does
   - that distance, not zero - and the extra 30px above keeps the same air
   under it that ::rule:: leaves (Andy, 16/09: the gap should match). */
.is-home .lhero + .band::before{content:"";position:absolute;
  top:clamp(30px,3.4vw,50px);left:50%;
  transform:translateX(-50%);width:56px;border-top:2px solid var(--accent)}
/* The same rule under the hero on the service pages and the Health Check
   (Andy, 15/09: "for all services can you add the line"). */
/* Service pages take the gold mark too (Andy, 16/09), drawn by the band as
   on the home page. The Health Check is excluded: it carries .is-service as
   well, but its mark is a real ::rule:: element in the content, and a second
   one drawn here would double it. --heromark is the one distance from hero
   to mark, shared by every page that has one. */
.is-service{--heromark:clamp(30px,3.4vw,50px)}
.is-service .lhero + .band{position:relative;border-top:0;
  padding-top:calc(var(--heromark) + 30px)}
.is-service:not(.is-healthcheck) .lhero + .band::before{content:"";
  position:absolute;top:var(--heromark);left:50%;transform:translateX(-50%);
  width:56px;border-top:2px solid var(--accent)}
/* Edge to edge (Andy, 15/09: "the lines are supposed to go across the
   whole page"): the statement sits inside the shell, so its rule is a
   pseudo-element the full window wide, and the band clips the overhang. */
.is-home .band{overflow:clip}
.is-home .statement + .statement{position:relative;padding-top:clamp(32px,4vw,52px)}
.is-home .statement + .statement::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:56px;border-top:2px solid var(--accent)}
/* The closing block on the home page uses the same width: text to the left
   edge, the button to the right (15/09: "move ... to the left", "move
   further to the right"). */
.is-home .endcta>.shell{max-width:1480px}
@media(min-width:900px){.is-home .endcta__grid{grid-template-columns:minmax(0,1fr) auto}
  .is-home .endcta__say{max-width:62ch}
  .is-home .endcta__act{justify-self:end;text-align:right}}
/* The five numbered cards take the wider rail wherever they appear, not
   just on the home page - on About in the 1160px shell the columns were
   narrow enough to wrap "Compliance review" (16/09). */
.is-home .tiles,.tiles.tiles--pillars{width:min(1480px - 2 * var(--gutter),calc(100vw - 2 * var(--gutter)));gap:20px}
@media(min-width:980px){.is-home .tile{padding:30px 28px 26px}
  .is-home .tile h3{font-size:1.2rem}
  .is-home .tile p{font-size:1rem}}
/* The light hero (home, 14/09). */
.lhero{background:var(--paper);padding:clamp(22px,3.4vw,44px) 0 clamp(24px,3vw,40px)}
/* The section after the hero draws its own top rule; the light hero runs
   straight into it (Andy, 14/09: "remove this line"). */
.lhero + .band{border-top:none;padding-top:clamp(40px,5vw,72px)}
.lhero__grid{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
/* The hero uses the whole width (Andy, 14/09: "spread these out to use the
   width, make the gif bigger so it can be read"): its shell runs wider than
   the page column, and the demonstration takes the larger share. */
.lhero--media>.shell{max-width:1480px}
.lhero--text .lhero__grid{grid-template-columns:1fr}
.lhero--text .lhero__text{max-width:44em}
/* The service name over a service headline: a plain small-caps line (15/09). */
.lhero .lhero__kick{margin:0 0 10px;color:var(--accent-ink);font-size:.8rem}
.lhero .pricelead{margin:14px 0 0;padding-top:0;border-top:none}
.lhero .pricelead b{font:600 1rem/1.4 var(--display);color:var(--accent-ink)}
.lhero .pricelead a{color:var(--accent-ink)}
@media(min-width:900px){.lhero--media .lhero__grid{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:clamp(36px,4vw,64px)}
  /* Beside a picture the headline is sized so "Your Workforce Management."
     holds one line (Andy, 14/09). */
  .lhero.lhero--media h1{font-size:clamp(1.9rem,2.8vw,2.6rem)}}
/* One headline size on every hero (Andy, 15/09: "same for all the heros") -
   the size the home hero has had beside its video since 14/09. */
.lhero h1{font:800 clamp(1.9rem,2.8vw,2.6rem)/1.08 var(--display);letter-spacing:-.03em;color:var(--ink);margin:0 0 20px;text-wrap:initial}
.lhero h1 em{font-style:normal;color:var(--accent-ink)}
.lhero__intro{font:400 clamp(1.05rem,1.4vw,1.2rem)/1.6 var(--prose);color:var(--ink-2);max-width:32em;margin:0 0 26px}
.lhero__act{margin:0}
.lhero .btn--lg{padding:16px 30px;font-size:1.05rem}
.lhero__note{font:400 .9rem/1.4 var(--display);color:var(--ink-2);margin:12px 0 0}
/* hero_align: centre - the whole text column, pill to note (home, 14/09). */
.lhero--centre .lhero__text{text-align:center}
.lhero--centre .lhero__intro{margin-left:auto;margin-right:auto}
.lhero--centre .pricelead{text-align:center;justify-content:center}
/* A text-only hero centred on the page (Industries, 15/09): the 44em column
   itself sits in the middle, not just the text inside it. */
.lhero--text.lhero--centre .lhero__text{margin-inline:auto}
/* And the section after a text-only hero starts sooner ("bring Who We Work
   With closer to the top"). Heroes with a picture keep the deeper gap. */
.lhero--text + .band{padding-top:clamp(20px,2.6vw,36px)}
/* The headline is ~31.5em wide at this weight, so the size follows the
   window: as big as the standard headline where it fits, smaller where it
   does not, always one line from 900px up. */
@media(min-width:900px){
  .lhero--oneline>.shell{max-width:1480px}
  .lhero--oneline .lhero__text{max-width:none}
  .lhero.lhero--oneline h1{white-space:nowrap;font-size:min(3.3rem,calc((100vw - 2 * var(--gutter) - 16px) / 31.5))}
}
@media(min-width:900px){.lhero--wide>.shell{max-width:1480px}.lhero--wide .lhero__text{max-width:none}
  .lhero.lhero--small h1{font-size:clamp(1.9rem,2.8vw,2.6rem)}}
@media(min-width:900px){.split--flip .split__pic{order:-1}}
.lhero--compact{padding-top:clamp(12px,1.8vw,24px);padding-bottom:2px}
.lhero--compact .lhero__text>h1:last-child{margin-bottom:8px}
.lhero--compact + .band{padding-top:12px}
/* The stamp sits ON the media (Andy, 16/09), so it travels with the thing it
   is labelling rather than reading as a caption under it. Its own ivory
   ground, because it lands on whatever frame of the video is playing - that
   is also what the contrast check in test-site.js measures against. */
.lhero__media{position:relative}
.lhero__stamp{position:absolute;top:14px;right:14px;margin:0;z-index:2}
.lhero__stamp .sheet__stamp{color:var(--accent);border-color:var(--accent);
  background:rgba(242,239,231,.94)}
@media(max-width:620px){.lhero__stamp{top:10px;right:10px}}
.lhero__media .demo{border-radius:14px;overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-lg)}
.lhero__media .demo__video{aspect-ratio:3/2}
/* A drawn figure (the lifecycle wheel GIF, 14/09) sits on the ground with no card edge. */
.lhero__media .split__pic:not(.demo):not(.split__pic--card){border:none;box-shadow:none;border-radius:0;background:transparent}
.lhero__media .split__pic--card{border-radius:14px;overflow:hidden;box-shadow:var(--shadow-lg)}
/* A still picture sits a little smaller than the videos (Andy, 15/09). */
@media(min-width:900px){.lhero__media .split__pic--card{max-width:78%;margin-inline:auto}}
/* The dark phone version sits as a rounded ink panel. */
@media(max-width:899px){.lhero__media .split__pic--mdark{border-radius:14px;overflow:hidden;background:var(--ink)}}
.lhero__proof{text-align:center;margin:clamp(30px,4vw,48px) 0 0;font:400 .95rem/1.5 var(--display);color:var(--ink-2)}
/* ::figure:: - a picture on its own, centred. */
.fig{margin:22px auto 8px;width:100%}
.fig img{display:block;width:100%;height:auto;margin:0}
.fig__video{display:block;width:100%;height:auto;margin:0;border-radius:8px;
  border:1px solid var(--line-soft);background:var(--paper)}
/* With a header bar the frame belongs to the figure, so the media inside
   drops its own edge and the bar and the media read as one sheet. */
.fig--framed{border:1px solid var(--line);border-radius:3px;background:var(--surface);overflow:hidden}
/* Ink and gold (Andy, 16/09). The bar paints its own dark ground, so it is
   listed with the dark-ground selectors near the top of this stylesheet -
   that is what hands it the light gold at 5.09:1 rather than the deep gold
   meant for ivory. */
.fig--framed .fsample__top{background:var(--band-bg);border-bottom:0}
.fig--framed .fsample__label{color:var(--accent)}
.fig--framed .sheet__stamp{color:var(--accent);border-color:var(--accent)}
.fig--framed .fig__video,.fig--framed img{border:0;border-radius:0}
.prose .fig--framed .fig__cap{padding:0 18px 14px;margin:12px 0 0}
.prose .fig__cap{font:400 .85rem/1.5 var(--prose);color:var(--ink-2);
  margin:10px 0 0;text-align:center}
/* ::split:: - text left, picture right from 900px; stacked below. */
.split{display:grid;grid-template-columns:1fr;gap:22px;align-items:start;margin:0 0 8px}
.split__text>:first-child{margin-top:0}
.split__text>h2{margin-top:28px}
.split__pic{margin:0;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  box-shadow:0 1px 2px rgba(46,58,69,.06)}
.split__pic img{display:block;width:100%;height:auto;margin:0}
.split--centre{align-items:center}
a.split__pic{display:block;text-decoration:none}
/* The Health Check demonstration (14/09): the video plays once, muted; the
   button appears over the final frame, and on hover, and always when motion
   is reduced. The whole figure is the link. */
.demo{position:relative;background:var(--band-bg)}
.demo__video{display:block;width:100%;height:auto;aspect-ratio:3/2}
.demo__cta{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;padding:0 0 9%;
  background:linear-gradient(to bottom,transparent 45%,rgba(46,58,69,.7));opacity:0;transition:opacity .25s;pointer-events:none}
.demo__cta .btn{--accent:#C8A76A;--accent-hi:#D8BC85;--accent-label:#2E3A45;background:var(--accent);color:#2E3A45;font-size:1rem;padding:14px 26px;box-shadow:0 6px 18px rgba(0,0,0,.25)}
.demo__cta .btn::after{content:"\2192";margin-left:10px}
.demo--done .demo__cta,.demo:hover .demo__cta,.demo:focus-visible .demo__cta{opacity:1}
.demo:hover .demo__cta .btn{background:var(--accent-hi)}
@media(prefers-reduced-motion:reduce){.demo__cta{opacity:1}}
@media(min-width:900px){
  .split{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:40px}
  /* The flipped About split had the photo hugging the left edge and the
     text the right (Andy, 15/09: "you spread these apart more"): a
     narrower gap and the two columns pulled towards the middle. */
  .split--flip{gap:32px;max-width:1080px;margin-inline:auto}
  /* A video wants the width: the findings in it are small type. */
  .split:has(.demo){grid-template-columns:minmax(0,1fr) minmax(0,1.4fr);gap:36px}
}
/* ::lifecycle:: - the wheel on the About page. Colours are the page tokens,
   so the figure follows the palette; sizes are SVG units and scale with the
   column. Hover/focus is CSS only, via :has(). */
.lifecycle{margin:28px 0 8px;max-width:960px}
.lifecycle .lc{width:100%;height:auto;display:block;font-family:var(--display)}
.lc-arrow{fill:none;stroke:var(--accent);stroke-width:2.2;opacity:.7}
.lc-p{cursor:pointer;outline:none}
.lc-seg{fill:var(--surface);stroke:var(--line);stroke-width:1.5;transition:fill .18s,stroke .18s}
.lc-icon{color:var(--accent);transition:color .18s}
.lc-label{font-size:18px;font-weight:600;fill:var(--ink);transition:fill .18s}
.lc-lbl{transform-box:fill-box;transition:transform .18s}
.lc-p:is(:hover,:focus) .lc-lbl{transform:scale(1.35)}
.lc-p:is(:hover,:focus) .lc-seg{fill:var(--accent);stroke:var(--accent)}
.lc-p:is(:hover,:focus) .lc-icon{color:var(--surface)}
.lc-p:is(:hover,:focus) .lc-label{fill:var(--accent)}
.lc-centre{fill:var(--surface-2);stroke:var(--line-soft);stroke-width:1.5}
.lc-across{font-size:20px;font-weight:700;fill:var(--ink)}
.lc-rule{stroke:var(--accent);stroke-width:2;opacity:.6}
.lc-kicker{font-size:12px;fill:var(--muted);letter-spacing:2.5px}
@media(max-width:620px){.lc-label{font-size:22px}.lc-across{font-size:22px}.lc-kicker{font-size:14px}}
@media(prefers-reduced-motion:reduce){.lc *{transition:none}}
.proofline{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 0;margin:32px 0 0;
           padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);
           font:700 1.04rem/1.5 var(--display);color:var(--accent-ink);letter-spacing:.015em;
           width:100%;text-align:center}
.proofline span{white-space:nowrap}
/* When the proofline LEADS the page (home, 03/09 - it moved above "Whose
   side we're on"), the hero-to-strip gap was band padding + its own 32px
   top margin. Andy: half. Both contributors halve, so the strip sits close
   under the band without touching any other page's first-section spacing. */
/* Its top rule doubled with the band's own bottom edge once the strip sat
   flush beneath it ("remove the part marked in red") - the band edge does
   the work, the strip keeps only its bottom rule. */
.phero + .band .prose > .proofline:first-child{margin-top:0;border-top:none;padding-top:6px}
.phero + .band:has(.prose > .proofline:first-child){padding-top:clamp(8px,0.8vw,12px)}

/* The eight Health Check areas as a compact grid of cells: 4 x 2 on a desktop,
   2 x 4 on a tablet, one column on a phone. Hairline grid, display face, no
   descriptions -- the labels are clear on their own (Andy, 01/09). */
/* ::areas:: - the employee journey. Seven stages left to right joined by a
   hairline, then the four that run across all of them on an ink strip that
   spans the full width, so the relationship is in the picture rather than in
   a caption. Stacks to one column on a phone, where the joins drop away. */
/* The ink strip and the journey row are one panel, not two boxes: the
   .jpanel wrapper carries the border and the radius, and the two parts sit
   flush inside it, so the four that run across every stage read as the head
   of the journey rather than a separate band (Andy, 16/09). */
/* "How Pricing Works": the paragraph and its button on one line, the button
   pinned right and centred on the text (Andy chose study A, 16/09). The
   paragraph keeps a readable measure; below 760px the two stack and the
   button returns to the left, which is where every other CTA on the page
   sits. flex-none on the button so the label never wraps. */
/* Section headings are LEFT. Centred on the Health Check 16/09 and rolled
   out to the five service pages 17/09, then reverted the same day (Andy:
   "can you move headers back to the left rather than central, thats my
   bad"). Left is also what the rest of the site does, so there is no longer
   a rule here at all rather than a rule setting the default. The gold mark
   above each heading stays centred - that is its own margin:auto, not this
   - and so do the step descriptions and the diagram, which centre
   themselves. */

/* ::figure:: with `beside: pricing` - the findings example on the left and
   the price beside it (Andy, 16/09), so the page answers "what do I get"
   and "what does it cost" in one look. One column below 980px, where the
   figure needs the full width to stay legible. */
.prose .figpair{display:grid;gap:clamp(20px,3vw,44px);grid-template-columns:1fr;
  align-items:center;margin:18px 0 22px;
  /* Out past the 1160px shell to the page gutter (Andy, 16/09). The pull is
     half the difference between the shell and the viewport, which is exactly
     what centring the shell added, and min(0px, ...) so nothing moves on a
     screen narrower than the shell. */
  width:calc(100vw - 2 * var(--gutter));
  margin-left:min(0px, calc((var(--maxw) - 100vw) / 2))}
@media(min-width:980px){
  .prose .figpair{grid-template-columns:minmax(0,1.45fr) minmax(300px,1fr)}
}
.prose .figpair .fig{margin:0;max-width:none;width:auto}
/* No outline round the sheet in this form - the ink bar at the top and
   the white caption strip already give it edges (Andy, 16/09). */
.prose .figpair .fig--framed{border:0;border-radius:0;background:transparent}
/* The panel wraps its content rather than running the height of the figure
   (Andy, 16/09): stretched, it was mostly empty above and below the wording.
   Its content stays on the horizontal centre line. */
.prose .figpair__side{display:block}
.prose .figpair .pricerow > h2{margin:0;font-size:1.3rem}
/* In a column this narrow the row has to stack, whatever it does elsewhere. */
/* No fill in this form either (Andy, 16/09): the heading, the wording and
   the button sit on the page's own ground beside the sheet. */
.prose .figpair .pricerow{width:auto;flex-direction:column;background:transparent;
  align-items:center;text-align:center;gap:18px;margin:0;padding:24px}
.prose .figpair .pricerow > p{flex:0 0 auto;max-width:34ch}
.prose .figpair .pricerow .btn{margin-left:0;align-self:center}

/* The pricing wording on a get-a-price page: it sits between the intro and
   the form, so it is set apart without being a panel (16/09). */
.prose .pricenote{border-left:2px solid var(--accent);padding-left:16px;
  margin:18px 0 22px;color:var(--ink-2);max-width:62ch}

/* ::rule:: - a short gold mark rather than a rule across the page (Andy
   chose study B, 16/09). It says "new section" without cutting the page in
   half, and it does not compete with the full-width hairline under the hero,
   which is the one place that line still means "structure". Centred, to sit
   with the centred headings. */
.prose .pagerule{height:0;border-top:2px solid var(--accent);
  width:56px;margin:38px auto 30px}
/* With a gold mark opening every section, the hairline under the hero was a
   second, louder separator doing the same job (Andy, 16/09). Health Check
   only - the five service pages still have it, and :root raises the weight
   above .is-service .lhero + .band, which has the same specificity. */
/* One gap from the hero to the first gold mark, wherever the mark opens a
   page (Andy, 16/09). The home page's mark is drawn by the band itself and
   spaced by this same padding, so the Health Check's own mark takes the
   padding too and contributes no margin of its own. */
:root .is-healthcheck .lhero + .band{border-top:0;padding-top:var(--heromark)}
/* About opens with the same gold mark since 21/09 (Andy: "add this mark
   to where shown"), so it takes the same distance. */
.is-about{--heromark:clamp(30px,3.4vw,50px)}
:root .is-about .lhero + .band{border-top:0;padding-top:4px}
/* Not --heromark: Andy moved the rule up again on 21/09 ("moved up
   slightly to where the red marker is"). The wheel's own whitespace
   under its labels supplies the rest of the gap. */
/* The wheel already carries the hero's own air under it; without this the
   mark sat 80px below the last label, not the 50px Andy drew. */
.is-about .lhero{padding-bottom:8px}
.prose > .pagerule:first-child{margin-top:0}

/* ::diagnosis:: - the argument the two opening paragraphs used to make,
   drawn instead of written (Andy, 17/09: "its going to replace this on the
   website"). Built from real text rather than the PNG it was prototyped as:
   the words stay selectable, translatable and indexed, the panel follows the
   visitor's dark-mode preference, and the three columns stack on a phone,
   none of which an image does. --band-bg, so the ink is the same ink as the
   rest of the site's dark grounds.

   The connectors are borders on pseudo-elements: a vertical stem between
   each step, a horizontal bus over the three causes on a wide screen, and on
   a phone the bus goes and each cause keeps its own stem, which is the same
   diagram read downwards. */
/* The ink panel, restored (Andy, 17/09: "lets go back to the original blue
   version you had"). It was taken onto the page ground and then given a
   light tint, and neither beat this - the diagram is the one moment on the
   page that stops the reader, and an ink ground is what makes it do that.
   .dx is back in the dark-ground selector list above, which is what remaps
   --accent to gold #C8A76A and --accent-label to ink for everything inside
   it; the membership rule there is that an element belongs if it paints a
   dark background itself, and this does again. */
/* 17/09, after the ink panel came off: "can you try just a slightly lighter
   tone around this". One step off the page ground rather than a panel on it -
   surface-2 #F8F6F0, which the brand file already keeps for exactly this, a
   tint that sets something apart without drawing a line round it. No border,
   the same call Andy made on the pricing row. In dark mode the token is
   #2E3A45, which is a step LIGHTER than that scheme's paper, so the tint
   reads the same way round in both. */
.prose .dx{background:var(--band-bg);color:var(--band-ink);border-radius:3px;
  padding:clamp(28px,4vw,46px) clamp(20px,3vw,40px) clamp(26px,3.4vw,40px);
  margin:22px 0 26px;max-width:none;text-align:center}
.prose .dx__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 14px}
.prose .dx__claim{font:600 clamp(1.35rem,3.2vw,2.1rem)/1.25 var(--display);
  letter-spacing:-.018em;color:var(--band-ink);margin:0;text-wrap:balance}
.prose .dx__pivot{font:600 clamp(1.15rem,2.4vw,1.6rem)/1.3 var(--display);
  color:var(--accent);margin:0}
.prose .dx__ask{font:600 clamp(1.1rem,2.2vw,1.45rem)/1.3 var(--display);
  letter-spacing:-.012em;color:var(--band-ink);margin:0 auto;
  border:1.6px solid var(--accent);border-radius:3px;
  padding:16px 26px;max-width:26ch}
.prose .dx__answer{font:600 clamp(1.05rem,2.1vw,1.35rem)/1.3 var(--display);
  color:var(--accent-label);background:var(--accent);border-radius:3px;
  padding:15px 26px;margin:0 auto;max-width:28ch}
.prose .dx__close{font:600 clamp(1.1rem,2.3vw,1.5rem)/1.3 var(--display);
  letter-spacing:-.014em;color:var(--band-ink);margin:0}

/* The stem between one step and the next, with its arrowhead. aria-hidden in
   the markup: the order of the blocks already carries the sequence. */
.prose .dx__flow{display:block;position:relative;height:38px;margin:0 auto;
  width:0;border-left:1.6px solid var(--accent)}
.prose .dx__flow::after{content:"";position:absolute;left:-5px;bottom:-1px;
  width:0;height:0;border-left:5.5px solid transparent;
  border-right:5.5px solid transparent;border-top:8px solid var(--accent)}

.prose .dx__causes{list-style:none;margin:0;padding:34px 0 0;position:relative;
  display:grid;gap:26px;max-width:none;text-align:center}
/* Phone: no bus, one stem per cause - the same diagram read downwards. */
.prose .dx__causes > li{margin:0;position:relative}
.prose .dx__causes > li::before{content:"";position:absolute;left:50%;
  top:-26px;height:18px;border-left:1.6px solid var(--accent)}
.prose .dx__causes::before{content:"";position:absolute;left:50%;top:0;
  height:16px;border-left:1.6px solid var(--accent)}
@media(min-width:760px){
  .prose .dx__causes{grid-template-columns:repeat(3,1fr);gap:0 20px;
    padding-top:56px}
  /* the bus, from the first column's centre to the last */
  .prose .dx__causes::before{left:16.666%;right:16.666%;top:28px;height:0;
    border-left:0;border-top:1.6px solid var(--accent)}
  .prose .dx__causes > li::before{top:-28px;height:28px}
}
/* The three causes come back together above the answer: on a wide screen a
   bus mirroring the one that split them, on a phone a single stem from the
   last cause, because there is nothing to gather side by side (17/09). */
.prose .dx__merge{display:block;position:relative;padding-top:28px}
.prose .dx__merge::before{content:"";position:absolute;left:50%;top:0;
  height:28px;border-left:1.6px solid var(--accent)}
.prose .dx__causes > li::after{content:"";position:absolute;left:50%;
  bottom:-28px;height:28px;border-left:1.6px solid var(--accent)}
.prose .dx__causes > li:not(:last-child)::after{display:none}
@media(min-width:760px){
  .prose .dx__causes > li:not(:last-child)::after{display:block}
  .prose .dx__merge::before{left:16.666%;right:16.666%;top:28px;height:0;
    border-left:0;border-top:1.6px solid var(--accent)}
}
.prose .dx__cause{font:700 .74rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.prose .dx__cause::after{content:"";display:block;width:44px;height:0;
  border-top:2px solid var(--accent);margin:9px auto 0}
.prose .dx__causes ul{list-style:none;margin:0;padding:0;max-width:none}
.prose .dx__causes ul li{margin:0;font:400 1rem/1.9 var(--display);
  color:var(--band-ink)}

/* ::compare:: - the two ways an organisation chooses a platform, side by
   side (Andy, 17/09). Same ink panel and same connectors as ::diagnosis::,
   because it is the same kind of object: an argument the page already makes
   in prose, drawn. Real text, not an image, for the reasons set out on .dx.

   The two columns are deliberately NOT symmetrical in weight. The
   supplier-led side is set in the band's muted ink and the customer-led side
   in full ivory with a gold frame, so the page shows which one it is arguing
   for without a caption saying so. On a phone they stack, supplier-led
   first, because the argument only works if the reader meets the familiar
   version before the alternative. */
.prose .cmp{background:var(--band-bg);color:var(--band-ink);border-radius:3px;
  padding:clamp(26px,3.6vw,42px) clamp(18px,2.6vw,34px) clamp(24px,3vw,36px);
  margin:22px 0 26px;max-width:none}
.prose .cmp__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 22px;text-align:center}
.prose .cmp__cols{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:26px}
@media(min-width:820px){.prose .cmp__cols{grid-template-columns:repeat(2,1fr);
  gap:0 clamp(24px,4vw,56px)}}
.prose .cmp__cols > li{margin:0;text-align:center;padding:18px 16px 20px;
  border-radius:3px;border:1px solid var(--band-line)}
/* Both sides are framed, so the pair reads as a comparison rather than as
   one thing beside a loose column - but only the side the page argues for
   takes the gold (17/09). --band-line is 3.24:1 on ink, which passes for a
   non-text border. */
.prose .cmp__cols > li.is-ours{border-color:var(--accent)}
.prose .cmp__h{font:700 .74rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--band-ink-2);margin:0 0 4px}
.prose .cmp__cols > li.is-ours .cmp__h{color:var(--accent)}
.prose .cmp__step{font:600 1.02rem/1.35 var(--display);color:var(--band-ink-2);
  margin:0;letter-spacing:-.008em}
.prose .cmp__cols > li.is-ours .cmp__step{color:var(--band-ink)}
/* The one boxed step in each column: what that approach actually starts from. */
.prose .cmp__box{font:600 1.02rem/1.35 var(--display);color:var(--band-ink-2);
  margin:0 auto;border:1.4px solid var(--band-ink-2);border-radius:3px;
  padding:12px 20px;max-width:22ch}
.prose .cmp__cols > li.is-ours .cmp__box{color:var(--band-ink);
  border-color:var(--accent)}
/* The last step is the outcome, so it is set like one. */
.prose .cmp__end{font:600 1.08rem/1.3 var(--display);margin:0;
  color:var(--band-ink-2);letter-spacing:-.012em}
.prose .cmp__cols > li.is-ours .cmp__end{color:var(--accent)}
.prose .cmp__flow{display:block;position:relative;height:30px;margin:0 auto;
  width:0;border-left:1.4px solid var(--band-ink-2)}
.prose .cmp__cols > li.is-ours .cmp__flow{border-color:var(--accent)}
.prose .cmp__flow::after{content:"";position:absolute;left:-5px;bottom:-1px;
  width:0;height:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:7px solid var(--band-ink-2)}
.prose .cmp__cols > li.is-ours .cmp__flow::after{border-top-color:var(--accent)}

/* ::drift:: - where an implementation went wrong, phase by phase (Andy,
   17/09, study C revised). Two of the six failures he started with are not
   phase failures at all - project management as somebody's second job, and
   a delivery team who were not in the sales process - so they sit in a band
   spanning the whole width underneath. That is what "overriding across the
   project" looks like drawn: in the row they would read as two more phases,
   which is the opposite of what he said.

   Same ink panel and connectors as ::diagnosis:: and ::compare::, real text
   rather than an image, for the reasons set out on .dx. */
.prose .drift{background:var(--band-bg);color:var(--band-ink);border-radius:3px;
  margin:22px 0 26px;max-width:none;overflow:hidden}
.prose .drift__pad{padding:clamp(26px,3.4vw,38px) clamp(18px,2.6vw,32px)
  clamp(22px,3vw,32px);text-align:center}
.prose .drift__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 22px}
.prose .drift__line{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:18px;text-align:left}
.prose .drift__line > li{margin:0;position:relative;padding-top:26px}
.prose .drift__line > li::before{content:"";position:absolute;left:0;top:6px;
  width:11px;height:11px;border-radius:50%;border:2px solid var(--accent);
  box-sizing:border-box}
.prose .drift__line > li::after{content:"";position:absolute;left:11px;right:-14px;
  top:11px;border-top:1px solid var(--band-line)}
.prose .drift__line > li:last-child::after{display:none}
@media(min-width:900px){
  .prose .drift__line{grid-template-columns:repeat(6,1fr);gap:0 14px}
}
@media(max-width:899px){
  /* No room for six columns, so the phases stack and the joining line goes -
     a vertical run of dots reads as a sequence on its own. */
  .prose .drift__line > li::after{display:none}
}
.prose .drift__ph{display:block;font:700 .64rem/1.3 var(--display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent);
  margin:0 0 6px}
.prose .drift__what{margin:0;font:400 .9rem/1.45 var(--prose);color:var(--band-ink)}
/* The band: a lighter wash of the accent so it reads as part of the panel
   rather than a second panel inside it, full width under every phase. */
.prose .drift__all{background:rgba(200,167,106,.10);
  border-top:1px solid rgba(200,167,106,.35);
  padding:16px clamp(18px,2.6vw,32px) 18px}
.prose .drift__all > p{font:700 .68rem/1.3 var(--display);letter-spacing:.15em;
  text-transform:uppercase;color:var(--accent);margin:0 0 10px;text-align:center}
.prose .drift__all ul{list-style:none;margin:0;padding:0;max-width:none;
  display:grid;gap:8px 30px}
@media(min-width:760px){.prose .drift__all ul{grid-template-columns:repeat(2,1fr)}}
.prose .drift__all li{margin:0;font:600 .95rem/1.4 var(--display);
  color:var(--band-ink);text-align:center}
.prose .drift__flow{display:block;position:relative;height:28px;margin:0 auto 14px;
  width:0;border-left:1.5px solid var(--accent)}
.prose .drift__flow::after{content:"";position:absolute;left:-5px;bottom:-1px;
  width:0;height:0;border-left:5px solid transparent;
  border-right:5px solid transparent;border-top:7px solid var(--accent)}
.prose .drift__end{margin:0;font:600 clamp(1.15rem,2.4vw,1.5rem)/1.28 var(--display);
  letter-spacing:-.018em;color:var(--band-ink);text-wrap:balance}

/* ::hats:: - the roles Advocate Advisory brings to a project (Andy, 17/09,
   study A with his three changes: no "days of", no "structured MoSCoW", and
   the wording centred in each box).

   Every role here rests on something already approved in section 2 of the
   brand file - requirements, fit-gap, design review, playback validation
   and UAT design are its platform-independent list; project management and
   delivery leadership come from "has run implementation teams" and
   "delivery leadership across EMEA"; train-the-trainer is the stated view
   of what a successful implementation needs. Adding a hat here is adding a
   capability claim, so check it against that section first. */
.prose .hats{background:var(--surface);border:1px solid var(--line);border-radius:3px;
  padding:clamp(24px,3.2vw,34px) clamp(18px,2.8vw,36px) clamp(22px,2.8vw,30px);
  margin:22px 0 26px;max-width:none}
.prose .hats__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent-ink);margin:0 0 18px;text-align:center}
.prose .hats__list--roles + .hats__eye{margin-top:4px}
.prose .hats__list{list-style:none;margin:0;padding:0;max-width:none;display:grid}
.prose .hats__list > li{margin:0;display:grid;grid-template-columns:24px minmax(0,1fr);gap:14px;align-items:start}
/* The three roles: tinted cards in a row, larger names. */
.prose .hats__list--roles{gap:16px;margin-bottom:22px}
@media(min-width:760px){.prose .hats__list--roles{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}}
.prose .hats__list--roles > li{background:var(--accent-wash);border:1px solid var(--line-soft);border-radius:3px;padding:17px 18px 15px}
.prose .hats__list--roles .hats__h{font-size:1.08rem}
/* The five parts: a hairline list, two columns on a desktop. */
.prose .hats__list--parts{gap:0 44px;border-top:1px solid var(--line-soft);padding-top:4px}
@media(min-width:760px){.prose .hats__list--parts{grid-template-columns:repeat(2,minmax(0,1fr))}}
.prose .hats__list--parts > li{padding:12px 0;border-bottom:1px solid var(--line-soft)}
.prose .hats__list--parts > li:last-child{border-bottom:0}
@media(min-width:760px){.prose .hats__list--parts > li:nth-last-child(-n+2){border-bottom:0}}
.prose .hats__eye + .hats__list--parts{border-top:0;padding-top:0}
/* The tick takes --accent-label, the same pairing as every solid button:
   white on deep gold in the light, ink on gold in dark mode - never white
   on gold (brand section 10). */
.prose .hats__tick{width:22px;height:22px;border-radius:50%;background:var(--accent);color:var(--accent-label);
  display:inline-flex;align-items:center;justify-content:center;margin-top:3px}
.prose .hats__tick svg{width:13px;height:13px}
.prose .hats__h{display:block;font:600 1rem/1.3 var(--display);color:var(--ink);margin:0 0 2px}
.prose .hats__w{margin:0;font:400 .9rem/1.5 var(--prose);color:var(--ink-2)}
.prose .hats__foot{margin:20px 0 0;text-align:center;font:400 .95rem/1.5 var(--prose);color:var(--ink-2)}

/* ::value:: - where the value of a platform actually lands (Andy, 17/09,
   study 2). Two curves from go-live: the platform keeps improving, most
   organisations stop, and the gap between the lines is what ongoing advice
   is for.

   IT CARRIES NO DATA, and that is deliberate rather than an omission. No
   y-axis scale, no gridlines, no percentages, and an "Illustrative" stamp -
   the same device the Health Check findings sample uses. Section 2 of the
   brand guidelines forbids invented outcomes, and a curve on an axis reads
   as evidence whether or not it prints numbers. If anyone ever adds a
   figure, a tick or a percentage to this drawing it stops being a diagram
   and becomes a claim nobody can substantiate. Don't. */
.prose .vcurve{background:var(--band-bg);color:var(--band-ink);border-radius:3px;
  padding:clamp(24px,3vw,32px) clamp(16px,2.4vw,28px) clamp(20px,2.6vw,26px);
  margin:22px 0 26px;max-width:none;position:relative}
.prose .vcurve__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.16em;
  text-transform:uppercase;color:var(--accent);margin:0 0 6px;text-align:center}
.prose .vcurve__stamp{position:absolute;top:16px;right:18px;
  font:700 .6rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;
  color:var(--band-ink-2);border:1px solid var(--band-line);border-radius:2px;
  padding:5px 8px}
@media(max-width:620px){
  /* Pinned to the corner it sat on top of the eyebrow on a phone. In flow
     under it instead, where it still reads as a caveat on the drawing. */
  .prose .vcurve__stamp{position:static;display:block;width:max-content;
    margin:0 auto 14px}
  .prose .vcurve__eye{margin-bottom:10px}
}
/* Below about 700px the labels inside the viewBox would scale to nothing, so
   the drawing keeps a readable minimum and the container scrolls instead. */
.prose .vcurve__plot{overflow-x:auto}
.prose .vcurve__plot svg{display:block;width:100%;height:auto;min-width:580px}
.prose .vcurve__cap{margin:14px 0 0;text-align:center;
  font:600 clamp(1rem,2vw,1.18rem)/1.35 var(--display);letter-spacing:-.012em;
  color:var(--band-ink)}
.prose .vcurve__cap small{display:block;margin-top:14px;
  font:400 .92rem/1.45 var(--prose);color:var(--band-ink-2)}

/* ::not-right:: - cards, one situation each (Andy chose study 1, 17/09).
   It was rows with the destination floated to the right edge, which left a
   wide empty middle and read as three disconnected lines rather than a set.
   A card holds the situation, the reason and the destination together,
   which is what the section is: a referral, not a list of caveats.

   The disclosure is gone with it. The reasons are the most distinctive
   writing on the site and nobody clicks to read a caveat.

   Cards stretch to the tallest, and the footer is pushed down by the card
   rather than sized, so the three destinations line up across the row
   however long the reasons run. */
.prose .declines{list-style:none;margin:8px 0 22px;padding:0;max-width:none;
  display:grid;gap:18px}
@media(min-width:760px){.prose .declines{grid-template-columns:repeat(3,1fr)}}
/* Last thing on the page. The 12px band padding here was set on 16/09,
   when this section was three hairline rows and its own trailing margin was
   what stood between it and the footer. Cards have no trailing margin and a
   visible bottom edge, so 12px put them flat against the ink (Andy, 17/09:
   "can you put a gap here"). The band's own rhythm is right for a row of
   cards, so there is no override any more - only the list's margin is
   dropped, because the band supplies the space. */
.prose .declines:last-child{margin-bottom:0}
.prose .declines > li{margin:0;background:var(--surface);
  border:1px solid var(--line-soft);border-radius:6px;
  padding:20px 20px 0;display:flex;flex-direction:column}
/* Centred (Andy, 17/09), which the footer already was - left-aligned text
   above a centred footer read as two halves of different cards. */
.prose .decline__sit{margin:0 0 8px;font:600 1.04rem/1.35 var(--display);
  letter-spacing:-.008em;color:var(--ink);text-align:center;text-wrap:balance}
.prose .decline__why{margin:0 0 18px;color:var(--muted);font-size:.92rem;
  line-height:1.55;text-align:center}
/* margin-top:auto, so the footer sits on the bottom edge of every card. */
.prose .decline__foot{margin-top:auto;border-top:1px solid var(--line-soft);
  padding:13px 0 14px;text-align:center}
.prose .decline__cue{display:block;font:700 .62rem/1.3 var(--display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);
  margin-bottom:6px}
.prose .decline__foot a{font:600 .92rem/1.3 var(--display);color:var(--accent);
  text-decoration:none;display:flex;flex-direction:column;align-items:center;gap:8px}
/* Only the NAME underlines on hover - an underline running under the icon
   as well would read as a rule, not a link. */
.prose .decline__foot a:hover{color:var(--accent-hi)}
.prose .decline__foot a:hover span{text-decoration:underline}
/* order:1, because .tile__mark carries order:-1 globally for the service
   tiles, where the mark sits above the name. Here it sits under it. */
.prose .decline__foot .tile__mark{width:24px;height:24px;margin:0;
  stroke-width:1.3;flex:none;order:1}
/* A refusal reads as a statement, not a disabled link: no gold, no arrow. */
.prose .decline__foot--none{font:600 .9rem/1.3 var(--display);color:var(--ink-2)}
/* A card with nowhere to send anyone gets no footer at all, so it needs its
   own bottom padding - the footer supplies it on the others. No invented
   line here on purpose (17/09): three of these exist on the service pages
   and the truthful thing is that the card ends after the reason. If a line
   is ever wanted there, it is a third field in the content file, not a
   default written in the build. */
.prose .declines > li:not(:has(.decline__foot)){padding-bottom:20px}

/* Study 2 of the box prototypes (Andy, 16/09): a shade rather than a
   border. It sits on --surface-2, one step up from the ivory ground, which
   groups the paragraph and its button without drawing another box on a page
   that already has the journey panel and the findings frame. On a
   .band--raised section the ground is white, so the tint reads the other
   way round - still a distinct block, which is what it is there to do. */
.prose .pricerow{display:flex;align-items:center;gap:32px;
  margin:4px 0 16px;background:var(--surface-2);border-radius:6px;
  padding:24px 26px;
  width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
/* No measure cap here (Andy, 16/09: "get the wording on two lines"). The
   paragraph is one short block beside a button rather than a column of body
   copy, so it takes the width the panel leaves it - about 80 characters -
   and lands on two lines instead of three. Anything longer than this goes
   back to a capped measure; 80ch is already past comfortable reading. */
.prose .pricerow > p,.prose .pricerow__say{flex:1 1 auto;margin:0;max-width:none}
.prose .pricerow__say p{margin:0 0 14px}
.prose .pricerow__say p:last-child{margin:0}
/* The text stops at its measure, so without this the button sits wherever
   the paragraph ends rather than on the panel's right edge (Andy, 16/09). */
.prose .pricerow .btn{flex:none;margin-left:auto}
@media(max-width:760px){
  .prose .pricerow{flex-direction:column;align-items:flex-start;gap:16px;
    padding:20px 20px 22px}
  /* Stacked, the button reads as the panel's own action rather than the
     end of the paragraph, so it sits on the centre line (Andy, 16/09).
     The text stays left - centred body copy is harder to read. */
  .prose .pricerow .btn{margin-left:0;align-self:center}
  .prose .pricerow > p,.prose .pricerow__say{max-width:none}
}
/* The lower half is the page's own ground, not a white card (Andy, 16/09):
   the panel is the ink strip plus the journey it heads, and a white body
   made it read as two different surfaces stacked. transparent rather than
   --paper so it still matches if the section ever moves to a raised band. */
/* Inside a step's detail the panel is a supporting exhibit, not a section
   of its own, so it sits tighter (16/09). */
/* 17/09: this lost to .prose .jpanel below, which has the same weight and
   comes later, so the panel kept a 44px bottom margin and left a band of
   empty panel under it inside the step detail. .prose on the front to win
   on weight rather than on order. */
.prose .howsteps__detail .jpanel{margin:14px 0 2px}
.prose .jpanel{margin:20px 0 44px;border:1px solid var(--line-soft);
  border-radius:6px;overflow:hidden;background:transparent}
.prose .jline{list-style:none;margin:0;display:grid;gap:16px;
  grid-template-columns:1fr;max-width:none;columns:auto;padding:18px 22px 20px}
.prose .jline li{margin:0;display:grid;gap:8px;min-width:0}
.jline__track{display:flex;align-items:center}
.jline__dot{flex:none;width:12px;height:12px;border-radius:50%;
  background:transparent;border:2px solid var(--accent);box-sizing:border-box}
/* A pulse travels the journey: each dot fills gold in turn, holds briefly and
   lets go, so the row reads as a sequence rather than eight separate marks.
   CSS only - one keyframe and a per-dot delay off --i, so nothing has to get
   past the script CSP. Still, still gold, and still legible with motion off. */
@media(prefers-reduced-motion:no-preference){
  .prose .jline li .jline__dot{animation:jdot 12s ease-in-out infinite;
    animation-delay:calc(var(--i,0) * .66s)}
}
@keyframes jdot{
  0%,100%{background:transparent;box-shadow:none}
  3%{background:var(--accent);box-shadow:0 0 0 4px rgba(126,100,44,.16)}
  12%{background:var(--accent);box-shadow:0 0 0 4px rgba(126,100,44,.16)}
  20%{background:transparent;box-shadow:none}
}
.jline__bar{flex:1;height:1px;background:var(--line-soft)}
.prose .jline li:last-child .jline__bar{background:transparent}
.jline__l{font:600 .95rem/1.35 var(--display);color:var(--ink)}
/* Eight stages, seven gaps (17/09; it was seven and six). Eight equal
   columns space the dots evenly but leave a whole empty column past
   Offboarding; pinning that last stage to the right edge instead makes its
   gap the odd one out. So: n-1 equal columns and a last one sized to the
   final label. The gaps and the run into Offboarding all come to the same
   width, and the last label finishes on the right edge with nothing after
   it (Andy, 16/09). Change AREA_STAGES and this repeat() moves with it. */
@media(min-width:760px){
  .prose .jline{grid-template-columns:repeat(7,1fr) max-content;gap:0 14px}
  .prose .jline li:last-child .jline__l{white-space:nowrap}}
@media(max-width:759px){.prose .jline li:last-child .jline__bar{display:none}}
.prose .across{margin:0;background:var(--band-bg);padding:16px 22px 18px}
.prose .across__eye{font:700 .72rem/1.3 var(--display);letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent);margin:0 0 18px;text-align:center}
/* Four even columns, so the strip sits under the journey as a row of its own
   rather than a sentence that happens to wrap (Andy, 16/09). */
.prose .across__list{list-style:none;margin:0;padding:0;display:grid;gap:6px 18px;
  grid-template-columns:1fr;max-width:none}
@media(min-width:560px){.prose .across__list{grid-template-columns:repeat(2,1fr)}}
/* Four even columns left the last label short of the right edge, with dead
   strip beside it (Andy, 16/09). Spread instead: first flush left, last
   flush right, the two in the middle spaced between them. */
@media(min-width:860px){.prose .across__list{display:flex;justify-content:space-between;
  gap:18px;flex-wrap:nowrap}}
.prose .across__list li{margin:0;font:600 .95rem/1.4 var(--display);color:var(--band-ink);min-width:0}

/* "How it works" as a numbered sequence (Andy, 06/09). The card came off,
   and two problems went with it: four identical bordered boxes read as a SET
   rather than an ORDER, and the step sentences are uneven -- 21, 13, 15 and
   18 words on Supplier Selection -- so equal-height cards left visible dead
   space under the short ones. What is left is a deep-gold rule capping each
   column and the number as a small label beside the step name. Lighter than
   what surrounds it on purpose: the page ends with pricing and a booking
   call, and those should win the eye, not this.

   Named howsteps because the questionnaire's base CSS already owns .steps --
   the collision painted the grid gaps brown on the first build. */
/* A paragraph straight after the steps (Implementation Support's UAT
   line, 21/09) gets the same breathing room the steps have above them. */
.prose .howsteps + p{margin-top:26px}
.prose .howsteps{list-style:none;padding:0;margin:20px 0 0;display:block;
              max-width:none;columns:auto}
/* The rail: a ring on each step, a hairline joining one to the next. The line
   stops at the last step, so it reads as a run that ends rather than one that
   trails off. */
.prose .howsteps > li{margin:0;padding:0 0 22px 34px;position:relative;
                 display:flex;flex-direction:column;gap:5px}
.prose .howsteps > li:last-child{padding-bottom:0}
.prose .howsteps > li::before{content:"";position:absolute;left:0;top:2px;
  width:13px;height:13px;border-radius:50%;
  background:var(--paper);border:2px solid var(--accent);box-sizing:border-box}
.prose .howsteps > li::after{content:"";position:absolute;left:6px;top:17px;bottom:0;
  width:1px;background:var(--line-soft)}
.prose .howsteps > li:last-child::after{display:none}
.howsteps__h{display:flex;align-items:baseline;gap:9px}
.howsteps__n{font:700 .76rem/1 var(--display);letter-spacing:.1em;color:var(--accent)}
.howsteps__label{font:600 1.04rem/1.3 var(--display);color:var(--ink);letter-spacing:-.01em}
.howsteps__text{font:400 .92rem/1.55 var(--prose);color:var(--ink-2);max-width:72ch}

/* Andy, 17/09: "you need to use the space better, showed gaps that you
   should be using" - two empty rectangles, one to the right of a step's
   summary line and one to the right of its detail paragraphs. The steps run
   the width of the shell while their text held a 62ch measure, so more than
   half of every row was blank.

   The fix is structural rather than stretching the measure, which would put
   the line length past the 62-72 characters the brand file sets. On a wide
   screen the step's number and name move into a column of their own on the
   left and the description takes the rest of the row, with the cue pinned to
   the right edge - so the width is spent on layout instead of on line
   length. Below 860px it collapses back to the stacked version, where there
   is no spare width to spend. */
@media(min-width:860px){
  .prose .howsteps .howsteps__d > summary,
  .prose .howsteps > li:not(.howsteps--has){
    display:grid;grid-template-columns:minmax(150px,190px) minmax(0,1fr) auto;
    align-items:baseline;gap:4px 26px}
  .prose .howsteps > li:not(.howsteps--has){padding-left:34px}
  /* The description column reads centred (Andy, 17/09: "i think the
     highlighted would look better centralised across the board"). Only in
     the three-column layout: stacked on a phone the description is the
     paragraph under a heading, and centring body copy there would be
     harder to read, not easier. The detail panels stay left - those run to
     several lines and bullets, which centring would wreck. */
  /* Every description starts at the same x and, where it fits, runs on one
     line (Andy, 17/09: "should be inline with the rest... would ideally
     like it all on one line too"). width:max-content is what does both -
     the box hugs its own sentence and sits at the start of the column, so
     four different lengths still share a left edge, and nothing wraps until
     the sentence is genuinely wider than the room. max-width keeps it
     inside the column when that happens. The label column gave up 25px and
     the gap 4px to buy the workshop line the width it needed to stay on one.
     The runover is left-aligned (Andy, 21/09): on Supplier Selection two of
     six descriptions wrap, and a centred second line under a left-starting
     first line read as two different alignments in one column. */
  .prose .howsteps .howsteps__text{text-align:left;
    width:max-content;max-width:100%}
}

/* An expandable step. <details> carries the state, so the only job here is to
   make the header look clickable and turn the chevron over when it opens. */
.prose .howsteps .howsteps__d{display:flex;flex-direction:column;gap:5px}
.prose .howsteps summary{list-style:none;cursor:pointer;display:flex;
  flex-direction:column;gap:5px;border-radius:3px}
.prose .howsteps summary::-webkit-details-marker{display:none}
.prose .howsteps summary:focus-visible{outline:3px solid var(--accent);outline-offset:4px}
.howsteps__cue{margin-left:auto;flex:none;display:inline-flex;align-items:center;gap:7px;
  font:600 .78rem/1 var(--display);color:var(--accent);white-space:nowrap}
.howsteps__chev{flex:none;width:7px;height:7px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:translateY(-2px) rotate(45deg)}
.howsteps__d[open] .howsteps__chev{transform:translateY(1px) rotate(-135deg)}
@media(prefers-reduced-motion:no-preference){.howsteps__chev{transition:transform .18s}}
.howsteps__cue-b{display:none}
.howsteps__d[open] .howsteps__cue-a{display:none}
.howsteps__d[open] .howsteps__cue-b{display:inline}
.prose .howsteps summary:hover .howsteps__label,
.prose .howsteps summary:hover .howsteps__cue{color:var(--accent-ink)}
/* Open reads as open: the step name takes the accent and the panel carries a
   gold edge back to the rail. */
.prose .howsteps .howsteps__d[open] .howsteps__label{color:var(--accent-ink)}
.howsteps__detail{margin:10px 0 0;padding:14px 16px;border-radius:6px;
  background:var(--accent-wash);border:1px solid var(--line-soft);
  border-left:3px solid var(--accent)}
.prose .howsteps .howsteps__detail > p{font:400 .92rem/1.6 var(--prose);color:var(--ink-2);
  margin:0;max-width:72ch}
.prose .howsteps .howsteps__detail > p + p{margin-top:9px}
/* A detail that has more than one paragraph sets them side by side rather
   than stacking them down the left (Andy, 17/09). :has(), so a detail with a
   single paragraph is left alone - two columns would only move the empty
   half rather than fill it. Anything that is not a paragraph, which today
   means the journey panel, spans the full width underneath. */
/* Bullets inside a step detail. Tried across the row on a wide screen, to
   spend the width the way everything else here does, and Andy called it
   17/09: "the eyes doesn't read these bullet points well horizonal... please
   use tradition vertical bullet points". He is right - a list read left to
   right stops being a list, and the reader has to work out the order. One
   column, always. This is the one place on the page where filling the width
   loses to reading it, and that is a deliberate trade, not an oversight. */
.prose .howsteps .howsteps__ul{list-style:none;margin:0;padding:0;
  max-width:72ch;display:grid;gap:9px}
.prose .howsteps .howsteps__ul li{margin:0;position:relative;padding-left:18px;
  font:400 .92rem/1.6 var(--prose);color:var(--ink-2)}
.prose .howsteps .howsteps__ul li::before{content:"";position:absolute;left:0;
  top:.62em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
/* Study 1 (Andy, 17/09): the lead verb becomes a gold label column and the
   keyword inside the sentence takes weight and full ink. One accent doing
   one job - gold is the structure, weight is the emphasis - so the eye
   reads the verbs down the left first and the keywords second. The label
   replaces the bullet dot rather than sitting beside it; two marks for one
   list item is one too many. */
/* The gold dot stays (Andy, 17/09: "gold bullet points and you are done").
   It was dropped on the reasoning that the label already marks the item;
   with both, the list still reads as a list at a glance and the label reads
   as the first thing IN it rather than as a heading above it. The dot sits
   outside the label column, so the two columns still line up. */
/* The label column is sized ONCE, on the list, and each item borrows it
   with subgrid (Andy, 17/09: "can you put the first word of each line in
   line with what's").

   Each <li> used to be its own grid, and a grid only aligns within one
   container - so every bullet sized its own column to its own label and the
   sentences started at three different places. The track now lives on the
   <ul>, where auto measures the longest label in THAT list, and every
   sentence in the list begins at the same x. Per list, so a list labelled
   IMPLEMENTATION is not sized by another list's longest word. */
.prose .howsteps .howsteps__ul--v{grid-template-columns:auto minmax(0,1fr);
  gap:9px 18px}
.prose .howsteps .howsteps__ul--v li{padding-left:18px;display:grid;
  grid-template-columns:subgrid;grid-column:1 / -1;gap:2px 18px;
  align-items:baseline}
.prose .howsteps .howsteps__v{font:700 .72rem/1.6 var(--display);
  letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
/* Weight and full ink on a keyword anywhere in a detail, not only inside a
   bulleted one - the Recommendations step marks a phrase in its closing
   sentence too (17/09). */
.prose .howsteps .howsteps__detail strong{font-weight:650;color:var(--ink)}
/* ::rule:: inside a step detail (Andy, 17/09): the site's gold mark, used
   to part the bullets from the journey panel under them. The page-level
   margins are far too much inside a panel, so they are cut here. */
.prose .howsteps .howsteps__detail > .pagerule{margin:16px auto 4px}
/* A sentence after a list needs the same air as one after a paragraph. */
.prose .howsteps .howsteps__detail > .howsteps__ul + p{margin-top:11px}
/* ::stages:: inside a step detail - the eight areas the questions are
   grouped by (Andy, 17/09). Set as a list rather than a sentence because
   that is how he wrote them, and two columns above 620px so eight short
   names do not run down the page; they are names, not clauses, so the
   left-to-right objection to the workshop bullets does not apply here. */
.prose .howsteps .arealist{list-style:none;margin:10px 0 12px;padding:0;
  max-width:52ch;display:grid;gap:7px 28px}
.prose .howsteps .arealist li{margin:0;position:relative;padding-left:18px;
  font:600 .92rem/1.5 var(--display);color:var(--ink)}
.prose .howsteps .arealist li::before{content:"";position:absolute;left:0;
  top:.55em;width:6px;height:6px;border-radius:50%;background:var(--accent)}
@media(min-width:620px){
  .prose .howsteps .arealist{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:559px){
  /* No room for a column beside the text on a small phone, so the label
     stacks above its line and keeps its own row. Set on the list, because
     that is where the track is defined now. */
  .prose .howsteps .howsteps__ul--v{grid-template-columns:1fr}
}
@media(min-width:900px){
  .prose .howsteps .howsteps__detail:has(> p + p){display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));gap:0 30px;
    /* align-content too, or the rows stretch and the journey panel ends up
       with a band of empty panel under it (17/09). */
    align-items:start;align-content:start}
  .prose .howsteps .howsteps__detail:has(> p + p) > p{max-width:none}
  .prose .howsteps .howsteps__detail:has(> p + p) > p + p{margin-top:0}
  .prose .howsteps .howsteps__detail:has(> p + p) > :not(p){grid-column:1 / -1}
}
/* The step markers are drawn on the list's OWN items only. A panel nested
   in a detail has <li>s of its own, and without the child combinators they
   inherited a dot and a timeline stub each (16/09). */

/* The Health Check reverses the same component onto ink, and is the ONLY
   page that does (Andy, 06/09). It is the offer the site is built to land
   on, and one band partway down gives that page a shape none of the other
   services have; a second band anywhere else turns it back into a template.
   .howband paints a dark ground itself, so it is listed with the dark-ground
   selectors near the top of this stylesheet -- that is what hands the number
   the gold half of the accent pair (5.09:1 on ink) instead of deep gold. */
.prose .howband{margin:20px 0 0;background:var(--band-bg);border-radius:3px;
             padding:26px 22px 28px}
.prose .howband .howsteps{margin:0}
.prose .howband .howsteps > li::before{background:var(--band-bg);border-color:var(--accent)}
.prose .howband .howsteps > li::after{background:var(--band-line)}
.prose .howband .howsteps__label{color:var(--band-ink)}
.prose .howband .howsteps__text{color:var(--band-ink-2)}
.prose .howband .howsteps summary:hover .howsteps__label,
.prose .howband .howsteps summary:hover .howsteps__cue,
.prose .howband .howsteps .howsteps__d[open] .howsteps__label{color:var(--accent)}
.prose .howband .howsteps__detail{background:rgba(200,167,106,.16);
  border-color:rgba(200,167,106,.34);border-left-color:var(--accent)}
.prose .howband .howsteps .howsteps__detail p{color:var(--band-ink)}
/* The dot follows each item except the last, so a wrapped line can only ever
   END with one -- never begin with one. */
.proofline span:not(:last-child)::after{content:"·";margin:0 .8em;color:var(--accent);font-weight:700}
/* On a phone each credential takes its own line, and a dot at the end of
   every line separates nothing. */
@media(max-width:620px){.proofline{gap:6px 0;padding:14px 0}.proofline span{flex-basis:100%}.proofline span::after{display:none}}
/* The ticker (12/09). One line, small, gliding left; the two copies of the
   list make the loop seamless (the track moves exactly one set width). It
   pauses under the pointer so a reader can hold a line still. */
.proofline--ticker{display:block;overflow:hidden;padding:10px 0;margin:0;gap:0;
  font-size:.86rem;letter-spacing:.06em;text-transform:uppercase;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 8%,#000 92%,transparent)}
.proofline__track{display:flex;width:max-content;margin:0;animation:proofline-glide var(--proofline-dur,28s) linear infinite}
.proofline--ticker:hover .proofline__track{animation-play-state:paused}
.proofline__set{display:flex;flex:none}
.proofline--ticker span span{white-space:nowrap}
.proofline--ticker .proofline__set:not(:last-child)::after{content:none}
.proofline--ticker span span::after{content:"·";margin:0 1.4em;color:var(--accent);font-weight:700}
@keyframes proofline-glide{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){
  .proofline__track{animation:none;width:auto;flex-wrap:wrap;justify-content:center}
  .proofline__set{flex-wrap:wrap;justify-content:center}
  .proofline__set[aria-hidden]{display:none}
  .proofline--ticker{mask-image:none;-webkit-mask-image:none}
  .proofline--ticker span span:last-child::after{display:none}
}
.prose h2:first-child{margin-top:0}
.prose h3{font:600 1.08rem/1.35 var(--display);color:var(--ink);margin:26px 0 6px}
.prose p,.prose li{font:400 1rem/1.7 var(--prose);color:var(--ink-2)}
.prose p{margin:0 0 16px}
.prose strong{color:var(--ink);font-weight:600}
.prose a{color:var(--accent-ink);text-underline-offset:2px}
.prose ul{padding-left:1.15em;margin:12px 0}
.prose li{margin:6px 0}
.prose blockquote{margin:20px 0;padding-left:18px;border-left:3px solid var(--accent-ink)}
/* A blockquote in prose is a pull-line -- the one sentence a section rests on,
   set in the display face and a size up (Andy, 01/09, "Why independence
   matters"). */
.prose blockquote p{font:600 1.25rem/1.4 var(--display);color:var(--ink);margin:0}
.prose hr{border:0;border-top:1px solid var(--line-soft);margin:34px 0}

.prose-page{max-width:72ch;color:var(--ink)}
.prose-page h1{font:700 2rem/1.2 var(--display);margin:0 0 8px}
.prose-page h2{font:600 1.15rem/1.3 var(--display);margin:32px 0 8px}
.prose-page p,.prose-page li{font:400 1rem/1.65 var(--prose);color:var(--ink-2)}
.prose-page p{margin:0 0 14px}
.prose-page .lead{font-size:1.05rem;color:var(--ink)}
.prose-page a{color:var(--accent-ink)}
.prose-page ul{padding-left:1.2em}
.prose-page li{margin:4px 0}

/* ---- symptom cards ---------------------------------------------------- */
.sym-grid{display:grid;gap:14px;grid-template-columns:1fr;margin:22px 0 8px}
@media(min-width:720px){.sym-grid{grid-template-columns:1fr 1fr}}
.sym{background:var(--surface);border:1px solid var(--line-soft);border-left:3px solid var(--accent-ink);
     border-radius:3px;padding:16px 18px;font:400 .98rem/1.55 var(--prose);color:var(--ink)}

/* ---- target size on a phone -------------------------------------------
   WCAG 2.5.8 asks for 24x24 CSS pixels; a thumb is happier with more. The
   footer nav was six links at 17px tall stacked one under another, which is a
   column of near-misses, and the wordmark was 23px.

   The links inside running text get vertical padding without inline-block:
   an inline box's vertical padding does not change the line box, so the hit
   area grows and the layout does not move at all. */
@media(max-width:620px){
  :root:root .wordmark{font-size:.92rem;letter-spacing:.1em}
  /* Below ~400px the wordmark and the Book Call control still could not
     share a row, so the button dropped to its own line and the masthead
     grew to 198px. One more step down keeps them together. */
  @media(max-width:400px){
    :root:root .wordmark{font-size:.78rem;letter-spacing:.07em}
  }
  /* 320px (old SE-class phones) is tighter still. */
  @media(max-width:340px){
    :root:root .wordmark{font-size:.7rem;letter-spacing:.05em}
    .shell{padding-inline:14px}
  }
  .sfoot nav a{display:inline-block;padding:7px 0}
  .sfoot__grid p a{display:inline-block;padding:6px 0}
  .wordmark{padding-block:5px}
  .endcta a,.prose a{padding-block:8px}
}

/* ---- service tiles ----------------------------------------------------
   Five squares, no descriptive copy. The detail lives on each service page,
   which is what selecting a square is for. */
/* The tiles sit inside the 68ch prose column but should not be constrained by
   it - three cards in a 620px measure are unreadably narrow. Break out to the
   shell width, centred, without leaving the container. */
/* The tiles sit inside the 72ch prose column but fill the container. Because
   the prose is left-aligned to the shell rather than centred in it, a child of
   exactly the shell's content width overflows to the RIGHT only - so the cards
   and the text keep the same left edge, which is the thing that reads as
   deliberate. */
.tiles{display:grid;gap:14px;grid-template-columns:1fr;margin:13px 0;
       width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
@media(min-width:620px){.tiles{grid-template-columns:1fr 1fr}}
@media(min-width:980px){.tiles{grid-template-columns:repeat(3,1fr)}}
/* Five tiles in a three-column grid left a hole bottom-right, and in a two
   column grid left one on the last row. The first tile spans two tracks
   instead: at three columns that is [Health Check | Health Check | Supplier]
   then a full row of three; at two columns the Health Check takes a row of its
   own and the remaining four pair up. Either way the rag is gone and the lead
   offer is visibly the lead offer.

   Scoped by :nth-last-child(5) so it fires only on a grid of exactly five -
   the vendor grid has three and would gain a hole from the same rule, and at
   six (UAT Support, 03/09) a spanning lead reopens the hole it was built to
   close: 2+1 / 3 / 1. Six packs cleanly as two rows of three, first among
   equals. If the count returns to five the featured lead comes back by
   itself. */
@media(min-width:620px){.tiles:not(.tiles--mini) .tile:first-child:nth-last-child(5){grid-column:span 2}}

/* ---- service kicker ---------------------------------------------------
   Which service is this page? The hero headline is a hook, not a name, so
   the name sits above it: the service's own mark plus small gold caps. */
/* Nudged up a step 03/09 (Andy: "a tiny bit small and could move up
   slightly") - the light-body variant on /contact stays as it was. */
.phero__kick{display:flex;align-items:center;justify-content:center;gap:10px;
  margin:0 0 20px;font:600 .92rem/1 var(--display);color:var(--accent-hi);
  letter-spacing:.14em;text-transform:uppercase}
.phero__kick .tile__mark{width:24px;height:24px;margin:0;order:0;color:var(--accent-hi)}
.phero__kick .tile__mark .m-a{color:var(--accent-hi);stroke:var(--accent-hi)}
.phero--left .phero__kick{justify-content:flex-start}
/* The same label on a light page body (contact has no hero band). */
/* .prose h1 outranks a bare class, so the label names both. */
.pagekick,.prose h1.pagekick{font:600 .82rem/1 var(--display);color:var(--accent-ink);
  letter-spacing:.14em;text-transform:uppercase;margin:0 0 10px;
  display:inline-flex;align-items:center;gap:9px}
.pagekick .tile__mark{width:20px;height:20px;margin:0;order:0;color:var(--accent-ink)}
.pagekick .tile__mark .m-a{color:var(--accent);stroke:var(--accent)}

/* ---- other-services mini strip (Andy, 03/09) --------------------------
   The services grid, shrunk: icon, name, Find-out-more -- no summary. On
   every service page, minus the page itself, so five minis per page. */
.minihead{font:600 1.3rem/1.3 var(--display);color:var(--ink);margin:0 0 4px}
.tiles--mini{margin-top:10px}
.tiles--mini .tile{padding:18px 14px;gap:8px}
.tiles--mini .tile__mark{width:26px;height:26px;margin-top:2px}
.tiles--mini h3{font-size:.95rem}
.tiles--mini .tile__go{font-size:.82rem;padding-top:2px}
/* auto-fit, not a fixed five: contact and about list all SIX services
   (no exclusion), and a fixed five-track grid would orphan the sixth. */
@media(min-width:980px){.tiles--mini{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}}


.tiles--wide{grid-template-columns:1fr}
@media(min-width:760px){.tiles--wide{grid-template-columns:repeat(3,1fr)}}
/* Obviously clickable (Andy, 01/09): the resting border is the full-strength
   line rather than the soft one, the cursor is a pointer, and every card ends
   with an underlined "Find out more" in the link colour. Hover deepens all
   three. Nothing here is an arrow or a button. */
.tile{padding:22px 22px 20px;position:relative;display:flex;flex-direction:column;justify-content:flex-start;
      gap:12px;align-items:center;text-align:center;cursor:pointer;
      background:var(--surface);border:1px solid var(--line);border-radius:3px;
      text-decoration:none;box-shadow:0 1px 2px rgba(46,58,69,.06);
      transition:border-color .16s,background .16s,transform .16s,box-shadow .16s}
.tile:hover{border-color:var(--accent-ink);background:var(--surface-2);transform:translateY(-2px);
            box-shadow:0 6px 18px rgba(46,58,69,.10)}
.tile__go{margin-top:auto;padding-top:6px;font:600 .9rem/1.3 var(--display);color:var(--accent-ink);
          text-decoration:underline;text-decoration-color:var(--accent);text-underline-offset:4px;
          text-decoration-thickness:1.5px}
.tile:hover .tile__go{color:var(--ink);text-decoration-color:var(--ink)}
/* +10px under the title takes the gap to roughly one line of the summary's
   own leading. Alignment is inherited from .tile - the whole card centres
   (Andy, 01/09), so no per-child override is needed. */
.tile h3{font:600 1.08rem/1.3 var(--display);color:var(--ink);margin:0 0 10px}
.tile p{font:400 .93rem/1.55 var(--prose);color:var(--ink-2);margin:0}
.tile__mark{margin-top:14px;order:-1}
.tile__mark{width:38px;height:38px;color:var(--ink-2);flex:none;transition:color .16s}
.tile__mark .m-a{color:var(--accent-ink);stroke:var(--accent-ink)}
.tile:hover .tile__mark{color:var(--ink)}
.tile:hover h3{color:var(--accent-ink)}


/* ---- independence ----------------------------------------------------- */
.indep{background:var(--accent-wash);border:1px solid var(--line-soft);border-radius:3px;
       padding:22px 24px;margin:22px 0}
.indep ul{padding:0;margin:0}
.indep li{font:500 1rem/1.6 var(--prose);color:var(--ink);margin:9px 0;list-style:none}

/* ---- statement list --------------------------------------------------- */
.stmt{list-style:none;padding:0;margin:18px 0}
.stmt li{font:400 1rem/1.6 var(--prose);color:var(--ink-2);padding:10px 0;
         border-top:1px solid var(--line-soft)}
.stmt li:first-child{border-top:0}

/* ---- closing ---------------------------------------------------------- */
.endcta{border-top:1px solid var(--line);padding-block:clamp(36px,4.5vw,64px);
        background:var(--surface-2)}
.endcta h2{font:600 1.4rem/1.3 var(--display);color:var(--ink);margin:0 0 8px}
.endcta p{font:400 1rem/1.65 var(--prose);color:var(--ink-2);margin:0 0 16px}
/* 2. The closing block: what to say on the left, the action on the right.
      It is the last thing on every page and it was one narrow column, so it
      was also the largest single piece of empty screen on the site. */
.endcta__grid{display:grid;gap:clamp(20px,3vw,56px);grid-template-columns:1fr;align-items:start}
@media(min-width:900px){
  .endcta__grid{grid-template-columns:minmax(0,1fr) 390px}
}
.endcta__say p:last-child{margin-bottom:0}
.endcta__act{text-align:center}
.endcta__act p{margin:0}
.endcta__act .bookingnote{margin-top:14px}
.endcta__or{font:400 .95rem/1.6 var(--prose);color:var(--ink-2);margin-top:10px !important}

/* ---- insights --------------------------------------------------------- */
.artlist{list-style:none;padding:0;margin:24px 0}
.artlist li{border-top:1px solid var(--line-soft);padding:20px 0}
.artlist li:first-child{border-top:0;padding-top:0}
.artlist h2{font:600 1.15rem/1.3 var(--display);margin:0 0 4px}
.artlist h2 a{color:var(--ink);text-decoration:none}
.artlist h2 a:hover{color:var(--accent-ink)}
.artlist .artlist__soon h2{color:var(--ink-2)}
.artlist .artlist__soon .artdate{color:var(--accent-ink);font-weight:600}
.artdate{font-size:.85rem;color:var(--muted);font-variant-numeric:tabular-nums}
.artlist p{font:400 .96rem/1.6 var(--prose);color:var(--ink-2);margin:6px 0 0}
.article__meta{font-size:.88rem;color:var(--muted);margin:0 0 24px}
.article__title{text-align:center;text-wrap:balance;margin-bottom:28px}
.article__title~.split{margin-top:38px;margin-bottom:0}
/* The heading after a picture sits close under it (Andy, 23/09): the
   picture already separates the sections. */
.article__title~.split+h2{margin-top:16px}
/* ...but only when the picture is the taller side. Where the text runs
   longer, this padding keeps the usual gap under the text. */
@media(min-width:900px){.article__title~.split .split__text{padding-bottom:22px}}
/* Justified body text on articles (Andy, 23/09), from 700px up: on a phone
   the column is too narrow and justified lines open up gaps between words. */
@media(min-width:700px){
  .article__title~p:not(.article__byline),.article__title~ul li,
  .article__title~.split .split__text p,.article__title~.split li{text-align:justify;hyphens:auto}
}
.article__byline{margin:36px 0 0;padding-top:18px;border-top:1px solid var(--line-soft);
                 font-size:.9rem;color:var(--muted)}
.article__author{color:var(--ink);font-weight:600}
.prose a.article__author{color:var(--ink);text-decoration-color:var(--line)}
.prose a.article__author:hover{color:var(--accent-ink);text-decoration-color:currentColor}
.empty{background:var(--surface-2);border:1px dashed var(--line);border-radius:3px;
       padding:22px;color:var(--ink-2);font:400 1rem/1.65 var(--prose)}

.bookingnote{font:400 .87rem/1.6 var(--prose);color:var(--muted);margin-top:18px}

/* ---- contact enquiry form ---------------------------------------------
   Two fields side by side on desktop, stacked on a phone. The form breaks out
   of the 72ch prose measure for the same reason the tiles do: a text input at
   620px is fine, but two of them are not. */
/* Contact: the form on the left, the email route beside it (Andy, 16/09).
   One column below 980px, where the aside goes back under the form. */
.prose .enqwrap{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr;
  align-items:start;margin:22px 0 0;
  width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
@media(min-width:980px){
  .prose .enqwrap{grid-template-columns:minmax(0,720px) minmax(230px,1fr)}
}
.prose .enqwrap .enq{margin:0;max-width:none;width:auto}
.prose .enqside{border-left:2px solid var(--accent);padding-left:22px}
.prose .enqside h2{margin:0 0 10px;font-size:1.25rem}
.prose .enqside p{margin:0 0 12px}
.prose .enqside p:last-child{margin:0}
@media(max-width:979px){.prose .enqside{border-left:0;padding-left:0}}

.enq{margin:22px 0 0;display:grid;gap:16px;
     width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)));
     max-width:720px}
.enq__row{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.enq__row{grid-template-columns:1fr 1fr}}
.enq__note{font:400 .87rem/1.5 var(--prose);color:var(--muted);margin:0 0 4px}
.enq__f{display:grid;gap:7px}
.enq__f > span{font:500 .92rem/1.4 var(--display);color:var(--ink)}
.enq__f > span i{font-style:normal;font-weight:400;color:var(--muted)}
/* surface-2, not surface (03/09, Andy: the white boxes jarred on the
   parchment page). The select was never in these selectors at all and fell
   back to browser default styling - the one gold-bordered odd one out. */
.enq input,.enq textarea,.enq select{
  font:400 1rem/1.55 var(--prose);color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:3px;
  padding:11px 13px;width:100%;
  transition:border-color .14s,box-shadow .14s}
.enq textarea{resize:vertical;min-height:120px}
.enq select{appearance:auto;cursor:pointer}
.enq input:hover,.enq textarea:hover,.enq select:hover{border-color:var(--ink-2)}
.enq input:focus,.enq textarea:focus,.enq select:focus{
  outline:none;border-color:var(--accent-ink);
  box-shadow:0 0 0 3px var(--accent-wash)}
.enq input:focus-visible,.enq textarea:focus-visible,.enq select:focus-visible{
  outline:2px solid var(--focus);outline-offset:1px}
.enq__go{margin:4px 0 0}
.enq .bookingnote{margin-top:0}
/* The honeypot. Off-screen rather than display:none - a bot that skips hidden
   fields still fills this one, and a screen reader is told to ignore it by the
   aria-hidden on the wrapper. */
.enq__hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---- package comparison ----------------------------------------------- */
.pkgs{display:grid;gap:16px;grid-template-columns:1fr;margin:24px 0;
      width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
@media(min-width:820px){.pkgs{grid-template-columns:1fr 1fr}}
.pk{background:var(--surface);border:1px solid var(--line-soft);border-radius:3px;padding:22px}
.pk__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
          padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.pk__head h3{font:600 1.02rem/1.3 var(--display);color:var(--ink);margin:0}
.pk__price{font:600 1.4rem/1 var(--display);color:var(--accent-ink);
           font-variant-numeric:tabular-nums}
.pk__line{font:400 .97rem/1.6 var(--prose);color:var(--ink-2);margin:14px 0 12px}
.pk ul{list-style:none;padding:0;margin:0 0 20px}
.pk li{font:400 .95rem/1.55 var(--prose);color:var(--ink-2);padding:7px 0;
       border-top:1px solid var(--line-soft)}
.pk li:first-child{border-top:0}

/* ---- the price ---------------------------------------------------------
   Above the fold, in figures, as a stated element of the template (pricing
   strategy, 28/08). It was a small run-in line when there were two packages to
   compare; with one price there is nothing to compare and the number should
   simply be readable from across the room. */
.pricelead{margin:22px 0 0;padding-top:16px;border-top:1px solid var(--band-line);
           display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.pricelead b{font:700 clamp(1.6rem,2.6vw,2.1rem)/1 var(--display);color:var(--band-ink);
             letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.pricelead span{font:400 .93rem/1.5 var(--prose);color:var(--band-ink-2)}
/* In the hero's action column (under the button, Andy 03/09) the rule line
   goes - that line spanning the headline column was the thing that looked
   off - and the pair centres under the button like the note does. */
.phero__act .pricelead{border-top:none;padding-top:0;margin:18px 0 0;
                       justify-content:center;gap:10px}
.phero__act .pricelead b{font-size:clamp(1.25rem,1.8vw,1.5rem)}
.phero__act .pricelead~.phero__note{margin-top:6px}
/* 04/09 (D2): no published figure - "Get a price" is a link to the contact
   form, styled to sit where the number used to. */
.pricelead--ask b{font-variant-numeric:normal}
.pricelead--ask b a{color:var(--band-ink);text-decoration:underline;
                    text-decoration-thickness:2px;text-underline-offset:5px;
                    text-decoration-color:var(--accent)}
.pricelead--ask b a:hover,.pricelead--ask b a:focus-visible{color:var(--accent-hi)}

/* ---- what the price buys ----------------------------------------------
   Four blocks, two-up on desktop. The pricing document is explicit that the
   page answered none of these clearly and that the last of them IS the
   product: if the findings read as generated, the price is not credible. */
.hcfacts{display:grid;gap:1px;background:var(--line-soft);margin:26px 0;
         border:1px solid var(--line-soft);border-radius:3px;
         grid-template-columns:1fr;
         width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
@media(min-width:820px){.hcfacts{grid-template-columns:1fr 1fr}}
.hcf{background:var(--surface);padding:22px 24px}
.hcf h3{font:600 1rem/1.3 var(--display);color:var(--ink);margin:0 0 8px}
.hcf p{font:400 .95rem/1.6 var(--prose);color:var(--ink-2);margin:0}

/* ---- the findings sample ----------------------------------------------
   The one thing on the site that shows the work rather than describing it, and
   the only substitute for a case study available while named clients,
   testimonials and logos are all barred. Styled as a document, not a marketing
   card, because that is what it is a sample of. */
.fsample{border:1px solid var(--line);border-radius:3px;background:var(--surface);
         margin:24px 0;overflow:hidden;
         width:min(calc(var(--maxw) - 2 * var(--gutter)), calc(100vw - 2 * var(--gutter)))}
.fsample__top{display:flex;align-items:center;justify-content:space-between;gap:12px;
              padding:14px 22px;border-bottom:1px solid var(--line-soft);
              background:var(--surface-2)}
.fsample__label{font:600 .82rem/1 var(--display);letter-spacing:.08em;
                text-transform:uppercase;color:var(--muted)}
/* The label is a 1em uppercase line next to a bordered pill, so centring by
   box leaves it sitting high against the stamp. 2px down (Andy, 16/09). */
.fig--framed .fsample__label{position:relative;top:2px}
.fnd{padding:22px;border-top:1px solid var(--line-soft)}
.fnd:first-of-type{border-top:0}
.fnd__head{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
           margin-bottom:10px;flex-wrap:wrap}
.fnd__area{font:600 .8rem/1 var(--display);letter-spacing:.07em;text-transform:uppercase;
           color:var(--muted)}
.fnd__v{display:inline-flex;align-items:center;gap:7px;font:600 .84rem/1 var(--display)}
.fnd h3{font:600 1.05rem/1.45 var(--display);color:var(--ink);margin:0 0 12px;max-width:62ch}
.fnd p{font:400 .95rem/1.6 var(--prose);color:var(--ink-2);margin:0 0 10px;max-width:70ch}
.fnd p:last-child{margin-bottom:0}
.fnd p b{display:block;font:600 .72rem/1 var(--display);letter-spacing:.09em;
         text-transform:uppercase;color:var(--accent-ink);margin-bottom:5px}
.fsample__note{font:400 .88rem/1.6 var(--prose);color:var(--muted);margin:0;
               padding:16px 22px;border-top:1px solid var(--line-soft);
               background:var(--surface-2)}
@media(min-width:900px){
  .fnd{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
       gap:0 clamp(24px,3vw,48px)}
  .fnd__head,.fnd h3{grid-column:1 / -1}
  .fnd p{margin-bottom:0}
}


/* The lead service gets the double-width cell AND the typographic weight to
   match. Andy, 28/08: the services are ordered by what actually earns -
   Implementation Support first, then Ongoing Advice, then the Health Check as the
   lead generator. A grid where the most valuable thing is the same size as the
   rarest one is a grid that says they are equally important. */
@media(min-width:620px){
  .tiles:not(.tiles--mini) .tile:first-child:nth-last-child(5) h3{font-size:1.28rem}
  /* No max-width: the lead tile is double-width and a 54ch cap left its
     summary filling barely two-thirds of the box (438px of 657px), which
     read as a mistake rather than a measure. At this width the three-line
     summary lands around 75ch, the top of the comfortable range but fine
     for a short block. */
  .tiles:not(.tiles--mini) .tile:first-child:nth-last-child(5) p{font-size:1rem;max-width:none}
  .tiles:not(.tiles--mini) .tile:first-child:nth-last-child(5) .tile__mark{width:44px;height:44px}
}

/* ---- a gap that cannot be mistaken for content ------------------------ */
.gap{background:#FFF6E5;border:2px dashed var(--warn);border-radius:3px;padding:14px 16px;
     color:#5A3B00;font:400 .95rem/1.55 var(--prose);margin:16px 0}
.gap strong{color:#5A3B00;display:block;margin-bottom:4px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .gap{background:#3A2E12;color:#F3E4C4}
  :root:not([data-theme="light"]) .gap strong{color:#F3E4C4}
}

/* ---- site footer ------------------------------------------------------ */
.sfoot{background:var(--band-bg);color:var(--band-ink-2);padding-block:34px;border-top:1px solid var(--band-line)}
/* The footer breaks the 1160px shell and runs the full width, so the
   particulars start at the page's left edge rather than a third of the way
   in on a wide screen (Andy, 16/09). The gutter still holds them off the
   very edge, and the nav column moves out to the right edge to match. */
.sfoot > .shell{max-width:none}
.sfoot__grid{display:grid;gap:28px;grid-template-columns:1fr}
/* The nav column used to be sized as a fraction, which parked it in the middle
   of the footer with empty space to its right. Sized to its content and pushed
   to the end instead, so it sits against the right edge opposite the statutory
   block (Andy, 28/08). */
@media(min-width:760px){
  .sfoot__grid{grid-template-columns:minmax(0,1fr) auto}
  .sfoot nav{justify-self:end;text-align:right}
  /* Two columns, filling downwards. A single row (tried first) was wide
     enough to squeeze the statutory block back into wrapping, and a single
     column ran ~90px taller than it. Two columns of four sit shorter than
     the block beside them and leave it the width it needs. */
  .sfoot nav ul{display:grid;grid-auto-flow:column;grid-template-rows:repeat(4,auto);
                gap:4px 28px;justify-content:end}
  .sfoot nav li{margin:0}
}
.sfoot__name{margin-bottom:14px}
.sfoot a{color:var(--band-ink-2)}
.sfoot a:hover{color:var(--band-ink)}
.sfoot strong{color:var(--band-ink)}
.sfoot p,.sfoot li{font-size:.86rem;line-height:1.65}
.sfoot ul{list-style:none;padding:0;margin:0}
.sfoot li{margin:4px 0}
.sfoot .statutory{max-width:none;margin-top:18px}
.sfoot__social a{display:inline-flex;align-items:center;gap:8px}
.sfoot__social svg{flex:none}

/* 28/09: Cookie settings is a button (it opens the banner, it goes nowhere)
   dressed as the footer links around it. */
.sfoot__cookies{background:none;border:0;padding:0;margin:0;font:inherit;font-size:.86rem;
  line-height:1.65;color:var(--band-ink-2);cursor:pointer;text-align:left}
.sfoot__cookies:hover{color:var(--band-ink);text-decoration:underline}
@media(max-width:820px){.sfoot__cookies{padding:7px 0}}

/* The analytics cookie banner (28/09). Dark band, pinned to the foot of the
   window, not a modal: the page stays usable and nothing loads until Accept.
   Accept and Reject are the same size, weight and colour - the ICO expects
   rejecting to be as easy as accepting. */
.cbar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--band-bg);color:var(--band-ink);
  border-top:1px solid var(--band-line);box-shadow:0 -6px 18px rgba(0,0,0,.18)}
.cbar[hidden]{display:none}
.cbar__in{max-width:1120px;margin:0 auto;padding:16px 20px;display:flex;gap:14px 24px;
  align-items:center;flex-wrap:wrap}
.cbar__say{flex:1 1 420px;margin:0;font:400 .92rem/1.55 var(--prose);color:var(--band-ink-2)}
.cbar__say strong{color:var(--band-ink)}
.cbar__say a{color:#C8A76A;text-decoration:underline}
.cbar__acts{display:flex;gap:10px;flex-wrap:wrap}
.cbar__btn{font:600 .9rem/1.2 var(--display);padding:11px 18px;min-height:44px;border-radius:6px;
  border:1px solid #C8A76A;background:#C8A76A;color:#2E3A45;cursor:pointer}
.cbar__btn:hover{background:#D8BC85;border-color:#D8BC85}
.cbar__btn:focus-visible,.cbar__say a:focus-visible,.sfoot__cookies:focus-visible{
  outline:3px solid #C8A76A;outline-offset:3px}
@media(max-width:560px){.cbar__acts{width:100%}.cbar__btn{flex:1 1 0}}
@media print{.cbar{display:none}}