.about-page {
  background:
    radial-gradient(circle at top, rgba(255, 245, 229, 0.74), transparent 30%),
    linear-gradient(180deg, #fffdf9 0%, #fbf8f3 42%, #f8f2e8 100%);
}

.about-main {
  flex: 1;
  padding-top: 1rem;
}

.about-hero {
  padding: 0;
}

.about-hero__frame {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: none;
  height: clamp(300px, 41vw, 560px);
  margin: 0;
  background: #f3eadf;
  box-shadow: none;
}

.about-hero__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0;
  filter: saturate(1.02);
  transition:
    opacity 760ms ease,
    filter 760ms ease;
}

.about-hero__media.is-active {
  opacity: 1;
}

.about-hero__media.is-preparing {
  opacity: 0;
  filter: blur(8px) saturate(1.08);
}

.about-hero__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center right;
  transform: scale(1.06);
  will-change: transform;
}

.about-hero__media.is-active .about-hero__image[data-motion="zoom-out"] {
  animation: aboutHeroZoomOut 14s ease-in-out infinite alternate;
}

.about-hero__media.is-active .about-hero__image[data-motion="zoom-in"] {
  animation: aboutHeroZoomIn 14s ease-in-out infinite alternate;
}

.about-hero__media.is-active .about-hero__image[data-motion="drift"] {
  animation: aboutHeroDrift 16s ease-in-out infinite alternate;
}

.about-hero__media.is-preparing .about-hero__image {
  transform: scale(1.13);
}

.about-hero__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(251, 247, 239, 0.92) 0%, rgba(251, 247, 239, 0.84) 22%, rgba(251, 247, 239, 0.56) 38%, rgba(32, 18, 12, 0.08) 68%, rgba(24, 13, 10, 0.2) 100%),
    radial-gradient(circle at 18% 26%, rgba(255, 255, 255, 0.42), transparent 24%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), rgba(39, 22, 14, 0.12));
  pointer-events: none;
}

.about-hero__copy {
  position: absolute;
  left: clamp(2.4rem, 7vw, 7.2rem);
  top: 50%;
  z-index: 4;
  width: min(32rem, calc(100% - 2rem));
  padding: 0;
  transform: translateY(-50%);
  transition:
    opacity 240ms ease,
    transform 240ms ease;
}

.about-hero__copy.is-updating {
  opacity: 0.72;
  transform: translateY(calc(-50% + 6px));
}

.about-hero__eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--brand-gold);
  text-shadow: none;
}

.about-hero__title {
  margin: 1rem 0 0;
  font-size: clamp(2rem, 4vw, 3.3rem);
  font-weight: 700;
  line-height: 1.18;
  letter-spacing: 0.12em;
  color: #6f1813;
  text-shadow: none;
}

.about-hero__desc {
  max-width: 26rem;
  margin: 1.15rem 0 0;
  font-size: 0.96rem;
  line-height: 2;
  letter-spacing: 0.04em;
  color: #65544a;
  text-shadow: none;
}

.about-tabs {
  padding: 0.85rem 0.75rem 0;
}

.about-tabs__inner {
  display: flex;
  justify-content: center;
  gap: 0;
  max-width: 1420px;
  margin: 0 auto;
  border-top: 1px solid rgba(154, 31, 31, 0.08);
  border-bottom: 1px solid rgba(154, 31, 31, 0.08);
}

.about-tabs__item {
  flex: 1;
  min-width: 0;
  padding: 1rem 0.5rem;
  text-align: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 0.95rem;
  letter-spacing: 0.08em;
  font-family: inherit;
  color: #6f5d4f;
  transition:
    color 180ms ease,
    background-color 180ms ease;
}

.about-tabs__item + .about-tabs__item {
  border-left: 1px solid rgba(154, 31, 31, 0.08);
}

.about-tabs__item:hover,
.about-tabs__item.is-active {
  color: #9a1f1f;
  background: rgba(154, 31, 31, 0.03);
}

.about-section {
  padding: 3.6rem 1rem 4.8rem;
}

.about-section[hidden] {
  display: none !important;
}

.about-section--intro {
  padding-top: 2.6rem;
}

.about-section__inner {
  max-width: 1440px;
  margin: 0 auto;
}

.about-heading {
  text-align: center;
}

.about-heading--left {
  text-align: left;
}

