/*
Theme Name: Sysco System WordPress Theme
Theme URI: https://klimazsuzsanna.hu
Author: Sárosi György
Author URI: https://klimazsuzsanna.hu
Description: Egyedi WordPress sablon a klimazsuzsanna.hu weboldalhoz.
Version: 1.9.17
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 8.0
Text Domain: sysco-system
License: Proprietary
License URI:
*/

:root {
	--sysco-color-bg: #f7f4ed;
	--sysco-color-primary: #236b6d;
	--sysco-color-secondary: #659a98;
	--sysco-color-premium: #b7a078;
	--sysco-color-text: #303536;
	--sysco-color-muted: #659a98;
	--sysco-color-surface: #ffffff;
	--sysco-color-border: #e5e0d5;
	--sysco-font-sans: "Segoe UI", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
	--sysco-container: 72rem;
	--sysco-radius: 0.5rem;
	--sysco-shadow: 0 10px 30px rgba(48, 53, 54, 0.08);
	--sysco-header-height: 4.75rem;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

html {
	overflow-x: clip;
	scroll-behavior: smooth;
	scroll-padding-top: var(--sysco-header-height);
}

body {
	margin: 0;
	padding-top: var(--sysco-header-height);
	font-family: var(--sysco-font-sans);
	font-size: 1rem;
	line-height: 1.6;
	color: var(--sysco-color-text);
	background: var(--sysco-color-bg);
}

img {
	max-width: 100%;
	height: auto;
	display: block;
}

a {
	color: var(--sysco-color-primary);
	text-underline-offset: 0.15em;
}

a:hover,
a:focus {
	color: var(--sysco-color-secondary);
}

.site-container {
	width: min(100% - 2rem, var(--sysco-container));
	margin-inline: auto;
}

.site-header {
	background: var(--sysco-color-bg);
	border-bottom: 1px solid var(--sysco-color-border);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 1000;
	height: var(--sysco-header-height);
	min-height: var(--sysco-header-height);
	max-height: var(--sysco-header-height);
	box-sizing: border-box;
	overflow: visible;
}

.admin-bar .site-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .site-header {
		top: 0;
	}
}

.site-header__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
	align-items: center;
	column-gap: 1.25rem;
	height: var(--sysco-header-height);
	min-height: var(--sysco-header-height);
	max-height: var(--sysco-header-height);
	padding: 0;
	overflow: visible;
}

.site-branding {
	justify-self: start;
	min-width: 0;
}

.site-logo-text {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 700;
	letter-spacing: 0.01em;
	line-height: 1.2;
	white-space: nowrap;
}

.site-logo-text a {
	color: var(--sysco-color-text);
	text-decoration: none;
}

.site-logo-text a:hover,
.site-logo-text a:focus {
	color: var(--sysco-color-primary);
}

.custom-logo-link {
	display: inline-flex;
	align-items: center;
}

.custom-logo {
	max-height: 3rem;
	width: auto;
}

.main-navigation {
	justify-self: center;
	grid-column: 2;
}

.main-navigation ul {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: center;
	gap: 0.25rem 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.main-navigation a {
	display: inline-flex;
	align-items: center;
	min-height: 2.5rem;
	color: var(--sysco-color-text);
	text-decoration: none;
	font-weight: 500;
	white-space: nowrap;
}

.main-navigation a:hover,
.main-navigation a:focus,
.main-navigation .current-menu-item > a {
	color: var(--sysco-color-primary);
}

.main-navigation .menu-item-has-children {
	position: relative;
}

.main-navigation .menu-link--toggle {
	cursor: default;
}

.main-navigation .menu-link--toggle::after {
	content: "";
	display: inline-block;
	width: 0.45rem;
	height: 0.45rem;
	margin-left: 0.45rem;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-0.1rem);
	transition: transform 0.2s ease;
}

.main-navigation .menu-item-has-children.is-submenu-open > .menu-link--toggle::after,
.main-navigation .menu-item-has-children:hover > .menu-link--toggle::after,
.main-navigation .menu-item-has-children:focus-within > .menu-link--toggle::after {
	transform: rotate(-135deg) translateY(0.05rem);
}

.main-navigation .sub-menu {
	position: absolute;
	top: calc(100% + 0.35rem);
	left: 50%;
	z-index: 120;
	display: grid;
	gap: 0.15rem;
	min-width: 15rem;
	margin: 0;
	padding: 0.55rem;
	list-style: none;
	border: 1px solid var(--sysco-color-border);
	border-radius: var(--sysco-radius);
	background: var(--sysco-color-surface);
	box-shadow: var(--sysco-shadow);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 0.35rem);
	transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease;
}

.main-navigation .menu-item-has-children:hover > .sub-menu,
.main-navigation .menu-item-has-children:focus-within > .sub-menu,
.main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
}

.main-navigation .sub-menu a {
	display: block;
	width: 100%;
	min-height: auto;
	padding: 0.55rem 0.75rem;
	border-radius: 0.35rem;
	font-size: 0.9375rem;
	font-weight: 500;
	white-space: nowrap;
}

.main-navigation .sub-menu a:hover,
.main-navigation .sub-menu a:focus {
	background: rgba(35, 107, 109, 0.08);
	color: var(--sysco-color-primary);
}

.site-header__actions {
	grid-column: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0.75rem;
}

.site-header--no-menu .site-header__inner {
	grid-template-columns: minmax(0, 1fr) auto;
}

.site-header--no-menu .site-header__actions {
	grid-column: 2;
}

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: 0.5rem 1.25rem;
	border-radius: 999px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.btn--contact {
	background: var(--sysco-color-primary);
	color: #fff;
}

