/* ============================================================
   SK Info Techies — Dark-Futuristic Design System
   Scoped under body.sk so it predictably overrides the
   legacy template CSS without touching its files.
   ============================================================ */

:root {
  --bg: #0A0B0D;
  --bg-2: #0E1014;
  --surface: #15181D;
  --surface-2: #1B1F26;
  --border: rgba(255, 255, 255, .08);
  --border-strong: rgba(255, 255, 255, .16);

  --accent: #12d889;
  --accent-dim: #0e9c64;
  --accent-glow: rgba(18, 216, 137, .35);
  --accent-soft: rgba(18, 216, 137, .10);

  /* Ember — the orange from the SK logo mark. Rare, deliberate: a second
     spark used at <5% (shader vein, status pulse, one gradient stop). */
  --ember: #FF5C1F;
  --ember-soft: rgba(255, 92, 31, .12);

  --text: #E8EAED;
  --muted: #9CA3AF;
  --muted-2: #6B7280;

  --font-display: "Unbounded", sans-serif;
  --font-body: "DM Sans", sans-serif;
  --font-mono: "Space Mono", ui-monospace, monospace;

  --maxw: 1240px;
  --radius: 16px;
  --radius-sm: 10px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

/* ---- Lenis smooth scroll (required for it to engage) ---- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* ---- Accessibility helpers ---- */
.sk-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sk-skip { position: fixed; left: 12px; top: -60px; z-index: 9999; background: var(--accent); color: #04130c;
  padding: 10px 18px; border-radius: 8px; font-weight: 700; transition: top .2s ease; }
.sk-skip:focus { top: 12px; }
body.sk a:focus-visible, body.sk button:focus-visible,
body.sk input:focus-visible, body.sk textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- Base ---- */
/* Global border-box (Bootstrap used to provide this; it was removed) */
body.sk *, body.sk *::before, body.sk *::after { box-sizing: border-box; }

body.sk {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body.sk h1, body.sk h2, body.sk h3, body.sk h4 {
  font-family: var(--font-display);
  color: var(--text);
  letter-spacing: -.01em;
  line-height: 1.04;
}

body.sk p { color: var(--muted); }
body.sk a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #04130c; }

body.sk ::-webkit-scrollbar { width: 10px; }
body.sk ::-webkit-scrollbar-track { background: var(--bg-2); }
body.sk ::-webkit-scrollbar-thumb { background: #23272f; border-radius: 10px; }
body.sk ::-webkit-scrollbar-thumb:hover { background: var(--accent-dim); }

/* ---- Layout ---- */
/* gutters scale with the viewport so content never hugs the screen edge on
   mid widths (1200–1600px), where max-width no longer leaves side margins */
.sk-container { max-width: var(--maxw); margin-inline: auto; padding-inline: clamp(24px, 3vw, 56px); }
.sk-section { padding: clamp(64px, 10vw, 130px) 0; position: relative; }
.sk-section--tight { padding: clamp(40px, 6vw, 80px) 0; }

/* ---- Eyebrow / section titles ---- */
.sk-eyebrow {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.sk-eyebrow::before {
  content: "";
  width: 26px; height: 1px;
  background: var(--accent);
  display: inline-block;
}
.sk-title {
  font-size: clamp(30px, 4.4vw, 60px);
  margin: 18px 0 0;
}
.sk-lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--muted); max-width: 60ch; }

/* ---- Buttons ---- */
.sk-btn {
  display: inline-flex; align-items: center; gap: .5em;
  background: var(--accent); color: #04130c;
  font-family: var(--font-body); font-weight: 700; font-size: 15px;
  padding: 14px 26px; border-radius: 100px; border: 0; cursor: pointer;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease);
  will-change: transform;
}
.sk-btn:hover { transform: translateY(-2px); box-shadow: 0 12px 34px var(--accent-glow); color: #04130c; }
.sk-btn--ghost { background: transparent; color: var(--text); border: 1px solid var(--border-strong); }
.sk-btn--ghost:hover { border-color: var(--accent); color: var(--text); box-shadow: none; }
/* body.sk a{color:inherit} outranks .sk-btn — pin the button colors */
body.sk a.sk-btn, body.sk button.sk-btn { color: #04130c; }
body.sk a.sk-btn--ghost, body.sk button.sk-btn--ghost { color: var(--text); }

/* ---- Cards ---- */
.sk-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 30px;
  transition: border-color .3s var(--ease), transform .3s var(--ease), background .3s var(--ease);
  transform-style: preserve-3d;
}
.sk-card:hover { border-color: var(--accent); background: var(--surface-2); }

/* ---- Reveal (driven by sk-motion.js; safe default = visible) ---- */
.sk-reveal { opacity: 0; transform: translateY(28px); }
.no-js .sk-reveal { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .sk-reveal { opacity: 1 !important; transform: none !important; }
}

/* ---- Hairline divider ---- */
.sk-rule { height: 1px; background: var(--border); border: 0; margin: 0; }

/* ---- Glow accent backdrop helper ---- */
.sk-glow { position: relative; }
.sk-glow::after {
  content: ""; position: absolute; inset: auto; pointer-events: none;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, var(--accent-soft), transparent 70%);
  filter: blur(20px); z-index: 0;
}

/* ============================================================
   INNER PAGE — hero band
   ============================================================ */
.sk-page-hero {
  position: relative; overflow: hidden;
  padding: clamp(150px, 20vh, 240px) 0 clamp(50px, 7vw, 90px);
  background:
    radial-gradient(50% 90% at 80% 10%, rgba(18,216,137,.10), transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.sk-crumb { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 16px; }
.sk-crumb a { color: var(--muted); }
.sk-crumb a:hover { color: var(--accent); }
.sk-crumb span { color: var(--accent); margin: 0 6px; }
.sk-page-hero h1 { font-size: clamp(38px, 6vw, 76px); margin: 0 0 16px; }

/* ============================================================
   HOME — hero
   ============================================================ */
.sk-hero {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  overflow: hidden;
  background:
    radial-gradient(55% 70% at 75% 28%, rgba(18,216,137,.14), transparent 60%),
    radial-gradient(50% 60% at 8% 88%, rgba(18,216,137,.06), transparent 60%),
    var(--bg);
}
.sk-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; }
.sk-hero__grid {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .5;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 60px 60px;
  mask-image: radial-gradient(70% 70% at 50% 40%, #000, transparent 80%);
}
/* Full-screen hero: title block sits in the upper-middle, stats pinned to the
   bottom of the same viewport — so the whole pitch is visible on first look. */
.sk-hero__inner {
  position: relative; z-index: 2; width: 100%;
  display: flex; flex-direction: column; justify-content: center;
  /* keep the container's inline gutters — a bare 0 here left the headline
     flush against the screen edge whenever max-width exceeded the viewport */
  padding: clamp(104px, 12vh, 156px) clamp(24px, 3vw, 56px) 28px;
}
.sk-hero__main { max-width: 900px; }
.sk-hero__status {
  font-family: var(--font-mono); color: var(--muted); font-size: 13px;
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 18px;
}
.sk-hero__status::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 12px var(--accent);
  animation: skPulse 2s infinite;
}
@keyframes skPulse { 0%,100%{opacity:1} 50%{opacity:.35} }
.sk-hero h1 { font-size: clamp(34px, 5vw, 74px); line-height: 1; margin: 0 0 16px; }
.sk-hero h1 .accent { color: var(--accent); }
.sk-hero__sub { max-width: 540px; font-size: clamp(15px, 1.3vw, 18px); }
.sk-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

/* In-hero stats bar */
.sk-hero__stats {
  margin-top: auto;
  display: grid; grid-template-columns: repeat(4, auto); justify-content: start;
  gap: clamp(28px, 5vw, 70px);
  padding-top: 28px; border-top: 1px solid var(--border);
}
.sk-hero__stat-num { font-family: var(--font-display); font-size: clamp(26px, 3vw, 40px); color: var(--text); }
.sk-hero__stat-num .accent { color: var(--accent); }
.sk-hero__stat-label { font-family: var(--font-mono); font-size: 11px; letter-spacing: .12em;
  text-transform: uppercase; color: var(--muted); margin-top: 6px; }
@media (max-width: 600px) {
  .sk-hero__stats { grid-template-columns: repeat(2, 1fr); gap: 22px; }
}

/* ============================================================
   HOME — stats strip
   ============================================================ */
.sk-stats { border-block: 1px solid var(--border); background: var(--bg-2); }
.sk-stats__grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
}
.sk-stats__item { padding: 46px 24px; text-align: center; border-left: 1px solid var(--border); }
.sk-stats__item:first-child { border-left: 0; }
.sk-stats__num { font-family: var(--font-display); font-size: clamp(34px, 4vw, 54px); color: var(--text); }
.sk-stats__num .accent { color: var(--accent); }
.sk-stats__label { font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 8px; }
@media (max-width: 767px) {
  .sk-stats__grid { grid-template-columns: repeat(2, 1fr); }
  .sk-stats__item:nth-child(odd) { border-left: 0; }
}

/* ============================================================
   Generic section header
   ============================================================ */
.sk-sec-head { max-width: 720px; margin-bottom: 56px; }
.sk-sec-head--center { margin-inline: auto; text-align: center; }

/* ============================================================
   HOME — services grid
   ============================================================ */
.sk-services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
.sk-services__grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .sk-services__grid--3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .sk-services__grid { grid-template-columns: 1fr; } }
.sk-service { display: block; position: relative; overflow: hidden; }
.sk-service__icon { font-size: 40px; color: var(--accent); display: block; margin-bottom: 22px; }
.sk-service__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted); }
.sk-service__title { font-size: 26px; margin: 6px 0 12px; }
.sk-service__more { display: inline-flex; align-items: center; gap: 8px; margin-top: 20px;
  font-family: var(--font-mono); font-size: 13px; color: var(--accent); }
