/* ============================================================
   Works Hero — reference layout 1672 x 941
   Header is kept from the existing site. This sheet only replaces
   the top visual area of wireframe-works.html.
   ============================================================ */

.works--visual-hero {
  padding: 0 0 64px !important;
  background: #fff;
  overflow: visible;
}

.works-hero {
  position: relative;
  width: 100%;
  height: 845px;
  overflow: hidden;
  background: #fff;
  isolation: isolate;
}

.works-hero__stage {
  position: absolute;
  top: 0;
  left: 50%;
  width: 1672px;
  height: 845px;
  transform: translateX(-50%) scale(var(--works-hero-scale, 1));
  transform-origin: top center;
}

.works-hero__copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  text-align: center;
  pointer-events: none;
}

/* ----- decorative assets: coordinates are the reference pixels ----- */
.works-hero__grass,
.works-hero__cottage,
.works-hero__floral,
.works-hero__bird,
.works-hero__script,
.works-hero__polaroid,
.works-hero__badge {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  pointer-events: none;
  user-select: none;
}

.works-hero__grass {
  z-index: 0;
  left: 0;
  top: 648px;
  width: 1672px;
  opacity: .82;
}

.works-hero__cottage {
  z-index: 2;
  left: 3px;
  top: 279px;
  width: 492px;
}

.works-hero__floral {
  z-index: 2;
  left: 1271px;
  top: 63px;
  width: 305px;
  transform: rotate(-8deg);
  transform-origin: 100% 0;
}

.works-hero__bird {
  z-index: 4;
  left: 305px;
  top: 433px;
  width: 41px;
}

.works-hero__script {
  z-index: 4;
  left: 878px;
  top: 592px;
  width: 185px;
}

.works-hero__polaroid--interior {
  z-index: 3;
  left: 1263px;
  top: 400px;
  width: 375px;
}

.works-hero__polaroid--exterior {
  z-index: 4;
  left: 1090px;
  top: 567px;
  width: 213px;
}

.works-hero__badge {
  z-index: 6;
  left: 742px;
  top: 121px;
  width: 174px;
}

/* ----- copy ----- */
.works-hero__title {
  position: absolute;
  z-index: 6;
  top: 226px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 760px;
  color: #2f353a;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif !important;
  font-size: 64px;
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: .22em;
  white-space: nowrap;
}

.works-hero__divider {
  position: absolute;
  z-index: 6;
  top: 337px;
  left: 50%;
  transform: translateX(-50%);
  width: 186px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: #8faac4;
}

.works-hero__divider span {
  display: block;
  width: 57px;
  height: 1px;
  background: #b9cfdc;
}

.works-hero__divider b {
  display: block;
  width: 22px;
  height: 15px;
  font-size: 0;
  background: radial-gradient(circle, #39779d 0 3px, transparent 4px);
  opacity: .62;
  transform: rotate(90deg);
}

.works-hero__lead {
  position: absolute;
  z-index: 6;
  top: 370px;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  width: 760px;
  color: #4f78a0;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 20px;
  font-weight: 400;
  line-height: 1.55;
  letter-spacing: .115em;
  white-space: nowrap;
}

.works-hero__tabs {
  position: absolute;
  z-index: 7;
  top: 461px;
  left: 477px;
  width: 711px;
  height: 68px;
  display: grid;
  grid-template-columns: 128px 120px 140px 130px 193px;
  border: 1px solid #ddd5c6;
  border-radius: 999px;
  background: rgba(255,255,255,.96);
  overflow: hidden;
  pointer-events: auto;
  box-shadow: none;
}

.works-hero__tabs a {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 68px;
  padding: 0;
  border: 0;
  border-right: 1px solid #ddd5c6;
  color: #34393e;
  background: transparent;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "ヒラギノ明朝 ProN", serif;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: .03em;
  transition: background .25s ease, color .25s ease;
}

.works-hero__tabs a:last-child { border-right: 0; }
.works-hero__tabs a::after { display: none !important; }

.works-hero__tabs a.is-active {
  color: #fff;
  background: #39779d;
}

.works-hero__tabs a:not(.is-active):hover {
  background: #f4f7fa;
}

/* Keep the project grid exactly where the new hero ends. */
.works__content {
  position: relative;
  z-index: 3;
  padding-top: 0;
}

.works--visual-hero .works__grid {
  margin-top: 0;
}

/* ---------- scalable desktop canvas ---------- */
@media (max-width: 1671px) and (min-width: 901px) {
  .works-hero { min-height: 0; }
}

/* ---------- tablet / mobile: preserve hierarchy, avoid collisions ---------- */
@media (max-width: 900px) {
  .works-hero {
    height: auto;
    min-height: 680px;
    overflow: hidden;
    padding: 58px 20px 42px;
  }
  .works-hero__stage {
    position: relative;
    left: auto;
    top: auto;
    width: 100%;
    height: 580px;
    transform: none;
  }
  .works-hero__badge {
    left: 50%; top: 0; width: 150px; transform: translateX(-50%);
  }
  .works-hero__title {
    top: 105px; width: 100%; font-size: clamp(34px, 8vw, 48px); letter-spacing: .08em;
  }
  .works-hero__divider { top: 183px; }
  .works-hero__lead {
    top: 218px; width: 100%; font-size: 14px; line-height: 1.9; white-space: normal; padding: 0 14px;
  }
  .works-hero__tabs {
    top: 300px; left: 50%; transform: translateX(-50%);
    width: min(96vw, 620px); height: auto;
    grid-template-columns: repeat(5, 1fr);
  }
  .works-hero__tabs a { height: 52px; font-size: 12px; }

  .works-hero__cottage { left: -85px; top: 360px; width: 330px; opacity: .95; }
  .works-hero__bird { left: 20%; top: 335px; width: 36px; }
  .works-hero__floral { right: -95px; left: auto; top: 295px; width: 260px; opacity: .8; }
  .works-hero__grass { left: -20%; top: 470px; width: 140%; opacity: .75; }
  .works-hero__script,
  .works-hero__polaroid { display: none; }
}