/* ============================================================
   YUME SYSTEMS — design system
   Lifted from the approved editorial build. One file, shared by
   every page, so the pages cannot drift apart the way the two
   earlier ones did.
   ============================================================ */

/* ============================================================
   YUME — "Editorial engineer"
   Paper, ink, one burnt-orange accent. Flat surfaces, hairline
   rules, no glows. Orange marks the one thing to do on screen.
   Tokens mirror the Yume design system (tokens.json).
   ============================================================ */
:root{
  /* surfaces — warm paper */
  --bg:#f6f3ee;   --bg-2:#fbf9f5;
  --ring-0:#fffdf9; --ring-1:#f1ede6; --ring-2:#ebe6dd; --ring-3:#e4ded4; --ring-4:#d9d1c4;

  /* ink */
  --fg:#1b1815; --fg-2:#48413a; --fg-3:#6b6258;

  /* accent — burnt orange (text-safe on paper), ochre second */
  --accent:#b9410b; --accent-2:#7f5a08; --accent-deep:#93330a;
  --accent-glow:rgba(185,65,11,.18);
  --accent-tint:rgba(185,65,11,.07); --accent-line:rgba(185,65,11,.32);
  --on-accent:#ffffff;
  --err:#b42318; --err-fg:#a11d14; --err-bg:rgba(180,35,24,.07);

  /* data hues — told apart by lightness as well as hue */
  --cyan:#1d6874; --mint:#2c7346;

  /* rules */
  --line:rgba(27,24,21,.11); --line-2:rgba(27,24,21,.2); --line-3:#8c8275;
  --glass:rgba(255,253,249,.86);

  --code-bg:#1d1a17; --code-fg:#ece5da; --code-c:#a39886; --code-k:#f2a36b; --code-s:#9fd0a8;

  --sans:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
  --display:"Newsreader","Iowan Old Style","Georgia",serif;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;

  --r-sm:4px; --r-md:6px; --r-lg:10px;
  --max:1120px;
  --ease:cubic-bezier(.2,.7,.2,1);
}
:root[data-theme="dark"]{
  --bg:#141210;   --bg-2:#181614;
  --ring-0:#1c1a17; --ring-1:#221f1b; --ring-2:#29251f; --ring-3:#322d27; --ring-4:#3c362e;
  --fg:#f2ede5; --fg-2:#cbc2b5; --fg-3:#a0968a;
  --accent:#e8743a; --accent-2:#dcae55; --accent-deep:#c4510f;
  --accent-glow:rgba(232,116,58,.22);
  --accent-tint:rgba(232,116,58,.1); --accent-line:rgba(232,116,58,.38);
  --on-accent:#141210;
  --err:#f0706a; --err-fg:#f59a95; --err-bg:rgba(240,112,106,.1);
  --cyan:#73bcc6; --mint:#82c79b;
  --line:rgba(242,237,229,.1); --line-2:rgba(242,237,229,.2); --line-3:#7d7367;
  --glass:rgba(28,26,23,.86);
  --code-bg:#0f0e0c;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font:400 16.5px/1.65 var(--sans);
  -webkit-font-smoothing:antialiased; overflow-x:hidden;
  font-feature-settings:"ss01","cv11";
}
/* the old ambient glow + grid field is retired: the page is paper */
body::before, body::after{content:none; display:none}
.wrap{max-width:var(--max); margin:0 auto; padding:0 20px}
h1,h2,h3,h4{font-family:var(--display); margin:0; line-height:1.1; letter-spacing:-.012em; font-weight:600}
a{color:inherit}
::selection{background:var(--accent); color:var(--on-accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-sm)}

/* ============================================================
   HEADER
   ============================================================ */
