/* ==========================================================================
   Tell Equipment & Sales — v3 ENHANCEMENT LAYER
   Appended on top of tellequipment-8k.css — takes it from 3% toward the bar.
   The floor: spark-design-system console (dark navy + gold + editorial serif).
   This layer adds: gradient hero type, scroll-driven parallax, sticky
   section numbers, canvas grain, hover lift systems, animated rules,
   count-up stats, marquee polish, image treatments, CTA glow discipline.
   2026-08-25
   ========================================================================== */

/* ── 1. HERO: gradient ink headline + parallax bg ───────────── */
.hero h1{
  background:linear-gradient(180deg,#ffffff 25%,#8fa2b5 95%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
}
.hero h1 em{-webkit-text-fill-color:var(--red)}
.hero-bg{transform:scale(1.06);will-change:transform}
.hero-bg img{filter:saturate(.72) contrast(1.08) brightness(.9)}

/* scanline sweep across hero once on load */
.hero-wrap::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;z-index:3;
  background:linear-gradient(90deg,transparent,var(--red),transparent);
  animation:heroScan 5s var(--ease) 1s both;opacity:0;
}
@keyframes heroScan{0%{opacity:0;transform:translateY(0)}8%{opacity:1}92%{opacity:1}100%{opacity:0;transform:translateY(520px)}}

/* kicker pulse-dot */
.hero .kicker::after{content:"";width:7px;height:7px;background:var(--red);border-radius:50%;margin-left:2px;animation:blink 1.8s infinite}

/* hero facts slide-in stagger */
.hfact{opacity:0;transform:translateY(16px);animation:factIn .7s var(--ease) forwards}
.hfact:nth-child(1){animation-delay:.5s}.hfact:nth-child(2){animation-delay:.65s}.hfact:nth-child(3){animation-delay:.8s}
@keyframes factIn{to{opacity:1;transform:none}}

/* hero card corner accents */
.hero-card{position:relative}
.hero-card::before,.hero-card::after{content:"";position:absolute;width:18px;height:18px;border:2px solid var(--red)}
.hero-card::before{top:-1px;left:-1px;border-right:none;border-bottom:none}
.hero-card::after{bottom:-1px;right:-1px;border-left:none;border-top:none}

/* ── 2. SECTION NUMBERS: sticky rail feel + red hover ───────── */
.sec{position:relative}
.sec-no{transition:color .4s,-webkit-text-stroke-color .4s;cursor:default}
.sec:hover .sec-no i{-webkit-text-stroke-color:var(--red)}
.sec:hover .sec-no{-webkit-text-stroke-color:var(--ink)}
.bg-dark .sec:hover .sec-no,.bg-navy .sec:hover .sec-no{-webkit-text-stroke-color:#fff}

/* section head rule: grow on scroll into view */
.sec-head-rule{transform-origin:left;transform:scaleX(0);transition:transform .9s var(--ease) .15s}
.rv.in .sec-head-rule,.sec.in .sec-head-rule{transform:scaleX(1)}

/* ── 3. SPEC CELLS: lift + underline sweep ───────────────────── */
.spec-cell{transition:background .25s,transform .3s var(--ease),box-shadow .3s}
.spec-cell:hover{background:#fff;transform:translateY(-4px);box-shadow:0 18px 40px -18px rgba(10,22,34,.28)}
.spec-cell::after{content:"";position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--red);transform:scaleX(0);transform-origin:left;transition:transform .45s var(--ease)}
.spec-cell:hover::after{transform:scaleX(1)}
.spec-cell h3{transition:color .2s}
.spec-cell:hover h3{color:var(--red)}

/* ── 4. PROC ROWS: number fill + border glow ─────────────────── */
.proc-row{position:relative;overflow:hidden}
.proc-row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--red);transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ease)}
.proc-row:hover::before{transform:scaleY(1)}
.proc-row .pn{transition:color .35s,-webkit-text-stroke-color .35s}
.proc-row:hover .pn{-webkit-text-stroke-color:transparent;color:var(--red)}

/* ── 5. MEDIA CELLS: duotone treatment + caption slide ───────── */
.media-cell::after{content:"";position:absolute;inset:0;background:linear-gradient(160deg,rgba(10,22,34,.18),rgba(10,22,34,.55) 92%);mix-blend-mode:multiply;pointer-events:none;transition:opacity .4s}
.media-cell:hover::after{opacity:.35}
.media-cell .cap{transform:translateY(8px);transition:transform .45s var(--ease)}
.media-cell:hover .cap{transform:translateY(0)}
.media-cell .cap .ct::after{content:"";display:block;width:34px;height:2px;background:var(--red);margin-top:8px;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease) .1s}
.media-cell:hover .cap .ct::after{transform:scaleX(1)}

