/* purgecss start ignore */
/*! Notes...

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

    ABOUT THIS CSS
    ===================================================
    - Only edit filename-dev.css, then process with Gulp
    - 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
    - Where CSS groups include framework names such as WordPress or Genesis it means HTML/CSS in this group is based on these solid frameworks

*/

/*  NAMESPACING REFERENCE
    ===================================================
    Influenced by http://csswizardry.com/2015/03/more-transparent-ui-code-with-namespaces/
    
    o-: Object (usually neutral classes to do with layout). Objects may be used in any number of unrelated contexts to the one you can currently see it in.
        Making modifications to these types of class could potentially have knock-on effects in a lot of other unrelated places. Tread carefully.
        The easiest way to classify objects is by thinking whether it's invisible. if it's non-visual; a skeletal structure such as layout, then it's probably an object.

        Examples: .o-media, .o-overlay, .o-grid-flex


    c-: Component. This is a concrete, implementation-specific piece of UI.
        All of the changes you make to its styles should be detectable in the context you're currently looking at.
        Modifying these styles should be safe and have no side effects.
        Usually when we make changes to a Components' ruleset, we will immediately see those changes happening everywhere (and only)
        where we'd expect.

        Hints: 
        Examples: .c-btn


    u-: Utility. It has a very specific role (often providing only one declaration) and should not be bound onto or changed.
        It can be reused and is not tied to any specific piece of UI.
        You will probably recognise this namespace from libraries and methodologies like SUIT.

        Hints:
        Examples: .u-clearfix


    s-: Scope. Creates a new styling context or Scope. Similar to a Theme, but not necessarily cosmetic,
        these should be used sparingly-they can be open to abuse and lead to poor CSS if not used wisely.

        Hints: 
        Examples: .s-entry-content, .s-input-style



    ADDITIONAL NAMESPACING
    ===================================================
    Scales
    ------
    -s = small
    -m = medium
    -l = large
    -n = none

    Micro Scale examples
    ------------
    -s-0-0 = smaller still, etc.
    -s-0 = smaller
    -m-1 = between medium and large, etc.

    Directions
    ----------
    -b = bottom
    -t = top

    Other
    -----
    alt = an alternative styling method e.g. for text sizing this may use rems intead of ems, for spacing the -alt may stand for margin rather than padding
    -mq = Media query, usually followed by a pixel value and then a direction.
    -custom (not object-orientated), intended for use with a descendant selector when you want to make a one-off **location-based** adjustment. See the CSS Framework doc for more information.

    jg = specifically related to this framework. This is to prevent conflict with third-party plugins.
    This should be used very rarely e.g. icon prefixes (.jg-icon)

*/

