.our-story-page {
  background: #fff;
  color: #171312;
  overflow: hidden;
}

.our-story-page h1,
.our-story-page h2,
.our-story-page h3 {
  font-family: "Gabriella", "Archivo Black", Arial, sans-serif;
  font-style: normal;
  font-weight: 900;
  text-transform: uppercase;
  color: #000;
}

.our-story-page h1 {
  font-size: 72px;
  line-height: 82px;
}

.our-story-page h2 {
  font-size: 54px;
  line-height: 64px;
}

.our-story-page h3 {
  font-size: 22px;
  line-height: 25px;
}

.our-story-page p {
  font-family: "Europa", "Manrope", Arial, sans-serif;
  font-size: 20px;
  line-height: 28px;
  color: #5d5550;
}

.story-hero {
  border-top: 1px solid #171312;
  border-bottom: 1px solid #171312;
}

.story-hero__copy,
.story-hero__media {
  min-height: 519px;
}

.story-hero__copy {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 48px;
  background: #fff6ed var(--story-hero-pattern-image, url("../Our Story img/banner back.png")) center center / cover no-repeat;
}

.story-hero__copy::before {
  content: "";
  position: absolute;
  inset: 0;
  background: transparent;
  pointer-events: none;
}

.story-hero__copy--plain {
  background: #fff6ed var(--story-hero-pattern-image, url("../Our Story img/banner back.png")) center center / cover no-repeat;
}

.story-hero__copy--plain::before {
  display: none;
}

.story-hero__copy h1 {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: 72px;
  line-height: 82px;
  letter-spacing: 0.01em;
  color: #FF7300;
  text-align: center;
}

.story-hero__media {
  border-left: 1px solid #171312;
  overflow: hidden;
}

.story-hero__media img {
  width: 100%;
  height: 100%;
  min-height: 519px;
  object-fit: cover;
  object-position: center center;
  filter: grayscale(1);
}

.story-section {
  padding: 116px 0;
}

.story-section .container {
  max-width: 1720px;
  padding-left: 0;
  padding-right: 0;
}

.story-section .align-items-center {
  align-items: flex-start;
}

.story-about__image {
  border: 2px solid #171312;
  border-radius: 24px;
  overflow: hidden;
}

.story-about__image img {
  width: 100%;
  height: 666px;
  object-fit: cover;
}

.story-about__copy {
  padding-left: 35px;
}

.story-about__copy h2 {
  margin: 0 0 28px;
  font-size: 54px;
  line-height: 64px;
  letter-spacing: 0.01em;
}

.story-rich-text p {
  max-width: 820px;
  margin: 0 0 27px;
}

.story-rich-text p:last-child {
  margin-bottom: 0;
}

.story-zabiha {
  position: relative;
  border-top: 1px solid #171312;
  border-bottom: 1px solid #171312;
  background-color: #F9F2EA;
}

.story-zabiha::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 24%, rgba(255, 255, 255, 0.38), transparent 24%),
    radial-gradient(circle at 74% 30%, rgba(255, 255, 255, 0.24), transparent 26%);
  pointer-events: none;
}

.story-zabiha .container {
  position: relative;
  z-index: 1;
}

.story-zabiha__copy h2 {
  max-width: 720px;
  margin: 0 0 30px;
  font-size: 54px;
  line-height: 64px;
  letter-spacing: 0.01em;
}

.story-zabiha__intro,
.story-zabiha__closing {
  max-width: 820px;
  margin: 0;
}

.story-zabiha__features {
  max-width: 895px;
  margin: 34px 0 34px;
}

.story-zabiha__feature {
  display: grid;
  grid-template-columns: 96px 1fr;
  align-items: center;
  gap: 26px;
  padding: 28px 0;
  border-bottom: 1px dashed rgba(23, 19, 18, 0.24);
}

.story-zabiha__feature:first-child {
  border-top: 0;
}

.story-zabiha__feature img {
  width: 64px;
  max-height: 64px;
  object-fit: contain;
}

.story-zabiha__feature p {
  margin: 0;
  max-width: 790px;
}

