@charset "utf-8";

/* ============================================================
   GEO ASSAY MINERALS LABORATORY
   WHITE / BLUE / GOLD COLOUR SCHEME
============================================================ */

html{
    font-family:sans-serif;
    -ms-text-size-adjust:100%;
    -webkit-text-size-adjust:100%;
}

body,div,dl,dt,dd,p,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,blockquote,form{
    margin:0;
    padding:0;
}

article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{
    display:block;
    margin:0;
    padding:0;
}

ul,ol{
    list-style:none;
}

img,a img,svg{
    border:none;
    display:block;
}

a:link,
a:visited{
    background:transparent;
    text-decoration:none;
}

a:active,
a:hover{
    outline:0;
}

a[href^="tel:"]{
    text-decoration:none !important;
    white-space:nowrap;
}

a[x-apple-data-detectors]{
    color:inherit !important;
    text-decoration:none !important;
    font-size:inherit !important;
    font-family:inherit !important;
    font-weight:inherit !important;
    line-height:inherit !important;
}

table{
    border-collapse:collapse;
    border-spacing:0;
}

label,
button{
    cursor:pointer;
}

input,
textarea,
select{
    font-family:inherit;
    font-size:inherit;
    padding:0;
    margin:0;
    vertical-align:middle;
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
}


:root{
    --white:#FFFFFF;
    --blue:#0B3A63;
    --blue-dark:#062A48;
    --blue-light:#EAF3FA;
    --gold:#C9A227;
    --gold-light:#E0C45C;

    --light:#F5F8FB;
    --dark:var(--blue);
    --teal:#DCECF5;
    --red:var(--gold);
    --colour:var(--blue);
}

input,
textarea,
button,
select,
label,
a{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
    tap-highlight-color:transparent;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button{
    -webkit-appearance:none;
    margin:0;
}

input[type=number]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
}

button,
input[type=submit],
input[type=password]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
}

textarea,
input[type=text],
input[type=email],
input[type=tel],
input[type=url],
input[type=search]{
    -webkit-appearance:none;
    -moz-appearance:none;
    appearance:none;
    border-radius:0;
}

input:focus,
input:hover{
    outline-style:none;
    box-shadow:none;
}

button:focus,
button:hover{
    outline-style:none;
    box-shadow:none;
}

summary{
    user-select:none;
}

video::-internal-media-controls-overlay-cast-button{
    display:none;
}


/* ============================================================
   SELECTION
============================================================ */

::-moz-selection{
    background-color:var(--gold);
    color:white;
}

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


/* ============================================================
   ANIMATIONS
============================================================ */

@keyframes fadeIn{
    from{
        opacity:0;
    }

    to{
        opacity:1;
    }
}

.fadein{
    opacity:0;
    animation:fadeIn ease-in 1;
    animation-fill-mode:forwards;
    animation-duration:1s;
}

.hidden{
    opacity:0;
    transform:translate3d(0,20px,0);
}

.inview{
    opacity:1;
    transform:translate3d(0,0,0);
    transition:all 1000ms;
}

.hide{
    opacity:0;
}


/* ============================================================
   ROOT VARIABLES
============================================================ */

:root{

    --aktiv:"aktiv-grotesk",sans-serif;

    /* Primary Geo Assay colours */
    --blue:#0B3D91;
    --blue-dark:#062B5C;
    --blue-light:#EAF2FA;

    --gold:#D4AF37;
    --gold-light:#E7CB67;
    --gold-dark:#B89220;

    --white:#FFFFFF;

    --light:#F5F8FC;
    --grey:#E7ECF2;
    --grey-dark:#6B7785;

    --dark:var(--blue-dark);

    --teal:var(--blue-light);
    --red:var(--gold);

    --colour:var(--blue-dark);

    --padding:20px;
    --padding-double:calc(var(--padding) * 2);
    --content-padding:80px;

    --h1-size:55px;
    --h2-size:36px;
    --h3-size:28px;
    --h4-size:20px;
    --h6-size:13px;
    --font-size:16px;
}


/* ============================================================
   GLOBAL
============================================================ */

html{
    scroll-behavior:smooth;
}

body{
    background-color:var(--blue-dark);
    color:var(--colour);
    font-family:var(--aktiv);
    font-size:var(--font-size);
    line-height:1;
}

