:root{
  --bg-colour: #0b0f0d;
  --paper: #ffffff;
  --ink: #0f1a14;
  --muted: rgba(15,26,20,.72);

  --warm-grey: #f3f2ef;
  --soft-border: rgba(15,26,20,.12);

  --accent: #4a6b5b;   /* muted green */
  --accent-2: #6a8aa3; /* soft blue */

  --radius: 22px;
  --shadow: 0 18px 60px rgba(0,0,0,.12);

  --max: 1320px;
  --pad: clamp(18px, 3.2vw, 44px);

  --cinematic-max: 1400px;
}

/* Large laptops & desktops */
@media (min-width: 1400px){
  :root{
    --cinematic-max: 1600px;
  }
}

/* Very large / wide screens */
@media (min-width: 1800px){
  :root{
    --cinematic-max: 1800px;
  }
}

/* Ultra-wide displays (optional but nice) */
@media (min-width: 2200px){
  :root{
    --cinematic-max: 2000px;
  }
}

*{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
html, body{ overflow-x: hidden; }

body{
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--paper);
  color: var(--ink);
  line-height: 1.5;
}

a{ color: inherit; text-decoration: none; }
a:hover{ text-decoration: underline; }

h2{
  margin: 0 0 12px 0;
  font-weight: 400;
  letter-spacing: -.02em;
  font-size: clamp(22px, 2.4vw, 34px);
}

/* =========================
   NAVBAR (transparent + colour switch)
   ========================= */
.topbar{
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 50;
  padding: 16px var(--pad);
  background: transparent;
  color: rgba(255,255,255,.95); /* default text colour */
}

.topbar__inner{
  max-width: min(1600px, calc(100% - (var(--pad) * 2)));
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.brand{
  font-weight: 600;
  letter-spacing: .2px;
  color: inherit;
  transition: color .25s ease;
}

/* Logo sizing */
.brand svg{
  height: 40px;
  width: auto;
  display: block;
}

/* Force SVG to follow nav colour */
.brand svg .st0,
.brand svg .st1,
.brand svg .st2{
  fill: currentColor !important;
  stroke: currentColor !important;
}

.topbar__nav{
  display: flex;
  gap: 18px;
  align-items: center;
  font-size: 14px;
  color: inherit;
  transition: color .25s ease;
}

.nav-cta{
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.55);
  border-radius: 999px;
  background: transparent;
  color: inherit;
  transition: color .25s ease, border-color .25s ease;
  text-decoration: none;
}
.nav-cta:hover{ text-decoration: none; }

.topbar.on-light{
  color: rgba(15,26,20,.85);
}

.topbar.on-light .nav-cta{
  border-color: rgba(15,26,20,.22);
}

/* Burger menu icon */
.nav-toggle{
  display: none;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
}

.nav-toggle__bar{
  display: block;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}

.nav-toggle__bar + .nav-toggle__bar{
  margin-top: 6px;
}

@media (max-width: 920px){
  .topbar__nav{ display: none; }
  .nav-toggle{ display: block; }
}

/* =========================
   MOBILE MENU (full-screen)
   ========================= */
.mobile-nav{
  position: fixed;
  inset: 0;
  z-index: 60;
  display: none;
}

.mobile-nav.is-open{
  display: block;
}

.mobile-nav__screen{
  position: absolute;
  inset: 0;
  background: #ffffff;
  color: rgba(15,26,20,.88);
  padding: 22px var(--pad);
  display: flex;
  flex-direction: column;
}

.mobile-nav__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}

.mobile-nav__brand{
  font-weight: 600;
  letter-spacing: .2px;
  font-size: 16px;
}

.mobile-nav__close{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(15,26,20,.14);
  background: transparent;
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  color: rgba(15,26,20,.85);
}

.mobile-nav__links{
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 22px;
}

.mobile-nav__link{
  font-size: clamp(28px, 6.2vw, 44px);
  line-height: 1.08;
  letter-spacing: -0.02em;
  color: rgba(15,26,20,.88);
  text-decoration: none;
  padding: 8px 0;
}

.mobile-nav__link:hover{
  text-decoration: none;
  opacity: .85;
}

.mobile-nav__primary{
  margin-top: 8px;
  display: inline-block;
  color: rgba(74,107,91,.95);
}

