/* ════════════════════════════════════════════════════════════════════
   NAILS & HARDWARE HERO — cinematic single-image composition (Nails &
   Hardware / Fasteners page only). Same family as wire-rods-hero.css /
   structural-tubes-hero.css (eyebrow, two-tone heading, 2×2 feature
   grid, CTA row, full-bleed visual) but deliberately kept to ONE visual
   layer: the reference photo (Hero/Nails&Hardware.png — a pile of steel
   wire nails, screws, bolts and washers on a dark industrial bench,
   welding sparks, with its own baked-in orange diagonal light accent
   and bottom info bar) already is the finished cinematic composition,
   so no second photo, glow orb or synthetic diagonal is layered on top
   of it — only a readability scrim, a light sweep across the existing
   diagonal, a bottom trust strip, and a drifting ember-particle field
   kept over the plain navy content side (not the photo, which already
   has its own baked-in sparks).
   ════════════════════════════════════════════════════════════════════ */

.nh-hero {
  --nh-navy-deep: #020814;
  --nh-navy: #071A3A;
  --nh-navy2: #0B2554;
  --nh-orange: #FF6A1F;
  --nh-orange-hot: #FFA23D;
  --nh-white: #FFFFFF;
  --nh-silver: #C7D0DE;

  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  padding: calc(var(--nav-h) + 2rem) 1.75rem 5.5rem;
  min-height: calc(100svh - var(--nav-h));
  background:
    radial-gradient(ellipse 60% 50% at 84% 18%, rgba(255, 106, 31, .12), transparent 62%),
    linear-gradient(150deg, var(--nh-navy-deep) 0%, var(--nh-navy) 55%, var(--nh-navy2) 100%);
  color: var(--nh-white);
}

.nh-bg { position: absolute; inset: 0; z-index: 1; pointer-events: none; }

/* ── drifting ember particles: same floating-pulse technique as the
   home hero / other product heroes, but kept over the plain navy content
   side (left ~55%) rather than the photo — the photo already has its
   own baked-in sparks, so this reads as ambient atmosphere behind the
   text instead of a duplicate spark layer ── */
.nh-particles { position: absolute; inset: 0; overflow: hidden; }
.nh-particle {
  position: absolute; bottom: -5%; left: var(--x, 30%);
  width: var(--size, 3px); height: var(--size, 3px); border-radius: 50%;
  background: var(--hue, var(--nh-orange-hot));
  box-shadow: 0 0 6px 1px var(--hue, rgba(255, 162, 61, .6));
  opacity: 0;
  animation: nhParticleFloat var(--dur, 16s) ease-in var(--delay, 0s) infinite;
}
@keyframes nhParticleFloat {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  12% { opacity: .7; }
  85% { opacity: .3; }
  100% { transform: translateY(-110vh) translateX(var(--drift, 16px)); opacity: 0; }
}

/* ══ LAYOUT — content column ~40%, visual takes the rest full-bleed ══ */
.nh-inner { position: relative; z-index: 5; width: 100%; max-width: 1400px; margin: 0 auto; }
.nh-content { min-width: 0; }
@media (min-width: 960px) { .nh-content { max-width: min(650px, 41%); } }

/* ══ BREADCRUMB — reflow into the narrow content column, recolor for
   the dark navy background (base .breadcrumb assumes a light page) ══ */
.nh-hero .breadcrumb { max-width: none; margin: 0 0 1rem; padding: 0; font-size: .74rem; }
.nh-hero .breadcrumb a { color: var(--nh-silver); }
.nh-hero .breadcrumb a:hover { color: var(--nh-orange-hot); }
.nh-hero .breadcrumb .bc-sep { color: rgba(255, 255, 255, .25); }
.nh-hero .breadcrumb .bc-current { color: var(--nh-orange-hot); }

