:root {

  --forest:
    #0f4c3a;

  --forest-deep:
    #082f25;

  --forest-dark:
    #06271f;

  --moss:
    #5d8a66;

  --gold:
    #f2c94c;

  --honey:
    #e2b13c;

  --cream:
    #f8f3e8;

  --cream-soft:
    #fcf9f2;

  --paper:
    #efe7d7;

  --text:
    #26372f;

  --muted:
    #69766f;

  --white:
    #ffffff;

  --border:
    rgba(15,76,58,.14);

}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}


html {
  scroll-behavior: smooth;
}


body {

  margin: 0;

  overflow-x: hidden;

  color: var(--text);

  background: var(--cream-soft);

  font-family:
    "DM Sans",
    sans-serif;
}


img {

  display: block;

  max-width: 100%;
}


a {

  color: inherit;

  text-decoration: none;
}


button {

  font: inherit;

  cursor: pointer;
}


h1,
h2,
p,
blockquote {
  margin-top: 0;
}


h1,
h2 {

  font-family:
    "Fraunces",
    serif;
}


.container {

  width:
    min(
      1180px,
      calc(100% - 48px)
    );

  margin: auto;
}


/* =====================================================
   HEADER
===================================================== */

.site-header {

  position: fixed;

  z-index: 1000;

  top: 0;
  left: 0;

  width: 100%;
  height: 88px;

  display: flex;

  align-items: center;

  background:
    rgba(248,243,232,.97);

  border-bottom:
    1px solid var(--border);

  box-shadow:
    0 8px 30px
    rgba(8,47,37,.06);
}


.site-header.scrolled {

  background:
    rgba(248,243,232,.99);

  box-shadow:
    0 10px 35px
    rgba(8,47,37,.1);
}


.header-inner {

  width:
    min(
      1320px,
      calc(100% - 48px)
    );

  margin: auto;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 30px;
}


/* =====================================================
   HEADER BRAND
===================================================== */

.brand {

  display: flex;

  align-items: center;

  gap: 16px;

  flex: 0 0 auto;
}


.brand-head {

  width: 60px;
  height: 60px;

  flex: 0 0 60px;

  display: flex;

  align-items: center;

  justify-content: center;

  overflow: hidden;

  border:
    2px solid rgba(15,76,58,.16);

  border-radius: 50%;

  background:
    var(--cream);

  box-shadow:
    0 5px 15px
    rgba(8,47,37,.08);
}


.brand-head img {

  width: 100%;
  height: 100%;

  object-fit: cover;

  border-radius: 50%;
}


.brand-wording {

  width: 240px;
  height: 60px;

  object-fit: contain;

  object-position: left center;
}


/* =====================================================
   NAVIGATION
===================================================== */

.site-nav {

  display: flex;

  align-items: center;

  gap: 24px;
}


.site-nav a {

  position: relative;

  color: var(--forest);

  font-size: .71rem;

  font-weight: 700;

  letter-spacing: .02em;
}


.site-nav a:not(.nav-button)::after {

  content: "";

  position: absolute;

  left: 0;
  bottom: -8px;

  width: 0;
  height: 1px;

  background: var(--gold);

  transition:
    width .2s ease;
}


.site-nav a:hover::after,
.site-nav a.active::after {

  width: 100%;
}


.nav-button {

  padding:
    12px 20px;

  border-radius: 100px;

  color:
    var(--forest-dark) !important;

  background:
    var(--gold);
}


.menu-toggle {

  display: none;

  width: 42px;
  height: 42px;

  border:
    1px solid var(--border);

  border-radius: 50%;

  background: transparent;
}


.menu-toggle span {

  display: block;

  width: 17px;
  height: 1px;

  margin: 5px auto;

  background: var(--forest);
}


/* =====================================================
   HERO
===================================================== */

.about-hero {

  position: relative;

  min-height: 620px;

  padding:
    175px 0 150px;

  display: flex;

  align-items: center;

  overflow: hidden;

  color: white;

  background:
    var(--forest-dark);
}