/* Notes...
    - Disable indentation because Linting doesn't seem to understand indentation of root elements
*/
:root {
    /* (DO NOT USE MEDIA QUERY VARIABLES IN PRODUCTION AS OF 2016-05-25) because I can't get variables to work in media queries
    GROUP VARIABLES -- MEDIA QUERIES
    ===================================================  */
    /* Notes...

        Only use MQ variables when you are tying relationships together.
        By default MQs should be independent and based around the context of local content.

    */
    /* --mq-products-min-3-columns: (min-width: 64em); */
    /* GROUP VARIABLES -- RHYTHM
    =================================================== */
    --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.6rem;

    --spacing-m-2: 1.8rem;

    --spacing-l: 2rem;
    --spacing-l-horizontal: var(--spacing-l);
    --spacing-l-static: 1.8rem;

    --spacing-l-1: 2.8rem;

    --spacing-l-2: 4.2rem;

    --spacing-l-3: 5rem;
    /* Smaller value for mobile */
    --spacing-l-3-horizontal: var(--spacing-l);

    /* e.g. Distance between hero image and next element on both /about and /work (but mostly /work).
    Check /about on mobile before changing this on lower MQs */
    --spacing-l-4: 5rem;

    /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
    =================================================== */
    /* From lowest to highest value */
    /* Based on use of URW Antiqua, and /about paragraphs */
    /* Based on hompeage Hero panel text at 768px */
    --max-width-reading: 36rem;
    /* Needed for later root changes */
    --max-width-reading-longform: var(--max-width-reading);
    --max-width-hero-text: 49rem;
    --max-width-title: 53rem;
    /* e.g. screenshot grid on e.g. >> /projects */
    --max-width-1: 78rem;
    /* e.g. nav */
    --max-width-2: 104rem;
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE
    =================================================== */
    /* Dark to light */
    /* https://twitter.com/AustinTByrd/status/1105822085362925568 */
    /* Used for faux iPad portrait on /about, and background in lazy-loading-video.css */
    --colour-black-eigengrau: #16161d;
    --colour-black-off: #222;
    /* -- */
    --colour-black-off-rgb: 51, 51, 51;
    /* AA compliant as grey text on white background. AAA is 595959 */
    --colour-grey-reading: hsl(0, 0%, 46%);
    /* --colour-grey-reading-dark-background: #898989; */
    --colour-grey-reading-dark-background: #999;
    /* e.g. h4 */
    --colour-grey: #666;
    /* Used many places e.g. buttons, brand separator, sub title */
    --colour-grey-reading-18pt: hsl(0, 0%, 58%);
    /* e.g. border-grey-s */
    --colour-grey-light-2: #ddd;
    /* Used in gradients */
    --colour-grey-light-3: #f1f1f1;
    /* Used in gradients */
    --colour-grey-light-4: #f7f7f7;
    /* Used for alt panels */
    --colour-grey-light-5: #fafafa;
    /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE -- GRADIENTS
    =================================================== */
    /* Changed at higher MQs for performance reasons */
    --colour-gradient-grey-subtle-radial: var(--colour-grey-light-4);
    /* Hero image */
    --colour-gradient-grey-subtle: var(--colour-grey-light-4);
    --colour-gradient-dark: #070908;
    --colour-gradient-dark-to-right: #070908;
    --colour-gradient-dark-radial: #070908;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- FONTS
    =================================================== */
    --font-family-main: europa, sans-serif;
    /* Not used on client site */
    /* --font-family-longform: adobe-garamond-pro, 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-normal: 400;
    --font-family-main-weight-strong: 700;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
    =================================================== */
    /*
    Variable font-size and line-height example...
    (variables are bumped up and down in :root)

    font-size: var(--font-size-l-1);
    line-height: var(--font-size-l-1-line-height);

    */

    /* Optimise line-height for reading. Based on /projects/optima intro */
    --font-size-reading-line-height: 1.5;

    /* e.g. 
        - Nav
        - Magazine list article highlight date text
    */
    --font-size-s-0-0: 0.77em;
    --font-size-s-0-0-rem: 0.77rem;
    --font-size-s-0-0-line-height: 1.55;

    /* e.g. >> Home > Hero slides on my portfolio site, 320px viewport */
    --font-size-s-0: 0.79em;
    --font-size-s-0-line-height: 1.5;

    --font-size-s-0-1: 1rem;

    --font-size-s: 1.1em;
    /* e.g. >> /about, Our Team */
    --font-size-s-line-height: var(--font-size-reading-line-height);

    --font-size-s-1: 1.25em;
    /* e.g. >> /about, Our Team */
    --font-size-s-1-line-height: 1.5;

    --font-size-s-2: 1.55em;
    /* e.g. >> Home > Projects > text shown when hovering over tiles */
    --font-size-s-2-line-height: 1.25;

    --font-size-m: 1.9em;
    --font-size-m-line-height: 1.28;

    --font-size-l: 2.4em;
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    --font-size-l-line-height: 1.05;

    /* e.g. >> /work, .c-hero-title */
    --font-size-l-1: 2.7em;
    --font-size-l-1-line-height: 1.1;

    --line-height-client-request: 1.7;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES -- BUMPS
    =================================================== */
    /* For text bumps based on viewports, e.g.
    font-size: calc(1em + var(--font-bump-1));
    becomes...
    font-size: calc(1em + 0.115vw);

    Use variables in case we need to use these units in absolute centering calculations e.g. like I did with vee.guide when centering the leaf at the top of the page */
    --font-bump-1: 0.1vw;
    --font-bump-2: 0.11vw;
    --font-bump-3: 0.12vw;
    --font-bump-4: 0.19vw;
    --font-bump-5: 0.25vw;
    /* GROUP VARIABLES -- DECORATION -- TEXT -- OTHER
    =================================================== */
    /* .c-hero-image .c-entry-date { */
    /* e.g. >> home, news feature section, and also on news page */
    --letter-spacing-s: 1px;
    /* e.g. paging and nav */
    --letter-spacing-m: 1.5px;
    /* e.g. Info grid on Projects */
    --letter-spacing-l: 2px;
    /* GROUP VARIABLES -- DECORATION -- ICONS -- SIZES
    =================================================== */
    /* e.g. nav icon */
    --icon-size-m: 1.8em;
    /* e.g. nav icon */
    --icon-size-l: 2em;
    /* GROUP VARIABLES -- DECORATION -- BORDER RADIUS
    =================================================== */
    /* e.g. Cookie consent */
    --border-radius-l: 7px;
    /* GROUP VARIABLES -- DECORATION -- SEPARATORS -- BORDERS - ordered from light to dark variants
    =================================================== */
    --border-grey-s: 1px solid var(--colour-grey-light-2);
    /* GROUP VARIABLES -- DECORATION -- SEPARATORS -- BOX SHADOWS - ordered from light to dark variants
    =================================================== */
    /* e.g. Expand buttons */
    --box-shadow-s-light: 0 10px 9px rgba(0, 0, 0, 0.06);
    --box-shadow-s-medium: 0 10px 9px rgba(0, 0, 0, 0.25);
    --box-shadow-s-light-hover-state: 0 10px 9px rgba(0, 0, 0, 0.1);
    --box-shadow-focus: 0 0 0 3px black;
    --box-shadow-focus-inset: inset 0 0 0 3px black;
    /* GROUP VARIABLES -- DECORATION -- OTHER
    =================================================== */
    --image-boost: contrast(105%) saturate(1.2);
    --image-boost-less: contrast(105%) saturate(1.05);
    --opacity-lighten: 0.6;
    /* e.g. >> /about */
    --photo-portrait-size: 16em;
    /* e.g. >> /about, custom rhythm to avoid clipping of 'clips' */
    --padding-to-hide-portraits: 2.1rem;
    /* GROUP VARIABLES -- ANIMATIONS -- TRANSITIONS
    =================================================== */
    /* Molecules > Pagination > Perch > (Cross Pollinated) */
    --animation-transition-fast: all 0.15s ease-in-out 0s;
}
@media (min-width: 375px) {
    :root {
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        /* Increase */
        /* e.g. magazine date and excerpt */
        /* e.g. >> /projects/ora */
        --font-size-s-0: 0.84em;
    }
}
/* --mq-after-root-variable-adjustments-1 */
@media (min-width: 450px) {
    :root {
        /* GROUP VARIABLES -- RHYTHM
        ===================================================  */
        /* Increase */
        /* e.g. >> /about */
        --spacing-l: 2.8rem;
        /* e.g. nav */
        --spacing-l-horizontal: 3rem;
        --spacing-l-1: 3.5rem;
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        /* Increase */
        --font-size-l: 2.6em;
        --font-size-l-1: 2.9em;
        /* GROUP VARIABLES -- DECORATION -- COLOURS -- GRAYSCALE -- GRADIENTS
        =================================================== */
        --colour-gradient-grey-subtle-radial: radial-gradient(ellipse at top right, white 0%,var(--colour-grey-light-3) 100%);
        --colour-gradient-grey-subtle-radial-to-right: radial-gradient(ellipse at top left, white 0%,var(--colour-grey-light-3) 100%);
        --colour-gradient-grey-subtle: linear-gradient(to bottom, white 0%, var(--colour-grey-light-3) 100%);
        --colour-gradient-grey-subtle-top: linear-gradient(to top right, white 0%, var(--colour-grey-light-3) 100%);
        --colour-gradient-dark: linear-gradient(to right, #070908 0%,#222 100%);
        --colour-gradient-dark-to-right: linear-gradient(to right, #070908 0%,#222 100%);
        /* --colour-gradient-dark-radial: radial-gradient(ellipse at top left, #070908 0%, #222 100%); */
        /* Improve contrast */
        --colour-gradient-dark-radial: radial-gradient(ellipse at top left, #070908 50%, #222 100%);
    }
}
/* --mq-after-root-variable-adjustments-2 */
@media (min-width: 730px) {
    :root {
        /* Increase */
        --spacing-l-3-horizontal: 4.8rem;
        /* GROUP VARIABLES -- DECORATION -- TEXT -- SIZES
        =================================================== */
        /* e.g. >> Home > Projects > text shown when hovering over tiles */
        --font-size-s-2-line-height: 1.35;
    }
}
/* --mq-after-hero-image-absolute-text */
@media (min-width: 980px) {
    :root {
        /* Decrease */
        --max-width-hero-text: 22rem;
    }
}
/* Variable font-size and line-height example... */
/* --mq-text-bump-2-after */
@media (min-width: 1500px) {
    :root {
        /* Keep client's ubiquitous Europa. This also works with Garamond */
        /* e.g. >> /news/united-launch-all-new-polaris-business-class-experience-with-cabin-layout-invented-by-acumen */
        --max-width-reading-longform: 43rem;
        /* Decrease. Based on use of Europa */
        --max-width-reading: 33rem;
    }
}
/* --mq-after-root-variable-adjustments-3 */
@media (min-width: 1600px) {
    /* GROUP VARIABLES -- RHYTHM
    =================================================== */
    :root {
        /* Increase */
        --spacing-l-4: 7.1rem;
    }
}
/* --mq-after-root-variable-adjustments-4 */
@media (min-width: 2000px) {
    :root {
        /* GROUP VARIABLES -- LAYOUT -- CONSTRAINTS -- MAX
        =================================================== */
        /* e.g. >> Home > logos */
        --max-width-1: 86rem;
    }
}




/* GROUP RESET - 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 / NORMALISE - 2018-01-10 - https://necolas.github.io/normalize.css/7.0.0/normalize.css
=================================================== */
html{line-height:1.15;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,footer,header,nav,section{display:block}h1{font-size:2em;margin:.67em 0}figcaption,figure,main{display:block}figure{margin:1em 40px}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:transparent;-webkit-text-decoration-skip:objects}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:inherit;font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}dfn{font-style:italic}mark{background-color:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}audio,video{display:inline-block}audio:not([controls]){display:none;height:0}img{border-style:none}svg:not(:root){overflow:hidden}button,input,optgroup,select,textarea{font-family:sans-serif;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,html [type="button"],[type="reset"],[type="submit"]{-webkit-appearance:button}button::-moz-focus-inner,[type="button"]::-moz-focus-inner,[type="reset"]::-moz-focus-inner,[type="submit"]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type="button"]:-moz-focusring,[type="reset"]:-moz-focusring,[type="submit"]:-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{display:inline-block;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-cancel-button,[type="search"]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details,menu{display:block}summary{display:list-item}canvas{display:inline-block}template{display:none}[hidden]{display:none}
/* GROUP RESET / JAY GEORGE
=================================================== */
/* html*/
.js-added--s-smooth-scroll {
    /* This is added slowly with JS in case we are coming off another page with a hashtag e.g. going from /about -> /#projects
        Because of lozad lazy-loading, the DOM position is incorrect if we use smooth scroll immediately
    */
    scroll-behavior: smooth;
}


body {
    /* So scroll bars hide like in Safari */
    -ms-overflow-style: -ms-autohiding-scrollbar;
    /* https://app.typographychecklist.com/ - 23. Use standard ligatures but avoid using discretionary ligatures in body text*/
    font-feature-settings: "kern", "liga", "clig", "calt";
}

* {
    /* 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);
    /* Don't do *::before, *::after - this has caused me performance problems before with flickering images */
    box-sizing: border-box;
}




/* GROUP BASE
=================================================== */
/* =JFG. HTML default e.g. when we are separating lines with <br> like addresses in proposals */
html {
    /* 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;
}

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




/* Custom */
@media (min-width: 500px) {
    html {
        font-size: 1em;
    }
}
/* --mq-after-hero-image-absolute-text to custom */
@media (min-width: 980px) and (max-width: 1390px) {
    html {
        font-size: 0.95em;
    }
}
/* --mq-text-bump-2-after */
@media (min-width: 1500px) {
    html {
        /* Increase */
        font-size: calc(1em + var(--font-bump-1));
    }
    /* 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-after-root-variable-adjustments-3 */
@media (min-width: 1600px) {
    html {
        /* Increase */
        font-size: calc(1em + var(--font-bump-2));
    }
}
/* --mq-text-bump-3-after */
@media (min-width: 1950px) {
    html {
        /* Increase */
        font-size: calc(1em + var(--font-bump-3));
    }

    :root {
        /* Decrease */
        --font-size-s-0-0: 0.7em;
    }
}
/* --mq-text-bump-4-after */
@media (min-width: 2200px) {
    html {
        /* Increase */
        font-size: calc(1em + var(--font-bump-4));
    }

    :root {
        /* Decrease */
        --font-size-s-0-0: 0.65em;
    }
}
/* --mq-after-text-bump-5 */
@media (min-width: 2400px) {
    html {
        /* Increase */
        font-size: calc(1em + var(--font-bump-5));
    }

    :root {
        /* Increase */
        --spacing-l: 3.8rem;
        /* Decrease */
        --spacing-l-2: 4rem;
        /* Increase */
        /* Needs to increase to match up with --spacing-l changes e.g. 'Transforming Design' on homepage needs to align with nav */
        --spacing-l-3: 5.6rem;
    }
}


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

/* For when something is revealed with JS, but if JS is not available show it */
.js .js__u-js-hide {
    display: none;
}

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

.js__apple-only {
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

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

.js-added---apple .js__apple-only {
    /* START SCREEN READER TEXT SHOW
    --------------------------- */
    clip: auto;

    position: static!important;
    overflow: visible;
    width: auto;
    height: auto;
    /* END SCREEN READER TEXT SHOW
    ------------------------- */
}

/* Text meant only for screen readers. */
/* Organisms > 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
    ------------------------- */
}

/* Drop Cap */
/* .u-drop-cap, */
/* Organisms > Entry Content */
/* e.g. >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
header + .entry-content > .s-entry-content:first-child::first-letter {
    float: left;
    margin-bottom: -1.5rem;
    margin-right: 0.5rem;
    font-size: 3.1em;
    line-height: 1;
}

/* A utility class that's used on multiple grids - mostly for the 'expand' button. */
.u-grid-item-full-width {
    /* e.g. >> home > Clients */
    min-height: 0!important;
    grid-column: 1 / -1;
    /* e.g. >> home > projects */
    padding-bottom: 0;

    /* e.g. >> home > news */
    display: grid;
    justify-content: center;
}
/* GROUP ATOMS / UTILITIES / DECORATION
=================================================== */
/* e.g. floated block text size >> /projects/jetblue-mint */
.u-font-size-s {
    font-size: var(--font-size-s);
    line-height: var(--font-size-s-line-height);
}
/* GROUP ATOMS / UTILITIES / DECORATION / LINKS
=================================================== */
.u-link-style-none,
.u-link-style-none * {
    text-decoration: none;
    /* e.g. News on homepage */
    color: inherit;
}




/* GROUP ATOMS / LAYOUT / CONSTRAINTS / MAX
=================================================== */
/* e.g. post_in_list.html */
.o-width-max-2 {
    position: relative;
    max-width: var(--max-width-2);
    /* Needed for .c-hero-image - positioning of inside text e.g. home */
    height: 100%;
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
}




/* GROUP ATOMS / LAYOUT / GRID / PSEUDO GRID / ROWS
=================================================== */
/* Clearfix for IE8 above */
/* .u-layout-row::after, */
/* Organisms > Nav */
nav::after {
    content: " ";
    display: table;
    clear: both;
}




/* GROUP ATOMS / ELEMENTS
=================================================== */
/* ::selection {
    background: light color;
    color: dark color;
} */

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

address {
    font-style: var(--font-family-main-style-1);
}

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

figcaption {
    font-size: var(--font-size-s-0);
}

body {
    font-family: var(--font-family-main);
    color: var(--colour-grey-reading);
}

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

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

p,
ol,
ul {
    padding-bottom: var(--spacing-m);
    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-bottom: 0;
}

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

hr {
    height: 2px;
    margin-bottom: var(--spacing-l);
    margin-top: var(--spacing-l);
    background: var(--colour-grey-reading-18pt);
    border: 0;
}

strong {
    color: var(--colour-black-off);
}


blockquote {
    position: relative;
    font-family: var(--font-family-longform);
    margin-inline-start: 0;
    margin-inline-end: 0;
    /* font-style: var(--font-family-main-style-2); */
}

/* Used in news e.g. e.g. >> /news/ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
.c-blockquote-sign p::before {
    position: absolute;
    left: -0.7em;
    top: -0.3em;
    content: open-quote;
    font-family: serif;
    font-size: var(--font-size-m);
}

.c-blockquote-sign p::after {
    padding-inline-start: var(--spacing-s-0-0);
    content: close-quote;
    font-family: serif;
    font-size: var(--font-size-s-1);
    /* Stop it from ruining line-height of the paragraph */
    line-height: 0;
}

blockquote p,
blockquote cite {
    color: var(--colour-grey-reading-18pt);
    font-style: var(--font-family-main-style-1);
    font-size: var(--font-size-s-0);
}

/* Avoid targetting pull quote */
.s-entry-content cite {
    /* e.g. >> /news/ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
    color: var(--colour-black-off);
}

blockquote p:last-child {
    /* e.g. prevent the decorative left border from extending beyond the text */
    padding-bottom: 0;
}

/* figure {
    Cancelled based on e.g. >> /page-wordpress-blog-archive-genesis.php
    padding-bottom: var(--spacing-l-1);
} */

cite {
    font-size: 0.95em;
}

/*audio {
    box-shadow: 0 0 10px rgba(255,255,255,0.25);
}*/

video {
    /* Set the width on the element first, then use CSS to make it responsive e.g. <video width="320"> */
    width: 100%;
}
/* GROUP ATOMS / ELEMENTS / IFRAMES / TWEAKS
=================================================== */
/* Aspect ratio */
@supports (aspect-ratio: 16/9) {
    iframe[src*="youtube"],
    iframe[src*="vimeo"] {
        /* Need supports otherwise height: auto; causes issues with the width */
        height: auto;
        aspect-ratio: 16/9;
    }
}

iframe {
    width: 100%;
    /* Stop iframe possibly busting out of body container on mobile before fitvids kicks in */
    /* max-width: 100%; */
    border: none;
}
/* GROUP ATOMS / ELEMENTS / HEADINGS
=================================================== */
h1,
/* h1 a, */
.h1,
/* .h1 a, */
h2,
/* h2 a, */
.h2,
/* .h2 a, */
h3,
/* h3 a, */
.h3
/* .h3 a */ {
    font-family: var(--font-family-headline);
    font-style: var(--font-family-headline-style-1);
    font-weight: var(--font-family-main-weight-strong);
    color: var(--colour-black-off);
    font-kerning: normal;
    /* https://app.typographychecklist.com/ 91 - Use discretionary ligatures and swashes in headlines */
    font-feature-settings: "kern", "liga", "clig", "calt", "dlig", "swsh";
}

h4,
h4 a,
.h4,
.h4 a {
    font-family: var(--font-family-headline);
    font-style: var(--font-family-headline-style-1);
    color: var(--colour-grey);
}

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

h2,
.h2 {
    /* e.g. >> Home > News */
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

h3,
.h3 {
    font-size: var(--font-size-s-2);
    line-height: var(--font-size-s-2-line-height);
    color: var(--colour-grey);
}

h4,
.h4 {
    font-size: var(--font-size-s-1);
    line-height: var(--font-size-s-1-line-height);
    color: var(--colour-grey);
}

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

h6,
.h6 {
    font-size: var(--font-size-s-0-1);
    line-height: var(--font-size-s-0-1-line-height);
}
/* GROUP ATOMS / ELEMENTS / HEADINGS / HIGH PRIORITY / VERTICAL RHYTHM
=================================================== */
h1,
.h1 {
    /* e.g. >> /about */
    padding-bottom: var(--spacing-l);
}

h2,
.h2 {
    padding-bottom: var(--spacing-m-2);
}

* + h1,
* + .h1,
/* =JFG. e.g. Molecules > Counters */
* > h1,
* > .h1,
* + h2,
* + .h2,
article + article {
    padding-top: var(--spacing-l);
}
/* GROUP ATOMS / ELEMENTS / HEADINGS / LOW PRIORITY / VERTICAL RHYTHM
=================================================== */
h3,
.h3 {
    /* e.g. >> /about */
    padding-bottom: var(--spacing-s-2);
}

h4,
.h4,
h5,
.h5,
h6,
.h6 {
    /* e.g. >> /about */
    padding-bottom: var(--spacing-s-1);
}

* + 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 {
    /* e.g. >> acumen/about */
    padding-top: var(--spacing-s-1);
}

h2 + h3,
.h2 + h3 {
    padding-top: 0;
}
/* GROUP ATOMS / ELEMENTS / HEADINGS / EXCEPTIONS / VERTICAL RHYTHM
=================================================== */
ul + h2,
ul + .h2 {
    padding-top: var(--spacing-s);
}

h1 + h2,
h1 + .h2,
.h1 + .h2,
hr + * {
    padding-top: 0;
}




/* GROUP ATOMS / DECORATION / 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-decoration-color: var(--colour-grey-reading-18pt);

    /* https://css-tricks.com/almanac/properties/t/text-decoration-style */
    /* text-decoration-style: double;

    /* https://css-tricks.com/almanac/properties/t/text-underline-position */
    text-underline-position: under;
    color: var(--colour-grey-reading);
}
/* GROUP ATOMS / DECORATION / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / FOCUS
=================================================== */
/* Notes...

    Rian Rietveld, Twitter, on 2018-03-08:
    - keep a good color contrast for text/borders against the background
    - not by color alone, so don't only change the color (for color blind users)
    - in WCAG 2.1 the borders also need to comply to a good contrast

    text-decoration: underline; and/or changing the background to an rgba or primary color, combined with an outline (faux padding) is most useful for focus on text-links.

    If you want a subtle effect try `outline: 1px dotted black;`

    For focusing on images you could also consider using box-shadow so you can get border radius e.g. box-shadow: var(--box-shadow-focus);

    Other tips:
    Do not make colors faint; make them obvious
    Try to keep focus colors consistent where possible. You may want to avoid changing colors on buttons though, because it's gross

    e.g. 
    
    .el:focus {
        outline: 3px solid rgba(var(--colour-turquoise-rgb),0.2);
        text-decoration: none;
        background: rgba(var(--colour-turquoise-rgb),0.2);
        border-bottom: 2px solid rgba(var(--colour-turquoise-rgb),0.8);
    }

    .c-hero-buttons a:focus {
        outline-width: 10px;
    }

    - button focus is handled by ATOMS / BUTTONS / ACCESSIBILITY / FOCUS
    - border dashed is nice for checkboxes

*/
a:focus {
    outline: none;
}
/* ============================================ */
/* .u-focus-style-1 a:focus, */
h2 a:focus,
h3 a:focus,
.s-entry-content a:focus,
body .c-btn-text:focus,
/* Molecules > (Not Part Of Framework) > Portraits */
.c-portraits__title a:focus span,
/* Ato > Elements */
/* e.g. >> /contact */
address a:focus {
    outline: 3px solid var(--colour-black-off);
    text-decoration: none;
    background: var(--colour-black-off);
    color: white!important;
    opacity: 1;
}

h2 a:focus {
    outline-width: 10px;
}
/* ============================================ */
/* .u-focus-style-2 a:focus */
/* Organisms > Nav > Accessibility > Focus */
nav a:focus span {
    border-bottom: 2px solid black;
}
/* ============================================ */
/* .u-focus-style-3 a:focus */
/* Organisms > (Not Part Of Framework) > Magazine List */
a:focus img {
    outline: none;
    box-shadow: var(--box-shadow-focus);
}

/* Exception */
.c-site-logo a:focus img {
    box-shadow: none;
}
/* --- */
/* Deviation when we need to use pseudo content */
.c-site-logo a {
    position: relative;
}

.c-site-logo a:before {
    content: "";
    position: absolute;
    top: calc(100% + var(--spacing-s-0));
    width: 100%;
}

.c-site-logo a:focus:before {
    border-bottom: 3px solid black;
}
/* --- */
/* Deviation when we need to use pseudo content with a box shadow */
/* Needed as pseudo element, and as :after rather than :before, because of opacity on :before pseudo element */
.c-feature-grid__item a:focus:after {
    content: "";
    position: absolute;
    top: 0;
    /* Needed as inset because overflow is hidden, to hide zoomed image */
    box-shadow: var(--box-shadow-focus-inset);
    width: 100%;
    height: 100%;
    left: 0;
}

.c-feature-grid__item a:focus:after {
    box-shadow: var(--box-shadow-focus-inset);
}
/* GROUP ATOMS / DECORATION / TEXT / LINK STYLES {/ LINKS} / ACCESSIBILITY / HOVER
=================================================== */
/* Notes...

    Subtle effects such as going from light grey to black are best for hover. We want to gentle suggest rather than pop out, like we do with focus.

    - Consider descending from p so we don't affect buttons e.g. reply button for blog comments
    - Consider darkening the underline/border-bottom color on hover, or removing the border on hover
    - Consider going from light grey to black e.g. navigation hover events

    e.g. 

    .el {
        color: #eee;
    }
    
    .el:hover {
        color: black;
    }

*/
/* e.g. nav links, .c-btn-text on homepage, About profile links */
a:hover,
/* Organisms > (Not Part Of Framework) > Magazine List */
.c-magazine-list .c-entry-title a:hover {
    color: black;
    text-decoration-color: black;
    transition: all 0.3s ease-out;
}




/* GROUP ATOMS / DECORATION / MISC
=================================================== */
.c-hairline,
/* Molecules > (Not Part Of Framework) > Hero List > Decoration */
.c-hero-list,
/* Atoms > elements */
cite {
    /* Decrease */
    position: relative;
    /* Need for cite e.g. /news/united-launch-all-new-polaris-business-class-experience-with-cabin-layout-invented-by-acumen */
    display: block;
    /* e.g. >> /contact */
    padding-top: var(--spacing-l);
    margin-top: var(--spacing-m);
}

cite {
    /* e.g. >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
    padding-top: var(--spacing-m-2);
}

.c-hairline::before,
/* Molecules > (Not Part Of Framework) > Hero List > Decoration */
.c-hero-list::before,
/* Atoms > elements */
cite::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 10%;
    /* border-top: 1px solid var(--colour-grey-reading-18pt); */
    border-top: var(--border-grey-s);
}

/* Where a gap is needed e.g. /projects */
.o-pull-image__content cite {
    margin-top: var(--spacing-m-2);
}

/* Exceptions where the hairline should be 'center aligned' */
/* Atoms > (Not Part Of Framework) > Blockquote Hero */
.c-blockquote-hero cite::before {
    left: 0;
}

.c-hairline + .c-hairline {
    /* e.g. >> /contact */
    margin-top: var(--spacing-m-2);
}

.c-hairline + .c-hero-buttons {
    /* e.g. >> /contact */
    padding-top: var(--spacing-l-2);
}

/* e.g. client version >> /contact */
.c-hairline--invisible {
    padding-top: 0;
}
.c-hairline--invisible::before {
    border: none;
}




/* Notes...

    - Simple decorational panel with grey gradient e.g. used on the Team section of /about

*/
/* HTML Example...

    .c-panel
        stuff

*/
.c-panel {
    background: var(--colour-gradient-grey-subtle-radial);
}

.c-panel-alt {
    /* e.g. >> home > news */
    background: var(--colour-grey-light-5);
}




/* GROUP ATOMS / ANIMATIONS
=================================================== */
/* Notes...

    - All animation needs to be in core.css because of the minification process i.e. nano-css will translate/map animation names to a/b/c, etc.
    - nano-css is not clever enough to cross reference css files

*/
/* GROUP ATOMS / ANIMATIONS / ANIMATION / LENGTH
=================================================== */
/* Used for cookie consent */
.u-animated-fast {
    animation-duration: 0.5s;
    animation-fill-mode: both;
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / FADE IN
=================================================== */
/* Organisms > Nav */
/* Atoms > JS Toggle Content */
@keyframes fade-in {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* GROUP ATOMS / ANIMATIONS / ANIMATION / SLIDE DOWN AND FADE IN
=================================================== */
/* Used for nav mobile */
@keyframes slide-down-and-fade-in {
    0% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }

    100% {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / SLIDE UP AND FADE OUT
=================================================== */
/* Used for nav mobile */
@keyframes slide-up-and-fade-out {
    0% {
        opacity: 1;
        transform: translate3d(0, 0%, 0);
    }

    100% {
        opacity: 0;
        transform: translate3d(0, -100%, 0);
    }
}

.o-nav-wrapper {
    animation-duration: 0.4s;
    animation-timing-function: ease-in-out;
    animation-fill-mode: both;
}

/* --mq-before-nav-opens */
@media (max-width: 1279px) {
    .js-added---has-been-animated.o-nav-wrapper {
        animation-name: slide-up-and-fade-out;
    }

    .js .o-nav-wrapper:not(.js-added---has-been-animated) {
        display: none;
    }
}

.js-added---is-open .o-nav-wrapper {
    animation-name: slide-down-and-fade-in;
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / FADE OUT
=================================================== */
/* Organisms > Nav */
@keyframes fade-out {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.u-animated--fade-out {
    animation-name: fade-out;
    /* Out quadratic */
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / SIDER - SLIDE RIGHT OFF SCREEN
=================================================== */
/* Notes...

    - Used in team section of the about page

*/
@keyframes slider-disappear-mq-625-down {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 0;
    }
}

@keyframes slider-slide-right-off-screen-mq-625-up {
    0% {
        transform: translateX(0%);
        opacity: 1;
    }

    100% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(100%);
        opacity: 0;
    }
}

/* --mq-before-portrait-breakpoint-1 */
@media (max-width: 624px) {
    body .u-animated--slider-disappear-mq-625-down {
        /* We can't use a 'slider-slide-right-off-screen-mq-625-down' animation because
        Safari will not animate this nicely, so instead we'll just make it disappear */
        position: absolute;
        animation-name: slider-disappear-mq-625-down;
    }
}

/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .u-animated--slider-slide-right-off-screen-mq-625-up {
        animation-name: slider-slide-right-off-screen-mq-625-up;
    }
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / SIDER - SLIDE LEFT ON SCREEN
=================================================== */
/* Organisms > nav > mobile */
@keyframes slider-slide-left-on-screen {
    0% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(100%);
        opacity: 0;
    }

    100% {
        transform: translateX(0%);
        opacity: 1;
    }
}

body .u-animated--slider-slide-left-on-screen {
    position: relative;
    animation-name: slider-slide-left-on-screen;
}

/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .u-animated--slider-slide-left-on-screen-mq-625-up {
        animation-name: slider-slide-left-on-screen;
    }
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / SLIDER - SLIDE RIGHT ON SCREEN
=================================================== */
/* Organisms > nav > mobile */
@keyframes slider-slide-right-on-screen {
    0% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(-100%);
        /* Temp increase height until animation is complete so that nothing appears cut off at the bottom */
        height: 100vh;
    }

    99% {
        /* Make the transition to default height as smooth as possible */
        height: 100vh;
    }

    100% {
        transform: translateX(0%);
    }
}

/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .u-animated--slider-slide-right-on-screen-mq-625-up {
        width: 100%;
        animation-name: slider-slide-right-on-screen;
    }
}
/* GROUP ATOMS / ANIMATIONS / ANIMATION / SLIDER - SLIDE LEFT OFF SCREEN
=================================================== */
/* Organisms > nav > mobile */
@keyframes slider-slide-left-off-screen {
    0% {
        /* Changed from Dan Eden. Does not use translate3D */
        transform: translateX(0%);
        position: absolute;
    }

    100% {
        transform: translateX(-100%);
        position: absolute;
    }
}

/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .u-animated--slider-slide-left-off-screen-mq-625-up {
        animation-name: slider-slide-left-off-screen;
        /* Needed for Safari */
        position: absolute!important;
    }
}


/* -- */
.u-animated--slider-slide-right-off-screen-mq-625-up,
.u-animated--slider-slide-left-on-screen-mq-625-up,
.u-animated--slider-slide-right-on-screen-mq-625-up,
.u-animated--slider-slide-left-off-screen-mq-625-up {
    animation-duration: 0.5s;
    animation-fill-mode: both;
    animation-timing-function: ease-in-out;
}

/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .u-animated--slider-slide-right-off-screen-mq-625-up,
    .u-animated--slider-slide-left-on-screen-mq-625-up,
    .u-animated--slider-slide-right-on-screen-mq-625-up,
    .u-animated--slider-slide-left-off-screen-mq-625-up {
        /* Slow down */
        animation-duration: 0.9s;
    }
}




/* GROUP ATOMS / SKIP LINKS
=================================================== */
/* a*/
.c-skip-to-content {
    /* Screen Reader Text */
    clip: rect(1px, 1px, 1px, 1px);

    position: absolute!important;
    overflow: hidden;
    width: 1px;
    height: 1px;
    /* -- */
    outline: none;
    font-size: var(--font-size-s-0);
    background: var(--colour-black-off);
    color: white;
    /* Looks better on Skip to Content */
    text-underline-position: auto;
}

/* a*/
.c-skip-to-content:focus {
    /* Screen Reader Focus State */
    clip: auto!important;

    z-index: 100000; /* Above any toolbars. */
    display: block;
    top: 0;
    left: 0;
    width: auto;
    height: auto;
    /* -- */
    padding: var(--spacing-m) var(--spacing-m);
    text-decoration-color: rgba(0,0,0,0.2);
}




/* GROUP ATOMS / 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;
}
/* GROUP ATOMS / SVG ICONS / ICOMOON
=================================================== */
/* Organisms > Nav */
.c-jg-icon {
    display: inline-block;
    display: flex;
    justify-content: center;
    align-items: center;
}




/* GROUP ATOMS / 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,
/* Organisms > Nav */
button,
/* Notes...

    - You should consider increasing specificity depending on the environment e.g. add .site-container to
    the selector for WordPress so rules do not affect wp-admin bar

*/
/* Override form background default */
/* e.g. Organisms > Comments */
[type="submit"] {
    display: inline-block;
    /* I've found it more stable to use pxls rather than ems. */
    padding: 18px 35px;
    font-weight: var(--font-family-main-weight-strong);
    text-transform: uppercase;
    font-size: var(--font-size-s-0-0-rem);
    letter-spacing: var(--letter-spacing-l);
    /* margin-right: 1rem; Don't do this because if the button is centered it will not be centered correctly */
    text-decoration: none;
    /* =JFG. Hover states with a slight delay, but focus without any because keyboard users want quick feedback */
    transition: background-color 0.25s 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;
    /* Organisms > Forms > Layout */
    margin-bottom: 1.25rem;
}

.c-btn a {
    /* e.g. icons in buttons */
    /* START CENTER VERTICALLY - METHOD 1
    --------------------------------------- */
    display: flex;
    align-items: center;
    /* END CENTER VERTICALLY - METHOD 1
    ------------------------------------- */
}

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

/* Organisms > Nav */
button {
    /* =JFG. Cancel default button appearance */
    background: none;
}
/* GROUP ATOMS / BUTTONS / TYPES
=================================================== */
/* 1 */
.c-btn--1 a,
button.c-btn--1 {
    background: var(--colour-grey-light-4);
    color: var(--colour-black-off);
}

/* 2 */
.c-btn--2 a {
    /* e.g. >> /news */
    background: white;
    color: black;
}

/* e.g. Plus (.c-btn--expand.c-btn--plus) */
/* e.g. >> /projects/volant */
div.c-btn--expand,
/* Plugin > (Non Core) > Photoswipe > Custom CSS */
body .pswp__button--arrow--left,
body .pswp__button--arrow--right,
/* -- */
button.c-btn--expand {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 3.5rem;
    height: 3.5rem;
    padding: 0;
    margin-bottom: 0;
    font-size: 1.1em;
    background: white;
    /* As light as we can go without shifting to grey-light-1 */
    /* color: var(--colour-grey-reading-dark-background); */
    color: var(--colour-black-off);
    box-shadow: var(--box-shadow-s-light);
    cursor: pointer;
}

.c-btn--expand-more-obvious,
button.c-btn--expand-more-obvious {
    box-shadow: var(--box-shadow-s-medium);
}

/* Hover states */
.c-btn--arrow-down-on-hover svg,
.c-btn--arrow-right-on-hover svg {
    /* 'Quadratic in' */
    transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
}
.c-btn--arrow-down-on-hover:hover svg {
    transform: rotate(135deg);
    margin-top: 0.4em;
    margin-right: 0.05em;
}
.c-btn--arrow-down-on-hover:hover svg #backwards {
    animation-name: fade-out;
    animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    animation-fill-mode: both;
}
/* --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    .c-btn--arrow-right-on-hover-mq-625-up:hover svg {
        transform: rotate(-135deg);
        /* Nudge over to compensate for half the SVG disappearing */
        margin-left: 0.3em;
    }
    .c-btn--arrow-right-on-hover-mq-625-up:hover svg #forwards {
        animation-name: fade-out;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-fill-mode: both;
    }
}