.sk-service__more .icon-arrow-up-right { transition: transform .3s var(--ease); }
.sk-service:hover .sk-service__more .icon-arrow-up-right { transform: translate(3px,-3px); }

/* ============================================================
   HOME — process steps
   ============================================================ */
.sk-process__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
@media (max-width: 900px) { .sk-process__grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px) { .sk-process__grid { grid-template-columns: 1fr; } }
.sk-step { position: relative; padding-top: 30px; }
.sk-step__num { font-family: var(--font-mono); color: var(--accent); font-size: 14px; }
.sk-step__bar { height: 2px; background: var(--border); margin: 14px 0 20px; position: relative; }
.sk-step__bar::after { content:""; position:absolute; left:0; top:0; height:100%; width:34px; background: var(--accent); }
.sk-step h3 { font-size: 21px; margin: 0 0 10px; }

/* ============================================================
   HOME — portfolio (coverflow uses existing markup; theme tweaks)
   ============================================================ */
.sk-portfolio { background: var(--bg-2); }
.sk-portfolio .tabs { background: rgba(255,255,255,.04); }
.sk-portfolio .tab { color: var(--muted); }
.sk-portfolio .tab.active { background: var(--accent); color: #04130c; }
.sk-portfolio .info-title { color: var(--text); }
.sk-portfolio .info-desc { color: var(--muted); }
.sk-portfolio .nav-btn { border-color: var(--accent); color: var(--accent); }
.sk-portfolio .nav-btn:hover { background: var(--accent); color: #04130c; }

/* ============================================================
   PORTFOLIO — 3D coverflow
   ============================================================ */
.sk-cf-tabs { display: inline-flex; gap: 4px; background: rgba(255,255,255,.04);
  border: 1px solid var(--border); border-radius: 100px; padding: 5px; margin: 0 auto 48px; }
.sk-cf-tab { font-family: var(--font-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase;
  padding: 10px 26px; border-radius: 100px; border: 0; cursor: pointer; background: transparent; color: var(--muted);
  transition: background .3s, color .3s; }
.sk-cf-tab.active { background: var(--accent); color: #04130c; }
.sk-cf-tab:not(.active):hover { color: var(--text); }

.sk-cf { position: relative; height: 440px; display: flex; align-items: center; justify-content: center;
  perspective: 1200px; margin-bottom: 36px; }
.sk-cf__card { position: absolute; width: 300px; height: 400px; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--border); box-shadow: 0 30px 60px rgba(0,0,0,.55); cursor: pointer;
  transition: transform .6s var(--ease), opacity .6s var(--ease), width .6s, height .6s; }
.sk-cf__card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sk-cf__card::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.35) 45%, transparent 75%); }
.sk-cf__meta { position: absolute; left: 22px; bottom: 22px; z-index: 2; }
.sk-cf__tag { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
.sk-cf__name { font-family: var(--font-display); font-size: 20px; color: #fff; margin-top: 4px; }
.sk-cf__card[data-pos="-2"] { transform: translateX(-470px) scale(.74); opacity: .35; }
.sk-cf__card[data-pos="-1"] { transform: translateX(-275px) scale(.88); opacity: .65; }
.sk-cf__card[data-pos="0"]  { transform: translateX(0) scale(1); opacity: 1; z-index: 10; }
.sk-cf__card[data-pos="1"]  { transform: translateX(275px) scale(.88); opacity: .65; }
.sk-cf__card[data-pos="2"]  { transform: translateX(470px) scale(.74); opacity: .35; }
.sk-cf__card[data-pos="hidden"] { transform: scale(.5); opacity: 0; pointer-events: none; }

.sk-cf-info { text-align: center; min-height: 56px; margin-bottom: 28px; }
.sk-cf-info__name { font-family: var(--font-display); font-size: clamp(20px,2.4vw,28px); color: var(--text); }
.sk-cf-info__desc { color: var(--muted); margin-top: 6px; }
.sk-cf-nav { display: flex; align-items: center; justify-content: center; gap: 18px; }
.sk-cf-btn { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--accent); background: transparent;
  color: var(--accent); cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s, color .2s; }
.sk-cf-btn:hover { background: var(--accent); color: #04130c; }
.sk-cf-dots { display: flex; gap: 7px; }
.sk-cf-dot { width: 8px; height: 8px; border-radius: 4px; border: 0; cursor: pointer; padding: 0;
  background: var(--accent); opacity: .3; transition: width .3s, opacity .3s; }
.sk-cf-dot.active { width: 26px; opacity: 1; }
@media (max-width: 640px) {
  .sk-cf__card[data-pos="-2"], .sk-cf__card[data-pos="2"] { opacity: 0; }
  .sk-cf__card[data-pos="-1"] { transform: translateX(-150px) scale(.8); }
  .sk-cf__card[data-pos="1"]  { transform: translateX(150px) scale(.8); }
}

/* ============================================================
   HOME — testimonials marquee
   ============================================================ */
.sk-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.sk-marquee__row { display: flex; gap: 22px; width: max-content; }
.sk-quote { width: 420px; max-width: 80vw; padding: 30px; }
.sk-quote__text { font-size: 18px; color: var(--text); line-height: 1.5; }
.sk-quote__by { margin-top: 20px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }
.sk-quote__by b { color: var(--accent); font-weight: 700; }

/* ============================================================
   HOME — contact band
   ============================================================ */
.sk-contact__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
@media (max-width: 860px) { .sk-contact__grid { grid-template-columns: 1fr; } }
.sk-field { margin-bottom: 16px; }
.sk-field input, .sk-field textarea {
  width: 100%; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text); padding: 15px 18px;
  font-family: var(--font-body); font-size: 15px; transition: border-color .25s;
}
.sk-field input:focus, .sk-field textarea:focus { outline: none; border-color: var(--accent); }
.sk-field textarea { min-height: 130px; resize: vertical; }
.sk-field input::placeholder, .sk-field textarea::placeholder { color: var(--muted-2); }

/* ============================================================
   PROSE (privacy / terms)
   ============================================================ */
.sk-prose { max-width: 820px; }
.sk-prose h2 { font-size: clamp(22px, 2.4vw, 30px); margin: 40px 0 14px; color: var(--text); }
.sk-prose p, .sk-prose li { color: var(--muted); line-height: 1.7; }
.sk-prose ul { padding-left: 20px; margin: 12px 0; }
.sk-prose li { margin-bottom: 8px; }
.sk-prose a { color: var(--accent); }

/* ============================================================
   404
   ============================================================ */
.sk-404 { min-height: 80vh; display: flex; align-items: center; text-align: center; }
.sk-404__code { font-family: var(--font-display); font-size: clamp(90px, 20vw, 240px); line-height: 1;
  color: var(--accent); text-shadow: 0 0 60px var(--accent-glow); }

/* ============================================================
   LEGACY TEMPLATE DARK OVERRIDES (scoped to body.sk)
   Re-skins the existing navbar / footer / faq / page-header
   markup so the whole site shares the dark-futuristic system.
   ============================================================ */

/* ---- Navbar v3: detached three-part header ----
   logo (left) · floating pill menu (center) · CTA (right).
   Active page = filled accent pill inside the menu. */
body.sk .main-menu,
body.sk .stricky-header { background: transparent; }
body.sk .main-menu__wrapper { padding-inline: clamp(20px, 3vw, 44px); }
body.sk .main-menu__wrapper-inner {
  background: transparent; border: 0; box-shadow: none; border-radius: 0;
  padding: 0; margin-top: 10px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
  max-width: 1560px; margin-inline: auto;
}
body.sk .main-menu__logo img { width: auto; height: 52px; display: block; }

/* the floating menu pill */
body.sk .main-menu__main-menu-box {
  background: rgba(14, 16, 20, .62);
  -webkit-backdrop-filter: blur(18px) saturate(140%); backdrop-filter: blur(18px) saturate(140%);
  border: 1px solid var(--border);
  border-radius: 100px;
  padding: 6px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, .35);
}

