@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;800;900&family=Sofia+Sans+Extra+Condensed:wght@400;800;900&display=swap');

:root {
  --stage-width: 466px;
  --stage-height: 21266px;
  --green: #2d5650;
  --dark: #07211d;
  --olive: #4c572a;
  --blue: #3753af;
  --rust: #a74b29;
  --cyan: #83d0f5;
  --scale: 1;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  min-width: 320px;
  color: var(--green);
  background: var(--dark);
  font-family: "Inter", Arial, sans-serif;
  overflow-x: hidden;
}

body::before {
  position: fixed;
  z-index: 0;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .6;
  filter: brightness(0);
  background-image: url("assets/pattern-tile.svg");
  background-repeat: repeat;
  background-position: 7px 16px;
  background-size: 226px 131px;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

.page-shell {
  position: relative;
  z-index: 1;
  width: 100%;
  height: calc(var(--stage-height) * var(--scale));
  display: flex;
  justify-content: center;
  overflow: visible;
}

.design-stage {
  position: absolute;
  top: 0;
  left: calc(50% - 233px);
  width: var(--stage-width);
  height: var(--stage-height);
  transform: none;
  transform-origin: top left;
}

.design-stage.is-scaled {
  left: 50%;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
}

.paper {
  background-color: #f6f1e8;
  background-image: url("assets/imgRectangle15.png");
  background-size: auto 100%;
  background-position: center;
  background-blend-mode: multiply;
}

.tone-sand,
.tone-pale-blue,
.tone-green,
.tone-seed,
.tone-cyan,
.tone-dark {
  background-image: none;
  background-blend-mode: normal;
}

.tone-sand { background-color: #c9af91; }
.tone-pale-blue { background-color: #d1e3e8; }
.tone-green { background-color: #d5e4ad; }
.tone-seed { background-color: #d5bd9c; }
.tone-cyan { background-color: #83d0f5; }
.tone-dark { background-color: #42615c; }

.hero, .brief, .services, .crop, .seeds, .analytics, .food, .numbers-heading, .stats--bottom, .footer, .annual-report, .video-card {
  position: absolute;
  left: 0;
  width: 466px;
  overflow: hidden;
}

.hero { top: 0; height: 1597px; }
.brief { top: 1694px; height: 2254px; }
.video-card { top: 4073px; height: 261px; }
.video-card iframe { display: block; width: 100%; height: 100%; border: 0; }
.services { top: 4438px; height: 1487px; }
.crop { top: 6029px; height: 3374px; }
.seeds { top: 9577px; height: 4622px; }
.analytics { top: 14281px; height: 3056px; }
.annual-report { top: 17414px; height: 643px; }
.annual-report iframe { display: block; width: 100%; height: 100%; border: 1px solid lightgray; }
.food { top: 18134px; height: 1535px; }
.numbers-heading { top: 19716px; height: 225px; overflow: visible; color: #fff; }
.stats--bottom { top: 19941px; height: 816px; }
.footer { top: 20757px; height: 509px; }

.hero__header { position: absolute; inset: 0 0 auto; height: 373px; }
.hero__logo { position: absolute; top: 99px; left: 48px; width: 370px; height: 208px; object-fit: contain; }

.logo-lockup { position: relative; width: 281px; height: 135px; }
.logo-lockup img { position: absolute; display: block; }
.logo-lockup__mark { top: 0; left: 90.77px; width: 112.45px; height: 65.21px; }
.logo-lockup__name { top: 76.79px; left: 0; width: 281px; height: 24.74px; }
.logo-lockup__tagline { top: 117.32px; left: .4px; width: 280.23px; height: 17.7px; }

.language {
  position: absolute;
  top: 25px;
  right: 87px;
  display: flex;
  gap: 22px;
  color: var(--olive);
  font-size: 20px;
  line-height: 38px;
  pointer-events: auto;
}

.language__option {
  padding: 0;
  border: 0;
  color: inherit;
  background: transparent;
  cursor: pointer;
  opacity: .65;
}

.language__option.is-active {
  opacity: 1;
  font-weight: 700;
}

.language__option:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

.sticky-menu {
  position: fixed;
  z-index: 15;
  top: 0;
  left: 50%;
  width: 466px;
  height: 70px;
  pointer-events: none;
  transform: translateX(-50%) scale(var(--scale));
  transform-origin: top center;
  background: transparent;
  transition: background-color .2s ease, box-shadow .2s ease;
}

.sticky-menu.is-stuck {
  background-color: rgba(246, 241, 232, .96);
  box-shadow: 0 6px 18px rgba(7, 33, 29, .14);
}

.sticky-menu__logo {
  position: absolute;
  top: 7px;
  left: 18px;
  width: 92px;
  height: 56px;
  object-fit: contain;
  opacity: 0;
  transition: opacity .2s ease;
}

.sticky-menu.is-stuck .sticky-menu__logo { opacity: 1; }

.menu-button {
  position: absolute;
  top: 30px;
  right: 30px;
  width: 30px;
  height: 30px;
  padding: 5px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
}

.menu-button span {
  display: block;
  width: 30px;
  height: 5px;
  margin-bottom: 2px;
  border-radius: 2px;
  background: var(--olive);
}

.hero-title {
  position: absolute;
  left: 0;
  width: 466px;
  height: 136px;
  padding-left: 52px;
  color: #fff;
  font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
  font-size: 49px;
  font-weight: 900;
  line-height: 136px;
  letter-spacing: -.7px;
  white-space: nowrap;
  background-image: url("assets/imgRectangle15.png");
  background-size: 900px auto;
  background-blend-mode: multiply;
}

.hero-title--sand { top: 373px; background-color: #d5bd9c; }
.hero-title--blue { top: 509px; background-color: #83d0f5; }
.hero-title--rust { top: 645px; background-color: #a74b29; }

.stats { overflow: hidden; }
.stats--top { position: absolute; top: 781px; left: 0; width: 466px; height: 816px; }

.stat {
  position: relative;
  width: 466px;
  height: 136px;
  color: #fff;
  background-image: url("assets/imgRectangle15.png");
  background-size: 900px auto;
  background-blend-mode: multiply;
}

.stat strong {
  position: absolute;
  top: -5px;
  right: 244px;
  width: 178px;
  text-align: right;
  font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
  font-size: 120px;
  font-weight: 900;
  line-height: 136px;
  letter-spacing: -2px;
}

.stat span {
  position: absolute;
  top: 47px;
  left: 241px;
  width: 188px;
  font-size: 20px;
  line-height: 1.08;
}

.stat--mint { background-color: #92c8a4; }
.stat--khaki { background-color: #92865f; }
.stat--sand { background-color: #d4b38c; }
.stat--blue { background-color: #72c4e7; }
.stat--lime { background-color: #c8d779; }

.section-hero {
  position: absolute;
  top: 0;
  left: 0;
  width: 466px;
  height: 362px;
  display: block;
  object-fit: cover;
  filter: grayscale(1);
  mix-blend-mode: multiply;
}

.content { position: absolute; left: 43px; width: 380px; }
.eyebrow { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.2; }

.content h1, .content h2 {
  margin: 0;
  font-size: 45px;
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -1.45px;
}

.content p { margin: 0; font-size: 20px; line-height: 1.09; }
.content h2 + p { margin-top: 27px; }

.rounded-image {
  width: 380px;
  height: 246px;
  display: block;
  border-radius: 20px;
  object-fit: cover;
}

.brand { display: block; object-fit: contain; }
.brand-link img { display: block; width: 100%; height: 100%; object-fit: contain; }
.brand-link:focus-visible { outline: 3px solid currentColor; outline-offset: 5px; }

.brief__photo { height: 398px; object-position: center 51%; }
.brief__content { top: 438px; height: 1356px; }
.brief__content .eyebrow { margin-bottom: 41px; }
.brief__content h1 { width: 300px; font-size: 48px; margin-bottom: 17px; }
.brief__content > p:nth-of-type(2) { height: 278px; }
.brief__content h2 { margin-top: 31px; font-size: 24px; line-height: 1.02; letter-spacing: -.7px; }
.brief__content h2 + p { margin-top: 28px; }
.brief__content > p:last-of-type { margin-top: 23px; }
.brief__group { position: absolute; top: 1049px; left: 0; }

.brief__statement {
  position: absolute;
  top: 1794px;
  left: 0;
  width: 466px;
  height: 460px;
  padding: 87px 43px 20px;
  color: #8ab994;
  background: #2d6259;
  font-size: 26px;
  font-weight: 800;
  line-height: 1.03;
  letter-spacing: -.6px;
}

.media-card {
  padding: 0;
  border: 0;
  background: transparent;
  cursor: zoom-in;
}
.media-card img { width: 100%; height: 100%; display: block; object-fit: cover; }
.media-card:focus-visible { outline: 4px solid var(--cyan); outline-offset: 4px; }

.services__photo { object-position: right center; }
.services__content { top: 419px; color: #454545; }
.services__content .eyebrow { margin-bottom: 48px; }
.services__content h2 { font-size: 45px; line-height: 1.035; }
.brand--redestos { width: 270px; height: 53px; margin: 42px auto 40px; }
.services__content p { line-height: 1.09; }
.services__content p + p { margin-top: 24px; }

.crop__content { top: 419px; }
.crop__content .eyebrow { margin-bottom: 40px; }
.crop__content h2 { margin-bottom: 27px; }
.crop__intro { width: 380px; }

.company { position: absolute; left: 0; width: 380px; }
.company p { margin: 0; }
.company ul { margin: 18px 0 0 0; padding-left: 30px; font-size: 20px; line-height: 1.05; }
.company.ruled::before {
  position: absolute;
  top: -52px;
  left: 0;
  width: 380px;
  height: 3px;
  border-radius: 2px;
  background: var(--green);
  content: "";
}
.company.ruled--rust::before { background: var(--rust); }

.company--kne { top: 710px; }
.brand--kne { width: 229px; height: 80px; margin: 0 auto 52px; }
.company--kne .rounded-image { margin-bottom: 33px; }
.company--kne p + p { margin-top: 24px; }
.company--kne ul + p { margin-top: 24px; }

.company--kcb { top: 1614px; }
.brand--kcb { width: 280px; height: 78px; margin: 0 auto 63px; mix-blend-mode: multiply; }
.company--kcb .rounded-image { margin-bottom: 34px; }

.company--brandt { top: 2373px; }
.brand--brandt { width: 275px; height: 48px; margin: 0 auto 63px; }
.company--brandt .rounded-image { margin-bottom: 49px; }

.seeds { color: var(--rust); }
.seeds > .section-hero { height: 339px; }
.seeds__content { top: 367px; }
.seeds__content .eyebrow { margin-bottom: 37px; }
.seeds__content h2 { margin-bottom: 30px; }
.seeds__intro + p { margin-top: 24px; }
.company--bios { top: 837px; }
.brand--bios { width: 178px; height: 83px; margin: 0 auto 28px; }
.company--bios .rounded-image { margin-bottom: 32px; }
.company--bil { top: 2250px; }
.brand--bil { width: 181px; height: 88px; margin: 0 auto 50px; }
.company--bil .rounded-image { margin-bottom: 31px; }
.company--guadalsem { top: 1448px; }
.brand--guadalsem { width: 168px; height: 106px; margin: 0 auto 42px; }
.company--guadalsem .rounded-image { margin-bottom: 29px; }
.company--prime { top: 2925px; }
.brand--prime { width: 190px; height: 112px; margin: 0 auto 50px; }
.company--prime .rounded-image { margin-bottom: 28px; }
.company--vitro { top: 3641px; }
.brand--vitro { width: 210px; height: 89px; margin: 0 auto 31px; }
.company--vitro .rounded-image { margin-bottom: 35px; }

.toned-image { overflow: hidden; }
.toned-image img { width: 100%; height: 100%; display: block; object-fit: cover; filter: grayscale(1); }
.toned-image::after { position: absolute; inset: 0; content: ""; mix-blend-mode: multiply; }
.toned-image--cyan::after { background: rgba(66, 189, 239, .72); }
.toned-image--dark { mix-blend-mode: normal; }
.toned-image--dark::after { background: rgba(7, 33, 29, .38); }

.analytics__content { top: 427px; }
.analytics__content .eyebrow { margin-bottom: 42px; }
.analytics__content h2 { margin-bottom: 29px; }
.company--veltia { top: 546px; }
.brand--veltia { width: 277px; height: 99px; margin: 0 auto 64px; }
.company--veltia .rounded-image { margin-bottom: 33px; }
.company--envirolab { top: 1250px; }
.brand--envirolab { width: 258px; height: 42px; margin: 0 auto 57px; }
.company--envirolab .rounded-image { margin-bottom: 35px; }
.company--besafer { top: 1922px; }
.brand--besafer { width: 124px; height: 103px; margin: 0 auto 41px; }
.company--besafer .rounded-image { margin-bottom: 48px; }

.food { color: var(--cyan); }
.food__content { top: 404px; }
.food__content .eyebrow { margin-bottom: 43px; }
.food__content h2 { margin-bottom: 28px; }
.food__content h2 + p { margin-top: 0; }
.brand--lucias { width: 272px; height: 95px; margin: 36px auto 19px; }
.food__products { margin-bottom: 26px; }

.stats--bottom .stat { height: 136px; }
.numbers-heading h2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 466px;
  height: 178px;
  margin: 0;
  font-family: "Sofia Sans Extra Condensed", Impact, sans-serif;
  font-size: 96px;
  font-weight: 400;
  line-height: .7761;
  text-align: center;
}
.footer__logo { position: absolute; top: 52px; left: 43px; width: 281px; height: 158px; object-fit: contain; }
.footer__heading,
.footer__address { position: absolute; left: 58px; width: 408px; margin: 0; color: #111; font-size: 20px; line-height: normal; }
.footer__heading { top: 283px; font-weight: 700; line-height: 1.2; letter-spacing: .4px; }
.footer__address { top: 337px; width: 390px; font-size: 19px; font-style: normal; line-height: 1.2; letter-spacing: 0; white-space: nowrap; }
.footer__address a { color: inherit; text-decoration: none; }
.footer__address a:hover,
.footer__address a:focus-visible { text-decoration: underline; }

html[lang="el"] .brief__statement {
  font-size: 23px;
  line-height: 1.05;
}

html[lang="el"] .brief__content > p:not(.eyebrow) {
  font-size: 17px;
  line-height: 1.12;
}

html[lang="el"] .brief__group { top: 1105px; }

html[lang="el"] .brand--redestos { margin-top: 62px; }

html[lang="el"] .crop__intro,
html[lang="el"] .analytics__intro,
html[lang="el"] .analytics .company p {
  font-size: 17px;
  line-height: 1.08;
}

html[lang="el"] .food__content > p:not(.eyebrow):not(.food__outro) {
  font-size: 17px;
  line-height: 1.08;
}

html[lang="el"] .food__outro {
  font-size: 17px;
  line-height: 1.08;
}

html[lang="el"] .company--kne { top: 780px; }
html[lang="el"] .company--kcb { top: 1644px; }
html[lang="el"] .company--brandt { top: 2403px; }

.site-menu {
  position: fixed;
  z-index: 20;
  inset: 0;
  color: #fff;
  background-color: var(--olive);
  visibility: hidden;
  opacity: 0;
  transform: translateY(-20px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

.site-menu.is-open { visibility: visible; opacity: 1; transform: none; }
.site-menu__links {
  position: absolute;
  top: clamp(70px, 11.5vh, 91px);
  right: 20px;
  left: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(38px, 7.6vh, 60px);
}
.site-menu a {
  color: inherit;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
}
.site-menu a:hover { opacity: .72; }
.site-menu a:focus-visible { outline: 2px solid #fff; outline-offset: 6px; }
.menu-close {
  position: absolute;
  z-index: 2;
  top: 12px;
  right: 50px;
  width: 44px;
  height: 44px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 0;
  cursor: pointer;
}
.menu-close::before,
.menu-close::after {
  position: absolute;
  top: 20px;
  left: 9px;
  width: 26px;
  height: 4px;
  border-radius: 2px;
  background: #fff;
  content: "";
}
.menu-close::before { transform: rotate(45deg); }
.menu-close::after { transform: rotate(-45deg); }
.site-menu__logo {
  position: absolute;
  bottom: 68px;
  left: 50%;
  width: 59px;
  height: 35px;
  transform: translateX(-50%);
}

.lightbox {
  width: min(900px, calc(100vw - 32px));
  max-width: 900px;
  padding: 0;
  border: 0;
  border-radius: 6px;
  overflow: visible;
  background: #222;
}
.lightbox::backdrop { background: rgba(0, 19, 16, .9); }
.lightbox img { display: block; width: 100%; max-height: 88vh; object-fit: contain; }
.lightbox__close {
  position: absolute;
  z-index: 2;
  top: -48px;
  right: 0;
  width: 42px;
  height: 42px;
  border: 0;
  color: #fff;
  background: transparent;
  font-size: 42px;
  cursor: pointer;
}

body.menu-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .site-menu { transition: none; }
}