.layout{
    background-color:white;
}

.outer{
    align-items:flex-start;
    flex-wrap:wrap;
}

.inner{
    box-sizing:border-box;
    margin:0 auto;
    max-width:1320px;
    width:100%;
}

.flex{
    display:flex;
    flex-wrap:wrap;
}

.half{
    flex:0 0 50%;
    box-sizing:border-box;
}

.third{
    flex:0 0 calc(100%/3);
    box-sizing:border-box;
}

.qtr{
    flex:0 0 25%;
    box-sizing:border-box;
}

.centre{
    text-align:center;
}

.padding{
    padding:0 var(--padding);
}


/* ============================================================
   HEADINGS
============================================================ */

h1{
    font-family:var(--aktiv);
    font-size:var(--h1-size);
    font-weight:700;
    line-height:1.2;
    margin:0 0 0.5em;
}

h2{
    font-family:var(--aktiv);
    font-size:var(--h2-size);
    font-weight:700;
    line-height:1.3;
    margin:0 0 1em;
}

h3{
    font-family:var(--aktiv);
    font-size:var(--h3-size);
    font-weight:500;
    line-height:1.4;
    margin:0 0 0.5em;
}

h4{
    font-family:var(--aktiv);
    font-size:var(--h4-size);
    font-weight:300;
    line-height:1.2;
    margin:0 0 1em;
}

h5{
    font-family:var(--aktiv);
    font-size:var(--font-size);
    font-weight:500;
    line-height:1.2;
    margin:0 0 0.5em;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

h6{
    font-family:var(--aktiv);
    font-size:var(--h6-size);
    font-weight:300;
    line-height:1.2;
    margin:0 0 0.5em;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

p{
    line-height:1.5;
    margin:0 0 1.5em;
}

h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child,
h1:only-child,
h2:only-child,
h3:only-child,
h4:only-child,
h5:only-child,
h6:only-child,
p:only-child{
    margin-bottom:0;
}


/* ============================================================
   LINKS / BUTTONS
============================================================ */

a{
    color:var(--colour);
    transition:all .1s ease-out;
}

button{
    transition:all .1s ease-out;
}

a.button,
button.button,
p.button a{
    background-color:transparent;
    border:1px solid var(--blue);
    border-radius:20px;
    display:inline-flex;
    align-items:center;
    box-sizing:border-box;
    color:var(--blue);
    font-family:var(--aktiv);
    font-size:13px;
    min-height:40px;
    letter-spacing:0.1em;
    line-height:20px;
    margin:0 0.5em 0.5em 0;
    padding:0 1.4em;
    text-transform:uppercase;
    text-decoration:none !important;
}

@media (hover:hover){

    a.button:hover,
    button.button:hover,
    p.button a:hover{
        background-color:var(--blue);
        border-color:var(--blue);
        color:white;
        opacity:1 !important;
    }
}


/* ============================================================
   GOLD BUTTON
============================================================ */

a.button.gold,
button.button.gold,
p.button.gold a{
    background-color:var(--gold);
    border-color:var(--gold);
    color:var(--blue-dark);
}

@media (hover:hover){

    a.button.gold:hover,
    button.button.gold:hover,
    p.button.gold a:hover{
        background-color:var(--gold-dark);
        border-color:var(--gold-dark);
        color:white;
    }
}


/* ============================================================
   RESPONSIVE ROOT SIZING
============================================================ */

@media (max-width:1400px){

    :root{
        --h1-size:44px;
        --content-padding:60px;
    }
}

@media (max-width:1080px){

    :root{
        --h1-size:33px;
        --h2-size:24px;
        --h3-size:20px;
        --h4-size:17px;
        --h6-size:12px;
        --font-size:15px;
        --padding:15px;
        --content-padding:40px;
    }

    .half{
        flex-basis:100%;
    }

    .half:first-child{
        margin-bottom:calc(var(--padding) * 2);
    }

    a.button,
    button.button,
    p.button a{
        font-size:12px;
    }
}

@media (max-width:600px){

    :root{
        --h1-size:25px;
        --h2-size:20px;
        --h3-size:18px;
        --h4-size:15px;
        --font-size:14px;
        --content-padding:25px;
    }
}


/* ============================================================
   SLICK SLIDER
============================================================ */

.slick-slider{
    position:relative;
    display:block;
    box-sizing:border-box;
    -webkit-user-select:none;
    -moz-user-select:none;
    -ms-user-select:none;
    user-select:none;
    -webkit-touch-callout:none;
    -khtml-user-select:none;
    -ms-touch-action:pan-y;
    touch-action:pan-y;
    -webkit-tap-highlight-color:transparent;
}

.slick-list{
    position:relative;
    display:block;
    overflow:hidden;
    margin:0;
    padding:0;
}

.slick-list:focus{
    outline:none;
}

.slick-list.dragging{
    cursor:pointer;
    cursor:hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list{
    -webkit-transform:translate3d(0,0,0);
    -moz-transform:translate3d(0,0,0);
    -ms-transform:translate3d(0,0,0);
    -o-transform:translate3d(0,0,0);
    transform:translate3d(0,0,0);
}

.slick-track{
    position:relative;
    top:0;
    left:0;
    display:block;
    margin-left:auto;
    margin-right:auto;
}

.slick-track:before,
.slick-track:after{
    display:table;
    content:'';
}

.slick-track:after{
    clear:both;
}

.slick-loading .slick-track{
    visibility:hidden;
}

.slick-slide{
    display:none;
    float:left;
    height:100%;
    min-height:1px;
}

[dir='rtl'] .slick-slide{
    float:right;
}

.slick-slide img{
    display:block;
}

.slick-slide.slick-loading img{
    display:none;
}

.slick-slide.dragging img{
    pointer-events:none;
}

.slick-initialized .slick-slide{
    display:block;
}

.slick-loading .slick-slide{
    visibility:hidden;
}

.slick-vertical .slick-slide{
    display:block;
    height:auto;
    border:1px solid transparent;
}

.slick-arrow.slick-hidden{
    display:none;
}


/* ============================================================
   HEADER / UTILITY BAR
============================================================ */

#utility{
    --colour:white;
    background:var(--blue-dark);
    color:var(--colour);
    font-size:14px;
    letter-spacing:0.05em;
    line-height:20px;
    border-bottom:1px solid rgba(212,175,55,0.35);
}

#utility .inner{
    height:45px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0 var(--padding);
}

#utility a{
    color:var(--colour);
    height:20px;
    opacity:0.7;
    transition:opacity .1s ease-out;
}

