/* =====================================================================
   Bihar Cables — site styles
   Palette pulled from the badge logo: deep navy + warm gold on cream.
   ===================================================================== */

:root {
  --navy:       #1a2845;
  --navy-deep:  #121b30;
  --navy-soft:  #2a3a5e;
  --gold:       #c9a961;
  --gold-soft:  #d9bf83;
  --cream:      #f4ede0;
  --cream-deep: #ebe1cd;
  --ink:        #1a1f2c;
  --muted:      #5a6378;
  --line:       rgba(26, 40, 69, 0.12);
  --shadow-sm:  0 1px 3px rgba(18, 27, 48, 0.06), 0 4px 12px rgba(18, 27, 48, 0.04);
  --shadow-md:  0 8px 24px rgba(18, 27, 48, 0.10), 0 2px 6px rgba(18, 27, 48, 0.06);
  --shadow-lg:  0 24px 60px rgba(18, 27, 48, 0.18);
  --radius:     12px;
  --maxw:       1180px;
  --header-h:   76px;
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               Helvetica, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--cream);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
  color: var(--navy);
  font-weight: 700;
  line-height: 1.2;
  margin: 0 0 0.6em;
  letter-spacing: -0.01em;
}

h1 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }

p  { margin: 0 0 1em; color: var(--ink); }

a {
  color: var(--navy);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
a:hover { color: var(--gold); border-bottom-color: var(--gold); }

img { max-width: 100%; height: auto; display: block; }

.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 24px;
}

/* ---------- Header / Navigation ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(244, 237, 224, 0.92);
  backdrop-filter: saturate(140%) blur(10px);
  -webkit-backdrop-filter: saturate(140%) blur(10px);
  border-bottom: 1px solid var(--line);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-h);
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  border: 0;
}
.brand:hover { border: 0; }

.brand img {
  width: 44px;
  height: 44px;
  display: block;
}

.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: Georgia, "Times New Roman", serif;
  font-weight: 700;
  font-size: 1.2rem;
  color: var(--navy);
  letter-spacing: 0.04em;
}
.brand-tag {
  font-size: 0.72rem;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.nav-links {
  display: flex;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-links a {
  font-size: 0.94rem;
  font-weight: 500;
  color: var(--navy);
  border: 0;
  padding: 6px 0;
  position: relative;
}
.nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.nav-links a:hover, .nav-links a.active { color: var(--gold); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta {
  display: inline-block;
  background: var(--navy);
  color: var(--cream);
  padding: 9px 18px;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 600;
  border: 0;
  transition: background 150ms ease, transform 150ms ease;
}
.nav-cta:hover {
  background: var(--gold);
  color: var(--navy);
  border: 0;
}

.nav-toggle {
  display: none;
  background: transparent;
  border: 1px solid var(--line);
  width: 44px;
  height: 44px;
  border-radius: 8px;
  cursor: pointer;
  position: relative;
}
.nav-toggle span {
  position: absolute;
  left: 11px; right: 11px;
  height: 2px;
  background: var(--navy);
  transition: transform 180ms ease, opacity 120ms ease, top 180ms ease;
}
.nav-toggle span:nth-child(1) { top: 14px; }
.nav-toggle span:nth-child(2) { top: 21px; }
.nav-toggle span:nth-child(3) { top: 28px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 21px; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 21px; transform: rotate(-45deg); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  padding: 13px 26px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.96rem;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all 160ms ease;
  text-align: center;
}
.btn-primary { background: var(--navy); color: var(--cream); }
.btn-primary:hover { background: var(--gold); color: var(--navy); border: 0; }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border-color: var(--navy);
}
.btn-outline:hover {
  background: var(--navy);
  color: var(--cream);
  border-color: var(--navy);
}

.btn-gold { background: var(--gold); color: var(--navy); }
.btn-gold:hover { background: var(--navy); color: var(--cream); border: 0; }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  background:
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 60%, var(--navy-soft) 100%);
  color: var(--cream);
  padding: clamp(60px, 10vw, 120px) 0 clamp(80px, 12vw, 140px);
  overflow: hidden;
}
.hero::before {
  /* subtle wire-gauge cross-hatch */
  content: "";
  position: absolute; inset: 0;
  background-image:
    linear-gradient(0deg,   rgba(201,169,97,0.07) 1px, transparent 1px),
    linear-gradient(90deg,  rgba(201,169,97,0.07) 1px, transparent 1px);
  background-size: 48px 48px;
  pointer-events: none;
  opacity: 0.6;
  mask-image: radial-gradient(ellipse at 70% 50%, black 30%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 30%, transparent 80%);
}

