.koble-company-story {
  --koble-green: #94AD61;
  --koble-lime: #D4F593;
  --koble-text: #375249;
  --koble-dark: #17332A;
  --koble-deep: #10261F;
  --koble-paper: #F7F6F2;
  --koble-white: #FFFFFF;

  --koble-line: rgba(23,51,42,.16);

  --koble-max: 1180px;
  --koble-gutter: clamp(20px,4vw,48px);

  --koble-font:
    "Basetica",
    "Basetica Regular",
    "Basetica Medium",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;

  position: relative;

  width: auto;

  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);

  padding:
    clamp(76px,8vw,112px)
    0;

  scroll-margin-top: 160px;

  color: var(--koble-text);

  font-family: var(--koble-font);

  -webkit-font-smoothing: antialiased;
}


.koble-company-story *,
.koble-company-story *::before,
.koble-company-story *::after {
  box-sizing: border-box;
}


/* =========================================
   BACKGROUNDS
========================================= */

.koble-company-story--white {
  background: var(--koble-white);
}


.koble-company-story--paper {
  background: var(--koble-paper);
}


/* =========================================
   LAYOUT
========================================= */

.koble-company-story__inner {
  width: 100%;
  max-width: var(--koble-max);

  margin: 0 auto;

  padding: 0 var(--koble-gutter);

  display: grid;

  grid-template-columns:
    minmax(0,.75fr)
    minmax(0,1fr);

  gap: clamp(50px,6vw,72px);

  align-items: start;
}


/* =========================================
   LEFT COLUMN
========================================= */

.koble-company-story__lead {
  min-width: 0;
}


/* =========================================
   EYEBROW
========================================= */

.koble-company-story__eyebrow {
  margin: 0 0 18px;

  color: var(--koble-green);

  font-size: 12px;
  font-weight: 700;

  line-height: 1.3;

  letter-spacing: .16em;

  text-transform: uppercase;
}


/* =========================================
   TITLE
========================================= */

.koble-company-story h2 {
  margin: 0;

  color: var(--koble-dark);

  font-family: var(--koble-font);

  font-size: clamp(36px,4.3vw,54px);
  font-weight: 600;

  line-height: 1.02;

  letter-spacing: -.045em;
}


/* =========================================
   STORY COPY
========================================= */

.koble-company-story__body {
  max-width: 680px;

  color: var(--koble-text);

  font-size: 17px;
  font-weight: 400;

  line-height: 1.68;

  letter-spacing: -.008em;
}


.koble-company-story__body p {
  margin: 0 0 21px;
}


.koble-company-story__body p:last-child {
  margin-bottom: 0;
}


.koble-company-story__body strong {
  color: var(--koble-dark);

  font-weight: 600;
}


.koble-company-story__body a {
  color: var(--koble-dark);

  text-decoration: underline;

  text-decoration-color: var(--koble-green);

  text-decoration-thickness: 1px;

  text-underline-offset: 4px;
}


/* =========================================
   FOUNDER QUOTE
========================================= */

.koble-company-story__quote {
  max-width: 430px;

  margin:
    clamp(38px,5vw,58px)
    0
    0;

  padding: 24px 0 0;

  border: 0;

  border-top:
    1px solid
    var(--koble-line);

  background: transparent;
}


.koble-company-story__quote-text {
  color: var(--koble-green) !important;

  font-size: clamp(19px,2vw,24px);
  font-weight: 600;

  line-height: 1.38;

  letter-spacing: -.025em;
}


.koble-company-story__quote-text p {
  margin: 0;

  color: inherit;

  font: inherit;
}


.koble-company-story__quote cite {
  display: block;

  margin-top: 16px;

  color: var(--koble-text);

  font-size: 10px;
  font-style: normal;
  font-weight: 700;

  line-height: 1.5;

  letter-spacing: .14em;

  text-transform: uppercase;

  opacity: .62;
}


/* =========================================
   STORY GALLERY
========================================= */

.koble-company-story__gallery {
  width: 100%;

  max-width: 430px;

  margin-top:
    clamp(32px,4vw,46px);
}


.koble-company-story__gallery-viewport {
    position: relative;

  display: grid;

  width: 100%;

  overflow: hidden;

  border-radius: 5px;

  background: var(--koble-deep);
}

/* =========================================
   SLIDES
========================================= */


.koble-company-story__slide {
  grid-area: 1 / 1;

  position: relative;

  width: 100%;
  margin: 0;

  opacity: 0;
  visibility: hidden;

  pointer-events: none;

  z-index: 1;

  transition:
    opacity .3s ease,
    visibility 0s linear .3s;
}


