@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Noto+Sans+JP:wght@400;500;600;700;800;900&display=swap");

:root {
	--gato-ink: #061526;
	--gato-night: #020915;
	--gato-blue: #056dc3;
	--gato-cyan: #50d8ff;
	--gato-electric: #3756ff;
	--gato-red: #ff1d38;
	--gato-white: #f7fbff;
	--gato-muted: #a9b8c7;
	--gato-line: rgba(9, 35, 59, 0.14);
}

body.gato-homepage-active {
	margin: 0 !important;
	padding: 0 !important;
	overflow-x: hidden;
}

body.gato-homepage-active .wp-site-blocks {
	gap: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
	padding-block: 0 !important;
}

/*
 * The script applies this only to blocks that appear before the homepage on
 * the dedicated front page (theme header, page title, spacer or empty Group).
 */
body.gato-homepage-active .gato-homepage-before {
	display: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	padding: 0 !important;
}

/*
 * WordPress themes often add several nested Group blocks around page content.
 * JavaScript marks only the ancestor chain that contains this homepage, so
 * these resets cannot affect normal pages or the GATO sections themselves.
 */
body.gato-homepage-active .gato-homepage-shell {
	box-sizing: border-box !important;
	width: 100% !important;
	max-width: none !important;
	min-height: 0 !important;
	margin: 0 !important;
	margin-block: 0 !important;
	padding: 0 !important;
	padding-block: 0 !important;
	border: 0 !important;
	row-gap: 0 !important;
	column-gap: 0 !important;
	background: transparent !important;
}

body.gato-homepage-active .gato-homepage-shell.is-layout-flow > * + *,
body.gato-homepage-active .gato-homepage-shell.is-layout-constrained > * + *,
body.gato-homepage-active .wp-site-blocks > * + * {
	margin-block-start: 0 !important;
}

body.gato-homepage-active header.wp-block-template-part,
body.gato-homepage-active footer.wp-block-template-part,
body.gato-homepage-active .wp-site-blocks > .wp-block-template-part,
body.gato-homepage-active .wp-site-blocks > header,
body.gato-homepage-active .wp-site-blocks > footer,
body.gato-homepage-active .wp-block-post-title,
body.gato-homepage-active .entry-header,
body.gato-homepage-active .page-header,
body.gato-homepage-active .site-header,
body.gato-homepage-active .site-footer {
	display: none !important;
}

body.gato-homepage-active .wp-site-blocks > *,
body.gato-homepage-active .wp-site-blocks > main,
body.gato-homepage-active .wp-site-blocks > main > .wp-block-group,
body.gato-homepage-active .wp-site-blocks > main > article,
body.gato-homepage-active main.site-main,
body.gato-homepage-active .site-main,
body.gato-homepage-active .content-area,
body.gato-homepage-active .entry-content,
body.gato-homepage-active .wp-block-post-content,
body.gato-homepage-active .wp-block-post-content > .wp-block-shortcode {
	width: 100% !important;
	max-width: none !important;
	padding: 0 !important;
	margin: 0 !important;
	margin-block-start: 0 !important;
}

body.gato-homepage-active .wp-block-shortcode {
	width: 100% !important;
	max-width: none !important;
	margin: 0 !important;
}

.gato-homepage,
.gato-homepage * {
	box-sizing: border-box;
}

.gato-homepage {
	--gato-pointer-x: 50%;
	--gato-pointer-y: 50%;
	position: relative;
	left: auto;
	width: 100vw;
	max-width: 100vw !important;
	margin: 0 !important;
	overflow: clip;
	background: var(--gato-white);
	color: var(--gato-ink);
	font-family: "Inter", "Noto Sans JP", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.gato-homepage a {
	color: inherit;
	text-decoration: none;
}

.gato-homepage img {
	max-width: 100%;
}

.gato-homepage .screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.gato-grain {
	position: fixed;
	z-index: 100;
	inset: 0;
	pointer-events: none;
	opacity: 0.11;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.38'/%3E%3C/svg%3E");
	mix-blend-mode: soft-light;
}

.gato-nav {
	position: absolute;
	z-index: 30;
	top: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 96px;
	padding: 0 clamp(24px, 4vw, 72px);
	border-bottom: 1px solid rgba(255, 255, 255, 0.2);
	color: #fff;
}

.gato-brand {
	display: grid;
	place-items: center;
	width: 92px;
	height: 68px;
	padding: 8px;
	border-radius: 12px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 16px 44px rgba(0, 19, 55, 0.2);
	backdrop-filter: blur(14px);
	transition: transform 240ms ease;
}

.gato-brand:hover {
	transform: translateY(-3px) rotate(-2deg);
}

.gato-brand img {
	display: block;
	width: 78px;
	height: auto;
}

.gato-menu {
	display: flex;
	align-items: center;
	gap: clamp(24px, 3vw, 52px);
	font-size: 0.76rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.gato-menu a {
	position: relative;
}

.gato-menu a:not(.gato-nav-cta)::after {
	position: absolute;
	bottom: -7px;
	left: 0;
	width: 100%;
	height: 1px;
	background: #fff;
	content: "";
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 220ms ease;
}

.gato-menu a:not(.gato-nav-cta):hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.gato-language-switch {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	min-height: 40px;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.38);
	border-radius: 999px;
	background: rgba(2, 15, 35, 0.18);
	color: inherit;
	font: inherit;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	cursor: pointer;
	backdrop-filter: blur(12px);
	transition: border-color 220ms ease, background 220ms ease, transform 220ms ease;
}

.gato-language-target {
	display: inline-grid;
	place-items: center;
	min-width: 28px;
	height: 22px;
	padding: 0 6px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.16);
	font-size: 0.58rem;
	font-style: normal;
	font-weight: 800;
	letter-spacing: 0.08em;
}

.gato-language-switch:hover,
.gato-language-switch:focus-visible {
	border-color: #fff;
	background: rgba(255, 255, 255, 0.13);
	transform: translateY(-2px);
}

.gato-language-switch[aria-pressed="true"] {
	border-color: rgba(80, 216, 255, 0.8);
	background: rgba(17, 120, 177, 0.28);
}

.gato-homepage.is-english .gato-hero-content h1,
.gato-homepage.is-english .gato-section-head h2,
.gato-homepage.is-english .gato-studio-copy h2,
.gato-homepage.is-english .gato-contact h2 {
	letter-spacing: -0.045em;
}

.gato-nav-cta {
	display: flex;
	align-items: center;
	gap: 18px;
	min-width: 154px;
	padding: 13px 18px;
	border: 1px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	justify-content: space-between;
	transition: background 220ms ease, color 220ms ease;
}

.gato-nav-cta:hover {
	background: #fff;
	color: var(--gato-ink);
}

.gato-menu-button {
	display: none;
	width: 48px;
	height: 48px;
	padding: 13px 11px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 50%;
	background: rgba(5, 20, 40, 0.28);
	color: #fff;
}

.gato-menu-button span:not(.screen-reader-text) {
	display: block;
	width: 100%;
	height: 1px;
	margin: 6px 0;
	background: currentColor;
	transition: transform 220ms ease;
}

.gato-hero {
	position: relative;
	display: grid;
	align-items: end;
	min-height: min(920px, 100svh);
	padding: 150px clamp(24px, 6vw, 110px) 92px;
	isolation: isolate;
	background: #d9f2ff;
	color: #fff;
}

.gato-hero-art,
.gato-hero-video,
.gato-hero-shade {
	position: absolute;
	z-index: -4;
	inset: 0;
}

.gato-hero-art {
	background-image: var(--gato-hero-image);
	background-position: center center;
	background-size: cover;
	transform: scale(1.04);
	animation: gato-hero-breathe 14s ease-in-out infinite alternate;
}

