@charset "utf-8";
html{ font-family:sans-serif; font-kerning: normal; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; text-size-adjust: 100%; text-rendering: optimizelegibility; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; }
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;}
img{height:auto;width:100%;box-sizing:border-box;}
a:link,a:visited{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; }

@font-face{ font-family:"regular"; src:url("regular.woff2") format("woff2"); font-display: swap; ascent-override: 105%; }
@font-face{ font-family:"medium"; src:url("medium.woff2") format("woff2"); font-display: swap; ascent-override: 105%; }
@font-face{ font-family:"mono"; src:url("mono.woff2") format("woff2"); font-display: swap; }

@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 {
  --regular: "regular", sans-serif;
  --medium: "medium", sans-serif;
  --mono: "mono", monospace;
  --black: #0A0A0A;
  --graphite: #19191E;
  --grey: #8C8C9B;
  --black-10: rgba(0,0,0,0.10);
  --black-5: rgba(0,0,0,0.05);
  --white-90: rgba(255,255,255,0.90);
  --white-75: rgba(255,255,255,0.75);
  --white-50: rgba(255,255,255,0.50);
  --white-20: rgba(255,255,255,0.20);
  --white-10: rgba(255,255,255,0.10);
  --white-5: rgba(255,255,255,0.05);
  --white-1: rgba(255,255,255,0.01);
  --light: #F4F6F8;
  --cool: #ECEEF0;
  --dark: #060726;
  --dark-75: rgba(6,7,38,0.75);
  --dark-50: rgba(6,7,38,0.50);
  --dark-25: rgba(6,7,38,0.25);
  --dark-10: rgba(6,7,38,0.10);
  --dark-5: rgba(6,7,38,0.05);
  --navy: #141E50;
  --navy-10: rgba(20,30,08,0.10);
  --navy-5: rgba(20,30,08,0.05);
  --blue: #006AFF;
  --cyan: #33DDFF;
  --green: #00F37B;
  --orange: #FF9933;
  --neon: #C3FF4D;

  --page-bg: var(--light);
  --page-colour: var(--blue);
  --colour: var(--dark);
  --link-colour: var(--blue);
  --colour-light: var(--dark-50); 

  --h1-size: clamp(35px, 6vw, 80px);
  --h2-size: clamp(30px, 4.5vw, 60px);
  --h3-size: clamp(25px, 3.5vw, 40px);
  --h4-size: clamp(22px, 3.2vw, 30px);
  --h5-size: clamp(19px, 2.5vw, 24px);
  --h6-size: 14px;
  --font-size: 16px;
  --font-big: calc(var(--font-size) + 2px);
  --font-small: calc(var(--font-size) - 2px);
  --font-margin: 1.2em;
  --line-height: 1.5;

  --pad: 10px;
  --pad20: calc(var(--pad) * 2);
  --pad30: calc(var(--pad) * 3);
  --pad40: calc(var(--pad) * 4);
  --pad50: calc(var(--pad) * 5);
  --padding: 0 var(--pad20);
  --radius: 10px;
  --header: 80px;
  --column: 340px;
}

html { height: 100%; }
body { background-color: var(--page-bg); color: var(--colour); font-family: "regular", sans-serif; font-size: var(--font-size); line-height: 1; height: 100%; }
#layout { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }
.inner { box-sizing: border-box; margin: 0 auto; max-width: 1360px; width: 100%; }
.flex { display: flex; align-items: flex-start; flex-wrap: wrap; }
/*
.lines {
  background-repeat: no-repeat; background-size: 1px 100%; background-position: 0 0, 25% 0, 50% 0, 75% 0, 100% 0;
  background-image: linear-gradient(to right, var(--line-colour) 1px, transparent 1px), linear-gradient(to right, var(--line-colour) 1px, transparent 1px), linear-gradient(to right, var(--line-colour) 1px, transparent 1px), linear-gradient(to right, var(--line-colour) 1px, transparent 1px), linear-gradient(to right, var(--line-colour) 1px, transparent 1px);
}*/
h1 { font-family: var(--medium); font-size: var(--h1-size); font-weight: 400; line-height: 1.0; margin: 0; letter-spacing: -0.01em; text-wrap: balance; }
h2 { font-family: var(--medium); font-size: var(--h2-size); font-weight: 400; line-height: 1.0; margin: 0 0 0.5em; text-wrap: balance; }
h3 { font-family: var(--medium); font-size: var(--h3-size); font-weight: 400; line-height: 1.1; margin: 0 0 0.5em; text-wrap: balance; }
h4 { font-family: var(--medium); font-size: var(--h4-size); font-weight: 400; line-height: 1.2; margin: 0 0 0.5em; }
h5 { font-family: var(--regular); font-size: var(--h5-size); font-weight: 400; line-height: 1.25; margin: 0 0 0.5em; }
h6 { font-family: var(--medium); font-size: var(--h6-size); font-weight: 400; line-height: 1; margin: 0 0 1em; letter-spacing: 0.05em; text-transform: uppercase; }
h6.mono { color: var(--colour-light); font-family: var(--mono); font-size: 12px; }
h1 + h5 { margin-top: 0.5em; }
p { font-size: var(--font-size); line-height: var(--line-height); margin: 0 0 var(--font-margin); }
strong { font-family: var(--medium); font-weight: 400; }

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

p.small { font-size: var(--font-small); }
p.mono { color: var(--colour-light); font-family: var(--mono); }
p.light { color: var(--colour-light); }
p.detail { font-family: var(--mono); font-size: 12px; line-height: 1; letter-spacing: 0.05em; opacity: 0.5; text-transform: uppercase; }


@media (min-width:1800px) {
  :root {
    --font-size: 18px;
  }
}
@media (max-width:1200px) {
  :root {
    --font-size: 15px;
    --font-small: 14px;
    --h6-size: 13px;
  }
}
@media (max-width:1080px) {
  :root {
    --header: 70px;
  }
}
@media (max-width:600px) {
  :root {
    --h6-size: 12px;
  }
}
@media (max-width:440px) {
  :root {
    --pad: 5px;
  }
}

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

