/* =========================================
   Build page — font baseline (LOCKED + CONSISTENT)
   Goal:
   - Body + UI text = Inter
   - Serif titles ONLY when you add .font-serif or .nlx-section-title
   - No global heading hijack (prevents random serif bleed)
   - Consistent smoothing across sections/animations
   ========================================= */

: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 */
body :where(*){
  font-family:inherit;
}

/* ---------------------------
   Serif titles (ONLY opt-in)
   Use: add .font-serif or .nlx-section-title in HTML
   --------------------------- */
.font-serif,
.nlx-section-title{
  font-family:'DM Serif Text',serif !important;
  font-weight:700 !important;
  letter-spacing:-0.01em;

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

/* If a span is inside the title, keep it serif too */
.font-serif *,
.nlx-section-title *{
  font-family:'DM Serif Text',serif !important;
  font-weight:700 !important;
}

/* Beat any section overrides */
section .font-serif,
section .nlx-section-title{
  font-family:'DM Serif Text',serif !important;
  font-weight:700 !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 */
#build-hero .hero-item{
  opacity:0;
  transform:translateY(14px);
  transition:opacity .7s ease, transform .7s ease;
  transition-delay:var(--d,0ms);
  will-change:opacity, transform;
}
#build-hero.hero-in .hero-item{
  opacity:1;
  transform:none;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .fade-item,.reveal,#build-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;
}

/* Optional mask utility */
.hero-mask{
  -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%);
}

/* Prevents visible jump on back/forward */
html.nvx-hide{ visibility:hidden; }

/* =========================================
   What We Build hover
   ========================================= */
#what-we-build .group{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  isolation:isolate;
}
#what-we-build .group 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);
}
@media (hover:hover) and (pointer:fine){
  #what-we-build .group:hover img{ filter:brightness(.6); }
  #what-we-build .group:hover .opacity-0{
    opacity:1 !important;
    transform:translateY(0) !important;
  }
}
@media (hover:none){
  #what-we-build .group img{ filter:brightness(.9); }
}

/* =========================================
   Past Projects hover
   ========================================= */
#past-projects .pp-card{
  position:relative;
  overflow:hidden;
  border-radius:1rem;
  isolation:isolate;
}
#past-projects .pp-img{
  display:block;
  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); }
}

/* =========================================
   Steps fade
   ========================================= */
.js-fade-section{ opacity:0; transition:opacity .7s ease; }
.in-view.js-fade-section{ opacity:1; }
.js-step{ will-change:opacity, transform; }

/* =========================================
   Button
   ========================================= */
.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){
  .btn-grad:hover{ opacity:.9; transform:translateY(-1px); }
}

/* =========================================
   iPad Mini / iPad Air: Force 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-only hint: gold "View →" pill
   REAL touch devices only
   Sections: Build, Renovate, Past Projects
   ========================================= */
#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;
}

/* Hide by default */
#what-we-build .tap-arrow,
#reno-services .tap-arrow,
#past-projects .tap-arrow{
  display:none;
}

/* Show only on true touch devices */
@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;
}

/* =========================================
   iOS / accessibility text-size safety
   Fixes clipping in image cards with absolute overlays
   Targets: What We Build, Reno Services, Past Projects
   ========================================= */

/* Make the overlay text area breathe so bigger text doesn't get squeezed/clipped */
.build-card .absolute.inset-0.flex,
#reno-services a .absolute.inset-0.flex,
.pp-card .pp-overlay{
  padding-top: 1.25rem;
  padding-bottom: 1.25rem;
}

/* Allow nicer wrapping and avoid overflow vibes */
.build-card span,
#reno-services a span,
.pp-card .pp-overlay span{
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

/* Keep the "description" from getting chopped if text size is bumped */
.build-card span.hidden.md\:block,
#reno-services .card-sub{
  line-height: 1.25;
}

/* Optional: if iOS bumps text sizes, reduce the chance of vertical clipping */
@supports (-webkit-touch-callout: none){
  .build-card .absolute.inset-0.flex,
  #reno-services a .absolute.inset-0.flex{
    justify-content: center;
  }
}