/*!
Theme Name:SPS PowerBuild
Author:zen.
Author URI:https://zenelements.com
Description:A microsite theme made for SPS PowerBuild by zen.
Version:1.0
License:GNU General Public License v2 or later
License URI:LICENSE
*/

:root{
--black:#000;
--white:#FFF;
--blue-dark:#00384A;
--blue-light:#005E73;
--citrus:#E3E047;
--grey-light:#EAEAEA;
--grey-mid:#BBBBBB;
--grey-dark:#212111;
--textLength:clamp(50ch,70ch,75ch);--textRhythm:1.5rem;font-size:1rem;line-height:1.5;line-height:1.5}
@font-face{font-display:swap;font-family:Roboto;src:url(assets/fonts/Roboto-Variable.ttf)}

*,:after,:before{box-sizing:border-box;color:inherit;font-family:inherit;margin:0;padding:0}body{min-height:100vh;min-height:-webkit-fill-available;font-size:16px}[x-cloak]{display:none!important}strong{font-family:var(--bold-font)}[tabindex="-1"]:focus{outline:none}iframe,img,svg,video{display:block;max-width:100%}img,svg,video{height:auto}[hidden],template{display:none}img{border-style:none}svg{overflow:hidden}aside,figcaption,figure,footer,header,main,nav,section{display:block}figure{margin:0}nav ul{list-style:none}html{overflow-x:hidden}
html{scroll-behavior:smooth}
body{background:var(--grey-light);font-family:'Roboto',Helvetica,sans-serif;color:var(--grey-dark);padding:0;font-size:1rem}
header{position:fixed;top:0;left:0;width:100%;height:75px;z-index:8}
header.stickyheader{transform: translateY(0);transition:all .25s ease-in-out;will-change:transform}
header.stickyheader.is-hidden{transform: translateY(-110%)}
header.stickyheader.is-sticky{background:var(--blue-dark)}
.header__layout {margin:5px auto;max-width:1440px;display:flex;flex-direction:row;justify-content:space-between;align-items:center;padding:0 10px}
    .header__actions {position:relative;display:flex;column-gap:10px}
    .header__actions .link {display:none}
    .menu-button {position:relative;width:46px;height:46px;background:var(--blue-dark);border:1px solid var(--blue-dark);border-radius:4px;transition:.3s ease-in-out;z-index:10}
        .menu-button .menu-title {position:absolute;top:14px;left:22px;color:var(--white);font-size:.875rem}
        .menu-button .menu-icon {position:absolute;top:9px;right:9px}
        .menu-button svg {fill:var(--citrus)}
        .menu-button svg path{stroke:var(--citrus)}
        .menu-button:hover {cursor:pointer;animation:pulse 0.4s ease forwards}
        .menu-title{display:none}
    .menu {position:absolute;right:0px;top:0px;width:220px;display:flex;justify-content:flex-start;flex-wrap:nowrap;flex-direction:column;align-items:center;background:var(--blue-dark);border-radius:8px;padding:16px;row-gap:2rem;z-index:9}
        .menu ul li {font-size:.875rem;font-weight:600;margin:0 0 8px 0}
        .menu ul li a{position:relative;display:block;width:100%;padding:8px;text-decoration:none;color:var(--white);border-bottom:1px solid var(--blue-light)}
        .menu ul li a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0%;background:var(--citrus);transition:width .2s ease-in-out}
        .menu ul li a:hover::after{width:100%}
footer {padding:20px 0}
footer .box {padding:0}
footer .box p {font-size:var(--text-s1)}
footer .section__layout {padding:60px 0}
footer .copy {max-width:1440px;margin:0 auto;padding:40px;font-size:.875rem}

.bg_white {background:var(--white)}
.bg_bluedark {background:var(--blue-dark)}
.bg_dark {background:var(--blue-light)}
.bg_citrus {background:var(--citrus)}
.bg_greylight {background:var(--grey-light)}
.bg_greymid {background:var(--grey-mid)}
.bg_greydark {background:var(--grey-dark)}