.hero-background,
.hero-overlay {

  position: absolute;

  inset: 0;
}


.hero-background {

  background:
    url("forest-hero.jpg")
    center / cover;
}


.hero-overlay {

  background:
    linear-gradient(
      90deg,
      rgba(5,35,27,.9),
      rgba(5,35,27,.7),
      rgba(5,35,27,.54)
    );
}


.hero-content {

  position: relative;

  z-index: 3;
}


.eyebrow {

  margin-bottom: 18px;

  color: var(--gold);

  font-size: .62rem;

  font-weight: 700;

  letter-spacing: .22em;

  text-transform: uppercase;
}


.eyebrow.dark {
  color: var(--moss);
}


.hero-content h1 {

  max-width: 800px;

  margin:
    0 0 25px;

  font-size:
    clamp(
      4.8rem,
      10vw,
      8.7rem
    );

  line-height: .83;

  letter-spacing: -.055em;
}


.hero-content h1 span {

  display: block;

  color: var(--gold);
}


.hero-copy {

  max-width: 590px;

  margin: 0;

  color:
    rgba(255,255,255,.72);

  font-size: 1rem;

  line-height: 1.8;
}


.hero-wave {

  position: absolute;

  z-index: 4;

  left: 0;
  bottom: -1px;

  width: 100%;
  height: 110px;
}


.hero-wave svg {

  width: 100%;
  height: 100%;
}


.hero-wave path {
  fill: var(--cream-soft);
}


/* =====================================================
   ORIGIN
===================================================== */

.origin-section {

  padding:
    105px 0 135px;

  background:
    var(--cream-soft);
}


.origin-grid {

  display: grid;

  grid-template-columns:
    .9fr 1.1fr;

  align-items: center;

  gap: 85px;
}


.origin-copy h2 {

  margin:
    0 0 28px;

  color: var(--forest);

  font-size:
    clamp(
      3.6rem,
      7vw,
      6.3rem
    );

  line-height: .9;

  letter-spacing: -.05em;
}


.story-text {

  max-width: 530px;
}


.story-text p {

  margin-bottom: 20px;

  color: var(--muted);

  font-size: .96rem;

  line-height: 1.85;
}


.story-text .story-emphasis {

  margin-top: 30px;

  color: var(--forest);

  font-family:
    "Fraunces",
    serif;

  font-size: 1.7rem;

  line-height: 1.35;
}


.origin-images {

  position: relative;

  min-height: 600px;
}


.origin-image {

  position: absolute;

  margin: 0;

  overflow: hidden;

  background:
    var(--paper);

  box-shadow:
    0 25px 65px
    rgba(8,47,37,.14);
}


.origin-image img {

  width: 100%;
  height: 100%;

  object-fit: cover;
}


.origin-image figcaption {

  position: absolute;

  left: 18px;
  bottom: 17px;

  padding:
    7px 13px;

  border-radius: 100px;

  color: white;

  background:
    rgba(8,47,37,.76);

  backdrop-filter:
    blur(8px);

  font-family:
    "Fraunces",
    serif;

  font-size: 1rem;
}


.origin-image-one {

  top: 0;
  left: 0;

  width: 58%;
  height: 500px;

  border-radius:
    190px 190px 24px 24px;
}


.origin-image-two {

  right: 0;
  bottom: 0;

  width: 52%;
  height: 440px;

  border-radius:
    170px 170px 24px 24px;

  border:
    8px solid var(--cream-soft);
}


