/* JKDD Finish & Remodeling — V9 premium interaction layer
   Builds on the V7 visual system: scroll progress, textured dark sections,
   a gallery lightbox, magnetic buttons and refined micro-interactions. */

:root {
  --v9-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --v9-ease: cubic-bezier(.16, 1, .3, 1);
}

/* Scroll progress */
.home-page .scroll-progress {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 210;
  height: 2.5px;
  background: rgba(29, 28, 24, .06);
}

.home-page .scroll-progress span {
  display: block;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--v7-wood, #8b5d3c), var(--v7-brass, #b58a4f));
  will-change: transform;
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .scroll-progress span {
    transition: transform .12s linear;
  }
}

/* Back to top */
.home-page .back-to-top {
  position: fixed;
  right: clamp(16px, 3vw, 32px);
  bottom: clamp(84px, 9vw, 112px);
  z-index: 60;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 1px solid var(--v7-line, rgba(46, 40, 31, .14));
  border-radius: 999px;
  background: rgba(255, 253, 249, .92);
  color: var(--v7-ink, #1d1c18);
  font-size: 17px;
  box-shadow: 0 14px 34px rgba(40, 32, 20, .16);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  backdrop-filter: blur(10px);
  transition: opacity .28s var(--v9-ease), transform .28s var(--v9-ease), background-color .2s ease;
}

.home-page .back-to-top.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.home-page .back-to-top:hover {
  background: var(--v7-dark, #24221d);
  color: #fff;
  border-color: var(--v7-dark, #24221d);
}

@media (max-width: 640px) {
  .home-page .back-to-top {
    bottom: 78px;
    width: 44px;
    height: 44px;
  }
}

/* Hero scroll cue */
.home-page .hero-visual {
  position: relative;
}

.home-page .scroll-cue {
  position: absolute;
  left: 50%;
  bottom: 26px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  color: rgba(255, 255, 255, .82);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
  transform: translateX(-50%);
}

.home-page .scroll-cue::after {
  content: "";
  width: 1px;
  height: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,.9), transparent);
}

@media (prefers-reduced-motion: no-preference) {
  .home-page .scroll-cue::after {
    animation: v9-cue 1.8s var(--v9-ease) infinite;
  }
}

@keyframes v9-cue {
  0% { transform: scaleY(0); transform-origin: top; opacity: 0; }
  40% { transform: scaleY(1); transform-origin: top; opacity: 1; }
  60% { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0; }
}

@media (max-width: 980px) {
  .home-page .scroll-cue { display: none; }
}

/* Buttons — refined sheen + magnetic hover */
.home-page .button {
  position: relative;
  overflow: hidden;
  transition: transform .35s var(--v9-ease), box-shadow .35s var(--v9-ease), background-color .25s ease, border-color .25s ease;
}

.home-page .button-gold,
.home-page .button-dark {
  box-shadow: 0 1px 0 rgba(255,255,255,.06) inset;
}

.home-page .button-gold:hover,
.home-page .button-dark:hover {
  box-shadow: 0 16px 32px rgba(30, 24, 16, .22);
}

.home-page .button span[aria-hidden] {
  display: inline-block;
  transition: transform .3s var(--v9-ease);
}

.home-page .button:hover span[aria-hidden] {
  transform: translate(3px, -2px);
}

/* Section seams — soft blend between adjoining panels */
.home-page .section,
.home-page .manifesto,
.home-page .process,
.home-page .portfolio,
.home-page .contact {
  position: relative;
}

/* Service areas — textured dark panel */
.home-page .service-areas {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(120deg, rgba(20, 18, 15, .92), rgba(31, 26, 19, .86)),
    url("assets/photos/crown-molding.webp") center 30% / cover no-repeat;
}

.home-page .service-areas::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--v9-grain);
  opacity: .05;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.home-page .service-areas-copy,
.home-page .area-list {
  position: relative;
  z-index: 1;
}

.home-page .area-list li {
  transition: transform .3s var(--v9-ease), color .2s ease;
}

.home-page .area-list li:hover {
  transform: translateX(4px);
  color: #fff;
}