.btn--contact:hover,
.btn--contact:focus {
	background: var(--sysco-color-secondary);
	color: #fff;
}

.menu-toggle {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	border: 1px solid var(--sysco-color-border);
	border-radius: var(--sysco-radius);
	background: var(--sysco-color-bg);
	cursor: pointer;
}

.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	width: 1.125rem;
	height: 0.8125rem;
}

.menu-toggle__bars span {
	display: block;
	height: 2px;
	background: var(--sysco-color-text);
	border-radius: 999px;
}

.site-main {
	min-height: calc(100vh - var(--sysco-header-height));
	background: transparent;
}

.hero {
	position: relative;
	z-index: 1;
	isolation: isolate;
	overflow: hidden;
	min-height: 560px;
	height: auto;
	padding: 2.5rem 0;
	background-color: var(--sysco-color-bg);
	background-image: url("assets/images/hero-karate-bg.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: cover;
}

.hero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		radial-gradient(ellipse 50% 65% at 18% 45%, rgba(247, 244, 237, 0.78) 0%, rgba(247, 244, 237, 0.35) 48%, rgba(247, 244, 237, 0) 75%),
		linear-gradient(90deg, rgba(247, 244, 237, 0.7) 0%, rgba(247, 244, 237, 0.22) 40%, rgba(247, 244, 237, 0.05) 100%);
	pointer-events: none;
}

.hero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
	align-items: center;
	gap: 3rem;
	min-height: 500px;
}

.hero__content {
	max-width: 34rem;
}

.hero__title {
	margin: 0 0 1rem;
	color: var(--sysco-color-primary);
	font-size: clamp(2rem, 5vw, 3.25rem);
	font-weight: 700;
	line-height: 1.15;
	overflow-wrap: break-word;
}

.hero__text {
	margin: 0;
	color: var(--sysco-color-text);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	line-height: 1.7;
}

.hero__scroll-note {
	display: inline-block;
	margin-top: 0.85rem;
}

.hero__media {
	display: flex;
	justify-content: center;
	align-items: center;
}

.hero__portrait {
	width: min(100%, 22rem);
	aspect-ratio: 1;
	object-fit: cover;
	object-position: center 18%;
	border-radius: 50%;
	border: 6px solid var(--sysco-color-surface);
	box-shadow:
		0 0 0 3px var(--sysco-color-premium),
		var(--sysco-shadow);
}

.section-title {
	margin: 0 0 2.5rem;
	color: var(--sysco-color-primary);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	text-align: center;
	overflow-wrap: break-word;
}

.strengths {
	position: relative;
	z-index: 1;
	padding: 4rem 0 5rem;
	background: var(--sysco-color-bg);
}

.strengths__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem 1.75rem;
}

.icon-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	gap: 0.85rem;
}

.icon-box__icon {
	display: grid;
	place-items: center;
	width: 5.5rem;
	height: 5.5rem;
	border-radius: 50%;
	background: rgba(35, 107, 109, 0.08);
	border: 1px solid rgba(183, 160, 120, 0.45);
	color: var(--sysco-color-primary);
}

.icon-box__kanji {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 2.35rem;
	font-weight: 600;
	line-height: 1;
}

.icon-box__title {
	margin: 0;
	color: var(--sysco-color-text);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.3;
}

.icon-box__text {
	margin: 0;
	max-width: 22rem;
	color: var(--sysco-color-text);
	font-size: 1rem;
	line-height: 1.7;
	opacity: 0.92;
}

.parallax-band {
	position: relative;
	z-index: 0;
	width: 100%;
	height: 500px;
	clip-path: inset(0);
	background: #2a2d2e;
}

.parallax-band__media {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: cover;
	filter: grayscale(1) contrast(1.05) brightness(0.78);
	pointer-events: none;
}

.parallax-band::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient(180deg, rgba(247, 244, 237, 0.12) 0%, rgba(48, 53, 54, 0.22) 50%, rgba(247, 244, 237, 0.14) 100%),
		rgba(35, 107, 109, 0.1);
	pointer-events: none;
}

.prose {
	max-width: 42rem;
}

.prose--centered {
	margin-inline: auto;
	text-align: center;
}

.prose p,
.feature p,
.world-card p,
.parents__intro p,
.parents__closing p {
	margin: 0 0 1rem;
	line-height: 1.75;
}

.prose p:last-child,
.feature p:last-child,
.world-card p:last-child {
	margin-bottom: 0;
}

.prose h3,
.parents__grid h3 {
	margin: 0 0 0.85rem;
	color: var(--sysco-color-primary);
	font-size: 1.35rem;
	line-height: 1.3;
}

.lead {
	font-size: 1.2rem;
	font-weight: 600;
	color: var(--sysco-color-primary);
}

.accent-line {
	color: var(--sysco-color-primary);
	font-weight: 600;
}

.about,
.mission,
.help,
.parents,
.world,
.video-gallery,
.contact {
	position: relative;
	z-index: 1;
	padding: 4.5rem 0;
	background: var(--sysco-color-bg);
}

.about__intro {
	margin: 0 auto 2.5rem;
	text-align: center;
	max-width: 48rem;
}

.stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.25rem;
	margin: 0 0 3rem;
}

.stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.35rem;
	padding: 1.25rem 0.75rem;
	text-align: center;
	border-top: 2px solid var(--sysco-color-premium);
}

.stat__value {
	color: var(--sysco-color-primary);
	font-size: clamp(1.75rem, 3vw, 2.25rem);
	font-weight: 700;
	line-height: 1.1;
}

.stat__label {
	color: var(--sysco-color-text);
	font-size: 0.95rem;
	line-height: 1.4;
}

