/* ============================================================
   4dskills: "The Layer Stack"
   Direction sheet: ~/Clients/4dskills/direction-sheet.md
   Ground is a cool, blue-cast light-table white. Four domain
   colours are ANNOTATION ONLY and never touch a control.
   ============================================================ */

/* ---- fonts: self-hosted, latin subset, metric-matched fallbacks
   measured in headless Chrome 20 Aug 2026, not guessed.
   Newsreader   ref w=3117.20 @400 : Georgia w=3043.70 -> size-adjust 102.41%
                upm 2000 asc 1470 desc 530 gap 0 -> /1.0241 = 71.77% / 25.88%
   Public Sans  ref w=3160.02 @400 : Arial   w=3009.14 -> size-adjust 105.01%
                upm 2000 asc 1900 desc 450 gap 0 -> /1.0501 = 90.47% / 21.43%
---- */
@font-face{font-family:'Newsreader';src:url(f/newsreader.woff2) format('woff2');font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:'Public Sans';src:url(f/publicsans.woff2) format('woff2');font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:'Newsreader Fallback';src:local('Georgia'),local('Times New Roman');size-adjust:102.41%;ascent-override:71.77%;descent-override:25.88%;line-gap-override:0%}
@font-face{font-family:'Public Sans Fallback';src:local('Arial'),local('Helvetica Neue'),local('Helvetica');size-adjust:105.01%;ascent-override:90.47%;descent-override:21.43%;line-gap-override:0%}

:root{
  --paper:#EDEFF2;
  --paper-2:#E3E7EC;
  --card:#F7F8FA;
  --ink:#0F1318;
  --ink-2:#39434E;
  --ink-3:#5A6672;
  --line:#D2D8DE;
  --line-2:#C2CAD2;
  --band:#101820;
  --band-2:#1A242E;
  --on-band:#E8ECEF;
  --on-band-2:#9AA6B2;

  /* the four domains of architecture practice, annotation only */
  --d1:#8A5416; /* certification    ochre    */
  --d2:#5E4F8C; /* business arch.   indigo   */
  --d3:#26647F; /* modelling        steel    */
  --d4:#3C6448; /* capability       moss     */

  --serif:'Newsreader','Newsreader Fallback',Georgia,'Times New Roman',serif;
  --sans:'Public Sans','Public Sans Fallback',Arial,Helvetica,sans-serif;
  --gut:clamp(20px,5vw,64px);
  --max:1200px;
  --rule:1px solid var(--line);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  font-weight:400;letter-spacing:-.003em;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
figure{margin:0}
button{cursor:pointer}
a{color:inherit}
h1,h2,h3{font-family:var(--serif);font-weight:600;letter-spacing:-.018em;margin:0;text-wrap:balance}
p{margin:0 0 1.05em}
:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:2px}

.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:absolute;left:-9999px}
.skip:focus{left:12px;top:12px;z-index:200;background:var(--ink);color:#fff;padding:10px 16px;border-radius:3px}

/* ---------- eyebrow / label type ---------- */
.lab{
  font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink-3);font-feature-settings:"tnum" 1;
}