header{
  position:sticky; top:0; z-index:90;
  background:color-mix(in srgb,var(--bg) 90%,transparent);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line);
}
.hd{display:flex; align-items:center; gap:16px; height:64px}
.mark{display:flex; align-items:center; gap:10px; text-decoration:none}
.mark svg{width:28px;height:28px;border-radius:7px;display:block;box-shadow:none}
.mark b{font-family:var(--display); font-weight:600; font-size:22px; letter-spacing:-.01em}
.mark i{font-style:normal; color:var(--fg-3); font-size:13px; font-weight:500}
header nav{margin-left:auto; display:flex; align-items:center; gap:2px}
header nav a{
  text-decoration:none; font-size:14px; font-weight:500; color:var(--fg-2);
  padding:8px 12px; border-radius:var(--r-md); position:relative; transition:color .2s var(--ease);
}
header nav a::after{
  content:""; position:absolute; left:12px; right:12px; bottom:3px; height:1px;
  background:var(--fg); transform:scaleX(0); transform-origin:left;
  transition:transform .25s var(--ease);
}
header nav a:hover{color:var(--fg)} header nav a:hover::after{transform:scaleX(1)}
header nav a.on{color:var(--fg)} header nav a.on::after{transform:scaleX(1); background:var(--accent); height:2px}
.tgl{
  margin-left:8px; width:36px;height:36px; border:1px solid var(--line-2); border-radius:var(--r-md);
  background:transparent; color:var(--fg-2); cursor:pointer; display:grid; place-items:center;
  transition:color .2s var(--ease), border-color .2s var(--ease);
}
.tgl:hover{color:var(--fg); border-color:var(--line-3)}
@media(max-width:900px){ header nav a.sm{display:none} }

.depth{height:2px; background:transparent; position:relative}
.depth i{
  position:absolute; inset:0 auto 0 0; width:0;
  background:var(--accent); box-shadow:none;
  transition:width .5s var(--ease);
}

/* ============================================================
   REVEAL — short and quiet
   ============================================================ */
html.js .rv{opacity:0; transform:translateY(10px); transition:opacity .5s var(--ease), transform .5s var(--ease)}
html.js .rv.in{opacity:1; transform:none}
@media(prefers-reduced-motion:reduce){ html.js .rv{opacity:1;transform:none;transition:none} * {animation:none!important} }

/* ============================================================
   HERO
   ============================================================ */
.hero{padding-top:88px; padding-bottom:80px; position:relative}
.hero-grid{display:grid; grid-template-columns:1.2fr .8fr; gap:64px; align-items:center}
@media(max-width:940px){ .hero-grid{grid-template-columns:1fr; gap:44px} }

.tagpill{
  display:inline-flex; align-items:center; gap:10px; font-family:var(--mono);
  font-size:11.5px; font-weight:500; letter-spacing:.12em; text-transform:uppercase; color:var(--fg-2);
  padding:0 0 0 0; border:0; background:none; border-radius:0;
}
.tagpill .pulse{width:7px;height:7px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 var(--accent-glow);animation:pulse 2.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 var(--accent-glow)}70%{box-shadow:0 0 0 7px transparent}100%{box-shadow:0 0 0 0 transparent}}

