:root {
	color-scheme: light;
	--desk: #a8d4e6;
	--paper: #fdfcf7;
	--paper-blue: #eef8fb;
	--paper-pink: #fff0f4;
	--paper-yellow: #fff7cf;
	--line: #dcd9cc;
	--red-line: #d97070;
	--ink: #2a2a2a;
	--pencil: #7d7d7d;
	--pink: #ffb7c5;
	--pink-deep: #ff8aa3;
	--accent-blue: #6ba9c4;
	--shadow: rgba(40, 50, 60, 0.18);
	--content: 1160px;
	--surface-font: "Comic Neue", "LXGW WenKai GB Screen", "Microsoft YaHei", "PingFang SC", "Noto Sans SC", system-ui, sans-serif;
	--mono-font: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
	font-family: var(--surface-font);
	font-synthesis: none;
}

* { box-sizing: border-box; }

html {
	background: var(--desk);
	scroll-behavior: smooth;
}

body {
	position: relative;
	min-width: 320px;
	margin: 0;
	background: var(--desk);
	color: var(--ink);
	font-size: 16px;
	line-height: 1.5;
	overflow-x: hidden;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

body::before {
	position: fixed;
	inset: 0;
	z-index: -2;
	background-image: repeating-linear-gradient(0deg, rgba(255,255,255,.05) 0 2px, transparent 2px 5px), repeating-linear-gradient(90deg, rgba(0,0,0,.025) 0 1px, transparent 1px 5px);
	content: "";
	pointer-events: none;
}

button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
a { color: inherit; text-decoration: none; }

:focus-visible {
	outline: 3px solid var(--pink-deep);
	outline-offset: 4px;
}

h1, h2, h3, p { margin-top: 0; }
h1, h2, h3 { font-weight: 600; letter-spacing: 0; }

.page-width {
	width: min(var(--content), calc(100% - 48px));
	margin: 0 auto;
}

.desk-doodles {
	position: absolute;
	inset: 0;
	z-index: 0;
	max-width: 1500px;
	margin: 0 auto;
	pointer-events: none;
}

.desk-doodle {
	position: absolute;
	fill: none;
	stroke: rgba(255,255,255,.65);
	stroke-linecap: round;
	stroke-linejoin: round;
}

.desk-doodle--cloud { top: 128px; left: 1.5%; width: 150px; transform: rotate(-4deg); }
.desk-doodle--star { top: 310px; right: 4%; width: 34px; stroke-width: 1.4; transform: rotate(9deg); }
.desk-doodle--arrow { right: 2%; bottom: 230px; width: 88px; stroke-width: 1.5; transform: rotate(7deg); }

.skip-link {
	position: fixed;
	top: 12px;
	left: 12px;
	z-index: 30;
	padding: 8px 12px;
	background: var(--paper-yellow);
	border: 1px dashed rgba(217,112,112,.45);
	box-shadow: 0 4px 10px var(--shadow);
	transform: translateY(-180%);
}

.skip-link:focus { transform: translateY(0); }

.site-header {
	position: sticky;
	top: 0;
	z-index: 20;
	background: rgba(168,212,230,.92);
	border-bottom: 1px solid rgba(63,109,128,.2);
	backdrop-filter: blur(8px);
}

.site-header__inner {
	display: flex;
	align-items: center;
	gap: 20px;
	width: min(var(--content), calc(100% - 48px));
	min-height: 70px;
	margin: 0 auto;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-width: max-content;
	font-size: .94rem;
	font-weight: 600;
}

.brand__mark {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	background: var(--pink);
	border: 1px solid rgba(217,112,112,.6);
	box-shadow: 2px 3px 0 rgba(125,94,79,.24);
	font-size: .76rem;
	line-height: 1;
	transform: rotate(-4deg);
}

.brand__name { color: #315d70; font-weight: 600; }

.site-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 18px;
	margin-left: auto;
	font-size: .88rem;
	font-weight: 500;
}

.site-nav a {
	position: relative;
	padding: 6px 2px;
	color: #315d70;
}

.site-nav a::after {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 4px;
	background: repeating-linear-gradient(90deg, var(--pink) 0 4px, transparent 4px 7px, var(--pink) 7px 10px, transparent 10px 14px);
	content: "";
	opacity: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 180ms ease, opacity 180ms ease;
}

.site-nav a:hover::after, .site-nav a.is-active::after { opacity: .85; transform: scaleX(1); }

.language-toggle {
	min-width: 48px;
	padding: 6px 10px;
	background: rgba(253,252,247,.75);
	border: 1px dashed rgba(63,109,128,.34);
	border-radius: 5px;
	color: #315d70;
	cursor: pointer;
	font-size: .78rem;
	font-weight: 600;
}

.language-toggle:hover, .language-toggle:active { background: rgba(255,183,197,.28); }

#app {
	position: relative;
	z-index: 1;
	width: min(var(--content), calc(100% - 32px));
	margin: 18px auto 0;
	background: var(--paper);
	border: 1px solid rgba(125,94,79,.16);
	border-radius: 9px;
	box-shadow: 0 18px 38px var(--shadow);
	overflow: hidden;
}

