/* Adapted from the supplied comparison slider. After is revealed on the left. */
.compare-slider { --position: 50%; position: relative; width: 100%; margin: 0; }
.compare-images { position: relative; overflow: hidden; }
.compare-images img { display: block; width: 100%; height: auto; aspect-ratio: auto; pointer-events: none; user-select: none; }
.compare-images .compare-after { position: absolute; inset: 0; height: 100%; object-fit: cover; clip-path: inset(0 calc(100% - var(--position)) 0 0); }
/* Per-pair registration. Crop the common scene slightly so positioning never
   reveals an empty edge. The reveal mask stays fixed to the slider divider. */
.compare-aligned .compare-images { aspect-ratio: 1920 / 1081; }
.compare-aligned .compare-scene { position: absolute; inset: -4%; }
.compare-aligned .compare-before { position: absolute; inset: 0; height: 100%; object-fit: cover; transform-origin: 0 0; transform: translate(var(--before-x, 0%), var(--before-y, 0%)) scale(var(--before-sx, 1), var(--before-sy, 1)); }
.compare-aligned .compare-reveal { position: absolute; inset: 0; clip-path: inset(0 calc(3.703704% + (100% - var(--position)) / 1.08) 0 0); }
.compare-aligned .compare-after { clip-path: none; }
.compare-design-build { --before-x: 1%; --before-y: -1.4%; --before-sx: .98; --before-sy: .985; }
.compare-outdoor-living { --before-x: -.3%; --before-y: 1.2%; --before-sx: 1.015; --before-sy: 1.015; }
.compare-paver-installation { --before-x: 2.8%; --before-y: 3.2%; --before-sx: .955; --before-sy: 1; }
/* Replacement retaining-wall pair: align the background without stretching.
   A 900px-tall window leaves room for the 130px upward shift of the before. */
.compare-retaining-walls .compare-images { aspect-ratio: 1920 / 900; }
.compare-retaining-walls .compare-images img { position: absolute; inset: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; }
.compare-retaining-walls .compare-before { transform: translateY(-12.037037%); }
.compare-range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; touch-action: pan-y; z-index: 3; }
/* Keep keyboard focus visible on the handle without outlining the photograph. */
.compare-range:focus-visible + .compare-handle .compare-circle { outline: 2px solid white; outline-offset: 4px; }
.compare-handle { position: absolute; top: 0; bottom: 0; left: var(--position); width: 2px; background: white; transform: translateX(-50%); pointer-events: none; filter: drop-shadow(0 0 2px #333); }
.compare-control { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 8px; }
.compare-circle { width: 40px; height: 40px; border: 3px solid #333; border-radius: 50%; background: white; box-shadow: 0 0 6px #0005; flex-shrink: 0; }
.compare-arrow { color: white; font-size: 28px; font-weight: bold; }
.compare-label { position: absolute; top: 18px; padding: 6px 12px; background: #0f1f1ce6; color: white; font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; pointer-events: none; }
.compare-label-after { left: 18px; }
.compare-label-before { right: 18px; }
.compare-caption { margin: 0; padding-top: 1rem; color: var(--color-subtle); font-size: .9rem; }
.project-award { padding: 2.5rem; border-left: 3px solid var(--color-bronze); background: var(--color-forest, #0f1f1c); color: white; }
.project-award h2 { color: white; margin: .8rem 0 1rem; }
.project-award p:last-child { margin-bottom: 0; max-width: 75ch; }
.project-award-label { font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; }
.project-case-hero-figure .driveway-main-image { height: auto; aspect-ratio: 16 / 9; }
.project-case-copy a { color: var(--color-forest, #0f1f1c); text-decoration: underline; text-decoration-color: var(--color-bronze); text-underline-offset: .2em; }
.project-case-copy a:hover { color: var(--color-bronze); }
@media (max-width: 480px) {
  .compare-circle { width: 48px; height: 48px; }
  .compare-label { top: 10px; padding: 4px 8px; font-size: .65rem; }
  .compare-label-after { left: 10px; }
  .compare-label-before { right: 10px; }
  .project-award { padding: 1.5rem; }
}