/* === Page vars === */
:root{
  --gold:#c8a45b; --gold2:#e6cd8c; --cream:#fffbe3;
}

/* Base */
html,body{
  max-width:100vw; overflow-x:hidden; background:#000; color:#fff;
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}
h1,h2,h3,h4,h5,h6,.font-serif{ font-family:"DM Serif Display", serif; }
img{ -webkit-user-drag:none; user-select:none; }

/* Stable scrollbar */
html{ overflow-y:scroll; scrollbar-gutter:stable; }
body{ overflow-y:visible; }

/* Sections unwrap */
#custom-hero, #duplex-hero, #fourplex-hero, #single-hero, #singlefamily-hero,
#why-custom, #why-duplex, #why-fourplex, #why-single, #why-singlefamily,
#custom-lifestyle, #duplex-lifestyle, #fourplex-lifestyle, #single-lifestyle, #singlefamily-lifestyle,
#past-projects, #faq, #contact-cta{
  overflow-y:visible;
  contain:initial;
}

/* =========================================================
   HERO fade system (matches your nlx-reveal / nlx-in pattern)
   ========================================================= */
[id$='-hero'] .hero-item{
  opacity:0;
  transform:translateY(10px);
  will-change:opacity,transform;
  transition:opacity .7s ease, transform .7s ease;
}

/* When hero section becomes "in", reveal its hero-items */
[id$='-hero'].nlx-in .hero-item{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion:reduce){
  [id$='-hero'] .hero-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* Duplex hero lock */
#duplex-hero{
  position:relative;
  overflow:visible !important;
  contain:initial !important;
  background-attachment:fixed;
  background-position:center;
  background-repeat:no-repeat;
  background-size:cover;
}
#duplex-hero .duplex-hero-bg{
  position:fixed; inset:0; z-index:-1;
  background:inherit;
  background-position:inherit;
  background-repeat:no-repeat;
  background-size:cover;
  will-change:transform;
}

/* Parallax fix */
.parallax-ancestor-fix{ transform:none !important; filter:none !important; }

/* Reveals */
.js .nlx-reveal{
  opacity:0; transform:translateY(12px);
  transition:opacity .6s ease, transform .6s ease;
  will-change:opacity, transform;
}
.nlx-reveal.nlx-in{ opacity:1; transform:none; }
@media (prefers-reduced-motion: reduce){
  .js .nlx-reveal{
    opacity:1 !important; transform:none !important; transition:none !important;
  }
}

/* ===== Past Projects Hover ===== */
#past-projects .pp-card{
  position:relative; overflow:hidden;
  border-radius:1rem; isolation:isolate;
}
#past-projects .pp-img{
  display:block; width:100%; height:100%; object-fit:cover;
  filter:brightness(1); transition:filter .3s ease;
}
#past-projects .pp-overlay{
  position:absolute; inset:0; z-index:2;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  pointer-events:none; opacity:0; transition:opacity .3s ease; background:transparent;
}
#past-projects .pp-cta{
  color:rgba(255,255,255,.95); font-size:.95rem; font-weight:500;
  line-height:1.2; opacity:0; transition:opacity .3s ease;
}
#past-projects .pp-sub{
  margin-top:.35rem; color:rgba(255,255,255,.9);
  font-size:.9rem; font-weight:400; line-height:1.2;
  transform:translateY(10px); opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}
@media (hover:hover) and (pointer:fine){
  #past-projects .pp-card:hover .pp-img{ filter:brightness(.6); }
  #past-projects .pp-card:hover .pp-overlay{ opacity:1; }
  #past-projects .pp-card:hover .pp-cta{ opacity:1; }
  #past-projects .pp-card:hover .pp-sub{ opacity:1; transform:translateY(0); }
}
@media (hover:none){
  #past-projects .pp-img{ filter:brightness(.9); }
}

