/* ==========================================================================
   SPD BUILDER SERVICES — CENTRAL IMAGE CONFIGURATION
   --------------------------------------------------------------------------
   THIS IS THE ONLY FILE YOU NEED TO TOUCH TO SWAP PHOTOGRAPHY.

   Every photograph on the site is referenced through one of the custom
   properties below. To replace a placeholder with real SPD photography:

     OPTION A (easiest) — drop your photo into assets/img/photos/ using the
     exact same filename. Nothing else changes.

     OPTION B — keep your own filename and edit the url() below.

   Recommended sizes are noted on each line. Use JPG, quality ~82, and keep
   each file under ~400 KB so the site stays fast.
   ========================================================================== */

:root {
  /* HERO — wide. Modern commercial building / bright finished office interior.
     Recommended: 2000 x 1250 (16:10), landscape. */
  --img-hero: url("../img/photos/hero-commercial.jpg");

  /* COMMERCIAL — open plan office, polished floors, glass.
     Recommended: 1600 x 1200 (4:3). */
  --img-commercial: url("../img/photos/commercial-office.jpg");

  /* COMMERCIAL DETAIL — portrait. Glass, mullions, a finished interior detail.
     Recommended: 1400 x 1750 (portrait). */
  --img-commercial-detail: url("../img/photos/commercial-detail.jpg");

  /* CONSTRUCTION — currently ZIP System sheathing photo by Ted Balmer on
     Unsplash (Unsplash License, no attribution required).
     Recommended: 1600 x 1200 (4:3). */
  --img-construction: url("../img/photos/construction-zip.jpg");

  /* RESIDENTIAL — bright, tidy home interior. Recommended: 1600 x 1200. */
  --img-residential: url("../img/photos/residential-interior.jpg");

  /* SERVICE AREA — Central Arkansas architecture / local landscape.
     Recommended: 1600 x 1000 (16:10). */
  --img-area: url("../img/photos/service-area.jpg");

  /* ABOUT — portrait orientation. Team, truck, or a finished space.
     Recommended: 1400 x 1500 (portrait-ish). */
  --img-about: url("../img/photos/about-sam-miranda-wedding.jpg");
}

/* --- Bindings. Do not edit below unless adding a new image slot. --------- */
.img--hero         { background-image: var(--img-hero); }
.img--commercial   { background-image: var(--img-commercial); }
.img--commercial-detail { background-image: var(--img-commercial-detail); }
.img--construction { background-image: var(--img-construction); }
.img--residential  { background-image: var(--img-residential); }
.img--area         { background-image: var(--img-area); }
.img--about        { background-image: var(--img-about); background-position: 50% 22%; }