/* Impeccable scaffold: the measured layout of the approved comp as custom properties. Generated by build-phase.mjs scaffold; regenerate after comp-spec.mjs --regions changes. Bind these to your own markup; positions are % of the comp frame so they scale with it. */
:root {
  --r-nav-logo-x: 0.000%; --r-nav-logo-y: 0.000%; --r-nav-logo-w: 30.000%; --r-nav-logo-h: 10.000%;
  --r-nav-disclosure-x: 20.000%; --r-nav-disclosure-y: 0.000%; --r-nav-disclosure-w: 20.000%; --r-nav-disclosure-h: 10.000%;
  --r-nav-links-x: 40.000%; --r-nav-links-y: 0.000%; --r-nav-links-w: 40.000%; --r-nav-links-h: 10.000%;
  --r-nav-search-x: 70.000%; --r-nav-search-y: 0.000%; --r-nav-search-w: 20.000%; --r-nav-search-h: 10.000%;
  --r-nav-cta-x: 80.000%; --r-nav-cta-y: 0.000%; --r-nav-cta-w: 20.000%; --r-nav-cta-h: 10.000%;
  --r-hero-ground-x: 0.000%; --r-hero-ground-y: 10.000%; --r-hero-ground-w: 40.000%; --r-hero-ground-h: 50.000%;
  --r-hero-photo-x: 37.200%; --r-hero-photo-y: 8.930%; --r-hero-photo-w: 62.800%; --r-hero-photo-h: 51.650%;
  --r-hero-title-x: 0.000%; --r-hero-title-y: 20.000%; --r-hero-title-w: 40.000%; --r-hero-title-h: 20.000%;
  --r-hero-subtitle-x: 0.000%; --r-hero-subtitle-y: 30.000%; --r-hero-subtitle-w: 40.000%; --r-hero-subtitle-h: 10.000%;
  --r-hero-body-x: 0.000%; --r-hero-body-y: 40.000%; --r-hero-body-w: 40.000%; --r-hero-body-h: 10.000%;
  --r-hero-cta-x: 0.000%; --r-hero-cta-y: 40.000%; --r-hero-cta-w: 30.000%; --r-hero-cta-h: 20.000%;
  --r-hero-utility-x: 0.000%; --r-hero-utility-y: 50.000%; --r-hero-utility-w: 40.000%; --r-hero-utility-h: 10.000%;
  --r-hero-photo-caption-x: 90.000%; --r-hero-photo-caption-y: 10.000%; --r-hero-photo-caption-w: 10.000%; --r-hero-photo-caption-h: 30.000%;
  --r-services-heading-x: 0.000%; --r-services-heading-y: 60.000%; --r-services-heading-w: 30.000%; --r-services-heading-h: 10.000%;
  --r-services-link-x: 50.000%; --r-services-link-y: 60.000%; --r-services-link-w: 10.000%; --r-services-link-h: 10.000%;
  --r-service-repair-photo-x: 2.930%; --r-service-repair-photo-y: 66.530%; --r-service-repair-photo-w: 13.520%; --r-service-repair-photo-h: 15.300%;
  --r-service-driveway-photo-x: 17.290%; --r-service-driveway-photo-y: 66.530%; --r-service-driveway-photo-w: 13.760%; --r-service-driveway-photo-h: 15.300%;
  --r-service-sand-photo-x: 31.940%; --r-service-sand-photo-y: 66.530%; --r-service-sand-photo-w: 13.760%; --r-service-sand-photo-h: 15.300%;
  --r-service-wall-photo-x: 46.530%; --r-service-wall-photo-y: 66.530%; --r-service-wall-photo-w: 13.760%; --r-service-wall-photo-h: 15.300%;
  --r-service-labels-x: 0.000%; --r-service-labels-y: 80.000%; --r-service-labels-w: 60.000%; --r-service-labels-h: 10.000%;
  --r-ledger-heading-x: 60.000%; --r-ledger-heading-y: 60.000%; --r-ledger-heading-w: 20.000%; --r-ledger-heading-h: 10.000%;
  --r-ledger-link-x: 80.000%; --r-ledger-link-y: 60.000%; --r-ledger-link-w: 20.000%; --r-ledger-link-h: 10.000%;
  --r-ledger-kicker-x: 60.000%; --r-ledger-kicker-y: 60.000%; --r-ledger-kicker-w: 30.000%; --r-ledger-kicker-h: 10.000%;
  --r-swatch-limestone-x: 63.400%; --r-swatch-limestone-y: 69.610%; --r-swatch-limestone-w: 8.130%; --r-swatch-limestone-h: 13.920%;
  --r-swatch-grey-x: 72.130%; --r-swatch-grey-y: 69.610%; --r-swatch-grey-w: 8.070%; --r-swatch-grey-h: 13.920%;
  --r-swatch-sandstone-x: 80.800%; --r-swatch-sandstone-y: 69.610%; --r-swatch-sandstone-w: 8.130%; --r-swatch-sandstone-h: 13.920%;
  --r-swatch-charcoal-x: 89.470%; --r-swatch-charcoal-y: 69.610%; --r-swatch-charcoal-w: 8.250%; --r-swatch-charcoal-h: 13.920%;
  --r-swatch-labels-x: 60.000%; --r-swatch-labels-y: 80.000%; --r-swatch-labels-w: 40.000%; --r-swatch-labels-h: 10.000%;
  --r-footer-band-x: 0.000%; --r-footer-band-y: 90.000%; --r-footer-band-w: 100.000%; --r-footer-band-h: 10.000%;
}

