/* --- Variables --- */

:root{
	--red: #e30613; /*#E92434*/
	--ink: #000;
	--text: #87888c;
	--sweetmilk: #65f1ac;
	--latte: #2d2e31;
	--milk: #f7f8fb;
	--coffee: #25262a;
	--font-main: 'Flaco Mono';
	--font-alt: 'Apex Sans Book Regular';
}


/* --- Fonts --- */

@font-face {font-family: 'Apex Sans Book Regular'; font-style: normal; font-weight: normal; src: local('Apex Sans Book Regular'), url('fonts/ApexSansBook.woff') format('woff');}
@font-face{font-family: 'Flaco Mono'; src: url("fonts/flaco-mono.otf"); src: url("fonts/flaco-mono.woff2")format("woff2"); font-weight:normal; font-style:normal;}


/* --- Normalize --- */

html {line-height: 1.15; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;}
body {margin: 0;}
article, aside, footer, header, nav, section {display: block;}
figcaption, figure, main{display: block;}
figure {margin: 1em 40px;}
hr {box-sizing: content-box; height: 0; overflow: visible;}
pre {font-family: monospace, monospace; font-size: 1em;}
a {background-color: transparent; -webkit-text-decoration-skip: objects;}
abbr[title] {border-bottom: none; text-decoration: underline; text-decoration: underline dotted;}
b, strong {font-weight: 700;}
code, kbd, sam p{font-family: monospace, monospace; font-size: 1em;}
dfn {font-style: italic;}
mark {background-color: #ff0; color: #000;}
small {font-size: 80%;}
sub, sup {font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;}
sub {bottom: -.25em;}
sup {top: -.5em;}
audio, video {display:inline-block;}
audio:not([controls]) {display: none; height: 0;}
img {border-style: none; height: auto;}
svg:not(:root) {overflow: hidden;}
button, input, optgroup, select, textarea {font-family: sans-serif; font-size: 100%; line-height: 1.15; margin: 0;}
button, input {overflow: visible;}
button, select {text-transform: none;}
[type=reset], [type=submit], button, html [type=button] {-webkit-appearance: button;}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {border-style: none; padding: 0;}
[type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring, button:-moz-focusring {outline: 1px dotted ButtonText;}
fieldset {padding: .35em .75em .625em;}
legend {box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal;}
progress {display: inline-block; vertical-align: baseline;}
textarea {overflow: auto;}
[type=checkbox], [type=radio] {box-sizing: border-box; padding: 0;}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {height: auto;}
[type=search] {-webkit-appearance: textfield; outline-offset: -2px;}
[type=search]::-webkit-search-cancel-button, [type=search]::-webkit-search-decoration {-webkit-appearance: none;}
::-webkit-file-upload-button{-webkit-appearance: button; font: inherit;}
details, menu {display: block;}
summary {display: list-item;}
canvas {display: inline-block;}
template {display: none;}
[hidden] {display: none;}


/* --- Reset --- */

html, body {box-sizing: border-box;}
*, *:before, *:after {box-sizing: inherit;}
span, h1, h2, h3, h4, h5, h6, p, a, label {vertical-align: baseline;}
img, object, embed {max-width: 100%;}


/* --- Fonts --- */

html, body, input, textarea, select, button {font: 400 16px/1.4 'Flaco Mono', sans-serif;}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {margin: .4em 0; font-weight: 700; line-height: 1.3; font-family: 'AppliedSans', sans-serif; color: var(--ink); letter-spacing: -0.02em;}
h1, .h1 {font-size: 63px;}
h2, .h2 {font-size: 51px;}
h3, .h3 {font-size: 31px;}
h4, .h4 {font-size: 27px;}
h5, .h5 {font-size: 23px;}
h6, .h6 {font-size: 20px;}
@media (max-width: 1100px) {
	h1, .h1 {font-size: 53px;}
	h2, .h2 {font-size: 38px;}
	h3, .h3 {font-size: 32px;}
	h4, .h4 {font-size: 26px;}
	h5, .h5 {font-size: 22px;}
	h6, .h6 {font-size: 19px;}
}
@media (max-width: 720px) {
	h1, .h1 {font-size: 35px;}
	h2, .h2 {font-size: 31px;}
	h3, .h3 {font-size: 27px;}
	h4, .h4 {font-size: 23px;}
	h5, .h5 {font-size: 20px;}
	h6, .h6 {font-size: 18px;}
}


/* --- Global --- */

body {height: 100%; position: relative; -ms-overflow-style: scrollbar; background: #fff; color: var(--text); min-width: 300px;}
input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea {height: 56px; font-size: 16px; padding: 0 16px; box-sizing: border-box; width: 100%; color: var(--milk); -webkit-appearance: none; appearance: none; outline: none; border: none; border-bottom: 1px solid var(--sweetmilk); border-radius: 0; text-overflow: ellipsis; background: none;}
textarea {display: block; height: auto; padding: 16px 16px; resize: vertical;  min-height:132px;}
select {height: 56px; font-size: 16px; border: 1px solid var(--line); padding: 0 16px; box-sizing: border-box; width: 100%; color: var(--milk); border-radius: 0; outline: none; background: #fff;}
select.large {height: 71px; font-weight: 700;}
select.bold {font-weight: 700;}
input[type="text"].error, input[type="tel"].error, input[type="number"].error, input[type="email"].error, input[type="password"].error, textarea.error, select.error {border-color: var(--red);}
input[type="number"] {-moz-appearance: textfield;}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {-webkit-appearance: none;}
input:focus, textarea:focus{border-color: #milk;}
em, i {font-style: italic;}
blockquote {background: #edecec; border: none; margin-left: 0; margin-right: 0; clear: both; position: relative; padding: 20px; quotes: none;}
blockquote:before {content: '\201c'; font-size: 50px; position: absolute; line-height: 1; top: -10px; left: 20px;}
blockquote p {margin: 0; display: block;}
table{width:100%;border-spacing:0}
table th{font-weight:600;font-size:16px;line-height:175%;color:#000000;text-align:left;white-space:nowrap;background:#EBDFFA;padding:18px 24px}
table tr:nth-child(1) th:first-child{border-radius:16px 0 0 16px}
table tr:nth-child(1) th:last-child{border-radius:0 16px 16px 0}
table td{font-weight:400;font-size:16px;line-height:175%;color:#000000;text-align:left;white-space:nowrap;padding:18px 24px}
table tr:nth-child(odd) td{background: var(--bg)}
table tr td:first-child{border-radius:16px 0 0 16px}
table tr td:last-child{border-radius:0 16px 16px 0}
a {color: #2196f3; outline: none; text-decoration: none;}
ul {margin: 0; padding: 0 0 0 20px;}
@media (min-width: 721px) {
	.wysiwyg-content a:not(.button):not(.btn-one):not(.btn-two):not(.btn-three):hover {text-decoration: underline;}
}
@media (max-width: 720px) {
	body, input[type="text"], input[type="tel"], input[type="number"], input[type="email"], input[type="password"], textarea, select {font-size: 14px;}
	table th{font-size:14px;padding:8px 16px}
	table td{font-size:14px;padding:8px 16px}
	table tr:nth-child(1) th:first-child{border-radius:8px 0 0 8px}
	table tr:nth-child(1) th:last-child{border-radius:0 8px 8px 0}
	table tr td:first-child{border-radius:8px 0 0 8px}
	table tr td:last-child{border-radius:0 8px 8px 0}
}


/* --- Theme --- */

html {scroll-behavior: smooth;}
body {background: var(--latte);}
@keyframes arrow-move {0% {transform: translateX(0);} 100% {transform: translateX(6px);}}
@keyframes button-awaiting {to{transform: rotate(1turn)}}
.site-wrapper {overflow: hidden;}
.wrapper {padding: 0 30px; margin: 0 auto; max-width: 1100px;}
.wrapper.wide {max-width: 1400px;}
.button {-moz-appearance: none; -webkit-appearance: none; appearance: none; -webkit-box-shadow: none; -moz-box-shadow: none; box-shadow: none; line-height: 1; display: flex; cursor: pointer; outline: none; position: relative; text-decoration: none; text-align: center; border-radius: 0; overflow: hidden; text-overflow: ellipsis; max-width: 100%; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); padding: 13px 31px; font-style: normal; color: var(--ink); background: var(--sweetmilk); border: 1px solid var(--sweetmilk); font-weight: 400; font-size: 16px; -webkit-transition: all 0.3s; transition: all 0.3s; justify-content: center;}
.button svg {width: 18px; height: 18px; margin-left: 15px;}
.button:hover {background: transparent; color: var(--sweetmilk);}
.button:hover svg {animation: arrow-move 0.7s linear infinite;}
.text-sweetmilk {color: var(--sweetmilk);}
.text-milk {color: var(--milk);}
.section-title {color: var(--milk); font-size: 44px; margin-top: 35px; line-height: 1.3;}
.section-title small {font-size: 100%; margin-left: -0.3em;}
@media (max-width: 1200px) {
	.section-title {font-size: 38px;}
}
@media (max-width: 990px) {
	.wrapper {padding: 0 25px;}
	.button {font-size: 14px;}
	.button svg {width: 16px; height: 16px;}
	.section-title {font-size: 26px;}
}


.site-header {position: absolute; top: 0; left: 0; right: 0; padding: 40px 0; z-index: 10;}
.site-header .wrapper {display: flex; align-items: center; gap: 15px; justify-content: space-between;}
.site-header .logo {color: var(--milk); font-family: var(--font-alt); font-size: 21px; letter-spacing: 0.08em; line-height: 1; white-space: nowrap; position: relative; top: -1px; display: flex;}
.site-header .logo img {display: block; width: 22px; height: auto; margin-right: 15px;}
.site-header .logo strong {}
.site-header .nav {line-height: 1;}
.site-header .nav ul {display: flex; margin: 0; padding: 0;}
.site-header .nav ul li {display: block; list-style: none; padding: 10px; position: relative;}
.site-header .nav ul li a {display: block; color: var(--milk); padding: 0 10px; -webkit-transition: all 0.3s; transition: all 0.3s; letter-spacing: 0.03em;}
.site-header .nav ul li a:before {content: '<'; margin-right: 10px; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
.site-header .nav ul li a:after {content: '>'; margin-left: 10px; opacity: 0; -webkit-transition: all 0.3s; transition: all 0.3s;}
.site-header .nav ul li a:hover {color: var(--sweetmilk);}
.site-header .nav ul li a:hover:before {opacity: 1;}
.site-header .nav ul li a:hover:after {opacity: 1;}
.site-header .nav ul li.active a {color: var(--text); pointer-events: none;}
.site-header .nav ul li.active a:before {content: '<--'; margin-right: 3px; opacity: 1; letter-spacing: -0.08em;}
.site-header .nav ul li.active a:after {content: '-->'; margin-left: 3px; opacity: 1; letter-spacing: -0.08em;}
@media (max-width: 990px) {
	.site-header {position: relative; padding: 35px 0;}
	.site-header .wrapper {justify-content: center;}
	.site-header .nav {position: fixed; bottom: 0; left: 0; right: 0; background: var(--coffee);}
	.site-header .nav:after {content: ''; display: block; position: absolute; top: 0; left: 0; height: 1px; right: 0; background: var(--text); display: block; opacity: 0.3;}
	.site-header .nav ul li {padding: 0; flex: 1; text-align: center;}
	.site-header .nav ul li:nth-child(n+2):after {content: ''; display: block; position: absolute; top: 10px; bottom: 10px; width: 1px; background: var(--text); display: block; opacity: 0.3;}
	.site-header .nav ul li a {padding: 18px 10px;}
}



.section-hero {position: relative;}
.section-hero .inner {min-height: 100vh; display: flex; align-items: center;}
.section-hero .content {width: 100%; padding: 150px 0; position: relative; z-index: 2;}
.section-hero .badges {display: flex; gap: 10px;}
.section-hero .badge {background: var(--sweetmilk); border-radius: 3px; line-height: 1; white-space: nowrap; padding: 6px 9px 9px; color: var(--ink); font-size: 14px; font-family: var(--font-alt); font-weight: 600;}
.section-hero .section-title .line {margin-left: -0.07em;}
.section-hero .description {color: var(--text); margin-top: 25px; line-height: 1.7;}
.section-hero .cta {margin-top: 40px;}
.section-hero .cta a {color: var(--sweetmilk); text-decoration: underline;}
.section-hero .cta a span {margin-left: -0.2em;}
.section-hero .experiences {position: absolute; padding: 50px 0; left: 0; bottom: 0; right: 0; margin: 0 auto; pointer-events: none;}
.section-hero .experiences .wrapper {display: flex; gap: 60px;}
.section-hero .experience {display: flex; gap: 20px; font-size: 14px;}
.section-hero .experience strong {display: block; color: var(--milk); font-size: 44px; font-family: var(--font-alt); line-height: 1;}
.section-hero .experience span {display: block; color: var(--text); line-height: 1.8;}
.section-hero .experience i {display: none;}
.section-hero .image {position: absolute; bottom: 0; right: 0; width: 50%; height: 80%;}
.section-hero .image .layer {position: absolute; width: 100%; height: 100%; top: 0; left: 0;}
.section-hero .image .layer svg {display: block; width: 100%; height: 100%; position: relative; object-fit: contain; object-position: bottom;}
.section-hero .image .layer.person img {display: block; width: 100%; height: 100%; position: relative; object-fit: contain; object-position: bottom;}
@media (max-width: 990px) {
	.section-hero .content {padding: 5px 0;}
	.section-hero .inner {min-height: 10px;}
	.section-hero .badge {border-radius: 2px; padding: 4px 8px 6px; font-size: 13px; font-weight: 600;}
	.section-hero .description {max-width: 450px;}
	.section-hero .description br {display: none;}
	.section-hero .experiences {position: relative;}
	.section-hero .experiences .wrapper {padding: 0;}
	.section-hero .experience {font-size: 10px; gap: 12px;}
	.section-hero .experience strong {font-size: 31px;}
	.section-hero .experience span {display: none;}
	.section-hero .experience i {display: block; color: var(--text); line-height: 1.8; font-style: normal;}
}
@media (max-width: 750px) {
	.section-hero .image {width: 265px; height: 300px;}
	.section-hero .badges {justify-content: center;}
	.section-hero .description {margin-top: 30px;}
	.section-hero .experiences {padding: 53px 0;}
	.section-hero .experiences .wrapper {flex-direction: column; gap: 20px;}
	.section-hero .section-title {text-align: center;}
	.section-hero .section-title .line {margin-left: -0.05em; font-size: 22.5px;}
}
@media (max-width: 400px) {
	.section-hero .image {width: 225px; height: 247px;}
}


.section-introduce {background: var(--coffee);}
.section-introduce .wrapper {min-height: 100vh; display: flex; align-items: center; justify-content: space-between; padding-top: 80px; padding-bottom: 80px;}
.section-introduce .left,
.section-introduce .right {flex-basis: calc(50% - 80px); width: calc(50% - 80px);}
.section-introduce .text {max-width: 500px;}
.section-introduce .uptitle {color: var(--text); margin-bottom: 15px;}
.section-introduce .subtitle {color: var(--milk); font-size: 20px; margin-top: 45px; line-height: 1.7;}
.section-introduce .subtitle small {font-size: 100%; margin-left: -0.3em;}
.section-introduce .description {color: var(--text); margin-top: 25px; line-height: 1.7;}
.section-introduce .description small {font-size: 100%; margin-left: -0.3em;}
.section-introduce .service {background: var(--latte); padding: 40px 50px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative;}
.section-introduce .service:hover {-webkit-box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); z-index: 1;}
.section-introduce .service + .service {margin-top: 10px;}
.section-introduce .service .title {color: var(--sweetmilk); font-size: 24px; margin: 0;}
.section-introduce .service .description {color: var(--text); margin: 10px 0 0; line-height: 1.7;}
.section-introduce .service .description small {font-size: 100%; margin-left: -0.3em;}
.section-introduce .service .cta {font-size: 14px; margin-top: 30px;}
.section-introduce .service .cta a {color: var(--milk); text-decoration: underline;}
@media (max-width: 1200px) {
	.section-introduce .left,
	.section-introduce .right {flex-basis: calc(50% - 40px); width: calc(50% - 40px);}
}
@media (max-width: 990px) {
	.section-introduce .wrapper {min-height: 10px; flex-direction: column-reverse; padding-top: 60px; padding-bottom: 60px; gap: 50px;}
	.section-introduce .left, 
	.section-introduce .right {flex-basis: 100%; width: 100%;}
	.section-introduce .subtitle {font-size: 16px; margin-top: 25px;}
	.section-introduce .text {max-width: 100%;}
	.section-introduce .service {padding: 30px 30px;}
	.section-introduce .service .title {font-size: 22px;}
	.section-introduce .service .cta {font-size: 12px; margin-top: 20px;}
}

.section-works {padding: 50px 0; content-visibility: auto;}
.section-works .wrapper {min-height: 100vh; display: flex; justify-content: space-between;}
.section-works .left,
.section-works .right {flex-basis: calc(50% - 40px); width: calc(50% - 40px);}
.section-works .description {color: var(--text); margin: 25px 0 80px; line-height: 1.7;}
.section-works .description small {font-size: 100%; margin-left: -0.3em;}
.section-works .project {background: #343538; padding: 40px 50px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; border-radius: 12px; margin-top: 50px; overflow: hidden;}
.section-works .project:hover {-webkit-box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); z-index: 1;}
.section-works .project .heading {display: flex; justify-content: space-between; align-items: center; margin: 0 0 35px; gap: 15px;}
.section-works .project .name {color: var(--sweetmilk); font-size: 24px; margin: 0;}
.section-works .project .name small {font-size: 100%; margin-left: -0.3em;}
.section-works .project img {display: block; width: 100%; height: auto; border-radius: 12px;}
.section-works .project .stack {display: flex; gap: 5px;}
.section-works .project .stack span {display: block; background: #47474c; color: var(--milk); padding: 2px 6px; border-radius: 3px; font-size: 11px;}
@media (max-width: 1200px) {
	.section-works .project {padding: 40px 30px;}
}
@media (max-width: 990px) {
	.section-works .wrapper {min-height: 10px; flex-direction: column;}
	.section-works .left, 
	.section-works .right {flex-basis: 100%; width: 100%;}
	.section-works .section-title {margin-top: 0;}
	.section-works .project {margin-top: 30px; padding: 0;}
	.section-works .description {margin-bottom: 50px;}
	.section-works .project .heading {flex-direction: column; align-items: flex-start; padding: 30px 30px 0;}
	.section-works .project .name {font-size: 22px;}
	.section-works .project img {border-radius: 0 0 12px 12px;} 
}


.section-form {background: var(--coffee);}
.section-form .wrapper {display: flex; align-items: center; justify-content: space-between; padding-top: 160px; padding-bottom: 160px;}
.section-form .left,
.section-form .right {flex-basis: calc(50% - 80px); width: calc(50% - 80px);}
.section-form .text {max-width: 500px; margin-left: auto;}
.section-form .uptitle {color: var(--text); margin-bottom: 15px;}
.section-form .subtitle {color: var(--milk); font-size: 20px; margin-top: 45px; line-height: 1.7;}
.section-form .description {color: var(--text); margin-top: 25px; line-height: 1.7;}
.section-form .description small {font-size: 100%; margin-left: -0.3em;}
.section-form .form {background: var(--latte); padding: 40px 50px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative;}
.section-form .form:hover {-webkit-box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); box-shadow: 0px 0px 42px 2px rgba(0,0,0,0.3); z-index: 1;}
.section-form .form-element {margin-bottom: 10px;}
.section-form .form-submit {margin-top: 25px; display: flex; justify-content: flex-end;}
.section-form .form-notice {display: none; background: var(--sweetmilk); padding: 13px 16px; color: var(--milk); font-size: 14px; color: var(--ink); margin-top: 20px;}
.section-form form {position: relative;}
.section-form form.error .form-notice {background: var(--red); color: var(--milk);}
.section-form form.awaiting > * {opacity: 0.5; pointer-events: none;}
.section-form form.awaiting > .form-submit {opacity: 1; pointer-events: all;}
.section-form form.awaiting button[type="submit"] {opacity: 1; color: transparent; pointer-events: none;}
.section-form form.awaiting button[type="submit"]:after {content: ''; display: block; width: 26px; padding: 3px; aspect-ratio: 1; border-radius: 50%; background: var(--ink); -webkit-mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; mask: conic-gradient(#0000 10%,#000), linear-gradient(#000 0 0) content-box; -webkit-mask-composite: source-out; mask-composite: subtract; animation: button-awaiting 1s infinite linear; opacity: 1; position: absolute; top: 50%; left: 50%; margin: -13px 0 0 -13px;}
@media (max-width: 1200px) {
	.section-form .left,
	.section-form .right {flex-basis: calc(50% - 40px); width: calc(50% - 40px);}
}
@media (max-width: 990px) {
	.section-form .wrapper {padding-top: 50px; padding-bottom: 50px; flex-direction: column; gap: 40px;} 
	.section-form .left, 
	.section-form .right {flex-basis: 100%; width: 100%;} 
	.section-form .text {max-width: 100%;}
	.section-form .form {padding: 30px;}
	.section-form .form-submit .button {flex: 1;}
	.section-form .form-notice {font-size: 12px;}
}


.footer {}
@media (max-width: 990px) {
	.footer {height: 50px;}
}