/* SERVICES overview + SERVICE pages. Dark space, one green, solid surfaces, Inter Tight throughout. */
html.svx.svx{--bg:#050706;--fg:#EEF1EF;--fg2:#A3ABA6;--mute:#6F7672;--line:rgba(255,255,255,.11);--g:#16C47F;background:#050706}
html.svx body{background:#050706}
#sky{position:fixed;inset:0;width:100vw;height:100vh;z-index:0;pointer-events:none}
.svx-main{position:relative;z-index:2}
.svx-main a{color:inherit;text-decoration:none}
.wrap{max-width:1360px;margin:0 auto;padding:0 2.5rem;position:relative}
.two{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:3rem 5rem;align-items:start}
.svx-main h2{font-weight:500;font-size:clamp(2rem,3.4vw,3.3rem);line-height:1.02;letter-spacing:-.045em}
.svx-main h3{font-weight:500;letter-spacing:-.025em}
.svx-main em{font-style:normal;color:var(--g)}
.eyb{display:flex;align-items:center;gap:.75rem;font-size:.92rem;font-weight:500;color:var(--g);letter-spacing:-.005em;margin-bottom:1.5rem}

.eyb span{color:var(--mute)}
.mutep{color:var(--fg2);font-size:1.08rem;line-height:1.55;max-width:32rem;margin-top:1.4rem}
.sx-big{font-size:clamp(1.35rem,2.1vw,2rem);line-height:1.28;letter-spacing:-.025em;color:var(--fg)}

/* buttons: solid, no glass */
.btn{display:inline-flex;align-items:center;gap:.9rem;padding:.95rem 1.15rem .95rem 1.45rem;border-radius:99px;font-weight:500;font-size:1rem;letter-spacing:-.01em;transition:background .5s var(--e),color .5s var(--e),border-color .5s}
.btn i{font-style:normal;display:grid;place-items:center;width:2rem;height:2rem;border-radius:50%;transition:transform .6s var(--e)}
.btn:hover i{transform:translateX(4px)}
.btn-g{background:var(--g);color:#04110b}.btn-g i{background:#04110b;color:var(--g)}
.btn-g:hover{background:#EEF1EF}
.btn-o{border:1px solid rgba(255,255,255,.22);color:var(--fg);padding-right:1.45rem}.btn-o i{width:auto;height:auto}
.btn-o:hover{border-color:var(--g);color:var(--g)}
.sx-btns{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2.4rem}
.tags{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 1.6rem;margin-top:2rem;padding-top:1.3rem;border-top:1px solid var(--line);font-size:.95rem;color:var(--fg)}
.tags li{display:flex;align-items:center;gap:.55rem}
.tags li:before{content:'';width:5px;height:5px;border-radius:50%;background:var(--g)}

/* reveals (only hidden when JS runs and motion is allowed) */
html.svx-anim .rvl{opacity:0;transform:translateY(26px);transition:opacity 1.1s var(--e),transform 1.3s var(--e)}
html.svx-anim .rvl.in{opacity:1;transform:none}
html.svx-anim li.rvl:nth-child(2){transition-delay:.06s}html.svx-anim li.rvl:nth-child(3){transition-delay:.12s}html.svx-anim li.rvl:nth-child(4){transition-delay:.18s}

/* ---------- overview ---------- */
.s-hero{min-height:100vh;min-height:100svh;display:flex;align-items:flex-end;padding:9rem 0 4.5rem}
.s-hero .wrap{width:100%}
.s-h1{font-weight:500;font-size:clamp(2.8rem,5.4vw,5.4rem);line-height:.98;letter-spacing:-.055em;max-width:11.5em}
.s-lede{color:var(--fg2);font-size:1.2rem;line-height:1.5;max-width:30rem;margin-top:1.6rem}
.s-jump{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));max-width:46rem;margin-top:3.4rem;border-top:1px solid var(--line)}
.s-jump li{border-bottom:1px solid var(--line)}
.s-jump a{display:flex;align-items:baseline;gap:.8rem;padding:1rem 1rem 1rem 0;font-size:1rem;color:var(--fg);transition:color .4s,padding .6s var(--e)}
.s-jump a:hover{color:var(--g);padding-left:.4rem}

.s-who{padding:18vh 0 12vh}
.s-who .eyb{margin-top:.6rem}

.s-ch{position:relative;padding-bottom:6vh}
.ch{min-height:100vh;display:flex;align-items:center;padding:8vh 0}
.ch-t{max-width:35rem;margin-left:max(2.5rem,calc((100vw - 1360px)/2 + 2.5rem));transition:opacity .8s var(--e)}
html.svx-anim .ch:not(.on) .ch-t{opacity:.28}
.ch-n{display:flex;align-items:center;gap:1rem;font-size:.92rem;font-weight:500;margin-bottom:1.4rem}
.ch-n span{color:var(--fg2)}
.ch-n span{order:2}
.ch h2{font-size:clamp(2.1rem,3.6vw,3.6rem)}
.ch h2 a{transition:color .4s}
.ch h2 a:hover{color:var(--g)}
.ch-d{color:var(--fg2);font-size:1.12rem;line-height:1.55;margin-top:1.4rem;max-width:32rem}
.ch-f{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-top:2.6rem;flex-wrap:wrap}
.ch-stat{display:flex;align-items:flex-end;gap:1rem}
.ch-stat b{font-weight:500;font-size:clamp(2.8rem,4.4vw,4.2rem);line-height:.85;letter-spacing:-.06em;color:var(--g)}
.ch-stat span{color:var(--fg2);font-size:.9rem;line-height:1.35;max-width:11rem}
.ch-go{display:inline-flex;align-items:center;gap:.7rem;border:1px solid rgba(255,255,255,.22);border-radius:99px;padding:.85rem 1.3rem;font-size:.95rem;font-weight:500;transition:background .5s var(--e),color .5s,border-color .5s}
.ch-go i{font-style:normal;transition:transform .6s var(--e)}
.ch-go:hover{background:var(--g);border-color:var(--g);color:#04110b}.ch-go:hover i{transform:translateX(4px)}

.stage-cap{position:fixed;right:2.5rem;top:7.2rem;z-index:3;display:flex;flex-direction:column;align-items:flex-end;gap:.7rem;opacity:0;transform:translateY(10px);transition:opacity .6s var(--e),transform .8s var(--e);pointer-events:none}
.stage-cap.show{opacity:1;transform:none}
.sc-n{font-size:.9rem;color:var(--mute);font-variant-numeric:tabular-nums}.sc-n b{color:var(--fg);font-weight:500}
.sc-bars{display:flex;gap:4px}.sc-bars i{width:22px;height:2px;background:rgba(255,255,255,.16);transition:background .6s}.sc-bars i.on{background:var(--g)}
.sc-t{font-size:1.15rem;font-weight:500;letter-spacing:-.02em}

.s-mission{padding:22vh 0}
.mission{font-size:clamp(1.8rem,3.3vw,3.2rem);line-height:1.12;letter-spacing:-.04em;font-weight:500;max-width:22em}
.mission span{color:rgba(238,241,239,.16);transition:color .6s var(--e)}
.mission span.lit{color:var(--fg)}

.s-why{padding:6vh 0 14vh}
.why{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 3rem}
.why li{border-top:1px solid var(--line);padding:1.6rem 0 2.4rem}
.why .k,.ben .k{display:block;font-size:.85rem;font-weight:500;color:var(--g);margin-bottom:1rem;font-variant-numeric:tabular-nums}
.why h3{font-size:1.4rem;margin-bottom:.6rem}
.why p{color:var(--fg2);line-height:1.5}

.sx-cta{padding:18vh 0 16vh}
.sx-cta h2{font-size:clamp(2.6rem,5vw,5rem);line-height:.98;letter-spacing:-.055em}

/* ---------- single service ---------- */
.sx-hero{min-height:100vh;min-height:100svh;display:flex;align-items:stretch;padding:7.5rem 0 6.5rem}
.sx-hero .wrap{width:100%;display:flex;flex-direction:column}
.sx-back{align-self:flex-start;display:inline-flex;align-items:center;gap:.6rem;color:var(--fg2);font-size:.95rem;transition:color .4s}
.sx-back i{font-style:normal;transition:transform .6s var(--e)}
.sx-back:hover{color:var(--fg)}.sx-back:hover i{transform:translateX(-4px)}
.sx-hero-in{margin-top:auto;max-width:48rem}
.sx-h1{font-weight:500;font-size:clamp(2.5rem,4.6vw,4.7rem);line-height:1;letter-spacing:-.05em}
.sx-h1 span{display:block}.sx-h1 .l2{color:var(--g)}
.sx-lede{color:var(--fg2);font-size:1.2rem;line-height:1.5;max-width:31rem;margin-top:1.6rem}
.sx-stat{position:absolute;right:2.5rem;bottom:0;display:flex;align-items:flex-end;gap:1rem;text-align:left}
.sx-stat b{font-weight:500;font-size:clamp(3rem,5vw,5rem);line-height:.82;letter-spacing:-.06em;color:var(--g)}
.sx-stat span{color:var(--fg2);font-size:.92rem;line-height:1.35;max-width:12rem}

.sx-over{padding:16vh 0 12vh}
.sx-ben{padding:8vh 0 12vh}
.sx-ben .head{margin-bottom:3.5rem}
.ben{list-style:none;border-top:1px solid var(--line)}
.ben li{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);gap:2rem;align-items:baseline;padding:1.8rem 0;border-bottom:1px solid var(--line);position:relative}
.ben li:after{content:'';position:absolute;left:0;bottom:-1px;height:1px;width:100%;background:var(--g);transform:scaleX(0);transform-origin:left;transition:transform .9s var(--e)}
.ben li:hover:after{transform:scaleX(1)}
.ben .k{margin:0}
.ben h3{font-size:clamp(1.25rem,1.8vw,1.6rem)}
.ben p{color:var(--fg2);font-size:1.02rem;line-height:1.55;max-width:34rem}

.sx-proc{padding:12vh 0}
.sx-proc .stick{position:sticky;top:8rem}
.steps{list-style:none;position:relative}
.rail{position:absolute;left:1.3rem;top:1.3rem;bottom:1.3rem;width:1px;background:var(--line)}
.rail b{position:absolute;inset:0;background:var(--g);transform:scaleY(0);transform-origin:top}
.steps li{display:grid;grid-template-columns:2.6rem minmax(0,1fr);gap:1.6rem;padding:0 0 3.2rem;position:relative}
.steps li:last-child{padding-bottom:0}
.dotn{width:.9rem;height:.9rem;margin:.75rem auto 0;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:500;background:#0b0f0d;border:1px solid rgba(255,255,255,.18);color:var(--fg2);position:relative;z-index:1;transition:background .6s var(--e),color .6s,border-color .6s;font-variant-numeric:tabular-nums}
.steps li.lit .dotn{background:var(--g);border-color:var(--g);color:#04110b}
.steps h3{font-size:clamp(1.3rem,1.9vw,1.65rem);margin:.35rem 0 .6rem}
.steps p{color:var(--fg2);line-height:1.55;max-width:32rem}

.sx-inc{padding:12vh 0}
.sx-inc .btn{margin-top:2.2rem}
.inc{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:0 2.5rem;border-top:1px solid var(--line)}
.inc li{display:flex;gap:.9rem;align-items:flex-start;padding:1.1rem 0;border-bottom:1px solid var(--line);font-size:1.02rem;line-height:1.4}
.inc svg{flex:none;width:1.15rem;height:1.15rem;margin-top:.1rem;fill:none;stroke:var(--g);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.sx-faq{padding:12vh 0}
.faq{border-top:1px solid var(--line)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:1.5rem;padding:1.5rem 0;font-size:clamp(1.08rem,1.4vw,1.25rem);font-weight:500;letter-spacing:-.015em;cursor:none;transition:color .4s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--g)}
.faq summary i{flex:none;position:relative;width:2rem;height:2rem;border-radius:50%;border:1px solid rgba(255,255,255,.2);transition:transform .6s var(--e),background .4s,border-color .4s}
.faq summary i:before,.faq summary i:after{content:'';position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:currentColor;transform:translate(-50%,-50%)}
.faq summary i:after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] summary i{transform:rotate(45deg);background:var(--g);border-color:var(--g);color:#04110b}
.faq .a p{color:var(--fg2);line-height:1.6;max-width:40rem;padding:0 3rem 1.7rem 0}
.faq details[open] .a{animation:faq .7s var(--e)}
@keyframes faq{from{opacity:0;transform:translateY(-6px)}}

.sx-next{padding:10vh 0 6vh}
.nx{display:grid;grid-template-columns:1fr auto;align-items:end;gap:1rem 2rem;padding:3.4rem 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.nx .eyb{grid-column:1/-1;margin:0}
.nx b{font-weight:500;font-size:clamp(2.2rem,4.6vw,4.6rem);line-height:1;letter-spacing:-.05em;transition:color .5s,transform .8s var(--e)}
.nx i{font-style:normal;font-size:clamp(2rem,3.6vw,3.4rem);line-height:1;transition:transform .8s var(--e),color .5s}
.nx:hover b{color:var(--g);transform:translateX(.6rem)}.nx:hover i{color:var(--g);transform:translateX(.6rem)}
.others{list-style:none;display:flex;flex-wrap:wrap;gap:.6rem 2rem;margin-top:1.8rem;font-size:.98rem}
.others a{color:var(--fg2);transition:color .4s}.others a:hover{color:var(--fg)}
.others .on a{color:var(--g)}

@media (max-width:900px){
  .wrap{padding:0 1.25rem}
  .two{grid-template-columns:1fr;gap:1.5rem}
  .s-hero{padding:8rem 0 3rem}
  .s-h1{font-size:clamp(2.5rem,11vw,3.4rem)}
  .s-lede,.sx-lede{font-size:1.06rem}
  .s-jump{grid-template-columns:1fr 1fr;margin-top:2.4rem}
  .s-jump a{font-size:.95rem;padding:.85rem .5rem .85rem 0}
  .s-who{padding:10vh 0 4vh}
  .ch{min-height:0;padding:9vh 0}
  .ch-t{margin:0 1.25rem}
  html.svx-anim .ch:not(.on) .ch-t{opacity:.45}
  .ch h2{font-size:clamp(1.9rem,8.4vw,2.6rem)}
  .ch-d{font-size:1.02rem}
  .ch-f{flex-direction:column;align-items:flex-start;gap:1.6rem}
  .stage-cap{display:none}
  .s-mission{padding:12vh 0}
  .why{grid-template-columns:1fr}
  .sx-cta{padding:12vh 0}
  .sx-cta h2{font-size:clamp(2.3rem,10vw,3.2rem)}
  .sx-hero{padding:6.2rem 0 2.5rem}
  .sx-hero-in{margin-top:auto}
  .sx-h1{font-size:clamp(2.2rem,9.4vw,3rem)}
  .sx-stat{position:static;margin-top:2.6rem}
  .sx-over{padding:10vh 0 6vh}
  .sx-ben,.sx-proc,.sx-inc,.sx-faq{padding:8vh 0}
  .ben li{grid-template-columns:minmax(0,1fr);gap:.4rem 1rem;padding:1.4rem 0}
  .ben li p{grid-column:1}
  .sx-proc .stick{position:static}
  .inc{grid-template-columns:1fr}
  .faq .a p{padding-right:0}
  .nx{padding:2.4rem 0}
}
@media (prefers-reduced-motion:reduce){
  html.svx-anim .rvl{opacity:1;transform:none;transition:none}
  .faq details[open] .a{animation:none}
  .mission span{transition:none}
}