@media (min-width: 1200px) {
  body.sk .main-menu__list { display: flex; align-items: center; gap: 4px; }
  /* reset the template's 43px li padding + margins that inflate the pill */
  body.sk .main-menu__list > li { position: relative; padding: 0 !important; margin: 0 !important; }
  body.sk .main-menu__list > li > a {
    display: inline-block;
    font-family: var(--font-body); font-weight: 500; font-size: 15px;
    color: var(--muted); padding: 11px 22px; border-radius: 100px;
    transition: color .25s var(--ease), background .25s var(--ease);
  }
  body.sk .main-menu__list > li > a:hover {
    color: var(--text); background: rgba(255, 255, 255, .06);
  }
  body.sk .main-menu__list > li.current > a,
  body.sk .main-menu__list > li.current-menu-item > a {
    background: var(--accent); color: #04130c; font-weight: 600;
  }
}
/* below 1200px the pill holds just the hamburger */
@media (max-width: 1199px) {
  body.sk .main-menu__main-menu-box { padding: 4px; }
  body.sk .mobile-nav__toggler {
    display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
    width: 46px; height: 46px; border-radius: 50%; gap: 5px;
  }
  /* pure-CSS burger bars — no icon-font dependency */
  body.sk .mobile-nav__toggler i { display: none; }
  body.sk .mobile-nav__toggler::before,
  body.sk .mobile-nav__toggler::after {
    content: ""; display: block; width: 20px; height: 2px;
    background: var(--text); border-radius: 2px; transition: background .3s;
  }
  body.sk .mobile-nav__toggler:hover::before,
  body.sk .mobile-nav__toggler:hover::after { background: var(--accent); }
}

/* Mobile drawer: style the cloned nav list vertically, on brand */
body.sk .mobile-nav__container .main-menu__list { display: block; }
body.sk .mobile-nav__container .main-menu__list > li { display: block; }
body.sk .mobile-nav__container .main-menu__list > li > a {
  display: block; padding: 12px 0; font-family: var(--font-display);
  font-size: 20px; color: var(--text); border-bottom: 1px solid var(--border);
}
body.sk .mobile-nav__container .main-menu__list > li.current > a { color: var(--accent); }
body.sk .mobile-nav__wrapper .mobile-nav__content { background: var(--bg-2); }

/* CTA pill */
body.sk .main-menu__btn-box .thm-btn {
  padding: 13px 24px; font-size: 14px; display: inline-flex; align-items: center; gap: 8px;
}
body.sk .main-menu__btn-box .thm-btn .icon-arrow-up-right { transition: transform .3s var(--ease); }
body.sk .main-menu__btn-box .thm-btn:hover .icon-arrow-up-right { transform: translate(3px,-3px); }

/* slim solid bar once scrolled */
body.sk .stricky-header.stricky-fixed {
  background: rgba(10,11,13,.9);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 6px 24px rgba(0,0,0,.4);
}
body.sk .stricky-header.stricky-fixed .main-menu__wrapper-inner {
  background: transparent; border: 0; border-radius: 0; margin-top: 0;
  box-shadow: none; padding: 14px 0;
}
body.sk .stricky-header.stricky-fixed .main-menu__wrapper { max-width: var(--maxw); margin-inline: auto; }
body.sk .mobile-nav__toggler { color: var(--text); font-size: 22px; }
body.sk .mobile-nav__toggler:hover { color: var(--accent); }

/* ---- thm-btn -> accent pill (used across template) ---- */
body.sk .thm-btn {
  background: var(--accent); color: #04130c; border-radius: 100px;
  font-weight: 700; border: 0;
}
/* hover fill: template's circle-expand overlays are blue/white (::after even
   carries !important) — repaint both ember so every button hovers orange */
body.sk .thm-btn::before { background-color: var(--ember) !important; }
body.sk .thm-btn::after { background-color: var(--ember) !important; }
body.sk .thm-btn:hover,
body.sk .chat-popup .chat-form .form-group .thm-btn:hover {
  box-shadow: 0 12px 34px rgba(255, 92, 31, .35); color: #fff;
}

/* ---- Page header (inner page hero band) ---- */
body.sk .page-header { background: var(--bg-2); }
body.sk .page-header::before { background: rgba(10,11,13,.7); }
body.sk .page-header__bg { opacity: .25; }
body.sk .page-header h3 { color: var(--text); }
body.sk .thm-breadcrumb li,
body.sk .thm-breadcrumb li a { color: var(--muted); }
body.sk .thm-breadcrumb li a:hover { color: var(--accent); }

/* ---- Section title (used by faq) ---- */
body.sk .section-title__title { color: var(--text); }
body.sk .section-title__tagline { color: var(--accent); }

/* ---- FAQ accordion ---- */
body.sk .faq-one { background: transparent; }
body.sk .faq-one .accrodion {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); margin-bottom: 14px;
}
body.sk .faq-one .accrodion.active { border-color: var(--accent); }
body.sk .faq-one .accrodion-title { padding: 22px 26px; cursor: pointer; }
body.sk .faq-one .accrodion-title h3 { color: var(--text); font-family: var(--font-display); font-size: 18px; margin: 0; }
body.sk .faq-one .accrodion.active .accrodion-title h3 { color: var(--accent); }
body.sk .faq-one .accrodion-content .inner { padding: 0 26px 24px; }
body.sk .faq-one .accrodion-content p { color: var(--muted); }

