:root{
  color-scheme:light;
  --purple:#6E1F7C;--purple-dk:#531660;--orange:#D88020;--ink:#2B1533;--mist:#F6EFF8;--line:#E3D3E8;--muted:#5E4B66;--white:#fff;
  --ok-bg:#E7F6EC;--ok-line:#2E7D4F;--ok-text:#14532D;--err-bg:#FDECEC;--err-line:#B42318;--err-text:#7A1A12;
}
html{scroll-padding-top:90px;scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--white);color:var(--ink);font:400 17px/1.65 "Open Sans",system-ui,sans-serif}
h1,h2,h3,h4,.word,.num{font-family:"Source Sans 3","Segoe UI",system-ui,sans-serif;margin:0;color:var(--purple)}
h1{font-weight:700;font-size:clamp(38px,5.6vw,68px);line-height:1.05;letter-spacing:-.02em}
h2{font-weight:700;font-size:clamp(30px,4.4vw,44px);line-height:1.12;letter-spacing:-.015em}
h3{font-weight:700;font-size:23px;line-height:1.25}
p{margin:0}
a{color:var(--purple)}
a:hover{color:var(--purple-dk)}
:focus-visible{outline:3px solid var(--orange);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--purple);color:#fff;padding:10px 16px;border-radius:8px;z-index:50}
.skip:focus{left:8px}
img{max-width:100%;height:auto}