#utility svg{
    height:15px;
    width:auto;
}

#utility .left{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:10px;
    text-transform:uppercase;
}

#utility .left span{
    opacity:0.3;
}

#utility .left a{
    display:block;
}

#utility .left a.on{
    opacity:1;
    color:var(--gold);
}

#utility .right{
    display:flex;
    justify-content:flex-end;
    align-items:center;
    gap:30px;
}

#utility .right a{
    display:inline-flex;
    align-items:center;
    gap:10px;
}


/* ============================================================
   MAIN HEADER
============================================================ */

#header{
    background:white;
    box-shadow:0 3px 10px 0 rgba(6,43,92,0.10);
    color:var(--blue-dark);
    display:flex;
    justify-content:center;
    align-items:center;
    box-sizing:border-box;
    position:sticky;
    top:0;
    left:0;
    right:0;
    width:100%;
    z-index:999;
    transition:background-color 0.4s ease-out;
    border-bottom:3px solid var(--gold);
}

#header .inner{
    height:90px;
    justify-content:space-between;
    align-items:center;
    padding:20px var(--padding);
}


/* ============================================================
   GEO ASSAY PNG LOGO
============================================================ */

#header a.logo{
    display:flex;
    align-items:center;
    height:45px;
    width:auto;
    flex-shrink:0;
}

.logo-img{
    width:180px;
    height:auto;
    display:block;
}

#header a.logo img{
    display:block;
    height:45px;
    width:auto;
    max-width:220px;
    object-fit:contain;
}


/* Keep logo fully visible on hover */

#header a.logo:hover{
    opacity:1;
}


/* ============================================================
   HEADER MENU BUTTON
============================================================ */

#header button{
    display:none;
    background:transparent;
    border:none;
    margin:0;
    padding:0;
    height:30px;
}

#header button svg{
    fill:var(--blue-dark);
    height:100%;
    width:100%;
}

