/* =========================================
   Index page — font baseline (LOCKED + CONSISTENT)
   Goal
   - Default = Inter everywhere
   - Serif ONLY when you opt in with .font-serif or .nlx-section-title
   - Prevent serif “bleeding” into random text
   - Fix: serif weight should NOT force 700 on every child
   ========================================= */

:root{
  --gold:#c8a45b;
  --gold2:#e6cd8c;
  --cream:#fffbe3;
}

/* ---------------------------
   Base typography (Inter)
   --------------------------- */
html,body{
  font-family:'Inter',sans-serif;
  font-weight:400;
  background:#000;
  color:#fff;
  max-width:100vw;
  overflow-x:hidden;

  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:geometricPrecision;
}

/* Force Inter everywhere by default (but let explicit classes win) */
body :where(*){ font-family:inherit; }

/* ---------------------------
   Serif opt-in (titles only)
   IMPORTANT:
   - No blanket bolding on children
   - No forcing serif onto all descendants (prevents weird NovaLuxe/gradient issues)
   --------------------------- */
.font-serif,
.nlx-section-title{
  font-family:'DM Serif Text',serif !important;
  letter-spacing:-0.01em;
}

/* If you want title text bold, do it ONLY on the element you add the class to */
h1.font-serif,
h2.font-serif,
h3.font-serif,
h1.nlx-section-title,
h2.nlx-section-title,
h3.nlx-section-title{
  font-weight:700 !important;
}

/* Optional helper: make a whole block serif (use this if you truly want description = title font) */
.nlx-serif-block{ font-family:'DM Serif Text',serif !important; }

/* Images */
img{ -webkit-user-drag:none; user-select:none; }

/* =========================================
   Fades
   ========================================= */
.fade-item,.reveal{
  opacity:0;
  transform:translateY(10px);
  transition:opacity .6s ease, transform .6s ease;
  transition-delay:var(--d,0ms);
}
.in-view .fade-item,
.in-view .reveal{
  opacity:1;
  transform:none;
}

/* Hero stagger */
#home-hero .hero-item{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
#home-hero.hero-in .hero-item{
  opacity:1;
  transform:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-item,.reveal,#home-hero .hero-item{
    transition:none !important;
    opacity:1 !important;
    transform:none !important;
  }
}

/* =========================================
   Utilities
   ========================================= */
.nlx-gradient-text{
  background:linear-gradient(180deg,var(--gold),var(--gold2),#ffffff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}

.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;
}

.nlx-divider{
  height:2px;
  width:100%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);
  border-radius:2px;
}

.nlx-gold-heading{ color:#e9d39c; }

.nlx-gold-underline{
  position:relative;
  transition:color .2s ease;
}
.nlx-gold-underline:hover{ color:#e6cd8c; }
.nlx-gold-underline::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-2px;
  width:100%;
  height:2px;
  border-radius:2px;
  background:linear-gradient(90deg,var(--gold),var(--gold2),#fff);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .25s ease;
}
.nlx-gold-underline:hover::after{ transform:scaleX(1); }

.nlx-pill{
  display:inline-grid;
  place-items:center;
  width:40px;
  height:40px;
  border-radius:9999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.15);
  backdrop-filter:saturate(120%) blur(2px);
  transition:transform .2s ease, background .2s ease, border-color .2s ease;
}
@media (hover:hover){
  .nlx-pill:hover{
    transform:translateY(-2px);
    background:rgba(255,255,255,.12);
    border-color:rgba(255,255,255,.35);
  }
}

:where(a,button):focus-visible{
  outline:none;
  box-shadow:0 0 0 2px rgba(0,0,0,.9), 0 0 0 4px rgba(200,164,91,.55);
  border-radius:12px;
}

/* =========================================
   Hero background
   ========================================= */
#home-hero{ position:relative; }
#home-hero .hero-bg{
  position:absolute;
  inset:0;
  background-image:url('WebReadyPhotos/CustomHomeWeb/customhome_(87).webp');
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  -webkit-mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
          mask-image:linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 70%, rgba(0,0,0,0) 100%);
}
#home-hero .hero-bg::after{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.6);
}
@media (min-width:1280px){
  #home-hero .hero-bg{ background-attachment:fixed; }
}

/* =========================================
   Unified card hover (What We Build + Past Projects)
   ========================================= */
#what-we-build .group,
#past-projects .pp-card{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  isolation:isolate;
}

#what-we-build .group img,
#past-projects .pp-card .pp-img{
  display:block;
  transform-origin:center;
  filter:brightness(1);
  transition:filter .3s ease;
}

#what-we-build .group .opacity-0{
  transition:opacity .3s ease, transform .3s ease;
  transform:translateY(10px);
}

#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;
  background:transparent;
  transition:opacity .3s ease;
}

#past-projects .pp-sub{
  color:rgba(255,255,255,.9);
  font-size:.9rem;
  transform:translateY(10px);
  opacity:0;
  transition:opacity .3s ease, transform .3s ease;
}

