/* products.html — page styles */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
@keyframes shimmer { 0%{ background-position: -200% center; } 100%{ background-position: 200% center; } }
.ph-h1 i, .pr-title i, .cat-banner h2 i, .tb-head h2 i, .cta-band h2 i, .cb-eyebrow {
  font-style: italic;
  background: var(--grad);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  display: inline-block; /* THE NT FIX */
  padding-right: 0.05em;
}
.prod-hero { padding-top:64px; min-height:100vh; display:grid; grid-template-columns: 60% 40%; }
.ph-left { background: var(--deep); padding:8rem 5% 8rem 8%; display:flex; flex-direction:column; justify-content:center; position:relative; overflow:hidden; }
.ph-left::before { content:''; position:absolute; inset:0; background: repeating-linear-gradient(-45deg, transparent, transparent 80px, rgba(255,255,255,0.015) 80px, rgba(255,255,255,0.015) 81px); pointer-events:none; }
.ph-left::after { content:''; position:absolute; top:-120px; right:-120px; width:440px; height:440px; background: radial-gradient(circle, rgba(107,107,200,0.18) 0%, transparent 70%); pointer-events:none; }
.ph-glow-bottom { position:absolute; bottom:-80px; left:-80px; width:360px; height:360px; background: radial-gradient(circle, rgba(46,207,184,0.08) 0%, transparent 70%); pointer-events:none; }
.ph-eyebrow { font-size:0.65rem; letter-spacing:0.25em; text-transform:uppercase; color: rgba(255,255,255,0.72); margin-bottom:2.5rem; position:relative; z-index:1; }
.ph-h1 { font-family:'Playfair Display', serif; font-size: clamp(3.2rem, 5vw, 5.5rem); font-weight:900; line-height:0.95; color: var(--paper); position:relative; z-index:1; }
.ph-h1 .line span { display:block; transform: translateY(110%); animation: slideUp 1s cubic-bezier(0.16, 1, 0.3, 1) forwards; }
.ph-h1 .line:nth-child(1) span { animation-delay: 0.1s; }
.ph-h1 .line:nth-child(2) span { animation-delay: 0.25s; }
.ph-rule { width:60px; height:2px; background: var(--grad-solid); margin: 2.2rem 0; transform: scaleX(0); transform-origin:left; animation: scaleIn 0.8s 0.6s cubic-bezier(0.16,1,0.3,1) forwards; position:relative; z-index:1; }
.ph-desc { font-size:1.05rem; line-height:1.8; color: rgba(255,255,255,0.7); max-width:480px; opacity:0; animation: fadeIn 1s 0.8s ease forwards; position:relative; z-index:1; }
.ph-badges { display:flex; gap:1rem; margin-top:2.5rem; flex-wrap:wrap; opacity:0; animation: fadeIn 1s 1s ease forwards; position:relative; z-index:1; }
.ph-badge { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.14em; padding:0.35rem 0.8rem; border:1px solid rgba(255,255,255,0.12); color: rgba(255,255,255,0.66); border-radius:2px; }
.ph-badge.active-b { border-color: rgba(107,107,200,0.5); color: var(--purple-dark); background: rgba(107,107,200,0.08); }
.ph-right { background: var(--cream); padding:8rem 8% 8rem 5%; display:flex; flex-direction:column; justify-content:center; border-left:1px solid var(--rule); position:relative; overflow:hidden; }
.ph-right::after { content:''; position:absolute; bottom:-60px; right:-60px; width:200px; height:200px; background: radial-gradient(circle, rgba(46,207,184,0.06) 0%, transparent 70%); pointer-events:none; }
.cat-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; color: var(--mid); margin-bottom:1.5rem; display:flex; align-items:center; gap:0.8rem; }
.cat-label::before { content:''; display:block; width:24px; height:1px; background: var(--grad-solid); }
.ph-list { list-style:none; }
.ph-list li { margin-bottom:0.3rem; }
.ph-list a {
  font-family:'Playfair Display', serif; font-size:1.3rem; font-weight:700;
  color: var(--ink); text-decoration:none; display:flex; align-items:center; gap:1rem;
  padding:0.7rem 0.8rem; border-radius:2px; border:1px solid transparent;
  transition: color 0.2s, background 0.2s, border-color 0.2s;
}
.ph-list a:hover { color: var(--purple-dark); background: rgba(107,107,200,0.04); border-color: rgba(107,107,200,0.12); }
.ph-list a .item-num { font-family:'Instrument Sans', sans-serif; font-size:0.72rem; font-weight:400; color: var(--mid); letter-spacing:0.12em; min-width:24px; }
.ph-list a .item-arrow { margin-left:auto; font-size:0.8rem; color: var(--mid); opacity:0; transition: opacity 0.2s, transform 0.2s; }
.ph-list a:hover .item-arrow { opacity:1; transform: translateX(4px); }
.cat-divider { height:1px; background: var(--rule); margin:2rem 0; }
.metals-label { color: #10796a !important; }
.metals-label::before { background: linear-gradient(to right, var(--teal), var(--teal-dark)) !important; }
.scroll-target { scroll-margin-top:64px; }
.cat-banner { padding:6rem 5%; background: var(--paper); border-bottom:1px solid var(--rule); display:grid; grid-template-columns: 1fr auto; gap:3rem; align-items:center; }
.cat-banner-left .cb-eyebrow { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; display:inline-block; margin-bottom:0.8rem; }
.cat-banner-left h2 { font-family:'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight:700; color: var(--ink); line-height:1.1; padding-right:0.05em; }
.cat-banner-left p { font-size:0.92rem; color: var(--mid); margin-top:0.8rem; }
.cat-banner-right { text-align:right; }
.cat-count { font-family:'Playfair Display', serif; font-size:5rem; font-weight:900; line-height:1; color: rgba(0,0,0,0.04); }
.prod-row {
  display:grid; grid-template-columns: 80px 1fr 1fr;
  gap:4rem; padding:7rem 5%;
  position:relative; overflow:hidden;
  border-bottom:1px solid var(--rule);
  background: var(--cream);
  transition: background 0.4s;
}
.prod-row:hover { background: rgba(249,247,243,0.7); }
.prod-row.dark { background: var(--deep); border-bottom:1px solid rgba(255,255,255,0.06); }
.prod-row.dark:hover { background: rgba(22,22,18,0.98); }
.prod-row::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); transform: scaleX(0); transform-origin:left; transition: transform 0.5s cubic-bezier(0.16,1,0.3,1); }
.prod-row:hover::before { transform: scaleX(1); }
.prod-row.dark::after { content:''; position:absolute; top:-80px; right:-80px; width:320px; height:320px; background: radial-gradient(circle, rgba(107,107,200,0.1) 0%, transparent 70%); pointer-events:none; }
.pr-num { font-family:'Playfair Display', serif; font-size: clamp(5rem, 7vw, 7rem); font-weight:900; line-height:0.85; color: rgba(0,0,0,0.04); user-select:none; pointer-events:none; padding-top:0.4rem; }
.prod-row.dark .pr-num { color: rgba(255,255,255,0.04); }
.pr-info { padding-top:0.5rem; }
.pr-tag { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.18em; color: var(--mid); border:1px solid var(--rule); padding:0.25rem 0.7rem; display:inline-block; margin-bottom:1.5rem; border-radius:2px; }
.prod-row.dark .pr-tag { color: rgba(255,255,255,0.66); border-color: rgba(255,255,255,0.12); }
.pr-title { font-family:'Playfair Display', serif; font-size: clamp(2rem, 2.8vw, 2.4rem); font-weight:700; color: var(--ink); margin-bottom:1.2rem; line-height:1.1; padding-right:0.05em; }
.prod-row.dark .pr-title { color: var(--paper); }
.pr-desc { font-size:0.92rem; line-height:1.85; color: var(--mid); margin-bottom:1.5rem; }
.prod-row.dark .pr-desc { color: rgba(255,255,255,0.7); }
.pr-benefits { display:flex; gap:0.5rem; flex-wrap:wrap; margin-bottom:2rem; }
.pr-benefit { font-size:0.68rem; text-transform:uppercase; letter-spacing:0.12em; padding:0.3rem 0.65rem; background: var(--grad-subtle); color: var(--purple-dark); border:1px solid rgba(107,107,200,0.18); border-radius:30px; }
.prod-row.dark .pr-benefit { background: rgba(107,107,200,0.1); color: #b0b0ee; border-color: rgba(107,107,200,0.2); }
.pr-specs { padding-top:0.5rem; }
.specs-header { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; color: var(--mid); margin-bottom:1rem; padding-bottom:0.8rem; border-bottom:1px solid var(--rule); }
.prod-row.dark .specs-header { color: rgba(255,255,255,0.72); border-bottom-color: rgba(255,255,255,0.08); }
.spec-list { list-style:none; }
.spec-list li { display:flex; justify-content:space-between; align-items:flex-start; gap:2rem; padding:1.1rem 0; border-bottom:1px solid var(--rule); font-size:0.85rem; }
.prod-row.dark .spec-list li { border-bottom-color: rgba(255,255,255,0.07); }
.spec-list li:last-child { border-bottom:none; }
.sl-lbl { color: var(--mid); font-weight:500; min-width:130px; }
.prod-row.dark .sl-lbl { color: rgba(255,255,255,0.62); }
.sl-val { color: var(--ink); text-align:right; line-height:1.5; font-weight:500; }
.prod-row.dark .sl-val { color: rgba(255,255,255,0.85); }
.quality-bar-wrap { margin-top:2rem; border-top:1px solid var(--rule); padding-top:1.5rem; }
.prod-row.dark .quality-bar-wrap { border-top-color: rgba(255,255,255,0.07); }
.qb-label { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.15em; color: var(--mid); margin-bottom:0.6rem; display:flex; justify-content:space-between; }
.prod-row.dark .qb-label { color: rgba(255,255,255,0.76); }
.quality-bar { height:4px; background: rgba(0,0,0,0.06); border-radius:2px; overflow:hidden; }
.prod-row.dark .quality-bar { background: rgba(255,255,255,0.08); }
.quality-bar-fill { height:100%; background: var(--grad-solid); border-radius:2px; transition: width 1.5s cubic-bezier(0.16,1,0.3,1); width:0; }
.quality-bar-fill.animate { width: var(--fill-width); }
.terms-band { padding:8rem 5%; background: var(--paper); border-bottom:1px solid var(--rule); }
.tb-head { display:flex; align-items:flex-end; justify-content:space-between; gap:2rem; margin-bottom:4rem; padding-bottom:2rem; border-bottom:2px solid var(--ink); }
.tb-head h2 { font-family:'Playfair Display', serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight:700; color: var(--ink); line-height:1.1; }
.tb-head p { font-size:0.85rem; color: var(--mid); max-width:300px; text-align:right; line-height:1.7; }
.tb-grid { display:grid; grid-template-columns: repeat(3, 1fr); gap:2rem; }
.tc-card { padding:3rem 2.5rem; background: var(--cream); border:1px solid rgba(0,0,0,0.06); position:relative; overflow:hidden; transition:border-color 0.3s, background 0.3s, transform 0.3s; }
.tc-card:hover { border-color: rgba(107,107,200,0.3); background: rgba(107,107,200,0.02); transform: translateY(-4px); }
.tc-card::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background: var(--grad-solid); transform: scaleX(0); transform-origin:left; transition: transform 0.4s cubic-bezier(0.16,1,0.3,1); }
.tc-card:hover::before { transform: scaleX(1); }
.tc-code { font-family:'Playfair Display', serif; font-size:2.8rem; font-weight:900; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; line-height:1; margin-bottom:0.5rem; display:inline-block; }
.tc-name { font-size:0.75rem; font-weight:500; text-transform:uppercase; letter-spacing:0.14em; color: var(--ink); margin-bottom:1.2rem; }
.tc-desc { font-size:0.86rem; line-height:1.75; color: var(--mid); }
.future-block { padding:5rem 5%; background: var(--deep); color: var(--paper); position:relative; overflow:hidden; text-align:center; }
.future-block::before { content:''; position:absolute; top:-100px; left:50%; transform:translateX(-50%); width:500px; height:500px; background: radial-gradient(circle, rgba(107,107,200,0.1) 0%, transparent 70%); pointer-events:none; }
.future-block .fb-eyebrow { font-size:0.65rem; text-transform:uppercase; letter-spacing:0.2em; background: var(--grad); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; display:inline-block; margin-bottom:1.2rem; }
.future-block h3 { font-family:'Playfair Display', serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight:700; color: var(--paper); margin-bottom:1rem; }
.future-block p { font-size:0.95rem; line-height:1.85; color: rgba(255,255,255,0.66); max-width:640px; margin:0 auto; }
.cta-band { padding:8rem 5%; background: var(--cream); text-align:center; border-top:2px solid var(--ink); }
.cta-band h2 { font-family:'Playfair Display', serif; font-size: clamp(2.5rem, 4.5vw, 3.8rem); font-weight:900; color: var(--ink); margin-bottom:1.5rem; padding-bottom:0.1em; line-height:1; }
.cta-band p { font-size:0.98rem; color: var(--mid); max-width:620px; margin:0 auto 2.5rem; line-height:1.8; }
.cta-actions { display:flex; justify-content:center; gap:1.2rem; flex-wrap:wrap; }
.footer-top { display:grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap:3rem; padding-bottom:4rem; border-bottom:1px solid rgba(255,255,255,0.08); }
.footer-brand-name { font-family:'Instrument Sans', sans-serif; font-size:1rem; font-weight:500; letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1rem; }
.footer-brand-name .mint { color: var(--purple-dark); }
.footer-brand-name .wurks { color: #10796a; }
.footer-brand p { font-size:0.82rem; line-height:1.7; color: rgba(255,255,255,0.76); }
.footer-bottom { padding-top:2rem; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:1rem; }
.footer-bottom p { font-size:0.72rem; color: rgba(255,255,255,0.66); }
@media (max-width: 1100px) {
.prod-row { grid-template-columns: 60px 1fr 1fr; gap:3rem; }
}
@media (max-width: 900px) {
.prod-hero { grid-template-columns: 1fr; min-height:auto; }
.ph-left { padding: 8rem 5% 4rem; }
.ph-right { border-left:none; padding: 4rem 5% 6rem; border-top:1px solid var(--rule); }
.prod-row { grid-template-columns: 1fr; gap:2rem; padding: 5rem 5%; }
.pr-num { display:none; }
.cat-banner { grid-template-columns: 1fr; }
.cat-banner-right { display:none; }
.tb-grid { grid-template-columns: 1fr; }
.tb-head { flex-direction:column; align-items:flex-start; }
.tb-head p { text-align:left; }
.footer-top { grid-template-columns: 1fr 1fr; }
.cta-actions { flex-direction:column; align-items:center; }
}
@media (max-width: 600px) {
.ph-h1 { font-size: clamp(2.8rem, 10vw, 3.5rem); }
.spec-list li { flex-direction:column; gap:0.3rem; }
.sl-val { text-align:left; }
.footer-top { grid-template-columns: 1fr; }
.ph-badges { flex-wrap:wrap; }
}

/* — additions — */
.scroll-target { scroll-margin-top: calc(var(--nav-h-compact) + 64px); }