#header button #svg-cross{
    display:none;
}


/* ============================================================
   SITE NAVIGATION
============================================================ */

#site-nav{
    display:flex;
    align-items:center;
    gap:30px;
    font-size:14px;
    font-weight:700;
    letter-spacing:0.05em;
    text-transform:uppercase;
}

#site-nav a{
    display:block;
    padding:10px 0;
    color:var(--blue-dark);
}

#site-nav a span{
    border-bottom:2px solid rgba(212,175,55,0);
    display:block;
    padding:7px 0 5px;
    transition:
        border-color .2s ease-out,
        color .2s ease-out;
}

#site-nav li.on a span{
    border-color:var(--gold);
    color:var(--blue);
}

#site-nav li{
    position:relative;
}

#site-nav li ul{
    background:rgba(6,43,92,0.96);
    -webkit-backdrop-filter:blur(10px);
    backdrop-filter:blur(10px);
    display:none;
    list-style:none;
    padding:10px 20px 10px;
    margin:0;
    position:absolute;
    top:100%;
    left:-20px;
    min-width:240px;
    border-top:3px solid var(--gold);
    box-shadow:0 8px 20px rgba(0,0,0,0.15);
}

#site-nav li ul a{
    color:white;
    opacity:0.75;
    padding:10px 0;
    transition:
        opacity .2s ease-out,
        color .2s ease-out;
}

#site-nav li ul li.on a{
    opacity:1;
    color:var(--gold);
}


@media (hover:hover){

    #utility a:hover{
        opacity:1;
        color:var(--gold);
    }

    /*
     * Do NOT fade the logo.
     * Navigation links retain their original hover behavior.
     */

    #header a:not(.logo):hover{
        opacity:1;
    }

    #header button:hover{
        opacity:0.6;
    }

    #site-nav li a:hover{
        opacity:1;
    }

    #site-nav li:hover a span{
        border-color:var(--gold);
        color:var(--blue);
    }

    #site-nav li.parent:hover ul{
        display:block;
    }

    #site-nav li.parent ul a:hover{
        color:var(--gold);
        display:block;
        opacity:1;
    }
}


/* ============================================================
   RESPONSIVE HEADER
============================================================ */

@media (max-width:1400px){

    #header a.logo,
    #header a.logo img{
        height:40px;
    }

    #site-nav{
        gap:25px;
    }
}

@media (max-width:1200px){

    #header a.logo,
    #header a.logo img{
        height:35px;
    }

    #site-nav{
        gap:15px;
    }
}

@media (max-width:1080px){

    .layout{
        padding-top:40px;
    }

    #utility{
        font-size:12px;
        position:absolute;
        top:60px;
        left:0;
        right:0;
    }

    #utility .inner{
        height:40px;
    }

    #utility .right{
        gap:20px;
    }

    #utility svg{
        height:12px;
    }

    #header .inner{
        height:60px;
        padding:10px var(--padding);
    }

    #header a.logo,
    #header a.logo img{
        height:30px;
    }

    #header button{
        display:block;
    }

    #header #site-nav{
        background:rgba(6,43,92,0.97);
        -webkit-backdrop-filter:blur(10px);
        backdrop-filter:blur(10px);
        display:none;
        padding-bottom:80px;
        position:fixed;
        top:60px;
        left:0;
        bottom:0;
        width:100%;
        z-index:1;
        text-align:left;
        overflow-y:overlay;
        -ms-overflow-style:-ms-autohiding-scrollbar;
        border-top:3px solid var(--gold);
    }

    #header #site-nav a{
        padding:0;
    }

    #header #site-nav a span{
        border-bottom:1px solid rgba(255,255,255,0.12);
        color:white;
        font-size:15px;
        margin:0;
        padding:var(--padding);
    }

    #header #site-nav li.on a span{
        background:rgba(212,175,55,0.15);
        border-color:var(--gold);
        color:var(--gold);
    }

    #header #site-nav li.parent.on a span{
        border-bottom:1px solid rgba(255,255,255,0.12);
    }

    #header #site-nav li ul{
        display:block;
        background:transparent;
        -webkit-backdrop-filter:none;
        backdrop-filter:none;
        font-weight:500;
        position:relative;
        top:auto;
        left:auto;
        padding:0;
        border-top:none;
        box-shadow:none;
    }

    #header #site-nav li ul a{
        border-bottom:1px solid rgba(255,255,255,0.1);
        color:white;
        font-size:15px;
        padding:var(--padding);
        padding-left:30px;
    }

    #header #site-nav li.on ul{
        background:rgba(255,255,255,0.05);
    }

    #header #site-nav li ul li.on a{
        color:var(--gold);
    }

    html.nav-active{
        overflow-y:hidden;
    }

    html.nav-active #utility{
        position:fixed;
        top:auto;
        bottom:0;
        z-index:9999;
    }

    html.nav-active #header{
        background-color:white;
        border-color:var(--gold);
    }

    html.nav-active #header button svg{
        fill:var(--blue-dark);
    }

    html.nav-active #header button #svg-menu{
        display:none;
    }

    html.nav-active #header button #svg-cross{
        display:block;
    }
}


