/* ELIT Technologies: shared styles for every page */
:root{
  --ink:#14121F;
  --violet:#3E2F85;
  --violet-deep:#2C2160;
  --gold:#F2B705;
  --slate:#1F3550;
  --slate-deep:#162840;
  --paper:#F7F3FF;
  --teal:#2FE0C4;
  --text-on-dark:var(--paper);
  --text-on-light:#1B1730;
  --nav-w:190px;
  font-family:'IBM Plex Sans',-apple-system,Segoe UI,Arial,sans-serif;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:env(safe-area-inset-top,0px);}
body{
  margin:0;
  background:var(--ink);
  color:var(--text-on-dark);
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  overflow-x:hidden;
}
h1,h2,h3{font-family:'Archivo',Georgia,serif; font-weight:900; margin:0; line-height:1.02; letter-spacing:-0.01em;}
p{margin:0;}
a{color:inherit;}
:focus-visible{outline:3px solid var(--teal); outline-offset:3px;}

/* ---------- Desktop rail nav ---------- */
.rail{
  position:fixed; top:0; left:0; bottom:0; width:var(--nav-w);
  display:flex; flex-direction:column; justify-content:center;
  z-index:50;
}
.rail-brand{
  position:absolute; top:calc(26px + env(safe-area-inset-top,0px)); left:20px;
  font-family:'Archivo',Georgia,serif; font-weight:900; font-size:1.35rem;
  letter-spacing:0.02em; color:var(--paper); text-decoration:none; padding:4px;
}
/* Trace is drawn by JS through the real node positions, in pixel space */
.rail-trace{position:absolute; inset:0; width:100%; height:100%; pointer-events:none; overflow:visible;}
.rail-trace path{fill:none; stroke-width:2.5; stroke-linejoin:miter; stroke-linecap:square;}
.rail-trace .trace-track{stroke:rgba(47,224,196,0.16);}
.rail-trace .trace-live{stroke:var(--teal);}
.rail-trace .trace-scratch{stroke:none; visibility:hidden;}
/* Electric current: bright dashes that surge along the powered trace while scrolling */
.rail-trace .trace-current{
  stroke:#E9FFFB; stroke-width:2.5; stroke-linecap:round; opacity:0;
  filter:drop-shadow(0 0 3px rgba(47,224,196,1)) drop-shadow(0 0 7px rgba(47,224,196,0.7));
}
.rail-trace .pad{fill:var(--ink); stroke:var(--teal); stroke-width:2; transition:fill .4s ease;}
.rail-trace .pad.lit{fill:var(--teal);}
.rail-trace .trace-tip{fill:#E9FFFB; filter:drop-shadow(0 0 4px rgba(47,224,196,1)) drop-shadow(0 0 9px rgba(47,224,196,0.8));}
/* Nav spans most of the screen height so nodes aren't bunched in the middle */
.rail nav{
  position:relative; display:flex; flex-direction:column; justify-content:space-between;
  height:clamp(380px, 74vh, 720px);
}
.rail nav a{
  position:relative; display:flex; align-items:center; min-height:44px;
  padding-left:76px; padding-right:12px;
  text-decoration:none; font-family:'IBM Plex Sans',-apple-system,Segoe UI,Arial,sans-serif;
  font-weight:600; font-size:0.95rem; color:#B8AFE0; transition:color .2s ease;
}
.rail nav a.active, .rail nav a:hover{color:var(--paper);}
/* Each node sits on its own label's centerline; --x sets where the trace jogs */
.rail .node{
  position:absolute; left:var(--x,40px); top:50%;
  width:14px; height:14px; margin:-7px 0 0 -7px; border-radius:50%;
  background:var(--ink); border:2.5px solid var(--teal);
  transition:background-color .3s ease, transform .2s ease, box-shadow .3s ease;
}
.rail nav a.active .node{background:var(--teal); box-shadow:0 0 0 5px rgba(47,224,196,0.18);}
.rail nav a:hover .node{transform:scale(1.25);}
.rail nav a:focus-visible, .rail-brand:focus-visible{outline-offset:-2px;}
section[tabindex="-1"]:focus{outline:none;}

/* ---------- Mobile top bar ---------- */
.mobile-bar{
  display:none; position:fixed; top:0; left:0; right:0; z-index:50;
  background:rgba(20,18,31,0.92); backdrop-filter:blur(6px);
  padding:14px 18px; padding-top:calc(14px + env(safe-area-inset-top,0px));
  align-items:center; justify-content:space-between;
}
.mobile-bar .brand{font-family:'Archivo'; font-weight:900; font-size:1.1rem;}
.menu-btn{
  display:inline-flex; align-items:center; gap:10px; background:transparent; color:var(--paper);
  border:1.5px solid rgba(247,243,255,0.35); padding:8px 14px; font:600 0.85rem 'IBM Plex Sans',-apple-system,Segoe UI,Arial,sans-serif; cursor:pointer;
}
.menu-btn .bars{display:inline-block; width:16px; height:2px; background:currentColor; position:relative;}
.menu-btn .bars::before, .menu-btn .bars::after{content:''; position:absolute; left:0; width:16px; height:2px; background:currentColor; transition:transform .2s ease;}
.menu-btn .bars::before{top:-5px;} .menu-btn .bars::after{top:5px;}
.menu-btn[aria-expanded="true"] .bars{background:transparent;}
.menu-btn[aria-expanded="true"] .bars::before{transform:translateY(5px) rotate(45deg);}
.menu-btn[aria-expanded="true"] .bars::after{transform:translateY(-5px) rotate(-45deg);}
#mobileNav{
  display:none; position:absolute; left:0; right:0; top:100%; background:var(--ink);
  border-top:1px solid rgba(247,243,255,0.08); border-bottom:2px solid var(--teal);
  padding:8px 6vw 16px; flex-direction:column; max-height:calc(100vh - 64px); overflow-y:auto;
}
#mobileNav.open{display:flex;}
#mobileNav a{
  display:flex; align-items:center; gap:12px; min-height:48px; text-decoration:none;
  font-size:1.05rem; font-weight:600; color:#B8AFE0; border-bottom:1px solid rgba(247,243,255,0.06);
}
#mobileNav a::before{content:''; width:9px; height:9px; border-radius:50%; border:2px solid var(--teal);}
#mobileNav a.active{color:var(--paper);}
#mobileNav a.active::before{background:var(--teal);}