.gato-hero-video {
	z-index: -4;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gato-hero-shade {
	z-index: -3;
	background:
		linear-gradient(90deg, rgba(0, 8, 20, 0.92) 0%, rgba(0, 16, 38, 0.63) 42%, rgba(0, 12, 30, 0.16) 76%),
		linear-gradient(0deg, rgba(0, 6, 17, 0.7) 0%, transparent 58%);
}

.gato-hero::before {
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		radial-gradient(circle at var(--gato-pointer-x) var(--gato-pointer-y), rgba(81, 217, 255, 0.25), transparent 25%),
		linear-gradient(125deg, transparent 50%, rgba(1, 90, 200, 0.18));
	content: "";
	transition: background-position 80ms linear;
}

.gato-hero-content {
	position: relative;
	z-index: 2;
	width: min(830px, 70vw);
}

.gato-kicker,
.gato-section-number {
	margin: 0 0 24px;
	font-size: 0.73rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}

.gato-kicker {
	display: flex;
	align-items: center;
	gap: 14px;
}

.gato-kicker::before {
	display: block;
	width: 34px;
	height: 1px;
	background: var(--gato-cyan);
	content: "";
}

.gato-hero h1 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(3.6rem, 7.2vw, 7.9rem);
	font-weight: 800;
	letter-spacing: -0.07em;
	line-height: 1.03;
	text-wrap: balance;
}

.gato-hero h1 > span {
	display: block;
}

.gato-gradient-text {
	background: linear-gradient(95deg, #fff 10%, #62dcff 48%, #9caaff 92%);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/*
 * Block themes often assign a foreground color directly to headings. Keep the
 * intended light typography on every dark surface, even when the theme's
 * heading rules would otherwise override the section's inherited text color.
 */
.gato-homepage .gato-hero h1,
.gato-homepage .gato-services h2,
.gato-homepage .gato-services h3,
.gato-homepage .gato-production-story h3,
.gato-homepage .gato-art-showcase h3,
.gato-homepage .gato-ai-card-blue h3,
.gato-homepage .gato-contact h2 {
	color: #fff !important;
}

.gato-homepage .gato-gradient-text {
	color: transparent !important;
}

.gato-hero-copy {
	margin: 32px 0 0;
	color: rgba(255, 255, 255, 0.78);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(0.95rem, 1.15vw, 1.18rem);
	line-height: 1.9;
}

.gato-hero-project {
	display: flex;
	align-items: center;
	gap: 12px;
	width: max-content;
	max-width: 100%;
	margin: 24px 0 0;
	padding: 9px 14px;
	border: 1px solid rgba(255, 255, 255, 0.28);
	border-radius: 999px;
	background: rgba(2, 9, 21, 0.42);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	backdrop-filter: blur(12px);
}

.gato-hero-project span {
	color: var(--gato-cyan);
	font-size: 0.58rem;
	letter-spacing: 0.14em;
}

.gato-hero-actions {
	display: flex;
	align-items: center;
	gap: 34px;
	margin-top: 42px;
}

.gato-button {
	display: inline-flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	min-width: 210px;
	padding: 17px 18px 17px 24px;
	border-radius: 999px;
	font-size: 0.82rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	transition: transform 220ms ease, box-shadow 220ms ease;
}

.gato-button:hover {
	transform: translateY(-3px);
}

.gato-button-primary {
	background: #fff;
	box-shadow: 0 18px 50px rgba(2, 36, 90, 0.24);
	color: var(--gato-ink) !important;
}

.gato-button-arrow {
	display: grid;
	place-items: center;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--gato-blue);
	color: #fff;
}

.gato-text-link {
	padding-bottom: 4px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.5);
	font-size: 0.84rem;
	font-weight: 700;
}

.gato-text-link span {
	display: inline-block;
	margin-left: 9px;
	transition: transform 220ms ease;
}

.gato-text-link:hover span {
	transform: translate(3px, -3px);
}

.gato-hero-meta {
	position: absolute;
	right: clamp(24px, 4vw, 72px);
	bottom: 90px;
	display: flex;
	align-items: center;
	gap: 18px;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.18em;
	writing-mode: vertical-rl;
}

.gato-scroll-line {
	width: 1px;
	height: 68px;
	overflow: hidden;
	background: rgba(255, 255, 255, 0.28);
}

.gato-scroll-line::after {
	display: block;
	width: 1px;
	height: 34px;
	background: #fff;
	content: "";
	animation: gato-scroll 2s ease-in-out infinite;
}

.gato-orbit {
	position: absolute;
	z-index: -1;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	pointer-events: none;
}

.gato-orbit::before {
	position: absolute;
	top: 50%;
	left: -5px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 30px #51d9ff;
	content: "";
}

.gato-orbit-one {
	top: 13%;
	right: -7%;
	width: min(47vw, 680px);
	aspect-ratio: 1;
	animation: gato-spin 30s linear infinite;
}

.gato-orbit-two {
	top: 27%;
	right: 5%;
	width: min(29vw, 420px);
	aspect-ratio: 1;
	animation: gato-spin 21s linear infinite reverse;
}

.gato-ticker {
	overflow: hidden;
	padding: 19px 0;
	background: var(--gato-night);
	color: #fff;
}

.gato-ticker-track {
	display: flex;
	align-items: center;
	width: max-content;
	animation: gato-ticker 28s linear infinite;
}

.gato-ticker span {
	padding: 0 28px;
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	white-space: nowrap;
}

.gato-ticker i {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--gato-cyan);
	box-shadow: 0 0 14px var(--gato-cyan);
}

.gato-section {
	position: relative;
	padding: clamp(90px, 10vw, 170px) clamp(24px, 6vw, 110px);
}

.gato-section-head {
	display: grid;
	grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
	align-items: end;
	gap: 70px;
	margin: 0 auto clamp(58px, 7vw, 110px);
	max-width: 1500px;
}

.gato-section-number {
	color: var(--gato-blue);
}

.gato-section-head h2,
.gato-studio-copy h2,
.gato-contact h2 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(3rem, 5.7vw, 6.4rem);
	font-weight: 800;
	letter-spacing: -0.065em;
	line-height: 1.12;
}

.gato-section-intro {
	margin: 0 0 8px;
	color: #506173;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(0.93rem, 1.1vw, 1.08rem);
	line-height: 2;
}

.gato-work-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: clamp(50px, 7vw, 110px) clamp(24px, 3vw, 48px);
	max-width: 1500px;
	margin: 0 auto;
}

.gato-work-card {
	min-width: 0;
}

.gato-work-card-link {
	display: block;
	color: inherit;
	text-decoration: none;
}

.gato-work-card:nth-child(2) {
	margin-top: 16vw;
}

.gato-work-card:nth-child(3) {
	margin-top: -5vw;
}

.gato-work-visual {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: 2px;
	background: #dcecf7;
	isolation: isolate;
}

.gato-work-featured .gato-work-visual {
	aspect-ratio: 16 / 10;
}

.gato-work-visual::after {
	position: absolute;
	z-index: 4;
	inset: 0;
	border: 1px solid rgba(255, 255, 255, 0.24);
	content: "";
	pointer-events: none;
}