.mobile-nav__footer{
  margin-top: auto;
  padding-top: 22px;
  border-top: 1px solid rgba(15,26,20,.08);
  font-size: 14px;
  color: rgba(15,26,20,.70);
}

.mobile-nav__footer a:hover{ text-decoration: underline; }

/* =========================
   SECTIONS
   ========================= */
.section{
  position: relative;
  width: 100%;
}

/* =========================
   HERO
   ========================= */
.hero{
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: calc(var(--pad) * 2.8) var(--pad);
  background: var(--bg-colour);
}

.hero__bg{
  position: absolute;
  inset: -6% 0 -6% 0;
  background-image: var(--bg-img);
  background-size: cover;
  background-position: center;
  transform: translate3d(0,0,0) scale(1.06);
  will-change: transform;
}

.overlay{
  position:absolute;
  inset:0;
  pointer-events:none;
}

.overlay--soft{
  background: radial-gradient(
    90% 80% at 50% 55%,
    rgba(0,0,0,.12),
    rgba(0,0,0,.38)
  );
}

.hero__content{
  position: relative;
  max-width: 900px;
  text-align: left;
}

.hero h1{
  margin: 0 0 14px 0;
  font-weight: 500;
  letter-spacing: -0.02em;
  font-size: clamp(32px, 4.6vw, 58px);
  line-height: 1.08;
  color: rgba(255,255,255,.95);
}

@media (max-width: 720px){
  .hero{
    align-items: center;
  }
  .hero__content{
    text-align: center;
  }
  .hero h1{
    text-align: center;
  }
}

/* =========================
   FADE-IN ON SCROLL
   ========================= */
.fade-in{
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .9s ease, transform .9s ease;
}
.fade-in.is-visible{
  opacity: 1;
  transform: translateY(0);
}

/* =========================
   MISSION
   ========================= */
.mission{
  min-height: 70vh;
  display: grid;
  place-items: center;
  padding: calc(var(--pad) * 2.4) calc(var(--pad) * 2.2);
  background: #ffffff;
}

.mission__inner{
  max-width: var(--max);
  width: 100%;
  display: flex;
  justify-content: center;
}

.mission-statement{
  max-width: 820px;
  text-align: center;
}

.mission-statement h2{
  margin: 0;
  font-weight: 400;
  line-height: 1.4;
  letter-spacing: -0.01em;
  font-size: clamp(26px, 2.6vw, 36px);
}

/* Softer fade-in */
.mission-statement.fade-in{
  transition: opacity 1.6s ease-out, transform 1.6s ease-out;
}

/* =========================
   CINEMATIC IMAGE / CAROUSEL
   ========================= */
.image-crop{
  padding: 0 var(--pad) calc(var(--pad) * 1.2);
  background: #ffffff;
}

.image-crop__inner{
  max-width: var(--cinematic-max);
  margin: 0 auto;
  aspect-ratio: 16 / 7;
  overflow: hidden;
  background: #eaeaea;
}

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

/* Carousel wrapper */
.image-crop__inner.carousel{
  position: relative;
  overflow: hidden;
  cursor: none;
}

/* Track + slides */
.carousel__track{
  display: flex;
  height: 100%;
  width: 100%;
  transform: translate3d(0,0,0);
  transition: transform .55s ease;
  will-change: transform;
}

.carousel__slide{
  flex: 0 0 100%;
  height: 100%;
}

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

/* Dots bottom-right */
.carousel__dots{
  position: absolute;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  z-index: 5;
}

.carousel__dot{
  width: 7px;
  height: 7px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.8);
  background: rgba(255,255,255,.35);
  opacity: .9;
  padding: 0;
}

.carousel__dot.is-active{
  background: rgba(255,255,255,.95);
}

/* Invisible click zones */
.carousel__zone{
  position: absolute;
  top: 0;
  bottom: 0;
  width: 50%;
  border: 0;
  background: transparent;
  z-index: 4;
  padding: 0;
  cursor: none;
}
.carousel__zone--prev{ left: 0; }
.carousel__zone--next{ right: 0; }

/* Custom cursor arrow positioned by CSS vars set in JS */
.image-crop__inner.carousel::after{
  content: "";
  position: absolute;
  left: var(--cx, 50%);
  top: var(--cy, 50%);
  width: 22px;
  height: 22px;
  border-right: 2px solid rgba(255,255,255,.9);
  border-bottom: 2px solid rgba(255,255,255,.9);
  transform: translate(-50%, -50%) rotate(-45deg);
  opacity: 0;
  pointer-events: none;
  z-index: 6;
  transition: opacity .15s ease;
}

