.page-enten-1x1 {
  --duck-brown: #4b2c1c;
  --duck-brown-soft: #7b543a;
  --duck-orange: #e88920;
  --duck-cream: #fbf7f1;
  --duck-line: rgba(75, 44, 28, .13);
}

.enten-1x1-main {
  padding-top: 34px;
  padding-bottom: 72px;
}

.enten-1x1-main .section {
  margin: 0;
  padding: 0;
}

.enten-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(300px, .95fr) minmax(220px, .52fr);
  gap: 34px;
  align-items: center;
}

.enten-intro__image,
.enten-intro__workshop,
.enten-workshop-story__image {
  margin: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #e9e3db;
  box-shadow: 0 22px 48px rgba(45, 30, 18, .12);
}

.enten-intro__image img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.enten-intro__copy h2,
.enten-process h2,
.enten-workshop-story h2,
.enten-sustainability h2,
.enten-final h2 {
  color: var(--text);
  line-height: 1.12;
}

.enten-intro__copy h2 {
  margin: 8px 0 18px;
  font-size: clamp(2rem, 3.2vw, 3.15rem);
}

.enten-intro__copy p {
  margin: 0 0 15px;
  line-height: 1.75;
}

.enten-intro__workshop {
  align-self: stretch;
  padding: 10px;
  border-radius: 4px;
  background: #fff;
  transform: rotate(2.2deg);
}

.enten-intro__workshop img {
  display: block;
  width: 100%;
  height: calc(100% - 52px);
  min-height: 320px;
  object-fit: cover;
  object-position: 50% 44%;
}

.enten-intro__workshop figcaption {
  padding: 11px 8px 5px;
  color: var(--duck-brown-soft);
  font-size: .84rem;
  line-height: 1.35;
  text-align: center;
}

.enten-process {
  margin-top: 46px !important;
}

.enten-process .section__head {
  max-width: 880px;
  margin: 0 auto 28px;
  text-align: center;
}

.enten-process .section__head h2 {
  margin: 7px 0 10px;
  font-size: clamp(1.8rem, 2.8vw, 2.7rem);
}

.enten-process .section__sub {
  margin: 0;
  color: var(--muted);
}

.enten-process__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}

.enten-step {
  position: relative;
  display: flex;
  min-width: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--duck-line);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 16px 38px rgba(45, 30, 18, .08);
}

.enten-step__media {
  position: relative;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  background: #ded1bd;
}

.enten-step__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.enten-step:nth-child(1) .enten-step__media img {
  object-position: 31% 54%;
}

.enten-step:nth-child(3) .enten-step__media img {
  object-position: 50% 36%;
}

.enten-step:nth-child(4) .enten-step__media img {
  object-position: 51% 44%;
}

.enten-step:hover .enten-step__media img {
  transform: scale(1.035);
}

.enten-step__number {
  position: absolute;
  top: 13px;
  left: 13px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 43px;
  height: 43px;
  border: 3px solid #fff;
  border-radius: 50%;
  background: var(--duck-orange);
  color: #fff;
  font-weight: 900;
  box-shadow: 0 8px 20px rgba(74, 42, 20, .2);
}

.enten-step__body {
  position: relative;
  flex: 1;
  padding: 28px 22px 24px;
}

.enten-step__icon {
  position: absolute;
  top: -27px;
  left: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 4px solid #fff;
  border-radius: 50%;
  background: var(--duck-orange);
  font-size: 1.35rem;
  box-shadow: 0 8px 18px rgba(58, 35, 18, .18);
}

.enten-step h3 {
  margin: 0 0 12px;
  color: var(--duck-brown);
  font-size: 1.16rem;
  line-height: 1.25;
}

.enten-step p {
  margin: 0;
  color: var(--muted);
  font-size: .95rem;
  line-height: 1.65;
}

.enten-step__media--illustration {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,.92), transparent 38%),
    linear-gradient(145deg, #dbc9ac, #f1e7d6);
}

.duck-rawbody {
  position: relative;
  width: 150px;
  height: 185px;
  filter: drop-shadow(0 15px 14px rgba(64, 38, 20, .16));
}

