/* e.systems - "Engineered Warmth" redesign (2026-06-02)
   Warm premium systems studio. OKLCH palette tinted toward clay.
   Type: Bricolage Grotesque (display) + Hanken Grotesk (body) + JetBrains Mono (system wordmark/labels). */
:root{
  /* --- warm OKLCH palette (neutrals tinted toward clay hue ~45) --- */
  --paper:oklch(0.971 0.008 75);     /* warm cream bg */
  --surface:oklch(0.992 0.005 80);   /* near-white warm card */
  --sunk:oklch(0.955 0.011 72);      /* slightly sunk warm */
  --ink:oklch(0.255 0.018 55);       /* warm coffee ink */
  --ink-2:oklch(0.415 0.020 52);     /* secondary */
  --muted:oklch(0.575 0.018 55);     /* muted warm */
  --line:oklch(0.895 0.012 65);      /* hairline */
  --line-strong:oklch(0.835 0.018 60);
  --clay:oklch(0.585 0.135 40);      /* primary accent - terracotta */
  --clay-deep:oklch(0.495 0.130 38); /* deep clay for text-on-light */
  --clay-wash:oklch(0.945 0.030 50); /* faint clay tint surface */
  --amber:oklch(0.715 0.115 75);     /* secondary warm */
  --amber-deep:oklch(0.585 0.105 72);
  --pine:oklch(0.515 0.085 158);     /* tertiary - deep green */
  --pine-wash:oklch(0.955 0.025 160);

  --display:'Bricolage Grotesque',Georgia,serif;
  --body:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  /* 4pt spacing scale, semantic */
  --space-2xs:4px; --space-xs:8px; --space-sm:12px; --space-md:16px;
  --space-lg:24px; --space-xl:32px; --space-2xl:48px; --space-3xl:64px; --space-4xl:96px;

  --ease-out:cubic-bezier(.16,1,.3,1);       /* expo-ish */
  --ease-out2:cubic-bezier(.22,1,.36,1);
  --shadow-sm:0 1px 2px oklch(0.4 0.03 50 / .06),0 2px 6px oklch(0.4 0.03 50 / .05);
  --shadow:0 2px 4px oklch(0.4 0.03 50 / .05),0 14px 34px -14px oklch(0.4 0.04 50 / .18);
  --shadow-lg:0 4px 8px oklch(0.4 0.03 50 / .06),0 36px 70px -28px oklch(0.4 0.05 50 / .26);
}
*{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;}
body{background:var(--paper);color:var(--ink);font-family:var(--body);line-height:1.65;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
a{color:inherit;text-decoration:none;}
::selection{background:var(--clay);color:var(--surface);}
h1,h2,h3{font-family:var(--display);font-weight:700;letter-spacing:-.02em;text-wrap:balance;}
p{text-wrap:pretty;}

/* ---------- ambient warm background ---------- */
.bg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.bg .wash{position:absolute;width:900px;height:900px;border-radius:50%;filter:blur(10px);}
.bg .w1{left:50%;top:-6%;transform:translateX(-50%);
  background:radial-gradient(circle,oklch(0.585 0.135 40 / .14),transparent 62%);animation:float1 22s var(--ease-out) infinite alternate;}
.bg .w2{right:-12%;top:58%;width:680px;height:680px;
  background:radial-gradient(circle,oklch(0.715 0.115 75 / .16),transparent 64%);animation:float2 26s var(--ease-out) infinite alternate;}
.bg .w3{left:-10%;top:78%;width:560px;height:560px;
  background:radial-gradient(circle,oklch(0.515 0.085 158 / .10),transparent 66%);animation:float1 30s ease-in-out infinite alternate-reverse;}
.bg .dots{position:absolute;inset:0;
  background-image:radial-gradient(oklch(0.585 0.135 40 / .14) 1px,transparent 1.4px);background-size:30px 30px;
  mask-image:radial-gradient(ellipse 75% 55% at 50% 18%,#000 12%,transparent 64%);opacity:.5;}
@keyframes float1{to{transform:translate(-46%,5%) scale(1.12)}}
@keyframes float2{to{transform:translate(-6%,-7%) scale(1.15)}}

/* ---------- topbar ---------- */
.topbar{position:fixed;inset:0 0 auto 0;z-index:30;display:flex;align-items:center;justify-content:space-between;
  padding:var(--space-md) clamp(18px,4vw,40px);transition:background .4s var(--ease-out),border-color .4s,box-shadow .4s;
  border-bottom:1px solid transparent;}
.topbar.scrolled{background:oklch(0.971 0.008 75 / .82);backdrop-filter:saturate(1.3) blur(12px);
  border-bottom-color:var(--line);box-shadow:var(--shadow-sm);}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:16px;font-weight:600;letter-spacing:-.01em;}
.brand b{color:var(--ink);}.brand .d{color:var(--clay);}
.logo-mark{width:24px;height:24px;flex-shrink:0;}
.topnav{display:flex;gap:var(--space-xl);font-size:15px;color:var(--ink-2);font-weight:500;}
.topnav a{position:relative;padding:4px 0;transition:color .2s;}
.topnav a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--clay);transition:right .3s var(--ease-out);}
.topnav a:hover{color:var(--ink);}.topnav a:hover::after{right:0;}
.nav-cta{display:inline-flex;align-items:center;font-family:var(--mono);font-size:13px;color:var(--surface)!important;
  background:var(--ink);padding:10px 18px;border-radius:10px;font-weight:500;white-space:nowrap;line-height:1;letter-spacing:-.01em;
  transition:background .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s;}