.hero h1{
  font-size:clamp(42px,6.4vw,80px); font-weight:500; margin:22px 0 0; max-width:13ch;
  line-height:1.02; letter-spacing:-.025em;
  color:var(--fg); background:none; -webkit-background-clip:border-box; background-clip:border-box;
}
.hero h1 em{
  font-style:italic; font-weight:500; color:var(--accent);
  background:none; -webkit-background-clip:border-box; background-clip:border-box;
}
.lede{font-size:clamp(16.5px,1.9vw,18.5px); color:var(--fg-2); max-width:58ch; margin:26px 0 0; line-height:1.65}
.lede a{color:var(--fg); text-decoration:underline; text-decoration-color:var(--accent); text-decoration-thickness:1.5px; text-underline-offset:3px; border:0; transition:color .2s}
.lede a:hover{color:var(--accent)}
.cta{display:flex; flex-wrap:wrap; gap:12px; margin-top:34px}
.btn{
  display:inline-flex; align-items:center; gap:10px; text-decoration:none; cursor:pointer;
  font-family:var(--sans); font-weight:600; font-size:14.5px; padding:13px 20px; border-radius:var(--r-md);
  border:1px solid transparent; transition:background-color .2s var(--ease), border-color .2s var(--ease), color .2s var(--ease);
  position:relative; overflow:hidden;
}
.btn svg{transition:transform .2s var(--ease)}
.btn-p{background:var(--accent); color:var(--on-accent); box-shadow:none}
.btn-p:hover{background:var(--accent-deep); transform:none; box-shadow:none}
:root[data-theme="dark"] .btn-p:hover{background:#f08a55}
.btn-p:hover svg{transform:translateX(3px)}
.btn-s{background:transparent; color:var(--fg); border-color:var(--line-3); backdrop-filter:none}
.btn-s:hover{border-color:var(--fg); color:var(--fg); background:var(--ring-1); transform:none}

/* --- the onion: a quiet diagram, not a light show --- */
.onion{position:relative; aspect-ratio:1; max-width:420px; margin-inline:auto; width:100%}
.onion svg{width:100%;height:100%;display:block; overflow:visible}
.ring{transition:opacity .4s var(--ease); transform-origin:center; cursor:pointer}
.ring circle{transition:stroke .3s var(--ease), stroke-width .3s var(--ease)}
.ring:hover circle, .ring.hot circle{stroke:var(--accent); stroke-width:1.5; filter:none}
.ring text{transition:fill .3s var(--ease); font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase}
.ring:hover text, .ring.hot text{fill:var(--accent)}
.spin{transform-origin:center; animation:spin 90s linear infinite}
.spin-r{transform-origin:center; animation:spin 120s linear infinite reverse}
@keyframes spin{to{transform:rotate(360deg)}}
.core{transform-origin:center; animation:breathe 6s ease-in-out infinite; filter:none}
.core circle{fill:var(--accent)}
.onion svg > text{fill:var(--on-accent); font-weight:500}
@keyframes breathe{0%,100%{transform:scale(1)}50%{transform:scale(1.035)}}
.onion-cap{
  text-align:center; font-family:var(--mono); font-size:12px; color:var(--fg-3);
  margin-top:14px; letter-spacing:.04em; min-height:18px; transition:color .3s var(--ease);
}
.onion-cap b{color:var(--fg); font-weight:500}

/* ============================================================
   SECTIONS — numbered like a report
   ============================================================ */
section{padding:96px 0; position:relative}
section + section{border-top:1px solid var(--line)}
@media(max-width:620px){ section{padding:72px 0} .hero{padding-top:56px; padding-bottom:64px} }
.sh{display:flex; align-items:baseline; gap:16px; margin-bottom:16px}
.sh span{
  font-family:var(--mono); font-size:12.5px; font-weight:500; color:var(--accent);
  padding:0 16px 0 0; border:0; border-right:1px solid var(--line-2); border-radius:0;
  background:none; line-height:1.4;
}
.sh h2{font-size:clamp(30px,4.2vw,46px); font-weight:500; letter-spacing:-.02em}
.ss{color:var(--fg-2); max-width:66ch; margin:0 0 40px; font-size:16.5px}

/* ============================================================
   LAYER — accordion, ruled
   ============================================================ */
.layer{
  border:1px solid var(--line); border-radius:var(--r-lg); margin-bottom:10px;
  background:var(--ring-0);
  position:relative; overflow:hidden;
  transition:border-color .25s var(--ease);
}
.layer::before{content:none; display:none}
.layer:hover{border-color:var(--line-2); transform:none}
.layer.open{border-color:var(--line-3); box-shadow:none}
.layer[data-d="2"]{background:var(--ring-0)}
.layer[data-d="3"]{background:var(--bg-2)}
.layer[data-d="4"]{background:var(--ring-1)}
.lbi .layer{border-radius:var(--r-md)}

.lh{
  width:100%; display:flex; align-items:center; gap:14px; text-align:left;
  background:transparent; border:0; cursor:pointer; padding:17px 20px;
  font-family:var(--sans); color:var(--fg); font-size:15.5px;
}
.lh:focus-visible{outline-offset:-3px}
.dot{
  flex:none; width:26px;height:26px; border-radius:var(--r-sm); display:grid; place-items:center;
  font-family:var(--mono); font-size:11.5px; font-weight:500; color:var(--fg-2);
  background:transparent; border:1px solid var(--line-2);
  transition:background-color .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.layer.open > .lh .dot{background:var(--fg); color:var(--bg); border-color:var(--fg); box-shadow:none}
.lt{font-family:var(--display); font-weight:600; font-size:18.5px; letter-spacing:-.01em}
.lm{color:var(--fg-3); font-size:13.5px; font-weight:400}
.chev{margin-left:auto; flex:none; width:18px;height:18px; color:var(--fg-3); transition:transform .35s var(--ease), color .25s}
.layer.open > .lh .chev{transform:rotate(90deg); color:var(--fg)}

.lb{display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease)}
.layer.open > .lb{grid-template-rows:1fr}
.lb > div{overflow:hidden; min-height:0}
.lbi{padding:4px 20px 22px 60px; border-top:1px solid var(--line)}
@media(max-width:620px){ .lbi{padding-left:20px} }
.lbi p{margin:16px 0; color:var(--fg-2); font-size:15.5px; max-width:72ch}
.lbi p:first-child{margin-top:16px}
.lbi p b{color:var(--fg); font-weight:600}
.lbi .layer{margin-top:14px}

/* fact chips */
.facts{display:flex; flex-wrap:wrap; gap:6px; margin-top:18px}
.f{
  font-family:var(--mono); font-size:12px; font-weight:400; padding:4px 9px; border-radius:var(--r-sm);
  background:var(--ring-1); border:1px solid var(--line); color:var(--fg-2);
  transition:border-color .2s var(--ease);
}
.f:hover{border-color:var(--line-2); transform:none}
.f.k{color:var(--accent); background:var(--accent-tint); border-color:var(--accent-line)}

/* ============================================================
   TIMELINE
   ============================================================ */
.tlwrap{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:24px 22px 12px;
  background:var(--ring-0); margin-bottom:24px;
}
.tlwrap svg{width:100%;height:auto;display:block;overflow:visible}
.tlwrap text[fill="#fff"]{fill:var(--on-accent)}
.bar{transform-origin:left center; animation:grow 1s var(--ease) both}
.legend{display:flex; flex-wrap:wrap; gap:18px; margin:14px 0 0; font-family:var(--mono); font-size:12px; color:var(--fg-2)}
.legend span{display:inline-flex; align-items:center; gap:7px}
.legend i{width:10px; height:10px; border-radius:2px; display:block; opacity:1}
@keyframes grow{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   STACK
   ============================================================ */
.filters{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:22px}
.fl{
  font-family:var(--mono); font-size:12px; letter-spacing:.02em; cursor:pointer;
  padding:7px 13px; border-radius:var(--r-md); border:1px solid var(--line-2);
  background:transparent; color:var(--fg-2); transition:all .2s var(--ease);
}
.fl:hover{color:var(--fg); border-color:var(--line-3)}
.fl.on{background:var(--fg); border-color:var(--fg); color:var(--bg); box-shadow:none}

.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:8px}
.t{
  text-align:left; cursor:pointer; font-family:var(--sans); color:var(--fg);
  border:1px solid var(--line); border-radius:var(--r-md); padding:13px 14px;
  background:var(--ring-0);
  transition:border-color .2s var(--ease), background-color .2s var(--ease); position:relative; overflow:hidden;
}
.t::after{content:none; display:none}
.t:hover{border-color:var(--line-3); transform:none; box-shadow:none}
.t.on{border-color:var(--fg); box-shadow:inset 0 0 0 1px var(--fg); background:var(--bg-2)}
.t b{display:block; font-family:var(--sans); font-size:14.5px; font-weight:600; letter-spacing:-.005em}
.t span{display:block; margin-top:5px; font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.t .prod{color:var(--mint)} .t .work{color:var(--cyan)} .t .know{color:var(--fg-3)}
.t.hide{display:none}

.panel{
  margin-top:14px; border:1px solid var(--line-3); border-radius:var(--r-lg);
  background:var(--ring-0);
  display:grid; grid-template-rows:0fr; transition:grid-template-rows .42s var(--ease);
}
.panel.show{grid-template-rows:1fr}
.panel > div{overflow:hidden;min-height:0}
.pi{padding:22px 24px}
.pt{display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-sm); margin-bottom:12px}
.pt.prod{color:var(--mint); background:color-mix(in srgb,var(--mint) 9%,transparent); border:1px solid color-mix(in srgb,var(--mint) 35%,transparent)}
.pt.work{color:var(--cyan); background:color-mix(in srgb,var(--cyan) 9%,transparent); border:1px solid color-mix(in srgb,var(--cyan) 35%,transparent)}
.pt.know{color:var(--fg-2); background:var(--ring-1); border:1px solid var(--line-2)}
.pi h4{font-size:22px; font-weight:600; margin-bottom:10px}
.pi p{margin:0; color:var(--fg-2); font-size:15.5px; max-width:72ch}
.pi p + p{margin-top:12px}

/* ============================================================
   MATRIX + CODE
   ============================================================ */
.mxs{overflow-x:auto; border:1px solid var(--line); border-radius:var(--r-lg); margin-top:10px; background:var(--ring-0)}
table{border-collapse:collapse; width:100%; min-width:660px; font-size:14px}
th,td{padding:12px 14px; text-align:left; border-bottom:1px solid var(--line)}
thead th{font-family:var(--mono); font-size:11px; font-weight:500; letter-spacing:.09em; text-transform:uppercase; color:var(--fg-2); background:var(--ring-1)}
tbody tr{transition:background .2s} tbody tr:hover{background:var(--bg-2)}
tbody tr:last-child td{border-bottom:0}
th[scope=row]{font-weight:600}
td.y{text-align:center;color:var(--accent);font-weight:700} td.n{text-align:center;color:var(--fg-3);opacity:.55}

pre{
  margin:18px 0 0; padding:18px 20px; border-radius:var(--r-md); overflow-x:auto;
  background:var(--code-bg); border:1px solid var(--line-2);
  font-family:var(--mono); font-size:13px; line-height:1.7; color:var(--code-fg);
}
:root[data-theme="light"] pre{background:var(--code-bg); color:var(--code-fg)}
pre .c{color:var(--code-c)} pre .k{color:var(--code-k)} pre .s{color:var(--code-s)}

.note{
  margin-top:28px; padding:18px 22px; border-radius:var(--r-lg);
  border:1px solid var(--line); background:var(--bg-2);
  font-size:15px; color:var(--fg-2);
}
.note b{color:var(--fg); font-weight:600}

/* ---------- contact ---------- */
.cg{display:grid; grid-template-columns:1.5fr .9fr; gap:28px; align-items:start}
@media(max-width:860px){ .cg{grid-template-columns:1fr} }
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
@media(max-width:620px){ .fgrid{grid-template-columns:1fr} }
#lead-form label, .full{
  display:block; font-size:13.5px; font-weight:600; color:var(--fg);
  letter-spacing:0;
}
.full{margin-top:16px}
.req{font-family:var(--mono); font-size:11px; font-weight:400; color:var(--fg-3); margin-left:6px; text-transform:lowercase}
#lead-form input, #lead-form select, #lead-form textarea{
  display:block; width:100%; margin-top:7px; font:400 15px var(--sans); color:var(--fg);
  background:var(--ring-0); border:1px solid var(--line-3); border-radius:var(--r-md);
  padding:11px 13px; transition:border-color .2s var(--ease), box-shadow .2s var(--ease);
}
#lead-form input::placeholder, #lead-form textarea::placeholder{color:var(--fg-3)}
#lead-form textarea{resize:vertical; min-height:110px}
#lead-form input:focus, #lead-form select:focus, #lead-form textarea:focus{
  outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);
}
#lead-form select{appearance:none; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--fg-2) 50%),linear-gradient(135deg,var(--fg-2) 50%,transparent 50%);
  background-position:calc(100% - 18px) 52%, calc(100% - 13px) 52%; background-size:5px 5px; background-repeat:no-repeat; padding-right:34px}
