/* ============================================================
   Panel-inspired polish kit — shared across construction + logistics
   Theme accent is driven by --pnl (set per-vertical by an inline
   head script + panel-polish.js). Construction = #f97316, Logistics = #52b788.
   All effects are additive / progressive-enhancement (no FOUC: JS only
   hides elements that are already off-screen).
   ============================================================ */
:root { --pnl: #f97316; --pnl-2: #c2410c; }

/* faint blueprint guide-lines across the whole page */
.pnl-on body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 112px);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 7%, #000 93%, transparent);
}

/* scroll reveal (kit-driven; class added by JS to off-screen blocks only) */
.pnl-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22, 1, .36, 1), transform .7s cubic-bezier(.22, 1, .36, 1); }
.pnl-reveal.pnl-vis { opacity: 1; transform: none; }
.pnl-reveal.pnl-d1 { transition-delay: .08s; }
.pnl-reveal.pnl-d2 { transition-delay: .16s; }
.pnl-reveal.pnl-d3 { transition-delay: .24s; }
.pnl-reveal.pnl-d4 { transition-delay: .32s; }

/* card hover-lift + cursor-follow spotlight (classes added by JS to common card selectors) */
.pnl-lift { transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.pnl-lift:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--pnl) 55%, #2a2a2c) !important; box-shadow: 0 18px 40px -26px rgba(0, 0, 0, .75); }
.pnl-spot { position: relative; }
.pnl-spot::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .3s ease; z-index: 1; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), color-mix(in srgb, var(--pnl) 12%, transparent), transparent 62%); }
.pnl-spot:hover::after { opacity: 1; }

