/* Alloy Integrations — shared styles for every page.
   Lives outside /assets/ so it revalidates on each visit (see _headers). */

:root{
  --black:#000000;
  --plate:#0d0e10;
  --silver:#b9bcc2;
  --silver-dim:rgba(185,188,194,.62);
  /* one brass for the whole site: the I bar in the logo */
  --brass:#b08f66;
  --brass-hi:#d6bb92;
  --brass-a:176,143,102;
  --bone:#ece8e0;
  --ease:cubic-bezier(.22,.61,.36,1);
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
*,*::before,*::after{box-sizing:inherit}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
html,body{margin:0;min-height:100%}
body{
  /* logo size drives the trace geometry; derived values are declared here so pages can override --logo-w */
  --logo-w:clamp(260px, 38vw, 560px);
  --i-x:.338;                                   /* center of the I bar, fraction of logo width */
  --trace-x:calc(var(--logo-w) * var(--i-x));
  --trace-w:calc(var(--logo-w) * .0069);        /* logo circuit: 11px trace on a 1588px logo */
  --via:calc(var(--logo-w) * .029);             /* logo circuit: 46px via on a 1588px logo */
  --pad:clamp(22px,3vw,40px);                   /* gap between the trace and the text */
  --pad-top:clamp(28px,4vh,48px);
  background:var(--black);
  color:var(--bone);
  font-family:"Archivo",system-ui,-apple-system,"Segoe UI",Helvetica,Arial,sans-serif;
  font-variation-settings:"wdth" 100;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
body.sub{--logo-w:clamp(230px, 28vw, 420px)}

/* ---------- backdrop ---------- */
.backdrop{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--plate)}
.backdrop .plate{
  position:absolute;inset:0;
  background:
    radial-gradient(120% 80% at 70% 20%, rgba(var(--brass-a),.10) 0%, rgba(var(--brass-a),0) 60%),
    radial-gradient(90% 70% at 20% 90%, rgba(185,188,194,.07) 0%, rgba(185,188,194,0) 60%),
    linear-gradient(180deg,#0a0b0d 0%,#000 100%);
}
.backdrop img{
  position:absolute;inset:-4%;width:108%;height:108%;object-fit:cover;object-position:60% 45%;
  filter:saturate(.45) contrast(1.08) brightness(.42);
  opacity:0;transform:scale(1.06);
  transition:opacity 1.8s var(--ease);
}
.backdrop.ready img{opacity:1;animation:drift 42s var(--ease) forwards}
@keyframes drift{from{transform:scale(1.06) translate3d(0,0,0)}to{transform:scale(1.0) translate3d(-1.2%,-.8%,0)}}
.backdrop .shade{
  position:absolute;inset:0;
  background:
    linear-gradient(90deg, rgba(0,0,0,.86) 0%, rgba(0,0,0,.62) 42%, rgba(0,0,0,.22) 100%),
    linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 35%, rgba(0,0,0,.55) 80%, #000 100%);
}
.sub .backdrop .shade{
  background:
    linear-gradient(90deg, rgba(0,0,0,.9) 0%, rgba(0,0,0,.7) 45%, rgba(0,0,0,.35) 100%),
    linear-gradient(180deg, rgba(0,0,0,.4) 0%, rgba(0,0,0,.1) 35%, rgba(0,0,0,.6) 80%, #000 100%);
}
.backdrop .grain{
  position:absolute;inset:0;opacity:.055;mix-blend-mode:screen;pointer-events:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size:220px 220px;
}

/* ---------- layout ---------- */
.page{
  position:relative;z-index:1;
  min-height:100dvh;
  display:grid;grid-template-rows:1fr auto;
}
.hero{
  padding:clamp(28px,6vh,72px) clamp(20px,6vw,88px) 0;
  display:grid;
  align-content:center;
  gap:0;
}
.stack{position:relative;width:min(100%, 760px)}

.logo-link{display:inline-block;border-radius:2px}
.logo-link:focus-visible{outline:2px solid var(--brass-hi);outline-offset:6px}
.logo{
  display:block;width:var(--logo-w);height:auto;
  opacity:0;transform:translateY(8px);
  animation:rise 1.1s var(--ease) .35s forwards;
}

/* the trace: a continuation of the I bar's circuit, leaving the mark and running down the page */
.trace{
  position:relative;
  margin-left:var(--trace-x);
  padding-left:var(--pad);
  padding-top:var(--pad-top);
  padding-bottom:clamp(20px,3vh,36px);
}
.trace::before{
  content:"";position:absolute;left:calc(var(--trace-w) / -2);top:0;bottom:0;width:var(--trace-w);
  background:var(--brass);
  transform-origin:top;transform:scaleY(0);
  animation:draw 1.4s var(--ease) 1.15s forwards;
}
/* solid vias, like the logo: about 4x the trace width */
.node{
  position:absolute;left:calc(var(--via) / -2);width:var(--via);height:var(--via);border-radius:50%;
  background:var(--brass);
  opacity:0;animation:pop .5s var(--ease) forwards;
}
.node.top{top:calc(var(--via) / -2);animation-delay:1.05s}
.node.mid{top:calc(var(--pad-top) - var(--via) / 2 + .55em);animation-delay:1.7s}
.node.end{bottom:calc(var(--via) / -2);animation-delay:2.5s}
.node.end::before{
  content:"";position:absolute;inset:-9px;border-radius:50%;
  border:1.5px solid rgba(var(--brass-a),.6);
  animation:ring 2.6s ease-out 3.1s infinite;
}

/* ---------- type ---------- */
h1{
  margin:0 0 clamp(16px,2.4vh,26px);
  font-variation-settings:"wdth" 118, "wght" 560;
  font-weight:560;
  font-size:clamp(1.7rem, 3.9vw, 3.35rem);
  line-height:1.02;letter-spacing:-.012em;
  max-width:14ch;
  color:var(--bone);
  opacity:0;transform:translateY(10px);
  animation:rise .9s var(--ease) 1.75s forwards;
}
.lede{
  margin:0;
  max-width:44ch;
  font-size:clamp(1rem, 1.35vw, 1.125rem);
  line-height:1.58;
  color:var(--silver);
  opacity:0;transform:translateY(10px);
  animation:rise .9s var(--ease) 2.05s forwards;
}
.lede a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(var(--brass-a),.6)}
.lede a:hover{border-color:var(--brass-hi)}
.status{
  margin:clamp(22px,3.4vh,36px) 0 0;
  font-size:.95rem;line-height:1.4;
  color:var(--brass);
  font-variation-settings:"wdth" 108, "wght" 500;
  opacity:0;transform:translateY(6px);
  animation:rise .8s var(--ease) 2.6s forwards;
}
.status span{color:var(--silver-dim);font-variation-settings:"wdth" 100,"wght" 400}
.status a{color:var(--silver);text-decoration:none;border-bottom:1px solid rgba(var(--brass-a),.5);white-space:nowrap;transition:color .2s,border-color .2s}
.status a:hover{color:var(--bone);border-color:var(--brass-hi)}
.status a:focus-visible{outline:2px solid var(--brass-hi);outline-offset:3px;border-color:transparent}

/* ---------- services: each one taps the trace with its own via ---------- */
.services{margin-top:clamp(24px,3.6vh,38px)}
.services .label{
  margin:0 0 6px;
  font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:var(--brass);
  font-variation-settings:"wdth" 116,"wght" 560;
  opacity:0;animation:fade .8s var(--ease) 2.15s forwards;
}
.services ul{list-style:none;margin:0;padding:0}
.services li{opacity:0;transform:translateY(6px);animation:rise .6s var(--ease) calc(2.2s + var(--i,0) * .07s) forwards}
.services a{
  position:relative;display:inline-flex;align-items:center;gap:.55em;
  padding:.34em 0;
  color:var(--silver);text-decoration:none;
  font-size:clamp(1rem,1.25vw,1.0625rem);
  font-variation-settings:"wdth" 108,"wght" 500;
  transition:color .25s var(--ease);
}
.services a::before{ /* the via, sitting on the trace */
  content:"";position:absolute;top:50%;
  left:calc(-1 * var(--pad) - var(--via) / 2);
  width:var(--via);height:var(--via);margin-top:calc(var(--via) / -2);
  border-radius:50%;background:var(--brass);
  transition:background-color .25s var(--ease),box-shadow .25s var(--ease);
}
.services a::after{ /* the branch from the trace to the label, drawn on hover */
  content:"";position:absolute;top:50%;
  left:calc(-1 * var(--pad));
  width:calc(var(--pad) - .5em);height:var(--trace-w);margin-top:calc(var(--trace-w) / -2);
  background:var(--brass);
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s var(--ease);
}
.services .arrow{color:var(--brass);opacity:0;transform:translateX(-4px);transition:opacity .25s var(--ease),transform .25s var(--ease)}
.services a:hover,.services a:focus-visible{color:var(--bone);outline:none}
.services a:hover::after,.services a:focus-visible::after,.services a[aria-current="page"]::after{transform:scaleX(1)}
.services a:hover::before,.services a:focus-visible::before{background:var(--brass-hi);box-shadow:0 0 0 4px rgba(var(--brass-a),.18)}
.services a:hover .arrow,.services a:focus-visible .arrow{opacity:1;transform:none}
.services a:focus-visible{text-decoration:underline;text-decoration-color:var(--brass-hi);text-underline-offset:4px}
.services a[aria-current="page"]{color:var(--bone)}
.services a[aria-current="page"]::before{background:var(--brass-hi);box-shadow:0 0 0 4px rgba(var(--brass-a),.22)}

/* ---------- coming soon (service pages) ---------- */
.soon{
  margin-top:clamp(24px,3.6vh,36px);
  max-width:46ch;
  padding:16px 18px 17px;
  border:1px solid rgba(var(--brass-a),.38);
  border-radius:3px;
  background:linear-gradient(180deg,rgba(var(--brass-a),.10),rgba(var(--brass-a),.03));
  -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  opacity:0;transform:translateY(8px);
  animation:rise .8s var(--ease) 2.25s forwards;
}
.soon .tag{
  display:inline-flex;align-items:center;gap:11px;margin:0;
  font-size:.8rem;letter-spacing:.26em;text-transform:uppercase;color:var(--brass-hi);
  font-variation-settings:"wdth" 118,"wght" 620;
}
.soon .led{position:relative;width:8px;height:8px;border-radius:50%;background:var(--brass-hi);flex:none}
.soon .led::after{
  content:"";position:absolute;inset:-6px;border-radius:50%;
  border:1.5px solid rgba(var(--brass-a),.65);
  animation:ring 2.2s ease-out 2.8s infinite;opacity:0;
}
.soon p.body{margin:9px 0 0;color:var(--silver);font-size:.97rem;line-height:1.55}
.soon a{color:var(--bone);text-decoration:none;border-bottom:1px solid rgba(var(--brass-a),.6);white-space:nowrap}
.soon a:hover{border-color:var(--brass-hi)}
.sub .services li{animation-delay:calc(2.4s + var(--i,0) * .07s)}
.sub .services .label{animation-delay:2.35s}

/* ---------- footer ---------- */
footer{
  padding:clamp(18px,3vh,28px) clamp(20px,6vw,88px) clamp(20px,3vh,30px);
  display:flex;justify-content:space-between;gap:10px 24px;flex-wrap:wrap;
  font-size:.8125rem;color:var(--silver-dim);
  opacity:0;animation:fade 1.2s var(--ease) 3s forwards;
}
footer a{color:inherit;text-decoration:none;border-bottom:1px solid rgba(185,188,194,.25);padding-bottom:1px}
footer a:hover,footer a:focus-visible{color:var(--bone);border-color:var(--brass-hi);outline:none}
footer a:focus-visible{outline:2px solid var(--brass-hi);outline-offset:4px;border-color:transparent}

@keyframes rise{to{opacity:1;transform:none}}
@keyframes fade{to{opacity:1}}
@keyframes pop{to{opacity:1}}
@keyframes draw{to{transform:scaleY(1)}}
@keyframes ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(1.8);opacity:0}}

@media (max-width:640px){
  body{--logo-w:min(78vw,340px)}
  body.sub{--logo-w:min(66vw,290px)}
  .hero{align-content:end;padding-bottom:8px}
  .sub .hero{align-content:start}
  h1{max-width:16ch}
  .lede{max-width:36ch}
  footer{font-size:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .logo,h1,.lede,.status,footer,.node,.services .label,.services li,.soon{animation:none;opacity:1;transform:none}
  .trace::before{animation:none;transform:none}
  .node.end::before,.soon .led::after{animation:none;opacity:0}
  .backdrop.ready img{animation:none;transform:none}
  .services a::after,.services a::before,.services .arrow{transition:none}
}