/* ============================================================
   FOOTER
============================================================ */

#page-end{
    background-color:var(--blue-dark);
    border-top:4px solid var(--gold);
}

#site-footer{
    --colour:white;
    --opacity:0.75;

    background-color:var(--blue-dark);
    color:var(--colour);
    font-size:15px;
}

#site-footer .inner{
    justify-content:space-between;
    gap:20px;
    padding:50px var(--padding);
}

#site-footer .right{
    font-weight:500;
    text-align:right;
}

#site-footer p{
    margin-bottom:0.5em;
}

#site-footer a{
    color:white;
    opacity:var(--opacity);
    text-decoration:none;
    text-underline-offset:4px;
    transition:
        opacity 0.2s ease-out,
        color 0.2s ease-out;
}

#site-footer .logo img{
    height:45px;
    width:auto;
}

#site-footer .logo svg{
    height:45px;
    width:auto;
}

#site-footer .text p{
    line-height:1.8;
    opacity:var(--opacity);
}

 .whitetext p{
    line-height:1.8;
    
    color: white;
}

#site-footer .text a.link{
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 0;
}

#site-footer .text a.link svg{
    height:auto;
    width:15px;
}

#site-footer .links{
    letter-spacing:0.1em;
    line-height:1.5;
    text-align:right;
    text-transform:uppercase;
}

#site-footer .links a{
    display:inline-block;
    padding:5px 0;
}

#site-footer .terms{
    display:flex;
    justify-content:flex-start;
    align-items:center;
    gap:10px;
    font-size:13px;
    line-height:1;
}

#site-footer .terms p{
    display:inline-block;
    line-height:1.5;
    margin:0;
    opacity:var(--opacity);
}

#site-footer .terms span{
    opacity:0.2;
}


@media (max-width:900px){

    #site-footer{
        font-size:14px;
        padding-bottom:40px;
    }

    #site-footer .inner{
        padding:20px var(--padding);
    }

    #site-footer .inner.flex{
        display:block;
    }

    #site-footer .col{
        border-bottom:1px solid rgba(255,255,255,0.1);
        margin-bottom:20px;
        padding-bottom:20px;
        text-align:left;
    }

    #site-footer .logo img,
    #site-footer .logo svg{
        height:30px;
    }

    #site-footer .terms{
        font-size:12px;
        padding:var(--padding);
    }
}

@media (max-width:400px){

    #site-footer{
        font-size:12px;
    }

    #site-footer .inner{
        padding-top:30px;
        padding-bottom:30px;
    }
}

@media (hover:hover){

    #site-footer a:hover{
        opacity:1;
        color:var(--gold);
    }

    #site-footer .links a:hover,
    #site-footer .terms a:hover{
        text-decoration:underline;
    }
}


/* ============================================================
   BANNER
============================================================ */

.page-banner{
    --banner-height:400px;

    background-color:var(--blue-dark);
    color:white;
    height:var(--banner-height);
    position:relative;
}

.page-banner .overlay{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:1;

    background:linear-gradient(
        180deg,
        rgba(11,61,145,0.35) 0%,
        rgba(6,43,92,0.88) 100%
    );
}

.page-banner header{
    padding:var(--content-padding) 0;
    position:absolute;
    bottom:0;
    left:0;
    width:100%;
    z-index:2;
}

.page-banner h1{
    margin:0;
    max-width:1000px;
}

