/* Both photographs remain available side by side when JavaScript is unavailable. */
.comparison-section {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 460px);
  gap: 5%;
  align-items: start;
  background: var(--paper, #f4f4f2);
}
.comparison-copy { min-width: 0; max-width: 580px; }
.comparison-copy h2 { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.28; margin: 0 0 24px; text-transform: none; }
.comparison-copy > p:not(.eyebrow) { font-size: 17px; line-height: 1.8; color: var(--muted, #626262); max-width: 60ch; }
.photo-comparison { width: 100%; max-width: 460px; min-width: 0; margin: 0; justify-self: end; }
.photo-comparison [hidden] { display: none !important; }
.comparison-stage { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; min-width: 0; }
.comparison-before, .comparison-after { min-width: 0; }
.comparison-before { grid-column: 1; grid-row: 1; }
.comparison-after { grid-column: 2; grid-row: 1; }
.comparison-before img, .comparison-after img { display: block; width: 100%; height: auto; border-radius: 6px 24px 6px 6px; }
.comparison-label {
  grid-row: 1;
  align-self: start;
  justify-self: start;
  z-index: 3;
  margin: 12px;
  padding: 6px 10px;
  border-radius: 4px;
  background: #151515e6;
  color: white;
  font: 600 12px/1.4 var(--body, Arial, sans-serif);
  pointer-events: none;
}
.comparison-label-before { grid-column: 1; }
.comparison-label-after { grid-column: 2; }
.photo-comparison figcaption { margin-top: 16px; font: 400 14px/1.6 var(--body, Arial, sans-serif); color: var(--muted, #626262); }
.photo-comparison.is-ready .comparison-stage { position: relative; display: block; aspect-ratio: 3 / 4; overflow: hidden; isolation: isolate; border-radius: 6px 28px 6px 6px; background: #e8e8e6; }
.photo-comparison.is-ready .comparison-before, .photo-comparison.is-ready .comparison-after { position: absolute; inset: 0; }
.photo-comparison.is-ready .comparison-before { z-index: 2; clip-path: inset(0 calc(100% - var(--compare-position, 50%)) 0 0); }
.photo-comparison.is-ready .comparison-after { z-index: 1; }
.photo-comparison.is-ready .comparison-stage picture { display: block; width: 100%; height: 100%; }
.photo-comparison.is-ready .comparison-stage img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.photo-comparison.is-ready .comparison-label { position: absolute; top: 14px; margin: 0; }
.photo-comparison.is-ready .comparison-label-before { left: 14px; }
.photo-comparison.is-ready .comparison-label-after { right: 14px; }
.comparison-divider { position: absolute; inset-block: 0; left: var(--compare-position, 50%); width: 2px; transform: translateX(-50%); background: white; box-shadow: 0 0 0 1px #15151555; z-index: 4; pointer-events: none; }
.comparison-grip { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); display: grid; place-items: center; width: 44px; height: 52px; border: 1px solid white; border-radius: 6px; background: var(--ink, #151515); }
.comparison-grip::before { content: ''; width: 22px; height: 26px; background: white; -webkit-mask: url('assets/spade-mask.svg') center / contain no-repeat; mask: url('assets/spade-mask.svg') center / contain no-repeat; }
.comparison-range { position: absolute; inset: 0; z-index: 5; display: block; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 0; opacity: 0; background: transparent; appearance: none; -webkit-appearance: none; cursor: grab; touch-action: pan-y; }
.photo-comparison.is-dragging .comparison-range { cursor: grabbing; }
.photo-comparison:focus-within .comparison-stage { outline: 3px solid var(--accent, #425d73); outline-offset: 5px; }
.comparison-inline { grid-template-columns: minmax(0, 1fr) minmax(220px, 400px); gap: clamp(24px, 5vw, 65px); padding: 44px 0; }
.comparison-inline .photo-comparison { max-width: 400px; }
.comparison-copy .action-link { margin-top: 6px; min-height: 44px; }
.comparison-inline .comparison-copy h2 { font: 600 28px/1.35 var(--body); letter-spacing: 0; }
@media (max-width: 1100px) {
  .comparison-inline { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .comparison-inline .photo-comparison { justify-self: start; }
}
@media (max-width: 900px) {
  .comparison-section { grid-template-columns: minmax(0, 1fr); gap: 30px; }
  .comparison-copy h2 { font-size: 32px; }
  .photo-comparison { justify-self: start; }
  .comparison-inline { padding-top: 30px; padding-bottom: 30px; }
  .comparison-inline .comparison-copy h2 { font: 600 28px/1.35 var(--body); letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .comparison-stage, .comparison-before, .comparison-after, .comparison-divider { transition: none !important; animation: none !important; }
}