:root {
  --olive: #52633a;
  --heading: #4d6038;
  --max: 1144px;
}

* { box-sizing: border-box; }
html { scroll-behavior: auto; }
body {
  margin: 0;
  color: #555;
  font: 300 17px/1.6 "Open Sans", Helvetica, Arial, sans-serif;
  text-rendering: optimizeLegibility;
  background: #172315 url("images/background.jpg") center top / cover fixed no-repeat;
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
.shell {
  width: min(var(--max), 100%);
  margin: 0 auto;
  background: rgba(255, 255, 255, .96);
}

.top {
  position: relative;
  z-index: 10;
  height: 78px;
  display: flex;
  align-items: stretch;
  background: #fff;
}
.brand {
  position: relative;
  z-index: 2;
  width: 191px;
  height: 98px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  background: var(--olive);
}
.brand img {
  width: 130.65625px;
  height: 54.78125px;
  margin-top: 20px;
  object-fit: fill;
}
.nav {
  display: flex;
  gap: 39px;
  align-items: center;
  padding-left: 34px;
  color: #5b6d40;
  font-size: 17px;
  line-height: 1;
}
.nav > a,
.nav .menu > a,
.menu > button { text-decoration: none; }
.mobile-menu-toggle { display: none; }
.menu { position: relative; }
.menu > button {
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  padding: 0;
  cursor: pointer;
}
.submenu {
  display: none;
  position: absolute;
  z-index: 12;
  top: 25px;
  left: -13px;
  min-width: 160px;
  padding: 8px 13px;
  background: var(--olive);
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
}
.submenu a { display: block; color: #fff; padding: 6px 0; text-decoration: none; }
.menu:focus-within .submenu,
.menu:hover .submenu { display: block; }

.slider {
  position: relative;
  height: auto;
  aspect-ratio: 1280 / 600;
  overflow: hidden;
  background: #222;
}
.slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .7s;
}
.slide.active { opacity: 1; }
.slider-controls {
  position: absolute;
  z-index: 2;
  bottom: 13px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 7px;
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .8);
}
.slider-controls button {
  width: 11px;
  height: 11px;
  border: 1px solid #aaa;
  border-radius: 99px;
  padding: 0;
  background: #eee;
  cursor: pointer;
}
.slider-controls button[aria-current="true"] { background: #777; }

.content {
  min-height: 1141.75px;
  padding: 40px 25px 25px;
  background: rgba(255, 255, 255, .91);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .18);
  overflow: hidden;
}
.content h1,
.content h2 {
  color: var(--heading);
  font-weight: 400;
}
.content h1 { margin: 0 0 5px; font-size: 30px; line-height: 1.4; }
.content h2 { clear: both; margin: 10px 0 5px; font-size: 30px; line-height: 1.4; }
.content .split + h2 { margin-top: 30px; }
.content p { margin: 0 0 10px; line-height: 27.2px; }
.intro-images {
  float: right;
  width: 300px;
  margin: 0 0 0 10px;
}
.intro-images img {
  display: block;
  width: 300px;
  height: 200px;
  margin-bottom: 10px;
  object-fit: cover;
}
.intro-images a:last-child img { margin-bottom: 0; }
.split { display: block; }
.split::after { display: block; clear: both; content: ""; }
.split > img {
  float: left;
  width: 300px;
  height: 200px;
  margin: 0 10px 10px 0;
  object-fit: cover;
}

.footer-teasers {
  min-height: 215.55px;
  display: flex;
  gap: 16px;
  margin-top: 25px;
  padding: 25px 15px 44px;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .16);
}
.teaser {
  width: 161px;
  color: #fff;
  background: var(--olive);
  text-align: center;
  text-decoration: none;
  font-size: 15px;
  line-height: 23px;
}
.teaser img {
  display: block;
  width: 100%;
  height: 121px;
  object-fit: cover;
}
.footer {
  min-height: 330.5px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  margin-top: 25px;
  padding: 35px 15px;
  color: #fff;
  background: var(--olive);
  line-height: 1.5;
}
.footer > section,
.footer > nav { padding: 0 19.375px; }
.footer h2 {
  margin: 0 0 13px;
  color: #fff;
  font-size: 18px;
  line-height: 35.1875px;
  font-weight: 400;
  text-transform: uppercase;
}
.footer p,
.footer li { margin: 0 0 8px; }
.footer ul { margin: 0; padding: 0; list-style: none; }
.footer-logo {
  width: 239.75px;
  height: 139.203125px;
  align-self: start;
  margin-left: 19.375px;
  opacity: .28;
}
.legal { max-width: 100%; }
.legal h2 { font-size: 23px; }
.legal ol,
.legal ul { padding-left: 22px; }