.frow{display:flex; align-items:center; gap:16px; flex-wrap:wrap; margin-top:20px}
.fstat{margin:0; font-size:14px; color:var(--fg-2); min-height:1.3em; flex:1; min-width:200px}
.cside{display:flex; flex-direction:column; gap:10px}
.cb{border:1px solid var(--line); border-radius:var(--r-lg); padding:16px 18px; background:var(--ring-0)}
.cb h3{font-family:var(--sans); font-size:14px; font-weight:600; letter-spacing:0}
.cb p{margin:6px 0 0; font-size:14px; color:var(--fg-2); line-height:1.6}
.clink{display:inline-block; margin-top:10px; font-size:14px; font-weight:600; color:var(--accent); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px}
.clink:hover{color:var(--fg)}

.cb.who{display:flex; gap:14px; align-items:center}
.cb.who img{
  flex:none; width:68px; height:68px; border-radius:50%; object-fit:cover; display:block;
  border:1px solid var(--line-2); box-shadow:none; background:var(--ring-2);
}
.cb.who b{display:block; font-family:var(--display); font-weight:600; font-size:19px; letter-spacing:-.01em}
.cb.who span{display:block; color:var(--fg-2); font-size:13px; line-height:1.5; margin-top:2px}
.cb.who span + span{margin-top:6px; color:var(--fg-3)}