.page-banner h1 a{
    color:white;
}

.page-banner h3{
    margin-top:0.5em;
    max-width:1000px;
    opacity:0.85;
}

.page-banner figure{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:var(--banner-height);
    width:100%;
}

#banner-video{
    height:var(--banner-height);
}

#banner-video .video{
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    pointer-events:none;
    overflow:hidden;
}

#banner-video iframe{
    width:100vw;
    height:56.25vw;
    min-height:100vh;
    min-width:177.77vh;
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

@media (max-width:1080px){

    .page-banner{
        --banner-height:45vw;
    }

    .page-banner header{
        padding:30px 0;
    }
}

@media (max-width:600px){

    .page-banner{
        --banner-height:260px;
    }
}


/* ============================================================
   PAGES
============================================================ */

.page-content a{
    text-decoration:underline;
}

@media (hover:hover){

    .page-content a:hover{
        opacity:0.75;
        color:var(--blue);
        text-decoration:underline;
    }
}

.page-content img{
    height:auto;
    width:100%;
    box-sizing:border-box;
}

.page-content .video{
    overflow:hidden;
    position:relative;
    padding-top:56.25%;
}

.page-content .video iframe{
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    height:100%;
    width:100%;
}

.page-content ul,
.page-content ol{
    line-height:1.5;
    margin:0 0 1.5em 1.5em;
}

.page-content li ul,
.page-content li ol{
    font-size:100%;
    margin:0.5em 0 0.5em 1.5em;
}

.page-content ul{
    list-style-type:disc;
}

.page-content ul ul{
    list-style-type:circle;
}

.page-content ul ul ul{
    list-style-type:square;
}

.page-content ol{
    list-style-type:decimal;
}

.page-content ol ol{
    list-style-type:lower-alpha;
}

.page-content ol ol ol{
    list-style-type:lower-roman;
}

.page-content li{
    margin-bottom:0.5em;
}

.page-content ul:last-child,
.page-content ol:last-child,
.page-content figure:last-child,
.page-content ul:only-child,
.page-content ol:only-child,
.page-content figure:only-child{
    margin-bottom:0;
}


/* ============================================================
   DIVIDERS
============================================================ */

.page-content .divider.dark{
    border:1px solid var(--blue-dark);
}

.page-content .divider.light{
    border:1px solid var(--light);
}

.page-content .divider.teal{
    border:1px solid var(--blue-light);
}

.page-content .divider.white{
    border:1px solid white;
}


/* Gold divider */

.page-content .divider.gold{
    border:1px solid var(--gold);
}


/* ============================================================
   BACKGROUND COLOURS
============================================================ */

.background-light{
    background-color:var(--light);
}

.background-grey{
    background-color:var(--light);
}

.background-teal{
    background-color:var(--blue-light);
}

.background-blue{
    background-color:var(--blue);
}

.background-dark{
    background-color:var(--blue-dark);
}

.background-gold{
    background-color:var(--gold);
}


/* ============================================================
   TEXT COLOURS
============================================================ */

.colour-white{
    color:white;
}

.colour-dark{
    color:var(--blue-dark);
}

.colour-blue{
    color:var(--blue);
}

.colour-gold{
    color:var(--gold);
}


/* ============================================================
   CONTENT BLOCKS
============================================================ */

.content-block{
    padding:var(--content-padding) 0;
}

.content-block .text{
    max-width:1000px;
}

.content-block .text.align-centre{
    margin:0 auto;
    text-align:center;
}

.image-block.layout-full{
    padding:0;
}


/* ============================================================
   TEXT COLUMNS
============================================================ */

.text-columns-block .text:first-child{
    margin-bottom:var(--padding-double);
}

.text-columns-block .text:last-child{
    margin-top:var(--padding-double);
}

.text-columns-block .cols .col{
    flex:1;
}

.text-columns-block .cols .col-inner{
    box-sizing:border-box;
    height:100%;
    margin:0 var(--padding);
    padding:var(--padding-double);
}

.text-columns-block .cols img{
    margin:0 auto 2em;
    height:80px;
    width:auto;
}


/* ============================================================
   TESTIMONIAL
============================================================ */

.testimonial-block{
    color:var(--light);
    background-color:var(--blue-dark);
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    padding:0;
}

