.facade-configurator__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(300px, .72fr);
  align-items: center;
  gap: clamp(2rem, 4vw, 4rem);
  max-width: 1480px;
  margin: 0 auto;
}
.facade-configurator__visual { min-width: 0; position: relative; }
.facade-configurator__radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.facade-configurator__viewport { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 18px; background: #eeefec; box-shadow: 0 20px 52px rgba(0,0,0,.12); }
.facade-configurator__track { position: absolute; inset: 0; width: 100%; height: 100%; }
.facade-configurator__slide { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity .65s ease-in-out; pointer-events: none; }
.facade-configurator__slide--red { opacity: 1; }
.facade-configurator__slide img { display: block; width: 100%; height: 100%; object-fit: contain; }
.facade-configurator__visual:has(#facade-choice-red:checked) .facade-configurator__slide--red,
.facade-configurator__visual:has(#facade-choice-grey:checked) .facade-configurator__slide--grey,
.facade-configurator__visual:has(#facade-choice-black:checked) .facade-configurator__slide--black { opacity: 1; }
.facade-configurator__content { max-width: 460px; padding: 1rem 0; }
.facade-configurator__content h2 { margin: 0 0 1rem; font-size: clamp(2rem, 3.2vw, 3.25rem); line-height: 1.08; letter-spacing: -.035em; }
.facade-configurator__content p { margin: 0; font-size: 1.05rem; line-height: 1.7; color: #555650; }
.facade-configurator__selector {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .5rem;
  width: 100%;
  padding-top: 1.75rem;
}
.facade-configurator__selector label {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 0;
  min-height: 112px;
  padding: .8rem;
  border: 1px solid rgba(55,50,42,.18);
  border-radius: 4px;
  background: #f2eee5;
  color: #262722;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  box-shadow: inset 0 1px rgba(255,255,255,.55);
  transition: border-color .22s ease, box-shadow .22s ease, transform .22s ease;
}
.facade-configurator__selector label::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .22;
  background: repeating-linear-gradient(0deg, transparent 0, transparent 7px, rgba(45,39,30,.18) 8px, transparent 9px, transparent 13px);
}
.facade-configurator__selector label:hover { border-color: rgba(55,50,42,.48); transform: translateY(-2px); }
.facade-configurator__selector label span { position: relative; z-index: 1; }
.facade-configurator__selector label[for="facade-choice-red"] { background-color: #a84c40; border-color: #954238; color: #fffaf4; }
.facade-configurator__selector label[for="facade-choice-grey"] { background-color: #b9b9b1; border-color: #a1a199; color: #272923; }
.facade-configurator__selector label[for="facade-choice-black"] { background-color: #383a36; border-color: #292b28; color: #faf9f4; }
.facade-configurator__visual:has(#facade-choice-red:checked) ~ .facade-configurator__content label[for="facade-choice-red"],
.facade-configurator__visual:has(#facade-choice-grey:checked) ~ .facade-configurator__content label[for="facade-choice-grey"],
.facade-configurator__visual:has(#facade-choice-black:checked) ~ .facade-configurator__content label[for="facade-choice-black"] { outline: 2px solid #8d806d; outline-offset: 2px; box-shadow: 0 5px 15px rgba(38,34,27,.12); }
.facade-configurator__selector label:focus-visible { outline: 2px solid #222; outline-offset: 3px; }
.facade-configurator__dot { display: none; width: 1.2rem; height: 1.2rem; border: 1px solid rgba(0,0,0,.2); border-radius: 2px; flex: 0 0 auto; box-shadow: inset 0 1px 2px rgba(0,0,0,.13); }
.facade-configurator__dot--red { background: #a72b2b; }
.facade-configurator__dot--grey { background: #858585; }
.facade-configurator__dot--black { background: #171717; }
@media (max-width: 767px) {
  .facade-configurator__layout { grid-template-columns: minmax(0, 1fr); gap: 1.75rem; }
  .facade-configurator__content { max-width: none; padding: 0; }
  .facade-configurator__content h2 { font-size: clamp(1.8rem, 7vw, 2.5rem); }
  .facade-configurator__selector { padding-top: 1.25rem; gap: .4rem; }
  .facade-configurator__selector label { min-height: 86px; padding: .6rem; gap: .5rem; }
}
@media (prefers-reduced-motion: reduce) { .facade-configurator__slide, .facade-configurator__selector label { transition: none; }}

/* Scandinavian styling for contact and quote forms */
form:not(.facade-configurator__form) {
  --form-ink: #292b26;
  --form-muted: #686a62;
  --form-line: #d8d7ce;
  --form-paper: #fbfaf6;
  color: var(--form-ink);
}
form:not(.facade-configurator__form) label {
  display: block;
  margin: 0 0 .45rem;
  color: var(--form-ink);
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .005em;
}
form:not(.facade-configurator__form) input:not([type="checkbox"]):not([type="radio"]),
form:not(.facade-configurator__form) select,
form:not(.facade-configurator__form) textarea {
  display: block;
  width: 100%;
  min-height: 50px;
  padding: .85rem 1rem;
  border: 1px solid var(--form-line);
  border-radius: 3px;
  background: var(--form-paper);
  color: var(--form-ink);
  font: inherit;
  line-height: 1.45;
  box-shadow: inset 0 1px 2px rgba(35,35,28,.025);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}
form:not(.facade-configurator__form) textarea {
  min-height: 140px;
  resize: vertical;
}
form:not(.facade-configurator__form) input::placeholder,
form:not(.facade-configurator__form) textarea::placeholder {
  color: #96978f;
}
form:not(.facade-configurator__form) input:not([type="checkbox"]):not([type="radio"]):focus,
form:not(.facade-configurator__form) select:focus,
form:not(.facade-configurator__form) textarea:focus {
  outline: none;
  border-color: #777b6c;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(119,123,108,.14);
}
form:not(.facade-configurator__form) input[type="checkbox"],
form:not(.facade-configurator__form) input[type="radio"] {
  accent-color: #555b4c;
}
form:not(.facade-configurator__form) button[type="submit"],
form:not(.facade-configurator__form) input[type="submit"] {
  min-height: 50px;
  padding: .85rem 1.5rem;
  border: 1px solid #34382f;
  border-radius: 3px;
  background: #34382f;
  color: #fffdf7;
  font: inherit;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
form:not(.facade-configurator__form) button[type="submit"]:hover,
form:not(.facade-configurator__form) input[type="submit"]:hover {
  background: #4b5143;
  border-color: #4b5143;
}
@media (max-width: 767px) {
  form:not(.facade-configurator__form) input:not([type="checkbox"]):not([type="radio"]),
  form:not(.facade-configurator__form) select,
  form:not(.facade-configurator__form) textarea { font-size: 16px; }
}


/* Minimal underline-only form fields with labels inside */
form:not(.facade-configurator__form) .form-group,
form:not(.facade-configurator__form) .field,
form:not(.facade-configurator__form) .form-field {
  position: relative;
}
form:not(.facade-configurator__form) .form-group > label,
form:not(.facade-configurator__form) .field > label,
form:not(.facade-configurator__form) .form-field > label {
  position: absolute;
  top: .65rem;
  left: 0;
  z-index: 1;
  margin: 0;
  color: #77796f;
  font-size: .82rem;
  font-weight: 400;
  pointer-events: none;
}
form:not(.facade-configurator__form) input:not([type="checkbox"]):not([type="radio"]),
form:not(.facade-configurator__form) select,
form:not(.facade-configurator__form) textarea {
  border: 0 !important;
  border-bottom: 1px solid #c9c9bf !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 1.55rem 0 .55rem !important;
  min-height: 54px;
}
form:not(.facade-configurator__form) textarea {
  min-height: 112px;
  padding-top: 1.7rem !important;
}
form:not(.facade-configurator__form) input:not([type="checkbox"]):not([type="radio"]):focus,
form:not(.facade-configurator__form) select:focus,
form:not(.facade-configurator__form) textarea:focus {
  outline: none !important;
  border-bottom: 2px solid #555b4c !important;
  box-shadow: none !important;
}
form:not(.facade-configurator__form) input::placeholder,
form:not(.facade-configurator__form) textarea::placeholder {
  color: #aaa99f;
}
form:not(.facade-configurator__form) button[type="submit"],
form:not(.facade-configurator__form) input[type="submit"] {
  border-radius: 2px;
}


/* PageBase form markup uses .form-col, .form-label and .form-input (not native form wrappers) */
.form-col {
  position: relative;
}
.form-col > .form-label {
  position: absolute;
  top: .5rem;
  left: 0;
  z-index: 2;
  display: block;
  margin: 0;
  color: #77796f;
  font-size: .8rem;
  font-weight: 400;
  line-height: 1.2;
  pointer-events: none;
}
.form-col .form-input,
.form-col input.form-input,
.form-col select.form-input,
.form-col textarea.form-input {
  display: block;
  width: 100%;
  min-height: 52px;
  padding: 1.35rem 0 .45rem !important;
  border: 0 !important;
  border-bottom: 1px solid #c9c9bf !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #292b26;
  font: inherit;
}
.form-col textarea.form-input {
  min-height: 112px;
  padding-top: 1.55rem !important;
  resize: vertical;
}
.form-col .form-input:focus {
  outline: none !important;
  border-bottom: 2px solid #555b4c !important;
  box-shadow: none !important;
}
.form-col .form-input::placeholder {
  color: transparent;
}
.form-col .link-submit {
  border-radius: 2px;
}


/* Floating-label form fields: placeholder starts inside, label floats on focus/input */
.form-col {
  position: relative;
  margin-bottom: 1.15rem !important;
}
.form-col > .form-label {
  position: absolute;
  top: 1.05rem;
  left: 0;
  z-index: 2;
  display: block;
  margin: 0;
  color: #85867c;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.2;
  pointer-events: none;
  transform-origin: left top;
  transition: top .18s ease, font-size .18s ease, color .18s ease;
}
.form-col .form-input,
.form-col input.form-input,
.form-col select.form-input,
.form-col textarea.form-input {
  min-height: 58px;
  padding: 1.45rem 0 .4rem !important;
  border: 0 !important;
  border-bottom: 1px solid #c9c9bf !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.form-col textarea.form-input {
  min-height: 126px;
  padding-top: 1.7rem !important;
}
.form-col .form-input:focus {
  border-bottom: 2px solid #555b4c !important;
}
.form-col .form-input:focus + .form-label,
.form-col .form-input:not(:placeholder-shown) + .form-label,
.form-col:focus-within > .form-label,
.form-col.has-value > .form-label {
  top: .1rem;
  font-size: .75rem;
  color: #555b4c;
}
.form-col .form-input::placeholder {
  color: transparent;
}
@media (min-width: 768px) {
  .form-col {
    margin-bottom: 1.45rem !important;
  }
}


/* Select/dropdown fields: float the label from the start to prevent overlap */
.form-col:has(select.form-input) > .form-label {
  top: .1rem;
  font-size: .75rem;
  color: #555b4c;
}
.form-col select.form-input {
  padding-top: 1.55rem !important;
  padding-bottom: .35rem !important;
  min-height: 60px;
}


/* Scandinavian facade selectors: retain red, grey and black color surfaces */
.facade-configurator button,
.facade-configurator [role="button"],
.facade-configurator__options > *,
.facade-configurator__buttons > *,
.facade-configurator__choices > * {
  border-radius: 2px !important;
  border: 1px solid rgba(42,43,36,.25) !important;
  box-shadow: none;
  font: inherit;
  font-size: .9rem;
  font-weight: 500;
  letter-spacing: .025em;
  text-align: center;
  transition: border-color .18s ease, box-shadow .18s ease, filter .18s ease;
}
.facade-configurator button:hover,
.facade-configurator [role="button"]:hover,
.facade-configurator__options > *:hover,
.facade-configurator__buttons > *:hover,
.facade-configurator__choices > *:hover {
  filter: brightness(.97);
}
.facade-configurator button[aria-pressed="true"],
.facade-configurator [role="button"][aria-pressed="true"],
.facade-configurator button.active,
.facade-configurator [role="button"].active,
.facade-configurator__options > *.active,
.facade-configurator__buttons > *.active,
.facade-configurator__choices > *.active {
  outline: 1px solid #34382f !important;
  outline-offset: 2px;
  border-color: #34382f !important;
}
.facade-configurator__options,
.facade-configurator__buttons,
.facade-configurator__choices {
  display: flex;
  flex-flow: row nowrap;
  gap: .65rem;
}
@media (max-width: 600px) {
  .facade-configurator__options,
  .facade-configurator__buttons,
  .facade-configurator__choices { gap: .4rem; }
  .facade-configurator button,
  .facade-configurator [role="button"],
  .facade-configurator__options > *,
  .facade-configurator__buttons > *,
  .facade-configurator__choices > * {
    font-size: .82rem;
  }
}