/* ---- Footer ---- */
body.sk .site-footer { background: var(--bg-2); border-top: 1px solid var(--border); }
body.sk .footer-widget__title { color: var(--text); font-family: var(--font-display); }
body.sk .footer-widget__text { color: var(--muted); }
body.sk .site-footer__bottom { border-top: 1px solid var(--border); }
body.sk .site-footer__bottom-menu a { color: var(--muted); }
body.sk .site-footer__bottom-menu a:hover { color: var(--accent); }
body.sk .site-footer__copyright-text,
body.sk .site-footer__copyright-text a { color: var(--muted); }
body.sk .site-footer__copyright-text a:hover { color: var(--accent); }
body.sk .site-footer__social-box a {
  color: var(--text); border: 1px solid var(--border);
  width: 42px; height: 42px; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; margin-left: 8px; transition: all .25s var(--ease);
}
body.sk .site-footer__social-box a:hover { background: var(--accent); color: #04130c; border-color: var(--accent); }

/* ---- Chat popup + preloader on dark ---- */
body.sk .chat-icon button { background: var(--ember); }
body.sk .chat-popup .popup-inner { background: var(--surface); border: 1px solid var(--border); }
body.sk .chat-popup p { color: var(--muted); font-family: var(--font-body); }
body.sk .chat-form input, body.sk .chat-form textarea, body.sk .chat-form select {
  background: var(--bg); border: 1px solid var(--border); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
}
/* one font family for every placeholder (input vs textarea mismatch fix) */
body.sk .chat-form input::placeholder,
body.sk .chat-form textarea::placeholder {
  font-family: var(--font-body); font-size: 15px; color: var(--muted-2); opacity: 1;
}
/* country-code select — shared by chat popup + all site forms */
.sk-ccode {
  -webkit-appearance: none; appearance: none; cursor: pointer;
  font-family: var(--font-body); font-size: 15px; color: var(--text);
  background-color: var(--bg); border: 1px solid var(--border); border-radius: 8px;
  padding: 0 26px 0 12px;
  background-image: linear-gradient(45deg, transparent 50%, var(--accent) 50%),
                    linear-gradient(135deg, var(--accent) 50%, transparent 50%);
  background-position: calc(100% - 14px) 50%, calc(100% - 9px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.sk-ccode option { background: var(--surface); color: var(--text); }

/* beat .chat-popup .chat-form .form-group{display:block} (0,3,0);
   bg/border/color mirror the template's text/email fields so the row blends in */
body.sk .chat-popup .chat-form .sk-chat-phone { display: flex; gap: 8px; align-items: stretch; }
body.sk .chat-popup .chat-form .sk-chat-phone select {
  flex: 0 0 100px; height: 40px; font-size: 13px; border-radius: 5px;
  background-color: rgba(255, 255, 255, .10); border: 1px solid rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .78);
}
body.sk .chat-popup .chat-form .sk-chat-phone input[type="tel"] {
  flex: 1; min-width: 0; display: block; width: auto; height: 40px;
  border: 1px solid rgba(255, 255, 255, .10); border-radius: 5px;
  font-size: 13px; padding: 10px 20px; background-color: rgba(255, 255, 255, .10);
  color: rgba(255, 255, 255, .78); font-family: var(--font-body);
}

/* phone row inside .sk-field forms (home + contact page) */
.sk-phone-row { display: flex; gap: 8px; }
.sk-phone-row .sk-ccode {
  flex: 0 0 112px; background-color: var(--surface);
  border-radius: var(--radius-sm); height: 52px;
}
.sk-phone-row input { flex: 1; min-width: 0; }
body.sk .loader.js-preloader { background: var(--bg); }
body.sk .loader.js-preloader > div { background: var(--accent) !important; }
body.sk .loader.js-preloader > div:nth-child(2) { background: var(--accent-dim) !important; }
body.sk .loader.js-preloader > div:nth-child(3) { background: var(--text) !important; }

/* ============================================================
   ████ V2 — "THE DIGITAL ENGINE" EXPERIENCE LAYER ████
   Boot sequence, HUD, shader hero, kinetic sections.
   ============================================================ */

/* ---- Boot sequence (signature load moment) ---- */
.sk-boot {
  position: fixed; inset: 0; z-index: 99999;
  background: var(--bg);
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end;
  padding: clamp(24px, 5vw, 64px);
  transition: transform .55s cubic-bezier(.76, 0, .24, 1), visibility 0s .55s;
  will-change: transform;
  /* Failsafe: if JS never runs, self-dismiss so no one is trapped */
  animation: skBootFailsafe 0s 6s forwards;
}
.sk-boot.is-done { transform: translateY(-100%); visibility: hidden; }
@keyframes skBootFailsafe { to { opacity: 0; visibility: hidden; pointer-events: none; } }
.sk-boot__logo { position: absolute; top: clamp(24px, 5vw, 64px); left: clamp(24px, 5vw, 64px); }
.sk-boot__logo img { height: 44px; width: auto; }
.sk-boot__pct {
  font-family: var(--font-display); font-weight: 700;
  font-size: clamp(90px, 22vw, 280px); line-height: .85;
  color: var(--text); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.sk-boot__pct::after { content: "%"; font-size: .25em; color: var(--accent); vertical-align: super; }
.sk-boot__log {
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .14em;
  text-transform: uppercase; color: var(--muted); margin-top: 18px; min-height: 1.4em;
}
.sk-boot__log::before { content: "\25B8  "; color: var(--accent); }
.sk-boot__bar { width: min(420px, 60vw); height: 2px; background: var(--border); margin-top: 14px; overflow: hidden; }
.sk-boot__bar i { display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--ember)); }
@media (prefers-reduced-motion: reduce) { .sk-boot { display: none; } }

/* ---- Film grain (fixed, subtle, filmic texture) ---- */
.sk-grain {
  position: fixed; inset: -50%; z-index: 9990; pointer-events: none; opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  animation: skGrain 9s steps(6) infinite;
}
@keyframes skGrain {
  0%, 100% { transform: translate(0, 0) } 20% { transform: translate(-3%, 2%) }
  40% { transform: translate(2%, -3%) } 60% { transform: translate(-2%, -2%) } 80% { transform: translate(3%, 3%) }
}
@media (prefers-reduced-motion: reduce) { .sk-grain { animation: none; } }

/* ---- HUD scroll progress ("throughput") ---- */
.sk-hud-progress {
  position: fixed; top: 0; left: 0; right: 0; height: 2px; z-index: 9995; pointer-events: none;
}
.sk-hud-progress i {
  display: block; height: 100%; width: 100%;
  background: linear-gradient(90deg, var(--accent) 82%, var(--ember));
  transform: scaleX(0); transform-origin: left; will-change: transform;
}

/* ---- Cursor v2 (green system, label follower) ---- */
body.sk .custom-cursor__cursor {
  width: 6px !important; height: 6px !important;
  background: var(--accent) !important; border: 0 !important; border-radius: 50%;
  box-shadow: 0 0 12px var(--accent-glow);
}
body.sk .custom-cursor__cursor-two {
  width: 34px !important; height: 34px !important;
  background: transparent !important;
  border: 1px solid rgba(18, 216, 137, .5) !important; border-radius: 50%;
}
.sk-cursor-label {
  position: fixed; z-index: 9996; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .22em;
  color: #04130c; background: var(--accent); padding: 7px 12px; border-radius: 100px;
  transform: translate(-50%, -140%) scale(0); transition: transform .25s var(--ease);
}
.sk-cursor-label.is-on { transform: translate(-50%, -140%) scale(1); }
@media (hover: none) { .sk-cursor-label { display: none; } }

/* ---- Hero v2 ---- */
.sk-hero { isolation: isolate; }
/* Masked-line headline reveal */
.sk-line { display: block; overflow: hidden; padding: .06em .1em; margin: -.06em -.1em; }
.sk-line__in { display: block; transform: translateY(115%); will-change: transform; }
.no-js .sk-line__in { transform: none; }
/* once revealed, unmask so keyword-pill hover lift/glow isn't clipped */
body.sk-booted .sk-line { overflow: visible; }
@media (prefers-reduced-motion: reduce) { .sk-line { overflow: visible; } .sk-line__in { transform: none !important; } }
.sk-hero__status .sk-scramble { color: var(--accent); }
.sk-hero__scrollcue {
  position: absolute; right: clamp(20px, 4vw, 56px); bottom: 120px; z-index: 3;
  width: 1px; height: 72px; overflow: hidden; background: var(--border);
}
.sk-hero__scrollcue i { position: absolute; left: 0; top: -40%; width: 100%; height: 40%;
  background: var(--accent); animation: skCue 1.8s cubic-bezier(.76, 0, .24, 1) infinite; }
@keyframes skCue { to { top: 140%; } }
@media (max-width: 860px), (prefers-reduced-motion: reduce) { .sk-hero__scrollcue { display: none; } }

/* ---- Tech marquee band ---- */
.sk-tech {
  border-block: 1px solid var(--border); background: var(--bg-2);
  padding: 22px 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sk-tech__row { display: flex; gap: 0; width: max-content; }
.sk-tech__item {
  font-family: var(--font-display); font-weight: 300;
  font-size: clamp(15px, 1.6vw, 21px); color: var(--muted-2);
  padding: 0 28px; white-space: nowrap; display: inline-flex; align-items: center; gap: 56px;
  transition: color .3s;
}
.sk-tech__item::after { content: "\25C6"; font-size: 8px; color: var(--accent); opacity: .6; }
.sk-tech__row:hover .sk-tech__item { color: var(--muted); }

/* ---- Manifesto (scroll-lit statement) ---- */
.sk-manifesto { padding: clamp(90px, 14vw, 190px) 0; }
.sk-manifesto__text {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(24px, 3.6vw, 52px); line-height: 1.28; letter-spacing: -.01em;
  max-width: 1080px; color: var(--text);
}
.sk-manifesto__text .w { opacity: .13; display: inline-block; }
.sk-manifesto__text em { font-style: normal; color: var(--accent); }
@media (prefers-reduced-motion: reduce) { .sk-manifesto__text .w { opacity: 1; } }

/* ---- Services v2: pinned horizontal scroll ---- */
.sk-hsc { position: relative; overflow: hidden; background: var(--bg-2); border-block: 1px solid var(--border); }
.sk-hsc__head { display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; padding-top: clamp(64px, 8vw, 110px); }
.sk-hsc__hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--muted-2); }
.sk-hsc__track {
  display: flex; gap: 22px; width: max-content;
  padding: clamp(40px, 5vw, 64px) 24px clamp(64px, 8vw, 110px) max(24px, calc((100vw - var(--maxw)) / 2 + 24px));
  will-change: transform;
}
.sk-svc-panel {
  position: relative; width: min(640px, 84vw); flex-shrink: 0;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(28px, 3.4vw, 48px); overflow: hidden;
  display: flex; flex-direction: column; min-height: min(430px, 62vh);
  transition: border-color .35s var(--ease);
}
.sk-svc-panel:hover { border-color: var(--accent); }
/* spotlight follows cursor via --mx/--my set in JS */
.sk-svc-panel::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background: radial-gradient(480px circle at var(--mx, 50%) var(--my, 50%), rgba(18, 216, 137, .09), transparent 65%);
  transition: opacity .4s;
}
.sk-svc-panel:hover::before { opacity: 1; }
.sk-svc-panel__tag {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .24em;
  color: var(--accent); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 10px;
}
.sk-svc-panel__tag::before { content: ""; width: 7px; height: 7px; background: var(--accent);
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
.sk-svc-panel__icon { font-size: 44px; color: var(--accent); margin: 26px 0 4px; display: block; }
.sk-svc-panel h3 { font-size: clamp(24px, 2.6vw, 36px); margin: 14px 0 12px; }
.sk-svc-panel p { max-width: 46ch; }
.sk-svc-panel__chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.sk-svc-panel__chips span {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  border: 1px solid var(--border); border-radius: 100px; padding: 6px 13px;
  transition: border-color .3s, color .3s;
}
.sk-svc-panel:hover .sk-svc-panel__chips span { border-color: var(--border-strong); color: var(--text); }
.sk-svc-panel__go {
  margin-top: auto; padding-top: 26px;
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; color: var(--accent);
}
.sk-svc-panel__go .icon-arrow-up-right { transition: transform .3s var(--ease); }
.sk-svc-panel:hover .sk-svc-panel__go .icon-arrow-up-right { transform: translate(4px, -4px); }
/* Mobile: plain vertical cards */
@media (max-width: 899px) {
  .sk-hsc__track { width: auto; flex-direction: column; padding-left: 24px; padding-right: 24px; }
  .sk-svc-panel { width: 100%; min-height: 0; }
}

/* ---- Process v2: sticky stacking cards ---- */
.sk-stack { position: relative; }
.sk-stack__card {
  position: sticky; top: calc(96px + var(--i, 0) * 16px);
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: clamp(26px, 3.4vw, 46px); margin-bottom: 18px;
  display: grid; grid-template-columns: auto 1fr auto; gap: clamp(18px, 3vw, 44px); align-items: center;
  will-change: transform; transform-origin: top center;
  box-shadow: 0 -18px 44px rgba(0, 0, 0, .5);
}
.sk-stack__num {
  font-family: var(--font-mono); font-size: 13px; color: var(--accent);
  writing-mode: vertical-rl; letter-spacing: .3em;
}
.sk-stack__card h3 { font-size: clamp(21px, 2.4vw, 32px); margin: 0 0 10px; }
.sk-stack__card p { max-width: 62ch; margin: 0; }
.sk-stack__meta { font-family: var(--font-mono); font-size: 12px; color: var(--muted-2); white-space: nowrap; }
@media (max-width: 700px) {
  .sk-stack__card { grid-template-columns: 1fr; }
  .sk-stack__num { writing-mode: horizontal-tb; letter-spacing: .2em; }
  .sk-stack__meta { display: none; }
}

/* ---- Testimonials: dual counter-scroll rows ---- */
.sk-tmrow + .sk-tmrow { margin-top: 22px; }

/* Mobile testimonial slider (marquees hide below 768px) */
.sk-tmslider { display: none; padding: 0 24px; }
.sk-tmslider__view { overflow: hidden; }
.sk-tmslider__track { display: flex; transition: transform .45s var(--ease); }
.sk-tmslider__item { flex: 0 0 100%; width: 100%; max-width: none; box-sizing: border-box; }
.sk-tmslider__nav { display: flex; align-items: center; justify-content: center; gap: 18px; margin-top: 20px; }
.sk-tmslider__count { font-family: var(--font-mono); font-size: 13px; color: var(--muted); letter-spacing: .1em; }
@media (max-width: 767px) {
  .sk-tmrow { display: none; }
  .sk-tmslider { display: block; }
}

/* ---- Client logo strip ---- */
.sk-clients__row { display: flex; align-items: center; width: max-content; }
.sk-clients__item { display: inline-flex; align-items: center; padding: 0 clamp(28px, 4vw, 56px); }
.sk-clients__item img {
  height: clamp(26px, 3vw, 38px); width: auto; display: block;
  opacity: .55; transition: opacity .3s var(--ease);
}
.sk-clients__item:hover img { opacity: 1; }

/* ---- Footer v2: mega CTA + wordmark + readout ---- */
.sk-cta-band {
  position: relative; overflow: hidden;
  padding: clamp(90px, 13vw, 170px) 0;
  border-top: 1px solid var(--border);
  background:
    radial-gradient(55% 90% at 50% 115%, rgba(18, 216, 137, .13), transparent 65%),
    var(--bg);
  text-align: center;
}
.sk-cta-band__eyebrow { justify-content: center; }
.sk-cta-band h2 {
  font-size: clamp(40px, 7.4vw, 110px); letter-spacing: -.02em; line-height: 1.02;
  margin: 22px 0 40px;
}
.sk-cta-band h2 .ch { display: inline-block; white-space: pre; transition: transform .3s var(--ease), color .3s; }
.sk-cta-band h2:hover .ch { color: var(--accent); }
.sk-mega-btn {
  display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 8px;
  width: clamp(160px, 16vw, 200px); height: clamp(160px, 16vw, 200px); border-radius: 50%;
  background: var(--accent); color: #04130c !important;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(14px, 1.3vw, 18px);
  text-align: center; line-height: 1.25; align-content: center;
  transition: box-shadow .35s var(--ease), background .35s;
  will-change: transform;
}
.sk-mega-btn:hover { box-shadow: 0 0 0 14px var(--accent-soft), 0 18px 60px var(--accent-glow); }
.sk-wordmark {
  font-family: var(--font-display); font-weight: 800;
  /* min low enough that the nowrap line still fits a 320px screen */
  font-size: clamp(22px, 7.3vw, 126px); line-height: .9; letter-spacing: -.03em;
  text-align: center; white-space: nowrap; user-select: none;
  color: transparent; -webkit-text-stroke: 1px rgba(232, 234, 237, .22);
  padding: clamp(40px, 6vw, 80px) 8px 0; overflow: hidden;
  background: linear-gradient(105deg,
    transparent 0 40%, rgba(18, 216, 137, .95) 50%, transparent 60% 100%);
  background-size: 260% 100%; background-position: 115% 0; background-repeat: no-repeat;
  -webkit-background-clip: text; background-clip: text;
  transition: -webkit-text-stroke-color .45s, filter .45s;
}
.sk-wordmark {
  transition: -webkit-text-stroke-color 1s ease, filter 1s ease;
}
.sk-wordmark:hover {
  -webkit-text-stroke-color: rgba(18, 216, 137, .85);
  filter: drop-shadow(0 0 26px rgba(18, 216, 137, .45));
  animation: skWmShimmer 2.6s cubic-bezier(.33, 0, .2, 1) both;
}
@keyframes skWmShimmer { from { background-position: 115% 0 } to { background-position: -55% 0 } }
.sk-readout {
  display: flex; flex-wrap: wrap; gap: 10px 34px; align-items: center; justify-content: center;
  padding: 26px 24px; border-top: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em;
  text-transform: uppercase; color: var(--muted-2);
}
.sk-readout b { color: var(--accent); font-weight: 400; }
.sk-readout .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
  display: inline-block; margin-right: 7px; animation: skPulse 2.2s infinite; }