/* Atoms > Buttons > Types > Floating */
.c-btn--floating a,
body .c-btn--floating a:hover {
    background: white;
    box-shadow: var(--box-shadow-s-light);
}

body .c-btn--floating a:hover {
    color: black;
}

/* e.g. expand button one the gallery on e.g. >> /projects/volant */
.o-btn--faux {
    pointer-events: none;
}

.c-hero-buttons button {
    /* Helps to vertically center button e.g. >> home > Works */
    display: inline-block;
}
/* 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 */
    font-size: 0.6em;
    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: 10px;
}

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

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

/* Atoms > Buttons > Types > Text */
.c-btn-text {
    /* e.g. >> Home > 'Read More' on latest News story */
    letter-spacing: var(--letter-spacing-m);
    font-size: var(--font-size-s-0-0);
    text-transform: uppercase;
    font-weight: var(--font-family-main-weight-strong);
    opacity: var(--opacity-lighten);
    border-bottom: 1px solid var(--colour-grey-light-4);
}
/* GROUP ATOMS / BUTTONS / TYPES / FLOATING / (CROSS POLLINATED)
=================================================== */
/* Notes...
    
    e.g. used on the blog

*/
/* --mq-floating-buttons-after */
@media (min-width: 768px) {
    .c-btn--floating {
        position: fixed;
        /* Based on magazine cover on single post */
        top: calc(50vh - 4em);
    }
}

