/* Avanti website beta: style 4 C2 (charcoal). Red is the only accent. */
@font-face{font-family:'Gillius ADF';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/gillius-adf-regular.woff2) format('woff2')}
@font-face{font-family:'Gillius ADF';font-style:normal;font-weight:700;font-display:swap;src:url(../fonts/gillius-adf-bold.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:normal;font-weight:200 900;font-display:swap;src:url(../fonts/source-sans-3.woff2) format('woff2')}
@font-face{font-family:'Source Sans 3';font-style:italic;font-weight:200 900;font-display:swap;src:url(../fonts/source-sans-3-italic.woff2) format('woff2')}

:root{
  --red:#DE0000;
  --ink:#3A4245;      /* charcoal: headings and dark blocks */
  --near:#1A1A1A;
  --body:#333333;
  --mute:#4A5356;
  --paper:#F5F3F0;
  --cream:#E8E0D0;    /* small text on charcoal */
  --white:#FFFFFF;
  --line:rgba(26,26,26,.14);
  --rail:96px;
  --pad:22px;
  --col:calc((100vw - var(--rail)) / 6);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Source Sans 3',system-ui,sans-serif;color:var(--ink);background:linear-gradient(to right,var(--ink) var(--rail),var(--paper) var(--rail));display:grid;grid-template-columns:var(--rail) 1fr;min-height:100vh;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button,input,select,textarea{font:inherit}
small{font-size:max(16px,.85em)}
.mono{font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase}
.serif{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-weight:400}
.skip{position:absolute;left:-9999px}.skip:focus{left:110px;top:8px;z-index:50;background:var(--red);color:#fff;padding:10px 14px}
:focus-visible{outline:2px solid var(--red);outline-offset:3px}

/* ---------- left rail ---------- */
.rail{background:var(--ink);color:#fff;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:0 0 30px;z-index:20}
.rail .mk{display:block;width:var(--rail);height:79px;background:var(--red) url(../img/avanti-on-red.png) center/88px auto no-repeat}
.rail .word{writing-mode:vertical-rl;transform:rotate(180deg);font-weight:600;letter-spacing:.5em;font-size:16px}
.menu-btn{background:none;border:0;cursor:pointer;display:flex;flex-direction:column;gap:5px;padding:10px}
.menu-btn i{display:block;width:24px;height:1.5px;background:#fff}
.rail .menu-btn{visibility:hidden}

/* ---------- main + grid lines ---------- */
.main{position:relative;min-width:0;display:flex;flex-direction:column}
.gl{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(to right,var(--line) 1px,transparent 1px);background-size:calc(100% / 6) 100%;z-index:0}
.main>*{position:relative;z-index:1}
.g6{display:grid;grid-template-columns:repeat(6,1fr)}

/* ---------- top nav ---------- */
.nav{display:grid;grid-template-columns:repeat(6,1fr);height:64px;border-bottom:1px solid var(--line);align-items:stretch;background:var(--paper)}
.nav{font-size:16px;font-weight:500;line-height:1.2}
.nav a{padding:0 var(--pad);display:flex;align-items:center;gap:12px;transition:color .15s}
.nav a:hover{color:var(--red)}
.nav a.on{color:var(--red);box-shadow:inset 0 -3px 0 var(--red)}
.nav a.cta{background:var(--red);color:#fff;justify-content:space-between}
.nav a.cta:hover{background:#B80000;color:#fff}

/* ---------- home hero ---------- */
.hero{display:grid;grid-template-columns:repeat(6,1fr);min-height:720px;position:relative;padding-bottom:40px}
.h-meta{grid-column:1/4;padding:28px var(--pad) 0;display:flex;flex-direction:column;gap:6px;color:var(--mute)}
.h1{grid-column:1/7;font-weight:500}
.h1 .a{display:block;padding:0 var(--pad);font-size:clamp(54px,9.4vw,150px);line-height:.9;letter-spacing:0;margin-top:clamp(40px,7vw,110px)}
.h1 .b{display:block;padding:0 var(--pad);font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-weight:400;font-size:clamp(54px,9.4vw,150px);line-height:.95;letter-spacing:0;margin-left:calc(100% / 6)}
.h1 .b em{color:var(--red)}
.h-copy{grid-column:1/3;padding:0 var(--pad);margin-top:56px;font-size:17px;line-height:1.55;color:var(--body);max-width:420px}
.h-copy b{display:block;font-weight:600;color:var(--ink);margin-bottom:10px;font-size:17px}
.h-act{grid-column:5/7;align-self:end;padding:0 var(--pad);display:flex;justify-content:flex-end}
.badge{position:absolute;right:calc(100% / 6 * .9);top:90px;width:170px;height:170px}
.badge svg{position:absolute;inset:0;animation:spin 40s linear infinite}
.badge .core{position:absolute;inset:48px;border-radius:50%;background:var(--red);display:grid;place-items:center;color:#fff;font-size:28px;box-shadow:0 0 0 6px var(--paper),0 0 0 7px var(--red);transition:transform .2s}
.badge:hover .core{transform:scale(1.06)}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.badge svg{animation:none}html{scroll-behavior:auto}}

/* ---------- red band ---------- */
.band{display:grid;grid-template-columns:repeat(6,1fr);background:var(--red);color:#fff}
.band>div{padding:44px var(--pad) 40px;border-right:1px solid rgba(255,255,255,.25)}
.band>div:last-child{border-right:0}
.band b{display:block;font-size:clamp(34px,4.4vw,64px);font-weight:500;letter-spacing:0;line-height:1}
.band .mono{display:block;margin-top:14px;color:#fff}
.band.three>div{grid-column:span 2}

/* ---------- page head (inner pages) ---------- */
.ph{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line);padding-bottom:56px}
.ph .mono{grid-column:1/7;padding:28px var(--pad) 0;color:var(--mute)}
.ph h1{grid-column:1/7;padding:0 var(--pad);margin-top:clamp(36px,6vw,90px);font-size:clamp(48px,8.4vw,132px);line-height:.92;letter-spacing:0;font-weight:500}
.ph h1 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400;letter-spacing:0;color:var(--red)}
.ph h1.long{font-size:clamp(38px,5.2vw,80px);line-height:.98;letter-spacing:0;grid-column:1/6}
.ph .lede{grid-column:3/7;padding:0 var(--pad);margin-top:40px;font-size:clamp(18px,1.6vw,22px);line-height:1.5;color:var(--body);max-width:760px}
.ph .meta{grid-column:1/7;padding:0 var(--pad);margin-top:30px;color:var(--mute);display:flex;gap:24px;flex-wrap:wrap}

/* ---------- side + content blocks ---------- */
.blk{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}
.blk .side{grid-column:1/3;padding:64px var(--pad)}
.blk .side .k{color:var(--red);margin-bottom:40px}
.blk .side h2{font-size:clamp(34px,3.6vw,56px);line-height:.95;letter-spacing:0;font-weight:500;position:relative}
.blk .side h2::before{content:"";position:absolute;left:0;top:-18px;width:56px;height:4px;background:var(--red)}
.blk .side h2 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400;color:var(--red)}
.blk .side p{margin-top:24px;font-size:16px;line-height:1.6;color:var(--body);max-width:380px}
.blk .side .sticky{position:sticky;top:30px}
.blk .body{grid-column:3/7;padding:64px var(--pad) 72px}
.blk .body.wide{grid-column:3/7}
.prose{max-width:760px}
.prose p{font-size:17px;line-height:1.68;color:var(--body);margin-bottom:1.1em}
.prose p.big{font-size:clamp(20px,1.8vw,26px);line-height:1.45;color:var(--ink);letter-spacing:0}
.prose h3,.prose h2.h3{font-size:24px;font-weight:600;letter-spacing:0;margin:1.6em 0 .6em;color:var(--ink)}
.prose h3:first-child,.prose h2.h3:first-child{margin-top:0}
.prose a:not(.btn):not(.link){color:var(--red);border-bottom:1px solid currentColor}

.link{display:inline-flex;gap:14px;align-items:center;font-weight:600;font-size:16px;color:var(--red);border-bottom:1.5px solid var(--red);padding-bottom:6px;margin-top:30px}
.link:hover{gap:20px}
.btn{display:inline-flex;align-items:center;gap:22px;background:var(--red);color:#fff;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;padding:18px 22px;border:0;cursor:pointer;transition:background .15s,gap .15s}
.btn:hover{background:#B80000;gap:30px}
.btn.dark{background:var(--ink)}.btn.dark:hover{background:var(--near)}

/* ---------- staircase rows ---------- */
.stair{grid-column:3/7;padding:64px 0 80px}
.row{display:grid;grid-template-columns:90px 1fr 160px;align-items:baseline;border-top:1px solid var(--ink);border-left:6px solid transparent;padding:22px var(--pad) 26px;background:var(--paper);transition:background .15s}
.row:last-child{border-bottom:1px solid var(--ink)}
.row .n{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:22px;color:var(--red)}
.row h3{font-size:clamp(28px,3vw,44px);font-weight:500;letter-spacing:0;line-height:1}
.row h3 small{display:block;font-size:16px;letter-spacing:0;color:var(--mute);font-weight:400;margin-top:10px;line-height:1.4}
.row .m{justify-self:end;text-align:right;color:var(--mute)}

/* ---------- quote + dark panel ---------- */
.split{display:grid;grid-template-columns:repeat(6,1fr);min-height:420px}
.q{grid-column:1/5;padding:80px var(--pad) 70px}
.q .k{color:var(--mute);margin-bottom:28px}
.q blockquote{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:clamp(32px,3.8vw,56px);line-height:1.1;letter-spacing:0;max-width:860px;border-left:6px solid var(--red);padding-left:28px;color:var(--ink)}
.q blockquote em{color:var(--red)}
.who{margin-top:34px;display:flex;gap:16px;align-items:center;color:var(--mute)}
.who i{width:44px;height:2px;background:var(--red);flex:none}
.fw{grid-column:5/7;background:var(--ink);color:#fff;padding:44px 32px;display:flex;flex-direction:column;justify-content:space-between;gap:30px;transition:background .15s}
a.fw:hover{background:var(--near)}
.fw .mono{color:var(--cream)}
.fw h4,.fw .fwh{color:#fff;font-size:clamp(36px,3.8vw,56px);line-height:.92;letter-spacing:0;font-weight:500}
.fw h4 em,.fw .fwh em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400}
.fw p{font-size:16px;line-height:1.55;color:#fff;margin-top:16px}
.fw .arrow{font-size:44px;font-weight:300;align-self:flex-end;color:#fff}

/* ---------- news list ---------- */
.posts{grid-column:1/7}
.post{display:grid;grid-template-columns:repeat(6,1fr);border-top:1px solid var(--line);padding:30px 0 34px;transition:background .15s}
.post:hover{background:#fff}
.post .d{grid-column:1/2;padding:6px var(--pad) 0;color:var(--mute)}
.post .t{grid-column:2/6;padding:0 var(--pad)}
.post h3{font-size:clamp(22px,2.2vw,32px);font-weight:500;letter-spacing:0;line-height:1.08}
.post p{margin-top:12px;font-size:16px;line-height:1.55;color:var(--body);max-width:720px}
.post .a{grid-column:6/7;padding:6px var(--pad) 0;color:var(--mute);text-align:right}
.post:hover h3{color:var(--red)}
.post .tag{color:var(--red);margin-bottom:10px;display:block}

/* ---------- team ---------- */
.person{display:grid;grid-template-columns:repeat(6,1fr);border-bottom:1px solid var(--line)}
.person .side{grid-column:1/3;padding:64px var(--pad)}
.mono-tile{width:100%;max-width:300px;aspect-ratio:4/5;background:var(--ink);color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:22px;position:relative;overflow:hidden}
.mono-tile .ini{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:120px;line-height:.8;letter-spacing:0}
.mono-tile .ini em{color:#fff;font-style:italic}
.mono-tile .mono{color:var(--cream)}
.mono-tile::after{content:"";position:absolute;right:0;top:0;width:6px;height:100%;background:var(--red)}
.person h2{font-size:clamp(32px,3.2vw,48px);font-weight:500;letter-spacing:0;line-height:1;margin-top:28px}
.person .role{color:var(--red);margin-top:12px}
.person .body{grid-column:3/7;padding:64px var(--pad) 72px}
.divider{display:grid;grid-template-columns:repeat(6,1fr);background:var(--ink);color:#fff}
.divider div{grid-column:1/7;padding:22px var(--pad)}
.divider .mono{color:var(--cream)}

/* ---------- lists ---------- */
.ticks{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--ink);margin:10px 0 26px;max-width:760px}
.ticks li{list-style:none;padding:14px 18px 14px 0;border-bottom:1px solid var(--line);font-size:16px;line-height:1.4;display:flex;gap:14px;color:var(--ink)}
.ticks li::before{content:"";flex:none;width:8px;height:8px;background:var(--red);margin-top:6px}
.ticks li:nth-child(odd){padding-right:28px}
.toc{display:flex;flex-direction:column;border-top:1px solid var(--ink);margin-top:30px;max-width:340px}
.toc a{display:flex;gap:16px;padding:12px 0;border-bottom:1px solid var(--line);font-size:16px;transition:color .15s,padding .15s}
.toc a span{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;color:var(--red);width:26px}
.toc a:hover{color:var(--red);padding-left:6px}

/* ---------- testimonials ---------- */
/* Boxed cards in one row that scrolls sideways (S6, 10 Oct): three in view on desktop, one on phones. Only the row
   scrolls, never the page; it takes keyboard focus so the arrow keys scroll it. */
.tq-row{padding:48px 0 64px;border-bottom:1px solid var(--line)}
.tq-list{list-style:none;display:flex;gap:20px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-padding:0 var(--pad);padding:8px var(--pad) 24px}
.tq-list:focus-visible{outline-offset:-2px}
.tq{flex:0 0 calc((100% - 40px) / 3);display:flex;scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.tq figure{display:flex;flex-direction:column;width:100%;padding:32px 28px 28px}
.tq .who{margin-top:auto;padding-top:28px}
.tq blockquote{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-size:clamp(19px,1.55vw,22px);line-height:1.3;color:var(--ink);border-left:4px solid var(--red);padding-left:20px}
.tq blockquote p+p{margin-top:.6em}
.tq blockquote em{color:var(--red)}
.tq.dark{background:var(--ink);border-color:var(--ink)}
.tq.dark blockquote{color:#fff}
.tq.dark blockquote em{color:#fff;text-decoration:underline;text-decoration-color:var(--red);text-decoration-thickness:3px;text-underline-offset:6px}
.tq.dark .who{color:var(--cream)}

/* ---------- forms ---------- */
.form{display:grid;gap:22px;max-width:640px}
.form label{display:grid;gap:10px}
.form label span{color:var(--mute)}
.form input,.form textarea{font:inherit;font-size:17px;color:var(--near);background:#fff;border:0;border-bottom:2px solid var(--ink);padding:16px 14px;border-radius:0;width:100%}
.form textarea{min-height:180px;resize:vertical}
.form input:focus,.form textarea:focus{border-bottom-color:var(--red);background:#fff}
.form .note{font-size:16px;line-height:1.55;color:var(--mute)}
.beta-note{font-size:16px;color:var(--mute);margin-top:6px}

/* ---------- table ---------- */
.tbl{width:100%;max-width:760px;border-collapse:collapse;margin:8px 0 22px;font-size:16px}
.tbl th{text-align:left;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);font-weight:400;padding:12px 10px;border-bottom:1px solid var(--ink)}
.tbl td{padding:14px 10px;border-bottom:1px solid var(--line);color:var(--body)}
.tbl td:first-child{color:var(--ink);font-weight:600}
.tbl th:not(:first-child),.tbl td:not(:first-child){text-align:right}

/* ---------- cta strip ---------- */
.cta-strip{display:grid;grid-template-columns:repeat(6,1fr);background:var(--red);color:#fff}
.cta-strip h2{grid-column:1/5;padding:56px var(--pad);font-size:clamp(34px,4.4vw,64px);font-weight:500;letter-spacing:0;line-height:.95}
.cta-strip h2 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400}
.cta-strip a{grid-column:5/7;display:flex;align-items:flex-end;justify-content:space-between;padding:56px var(--pad);border-left:1px solid rgba(255,255,255,.25);font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;transition:background .15s}
.cta-strip a:hover{background:#B80000}
.cta-strip a b{font-size:44px;font-weight:300;font-family:'Source Sans 3',system-ui,sans-serif;line-height:.8}

/* ---------- footer ---------- */
.foot{display:flex;flex-wrap:wrap;background:var(--ink);color:var(--cream);font-size:16px;line-height:1.5;min-height:70px;align-items:center;margin-top:auto}
.foot>*{padding:22px var(--pad)}
.foot a:hover{color:#fff}
.foot .beta{color:#fff}
.foot .legal{flex-basis:100%;border-top:1px solid rgba(232,224,208,.18);line-height:1.6}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{grid-template-columns:repeat(3,1fr);height:auto}
  .nav a{height:52px;border-bottom:1px solid var(--line)}
  .badge{display:none}
  .row{grid-template-columns:60px 1fr 110px}
}
@media (max-width:820px){
  :root{--rail:0px;--pad:16px}
  body{display:block;background:var(--paper)}
  .rail{position:sticky;top:0;height:60px;width:100%;flex-direction:row;padding:0 6px 0 0}
  .rail .mk{width:73px;height:60px;background-size:66px auto}
  .rail .word{writing-mode:horizontal-tb;transform:none;letter-spacing:.16em;font-size:16px;margin-right:auto;margin-left:16px}
  .rail .menu-btn{visibility:visible}
  .gl{background-size:calc(100% / 2) 100%}
  .nav{display:none;grid-template-columns:1fr;position:sticky;top:60px;z-index:19}
  .nav.open{display:grid}
  .nav a{height:54px}
  .hero,.ph,.blk,.split,.person,.post,.cta-strip,.foot,.band{grid-template-columns:1fr}
  .hero>*,.ph>*,.blk>*,.split>*,.person>*,.post>*,.cta-strip>*,.foot>*,.band>div,.stair,.posts{grid-column:1/-1 !important}
  .tq{flex-basis:calc(100% - 24px)}
  .hero{min-height:0;padding-bottom:20px}
  .h1 .b{margin-left:0}
  .h-act{justify-content:flex-start;margin-top:30px}
  .band>div{border-right:0;border-bottom:1px solid rgba(255,255,255,.25);padding:26px var(--pad)}
  .band.three>div{grid-column:1/-1}
  .blk .side,.person .side{padding:44px var(--pad) 0}
  .blk .body,.person .body{padding:30px var(--pad) 52px}
  .stair{padding:30px 0 50px}
  .row{grid-template-columns:44px 1fr}
  .row .m{display:none}
  .q{padding:56px var(--pad)}
  .post{padding:24px 0}
  .post .d,.post .a{text-align:left;padding-top:0}
  .post .t{margin:8px 0}
  .ticks{grid-template-columns:1fr}
  .mono-tile{max-width:220px}
  .mono-tile .ini{font-size:90px}
  .cta-strip a{border-left:0;border-top:1px solid rgba(255,255,255,.25);padding:28px var(--pad)}
  .cta-strip h2{padding:44px var(--pad) 30px}
  .foot>*{padding:10px var(--pad);flex-basis:100%}
  .foot{padding:16px 0}
  .ph .lede{margin-top:28px}
  .ph h1.long{grid-column:1/-1}
  .tbl{font-size:16px}
}

/* team photos */
.photo{width:100%;max-width:300px;aspect-ratio:1;position:relative;background:var(--ink)}
.photo img{width:100%;height:100%;object-fit:cover}
.photo::after{content:"";position:absolute;right:0;top:0;width:6px;height:100%;background:var(--red)}
@media (max-width:820px){.photo{max-width:220px}}

/* images from the current site */
.row.t{grid-template-columns:72px 1fr 140px;align-items:center}
.row.t h3{padding-left:24px}
.row .th{width:72px;height:72px;object-fit:cover}
.row.t .n{padding-left:16px}
.post .d img{display:block;width:100%;height:auto;max-width:200px;aspect-ratio:4/3;object-fit:cover;margin-top:14px}
.post-img{display:block;width:100%;height:auto;max-width:340px;aspect-ratio:4/3;object-fit:cover;margin-bottom:26px}
@media (max-width:820px){
  .row.t{grid-template-columns:56px 1fr}
  .row .th{width:56px;height:56px}
  .row.t .n{display:none}
  .row.t h3{padding-left:14px}
  .post .d{display:flex;flex-direction:column-reverse;gap:10px}
  .post .d img{max-width:100%;margin-top:0}
}

/* road photo as the opening image */
.hero.hero-photo{color:#fff;min-height:clamp(560px,78vh,820px);overflow:hidden;isolation:isolate;background:var(--near)}
.hero.hero-photo .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 62%;z-index:-2}
.hero.hero-photo::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(26,26,26,.62) 0%,rgba(26,26,26,.28) 42%,rgba(26,26,26,.18) 62%,rgba(26,26,26,.72) 100%)}
.hero.hero-photo .h-meta{color:var(--cream)}
.hero.hero-photo .h1 .a,.hero.hero-photo .h1 .b,.hero.hero-photo .h1 .b em{color:#fff}
.hero.hero-photo .h-copy,.hero.hero-photo .h-copy b{color:#fff}
.hero.hero-photo .badge .core{box-shadow:0 0 0 6px rgba(255,255,255,0),0 0 0 7px #fff}

/* brighter road photo (2 Oct, evening): lighter overlay, red back in the title */
.hero.hero-photo::before{background:linear-gradient(180deg,rgba(26,26,26,.42) 0%,rgba(26,26,26,.22) 40%,rgba(26,26,26,.25) 65%,rgba(26,26,26,.62) 100%)}
.hero.hero-photo .bg{object-position:center 58%}
.hero.hero-photo .h1{text-shadow:0 2px 24px rgba(26,26,26,.45)}
.hero.hero-photo .h1 .b em{color:var(--red);text-shadow:0 0 1px rgba(255,255,255,.35),0 2px 22px rgba(26,26,26,.35)}
.hero.hero-photo .h-copy,.hero.hero-photo .h-meta{text-shadow:0 1px 10px rgba(26,26,26,.6)}
.form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0}
.btn:disabled{opacity:.6;cursor:wait}

/* Home link back in the menu: 6 links + Contact Us */
.nav{grid-template-columns:repeat(7,1fr)}
@media (max-width:1100px){.nav{grid-template-columns:repeat(4,1fr)}}
@media (max-width:820px){.nav{grid-template-columns:1fr}}

/* Academy entry (2 Oct): red Academy item in the menu, Contact Us in charcoal, home panel */
.nav{grid-template-columns:repeat(8,auto)}
.nav a.acad{background:var(--red);color:#fff;justify-content:space-between;font-weight:600}
.nav a.acad:hover{background:#B80000;color:#fff}
.nav a.cta{background:var(--ink)}
.nav a.cta:hover{background:var(--near)}
.acad-panel{background:var(--red);color:#fff;border-top:1px solid rgba(255,255,255,.25)}
.ap-in{display:grid;grid-template-columns:auto 1fr auto;gap:40px;align-items:center;padding:56px var(--pad)}
.ap-in img{height:110px;width:auto}
.ap-t .mono{color:#fff}
.ap-t h2{font-size:clamp(34px,4.4vw,64px);font-weight:500;letter-spacing:0;line-height:.95;margin:12px 0 14px}
.ap-t h2 em{font-family:'Gillius ADF','Source Sans 3',system-ui,sans-serif;font-style:italic;font-weight:400}
.ap-t p{font-size:17px;line-height:1.5;max-width:620px}
.ap-go{display:flex;align-items:center;gap:18px;background:#fff;color:var(--red);padding:20px 24px;transition:gap .15s}
.ap-go b{font-size:30px;font-weight:300;font-family:'Source Sans 3',system-ui,sans-serif;line-height:.6}
.ap-in:hover .ap-go{gap:28px}
@media (max-width:1100px){.nav{grid-template-columns:repeat(4,1fr)}.ap-in{grid-template-columns:1fr}.ap-go{justify-self:start}}
@media (max-width:820px){.nav{grid-template-columns:1fr}.ap-in img{height:80px}}
.acad-panel{background:var(--ink)}
.ap-go{background:var(--red);color:#fff}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.prose ul{margin:0 0 1.1em;padding-left:1.25em}.prose li{font-size:17px;line-height:1.6;color:var(--body);margin-bottom:.45em}
.blk>.side,.blk>.body{min-width:0}.tblw{overflow-x:auto;max-width:100%}@media (max-width:400px){.tbl th,.tbl td{padding-left:6px;padding-right:6px}}
/* The rates table on the terms page, on phones (400px wide or less): each role on its own with its three prices, so
   nothing runs off the screen (it was 24px too wide at 320px). Screen readers still have the table. */
.tbl-lab{display:none}
@media (max-width:400px){
  .tbl thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
  .tbl,.tbl tbody{display:block}
  .tbl tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 16px;padding:12px 0;border-bottom:1px solid var(--line)}
  .tbl td,.tbl td:not(:first-child){display:block;padding:0;border:0;text-align:left}
  .tbl td:first-child{flex-basis:100%}
  .tbl-lab{display:inline;font-family:'Source Sans 3',system-ui,sans-serif;font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute)}
}
/* The menu behind the Menu button on phones scrolls when the screen is too short to show all of it (phones held
   sideways), so Academy and Contact Us can always be reached. It sits under the 60px top bar. */
@media (max-width:820px){.nav{max-height:calc(100vh - 60px);max-height:calc(100dvh - 60px);overflow-y:auto}}
/* Long words break rather than spill sideways with large text or extra text spacing (WCAG 1.4.10, 1.4.12) */
h1,h2,h3{overflow-wrap:break-word}
.row>*,.ph>*{min-width:0}

/* ---------- Softer look and Amanda's fonts (7 Oct 2026) ----------
   Headings in Gillius ADF, the free match for the Gill Sans on the slides and adverts; body text in Source Sans 3 at 18px,
   line height about 1.5, left-aligned, charcoal. Gillius has no w or y with a circumflex, so every heading stack lists
   Source Sans 3 straight after it and Welsh letters such as those in tŷ fall back cleanly. Rounded cards and buttons,
   lighter lines and soft shadows in place of the hard rules and boxes. */
:root{--fh:'Gillius ADF','Source Sans 3',system-ui,sans-serif;--fb:'Source Sans 3',system-ui,sans-serif;--edge:#7A8184;--r:18px;--r-s:12px;--shadow:0 1px 2px rgba(26,26,26,.05),0 8px 24px rgba(26,26,26,.07);--line:rgba(26,26,26,.1)}
body{font-family:var(--fb);font-size:18px;line-height:1.5}
h1,h2,h3,h4,.h1,.fwh,.band b,.cta-strip h2,.ap-t h2,.row h3,.post h3,.person h2,.q blockquote,.tq blockquote{font-family:var(--fh);font-weight:400;letter-spacing:0}
h1 em,h2 em,h3 em,h4 em,.h1 em,.fwh em,.q blockquote em,.tq blockquote em{font-family:var(--fh);font-style:normal;font-weight:400}
em{font-style:italic}
.h1 .a,.h1 .b{font-family:var(--fh);font-weight:400;letter-spacing:-.01em;line-height:.98}
.ph h1{line-height:1;letter-spacing:-.01em}.ph h1.long{line-height:1.04}
.blk .side h2,.fw h4,.fw .fwh,.cta-strip h2,.ap-t h2{line-height:1.04}
.row h3,.post h3,.person h2{line-height:1.08}
.row h3 small{font-family:var(--fb)}
.prose h3,.prose h2.h3{font-family:var(--fh);font-weight:700;font-size:26px}
.mono{font-family:var(--fb);font-weight:600;letter-spacing:.06em}
.rail .word{font-family:var(--fh);font-weight:400;letter-spacing:.42em}
.toc a span,.row .n{font-family:var(--fh)}
/* 18px body text, about 1.5 line spacing */
.h-copy,.h-copy b,.blk .side p,.prose p,.prose li,.post p,.fw p,.ap-t p,.ticks li,.toc a,.form input,.form textarea,.form .note,.tbl,.foot{font-size:18px}
.prose p,.prose li{line-height:1.6}
.h-copy,.blk .side p,.post p,.fw p,.ap-t p{line-height:1.55}
/* lighter grid lines */
.gl{opacity:.6}
/* buttons: rounded, sentence-style labels, soft shadow */
.btn{border-radius:999px;font-family:var(--fb);font-weight:600;font-size:18px;letter-spacing:.01em;text-transform:none;padding:15px 26px;gap:16px;box-shadow:0 2px 8px rgba(222,0,0,.18)}
.btn:hover{gap:22px}
.btn.dark{box-shadow:0 2px 8px rgba(26,26,26,.18)}
.link{border-bottom-width:1px;border-radius:0}
/* menu: Academy and Contact Us as rounded buttons inside the bar */
.nav a.acad,.nav a.cta{margin:10px 4px;border-radius:999px;padding:0 20px;gap:14px}
.nav a.cta{margin-right:var(--pad)}
.nav a.on{box-shadow:inset 0 -3px 0 var(--red)}
/* staircase rows become rounded cards */
.stair{display:flex;flex-direction:column;gap:12px;padding-right:var(--pad)}
.row{border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow);transition:background .15s,box-shadow .15s,transform .15s}
.row:last-child{border-bottom:1px solid var(--line)}
.row .th{border-radius:var(--r-s)}
/* quote and dark panel */
.q blockquote{border-left-width:4px;border-radius:2px}
.fw{margin:24px var(--pad) 24px 0;border-radius:var(--r);box-shadow:0 10px 30px rgba(26,26,26,.16)}
/* news list: rounded hover */
.post{border-top-color:var(--line);border-radius:var(--r)}
.post .d img,.post-img{border-radius:var(--r-s)}
/* team */
.photo,.mono-tile{border-radius:var(--r);overflow:hidden}
/* lists: round markers */
.ticks{border-top-color:var(--line)}
.ticks li::before{border-radius:50%;width:9px;height:9px}
.toc{border-top-color:var(--line)}
/* forms: rounded fields with a clear edge */
.form input,.form textarea{border:1.5px solid var(--edge);border-radius:var(--r-s);padding:14px 16px}
.form input:focus,.form textarea:focus{border-color:var(--red);box-shadow:0 0 0 3px rgba(222,0,0,.14);outline:0}
.form input:focus-visible,.form textarea:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* table */
.tbl th{border-bottom-color:var(--line);font-weight:600}
/* red bands: softer dividers */
.band>div{border-right-color:rgba(255,255,255,.2)}
/* call-to-action strip: the link becomes a white rounded button */
.cta-strip{align-items:center}
.cta-strip a{align-self:center;justify-self:start;margin:0 var(--pad) 0 0;padding:16px 28px;border:0;border-radius:999px;background:#fff;color:var(--red);font-family:var(--fb);font-weight:600;font-size:18px;letter-spacing:.01em;text-transform:none;gap:16px;align-items:center;box-shadow:0 4px 14px rgba(26,26,26,.18)}
.cta-strip a:hover{background:var(--paper)}
.cta-strip a b{font-size:24px;line-height:1}
/* Academy panel on the home page */
.ap-go{border-radius:999px;padding:16px 26px;font-weight:600;box-shadow:0 2px 8px rgba(222,0,0,.25)}
.ap-go b{font-size:24px;line-height:1}
.ap-in img{border-radius:var(--r-s)}
@media (max-width:820px){
  .nav a.acad,.nav a.cta{margin:8px var(--pad);height:50px}
  .stair{padding-right:var(--pad);padding-left:var(--pad)}
  .fw{margin:0 var(--pad) 32px}
  .cta-strip a{margin:0 var(--pad) 36px;border-top:0}
  .post{border-radius:0}
}
/* emphasis inside headings is red Gillius, upright (Gillius has no italic here, so no slanted fake) */
.ph h1 em,.blk .side h2 em,.cta-strip h2 em,.ap-t h2 em,.fw h4 em,.fw .fwh em,.mono-tile .ini em{font-family:var(--fh);font-style:normal;letter-spacing:0}
/* Gillius sets wider than the old serif, so the home heading steps down a size to keep "Organisational Change." on one line */
.h1 .a,.h1 .b{font-size:clamp(48px,7.6vw,122px)}

/* ---------- Structure pass (10 Oct 2026) ---------- */
/* About Us (S3): the page title sits on the road photo in a paper panel, so there is no gap between them; the copy
   runs across the page at a comfortable measure, with its links side by side */
.ph.ph-photo{grid-template-columns:1fr;padding:0;background:var(--ink)}
.ph-photo>img,.ph-photo>picture>img,.ph-photo>.ph-card{grid-area:1/1/2/2}
.ph-photo>img,.ph-photo>picture>img{width:100%;height:100%;min-height:clamp(300px,36vw,520px);object-fit:cover;object-position:center 60%}
.ph-photo .ph-card{align-self:end;justify-self:start;margin:56px var(--pad) var(--pad);max-width:calc(100% - 2 * var(--pad));background:var(--paper);border-radius:var(--r);box-shadow:var(--shadow);padding:22px 32px 30px}
.ph-photo .ph-card .mono{padding:0}
.ph-photo .ph-card h1{padding:0;margin-top:14px}
.blk .body.full{grid-column:1/7;max-width:880px}
.links{display:flex;flex-wrap:wrap;gap:0 36px}
@media (max-width:820px){.ph-photo>img,.ph-photo>picture>img{min-height:280px}.ph-photo .ph-card{padding:16px 20px 22px}}

/* What We Do (S4): the home page's service cards, each opening its full description in place */
.svcs .stair{grid-column:1/7;padding:48px var(--pad) 72px}
.svc{background:#fff;border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);scroll-margin-top:24px}
.svc>summary.row{border:0;background:none;box-shadow:none;cursor:pointer;list-style:none}
.svc>summary::-webkit-details-marker{display:none}
.svc .row.t{grid-template-columns:72px 1fr 48px}
.svc>summary:hover h3{color:var(--red)}
.svc .row .m{font-size:30px;line-height:1;color:var(--red);transition:transform .2s}
.svc[open] .row .m{transform:rotate(90deg)}
.svc-body.prose{max-width:none;padding:6px var(--pad) 40px calc(72px + 24px + var(--pad))}
.svc-body>*{max-width:760px}
@media (prefers-reduced-motion:reduce){.svc .row .m{transition:none}}
@media (max-width:820px){
  .svcs .stair{padding:30px var(--pad) 50px}
  .svc{scroll-margin-top:84px}   /* clear of the 60px top bar */
  .svc .row.t{grid-template-columns:56px 1fr 32px}
  .svc .row .m{display:block}
  .svc-body.prose{padding:0 var(--pad) 30px}
}

/* LinkedIn (S2, S5): the "in" mark with the word in the footer; on the team page an icon link with a 44px target */
.foot-li{display:inline-flex;align-items:center;gap:10px}
.foot-li svg{flex:none}
.team-li{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;margin:12px 0 0 -10px;color:var(--ink);border-radius:var(--r-s);transition:color .15s}
.team-li svg{width:26px;height:26px}
.team-li:hover{color:var(--red)}

/* With thanks (S11): names in Gillius, their lines in Source Sans; the first debt in its own sand panel */
.debt{background:var(--cream);border-radius:var(--r);padding:32px 36px;margin:0 0 8px}
.debt dt{font-family:var(--fh);font-size:clamp(28px,2.6vw,36px);line-height:1.15;color:var(--ink);margin-bottom:14px}
.debt dd{font-size:20px;line-height:1.6;color:var(--body)}
.names{margin:0 0 1.4em}
.names>div{display:grid;grid-template-columns:minmax(0,15em) minmax(0,1fr);gap:6px 32px;padding:18px 0;border-top:1px solid var(--line)}
.names>div:last-child{border-bottom:1px solid var(--line)}
.names dt{font-family:var(--fh);font-size:22px;line-height:1.3;color:var(--ink)}
.names dd{font-size:18px;line-height:1.6;color:var(--body)}
.thanks-close{margin-top:40px}
@media (max-width:820px){.names>div{grid-template-columns:1fr}.debt{padding:24px 20px}}

/* Testimonials (B6): pause or play on the left, previous and next on the right, as rounded buttons above the row.
   The slot keeps its 48px height from the start, so nothing moves when site.js shows the buttons. */
.tq-ctrl{min-height:48px;margin:0 0 12px;padding:0 var(--pad)}
.tq-btns{display:flex;justify-content:space-between;align-items:center;gap:12px}
.tq-btns[hidden]{display:none}
.tq-step{display:flex;gap:10px}
.tq-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-width:48px;min-height:48px;padding:0 22px;border:1.5px solid var(--ink);border-radius:999px;background:#fff;color:var(--ink);font-family:var(--fb);font-weight:600;font-size:18px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(26,26,26,.08);transition:background .15s,color .15s,border-color .15s}
.tq-btn svg{flex:none;fill:currentColor}
.tq-btn:hover{background:var(--ink);color:#fff}
.tq-play{background:var(--ink);color:#fff;padding-left:18px}
.tq-play:hover{background:var(--near);border-color:var(--near)}
.tq-play .i-play,.tq-play.is-paused .i-pause{display:none}
.tq-play.is-paused .i-play{display:inline}
@media (prefers-reduced-motion:reduce){.tq-list{scroll-behavior:auto}.tq-btn{transition:none}}
/* on phones, previous and next keep only their arrows (their names stay for screen readers) */
@media (max-width:560px){
  .tq-btn{padding:0 18px}
  .tq-prev,.tq-next{width:48px;padding:0}
  .tq-prev .tq-t,.tq-next .tq-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
}

/* Privacy notice (C8, draft): the Academy section and its parts */
.prose h2.pv-sec{font-size:32px;margin-top:1.4em;padding-top:.8em;border-top:1px solid var(--line, rgba(26,26,26,.14))}
.prose h3.pv-h{font-size:21px;margin:1.3em 0 .5em}

/* ---------- Style pass (Jon and Amanda's review, 10 Oct 2026) ---------- */
/* ST3: the part-italic headings come back: the accent word in a heading is Instrument Serif Italic */
@font-face{font-family:'Instrument Serif';font-style:italic;font-weight:400;font-display:swap;src:url(../fonts/instrument-serif-italic.woff2) format('woff2')}
:root{--fi:'Instrument Serif',Georgia,serif}
html:root body :is(h1,h2,h3,h4,.h1,.fwh) em{font-family:var(--fi);font-style:italic;font-weight:400;letter-spacing:0}
/* ST4: the headline sits higher, so "Change" (red italic) is over the clouds on a computer screen */
@media (min-width:821px){
  .hero.hero-photo .h-meta{padding-top:20px}
  .hero.hero-photo .h1 .a{margin-top:clamp(8px,1.2vw,20px)}
}
.hero.hero-photo .h1 .b em{font-size:1.06em;line-height:.9}
/* ST7: "Boards · Executive teams · Senior leaders" stays on one line at every width (16px on the narrowest phones) */
.h-copy b{white-space:nowrap}
@media (max-width:380px){.hero .h-copy b{font-size:16px}}
/* ST6: the Academy panel is sand with ink text; the "Enter the Academy" button is unchanged */
.acad-panel{background:var(--cream);color:var(--ink);border-top:0}
.acad-panel .ap-t .mono{color:var(--ink)}
.acad-panel .ap-t h2{color:var(--near)}
.acad-panel .ap-t h2 em{color:var(--red)}
.acad-panel .ap-t p{color:var(--ink)}
.acad-panel :focus-visible{outline-color:var(--ink)}
/* ST9: What We Do loses its extra white space: a tighter page head, and the cards spaced as the old home page list */
.ph:has(+ .svcs){padding-bottom:36px}
.ph:has(+ .svcs) h1{margin-top:clamp(24px,3.6vw,56px)}
.ph:has(+ .svcs) .lede{margin-top:24px}
.svcs .stair{padding-top:32px;padding-bottom:56px}
.svc-body.prose{padding-bottom:28px}
@media (max-width:820px){.svcs .stair{padding-top:24px;padding-bottom:40px}}
/* C4: "About the narration", a subsection of the accessibility statement */
.prose h3.a-sub{font-size:21px;margin:1.2em 0 .5em}

/* ---------- Amanda's v42 list (10 Oct 2026) ---------- */
/* H1 and H2: with the eyebrow lines gone the headline sits at the top of the photo, and on computer screens the photo
   is placed a little higher in its frame, so the hills sit lower and "Change" has only sky behind it */
.hero.hero-photo .h1 .a{margin-top:clamp(28px,4vw,56px)}
@media (min-width:821px){
  .hero.hero-photo .h1 .a{margin-top:clamp(12px,1.4vw,28px)}
  .hero.hero-photo .bg{object-position:center 12%}
}
/* H4: one line in the red band, white Gillius ADF with the accent in Instrument Serif Italic */
.band.strap{display:block;padding:clamp(28px,3vw,40px) var(--pad)}
.band.strap p{font-family:var(--fh);font-weight:400;font-size:clamp(28px,2.95vw,40px);line-height:1.2;color:#fff;letter-spacing:0;text-wrap:balance}
.band.strap em{font-family:var(--fi);font-style:italic;font-weight:400;font-size:1.06em;color:#fff}
/* A1: the About Us title over the sky at the top of the photo, ink with "Us" in red italic, and no box behind it */
.ph-sky .ph-card{align-self:start;margin:clamp(28px,4vw,64px) var(--pad) var(--pad);background:none;box-shadow:none;border-radius:0;padding:0}
.ph-sky .ph-card .mono,.ph-sky .ph-card h1{color:var(--ink)}
.ph-sky .ph-card h1 em{color:var(--red)}
/* A3: a slim charcoal band of the three steps straight under the photo (one line on computers, stacked on phones) */
.steps-band{background:var(--ink);color:#fff;padding:18px var(--pad)}
.steps-band p{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;font-family:var(--fh);font-size:24px;line-height:1.3;color:#fff}
.steps-band .sb-ar{color:var(--cream)}
@media (max-width:820px){
  .steps-band p{flex-direction:column;align-items:flex-start;gap:2px}
  .steps-band .sb-ar{display:block;transform:rotate(90deg);padding-left:4px}
}
/* A2: the opening paragraph runs the full width in the lead size, and the rest sit in two equal columns */
.ab-text .body.full{max-width:none;padding-top:clamp(40px,5vw,64px)}
.ab-text .prose p.big{max-width:none}
.ab-cols{columns:2;column-gap:clamp(32px,4vw,64px);margin-top:8px}

@media (max-width:820px){.ab-cols{columns:1}}
/* "Us" in red is under 3 to 1 against the bright sky, so a very soft paper-coloured fade sits behind the title only */
.ph-sky .ph-card{position:relative;isolation:isolate}
.ph-sky .ph-card::before{content:"";position:absolute;inset:-40px -120px -48px -56px;z-index:-1;pointer-events:none;
  background:radial-gradient(closest-side,rgba(245,243,240,.86) 0%,rgba(245,243,240,.84) 62%,rgba(245,243,240,.42) 86%,rgba(245,243,240,0) 100%)}

/* ---- v43, the copy refresh (Jon and Amanda, 10 Oct 2026) ---- */
/* Closing band: heading with a line of text under it */
.cta-strip .cta-t{grid-column:1/5;padding:56px var(--pad)}
.cta-strip .cta-t h2{padding:0}
.cta-strip .cta-t p{margin-top:16px;font-size:18px;line-height:1.55;color:#fff;max-width:640px}
@media (max-width:820px){.cta-strip .cta-t{padding:44px var(--pad) 30px}.cta-strip .cta-t h2{padding:0}}
/* Footer line, across the full width above the links */
.foot .foot-line{flex-basis:100%;border-bottom:1px solid rgba(232,224,208,.18);color:#fff}
/* About Us: two explicit columns of two paragraphs, then What we stand for */
.ab-cols{columns:auto;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(32px,4vw,64px)}
@media (max-width:820px){.ab-cols{grid-template-columns:1fr}}
.stand{margin-top:clamp(12px,1.5vw,20px);background:#fff;border:1px solid var(--line);box-shadow:var(--shadow);border-radius:var(--r);padding:clamp(24px,3vw,36px)}
.stand h2{font-family:var(--fh);font-size:clamp(26px,2.4vw,34px);line-height:1.1;color:var(--ink)}
.stand h2 em{font-family:var(--fi);font-style:italic;color:var(--red)}
.stand ul{list-style:none;padding:0;margin:18px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:16px clamp(24px,3vw,48px)}
.stand li{font-size:18px;line-height:1.55;color:var(--body);padding-left:18px;border-left:3px solid var(--red)}
.stand li b{color:var(--ink);font-weight:600}
@media (max-width:820px){.stand ul{grid-template-columns:1fr}}
/* Talk to Us: the consent line inside the form; Thank you and Page not found: two buttons */
.form .consent{font-size:18px;line-height:1.55;color:var(--body)}
.form .consent a{color:var(--red-d,#B80000);text-decoration:underline}
.ph .acts2{gap:12px 16px}
.btn.ghost{background:#fff;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.ghost:hover{background:var(--paper)}

/* ---- v44, Amanda's v43 review ---- */
/* HM1 and AB2: the red strapline band and the grey steps band are centred */
.band.strap p{text-align:center}
.steps-band p{justify-content:center}
@media (max-width:820px){.steps-band p{align-items:center}.steps-band .sb-ar{padding-left:0}}
/* HM2: the main menu on sand, as the Academy menu. Small red text on sand uses the darker red to keep 4.5 to 1. */
.nav{background:var(--cream)}
.nav a:hover,.nav a.on{color:#B80000}
.nav a.acad,.nav a.acad:hover{color:#fff}
.nav a.cta,.nav a.cta:hover{color:#fff}
/* AB1: the About Us photo at about 60% of its height (about 420px on a laptop), title still on the sky */
.ph-sky>img{height:auto;min-height:0;aspect-ratio:1680/566;object-position:center 20%}
@media (max-width:820px){.ph-sky>img{min-height:168px}}

/* ---- v45, Amanda's v44 review and Jon's decisions (12 Oct 2026) ---- */
/* HM1: the red logo tile is exactly the height of the menu strip, with the logo scaled to fit inside it. Laptops: one
   64px row. Tablets (821 to 1100px): the menu is two rows, 125px in all, so the tile matches that. Phones keep the 60px
   top bar tile set further up. */
@media (min-width:1101px){.rail .mk{height:64px;background-size:auto 50px}}
@media (min-width:821px) and (max-width:1100px){.rail .mk{height:125px;background-size:auto 50px}}
/* HM2: on the home photo, "Boards · Executive teams · Senior leaders" and its paragraph sit near the bottom, their last
   line about level with the "What we do" button */
.hero.hero-photo{grid-template-rows:auto 1fr}
.hero.hero-photo .h-copy{align-self:end;margin-top:32px}
.hero.hero-photo .h-act{align-self:end}
/* HM3 and AB1: the three steps with arrows, the last one in the italic serif; the strapline band a third shorter */
.band.strap{padding:clamp(16px,1.7vw,24px) var(--pad)}
.band.strap p,.steps-band p{display:flex;flex-wrap:wrap;justify-content:center;align-items:baseline;gap:4px 18px}
.band.strap .sb-ar,.steps-band .sb-ar{color:#fff;opacity:.8}
.steps-band p em,.band.strap p em{font-family:var(--fi);font-style:italic;font-weight:400;font-size:1.06em;color:#fff}
.steps-band{background:var(--red)}
@media (max-width:820px){.band.strap p{flex-direction:column;align-items:center;gap:0}.band.strap .sb-ar{display:block;transform:rotate(90deg)}}
/* HM4: the closing band is charcoal and a third shorter; the white "Talk to us" button stays */
.cta-strip{background:var(--ink)}
.cta-strip .cta-t{padding:clamp(28px,3vw,38px) var(--pad)}
@media (max-width:820px){.cta-strip .cta-t{padding:30px var(--pad) 20px}.cta-strip a{margin-bottom:26px}}
/* G2: the main-site footer is Avanti red with white text, about two-thirds of its old height */
.foot{background:var(--red);color:#fff;min-height:0}
.foot>*{padding:14px var(--pad)}
.foot a:hover{color:#fff;text-decoration:underline}
.foot .legal{border-top-color:rgba(255,255,255,.3)}
.foot :focus-visible{outline-color:#fff}
@media (max-width:820px){.foot{padding:10px 0}.foot>*{padding:6px var(--pad)}}
/* PE2: Our People has a tighter top: half the space around the title, and the introduction close beneath it */
.ph.ph-tight{padding-bottom:28px}
.ph.ph-tight h1{margin-top:clamp(18px,3vw,45px)}
.ph.ph-tight .lede{margin-top:16px}
/* CT2: a short message beside a field that needs putting right */
.form .f-err{margin-top:-12px;font-size:18px;line-height:1.4;font-weight:600;color:#B80000}
.form .f-err[hidden]{display:none}
.form [aria-invalid="true"]{border-color:#B80000}
/* WC1: with the longer names the menu still fits on one line on laptops: a little less space between items below 1340px */
@media (min-width:1101px) and (max-width:1340px){.nav a{padding:0 11px}.nav a.acad,.nav a.cta{padding:0 15px;gap:10px;margin-left:3px;margin-right:3px}.nav a.cta{margin-right:var(--pad)}}
/* ---- v46, Ben's v45 comments (12 Oct 2026) ---- */
/* Home: "Boards · Executive teams · Senior leaders" and its paragraph (with the What we do button, still level) sit
   lower, over the darker hillside, with a soft shade behind the bottom left so the words read easily on the photo */
@media (min-width:821px){.hero.hero-photo{padding-bottom:20px}}
.hero.hero-photo::after{content:"";position:absolute;left:0;bottom:0;width:62%;height:58%;z-index:-1;pointer-events:none;
  background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(26,26,26,.5) 0%,rgba(26,26,26,.28) 45%,rgba(26,26,26,0) 75%)}
@media (max-width:820px){.hero.hero-photo::after{width:100%;height:60%}}

/* ---- v53, Jon's brief of 16 October 2026 (from Amanda's review notes) ---- */
/* Home: the full stop after "Change" is a round red dot. Gillius draws its full stop square, so the stop stays in the text
   (screen readers and copying still get it) but is drawn as a circle in Avanti red #DE0000. */
.h1 .rdot{position:relative;display:inline-block;width:.26em;color:transparent;text-shadow:none}
.h1 .rdot::after{content:"";position:absolute;left:.04em;bottom:.07em;width:.17em;height:.17em;border-radius:50%;background:var(--red);
  box-shadow:0 0 1px rgba(255,255,255,.35),0 2px 18px rgba(26,26,26,.35)}
/* Home: the photo fills the first screen (100svh less the menu above it, measured by site.js), so the red strapline only
   shows once you scroll. --top falls back to each layout's menu height. */
:root{--top:64px}
@media (min-width:821px) and (max-width:1100px){:root{--top:125px}}
@media (max-width:820px){:root{--top:60px}}
.hero.hero-photo{min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top));padding-bottom:clamp(76px,9vh,104px)}
/* Home: "Boards · Executive teams · Senior leaders" and its paragraph run wider, so they take fewer lines and sit lower,
   all of it over the darker hills at the bottom left, with the shade behind them widened to match */
@media (min-width:821px){
  .hero.hero-photo .h-copy{grid-column:1/5;max-width:min(760px,62vw)}
  .hero.hero-photo::after{width:72%;height:52%;background:radial-gradient(ellipse 100% 100% at 0% 100%,rgba(26,26,26,.62) 0%,rgba(26,26,26,.36) 48%,rgba(26,26,26,0) 78%)}
}
/* The scroll arrow, bottom centre of the first screen on home and About Us: it bobs gently, and stands still with reduced motion */
.scroll-down{position:absolute;left:50%;bottom:clamp(14px,2.4vh,26px);transform:translateX(-50%);z-index:2;width:48px;height:48px;display:grid;place-items:center;
  border-radius:50%;color:#fff;background:rgba(26,26,26,.38);box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.75);transition:background .15s}
.scroll-down:hover{background:rgba(26,26,26,.6)}
.scroll-down:focus-visible{outline:3px solid #fff;outline-offset:3px}
.scroll-down svg{animation:v53bob 2.2s ease-in-out infinite}
@keyframes v53bob{0%,100%{transform:translateY(-3px)}50%{transform:translateY(4px)}}
@media (prefers-reduced-motion:reduce){.scroll-down svg{animation:none}html{scroll-behavior:auto}}
/* About Us: the photo and the red stripe together fill the first screen, so the stripe's bottom edge is the bottom of the
   window; the arrow sits at the bottom centre of the photo, just above the stripe */
.fold{display:flex;flex-direction:column;min-height:calc(100vh - var(--top));min-height:calc(100svh - var(--top))}
.fold>.ph-photo{flex:1;position:relative}
.fold>.ph-photo>img,.fold>.ph-photo>picture>img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;min-height:0;object-position:center 30%}
.fold>.ph-photo>.ph-card{position:relative;z-index:1}
.fold>.steps-band{flex:none}
/* Closing band: "move forwards" in Avanti red. Red on the charcoal band is only 2.0 to 1, below the 3 to 1 large text needs,
   so the band is near-black #1A1A1A, where the red is 3.4 to 1 and white is 17 to 1. */
.cta-strip{background:var(--near)}
html:root body .cta-strip h2 em{color:var(--red)}
/* Our People: the LinkedIn link sits under each role, as the "in" mark and the word (shown once links.json has the address) */
.team-li{width:auto;height:44px;margin:10px 0 0;gap:10px;justify-content:flex-start;font-weight:600;font-size:18px}
.team-li svg{width:24px;height:24px}
/* What Colleagues Say: an optional photo beside the name */
.tq .who .tq-ph{width:48px;height:48px;border-radius:50%;object-fit:cover;flex:none}
/* Phones: the paragraph runs higher up the photo, onto lighter sky, so the shade behind it is taller and deeper */
@media (max-width:820px){.hero.hero-photo::after{width:100%;height:72%;background:linear-gradient(0deg,rgba(26,26,26,.72) 0%,rgba(26,26,26,.6) 55%,rgba(26,26,26,0) 100%)}}

/* ---- v54 (Amanda's review 2, 16 Oct 2026) ----
   R2-1: the full stop after "Change" is a round white dot (it was red).
   R2-2 and R2-3: the "Let us help your organisation move forwards" band and the footer take the side strip's charcoal
   (--ink), on every page. Red text on that grey is 2.0 to 1, below the AA minimum even for large text, so "move
   forwards" is white there; white on --ink is 10.4 to 1. */
.h1 .rdot::after{background:#fff}
.cta-strip{background:var(--ink)}
html:root body .cta-strip h2 em{color:#fff}
.foot{background:var(--ink);color:#fff}
.foot .legal{border-top-color:rgba(255,255,255,.22)}
/* the band and the footer are the same charcoal now: a hairline keeps them apart */
.cta-strip+.foot,main+.foot{border-top:1px solid rgba(255,255,255,.18)}

/* ---- v55 (Amanda's review 3, 16 Oct 2026) ----
   R3-1: the full stop after "Change" is gone from the home hero (build.py), so .rdot is no longer used.
   R3-3: on News and Insights and What Colleagues Say, the line under the title starts at the title's left edge. */
.ph.ph-left .lede{grid-column:1/7}

/* ---- v59 (Amanda's review 6, 17 Oct 2026) ----
   R6-1: "move forwards" in the "Let us help your organisation move forwards" band is Avanti red #DE0000, on every page
   with the band. Red on the charcoal (--ink #3A4245) is only 2.0 to 1, under the 3 to 1 that large text needs, so the grey
   is darkened, not the red: the band and the footer under it are a deeper charcoal, #1F2224, where the red is 3.1 to 1
   (the heading is 34px and up, so it is large text), white is 16.0 to 1 and the stone text 12.2 to 1. */
:root{--foot:#1F2224}
.cta-strip{background:var(--foot)}
html:root body .cta-strip h2 em{color:var(--red)}
.foot{background:var(--foot)}

/* ---- v60 (Amanda's review 7, 17 Oct 2026) ----
   R7-1: every footer, Avanti and Academy, is the side strip's grey: the one token --foot, which is --ink (#3A4245), the
   rail's own colour. academy.css sets the Academy footer from the same token and the integrity check fails if the two ever
   differ from the side strip. White on it is 10.4 to 1 and the stone text 8.3 to 1.
   The "Let us help your organisation move forwards" band above the footer keeps the deeper charcoal from R6-1 (--band,
   #1F2224), because the red #DE0000 on the side-strip grey is only 2.0 to 1 and fails AA even for large text; on the band
   it is 3.1 to 1, which passes for the band's large heading. The red itself never changes. */
:root{--foot:var(--ink);--band:#1F2224}
.cta-strip{background:var(--band)}
.foot{background:var(--foot)}

/* ---- v61 (Amanda's review 8, 18 Oct 2026) ----
   R8-1: the "Let us help your organisation move forwards" band is pale stone (#E8E0D0, --cream) with charcoal words
   (#3A4245, 8.0 to 1). "move forwards" stays Avanti red (3.9 to 1, which passes for the band's large heading, 34px and up),
   with no full stop. "Talk to us" is red with white words (5.0 to 1). A hairline keeps the band apart from a section on
   the same stone above it (the Avanti Academy panel on the home page). The footer under it stays the side strip's grey. */
.cta-strip{background:var(--cream);color:var(--ink);border-top:1px solid var(--line)}
.cta-strip h2,.cta-strip .cta-t p{color:var(--ink)}
html:root body .cta-strip h2 em{color:var(--red)}
.cta-strip a{background:var(--red);color:#fff;box-shadow:none}
.cta-strip a:hover{background:#B80000;color:#fff}
.cta-strip a:focus-visible{outline:3px solid var(--near);outline-offset:3px}
.cta-strip+.foot,main+.foot{border-top:0}

/* R8-6: What Colleagues Say. The title is more compact and the cards a little tighter, so the whole row of quotes and its
   buttons fit on the first screen at 1440 by 900 and 1366 by 768. R8-7: pause, previous and next sit under the quotes,
   centred (the pause control stays, as the row turns by itself). */
.ph.ph-tq{padding-bottom:clamp(14px,2.4vh,24px)}
.ph.ph-tq h1{margin-top:clamp(16px,3vh,36px);font-size:clamp(44px,min(5.2vw,9vh),84px)}
.ph.ph-tq .lede{margin-top:clamp(8px,1.6vh,16px);font-size:clamp(17px,1.3vw,20px)}
.tq-row{padding:clamp(12px,2vh,24px) 0 clamp(24px,4vh,48px)}
.tq-list{padding-bottom:12px}
.tq figure{padding:24px 24px 20px}
.tq .who{padding-top:16px}
.tq blockquote{font-size:clamp(18px,1.3vw,20px);line-height:1.28}
.tq-ctrl{margin:8px 0 0}
.tq-btns{justify-content:center}

/* R8-8 and R8-9: a red asterisk marks a required field, with one line at the top of the form saying so */
.req,.form label span.req{color:var(--red);font-weight:700}
.req-note{font-size:16px;color:var(--ink)}

/* ---- v62 (Jon's review 9, 18 Oct 2026) ----
   R9-4 and R9-5: the closing band's heading is longer ("Let us help you, your team, and your organisation move forwards")
   and its line now ends "usually within 24 hours."; the line wraps evenly so "hours." never sits alone.
   R9-1 to R9-3: the Avanti Academy panel loses its "New · Avanti Academy" label and stays pale stone (#E8E0D0, ST6). */
.cta-strip .cta-t p{text-wrap:pretty;max-width:62ch}

/* ---- v63 (Jon's review 10 with Amanda's tenth review, 18 Oct 2026) ----
   R10-0: one rule for every intro paragraph. The paragraph under a page heading (head() in build.py, and the hand-made
   ones on Thank You and the 404 page) is left-aligned, starts under the heading and runs the full content width, capped at
   1100px so lines stay readable on very wide screens. It replaces the old right-hand column (Our People, Thank You) and the
   760px cap; the closing band's line fills its own column the same way. */
.ph .lede,.ph.ph-left .lede,.intro63{grid-column:1/-1;max-width:1100px;margin-left:0;margin-right:auto;text-align:left}
.cta-strip .cta-t p{max-width:1100px}
/* R10-1: What Colleagues Say. Pause, previous and next are smaller to look at (a 36px circle, icon only; each keeps its
   name for screen readers, and pause still says Play or Pause), but each stays a 44 by 44px target, with a focus ring. */
.tq-btn{position:relative;min-width:44px;min-height:44px;width:44px;height:44px;padding:0;gap:0;border:0;background:transparent;box-shadow:none;color:var(--ink);border-radius:50%}
.tq-btn::before{content:"";position:absolute;inset:4px;border-radius:50%;border:1.5px solid var(--ink);background:#fff;transition:background .15s}
.tq-btn svg{position:relative;width:18px;height:18px}
.tq-btn .tq-t{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap}
.tq-btn:hover{background:transparent;color:#fff}
.tq-btn:hover::before{background:var(--ink)}
.tq-play,.tq-play:hover{background:transparent;color:#fff;padding:0}
.tq-play::before{background:var(--ink)}
.tq-play:hover::before{background:var(--near);border-color:var(--near)}
.tq-btn:focus-visible{outline:2px solid var(--near);outline-offset:2px}
.tq-step{gap:4px}
.tq-btns{gap:4px}
@media (max-width:560px){.tq-btn{padding:0}.tq-prev,.tq-next{width:44px}}
@media (prefers-reduced-motion:reduce){.tq-btn::before{transition:none}}
/* The heading font joins "oe" into one letter ("Does" read "Dœs") through a required ligature; switch it off everywhere */
html{font-feature-settings:"rlig" 0}
.anc63{display:block;position:relative;top:-90px;visibility:hidden}

/* ---- v64 (Jon's review 11 with Amanda's eleventh review, 18 Oct 2026) ----
   R11-1: the Avanti Academy panel on the home page takes the About Us page's pale cream (--paper, #F5F3F0, the page
   colour there), so it no longer runs into the pale stone "Let us help you..." band beneath it (--cream, #E8E0D0).
   Charcoal words on it are 9.5 to 1; the red accent words are large text (4.4 to 1). */
.acad-panel{background:var(--paper)}
/* R11-2: "move forwards" is joined by a non-breaking space everywhere, and on desktop "organisation move forwards" stays
   on one line, with the heading a little smaller so it breaks cleanly. "Talk to us" sits at the foot of the band, on the
   right (centred on phones). */
.cta-strip .cta-t{grid-column:1/-1;padding-bottom:0}
.cta-strip h2{font-size:clamp(32px,3.9vw,56px)}
.cta-strip a{grid-column:1/-1;justify-self:end;margin:22px var(--pad) clamp(28px,3vw,38px)}
@media (min-width:821px){.mf64{white-space:nowrap}}
@media (max-width:820px){.cta-strip a{justify-self:center;margin:20px var(--pad) 30px}}

/* v69 (Jon's review 16, R16-6): hero pictures sit in a <picture> (AVIF, WebP, JPEG); it takes no box of its own */
picture.pic{display:contents}

/* v71 (Jon's review 17, R17-2): About Us, the road photo runs down to the red stripe with no grey panel between them. The
   photo is an absolutely placed grid item, so with grid-area 1/1 it only filled the title's grid row (the scroll arrow
   took a second row) and the section's charcoal showed below it. With grid-area auto it fills the whole section. */
.fold>.ph-photo>img,.fold>.ph-photo>picture>img{grid-area:auto}
/* v77 (Jon's review 18, R18-E): the draft banner on the Privacy Notice and Terms, and the notice's text tables */
.ph .draft77{grid-column:1/-1;padding:0 var(--pad);margin-top:30px;max-width:1100px}
.draft77 p{margin:0;padding:14px 18px;border-left:6px solid #DE0000;background:#F5F3F0;color:#1A1A1A;font-size:18px;font-weight:600}
.tbl.tbl77 th,.tbl.tbl77 td,.tbl.tbl77 td:not(:first-child),.tbl.tbl77 th:not(:first-child){text-align:left;vertical-align:top}
.tbl.tbl77 th{text-transform:none;letter-spacing:0}
.prose .tbl.tbl77 td{font-size:18px}
/* v98 (Jon's review 58, B7): The CPD Group's Approved Provider badge in the footer, linked to the register */
.foot .cpd-badge{display:inline-flex;align-items:center}
.foot .cpd-badge img{height:72px;width:auto;display:block;background:#fff}
/* v99 (Jon's review 60, R60-B, R60-C): the Academy's site tour and the free call under the Academy panel */
.ap99{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,4fr);gap:40px;align-items:center;padding:0 var(--pad) 56px}
.tour99{margin:0}
.tour99 video{display:block;width:100%;height:auto;aspect-ratio:16/9;background:#000;border-radius:12px}
.tour99 figcaption{font-size:16px;line-height:1.5;margin-top:10px;color:var(--ink)}
.call99 p{font-size:18px;line-height:1.5;margin-top:14px;color:var(--ink);max-width:28em}
@media (max-width:900px){.ap99{grid-template-columns:1fr;gap:24px}}
/* v100 (Jon's review 61, R61-B.1): on phones a jump to a section stops below the fixed top bar */
@media (max-width:820px){:where([id]){scroll-margin-top:68px}}
/* v100 (Jon's review 63, R63-A): "← How to navigate the Academy" above the call button, beside the site tour */
.blk99-acts{display:flex;flex-direction:column;align-items:flex-start;gap:14px}
.blk99 .btn{text-align:left}
.tour99 video:focus-visible{outline:3px solid var(--red);outline-offset:3px}
/* v102 (Amanda, review 64a, R64a-C): the two buttons beside the site tour are the solid red primary button; dark focus ring */
.blk99 .btn:not(.ghost):focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* v102 (Amanda, review 64a, R64a-D): the CPD Group badge in the home page's closing band, on the right; below the words on a phone */
.cta-strip.cta-cpd{grid-template-columns:minmax(0,1fr) auto}
.cta-strip.cta-cpd .cta-t{grid-column:1;grid-row:1}
.cta-strip.cta-cpd .cta-badge{grid-column:2;grid-row:1;align-self:center;padding:clamp(28px,3vw,38px) var(--pad) 0 0}
.cta-strip.cta-cpd .cta-badge img{height:72px;width:auto;display:block;background:#fff}
.cta-strip.cta-cpd .cta-badge a{display:inline-flex}
.cta-strip.cta-cpd .cta-badge a:focus-visible{outline:3px solid var(--near);outline-offset:3px}
@media (max-width:820px){.cta-strip.cta-cpd{grid-template-columns:1fr}.cta-strip.cta-cpd .cta-badge{grid-column:1;grid-row:auto;padding:20px var(--pad) 0}}
.cta-strip.cta-cpd .cta-badge a,.cta-strip.cta-cpd .cta-badge a:hover{margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;align-self:auto;justify-self:auto}
/* v106 (review 70, R70-4): the tour button arrow points up when the video sits above it (one column, 900px or less) */
.ar106-u{display:none}
@media (max-width:900px){.ar106-l{display:none}.ar106-u{display:inline}}
/* v106 (Jon's review 69, R69-I): on a phone the tour is the 9x16 version above the buttons, no taller than about 75% of the screen */
@media (max-width:900px){.tour99 video{aspect-ratio:9/16;height:min(75vh,177vw);width:auto;max-width:100%;margin:0 auto}}