.sk-readout .dot--ember { background: var(--ember); animation-delay: 1.1s; }

/* Footer below desktop: stack + center everything cleanly (tablet's
   side-by-side menus wrapped unevenly, so the stack starts at 991px) */
@media (max-width: 991px) {
  body.sk .site-footer__bottom-inner {
    flex-direction: column; align-items: center; gap: 20px;
    padding-right: 0 !important; text-align: center;
  }
  body.sk .site-footer__bottom-menu-box { flex-direction: column; align-items: center; gap: 4px; }
  body.sk .site-footer__bottom-menu { justify-content: center; }
  body.sk .site-footer__social-and-copyright {
    flex-direction: column; align-items: center; gap: 14px;
  }
  body.sk .site-footer__social-box a { margin: 0 4px; }
  body.sk .site-footer__copyright-text { text-align: center; }
  .sk-readout { flex-direction: column; gap: 10px; text-align: center; }
}
@media (max-width: 767px) {
  .sk-cta-band h2 { font-size: clamp(30px, 9.4vw, 44px); }
  /* template's fixed 120px FAQ padding left a huge blank band on phones */
  body.sk .faq-one { padding: 44px 0 64px; }
}
/* keep floating widgets clear of content on phones */
@media (max-width: 700px) {
  body.sk .chat-icon { left: 14px; bottom: 14px; }
  body.sk .chat-icon button { width: 46px; height: 46px; line-height: 46px; font-size: 17px; }
  .sk-readout { padding-bottom: 96px; }         /* chat bubble sits below the last line */
  .sk-hero__inner { padding-bottom: 84px; }     /* stats row clears the bubble */
}
/* deck fallback cards: headline sized to the card, not the viewport height */
@media (max-width: 1099px) {
  .sk-deck:not(.is-deck) .sk-deck__slide h3 { font-size: clamp(22px, 6.8vw, 40px); overflow-wrap: break-word; }
}