.about__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
}

.mission {
	background: #eef3f0;
}

.mission__content {
	max-width: 46rem;
}

.help__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.feature {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding: 0;
}

.feature__media {
	margin: 0;
	overflow: hidden;
	border-radius: 0.35rem;
	aspect-ratio: 4 / 3;
	background: #e8e4da;
}

.feature__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.02) saturate(0.85);
}

.feature__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 0 0.25rem;
}

.world-card {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 0.25rem 0.5rem;
}

.feature__kanji,
.world-card__kanji {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 2rem;
	font-weight: 600;
	line-height: 1;
	color: var(--sysco-color-premium);
}

.feature__title,
.world-card h3 {
	margin: 0;
	color: var(--sysco-color-primary);
	font-size: 1.35rem;
	line-height: 1.3;
}

.feature__lead {
	margin: 0;
	font-weight: 600;
	color: var(--sysco-color-text);
}

.parents__split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
	align-items: center;
	gap: 2.5rem;
	margin-bottom: 2.5rem;
}

.parents__split--reverse {
	grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr);
}

.parents__intro {
	max-width: none;
	margin: 0;
	text-align: left;
}

.parents__media {
	margin: 0;
	overflow: hidden;
	border-radius: 0.35rem;
	aspect-ratio: 4 / 3;
	background: #e8e4da;
}

.parents__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: grayscale(0.35) contrast(1.02) saturate(0.85);
}

.quote {
	margin: 0 auto 2.5rem;
	padding: 1.5rem 1.75rem;
	max-width: 44rem;
	border-left: 3px solid var(--sysco-color-premium);
	background: rgba(183, 160, 120, 0.12);
}

.section-lead {
	max-width: 44rem;
	margin: 0 auto 2.5rem;
}

.quote--after-grid {
	margin-top: 3rem;
}

.quote p {
	margin: 0;
	color: var(--sysco-color-primary);
	font-size: clamp(1.1rem, 2vw, 1.35rem);
	font-weight: 600;
	line-height: 1.5;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.parents__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.5rem;
	margin-bottom: 2.5rem;
}

.check-list {
	margin: 0.75rem 0 0;
	padding: 0;
	list-style: none;
}

.check-list li {
	position: relative;
	padding: 0.45rem 0 0.45rem 1.5rem;
	line-height: 1.55;
}

.check-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.9rem;
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--sysco-color-secondary);
}

.parents__closing {
	max-width: 48rem;
}

.world__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2rem 2.5rem;
}

.inner-flower {
	margin: 0 auto 2.75rem;
	max-width: min(36rem, 100%);
}

.inner-flower img {
	width: 100%;
	height: auto;
	border-radius: 0.35rem;
	box-shadow: var(--sysco-shadow);
}

.petal-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.75rem 2.5rem;
}

.check-list--centered {
	max-width: 28rem;
	margin: 0 auto 2rem;
}

.video-gallery__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1.5rem;
}

.video-embed {
	position: relative;
	margin: 0;
	overflow: hidden;
	padding-top: 56.25%;
	border-radius: 0.35rem;
	background: #1c2424;
	border: 1px solid var(--sysco-color-border);
}

.video-embed iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

.video-gallery__more {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.4rem 0.7rem;
	margin: 1.75rem 0 0;
	text-align: center;
	font-weight: 600;
	line-height: 1.6;
	color: var(--sysco-color-primary);
}

.video-gallery__more a {
	font-weight: 600;
	word-break: break-all;
}

.contact {
	background: #eef3f0;
	padding-bottom: 5rem;
}

.contact__cta {
	display: flex;
	justify-content: center;
	margin: 2rem 0 0;
}

.page-hero {
	position: relative;
	z-index: 1;
	padding: 3.5rem 0 3rem;
	background: #eef3f0;
	text-align: center;
}

.page-hero--photo {
	isolation: isolate;
	overflow: hidden;
	display: grid;
	align-items: center;
	min-height: min(78vh, 44rem);
	padding: 6.5rem max(1.75rem, calc((100% - var(--sysco-container)) / 2)) 5rem;
	background: #1c2424;
	text-align: left;
}

.page-hero--photo .page-hero__media {
	position: absolute;
	inset: 0;
	z-index: -2;
}

.page-hero--photo .page-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 35%;
	filter: grayscale(0.55) contrast(1.08) brightness(0.72);
}

.page-hero--photo::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(90deg, rgba(28, 36, 36, 0.82) 0%, rgba(28, 36, 36, 0.48) 42%, rgba(28, 36, 36, 0.08) 100%),
		linear-gradient(180deg, rgba(28, 36, 36, 0.22) 0%, rgba(28, 36, 36, 0.12) 45%, rgba(28, 36, 36, 0.28) 100%);
	pointer-events: none;
}

.page-hero--photo .page-hero__inner {
	max-width: 38rem;
	width: 100%;
	margin-inline: 0;
}

.page-hero--photo .page-hero__title {
	color: #f7f4ed;
	font-size: clamp(2.15rem, 5vw, 3.35rem);
	overflow-wrap: break-word;
}

.page-hero--photo .page-hero__text {
	margin: 0;
	max-width: 32rem;
	color: rgba(247, 244, 237, 0.92);
	font-size: clamp(1.05rem, 2vw, 1.25rem);
	overflow-wrap: break-word;
}

.page-hero--compact {
	padding: 3rem 0 2.75rem;
}

.page-hero__inner {
	max-width: 40rem;
	margin-inline: auto;
}

