@charset "utf-8";
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;}
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; }

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

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }
.loading { animation:fadeOut ease-in 1; animation-fill-mode: forwards; animation-duration: 0.5s; pointer-events: none; }
.fadein { opacity: 0; animation:fadeIn ease-in 1; animation-fill-mode: forwards; animation-duration: 1s; }
.hidden { opacity: 0; transform: translate3d(0,10px,0); }
.inview { opacity: 1; transform: translate3d(0,0,0); transition: all 1s; }
.hide { opacity: 0; }

:root {
  font-family: Inter, sans-serif;
  font-feature-settings: 'liga' 1, 'calt' 1; /* fix for Chrome */
  --dark: hsl(0, 0%, 5%);
  --dark-5: hsla(0, 0%, 5%, 0.05);
  --dark-10: hsla(0, 0%, 5%, 0.1);
  --dark-25: hsla(0, 0%, 5%, 0.25);
  --dark-50: hsla(0, 0%, 5%, 0.5);
  --dark-75: hsla(0, 0%, 5%, 0.75);
  --shade1: hsl(30, 8%, 97%);
  --shade2: hsl(30, 8%, 90%);
  --shade3: hsl(30, 8%, 85%);
  --shade4: hsl(30, 8%, 80%);
  --colour: hsl(0, 0%, 10%);
  --padding: 20px;
  --padding-double: calc(var(--padding) * 2);
  --padding-content: calc(var(--padding) * 4);
  --radius: 3px;
  --font-size: 18px;
  --h1-size: 70px;
  --h3-size: 45px;
  --h4-size: 35px;
  --h5-size: 24px;
  --h6-size: var(--font-size);
  --font-margin: 1.5em;
  --logo: 100px; 
  --column: 320px;
  --header: 80px;
}

html { height: 100%; }
body { --bg: var(--shade1); background-color: var(--bg); color: var(--colour); font-size: var(--font-size); line-height: 1; height: 100%; }
main { flex: 1; padding: 320px var(--padding) var(--padding); }
.layout { min-height: 100vh; display: flex; flex-direction: column; }
.outer { align-items: flex-start; flex-wrap: wrap; }
.inner { box-sizing: border-box; margin: 0 auto; max-width: 1300px; width: 100%; }
.flex { display: flex; flex-wrap: wrap; }
.padding { padding: 0 var(--padding); }

h1 { color: var(--dark-50); font-family: "Inter Display", sans-serif; font-size: var(--h1-size); font-weight: 500; line-height: 1.1; margin: 0; }
h2 { color: var(--dark); font-family: "Inter Display", sans-serif; font-size: var(--h1-size); font-weight: 500; line-height: 1.0; margin: 0; }
h3 { color: var(--dark); font-family: "Inter Display", sans-serif; font-size: var(--h3-size); font-weight: 500; line-height: 1.0; margin: 0 0 0.5em; }
h4 { color: var(--dark); font-family: "Inter Display", sans-serif; font-size: var(--h4-size); font-weight: 500; line-height: 1.2; margin: 0 0 1em; }
h5 { color: var(--dark); font-family: "Inter Display", sans-serif; font-size: var(--h5-size); font-weight: 500; line-height: 1.1; margin: 0 0 0.4em; }
h6 { color: var(--dark); font-size: var(--h6-size); font-weight: 400; line-height: 1.1; margin: 0; }
p { font-size: var(--font-size); line-height: 1.5; margin: 0 0 var(--font-margin); }
strong { font-weight: 600; }

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

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

a.button, button.button, .button {
  background-color: var(--dark-5); color: var(--colour); font-size: var(--font-size); line-height: 1; padding: 0.85em 1em;
  border: none; border-radius: var(--radius); box-sizing: border-box; display: inline-flex; align-items: center; text-align: left; text-decoration: none !important;
}

a.tag, button.tag, .tag { --font-size: 80%; color: var(--dark-50); font-weight: 400; line-height: 1; padding: 0.6em 0.8em; }
a.tag.on, button.tag.on { background-color: var(--dark-10); color: var(--dark); }

@media (hover: hover){
  a.button:hover, button.button:hover { background-color: var(--dark-10); color: var(--colour); opacity: 1 !important; }
  a.tag:hover { background-color: var(--dark-10); color: var(--dark); }
}

