/*!
Theme Name: School of Rock
Theme URI: https://schoolofrock-austria.at
Author: School of Rock Austria
Description: Custom WordPress theme for School of Rock music school in Vienna and Mödling, Austria
Version: 2.9.0
Requires at least: 6.0
Tested up to: 6.7
Requires PHP: 8.0
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: school-of-rock
Domain Path: /languages

Modern dark theme with glassmorphism, scroll-driven animations,
and mobile-first responsive design.
*/

/* ==========================================================================
   Design Tokens
   ========================================================================== */

:root {
	/* Brand */
	--primary-color: #ec3642;
	--primary-hover: #ff4d58;
	--primary-glow: rgba(236, 54, 66, 0.2);
	--primary-subtle: rgba(236, 54, 66, 0.08);

	/* Dark Palette – layered grays for depth */
	--dark-color: #0a0a0a;
	--dark-surface: #131313;
	--dark-surface-alt: #111111;
	--dark-elevated: #1c1c1c;
	--dark-elevated-2: #242424;

	/* Text */
	--light-color: #f5f5f5;
	--text-light: #b8b8b8;
	--text-muted: #888;
	--accent-color: #ec3642;

	/* Borders & Glass */
	--border-color: rgba(255, 255, 255, 0.1);
	--border-subtle: rgba(255, 255, 255, 0.05);
	--glass-bg: rgba(255, 255, 255, 0.04);
	--glass-bg-hover: rgba(255, 255, 255, 0.07);
	--glass-border: rgba(255, 255, 255, 0.1);
	--glass-border-hover: rgba(255, 255, 255, 0.18);

	/* Transitions & Motion */
	--transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: all 0.15s ease;
	--transition-spring: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);

	/* Typography */
	--font-primary: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	--font-size-base: 16px;
	--line-height-base: 1.65;

	/* Layout */
	--section-spacing: clamp(3rem, 5vw, 4.5rem);
	--container-max: 1200px;
	--radius: 16px;
	--radius-sm: 10px;
	--radius-xs: 6px;
}

/* ==========================================================================
   Reset & Base
   ========================================================================== */

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

html {
	scroll-behavior: smooth;
	scroll-padding-top: 100px;
	-webkit-text-size-adjust: 100%;
}

body {
	font-family: var(--font-primary);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: #222;
	background-color: #fff;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

body.dark-theme {
	background-color: var(--dark-color);
	color: #ddd;
}

/* ==========================================================================
   Typography
   ========================================================================== */

h1, h2, h3, h4, h5, h6 {
	font-weight: 800;
	line-height: 1.1;
	margin-bottom: 1rem;
	color: #fff;
	letter-spacing: -0.02em;
}

h1 { font-size: clamp(2.25rem, 5vw, 3.5rem); }
h2 { font-size: clamp(1.85rem, 4.5vw, 2.75rem); }
h3 { font-size: clamp(1.25rem, 2.5vw, 1.6rem); }
h4 { font-size: 1.35rem; }
h5 { font-size: 1.15rem; }
h6 { font-size: 1rem; }

p {
	margin-bottom: 1rem;
}

a {
	color: var(--primary-color);
	text-decoration: none;
	transition: var(--transition-fast);
}

a:hover {
	color: var(--primary-hover);
}

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

/* ==========================================================================
   Container
   ========================================================================== */

.container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

@media (min-width: 768px) {
	.container {
		padding: 0 2rem;
	}
}

/* Override WP core constrained layout to match our container width */
.is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
	max-width: var(--container-max);
}

.is-layout-constrained > .alignwide {
	max-width: var(--container-max);
}

/* Gutenberg group blocks in main content — full-width sections with inner container */
.site-main > .wp-block-group {
	padding: 3rem 1.5rem;
}

@media (min-width: 768px) {
	.site-main > .wp-block-group {
		padding: 3rem 2rem;
	}
}

.site-main > .wp-block-group > .wp-block-group__inner-container {
	max-width: var(--container-max);
	margin: 0 auto;
}

/* ==========================================================================
   Scroll-Driven Animations
   ========================================================================== */

@keyframes fadeSlideUp {
	from {
		opacity: 0;
		transform: translateY(40px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@keyframes fadeScaleIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

/* Progressive enhancement: only animate when browser supports scroll-driven animations
   AND user accepts motion. Uses @supports to prevent opacity:0 in unsupported browsers. */
@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.philosophy-card,
		.instrument-card,
		.coach-card,
		.testimonial-card,
		.location-card,
		.video-card,
		.pricing-table {
			animation: fadeSlideUp 0.6s ease-out both;
			animation-timeline: view();
			animation-range: entry 0% entry 40%;
		}

		.section-header,
		.site-main .wp-block-heading,
		.site-main .section-subtitle {
			animation: fadeSlideUp 0.6s ease-out both;
			animation-timeline: view();
			animation-range: entry 0% entry 30%;
		}

		.cta-section {
			animation: fadeScaleIn 0.6s ease-out both;
			animation-timeline: view();
			animation-range: entry 0% entry 35%;
		}
	}
}

/* ==========================================================================
   Header
   ========================================================================== */

.site-header {
	background-color: rgba(5, 5, 5, 0.55);
	backdrop-filter: blur(24px) saturate(1.4);
	-webkit-backdrop-filter: blur(24px) saturate(1.4);
	color: #fff;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.3);
}

.site-header.sticky-header {
	position: sticky;
	top: 0;
	z-index: 1000;
}

.header-top.utility-bar {
	background-color: #000;
	border-bottom: none;
	font-size: 0.82rem;
	margin: 0;
	margin-bottom: -1px;
	padding: 5px 0;
	position: relative;
	z-index: 1001;
}

.utility-bar-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 5px 1rem;
}

.utility-bar-left,
.utility-bar-center,
.utility-bar-right {
	display: flex;
	align-items: center;
	gap: 1.5rem;
}

.utility-link {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	transition: var(--transition-fast);
}

.utility-link:hover {
	color: var(--primary-color);
}

.utility-kontakt-link {
	color: var(--primary-color) !important;
	font-weight: 700;
}

.utility-kontakt-link:hover {
	color: #fff !important;
}

/* Stunden Buchen as a proper button in the top bar */
.btn-topbar {
	padding: 0.4rem 1rem !important;
	font-size: 0.75rem !important;
	font-weight: 700 !important;
	letter-spacing: 0.04em;
	border-radius: var(--radius-sm);
	margin-left: 0.25rem;
	line-height: 1;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	text-align: center;
}

.social-icons {
	display: flex;
	gap: 0.75rem;
}

.social-icon {
	color: #fff;
	width: 22px;
	height: 22px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background-color: var(--primary-color);
	transition: var(--transition);
	line-height: 0;
	padding: 0;
}

.social-icon svg {
	display: block;
	width: 12px;
	height: 12px;
}

.social-icon:hover {
	color: #fff;
	background-color: var(--primary-hover);
	transform: scale(1.1);
}

.header-main {
	padding: 0.65rem 0;
}

.header-main .header-content {
	min-height: 40px;
}

.header-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1.5rem;
}

.site-branding {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.site-branding a {
	color: #fff;
	font-size: 1.5rem;
	font-weight: 800;
	display: inline-flex;
	align-items: center;
	line-height: 1;
}

.site-branding .custom-logo {
	height: 26px;
	width: auto;
	max-width: 160px;
	vertical-align: middle;
}

.main-navigation {
	flex: 1;
	min-width: 0;
}

.main-navigation ul {
	list-style: none;
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	flex-wrap: nowrap;
}

.main-navigation a {
	color: rgba(255, 255, 255, 0.85);
	font-weight: 500;
	font-size: 0.9rem;
	white-space: nowrap;
	transition: var(--transition-fast);
	position: relative;
	padding: 0.25rem 0;
}

.main-navigation a::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	width: 0;
	height: 2px;
	background: var(--primary-color);
	border-radius: 1px;
	transition: width 0.3s ease;
}

.main-navigation a:hover {
	color: #fff;
}

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

/* Hamburger */
.menu-toggle {
	display: none;
	background: none;
	border: none;
	color: #fff;
	font-size: 1.5rem;
	cursor: pointer;
	position: relative;
}

.hamburger-icon {
	display: block;
	width: 24px;
	height: 18px;
	position: relative;
}

.hamburger-icon::before,
.hamburger-icon::after {
	content: '';
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	background-color: #fff;
	border-radius: 2px;
	transition: all 0.3s ease;
}

.hamburger-icon::before {
	top: 0;
	box-shadow: 0 8px 0 #fff;
}

.hamburger-icon::after {
	bottom: 0;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::before {
	top: 8px;
	transform: rotate(45deg);
	box-shadow: none;
}

.menu-toggle[aria-expanded="true"] .hamburger-icon::after {
	bottom: 8px;
	transform: rotate(-45deg);
}

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

.header-cta .btn {
	white-space: nowrap;
	font-size: 0.78rem;
	padding: 0.55rem 1.2rem;
	letter-spacing: 0.04em;
}

/* Tablet: hide email when space gets tight */
@media (max-width: 960px) {
	.utility-bar .email-link {
		display: none !important;
	}
}

/* Mobile Header */
@media (max-width: 768px) {
	.menu-toggle {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 0.5rem;
		min-width: 44px;
		min-height: 44px;
		order: 3;
	}

	.header-content {
		flex-wrap: nowrap;
		min-height: 56px;
		align-items: center;
	}

	.site-branding {
		flex: 1;
		min-width: 0;
	}

	.site-branding .custom-logo {
		height: 22px;
	}

	.header-cta {
		order: 2;
		margin-left: auto;
	}

	.header-cta .btn {
		font-size: 0.75rem;
		padding: 0.5rem 0.9rem;
	}

	.main-navigation {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background-color: rgba(10, 10, 10, 0.98);
		backdrop-filter: blur(20px);
		-webkit-backdrop-filter: blur(20px);
		padding: 1rem 1.5rem 1.5rem;
		flex-direction: column;
		border-bottom: 1px solid rgba(236, 54, 66, 0.3);
		box-shadow: 0 16px 48px rgba(0, 0, 0, 0.5);
		z-index: 999;
	}

	.main-navigation.active {
		display: flex;
	}

	.main-navigation ul {
		flex-direction: column;
		gap: 0;
	}

	.main-navigation li {
		border-bottom: 1px solid rgba(255, 255, 255, 0.05);
	}

	.main-navigation li:last-child {
		border-bottom: none;
	}

	.main-navigation a {
		display: block;
		padding: 0.85rem 0;
		font-size: 1rem;
	}

	.main-navigation a::after {
		display: none;
	}

	.utility-bar-content {
		padding: 0.55rem 0;
		font-size: 0.8rem;
	}

	.utility-bar-center {
		display: none;
	}

	/* Larger touch targets for mobile */
	.utility-bar .social-icon {
		width: 30px;
		height: 30px;
	}

	.utility-bar .social-icon svg {
		width: 15px;
		height: 15px;
	}

	.utility-bar .btn-topbar {
		padding: 0.5rem 1.3rem !important;
		font-size: 0.8rem !important;
		min-height: 36px;
	}

	.utility-bar .utility-link {
		padding: 0.3rem 0;
		min-height: 36px;
		display: inline-flex;
		align-items: center;
	}

	.header-main {
		padding: 0.75rem 0;
	}

	.header-content {
		min-height: 48px;
	}

	.menu-toggle {
		min-width: 48px;
		min-height: 48px;
	}

	/* Bigger nav items for touch in mobile menu */
	.main-navigation a {
		padding: 1rem 0;
		font-size: 1.05rem;
		min-height: 48px;
		display: flex;
		align-items: center;
	}
}

/* ==========================================================================
   Footer
   ========================================================================== */

.site-footer {
	background-color: #050505;
	color: #fff;
	border-top: 1px solid rgba(236, 54, 66, 0.3);
	margin-top: 0;
	padding-top: 0;
}

/* Footer Social Bar (top strip) – moved to top bar */
.footer-social-bar {
	display: none;
}

.footer-social-bar .container {
	display: flex;
	justify-content: center;
}

.footer-social-bar .footer-social-icons {
	display: flex;
	gap: 0.5rem;
}

.footer-social-bar .footer-social-icons a {
	width: 36px;
	height: 36px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.5);
	border-radius: 50%;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: var(--transition);
}