footer{border-top:1px solid var(--line); padding:44px 0 56px; color:var(--fg-3); font-size:14px}
footer b{font-family:var(--display); font-weight:600; font-size:19px; color:var(--fg)}
.fr{display:flex; gap:20px; flex-wrap:wrap; align-items:center}
.fr a{color:var(--fg-2); text-decoration:none; font-weight:500; transition:color .2s}
.fr a:hover{color:var(--accent)}
/* ---- mobile header: six links will not sit on a phone in a row ---- */
.menu-btn{
  display:none; margin-left:auto; width:38px; height:38px; flex:none;
  border:1px solid var(--line-2); border-radius:var(--r-md); background:transparent;
  color:var(--fg-2); cursor:pointer; place-items:center;
}
.menu-btn:hover{color:var(--fg); border-color:var(--line-3)}
.mark span{white-space:nowrap}
@media(max-width:520px){ .mark i{display:none} }
@media(max-width:900px){
  .menu-btn{display:grid}
  header nav{
    position:absolute; left:0; right:0; top:100%;
    margin-left:0; flex-direction:column; align-items:stretch; gap:2px;
    background:var(--bg); border-bottom:1px solid var(--line);
    padding:10px 16px 16px; box-shadow:0 16px 28px rgba(27,24,21,.08);
    display:none;
  }
  header nav.open{display:flex}
  header nav a{padding:12px 10px; font-size:15.5px}
  header nav a::after{left:10px; right:auto; width:18px}
  header nav a.sm{display:block}
  .tgl{margin:8px 0 0; align-self:flex-start}
}