/*! Notes...

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

    ABOUT THIS CSS
    ===================================================
    - Only edit filename.css, then process with Laravel Mix (1. run `sudo npm install` 2. Configure with `webpack.mix.js` 3. `npm run watch` to constantly monitor and compile 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

    For more information open `readme.css`

*/
:root {
    /* GROUP VARIABLES -- SPACING
    =================================================== */
    --spacing-s-x-x: 0.25rem;
    --spacing-s-x: 0.45rem;
    --spacing-s: 0.8rem;
    --spacing-s-1: 1.1rem;
    --spacing-s-2: 1.35rem;
    --spacing-m: 1.5rem;
    --spacing-l: 3rem;
    --spacing-l-static: 3rem;
    --spacing-l-1: 3.5rem;
    --spacing-l-1-static: 3.5rem;
    --spacing-l-2: 4.2rem;
    --spacing-l-3: 4.8rem;
    --spacing-l-4: min(15vw, 7rem);
    --spacing-l-4-static: 7rem;
    --spacing-vh-s: 12vh;
    /* e.g. >> /news-single */
    --spacing-vh-m: 16vh;
    /* e.g. >> /productions-single */
    --spacing-vh-l: 23vh;
    --spacing-vw-s: 1vw;
    --spacing-row-gap: 6rem;
    --button-spacing: 17px 24px;
    /* GROUP VARIABLES -- SPACING -- ICONS
    =================================================== */
    /* e.g. >> /news */
    --spacing-icon-l: 0.7rem;
    /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
    =================================================== */
    /* From lowest to highest value */
    --max-width-reading-short: 22rem;
    --max-width-reading: 36rem;
    --max-width-title-short: 51rem;
    --max-width-title: 54rem;
    /* e.g. >> /about */
    --max-width-marketing-paragraphs: 65rem;
    /* Based on c-columns */
    --max-width-1: 75rem;
    /* Based on news-columns */
    --max-width-2: 86rem;
     /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE
    =================================================== */
    /* If you want to use a hue base for the grey... otherwise set to 0deg */
    --colour-grey-hue: 226deg, 10%;

    /* Dark to light */
    --colour-black-off: hsl(var(--colour-grey-hue), 10%);
    /* AA compliant as grey text on white background. AAA is 595959 */
    --colour-grey-reading: hsl(var(--colour-grey-hue) 46%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME
    =================================================== */
    /* Dark to light */
    --colour-navy-hue-and-saturation: 226deg, 25%;
    /* Official colour given by Ash - #1a1e2b */
    --colour-navy: hsl(226deg 25% 14%);
    /* e.g. for icons on colour-navy background */
    --colour-navy-reversed: hsl(226deg 14% 25%);
    --colour-navy-hsl: 226deg 25% 14%;
    --colour-navy-overlay: hsl(var(--colour-navy-hsl) / 20%);
    --colour-navy-overlay-2: hsl(var(--colour-navy-hsl) / 40%);
    --colour-red: hsl(356deg 96% 45%);
    --colour-beige: hsl(33deg 10% 79%);
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
    =================================================== */
    /* Changed at a later MQ */
    --colour-gradient-navy-top-left: linear-gradient(to bottom right, var(--colour-navy) 5%, transparent 45%);
    --colour-gradient-navy-top-right-s: linear-gradient(to bottom left, var(--colour-navy) 5%, transparent 15%);

    /* GROUP VARIABLES -- DECORATION -- TEXT -- FONTS
    =================================================== */
    --font-family-main: gill-sans-nova, sans-serif;
    --font-family-headline: gill-sans-nova, sans-serif;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- STYLES
    =================================================== */
    --font-family-main-style-1: normal;
    --font-family-main-style-2: italic;
    --font-family-headline-style-1: normal;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- WEIGHTS
    =================================================== */
    --font-family-main-weight-medium: 400;
    --font-family-main-weight-strong: 500;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
    =================================================== */
    /* Optimise line-height for reading */
    --font-size-reading-line-height: 1.5;
    /* Where you may want to space the line-height slightly e.g. You may want to use -spaced because a paragraph contains short information and links, so you'd like to make it breathe a bit more. Use _sparingly_ since it exceeds the max recommended line-height of 1.5 */
    --font-size-spaced-line-height: 1.6;
    --font-size-s-x-x: 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-x: 0.9em; */
    /* -- */
    --font-size-s-x: 1em;
    --font-size-s-x-line-height: 1.4;
    --font-size-s-x-1: 1rem;
    --font-size-s: 1.1em;
    --font-size-s-2: clamp(1.3em, 7vw, 1.6em);
    --font-size-s-2-line-height: 1.3;
    /* -- */

    /* Augmented Fourth */
    /* e.g. >> /about > top text on mobile */
    /* e.g. >> /productions > top text on mobile */
    --font-size-s-1: clamp(1.25em, 4vw, 1.414em);
    --font-size-s-1-line-height: 1.3;
    --font-size-m: clamp(calc(1.999em * 0.75), 6vw, 1.999em);
    --font-size-m-line-height: 1.6;
    --font-size-l: clamp(calc(2.827em * 0.8), 9vw, 2.827em);
    /* e.g. >> /productions > Mobile title */
    --font-size-l-line-height: 1.4;
    --font-size-l-1: clamp(calc(3.998em * 0.8), 11vw, 3.998em);
    --font-size-l-1-line-height: 1.15;
    --font-size-l-2: 5.653em;
    --font-size-l-2-line-height: 1.1;
    --font-size-l-2-entry-line-height: 1.1;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- OTHER
    =================================================== */
    --letter-spacing-s: 2px;
    --letter-spacing-m: 3px;
    --letter-spacing-l: 5px;
    /* GROUP VARIABLES -- DECORATION -- ICONS -- SIZES
    =================================================== */
    /* e.g. >> /news-single > sharing icons */
    --icon-size-s: 1.15rem;
    /* e.g. >> /contact > Social icons */
    --icon-size-s-1: 1.5rem;
    /* e.g. marketing column icons */
    --icon-size-m: 2.5rem;
    --icon-size-l: 3rem;
    /* e.g. >> /about */
    --icon-size-l-1: 4rem;
    /* GROUP VARIABLES -- DECORATION -- TEXT SHADOWS - ordered from light to dark variants
    =================================================== */
    --text-shadow: 1px 1px 2px var(--colour-navy);
    --text-shadow-light: 0px 2px 10px var(--colour-navy);
    /* GROUP VARIABLES -- ANIMATIONS -- TRANSITIONS
    =================================================== */
    /* Molecules > Pagination > Perch > (Cross Pollinated) */
    --animation-transition-fast: all 0.15s ease-in-out 0s;
}
/* --mq-root-variable-adjustments-2 */
@media (min-width: 730px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- COLOURS -- THEME -- GRADIENTS
        =================================================== */
        --colour-gradient-navy-top-left: linear-gradient(to bottom right, var(--colour-navy) 2%, transparent 50%);
    }
}
/* --mq-text-bump-1-after */
@media (min-width: 1600px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        /* Decrease */
        --font-size-s-x: 0.9em;
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        --font-bump: 0.1vw;
    }
}
/* --mq-text-bump-2-after */
@media (min-width: 1800px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
        =================================================== */
        /* --font-bump: 0.15vw; */
        --font-bump: 0.2vw;
    }
}




/* purgecss start ignore */
/* 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;
    /* Consider disabling this if you have pages that require lots of cmd + f https://css-tricks.com/downsides-of-smooth-scrolling/ */
    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);
    color: var(--colour-black-off);
}

/* 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: hsl(var(--colour-navy-hsl) / 0.15); */
    background: #dddee0;
    color: var(--colour-navy);
}

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

/* Reset */
figure {
    margin-inline-start: 0;
    margin-inline-end: 0;
}

figure img {
    /* Push the caption away from the image */
    margin-block-end: var(--spacing-s);
}

/* e.g. >> /contact */
small {
    display: block;
    text-align: center;
}

small + div {
    padding-block-start: var(--spacing-s-2);
}

/* e.g. >> /contact */
small a {
    text-transform: initial;
    letter-spacing: initial;
}

ul {
    padding-inline-start: 0;
}

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

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

p {
    /* e.g. >> /news-single */
    /* e.g. >> /productions-single */
    padding-block-end: var(--spacing-m);
}

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-weight: var(--font-family-main-weight-strong);
}

svg {
    /* Good default e.g. play button in 'Play Showreel' */
    color: var(--colour-red);
}
/* purgecss end ignore */




/* purgecss start ignore */
/* GROUP PLUGIN / BOOTSTRAP / TABLES
=================================================== */
/*!
* Bootstrap v3.1.1 (http://getbootstrap.com)
* Copyright 2011-2014 Twitter, Inc.
* Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
*/
table {
    max-width: 100%;
    background-color: transparent;
    border-collapse: collapse;
    border-spacing: 0;
}

th {
    text-align: left;
}

table {
    width: 100%;
}

table > thead > tr > th,
table > tbody > tr > th,
table > tfoot > tr > th,
table > thead > tr > td,
table > tbody > tr > td,
table > tfoot > tr > td {
    padding: 14px;
    /* =JFG Added */
    padding-inline-end: 25px;
    /* -- */
    line-height: 1.43;
    vertical-align: top;
}

table > thead > tr > th {
    vertical-align: bottom;
}

