:root{
  --ease:cubic-bezier(.2,.7,.2,1); --hl:rgba(95,224,197,.55);
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  --lime:#CAEC6A; --pine:#08302B; --pine-2:#0D3D37; --pine-3:#135048; --mint:#5FE0C5; --mint-dim:#9FD9CC; --on-pine:#EAF6F2; --on-pine-muted:#A9C9C1;
  --paper:#F4F8F6; --card:#FFFFFF; --ink:#0B2623; --muted:#516965; --line:#D6E3DF; --chip:#E3EFEB; --teal:#0C8E79;
  --night:#15100E; --night-2:#221A17; --ember:#E9A94D; --night-text:#F5EDE4; --night-muted:#C2B2A2;
  --r-lg:28px; --r-md:18px; --r-sm:10px;
  color-scheme:light;
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#071A18; --card:#0D2522; --ink:#E4F1ED; --muted:#98B3AD; --line:#1D3A36; --chip:#12302C; --teal:#5FE0C5; --hl:rgba(95,224,197,.26);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --paper:#071A18; --card:#0D2522; --ink:#E4F1ED; --muted:#98B3AD; --line:#1D3A36; --chip:#12302C; --teal:#5FE0C5; --hl:rgba(95,224,197,.26);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-padding-top:calc(env(safe-area-inset-top,0px) + 80px);scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"Hanken Grotesk",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:1.0625rem;line-height:1.6;-webkit-font-smoothing:antialiased}
a{color:inherit}
:focus-visible{outline:3px solid var(--teal);outline-offset:3px;border-radius:6px}
h1,h2,h3{font-family:"Bricolage Grotesque","Hanken Grotesk",system-ui,sans-serif;margin:0;letter-spacing:-.025em}
.wrap{max-width:1180px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.75rem)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* nav */
.nav{position:sticky;top:0;z-index:20;background:color-mix(in srgb,var(--pine) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);color:var(--on-pine)}
.nav{top:env(safe-area-inset-top,0px)}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;height:68px;gap:1rem}
.brand{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.3rem;text-decoration:none;letter-spacing:-.04em;display:flex;align-items:center;gap:.55rem}
.brand .mark-d{height:1.3rem;width:auto;fill:var(--lime);flex:none;transition:transform .4s var(--ease)}
.brand:hover .mark-d{transform:translateX(-2px) skewX(-6deg)}
.nav ul{display:flex;gap:1.75rem;list-style:none;margin:0;padding:0;font-weight:500;font-size:.97rem}
.nav ul a{text-decoration:none;color:var(--on-pine-muted)}
.nav ul a:hover{color:var(--on-pine)}
.nav .hire{background:var(--mint);color:var(--pine);text-decoration:none;font-weight:700;padding:.55rem 1.1rem;border-radius:999px;font-size:.95rem;white-space:nowrap}
.nav .hire:hover{background:#fff}
.nav :focus-visible,.hero :focus-visible,.contact :focus-visible{outline-color:var(--mint)}

/* hero */
.hero{background:var(--pine);color:var(--on-pine);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 1px 1px,rgba(159,217,204,.14) 1px,transparent 1.5px) 0 0/26px 26px;
  mask-image:linear-gradient(180deg,#000 0%,transparent 95%);-webkit-mask-image:linear-gradient(180deg,#000 0%,transparent 95%)}
.hero > .wrap{position:relative;display:grid;grid-template-columns:1.25fr .9fr;gap:clamp(2rem,5vw,4.5rem);padding-top:clamp(3.5rem,8vw,6.5rem);padding-bottom:clamp(3.5rem,8vw,6rem);align-items:end}
.hello{color:var(--mint);font-weight:600;margin:0 0 1.25rem;font-size:1.05rem}
.hero h1{font-size:clamp(2.7rem,6.6vw,5.4rem);line-height:.98;font-weight:800;letter-spacing:-.045em}
.hero h1 span{display:block}
.hero h1 .l2{color:var(--mint-dim);font-weight:400}
.hero .lede{max-width:52ch;color:var(--on-pine-muted);font-size:1.15rem;margin:1.75rem 0 2.25rem}
.hero .actions{display:flex;flex-wrap:wrap;gap:.8rem}
.b{display:inline-flex;align-items:center;gap:.5rem;text-decoration:none;font-weight:700;padding:.85rem 1.35rem;border-radius:999px;transition:background .2s,color .2s,border-color .2s}
.b.solid{background:var(--mint);color:var(--pine)}
.b.solid:hover{background:#fff}
.b.line{border:1.5px solid rgba(234,246,242,.3);color:var(--on-pine)}
.b.line:hover{border-color:var(--on-pine)}

/* live panel */
.live{background:rgba(255,255,255,.04);border:1px solid rgba(159,217,204,.18);border-radius:var(--r-md);padding:1.4rem 1.4rem 1rem}
.live h2{font-size:1rem;font-weight:600;font-family:"Hanken Grotesk",system-ui,sans-serif;letter-spacing:0;color:var(--on-pine-muted);margin-bottom:.6rem;display:flex;justify-content:space-between}
.live h2 b{color:var(--mint);font-weight:700}
.live ul{list-style:none;margin:0;padding:0}
.live li a{display:flex;align-items:center;gap:.8rem;padding:.62rem .2rem;border-top:1px solid rgba(159,217,204,.12);text-decoration:none;font-weight:500}
.live li:first-child a{border-top:0}
.live li a:hover .d{color:var(--mint)}
.live .dot{width:.55rem;height:.55rem;border-radius:50%;background:var(--mint);box-shadow:0 0 0 0 rgba(95,224,197,.6);flex:none}
.live .d{flex:1;transition:color .2s}
.live .k{color:var(--on-pine-muted);font-size:.85rem}
.live li{opacity:0;transform:translateY(8px);animation:rise .5s cubic-bezier(.2,.7,.2,1) forwards}
.live .dot{animation:ping 2.4s ease-out infinite}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes ping{0%{box-shadow:0 0 0 0 rgba(95,224,197,.55)}70%,100%{box-shadow:0 0 0 7px rgba(95,224,197,0)}}
@media (prefers-reduced-motion:reduce){.live li{opacity:1;transform:none;animation:none}.live .dot{animation:none}}

/* stack ribbon */
.ribbon{background:var(--pine-2);color:var(--on-pine-muted);border-top:1px solid rgba(159,217,204,.1)}
.ribbon{position:relative;z-index:1;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ribbon .track{display:flex;width:max-content;animation:marquee 38s linear infinite}
.ribbon:hover .track{animation-play-state:paused}
.ribbon ul{list-style:none;margin:0;padding:1.1rem 0;display:flex;flex:none;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:1.02rem}
.ribbon li{display:flex;align-items:center;white-space:nowrap}
.ribbon li::after{content:"/";color:var(--lime);font-weight:800;margin:0 1.4rem;opacity:.8}

/* section heads */
section.block{padding-top:clamp(4rem,9vw,7rem)}
.head{display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:end;margin-bottom:2.25rem}
.head h2{font-size:clamp(2rem,4.4vw,3.2rem);line-height:1.02;font-weight:800;max-width:22ch}
.head p{margin:.75rem 0 0;color:var(--muted);max-width:50ch}

/* featured */
.feature{background:var(--night);color:var(--night-text);border-radius:var(--r-lg);overflow:hidden;display:grid;grid-template-columns:1.05fr 1fr;box-shadow:0 40px 80px -50px rgba(21,16,14,.8)}
.feature .copy{padding:clamp(1.75rem,4.5vw,3.5rem);display:flex;flex-direction:column}
.feature .where{color:var(--ember);font-weight:600;margin:0 0 1rem}
.feature h3{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1;font-weight:800}
.feature .lede{color:var(--night-muted);margin:1.1rem 0 1.6rem;max-width:44ch}
.feature ul{margin:0 0 2.2rem;padding:0;list-style:none;display:grid;gap:.75rem}
.feature ul li{display:grid;grid-template-columns:1.6rem 1fr;align-items:start}
.feature ul li::before{content:"";width:.6rem;height:.6rem;margin-top:.55em;border-radius:50%;background:var(--ember)}
.feature .acts{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:auto}
.feature .b.solid{background:var(--ember);color:var(--night)}
.feature .b.solid:hover{background:#F6C57A}
.feature .b.line{border-color:rgba(245,237,228,.3);color:var(--night-text)}
.feature .b.line:hover{border-color:var(--night-text)}
.feature :focus-visible{outline-color:var(--ember)}
.board{background:var(--night-2);padding:clamp(1.75rem,4.5vw,3.5rem);display:flex;flex-direction:column;justify-content:center;position:relative}
.board::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,rgba(233,169,77,.16),transparent 55%)}
.menu{position:relative;background:#FBF5EC;color:#231A15;border-radius:16px;padding:1.6rem 1.5rem 1.3rem;box-shadow:0 40px 70px -30px rgba(0,0,0,.8);transform:rotate(-1.6deg)}
.menu .mh{display:flex;justify-content:space-between;align-items:baseline;border-bottom:2px solid #231A15;padding-bottom:.65rem;margin-bottom:.6rem}
.menu .mh b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-size:1.45rem;letter-spacing:-.03em}
.menu .mh small{color:#8A7361;font-size:.8rem}
.row{display:flex;align-items:center;gap:.75rem;padding:.6rem 0;border-bottom:1px dashed #DBCCB9;font-size:.97rem}
.row:last-of-type{border-bottom:0}
.row .n{flex:1}
.row .p{font-variant-numeric:tabular-nums;font-weight:700}
.row button{border:0;background:#231A15;color:#FBF5EC;width:2rem;height:2rem;border-radius:50%;font-size:1.1rem;cursor:pointer;line-height:1;transition:transform .15s,background .2s}
.row button:hover{background:#B8651B}
.row button:active{transform:scale(.88)}
.row button:focus-visible{outline:3px solid var(--ember);outline-offset:2px}
.basket{margin-top:1rem;background:#231A15;color:#FBF5EC;border-radius:12px;padding:.85rem 1rem;display:flex;justify-content:space-between;align-items:center;font-weight:700}
.basket span:first-child{font-weight:500;color:#DBCCB9}
.basket .t{transition:color .3s,transform .3s;display:inline-block}
.basket.bump .t{color:var(--ember);transform:scale(1.12)}
.board .note{position:relative;color:var(--night-muted);font-size:.85rem;margin:1.4rem 0 0;text-align:center}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.75rem;padding:0;list-style:none}
.filters button{font:inherit;font-weight:600;font-size:.95rem;border:1.5px solid var(--line);background:transparent;color:var(--ink);padding:.5rem 1rem;border-radius:999px;cursor:pointer;transition:background .2s,border-color .2s,color .2s}
.filters button:hover{border-color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.filters .c{opacity:.6;font-weight:500;margin-left:.3rem}

/* big cases */
.cases{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem;list-style:none;margin:0 0 1.25rem;padding:0}
.case{background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;transition:transform .25s,box-shadow .25s}
.case:hover{transform:translateY(-4px);box-shadow:0 28px 50px -34px rgba(8,48,43,.55)}
.case .art{--c:#0C8E79;background:var(--c);height:168px;position:relative;overflow:hidden;display:flex;align-items:flex-end;padding:1.25rem;color:#fff}
.case .art .mark{position:absolute;right:-.06em;top:-.2em;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:10rem;line-height:1;letter-spacing:-.06em;opacity:.16}
.case .art .logo{width:3.4rem;height:3.4rem;border-radius:14px;background:rgba(255,255,255,.96);color:var(--c);display:grid;place-items:center;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:1.1rem;letter-spacing:-.03em;position:relative}
.case .art .logo img{width:100%;height:100%;object-fit:contain;padding:5px}
.case .art .kind{position:relative;margin-left:.9rem;font-weight:600;font-size:.95rem;opacity:.92;align-self:flex-end;margin-bottom:1rem}
.case .body{padding:1.4rem 1.4rem 1.5rem;display:flex;flex-direction:column;flex:1}
.case h3{font-size:1.6rem;font-weight:800;line-height:1.1}
.case p{color:var(--muted);margin:.6rem 0 1rem}
.tags{display:flex;flex-wrap:wrap;gap:.4rem;list-style:none;padding:0;margin:0 0 1.25rem}
.tags li{background:var(--chip);border-radius:6px;padding:.2rem .6rem;font-size:.84rem;font-weight:500}
.links{margin-top:auto;display:flex;flex-wrap:wrap;gap:.4rem 1.25rem}
.links a{font-weight:700;text-decoration:none;border-bottom:2px solid var(--teal);padding-bottom:1px}
.links a:hover{color:var(--teal)}
.links span{color:var(--muted);font-weight:600;font-size:.95rem}

.case.wide{grid-column:1 / -1;flex-direction:row}
.case .art.lux{height:auto;min-height:220px;flex:0 0 46%;background:#EFE9E4;display:grid;place-items:center;padding:2rem}
.case .art.lux img{max-width:320px;width:80%;height:auto}
.kindline{color:var(--teal);font-weight:600;font-size:.92rem;margin-bottom:.35rem}
.case.wide .body{justify-content:center}
.eve-logo{width:84px;height:84px;border-radius:50%;margin-bottom:1.25rem;box-shadow:0 0 0 4px rgba(233,169,77,.18)}
.case .art{height:190px}
.case .art .logo:has(img){width:6rem;height:6rem;border-radius:18px;box-shadow:0 12px 30px -12px rgba(0,0,0,.45)}
.case .art .logo.wide:has(img){width:9rem}
.case .art .logo img{padding:8px}
.case .art .logo.ks:has(img){width:13rem;height:3.1rem;border-radius:10px;background:#000}
.case .art .logo.ks img{padding:0;object-fit:cover;background:#000}
/* compact list */
.list{list-style:none;margin:0;padding:0;background:var(--card);border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden}
.item{display:grid;grid-template-columns:3rem 15rem minmax(0,1fr) 12rem;gap:1.25rem;align-items:center;padding:1.2rem 1.4rem;border-top:1px solid var(--line);transition:background .2s}
.item:first-child{border-top:0}
.item:hover{background:var(--chip)}
.item .logo{--c:#0C8E79;width:3rem;height:3rem;border-radius:12px;background:var(--c);color:#fff;display:grid;place-items:center;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:.95rem;letter-spacing:-.03em;overflow:hidden}
.item .logo img{width:100%;height:100%;object-fit:contain;background:#fff;padding:4px}
.item h3{font-size:1.2rem;font-weight:700;line-height:1.2}
.item .kind{color:var(--teal);font-weight:600;font-size:.9rem}
.item p{margin:0;color:var(--muted);font-size:.98rem}
.item .tech{font-size:.85rem;color:var(--muted);opacity:.85;margin-top:.25rem}
.item .links{margin-top:0;justify-content:flex-end;text-align:right;flex-direction:column;align-items:flex-end;gap:.3rem}
[hidden]{display:none!important}
.empty{color:var(--muted);padding:1rem 0}

/* process */
.steps{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));counter-reset:s;border-top:2px solid var(--ink)}
.steps li{padding:1.5rem 1.5rem 0 0;counter-increment:s}
.steps li::before{content:counter(s);display:grid;place-items:center;width:2.2rem;height:2.2rem;border-radius:50%;background:var(--ink);color:var(--paper);font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;margin-bottom:1rem}
.steps h3{font-size:1.3rem;font-weight:700}
.steps p{color:var(--muted);margin:.4rem 0 0;font-size:.98rem}

/* clients */
.clients{margin-top:clamp(4rem,9vw,7rem);border-radius:var(--r-lg);background:var(--chip);padding:clamp(1.75rem,4vw,3rem);display:grid;grid-template-columns:.8fr 2fr;gap:2rem;align-items:center}
.clients h2{font-size:clamp(1.5rem,3vw,2rem);font-weight:800;line-height:1.1}
.clients ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:.6rem}
.clients li{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:.6rem 1.15rem;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:600;font-size:1.02rem;line-height:1.25}

/* contact */
.contact{background:var(--pine);color:var(--on-pine);margin-top:clamp(4rem,9vw,7rem);position:relative;overflow:hidden}
.contact::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 1px 1px,rgba(159,217,204,.14) 1px,transparent 1.5px) 0 0/26px 26px;mask-image:linear-gradient(0deg,#000,transparent);-webkit-mask-image:linear-gradient(0deg,#000,transparent)}
.contact > .wrap{position:relative;padding-top:clamp(4rem,9vw,7rem);padding-bottom:clamp(3rem,6vw,5rem);display:grid;grid-template-columns:1.4fr 1fr;gap:2rem;align-items:end}
.contact h2{font-size:clamp(2.4rem,6vw,4.6rem);line-height:.98;font-weight:800;letter-spacing:-.045em}
.contact p{color:var(--on-pine-muted);max-width:44ch;margin:0 0 1.5rem}
footer{position:relative;border-top:1px solid rgba(159,217,204,.14)}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:1rem;padding-top:1.4rem;padding-bottom:1.8rem;color:var(--on-pine-muted);font-size:.92rem;grid-template-columns:none}

@media (max-width:980px){
  .hero > .wrap,.feature,.contact > .wrap,.clients{grid-template-columns:1fr}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:1rem}
  .item{grid-template-columns:3rem minmax(0,1fr) auto}
  .item .links{grid-column:3;grid-row:1}
  .item > div:nth-child(3){grid-column:2 / -1}
  .nav ul{display:none}
}
@media (max-width:640px){
  .case.wide{flex-direction:column}
  .case .art.lux{min-height:170px;flex:none}
  .cases{grid-template-columns:1fr}
  .head{grid-template-columns:1fr}
  .item{grid-template-columns:3rem minmax(0,1fr)}
  .item .links{grid-column:2;grid-row:auto;align-items:flex-start;text-align:left}
  .steps{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ============ creative layer ============ */
::selection{background:var(--mint);color:var(--pine)}

/* nav scroll progress */
.nav::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,var(--mint),#fff);transform:scaleX(var(--p,0));transform-origin:left}

/* hero atmosphere */
.hero > .wrap{z-index:1}
.hero::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.07;mix-blend-mode:overlay;pointer-events:none}
.decor{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.aurora{position:absolute;border-radius:50%;filter:blur(90px);opacity:.28;animation:drift 18s ease-in-out infinite alternate}
.a1{width:520px;height:520px;background:var(--mint);top:-220px;right:-120px}
.a2{width:460px;height:460px;background:#0C8E79;bottom:-260px;left:-140px;animation-duration:24s;animation-direction:alternate-reverse}
.glow{position:absolute;inset:0;background:radial-gradient(520px circle at var(--mx,72%) var(--my,30%),rgba(95,224,197,.13),transparent 45%);transition:background .1s}
.ring{position:absolute;border-radius:50%;border:1px dashed rgba(159,217,204,.22);animation:spin 80s linear infinite}
.r1{width:640px;height:640px;top:-260px;right:-220px}
.r2{width:380px;height:380px;top:-130px;right:-90px;border-style:solid;border-color:rgba(159,217,204,.1);animation-direction:reverse;animation-duration:60s}
.dia{position:absolute;width:12px;height:54px;background:var(--lime);border-radius:2px;left:56%;top:16%;transform:skewX(-22deg);box-shadow:0 0 28px rgba(202,236,106,.6);animation:float 6s ease-in-out infinite reverse}
@keyframes drift{to{transform:translate(-80px,60px) scale(1.15)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes float{0%,100%{translate:0 0}50%{translate:0 -18px}}
@keyframes marquee{to{transform:translateX(-50%)}}

/* headline reveal and underline */
.hero h1 .ln{display:block}
.hero h1 .ln > span{display:inline-block;animation:lineIn 1s var(--ease) both}
.hero h1 .l2 > span{animation-delay:.18s}
.hello{animation:lineIn .8s var(--ease) both}
.hero .lede{animation:lineIn 1s var(--ease) .32s both}
.hero .actions{animation:lineIn 1s var(--ease) .44s both}
@keyframes lineIn{from{opacity:0;transform:translateY(40%);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
.hero h1 .u{position:relative;display:inline-block;color:var(--mint)}
.hero h1 .u svg{position:absolute;left:0;bottom:-.14em;width:100%;height:.24em;overflow:visible}
.hero h1 .u path{fill:none;stroke:var(--mint);stroke-width:3.5;stroke-linecap:round;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.1s var(--ease) 1s forwards}
@keyframes draw{to{stroke-dashoffset:0}}

/* buttons */
.b{position:relative;overflow:hidden;isolation:isolate;transition:background .2s,color .2s,border-color .2s,translate .35s var(--ease)}
.b.solid::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);translate:-120% 0;transition:translate .7s var(--ease)}
.b.solid:hover::after{translate:120% 0}

/* section heads */
.eyebrow{display:flex;align-items:center;gap:.7rem;margin:0 0 .9rem;color:var(--teal);font-weight:600;font-size:.95rem}
.eyebrow b{font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:.85rem;border:1.5px solid currentColor;border-radius:999px;padding:.1rem .55rem}
mark{background:linear-gradient(var(--hl),var(--hl)) 0 88%/0% 38% no-repeat;color:inherit;padding:0 .08em;transition:background-size 1.1s var(--ease) .35s}
.in mark,html:not(.js) mark,.contact mark{background-size:100% 38%}
.contact mark{--hl:rgba(95,224,197,.3)}

/* scroll reveal (only when JS runs and motion is allowed) */
.js [data-r]{opacity:0;translate:0 32px;transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s)}
.js [data-r].in{opacity:1;translate:none}
.js .case[data-r]{transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),transform .35s var(--ease),box-shadow .35s}
.js .item[data-r]{transition:opacity .9s var(--ease) var(--d,0s),translate .9s var(--ease) var(--d,0s),background .2s}

/* project cards */
.case{position:relative;transform-style:preserve-3d;will-change:transform}
.case::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;opacity:0;transition:opacity .3s;background:radial-gradient(360px circle at var(--mx,50%) var(--my,50%),rgba(95,224,197,.16),transparent 55%)}
.case:hover::after{opacity:1}
.case .art::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.12;mix-blend-mode:overlay;pointer-events:none}
.case .art::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.14) 50%,transparent 60%);translate:-100% 0;transition:translate .9s var(--ease);pointer-events:none}
.case:hover .art::after{translate:100% 0}
.case .art .mark{transition:transform .6s var(--ease)}
.case:hover .art .mark{transform:translate(-10px,8px) rotate(-4deg)}
.case .art .logo{transition:transform .5s var(--ease)}
.case:hover .art .logo{transform:translateY(-4px) scale(1.04)}

/* compact list */
.item{position:relative}
.item::before{content:"";position:absolute;left:0;top:14%;bottom:14%;width:3px;border-radius:0 3px 3px 0;background:var(--teal);transform:scaleY(0);transition:transform .35s var(--ease)}
.item:hover::before{transform:scaleY(1)}
.item .logo{transition:transform .4s var(--ease)}
.item:hover .logo{transform:rotate(-6deg) scale(1.06)}

/* featured */
.feature{position:relative}
.feature::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.05;mix-blend-mode:overlay;pointer-events:none}
.menu{transition:transform .5s var(--ease)}

/* process: line draws in */
.steps{position:relative;border-top:0}
.steps::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--ink);transform-origin:left;transform:scaleX(1)}
.js .steps:not(.in)::before{transform:scaleX(0)}
.steps::before{transition:transform 1.4s var(--ease)}
.steps li::before{transition:background .3s,color .3s,transform .4s var(--ease)}
.steps li:hover::before{background:var(--teal);color:#fff;transform:rotate(-12deg) scale(1.1)}
.clients li{transition:background .25s,color .25s}
.clients li:hover{border-color:var(--teal);color:var(--teal)}

/* contact band */
.contact::after{content:"";position:absolute;inset:0;background:var(--noise);opacity:.06;mix-blend-mode:overlay;pointer-events:none}
.band{position:relative;overflow:hidden;border-bottom:1px solid rgba(159,217,204,.14);padding:1.2rem 0}
.band .track{display:flex;width:max-content;animation:marquee 30s linear infinite}
.band span{display:flex;align-items:center;flex:none;font-family:"Bricolage Grotesque",system-ui,sans-serif;font-weight:800;font-size:clamp(2.6rem,8vw,6rem);line-height:1;letter-spacing:-.04em;color:transparent;-webkit-text-stroke:1.5px rgba(159,217,204,.45);white-space:nowrap;padding-right:2rem}
.band i{display:inline-block;width:.16em;height:.78em;background:var(--lime);transform:skewX(-20deg);margin:0 .6em}

@media (max-width:640px){.r1{width:420px;height:420px;right:-240px}}

@media (prefers-reduced-motion:reduce){
  .aurora,.ring,.dia,.ribbon .track,.band .track,.hero h1 .ln > span,.hello,.hero .lede,.hero .actions{animation:none!important}
  .hero h1 .u path{animation:none;stroke-dashoffset:0}
  .js [data-r]{opacity:1;translate:none}
  .js .steps:not(.in)::before{transform:none}
  mark{background-size:100% 38%}
  .ribbon .track{flex-wrap:wrap}.ribbon ul[aria-hidden]{display:none}
}
.nav .hire{transition:background .2s,translate .35s var(--ease)}

/* hero code vibe */
.hello,.live .bar,.live h2,.live .code,.live .d,.live .k,.live .prompt,.tok,.gutter,.ribbon ul{font-family:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace}
.hello{font-size:.95rem;font-weight:500;letter-spacing:-.01em}
.hello .cm{color:var(--on-pine-muted);opacity:.7}
.hello .typing::after{content:"";display:inline-block;width:.55em;height:1.1em;vertical-align:-.2em;margin-left:2px;background:var(--mint);animation:blink 1s step-end infinite}
.hero h1 .caret{display:inline-block;width:.075em;height:.78em;margin-left:.08em;vertical-align:-.04em;background:var(--mint);border-radius:2px;animation:blink 1.05s step-end infinite}
@keyframes blink{50%{opacity:0}}

.gutter{position:absolute;top:1.6rem;left:max(12px,calc(50% - 680px));font-size:.78rem;line-height:1.9;color:var(--mint-dim);opacity:.16;white-space:pre;text-align:right;display:none}
.gutter::before{content:"1\A 2\A 3\A 4\A 5\A 6\A 7\A 8\A 9\A 10\A 11\A 12\A 13\A 14\A 15\A 16\A 17\A 18\A 19\A 20\A 21\A 22\A 23\A 24\A 25\A 26\A 27\A 28\A 29\A 30\A 31\A 32\A 33\A 34\A 35\A 36"}
@media (min-width:1300px){.gutter{display:block}}
.tok{position:absolute;color:var(--mint);font-weight:700;opacity:.14;animation:float 8s ease-in-out infinite;white-space:nowrap}
.t1{font-size:3.2rem;right:31%;top:6%;opacity:.2}
.t2{font-size:2.2rem;left:44%;bottom:22%;animation-duration:10s}
.t3{font-size:1.8rem;right:4%;bottom:18%;animation-delay:-3s}
.t4{font-size:1.5rem;left:38%;top:9%;animation-duration:11s;animation-direction:reverse}
@media (max-width:980px){.t2,.t4{display:none}.t1{right:6%;top:3%;font-size:2.4rem}}

/* live panel as a terminal */
.live{background:rgba(3,20,18,.55);border-color:rgba(159,217,204,.2);padding:0 0 .9rem;overflow:hidden;box-shadow:0 30px 60px -30px rgba(0,0,0,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.live .bar{display:flex;align-items:center;gap:.4rem;padding:.7rem 1rem;background:rgba(159,217,204,.07);border-bottom:1px solid rgba(159,217,204,.14);font-size:.75rem;color:var(--on-pine-muted)}
.live .bar i{width:.65rem;height:.65rem;border-radius:50%;background:#FF5F57}
.live .bar i:nth-child(2){background:#FEBC2E}
.live .bar i:nth-child(3){background:#28C840}
.live .bar span{flex:1;text-align:center;margin-right:2.2rem;opacity:.8}
.live h2{font-size:.88rem;font-weight:500;color:var(--on-pine);padding:1rem 1.3rem .3rem;margin:0;align-items:baseline}
.live h2 b{font-weight:500;font-size:.8rem}
.live .pr{color:var(--lime);margin-right:.2rem}
.live ul{padding:0 1.1rem}
.live li a{gap:.7rem;padding:.5rem .2rem;font-size:.86rem}
.live .code{color:var(--lime);font-size:.78rem;font-weight:700;opacity:.9}
.live .k{font-size:.76rem;opacity:.8}
.live .prompt{margin:.4rem 1.3rem 0;font-size:.88rem;display:flex;align-items:center;gap:.5rem}
.live .cur{display:inline-block;width:.55em;height:1.1em;background:var(--mint);animation:blink 1s step-end infinite}
.ribbon ul{font-size:.9rem;font-weight:500}

@media (prefers-reduced-motion:reduce){.tok,.caret,.live .cur,.hello .typing::after{animation:none!important}}
.gutter{bottom:4.5rem;overflow:hidden}
.live .k{white-space:nowrap}
@media (max-width:980px){.dia{display:none}}

/* contact links and skip link */
.contact .acts{display:flex;flex-wrap:wrap;gap:.75rem}
.contact .b.line{border:1.5px solid rgba(234,246,242,.3);color:var(--on-pine)}
.contact .alt{margin:1.1rem 0 0;font-size:.95rem}
.contact .alt a{color:var(--on-pine);text-decoration-color:var(--mint);text-underline-offset:3px}
footer .social{display:flex;gap:1.2rem}
footer .social a{text-decoration:none;color:var(--on-pine-muted)}
footer .social a:hover{color:var(--mint)}
.skip{position:absolute;left:1rem;top:-3rem;z-index:50;background:var(--mint);color:var(--pine);font-weight:700;padding:.6rem 1rem;border-radius:999px;text-decoration:none}
.skip:focus{top:1rem}