.footer-social-bar .footer-social-icons a:hover {
	color: #fff;
	background: var(--primary-color);
	border-color: var(--primary-color);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(236, 54, 66, 0.3);
}

.footer-tagline {
	text-align: center;
	padding: 5rem 1.5rem 4rem;
	border-bottom: none;
	position: relative;
	background-image: url('/wp-content/uploads/2026/04/back-to-roots-bg.jpg');
	background-size: cover;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: -1px;
}

.footer-tagline::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: -1px;
	background: rgba(30, 30, 30, 0.55);
	z-index: 0;
}

.footer-tagline .container {
	position: relative;
	z-index: 1;
}

.footer-tagline .tagline-quote {
	font-style: italic;
	font-size: 0.85rem;
	color: rgba(255, 255, 255, 0.7);
	margin-bottom: 1rem;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.footer-tagline .tagline-slogan {
	font-size: clamp(2rem, 6vw, 3.5rem);
	font-weight: 800;
	color: #fff;
	text-transform: uppercase;
	margin-bottom: 1rem;
	letter-spacing: 0.03em;
	line-height: 1.1;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.footer-tagline .tagline-highlight {
	color: var(--primary-color);
	display: block;
	font-size: 1.4em;
}

.footer-tagline .tagline-description {
	font-size: 0.95rem;
	color: rgba(255, 255, 255, 0.75);
	max-width: 550px;
	margin: 0 auto;
	line-height: 1.7;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
}

.footer-tagline .tagline-cta {
	margin-top: 1.75rem;
}

.footer-tagline .tagline-cta .sor-btn {
	text-shadow: none;
}

.footer-main {
	padding: 3rem 0 2rem;
}

.footer-columns {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 3rem;
	margin-bottom: 2rem;
	align-items: center;
}

.footer-column {
	padding: 1rem;
}

/* Make footer column links (Kontakt/Standorte → Kontaktseite) */
a.footer-column-link {
	display: block;
	color: inherit;
	text-decoration: none;
	transition: var(--transition);
	border-radius: var(--radius-md);
	padding: 1rem;
}

a.footer-column-link:hover {
	background: rgba(255, 255, 255, 0.04);
	color: inherit;
}

a.footer-column-link .footer-column {
	padding: 0;
}

.footer-title {
	font-size: 1.1rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: #fff;
	position: relative;
	padding-bottom: 0.75rem;
}

.footer-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 30px;
	height: 2px;
	background: var(--primary-color);
	border-radius: 1px;
}

.footer-contact-item {
	margin-bottom: 0.75rem;
}

.footer-contact-item a {
	color: rgba(255, 255, 255, 0.7);
	transition: var(--transition-fast);
}

.footer-contact-item a:hover {
	color: var(--primary-color);
}

.footer-social-icons {
	display: flex;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.footer-social-icons a {
	color: rgba(255, 255, 255, 0.6);
	transition: var(--transition);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.08);
}

.footer-social-icons a:hover {
	color: #fff;
	background-color: var(--primary-color);
	border-color: var(--primary-color);
	transform: translateY(-3px);
	box-shadow: 0 4px 12px rgba(236, 54, 66, 0.3);
}

.footer-column.footer-navigation {
	display: none;
}

.footer-navigation ul {
	list-style: none;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem 1.5rem;
}

.footer-navigation a {
	color: rgba(255, 255, 255, 0.6);
	transition: var(--transition-fast);
	display: inline-block;
	font-size: 0.95rem;
}

.footer-navigation a:hover {
	color: var(--primary-color);
	transform: translateX(4px);
}

.footer-bottom {
	border-top: 1px solid rgba(255, 255, 255, 0.06);
	padding-top: 2rem;
	padding-bottom: 2rem;
	background-color: rgba(0, 0, 0, 0.3);
}

.footer-bottom-content {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2rem;
}

.footer-copyright {
	font-size: 0.8rem;
	color: rgba(255, 255, 255, 0.4);
}

.footer-copyright a {
	color: var(--primary-color);
}

.footer-legal {
	display: flex;
	gap: 2rem;
	font-size: 0.8rem;
}

.footer-legal a {
	color: rgba(255, 255, 255, 0.5);
	transition: var(--transition-fast);
}

.footer-legal a:hover {
	color: var(--primary-color);
}

/* Back to top */
.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 48px;
	height: 48px;
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	display: none;
	align-items: center;
	justify-content: center;
	font-size: 1.3rem;
	z-index: 999;
	transition: var(--transition);
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
}

.back-to-top:hover {
	background-color: var(--primary-hover);
	transform: translateY(-3px);
	box-shadow: 0 6px 24px rgba(236, 54, 66, 0.4);
}

.back-to-top.show {
	display: flex;
}

@media (max-width: 768px) {
	.footer-columns {
		grid-template-columns: 1fr;
		gap: 1.5rem;
	}

	.footer-bottom-content {
		flex-direction: column;
		text-align: center;
	}

	.footer-legal {
		justify-content: center;
		flex-wrap: wrap;
	}

	.footer-tagline {
		padding: 2.5rem 1rem 1.5rem;
	}

	.footer-columns {
		gap: 1.5rem;
	}
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
	position: relative;
	min-height: 100vh;
	margin-top: -62px; /* Pull up behind sticky navbar */
	padding-top: 62px; /* Compensate so content doesn't hide behind navbar */
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
}

/* Fallback hero background when no inline bg is set */
.hero-section:not([style*="background-image"]),
.hero-section[style=""] {
	background-image: url('assets/images/hero-bg.jpg');
	background-size: cover;
	background-position: center center;
}

/* Multi-layer overlay for depth */
.hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background:
		linear-gradient(180deg,
			rgba(0, 0, 0, 0.3) 0%,
			rgba(0, 0, 0, 0.15) 40%,
			rgba(0, 0, 0, 0.5) 80%,
			rgba(10, 10, 10, 0.95) 100%
		);
	z-index: 1;
}

/* Subtle red glow at top */
.hero-section::before {
	content: '';
	position: absolute;
	top: -30%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	height: 60%;
	background: radial-gradient(ellipse, rgba(236, 54, 66, 0.12) 0%, transparent 70%);
	z-index: 1;
	pointer-events: none;
}

.hero-content {
	position: relative;
	z-index: 2;
	max-width: 750px;
	padding: 2rem 1.5rem;
}

.hero-title {
	font-size: clamp(2.5rem, 7vw, 5rem);
	font-weight: 900;
	margin-bottom: 1.25rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	line-height: 1.0;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5);
}

.hero-subtitle {
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	margin-bottom: 2.5rem;
	color: rgba(255, 255, 255, 0.95);
	line-height: 1.7;
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	font-weight: 500;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.9);
}

.hero-ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
}

/* Scroll indicator */
.hero-section::after {
	content: '';
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	width: 24px;
	height: 38px;
	border: 2px solid rgba(255, 255, 255, 0.25);
	border-radius: 12px;
	z-index: 2;
}

/* Scroll dot — separate element via content trick */
.hero-content::after {
	content: '';
	position: fixed;
	/* We use the ::before on hero-section for the glow, so use CSS on hero-overlay area */
	display: none;
}

@keyframes scrollHint {
	0%, 100% { opacity: 1; transform: translateX(-50%) translateY(0); }
	50% { opacity: 0.3; transform: translateX(-50%) translateY(12px); }
}

/* Animated scroll dot */
.hero-overlay::after {
	content: '';
	position: absolute;
	bottom: 2.55rem;
	left: 50%;
	transform: translateX(-50%);
	width: 3px;
	height: 8px;
	background: var(--primary-color);
	border-radius: 2px;
	z-index: 3;
	animation: scrollHint 2s ease-in-out infinite;
}

@media (max-width: 768px) {
	.hero-section {
		min-height: 80vh;
	}

	.hero-title {
		letter-spacing: 0.02em;
	}

	.hero-ctas {
		flex-direction: column;
		align-items: center;
	}

	.hero-ctas .btn {
		width: 100%;
		max-width: 280px;
	}

	.hero-section::after,
	.hero-overlay::after {
		display: none;
	}
}

/* ==========================================================================
   Sections – Visual Separation with Layered Backgrounds
   ========================================================================== */

.philosophy-section,
.instruments-section,
.coaches-section,
.pricing-section,
.testimonials-section,
.locations-section {
	padding: var(--section-spacing) 0;
	position: relative;
}

/* Stronger visual separation with varied backgrounds */
body.dark-theme .philosophy-section {
	background-color: var(--dark-surface);
	background-image:
		radial-gradient(ellipse at 20% 50%, rgba(236, 54, 66, 0.03) 0%, transparent 50%),
		radial-gradient(ellipse at 80% 20%, rgba(255, 255, 255, 0.01) 0%, transparent 40%);
}

body.dark-theme .instruments-section {
	background-color: var(--dark-color);
}

