/* Nilkimtek - home "technical library" bands.

   Two dark data bands that sit under the Product Family section on the home
   page and carry a compressed version of the article panels. Scoped to .nk-hl
   so nothing here can reach the article layer or the Elementor sections around
   it. The Lab Teal tokens are restated locally: this stylesheet loads on the
   home page, where the article stylesheet does not. */

.nk-hl{
  --hl-mint:#5EEAD4; --hl-amber:#D9A441; --hl-teal:#0F6B63; --hl-deep:#0A3A37;
  --hl-ink:#07211F;
  max-width:1180px; margin-inline:auto;
}
.nk-hl *{ box-sizing:border-box; }

/* ---- section header ----------------------------------------------------- */

.nk-hl-eyebrow{
  display:flex; align-items:center; gap:9px; margin:0 0 12px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.15em; text-transform:uppercase; color:var(--hl-teal);
}
.nk-hl-eyebrow::before{
  content:""; width:18px; height:2px; background:var(--hl-amber); flex:0 0 18px;
}
/* Specificity note: the three rules below carry a .nk-hl prefix they do not
   otherwise need. The Elementor kit styles headings and links by tag
   (.elementor-kit-6 h2 / h3 / a, specificity 0,1,1), which outranks a bare
   class and silently repainted the band titles near-black on a near-black
   band. The prefix takes these to 0,2,0. The widget's own controls sit one
   step above again, so the panel still wins. Do not flatten them back. */

.nk-hl .nk-hl-h{
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700;
  font-size:clamp(26px,3.2vw,36px); line-height:1.15; letter-spacing:-.01em;
  color:var(--hl-deep); margin:0 0 10px;
}
.nk-hl-sub{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:16px; line-height:1.65;
  color:rgba(7,33,31,.62); margin:0 0 34px; max-width:660px;
}

/* ---- the band ----------------------------------------------------------- */

.nk-hl-band{
  position:relative; overflow:hidden; border-radius:22px; padding:38px 36px;
  background:linear-gradient(160deg,#0A3A37 0%,#07211F 100%); color:#fff;
}
.nk-hl-band + .nk-hl-band{ margin-top:22px; }
/* a single soft light source, top right, so the two bands do not read as flat
   rectangles stacked on each other */
.nk-hl-band::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(640px 260px at 88% -12%,rgba(94,234,212,.13),transparent 70%);
}
.nk-hl-in{
  position:relative; z-index:1; display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1.12fr); gap:40px; align-items:center;
}
.nk-hl-band--flip .nk-hl-text{ order:2; }
.nk-hl-band--flip .nk-hl-viz{ order:1; }

.nk-hl-kicker{
  display:flex; align-items:center; gap:10px; margin:0 0 14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.16em; text-transform:uppercase; color:rgba(234,246,244,.55);
}
.nk-hl-kicker span{
  background:var(--hl-mint); color:var(--hl-ink); border-radius:5px; padding:3px 7px;
  letter-spacing:.1em;
}
.nk-hl .nk-hl-t{
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700;
  font-size:clamp(20px,2.3vw,26px); line-height:1.22; color:#fff; margin:0 0 12px;
}
.nk-hl-b{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:14.5px; line-height:1.68;
  color:rgba(234,246,244,.68); margin:0 0 20px;
}

.nk-hl-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; margin:0 0 24px; padding:0; }
.nk-hl-chips li{
  display:flex; align-items:center; gap:7px; padding:7px 13px 7px 9px;
  border:1px solid rgba(234,246,244,.18); border-radius:999px;
  background:rgba(255,255,255,.05);
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10.5px;
  letter-spacing:.05em; text-transform:uppercase; color:rgba(234,246,244,.8);
}
.nk-hl-chips svg{ width:15px; height:15px; flex:0 0 15px; }

.nk-hl .nk-hl-link{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--hl-ink);
  background:var(--hl-mint); border-radius:999px; padding:12px 19px;
  transition:transform .25s ease, box-shadow .25s ease;
}
/* the hover state lifts and casts, rather than lightening the fill: the mint is
   a palette value and there is no lighter one to move to */
.nk-hl .nk-hl-link:hover,.nk-hl .nk-hl-link:focus-visible{
  color:var(--hl-ink); transform:translateY(-2px);
  box-shadow:0 12px 28px rgba(94,234,212,.26);
}
.nk-hl-link svg{ width:14px; height:14px; flex:0 0 14px; transition:transform .25s ease; }
.nk-hl .nk-hl-link:hover svg,.nk-hl .nk-hl-link:focus-visible svg{ transform:translateX(3px); }

/* ---- chart -------------------------------------------------------------- */

.nk-hl-chart{
  margin:0; padding:22px 20px 16px; border-radius:16px;
  background:rgba(255,255,255,.045); border:1px solid rgba(234,246,244,.14);
}
.nk-hl-chart-h{
  display:flex; align-items:baseline; justify-content:space-between; gap:14px;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:10px;
  letter-spacing:.14em; text-transform:uppercase; color:rgba(234,246,244,.55);
  margin:0 0 16px;
}
.nk-hl-chart-h .nk-hl-unit{ color:rgba(234,246,244,.38); white-space:nowrap; }
/* The chart is HTML, not SVG, so its type keeps its px size while the bars
   take their width from the axis. See nk_hl_chart() for why. */