.image-crop__inner.carousel.is-hovering::after{
  opacity: 1;
}

.image-crop__inner.carousel.is-left::after{
  transform: translate(-50%, -50%) rotate(135deg);
}

.image-crop__inner.carousel.is-right::after{
  transform: translate(-50%, -50%) rotate(-45deg);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .carousel__track{ transition: none; }
}

/* Mobile: allow normal cursor */
@media (max-width: 768px){
  .image-crop__inner.carousel{ cursor: default; }
  .carousel__zone{ cursor: pointer; }
  .image-crop__inner.carousel::after{ display: none; }
}

/* =========================
   RESEARCH
   ========================= */
   .research{
    background: #ffffff;
    padding: calc(var(--pad) * 2) var(--pad) calc(var(--pad) * 3.4);
  }
  

.research__inner{
  max-width: var(--cinematic-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: clamp(32px, 6vw, 120px);
  align-items: start;
}

.research__title h2{
  margin: 0;
  font-weight: 400;
  font-size: clamp(32px, 3.4vw, 48px);
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: rgba(15,26,20,.9);
}

.research__copy{
  max-width: 640px;
}

@media (max-width: 900px){
  .research__inner{
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .research__copy{ max-width: none; }
}

@media (max-width: 900px){
  .research{
    padding-left: var(--pad);
    padding-right: var(--pad);
  }
}


/* Benefits list */
.research-benefits{
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 22px;
}

.research-benefits li{
  display: grid;
  gap: 6px;
}

.research-benefits .research-intro span{
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.7;
  color: rgba(15,26,20,.75);
}

.research-benefits strong{
  font-weight: 600;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.6;
  color: rgba(15,26,20,.9);
}

.research-benefits span{
  font-weight: 400;
  font-size: clamp(18px, 1.9vw, 22px);
  line-height: 1.7;
  color: rgba(15,26,20,.72);
}

/* =========================
   COLLABORATION
   ========================= */
.collaboration{
  background: #ffffff;
  padding: 0 var(--pad) calc(var(--pad) * 4);
}

.collaboration .image-crop{
  padding: 0;            /* use section padding */
  background: transparent;
  margin-bottom: calc(var(--pad) * 1.2);
}


.collaboration__text{
  max-width: var(--cinematic-max);
  margin: 0 auto;
}

.collaboration__text p{
  margin: 0;
  max-width: 70%;
  font-weight: 400;
  font-size: clamp(26px, 2.6vw, 36px);
  line-height: 1.4;
  letter-spacing: -0.01em;
  color: rgba(15,26,20,.9);
}

@media (max-width: 768px){
  .collaboration{
    padding-bottom: calc(var(--pad) * 3);
  }
  .collaboration__text p{
    max-width: 100%;
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.3;
  }
}

@media (max-width: 768px){
  .image-crop__inner{
    aspect-ratio: auto;  /* override 16:7 */
    height: 50vh;        /* IMPORTANT: actual height so children can be 100% */
  }

  /* make sure images fill the new height */
  .image-crop__inner img{
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}


/* =========================
   CONTACT
   ========================= */
.contact{
  background: #ffffff;
  padding: calc(var(--pad) * 4) calc(var(--pad) * 2.2);
}

.contact__inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: center;
}

.contact-content{
  max-width: 720px;
  text-align: center;
}

.contact-intro{
  margin: 12px 0 28px 0;
  font-size: clamp(16px, 1.6vw, 18px);
  line-height: 1.6;
  color: rgba(15,26,20,.75);
}

.contact-details{
  display: grid;
  gap: 12px;
}

.contact-details a{
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 500;
  color: rgba(15,26,20,.9);
  text-decoration: none;
}

.contact-details a:hover{
  text-decoration: underline;
}

/* =========================
   FOOTER
   ========================= */
.footer{
  padding: 26px var(--pad);
  background: #ffffff;
  border-top: 1px solid rgba(15,26,20,.08);
}

.footer__inner{
  max-width: var(--max);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  flex-wrap: wrap;
}

.footer__meta{
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  color: rgba(15,26,20,.70);
  font-size: 13px;
}

.footer__brand svg{
  height: 28px;   /* adjust if you want it larger */
  width: auto;
  display: block;
}