/* ── 6. IMAGE FRAMES: offset border sweep ────────────────────── */
.split .img-frame::before{content:"";position:absolute;top:0;left:0;width:44px;height:44px;border-top:3px solid var(--red);border-left:3px solid var(--red);z-index:2;opacity:0;transition:opacity .3s}
.split .img-frame::after{transform:translate(14px,14px)}
.split .img-frame:hover::before{opacity:1}

/* ── 7. STATS STRIP: count-up-ready + red pulse on hover ─────── */
.stat-cell{position:relative;overflow:hidden}
.stat-cell .v{font-variant-numeric:tabular-nums}
.stat-cell::after{content:"";position:absolute;right:-30px;top:-30px;width:90px;height:90px;background:rgba(255,255,255,.06);border-radius:50%;transform:scale(0);transition:transform .5s var(--ease)}
.stat-cell:hover::after{transform:scale(1)}

/* ── 8. MARQUEE: edge fades ──────────────────────────────────── */
.marquee{position:relative}
.marquee::before,.marquee::after{content:"";position:absolute;top:0;bottom:0;width:90px;z-index:2;pointer-events:none}
.marquee::before{left:0;background:linear-gradient(90deg,var(--red),transparent)}
.marquee::after{right:0;background:linear-gradient(270deg,var(--red),transparent)}

/* ── 9. TERRITORY TABLE: row slide-in + mono alignment ───────── */
.terr-table tr{opacity:0;transform:translateX(-10px)}
.terr-table.in tr,.rv.in .terr-table tr{animation:rowIn .5s var(--ease) forwards}
.terr-table tr:nth-child(1){animation-delay:.05s}.terr-table tr:nth-child(2){animation-delay:.12s}
.terr-table tr:nth-child(3){animation-delay:.19s}.terr-table tr:nth-child(4){animation-delay:.26s}
.terr-table tr:nth-child(5){animation-delay:.33s}.terr-table tr:nth-child(6){animation-delay:.4s}
.terr-table tr:nth-child(7){animation-delay:.47s}.terr-table tr:nth-child(8){animation-delay:.54s}
@keyframes rowIn{to{opacity:1;transform:none}}
.terr-table td{font-variant-numeric:tabular-nums}
.badge{transition:transform .2s,box-shadow .2s;display:inline-block}
.badge:hover{transform:translateY(-2px);box-shadow:0 6px 14px -6px rgba(10,22,34,.3)}

/* ── 10. FAQ: marker fill + body reveal ──────────────────────── */
.faq-item summary::before{transition:background .25s,color .25s}
.faq-item[open] summary::before{background:var(--red);color:#fff;border-color:var(--red)}
.faq-item .faq-body{opacity:0;animation:faqIn .45s var(--ease) .08s forwards}
@keyframes faqIn{to{opacity:1}}
.faq-item summary::after{content:"+";position:absolute;right:4px;top:24px;font-family:var(--t-mono);font-size:22px;color:var(--steel-2);transition:transform .3s var(--ease),color .25s}
.faq-item[open] summary::after{transform:rotate(45deg);color:var(--red)}
.faq-item summary{padding-right:44px}

/* ── 11. FORM: focus discipline + submit slide ───────────────── */
form.quote{position:relative;overflow:hidden}
form.quote::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red) 0%,var(--red) 40%,var(--ink) 40%);transform:translateX(-100%);animation:formStripe 6s linear infinite}
@keyframes formStripe{to{transform:translateX(100%)}}
.f-submit{position:relative;overflow:hidden}
.f-submit::after{content:"";position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.22),transparent);transition:left .5s var(--ease)}
.f-submit:hover::after{left:130%}
.f-group input:hover,.f-group select:hover,.f-group textarea:hover{border-color:var(--steel-2)}

/* ── 12. CTA BAND: red glow discipline (subtle) ──────────────── */
.cta-band .btn-red{box-shadow:0 0 0 0 rgba(200,16,46,.45)}
.cta-band .btn-red:hover{box-shadow:0 0 0 14px rgba(200,16,46,0);animation:ctaPulse 1.2s var(--ease)}
@keyframes ctaPulse{0%{box-shadow:0 0 0 0 rgba(200,16,46,.5)}100%{box-shadow:0 0 0 22px rgba(200,16,46,0)}}