.nk-hl-rows{ position:relative; }
.nk-hl-grid{ position:absolute; inset:0; pointer-events:none; }
.nk-hl-grid i{
  position:absolute; top:0; bottom:0; width:1px; background:rgba(234,246,244,.12);
}
.nk-hl-row + .nk-hl-row{ margin-top:20px; }
.nk-hl-row-h{
  position:relative; z-index:1; display:flex; justify-content:space-between;
  align-items:baseline; gap:14px; margin:0 0 8px;
}
.nk-hl-row-l{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13.5px; line-height:1.3;
  color:rgba(234,246,244,.82);
}
.nk-hl-val{
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:12px;
  color:rgba(234,246,244,.6); white-space:nowrap;
}
.nk-hl-track{
  position:relative; height:14px; border-radius:7px; background:rgba(255,255,255,.06);
}
/* --bar is set inline from the article's own data. --nk-bar-N is set on the
   .nk-hl wrapper by the Elementor colour controls, so it inherits down and wins
   the var() chain without an inline style ever outranking the panel. */
.nk-hl-bar{
  position:absolute; top:0; bottom:0; border-radius:7px; display:block;
  background:var(--bar);
}
.nk-hl-bar--0{ background:var(--nk-bar-0,var(--bar)); }
.nk-hl-bar--1{ background:var(--nk-bar-1,var(--bar)); }
.nk-hl-axis{
  position:relative; height:13px; margin:14px 0 0; padding:0;
}
.nk-hl-axis span{
  position:absolute; top:0; transform:translateX(-50%); line-height:1;
  font-family:"IBM Plex Mono",ui-monospace,monospace; font-size:11px;
  color:rgba(234,246,244,.46); white-space:nowrap;
}
.nk-hl-note{
  margin:14px 0 0; font-family:"IBM Plex Sans",system-ui,sans-serif;
  font-size:11.5px; line-height:1.5; color:rgba(234,246,244,.5);
}

/* ---- cards -------------------------------------------------------------- */

.nk-hl-cards{ display:grid; gap:12px; }
.nk-hl-card{
  display:flex; gap:14px; align-items:flex-start; padding:16px 18px;
  border-radius:14px; background:rgba(255,255,255,.05);
  border:1px solid rgba(234,246,244,.15);
}
.nk-hl-ico{
  width:40px; height:40px; flex:0 0 40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:rgba(94,234,212,.10); border:1px solid rgba(94,234,212,.26);
}
.nk-hl-ico svg{ width:21px; height:21px; display:block; }
.nk-hl-card-t{
  font-family:"Space Grotesk",system-ui,sans-serif; font-weight:700;
  font-size:13.5px; line-height:1.25; letter-spacing:.01em; text-transform:uppercase;
  color:#fff; margin:0 0 5px;
}
.nk-hl-card-b{
  font-family:"IBM Plex Sans",system-ui,sans-serif; font-size:13px; line-height:1.55;
  color:rgba(234,246,244,.64); margin:0;
}

/* ---- motion -------------------------------------------------------------
   Every hidden state is nested under .nk-hl--anim, which only JavaScript adds.
   Without JS, or with reduced motion, the section renders fully visible and
   nothing below ever runs. */

.nk-hl--anim .nk-hl-head,
.nk-hl--anim .nk-hl-band{
  opacity:0; transform:translateY(24px);
  transition:opacity .75s cubic-bezier(.22,1,.36,1), transform .75s cubic-bezier(.22,1,.36,1);
}
.nk-hl--anim .nk-hl-head.is-in,
.nk-hl--anim .nk-hl-band.is-in{ opacity:1; transform:none; }

.nk-hl--anim .nk-hl-card,
.nk-hl--anim .nk-hl-chips li{
  opacity:0; transform:translateY(14px);
  transition:opacity .55s ease var(--d,0ms), transform .55s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.nk-hl--anim .is-in .nk-hl-card,
.nk-hl--anim .is-in .nk-hl-chips li{ opacity:1; transform:none; }

/* the bars grow from their own left edge to the real temperature, which is the
   one thing on this page worth animating: it is the measurement */
.nk-hl--anim .nk-hl-bar{
  transform:scaleX(0); transform-origin:left center;
  transition:transform .95s cubic-bezier(.22,1,.36,1) var(--d,0ms);
}
.nk-hl--anim .is-in .nk-hl-bar{ transform:scaleX(1); }
.nk-hl--anim .nk-hl-val{ opacity:0; transition:opacity .5s ease calc(var(--d,0ms) + 620ms); }
.nk-hl--anim .is-in .nk-hl-val{ opacity:1; }

/* ---- responsive --------------------------------------------------------- */

@media (max-width:900px){
  .nk-hl-in{ grid-template-columns:1fr; gap:26px; }
  /* source order is text first, so clearing order puts the copy above the visual */
  .nk-hl-band--flip .nk-hl-text,
  .nk-hl-band--flip .nk-hl-viz{ order:0; }
  .nk-hl-band{ padding:30px 24px; border-radius:18px; }
}
@media (max-width:600px){
  .nk-hl-band{ padding:26px 20px; }
  .nk-hl-sub{ margin-bottom:26px; }
  .nk-hl-chart{ padding:18px 14px 12px; }
  .nk-hl-link{ width:100%; justify-content:center; }
}

@media (prefers-reduced-motion:reduce){
  .nk-hl-link,.nk-hl-link svg{ transition:none; }
  .nk-hl-link:hover{ transform:none; }
}