.gato-work-visual-project {
	background: linear-gradient(145deg, #07182c, #0b4f8c);
}

.gato-work-visual-project::before {
	position: absolute;
	z-index: 2;
	inset: 0;
	background: linear-gradient(0deg, rgba(2,9,21,.58), transparent 48%);
	content: "";
	pointer-events: none;
}

.gato-work-visual-project > img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.gato-work-card:hover .gato-work-visual-project > img {
	transform: scale(1.055);
}

.gato-work-visual-yokai,
.gato-work-visual-guardians,
.gato-work-visual-alchemist {
	display: grid;
	place-items: center;
	padding: 18px;
}

.gato-work-visual-yokai {
	background:
		radial-gradient(circle at 24% 18%, rgba(75,221,255,.38), transparent 28%),
		linear-gradient(145deg, #153864, #081321 72%);
}

.gato-work-visual-guardians {
	background:
		radial-gradient(circle at 78% 18%, rgba(255,173,63,.4), transparent 28%),
		linear-gradient(145deg, #5e111a, #120a16 72%);
}

.gato-work-visual-alchemist {
	background:
		radial-gradient(circle at 76% 18%, rgba(247,199,86,.42), transparent 30%),
		linear-gradient(145deg, #214d7a, #071422 72%);
}

.gato-work-visual-yokai::before,
.gato-work-visual-guardians::before,
.gato-work-visual-alchemist::before {
	background:
		linear-gradient(0deg, rgba(2,9,21,.64), transparent 38%),
		radial-gradient(circle at center, transparent 45%, rgba(2,9,21,.32));
}

.gato-work-visual-yokai > img,
.gato-work-visual-guardians > img,
.gato-work-visual-alchemist > img {
	position: relative;
	z-index: 1;
	width: auto;
	max-width: 88%;
	height: 94%;
	object-fit: contain;
	box-shadow: 0 24px 55px rgba(0,0,0,.42);
}

.gato-work-visual-three-body > img {
	object-fit: cover;
	object-position: center;
}

.gato-work-visual-firebird {
	background: #f7f6f2;
}

.gato-work-visual-firebird > img {
	object-fit: contain;
}

.gato-work-visual-hero {
	background-image:
		linear-gradient(135deg, rgba(0, 32, 81, 0.08), rgba(3, 13, 40, 0.42)),
		var(--gato-hero-image);
	background-position: 70% center;
	background-size: cover;
	transition: background-size 700ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gato-work-card:hover .gato-work-visual-hero {
	background-size: 108%;
}

.gato-work-index,
.gato-work-view,
.gato-work-state {
	position: absolute;
	z-index: 8;
	color: #fff;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.gato-work-index {
	top: 22px;
	left: 24px;
	padding: 7px 9px;
	border-radius: 999px;
	background: rgba(2, 15, 30, 0.5);
	backdrop-filter: blur(8px);
}

.gato-work-view {
	right: 22px;
	bottom: 20px;
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 220ms ease, transform 220ms ease;
}

.gato-work-card:hover .gato-work-view {
	opacity: 1;
	transform: translateY(0);
}

.gato-work-view b {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: #fff;
	color: var(--gato-ink);
}

.gato-work-state {
	right: 22px;
	bottom: 20px;
	padding: 9px 12px;
	border: 1px solid rgba(255, 255, 255, 0.5);
	border-radius: 999px;
	background: rgba(2, 15, 30, 0.58);
	backdrop-filter: blur(10px);
}

.gato-work-visual-cyan {
	background:
		radial-gradient(circle at 70% 28%, rgba(255, 255, 255, 0.95) 0 3%, transparent 3.4%),
		linear-gradient(145deg, #54e6f2, #2456d6 54%, #091b54);
}

.gato-cel {
	position: absolute;
	border-radius: 45% 55% 54% 46%;
	filter: drop-shadow(0 24px 24px rgba(0, 19, 55, 0.28));
}

.gato-cel-one {
	top: 19%;
	left: 13%;
	width: 45%;
	aspect-ratio: 1;
	border: 18px solid rgba(255, 255, 255, 0.88);
	transform: rotate(25deg);
	animation: gato-float 5.5s ease-in-out infinite;
}

.gato-cel-two {
	right: 11%;
	bottom: 12%;
	width: 36%;
	aspect-ratio: 0.84;
	background: linear-gradient(135deg, #fff, #aaf6ff);
	clip-path: polygon(50% 0, 80% 14%, 100% 48%, 78% 100%, 38% 83%, 0 55%, 15% 18%);
	transform: rotate(-14deg);
	animation: gato-float 6.4s ease-in-out infinite reverse;
}

.gato-work-visual-red {
	background:
		linear-gradient(90deg, transparent 49.5%, rgba(255,255,255,.22) 50%, transparent 50.5%),
		linear-gradient(#ef1d3e, #93052c);
}

.gato-scan-lines {
	position: absolute;
	inset: 0;
	opacity: 0.38;
	background: repeating-linear-gradient(0deg, transparent 0 8px, rgba(255,255,255,.18) 9px 10px);
	mask-image: linear-gradient(to bottom, transparent, #000 20%, #000 80%, transparent);
}

.gato-work-kanji {
	position: absolute;
	top: 50%;
	left: 50%;
	color: rgba(255, 255, 255, 0.92);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(3rem, 7vw, 7.5rem);
	font-weight: 900;
	letter-spacing: -0.12em;
	line-height: 1;
	transform: translate(-50%, -50%) rotate(-7deg);
	text-shadow: 14px 18px 0 rgba(22, 0, 20, 0.16);
	white-space: nowrap;
}

.gato-work-visual-space {
	background:
		radial-gradient(circle at 78% 24%, rgba(73, 182, 255, 0.5), transparent 22%),
		radial-gradient(circle at 16% 70%, rgba(84, 51, 223, 0.7), transparent 30%),
		linear-gradient(140deg, #02050f, #0b2352);
}

.gato-planet {
	position: absolute;
	right: 12%;
	top: 9%;
	width: 48%;
	aspect-ratio: 1;
	border-radius: 50%;
	background:
		radial-gradient(circle at 38% 32%, #bdf3ff 0 2%, #2d6fff 8%, #101d51 43%, #03050c 72%);
	box-shadow:
		0 0 70px rgba(56, 111, 255, 0.54),
		inset -26px -18px 35px rgba(0, 0, 0, 0.82);
	animation: gato-float 8s ease-in-out infinite;
}

.gato-planet::after {
	position: absolute;
	inset: -14%;
	border: 2px solid rgba(131, 208, 255, 0.28);
	border-radius: 50%;
	content: "";
	transform: rotateX(72deg) rotateZ(-18deg);
}

.gato-work-title-mark {
	position: absolute;
	z-index: 3;
	left: 7%;
	bottom: 12%;
	color: rgba(255,255,255,.86);
	font-size: clamp(2.4rem, 5.2vw, 5.4rem);
	font-weight: 800;
	letter-spacing: -0.07em;
	line-height: .78;
}

.gato-work-meta {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 20px;
	padding-top: 24px;
}

.gato-work-meta h3 {
	margin: 0 0 9px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.2rem, 1.9vw, 1.85rem);
	font-weight: 700;
	line-height: 1.45;
}

.gato-work-meta p,
.gato-work-meta time {
	margin: 0;
	color: #758292;
	font-size: 0.66rem;
	font-weight: 700;
	letter-spacing: 0.13em;
}

.gato-work-meta time {
	padding-top: 9px;
	white-space: nowrap;
}

.gato-work-status {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	min-height: 31px;
	margin-top: 2px;
	padding: 6px 11px;
	border: 1px solid #c8d4df;
	border-radius: 999px;
	color: #566779;
	font-size: 0.65rem;
	font-weight: 800;
	letter-spacing: 0.08em;
	white-space: nowrap;
}

.gato-work-status-development {
	border-color: #97c7ec;
	background: #e8f5ff;
	color: #075c9d;
}

.gato-work-status-complete {
	border-color: #afd9cc;
	background: #e9f7f2;
	color: #12694f;
}

.gato-work-status-distribution {
	border-color: #d8c6a3;
	background: #faf4e8;
	color: #76551a;
}

.gato-work-status-ongoing {
	border-color: #bbb4eb;
	background: #f0edff;
	color: #4e42a0;
}

.gato-services {
	overflow: hidden;
	background: var(--gato-night);
	color: #fff;
	isolation: isolate;
}

.gato-services::before {
	position: absolute;
	z-index: -2;
	inset: 0;
	background:
		linear-gradient(rgba(255,255,255,.055) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255,255,255,.055) 1px, transparent 1px);
	background-size: 82px 82px;
	content: "";
	mask-image: linear-gradient(to bottom, transparent, #000 24%, #000 80%, transparent);
}

.gato-services-orb {
	position: absolute;
	z-index: -1;
	top: 8%;
	right: -12vw;
	width: 50vw;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle at 38% 40%, #51d9ff 0, #1f62ff 21%, #7a20e9 48%, transparent 69%);
	opacity: 0.22;
	filter: blur(16px);
	animation: gato-float 9s ease-in-out infinite;
}

.gato-section-head-light .gato-section-number {
	color: var(--gato-cyan);
}

.gato-section-head-light .gato-section-intro {
	color: var(--gato-muted);
}

.gato-service-list {
	max-width: 1500px;
	margin: 0 auto;
	border-top: 1px solid rgba(255, 255, 255, 0.17);
}

.gato-service-item {
	position: relative;
	display: grid;
	grid-template-columns: 74px 1fr minmax(240px, .85fr) 54px;
	align-items: center;
	gap: 34px;
	padding: 42px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.17);
	transition: padding 220ms ease, background 220ms ease;
}

.gato-service-item::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background: linear-gradient(90deg, rgba(76, 209, 255, 0.12), transparent);
	content: "";
	opacity: 0;
	transition: opacity 220ms ease;
}

.gato-service-item:hover {
	padding-right: 20px;
	padding-left: 20px;
}

.gato-service-item:hover::before {
	opacity: 1;
}

.gato-service-no {
	color: var(--gato-cyan);
	font-size: 0.67rem;
	font-weight: 700;
	letter-spacing: 0.14em;
}

.gato-service-item h3 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.25rem, 2.1vw, 2rem);
	font-weight: 700;
	line-height: 1.45;
}

.gato-service-item h3 small {
	color: #7e93a8;
	font-family: "Inter", sans-serif;
	font-size: 0.6rem;
	letter-spacing: 0.13em;
	text-transform: uppercase;
}

.gato-service-item p {
	margin: 0;
	color: #95a5b5;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 0.9rem;
	line-height: 1.9;
}

.gato-service-arrow {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border: 1px solid rgba(255,255,255,.25);
	border-radius: 50%;
	transition: transform 220ms ease, background 220ms ease, color 220ms ease;
}

.gato-service-item:hover .gato-service-arrow {
	background: #fff;
	color: var(--gato-ink);
	transform: rotate(45deg);
}

.gato-studio {
	display: grid;
	grid-template-columns: minmax(0, .82fr) minmax(400px, 1.18fr);
	gap: clamp(60px, 8vw, 140px);
	background: #eef8ff;
}

.gato-studio::before {
	position: absolute;
	top: 0;
	left: 0;
	width: 45%;
	height: 100%;
	background:
		radial-gradient(circle at 20% 30%, rgba(52, 169, 255, 0.2), transparent 42%),
		linear-gradient(145deg, rgba(255,255,255,.8), transparent 48%);
	content: "";
}

.gato-studio-copy {
	position: relative;
	align-self: center;
}

.gato-studio-copy > p:not(.gato-section-number) {
	max-width: 610px;
	margin: 34px 0 40px;
	color: #526476;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 2.1;
}

.gato-button-dark {
	background: var(--gato-ink);
	color: #fff !important;
}

.gato-studio-visual {
	position: relative;
	display: grid;
	place-items: center;
	min-height: 580px;
	border-radius: 50% 50% 45% 55%;
	background:
		radial-gradient(circle at center, rgba(255,255,255,.98) 0 26%, transparent 27%),
		conic-gradient(from 220deg, #176cd5, #59e0ff, #fff 38%, #929fff 60%, #176cd5);
	box-shadow: 0 40px 100px rgba(18, 99, 170, 0.22);
}

.gato-studio-visual::before {
	position: absolute;
	inset: 12%;
	border: 1px solid rgba(0, 39, 94, 0.16);
	border-radius: 50%;
	content: "";
}

.gato-studio-visual img {
	position: relative;
	z-index: 2;
	width: min(50%, 300px);
	padding: 24px;
	border-radius: 30px;
	background: rgba(255,255,255,.86);
	filter: drop-shadow(0 20px 30px rgba(0, 44, 103, 0.18));
}

.gato-studio-visual p {
	position: absolute;
	right: -18px;
	bottom: 36px;
	margin: 0;
	padding: 13px 20px;
	border-radius: 999px;
	background: var(--gato-ink);
	color: #fff;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.13em;
	box-shadow: 0 14px 30px rgba(0, 22, 50, 0.18);
}

.gato-studio-visual p span {
	color: var(--gato-cyan);
}

.gato-studio-ring {
	position: absolute;
	inset: -4%;
	border: 1px solid rgba(15, 94, 168, 0.2);
	border-radius: 50%;
	animation: gato-spin 24s linear infinite;
}

.gato-studio-ring::before,
.gato-studio-ring::after {
	position: absolute;
	border-radius: 50%;
	content: "";
}

.gato-studio-ring::before {
	top: 11%;
	left: 4%;
	width: 15px;
	height: 15px;
	background: var(--gato-red);
	box-shadow: 0 0 0 9px rgba(255, 29, 56, 0.13);
}

.gato-studio-ring::after {
	right: 3%;
	bottom: 18%;
	width: 11px;
	height: 11px;
	background: var(--gato-blue);
	box-shadow: 0 0 0 8px rgba(5, 109, 195, 0.13);
}

.gato-stats {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	margin-top: clamp(10px, 4vw, 50px);
	border-top: 1px solid rgba(6,21,38,.17);
	border-bottom: 1px solid rgba(6,21,38,.17);
}

.gato-stat {
	padding: 38px clamp(20px, 4vw, 60px);
	border-right: 1px solid rgba(6,21,38,.17);
	text-align: center;
}

.gato-stat:last-child {
	border-right: 0;
}

.gato-stat strong {
	display: block;
	font-size: clamp(2rem, 4vw, 4.4rem);
	font-weight: 700;
	letter-spacing: -0.06em;
	line-height: 1.1;
}

.gato-stat strong span {
	color: var(--gato-blue);
}

.gato-stat p {
	margin: 11px 0 0;
	color: #66798a;
	font-size: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.16em;
}

.gato-office-gallery {
	grid-column: 1 / -1;
	margin-top: clamp(55px, 8vw, 120px);
}

.gato-office-gallery-head {
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(280px, .75fr);
	align-items: end;
	gap: 70px;
	margin-bottom: 42px;
}

.gato-office-gallery-head h3 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(2.6rem, 4.8vw, 5.2rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: 1.15;
}

.gato-office-gallery-head > p {
	margin: 0 0 8px;
	color: #5b6f82;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 2;
}

.gato-office-grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	grid-auto-rows: 310px;
	gap: 16px;
}

.gato-office-photo {
	position: relative;
	overflow: hidden;
	margin: 0;
	border-radius: 20px;
	background: #ccd8e0;
	box-shadow: 0 22px 54px rgba(10, 61, 107, .12);
}

.gato-office-photo::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(2,9,21,.68), transparent 42%);
	content: "";
	pointer-events: none;
}

.gato-office-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.gato-office-photo:hover img {
	transform: scale(1.045);
}

.gato-office-photo figcaption {
	position: absolute;
	z-index: 2;
	right: 22px;
	bottom: 18px;
	left: 22px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	color: #fff;
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .14em;
}

.gato-office-photo figcaption span {
	color: var(--gato-cyan);
}

.gato-office-photo-reception {
	grid-column: 1 / 8;
	grid-row: span 2;
}

.gato-office-photo-workspace,
.gato-office-photo-meeting {
	grid-column: 8 / 13;
}

.gato-office-photo-lounge {
	grid-column: 1 / 5;
}

.gato-office-photo-creative {
	grid-column: 5 / 9;
}

.gato-office-photo-exterior {
	grid-column: 9 / 13;
}

.gato-office-photo-creative img {
	object-position: center 55%;
}

.gato-project-focus {
	grid-column: 1 / -1;
	margin-top: clamp(80px, 10vw, 150px);
}

.gato-project-focus-head {
	display: grid;
	grid-template-columns: minmax(220px, .45fr) minmax(0, 1.55fr);
	align-items: end;
	gap: 50px;
	margin-bottom: 42px;
}

.gato-project-focus-head h3 {
	margin: 0;
	color: var(--gato-ink);
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(2.35rem, 4.5vw, 5rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: 1.15;
}

.gato-project-focus-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 18px;
}

.gato-project-focus-card {
	position: relative;
	overflow: hidden;
	border-radius: 24px;
	background: var(--gato-night);
	box-shadow: 0 28px 68px rgba(8, 45, 83, .16);
	color: #fff;
}

.gato-project-focus-image {
	position: relative;
	overflow: hidden;
	height: clamp(290px, 29vw, 460px);
	background: #07182c;
}

.gato-project-focus-image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(2,9,21,.72), transparent 48%);
	content: "";
	pointer-events: none;
}

.gato-project-focus-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 700ms cubic-bezier(.2,.8,.2,1);
}

.gato-project-focus-alchemist .gato-project-focus-image {
	background: #f8f8f4;
}

.gato-project-focus-alchemist .gato-project-focus-image img {
	object-fit: contain;
}

.gato-project-focus-card:hover .gato-project-focus-image img {
	transform: scale(1.04);
}

.gato-project-focus-copy {
	padding: clamp(28px, 3vw, 46px);
}

.gato-project-focus-copy p {
	margin: 0 0 16px;
	color: var(--gato-cyan);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .15em;
}

.gato-project-focus-copy h4 {
	margin: 0;
	color: #fff !important;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.8rem, 3vw, 3.3rem);
	font-weight: 750;
	letter-spacing: -.045em;
	line-height: 1.3;
}

.gato-project-focus-copy span {
	display: block;
	margin-top: 20px;
	color: #a9b8c7;
	font-family: "Noto Sans JP", sans-serif;
	font-size: .88rem;
	line-height: 1.9;
}

.gato-contact {
	position: relative;
	overflow: hidden;
	min-height: 820px;
	padding: clamp(90px, 10vw, 160px) clamp(24px, 6vw, 110px) 40px;
	background: var(--gato-night);
	color: #fff;
	isolation: isolate;
}

.gato-contact::before {
	position: absolute;
	z-index: -1;
	inset: 0;
	background:
		radial-gradient(circle at 76% 45%, rgba(88, 211, 255, 0.22), transparent 34%),
		linear-gradient(115deg, rgba(23, 55, 120, 0.32), transparent 55%);
	content: "";
}

.gato-contact-art {
	position: absolute;
	z-index: -1;
	top: -22%;
	right: -13%;
	width: 62vw;
	aspect-ratio: 1;
	border: 1px solid rgba(255,255,255,.19);
	border-radius: 50%;
	box-shadow:
		0 0 0 8vw rgba(50, 111, 255, .04),
		0 0 0 16vw rgba(68, 185, 255, .025);
	animation: gato-spin 32s linear infinite;
}

.gato-contact-art::before,
.gato-contact-art::after {
	position: absolute;
	border-radius: 50%;
	content: "";
}

.gato-contact-art::before {
	inset: 16%;
	border: 1px solid rgba(90,217,255,.28);
}

.gato-contact-art::after {
	top: 12%;
	left: 8%;
	width: 24px;
	height: 24px;
	background: var(--gato-cyan);
	box-shadow: 0 0 40px var(--gato-cyan);
}

.gato-contact-inner {
	max-width: 1050px;
}

.gato-contact .gato-section-number {
	color: var(--gato-cyan);
}

.gato-contact h2 {
	font-size: clamp(3.4rem, 7vw, 8rem);
}

.gato-contact-inner > p:not(.gato-section-number) {
	margin: 34px 0 48px;
	color: #9eb0c1;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 2;
}

.gato-contact-methods {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	width: min(940px, 100%);
	border-top: 1px solid rgba(255,255,255,.35);
	border-bottom: 1px solid rgba(255,255,255,.35);
}

.gato-contact-method {
	position: relative;
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 8px 20px;
	min-width: 0;
	padding: 25px 26px 25px 0;
	transition: padding 220ms ease, background 220ms ease;
}

.gato-contact-method + .gato-contact-method {
	padding-left: 28px;
	border-left: 1px solid rgba(255,255,255,.22);
}

.gato-contact-method:hover {
	padding-right: 18px;
	background: rgba(255,255,255,.045);
}

.gato-contact-method small {
	grid-column: 1;
	color: var(--gato-cyan);
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .16em;
}

.gato-contact-method > span {
	grid-column: 1;
	overflow: hidden;
	font-size: clamp(1rem, 1.7vw, 1.55rem);
	font-weight: 600;
	letter-spacing: -.02em;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.gato-contact-method b {
	grid-row: 1 / 3;
	grid-column: 2;
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: #fff;
	color: var(--gato-ink);
	font-size: 1rem;
	transition: transform 220ms ease;
}

.gato-contact-method:hover b {
	transform: rotate(45deg);
}

.gato-contact-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: min(620px, 100%);
	padding: 23px 0;
	border-top: 1px solid rgba(255,255,255,.35);
	border-bottom: 1px solid rgba(255,255,255,.35);
	font-size: clamp(1.1rem, 2vw, 1.8rem);
	font-weight: 700;
	letter-spacing: .12em;
}

.gato-contact-link span:last-child {
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: #fff;
	color: var(--gato-ink);
	transition: transform 220ms ease;
}

.gato-contact-link:hover span:last-child {
	transform: rotate(45deg);
}

.gato-contact-footer {
	position: relative;
	display: grid;
	grid-template-columns: auto 1fr auto;
	align-items: end;
	gap: 28px;
	margin-top: clamp(72px, 8vw, 120px);
	padding-top: 25px;
	border-top: 1px solid rgba(255,255,255,.14);
}

.gato-contact-footer img {
	width: 70px;
	padding: 6px;
	border-radius: 9px;
	background: rgba(255,255,255,.92);
}

.gato-contact-footer p {
	margin: 0;
	color: #7f92a5;
	font-size: .6rem;
	font-weight: 700;
	letter-spacing: .13em;
	line-height: 1.65;
}

.gato-contact-footer p:last-child {
	text-align: right;
}

.gato-company {
	display: grid;
	grid-template-columns: minmax(360px, .82fr) minmax(0, 1.18fr);
	align-items: center;
	gap: clamp(58px, 7vw, 120px);
	background:
		radial-gradient(circle at 12% 22%, rgba(72, 202, 255, .24), transparent 28%),
		linear-gradient(135deg, #eef9ff 0%, #fff 62%);
}

.gato-company::before {
	position: absolute;
	top: 0;
	right: 8%;
	width: 1px;
	height: 100%;
	background: linear-gradient(transparent, rgba(5,109,195,.18), transparent);
	content: "";
}

.gato-company-visual {
	position: relative;
	overflow: hidden;
	min-height: 790px;
	border-radius: 260px 260px 34px 34px;
	background: #0b3e87;
	box-shadow: 0 45px 100px rgba(8, 70, 134, .23);
}

.gato-company-portrait {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 49%;
}

.gato-company-portrait-alchemist {
	object-position: center top;
}

.gato-company-visual::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(2,9,21,.72), transparent 38%),
		linear-gradient(140deg, rgba(35, 96, 220, .22), transparent 50%);
	content: "";
	pointer-events: none;
}