/* ══ EYEBROW — short orange rule, then label ══ */
.nh-eyebrow { display: flex; align-items: center; gap: .65rem; margin-bottom: 1rem; }
.nh-eyebrow-rule { width: 28px; height: 2px; flex-shrink: 0; background: linear-gradient(90deg, var(--nh-orange), var(--nh-orange-hot)); border-radius: 2px; }
.nh-eyebrow-text {
  font-family: var(--font-mono); font-size: .7rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--nh-orange-hot);
}

/* ══ HEADLINE — two lines, two-tone ══ */
.nh-hero h1.nh-heading {
  text-transform: uppercase; font-family: var(--font-display); font-weight: 800;
  font-size: clamp(3rem, 5vw, 6rem); line-height: .92; letter-spacing: -.01em;
  margin: 0 0 1.15rem;
}
.nh-line { display: block; overflow: hidden; padding-bottom: .1em; }
.nh-line-inner { display: block; color: var(--nh-white); }
.nh-line-inner.nh-accent { color: var(--nh-orange); }

/* ══ SUPPORTING HEADLINE — short orange underline beneath ══ */
.nh-subhead {
  position: relative; display: inline-block;
  font-family: var(--font-display); font-weight: 700; color: var(--nh-white);
  text-transform: none;
  font-size: clamp(1.4rem, 2vw, 1.7rem); line-height: 1.3;
  margin: 0 0 1.2rem; padding-bottom: .6rem;
}
.nh-subhead::after {
  content: ''; position: absolute; left: 0; bottom: 0; width: 46px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nh-orange), var(--nh-orange-hot));
}

.nh-desc {
  color: var(--nh-silver); font-size: clamp(.92rem, .95vw, 1.02rem); line-height: 1.65;
  max-width: 500px; margin: 0 0 1.7rem; font-weight: 500;
  padding: .85rem 1.1rem;
  background: linear-gradient(135deg, rgba(7, 26, 58, .55), rgba(7, 26, 58, .24));
  backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%);
  border: 1px solid rgba(255, 106, 31, .22); border-radius: 1rem;
  box-shadow: 0 8px 24px rgba(2, 8, 20, .32), inset 0 1px 0 rgba(255, 255, 255, .08);
}

/* ══ FOUR FEATURES — compact 2×2 grid ══ */
.nh-features { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-bottom: 1.8rem; }
.nh-feature {
  display: flex; align-items: center; gap: .65rem; min-width: 0;
  padding: .55rem .9rem .55rem .55rem;
  background: linear-gradient(135deg, rgba(7, 26, 58, .55), rgba(7, 26, 58, .26));
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 106, 31, .22); border-radius: 1.2rem;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.nh-feature-icon {
  position: relative;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 106, 31, .35), rgba(255, 106, 31, .1));
  border: 1.5px solid rgba(255, 106, 31, .55);
  box-shadow: 0 0 14px rgba(255, 106, 31, .2), inset 0 0 8px rgba(255, 106, 31, .12);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, filter .3s ease;
}
.nh-feature-icon svg { width: 16px; height: 16px; stroke: var(--nh-orange-hot); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ── idle "flex" pulse: a soft ring breathing outward behind each icon ── */
.nh-feature-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid var(--nh-orange-hot);
  box-shadow: 0 0 0 0 rgba(255, 106, 31, .5);
  opacity: 0;
  animation: nhIconFlex 2.6s cubic-bezier(.22, 1, .36, 1) infinite;
}
.nh-feature:nth-child(1) .nh-feature-icon::after { animation-delay: 0s; }
.nh-feature:nth-child(2) .nh-feature-icon::after { animation-delay: .65s; }
.nh-feature:nth-child(3) .nh-feature-icon::after { animation-delay: 1.3s; }
.nh-feature:nth-child(4) .nh-feature-icon::after { animation-delay: 1.95s; }