.koble-company-story__slide.is-active {
  opacity: 1;
  visibility: visible;

  pointer-events: auto;

  z-index: 2;

  transition:
    opacity .3s ease,
    visibility 0s linear 0s;
}
.koble-company-story__slide img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius: 5px;

  filter: saturate(.9);

  transform: scale(1);

  transition:
    transform .3s ease,
    filter .3s ease;
}


@media (hover:hover) and (pointer:fine) {

  .koble-company-story__gallery:hover
  .koble-company-story__slide.is-active img {
    transform: scale(1.018);

    filter: saturate(1);
  }

}

/* =========================================
   IMAGE CAPTION
========================================= */

.koble-company-story__caption {
  display: block;

  margin-top: 10px;

  color: var(--koble-text);

  font-size: 10px;
  font-weight: 600;

  line-height: 1.45;

  letter-spacing: .08em;

  text-transform: uppercase;

  opacity: .58;
}


/*
  Caption technically sits inside the figure,
  but should remain visually outside the image.
*/

.koble-company-story__slide {
  background: transparent;
}


/* =========================================
   CONTROLS
========================================= */

.koble-company-story__gallery-controls {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-top: 14px;
}


/* COUNTER */

.koble-company-story__gallery-count {
  display: flex;

  align-items: center;

  gap: 6px;

  color: var(--koble-text);

  font-size: 10px;
  font-weight: 700;

  line-height: 1;

  letter-spacing: .12em;

  opacity: .62;
}


.koble-company-story__gallery-divider {
  opacity: .4;
}


/* ARROWS */

.koble-company-story__gallery-arrows {
  display: flex;

  align-items: center;

  gap: 8px;
}


.koble-company-story__gallery-arrow {
  appearance: none;

  width: 38px;
  height: 38px;

  display: inline-flex;

  align-items: center;
  justify-content: center;

  padding: 0;

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

  border-radius: 50%;

  background: transparent;

  color: var(--koble-dark);

  font-family: inherit;

  font-size: 16px;

  line-height: 1;

  cursor: pointer;

  transition:
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    transform .22s ease;
}


.koble-company-story__gallery-arrow:hover {
  transform: translateY(-2px);

  background: var(--koble-green);

  border-color: var(--koble-green);

  color: var(--koble-white);
}


/* =========================================
   TABLET
========================================= */

@media screen and (max-width:900px) {

  .koble-company-story__inner {
    grid-template-columns: 1fr;

    gap: 46px;
  }


  .koble-company-story h2 {
    max-width: 15ch;
  }


  .koble-company-story__quote {
    max-width: 560px;
  }


  .koble-company-story__gallery {
    max-width: 560px;
  }


  .koble-company-story__body {
    max-width: 720px;
  }

}


/* =========================================
   MOBILE
========================================= */

@media screen and (max-width:680px) {

  .koble-company-story {
    padding: 64px 0;

    scroll-margin-top: 140px;
  }


  .koble-company-story__inner {
    gap: 38px;

    padding-left: 20px;
    padding-right: 20px;
  }


  .koble-company-story__eyebrow {
    margin-bottom: 14px;

    font-size: 11px;
  }


  .koble-company-story h2 {
    max-width: 100%;

    font-size:
      clamp(32px,9vw,42px);

    line-height: 1.04;

    letter-spacing: -.04em;
  }


  .koble-company-story__quote {
    margin-top: 32px;

    padding-top: 20px;
  }


  .koble-company-story__quote-text {
    font-size: 19px;
  }


  .koble-company-story__gallery {
    max-width: 100%;

    margin-top: 28px;
  }


  .koble-company-story__slide img {
    aspect-ratio: 4 / 3;
  }

  

  .koble-company-story__body {
    font-size: 16px;

    line-height: 1.65;
  }

}


/* =========================================
   REDUCED MOTION
========================================= */

@media (prefers-reduced-motion:reduce) {

 /* .koble-company-story__gallery-arrow,
    .koble-company-story__slide img ,*//
  .koble-company-story__slide
{
    transition: none !important;
  }

}

.koble-company-story__gallery-arrow svg {
  display: block;
}


.koble-company-story__slide img {
  display: block;

  width: 100%;

  aspect-ratio: 4 / 3;

  object-fit: cover;

  border-radius: 5px;

  filter: saturate(.9);

  transform: scale(1);

  transition:
    transform .3s ease,
    filter .3s ease;
}


@media (hover:hover) and (pointer:fine) {

  .koble-company-story__gallery:hover
  .koble-company-story__slide.is-active img {
    transform: scale(1.018);

    filter: saturate(1);
  }

}