*.button, a.button {
  --bg: transparent; --link-colour: var(--colour); --border: var(--colour); --bg-hover: var(--colour); --border-hover: var(--colour); --colour-hover: white; --icon-bg: var(--white-10); --icon-hover: var(--white-10);
  background: var(--bg); border: 1px solid var(--border); color: var(--link-colour);
  border-radius: 20px; font-family: var(--regular); font-size: 16px; min-height: 40px; letter-spacing: 0.01em; line-height: 15px; padding: 0 18px;
  box-sizing: border-box; display: inline-flex; align-items: center; gap: 10px; text-align: left; text-decoration: none !important;
}
*.button svg { fill: var(--colour); height: 18px; width: auto; transition: all .1s ease-out; }
*.button.icon { padding-right: 10px; }
*.button i { font-style: normal; background-color: var(--icon-bg); border-radius: 12px; display: flex; align-items: center; justify-content: center; height: 24px; flex: 0 0 24px; transition: all .1s ease-out; }
*.button i svg { fill: transparent; height: 8px;}
*.button i svg path { stroke: var(--colour); transition: all .1s ease-out; }

*.button:hover, a.button:hover { background: var(--bg-hover);  border-color: var(--border-hover); color: var(--colour-hover); opacity: 1 !important; }
*.button:hover svg { fill: var(--colour-hover); }
*.button:hover i { background-color: var(--icon-hover); }
*.button:hover i svg path { stroke: var(--colour-hover); }

*.button.light, a.button.light { --bg: var(--navy-5); --colour: var(--dark); --border: var(--navy-5); --bg-hover: var(--navy); --border-hover: var(--bg); --colour-hover: var(--light); }
*.button.blue-outline, a.button.blue-outline { --colour: var(--blue); }
*.button.navy-outline, a.button.navy-outline { --colour: var(--navy); }
*.button.page-outline, a.button.page-outline { --colour: var(--page-colour); --colour-hover: var(--dark); }
*.button.white-outline, a.button.white-outline { --bg: transparent; --colour: white; --border: var(--white-20); --bg-hover: white; --border-hover: white; --colour-hover: var(--dark); --icon-hover: var(--navy-10); }
*.button.blue-fill, a.button.blue-fill { --bg: var(--blue); --colour: white; --border: var(--bg); --bg-hover: transparent; --colour-hover: var(--bg); --border-hover: var(--bg); }
*.button.navy-fill, a.button.navy-fill { --bg: var(--navy); --colour: white; --border: var(--bg); --bg-hover: transparent; --colour-hover: var(--bg); --border-hover: var(--bg); }
*.button.page-fill, a.button.page-fill { --bg: var(--page-colour); --colour: var(--dark); --border: var(--bg); --bg-hover: transparent; --colour-hover: var(--bg); --border-hover: var(--bg); --icon-bg: var(--dark-10); }
*.button.white-fill, a.button.white-fill { --bg: white; --colour: var(--dark); --border: var(--bg); --bg-hover: var(--blue); --colour-hover: white; --border-hover: var(--bg-hover); --icon-bg: var(--navy-10); --icon-hover: var(--white-10); }
*.button.white-hover, a.button.white-hover { --bg-hover: white; --colour-hover: var(--dark); --border-hover: white; --icon-hover: var(--navy-10); }

@media (max-width:1200px) {
  *.button:not(.tag),
  a.button:not(.tag) { font-size: var(--font-size); }
}

a.tag, button.tag, .tag { --border: transparent; --border-hover: transparent; --bg: var(--dark-5); --colour: var(--dark-50); --bg-hover: var(--dark-10); --colour-hover: var(--blue); font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; border-radius: 5px; line-height: 1; min-height: 0; padding: 8px 10px; }

@media (max-width:440px) {
  .tag { font-size: 11px; }
}

.dropdown { position: relative; }
.dropdown .toggle { --font-size: 90%; --bg: white; --bg-hover: var(--white-50); --color: var(--dark); --colour-hover: var(--dark-75); border-radius: 5px; border: transparent; font-family: var(--mono); font-size: 12px; letter-spacing: 0.05em; padding: 0 15px; text-transform: uppercase; width: var(--column); }
.dropdown .toggle.on { --bg: var(--white-90); }
.dropdown .toggle svg { opacity: 0.5; margin-left: auto; height: 8px; width: auto; }