.page-hero__eyebrow {
	margin: 0 0 0.65rem;
	color: var(--sysco-color-premium);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.page-hero__title {
	margin: 0 0 0.85rem;
	color: var(--sysco-color-primary);
	font-size: clamp(1.85rem, 4vw, 2.5rem);
	line-height: 1.2;
}

.page-hero__text {
	margin: 0 auto 1.5rem;
	max-width: 34rem;
	line-height: 1.7;
}

.page-hero__actions {
	margin: 0;
	display: flex;
	justify-content: center;
}

.page-content {
	position: relative;
	z-index: 1;
	padding: 3rem 0 4.5rem;
	background: var(--sysco-color-bg);
}

.page-content--solo {
	padding-top: 4rem;
}

.page-content__inner {
	max-width: 48rem;
	margin-inline: auto;
}

.page-content__header {
	margin-bottom: 1.5rem;
}

.page-content__header .section-title {
	margin-bottom: 0;
}

.contact-channels {
	position: relative;
	z-index: 1;
	padding: 3rem 0 1rem;
	background: var(--sysco-color-bg);
}

.contact-channels__grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.5rem;
}

.contact-box {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.65rem;
	padding: 1.75rem 1.25rem;
	text-align: center;
	background: var(--sysco-color-surface);
	border: 1px solid var(--sysco-color-border);
	border-radius: 0.35rem;
}

.contact-box__icon {
	display: grid;
	place-items: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	color: var(--sysco-color-primary);
	background: rgba(35, 107, 109, 0.08);
	border: 1px solid rgba(183, 160, 120, 0.4);
}

.contact-box__title {
	margin: 0;
	color: var(--sysco-color-primary);
	font-size: 1.2rem;
	line-height: 1.3;
}

.contact-box__text {
	margin: 0;
	color: var(--sysco-color-text);
	font-size: 0.975rem;
	line-height: 1.6;
}

.contact-box__link {
	margin-top: 0.25rem;
	font-weight: 600;
	text-decoration: none;
	word-break: break-word;
}

.contact-form-section {
	position: relative;
	z-index: 1;
	padding: 2.5rem 0 4.5rem;
	background: var(--sysco-color-bg);
}

.contact-form-section__inner {
	max-width: 40rem;
	margin-inline: auto;
}

.contact-form-section__intro {
	margin: -1.25rem auto 2rem;
	text-align: center;
	line-height: 1.7;
}

.contact-form__notice {
	margin: 0 0 1.25rem;
	padding: 0.9rem 1.1rem;
	border-radius: 0.35rem;
	text-align: center;
	font-weight: 600;
	line-height: 1.5;
}

.contact-form__notice--success {
	color: var(--sysco-color-primary);
	background: rgba(35, 107, 109, 0.1);
	border: 1px solid rgba(35, 107, 109, 0.22);
}

.contact-form__notice--error {
	color: #7a2e2e;
	background: rgba(184, 74, 74, 0.1);
	border: 1px solid rgba(184, 74, 74, 0.25);
}

.contact-form__hp {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.contact-form {
	position: relative;
	display: grid;
	gap: 1rem;
}

.contact-form__row {
	display: grid;
	gap: 0.4rem;
}

.contact-form__row label {
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sysco-color-text);
}

.contact-form__row input,
.contact-form__row textarea {
	width: 100%;
	padding: 0.75rem 0.9rem;
	border: 1px solid var(--sysco-color-border);
	border-radius: 0.35rem;
	background: var(--sysco-color-surface);
	color: var(--sysco-color-text);
	font: inherit;
}

.contact-form__row input:focus,
.contact-form__row textarea:focus {
	outline: 2px solid rgba(35, 107, 109, 0.35);
	outline-offset: 1px;
	border-color: var(--sysco-color-primary);
}

.contact-form__actions {
	margin: 0.5rem 0 0;
	display: flex;
	justify-content: center;
}

.contact-form__actions .btn {
	border: 0;
	cursor: pointer;
}

.blog-page,
.single-post,
.latest-posts {
	position: relative;
	z-index: 1;
	padding: 4.5rem 0;
	background: var(--sysco-color-bg);
}

.blog-page__header {
	max-width: 42rem;
	margin: 0 auto 2rem;
	text-align: center;
}

.blog-page__intro {
	margin: -1rem 0 0;
	color: var(--sysco-color-text);
	line-height: 1.7;
}

.blog-categories {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.65rem;
	margin: 0 0 2.5rem;
}

.blog-categories__item {
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	padding: 0.35rem 0.95rem;
	border: 1px solid var(--sysco-color-border);
	border-radius: 999px;
	color: var(--sysco-color-text);
	text-decoration: none;
	font-size: 0.9375rem;
	font-weight: 500;
	background: var(--sysco-color-surface);
}

.blog-categories__item:hover,
.blog-categories__item:focus,
.blog-categories__item.is-active {
	border-color: var(--sysco-color-primary);
	color: #fff;
	background: var(--sysco-color-primary);
}

.post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 2rem;
}

.post-card {
	display: flex;
	flex-direction: column;
	background: var(--sysco-color-surface);
	border: 1px solid var(--sysco-color-border);
	border-radius: 0.35rem;
	overflow: hidden;
}

.post-card__media {
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #e8e4da;
}

.post-card__media img,
.post-card__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.post-card__placeholder {
	background: linear-gradient(135deg, #d7e3e2 0%, #e8e0d0 100%);
}

.post-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.65rem;
	padding: 1.15rem 1.15rem 1.35rem;
	flex: 1;
}

