/* Pillar colour system throughout main content. Header and footer stay Ink Blue. */
body.website-page{--pillar:#76B9F0;--pillar-dark:#245D89;--pillar-pale:#F1F7FC;--pillar-soft:#E0EFFB;--pillar-line:#BDD9EF;--pillar-close:#C7E3F8}
body.branding-page{--pillar:#F2B75C;--pillar-dark:#795019;--pillar-pale:#FCF8F0;--pillar-soft:#F9ECD6;--pillar-line:#E8CFA8;--pillar-close:#F5D59F}
body.marketing-page{--pillar:#59C9B5;--pillar-dark:#246B5D;--pillar-pale:#F0F8F5;--pillar-soft:#DDF2EB;--pillar-line:#B9DFD2;--pillar-close:#BDE8DB}
body.website-page main{background:var(--pillar-pale)}
body.website-page main>.website-intro,body.website-page main>.website-planning,body.website-page main>[id$="process"]{background:var(--pillar-pale)}
body.website-page main .section:not(.contact) h2,body.website-page main .section:not(.contact) h3,body.website-page main .section:not(.contact) h4{color:var(--pillar-dark)}
body.website-page main .section:not(.contact) .eyebrow,body.website-page main .website-outcomes article>span,body.website-page main .website-service-top{color:var(--pillar-dark)}
body.website-page main .website-outcomes article{background:var(--pillar-soft);border:1px solid var(--pillar-line)}
body.website-page main .website-outcomes article:nth-child(2){background:color-mix(in srgb,var(--pillar-soft) 65%,white)}
body.website-page main .website-outcomes article:nth-child(3){background:color-mix(in srgb,var(--pillar-soft) 85%,white)}
body.website-page main .benefit-icon,body.website-page main .website-service-top svg{color:var(--pillar-dark)}
body.website-page main .website-service-section,body.website-page main .website-faq{background:var(--pillar-soft)}
body.website-page main .website-service-grid>article{background:color-mix(in srgb,var(--pillar-pale) 35%,white);border-color:var(--pillar-line);border-top:3px solid var(--pillar)}
body.website-page main .website-service-grid details,body.website-page main .website-faq details{border-color:var(--pillar-line)}
body.website-page main details summary{color:var(--pillar-dark)}
body.website-page main details summary:hover{color:var(--ink)}
body.website-page main .website-workflow:before{background:var(--pillar-line)}
body.website-page main .website-workflow:after{background:var(--pillar-dark)}
body.website-page main .website-workflow li>span{border-color:var(--pillar-line);color:var(--pillar-dark);background:var(--pillar-pale)}
body.website-page main .website-workflow li.journey-reached>span{background:var(--pillar-soft);border-color:var(--pillar);box-shadow:0 0 0 6px color-mix(in srgb,var(--pillar) 15%,transparent)}
body.website-page main .website-after{background:var(--pillar-soft)}
body.website-page main .website-after:after{background:linear-gradient(90deg,var(--pillar-soft),color-mix(in srgb,var(--pillar-soft) 82%,transparent) 45%,transparent)}
body.website-page main .experience-image{background:var(--pillar-dark);mask:url('assets/images/mandala-tile.svg') 0 0/120px 120px repeat}
body.website-page main .enquiry-flow{background:color-mix(in srgb,var(--pillar-pale) 65%,white);border-color:var(--pillar-line)}
body.website-page main .flow-icon{background:var(--pillar-soft);color:var(--pillar-dark)}
body.website-page main .enquiry-flow li:before{background:var(--pillar-line)}
body.website-page main .flow-dot{background:var(--pillar-dark)}
body.website-page main .enquiry-flow .flow-caption{border-color:var(--pillar-line)}
body.website-page main .brief-prompts{border-color:var(--pillar-line);border-top-color:var(--pillar);background:linear-gradient(140deg,var(--pillar-pale),var(--pillar-soft))}
body.website-page main .brief-prompts li{border-color:var(--pillar-line)}
body.website-page main .brief-number{background:var(--pillar-soft);color:var(--pillar-dark)}
body.website-page main .text-link{color:var(--pillar-dark)}
body.website-page main .website-planning .button{background:var(--pillar-dark);color:white}
body.website-page main>.contact{background:var(--pillar-close);color:var(--ink)}
body.website-page main>.contact h2,body.website-page main>.contact h3,body.website-page main>.contact p,body.website-page main>.contact a{color:var(--ink)}
body.website-page main>.contact .button-white{background:var(--pillar-dark);color:white}
body.website-page main>.contact .contact-person>a{border-color:color-mix(in srgb,var(--pillar-dark) 30%,transparent)}
@media(max-width:767px){body.website-page main .experience-image{mask-size:96px 96px}}
body.website-page main .detail-page-link{font-size:13px;line-height:23px;gap:12px;margin-top:20px;max-width:100%}