@keyframes nhIconFlex {
  0% { transform: scale(1); opacity: .9; }
  75% { transform: scale(1.7); opacity: 0; }
  100% { transform: scale(1.7); opacity: 0; }
}
.nh-feature h4 {
  text-transform: uppercase; font-family: var(--font-mono); font-size: .72rem; font-weight: 700;
  letter-spacing: .03em; color: var(--nh-white); margin: 0; line-height: 1.3; transition: color .3s ease;
}
.nh-feature:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 106, 31, .55);
  background: linear-gradient(135deg, rgba(7, 26, 58, .74), rgba(7, 26, 58, .4));
}
.nh-feature:hover .nh-feature-icon { transform: scale(1.05); filter: brightness(1.12); box-shadow: 0 0 18px rgba(255, 106, 31, .38), inset 0 0 10px rgba(255, 106, 31, .18); }
.nh-feature:hover h4 { color: var(--nh-orange-hot); }

/* ══ CTA ROW ══ */
.nh-cta-row { display: flex; align-items: center; gap: .9rem; flex-wrap: wrap; }
.nh-cta {
  position: relative; display: inline-flex; align-items: center; gap: .85rem;
  padding: .28rem .28rem .28rem 1.45rem; border-radius: 3rem; text-decoration: none;
  background: linear-gradient(135deg, var(--nh-orange-hot), var(--nh-orange));
  border: 1px solid rgba(255, 255, 255, .12);
  box-shadow: 0 10px 28px rgba(255, 106, 31, .38), 0 0 0 1px rgba(255, 255, 255, .05) inset;
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease;
}
.nh-cta-label { font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: #fff; }
.nh-cta-arrow {
  display: flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, .18); color: #fff; flex-shrink: 0;
  transition: transform .35s cubic-bezier(.16, .84, .44, 1);
}
.nh-cta-arrow svg { width: 15px; height: 15px; }
.nh-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(255, 106, 31, .5), 0 0 0 1px rgba(255, 255, 255, .07) inset; }
.nh-cta:hover .nh-cta-arrow { transform: translateX(5px); }
.nh-cta:focus-visible { outline: 2px solid var(--nh-white); outline-offset: 3px; }

.nh-cta-secondary {
  display: inline-flex; align-items: center; justify-content: center;
  padding: .92rem 1.6rem; border-radius: 3rem; text-decoration: none;
  font-family: var(--font-mono); font-size: .78rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--nh-white); background: rgba(2, 8, 20, .5); border: 1.5px solid rgba(255, 106, 31, .4);
  transition: transform .3s cubic-bezier(.16, .84, .44, 1), box-shadow .3s ease, border-color .3s ease, background .3s ease;
}
.nh-cta-secondary:hover { transform: translateY(-2px); border-color: var(--nh-orange-hot); background: rgba(217, 72, 10, .16); box-shadow: 0 0 16px rgba(255, 106, 31, .25); }
.nh-cta-secondary:focus-visible { outline: 2px solid var(--nh-white); outline-offset: 3px; }

/* ══ HERO VISUAL — the single reference photo, full-bleed, one scrim ══ */
.nh-visual { position: relative; overflow: hidden; margin: 0; }
.nh-visual-frame { position: absolute; inset: 0; transition: transform .4s ease-out; }
.nh-visual-frame img {
  display: block; width: 100%; height: 100%; object-fit: cover; object-position: 62% 40%;
  transform: scale(var(--nh-img-scale, 1));
}

.nh-visual-scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(90deg, var(--nh-navy-deep) 0%, rgba(3, 8, 22, .9) 14%, rgba(3, 8, 22, .68) 28%, rgba(3, 8, 22, .38) 46%, rgba(3, 8, 22, .1) 68%, transparent 100%),
    linear-gradient(180deg, rgba(2, 8, 20, .4) 0%, transparent 14%, transparent 76%, rgba(2, 8, 20, .5) 100%);
}

/* subtle animated highlight sweeping across the reference photo's own
   orange diagonal — a reflection passing over it, never a new shape */