body.dark-theme .coaches-section {
	background-color: var(--dark-surface);
	background-image: radial-gradient(ellipse at 70% 70%, rgba(236, 54, 66, 0.03) 0%, transparent 50%);
}

body.dark-theme .testimonials-section {
	background-color: var(--dark-elevated);
	background-image: radial-gradient(ellipse at 50% 0%, rgba(236, 54, 66, 0.05) 0%, transparent 50%);
}

body.dark-theme .locations-section {
	background-color: var(--dark-surface);
}

/* Section header with decorative underline */
.section-header {
	text-align: center;
	margin-bottom: 2.5rem;
}

.section-header h2 {
	font-size: clamp(1.85rem, 4.5vw, 2.75rem);
	margin-bottom: 0.5rem;
	color: #fff;
	display: inline-block;
	position: relative;
}

.section-header h2::after {
	content: '';
	display: block;
	width: 50px;
	height: 3px;
	background: var(--primary-color);
	margin: 0.75rem auto 0;
	border-radius: 2px;
	box-shadow: 0 0 12px rgba(236, 54, 66, 0.3);
}

body.dark-theme .section-header h2 {
	color: #fff;
}

.section-subtitle {
	font-size: 1.05rem;
	color: var(--text-muted);
}

body.dark-theme .section-subtitle {
	color: var(--text-light);
}

/* ==========================================================================
   Glassmorphism Cards Base
   ========================================================================== */

.philosophy-card,
.instrument-card,
.coach-card,
.location-card,
.testimonial-card {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	overflow: hidden;
	transition: var(--transition);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.philosophy-card:hover,
.instrument-card:hover,
.coach-card:hover,
.location-card:hover,
.testimonial-card:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-border-hover);
	transform: translateY(-6px);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(236, 54, 66, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

/* ==========================================================================
   Philosophy Cards
   ========================================================================== */

.philosophy-card {
	text-align: center;
}

.philosophy-card .philosophy-image {
	width: 100%;
	height: 200px;
	overflow: hidden;
	position: relative;
}

.philosophy-card .philosophy-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 40%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.6));
	pointer-events: none;
}

.philosophy-card .philosophy-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.philosophy-card:hover .philosophy-image img {
	transform: scale(1.08);
}

.philosophy-card h3 {
	font-size: 1.15rem;
	font-weight: 700;
	margin: 1.25rem 1.5rem 0.5rem;
	color: #fff;
}

.philosophy-card p {
	color: var(--text-light);
	font-size: 0.92rem;
	margin: 0 1.5rem 1.5rem;
	line-height: 1.6;
}

/* ==========================================================================
   Grids
   ========================================================================== */

.philosophy-grid,
.instruments-grid,
.coaches-grid,
.testimonials-grid,
.locations-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 1.5rem;
}

/* ==========================================================================
   Instrument, Coach, Location Cards
   ========================================================================== */

body.dark-theme .instrument-card,
body.dark-theme .coach-card,
body.dark-theme .location-card,
body.dark-theme .testimonial-card {
	color: #fff;
}

body.dark-theme .instrument-card-title,
body.dark-theme .coach-card-name,
body.dark-theme .location-card h3,
body.dark-theme .testimonial-card p {
	color: #fff;
}

body.dark-theme .instrument-card p,
body.dark-theme .coach-card p,
body.dark-theme .location-card p,
body.dark-theme .testimonial-author {
	color: var(--text-light);
}

.instrument-card-image,
.coach-card-image,
.location-card-image {
	width: 100%;
	overflow: hidden;
	background-color: var(--dark-elevated);
	aspect-ratio: 4 / 3;
	position: relative;
}

.instrument-card-image::after,
.coach-card-image::after,
.location-card-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 30%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.4));
	pointer-events: none;
}

.instrument-card-image img,
.coach-card-image img,
.location-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 20%;
	display: block;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Coach portraits: focus on face area (upper third) */
.coach-card-image img {
	object-position: center 15%;
}

.instrument-card:hover .instrument-card-image img,
.coach-card:hover .coach-card-image img,
.location-card:hover .location-card-image img {
	transform: scale(1.06);
}

.instrument-card-content,
.coach-card-content,
.location-card-content {
	padding: 1.5rem;
}

.instrument-card-title,
.coach-card-name,
.location-card-title {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.5rem;
	color: #fff;
}

.coach-card-instruments {
	font-size: 0.82rem;
	color: var(--primary-color);
	margin-bottom: 0.5rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.instrument-card-excerpt,
.coach-card-excerpt {
	color: var(--text-light);
	font-size: 0.92rem;
	margin-bottom: 1rem;
	line-height: 1.55;
}

.instrument-card-link,
.coach-card-link,
.location-card-link {
	color: var(--primary-color);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	font-size: 0.9rem;
	transition: var(--transition-fast);
}

.instrument-card-link:hover,
.coach-card-link:hover,
.location-card-link:hover {
	gap: 0.7rem;
	color: var(--primary-hover);
}

/* Location card map & route */
.location-card-map {
	margin: 1rem 0;
	border-radius: var(--radius-sm);
	overflow: hidden;
}

.location-card-route {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--primary-color);
	border: 1px solid var(--primary-color);
	border-radius: var(--radius-xs);
	padding: 0.5rem 1rem;
	font-size: 0.85rem;
	font-weight: 600;
	transition: var(--transition);
	text-decoration: none;
	margin-bottom: 1rem;
}

.location-card-route:hover {
	background: var(--primary-color);
	color: #fff;
	gap: 0.7rem;
}

/* ==========================================================================
   Testimonial Cards
   ========================================================================== */

.testimonials-grid {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) transparent;
}

.testimonials-grid::-webkit-scrollbar {
	height: 4px;
}

.testimonials-grid::-webkit-scrollbar-track {
	background: transparent;
}

.testimonials-grid::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 2px;
}