.dropdown nav { display: none; background: rgba(255,255,255,0.98); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 0 8px 0 var(--navy-5); border-radius: 5px; box-sizing: border-box; position: absolute; top: 100%; left: 0; margin-top: 5px; padding: 15px; min-width: var(--column); z-index: 1000; }
.dropdown nav .flex { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.dropdown nav .tag.on { --bg: var(--dark-10); --colour: var(--dark); pointer-events: none; }


/* HEADER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#header { --background: white; --foreground: var(--dark); --hover: var(--blue); --backdrop: none; --shadow: 0 0 8px 0 var(--navy-10); position: fixed; top: 0; left: 0; right: 0; z-index: 10; }
#header .outer { background-color: var(--background); backdrop-filter: var(--backdrop); -webkit-backdrop-filter: var(--backdrop); border-radius: var(--radius); box-shadow: var(--shadow); display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 60px; margin: 10px; padding: 0 10px; }
#header a#logo { justify-self: start; padding: 5px; }
#header a#logo svg { height: 30px; width: auto; fill: var(--foreground); transition: all .1s ease-out; }
#header a#logo:hover svg { opacity: 0.75; }

#header a { font-size: var(--font-size); transition: all .1s ease-out; }
#header nav { justify-self: center; display: flex; gap: 5px; }
#header a.button { --bg: transparent; --border: transparent; --colour: var(--foreground); --bg-hover: transparent; --border-hover: var(--navy-10); --colour-hover: var(--hover); }
#header a#contact { justify-self: end; padding-right: 10px; }
#header a.on { background-color: var(--navy-5); color: var(--dark); }

body.header-white #header { --background: var(--white-5); --foreground: white; --hover: var(--white-75); --backdrop: blur(5px); }
body.header-white #header a.button { --border-hover: var(--white-20); }
body.header-white #header a.on { background-color: var(--white-5); color: white; }

body.header-transparent #header { --background: none; --foreground: white; --hover: var(--white-75); --backdrop: none; --shadow: none; }
body.header-transparent #header .outer { transition: all .2s ease-out; }
body.header-transparent #header a.button { --border-hover: var(--white-20); }
body.header-transparent #header a.on { background-color: var(--white-5); color: white; }

body.scrolled #header,
body.header-transparent #header:hover { --background: white; --foreground: var(--dark); --hover: var(--blue); --shadow: 0 0 8px 0 var(--navy-10); }
body.scrolled #header #header a.button,
body.header-transparent #header:hover a.button { --border-hover: var(--navy-10); }

@media (max-width:1400px) {
  #header { --font-size: 15px; }
  #header a#logo svg { height: 28px; }
  #header a.button { padding: 0 16px; }
}
@media (max-width:1200px) {
  #header { --font-size: 14px; }
  #header a#logo svg { height: 26px; }
  #header a.button { padding: 0 15px; }
}
@media (max-width:1080px) {
  #header .outer { height: 50px; }
  #header nav { display: none; }
  #header a#contact { display: none; }
}

/* FOOTER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#footer { --colour: var(--dark); background-color: white; border-top: 1px solid var(--cool); border-bottom: 1px solid var(--cool); color: var(--colour); }
#footer .inner { --line-colour: var(--navy-5); display: grid; grid-template-columns: repeat(4, 1fr); font-size: var(--font-small); }
#footer section { padding: var(--pad30) var(--pad20); }
#footer h6 { margin-bottom: 1em; }
#footer p { font-size: var(--font-small); margin-bottom: 1em; }
#footer p:last-child { margin-bottom: 0; }
#footer section.underline a { text-decoration: underline; }
#footer p a:hover { color: var(--blue); text-decoration: underline; }

#footer .button { font-size: calc(var(--font-small) - 1px); }

#footer form { --field-margin: 10px; max-width: 400px; }
#footer form label { font-size: 11px; }
#footer form input { height: 34px; }

#footer-links { background-color: white; }
#footer-links .inner { padding: var(--pad20); }
#footer-links p { display: flex; align-items: center; justify-content: center; gap: var(--pad20); min-height: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-align: center; text-transform: uppercase; }
#footer-links a { color: var(--navy); display: inline-block; opacity: 0.5; padding: 5px; }
#footer-links a:hover { opacity: 1; }

@media (max-width:1080px) {
  #footer .inner { background: none; display: block; }
  #footer section:not(:last-child) { border-bottom: 1px solid var(--cool); }
  #footer-links p { flex-direction: column; }
}

/* ELEMENTS
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.dot-heading { display: inline-flex; align-items: center; gap: 10px; min-height: 20px; padding: 5px; }
.dot-heading span { display: block; line-height: 20px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; }
.dot-heading i { flex: 0 0 10px; }

i.dot { background-color: var(--white-20); border-radius: 50%; height: 10px; width: 10px; animation-duration: 1.5s; animation-iteration-count: infinite; animation-timing-function: linear; }
i.pulse { animation-name: pulse; }

@keyframes pulse {
  0% { background-color: transparent; }
  33% { background-color: var(--page-colour); }
  66% { background-color: var(--page-colour); }
  100% { background-color: transparent; }
}

@media (max-width:600px) {
  .dot-heading span { font-size: 10px; }
}

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

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

.form label:hover { opacity: 1; }
.form input:hover,
.form textarea:hover,
.form select:hover { background: var(--active-background); outline: none; }

.callout { background-color: var(--dark-5); 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; }

.grecaptcha-badge { visibility: hidden; }
p.recaptcha { font-size: 11px; opacity: 0.5; margin-top: 15px; }

/* BANNER
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#banner { --colour: white; background-size: cover; background-position: center; background-color: var(--dark); color: var(--colour); display: flex; flex-direction: column; min-height: 800px; overflow: hidden; position: relative; }
#banner::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; opacity: 0.5; background: linear-gradient(90deg, var(--navy) 0%, var(--dark) 100%); }
#banner .inner { padding: var(--padding); }
#banner header { flex: auto; padding-top: 330px; position: relative; z-index: 2; }
#banner h1 { max-width: 800px; }
#banner h5 { max-width: 800px; text-wrap: balance; }
#banner nav { background: var(--dark-5); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); border-top: 1px solid var(--white-10); padding: 15px 0 20px; position: relative; z-index: 2; transition: all 0.2s ease-out; }
#banner nav .subnav { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; max-width: 1000px; }
#banner nav .subnav a.button { font-size: var(--font-small); --border: var(--white-20); --bg-hover: var(--dark-10); --colour-hover: white; --border-hover: var(--page-colour); }
#banner nav .subnav a.button.on { --bg: var(--white-10); --border: transparent; --bg-hover: var(--bg); }

#banner nav:hover { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }
#banner nav:hover a.dot-heading i.dot { animation-name: pulse; }
#banner a.dot-heading:hover { color: var(--white-50); }

@media (max-width:1080px) {
  #banner { box-sizing: border-box; min-height: 600px; flex-direction: column-reverse; padding-top: 80px; }
  #banner nav { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-top: none; padding-bottom: 5px; }
  #banner nav .subnav { display: none; }
  #banner header { background: var(--dark-5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-top: 1px solid var(--white-5); flex: 0; padding: 15px 0; }
  #banner h5 { color: var(--white-75); }
}
@media (max-width:800px) {
  #banner { min-height: 80vw; }
}

/* CONTENT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
.content { background-color: var(--page-bg); }
.content a { color: var(--link-colour); text-decoration: underline; }
.content a:hover { opacity: 0.5; }

.content a.button { margin-bottom: 0.5em; margin-right: 0.5em; }
.content a.button:last-child { margin-bottom: 0; }

.content figure { margin-bottom: 1em; overflow: hidden; }
.content figure img { border-radius: 5px; }
.content video { border-radius: 5px; margin-bottom: 1em; overflow: hidden; }
.content video { height: auto; width: 100%; }
.content .text { max-width: 980px; }
.content .caption { --colour: var(--dark-50); --font-size: var(--font-small); color: var(--colour); margin-top: -0.5em; }

.content ul, 
.content ol { font-size: var(--font-size); line-height: var(--line-height); margin: 0 0 var(--font-margin) 1em; }
.content li ul,
.content li ol { font-size: 100%; margin: 0.5em 0 0.5em var(--font-margin); }
.content ul { list-style-type: disc; }
.content ul ul { list-style-type: circle; }
.content ul ul ul { list-style-type: square; }
.content ol { list-style-type: decimal; }
.content ol ol { list-style-type: lower-alpha; }
.content ol ol ol { list-style-type: lower-roman; }
.content li { margin-bottom: 0.4em; }
.content ul:last-child, .content ol:last-child, .content figure:last-child, .content video:last-child,
.content ul:only-child, .content ol:only-child, .content figure:only-child, .content video:only-child { margin-bottom: 0; }

.content li p { display: inline; margin: 0 !important; }
.content p + ul { margin-top: -0.5em; }

.content .quote { --quote-size: clamp(50px,17vw,150px); padding: 25px; text-align: center; }
.content blockquote { font-size: var(--h3-size); line-height: 1.2; margin: 50px auto; position: relative; text-wrap: balance; width: 70%; max-width: 800px; }
.content blockquote::before { content: '“'; color: var(--page-colour); display: block; font-size: var(--quote-size); line-height: 100px; height: 50px; position: absolute; top: -25px; left: -75px; z-index: -1; }
.content blockquote::after { content: '”'; color: var(--page-colour); display: block; font-size: var(--quote-size); line-height: 100px; height: 50px; position: absolute; bottom: -25px; right: -75px; z-index: -1; }
.content .quote.text-small blockquote { font-size: var(--h4-size); }
.content .quote.text-large blockquote { font-size: var(--h2-size); }
.content h6.dot-heading { height: auto; margin-bottom: 25px; }
.content h6.dot-heading i.dot { background-color: var(--colour); opacity: 0.1; }

#page-header { padding: 200px 0 var(--pad50); border-bottom: 1px solid var(--navy-5); }
#page-header .inner { padding: var(--padding); }
#page-header h5 { color: var(--grey); }

.block { color: var(--colour); }
.block.light { background-color: var(--light); }
.block.white { background-color: white; }
.block.dark { background-color: var(--dark); --colour: var(--light); --colour-light: var(--white-50); }
.block.dark .inner { --line-colour: var(--white-5); }
.block.border { border-bottom: 1px solid var(--navy-5); }
.block.dark.border { border-bottom: 1px solid var(--white-5); }

.block .inner { --line-colour: var(--navy-5); padding: var(--padding); }
.block.padding-above-large .inner { padding-top: var(--pad50); }
.block.padding-above-small .inner { padding-top: var(--pad20); }
.block.padding-below-large .inner { padding-bottom: var(--pad50); }
.block.padding-below-small .inner { padding-bottom: var(--pad20); }

.block .html iframe { height: auto; width: 100%; display: block; aspect-ratio: var(--ratio, 16 / 9); }

.content figure.portrait img { margin: 0 auto; max-height: 100vh; max-width: 100%; width: auto; }

.columns { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad40); }
.columns-3 { grid-template-columns: repeat(3, 1fr); gap: var(--pad30); }
.columns-4 { grid-template-columns: repeat(4, 1fr); gap: var(--pad40); }

.panels-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad40); }
.panels-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad30); }

.panel { background-size: cover; background-position: center; border-radius: var(--radius); color: var(--colour); overflow: hidden; position: relative; }
a.panel { color: var(--colour); text-decoration: none; }
a.panel:hover { opacity: 1; }
a.panel:hover .button { background: var(--bg-hover); border-color: var(--border-hover); color: var(--colour-hover); opacity: 1 !important; }
a.panel:hover .button svg { fill: var(--colour-hover); }
a.panel:hover .button i { background-color: var(--icon-hover); }
a.panel:hover .button i svg path { stroke: var(--colour-hover); }

.panoramic .panel { --ratio: 30; padding-top: calc(var(--ratio) * 1%); }
.rectangle .panel { --ratio: 56.25; padding-top: calc(var(--ratio) * 1%); }
.square .panel { --ratio: 100; padding-top: calc(var(--ratio) * 1%); }
.portrait .panel { --ratio: 125; padding-top: calc(var(--ratio) * 1%); }

.panel.dark { background-color: var(--dark); --colour: white; --colour-light: var(--white-50); }
.panel.light { background-color: var(--light); --colour: var(--dark); }
.panel.white { background-color: white; --colour: var(--dark); }
.panel.text-white { --colour: white; }
.panel.text-dark { --colour: var(--dark); }
.panel .overlay { background-color: rgba(6,7,38,var(--opacity)); box-sizing: border-box; padding: var(--pad30); position: absolute; top: 0; left: 0; right: 0; height: 100%; min-height: 100%; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; gap: var(--pad40); }

.block.dark .panel.dark { border: 1px solid var(--navy); }
.block.light .panel.light { border: 1px solid var(--navy-10); }
.block.white .panel.white { border: 1px solid var(--navy-10); }

.block .full { background-size: cover; background-position: center; }
.block .full .overlay { background-color: rgba(6,7,38,var(--opacity)); color: var(--colour); position: relative; z-index: 1; }
.block .full .overlay.text-white { --colour: white; }
.block .full .overlay.text-dark { --colour: var(--dark); }
.block .full .overlay .inner { min-height: 50vh; }
.block .full .overlay .inner.text-middle { display: flex; align-items: center; }
.block .full-video { position: relative; overflow: hidden; width: 100%; }
.block .full-video video { border-radius: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 100%; min-height: 100%; object-fit: cover; }

.panel h6 { margin-bottom: 0.5em; }
.panel .text { width: 100%; }
.panel .text figure { margin-top: 1em; max-width: 300px; width: 100%; }
.panel .text figure.small { max-width: 100px; width: 30%; }
.panel .text figure.medium { max-width: 200px; width: 50%; }
.panel .text figure.large { max-width: 100%; width: 100%; }
.panels-3 .panel .text figure { width: 80%; }

.match .panel { padding-top: 0; --ratio: 0; }
.match .panel .overlay { position: relative; top: auto; left: auto; right: auto; bottom: auto; }

.panel a.button.blue-fill,
.panel a.button.navy-fill { --bg-hover: white; --colour-hover: var(--bg); --border-hover: white; --icon-hover: var(--navy-10); }

.panel-halves .panel { display: grid; grid-template-columns: repeat(2, 1fr); }
.panel-halves .panel.image-right figure { order: 1; }
.panel-halves .panel figure { margin: 0; }
.panel-halves .panel figure.keep { padding: var(--pad30); }
.panel-halves .panel figure.fill img { border-radius: 0; height: 100%; object-fit: cover; }
.panel-halves .panel .half { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 2em; padding: var(--pad50); }
.panel-halves .panel .half.text-middle { justify-content: center; }
.panel-halves .panel h2,
.panel-halves .panel h3,
.panel-halves .panel h4 { text-wrap: auto; }

.panels-slider .swiper { padding-bottom: 40px; }
.panels-slider .panel { --font-margin: 0.5em; height: auto; user-select: none; }
.panels-slider .panel .pad { padding: var(--pad20); }
.panels-slider .panel figure { margin-bottom: 0; }
.panels-slider .panel img { border-radius: 0; }

.people .panel { --font-size: var(--font-small); display: flex; gap: var(--pad30); margin-bottom: var(--pad20); padding: var(--pad30); }
.people .panel figure { margin: 0; flex: 0 0 25%; }
.people .panel .details { flex: 0 0 25%; }
.people .panel .bio { flex: 1; }

.sub-pages { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--pad20); }
.sub-pages a { background-color: var(--navy-5); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border: 1px solid transparent; box-sizing: border-box; border-radius: 10px; color: var(--colour); display: flex; align-items: center; flex-wrap: nowrap; gap: var(--pad20); padding: var(--pad20); text-decoration: none; }
.block.dark .sub-pages a { background-color: var(--white-5); }
.sub-pages a figure { flex: 0 0 25%; margin: 0; overflow: hidden; border-radius: 5px; }
.sub-pages a img { border-radius: 0; transition: all 0.5s ease-out; }
.sub-pages a div { flex: auto; }
.sub-pages a h5 { font-family: var(--medium); line-height: 1; margin-bottom: 0.5em; }
.sub-pages a p { line-height: 1.2; opacity: 0.6; transition: opacity 0.2s ease-out; }

.sub-pages a:hover { background-color: transparent; border-color: var(--parent-colour); opacity: 1; }
.sub-pages a:hover figure { background-color: var(--parent-colour); }
.sub-pages a:hover img { opacity: 0.7; transform: scale(1.05); }
.sub-pages a:hover p { opacity: 1; }

.latest-announcements { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--pad40); }
.latest-announcements a { background-color: var(--white-5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--white-5); border-radius: 5px; color: white; display: flex; flex-direction: column; align-items: flex-start; padding: 15px; text-decoration: none; transition: all 0.1s ease-out; }
.latest-announcements a div { flex: 0 0 20%; }
.latest-announcements a h5 { font-size: var(--font-big); margin-bottom: 2em; }
.latest-announcements a h6.mono { color: var(--colour-light); }
.latest-announcements a button { margin-top: auto; font-family: var(--mono); font-size: 13px; text-transform: uppercase; pointer-events: none; }
.latest-announcements a .tag { --bg: var(--page-colour); --colour: var(--dark); pointer-events: none; margin-bottom: 1em; }
.latest-announcements a:hover { background-color: var(--white-10); color: var(--page-colour); opacity: 1; }
.latest-announcements a:hover button { --bg: transparent; --border: var(--page-colour); --colour: var(--page-colour); --icon-bg: var(--icon-hover); }

@media (min-width:1081px) {
  .panel-halves .quote blockquote { font-size: var(--h4-size); }
  .panel-halves .quote.text-large blockquote { font-size: var(--h3-size); }
  .panel-halves .quote.text-small blockquote { font-size: var(--h5-size); }
}

@media (max-width:1400px) {
  .panoramic .panel,
  .rectangle .panel,
  .square .panel,
  .portrait .panel { padding-top: 0; }
  .panel .overlay { min-height: calc(var(--ratio) * 1vw); position: relative; }
  .panels-2 .panel .overlay { min-height: calc(var(--ratio) * 0.5vw); }
  .panels-3 .panel .overlay { min-height: calc(var(--ratio) * 0.33vw); }
  .panel-halves .panel .half { padding: var(--pad40); }
}
@media (max-width:1080px) {
  .columns-3 { gap: var(--pad20) }
  .columns-4 { grid-template-columns: repeat(2, 1fr); }
  .panoramic .panel .overlay { min-height: 40vw; }
  .panels-3 { gap: var(--pad20); }
  .panel-halves .panel { display: block; }
  .panel-halves .panel .half { padding: var(--pad30); }
  .panel-halves .panel .half.text-middle { padding-top: 75px; padding-bottom: 75px; }
  .sub-pages { grid-template-columns: repeat(1, 1fr); }
  .latest-announcements { grid-template-columns: repeat(2, 1fr); }
  .latest-announcements a h5 { margin-bottom: 0; }
  .latest-announcements a button { display: none; }
}
@media (max-width:800px) {
  .panels-2 { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .panels-3 { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .block .panel .overlay { min-height: calc(var(--ratio) * 0.9vw); }
  .panoramic .panel .overlay { min-height: 45vw; }
  .people .panel { flex-wrap: wrap; padding: 15px; gap: 15px; }
  .people .panel figure { flex-basis: 33%; }
  .people .panel .details { flex: 1; order: -1; }
  .people .panel .bio { flex: 0 0 100%; }
}
@media (max-width:600px) {
  .block .lines { background: transparent; }
  .columns { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .columns-3 { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .columns-4 { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .content .quote { padding: 25px 50px; }
  .content blockquote { margin: 20px auto; }
  .content .quote h6.dot-heading { margin-top: 20px; }
  .latest-announcements { grid-template-columns: repeat(1, 1fr); gap: var(--pad20); }
  .latest-announcements a { padding: var(--pad20); }
  .latest-announcements a h5 { font-size: var(--font-size); }
}

/* Interactive Map */
@keyframes showPin { from { opacity: 0; } to { opacity: 1; } }
.interactive-map .canvas { position: relative; overflow: hidden; }
.interactive-map .canvas a { color: var(--dark); cursor: pointer; display: block; position: absolute; z-index: 1; text-decoration: none; }
.interactive-map .canvas a>span { position: absolute; display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; text-align: center; z-index: 9; border-radius: 50%; background-color: var(--dark-25); border: 1px solid var(--white-50); box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2); }
.interactive-map .canvas.pins-white a>span { background-color: var(--white-75); border: 1px solid white; box-shadow: 0px 0px 5px rgba(255, 255, 255, 0.2); }
.interactive-map .canvas a>span i.dot { animation-name: pulse; display: inline-block; }
.interactive-map .canvas a .pin { border-radius: var(--radius); cursor: default; display: none; opacity: 0; width: 360px; position: absolute; z-index: 10; background-color: white; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.1); overflow: hidden; transition: opacity .2s; }
.interactive-map .canvas .top-right .pin { transform: translate(-100%,0); }
.interactive-map .canvas .top-right i { right: 0; }
.interactive-map .canvas .bottom-right .pin { transform: translate(-100%,-100%); }
.interactive-map .canvas .bottom-right i { bottom: 0; right: 0 }
.interactive-map .canvas .bottom-left .pin { transform: translate(0,-100%); }
.interactive-map .canvas .bottom-left i { bottom: 0; }
.interactive-map .canvas a .pin img { border-radius: 0; }
.interactive-map .canvas a .pin div { --font-margin: 0.25em; --font-size: var(--font-small); padding: var(--pad20); }
.interactive-map .canvas a .pin li { margin-bottom: 0; }