.nav-cta::after{display:none;}
.nav-cta:hover{background:var(--clay-deep);transform:translateY(-1px);box-shadow:0 8px 20px -8px oklch(0.495 0.130 38 / .5);}
.lang{display:flex;gap:2px;font-family:var(--mono);font-size:12px;}
.lang button{background:transparent;border:1px solid var(--line-strong);color:var(--muted);padding:6px 10px;border-radius:8px;cursor:pointer;transition:.2s;}
.lang button:hover{color:var(--ink);border-color:var(--ink-2);}
.lang button.on{color:var(--surface);background:var(--ink);border-color:var(--ink);font-weight:600;}
.top-right{display:flex;align-items:center;gap:var(--space-sm);}
.menu-btn{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:40px;padding:0 10px;
  background:var(--surface);border:1px solid var(--line-strong);border-radius:11px;cursor:pointer;transition:border-color .2s;}
.menu-btn:hover{border-color:var(--ink-2);}
.menu-btn span{display:block;height:2px;width:100%;background:var(--ink);border-radius:2px;transition:transform .32s var(--ease-out),opacity .2s;}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg);}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0;}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}
.mobile-menu{position:fixed;inset:66px 12px auto 12px;z-index:25;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;box-shadow:var(--shadow-lg);padding:var(--space-xs);flex-direction:column;gap:2px;display:none;
  opacity:0;transform:translateY(-10px) scale(.99);transition:opacity .28s var(--ease-out),transform .28s var(--ease-out);}
.mobile-menu.open{display:flex;opacity:1;transform:none;}
.mobile-menu a{font-family:var(--mono);font-size:15px;color:var(--ink-2);padding:14px 16px;border-radius:11px;transition:background .2s,color .2s;}
.mobile-menu a:active,.mobile-menu a:hover{background:var(--clay-wash);color:var(--clay-deep);}
.mobile-menu .mm-cta{background:var(--ink);color:var(--surface);text-align:center;margin-top:var(--space-2xs);}
.mobile-menu .mm-cta:active,.mobile-menu .mm-cta:hover{background:var(--clay-deep);color:var(--surface);}

/* ---------- hero ---------- */
.hero{position:relative;z-index:2;min-height:100vh;min-height:100svh;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:96px clamp(16px,5vw,22px) 80px;}
.eyebrow{font-family:var(--mono);font-size:12.5px;letter-spacing:.04em;color:var(--clay-deep);
  background:var(--clay-wash);border:1px solid oklch(0.585 0.135 40 / .2);padding:7px 14px;border-radius:999px;
  display:inline-flex;align-items:center;gap:9px;opacity:0;transform:translateY(10px);}
.eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--pine);box-shadow:0 0 0 0 oklch(0.515 0.085 158 / .5);animation:ping 2.6s ease-out infinite;}
@keyframes ping{0%,100%{box-shadow:0 0 0 0 oklch(0.515 0.085 158 / .45)}55%{box-shadow:0 0 0 7px oklch(0.515 0.085 158 / 0)}}

/* wordmark: mono, CENTERED as one unit (content-width). "e" + typed tail + ".systems". */
.wordmark{margin-top:var(--space-xl);font-family:var(--mono);font-weight:700;line-height:1.04;
  font-size:clamp(30px,8vw,78px);letter-spacing:-.03em;display:flex;justify-content:center;align-items:baseline;
  white-space:nowrap;max-width:96vw;}
.wm-e{color:var(--ink);}
.wm-tail{color:var(--clay-deep);}
.wm-cursor{display:inline-block;width:.5ch;height:1.05em;background:var(--clay);margin-left:.04em;
  transform:translateY(.14em);border-radius:1px;animation:blink 1.05s steps(1) infinite;}