body .c-btn--floating a {
    /* Aim for around the same as .c-btn--expand */
    padding: 23px 23px;
}

body .c-btn--floating a svg {
    font-size: 1.1rem;
}

.c-btn--floating a > svg:first-child:not(:last-child),
.c-btn--floating a > svg:last-child:not(:first-child) {
    /* Cancel default */
    margin-right: 0;
    margin-left: 0;
}

/* Tweaks */
.c-btn--floating .c-btn__left:not(:hover) svg {
    right: 3px;
}
.c-btn--floating .c-btn__right:not(:hover) svg {
    left: 3px;
}

.c-btn--floating span {
    /* Hide text */
    /* START SCREEN READER TEXT
    --------------------------- */
    clip: rect(1px, 1px, 1px, 1px);

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

.c-btn--floating--left {
    left: 0;
}

.c-btn--floating--right {
    right: 0;
}
/* GROUP ATOMS / BUTTONS / SIZES
=================================================== */
/* Small */
/* Used for cookie control */
button.c-btn--s,
.c-btn--s a {
    padding: 0.8rem var(--spacing-m);
}

p + a {
    display: inline-block;
    /* e.g. >> home > News 'read more' */
    margin-top: var(--spacing-m);
}

.c-btn a svg {
    /* e.g. >> home > news > 'read more'. 'a' selector to not affect 'plus buttons' */
    /* e.g. >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
    font-size: 0.9rem;
}
/* GROUP ATOMS / BUTTONS / ACCESSIBILITY / FOCUS
=================================================== */
/* Notes...

    Default focus state handled by Atoms > Decoration > Text > Link Styles > Accessibility > Focus.
    If you would like to override this then create a group called Atoms > Buttons > Accessibility > Focus.

    For buttons I've found that something like text-decoration: underline; is most useful.
    e.g. 
    
    .c-btn:focus,
    .c-btn a:focus {
        outline: none;
        text-decoration: underline;
        text-underline-position: under;
        text-decoration-color: red;
    }

*/

.c-btn:focus,
.c-btn a:focus,
.pswp__button:focus {
    outline: none;
    /* e.g. >> /contact */
    box-shadow: var(--box-shadow-focus);
}

.c-btn--1 a:focus {
    box-shadow: var(--box-shadow-focus);
}

.c-btn span {
    border-top: 2px solid transparent;
    border-bottom: 2px solid transparent;
}
/* GROUP ATOMS / 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--1 a:hover {
    background: var(--colour-grey-light-3);
}

/* 2 */
.c-btn--2 a:hover {
    background: var(--colour-grey-light-4);
}

/* Expand buttons */
/* button*/
/* .c-btn--expand:hover {
    box-shadow: var(--box-shadow-s-light-hover-state);
} */

/* button*/
.c-btn--expand:hover svg {
    /* Increase */
    /* font-size: 1.2em; */
    color: var(--colour-black-off);
}

/* button*/
.c-btn--expand svg {
    /* Prevent 'flicker' when you hover off and on expand button e.g. e.g. >> /about > Team '<' button to go back to executives */
    scale: 1;
}
/* GROUP ATOMS / BUTTONS / ANIMATIONS / PLUS
=================================================== */
.c-btn--plus svg {
    /* 'Quadratic in' */
    transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
}
/* GROUP ATOMS / BUTTONS / ANIMATIONS / BACK
=================================================== */
/* e.g. --mq-after-portrait-breakpoint-1 */
@media (min-width: 625px) {
    /* Notes...

        Used on the About page > Team section

    */
    .c-btn--back-mq-625-up svg {
        /* 'Quadratic in' */
        transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
    }

    .c-btn--back-mq-625-up[aria-expanded="true"] svg {
        transform: rotate(45deg);
        color: var(--colour-black-off);
        /* Nudge over to compensate for half the SVG disappearing */
        margin-right: 0.3em;
        /* Cancel any other margin */
        margin-left: 0;
    }

    .c-btn--back-mq-625-up[aria-expanded="true"] /* svg*/#forwards {
        animation-name: fade-out;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-duration: 0.2s;
        animation-fill-mode: both;
    }
}
/* GROUP ATOMS / BUTTONS / ANIMATIONS / COLLAPSE UP
=================================================== */
/* e.g. --mq-before-portrait-breakpoint-1 */
@media (max-width: 624px) {
    .c-btn--collapse-up-mq-625-down svg {
        /* 'Quadratic in' */
        transition: all 0.2s cubic-bezier(0.55, 0.09, 0.68, 0.53) 0s;
    }

    .c-btn--collapse-up-mq-625-down[aria-expanded="true"] svg {
        transform: rotate(135deg);
        color: var(--colour-black-off);
    }

    .c-btn--collapse-up-mq-625-down[aria-expanded="true"] /* svg*/#forwards {
        animation-name: fade-out;
        animation-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94);
        animation-duration: 0.2s;
        animation-fill-mode: both;
    }
}




