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

/* Typography baseline */
html, body{
  font-family:'Inter',sans-serif !important;
  max-width:100vw;
  overflow-x:hidden;
}
h1,h2,h3,h4,h5,h6,.font-serif{
  font-family:'DM Serif Display',serif !important;
}

/* ------------------------------
   Buttons
------------------------------ */
.btn-grad{
  background: linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  color:#111;
  border:1px solid var(--gold);
  border-radius:12px;
  padding:.75rem 1.25rem;
  font-weight:600;
  transition:opacity .2s ease, transform .2s ease;
}

@media (hover: hover) and (pointer: fine){
  .btn-grad:hover{ opacity:.9; }
}

@media (hover: none){
  .btn-grad:hover{ opacity:1; }
  #renovate-hero a:hover{
    border-color: rgba(255,255,255,.3) !important;
    opacity:1 !important;
  }
}

/* ------------------------------
   Reveal utilities
------------------------------ */
.reveal{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s ease;
}
.reveal.in-view{
  opacity:1 !important;
  transform:translateY(0) !important;
}

@media (prefers-reduced-motion: reduce){
  .reveal{
    opacity:1;
    transform:none;
    transition:none;
  }
}

/* ------------------------------
   HERO
------------------------------ */
#renovate-hero{
  position:relative;
  background:#000;
  background-image:url('../WebReadyPhotos/CustomHomeWeb/cutomhome_(63).webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}
@media (min-width:768px){
  #renovate-hero{ background-attachment:fixed; }
}

/* ------------------------------
   SERVICES Grid (controlled fade)
------------------------------ */
#reno-services{
  position:relative;
}
#reno-services .fade-item{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:var(--d,0ms);
}
#reno-services.in-view .fade-item{
  opacity:1;
  transform:none;
}

/* Hover effects – no overlays */
@media (hover: hover) and (pointer: fine){
  #reno-services a{
    border-color:transparent !important;
    box-shadow:none !important;
  }
  #reno-services a:hover img{ opacity:.6; }

  #reno-services a .card-sub{
    opacity:0;
    transform:translateY(4px);
    transition:opacity .3s ease, transform .3s ease;
  }
  #reno-services a:hover .card-sub{
    opacity:1;
    transform:translateY(0);
  }

  #reno-services .card-arrow{ display:none !important; }
}

/* --------- DESIGN PHILOSOPHY / CARD GRADIENT --------- */
.card-gradient-wrap {
  border-radius: 22px;
  padding: 1px;
  background: linear-gradient(180deg, #c8a45b, #e6cd8c, #ffffff) border-box;
}

.card-gradient-inner {
  border-radius: 21px;
  background: #000;
}

/* REMOVE BORDER WHEN CARD IS JUST AN IMAGE */
.card-gradient-wrap:has(img),
.card-gradient-wrap:has(picture){
  padding: 0;
  background: none;
}

.card-gradient-wrap:has(img) .card-gradient-inner,
.card-gradient-wrap:has(picture) .card-gradient-inner{
  border-radius: 22px;
  background: transparent;
}

/* ------------------------------
   CTA Sections
------------------------------ */
#renovations-cta .fade-item{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
}
#renovations-cta.in-view .fade-item{
  opacity:1;
  transform:none;
}

@media (prefers-reduced-motion: reduce){
  #renovations-cta .fade-item{
    opacity:1 !important;
    transform:none !important;
    transition:none !important;
  }
}

/* ------------------------------
   Ambient decorative halos
------------------------------ */
.halo-a{
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(200,164,91,.10), transparent 60%),
    radial-gradient(40% 30% at 80% 100%, rgba(255,251,227,.08), transparent 60%),
    radial-gradient(35% 25% at 10% 85%, rgba(200,164,91,.06), transparent 60%);
}
.halo-b{
  background:
    radial-gradient(40% 30% at 50% 8%, rgba(200,164,91,.10), transparent 70%),
    radial-gradient(35% 25% at 80% 90%, rgba(255,251,227,.06), transparent 70%);
}

/* ------------------------------
   Basement CTA border
------------------------------ */
#contact-cta-basement .fade-item{
  border-image:none !important;
  border:2px solid transparent;
  border-radius:1.5rem;
  background:
    linear-gradient(#000,#000) padding-box,
    linear-gradient(180deg,#c8a45b,#e6cd8c,#ffffff) border-box;
}

/* ------------------------------
   iPad Layout Fixes
------------------------------ */
@media (min-width:768px) and (max-width:1023px){
  #contact-cta .md\:grid-cols-\[1\.2fr_auto\],
  #renovations-cta .md\:grid-cols-\[1\.2fr_auto\],
  #projects-cta .md\:grid-cols-\[1\.2fr_auto\]{
    grid-template-columns:1fr !important;
  }

  #contact-cta .md\:text-left,
  #renovations-cta .md\:text-left,
  #projects-cta .md\:text-left{
    text-align:center !important;
  }

  #contact-cta .md\:mx-0,
  #renovations-cta .md\:mx-0,
  #projects-cta .md\:mx-0{
    margin-left:auto !important;
    margin-right:auto !important;
  }

  #contact-cta .md\:items-end,
  #renovations-cta .md\:items-end,
  #projects-cta .md\:items-end{
    align-items:center !important;
  }
}

/* =========================================
   RENOVATION SERVICES view pill
   Shows on touch + tablets
   Hides only on real hover desktops
   IMPORTANT:
   - removes all conflicting "tap-arrow" rules from this page
   - bottom-right placement like your Index page
   ========================================= */

/* Ensure cards can anchor absolute children */
#reno-services a{ position:relative; }

/* Base pill (hidden by default) */
#reno-services .tap-arrow{
  position:absolute;
  right:14px;
  bottom:14px;
  pointer-events:none;
  z-index:20;
  display:none;
}

#reno-services .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);
}

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

/* Show on phones + most tablets (including iPad) */
@media (hover:none){
  #reno-services .tap-arrow{ display:block; }
  #reno-services .tap-arrow__pill{ animation:tapHint 1.4s ease-out 1; }
}

/* Hide on true desktop hover devices */
@media (hover:hover) and (pointer:fine){
  #reno-services .tap-arrow{ display:none; }
}

@keyframes tapHint{
  0%{ opacity:0; transform:translate(10px,10px) scale(.98); }
  100%{ opacity:.92; transform:translateY(2px) scale(1); }
}
/* ===== Gradient text (CTA + headings) ===== */
.nlx-gradient-text{
  background: linear-gradient(
    180deg,
    #c8a45b 0%,
    #e6cd8c 45%,
    #ffffff 80%,
    #ffffff 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* prevents bottom clipping */
  padding-bottom: .08em;

  /* inherit heading weight */
  font-weight: inherit;
  font-family: inherit;
}

/* Safety: don’t let it break layout */
.nlx-gradient-text{
  white-space: normal;
  overflow-wrap: break-word;
}