/* Shared header and footer for every page on the site.
   Each page brings its own styles, resets and fonts, so everything here is
   prefixed ffe- and sets its own values rather than trusting the page's. */
:root{
  --ffe-row:92px;                            /* the row the logo, links and button sit in */
  --ffe-line:22px;                           /* one line of menu text: the unit the spacing is measured in */
  --ffe-above:calc(var(--ffe-line) * 1.25);  /* extra space above the links: a line and a quarter */
  --ffe-below:calc(var(--ffe-line) * 1.35);  /* extra space between the links and the page: 1.35 lines */
  --ffe-nav-h:calc(var(--ffe-above) + var(--ffe-row) + var(--ffe-below));   /* the whole white bar */
  --ffe-top:var(--ffe-nav-h);                /* what the menu covers right now: its height, or 0 while tucked away */
  --ffe-pink:#D54A82;
  --ffe-logo:clamp(112px,8.9vw,128px);       /* the logo image (square) */
  --ffe-logo-w:calc(var(--ffe-logo) * .69);  /* the visible shape's width */
  --ffe-ink:#1b1033;
  --ffe-muted:#625578;
  --ffe-magenta:#d64a83;
  --ffe-orchid:#a45fd0;
  --ffe-indigo:#6b5fb8;
  --ffe-grad:linear-gradient(100deg,#d64a83 0%,#a45fd0 55%,#6b5fb8 100%);
  --ffe-font:"Montserrat","Helvetica Neue",Arial,sans-serif;
}
html{scroll-padding-top:calc(var(--ffe-nav-h) + 12px)}
/* No rubber-band stretch when the page is pulled past its top or bottom (Mac trackpads, iPhone). */
html,body{overscroll-behavior-y:none}
html.ffe-nav-away{--ffe-top:0px}
/* Anything a page pins under the menu should use var(--ffe-top) and this timing, to move with the menu. */
:root{--ffe-slide:.32s cubic-bezier(.2,.8,.2,1)}

/* ---------- header ---------- */
.ffe-nav,.ffe-nav *{box-sizing:border-box}
.ffe-nav{position:fixed;top:0;left:0;right:0;z-index:2147483000;height:var(--ffe-nav-h);padding-top:var(--ffe-above);transition:transform var(--ffe-slide);
  font-family:var(--ffe-font);color:var(--ffe-ink);font-size:14px;line-height:1.2;letter-spacing:0;text-align:left;text-transform:none}
/* The header's white sits on a layer of its own, behind the links. */
.ffe-nav::before{content:"";position:absolute;inset:0;z-index:-1;background:#fff}
.ffe-spacer{display:block;height:var(--ffe-nav-h);margin:0;padding:0}
.ffe-nav ul{list-style:none;margin:0;padding:0}
.ffe-nav li{margin:0;padding:0;list-style:none}
.ffe-nav a{text-decoration:none;color:inherit}

/* Same width and side spacing as the Academy and Home content, so the logo
   starts where the page's text starts. */
.ffe-nav__in{height:var(--ffe-row);max-width:1880px;margin:0 auto;padding:0 clamp(20px,4.5vw,96px);display:flex;align-items:center;gap:clamp(14px,1.8vw,32px)}
/* The logo is bigger than the bar and hangs over the section below it. The
   file is a square with clear space either side of the shape, so the box is
   narrower than the image and the image is shifted left to sit flush. */
.ffe-brand{position:relative;display:flex;align-items:center;flex:none;height:var(--ffe-row);padding-left:var(--ffe-logo-w)}
.ffe-brand img{position:absolute;left:calc(var(--ffe-logo) * -.165);top:10px;display:block;width:var(--ffe-logo);height:var(--ffe-logo);max-width:none;margin:0;
  filter:drop-shadow(0 12px 18px rgba(214,74,131,.35));transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.ffe-brand:hover img{transform:rotate(-4deg) scale(1.03)}
.ffe-menu{flex:1;display:flex;align-items:center;gap:clamp(12px,1.3vw,32px);min-width:0}
/* Links spread evenly from the logo to the button: the gaps grow with the spare room,
   and never shrink below the minimum. */
.ffe-links{display:flex;align-items:center;justify-content:space-between;flex:1;gap:clamp(10px,1.15vw,28px)}
@media (min-width:1600px){.ffe-links{margin-right:clamp(16px,1.6vw,40px)!important}}
.ffe-wide{display:none}
@media (min-width:1540px){.ffe-wide{display:list-item}}
.ffe-links a{position:relative;display:flex;align-items:center;height:var(--ffe-row);
  font:600 clamp(12.5px,.98vw,14.5px)/1 var(--ffe-font);color:#3d3155;white-space:nowrap;transition:color .2s}
.ffe-links a::after{content:"";position:absolute;left:0;right:0;bottom:calc(var(--ffe-row) / 2 - 20px);height:2px;border-radius:2px;background:var(--ffe-pink);
  transform:scaleX(0);transform-origin:left;transition:transform .25s cubic-bezier(.2,.8,.2,1)}
.ffe-links a:hover,.ffe-links a[aria-current="page"]{color:var(--ffe-pink)}
/* A long name: the first line sits in line with the other links; the rest hangs
   just below it in small type, so it costs only the first line's width. */
.ffe-links a.ffe-two small{position:absolute;left:0;top:calc(50% + .72em);font-size:.74em;font-weight:600;letter-spacing:.02em;opacity:.8;white-space:nowrap}
.ffe-links a.ffe-two::after{bottom:calc(var(--ffe-row) / 2 - 30px)}
.ffe-links a[aria-current="page"]::after{transform:scaleX(1)}
.ffe-cta{flex:none;display:flex;align-items:center;justify-content:center;height:46px;padding:0 clamp(16px,1.7vw,24px);border-radius:8px;
  background:var(--ffe-pink);color:#fff!important;font:700 14.5px/1 var(--ffe-font);letter-spacing:.01em;white-space:nowrap;
  box-shadow:0 10px 24px -12px rgba(214,74,131,.7);transition:background .2s,transform .2s,box-shadow .2s}
.ffe-cta:hover{background:#c23b72;transform:translateY(-1px);box-shadow:0 14px 28px -12px rgba(214,74,131,.8)}

.ffe-nav a:focus-visible,.ffe-nav button:focus-visible{outline:2px solid var(--ffe-orchid);outline-offset:3px}

/* burger */
.ffe-burger{display:none;margin-left:auto;align-items:center;gap:10px;height:44px;padding:0 4px 0 12px;border:0;border-radius:8px;
  background:#fff;color:var(--ffe-ink);font:700 13px/1 var(--ffe-font);letter-spacing:.04em;text-transform:uppercase;cursor:pointer}
.ffe-burger__bars{display:grid;gap:4px;width:18px}
.ffe-burger__bars i{display:block;height:2px;background:currentColor;transition:transform .25s,opacity .2s}
.ffe-nav.is-open .ffe-burger__bars i:nth-child(1){transform:translateY(6px) rotate(45deg)}
.ffe-nav.is-open .ffe-burger__bars i:nth-child(2){opacity:0}
.ffe-nav.is-open .ffe-burger__bars i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (max-width:1259px){
  :root{--ffe-below:0px;--ffe-above:0px}
  :root{--ffe-logo:108px}
    .ffe-burger{display:inline-flex}
  .ffe-menu{position:fixed;left:0;right:0;top:var(--ffe-nav-h);bottom:0;display:block;margin:0;background:#fff;overflow-y:auto;
    padding:8px clamp(16px,5vw,40px) 40px;visibility:hidden;opacity:0;transform:translateY(-8px);transition:opacity .2s,transform .2s,visibility 0s .2s}
  .ffe-nav.is-open .ffe-menu{visibility:visible;opacity:1;transform:none;transition:opacity .2s,transform .2s}
  .ffe-links{flex-direction:column;align-items:stretch;gap:0;max-width:560px;margin:0 auto!important}
  .ffe-wide{display:list-item}
  .ffe-links li{border-bottom:1px solid rgba(27,16,51,.08)}
  .ffe-links a{height:auto;padding:18px 0;font-size:19px;font-weight:700;color:var(--ffe-ink)}
  .ffe-links a::after{bottom:10px;right:auto;width:28px}
  .ffe-links a.ffe-two small{position:static;margin-left:.3em;font-size:1em;font-weight:inherit;letter-spacing:0;opacity:1}
  .ffe-cta{max-width:560px;height:54px;margin:24px auto 0;font-size:16px}
}
body.ffe-menu-open{overflow:hidden}

/* Scrolling down tucks the menu away (with the logo that hangs below it); scrolling up brings it back. */
html.ffe-nav-away .ffe-nav{transform:translateY(calc(-1 * (var(--ffe-nav-h) + 64px)))}

/* ---------- back to top ---------- */
.ffe-up{position:fixed;right:clamp(12px,1.8vw,32px);top:50%;z-index:2147482000;width:44px;height:44px;margin-top:-22px;border-radius:50%;
  display:grid;place-items:center;background:#D54A82;color:#fff;border:0;cursor:pointer;
  box-shadow:0 10px 24px -10px rgba(27,16,51,.55);opacity:0;visibility:hidden;transform:translateX(16px);
  transition:opacity .25s,transform .25s,visibility 0s .25s,background .25s,color .25s}
html.ffe-show-up .ffe-up{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .25s,background .25s,color .25s}
.ffe-up:hover{background:#c23b72;transform:translateY(-2px)}
.ffe-up:focus-visible{outline:3px solid var(--ffe-orchid);outline-offset:3px}
.ffe-up svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:560px){.ffe-up{width:40px;height:40px;margin-top:-20px}.ffe-up svg{width:17px;height:17px}}
/* over dark or coloured backgrounds: white with a pink arrow */
html.ffe-up-invert .ffe-up{background:#fff;color:#D54A82;box-shadow:0 10px 24px -10px rgba(27,16,51,.45)}
html.ffe-up-invert .ffe-up:hover{background:#f6eef8}
@media (prefers-reduced-motion:reduce){.ffe-nav,.ffe-up{transition:none}}

/* ---------- footer ---------- */
.ffe-foot,.ffe-foot *{box-sizing:border-box}
.ffe-foot{position:relative;z-index:5;background:#595078;color:#fff;font-family:var(--ffe-font);font-size:15px;line-height:1.6;text-align:left}
.ffe-foot__in{max-width:1240px;margin:0 auto;padding:64px clamp(16px,4vw,56px) 32px}
.ffe-foot__grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:40px}
.ffe-foot__brand img{display:block;width:84px;height:84px;margin:0 0 18px;
  /* A white outline that follows the logo's shape (the file has a clear background) */
  filter:drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)}
.ffe-foot__brand p{margin:0;max-width:30ch;color:rgba(255,255,255,.85)}
.ffe-foot h4{margin:0 0 38px;font:700 12px/1 var(--ffe-font);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.65)}
.ffe-foot ul{list-style:none;margin:0;padding:0}
.ffe-foot li{margin:0 0 8px;padding:0}
.ffe-foot a{color:#fff;text-decoration:none}
.ffe-foot li a:hover{color:#ffc2da}
.ffe-foot__tag{display:block;margin:56px 0 0;font:800 clamp(30px,6.4vw,84px)/1 var(--ffe-font);letter-spacing:-.03em;
  color:#fff!important;overflow-wrap:anywhere}
.ffe-foot__fine{margin-top:28px;font-size:13px;color:rgba(255,255,255,.7)}
.ffe-ver{opacity:.75}
@media (max-width:860px){.ffe-foot__grid{grid-template-columns:1fr 1fr}.ffe-foot__brand{grid-column:1/-1}}
@media (max-width:420px){.ffe-foot__grid{grid-template-columns:1fr}}