/* =========================
   RESET / BASE
   ========================= */
* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

@font-face {
    font-family: 'HouseSans';
    src: url('/fonts/sans-serif.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
	letter-spacing: 0.02em;
}

body {
    font-family: 'HouseSans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    font-weight: 400;
    background: #ffffff;
	padding-top: 80px;
    color: #212529;
    line-height: 1.6;
	letter-spacing: 0.02em;
}

/* =========================
   TYPOGRAPHY (GLOBAL)
   ========================= */
h1, h2, h3, h4, h5, h6 {
    color: #1A1A1A;
    margin-bottom: 3px;
    font-weight: 400;
    line-height: 1.3;
}

h1 { font-size: 38px; font-weight: 400; letter-spacing: 0px; line-height: 1.2em; }
h2 { font-size: 20px; font-weight: 400; letter-spacing: 0.05em; line-height: 1.05em; }
h3 { font-size: 28px; font-weight: 600; letter-spacing: 0px; line-height: 1.1em; }
h4 { font-size: 24px; font-weight: 600; }
h5 { font-size: 20px; font-weight: 500; }
h6 { font-size: 16px; font-weight: 500; }

p {
    font-size: 16px;
    line-height: 1.6;
    color: #212529; /* default off black text */
	letter-spacing: 0.02em;
}


/* Mobile burger menu contact text */

.nav.active .nav-contact .mobile-contact-text a {
    font-size: 16px;
    color: #fff;
}

.mobile-contact-text {
    font-size: 16px;
    line-height: 1.6;
    color: #fff;
    letter-spacing: 0.02em;
	text-decoration: none;
}

.mobile-contact-text a {
    font-size: inherit;  /* inherits 16px from parent */
    color: inherit;      /* inherits white from parent */
    text-decoration: none;
}

.mobile-contact-text a:hover {
    opacity: 0.6;
}

/* Grey text for card content or special sections */
.grey {
    color: #666 !important; /* ensures it overrides parent links */
}

.item a p.grey-text {
    color: #666; /* your grey */
}

/* Global link hover */
a {
    color: inherit;
	text-decoration: none;
}

a:hover {
    opacity: 0.6;
}

/* Logo hover over - no effect */
.logo:hover {
    opacity: 1;
}

/* Utility classes */
.black { color: #212529 !important; }
.white { color: #fff !important; }
.small { font-size: 12px; line-height: 1.4; }

/* =========================
   MOBILE ONLY LOGO - HIDES ON DESKTOP
   ========================= */
.nav-logo {
    display: none;
}

/* =========================
   INDUSTRY TAG TEXT BOX
   ========================= */
   
.industry-tag {
    display: inline-block;       /* so the width fits the text */
    padding: 2px 8px;           /* space inside the box */
    border: 1px solid #666;      /* black outline */
    border-radius: 0px;           /* optional rounded corners */
    font-size: 12px;             /* smaller than main text */
    font-weight: 100;            /* medium weight */
    color: #666;
    margin-top: 6px;            /* space above from the paragraph */
    letter-spacing: 0.5px;       /* optional spacing */
}

/* =========================
   BUTTONS
   ========================= */

.btn {
    padding: 10px 22px;
    border: 1px solid #666;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.6px;
    text-decoration: none;
    color: #666;
    background: transparent;
    transition: opacity 0.2s ease, background 0.2s ease;
}

.item .btn {
    display: inline-block;
    width: auto;
}

.btn:hover {
    background: #F6F6F6;
    /* opacity comes from global a:hover */
}

/* =========================
   HEADER
   ========================= */
   
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background: rgba(255, 255, 255, 0.97);
    z-index: 1000;
    transition: transform 0.6s ease, opacity 0.9s ease-in;
    opacity: 0; /* start hidden for fade-in */
}

.header--hidden {
    transform: translateY(-100%);
}

.site-header.hide {
    transform: translateY(-100%);
}

.header-inner {
    max-width: 1776px;
    margin: 0 auto;
    height: 80px;            /* lock header height */
    padding: 0 40px;         /* horizontal padding only */
    display: flex;
    align-items: center;     /* vertical centering */
    justify-content: space-between;
    box-sizing: border-box;  /* include padding in height */
}

.logo img {
    display: block;
    max-height: 50px;
    width: auto;
}

.nav {
    display: flex;
    gap: 40px;
}

.nav a {
    text-decoration: none;
    color: #000;
    font-size: 16px;
}

.nav a:hover {
    text-decoration: none;
}

/* =========================
   BURGER MENU
   ========================= */
.menu-toggle {
    display: none; /* hidden on desktop */
    position: relative;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
    z-index: 1200;
}

/* Burger lines */
.menu-toggle span {
    position: absolute;
    left: 0;
    width: 100%;
    height: 2px;
    background: #000; /* default black lines */
}

.menu-toggle span:nth-child(1) { top: 0; }
.menu-toggle span:nth-child(2) { top: 8px; }
.menu-toggle span:nth-child(3) { top: 16px; }

/* Active state → X */

.menu-toggle.active span:nth-child(1) {
    transform: rotate(45deg);
    top: 8px;
    background: #fff; /* white line for X */
}

.menu-toggle.active span:nth-child(2) {
    display: none; /* middle line disappears */
}

.menu-toggle.active span:nth-child(3) {
    transform: rotate(-45deg);
    top: 8px;
    background: #fff; /* white line for X */
}

/* Burger contact details hide on desktop */
.nav-contact {
    display: none; /* hidden on desktop */
}

/* =========================
   HERO
   ========================= */
   /* Hero slider */
.hero {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hero-slider {
    position: relative;
    width: 100%;
    height: 90vh;
}

.slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 1s ease-in-out;
}

.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

.slide-text {
    position: absolute;
    bottom: 40px;
    left: 40px;
    z-index: 10;
    color: #fff;       /* adjust as needed */
    max-width: 1776px;
}

.slide-text h2, 
.slide-text p {
    margin: 0;
    color: inherit;
}

/* Active slide */
.slide.active {
    opacity: 1;
}

/* Hero text */

.hero-text h2 {
    color: #000; /* or whatever your heading colour is */
}

.hero-text p {
    color: #555;
}

.hero-link a {
    color: inherit;
    text-decoration: none;
}

.hero {
    width: 100%;
}

.hero-image {
    width: 100%;
    height: 90vh;
    overflow: hidden;
}

.hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Hero text BELOW image */
.hero-text {
    max-width: 1776px;
    margin: 0 auto;
    padding: 24px 40px 0;
    text-align: left;
}

/* Hero links: no hover changes */
.hero-text a {
    color: inherit;
    text-decoration: none;
}

.hero-text a:hover {
    color: inherit;
    opacity: 1;
    text-decoration: none;
}

.hero-link {
    display: block;       /* so it behaves like a section */
    text-decoration: none; /* no underline */
    color: inherit;       /* text keeps its current color */
}

.hero-link:hover {
    color: inherit;       /* no color change */
    text-decoration: none; /* no underline */
	opacity: 1 !important;   /* force no fade */
    cursor: pointer;      /* shows it's clickable */
}

/* =========================
   MAIN CONTENT
   ========================= */
.content {
    padding: 40px;
	padding-bottom: 120px; /* breathing room before footer */
}

.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 60px;
	max-width: 1776px;
    margin: 0 auto;        /* centers the grid */
}

/* Featured (larger) grid item */
.item--featured {
    grid-column: span 2;
}

/* Featured grid item - covers 1 column */
.item--right {
    grid-column: -3 / -1; /* last column only */
    text-align: left;
}

/* Right 2 columns only */
.item--right-1 {
    grid-column: -3 / -2; /* second-to-last column */
}

.item--right-2 {
    grid-column: -2 / -1; /* last column */
}

/* =========================
   FEATURED FULL-WIDTH ITEM (TO MARGINS)
   ========================= */

.item--featured-to-margin {
    grid-column: 1 / -1;   /* span full grid width */
}

.item--featured-to-margin img {
    width: 100%;
    height: auto;
}

/* Article items */

.item a {
    display: block;       /* keeps full clickable area */
    text-decoration: none; /* no underline */
    color: inherit;       /* uses parent text color */
}

.item a.inline-link {
    display: inline-block;  /* wraps only the text */
}

.item a:hover {
    color: inherit;       /* prevents text color from changing */
    opacity: 1;           /* prevents image or text from fading */
    text-decoration: none; /* ensures no underline appears */
}

.item a.btn {
    display: inline-block;
    width: auto;
}

.inline-link {
    display: inline-block;  /* makes clickable area only wrap text */
    text-decoration: underline; /* optional styling */
    color: inherit;          /* optional to match surrounding text */
}

.item img {
    width: 100%;
    height: auto;
    display: block;
	margin-bottom: 16px;
}

.item h2 {
    font-size: 18px;
    font-weight: 400;
    margin-bottom: 3px;
}

.item p {
    font-size: 16px;
    color: #000;
	margin-bottom: 0px;
}


/* =========================
   FOOTER
   ========================= */
.site-footer {
    background: #FFF;
    color: #000;
    font-size: 14px;
    padding: 40px 0;
}

.site-footer a {
    color: #000;
    text-decoration: none;
}

.site-footer a:hover {
    text-decoration: none;
}

.footer-inner {
    max-width: 1776px;
    margin: 0 auto;
    padding: 0 40px;
}

.footer-logo {
    margin: 0px 0;
}

.footer-logo img {
    width: 100%;
    height: auto;
    display: block;
}

.footer-contact p {
    margin-bottom: 15px;
}

/* Footer bottom */
.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 30px;
}

