/* fixes-nov4: small layout repairs (Nov 4 2026). Each block names the page it serves. */

/* Gallery, phone: the carousel's reserved band (caption hang + arrow row, 83px, see carousel-arrows-phone.css) already
   sits under the photo, so the grid gap goes BELOW the arrow row, not above it. Before this the 20px photo margin pushed the
   arrows 20px lower and left them touching the first tile. The shell carries an inline margin from site.js, hence !important. */
@media (max-width: 767.98px) {
  body .gal-gridsec .photo-slider:not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_):not(#_) { margin-bottom: 0; }
  body .gal-gridsec .photo-slider-shell { margin-bottom: var(--gap) !important; }
}

/* Nov 5 call: on a laptop the proof strip sat a quarter of the way up the screen.
   Grow the service hero so that strip lands on the bottom edge of the first screen.
   Phone stays as it was. Exterior has no proof strip, so it is left out. */
/* Nov 6: the strip is one row only from 1200px up, and the old rule guessed its height (104px, it was 80px), which left a
   24px gap under it. The strip now has a set height, taller with larger icons, and the hero is sized from that same number. */
@media (min-width: 1200px) {
  :root { --proof-h: 120px; }
  body .proof-band.proof-band { height: var(--proof-h); padding-block: 0; box-sizing: border-box; display: grid; align-content: center; }
  body .proof-band .proof-band__list { width: 100%; gap: 20px; }
  body .proof-band .proof-band__list > li { gap: 12px; }
  body .proof-band .proof-band__list > li > svg.bi { width: 56px; height: 56px; }
  body .proof-band .proof-band__google { width: 56px; height: 56px; }
  body .proof-band .proof-band__google .gmark { width: 30px; height: 30px; }
  body .proof-band .proof-band__stars svg { width: 18px; height: 18px; }
  body.service-reference:not(.exterior-service) .sfc-hero.sfc-hero {
    min-height: calc(100svh - 100px - var(--proof-h));
    box-sizing: border-box;
  }
}

.look-wait {
  max-width: 62ch;
  margin: 0 auto 28px;
  text-align: center;
  color: var(--ink);
  font: 500 18px/1.5 var(--font-body);
}
.wood-note {
  max-width: 68ch;
  margin: 0 auto;
  font: 500 18px/1.55 var(--font-body);
  color: var(--ink);
}
.wood-note + .wood-note { margin-top: 14px; }

/* Nov 5 call (Cody): the metallic floor video from the home page rolls behind the Metallic Epoxy header.
   The photo shows until the video can play (motion.js fades it in); phones and reduced motion keep the photo. */
.sfc-hero .hero__media > video[data-svc-hero-video] { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0; }
@media (max-width: 767.98px), (prefers-reduced-motion: reduce) { .sfc-hero .hero__media > video[data-svc-hero-video] { display: none; } }

/* Nov 5 call: flake blends on the Exterior page (garage, basement, exterior and acrylic flake are the flake pages). */
.ex-flakes .look-bento { display: block; }

/* flex-wood twist removed: the wood diagram is now the interactive demo in css/flex-demo.css */