.post-card__category {
	margin: 0;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.post-card__category a {
	color: var(--sysco-color-premium);
	text-decoration: none;
}

.post-card__title {
	margin: 0;
	font-size: 1.2rem;
	line-height: 1.3;
}

.post-card__title a {
	color: var(--sysco-color-primary);
	text-decoration: none;
}

.post-card__title a:hover,
.post-card__title a:focus {
	color: var(--sysco-color-secondary);
}

.post-card__meta {
	margin: 0;
	color: var(--sysco-color-muted);
	font-size: 0.875rem;
}

.post-card__sep {
	margin: 0 0.35rem;
}

.post-card__excerpt {
	margin: 0;
	flex: 1;
	color: var(--sysco-color-text);
	font-size: 0.975rem;
	line-height: 1.65;
}

.post-card__excerpt p {
	margin: 0;
}

.share-buttons {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.45rem 0.65rem;
	margin-top: 0.35rem;
	padding-top: 0.85rem;
	border-top: 1px solid var(--sysco-color-border);
}

.share-buttons__label {
	width: 100%;
	color: var(--sysco-color-muted);
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.share-buttons__link {
	display: inline-flex;
	align-items: center;
	min-height: 1.85rem;
	padding: 0.2rem 0.65rem;
	border: 1px solid var(--sysco-color-border);
	border-radius: 999px;
	color: var(--sysco-color-text);
	text-decoration: none;
	font-size: 0.8125rem;
	font-weight: 500;
}

.share-buttons__link:hover,
.share-buttons__link:focus {
	border-color: var(--sysco-color-primary);
	color: var(--sysco-color-primary);
}

.blog-pagination {
	margin-top: 2.5rem;
}

.blog-pagination .nav-links {
	display: flex;
	justify-content: center;
	gap: 0.75rem;
}

.blog-empty {
	text-align: center;
	color: var(--sysco-color-muted);
}

.latest-posts__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 1rem;
	margin-bottom: 0.5rem;
	position: relative;
}

.latest-posts__header .section-title {
	margin-bottom: 2.5rem;
	text-align: center;
	width: 100%;
}

.latest-posts__all {
	position: absolute;
	right: 0;
	top: 0.35rem;
	font-weight: 600;
	text-decoration: none;
}

.single-post__inner {
	max-width: 48rem;
}

.single-post__header {
	margin-bottom: 1.5rem;
}

.single-post__title {
	margin: 0.5rem 0 0.75rem;
	color: var(--sysco-color-primary);
	font-size: clamp(1.85rem, 4vw, 2.6rem);
	line-height: 1.2;
}

.single-post__media {
	margin: 0 0 1.75rem;
	overflow: hidden;
	border-radius: 0.35rem;
}

.single-post__media img {
	width: 100%;
	height: auto;
}

.single-post__content > * + * {
	margin-top: 1rem;
}

.single-post__footer {
	margin-top: 2rem;
	padding-top: 1.25rem;
	border-top: 1px solid var(--sysco-color-border);
}

.single-post__back {
	margin: 1.25rem 0 0;
}

.single-post__back a {
	font-weight: 600;
	text-decoration: none;
}

.site-footer {
	--sysco-footer-bg: #1a4a4c;
	--sysco-footer-bg-deep: #14393b;
	--sysco-footer-text: #e8efe9;
	--sysco-footer-muted: #a8c4c3;
	--sysco-footer-accent: #d4c0a0;

	position: relative;
	z-index: 1;
	padding: 3.25rem 0 0;
	border-top: 3px solid var(--sysco-color-premium);
	background:
		linear-gradient(160deg, rgba(183, 160, 120, 0.12) 0%, transparent 42%),
		var(--sysco-footer-bg);
	color: var(--sysco-footer-muted);
	font-size: 0.9375rem;
}

.site-footer__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 2rem 1.75rem;
	padding-bottom: 2.75rem;
}

.site-footer__title {
	margin: 0 0 1rem;
	color: var(--sysco-footer-accent);
	font-family: "Noto Serif JP", "Times New Roman", serif;
	font-size: 1.05rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.3;
}

.site-footer__list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.55rem;
}

.site-footer a {
	color: var(--sysco-footer-text);
	text-decoration: none;
}

.site-footer a:hover,
.site-footer a:focus {
	color: var(--sysco-footer-accent);
}

.site-footer__social-lead {
	margin: 1.15rem 0 1rem;
	color: var(--sysco-footer-muted);
	line-height: 1.55;
	font-size: 0.9rem;
}

.site-footer__social {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.75rem;
}

.site-footer__social-link {
	display: inline-flex;
	align-items: center;
	gap: 0.7rem;
	font-weight: 600;
}

.site-footer__social-icon {
	display: grid;
	place-items: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 0.35rem;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(212, 192, 160, 0.35);
	color: var(--sysco-footer-accent);
}

.site-footer__social-link:hover .site-footer__social-icon,
.site-footer__social-link:focus .site-footer__social-icon {
	background: rgba(212, 192, 160, 0.18);
	border-color: var(--sysco-footer-accent);
}

.site-footer__bottom {
	background: var(--sysco-footer-bg-deep);
	border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.site-footer__bottom-inner {
	display: flex;
	justify-content: center;
	text-align: center;
	padding: 1.1rem 0 1.25rem;
	font-size: 0.875rem;
	color: var(--sysco-footer-muted);
}

.site-footer__bottom a {
	color: var(--sysco-footer-text);
	font-weight: 600;
}

.back-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.5rem;
	z-index: 1200;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	padding: 0.7rem 0.95rem;
	border: 1px solid rgba(183, 160, 120, 0.55);
	border-radius: 999px;
	background: var(--sysco-color-primary);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 24px rgba(26, 74, 76, 0.28);
	opacity: 0;
	transform: translateY(0.75rem);
	pointer-events: none;
	transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease;
}

.back-to-top.is-visible {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}