dialog { max-width: min(92vw, 1080px); border: 0; padding: 48px 18px 18px; }
dialog::backdrop { background: rgba(0, 0, 0, .8); }
dialog form { position: absolute; top: 8px; right: 8px; }
dialog form button { padding: 8px 12px; border: 1px solid #555; background: #fff; }

@media (min-width: 701px) and (max-width: 1143px) {
  .top { height: 90px; }
  .content { min-height: 1368.94px; }
  .footer-teasers { min-height: 214.69px; }
  .footer { min-height: 464.44px; }
}

@media (max-width: 700px) {
  body { background: #fff; }
  .shell { width: 100%; }
  .top {
    height: 215.47px;
    display: block;
    background: #fff;
  }
  .brand {
    width: 100%;
    height: 115.47px;
  }
  .brand img { width: 180px; height: 75.46875px; margin-top: 20px; object-fit: fill; }
  .nav {
    position: relative;
    height: 100px;
    display: block;
    padding: 12px 10px 0;
    font-size: 15px;
  }
  .mobile-menu-toggle {
    width: 100%;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 0;
    padding: 0 14px;
    color: #fff;
    background: var(--olive);
    font: inherit;
    text-align: left;
  }
  .mobile-menu-toggle img { width: 14px; height: 14px; filter: brightness(0) invert(1); }
  .nav > a,
  .nav > .menu { display: none; }
  .nav.open {
    height: auto;
    min-height: 100px;
    padding-bottom: 10px;
    background: #fff;
  }
  .nav.open > a,
  .nav.open > .menu { display: block; padding: 10px 14px; background: var(--olive); color: #fff; }
  .nav.open .submenu { position: static; display: block; box-shadow: none; padding: 5px 0 0 14px; }

  .slider { height: auto; aspect-ratio: 1280 / 600; }
  .content {
    min-height: 2454.19px;
    padding: 40px 25px 25px;
    overflow: hidden;
  }
  .content h1 { margin-bottom: 5px; font-size: 30px; line-height: 1.4; }
  .content h2 { margin-top: 10px; margin-bottom: 5px; font-size: 30px; line-height: 1.4; }
  .content .split + h2 { margin-top: 30px; }
  .content p { margin-bottom: 10px; font-size: 17px; line-height: 27.2px; }
  .intro-images {
    float: right;
    width: 300px;
    margin: 0 0 0 10px;
  }
  .intro-images img { width: 300px; height: 200px; margin-bottom: 10px; }
  .split { display: block; }
  .split > img {
    float: left;
    width: 300px;
    height: 200px;
    margin: 0 10px 10px 0;
  }

  .footer-teasers {
    min-height: 963px;
    display: block;
    margin-top: 25px;
    padding: 10px;
  }
  .teaser {
    width: 100%;
    min-height: 304px;
    display: block;
    margin: 0 0 10px;
    font-size: 15px;
    line-height: 23px;
  }
  .teaser img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
  .footer {
    min-height: 836.22px;
    display: block;
    margin-top: 25px;
    padding: 35px 31.25px;
    padding-bottom: 21.03px;
  }
  .footer > section,
  .footer > nav { padding: 0; }
  .footer > section:first-child { margin-bottom: 34.43px; }
  .footer > section:nth-of-type(2) { margin-bottom: 52.56px; }
  .footer > nav { margin-bottom: 0; }
  .footer-logo {
    width: 327.5px;
    height: 190.15625px;
    display: block;
    margin: 0 0 30px;
    object-fit: fill;
  }
  .footer nav { text-align: right; }
}