/* ---------- Blocks ---------- */
main{margin-left:var(--nav-w);}
.block{min-height:100vh; padding:90px 8vw; display:flex; flex-direction:column; justify-content:center; position:relative;}
.block-violet{background:var(--violet);}
.block-gold{background:var(--gold); color:var(--text-on-light);}
.block-slate{background:var(--slate);}
.block-ink{background:var(--ink);}

.eyebrow-free-heading{font-size:clamp(2.4rem,6vw,4.6rem); max-width:11ch;}
.lede{font-size:1.15rem; max-width:52ch; margin-top:26px; line-height:1.55;}
.block-gold .lede{color:#3A2E00;}

.btn{
  display:inline-block; margin-top:40px; padding:16px 30px;
  background:var(--teal); color:var(--ink); font-weight:600; font-size:1rem;
  text-decoration:none; border:none; cursor:pointer; font-family:'IBM Plex Sans';
  width:fit-content;
}
.btn:hover{background:var(--paper);}
.btn-ghost{
  background:transparent; color:var(--paper); border:2px solid rgba(247,243,255,0.4);
  margin-left:16px;
}
.btn-ghost:hover{border-color:var(--paper); background:transparent;}
.cta-row{display:flex; flex-wrap:wrap; align-items:center;}

/* ---------- Hero / falling parts ---------- */
#home{overflow:hidden;}
.hero-inner{display:flex; align-items:center; gap:6vw; flex-wrap:wrap;}
.hero-text{flex:1 1 420px;}
.hero-stage{flex:1 1 320px; position:relative; height:340px; min-width:260px;}
.part{position:absolute; opacity:0; will-change:transform,opacity;}
.part svg{width:100%; height:100%;}
@keyframes fall{
  0%{transform:translateY(-160px) rotate(var(--rot-start,-30deg)); opacity:0;}
  55%{transform:translateY(8px) rotate(var(--rot-mid,12deg)); opacity:1;}
  75%{transform:translateY(-6px) rotate(var(--rot-end,-4deg));}
  100%{transform:translateY(0) rotate(var(--rot-rest,0deg)); opacity:1;}
}
.fall-active .part{animation:fall 1.1s cubic-bezier(.25,.6,.3,1) forwards;}
.replay-btn{
  position:absolute; bottom:0; right:0; background:none; border:1px solid rgba(247,243,255,0.35);
  color:var(--paper); font-family:'IBM Plex Sans'; font-size:0.8rem; padding:8px 14px; cursor:pointer;
}
.replay-btn:hover{border-color:var(--teal); color:var(--teal);}
.replay-btn:disabled{opacity:.4; cursor:default;}

/* Shake-loose: hero words fall and vanish into the top edge of the yellow section */
@keyframes jolt{
  0%,100%{transform:translate(0,0) rotate(0);}
  15%{transform:translate(-6px,2px) rotate(-1.2deg);}
  30%{transform:translate(5px,-3px) rotate(1deg);}
  45%{transform:translate(-4px,3px) rotate(-.8deg);}
  60%{transform:translate(4px,-1px) rotate(.6deg);}
  80%{transform:translate(-2px,1px) rotate(-.3deg);}
}
.jolting{animation:jolt .32s linear;}
.fall-layer{position:absolute; left:0; top:0; width:100%; overflow:hidden; pointer-events:none; z-index:40;}
.fall-layer > *{position:absolute; left:0; top:0; margin:0; white-space:nowrap; will-change:transform; transform-origin:50% 50%;}
.hero-text.loosened{visibility:hidden;}
.hero-text.settling{animation:settle .6s ease both;}
@keyframes settle{from{opacity:0;} to{opacity:1;}}

/* ---------- About ---------- */
.about-inner{display:flex; gap:6vw; align-items:flex-start; flex-wrap:wrap;}
#about{overflow:hidden;}
.avatar{flex:0 0 auto; width:140px; height:140px; perspective:700px;}
.avatar-inner{position:relative; width:100%; height:100%; transform-style:preserve-3d; transition:transform .8s cubic-bezier(.3,1.4,.5,1);}
.avatar.flipped .avatar-inner{transform:rotateY(180deg);}
.avatar .face{
  position:absolute; inset:0; border-radius:50%; background:var(--ink); color:var(--gold);
  display:flex; align-items:center; justify-content:center; backface-visibility:hidden; -webkit-backface-visibility:hidden;
  font-family:'Archivo',Georgia,serif; font-weight:900; font-size:3rem;
}
.avatar .face.back{transform:rotateY(180deg);}
.avatar .face.back svg{width:62px; height:62px;}
.about-text{flex:1 1 440px; max-width:640px;}
.chips{display:flex; flex-wrap:wrap; gap:10px; margin-top:28px;}
.chip{
  display:inline-flex; align-items:center;
  background:var(--ink); color:var(--paper); font-size:0.85rem; font-weight:600;
  padding:8px 16px; transition:padding .3s ease;
}
/* Check mark slides in once the scan line passes a chip */
.chip .chip-check{display:inline-block; width:0; overflow:hidden; opacity:0; transition:width .3s ease, opacity .3s ease, margin .3s ease;}
.chip .chip-check svg{display:block; width:14px; height:14px;}
.chip.verified .chip-check{width:14px; opacity:1; margin-right:8px;}

.scan-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:34px;}
.btn-scan{margin-top:0; background:var(--ink); color:var(--gold);}
.btn-scan:hover{background:var(--violet); color:var(--paper);}
.btn-scan:disabled{opacity:.55; cursor:default;}
.btn-scan:disabled:hover{background:var(--ink); color:var(--gold);}
.scan-msg{font-size:0.95rem; font-weight:600; color:#3A2E00; min-height:1.4em;}

/* The sweeping scan line */
.scan-beam{
  position:absolute; left:0; right:0; top:0; height:140px; pointer-events:none; opacity:0;
  background:linear-gradient(to bottom, rgba(20,18,31,0) 0%, rgba(20,18,31,0.09) 100%);
  border-bottom:2px solid var(--ink); transition:opacity .25s ease; will-change:transform;
}
.scan-beam.on{opacity:1;}
.scan-tag{
  position:absolute; right:8vw; bottom:-13px; background:var(--ink); color:var(--gold);
  font-size:0.75rem; font-weight:600; padding:4px 10px; font-variant-numeric:tabular-nums;
}

/* ---------- Services ---------- */
.services-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:24px; margin-top:48px;}
.service{
  position:relative; background:var(--slate-deep); padding:32px 28px;
  transition:background-color .5s ease, box-shadow .5s ease;
}
/* Status LED on each card: dim until the cable powers it */
.service .led{
  position:absolute; top:20px; right:20px; width:8px; height:8px; border-radius:50%;
  background:#2B4664; transition:background-color .3s ease, box-shadow .3s ease;
}
.service.powered{
  background:#1B3554;
  box-shadow:0 0 34px -8px rgba(47,224,196,0.5);
}
.service.powered .led{background:var(--teal); box-shadow:0 0 6px var(--teal), 0 0 14px rgba(47,224,196,0.6);}
.service.powered .node-icon{filter:drop-shadow(0 0 5px rgba(47,224,196,0.7));}
@keyframes power-flicker{
  0%{filter:brightness(1);} 18%{filter:brightness(1.35);} 30%{filter:brightness(.9);}
  46%{filter:brightness(1.25);} 60%{filter:brightness(1);} 100%{filter:brightness(1);}
}
.service.flicker{animation:power-flicker .45s linear;}