.about-heading__eyebrow {
  margin: 0;
  font-size: 0.76rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #b1916d;
}

.about-heading__title {
  margin: 0.8rem 0 0;
  font-size: clamp(2rem, 4vw, 2.7rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #47372d;
}

.about-copy {
  max-width: 860px;
  margin: 2.25rem auto 0;
}

.about-copy p {
  margin: 0;
  font-size: 1rem;
  line-height: 2.15;
  letter-spacing: 0.03em;
  color: #655547;
  text-align: justify;
}

.about-copy p + p {
  margin-top: 1rem;
}

.culture-layout {
  margin-top: 2.4rem;
  border-top: 1px solid rgba(154, 31, 31, 0.08);
}

.culture-band {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  align-items: center;
  gap: 2.4rem;
  padding: 2.4rem 0;
  border-bottom: 1px solid rgba(154, 31, 31, 0.08);
}

.culture-band__copy {
  padding-left: 0.35rem;
}

.culture-band__label {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.culture-band__index {
  font-size: clamp(2.5rem, 5vw, 4rem);
  line-height: 1;
  color: #8f201d;
  letter-spacing: 0.02em;
}

.culture-band__slash {
  width: 1px;
  height: 4.2rem;
  background: linear-gradient(180deg, rgba(170, 60, 48, 0.18), rgba(170, 60, 48, 0.78), rgba(170, 60, 48, 0.18));
  transform: rotate(24deg);
  transform-origin: center;
}

.culture-band__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  letter-spacing: 0.12em;
  color: #1f1918;
}

.culture-band__text {
  max-width: 24rem;
  margin: 1.6rem 0 0 5.8rem;
  font-size: 1.02rem;
  line-height: 2.1;
  letter-spacing: 0.04em;
  color: #4f4036;
}

.culture-band__keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 1.3rem 1.8rem;
  margin: 1.9rem 0 0 5.8rem;
}

.culture-band__keyword {
  position: relative;
  padding-right: 1.9rem;
  font-size: 1.4rem;
  line-height: 1.7;
  letter-spacing: 0.1em;
  color: #2b2220;
}

.culture-band__keyword:not(:last-child)::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 1px;
  height: 1.4rem;
  background: rgba(154, 31, 31, 0.18);
  transform: translateY(-50%);
}

.culture-band__media {
  position: relative;
  overflow: hidden;
  min-height: 15rem;
  background: transparent;
}

.culture-band__media::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251, 248, 243, 0.82) 0%,
    rgba(251, 248, 243, 0.68) 8%,
    rgba(251, 248, 243, 0.42) 16%,
    rgba(251, 248, 243, 0.18) 26%,
    rgba(251, 248, 243, 0.05) 36%,
    rgba(251, 248, 243, 0) 46%
  );
}

.culture-band__image {
  width: 100%;
  height: 100%;
  min-height: 15rem;
  object-fit: cover;
  object-position: center;
  display: block;
}

.culture-band__media--soft .culture-band__image {
  object-position: center right;
}

.culture-band__media--crop-right .culture-band__image {
  object-position: center right;
}

.culture-band__media--crop-top .culture-band__image {
  object-position: center top;
}

.advantage-layout {
  margin-top: 2.4rem;
  border-top: 1px solid rgba(154, 31, 31, 0.08);
}

.advantage-band {
  display: grid;
  grid-template-columns: minmax(0, 0.94fr) minmax(0, 1.06fr);
  align-items: stretch;
  gap: 0;
  min-height: 21rem;
  border-bottom: 1px solid rgba(154, 31, 31, 0.08);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(251, 248, 243, 0.98)),
    #fbf8f3;
}

.advantage-band--reverse {
  grid-template-columns: minmax(0, 1.06fr) minmax(0, 0.94fr);
}

.advantage-band__copy {
  position: relative;
  display: flex;
  align-items: center;
  gap: 2.2rem;
  padding: 3rem 2.4rem 3rem 2.1rem;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.64), rgba(251, 248, 243, 0.88)),
    transparent;
}

.advantage-band__badge {
  position: relative;
  flex: 0 0 auto;
  width: 7.8rem;
  height: 7.8rem;
  border-radius: 9999px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.92), rgba(248, 241, 232, 0.92)),
    #fff;
  box-shadow:
    inset 0 0 0 1px rgba(150, 126, 99, 0.18),
    inset 0 0 0 10px rgba(255, 251, 246, 0.72);
}

