/* ------------------------------------------------------------------
   Skycode Solutions

   Single-theme by intent, not omission. The identity is a white wordmark
   and a spectrum mark on pure black; there is no light-ground version of
   the logo, so the page commits to the mark's own world and paints every
   colour explicitly.

   The six spectrum stops are sampled from the logo artwork itself and
   are used as an ORDERED SCALE - position in the spectrum means position
   in the build. They are never decoration.
   ------------------------------------------------------------------ */

:root{
  color-scheme:dark;

  --void:#000000;          /* the logo's own ground, sampled */
  --panel:#0A0B0E;         /* raised surface, pulled blue-black */
  --hair:#1C1E26;          /* rules and edges */
  --paper:#FFFFFF;
  --ash:#8C8FA0;           /* neutral biased toward the cool end of the spectrum */
  --ash-dim:#5B5E6C;

  /* sampled from the mark, in the order they appear along its arm */
  --s1:#254DFC;  --s2:#36BEFC;  --s3:#FDEF4E;
  --s4:#F9A038;  --s5:#F84E34;  --s6:#4E202A;

  --display:'Outfit',system-ui,-apple-system,'Segoe UI',sans-serif;
  --body:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;

  --gut:clamp(20px,5vw,72px);
  --measure:64ch;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img{max-width:100%}
[hidden]{display:none !important}

body{
  margin:0;
  background:var(--void);
  color:var(--paper);
  font-family:var(--body);
  font-size:16.5px;
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}

a{color:inherit}

:focus-visible{
  outline:2px solid var(--s2);
  outline-offset:3px;
  border-radius:2px;
}

.skip{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--paper); color:var(--void);
  padding:10px 16px; font-family:var(--mono); font-size:.8rem;
}
.skip:focus{left:12px;top:12px}

/* --- the scroll rail -------------------------------------------------
   Full spectrum, always visible at rest. The white tick reports how far
   through the page you are - the rail is a scale, so the document's own
   progress is measured on it.                                         */

.rail{
  position:fixed; left:0; top:0; bottom:0; width:3px; z-index:40;
  background:linear-gradient(180deg,
    var(--s1) 0%, var(--s2) 20%, var(--s3) 42%,
    var(--s4) 62%, var(--s5) 80%, var(--s6) 100%);
  opacity:.55;
}
.rail-tick{
  position:fixed; left:0; width:13px; height:2px; z-index:41;
  background:var(--paper); top:0;
  transform:translateY(0);
  will-change:transform;
}
@media (max-width:900px){ .rail,.rail-tick{display:none} }

/* --- shell ---------------------------------------------------------- */

.wrap{max-width:1180px;margin:0 auto;padding-inline:var(--gut)}

header.top{
  position:sticky; top:0; z-index:30;
  background:rgba(0,0,0,.86);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--hair);
}
.top-in{
  display:flex; align-items:center; justify-content:space-between;
  gap:24px; height:66px;
}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none}
.brand img{width:26px;height:26px;object-fit:contain;display:block}
.brand span{
  font-family:var(--display); font-weight:700; font-size:1.06rem;
  letter-spacing:-.02em;
}
nav.top-nav{display:flex;gap:30px}
nav.top-nav a{
  font-family:var(--mono); font-size:.7rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ash); text-decoration:none;
  padding-block:6px; transition:color .18s ease;
}
nav.top-nav a:hover{color:var(--paper)}
@media (max-width:680px){ nav.top-nav{display:none} }

/* --- shared type ---------------------------------------------------- */

.eyebrow{
  font-family:var(--mono); font-size:.7rem; font-weight:500;
  letter-spacing:.19em; text-transform:uppercase; color:var(--ash-dim);
  margin:0 0 20px;
}
h1{
  font-family:var(--display); font-weight:900;
  font-size:clamp(2.5rem,6.6vw,5.1rem);
  line-height:.98; letter-spacing:-.035em;
  text-wrap:balance; margin:0;
}
h2{
  font-family:var(--display); font-weight:700;
  font-size:clamp(1.65rem,3.3vw,2.5rem);
  line-height:1.06; letter-spacing:-.028em;
  text-wrap:balance; margin:0 0 14px;
}
h3{
  font-family:var(--display); font-weight:700;
  font-size:1.16rem; letter-spacing:-.018em;
  margin:0 0 7px;
}
p{margin:0}
.lede{
  font-size:clamp(1.02rem,1.55vw,1.2rem); line-height:1.6;
  color:var(--ash); max-width:var(--measure);
}

/* --- streak divider --------------------------------------------------
   The logo's motion streaks, turned into the page's section rule. Each
   divider carries the slice of spectrum belonging to its position in the
   document, so the dividers themselves progress as you read down.     */

.streak{
  height:2px; border:0; margin:0;
  background:linear-gradient(90deg, var(--from), var(--to) 62%, transparent);
  opacity:.85;
}

section{padding-block:clamp(64px,8.5vw,120px)}

/* --- hero ----------------------------------------------------------- */

.hero{position:relative;padding-block:clamp(52px,8vw,92px) clamp(56px,8vw,104px);overflow:hidden}
#trails{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none;
}
.hero .wrap{position:relative;z-index:1}
.lockup{
  width:min(430px,74vw); height:auto; display:block;
  margin:0 0 clamp(34px,5vw,54px);
}
.hero p.lede{margin-top:24px}