.gato-company-logo {
	position: absolute;
	z-index: 3;
	top: 42px;
	left: 42px;
	display: flex;
	align-items: center;
	gap: 17px;
	padding: 12px 18px 12px 12px;
	border: 1px solid rgba(255,255,255,.48);
	border-radius: 18px;
	background: rgba(255,255,255,.88);
	box-shadow: 0 18px 40px rgba(0, 35, 87, .18);
	backdrop-filter: blur(18px);
}

.gato-company-logo img {
	width: 72px;
	height: auto;
}

.gato-company-logo span {
	color: var(--gato-ink);
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .14em;
	line-height: 1.4;
}

.gato-company-float {
	position: absolute;
	z-index: 3;
	right: 30px;
	bottom: 30px;
	min-width: 176px;
	padding: 22px;
	border: 1px solid rgba(255,255,255,.38);
	border-radius: 20px;
	background: rgba(2,9,21,.66);
	color: #fff;
	backdrop-filter: blur(18px);
}

.gato-company-float strong {
	display: block;
	font-size: 3.4rem;
	font-weight: 700;
	letter-spacing: -.08em;
	line-height: .9;
}

.gato-company-float strong span {
	color: var(--gato-cyan);
}

.gato-company-float small {
	display: block;
	margin-top: 12px;
	color: rgba(255,255,255,.7);
	font-size: .57rem;
	font-weight: 700;
	letter-spacing: .13em;
}

