html {
    /* COLOURS */
    --white:#fff;
    --black:#000;
    --light-grey:#EFEEEE;
    --dark-grey:#303234;
    --mainBrandColour:#505F46;
    --secondaryBrandColour:#5F2D31;
    --cream:#E8E0D1;
    --brown:#CCBDAE;
    --green1:#7F8675;
    --green2:#4E5443;
    --gradient:linear-gradient(0deg, rgba(78,84,67,1) 0%, rgba(127,134,117,1) 100%);
    /* FONTS */
    --baseFont:"azo-sans-web",Arial,sans-serif;
    --lightFontWeight:300;
    --regularFontWeight:400;
    --mediumFontWeight:500;
    --boldFontWeight:700;
    --blackFontWeight:900;
    /* TRANSITIONS */
    --transition-default:all 0.3s ease-out;
}

/* RESETS */
*,
*::before,
*::after {box-sizing:border-box;}
* {margin:0; padding:0; font:inherit;}
html {scroll-behavior:smooth; font-size:1rem; -moz-text-size-adjust:none; -webkit-text-size-adjust:none; text-size-adjust:none;}
body {min-height:100vh; line-height:1.4; font-family:var(--baseFont); font-size:15px; color:var(--dark-grey); font-weight:var(--regularFontWeight); background:var(--light-grey);}
h1,h2,h3,h4,h5,h6 {line-height:1; margin:0 0 1.75rem 0;}
ul,ol  {padding-left:0; margin-bottom:1.5rem;}
ul li {margin-left:1rem;}
img,
picture,
svg {max-width:100%; display:block;}
em {font-style:italic;}
strong {font-weight:var(--boldFontWeight);}
p {margin:0 0 1.5rem 0;}
a {transition:var(--transition-default); color:var(--dark-grey); text-decoration:none;}
a:hover {color:var(--secondaryBrandColour);}
.pt-0 {padding-top:0 !important;}
.pb-0 {padding-bottom:0 !important;}
.img-fit {object-fit:cover; width:100%; height:100%;}

@media (prefers-reduced-motion:reduce) {
  /* Remove animations & transitions */
  html {scroll-behavior:auto;}
  *,
  *::before,
  *::after {
    animation-duration:0.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:0.01ms !important;
    scroll-behavior:auto !important;
  }
}

/* Layout */
.container {width:min(100%, 1240px); margin:0 auto; padding:0 30px;}
.container>*:last-child {margin:0; }
section,.section {padding:60px 0;}
main {background:var(--white); text-transform:uppercase;}

/* Text */
.level1-title {font-size:36px; font-weight:var(--mediumFontWeight);}
.level2-title {font-size:36px; font-weight:var(--mediumFontWeight);}
.level3-title {font-size:25px;}

.main-colour {color:var(--mainBrandColour);}
.main-colour-light {color:var(--green1);}
.secondary-colour {color:var(--secondaryBrandColour);}

.text-right {text-align:right;}


/* Header */
header {background:var(--dark-grey); height:62px; color:var(--white); padding:10px 0; position:absolute; top:0; left:0; width:100%; z-index:3;}
.header-columns {position:relative; display:grid;}
.header-logo {width:93px;}
.header-logo a {display:block;}
.header-brochure {position:absolute; right:0; bottom:-74px; z-index:2; overflow:hidden;}
.header-brochure a {display:flex; font-size:12px; text-align:center; align-items:center; background:var(--secondaryBrandColour); color:var(--white); width:120px; height:64px; border-bottom-left-radius:20px; border-bottom-right-radius:20px;}
.header-brochure a:hover {background:var(--dark-grey);}


/* Hamburger */
.hamburger {width:40px; height:40px; z-index:3; position:relative; display:block; letter-spacing:0; line-height:0.875rem; text-align:center; color:var(--white); cursor:pointer; justify-self:flex-end;}
.hamburger span {display:none;}
.hamburger .nav-icon::after, .hamburger .nav-icon::before, .hamburger .nav-icon div {background-color:var(--cream); border-radius:0; content:''; display:block; height:4px; margin:0.313rem 0; transition:all .2s ease-in-out;}
.hamburger .nav-icon:hover::after, .hamburger .nav-icon:hover::before, .hamburger .nav-icon:hover div {background-color:var(--white); opacity:0.8;}
    
body.open .hamburger .nav-icon div:first-child {transform:translateY(4px) rotate(135deg);}
body.open .hamburger .nav-icon div:last-child {transform:translateY(-4px) rotate(-135deg);}
body.open .hamburger .nav-icon::before {scale:0;}
body.open .hamburger .nav-icon::after {scale:0;}


/* Nav */
nav ul {margin:0; margin-right:2.6rem; list-style:none;}
nav ul li {position:relative; margin:0;}
nav ul li a {text-transform:uppercase; text-decoration:none; color:var(--white);}
nav ul li a:hover {color:var(--white); opacity:0.7;}
nav ul li a.active {color:var(--white); font-weight:var(--boldFontWeight);}
nav ul li::before {content:''; position:absolute; top:100%; width:100%; height:0; background:url(/images/lines-nav-white.svg) no-repeat top right;  background-size:203px auto; opacity:0.2; transition:var(--transition-default); left:50%; translate:-50% 0;}
nav ul li:has(a:hover)::before,
nav ul li.active::before {height:28px;}
nav ul li:has(a:hover)::before {transition-delay:500ms;}