.back-to-top[hidden] {
	display: none !important;
}

.back-to-top:hover,
.back-to-top:focus {
	background: var(--sysco-color-secondary);
	color: #fff;
}

.back-to-top__icon {
	display: grid;
	place-items: center;
	line-height: 0;
}

.site-container--wide {
	width: min(100% - 2rem, 92rem);
}

.page-hero.courses-hero {
	position: relative;
	z-index: 30;
	overflow: visible;
}

.courses-hero {
	overflow: visible;
	background:
		radial-gradient(ellipse 70% 80% at 50% 0%, rgba(35, 107, 109, 0.1) 0%, rgba(238, 243, 240, 0) 70%),
		#eef3f0;
	padding-bottom: 2.25rem;
}

.courses-hero__inner {
	text-align: center;
}

.courses-hero .page-hero__text {
	max-width: 40rem;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 0;
}

.courses {
	position: relative;
	z-index: 1;
	padding: 2rem 0 5rem;
	background: var(--sysco-color-bg);
}

.courses-search {
	position: relative;
	z-index: 40;
	width: 100%;
	max-width: none;
	margin: 2rem 0 0;
	text-align: left;
}

.courses-search__label {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.courses-search__bar {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: stretch;
	background: var(--sysco-color-surface);
	border: 1px solid var(--sysco-color-border);
	border-radius: 1.15rem;
	box-shadow: 0 16px 40px rgba(35, 107, 109, 0.1);
	overflow: visible;
}

.courses-search__bar:focus-within {
	border-color: var(--sysco-color-primary);
	box-shadow:
		0 0 0 3px rgba(35, 107, 109, 0.16),
		0 16px 40px rgba(35, 107, 109, 0.12);
}

.courses-search__field {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	min-width: 0;
	padding: 0.45rem 0.6rem 0.45rem 1.15rem;
}

.courses-search__icon {
	display: grid;
	place-items: center;
	color: var(--sysco-color-premium);
	flex: 0 0 auto;
}

.courses-search__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 3.15rem;
	border: 0;
	background: transparent;
	color: var(--sysco-color-text);
	font: inherit;
	font-size: 1.05rem;
}

.courses-search__input:focus {
	outline: none;
}

.courses-search__input::placeholder {
	color: var(--sysco-color-muted);
	opacity: 0.9;
}

.courses-search__clear {
	flex: 0 0 auto;
	height: 2.3rem;
	padding: 0 0.9rem;
	border: 0;
	border-radius: 999px;
	background: rgba(35, 107, 109, 0.1);
	color: var(--sysco-color-primary);
	font: inherit;
	font-size: 0.8125rem;
	font-weight: 600;
	cursor: pointer;
}

.courses-search__clear:hover,
.courses-search__clear:focus {
	background: var(--sysco-color-primary);
	color: #fff;
}

.courses-search__tab {
	position: relative;
	display: flex;
	align-items: stretch;
	flex: 0 0 auto;
	border-left: 1px solid var(--sysco-color-border);
}

.courses-search__tab-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;
	min-width: 11.5rem;
	padding: 0 1.25rem;
	border: 0;
	border-radius: 0 1.05rem 1.05rem 0;
	background: rgba(35, 107, 109, 0.07);
	color: var(--sysco-color-primary);
	font: inherit;
	font-size: 0.95rem;
	font-weight: 700;
	cursor: pointer;
	white-space: nowrap;
}

.courses-search__tab-btn:hover,
.courses-search__tab-btn:focus,
.courses-search__tab.is-open .courses-search__tab-btn {
	background: var(--sysco-color-primary);
	color: #fff;
}

.courses-search__chevron {
	transition: transform 0.2s ease;
}

.courses-search__tab.is-open .courses-search__chevron {
	transform: rotate(180deg);
}

.courses-search__dropdown {
	position: absolute;
	top: calc(100% + 0.55rem);
	right: 0;
	z-index: 50;
	min-width: 17rem;
	margin: 0;
	padding: 0.45rem;
	list-style: none;
	background: var(--sysco-color-surface);
	border: 1px solid var(--sysco-color-border);
	border-radius: 0.75rem;
	box-shadow: 0 18px 40px rgba(48, 53, 54, 0.14);
}

.courses-search__dropdown[hidden] {
	display: none;
}

.courses-search__option {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	width: 100%;
	padding: 0.7rem 0.8rem;
	border: 0;
	border-radius: 0.45rem;
	background: transparent;
	color: var(--sysco-color-text);
	font: inherit;
	font-size: 0.95rem;
	text-align: left;
	cursor: pointer;
}

.courses-search__option:hover,
.courses-search__option:focus {
	background: rgba(35, 107, 109, 0.08);
	color: var(--sysco-color-primary);
}

.courses-search__option.is-active {
	background: rgba(35, 107, 109, 0.12);
	color: var(--sysco-color-primary);
	font-weight: 700;
}

.courses-search__option-count {
	color: var(--sysco-color-muted);
	font-size: 0.8rem;
	font-weight: 600;
}

.courses-search__meta {
	margin: 0.9rem 0 0;
	text-align: center;
	color: var(--sysco-color-muted);
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.courses-layout {
	display: grid;
	gap: 1.75rem;
}

.courses-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1.35rem;
}

.course-card {
	display: flex;
	flex-direction: column;
	min-width: 0;
	background: var(--sysco-color-surface);
	border: 1px solid var(--sysco-color-border);
	border-radius: 0.5rem;
	overflow: hidden;
	box-shadow: var(--sysco-shadow);
}

.course-card[hidden] {
	display: none !important;
}

.course-card__player {
	position: relative;
	aspect-ratio: 16 / 9;
	background: #1c2424;
	overflow: hidden;
}

