/* ──────────────────────────────────────────────────────────────────────────
   Schematek — HYBRID THEME. Loaded last, after every other stylesheet.

   Dark nav + hero, light content, dark footer. This file only re-points the
   design tokens defined in sk-pages.css (and work.html's own :root), then
   re-darkens the three bands that stay dark. It defines no components.

   If you add a component, give it token colours (var(--panel), var(--title),
   var(--line), var(--accent)…) and it themes itself. Hardcode a hex and it
   will be stuck on one theme.
   ────────────────────────────────────────────────────────────────────────── */

/* ── LIGHT is now the page default ───────────────────────────────────────── */
:root{
  --navy:#EDF0F5;          /* page field          */
  --panel:#FFFFFF;         /* cards, panels       */
  --panel-deep:#F6F8FC;    /* recessed panels     */
  --panel-hover:#EFF4FB;   /* card hover on the light field — a tint, never an inversion */
  --blue:#0B55CC;          /* headline accent, buttons — darkened for contrast on white */
  --blue-dim:rgba(11,85,204,0.12);
  --title:#121826;
  --body:#4F596E;
  --meta:#6E7A8E;
  --line:#DEE4EE;
  --line-bright:#C9D2E0;
  --accent:#0B55CC;
}

/* The global fixed dark grid is replaced by a per-hero one below. */
.sk-bg{display:none}
body{background:var(--navy)}

/* Panels on a light field need a real edge, not a 7%-white hairline. */
.sk-cards,.sk-proof,.sk-split,.sk-vs,.sk-web-grid,.sk-grid,.sk-card,.sk-cta{
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}

/* ── DARK BAND 1 + 2: nav, hero, and the homepage tag strip under it ─────── */
.sk-nav,.sk-hero,.sk-lp-hero,.sk-tagbar{
  --panel:#242838;
  --panel-deep:#1F2331;
  --panel-hover:#2A2F3C;
  --blue:#0066FF;
  --accent:#4D94FF;
  --title:#E4E8F0;
  --body:#9AA4B8;
  --meta:#8893A8;
  --line:rgba(255,255,255,0.07);
  --line-bright:rgba(255,255,255,0.13);
}
.sk-hero,.sk-lp-hero{background:#1B1F2A;position:relative;overflow:hidden}
.sk-tagbar{background:#1B1F2A;border-top:none}
.sk-hero::before,.sk-lp-hero::before{
  content:'';position:absolute;inset:0;z-index:0;pointer-events:none;
  background-image:
    linear-gradient(rgba(150,155,165,0.10) 1px,transparent 1px),
    linear-gradient(90deg,rgba(150,155,165,0.10) 1px,transparent 1px);
  background-size:64px 64px;
}
.sk-hero::after,.sk-lp-hero::after{
  content:'';position:absolute;top:-40%;right:-5%;z-index:0;pointer-events:none;
  width:70vw;height:70vw;max-width:900px;max-height:900px;
  background:radial-gradient(circle,rgba(0,102,255,0.18) 0%,transparent 62%);
}
/* Lift only the content wrappers above the grid/glow layers. NOT `.sk-hero > *`,
   which would un-absolute the oversized background "7" and pad the hero out. */
.sk-hero-inner,.sk-lp-hero-inner{position:relative;z-index:2}
.sk-hero-seven,.sk-lp-7,.sk-hero-7{z-index:1}

.sk-nav{background:rgba(27,31,42,0.94);border-bottom:1px solid rgba(255,255,255,0.08)}
.sk-nav-links a{color:#8893A8}
.sk-nav-links a:hover{color:#E4E8F0}
.sk-nav-links a.is-active{color:#4D94FF;border-bottom-color:#0066FF}
.sk-nav-cta{color:#4D94FF;border-color:rgba(0,102,255,.4);background:rgba(0,102,255,.08)}
.sk-nav-cta:hover{background:rgba(0,102,255,.18);border-color:#0066FF}
.sk-nav-phone{color:#E4E8F0}
.sk-hero .sk-btn-primary,.sk-lp-hero .sk-btn-primary{background:#0066FF}
.sk-hero .sk-btn-primary:hover,.sk-lp-hero .sk-btn-primary:hover{background:#0051CC}

/* ── DARK BAND 3: the footer bookends the page ───────────────────────────── */
.sk-footer,.sk-foot{
  --title:#E4E8F0; --body:#9AA4B8; --meta:#8893A8; --accent:#4D94FF;
  --line:rgba(255,255,255,0.07);
  background:#1B1F2A;border-top:none;margin-top:56px;
}