.home-page .area-list a {
  position: relative;
}

.home-page .area-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: var(--v7-brass, #b58a4f);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--v9-ease);
}

.home-page .area-list a:hover::after,
.home-page .area-list a:focus-visible::after {
  transform: scaleX(1);
}

/* Gallery — lightbox trigger affordance */
.home-page .gallery-card {
  position: relative;
}

.home-page .gallery-expand {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 18, 15, .55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: zoom-in;
  opacity: 0;
  transform: translateY(-6px);
  backdrop-filter: blur(6px);
  transition: opacity .25s ease, transform .25s ease, background-color .2s ease;
}

.home-page .gallery-card:hover .gallery-expand,
.home-page .gallery-card:focus-within .gallery-expand,
.home-page .gallery-expand:focus-visible {
  opacity: 1;
  transform: translateY(0);
}

.home-page .gallery-expand:hover {
  background: var(--v7-wood, #8b5d3c);
}

.home-page .gallery-card img {
  transition: transform .6s var(--v9-ease);
}

@media (hover: hover) {
  .home-page .gallery-card:hover img {
    transform: scale(1.035);
  }
}

/* Lightbox dialog */
.home-page .lightbox {
  max-width: min(1180px, calc(100vw - 40px));
  max-height: calc(100svh - 40px);
  padding: 0;
  border: 0;
  border-radius: 18px;
  overflow: hidden;
  background: var(--v7-dark, #24221d);
  box-shadow: 0 40px 90px rgba(10, 8, 6, .45);
}

.home-page .lightbox::backdrop {
  background: rgba(15, 13, 10, .78);
  backdrop-filter: blur(6px);
}

.home-page .lightbox-frame {
  position: relative;
  display: flex;
  flex-direction: column;
  max-height: calc(100svh - 40px);
}

.home-page .lightbox-frame img {
  display: block;
  width: 100%;
  max-height: calc(100svh - 128px);
  object-fit: contain;
  background: #14120f;
}

.home-page .lightbox-caption {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px 16px;
  padding: 16px 22px;
  color: rgba(255, 255, 255, .88);
  font-size: 13px;
}

.home-page .lightbox-caption strong {
  font-weight: 700;
  letter-spacing: .01em;
}

.home-page .lightbox-caption a {
  color: rgba(255, 255, 255, .62);
  font-size: 11px;
  letter-spacing: .06em;
  text-decoration: none;
}

.home-page .lightbox-caption a:hover {
  color: #fff;
}

.home-page .lightbox-close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(20, 18, 15, .6);
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  transition: background-color .2s ease, transform .2s ease;
}

.home-page .lightbox-close:hover {
  background: var(--v7-wood, #8b5d3c);
  transform: scale(1.05);
}

/* Footer polish */
.home-page .site-footer {
  position: relative;
  overflow: hidden;
}

/* The generic .home-page h2 display rule (large serif heading) was
   unintentionally winning over the small uppercase footer label style
   because both rules share specificity and v7 loads later. Restore the
   compact label treatment here with higher specificity. */
.home-page .footer-column h2 {
  margin: 0 0 10px;
  font-family: var(--v7-sans, "Avenir Next", sans-serif);
  font-size: 10px;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: .16em;
  color: var(--v7-brass, #b58a4f);
  text-transform: uppercase;
}

.home-page .site-footer::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--v9-grain);
  opacity: .035;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.home-page .footer-main,
.home-page .footer-bottom {
  position: relative;
  z-index: 1;
}

.home-page .footer-column a {
  position: relative;
  transition: color .2s ease, padding-left .25s var(--v9-ease);
}

.home-page .footer-column a:hover {
  padding-left: 6px;
  color: var(--v7-brass, #b58a4f);
}

@media (prefers-reduced-motion: reduce) {
  .home-page .scroll-progress span,
  .home-page .back-to-top,
  .home-page .button,
  .home-page .gallery-card img,
  .home-page .area-list li,
  .home-page .footer-column a {
    transition: none !important;
    animation: none !important;
  }
}