table > caption + thead > tr:first-child > th,
table > colgroup + thead > tr:first-child > th,
table > thead:first-child > tr:first-child > th,
table > caption + thead > tr:first-child > td,
table > colgroup + thead > tr:first-child > td,
table > thead:first-child > tr:first-child > td {
    border-top: 0;
}

table table {
    background: white;
}

table > thead > tr > th,
table > thead > tr > td {
    border-bottom-width: 2px;
}
/* GROUP PLUGIN / BOOTSTRAP / TABLES / (JAY ADDED)
=================================================== */
/* GROUP PLUGIN / BOOTSTRAP / TABLES / (JAY ADDED) / (CROSS POLLINATED)
=================================================== */
/* =JFG. Fix it so tabular info is easier to digest */
table {
    font-size: 16px;
}

table + h2 {
    padding-block-start: var(--spacing-s-1);
}
/* GROUP TABLES / EXTRA
=================================================== */
table {
    /* e.g. >> /red-planet-prize */
    max-width: 33rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-align: left;
    font-size: var(--font-size-s);
    margin-block-end: var(--spacing-l-2);
}

td:first-child {
    color: var(--colour-red);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
}
/* purgecss end ignore */




/* 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-style: var(--font-family-headline-style-1);
    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";

    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

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

/* --- */

h1,
.h1 {
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-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);
    line-height: var(--font-size-s-line-height);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / HIGH PRIORITY / VERTICAL SPACING
=================================================== */
h1,
.h1,
h2,
.h2 {
    padding-block-end: var(--spacing-s-1);
}

* + h1,
* + .h1,
/* e.g. Objects > Counters */
* > h1,
* > .h1,
* + h2,
* + .h2 {
    padding-block-start: var(--spacing-l);
}
/* GROUP ELEMENTS / FRAMEWORK / HEADINGS / LOW PRIORITY / VERTICAL SPACING
=================================================== */
h3,
.h3 {
    padding-block-end: var(--spacing-s-x);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    padding-block-end: var(--spacing-s-x-x);
}

* + 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;
}

/* e.g. >> /news-single */
/* main {
    margin-bottom: var(--spacing-l-1);
} */

.c-main-compressed {
    /* e.g. >> /about */
    margin-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: 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;
}




/* GROUP ELEMENTS / FRAMEWORK / SVGs
=================================================== */
/* https://twitter.com/andybelldesign/status/1098915626050117633 */
svg,
/* Or opt in to this with a class. Don't bomb all SVG **images** because this will negative effect things that are uploaded through the admin like client logos */
.svg {
    width: 1em;
    height: 1em;
    fill: currentColor;
}

h1 svg,
h2 svg,
h3 svg,
h4 svg,
h5 svg,
h6 svg,
p svg {
    vertical-align: baseline;
    margin-right: var(--spacing-s-x);
}

/* 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-1);
}

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

.c-btn svg {
    /* e.g. >> /news */
    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;
    color: var(--colour-black-off);
    text-underline-position: under;
    /* e.g. >> /news */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    /* e.g. >> /team, email address */
    /* Adds a hyphen where the word breaks, if supported (No Blink) */
    -ms-hyphens: auto;
    -moz-hyphens: auto;
    -webkit-hyphens: auto;
    hyphens: auto;
}

/* .u-link-style-1 a, */
/* e.g. 'more news' link */
@keyframes strike-through {
    from {
		transform: scaleX(0);
	}
	to {
		transform: scaleX(1);
	}
}
.u-link-style-1 a,
.c-slide__more-link a,
/* Components > News Columns */
.c-news-columns p + a,
/* e.g. >> /news > read more */
.s-entry-content p + a:last-child,
/* Components > Carousel > Decoration */
.c-carousel-cell__title {
    position: relative;
}

.u-link-style-1 a::after,
.c-slide__more-link a::after,
/* Components > News Columns */
.c-news-columns p + a::after,
/* e.g. >> /news > read more */
.s-entry-content p + a:last-child::after,
/* Components > Carousel > Decoration */
.c-carousel-cell__title::after {
    content: "";
    width: 100%;
    position: absolute;
    left: 0;
    bottom: -2.5px;
}
.u-link-style-1 a:hover::after,
.c-slide__more-link a:hover::after,
/* Components > News Columns */
.c-news-columns p + a:hover::after,
/* e.g. >> /news > read more */
.s-entry-content p + a:last-child:hover::after,
/* Components > Carousel > Decoration */
.c-carousel-cell a:hover .c-carousel-cell__title::after {
    border-bottom: 2px solid var(--colour-red);
    transform-origin: center left;
    animation-name: strike-through;
    animation-duration: 0.4s;
    animation-fill-mode: both;
}
/* GROUP ELEMENTS / FRAMEWORK / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS
=================================================== */
/* .u-link-style-custom-1:focus a, */
a:focus,
.c-nav-mobile-button:focus svg,
.c-btn a:focus,
button:focus,
[type="submit"]:focus,
/* Elements > Framework > Forms */
[type="text"]:focus,
[type="email"]:focus,
textarea:focus {
    outline: 4px solid var(--colour-red);
}

/* -- */
.c-carousel-cell a:focus {
    outline: none;
}
/* Components > News Columns > Decoration */
.c-news-columns a:focus img,
.c-gallery-grid a:focus img,
.c-carousel-cell a:focus img {
    border: 4px solid var(--colour-red);
}
/* -- */

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

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
=================================================== */
/* purgecss start ignore */
/* 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),
: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;
}
/* purgecss end ignore */
/* 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 OBJECTS / JAVASCRIPT / REVEAL ON CLICK {ANIMATE ON CLICK}
=================================================== */
/* purgecss start ignore */
.js .js__animateInOnClick-ContainerToBeAnimated:not(.js-added--hasBeenAnimated) .js__animateInOnClick-expandedContent {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* END SCREEN READER TEXT
    ------------------------- */
}
@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}
.js-added--hasBeenAnimated .js__animateInOnClick {
    animation-name: fade-out;
    /* Out quadratic */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-duration: 0.5s;
    animation-fill-mode: both;
}

.js-added--hasBeenAnimated .c-card {
    position: relative;
}
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}
.js-added--hasBeenAnimated > *:first-child .c-card::after {
    content: "Scroll down";
    position: absolute;
    bottom: var(--spacing-s-x);
    left: 50%;
    transform: translateX(-50%);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);

    animation-name: fade-in;
    /* Out quadratic */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
/* purgecss end ignore */




/* 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

*/
/* Modifiers...

    .o-slide--compressed-b
    .o-slide--compressed-t-0 <-- totally compressed
    .o-slide--compressed-b-0 <-- totally compressed

    .o-slide--equal <-- used as an exception to the behaviour of making the last slide vh-m, e.g. /news-single

    .o-slide--archive-intro <-- Used to introduce archive pages e.g. /news?page=2
    .o-slide--s <-- smaller at certain points

    .o-slide--with-marketing-text <-- When the first slide on a the page has this modifier the padding will be bumped on mobile to push it further away from the header e.g. /about

*/
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE / LAYOUT
=================================================== */
.o-slide {
    display: flex;
    background: white;
    flex-direction: column;
    justify-content: center;
    min-height: 79vh;
}

.o-slide__inner {
    /* Instead define with individual elements e.g. c-marketing-text */
    /* max-width: var(--max-width-reading); */
    margin-inline-start: auto;
    margin-inline-end: auto;
}

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

/* e.g. >> /contact */
.c-hero-image + .o-slide--s,
/* e.g. >> /contact */
.o-slide--s + .o-slide--s {
    /* e.g. >> /contact */
    min-height: initial;
    /* Try to get them so there's an even amount of space */
    padding-block-start: var(--spacing-vh-m);
    padding-block-end: var(--spacing-vh-m);
}
/* GROUP OBJECTS / FRAMEWORK / (NON CORE) / SLIDE / SPACING
=================================================== */
.o-slide {
    padding-block-start: var(--spacing-vh-s);
    padding-block-end: var(--spacing-vh-s);
}

.o-slide--archive-intro {
    /* e.g. >> /news?page=2 */
    padding-block-start: var(--spacing-vh-m);
}

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

.o-slide__inner *:last-child {
    /* e.g. when marketing-text is at the bottom of a slide */
    padding-block-end: 0;
}

.c-hero-image + .o-slide:not(.o-slide--s) {
    /* e.g. >> /contact */
    /* Increase */
    padding-block-start: var(--spacing-vh-m);
}

.o-slide--compressed-t {
    /* Decrease */
    /* e.g. >> /team */
    padding-block-start: var(--spacing-l);
}

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

.o-slide--compressed-b {
    /* Decrease */
    /* e.g. >> /news-single */
    padding-block-end: var(--spacing-l);
}

.o-slide--compressed-t-0,
/* e.g. >> /contact */
.o-slide--s + .o-slide--s {
    padding-block-start: 0;
    padding-block-end: var(--spacing-vh-m);
}

.o-slide--s + .o-slide--s:last-child {
    /* e.g. >> /contact */
    /* Think this is mostly a perception thing rather than a padding maths thing */
    padding-block-end: calc(var(--spacing-vh-m) + 2em);
}

.o-slide--compressed-b-0 {
    padding-block-end: 0;
}

