:root {
  --gmk-green: #00441f;
  --story-bg: #f7f7f7;
  --story-text: #8b7f7d;
  --hero-text: #1d1614;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: #fff; color: var(--hero-text); }
img { display: block; max-width: 100%; }

.hero {
  display: grid;
  grid-template-columns: 50% 50%;
  min-height: min(43.55vw, 845px);
  background: #fff;
}

.hero-photo {
  min-height: min(43.55vw, 845px);
  background: url("assets/bjorn-hero.jpg") center top / cover no-repeat;
}

.hero-copy {
  position: relative;
  min-height: min(43.55vw, 845px);
  padding: 74px 6vw 70px 4.6vw;
}

.brand {
  display: block;
  width: clamp(225px, 14.5vw, 286px);
}

.brand img { width: 100%; height: auto; }

.hero-intro {
  max-width: 570px;
  margin-top: clamp(115px, 7.3vw, 142px);
}

h1 {
  margin: 0 0 31px;
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  font-size: clamp(29px, 1.86vw, 36px);
  line-height: 1.08;
  font-weight: 700;
  letter-spacing: -0.015em;
}

.hero-intro p {
  margin: 0;
  font-family: "Cormorant Garamond", Garamond, "Times New Roman", serif;
  font-size: clamp(21px, 1.32vw, 25px);
  line-height: 1.18;
  font-weight: 500;
  letter-spacing: -0.008em;
}

.story {
  background: var(--story-bg);
  padding: 137px 24px 100px;
}

.story-grid {
  width: min(100%, 1235px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
}

.story-column {
  font-family: Arial, Helvetica, sans-serif;
  color: var(--story-text);
  font-size: 18px;
  line-height: 1.46;
  font-weight: 400;
}

.story-column p { margin: 0 0 30px; }

.image-grid {
  width: min(100%, 1235px);
  margin: 75px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
}

.image-grid figure { margin: 0; }
.image-grid img { width: 100%; height: auto; }

@media (max-width: 900px) {
  .hero {
    grid-template-columns: 1fr;
  }

  .hero-photo {
    min-height: 78vw;
    background-position: center top;
  }

  .hero-copy {
    min-height: auto;
    padding: 46px 28px 58px;
  }

  .brand { width: min(260px, 62vw); }

  .hero-intro {
    margin-top: 62px;
    max-width: 620px;
  }

  h1 { font-size: clamp(30px, 7vw, 42px); }
  .hero-intro p { font-size: clamp(19px, 4.8vw, 24px); }

  .story { padding: 70px 24px 60px; }
  .story-grid, .image-grid { grid-template-columns: 1fr; gap: 0; }
  .story-column { font-size: 17px; }
  .image-grid { margin-top: 42px; gap: 24px; }
}

@media (max-width: 480px) {
  .hero-copy { padding-left: 20px; padding-right: 20px; }
  .hero-intro { margin-top: 45px; }
  .story { padding: 54px 20px 45px; }
  .story-column p { margin-bottom: 24px; }
}