.interactive-map .canvas a:hover { opacity: 1; transition: none; z-index: 10; }
.interactive-map .canvas a:hover i { opacity: 0; }
.interactive-map .canvas a:hover .pin { animation: showPin 0.5s; animation-fill-mode: forwards; display: block; }

@media (max-width:800px) {
  .interactive-map .canvas a>span { height: 20px; width: 20px; }
  .interactive-map .canvas a .pin { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%) !important; width: 90%; }
}

/* POLICY PAGES
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.policy .lines { background: none; }
body.form .lines { background: none; }

/* HOME
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#home-banner { --colour: white; --page-colour: var(--blue); background-color: var(--dark); color: var(--colour); height: 100vh; height: 100dvh; min-height: 768px; overflow: hidden; position: relative; }
#home-banner #banner-background { background-size: cover; background-position: center; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#home-banner #banner-background::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; background: linear-gradient(90deg, var(--navy) 0%, var(--dark) 100%); opacity: var(--banner-opacity); }
#home-banner #banner-background video { display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; }

#home-banner #banner-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: flex-end; z-index: 2; padding-top: 50vh; }
#home-banner .inner { padding: var(--padding); }
#home-banner header .inner { display: flex; flex-direction: column; align-items: flex-start; gap: var(--pad20); }
#home-banner header h6 { margin: 0; padding-bottom: 0; }
#home-banner header h1 { max-width: 900px; }
#home-banner header h5 { max-width: 900px; opacity: 0.8; }

#home-banner a.button.blue-fill,
#home-banner a.button.navy-fill { --bg-hover: white; --colour-hover: var(--bg); --border-hover: white; --icon-hover: var(--navy-10); }

#home-panels { margin-top: 15vh; padding: var(--pad40) 0; }
#home-panels .inner { display: flex; gap: var(--pad40); }
#home-panels .panel { background-color: var(--white-10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: var(--radius); flex: auto; max-width: 260px; display: flex; flex-direction: column; }

#home-panels .dot-heading { padding: 12px var(--pad20); }
#home-panels .panel .pad { padding: 0 var(--pad20) var(--pad20); }
#home-panels .panel.links { max-width: 360px; }
#home-panels .panel.links .dot-heading { padding-bottom: 8px; }
#home-panels .panel.links .pad { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding-bottom: 12px; }
#home-panels .panel.links a.button { font-size: 15px; min-height: 38px; padding: 0 8px 0 16px; }

#home-panels .panel.announcements { background-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; border-radius: 0; flex: auto; max-width: 100%; }

#home-panels .panel.announcements .dot-heading { background-color: var(--white-10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: var(--radius); transition: background-color 0.2s ease-out; }
#home-panels .panel.shareprice .pad { margin: auto 0; }

#home-panels .lse { display: flex; flex-direction: column; gap: 2px; margin-top: 2px; font-size: 12px; line-height: 1; }
#home-panels .lse a { background-color: var(--white-10); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); border-radius: var(--radius); color: white; display: inline-flex; align-items: center; gap: var(--pad); padding: 16px var(--pad20); transition: all 0.2s ease-out; }
#home-panels .lse a time { color: var(--white-50); font-family: var(--mono); flex: 0 0 45px; font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase; transition: color 0.1s ease-out; }
#home-panels .lse a span { display: block; height: 1.1em; overflow: hidden; }

#home-panels .hover { transition: background-color 0.2s ease-out; }
#home-panels .hover:hover { background-color: var(--white-20); }
#home-panels .hover:hover .dot-heading i.dot { background-color: var(--blue); animation-name: pulse; }
#home-panels .panel.announcements a.dot-heading:hover { background-color: var(--white-20); }
#home-panels .panel.announcements a.dot-heading:hover i.dot { background-color: var(--blue); animation-name: pulse; }
#home-panels .lse a:hover { background-color: var(--white-20); }
#home-panels .lse a:hover time { color: white; }

@media (max-height:1000px) {
  #home-panels { margin-top: var(--pad20); padding: var(--pad20) 0; }
}
@media (max-width:1400px) {
  #home-panels .inner { gap: var(--pad20); }
  #home-panels .dot-heading { padding: var(--pad); }
  #home-panels .panel .pad { padding: 0 var(--pad) var(--pad); }
  #home-panels .panel.shareprice { max-width: 220px; }
}
@media (max-width:1200px) {
  #home-panels .panel.links { max-width: 280px; }
  #home-panels .panel.links a.button { font-size: 14px; }
}
@media (max-width:1080px) {
  #home-panels { padding: var(--pad20) 0; }
  #home-panels .inner { flex-wrap: wrap; }
  #home-panels .panel.shareprice { max-width: 50%; }
  #home-panels .panel.links { max-width: 500px; }
  #home-panels .panel.announcements { flex: 0 0 100%; }
  #home-panels .lse a { align-items: flex-start; padding: 14px var(--pad20); }
  #home-panels .lse a span { height: auto; line-height: 14px; }
  #home-panels .lse a time { line-height: 15px; }
}
@media (max-width:800px) {
  #home-panels .panel.shareprice { max-width: 220px; }
}
@media (max-width:600px) {
  #home-banner { --height: 100vw; height: auto; }
  #home-banner #banner-background { height: var(--height); bottom: auto; }
  #home-banner #banner-content { padding-top: 0; position: relative; top: auto; right: auto; bottom: auto; left: auto; }
  #home-banner #banner-content header .inner { min-height: var(--height); gap: 10px; justify-content: flex-end; padding-top: 80px; padding-bottom: var(--pad30); }
  #home-banner header h5 { font-size: 15px; }
  #home-panels { margin-top: 0; padding: 0; }
  #home-panels .inner { gap: 10px; padding: 10px; }
  #home-panels .dot-heading { padding: 10px var(--pad20); }
  #home-panels .panel .pad { padding: 0 var(--pad20) var(--pad20); }
  #home-panels .panel.shareprice { flex: 0 0 100%; max-width: 100%; }
  #home-panels .panel.links { flex: 0 0 100%; max-width: 100%; }
}

/* INVESTOR
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.investor { --page-bg: var(--black); --link-colour: var(--navy); }
body.investor #header { --background: rgba(50,50,60,0.3); --foreground: white; --hover: var(--white-75); --backdrop: blur(5px); }
body.investor #header a.button { --border-hover: var(--white-20); }
body.investor #header a.on { background-color: var(--white-5); color: white; }

body.investor #banner { background-color: var(--page-bg); border-bottom: 1px solid var(--graphite); }
body.investor #banner::before { background: linear-gradient(120deg, var(--black) 33%, var(--graphite) 100%); }

body.investor .content { --dark: var(--black); }
body.investor .block.dark.border { border-color: var(--white-10); }
body.investor .block.dark .inner { --line-colour: var(--white-10); --link-colour: var(--page-colour);  }
body.invester .block.dark a { color: var(--link-colour); }
body.investor .panel .overlay { --opacity: 0; background-color: rgba(15,15,20,var(--opacity)); }
body.investor .panel.dark { background-color: var(--black); }
body.investor .block.dark .panel.dark { background-color: var(--graphite); border: none; }

#announcements a { background-color: var(--white-5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 5px; color: var(--light); display: flex; gap: 20px; align-items: center; flex-wrap: wrap; line-height: 1; margin-bottom: 4px; padding: 15px 15px 10px; text-decoration: none; transition: all 0.1s ease-out; }
#announcements a div { flex: 0 0 20%; }
#announcements a>span { display: inline-block; font-size: var(--font-small); }
#announcements a span.date { flex-basis: 80px; color: var(--white-50); font-family: var(--mono); font-size: 13px; letter-spacing: 0.05em; line-height: 18px; }
#announcements a span.title { display: inline-block; flex: 1; line-height: 1.1; }
#announcements a span.type { color: var(--white-50); font-size: 12px; margin-left: auto; }
#announcements a button { font-family: var(--mono); font-size: 13px; text-transform: uppercase; pointer-events: none; }
#announcements a:hover { background-color: var(--white-10); color: var(--page-colour); opacity: 1; }
#announcements a:hover .button { --bg: var(--page-colour); --border: var(--bg); --link-colour: var(--colour-hover); --icon-bg: var(--dark-10); --colour: var(--dark); }

.dividends .row { background-color: var(--white-5); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 5px; display: flex; flex-wrap: wrap; margin-bottom: 4px; padding: 15px 15px 10px; }
.dividends .row:hover { background-color: var(--white-10); }
.dividends .row div { flex: 1; }
.dividends .row h6 { color: var(--white-50); font-size: 12px; margin-bottom: 10px; }
.dividends .row span { display: inline-block; font-family: var(--mono); font-size: var(--font-small); letter-spacing: 0.05em; line-height: 30px; text-transform: uppercase; }
.dividends .row div:first-child h6 { font-family: var(--medium); }
.dividends .row div:first-child span { color: var(--page-colour); font-family: var(--medium); font-size: var(--h5-size); }

@media (max-width:800px) {
  #announcements a { align-items: flex-start; gap: 10px; padding: 10px; }
  #announcements a span.title { line-height: 1.2; }
  #announcements a span.date { flex-basis: 70px; font-size: 11px; }
  #announcements a span.type { display: none; }
  #announcements a button { display: none; }
  .dividends .row span { line-height: 1; }
  .dividends .row h6 { margin: 15px 0 5px; }
  .dividends .row div { flex-basis: 50%; }
  .dividends .row div:first-child { flex-basis: 100%; margin-bottom: 0; }
  .dividends .row div:first-child h6 { margin-top: 0; }
}

/* NEWSROOM
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.newsroom #page-header { border-bottom: none; }
body.newsroom #filter { border-bottom: 1px solid var(--navy-10); padding-bottom: var(--pad30); }
body.newsroom #filter .inner { padding: var(--padding); }

.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad30); padding: var(--pad30) var(--pad20); }
.articles a { --padding: var(--pad20); background-color: white; border-radius: var(--radius); color: var(--colour); display: flex; flex-direction: column; overflow: hidden; text-decoration: none; }
.articles figure { overflow: hidden; }
.articles figure img { border-radius: 0; transition: all 0.5s ease-out; }
.articles header { padding: var(--padding) var(--padding) 0; }
.articles footer { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; margin-top: auto; padding: var(--padding); }
.articles h6 { margin: 0; }
.articles h5 { margin-top: 5px; }
.articles p { color: var(--grey); font-size: var(--font-small); line-height: 1.3; }
.articles .categories { flex: 1; display: flex; flex-wrap: wrap; gap: 2px; }
.articles .tag { --colour: var(--dark-75); pointer-events: none; }
.articles button { --bg: var(--navy-5); --colour: var(--dark-25); border: transparent; justify-content: center; padding: 0; min-height: 36px; width: 36px; pointer-events: none; }
.articles button i { background: transparent; }

.articles a:hover { opacity: 1; }
.articles a:hover img { opacity: 0.85; transform: scale(1.05); }
.articles a:hover h5 { color: var(--blue); }
.articles a:hover footer button { --bg: var(--blue); --colour: white; }

@media (max-width:1200px) {
  .articles { gap: var(--pad20); }
  .articles a { --padding: 15px; }
}
@media (max-width:600px) {
  .articles { grid-template-columns: repeat(1, 1fr); }
}

body.article main { padding: var(--header) var(--pad) var(--pad); }
#news-article .inner { background-color: white; border-radius: var(--radius); max-width: 1080px; overflow: hidden; }
#news-article header { border-bottom: 1px solid var(--cool); }
#news-article header img { height: 100%; object-fit: cover; }
#news-article header .heading { padding: var(--pad20) var(--pad30) var(--pad30); }
#news-article header h1 { font-size: var(--h3-size); margin: 0.2em 0 0.5em; }
#news-article header h6 { margin: 0; }
#news-article header p { color: var(--grey); line-height: 1.4; }
#news-article header .details { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; margin-top: auto; }
#news-article header .categories { display: flex; align-items: flex-end; gap: 2px; }
#news-article .dot-heading .dot { background-color: var(--colour); }
#news-article .content { background-color: transparent; padding: var(--pad30); }
#news-article .block { margin-bottom: var(--pad30); }
#news-article .block:last-child { margin-bottom: 0; }

@media (min-width: 1900px) {
  #news-article header p { font-size: var(--h5-size); }
}

@media (max-width: 1600px) {
  #news-article header { gap: var(--pad20); }
  #news-article header h1 { font-size: clamp(30px, 2.5vw, 40px); }
  #news-article .content { padding: var(--pad20); }
  #news-article .block { margin-bottom: var(--pad20); }
}

@media (max-width: 800px) {
  #news-article header .categories { flex-direction: column; }
}

@media (max-width: 440px) {
  body.article main { padding: var(--header) var(--pad20) var(--pad20); }
}

/* TIMELINE
------------------------------------------------------------------------------------------------------------------------------------------------------*/
#timeline { background-color: white; background-size: 100px 100px; background-image: linear-gradient(to right, transparent 1px, transparent 1px), linear-gradient(to bottom, var(--navy-5) 1px, transparent 1px); background-attachment: fixed; }
#timeline .inner { display: flex; flex-wrap: wrap; justify-content: space-between; padding: var(--pad40) 0; }

