:root{
  --ink:#1B1E30;          /* body text */
  --ink-deep:#161B30;     /* night navy: masthead, footer, closing strip */
  --pom:#2B2A52;          /* deep dusk violet: button text */
  --paper:#FAF9FC;
  --paper-2:#F1EEF6;      /* lavender tint */
  --slate:#4E5372;
  --rule:#DEDAE8;
  --signal:#9E3A62;       /* dusk rose, accent on light ground */
  --bloom:#E58FAA;        /* dusk pink, accent on dark ground */
  --on-ink:#F7F5FB;
  --on-ink-dim:#D8D3E6;
  --hair:#2E3450;
  --sky-blue:#2E5AA6;
  --dusk:#5E3060;         /* dusk plum: homepage hero */
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:19px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
a{color:inherit}
:focus-visible{outline:3px solid var(--bloom);box-shadow:0 0 0 3px var(--ink);outline-offset:3px;border-radius:2px}

.wrap{max-width:1100px;margin:0 auto;padding:0 28px;width:100%}
@media (max-width:640px){body{font-size:17px}.wrap{padding:0 20px}}
h1,h2,h3{font-family:"Newsreader",Georgia,serif;font-weight:400;letter-spacing:-0.012em;margin:0}

/* ---------- masthead, on every page ---------- */
.masthead{background:var(--ink-deep);color:var(--on-ink)}
.mast-bar{display:flex;justify-content:space-between;align-items:center;
  gap:20px;padding:26px 0;flex-wrap:wrap}
.mark{display:inline-block;text-decoration:none;color:var(--on-ink)}
.mark-name{display:flex;flex-direction:column;line-height:1}
.mark-name{font-family:"Newsreader",Georgia,serif;
  font-size:2rem;letter-spacing:-0.018em}
.mark-name em{font-family:"IBM Plex Sans",sans-serif;font-style:normal;
  font-size:1.2rem;letter-spacing:0.28em;color:var(--bloom);
  margin-top:8px;font-weight:600}
@media (max-width:600px){
  .mark-name{font-size:1.6rem}
  .mark-name em{font-size:0.9rem;letter-spacing:0.26em}
}
.mast-bar nav{display:flex;gap:8px 22px;font-size:1.05rem;color:var(--on-ink-dim);flex-wrap:wrap}
.mast-bar nav a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;border-bottom:2px solid transparent}
.mast-bar nav a:hover{color:var(--on-ink);border-bottom-color:var(--bloom)}
.mast-bar nav a[aria-current="page"]{color:var(--on-ink);border-bottom-color:var(--bloom)}

/* ---------- page banner for inner pages ---------- */
.banner{background:var(--ink-deep);color:var(--on-ink);padding:18px 0 82px}
.banner h1{font-size:clamp(2.1rem,5.2vw,3.3rem);line-height:1.1;
  max-width:18ch;color:var(--on-ink)}
.banner p{margin:24px 0 0;max-width:60ch;color:var(--on-ink-dim);font-size:1.1rem}

/* ---------- home hero ---------- */
.hero{background:var(--dusk);color:var(--on-ink);padding:72px 0 90px}
.hero h1{font-size:clamp(2.4rem,6vw,4.1rem);line-height:1.08;
  max-width:15ch;color:var(--on-ink)}
.hero p{margin:26px 0 0;max-width:56ch;color:var(--on-ink);font-size:1.16rem}
.hero p + p{margin-top:16px;color:var(--on-ink-dim)}
.hero .cta{margin-top:36px}
.hero p b{color:var(--on-ink);font-weight:500}

/* ---------- sections ---------- */
main{flex:1 0 auto}
section{padding:74px 0}
.tint{background:var(--paper-2)}
.section-head{font-size:clamp(1.55rem,3.4vw,2.1rem);line-height:1.2;
  max-width:23ch;margin-bottom:26px}
.lede{color:var(--slate);max-width:64ch}
.lede + .lede{margin-top:16px}

/* ---------- services ---------- */
.svc{border-top:1px solid var(--rule);padding:34px 0;display:grid;gap:10px 44px}
@media (min-width:820px){.svc{grid-template-columns:200px 1fr}}
.svc:last-of-type{border-bottom:1px solid var(--rule)}
.svc-meta{color:var(--slate);font-size:1rem}
.svc-meta b{display:block;color:var(--signal);font-weight:600;
  font-size:1.05rem;margin-bottom:2px}
.svc h3{font-size:1.6rem;line-height:1.25;margin-bottom:10px}
.svc p{margin:0 0 14px;color:var(--slate);max-width:58ch}
.svc p:last-child{margin-bottom:0}

/* ---------- two columns ---------- */
.split{display:grid;gap:40px}
@media (min-width:820px){.split{grid-template-columns:1fr 1fr;gap:64px}}
.col h3{font-size:1.25rem;margin-bottom:16px}
.col ul{margin:0;padding:0;list-style:none}
.col li{padding:11px 0;border-top:1px solid var(--rule);
  color:var(--slate);font-size:1rem}
.col li:first-child{border-top:none;padding-top:0}

/* ---------- about ---------- */
.founder{display:grid;gap:30px;margin-top:48px;
  border-top:1px solid var(--rule);padding-top:40px}
@media (min-width:760px){.founder{grid-template-columns:230px 1fr;gap:52px}}
.portrait{aspect-ratio:1/1;background:var(--paper-2);border:1px solid var(--rule);
  overflow:hidden;max-width:230px}