.testimonial-block .outer{
    background:linear-gradient(
        135deg,
        rgba(6,43,92,0.90),
        rgba(11,61,145,0.75)
    );

    min-height:300px;
    display:flex;
    align-items:center;
    padding:var(--content-padding) 0;
}

.testimonial-block h1,
.testimonial-block h2,
.testimonial-block h3,
.testimonial-block h4{
    color:white;
}

.testimonial-block strong{
    color:var(--gold);
}


/* ============================================================
   TEXT / IMAGE BLOCK
============================================================ */

.text-image-block{
    padding:0;
}

.text-image-block .padding{
    padding:var(--content-padding);
}

.text-image-block .text{
    max-width:560px;
}

.text-image-block .logo{
    margin-bottom:1em;
    max-width:300px;
    width:60%;
}

.text-image-block figure.half img{
    height:100%;
    object-fit:cover;
}

.text-image-block .half.flex{
    align-items:center;
}

.text-image-block.text-left>.flex{
    flex-direction:row-reverse;
}

.text-image-block.text-left .text{
    margin-left:auto;
}


/* ============================================================
   LOCATIONS
============================================================ */

.locations-block header{
    border-top:2px solid var(--gold);
    padding-top:var(--padding);
}

.locations-block .location{
    border-bottom:1px solid var(--grey);
    padding:var(--padding) 0;
}

.locations-block .location .right{
    text-align:right;
}

.locations-block .location h6{
    margin-top:-0.5em;
    opacity:0.7;
    color:var(--blue);
}

.locations-block .location a{
    text-decoration:none;
}

.locations-block .location a.button{
    letter-spacing:0;
    text-transform:none;
}


/* ============================================================
   LEFT / RIGHT BLOCK
============================================================ */

.left-right-block .half figure{
    margin-bottom:1em;
}

.left-right-block .half figure:only-child{
    margin-bottom:0;
}


/* ============================================================
   VACANCIES
============================================================ */

.vacancies-block a.vacancy{
    background-color:white;
    border:1px solid var(--blue-light);
    border-left:4px solid var(--gold);
    border-radius:6px;
    box-sizing:border-box;
    color:var(--colour);
    display:block;
    padding:var(--padding);
    text-decoration:none !important;
    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        transform .2s ease;
}

.vacancies-block a.vacancy:not(:last-child){
    margin-bottom:1em;
}

.vacancies-block a.vacancy h4{
    margin-bottom:0.5em;
    color:var(--blue);
}

.vacancies-block a.vacancy p{
    font-size:90%;
    opacity:0.75;
}

.vacancies-block a.vacancy:hover{
    opacity:1;
    border-color:var(--gold);
    box-shadow:0 5px 20px rgba(6,43,92,0.10);
    transform:translateY(-2px);
}


/* ============================================================
   RESPONSIVE CONTENT
============================================================ */

@media (max-width:1080px){

    .text-columns-block .cols{
        display:block;
    }

    .text-columns-block .cols .col:not(:last-child){
        margin-bottom:var(--padding);
    }

    .text-columns-block .cols .col-inner{
        padding:var(--padding);
    }

    .text-image-block .padding{
        padding:var(--padding);
    }

    .text-image-block .half .text{
        margin:0 auto;
        max-width:100%;
    }

    .locations-block .col{
        flex-basis:100%;
        margin-bottom:1em;
    }

    .locations-block .col:last-child{
        margin-bottom:0;
    }

    .locations-block .location .right{
        text-align:left;
    }
}


/* ============================================================
   HOME
============================================================ */

#home-banner .page-banner{
    --banner-height:600px;
}

#banner-images{
    position:relative;
}

#banner-images figure{
    background-repeat:no-repeat;
    background-size:cover;
    background-position:center;
    height:var(--banner-height);
    width:100%;
}

@media (max-width:1080px){

    #home-banner .page-banner{
        --banner-height:400px;
    }
}


/* ============================================================
   CONTACT
============================================================ */

body.contact main{
    background-color:var(--light);
}

body.contact form{
    margin-top:40px;
}

body.contact form #hpt{
    display:none;
}

body.contact form label{
    color:var(--blue-dark);
    display:block;
    font-family:var(--aktiv);
    font-size:14px;
    font-weight:bold;
    line-height:1.2;
    margin:0 0 0.5em;
    text-transform:uppercase;
    letter-spacing:0.05em;
}

