.visualizer-hero { min-height: 760px; }
.visualizer-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(330px, .72fr);
  align-items: center;
  gap: 72px;
}
.concept-preview {
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 8px;
  background: rgba(8,8,8,.88);
  box-shadow: 0 26px 70px rgba(0,0,0,.42);
  backdrop-filter: blur(9px);
}
.concept-preview__eyebrow {
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.12);
  color: var(--blue-light);
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.concept-preview__image { padding: 16px; }
.concept-preview__image img { width: 100%; aspect-ratio: 1 / 1; border-radius: 5px; object-fit: cover; }
.concept-preview__details { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(255,255,255,.12); }
.concept-preview__details div { padding: 16px 12px; }
.concept-preview__details div + div { border-left: 1px solid rgba(255,255,255,.12); }
.concept-preview__details strong, .concept-preview__details span { display: block; }
.concept-preview__details strong { color: #fff; font-size: .74rem; line-height: 1.35; }
.concept-preview__details span { margin-top: 5px; color: rgba(255,255,255,.55); font-size: .64rem; line-height: 1.4; }

.intro-section { border-bottom: 1px solid var(--line); }
.visualizer-process { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 50px; }
.visualizer-process article { position: relative; padding: 32px 30px; border: 1px solid #e1e1e1; border-radius: 8px; background: #fff; }
.visualizer-process article::after { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--blue); }
.visualizer-process span { color: var(--blue-dark); font-family: "Barlow Condensed", sans-serif; font-size: 1.05rem; font-weight: 800; letter-spacing: .14em; }
.visualizer-process h3 { margin-top: 14px; }
.visualizer-process p { margin: 9px 0 0; font-size: .9rem; }

.visualizer-shell { padding: 100px 0 110px; background: #eceef0; }
.visualizer-shell__heading { display: flex; align-items: end; justify-content: space-between; gap: 40px; margin-bottom: 42px; }
.visualizer-shell__heading p { max-width: 430px; margin: 0; color: #5d6268; font-size: .9rem; text-align: right; }
.visualizer-layout { display: grid; grid-template-columns: 300px minmax(0, 1fr); align-items: start; gap: 26px; }

.wizard-sidebar { position: sticky; top: 118px; overflow: hidden; border-radius: 8px; background: var(--black); color: #fff; box-shadow: 0 16px 46px rgba(0,0,0,.16); }
.wizard-sidebar__title { padding: 22px 24px; border-bottom: 1px solid rgba(255,255,255,.12); color: var(--blue-light); font-family: "Barlow Condensed", sans-serif; font-size: 1.25rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.wizard-progress { margin: 0; padding: 16px 0; list-style: none; }
.wizard-progress li { position: relative; display: flex; align-items: center; gap: 13px; padding: 14px 23px; color: rgba(255,255,255,.46); }
.wizard-progress li::after { content: ""; position: absolute; top: 54px; bottom: -9px; left: 39px; width: 1px; background: rgba(255,255,255,.12); }
.wizard-progress li:last-child::after { display: none; }
.wizard-progress li > span { position: relative; z-index: 1; display: grid; flex: 0 0 32px; height: 32px; place-items: center; border: 1px solid rgba(255,255,255,.22); border-radius: 50%; background: var(--black); font-size: .74rem; font-weight: 800; }
.wizard-progress strong, .wizard-progress small { display: block; }
.wizard-progress strong { color: inherit; font-size: .82rem; }
.wizard-progress small { margin-top: 3px; font-size: .66rem; }
.wizard-progress li.is-active, .wizard-progress li.is-complete { color: #fff; }
.wizard-progress li.is-active > span { border-color: var(--blue-light); background: var(--blue); }
.wizard-progress li.is-complete > span { border-color: var(--blue-light); color: var(--black); background: var(--blue-light); }
.wizard-progress li.is-complete > span { font-size: 0; }
.wizard-progress li.is-complete > span::before { content: "✓"; font-size: .8rem; }
.wizard-sidebar__note { margin: 8px 18px 18px; padding: 18px; border-left: 3px solid var(--blue); background: rgba(91,155,213,.11); }
.wizard-sidebar__note strong { font-size: .76rem; }
.wizard-sidebar__note p { margin: 6px 0 0; color: rgba(255,255,255,.56); font-size: .68rem; line-height: 1.55; }

.visualizer-form { min-width: 0; padding: 42px; border: 1px solid #d9dde0; border-radius: 8px; background: #fff; box-shadow: 0 16px 52px rgba(0,0,0,.09); }
.visualizer-form fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }
.wizard-step > legend { width: 100%; color: var(--black); font-family: "Barlow Condensed", sans-serif; font-size: clamp(2rem, 4vw, 2.8rem); font-weight: 800; line-height: 1.05; text-transform: uppercase; }
.wizard-step > legend span { display: block; margin-bottom: 8px; color: var(--blue-dark); font-family: "Inter", sans-serif; font-size: .72rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.step-intro { max-width: 720px; margin: 13px 0 30px; color: #5b6066; font-size: .94rem; }
.form-alert { margin-bottom: 24px; padding: 15px 17px; border: 1px solid #b84343; border-radius: 6px; color: #862d2d; background: #fff1f1; font-size: .86rem; line-height: 1.55; }
.form-alert.is-success { border-color: #2d7b58; color: #175b3c; background: #eefaf4; }
.honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; }

.choice-grid { display: grid; gap: 13px; margin-bottom: 28px; }
.choice-grid--projects { grid-template-columns: repeat(3, 1fr); }
.choice-grid--3 { grid-template-columns: repeat(3, 1fr); }
.choice-card { position: relative; display: flex; min-height: 132px; flex-direction: column; justify-content: center; padding: 25px 24px; border: 1px solid #d8dadd; border-radius: 7px; background: #fff; cursor: pointer; transition: border-color .2s, box-shadow .2s, transform .2s; }
.choice-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 9px 24px rgba(0,0,0,.07); }
.choice-card input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.choice-card:has(input:focus-visible) { outline: 3px solid var(--blue-light); outline-offset: 3px; }
.choice-card:has(input:checked) { border: 2px solid var(--blue-dark); padding: 24px 23px; background: rgba(91,155,213,.07); box-shadow: 0 9px 24px rgba(58,123,191,.12); }
.choice-card__mark { position: absolute; top: 15px; right: 15px; width: 17px; height: 17px; border: 1px solid #b6bbc0; border-radius: 50%; }
.choice-card:has(input:checked) .choice-card__mark { border: 5px solid var(--blue-dark); }
.choice-card strong { color: var(--black); font-family: "Barlow Condensed", sans-serif; font-size: 1.2rem; letter-spacing: .02em; text-transform: uppercase; }
.choice-card small { margin-top: 7px; color: #6c7075; font-size: .72rem; line-height: 1.45; }

.form-grid { display: grid; gap: 20px; margin-top: 22px; }
.form-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field { display: grid; gap: 8px; margin-top: 22px; color: #25282a; font-size: .8rem; font-weight: 700; }
.form-grid .field { margin-top: 0; }
.field > span { line-height: 1.4; }
.field b, .consent-list b { color: var(--blue-dark); }
.field span small { color: #73777c; font-weight: 500; }
.field > small { color: #777c81; font-size: .67rem; font-weight: 500; line-height: 1.5; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #cfd3d6;
  border-radius: 5px;
  color: var(--black);
  background: #fff;
  font: 500 .9rem "Inter", sans-serif;
}
.field input, .field select { min-height: 50px; padding: 0 14px; }
.field textarea { min-height: 112px; padding: 13px 14px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 3px solid rgba(91,155,213,.25); border-color: var(--blue-dark); }
.field [aria-invalid="true"] { border-color: #b84343; background: #fff8f8; }

.upload-zone { position: relative; display: grid; min-height: 210px; place-items: center; border: 2px dashed #aab2b8; border-radius: 8px; color: #3c4247; background: #f8fafb; transition: border-color .2s, background .2s; }
.upload-zone.is-dragging { border-color: var(--blue-dark); background: rgba(91,155,213,.08); }
.upload-zone input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-zone label { display: grid; width: 100%; height: 100%; place-items: center; align-content: center; padding: 30px; text-align: center; cursor: pointer; }
.upload-zone__icon { display: grid; width: 44px; height: 44px; place-items: center; margin-bottom: 12px; border-radius: 50%; color: #fff; background: var(--blue-dark); font-size: 1.45rem; }
.upload-zone strong, .upload-zone small { display: block; }
.upload-zone strong { font-size: .9rem; }
.upload-zone small { max-width: 390px; margin-top: 7px; color: #747b80; font-size: .7rem; line-height: 1.5; }
.upload-zone--secondary { min-height: 140px; margin-top: 24px; }
.upload-zone--secondary label { grid-template-columns: auto 1fr; justify-items: start; column-gap: 14px; text-align: left; }
.upload-zone--secondary .upload-zone__icon { grid-row: span 2; margin: 0; }
.upload-zone--secondary strong, .upload-zone--secondary small { justify-self: start; }
.upload-zone--secondary small { margin: 0; }
.upload-previews { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; margin-top: 16px; }
.upload-previews:empty { display: none; }
.upload-preview { position: relative; overflow: hidden; min-height: 130px; border: 1px solid #d9dcdf; border-radius: 6px; background: #eee; }
.upload-preview img { width: 100%; height: 150px; object-fit: cover; }
.upload-preview span { display: block; overflow: hidden; padding: 8px 10px; color: #555b60; font-size: .65rem; text-overflow: ellipsis; white-space: nowrap; }
.photo-guidance { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 18px; border: 1px solid #e0e2e4; border-radius: 6px; }
.photo-guidance div { padding: 14px 15px; }
.photo-guidance div + div { border-left: 1px solid #e0e2e4; }
.photo-guidance strong, .photo-guidance span { display: block; }
.photo-guidance strong { color: #262a2d; font-size: .7rem; }
.photo-guidance span { margin-top: 4px; color: #73797e; font-size: .63rem; line-height: 1.45; }

.palette-builder { display: grid; gap: 14px; margin-top: 26px; padding: 24px; border: 1px solid #dfe2e4; border-radius: 8px; background: #f8f9fa; }
.palette-row { display: grid; grid-template-columns: 120px 1fr 1fr; align-items: end; gap: 14px; }
.palette-row .field { margin: 0; }
.color-field { display: grid; gap: 8px; color: #25282a; font-size: .75rem; font-weight: 700; }
.color-field input { width: 100%; height: 50px; padding: 4px; border: 1px solid #cfd3d6; border-radius: 5px; background: #fff; cursor: pointer; }

.checkbox-fieldset { margin-top: 28px !important; }
.checkbox-fieldset legend { margin-bottom: 13px; color: #25282a; font-size: .8rem; font-weight: 700; }
.check-grid { display: grid; grid-template-columns: repeat(2, 1fr); overflow: hidden; border: 1px solid #dfe1e3; border-radius: 6px; }
.check-grid label { display: flex; min-height: 48px; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #e5e7e9; color: #4c5155; font-size: .76rem; cursor: pointer; }
.check-grid label:nth-child(odd) { border-right: 1px solid #e5e7e9; }
.check-grid label:nth-last-child(-n+2) { border-bottom: 0; }
.check-grid input, .consent-list input { width: 17px; height: 17px; accent-color: var(--blue-dark); }

.compliance-note { margin-top: 24px; padding: 17px 18px; border-left: 3px solid var(--blue-dark); background: rgba(91,155,213,.08); }
.compliance-note strong { color: #1c2730; font-size: .78rem; }
.compliance-note p { margin: 5px 0 0; color: #5e666c; font-size: .71rem; line-height: 1.55; }
.review-card { margin-top: 26px; padding: 24px; border: 1px solid #dfe2e5; border-radius: 7px; background: #f8f9fa; }
.review-card h3 { margin-bottom: 16px; font-size: 1.35rem; }
.review-card dl { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; overflow: hidden; margin: 0; border: 1px solid #e0e2e4; border-radius: 5px; background: #e0e2e4; }
.review-card dl div { padding: 13px 14px; background: #fff; }
.review-card dt { color: #777d82; font-size: .64rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.review-card dd { margin: 5px 0 0; color: #24282b; font-size: .76rem; font-weight: 700; line-height: 1.45; }
.consent-list { display: grid; gap: 12px; margin-top: 24px; }
.consent-list label { display: flex; align-items: flex-start; gap: 11px; color: #50565a; font-size: .7rem; line-height: 1.55; }
.consent-list input { flex: 0 0 17px; margin-top: 2px; }
.consent-list a { color: var(--blue-dark); font-weight: 700; }

.wizard-actions { display: flex; justify-content: space-between; gap: 14px; margin-top: 36px; padding-top: 25px; border-top: 1px solid #e4e5e7; }
.wizard-actions .btn { cursor: pointer; }
.wizard-actions [data-next], .wizard-actions [data-submit] { margin-left: auto; }
.btn--ghost { border-color: #cfd2d5; color: #2d3033; background: #fff; }
.btn--ghost:hover { border-color: #9da3a8; background: #f3f4f5; }
.submit-button { position: relative; min-width: 235px; }
.submit-button.is-loading span:first-child { opacity: 0; }
.button-spinner { position: absolute; display: none; width: 19px; height: 19px; border: 2px solid rgba(255,255,255,.42); border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.submit-button.is-loading .button-spinner { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }
.form-security { margin: 16px 0 0; color: #858a8f; font-size: .64rem; letter-spacing: .03em; text-align: center; }
.submission-success { padding: 34px 18px; text-align: center; }
.submission-success__mark { display: grid; width: 68px; height: 68px; place-items: center; margin: 0 auto 22px; border-radius: 50%; color: #fff; background: #287753; font-size: 1.8rem; font-weight: 800; }
.submission-success h2 { margin-top: 7px; }
.submission-success > p { max-width: 620px; margin: 18px auto 0; }
.submission-success__next { max-width: 650px; margin: 30px auto; padding: 24px; border: 1px solid #dfe2e4; border-radius: 7px; background: #f8f9fa; text-align: left; }
.submission-success__next strong { font-size: .78rem; text-transform: uppercase; }
.submission-success__next ol { display: grid; gap: 9px; margin: 14px 0 0; padding-left: 20px; color: #545a5e; font-size: .78rem; line-height: 1.5; }

.expectation-card { padding: 38px; border: 1px solid rgba(255,255,255,.14); border-radius: 8px; background: #181818; box-shadow: 0 20px 50px rgba(0,0,0,.25); }
.expectation-card__label { color: var(--blue-light); font-size: .7rem; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; }
.expectation-card h3 { margin-top: 13px; color: #fff; font-size: 2rem; }
.expectation-card p { margin: 14px 0 25px; }

@media (max-width: 1060px) {
  .visualizer-hero__grid { grid-template-columns: 1fr .72fr; gap: 40px; }
  .visualizer-layout { grid-template-columns: 250px minmax(0, 1fr); }
  .visualizer-form { padding: 34px; }
  .choice-grid--projects { grid-template-columns: repeat(2, 1fr); }
  .palette-row { grid-template-columns: 100px 1fr; }
  .palette-row .field:last-child { grid-column: 1 / -1; }
}

@media (max-width: 820px) {
  .visualizer-hero { min-height: auto; padding-bottom: 76px; }
  .visualizer-hero__grid { grid-template-columns: 1fr; }
  .concept-preview { max-width: 540px; }
  .visualizer-process { grid-template-columns: 1fr; }
  .visualizer-shell { padding: 74px 0 86px; }
  .visualizer-shell__heading { display: block; }
  .visualizer-shell__heading p { margin-top: 14px; text-align: left; }
  .visualizer-layout { grid-template-columns: 1fr; }
  .wizard-sidebar { position: static; }
  .wizard-sidebar__title, .wizard-sidebar__note { display: none; }
  .wizard-progress { display: grid; grid-template-columns: repeat(5, 1fr); padding: 12px; }
  .wizard-progress li { display: grid; justify-items: center; gap: 6px; padding: 7px 2px; text-align: center; }
  .wizard-progress li::after { top: 23px; right: -50%; bottom: auto; left: 50%; width: 100%; height: 1px; }
  .wizard-progress li > span { width: 29px; height: 29px; }
  .wizard-progress strong { font-size: .62rem; }
  .wizard-progress small { display: none; }
  .visualizer-form { padding: 32px 26px; }
  .photo-guidance { grid-template-columns: 1fr; }
  .photo-guidance div + div { border-top: 1px solid #e0e2e4; border-left: 0; }
}

@media (max-width: 620px) {
  .concept-preview__details { grid-template-columns: 1fr; }
  .concept-preview__details div + div { border-top: 1px solid rgba(255,255,255,.12); border-left: 0; }
  .choice-grid--projects, .choice-grid--3, .form-grid--2, .check-grid, .review-card dl { grid-template-columns: 1fr; }
  .choice-card { min-height: 108px; }
  .check-grid label:nth-child(odd) { border-right: 0; }
  .check-grid label:nth-last-child(2) { border-bottom: 1px solid #e5e7e9; }
  .palette-builder { padding: 16px; }
  .palette-row { grid-template-columns: 82px 1fr; padding-bottom: 14px; border-bottom: 1px solid #e0e2e4; }
  .palette-row:last-child { padding-bottom: 0; border-bottom: 0; }
  .upload-previews { grid-template-columns: repeat(2, 1fr); }
  .visualizer-form { padding: 27px 18px; }
  .wizard-actions { flex-wrap: wrap; }
  .wizard-actions .btn { width: 100%; }
  .wizard-actions [data-next], .wizard-actions [data-submit] { margin-left: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .choice-card, .button-spinner { transition: none; animation: none; }
}