@font-face{font-family:'Inter Tight';font-style:normal;font-weight:300 800;font-display:swap;src:url(../fonts/InterTight.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 500;font-display:swap;src:url(../fonts/JetBrainsMono.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@property --bl{syntax:'<length>';inherits:false;initial-value:10px}
:root{
  --bg:#ffffff; --fg:#0a0a0a; --muted:#5f5f5f; --line:#e4e4e4; --soft:#f6f6f5;
  --inv-bg:#0a0a0a; --inv-fg:#fafafa; --inv-muted:#8f8f8f; --inv-line:#262626;
  --max:1240px; --ease:cubic-bezier(.2,.8,.2,1);
  --fs-h3:clamp(24px,2.6vw,34px); --fs-lead:clamp(18px,1.6vw,21px); --fs-body:16px;
  --mono:"JetBrains Mono",ui-monospace,SFMono-Regular,monospace;
  --cut-shape:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,var(--cut) 100%,0 calc(100% - var(--cut)));
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:#0a0a0a}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
body{font-family:"Inter Tight",system-ui,-apple-system,Segoe UI,sans-serif;background:var(--bg);color:var(--fg);line-height:1.55;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body::after{content:"";position:fixed;inset:-8vmax;pointer-events:none;z-index:100;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}
::selection{background:var(--fg);color:var(--bg)}
a{color:inherit}
img{display:block;max-width:100%}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.b{font-weight:800}.l{font-weight:300}
.mono{font-family:var(--mono);letter-spacing:.02em}

/* corner-bracket frame (brackets + hairline edges + fill) */
.brk{--bc:var(--fg);--ec:var(--line);--fill:transparent;
  background:
   linear-gradient(var(--bc),var(--bc)) 0 0/var(--bl) 1px,linear-gradient(var(--bc),var(--bc)) 0 0/1px var(--bl),
   linear-gradient(var(--bc),var(--bc)) 100% 0/var(--bl) 1px,linear-gradient(var(--bc),var(--bc)) 100% 0/1px var(--bl),
   linear-gradient(var(--bc),var(--bc)) 0 100%/var(--bl) 1px,linear-gradient(var(--bc),var(--bc)) 0 100%/1px var(--bl),
   linear-gradient(var(--bc),var(--bc)) 100% 100%/var(--bl) 1px,linear-gradient(var(--bc),var(--bc)) 100% 100%/1px var(--bl),
   linear-gradient(var(--ec),var(--ec)) 0 0/100% 1px,linear-gradient(var(--ec),var(--ec)) 0 100%/100% 1px,
   linear-gradient(var(--ec),var(--ec)) 0 0/1px 100%,linear-gradient(var(--ec),var(--ec)) 100% 0/1px 100%,
   var(--fill);
  background-repeat:no-repeat;transition:--bl .5s var(--ease)}

/* scroll progress */
.progress{position:fixed;top:0;left:0;right:0;height:2px;background:var(--fg);transform-origin:0 50%;transform:scaleX(0);z-index:60}


/* buttons: chamfered, sweep fill */
.btn{--cut:10px;--c1:var(--fg);--c2:var(--bg);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:14px;padding:17px 24px;font:500 12px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--c2);background:none;border:0;cursor:pointer;transition:transform .45s var(--ease),color .35s var(--ease);will-change:transform;white-space:nowrap}
.btn::before,.btn::after{content:"";position:absolute;clip-path:var(--cut-shape)}
.btn::before{inset:0;background:var(--c1);z-index:-2}
.btn::after{inset:1px;background:var(--c2);z-index:-1;transform:scaleX(0);transform-origin:100% 50%;transition:transform .55s var(--ease)}
.btn:hover{color:var(--c1)}
.btn:hover::after{transform:scaleX(1);transform-origin:0 50%}
.btn.ghost{color:var(--c1)}
.btn.ghost::after{transform:scaleX(1)}
.btn.ghost:hover{color:var(--c2)}
.btn.ghost:hover::after{transform:scaleX(0);transform-origin:100% 50%}
.btn .arr{display:inline-block;transition:transform .4s var(--ease)}
.btn:hover .arr{transform:translateX(4px)}
.btn .sq{width:6px;height:6px;background:currentColor;flex:none}
.btn[disabled]{opacity:.6;pointer-events:none}

/* nav */
header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.82);backdrop-filter:saturate(1.4) blur(14px);-webkit-backdrop-filter:saturate(1.4) blur(14px);border-bottom:1px solid transparent;transition:border-color .3s,transform .5s var(--ease)}
header.scrolled{border-bottom-color:var(--line)}
header.hide{transform:translateY(-100%)}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.nav ul{display:flex;gap:34px;list-style:none;align-items:center}
.nav ul a:not(.btn){text-decoration:none;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);transition:color .2s;display:inline-flex;gap:8px}
.nav ul a:not(.btn) i{font-style:normal;opacity:.45}
.nav ul a:not(.btn):hover{color:var(--fg)}
.nav .btn{padding:12px 18px;--cut:8px}
.menu-toggle{display:none;background:none;border:0;cursor:pointer;padding:8px}
.menu-toggle span{display:block;width:22px;height:2px;background:var(--fg);margin:5px 0;transition:.3s var(--ease)}
.menu-toggle[aria-expanded="true"] span:first-child{transform:translateY(3.5px) rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{transform:translateY(-3.5px) rotate(-45deg)}

/* hero */
.hero{position:relative;isolation:isolate;background:var(--bg);min-height:calc(100svh - 72px);display:flex;flex-direction:column;justify-content:center;padding:80px 0 40px;overflow:hidden}
#grid{position:absolute;inset:0;z-index:-1;-webkit-mask-image:radial-gradient(ellipse 85% 80% at 60% 45%,#000 35%,transparent 95%);mask-image:radial-gradient(ellipse 85% 80% at 60% 45%,#000 35%,transparent 95%)}
.hero .wrap{width:100%}
.tag{--bl:7px;display:inline-flex;align-items:center;gap:10px;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--fg);padding:9px 14px;--fill:var(--bg)}
.tag i{width:6px;height:6px;background:currentColor;animation:blink 1.6s steps(2) infinite}
@keyframes blink{50%{opacity:.2}}
h1{font-size:clamp(48px,8.6vw,132px);line-height:.94;letter-spacing:-.055em;margin:30px 0 34px;color:#fff;mix-blend-mode:difference}
.hero p.lead{font-size:clamp(19px,2vw,24px);font-weight:300;letter-spacing:-.01em;color:#a0a0a0;mix-blend-mode:difference;max-width:560px}
.hero .cta{display:flex;gap:12px;margin-top:40px;flex-wrap:wrap}
.coords{--bl:5px;--fill:var(--bg);position:absolute;left:0;top:0;font:500 10px var(--mono);letter-spacing:.06em;color:var(--fg);padding:4px 8px;pointer-events:none;opacity:0;transition:opacity .25s;z-index:2;white-space:nowrap}
.coords.on{opacity:1}

/* dictionary-framed term */
.headline{position:relative}
.term{position:relative;display:inline-block}
.term::before,.term::after{content:"";position:absolute;width:.16em;height:.16em;border:2px solid currentColor;transition:transform .7s var(--ease) 1.1s,opacity .4s 1.1s}
.term::before{left:-.08em;top:.02em;border-right:0;border-bottom:0}
.term::after{right:-.02em;bottom:-.04em;border-left:0;border-top:0}
.term .w:first-child::before{content:"";position:absolute;inset:.02em -.02em -.04em -.08em;border:1px dashed currentColor;opacity:.35;pointer-events:none}
.js:not(.rm) h1:not(.in) .term::before,.js:not(.rm) h1:not(.in) .term::after{opacity:0;transform:scale(.3)}
.term .w{position:static}
.def{--fill:var(--bg);position:absolute;width:390px;font:12px/1.6 var(--mono);color:var(--muted);padding:16px 18px 14px;z-index:5;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease),--bl .5s var(--ease)}
.headline.show .def{opacity:1;transform:none;pointer-events:auto}
.term{cursor:help}
.headline.show .term .w:first-child::before{opacity:.8}
.def:hover{--bl:18px}
.def::before{content:"";position:absolute;right:100%;top:var(--ly,34px);width:var(--lead,48px);border-top:1px dashed var(--fg)}
.def::after{content:"";position:absolute;left:calc(-1 * var(--lead,48px) - 3px);top:calc(var(--ly,34px) - 3px);width:7px;height:7px;background:var(--fg)}
.def-head{padding-bottom:8px;margin-bottom:10px;border-bottom:1px dashed var(--line)}
.def-head b{color:var(--fg);font-weight:500;font-size:14px}
.def-head em{font-style:italic}
.def p{color:var(--fg);font-size:12.5px}
.def.static{width:auto;max-width:min(420px,100%)}
.def.static::before,.def.static::after{display:none}

/* split text */
.w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.wi{display:inline-block}
.js:not(.rm) [data-split] .wi{transform:translateY(110%);transition:transform 1.1s var(--ease)}
.js:not(.rm) [data-split].in .wi{transform:none}

/* sections */
section{padding:130px 0}
.sec-head{margin-bottom:64px;max-width:900px}
.sec-head p{margin-top:20px}
h2{font-size:clamp(40px,6vw,84px);line-height:.98;letter-spacing:-.045em}
.sec-head p{color:var(--muted);font-size:clamp(18px,1.6vw,21px);font-weight:300;max-width:460px}

/* tech stack */
.stack{padding:64px 0 76px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);overflow:hidden}
.stack .label{max-width:var(--max);margin:0 auto 30px;padding:0 24px;display:flex;justify-content:space-between;font:500 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.mq-row{overflow:hidden;white-space:nowrap;padding:14px 0}
.mq-track{display:inline-flex;align-items:center;will-change:transform}
.mq-item{display:inline-flex;align-items:center;gap:.5em;font-size:clamp(22px,3vw,34px);font-weight:500;letter-spacing:-.02em;padding:0 1.1em;color:var(--fg);opacity:.68;transition:opacity .3s,transform .4s var(--ease)}
.mq-item svg{width:1.2em;height:1.2em;fill:currentColor;flex:none}
.mq-item:hover{opacity:1;transform:scale(1.06)}

/* services */

/* process */
.dark{background:var(--inv-bg);color:var(--inv-fg)}
.dark .sec-head p{color:var(--inv-muted)}
.steps{display:grid;grid-template-columns:repeat(4,1fr);position:relative;--p:0}
.steps .track{position:absolute;left:0;right:0;top:0;height:1px;background:var(--inv-line)}
.steps .track i{position:absolute;inset:0;background:var(--inv-fg);transform-origin:0 50%;transform:scaleX(var(--p))}
.step{padding:52px 28px 0 0;position:relative}
.step::before{content:"";position:absolute;left:0;top:0;width:10px;height:10px;background:var(--inv-bg);border:1px solid var(--inv-muted);transform:translate(0,-50%) rotate(45deg);transition:background .4s,border-color .4s,box-shadow .4s}
.step.on::before{background:var(--inv-fg);border-color:var(--inv-fg);box-shadow:0 0 0 5px rgba(250,250,250,.08)}
.step h3{font-size:var(--fs-h3);letter-spacing:-.03em;margin-bottom:10px;font-weight:500}
.step p{color:var(--inv-muted);font-size:var(--fs-body);font-weight:300}

/* principles */
.principles{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.pr{padding:36px 38px 40px;display:grid;gap:8px;transition:color .35s,--bl .5s var(--ease)}
.pr:hover{--fill:var(--fg);--bc:var(--fg);--ec:var(--fg);--bl:26px;color:var(--bg)}
.pr h3{font-size:26px;font-weight:700;letter-spacing:-.03em}
.pr p{color:var(--muted);transition:color .35s}
.pr:hover p,.pr:hover .idx{color:#a9a9a9}

/* contact */
.contact{display:grid;grid-template-columns:1fr 1.2fr;gap:72px;align-items:start}
.contact .info>p{color:var(--muted);font-size:clamp(18px,1.6vw,21px);font-weight:300;margin:22px 0 40px;max-width:420px}
.meta{border-top:1px solid var(--line)}
.meta div{display:grid;grid-template-columns:110px 1fr;align-items:baseline;padding:16px 0;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.meta a,.meta span{font:500 15px var(--mono);letter-spacing:.02em;text-transform:none;color:var(--fg);text-decoration:none;width:max-content;background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .5s var(--ease)}
.meta a:hover{background-size:100% 1px}
.console{--fill:var(--bg);--bl:14px;position:relative}
.console-bar{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;border-bottom:1px solid var(--line);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.console-bar .dots{display:flex;gap:6px}
.console-bar .dots i{width:7px;height:7px;border:1px solid var(--muted)}
.console-bar .dots i:first-child{background:var(--fg);border-color:var(--fg)}
.console-body{padding:30px 30px 32px}
.row{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.fld{margin-bottom:26px}
.fld label,.fld .lab{display:flex;gap:10px;font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:6px;transition:color .25s}
.fld label i,.fld .lab i{font-style:normal;opacity:.5}
.fld:focus-within label{color:var(--fg)}
.fld:focus-within label::after{content:"◂";margin-left:auto;animation:blink 1s steps(2) infinite}
input,textarea{width:100%;font:300 19px/1.4 "Inter Tight",sans-serif;padding:10px 0 12px;border:0;border-radius:0;color:var(--fg);outline:none;
  background:linear-gradient(var(--fg),var(--fg)) 0 100%/0 1px no-repeat,linear-gradient(var(--line),var(--line)) 0 100%/100% 1px no-repeat;transition:background-size .6s var(--ease)}
input:focus,textarea:focus{background-size:100% 1px,100% 1px}
input::placeholder,textarea::placeholder{color:#767676;font:400 13px var(--mono);letter-spacing:.02em}
textarea{min-height:120px;resize:vertical}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.chips label{position:relative;margin:0}
.chips input{position:absolute;opacity:0;width:1px;height:1px}
.chips span{--bl:5px;display:inline-block;padding:10px 14px;font:500 11px var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--muted);cursor:pointer;transition:color .25s,--bl .4s var(--ease)}
.chips span:hover{color:var(--fg);--bl:10px}
.chips input:checked+span{--fill:var(--fg);--bc:var(--fg);--ec:var(--fg);color:var(--bg)}
.chips input:focus-visible+span{outline:1px dashed var(--fg);outline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.console .btn{width:100%;padding:19px;margin-top:6px}
.status{margin-top:16px;font:500 12px var(--mono);letter-spacing:.04em;min-height:20px}
.status:not(:empty)::before{content:"> "}
.status.ok,.status.err{color:var(--fg)}
.status.err::before{content:"! "}

/* footer */
footer{background:var(--inv-bg);color:var(--inv-fg);padding:90px 0 36px;overflow:hidden}
.mega{overflow:hidden;padding:8px 0}
.js:not(.rm) .mega.in img{transform:none}
.foot{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;color:var(--inv-muted);font:500 11px var(--mono);letter-spacing:.1em;text-transform:uppercase;margin-top:48px;padding-top:24px;border-top:1px solid var(--inv-line)}
.foot a{text-decoration:none}.foot a:hover{color:var(--inv-fg)}

/* reveal */
.js:not(.rm) .rv{opacity:0;transform:translateY(24px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js:not(.rm) .rv.in{opacity:1;transform:none}
.rm *,.rm body::after{animation:none!important;transition:none!important}
.rm{scroll-behavior:auto}

/* responsive */
@media (max-width:960px){
  .steps{grid-template-columns:repeat(2,1fr);row-gap:56px}
  .steps .track{display:none}
  .step{padding-top:0}
  .step::before{position:static;display:block;transform:rotate(45deg);margin-bottom:24px}
  .sec-head,.contact{grid-template-columns:1fr;gap:24px}
  .contact{gap:48px}
}
@media (max-width:720px){
  .wrap{padding:0 16px}
  .stack .label{padding:0 16px}
  .nav ul{position:fixed;inset:72px 0 auto 0;flex-direction:column;align-items:stretch;gap:0;background:var(--bg);border-bottom:1px solid var(--line);padding:8px 16px 20px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:.3s var(--ease)}
  .nav ul.open{transform:none;opacity:1;pointer-events:auto}
  .nav ul li a:not(.btn){display:flex;padding:16px 0;font-size:13px;border-bottom:1px solid var(--line)}
  .nav ul .btn{margin-top:16px;width:100%}
  .menu-toggle{display:block}
  .hero{padding:56px 0 32px}
  section{padding:88px 0}
  .row,.steps{grid-template-columns:1fr}
  .row{gap:0}
  .pr{padding:28px}
  .console-body{padding:24px 20px 26px}
  footer{padding-top:64px}
}

/* ================= v2: boot, field, services index, logo, a11y ================= */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.skip{position:fixed;left:16px;top:-60px;z-index:300;background:var(--fg);color:var(--bg);padding:10px 14px;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;text-decoration:none;transition:top .2s}
.skip:focus{top:16px}
:focus-visible{outline:1px dashed currentColor;outline-offset:4px}
.btn:focus-visible{outline-offset:5px}

/* boot */
.boot{display:none;position:fixed;inset:0;z-index:250;background:#0a0a0a;color:#fafafa;place-items:center;clip-path:inset(0 0 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);animation:bootfail 0s 7s forwards;cursor:pointer}
html.booting .boot{display:grid}
html.booting body{overflow:hidden}
.boot.done{clip-path:inset(0 0 100% 0)}
@keyframes bootfail{to{visibility:hidden;pointer-events:none}}
.boot-inner{width:min(820px,86vw)}
.boot-log{font-size:12px;line-height:1.9;color:#8f8f8f;min-height:115px;margin-bottom:40px;white-space:pre}
.boot-log .ok{color:#fafafa}
.boot-meta{display:flex;justify-content:space-between;margin-top:40px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#8f8f8f}
.boot-meta b{color:#fafafa;font-weight:500}
.boot-bar{height:1px;background:#262626;margin-top:12px}
.boot-bar i{display:block;height:100%;background:#fafafa;transform-origin:0 50%;transform:scaleX(0)}
.boot-skip{margin-top:26px;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:#555}

/* animated vector logo */
[data-logo] svg{display:block;overflow:visible}
.brand svg{height:24px;width:auto}
.brand path{transform-box:fill-box;transform-origin:50% 100%;transition:transform .5s var(--ease)}
.js:not(.rm) .brand:not(.in) path{transform:translateY(40%) scaleY(.2);opacity:0}
.brand.in path{transition:transform .8s var(--ease),opacity .5s;transition-delay:calc(var(--i) * 45ms)}
.brand:hover path{animation:glyph .6s var(--ease) calc(var(--i) * 40ms)}
@keyframes glyph{40%{transform:translateY(-18%)}}
.mega svg{width:100%;height:auto;color:var(--inv-fg)}
/* footer logo: plays once in view; glyph by glyph, outline draws in, then fills */
.mega path{fill:var(--inv-fg);fill-opacity:0;stroke:var(--inv-fg);stroke-width:1.2;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.5s var(--ease) calc(var(--i) * 120ms),fill-opacity .8s var(--ease) calc(1.2s + var(--i) * 120ms)}
.mega.play path{stroke-dashoffset:0;fill-opacity:1}
.rm .mega path,html:not(.js) .mega path{fill-opacity:1;stroke-dashoffset:0}

/* manifesto field */
#field{height:420vh;padding:0;position:relative}
.field-sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
#field-canvas{position:absolute;inset:0;width:100%;height:100%}
.field-fallback{display:none;position:absolute;left:50%;top:44%;width:min(70vw,900px);transform:translate(-50%,-50%);opacity:var(--form,0);transition:opacity .4s}
#field.nogl .field-fallback{display:block}
.field-hud,.field-foot{position:absolute;left:0;right:0;display:flex;justify-content:space-between;padding:0 max(24px,calc((100vw - var(--max))/2 + 24px));font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-muted);pointer-events:none}
.field-hud{top:112px}
.field-foot{bottom:32px}
.field-hud b,.field-foot b{color:var(--inv-fg);font-weight:500}
.field-steps{display:flex;gap:18px}
.field-steps i{font-style:normal;transition:color .3s}
.field-steps i.on{color:var(--inv-fg)}
.field-lines{position:absolute;left:0;right:0;bottom:92px;padding:0 max(24px,calc((100vw - var(--max))/2 + 24px));pointer-events:none}
.fl{position:absolute;bottom:0;max-width:14ch;font-size:clamp(40px,6.4vw,96px);line-height:.98;letter-spacing:-.045em;opacity:0;transform:translateY(30px);filter:blur(8px);transition:opacity .7s var(--ease),transform .9s var(--ease),filter .7s var(--ease)}
.fl.on{opacity:1;transform:none;filter:none}
.fl .l{color:var(--inv-muted)}
.field-note{position:absolute;right:max(24px,calc((100vw - var(--max))/2 + 24px));bottom:96px;max-width:360px;font:12px/1.75 var(--mono);color:var(--inv-muted);opacity:0;transform:translateY(20px);transition:opacity .8s var(--ease) .2s,transform .8s var(--ease) .2s}
.field-note.on{opacity:1;transform:none}
.rm #field{height:auto}
.rm .field-sticky{position:relative;height:auto;padding:120px 0}
.rm #field-canvas{display:none}
.rm .field-lines{position:relative;bottom:auto}
.rm .fl{position:relative;opacity:1;transform:none;filter:none;margin-bottom:24px}
.rm .field-note{position:relative;right:auto;bottom:auto;opacity:1;transform:none;margin:24px max(24px,calc((100vw - var(--max))/2 + 24px)) 0}
.rm .field-hud,.rm .field-foot{position:relative;top:auto;bottom:auto;margin-bottom:40px}

/* services index */
.svc-list{list-style:none;border-top:1px solid var(--line)}
.svc{position:relative;display:grid;grid-template-columns:80px minmax(0,1.1fr) minmax(0,1fr) 40px;align-items:center;gap:24px;padding:22px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--fg);transition:opacity .35s,color .35s}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background:var(--fg);transform:scaleX(0);transform-origin:100% 50%;transition:transform .6s var(--ease)}
.svc:hover::after,.svc:focus-visible::after{transform:scaleX(1);transform-origin:0 50%}
.svc-n{font-size:11px;letter-spacing:.1em;color:var(--muted)}
.svc-t{font-size:clamp(24px,2.9vw,40px);font-weight:500;letter-spacing:-.035em;line-height:1.05;transition:transform .6s var(--ease)}
.svc-d{color:var(--muted);font-size:var(--fs-body);font-weight:300}
.svc-go{justify-self:end;font-size:15px;transition:transform .5s var(--ease)}
.svc-ico{display:none}
.svc:hover .svc-t{transform:translateX(16px)}
.svc:hover .svc-go{transform:rotate(45deg)}
@media (hover:hover){.svc-list:hover .svc{opacity:.4}.svc-list .svc:hover{opacity:1}}
.svc-preview{--fill:var(--bg);--bl:14px;position:fixed;left:0;top:0;width:300px;z-index:40;pointer-events:none;opacity:0;scale:.9;transition:opacity .3s,scale .4s var(--ease)}
.svc-preview.on{opacity:1;scale:1}
.svp-bar,.svp-foot{display:flex;justify-content:space-between;gap:12px;padding:10px 14px;font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.svp-bar{border-bottom:1px solid var(--line)}
.svp-foot{border-top:1px solid var(--line);flex-direction:column;gap:4px}
.svp-t{color:var(--fg);font-weight:500}
.svp-stage{height:170px;display:grid;place-items:center;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:17px 17px;background-position:center;position:relative;overflow:hidden}
.svp-stage::after{content:"";position:absolute;left:0;right:0;height:40%;background:linear-gradient(transparent,rgba(10,10,10,.06));animation:svscan 2.2s linear infinite}
@keyframes svscan{from{top:-40%}to{top:100%}}
.svp-ico{width:88px;height:88px;fill:none;stroke:var(--fg);stroke-width:1.2;background:var(--bg);padding:10px;overflow:visible}
@keyframes svdraw{to{stroke-dashoffset:0}}
@media (max-width:960px){
  .svc{grid-template-columns:52px minmax(0,1fr) 24px;gap:6px 14px;padding:18px 0}
  .svc-d{grid-column:2;grid-row:2;font-size:14px}
  .svc-go{grid-column:3;grid-row:1}
  .svc-preview{display:none}
  .field-hud{top:88px}
  .field-note{left:16px;right:16px;max-width:none;bottom:auto;top:130px}
  .field-lines{bottom:72px}
}

/* ================= v3: process signal flow, transmission ================= */
.flow{position:relative;height:300px;margin:0 0 56px;border-top:1px solid var(--inv-line);border-bottom:1px solid var(--inv-line)}
#flow{position:absolute;inset:0;width:100%;height:100%}
.flow-labels{position:absolute;left:0;right:0;top:12px;display:grid;grid-template-columns:repeat(4,1fr);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--inv-muted);pointer-events:none}
.flow-labels span{padding-left:12px}
@media (max-width:720px){.flow{height:220px;margin-bottom:40px}.flow-labels{font-size:9px}.flow-labels span{padding-left:6px}.flow-labels span::before{content:""}}

.console{overflow:hidden}
.console-body{transition:opacity .5s var(--ease),filter .5s var(--ease)}
.console.sending .console-body{opacity:.12;filter:blur(2px)}
.console.sending .console-bar .dots i{animation:blink .5s steps(2) infinite}
.console.sending .console-bar .dots i:nth-child(2){animation-delay:.16s}
.console.sending .console-bar .dots i:nth-child(3){animation-delay:.32s}
.console.sent .console-body{opacity:0}
.tx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.tx-done{position:absolute;inset:48px 0 0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;z-index:4;opacity:0;pointer-events:none;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease)}
.console.sent .tx-done{opacity:1;transform:none}
.tx-done b{font-size:clamp(16px,2vw,22px);font-weight:500;letter-spacing:.14em;text-transform:uppercase}
.tx-done p.mono{display:flex;gap:18px;font-size:11px;letter-spacing:.1em;color:var(--muted)}
.tx-msg{color:var(--muted);font-weight:300;font-size:var(--fs-lead)}
.tx-sig{display:flex;align-items:flex-end;gap:5px;height:28px;margin-bottom:6px}
.tx-sig i{width:6px;background:var(--fg);animation:sig 1s var(--ease) infinite alternate}
.tx-sig i:nth-child(1){height:30%}.tx-sig i:nth-child(2){height:65%;animation-delay:.15s}.tx-sig i:nth-child(3){height:100%;animation-delay:.3s}
@keyframes sig{from{opacity:.25}to{opacity:1}}
.console.shake{animation:shake .45s var(--ease)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(3px)}}

/* ================= v4: entry manifesto, adaptive header, grouped services ================= */
h1,h2,.fl,.svc-t{text-wrap:balance}
p{text-wrap:pretty}
/* header adapts to the section beneath it (also drives Safari's toolbar tint) */
header{transition:border-color .3s,transform .5s var(--ease),background-color .4s,color .4s}
header.on-dark{background:rgba(10,10,10,.72);color:var(--inv-fg);border-bottom-color:transparent}
header.on-dark.scrolled{border-bottom-color:var(--inv-line)}
header.on-dark .brand{color:var(--inv-fg)}
header.on-dark .nav ul a:not(.btn){color:var(--inv-muted)}
header.on-dark .nav ul a:not(.btn):hover{color:var(--inv-fg)}
header.on-dark .nav .btn{--c1:var(--inv-fg);--c2:var(--inv-bg)}
header.on-dark .menu-toggle span{background:var(--inv-fg)}
@media (max-width:720px){header.on-dark .nav ul{background:var(--inv-bg);border-bottom-color:var(--inv-line)}header.on-dark .nav ul li a:not(.btn){border-bottom-color:var(--inv-line)}}
.brand{color:var(--fg);transition:color .4s}
/* rotating product word */
.fl-stack{max-width:none}
.fl-stack>span{display:block}
.rot{position:relative;display:inline-block;white-space:nowrap}
.rot.glitch{animation:gjit .1s steps(2) infinite}
.rot.glitch::before,.rot.glitch::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;white-space:nowrap}
.rot.glitch::before{color:var(--inv-fg);animation:gl1 .24s steps(3) infinite}
.rot.glitch::after{color:var(--inv-muted);animation:gl2 .2s steps(3) infinite}
@keyframes gjit{0%{transform:translate(0,0) skewX(0)}50%{transform:translate(-2px,1px) skewX(-4deg)}100%{transform:translate(2px,-1px) skewX(3deg)}}
@keyframes gl1{0%{clip-path:inset(8% 0 70% 0);transform:translate(-6px,0)}33%{clip-path:inset(46% 0 30% 0);transform:translate(5px,0)}66%{clip-path:inset(72% 0 6% 0);transform:translate(-3px,0)}100%{clip-path:inset(20% 0 58% 0);transform:translate(4px,0)}}
@keyframes gl2{0%{clip-path:inset(60% 0 18% 0);transform:translate(6px,0)}33%{clip-path:inset(12% 0 64% 0);transform:translate(-5px,0)}66%{clip-path:inset(38% 0 40% 0);transform:translate(3px,0)}100%{clip-path:inset(80% 0 2% 0);transform:translate(-4px,0)}}
@media (max-width:720px){.rot{white-space:normal}}
/* grouped services index */
.svc-group{display:grid;grid-template-columns:minmax(160px,1fr) 3.2fr;gap:24px;padding:28px 0 0;border-top:1px solid var(--fg)}
.svc-group+.svc-group{margin-top:56px}
.svc-gt{position:sticky;top:96px;align-self:start;font:500 12px var(--mono);letter-spacing:.1em;text-transform:uppercase;color:var(--fg);padding-top:24px}
.svc-group .svc-list{border-top:0}
.svc-group .svc:last-child{border-bottom:0}
.svp-ico{fill:var(--fg);stroke:none;padding:8px}
.svp-ico *{stroke-dasharray:none;stroke-dashoffset:0;animation:none}
.svp-ico{animation:svreveal .7s var(--ease) both}
@keyframes svreveal{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
@media (max-width:960px){.svc-group{grid-template-columns:1fr;gap:0}.svc-gt{position:static;padding-top:0}}

.nw{white-space:nowrap}
#field{margin-top:-72px}

/* Lenis 1.3.26 (inlined) */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* ================= v5: panel verdict ================= */
@media (hover:none){body::after{animation:none}}
header.on-dark{background:rgba(10,10,10,.9);backdrop-filter:none;-webkit-backdrop-filter:none}
.tag i{box-shadow:none}
.opt{opacity:.6}
#contact{padding-top:64px}
/* manifesto entry: cue + skip, exit bloom into the white hero */
.field-cue{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);display:flex;gap:18px;align-items:center;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--inv-muted);z-index:3}
.cue-scroll{transition:opacity .4s}
.cue-skip{color:var(--inv-fg);text-decoration:none;border-bottom:1px solid transparent;transition:border-color .3s,opacity .4s}
.cue-skip:hover,.cue-skip:focus-visible{border-bottom-color:currentColor}
#field.past-cue .cue-scroll{opacity:0}
#field.past-skip .cue-skip{opacity:0;pointer-events:none}
.field-sticky::after{content:"";position:absolute;inset:0;background:var(--bg);opacity:var(--exit,0);pointer-events:none;z-index:4}
@media (max-width:720px){#field{height:300vh}.field-cue{bottom:64px}}
/* hero systems line */
.systems{margin-top:14px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.term:focus-visible{outline:1px dashed currentColor;outline-offset:6px}
/* single quiet logo row */
.mq-item{font-size:clamp(16px,1.6vw,22px);opacity:.62;padding:0 1.3em}
.stack{padding:48px 0 56px}
/* principles: giant words filling with ink on scroll */
.principles{display:block}
.pr{display:flex;justify-content:space-between;align-items:baseline;gap:24px;padding:22px 0;border-top:1px solid var(--line);background:none;--k:1}
.pr:last-child{border-bottom:1px solid var(--line)}
.pr:hover{color:inherit;background:none}
.pr h3{font-size:clamp(52px,9.5vw,148px);font-weight:800;letter-spacing:-.055em;line-height:.92;color:color-mix(in srgb,var(--fg) calc(var(--k) * 100%),#d4d4d4)}
.pr p,.pr:hover p{font:500 12px/1.6 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);max-width:28ch;text-align:right}
@media (max-width:720px){.pr{flex-direction:column;align-items:flex-start;gap:8px}.pr p{text-align:left}}