/*
Theme Name: Manuel Harlan
*/

:root {

  /* Structure */
  --header-height:100px;
  --logo-width: 160px;
  --logo-height: 40px;
  --padding-small: 40px;
  --padding:60px;
  --padding-large:80px;
  --padding-body: 200px;
  --grid-gap-small:40px;
  --grid-gap: 80px;
  --container: 1340px;
  --container-narrow: 840px;
  --margin-bottom:100px;
  --margin-bottom-small:0.5lh;
  --icon-size: 44px;
  --border-radius:50px;
  --button-radius:15px;
  --button-padding:12px 24px;
  --menu-spacing:32px;

  /* Font Sizes */
  --font-x-large: 52px;
  --font-large: 36px;
  --font-medium: 24px;
  --font-regular-large:20px;
  --font-regular:18px;
  --font-small: 14px;
  --font-x-small: 12px;

  /* Fonts */
  --font-heading: 'Neo Sans', sans-serif;
  --font-sans-serif: "Noto Sans", sans-serif;

  /* Colours */
  --black: #303131;
  --white: #FFFFFF;
  --light-grey: #ced5e3;
  --green:#66b22e;
  --navy:#082048;
  --blue: #355e95;
  --red: #CC0000;
  --orange: #f3b24e;

  /* Transitions */
  --transition-height: 1s ease-out max-height;
  --transition-transform: 0.3s ease-out transform, 0.3s ease-out visibility;
  --transition-fade: 0.3s ease-out opacity, 0.3s ease-out visibility;
  --transition-color: 0.3s ease-out color;
  --transition-background: 0.3s ease-out background-color;
  --transition-header: 0.3s ease-out box-shadow, 0.3s ease-out background-color;
  --transition-roundel: 0.3s ease-out background-color, 0.3s ease-out color, 0.3s ease-out border-radius;
  --transition-button:0.3s ease-out background-color, 0.3s ease-out color;

  /* Swiper */
  --swiper-theme-color: var(--green);
  --swiper-scrollbar-sides-offset:0;
  --swiper-scrollbar-size: 10px;
  --swiper-scrollbar-drag-bg-color:var(--blue);
  --swiper-scrollbar-border-radius:0; 

  /* Layouts */
  --text-image-margin: -200px;
  --team-image-width: 200px;
  --article-byline-height: 50px;
  --article-byline-margin: 20px;
  --article-byline-spacer-margin: 12px;

  /* Cookie Banner */
  --cc-btn-primary-bg: var(--navy);
  --cc-btn-secondary-hover-bg: var(--light-grey);

  /* Plyr */
  --plyr-color-main	: var(--green);
}