/* layout */
.sec{padding:76px max(24px,calc((100% - 1120px)/2))}
.sec.mist{background:var(--mist)}
.sec.dark{background:var(--ink);color:#fff}
.sec.dark h2,.sec.dark h3{color:#fff}
.sec.band{background:var(--purple);color:#fff}
.sec.band h2{color:#fff}
.intro{max-width:660px;margin:14px 0 36px;font-size:19px}
.grid{display:grid;gap:20px}
.g2{grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.g3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.g4{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
.eyebrow{font:600 14px/1 "Source Sans 3",sans-serif;letter-spacing:.12em;text-transform:uppercase;color:var(--purple);margin-bottom:14px;display:block}
.dark .eyebrow,.band .eyebrow{color:var(--orange)}

/* logo */
.logo{display:inline-flex;align-items:center;gap:10px;text-decoration:none;line-height:1}
.logo .mark{width:34px;height:34px;flex:none}
.logo .mark .c{fill:var(--purple)}
.logo .mark .t{fill:var(--orange)}
.logo .word{font-weight:600;font-size:27px;letter-spacing:-.01em;text-transform:lowercase;white-space:nowrap}
.logo .p{color:var(--purple)}
.logo .o{color:var(--orange)}
.logo.rev .mark .c{fill:#fff}
.logo.rev .p{color:#fff}

/* nav */
header.top{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.97);border-bottom:1px solid var(--line)}
nav.main{display:flex;flex-wrap:wrap;gap:10px 28px;align-items:center;justify-content:space-between;padding:14px max(24px,calc((100% - 1120px)/2))}
nav.main .links{display:flex;flex-wrap:wrap;gap:6px 26px;align-items:center}
nav.main .links a{color:var(--ink);text-decoration:none;font-weight:600;font-size:16px;padding:6px 0;border-bottom:2px solid transparent}
nav.main .links a:hover,nav.main .links a[aria-current="page"]{border-bottom-color:var(--orange)}
.btn{display:inline-block;border:0;border-radius:999px;font:600 17px/1.2 "Open Sans",system-ui,sans-serif;padding:14px 28px;text-decoration:none;cursor:pointer;background:var(--purple);color:#fff;transition:background .2s}
.btn:hover{background:var(--purple-dk);color:#fff}
.btn.alt{background:var(--orange);color:var(--ink)}
.btn.alt:hover{background:#E8962F;color:var(--ink)}
.btn.ghost{background:transparent;color:var(--purple);box-shadow:inset 0 0 0 2px var(--purple)}
.btn.ghost:hover{background:var(--mist)}
nav.main .btn{padding:11px 22px;font-size:16px}
@media (max-width:760px){
  .logo .word{font-size:23px}
  .logo .mark{width:30px;height:30px}
}

/* hero */
.hero{padding-top:64px;padding-bottom:88px;display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.hero-text{flex:1 1 480px;min-width:0}
.hero h1 i{display:inline-block;width:.34em;height:.34em;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%);margin-left:.1em;vertical-align:baseline}
.hero .lead{font-size:21px;max-width:580px;margin:26px 0 32px}
.hero .btns{display:flex;flex-wrap:wrap;gap:14px}
.portrait-wrap{flex:0 1 400px;width:100%;max-width:400px;position:relative}
.portrait{width:100%;aspect-ratio:1/1;border-radius:50%;border:6px solid var(--orange);box-shadow:0 0 0 12px var(--mist);background:var(--purple);overflow:hidden;position:relative;display:grid;place-items:center}
.portrait .ini{font:700 96px/1 "Source Sans 3",sans-serif;color:#fff;letter-spacing:-.02em}
.portrait img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tri{position:absolute;width:74px;height:74px;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%);left:-26px;bottom:34px}
.portrait.sm{max-width:300px;margin:0 auto}
.portrait.sm .ini{font-size:72px}

/* credentials band */
.creds{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:28px;padding:44px max(24px,calc((100% - 1120px)/2))}
.cred .num{font-weight:700;font-size:34px;line-height:1.1;color:#fff;display:block}
.cred p{color:#EBDDF0;font-size:16px;margin-top:6px}

/* cards */
.card{background:var(--mist);border-radius:20px;padding:28px}
.sec.mist .card{background:#fff}
.card h3{margin-bottom:10px}
.card p{font-size:17px}
.card .more{display:inline-block;margin-top:14px;font-weight:600}
.bullet{margin-bottom:12px}
.mk{width:14px;height:14px;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%);display:block;margin-bottom:14px}
.card.big{background:var(--purple);color:#fff;grid-column:1/-1}
.card.big h3{color:#fff;font-size:30px}
.card.big ul{columns:2 260px;column-gap:36px;margin:16px 0 8px;padding:0;list-style:none}
.card.big li{padding:6px 0 6px 26px;position:relative;break-inside:avoid}
.card.big li::before{content:"";position:absolute;left:0;top:14px;width:11px;height:11px;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%)}
.card.big a{color:#fff}
.card.big .btn{margin-top:14px;background:var(--orange);color:var(--ink)}
.chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:8px;padding:0;list-style:none}
.chips li{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:15px}
.steps .step{background:transparent;padding:0}
.stepno{width:46px;height:46px;border-radius:50%;background:var(--orange);color:var(--ink);display:grid;place-items:center;font:700 22px "Source Sans 3",sans-serif;margin-bottom:14px}
.steps p{color:var(--ink)}

/* quotes */
blockquote{margin:0;background:#3A2146;border-radius:20px;padding:28px;display:flex;flex-direction:column;gap:18px;height:100%}
blockquote p{color:#F3E9F6;font-size:18px}
blockquote footer{margin-top:auto;font:600 17px "Source Sans 3",sans-serif;color:var(--orange)}
blockquote footer span{color:#E6D6EA;font-weight:400}
.light blockquote{background:var(--mist)}
.light blockquote p{color:var(--ink)}
.light blockquote footer{color:var(--purple)}
.light blockquote footer span{color:var(--muted)}

/* strips */
.strip{display:flex;flex-wrap:wrap;gap:16px 32px;align-items:center;justify-content:space-between}
.strip p{max-width:760px;font-size:19px}
.about{display:flex;flex-wrap:wrap;gap:48px;align-items:center}
.about>div:first-child{flex:0 1 320px;width:100%}
.about>div:last-child{flex:1 1 420px}
.about p{margin:14px 0 22px;font-size:19px}

/* page hero + prose */
.page-hero{background:var(--mist);padding:44px max(24px,calc((100% - 1120px)/2)) 56px}
.crumbs{font-size:15px;color:var(--muted);margin-bottom:18px}
.crumbs a{color:var(--muted)}
.page-hero h1{font-size:clamp(36px,5vw,58px)}
.page-hero .lead{font-size:21px;max-width:720px;margin-top:18px}
.cols{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding:64px max(24px,calc((100% - 1120px)/2))}
.cols .main{flex:1 1 560px;min-width:0}
.cols aside{flex:0 1 330px;width:100%;position:sticky;top:96px}
@media (max-width:900px){.cols aside{position:static}}
.prose h2{font-size:30px;margin:38px 0 12px}
.prose h2:first-child{margin-top:0}
.prose p,.prose ul,.prose ol{margin:0 0 16px}
.prose ul{padding-left:0;list-style:none}
.prose ul li{padding:5px 0 5px 28px;position:relative}
.prose ul li::before{content:"";position:absolute;left:0;top:14px;width:11px;height:11px;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%)}
.prose ol{padding-left:22px}
.prose li{margin-bottom:6px}
.prose.narrow{max-width:780px;padding:56px max(24px,calc((100% - 780px)/2)) 76px}
.prose.narrow h1{font-size:clamp(34px,5vw,52px);margin-bottom:10px}
.meta{color:var(--muted);font-size:15px}
.aside-card{background:var(--mist);border-radius:20px;padding:24px;margin-bottom:20px}
.aside-card h3{font-size:20px;margin-bottom:12px}
.aside-card ul{list-style:none;margin:0;padding:0}
.aside-card li{margin:8px 0}
.aside-card a{font-weight:600;text-decoration:none}
.aside-card a:hover{text-decoration:underline}
.note{background:var(--mist);border-left:5px solid var(--orange);border-radius:8px;padding:16px 20px;margin:0 0 22px;font-size:16px}
mark{background:#FFE9A8;color:#1A1033;padding:0 4px;border-radius:4px}

/* form */
form.enq{background:var(--mist);border-radius:24px;padding:32px;display:flex;flex-direction:column;gap:18px}
form.enq label{font-weight:600;font-size:15px;display:flex;flex-direction:column;gap:6px}
form.enq .opt{font-weight:400;color:var(--muted)}
form.enq input,form.enq select,form.enq textarea{font:inherit;font-size:16px;padding:13px 15px;border:1px solid #9C7BA6;border-radius:12px;background:#fff;color:var(--ink);width:100%}
form.enq textarea{min-height:150px;resize:vertical}
.two{display:flex;flex-wrap:wrap;gap:18px}.two>*{flex:1 1 180px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.small{font-size:15px;color:var(--muted)}
.msg{border-radius:12px;padding:14px 18px;font-size:16px;margin:0}
.msg[hidden]{display:none}
.msg.ok{background:var(--ok-bg);border:1px solid var(--ok-line);color:var(--ok-text)}
.msg.err{background:var(--err-bg);border:1px solid var(--err-line);color:var(--err-text)}
.contact-wrap{display:flex;flex-wrap:wrap;gap:48px;align-items:flex-start;padding:56px max(24px,calc((100% - 1120px)/2)) 76px}
.contact-wrap>div:first-child{flex:1 1 340px}
.contact-wrap>form,.contact-wrap>.formcol{flex:1 1 440px}
.contact-list{list-style:none;margin:22px 0;padding:0}
.contact-list li{margin:12px 0;font-size:18px}
.contact-list strong{display:block;font:600 14px "Source Sans 3",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* footer */
footer.site{background:var(--ink);color:#EBDDF0;padding:56px max(24px,calc((100% - 1120px)/2)) 28px}
footer.site .fgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:36px}
footer.site h4,footer.site .fh{color:#fff;font:700 17px "Source Sans 3",system-ui,sans-serif;margin:0 0 12px}
footer.site ul{list-style:none;margin:0;padding:0}
footer.site li{margin:7px 0}
footer.site a{color:#EBDDF0}
footer.site a:hover{color:#fff}
footer.site .tag{margin-top:14px;max-width:300px;font-size:16px}
.legal{border-top:1px solid #4A3355;margin-top:36px;padding-top:20px;display:flex;flex-wrap:wrap;gap:14px 24px;justify-content:space-between;align-items:flex-end;font-size:14px;line-height:1.55;color:#D9C7DF}
.legal-text{display:flex;flex-direction:column;gap:6px;flex:1 1 380px}
.credit{display:inline-flex;align-items:center;gap:8px}
.factory{width:22px;height:22px;fill:none;stroke:var(--orange);stroke-width:26;stroke-linecap:butt;stroke-linejoin:miter;flex:none}
.fb{display:grid;place-items:center;width:40px;height:40px;border-radius:50%;background:#3A2146;color:#fff}
.fb:hover{background:var(--purple)}
.fb svg{width:19px;height:19px;fill:currentColor}

/* motion */
.js .rv{opacity:0;transform:translateY(14px);transition:opacity .7s ease,transform .7s ease;transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none;transition:none}}

/* 404 */
.e404{min-height:62vh;display:flex;flex-direction:column;justify-content:center;padding:64px max(24px,calc((100% - 900px)/2))}
.e404 .big{font:700 clamp(96px,22vw,220px)/.9 "Source Sans 3",sans-serif;color:var(--purple);letter-spacing:-.04em}
.e404 .big i{display:inline-block;width:.22em;height:.22em;background:var(--orange);clip-path:polygon(100% 0,0 50%,100% 100%);margin-left:.06em}
.e404 h1{font-size:clamp(30px,5vw,48px);margin:22px 0 12px}
.e404 .btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:26px}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.sec.mist .card.big{background:var(--purple)}
.g22{grid-template-columns:repeat(2,1fr)}
@media (max-width:760px){.g22{grid-template-columns:1fr}}
.nw{white-space:nowrap}
.ico{width:48px;height:48px;border-radius:50%;background:var(--mist);color:var(--purple);display:grid;place-items:center;margin-bottom:14px}
.sec.mist .ico{background:var(--mist)}
.portrait img{object-position:50% 20%}
.intro.wide{max-width:none}
.card:not(.big){display:flex;flex-direction:column}
.card:not(.big) .more{margin-top:auto;padding-top:14px;align-self:flex-start}
.prose.narrow{max-width:none}
.card .ico{background:#fff}
.sec.mist .card .ico{background:var(--mist)}
/* cookie banner */
.cookie-banner{position:fixed;left:16px;right:16px;bottom:16px;max-width:560px;margin:0 auto 0 0;background:#fff;color:var(--ink);border:1px solid var(--line);border-top:4px solid var(--purple);border-radius:16px;box-shadow:0 10px 40px rgba(43,21,51,.22);padding:20px 22px;z-index:50;font-size:16px;line-height:1.5}
.cookie-banner p{margin:0 0 8px}
.cookie-btns{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.cookie-btns .btn{flex:1 1 150px;text-align:center;padding:12px 20px}
.cookie-btns .btn+.btn{background:var(--purple)}
@media (min-width:640px){.cookie-banner{left:24px;bottom:24px}}
footer.site button.linklike{background:none;border:0;padding:0;font:inherit;color:inherit;text-decoration:underline;cursor:pointer}
table.ck{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:16px}
table.ck th,table.ck td{text-align:left;vertical-align:top;padding:10px 12px;border-bottom:1px solid var(--line)}
table.ck th{background:var(--mist);color:var(--purple)}
table.ck code{font-size:15px;background:var(--mist);padding:1px 6px;border-radius:6px}
@media (max-width:640px){table.ck thead{display:none}table.ck,table.ck tbody,table.ck tr,table.ck td{display:block;width:100%}table.ck tr{border-bottom:1px solid var(--line);padding:8px 0}table.ck td{border:0;padding:4px 0}}
/* mobile polish */
@media (max-width:760px){
  .hero h1{font-size:clamp(32px,9.4vw,44px)}
  nav.main .links a{padding:10px 0}
  .logo{padding:6px 0}
  .crumbs a{display:inline-block;padding:10px 2px}
  .crumbs{margin-bottom:8px}
  footer.site li a{display:inline-block;padding:6px 0}
  .btn{min-height:48px}
}
@media (max-width:760px){
  .portrait-wrap{max-width:290px;margin:4px auto 0}
  .portrait.sm{max-width:230px}
  .card{padding:22px}
  .card.big{padding:24px}
  footer.site li a{padding:4px 0}
}
@media (max-width:760px){
  blockquote{padding:22px;gap:14px}
  blockquote p{font-size:17px;line-height:1.55}
}
@media (max-width:760px){footer.site li a{padding:10px 0}footer.site li{margin:0}}

/* burger menu (phones) */
.nav-toggle{display:none}
nav.main .menu{display:contents}
@media (max-width:760px){
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin:-6px -8px -6px 0;background:none;border:0;border-radius:12px;cursor:pointer;color:var(--purple)}
  .nav-toggle:focus-visible{outline:3px solid var(--orange);outline-offset:2px}
  .nav-toggle .bars,.nav-toggle .bars::before,.nav-toggle .bars::after{display:block;width:24px;height:3px;border-radius:2px;background:currentColor;transition:transform .2s,background .2s}
  .nav-toggle .bars{position:relative}
  .nav-toggle .bars::before,.nav-toggle .bars::after{content:"";position:absolute;left:0}
  .nav-toggle .bars::before{top:-8px}
  .nav-toggle .bars::after{top:8px}
  .nav-toggle[aria-expanded="true"] .bars{background:transparent}
  .nav-toggle[aria-expanded="true"] .bars::before{top:0;transform:rotate(45deg)}
  .nav-toggle[aria-expanded="true"] .bars::after{top:0;transform:rotate(-45deg)}
  nav.main .menu{display:flex;flex-direction:column;align-items:stretch;flex-basis:100%;gap:4px;padding:6px 0 10px;border-top:1px solid var(--line)}
  .js nav.main .menu{display:none}
  .js nav.main.open .menu{display:flex}
  nav.main .links{flex-direction:column;align-items:stretch;gap:0}
  nav.main .links a{display:block;font-size:18px;padding:14px 4px;border-bottom:1px solid var(--line)}
  nav.main .links a[aria-current="page"]{border-bottom-color:var(--line);color:var(--purple)}
  nav.main .cta{margin-top:12px}
  nav.main .cta .btn{display:block;text-align:center}
  /* footer links */
  footer.site li{margin:0}
  footer.site li a{display:inline-block;padding:5px 0;line-height:1.4}
  /* service page side cards: full content width */
  .cols aside{flex:1 1 100%}
  /* centre Natasha's photo wherever it appears */
  .portrait-wrap,.about>div:first-child,.cols aside .portrait{margin-left:auto;margin-right:auto}
  .about>div:first-child{width:100%}
  .portrait,.portrait.sm{margin-left:auto;margin-right:auto}
}
@media (max-width:760px){
  nav.main{gap:0 12px;flex-wrap:wrap;align-items:center}
  nav.main .logo{flex:1 1 0;min-width:0}
  .logo .word{font-size:21px;white-space:nowrap}
  .logo .mark{width:28px;height:28px;flex:none}
}
@media (max-width:370px){.logo .word{font-size:19px}}
.socials{display:flex;gap:10px;margin-left:auto;align-self:flex-end}
.credit-row{display:flex;justify-content:center;margin-top:22px;font-size:14px;color:#D9C7DF;text-align:center}
.credit-row .credit{justify-content:center;margin:0}
@media (max-width:760px){.credit-row .credit{flex-direction:column;gap:6px;text-align:center}}
.mand{max-width:760px}.mand p{font-size:19px;margin:14px 0 22px}
.mand .btns{display:flex;flex-wrap:wrap;gap:14px}
/* clearer hover for outline buttons (the old lilac hover vanished on lilac sections) */
.btn.ghost{transition:background .2s,color .2s}
.btn.ghost:hover,.btn.ghost:focus-visible{background:var(--purple);color:#fff}
/* top banner */
.topbar{background:var(--purple);color:#fff;font-size:14px;line-height:1.3;text-align:center;padding:8px 24px}
.topbar p{margin:0}
.topbar a{color:#fff;font-weight:600;text-decoration:underline;text-underline-offset:3px;margin-left:6px;white-space:nowrap}
.topbar a:hover{color:var(--orange)}
.topbar .short{display:none}
@media (max-width:640px){.topbar{padding:8px 16px;font-size:13.5px}.topbar .long{display:none}.topbar .short{display:inline}}
@media (max-width:640px){.topbar{font-size:13px;padding:7px 12px}}

/* Effective Perspective (articles) */
.posts{display:grid;gap:20px}
.post-card img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:12px;margin-bottom:16px}
.post-card .meta{margin-bottom:6px}
.post-card h3 a{text-decoration:none}
.post-card h3 a:hover{text-decoration:underline}
.post-meta{margin-top:14px}
.prose h3{font-size:22px;margin:28px 0 10px}
.prose .article-img{display:block;width:100%;height:auto;max-height:min(420px,75vw);object-fit:cover;object-position:center 30%;border-radius:16px;margin:0 0 28px}
.prose a{font-weight:600}
.prose blockquote{display:block;height:auto;background:var(--mist);border-left:5px solid var(--orange);border-radius:8px;padding:16px 20px;margin:0 0 16px}
.prose blockquote p{color:var(--ink);font-size:17px;margin:0}