.portrait img{width:100%;height:100%;object-fit:cover;display:block}
.founder h3{font-size:1.45rem;margin-bottom:3px}
.founder .role{color:var(--signal);font-size:1rem;font-weight:600;margin-bottom:18px}
.founder p{margin:0 0 14px;color:var(--slate);max-width:60ch}
.founder p:last-child{margin-bottom:0}

.sectors{margin:34px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:10px}
.sectors li{border:1px solid var(--rule);padding:7px 14px;
  font-size:0.88rem;color:var(--slate)}

/* ---------- contact ---------- */
.contact-grid{display:grid;gap:40px}
@media (min-width:820px){.contact-grid{grid-template-columns:1.1fr 1fr;gap:70px}}
.contact-block h3{font-size:1.2rem;margin-bottom:8px}
.contact-block p{margin:0 0 26px;color:var(--slate);max-width:48ch}
.detail{border-top:1px solid var(--rule);padding:16px 0;color:var(--slate);font-size:1rem}
.detail b{display:block;color:var(--ink);font-family:"Newsreader",Georgia,serif;
  font-weight:400;font-size:1.1rem;margin-bottom:2px}
.detail a{color:var(--ink)}

/* ---------- call to action strip ---------- */
.strip{background:var(--ink-deep);color:var(--on-ink);padding:70px 0}
.strip h2{color:var(--on-ink);font-size:clamp(1.6rem,3.8vw,2.4rem);max-width:20ch}
.strip p{color:var(--on-ink-dim);max-width:54ch;margin:20px 0 32px}
.cta{display:inline-block;background:var(--on-ink);color:var(--pom);text-decoration:none;
  font-weight:600;font-size:1.05rem;padding:15px 28px;min-height:48px;border-radius:2px}
.cta:hover{background:#fff}
.cta.ghost{background:transparent;color:var(--on-ink);
  border:1px solid #6A6F92;margin-left:10px}
.cta.ghost:hover{border-color:var(--bloom);background:transparent}
@media (max-width:520px){.cta.ghost{margin:12px 0 0;display:block;text-align:center}}

.link-on-ink{color:var(--bloom);text-decoration:none;
  border-bottom:1px solid transparent;font-weight:500}
.link-on-ink:hover{border-bottom-color:var(--bloom)}

/* ---------- footer ---------- */
footer{background:var(--ink-deep);color:var(--on-ink-dim);font-size:0.95rem;
  padding:30px 0 40px;flex-shrink:0}
footer .wrap{border-top:1px solid var(--hair);padding-top:22px;
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}
footer a{color:var(--on-ink-dim)}
footer a:hover{color:var(--on-ink)}

/* ---------- notes index ---------- */
.notes{margin:0;padding:0;list-style:none}
.note-item{border-top:1px solid var(--rule);padding:30px 0;display:grid;gap:8px 44px}
@media (min-width:820px){.note-item{grid-template-columns:150px 1fr}}
.note-item:last-child{border-bottom:1px solid var(--rule)}
.note-date{color:var(--slate);font-size:1rem}
.note-item h3{font-size:1.4rem;margin-bottom:8px}
.note-item h3 a{text-decoration:none;border-bottom:1px solid transparent}
.note-item h3 a:hover{border-bottom-color:var(--signal)}
.note-item p{margin:0;color:var(--slate);max-width:58ch}

/* ---------- a single note ---------- */
.note-body{max-width:68ch;line-height:1.65}
.note-meta{color:var(--slate);font-size:1rem;margin:0 0 34px;
  padding-bottom:20px;border-bottom:1px solid var(--rule)}
.note-body h2{font-size:1.55rem;margin:44px 0 14px}
.note-body h3{font-size:1.2rem;margin:34px 0 10px}
.note-body p{color:var(--slate);margin:0 0 20px}
.note-body ul,.note-body ol{color:var(--slate);padding-left:22px;margin:0 0 20px}
.note-body li{margin-bottom:8px}
.note-body blockquote{margin:30px 0;padding-left:22px;
  border-left:2px solid var(--signal);
  font-family:"Newsreader",Georgia,serif;font-size:1.25rem;
  line-height:1.45;color:var(--ink)}
.note-body a{color:var(--ink)}
.back{display:inline-block;margin-top:44px;color:var(--slate);
  font-size:1rem;text-decoration:none;
  padding-top:24px;border-top:1px solid var(--rule);width:100%}
.back:hover{color:var(--ink)}

/* ---------- brand lockup ---------- */
.brand{display:grid;grid-template-columns:auto 1fr;column-gap:16px;row-gap:10px;align-items:center}
.brand .mark-icon{width:58px;height:58px;display:block}
.brand .mark-tag{grid-column:1 / -1}
@media (max-width:600px){.brand .mark-icon{width:46px;height:46px}}
.mark-tag{margin:0;color:var(--on-ink-dim);font-size:1rem;line-height:1.35;max-width:30ch}

/* ---------- plain text links (underlined, as GOV.UK) ---------- */
.text-link{color:var(--ink);font-weight:500;text-decoration:underline;
  text-decoration-thickness:1px;text-underline-offset:4px}
.text-link:hover{text-decoration-thickness:3px}
main a:not(.cta):not(.text-link){text-underline-offset:3px}

.strip h2{margin-bottom:30px;line-height:1.2}