/*
 * TAKENAKA Sports Boxing Gym — refinement layer 1.1.0
 */

:root {
	--lime: #c8ff24;
	--soft-white: #f7f6f1;
}

/* Keep Japanese display copy compact and naturally balanced over two lines. */
h1,
h2,
h3,
.arena-lead,
.page-lead,
.section-heading > p,
.character-heading > p,
.local-copy > p,
.global-cta-inner > p {
	text-wrap: balance;
}

.arena-lead,
.page-lead {
	max-width: 36em;
}

.page-lead br,
.arena-lead br {
	display: block;
}

/* Replace every outlined display treatment with clean solid typography. */
.arena-copy .arena-outline,
.hero-outline,
.section-heading h2 em,
.intro-main h2 em,
.strength-title h2 em,
.gallery-heading h2 em,
.news-heading h2 em,
.split-story-title h2 em,
.full-image-quote em,
.trial-intro h2 em {
	color: inherit !important;
	-webkit-text-stroke: 0 !important;
	text-shadow: none !important;
}

.section-heading.light h2 em,
.full-image-quote em,
.global-cta h2 em {
	color: var(--lime) !important;
}

.news-article-meta > b,
.trial-steps article > span {
	color: #666 !important;
	-webkit-text-stroke: 0 !important;
}

.global-cta-word,
.intro-index {
	color: rgba(255, 255, 255, .045) !important;
	-webkit-text-stroke: 0 !important;
}

.intro-index {
	color: rgba(17, 17, 17, .045) !important;
}

.character-tile::before,
.arena-person::before {
	display: none !important;
}

/* Four real alpha cutouts sit on one uninterrupted stage. */
.arena-four-lineup {
	gap: 0 !important;
	overflow: visible;
}

.arena-person,
.arena-person-black,
.arena-person-gray,
.arena-person-lime,
.arena-person-pink {
	background: transparent !important;
	clip-path: none !important;
	overflow: visible !important;
}

.arena-person img {
	background: transparent !important;
	filter: drop-shadow(0 18px 14px rgba(0, 0, 0, .62));
	padding-inline: 0 !important;
}

.arena-person figcaption,
.arena-person-gray figcaption,
.arena-person-lime figcaption,
.arena-person-pink figcaption {
	left: 7px;
	right: 7px;
	bottom: 4px;
	min-height: 62px;
	padding: 14px 12px 10px;
	background: rgba(6, 6, 6, .82) !important;
	border: 1px solid rgba(255, 255, 255, .13);
	backdrop-filter: blur(10px);
}

.arena-person figcaption span {
	color: var(--lime) !important;
}

.character-lineup {
	gap: 0 !important;
	padding-inline: 0 !important;
	background: #080808 !important;
}

.character-tile,
.character-tile.char-black,
.character-tile.char-gray,
.character-tile.char-lime,
.character-tile.char-pink {
	background: transparent !important;
	border-radius: 0 !important;
	border-left: 1px solid rgba(255, 255, 255, .1);
	color: #fff !important;
}

.character-tile:first-child {
	border-left: 0;
}

.character-tile img {
	background: transparent !important;
	padding-inline: 5px !important;
	filter: drop-shadow(0 20px 18px rgba(0, 0, 0, .58));
}

.character-tile > div,
.char-gray > div,
.char-lime > div,
.char-pink > div {
	background: linear-gradient(transparent, #050505 62%) !important;
}

.character-tile b,
.character-tile small,
.character-tile p,
.char-gray b,
.char-gray small,
.char-gray p,
.char-lime b,
.char-lime small,
.char-lime p,
.char-pink b,
.char-pink small,
.char-pink p {
	color: #fff !important;
	text-shadow: 0 2px 9px rgba(0, 0, 0, .9) !important;
}

.character-tile small {
	color: var(--lime) !important;
}

/* Real Google Maps embeds on both the home and contact pages. */
.google-map-embed,
.real-map {
	position: relative;
	background: #111;
	overflow: hidden;
}

.google-map-embed iframe,
.real-map iframe {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 100%;
	border: 0;
	filter: none !important;
}

.google-map-embed::after,
.real-map::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12);
}

/* Valid, single-row navigation with room for every item. */
.desktop-nav > .menu {
	display: flex;
	align-items: stretch;
	height: 100%;
	margin: 0;
	padding: 0;
}

.desktop-nav > .menu > li {
	display: flex;
	height: 100%;
}

.desktop-nav a {
	padding-inline: 9px;
	white-space: nowrap;
}

