/*! Notes...

    Author: Jay George
    Author URI: https://jaygeorge.co.uk

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Codekit to output into prod/
    - Class name prefixes are influenced by Namespaces article - http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
    - Other class name prefixes are based on microformats
    - Class relationships are based on BEM structure
    - Order of CSS influenced by ITCSS - https://twitter.com/itcss_io
    - Where CSS groups include framework names such as WordPress or Genesis it means HTML/CSS in this group is based on these solid frameworks

*/
@font-face {
    font-family: "fsalbert-light";
    src: url("/fonts/fs-albert-light.woff2") format("woff2"), url("/fonts/fs-albert-light.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "fsalbert-regular";
    src: url("/fonts/fs-albert-regular.woff2") format("woff2"), url("/fonts/fs-albert-regular.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "fsalbert-bold";
    src: url("/fonts/fs-albert-bold.woff2") format("woff2"), url("/fonts/fs-albert-bold.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
@font-face {
    font-family: "fsalbert-extra-bold";
    src: url("/fonts/fs-albert-bold-extra.woff2") format("woff2"), url("/fonts/fs-albert-bold-extra.woff") format("woff");
    font-weight: 400;
    font-style: normal;
}
:root {
    /* GROUP VARIABLES -- SPACING
    =================================================== */
    --spacing-s-0-0: 0.25rem;
    --spacing-s-0: 0.45rem;
    --spacing-s: 0.8rem;
    --spacing-s-1: 1.1rem;
    --spacing-s-2: 1.35rem;

    --spacing-m: 1.5rem;

    --spacing-l: 1.8rem;
    --spacing-l-static: 1.8rem;

    --spacing-l-1: 2.5rem;

    --spacing-l-2: 4.2rem;
    --spacing-l-3: 4.8rem;
    /* Smaller value for mobile */
    --spacing-l-3-horizontal: var(--spacing-l);
    --spacing-l-3-upper-mq: var(--spacing-l);
    /* e.g. >> Home > 'See All' button */
    --spacing-l-4: 6.5rem;

    --spacing-vh-s-0: 10vh;
    --spacing-vh-s: 12vh;
    /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
    =================================================== */
    /* From lowest to highest value */
    /* e.g. >> Home > hero image */
    --max-width-reading-short: 36rem;
    /* e.g. >> Home > slide */
    --max-width-reading: 37rem;
    --max-width-reading-entry: 41rem;
    /* e.g. >> /what-we-do */
    --max-width-title: 47rem;
    /* e.g. >> /careers */
    --max-width-1: 72rem;
    /* -- */
    --max-width-2: 87rem;
    --max-width-3: 95rem;
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE
    =================================================== */
    /* If you want to use a hue base for the grey... otherwise set to 0deg */
    --colour-grey-hue: 225deg 10%;

    /* Dark to light */
    /* AA compliant as grey text on white background. AAA is 595959 */
    --colour-grey-reading: hsl(var(--colour-grey-hue) 48%);
    --colour-grey-light-1: hsl(var(--colour-grey-hue) 80%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    /* Dark to light */
    --colour-blue-dark: hsl(245deg 93% 11%);
    --colour-blue: hsl(225deg 100% 18%);
    --colour-blue-alpha: hsl(225deg 100% 18% / 75%);
    /* Original */
    /* --colour-pink: hsl(349deg 90% 57%); */
    /* Accessible against vanilla text e.g. >> /about-us > Our trustees Flickity */
    --colour-pink: hsl(349deg 93% 45%);
    --colour-vanilla: hsl(34deg 33% 96%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
    =================================================== */
    --colour-gradient-blue-overlay: linear-gradient(35deg, var(--colour-blue-dark) 20%, transparent 75%);
    /* GROUP VARIABLES -- DECORATION -- TEXT -- FONTS
    =================================================== */
    --font-family-main-light: "fsalbert-light", sans-serif;
    --font-family-main: "fsalbert-regular", sans-serif;
    --font-family-main-bold: "fsalbert-bold", sans-serif;
    --font-family-main-extra-bold: "fsalbert-extra-bold", sans-serif;
    --font-family-headline: "fsalbert-extra-bold", sans-serif;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
    =================================================== */
    /* e.g. Based on Augmented Fourth - https://type-scale.com/ */

    /* Optimise line-height for reading */
    --font-size-reading-line-height: 1.5;

    --font-size-s-0-0: 0.707em;

    /* e.g. Outside scale. Sometimes I go outside scales because of my font-bump adjustmemts */
    /* Decreased at a later root breakpoint */
    /* --font-size-s-0: 0.9em; */
    /* -- */
    --font-size-s-0: 1em;
    --font-size-s-0-line-height: 1.4;
    --font-size-s: 1.1em;
    /* e.g. >> /what-we-do > float heading */
    --font-size-s-2: clamp(1.3em, 7vw, 1.7em);
    --font-size-s-2-line-height: 1.3;
    /* -- */

    --font-size-s-1: clamp(1.1em, 5vw, 1.414em);
    --font-size-s-1-line-height: 1.45;

    /* --font-size-m: 1.999em; */
    --font-size-m: clamp(2.2em, 9vw, 2.4em);;
    --font-size-m-line-height: 1.35;

    --font-size-l: clamp(1.85em, 9vw, 2.827em);
    --font-size-l-line-height: 1.18;

    /* e.g. >> /what-we-do */
    --font-size-l-1: clamp(3em, 12vw, 3.998em);
    --font-size-l-1-line-height: 1;

    --font-size-l-2: 5.653em;

    --font-size-jumbo: clamp(8em, 22vw, 11.302em);
    /* GROUP VARIABLES -- DECORATION -- TEXT -- OTHER
    =================================================== */
    /* e.g. >> Home > News meta */
    --letter-spacing-s: 2px;
    /* GROUP VARIABLES -- DECORATION -- ICONS -- SIZES
    =================================================== */
    --icon-size-m: 1.5em;
    /* e.g. >> Home > Hero Image scroll button */
    --icon-size-l: 3.5em;
    /* GROUP VARIABLES -- DECORATION -- BORDER RADIUS
    =================================================== */
    --border-radius-s: 3px;

    /* GROUP VARIABLES -- OTHER
    =================================================== */
    /* e.g. >> Home > align hero image text with pseudo clip path stop point on hero slide directly below */
    --pseudo-clip-path-stop: 10%;
    --pseudo-clip-path-stop-diagonal: calc(var(--pseudo-clip-path-stop) / 2);

    --clip-top-left: polygon(0% 5%, 5% 0%, 100% 0, 100% 100%, 0 100%);
}
@media (max-width: 449px) {
    :root {
        /* Decrease */
        --spacing-l-4: 5.5rem;
    }
}
/* --mq-root-variable-adjustments-1 */
@media (min-width: 450px) {
    :root {
        /* GROUP VARIABLES -- SPACING
        ===================================================  */
        --spacing-l: 3rem;
        --spacing-l-1: 3.5rem;
    }
}
/* --mq-root-variable-adjustments-2 */
@media (min-width: 730px) {
    :root {
        --spacing-l-3-horizontal: var(--spacing-l-3);
        /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
        =================================================== */
        --colour-gradient-blue-overlay: linear-gradient(35deg, var(--colour-blue-dark) 0%, transparent 65%);
    }
}
/* --mq-subnav-breakpoint-1-after */
@media (min-width: 768px) {
    :root {
        --spacing-l-3-upper-mq: var(--spacing-l-3);
    }
}
/* --mq-text-bump-1-after */
@media (min-width: 1300px) {
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
    =================================================== */
    /* For text bumps based on viewports, e.g.
    font-size: calc(1em + var(--font-bump-1)); */

    :root {
        --font-bump: 0.1vw;
    }
    /* Increase things that do not scale up in good proportion in a media query outside of this (i.e. within the module), otherwise you will have to increase specificity because this is at the beggining of the cascade. */
}
/* --mq-text-bump-2-after */
@media (min-width: 1600px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        /* Decrease */
        --font-size-s-0: 0.9em;
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.115vw;
    }
}
/* --mq-text-bump-3-after */
@media (min-width: 1800px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.23vw;
        /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
        =================================================== */
        /* Make more intense otherwise there's too much neutral */
        --colour-gradient-blue-overlay: linear-gradient(35deg, var(--colour-blue-dark) 15%, transparent 65%);
    }
}




/* GROUP RESET / FRAMEWORK - Taken from html5boilerplate.com
=================================================== */
/* These are recommended rules so we don't want to lint them */
audio,canvas,iframe,img,svg,video {
    vertical-align: middle;
}
/* GROUP RESET / FRAMEWORK / NORMALISE - 2020-03-09 - https://necolas.github.io/normalize.css
=================================================== */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}[type=button],[type=reset],[type=submit],button{-webkit-appearance:button}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:none;padding:0}[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring,button:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}
/* GROUP ELEMENTS / FRAMEWORK
=================================================== */
* {
    /* Prevent flickering.
    When you click a link or a button or a div that has a click function on it,
    usually a grey box flickers. The below prevents that. Source: http://goo.gl/MZ4Dr5 */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    /* http://www.paulirish.com/2012/box-sizing-border-box-ftw/ */
    /* Don't do *::before, *::after - this has caused me performance problems before with flickering images */
    box-sizing: border-box;
}

/* =JFG. HTML default e.g. when we are separating lines with <br> like addresses in proposals */
html {
    font-size: calc(1em + var(--font-bump));
    /* Opinion on this will differ depending on the font you choose. Do not carpet bomb line height with a * selector though */
    line-height: 1.5;
    /* Since there is no way to set an offset you may wish to consider a padding-block-start rhythm rather than padding-block-end for target elements of smooth scrolls */
    scroll-behavior: smooth;
}

body {
    /* https://app.typographychecklist.com/ - 23. Use standard ligatures but avoid using discretionary ligatures in body text*/
    font-feature-settings: "kern", "liga", "clig", "calt";
    font-family: var(--font-family-main-light);
    background: var(--colour-vanilla);
    color: var(--colour-blue);
}

/* Prevent images stretching too much */
/* =JFG. Use display:inline-block to prevent white space (read full answers here...) http://stackoverflow.com/questions/5804256/why-an-image-inside-a-div-has-an-extra-space-below-the-image */
img {
    display: inline-block;
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--colour-pink);
    color: white;
}

/* Reset */
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
figure,
blockquote {
    margin-bottom: 0;
    margin-top: 0;
}

/* Reset */
figure {
    margin-left: 0;
    margin-right: 0;
}

ul {
    padding-inline-start: 0;
    padding-block-end: 0;
}

li {
    padding-block-end: var(--spacing-s-0);
}

dl,
dt,dd,
th,
td {
    padding-block-end: var(--spacing-s);
}

p {
    padding-block-end: var(--spacing-s-1);
}

p,
ol,
ul {
    line-height: var(--font-size-reading-line-height);
}

/* Nested lists */
ol ol,
ol ol li:last-child,
ul ul,
ul ul li:last-child {
    padding-block-end: 0;
}

p + ul {
    padding-block-start: var(--spacing-s);
}

strong {
    font-family: var(--font-family-main-bold);
}



/* GROUP ELEMENTS / FRAMEWORK / HEADINGS
=================================================== */
h1,
.h1,
h1 a,
.h1 a,
h2,
.h2,
h2 a,
.h2 a,
h3,
.h3,
h3 a,
.h3 a {
    font-family: var(--font-family-headline);
    /* font-weight: var(--font-family-headline-weight-normal); */
    /* https://app.typographychecklist.com/ 91 - Use discretionary ligatures and swashes in headlines */
    font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
    /* e.g. >> Home > Our Stories */
    color: var(--colour-pink);
    text-align: center;
}

/* --mq-max-width-reading-before */
@media (max-width: 36.999em) {
    h1,
    .h1,
    h1 a,
    .h1 a,
    h2,
    .h2,
    h2 a,
    .h2 a,
    h3,
    .h3,
    h3 a,
    .h3 a,
    p,
    body .c-text-columns p,
        /* Flickity > Overrides */
    body .flickity-page-dots {
        text-align: left;
    }
}

h4,
.h4,
h4 a,
.h4 a {
    font-family: var(--font-family-headline);
    font-weight: var(--font-family-headline-weight-normal);
}

/* --- */

h1,
.h1 {
    font-size: var(--font-size-l-1);
    line-height: var(--font-size-l-1-line-height);
}

h2,
.h2 {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

h3,
.h3 {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}

h4,
.h4 {
    font-size: var(--font-size-s-2);
    line-height: var(--font-size-s-2-line-height);
}

h5,
.h5 {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
}

h6,
.h6 {
    font-size: var(--font-size-s);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / HIGH PRIORITY
=================================================== */
h1,
.h1,
h2,
.h2 {
    padding-block-end: var(--spacing-l);
}

* + h1,
* + .h1,
.c-sub-nav ~ .s-entry-header h1,
* + h2,
* + .h2,
article + article {
    /* e.g. >> /about-us > Who we are title */
    padding-block-start: var(--spacing-l-3-upper-mq);
}

* > h1,
* > .h1 {
    /* e.g. >> /single */
    /* e.g. >> /contact-us */
    /* e.g. >> /careers */
    padding-block-start: var(--spacing-l-4);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / LOW PRIORITY
=================================================== */
h3,
.h3,
h4,
.h4 {
    padding-block-end: var(--spacing-m);
    color: var(--colour-blue);
}

h5,
.h5,
h6,
.h6 {
    padding-block-end: var(--spacing-s-0-0);
    color: var(--colour-blue);
}

* + h3,
* + .h3,
    /* e.g. p followed by a div followed by an h3 */
* > h3,
* > .h3,
* + h4,
* + .h4,
    /* e.g. p followed by a div followed by an h4 */
* > h4,
* > .h4 {
    padding-block-start: var(--spacing-s);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / EXCEPTIONS / VERTICAL SPACING
=================================================== */
ul + h2,
ul + .h2 {
    padding-block-start: var(--spacing-s);
}

h1 + h2,
h1 + .h2,
.h1 + .h2,
h2 + h3,
hr + * {
    padding-block-start: 0;
}




/* GROUP ELEMENTS / FRAMEWORK / MAIN
=================================================== */
main:focus {
    outline: none;
}

main > *:last-child:not(.o-slide):not(.c-article-list) {
    padding-block-end: 0;
}




/* GROUP ELEMENTS / FRAMEWORK / NAV
=================================================== */
/* Based on default WordPress theme CSS, but modified to improve accessibility */
nav {
    clear: both;
    display: block;
    width: 100%;
}

nav ul {
    list-style: none;
    display: flex;
    flex-direction: column;
    /* Gap not supported in Safari */
    /* gap: var(--spacing-m); */
    padding-inline-start: 0;
    padding-inline-end: 0;
}

nav li {
    position: relative;
}

nav a {
    /* =JFG. Needed to increase touch target */
    display: block;
    font-family: var(--font-family-main-bold);
}

/* GROUP ELEMENTS / FRAMEWORK / NAV / NO FLEX GAP SUPPORT
=================================================== */
nav li {
    padding-block-end: var(--spacing-m);
}





/* GROUP ELEMENTS / FRAMEWORK / SVGs
=================================================== */
/* https://twitter.com/andybelldesign/status/1098915626050117633 */
svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

/* Notes...

    - use a span to ensure first-child/last-child selector works e.g.

    <div class="c-btn">
        <a href="">
            <span>Some text</span>
            <svg />
        </a>
    </div>

*/
a > svg:first-child:not(:last-child) {
    margin-right: var(--spacing-s-2);
}

a > svg:last-child:not(:first-child) {
    margin-left: var(--spacing-s-2);
    margin-right: 0;
}

.c-btn a > svg:first-child:not(:last-child) {
    margin-right: var(--spacing-s);
}

.c-btn a > svg:last-child:not(:first-child) {
    margin-left: var(--spacing-s);
    margin-right: 0;
}

.c-btn svg {
    font-size: 1.1em;
}




/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS }
=================================================== */
/* Notes...

    - Link styles are stored as group selectors rather than scattered, since we have multiple properties here.
    - Do not put transitions on all links, it makes keyboard navigation feel slower. Instead, use transition animations on an individual basis e.g. skip-to-content

*/

/* Default */
a {
    text-decoration-skip-ink: auto;
    text-underline-position: under;
    color: var(--colour-blue);
}

/* .u-link-style-1 a, */
/* Components > Framework > Entry > Entry Content */
.s-entry-content a {
    color: var(--colour-pink);
}
/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS
=================================================== */
/* .u-link-style-custom-1:focus a, */
a:focus,
summary:focus,
.c-btn a:focus,
button:focus,
[type="submit"]:focus,
    /* Elements > Framework > Forms */
[type="text"]:focus,
[type="email"]:focus,
textarea:focus,
body .c-flickity:focus {
    outline: 4px solid var(--colour-blue);
}

.c-flickity:focus {
    border-bottom: 4px solid var(--colour-blue);
}

/* Elements > Framework > Forms */
[type="text"]:focus,
[type="email"]:focus,
textarea:focus {
    /* Light colour here */
    background: seashell;
}

p a:focus {
    /* Offset for text */
    outline-offset: 5px;
}

nav a:focus {
    /* Increase */
    outline-offset: 10px;
}
/* GROUP ELEMENTS / FRAMEWORK / (NON CORE) / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS -- remove for mouse
=================================================== */
/* Notes...

    Remove Focus Styles for Mouse Users
    -----------------------------------
    - You can use https://github.com/WICG/focus-visible to cancel focus styles for mouse users
    [1] Add it like this - <script src="js/focus-visible.js" async></script>

*/
/* Native for browsers that support it - https://caniuse.com/#search=focus-visible
https://twitter.com/LeaVerou/status/1045836563505188867 */
:focus:not(:focus-visible) {
    outline: none!important;
}
/*
  This will hide the focus indicator if the element receives focus via the mouse,
  but it will still show up on keyboard focus.
*/
.js-focus-visible :focus:not(.focus-visible) {
    outline: none!important;
}
/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / HOVER
=================================================== */
a:hover {
    text-decoration-color: black;
}

/* Notes...

    - Use "u-link-style-custom" prefix then these are pretty much rare/1 off
    - Still include them in this group so we can see all link styles for easy maintenance

*/
.s-entry-content a:hover,
.u-link-style-custom-1:hover a {
    color: var(--colour-grey-reading);
}




/* GROUP ELEMENTS
=================================================== */
hr {
    /* e.g. footer */
    border-top: 1px solid var(--colour-grey-light-1);
    /* -- */
    margin-block-start: var(--spacing-l-1);
    margin-block-end: var(--spacing-l-1);
}

hr:last-child {
    /* e.g. >> /corporate-information */
    margin-block-end: 0;
}

small {
    color: var(--colour-grey-reading);
    font-size: var(--font-size-s-0-0);
}

small p {
    padding-block-end: 0;
}
/* GROUP ELEMENTS / FRAMEWORK / (NON CORE)
=================================================== */
/* Notes...

    iframes, taken from https://css-tricks.com/fluid-width-video

*/

/* HTML Example...

    .o-video-wrapper
        iframe

*/
.o-video-wrapper {
    position: relative;
    /* 16:9 */
    padding-bottom: 56.25%;
    height: 0;

    margin-block-end: var(--spacing-s);
}

.o-video-wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}




/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE
=================================================== */
/* Notes...

	- Used to introduce hero-like text, occupying most of the screen vertically
	- Use an additional component class to handle the decoration

*/
/* HTML Example...

    .o-slide.c-slide
        .o-slide__inner
        .c-slide__arrow-cta <- e.g. 'scroll up' arrow

*/
/* Modifiers...

    .o-slide--mini <-- smaller vertically
    .o-slide--with-flickity <-- some accomodations for horizontal slow

*/
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE / LAYOUT
=================================================== */
.o-slide {
    position: relative;

    display: flex;
    flex-direction: column;
    justify-content: center;

    min-height: 75vh;
}

.o-slide__inner > * {
    max-width: calc(var(--max-width-reading));
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.o-slide--mini {
    min-height: 50vh;
}

/* --mq-5k-height-ish */
@media (min-height: 1200px) {
    .o-slide:not(.o-slide--mini) {
        min-height: 65vh;
    }
}

/* Custom */
@media (min-width: 1024px) {
    .o-slide__inner > * {
        /* Make up for larger text */
        max-width: calc(var(--max-width-reading) + 1.5em);
    }
}

.o-slide--compressed {
    min-height: initial;
}
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE / SPACING
=================================================== */
.o-slide {
    padding: var(--spacing-vh-s) var(--spacing-l);
}

/* e.g. >> /about-us */
.o-slide--compressed {
    padding-block-end: var(--spacing-l);
}

.o-slide--mini {
    padding-block-start: var(--spacing-vh-s-0);
    padding-block-end: var(--spacing-vh-s-0);
}

.o-slide .o-hero-buttons {
    /* So everything is still centered */
    padding-block-end: 0;
}

.c-float + .o-slide--with-flickity {
    padding-block-start: 0;
    padding-block-end: 0;
}

/* --mq-float-breakpoint-2-after */
@media (min-width: 1600px) {
    .c-float + .o-slide {
        /* Decrease */
        padding-block-start: 0;
        padding-block-end: 0;
    }
}

.o-slide--with-flickity + .o-slide--with-flickity {
    padding-block-start: 0;
}




/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / HERO BUTTONS { / BUTTON HERO}
=================================================== */
/* Notes...

    - Used to separate buttons in a blocked space

*/

/* Modifiers...

    .o-hero-buttons--left <- align left e.g. you might use this for hero buttons below a map

*/

/* HTML Example...

    <div class="o-hero-buttons">
        <div class="c-btn">
            <a href="">
                Some button
            </a>
        </div>
    </div>

*/
.o-hero-buttons {
    padding: var(--spacing-l-2);
    text-align: center;
}

/* --mq-max-width-reading-before */
@media (max-width: 36.999em) {
    .o-hero-buttons {
        text-align: left;
        padding-inline-start: var(--spacing-l);
    }
}
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / HERO BUTTONS { / BUTTON HERO} / SPACING MODIFICATIONS
=================================================== */
.o-slide .o-hero-buttons {
    padding-inline-start: 0;
    padding-inline-end: 0;
}

.o-hero-buttons + h2 {
    padding-block-start: var(--spacing-s);
}

h2 + .o-hero-buttons {
    padding-block-start: var(--spacing-s-1);
}

.c-flickity + .o-hero-buttons {
    padding-block-start: var(--spacing-l-3);
}




/* GROUP COMPONENTS / FRAMEWORK / SKIP LINKS
=================================================== */
/* .u-screen-reader*/
.c-skip-to-content:focus,
body .genesis-skip-link a:focus {
    position: fixed!important;
    z-index: 1;
    top: 0;
    left: 0;
    height: initial;
    width: initial;
    clip: initial;
    padding: var(--spacing-m) var(--spacing-l);
    font-size: var(--font-size-s);
    text-decoration: none;
    background: white;
    outline-offset: 0;
}

.c-skip-to-content,
.genesis-skip-link {
    font-family: var(--font-family-main-bold);
}




/* GROUP COMPONENTS / FRAMEWORK / BUTTONS
=================================================== */
/* Notes...

    Wrap the .c-btn around the a href instead of the other way around because this is the most valid HTML.
    http://stackoverflow.com/questions/5320404/wrap-link-a-around-div

    <div class="c-btn">
        <a href>
        </a>
    </div>

*/

/* anchor instead of just .c-btn because the browser focusses on the a element, which is the background color we want to change
should be...
*/
.c-btn a,
    /* Components > Framework > Nav */
button,
    /* Override form background default */
    /* e.g. Components > Framework > Comments */
[type="submit"] {
    display: inline-block;
    /* I've found it more stable to use pxls rather than ems. */
    padding: 17px 35px;
    /* Optional */
    font-size: 1.125rem;
    line-height: 1.3;
    /* e.g. >> Home > slide */
    font-family: var(--font-family-main);
    /* margin-right: 1rem; Don't do this because if the button is centered it will not be centered correctly */
    text-decoration: none;
    cursor: pointer;
    /* =JFG. Hover states with a slight delay, but focus without any because keyboard users want quick feedback. Do not use 'all' because it resizes slowly when resizing the browser window */
    transition: background-color 0.2s ease 0s;
}

/* Not .c-btn + .c-btn in case a button is next to a different tag such as <p/> */
.c-btn,
button {
    margin-right: 1rem;
}

.c-btn:last-child {
    margin-right: 0;
}

.c-btn {
    position: relative;
    display: inline-block;
    /* Components > Framework > Forms > Layout */
    margin-block-end: 1.25rem;
}

.c-btn a {
    /* e.g. icons in buttons */
    display: flex;
    align-items: center;
    text-align: left;
}

/* Components > Framework > Nav */
button,
[type="search"],
[type="submit"] {
    /* =JFG. Cancel default button appearance */
    -webkit-appearance: none!important;
    border: none;
}

/* Components > Framework > Nav */
button {
    /* =JFG. Cancel default button appearance */
    background: none;
}

button svg {
    font-size: 1.3em;
}

.s-entry-content + .c-btn {
    /* e.g. >> /work-with-us */
    padding-block-start: var(--spacing-m);
    padding-inline-start: var(--spacing-l);
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / TYPES
=================================================== */
/* 1 */
.c-btn--1 a,
button.c-btn--1,
    /* e.g. Components > Framework > Forms > Layout */
    /* .c-form [type="submit"], */
.gform_wrapper form [type="submit"] {
    background: var(--colour-pink);
    color: white;
    border-radius: var(--border-radius-s);
}


/* 2 */
.c-btn--2 a,
button.c-btn--2 {
    background: white;
    border-radius: var(--border-radius-s);
    /* clip-path: polygon(0 0, 90% 0, 100% 10%, 100% 100%, 10% 100%, 0 90%); */
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / ACCESSIBILITY / HOVER
=================================================== */
/* These should be slightly different to focus states. Subtle effects such as changing the background color from blue to darkblue are best for hover. We want to gently suggest rather than pop out (opposite of focus states).

    - Consider darkening the background color slightly e.g. blue to darkblue
    - Here is a good example...
    https://material-components.github.io/material-components-web-catalog/#/component/button

*/
.c-btn a:hover {
    /* Cancel link hover effect */
    border-bottom: 0;
}

/* 1 */
/* .c-btn--background-transition-example a:hover {
    background-color: var(--colour-brown-dark);
} */

/* 2 */
/* .c-btn--2 a:hover {

} */




/* GROUP COMPONENTS / FRAMEWORK / SITE LOGO
=================================================== */
.c-site-logo svg {
    width: 100%;
    height: 100%;
    max-height: 2.25rem;
    max-width: 12rem;
}

/* --mq-full-nav-before */
@media (max-width: 1199px) {
    .c-site-logo {
        padding: var(--spacing-l);
    }

    .c-nav-mobile-button svg {
        font-size: 2.25rem;
    }
}

/* Custom to Custom */
@media (min-width: 320px) and (max-width: 1599px) {
    .c-site-logo {
        padding-inline-start: var(--spacing-l);
    }

    .c-nav-mobile-button {
        position: absolute;
        top: 0;
        right: 0;
        padding: 1.5em var(--spacing-m);
    }
}

/* --mq-root-variable-adjustments-1 */
@media (min-width: 450px) {
    .c-nav-mobile-button {
        padding-block-start: 2.5em;
        padding-block-end: 2.5em;
    }
}

/* Custom to --mq-full-nav-before */
@media (min-width: 500px) and (max-width: 1199px) {
    .c-site-logo svg {
        /* Increase */
        max-height: 3em;
    }

    .c-nav-mobile-button svg {
        /* Increase */
        font-size: 3em;
    }
}

/* Custom */
@media (min-width: 500px) {
    .c-site-logo svg {
        /* Increase */
        max-width: 17rem;
    }
}

/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .c-site-logo {
        position: relative;
        /* Correct optical alignment with nav */
        top: -0.2em;
    }
}




/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER
=================================================== */
/* HTML Example...

    .c-site-header
        .c-site-header__nav
        .c-site-header__search

*/
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / LAYOUT
=================================================== */
/* --mq-full-nav-before */
@media (max-width: 1199px) {
    .c-site-header__nav ul,
    .c-site-header__search {
        position: absolute;
        /* Above sub-nav e.g. e.g. >> /about-us.php */
        z-index: 2;
        width: 100%;
        padding: var(--spacing-l);
        padding-block-start: var(--spacing-l-1);
    }

    .js-added---nav-is-open .c-site-header__nav ul,
    .js-added---nav-is-open .c-site-header__search {
        height: 100%;
    }
}

/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .c-site-header {
        display: flex;
        align-items: center;
        min-height: 10vh;
        max-width: var(--max-width-2);
        margin-inline-start: auto;
        margin-inline-end: auto;
    }

    .c-site-header__nav ul {
        flex-direction: row;
        display: flex;
        justify-content: flex-end;
        /* Gap not supported in Safari */
        /* Increase */
        /* gap: var(--spacing-l); */
    }
}

/* .c-site-header__search {

} */
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / SPACING
=================================================== */
.c-site-header__nav ul {
    padding-block-end: 0;
}

/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .c-site-header__nav {
        padding-inline-end: var(--spacing-l);
    }

    .c-site-header__nav li {
        padding-block-end: 0;
    }

    /* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / NO FLEX GAP SUPPORT
    =================================================== */
    .c-site-header__nav li:not(:last-child) {
        padding-inline-end: var(--spacing-l);
    }
}

/* --mq-text-bump-3-after */
@media (min-width: 1800px) {
    .c-site-header {
        padding-inline-start: var(--spacing-l);
        padding-inline-end: var(--spacing-l);
    }
}
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / DECORATION
=================================================== */
.c-site-header__nav a {
    text-decoration: none;
}

/* --mq-full-nav-before */
@media (max-width: 1199px) {
    .c-site-header__nav a {
        font-size: var(--font-size-s-2);
    }
}




/* GROUP COMPONENTS / SITE HEADER / SEARCH
=================================================== */
[type="search"] {
    padding: 17px 25px;
    /* Iphone SE */
    padding-inline-end: 0;
    font-size: var(--font-size-s-0);
    line-height: 1.3;
}

[type="submit"] {
    background: var(--colour-pink);
    color: white;
    font-size: var(--font-size-s-0);
}

.search-form {
    float: right;
}

.header-widget-area {
    flex-basis: 30%;
}

/* Custom */
@media (max-width: 374px) {
    .search-form {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .search-form [type="search"] {
        padding-inline-start: var(--spacing-l);
    }
}

/* Custom */
@media (min-width: 500px) and (max-width: 1349px) {
    .search-form {
        position: absolute;
        z-index: 1;
        right: 0;
    }
}

@media (min-width: 900px) and (max-width: 1199px) {
    .search-form {
        /* Custom */
        top: 2.8em;
        right: 9em;
    }
}

/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .search-form {
        /* Same as .c-site-header height */
        top: 10vh;
    }
}

.widget_search input[type="submit"]:focus {
    display: initial;
}

@media (min-width: 1350px) and (max-width: 1599px) {
    .search-form {
        font-size: 0.9em;
    }

    .header-widget-area {
        flex-basis: 36%;
        margin-inline-end: var(--spacing-s-0);
    }
}




/* GROUP COMPONENTS / FRAMEWORK / NAV / CURRENT PAGE
=================================================== */
/* --mq-full-nav-before */
@media (max-width: 1199px) {
    .c-site-header .c-current-menu-item {
        text-decoration: underline;
        text-decoration-color: var(--colour-pink);
    }
}

.c-current-menu-item {
    border-block-end: 4px solid transparent;
}

/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .c-current-menu-item {
        border-block-end-color: var(--colour-pink);
    }
}




/* GROUP COMPONENTS / FRAMEWORK / ENTRY / ENTRY CONTENT
=================================================== */
/* Notes...

    - Based on WordPress Genesis Entry Content but tailored for neutral frameworks

*/

.s-entry-content {
    max-width: var(--max-width-reading-entry);
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    padding-block-end: var(--spacing-l);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.s-entry-content * {
    /* Good default */
    /* e.g. >> /corporate-information */
    text-align: left;
}

.s-entry-content ul,
.s-entry-content ol {
    padding-inline-start: 1.3rem;
}

.s-entry-content p + ul,
.s-entry-content p + ol {
    padding-block-start: var(--spacing-s)
}

.s-entry-content li {
    /* e.g. ul li */
    padding-inline-start: var(--spacing-s-0-0);
}

.s-entry-content > .h1 {
    padding-block-start: 0;
}

/* e.g. when we have .s-entry-child divs following each other with blocks */
.s-entry-content:last-child,
    /* e.g. cancel the last p tag from adding to the VERTICAL SPACING */
.s-entry-content > *:last-child {
    padding-block-end: 0;
}

/* e.g. an img output with Perch blocks that is wrapped in a figure element */
.s-entry-content figure {
    margin: 0;
}

.single .s-entry-content {
    padding-block-end: var(--spacing-l-4);
}
/* GROUP COMPONENTS / FRAMEWORK / ENTRY / ENTRY CONTENT / DECORATION
=================================================== */




/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE
=================================================== */
/* HTML Example...

    .c-hero-image
        .c-hero-image__text
            p
        .c-hero-image__button
            a
                some text
        img.c-hero-image__image

*/
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / LAYOUT
=================================================== */
.c-hero-image__image {
    height: 90vh;
    width: 100vw;
    object-fit: cover;
    object-position: top;
}

.c-hero-image__text {
    position: absolute;
    top: 50%;
    max-width: var(--max-width-reading-short);
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-hero-image__button {
    position: absolute;
    bottom: var(--spacing-l-1);
    right: var(--spacing-l-2);
}

/* Custom */
@media (min-width: 1024px) {
    .c-hero-image__text {
        left: var(--pseudo-clip-path-stop);
        padding: 0;
        top: 41vh;
    }
}

/* --mq-5k-height-ish */
@media (min-height: 1200px) {
    .c-hero-image__image {
        height: 51em;
    }

    .c-hero-image__text {
        top: 23em;
    }
}

/* --mq-max-width-1-after */
@media (min-width: 85rem) {
    .c-hero-image__text {
        --boost: 2;
        left: calc((100vw - var(--max-width-2) + var(--spacing-l-4) * var(--boost)) / 2);
    }
}

/* Custom */
@media (min-width: 2000px) {
    .c-hero-image__text {
        --boost: 1;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / DECORATION
=================================================== */
.c-hero-image {
    position: relative;
}

.c-hero-image::before {
    content: "";
    position: absolute;
    height: 100%;
    width: 100%;
    background: var(--colour-gradient-blue-overlay);
}

.c-hero-image__text p {
    color: white;
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

.c-hero-image__button a {
    color: white;
    /* font-size: var(--font-size-s-1); */
}

.c-hero-image__button a:focus {
    outline-color: white;
}

.c-hero-image__button svg {
    font-size: var(--icon-size-l);
}




/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / ENTRY / ENTRY HEADER
=================================================== */
/* HTML Example...

    .s-entry-header
        .s-entry-header__logo <-- Optional
            svg
            .s-entry-header__logo__sub <-- e.g. "Foundation" on /shaw-trust-foundation
         p

*/
/* Modifiers...

    .s-entry-header--with-hero-image <-- contains a panoramic image and smaller text

*/
.s-entry-header {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
    /* e.g. >> /about-us */
    /* e.g. >> /terms-and-conditions */
    padding-block-end: var(--spacing-l);
}

.s-entry-header > * {
    max-width: var(--max-width-title);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.s-entry-header__image {
    max-width: var(--max-width-1);
    padding-block-start: var(--spacing-m);
    text-align: center;
}

.s-entry-header__logo {
    /* e.g. >> /shaw-trust-foundation */
    text-align: center;
    padding-block-start: var(--spacing-l-4);
    padding-block-end: var(--spacing-l-4);
}

.s-entry-header__logo__sub,
.s-entry-header__logo svg {
    width: 100%;
    height: 100%;
    max-width: 26rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
    fill: var(--colour-pink);
}

.s-entry-header__logo__sub {
    padding-block-start: var(--spacing-s);
    text-align: right;
    font-size: var(--font-size-m);
    color: var(--colour-pink);
}

.s-entry-header p {
    font-size: var(--font-size-s-1);
}

.s-entry-header p:last-child {
    /* e.g. >> /what-we-do */
    padding-block-end: var(--spacing-l-3);
}

.s-entry-header--with-hero-image p {
    font-size: var(--font-size-s);
}

/* --mq-subnav-breakpoint-1-before */
@media (max-width: 767px) {
    .s-entry-header__logo {
        text-align: left;
        padding-block-start: var(--spacing-l-3);
        padding-block-end: var(--spacing-l-3);
    }

    .s-entry-header__logo svg {
        width: 90%;
    }
}




/* GROUP COMPONENTS / SCROLL ARROW
=================================================== */
/* Notes...

	- Primative component for a scroll arrow e.g. /contact page

*/
/* HTML Example...

*/
/* Modifiers...

*/
.c-scroll-arrow {
    display: block;
    width: 100%;
    padding-inline-end: var(--spacing-l);
    /* Override main last child */
    padding-block-end: var(--spacing-l)!important;
    text-align: right;
    font-size: var(--icon-size-l);
}




/* GROUP COMPONENTS / COLUMNS
=================================================== */
.c-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(450px, 1fr));
    gap: var(--spacing-l-3);

    max-width: var(--max-width-1);
    margin-inline-start: auto;
    margin-inline-end: auto;

    padding: var(--spacing-l);
    padding-block-end: var(--spacing-l-4);
}

.c-columns * {
    text-align: left;
}

.c-columns h2 {
    font-size: var(--font-size-m);
}

.c-columns h3 {
    /* Decrease */
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
    padding-block-end: var(--spacing-s);
}

.c-columns p {
    padding-block-end: var(--spacing-m);
}




/* GROUP COMPONENTS / SLIDE / LAYOUT
=================================================== */
/* Notes...


*/
/* HTML Example...

    .o-slide.c-slide

*/
.c-slide__arrow-cta {
    position: absolute;
    bottom: var(--spacing-l);
    right: var(--spacing-l);
    color: white;
}
/* GROUP COMPONENTS / SLIDE / DECORATION
=================================================== */
.c-slide--1 {
    background: linear-gradient(to bottom right,
    var(--colour-blue-dark) var(--pseudo-clip-path-stop-diagonal),
    var(--colour-blue) var(--pseudo-clip-path-stop-diagonal),
    var(--colour-blue) calc(100% - var(--pseudo-clip-path-stop-diagonal)),
    var(--colour-blue-dark) calc(100% - var(--pseudo-clip-path-stop-diagonal))
    );
}

.c-slide--2 {
    background: linear-gradient(25deg,
    var(--colour-pink) var(--pseudo-clip-path-stop-diagonal),
    var(--colour-blue) var(--pseudo-clip-path-stop-diagonal),
    var(--colour-blue) calc(100% - var(--pseudo-clip-path-stop-diagonal))
    );
}

.c-slide--1,
.c-slide--1 a,
.c-slide--2,
.c-slide--2 a {
    color: white;
}

/* Override */
.c-slide .c-btn a {
    color: var(--colour-blue);
}

.c-slide p {
    font-size: var(--font-size-s-1);
}

.c-slide a:focus {
    outline-color: white;
}

.c-slide .c-text-columns p,
.c-slide .c-text-columns ol {
    font-size: var(--font-size-s-0);
    text-align: left;
}

.c-slide .c-text-columns ol {
    padding-inline-start: var(--spacing-s);
}

.c-slide__arrow-cta svg {
    font-size: var(--icon-size-l);
}




/* GROUP COMPONENTS / SLIDE / INFO
=================================================== */
/* GROUP COMPONENTS / SLIDE / INFO / LAYOUT
=================================================== */
.c-slide__info {
    display: grid;
    gap: var(--spacing-l-4);
    text-align: center;
}

.c-slide__info * {
    color: white;
}

.c-slide__info {
}

/* Custom */
@media (min-width: 768px) {
    .c-slide__info:not(.c-slide__info--one-column) {
        grid-template-columns: 1fr 1fr;
    }

    .c-slide__info__column {
        position: relative;
    }

    .c-slide__info__column:not(:last-child)::before {
        --border: 1px;

        content: "";
        position: absolute;
        height: 100%;
        right: calc(0% - var(--spacing-l-4) / 2 - var(--border));
        border: var(--border) solid white;
    }
}




/* GROUP COMPONENTS / DOWNLOAD CARD
=================================================== */
/* Notes...

	-

*/
/* HTML Example...

    .c-download-cards
        .c-download-cards__item
            .c-download-cards__item__card
            .c-download-cards__item__link

*/
/* Modifiers...

    .c-download-cards__item--1 <-- pink card

*/
.c-download-cards {
    display: flex;
    flex-wrap: wrap;
    /* Gap not supported in Safari */
    /* gap: var(--spacing-l); */

    padding-block-start: var(--spacing-l);
}

.c-download-cards__item__card {
    max-width: 30rem;

    padding: var(--spacing-l-2) var(--spacing-m);
    margin-block-end: var(--spacing-s);
    background: var(--colour-blue);
}

.c-download-cards__item * {
    color: white;
}

.c-download-cards__item--1 .c-download-cards__item__card {
    background: var(--colour-pink);
}
/* GROUP COMPONENTS / DOWNLOAD CARD / NO FLEX GAP SUPPORT
=================================================== */
.c-download-cards__item__link {
    padding-block-end: var(--spacing-m);
}

/* Custom */
@media (min-width: 768px) {
    .c-download-cards__item {
        padding-inline-end: var(--spacing-l);
    }
}





/* GROUP COMPONENTS / WORDPRESS / SEARCH RESULTS
=================================================== */
/* Notes...

    e.g. /?s=about

*/
.search-results .entry-title {
    padding-block-end: 0;
}




/* GROUP COMPONENTS / WORDPRESS / PAGINATION
=================================================== */
/* Notes...

	-

*/
/* HTML Example...

    <div class="archive-pagination pagination" role="navigation" aria-label="Pagination">
        <ul>
            <li class="active">
                <a href="sitename/?s=searchterm" aria-label="Current page" aria-current="page">
                    <span class="screen-reader-text">Go to page</span>
                    1
                </a>
            </li>
            <li>
                <a href="sitename/page/2/?s=searchterm">
                    <span class="screen-reader-text">Go to page</span>
                    2
                </a>
            </li>
            <li>
                <a href="sitename/page/3/?s=searchterm">
                    <span class="screen-reader-text">Go to page</span>
                    3
                </a>
            </li>
            <li class="pagination-omission">
                <span class="screen-reader-text">Interim pages omitted</span>
                …
            </li>
            <li>
                <a href="sitename/page/7/?s=searchterm">
                    <span class="screen-reader-text">Go to page</span>
                    7
                </a>
            </li>
            <li class="pagination-next">
                <a href="sitename/page/2/?s=searchterm">
                    <span class="screen-reader-text">Go to</span>
                    Next Page »
                </a>
            </li>
        </ul>
    </div>

*/
/* GROUP COMPONENTS / WORDPRESS / PAGINATION / LAYOUT
=================================================== */
.pagination ul {
    display: flex;
    justify-content: center;
}
/* GROUP COMPONENTS / WORDPRESS / PAGINATION / SPACING
=================================================== */
.pagination {
    /* Override 'main' conditions */
    padding-block-end: var(--spacing-l-3)!important;
    padding-block-start: var(--spacing-l-4);
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.pagination li:not(:last-child) {
    margin-inline-end: var(--spacing-l);
}
/* GROUP COMPONENTS / WORDPRESS / PAGINATION / DECORATION
=================================================== */
.pagination li {
    list-style: none;
}




/* GROUP UTILITIES / FRAMEWORK
=================================================== */
.qa-test {
    background-color: red!important;
    border: dashed!important;
}

/* Components > Framework > Nav */
.no-js .u-js-only {
    display: none!important;
}

/* Text meant only for screen readers. */
/* Components > Framework > Nav */
.u-screen-reader-text {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* END SCREEN READER TEXT
    ------------------------- */
}

/* Needed if the text should be visible on keyboard focus */
.u-screen-reader-text:focus {
    clip: auto!important;

    z-index: 100000; /* Above WP toolbar. */
    display: block;
    top: 0;
    left: 0;

    width: auto;
    height: auto;
}



/* GROUP UTILITIES / FRAMEWORK / LAYOUT / CONSTRAINTS / MAX
=================================================== */
.u-width-max-reading,
.u-width-max-2 {
    width: 100%;
    max-width: var(--max-width-reading);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.u-width-max-2 {
    max-width: var(--max-width-2);
}

.u-width-max--uncentered {
    margin-left: 0;
}




/* GROUP UTILITIES
=================================================== */
/* --mq-full-nav-after */
@media (min-width: 1200px) {
    .u-sticky-header {
        position: sticky;
        top: -1em;
        z-index: 1;
    }
}




/* GROUP UTILITIES / PANELS
=================================================== */
.u-white-panel {
    /* e.g. wrap around .c-site-header */
    background: white;
}

.u-white-panel-staggered {
    --stop: calc(var(--font-size-m) * 1.5);

    /* e.g. wrap around the news */
    background: white;
    background: linear-gradient(to bottom, transparent 0%, transparent var(--stop), white var(--stop));
}

/* Custom */
@media (min-width: 990px) {
    /* Modifier class for a more accentuated stagger e.g. home > news */
    .u-white-panel-staggered--more {
        /* Increase */
        --stop: 11em;
    }
}




/* GROUP GRAVITY FORMS
=================================================== */
/* e.g. >> /contact */
.gform_confirmation_wrapper {
    text-align: center;
}