.hero, .section {
	position: relative;
	border-bottom: 1px solid var(--line);
	background-color: var(--paper);
	background-image: repeating-linear-gradient(0deg, transparent 0 33px, rgba(168,212,230,.15) 33px 34px);
}

.hero::before, .section--works::before, .section--process::before, .section--about::before {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 62px;
	width: 1px;
	background: rgba(217,112,112,.35);
	content: "";
	pointer-events: none;
}

.hero { padding: 70px 0 76px; }

.hero__grid {
	display: grid;
	grid-template-columns: minmax(0,1.04fr) minmax(300px,.96fr);
	gap: 64px;
	align-items: center;
}

.hero__copy { max-width: 650px; padding-left: 24px; }

.hero__availability {
	margin-bottom: 18px;
	color: var(--red-line);
	font-size: .86rem;
	font-weight: 600;
}

.hero__availability::before {
	display: inline-block;
	width: 9px;
	height: 9px;
	margin-right: 9px;
	background: var(--pink);
	border: 1px solid var(--red-line);
	border-radius: 50%;
	content: "";
	vertical-align: 1px;
}

h1 {
	position: relative;
	max-width: 620px;
	margin-bottom: 19px;
	color: #315d70;
	font-size: clamp(2.5rem,5.4vw,4.3rem);
	line-height: 1.08;
}

h1::after {
	position: absolute;
	right: 8%;
	bottom: -9px;
	left: 0;
	height: 7px;
	background: repeating-linear-gradient(90deg, var(--pink) 0 8px, transparent 8px 13px);
	content: "";
	opacity: .72;
	transform: rotate(-1deg);
}

.hero__english { max-width: 560px; margin-bottom: 14px; color: var(--pink-deep); font-size: 1.12rem; font-weight: 600; }
.hero__body { max-width: 560px; margin-bottom: 28px; color: rgba(42,42,42,.76); font-size: 1rem; line-height: 1.7; }