.origin-seal {

  position: absolute;

  z-index: 5;

  left: 49%;
  top: 49%;

  width: 145px;
  height: 145px;

  transform:
    translate(-50%,-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  color: var(--forest-dark);

  background: var(--gold);

  box-shadow:
    0 15px 35px
    rgba(8,47,37,.2);

  text-align: center;
}


.origin-seal span {

  font-size: .48rem;

  font-weight: 700;

  letter-spacing: .14em;
}


.origin-seal strong {

  margin:
    3px 0;

  font-family:
    "Fraunces",
    serif;

  font-size: 2rem;

  line-height: 1;
}


.origin-seal small {

  font-size: .5rem;

  font-weight: 700;

  letter-spacing: .08em;
}


/* =====================================================
   LIFE
===================================================== */

.life-section {

  position: relative;

  padding:
    125px 0;

  overflow: hidden;

  color: white;

  background:
    linear-gradient(
      135deg,
      var(--forest-deep),
      var(--forest)
    );
}


.life-section::before {

  content: "";

  position: absolute;

  top: -120px;
  right: -110px;

  width: 430px;
  height: 430px;

  border-radius: 50%;

  background:
    rgba(242,201,76,.05);
}


.life-inner {

  position: relative;

  z-index: 2;

  max-width: 820px;

  text-align: center;
}


.life-inner h2 {

  margin:
    0 auto 28px;

  font-size:
    clamp(
      3.4rem,
      7vw,
      6rem
    );

  line-height: .92;

  letter-spacing: -.05em;
}


.life-inner h2 span {

  display: block;

  color: var(--gold);
}


.life-inner > p {

  max-width: 680px;

  margin:
    0 auto;

  color:
    rgba(255,255,255,.7);

  font-size: .98rem;

  line-height: 1.85;
}


.life-inner blockquote {

  max-width: 720px;

  margin:
    50px auto 0;

  padding-top: 36px;

  border-top:
    1px solid rgba(242,201,76,.28);

  color:
    var(--cream);

  font-family:
    "Fraunces",
    serif;

  font-size:
    clamp(
      1.55rem,
      3vw,
      2.4rem
    );

  font-style: italic;

  line-height: 1.45;
}


/* =====================================================
   CLOSING
===================================================== */

.closing-section {

  padding:
    120px 0;

  background:
    var(--paper);
}


.closing-inner {

  max-width: 800px;

  text-align: center;
}


.closing-mark {

  display: block;

  margin-bottom: 16px;

  color: var(--gold);

  font-size: 1.7rem;
}


.closing-inner h2 {

  margin:
    0 auto 20px;

  color: var(--forest);

  font-size:
    clamp(
      3rem,
      6vw,
      5.4rem
    );

  line-height: .96;

  letter-spacing: -.045em;
}


.closing-inner p {

  max-width: 580px;

  margin:
    0 auto;

  color: var(--muted);

  font-size: .94rem;

  line-height: 1.75;
}


.closing-actions {

  margin-top: 34px;

  display: flex;

  justify-content: center;

  gap: 12px;

  flex-wrap: wrap;
}


.button {

  min-height: 52px;

  padding:
    0 24px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 100px;

  font-size: .74rem;

  font-weight: 700;
}


.button-gold {

  color: var(--forest-dark);

  background: var(--gold);
}


.button-outline {

  border:
    1px solid rgba(15,76,58,.25);

  color: var(--forest);

  background: transparent;
}


/* =====================================================
   FOOTER
===================================================== */

.site-footer {

  padding:
    52px 0;

  color:
    rgba(255,255,255,.56);

  background:
    var(--forest-dark);

  font-size: .71rem;
}


.footer-inner {

  display: grid;

  grid-template-columns:
    1fr auto;

  align-items: end;

  gap:
    35px 60px;
}


.footer-brand {

  display: flex;

  flex-direction: column;

  align-items: flex-start;
}


.footer-brand img {

  width: 82px;
  height: 82px;

  padding: 0;

  overflow: hidden;

  border:
    2px solid rgba(242,201,76,.28);

  border-radius: 50%;

  object-fit: cover;

  background:
    var(--cream);

  box-shadow:
    0 8px 24px
    rgba(0,0,0,.16);
}


.footer-brand p {

  max-width: 300px;

  margin:
    13px 0 0;

  color:
    rgba(255,255,255,.5);

  line-height: 1.6;
}


.footer-links {

  display: flex;

  align-items: center;

  justify-content: flex-end;

  gap: 20px;

  flex-wrap: wrap;
}


.footer-links a {

  color:
    rgba(255,255,255,.7);

  font-weight: 600;

  transition:
    color .2s ease;
}


.footer-links a:hover {
  color: var(--gold);
}


.footer-links .facebook-link {
  color: var(--gold);
}


.footer-copy {

  grid-column:
    1 / -1;

  padding-top: 22px;

  border-top:
    1px solid rgba(255,255,255,.08);

  text-align: center;

  line-height: 1.8;
}


.footer-copy a {
  color: var(--gold);
}


.footer-divider {
  margin:
    0 5px;
}


/* =====================================================
   REVEAL
===================================================== */

.reveal {

  opacity: 0;

  transform:
    translateY(22px);

  transition:
    opacity .7s ease,
    transform .7s ease;
}


.reveal.visible {

  opacity: 1;

  transform: none;
}


/* =====================================================
   RESPONSIVE
===================================================== */

@media (max-width: 1120px) {

  .brand-wording {
    width: 205px;
    height: 52px;
  }


  .site-nav {
    gap: 18px;
  }


  .site-nav a {
    font-size: .67rem;
  }

}


@media (max-width: 950px) {

  .menu-toggle {
    display: block;
  }


  .site-nav {

    position: absolute;

    top: 88px;
    left: 0;

    width: 100%;

    padding:
      25px 24px 30px;

    display: none;

    flex-direction: column;

    align-items: flex-start;

    gap: 20px;

    background:
      rgba(248,243,232,.99);

    border-bottom:
      1px solid var(--border);

    box-shadow:
      0 20px 30px
      rgba(8,47,37,.08);
  }


  .site-nav.open {
    display: flex;
  }


  .origin-grid {

    grid-template-columns: 1fr;

    gap: 60px;
  }


  .origin-images {

    width:
      min(
        700px,
        100%
      );

    margin: auto;
  }


  .footer-inner {

    grid-template-columns: 1fr;
  }


  .footer-links {
    justify-content: flex-start;
  }

}


@media (max-width: 700px) {

  .container {

    width:
      calc(100% - 30px);
  }


  .site-header {
    height: 76px;
  }


  .header-inner {

    width:
      calc(100% - 30px);
  }


  .brand {
    gap: 10px;
  }


  .brand-head {

    width: 52px;
    height: 52px;

    flex-basis: 52px;
  }


  .brand-wording {

    width: 175px;
    height: 46px;
  }


  .site-nav {
    top: 76px;
  }


  .about-hero {

    min-height: 540px;

    padding:
      145px 0 120px;
  }


  .hero-content h1 {

    font-size:
      clamp(
        4rem,
        19vw,
        6rem
      );
  }


  .origin-section {

    padding:
      75px 0 95px;
  }


  .origin-images {
    min-height: 500px;
  }


  .origin-image-one {

    width: 67%;
    height: 405px;
  }


  .origin-image-two {

    width: 58%;
    height: 350px;
  }


  .origin-seal {

    width: 118px;
    height: 118px;
  }


  .origin-seal strong {
    font-size: 1.6rem;
  }


  .life-section {
    padding: 90px 0;
  }


  .closing-section {
    padding: 90px 0;
  }


  .closing-actions {
    flex-direction: column;
  }


  .button {
    width: 100%;
  }


  .footer-brand img {

    width: 74px;
    height: 74px;
  }


  .footer-links {

    flex-direction: column;

    align-items: flex-start;

    gap: 13px;
  }


  .footer-copy {
    text-align: left;
  }

}


@media (max-width: 480px) {

  .brand-wording {
    width: 145px;
    height: 40px;
  }


  .origin-images {
    min-height: 440px;
  }


  .origin-image-one {

    width: 72%;
    height: 350px;
  }


  .origin-image-two {

    width: 62%;
    height: 300px;
  }


  .origin-seal {

    left: 50%;
    top: 51%;

    width: 105px;
    height: 105px;
  }

}