.hero-grid {
  position: relative;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 60px;
  align-items: center;
}

.hero h1 {
  color: var(--cream);
  margin-bottom: 20px;
}
.hero h1 .accent { color: var(--gold); }
.hero p.lead {
  font-size: 1.15rem;
  color: rgba(244, 237, 224, 0.85);
  margin-bottom: 32px;
  max-width: 56ch;
}

.hero-cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}
.hero-cta .btn-primary { background: var(--gold); color: var(--navy); }
.hero-cta .btn-primary:hover { background: var(--cream); color: var(--navy); }
.hero-cta .btn-outline { color: var(--cream); border-color: rgba(244,237,224,0.4); }
.hero-cta .btn-outline:hover { background: var(--cream); color: var(--navy); border-color: var(--cream); }

.hero-badge {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-badge img {
  width: min(420px, 100%);
  filter: drop-shadow(0 30px 60px rgba(0,0,0,0.45));
  animation: floaty 5.8s ease-in-out infinite;
}
@keyframes floaty {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-36px); }
}

.hero-stats {
  position: relative;
  margin-top: clamp(48px, 7vw, 80px);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding-top: 32px;
  border-top: 1px solid rgba(201,169,97,0.25);
}
.stat-num {
  font-family: "Playfair Display", serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: var(--gold);
  line-height: 1;
  margin-bottom: 6px;
}
.stat-label {
  font-size: 0.84rem;
  color: rgba(244,237,224,0.75);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* ---------- Section ---------- */
section { padding: clamp(60px, 9vw, 110px) 0; }

.section-eyebrow {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  padding-bottom: 8px;
  border-bottom: 2px solid var(--gold);
  margin-bottom: 18px;
}

.section-head {
  max-width: 720px;
  margin: 0 auto 56px;
  text-align: center;
}
.section-head.left { text-align: left; margin-left: 0; }

/* Two-up content (image + text) */
.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}
.split-img {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-md);
  background: var(--cream-deep);
  aspect-ratio: 4/3;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.split-img img { width: 80%; }

/* Photo variant — image fills the frame, cropped to cover. */
.split-img.photo { background: var(--navy-deep); }
.split-img.photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.split-img.photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(26,40,69,0.0) 60%, rgba(26,40,69,0.18) 100%);
  pointer-events: none;
}

/* ---------- Cards (products / industries) ---------- */
.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  position: relative;
  overflow: hidden;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
  border-color: rgba(201,169,97,0.5);
}
.card .icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: linear-gradient(135deg, var(--navy), var(--navy-soft));
  color: var(--gold);
  margin-bottom: 18px;
}
.card .icon img { width: 28px; height: 28px; }

/* CSS sprite for the strands / wave / globe icons.
   Source sprite: assets/icons/sprite.png — 384x128, 3 cells of 128x128
   displayed at 28x28 (background-size 84x28). */
.icon-sprite {
  display: block;
  width: 28px;
  height: 28px;
  background-image: url('../icons/sprite.png');
  background-size: 84px 28px;
  background-repeat: no-repeat;
}
.icon-sprite.is-strands { background-position:    0 0; }
.icon-sprite.is-wave    { background-position: -28px 0; }
.icon-sprite.is-globe   { background-position: -56px 0; }
.card h3 { margin-bottom: 10px; font-size: 1.2rem; }
.card p { color: var(--muted); margin: 0; font-size: 0.95rem; }
.card ul {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 0.9rem;
  color: var(--muted);
}
.card ul li {
  padding: 4px 0 4px 18px;
  position: relative;
}
.card ul li::before {
  content: "";
  position: absolute;
  left: 0; top: 13px;
  width: 8px; height: 2px;
  background: var(--gold);
}

/* ---------- Feature strip (alt bg) ---------- */
.alt-bg { background: var(--cream-deep); }
.dark-bg {
  background: var(--navy);
  color: var(--cream);
}
.dark-bg h2, .dark-bg h3 { color: var(--cream); }
.dark-bg p { color: rgba(244,237,224,0.82); }
.dark-bg .section-eyebrow { color: var(--gold); border-color: var(--gold); }

/* ---------- Quality / certifications row ---------- */
.cert-row {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 32px;
}
.cert-pill {
  background: #fff;
  border: 1px solid var(--line);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.03em;
}
.cert-pill::before {
  content: "✓";
  color: var(--gold);
  margin-right: 8px;
  font-weight: 700;
}