/* Real-gym media gets a deliberate editorial treatment. */
.real-gym-strip {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 10px;
	margin-top: 56px;
}

.real-gym-strip figure {
	position: relative;
	margin: 0;
	min-height: 390px;
	overflow: hidden;
	background: #111;
}

.real-gym-strip img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .55s cubic-bezier(.16, 1, .3, 1), filter .45s ease;
}

.real-gym-strip figure:hover img {
	transform: scale(1.035);
}

.real-gym-strip figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 54px 16px 16px;
	background: linear-gradient(transparent, rgba(0, 0, 0, .88));
	color: #fff;
	font-size: 9px;
	font-weight: 900;
	letter-spacing: .12em;
}

@media (max-width: 1180px) {
	.desktop-nav a {
		padding-inline: 7px;
		font-size: 9px;
	}
}

@media (max-width: 760px) {
	.arena-four-lineup {
		gap: 0 !important;
	}

	.arena-person figcaption {
		left: 2px;
		right: 2px;
		bottom: 2px;
		min-height: 44px;
		padding: 11px 4px 5px;
	}

	.character-tile img {
		padding-inline: 0 !important;
	}

	.real-gym-strip {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 6px;
		margin-top: 36px;
	}

	.real-gym-strip figure {
		min-height: 310px;
	}

	.google-map-embed {
		height: 460px;
	}
}


/* MOBILE QUALITY PASS: two-line copy, safe widths, and tap-friendly layouts. */
@media (max-width: 760px) {
	html, body { overflow-x: clip; }
	.arena-copy, .arena-stage-four, .arena-four-lineup, .arena-person, .character-lineup, .character-tile { min-width: 0; }
	.arena-lead, .page-lead { width: min(100%, 29em); max-width: 29em; font-size: 12px; line-height: 1.8; }
	.page-lead { min-height: 3.6em; }
	.character-heading > p, .section-heading > p, .local-copy > p, .contact-details > p { max-width: 34em; line-height: 1.9; }
	.arena-stage-four { overflow: hidden !important; }
	.arena-person img { padding-inline: 0 !important; }
	.character-lineup { width: 100%; overflow: hidden; }
	.character-tile { min-height: 300px; }
	.character-tile > span { white-space: nowrap; }
	.real-map, .google-map-embed { width: 100%; min-height: 420px; }
	.real-map iframe, .google-map-embed iframe { width: 100%; min-height: 420px; }
	.trial-form, .trial-form label, .trial-form input, .trial-form select, .trial-form textarea, .application-box { min-width: 0; max-width: 100%; }
	.price-card, .news-row, .flow-item, .rule-item, .footer-nav { min-width: 0; }
	.local-copy dd, .contact-details dd { overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
	.price-grid { grid-template-columns: 1fr; }
	.price-card { min-height: 270px; }
	.real-gym-strip { grid-template-columns: 1fr 1fr; }
	.real-gym-strip figure { min-height: 250px; }
	.page-hero h1 > span { font-size: clamp(58px, 19vw, 86px); }
}

/* HERO AND TWO-LINE FIX 1.1.1 */
.arena-copy { z-index: 40 !important; }
.arena-stage-four { z-index: 2; }
.arena-copy h1 span,
.arena-copy h1 em { white-space: nowrap; }
.character-heading h2 { white-space: nowrap; }

@media (max-width: 760px) {
	.arena-hero { min-height: 0; }
	.arena-hero-main {
		display: flex;
		flex-direction: column;
		min-height: 0;
		padding: 34px 20px 0;
	}
	.arena-copy {
		position: relative;
		order: 1;
		width: 100%;
		padding: 10px 0 0;
	}
	.arena-copy h1 { font-size: clamp(52px, 17vw, 70px); line-height: .78; }
	.arena-copy h1 em { font-size: .43em; }
	.arena-stage-four {
		position: relative !important;
		order: 2;
		left: auto;
		right: auto;
		bottom: auto;
		align-self: stretch;
		width: calc(100% + 40px);
		height: 430px;
		min-height: 430px;
		margin: 24px -20px 0;
		overflow: hidden !important;
	}
	.arena-four-lineup { inset: 38px 1px 0; }
	.character-heading h2 {
		font-size: clamp(38px, 12vw, 50px) !important;
		line-height: .96;
		letter-spacing: -.075em;
	}
}

@media (max-width: 380px) {
	.arena-copy h1 { font-size: 16.2vw; }
	.character-heading h2 { font-size: 11.6vw !important; }
}
