/* NDT Inspect rebuild — stacked cards on the homepage (2026-09-14).
   Markup from app/src/StackCards.php, motion from stack-cards.js. The script adds html.ndti-stk-on; every rule that makes a
   card sticky, clips, shrinks or dims it is scoped to that class, so without JavaScript (or with reduced motion) the page is
   plain blocks in page order. */

.ndti-stk{position:relative;isolation:isolate}
.ndti-stk__card{position:relative;background:#fff}
.ndti-stk__card--hero{background:#0b1620}
.ndti-stk__shade{display:none}

/* the dark stage the covered cards sink into */
html.ndti-stk-on .ndti-stk{background:#0b1620}
html.ndti-stk-on .ndti-stk__card{position:-webkit-sticky;position:sticky;top:0;z-index:0;overflow:hidden;overflow:clip;transform-origin:50% 0}
html.ndti-stk-on .ndti-stk__card+.ndti-stk__card{border-radius:clamp(22px,2.6vw,40px) clamp(22px,2.6vw,40px) 0 0;box-shadow:0 -26px 60px -20px rgba(3,10,16,.5)}
html.ndti-stk-on .ndti-stk__card.is-moving,html.ndti-stk-on .ndti-stk__card.is-moving>.ndti-stk__in{will-change:transform}
html.ndti-stk-on .ndti-stk__shade{display:block;position:absolute;inset:0;z-index:60;background:#050c12;opacity:0;pointer-events:none;border-radius:inherit}
/* a hairline of light along the arriving edge, so a white card reads as a sheet sliding over another white card */
html.ndti-stk-on .ndti-stk__card+.ndti-stk__card::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;z-index:61;pointer-events:none;border-radius:inherit;background:linear-gradient(90deg,transparent,rgba(255,255,255,.34) 20%,rgba(255,255,255,.34) 80%,transparent)}

/* section rail (wide screens): where you are in the deck; each dot scrolls to its card */
.ndti-stk__rail{position:fixed;right:22px;top:50%;z-index:600;opacity:0;visibility:hidden;pointer-events:none;transform:translate3d(18px,-50%,0);transition:opacity .5s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1),visibility 0s linear .5s}
.ndti-stk__rail.is-on{opacity:1;visibility:visible;pointer-events:auto;transform:translate3d(0,-50%,0);transition-delay:0s}
.ndti-stk__rail ol{display:flex;flex-direction:column;align-items:center;gap:11px;list-style:none;margin:0;padding:12px 8px;border-radius:999px;background:rgba(11,22,32,.46);border:1px solid rgba(255,255,255,.14);box-shadow:0 10px 30px rgba(3,10,16,.25);-webkit-backdrop-filter:blur(12px) saturate(1.3);backdrop-filter:blur(12px) saturate(1.3)}
.ndti-stk__rail li{display:flex;margin:0;padding:0}
.ndti-stk__dot{position:relative;display:block;width:8px;height:8px;margin:0;padding:0;border:0;border-radius:4px;background:rgba(255,255,255,.42);cursor:pointer;font:inherit;transition:height .5s cubic-bezier(.2,.7,.2,1),background-color .3s}
.ndti-stk__dot::before{content:"";position:absolute;inset:-7px -9px}
.ndti-stk__dot:hover{background:#fff}
.ndti-stk__dot.is-active{height:28px;background:#7FD18F}
.ndti-stk__dot:focus-visible{outline:2px solid #7FD18F;outline-offset:4px}
.ndti-stk__tip{position:absolute;right:calc(100% + 20px);top:50%;padding:6px 12px;border-radius:9px;background:#0b1620;color:#fff;font-size:12.5px;font-weight:700;line-height:1.3;letter-spacing:.01em;white-space:nowrap;box-shadow:0 8px 22px rgba(3,10,16,.28);opacity:0;pointer-events:none;transform:translate3d(8px,-50%,0);transition:opacity .25s,transform .3s cubic-bezier(.2,.7,.2,1)}
.ndti-stk__dot:hover .ndti-stk__tip,.ndti-stk__dot:focus-visible .ndti-stk__tip{opacity:1;transform:translate3d(0,-50%,0)}
@media (max-width:1339px){.ndti-stk__rail{display:none}}

@media print{
  html.ndti-stk-on .ndti-stk{background:none}
  html.ndti-stk-on .ndti-stk__card{position:relative;top:auto!important;transform:none!important;border-radius:0;box-shadow:none;overflow:visible}
  html.ndti-stk-on .ndti-stk__in{transform:none!important}
  .ndti-stk__shade,.ndti-stk__rail,html.ndti-stk-on .ndti-stk__card+.ndti-stk__card::before{display:none!important}
}

/* Card tones (2026-09-15, owner: "dark, next light, next dark…"). StackCards.php gives every card after the hero
   ndti-stk__card--dark or --light by position, switches the sections inside to ndti-sec--dark or back, and puts a lazy
   <img class="ndti-stk__bg"> under the dark cards listed in StackCards::PHOTOS; the scrim keeps the headings readable. */
.ndti-stk{--stk-scrim:linear-gradient(100deg,rgba(6,15,23,.94) 0%,rgba(6,15,23,.86) 30%,rgba(6,15,23,.66) 62%,rgba(6,15,23,.42) 100%)}
.ndti-stk__card--dark{color:#e7eef4;background:radial-gradient(48% 60% at 84% 20%,rgba(127,209,143,.22),transparent 70%),radial-gradient(40% 50% at 8% 90%,rgba(38,92,140,.35),transparent 70%),linear-gradient(115deg,#0b1620 0%,#0f2230 55%,#11291f 100%) #0b1620}
.ndti-stk__card--light{color:#0b1620;background:radial-gradient(52% 44% at 100% 0%,rgba(127,209,143,.18),transparent 62%),radial-gradient(38% 40% at 0% 100%,rgba(18,64,96,.09),transparent 62%) #f4f8f6}
.ndti-stk__card--light[data-stk-slug="company-members"]{background:radial-gradient(52% 44% at 100% 0%,rgba(127,209,143,.12),transparent 62%) #fff}
.ndti-stk__card--photo{background:#0b1620}
.ndti-stk__bg{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-select:none;user-select:none}
.ndti-stk__card--photo::after{content:"";position:absolute;inset:0;z-index:1;background:var(--stk-scrim);pointer-events:none}
.ndti-stk__card--photo>.ndti-stk__in{position:relative;z-index:2}
.ndti-stk__card--dark .ndti-sec,.ndti-stk__card--light .ndti-sec{background:transparent}
.ndti-stk__card--light .ndti-sec--stats{background:var(--ni,#0b1620)}
/* what sits inside a dark card */
.ndti-stk__card--dark .ndti-link{color:#7FD18F}
.ndti-stk__card--dark .ndti-card{background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#e7eef4}
.ndti-stk__card--dark .ndti-card h3{color:#fff}
.ndti-stk__card--dark .ndti-card p{color:#cfdde7}
.ndti-stk__card--dark .ndti-card:hover{box-shadow:0 12px 26px rgba(0,0,0,.35)}
.ndti-stk__card--dark .ndti-btn--d{background:var(--nb,#44A047);border-color:var(--nb,#44A047);color:#fff}
.ndti-stk__card--dark .ndti-btn--d:hover{background:#7FD18F;border-color:#7FD18F}
.ndti-stk__card--dark .ndti-btn--o{color:#fff;border-color:rgba(255,255,255,.45)}
.ndti-stk__card--dark .ndti-btn--o:hover{border-color:#fff;color:#fff}
.ndti-stk__card--dark .ndti-jobsfoot,.ndti-stk__card--dark .ndti-hcl__foot,.ndti-stk__card--dark .ndti-hc__foot{color:#cfdde7}
.ndti-stk__card--dark .ndti-hcl__chip{border-color:rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#e7eef4}
.ndti-stk__card--dark .ndti-hcl__chip b{background:rgba(255,255,255,.12);color:#cfdde7}
.ndti-stk__card--dark .ndti-hcl__chip:hover,.ndti-stk__card--dark .ndti-hcl__chip:focus-visible{border-color:#7FD18F;background:rgba(127,209,143,.12);color:#fff}
.ndti-stk__card--dark .ndti-hcl__chip--sale{border-color:rgba(127,209,143,.45);background:rgba(127,209,143,.14);color:#bfe9c8}
.ndti-stk__card--dark .ndti-hcl__chip--hire{border-color:rgba(241,196,120,.45);background:rgba(241,196,120,.14);color:#f6d9a6}
.ndti-stk__card--dark .ndti-band{border:1px solid rgba(255,255,255,.14)}
/* what sits inside a light card */
.ndti-stk__card--light .ndti-btn--lo{color:var(--ni,#0b1620);border-color:#cbd6de}
.ndti-stk__card--light .ndti-btn--lo:hover{border-color:var(--ni,#0b1620);color:var(--ni,#0b1620)}
.ndti-stk__card--light .ndti-standcard{border-color:#e3e9ee;box-shadow:0 8px 24px rgba(11,22,32,.08)}
.ndti-stk__card--light .ndti-standcard:hover{box-shadow:0 14px 30px rgba(11,22,32,.14)}
.ndti-stk__card--light .ndti-hc__lang{background:#fff;border-color:#e3e9ee;color:var(--ni,#0b1620)}
.ndti-stk__card--light .ndti-hc__lang:hover,.ndti-stk__card--light .ndti-hc__lang:focus-visible{border-color:#44a047;background:#eef8ef;color:var(--ni,#0b1620)}
.ndti-stk__card--light .ndti-hc__lang img{background:#eef2f5}
.ndti-stk__card--light .ndti-hc__lang-n{color:var(--ni,#0b1620)}
.ndti-stk__card--light .ndti-hc__lang-e{color:#57697a}
@media print{.ndti-stk__bg,.ndti-stk__card--photo::after{display:none}.ndti-stk__card--dark,.ndti-stk__card--light{background:#fff;color:#000}}