/* Footer */
footer {padding:76px 0; position:relative; background:var(--light-grey); position:relative; z-index:2;}
footer::after {content:""; width:380px; height:80px; bottom:0; right:0; background:url(/images/lines-white.svg) no-repeat top right; position:absolute; background-size:372px auto;}
.footer-company {font-size:15px; border-top:1px solid var(--dark-grey); padding:2rem 0; line-height:2;}
.footer-company img {height:60px;}
.footer-company strong {color:var(--secondaryBrandColour);}
.footer-notice,
.footer-author {font-size:12px;}
.footer-author a {white-space:nowrap;}


/* Tabs*/
.nav-tabs {overflow:hidden; display:flex; gap:3rem; justify-content:flex-end;}
.nav-tabs button {background-color:inherit; border:none; outline:none; cursor:pointer; padding:14px 0; transition:var(--transition-default); color:var(--mainBrandColour); letter-spacing:.1em; transition:text-shadow .3s;}
.nav-tabs button.active,
.nav-tabs button:hover {text-shadow:0 0 .65px var(--mainBrandColour), 0 0 .65px var(--mainBrandColour);}
.nav-tabs button:nth-child(2) {color:var(--secondaryBrandColour);}
.nav-tabs button:nth-child(2).active,
.nav-tabs button:nth-child(2):hover {text-shadow:0 0 .65px var(--secondaryBrandColour), 0 0 .65px var(--secondaryBrandColour);}
.tab-container {display:grid;  grid-template-columns:1fr;}
.tab-content {opacity:0; transition: var(--transition-default);  grid-row-start: 1; grid-column-start: 1; }
  .tab-content.show {opacity:1;} 


/* Table */
.table {text-align:left; max-width:560px; color:var(--mainBrandColour);}
.table-row {display:flex; border-bottom:1px solid #707070; padding:1rem 0;} 
.table-col {flex:1 1 50%; padding-right:1rem; text-transform:none;}
.table-col:first-child {flex:0 0 60%; text-transform:uppercase;}


@media (max-width:829px) { 
    /* Mobile --- Header + Nav */
    .header-nav {position:absolute; height:100vh; transition:var(--transition-default); top:calc(100% + 20px); right:-110%; background:var(--mainBrandColour); z-index:4; width:80vw; background:var(--mainBrandColour); background:var(--gradient);}
    .header-columns {grid-template-columns:2fr 1fr; align-items:center;}
    header {z-index:3; overflow-x: clip;}
    body::before {content:''; background:var(--black); position:absolute; top:0; right:0; width:100vw; pointer-events:none; opacity:0; z-index:3; height:100vh; transition:var(--transition-default);}
    body.open {overflow:hidden;}
    body.open::before {transition-delay:50ms; opacity:0.9; pointer-events:unset;}
    body.open .header-nav {right:-30px;}
    nav {text-align:right; margin-right:30px; margin-top:46px;}
    nav ul li {margin-bottom:4rem;}
    nav ul li a {font-size:22px;}
    nav ul li:nth-child(1)::before {width:133px;}
    nav ul li:nth-child(2)::before {width:203px;}
    nav ul li:nth-child(3)::before {width:175px;}
    nav ul li:nth-child(4)::before {width:133px;}
    nav ul li::before {left:auto; translate:0 0; right:0;}
}

@media (max-width:576px) { 
    /* Mobile --- Header + Nav */
    .header-nav {top:calc(100% + 10px);}
}

@media (min-width:470px) {
    /* Footer */
    .footer-columns .column:first-child {display:flex; gap:1rem;}
    .footer-company {flex:0 0 calc(50% - 1rem);}
}

@media (min-width:576px) {
    /* Header */
    header {padding:20px 0; height:105px;}
    .header-logo {width:146px;}
    .header-brochure a {font-size:15px; width:170px;}  
    .header-brochure {bottom:-84px;}

    /* Text */
    .level1-title {font-size:45px;}
    .level2-title {font-size:45px;}
    .level3-title {font-size:25px;}
}

@media (min-width:768px) {
  /* Footer */
  .footer-columns .column:first-child {display:block;}
  .footer-company {display:flex; --footer-gap:1rem; --footer-columns:3; gap:var(--footer-gap);}
  .footer-company>div {width:calc((100% / var(--footer-columns)) - var(--footer-gap) + (var(--footer-gap) / var(--footer-columns)));}
}

@media (min-width:830px) {
  /* Desktop -- Header + Nav */
  .hamburger {display:none;}
  nav {margin-top:22px;}
  nav ul {display:flex; gap:2rem;}
  nav ul li:before {top:auto; bottom:calc( (-100%) - 15px);}
  nav ul li a {font-size:17px;}
  nav ul li:nth-child(1)::before {width:105px;}
  nav ul li:nth-child(2)::before {width:175px;}
  nav ul li:nth-child(3)::before {width:147px;}
  nav ul li:nth-child(4)::before {width:105px;}
  .header-columns {grid-template-columns:1fr 2fr;}
}

@media (min-width:940px) {
  /* Header + Nav */
  nav ul {gap:4rem;}
  /* Footer */
  .footer-columns {display:grid; justify-content:space-between; grid-template-columns:max(668px) minmax(auto,366px); gap:2rem;}
}

@media (min-width:992px) {
    /* Text */
    .level1-title {font-size:60px;}
    .level2-title {font-size:50px;}
}