.color-selection-page { max-width: 1440px; margin: 0 auto; }
.color-selection-intro { max-width: 900px; margin: 0 auto 28px; text-align: center; }
.color-selection-eyebrow { color: #4b685b; font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; margin: 0 0 10px; }
.color-selection-intro h1 { color: #17241d; font-size: clamp(30px, 4vw, 52px); font-weight: 700; line-height: 1.12; margin: 0 0 16px; }
.color-selection-intro > p:last-child { color: #526058; font-size: clamp(15px, 1.5vw, 18px); line-height: 1.65; margin: 0; }
.color-configurator-shell { overflow: hidden; border-radius: 18px; background: #0b0e13; box-shadow: 0 18px 50px rgba(20, 30, 25, .16); }
.color-configurator-shell iframe { display: block; width: 100%; height: min(860px, 86vh); min-height: 600px; border: 0; background: #0b0e13; }
.color-configurator-shell [hidden] { display: none !important; }
.color-configurator-start { display: grid; justify-items: center; align-content: center; gap: 18px; min-height: 350px; padding: 36px 24px; background: #edf3eb; color: #193c2c; text-align: center; }
.color-configurator-start h2 { font-size: clamp(24px, 3vw, 36px); font-weight: 700; line-height: 1.2; }
.color-configurator-start p { max-width: 480px; color: #526058; line-height: 1.6; }
.color-configurator-start button { min-height: 48px; padding: 14px 24px; border-radius: 12px; background: #193c2c; color: white; font-weight: 700; }
.color-configurator-start button:focus-visible { outline: 3px solid #4b685b; outline-offset: 4px; }
.color-request { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(24px, 5vw, 80px); margin-top: 48px; padding: clamp(24px, 4vw, 52px); scroll-margin-top: 88px; border: 1px solid #e6eae7; border-radius: 20px; background: #fff; box-shadow: 0 10px 32px rgba(30, 48, 37, .06); }
.color-request h2 { color: #17241d; font-size: clamp(26px, 3vw, 38px); font-weight: 700; line-height: 1.2; margin: 0 0 18px; }
.color-request__copy > p:not(.color-selection-eyebrow) { color: #58655c; font-size: 16px; line-height: 1.65; }
.color-request__selection { color: #214d39; background: #f1f6f2; border-left: 3px solid #2e6e4c; border-radius: 8px; line-height: 1.5; margin-top: 28px; padding: 14px 16px; }
.color-request__fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.color-request__wide { grid-column: 1 / -1; }
.color-request__form label:not(.color-request__consent) { display: block; color: #31443a; font-size: 13px; font-weight: 700; margin-bottom: 8px; }
.color-request__form label span[aria-hidden] { color: #d72e48; }
.color-request__form input:not([type=hidden]):not([type=checkbox]), .color-request__form textarea { display: block; width: 100%; border: 1px solid #d7dfd9; border-radius: 10px; background: #fff; color: #15291e; font: inherit; font-size: 15px; outline: none; padding: 12px 14px; transition: border-color .2s, box-shadow .2s; }
.color-request__form input:focus, .color-request__form textarea:focus { border-color: #286c48; box-shadow: 0 0 0 3px rgba(40, 108, 72, .13); }
.color-request__form textarea { resize: vertical; }
.color-request__consent { display: flex; align-items: flex-start; gap: 10px; color: #5b685e; font-size: 13px; line-height: 1.45; margin: 18px 0; }
.color-request__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: #286c48; }
.color-request__consent a { color: #286c48; text-decoration: underline; }
.color-request__submit { display: block; width: 100%; min-height: 48px; border: 0; border-radius: 10px; background: #1a3628; color: #fff; cursor: pointer; font-size: 15px; font-weight: 700; transition: background .2s; }
.color-request__submit:hover { background: #28543e; }
.color-request__error { color: #b3263e; font-size: 13px; margin: 6px 0 0; }
.color-request__hint { color: #68766c; font-size: 13px; margin: 6px 0 0; }
.color-request__success { color: #205536; background: #eaf6ed; border-radius: 8px; font-size: 14px; margin: 0 0 16px; padding: 12px 14px; }
@media (max-width: 900px) {
    .color-request { grid-template-columns: 1fr; margin-top: 32px; }
    .color-configurator-shell iframe { height: 780px; min-height: 0; }
}
@media (max-width: 600px) {
    .color-selection-intro { text-align: left; margin-bottom: 22px; }
    .color-configurator-shell { border-radius: 12px; }
    .color-request { padding: 22px 18px; }
    .color-request__fields { grid-template-columns: 1fr; }
    .color-request__wide { grid-column: auto; }
}