/* ================================
   Flooring custom styles
   ================================ */

/* ---------- Mobile utility bar & nav tweaks ---------- */
@media (max-width: 768px) {
  /* Grey utility bar */
  .swd-top .swd-bar { padding: 6px 10px !important; }
  .swd-top .swd-bar .brand img { height: 36px !important; width: auto !important; }
  .swd-top .swd-bar .swd-button { padding: 4px 8px !important; font-size: 14px !important; }

  /* Main black nav bar */
  nav.swd-bar.swd-large { line-height: 1.2 !important; }
  nav.swd-bar .swd-button { padding: 8px 10px !important; font-size: 15px !important; }
}

/* Hide only the right links in the grey utility bar on XS phones,
   but keep the hamburger menu in the black nav */
@media (max-width: 480px) {
  .swd-top > .swd-bar.swd-grey .swd-right { display: none !important; }
  .swd-top nav.swd-bar .swd-right { display: inline-block !important; }
}

/* ================================
   Flooring hero (matches blog heroes)
   ================================ */
.hero { position: relative; overflow: hidden; }

/* Slides wrapper (needed for swd.js) */
.hero .slide-layer { position: relative; }

/* Each slide hidden by default; JS toggles visibility */
.hero .mySlides {
  position: absolute; inset: 0;
  display: none;
  z-index: 1;
}

/* Safety: if JS hasn’t run yet, show the first slide */
.hero .mySlides:first-child { display: block; }

/* Images fill the hero without distortion */
.hero .mySlides picture,
.hero .mySlides img {
  width: 100%; height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay centered over the slide */
.hero .hero-overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 16px;
  z-index: 2;
  pointer-events: none;
}
.hero .hero-overlay .swd-button { pointer-events: auto; }

/* ---------- Mobile sizing ---------- */
@media (max-width: 768px) {
  .hero { min-height: 56vh; }
  .hero .hero-box h1 { font-size: clamp(22px, 6vw, 30px); }
  .hero .hero-box p  { font-size: clamp(14px, 4vw, 16px); }
  .hero .swd-button  { padding: 6px 12px; font-size: 14px; }
}
/* ===== Hero baseline ===== */
.hero {
  position: relative;
  min-height: clamp(360px, 52vh, 720px);
  overflow: clip;
  isolation: isolate; /* so z-index inside works predictably */
}

/* The image layer fills the hero */
.hero .slide-layer {
  position: absolute;
  inset: 0;
}

/* Each slide occupies the hero area */
.hero .mySlides {
  position: absolute;
  inset: 0;
  display: none; /* JS will turn one on */
}

/* Fallback: show the first slide if JS doesn't touch it */
.hero .mySlides:first-child { display: block; }

/* Make images cover the frame */
.hero picture, 
.hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Overlay centered content */
.hero .hero-overlay {
  position: relative;
  z-index: 2;
  display: grid;
  place-items: center;
  min-height: inherit;
  padding: 2rem;
}

.hero .hero-box {
  max-width: 720px;
  background: color-mix(in oklab, #000 25%, transparent);
  /* Fallback for older browsers */
  background: rgba(0,0,0,0.25);
  color: #fff;
  padding: clamp(1rem, 3vw, 2rem);
  border-radius: 16px;
  backdrop-filter: blur(3px);
}

.hero .hero-box h1 { margin: 0 0 .5rem 0; }
.hero .hero-box p  { margin: 0 0 1rem 0; }

/* Optional: ensure hero sits above other positioned elements */
.hero::after { content:""; position:absolute; inset:0; z-index:1; }
/* ==== Flooring hero safe baseline ==== */
.hero {
  position: relative;
  min-height: clamp(360px, 52vh, 720px);
  height: 70vh;            /* adjust if you want taller/shorter */
  overflow: hidden;
  color: #fff;
  isolation: isolate;       /* keeps overlay z-index predictable */
}

/* Slide layer fills hero */
.hero .slide-layer { position: absolute; inset: 0; }

/* Each slide fills the hero; hidden by default */
.hero .mySlides {
  position: absolute;
  inset: 0;
  display: none;
}

/* Fallback: first slide shows even if JS fails */
.hero .mySlides:first-child { display: block; }

/* Image scaling */
.hero picture,
.hero img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  filter: brightness(.78);   /* darken for readability */
}

/* Overlay sits above slides */
.hero .hero-overlay {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 1.5rem;
  z-index: 2;
}

.hero .hero-box {
  max-width: 720px;
  background: rgba(0,0,0,.28);
  border-radius: 14px;
  padding: clamp(1rem, 3vw, 2rem);
  backdrop-filter: blur(3px);
}
/* iPad 2/WebKit paint fix: force first slide visible when wrapped */
.slide-layer .mySlides:first-child { 
  display: block !important;
}
/* Nudge Safari to paint the layer immediately */
.slide-layer {
  -webkit-transform: translateZ(0);
  will-change: transform;
}
.hero .mySlides img {
  -webkit-backface-visibility: hidden;
}
/* global image sizing — add the missing % */
img { max-width: 100%; height: auto; }
/* Desktop/laptop: reduce hero height so less vertical crop */
@media (min-width: 992px) {
  .hero {
    /* was ~80vh; this shows more of the photo on wide screens */
    height: clamp(420px, 56vh, 760px);
  }
  /* Focus point (center a bit higher so faces/subjects show more) */
  .hero .mySlides img {
    object-fit: cover;
    object-position: 50% 38%; /* tweak 30–45% to taste */
  }
}

/* Ultra-wide viewports: lock hero to 16:9 so it doesn’t feel stretched */
@media (min-aspect-ratio: 16/9) and (min-width: 1100px) {
  .hero {
    height: calc(100vw * 9 / 16); /* exact 16:9 frame */
  }
}
/* Blog cards */
.swd-card img { display:block; width:100%; height:auto; }
.muted { color: #76807a; }
#formMsg a { text-decoration: underline; }
/* Featured project thumbnails – unify size */
.why-col img,
.card.swd-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16/9;   /* All cards same rectangle */
  object-fit: cover;    /* Crop edges to fit */
  border-radius: 6px;   /* Optional – matches card style */
}