body.contact form input{
    background:white;
    border:1px solid var(--grey);
    color:var(--blue-dark);
    font-family:var(--aktiv);
    font-size:var(--font-size);
    line-height:30px;
    padding:8px 10px;
    margin-bottom:20px;
    width:100%;
    box-sizing:border-box;
}

body.contact form textarea{
    background:white;
    border:1px solid var(--grey);
    color:var(--blue-dark);
    font-family:var(--aktiv);
    font-size:var(--font-size);
    height:100px;
    padding:8px 10px;
    margin-bottom:20px;
    width:100%;
    box-sizing:border-box;
}

body.contact form input:focus{
    border-color:var(--gold);
    outline:none;
    box-shadow:0 0 0 2px rgba(212,175,55,0.12);
}

body.contact form textarea:focus{
    border-color:var(--gold);
    outline:none;
    box-shadow:0 0 0 2px rgba(212,175,55,0.12);
}

@media (hover:hover){

    body.contact form input:hover{
        border-color:var(--blue);
        outline:none;
    }

    body.contact form textarea:hover{
        border-color:var(--blue);
        outline:none;
    }
}


/* ============================================================
   GENERAL FORM ELEMENTS
============================================================ */

input,
textarea,
select{
    border-color:var(--grey);
}

input:focus,
textarea:focus,
select:focus{
    border-color:var(--gold);
}


/* ============================================================
   GOLD ACCENT UTILITIES
============================================================ */

.gold-line{
    height:3px;
    width:60px;
    background-color:var(--gold);
    margin:15px 0;
}

.gold-text{
    color:var(--gold);
}

.blue-text{
    color:var(--blue);
}

.blue-background{
    background-color:var(--blue);
    color:white;
}

.dark-blue-background{
    background-color:var(--blue-dark);
    color:white;
}

.gold-background{
    background-color:var(--gold);
    color:var(--blue-dark);
}


/* ============================================================
   CARDS / PANELS
============================================================ */

.card{
    background:white;
    border:1px solid var(--grey);
    border-radius:6px;
    box-shadow:0 4px 15px rgba(6,43,92,0.06);
}

.card-header{
    background:var(--blue);
    color:white;
    border-bottom:3px solid var(--gold);
}

.card-title{
    color:var(--blue-dark);
}

.card-accent{
    border-left:4px solid var(--gold);
}


/* ============================================================
   TABLES
============================================================ */

table{
    width:100%;
}

th{
    background-color:var(--blue-dark);
    color:white;
    font-weight:700;
    text-align:left;
}

th,
td{
    padding:10px 12px;
    border-bottom:1px solid var(--grey);
}

tbody tr:nth-child(even){
    background-color:var(--light);
}

tbody tr:hover{
    background-color:var(--blue-light);
}


/* ============================================================
   STATUS / BADGES
============================================================ */

.badge-gold{
    background-color:var(--gold);
    color:var(--blue-dark);
}

.badge-blue{
    background-color:var(--blue);
    color:white;
}

.badge-light{
    background-color:var(--blue-light);
    color:var(--blue-dark);
}


/* ============================================================
   FINAL COLOUR OVERRIDES
   Keeps legacy classes visually consistent with new palette.
============================================================ */

:root{
    --red:var(--gold);
    --teal:var(--blue-light);
    --dark:var(--blue-dark);
}

.text-red,
.colour-red{
    color:var(--gold) !important;
}

.background-red{
    background-color:var(--gold) !important;
}

.border-red{
    border-color:var(--gold) !important;
}

.text-teal,
.colour-teal{
    color:var(--blue) !important;
}

.background-teal{
    background-color:var(--blue-light);
}


/* ============================================================
   FOOTER FONT AWESOME ICONS
============================================================ */

#site-footer .text a.link{
    display:flex;
    align-items:center;
    gap:12px;
    padding:8px 0;
}

#site-footer .text a.link i{
    width:18px;
    min-width:18px;
    text-align:center;
    font-size:15px;
    color:var(--gold);
    opacity:1;
}

#site-footer .text a.link span{
    display:inline-block;
}

@media (hover:hover){

    #site-footer .text a.link:hover i{
        color:var(--blue);
    }

}