/* animated count-up stats */
.pnl-stats { display: grid; gap: 1px; background: #1b1b1d; border: 1px solid #1b1b1d; border-radius: 14px; overflow: hidden; }
@media (min-width: 640px) { .pnl-stats { grid-template-columns: repeat(var(--pnl-cols, 4), 1fr); } }
.pnl-stat { background: #0f0f10; padding: 1.7rem 1.5rem; }
.pnl-stat .v { font-family: 'Bebas Neue', sans-serif; font-size: 2.9rem; line-height: 1; color: #f0f0f0; letter-spacing: .01em; }
.pnl-stat .v .u { color: var(--pnl); }
.pnl-stat .l { font-family: 'DM Mono', monospace; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #76767a; margin-top: .6rem; }

@media (prefers-reduced-motion: reduce) {
  .pnl-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .pnl-wipe { clip-path: none !important; opacity: 1 !important; }
  .pnl-lift:hover { transform: none; }
}

/* ---------- primitives (used by bespoke sections) ---------- */
.pnl-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .28em; text-transform: uppercase; color: var(--pnl); }
.pnl-eyebrow::before { content: ""; width: 7px; height: 7px; background: var(--pnl); border-radius: 1px; box-shadow: 0 0 10px color-mix(in srgb, var(--pnl) 70%, transparent); }

.pnl-wipe { clip-path: inset(0 112% 0 0); opacity: 0; transition: clip-path 1.15s cubic-bezier(.22, 1, .36, 1), opacity .7s ease; }
.reveal.visible .pnl-wipe, .pnl-reveal.pnl-vis .pnl-wipe, .pnl-wipe.pnl-vis, .visible .pnl-wipe { clip-path: inset(0 0 0 0); opacity: 1; }
.pnl-accent { color: var(--pnl); }

.pnl-section { position: relative; background: #101011; overflow: hidden; }
.pnl-gridlines::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(90deg, rgba(255, 255, 255, .022) 0 1px, transparent 1px 104px); -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent); }
/* section top accent-line draws in on scroll */
.pnl-section::after { content: ""; position: absolute; top: 0; left: 0; height: 1px; width: 0; background: linear-gradient(90deg, var(--pnl), transparent 80%); z-index: 2; pointer-events: none; transition: width 1.5s cubic-bezier(.22, 1, .36, 1); }
.pnl-section.in::after { width: 100%; }

/* agent terminal — clean, minimal */
.pnl-term { background: #0e0e0f; border: 1px solid #1e1e20; border-radius: 12px; overflow: hidden; box-shadow: 0 24px 50px -34px rgba(0, 0, 0, .8); }
.pnl-term-bar { display: flex; align-items: center; gap: .55rem; padding: .7rem 1.1rem; border-bottom: 1px solid #1a1a1c; }
.pnl-term-bar .pnl-dot { display: none; }
.pnl-term-bar::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pnl); box-shadow: 0 0 8px color-mix(in srgb, var(--pnl) 75%, transparent); animation: pnlPulse 2.4s ease-in-out infinite; }
@keyframes pnlPulse { 0%, 100% { opacity: 1; } 50% { opacity: .3; } }
.pnl-term-bar span { font-family: 'DM Mono', monospace; font-size: .7rem; letter-spacing: .05em; color: #67676a !important; }
.pnl-term-body { padding: 1.35rem 1.4rem; font-family: 'DM Mono', monospace; font-size: .82rem; line-height: 1.7; min-height: 272px; }
.pnl-user { color: #bdbdc0; } .pnl-user b { color: var(--pnl); font-weight: 500; }
.pnl-caret { display: inline-block; width: 7px; height: 1em; background: var(--pnl); vertical-align: -2px; animation: pnlBlink 1.05s steps(1) infinite; margin-left: 2px; opacity: .85; }
@keyframes pnlBlink { 50% { opacity: 0; } }
.pnl-step-line { display: flex; gap: .75rem; align-items: flex-start; opacity: 0; transform: translateY(5px); transition: opacity .45s ease, transform .45s ease; color: #79797d; }
.pnl-step-line.on { opacity: 1; transform: none; }
.pnl-step-line .ic { flex: 0 0 auto; width: 13px; margin-top: 1px; color: #46464a; font-size: .8rem; text-align: center; }
.pnl-step-line.done .ic { color: var(--pnl); }
.pnl-step-line.done .tx { color: #cdcdcf; }

/* comparison — clean, no badges */
.pnl-vs-col { border: 1px solid #1c1c1e; border-radius: 12px; overflow: hidden; }
.pnl-vs-head { padding: .8rem 1.2rem; font-family: 'DM Mono', monospace; font-size: .64rem; letter-spacing: .22em; text-transform: uppercase; color: #67676a; border-bottom: 1px solid #1a1a1c; }
.pnl-vs-head.pnl-accent { color: var(--pnl); }
.pnl-vs-row { display: flex; gap: .85rem; align-items: center; padding: .82rem 1.2rem; border-bottom: 1px solid #161618; color: #a6a6aa; font-size: .88rem; }
.pnl-vs-row:last-child { border-bottom: 0; }
.pnl-badge { flex: 0 0 auto; width: 14px; text-align: center; font-size: .8rem; line-height: 1; background: none; }
.pnl-badge.no { color: #56565a; }
.pnl-badge.yes { color: var(--pnl); }

/* numbered feature grid */
.pnl-num { position: relative; padding: 1.4rem 1.3rem; border: 1px solid #242426; border-radius: 14px; background: #131314; transition: border-color .25s, transform .25s; }
.pnl-num:hover { border-color: var(--pnl); transform: translateY(-3px); }
.pnl-num .n { font-family: 'DM Mono', monospace; font-size: .72rem; color: #5e5e61; letter-spacing: .1em; }
.pnl-num .tile { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(160deg, #232325, #151516); border: 1px solid #303032; display: grid; place-items: center; color: var(--pnl); margin: .4rem 0 .9rem; }

/* tabbed video stepper */
.pnl-tabs { display: flex; gap: 0; border-bottom: 1px solid #242426; flex-wrap: wrap; }
.pnl-tab { position: relative; padding: .9rem 1.2rem .9rem 0; margin-right: 1.6rem; cursor: pointer; font-family: 'DM Mono', monospace; font-size: .8rem; color: #6c6c6f; transition: color .2s; background: none; border: 0; text-align: left; }
.pnl-tab .tn { color: #444; margin-right: .5rem; }
.pnl-tab:hover { color: #bbb; }
.pnl-tab.active { color: #f4f4f4; } .pnl-tab.active .tn { color: var(--pnl); }
.pnl-tab::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: var(--pnl); transition: width .35s cubic-bezier(.22, 1, .36, 1); }
.pnl-tab.active::after { width: 100%; }
.pnl-screen { position: relative; border: 1px solid #242426; border-radius: 14px; overflow: hidden; background: #0c0c0d; aspect-ratio: 16/10; }
.pnl-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 3; background: linear-gradient(115deg, transparent 28%, color-mix(in srgb, var(--pnl) 10%, transparent) 46%, rgba(255, 255, 255, .05) 50%, transparent 64%); background-size: 280% 100%; animation: pnlStreak 7s linear infinite; }
@keyframes pnlStreak { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
.pnl-screen video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s ease; z-index: 1; }
.pnl-screen video.active { opacity: 1; z-index: 2; }
.pnl-slide-tx { opacity: 0; position: absolute; pointer-events: none; transition: opacity .4s ease; }
.pnl-slide-tx.active { opacity: 1; position: relative; pointer-events: auto; }
.pnl-prog { height: 3px; background: #1f1f21; border-radius: 3px; overflow: hidden; }
.pnl-prog i { display: block; height: 100%; width: 0; background: var(--pnl); }
@media (max-width: 767px) { .pnl-term-body { min-height: 260px; font-size: .78rem; } }

/* animated process timeline */
.pnl-tl { position: relative; margin-top: 3.5rem; }
.pnl-tl-steps { display: grid; grid-template-columns: 1fr; gap: 2.1rem; }
.pnl-tl-step { position: relative; padding-left: 2.6rem; opacity: 0; transform: translateY(14px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.pnl-tl.in .pnl-tl-step { opacity: 1; transform: none; }
.pnl-tl.in .pnl-tl-step:nth-child(2) { transition-delay: .12s; }
.pnl-tl.in .pnl-tl-step:nth-child(3) { transition-delay: .24s; }
.pnl-tl.in .pnl-tl-step:nth-child(4) { transition-delay: .36s; }
.pnl-tl.in .pnl-tl-step:nth-child(5) { transition-delay: .48s; }
.pnl-tl-node { position: absolute; left: 0; top: 1px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid #2a2a2c; background: #0d0d0e; display: grid; place-items: center; z-index: 1; }
.pnl-tl-node::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #343437; transition: background .45s ease, box-shadow .45s ease; }
.pnl-tl.in .pnl-tl-step:nth-child(1) .pnl-tl-node::after { transition-delay: .15s; }
.pnl-tl.in .pnl-tl-step:nth-child(2) .pnl-tl-node::after { transition-delay: .4s; }
.pnl-tl.in .pnl-tl-step:nth-child(3) .pnl-tl-node::after { transition-delay: .65s; }
.pnl-tl.in .pnl-tl-step:nth-child(4) .pnl-tl-node::after { transition-delay: .9s; }
.pnl-tl.in .pnl-tl-step:nth-child(5) .pnl-tl-node::after { transition-delay: 1.15s; }
.pnl-tl.in .pnl-tl-step .pnl-tl-node::after { background: var(--pnl); box-shadow: 0 0 10px color-mix(in srgb, var(--pnl) 70%, transparent); }
.pnl-tl-line { position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: #1b1b1d; overflow: hidden; border-radius: 2px; }
.pnl-tl-line i { position: absolute; left: 0; top: 0; width: 100%; height: 0; background: linear-gradient(180deg, var(--pnl), color-mix(in srgb, var(--pnl) 25%, transparent)); transition: height 1.7s cubic-bezier(.22, 1, .36, 1); }
.pnl-tl.in .pnl-tl-line i { height: 100%; }
.pnl-tl-step .num { font-family: 'DM Mono', monospace; font-size: .7rem; color: var(--pnl); letter-spacing: .18em; }
.pnl-tl-step h3 { font-family: 'Bebas Neue', sans-serif; font-size: 1.7rem; line-height: 1; color: #ededed; margin: .35rem 0 .45rem; letter-spacing: .01em; }
.pnl-tl-step .desc { color: #8a8a8e; font-size: .9rem; line-height: 1.55; max-width: 34ch; }
@media (min-width: 768px) {
  .pnl-tl-steps { grid-template-columns: repeat(var(--n, 4), 1fr); gap: 1.6rem; }
  .pnl-tl-step { padding-left: 0; padding-top: 3.2rem; }
  .pnl-tl-node { top: 0; }
  .pnl-tl-line { left: 0; right: 0; top: 10px; bottom: auto; width: auto; height: 2px; }
  .pnl-tl-line i { width: 0; height: 100%; transition: width 1.7s cubic-bezier(.22, 1, .36, 1); }
  .pnl-tl.in .pnl-tl-line i { width: 100%; height: 100%; }
}

/* cascade stagger for grid children (kit-driven, dead pages) */
.pnl-cascade { opacity: 0; transform: translateY(16px); transition: opacity .6s cubic-bezier(.22, 1, .36, 1), transform .6s cubic-bezier(.22, 1, .36, 1); }
.pnl-reveal.pnl-vis .pnl-cascade, .pnl-cascade.pnl-vis { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .pnl-tl-step, .pnl-cascade { opacity: 1 !important; transform: none !important; }
  .pnl-tl-line i { transition: none !important; }
}

/* ---------- text + effect enhancements ---------- */
/* word-by-word headline reveal */
.pnl-words .w { display: inline-block; opacity: 0; transform: translateY(.5em); transition: opacity .55s cubic-bezier(.22, 1, .36, 1), transform .55s cubic-bezier(.22, 1, .36, 1); }
.pnl-words.in .w { opacity: 1; transform: none; }

/* pulsing eyebrow bullet */
.pnl-eyebrow::before { animation: pnlDot 2.6s ease-in-out infinite; }
@keyframes pnlDot { 0%, 100% { box-shadow: 0 0 8px color-mix(in srgb, var(--pnl) 55%, transparent); } 50% { box-shadow: 0 0 15px color-mix(in srgb, var(--pnl) 95%, transparent); } }

/* accent CTA hover: lift + glow + shine sweep */
.pnl-cta { position: relative; overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; }
.pnl-cta:hover { transform: translateY(-1px); box-shadow: 0 12px 30px -12px color-mix(in srgb, var(--pnl) 60%, transparent); filter: brightness(1.04); }
.pnl-cta::after { content: ""; position: absolute; top: 0; left: -130%; width: 55%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); transform: skewX(-20deg); pointer-events: none; }
.pnl-cta:hover::after { animation: pnlShine .75s ease; }
@keyframes pnlShine { from { left: -130%; } to { left: 130%; } }

/* scrolling capabilities marquee */
.pnl-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.pnl-marquee-track { display: flex; width: max-content; animation: pnlMarq 36s linear infinite; }
.pnl-marquee:hover .pnl-marquee-track { animation-play-state: paused; }
@keyframes pnlMarq { to { transform: translateX(-50%); } }
.pnl-mq { display: flex; align-items: center; gap: 2.4rem; padding-right: 2.4rem; font-family: 'DM Mono', monospace; font-size: .8rem; letter-spacing: .16em; text-transform: uppercase; color: #86868a; white-space: nowrap; }
.pnl-mq::before { content: ""; width: 5px; height: 5px; border-radius: 1px; background: var(--pnl); flex: 0 0 auto; }

/* scroll-progress bar (created by JS when a page has no #nav-progress) */
.pnl-progress { position: fixed; top: 0; left: 0; height: 2px; width: 0; background: var(--pnl); z-index: 9999; pointer-events: none; box-shadow: 0 0 10px color-mix(in srgb, var(--pnl) 65%, transparent); }
/* magnetic cards */
.pnl-mag { transition: transform .3s cubic-bezier(.22, 1, .36, 1); will-change: transform; }
/* blueprint SVG self-draws on scroll-in */
.pnl-draw { transition: stroke-dashoffset 1.8s ease; }
.pnl-draw.in { stroke-dashoffset: 0 !important; }
/* sliding accent underline for footer links */
.pnl-ul { background-image: linear-gradient(var(--pnl), var(--pnl)); background-size: 0% 1px; background-position: 0 100%; background-repeat: no-repeat; transition: background-size .3s ease, color .2s ease; }
.pnl-ul:hover { background-size: 100% 1px; }
/* icon micro-motion on card hover */
.service-card svg, .gn-card svg, .pnl-num .tile svg { transition: transform .3s cubic-bezier(.22, 1, .36, 1); }
.service-card:hover svg, .gn-card:hover svg, .pnl-num:hover .tile svg { transform: translateY(-2px) scale(1.07); }

@media (prefers-reduced-motion: reduce) {
  .pnl-words .w { opacity: 1 !important; transform: none !important; }
  .pnl-section::after { width: 100% !important; transition: none !important; }
  .pnl-eyebrow::before { animation: none; }
  .pnl-marquee-track { animation: none; }
  .pnl-mag { transition: none; }
  .pnl-draw { stroke-dashoffset: 0 !important; }
  .service-card:hover svg, .gn-card:hover svg, .pnl-num:hover .tile svg { transform: none; }
}