/* Custom */
@media (max-height: 899px) {
    .o-slide--with-marketing-text {
        /* e.g. >> /about */
        padding-block-start: 12rem;
    }
}




/* GROUP OBJECT / FRAMEWORK / (NON CORE) / LAYOUT / FULL WIDTH {BUST OUT OF CONTAINER}
=================================================== */
/* Notes...
    
    - When you need to bust out of containers such as .s-entry-content
    - Based on https://css-tricks.com/full-width-containers-limited-width-parents/

*/

/* HTML Example...

    <div class="o-full-width-wrapper">
        e.g. <img/>
    </div>

*/

.o-full-width-wrapper {
    position: relative;
    width: 100vw;
    left: 50%;
    right: 50%;
    margin-inline: -50vw;
}




/* GROUP OBJECTS / OVERLAY VIDEO
=================================================== */
/* Notes...

	- Used to house a video that's induced by a button e.g. "play showreel"
	- Requires JS
	   - If no JS then the video is displayed inline
	- Invisible until invoked

*/
/* HTML Example...

    <div class="o-overlay-video">
        <div id="player" data-plyr-provider="vimeo" data-plyr-embed-id="40648169"></div>
    </div>

*/
/* GROUP OBJECTS / OVERLAY VIDEO / LAYOUT
=================================================== */
.js:not(.js--overlayVideoActivated) .o-overlay-video {
    display: none;
}




/* GROUP OBJECTS / PLAY BUTTON
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    .o-play-button-container <-- used to lock in the position
        <button class="u-mq-768-down o-play-button-mobile js__playShowreel">
            <?php include 'img/svg/play-2.php'; ?>
        </button>

*/
/* GROUP OBJECTS / PLAY BUTTON / LAYOUT
=================================================== */
.o-play-button-container {
    position: relative;
}

.o-play-button-mobile {
    --icon-size: 4rem;
    position: absolute;
    top: calc(50% - var(--icon-size));
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}

.o-play-button-desktop {
    position: absolute;
    top: calc(50% - 1em);
    left: 50%;
    transform: translate(-50%, 0%);
    z-index: 1;
}
/* GROUP OBJECTS / PLAY BUTTON / DECORATION
=================================================== */
.o-play-button-mobile {
    font-size: var(--icon-size);
}

.o-play-button-mobile svg {
    color: white;
    font-size: 0.9em;
}

.o-play-button-desktop {
    font-size: var(--font-size-m);
}

.o-play-button-desktop svg {
    position: relative;
    top: -0.1em;
    font-size: var(--icon-size-m);
    margin-inline-end: var(--spacing-s-1);
}




/* GROUP COMPONENTS / DECORATION
=================================================== */
.c-date {
    color: var(--colour-red);
    font-size: var(--font-size-s-x);
    font-weight: var(--font-family-main-weight-strong);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    /* e.g. >> Home > News */
    margin-block-end: var(--spacing-s-1);
}




/* purgecss start ignore */
/* GROUP COMPONENTS / DECORATION / PATTER
=================================================== *
/* Notes...

    Use this if you want to create a highlight effect

*/

/* Modifiers...

    .c-pattern--plain <-- no pattern, just a background

*/
.c-pattern {
    /* --background: hsla(var(--colour-navy-hue-and-saturation), 14%) 30%; */
    --background: hsla(var(--colour-navy-hue-and-saturation), 14%) 0%;
    --colour: hsl(var(--colour-navy-hue-and-saturation), 20%);
    --size: 9rem;
    --stop: calc(var(--size) * 0.85);
    background-color: var(--background);
    /* background-image: radial-gradient(circle at center center, var(--colour), var(--background)), repeating-radial-gradient(circle at center center, var(--colour), var(--colour), calc(var(--stop) * 0.5), transparent var(--size), transparent var(--stop)); */
    background-image: 
        radial-gradient(circle at top center, var(--colour), var(--background)), 
        repeating-radial-gradient(circle at center center, 
            /* Outer Shadow */
            /* var(--colour), 
            1em, 
            transparent 7em, 
            transparent 2em
            */

            /* Inner Shadow */
            transparent,
            transparent var(--stop),
            var(--colour) var(--size)
        );
    background-blend-mode: multiply;
    color: white;
}
.c-pattern {
    position: relative;
}
.c-pattern > * {
    /* Pull above pattern::before e.g. nav menu, and slide text */
    z-index: 1;
}
.c-pattern p > a:only-child {
    /* e.g. >> /red-planet-prize */
    color: var(--colour-red);
}

.c-pattern--plain {
    background: var(--colour-navy);
}
/* Custom */
@media (min-width: 1024px) {
    /* Hide center 'ring' to let text breathe more */
    .c-pattern:not(.c-pattern--plain)::before {
        --cover: 43vh;
        content: "";
        position: absolute;
        z-index: 1;
        top: calc(50% - (var(--cover) / 2));
        left: calc(50% - (var(--cover) / 2));
        height: var(--cover);
        width: var(--cover);
        background: var(--colour-navy);
        border-radius: 50%;
    }
}
/* purgecss end ignore */



/* GROUP COMPONENTS / FRAMEWORK / SKIP LINKS
=================================================== */
/* .u-screen-reader*/
.c-skip-to-content:focus {
    position: fixed!important;
    z-index: 1;
    top: 0;
    left: 0;
    padding: var(--spacing-s-1) var(--spacing-s-1);
    font-size: var(--font-size-s-x);
    color: white;
    outline: none;
}