.white {color:var(--white)}
.bluedark {color:var(--blue-dark)}
.dark {color:var(--blue-light)}
.citrus {color:var(--citrus)}
.greylight {color:var(--grey-light)}
.greymid {color:var(--grey-mid)}
.greydark {color:var(--grey-dark)}

.section__layout {margin:0 auto;min-height:80vh;padding:60px 0 0 0}
    .section__layout__half {min-height:50vh}
    footer .section__layout {min-height:inherit}
    .style_full {padding:0}
    .style_float {margin:10px;border-radius:8px}
    .section_top{align-self:flex-start}
    .section_middle{align-self:center}
    .section_bottom{align-self:flex-end}

[data-layout=editorial] {display:grid;grid-template-columns:1fr}
[data-layout=editorial] .section__media {position:relative;overflow:hidden;border-radius:8px}
[data-media=right] .section__text,[data-media=left] .section__text {grid-column:1 / span 1;grid-row:1}
[data-media=right] .section__media,[data-media=left] .section__media {grid-column:1 / span 1;grid-row:2}

[data-layout=editorial] .section__media img {width:100%;height:100%;object-fit:cover;display:block;z-index:1}
[data-layout=editorial] .section__media::before {position:absolute;content:"";top:-1px;left:0;width:246px;height:45px;background:url('assets/vectors/img_mask_high_white.svg') no-repeat;background-size: 246px 45px;z-index:2}
[data-layout=editorial] .section__media::after {position:absolute;content:"";bottom:-1px;right:0;width:246px;height:45px;background:url('assets/vectors/img_mask_low_white.svg') no-repeat;background-size: 246px 45px;z-index:2}
[data-layout=text] {display:grid;grid-template-columns:1fr}
.image_textcolumns {border-radius:0 0 8px 8px}

.banner{position:relative;width:100%;display:grid;grid-template-columns:repeat(14, minmax(0, 1fr));grid-template-rows:auto auto;align-items:start}
.banner__image{grid-column:1/-1;grid-row:1;width:100%;aspect-ratio:5/4;object-fit:cover;display:block;z-index:1}
.banner::before{content:"";position:absolute;inset:0;background:rgba(0,56,74,.8);z-index:2;pointer-events:none}
.banner__text{position:relative;grid-column:1 / -1;grid-row:2;z-index:3;padding:clamp(16px, 2vw, 40px);animation:fadeInOne 0.8s ease both}
.banner__text {background:var(--grey-light);border-radius:0}
.hero-arrow {position:absolute;content:'';display:none; left:0; top:-60px;width:20px;height:840px;background-image:url('assets/vectors/big-arrow.svg'); background-repeat:no-repeat;background-position:center;background-size:contain;text-indent:-9999px}
@keyframes fadeInOne{from { opacity:0; transform:translateY(120px); } to { opacity:1; transform:translateY(0); }}

[data-layout=references] .align_centre {text-align:center}
[data-layout=references] .references {display:grid;column-gap:40px;grid-template-columns:1fr}
[data-layout=references] .reference {padding:20px 20px 0 20px;border-radius:8px}
  blockquote {margin:60px auto;max-width:720px;padding:20px;background:var(--white)}
  blockquote p {font-size:1rem;font-weight:400;line-height:1.3;color:var(--grey-dark) !important}
  blockquote cite {padding:20px 0;display:flex;align-items:center;gap:20px;font-size:var(--text-s2);font-style:normal;color:var(--blue-dark)}
  blockquote cite strong {font-weight:700}
  blockquote cite img {height:auto;max-width:80px;border-radius:100%;padding:2px;border:1px solid var(--citrus)}
  blockquote cite div {display:flex;flex-direction:column}
  .quote-centre {margin:40px auto}

