@import url('https://fonts.cdnfonts.com/css/now');

:root{
  --green:#16392d;
  --green-dark:#0b2119;
  --paper:#f6f3ec;
  --ink:#15211b;
  --muted:#667169;
  --line:rgba(21,33,27,.16);
  --white:#fff;
  --font:"Now","Now Alt",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
html,body{margin:0;min-height:100%}
body{
  font-family:var(--font);
  color:var(--ink);
  background:var(--paper);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none}

.slides{
  height:100vh;
  overflow-y:auto;
  overflow-x:hidden;
  scroll-snap-type:y mandatory;
  scroll-behavior:smooth;
}
.slide{
  position:relative;
  isolation:isolate;
  min-height:100vh;
  scroll-snap-align:start;
  display:flex;
  align-items:center;
  overflow:hidden;
  padding:94px clamp(24px,6vw,92px) 78px;
  border-bottom:1px solid var(--line);
}
.slide::before,
.slide::after{
  content:"";
  position:absolute;
  z-index:-1;
  pointer-events:none;
  border-radius:999px;
  filter:blur(2px);
}
.slide-inner{width:min(1180px,100%);margin:0 auto}

.project-badge{
  position:fixed;
  z-index:30;
  top:20px;
  left:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px 14px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:9px;
  background:var(--green);
  box-shadow:0 12px 36px rgba(11,33,25,.18);
  transform:translate(-50%,-18px) scale(.96);
  opacity:0;
  pointer-events:none;
  transition:opacity .28s ease, transform .45s cubic-bezier(.22,1,.36,1), box-shadow .25s ease;
}
.project-badge img{display:block;width:auto;height:27px}
.project-badge.is-visible{
  opacity:1;
  pointer-events:auto;
  transform:translate(-50%,0) scale(1);
}
.project-badge.is-visible:hover{
  transform:translate(-50%,-2px) scale(1.025);
  box-shadow:0 16px 44px rgba(11,33,25,.24);
}

.intro-slide{
  background:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.94),transparent 27%),
    radial-gradient(circle at 82% 72%,rgba(22,57,45,.13),transparent 30%),
    linear-gradient(135deg,#faf7f0 0%,#f2ebdf 46%,#e9e1d2 100%);
}
.intro-slide::before{
  width:36vw;
  height:36vw;
  min-width:300px;
  min-height:300px;
  top:-19vw;
  right:-8vw;
  background:radial-gradient(circle,rgba(22,57,45,.14) 0%,rgba(22,57,45,.03) 64%,transparent 70%);
  animation:floatOrb 9s ease-in-out infinite alternate;
}
.intro-slide::after{
  width:32vw;
  height:32vw;
  min-width:260px;
  min-height:260px;
  left:-13vw;
  bottom:-19vw;
  background:radial-gradient(circle,rgba(255,255,255,.9) 0%,rgba(255,255,255,.2) 66%,transparent 72%);
  animation:floatOrbReverse 12s ease-in-out infinite alternate;
}
.intro-inner{
  max-width:none;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:20px;
}
.hero-word{
  position:relative;
  margin:0;
  width:100%;
  display:flex;
  flex-wrap:nowrap;
  white-space:nowrap;
  justify-content:center;
  align-items:center;
  gap:0;
  perspective:1200px;
  font-family:var(--font);
  font-size:min(11.15vw,184px);
  line-height:.82;
  letter-spacing:-.086em;
  color:var(--green-dark);
}
.hero-word span{
  position:relative;
  display:inline-block;
  transform-origin:50% 70%;
  opacity:0;
  filter:blur(12px);
  text-shadow:0 0 0 rgba(11,33,25,0);
  animation:letterReveal 1s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay:var(--delay,0s);
  transition:
    transform .28s cubic-bezier(.22,1,.36,1),
    color .22s ease,
    text-shadow .25s ease,
    filter .25s ease;
}
.hero-word span::before{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  width:1.02em;
  height:1.02em;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.82),rgba(255,255,255,0) 67%);
  transform:translate(-50%,-50%) scale(.2);
  opacity:0;
  z-index:-1;
  transition:opacity .25s ease, transform .3s cubic-bezier(.22,1,.36,1);
}
.hero-word span:hover{
  z-index:2;
  color:#1c4a3a;
  transform:translateY(-10px) rotateX(10deg) rotateY(calc((var(--i) - 4) * 1deg)) scale(1.08);
  filter:blur(0);
  text-shadow:0 16px 28px rgba(11,33,25,.16),0 2px 0 rgba(255,255,255,.35);
}
.hero-word span:hover::before{
  opacity:1;
  transform:translate(-50%,-50%) scale(1.45);
}
@keyframes letterReveal{
  0%{opacity:0;filter:blur(12px);transform:translateY(54px) rotateX(-58deg) scale(.72)}
  58%{opacity:1;filter:blur(1px);transform:translateY(-7px) rotateX(7deg) scale(1.045)}
  100%{opacity:1;filter:blur(0);transform:translateY(0) rotateX(0) scale(1)}
}
@keyframes floatOrb{to{transform:translate(-36px,28px) scale(1.08)}}
@keyframes floatOrbReverse{to{transform:translate(48px,-20px) scale(.94)}}