/* 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: var(--button-spacing);
    /* Optional */
    /* e.g. 'play showreel' in site header */
    font-size: 1.05rem;
    /* line-height: 1.3; */
    /* 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;
    font-weight: 500;
    letter-spacing: var(--letter-spacing-m);
    text-transform: uppercase;
}

/* 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;
}
/* GROUP COMPONENTS / FRAMEWORK / BUTTONS / TYPES
=================================================== */
/* 1 */
button {
    /* e.g. play showreel */
    color: white;
}
/* 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;
}




/* purgecss start ignore */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / BUTTONS / TYPES
=================================================== */
/* Left and Right Arrows */
/* HTML Example...

    <a href="<perch:blog id="prev_url" encode="false" />" class="c-btn__left"><svg class="c-jg-icon c-jg-icon--chevron-thin-left c-icon-left"><use xlink:href="/svg-icons/symbol-defs.svg#c-jg-icon--chevron-thin-left"></use></svg> Previous</a>

*/
/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__left svg,
/* a*/
.c-btn__right svg {
    position: relative;
    /* Pagination Button e.g. right arrow inside button moves forward */
    transition: var(--animation-transition-fast);
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__left svg {
    right: 0;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__left:hover svg {
    right: 5px;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__right svg {
    left: 0;
}

/* Molecules > Pagination > Perch > (Cross Pollinated) */
/* a*/
.c-btn__right:hover svg {
    left: 5px;
}




/* GROUP COMPONENTS / FRAMEWORK / SITE LOGO
=================================================== */
.c-site-logo {
    position: absolute;
    z-index: 2;
    width: min(30vw, 10.1rem);
    top: 1em;
    left: 1em;
}

.c-site-logo a {
    /* Make sure it fills height */
    display: block;
}

.c-site-logo svg {
    width: 100%;
    height: 100%;
}

.c-site-logo--dark .c-site-logo__text {
    fill: black!important;
}

/* --mq-hero-image-breakpoint-2-after */
@media (min-width: 1400px) {
    .c-site-logo {
        top: 3em;
        left: 2.5em;
    }
}
/* purgecss end ignore */




/* purgecss start ignore */
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER
=================================================== */
/* HTML Example...

    .c-site-header
        .c-site-header__nav
        .c-site-header__cta
            .c-btn
                a

*/

/* Modifiers...

    .c-site-header--js--compact <-- Intersection Observer used to add this modifier to make the site header less obtrusive

*/
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / LAYOUT
=================================================== */
.c-site-header__nav {
    position: fixed;
    /* Rests beneath everything before being activated */
    z-index: -1;
}

/* button*/
.c-site-header__cta {
    position: fixed;
    right: 0;
    /* Above .c-site-header__nav */
    z-index: 3;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

body .c-site-header__cta--icon {
    top: 1.4rem;
    right: 19em;
}

.js--navIsOpen .c-site-header__nav,
/* Temporarily add a class to prevent the animation from cutting out too early, as the z-index switches */
.js--wait-before-removing-z-index {
    /* Above c-hero-image__scroll */
    z-index: 2;
}

.c-site-header__nav ul {
    position: absolute;
    width: 100%;
    overflow: auto;
    overscroll-behavior:contain;
    height: 100vh;

    justify-content: center;
}

/* --mq-header-breakpoint-1-before */
@media (max-width: 767px) {
    .c-site-header__cta--icon,
    .c-site-header__play-showreel {
        display: none;
    }
}

/* --mq-hero-image-breakpoint-2-before */
@media (max-width: 1399px) {
    body .c-site-header__cta--icon {
        right: 17.3em;
    }
}

/* --mq-header-breakpoint-1-after */
@media (min-width: 768px) {
    .c-site-header__nav ul {
        align-items: center;
    }
}

/* --mq-header-breakpoint-1-after to --mq-hero-image-breakpoint-2-before */
@media (min-width: 768px) and (max-width: 1399px) {
    .c-site-header__play-showreel {
        /* Decrease */
        padding-inline-end: 0;
    }
}

/* --mq-hero-image-breakpoint-2-after */
@media (min-width: 1400px) {
    .c-site-header__cta {
        /* Increase */
        right: var(--spacing-vw-s);
    }
}
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / SPACING
=================================================== */
.c-site-header__cta .c-btn {
    /* Decrease */
    margin-inline-end: var(--spacing-s-x);
    margin-block-end: 0;
}

.c-site-header__nav ul {
    padding-inline-start: var(--spacing-l-1);
    padding-inline-end: var(--spacing-l-1);
}

/* Custom */
@media (min-width: 600px) {
    .c-site-header__nav ul {
        padding-inline-start: 14vw;
        padding-inline-end: 14vw;
    }
}

/* --mq-header-breakpoint-1-after */
@media (min-width: 768px) {
    .c-site-header__cta {
        padding: var(--spacing-s);
    }
}

/* --mq-hero-image-breakpoint-2-after */
@media (min-width: 1400px) {
    .c-site-header__cta {
        padding-block-start: var(--spacing-l);
    }

    .c-site-header--js--compact .c-site-header__cta {
        /* Decrease */
        padding-block-start: var(--spacing-m);
    }
}
/* GROUP COMPONENTS / FRAMEWORK / SITE HEADER / DECORATION
=================================================== */
.c-site-header__nav {
    /* Fast Out Linear In */
    /* transition: opacity 0.3s cubic-bezier(0.4, 0, 1, 1) 0s; */
    transition: opacity 0.3s cubic-bezier(0.47, 0, 0.75, 0.72) 0s;
}

.c-site-header__nav a,
.c-site-header__cta .c-btn a {
    color: white;
    text-decoration: none;
}

.c-site-header__nav {
    font-size: var(--font-size-m);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

/* .c-site-header__play-showreel {
    text-shadow: var(--text-shadow);
} */

/* --mq-hero-image-breakpoint-2-after */
@media (min-width: 1400px) {
    .c-site-header__cta {
        transition: padding 0.4s ease-out 0s;
    }
}
/* GROUP COMPONENTS / FRAMEWORK / NAV / CURRENT PAGE
=================================================== */
body .c-current-menu-item {
    /* color: hsl(0 0% 100% / 0.5); */
    opacity: 0.4;
}
/* purgecss end ignore */




/* 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);
    /* e.g. >> /red-planet-prize */
    margin-inline-start: auto;
    margin-inline-end: auto;
    /* -- */
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    padding-block-end: var(--spacing-l);
}

.s-entry-content p + a {
    /* e.g. >> /news */
    padding-block-start: var(--spacing-m);
    display: inline-block;
}
.s-entry-content p + a:last-child {
    /* e.g. >> /news > read more */
    color: var(--colour-red);
    font-weight: var(--font-family-main-weight-strong);
}

.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 :is(ol, ul) {
    /* e.g.

    <ul>
        <li>something</li>
        <li>something else
            <ol> <-- we don't want this to have extra padding

    */
    padding-inline-start: 0;
    padding-inline-end: 0;
    padding-block-start: 0;
}

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

/* Bard wraps <li> text in a <p> tag */
.s-entry-content li p:only-child {
    padding-block-end: 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;
}

.s-entry-content p {
    /* e.g. >> /productions-single */
    line-height: var(--font-size-spaced-line-height);
}

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



/* purgecss start ignore */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / HERO IMAGE
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    .c-hero-image
        .c-hero-image__text
            .c-hero-image__logo
                svg
            p
        .c-hero-image__button
            a
                some text
        img.c-hero-image__image
        .c-hero-image__scroll <-- optional
            ul.o-snap-scroll
                li.o-snap-scroll__item

*/

/* Modifiers...

    .c-hero-image--focus-top <-- focus the object-fit at the top of the image e.g. homepage banner. We don't want this by default e.g. Contact page

*/
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / (NON CORE) / LAYOUT
=================================================== */
.c-hero-image__image {
    height: 75vh;
    width: 100vw;
    object-fit: cover;
}

.c-hero-image__text {
    --left: 20%;
    position: absolute;
    /* e.g. >> /contact */
    z-index: 1;
    top: calc(50% - 2em);
    left: var(--left);
    width: calc(100% - var(--left) * 2);

    display: grid;
    align-items: center;
}

.c-hero-image__text p {
    max-width: var(--max-width-reading-short);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

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

.c-hero-image__scroll {
    position: absolute;
    width: 100%;
    overflow: hidden;
    z-index: 1;
    bottom: 0;

    min-height: 25vh;
    display: grid;
    align-items: end;
}

/* --mq-hero-image-breakpoint-2-after */
@media (min-width: 1400px) {
    .c-hero-image__image {
        height: 90vh;
    }
}

.c-hero-image__logo {
    position: relative;
    top: -0.5em;
}

.c-hero-image__image--focus-top {
    object-position: top;
}

.c-hero-image__image--focus-center {
    object-position: center;
}

.c-hero-image__image--focus-bottom {
    object-position: bottom;
}
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / (NON CORE) / SPACING
=================================================== */
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / (NON CORE) / DECORATION
=================================================== */
.c-hero-image {
    position: relative;
}

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

/* e.g. >> /contact */
.c-hero-image__text {
    color: white;
    text-align: center;
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

.c-hero-image__logo {
    text-align: center;
    font-size: var(--icon-size-l-1);
}

.c-hero-image__logo svg {
    color: white;
    opacity: 0.2;
}
/* GROUP COMPONENTS / FRAMEWORK / HERO IMAGE / (NON CORE) / DECORATION / OVERLAY GRADIENTS
=================================================== */
.c-hero-image--hue-cover::before,
.c-hero-image--hue-cover-radial::before,
.c-hero-image--hue-cover::after,
.c-hero-image--hue-cover-radial::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 100%;
    background: var(--colour-navy-overlay-2);
}

.c-hero-image--hue-cover-radial::before,
.c-hero-image--hue-cover-radial::after {
    background: var(--colour-gradient-navy-top-left);
}

/* Make room for nav */
.c-hero-image--hue-cover-radial::after {
    background: var(--colour-gradient-navy-top-right-s);
}
/* purgecss end ignore */



/* purgecss start ignore */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV
=================================================== */
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MODIFIER CLASSES
=================================================== */
/* Notes...

    Examples of nav modifier classes
    ------------
    .js__collapsedUntilNavOpened
    You almost always want this. If we have JS then the nav is hidden until toggled open.
    The menu appears on larger screens when we use a nav-horizontal... class

*/
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / SPACING
=================================================== */
.js--navIsOpen .c-nav-mobile-button {
    margin-bottom: 0;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / TWEAKS
=================================================== */
nav {
    text-align: left;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / CURRENT PAGE
=================================================== */
/* Ancestors and Parents of Current Page */
/* nav */
.current-menu-ancestor > a span {
    color: rgba(var(--colour-turquoise-rgb),0.5);
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / TEXT / LINKS
=================================================== */
nav a {
    color: var(--colour-grey-reading);
}




/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / (CROSS POLLINATED)
=================================================== */
/* HTML Example...


    <button class="c-nav-mobile-button u-js-only">
        <span class="c-nav-icon">
            <!-- Animate this when closed -->
            include 'img/svg/nav.php';
        </span>
    </button>


*/
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / BUTTON
=================================================== */
/* button*/
.c-nav-mobile-button {
    /* =JFG. Cancel any default button value */
    margin-inline-end: 0;
    font-size: min(6vw, 1.6em);
}

.c-nav-mobile-button svg {
    color: white;
}

.c-nav-mobile-button:focus svg {
    outline: none;
}

/* --mq-header-breakpoint-1-after */
@media (min-width: 768px) {
    .c-nav-mobile-button {
        /* Decrease so it doesn't take attention away from 'Play Showreel' */
        font-size: 1.3em
    }
}
/* GROUP MOLECULES / NAV / MOBILE / CLOSED STATE
=================================================== */
/* If we have JS then this is hidden until toggled open. The menu appears on larger screens if we use a nav-horizontal... class */
/* for nav.js__collapsedUntilNavOpened */
.js .js__collapsedUntilNavOpened {
    opacity: 0;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE
=================================================== */
/* Notes...

    Needs to be like this:

    button.c-nav-mobile-button
    nav
        ul
            li

*/
.js:not(.js--navIsOpen) .c-nav-mobile-button + nav {
    height: 0;
    opacity: 0;
}

.c-site-header__nav li {
    transform: translate(0, -100%);
    transition-timing-function: ease-out;
    transition-property: opacity, transform;
    opacity: 0;
}

.js--navIsOpen .c-site-header__nav li {
    opacity: 1;
    transform: translate(0);
    transition-duration: 0.4s;
}
/* Staggered animation */
.c-site-header__nav li {
    /* Default i.e. after 4th */
    transition-delay: calc(0.025s * 5);
}
.c-site-header__nav li:nth-child(1) {
    transition-delay: 0s;
}
.c-site-header__nav li:nth-child(2) {
    transition-delay: calc(0.025s * 2);
}
.c-site-header__nav li:nth-child(3) {
    transition-delay: calc(0.025s * 3);
}
.c-site-header__nav li:nth-child(4) {
    transition-delay: calc(0.025s * 4);
}

.js--navIsOpen .js__collapsedUntilNavOpened {
    opacity: 1;
}
/* GROUP COMPONENTS / FRAMEWORK / (NON CORE) / NAV / MOBILE / OPEN STATE / SVG ANIMATIONS
=================================================== */
/* Notes...

    Example found on vee.guide

*/
.c-nav-line {
    transition: 0.25s ease-in-out;
    transform-origin: center;
}

.js--navIsOpen .c-nav-line--1 {
    opacity: 0;
    transition: 0.1s;
}

.js--navIsOpen .c-nav-line--2 {
    transform: rotate(45deg) translate(0.5px);
}

.c-nav-line--3 {
    opacity: 0;
}

.js--navIsOpen .c-nav-line--3 {
    opacity: 1;
}

.js--navIsOpen .c-nav-line--3 {
    transform: rotate(-45deg) translate(-0.5px);
}

.js--navIsOpen .c-nav-line--4 {
    opacity: 0;
}
/* purgecss end ignore */




/* GROUP COMPONENTS / MARKETING TEXT
=================================================== */
/* Notes...

	- E.g. in .o-slide

*/
/* HTML Example...

    .o-slide
        .o-slide__inner
            .c-marketing-text
                .c-marketing-text__logo <-- optional logo
                    svg
                .c-marketing-text__title
                .c-marketing-text__sub <-- e.g. /team-single
                p
                .c-marketing-text__links <-- e.g. /contact
                    .c-marketing-text__links__link <-- e.g. /contact
                        h3
                        a

*/
/* Modifiers...

    .c-marketing-text--s <-- smaller paragraphs e.g. /about
    .c-marketing-text--long <-- long text, multiple paragraphs e.g. /about
    .c-marketing-text--with-sub <-- needed to make spacing changes to title

*/
/* GROUP COMPONENTS / MARKETING TEXT / LAYOUT
=================================================== */
.c-marketing-text {
    max-width: var(--max-width-title-short);
}

.c-marketing-text--long {
    max-width: var(--max-width-title);
}

.c-marketing-text__logo {
    position: relative;
    top: -0.9em;
}

.c-marketing-text__logo ~ p {
    position: relative;
    top: -0.4em;
}

.c-marketing-text__links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    text-align: center;
    gap: var(--spacing-m) var(--spacing-l-4);
}
/* GROUP COMPONENTS / MARKETING TEXT / SPACING
=================================================== */
.c-marketing-text {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
}

.c-marketing-text__title {
    padding-block-end: var(--spacing-l);
}

/* e.g. >> /about */
.c-marketing-text__logo + .c-marketing-text__title {
    padding-block-start: 0;
}

.c-marketing-text--long .c-lead {
    /* Increase */
    /* e.g. >> /about but not the top of /red-planet-prize */
    padding-block-end: var(--spacing-l);
}

/* When a link is on its own e.g. <p><a>read more</a></p> */
.c-marketing-text p + p a:first-child:last-child {
    display: inline-block;
}

.c-marketing-text .c-slide__more-link {
    /* e.g. >> /about */
    padding-block-start: var(--spacing-m);
}

/* e.g. >> /contact */
.c-marketing-text .c-slide__more-link + small  {
    padding-block-start: var(--spacing-l);
}

/* --- */

.c-marketing-text--with-sub .c-marketing-text__title {
    padding-block-end: var(--spacing-m);
}

/* Custom */
@media (max-height: 924px) {
    .o-slide + .o-slide .c-marketing-text__logo {
        /* Tweak e.g. >> Home on lower MQS */
        padding-block-start: var(--spacing-l);
    }
}
/* GROUP COMPONENTS / MARKETING TEXT / DECORATION
=================================================== */
.c-marketing-text__title {
    text-align: center;
}

.c-marketing-text p {
    text-align: center;
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}
.c-marketing-text small p {
    /* e.g. >> /contact */
    max-width: calc(var(--max-width-reading) - 2rem);
    margin-inline: auto;
    padding-block-end: var(--spacing-s-x);

    font-size: 0.8rem;
    line-height: 1.45;
    letter-spacing: initial;
    text-transform: initial;
}

.c-marketing-text a {
    font-weight: var(--font-family-main-weight-medium);
    color: var(--colour-red);
}

.c-marketing-text small a {
    color: white;
}

/* When a link is on its own e.g. <p><a>read more</a></p> */
.c-marketing-text p a:first-child:last-child {
    font-size: var(--font-size-s-x-1);
    letter-spacing: var(--letter-spacing-l);
}

.c-marketing-text__logo {
    text-align: center;
    font-size: var(--icon-size-l);
    line-height: 0;
}

.c-marketing-text__logo svg {
    color: var(--colour-navy-reversed);
    opacity: 0.2;
}

/* purgecss start ignore */
.js--statamicLivePreview .c-marketing-text__logo svg {
    /* Override for live preview */
    opacity: 0.2!important;
}
/* purgecss end ignore */

/* e.g. >> Home top slide */
.c-pattern .c-marketing-text__logo svg,
/* e.g. >> /team */
.c-pattern .c-card__logo svg {
    color: var(--colour-navy-reversed);
    opacity: initial;
}

.c-marketing-text__sub {
    color: var(--colour-red);
    font-size: var(--font-size-s-x);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    text-align: center;
}

.c-marketing-text__sub {
    color: var(--colour-red);
    font-size: var(--font-size-s-x);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    text-align: center;
}

.c-marketing-text.c-lead-wrapper > p:first-child,
.c-marketing-text .c-lead {
    /* e.g. >> /about */
    font-size: var(--font-size-s-1);
}

/* e.g. >> /about */
.c-marketing-text.c-lead-wrapper > p:first-child ~ p,
.c-marketing-text .c-lead ~ p {
    /* e.g. >> /about */
    font-size: var(--font-size-s);
    text-transform: initial;
    letter-spacing: initial;
}

.c-marketing-text__links :is(h2, h3, h4) {
    color: var(--colour-red);
    font-size: var(--font-size-s-x);
}

.c-marketing-text__links a {
    color: white;
    text-transform: initial;
    letter-spacing: initial;
    text-decoration: none;
}

/* --- */

/* e.g. >> /about */
.c-marketing-text--s p {
    font-size: var(--font-size-s-1);
    text-transform: initial;
    letter-spacing: initial;
}

/* Make text more legible on mobile e.g. >> /about */
/* Custom */
@media (max-width: 767px) {
    /* e.g. >> /about */
    .c-marketing-text--long p,
    /* e.g. >> /about */
    .c-marketing-text--s p {
        text-transform: initial;
        letter-spacing: initial;
        text-align: left;
    }
}




/* GROUP COMPONENTS / COLUMNS
=================================================== */
/* Notes...

	- e.g. 3 columns on homepage

*/
/* HTML Example...

    .o-slide.c-slide
        .o-slide__inner
            .c-columns
                .c-columns__column
                    svg
                    h2
                    p
                    ul.c-columns__bullets

*/
/* Modifiers...

*/
/* GROUP COMPONENTS / COLUMNS / LAYOUT
=================================================== */
.c-columns {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-l-4);
    row-gap: var(--spacing-row-gap);
    justify-content: center;
    width: 100vw;
    max-width: var(--max-width-1);
    text-align: center;
}

.c-columns__column {
    max-width: 15rem;
}

.c-columns__title {
    max-width: 13rem;
    margin-inline-start: auto;
    margin-inline-end: auto;
}

/* Custom */
@media (min-width: 1200px) {
    .c-columns {
        justify-content: space-between;
    }
}
/* GROUP COMPONENTS / COLUMNS / SPACING
=================================================== */
.c-columns {
    padding-inline-start: var(--spacing-l);
    padding-inline-end: var(--spacing-l);
}

.c-columns__title {
    padding-block-start: var(--spacing-s-2);
    padding-block-end: var(--spacing-l);
}

/* Custom */
@media (max-width: 1199px) {
    .c-columns__column:last-child {
        padding-block-end: var(--spacing-s);
    }
}
/* GROUP COMPONENTS / COLUMNS / DECORATION
=================================================== */
.c-columns svg {
    /* Custom because the BBC icon needs to 'appear' bigger */
    font-size: 4.8em;
}

.c-columns__title {
    font-size: var(--font-size-s-2);
    line-height: var(--font-size-s-2-line-height);
}

.c-columns p {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
}

.c-columns__bullets {
    list-style: none;
}




/* GROUP COMPONENTS / NEWS COLUMNS
=================================================== */
/* Notes...

	- e.g. News columns on homepage

*/
/* HTML Example...

    .o-slide.c-slide
        .o-slide__inner
            h2.c-eyebrow-title
                Latest News
            .c-news-columns
                .c-news-columns__column
                    <div>img</div> <-- div needed to prevent squashed flexbox images
                    .c-date
                    p
                    a
                        Read More

*/
/* Modifiers...

    .c-news-columns--archive <-- e.g. /news?page=2. e.g. top padding.

*/
/* GROUP COMPONENTS / NEWS COLUMNS / LAYOUT
=================================================== */
.c-news-columns {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 23em), 1fr));
    gap: var(--spacing-l-static);
    row-gap: var(--spacing-l-3);

    width: 100vw;
    max-width: var(--max-width-2);
}

.c-news-columns__column {
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
}

.c-news-columns__column img {
    width: 100%;
}

.c-news-columns__column a {
    margin-block-start: auto;
}
/* GROUP COMPONENTS / NEWS COLUMNS / SPACING
=================================================== */
.c-news-columns {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    padding-block-end: var(--spacing-l-3);
}

.c-news-columns__title {
    padding: var(--spacing-m);
}

.c-news-columns__title + a {
    margin-block-end: var(--spacing-m);
    padding: 0;
}

.c-news-columns__title + a {
    margin-inline-start: auto;
    margin-inline-end: var(--spacing-m);
}

.c-news-columns--archive {
    padding-block-start: var(--spacing-l-4);
}
/* GROUP COMPONENTS / NEWS COLUMNS / DECORATION (CROSS POLLINATED)
=================================================== */
.c-news-columns h2 {
    border-block-end: 1px solid black;
}

.c-news-columns__column {
    background: var(--colour-navy);
    color: white;
}

.c-news-columns__title {
    font-size: var(--font-size-s-2);
    line-height: var(--font-size-s-2-line-height);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

.c-news-columns__title a,
/* Override */
/* e.g. >> /news/reach-the-children-uk */
.c-news-columns__title > a:only-child {
    color: white;
    text-decoration: none;
}

.c-news-columns__title,
.c-news-columns a {
    font-size: 1em;
    line-height: var(--font-size-s-line-height);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

.c-news-columns__title + a {
    font-size: var(--font-size-s-x);
    font-weight: var(--font-family-main-weight-strong);
    color: var(--colour-red);
}




/* GROUP COMPONENTS / ARTICLE SNIPPET
=================================================== */
/* Notes...

	- e.g. tease a news story on /news

*/
/* HTML Example...

    article.c-article-snippet
        img
    .c-article-snippet__content
        .s-entry-content

*/
/* Modifiers...

    .c-article-snippet--with-meta <-- used to offset entry content with meta like date with title e.g. /news
    .c-article-snippet--single <-- e.g. /productions-single
    .c-article-snippet--l <-- slightly larger e.g. news

*/
/* GROUP COMPONENTS / ARTICLE SNIPPET / LAYOUT
=================================================== */
.c-article-snippet {
    max-width: var(--max-width-2);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-article-snippet img {
    width: 100%;
}

/* Custom */
@media (min-width: 1024px) {
    .c-article-snippet {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--spacing-l);
    }
}
/* GROUP COMPONENTS / ARTICLE SNIPPET / SPACING
=================================================== */
.c-article-snippet {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    /* e.g. >> /news?page=1 */
    padding-block-end: var(--spacing-l-4);
}

.c-article-snippet--with-meta .c-article-snippet__content {
    padding-block-start: var(--spacing-l-3);
}

.c-article-snippet .c-date {
    margin-block-end: 0;
}

/* .o-slide*/
.c-pattern + .c-article-snippet,
/* e.g. >> /productions-single */
.c-pattern + .u-background-light {
    /* e.g. >> /news */
    padding-block-start: var(--spacing-l-4);
}

/* Custom */
@media (max-width: 1023px) {
    .c-article-snippet {
        /* Increase */
        padding-block-end: var(--spacing-vh-s);
    }
    .o-slide + .c-article-snippet,
    .c-article-snippet__content {
        /* Decrease */
        /* e.g. >> /team-single */
        padding-block-start: var(--spacing-l-1);
    }
    .c-article-snippet .s-entry-content {
        padding-inline-start: 0;
        padding-inline-end: 0;
    }
    .o-slide--s + .c-article-snippet {
        /* e.g. >> /team-single */
        padding-block-start: 0;
    }
}

.c-article-snippet--single {
    padding-block-end: var(--spacing-vh-m);
}

.c-article-snippet--l .c-article-snippet__content p {
    font-size: var(--font-size-s);
}




/* GROUP COMPONENTS / ARTICLE
=================================================== */
/* Notes...

	- e.g. news article single

*/
/* HTML Example...

    .o-slide
        .o-slide__inner
            .c-article
                img.c-article__feature-image
                .c-article__intro
                    .c-article__meta
                        .c-date
                            Dec 10, 2021
                        div
                            Share
                    .c-article__lead
                        p.h2
                            p

*/
/* GROUP COMPONENTS / ARTICLE / LAYOUT
=================================================== */
.c-article {
    max-width: var(--max-width-title);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-article__intro {
    display: grid;
    gap: var(--spacing-l);
}

/* picture*/
.c-article__feature-image {
    display: block;
}

/* picture*/
.c-article__feature-image img {
    width: 100%;
}

.c-article .s-entry-content {
    max-width: none;
}

/* Custom */
@media (min-width: 768px) {
    .c-article__intro {
        grid-template-columns: 382fr 618fr;
        gap: initial;
    }
}
/* GROUP COMPONENTS / ARTICLE / SPACING
=================================================== */
/* img*/
.c-article__feature-image {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    padding-block-end: var(--spacing-m);
}

.c-article__intro {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    padding-block-end: var(--spacing-s-2);
}

.c-article__meta {
    /* Compensate for line-height of opposite .c-article__lead */
    margin-block-start: var(--spacing-s);
}

.c-article__lead .h3 {
    /* e.g. >> /news/reach-the-children-uk */
    padding-block-start: 0;
}

.c-article .s-entry-content {
    /* e.g. >> /news-single */
    padding-block-end: var(--spacing-vh-s);
}

.c-pattern > .c-article:first-child .s-entry-content {
    /* e.g. >> /red-planet-prize */
    padding-block-start: var(--spacing-vh-m);
}

main > .o-slide:first-child .c-article {
    /* e.g. >> /news-single */
    padding-block-start: var(--spacing-vh-m);
}

/* Custom */
@media (min-height: 829px) {
    main > .o-slide:first-child .c-article {
        /* e.g. >> /news-single */
        padding-block-start: var(--spacing-vh-s);
    }

    .c-article__feature-image {
        padding-block-end: var(--spacing-l-2);
    }
}
/* GROUP COMPONENTS / ARTICLE / DECORATION / (CROSS POLLINATED)
=================================================== */
.c-article .s-entry-content {
    font-size: var(--font-size-s);
}

.c-article__meta {
    color: var(--colour-red);
    font-size: var(--font-size-s);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}




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

	- Used to introduce hero-like text, occupying most of the screen vertically
	- Use an additional component class to handle the decoration
	- .c-slide-quotes can be used on its own

*/
/* HTML Example...

    .o-slide.c-slide.c-slide-quotes
        .o-slide__inner

            .c-slide__more-link
                a
                    e.g. More News
            .c-slide-quotes__citation e.g. - Genevieve Barr <-- /red-planet-prize-single

*/
/* Modifiers...

    .c-slide__more-link--dark <-- alt dark with red text e.g. /red-planet-prize
    .c-slide__more-link--l <-- large, used to pad out the bottom of the page e.g. /news when there's no more posts and we just have a Back To Top link
    .c-slide__more-link--action <-- e.g. /red-planet-prize
    .c-slide-quotes--2 <-- alternative dark slide quotes

*/
.c-slide {
    background: var(--colour-navy);
    color: white;
}

.c-slide__more-link {
    text-align: center;
    font-weight: var(--font-family-main-weight-medium);
}

.c-slide__more-link a {
    /* e.g. >> /news-single */
    /* color: var(--colour-red); */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
}

/* button*/
.c-slide__more-link--text-only {
    /* e.g. >> /red-planet-prize */
    margin-inline-end: 0;
    color: var(--colour-red);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-m);
    text-decoration: underline;
    text-decoration-skip-ink: auto;
    text-underline-position: under;
    cursor: pointer;
}

.c-slide-quotes {
    position: relative;
}

.c-slide-quotes::before,
.c-slide-quotes::after {
    position: absolute;
    color: var(--colour-red);
    font-size: 11em;
    line-height: 1;    
}

.c-slide-quotes::before {
    content: open-quote;
    top: var(--spacing-m);
    left: min(6vw, var(--spacing-l));
}

.c-slide-quotes::after {
    content: close-quote;
    bottom: -0.15em;
    right: min(6vw, var(--spacing-l));
}

.c-slide__more-link--dark {
    background: var(--colour-navy);
}

.c-slide__more-link--dark a {
    color: var(--colour-red);
}

/* e.g. - Genevieve Barr <-- /red-planet-prize-single */
body .c-slide-quotes__citation {
    color: var(--colour-red);
    font-size: var(--font-size-s-x);
}

/* --- */

.c-slide-quotes--2 {
    margin-block-end: var(--spacing-vh-s);
    background: var(--colour-navy);
    color: white;
}

.c-slide-quotes--2::before,
.c-slide-quotes--2::after {
    content: "\00a0";
    background-image: url("/img/rocket-path.svg");
    background-repeat: no-repeat;
    width: 0.5em;
}

.c-slide-quotes--2::before {
    left: var(--spacing-s-1);
}

.c-slide-quotes--2::after {
    bottom: var(--spacing-s-1);
    right: var(--spacing-s-1);
    transform: rotate(180deg);
}

.c-slide-quotes--2 p:not(:last-child) {
    /* Decrease */
    font-size: var(--font-size-s-2);
}


/* Custom */
@media (max-width: 767px) {
    /* e.g. >> /red-planet-prize/winner */
    .c-slide-quotes--2 p {
        text-align: left;
    }
}

/* Custom */
@media (max-width: 1314px) {
    .c-slide-quotes--2::before,
    .c-slide-quotes--2::after {
        /* Hide because there's not enough room */
        content: initial;
    }
}

/* Custom */
@media (min-height: 935px), (min-width: 1200px) {
    .c-slide-quotes--2::before,
    .c-slide-quotes--2::after {
        width: 1.5em;
    }

    .c-slide-quotes--2::before {
        top: var(--spacing-l-4);
        left: var(--spacing-l-4);
    }

    .c-slide-quotes--2::after {
        bottom: var(--spacing-l-4);
        right: var(--spacing-l-4);
        transform: rotate(180deg);
    }
}

.c-slide__more-link--l {
    padding-block-end: var(--spacing-vh-m);
}

.c-slide__more-link--action {
    /* e.g. >> /red-planet-prize */
    padding-block-start: var(--spacing-l);
    padding-block-end: var(--spacing-l-1);
    font-size: var(--font-size-s-1);
}




/* GROUP COMPONENTS / LEAD
=================================================== */
/* Notes...

	- Used to introduce an article

*/
/* HTML Example...

    p.c-lead
    p

    OR

    div.c-lead-wrapper <-- this is needed since the p tags are output by Bard e.g. /team/alex-jones
        p
        p

*/
.c-lead,
.c-lead-wrapper > p:first-child,
/* Components > Article > Decoration */
/* e.g. >> /red-planet-prize-single */
.c-article__intro + .s-entry-content > *:first-child,
/* Components > Legalise > Decoration */
.s-legalise .s-entry-content p:first-child {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
    line-height: var(--font-size-spaced-line-height);
}




/* GROUP COMPONENTS / EYEBROW TITLE
=================================================== */
/* Notes...

	- 

*/
/* HTML Example...

    <h2 class="h3 c-eyebrow-title c-eyebrow-title--compressed">Reach The Children UK</h2>

*/
/* Modifiers...

    .c-eyebrow-title--single <-- used on the single page e.g. different border colour
    .c-eyebrow-title--compressed <-- lower padding
    .c-eyebrow-title--plain <-- e.g. no border /home

*/
/* GROUP COMPONENTS / EYEBROW TITLE / LAYOUT
=================================================== */
/* e.g. >> /news */
.c-eyebrow-title {
    max-width: var(--max-width-2);
}

/* e.g. "Latest News" */
.o-slide__inner > .c-eyebrow-title {
    width: calc(100% - (var(--spacing-m) * 2));
    margin-inline-start: auto;
    margin-inline-end: auto;
    text-align: center;
}
/* GROUP COMPONENTS / EYEBROW TITLE / SPACING
=================================================== */
/* e.g. >> /news */
.c-eyebrow-title {
    /* e.g. >> /news-single */
    padding-block-end: var(--spacing-l)!important;
    margin-block-end: var(--spacing-m);
}
/* e.g. >> /news */
.c-eyebrow-title--compressed {
    margin-block-end: 0;
}
.c-eyebrow-title {
    /* e.g. >> /news-single */
    margin-block-end: var(--spacing-l);
}

/* e.g. "Latest News" */
.o-slide__inner > .c-eyebrow-title {
    /* Decrease */
    padding-block-end: var(--spacing-l-static);
}

p + .c-slide__more-link {
    /* e.g. >> /red-planet-prize */
    padding-block-start: var(--spacing-l);
}

.c-eyebrow-title--plain {
    /* e.g. >> Home */
    margin-block-end: var(--spacing-s-1);
}
/* GROUP COMPONENTS / EYEBROW TITLE / DECORATION
=================================================== */
/* e.g. >> /news */
.c-eyebrow-title {
    border-bottom: 3px solid var(--colour-navy);
}

/* e.g. >> /news-single */
.c-eyebrow-title--single {
    border-bottom: 3px solid var(--colour-red);
}

.c-eyebrow-title--plain {
    border: initial;
}




/* GROUP COMPONENTS / EYEBROW SUBTITLE
=================================================== */
/* Notes...
    
    Smaller and typically red e.g. /red-planet-prize

*/
/* HTML Example...

    .s-entry-content
        h3.c-eyebrow-subtitle

*/
/* GROUP COMPONENTS / EYEBROW SUBTITLE / SPACING
=================================================== */
.c-eyebrow-subtitle {
    padding-block-end: var(--spacing-m);
    margin-block-end: var(--spacing-m);
}

.c-eyebrow-subtitle + * {
    /* e.g. >> /red-planet-prize */
    padding-block-start: 0;
    padding-block-end: var(--spacing-m);
}
/* GROUP COMPONENTS / EYEBROW SUBTITLE / DECORATION
=================================================== */
.c-eyebrow-subtitle {
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-s);
    font-size: var(--font-size-s);
    color: var(--colour-red);
    border-block-end: 3px solid var(--colour-red);
}

.c-eyebrow-subtitle + :is(h2, h3, h4) {
    /* e.g. >> /red-planet-prize */
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-l);
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}




/* GROUP COMPONENTS / SHARE
=================================================== */
/* Notes...

	- Social media sharing e.g. on an article

*/
/* HTML Example...

    .c-share
        .c-share__title
        .c-share__icons
            svg
            svg
            svg

*/
/* Modifiers...

*/
/* GROUP COMPONENTS / SHARE / LAYOUT
=================================================== */
.c-share__icons {
    display: flex;
    gap: 1em;
    position: relative;
    /* Pull in line with text above */
    left: -0.4em;
}

.c-share__icon {
    display: grid;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
}
/* GROUP COMPONENTS / SHARE / SPACING
=================================================== */
.c-share__title {
    margin-block-end: var(--spacing-s);
}
/* GROUP COMPONENTS / SHARE / DECORATION
=================================================== */
.c-share__title {
    font-weight: var(--font-family-main-weight-strong);
}

.c-share__icons svg {
    font-size: var(--icon-size-s);
    color: var(--colour-red);
}




/* GROUP COMPONENTS / GALLERY GRID
=================================================== */
/* Notes...

	- e.g. /productions

*/
/* HTML Example...

    .c-gallery-grid
        .c-gallery-grid__item
            .c-gallery-grid__title
                Sanditon
            img

*/
/* GROUP COMPONENTS / GALLERY GRID / LAYOUT
=================================================== */
.c-gallery-grid {
    display: grid;
    /* or the following to prevent overflow on screens less than 350px */
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 22em), 1fr));
}

.c-gallery-grid__title {
    pointer-events: none;
    position: absolute;
    z-index: 1;
    top: 50%;
    transform: translateY(-50%);
    width: 100%;
    text-align: center;

    opacity: 0;
    transition: opacity 0.3s ease-in 0s;
}
/* GROUP COMPONENTS / GALLERY GRID / SPACING
=================================================== */
.c-gallery-grid__title {
    padding-inline-start: var(--spacing-s);
    padding-inline-end: var(--spacing-s);
    padding-block-end: 0;
}

/* e.g. >> /productions */
.c-gallery-grid + .c-slide__more-link {
    padding-block-start: var(--spacing-l);
    padding-block-end: var(--spacing-l);
}
/* GROUP COMPONENTS / GALLERY GRID / DECORATION
=================================================== */
.c-gallery-grid {
    background: var(--colour-black-off);
}

.c-gallery-grid__title {
    font-size: var(--font-size-s);
    color: white;
    font-weight: var(--font-family-main-weight-strong);
}

.c-gallery-grid__subtitle {
    font-size: var(--font-size-s-x-x);
    font-weight: var(--font-family-main-weight-medium);
}

.c-gallery-grid__item img {
    width: 100%;
}

@supports (pointer-events: none) {
    .c-gallery-grid__item::before {
        pointer-events: none;
        position: absolute;
        z-index: 1;
        content: "";
        width: 100%;
        height: 100%;
    }

    .c-gallery-grid__item:hover::before {
        background: var(--colour-red);
        mix-blend-mode: multiply;
        filter: contrast(100%);
    }

    .c-gallery-grid__item:hover .c-gallery-grid__title {
        opacity: 1;
    }
}

/* Show titles when hover is not supported */
@media (hover: none) {
    .c-gallery-grid__title {
        opacity: 1;
    }
}




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

	- Small card with a logo and some text e.g. bottom of /team page
	- Also has optional columns e.g. /red-planet-prize

*/
/* HTML Example...

    .c-card
        .c-card__logo
        .c-card__title

        Optional...
        .c-card__columns
            .c-card__columns__column

*/
/* Modifiers...

*/
/* GROUP COMPONENTS / CARD / LAYOUT
=================================================== */
.c-card {
    text-align: center;
    max-width: var(--max-width-title);
    margin-inline-start: auto;
    margin-inline-end: auto;
    width: 100%;
}

.c-card p {
    max-width: var(--max-width-reading);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-card__columns {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: var(--spacing-l);
}

.c-card__columns__column {
    flex-basis: calc(33.333% - var(--spacing-l));
}

/* Custom */
@media (min-width: 768px) {
    .c-card__columns {
        flex-direction: row;
    }
}
/* GROUP COMPONENTS / CARD / SPACING
=================================================== */
.c-card {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
}
.c-card__title {
    /* Decrease */
    padding-block-start: var(--spacing-m);
    padding-block-end: var(--spacing-l);
    margin-block-end: var(--spacing-l-1);
}

.c-slide .c-card__title {
    /* e.g. >> /red-planet-prize */
    padding-block-start: 0;
}

.c-card p:last-child {
    padding-block-end: 0;
}

.c-card__columns {
    padding-block-end: var(--spacing-l-3);
}

.c-card__columns :is(h2, h3, h4) {
    padding-block-end: var(--spacing-s-1);
}
/* GROUP COMPONENTS / CARD / DECORATION
=================================================== */
.c-card__title {
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
    border-block-end: 3px solid var(--colour-red);
}

.c-card__logo svg {
    font-size: var(--icon-size-l);
    color: var(--colour-navy-reversed);
    opacity: 0.2;
}

.c-card p {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
}

.c-card__columns {
    border-block-end: 3px solid var(--colour-red);
}

.c-card__columns :is(h2, h3, h4) {
    color: var(--colour-red);
    font-size: var(--font-size-s);
}




/* GROUP COMPONENTS / OR SPLITTER
=================================================== */
/* Notes...

	- e.g. /red-planet-prize 'This year's focus is on this /or this

*/
/* HTML Example...

    .c-pattern.c-pattern--plain
        .c-or-splitter
            h3.c-or-splitter__title
                This Year ITV's Focus Is On
            .c-or-splitter__options
            .c-or-splitter__options__option
                p
            .c-or-splitter__options__option
                p

*/
/* GROUP COMPONENTS / OR SPLITTER / LAYOUT
=================================================== */
.c-or-splitter {
    max-width: var(--max-width-title);
    margin-inline-start: auto;
    margin-inline-end: auto;
}

.c-or-splitter__options {
    display: flex;
    flex-direction: column;
    gap: 7em;
}

/* --mq-splitter-after */
@media (min-width: 768px) {
    .c-or-splitter__options {
        flex-direction: row;
        /* Decrease */
        gap: var(--spacing-l-4);
    }

    .c-or-splitter__options__option {
        width: 50%;
        display: flex;
        align-items: center;
    }
}
/* GROUP COMPONENTS / OR SPLITTER / SPACING
=================================================== */
.c-or-splitter {
    padding-inline-start: var(--spacing-m);
    padding-inline-end: var(--spacing-m);
    padding-block-start: var(--spacing-vh-s);
    padding-block-end: calc(var(--spacing-vh-s) + 6vh);
}

.c-or-splitter__options {
    margin-block-start: var(--spacing-l-1);
}

.c-or-splitter__options__option p {
    padding-inline-start: var(--spacing-l-1);
    padding-inline-end: var(--spacing-l-1);
    padding-block-end: 0;
}
/* GROUP COMPONENTS / OR SPLITTER / DECORATION
=================================================== */
.c-or-splitter {
    text-align: center;
}

.c-or-splitter__options {
    position: relative;
}

.c-or-splitter__options::before {
    content: "OR";
    position: absolute;
    z-index: 1;
    top: calc(50% - 3em);
    left: calc(50% - 2em);
    background: white;
    height: 4em;
    width: 4em;
    display: grid;
    align-items: center;
    text-align: center;
    border-radius: 50px;
    color: var(--colour-red);
}

.c-or-splitter__options::after {
    --width: 13em;
    content: "";
    position: absolute;
    top: calc(50% - 1em);
    left: calc(50% - (var(--width) / 2));
    border-top: 3px solid var(--colour-red);
    width: var(--width);
}

/* --mq-splitter-after */
@media (min-width: 768px) {
    .c-or-splitter__options::before {
        /* Decrease */
        top: calc(50% - 2.5em);
    }

    .c-or-splitter__options::after {
        /* Increase */
        top: 50%;
        transform: rotate(-45deg);
    }
}




/* GROUP COMPONENTS / SOCIAL ICONS
=================================================== */
/* ul*/
.c-social-icons {
    display: flex;
    list-style: none;
    justify-content: center;
    gap: var(--spacing-l);
    padding-block-end: var(--spacing-l-3);
}

.c-slide .c-social-icons svg {
    font-size: var(--icon-size-s-1);
}




/* GROUP COMPONENTS / ZOOM
=================================================== */
/* Notes...

	- e.g. zoom an image on hover > News

*/
/* HTML Example...

    .c-zoom
        a
            img

*/
/* GROUP COMPONENTS / ZOOM / LAYOUT
=================================================== */
.c-zoom {
    position: relative;
    overflow: hidden;
}
/* GROUP COMPONENTS / ZOOM / DECORATION
=================================================== */
.c-zoom img {
    transition: all 0.2s ease-in-out 0s;
}

.c-zoom img:hover {
    transform: scale(1.05);
}



/* purgecss start ignore */
/* GROUP UTILITIES / FRAMEWORK
=================================================== */
.qa-test {
    border: 3px solid red!important;
}

/* Images without alt tags */
/* img[alt=""],
img:not([alt]) {
    border: 5px dashed red;
} */

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

/* Needed for when you declare width and height attributes to improve loading lazy images */
/* picture*/
.u-full-width-image img {
    width: 100%;
}

/* 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;
}

@media (min-width: 768px) {
    .u-mq-768-down {
        display: none;
    }
}
@media (max-width: 767px) {
    .u-mq-768-up {
        display: none;
    }
}
@media (min-width: 1024px) {
    .u-mq-1024-down {
        display: none;
    }
}
@media (max-width: 1023px) {
    .u-mq-1024-up {
        display: none;
    }
}
/* GROUP UTILTIES / FRAMEWORK / (NON CORE) / ICONS / SIZING
=================================================== */
.u-icon-right,
.u-icon-left {
    /* e.g. >> /news */
    line-height: 0.9;
}

.u-icon-right {
    margin-inline-start: var(--spacing-icon-l)!important;
}
.u-icon-left {
    margin-inline-end: var(--spacing-icon-l)!important;
}
/* These is explicit, so override any automatic rules above with !important */
/* GROUP UTILITIES / FRAMEWORK / STATAMIC
=================================================== */
/* if ( window.location !== window.parent.location ) {
    // The page is in an iFrame and very likely being called by Statamic's Live Preview mode.
    // Use this class to selectively disable some animations since the page will be rapidly loaded on every keystroke
    document.querySelector('html').classList.add('js--statamicLivePreview');
} */
.js--statamicLivePreview *,
.js--statamicLivePreview *::before,
.js--statamicLivePreview *::after {
    animation-duration: 0s!important;
    animation-delay: 0s!important;
    /* Stop AOS tripping things up in case it does not get initialised */
    opacity: 1!important;
    transform: unset!important;
}
/* GROUP UTILITIES / FRAMEWORK / INVERT ELEMENT
=================================================== */
/* Notes...

  - Invert elements using of mix-blend-mode
  - It only works well with black and white
    - Make the overlaying element white rather than the other way around
  [Source](https://stackoverflow.com/questions/63772258/mix-blend-mode-in-reversing-colors)

*/
/* HTML Example...

<div class="c-site-header">
    <div class="c-site-header__cta u-invert">
        <a href="">Play Showreel</a>
    </div>
</div>

<div class="some-panel">
    some things
</div>

*/
/* GROUP UTILITIES / FRAMEWORK / INVERT ELEMENT / DECORATION
=================================================== */
.u-invert {
    mix-blend-mode: difference;
}
.u-no-scroll {
    height: 100%;
    overflow: hidden;
}
/* e.g. >> /about to cover an image */
.u-overlay {
    position: relative;
}
.u-overlay img {
    /* Stretch it to prevent it from not being 100% wide e.g. >> /about */
    width: 100%;
}
.u-overlay::before {
    content:"";
    position: absolute;
    /* z-index: 1; */
    width: 100%;
    height: 100%;
    background: var(--colour-navy-overlay);
}
.c-hero-image .u-overlay {
    /* Override this so the logo gradient still shows e.g. >> /productions-single */
    position: initial;
}
/* GROUP UTILITIES / FRAMEWORK / INVERT ELEMENT / EXTRA
=================================================== */
/* Notes...

    - This is used to prevent the inversion activating on the top slide
    - Intersection observer is used to disable inversion while the top slide is active

*/
.js--doNotInvert .u-invert {
    mix-blend-mode: initial;
}
/* GROUP UTILITIES / FRAMEWORK / LAYOUT / CONSTRAINTS / MAX
=================================================== */
/* e.g. >> /news?page=1 */
.u-width-max-2 {
    max-width: var(--max-width-2);
    margin-inline-start: auto;
    margin-inline-end: auto;
}
/* GROUP UTILITIES / FRAMEWORK
=================================================== */
/* Needed to set a white background e.g. /productions-single. This is so the inverted 'play showreel' CTA successfully inverts against a set background colour */
.u-background-light {
    background: white;
}

.u-link-style-none,
.u-link-style-none * {
    /* --u-link-style-none */
    text-decoration: none;
    color: inherit;
    border-bottom: 0;
}
/* GROUP UTILITIES
=================================================== */
.u-filter-bw {
    filter: grayscale(100%);
}
/* GROUP TAILWIND
 *
 * Tailwind classes before tailwind package is being used.
 *
========================================================== */
.mbs-4 {
    margin-block-start: 1rem;
}
.basis-full {
    flex-basis: 100%;
}

/* purgecss end ignore */