/* ============================================================
   QA sweep fixes (2026-07 fleet audit)
   ============================================================ */

/* Cursor hidden until the first real mouse move (fixes the ring
   pinned at 0,0 on load and on touch/keyboard-only sessions) */
body.sk .custom-cursor__cursor,
body.sk .custom-cursor__cursor-two { opacity: 0; transition: opacity .25s; }
body.sk.sk-cursor-active .custom-cursor__cursor,
body.sk.sk-cursor-active .custom-cursor__cursor-two { opacity: 1; }

/* GO BACK TOP: overlaps content on small screens — hide there; keep
   clear of the footer copyright on desktop */
@media (max-width: 899px) { body.sk .scroll-to-target.scroll-to-top { display: none !important; } }
body.sk .site-footer__bottom-inner { padding-right: 64px; }

/* Footer link lists: consistent rhythm when they stack on mobile */
body.sk .site-footer__bottom-menu { display: flex; flex-wrap: wrap; gap: 10px 30px; margin: 0; padding: 0; }
body.sk .site-footer__bottom-menu li { margin: 0; }
body.sk .site-footer__bottom-menu + .site-footer__bottom-menu { margin-top: 10px; }

/* CTA wave: words stay intact; breaks only between words */
.sk-cta-band h2 .wd { display: inline-block; white-space: nowrap; }

/* ---- Global presence map ---- */
.sk-map { position: relative; margin-top: 10px; }
.sk-map__dots { width: 100%; height: auto; display: block; }
.sk-map__pin {
  position: absolute; transform: translate(-50%, -50%);
  width: 22px; height: 22px; border: 0; background: none; padding: 0; cursor: pointer;
}
.sk-map__pin i {
  position: absolute; inset: 6px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 10px var(--accent-glow);
}
.sk-map__pin::before {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(18, 216, 137, .6);
  animation: skPinPulse 2.4s ease-out infinite;
}
@keyframes skPinPulse {
  0% { transform: scale(.5); opacity: .9 } 70% { transform: scale(1.7); opacity: 0 } 100% { opacity: 0 }
}
.sk-map__pin--hq i { background: var(--ember); box-shadow: 0 0 12px rgba(255, 92, 31, .6); }
.sk-map__pin--hq::before { border-color: rgba(255, 92, 31, .65); }
/* always-visible name beside each pin (side set per pin to avoid clashes) */
.sk-map__lbl {
  position: absolute; font-style: normal; white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em;
  color: var(--muted); text-shadow: 0 1px 4px rgba(0, 0, 0, .9);
  transition: color .2s;
}
.sk-map__pin:hover .sk-map__lbl { color: var(--accent); }
.sk-map__pin--hq .sk-map__lbl { color: var(--ember); }
.sk-map__pin--r .sk-map__lbl { left: calc(100% + 2px); top: 50%; transform: translateY(-50%); }
.sk-map__pin--l .sk-map__lbl { right: calc(100% + 2px); top: 50%; transform: translateY(-50%); }
.sk-map__pin--t .sk-map__lbl { left: 50%; bottom: calc(100% - 1px); transform: translateX(-50%); }
.sk-map__pin--b .sk-map__lbl { left: 50%; top: calc(100% - 1px); transform: translateX(-50%); }
@media (max-width: 700px) { .sk-map__lbl { display: none; } }

.sk-map__tip {
  position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%) translateY(4px);
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; white-space: nowrap;
  color: var(--text); background: var(--surface-2); border: 1px solid var(--border-strong);
  padding: 6px 11px; border-radius: 8px; opacity: 0; pointer-events: none;
  transition: opacity .2s var(--ease), transform .2s var(--ease); z-index: 5;
}
.sk-map__pin:hover .sk-map__tip, .sk-map__pin:focus-visible .sk-map__tip {
  opacity: 1; transform: translateX(-50%) translateY(0);
}
.sk-map__pin:hover { z-index: 6; }
@media (max-width: 700px) {
  .sk-map__pin { width: 16px; height: 16px; }
  .sk-map__pin i { inset: 4.5px; }
}
@media (prefers-reduced-motion: reduce) { .sk-map__pin::before { animation: none; opacity: 0; } }

/* ---- Service detail v3 ---- */
.sk-svcd__cols { display: grid; grid-template-columns: 1.4fr 1fr; gap: 50px; align-items: start; }
.sk-svcd__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sk-svcd__aside { position: sticky; top: 100px; }
.sk-svcd__stackgrid { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(30px, 5vw, 70px); align-items: center; }
.sk-svcd__stack { display: flex; flex-wrap: wrap; gap: 12px; }
.sk-svcd__tool {
  font-family: var(--font-mono); font-size: 14px; color: var(--text);
  border: 1px solid var(--border-strong); border-radius: 100px; padding: 12px 20px;
  transition: border-color .3s var(--ease), color .3s, transform .3s var(--ease);
}
.sk-svcd__tool:hover { border-color: var(--accent); color: var(--accent); transform: translateY(-3px); }
.sk-svcd__plan { position: relative; padding-top: 54px; }
.sk-svcd__plan-num {
  position: absolute; top: 22px; right: 24px;
  font-family: var(--font-display); font-weight: 800; font-size: 30px;
  color: transparent; -webkit-text-stroke: 1px rgba(18, 216, 137, .55);
}
@media (max-width: 900px) {
  .sk-svcd__cols { grid-template-columns: 1fr; }
  .sk-svcd__aside { position: static; }
  .sk-svcd__stackgrid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) { .sk-svcd__caps { grid-template-columns: 1fr; } }

/* ---- FAQ: morphing +/- indicator ---- */
body.sk .faq-one .accrodion-title { position: relative; padding-right: 64px; }
body.sk .faq-one .accrodion-title::before,
body.sk .faq-one .accrodion-title::after {
  content: ""; position: absolute; right: 28px; top: 50%; width: 16px; height: 2px;
  background: var(--muted); transition: transform .35s var(--ease), background .35s;
}
body.sk .faq-one .accrodion-title::after { transform: rotate(90deg); }
body.sk .faq-one .accrodion.active .accrodion-title::before,
body.sk .faq-one .accrodion.active .accrodion-title::after { background: var(--accent); transform: rotate(180deg); }

/* ============================================================
   ████ V3 — UI SUGGESTIONS ROUND (client feedback) ████
   ============================================================ */

/* ---- #7 Transparent header: float over the hero, no black band ---- */
body.sk .main-header {
  position: absolute; top: 0; left: 0; right: 0; z-index: 90;
  background: transparent;
}

/* ---- #5 Engine Room: fit normal laptop viewports (height-aware) ---- */
@media (min-width: 900px) {
  .sk-hsc__head { padding-top: clamp(134px, 15vh, 168px); }
  .sk-hsc .sk-title { font-size: clamp(26px, 5.2vh, 58px); }
  .sk-hsc__track { padding-top: clamp(22px, 4vh, 60px); padding-bottom: clamp(28px, 5vh, 90px); }
  .sk-svc-panel { min-height: min(430px, 52vh); padding: clamp(22px, 3.6vh, 44px); }
  .sk-svc-panel__icon { font-size: clamp(30px, 4.6vh, 44px); margin: clamp(12px, 2.4vh, 26px) 0 4px; }
  .sk-svc-panel h3 { font-size: clamp(20px, 3.4vh, 34px); }
}