@keyframes blink{50%{opacity:0}}
.wm-sys{color:var(--ink);}
.wm-sys .d{color:var(--clay);}
.wordmark.is-eco .wm-e,.wordmark.is-eco .wm-tail{color:var(--pine);}
.wordmark.is-eco .wm-sys{color:var(--pine);}
.wordmark.is-eco .wm-sys .d{color:var(--amber-deep);}

.hero-tag{margin-top:var(--space-xl);font-size:clamp(17px,2.3vw,22px);line-height:1.5;color:var(--ink-2);
  max-width:33ch;opacity:0;transform:translateY(14px);}
.hero-tag b{color:var(--ink);font-weight:600;}
.hero-cta{margin-top:var(--space-2xl);display:flex;gap:var(--space-md);justify-content:center;flex-wrap:wrap;
  opacity:0;transform:translateY(14px);}
.btn{font-family:var(--mono);font-size:14.5px;font-weight:500;padding:14px 24px;border-radius:11px;
  background:var(--ink);color:var(--surface);transition:background .25s var(--ease-out),transform .25s var(--ease-out),box-shadow .25s;
  border:1px solid var(--ink);}
.btn:hover{background:var(--clay-deep);border-color:var(--clay-deep);transform:translateY(-2px);box-shadow:var(--shadow);}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line-strong);}
.btn.ghost:hover{background:var(--surface);border-color:var(--clay);color:var(--clay-deep);}
.btn.link{background:none;border:none;color:var(--clay-deep);padding:14px 6px;}
.btn.link:hover{background:none;transform:none;box-shadow:none;color:var(--ink);}
.btn.big{font-size:clamp(16px,2.2vw,19px);padding:17px 30px;}
/* hero load orchestration */
.loaded .eyebrow{animation:rise .8s var(--ease-out) .05s forwards;}
.loaded .hero-tag{animation:rise .9s var(--ease-out) .55s forwards;}
.loaded .hero-cta{animation:rise .9s var(--ease-out) .72s forwards;}
@keyframes rise{to{opacity:1;transform:none}}
.scrollcue{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);width:22px;height:40px;
  display:flex;justify-content:center;opacity:0;animation:cuefade 1s var(--ease-out) 1.1s forwards;}
@keyframes cuefade{to{opacity:1}}
.scrollcue .track{position:relative;width:2px;height:100%;background:var(--line-strong);border-radius:2px;overflow:hidden;}
.scrollcue .track::after{content:"";position:absolute;inset:0 0 auto 0;height:42%;background:var(--clay);border-radius:2px;animation:scrolldot 1.9s var(--ease-out) infinite;}
@keyframes scrolldot{0%{transform:translateY(-115%)}100%{transform:translateY(260%)}}

/* ---------- reveal util (transform+opacity+blur only) ---------- */
.reveal{opacity:0;transform:translateY(28px);filter:blur(6px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out),filter .8s var(--ease-out);}
.reveal.in{opacity:1;transform:none;filter:none;}
.stagger>*{opacity:0;transform:translateY(22px);filter:blur(4px);transition:opacity .7s var(--ease-out),transform .7s var(--ease-out),filter .7s var(--ease-out);}
.stagger.in>*{opacity:1;transform:none;filter:none;}

/* ---------- section scaffold ---------- */
section{position:relative;z-index:2;}
.wrap{width:min(1120px,92vw);margin:0 auto;}
.kicker{font-family:var(--mono);font-size:13px;color:var(--clay-deep);letter-spacing:.02em;}
.sec-head{max-width:62ch;margin-bottom:var(--space-3xl);}
.sec-head h2{font-size:clamp(30px,4.6vw,52px);line-height:1.06;margin:var(--space-md) 0 var(--space-sm);}
.sec-head .lead{color:var(--ink-2);font-size:clamp(16px,2vw,19px);max-width:54ch;}

/* ---------- WHAT WE ENGINEER - interactive system stage ---------- */
.cap-stage{padding:clamp(82px,11vh,130px) 0 clamp(96px,12vh,140px);}
.cs-intro{max-width:52ch;margin:0 auto clamp(36px,5vw,56px);text-align:center;}
.cs-head{font-size:clamp(28px,4.4vw,50px);line-height:1.07;margin:var(--space-md) 0 var(--space-md);}
.cs-head .clay{color:var(--clay-deep);}
.cs-lead{color:var(--ink-2);font-size:clamp(16px,1.9vw,19px);max-width:52ch;margin:0 auto;}
.cs-board{display:grid;grid-template-columns:minmax(210px,290px) 1fr;gap:clamp(14px,2.2vw,26px);
  background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(14px,2.2vw,24px);box-shadow:var(--shadow);}