.advantage-band__badge::before {
  content: "";
  position: absolute;
  inset: -0.55rem;
  border-radius: 9999px;
  border: 1px solid rgba(168, 149, 125, 0.18);
  transform: rotate(-18deg);
  pointer-events: none;
}

.advantage-band__badge-label {
  font-size: 1.1rem;
  letter-spacing: 0.2em;
  color: #5c463b;
}

.advantage-band__badge-number {
  margin-top: 0.28rem;
  font-size: 2.85rem;
  line-height: 1;
  color: #8d1f1d;
}

.advantage-band__body {
  position: relative;
  max-width: 20rem;
  padding-left: 2.15rem;
}

.advantage-band__body::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.35rem;
  width: 1px;
  height: 5.1rem;
  background: rgba(150, 126, 99, 0.22);
}

.advantage-band__title {
  margin: 0;
  font-size: clamp(2rem, 4vw, 3.15rem);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: #2b211f;
}

.advantage-band__title::after {
  content: "";
  display: block;
  width: 2.1rem;
  height: 2px;
  margin-top: 1.05rem;
  background: #9a1f1f;
}

.advantage-band__text {
  margin: 1.35rem 0 0;
  font-size: 1.04rem;
  line-height: 2.2;
  letter-spacing: 0.06em;
  color: #56463d;
}

.advantage-band__media {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 21rem;
  background: #f5efe6;
}

.advantage-band__media::before {
  content: "";
  position: absolute;
  left: -2%;
  top: 0;
  bottom: 0;
  width: 34%;
  z-index: 3;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(251, 248, 243, 0.86) 0%,
    rgba(251, 248, 243, 0.72) 14%,
    rgba(251, 248, 243, 0.44) 28%,
    rgba(251, 248, 243, 0.2) 44%,
    rgba(251, 248, 243, 0.06) 60%,
    rgba(251, 248, 243, 0) 100%
  );
  filter: blur(3px);
}

.advantage-band__media--right::before {
  left: auto;
  right: -2%;
  background: linear-gradient(
    270deg,
    rgba(251, 248, 243, 0.86) 0%,
    rgba(251, 248, 243, 0.72) 14%,
    rgba(251, 248, 243, 0.44) 28%,
    rgba(251, 248, 243, 0.2) 44%,
    rgba(251, 248, 243, 0.06) 60%,
    rgba(251, 248, 243, 0) 100%
  );
}

.advantage-band:first-child .advantage-band__media::before {
  width: 22%;
  background: linear-gradient(
    90deg,
    rgba(251, 248, 243, 0.42) 0%,
    rgba(251, 248, 243, 0.28) 22%,
    rgba(251, 248, 243, 0.12) 48%,
    rgba(251, 248, 243, 0.03) 74%,
    rgba(251, 248, 243, 0) 100%
  );
  filter: blur(1px);
}

.advantage-band__image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.advantage-band__image--factory {
  object-position: 62% center;
}

.advantage-band__image--products {
  position: static;
  inset: auto;
  z-index: auto;
  opacity: 1;
  object-position: center center;
}

.advantage-band__image--quality {
  object-position: center 32%;
}

.advantage-band__image--service {
  object-position: center center;
}

.advantage-band__media--products {
  background: #f6eee2;
}

@keyframes aboutHeroZoomOut {
  from {
    transform: scale(1.13) translate3d(0, 0, 0);
  }

  to {
    transform: scale(1.02) translate3d(-1.2%, -0.5%, 0);
  }
}

@keyframes aboutHeroZoomIn {
  from {
    transform: scale(1.02) translate3d(0.8%, 0, 0);
  }

  to {
    transform: scale(1.13) translate3d(-0.8%, -0.8%, 0);
  }
}

@keyframes aboutHeroDrift {
  from {
    transform: scale(1.05) translate3d(-1.4%, 0, 0);
  }

  to {
    transform: scale(1.12) translate3d(1.2%, -1%, 0);
  }
}