.plug-row{display:flex; flex-wrap:wrap; align-items:center; gap:18px; margin-top:30px;}
.btn-plug{margin-top:0; background:transparent; color:var(--teal); border:2px solid var(--teal);}
.btn-plug:hover{background:var(--teal); color:var(--ink);}
.btn-plug:disabled{opacity:.55; cursor:default;}
.btn-plug:disabled:hover{background:transparent; color:var(--teal);}
.plug-msg{font-size:0.95rem; font-weight:600; color:#9FE9DC; min-height:1.4em;}

/* Cable overlay: fixed to the viewport so it can start at the rail's Services node */
.plug-layer{position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:45; opacity:0; transition:opacity .3s ease;}
.plug-layer.show{opacity:1;}
.plug-layer path{fill:none; stroke-linejoin:miter; stroke-linecap:square;}
.plug-layer .cable{stroke:var(--teal); stroke-width:2.5;}
.plug-layer .cable-pulse{
  stroke:#E9FFFB; stroke-width:2.5; stroke-linecap:round; opacity:0;
  filter:drop-shadow(0 0 3px rgba(47,224,196,1)) drop-shadow(0 0 7px rgba(47,224,196,0.7));
}
.plug-layer .contact{fill:var(--teal);}
.service h3{font-size:1.4rem; margin-bottom:14px;}
.service p{color:#C6D3E0; line-height:1.5; margin-bottom:16px;}
.service ul{margin:0; padding-left:18px; color:#9FB2C6; font-size:0.92rem; line-height:1.7;}
.s1{grid-column:span 7;}
.s2{grid-column:span 5;}
.s3{grid-column:span 5;}
.s4{grid-column:span 7;}
.node-icon{width:34px; height:34px; margin-bottom:18px;}

/* ---------- Contact ---------- */
.contact-inner{display:flex; gap:6vw; flex-wrap:wrap;}
.contact-form{flex:1 1 380px; display:flex; flex-direction:column; gap:16px; max-width:480px;}
.contact-form label{font-size:0.85rem; font-weight:600; color:#B8AFE0;}
.contact-form input, .contact-form textarea{
  background:transparent; border:none; border-bottom:2px solid rgba(247,243,255,0.25);
  color:var(--paper); font-family:'IBM Plex Sans'; font-size:1rem; padding:10px 2px;
}
.contact-form input:focus, .contact-form textarea:focus{border-color:var(--teal);}
.contact-info{flex:1 1 280px; display:flex; flex-direction:column; gap:14px; color:#B8AFE0;}
.contact-info strong{color:var(--paper); display:block; font-family:'Archivo'; font-size:1.1rem; margin-bottom:4px;}
.form-msg{margin-top:4px; color:var(--teal); font-size:0.9rem; min-height:1.2em;}
.contact-form{position:relative;}
.hp-field{position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden;}
.form-msg.error{color:var(--gold);}
.contact-form > div, .contact-form .btn{transition:opacity .35s ease, transform .35s ease;}
.contact-form.encrypting input, .contact-form.encrypting textarea{color:var(--teal); font-family:ui-monospace,Menlo,Consolas,monospace; letter-spacing:.02em;}
.contact-form.packed > div, .contact-form.packed .btn{opacity:.18; transform:scale(.97);}

/* Padlock that snaps shut over the form while it encrypts */
.form-lock{position:absolute; top:-6px; right:0; width:30px; height:36px; opacity:0; transform:scale(.8); transition:opacity .25s ease, transform .25s ease;}
.form-lock.show{opacity:1; transform:scale(1);}
.form-lock .shackle{transform:translateY(-6px); transition:transform .18s cubic-bezier(.5,0,.6,1.6);}
.form-lock.locked .shackle{transform:translateY(0);}

/* The data packet and its trail */
.packet{
  position:fixed; left:0; top:0; width:12px; height:12px; margin:-6px 0 0 -6px; z-index:60; pointer-events:none;
  background:#E9FFFB; box-shadow:0 0 6px var(--teal), 0 0 16px rgba(47,224,196,.8);
  transform:scale(0); will-change:left, top, transform;
}
.packet.trail{width:8px; height:8px; margin:-4px 0 0 -4px; background:var(--teal); box-shadow:0 0 8px rgba(47,224,196,.7);}
@keyframes brand-ping{
  0%{color:var(--paper); text-shadow:none;}
  25%{color:var(--teal); text-shadow:0 0 12px rgba(47,224,196,.9);}
  100%{color:var(--paper); text-shadow:none;}
}
.received{animation:brand-ping .9s ease;}

/* ---------- Footer (all pages) ---------- */
.site-footer{margin-left:var(--nav-w); padding:48px 8vw 36px; background:var(--ink); color:#8F86B3; font-size:0.9rem; border-top:1px solid rgba(247,243,255,0.06);}
.footer-grid{display:flex; flex-wrap:wrap; gap:28px 56px; justify-content:space-between; align-items:flex-start;}
.footer-brand{font-family:'Archivo',Georgia,serif; font-weight:900; font-size:1.4rem; color:var(--paper);}
.footer-brand + p{margin-top:8px; max-width:34ch; line-height:1.5;}
.footer-links{display:grid; grid-template-columns:repeat(2, auto); gap:10px 36px;}
.footer-links a{text-decoration:none; color:#B8AFE0;} .footer-links a:hover{color:var(--teal);}
.footer-legal{margin-top:36px; font-size:0.8rem; color:#6E6590;}
.skip-link{position:absolute; left:-9999px; top:8px; z-index:100; background:var(--teal); color:var(--ink); padding:10px 16px; font-weight:600;}
.skip-link:focus{left:8px;}

@media (max-width:900px){
  .rail{display:none;}
  .mobile-bar{display:flex;}
  main{margin-left:0; padding-top:64px;}
  .site-footer{margin-left:0;}
  .block{padding:64px 6vw;}
  .s1,.s2,.s3,.s4{grid-column:span 12;}
}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  .fall-active .part{animation:none; opacity:1; transform:none;}
  .replay-btn{display:none;}
}

/* =====================================================================
   Inner pages: Services, Work, Blog, Guides, Experiments
   ===================================================================== */
.page-hero{padding:120px 8vw 64px; position:relative; overflow:hidden;}
.page-hero.violet{background:var(--violet);}
.page-hero.slate{background:var(--slate);}
.page-hero.gold{background:var(--gold); color:var(--text-on-light);}
.page-hero.ink{background:var(--ink); border-bottom:1px solid rgba(247,243,255,0.06);}
.page-hero h1{font-size:clamp(2.6rem,6.5vw,5rem); max-width:14ch;}
.page-hero .lede{margin-top:22px;}
.page-hero.gold .lede{color:#3A2E00;}
.eyebrow{display:inline-block; font-size:0.78rem; font-weight:600; letter-spacing:0.14em; text-transform:uppercase; color:var(--teal); margin-bottom:18px;}
.page-hero.gold .eyebrow{color:var(--ink);}
/* Faint circuit pattern in hero corners */
.page-hero::after{
  content:''; position:absolute; right:-40px; top:0; bottom:0; width:42%; pointer-events:none; opacity:.14;
  background:
    linear-gradient(90deg, transparent 49%, currentColor 49%, currentColor 51%, transparent 51%) 0 0/56px 56px,
    linear-gradient(0deg, transparent 49%, currentColor 49%, currentColor 51%, transparent 51%) 28px 0/56px 112px;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 70%); mask-image:linear-gradient(90deg, transparent, #000 70%);
}
.page-section{padding:56px 8vw 96px;}
.page-section.paper{background:var(--paper); color:var(--text-on-light);}
.section-title{font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:10px;}
.muted{color:#A79FCB;}
.paper .muted{color:#5C5577;}

/* Filter chips (Guides, Blog) */
.filters{display:flex; flex-wrap:wrap; gap:10px; margin-bottom:36px;}
.filter{
  display:inline-flex; align-items:center; gap:8px; min-height:40px; padding:0 16px; text-decoration:none;
  font-size:0.88rem; font-weight:600; color:#C9C1EA; border:1.5px solid rgba(247,243,255,0.22);
  transition:border-color .2s ease, color .2s ease, background-color .2s ease;
}
.filter:hover{border-color:var(--teal); color:var(--paper);}
.filter.active{background:var(--teal); border-color:var(--teal); color:var(--ink);}
.filter .count{font-size:0.75rem; opacity:.7;}

/* Cards */
.card-grid{display:grid; grid-template-columns:repeat(auto-fill, minmax(290px, 1fr)); gap:24px;}
.card{
  position:relative; display:flex; flex-direction:column; background:var(--slate-deep); padding:28px 26px 24px;
  border:1.5px solid transparent; transition:border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.card:hover{border-color:rgba(47,224,196,0.6); transform:translateY(-3px); box-shadow:0 14px 32px -18px rgba(47,224,196,0.5);}
.card h3{font-size:1.35rem; line-height:1.15; margin-top:12px;}
.card h3 a{text-decoration:none;}
.card h3 a::after{content:''; position:absolute; inset:0;}   /* whole card is clickable */
.card p{margin-top:12px; line-height:1.55; color:#C9C1EA; font-size:0.95rem;}
.card .meta{margin-top:auto; padding-top:18px; font-size:0.8rem; color:#8F86B3; display:flex; gap:14px; flex-wrap:wrap;}
.card .badges{display:flex; gap:8px; flex-wrap:wrap; min-height:22px;}
.badge{display:inline-block; font-size:0.7rem; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; padding:4px 8px;}
.badge.hot{background:var(--gold); color:var(--ink);}
.badge.new{background:var(--teal); color:var(--ink);}
.badge.cat{background:rgba(247,243,255,0.08); color:#C9C1EA;}
.badge.status-live{background:var(--teal); color:var(--ink);}
.badge.status-wip{background:var(--gold); color:var(--ink);}
.badge.status-idea{background:rgba(247,243,255,0.12); color:var(--paper);}
.badge.draft{background:#FF8A80; color:var(--ink);}

/* Cover art for work items without a screenshot: a circuit pattern with initials */
.cover{position:relative; aspect-ratio:16/10; background:var(--violet-deep); overflow:hidden; margin:-28px -26px 0;}
.cover img{width:100%; height:100%; object-fit:cover; display:block;}
.cover.generated{
  display:flex; align-items:center; justify-content:center;
  background:
    linear-gradient(90deg, rgba(47,224,196,.16) 1px, transparent 1px) 0 0/28px 28px,
    linear-gradient(rgba(47,224,196,.16) 1px, transparent 1px) 0 0/28px 28px,
    var(--violet-deep);
}
.cover.generated span{font-family:'Archivo',Georgia,serif; font-weight:900; font-size:3.2rem; color:var(--gold);}
.card .cover + .badges{margin-top:20px;}

.empty-state{padding:48px 32px; border:1.5px dashed rgba(247,243,255,0.2); max-width:620px;}
.empty-state h2{font-size:1.6rem;} .empty-state p{margin-top:10px; line-height:1.55; color:#C9C1EA;}

/* ---------- Articles (blog posts, guides, case studies) ---------- */
.article-wrap{background:var(--paper); color:var(--text-on-light); padding:64px 8vw 96px;}
.article-head{padding:120px 8vw 56px;}
.article-head h1{font-size:clamp(2.2rem,5vw,3.8rem); max-width:20ch;}
.article-meta{margin-top:22px; display:flex; flex-wrap:wrap; gap:10px 18px; align-items:center; font-size:0.9rem; color:#C9C1EA;}
.article-head.gold .article-meta{color:#3A2E00;}
.article-meta a{text-decoration:none;}
.prose{max-width:70ch; font-size:1.08rem; line-height:1.72;}
.prose > * + *{margin-top:1.1em;}
.prose h2{font-size:1.75rem; margin-top:1.9em; line-height:1.15;}
.prose h3{font-size:1.3rem; margin-top:1.6em; line-height:1.2;}
.prose a{color:var(--violet); text-decoration-thickness:2px; text-underline-offset:3px;}
.prose a:hover{color:var(--ink); background:rgba(242,183,5,.35);}
.prose ul, .prose ol{padding-left:1.4em;} .prose li + li{margin-top:.4em;}
.prose blockquote{margin-left:0; padding:4px 0 4px 20px; border-left:4px solid var(--gold); color:#4A4366;}
.prose code{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.9em; background:rgba(62,47,133,.09); padding:2px 6px;}
.prose pre{background:var(--ink); color:var(--paper); padding:18px 20px; overflow-x:auto; line-height:1.5;}
.prose pre code{background:none; padding:0; color:inherit;}
.prose img{max-width:100%; height:auto; display:block;}
.prose hr{border:0; border-top:2px solid rgba(27,23,48,.12); margin:2.2em 0;}
.prose table{border-collapse:collapse; width:100%; display:block; overflow-x:auto;}
.prose th, .prose td{border:1px solid rgba(27,23,48,.18); padding:8px 12px; text-align:left;}
.article-foot{max-width:70ch; margin-top:56px; padding-top:28px; border-top:2px solid rgba(27,23,48,.12); display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px;}
.article-foot a{color:var(--violet); font-weight:600; text-decoration:none;}
.article-foot a:hover{text-decoration:underline;}
.related{margin-top:64px;}
.related h2{font-size:1.5rem; margin-bottom:20px;}
.paper .card{background:#fff; box-shadow:0 1px 0 rgba(27,23,48,.06);}
.paper .card p{color:#4A4366;} .paper .card .meta{color:#6E6590;}
.paper .badge.cat{background:rgba(62,47,133,.08); color:var(--violet);}

/* ---------- Services & pricing ---------- */
.placeholder-banner{background:var(--gold); color:var(--ink); padding:12px 8vw; font-size:0.9rem; font-weight:600;}
.service-block{padding:72px 8vw; border-bottom:1px solid rgba(247,243,255,0.06);}
.service-block:nth-child(even){background:var(--slate-deep);}
.service-head{display:flex; flex-wrap:wrap; gap:16px 48px; align-items:flex-start;}
.service-head .icon-wrap{flex:0 0 56px; height:56px; display:flex; align-items:center; justify-content:center; border:2px solid var(--teal);}
.service-head .icon-wrap svg{width:30px; height:30px;}
.service-intro{flex:1 1 420px; max-width:62ch;}
.service-intro h2{font-size:clamp(1.8rem,3.6vw,2.6rem);}
.service-intro .prose{margin-top:16px; font-size:1rem; color:#D9D2F2;}
.service-intro .prose a{color:var(--teal);}
.pricing{margin-top:40px;}
.tiers{display:grid; grid-template-columns:repeat(auto-fit, minmax(240px, 1fr)); gap:20px;}
.tier{position:relative; background:var(--ink); padding:28px 24px; border:1.5px solid rgba(247,243,255,0.1); display:flex; flex-direction:column;}
.tier.featured{border-color:var(--gold); box-shadow:0 0 0 1px var(--gold);}
.tier .flag{position:absolute; top:-12px; left:20px; background:var(--gold); color:var(--ink); font-size:0.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; padding:4px 8px;}
.tier h3{font-size:1.2rem;}
.price{font-family:'Archivo',Georgia,serif; font-weight:900; font-size:2.2rem; margin-top:10px; color:var(--paper);}
.price small{font-family:'IBM Plex Sans',sans-serif; font-weight:500; font-size:0.85rem; color:#A79FCB; margin-left:4px;}
.tier ul{list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; font-size:0.93rem; color:#C9C1EA;}
.tier li{display:flex; gap:10px; line-height:1.4;}
.tier li::before{content:''; flex:0 0 7px; height:7px; margin-top:7px; background:var(--teal);}
.rate{display:flex; flex-wrap:wrap; gap:16px 40px; align-items:baseline; background:var(--ink); padding:26px 28px; border-left:4px solid var(--teal);}
.rate + .rate, .tiers + .rate, .rate + .custom, .tiers + .custom{margin-top:20px;}
.rate .label{font-size:0.8rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--teal);}
.rate .price{margin-top:0;}
.rate p{flex:1 1 260px; color:#C9C1EA; line-height:1.5;}
.custom{display:flex; flex-wrap:wrap; align-items:center; gap:16px 32px; padding:26px 28px; border:1.5px dashed rgba(247,243,255,0.25);}
.custom strong{font-family:'Archivo',Georgia,serif; font-size:1.4rem;}
.custom p{flex:1 1 260px; color:#C9C1EA; line-height:1.5;}
.btn-outline{display:inline-block; background:transparent; color:var(--teal); border:2px solid var(--teal); padding:12px 22px; font-weight:600; text-decoration:none;}
.btn-outline:hover{background:var(--teal); color:var(--ink);}
.cta-band{padding:80px 8vw; background:var(--violet); display:flex; flex-wrap:wrap; gap:24px 48px; align-items:center; justify-content:space-between;}
.cta-band h2{font-size:clamp(1.8rem,4vw,3rem); max-width:16ch;}
.cta-band .btn{margin-top:0;}
.see-more{display:inline-block; margin-top:28px; color:var(--teal); font-weight:600; text-decoration:none;}
.see-more:hover{text-decoration:underline;}

/* Work detail */
.work-facts{display:flex; flex-wrap:wrap; gap:18px 44px; margin-top:28px;}
.work-facts div{font-size:0.92rem;} .work-facts dt{font-size:0.72rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal); font-weight:700;}
.work-facts dd{margin:4px 0 0;}
.work-shot{max-width:1000px; margin:0 0 48px; border:1px solid rgba(27,23,48,.12);}
.work-shot.cover{margin:0 0 48px;}

@media (max-width:900px){
  .page-hero, .article-head{padding:96px 6vw 48px;}
  .page-section, .article-wrap{padding:44px 6vw 72px;}
  .service-block{padding:56px 6vw;}
  .cta-band{padding:56px 6vw;}
  .placeholder-banner{padding:12px 6vw;}
}

/* ---------- Nav groups: homepage sections indented under Home, then Pages ---------- */
.rail nav a.sub{padding-left:92px; min-height:36px; font-size:0.86rem; font-weight:500;}
.rail nav a.sub .node{width:10px; height:10px; margin:-5px 0 0 -5px; border-width:2px;}
.rail-sep{
  display:flex; align-items:center; gap:10px; padding-left:76px; padding-right:16px; min-height:20px;
  font-size:0.66rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#6E6590;
}
.rail-sep::after{content:''; flex:1; height:1px; background:rgba(247,243,255,0.12);}
#mobileNav a.sub{padding-left:20px; font-size:0.98rem; min-height:44px;}
#mobileNav a.sub::before{width:7px; height:7px;}
.menu-sep{
  display:flex; align-items:center; gap:10px; margin-top:14px; padding:6px 0;
  font-size:0.7rem; font-weight:700; letter-spacing:0.16em; text-transform:uppercase; color:#6E6590;
}
.menu-sep::after{content:''; flex:1; height:1px; background:rgba(247,243,255,0.12);}

/* Badges on the gold guide header need their own contrast */
.article-head.gold .badge.hot{background:var(--ink); color:var(--gold);}
.article-head.gold .badge.cat{background:rgba(20,18,31,0.12); color:var(--ink);}
.article-head.gold .badge.new{background:var(--ink); color:var(--teal);}
.badges{display:flex; gap:8px; flex-wrap:wrap; align-items:center;}