.cs-tabs{display:flex;flex-direction:column;gap:4px;}
.cs-tab{position:relative;text-align:left;background:transparent;border:none;cursor:pointer;width:100%;
  padding:var(--space-md);border-radius:13px;overflow:hidden;transition:background .25s var(--ease-out);}
.cs-tab:hover{background:var(--sunk);}
.cs-tab.on{background:var(--clay-wash);}
.cs-tab .t-label{display:block;font-family:var(--mono);font-size:12.5px;color:var(--muted);}
.cs-tab .t-label i{font-style:normal;color:var(--clay);}
.cs-tab.on .t-label{color:var(--clay-deep);}
.cs-tab .t-name{display:block;font-family:var(--display);font-weight:700;font-size:15.5px;color:var(--ink-2);margin-top:3px;letter-spacing:-.01em;transition:color .2s;}
.cs-tab.on .t-name{color:var(--ink);}
.cs-tab .t-prog{position:absolute;left:0;bottom:0;height:2px;width:0;background:var(--clay);}
.cs-tab.on .t-prog{animation:tabprog var(--auto,4800ms) linear forwards;}
.cs-board.paused .cs-tab.on .t-prog{animation-play-state:paused;}
@keyframes tabprog{from{width:0}to{width:100%}}
.cs-stage{position:relative;min-height:clamp(330px,42vh,420px);border-radius:16px;overflow:hidden;display:flex;align-items:center;
  background:radial-gradient(130% 120% at 82% 8%,var(--clay-wash),transparent 52%),var(--sunk);}
.cs-canvas{position:absolute;inset:0;width:100%;height:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 70%);mask-image:linear-gradient(90deg,transparent 0%,transparent 28%,#000 70%);}
.cs-content{position:relative;z-index:2;padding:clamp(26px,4vw,46px);max-width:60ch;}
.cs-content .c-idx{font-family:var(--mono);font-size:12.5px;color:var(--clay);letter-spacing:.04em;}
.cs-content .c-mono{font-family:var(--mono);font-size:13px;color:var(--muted);margin-top:8px;}
.cs-content .c-mono i{font-style:normal;color:var(--clay-deep);}
.cs-content h3{font-size:clamp(26px,3.5vw,40px);line-height:1.03;margin:var(--space-sm) 0 var(--space-md);max-width:18ch;}
.cs-content .c-desc{color:var(--ink-2);font-size:clamp(15.5px,1.7vw,18px);max-width:42ch;}
.cs-content .c-tags{display:flex;flex-wrap:wrap;gap:var(--space-xs);margin-top:var(--space-lg);}
.cs-content .c-tags span{font-family:var(--mono);font-size:12px;color:var(--muted);border:1px solid var(--line);padding:5px 11px;border-radius:999px;}
.cs-content.enter>*{animation:csIn .6s var(--ease-out) backwards;}
.cs-content.enter .c-mono{animation-delay:.06s}
.cs-content.enter h3{animation-delay:.12s}
.cs-content.enter .c-desc{animation-delay:.2s}
.cs-content.enter .c-tags{animation-delay:.28s}
@keyframes csIn{from{opacity:0;transform:translateY(16px);filter:blur(5px)}to{opacity:1;transform:none;filter:none}}
@media(max-width:820px){
  .cs-board{grid-template-columns:1fr;gap:var(--space-md);}
  .cs-tabs{flex-direction:row;overflow-x:auto;gap:6px;padding-bottom:4px;scrollbar-width:none;-webkit-overflow-scrolling:touch;}
  .cs-tabs::-webkit-scrollbar{display:none;}
  .cs-tab{flex:0 0 auto;min-width:152px;}
  .cs-stage{min-height:430px;align-items:flex-start;}
  .cs-canvas{display:none;}
}
@media(prefers-reduced-motion:reduce){
  .cs-tab.on .t-prog{animation:none;width:100%;}
  .cs-content.enter>*{animation:none;}
}

/* (legacy manifesto + capability-list styles removed - merged into .cap-stage above) */

/* ---------- ORBITAL system map ---------- */
.orbit{height:230vh;position:relative;}
.orbit-sticky{position:sticky;top:0;height:100svh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-xl);overflow:hidden;padding:64px var(--space-md) var(--space-lg);}
.orbit-stage{position:relative;width:min(88vw,560px);aspect-ratio:1;display:flex;align-items:center;justify-content:center;}
#orbitCanvas{position:absolute;inset:0;width:100%;height:100%;}
.orbit-core{position:relative;z-index:3;font-family:var(--mono);font-weight:700;font-size:clamp(22px,5vw,42px);letter-spacing:-.03em;color:var(--ink);}
.orbit-core .eco{color:var(--pine);}.orbit-core .d{color:var(--amber-deep);}
.orbit-cap{max-width:46ch;text-align:center;color:var(--ink-2);font-size:clamp(15px,2vw,19px);padding:0 var(--space-lg);}
.orbit-cap b{color:var(--ink);font-weight:600;}
@media(max-width:820px){
  .orbit{height:200vh;}
  .orbit-sticky{gap:var(--space-md);padding-top:58px;}
  .orbit-stage{width:min(82vw,318px);}
  .orbit-cap{font-size:clamp(14px,3.6vw,16px);max-width:38ch;}
}

