:root{
  --ink:#151a22;
  --ink-2:#4a525c;
  --paper:#ffffff;
  --mist:#eef4f2;
  --green:#1fbf9a;
  --green-deep:#127a62;
  --navy:#17202d;
  --line:#d6dedb;
  --px:4px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font-family:"BIZ UDPGothic",system-ui,sans-serif;font-size:17px;line-height:1.85;-webkit-font-smoothing:antialiased}
h1,h2,h3,.st,.nav-cta,.btn,.foot p{font-family:"DotGothic16","BIZ UDPGothic",sans-serif;font-weight:400}
a{color:inherit}
:focus-visible{outline:3px solid var(--green);outline-offset:3px}
.skip{position:absolute;left:-999px}
.skip:focus{left:16px;top:16px;background:var(--ink);color:#fff;padding:8px 12px;z-index:10}

.top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:20px clamp(20px,5vw,64px);max-width:1200px;margin:0 auto}
.brand img{display:block;height:40px;width:auto}
.top nav{display:flex;align-items:center;gap:28px;font-size:15px}
.top nav a{text-decoration:none}
.top nav a:hover{color:var(--green-deep)}
.nav-cta{background:var(--ink);color:#fff!important;padding:8px 16px;box-shadow:var(--px) var(--px) 0 var(--green)}
.nav-cta:hover{background:var(--green-deep)}

main section{padding:clamp(64px,10vw,120px) clamp(20px,5vw,64px);max-width:1200px;margin:0 auto}

.hero{padding-top:clamp(48px,8vw,96px)!important;padding-bottom:0!important}
.hero h1{font-size:clamp(40px,7.2vw,92px);line-height:1.2;letter-spacing:.02em;margin:0 0 28px}
.lead{max-width:40em;color:var(--ink-2);margin:0 0 36px;font-size:clamp(16px,1.6vw,19px)}
.btn{display:inline-block;background:var(--green);color:var(--ink);text-decoration:none;font-size:18px;padding:14px 28px;box-shadow:var(--px) var(--px) 0 var(--ink);transition:transform .08s,box-shadow .08s}
.btn:hover{background:#37d3ae}
.btn:active{transform:translate(var(--px),var(--px));box-shadow:0 0 0 var(--ink)}

/* the one moment: the rabbit dashes past the turtle */
.stage{position:relative;height:150px;margin-top:56px;overflow:hidden}
.ground{position:absolute;left:0;right:0;bottom:0;height:12px;background:
  linear-gradient(90deg,var(--green-deep) 50%,var(--green) 50%) 0 0/16px 4px repeat-x,
  linear-gradient(var(--mist),var(--mist)) 0 4px/100% 8px no-repeat}
.turtle{position:absolute;left:4%;bottom:12px;width:78px;height:auto}
.runner{position:absolute;bottom:20px;left:0;width:100%;height:110px;animation:dash 1.6s steps(16) .4s both}
.rabbit{position:absolute;right:6%;bottom:0;width:120px;height:auto;animation:hop .5s steps(2) infinite alternate;animation-iteration-count:6}
@keyframes dash{from{transform:translateX(-85%)}to{transform:translateX(0)}}
@keyframes hop{from{transform:translateY(0)}to{transform:translateY(-10px)}}
@media (prefers-reduced-motion:reduce){.runner,.rabbit{animation:none}}

.why{display:grid;grid-template-columns:1fr 1.2fr;gap:clamp(32px,6vw,96px);align-items:start}
.why h2{font-size:clamp(28px,3.6vw,44px);line-height:1.35;margin:0}
.why-body p{margin:0 0 1.2em;max-width:34em}

.flow{background:var(--navy);color:#e9efed;max-width:none!important}
.flow>*{max-width:1072px;margin-left:auto;margin-right:auto}
.flow h2{font-size:clamp(26px,3.2vw,40px);margin-top:0;margin-bottom:48px}
.stages{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:0;position:relative}
.stages li{padding:28px 24px 8px 0;border-top:var(--px) solid var(--green);position:relative}
.stages li::after{content:"";position:absolute;top:-10px;left:0;width:16px;height:16px;background:var(--green);box-shadow:0 0 0 var(--px) var(--navy)}
.st{display:block;color:var(--green);font-size:14px;letter-spacing:.08em}
.stages h3{font-size:26px;margin:4px 0 10px;color:#fff}
.stages p{margin:0;font-size:15.5px;color:#c3cdd0;max-width:20em}

.service h2,.company h2{font-size:clamp(26px,3.2vw,40px);margin:0 0 40px}
.svc{margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:0 clamp(32px,5vw,72px)}
.svc div{padding:24px 0;border-bottom:1px solid var(--line)}
.svc dt{font-weight:700;font-size:19px;margin-bottom:6px}
.svc dt::before{content:"";display:inline-block;width:10px;height:10px;background:var(--green);margin-right:12px;vertical-align:2px}
.svc dd{margin:0;color:var(--ink-2)}

.company table{border-collapse:collapse;width:100%;max-width:760px}
.company th,.company td{text-align:left;vertical-align:top;padding:20px 0;border-bottom:1px solid var(--line)}
.company th{width:9em;font-weight:700;color:var(--ink-2)}
.en{color:var(--ink-2);font-size:15px}
.company a{color:var(--green-deep)}

.contact{background:var(--green);max-width:none!important;text-align:left}
.contact>*{max-width:1072px;margin-left:auto;margin-right:auto}
.contact h2{font-size:clamp(28px,4vw,52px);margin-top:0;margin-bottom:16px;line-height:1.3}
.contact p{margin-top:0;margin-bottom:32px}
.btn-light{background:var(--ink);color:#fff;box-shadow:var(--px) var(--px) 0 #fff}
.btn-light:hover{background:var(--navy)}
.contact .btn{display:inline-block}

.foot{background:var(--ink);color:#9aa4ab;padding:48px clamp(20px,5vw,64px);display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.foot img{height:32px;width:auto}
.foot p{margin:0;color:var(--green);letter-spacing:.1em;font-size:14px;flex:1}
.foot small{font-size:13px}

.pc{display:inline}
@media (max-width:860px){
  .top nav a:not(.nav-cta){display:none}
  .why{grid-template-columns:1fr}
  .stages{grid-template-columns:1fr 1fr;row-gap:36px}
  .svc{grid-template-columns:1fr}
  .pc{display:none}
}
@media (max-width:520px){
  body{font-size:16px}
  .hero h1{font-size:30px}
  .brand img{height:32px}
  .stages{grid-template-columns:1fr}
  .stage{height:120px}
  .turtle{width:56px}
  .rabbit{width:88px}
  .company th{width:6.5em}
}