.footer-nav {
    display: flex;
    gap: 25px;
}

.footer-copy {
    font-size: 14px;
}

/* Footer top flex container */
.footer-top {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 40px;
}

/* Logo */
.footer-logo img {
  width: 140px;
  height: auto;
  display: block;
}

/* Contact + links container */
.footer-contact {
  display: flex;
  gap: 60px;          /* space between contact info and links */
  flex-wrap: wrap;    /* allow wrap on narrow screens */
  flex: 1 1 300px;    /* shrink if needed */
  justify-content: flex-end; /* right aligned on wide screens */
}

/* Individual sections inside contact */
.footer-contact .contact-info,
.footer-contact .footer-links {
  flex: 0 1 200px;  /* min width to prevent collapsing */
}

/* =========================
   Parallax wrap
   ========================= */
.parallax-wrap {
  position: relative;
  width: 100%;
  height: 110vh;          /* 🔑 important */
  overflow: hidden;
  background: #000;
  padding: 0;            /* remove accidental spacing */
  aspect-ratio: 16 / 16;   /* tweak this */
}

.parallax-inner {
  position: relative;
  width: 100%;
  height: 100%;
}

/* Shared SVG styles */
.layer {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: auto;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* stacking order */
.layer-1 { z-index: 1; }
.layer-2 { z-index: 2; }
.layer-3 { z-index: 3; }


/* =========================
   PAGE FADE-IN (whole page, including header)
   ========================= */

/* Start hidden */
body > * {
  opacity: 0;
  transition: opacity 0.30s ease-in;
}

/* Explicitly include the header */
.site-header {
  opacity: 0;                      /* start hidden */
  transition: opacity 0.30s ease-in, transform 0.6s ease; /* keep your existing transform */
}

/* Fade in once page is loaded */
body.page-loaded > * {
  opacity: 1;
}

body.page-loaded .site-header {
  opacity: 1;
}

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

/* Header / logo / nav adjustments */
  .header-inner {
      padding: 15px 20px;
  }

  .logo img {
      max-height: 40px;
  }

  .menu-toggle {
      display: block;
  }

.nav {
    position: fixed;
    inset: 0;
    background: #000;

    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;

    padding: 20px;
    gap: 10px;
    z-index: 1100;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;

    transition: opacity 0.25s ease-out;
}

.nav.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav.active a {
    font-size: 24px;
    color: #fff;        /* Mobile burger menu text link colour*/
	letter-spacing: 0.05em;
	align-self: flex-start; /* stop full-width stretching */
}

.nav.active a:hover {
    opacity: 0.6;  /* subtle highlight on hover */
    color: #fff;
}

.nav.active .nav-logo img {
    max-height: 40px;  /* smaller logo */
    height: auto;      /* keeps aspect ratio */
	filter: invert(100%);
}

/* =========================
   BURGER CONTACT DETAILS
   ========================= */
.nav.active .nav-contact {
        display: block;       /* show only when menu is open */
        margin-top: auto;     /* push to bottom of menu */
        text-align: left;
        color: #fff;
        font-size: 14px;
        line-height: 1.6;
    }

.nav.active .nav-contact a {
        color: #FFF;
        text-decoration: none;
    }

.nav.active .nav-contact a:hover {
        opacity: 0.6;
    }



/* =========================
   BURGER LOGO
   ========================= */
  .nav-logo {
      display: none;
  }

  .nav.active .nav-logo {
      display: block;
	  margin-bottom: 60px; /* <-- adds space below the logo */
  }

  /* Hero adjustments */
  .hero-text {
      padding: 20px;
  }

  /* Content adjustments */
  .content {
      padding: 20px;
      padding-bottom: 80px;
  }

  /* Grid adjustments */
  .item--featured {
      grid-column: span 1;
  }

  .item--right,
  .item--right-1,
  .item--right-2,
  .grid-right {
      grid-column: 1 / -1; /* full width on mobile */
  }

  /* Footer adjustments */
  .footer-inner {
      padding: 0 20px;
  }

  .footer-bottom {
      flex-direction: column;
      align-items: flex-start;
      gap: 15px;
  }
  
  /* =========================
     ITEM PAIR
     ========================= */
  .footer-top {
    flex-direction: column;
    align-items: flex-start; /* everything aligns left */
  }

  .footer-contact {
    justify-content: flex-start; /* stacked items align left */
    width: 100%;
    gap: 40px;
  }

  .footer-contact .contact-info,
  .footer-contact .footer-links {
    width: 100%; /* fill container */
  }
  
  /* =========================
     MOBILE PARALLAX LAYERS
     ========================= */

.parallax-wrap {
    position: relative;
    height: 60vh;       /* taller container allows SVG to grow */
    overflow: hidden;   
    background: #000;
}

.parallax-inner {
    position: sticky;
    top: 0;
    height: 100%;        /* fills the container */
	width: 220%;         /* slightly larger than container */
    overflow: visible;   /* let the SVG scale outside if needed */
}

.layer {
    position: absolute;
    top: 50%;
    left: 23%;
    width: 120%;         /* slightly larger than container */
    height: auto;        /* maintain aspect ratio */
    transform: translate(-50%, -50%);
    object-fit: cover;    /* fills container, may crop slightly */
}