/* ---------- approach path ---------- */
.approach{padding:clamp(40px,6vh,70px) 0 clamp(110px,14vh,150px);}
.path{display:grid;gap:0;position:relative;}
.pstep{display:grid;grid-template-columns:clamp(56px,8vw,84px) 1fr;gap:clamp(16px,3vw,34px);
  padding:clamp(22px,3vw,30px) 0;border-top:1px solid var(--line);align-items:start;}
.pstep:last-child{border-bottom:1px solid var(--line);}
.pstep .p-n{font-family:var(--mono);font-size:14px;color:var(--clay);padding-top:.35em;}
.pstep h3{font-size:clamp(20px,2.6vw,27px);margin-bottom:6px;}
.pstep p{color:var(--ink-2);font-size:clamp(15px,1.7vw,17.5px);max-width:56ch;}
.pstep .p-word{font-family:var(--mono);font-size:12.5px;color:var(--muted);margin-top:var(--space-xs);}

/* ---------- vision ---------- */
.vision{padding:clamp(40px,6vh,60px) 0 clamp(110px,14vh,150px);}
.vquote{font-family:var(--display);font-weight:700;font-size:clamp(26px,4.4vw,46px);line-height:1.16;letter-spacing:-.02em;max-width:24ch;}
.vquote em{font-style:normal;color:var(--clay-deep);}

/* ---------- contact ---------- */
.contact{padding:0 0 clamp(110px,14vh,150px);}
.contact-card{position:relative;overflow:hidden;border-radius:26px;padding:clamp(46px,7vw,86px) clamp(28px,5vw,64px);
  background:var(--ink);color:var(--paper);box-shadow:var(--shadow-lg);}
.contact-card .cc-dots{position:absolute;inset:0;background-image:radial-gradient(oklch(0.715 0.115 75 / .18) 1px,transparent 1.4px);
  background-size:26px 26px;mask-image:radial-gradient(ellipse 70% 90% at 85% 10%,#000,transparent 60%);opacity:.7;}
.contact-card h2{position:relative;color:var(--paper);font-size:clamp(28px,4.4vw,48px);line-height:1.05;max-width:18ch;}
.contact-card p{position:relative;color:oklch(0.86 0.02 70);margin:var(--space-md) 0 var(--space-2xl);max-width:46ch;font-size:clamp(16px,2vw,18.5px);}
.contact-card .cc-mail{position:relative;display:inline-flex;font-family:var(--mono);font-size:clamp(18px,2.6vw,26px);font-weight:500;
  color:var(--paper);border-bottom:2px solid var(--clay);padding-bottom:6px;transition:color .25s,border-color .25s,transform .25s var(--ease-out);}
.contact-card .cc-mail:hover{color:var(--amber);border-color:var(--amber);transform:translateY(-2px);}
.contact-card .cc-sub{position:relative;font-family:var(--mono);font-size:12.5px;color:oklch(0.7 0.02 70);margin-top:var(--space-xl);}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);padding:var(--space-3xl) 0;}
.foot-row{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-md);}
.foot-brand{font-family:var(--mono);font-size:17px;font-weight:600;}.foot-brand .d{color:var(--clay);}
.foot-tag{color:var(--muted);font-size:14px;}
.foot-copy{font-family:var(--mono);font-size:12px;color:var(--muted);margin-top:var(--space-lg);}

/* ---------- responsive ---------- */
@media(max-width:720px){
  .topnav{display:none;}
  .menu-btn{display:flex;}
  .sec-head{margin-bottom:var(--space-2xl);}
}
@media(prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;}
  .reveal,.stagger>*,.m-statement .ln{transition:opacity .4s;transform:none!important;filter:none!important;}
  .bg .wash{animation:none;}
}