.testimonial-card {
	padding: 2rem;
	position: relative;
	min-width: 320px;
	max-width: 380px;
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* Decorative quote mark */
.testimonial-card::before {
	content: '\201C';
	position: absolute;
	top: 1rem;
	right: 1.5rem;
	font-size: 4rem;
	line-height: 1;
	color: rgba(236, 54, 66, 0.15);
	font-family: Georgia, serif;
	pointer-events: none;
}

.testimonial-quote,
.testimonial-card-quote blockquote {
	font-style: italic;
	font-size: 0.95rem;
	line-height: 1.7;
	color: var(--text-light);
	margin-bottom: 1.5rem;
	border-left: 3px solid var(--primary-color);
	padding-left: 1.25rem;
	margin-left: 0;
	margin-right: 0;
}

body.dark-theme .testimonial-card-quote blockquote {
	color: var(--text-light);
}

.testimonial-author,
.testimonial-card-author {
	display: flex;
	align-items: center;
	gap: 1rem;
}

.testimonial-name,
.testimonial-card-name {
	font-weight: 700;
	color: #fff;
	font-size: 0.95rem;
	margin: 0;
}

body.dark-theme .testimonial-card-name {
	color: #fff;
}

.testimonial-age {
	color: var(--primary-color);
	font-size: 0.82rem;
	font-weight: 500;
}

.testimonial-card-image {
	width: 50px;
	height: 50px;
	overflow: hidden;
	border-radius: 50%;
	flex-shrink: 0;
	border: 2px solid rgba(236, 54, 66, 0.3);
}

.testimonial-card-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (max-width: 768px) {
	.testimonial-card {
		min-width: 280px;
		max-width: 320px;
	}
}

/* ==========================================================================
   Video Section
   ========================================================================== */

.videos-section {
	padding: var(--section-spacing) 0;
	background: var(--dark-surface-alt);
}

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

.video-card {
	border-radius: var(--radius);
	overflow: hidden;
	border: 1px solid var(--glass-border);
	transition: var(--transition);
	background: var(--glass-bg);
}

.video-card:hover {
	border-color: rgba(236, 54, 66, 0.3);
	transform: translateY(-4px);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.video-wrapper {
	position: relative;
	width: 100%;
	padding-bottom: 56.25%;
}

.video-wrapper iframe,
.video-wrapper lite-youtube {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* lite-youtube custom element */
lite-youtube {
	background-color: #000;
	position: relative;
	display: block;
	contain: content;
	background-position: center center;
	background-size: cover;
	cursor: pointer;
	max-width: 100%;
}

lite-youtube::before {
	content: '';
	display: block;
	position: absolute;
	top: 0;
	background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/3+CdU5pg4MEEBAg8gICIAdTLjprWnD8fQH68wwGBGTgGEtOy0tsM7y0T2O0qISYT0BRCGm4+Y50lEAAA);
	background-position: top;
	background-repeat: repeat-x;
	height: 60px;
	padding-bottom: 50px;
	width: 100%;
	transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
	z-index: 1;
}

lite-youtube > .lty-playbtn {
	display: block;
	width: 68px;
	height: 48px;
	position: absolute;
	cursor: pointer;
	transform: translate3d(-50%, -50%, 0);
	top: 50%;
	left: 50%;
	z-index: 1;
	background-color: transparent;
	background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 68 48"><path d="M66.52 7.74c-.78-2.93-2.49-5.41-5.42-6.19C55.79.13 34 0 34 0S12.21.13 6.9 1.55c-2.93.78-4.63 3.26-5.42 6.19C.06 13.05 0 24 0 24s.06 10.95 1.48 16.26c.78 2.93 2.49 5.41 5.42 6.19C12.21 47.87 34 48 34 48s21.79-.13 27.1-1.55c2.93-.78 4.64-3.26 5.42-6.19C67.94 34.95 68 24 68 24s-.06-10.95-1.48-16.26z" fill="%23f00"/><path d="M45 24 27 14v20" fill="%23fff"/></svg>');
	filter: grayscale(100%);
	transition: filter .1s cubic-bezier(0, 0, 0.2, 1);
	border: none;
}

lite-youtube:hover > .lty-playbtn,
lite-youtube .lty-playbtn:focus {
	filter: none;
}

lite-youtube.lyt-activated {
	cursor: unset;
}

lite-youtube.lyt-activated::before,
lite-youtube.lyt-activated > .lty-playbtn {
	opacity: 0;
	pointer-events: none;
}

@media (max-width: 768px) {
	.videos-grid {
		grid-template-columns: 1fr;
	}
}

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

	.main-navigation ul {
		gap: 0.75rem;
	}

	.main-navigation a {
		font-size: 0.8rem;
	}

	.header-cta .btn {
		font-size: 0.8rem;
		padding: 0.6rem 1.2rem;
	}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.btn {
	display: inline-block;
	padding: 0.85rem 2rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.9rem;
	text-align: center;
	cursor: pointer;
	transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
	border: 2px solid transparent;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.btn:hover {
	transform: translateY(-2px);
}

.btn-primary {
	background-color: var(--primary-color);
	color: #fff;
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
}

.btn-primary:hover {
	background-color: var(--primary-hover);
	box-shadow: 0 8px 28px rgba(236, 54, 66, 0.4);
	color: #fff;
}

.btn-secondary {
	background-color: rgba(255, 255, 255, 0.08);
	color: #fff;
	border-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.15);
	border-color: rgba(255, 255, 255, 0.6);
	color: #fff;
}

/* Hero secondary button – more visible */
.hero-ctas .btn-secondary {
	background-color: rgba(255, 255, 255, 0.12);
	border-color: rgba(255, 255, 255, 0.4);
	margin-top: 0.25rem;
}

.hero-ctas .btn-secondary:hover {
	background-color: rgba(255, 255, 255, 0.2);
	border-color: rgba(255, 255, 255, 0.7);
}

.btn-lg {
	padding: 1rem 2.5rem;
	font-size: 1rem;
}

/* ==========================================================================
   CTA Section
   ========================================================================== */

.cta-section {
	padding: var(--section-spacing) 2rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	background: linear-gradient(135deg, #e8730e 0%, #f5a623 40%, #f7c948 100%);
}

/* Decorative glow – disabled for gradient bg */
.cta-section::before {
	display: none;
}

.cta-section h2 {
	font-size: clamp(1.5rem, 4vw, 2.25rem);
	margin-bottom: 1rem;
	color: #fff;
	position: relative;
}

.cta-section p {
	font-size: 1.05rem;
	margin-bottom: 2rem;
	color: rgba(255, 255, 255, 0.9);
	max-width: 550px;
	margin-left: auto;
	margin-right: auto;
	position: relative;
}

.cta-section .btn {
	position: relative;
	margin-top: 0.5rem;
}

.cta-section .btn-primary {
	background-color: rgba(0, 0, 0, 0.8);
	color: #fff;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.cta-section .btn-primary:hover {
	background-color: #000;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

@media (max-width: 768px) {
	.cta-section {
		padding: 3.5rem 1.5rem;
	}
}

/* ==========================================================================
   Pricing
   ========================================================================== */

.pricing-section {
	background-color: #f9f9f9;
}

body.dark-theme .pricing-section {
	background-color: var(--dark-color);
}

.pricing-tables {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 1.5rem;
	margin: 3rem 0;
}

@media (max-width: 768px) {
	.pricing-tables {
		grid-template-columns: 1fr;
	}
}

.pricing-table {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	padding: 2rem;
	transition: var(--transition);
}

body.dark-theme .pricing-table {
	background: var(--glass-bg);
	border-color: var(--glass-border);
}

.pricing-table:hover {
	border-color: rgba(236, 54, 66, 0.3);
	transform: translateY(-4px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(236, 54, 66, 0.15);
}

.pricing-table-title {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	color: var(--primary-color);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.pricing-table table {
	width: 100%;
	border-collapse: collapse;
}

.pricing-table th,
.pricing-table td {
	padding: 0.7rem;
	text-align: left;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
	font-size: 0.92rem;
}

body.dark-theme .pricing-table th,
body.dark-theme .pricing-table td {
	color: #fff;
}

.pricing-table th {
	background-color: rgba(236, 54, 66, 0.08);
	font-weight: 600;
	color: var(--primary-color);
}

.pricing-table tr.highlighted td {
	background-color: rgba(236, 54, 66, 0.05);
	font-weight: 500;
}

body.dark-theme .pricing-table tr.highlighted td {
	background-color: rgba(236, 54, 66, 0.1);
}

.pricing-note {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-top: 1.5rem;
	font-style: italic;
}

.pricing-cta {
	text-align: center;
	margin-top: 3rem;
}

/* ==========================================================================
   Pricing Cards (New)
   ========================================================================== */

.sor-pricing-section {
	padding: 3rem 0;
}

.sor-pricing-block {
	margin-bottom: 4rem;
}

.sor-pricing-heading {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 0.5rem;
}

.sor-pricing-subheading {
	text-align: center;
	color: var(--text-muted);
	font-size: 0.95rem;
	margin-bottom: 2.5rem;
}

.sor-pricing-cards {
	display: flex;
	gap: 1.25rem;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scroll-snap-type: x mandatory;
	padding-bottom: 0.5rem;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) transparent;
}

.sor-pricing-card {
	position: relative;
	flex: 0 0 260px;
	scroll-snap-align: start;
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	padding: 2rem 1.5rem 1.5rem;
	display: flex;
	flex-direction: column;
	transition: var(--transition);
}

.sor-pricing-card:hover {
	border-color: rgba(236, 54, 66, 0.3);
	transform: translateY(-4px);
	box-shadow:
		0 8px 32px rgba(0, 0, 0, 0.2),
		0 0 0 1px rgba(236, 54, 66, 0.15);
}

.sor-pricing-card--popular {
	border-color: var(--primary-color);
	box-shadow: 0 0 0 1px var(--primary-color), 0 8px 32px rgba(236, 54, 66, 0.15);
}

.sor-pricing-badge {
	position: absolute;
	top: -12px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--primary-color);
	color: #fff;
	font-size: 0.72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	padding: 0.3rem 1rem;
	border-radius: 99px;
	white-space: nowrap;
}

.sor-pricing-card__name {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
	color: var(--primary-color);
}

.sor-pricing-card__tagline {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-bottom: 1rem;
}

.sor-pricing-card__price {
	margin-bottom: 0.25rem;
}

.sor-pricing-card__amount {
	font-size: 2rem;
	font-weight: 800;
	line-height: 1;
}

.sor-pricing-card__period {
	font-size: 0.85rem;
	color: var(--text-muted);
}

.sor-pricing-card__per-unit {
	font-size: 0.82rem;
	color: var(--text-muted);
	margin-bottom: 0.5rem;
}

.sor-pricing-card__saving {
	font-size: 0.78rem;
	font-weight: 600;
	color: #4caf50;
	margin-bottom: 0.75rem;
}

.sor-pricing-card__details {
	margin-top: auto;
	margin-bottom: 1rem;
	font-size: 0.85rem;
}

.sor-pricing-card__details summary {
	cursor: pointer;
	color: var(--primary-color);
	font-weight: 600;
	font-size: 0.82rem;
	padding: 0.5rem 0;
	list-style: none;
	display: flex;
	align-items: center;
	gap: 0.4rem;
}

.sor-pricing-card__details summary::-webkit-details-marker {
	display: none;
}

.sor-pricing-card__details summary::before {
	content: '+';
	font-size: 1rem;
	font-weight: 700;
	transition: transform 0.2s;
}

.sor-pricing-card__details[open] summary::before {
	content: '−';
}

.sor-pricing-card__details ul {
	list-style: none;
	padding: 0.5rem 0 0;
	margin: 0;
}

.sor-pricing-card__details li {
	padding: 0.3rem 0;
	padding-left: 1.2em;
	position: relative;
	color: var(--text-muted);
	font-size: 0.82rem;
	line-height: 1.4;
}

.sor-pricing-card__details li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--primary-color);
	font-weight: 700;
}

.sor-pricing-card__cta {
	display: block;
	text-align: center;
	background: var(--primary-color);
	color: #fff;
	font-weight: 600;
	font-size: 0.88rem;
	padding: 0.7rem 1.25rem;
	border-radius: var(--radius);
	text-decoration: none;
	transition: var(--transition);
}

.sor-pricing-card__cta:hover {
	background: var(--primary-hover);
	transform: translateY(-1px);
}

.sor-pricing-card--popular .sor-pricing-card__cta {
	background: var(--primary-color);
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
}

.sor-pricing-footnote {
	text-align: center;
	font-size: 0.78rem;
	color: var(--text-muted);
	margin-top: 1.5rem;
	font-style: italic;
}

/* Desktop: cards fill width */
@media (min-width: 900px) {
	.sor-pricing-cards--einzel {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		overflow-x: visible;
	}

	.sor-pricing-cards--band {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		overflow-x: visible;
	}

	.sor-pricing-card {
		flex: unset;
	}
}

@media (min-width: 900px) and (max-width: 1199px) {
	.sor-pricing-cards--band {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* ==========================================================================
   FAQ Section
   ========================================================================== */

.sor-faq-section {
	padding: 3rem 0;
}

.sor-faq-list {
	max-width: 800px;
	margin: 0 auto;
}

.sor-faq-item {
	border-bottom: 1px solid var(--glass-border);
}

.sor-faq-question {
	cursor: pointer;
	padding: 1.25rem 2rem 1.25rem 0;
	font-weight: 600;
	font-size: 0.95rem;
	position: relative;
	list-style: none;
}

.sor-faq-question::-webkit-details-marker {
	display: none;
}

.sor-faq-question::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.3rem;
	font-weight: 300;
	color: var(--primary-color);
	transition: transform 0.2s;
}

.sor-faq-item[open] .sor-faq-question::after {
	content: '−';
}

.sor-faq-answer {
	padding: 0 0 1.25rem;
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.6;
}

.sor-faq-answer p {
	margin: 0;
}

/* ==========================================================================
   About Story Section
   ========================================================================== */

.sor-story-section {
	padding: 4rem 0 2rem;
}

.sor-story-text {
	max-width: 720px;
	margin: 0 auto;
}

.sor-story-heading {
	font-size: 1.6rem;
	font-weight: 700;
	margin-bottom: 1.5rem;
	text-align: center;
}

.sor-story-text p {
	font-size: 0.95rem;
	line-height: 1.75;
	margin-bottom: 1rem;
	color: var(--text-muted);
}

.sor-story-text p strong {
	color: #fff;
}

.sor-story-highlight {
	margin-top: 1.5rem;
	padding: 1.25rem 1.5rem;
	background: rgba(236, 54, 66, 0.08);
	border-left: 3px solid var(--primary-color);
	border-radius: 0 var(--radius) var(--radius) 0;
	font-style: italic;
	color: rgba(255, 255, 255, 0.85) !important;
}

/* ==========================================================================
   About Stats Counter
   ========================================================================== */

.sor-stats-section {
	padding: 2rem 0 3rem;
}

.sor-stats-grid {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 1.5rem;
	text-align: center;
}

.sor-stat {
	padding: 1.5rem 1rem;
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
}

.sor-stat__number {
	display: block;
	font-size: 2.2rem;
	font-weight: 800;
	color: var(--primary-color);
	line-height: 1.1;
	margin-bottom: 0.4rem;
}

.sor-stat__label {
	display: block;
	font-size: 0.82rem;
	color: var(--text-muted);
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

@media (max-width: 768px) {
	.sor-stats-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

/* ==========================================================================
   Related Testimonials (Instrument / Coach pages)
   ========================================================================== */

.sor-related-testimonials {
	padding: 3rem 0;
	border-top: 1px solid var(--glass-border);
}

.sor-related-testimonials h2 {
	font-size: 1.4rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
}

.sor-testimonials-row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
	max-width: 900px;
	margin: 0 auto;
}

@media (min-width: 640px) {
	.sor-testimonials-row {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 1024px) {
	.sor-testimonials-row {
		grid-template-columns: repeat(3, 1fr);
	}
}

.sor-testimonial-mini {
	padding: 1.25rem;
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sor-testimonial-mini blockquote {
	margin: 0;
	font-size: 0.88rem;
	line-height: 1.65;
	color: var(--text-muted);
	font-style: italic;
	position: relative;
	padding-left: 1rem;
	border-left: 2px solid var(--primary-color);
}

.sor-testimonial-mini-author {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-top: auto;
}

.sor-testimonial-mini-img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
}

.sor-testimonial-mini-author strong {
	font-size: 0.85rem;
	display: block;
}

.sor-testimonial-mini-age {
	font-size: 0.75rem;
	color: var(--text-muted);
}

/* ==========================================================================
   Musikkurse / Workshops Page
   ========================================================================== */

.page-musikkurse .sor-bg-alt {
	background: var(--glass-bg);
	border-top: 1px solid var(--glass-border);
	border-bottom: 1px solid var(--glass-border);
}

.sor-section-title {
	font-size: 1.6rem;
	font-weight: 700;
	text-align: center;
	margin-bottom: 2rem;
}

/* Course list */
.sor-course-list {
	max-width: 800px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.sor-course-item {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	transition: border-color 0.2s;
}

.sor-course-item:hover {
	border-color: var(--primary-color);
}

.sor-course-date-badge {
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	background: var(--primary-color);
	border-radius: var(--radius);
	color: #fff;
	line-height: 1.1;
}

.sor-course-day {
	font-size: 1.4rem;
	font-weight: 800;
}

.sor-course-month {
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}

.sor-course-info {
	flex: 1;
	min-width: 0;
}

.sor-course-info h3 {
	font-size: 1.05rem;
	font-weight: 700;
	margin: 0 0 0.35rem;
}

.sor-course-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1rem;
	font-size: 0.82rem;
	color: var(--text-muted);
}

.sor-course-price {
	font-weight: 700;
	color: var(--primary-color);
}

.sor-course-info p {
	margin: 0.4rem 0 0;
	font-size: 0.85rem;
	color: var(--text-muted);
}

.sor-course-action {
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.4rem;
}

.sor-course-spots {
	font-size: 0.75rem;
	color: var(--primary-color);
	font-weight: 600;
}

/* No dates notice */
.sor-no-dates-notice {
	text-align: center;
	max-width: 500px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

.sor-no-dates-icon {
	color: var(--text-muted);
	margin-bottom: 1rem;
	opacity: 0.5;
}

.sor-no-dates-notice h3 {
	font-size: 1.2rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.sor-no-dates-notice p {
	font-size: 0.9rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.sor-no-dates-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Workshop CTA */
.sor-workshop-cta {
	text-align: center;
	max-width: 600px;
	margin: 0 auto;
	padding: 2rem 0;
}

.sor-workshop-cta h2 {
	font-size: 1.5rem;
	font-weight: 700;
	margin-bottom: 0.75rem;
}

.sor-workshop-cta p {
	font-size: 0.95rem;
	color: var(--text-muted);
	line-height: 1.6;
	margin-bottom: 1.5rem;
}

.sor-workshop-cta-buttons {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	justify-content: center;
}

/* Mobile layout for course items */
@media (max-width: 640px) {
	.sor-course-item {
		flex-direction: column;
		text-align: center;
		gap: 0.75rem;
	}

	.sor-course-meta {
		justify-content: center;
	}
}

/* ==========================================================================
   Blog & Content Pages
   ========================================================================== */

.blog-wrapper,
.page-wrapper,
.single-post-wrapper {
	padding: 3rem 0;
	min-height: 60vh;
}

.page-header h1,
.post-excerpt h2 {
	color: var(--dark-color);
}

body.dark-theme .page-header h1,
body.dark-theme .post-excerpt h2 {
	color: #fff;
}

.entry-featured-image {
	margin-bottom: 2rem;
	border-radius: var(--radius);
	overflow: hidden;
}

.entry-featured-image img {
	width: 100%;
	height: auto;
	display: block;
}

.entry-meta {
	font-size: 0.82rem;
	color: var(--text-muted);
}

body.dark-theme .entry-meta {
	color: var(--text-muted);
}

.entry-content {
	color: #333;
	line-height: 1.8;
}

body.dark-theme .entry-content {
	color: #ddd;
}

.entry-content p {
	margin-bottom: 1.5rem;
}

.posts-list {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.read-more-link {
	color: var(--primary-color);
	font-weight: 600;
	display: inline-block;
	margin-top: 1rem;
}

/* ==========================================================================
   404 Page
   ========================================================================== */

.error-404-wrapper {
	padding: 4rem 2rem;
	text-align: center;
	min-height: 60vh;
	display: flex;
	align-items: center;
	justify-content: center;
}

.error-404-content {
	max-width: 600px;
}

.error-404-title {
	font-size: 8rem;
	font-weight: 900;
	color: var(--primary-color);
	margin-bottom: 1rem;
	line-height: 1;
	text-shadow: 0 0 40px rgba(236, 54, 66, 0.3);
}

.error-404-heading {
	font-size: 2.5rem;
	margin-bottom: 1rem;
}

body.dark-theme .error-404-heading {
	color: #fff;
}

/* ==========================================================================
   Responsive – Mobile First Breakpoints
   ========================================================================== */

@media (max-width: 768px) {
	/* Headings already use clamp() – no overrides needed */

	.philosophy-grid,
	.coaches-grid,
	.testimonials-grid,
	.locations-grid {
		grid-template-columns: 1fr;
	}

	/* Instruments: compact horizontal card layout on mobile */
	.instruments-grid {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		overflow: visible;
	}

	.instruments-grid .instrument-card {
		scroll-snap-align: start;
		flex-shrink: 0;
		display: flex;
		flex-direction: row;
		min-height: auto;
		height: auto;
	}

	.instruments-grid .instrument-card-image {
		width: 120px;
		min-width: 120px;
		height: auto;
		min-height: 120px;
	}

	.instruments-grid .instrument-card-content {
		flex: 1;
		padding: 1rem;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.instruments-grid .instrument-card-title {
		font-size: 1rem;
		margin-bottom: 0.3rem;
	}

	.instruments-grid .instrument-card-excerpt {
		font-size: 0.82rem;
		line-height: 1.4;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.pricing-tables {
		grid-template-columns: 1fr;
	}
}

/* ==========================================================================
   Sub-page Hero
   ========================================================================== */

.page-hero-section {
	position: relative;
	min-height: 60vh;
	margin-top: -62px; /* Pull up behind sticky navbar */
	padding-top: calc(62px + 4rem); /* Compensate navbar + original padding */
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	text-align: center;
	overflow: hidden;
	margin-bottom: 0;
	padding-bottom: 4rem;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

.page-hero-section .hero-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: linear-gradient(180deg, rgba(0,0,0,0.4) 0%, rgba(10,10,10,0.9) 100%);
	z-index: 1;
}

.page-hero-section .hero-content {
	position: relative;
	z-index: 2;
	max-width: 600px;
	padding: 2rem;
}

.page-hero-title {
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	font-weight: 900;
	margin-bottom: 0.75rem;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

.page-hero-subtitle {
	font-size: 1.1rem;
	margin-bottom: 0;
	color: rgba(255, 255, 255, 0.75);
}

@media (max-width: 768px) {
	.page-hero-section {
		min-height: 25vh;
		margin-bottom: 0;
	}

	.page-hero-title {
		font-size: 1.5rem;
	}

	.page-hero-subtitle {
		font-size: 0.95rem;
	}
}

/* ==========================================================================
   Simple Page Header
   ========================================================================== */

.sor-page-header {
	padding: 3rem 0 2rem;
	text-align: center;
	background-color: var(--dark-color);
}

.sor-page-header h1 {
	font-size: 2.2rem;
	font-weight: 900;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	margin: 0;
}

.sor-container {
	max-width: var(--container-max);
	margin: 0 auto;
	padding: 0 1.5rem;
}

.sor-content-section {
	padding: 3rem 0 4rem;
}

.sor-contact-wrapper {
	max-width: 700px;
	margin: 0 auto;
	padding: 2rem 1rem;
}

@media (max-width: 768px) {
	.sor-page-header {
		padding: 2rem 0 1.5rem;
	}

	.sor-page-header h1 {
		font-size: 1.5rem;
	}

	.sor-content-section {
		padding: 2rem 0 3rem;
	}
}

/* Section CTA */
.section-cta {
	text-align: center;
	margin-top: 3.5rem;
	padding-top: 1rem;
}

.section-cta a.btn {
	display: inline-block;
	background-color: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
	padding: 0.85rem 2.5rem;
	font-weight: 600;
	transition: all 0.25s ease;
}

.section-cta a.btn:hover {
	background-color: var(--primary-color);
	color: #fff;
	box-shadow: 0 4px 20px rgba(236, 54, 66, 0.3);
	transform: translateY(-2px);
}

/* ==========================================================================
   Full / Teaser Grid Variants
   ========================================================================== */

.instruments-full-grid,
.coaches-full-grid,
.locations-full-grid,
.philosophy-full-grid {
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

@media (max-width: 768px) {
	.instruments-full-grid,
	.coaches-full-grid,
	.locations-full-grid,
	.philosophy-full-grid {
		grid-template-columns: 1fr;
	}
}

@media (min-width: 1200px) {
	.instruments-full-grid,
	.coaches-full-grid,
	.locations-full-grid,
	.philosophy-full-grid {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Instruments teaser – 5 items in one row on desktop */
.instruments-teaser {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

@media (min-width: 1024px) {
	.instruments-teaser {
		grid-template-columns: repeat(5, 1fr);
		gap: 1.25rem;
	}
}

.philosophy-teaser {
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

/* Coaches teaser – horizontal scroll on homepage */
.coaches-teaser {
	display: flex;
	gap: 1.5rem;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	padding-bottom: 1rem;
	scrollbar-width: thin;
	scrollbar-color: var(--primary-color) rgba(255, 255, 255, 0.05);
}

.coaches-teaser::-webkit-scrollbar {
	height: 6px;
}

.coaches-teaser::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.05);
	border-radius: 3px;
}

.coaches-teaser::-webkit-scrollbar-thumb {
	background: var(--primary-color);
	border-radius: 3px;
}

.coaches-teaser .coach-card {
	min-width: 260px;
	max-width: 280px;
	flex-shrink: 0;
	scroll-snap-align: start;
}

/* Scroll indicator for coaches teaser */
.coaches-scroll-hint {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	margin-top: 0.75rem;
	color: rgba(255, 255, 255, 0.4);
	font-size: 0.8rem;
	letter-spacing: 0.05em;
	animation: scrollHintPulse 2s ease-in-out infinite;
}

.coaches-scroll-hint svg {
	width: 18px;
	height: 18px;
	opacity: 0.5;
}

@keyframes scrollHintPulse {
	0%, 100% { opacity: 0.5; transform: translateX(0); }
	50% { opacity: 1; transform: translateX(6px); }
}

/* Hide hint once user has scrolled */
.coaches-teaser.has-scrolled + .coaches-scroll-hint {
	opacity: 0;
	transition: opacity 0.5s ease;
}

@media (min-width: 1200px) {
	.coaches-teaser .coach-card {
		min-width: 240px;
	}
}

/* Compact coaches grid */
.coaches-compact {
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
	margin-bottom: 3rem;
}

/* Grouped sections */
.instrument-coaches-group,
.location-coaches-group {
	margin-bottom: 4rem;
	padding-bottom: 3rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.instrument-coaches-group:last-child,
.location-coaches-group:last-child {
	border-bottom: none;
}

.instrument-coaches-group h3,
.location-coaches-group h3 {
	font-size: 1.4rem;
	margin-bottom: 2rem;
	color: #fff;
	padding-bottom: 0.75rem;
	border-bottom: 2px solid var(--primary-color);
	display: inline-block;
}

/* ==========================================================================
   Page Content Sections
   ========================================================================== */

.instruments-grid-section,
.coaches-grid-section,
.locations-grid-section,
.pricing-content-section,
.philosophy-full-section,
.coaches-by-instrument-section,
.coaches-by-location-section,
.about-videos,
.about-testimonials {
	padding: 2.5rem 0;
}

body.dark-theme .instruments-grid-section {
	background-color: var(--dark-color);
}

body.dark-theme .coaches-grid-section {
	background-color: var(--dark-surface);
}

body.dark-theme .locations-grid-section {
	background-color: var(--dark-color);
}

body.dark-theme .pricing-content-section,
body.dark-theme .coaches-by-instrument-section,
body.dark-theme .coaches-by-location-section {
	background-color: var(--dark-color);
}

body.dark-theme .philosophy-full-section {
	background-color: var(--dark-surface);
}

body.dark-theme .about-videos {
	background: var(--dark-surface-alt);
}

body.dark-theme .about-testimonials {
	background-color: var(--dark-surface);
}

/* ==========================================================================
   Contact Form
   ========================================================================== */

.sor-contact-form {
	max-width: 600px;
	margin: 0 auto;
}

.sor-form-row {
	margin-bottom: 1.5rem;
}

.sor-form-label {
	display: block;
	margin-bottom: 0.4rem;
	color: var(--light-color);
	font-weight: 500;
	font-size: 0.9rem;
}

.sor-form-input {
	width: 100%;
	padding: 0.75rem 1rem;
	background-color: rgba(255, 255, 255, 0.04);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: var(--radius-xs);
	color: var(--light-color);
	font-family: inherit;
	font-size: 1rem;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.sor-form-input:focus {
	outline: none;
	border-color: var(--primary-color);
	box-shadow: 0 0 0 3px rgba(236, 54, 66, 0.15);
}

.sor-form-input::placeholder {
	color: rgba(255, 255, 255, 0.25);
}

select.sor-form-input {
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23a0a0a0' d='M6 8L0 0h12z'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	padding-right: 2.5rem;
	cursor: pointer;
}

select.sor-form-input option {
	background-color: var(--dark-surface);
	color: var(--light-color);
}

textarea.sor-form-input {
	resize: vertical;
	min-height: 120px;
}

.sor-form-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
}

.sor-form-checkbox label {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	color: var(--text-muted);
	font-size: 0.85rem;
	cursor: pointer;
}

.sor-form-checkbox input[type="checkbox"] {
	margin-top: 0.2rem;
	accent-color: var(--primary-color);
	width: 18px;
	height: 18px;
	flex-shrink: 0;
}

.sor-form-checkbox a {
	color: var(--primary-color);
	text-decoration: underline;
}

.sor-form-checkbox a:hover {
	color: var(--primary-hover);
}

/* Honeypot */
.sor-hp-field {
	position: absolute;
	left: -9999px;
	height: 0;
	width: 0;
	overflow: hidden;
	opacity: 0;
}

/* Form Messages */
.sor-form-message {
	padding: 1rem 1.25rem;
	border-radius: var(--radius-xs);
	margin-bottom: 1.5rem;
	font-size: 0.92rem;
}

.sor-form-success {
	background-color: rgba(34, 197, 94, 0.1);
	color: #22c55e;
	border: 1px solid rgba(34, 197, 94, 0.2);
}

.sor-form-error {
	background-color: rgba(236, 54, 66, 0.1);
	color: #ec3642;
	border: 1px solid rgba(236, 54, 66, 0.2);
}

.sor-contact-form .btn {
	width: 100%;
	text-align: center;
}

/* ==========================================================================
   Gutenberg Block Overrides (Front-End)
   ========================================================================== */

.site-main .wp-block-group {
	padding: var(--section-spacing) 1.5rem;
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

.site-main .wp-block-group .wp-block-group {
	padding: 0;
	max-width: none;
}

/* Full-bleed sections */
.site-main .wp-block-group.page-section {
	max-width: none;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
}

.site-main .wp-block-group.page-section > * {
	max-width: var(--container-max);
	margin-left: auto;
	margin-right: auto;
}

/* Alternating section backgrounds with stronger contrast */
.site-main > .wp-block-group:nth-child(even) {
	background-color: var(--dark-surface);
	background-image: radial-gradient(ellipse at 50% 50%, rgba(255, 255, 255, 0.01) 0%, transparent 70%);
}

.site-main > .wp-block-group:nth-child(odd) {
	background-color: var(--dark-color);
}

.site-main > .wp-block-group + .wp-block-group {
	border-top: 1px solid rgba(255, 255, 255, 0.04);
}

/* Section titles in Gutenberg */
.site-main .wp-block-heading {
	text-align: center;
	position: relative;
}

.site-main .wp-block-heading.has-text-align-center {
	padding-bottom: 1rem;
	margin-bottom: 0.5rem;
}

.site-main .wp-block-heading.has-text-align-center::after {
	content: '';
	display: block;
	width: 50px;
	height: 3px;
	background: var(--primary-color);
	margin: 0.75rem auto 0;
	border-radius: 2px;
	box-shadow: 0 0 12px rgba(236, 54, 66, 0.3);
}

/* Section subtitle styling */
.site-main .section-subtitle {
	color: var(--text-light);
	font-size: 1.05rem;
	max-width: 650px;
	margin: -0.25rem auto 3rem;
	text-align: center;
	line-height: 1.6;
}

/* Philosophy cards in Gutenberg columns */
.site-main .philosophy-grid.wp-block-columns {
	gap: 1.5rem;
}

.site-main .philosophy-card.wp-block-column {
	background: var(--glass-bg);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	padding: 0;
	overflow: hidden;
	transition: var(--transition);
	box-shadow:
		0 4px 24px rgba(0, 0, 0, 0.2),
		inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Philosophy card image (wp:image inside wp:column) */
.site-main .philosophy-card.wp-block-column .wp-block-image {
	margin: 0;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	position: relative;
}

.site-main .philosophy-card.wp-block-column .wp-block-image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 50%;
	background: linear-gradient(transparent, rgba(0, 0, 0, 0.5));
	pointer-events: none;
	z-index: 1;
}

.site-main .philosophy-card.wp-block-column .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.site-main .philosophy-card.wp-block-column:hover .wp-block-image img {
	transform: scale(1.08);
}

.site-main .philosophy-card.wp-block-column:hover {
	transform: translateY(-6px);
	border-color: var(--glass-border-hover);
	background: var(--glass-bg-hover);
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.3),
		0 0 0 1px rgba(236, 54, 66, 0.1),
		inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.site-main .philosophy-card h3 {
	color: var(--primary-color);
	margin-bottom: 0.75rem;
	font-size: 1.1rem;
	font-weight: 700;
	padding: 1.25rem 1.5rem 0;
}

.site-main .philosophy-card p {
	color: var(--text-light);
	font-size: 0.92rem;
	line-height: 1.65;
	padding: 0 1.5rem 1.5rem;
}

/* CTA section in blocks */
.site-main .cta-section {
	max-width: none !important;
	padding: var(--section-spacing) 1.5rem;
}

/* Gutenberg button overrides */
.wp-block-button.btn-primary .wp-block-button__link,
.wp-block-button.btn.btn-primary .wp-block-button__link {
	background-color: var(--primary-color);
	color: #fff;
	border: none;
	border-radius: var(--radius-sm);
	padding: 0.85rem 2.25rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: all 0.25s ease;
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
}

.wp-block-button.btn-primary .wp-block-button__link:hover,
.wp-block-button.btn.btn-primary .wp-block-button__link:hover {
	background-color: var(--primary-hover);
	box-shadow: 0 8px 28px rgba(236, 54, 66, 0.4);
	transform: translateY(-2px);
}

/* Remove gray box from the outer wp-block-button wrapper */
.wp-block-button.btn-secondary,
.wp-block-button.btn.btn-secondary {
	background-color: transparent !important;
	border: none !important;
	backdrop-filter: none !important;
	-webkit-backdrop-filter: none !important;
	padding: 0;
}

.wp-block-button.btn-secondary .wp-block-button__link,
.wp-block-button.btn.btn-secondary .wp-block-button__link {
	background-color: transparent;
	color: var(--primary-color);
	border: 2px solid var(--primary-color);
	border-radius: var(--radius-sm);
	padding: 0.85rem 2.25rem;
	font-weight: 600;
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: all 0.25s ease;
	margin-top: 0;
}

/* Section CTA buttons: free-standing under content, not in card containers */
.site-main .wp-block-group .wp-block-buttons {
	margin-top: 2.5rem;
	padding-bottom: 0;
}

.wp-block-button.btn-secondary .wp-block-button__link:hover,
.wp-block-button.btn.btn-secondary .wp-block-button__link:hover {
	background-color: var(--primary-color);
	color: #fff;
	border-color: var(--primary-color);
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
	transform: translateY(-2px);
}

/* Gutenberg paragraph & strong */
.site-main .wp-block-group p {
	color: var(--text-light);
	line-height: 1.7;
}

.site-main .wp-block-group p strong {
	color: #fff;
	font-weight: 700;
}

/* Spacing and subtle separator between front-page sections */
.site-main.front-page > .wp-block-group + .wp-block-group {
	margin-top: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* Mobile Gutenberg */
@media (max-width: 768px) {
	.site-main .philosophy-grid.wp-block-columns {
		flex-direction: column;
	}

	.site-main .wp-block-group {
		padding: 3rem 1rem;
	}

	.site-main .philosophy-card.wp-block-column {
		padding: 0;
	}

	.site-main .philosophy-card.wp-block-column .wp-block-image {
		height: 150px;
	}
}

/* ==========================================================================
   Legal Pages
   ========================================================================== */

.page-legal {
	background-color: var(--dark-color);
}

.legal-page-wrapper {
	max-width: 800px;
	margin: 0 auto;
	padding: 3rem 1.5rem 4rem;
}

.legal-page-header {
	margin-bottom: 2rem;
	padding-bottom: 1.5rem;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.legal-page-header h1 {
	color: var(--light-color);
	font-size: 2rem;
	margin-bottom: 0.5rem;
}

.legal-last-updated {
	color: var(--text-muted);
	font-size: 0.85rem;
}

.legal-content {
	color: #ccc;
	line-height: 1.8;
}

.legal-content h2 {
	color: var(--light-color);
	font-size: 1.4rem;
	margin-top: 2.5rem;
	margin-bottom: 1rem;
}

.legal-content h3 {
	color: var(--light-color);
	font-size: 1.15rem;
	margin-top: 2rem;
	margin-bottom: 0.75rem;
}

.legal-content p {
	margin-bottom: 1rem;
}

.legal-content ul,
.legal-content ol {
	margin-bottom: 1rem;
	padding-left: 1.5rem;
}

.legal-content li {
	margin-bottom: 0.5rem;
}

.legal-content a {
	color: var(--primary-color);
	text-decoration: underline;
}

.legal-content a:hover {
	color: var(--primary-hover);
}

.legal-content table {
	width: 100%;
	border-collapse: collapse;
	margin: 1.5rem 0;
}

.legal-content th,
.legal-content td {
	padding: 0.75rem;
	border: 1px solid rgba(255, 255, 255, 0.08);
	text-align: left;
}

.legal-content th {
	background-color: var(--dark-surface);
	color: var(--light-color);
	font-weight: 600;
}

/* ==========================================================================
   Desktop Enhancements (1200px+)
   ========================================================================== */

@media (min-width: 1200px) {
	.page-hero-section {
		min-height: 55vh;
	}

	.page-hero-title {
		font-size: 3rem;
	}

	.page-hero-subtitle {
		font-size: 1.35rem;
	}

	.container {
		max-width: var(--container-max);
	}

	.instruments-grid-section,
	.coaches-grid-section,
	.locations-grid-section {
		padding: 3rem 0;
	}

	.philosophy-full-section,
	.coaches-by-instrument-section,
	.coaches-by-location-section {
		padding: 6rem 0;
	}

	/* Hover glow effect on nav links */
	.main-navigation a:hover {
		text-shadow: 0 0 12px rgba(236, 54, 66, 0.3);
	}
}

/* ==========================================================================
   Extra Small Devices (480px)
   ========================================================================== */

@media (max-width: 480px) {
	.hero-title {
		font-size: clamp(1.75rem, 8vw, 2.5rem);
		letter-spacing: 0.01em;
	}

	.hero-subtitle {
		font-size: 0.92rem;
		padding: 0 0.5rem;
	}

	.hero-ctas {
		gap: 0.75rem;
	}

	.hero-ctas .btn {
		max-width: 260px;
		font-size: 0.82rem;
		padding: 0.7rem 1.5rem;
	}

	.page-hero-title {
		font-size: 1.3rem;
		letter-spacing: 0.01em;
	}

	.page-hero-subtitle {
		font-size: 0.85rem;
	}

	.sor-page-header h1 {
		font-size: 1.4rem;
		margin-bottom: 0.5rem;
	}

	.philosophy-section,
	.instruments-section,
	.coaches-section,
	.pricing-section,
	.testimonials-section,
	.locations-section,
	.cta-section {
		padding: 2.5rem 0;
	}

	.philosophy-grid,
	.instruments-grid,
	.coaches-grid,
	.testimonials-grid,
	.locations-grid,
	.instruments-full-grid,
	.coaches-full-grid,
	.locations-full-grid,
	.philosophy-full-grid {
		grid-template-columns: 1fr;
		gap: 1rem;
	}

	.cta-section h2 {
		font-size: 1.2rem;
	}

	.cta-section p {
		font-size: 0.9rem;
	}

	.btn {
		padding: 0.7rem 1.5rem;
		font-size: 0.82rem;
	}

	.btn-lg {
		padding: 0.85rem 2rem;
		font-size: 0.9rem;
	}

	.site-main .wp-block-group {
		padding: 2rem 1rem;
	}

	.site-main .wp-block-columns {
		flex-direction: column !important;
		gap: 1rem;
	}

	.site-main .wp-block-column {
		flex-basis: 100% !important;
	}

	.sor-contact-wrapper {
		padding: 1.5rem 1rem;
	}

	.sor-form-row {
		flex-direction: column;
		gap: 0;
	}

	.legal-content table {
		display: block;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	/* iOS zoom prevention */
	.sor-form-input,
	.sor-form-input:focus,
	select.sor-form-input,
	textarea.sor-form-input {
		font-size: 16px;
	}

	.sor-form-checkbox input[type="checkbox"] {
		width: 22px;
		height: 22px;
		min-width: 22px;
	}

	/* Cookie banner mobile */
	.cookie-banner {
		flex-direction: column;
		gap: 1rem;
		padding: 1rem;
	}

	.cookie-banner .cookie-buttons {
		flex-direction: column;
		width: 100%;
		gap: 0.5rem;
	}

	.cookie-banner .cookie-buttons .btn {
		width: 100%;
		text-align: center;
	}
}

/* ==========================================================================
   Ultra Small Devices (360px)
   ========================================================================== */

@media (max-width: 360px) {
	.hero-title {
		font-size: 1.6rem;
	}

	.site-branding .custom-logo {
		height: 22px;
	}

	.header-cta .btn {
		font-size: 0.72rem;
		padding: 0.45rem 0.75rem;
	}

	.container {
		padding: 0 0.75rem;
	}
}

/* ==========================================================================
   Back to Top Button
   ========================================================================== */

.back-to-top {
	position: fixed;
	bottom: 2rem;
	right: 2rem;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--primary-color);
	color: #fff;
	border: none;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(20px);
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
	z-index: 999;
	box-shadow: 0 4px 16px rgba(236, 54, 66, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
}

.back-to-top::before {
	content: '';
	display: block;
	width: 12px;
	height: 12px;
	border-top: 2.5px solid #fff;
	border-right: 2.5px solid #fff;
	transform: rotate(-45deg) translateY(3px);
}

.back-to-top.show,
.back-to-top.visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.back-to-top:hover {
	background: var(--primary-hover);
	transform: translateY(-4px);
	box-shadow: 0 8px 24px rgba(236, 54, 66, 0.45);
}

@media (max-width: 768px) {
	.back-to-top {
		bottom: 1.25rem;
		right: 1.25rem;
		width: 42px;
		height: 42px;
	}
}

/* ==========================================================================
   Cookie Banner
   ========================================================================== */

.cookie-banner {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding: 1.25rem 2rem;
	background: rgba(10, 10, 10, 0.97);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border-top: 1px solid rgba(236, 54, 66, 0.25);
	z-index: 9999;
	box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.4);
}

.cookie-banner p {
	flex: 1;
	color: var(--text-light);
	font-size: 0.88rem;
	line-height: 1.5;
	margin: 0;
}

.cookie-banner a {
	color: var(--primary-color);
	text-decoration: underline;
}

.cookie-banner .cookie-buttons {
	display: flex;
	gap: 0.75rem;
	flex-shrink: 0;
}

/* ==========================================================================
   Shared Detail-Page Styles (Instrument + Coach)
   ========================================================================== */

/* --- Containers & Spacing --- */
.single-instrument .sor-container,
.single-coach .sor-container {
	padding: var(--section-spacing) 1.25rem;
}

/* --- Section Headings with accent line --- */
.sor-section-heading {
	font-size: clamp(1.3rem, 3vw, 1.6rem);
	font-weight: 800;
	text-align: center;
	margin-bottom: 2rem;
	position: relative;
	padding-bottom: 0.75rem;
}

.sor-section-heading::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 48px;
	height: 3px;
	background: var(--primary-color);
	border-radius: 2px;
}

/* --- Prose container: readable content typography --- */
.sor-prose {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--text-light);
	max-width: 65ch;
}

.sor-prose h2,
.sor-prose h3,
.sor-prose h4 {
	color: var(--light-color);
	margin-top: 2rem;
	margin-bottom: 0.75rem;
	line-height: 1.3;
}

.sor-prose h3 {
	color: var(--primary-color);
	font-size: 1.15rem;
}

.sor-prose p {
	margin-bottom: 1rem;
}

.sor-prose ul,
.sor-prose ol {
	margin-left: 1.25rem;
	margin-bottom: 1rem;
}

.sor-prose strong {
	color: var(--light-color);
}

/* --- Shared button system --- */
.sor-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.75rem 1.5rem;
	border-radius: var(--radius-sm);
	font-weight: 600;
	font-size: 0.95rem;
	text-decoration: none;
	transition: var(--transition);
	cursor: pointer;
	border: none;
}

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

.sor-btn--primary:hover {
	background: var(--primary-hover);
	box-shadow: 0 4px 20px var(--primary-glow);
	transform: translateY(-1px);
}

.sor-btn--outline {
	background: transparent;
	color: var(--light-color);
	border: 1px solid var(--glass-border);
}

.sor-btn--outline:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-border-hover);
}

.sor-btn--full {
	width: 100%;
	text-align: center;
	margin-bottom: 0.75rem;
}

.sor-btn--full:last-child {
	margin-bottom: 0;
}

.sor-btn--lg {
	padding: 1rem 2rem;
	font-size: 1.05rem;
}

/* --- Shared Detail CTA (bottom of instrument + coach pages) --- */
.sor-detail-cta {
	margin-bottom: var(--section-spacing);
}

.sor-detail-cta__inner {
	text-align: center;
	padding: 3rem 2rem;
	background: linear-gradient(135deg, rgba(236, 54, 66, 0.08) 0%, rgba(236, 54, 66, 0.02) 100%);
	border: 1px solid rgba(236, 54, 66, 0.18);
	border-radius: var(--radius);
	position: relative;
	overflow: hidden;
}

.sor-detail-cta__inner::before {
	content: '';
	position: absolute;
	top: -60%;
	right: -20%;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: radial-gradient(circle, var(--primary-glow) 0%, transparent 70%);
	pointer-events: none;
}

.sor-detail-cta__inner h2 {
	margin-bottom: 0.5rem;
	font-size: 1.5rem;
	position: relative;
}

.sor-detail-cta__inner p {
	color: var(--text-light);
	margin-bottom: 1.5rem;
	font-size: 1.05rem;
	position: relative;
}

/* ==========================================================================
   Single Instrument Detail Page
   ========================================================================== */

/* Content + Sidebar grid */
.sor-instrument-detail {
	display: grid;
	gap: 2.5rem;
	margin-bottom: var(--section-spacing);
	align-items: start;
}

.sor-instrument-content {
	min-width: 0; /* Prevent grid blowout */
}

/* Sidebar info card */
.sor-instrument-sidebar {
	position: sticky;
	top: calc(62px + 1.5rem); /* Below navbar */
}

.sor-instrument-info-card {
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	padding: 1.75rem;
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
}

.sor-instrument-info-card h3 {
	margin-top: 0;
	margin-bottom: 1.25rem;
	color: var(--light-color);
	font-size: 1.1rem;
	font-weight: 700;
}

.sor-info-list {
	list-style: none;
	padding: 0;
	margin: 0 0 1.5rem;
}

.sor-info-list li {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.75rem 0;
	border-bottom: 1px solid var(--border-subtle);
	color: var(--text-light);
	font-size: 0.9rem;
}

.sor-info-list li:last-child {
	border-bottom: none;
}

.sor-info-list li strong {
	color: var(--light-color);
}

.sor-info-icon {
	flex-shrink: 0;
	color: var(--primary-color);
	display: flex;
	align-items: center;
}

.sor-price-highlight {
	color: var(--primary-color);
	font-weight: 700;
}

/* --- Coaches Grid (on instrument page) --- */
.sor-instrument-coaches {
	margin-bottom: var(--section-spacing);
	padding-top: var(--section-spacing);
	border-top: 1px solid var(--border-subtle);
}

.sor-coaches-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.25rem;
}

.sor-coach-mini-card {
	display: flex;
	align-items: center;
	gap: 1.25rem;
	padding: 1.25rem;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--light-color);
	transition: var(--transition);
}

.sor-coach-mini-card:hover {
	background: var(--glass-bg-hover);
	border-color: var(--primary-color);
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(236, 54, 66, 0.15);
}

.sor-coach-mini-img-wrap {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--glass-border);
	transition: border-color 0.3s;
}

.sor-coach-mini-card:hover .sor-coach-mini-img-wrap {
	border-color: var(--primary-color);
}

.sor-coach-mini-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}

.sor-coach-mini-info {
	min-width: 0;
}

.sor-coach-mini-info h3 {
	margin: 0 0 0.3rem;
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--light-color);
}

.sor-coach-mini-info p {
	margin: 0 0 0.5rem;
	font-size: 0.85rem;
	color: var(--text-muted);
	line-height: 1.5;
}

.sor-coach-mini-link {
	font-size: 0.82rem;
	font-weight: 600;
	color: var(--primary-color);
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	transition: gap 0.2s;
}

.sor-coach-mini-card:hover .sor-coach-mini-link {
	gap: 0.6rem;
}

.sor-coach-mini-link .arrow {
	transition: transform 0.2s;
}

.sor-coach-mini-card:hover .sor-coach-mini-link .arrow {
	transform: translateX(2px);
}

/* ==========================================================================
   Single Coach Profile Page
   ========================================================================== */

/* --- Coach Hero (full-width photo with name) --- */
.sor-coach-hero {
	position: relative;
	min-height: 50vh;
	margin-top: -62px;
	padding-top: calc(62px + 4rem);
	padding-bottom: 4rem;
	background-size: cover;
	background-position: center 20%;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
	width: 100vw;
	margin-left: calc(-50vw + 50%);
}

.sor-coach-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		rgba(10, 10, 10, 0.2) 0%,
		rgba(10, 10, 10, 0.6) 50%,
		rgba(10, 10, 10, 0.95) 100%
	);
	z-index: 1;
}

.sor-coach-hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.25rem;
	padding: 2rem 1.5rem;
	text-align: center;
	max-width: 600px;
}

.sor-coach-hero__portrait {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	overflow: hidden;
	border: 3px solid rgba(255, 255, 255, 0.2);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
	flex-shrink: 0;
}

.sor-coach-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 15%;
}

.sor-coach-hero__name {
	font-size: clamp(1.75rem, 5vw, 2.75rem);
	font-weight: 900;
	color: #fff;
	margin: 0;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.sor-coach-hero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
}

/* Tags inside hero: light on dark variant */
.sor-coach-hero__tags .sor-tag {
	background: rgba(255, 255, 255, 0.1);
	border-color: rgba(255, 255, 255, 0.2);
	color: #fff;
	backdrop-filter: blur(8px);
}

.sor-coach-hero__tags .sor-tag:hover {
	background: var(--primary-color);
	border-color: var(--primary-color);
}

.sor-coach-hero__cta {
	margin-top: 0.5rem;
}

/* --- Tag styles (shared) --- */
.sor-tag {
	display: inline-block;
	padding: 0.35rem 0.85rem;
	background: var(--primary-subtle);
	color: var(--primary-color);
	border: 1px solid rgba(236, 54, 66, 0.25);
	border-radius: 100px;
	font-size: 0.8rem;
	font-weight: 600;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	transition: var(--transition);
}

.sor-tag:hover {
	background: var(--primary-color);
	color: #fff;
}

/* --- Coach Bio section --- */
.sor-coach-bio-section {
	margin-bottom: var(--section-spacing);
}

.sor-coach-bio-wrapper {
	max-width: 720px;
	margin: 0 auto;
}

.sor-coach-bio {
	font-size: 1.05rem;
	line-height: 1.8;
	color: var(--text-light);
}

.sor-coach-bio p {
	margin-bottom: 1rem;
}

.sor-coach-bio p:first-child::first-line {
	color: var(--light-color);
	font-weight: 500;
}

/* --- Coach Instruments Row --- */
.sor-coach-instruments {
	margin-bottom: var(--section-spacing);
	padding-top: var(--section-spacing);
	border-top: 1px solid var(--border-subtle);
}

.sor-instruments-row {
	display: flex;
	gap: 1.25rem;
	justify-content: center;
	flex-wrap: wrap;
}

.sor-instrument-link-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 1.25rem;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius);
	text-decoration: none;
	color: var(--light-color);
	transition: var(--transition);
	width: 160px;
	text-align: center;
}

.sor-instrument-link-card:hover {
	background: var(--glass-bg-hover);
	border-color: var(--primary-color);
	transform: translateY(-3px);
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}

.sor-instrument-link-card img {
	width: 90px;
	height: 90px;
	border-radius: var(--radius-sm);
	object-fit: cover;
	transition: transform 0.3s;
}

.sor-instrument-link-card:hover img {
	transform: scale(1.05);
}

.sor-instrument-link-card span {
	font-size: 0.88rem;
	font-weight: 700;
}

/* ==========================================================================
   Desktop Responsive — Single Instrument & Coach
   ========================================================================== */

@media (min-width: 768px) {
	.sor-instrument-detail {
		grid-template-columns: 1fr 320px;
	}

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

	.sor-coach-hero {
		min-height: 55vh;
	}

	.sor-coach-hero__content {
		flex-direction: row;
		text-align: left;
		gap: 2rem;
		max-width: 800px;
	}

	.sor-coach-hero__portrait {
		width: 160px;
		height: 160px;
	}

	.sor-coach-hero__text {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.sor-coach-hero__tags {
		justify-content: flex-start;
	}
}

@media (min-width: 1024px) {
	.sor-coaches-grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.single-instrument .sor-container,
	.single-coach .sor-container {
		padding-left: 0;
		padding-right: 0;
	}

	.sor-coach-hero__portrait {
		width: 180px;
		height: 180px;
	}
}

/* ==========================================================================
   Contact Page
   ========================================================================== */

.sor-contact-intro {
	display: grid;
	gap: 2rem;
	margin-bottom: var(--section-spacing);
	padding-top: 1rem;
}

.sor-contact-intro-text h2 {
	margin-bottom: 0.75rem;
}

.sor-contact-intro-text p {
	color: var(--text-light);
	font-size: 1.05rem;
	line-height: 1.7;
}

.sor-contact-channels {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

.sor-contact-channel {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.25rem;
	background: var(--glass-bg);
	border: 1px solid var(--glass-border);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--light-color);
	transition: var(--transition);
}

.sor-contact-channel:hover {
	background: var(--glass-bg-hover);
	border-color: var(--glass-border-hover);
	transform: translateY(-2px);
}

.sor-contact-whatsapp:hover {
	border-color: #25d366;
}

.sor-contact-whatsapp .sor-contact-channel-icon {
	color: #25d366;
}

.sor-contact-channel-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--glass-bg-hover);
	border-radius: 50%;
}

.sor-contact-channel-label {
	font-weight: 700;
	font-size: 1rem;
	display: block;
}

.sor-contact-channel-detail {
	display: block;
	font-size: 0.85rem;
	color: var(--text-muted);
	margin-top: 0.15rem;
}

.sor-contact-form-section {
	margin-bottom: var(--section-spacing);
}

.sor-contact-form-section h2 {
	margin-bottom: 0.5rem;
}

.sor-contact-form-hint {
	color: var(--text-muted);
	margin-bottom: 1.5rem;
	font-size: 0.95rem;
}

@media (min-width: 768px) {
	.sor-contact-channels {
		grid-template-columns: repeat(3, 1fr);
	}

	.sor-contact-channel {
		flex-direction: column;
		text-align: center;
		padding: 1.5rem 1rem;
	}
}

/* ==========================================================================
   Print Styles
   ========================================================================== */

@media print {
	.site-header,
	.site-footer,
	.back-to-top,
	.cookie-banner,
	.hero-section::after,
	.hero-overlay::after {
		display: none !important;
	}

	body.dark-theme {
		background: #fff;
		color: #000;
	}

	h1, h2, h3, h4, h5, h6 {
		color: #000;
	}
}