.hero-meta{
  display:flex; flex-wrap:wrap; gap:10px 30px;
  margin-top:clamp(36px,5vw,52px);
  font-family:var(--mono); font-size:.71rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ash-dim);
}
.hero-meta span{display:flex;align-items:center;gap:9px}
.hero-meta i{width:7px;height:7px;border-radius:50%;flex:none;font-style:normal}

/* --- what we build ---------------------------------------------------
   Rows, not cards. A border around each of these would say "four
   separate objects"; they are four facets of one practice, so a shared
   hairline grid carries them and only the heading is lifted.          */

.builds{
  display:grid; grid-template-columns:1fr;
  gap:0; margin-top:clamp(34px,4.5vw,50px);
  border-top:1px solid var(--hair);
}
/* Pinned to two columns rather than auto-fit: at wide widths auto-fit
   resolved to three, which left the fourth item alone in its own row and
   put the odd/even hairlines - written for a two-column grid - on the
   wrong edges, boxing that item in. Four items want 2x2. */
@media (min-width:860px){
  .builds{grid-template-columns:1fr 1fr}
}
.build{
  padding:26px 26px 30px 0;
  border-bottom:1px solid var(--hair);
}
@media (min-width:860px){
  .build:nth-child(odd){padding-right:44px}
  .build:nth-child(even){padding-left:44px;border-left:1px solid var(--hair)}
}
.build .tag{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ash-dim); display:block;
  margin-bottom:12px;
}
.build p{color:var(--ash);font-size:.96rem;line-height:1.6}

/* --- the build path --------------------------------------------------
   Numbered because this genuinely is a sequence: each stage depends on
   the one before it. The number and the spectrum stop say the same thing
   twice, which is the point - the colour is the scale.                */

.path{margin-top:clamp(36px,5vw,54px);display:flex;flex-direction:column}
.stage{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:0 24px;
  padding:24px 0;
  border-top:1px solid var(--hair);
  position:relative;
}
.stage:last-child{border-bottom:1px solid var(--hair)}
.stage::before{
  content:""; position:absolute; left:0; top:-1px;
  width:56px; height:2px; background:var(--stop);
}
.stage-no{
  font-family:var(--mono); font-size:.78rem; font-weight:500;
  color:var(--stop); letter-spacing:.08em; padding-top:3px;
  font-variant-numeric:tabular-nums;
}
.stage-body h3{margin-bottom:5px}
.stage-body p{color:var(--ash);font-size:.955rem;max-width:60ch}
@media (max-width:560px){
  .stage{grid-template-columns:1fr;gap:8px}
  .stage-no{padding-top:0}
}

/* --- engineering -----------------------------------------------------
   A spec list wants to read like a spec: mono, aligned, scannable. No
   card treatment - these are values, not objects.                     */

.spec{
  margin-top:clamp(34px,4.5vw,50px);
  border-top:1px solid var(--hair);
  overflow-x:auto;
}
.spec dl{
  margin:0; display:grid;
  grid-template-columns:minmax(150px,210px) 1fr;
}
.spec dt{
  font-family:var(--mono); font-size:.71rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ash-dim);
  padding:19px 24px 19px 0; border-bottom:1px solid var(--hair);
}
.spec dd{
  margin:0; padding:19px 0; border-bottom:1px solid var(--hair);
  font-size:.96rem; color:var(--paper);
}
.spec dd em{
  display:block; font-style:normal; color:var(--ash);
  font-size:.885rem; margin-top:4px;
}
@media (max-width:620px){
  .spec dl{grid-template-columns:1fr}
  .spec dt{padding-bottom:0;border-bottom:0}
  .spec dd{padding-top:8px}
}

/* --- stance --------------------------------------------------------- */

.stance{
  margin-top:clamp(46px,6vw,72px);
  padding:clamp(28px,4vw,44px);
  background:var(--panel);
  border:1px solid var(--hair);
  border-left:2px solid var(--s2);
  border-radius:3px;
}
.stance p{
  font-family:var(--display); font-weight:500;
  font-size:clamp(1.12rem,2.1vw,1.5rem); line-height:1.4;
  letter-spacing:-.02em; max-width:46ch; text-wrap:balance;
}

/* --- footer --------------------------------------------------------- */

footer{padding-block:clamp(52px,7vw,88px) 56px}
.foot-in{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:32px; flex-wrap:wrap;
}
.foot-mark{width:52px;height:52px;object-fit:contain;display:block;margin-bottom:18px}
.foot-name{
  font-family:var(--display); font-weight:900; font-size:1.4rem;
  letter-spacing:-.03em;
}
.foot-dom{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--ash-dim); margin-top:6px;
}
.foot-year{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.15em;
  color:var(--ash-dim); font-variant-numeric:tabular-nums;
}

/* --- 404 ------------------------------------------------------------ */

.notfound{
  min-height:62vh; display:flex; flex-direction:column;
  justify-content:center; align-items:flex-start;
  padding-block:clamp(64px,10vw,140px);
}
.notfound .code{
  font-family:var(--mono); font-size:.72rem; letter-spacing:.19em;
  text-transform:uppercase; color:var(--s5); margin:0 0 18px;
}
.notfound a.back{
  display:inline-block; margin-top:30px;
  font-family:var(--mono); font-size:.74rem; letter-spacing:.15em;
  text-transform:uppercase; color:var(--paper);
  text-decoration:none; padding:12px 22px;
  border:1px solid var(--hair); border-left:2px solid var(--s2);
  transition:border-color .18s ease, background .18s ease;
}
.notfound a.back:hover{background:var(--panel);border-color:var(--ash-dim)}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
}