/* ---------- masthead ---------- */
.mast{
  border-bottom:var(--rule);background:rgba(237,239,242,.94);
  position:sticky;top:0;z-index:60;backdrop-filter:saturate(1.4) blur(8px);
}
.mast .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);min-height:60px;flex-wrap:wrap;padding-block:10px}
.mark{display:flex;align-items:center;gap:11px;text-decoration:none;flex:0 0 auto}
.mark svg{display:block;flex:0 0 auto}
.mark b{font-family:var(--sans);font-weight:800;font-size:19px;letter-spacing:-.032em}
.mark b span{font-weight:300;color:var(--ink-2)}
.nav{
  display:flex;gap:20px;align-items:center;order:3;width:100%;
  overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
  border-top:var(--rule);margin:0 calc(var(--gut)*-1);padding:0 var(--gut);
}
.nav::-webkit-scrollbar{display:none}
.nav a{
  text-decoration:none;font-size:14.3px;font-weight:500;color:var(--ink-2);
  padding:11px 0 9px;border-bottom:1.5px solid transparent;white-space:nowrap;
  transition:color .18s,border-color .18s;
}
.nav a:hover{color:var(--ink);border-color:var(--ink)}
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  background:var(--ink);color:#fff;text-decoration:none;
  font-family:var(--sans);font-size:14.5px;font-weight:600;letter-spacing:-.005em;
  padding:11px 20px;border:1.5px solid var(--ink);border-radius:2px;
  transition:background .18s,color .18s;white-space:nowrap;
}
.btn:hover{background:transparent;color:var(--ink)}
.btn--ghost{background:transparent;color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:#fff}
.btn--onband{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.btn--onband:hover{background:transparent;color:var(--on-band)}
.btn--ghost-onband{background:transparent;color:var(--on-band);border-color:rgba(232,236,239,.4)}
.btn--ghost-onband:hover{background:var(--on-band);color:var(--band);border-color:var(--on-band)}
.mast .btn{margin-left:auto;padding:9px 15px;font-size:13.5px}
@media(min-width:900px){
  .mast .wrap{flex-wrap:nowrap;min-height:70px;padding-block:0}
  .nav{order:0;width:auto;overflow:visible;border-top:0;margin:0 0 0 auto;padding:0;gap:clamp(14px,2.2vw,28px)}
  .nav a{padding:6px 0}
  .mast .btn{margin-left:8px;padding:11px 20px;font-size:14.5px}
}

/* ---------- hero: renders complete with JS disabled ---------- */
.hero{position:relative;background:#0A0E12;color:#fff;overflow:hidden}
.hero__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:1}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(92deg,rgba(6,9,13,.9) 0%,rgba(6,9,13,.78) 38%,rgba(6,9,13,.44) 66%,rgba(6,9,13,.14) 100%),
              linear-gradient(180deg,rgba(6,9,13,.55) 0%,rgba(6,9,13,0) 34%);
}
@media(max-width:899px){
  .hero::after{background:linear-gradient(180deg,rgba(6,9,13,.9) 0%,rgba(6,9,13,.8) 46%,rgba(6,9,13,.9) 100%)}
}
.hero .wrap{position:relative;z-index:2;padding-block:clamp(64px,11vw,132px) clamp(40px,6vw,64px)}
.hero__eyebrow{color:#96A3B0;text-shadow:0 1px 16px rgba(0,0,0,.8);margin-bottom:clamp(20px,3vw,30px);display:flex;flex-wrap:wrap;gap:10px 18px;align-items:center}
.hero__eyebrow i{font-style:normal;display:inline-flex;align-items:center;gap:8px}
.hero__eyebrow i::before{content:"";width:9px;height:9px;flex:0 0 auto;background:currentColor}
.dot1{color:#C08A45}.dot2{color:#8E7FC0}.dot3{color:#4E93B4}.dot4{color:#5D9370}
h1{
  font-size:clamp(2.45rem,6.1vw,4.9rem);line-height:1.02;letter-spacing:-.028em;
  font-weight:600;margin:0 0 clamp(20px,3vw,30px);max-width:16.5ch;color:#fff;
  font-variation-settings:"opsz" 72;text-shadow:0 2px 30px rgba(0,0,0,.6);
}
h1 em{font-style:normal;color:#C6D0DA;font-weight:400}
.hero__sub{
  font-size:clamp(1.02rem,1.7vw,1.24rem);line-height:1.6;color:#C2CCD6;
  max-width:52ch;margin:0 0 clamp(28px,4vw,38px);font-weight:400;text-shadow:0 1px 20px rgba(0,0,0,.7);
}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px}
.hero__strip{
  position:relative;z-index:2;border-top:1px solid rgba(255,255,255,.14);
  background:rgba(8,11,15,.55);
}
.hero__strip .wrap{
  display:grid;gap:1px;padding:0;
  grid-template-columns:1fr;background:rgba(255,255,255,.1);
}
.hero__strip dl{margin:0;background:#0C1116;padding:18px var(--gut)}
.hero__strip dt{color:#8896A4;font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.hero__strip dd{margin:5px 0 0;font-size:15.5px;color:#DDE4EA;font-weight:500}
@media(min-width:760px){
  .hero__strip .wrap{grid-template-columns:repeat(4,1fr);padding-inline:0}
  .hero__strip dl{padding:20px clamp(18px,2.4vw,28px)}
  .hero__strip dl:first-child{padding-left:var(--gut)}
  .hero__strip dl:last-child{padding-right:var(--gut)}
}

/* ---------- generic section ---------- */
section{padding-block:clamp(56px,8vw,104px)}
.sec-head{max-width:64ch;margin-bottom:clamp(32px,4.5vw,54px)}
.sec-head .lab{display:block;margin-bottom:14px}
h2{font-size:clamp(1.85rem,3.5vw,2.95rem);line-height:1.1;font-variation-settings:"opsz" 44}
.sec-head p{margin-top:16px;color:var(--ink-2);font-size:clamp(1rem,1.35vw,1.12rem);max-width:56ch}

/* hairline that draws itself, pure CSS, no JS, visible by default */
.hr{height:1px;background:var(--line-2);border:0;margin:0;transform-origin:left}
@supports (animation-timeline:view()){
  @media(prefers-reduced-motion:no-preference){
    .hr{animation:draw linear both;animation-timeline:view();animation-range:entry 10% cover 26%}
    @keyframes draw{from{transform:scaleX(0)}to{transform:scaleX(1)}}
  }
}

/* ---------- the credential ---------- */
.cred{border-bottom:var(--rule)}
.cred__grid{display:grid;gap:clamp(28px,4vw,56px)}
@media(min-width:940px){.cred__grid{grid-template-columns:1.35fr .95fr;align-items:start}}
.pull{
  font-family:var(--serif);font-weight:500;font-size:clamp(1.6rem,3.1vw,2.5rem);line-height:1.22;
  font-weight:500;letter-spacing:-.018em;margin:0 0 26px;font-variation-settings:"opsz" 40;
}
.pull b{font-weight:600}
.cred p{color:var(--ink-2)}
.cred__side{
  background:var(--card);border:var(--rule);padding:clamp(22px,3vw,30px);
}
.cred__side dl{margin:0;display:grid;gap:0}
.cred__side dt{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);padding-top:15px}
.cred__side dd{margin:4px 0 15px;font-size:15.5px;line-height:1.5;border-bottom:var(--rule);padding-bottom:15px}
.cred__side dd:last-of-type{border-bottom:0;margin-bottom:0}
.cred__side dl>dt:first-child{padding-top:0}

/* ---------- placeholder object ---------- */
.ph{
  border:1.5px dashed var(--line-2);background:repeating-linear-gradient(-45deg,transparent,transparent 9px,rgba(107,118,131,.055) 9px,rgba(107,118,131,.055) 18px);
  padding:clamp(18px,2.5vw,26px);position:relative;
}
.ph::before{
  content:"PLACEHOLDER";position:absolute;top:0;left:0;transform:translateY(-50%);
  margin-left:16px;background:var(--paper);padding:0 8px;
  font-size:10.5px;font-weight:700;letter-spacing:.16em;color:var(--ink-3);
}
.ph--card::before{background:var(--card)}
.ph--band::before{background:var(--band);color:var(--on-band-2)}
.ph p:last-child{margin-bottom:0}
.ph h3{font-size:1.06rem;margin:0 0 9px;font-family:var(--sans);font-weight:700;letter-spacing:-.01em}
.ph p{font-size:14.5px;color:var(--ink-2);line-height:1.55}

/* ---------- the four tracks (layer stack) ---------- */
.tracks{background:var(--paper-2);border-block:var(--rule)}
.track{
  display:grid;gap:clamp(16px,2.5vw,40px);
  padding-block:clamp(28px,3.6vw,42px);border-top:var(--rule);
  position:relative;
}
.track:first-of-type{border-top:0}
@media(min-width:900px){.track{grid-template-columns:minmax(230px,.72fr) 1.6fr;align-items:start}}
.track__no{
  display:flex;align-items:baseline;gap:12px;margin-bottom:11px;
}
.track__no b{
  font-family:var(--sans);font-size:12px;font-weight:800;letter-spacing:.1em;
  color:#fff;background:var(--tc);padding:3px 7px;border-radius:2px;font-feature-settings:"tnum" 1;
}
.track__no span{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--tc)}
.track h3{font-size:clamp(1.32rem,2.15vw,1.72rem);line-height:1.17;margin:0 0 10px;font-variation-settings:"opsz" 28}
.track__blurb{font-size:15.2px;color:var(--ink-2);line-height:1.56;margin:0;max-width:40ch}
.track ul{list-style:none;margin:0;padding:0;border-top:var(--rule)}
.track li{
  display:grid;gap:2px 18px;padding:13px 0;border-bottom:var(--rule);
  grid-template-columns:1fr auto;align-items:baseline;
}
.track li b{font-weight:600;font-size:15.6px;letter-spacing:-.008em}
.track li i{
  font-style:normal;font-size:13px;color:var(--ink-3);grid-column:1/-1;
}
.track li span{
  font-size:14px;font-weight:600;color:var(--ink-2);text-align:right;
  font-feature-settings:"tnum" 1;white-space:nowrap;
}
.track li span.tbc{color:var(--ink-3);font-weight:500;font-style:italic}

/* ---------- schedule ---------- */
.sched__scroll{overflow-x:auto;border:var(--rule);background:var(--card);-webkit-overflow-scrolling:touch}
table{border-collapse:collapse;width:100%;min-width:720px;font-size:14.6px}
caption{text-align:left;padding:0 0 14px;font-size:13.5px;color:var(--ink-3)}
th,td{padding:13px 16px;text-align:left;border-bottom:var(--rule);vertical-align:baseline}
thead th{
  font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1.5px solid var(--line-2);white-space:nowrap;background:var(--paper-2);
}
tbody tr:last-child td{border-bottom:0}
tbody tr{transition:background .15s}
tbody tr:hover{background:#EFF2F5}
td.d{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:500}
td.p{font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums;text-align:right;font-weight:600;white-space:nowrap}
td.p em{font-style:italic;font-weight:500;color:var(--ink-3)}
td.n b{font-weight:600}
.tag{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  padding:3px 7px;border:1px solid currentColor;border-radius:2px;white-space:nowrap;
}
.tag--f2f{color:var(--d1)}
.tag--web{color:var(--d3)}
.tag--el{color:var(--d4)}
.book{
  font-size:13.5px;font-weight:600;text-decoration:none;border-bottom:1.5px solid var(--line-2);
  white-space:nowrap;transition:border-color .18s;
}
.book:hover{border-color:var(--ink)}
.sched__note{margin-top:22px;display:grid;gap:16px}
@media(min-width:820px){.sched__note{grid-template-columns:1fr 1fr}}

/* ---------- delivery ---------- */
.cols{display:grid;gap:clamp(20px,3vw,32px)}
@media(min-width:820px){.cols--3{grid-template-columns:repeat(3,1fr)}}
.col{border-top:1.5px solid var(--ink);padding-top:20px}
.col h3{font-family:var(--sans);font-weight:700;font-size:1.1rem;letter-spacing:-.012em;margin:0 0 9px}
.col p{font-size:15.2px;color:var(--ink-2);margin:0;line-height:1.56}

/* ---------- full-bleed plate ---------- */
.plate{position:relative;background:var(--band);color:var(--on-band);overflow:hidden;border-block:var(--rule)}
.plate img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.plate::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(16,24,32,.93) 0%,rgba(16,24,32,.7) 50%,rgba(16,24,32,.3) 100%)}
.plate .wrap{position:relative;z-index:2;padding-block:clamp(64px,9vw,120px)}
.plate blockquote{margin:0;max-width:30ch}
.plate blockquote p{
  font-family:var(--serif);font-size:clamp(1.5rem,3.2vw,2.5rem);line-height:1.2;
  font-weight:500;letter-spacing:-.018em;color:#fff;margin:0 0 20px;font-variation-settings:"opsz" 40;
}
.plate cite{font-style:normal;font-size:13.5px;color:var(--on-band-2);display:block;max-width:44ch;line-height:1.55}

/* ---------- corporate band ---------- */
.corp{background:var(--band);color:var(--on-band);border-top:var(--rule)}
.corp h2{color:#fff}
.corp .sec-head p{color:var(--on-band-2)}
.corp .lab{color:var(--on-band-2)}
.corp__grid{display:grid;gap:clamp(30px,4vw,56px)}
@media(min-width:960px){.corp__grid{grid-template-columns:1fr 1.05fr;align-items:start}}
.corp__list{list-style:none;margin:0;padding:0}
.corp__list li{
  padding:15px 0 15px 30px;border-bottom:1px solid rgba(255,255,255,.13);
  position:relative;font-size:15.4px;color:#CCD5DD;line-height:1.55;
}
.corp__list li:last-child{border-bottom:0}
.corp__list li::before{
  content:"";position:absolute;left:0;top:23px;width:14px;height:1.5px;background:var(--on-band-2);
}
.corp__list b{color:#fff;font-weight:600;display:block;margin-bottom:2px;font-size:15.6px}
form{background:var(--band-2);border:1px solid rgba(255,255,255,.14);padding:clamp(22px,3vw,32px)}
.fr{display:grid;gap:16px}
@media(min-width:560px){.fr--2{grid-template-columns:1fr 1fr}}
label{display:block;font-size:11.5px;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--on-band-2);margin-bottom:7px}
input,select,textarea{
  width:100%;background:#0C141B;border:1px solid rgba(255,255,255,.2);color:#fff;
  font-family:inherit;font-size:15.4px;padding:11px 13px;border-radius:2px;
}
input::placeholder,textarea::placeholder{color:#78868F}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#8E9BA8 50%),linear-gradient(135deg,#8E9BA8 50%,transparent 50%);background-position:calc(100% - 19px) 21px,calc(100% - 13px) 21px;background-size:6px 6px;background-repeat:no-repeat}
textarea{resize:vertical;min-height:96px}
input:focus,select:focus,textarea:focus{outline:2px solid var(--on-band);outline-offset:1px;border-color:transparent}
.form-note{font-size:12.6px;color:#8A97A4;margin:14px 0 0;line-height:1.5}
form .btn{margin-top:18px;width:100%}

/* ---------- quotes ---------- */
.says{display:grid;gap:clamp(20px,3vw,28px)}
@media(min-width:880px){.says{grid-template-columns:repeat(3,1fr)}}
.say{border-top:1.5px solid var(--ink);padding-top:20px;display:flex;flex-direction:column}
.say p{
  font-family:var(--serif);font-size:1.075rem;line-height:1.48;color:var(--ink);
  margin:0 0 16px;font-weight:400;font-variation-settings:"opsz" 20;
}
.say footer{margin-top:auto;font-size:12.8px;color:var(--ink-3);line-height:1.5}
.say footer b{display:block;color:var(--ink-2);font-weight:600;font-size:13.4px}

/* ---------- title block (grafted from runner-up) ---------- */
.tb{
  display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line);
  border:var(--rule);margin-top:clamp(34px,4.5vw,52px);
}
@media(min-width:700px){.tb{grid-template-columns:repeat(4,1fr)}}
.tb div{background:var(--paper);padding:11px 14px}
.tb span{display:block;font-size:10.5px;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-3)}
.tb b{display:block;font-size:13.4px;font-weight:600;margin-top:3px;font-feature-settings:"tnum" 1}
.corp .tb{border-color:rgba(255,255,255,.15);background:rgba(255,255,255,.15)}
.corp .tb div{background:var(--band)}
.corp .tb span{color:#7E8B98}
.corp .tb b{color:#CCD5DD}

/* ---------- footer ---------- */
.foot{background:var(--paper-2);border-top:var(--rule);padding-block:clamp(44px,6vw,68px) 30px;font-size:14.4px}
.foot__grid{display:grid;gap:clamp(26px,3.5vw,44px)}
@media(min-width:820px){.foot__grid{grid-template-columns:1.3fr 1fr 1fr}}
.foot h3{font-size:11.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3);margin:0 0 13px}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin-bottom:8px}
.foot a{text-decoration:none;color:var(--ink-2);border-bottom:1px solid transparent;transition:border-color .18s}
.foot a:hover{border-color:var(--ink-2)}
.foot p{color:var(--ink-2);margin:0 0 10px;max-width:44ch;line-height:1.55}
.legal{margin-top:clamp(30px,4vw,44px);padding-top:22px;border-top:var(--rule);font-size:12.5px;color:var(--ink-3);line-height:1.62}
.legal p{color:var(--ink-3);font-size:12.5px;max-width:none;margin:0 0 9px}

.lms{grid-template-columns:1fr}
@media(min-width:900px){.lms{grid-template-columns:.95fr 1.05fr}}

@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ============================================================
   BRIGHTENING PASS - 14 Sep 2026
   Client note, Loom 00:48 / 04:58 / 07:13: the concept reads dark and dull,
   he wants it brighter. Build brief names red, yellow, green and blue and
   says "No dark colors." So: the ground goes up, the near-black bands go,
   and the four domain colours become the four he named. Contrast checked.
   ============================================================ */
:root{
  --paper:#F7F9FC;          /* was #EDEFF2 */
  --paper-2:#EDF1F7;        /* was #E3E7EC */
  --card:#FFFFFF;           /* was #F7F8FA */
  --ink:#16202B;            /* was #0F1318, softened off true black */
  --ink-2:#3D4B5A;
  --ink-3:#5F6E7E;
  --line:#DCE3EB;
  --line-2:#C6D0DB;

  /* bands: were #101820 near-black. Now a bright, saturated blue that reads
     as colour rather than as shadow. White on this is 6.4:1. */
  --band:#0B5FD6;
  --band-2:#0A54BE;
  --on-band:#FFFFFF;
  --on-band-2:#CFE0FA;

  /* the four domains, and the four colours the brief asked for.
     -x variants are the bright fill, the base is the text-safe tone. */
  --d1:#0B5FD6;  --d1-x:#2E86FF;   /* certification   blue   */
  --d2:#A45B00;  --d2-x:#FFB020;   /* business arch.  yellow */
  --d3:#0F7A4A;  --d3-x:#18B268;   /* modelling       green  */
  --d4:#C1272D;  --d4-x:#F0454B;   /* capability      red    */

  --accent:#0B5FD6;
}

/* the masthead tracks the brighter ground */
.mast{background:rgba(247,249,252,.92)}

/* primary controls become the blue rather than near-black ink */
.btn{background:var(--accent);border-color:var(--accent);color:#fff}
.btn:hover{background:transparent;color:var(--accent)}
.btn--ghost{background:transparent;color:var(--accent);border-color:var(--accent)}
.btn--ghost:hover{background:var(--accent);color:#fff}
.btn--onband{background:#fff;color:var(--band);border-color:#fff}
.btn--onband:hover{background:transparent;color:#fff}
:focus-visible{outline-color:var(--accent)}

/* hero and imagery: lift it, he asked for a brighter image */
.hero__img,.figure img{filter:saturate(1.08) brightness(1.06)}

/* The concept had exactly one h1 and it sat on the dark hero, so the global
   rule painted every h1 white. Inner pages have an h1 on paper. Scope it. */
.hero h1{color:#fff}
h1{color:var(--ink);text-shadow:none}
.phead h1{color:var(--ink);text-shadow:none;max-width:22ch;font-variation-settings:"opsz" 48}
.crumb b{color:var(--ink-2);font-weight:600}

/* ---- THE HERO, INVERTED ----
   Loom 00:26: "I would like to have a slightly brighter image" and 00:48
   "I think it's quite dark". The new hero photograph is high-key daylight with
   the four layer plates in his four colours, so the dark scrim and the white
   type that went with it have to go. Text is now ink on light, and the scrim
   is a white wash that keeps the left third readable at every width. */
.hero{background:var(--paper);color:var(--ink)}
.hero::after{
  background:linear-gradient(92deg,rgba(247,249,252,.96) 0%,rgba(247,249,252,.9) 30%,rgba(247,249,252,.42) 55%,rgba(247,249,252,0) 78%),
             linear-gradient(180deg,rgba(247,249,252,.45) 0%,rgba(247,249,252,0) 28%);
}
@media(max-width:899px){
  /* the photograph is high-key, so the phone wash can be lighter than the
     concept's and still keep ink text well clear of AA */
  .hero::after{background:linear-gradient(180deg,rgba(247,249,252,.9) 0%,rgba(247,249,252,.76) 48%,rgba(247,249,252,.9) 100%)}
}
.hero h1{color:var(--ink);text-shadow:none}
.hero h1 em{color:var(--ink-3)}
.hero__sub{color:var(--ink-2);text-shadow:none}
.hero__eyebrow{color:var(--ink-3);text-shadow:none}
.dot1{color:var(--d1)}.dot2{color:var(--d2)}.dot3{color:var(--d3)}.dot4{color:var(--d4)}
.hero .btn--onband{background:var(--accent);color:#fff;border-color:var(--accent)}
.hero .btn--onband:hover{background:transparent;color:var(--accent)}
.hero .btn--ghost-onband{background:transparent;color:var(--ink);border-color:var(--line-2)}
.hero .btn--ghost-onband:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.hero__strip{border-top:1px solid var(--line);background:rgba(255,255,255,.7)}
.hero__strip .wrap{background:var(--line)}
.hero__strip dl{background:#fff}
.hero__strip dt{color:var(--ink-3)}
.hero__strip dd{color:var(--ink)}

/* the full-bleed plate had a hardcoded near-black wash over the photograph.
   The photograph is now a white massing model, so the wash becomes the brand
   blue: still a change of gear from the paper, but bright rather than heavy.
   White on this blue is 6.4:1. */
.plate img{opacity:.9}
.plate::after{background:linear-gradient(90deg,rgba(11,95,214,.95) 0%,rgba(11,95,214,.8) 46%,rgba(11,95,214,.3) 100%)}
@media(max-width:760px){
  .plate::after{background:linear-gradient(180deg,rgba(11,95,214,.94) 0%,rgba(11,95,214,.88) 100%)}
}

/* ============================================================
   COMPONENTS the concept never needed: it was one page.
   ============================================================ */

/* ---------- breadcrumb ---------- */
.crumb{font-size:13px;color:var(--ink-3);padding:18px 0 0}
.crumb a{color:var(--ink-3);text-decoration:none;border-bottom:1px solid var(--line-2)}
.crumb a:hover{color:var(--accent);border-color:var(--accent)}
.crumb span{padding:0 7px;color:var(--line-2)}

/* ---------- page head ---------- */
.phead{padding:34px 0 30px;border-bottom:var(--rule)}
.phead h1{font-size:clamp(31px,5.2vw,54px);line-height:1.08;margin:12px 0 0}
.phead .stand{font-size:clamp(17px,2vw,20.5px);color:var(--ink-2);max-width:64ch;margin:16px 0 0;font-family:var(--sans)}
.phead__meta{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}

/* ---------- domain chip ---------- */
.chip{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;
  padding:5px 11px;border-radius:2px;background:var(--card);border:1px solid var(--line);color:var(--ink-2)}
.chip i{width:9px;height:9px;border-radius:1px;display:block;flex:0 0 auto}
.chip--d1 i{background:var(--d1-x)} .chip--d2 i{background:var(--d2-x)}
.chip--d3 i{background:var(--d3-x)} .chip--d4 i{background:var(--d4-x)}

/* ---------- generic prose ---------- */
.prose{max-width:70ch;font-size:17.4px}
.prose h2{font-size:clamp(23px,3vw,31px);margin:44px 0 14px}
.prose h3{font-size:clamp(19px,2.2vw,23px);margin:32px 0 10px}
.prose ul{padding-left:20px;margin:0 0 1.1em}
.prose li{margin:0 0 .5em}
.prose a{color:var(--accent)}
/* .prose a is more specific than .btn, so a button inside prose would come out
   blue on blue. Caught by shot.mjs, not by eye. */
.prose a.btn{color:#fff}
.prose a.btn:hover{color:var(--accent)}
.prose a.btn--ghost{color:var(--accent)}
.prose a.btn--ghost:hover{color:#fff}

/* ---------- two column: content + rail ---------- */
.split{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:clamp(26px,4vw,60px);
  align-items:start;padding:40px 0 64px}
@media (max-width:900px){.split{grid-template-columns:1fr;padding-bottom:44px}}
.rail{position:sticky;top:86px;display:grid;gap:16px}
@media (max-width:900px){.rail{position:static}}
.rail__card{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:22px}
.rail__card h3{font-family:var(--sans);font-size:14px;font-weight:700;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-3);margin:0 0 12px}
.rail dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 14px;font-size:14.6px}
.rail dt{color:var(--ink-3)}
.rail dd{margin:0;font-weight:600}
.price{font-family:var(--serif);font-size:34px;font-weight:600;letter-spacing:-.02em;line-height:1}
.price small{font-family:var(--sans);font-size:13px;font-weight:500;color:var(--ink-3);display:block;margin-top:6px;letter-spacing:0}
.price--ask{font-size:22px;line-height:1.3}

/* ---------- course cards ---------- */
.cgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px;margin-top:22px}
.ccard{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:24px;
  display:flex;flex-direction:column;gap:11px;text-decoration:none;color:inherit;
  border-top:3px solid var(--line-2);transition:border-color .18s,box-shadow .18s,transform .18s}
.ccard:hover{box-shadow:0 8px 26px rgba(16,32,48,.08);transform:translateY(-2px)}
.ccard--d1{border-top-color:var(--d1-x)} .ccard--d2{border-top-color:var(--d2-x)}
.ccard--d3{border-top-color:var(--d3-x)} .ccard--d4{border-top-color:var(--d4-x)}
.ccard--d1:hover{border-color:var(--d1-x)} .ccard--d2:hover{border-color:var(--d2-x)}
.ccard--d3:hover{border-color:var(--d3-x)} .ccard--d4:hover{border-color:var(--d4-x)}
.ccard h3{font-size:20.5px;line-height:1.25;margin:0}
.ccard p{margin:0;font-size:15.2px;color:var(--ink-2)}
.ccard__foot{margin-top:auto;padding-top:13px;border-top:1px dashed var(--line);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13.6px;color:var(--ink-3);font-feature-settings:"tnum" 1}
.ccard__go{font-weight:700;color:var(--accent)}

/* ---------- domain section head ---------- */
.dhead{display:flex;align-items:baseline;gap:14px;margin:52px 0 0;padding-top:22px;border-top:var(--rule)}
.dhead__no{font-family:var(--sans);font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--ink-3)}
.dhead h2{font-size:clamp(22px,3vw,30px)}
.dhead__bar{height:4px;width:54px;border-radius:2px;align-self:center}

/* ---------- enquiry form ----------
   The concept styled a bare `form` for the one dark-band form it had. These
   forms sit on paper, so the bare rule has to be undone, not inherited. */
.form{display:grid;gap:14px;background:transparent;border:0;padding:0}
.form label{display:block;font-size:13.6px;font-weight:600;color:var(--ink-2);
  margin-bottom:5px;text-transform:none;letter-spacing:0}
.form .opt{font-weight:400;color:var(--ink-3)}
.form input,.form textarea,.form select{
  width:100%;font:inherit;font-size:16px;color:var(--ink);background:#fff;
  border:1.5px solid var(--line-2);border-radius:3px;padding:11px 13px}
.form textarea{min-height:104px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.form button{width:100%;font-size:15.5px;padding:13px 20px}
.form__note{font-size:12.8px;color:var(--ink-3);line-height:1.5;margin:0}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ---------- trainers ---------- */
.tgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px;margin-top:24px}
.tcard{background:var(--card);border:1px solid var(--line);border-radius:3px;padding:22px}
.tcard h3{font-size:19px;margin:0 0 4px}
.tcard .role{font-size:13px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;color:var(--accent);margin:0 0 10px}
.tcard p{font-size:15px;color:var(--ink-2);margin:0}

/* ---------- news ---------- */
.nlist{display:grid;gap:2px;margin-top:26px;border-top:var(--rule)}
.nitem{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:20px 0;border-bottom:var(--rule);
  text-decoration:none;color:inherit;align-items:baseline}
@media (max-width:620px){.nitem{grid-template-columns:1fr;gap:6px}}
.nitem:hover h3{color:var(--accent)}
.nitem time{font-size:13.4px;color:var(--ink-3);font-feature-settings:"tnum" 1}
.nitem h3{font-size:20px;margin:0 0 5px;transition:color .18s}
.nitem p{margin:0;font-size:15.2px;color:var(--ink-2)}

/* ---------- placeholder, honest and visible ---------- */
.ph--inline{display:inline-block;border:1px dashed var(--line-2);background:var(--paper-2);
  color:var(--ink-3);font-size:13px;padding:3px 9px;border-radius:2px}

/* ---------- title-block strip, carried from the concept ---------- */
.tblock{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);background:var(--card);
  margin:46px 0 0;font-size:12.4px;font-feature-settings:"tnum" 1}
.tblock div{padding:11px 16px;border-right:1px solid var(--line);color:var(--ink-3)}
.tblock div:last-child{border-right:0}
.tblock b{color:var(--ink);font-weight:600}