/* Final hero reset: transparent Waqu-style layout without the legacy card shell. */

.hero {
	width:min(1200px,calc(100% - 48px));
	min-height:0;
	margin:0 auto;
	padding:42px 0 34px;
	border:0;
	border-radius:0;
	background:transparent;
	box-shadow:none;
	overflow:visible;
}

.hero {
	grid-template-columns:minmax(0,430px) 124px minmax(0,1fr) 84px;
}

.hero__title {
	white-space:nowrap;
}

.hero__frog {
	z-index:4;
	align-self:center;
	display:grid;
	place-items:center;
	position:relative;
	isolation:isolate;
	transform:translateY(20px);
	overflow:visible;
}

.hero__frog::before {
	content:"";
	position:absolute;
	z-index:0;
	inset:-10px -14px -8px;
	border:1px solid rgba(255,255,255,.34);
	border-radius:48% 52% 44% 56%;
	background:rgba(255,247,238,.38);
	box-shadow:0 0 24px rgba(255,209,169,.42);
	backdrop-filter:blur(1.5px);
	pointer-events:none;
}

.hero__frog img {
	position:relative;
	z-index:1;
	width:132px;
	height:132px;
	object-fit:contain;
	filter:drop-shadow(0 0 9px rgba(255,198,155,.72)) drop-shadow(0 10px 8px rgba(42,33,30,.16));
	transform:rotate(-2deg);
}

.hero__frog-caption {
	position:relative;
	z-index:6;
	display:block;
	margin-top:-12px;
	padding:3px 10px 4px;
	border:1px solid rgba(255,255,255,.48);
	border-radius:999px;
	background:rgba(255,247,238,.58);
	box-shadow:0 0 16px rgba(255,196,148,.48);
	color:#2a211e!important;
	font-family:"STKaiti","KaiTi","FZKai-Z03","Microsoft YaHei",sans-serif;
	font-size:18px;
	font-weight:700;
	letter-spacing:.02em;
	line-height:1.25;
	text-align:center;
	text-shadow:.5px .5px 0 #2a211e,0 1px 5px rgba(255,255,255,.95);
	white-space:nowrap;
	transform:rotate(-4deg);
	opacity:1;
	visibility:visible;
}

.hero__art {
	background:transparent;
	border-radius:28px;
	box-shadow:0 18px 38px rgba(83,38,31,.12);
}

.hero__art img {
	padding:0;
	object-fit:cover;
}

@media(max-width:1100px) {
	.hero {
		padding:34px 0 28px;
		grid-template-columns:1fr;
	}
	.hero__frog {
		order:2;
		justify-self:center;
		transform:none;
		margin:-2px 0 10px;
	}
	.hero__art {
		order:3;
	}
	.hero__aside {
		order:4;
	}
}

@media(min-width:1101px) and (max-width:1400px) {
	.hero {
		grid-template-columns:minmax(0,400px) 100px minmax(0,1fr) 92px;
	}
	.hero__frog img {
		width:108px;
		height:108px;
	}
	.hero__brand {
		font-size:clamp(66px,7.5vw,96px);
	}
	.hero__caption {
		font-size:clamp(22px,2.3vw,30px);
	}
}
/* Let the brand mark float over the copy/art boundary instead of taking layout space. */

@media(min-width:1101px) {
	.hero {
		grid-template-columns:minmax(0,470px) minmax(0,1fr) 84px;
	}
	.hero__frog {
		position:absolute;
		left:39%;
		top:55%;
		width:150px;
		height:150px;
		transform:translate(-50%,-50%);
		pointer-events:none;
	}
	.hero__frog img {
		width:150px;
		height:150px;
	}
	.hero__frog-caption {
		margin-top:-12px;
	}
}

/* ---- Mobile: match waqufm.com — single column, frog floats over the top-right. ---- */
@media(max-width:1100px) {
	.hero {
		grid-template-columns:1fr;
		min-height:0;
		padding:34px 0 28px;
	}
	.hero__copy {
		padding-bottom:22px;
	}
	/* frog leaves the grid and floats over the top-right of the copy, waqu-style */
	.hero__frog {
		position:absolute;
		top:70px;
		left:auto;
		right:max(4%,20px);
		width:clamp(120px,22vw,180px);
		height:auto;
		transform:none;
		margin:0;
		pointer-events:none;
	}
	.hero__frog::before {
		display:none;
	}
	.hero__frog img {
		width:100%;
		height:auto;
		transform:none;
	}
	.hero__frog-caption {
		font-size:15px;
	}
	.hero__mood {
		display:none;
	}
	.hero__art {
		aspect-ratio:16/9;
		min-height:0;
	}
	.hero__aside {
		flex-direction:row;
		justify-content:space-between;
		align-items:center;
		gap:20px;
		padding-top:18px;
	}
	.hero__words {
		gap:18px;
		display:flex;
	}
	.hero__note {
		transform-origin:50% 0;
		margin:0;
	}
	.hero__note-string {
		display:none;
	}
	.hero__sign {
		margin-top:0;
	}
}

@media(max-width:640px) {
	.hero {
		padding-top:8px;
	}
	.hero__copy {
		padding-top:18px;
	}
	.hero__frog {
		width:104px;
		top:290px;
		right:6px;
	}
	.hero__frog-caption {
		display:none;
	}
	.hero__summary {
		max-width:62%;
		font-size:14px;
	}
	.hero__art {
		aspect-ratio:4/3;
		border-radius:22px;
	}
	.hero__words {
		flex-wrap:wrap;
		gap:6px 14px;
		font-size:15px;
	}
	.hero__words li {
		white-space:nowrap;
	}
	.hero__note {
		width:118px;
		font-size:18px;
	}
	.hero__sign {
		display:none;
	}
}