.gato-company-copy {
	position: relative;
}

.gato-company-copy h2,
.gato-ai-head h2 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(2.7rem, 4.8vw, 5.5rem);
	font-weight: 800;
	letter-spacing: -.065em;
	line-height: 1.14;
}

.gato-company-lead {
	max-width: 760px;
	margin: 35px 0 44px;
	color: #506173;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 1rem;
	line-height: 2.12;
}

.gato-company-facts {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	border-top: 1px solid rgba(6,21,38,.15);
	border-bottom: 1px solid rgba(6,21,38,.15);
}

.gato-company-fact {
	min-width: 0;
	padding: 26px 20px 26px 0;
	border-right: 1px solid rgba(6,21,38,.15);
}

.gato-company-fact + .gato-company-fact {
	padding-left: 24px;
}

.gato-company-fact:last-child {
	border-right: 0;
}

.gato-company-fact strong {
	display: block;
	margin-bottom: 10px;
	color: var(--gato-blue);
	font-size: clamp(2rem, 3.4vw, 3.6rem);
	font-weight: 700;
	letter-spacing: -.07em;
	line-height: 1;
}

.gato-company-fact span {
	color: #607285;
	font-family: "Noto Sans JP", sans-serif;
	font-size: .73rem;
	line-height: 1.75;
}