h1,h2,h3,h4,h5,h6{font-weight:500;line-height:1.15;color:var(--blue-dark);margin-bottom:20px}
h1 {font-size: 2.25rem}
h2 {font-size:2rem}
h3 {font-size:1.75rem}
h4 {font-size:1.25rem}
h5{font-size:1rem}
h6 {font-size:1rem;font-weight:400}
h1 a,h2 a,h3 a {text-decoration:none}

.richText {max-width:100%;padding:0 20px}
.richText [href]:not([class]) {text-decoration:underline;text-decoration-color:var(--citrus);text-decoration-thickness:2px;transition:all .2s ease-in-out}
.richText [href]:not([class]):hover{text-decoration-thickness:4px}

.richText p {margin-bottom:20px;line-height:28px}
.richText .lead {font-size:1.25rem;line-height:1.4}
.richText ul, .richText ol {display:flex;flex-direction:column;gap:.25rem;margin-left:1.5rem;margin-bottom:20px}
.richText ul {list-style:disc}
.richText ol {list-style:decimal}
.richText ul li, .richText ol li {margin:0 0 10px}

.richText .list_bignumbers {counter-reset:big;list-style:none;margin:40px 0 0 0;padding:0}
.richText .list_bignumbers li{position:relative;counter-increment:big;padding-left:120px;margin-bottom:3rem;max-width:60ch;opacity: 0;transform: translateY(20px);transition: opacity 1s ease, transform 1s ease}
.richText .list_bignumbers li.is-visible {opacity:1;transform:translateY(0)}
.richText .list_bignumbers li::before{position:absolute;content:counter(big, decimal-leading-zero);top:0;left:0;width:100px;text-align:left;font-size:4rem;font-weight:900;line-height:1;color:var(--blue-dark);text-shadow:1px 1px 0 var(--citrus),-1px 1px 0 var(--citrus),1px -1px 0 var(--citrus),-1px -1px 0 var(--citrus)}
.richText .list_bignumbers li > * {margin-top:0;margin-bottom:0}
.richText .list_bignumbers li > *:last-child{margin-bottom:0}

.richText .mt0 {margin-top:0}
.richText .mb0 {margin-bottom:0}
.richText .pb0 {padding-top:0}
.richText .pt0 {padding-bottom:0}
.richText .tc {text-align:center}

.bg_bluedark h1 {color:var(--white)}
.bg_bluedark h2 {color:var(--citrus)}
.bg_bluedark h3, .bg_bluedark p, .bg_bluedark ul li, .bg_bluedark ol li {color:var(--white)}
.bg_bluedark [data-layout=editorial] .section__media::before {background-image:url('assets/vectors/img_mask_high_darkblue.svg')}
.bg_bluedark [data-layout=editorial] .section__media::after {background-image:url('assets/vectors/img_mask_low_darkblue.svg')}

.bg_greydark h1 {color:var(--white)}
.bg_greydark h2 {color:var(--citrus)}
.bg_greydark h3, .bg_greydark p, .bg_greydark ul li, .bg_greydark ol li {color:var(--white)}
.bg_greydark [data-layout=editorial] .section__media::before {background-image:url('assets/vectors/img_mask_high_darkyrey.svg')}
.bg_greydark [data-layout=editorial] .section__media::after {background-image:url('assets/vectors/img_mask_low_darkgrey.svg')}

a.link {display:inline-flex;padding:10px 16px;pointer-events:visible;position:relative;text-align:center;text-decoration:none;text-transform:none;align-items:center;font-size:1rem;font-weight:600;justify-content:center;border-radius:8px;background:none;border:1px solid var(--blue-dark);color:var(--blue-dark);transition:all .2s ease-in-out}
a.link:hover {background:var(--blue-dark);border:1px solid var(--blue-dark);color:var(--white)}

a.link-blue {background:var(--blue-dark);border:1px solid var(--blue-dark);color:var(--citrus)}
a.link-blue:hover {background:var(--citrus);border:1px solid var(--citrus);color:var(--blue-dark)}

