/* ============================================================
   Nichols Concrete Sealing — shared polish layer
   Loaded on every page except the homepage (which has its own
   inline version). Uses each page's existing :root tokens.
   ============================================================ */

/* Fix anchor links landing under the fixed nav */
:target{scroll-margin-top:92px}

/* Mobile safety guards — prevent images overflowing their container
   (a common cause of images overlapping text) and kill stray
   horizontal scroll on small screens. */
img,svg,video{max-width:100%}
@media(max-width:760px){ body{overflow-x:hidden} }

/* Clean portfolio look — remove text labels overlaid on gallery photos */
.pg-tag{display:none!important}

/* Prevent gallery grids from clipping/overlapping the next section when
   photos wrap to a second row (container was locked to a fixed height). */
.photo-grid{height:auto!important;grid-auto-rows:300px}
@media(max-width:560px){ .photo-grid{grid-auto-rows:220px} }

/* Custom gold scrollbar */
html{scrollbar-color:var(--gold-dim,#7a5e22) transparent}
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:#0b0b0b}
::-webkit-scrollbar-thumb{background:var(--gold-dim,#7a5e22);border-radius:6px;border:2px solid #0b0b0b}
::-webkit-scrollbar-thumb:hover{background:var(--gold,#b8943c)}

/* Gold "sheen" sweep across primary buttons on hover */
.bg,.btn-gold,.cta-sec{position:relative;overflow:hidden}
.bg::after,.btn-gold::after{content:'';position:absolute;top:0;left:-130%;width:60%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.5),transparent);transform:skewX(-18deg);transition:left .65s cubic-bezier(.16,1,.3,1);pointer-events:none}
.bg:hover::after,.btn-gold:hover::after{left:150%}

/* Scroll-reveal (opt-in via .reveal). Gated on .sp-js so content
   is never hidden if the script fails to run. */
.sp-js .reveal{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.16,1,.3,1),transform .85s cubic-bezier(.16,1,.3,1)}
.sp-js .reveal.v{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}.reveal.d4{transition-delay:.32s}

/* Cinematic film-grain / vignette overlay (injected div) */
#sp-grain{position:fixed;inset:0;pointer-events:none;z-index:9998;background:radial-gradient(ellipse at center,transparent 58%,rgba(0,0,0,.30))}

/* Mobile sticky Call / Free Estimate bar (injected) */
#sp-mbar{display:none}
@media(max-width:760px){
  #sp-mbar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:9999;background:rgba(8,8,8,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-top:1px solid var(--border,#222)}
  #sp-mbar a{flex:1;text-align:center;padding:1rem;font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;font-family:var(--ff-b,sans-serif)}
  #sp-mbar .c{color:var(--white,#f5f2ed);border-right:1px solid var(--border,#222)}
  #sp-mbar .q{background:var(--gold,#b8943c);color:#080808}
  body{padding-bottom:54px!important}
}

@media(prefers-reduced-motion:reduce){
  .sp-js .reveal{opacity:1!important;transform:none!important}
  #sp-grain{display:none}
}


/* ── Uniform nav wordmark + link sizing across every page ── */
.nl-wordmark{font-size:1.15rem;letter-spacing:.22em}
.nav-links a{font-size:.78rem;letter-spacing:.18em}