.gato-location-line {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	margin-top: 32px;
	color: #637588;
	font-size: .6rem;
	font-weight: 800;
	letter-spacing: .11em;
}

.gato-location-line i {
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: var(--gato-blue);
	box-shadow: 0 0 12px rgba(5,109,195,.55);
}

.gato-production-story {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: minmax(0, 1.18fr) minmax(350px, .82fr);
	overflow: hidden;
	margin-top: clamp(35px, 6vw, 90px);
	border-radius: 28px;
	background: var(--gato-night);
	box-shadow: 0 35px 90px rgba(2, 25, 55, .2);
	color: #fff;
}

.gato-production-story-image {
	position: relative;
	min-height: 480px;
	overflow: hidden;
	background: #fff;
}

.gato-production-story-image::after {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, transparent 68%, var(--gato-night));
	content: "";
}

.gato-production-story-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transform: scale(1.03);
}

.gato-production-story-copy {
	align-self: center;
	padding: clamp(38px, 5vw, 76px);
}

.gato-production-story-copy > p,
.gato-art-showcase-copy > p:first-child {
	margin: 0 0 22px;
	color: var(--gato-cyan);
	font-size: .62rem;
	font-weight: 800;
	letter-spacing: .16em;
}

.gato-production-story-copy h3,
.gato-art-showcase-copy h3 {
	margin: 0;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.55rem, 2.5vw, 2.75rem);
	font-weight: 700;
	letter-spacing: -.035em;
	line-height: 1.55;
}

.gato-production-story-copy ul {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 14px 24px;
	padding: 28px 0 0;
	margin: 30px 0 0;
	border-top: 1px solid rgba(255,255,255,.16);
	list-style: none;
}

.gato-production-story-copy li {
	color: #a7b5c4;
	font-family: "Noto Sans JP", sans-serif;
	font-size: .72rem;
}

.gato-production-story-copy li span {
	display: block;
	color: #fff;
	font-family: "Inter", sans-serif;
	font-size: 1.6rem;
	font-weight: 700;
}

.gato-collaboration {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: 250px 1fr;
	align-items: center;
	gap: 30px;
	margin-top: 34px;
	padding: 24px 0;
	border-top: 1px solid rgba(6,21,38,.16);
	border-bottom: 1px solid rgba(6,21,38,.16);
}

.gato-collaboration p {
	margin: 0;
	color: var(--gato-blue);
	font-size: .58rem;
	font-weight: 800;
	letter-spacing: .15em;
}

.gato-collaboration div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 30px;
}

.gato-collaboration span {
	color: #7d8c9b;
	font-size: clamp(.78rem, 1.1vw, 1rem);
	font-weight: 800;
	letter-spacing: .08em;
}

.gato-art-showcase {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.25fr) minmax(320px, .75fr);
	overflow: hidden;
	max-width: 1500px;
	margin: clamp(90px, 10vw, 160px) auto 0;
	border-radius: 26px;
	background: var(--gato-ink);
	color: #fff;
}

.gato-art-showcase-image {
	min-height: 510px;
	overflow: hidden;
	background: #fff;
}

.gato-art-showcase-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.gato-art-showcase-copy {
	align-self: center;
	padding: clamp(38px, 5vw, 72px);
}

.gato-art-showcase-copy > p:last-child {
	margin: 28px 0 0;
	color: #9db0c2;
	font-family: "Noto Sans JP", sans-serif;
	line-height: 1.9;
}

.gato-ai {
	overflow: hidden;
	background:
		radial-gradient(circle at 88% 10%, rgba(63, 128, 255, .2), transparent 24%),
		linear-gradient(160deg, #f5fbff 0%, #dcefff 55%, #f8fbff 100%);
}

.gato-ai::before {
	position: absolute;
	top: -20vw;
	right: -14vw;
	width: 55vw;
	aspect-ratio: 1;
	border: 1px solid rgba(5,109,195,.16);
	border-radius: 50%;
	box-shadow: 0 0 0 7vw rgba(5,109,195,.025), 0 0 0 14vw rgba(5,109,195,.018);
	content: "";
}

.gato-ai-head {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr);
	align-items: end;
	gap: 70px;
	max-width: 1500px;
	margin: 0 auto clamp(58px, 7vw, 100px);
}

.gato-ai-grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 18px;
	max-width: 1500px;
	margin: 0 auto;
}