/* ===== Lifestyle Cards ===== */
#custom-lifestyle .card,
#duplex-lifestyle .card,
#fourplex-lifestyle .card,
#single-lifestyle .card,
#singlefamily-lifestyle .card{
  background-image:radial-gradient(120% 120% at 0% 0%, rgba(200,164,91,0.06), transparent 60%);
  box-shadow: inset 0 0 0 1px rgba(200,164,91,.12), 0 8px 28px rgba(0,0,0,.35);
}
#custom-lifestyle .card-title,
#duplex-lifestyle .card-title,
#fourplex-lifestyle .card-title,
#single-lifestyle .card-title,
#singlefamily-lifestyle .card-title{
  position:relative; text-shadow:0 1px 0 rgba(255,255,255,.04);
}
#custom-lifestyle .card-title::after,
#duplex-lifestyle .card-title::after,
#fourplex-lifestyle .card-title::after,
#single-lifestyle .card-title::after,
#singlefamily-lifestyle .card-title::after{
  content:""; display:block; height:2px; width:54px; margin-top:.5rem; border-radius:9999px;
  background:linear-gradient(90deg,#c8a45b 0%, #e6cd8c 60%, rgba(255,255,255,0) 100%); opacity:.9;
}
#custom-lifestyle .card-copy,
#duplex-lifestyle .card-copy,
#fourplex-lifestyle .card-copy,
#single-lifestyle .card-copy,
#singlefamily-lifestyle .card-copy{
  color:rgba(228,228,231,.94); text-shadow:0 1px 0 rgba(0,0,0,.25); max-width:40ch;
}
@media (min-width:1280px) and (hover:hover) and (pointer:fine){
  #custom-lifestyle article,
  #duplex-lifestyle article,
  #fourplex-lifestyle article,
  #single-lifestyle article,
  #singlefamily-lifestyle article{
    transform:translateZ(0); transition:transform .25s ease, box-shadow .25s ease;
  }
  #custom-lifestyle article:hover,
  #duplex-lifestyle article:hover,
  #fourplex-lifestyle article:hover,
  #single-lifestyle article:hover,
  #singlefamily-lifestyle article:hover{
    transform:translateY(-4px);
  }
  #custom-lifestyle .card:hover .card-title::after,
  #duplex-lifestyle .card:hover .card-title::after,
  #fourplex-lifestyle .card:hover .card-title::after,
  #single-lifestyle .card:hover .card-title::after,
  #singlefamily-lifestyle .card:hover .card-title::after{
    width:72px; opacity:1; transition:width .25s ease, opacity .25s ease;
  }
}
@media (max-width:1279.98px){
  #custom-lifestyle .card-title::after,
  #duplex-lifestyle .card-title::after,
  #fourplex-lifestyle .card-title::after,
  #single-lifestyle .card-title::after,
  #singlefamily-lifestyle .card-title::after{
    width:54px !important; opacity:.9 !important; transition:none !important;
  }
}
@media (max-width:1279.98px), (hover:none), (pointer:coarse){
  #custom-lifestyle .card-title::after,
  #duplex-lifestyle .card-title::after,
  #fourplex-lifestyle .card-title::after,
  #single-lifestyle .card-title::after,
  #singlefamily-lifestyle .card-title::after{
    margin-left:auto; margin-right:auto;
  }
}
@media (min-width:1280px){
  #custom-lifestyle .card-title::after,
  #duplex-lifestyle .card-title::after,
  #fourplex-lifestyle .card-title::after,
  #single-lifestyle .card-title::after,
  #singlefamily-lifestyle .card-title::after{
    margin-left:0; margin-right:0;
  }
}

/* FAQ */
#faq, #faq *{ overflow-y:visible; }
#faq summary:focus-visible{ outline:2px solid var(--gold); outline-offset:8px; border-radius:.5rem; }
@media (prefers-reduced-motion: reduce){
  #faq .group p{ opacity:1 !important; transform:none !important; transition:none !important; }
}

/* ===== CONTACT CTA GRADIENT BORDER ===== */
.nlx-gradient-border{
  position:relative; border-radius:1.25rem; padding:2px;
  background:linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
}
.nlx-gradient-border>.nlx-border-inner{
  border-radius:calc(1.25rem - 2px); background:#000;
}

/* ===== FIXED: GRADIENT TEXT MUST MATCH HEADING WEIGHT ===== */
#contact-cta h2 .nlx-gradient-text{
  font-family: inherit;
  font-weight: inherit;
  -webkit-text-stroke: 0 transparent;
}

/* Hide scrollbar in mobile menu */
#mobile-menu{ scrollbar-width:none; }
#mobile-menu::-webkit-scrollbar{ width:0; height:0; }

/* Turn off parallax on mobile */
@media (max-width:767.98px){
  #duplex-hero{ background-attachment:scroll !important; }
  #duplex-hero .duplex-hero-bg{ position:absolute !important; inset:0; }
}

/* Disable hover transforms on touch */
@media (hover:none), (pointer:coarse){
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .hover\:-translate-y-1:hover,
  .hover\:opacity-90:hover,
  .hover\:shadow:hover,
  .hover\:shadow-lg:hover,
  .hover\:shadow-2xl:hover,
  .hover\:bg-white:hover,
  .hover\:text-black:hover,
  .hover\:border-white\/60:hover{
    transform:none !important; opacity:1 !important;
    box-shadow:none !important; background:inherit !important;
    color:inherit !important; border-color:inherit !important;
  }
}

