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

body {
    font-family: 'Libre Baskerville', serif;
    background: #ffffff;
    color: #000;
    line-height: 1.6;
}

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

h1 { font-size: 32px; letter-spacing: 0px; }
h2 { font-size: 20px; font-weight: 400; line-height: 1.3; } /* Global for both hero & grid */
h3 { font-size: 28px; font-weight: 600; }
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: #000; /* default black text */
	letter-spacing: 0.5px;
}

/* 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: #000 !important; }
.white { color: #fff !important; }
.small { font-size: 12px; line-height: 1.4; }

/* =========================
   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: 10px;             /* smaller than main text */
    font-weight: 100;            /* medium weight */
    color: #666;
    margin-top: 8px;            /* 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 {
    width: 100%;
    position: sticky;
    top: 0;
    background: #fff;
    z-index: 1000;
}

.header-inner {
    max-width: 1776px;
    margin: 0 auto;
    padding: 20px 40px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

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

/* 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 */
}

/* =========================
   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: #000;
    color: #fff;
    font-size: 14px;
    padding: 20px 0;
}

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

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

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

.footer-logo {
    margin: 20px 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;
}

/* =========================
   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; }

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

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

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

  .menu-toggle {
      display: block;
  }

  .nav {
      display: none;
  }

.nav.active {
    position: fixed;
    inset: 0;
    background: #000;   /* now black background */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 40px;
    z-index: 1100;
}

.nav.active a {
    font-size: 28px;
    color: #fff;        /* now white text */
}

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

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

  /* =========================
     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 */
}