:root {
  color-scheme: light;
  --navy: #122539;
  --navy-2: #1b344b;
  --ink: #17212a;
  --muted: #66717a;
  --paper: #f1f0eb;
  --white: #fff;
  --amber: #f1a71c;
  --amber-deep: #d88900;
  --sage: #778475;
  --rule: #d6d8d6;
  --sans: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; overflow-x: hidden; color: var(--ink); background: var(--paper); font-family: Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.55; }
button, input, select { font: inherit; }
img { display: block; max-width: 100%; }
a { color: inherit; }
button, input, select { border-radius: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }

.skip-link { position: fixed; top: 8px; left: 8px; z-index: 100; transform: translateY(-150%); padding: 10px 14px; color: white; background: #000; }
.skip-link:focus { transform: translateY(0); }
.shell { width: min(1240px, calc(100% - 56px)); margin-inline: auto; }
.concept-bar { height: 30px; display: flex; align-items: center; justify-content: center; gap: 24px; color: rgba(255, 255, 255, .6); background: #071521; font-size: 10px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.concept-bar a { color: #f5b437; text-underline-offset: 3px; }

.site-header { position: absolute; top: 30px; left: 0; z-index: 20; width: 100%; height: 86px; display: flex; align-items: center; padding: 0 max(32px, calc((100% - 1360px) / 2)); color: white; border-bottom: 1px solid rgba(255, 255, 255, .19); }
.brand { display: inline-grid; grid-template-columns: 34px auto; grid-template-rows: auto auto; column-gap: 11px; color: inherit; text-decoration: none; }
.brand-symbol { position: relative; grid-row: span 2; width: 34px; height: 42px; display: block; align-self: center; border: 2px solid var(--amber); transform: skewY(-8deg); }
.brand-symbol::before { content: ""; position: absolute; inset: 6px; border: 2px solid currentColor; border-right: 0; }
.brand-symbol i { position: absolute; top: 50%; left: 9px; width: 21px; height: 2px; background: var(--amber); transform: rotate(-37deg); transform-origin: left; }
.brand-word { align-self: end; font-size: 21px; font-weight: 850; letter-spacing: .18em; line-height: 1; }
.brand small { align-self: start; margin-top: 5px; color: rgba(255, 255, 255, .58); font-size: 8px; font-weight: 800; letter-spacing: .23em; text-transform: uppercase; }
.site-nav { display: flex; align-items: center; gap: 30px; margin-left: auto; }
.site-nav > a { font-size: 12px; font-weight: 750; text-decoration: none; }
.site-nav > a:not(.button) { position: relative; }
.site-nav > a:not(.button)::after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 2px; background: var(--amber); transform: scaleX(0); transform-origin: right; transition: transform 160ms ease; }
.site-nav > a:not(.button):hover::after, .site-nav > a:not(.button):focus-visible::after { transform: scaleX(1); transform-origin: left; }
.menu-toggle { display: none; width: 48px; height: 48px; margin-left: auto; border: 0; color: white; background: transparent; }
.menu-toggle span { width: 22px; height: 2px; display: block; margin: 5px auto; background: currentColor; }
.menu-toggle b { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

.button { min-height: 54px; display: inline-flex; align-items: center; justify-content: center; gap: 16px; padding: 0 24px; border: 1px solid transparent; color: var(--navy); background: var(--amber); font-size: 12px; font-weight: 850; letter-spacing: .045em; text-decoration: none; transition: transform 150ms ease, background 150ms ease; }
.button:hover { transform: translateY(-2px); background: #ffb628; }
.button:focus-visible, .line-link:focus-visible, .site-nav a:focus-visible, .style-filters button:focus-visible { outline: 3px solid #ffc85b; outline-offset: 4px; }
.button-small { min-height: 42px; padding-inline: 17px; }
.button-navy { color: white; background: var(--navy); }
.button-navy:hover { background: #234661; }
.button-full { width: 100%; }
.line-link { display: inline-flex; align-items: center; gap: 14px; padding-bottom: 5px; color: white; border-bottom: 1px solid rgba(255, 255, 255, .45); font-size: 12px; font-weight: 800; text-decoration: none; }
.line-link span { color: var(--amber); font-size: 17px; }
.dark-link { color: var(--navy); border-color: rgba(18, 37, 57, .3); }
.eyebrow { margin: 0 0 15px; color: var(--amber); font-size: 10px; font-weight: 900; letter-spacing: .2em; text-transform: uppercase; }
.eyebrow.dark { color: #a56200; }

.hero { position: relative; min-height: 820px; display: flex; align-items: center; overflow: hidden; color: white; background: var(--navy); }
.hero-image, .hero-shade { position: absolute; inset: 0; }
.hero-image { background: url("../assets/keavalo-doors.jpg") 58% center / cover no-repeat; }
.hero-shade { background: linear-gradient(90deg, rgba(13, 30, 47, .97) 0%, rgba(13, 30, 47, .87) 35%, rgba(13, 30, 47, .07) 70%), linear-gradient(0deg, rgba(9, 24, 37, .6) 0%, transparent 30%); }
.hero-content { position: relative; z-index: 2; padding-top: 38px; padding-bottom: 108px; }
.hero h1 { max-width: 790px; margin: 0; font-size: clamp(54px, 6.7vw, 98px); font-weight: 780; line-height: .94; letter-spacing: -.06em; text-wrap: balance; }
.hero-copy { max-width: 570px; margin: 28px 0 34px; color: rgba(255, 255, 255, .72); font-size: 18px; line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 30px; }
.hero-proof { position: absolute; right: 0; bottom: 0; left: 0; z-index: 3; background: rgba(8, 25, 39, .88); backdrop-filter: blur(12px); }
.proof-grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.proof-grid > div { min-height: 106px; display: grid; grid-template-columns: 35px 1fr; align-content: center; column-gap: 13px; padding: 18px 23px; border-left: 1px solid rgba(255, 255, 255, .14); }
.proof-grid > div:last-child { border-right: 1px solid rgba(255, 255, 255, .14); }
.proof-icon { grid-row: span 2; align-self: center; color: var(--amber); font-size: 26px; }
.proof-grid strong { color: white; font-size: 12px; }
.proof-grid small { margin-top: 2px; color: rgba(255, 255, 255, .52); font-size: 10px; }

.buyer-strip { min-height: 70px; display: flex; align-items: center; background: var(--amber); }
.buyer-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; color: rgba(18, 37, 57, .66); font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.buyer-row strong { color: var(--navy); font-size: 11px; }
.section { padding: 116px 0; }
.section h2 { margin: 0; font-size: clamp(43px, 5vw, 67px); font-weight: 780; line-height: 1.02; letter-spacing: -.05em; }
.section-head { display: grid; grid-template-columns: 1.4fr .6fr; gap: 60px; align-items: end; margin-bottom: 58px; }
.section-head h2 { max-width: 780px; }
.style-filters { display: flex; justify-content: flex-end; gap: 7px; }
.style-filters button { min-height: 40px; padding: 0 15px; border: 1px solid #bfc4c4; color: #5c686f; background: transparent; font-size: 10px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.style-filters button:hover, .style-filters button.is-active { color: white; border-color: var(--navy); background: var(--navy); }

.styles { background: var(--paper); }
.door-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #ccd0cf; border: 1px solid #ccd0cf; }
.door-card { min-height: 490px; display: grid; grid-template-rows: 1fr auto; padding: 34px; background: #fafafa; }
.door-card > div:last-child { position: relative; padding-top: 23px; border-top: 1px solid #d7d9d8; }
.door-card span { position: absolute; right: 0; color: #9aa1a3; font-size: 10px; font-weight: 800; }
.door-card h3 { margin: 0 0 2px; font-size: 21px; letter-spacing: -.02em; }
.door-card p { margin: 0; color: #798286; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; }
.door-sample { position: relative; width: 166px; height: 248px; align-self: center; justify-self: center; border: 4px solid rgba(44, 49, 48, .18); background: #efeadf; box-shadow: 15px 20px 34px rgba(29, 35, 37, .17), inset -7px -7px 12px rgba(0, 0, 0, .08), inset 5px 5px 10px rgba(255, 255, 255, .22); transition: transform 220ms ease, box-shadow 220ms ease; }
.door-card:hover .door-sample { transform: translateY(-8px) rotate(.8deg); box-shadow: 19px 28px 40px rgba(29, 35, 37, .21), inset -7px -7px 12px rgba(0, 0, 0, .08); }
.door-sample i { position: absolute; inset: 17px; display: block; border: 3px solid rgba(39, 44, 43, .24); box-shadow: inset 3px 3px 6px rgba(255, 255, 255, .25), 3px 3px 5px rgba(0, 0, 0, .05); }
.profile-slim i { inset: 11px; border-width: 2px; }
.profile-shaker i { inset: 22px; border-width: 8px; }
.profile-bevel i { inset: 18px; border: 8px double rgba(20, 29, 36, .35); }
.profile-slab i { display: none; }
.profile-raised i { inset: 21px; border: 9px double rgba(45, 42, 39, .3); }
.profile-raised i::after { content: ""; position: absolute; inset: 13px; border: 2px solid rgba(45, 42, 39, .25); }
.profile-arched i { inset: 19px; border-width: 6px; border-radius: 46% 46% 3px 3px / 22% 22% 3px 3px; }
.profile-glass i { inset: 17px; border-width: 10px; background: linear-gradient(135deg, rgba(255, 255, 255, .24), rgba(102, 146, 166, .26)); }
.color-bone { background: #efe9db; }
.color-sage { background: #8a9686; }
.color-navy { background: #233b50; }
.color-taupe { background: #a59d91; }
.color-white { background: #f3f2ec; }
.color-clay { background: #a8755c; }
.color-oak { background: repeating-linear-gradient(87deg, #b38c5f 0 2px, #c9a476 2px 7px, #ab8155 7px 8px); }
.color-green { background: #4e6658; }
.color-black { background: #202a31; }
.custom-style { min-height: 180px; display: grid; grid-template-columns: 220px 1fr auto; align-items: center; gap: 36px; margin-top: 28px; padding: 30px 38px; color: white; background: var(--navy); }
.custom-style > div:first-child { position: relative; height: 118px; }
.mini-door { position: absolute; left: 20px; bottom: 0; width: 70px; height: 110px; border: 5px solid #d6d2c8; background: #81907f; box-shadow: inset 0 0 0 9px #677664, 9px 12px 18px rgba(0, 0, 0, .25); transform: rotate(-7deg); }
.mini-door.two { left: 88px; height: 100px; background: #dfd6c7; box-shadow: inset 0 0 0 9px #c8beaf, 9px 12px 18px rgba(0, 0, 0, .25); transform: rotate(6deg); }
.custom-style .eyebrow { margin-bottom: 8px; color: var(--amber); }
.custom-style h3 { margin: 0; font-size: 25px; }
.custom-style p:last-child { margin: 4px 0 0; color: rgba(255, 255, 255, .55); font-size: 13px; }
.custom-style .button-navy { border-color: rgba(255, 255, 255, .35); }

.why { color: white; background: var(--navy); }
.why-layout { display: grid; grid-template-columns: .92fr 1.08fr; gap: 100px; align-items: center; }
.why-copy > p:not(.eyebrow) { max-width: 620px; margin: 26px 0; color: rgba(255, 255, 255, .62); font-size: 17px; line-height: 1.7; }
.why-copy ul { margin: 36px 0 0; padding: 0; border-top: 1px solid rgba(255, 255, 255, .18); list-style: none; }
.why-copy li { display: grid; grid-template-columns: 44px 1fr; gap: 14px; padding: 20px 0; border-bottom: 1px solid rgba(255, 255, 255, .18); }
.why-copy li > span { color: var(--amber); font-size: 10px; font-weight: 900; }
.why-copy li div { display: flex; flex-direction: column; }
.why-copy li strong { font-size: 14px; }
.why-copy li small { margin-top: 4px; color: rgba(255, 255, 255, .52); font-size: 12px; }
.order-board { padding: 32px; color: var(--ink); background: #f8faf8; box-shadow: 0 30px 80px rgba(0, 0, 0, .27); }
.board-head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 23px; border-bottom: 1px solid #d9dddc; }
.board-head > div { display: flex; align-items: baseline; gap: 10px; }
.board-head small { color: #778186; font-size: 10px; font-weight: 800; text-transform: uppercase; }
.board-head strong { font-size: 17px; }
.board-head > span { padding: 5px 9px; color: #31633d; background: #e0f0e2; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.board-product { display: grid; grid-template-columns: 80px 1fr; gap: 20px; align-items: center; padding: 28px 0; border-bottom: 1px solid #d9dddc; }
.mini-product { position: relative; width: 68px; height: 98px; background: #ece6da; border: 3px solid #d4cdc0; box-shadow: 7px 9px 14px rgba(0, 0, 0, .13); }
.mini-product i { position: absolute; inset: 9px; border: 3px solid #c3bbad; }
.board-product small, .board-product strong, .board-product p { display: block; }
.board-product small { color: #8b682d; font-size: 9px; font-weight: 850; letter-spacing: .07em; text-transform: uppercase; }
.board-product strong { margin-top: 3px; font-size: 16px; }
.board-product p { margin: 5px 0 0; color: #7a8488; font-size: 11px; }
.board-progress { padding: 8px 0 18px; }
.board-progress span { position: relative; min-height: 54px; display: flex; align-items: center; gap: 14px; color: #798287; border-left: 1px solid #c9cecd; margin-left: 15px; padding-left: 29px; font-size: 12px; font-weight: 700; }
.board-progress span:last-child { border-left-color: transparent; }
.board-progress i { position: absolute; left: -14px; width: 27px; height: 27px; display: grid; place-items: center; border: 1px solid #bfc6c5; color: #87908f; background: #f8faf8; border-radius: 50%; font-size: 10px; font-style: normal; }
.board-progress .done { color: #335c3d; }
.board-progress .done i { color: white; border-color: #4f7c5a; background: #4f7c5a; }
.board-progress .current { color: var(--ink); }
.board-progress .current i { color: var(--navy); border-color: var(--amber); background: var(--amber); }
.board-note { display: grid; grid-template-columns: 1fr auto; padding: 18px; background: #e9ecea; }
.board-note span, .board-note small { color: #7b8589; font-size: 9px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; }
.board-note strong { grid-row: 2; }
.board-note small { grid-row: span 2; align-self: center; max-width: 120px; text-align: right; text-transform: none; letter-spacing: 0; font-weight: 500; }

.specs { background: #f8f7f2; }
.specs-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: 110px; align-items: center; }
.spec-visual { min-height: 560px; display: grid; place-items: center; overflow: hidden; background: #d9d6ce; }
.cut-door { position: relative; width: 280px; height: 390px; background: #e8e2d6; border: 25px solid #f0ece3; box-shadow: 25px 33px 50px rgba(30, 38, 43, .23), inset 0 0 0 2px #c1b9ab; transform: perspective(700px) rotateY(-17deg) rotateX(3deg); }
.cut-door i { position: absolute; inset: 18px; border: 4px solid #cdc5b8; box-shadow: inset 5px 5px 9px rgba(0, 0, 0, .05); }
.cut-door::before { content: ""; position: absolute; top: -25px; right: -27px; width: 13px; height: calc(100% + 50px); background: linear-gradient(90deg, #b69b77, #ded4c4); }
.cut-door::after { content: ""; position: absolute; right: -25px; bottom: -29px; width: calc(100% + 50px); height: 14px; background: #bda98b; transform: skewX(-45deg); transform-origin: top; }
.cut-door span { position: absolute; z-index: 2; padding: 7px 10px; color: white; background: var(--navy); font-size: 9px; font-weight: 850; letter-spacing: .05em; white-space: nowrap; transform: rotateY(17deg); }
.cut-door .top { top: -55px; left: 10px; }
.cut-door .side { top: 170px; right: -134px; }
.spec-copy > p:not(.eyebrow) { max-width: 600px; margin: 25px 0 34px; color: #647077; font-size: 17px; line-height: 1.7; }
.spec-grid { display: grid; grid-template-columns: 1fr 1fr; margin-bottom: 30px; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); }
.spec-grid div { min-height: 100px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.spec-grid strong { color: var(--navy); font-size: 25px; }
.spec-grid span { color: #737e83; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }

.process { background: white; }
.process-title { max-width: 750px; margin-bottom: 60px; }
.process-title > p:last-child { color: #6f7b81; font-size: 17px; }
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); margin: 0; padding: 0; border-top: 1px solid var(--rule); border-left: 1px solid var(--rule); list-style: none; }
.process-grid li { position: relative; min-height: 300px; padding: 34px; border-right: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.process-grid li > span { color: #a86a00; font-size: 10px; font-weight: 900; }
.process-grid h3 { margin: 110px 0 10px; font-size: 19px; }
.process-grid p { margin: 0; color: #768085; font-size: 13px; line-height: 1.65; }
.process-grid li:not(:last-child)::after { content: "→"; position: absolute; top: 34px; right: 30px; color: #b5bbba; font-size: 20px; }

.pricing { color: white; background: var(--navy); }
.pricing-layout { display: grid; grid-template-columns: .8fr 1.2fr; gap: 110px; align-items: center; }
.pricing-copy > p:not(.eyebrow) { max-width: 520px; color: rgba(255, 255, 255, .6); font-size: 17px; line-height: 1.7; }
.contact-line { display: flex; flex-direction: column; margin-top: 38px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, .17); }
.contact-line span { color: rgba(255, 255, 255, .48); font-size: 10px; font-weight: 850; letter-spacing: .1em; text-transform: uppercase; }
.contact-line a { margin-top: 3px; color: var(--amber); font-size: 25px; font-weight: 800; text-decoration: none; }
.pricing-card { padding: 44px; color: var(--ink); background: #fff; box-shadow: 0 28px 70px rgba(0, 0, 0, .24); }
.demo-label { display: inline-block; margin-bottom: 24px; padding: 5px 8px; color: #755014; background: #fff0cf; font-size: 9px; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; }
.pricing-card fieldset { margin: 0 0 25px; padding: 0; border: 0; }
.pricing-card legend { margin-bottom: 9px; font-size: 12px; font-weight: 850; }
.buyer-options { display: grid; grid-template-columns: repeat(3, 1fr); }
.buyer-options label { position: relative; }
.buyer-options input { position: absolute; opacity: 0; pointer-events: none; }
.buyer-options span { min-height: 48px; display: grid; place-items: center; border: 1px solid var(--rule); border-right: 0; color: #677278; font-size: 11px; font-weight: 750; cursor: pointer; }
.buyer-options label:last-child span { border-right: 1px solid var(--rule); }
.buyer-options input:checked + span { color: white; background: var(--navy); }
.buyer-options input:focus-visible + span { outline: 3px solid var(--amber); outline-offset: -3px; }
.field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 24px; }
.field-grid label { display: flex; flex-direction: column; }
.field-grid label > span { margin-bottom: 7px; font-size: 11px; font-weight: 850; }
.field-grid select, .field-grid input { width: 100%; height: 50px; padding: 0 13px; border: 1px solid #bbc1c1; color: #5f6a6f; background: white; font-size: 12px; }
.field-grid select:focus, .field-grid input:focus { outline: 3px solid rgba(241, 167, 28, .3); border-color: var(--amber-deep); }
.form-status { min-height: 20px; margin: 13px 0 0; color: #657076; font-size: 11px; line-height: 1.5; }

.footer { padding: 70px 0 24px; color: rgba(255, 255, 255, .56); background: #071521; }
.footer-row { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 80px; }
.footer-brand { color: white; }
.footer-row > div:first-child p { max-width: 310px; font-size: 12px; line-height: 1.65; }
.footer-row nav { display: grid; grid-template-columns: 1fr 1fr; align-content: start; gap: 12px 25px; }
.footer-row nav a { font-size: 12px; text-decoration: none; }
.footer-row nav a:hover { color: white; }
.footer-contact { display: flex; flex-direction: column; }
.footer-contact span { color: var(--amber); font-size: 9px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.footer-contact a { margin: 5px 0; color: white; font-size: 22px; font-weight: 800; text-decoration: none; }
.footer-contact small { font-size: 10px; }
.footer-base { display: flex; justify-content: space-between; margin-top: 58px; padding-top: 19px; border-top: 1px solid rgba(255, 255, 255, .11); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.footer-base a { color: var(--amber); }
.mobile-cta { display: none; }

@media (max-width: 1060px) {
  .site-header { padding-inline: 24px; }
  .site-nav { gap: 18px; }
  .site-nav > a { font-size: 11px; }
  .hero-shade { background: linear-gradient(90deg, rgba(13, 30, 47, .97) 0%, rgba(13, 30, 47, .86) 42%, rgba(13, 30, 47, .1) 78%), linear-gradient(0deg, rgba(9, 24, 37, .6), transparent 30%); }
  .proof-grid > div { grid-template-columns: 1fr; row-gap: 2px; }
  .proof-icon { grid-row: auto; font-size: 20px; }
  .why-layout, .pricing-layout { gap: 60px; }
  .specs-layout { gap: 70px; }
}

@media (max-width: 860px) {
  .shell { width: min(calc(100% - 38px), 720px); }
  .concept-bar { justify-content: space-between; padding-inline: 16px; }
  .site-header { height: 76px; }
  .menu-toggle { display: block; }
  .site-nav { position: absolute; top: 76px; right: 16px; left: 16px; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 18px; color: var(--ink); background: white; box-shadow: 0 20px 60px rgba(0, 0, 0, .24); }
  .site-nav.is-open { display: flex; }
  .site-nav > a { min-height: 46px; display: flex; align-items: center; padding-inline: 10px; border-bottom: 1px solid var(--rule); }
  .site-nav .button { margin-top: 10px; border-bottom: 0; }
  .hero { min-height: 770px; align-items: flex-end; }
  .hero-image { background-position: 59% center; }
  .hero-shade { background: linear-gradient(0deg, rgba(13, 30, 47, .98) 4%, rgba(13, 30, 47, .62) 65%, rgba(13, 30, 47, .2)); }
  .hero-content { padding-bottom: 202px; }
  .hero h1 { font-size: clamp(47px, 11.7vw, 75px); }
  .proof-grid { grid-template-columns: 1fr 1fr; }
  .proof-grid > div { min-height: 86px; padding: 13px 18px; }
  .buyer-row { flex-wrap: wrap; justify-content: center; padding: 17px 0; }
  .section { padding: 84px 0; }
  .section-head, .why-layout, .specs-layout, .pricing-layout { grid-template-columns: 1fr; gap: 48px; }
  .style-filters { justify-content: flex-start; }
  .door-grid { grid-template-columns: 1fr 1fr; }
  .door-card { min-height: 430px; }
  .door-sample { width: 143px; height: 216px; }
  .custom-style { grid-template-columns: 160px 1fr; }
  .custom-style .button { grid-column: 2; justify-self: start; }
  .why-copy { max-width: 660px; }
  .spec-visual { min-height: 500px; }
  .process-grid { grid-template-columns: 1fr 1fr; }
  .process-grid li { min-height: 250px; }
  .process-grid h3 { margin-top: 70px; }
  .pricing-copy { max-width: 650px; }
  .footer-row { grid-template-columns: 1fr 1fr; gap: 48px; }
  .footer-contact { grid-column: 2; }
}

@media (max-width: 540px) {
  body { padding-bottom: 62px; }
  .concept-bar { font-size: 8px; }
  .brand-word { font-size: 18px; }
  .brand-symbol { width: 29px; height: 37px; }
  .brand small { font-size: 7px; }
  .hero { min-height: 730px; }
  .hero-content { padding-bottom: 190px; }
  .hero h1 { font-size: 47px; }
  .hero h1, .hero-copy { max-width: calc(100vw - 38px); }
  .hero-copy { margin: 22px 0 27px; font-size: 16px; }
  .hero-actions { flex-direction: column; align-items: flex-start; gap: 20px; }
  .proof-grid strong { font-size: 10px; }
  .proof-grid small { font-size: 8px; }
  .buyer-row { gap: 10px 20px; }
  .buyer-row strong { width: 100%; text-align: center; }
  .section { padding: 68px 0; }
  .section h2 { font-size: 40px; }
  .section-head { margin-bottom: 36px; }
  .style-filters { width: 100%; }
  .style-filters button { flex: 1; padding-inline: 7px; }
  .door-grid { grid-template-columns: 1fr; }
  .door-card { min-height: 435px; }
  .custom-style { grid-template-columns: 1fr; padding: 28px; }
  .custom-style > div:first-child { display: none; }
  .custom-style .button { grid-column: 1; }
  .order-board { margin-inline: -7px; padding: 20px; }
  .board-product { grid-template-columns: 64px 1fr; }
  .mini-product { width: 55px; height: 82px; }
  .board-note small { display: none; }
  .spec-visual { min-height: 430px; }
  .cut-door { width: 210px; height: 310px; border-width: 20px; }
  .cut-door::before { top: -20px; right: -22px; height: calc(100% + 40px); }
  .cut-door::after { right: -20px; bottom: -24px; width: calc(100% + 40px); }
  .cut-door .side { right: -120px; }
  .spec-grid { grid-template-columns: 1fr; }
  .process-grid { grid-template-columns: 1fr; }
  .process-grid li { min-height: 215px; }
  .process-grid h3 { margin-top: 52px; }
  .pricing-card { margin-inline: -7px; padding: 26px 20px; }
  .buyer-options, .field-grid { grid-template-columns: 1fr; }
  .buyer-options span, .buyer-options label:last-child span { border: 1px solid var(--rule); border-bottom: 0; }
  .buyer-options label:last-child span { border-bottom: 1px solid var(--rule); }
  .footer-row { grid-template-columns: 1fr; }
  .footer-contact { grid-column: 1; }
  .footer-base { flex-direction: column; gap: 16px; }
  .mobile-cta { position: fixed; right: 0; bottom: 0; left: 0; z-index: 30; min-height: 62px; display: flex; align-items: center; justify-content: center; gap: 18px; color: var(--navy); background: var(--amber); box-shadow: 0 -8px 30px rgba(0, 0, 0, .18); font-size: 12px; font-weight: 900; text-decoration: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; }
}