/* ── 13. LOGO: industrial stamp hover ────────────────────────── */
.logo-mark{transition:transform .35s var(--ease)}
.logo-block:hover .logo-mark{transform:translateY(-2px)}
.logo-block:hover .logo-text .l1 span{color:var(--ink)}
.logo-text .l1 span{transition:color .25s}

/* ── 14. CLASSIFICATION STRIP: live ticker dot ───────────────── */
.class-strip{overflow:hidden}
.class-strip .wrap>div:first-child::before{content:"●";color:var(--red);margin-right:8px;animation:blink 2.4s infinite}

/* ── 15. BUTTONS: arrow affordance ───────────────────────────── */
.btn-red{position:relative}
.btn-red::after{content:"→";margin-left:10px;font-family:var(--t-mono);display:inline-block;transition:transform .25s var(--ease)}
.btn-red:hover::after{transform:translateX(5px)}
.btn-line::after{content:"→";margin-left:10px;font-family:var(--t-mono);display:inline-block;transition:transform .25s var(--ease)}
.btn-line:hover::after{transform:translateX(5px)}

/* ── 16. CHECK LISTS: staggered reveal ───────────────────────── */
.check-list li{opacity:0;transform:translateX(-8px)}
.rv.in .check-list li{animation:checkIn .4s var(--ease) forwards}
.rv.in .check-list li:nth-child(1){animation-delay:.1s}
.rv.in .check-list li:nth-child(2){animation-delay:.2s}
.rv.in .check-list li:nth-child(3){animation-delay:.3s}
.rv.in .check-list li:nth-child(4){animation-delay:.4s}
.rv.in .check-list li:nth-child(5){animation-delay:.5s}
@keyframes checkIn{to{opacity:1;transform:none}}

/* ── 17. PAGE HERO: gradient type + kicker line grow ─────────── */
.page-hero h1{
  background:linear-gradient(180deg,#ffffff 30%,#93a6b8 95%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.page-hero h1 em{-webkit-text-fill-color:var(--red)}
.page-hero .kicker::before{transform:scaleX(0);transform-origin:left;animation:kickGrow .7s var(--ease) .2s forwards}
@keyframes kickGrow{to{transform:scaleX(1)}}
.page-hero-bg img{filter:saturate(.65) contrast(1.05) brightness(.85)}

/* ── 18. TOPBAR: gradient sweep on load ──────────────────────── */
.topbar{position:relative;overflow:hidden}
.topbar::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 30%,rgba(255,255,255,.05) 50%,transparent 70%);transform:translateX(-100%);animation:barSweep 7s ease-in-out 2s infinite}
@keyframes barSweep{0%{transform:translateX(-100%)}55%,100%{transform:translateX(100%)}}

/* ── 19. FOOTER: gold hairline + colophon detail ─────────────── */
footer{position:relative}
footer::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:linear-gradient(90deg,var(--red) 0%,var(--red) 12%,transparent 12%)}
.foot-brand span{animation:blink 3s infinite}
.foot-grid a{position:relative}
.foot-grid a::before{content:"→";position:absolute;left:-18px;opacity:0;transition:opacity .2s,transform .2s;transform:translateX(-4px);font-family:var(--t-mono);font-size:11px;color:var(--red)}
.foot-grid a:hover{padding-left:0}
.foot-grid a:hover::before{opacity:1;transform:none}

