/* RIPEES motion layer — enhances the existing site; everything is added by motion.js, so no-JS visitors see the original page. */
:root{--glow:#d3f36a;--deep:#0d1712;--moss:#20382c;--ease:cubic-bezier(.22,1,.36,1)}

/* 1 · Header condenses into a floating pill after the first scroll */
.nav-spacer{display:none}
header.is-floating{position:fixed;z-index:50;top:14px;left:50%;width:min(860px,calc(100% - 28px));max-width:none;margin:0;min-height:0;flex-wrap:nowrap;gap:16px;padding:8px 10px 8px 20px;border:1px solid rgba(32,56,44,.14);border-radius:999px;background:rgba(245,245,238,.78);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);box-shadow:0 18px 50px -18px rgba(32,56,44,.45),0 0 0 6px rgba(211,243,106,.12);transform:translateX(-50%);animation:pill-in .55s var(--ease)}
header.is-floating nav{order:0;width:auto;padding:0;border:0;overflow:visible;gap:22px}
header.is-floating button{margin-left:0}
header.is-floating .brand-lockup{height:30px;width:auto}
header.is-floating button{border-radius:999px;background:var(--moss);color:#fff}
header.is-floating button:hover{background:#2d4a3a}
.nav-spacer.on{display:block}
@keyframes pill-in{from{opacity:0;transform:translate(-50%,-26px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}

/* 2 · Glow frame: the About section grows into an inset dark panel with a lit edge */
.stage{position:relative;padding:clamp(18px,4vw,56px) clamp(10px,3vw,40px);margin-top:40px;background:radial-gradient(60% 55% at 50% 0%,#2f5a3e 0%,transparent 70%),radial-gradient(50% 50% at 90% 100%,rgba(211,243,106,.35) 0%,transparent 70%),#142a1e;overflow:hidden}
.glow-frame{position:relative;isolation:isolate;max-width:1180px;margin:0 auto;padding:clamp(54px,9vw,120px) clamp(24px,7vw,96px)!important;background:var(--deep);color:#fff;border-radius:calc(44px - 18px*var(--p,1));transform:scale(calc(.9 + .1*var(--p,1)));transform-origin:50% 60%;will-change:transform;min-height:min(78vh,640px);display:flex;flex-direction:column;justify-content:space-between;gap:48px}
.glow-frame::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,rgba(211,243,106,.95),rgba(211,243,106,.12) 38%,rgba(211,243,106,.12) 62%,rgba(211,243,106,.8));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);opacity:calc(.25 + .75*var(--p,1));pointer-events:none;z-index:-1}
.glow-frame::after{content:"";position:absolute;inset:-1px;border-radius:inherit;box-shadow:0 0 90px -10px rgba(211,243,106,calc(.32*var(--p,1)));pointer-events:none;z-index:-1}
.glow-frame>small{color:#9fb8a5}
.glow-frame h2{color:#fff}
.glow-frame p{font-size:clamp(20px,2.3vw,30px);line-height:1.45;letter-spacing:-.6px;max-width:30em}
.glow-frame .signature{color:#9fb8a5}
.glow-frame .w{color:#4d6455;transition:color .45s ease}
.glow-frame .w.lit{color:#f4f7ee}
.frame-chip{align-self:flex-end;display:flex;align-items:center;gap:16px;padding:10px 26px 10px 10px;border:1.5px solid rgba(211,243,106,.65);border-radius:26px;box-shadow:0 0 40px -8px rgba(211,243,106,.45),inset 0 0 22px -10px rgba(211,243,106,.5)}
.frame-chip svg{display:block;width:clamp(150px,22vw,250px);height:auto;filter:brightness(0) invert(1)}

/* 3 · Segmented pill with a sliding thumb; panel content swaps with a soft fade */
.seg{position:relative;display:inline-flex!important;flex-direction:row!important;gap:0;margin:0 0 20px!important;padding:5px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.seg button{position:relative;z-index:1;border:0!important;border-radius:999px!important;background:transparent!important;color:#c9d6c7!important;padding:10px 18px!important;font-size:12px;transition:color .3s}
.seg button[aria-pressed=true]{color:var(--moss)!important;border:0!important}
.seg button:hover{transform:none}
.seg .thumb{position:absolute;z-index:0;top:5px;bottom:5px;left:0;width:0;border-radius:999px;background:var(--glow);box-shadow:0 0 28px -4px rgba(211,243,106,.7);transition:transform .5s var(--ease),width .5s var(--ease)}
.app-col{align-self:center;display:flex;flex-direction:column;align-items:center;gap:0}
.app-col .app{width:100%}
.workspace{transition:opacity .18s ease,transform .18s ease,filter .18s ease}
.workspace.swap{opacity:0;transform:translateY(8px);filter:blur(3px)}

/* 4 · Column focus: the column you point at lights up, the rest recede */
.services.cols article{position:relative;transition:opacity .45s var(--ease)}
.services.cols article::before{content:"";position:absolute;inset:-14px -6px;z-index:-1;border-radius:18px;background:radial-gradient(90% 60% at 50% 105%,rgba(211,243,106,.55),transparent 70%),#fff;box-shadow:0 0 0 1px rgba(32,56,44,.14),0 30px 60px -28px rgba(32,56,44,.5);opacity:0;transform:translateY(10px) scale(.98);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.services.cols:is(:hover,:focus-within) article{opacity:.42}
.services.cols article:is(:hover,:focus-within){opacity:1}
.services.cols article:is(:hover,:focus-within)::before{opacity:1;transform:none}
.services.cols{isolation:isolate}

/* 5 · Fade-out collapse with a "See more" pill */
.fold{position:relative}
.fold>.fold-body{overflow:hidden;transition:max-height .7s var(--ease)}
.fold:not(.open)>.fold-body{-webkit-mask-image:linear-gradient(#000 55%,transparent);mask-image:linear-gradient(#000 55%,transparent)}
.fold-btn{display:flex!important;align-items:center;gap:8px;margin:18px auto 0;padding:11px 20px!important;border-radius:999px!important;background:transparent!important;color:var(--ink)!important;border:1px solid rgba(32,56,44,.35)!important;font-size:12px!important;box-shadow:0 0 0 0 rgba(211,243,106,0);transition:box-shadow .4s,border-color .3s}
.fold-btn:hover{border-color:var(--moss)!important;box-shadow:0 0 0 5px rgba(211,243,106,.4)}
.fold-btn i{font-style:normal;display:inline-block;transition:transform .5s var(--ease)}
.fold.open .fold-btn i{transform:rotate(180deg)}

@media (max-width:760px){
  header.is-floating nav{display:none}header.is-floating button{margin-left:auto}
  .seg{display:flex!important;width:100%}.seg button{flex:1;padding:10px 6px!important}
  .glow-frame{min-height:0}
}
@media (prefers-reduced-motion:reduce){
  header.is-floating{animation:none}
  .glow-frame{transform:none;border-radius:28px}
  .glow-frame .w{color:#f4f7ee;transition:none}
  .seg .thumb,.workspace,.fold>.fold-body,.services.cols article,.services.cols article::before{transition:none}
}
.services.cols article:is(:hover,:focus-within){border-right-color:transparent}