.intro-subline{
  margin:14px 0 0;
  color:#334139;
  font-size:clamp(17px,1.65vw,23px);
  line-height:1.28;
  letter-spacing:-.02em;
  opacity:0;
  transform:translateY(12px);
  animation:fadeUp .65s .82s ease forwards;
}
.intro-scroll{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  margin-top:4px;
  padding:0 20px;
  border:1px solid rgba(11,33,25,.13);
  border-radius:999px;
  background:transparent;
  color:var(--green-dark);
  font-size:14px;
  font-weight:600;
  opacity:0;
  transform:translateY(12px);
  animation:fadeUp .65s 1s ease forwards;
  transition:transform .2s ease, background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.intro-scroll:hover{
  transform:translateY(-2px);
  background:transparent;
  border-color:rgba(11,33,25,.22);
  box-shadow:0 12px 30px rgba(11,33,25,.09);
}
@keyframes fadeUp{to{opacity:1;transform:translateY(0)}}

.service-slide::before{
  width:38vw;
  height:38vw;
  min-width:340px;
  min-height:340px;
  right:-13vw;
  top:-17vw;
  opacity:.85;
}
.service-slide::after{
  width:22vw;
  height:22vw;
  min-width:240px;
  min-height:240px;
  left:-9vw;
  bottom:-10vw;
  opacity:.62;
}
.slide-letterdock{
  background:
    linear-gradient(115deg,rgba(255,255,255,.88),rgba(255,255,255,.12) 42%,transparent 68%),
    linear-gradient(135deg,#eef3ec,#dbe7df 62%,#cadbd2);
}
.slide-letterdock::before{background:radial-gradient(circle,rgba(38,97,76,.18),transparent 66%)}
.slide-letterdock::after{background:radial-gradient(circle,rgba(255,255,255,.82),transparent 68%)}

.slide-impressfix{
  background:
    linear-gradient(130deg,rgba(255,255,255,.78),transparent 50%),
    linear-gradient(145deg,#f5eee3,#ead8c9 55%,#e0c8b6);
}
.slide-impressfix::before{background:radial-gradient(circle,rgba(160,104,72,.15),transparent 67%)}
.slide-impressfix::after{background:radial-gradient(circle,rgba(255,255,255,.75),transparent 68%)}

.slide-coordly{
  background:
    linear-gradient(125deg,rgba(255,255,255,.76),transparent 48%),
    linear-gradient(140deg,#eef0f3,#d9dde3 60%,#cbd2da);
}
.slide-coordly::before{background:radial-gradient(circle,rgba(63,84,116,.16),transparent 67%)}
.slide-coordly::after{background:radial-gradient(circle,rgba(255,255,255,.72),transparent 68%)}

.slide-cleanom{
  background:
    linear-gradient(125deg,rgba(255,255,255,.72),transparent 48%),
    linear-gradient(140deg,#e9efe9,#d2ded5 58%,#c1d2c5);
}
.slide-cleanom::before{background:radial-gradient(circle,rgba(45,103,72,.17),transparent 67%)}
.slide-cleanom::after{background:radial-gradient(circle,rgba(255,255,255,.76),transparent 68%)}

.slide-mythenbox{
  background:
    linear-gradient(125deg,rgba(255,255,255,.64),transparent 52%),
    linear-gradient(140deg,#e9e5ec,#d8cfdc 58%,#c8bacd);
}
.slide-mythenbox::before{background:radial-gradient(circle,rgba(77,50,92,.15),transparent 67%)}
.slide-mythenbox::after{background:radial-gradient(circle,rgba(255,255,255,.69),transparent 68%)}

.slide-voicejoker{
  background:
    linear-gradient(125deg,rgba(255,255,255,.73),transparent 50%),
    linear-gradient(140deg,#f2ebe1,#dfd0bb 58%,#cfb997);
}
.slide-voicejoker::before{background:radial-gradient(circle,rgba(126,91,45,.15),transparent 67%)}
.slide-voicejoker::after{background:radial-gradient(circle,rgba(255,255,255,.72),transparent 68%)}

h2{
  font-family:var(--font);
  color:var(--green-dark);
  font-weight:600;
  letter-spacing:-.045em;
  margin:0;
  font-size:clamp(60px,9.2vw,132px);
  line-height:.9;
}
.service-layout{
  display:block;
  width:min(920px,100%);
  margin:0;
}
.service-copy{
  position:relative;
  z-index:2;
}
.service-copy p{
  max-width:580px;
  margin:24px 0 0;
  color:#334139;
  font-size:clamp(18px,1.8vw,24px);
  line-height:1.38;
}
.service-link{
  display:inline-flex;
  margin-top:25px;
  color:var(--green);
  font-size:15px;
  font-weight:600;
  border-bottom:1px solid currentColor;
  padding-bottom:3px;
}
.service-link:hover{color:var(--green-dark)}

.footer{
  position:fixed;
  left:0;
  right:0;
  bottom:0;
  z-index:20;
  height:45px;
  padding:9px clamp(18px,3vw,42px);
  background:var(--green-dark);
  color:rgba(255,255,255,.68);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
}
.footer-brand{display:flex;align-items:center}
.footer-brand img{display:block;width:auto;height:22px}
.footer-meta{display:flex;align-items:center;gap:24px;font-size:11px}
.footer nav{display:flex;gap:15px}
.footer a:hover{color:#fff}

@media (max-width:900px){
  .slide{padding:86px 22px 76px}
  .project-badge{top:14px;padding:8px 12px}
  .project-badge img{height:23px}
  .hero-word{font-size:11.05vw;letter-spacing:-.085em}
  h2{font-size:clamp(54px,15vw,94px)}
  .service-copy p{font-size:20px}
  .footer{position:static;height:auto}
  .slides{height:auto;overflow:visible;scroll-snap-type:none}
  .project-badge{position:fixed}
  .intro-slide,.service-slide{min-height:100svh}
}

@media (max-width:540px){
  .slide{padding:80px 18px 68px}
  .hero-word{font-size:11vw;letter-spacing:-.09em}
  .hero-word span:hover{transform:translateY(-5px) scale(1.04)}
  .intro-subline,.service-copy p{font-size:17px}
  .service-copy p{max-width:92%}
  h2{font-size:clamp(48px,15vw,72px)}
  .footer{flex-direction:column;align-items:flex-start}
  .footer-meta{width:100%;justify-content:space-between;gap:12px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .hero-word span,.intro-subline,.intro-scroll{opacity:1;transform:none;filter:none}
}