/* ==================================================================
   THE SKANDITECH CREDIT — shared by every page on this site.

   One object, two sizes: a signature band that closes the landing
   page, and a compact plate that sits in the footer's legal row on
   every page.

   The host supplies five values and nothing else, so the credit
   repaints into any palette by changing this block alone:
     --sk-ink     the ground it sits on
     --sk-line    the hairline
     --sk-text    the readable text colour
     --sk-mute    the quiet label colour
     --sk-accent  the host's accent

   The wordmark is a real vector of the Skanditech lockup, applied as
   a mask so one colour property tints it and it can transition like
   text. Do not swap it for a webfont: those letterforms are custom
   artwork (triangular A, chevron K, curved H) and no font has them.
   ================================================================== */

.sk {
  --sk-ink: var(--ink);
  --sk-line: var(--frame);
  --sk-text: var(--bone);
  --sk-mute: var(--bone-dim);
  --sk-accent: var(--amber);
  --sk-field-op: .44;
  --sk-e: cubic-bezier(.16, 1, .3, 1);
}

/* ---- the mark. Three ascending chevrons. The accent climbs the
        stack on hover, one step at a time, which is the mark's own
        meaning rather than a bolted-on hover effect. -------------- */
.sk-mark { display: block; flex: none; overflow: visible }
.sk-mark path { transition: stroke .34s var(--sk-e), fill .34s var(--sk-e), opacity .34s var(--sk-e) }
.sk-mark .t1 { fill: none; stroke: currentColor; opacity: .46 }
.sk-mark .t2 { fill: none; stroke: currentColor; opacity: .72 }
.sk-mark .t3 { fill: var(--sk-accent); stroke: none }
.sk:hover .sk-mark .t2 { stroke: var(--sk-accent); opacity: 1; transition-delay: .05s }
.sk:hover .sk-mark .t1 { stroke: var(--sk-accent); opacity: 1; transition-delay: .11s }

/* ---- the wordmark ------------------------------------------------ */
.sk-word {
  display: block; aspect-ratio: 4292 / 452; background: currentColor;
  -webkit-mask: url(skanditech-wordmark.svg) center / contain no-repeat;
          mask: url(skanditech-wordmark.svg) center / contain no-repeat;
  transition: background-color .34s var(--sk-e);
}

/* =============== A. THE SIGNATURE BAND (landing page) ============= */
/* z-index 2 is load-bearing here, not decoration: .sw-sky is a fixed
   positioned layer at z-index 0 and a positioned element beats a static
   one in the painting order. This is exactly what made the footer
   invisible in production before commit 34a83e7. */
.sk-band {
  position: relative; z-index: 2; display: block; text-decoration: none;
  padding: clamp(40px, 6vw, 68px) 24px;
  background: var(--sk-ink); border-top: 1px solid var(--sk-line);
  overflow: hidden;
}
.sk-band::before {
  content: ""; position: absolute; left: 50%; bottom: -10%;
  width: min(620px, 110%); aspect-ratio: 2.4 / 1; transform: translateX(-50%);
  background: radial-gradient(58% 100% at 50% 100%,
    color-mix(in oklab, var(--sk-accent) 20%, transparent), transparent 70%);
  opacity: .75; pointer-events: none; transition: opacity .5s var(--sk-e);
}
.sk-band:hover::before { opacity: 1 }

/* the emanation: the mark's own contour repeated outward, so the band's
   ornament comes from the identity instead of being a generic divider */
.sk-field {
  position: absolute; left: 50%; bottom: -6%; width: min(1420px, 164%);
  transform: translateX(-50%); pointer-events: none; color: var(--sk-accent);
  opacity: var(--sk-field-op); transition: opacity .6s var(--sk-e);
  -webkit-mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
          mask: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent);
}
.sk-band:hover .sk-field { opacity: calc(var(--sk-field-op) * 1.75) }

.sk-band-in {
  position: relative; display: flex; flex-direction: column;
  align-items: center; gap: 18px; text-align: center;
}
.sk-eyebrow {
  font-family: var(--font-label); font-size: 10px; font-weight: 600;
  letter-spacing: .36em; text-transform: uppercase;
  color: var(--sk-mute); transition: color .34s var(--sk-e);
}
.sk-band:hover .sk-eyebrow { color: var(--sk-text) }
.sk-lock { display: flex; align-items: flex-end; gap: clamp(14px, 2.2vw, 22px); color: var(--sk-text) }
.sk-band .sk-mark { height: clamp(38px, 5.2vw, 54px); width: auto }
.sk-band .sk-word { width: clamp(168px, 23vw, 248px) }
.sk-band:hover .sk-word { background-color: var(--sk-accent) }
.sk-tail {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--font-label); font-size: 12px; letter-spacing: .02em;
  color: var(--sk-mute); transition: color .34s var(--sk-e);
}
.sk-band:hover .sk-tail { color: var(--sk-text) }
.sk-tail svg { transition: transform .34s var(--sk-e) }
.sk-band:hover .sk-tail svg { transform: translate(2px, -2px) }

/* =============== B. THE FOOTER PLATE ============================== */
.sk-plate {
  display: inline-flex; align-items: stretch; text-decoration: none;
  border: 1px solid var(--sk-line); border-radius: 10px;
  background: color-mix(in oklab, var(--sk-text) 3%, transparent);
  transition: border-color .34s var(--sk-e), background-color .34s var(--sk-e);
}
.sk-plate:hover {
  border-color: color-mix(in oklab, var(--sk-accent) 45%, transparent);
  background: color-mix(in oklab, var(--sk-accent) 7%, transparent);
}
.sk-plate .sk-mark { height: 30px; width: auto; color: var(--sk-text); align-self: center; margin: 11px 14px 11px 13px }
.sk-plate-txt {
  display: flex; flex-direction: column; justify-content: center; gap: 6px;
  padding: 11px 16px 11px 14px; border-left: 1px solid var(--sk-line);
  transition: border-color .34s var(--sk-e);
}
.sk-plate:hover .sk-plate-txt { border-color: color-mix(in oklab, var(--sk-accent) 40%, transparent) }
.sk-plate-lab {
  font-family: var(--font-label); font-size: 9px; font-weight: 600;
  letter-spacing: .3em; text-transform: uppercase;
  color: var(--sk-mute); transition: color .34s var(--sk-e);
}
.sk-plate:hover .sk-plate-lab { color: var(--sk-text) }
.sk-plate .sk-word { width: 112px; color: var(--sk-text) }
.sk-plate:hover .sk-word { background-color: var(--sk-accent) }

/* keyboard parity: everything above is also reachable by tab */
.sk:focus-visible { outline: 2px solid var(--sk-accent); outline-offset: 3px; border-radius: 10px }

@media (prefers-reduced-motion: reduce) {
  .sk *, .sk::before, .sk-field { transition-duration: .01ms !important }
  .sk-band:hover .sk-tail svg { transform: none }
}

/* On a phone the legal row wraps to three lines and the plate would
   share the last one with an unrelated control. Give it its own. */
@media (max-width: 560px) {
  .legal .sk-plate { flex: 0 0 100%; justify-content: center; margin-top: 4px }
}