.door-hero {
  position: relative;
  overflow: hidden;
  padding: clamp(4rem, 7vw, 7rem) 0 clamp(5rem, 8vw, 7.5rem);
  color: rgba(255, 255, 255, .76);
  background:
    radial-gradient(circle at 12% 10%, rgba(187, 117, 66, .18), transparent 28%),
    var(--forest-950);
}

.door-hero::after {
  position: absolute;
  top: -130px;
  right: -120px;
  width: 430px;
  height: 430px;
  border: 1px solid rgba(231, 202, 176, .16);
  border-radius: 50%;
  content: "";
}

.door-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(490px, 1.1fr);
  align-items: center;
  gap: clamp(3.5rem, 7vw, 7rem);
}

.door-hero__copy h1 { max-width: 730px; color: var(--white); font-size: clamp(3.2rem, 5.5vw, 5.7rem); }
.door-hero__lede { max-width: 640px; margin-bottom: 2rem; font-size: clamp(1.05rem, 1.6vw, 1.23rem); }
.door-hero__phone { color: rgba(255, 255, 255, .82); font-size: .85rem; font-weight: 800; letter-spacing: .04em; text-decoration: none; }
.door-hero__phone:hover { color: var(--white); }

.door-hero__media { position: relative; min-height: 620px; }

.door-hero__main-image {
  position: absolute;
  top: 0;
  right: 5%;
  width: 57%;
  height: 88%;
  margin: 0;
  border: 9px solid var(--cream-100);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .34);
}

.door-hero__detail-image {
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 2;
  width: 40%;
  height: 57%;
  margin: 0;
  border: 7px solid var(--forest-950);
  box-shadow: 0 22px 50px rgba(0, 0, 0, .3);
}

.door-hero__main-image img,
.door-hero__detail-image img { width: 100%; height: 100%; object-fit: cover; }

.door-hero__note {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 52%;
  margin: 0;
  padding-left: 1.25rem;
  border-left: 2px solid var(--fir-500);
  color: rgba(255, 255, 255, .58);
  font-size: .78rem;
}

.door-hero__note strong { display: block; color: var(--white); font-size: .7rem; letter-spacing: .11em; text-transform: uppercase; }

.door-solution-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; align-items: start; }
.door-solution { border: 1px solid var(--line); background: var(--white); box-shadow: 0 12px 32px rgba(25, 34, 28, .055); }
.door-solution--offset { margin-top: 2.5rem; }
.door-solution > img { width: 100%; height: 390px; object-fit: cover; }
.door-solution > div { min-height: 260px; padding: 2rem; }
.door-solution > div > span { display: block; margin-bottom: 1.6rem; color: var(--fir-600); font-size: .72rem; font-weight: 800; letter-spacing: .12em; }
.door-solution h3 { font-size: 1.9rem; }
.door-solution p { margin-bottom: 0; color: var(--muted); font-size: .92rem; }

.door-craft { color: rgba(255, 255, 255, .72); background: var(--forest-800); }
.door-craft__grid { display: grid; grid-template-columns: minmax(0, .82fr) minmax(500px, 1.18fr); gap: clamp(4rem, 8vw, 8rem); align-items: center; }
.door-craft h2, .door-craft h3 { color: var(--white); }
.door-craft__copy > p:not(.eyebrow) { max-width: 550px; margin-bottom: 2rem; }
.door-craft__details { display: grid; grid-template-columns: 1fr 1fr; border-top: 1px solid rgba(255, 255, 255, .16); border-left: 1px solid rgba(255, 255, 255, .16); }
.door-craft__details article { min-height: 210px; padding: 1.6rem; border-right: 1px solid rgba(255, 255, 255, .16); border-bottom: 1px solid rgba(255, 255, 255, .16); }
.door-craft__details article > span { display: block; margin-bottom: 2rem; color: #e2b991; font-size: .7rem; font-weight: 800; letter-spacing: .12em; }
.door-craft__details h3 { margin-bottom: .4rem; font-family: var(--sans); font-size: 1rem; font-weight: 800; }
.door-craft__details p { margin: 0; color: rgba(255, 255, 255, .58); font-size: .85rem; }

.door-gallery { background: var(--cream-100); }
.door-gallery__grid { display: grid; grid-template-columns: repeat(12, 1fr); grid-auto-rows: 280px; grid-auto-flow: dense; gap: 1rem; }
.door-gallery__item { position: relative; grid-column: span 4; margin: 0; overflow: hidden; background: var(--cream-200); }
.door-gallery__item--wide { grid-column: span 8; }
.door-gallery__item--hero { grid-column: span 4; grid-row: span 2; }
.door-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s ease; }
.door-gallery__item--wide img { object-position: center 45%; }
.door-gallery__item:hover img { transform: scale(1.025); }
.door-gallery__item::after { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10, 27, 21, .8), transparent 50%); content: ""; }
.door-gallery__item figcaption { position: absolute; right: 1.25rem; bottom: 1rem; left: 1.25rem; z-index: 1; display: grid; color: var(--white); }
.door-gallery__item figcaption strong { font-family: var(--serif); font-size: 1.2rem; font-weight: 400; }
.door-gallery__item figcaption span { color: rgba(255, 255, 255, .68); font-size: .74rem; }