.dropdown { position: relative; }
.dropdown .toggle { --font-size: 90%; box-sizing: border-box; cursor: pointer; width: var(--column); }
.dropdown .toggle.on { background-color: var(--dark-10); }
.dropdown .toggle svg { opacity: 0.5; margin-left: auto; }
.dropdown nav { display: none; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: var(--radius); box-sizing: border-box; position: absolute; top: 100%; left: 0; margin-top: 5px; padding: 1em; min-width: var(--column); z-index: 1000; }
.dropdown nav .flex { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dropdown nav .tag { --font-size: 95%; }
.dropdown nav .tag.on { pointer-events: none; }

@media (max-width:1800px) {
  :root {
    --h1-size: 60px;
    --h3-size: 40px;
    --h4-size: 30px;
    --h5-size: 20px;
  }
}
@media (max-width:1600px) {
  :root {
    --font-size: 16px;
    --h1-size: 50px;
    --h5-size: 18px;
  }
}
@media (max-width:1300px) {
  :root {
    --h3-size: 35px;
    --header: 76px;
  }
  main { padding-top: 240px; }
}
@media (max-width:1080px) {
  :root {
    --padding: 10px;
    --font-size: 15px;
    --h1-size: 33px;
    --h3-size: 25px;
    --h4-size: 20px;
    --h5-size: 17px;
    --h6-size: 14px;    
    --logo: 80px;
    --header: 56px;
  }
  main { padding-top: 150px; padding-bottom: var(--padding-content); }
}
@media (max-width:600px) {
  :root {
    --h1-size: 30px;
    --h3-size: 23px;
    --h5-size: 16px;
    --h6-size: 13px;
    --logo: 50px;
    --header: 48px;
  }
}
@media (max-width:400px) {
  :root {
    --h1-size: 28px;
  }
  main { padding-top: 120px; }
}

.form { --font-size: 16px; --field-padding: 12px 12px; --field-margin: 15px; --field-background: var(--dark-5); --active-background: var(--dark-10); }
.form .freeform-form .grid-margin-x { padding: 8px 0; }
.form label { color: var(--colour); display: block; font-weight: normal; line-height: 1; margin: 0 0 0.5em; }
.form input { background: var(--field-background); border: none; border-radius: var(--radius); box-sizing: border-box; color: var(--field-colour); font-family: var(--regular); font-size: var(--font-size); padding: var(--field-padding); width: 100%; transition: all .1s ease-out; }
.form textarea { background: var(--field-background); border: none; box-sizing: border-box; border-radius: var(--radius); color: var(--field-colour); font-family: var(--regular); font-size: var(--font-size); height: 100px; padding: var(--field-padding); width: 100%; transition: all .1s ease-out; }
.form select { background: var(--field-background); border: none; border-radius: var(--radius); box-sizing: border-box; color: var(--field-colour); font-family: var(--regular); font-size: var(--font-size); padding: var(--field-padding); width: 100%; transition: all .1s ease-out; }
.form input:focus,
.form textarea:focus,
.form select:focus { background: var(--active-background); outline: none; }

.form button.button { font-size: var(--font-size); }

.form input::-webkit-input-placeholder { color: var(--field-colour); opacity: 0.5; }
.form input::-moz-placeholder { color: var(--field-colour); opacity: 0.5; }
.form input:-ms-input-placeholder { color: var(--field-colour); opacity: 0.5; }
.form input:-moz-placeholder { color: var(--field-colour); opacity: 0.5; }

@media (hover: hover) {
  .form input:hover,
  .form textarea:hover,
  .form select:hover { background: var(--active-background); outline: none; }
}

.callout { background-color: var(--dark-5); border-radius: var(--radius); font-weight: 500; margin: 0 0 10px; padding: 1em; }
.freeform-form ul.errors { --font-size: 80%; list-style: none; margin: 5px 0 0; }
.freeform-form ul.errors li { margin: 0; }
button.freeform-processing { pointer-events: none; }
button.freeform-processing:before { border-color: transparent transparent var(--dark-10) var(--dark-10) !important; }

/* HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#site-header { background: var(--bg); position: fixed; top: 0; left: 0; width: 100%; z-index: 1; }
#site-header .outer { display: flex; height: var(--logo); padding: var(--padding); }
#site-header #logo a { position: relative; }
#site-header #logo * { transition: all .1s ease-out; }
#site-header #logo svg { height: var(--logo); width: auto; opacity: 1; visibility: visible; transition: opacity 0.3s ease, visibility 0.3s ease; }
#site-header #logo svg rect { fill: var(--dark-5); }
#site-header #logo svg path { fill: var(--dark); transition: all 0.3s ease; }
#site-header #logo svg,
#site-header #logo span { transition: all 0.3s ease; position: absolute; top: 0; left: 0; }
#site-header #logo span { opacity: 0; visibility: hidden; background-color: var(--dark-5); white-space: nowrap; }

#site-header nav { display: flex; gap: var(--padding); margin-left: auto; }
#site-header .link {
  background-color: transparent; color: var(--colour); font-family: "Inter Display", sans-serif; font-size: 18px; font-weight: 500; line-height: 1; height: 40px; padding: 0 12px;
  border: none; border-radius: var(--radius); box-sizing: border-box; display: inline-flex; align-items: center; text-decoration: none !important;
}
#site-header .link svg { height: 80%; width: auto; }

#site-header nav a.on { background-color: var(--dark-10); color: var(--colour); }

body.scrolled #site-header { border-bottom: 1px solid var(--dark-5); }
body.scrolled #site-header .outer { height: auto; }
body.scrolled #site-header #logo svg { opacity: 0; visibility: hidden; }
body.scrolled #site-header #logo span { opacity: 1; visibility: visible; }

body.no-scrolled #site-header .outer { height: auto; }
body.no-scrolled #site-header #logo svg { display: none; }
body.no-scrolled #site-header #logo span { opacity: 1; visibility: visible; }

@media (hover: hover){
  #site-header a.link:hover { background-color: var(--dark-10); color: var(--colour); }
  #site-header #logo a:hover svg rect { fill: var(--dark-10); }
  #site-header #logo span:hover { background-color: var(--dark-10); }
}

@media (max-width: 1300px) {
  #site-header .link { font-size: 16px; height: 36px; padding: 0 10px; }
}
@media (max-width: 1080px) {
  #site-header .link { font-size: 15px; }
}
@media (max-width: 600px) {
  #site-header nav { gap: 5px; }
  #site-header .link { font-size: 14px; height: 30px; padding: 0 8px; }
}
@media (max-width: 400px) {
  #site-header nav { gap: 2px; }
  #site-header .link { font-size: 13px; padding: 0 6px; }
  #site-header .link svg { height: 70%; }
}

/* FOOTER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#site-footer { --colour: white; background-color: var(--dark); color: var(--colour); }
#site-footer .outer { display: flex; align-items: center; justify-content: space-between; padding: var(--padding); }
#site-footer p { display: inline-block; font-size: 16px; line-height: 1; margin: 0; }
#site-footer p.copyright { font-weight: 500; opacity: 0.85; }
#site-footer nav { display: flex; gap: var(--padding); margin-top: 10px; }
#site-footer nav a { display: inline-block; opacity: 0.5; }
#site-footer svg { height: 60px; width: auto; transition: all .1s ease-out; }
#site-footer svg path { fill: rgba(255,255,255,0.33); }

@media (hover: hover){
  #site-footer nav a:hover { opacity: 1; }
}

@media (max-width: 1300px) {
  #site-footer p { font-size: 14px; }
  #site-footer svg { height: 50px; }
}
@media (max-width: 600px) {
  #site-footer .outer { align-items: flex-start; padding-bottom: 40px; }
  #site-footer p.copyright { padding-top: 5px; }
  #site-footer nav { flex-direction: column; gap: 5px; }
  #site-footer nav a { padding: 5px 0; }
}

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

@media (hover: hover) {
  .page-content a:hover { opacity: 0.5; }
}

.page-content img { border-radius: var(--radius); height: auto; width: 100%; box-sizing: border-box; }
.page-content .video { overflow: hidden; position: relative; padding-top: 56.25%; border-radius: var(--radius); }
.page-content .video iframe { position: absolute; top: 0; right: 0; bottom: 0; left: 0; height: 100%; width: 100%; }

.page-content ul, 
.page-content ol { font-size: var(--font-size); line-height: 1.5; margin: 0 0 var(--font-margin) var(--font-margin); }
.page-content li ul,
.page-content li ol { font-size: 100%; margin: 0.5em 0 0.5em var(--font-margin); }
.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; }

#page-header { max-width: 1400px; padding-bottom: var(--padding-content); text-wrap: balance; }

.page-content .divider { border: 1px solid var(--dark-5); margin-bottom: var(--padding-content); }
.page-content .divider.dark { border-color: var(--dark); }

.content-block { margin-bottom: var(--padding-content); }
.content-block .text { max-width: 1000px; }
.content-block .text.align-centre { margin: 0 auto; text-align: center; }
.columns-block .cols { gap: var(--padding); }
.columns-block .cols .col { flex: 1; padding-right: var(--padding); }
.columns-block .cols .col .text { max-width: 900px; }

.heading-block .button { margin-top: var(--padding-double); }

@media (max-width:1600px) {
  #page-header { max-width: 1200px; }
}
@media (max-width: 1080px) {
  #page-header { max-width: 80%; }
  .columns-block .cols { display: block; }
  .columns-block .cols .col { max-width: 800px; padding-right: 0; }
  .columns-block .cols .col:not(:last-child) { margin-bottom: var(--padding-content); }
}
@media (max-width:800px) {
  #page-header { max-width: 100%; }
}

.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--padding); margin-bottom: var(--padding-content); }
.grid .item { display: block; min-width: 0; overflow: hidden; }
.grid .item figure { margin-bottom: 10px; }
.grid .item figure svg { fill: var(--dark-5); height: auto; width: 100%; }
.grid .item p { color: var(--dark-50); margin: 0; }

@media (hover: hover){
  .grid a.item:hover { opacity: 0.9; }
}

@media (max-width:1200px) {
  .grid { grid-template-columns: repeat(4, 1fr); }
  .grid { --font-size: 90%; }
}
@media (max-width:900px) {
  .grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width:600px) {
  .grid { --font-size: 80%; }
}
@media (max-width:360px) {
  .grid { grid-template-columns: repeat(2, 1fr); }
}

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.home #site-header #logo a svg { cursor: default; }
body.home #site-header #logo a svg rect { fill: var(--dark); }
body.home #site-header #logo a svg path { fill: white; }

@media (hover: hover){
  body.home #site-header #logo a:hover svg rect { fill: var(--dark-10); }
}

body.home .grid.mobile .item:nth-child(n+10) { display: none !important; }

@media (max-width:1200px) {
  body.home .grid .item:nth-child(n+13) { display: none !important; }
}
@media (max-width:360px) {
  body.home .grid .item:nth-child(n+9) { display: none !important; }
}

/* PEOPLE
------------------------------------------------------------------------------------------------------------------------------------------------------*/
@media (max-width:600px) {
  body.page-people .grid { grid-template-columns: repeat(2, 1fr); }
}

/* CONTACT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.page-contact .page-content { display: flex; justify-content: space-between; }
body.page-contact #contact-content { flex: 0 0 50%; }
body.page-contact #page-header { padding-bottom: var(--padding-content); text-wrap: balance; }

body.page-contact #contact-form { flex: 0 0 33.3333%; }
body.page-contact #contact-details { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--padding); }
body.page-contact #contact-details h5 { color: var(--dark-50); }
body.page-contact #contact-details p { --font-size: 110%; }

@media (max-width:1200px) {
  body.page-contact #contact-details p { --font-size: 100%; }
}
@media (max-width:1080px) {
  body.page-contact .page-content { display: block; max-width: 600px; }
  body.page-contact #contact-content { margin-bottom: var(--padding-double); }
}
@media (max-width:600px) {
  body.page-contact #contact-details { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--padding); }
  body.page-contact #contact-details .col { background: var(--dark-5); border-radius: var(--radius); padding: var(--padding); }
}
@media (max-width:400px) {
  body.page-contact #contact-details { grid-template-columns: repeat(1, 1fr); }
}

/* CLIENTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.page-clients.scrolled #site-header { border-bottom: none; }

body.page-clients #filter { background: var(--bg); position: sticky; top: var(--header); left: 0; z-index: 10; padding-bottom: var(--padding); }

#projects { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--padding); margin-bottom: var(--padding-content); }
#projects a { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; overflow: hidden; text-decoration: none; }
#projects h6 { color: var(--dark-50); margin-bottom: 0.4em; transition: opacity .1s ease-out; }
#projects h5 { margin-bottom: 0.4em; }
#projects .tag { margin-top: auto; }
#projects .tag:not(:only-of-type) { margin-bottom: 0.2em; margin-right: 0.2em; }
#projects .tag:last-child { margin-bottom: 0; margin-right: 0; }
#projects figure { margin-bottom: 0.8em; transition: opacity .1s ease-out; }

@media (hover: hover) {
  #projects a:hover { opacity: 1; }
  #projects a:hover figure { opacity: 0.75; }
  #projects a:hover h6 { opacity: 0.75; }
}

@media (max-width:1200px) {
  #projects { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width:900px) {
  #projects { grid-template-columns: repeat(3, 1fr); }
  body.page-clients #sectors-dropdown { --column: calc((100% - var(--padding)) / 2); }
}
@media (max-width:600px) {
  #projects { grid-template-columns: repeat(2, 1fr); }
  #projects h5 { font-size: var(--h6-size); }
  body.page-clients #sectors-dropdown { --column: 100%; }
}
@media (max-width:360px) {
  #projects { grid-template-columns: repeat(1, 1fr); }
}

/* PROJECT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.page-project { --bg: var(--shade1); }
body.page-project main { padding-top: var(--header); }
body.page-project #site-header h6 { color: var(--dark-50); line-height: 36px; font-size: 16px; margin-left: calc(var(--column) + var(--padding)); opacity: 0; visibility: hidden; transition: opacity 0.3s ease, visibility 0.3s ease; }
body.page-project #site-header h6.show { opacity: 1; visibility: visible; }

#project { display: flex; gap: var(--padding); }
#project-sector { position: sticky; top: var(--header); left: 0; height: calc(100vh - var(--header) - var(--padding)); padding-right: 5px; margin-right: -5px; }
#project-sector { overflow: auto; -ms-overflow-style: -ms-autohiding-scrollbar; -ms-scroll-chaining: none; overscroll-behavior: contain; }
#project-sector::-webkit-scrollbar-track { background-color: transparent; -webkit-box-shadow: none; }
#project-sector::-webkit-scrollbar { background-color: transparent; width: 8px; }
#project-sector::-webkit-scrollbar-thumb { background-color: var(--dark-10); }
#project-sector #sectors-dropdown { margin-bottom: 5px; }
#project-sector #projects-list { width: var(--column); }

#project-sector a { background: var(--dark-5); border-radius: var(--radius); display: flex; align-items: center; gap: 10px; margin-bottom: 5px; padding: 10px; }
#project-sector a:last-child { margin-bottom: 0; }
#project-sector a h6 { flex: 1; font-size: 14px; line-height: 1.15; margin: 0; }
#project-sector a h6 span { color: var(--dark-50); display: block; margin-bottom: 2px; }
#project-sector a img { border-radius: var(--radius); height: 60px; flex: 0 0 60px; opacity: 0.5; transition: opacity .1s ease-out; }
#project-sector a svg { fill: var(--dark-5); height: 60px; flex: 0 0 60px; }

@media (hover: hover) {
  #project-sector a:hover { background: var(--dark-10); opacity: 1; }
  #project-sector a:hover img { opacity: 1; }
}
#project-sector a.on { background: rgba(255,255,255,0.95); pointer-events: none; }
#project-sector a.on img { opacity: 1; }

#project-title { display: none; }
#project-content { flex: 1; }
#project-content header { margin-bottom: var(--padding); }
#project-content header h4 { color: var(--dark-50); margin: 0; }
#project-content header h2 { margin: 0.25em 0; text-wrap: balance; }
#project-content header .tag:not(:only-of-type) { margin-bottom: 0.2em; margin-right: 0.2em; }
#project-content header .tag:last-child { margin: 0; }

#project-content .columns-block { margin-bottom: var(--padding-content); }
#project-content .columns-block .details { --font-size: 110%; --font-margin: 0.75em; }
#project-content .columns-block .description { --colour: var(--dark-50); color: var(--colour); }
#project-content>section { margin-bottom: var(--padding); }

.project-quote { background-color: var(--dark-5); border-radius: var(--radius); padding: var(--padding-content); text-align: center; }
.project-quote .quote { margin: 0 auto; max-width: 1000px; text-wrap: balance; }
.project-quote .quote h6 { color: var(--dark-75); }
.project-quote .quote p { color: var(--dark-50); }

.project-images.portrait img { max-height: 90vh; max-width: 100%; margin: 0 auto; width: auto; }
.project-images.two { display: flex; gap: var(--padding); }
.project-images.two figure { flex: 1; }

@media (max-width: 1600px) {
  body.page-project #site-header h6 { font-size: 15px; }
}
@media (max-width: 1400px) {
  body.page-project #site-header h6 span { display: none; }
}
@media (max-width: 1080px) {
  body.page-project #site-header h6 { display: none; }
  #project-sector #sectors-dropdown { --column: 100%; margin-bottom: var(--padding); }
  #project-sector #projects-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--padding); overflow: visible; width: 100%; }
  #project-sector a { margin: 0; }
  #project { flex-direction: column-reverse; }
  #project-content { flex: auto; padding-top: var(--padding); }
  #project-sector { position: relative; top: auto; left: auto; height: auto; flex: auto; }
}
@media (max-width: 900px) {
  #project-sector #projects-list { grid-template-columns: repeat(2, 1fr); }
  .project-images.portrait img { max-height: auto; width: 100%; }
}
@media (max-width: 600px) {
  #project-sector #projects-list { grid-template-columns: repeat(1, 1fr); }
  .project-images.two { display: block; }
  .project-images.two figure { margin-bottom: var(--padding); }
}