/* ---------- Process / steps ---------- */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
  counter-reset: step;
}
.step {
  position: relative;
  padding-top: 56px;
}
.step::before {
  counter-increment: step;
  content: counter(step, decimal-leading-zero);
  position: absolute;
  top: 0; left: 0;
  font-family: "Playfair Display", serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
}
.step h3 { font-size: 1.1rem; margin-bottom: 6px; }
.step p { color: var(--muted); font-size: 0.93rem; margin: 0; }

/* ---------- CTA strip ---------- */
.cta-strip {
  background:
    linear-gradient(135deg, var(--navy-deep) 0%, var(--navy) 100%);
  color: var(--cream);
  padding: clamp(48px, 8vw, 80px) 0;
  text-align: center;
}
.cta-strip h2 { color: var(--cream); margin-bottom: 12px; }
.cta-strip p  { color: rgba(244,237,224,0.85); max-width: 56ch; margin: 0 auto 28px; }

/* ---------- Forms ---------- */
.form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  max-width: 720px;
  margin: 0 auto;
}
.form .full { grid-column: 1 / -1; }
.form label {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}
.form input, .form select, .form textarea {
  width: 100%;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  color: var(--ink);
  transition: border-color 150ms ease, box-shadow 150ms ease;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 0;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(201,169,97,0.18);
}
.form textarea { min-height: 140px; resize: vertical; }
.form .err { color: #b3261e; font-size: 0.82rem; margin-top: 4px; display: none; }
.form .err.show { display: block; }
.form .ok-msg {
  background: rgba(201,169,97,0.18);
  border: 1px solid var(--gold);
  color: var(--navy);
  padding: 14px 18px;
  border-radius: 8px;
  display: none;
}
.form .ok-msg.show { display: block; }

/* ---------- Contact info row ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-bottom: 56px;
}
.contact-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  text-align: center;
}
.contact-card .icon {
  width: 48px; height: 48px;
  margin: 0 auto 14px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
}
.contact-card h4 {
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.contact-card p { margin: 0; color: var(--ink); }
.contact-card a { font-weight: 600; }

/* ---------- Footer ---------- */
.site-footer {
  background: var(--navy-deep);
  color: rgba(244,237,224,0.78);
  padding: 64px 0 24px;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  margin-bottom: 48px;
}
.footer-grid h4 {
  color: var(--gold);
  font-family: "Inter", sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer-grid ul { list-style: none; padding: 0; margin: 0; }
.footer-grid li { padding: 4px 0; }
.footer-grid a {
  color: rgba(244,237,224,0.78);
  border: 0;
}
.footer-grid a:hover { color: var(--gold); border: 0; }
.footer-brand {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
}
.footer-brand img { width: 56px; height: 56px; }
.footer-brand .brand-name { color: var(--cream); font-size: 1.3rem; }
.footer-brand .brand-tag  { color: var(--gold); }

.footer-bottom {
  border-top: 1px solid rgba(244,237,224,0.12);
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  color: rgba(244,237,224,0.55);
  font-size: 0.84rem;
}

/* ---------- Page header (non-home pages) ---------- */
.page-head {
  background: linear-gradient(135deg, var(--navy-deep), var(--navy));
  color: var(--cream);
  padding: clamp(64px, 9vw, 100px) 0 clamp(48px, 7vw, 72px);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.page-head::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 4px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.page-head h1 { color: var(--cream); margin-bottom: 10px; }
.page-head p { color: rgba(244,237,224,0.78); max-width: 56ch; margin: 0 auto; }

/* ---------- Breadcrumbs ---------- */
.crumbs {
  font-size: 0.84rem;
  color: rgba(244,237,224,0.6);
  margin-bottom: 14px;
  letter-spacing: 0.04em;
}
.crumbs a { color: var(--gold); border: 0; }

/* ---------- Tables (specs) ---------- */
.specs {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  font-size: 0.94rem;
}
.specs th, .specs td {
  text-align: left;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.specs th {
  background: var(--navy);
  color: var(--cream);
  font-weight: 600;
  letter-spacing: 0.04em;
  font-size: 0.84rem;
  text-transform: uppercase;
}
.specs tr:last-child td { border-bottom: 0; }
.specs tr:nth-child(even) td { background: rgba(244,237,224,0.4); }

/* ---------- Responsive ---------- */
@media (max-width: 920px) {
  .hero-grid { grid-template-columns: 1fr; gap: 40px; text-align: center; }
  .hero-cta { justify-content: center; }
  .hero-badge img { width: min(320px, 70%); }
  .hero-stats { grid-template-columns: repeat(2, 1fr); gap: 20px; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .steps { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .form { grid-template-columns: 1fr; }
}

/* Hide the header "Request Quote" pill before the nav goes burger:
   between ~921–1024px the horizontal nav is too crowded to fit the
   CTA pill cleanly (it overlaps the Contact link). The CTA is still
   reachable via the hero "Request a Quote" button and Contact link. */
@media (max-width: 1024px) {
  .nav-cta { display: none; }
}

@media (max-width: 920px) {
  .nav-toggle {
    display: block;
    margin-left: auto;   /* push to far right; the empty <nav> would
                            otherwise leave it stranded in the middle */
  }
  .nav-links {
    position: absolute;
    top: var(--header-h);
    left: 0; right: 0;
    background: var(--cream);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 8px 24px 20px;
    transform: translateY(-12px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 160ms ease, transform 160ms ease;
  }
  .nav-links.open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    box-shadow: var(--shadow-md);
  }
  .nav-links li { border-bottom: 1px solid var(--line); }
  .nav-links li:last-child { border-bottom: 0; }
  .nav-links a { display: block; padding: 14px 0; }
}

@media (max-width: 720px) {
  .brand img { width: 40px; height: 40px; }
  .brand-tag { display: none; }   /* keep BIHAR CABLES, drop the tagline */
  .brand-name { font-size: 1.05rem; }
  .footer-grid { grid-template-columns: 1fr; gap: 28px; }
  .footer-bottom { justify-content: center; text-align: center; }
}

@media (max-width: 380px) {
  .brand-name { font-size: 0.95rem; letter-spacing: 0.02em; }
}

@media (max-width: 480px) {
  .hero-stats { grid-template-columns: 1fr 1fr; }
  .container { padding: 0 18px; }
}

/* =====================================================================
   Scroll wire — left-edge gold "current" that fills with page scroll
   and a glow that rides the scroll position. Element is injected by
   main.js so all pages pick it up. Starts just below the sticky
   header so the glow is visible from the top of the page.
   ===================================================================== */
.scroll-wire {
  position: fixed;
  /* Centered vertically in the space between the header and the viewport
     bottom: equal gap above and below the 70vh wire. */
  top: calc(var(--header-h) / 2 + 15vh);
  height: 70vh;
  left: 40px;
  width: 2px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(to bottom,
              rgba(201, 169, 97, 0.14),
              rgba(201, 169, 97, 0.05));
}
.wire-fill {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(100% * var(--p, 0));
  background: linear-gradient(to bottom,
              rgba(201, 169, 97, 0.55),
              var(--gold));
  box-shadow: 0 0 6px rgba(201, 169, 97, 0.55);
  will-change: height;
}
.wire-glow {
  position: absolute;
  left: 50%;
  /* Glow center sits exactly on the fill's leading edge (no gap). */
  top: calc(100% * var(--p, 0));
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle,
              rgba(255, 224, 160, 1)   0%,
              rgba(217, 191, 131, 0.55) 35%,
              rgba(201, 169, 97, 0)    70%);
  transform: translate(-50%, -50%);
  opacity: 0;
  transition: opacity 250ms ease-out;
  will-change: top, opacity;
}
.scroll-wire.is-active .wire-glow { opacity: 1; }

@media (max-width: 1240px) {
  .scroll-wire {
    /* Threshold tied to the gutter: the container is max-width 1180 with 24px
       padding, so the content's left edge sits at 24px until the viewport
       grows past ~1228. The vertical wire lives at left:40px (right edge 42px),
       so any viewport ≤~1216 puts the wire inside the content area. We flip
       to a horizontal bar pinned under the sticky header at 1240px to leave
       a comfortable gap before the wire returns to the gutter. 8px inset on
       each side so the glow at the extremes doesn't render half off-screen.
       z-index sits above the sticky header (z-index: 50) so the glow stays
       visible if it ever overlaps the header's bottom edge. */
    top: var(--header-h);
    left: 8px;
    right: 8px;
    width: auto;
    height: 3px;
    z-index: 60;
    background: linear-gradient(to right,
                rgba(201, 169, 97, 0.14),
                rgba(201, 169, 97, 0.05));
  }
  .wire-fill {
    /* Horizontal fill: width grows L→R; height fills the 3px track. */
    top: 0; bottom: 0; left: 0; right: auto;
    width: calc(100% * var(--p, 0));
    height: auto;
    background: linear-gradient(to right,
                rgba(201, 169, 97, 0.55),
                var(--gold));
    will-change: width;
  }
  .wire-glow {
    /* Glow rides the leading edge horizontally, vertically centered
       on the 3px track. */
    top: 50%;
    left: calc(100% * var(--p, 0));
    width: 20px;
    height: 20px;
    will-change: left, opacity;
  }
}
@media (prefers-reduced-motion: reduce) {
  .scroll-wire { display: none; }
}