a.link-citrus {background:var(--citrus);border:1px solid var(--citrus);color:var(--blue-dark)}
a.link-citrus:hover {background:var(--blue-dark);border:1px solid var(--blue-dark);color:var(--citrus)}

a.link-arrow{position:relative;padding-right:46px}
a.link-arrow::after{position:absolute;top:19px;right:12px;content:"";background-size:20px 10px;width:20px;height:10px;background-repeat:no-repeat}
a.link-arrow::after {background-image:url(assets/vectors/arrow-blue-right.svg)}
a.link-blue.link-arrow::after {background:url(assets/vectors/arrow-citrus-right.svg)}
a.link-blue.link-arrow:hover::after {background:url(assets/vectors/arrow-white-right.svg)}
a.link-citrus.link-arrow:hover::after {background:url(assets/vectors/arrow-citrus-right.svg)}

.modal-wrap {}
.modal-play {position:absolute;content:"";top:50%;left:50%;transform:translate(-50%, -50%);width:100px;height:100px;overflow:hidden;text-indent:-8888px;background:url(assets/vectors/play-citrus.svg) no-repeat center;background-size:contain;transition:transform .2s ease-in-out;z-index:5}
.modal-play:hover {transform:translate(-50%, -50%) scale(.9);}
.modal-overlay {position:fixed;inset:0;background:rgba(0,0,0,.9);display:flex;align-items:center;justify-content:center;z-index:9999;}
.modal-content {position:relative; width:min(90%, 900px)}
.modal-video {position:relative; padding-top:56.25%}
.modal-video iframe {position:absolute; inset:0; width:100%; height:100%; }
.modal-close {position:absolute; top:-40px; right:0;background:none; border:0;color:#fff; font-size:24px; cursor:pointer;}

.embed_form {width:100%;padding:20px;background:var(--white);border-radius:8px}

table {margin: 24px 0;width: 100%;border-collapse: collapse;border: 1px solid var(--grey-mid);font-size:1rem}
th,td {padding: 8px;text-align: left;border: 1px solid var(--grey-mid);vertical-align:top}
th {background: var(--grey-light, #f5f5f5); font-weight: 600;}

@media(min-width:779px){
    .header__layout {padding:0}
	.header__actions .link {display:inline}
    footer .copy {padding:40px 0}
    
	.banner{grid-template-rows:1fr;align-items:center;padding-inline:0}
    .banner__image{aspect-ratio:2/1;grid-column:1/-1;grid-row:1}
    .banner__text{grid-column:2 / span 6;grid-row:1;align-self:center;margin-top:0;border-radius:0;background:none;margin-top:24px}
    .banner[data-herolayout~="center"] .banner__text{grid-column:4 / span 6;text-align:center}
    .banner__text .richText {padding:0 20px}
    .banner__text .richText h1, .banner__text .richText p {color:var(--white);margin-bottom:10px}
	.hero-arrow {display:block}
  
    .section__layout {max-width:1240px;padding:100px 40px}
    [data-layout=editorial] {grid-template-columns:repeat(12,1fr);grid-column-gap:16px;grid-row-gap:16px;align-items:center}
    [data-layout=editorial] .section__text {grid-row:1}
    [data-layout=editorial] .section__media {grid-row:1}
    [data-media=right] .section__text {grid-column:1 / span 5}
    [data-media=right] .section__media {grid-column:7 / span 6}
    [data-media=left] .section__text {grid-column:8 / span 5}
    [data-media=left] .section__media {grid-column:1 / span 6}
    [data-layout=editorial] .section__media::before {width:328px;height:60px;background-size:328px 60px}
    [data-layout=editorial] .section__media::after {width:328px;height:60px;background-size:328px 60px}

    [data-layout=text] {grid-template-columns:repeat(12,1fr);grid-column-gap:16px;grid-row-gap:16px;align-items:center}
    [data-layout=text] .section__text {grid-column:1 / span 4; grid-row:1}
    [data-layout=text] .section__text:nth-child(2) {grid-column:7 / span 6; grid-row:1}
	[data-layout=text] .section__text__full {grid-column: 1 / span 12 !important}

    [data-layout=references] .references {grid-template-columns:1fr 1fr 1fr}

    .style_float {margin:20px}
    .richText {padding:0}
	h1 {font-size:3rem}
	h2 {font-size:2.5rem}

    .richText .list_bignumbers {margin:0}
    .richText .list_bignumbers li{padding-left:140px}
}
@media(min-width:1240px){.section__layout{max-width:1440px}}

.boxes {display:grid;grid-column-gap:20px;grid-row-gap:20px;grid-template-columns:1fr}
.box {padding:20px 20px 0 20px;border-radius:8px}
@media(min-width:960px){
    [data-columns=two]{grid-template-columns:1fr 1fr}
    [data-columns=three]{grid-template-columns:1fr 1fr}
    [data-columns=four]{grid-template-columns:1fr 1fr}
    [data-columns=six]{grid-template-columns:1fr 1fr}
}
@media(min-width:1440px){
    [data-columns=three]{grid-template-columns:1fr 1fr 1fr}
    [data-columns=four]{grid-template-columns:1fr 1fr 1fr 1fr}
    [data-columns=six]{grid-template-columns:1fr 1fr 1fr 1fr 1fr 1fr}
}
[data-columns=six] .box {text-align:center;padding:20px 5px 0 5px}
[data-columns=six] .box p {font-size:var(--text-s1)}
[data-columns=six] .box img {margin:10px auto 0 auto;max-width:80px;height:inherit}
@media(max-width:1540px){.nomob{display:none}}

.wp-block-columns {max-width:1680px;margin:4vh auto;padding:0 20px}
.wp-block-column .richText {padding-left:0}

.wp-block-gallery {padding:16px;row-gap:16px;column-gap:16px}
.wp-block-image {margin:0 auto}
.wp-block-image .wp-element-caption {text-align:center;font-size:12px}
.full-width{grid-column:1/-1;left:50%;margin-left:-50vw;margin-right:-50vw;position:relative;right:50%;width:100vw}.full-width img {width:100%;height:inherit}

.flow-y{flex-direction:column}
.flow-x,.flow-y{--gap:var(--textRhythm);display:flex;gap:var(--gap);justify-content:flex-start}
.center-x,.flow-x{align-items:center}
.center-x{box-sizing:content-box;display:flex;flex-direction:column;margin-left:auto;margin-right:auto;max-width:var(--centerWidth,60ch)}
.has-text-align-center {max-width:64ch;margin:10px auto}
.hide, .screen-reader-text {display:none}
.sr-only{clip:rect(0,0,0,0);border:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}

.richText input, .richText textarea {padding:16px 12px;border-radius:8px;border:var(--blue-light) 1px solid;width:100%}
.richText input:focus, .richText textarea:focus {border:var(--blue-dark) 1px solid}
.richText input[type=submit] {width:inherit;color:var(--blue-dark);background:var(--citrus);border:var(--citrus) 1px solid;font-size:14px;font-weight:500;padding:16px 24px}
.richText input[type=submit]:hover {color:var(--citrus);background:var(--blue-dark);border:var(--blue-dark) 1px solid}

.page-id-3,.page-id-12,.page-id-14 {background:var(--blue-dark)}
.page-id-3 .header__actions,.page-id-12 .header__actions,.page-id-14 .header__actions {display:none}


.post-edit-link {position:fixed;bottom:10px;left:10px;background-color:var(--citrus);color:var(--blue-dark);height:80px;width:80px;line-height:80px;text-align:center;z-index:100;box-shadow:0 2px 5px rgba(0,0,0,.2);text-decoration:none;border-radius:100px;font-weight:900;transition:all .2s ease-in-out}
.post-edit-link:hover {background:var(--blue-light);bottom:8px}