.pvc-door-hero { display: grid; grid-template-columns: minmax(0, .9fr) minmax(480px, 1.1fr); min-height: 700px; height: 80svh; max-height: 880px; overflow: hidden; color: #fff; background: #171817; border-bottom: 8px solid var(--yellow); }
.pvc-door-hero-copy { display: flex; flex-direction: column; justify-content: flex-end; padding: 150px 7vw clamp(58px, 8vh, 92px) max(28px, calc((100vw - 1280px) / 2)); }
.pvc-door-hero-copy .eyebrow { color: var(--yellow); }
.pvc-door-hero-copy h1 { max-width: 680px; margin: 18px 0 28px; font: 800 clamp(3.8rem, 5.6vw, 6.7rem)/.88 "Arial Narrow", "Aptos Narrow", Arial, sans-serif; letter-spacing: -.06em; text-transform: uppercase; }
.pvc-door-hero-copy > p:not(.eyebrow) { max-width: 560px; color: #eef0ed; font-size: 1.08rem; line-height: 1.65; }
.pvc-door-hero-copy > div { display: flex; align-items: center; gap: 26px; margin-top: 32px; }
.pvc-door-hero figure { margin: 0; overflow: hidden; }
.pvc-door-hero figure img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 50%; }

.door-jump { position: relative; z-index: 3; display: grid; grid-template-columns: repeat(5, 1fr); width: min(1100px, calc(100% - 56px)); margin: -34px auto 0; overflow: hidden; background: #fff; border-radius: 10px; box-shadow: 0 20px 55px rgba(0, 0, 0, .12); }
.door-jump a { padding: 22px 14px; border-right: 1px solid #e7e4dd; font-size: .72rem; font-weight: 850; letter-spacing: .04em; text-align: center; text-transform: uppercase; }
.door-jump a:last-child { border: 0; }
.door-jump a:hover { color: #fff; background: #171817; }

.door-intro { display: grid; grid-template-columns: 1.05fr .95fr; gap: 8vw; padding-top: 120px; }
.door-intro h2, .door-systems h2, .door-security h2, .door-comparison h2, .door-woodlook h2, .door-design h2, .door-brochures h2, .door-project h2 { margin: 18px 0 30px; font-size: clamp(2.7rem, 4.4vw, 4.8rem); line-height: .94; }
.door-intro > div:last-child { padding-top: 36px; }
.door-intro p, .door-systems p, .door-comparison p, .door-woodlook p, .door-brochures p, .door-project p { color: var(--muted); font-size: 1rem; line-height: 1.75; }

.door-systems { display: grid; grid-template-columns: 1fr .82fr; gap: 7vw; align-items: center; }
.door-systems-copy ul, .door-woodlook ul { margin: 34px 0 0; padding: 0; border-top: 1px solid var(--line); list-style: none; }
.door-systems-copy li, .door-woodlook li { position: relative; padding: 14px 0 14px 26px; border-bottom: 1px solid var(--line); font-size: .9rem; font-weight: 700; }
.door-systems-copy li::before, .door-woodlook li::before { position: absolute; top: 20px; left: 0; width: 8px; height: 8px; background: var(--yellow); content: ""; }
.door-systems figure, .door-woodlook figure { margin: 0; overflow: hidden; background: #171817; border-radius: 14px; }
.door-systems figure img { display: block; width: 100%; height: 600px; object-fit: cover; }
.door-systems figcaption, .door-woodlook figcaption { padding: 17px 22px; color: #d6d7d4; font-size: .78rem; line-height: 1.55; }

.door-security { padding: 110px 0; color: #fff; background: #171817; }
.door-security-intro { display: grid; grid-template-columns: .82fr 1.18fr; gap: 7vw; align-items: end; padding-top: 0; padding-bottom: 48px; }
.door-security-intro header { padding-bottom: 18px; }
.door-security-intro .eyebrow { color: var(--yellow); }
.door-security-intro header > p:last-child { max-width: 610px; color: #babdb8; font-size: 1rem; line-height: 1.75; }
.door-security-photo { margin: 0; overflow: hidden; background: #252625; border-radius: 14px; }
.door-security-photo img { display: block; width: 100%; height: 430px; object-fit: cover; object-position: center; }
.door-security-photo figcaption { padding: 18px 22px; color: #c9cbc7; font-size: .78rem; line-height: 1.55; }
.door-security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; padding-top: 0; padding-bottom: 0; background: #40413f; }
.door-security-grid article { min-height: 250px; padding: 32px 28px; background: #1d1e1d; }
.door-security-grid span, .door-comparison-grid span { color: var(--yellow); font-size: .72rem; font-weight: 900; }
.door-security-grid h3, .door-comparison-grid h3 { margin: 30px 0 18px; font: 800 1.8rem/.98 "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }
.door-security-grid p { color: #bfc2bd; font-size: .9rem; line-height: 1.65; }
.door-security-note { margin-top: 28px; padding-top: 0; padding-bottom: 0; padding-left: 18px !important; color: #d8d9d6; font-size: .82rem; line-height: 1.65; border-left: 3px solid var(--yellow); }

.door-comparison > header { display: grid; grid-template-columns: 1.15fr .7fr; gap: 7vw; align-items: end; margin-bottom: 42px; }
.door-comparison > header > p { margin-bottom: 28px; }
.door-comparison-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door-comparison-grid article { overflow: hidden; background: #f3f2ee; border-top: 4px solid #171817; border-radius: 0 0 12px 12px; }
.door-comparison-grid article.featured { background: #fff; border-color: var(--yellow); }
.door-comparison-grid figure { display: grid; height: 570px; margin: 0; padding: 22px 22px 0; place-items: end center; overflow: hidden; background: linear-gradient(180deg, #f7f7f5, #ecece9); }
.door-comparison-grid figure img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
.door-comparison-grid article > div { padding: 34px 38px 38px; }
.door-comparison-grid ul { padding-left: 18px; font-size: .9rem; line-height: 1.75; }

.door-woodlook { display: grid; grid-template-columns: 1fr 1fr; gap: 7vw; align-items: center; background: #f4f3ef; }
.door-woodlook figure img { display: block; width: 100%; height: 520px; object-fit: cover; }
.door-source-note { margin-top: 24px; padding: 18px 20px; background: #fff; border-left: 4px solid var(--yellow); font-size: .82rem !important; }

.door-design header, .door-brochures header { max-width: 930px; margin-bottom: 50px; }
.door-design-grid { display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 12px; }
.door-design-grid a { display: block; }
.door-design-grid figure { margin: 0; overflow: hidden; background: #171817; border-radius: 12px; transition: transform .25s ease, box-shadow .25s ease; }
.door-design-grid a:hover figure { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 0, 0, .14); }
.door-design-grid img { display: block; width: 100%; height: 390px; object-fit: cover; }
.door-design-grid a:nth-child(2) img, .door-design-grid a:nth-child(3) img { object-position: center; }
.door-design-grid figcaption { display: grid; gap: 8px; padding: 22px; color: #fff; }
.door-design-grid figcaption b { font: 800 1.45rem "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }
.door-design-grid figcaption span { color: #bfc1bd; font-size: .78rem; line-height: 1.55; }

.door-brochures { background: #f4f3ef; }
.door-brochure-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door-brochure-grid a { display: grid; grid-template-columns: minmax(190px, .72fr) 1fr; min-height: 470px; overflow: hidden; background: #fff; border-radius: 12px; transition: transform .2s, box-shadow .2s; }
.door-brochure-grid a:hover { transform: translateY(-4px); box-shadow: 0 20px 44px rgba(0, 0, 0, .11); }
.door-brochure-grid figure { display: grid; height: 100%; margin: 0; padding: 28px; place-items: center; background: #202120; }
.door-brochure-grid img { display: block; width: 100%; max-width: 300px; max-height: 410px; object-fit: contain; box-shadow: 0 14px 30px rgba(0, 0, 0, .25); }
.door-brochure-grid a > div { display: flex; flex-direction: column; padding: 36px 34px; }
.door-brochure-grid span { color: #8e6a0d; font-size: .7rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.door-brochure-grid h3 { margin: 24px 0 18px; font: 800 2.3rem/.98 "Arial Narrow", Arial, sans-serif; text-transform: uppercase; }
.door-brochure-grid b { display: flex; justify-content: space-between; margin-top: auto; padding-top: 18px; border-top: 1px solid #d8d6d0; font-size: .8rem; text-transform: uppercase; }
.door-brochure-grid i { color: var(--yellow); font-size: 1.2rem; font-style: normal; }

.door-project { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.door-project > div { padding: 42px; color: #fff; background: #171817; border-radius: 10px; }
.door-project > div:last-child { color: #171817; background: var(--yellow); }
.door-project h2 { font-size: 3.2rem; }
.door-project p { color: #c3c5c1; }
.door-project > div:last-child p { color: #41340f; }
.door-project > div:last-child .eyebrow { color: #5f4605; }

@media (max-width: 980px) {
  .door-jump { grid-template-columns: repeat(3, 1fr); }
  .pvc-door-hero { grid-template-columns: .85fr 1.15fr; }
  .pvc-door-hero-copy { padding-left: 5vw; }
  .door-intro, .door-systems, .door-security-intro, .door-woodlook { grid-template-columns: 1fr; }
  .door-intro > div:last-child { padding-top: 0; }
  .door-systems figure, .door-woodlook figure { max-width: 720px; }
  .door-security-photo { max-width: 720px; }
  .door-security-photo img { height: 420px; }
  .door-security-grid { grid-template-columns: 1fr 1fr; }
  .door-design-grid { grid-template-columns: 1fr 1fr; }
  .door-design-grid a:first-child { grid-column: 1 / -1; }
}

@media (max-width: 680px) {
  .pvc-door-hero { position: relative; display: block; min-height: 680px; height: 82svh; }
  .pvc-door-hero::after { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.15), rgba(0,0,0,.12) 35%, rgba(0,0,0,.92) 88%); content: ""; }
  .pvc-door-hero figure { position: absolute; inset: 0; }
  .pvc-door-hero figure img { object-position: center 44%; }
  .pvc-door-hero-copy { position: absolute; z-index: 2; right: 20px; bottom: 40px; left: 20px; padding: 0; }
  .pvc-door-hero-copy h1 { font-size: 3.25rem; }
  .pvc-door-hero-copy > p:not(.eyebrow) { font-size: .93rem; }
  .pvc-door-hero-copy > div { gap: 16px; flex-wrap: wrap; }
  .door-jump { grid-template-columns: 1fr 1fr; width: calc(100% - 24px); margin-top: -20px; }
  .door-jump a { padding: 17px 10px; font-size: .68rem; }
  .door-jump a:last-child { grid-column: 1 / -1; }
  .door-intro { padding-top: 82px; }
  .door-intro h2, .door-systems h2, .door-security h2, .door-comparison h2, .door-woodlook h2, .door-design h2, .door-brochures h2, .door-project h2 { font-size: 2.65rem; }
  .door-systems figure img { height: 430px; }
  .door-security { padding: 78px 0; }
  .door-security-intro { gap: 38px; }
  .door-security-grid, .door-comparison-grid, .door-design-grid, .door-brochure-grid, .door-project { grid-template-columns: 1fr; }
  .door-security-grid article { min-height: 0; }
  .door-security-photo img { height: 300px; }
  .door-security-note { margin-right: 0; margin-left: 0; }
  .door-comparison > header { grid-template-columns: 1fr; gap: 0; }
  .door-comparison > header > p { margin-bottom: 0; }
  .door-comparison-grid figure { height: 480px; padding: 16px 16px 0; }
  .door-comparison-grid article > div { padding: 28px 24px 30px; }
  .door-woodlook figure img { height: 340px; }
  .door-design-grid a:first-child { grid-column: auto; }
  .door-design-grid img { height: 300px; }
  .door-brochure-grid a { grid-template-columns: .8fr 1fr; min-height: 340px; }
  .door-brochure-grid figure { padding: 18px; }
  .door-brochure-grid img { max-height: 300px; }
  .door-brochure-grid a > div { padding: 26px 22px; }
  .door-brochure-grid h3 { font-size: 2rem; }
  .door-project > div { padding: 32px 25px; }
}

@media (max-width: 480px) {
  .door-security-grid { grid-template-columns: 1fr; }
  .door-brochure-grid a { grid-template-columns: 1fr; }
  .door-brochure-grid figure { height: 390px; }
  .door-brochure-grid img { max-height: 340px; }
}

@media (prefers-reduced-motion: reduce) {
  .door-design-grid figure, .door-brochure-grid a { transition: none; }
}