/* Fonts */
@font-face {
  font-family: 'Neo Sans';
  src: url('../fonts/NeoSansW1G-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Neo Sans';
  src: url('../fonts/NeoSansW1G-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* Colours */
.white { color: var(--white); }
.black { color: var(--black); }
.orange { color: var(--orange); }
.red { color:var(--red); }
.blue { color:var(--blue); }
.green { color:var(--green); }
.grey { color:var(--grey);}

.navy { color:var(--navy); }
.bg-white { background-color:var(--white); }
.bg-black { background-color:var(--black); }
.bg-light-grey { background-color:var(--light-grey); }
.bg-navy { background-color:var(--navy); }
.bg-blue { background-color:var(--blue); }
.bg-green { background-color:var(--green); }

/* Structure */
html, body { height: 100%; }
.container { margin-left:auto; margin-right:auto; width: 100%; padding:0 var(--padding); max-width: var(--container); position: relative; }
.narrow { max-width: var(--container-narrow); }
.margin-bottom { margin-bottom: var(--margin-bottom); }
.margin-bottom-small { margin-bottom: var(--margin-bottom-small); }
.margin-top { margin-top: var(--margin-bottom); }
.margin-top-small { margin-top: var(--margin-bottom-small); }
.padding { padding: var(--padding-small); }
.image { background: var(--light-grey); }
.shadow { box-shadow: var(--shadow); }
.has-bg { padding-top:var(--padding-large); padding-bottom:var(--padding-large); }
.has-bg + .has-bg { margin-top:calc( -1 * var(--margin-bottom) ); }
.has-bg.margin-bottom.last { margin-bottom:0; }
.main > section.has-bg:last-of-type { margin-bottom: 0; }
.text-gradient { color: #67b32e; background-image: linear-gradient(45deg, #67b32e , var(--navy) 70%, #c2efeb 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: inline-block; }
.grid-gap-small { grid-gap: var(--grid-gap-small); }

/* Typography */
body { padding-top:var(--padding-body); color: var(--black); background: var(--white); font-weight: 400; line-height: 1.7; font-size: var(--font-regular); font-family: var(--font-sans-serif); text-wrap: balance;}
h1,h2,h3,h4 { font-family: var(--font-heading); line-height: 1.25; }
a { transition: var(--transition-fade); }
p { margin-bottom: 0.5lh; }
ul { margin: 1lh 0; }
ul:first-of-type { margin-top: 0;}
li { margin-bottom: 1lh; list-style-position: outside; margin-left: 20px; text-wrap: auto; }
li::marker { color: var(--green); }
p:last-of-type { margin-bottom:0; }
button { font-family: inherit; }
.font-x-large { font-size: var(--font-x-large); }
.font-large { font-size: var(--font-large); }
.font-regular { font-size: var(--font-regular); }
.font-regular-large { font-size: var(--font-regular-large); }
.font-medium { font-size: var(--font-medium); }
.font-small { font-size: var(--font-small); }
.font-x-small { font-size: var(--font-x-small); }
.font-heading { font-family: var(--font-heading);}

.uppercase { text-transform: uppercase; letter-spacing: 0.1em; }
.underline { text-decoration-thickness: 1px; text-underline-offset: 8px; }
.underline-motif:after { content:''; width:75px; height: 3px; background-color: var(--green); margin: 0.5lh 0; display: block; }
.underline-motif.center:after { margin-left: auto; margin-right: auto; }

.regular { font-style: normal; }

.roundel { border: 1px solid var(--black); padding: 4px 8px 3px 8px; border-top-right-radius: 10px; margin-right: 10px; transition: var(--transition-roundel); }
.roundel:hover { background: var(--black); color:var(--white); border-top-right-radius: 0; border-bottom-left-radius: 10px }
.roundel.is-active { background-color: var(--green); color: var(--white); border-color: var(--green); border-top-right-radius: 0; border-bottom-left-radius: 10px; }

/* Form */
label { display: block; margin-bottom: 10px; grid-column: 1/-1;  }
input:not([type="checkbox"]), textarea, select { outline: none; padding: 12px 20px; font-family: var(--font-sans-serif); color:inherit; margin-bottom: 20px; width: 100%; background: var(--white); border:1px solid var(--white); } 
input[type="checkbox"] { width: 30px; height: 30px; margin: 0 16px 0 0; background-color: var(--white); background-size:25px auto; background-repeat: no-repeat; background-position: center; }
input[type="checkbox"]:checked { background-image: url('../images/icon-checkbox.svg'); }
input:focus, textarea:focus, select:focus { border-color:var(--navy);}
input:valid:required, textarea:valid:required  { border-color:var(--green);}
input:not(:empty):invalid:required, textarea:not(:empty):invalid:required { border-color:var(--red);}
textarea { min-height: 150px; }
.form-field-checkboxes { grid-gap:0; }
.form-field-checkboxes div { display: flex; line-height: 30px; margin-bottom: 10px; padding-right: 20px;}
.form-field-checkboxes label { cursor: pointer; }
.form-field-select:after { content:''; width: 50px; height: 50px; top:40px; right:0; background-image: url('../images/icon-select.svg'); background-size: 30px; background-position: center; background-repeat: no-repeat; pointer-events: none; position: absolute; } 

/* Button */
.button, button[type="submit"] { background: var(--green); color: var(--white); border-bottom:3px solid var(--navy); display: inline-block; padding: var(--button-padding); text-align: center; text-decoration: none; font-size: var(--font-regular-large); font-weight: 600; cursor: pointer; transition: var(--transition-background); margin-top:1lh; border-bottom-right-radius:var(--button-radius); }
.button-alt { background: var(--white); color:var(--black); border-bottom:3px solid var(--green); }
.button-small { font-size: var(--font-small);  }
.button-blue { background-color: var(--blue); border-color: var(--navy); color:var(--white);}

/* Swiper */
.swiper { z-index:0; }
.swiper-pagination { position: relative; margin-top: 0; white-space: nowrap; }
.swiper-button-lock { display: none; }
.swiper-button-prev, .swiper-button-next { top: 0; width: 44px; height: 44px; display: flex; margin: auto; cursor: pointer; }
.swiper-button-prev.swiper-button-lock, .swiper-button-next.swiper-button-lock { display: none; }
.swiper-button-prev { left: -120px; }
.swiper-button-next { right: -120px; }
.swiper-button-prev:after, .swiper-button-next:after { display: none; }
.swiper-scrollbar { background: var(--navy); position: relative !important; }
.swiper-button-prev.side { right: calc( var(--padding) + 44px); left: auto; }
.swiper-button-next.side { right:var(--padding); }

/* Header */
.header { left:0; right:0; top:0; padding:0 var(--padding); height:var(--header-height); line-height: var(--header-height); z-index: 2; transition: var(--transition-header); }
.header-logo { margin: calc(calc(var(--header-height) - var(--logo-height )) / 2 ) 0; width: var(--logo-width); height: var(--logo-height); }
.header.is-sticky { background-color: var(--white); box-shadow: -1px 1px 49px -31px rgba(0,0,0,0.50); }

/* Menu */
.header-menu { margin-left: auto; }
.header-menu-item { margin-left:var(--menu-spacing); }
.header-menu-item.is-active { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 6px; text-decoration-thickness: 3px;}
.header-menu-item.is-active .header-menu-item-button { text-decoration: none; }
.header-menu-item-button { margin-left: 20px; }
.header-menu-item-button span { padding: 13px 24px 11px 24px; transition: var(--transition-button); color:var(--white); border-bottom:3px solid var(--navy); }
.header-menu-item-button-blue { margin-left:var(--menu-spacing); }
.header-menu-item-button-blue span { background-color: var(--blue); border-bottom-right-radius: var(--button-radius); }
.header-menu-item-button-green span { background-color: var(--green); border-top-left-radius: var(--button-radius); }

/* Submenu */
.header-submenu { z-index: 1; top:var(--header-height); left:0; right:0; padding-top:var(--padding-small); padding-bottom:var(--padding-small); opacity: 0; visibility: hidden;}
.header-submenu .container { grid-gap:20px; }
.header-submenu-icon { width: 44px; height: 44px; margin-bottom: 10px; fill:currentColor; }

/* Hero */
.layout-hero { margin-top: calc(-1 * var(--padding-body)); line-height: 1.3; z-index: 0; overflow: hidden; padding: var(--padding-body) 0 var(--padding-body) 0; max-height: 100dvh; }
.layout-hero article { margin-bottom: auto; position: relative; z-index:3; margin-top:auto; max-width: 50vw; padding-right: var(--padding); padding-top:var(--padding); }
.hero-rating { margin: 20px 0; }
.hero-rating-stars svg { width: var(--icon-size); height: var(--icon-size); margin-right: 10px; }
.hero-rating-label { line-height: var(--icon-size); }
.hero-gradient { position: absolute; top: 0; bottom: 0; right: 0; left: 0; background: linear-gradient(165deg,rgba(206, 213, 227, 1) 35%, rgba(103, 179, 46, 0.69) 57%, rgba(8, 32, 72, 1) 87%); mix-blend-mode: color; z-index: 1; mask-image: linear-gradient(165deg,transparent 40%,black 100%); -webkit-mask-image: linear-gradient(165deg,transparent 40%,black 100%);}
.hero-image { position: absolute; bottom: 0; right: 0; top: calc( var(--header-height) * 2 ); max-width:50vw; z-index: 2; background: transparent; overflow: visible; }
.hero-image img { border-top-left-radius: 60%; }
.hero-image:before, .hero-image:after { position: absolute; content:''; aspect-ratio: 1/1; bottom: 0; opacity: 0.5; }
.hero-image:after { background:var(--blue); width: 50%; right:0; border-bottom-right-radius: 60%;  }
.hero-image:before { background:var(--navy); width: 25%; right: calc(100% + 32px); border-top-left-radius: 60%; }


/* Standfirst */
.layout-titles { line-height: 1.3;  padding: var(--padding-body) 0 var(--padding-body) 0; margin-top: calc(-1 * var(--padding-body)); z-index: 0; overflow:hidden; }
.layout-titles h2 { max-width: 70%; text-wrap: auto; position: relative; z-index: 1; }
.layout-titles .case-study-services { margin-top:20px; row-gap: 10px; }
.titles-icon { top:-10%; height: 120%; right:-10%; aspect-ratio: 1/1; transform:rotate(-15deg); z-index: -1; }
.titles-icon svg { fill:var(--green); opacity: 0.2; width: 100%; height: 100%; }
.titles-icon:after { content:''; position: absolute; top:0; left:0; right:0; bottom:0; background: linear-gradient(-180deg,rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 1) 80%); }

/* Partners  : Page */
.partner-image { aspect-ratio: 16/9; transition: var(--transition-background);  }
.partner-image img { object-fit: contain; padding: 20px; }
.partner-filters label { line-height: 30px; margin: 0 20px 20px 0; width: 100%; }
.partner-filters .roundel { margin-bottom: 10px; }
.layout-partners.is-filtered .card-partner { display: none; }
.layout-partners.is-filtered .card-partner.is-visible { display: block; }

/* Partners : layout */
.layout-featured-partners .partner-logo { filter: grayscale(100%); height: 40px; display: block; padding:0 var(--grid-gap-small) 0 0; border-right: 1px solid var(--light-grey); }
.layout-featured-partners .image { height: 40px; background-color: transparent; width: auto;}
.layout-featured-partners .swiper { width: 100%; }
.layout-featured-partners .swiper-slide { width: auto; }
.layout-featured-partners .swiper-wrapper { transition-timing-function: linear !important; }
.layout-featured-partners.has-no-overflow .partner-logo.is-last { border:0; }

/* Card */
.card-image img { filter:grayscale(100%); transition: all ease-in-out 0.3s; z-index: 1; }
.card-image:after { content:''; position: absolute; top:0; left: 0; right:0; bottom: 0; background: radial-gradient(circle, var(--light-grey) 39%, rgba(8,32,72,0.3) 100%); transform: scale(2.56); transition: var(--transition-transform); }
.card .card-image { border-top-left-radius: var(--border-radius); }
.card:nth-of-type(2n) .card-image { border-bottom-right-radius: var(--border-radius); border-top-left-radius: 0; }
.card:hover .card-image img { filter:grayscale(0); transform: scale(1.1); }
.card:hover .card-image:after { transform:scale(1.5); }

/* Services */
.layout-services { padding: 0; }
.layout-services .grid { grid-gap:0; }
.card-service { border-bottom: 1px solid rgba(255,255,255,0.5); border-right: 1px solid rgba(255,255,255,0.5); padding: var(--padding) var(--padding) calc(var(--padding) * 1.5) var(--padding); }
.card-service-link { max-width: calc(calc(var(--container) - calc( var(--padding) * 4 )) / 2 ); display: block; }
.card-service:nth-last-of-type(odd) { border-right-color: transparent; }
.card-service-icon { color: var(--white); fill: currentcolor; aspect-ratio: 1/1; width: 80px; margin: 0 0 20px 0;}
.card-service.is-last { border-bottom: 0; }

/* News */
.news-image { aspect-ratio: 16/9; }

/* Testimonials */
.testimonial cite { display: block; }
.testimonial cite:before { content: ""; width: 72px; height: 1px; background-color: var(--green); margin: 1lh auto 1lh auto; display: block; }
.testimonial p { line-height: 1.25; }
.testimonial-logo  { max-width: 300px; width: 100%; margin-left: auto; margin-right: auto; background-color: transparent; margin-top: -30px;}
.testimonial-person.has-no-logo { min-height: 185px; }
.testimonial-cite { margin-top: 20px; }
.layout-testimonials .swiper-button-prev, .layout-testimonials .swiper-button-next { bottom:200px; }

/* Text */
.layout-text p:first-child { font-size: var(--font-regular-large); }
.layout-text li p:first-child { font-size: var(--font-regular); }
.layout-text.one-column article { max-width: 660px; }
.layout-text.two-columns article { columns: 2; column-gap: var(--grid-gap); }
.layout-text.two-columns p { break-inside: avoid; margin-bottom: 0; padding-bottom: 0.5lh; }
.layout-text.two-columns .button { column-span: all;}
.layout-text a:not(.button) { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 1px; text-decoration-color: var(--green); }

/* Text : Secondary Pages */
.layout-text .is-secondary { text-wrap: auto; }
.layout-text .is-secondary p:first-child { font-size: var(--font-regular); }

/* Text & Image */
.layout-text-image { z-index: 0; padding-top:var(--padding-large); overflow: hidden; }
.layout-text-image:after { aspect-ratio: 1/1; background-image: url('../images/marque.svg'); background-size: cover; position: absolute; bottom: -10px; left: -10px; top:-10px; content: ''; z-index: -1; opacity: 0.2; }
.layout-text-image .image { aspect-ratio: 4/3; margin-top: auto; margin-bottom: auto; }
.layout-text-image h2 { margin-bottom: 20px; }
.layout-text-image p:first-child { font-size: var(--font-regular-large); }
.text-image-inner { position: relative; z-index: 1; padding: var(--padding-large);  }

/* HTML */
.layout-html table { font-size: var(--font-small); width: 100%; border-collapse: collapse; }
.layout-html th { padding: 20px 10px 20px 0; text-align: left; }
.layout-html td { padding: 10px 10px 10px 0; }
.layout-html th, .layout-html td { border-bottom: 1px solid var(--light-grey); vertical-align: top; }
.layout-html th:last-of-type, .layout-html td:last-of-type { text-align: right; }
.layout-text + .layout-html { margin-top: calc(-1 * var(--margin-bottom)); }


/* Features */
.feature { border-bottom:3px solid var(--blue); }
.feature:nth-of-type(odd)  {border-bottom-right-radius: 50px;}
.feature:nth-of-type(even)  {border-top-left-radius: 50px;}

/* Stats */
.layout-stats h2 { margin-bottom: var(--padding-small); }
.stats-container { padding-top:var(--padding); padding-bottom: var(--padding); }
.card-stat { border-top-left-radius: var(--border-radius); border-bottom: 3px solid var(--orange); }
.card-stat:nth-of-type(2n) { border-bottom-right-radius: var(--border-radius); }
.card-stat svg { width: var(--icon-size); height: var(--icon-size); margin: 0 auto 20px auto; display: block; fill: currentcolor; }

/* Awards */
.card-award h3 { margin-bottom: 10px; }
.card-award-logo { margin-bottom: 20px; aspect-ratio: 16/9; }
.card-award-logo img { object-fit: contain; padding: var(--padding-small); }

/* Case Studies */
.case-study-logo { aspect-ratio: 16/9; margin-bottom:30px; }
.case-study-logo img { object-fit: contain; padding: 20px; }

/* Case Studies : Wide */
.layout-related-case-studies h2 { margin-bottom: var(--grid-gap); }
.card-case-study-wide { grid-gap:0; }
.case-study-wide-content { border-bottom-right-radius: var(--border-radius); padding: var(--padding) calc( var(--padding) + 40px); } 
.case-study-wide-logo {  border-top-left-radius: var(--border-radius); margin-right: -40px; margin-top: auto; margin-bottom: auto; }

/* Contact */
.layout-form h2 { margin-bottom: var(--padding); }
.contact-grid { padding:var(--padding-large); border-top-left-radius: var(--border-radius); }
.contact-aside { padding:var(--padding) 0; border-bottom-right-radius: var(--border-radius); margin-bottom: auto; top:calc( var(--header-height) + var(--padding)); }
.contact-details { padding: var(--padding-small); }
.contact-details .icon-logo-no-marque { width: 70px; height: 28px; margin-bottom: 0.5lh; margin-bottom: 40px; }
.contact-details address { margin-bottom:var(--padding-small); }
.contact-link svg { width: 20px; height: 20px; margin: auto 10px auto 0; }

/* Contact : Reviews */
.contact-reviews h3 { font-family: var(--font-sans-serif); line-height: 1.5; }
.contact-reviews blockquote { text-wrap: auto; }
.contact-reviews .icon-google { width: var(--icon-size); height:var(--icon-size); margin: 20px auto;}
.contact-review-inner { overflow: hidden ;}
.review { padding: 20px; }
.review-rating { grid-gap:5px; max-width: 200px; margin: 1lh auto auto auto; }
.review-rating svg { width: 30px; height: 30px; padding: 5px; }

/* Call to Action */
.layout-call-to-action { background-image: radial-gradient(at 0% 100%, hsla(214,47%,39%,1) 0px, transparent 50%), radial-gradient(at 72% 100%, hsla(217,80%,15%,1) 0px, transparent 50%); padding-top: 0; padding-bottom: 0; }
.layout-call-to-action .container { padding-top:var(--padding-large); padding-bottom:var(--padding-large); }
.call-to-action-image { background: transparent; aspect-ratio: 1/1; right:var(--padding); bottom: 0; top:-20px; position: absolute; max-width: 35vw; pointer-events: none;}
.call-to-action-image img { top:auto; bottom:0; height: auto; }

/* Team */
.team-member.has-image { grid-template-columns: var(--team-image-width) auto; grid-gap: var(--grid-gap-small); }
.team-member h3 { margin-bottom: 10px; }
.team-member h4 { margin-bottom: 20px; }
.team-photo { aspect-ratio: 1/1; width: var(--team-image-width); margin: 0 auto 20px auto; border-radius: 50%; background-color: var(--green); }
.team-photo img { filter:grayscale(100%); }

/* Video */
.layout-video video { width: 100%; height: auto; }

/* News : Article */
.layout-article-hero { line-height: 1.3; padding: var(--padding-body) 0 var(--padding) 0; margin-top: calc(-1 * var(--padding-body)); z-index: 0; overflow: hidden; min-height: 80vh; }
.layout-article-hero h2 { font-family: var(--font-sans-serif); line-height: 1.7; font-weight: normal; max-width: 680px; }

.article-image { top:calc(var(--header-height) * 2); right:0; bottom:0; aspect-ratio: 1/1; position: absolute; border-top-left-radius: 50%;}
.article-content h2 { font-size: var(--font-large); }
.article-content h3 { font-size: var(--font-medium); }
.article-content h1, .article-content h2, .article-content h3 { font-family: var(--font-heading); font-weight: bold; margin-bottom: 0.5lh; margin-top:1lh; color:var(--navy); }
.article-content h2:first-child { margin-top:0; }
.article-author { margin: 20px 0 40px; }
.article-author-role { font-weight: normal; }
.article-byline { margin: var(--article-byline-margin) 0 var(--article-byline-margin) 0; line-height: var(--article-byline-height); }
.article-byline span:after { content:''; height: 5px; width: 5px; border-radius: 5px; background-color: var(--green); margin: auto var(--article-byline-spacer-margin); display: inline-block; vertical-align: middle; }
.article-byline-image { width: var(--article-byline-height); height: var(--article-byline-height); border-radius: 50%; margin-right: var(--article-byline-margin); vertical-align: top; }
.author-photo { width: 100px; height: 100px; border-radius: 50%; margin-bottom: 20px; }

/* News */
.card-news-image { aspect-ratio: 1/1; }
.card-news-image img { filter:grayscale(100%) }
.card-news-inner p { margin-bottom: 1lh; }

.card-news .button { margin-top:auto; margin-right: auto; }
.card-news { --article-byline-height: 30px; --article-byline-margin: 10px; --article-byline-spacer-margin: 10px; border-top-left-radius: var(--border-radius); overflow: hidden;}

/* News : Featured Articles */
.layout-featured-news .swiper { border-top-left-radius: var(--border-radius); overflow: hidden;}

/* Pagination */
.pagination a { line-height: 44px; width: 44px; height:44px; margin: 0 10px; border-radius: 50%; }
.pagination a.is-current { background-color: var(--green); color: var(--white); pointer-events: none; }

/* Footer */
.footer { line-height: 2; padding-top:var(--padding); padding-bottom: var(--padding); }
.footer-social { margin-left: auto; }
.footer-social-link { margin-left: 20px; }
.footer-social-link { padding: 10px; width: var(--icon-size); height: var(--icon-size); }
.footer-menu-secondary { line-height: var(--icon-size); gap:0px 20px; }
.footer-menu-secondary-item.is-active { text-decoration: underline; text-decoration-color: var(--green); text-underline-offset: 6px; text-decoration-thickness: 3px;}
.footer-menu-item { text-wrap: auto; }
.footer-menu-item.is-active:before { content:''; width: 6px; height: 6px; background-color: var(--green); margin: 11px 6px 11px 0; display: inline-flex; vertical-align: top; }
.footer-awards { gap:var(--grid-gap-small);}
.footer-award-logo { height: 100px; width: auto; margin-bottom: auto; background-color: transparent;}

@media (hover: hover) {

  /* Header */
  .header-menu-item { transition: var(--transition-color); }
  .header-menu-item:not(.is-active):hover { color:var(--green); }

  /* Testimonails */
  .swiper-button-prev, .swiper-button-next { transition: var(--transition-fade); }
  .swiper-button-prev:hover, .swiper-button-next:hover { opacity: 0.5; }

  /* Featured Partners */
  .layout-featured-partners .partner-logo { transition: filter ease-in-out 0.3s; }
  .layout-featured-partners .partner-logo:hover { filter: grayscale(0); }

  /* News */
  .card-news-image img { transition: filter 0.3s ease; }
  .card-news:hover .card-news-image img { filter: grayscale(0); }

  /* Team */
  .team-member img { transition: filter ease-in-out 0.3s; }
  .team-member:hover img { filter:grayscale(0); }

  /* Footer */
  .footer a { transition: var(--transition-fade); }
  .footer a:not(.is-active):hover { opacity:0.6; } 
}


/* Desktop */
@media (min-width: 1200px) {


    /* Structure */
    .d\:col-span-2 { grid-column: span 2; }
    .d\:col-span-3 { grid-column: span 3; }
    .d\:col-span-4 { grid-column: span 4; }
    .d\:grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }


    /* Header */
    .button-menu, 
    .menu-mask { display: none; } 

    /* Titles */
    .layout-titles + .layout-text { margin-top: calc(-1 * calc(var(--padding-body) / 2)); }

    /* Text & Image : Text Left */
    .layout-text-image.has-text-left .grid { grid-template-columns: 40% 60%; }
    .layout-text-image.has-text-left .image { border-bottom-right-radius: var(--border-radius); }
    .layout-text-image.has-text-left .text-image-inner { margin: auto var(--text-image-margin) auto auto; border-top-right-radius: var(--border-radius);}
    .layout-text-image.has-text-left .image { order:2; }

    /* Text & Image : Text Right */
    .layout-text-image.has-text-right .grid { grid-template-columns: 60% 40%; }
    .layout-text-image.has-text-right .image { border-top-left-radius: var(--border-radius); }
    .layout-text-image.has-text-right .text-image-inner { margin: auto auto auto var(--text-image-margin) ; border-bottom-left-radius: var(--border-radius); }

    /* Testimonials */
    .testimonial span { margin-top:-15px; }

    /* Services */
    .card-service:nth-last-of-type(even) .card-service-link { margin-left: auto; }
    .card-service:nth-last-of-type(odd) .card-service-link { margin-right: auto;  }

    /* Partners */
    .layout-text + .layout-featured-partners { margin-top: calc(-1 * calc(var(--margin-bottom) / 2)); }


}



/* Tablet */
@media (max-width: 1200px) {

    :root {

        /* Structure - 75% Reduction */
        --header-height:75px;
        --logo-width: 120px;
        --logo-height: 30px;
        --grid-gap: 60px;
        --padding:45px;
        --padding-large:60px;
        --margin-bottom: 75px;

        /* Font Sizes - 80% */
        --font-x-large: 42px;
        --font-large: 29px;


        /* Team */
        --team-image-width: 150px;

        /* Text & Image */
        --text-image-margin: -100px;

    }

    /* Structure */
    .t\:grid-cols-1	{ grid-template-columns: repeat(1, minmax(0, 1fr)); } 
    .t\:grid-cols-2	{ grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .t\:grid-cols-3	{ grid-template-columns: repeat(3, minmax(0, 1fr)); } 
    .t\:col-span-all { grid-column: 1 / -1; }
    .t\:col-span-1 { grid-column: span 1; }
    .t\:col-span-2 { grid-column: span 2; }

    /* Header */
    .button-menu { display: flex; width: var(--icon-size); height: var(--icon-size); margin: auto 0 auto auto; padding: 12px; }
    .button-menu span { width: 20px; height: 2px; background-color: currentColor; transition: var(--transition-transform), var(--transition-fade); }
    .button-menu span:nth-of-type(1) { transform-origin: top left; }
    .button-menu span:nth-of-type(2) { margin:auto; }
    .button-menu span:nth-of-type(3) { transform-origin: bottom left; } 
    .header-menu { position: fixed; top: var(--header-height); right: -10px; flex-direction: column; bottom: 0; background-color: var(--navy); color: var(--white); line-height: 3; max-width: 320px; width: 100%; padding: 40px 0; transition: var(--transition-transform); transform: translateX(100%); z-index: 2; }
    .header-menu-item-button { margin: 0 var(--menu-spacing) 16px var(--menu-spacing); }
    .header-menu-item-button span { line-height: normal; display: block; }
    .header-menu-item-button-blue { margin-top: auto; }
    .show-menu .header-menu { transform: translateX(0%); }
    .show-menu .header { background-color: var(--white); }
    .show-menu .button-menu span:nth-of-type(1) { transform: rotate(45deg) translateX(4px) translateY(-1px); }
    .show-menu .button-menu span:nth-of-type(2) { opacity: 0; }
    .show-menu .button-menu span:nth-of-type(3) { transform: rotate(-45deg) translateX(4px) translateY(1px); }

    /* Menu : Mask */
    .menu-mask { top: var(--header-height); left:0; right: 0; bottom: 0; background-color: rgba(255,255,255,0.5); opacity: 0; visibility: hidden; transition: var(--transition-fade); pointer-events: none; z-index: 1; }
    .show-menu .menu-mask { opacity: 1; visibility: visible; pointer-events: auto; backdrop-filter: blur(5px); }

    /* Hero */
    .layout-hero article { max-width: 60vw; }
    .hero-image { max-width: none; top: auto; width: 45vw; height: 45vh; }

    /* Titles */
    .layout-titles { padding-bottom: calc(var(--padding-body) / 2); }
    .titles-icon { max-width: 60vw; max-height: 60vw; top: 0%; bottom: 0; height: auto; width: auto; }
    
    /* Testimonial */
    .testimonial span { margin-top: -10px; }

    /* Call to action */
    .layout-call-to-action article { max-width: 65vw; }

    /* Contact */
    .contact-grid { padding:var(--padding); }

    /* News */
    .layout-article-hero { padding-top: calc(var(--header-height) * 2); min-height: 0; padding-bottom:calc( 2 * var(--padding)); }
    .card-news-image { height: 100%; aspect-ratio: auto; }

    /* News Listing */
    .article-image { display: none; }
     
    /* Testimonials */
    .layout-testimonials blockquote { padding-left: var(--padding); padding-right: var(--padding); }
    .swiper-button-next { right:var(--padding); }
    .swiper-button-prev { left: var(--padding); }

    /* Footer */
    .footer-grid { grid-gap: 20px; }
    .footer-menu { margin-bottom: 0; }
    .footer-menu-secondary, .footer-social  { grid-row: 4; }
    .footer-awards { grid-column: span 1; justify-content: flex-start; }
    .footer-award-logo { height:75px; }

}

/* Desktop & Tablet */
@media (min-width: 769px) {

    /* Text & Image : Text Left */
    .layout-text-image.has-text-left .grid { grid-template-columns: 40% auto; }
    .layout-text-image.has-text-left .image { border-bottom-right-radius: var(--border-radius); }
    .layout-text-image.has-text-left .text-image-inner { margin: auto var(--text-image-margin) auto auto; border-top-right-radius: var(--border-radius);}
    .layout-text-image.has-text-left .image { order:2; }

    /* Text & Image : Text Right */
    .layout-text-image.has-text-right .grid { grid-template-columns: auto 40%; }
    .layout-text-image.has-text-right .image { border-top-left-radius: var(--border-radius); }
    .layout-text-image.has-text-right .text-image-inner { margin: auto auto auto var(--text-image-margin) ; border-bottom-left-radius: var(--border-radius); }

}

/* Mobile */
@media (max-width: 768px) {

    :root {

        /* Font Sizes - 50% */
        --font-x-large: 26px;
        --font-large: 19px;

        /* Font Sizes - 75% */
        --font-medium: 18px;
        --font-regular-large:16px;
        --font-regular:14px;
        --font-small: 14px;
        --font-x-small: 12px;

        /* Structure - 50% Reduction */
        --padding:30px;
        --padding-large:40px;
        --padding-body:calc(var(--header-height) * 2);
        --grid-gap-small:20px;
        --grid-gap: 40px;
        --margin-bottom:50px;

        /* Team */
        --team-image-width: 75px;
    }

    /* Structure */
    .m\:grid-cols-1	{ grid-template-columns: repeat(1, minmax(0, 1fr)); } 
    .m\:grid-cols-2	{ grid-template-columns: repeat(2, minmax(0, 1fr)); } 
    .m\:col-span-all { grid-column: 1 / -1; }
    .underline { text-underline-offset: 4px; }

    /* Swiper */
    .swiper-button-next.side, .swiper-button-prev.side { top: -12px; }

    /* Hero */
    .layout-hero { height: 90dvh; }
    .layout-hero .button { margin-top: 0; }
    .layout-hero article { margin-top: 0; max-width: 80vw; padding-top: 0; padding-right: 0; }
    .hero-rating { flex-direction: column; }
    .hero-rating-stars svg { width: 22px; height: 22px; margin-right: 5px; }
    .hero-image { max-width: none; width: 60vw; height: 60vw; top: auto; }

    /* Titles */
    .layout-titles { margin-bottom: var(--margin-bottom); padding-bottom: 0; }
    .layout-titles h2 { max-width: 100%;}

    /* Stats */
    .card-stat { --icon-size:80px  }

    /* Form */
    .layout-form { --icon-size:80px; margin-bottom: 0; }

    /* Text */
    .layout-text.two-columns article { columns: auto; }

    /* Contact */
    .contact-grid { margin-left: calc( -1 * var(--padding) ); margin-right: calc( -1 * var(--padding) ); padding-top: var(--padding-large); }

    /* News */
    .card-news-image { height: auto; aspect-ratio: 1/1; }
    .layout-article-hero { padding-bottom: 0; }
    .article-image { display: block; position: relative; top: auto; margin-top: var(--padding); margin-left: var(--padding);}

    /* Team */
    .team-photo { margin-top: -12px; }

    /* Case studies */
    .case-study-wide-logo { margin-right: 0; }
    .case-study-wide-content { padding: var(--padding); }

    /* Text & Image */
    .layout-text-image .grid { grid-template-columns:repeat(1, minmax(0, 1fr)); grid-gap:0; }
    .layout-text-image .image { border-top-left-radius: var(--border-radius); }
    .text-image-inner { border-bottom-right-radius: var(--border-radius); padding: var(--padding); }

    /* Testimonail */
    .testimonial span { margin-top: -5px; }

    /* Footer */
    .footer-social { margin-left: -10px; }
    .footer-social-link { margin-right: 20px; margin-left: 0; }
    .footer-menu-secondary { grid-row:5; font-size: var(--font-x-small); }
}

@media (max-width: 500px) {

    /* Call to action */
    .layout-call-to-action { aspect-ratio: auto; }
    .layout-call-to-action .container { height: 100%; }
    .layout-call-to-action article { max-width: none; }
    .call-to-action-image { position: relative; margin-left: auto; margin-bottom: calc(-1 * var(--padding-large)); margin-right: calc(-1 * var(--padding-large)); margin-top: var(--padding); top: auto; width: 90%; max-width: none; }

    /* News : Author Byline */
    .layout-article-hero .article-byline { display: grid; grid-template-columns: 70px auto; line-height: 30px; }
    .layout-article-hero .article-byline span:after { display: none; }
    .layout-article-hero .article-byline-image { height: 60px; width: 60px; grid-row: span 2; }

}