.story-zabiha__badge {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 680px;
}

.story-zabiha__badge img {
  width: min(100%, 760px);
  filter: drop-shadow(0 24px 28px rgba(0, 0, 0, 0.15));
}

.story-vibes {
  background: #f6eee6;
  padding: 128px 0 116px;
}

.story-vibes h2 {
  margin: 0;
  max-width: 660px;
  font-size: 54px;
  line-height: 64px;
  letter-spacing: 0.01em;
}

.story-vibes__cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.story-vibes__card {
  display: block;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.story-vibes__card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.12);
}

.story-vibes__thumb {
  position: relative;
  display: block;
  aspect-ratio: 0.76 / 1;
  overflow: hidden;
}

.story-vibes__thumb > img:first-child {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.story-vibes__play {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 70px;
  height: 70px;
  transform: translate(-50%, -50%);
  object-fit: contain;
}

.story-vibes__meta {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
}

.story-vibes__meta::before {
  content: "";
  display: block;
  background: #FF7300;
  mask-position: center;
  mask-repeat: no-repeat;
  mask-size: contain;
}

.story-vibes__meta:has(img)::before {
  display: none;
}

.story-vibes__meta img {
  width: 34px;
  max-height: 41px;
  object-fit: contain;
}

.story-vibes__meta--instagram::before {
  width: 33px;
  height: 33px;
  mask-image: url("data:image/svg+xml,%3Csvg width='33' height='33' viewBox='0 0 33 33' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.4956 10.9977C13.4658 10.9977 10.9933 13.4702 10.9933 16.5C10.9933 19.5298 13.4658 22.0023 16.4956 22.0023C19.5253 22.0023 21.9978 19.5298 21.9978 16.5C21.9978 13.4702 19.5253 10.9977 16.4956 10.9977ZM32.9982 16.5C32.9982 14.2215 33.0188 11.9636 32.8908 9.68915C32.7629 7.04736 32.1602 4.70278 30.2285 2.77097C28.2926 0.835041 25.9522 0.236512 23.3104 0.10855C21.0319 -0.0194112 18.7741 0.00122779 16.4997 0.00122779C14.2212 0.00122779 11.9633 -0.0194112 9.68897 0.10855C7.04723 0.236512 4.70269 0.839169 2.77092 2.77097C0.835026 4.70691 0.236507 7.04736 0.108548 9.68915C-0.0194109 11.9677 0.00122776 14.2256 0.00122776 16.5C0.00122776 18.7744 -0.0194109 21.0364 0.108548 23.3109C0.236507 25.9526 0.839153 28.2972 2.77092 30.229C4.70682 32.165 7.04723 32.7635 9.68897 32.8914C11.9675 33.0194 14.2253 32.9988 16.4997 32.9988C18.7782 32.9988 21.036 33.0194 23.3104 32.8914C25.9522 32.7635 28.2967 32.1608 30.2285 30.229C32.1644 28.2931 32.7629 25.9526 32.8908 23.3109C33.0229 21.0364 32.9982 18.7785 32.9982 16.5ZM16.4956 24.9661C11.8106 24.9661 8.02963 21.185 8.02963 16.5C8.02963 11.815 11.8106 8.0339 16.4956 8.0339C21.1805 8.0339 24.9615 11.815 24.9615 16.5C24.9615 21.185 21.1805 24.9661 16.4956 24.9661ZM25.3082 9.66438C24.2144 9.66438 23.3311 8.78103 23.3311 7.68717C23.3311 6.59331 24.2144 5.70996 25.3082 5.70996C26.4021 5.70996 27.2854 6.59331 27.2854 7.68717C27.2857 7.94691 27.2348 8.20417 27.1356 8.4442C27.0363 8.68424 26.8907 8.90233 26.707 9.086C26.5234 9.26966 26.3053 9.41529 26.0653 9.51454C25.8252 9.61379 25.568 9.66471 25.3082 9.66438Z'/%3E%3C/svg%3E");
}

.story-vibes__meta--tiktok::before {
  width: 34px;
  height: 34px;
  mask-image: url("data:image/svg+xml,%3Csvg width='34' height='34' viewBox='0 0 34 34' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M31.8963 8.52734C29.9559 8.52734 28.1656 7.88453 26.7279 6.80012C25.079 5.55699 23.8943 3.73348 23.4759 1.63172C23.371 1.10325 23.3159 0.566108 23.3113 0.0273438H17.7683V15.1733L17.7617 23.4694C17.7617 25.6874 16.3174 27.568 14.3152 28.2294C13.7155 28.4277 13.0838 28.5115 12.4532 28.4764C11.6191 28.4306 10.8375 28.1789 10.1582 27.7725C8.71251 26.9079 7.73235 25.3394 7.70579 23.5451C7.66395 20.7408 9.93106 18.4544 12.7334 18.4544C13.2866 18.4544 13.8178 18.5447 14.3152 18.7087V13.0808C13.7906 13.0031 13.2567 12.9626 12.7168 12.9626C9.6495 12.9626 6.78075 14.2376 4.73012 16.5346C3.1802 18.2705 2.25051 20.4851 2.10708 22.8073C1.91915 25.858 3.03544 28.758 5.20028 30.8976C5.51836 31.2117 5.85239 31.5032 6.20169 31.7722C8.05774 33.2006 10.3268 33.9749 12.7168 33.9749C13.2567 33.9749 13.7906 33.935 14.3152 33.8573C16.5478 33.5266 18.6077 32.5046 20.2333 30.8976C22.2308 28.9234 23.3345 26.3023 23.3465 23.5126L23.3179 11.1238C24.2731 11.8606 25.3194 12.4708 26.431 12.9394C28.1702 13.6732 30.0143 14.045 31.9122 14.0444V8.52601C31.9135 8.52734 31.8976 8.52734 31.8963 8.52734Z'/%3E%3C/svg%3E");
}

.story-vibes__meta--facebook::before {
  width: 21px;
  height: 41px;
  mask-image: url("data:image/svg+xml,%3Csvg width='21' height='41' viewBox='0 0 21 41' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.6319 40.4414V21.9955H19.821L20.7495 14.8047H13.6319V10.2144C13.6319 8.13317 14.2075 6.71482 17.1954 6.71482L21 6.71325V0.281533C20.342 0.19603 18.0835 0 15.4548 0C9.96574 0 6.2078 3.3505 6.2078 9.50225V14.8047H0V21.9955H6.2078V40.4414H13.6319Z'/%3E%3C/svg%3E");
}

@media only screen and (min-width: 1200px) and (max-width: 1366px) {
  .story-hero__copy h1 {
    font-size: 60px;
    line-height: 70px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 44px !important;
    line-height: 54px;
  }
}

@media (max-width: 1199.98px) {
  .story-section .container {
    padding-left: 40px;
    padding-right: 40px;
  }

  .story-about__copy {
    padding-left: 20px;
  }

  .story-zabiha__badge img {
    width: min(100%, 560px);
  }
}

@media (max-width: 991.98px) {
  .story-hero__copy,
  .story-hero__media {
    min-height: 380px;
  }

  .story-hero__media {
    border-left: 0;
    border-top: 1px solid #171312;
  }

  .story-hero__media img {
    min-height: 380px;
  }

  .story-section {
    padding: 76px 0;
  }

  .story-about__copy {
    padding-left: 0;
  }

  .story-about__image img {
    height: auto;
  }

  .story-zabiha__badge {
    min-height: auto;
  }

  .story-vibes__cards {
    grid-template-columns: repeat(3, minmax(180px, 1fr));
    overflow-x: auto;
    padding-bottom: 8px;
  }
}

@media (max-width: 767.98px) {
  .story-section .container {
    padding-left: 20px;
    padding-right: 20px;
  }

  .story-hero__copy {
    padding: 54px 24px;
  }

  .story-hero__copy h1 {
    font-size: 50px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 42px;
  }

  .story-zabiha__feature {
    grid-template-columns: 56px 1fr;
    gap: 18px;
  }

  .story-zabiha__feature img {
    width: 48px;
  }

  .story-vibes__cards {
    grid-template-columns: 1fr;
  }

  .story-vibes__thumb {
    aspect-ratio: 1 / 1.1;
  }
}

@media (max-width: 1080px) {
  .story-section {
    padding: 88px 0;
  }

  .story-about__copy {
    padding-left: 0;
  }

  .story-hero__copy {
    padding: 48px 28px;
  }

  .story-hero__copy h1 {
    font-size: 52px;
    line-height: 60px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 34px !important;
    line-height: 46px;
  }

  .our-story-page h3 {
    font-size: 20px;
    line-height: 24px;
  }

  .story-rich-text p,
  .story-zabiha__intro,
  .story-zabiha__closing,
  .story-zabiha__feature p,
  .our-story-page p {
    font-size: 18px;
    line-height: 28px;
  }

  .story-about__copy {
    padding-left: 0;
  }

  .story-zabiha__feature {
    gap: 20px;
    grid-template-columns: 74px 1fr;
  }

  .story-zabiha__badge {
    min-height: 560px;
  }

  .story-zabiha__badge img {
    width: min(100%, 620px);
  }
}

@media (max-width: 1028px) {
  .story-about__copy {
    padding-left: 0 !important;
  }
}

@media (max-width: 1024px) {
  .story-section .container {
    padding-left: 32px;
    padding-right: 32px;
  }

  .story-hero__copy h1 {
    font-size: 40px;
    line-height: 50px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 30px !important;
    line-height: 40px !important;
  }

  .story-about__image img {
    height: 520px;
  }

  .story-vibes {
    padding: 92px 0 84px;
  }
}

@media (max-width: 768px) {
  .story-section {
    padding: 64px 0;
  }

  .story-section .container {
    padding-left: 24px;
    padding-right: 24px;
  }

  .story-hero__copy,
  .story-hero__media,
  .story-hero__media img {
    min-height: 200px;
  }

  .story-hero__copy h1 {
    font-size: 40px;
    line-height: 46px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 34px;
    line-height: 40px;
  }

  .story-rich-text p,
  .story-zabiha__intro,
  .story-zabiha__closing,
  .story-zabiha__feature p,
  .our-story-page p {
    font-size: 16px;
    line-height: 26px;
  }

  .story-about__image {
    border-radius: 18px;
  }

  .story-about__image img {
    height: auto;
  }

  .story-zabiha__feature {
    grid-template-columns: 52px 1fr;
    padding: 20px 0;
  }

  .story-zabiha__feature img {
    width: 44px;
    max-height: 44px;
  }

  .story-zabiha__badge {
    min-height: auto;
    padding-top: 12px;
  }

  .story-vibes {
    padding: 72px 0 64px;
  }

  .story-vibes__cards {
    gap: 12px;
  }
}

@media (max-width: 425px) {
  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 25px !important;
    line-height: 32px !important;
  }

  .story-section .container {
    padding-left: 16px;
    padding-right: 16px;
  }

  .story-about__copy {
    padding-left: 0;
  }

  .story-hero__copy {
    padding: 34px 16px;
  }

  .story-hero__copy h1 {
    font-size: 34px;
    line-height: 38px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 28px;
    line-height: 34px;
  }

  .story-rich-text p,
  .story-zabiha__intro,
  .story-zabiha__closing,
  .story-zabiha__feature p,
  .our-story-page p {
    font-size: 15px;
    line-height: 24px;
  }

  .story-zabiha__features {
    margin: 22px 0;
  }

  .story-vibes__play {
    width: 56px;
    height: 56px;
  }

}

@media (max-width: 320px) {
  .story-section .container {
    padding-left: 12px;
    padding-right: 12px;
  }

  .story-hero__copy h1 {
    font-size: 30px;
    line-height: 34px;
  }

  .story-about__copy h2,
  .story-zabiha__copy h2,
  .story-vibes h2 {
    font-size: 24px;
    line-height: 30px;
  }

  .story-rich-text p,
  .story-zabiha__intro,
  .story-zabiha__closing,
  .story-zabiha__feature p,
  .our-story-page p {
    font-size: 14px;
    line-height: 22px;
  }
}