/* ---- #2 Hero keyword pills ---- */
.sk-kw {
  display: inline-flex; align-items: baseline;
  padding: 0 .28em; margin: 0 .03em; border-radius: .5em;
  background: rgba(255, 255, 255, .055);
  border: 1px solid var(--border-strong);
  color: var(--text); line-height: 1.12; position: relative;
  transition: color .25s var(--ease), border-color .25s var(--ease),
              background .25s var(--ease), transform .25s var(--ease), box-shadow .25s var(--ease);
}
/* two-column hero: headline sized against its OWN column width (container
   query) so every masked line stays a single line at any screen size */
.sk-hero__main { container-type: inline-size; }
.sk-hero__cols h1 { font-size: clamp(30px, 3.5vw, 58px); line-height: 1.06; }
@supports (font-size: 1cqw) {
  .sk-hero__cols h1 { font-size: clamp(26px, 6.35cqw, 64px); }
}
/* normal laptops: slightly more presence for the figure too */
@media (min-width: 1100px) and (max-width: 1499px) {
  .sk-hero__cols { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); }
}
/* below the two-column breakpoint: anchor content from the top so the
   status line can never drift under the floating header. The robot column
   is hidden and the hero doesn't pin here, so drop the full-viewport
   height too — otherwise tall tablets (iPad ~1024px) show a huge blank
   band between the CTAs and the bottom-pinned stats */
@media (max-width: 1099px) {
  .sk-hero { min-height: 0; }
  .sk-hero__inner { justify-content: flex-start; padding-top: 132px; }
  .sk-hero__stats { margin-top: clamp(44px, 7vh, 84px); }
}
/* large monitors ONLY: let the hero breathe wider so the type can scale up.
   1700px+ keeps this off 1500–1600px viewports (fullHD at 125% OS scale),
   where the 1460px container left almost no side gutter */
@media (min-width: 1700px) {
  .sk-hero .sk-container { max-width: 1460px; }
  .sk-hero__cols { grid-template-columns: minmax(0, 1.18fr) minmax(0, .82fr); }
}
/* laptop-height fit: whole hero (status..stats) inside one screen
   (desktop only — must not fight the <1100px top-anchored layout) */
@media (max-height: 860px) and (min-width: 1100px) {
  .sk-hero__inner { padding-top: 92px; }
  .sk-hero__cols h1 { font-size: clamp(26px, 5.6vh, 46px); }
  /* never exceed what the text column can fit on one line */
  .sk-hero__cols h1 { font-size: clamp(26px, min(5.6vh, 5.85cqw), 46px); }
  .sk-hero__sub { font-size: 15px; }
  .sk-hero__actions { margin-top: 20px; }
  .sk-hero__stats { padding-top: 20px; gap: clamp(20px, 4vw, 48px); }
  .sk-hero__stat-num { font-size: clamp(22px, 3.4vh, 32px); }
  .sk-bot-fig { width: min(100%, 40vh); }
}
.sk-kw::after {
  content: "\2197"; font-size: .34em; margin-left: .35em; align-self: flex-start; margin-top: .5em;
  color: var(--accent); opacity: 0; transform: translate(-4px, 4px); transition: all .25s var(--ease);
}
.sk-kw:hover {
  color: var(--accent); border-color: var(--accent); background: var(--accent-soft);
  transform: translateY(-3px); box-shadow: 0 14px 40px var(--accent-glow);
}
.sk-kw:hover::after { opacity: 1; transform: translate(0, 0); }

/* ---- #3 Hero robot (right column) ---- */
.sk-hero__cols {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: clamp(24px, 4vw, 60px); align-items: center;
}
.sk-hero__bot { position: relative; display: flex; justify-content: center; }
/* the figure: true transparent cutouts — only a soft bottom fade so the
   torso dissolves into the section instead of ending at the image edge */
.sk-bot-fig {
  position: relative;
  width: min(100%, 440px); aspect-ratio: 880 / 1179;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
  mask-image: linear-gradient(180deg, #000 78%, transparent 97%);
  filter: drop-shadow(0 0 34px rgba(18, 216, 137, .16));
  animation: skBotFloat 7s ease-in-out infinite;
  will-change: transform;
}
.sk-bot-layer { position: absolute; inset: 0; }
.sk-bot-layer img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sk-bot-layer--front { opacity: 0; }
/* frame-sequence figure: square stage, true-alpha frames on a canvas
   (poster <img> shows until the first frame is drawn / without JS) */
.sk-bot-fig--video { aspect-ratio: 1 / 1; width: min(100%, 520px); }
.sk-bot-canvas, .sk-bot-poster {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; object-fit: contain;
}
.sk-bot-poster { transition: opacity .2s linear; }
@media (max-height: 860px) and (min-width: 1100px) {
  /* square fig needs more width than the old portrait cut to read the same size */
  .sk-bot-fig--video { width: min(100%, 56vh); }
}
/* while the hero robot sequence is pinned, both navs stay out of sight —
   they come back once the pin releases into the next section */
body.sk .main-header, body.sk .stricky-header { transition: transform .45s var(--ease); }
body.sk.sk-navlock .main-header,
body.sk.sk-navlock .stricky-header {
  transform: translateY(-130%) !important;
  pointer-events: none;
}
/* assembly shards (injected by JS): each shows one clip-path slice */
.sk-bot-shard { position: absolute; inset: 0; will-change: transform, opacity; }
.sk-bot-shard img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* energize scan line */
.sk-bot-scan {
  position: absolute; left: 6%; right: 6%; top: 0; height: 3px; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 24px var(--accent-glow); border-radius: 3px; pointer-events: none;
}
@keyframes skBotFloat { 0%, 100% { transform: translateY(0) } 50% { transform: translateY(-14px) } }
/* soft green pedestal glow under the figure */
.sk-hero__bot::after {
  content: ""; position: absolute; left: 50%; bottom: 4%; z-index: -1;
  width: 62%; height: 20%; transform: translateX(-50%);
  background: radial-gradient(50% 50% at 50% 50%, rgba(18, 216, 137, .22), transparent 70%);
  filter: blur(14px);
}
@keyframes skBotBlink { 0%, 91%, 100% { transform: scaleY(1) } 94%, 96% { transform: scaleY(.08) } }
@media (max-width: 1099px) { .sk-hero__cols { grid-template-columns: 1fr; } .sk-hero__bot { display: none; } }
@media (prefers-reduced-motion: reduce) { .sk-bot-fig { animation: none; } }

/* ---- #1 Clients: copy left + vertical counter-scrolling logo columns ---- */
.sk-clients2 { overflow: hidden; }
.sk-clients2__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 72px); align-items: center;
}
.sk-clcols {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
  height: min(480px, 60vh);
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 12%, #000 88%, transparent);
}
.sk-clcol { overflow: hidden; }
.sk-clcol__track { display: flex; flex-direction: column; gap: 16px; will-change: transform; }
.sk-clcard {
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  min-height: 128px; display: flex; align-items: center; justify-content: center; padding: 18px;
  transition: border-color .3s var(--ease);
}
.sk-clcard:hover { border-color: var(--accent); }
.sk-clcard img { max-width: 90%; max-height: 62px; width: auto; height: auto; opacity: .78; transition: opacity .3s; }
.sk-clcard:hover img { opacity: 1; }
@media (max-width: 979px) {
  .sk-clients2__grid { grid-template-columns: 1fr; }
  .sk-clcols { height: 380px; }
  .sk-clcard { min-height: 104px; padding: 12px; }
  .sk-clcard img { max-width: 94%; max-height: 56px; }
}
@media (prefers-reduced-motion: reduce) { .sk-clcol__track { transform: none !important; } }

/* ---- #4 How-we-work scroll-deck ---- */
.sk-deck { position: relative; }
.sk-deck__pin { position: relative; }
.sk-deck__stage { position: relative; min-height: 70vh; }
.sk-deck__slide { max-width: 560px; }
.sk-deck__slide .sk-eyebrow { margin-bottom: 14px; }
.sk-deck__slide h3 { font-size: clamp(26px, 4.6vh, 54px); margin: 0 0 16px; }
.sk-deck__slide p { font-size: clamp(15px, 1.3vw, 18px); }
.sk-deck__meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: .16em;
  color: var(--muted-2); text-transform: uppercase; display: inline-block; margin-top: 18px; }
