/* One header across the homepage, enquiry and both dashboards. */
body .header.wrap{position:relative;display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1440px;margin:0 auto;padding:12px 5%;min-height:92px;gap:24px;box-sizing:border-box}
body .header .brand{display:flex;align-items:center;gap:12px;width:245px;min-width:245px;text-decoration:none;margin:0;font:16px Georgia,serif}
body .header .brand-emblem{width:54px;height:54px;flex:0 0 54px}
body .header .brand-wordmark{width:174px;position:relative}
body .header .brand-prefix{font:600 17px/1 Georgia,serif;letter-spacing:.2px;margin:0 0 -7px 2px;display:block;transform:none}
body .header .brand-wordmark em{font-size:44px;line-height:.9;display:block;width:174px;margin:0;padding-bottom:7px;transform:none;animation:none}
body .header .brand-wordmark small{font:600 9px/1.4 'DM Sans',sans-serif;letter-spacing:.25px;color:#285572;display:block;margin-top:4px;white-space:nowrap}
body .header .logo-resting-fairy{width:55px;height:auto;right:-1px;bottom:0}
body .header .header-actions{display:flex;align-items:center;justify-content:space-between;flex:1;gap:28px;margin:0;max-width:650px}
body .header nav{display:flex;align-items:center;gap:22px;padding:8px 20px;border:1px solid #ffffffa0;border-radius:30px;background:#ffffff60}
body .header nav a{font:600 21px/1.2 'Caveat',cursive;white-space:nowrap;text-decoration:none}
body .header .talk-companion{margin:0 24px 0 0;flex-shrink:0}
body .header .button.small{font-size:21px;min-height:44px;padding:8px 15px;white-space:nowrap}
@media(max-width:800px){body .header.wrap{flex-wrap:wrap;justify-content:center;gap:12px;padding:12px 16px}body .header .header-actions{flex:1 1 100%;max-width:620px;gap:12px}body .header nav{gap:14px;padding:8px 12px}body .header nav a{font-size:19px}body .header .talk-companion{margin-right:20px}}
@media(max-width:480px){body .header .header-actions{justify-content:center;flex-wrap:wrap}body .header nav{justify-content:center;width:100%}body .header .talk-companion{margin:0 20px 0 0}body .header .button.small{font-size:19px;padding:6px 15px}}
/* Let the page colour run continuously behind the header, without a banner edge. */
body .header.wrap{background:transparent;border:0;box-shadow:none;border-radius:0}
body .header.wrap::before,body .header.wrap::after{content:none}
/* A quiet divider, with no boxed background. */
body .header.wrap::after{content:'';position:absolute;left:5%;right:5%;bottom:0;top:auto;height:1px;width:auto;background:linear-gradient(90deg,transparent,#9cabbc55 20%,#b59a6555 50%,#9cabbc55 80%,transparent);border:0;box-shadow:none;pointer-events:none}

/* Two clipped layers keep her elbows and wand resting on the gold line. */
body .header .brand-wordmark>em .logo-resting-fairy{height:auto;aspect-ratio:480/270;transform:none;overflow:visible}
.logo-resting-fairy img{position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none}
.logo-fairy-body{clip-path:polygon(28% 0,100% 0,100% 100%,0 100%,0 91%,22% 91%,28% 70%)}
.logo-fairy-legs{clip-path:polygon(0 0,28% 0,28% 70%,22% 91%,0 91%);transform-origin:25% 82%;animation:logo-fairy-kick 13s ease-in-out infinite}
@keyframes logo-fairy-kick{0%,64%,84%,100%{transform:rotate(0deg)}68%,76%{transform:rotate(9deg)}72%,80%{transform:rotate(-5deg)}}
.motion-paused .logo-fairy-legs{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.logo-fairy-legs{animation:none!important}}

/* Keep the two name lines locked together at every breakpoint. */
body .header .brand-prefix{position:relative;top:0;animation:none;line-height:1;z-index:1}
body .header .brand-wordmark>em .logo-resting-fairy{top:auto;bottom:0}

/* Alternate the two lower legs around their resting knee positions. */
.logo-fairy-leg-back{clip-path:polygon(0 0,28% 0,28% 70%,23% 84%,17% 65%,0 48%);transform-origin:24% 80%;animation-name:logo-back-kick}
.logo-fairy-leg-front{clip-path:polygon(0 48%,17% 65%,23% 84%,22% 91%,0 91%);transform-origin:23% 84%;animation-name:logo-front-kick}
@keyframes logo-back-kick{0%,64%,86%,100%{transform:rotate(0deg)}68%,77%{transform:rotate(10deg)}72%,81%{transform:rotate(-7deg)}}
@keyframes logo-front-kick{0%,64%,86%,100%{transform:rotate(0deg)}68%,77%{transform:rotate(-7deg)}72%,81%{transform:rotate(10deg)}}

/* Section companions share the logo fairy's alternating little kicks. */
.section-resting-fairy{display:inline-grid;vertical-align:middle;flex-shrink:0;max-width:100%;isolation:isolate}
.section-resting-fairy>img{grid-area:1/1;height:auto;max-width:100%;margin:0;animation:none!important}
.section-resting-fairy>.section-fairy-body{clip-path:polygon(28% 0,100% 0,100% 100%,0 100%,0 91%,22% 91%,28% 70%)}
.section-resting-fairy>.section-fairy-back{clip-path:polygon(0 0,28% 0,28% 70%,23% 84%,17% 65%,0 48%);transform-origin:24% 80%;animation:logo-back-kick 13s ease-in-out infinite!important;animation-delay:var(--kick-offset,0s)!important}
.section-resting-fairy>.section-fairy-front{clip-path:polygon(0 48%,17% 65%,23% 84%,22% 91%,0 91%);transform-origin:23% 84%;animation:logo-front-kick 13s ease-in-out infinite!important;animation-delay:var(--kick-offset,0s)!important}
.motion-paused .section-resting-fairy>img{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.section-resting-fairy>img{animation:none!important}}
/* Keep the relevant navigation at hand throughout each page. */
html{scroll-padding-top:var(--sticky-header-height,110px)}
body .header.wrap{position:sticky;top:0;z-index:30;isolation:isolate;background:transparent;backdrop-filter:none;-webkit-backdrop-filter:none}
body .header.wrap::before{content:"";position:absolute;inset:0 auto 0 50%;width:100vw;transform:translateX(-50%);z-index:-1;pointer-events:none;background:transparent;border:0;border-radius:0;box-shadow:none}
body .header.wrap.has-scrolled::before{background:linear-gradient(110deg,#d9e9f9f5,#f5f2e9f5);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 5px 16px #23476412}
body .header.wrap.is-scrolled{box-shadow:none}
@media(max-width:800px){
 body .header.wrap.is-scrolled{justify-content:space-between;padding:8px 14px;gap:6px 12px;min-height:0}
 body .header.is-scrolled .brand{width:180px;min-width:180px;gap:8px;order:1}
 body .header.is-scrolled .brand-emblem{width:38px;height:38px;flex-basis:38px}
 body .header.is-scrolled .brand-wordmark{width:130px}
 body .header.is-scrolled .brand-wordmark em{font-size:33px;width:130px;padding-bottom:5px}
 body .header.is-scrolled .brand-prefix{font-size:13px;margin-bottom:-5px}
 body .header.is-scrolled .brand-wordmark small,body .header.is-scrolled .logo-resting-fairy{display:none}
 body .header.is-scrolled .header-actions{display:contents}
 body .header.is-scrolled nav{order:3;flex:1 1 100%;width:100%;justify-content:center;margin:0;gap:16px;padding:0 9px;border-top:1px solid #ffffffa0}
 body .header.is-scrolled nav a{font-size:18px;padding:8px 0;min-height:38px}
 body .header.is-scrolled .talk-companion{order:2;margin:0;min-height:0}
 body .header.is-scrolled .talk-companion .button-fairy,body .header.is-scrolled .fairy-zzz,body .header.is-scrolled .hello-spark{display:none}
 body .header.is-scrolled .button.small{font-size:18px;padding:7px 10px;min-height:38px;gap:8px}
 body .header.is-scrolled #dashboard-nav{flex-wrap:wrap;gap:3px}
 body .header.is-scrolled #dashboard-nav button{font-size:17px;min-height:38px;padding:7px 10px}
}