@media (max-width: 900px) {
  .about-main {
    padding-top: 0.8rem;
  }

  .about-hero__copy {
    width: min(28rem, calc(100% - 1.5rem));
    left: 1.8rem;
  }

  .culture-band {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    padding: 2rem 0;
  }

  .culture-band__copy {
    padding-left: 0;
  }

  .culture-band__text,
  .culture-band__keywords {
    margin-left: 0;
  }

  .culture-band__media {
    min-height: 13rem;
  }

  .culture-band__media::before {
    background: linear-gradient(
      90deg,
      rgba(251, 248, 243, 0.8) 0%,
      rgba(251, 248, 243, 0.64) 10%,
      rgba(251, 248, 243, 0.38) 20%,
      rgba(251, 248, 243, 0.16) 30%,
      rgba(251, 248, 243, 0.04) 40%,
      rgba(251, 248, 243, 0) 50%
    );
  }

  .advantage-band,
  .advantage-band--reverse {
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .advantage-band__copy {
    order: 1;
    gap: 1.3rem;
    padding: 2rem 1.25rem 1.6rem;
  }

  .advantage-band__body {
    max-width: none;
    padding-left: 1.3rem;
  }

  .advantage-band__body::before {
    height: 4rem;
  }

  .advantage-band__badge {
    width: 6rem;
    height: 6rem;
  }

  .advantage-band__badge-label {
    font-size: 0.88rem;
  }

  .advantage-band__badge-number {
    font-size: 2rem;
  }

  .advantage-band__title {
    font-size: 1.95rem;
    letter-spacing: 0.08em;
  }

  .advantage-band__text {
    font-size: 0.92rem;
  }

  .advantage-band__media {
    order: 2;
    min-height: 14rem;
  }

  .advantage-band__media::before,
  .advantage-band__media--right::before {
    left: 0;
    right: 0;
    width: 100%;
    height: 34%;
    top: auto;
    bottom: -1%;
    background: linear-gradient(
      0deg,
      rgba(251, 248, 243, 0.84) 0%,
      rgba(251, 248, 243, 0.62) 16%,
      rgba(251, 248, 243, 0.3) 36%,
      rgba(251, 248, 243, 0.08) 58%,
      rgba(251, 248, 243, 0) 100%
    );
    filter: blur(2px);
  }

}

@media (max-width: 640px) {
  .about-hero {
    padding: 0;
  }

  .about-hero__frame {
    min-height: 420px;
  }

  .about-hero__copy {
    left: 1.1rem;
    right: 1.1rem;
    top: auto;
    bottom: 1rem;
    width: auto;
    transform: none;
  }

  .about-hero__copy.is-updating {
    transform: translateY(4px);
  }

  .about-hero__title {
    font-size: 1.85rem;
    letter-spacing: 0.06em;
  }

  .about-hero__desc {
    font-size: 0.9rem;
    line-height: 1.9;
  }

  .about-tabs {
    padding: 0.7rem 0.5rem 0;
  }

  .about-tabs__inner {
    flex-wrap: wrap;
  }

  .about-tabs__item {
    flex: 1 1 100%;
    font-size: 0.88rem;
  }

  .about-tabs__item + .about-tabs__item {
    border-left: 0;
    border-top: 1px solid rgba(154, 31, 31, 0.08);
  }

  .about-section {
    padding: 3rem 0.75rem 3.5rem;
  }

  .about-heading__eyebrow {
    font-size: 0.7rem;
    letter-spacing: 0.18em;
  }

  .about-heading__title {
    letter-spacing: 0.08em;
  }

  .about-copy {
    margin-top: 1.8rem;
  }

  .about-copy p,
  .culture-band__text,
  .advantage-band__text {
    font-size: 0.92rem;
  }

  .culture-band__label {
    gap: 0.7rem;
  }

  .culture-band__index {
    font-size: 2.1rem;
  }

  .culture-band__slash {
    height: 2.9rem;
  }

  .culture-band__title {
    font-size: 1.85rem;
    letter-spacing: 0.08em;
  }

  .culture-band__keywords {
    gap: 0.8rem 1rem;
  }

  .culture-band__keyword {
    padding-right: 1.1rem;
    font-size: 1.05rem;
  }

  .culture-band__keyword:not(:last-child)::after {
    height: 1rem;
  }

}

@media (prefers-reduced-motion: reduce) {
  .about-hero__media,
  .about-hero__image,
  .about-tabs__item {
    transition: none;
    animation: none !important;
  }
}