/* GROUP ATOMS / HERO BUTTONS / (CROSS POLLINATED)
=================================================== */
/* Notes...

    - Used to separate buttons in a blocked space

*/

/* HTML Example...

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

*/
.c-hero-buttons {
    padding: var(--spacing-m);
    /* e.g. 'Visit Article' button >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    text-align: center;
}

/* .c-hero-buttons * { */
    /* e.g. >> /contact > buttons */
    /* margin-bottom: 0;
} */

.c-hero-buttons a > svg:last-child:not(:first-child) {
    /* Decrease */
    margin-left: var(--spacing-s-1);
}

/* e.g. >> /contact */
.c-hero-buttons--left {
    max-width: var(--max-width-2);
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
    text-align: left;
    justify-content: start;
    padding-left: var(--spacing-l-3-horizontal);
}

.c-hero-buttons--left .c-btn a {
    /* e.g. >> /contact */
    padding-left: 28px;
    padding-right: 28px;
}

.c-hero-buttons--compressed {
    /* e.g. 'Visit Article' button >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    padding-bottom: var(--spacing-s);
    /* Decrease */
    /* e.g. >> /news/future-sport-acumen-celebrates-double-success-for-wearable-tech-at-london-design-awards-2016 */
    padding-top: var(--spacing-s);
}

/* Exceptions */
/* Stop various modules from interferring with vertical rhythm of hero section */
/* Atoms > Hero Buttons */
.c-hero-block .c-hero-buttons:last-child {
    padding-bottom: 0;
}




/* GROUP ATOMS / HERO TITLE
=================================================== */
/* Notes...

    - Used to introduce a section in the middle of a page

*/
body .c-hero-title {
    /* e.g. >> Home > Work */
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
    text-align: center;
}

/* Exception e.g. >> /projects/etihad */
h1.c-hero-title {
    font-size: var(--font-size-l-1);
    line-height: var(--font-size-l-1-line-height);
}




/* GROUP ATOMS / (NON CORE) / SCROLL UP REVEAL { / STICKY} / LAYOUT
=================================================== */
.o-scroll-up-reveal {
    position: fixed;
    z-index: 1;
    top: 0;
    width: 100%;
}

.o-scroll-up-reveal--hidden {
    transform: translateY(-100%);
    /* Hide so we can't see it at the top of the browser */
    box-shadow: none!important;
}
/* GROUP ATOMS / (NON CORE) / SCROLL UP REVEAL { / STICKY} / DECORATION
=================================================== */
.o-scroll-up-reveal {
    background: white;
    transition-duration: 0.35s;
    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    transition-property: transform;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / FULL WIDTH IMAGE
=================================================== */
/* Notes...

    - 'borders' implying padding left and right
    - Used on the /about > Team page

*/

/* Modifiers...

    .o-full-width-image-with-borders--compressed <- padding-bottom of 0, as per /about team image

*/
.o-full-width-image-with-borders {
    max-width: var(--max-width-1);
    /* e.g. >> /projects/ana */
    padding-bottom: var(--spacing-l-3);
    /* -- */
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
}

.o-full-width-image-with-borders img {
    /* Needed for when loading="lazy" has width and height attributes e.g. e.g. >> /about */
    width: 100%;
    /* -- */
}

/* --mq-before-root-variable-adjustments-2 */
@media (max-width: 729px) {
    .o-full-width-image-with-borders {
        /* Tweak e.g. >> /projects/adient */
        /* Decrease */
        padding-bottom: var(--spacing-l);
    }
}

.o-full-width-image-with-borders + .o-pull-image,
.o-full-width-image-with-borders + .c-hero-image {
    /* e.g. >> /projects/adient */
    /* Margin rather than padding so we don't expose grey background colour underneath e.g. hero image 2 in the footer of case studies */
    margin-top: var(--spacing-l);
}
/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / FULL WIDTH IMAGE / (MODIFIERS)
=================================================== */
.o-full-width-image-with-borders--compressed {
    /* Last full-width image on a single project page. Rarely seen because a second hero image is used instead */
    padding-bottom: 0;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / DARK PANEL
=================================================== */
/* Notes...

    - A trick used to control nav icon z-index on mobile
    - Dark panels expose the reverse/light nav icon

*/
/* HTML Example...

    .any-old-class.o-dark-panel

*/
/* Modifiers...

*/
/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / DARK PANEL / LAYOUT
=================================================== */
.o-dark-panel {
    position: relative;
    /* Pull above regular nav icon */
    z-index: 1;
}

.o-dark-panel-above {
    position: relative;
    z-index: 2!important;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / CENTERED TEXT
=================================================== */
/* Notes...

    e.g. 'Our team' section

*/
/* HTML Example...

    .o-centered-text

*/
/* Modifiers...

*/
/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / CENTERED TEXT / RHYTHM
=================================================== */
.o-centered-text {
    /* e.g. >> /about */
    padding-bottom: var(--spacing-l-2);
}

/* Custom */
@media (max-width: 729px) {
    .o-centered-text {
        /* e.g. >> home */
        padding-left: var(--spacing-l);
        padding-right: var(--spacing-l);
    }
}

.o-centered-text > p:last-child {
    /* Cancel */
    padding-bottom: 0;
}
/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / CENTERED TEXT / DECORATION
=================================================== */
.o-centered-text {
    max-width: var(--max-width-reading);
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
}
/* Based on iPhone SE > /About */
@media (min-width: 375px) {
    .o-centered-text {
        text-align: center;
    }
}

.o-centered-text p,
p.o-centered-text {
    font-size: var(--font-size-s);
    max-width: var(--max-width-reading-longform);
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / VIDEO
=================================================== */
/* Modifiers...

    - .o-video--portrait <- when screenshot is detected as portrait, via the `image-orientation-detection` Perch filter

*/
/* e.g. >> /projects */
.o-video {
    max-width: var(--max-width-1);
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
    padding-bottom: var(--spacing-l-3);
    padding-inline-start: var(--spacing-l-3-horizontal);
    padding-inline-end: var(--spacing-l-3-horizontal);
}

.o-video video {
    border: 1px solid transparent;
}

.o-video video:focus {
    outline: none;
    border: var(--border-grey-s);
}
/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / VIDEO / (MODIFIERS)
=================================================== */
.c-hero-image .o-video {
    /* e.g. >> /projects/adient */
    max-width: none;
    padding-bottom: 0;
}

.o-video--portrait {
    /* Custom */
    max-width: 35rem;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / BRAND SEPARATOR
=================================================== */
/* Notes...

    - Square dot used in logo

*/
.c-brand-separator {
    position: relative;
    /* padding-right: var(--spacing-s-0-0); */
    /* Check this on mobile before changing */
    font-size: 0.35em;
    /* Same as SVG logo */
    color: #818282;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / DO NOT MANIPULATE IMAGE
=================================================== */
/* Notes...

    - e.g. used on 'old feature image' hero image on blog to prevent `width: 100%;`

*/
/* img*/
.o-do-not-manipulate-image {
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    width: initial!important;
}

/* Custom */
@media (min-width: 768px) {
    /* Keep it sharp because we don't know the dimensions */
    /* img*/
    .o-restrict-image {
        /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
        max-width: 50%;
    }
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / MAGAZINE / SINGLE
=================================================== */
.o-magazine-single {
    box-shadow: var(--box-shadow-s-light);
    margin-top: var(--spacing-l-1);
    margin-bottom: var(--spacing-l-1);
    width: 75%!important;
    max-width: 17em;
}




/* GROUP ATOMS / (NOT PART OF FRAMEWORK) / SMOOTH SCROLL RHYTHM ADJUSTMENTS
=================================================== */
/* Notes...
    
    - This rhythm is custom, based around smooth scroll positioning i.e. we need to use padding-top rather than padding-bottom

*/

/* HTML Example...

    .o-smooth-scroll-target-before <- The container before, which needs padding-bottom: 0;
    .o-smooth-scroll-target <- this is where the hashtag is that smoothscroll targets, which needs padding-top

*/

/* e.g. .c-hero-section*/
.o-smooth-scroll-target {
    padding-top: var(--spacing-l-4);
}

/* e.g. body .c-hero-section*/
body .o-smooth-scroll-target-before {
    padding-bottom: 0;
}





/* GROUP OBJECTS / PICTURE WITH BUTTON
=================================================== */
/* Notes...

	- Used to absolutely position a play button in an image e.g. /homepage video cover

*/
/* HTML Example...

    <div class="o-picture-with-button">
        <picture>
        </picture>
        <button />
    </div>

*/
.o-picture-with-button {
    position: relative;
}





/* GROUP MOLECULES / (NON CORE) / IMAGE / LAZY LOAD / {/ LOZAD}
=================================================== */
.js .js__lozad {
    display: block;
    min-height: 1rem;
}

div:not([data-aos]) .js__lozad--loaded {
    animation-name: fade-in;
    animation-duration: 2s;
}




/* GROUP MOLECULES / PAGINATION / PERCH
=================================================== */
body .c-btn--pagination:last-child a {
    margin-right: 0;
}




/* GROUP PLUGINS / ANIMATE ON SCROLL { / ANIMATE ON LOAD} { / AOS}
=================================================== */
/* Tips...

    - You can make use of perch index to stagger animations, which I did on the Big Fish Little Fish Portfolio e.g.

    ```
    <figure data-aos-once="true" data-aos="fade" data-aos-anchor-placement="top-bottom"<perch:if id="perch_item_index" match="lt" value="5"> data-aos-delay="<perch:content id="perch_item_zero_index" type="hidden">00"</perch:if>>
    ```

    - You can make animations fire when elements reach the top of the screen (rather than the middle, which is default, by using `data-aos-anchor-placement="top-bottom"`).

*/

/* HTML Example...

    <div class="item" data-aos="fade-up">1</div>
    <div class="item" data-aos="fade-down">2</div>
    <div class="item" data-aos="fade-right">3</div>
    <div class="item" data-aos="fade-left">4</div>

    <div class="item" data-aos="fade-up-right"></div>
    <div class="item" data-aos="fade-up-left"></div>
    <div class="item" data-aos="fade-down-right"></div>
    <div class="item" data-aos="fade-down-left"></div>

    <div class="item" data-aos="zoom-in">5</div>
    <div class="item" data-aos="zoom-out">6</div>

    <div class="item" data-aos="zoom-in-up"></div>
    <div class="item" data-aos="zoom-in-down"></div>
    <div class="item" data-aos="zoom-in-left"></div>
    <div class="item" data-aos="zoom-in-right"></div>
    <div class="item" data-aos="zoom-out-up"></div>
    <div class="item" data-aos="zoom-out-down"></div>
    <div class="item" data-aos="zoom-out-left"></div>
    <div class="item" data-aos="zoom-out-right"></div>

    <div class="item" data-aos="slide-up">7</div>

    <div class="item" data-aos="flip-up">8</div>
    <div class="item" data-aos="flip-down">9</div>

    <div class="item" data-aos="flip-left"></div>
    <div class="item" data-aos="flip-right"></div>
    
    - NB `aos-once` here means to only animate once
    - Full list of animations here:
        https://github.com/michalsnik/aos#-animations

    <div class="item" data-aos="flip-right" data-aos-delay="500" aos-duration="500" data-aos-offset="500" data-aos-easing="ease-out-cubic" aos-once="true">10</div>
    <div class="item" data-aos="flip-left">11</div>

*/
/* Notes...

    - Inline the CSS here https://cdn.rawgit.com/michalsnik/aos/2.1.1/dist/aos.css
    - so that we can wrap it in a supports rule
    - This supports rule is a bit of a cheat. We should really be checking for 'mutationobserver', which IE11 does not support
    - I'm guessing that browsers that support CSS grid should also support mutationobserver
    - Ideally [this should be a custom build](https://github.com/michalsnik/aos/issues/439) but it's too time-consuming/complex for me to unravel

*/

@supports (display: grid) {
    /* https://unpkg.com/aos@2.3.1/dist/aos.css */

    /*  Notes...

        [1] Comment out unneeded CSS
        [2] Be very careful about including everything that you have around the site, otherwise AOS will break; delays won't work, etc.
        [3] Temporarily shove this in the head if you need to test out animations:
        <link rel="stylesheet" href="https://unpkg.com/aos@next/dist/aos.css" />

        - Remember to always leave a duration 1200, since that's what we set to initialize in the script
        - Remember to always leave 'ease', since that's what we set to initialize in the script
        - Remember to look in dynamic content e.g. I use perch to generate delays sometimes, based on the index of the item

        Used AOS:

        duration:
        2000
        3000

        delay:
        100
        200
        300
        400
        500
        1000

     */

    /* GROUP PLUGINS / AOS / DURATIONS AND DELAYS
    =================================================== */
    /* 200 */
    [data-aos][data-aos][data-aos-duration="200"],
    body[data-aos-duration="200"] [data-aos] {
        transition-duration: .2s;
    }

    [data-aos][data-aos][data-aos-delay="200"],
    body[data-aos-delay="200"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="200"].aos-animate,
    body[data-aos-delay="200"] [data-aos].aos-animate {
        transition-delay: .2s;
    }

    /* 300 */
    [data-aos][data-aos][data-aos-duration="300"],
    body[data-aos-duration="300"] [data-aos] {
        transition-duration: .3s;
    }

    [data-aos][data-aos][data-aos-delay="300"],
    body[data-aos-delay="300"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="300"].aos-animate,
    body[data-aos-delay="300"] [data-aos].aos-animate {
        transition-delay: .3s;
    }

    /* 400 */
    [data-aos][data-aos][data-aos-duration="400"],
    body[data-aos-duration="400"] [data-aos] {
        transition-duration: .4s;
    }

    [data-aos][data-aos][data-aos-delay="400"],
    body[data-aos-delay="400"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="400"].aos-animate,
    body[data-aos-delay="400"] [data-aos].aos-animate {
        transition-delay: .4s;
    }

    /* 500 */
    [data-aos][data-aos][data-aos-duration="500"],
    body[data-aos-duration="500"] [data-aos] {
        transition-duration: .5s;
    }

    [data-aos][data-aos][data-aos-delay="500"],
    body[data-aos-delay="500"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="500"].aos-animate,
    body[data-aos-delay="500"] [data-aos].aos-animate {
        transition-delay: .5s;
    }

    /* 1000 */
    [data-aos][data-aos][data-aos-duration="1000"],
    body[data-aos-duration="1000"] [data-aos] {
        transition-duration: 1s;
    }

    [data-aos][data-aos][data-aos-delay="1000"],
    body[data-aos-delay="1000"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="1000"].aos-animate,
    body[data-aos-delay="1000"] [data-aos].aos-animate {
        transition-delay: 1s;
    }

    /* 1200 */
    [data-aos][data-aos][data-aos-duration="1200"],
    body[data-aos-duration="1200"] [data-aos] {
        transition-duration: 1.2s;
    }

    [data-aos][data-aos][data-aos-delay="1200"],
    body[data-aos-delay="1200"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="1200"].aos-animate,
    body[data-aos-delay="1200"] [data-aos].aos-animate {
        transition-delay: 1.2s;
    }

    /* 2000 */
    [data-aos][data-aos][data-aos-duration="2000"],
    body[data-aos-duration="2000"] [data-aos] {
        transition-duration: 2s;
    }

    [data-aos][data-aos][data-aos-delay="2000"],
    body[data-aos-delay="2000"] [data-aos] {
        transition-delay: 0;
    }

    [data-aos][data-aos][data-aos-delay="2000"].aos-animate,
    body[data-aos-delay="2000"] [data-aos].aos-animate {
        transition-delay: 2s;
    }

    /* 3000 */
    [data-aos][data-aos][data-aos-duration="3000"],
    body[data-aos-duration="3000"] [data-aos] {
        transition-duration: 3s;
    }

    /* GROUP PLUGINS / AOS / EASING
    =================================================== */
    /* Ease */
    [data-aos][data-aos][data-aos-easing=ease],
    body[data-aos-easing=ease] [data-aos] {
        transition-timing-function: ease;
    }

    /* GROUP PLUGINS / AOS / TRANSITION NAMES / FADE
    =================================================== */
    /* Fade / General */
    [data-aos^=fade][data-aos^=fade] {
        opacity: 0;
        transition-property: opacity,transform;
    }

    [data-aos^=fade][data-aos^=fade].aos-animate {
        opacity: 1;
        /* Stopped this because it prevents mobile nav showing above non dark panels e.g. home > Pioneering and Entrepreneurial slide.
        Instead I applied it individually e.g. About > fade up animations */
        /* transform: translateZ(0); */
    }

    /* Fade up */
    [data-aos=fade-up] {
        transform: translate3d(0,100px,0);
    }

    [data-aos=fade-up].aos-animate {
        /* Added individually e.g. About > fade up animations */
        transform: translateZ(0);
    }

    /* Fade left */
    [data-aos=fade-left] {
        transform: translate3d(100px,0,0);
    }
}

/* =JFG. Overrides for no js */
.no-js [data-aos^=fade][data-aos^=fade] {
    opacity: 1;
    transform: none;
}




/* GROUP MOLECULES / (NON CORE) / VIDEO
=================================================== */
.c-video {
    text-align: center;
}

.c-video video {
    max-width: 65rem;
}

.c-video--dark {
    background: var(--colour-black-eigengrau);
}

.c-video--full {
    max-width: none;
    padding-bottom: var(--spacing-l-2);
    /* e.g. >> / */
    background: white;
    border-left: var(--spacing-l-3) solid transparent;
    border-right: var(--spacing-l-3) solid transparent;
}



/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION TITLE
=================================================== */
/* Notes...

    - Used on the homepage

*/
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION TITLE / LAYOUT
=================================================== */
.c-section-title {
    /* e.g. 'Our Work' on homepage */
    max-width: var(--max-width-2);
    /* START CENTER HORIZONTAL - METHOD 2
    ------------------------------------------------ */
    margin-left: auto;
    margin-right: auto;
    /* END CENTER HORIZONTAL - METHOD 2
    ---------------------------------------------- */
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION TITLE / RHYTHM
=================================================== */
.c-section-title {
    padding-bottom: var(--spacing-m-2);
    padding-top: 0;
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
}

.c-video + .c-section-title {
    /* e.g. >> / */
    padding-top: 0;
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION TITLE / DECORATION
=================================================== */
.c-section-title--centered {
    text-align: center;
}




/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SUB TITLE
=================================================== */
/* Notes...

    - e.g. Home > News
    - Similar decoration to .c-hero-block__strapline but for longer, smaller headings

*/
.c-sub-title {
    padding-bottom: var(--spacing-s-2);
    font-weight: var(--font-family-main-weight-normal);
    color: var(--colour-grey-reading-18pt);
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}




/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO SECTION
=================================================== */
/* Notes...

    - Used on the homepage
    - Used to set padding. If you have a flush image with no padding requirements then you do not need to use this

*/
.c-hero-section {
    padding-bottom: var(--spacing-l-4);
}

.c-hero-section .plyr {
    margin-block-end: var(--spacing-l-4);
}

.c-hero-section .c-hero-image:last-child,
.c-hero-section .c-hero-image:has( + .js__playShowreel__reveal:last-child) {
    /* e.g. gap between 'Experience' slide and 'Our Work'
    Not _just_ .c-hero-image:last-child because this affects Project single page with a video like /projects/ANA */
    margin-bottom: 0;
}

.c-hero-section:last-child {
    /* e.g. >> Home > News */
    padding-bottom: var(--spacing-l-3);
}

/* Stop various modules from interferring with vertical rhythm of hero section */
/* Atoms > Hero Buttons */
.c-hero-section:not(:last-child) .c-hero-buttons:last-child {
    padding-bottom: 0;
}




/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO IMAGE
=================================================== */
/* Notes...

    - Large slides with some text floated to the side followed by a hero image (pseudo background)
    - Seen on the homepage

*/

/* HTML Example...

    .c-hero-image.c-hero-image--dark.c-hero-image--reverse
        img
        .c-hero-image__text
            h2.c-hero-image__title
            p
        button.c-hero-image__play-button <-- used when unveiling a video with Plry e.g. homepage

*/

/* Notes...

    .c-hero-image--only - no text present e.g. blog feature image, where we might want a different gradient
    .c-hero-image--dark
    .c-hero-image--reverse
    .c-hero-image--flush-bottom <-- e.g. Project page in footer. We still want to use .c-hero-image to make the image 100% for loading="lazy"

*/
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO IMAGE / LAYOUT
=================================================== */
/* Notes...

    - Used on the homepage

*/
.c-hero-image {
    text-align: right;
    /* Needed for when image is nudged over. Search for 'nudge_value' in Perch template file */
    overflow: hidden;
}

.c-hero-image picture {
    display: block;
}

.c-hero-image img {
    position: relative;
    width: 100%;
}

.c-hero-image__text__inner {
    text-align: left;
    
    max-width: var(--max-width-hero-text);
}

/* button*/
.c-hero-image__play-button {
    position: absolute;
    top: 50%;
    left: 56%;
    transform: translate(-50%, -50%);
    z-index: 21;
}

/* --mq-before-hero-image-absolute-text */
@media (max-width: 979px) {
    .c-hero-image__play-button {
        left: 50%;
    }
    .c-hero-image__text__inner,
    .c-hero-image__title {
        text-align: center;
        max-width: 45rem;
        margin-left: auto;
        margin-right: auto;
    }

    .c-hero-image__title {
        /* e.g. Force 'Inventive & Collaborative' to be on two lines on iPad portrait */
        max-width: 33rem;
    }
}

/* --mq-after-hero-image-absolute-text */
@media (min-width: 980px) {
    .c-hero-image {
        /* Not before 1024 because otherwise it stops the nav inverse working on .o-dark-panel */
        position: relative;
    }

    /* Don't affect Home > News preview */
    .c-hero-image__text {
        position: absolute;
        /* So that text is selectable */
        z-index: 1;
        top: 0;
        width: 100%;
        height: 100%;
    }

    .c-hero-image--text-mask .c-hero-image__text::before {
        content: '';
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at top left, black 10%,transparent 40%);
    }
    .c-hero-image--reverse .c-hero-image__text::before {
        /* Change the gradient values just because of the particular BA image used at the moment */
        background: radial-gradient(circle at top right, black 10%,transparent 60%);
    }

    .c-hero-image__text__inner {
        position: relative;
        /* Above dark-panel */
        z-index: 1;
        top: var(--spacing-l-4);
    }

    .c-hero-image__text__inner p {
        max-width: 29rem;
    }
    .c-hero-image--text-mask .c-hero-image__text p {
        color: white;
    }

    .c-hero-image--reverse .c-hero-image__text__inner p {
        margin-left: auto;
    }

    .c-hero-image__title {
        max-width: 33rem;
    }
}

/* Max width on hero images would be ideal */
/* .c-hero-image picture {
    position: relative;
    right: calc((100% - var(--max-width-2)) / 2);
}
.c-hero-image--reverse picture {
    left: calc((100% - var(--max-width-2)) / 2);
} */
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO IMAGE / RHYTHM
=================================================== */
.c-hero-image,
/* e.g. when video has loaded >> /projects/ana, and /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan, but not on a main body image e.g. /projects Geko */
.s-entry-header .js__video-lazy-load {
    /* Needs to be margin */
    margin-bottom: var(--spacing-l-4);
}

.c-hero-image--flush-bottom {
    /* e.g. >> /projects/ora > footer image */
    padding-bottom: 0;
    margin-bottom: 0;
}

.c-hero-image__text__inner {
    padding: 0 var(--spacing-l-3-horizontal) var(--spacing-l-3);
}

.c-hero-image__button {
    text-transform: uppercase;
}
.c-hero-image__button a {
    letter-spacing: var(--letter-spacing-s);
    text-decoration: none;
    font-weight: var(--font-family-main-weight-strong);
}

.c-hero-image__text h1 {
    /* Cancel default */
    padding-top: 0;
}

/* button*/
.c-hero-image__play-button {
    margin-inline-end: 0;
    padding: 0;
}

/* --mq-before-hero-image-absolute-text */
@media (max-width: 979px) {
    .c-hero-image picture,
    /* For when the latest post is a video instead of an image */
    .c-hero-image .c-video {
        margin-bottom: var(--spacing-l-2);
    }

    .s-entry-header .c-hero-image picture {
        /* e.g. mobile version of >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
        margin-bottom: 0;
    }

    .c-hero-image__button a {
        font-size: var(--font-size-s);
        line-height: var(--font-size-s-line-height);
        color: var(--colour-black-off);
    }
}

/* --mq-after-hero-image-absolute-text */
@media (min-width: 980px) {
    .c-hero-image__text__inner {
        padding: 0;
        margin-left: var(--spacing-l-3-horizontal);
    }
    .c-hero-image__button a {
        color: white;
        text-decoration: none;
    }
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO IMAGE / DECORATION
=================================================== */
.c-hero-image,
/* Needed for mobile */
.c-hero-image picture {
    background: var(--colour-gradient-grey-subtle-radial);
}

.c-hero-image__text__title {
    padding-top: 0;
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
}

.c-hero-image__text p:not(.c-hero-image__button) {
    line-height: var(--font-size-reading-line-height);
    font-size: var(--font-size-s);
}

.c-hero-image img {
    /* filter: var(--image-boost); */
    /* e.g. >> /about > real team hero image */
    filter: var(--image-boost-less);
}

.c-hero-image--boost-less img {
    filter: var(--image-boost-less);
}

.c-entry-date {
    /* e.g. >> home, news feature section, and also on news page */
    letter-spacing: var(--letter-spacing-s);
}

/* --mq-before-root-variable-adjustments-1 */
@media (max-width: 449px) {
    .c-hero-image .c-entry-date {
        /* Increase */
        padding-bottom: var(--spacing-l-1);
    }
}

/* Hero text */
/* --mq-before-root-variable-adjustments-2 */
@media (max-width: 729px) {
    /* e.g. >> Home > Our Work */
    .c-hero-block__text,
    /* e.g. >> Home > Hero Slides */
    .c-hero-image__text__inner,
    .o-media-preview__text__inner,
    .o-pull-image__content__main {
        font-size: var(--font-size-s-0);
    }
}

/* --mq-before-hero-image-absolute-text */
@media (max-width: 979px) {
    /* For when the latest post is a video instead of an image */
    .c-hero-image .c-video {
        background: none;
    }

    /* Only slides; don't affect news preview on homepage */
    .c-hero-image__title {
        font-size: var(--font-size-l-1);
        line-height: var(--font-size-l-1-line-height);
    }

    .c-hero-image__text__inner p:not(.c-hero-image__button) {
        color: var(--colour-grey-reading-18pt);
        font-size: var(--font-size-s-2);
        line-height: var(--font-size-s-2-line-height);
    }
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / HERO IMAGE / (MODIFIERS)
=================================================== */
.c-hero-image--only {
    /* e.g. for old feature images that do not stretch 100% >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 
    or for magazine covers on my portfolio site */
    text-align: center;
    /* background: var(--colour-gradient-grey-subtle); */
}

.c-hero-image--only iframe {
    /* e.g. >> /news/bbc-news-interview-acumen-ceo-founder-ian-dryburgh */
    margin-block-start: var(--spacing-l-1);
    margin-block-end: var(--spacing-l-1);
    max-width: var(--max-width-1);
}

/* -- */

/* Needed for mobile */
.c-hero-image--dark picture {
    background: var(--colour-gradient-dark-radial);
}

.c-hero-image--dark.c-hero-image--first picture {
    /* Make the first picture darker because it's so close the logo. This improves the contrast in the design */
    background: black;
}

.c-hero-image--dark .c-hero-image__text {
    color: var(--colour-grey-reading-dark-background);
}

/* -- */

.c-hero-image--reverse {
    text-align: left;
}

/* --mq-after-hero-image-absolute-text */
@media (min-width: 980px) {
    .c-hero-image--dark {
        background: var(--colour-gradient-dark);
    }

    .c-hero-image--reverse,
    .c-hero-image--reverse picture {
        background: var(--colour-gradient-grey-subtle-radial-to-right);
    }

    .c-hero-image--dark.c-hero-image--first {
        /* Make the first picture darker because it's so close the logo. This improves the contrast in the design */
        background: black;
    }

    .c-hero-image--dark .c-hero-image__title {
        color: white;
    }

    .c-hero-image--reverse .c-hero-image__text__inner {
        margin-left: auto;
        margin-right: var(--spacing-l-3-horizontal);
        text-align: right;
    }
}






/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION INTRODUCTION
=================================================== */
/* Notes...

    - e.g. 'Our work' on homepage

*/
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION INTRODUCTION / LAYOUT
=================================================== */
/* Custom */
@media (min-width: 1250px) {
    .c-section-introduction {
        display: grid;
        grid-template-columns: 0.5fr 0.5fr;
        grid-column-gap: var(--spacing-s);
    }
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION INTRODUCTION / RHYTHM
=================================================== */
.c-section-introduction {
    padding-bottom: var(--spacing-m);
    padding-left: var(--spacing-l-3-horizontal);
    padding-right: var(--spacing-l-3-horizontal);
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION INTRODUCTION / DECORATION
=================================================== */
.c-section-introduction {
    color: var(--colour-grey-reading);
}

.c-section-introduction p {
    line-height: var(--line-height-client-request);
}

.c-section-introduction p:first-child {
    padding-right: var(--spacing-m);
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / SECTION INTRODUCTION / (MODIFIERS)
=================================================== */
.c-section-introduction--s {
    /* Decrease */
    font-size: 1em;
}




/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / LEAD
=================================================== */
/* Notes...

	- Used for larger text, usually as an intro for sections
	- Should be between 65 and 90 characters, or two lines

*/
/* HTML Example...

    <div class="c-lead">
        From world-class airlines to cruise lines. From start-ups to renowned brands.
   </div>

*/
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / LEAD / LAYOUT
=================================================== */
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / LEAD / RHYTHM
=================================================== */
.c-lead {
    padding-bottom: var(--spacing-l);
}

.c-lead + h3 {
    /* e.g. >> /about */
    padding-top: var(--spacing-s);
}
/* GROUP MOLECULES / (NOT PART OF FRAMEWORK) / LEAD / DECORATION
=================================================== */
.c-lead,
/* Molecules > (Not Part Of Framework) > Hero Block > Decoration */
body .c-hero-block__strapline,
/* Override e.g. >> /projects/geko */
body p.c-hero-block__strapline {
    color: var(--colour-grey-reading-18pt);
    font-size: var(--font-size-m);
    line-height: var(--font-size-m-line-height);
}





/* GROUP MOLECULES / MEDIA ITEM
=================================================== */
/* Notes...

    - Classic Nicole Sullivan media item
    - e.g. Used on history page

*/

/* HTML Example...

    .l-media-item
        .l-media-item__image
        .l-media-item__content

*/
/* GROUP MOLECULES / MEDIA ITEM
=================================================== */
/* --mq-after-media-item-breakpoint-1 */
/* Media item grid does not work well below this width because text is too narrow */
@media (min-width: 500px) {
    .l-media-item {
        display: grid;
        grid-template-columns: auto 1fr;
    }

    .l-media-item__image {
        margin-right: var(--spacing-l);
    }
}




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




/* GROUP ORGANISMS / SITE HEADER
=================================================== */
/* HTML Example...

    .c-site-header
        .c-site-header__top-row
            .c-site-logo
            .c-nav-mobile-button
        nav

*/
/* GROUP ORGANISMS / NAV / MOBILE FIXED { / INTERSECTION OBSERVER}
=================================================== */
/* Hide the fixed nav icon while the header is in view.
We detect whether it's in view using intersection observer in script.js */
.js .js__site-header-intersection-observe--js-added---is-in-view .js__site-header-intersection-observe__fixed-nav-icon {
    display: none;
}
/* GROUP ORGANISMS / NAV / TWEAKS
=================================================== */
body nav {
    font-size: var(--font-size-s-0-0);
}
/* GROUP ORGANISMS / NAV / RHYTHM / VERTICAL
=================================================== */
/* --mq-after-nav-opens */
@media (min-width: 1280px) {
    nav {
        padding-top: var(--spacing-m);
    }
}
/* GROUP ORGANISMS / NAV / CURRENT PAGE
=================================================== */
/* Category #1 */
body .current-menu-item > a span,
body .current-menu-ancestor > a span {
    opacity: 0.5;
    color: var(--colour-grey-reading);
}
/* GROUP ORGANISMS / SITE HEADER / LAYOUT
=================================================== */
.c-site-footer {
    position: relative;
}

.js-added---is-open .c-nav-mobile-button {
    /*
        Pull the nav icon above .o-nav-wrapper
        Only when open otherwise it messes up .o-dark-panel z-indexes
    */
    z-index: 4;
}

.js-added---is-open .js__site-header-intersection-observe__fixed-nav-icon.o-dark-panel-above {
    /* Hide the nav icon used for dark panels so we don't see a kind of 'double vision' effect when the nav-wrapper slides down */
    display: none;
}

.c-nav-mobile-button .c-nav-icon {
    position: fixed;
    top: var(--spacing-s-2);
    right: var(--spacing-s-2);
}

.c-nav-mobile-button .c-jg-icon--menu-dummy {
    /* START CENTER HORIZONTAL - ABSOLUTE - METHOD 2
    ---------------------------------------------------------- */
    position: absolute;
    left: 50%;
    transform: translate(-50%, 0%);
    align-items: center;
    /* END CENTER HORIZONTAL - ABSOLUTE - METHOD 2
    ---------------------------------------------------------- */
}
/* GROUP ORGANISMS / SITE HEADER / RHYTHM
=================================================== */
.c-nav-mobile-button {
    padding-bottom: var(--spacing-s);
    padding-top: var(--spacing-m);
}
/* GROUP ORGANISMS / SITE HEADER / DECORATION
=================================================== */
/* --mq-before-nav-opens */
@media (max-width: 1279px) {
    .c-site-header nav {
        /* Increase */
        font-size: var(--font-size-s);
    }
}




/* GROUP ORGANISMS / SITE LOGO
=================================================== */
/* GROUP ORGANISMS / SITE LOGO / LAYOUT
=================================================== */
.c-site-logo,
.c-site-logo a {
    /* Need to wrap both selectors in flexbox so that link target wraps around logo img rather than 100% */
    display: flex;
    justify-content: center;
}

.c-site-logo img {
    width: 14em;
    /* Needed for Safari */
    height: 100%;
}
/* GROUP ORGANISMS / SITE LOGO / RHYTHM
=================================================== */
.c-site-logo {
    padding-bottom: var(--spacing-l-2);
}

/* --mq-after-nav-button-absolute */
@media (min-width: 500px) {
    .c-site-logo {
        /* Increase */
        /* Custom */
        padding-top: 6em;
    }
}

/* --mq-after-nav-opens */
@media (min-width: 1280px) {
    .c-site-logo {
        /* Decrease */
        padding-top: var(--spacing-l-2);
    }
}




/* GROUP ORGANISMS / ENTRY / ENTRY HEADER
=================================================== */
/* Notes...

    - Based on WordPress Genesis Entry Title but tailored for neutral frameworks
    - Still in progress, need to test/update

*/
.s-entry-header .c-entry-title {
    padding-bottom: var(--spacing-l);
}

/* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
.s-entry-header .c-entry-title--compressed {
    padding-bottom: var(--spacing-m);
}

.s-entry-header .entry-time {
    font-size: var(--font-size-s-0);
}
/* GROUP ORGANISMS / ENTRY / ENTRY TITLE
=================================================== */
.c-entry-title {
    max-width: var(--max-width-title);
    /* e.g. >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
    padding-top: 0;
    padding-bottom: var(--spacing-s-1);
    padding-left: var(--spacing-l);
    padding-right: var(--spacing-l);
    margin-left: auto;
    margin-right: auto;
    clear: both;
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    /* e.g. >> 404.php */
    font-size: var(--font-size-l);
    line-height: var(--font-size-l-line-height);
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 and /history */
    text-align: center;
    color: var(--colour-black-off);
}

.c-portrait-container + .c-entry-title,
/* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
.c-hero-image + .c-entry-title {
    padding-top: 0;
}
/* GROUP ORGANISMS / ENTRY / ENTRY CONTENT
=================================================== */
/* Notes...

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

*/

.s-entry-content {
    max-width: var(--max-width-reading-longform);
    /* e.g. >> /news/united-launch-all-new-polaris-business-class-experience-with-cabin-layout-invented-by-acumen */
    padding-bottom: var(--spacing-l-3);
    /* -- */
    padding-left: var(--spacing-l);
    padding-right: var(--spacing-l);
    margin-left: auto;
    margin-right: auto;
    color: var(--colour-grey-reading);
}

/* when there are single columns and double columns in the same article e.g. >> /news/hat-trick-success-for-acumen-design-associates-at-the-good-design-awards-2015 */
.s-blocks-exist .s-entry-content {
    max-width: var(--max-width-title);
}

/* e.g. >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
.s-entry-content h2 {
    padding-bottom: var(--spacing-l);
}

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

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

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

.s-entry-content > *:lastlast-child {
    /* e.g. cancel the last p tag from adding to the vertical rhythm */
    padding-bottom: 0;
}

/*.s-entry-content--hero,*/
.s-entry-content--intro {
    /* e.g. Gallery page intro 
        Do not apply to all .s-entry-content because it has undesirable consequences like making iframes disappear
    */
    /* Horizontal text */
    text-align: center;
    font-family: var(--font-family-main);
}

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

/* --mq-floating-buttons-before */
@media (max-width: 767px) {
    .s-single .s-entry-content:last-child {
        /* e.g. >> /news/ana-the-room-shortlisted-for-the-international-yacht-and-aviation-awards */
        /* Decrease */
        /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017. */
        padding-block-end: var(--spacing-l-2);
    }
}

.s-entry-content--columns {
    max-width: var(--max-width-title);
    column-count: 2;
    column-gap: var(--spacing-l);

    column-width: 14rem;
}

.s-entry-content--columns p {
    font-size: 1em!important;
}

.s-entry-content--column-alignment-for-quotes {
    max-width: var(--max-width-title);
}

.s-entry-content--column-alignment-for-quotes p {
    max-width: var(--max-width-reading-longform);
}

/* e.g. /news/extendable-lavatory-brings-comfort-and-dignity-back-to-passengers */
.s-entry-content--compressed {
    /* Decrease */
    padding-block-end: var(--spacing-m);
}
/* GROUP ORGANISMS / ENTRY / ENTRY CONTENT / DECORATION
=================================================== */
/* e.g. an img output with Perch blocks that is wrapped in a figure element */
/* .s-entry-content figure {
    
} */




/* GROUP ORGANISMS / ENTRY / ENTRY CONTENT / META
=================================================== */
/* Notes...

    - Used in archive views

*/

/* HTML Example...

    <p class="entry-meta">
        <span class="entry-meta__more">
            <a href="">
                Continue reading
            </a>
        </span>
        <span class="entry-meta__comments">
            <a href="">
                5 comments
            </a>
        </span>
    </p>

*/
.c-entry-meta {
    display: flex;
    flex-wrap: wrap;
    max-width: var(--max-width-reading-longform);
    /* e.g. >> Home > News preview */
    padding-bottom: var(--spacing-l-1);
    margin-left: auto;
    margin-right: auto;
    color: var(--colour-grey-reading);
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    font-size: var(--font-size-s-0-0);
    text-transform: uppercase;
}

.c-entry-meta--single {
    /* e.g. >> /news/forbes-rates-firefly-as-one-of-the-best-health-tech-gadgets-of-2017 */
    position: relative;
    /* e.g. Client Production >> /news/east-meets-west-ana-and-acumen-collaborate-to-showcase-a-true-inspiration-of-japan */
    justify-content: flex-start;
    padding-bottom: var(--spacing-l-2);
    padding-left: var(--spacing-l);
    padding-right: var(--spacing-l);
    padding-top: var(--spacing-s);
}

/* e.g. >> /about/john-mckeever */
.c-entry-meta--centered {
    justify-content: center;
}

.s-single .s-entry-header .c-entry-meta::before {
    position: absolute;
    top: 0;
    left: var(--spacing-l);
    width: calc(100% - (var(--spacing-l) * 2));
    content: "";
    border-top: 1px solid var(--colour-grey-reading-18pt);
}



/* GROUP ORGANISMS / ENTRY CONTENT / (NOT PART OF FRAMEWORK) / BLOCKS
=================================================== */
/* Notes...

    Some defaults. Override with selectors if need be

*/
.l-block-image {
    padding-left: 0;
    padding-right: 0;
}

figure {
    /* Lock in figcaption */
    position: relative;
}

figcaption,
/* Plugin > (Non Core) > Photoswipe > Custom CSS */
body .pswp__caption__center {
    /* e.g. >> /news/united-launch-all-new-polaris-business-class-experience-with-cabin-layout-invented-by-acumen */
    /* position: absolute; */
    z-index: 1;
    width: 100%;
    text-align: right;
    padding-block-start: var(--spacing-m);
    /* background: rgba(var(--colour-black-off-rgb),0.8); */
    color: var(--colour-black-off);
    text-transform: uppercase;
    letter-spacing: var(--letter-spacing-l);
}

.c-figcaption-left {
    /* e.g. "Floated Image" block e.g. >> /projects/jetblue-mint */
    text-align: left;
}



/* GROUP ORGANISMS / (NOT PART OF FRAMEWORK) / MAGAZINE LIST
=================================================== */
.c-magazine-list {
    /* Needed to prevent layout widening window when page is first loaded on Android devices e.g. Samsung S9
    The rest of the magazine list CSS is loaded in a separate stylesheet */
    overflow: hidden;
    /* So that box-shadow of + button is not clipped */
    padding-bottom: var(--spacing-s-1);
    /* So that focus state on magazine cover is not clipped */
    padding-top: var(--spacing-s-0-0);
}

.c-magazine-list .c-entry-date {
    text-transform: uppercase;
}


.u-animated-fade-in {
    animation-name: fade-in;
    animation-duration: 2s;
}
/* purgecss end ignore */