.course-card__frame,
.course-card__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	background: #111;
	object-fit: cover;
}

.course-card__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	background:
		radial-gradient(circle at 30% 20%, rgba(183, 160, 120, 0.28), transparent 46%),
		linear-gradient(160deg, #234f51 0%, #1c2424 58%, #303536 100%);
	z-index: 1;
}

.course-card__placeholder > * {
	grid-area: 1 / 1;
}
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.course-card__placeholder--overlay {
	background: linear-gradient(180deg, rgba(28, 36, 36, 0.12) 0%, rgba(28, 36, 36, 0.42) 100%);
}

.course-card__play {
	display: grid;
	place-items: center;
	width: 3.1rem;
	height: 3.1rem;
	border-radius: 50%;
	color: #fff;
	background: rgba(35, 107, 109, 0.92);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28);
	pointer-events: none;
}

.course-card__badge {
	position: absolute;
	left: 0.65rem;
	bottom: 0.65rem;
	z-index: 2;
	padding: 0.2rem 0.55rem;
	border-radius: 999px;
	background: rgba(28, 36, 36, 0.78);
	color: #f7f4ed;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.03em;
}

.course-card__lessons {
	margin: 0 0 0.55rem;
	padding: 0;
	list-style: none;
}

.course-card__lessons li {
	display: flex;
	align-items: center;
	gap: 0.45rem;
	margin: 0 0 0.28rem;
	color: var(--sysco-color-text);
	font-size: 0.82rem;
	line-height: 1.35;
}

.course-card__lesson-play {
	flex: 0 0 auto;
	width: 0.7rem;
	height: 0.7rem;
	border-radius: 50%;
	background: var(--sysco-color-primary);
	box-shadow: 0 0 0 3px rgba(35, 107, 109, 0.15);
}

.course-card__kanji {
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
	font-size: 3rem;
	font-weight: 600;
	line-height: 1;
	color: rgba(247, 244, 237, 0.78);
}

.course-card__kanji--badge {
	position: absolute;
	top: 0.55rem;
	right: 0.65rem;
	z-index: 2;
	font-size: 1.05rem;
	color: rgba(247, 244, 237, 0.72);
	text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
	pointer-events: none;
}

.course-card__body {
	display: flex;
	flex-direction: column;
	gap: 0.45rem;
	padding: 1rem 1rem 1.1rem;
	flex: 1 1 auto;
}

.course-card__meta {
	margin: 0;
	color: var(--sysco-color-premium);
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.course-card__title {
	margin: 0 0 0.35rem;
	color: var(--sysco-color-text);
	font-size: 1.05rem;
	font-weight: 700;
	line-height: 1.35;
}

.btn--buy {
	margin-top: auto;
	width: 100%;
	gap: 0.55rem;
	background: var(--sysco-color-premium);
	color: #fff;
}

.btn--buy:hover,
.btn--buy:focus {
	background: #9d8660;
	color: #fff;
}

.btn--buy__price {
	padding-left: 0.55rem;
	border-left: 1px solid rgba(255, 255, 255, 0.4);
	font-weight: 700;
}

.courses-empty {
	margin: 0;
	padding: 2.5rem 1.5rem;
	text-align: center;
	color: var(--sysco-color-text);
	background: var(--sysco-color-surface);
	border: 1px dashed var(--sysco-color-border);
	border-radius: 0.5rem;
}

.courses-empty[hidden] {
	display: none;
}

.courses-pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 0.45rem;
}

.courses-pagination[hidden] {
	display: none;
}

.courses-pagination__btn {
	min-width: 2.6rem;
	min-height: 2.6rem;
	padding: 0 0.85rem;
	border: 1px solid var(--sysco-color-border);
	border-radius: 999px;
	background: var(--sysco-color-surface);
	color: var(--sysco-color-text);
	font: inherit;
	font-size: 0.9rem;
	font-weight: 600;
	cursor: pointer;
}

.courses-pagination__btn:hover,
.courses-pagination__btn:focus {
	border-color: var(--sysco-color-primary);
	color: var(--sysco-color-primary);
}

.courses-pagination__btn.is-current {
	background: var(--sysco-color-primary);
	border-color: var(--sysco-color-primary);
	color: #fff;
}

.courses-pagination__btn:disabled {
	opacity: 0.4;
	cursor: default;
}

.skip-link:focus {
	clip: auto;
	clip-path: none;
	top: 0.75rem;
	left: 0.75rem;
	z-index: 100000;
	width: auto;
	height: auto;
	padding: 0.6rem 0.9rem;
	border-radius: var(--sysco-radius);
	background: var(--sysco-color-primary);
	color: #fff;
	text-decoration: none;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
	word-wrap: normal !important;
}

@media (max-width: 1024px) and (min-width: 769px) {
	.post-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

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

	.site-footer__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.parents__split {
		gap: 1.75rem;
	}
}

