/* Magnite Technologies — static rebuild of the Wix landing page.
   One coordinate system (--u) reproduces Wix's fixed layouts:
   desktop  ≥ 980 px : 980-unit column at 1 px per unit
   tablet  768–979 px: the same desktop layout, scaled to the screen width (as Wix does on tablets)
   mobile   < 768 px : Wix's separate 320-unit mobile layout, scaled to the screen width (capped at 1.5 px/unit)
   Element positions are set inline: --x/--y/--w/--h (desktop) and --mx/--my/--mw/--mh (mobile). */

@font-face { font-family: 'Jost'; src: url('../fonts/jost-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-400.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-400-italic.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: 'Jost'; src: url('../fonts/jost-500.woff2') format('woff2'); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Barlow'; src: url('../fonts/barlow-300.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; }

:root {
  --u: 1px;
  --ease: cubic-bezier(0.445, 0.05, 0.55, 0.95); /* Wix "easeInOutSine" */
  --ink: #2f2e2e;
  --muted: #605e5e;
  --pale: #cccccc;
  --menu-hover: #a0a09f;
  --panel: #f2f2f2;
}
@media (max-width: 979.98px) { :root { --u: calc(100vw / 980); } }
@media (max-width: 767.98px) { :root { --u: min(calc(100vw / 320), 1.5px); } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0;
  background: #000;
  color: #fff;
  font-family: 'Jost', 'Futura', 'Century Gothic', 'Avenir Next', sans-serif;
  font-weight: 400;
  line-height: 1.32;
  overflow-x: hidden;
}
h1, h2, h3, h4, h5, h6, p { margin: 0; font-weight: inherit; }
img { border: 0; }

/* ---------- layout primitives ---------- */
.sec { position: relative; height: calc(var(--sh) * var(--u)); overflow: hidden; }
.col { position: absolute; top: 0; bottom: 0; left: 50%; width: calc(980 * var(--u)); margin-left: calc(-490 * var(--u)); }
.abs {
  position: absolute;
  left: calc(var(--x, 0) * var(--u));
  top: calc(var(--y, 0) * var(--u));
  width: calc(var(--w) * var(--u));
}
img.abs, svg.abs, .box { height: calc(var(--h) * var(--u)); }
img.abs { display: block; max-width: none; object-fit: cover; }
.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

/* section colours (what shows before and behind the images) */
.sec-hero, .sec-fusion, .sec-team, .sec-contacts, .site-footer { background: #000; }
.sec-mission, .sec-progress { background: #fff; }
.sec-renewables, .sec-contribution { background: var(--panel); }

/* ---------- text ---------- */
/* letter-spacing values match Jost's text widths to the original Futura LT, so lines break in the same places */
.t { font-size: calc(var(--fs) * var(--u)); line-height: 1.34; color: #fff; letter-spacing: 0.013em; }
.t strong { font-weight: 500; letter-spacing: -0.0055em; }
.light { font-weight: 300; letter-spacing: 0.0022em; line-height: 1.31; }
.light strong { font-weight: 400; letter-spacing: 0.013em; }
.hero-title { line-height: 1.2; }
.heading-bold { font-weight: 500; text-align: center; letter-spacing: -0.0055em; }
.tight { line-height: 1.1; }
.centre { text-align: center; }
.dark { color: #000; }
.ink { color: var(--ink); }
.grey { color: var(--pale); }
.caption { font-style: italic; text-align: center; line-height: 1.1; }
.copyright { color: var(--menu-hover); }
.spaced p + p { margin-top: 1.31em; }
.gaps p:nth-child(2) { margin-top: calc(var(--g1) * var(--u)); }
.gaps p:nth-child(n+3) { margin-top: calc(var(--g2) * var(--u)); }
.col-text, .bio { margin-top: calc(var(--top) * var(--u)); }
.col-text p { color: var(--muted); }
.col-text p.black { color: #000; }
sup { font-size: 0.69em; line-height: 0; position: relative; top: -0.15em; vertical-align: super; margin-left: 0.08em; }

/* ---------- boxes ---------- */
.box { border-radius: calc(5 * var(--u)); }
.box-brown { background: rgba(176, 129, 87, 0.91); }
.box-white { background: rgba(255, 255, 255, 0.63); }

/* ---------- header and menu ---------- */
.site-header { position: fixed; top: 0; left: 0; right: 0; height: calc(96 * var(--u)); background: #fff; z-index: 50; }
.site-header .col { height: 100%; }
.menu { height: calc(var(--h) * var(--u)); }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; height: 100%; }
.menu li { flex: 1 1 auto; }
.menu a {
  display: block;
  height: 100%;
  padding: 0 calc(5 * var(--u));
  line-height: calc(33 * var(--u));
  font-size: calc(14 * var(--u));
  text-align: center;
  white-space: nowrap;
  letter-spacing: 0.013em;
  color: #000;
  text-decoration: none;
  transition: color 0.4s ease 0s;
}
.menu a:hover, .menu a:focus-visible, .menu a.is-current { color: var(--menu-hover); }
.burger { display: none; }

/* anchors: scroll stops below the fixed header, as on Wix */
#mission, #where-we-work, #what-we-do, #team, #contacts { scroll-margin-top: calc(96 * var(--u)); }

/* ---------- footer ---------- */
.icon { fill: var(--pale); }

/* ---------- entrance effects (Wix Fade In / Float In: 1.2 s, ease-in-out sine, once) ---------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes floatIn { from { opacity: 0; transform: translateX(calc(60 * var(--u))); } to { opacity: 1; transform: none; } }
.js .anim { opacity: 0; }
.js .anim.in { opacity: 1; animation-duration: 1.2s; animation-timing-function: var(--ease); animation-fill-mode: both; }
.js .anim.fade.in { animation-name: fadeIn; }
.js .anim.float.in { animation-name: floatIn; }
@media (prefers-reduced-motion: reduce) {
  .js .anim { opacity: 1; }
  .js .anim.in { animation: none; }
}

/* ---------- mobile menu (overlay) ---------- */
.mobile-menu { position: fixed; inset: 0; z-index: 100; background: var(--ink); opacity: 0; transition: opacity 0.3s ease; overflow-y: auto; }
.mobile-menu[hidden] { display: none; }
.mobile-menu.open { opacity: 1; }
.mobile-menu ul { list-style: none; margin: 0; padding: calc(80 * var(--u)) 0 calc(40 * var(--u)); text-align: center; }
.mobile-menu li { display: block; height: calc(42.3 * var(--u)); }
.mobile-menu a {
  display: inline-block;
  height: calc(42.3 * var(--u));
  line-height: calc(42.3 * var(--u));
  padding: 0 calc(20 * var(--u));
  font-family: 'Barlow', 'DIN Next', 'Helvetica Neue', sans-serif;
  font-weight: 300;
  font-size: calc(16 * var(--u));
  letter-spacing: 0.12em;
  color: #fff;
  text-decoration: none;
}
.mobile-menu a.is-current { color: #687b8a; }
.mobile-menu__close, .lightbox__close {
  position: absolute;
  top: calc(30 * var(--u));
  right: calc(30 * var(--u));
  width: calc(30 * var(--u));
  height: calc(30 * var(--u));
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.mobile-menu__close::before, .mobile-menu__close::after,
.lightbox__close::before, .lightbox__close::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(19 * var(--u));
  height: calc(3.2 * var(--u));
  margin: calc(-1.6 * var(--u)) 0 0 calc(-9.5 * var(--u));
  background: #fff;
  transform: rotate(45deg);
}
.mobile-menu__close::after, .lightbox__close::after { transform: rotate(-45deg); }
body.no-scroll { overflow: hidden; }

/* ---------- mobile image zoom (S-curve chart, as on the Wix mobile site) ---------- */
.lightbox { position: fixed; inset: 0; z-index: 200; background: #fff; display: flex; align-items: center; justify-content: center; }
.lightbox[hidden] { display: none; }
.lightbox img { max-width: 100%; max-height: 100%; object-fit: contain; }
.lightbox__close::before, .lightbox__close::after { background: var(--ink); }

/* ---------- mobile layout ---------- */
@media (max-width: 767.98px) {
  .col { width: calc(320 * var(--u)); margin-left: calc(-160 * var(--u)); }
  .sec { height: calc(var(--msh) * var(--u)); }
  .abs {
    left: calc(var(--mx, 0) * var(--u));
    top: calc(var(--my, 0) * var(--u));
    width: calc(var(--mw) * var(--u));
  }
  img.abs, svg.abs, .box, .burger { height: calc(var(--mh) * var(--u)); }
  .t { font-size: calc(var(--mfs) * var(--u)); }
  .gaps p:nth-child(2) { margin-top: calc(var(--mg1) * var(--u)); }
  .gaps p:nth-child(n+3) { margin-top: calc(var(--mg2) * var(--u)); }
  .col-text, .bio { margin-top: calc(var(--mtop) * var(--u)); }
  sup { font-size: 0.8em; }

  .site-header { position: absolute; height: calc(90 * var(--u)); }
  .menu { display: none; }
  .burger { display: block; padding: 0; border: 0; background: none; cursor: pointer; }
  .burger span { position: absolute; left: calc(15 * var(--u)); width: calc(20 * var(--u)); height: calc(2.4 * var(--u)); background: #000; }
  .burger span:nth-child(1) { top: calc(16 * var(--u)); }
  .burger span:nth-child(2) { top: calc(24.4 * var(--u)); }
  .burger span:nth-child(3) { top: calc(32.8 * var(--u)); }

  #mission, #where-we-work, #what-we-do, #team, #contacts { scroll-margin-top: 0; }
  .zoomable { cursor: zoom-in; }
}