.hero__actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 8px 15px;
	border: 1px solid rgba(217,112,112,.44);
	border-radius: 5px;
	background: rgba(255,255,255,.58);
	box-shadow: 0 4px 10px rgba(75,83,94,.1);
	color: var(--red-line);
	font-size: .92rem;
	font-weight: 600;
	line-height: 1.25;
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover { background: rgba(255,183,197,.23); box-shadow: 0 7px 15px rgba(75,83,94,.13); transform: translateY(-2px) rotate(-.5deg); }
.button:active { box-shadow: 0 2px 5px rgba(75,83,94,.1); transform: translateY(1px); }
.button--primary, .button--coral { background: rgba(255,183,197,.58); color: #9b4b6c; }
.button--secondary { background: rgba(168,212,230,.19); color: #3f6d80; }

.character-stage {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 360px;
	padding: 38px 30px;
	background: var(--paper-blue);
	border: 1px dashed rgba(107,169,196,.42);
	border-radius: 7px;
	box-shadow: 0 9px 18px rgba(75,83,94,.1);
	transform: rotate(1deg);
	overflow: hidden;
}

.character-stage::before {
	position: absolute;
	top: -9px;
	left: 50%;
	width: 70px;
	height: 22px;
	background: rgba(255,240,200,.78);
	box-shadow: 0 1px 3px rgba(75,83,94,.12);
	content: "";
	transform: translateX(-50%) rotate(-3deg);
}

.character-stage::after { position: absolute; right: -24px; bottom: 42px; width: 160px; height: 4px; background: var(--pink); content: ""; transform: rotate(-11deg); }
.character-stage picture, .character-stage img { position: relative; z-index: 1; display: block; }
.character-stage img { width: 224px; height: 224px; object-fit: contain; filter: drop-shadow(3px 4px 0 rgba(125,94,79,.15)); }

.character-stage__label { position: absolute; top: 18px; left: 20px; z-index: 2; color: var(--accent-blue); font-family: var(--mono-font); font-size: .68rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.character-stage__caption { position: absolute; right: 18px; bottom: 16px; left: 18px; z-index: 2; max-width: 260px; color: rgba(42,42,42,.74); font-size: .84rem; font-weight: 600; line-height: 1.4; }
.character-stage__line { position: absolute; z-index: 0; display: block; width: 80px; height: 1px; background: rgba(125,125,125,.58); transform-origin: left; }
.character-stage__line--one { left: 22px; bottom: 66px; transform: rotate(-12deg); }
.character-stage__line--two { top: 86px; right: 42px; transform: rotate(53deg); }

.section { padding: 78px 0; }
.section--mint { background-color: #f7fcfb; }
.section--about { background-color: #fffdf8; }

.section-heading { display: flex; align-items: end; justify-content: space-between; gap: 32px; margin-bottom: 40px; padding-left: 24px; }
.section-heading--stacked { display: block; max-width: 400px; }
.section-heading__number { margin-bottom: 7px; color: var(--red-line); font-family: var(--mono-font); font-size: .78rem; font-weight: 600; letter-spacing: .04em; }
.section-heading h2, .contact-band h2 { margin-bottom: 0; color: #315d70; font-size: clamp(2rem,4vw,3rem); line-height: 1.15; }
.section-heading__intro { max-width: 410px; margin-bottom: 3px; color: var(--pencil); font-size: .95rem; line-height: 1.65; }

.project-list { border-top: 1px solid var(--line); }

.project-row {
	position: relative;
	display: grid;
	grid-template-columns: 50px minmax(155px,.92fr) minmax(230px,1.55fr) minmax(135px,.8fr) minmax(140px,.7fr);
	gap: 18px;
	align-items: center;
	min-height: 118px;
	padding: 20px 10px 20px 24px;
	border-bottom: 1px solid var(--line);
	transition: background 160ms ease, transform 160ms ease;
}

.project-row::after { position: absolute; right: 28%; bottom: 8px; left: 13%; height: 3px; background: repeating-linear-gradient(90deg,var(--pink) 0 5px,transparent 5px 9px); content: ""; opacity: 0; transform: scaleX(0); transform-origin: left; transition: transform 220ms ease, opacity 220ms ease; }
.project-row:hover { background: rgba(168,212,230,.12); transform: translateX(4px); }
.project-row:hover::after { opacity: .76; transform: scaleX(1); }
.project-row__number { align-self: start; padding-top: 2px; color: var(--red-line); font-family: var(--mono-font); font-size: .78rem; font-weight: 600; }
.project-row__title { margin-bottom: 3px; color: #3f6d80; font-size: 1.18rem; line-height: 1.2; }
.project-row__type, .project-row__status { margin: 0; color: var(--pencil); font-size: .76rem; font-weight: 500; }
.project-row__status { color: #9b4b6c; }
.project-row__description { margin: 0; color: rgba(42,42,42,.72); font-size: .9rem; line-height: 1.58; }
.project-row__links { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .8rem; font-weight: 600; }
.project-row__links a { display: inline-flex; align-items: center; gap: 6px; color: #3f6d80; text-decoration: underline; text-decoration-color: rgba(107,169,196,.45); text-underline-offset: 4px; }
.project-row__links a:hover { color: var(--pink-deep); }
.link-arrow { width: 15px; height: 15px; flex: 0 0 auto; }
.link-arrow path { fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.5; }

.services-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 15px; padding: 8px 8px 4px; }

.service-item {
	--tilt: -1.2deg;
	position: relative;
	display: flex;
	min-height: 185px;
	flex-direction: column;
	gap: 8px;
	padding: 20px 18px 18px;
	border: 1px dashed rgba(217,112,112,.3);
	border-radius: 7px;
	background: rgba(255,255,255,.62);
	box-shadow: 0 6px 13px rgba(75,83,94,.08);
	transform: rotate(var(--tilt));
	transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.service-item:nth-child(2) { --tilt: 1deg; background: rgba(255,246,205,.55); }
.service-item:nth-child(3) { --tilt: -.4deg; background: rgba(255,183,197,.18); }
.service-item:nth-child(4) { --tilt: 1.3deg; background: rgba(168,212,230,.17); }
.service-item:nth-child(5) { --tilt: -.8deg; background: rgba(255,246,205,.4); }
.service-item::before { position: absolute; top: -8px; left: 50%; width: 54px; height: 18px; background: rgba(255,240,200,.7); box-shadow: 0 1px 3px rgba(75,83,94,.1); content: ""; transform: translateX(-50%) rotate(calc(var(--tilt) * -1)); }
.service-item:hover { background: rgba(255,255,255,.82); box-shadow: 0 9px 18px rgba(75,83,94,.13); transform: translateY(-3px) rotate(0deg); }
.service-item__number { align-self: flex-start; margin-bottom: 22px; color: var(--red-line); font-family: var(--mono-font); font-size: .74rem; font-weight: 600; letter-spacing: .04em; }
.service-item h3 { margin-bottom: 0; color: #3f6d80; font-size: 1.08rem; line-height: 1.3; }
.service-item p { margin-bottom: 0; color: rgba(42,42,42,.68); font-size: .88rem; line-height: 1.55; }
.section-note { margin: 18px 0 0 24px; color: rgba(217,112,112,.82); font-size: .86rem; font-weight: 600; }

.process-layout { display: grid; grid-template-columns: minmax(220px,.72fr) minmax(0,1.28fr); gap: 88px; align-items: start; }
.process-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.process-item { display: grid; grid-template-columns: 52px minmax(0,1fr); gap: 18px; padding: 22px 0; border-bottom: 1px solid var(--line); }
.process-item__number { display: grid; place-items: center; width: 38px; height: 38px; background: var(--paper-yellow); border: 1px solid rgba(217,112,112,.4); border-radius: 50%; color: #9b4b6c; font-family: var(--mono-font); font-size: .7rem; font-weight: 600; }
.process-item h3 { margin-bottom: 5px; color: #3f6d80; font-size: 1.03rem; line-height: 1.3; }
.process-item p { margin-bottom: 0; color: rgba(42,42,42,.68); font-size: .89rem; line-height: 1.55; }

.about-layout { display: grid; grid-template-columns: .85fr 1.15fr; column-gap: 76px; row-gap: 32px; }
.about-layout .section-heading { grid-column: 1 / -1; margin-bottom: 0; }
.about-copy { max-width: 550px; font-size: .98rem; }
.about-copy p { margin-bottom: 16px; color: rgba(42,42,42,.76); line-height: 1.7; }
.about-copy p:last-child { margin-bottom: 0; }
.about-facts { border-top: 1px solid var(--line); }
.about-fact { display: grid; grid-template-columns: 125px minmax(0,1fr); gap: 18px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.about-fact__label { color: var(--red-line); font-size: .8rem; font-weight: 600; }
.about-fact__value { color: #3f6d80; font-weight: 600; }
.about-links { display: flex; grid-column: 1 / -1; gap: 14px 24px; flex-wrap: wrap; padding-top: 4px; font-size: .86rem; font-weight: 600; }
.about-links a, .footer-links a { color: #3f6d80; text-decoration: underline; text-decoration-color: rgba(107,169,196,.45); text-underline-offset: 4px; }
.about-links a:hover, .footer-links a:hover { color: var(--pink-deep); }

.contact-band { position: relative; padding: 28px 0; background: var(--desk); border-bottom: 1px solid rgba(63,109,128,.18); }
.contact-band__inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; min-height: 220px; padding: 40px 44px; background: var(--paper-pink); border: 1px dashed rgba(217,112,112,.35); border-radius: 7px; box-shadow: 0 8px 16px rgba(75,83,94,.1); transform: rotate(-.6deg); }
.contact-band__inner::before { position: absolute; top: -10px; left: 46%; width: 74px; height: 22px; background: rgba(255,240,200,.76); box-shadow: 0 1px 3px rgba(75,83,94,.12); content: ""; transform: rotate(2deg); }
.contact-band h2 { max-width: 520px; margin-bottom: 13px; color: #9b4b6c; }
.contact-band p:not(.section-heading__number) { max-width: 560px; margin-bottom: 0; color: rgba(42,42,42,.7); font-size: .94rem; line-height: 1.65; }
.contact-band .section-heading__number { color: var(--red-line); }
.contact-band__action { min-width: 250px; text-align: right; }
.contact-band__action .button { margin-bottom: 14px; }
.contact-band__action p { font-size: .8rem; }
.payment-slot { margin-top: 6px; }
.button--payment { background: rgba(168,212,230,.28); color: #3f6d80; }

.site-footer { position: relative; z-index: 1; background: transparent; }
.site-footer__inner { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: center; width: min(var(--content),calc(100% - 48px)); min-height: 92px; margin: 0 auto; color: #315d70; font-size: .75rem; font-weight: 500; }
.site-footer p { margin: 0; }
.site-footer p:last-child { text-align: right; }
.footer-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; }

.noscript-note { position: fixed; inset: 20px; z-index: 40; max-width: 520px; height: max-content; margin: auto; padding: 24px; background: var(--paper-yellow); border: 1px dashed rgba(217,112,112,.45); box-shadow: 0 8px 18px var(--shadow); }
.noscript-note a { margin-right: 18px; color: #3f6d80; text-decoration: underline; }

@media (max-width: 960px) {
	.hero__grid { grid-template-columns: minmax(0,1fr) minmax(260px,.8fr); gap: 42px; }
	.project-row { grid-template-columns: 44px minmax(145px,.8fr) minmax(190px,1.4fr) minmax(120px,.7fr); }
	.project-row__links { grid-column: 2 / -1; padding-top: 3px; }
	.process-layout { gap: 52px; }
}

@media (max-width: 720px) {
	.page-width, .site-header__inner, .site-footer__inner { width: min(100% - 32px,var(--content)); }
	.site-header__inner { min-height: 66px; gap: 10px; flex-wrap: wrap; padding: 9px 0; }
	.site-nav { order: 3; width: 100%; justify-content: space-between; gap: 9px; padding-top: 4px; border-top: 1px dashed rgba(63,109,128,.24); font-size: .8rem; }
	.language-toggle { margin-left: auto; }
	#app { width: min(100% - 16px,var(--content)); margin-top: 8px; }
	.hero::before, .section--works::before, .section--process::before, .section--about::before { left: 32px; }
	.hero { padding: 48px 0 10px; }
	.hero__grid { display: flex; flex-direction: column; gap: 36px; align-items: stretch; }
	.hero__copy { padding-left: 18px; }
	h1 { font-size: 2.85rem; }
	.hero__body { font-size: .96rem; }
	.character-stage { min-height: 275px; padding: 24px; }
	.character-stage img { width: 180px; height: 180px; }
	.section { padding: 58px 0; }
	.section--works { padding-top: 14px; }
	.section-heading { display: block; margin-bottom: 30px; padding-left: 18px; }
	.section-heading__intro { margin-top: 15px; }
	.project-row { display: grid; grid-template-columns: 38px minmax(0,1fr); gap: 7px 12px; padding: 19px 10px 19px 18px; }
	.project-row:hover { transform: translateX(2px); }
	.project-row__number { grid-row: 1 / span 2; }
	.project-row__meta, .project-row__description, .project-row__links { grid-column: 2; }
	.project-row__description { margin-top: 7px; }
	.project-row__status { grid-column: 2; }
	.services-grid { grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; padding: 7px 6px 4px; }
	.service-item { min-height: 198px; padding: 18px 15px 16px; }
	.service-item__number { margin-bottom: 18px; }
	.section-note { margin-left: 18px; }
	.process-layout, .about-layout { display: block; }
	.process-layout .section-heading, .about-layout .section-heading { margin-bottom: 30px; }
	.about-copy, .about-facts { margin-top: 28px; }
	.about-links { margin-top: 26px; }
	.contact-band { padding: 18px 0; }
	.contact-band__inner { display: block; min-height: 0; padding: 35px 24px 30px; }
	.contact-band__action { min-width: 0; margin-top: 28px; text-align: left; }
	.site-footer__inner { display: block; padding-top: 24px; padding-bottom: 24px; }
	.site-footer p, .site-footer p:last-child { text-align: left; }
	.footer-links { justify-content: flex-start; margin: 15px 0; }
	.desk-doodle--cloud { top: 155px; left: -42px; width: 120px; }
	.desk-doodle--star { top: 520px; right: 6px; width: 28px; }
	.desk-doodle--arrow { right: -10px; bottom: 180px; width: 66px; }
}

@media (max-width: 430px) {
	.brand__name { font-size: .84rem; }
	.brand__mark { width: 35px; height: 35px; }
	h1 { font-size: 2.48rem; }
	.hero__actions { display: grid; grid-template-columns: 1fr; }
	.button { width: 100%; }
	.character-stage { min-height: 230px; }
	.character-stage img { width: 155px; height: 155px; }
	.services-grid { display: block; }
	.service-item { min-height: 0; margin-bottom: 13px; }
	.service-item:last-child { margin-bottom: 0; }
	.about-fact { grid-template-columns: 1fr; gap: 2px; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}