.door-quote { background: var(--cream-50); }
.quote-card--door { width: min(100%, 850px); }
.door-style-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; }
.door-style-card { position: relative; overflow: hidden; border: 1px solid var(--line); background: var(--cream-50); cursor: pointer; }
.door-style-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.door-sprite { display: block; width: 100%; aspect-ratio: 1 / .84; background: url("../images/door-style-sheet.png") no-repeat; background-size: 400% 200%; }
.sprite-1 { background-position: 0% 0%; }
.sprite-2 { background-position: 33.333% 0%; }
.sprite-3 { background-position: 66.666% 0%; }
.sprite-4 { background-position: 100% 0%; }
.sprite-5 { background-position: 0% 100%; }
.sprite-6 { background-position: 33.333% 100%; }
.sprite-7 { background-position: 66.666% 100%; }
.sprite-8 { background-position: 100% 100%; }
.door-style-copy { display: flex; min-height: 82px; padding: .85rem 1rem 1rem; flex-direction: column; gap: .2rem; border-top: 1px solid var(--line); background: var(--white); }
.door-style-copy strong { color: var(--forest-900); font-family: var(--serif); font-size: 1rem; font-weight: 400; line-height: 1.25; }
.door-style-copy small { color: var(--muted); font-size: .7rem; line-height: 1.35; }
.door-style-card:hover { border-color: var(--fir-500); }
.door-style-card:has(input:checked) { border-color: var(--fir-600); box-shadow: inset 0 0 0 2px var(--fir-600); }
.door-style-card:has(input:focus-visible) { outline: 3px solid rgba(187, 117, 66, .24); outline-offset: 2px; }
.door-style-badge { position: absolute; top: .6rem; left: .6rem; padding: .27rem .48rem; color: var(--white); background: var(--fir-600); font-size: .58rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.door-style-card--custom { display: flex; min-height: 250px; flex-direction: column; justify-content: flex-end; }
.door-custom-icon { display: grid; flex: 1; place-items: center; color: var(--fir-600); font-family: var(--serif); font-size: 4rem; }

.configuration-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.configuration-grid label { position: relative; cursor: pointer; }
.configuration-grid input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.configuration-grid label > span { display: inline-flex; min-height: 44px; align-items: center; padding: .6rem .85rem; border: 1px solid #b9beb9; background: var(--cream-50); color: var(--forest-900); font-size: .78rem; font-weight: 700; }
.configuration-grid label:hover > span { border-color: var(--fir-500); }
.configuration-grid input:checked + span { border-color: var(--fir-600); color: var(--white); background: var(--fir-600); }
.configuration-grid input:focus-visible + span { outline: 3px solid rgba(187, 117, 66, .24); outline-offset: 2px; }

.door-faq { border-top: 1px solid var(--line); background: var(--cream-100); }
.door-faq__grid { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(3rem, 7vw, 7rem); }

@media (max-width: 1040px) {
  .door-hero__grid { grid-template-columns: 1fr; }
  .door-hero__copy { max-width: 800px; }
  .door-hero__media { width: min(100%, 760px); min-height: 650px; margin-inline: auto; }
  .door-craft__grid { grid-template-columns: 1fr; }
  .door-craft__copy { max-width: 720px; }
}

@media (max-width: 760px) {
  .door-hero__media { min-height: 530px; }
  .door-hero__main-image { right: 0; width: 63%; height: 87%; }
  .door-hero__detail-image { width: 42%; height: 55%; }
  .door-hero__note { width: 52%; font-size: .7rem; }
  .door-solution-grid { grid-template-columns: 1fr; }
  .door-solution--offset { margin-top: 0; }
  .door-solution { display: grid; grid-template-columns: minmax(145px, .75fr) minmax(0, 1.25fr); }
  .door-solution > img { height: 100%; min-height: 330px; }
  .door-solution > div { min-height: 0; padding: 1.5rem; }
  .door-craft__details { grid-template-columns: 1fr 1fr; }
  .door-gallery__grid { grid-auto-rows: 300px; }
  .door-gallery__item, .door-gallery__item--wide { grid-column: span 12; }
  .door-gallery__item--hero { grid-row: span 2; }
  .door-faq__grid { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .door-hero__media { min-height: 440px; }
  .door-solution { grid-template-columns: 1fr; }
  .door-solution > img { height: 330px; min-height: 0; }
  .door-craft__details { grid-template-columns: 1fr; }
  .door-craft__details article { min-height: 0; }
  .door-style-grid { grid-template-columns: 1fr 1fr; }
  .door-style-copy { min-height: 76px; padding-inline: .7rem; }
  .door-style-copy strong { font-size: .86rem; }
  .door-style-card--custom { min-height: 210px; }
}