@media (hover:hover) and (pointer:fine){
  #what-we-build .group:hover img,
  #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-sub{
    opacity:1;
    transform:translateY(0);
  }

  #what-we-build .group:hover .opacity-0{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}

@media (hover:none){
  #what-we-build .group img,
  #past-projects .pp-card .pp-img{ filter:brightness(.9); }
}

/* =========================================
   Renovation Services hovers
   ========================================= */
#reno-services a.fade-item img{
  transition:filter .3s ease;
  filter:brightness(1);
}
#reno-services .card-sub{
  opacity:0;
  transform:translateY(6px);
  transition:opacity .3s ease, transform .3s ease;
}
#reno-services .card-arrow{
  opacity:0;
  transform:translateX(10px);
  transition:opacity .3s ease, transform .3s ease;
}

@media (hover:hover) and (pointer:fine){
  #reno-services a.fade-item:hover img{ filter:brightness(.6); }
  #reno-services a.fade-item:hover .card-sub{ opacity:1; transform:translateY(0); }
  #reno-services a.fade-item:hover .card-arrow{ opacity:1; transform:translateX(0); }
}

#reno-services a.fade-item:focus-visible img{ filter:brightness(.6); }
#reno-services a.fade-item:focus-visible .card-sub{ opacity:1; transform:translateY(0); }
#reno-services a.fade-item:focus-visible .card-arrow{ opacity:1; transform:translateX(0); }

@media (hover:none){
  #reno-services a.fade-item img{ filter:brightness(.9); }
}

/* =========================================
   iPad Mini / iPad Air centered CTA layout
   ========================================= */
@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 hint 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;
  display:none;
}

#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;
}

@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; }

/* =========================================
   Past Projects title behavior
   ========================================= */

/* Mobile only: keep gradient words together on new line */
@media (max-width:767px){
  #past-projects h2 > span{
    display:block;
    white-space:nowrap;
  }
}

/* Desktop only: underline matches title width */
@media (min-width:768px){
  #past-projects h2 + .fade-item.flex{ display:none !important; }

  #past-projects h2{
    display:inline-block;
    position:relative;
    margin-bottom:1.75rem;
  }

  #past-projects h2::after{
    content:"";
    display:block;
    height:4px;
    width:100%;
    margin-top:16px;
    border-radius:999px;
    background:linear-gradient(90deg,#c8a45b,#fffbe3,#c8a45b);
  }
}


/* =========================================
   NOTE FOR YOU (so this never happens again)
   To make description match the title font:
   - Add class "nlx-serif-block" to the wrapper around the description
   OR
   - Target the section and set its p font-family explicitly
   Example:
   #why-choose .card-desc{ font-family:'DM Serif Text',serif !important; }
   ========================================= */
   
/* iPad / Tablet override (includes iPad Air 820 and iPad Pro 1024) */
@media (min-width: 768px) and (max-width: 1024px){
  #who-we-are .who-grid{
    grid-template-columns: 1fr !important;  /* force stack */
  }
  #who-we-are .who-logo-inline{
    display: flex !important;               /* force logo after title */
    justify-content: center !important;
  }
  #who-we-are .who-logo-side{
    display: none !important;               /* hide right-column logo */
  }
}
@media (min-width:1024px) and (max-width:1366px){
  #why-choose .grid{
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ===============================
   WHY CHOOSE — iPad / Tablet ONLY
   Desktop is fully untouched
   =============================== */

/* All touch tablets (iPad Air + Pro) */
@media (hover:none) and (pointer:coarse) and (min-width:768px){

  /* force 2x2 grid */
  #why-choose .grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
    gap:4rem !important;
  }

  /* card title */
  #why-choose h3{
    font-size:1.75rem !important;
    line-height:1.15 !important;
    margin-top:1.5rem !important;
  }

  /* description text */
  #why-choose p{
    font-size:1.1rem !important;
    line-height:1.6 !important;
    max-width:22rem !important;
    margin-top:.75rem !important;
  }
}

/* iPad Pro specific (1024px wide feels small) */
@media (hover:none) and (pointer:coarse) and (min-width:1024px) and (max-width:1366px){

  #why-choose h3{
    font-size:1.9rem !important;
  }

  #why-choose p{
    font-size:1.15rem !important;
    line-height:1.65 !important;
  }
}

/* WHAT WE BUILD — touch devices only (tablet + mobile) */
@media (hover: none) and (pointer: coarse) {

  #what-we-build .build-card{
    position: relative;
  }

  #what-we-build .tap-arrow{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 20;
  }
}

/* RENOVATION SERVICES — touch devices only */
@media (hover: none) and (pointer: coarse) {

  #reno-services .reno-card{
    position: relative;
  }

  #reno-services .tap-arrow{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 20;
  }
}

/* PAST PROJECTS pill placement, touch devices only */
@media (hover: none) and (pointer: coarse) {
  #past-projects .pp-card{
    position: relative;
  }

  #past-projects .tap-arrow{
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    z-index: 20;
  }
}