@media (max-width: 1199px) and (min-width: 769px) {
	.courses-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 768px) {
	:root {
		--sysco-header-height: 4.25rem;
	}

	.site-header__inner {
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand actions";
		column-gap: 0.75rem;
	}

	.site-branding {
		grid-area: brand;
	}

	.site-header__actions {
		grid-area: actions;
		grid-column: auto;
	}

	.menu-toggle {
		display: inline-flex;
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 110;
		justify-self: stretch;
		grid-column: 1 / -1;
		margin: 0;
		padding: 0.75rem 1rem 1rem;
		border-bottom: 1px solid var(--sysco-color-border);
		background: var(--sysco-color-bg);
		box-shadow: var(--sysco-shadow);
	}

	.site-header.is-menu-open .main-navigation {
		display: block;
	}

	.main-navigation ul {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: 0;
	}

	.main-navigation a {
		width: 100%;
	}

	.main-navigation .menu-item-has-children {
		width: 100%;
	}

	.main-navigation .menu-link--toggle {
		justify-content: space-between;
		width: 100%;
		cursor: pointer;
	}

	.main-navigation .menu-link--toggle::after {
		margin-left: auto;
	}

	.site-header .main-navigation .menu-item-has-children > .sub-menu,
	.site-header .main-navigation .menu-item-has-children:hover > .sub-menu,
	.site-header .main-navigation .menu-item-has-children:focus-within > .sub-menu,
	.site-header .main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
		position: static;
		top: auto;
		left: 0;
		right: auto;
		display: none;
		min-width: 0;
		width: 100%;
		max-width: 100%;
		margin: 0 0 0.35rem;
		padding: 0.25rem 0 0.35rem 0.75rem;
		border: 0;
		border-left: 2px solid var(--sysco-color-premium);
		border-radius: 0;
		background: transparent;
		box-shadow: none;
		opacity: 1;
		visibility: visible;
		transform: none;
	}

	.site-header .main-navigation .menu-item-has-children.is-submenu-open > .sub-menu {
		display: grid;
	}

	.main-navigation .sub-menu a {
		padding: 0.45rem 0.5rem;
		white-space: normal;
		overflow-wrap: anywhere;
	}

	.site-header.is-menu-open .menu-toggle__bars span:nth-child(1) {
		transform: translateY(5.5px) rotate(45deg);
	}

	.site-header.is-menu-open .menu-toggle__bars span:nth-child(2) {
		opacity: 0;
	}

	.site-header.is-menu-open .menu-toggle__bars span:nth-child(3) {
		transform: translateY(-5.5px) rotate(-45deg);
	}

	.menu-toggle__bars span {
		transition: transform 0.2s ease, opacity 0.2s ease;
	}

	.hero {
		height: auto;
		min-height: 520px;
		padding: 2rem 0;
		background-position: center top;
		background-size: 160% auto;
	}

	.hero::before {
		background:
			linear-gradient(180deg, rgba(247, 244, 237, 0.35) 0%, rgba(247, 244, 237, 0.72) 55%, rgba(247, 244, 237, 0.85) 100%);
	}

	.hero__inner {
		grid-template-columns: 1fr;
		gap: 2rem;
		height: auto;
		text-align: center;
	}

	.hero__content {
		max-width: none;
		order: 1;
	}

	.hero__media {
		order: 0;
	}

	.hero__portrait {
		width: min(100%, 16rem);
		border-width: 4px;
	}

	.strengths {
		padding: 3rem 0 4rem;
	}

	.strengths__grid {
		grid-template-columns: 1fr;
		gap: 2.25rem;
	}

	.parallax-band {
		height: 240px;
	}

	.about,
	.mission,
	.help,
	.parents,
	.world,
	.video-gallery,
	.contact {
		padding: 3.25rem 0;
	}

	.stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.about__grid,
	.help__grid,
	.parents__grid,
	.parents__split,
	.world__grid,
	.petal-grid,
	.video-gallery__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.parents__intro {
		text-align: center;
	}

	.post-grid {
		grid-template-columns: 1fr;
	}

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

	.site-footer__grid {
		grid-template-columns: 1fr;
		gap: 2rem;
	}

	.latest-posts__header {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.latest-posts__header .section-title {
		text-align: center;
		margin-bottom: 1.5rem;
	}

	.latest-posts__all {
		position: static;
	}

	.blog-page,
	.single-post,
	.latest-posts {
		padding: 3.25rem 0;
	}

	.courses {
		padding: 1.5rem 0 3.5rem;
	}

	.courses-search {
		margin: 1.5rem 0 0;
	}

	.courses-search__bar {
		grid-template-columns: 1fr;
	}

	.courses-search__tab {
		border-left: 0;
		border-top: 1px solid var(--sysco-color-border);
	}

	.courses-search__tab-btn {
		width: 100%;
		min-width: 0;
		min-height: 3rem;
		border-radius: 0 0 1.05rem 1.05rem;
	}

	.courses-search__dropdown {
		left: 0;
		right: 0;
		min-width: 0;
	}

	.courses-layout {
		gap: 1.25rem;
	}

	.courses-grid {
		grid-template-columns: 1fr;
	}

	.page-hero--photo {
		min-height: 32rem;
		align-items: center;
		padding: 5.5rem 1.75rem 3.25rem;
		text-align: center;
	}

	.page-hero--photo .page-hero__media img {
		object-position: center 30%;
	}

	.page-hero--photo::before {
		background:
			linear-gradient(180deg, rgba(28, 36, 36, 0.35) 0%, rgba(28, 36, 36, 0.58) 42%, rgba(28, 36, 36, 0.72) 100%);
	}

	.page-hero--photo .page-hero__inner {
		margin-inline: auto;
		text-align: center;
	}

	.page-hero--photo .page-hero__text {
		margin-inline: auto;
	}
}

@media (max-width: 480px) {
	.site-logo-text {
		font-size: 1rem;
	}

	.site-header .btn--contact {
		padding-inline: 0.85rem;
		font-size: 0.875rem;
	}

	.page-hero--photo {
		min-height: 0;
		padding: 5rem 1.5rem 2.75rem;
	}

	.stats {
		gap: 0.85rem;
	}

	.quote {
		padding: 1.15rem 1.1rem;
	}

	.quote p {
		font-size: 1.05rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	.parallax-band__media {
		position: absolute;
		height: 100%;
	}
}