.gato-ai-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 520px;
	overflow: hidden;
	padding: clamp(32px, 3.2vw, 52px);
	border: 1px solid rgba(5, 63, 120, .14);
	border-radius: 24px;
	background: rgba(255,255,255,.82);
	box-shadow: 0 24px 60px rgba(26, 83, 142, .09);
	backdrop-filter: blur(20px);
}

.gato-ai-card-blue {
	background: linear-gradient(145deg, #075bb2, #071b45);
	color: #fff;
	transform: translateY(-24px);
}

.gato-ai-card-image {
	background: linear-gradient(145deg, rgba(255,255,255,.94), rgba(208,238,255,.86));
}

.gato-ai-card-art {
	position: absolute;
	top: -11%;
	right: -20%;
	width: 78%;
	aspect-ratio: 1;
	border-radius: 46% 54% 66% 34%;
	background:
		radial-gradient(circle at 38% 34%, #fff 0 3%, #57e3ff 6%, #3965ff 28%, #811be9 54%, transparent 70%);
	filter: blur(1px);
	opacity: .62;
	animation: gato-float 8s ease-in-out infinite;
}

.gato-ai-card-no {
	position: relative;
	z-index: 2;
	color: var(--gato-blue);
	font-size: .61rem;
	font-weight: 800;
	letter-spacing: .16em;
}

.gato-ai-card-blue .gato-ai-card-no {
	color: var(--gato-cyan);
}

.gato-ai-card h3 {
	position: relative;
	z-index: 2;
	margin: 70px 0 22px;
	font-family: "Noto Sans JP", sans-serif;
	font-size: clamp(1.45rem, 2.2vw, 2.25rem);
	font-weight: 700;
	line-height: 1.5;
}

.gato-ai-card p {
	position: relative;
	z-index: 2;
	margin: 0;
	color: #5c6f82;
	font-family: "Noto Sans JP", sans-serif;
	font-size: .87rem;
	line-height: 1.95;
}

.gato-ai-card-blue p {
	color: #aebdcb;
}

.gato-ai-card ul {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 0;
	margin: auto 0 0;
	list-style: none;
}

.gato-ai-card li {
	padding: 8px 11px;
	border: 1px solid rgba(4,77,147,.18);
	border-radius: 999px;
	color: #315d84;
	font-family: "Noto Sans JP", sans-serif;
	font-size: .66rem;
}

.gato-ai-card-blue li {
	border-color: rgba(255,255,255,.2);
	color: #d9edf7;
}

.gato-ai-flow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: 1500px;
	margin: 70px auto 0;
	padding: 20px 0;
	border-top: 1px solid rgba(6,21,38,.16);
	border-bottom: 1px solid rgba(6,21,38,.16);
	color: #486b89;
	font-size: .64rem;
	font-weight: 800;
	letter-spacing: .12em;
}

.gato-ai-flow i {
	color: var(--gato-blue);
	font-size: 1rem;
	font-style: normal;
}

.gato-studio-visual-rich {
	overflow: hidden;
	border-radius: 36px;
	background: #0c4a9e;
}

.gato-studio-visual-rich::before {
	z-index: 2;
	inset: 0;
	border: 0;
	border-radius: inherit;
	background: linear-gradient(0deg, rgba(2,9,21,.74), transparent 45%);
}

.gato-studio-visual img.gato-studio-character-art {
	position: absolute;
	z-index: 1;
	inset: 0;
	width: 100%;
	height: 100%;
	padding: 0;
	border-radius: inherit;
	background: none;
	filter: none;
	object-fit: cover;
	object-position: center 51%;
}

.gato-studio-visual img.gato-studio-shimajiro-art {
	object-position: center;
}

.gato-studio-brand-card {
	position: absolute;
	z-index: 4;
	right: 26px;
	bottom: 26px;
	left: 26px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 14px 18px;
	border: 1px solid rgba(255,255,255,.35);
	border-radius: 18px;
	background: rgba(2,9,21,.68);
	backdrop-filter: blur(18px);
}

.gato-studio-brand-card img {
	width: 84px;
	height: auto;
	padding: 7px;
	border-radius: 10px;
	background: rgba(255,255,255,.93);
}

.gato-studio-visual .gato-studio-brand-card p {
	position: static;
	padding: 0;
	background: none;
	box-shadow: none;
	font-size: .57rem;
	text-align: right;
}

.gato-contact::after {
	position: absolute;
	z-index: -1;
	inset: 0;
	background-image:
		linear-gradient(90deg, var(--gato-night) 0%, rgba(2,9,21,.94) 36%, rgba(2,9,21,.26) 100%),
		var(--gato-banner-image);
	background-position: center, center;
	background-size: cover;
	content: "";
	opacity: .7;
	mask-image: linear-gradient(90deg, transparent 10%, #000 42%, #000);
}

.gato-reveal {
	opacity: 0;
	transform: translateY(34px);
	transition:
		opacity 800ms cubic-bezier(0.2, 0.8, 0.2, 1),
		transform 800ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.gato-reveal.is-visible {
	opacity: 1;
	transform: translateY(0);
}

@keyframes gato-hero-breathe {
	from { transform: scale(1.04); }
	to { transform: scale(1.1); }
}

@keyframes gato-spin {
	to { transform: rotate(360deg); }
}

@keyframes gato-scroll {
	0% { transform: translateY(-36px); }
	50%, 100% { transform: translateY(70px); }
}

@keyframes gato-ticker {
	to { transform: translateX(-50%); }
}

@keyframes gato-float {
	0%, 100% { transform: translateY(0) rotate(-4deg); }
	50% { transform: translateY(-18px) rotate(4deg); }
}

@media (max-width: 1000px) {
	.gato-hero {
		min-height: 850px;
	}

	.gato-hero-content {
		width: min(760px, 86vw);
	}

	.gato-hero-art {
		background-position: 62% center;
	}

	.gato-section-head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 30px;
	}

	.gato-section-intro {
		max-width: 650px;
	}

	.gato-service-item {
		grid-template-columns: 52px 1fr 42px;
	}

	.gato-service-item p {
		grid-column: 2 / 3;
	}

	.gato-service-arrow {
		grid-row: 1 / 3;
		grid-column: 3;
	}

	.gato-studio {
		grid-template-columns: 1fr;
	}

	.gato-studio-copy {
		max-width: 760px;
	}

	.gato-studio-visual {
		width: min(740px, 90%);
		min-height: auto;
		aspect-ratio: 1;
		margin: 0 auto;
	}

	.gato-company {
		grid-template-columns: 1fr;
	}

	.gato-company-visual {
		width: min(720px, 100%);
		min-height: 760px;
		margin: 0 auto;
	}

	.gato-company-copy {
		max-width: 850px;
	}

	.gato-production-story {
		grid-template-columns: 1fr;
	}

	.gato-production-story-image {
		min-height: 480px;
	}

	.gato-production-story-image::after {
		background: linear-gradient(0deg, var(--gato-night), transparent 35%);
	}

	.gato-collaboration {
		grid-template-columns: 1fr;
	}

	.gato-collaboration div {
		justify-content: flex-start;
	}

	.gato-art-showcase {
		grid-template-columns: 1fr;
	}

	.gato-art-showcase-image {
		min-height: 480px;
	}

	.gato-ai-head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 30px;
	}

	.gato-ai-grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gato-ai-card-image {
		grid-column: 1 / -1;
		min-height: 440px;
	}

	.gato-office-gallery-head {
		grid-template-columns: 1fr;
		align-items: start;
		gap: 24px;
	}

	.gato-office-gallery-head > p {
		max-width: 680px;
	}

	.gato-office-grid {
		grid-auto-rows: 260px;
	}

	.gato-project-focus-head {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

@media (max-width: 760px) {
	.gato-nav {
		height: 80px;
		padding: 0 20px;
	}

	.gato-brand {
		width: 75px;
		height: 55px;
	}

	.gato-menu-button {
		position: relative;
		z-index: 12;
		display: block;
	}

	.gato-menu-button[aria-expanded="true"] span:nth-child(1) {
		transform: translateY(3.5px) rotate(45deg);
	}

	.gato-menu-button[aria-expanded="true"] span:nth-child(2) {
		transform: translateY(-3.5px) rotate(-45deg);
	}

	.gato-menu {
		position: absolute;
		z-index: 10;
		top: 0;
		right: 0;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		width: min(86vw, 360px);
		height: 100vh;
		padding: 130px 42px;
		background: rgba(2, 9, 21, .97);
		box-shadow: -20px 0 60px rgba(0,0,0,.28);
		transform: translateX(105%);
		transition: transform 350ms cubic-bezier(.2,.8,.2,1);
	}

	.gato-menu.is-open {
		transform: translateX(0);
	}

	.gato-menu a {
		font-size: .92rem;
	}

	.gato-language-switch {
		min-height: 44px;
		padding: 10px 16px;
		font-size: .78rem;
	}

	.gato-hero {
		min-height: 760px;
		padding: 128px 24px 64px;
	}

	.gato-hero-art {
		background-position: 67% center;
	}

	.gato-hero-shade {
		background:
			linear-gradient(90deg, rgba(0,12,32,.9), rgba(0,22,60,.26)),
			linear-gradient(0deg, rgba(0,9,25,.82), transparent 72%);
	}

	.gato-hero-content {
		width: 100%;
	}

	.gato-hero h1 {
		font-size: clamp(3rem, 13vw, 5rem);
		letter-spacing: -.075em;
	}

	.gato-hero-copy br {
		display: none;
	}

	.gato-hero-actions {
		align-items: flex-start;
		flex-direction: column;
		gap: 24px;
	}

	.gato-hero-meta,
	.gato-orbit-two {
		display: none;
	}

	.gato-orbit-one {
		top: 18%;
		right: -35%;
		width: 90vw;
	}

	.gato-section {
		padding: 90px 24px;
	}

	.gato-section-head h2,
	.gato-studio-copy h2,
	.gato-contact h2 {
		font-size: clamp(2.7rem, 12vw, 4.6rem);
	}

	.gato-work-grid {
		grid-template-columns: 1fr;
		gap: 66px;
	}

	.gato-work-card:nth-child(2),
	.gato-work-card:nth-child(3) {
		margin-top: 0;
	}

	.gato-work-visual,
	.gato-work-featured .gato-work-visual {
		aspect-ratio: 4 / 3;
	}

	.gato-work-view {
		opacity: 1;
		transform: none;
	}

	.gato-service-item {
		grid-template-columns: 40px 1fr;
		gap: 16px;
		padding: 34px 0;
	}

	.gato-service-item p {
		grid-column: 2;
	}

	.gato-service-arrow {
		display: none;
	}

	.gato-studio {
		gap: 55px;
	}

	.gato-studio-visual {
		width: 100%;
		min-height: 360px;
	}

	.gato-studio-visual p {
		right: 0;
		bottom: 12px;
		font-size: .54rem;
	}

	.gato-stats {
		grid-template-columns: 1fr;
	}

	.gato-stat {
		border-right: 0;
		border-bottom: 1px solid rgba(6,21,38,.17);
	}

	.gato-stat:last-child {
		border-bottom: 0;
	}

	.gato-contact {
		min-height: auto;
		padding: 90px 24px 36px;
	}

	.gato-contact-art {
		top: 14%;
		right: -70%;
		width: 140vw;
	}

	.gato-contact-footer {
		grid-template-columns: auto 1fr;
		margin-top: 64px;
	}

	.gato-contact-footer p:first-of-type {
		display: none;
	}

	.gato-company {
		gap: 64px;
	}

	.gato-company-visual {
		min-height: 600px;
		border-radius: 180px 180px 24px 24px;
	}

	.gato-company-logo {
		top: 24px;
		left: 24px;
		gap: 10px;
		padding: 9px 12px 9px 9px;
	}

	.gato-company-logo img {
		width: 56px;
	}

	.gato-company-float {
		right: 18px;
		bottom: 18px;
		min-width: 150px;
		padding: 18px;
	}

	.gato-company-float strong {
		font-size: 2.8rem;
	}

	.gato-company-copy h2,
	.gato-ai-head h2 {
		font-size: clamp(2.6rem, 11.5vw, 4.3rem);
	}

	.gato-company-facts {
		grid-template-columns: 1fr;
	}

	.gato-company-fact,
	.gato-company-fact + .gato-company-fact {
		padding: 22px 0;
		border-right: 0;
		border-bottom: 1px solid rgba(6,21,38,.15);
	}

	.gato-company-fact:last-child {
		border-bottom: 0;
	}

	.gato-production-story {
		margin-top: 10px;
		border-radius: 20px;
	}

	.gato-production-story-image {
		min-height: 300px;
	}

	.gato-production-story-copy {
		padding: 30px 24px 38px;
	}

	.gato-production-story-copy ul {
		grid-template-columns: 1fr 1fr;
	}

	.gato-collaboration {
		margin-top: 24px;
	}

	.gato-collaboration div {
		gap: 14px 22px;
	}

	.gato-art-showcase {
		margin-top: 80px;
		border-radius: 20px;
	}

	.gato-art-showcase-image {
		min-height: 330px;
	}

	.gato-art-showcase-copy {
		padding: 30px 24px 38px;
	}

	.gato-ai-grid {
		grid-template-columns: 1fr;
	}

	.gato-ai-card,
	.gato-ai-card-image {
		grid-column: auto;
		min-height: 460px;
	}

	.gato-ai-card-blue {
		transform: none;
	}

	.gato-ai-flow {
		flex-wrap: wrap;
		justify-content: center;
		line-height: 1.8;
	}

	.gato-studio-visual.gato-studio-visual-rich {
		min-height: 600px;
		aspect-ratio: auto;
	}

	.gato-studio-brand-card {
		right: 16px;
		bottom: 16px;
		left: 16px;
	}

	.gato-studio-visual .gato-studio-brand-card p {
		position: static;
		font-size: .5rem;
	}

	.gato-office-gallery {
		margin-top: 75px;
	}

	.gato-office-gallery-head h3 {
		font-size: clamp(2.6rem, 11vw, 4.2rem);
	}

	.gato-office-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 280px;
		gap: 12px;
	}

	.gato-office-photo {
		grid-row: auto !important;
		grid-column: 1 !important;
		border-radius: 16px;
	}

	.gato-office-photo-reception {
		min-height: 380px;
	}

	.gato-project-focus {
		margin-top: 78px;
	}

	.gato-project-focus-head h3 {
		font-size: clamp(2.35rem, 10.5vw, 4rem);
	}

	.gato-project-focus-grid {
		grid-template-columns: 1fr;
	}

	.gato-project-focus-image {
		height: 310px;
	}

	.gato-contact {
		min-height: auto;
	}

	.gato-contact-methods {
		grid-template-columns: 1fr;
	}

	.gato-contact-method,
	.gato-contact-method + .gato-contact-method {
		padding: 22px 0;
		border-left: 0;
	}

	.gato-contact-method + .gato-contact-method {
		border-top: 1px solid rgba(255,255,255,.22);
	}

	.gato-contact-method:hover {
		padding-right: 8px;
	}
}

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

	.gato-reveal {
		opacity: 1;
		transform: none;
	}
}