.nh-sweep {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background: linear-gradient(122deg, transparent 42%, rgba(255, 210, 160, .12) 49%, rgba(255, 210, 160, .2) 50%, rgba(255, 210, 160, .12) 51%, transparent 58%);
  background-size: 260% 260%; background-position: 120% 0%;
  animation: nhSweep 7s ease-in-out infinite; mix-blend-mode: screen;
}
@keyframes nhSweep { 0%, 100% { background-position: 120% 0%; } 50% { background-position: -20% 100%; } }

.nh-visual { position: absolute; inset: 0; z-index: 0; }

/* ══ BOTTOM TRUST STRIP ══ */
.nh-trust {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 1.8rem; padding: .85rem 1.75rem;
  background: rgba(2, 8, 20, .64); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 106, 31, .18);
}
.nh-trust-item { display: flex; align-items: center; gap: .55rem; }
.nh-trust-icon { flex-shrink: 0; width: 17px; height: 17px; stroke: var(--nh-orange-hot); fill: none; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nh-trust-text {
  font-family: var(--font-mono); font-size: .62rem; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; line-height: 1.3; color: var(--nh-silver);
  /* prevent .nh-hero's mobile text-align:center from centering this line
     and the bolder strong line separately, which drifts them out of
     alignment with each other since they differ in natural width */
  text-align: left;
}
.nh-trust-text strong { display: block; color: var(--nh-white); font-size: .72rem; }

/* ══ ENTRANCE (JS flips .nh-loaded on .nh-hero) ══ */
.nh-eyebrow, .nh-line-inner, .nh-subhead, .nh-desc, .nh-feature, .nh-cta, .nh-cta-secondary {
  opacity: 0; transform: translateY(16px);
  transition: opacity .65s cubic-bezier(.22, 1, .36, 1), transform .65s cubic-bezier(.22, 1, .36, 1);
}
.nh-loaded .nh-eyebrow { opacity: 1; transform: none; transition-delay: .1s; }
.nh-loaded .nh-line:nth-child(1) .nh-line-inner { opacity: 1; transform: none; transition-delay: .22s; }
.nh-loaded .nh-line:nth-child(2) .nh-line-inner { opacity: 1; transform: none; transition-delay: .34s; }
.nh-loaded .nh-subhead { opacity: 1; transform: none; transition-delay: .46s; }
.nh-loaded .nh-desc { opacity: 1; transform: none; transition-delay: .56s; }
.nh-loaded .nh-feature:nth-child(1) { opacity: 1; transform: none; transition-delay: .66s; }
.nh-loaded .nh-feature:nth-child(2) { opacity: 1; transform: none; transition-delay: .74s; }
.nh-loaded .nh-feature:nth-child(3) { opacity: 1; transform: none; transition-delay: .82s; }
.nh-loaded .nh-feature:nth-child(4) { opacity: 1; transform: none; transition-delay: .9s; }
.nh-loaded .nh-cta { opacity: 1; transform: none; transition-delay: 1.02s; }
.nh-loaded .nh-cta-secondary { opacity: 1; transform: none; transition-delay: 1.08s; }

.nh-visual { opacity: 0; transform: scale(1.03); transition: opacity 1.3s cubic-bezier(.22, 1, .36, 1), transform 1.4s cubic-bezier(.22, 1, .36, 1); }
.nh-loaded .nh-visual { opacity: 1; transform: none; }

.nh-trust { opacity: 0; transform: translateY(10px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); transition-delay: 1.2s; }
.nh-loaded .nh-trust { opacity: 1; transform: none; }

.nh-bg, .nh-visual-frame { transition: transform .4s ease-out; will-change: transform; }
.nh-content { transition: transform .4s ease-out; }

/* very slow, near-imperceptible standing zoom once the entrance settles */
.nh-loaded .nh-visual-frame img { animation: nhBreathe 10s ease-in-out infinite; }
@keyframes nhBreathe {
  0%, 100% { transform: scale(var(--nh-img-scale, 1)); }
  50% { transform: scale(calc(var(--nh-img-scale, 1) * 1.015)); }
}

/* ══ TABLET / MOBILE: .nh-visual flows in normal document order after
   .nh-inner once it drops out of absolute full-bleed mode ══ */
@media (max-width: 959px) {
  /* text and features stack centered over the same full-bleed photo, no
     separate boxed card — matches the homepage / leadership hero */
  .nh-hero { display: block; padding: calc(var(--nav-h) + 1.75rem) 1.5rem 8rem; min-height: auto; text-align: center; }
  .nh-content { max-width: none; }

  .nh-eyebrow { justify-content: center; }
  .nh-desc { margin-left: auto; margin-right: auto; }
  .nh-cta-row { justify-content: center; }

  .nh-visual-frame img { object-position: 62% 30%; }
  .nh-visual-scrim {
    background:
      linear-gradient(180deg, rgba(2, 8, 20, .74) 0%, rgba(2, 8, 20, .38) 20%, rgba(3, 8, 22, .3) 38%, rgba(3, 8, 22, .6) 60%, rgba(2, 8, 20, .92) 78%, var(--nh-navy-deep) 96%),
      linear-gradient(90deg, rgba(2, 8, 20, .46) 0%, transparent 45%, transparent 60%, rgba(2, 8, 20, .3) 100%);
  }

  .nh-features { gap: .55rem; }
  .nh-trust { gap: 1.2rem 1.6rem; padding: .8rem 1.25rem; }
}

@media (max-width: 640px) {
  .nh-hero { padding: calc(var(--nav-h) + 1.4rem) 1.15rem 11rem; }
  .nh-hero h1.nh-heading { font-size: clamp(2.5rem, 12vw, 3.4rem); }

  .nh-eyebrow { margin-bottom: .75rem; }
  .nh-subhead { font-size: clamp(1.15rem, 5vw, 1.35rem); }
  .nh-desc { margin-bottom: 1.3rem; max-width: none; }

  .nh-features { margin-bottom: 1.4rem; }
  .nh-feature { padding: .5rem .8rem .5rem .5rem; }
  .nh-feature-icon { width: 30px; height: 30px; }

  .nh-cta-row { flex-direction: column; align-items: stretch; }
  .nh-cta, .nh-cta-secondary { width: 100%; }
  .nh-cta-label { flex: 1; text-align: center; }

  .nh-visual-frame img { object-position: 68% 28%; }

  .nh-trust { flex-direction: column; align-items: flex-start; gap: .75rem; padding: .9rem 1.15rem; }
}

/* ══ ACCESSIBILITY: reduced motion ══ */
@media (prefers-reduced-motion: reduce) {
  .nh-eyebrow, .nh-line-inner, .nh-subhead, .nh-desc, .nh-feature, .nh-cta, .nh-cta-secondary, .nh-visual, .nh-trust {
    transition: opacity .4s ease !important; transform: none !important;
  }
  .nh-feature-icon::after { animation: none !important; display: none; }
  .nh-sweep, .nh-loaded .nh-visual-frame img, .nh-particle { animation: none !important; }
  .nh-particles { display: none; }
  .nh-bg, .nh-visual-frame, .nh-content { transition: none !important; }
  .nh-feature:hover, .nh-feature:hover .nh-feature-icon { transform: none !important; }
}

/* ══ LOW-END MOBILE: decorative background-position sweep/drift forces a
   repaint every frame and (where paired) costs extra compositing via
   mix-blend-mode; simplify it away below the tablet breakpoint regardless
   of the user's reduced-motion preference, since most low-end-phone users
   won't have that OS setting enabled ══ */
@media (max-width: 760px) {
  .nh-sweep { animation: none !important; mix-blend-mode: normal; }
}

/* ══ LOW-POWER MODE: same sweep simplification as the mobile breakpoint
   above, keyed off device capability (.low-power-mode) instead of
   viewport width ══ */
.low-power-mode .nh-sweep { animation: none !important; mix-blend-mode: normal; }