#timeline article { box-sizing: border-box; padding: var(--pad20); }
#timeline article .panel { padding: var(--pad20); }
#timeline article .panel.white { border: 1px solid var(--navy-10); }
#timeline article.full { flex: 0 0 100%; }
#timeline article.third { flex: 0 0 33.3333%; }
#timeline article.two-thirds { flex: 0 0 66.6666%; margin-left: auto; }
#timeline article.two-thirds + article.two-thirds { margin-left: 0; }
#timeline article.margin-small { margin-top: 2vw; }
#timeline article.margin-large { margin-top: 8vw; }
#timeline h6.year { background-color: var(--dark-5); border-radius: 5px; display: inline-block; padding: 6px 8px; }
#timeline .panel.dark h6.year { background-color: var(--white-10); }

@media (max-width: 1080px) {
    #timeline article.third { flex-basis: 50%; }
    #timeline article.two-thirds { flex-basis: 85%; margin-left: auto; }
}
@media (max-width: 600px) {
    #timeline article.two-thirds { margin-left: auto; margin-right: auto; }
    #timeline article.third { flex-basis: 75%; }
    #timeline article.third:nth-child(odd) { margin-left: auto; }
}

/* CONTACT
------------------------------------------------------------------------------------------------------------------------------------------------------*/
body.contact { --colour: white; background: var(--dark); }