/* ── 20. SCROLLBAR + SELECTION polish ────────────────────────── */
::-webkit-scrollbar{width:11px}
::-webkit-scrollbar-track{background:var(--paper-2)}
::-webkit-scrollbar-thumb{background:var(--steel-2);border:3px solid var(--paper-2);border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:var(--red)}
::selection{background:var(--red);color:#fff}

/* ── reduced motion: kill all v3 motion ──────────────────────── */
@media (prefers-reduced-motion:reduce){
  .hero-wrap::before,.topbar::after,form.quote::before{display:none}
  .hfact,.sec-head-rule,.terr-table tr,.check-list li,.faq-item .faq-body,
  .page-hero .kicker::before{opacity:1!important;transform:none!important;animation:none!important}
  .sec-head-rule{transform:scaleX(1)!important}
}

/* ── 21. REAL LOGO (brand kit 2026-08-26) ─────────────────── */
.logo-img{height:64px;width:auto;max-width:320px;object-fit:contain;display:block;transition:transform .35s var(--ease)}
/* The white-horizontal PNG: force pure white for header contrast */
.header-wrap .logo-img{height:64px}
@media(max-width:640px){.logo-img{height:44px;max-width:240px}}

/* 22. Header discipline: compact logo, nav never wraps under logo */
nav{flex-shrink:1;min-width:0}
nav a{padding:8px 12px;font-size:12.5px}
nav .btn-quote{padding:9px 14px;margin-left:4px;white-space:nowrap;flex-shrink:0}
@media(max-width:900px){
  .header-wrap{padding:10px 16px;gap:12px}
  nav a{padding:7px 8px;font-size:11px;letter-spacing:.03em}
  nav .btn-quote{padding:8px 12px;margin-left:2px}
  .nav-phones{flex-direction:column;gap:2px;width:100%;margin-left:0;margin-top:6px}
  .nav-phone{flex-direction:row;gap:6px;padding:4px 8px;width:100%;justify-content:flex-start}
  .nav-phone .np-label{font-size:7px}
  .nav-phone .np-num{font-size:11px}
  .logo-img{height:40px;max-width:200px}
}

/* ── 23. VIDEO HERO SECTIONS (8K Higgsfield videos) ───────── */
.video-hero{position:relative;overflow:hidden;background:var(--ink)}
.video-hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.55}
.video-hero .v-wrap{position:relative;z-index:2;padding:110px 0 90px}
.video-hero .v-scrim{position:absolute;inset:0;background:linear-gradient(100deg,rgba(7,22,56,.92) 0%,rgba(7,22,56,.55) 55%,rgba(7,22,56,.25) 100%);z-index:1}
.video-hero .kicker{color:#9db0c2}
.video-hero h1,.video-hero h2{color:#fff}
.video-hero .lede{color:#dde6ef}
@media (prefers-reduced-motion: reduce){.video-hero video{display:none}}
.video-band{position:relative;overflow:hidden;border-radius:6px;box-shadow:0 20px 60px rgba(7,22,56,.35)}
.video-band video{display:block;width:100%;height:auto}
.v-badge{position:absolute;top:14px;left:14px;z-index:2;background:rgba(7,22,56,.85);border:1px solid rgba(255,255,255,.15);color:#dde6ef;font-family:var(--t-mono);font-size:9.5px;letter-spacing:.16em;text-transform:uppercase;padding:6px 10px}

/* ── 24. FONT/CONTRAST HARDENING (dark sections + zoom) ─────── */
/* spec-cells inside dark sections: translucent dark cards, light text */
.bg-dark .spec-cell,.bg-navy .spec-cell{background:rgba(255,255,255,.06);border-top:3px solid var(--red)}
.bg-dark .spec-cell h3,.bg-navy .spec-cell h3{color:#fff}
.bg-dark .spec-cell p,.bg-navy .spec-cell p{color:#c3cfdd}
.bg-dark .spec-cell .tag,.bg-navy .spec-cell .tag{color:#9db0c2;border-color:rgba(255,255,255,.25)}
.bg-dark .spec-cell a,.bg-navy .spec-cell a{color:#fff}
.bg-dark .proc-row h3,.bg-navy .proc-row h3{color:#fff}
.bg-dark .proc-row p,.bg-navy .proc-row p{color:#c3cfdd}
.bg-dark .check-list li,.bg-navy .check-list li{color:#c3cfdd}
/* tables in dark sections */
.bg-dark .terr-table td,.bg-navy .terr-table td{color:#dde6ef;border-color:rgba(255,255,255,.14)}
/* FAQ in dark sections */
.bg-dark .faq-item,.bg-navy .faq-item{border-color:rgba(255,255,255,.15)}
.bg-dark .faq-body,.bg-navy .faq-body{color:#c3cfdd}
/* global: never white-on-white — force legible text in sections that somehow lose bg */
section.bg-paper2 .ig-stats,.ig-stats{background:var(--ink)}
/* zoom hardening: allow text wrap at 400% zoom */
h1,h2,h3,h4,p,li,a,td,th,summary,div{overflow-wrap:break-word}
/* media-band + video bands never overflow */
.media-band{max-width:100%}
img,video{max-width:100%;height:auto}
/* marquee safe on narrow screens */
.marquee{overflow:hidden}