/* ==========================================================================
   Industries We Serve — home teaser band (.tz) and the hero stage (.ind)
   ========================================================================== */

/* ---------- teaser band on the home page ---------- */
.tz{border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:64px 0;background:var(--coal)}
.tz-in{display:grid;grid-template-columns:1.1fr .9fr;gap:40px;align-items:center}
@media(max-width:900px){.tz-in{grid-template-columns:1fr}}
.tz .eyebrow{color:var(--gold-bright);margin-bottom:14px}
.tz .eyebrow:before{content:"";width:34px;height:1px;background:var(--gold)}
.tz h2{font-size:clamp(30px,3.6vw,44px)}
.tz h2 em{font-style:normal;color:var(--gold-bright)}
.tz p{color:#c3c8cb;font-size:15.5px;max-width:56ch;margin-top:10px}
.tz-strip{display:flex;gap:16px 18px;flex-wrap:wrap;margin-top:18px;font-family:var(--fm);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.tz-strip span{position:relative;padding-left:12px}
.tz-strip span:before{content:"";position:absolute;left:0;top:6px;width:5px;height:5px;background:var(--crimson-bright);border-radius:50%}
.tz-cta{display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-self:end}
@media(max-width:900px){.tz-cta{justify-self:start}}
.tz-draw{width:220px;height:74px;background:#0d0f11;border:1px solid rgba(233,197,101,.28);position:relative;overflow:hidden;flex:none}
.tz-draw:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px)}
.tz-draw svg{position:relative;display:block;width:100%;height:100%}
.tz-draw .ld{stroke:var(--gold-bright);fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:420;stroke-dashoffset:420;animation:mfLdraw 7s ease-in-out infinite}
.tz-draw .ln{fill:none;stroke:var(--gold-bright);stroke-width:1.8;stroke-linejoin:round;animation:mfLnut 7s ease-in-out infinite}
.tz-draw .lc{fill:none;stroke:var(--crimson-bright);stroke-width:1.2;stroke-dasharray:3 3;opacity:.7}
@keyframes mfLdraw{0%{stroke-dashoffset:420}28%{stroke-dashoffset:0}82%{stroke-dashoffset:0}100%{stroke-dashoffset:420}}
@keyframes mfLnut{0%,30%{transform:translateX(64px);opacity:0}34%{opacity:1}56%{transform:translateX(0);opacity:1}82%{transform:translateX(0);opacity:1}90%,100%{transform:translateX(0);opacity:0}}
@media(prefers-reduced-motion:reduce){.tz-draw .ld{animation:none;stroke-dashoffset:0}.tz-draw .ln{animation:none}}

/* ---------- the section ---------- */
.ind{padding:76px 0 84px;background:linear-gradient(180deg,var(--coal),#101214)}
.ind .eyebrow{color:var(--gold-bright);margin-bottom:14px}
.ind .eyebrow:before{content:"";width:34px;height:1px;background:var(--gold)}
.ind h2{font-size:clamp(34px,4.6vw,58px)}
.ind h2 em{font-style:normal;color:var(--gold-bright)}
.ind .lead{color:#c3c8cb;font-size:16.5px;max-width:64ch;margin-top:14px}
.ind .hero{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,.8fr);gap:34px;align-items:start;margin-top:34px}
@media(max-width:960px){.ind .hero{grid-template-columns:1fr}}

.ind .stage{position:relative;width:100%;background:#0d0f11;border:1px solid rgba(233,197,101,.28);box-shadow:0 30px 80px rgba(0,0,0,.55),inset 0 0 0 1px rgba(255,255,255,.03);aspect-ratio:1200/560;overflow:hidden}
.ind .stage:before{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,rgba(255,255,255,.018) 0 2px,transparent 2px 7px),radial-gradient(120% 90% at 50% 110%,rgba(160,20,35,.18),transparent 60%);pointer-events:none;z-index:1}
.ind .stage svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ind .hud{position:absolute;left:14px;top:12px;font-family:var(--fm);font-size:10.5px;letter-spacing:.16em;color:var(--gold-bright);text-transform:uppercase;z-index:2}
.ind .hud b{display:inline-block;width:8px;height:8px;background:var(--crimson-bright);border-radius:50%;margin-right:8px;animation:mfBlink 1.2s infinite}
@keyframes mfBlink{50%{opacity:.25}}
.ind .beat{position:absolute;right:14px;top:12px;font-family:var(--fm);font-size:10px;letter-spacing:.16em;color:var(--mut);text-transform:uppercase;z-index:2}
.ind .beat i{color:var(--gold-bright);font-style:normal}
.ind .bar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(255,255,255,.06);z-index:2}
.ind .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--crimson-bright))}
.ind .spec{position:absolute;left:14px;bottom:14px;z-index:2;display:flex;gap:8px;flex-wrap:wrap;opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;max-width:52%}
.ind .spec.on{opacity:1;transform:none}
.ind .spec span{font-family:var(--fm);font-size:11px;letter-spacing:.1em;color:#221803;background:var(--gold-bright);padding:5px 8px;font-weight:600}
.ind .spec span.c{background:var(--crimson-bright);color:#fff}
.ind .cap{position:absolute;right:14px;bottom:14px;max-width:44%;text-align:right;font-size:12.5px;color:#d7dbdd;line-height:1.35;z-index:2;text-shadow:0 1px 2px #000;opacity:0;transition:opacity .4s}
.ind .cap.on{opacity:1}
@media(max-width:600px){.ind .cap{display:none}.ind .spec{max-width:100%}.ind .beat{display:none}}

/* line-work classes inside the stage */
.ind .stage .E{fill:none;stroke:rgba(236,238,238,.42);stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.ind .stage .E2{fill:none;stroke:rgba(236,238,238,.22);stroke-width:1;stroke-linecap:round}
.ind .stage .R{fill:none;stroke:rgba(236,238,238,.62);stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ind .stage .L{fill:none;stroke:var(--gold-bright);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ind .stage .C{fill:none;stroke:var(--crimson-bright);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.ind .stage .F{fill:none;stroke:rgba(236,238,238,.55);stroke-width:1.1;stroke-linecap:round}
.ind .stage .H{fill:none;stroke:rgba(236,238,238,.22);stroke-width:.8}
.ind .stage .D{fill:none;stroke:rgba(233,197,101,.55);stroke-width:1;stroke-dasharray:4 3}
.ind .stage .d{stroke-dasharray:1;stroke-dashoffset:1;opacity:0}
.ind .stage .box{fill:none;stroke:var(--crimson-bright);stroke-width:1.2;stroke-dasharray:6 4;opacity:0;transition:opacity .4s}
.ind .stage .box.on{opacity:.9}
.ind .stage .box.hl{stroke:var(--gold-bright);stroke-dasharray:none;fill:rgba(233,197,101,.10);animation:mfBoxHl 1.1s ease-in-out infinite alternate}
@keyframes mfBoxHl{from{stroke-width:1.2;fill:rgba(233,197,101,.06)}to{stroke-width:2.6;fill:rgba(233,197,101,.16)}}
.ind .stage text{font-family:var(--fm);font-size:9px;fill:var(--gold-bright);letter-spacing:.08em;opacity:0}
.ind .stage .FL1{fill:none;stroke:var(--gold-bright);stroke-width:1.6;stroke-linejoin:round}
.ind .stage .FL2{fill:none;stroke:var(--crimson-bright);stroke-width:1.3;stroke-linejoin:round}
.ind .stage .flame{transform-box:fill-box;transform-origin:50% 100%;animation:mfFlick .55s ease-in-out infinite alternate}
@keyframes mfFlick{0%{transform:scaleY(1) skewX(0)}50%{transform:scaleY(1.14) skewX(-4deg)}100%{transform:scaleY(.96) skewX(4deg)}}
.ind .stage .after{opacity:0;transition:opacity .6s}
.ind .stage .after.on{opacity:1}
.ind .stage .SUN{fill:none;stroke:var(--gold-bright);stroke-width:1.6;stroke-linecap:round}
.ind .stage .RAY{fill:none;stroke:var(--gold-bright);stroke-width:1;stroke-linecap:round;opacity:.5}
.ind .stage .GL{fill:none;stroke:#fff;stroke-width:2.2;stroke-linecap:round;opacity:0;animation:mfGlint 2.6s ease-in-out infinite}
@keyframes mfGlint{0%,60%{opacity:0;transform:translateX(-8px)}75%{opacity:.95}90%,100%{opacity:0;transform:translateX(10px)}}

/* side panel */
.ind .side{display:flex;flex-direction:column;gap:14px;justify-content:center;min-width:0;align-self:center}
.ind .side .n{font-family:var(--fm);font-size:12px;letter-spacing:.2em;color:var(--gold-bright);text-transform:uppercase}
.ind .side h3{font-family:var(--fd);font-weight:800;text-transform:uppercase;font-size:clamp(40px,5vw,70px);line-height:.9;transition:opacity .35s,transform .35s;margin:0}
.ind .side h3.sw{opacity:0;transform:translateY(8px)}
.ind .side p{color:#c3c8cb;font-size:15.5px;max-width:40ch;margin:0}
.ind .parts{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.ind .parts a{font-family:var(--fm);font-size:10.5px;letter-spacing:.08em;color:var(--gold-bright);border:1px solid rgba(217,169,63,.4);padding:5px 8px;text-decoration:none;transition:background .15s}
.ind .parts a:hover{background:rgba(217,169,63,.1)}
.ind .ctl{display:flex;gap:10px;margin-top:8px;font-family:var(--fm);font-size:11px;letter-spacing:.14em;text-transform:uppercase}
.ind .ctl button{background:transparent;border:1px solid var(--hairline);color:var(--gold-bright);font:inherit;padding:9px 13px;cursor:pointer;letter-spacing:.14em}
.ind .ctl button:hover{border-color:var(--gold)}
.ind .ctl button.snd{display:inline-flex;align-items:center;gap:8px;color:#8f979d}
.ind .ctl button.snd .ico{display:inline-flex}
.ind .ctl button.snd .waves{opacity:0}
.ind .ctl button.snd.on{border-color:var(--gold);color:var(--gold-bright);background:rgba(217,169,63,.08)}
.ind .ctl button.snd.on .waves{opacity:1}
.ind .ctl button.snd.on .cross{opacity:0}
@media(max-width:600px){.ind .ctl{flex-wrap:wrap}}

/* selector tiles */
.ind .tiles{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:8px;margin-top:18px}
@media(max-width:1400px){.ind .tiles{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media(max-width:600px){.ind .tiles{grid-template-columns:repeat(3,1fr)}}
.ind .tile{background:var(--panel);border:1px solid var(--hairline);padding:10px 8px 9px;cursor:pointer;transition:border-color .2s,background .2s;position:relative;overflow:hidden;text-align:left;font:inherit;color:inherit}
.ind .tile b{display:block;font-family:var(--fm);font-size:9.5px;letter-spacing:.14em;color:var(--mut)}
.ind .tile span{display:block;font-family:var(--fd);font-weight:700;text-transform:uppercase;font-size:14px;line-height:1.05;margin-top:4px;letter-spacing:.02em;overflow-wrap:anywhere}
.ind .tile:hover{border-color:rgba(233,197,101,.45)}
.ind .tile.on{border-color:var(--gold);background:#24282c}
.ind .tile.on b{color:var(--gold-bright)}
.ind .tile.on:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--gold)}
.ind .tile.seen:before{content:"";position:absolute;right:8px;top:9px;width:5px;height:5px;border-radius:50%;background:var(--gold-deep)}

.ind .ind-cta{margin-top:34px;display:flex;gap:12px;flex-wrap:wrap}