/* Desktop deck mode (activated by JS) */
.sk-deck.is-deck .sk-deck__pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; }
/* auto inline margins would beat align-items:stretch in a flex column */
.sk-deck.is-deck .sk-container { width: 100%; }
.sk-deck.is-deck .sk-deck__stage { flex: 0 0 auto; min-height: 0; height: min(520px, 62vh); perspective: 1200px; }
.sk-deck.is-deck .sk-deck__slide {
  position: absolute; top: 50%; transform: translateY(-50%);
  left: 0; opacity: 0; visibility: hidden;
}
.sk-deck.is-deck .sk-deck__slide--right { left: auto; right: 0; text-align: right; }
.sk-deck.is-deck .sk-deck__slide--right .sk-eyebrow { flex-direction: row-reverse; }
/* the travelling 3D card */
.sk-deck__card {
  display: none; position: absolute; top: 50%; left: 50%; z-index: 2;
  width: min(330px, 30vw); aspect-ratio: 4/5; margin: calc(min(330px, 30vw) * -0.625) 0 0 calc(min(330px, 30vw) / -2);
  transform-style: preserve-3d; will-change: transform; pointer-events: none;
}
.sk-deck.is-deck .sk-deck__card { display: block; }
.sk-deck__card-inner {
  position: absolute; inset: 0; border-radius: 18px;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(18, 216, 137, .16), transparent 55%),
    radial-gradient(100% 100% at 85% 95%, rgba(255, 92, 31, .10), transparent 60%),
    var(--surface-2);
  border: 1px solid var(--border-strong);
  box-shadow: 0 40px 90px rgba(0, 0, 0, .6), 0 0 0 1px rgba(18, 216, 137, .06) inset;
  display: flex; flex-direction: column; justify-content: space-between; padding: 26px;
}
.sk-deck__card-num {
  font-family: var(--font-display); font-weight: 800; line-height: .95;
  /* capped so the widest tag (GROWTH) stays on ONE line inside the card */
  font-size: clamp(24px, 2.2vw, 36px);
  white-space: nowrap; letter-spacing: -.01em;
  color: transparent; -webkit-text-stroke: 1.5px rgba(18, 216, 137, .8);
}
.sk-deck__card-word { font-family: var(--font-mono); font-size: 12px; letter-spacing: .3em;
  text-transform: uppercase; color: var(--muted); }
.sk-deck__card-icon { font-size: 46px; color: var(--accent); align-self: flex-end; }
/* Mobile / fallback: plain stacked cards — force visible no matter what
   inline styles a torn-down desktop timeline may have left behind */
.sk-deck:not(.is-deck) .sk-deck__slide {
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius);
  padding: clamp(24px, 5vw, 40px); margin-bottom: 16px; max-width: none;
  position: static !important; opacity: 1 !important; visibility: visible !important;
  transform: none !important; text-align: left;
}
.sk-deck:not(.is-deck) .sk-deck__pin { height: auto !important; }
.sk-deck:not(.is-deck) .sk-deck__stage { min-height: 0; height: auto; }
.sk-deck:not(.is-deck) .sk-deck__card { display: none !important; }

/* deck card decorative vectors (blueprint motif behind the tag/word/icon) */
.sk-deck__card-art { position: absolute; inset: 0; pointer-events: none; opacity: .55; }
.sk-deck__card-art svg { width: 100%; height: 100%; }
.sk-deck__card-inner > div:not(.sk-deck__card-art),
.sk-deck__card-inner > .sk-deck__card-icon { position: relative; z-index: 1; }

/* ---- #6 Ladder robot back-to-top (v2: bigger, green, steps rung-by-rung) ---- */
.sk-ladder {
  position: fixed; right: 12px; top: 50%; transform: translateY(-50%);
  height: min(56vh, 500px); width: 48px; z-index: 950;
  opacity: 0; pointer-events: none; transition: opacity .45s var(--ease);
}
.sk-ladder.is-on { opacity: 1; pointer-events: auto; }
/* ROPE (default): a taut line with knots that sways gently.
   The original ladder rig is preserved — add class "is-ladder" to
   .sk-ladder to switch back. */
.sk-ladder__rail {
  position: absolute; inset: -14px 0 0 50%; width: 4px; margin-left: -2px;
  background:
    repeating-linear-gradient(to bottom,
      rgba(232, 234, 237, .28) 0 3px, rgba(232, 234, 237, .12) 3px 6px);
  border-radius: 3px;
  transform-origin: top center;
  animation: skRopeSway 5.5s ease-in-out infinite;
}
/* knots every rung-step */
.sk-ladder__rail::after {
  content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 10px; margin-left: -5px;
  background: repeating-linear-gradient(to bottom,
    transparent 0 14px, rgba(232, 234, 237, .22) 14px 17px);
  border-radius: 5px;
}
@keyframes skRopeSway {
  0%, 100% { transform: rotate(0deg) } 30% { transform: rotate(1.6deg) } 70% { transform: rotate(-1.4deg) }
}
.sk-ladder.is-ladder .sk-ladder__rail {
  inset: 0 9px; width: auto; margin-left: 0; animation: none;
  border-left: 2.5px solid rgba(255, 255, 255, .15);
  border-right: 2.5px solid rgba(255, 255, 255, .15);
  background: repeating-linear-gradient(to bottom,
    transparent 0 15px, rgba(255, 255, 255, .15) 15px 17px);
  border-radius: 5px;
}
.sk-ladder.is-ladder .sk-ladder__rail::after { display: none; }
.sk-ladder__bot {
  position: absolute; left: 50%; margin-left: -28px; top: 0;
  width: 56px; height: 66px; border: 0; background: none; padding: 0; cursor: pointer;
  will-change: top; transition: top .1s linear, filter .3s;
}
.sk-ladder__bot:hover { filter: drop-shadow(0 0 12px var(--accent-glow)); }
.sk-ladder__bot svg { width: 100%; height: 100%; overflow: visible; }
.sk-ladder__bot .lb-arm-l, .sk-ladder__bot .lb-arm-r,
.sk-ladder__bot .lb-leg-l, .sk-ladder__bot .lb-leg-r {
  transform-box: fill-box; transition: transform .1s ease-out;
}
.sk-ladder__bot .lb-arm-l, .sk-ladder__bot .lb-arm-r { transform-origin: 50% 12%; }
.sk-ladder__bot .lb-leg-l, .sk-ladder__bot .lb-leg-r { transform-origin: 50% 8%; }
.sk-ladder__bot .lb-eye { transform-origin: center; transform-box: fill-box; animation: skBotBlink 4.6s infinite; }
/* stepped poses: opposite arm/leg reach, like a person on a ladder */
.sk-ladder__bot.pose-a .lb-arm-l { transform: rotate(-22deg) translateY(-3px); }
.sk-ladder__bot.pose-a .lb-arm-r { transform: rotate(16deg); }
.sk-ladder__bot.pose-a .lb-leg-l { transform: rotate(18deg); }
.sk-ladder__bot.pose-a .lb-leg-r { transform: rotate(-20deg) translateY(-2px); }
.sk-ladder__bot.pose-a svg { transform: rotate(-2.5deg); }
.sk-ladder__bot.pose-b .lb-arm-l { transform: rotate(16deg); }
.sk-ladder__bot.pose-b .lb-arm-r { transform: rotate(-22deg) translateY(-3px); }
.sk-ladder__bot.pose-b .lb-leg-l { transform: rotate(-20deg) translateY(-2px); }
.sk-ladder__bot.pose-b .lb-leg-r { transform: rotate(18deg); }
.sk-ladder__bot.pose-b svg { transform: rotate(2.5deg); }
.sk-ladder__bot svg { transition: transform .12s ease-out; }
/* waving hello */
.sk-ladder__bot.is-wave .lb-arm-r { animation: skWave 1.1s ease-in-out 2; }
@keyframes skWave {
  0%, 100% { transform: rotate(0deg) } 25% { transform: rotate(-135deg) }
  45% { transform: rotate(-105deg) } 65% { transform: rotate(-135deg) } 85% { transform: rotate(-110deg) }
}
/* resting lean */
.sk-ladder__bot.is-rest svg { transform: rotate(5deg); transition: transform .6s var(--ease); }
@media (max-width: 899px), (prefers-reduced-motion: reduce) { .sk-ladder { display: none; } }

/* ---- Generic contact result alert spacing already handled inline ---- */