.duck-rawbody span {
  position: absolute;
  display: block;
  background: linear-gradient(135deg, #b6814d, #d5a96f 48%, #956638);
  box-shadow: inset -7px -8px 12px rgba(78, 45, 21, .16), inset 6px 5px 9px rgba(255,255,255,.25);
}

.duck-rawbody__head {
  top: 5px;
  left: 74px;
  width: 55px;
  height: 38px;
  border-radius: 60% 85% 42% 55%;
  transform: rotate(-18deg);
}

.duck-rawbody__head::after {
  content: '';
  position: absolute;
  top: 11px;
  right: -25px;
  width: 37px;
  height: 15px;
  border-radius: 0 90% 90% 0;
  background: linear-gradient(135deg, #b6814d, #d5a96f);
  transform: skewX(-16deg);
}

.duck-rawbody__neck {
  top: 29px;
  left: 69px;
  width: 49px;
  height: 74px;
  border-radius: 45% 48% 30% 30%;
  transform: rotate(7deg);
}

.duck-rawbody__body {
  top: 87px;
  left: 37px;
  width: 93px;
  height: 63px;
  border-radius: 55% 58% 48% 45%;
  transform: rotate(5deg);
}

.duck-rawbody__leg {
  top: 142px;
  width: 16px;
  height: 31px;
  border-radius: 7px;
}

.duck-rawbody__leg--left { left: 57px; }
.duck-rawbody__leg--right { left: 101px; }

.duck-rawbody__foot {
  top: 168px;
  width: 46px;
  height: 16px;
  border-radius: 10px 18px 7px 9px;
}

.duck-rawbody__foot--left { left: 38px; }
.duck-rawbody__foot--right { left: 87px; }

.enten-workshop-story {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 46px;
  align-items: center;
  margin-top: 56px !important;
  padding: 36px !important;
  border: 1px solid var(--duck-line);
  border-radius: 30px;
  background: var(--duck-cream);
}

.enten-workshop-story__image img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  object-position: 50% 43%;
}

.enten-workshop-story h2 {
  margin: 8px 0 16px;
  font-size: clamp(1.75rem, 2.7vw, 2.55rem);
}

.enten-workshop-story p {
  margin: 0 0 14px;
  line-height: 1.75;
}

.enten-sustainability {
  margin-top: 34px !important;
}

.enten-sustainability__card {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 34px 38px;
  border: 1px solid rgba(68, 111, 62, .18);
  border-radius: 28px;
  background: linear-gradient(135deg, #f4f8ed, #fbf8f1);
}

.enten-sustainability__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  border-radius: 50%;
  background: #64834d;
  color: #fff;
  font-size: 2rem;
}

.enten-sustainability h2 {
  margin: 7px 0 10px;
}

.enten-sustainability p {
  margin: 0;
  line-height: 1.7;
}

.enten-final {
  display: flex;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  margin-top: 34px !important;
  padding: 30px 34px !important;
  border: 1px solid var(--duck-line);
  border-radius: 28px;
  background: #fff;
}

.enten-final__copy {
  max-width: 820px;
}

.enten-final h2 {
  margin: 6px 0 10px;
}

.enten-final p {
  margin: 0;
  line-height: 1.65;
}

.enten-final .btn {
  flex: 0 0 auto;
}

@media (max-width: 1180px) {
  .enten-intro {
    grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr);
  }

  .enten-intro__workshop {
    grid-column: 1 / -1;
    justify-self: end;
    width: min(440px, 100%);
    margin-top: -14px;
  }

  .enten-process__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .enten-1x1-main {
    padding-top: 24px;
    padding-bottom: 48px;
  }

  .enten-intro,
  .enten-workshop-story {
    grid-template-columns: 1fr;
  }

  .enten-intro {
    gap: 25px;
  }

  .enten-intro__copy {
    order: 1;
  }

  .enten-intro__image {
    order: 0;
  }

  .enten-intro__workshop {
    order: 2;
    width: calc(100% - 18px);
    margin: 0 auto;
    transform: rotate(1deg);
  }

  .enten-intro__workshop img {
    min-height: 330px;
  }

  .enten-process {
    margin-top: 34px !important;
  }

  .enten-process__grid {
    grid-template-columns: 1fr;
  }

  .enten-step__media {
    aspect-ratio: 16 / 10;
  }

  .enten-workshop-story {
    gap: 26px;
    margin-top: 38px !important;
    padding: 22px !important;
  }

  .enten-sustainability__card {
    grid-template-columns: 1fr;
    padding: 26px 24px;
  }

  .enten-sustainability__badge {
    width: 64px;
    height: 64px;
  }

  .enten-final {
    align-items: flex-start;
    flex-direction: column;
    padding: 26px 24px !important;
  }
}