.comp-frame { position: relative; width: 100%; aspect-ratio: 1672 / 941; overflow: hidden; }
.r-nav-logo { position: absolute; left: var(--r-nav-logo-x); top: var(--r-nav-logo-y); width: var(--r-nav-logo-w); height: var(--r-nav-logo-h); }
.r-nav-disclosure { position: absolute; left: var(--r-nav-disclosure-x); top: var(--r-nav-disclosure-y); width: var(--r-nav-disclosure-w); height: var(--r-nav-disclosure-h); }
.r-nav-links { position: absolute; left: var(--r-nav-links-x); top: var(--r-nav-links-y); width: var(--r-nav-links-w); height: var(--r-nav-links-h); }
.r-nav-search { position: absolute; left: var(--r-nav-search-x); top: var(--r-nav-search-y); width: var(--r-nav-search-w); height: var(--r-nav-search-h); }
.r-nav-cta { position: absolute; left: var(--r-nav-cta-x); top: var(--r-nav-cta-y); width: var(--r-nav-cta-w); height: var(--r-nav-cta-h); }
.r-hero-ground { position: absolute; left: var(--r-hero-ground-x); top: var(--r-hero-ground-y); width: var(--r-hero-ground-w); height: var(--r-hero-ground-h); }
.r-hero-photo { position: absolute; left: var(--r-hero-photo-x); top: var(--r-hero-photo-y); width: var(--r-hero-photo-w); height: var(--r-hero-photo-h); }
.r-hero-title { position: absolute; left: var(--r-hero-title-x); top: var(--r-hero-title-y); width: var(--r-hero-title-w); height: var(--r-hero-title-h); }
.r-hero-subtitle { position: absolute; left: var(--r-hero-subtitle-x); top: var(--r-hero-subtitle-y); width: var(--r-hero-subtitle-w); height: var(--r-hero-subtitle-h); }
.r-hero-body { position: absolute; left: var(--r-hero-body-x); top: var(--r-hero-body-y); width: var(--r-hero-body-w); height: var(--r-hero-body-h); }
.r-hero-cta { position: absolute; left: var(--r-hero-cta-x); top: var(--r-hero-cta-y); width: var(--r-hero-cta-w); height: var(--r-hero-cta-h); }
.r-hero-utility { position: absolute; left: var(--r-hero-utility-x); top: var(--r-hero-utility-y); width: var(--r-hero-utility-w); height: var(--r-hero-utility-h); }
.r-hero-photo-caption { position: absolute; left: var(--r-hero-photo-caption-x); top: var(--r-hero-photo-caption-y); width: var(--r-hero-photo-caption-w); height: var(--r-hero-photo-caption-h); }
.r-services-heading { position: absolute; left: var(--r-services-heading-x); top: var(--r-services-heading-y); width: var(--r-services-heading-w); height: var(--r-services-heading-h); }
.r-services-link { position: absolute; left: var(--r-services-link-x); top: var(--r-services-link-y); width: var(--r-services-link-w); height: var(--r-services-link-h); }
.r-service-repair-photo { position: absolute; left: var(--r-service-repair-photo-x); top: var(--r-service-repair-photo-y); width: var(--r-service-repair-photo-w); height: var(--r-service-repair-photo-h); }
.r-service-driveway-photo { position: absolute; left: var(--r-service-driveway-photo-x); top: var(--r-service-driveway-photo-y); width: var(--r-service-driveway-photo-w); height: var(--r-service-driveway-photo-h); }
.r-service-sand-photo { position: absolute; left: var(--r-service-sand-photo-x); top: var(--r-service-sand-photo-y); width: var(--r-service-sand-photo-w); height: var(--r-service-sand-photo-h); }
.r-service-wall-photo { position: absolute; left: var(--r-service-wall-photo-x); top: var(--r-service-wall-photo-y); width: var(--r-service-wall-photo-w); height: var(--r-service-wall-photo-h); }
.r-service-labels { position: absolute; left: var(--r-service-labels-x); top: var(--r-service-labels-y); width: var(--r-service-labels-w); height: var(--r-service-labels-h); }
.r-ledger-heading { position: absolute; left: var(--r-ledger-heading-x); top: var(--r-ledger-heading-y); width: var(--r-ledger-heading-w); height: var(--r-ledger-heading-h); }
.r-ledger-link { position: absolute; left: var(--r-ledger-link-x); top: var(--r-ledger-link-y); width: var(--r-ledger-link-w); height: var(--r-ledger-link-h); }
.r-ledger-kicker { position: absolute; left: var(--r-ledger-kicker-x); top: var(--r-ledger-kicker-y); width: var(--r-ledger-kicker-w); height: var(--r-ledger-kicker-h); }
.r-swatch-limestone { position: absolute; left: var(--r-swatch-limestone-x); top: var(--r-swatch-limestone-y); width: var(--r-swatch-limestone-w); height: var(--r-swatch-limestone-h); }
.r-swatch-grey { position: absolute; left: var(--r-swatch-grey-x); top: var(--r-swatch-grey-y); width: var(--r-swatch-grey-w); height: var(--r-swatch-grey-h); }
.r-swatch-sandstone { position: absolute; left: var(--r-swatch-sandstone-x); top: var(--r-swatch-sandstone-y); width: var(--r-swatch-sandstone-w); height: var(--r-swatch-sandstone-h); }
.r-swatch-charcoal { position: absolute; left: var(--r-swatch-charcoal-x); top: var(--r-swatch-charcoal-y); width: var(--r-swatch-charcoal-w); height: var(--r-swatch-charcoal-h); }
.r-swatch-labels { position: absolute; left: var(--r-swatch-labels-x); top: var(--r-swatch-labels-y); width: var(--r-swatch-labels-w); height: var(--r-swatch-labels-h); }
.r-footer-band { position: absolute; left: var(--r-footer-band-x); top: var(--r-footer-band-y); width: var(--r-footer-band-w); height: var(--r-footer-band-h); }