/* Selected photography, the customer's LED photo, and the repair request form. */
@media (min-width: 681px) {
  /* Extend the workshop beneath the copy; retain the original frame at its natural ratio on the right. */
  .hero.hero-selected .hero-picture { inset: 0; overflow: hidden; background: url('./assets/hero-selected-v4.webp') left top / auto 250% no-repeat; }
  .hero.hero-selected .hero-picture > img { position: absolute; top: 0; right: 0; width: auto; max-width: 100%; height: 100%; object-fit: contain; object-position: right bottom; mask-image: linear-gradient(90deg, transparent, #000 23%); }
  .hero.hero-selected .hero-picture::after { background: linear-gradient(90deg, #101d27e6 0%, #101d27e6 33%, #101d27d9 43%, #101d2799 52%, #101d2733 64%, transparent 76%), linear-gradient(0deg, #101d2726, transparent 22%); }
}
@media (min-width: 681px) and (max-width: 950px) {
  .hero.hero-selected .hero-picture > img { width: 100%; height: 100%; object-fit: cover; object-position: center; mask-image: none; }
}
.product-photo:has(img[src*='service-juwel-product-v4']) { padding: 8px 20px 47px; }
.product-photo img[src*='service-juwel-product-v4'] { max-width: none; object-fit: cover; object-position: center 47%; mix-blend-mode: normal; filter: drop-shadow(0 12px 12px #08131b66); }

.comparison-clean { aspect-ratio: 750 / 340; background: #2e4755; }
.comparison-clean .comparison-after, .comparison-clean .comparison-before { position: absolute; inset: 0; width: 100%; height: 100%; background: radial-gradient(ellipse at 50% 43%, #7f949b 0%, #506c7a 48%, #263e4d 100%); }
.comparison-clean .comparison-product-plane { position: absolute; left: 0; top: -16.17647%; width: 100%; height: 132.35294%; }
.comparison-clean .comparison-product-plane > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: fill; }
.comparison-clean .conversion-original-body { mask: url('./assets/conversion-body-mask-v4.svg') center / 100% 100% no-repeat; }
.comparison-clean .conversion-tube-upper { clip-path: polygon(19.2% 34.2222%, 86.6667% 43.5556%, 86.6667% 46.2222%, 19.2% 37.3333%); }
.comparison-clean .conversion-tube-lower { clip-path: polygon(16.6667% 49.5556%, 85.8667% 58.6667%, 85.8667% 62.2222%, 16.6667% 53.1111%); }

/* Rotate the original portrait photograph in the layout, preserving the source pixels. */
.gallery .gallery-led-original { aspect-ratio: 1.38; background: #d8d8cf; }
.gallery .gallery-led-original > img { position: absolute; top: 50%; left: 50%; width: calc(100% / 1.38); height: auto; max-width: none; transform: translate(-50%, -50%) rotate(90deg); object-fit: contain; filter: none; }
.gallery .gallery-led-original:hover > img { transform: translate(-50%, -50%) rotate(90deg); filter: none; }
.photo-watermark { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; padding: 12px 16px; color: #fff; background: linear-gradient(transparent, #0e1d27d9 50%); font-size: clamp(.625rem, .82vw, .8125rem); font-weight: 700; letter-spacing: .02em; line-height: 1.5; text-align: left; pointer-events: none; }
.gallery-led-original .photo-watermark { padding-right: 65px; }
.lightbox-media { position: relative; width: fit-content; max-width: 100%; margin-inline: auto; }
.lightbox-media .photo-watermark { font-size: .8125rem; text-align: center; overflow-wrap: anywhere; }

.request-section { padding-top: 22px; padding-bottom: 38px; scroll-margin-top: 15px; }
.request-panel { display: grid; grid-template-columns: .8fr 1.2fr; gap: 65px; padding: 48px; background: #1a2c38; border: 1px solid #3f5563; border-radius: 14px; }
.request-copy h2 { font-size: clamp(2rem, 3vw, 2.75rem); letter-spacing: -1px; line-height: 1.16; }
.request-copy > p:not(.eyebrow) { color: #c9d5dc; font-size: 1.0625rem; line-height: 1.7; margin-top: 20px; max-width: 370px; }
.request-copy .request-call { display: inline-flex; align-items: center; gap: 10px; margin-top: 29px; font-weight: 700; font-size: 1.0625rem; }
.request-call .icon { color: var(--yellow); width: 20px; height: 20px; }
.request-copy .request-hours { font-size: .875rem!important; margin-top: 7px!important; }
.repair-request-form { position: relative; min-width: 0; }
.request-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; }
.request-field { display: flex; flex-direction: column; min-width: 0; gap: 8px; }
.request-field-full { grid-column: 1 / -1; }
.request-field > label { font-size: .9375rem; font-weight: 700; line-height: 1.5; }
.request-optional { font-size: .8125rem; font-weight: 400; color: #b2c1cb; }
.request-field input { width: 100%; min-width: 0; min-height: 56px; padding: 13px 15px; color: #f5f8fa; background: #101e28; border: 1px solid #617887; border-radius: 6px; font-size: 1.0625rem; line-height: 1.5; transition: border-color .15s, box-shadow .15s; }
.request-field input::placeholder { color: #99aebc; opacity: 1; }
.request-field input:focus { outline: 2px solid var(--yellow); outline-offset: 2px; border-color: var(--yellow); }
.request-field input[aria-invalid='true'] { border-color: #ff9c94; box-shadow: 0 0 0 1px #ff9c94; }
.field-hint { font-size: .8125rem; color: #b5c6d1; line-height: 1.5; }
.field-error { color: #ffc2bc; font-size: .875rem; line-height: 1.5; margin: 0; }
.field-error:empty { display: none; }
.request-consent { display: grid; grid-template-columns: 20px 1fr; align-items: start; gap: 11px; margin-top: 22px; color: #c9d5dc; font-size: .875rem; line-height: 1.6; cursor: pointer; }
.request-consent input { width: 19px; height: 19px; margin: 3px 0 0; accent-color: var(--yellow); cursor: pointer; }
.request-consent input:focus-visible { outline: 2px solid var(--yellow); outline-offset: 4px; }
#request-consent-error:not(:empty) { margin-top: 7px; }
.request-submit { margin-top: 22px; min-height: 58px; width: 100%; }
.request-submit:disabled { cursor: wait; opacity: .75; transform: none; }
.request-status { margin-top: 18px; padding: 13px 15px; border: 1px solid #6a8796; background: #11212d; border-radius: 6px; color: #e4edf2; font-size: .9375rem; line-height: 1.6; }
.request-status:empty { display: none; }
.request-status[data-state='success'] { border-color: #89bc9a; color: #d6f4e0; }
.request-status[data-state='error'], .request-status[role='alert'] { border-color: #ff9c94; color: #ffd1cc; }
.request-honeypot { position: absolute; left: -10000px; top: 0; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 1100px) {
  .request-panel { gap: 35px; padding: 36px; grid-template-columns: .78fr 1.22fr; }
  .request-fields { grid-template-columns: 1fr; gap: 18px; }
}
@media (max-width: 950px) {
  .request-panel { grid-template-columns: 1fr; gap: 29px; }
  .request-copy > p:not(.eyebrow) { max-width: 600px; }
  .request-fields { grid-template-columns: 1fr 1fr; }
  .request-copy .request-call { margin-top: 20px; }
}
@media (max-width: 680px) {
  .hero.hero-selected .hero-picture { inset: auto; aspect-ratio: 3 / 2; }
  .hero.hero-selected .hero-picture > img { object-position: center; object-fit: contain; }
  .hero.hero-selected .hero-picture::after { background: linear-gradient(180deg, #101d2799, transparent 12%), linear-gradient(0deg, #101d2759, transparent 15%); }
  .hero.hero-selected .hero-image-caption { display: none; }
  .gallery-led-original .photo-watermark { font-size: .6875rem; }
  .request-section { padding-top: 0; padding-bottom: 18px; }
  .request-panel { padding: 26px 22px; gap: 28px; border-radius: 10px; }
  .request-copy .eyebrow { margin-bottom: 17px; }
  .request-copy h2 { font-size: 2rem; }
  .request-copy > p:not(.eyebrow) { font-size: 1rem; margin-top: 17px; }
  .request-fields { grid-template-columns: 1fr; }
  .request-field input { font-size: 1rem; }
  .request-consent { margin-top: 20px; }
}
@media (prefers-reduced-motion: reduce) { .request-field input { transition: none; } }