/* Gradient text */
.nlx-gradient-text{
  background:linear-gradient(180deg,#c8a45b,#e6cd8c,#ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

/* ===== iPad Layout Fix ===== */
@media (min-width:768px) and (max-width:1023px){
  #contact-cta .md\:grid-cols-\[1\.2fr_auto\]{ grid-template-columns:1fr !important; }
  #contact-cta .md\:text-left{ text-align:center !important; }
  #contact-cta .md\:mx-0{ margin-left:auto !important; margin-right:auto !important; }
  #contact-cta .md\:items-end{ align-items:center !important; }
}

/* =========================================
   Touch-only hint: gold "View →" pill
   ========================================= */
#what-we-build .tap-arrow,
#reno-services .tap-arrow,
#past-projects .tap-arrow{
  position:absolute;
  right:14px;
  bottom:14px;
  pointer-events:none;
  z-index:10;
}

#what-we-build .tap-arrow__pill,
#reno-services .tap-arrow__pill,
#past-projects .tap-arrow__pill{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 12px;
  border-radius:9999px;
  font-weight:600;
  font-size:14px;
  letter-spacing:.02em;
  color:#0b0b0b;
  background:linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  box-shadow:0 10px 22px rgba(0,0,0,.35);
  opacity:.92;
  transform:translateY(2px);
}

.tap-arrow__icon{ font-size:16px; line-height:1; }

#what-we-build .tap-arrow,
#reno-services .tap-arrow,
#past-projects .tap-arrow{ display:none; }

@media (hover:none) and (pointer:coarse){
  #what-we-build .tap-arrow,
  #reno-services .tap-arrow,
  #past-projects .tap-arrow{ display:block; }

  #what-we-build .tap-arrow__pill,
  #reno-services .tap-arrow__pill,
  #past-projects .tap-arrow__pill{ animation:tapHint 1.4s ease-out 1; }
}

@keyframes tapHint{
  0%{ opacity:0; transform:translate(10px,10px) scale(.98); }
  100%{ opacity:.92; transform:translateY(2px) scale(1); }
}

/* Ensure cards are anchors */
#what-we-build a,
#reno-services a,
#past-projects a{ position:relative; }

/* =========================
   Per-word gradient (FINAL)
   ========================= */
.nlx-wordgrad{
  display:inline-block;
  background:linear-gradient(180deg,var(--gold) 0%, var(--gold2) 50%, #fff 80%, #fff 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;

  /* fixes desktop clipping */
  padding-bottom:.08em;

  /* spacing handled by normal spaces in HTML */
  margin-right:0;
}
/* =========================
   Per-word gradient (matched, less white)
   ========================= */
.nlx-wordgrad{
  display:inline-block;
  background:linear-gradient(
    180deg,
    var(--gold) 0%,
    var(--gold2) 45%,
    #fff 72%,
    #fff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;

  /* fixes desktop clipping */
  padding-bottom:.08em;
  margin-right:0;
}

/* =========================
   Gradient text (match nlx-wordgrad)
   ========================= */
.nlx-gradient-text{
  background:linear-gradient(
    180deg,
    var(--gold) 0%,
    var(--gold2) 45%,
    #fff 72%,
    #fff 100%
  );
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;

  /* keeps the same visual weight */
  padding-bottom:.08em;
}

/* =========================================================
   NovaLuxe — HERO fade (Custom/Duplex/Fourplex/Single pages)
   Works with your JS that adds: hero.classList.add('hero-in')
   Applies to ANY hero section whose id ends with "-hero"
   ========================================================= */

/* Base hidden state for hero items */
section[id$="-hero"] .hero-item{
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}

/* When JS adds hero-in to the hero section */
section[id$="-hero"].hero-in .hero-item{
  opacity: 1;
  transform: none;
}

/* Reduce motion: show immediately */
@media (prefers-reduced-motion: reduce){
  section[id$="-hero"] .hero-item{
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }
}

/* TOUCH: force true centered cards + true centered text blocks */
@media (hover:none) and (pointer:coarse){

  /* apply to ALL lifestyle sections */
  [id$="-lifestyle"] .card{
    text-align:center !important;
    align-items:center !important;  /* since cards are flex-col */
  }

  /* this is the key fix */
  [id$="-lifestyle"] .card-copy{
    max-width: 42ch !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }

  /* keep title underline centered */
  [id$="-lifestyle"] .card-title::after{
    margin-left:auto !important;
    margin-right:auto !important;
  }
}