/* =================================================================
   SPLUGGAGE — shared brand system
   Design language extracted from the official brand banners
================================================================= */

:root {
	/* ============================================================
	   OFFICIAL BRAND SYSTEM (per brand spec)
	   Primary:   Airport Blue  — buttons, links, navigation, highlights
	   Secondary: Adventure Gold — CTAs, hover states, passport badges
	   "Blue = Travel. Gold = Adventure."
	   ============================================================ */
	--brand-blue:        #2F7FD8;
	--brand-blue-dark:   #1F5DA8;  /* used for 3D button shadow */
	--brand-blue-deep:   #154880;  /* used for hover/active states */
	--brand-gold:        #F4B53F;
	--brand-gold-dark:   #C58A1A;  /* used for 3D button shadow */
	--brand-gold-deep:   #8F6210;  /* used for hover/active states */

	/* ============================================================
	   WORDMARK COLOR PALETTE
	   These are the colors baked into the SPLUGGAGE wordmark and
	   character DNA. Used for tags, kickers, character accents.
	   ============================================================ */
	--blue:    #2970E6;
	--yellow:  #FEF558;
	--pink:    #FC295E;
	--teal:    #7BE2E1;
	--purple:  #8735A3;
	--orange:  #FF7E01;
	--green:   #54962C;
	--navy:    #001D83;
	--red:     #9D052E;

	/* Backdrop colors */
	--cream:        #FFF8E7;
	--cream-peach:  #FBD9AB;
	--parchment:    #E8D4A8;
	--wood:         #8B5A2B;
	--wood-dark:    #5C3A18;
	--board-navy:   #001233;
	--board-amber:  #FFB300;
	--board-green:  #5BFF8A;

	--ink:        #0A1438;
	--ink-soft:   #3D4862;
	--ink-mute:   #6B7596;

	--shadow-sm: 0 4px 12px rgba(0,29,131,0.08);
	--shadow-md: 0 12px 32px rgba(0,29,131,0.12);
	--shadow-lg: 0 28px 70px rgba(0,29,131,0.18);
	--shadow-tag: 0 6px 0 rgba(139,90,43,0.25), 0 12px 24px rgba(139,90,43,0.18);
}

/* ===== ACCESSIBILITY HELPERS ===== */
.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	top: -50px;
	left: 0;
	background: var(--navy);
	color: white;
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	padding: 12px 20px;
	text-decoration: none;
	z-index: 200;
	border-radius: 0 0 12px 0;
	transition: top 0.2s ease;
}
.skip-link:focus {
	top: 0;
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
}

/* Visible focus indicators for keyboard nav */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 3px solid var(--brand-blue);
	outline-offset: 3px;
	border-radius: 6px;
}
.main-nav a:focus-visible {
	outline: 3px solid var(--brand-blue);
	outline-offset: 2px;
}

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

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }

body {
	font-family: 'Fredoka', sans-serif;
	font-weight: 500;
	color: var(--ink);
	background: var(--cream);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }

body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image:
		radial-gradient(circle at 15% 25%, rgba(139,90,43,0.04) 0%, transparent 40%),
		radial-gradient(circle at 85% 75%, rgba(255,179,0,0.04) 0%, transparent 45%);
	pointer-events: none;
	z-index: 0;
}

/* =================================================================
   AIRPORT TICKER — thin navy bar with infinitely scrolling brand promises
   ================================================================= */
.airport-ticker {
	background: var(--board-navy);
	color: var(--board-amber);
	overflow: hidden;
	position: relative;
	z-index: 101;
	padding: 8px 0;
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.04em;
	border-bottom: 1px solid rgba(255, 179, 0, 0.2);
}
.airport-ticker__track {
	display: flex;
	gap: 28px;
	white-space: nowrap;
	width: max-content;
	animation: spl-ticker 38s linear infinite;
}
.airport-ticker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.airport-ticker__item .ticker-icon { font-size: 14px; }
.airport-ticker__sep {
	color: rgba(255, 179, 0, 0.45);
	font-size: 18px;
	line-height: 1;
}
@keyframes spl-ticker {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}
/* Pause on hover for accessibility */
.airport-ticker:hover .airport-ticker__track {
	animation-play-state: paused;
}

/* =================================================================
   SITE HEADER — glassmorphic, sticky, scroll-shrinks
   ================================================================= */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: rgba(255, 248, 231, 0.88);
	backdrop-filter: blur(12px) saturate(140%);
	-webkit-backdrop-filter: blur(12px) saturate(140%);
	border-bottom: none;
	padding: 14px 32px;
	transition: padding 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;
}
.site-header.is-scrolled {
	padding: 8px 32px;
	background: rgba(255, 248, 231, 0.96);
	box-shadow: 0 6px 24px rgba(0, 29, 131, 0.08);
}
.site-header.is-scrolled .brand img { height: 38px; }

.header-inner {
	max-width: 1400px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}
.brand {
	display: flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	color: inherit;
	flex-shrink: 0;
}
.brand img {
	height: 48px;
	width: auto;
	transition: height 0.3s ease, transform 0.2s ease;
}
.brand:hover img { transform: scale(1.04) rotate(-2deg); }

/* Desktop nav */
.main-nav {
	display: flex;
	gap: 2px;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
}
.main-nav li {
	list-style: none;
	padding: 0;
	margin: 0;
}
.main-nav a {
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--navy);
	text-decoration: none;
	padding: 10px 14px;
	border-radius: 999px;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
	position: relative;
}
.main-nav a:hover {
	background: var(--yellow);
	transform: translateY(-2px) rotate(-2deg);
}
.main-nav a.active {
	background: var(--navy);
	color: var(--yellow);
}
.nav-cta {
	background: var(--brand-gold);
	color: white !important;
	padding: 12px 20px !important;
	border-radius: 999px;
	box-shadow: 0 4px 0 var(--brand-gold-dark);
	transition: all 0.15s ease;
	margin-left: 8px;
}
.nav-cta:hover {
	background: var(--brand-gold) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 0 var(--brand-gold-dark) !important;
	rotate: 0deg !important;
}

/* Header actions cluster (cart + burger) */
.header-actions {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* Cart icon */
.cart-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: white;
	border-radius: 999px;
	padding: 8px 14px 8px 12px;
	text-decoration: none;
	color: var(--navy);
	box-shadow: 0 3px 0 var(--cream-peach);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.cart-link:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 0 var(--cream-peach);
	color: var(--brand-blue);
}
.cart-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--navy);
}
.cart-link:hover .cart-icon { color: var(--brand-blue); }
.cart-count {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--ink-mute);
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--cream-peach);
	border-radius: 999px;
	line-height: 1;
}
.cart-count.has-items {
	background: var(--brand-gold);
	color: white;
	box-shadow: 0 0 0 2px white;
	animation: cart-pulse 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes cart-pulse {
	0%   { transform: scale(0.5); }
	60%  { transform: scale(1.2); }
	100% { transform: scale(1); }
}

/* Animated burger — 3 lines that morph into an X */
.menu-toggle {
	display: none;
	background: var(--navy);
	color: white;
	border: none;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	cursor: pointer;
	position: relative;
	padding: 0;
	transition: background 0.2s ease, transform 0.2s ease;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}
@media (max-width: 1024px) {
	.menu-toggle { display: inline-flex; }
}
.menu-toggle:hover { background: var(--brand-blue); transform: translateY(-1px); }
.menu-toggle__bars {
	display: block;
	position: relative;
	width: 22px;
	height: 16px;
	margin: 0 auto;
}
.menu-toggle__bars span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2.5px;
	background: white;
	border-radius: 2px;
	transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.2s ease, top 0.3s ease;
}
.menu-toggle__bars span:nth-child(1) { top: 0; }
.menu-toggle__bars span:nth-child(2) { top: 7px; }
.menu-toggle__bars span:nth-child(3) { top: 14px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(1) {
	top: 7px;
	transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(2) {
	opacity: 0;
}
.menu-toggle[aria-expanded="true"] .menu-toggle__bars span:nth-child(3) {
	top: 7px;
	transform: rotate(-45deg);
}

/* =================================================================
   MOBILE MENU DRAWER — slides in from the right (v4.12.3 polish)
   - 100dvh handles iOS Safari address-bar showing/hiding
   - z-index 1000+ keeps it above ticker (101) + header (100)
   - Backdrop-filter has a solid-fallback for browsers without it
   - Drawer header uses grid for guaranteed alignment of logo vs close
   - Safe-area-inset support for notched devices
   ================================================================= */
.mobile-menu-backdrop {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	background: rgba(0, 29, 131, 0.65); /* solid fallback if no backdrop-filter */
	z-index: 1099;
	opacity: 0;
	transition: opacity 0.3s ease;
	pointer-events: none;
}
@supports (backdrop-filter: blur(4px)) or (-webkit-backdrop-filter: blur(4px)) {
	.mobile-menu-backdrop {
		background: rgba(0, 29, 131, 0.5);
		backdrop-filter: blur(6px) saturate(140%);
		-webkit-backdrop-filter: blur(6px) saturate(140%);
	}
}
.mobile-menu-backdrop.is-open {
	opacity: 1;
	pointer-events: auto;
}

.mobile-menu {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	max-width: 420px;
	height: 100vh;
	height: 100dvh;
	background: var(--cream);
	z-index: 1100;
	transform: translateX(100%);
	transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
	overflow-y: auto;
	overscroll-behavior: contain;
	-webkit-overflow-scrolling: touch;
	box-shadow: -20px 0 60px rgba(0, 29, 131, 0.18);
	/* Force its own stacking context so parent transforms can't capture it */
	will-change: transform;
	isolation: isolate;
}
.mobile-menu.is-open { transform: translateX(0); }

.mobile-menu__inner {
	min-height: 100%;
	display: flex;
	flex-direction: column;
	padding: 20px 24px 40px;
	/* Safe-area inset for notched devices (iPhone X+) */
	padding-top: max(20px, env(safe-area-inset-top));
	padding-right: max(24px, env(safe-area-inset-right));
	padding-bottom: max(40px, env(safe-area-inset-bottom));
	box-sizing: border-box;
}

/* Drawer header — logo left, close button right, perfectly aligned */
.mobile-menu__header {
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: center;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 16px;
	border-bottom: 2px dashed rgba(139, 90, 43, 0.18);
}
.mobile-menu__brand {
	display: inline-flex;
	align-items: center;
	min-width: 0;
}
.mobile-menu__brand img {
	height: 42px;
	width: auto;
	display: block;
	max-width: 100%;
	object-fit: contain;
}
.mobile-menu__close {
	width: 44px;
	height: 44px;
	border: none;
	background: white;
	color: var(--navy);
	border-radius: 50%;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 3px 0 var(--cream-peach);
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	flex-shrink: 0;
}
.mobile-menu__close:hover {
	background: var(--brand-blue);
	color: white;
	transform: rotate(90deg);
}
.mobile-menu__close svg {
	display: block;
	width: 22px;
	height: 22px;
}

/* Vertical nav as card list */
.mobile-menu__nav ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.mobile-menu__nav li { margin-bottom: 10px; }
.mobile-menu__nav a {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 14px 18px;
	background: white;
	border-radius: 16px;
	text-decoration: none;
	color: var(--navy);
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 16px;
	box-shadow: 0 3px 0 var(--cream-peach);
	transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
	border-left: 4px solid transparent;
	box-sizing: border-box;
	width: 100%;
}
.mobile-menu__nav a:hover,
.mobile-menu__nav a:focus-visible {
	transform: translateX(4px);
	border-left-color: var(--brand-blue);
}
.mobile-menu__nav a.is-active {
	background: var(--navy);
	color: var(--yellow);
	border-left-color: var(--brand-gold);
}
.mobile-menu__icon {
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: currentColor;
}
.mobile-menu__icon svg {
	display: block;
	width: 22px;
	height: 22px;
}
.mobile-menu__label {
	flex: 1;
	min-width: 0;
}
.mobile-menu__arrow {
	color: var(--ink-mute);
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	transition: transform 0.2s ease, color 0.2s ease;
}
.mobile-menu__arrow svg {
	display: block;
	width: 16px;
	height: 16px;
}
.mobile-menu__nav a:hover .mobile-menu__arrow {
	transform: translateX(3px);
	color: var(--brand-blue);
}
.mobile-menu__nav a.is-active .mobile-menu__arrow {
	color: var(--brand-gold);
}

/* CTA + socials at bottom of drawer */
.mobile-menu__cta {
	margin: 28px 0 24px;
	text-align: center;
}
.mobile-menu__cta .btn {
	width: 100%;
	max-width: none;
	display: block;
	text-align: center;
	box-sizing: border-box;
}
.mobile-menu__socials {
	display: flex;
	justify-content: center;
	gap: 10px;
	margin-bottom: 20px;
	flex-wrap: wrap;
}
.mobile-menu__socials a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: white;
	color: var(--navy);
	text-decoration: none;
	box-shadow: 0 3px 0 var(--cream-peach);
	transition: transform 0.15s ease, background 0.2s ease, color 0.2s ease;
	flex-shrink: 0;
}
.mobile-menu__socials a:hover {
	transform: translateY(-3px);
	background: var(--brand-blue);
	color: white;
}
.mobile-menu__socials a svg { display: block; }

.mobile-menu__tagline {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 22px;
	color: var(--brand-gold);
	text-align: center;
	margin: 0;
	margin-top: auto;
}

/* Body scroll lock when drawer open */
body.menu-locked {
	overflow: hidden;
	touch-action: none;
}

/* Mobile breakpoint — hide desktop nav (menu toggle shows via its own rule above) */
@media (max-width: 1024px) {
	.main-nav { display: none; }
}
@media (max-width: 540px) {
	.cart-link { padding: 6px 10px 6px 8px; }
	.cart-link .cart-icon svg { width: 18px; height: 18px; }
	.cart-count { font-size: 11px; min-width: 18px; height: 18px; }
	.site-header { padding: 12px 16px; }
	.brand img { height: 38px; }
	.airport-ticker { font-size: 12px; }
}

/* ===== PAGE HERO (used on inner pages) ===== */
.page-hero {
	padding: 24px 16px 0;
	background: linear-gradient(180deg, #92E7FF 0%, #C9F0FF 50%, var(--cream) 100%);
	position: relative;
	overflow: hidden;
}
.page-hero-inner {
	max-width: 1400px;
	margin: 0 auto;
	position: relative;
}
.page-hero-image {
	width: 100%;
	border-radius: 32px;
	box-shadow: var(--shadow-lg);
	border: 4px solid white;
}
.page-crumbs {
	max-width: 1400px;
	margin: 24px auto 0;
	padding: 0 16px;
	font-family: 'Patrick Hand', sans-serif;
	color: var(--wood);
	font-size: 16px;
}
.page-crumbs a {
	color: var(--navy);
	text-decoration: none;
	font-weight: 600;
}
.page-crumbs a:hover { text-decoration: underline; }

/* ===== SECTION COMMON ===== */
.section-head {
	text-align: center;
	max-width: 760px;
	margin: 0 auto 64px;
}
.section-kicker {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: var(--navy);
	color: var(--board-amber);
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	padding: 8px 20px;
	border-radius: 999px;
	margin-bottom: 20px;
}
.section-kicker::before { content: '✈'; color: white; }
.section-kicker.k-pink { background: var(--pink); color: white; }
.section-kicker.k-pink::before { color: var(--yellow); }
.section-kicker.k-orange { background: var(--orange); color: white; }
.section-kicker.k-orange::before { color: var(--yellow); }
.section-kicker.k-green { background: var(--green); color: white; }
.section-kicker.k-green::before { color: var(--yellow); }
.section-kicker.k-purple { background: var(--purple); color: white; }
.section-kicker.k-purple::before { color: var(--yellow); }
.section-kicker.k-teal { background: var(--teal); color: var(--navy); }
.section-kicker.k-teal::before { color: var(--navy); }

.section-title {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 4.5vw, 56px);
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--navy);
}
.section-title em {
	font-style: normal;
	background: linear-gradient(135deg, var(--orange), var(--pink));
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}
.section-sub {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 22px;
	color: var(--ink-soft);
	margin-top: 16px;
}

/* ===== BUTTONS ===== */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 28px;
	border-radius: 999px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
/* Official brand buttons (per spec: Blue = Travel, Gold = Adventure) */
.btn-blue { background: var(--brand-blue); color: white; box-shadow: 0 5px 0 var(--brand-blue-dark); }
.btn-blue:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--brand-blue-dark); }
.btn-blue:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-blue-dark); }
.btn-gold { background: var(--brand-gold); color: white; box-shadow: 0 5px 0 var(--brand-gold-dark); }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--brand-gold-dark); }
.btn-gold:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--brand-gold-dark); }

/* Legacy / character-accent button variants — still available */
.btn-orange { background: var(--orange); color: white; box-shadow: 0 5px 0 #C25F00; }
.btn-orange:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #C25F00; }
.btn-orange:active { transform: translateY(3px); box-shadow: 0 2px 0 #C25F00; }
.btn-navy { background: var(--navy); color: white; box-shadow: 0 5px 0 #001057; }
.btn-navy:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #001057; }
.btn-pink { background: var(--pink); color: white; box-shadow: 0 5px 0 #C01747; }
.btn-pink:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #C01747; }
.btn-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 5px 0 #C5BC30; }
.btn-yellow:hover { transform: translateY(-2px); box-shadow: 0 7px 0 #C5BC30; }
.btn-ghost {
	background: white;
	color: var(--navy);
	box-shadow: 0 5px 0 var(--cream-peach);
}
.btn-ghost:hover { transform: translateY(-2px); box-shadow: 0 7px 0 var(--cream-peach); }

/* ===== TAGS (luggage hangtag style) ===== */
.tag {
	display: inline-block;
	background: var(--parchment);
	color: var(--wood-dark);
	font-family: 'Patrick Hand', sans-serif;
	font-size: 17px;
	font-weight: 700;
	padding: 6px 18px;
	border-radius: 999px;
	transform: rotate(-2deg);
	box-shadow: 0 3px 0 rgba(139,90,43,0.25);
}
.tag.t-yellow { background: var(--yellow); color: var(--navy); box-shadow: 0 3px 0 #C5BC30; }
.tag.t-pink { background: var(--pink); color: white; box-shadow: 0 3px 0 #C01747; }
.tag.t-blue { background: var(--blue); color: white; box-shadow: 0 3px 0 #1B53B5; }
.tag.t-purple { background: var(--purple); color: white; box-shadow: 0 3px 0 #5F1F7A; }
.tag.t-orange { background: var(--orange); color: white; box-shadow: 0 3px 0 #C25F00; }
.tag.t-green { background: var(--green); color: white; box-shadow: 0 3px 0 #3B6B1F; }

/* ===== JOIN SECTION (reused on multiple pages) ===== */
.join-section {
	background: var(--orange);
	color: white;
	padding: 100px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.join-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		radial-gradient(circle at 10% 30%, rgba(255,255,255,0.15) 0%, transparent 40%),
		radial-gradient(circle at 90% 70%, rgba(255,255,255,0.1) 0%, transparent 35%);
	pointer-events: none;
}
.join-inner {
	max-width: 720px;
	margin: 0 auto;
	position: relative;
	z-index: 1;
}
.join-tag {
	display: inline-block;
	background: white;
	color: var(--orange);
	font-family: 'Patrick Hand', sans-serif;
	font-size: 20px;
	padding: 6px 22px;
	border-radius: 999px;
	transform: rotate(-2deg);
	margin-bottom: 24px;
	box-shadow: 0 4px 0 rgba(0,0,0,0.15);
}
.join-section h2 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 5vw, 62px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	margin-bottom: 16px;
}
.join-section p {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 22px;
	margin-bottom: 32px;
	opacity: 0.95;
}
.join-form {
	display: flex;
	gap: 12px;
	max-width: 480px;
	margin: 0 auto;
	flex-wrap: wrap;
}
.join-form input {
	flex: 1;
	min-width: 220px;
	padding: 18px 24px;
	border: none;
	border-radius: 999px;
	font-family: 'Fredoka', sans-serif;
	font-size: 16px;
	background: white;
	color: var(--navy);
	box-shadow: inset 0 2px 6px rgba(0,0,0,0.08);
}
.join-form input:focus {
	outline: 3px solid var(--yellow);
	outline-offset: 2px;
}
.join-form button {
	background: var(--navy);
	color: white;
	border: none;
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 16px;
	padding: 16px 32px;
	border-radius: 999px;
	box-shadow: 0 5px 0 #001057;
	cursor: pointer;
	transition: transform 0.15s ease;
}
.join-form button:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 #001057;
}
.join-form button:disabled,
.join-form.is-loading button {
	opacity: 0.7;
	cursor: wait;
	transform: none;
}
.join-form.is-loading button::after {
	content: '';
	display: inline-block;
	width: 14px; height: 14px;
	margin-left: 10px;
	border: 2px solid rgba(255,255,255,0.4);
	border-top-color: white;
	border-radius: 50%;
	animation: spin 0.8s linear infinite;
	vertical-align: middle;
}
@keyframes spin { to { transform: rotate(360deg); } }

.join-form-status {
	max-width: 480px;
	margin: 16px auto 0;
	min-height: 24px;
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 15px;
	text-align: center;
	color: white;
	opacity: 0;
	transform: translateY(-4px);
	transition: opacity 0.3s, transform 0.3s;
}
.join-form-status.is-visible {
	opacity: 1;
	transform: translateY(0);
}
.join-form-status.is-success {
	color: var(--board-amber);
}
.join-form-status.is-error {
	color: white;
	text-shadow: 0 1px 2px rgba(0,0,0,0.2);
}

/* =================================================================
   FOOTER CTA — "Before You Go" block, sits above the navy footer
   ================================================================= */
.footer-cta {
	background: linear-gradient(180deg, var(--cream) 0%, var(--cream-peach) 100%);
	padding: 80px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.footer-cta__inner {
	max-width: 760px;
	margin: 0 auto;
	position: relative;
	z-index: 2;
}
.footer-cta__kicker {
	display: inline-block;
	background: var(--navy);
	color: var(--yellow);
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	padding: 8px 18px;
	border-radius: 999px;
	margin-bottom: 18px;
}
.footer-cta__title {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 5vw, 52px);
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 16px;
}
.footer-cta__title em {
	font-style: normal;
	color: var(--brand-gold);
	position: relative;
}
.footer-cta__title em::after {
	content: '';
	position: absolute;
	left: 0; right: 0; bottom: -6px;
	height: 6px;
	background: var(--brand-gold);
	border-radius: 999px;
	opacity: 0.3;
}
.footer-cta__lead {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 19px;
	line-height: 1.55;
	color: var(--ink-soft);
	max-width: 520px;
	margin: 0 auto 28px;
}
.footer-cta__form {
	max-width: 520px;
	margin: 0 auto;
}
/* Decorative motifs already absolutely positioned via inline styles */
.footer-cta__plane,
.footer-cta__compass { z-index: 0; opacity: 0.1; }

/* =================================================================
   LUGGAGE-TAG RAINBOW STRAP — divider between CTA and dark footer
   ================================================================= */
.footer-strap {
	background: var(--navy);
	padding: 0;
	position: relative;
}
.footer-strap__inner {
	display: flex;
	height: 18px;
	width: 100%;
}
.footer-strap__inner span {
	flex: 1;
	height: 100%;
	display: block;
	position: relative;
}
.footer-strap__inner span:nth-child(even) {
	transform: skewX(-12deg);
}
.footer-strap__inner span:nth-child(odd) {
	transform: skewX(12deg);
}

/* =================================================================
   SITE FOOTER — dark navy "destination" feel
   ================================================================= */
.site-footer {
	background: var(--navy);
	color: white;
	padding: 0 32px 32px;
	position: relative;
	overflow: hidden;
}

/* Crew portrait row at top of footer */
.footer-crew {
	padding: 48px 0 32px;
	border-bottom: 1px dashed rgba(255, 255, 255, 0.12);
	margin-bottom: 48px;
}
.footer-crew__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	justify-content: center;
}
.footer-crew__label {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--brand-gold);
}
.footer-crew__row {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	justify-content: center;
}
.footer-crew__avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	background: var(--c, var(--brand-blue));
	color: white;
	text-decoration: none;
	overflow: hidden;
	box-shadow: 0 0 0 3px rgba(255,255,255,0.12), 0 4px 12px rgba(0,0,0,0.25);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 22px;
}
.footer-crew__avatar img {
	width: 100%; height: 100%;
	object-fit: cover;
	display: block;
}
.footer-crew__avatar:hover {
	transform: translateY(-4px) scale(1.08) rotate(-4deg);
	box-shadow: 0 0 0 3px var(--c, var(--brand-blue)), 0 8px 20px rgba(0,0,0,0.35);
}
.footer-crew__all {
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--brand-gold);
	text-decoration: none;
	padding: 8px 16px;
	border: 2px solid rgba(244, 181, 63, 0.4);
	border-radius: 999px;
	transition: all 0.2s ease;
}
.footer-crew__all:hover {
	background: var(--brand-gold);
	color: var(--navy);
	border-color: var(--brand-gold);
}

/* 4-column footer */
.footer-inner {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
	gap: 48px;
	margin-bottom: 48px;
}
.footer-brand img {
	height: 56px;
	width: auto;
	margin-bottom: 16px;
	display: block;
}
.footer-brand__tagline {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 28px;
	color: var(--brand-gold);
	margin: 0 0 8px;
	transform: rotate(-2deg);
	display: inline-block;
}
.footer-brand__sub {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 17px;
	color: white;
	line-height: 1.5;
	margin: 0;
}
.footer-col h4 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 13px;
	color: var(--brand-gold);
	letter-spacing: 0.18em;
	text-transform: uppercase;
	margin-bottom: 18px;
}
.footer-col ul {
	list-style: none;
	padding: 0;
	margin: 0;
}
.footer-col li { margin-bottom: 10px; }
.footer-col a {
	color: white;
	text-decoration: none;
	font-size: 15px;
	transition: color 0.2s, transform 0.15s ease;
	display: inline-block;
}
.footer-col a:hover {
	color: var(--brand-gold);
	transform: translateX(3px);
}
.footer-col__lead {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 16px;
	color: white;
	margin-bottom: 18px;
	line-height: 1.5;
}

/* =================================================================
   FORCED FOOTER LINK COLORS (v4.9.4)
   Defeats any cache, plugin, or wp_nav_menu specificity conflict.
   Targets: fallback markup (.footer-col > ul > li > a) AND
            wp_nav_menu rendered markup (.menu > .menu-item > a).
   ================================================================= */
.site-footer .footer-col a,
.site-footer .footer-col li a,
.site-footer .footer-col ul a,
.site-footer .footer-col .menu a,
.site-footer .footer-col .menu-item a,
.site-footer .footer-col .menu-item-type-post_type a,
.site-footer .footer-col .menu-item-type-custom a,
.site-footer .footer-col p a,
.site-footer .footer-col__lead a {
	color: #ffffff !important;
	text-decoration: none !important;
}
.site-footer .footer-col a:hover,
.site-footer .footer-col li a:hover,
.site-footer .footer-col .menu a:hover,
.site-footer .footer-col .menu-item a:hover {
	color: #F4B53F !important; /* Adventure Gold */
}
/* Bottom row legal links — also forced white */
.site-footer .footer-bottom a,
.site-footer .footer-bottom__legal a,
.site-footer .footer-bottom__copyright a {
	color: #ffffff !important;
}
.site-footer .footer-bottom a:hover,
.site-footer .footer-bottom__legal a:hover {
	color: #F4B53F !important;
}

/* Social icons — brand-colored on hover */
.footer-socials {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.footer-socials a {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	background: rgba(255,255,255,0.12);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: white;
	text-decoration: none;
	transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.footer-socials a:hover {
	transform: translateY(-4px) rotate(-6deg);
}
.footer-socials a:hover svg { transform: scale(1.1); }
.footer-socials a svg { transition: transform 0.2s ease; }
.fs-youtube:hover    { background: #FF0000; }
.fs-instagram:hover  { background: linear-gradient(45deg, #F58529, #DD2A7B, #8134AF); }
.fs-tiktok:hover     { background: #25F4EE; color: var(--navy); }
.fs-facebook:hover   { background: #1877F2; }
.fs-x:hover          { background: white; color: var(--navy); }

/* Paper plane that flies across when footer enters viewport */
.footer-plane {
	position: absolute;
	top: 48px;
	right: 4%;
	opacity: 0;
	transform: translateX(-30px) rotate(-25deg);
	transition: opacity 0.6s ease, transform 1.4s cubic-bezier(0.34, 1.2, 0.64, 1);
	pointer-events: none;
	color: rgba(255, 255, 255, 0.18);
	z-index: 1;
}
.footer-plane.is-flying {
	opacity: 1;
	transform: translateX(0) rotate(-12deg);
}

/* Bottom legal row */
.footer-bottom {
	max-width: 1300px;
	margin: 0 auto;
	padding-top: 28px;
	border-top: 1px solid rgba(255,255,255,0.18);
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 16px;
	font-size: 13px;
	color: white;
	font-family: 'Fredoka', sans-serif;
	font-weight: 500;
}
.footer-bottom__copyright {
	display: inline-flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	color: white;
}
.footer-bottom__care {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 17px;
	color: var(--brand-gold);
	display: inline-flex;
	align-items: center;
	gap: 4px;
}
.footer-bottom__divider {
	color: rgba(255,255,255,0.4);
}
.footer-bottom__legal {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}
.footer-bottom__legal a {
	color: white;
	text-decoration: none;
}
.footer-bottom__legal a:hover {
	color: var(--brand-gold);
}


/* ===== BACK-TO-TOP BUTTON ===== */
.back-to-top {
	position: fixed;
	bottom: 24px;
	right: 24px;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--brand-gold);
	color: white;
	border: none;
	font-size: 24px;
	font-weight: 700;
	cursor: pointer;
	z-index: 99;
	box-shadow: 0 5px 0 var(--brand-gold-dark), 0 12px 28px rgba(0,29,131,0.18);
	opacity: 0;
	pointer-events: none;
	transform: translateY(20px);
	transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.15s ease;
	display: flex;
	align-items: center;
	justify-content: center;
}
.back-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}
.back-to-top:hover {
	transform: translateY(-2px);
	box-shadow: 0 7px 0 var(--brand-gold-dark), 0 14px 32px rgba(0,29,131,0.22);
}
.back-to-top:active {
	transform: translateY(1px);
	box-shadow: 0 3px 0 var(--brand-gold-dark), 0 8px 20px rgba(0,29,131,0.18);
}
@media (max-width: 720px) {
	.back-to-top {
		bottom: 16px;
		right: 16px;
		width: 44px;
		height: 44px;
		font-size: 20px;
	}
}

/* =================================================================
   v4.8 — CRAFT LAYER
   Section dividers, floating motifs, enhanced hovers, stamp effects.
   All optional utilities — apply via class name where wanted.
================================================================= */

/* ===== SECTION DIVIDERS (cut/torn paper edge) =====
   Add to a section to give it a hand-torn parchment edge that
   transitions cleanly to the next section. Comes in two flavors:
   .has-torn-bottom  → bottom edge looks ripped (sits before another section)
   .has-torn-top     → top edge looks ripped (sits after another section)
   .has-wave-bottom  → wavy bottom edge (softer than torn)
================================================================= */
.has-torn-bottom { position: relative; }
.has-torn-bottom::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: -1px;
	height: 24px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 12 L60 8 L120 16 L200 6 L280 18 L360 10 L440 16 L520 8 L600 14 L680 6 L760 18 L840 10 L920 16 L1000 8 L1080 14 L1160 8 L1200 14 L1200 0 Z' fill='%23FFF8E7'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 5;
}
.has-torn-bottom--peach::after {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 12 L60 8 L120 16 L200 6 L280 18 L360 10 L440 16 L520 8 L600 14 L680 6 L760 18 L840 10 L920 16 L1000 8 L1080 14 L1160 8 L1200 14 L1200 0 Z' fill='%23FBD9AB'/%3E%3C/svg%3E");
}
.has-torn-bottom--navy::after {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 24' preserveAspectRatio='none'%3E%3Cpath d='M0 0 L0 12 L60 8 L120 16 L200 6 L280 18 L360 10 L440 16 L520 8 L600 14 L680 6 L760 18 L840 10 L920 16 L1000 8 L1080 14 L1160 8 L1200 14 L1200 0 Z' fill='%23001D83'/%3E%3C/svg%3E");
}
.has-wave-bottom { position: relative; }
.has-wave-bottom::after {
	content: '';
	position: absolute;
	left: 0; right: 0;
	bottom: -1px;
	height: 40px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C200,20 400,0 600,20 C800,40 1000,40 1200,20 L1200,40 Z' fill='%23FFF8E7'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	pointer-events: none;
	z-index: 5;
}
.has-wave-bottom--peach::after {
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C200,20 400,0 600,20 C800,40 1000,40 1200,20 L1200,40 Z' fill='%23FBD9AB'/%3E%3C/svg%3E");
}

/* ===== FLOATING DECORATIVE MOTIFS =====
   Subtle airport/travel iconography scattered in section margins.
   Use sparingly — never compete with content. Always low-opacity, behind.
================================================================= */
.spl-motif {
	position: absolute;
	pointer-events: none;
	z-index: 1;
	opacity: 0.08;
}
.spl-motif--plane {
	width: 80px; height: 80px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232970E6'%3E%3Cpath d='M2.5 19h19v2h-19v-2zm19.07-9.94c-.2-.79-1.01-1.26-1.8-1.06L14.92 9.45 8.46 3.44l-1.93.51 3.88 6.71L4.6 12.34l-2.34-1.83-1.45.38 1.43 4.95.84.99 6.55-1.41 6.62-1.42 5.62-1.51c.79-.21 1.26-1.01 1.07-1.81-.21-.79-1.01-1.26-1.81-1.07L21.57 9.06z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.spl-motif--compass {
	width: 70px; height: 70px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4B53F'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8zm-1.79-5.78l-2.93-1.27 1.27 2.93L12 14l3.45 1.88-1.27-2.93 2.93-1.27L14 12l1.88-3.45-2.93 1.27L12 6l-1.88 3.45L7.19 8.18l1.27 2.93L6 12l3.45 1.88L8.18 16.81l3.03-1.59z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.spl-motif--suitcase {
	width: 60px; height: 60px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23FC295E'%3E%3Cpath d='M9.5 18.5h5v-9h-5v9zm10 0h-3v-9h3v9zm-13 0h-3v-9h3v9zM18 6V4c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v2H3c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-3zM8 4h8v2H8V4z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.spl-motif--star {
	width: 50px; height: 50px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%238735A3'%3E%3Cpath d='M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
}
.spl-motif--rotate-12 { transform: rotate(-12deg); }
.spl-motif--rotate-8  { transform: rotate(8deg); }
.spl-motif--rotate-15 { transform: rotate(-15deg); }
.spl-motif--rotate-5  { transform: rotate(5deg); }
.spl-motif--float {
	animation: spl-float 6s ease-in-out infinite;
}
@keyframes spl-float {
	0%, 100% { transform: translateY(0) rotate(var(--motif-rot, -12deg)); }
	50%      { transform: translateY(-8px) rotate(var(--motif-rot, -12deg)); }
}

/* ===== PASSPORT STAMP EFFECT on hover for collection grids =====
   When you hover a card in .crew-roster-grid, .char-collect-grid,
   .roster-tile, or .char-watch-card, a subtle "stamped" red ring
   appears in a corner like a passport entry stamp.
================================================================= */
.crew-roster-grid .roster-tile,
.char-collect-card,
.char-other-card,
.char-watch-card,
.short-related-card {
	position: relative;
	overflow: hidden;
}
.crew-roster-grid .roster-tile::after,
.char-collect-card::after,
.char-other-card::after,
.char-watch-card::after,
.short-related-card::after {
	content: '';
	position: absolute;
	top: 12px;
	right: 12px;
	width: 38px;
	height: 38px;
	border: 2px dashed var(--brand-blue);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.6) rotate(-30deg);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%232F7FD8'%3E%3Cpath d='M2.5 19h19v2h-19v-2zm19.07-9.94c-.2-.79-1.01-1.26-1.8-1.06L14.92 9.45 8.46 3.44l-1.93.51 3.88 6.71L4.6 12.34l-2.34-1.83-1.45.38 1.43 4.95.84.99 6.55-1.41 6.62-1.42 5.62-1.51c.79-.21 1.26-1.01 1.07-1.81-.21-.79-1.01-1.26-1.81-1.07L21.57 9.06z'/%3E%3C/svg%3E");
	background-size: 60%;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 3;
}
.crew-roster-grid .roster-tile:hover::after,
.char-collect-card:hover::after,
.char-other-card:hover::after,
.char-watch-card:hover::after,
.short-related-card:hover::after {
	opacity: 0.5;
	transform: scale(1) rotate(-12deg);
}

/* ===== ENHANCED CARD HOVER WOBBLE =====
   Adds subtle 1-2° wobble on hover for grids that don't already have it.
   Only applied to non-touch devices via media query.
================================================================= */
@media (hover: hover) {
	.spl-wobble-on-hover {
		transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease !important;
	}
	.spl-wobble-on-hover:hover {
		transform: translateY(-6px) rotate(-1deg) !important;
	}
	.spl-wobble-on-hover:nth-child(even):hover {
		transform: translateY(-6px) rotate(1deg) !important;
	}
}

/* ===== BOARDING PASS NEWSLETTER FORM =====
   The Join section becomes a boarding-pass shape with perforated edge.
   Applied via .join-section--pass class.
================================================================= */
.join-section .join-inner {
	position: relative;
}
.join-section .join-inner::before,
.join-section .join-inner::after {
	content: '';
	position: absolute;
	top: 50%;
	width: 24px;
	height: 24px;
	background: var(--cream);
	border-radius: 50%;
	transform: translateY(-50%);
	box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);
	display: none; /* off by default — opt in via class */
}
.join-section--pass .join-inner::before { left: -12px; display: block; }
.join-section--pass .join-inner::after  { right: -12px; display: block; }

/* ===== ENHANCED EMPTY STATES =====
   The "Coming Soon" cards get a real brand voice — animated paper plane,
   subtle parchment frame, sparkle accent. Used wherever there's no
   content yet (no shorts published, no products tagged, etc.).
================================================================= */
.spl-empty {
	position: relative;
	max-width: 720px;
	margin: 0 auto;
	padding: 56px 40px 48px;
	text-align: center;
	background: white;
	border-radius: 28px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	border-top: 5px solid var(--brand-gold);
}
.spl-empty::before {
	content: '';
	position: absolute;
	top: -30px; right: -30px;
	width: 140px; height: 140px;
	background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F4B53F'%3E%3Cpath d='M2.5 19h19v2h-19v-2zm19.07-9.94c-.2-.79-1.01-1.26-1.8-1.06L14.92 9.45 8.46 3.44l-1.93.51 3.88 6.71L4.6 12.34l-2.34-1.83-1.45.38 1.43 4.95.84.99 6.55-1.41 6.62-1.42 5.62-1.51c.79-.21 1.26-1.01 1.07-1.81-.21-.79-1.01-1.26-1.81-1.07L21.57 9.06z'/%3E%3C/svg%3E");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0.08;
	transform: rotate(-15deg);
}
.spl-empty__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 64px;
	height: 64px;
	background: var(--cream-peach);
	color: var(--navy);
	border-radius: 50%;
	margin-bottom: 18px;
	position: relative;
	animation: spl-bob 3s ease-in-out infinite;
}
.spl-empty__icon svg {
	stroke: var(--navy);
	stroke-width: 2;
}
@keyframes spl-bob {
	0%, 100% { transform: translateY(0); }
	50%      { transform: translateY(-6px); }
}
.spl-empty__icon::after {
	content: '';
	position: absolute;
	bottom: -8px;
	left: 50%;
	transform: translateX(-50%);
	width: 32px;
	height: 4px;
	background: rgba(0,0,0,0.08);
	border-radius: 50%;
	filter: blur(2px);
}
.spl-empty h3 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--navy);
	margin: 0 0 8px;
	position: relative;
	z-index: 1;
}
.spl-empty p {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 18px;
	color: var(--ink-soft);
	margin: 0;
	position: relative;
	z-index: 1;
}
.spl-empty__hint {
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 20px;
	color: var(--brand-gold);
	margin-top: 16px;
	display: inline-block;
	transform: rotate(-2deg);
}

/* ===== BOARDING BOARD ANIMATION =====
   The departure strip on the homepage gets subtle blink on "BOARDING" and
   pulse on the stat numbers. Feels like a real airport board.
================================================================= */
.boarding-strip .num {
	display: inline-block;
	animation: spl-num-pulse 4s ease-in-out infinite;
}
@keyframes spl-num-pulse {
	0%, 90%, 100% { transform: scale(1); }
	95%           { transform: scale(1.04); }
}
.boarding-strip .boarding-label::before {
	content: '●';
	color: var(--board-green);
	margin-right: 8px;
	font-size: 0.7em;
	animation: spl-blink 1.5s ease-in-out infinite;
}
@keyframes spl-blink {
	0%, 100% { opacity: 1; }
	50%      { opacity: 0.3; }
}

/* ===== BREADCRUMBS ===== */
.spl-breadcrumbs ol {
	list-style: none;
	padding: 0;
	margin: 0 0 24px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	font-family: 'Patrick Hand', sans-serif;
	font-size: 16px;
}
.spl-breadcrumbs li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.spl-breadcrumbs a {
	color: var(--ink-soft);
	text-decoration: none;
	transition: color 0.15s ease;
	padding: 4px 0;
}
.spl-breadcrumbs a:hover {
	color: var(--brand-blue);
}
.spl-breadcrumbs [aria-current="page"] {
	color: var(--navy);
	font-weight: 600;
}
.spl-breadcrumbs__sep {
	color: var(--ink-mute);
	opacity: 0.5;
}

/* ===== REVEAL ANIMATION ===== */
[data-reveal] {
	opacity: 0;
	transform: translateY(20px);
	transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
				transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}
[data-reveal].in {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* =================================================================
   RESPONSIVE AUDIT — v4.9
   Global rules + tablet/phone tuning for new header/footer/components.
   Tailored breakpoints: 1024px (tablet landscape), 768px (tablet portrait),
   600px (large phone), 480px (small phone), 380px (tiny phone).
   ================================================================= */

/* Global — prevent horizontal scroll, enable touch optimization */
html, body {
	overflow-x: hidden;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
body {
	min-height: 100vh;
	min-height: 100dvh;
}
img, video, iframe, svg { max-width: 100%; height: auto; }
img { display: block; }
/* SVG icons that should keep their explicit dimensions */
.cart-icon svg, .menu-toggle svg, .footer-socials svg, .mobile-menu__socials svg { height: auto; }

/* Touch-friendly tap targets on coarse-pointer devices */
@media (pointer: coarse) {
	button, a.btn, .nav-cta, .menu-toggle, .cart-link, .footer-socials a, .mobile-menu__socials a {
		min-height: 44px;
	}
	/* Disable subtle hover transforms on touch (they linger awkwardly) */
	.crew-card:hover, .roster-tile:hover, .char-collect-card:hover,
	.char-watch-card:hover, .char-other-card:hover, .short-related-card:hover {
		transform: none;
	}
}

/* ============================================================
   1024px — TABLET LANDSCAPE
   ============================================================ */
@media (max-width: 1024px) {
	.header-inner { gap: 16px; }
	.brand img { height: 44px; }
	/* Footer: 4 cols → 2 cols (brand + connect form a column each) */
	.footer-inner {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
	.footer-brand { grid-column: 1 / -1; text-align: center; }
	.footer-brand img { margin: 0 auto 14px; }
	/* Footer CTA — slightly tighter */
	.footer-cta { padding: 64px 24px; }
}

/* ============================================================
   768px — TABLET PORTRAIT
   ============================================================ */
@media (max-width: 768px) {
	/* Tighter section padding everywhere */
	.brand-promise { padding: 100px 24px 80px; }
	.crew-section, .world-section, .collect-section { padding: 80px 24px; }
	.passport-section { padding: 64px 24px; }
	.char-who-section, .char-watch-section, .char-collect-section,
	.char-expressions-section, .char-bts-section, .char-missions-section,
	.char-other-crew-section { padding: 80px 24px; }

	/* Footer CTA tightens */
	.footer-cta { padding: 56px 20px; }
	.footer-cta__title { font-size: clamp(28px, 6vw, 42px); }

	/* Crew portrait row */
	.footer-crew__inner { gap: 16px; }
	.footer-crew__avatar { width: 50px; height: 50px; font-size: 20px; }

	/* Site footer slightly tighter */
	.site-footer { padding: 0 24px 28px; }
	.airport-ticker { font-size: 12px; }

	/* Character page bio card — slightly tighter */
	.char-hero-card { padding: 30px 26px 24px; max-width: 100%; }
	.char-hero-card__top { margin: -30px -26px 20px; padding: 12px 20px; }
	.char-hero-card__divider { margin: 20px -26px 18px; }
	.char-hero-name { font-size: clamp(32px, 7vw, 44px); }

	/* Breadcrumbs: smaller, less prominent on small screens */
	.spl-breadcrumbs ol { font-size: 14px; gap: 4px; }
}

/* ============================================================
   600px — LARGE PHONE
   ============================================================ */
@media (max-width: 600px) {
	/* Footer: stack to single column */
	.footer-inner { grid-template-columns: 1fr; gap: 32px; text-align: center; }
	.footer-brand img { margin: 0 auto 12px; }
	.footer-col { text-align: center; }
	.footer-col a:hover { transform: none; }
	.footer-socials { justify-content: center; }

	/* Crew row wraps cleanly */
	.footer-crew__inner { flex-direction: column; gap: 18px; }

	/* Bottom legal row stacks */
	.footer-bottom {
		flex-direction: column;
		text-align: center;
		gap: 12px;
	}
	.footer-bottom__copyright { justify-content: center; }

	/* Hide certain decorative pieces on phones to reduce noise */
	.footer-cta__plane, .footer-cta__compass { display: none; }
	.footer-plane { display: none; }

	/* Newsletter form stacks button below input */
	.join-form, .footer-cta__form {
		flex-direction: column;
		gap: 10px;
	}
	.join-form input, .footer-cta__form input { width: 100%; }
	.join-form button, .footer-cta__form button { width: 100%; }

	/* Character page bio elements */
	.char-hero-mini-stats { grid-template-columns: 1fr; gap: 8px; }

	/* Mobile menu full-width when very narrow */
	.mobile-menu { max-width: 100%; }
}

/* ============================================================
   480px — SMALL PHONE
   ============================================================ */
@media (max-width: 480px) {
	.site-header { padding: 10px 14px; }
	.airport-ticker { padding: 6px 0; font-size: 11px; }
	.airport-ticker__sep { font-size: 14px; }
	.brand img { height: 34px; }
	.site-header.is-scrolled .brand img { height: 30px; }

	.footer-strap__inner { height: 14px; }
	.footer-bottom { font-size: 12px; }
	.footer-bottom__care { font-size: 15px; }

	/* Character page hero gets a touch shorter on tiny screens */
	.char-hero { min-height: clamp(460px, 68vh, 620px); }
	.char-hero-bio { min-height: clamp(460px, 68vh, 620px); padding: 32px 16px; }
	.char-hero-card__top {
		font-size: 10px;
		flex-wrap: wrap;
		gap: 6px;
	}

	/* Sections get less padding */
	.brand-promise { padding: 64px 16px 56px; }
	.crew-section, .world-section, .collect-section,
	.char-who-section, .char-watch-section, .char-collect-section,
	.char-expressions-section, .char-bts-section, .char-missions-section,
	.char-other-crew-section { padding: 64px 16px; }

	/* Mobile menu — reduce padding so cards fit better */
	.mobile-menu__inner { padding: 16px 18px 32px; }
	.mobile-menu__nav a { padding: 14px 16px; font-size: 16px; }

	/* Footer CTA */
	.footer-cta { padding: 48px 16px; }
	.footer-cta__lead { font-size: 17px; }

	/* WordPress post body */
	.spl-post-body { padding: 28px 20px; font-size: 17px; }
	.spl-post-title { font-size: clamp(26px, 7vw, 36px); }

	/* Back-to-top stays accessible */
	.back-to-top { bottom: 14px; right: 14px; }
}

/* ============================================================
   380px — TINY PHONE (iPhone SE, older devices)
   ============================================================ */
@media (max-width: 380px) {
	.airport-ticker { font-size: 10px; }
	.cart-link { padding: 4px 8px 4px 6px; }
	.cart-count { font-size: 10px; min-width: 16px; height: 16px; padding: 0 4px; }
	.brand img { height: 30px; }
	.menu-toggle { width: 40px; height: 40px; }

	.footer-cta__title { font-size: 26px; }
	.footer-crew__avatar { width: 44px; height: 44px; font-size: 16px; }
}

/* ============================================================
   IOS SAFE AREA INSETS — accommodate notched devices
   ============================================================ */
@supports (padding: env(safe-area-inset-bottom)) {
	.back-to-top {
		bottom: max(14px, env(safe-area-inset-bottom));
		right: max(14px, env(safe-area-inset-right));
	}
	.mobile-menu__inner {
		padding-bottom: max(32px, env(safe-area-inset-bottom));
		padding-right: max(18px, env(safe-area-inset-right));
	}
	.footer-bottom { padding-bottom: env(safe-area-inset-bottom); }
}

/* =================================================================
   CHARACTER SEARCH & FILTER (/meet/) — v4.12
   ================================================================= */
.crew-search {
	max-width: 1100px;
	margin: 0 auto 32px;
	padding: 0 20px;
}
.crew-search__inner {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
	margin-bottom: 16px;
}
.crew-search__field {
	flex: 1;
	min-width: 280px;
	display: inline-flex;
	align-items: center;
	background: white;
	border-radius: 999px;
	padding: 4px 6px 4px 20px;
	box-shadow: var(--shadow-sm);
	border: 2px solid transparent;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.crew-search__field:focus-within {
	border-color: var(--brand-blue);
	box-shadow: 0 0 0 4px rgba(47, 127, 216, 0.15);
}
.crew-search__icon {
	color: var(--ink-mute);
	display: inline-flex;
	flex-shrink: 0;
}
.crew-search__field:focus-within .crew-search__icon { color: var(--brand-blue); }
.crew-search__field input {
	flex: 1;
	background: none;
	border: none;
	outline: none;
	padding: 14px 12px;
	font-family: 'Patrick Hand', sans-serif;
	font-size: 18px;
	color: var(--ink-deep);
	min-width: 0;
}
.crew-search__field input::placeholder { color: var(--ink-mute); }
.crew-search__clear {
	background: var(--cream-peach);
	color: var(--navy);
	border: none;
	border-radius: 50%;
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}
.crew-search__clear:hover {
	background: var(--brand-blue);
	color: white;
	transform: rotate(90deg);
}
.crew-search__count {
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 14px;
	color: var(--ink-soft);
	display: inline-flex;
	gap: 5px;
	align-items: baseline;
	padding: 6px 14px;
	background: white;
	border-radius: 999px;
	box-shadow: var(--shadow-sm);
}
.crew-search__count .num {
	font-size: 18px;
	color: var(--brand-blue);
	font-weight: 700;
}

/* Filter chips */
.crew-filter-chips {
	display: flex;
	gap: 8px;
	flex-wrap: wrap;
	justify-content: center;
}
.crew-chip {
	background: white;
	color: var(--navy);
	border: 2px solid rgba(0, 29, 131, 0.12);
	border-radius: 999px;
	padding: 8px 16px;
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 13px;
	cursor: pointer;
	transition: all 0.2s ease;
}
.crew-chip:hover {
	border-color: var(--brand-blue);
	color: var(--brand-blue);
	transform: translateY(-2px);
}
.crew-chip.is-active {
	background: var(--brand-blue);
	color: white;
	border-color: var(--brand-blue);
}

/* Loading state — three bouncing dots */
.crew-loading {
	display: none;
	justify-content: center;
	gap: 8px;
	padding: 48px 20px;
}
.crew-loading[hidden] { display: none !important; }
.crew-loading:not([hidden]) { display: flex; }
.crew-loading__dot {
	width: 12px;
	height: 12px;
	background: var(--brand-blue);
	border-radius: 50%;
	animation: crew-bounce 1.2s ease-in-out infinite;
}
.crew-loading__dot:nth-child(2) { background: var(--brand-gold); animation-delay: 0.15s; }
.crew-loading__dot:nth-child(3) { background: var(--brand-pink, #FC295E); animation-delay: 0.3s; }
@keyframes crew-bounce {
	0%, 100% { transform: scale(0.6); opacity: 0.4; }
	50%      { transform: scale(1.2); opacity: 1; }
}

/* Empty state */
.crew-empty {
	max-width: 480px;
	margin: 48px auto;
	text-align: center;
	background: white;
	border-radius: 24px;
	padding: 40px 32px;
	box-shadow: var(--shadow-md);
}
.crew-empty[hidden] { display: none; }
.crew-empty h3 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--navy);
	margin: 0 0 8px;
}
.crew-empty p {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 17px;
	color: var(--ink-soft);
	margin: 0 0 18px;
}
.crew-empty .btn {
	display: inline-block;
}

/* Filtered-out tile state — animate fade rather than instant hide */
.roster-tile.is-filtered-out {
	opacity: 0;
	transform: scale(0.95);
	pointer-events: none;
	position: absolute;
	visibility: hidden;
}
.roster-tile {
	transition: opacity 0.3s ease, transform 0.3s ease;
}

/* =================================================================
   HOMEPAGE CREW "LOAD MORE" BUTTON — v4.12
   ================================================================= */
.crew-more {
	text-align: center;
	margin: 48px auto 0;
	max-width: 1300px;
	padding: 0 32px;
}
.crew-more .btn {
	font-size: 17px;
	min-width: 280px;
}
.crew-card.is-newly-loaded {
	animation: crew-card-pop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes crew-card-pop {
	from { opacity: 0; transform: translateY(20px) scale(0.95); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Responsive search */
@media (max-width: 600px) {
	.crew-search { padding: 0 16px; margin-bottom: 24px; }
	.crew-search__inner { flex-direction: column; align-items: stretch; }
	.crew-search__field input { font-size: 17px; padding: 12px 10px; }
	.crew-search__count { justify-content: center; }
	.crew-chip { padding: 7px 13px; font-size: 12px; }
	.crew-more .btn { width: 100%; min-width: 0; }
}

/* =================================================================
   HOMEPAGE NEW SECTIONS — v4.13
   "Why SPLUGGAGE", Featured Short, Testimonials, FAQ Teaser
   ================================================================= */

/* ------ WHY SECTION ------ */
.why-section {
	padding: 100px 32px;
	background: linear-gradient(180deg, var(--cream) 0%, var(--cream-peach) 100%);
	position: relative;
	overflow: hidden;
}
.why-inner { max-width: 1200px; margin: 0 auto; position: relative; z-index: 2; }
.why-head { text-align: center; margin-bottom: 56px; }
.why-kicker {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--navy); color: var(--yellow);
	font-family: 'Fredoka', sans-serif;
	font-weight: 700; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 8px 16px; border-radius: 999px;
	margin-bottom: 18px;
}
.why-title {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(34px, 4.5vw, 56px);
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0 0 16px;
}
.why-lead {
	font-family: 'Patrick Hand', sans-serif;
	font-size: clamp(18px, 1.8vw, 22px);
	color: var(--ink-soft);
	max-width: 720px;
	margin: 0 auto;
	line-height: 1.55;
}
.why-lead em {
	font-style: normal;
	color: var(--brand-gold);
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 1.15em;
}
.why-pillars {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
}
.why-pillar {
	background: white;
	border-radius: 28px;
	padding: 36px 28px;
	box-shadow: var(--shadow-md);
	text-align: center;
	border-top: 6px solid var(--c, var(--brand-blue));
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.why-pillar:hover { transform: translateY(-6px); }
.why-pillar__icon {
	width: 64px; height: 64px;
	background: var(--c, var(--brand-blue));
	color: white;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin: 0 auto 22px;
	box-shadow: 0 5px 0 color-mix(in srgb, var(--c, var(--brand-blue)) 70%, black);
}
.why-pillar h3 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: var(--navy);
	margin: 0 0 10px;
}
.why-pillar p {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 17px;
	color: var(--ink-soft);
	line-height: 1.5;
	margin: 0;
}

/* ------ FEATURED SHORT ------ */
.featured-short {
	padding: 100px 32px;
	background: var(--navy);
	color: white;
	position: relative;
	overflow: hidden;
}
.featured-short::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		radial-gradient(circle at 20% 30%, rgba(244, 181, 63, 0.08) 0%, transparent 50%),
		radial-gradient(circle at 80% 70%, rgba(252, 41, 94, 0.06) 0%, transparent 50%);
	pointer-events: none;
}
.featured-short__inner {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	gap: 64px;
	align-items: center;
	position: relative;
	z-index: 2;
}
.featured-short__copy {}
.featured-short__kicker {
	display: inline-flex; align-items: center; gap: 6px;
	background: rgba(255,255,255,0.1);
	color: var(--brand-gold);
	font-family: 'Fredoka', sans-serif;
	font-weight: 700; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 8px 16px; border-radius: 999px;
	margin-bottom: 18px;
	border: 1px solid rgba(244, 181, 63, 0.25);
}
.featured-short__copy h2 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(36px, 5vw, 64px);
	letter-spacing: -0.02em;
	line-height: 1.05;
	margin: 0 0 20px;
}
.featured-short__copy h2 em {
	font-style: normal;
	color: var(--brand-gold);
}
.featured-short__copy p {
	font-family: 'Patrick Hand', sans-serif;
	font-size: clamp(18px, 1.7vw, 21px);
	color: rgba(255,255,255,0.85);
	margin: 0 0 28px;
	line-height: 1.55;
	max-width: 480px;
}
.featured-short__player {
	display: block;
	text-decoration: none;
	position: relative;
	border-radius: 28px;
	overflow: hidden;
	box-shadow: 0 20px 60px rgba(0,0,0,0.4);
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
	cursor: pointer;
	background: var(--navy);
}
.featured-short__player:focus-visible {
	outline: 4px solid var(--brand-gold);
	outline-offset: 4px;
}
.featured-short__player:hover { transform: scale(1.02); }
.featured-short__player.is-playing { cursor: default; }
.featured-short__player.is-playing:hover { transform: none; }
.featured-short__iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: 28px;
	background: black;
}
.featured-short__poster {
	aspect-ratio: 16 / 9;
	background-size: cover;
	background-position: center;
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
}
.featured-short__poster::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(0,29,131,0.2) 0%, rgba(0,29,131,0.7) 100%);
}
.featured-short__play {
	position: relative;
	z-index: 2;
	width: 84px; height: 84px;
	border-radius: 50%;
	background: var(--brand-gold);
	color: white;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	transition: transform 0.25s ease;
}
.featured-short__player:hover .featured-short__play {
	transform: scale(1.12);
}
.featured-short__overlay {
	position: absolute;
	bottom: 24px;
	left: 24px;
	right: 24px;
	z-index: 2;
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.featured-short__badge {
	display: inline-block;
	background: var(--brand-gold);
	color: var(--navy);
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	padding: 4px 12px;
	border-radius: 999px;
	align-self: flex-start;
}
.featured-short__title {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 19px;
	color: white;
	text-shadow: 0 2px 8px rgba(0,0,0,0.5);
}

/* ------ TESTIMONIALS ------ */
.testimonials-section {
	padding: 100px 32px;
	background: var(--cream);
	position: relative;
}
.testimonials-head {
	max-width: 720px;
	margin: 0 auto 56px;
	text-align: center;
}
.testimonials__kicker {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--brand-gold);
	color: var(--navy);
	font-family: 'Fredoka', sans-serif;
	font-weight: 700; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 8px 16px; border-radius: 999px;
	margin-bottom: 18px;
}
.testimonials-head h2 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(32px, 4.5vw, 54px);
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}
.testimonials-head h2 em {
	font-style: normal;
	color: var(--brand-gold);
	font-family: 'Caveat', cursive;
	font-weight: 700;
	font-size: 1.05em;
}
.testimonials-grid {
	max-width: 1300px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
}
.testi-card {
	background: white;
	border-radius: 24px;
	padding: 32px 28px;
	box-shadow: var(--shadow-md);
	border-top: 5px solid var(--c, var(--brand-blue));
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
	position: relative;
	transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.testi-card:hover { transform: translateY(-5px); }
.testi-card::before {
	content: '"';
	position: absolute;
	top: 12px;
	right: 22px;
	font-family: 'Caveat', cursive;
	font-size: 90px;
	color: var(--c, var(--brand-blue));
	opacity: 0.18;
	line-height: 1;
}
.testi-card__stars {
	display: inline-flex;
	gap: 2px;
	color: var(--brand-gold);
}
.testi-card blockquote {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 17px;
	color: var(--ink-soft);
	line-height: 1.6;
	margin: 0;
	flex: 1;
}
.testi-card blockquote strong {
	color: var(--navy);
	font-weight: 700;
}
.testi-card figcaption {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding-top: 16px;
	border-top: 1px dashed rgba(0,29,131,0.12);
}
.testi-card figcaption strong {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: 16px;
	color: var(--navy);
}
.testi-card figcaption span {
	font-family: 'Patrick Hand', sans-serif;
	font-size: 14px;
	color: var(--ink-mute);
}

/* ------ FAQ TEASER ------ */
.faq-teaser {
	padding: 100px 32px;
	background: linear-gradient(180deg, var(--cream) 0%, #C9F0FF 100%);
}
.faq-teaser__inner { max-width: 860px; margin: 0 auto; }
.faq-teaser__head { text-align: center; margin-bottom: 40px; }
.faq-teaser__kicker {
	display: inline-flex; align-items: center; gap: 6px;
	background: var(--brand-blue);
	color: white;
	font-family: 'Fredoka', sans-serif;
	font-weight: 700; font-size: 12px;
	letter-spacing: 0.16em; text-transform: uppercase;
	padding: 8px 16px; border-radius: 999px;
	margin-bottom: 18px;
}
.faq-teaser__head h2 {
	font-family: 'Fredoka', sans-serif;
	font-weight: 700;
	font-size: clamp(30px, 4vw, 48px);
	color: var(--navy);
	letter-spacing: -0.02em;
	line-height: 1.1;
	margin: 0;
}
.faq-teaser__head h2 em {
	font-style: normal;
	color: var(--brand-gold);
}
.faq-teaser__list {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 32px;
}
.faq-teaser__item {
	background: white;
	border-radius: 16px;
	box-shadow: var(--shadow-sm);
	overflow: hidden;
	border-top: 3px solid transparent;
	transition: border-top-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.faq-teaser__item[open] {
	border-top-color: var(--brand-gold);
	box-shadow: var(--shadow-md);
}
.faq-teaser__item summary {
	cursor: pointer;
	padding: 18px 22px;
	font-family: 'Fredoka', sans-serif;
	font-weight: 600;
	font-size: 16px;
	color: var(--navy);
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	list-style: none;
}
.faq-teaser__item summary::-webkit-details-marker { display: none; }
.faq-teaser__chev {
	width: 32px; height: 32px;
	background: var(--cream-peach);
	color: var(--navy);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: transform 0.3s ease, background 0.2s ease, color 0.2s ease;
}
.faq-teaser__item[open] .faq-teaser__chev {
	transform: rotate(90deg);
	background: var(--brand-gold);
	color: white;
}
.faq-teaser__item p {
	margin: 0;
	padding: 0 22px 20px;
	font-family: 'Patrick Hand', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--ink-soft);
}
.faq-teaser__item p strong { color: var(--navy); font-weight: 700; }
.faq-teaser__cta { text-align: center; }

/* =================================================================
   HOMEPAGE MOBILE RESPONSIVE — v4.13
   ================================================================= */
@media (max-width: 900px) {
	/* WHY — stack pillars */
	.why-section { padding: 80px 24px; }
	.why-pillars { grid-template-columns: 1fr; gap: 18px; }
	.why-pillar { padding: 28px 24px; }
	.why-pillar__icon { width: 56px; height: 56px; margin-bottom: 18px; }

	/* FEATURED SHORT — stack copy above player */
	.featured-short { padding: 80px 24px; }
	.featured-short__inner { grid-template-columns: 1fr; gap: 36px; text-align: center; }
	.featured-short__copy p { margin-left: auto; margin-right: auto; }

	/* TESTIMONIALS — single column */
	.testimonials-section { padding: 80px 24px; }
	.testimonials-grid { grid-template-columns: 1fr; gap: 18px; max-width: 520px; }
	.testi-card { padding: 28px 24px; }

	/* FAQ TEASER */
	.faq-teaser { padding: 80px 24px; }
}

@media (max-width: 600px) {
	/* WHY */
	.why-section { padding: 64px 16px; }
	.why-head { margin-bottom: 36px; }

	/* FEATURED SHORT */
	.featured-short { padding: 64px 16px; }
	.featured-short__inner { gap: 28px; }
	.featured-short__play { width: 64px; height: 64px; }
	.featured-short__play svg { width: 28px; height: 28px; }
	.featured-short__overlay { bottom: 16px; left: 16px; right: 16px; }
	.featured-short__title { font-size: 16px; }

	/* TESTIMONIALS */
	.testimonials-section { padding: 64px 16px; }
	.testimonials-head { margin-bottom: 36px; }
	.testi-card { padding: 24px 20px; }
	.testi-card::before { font-size: 70px; top: 8px; right: 18px; }

	/* FAQ TEASER */
	.faq-teaser { padding: 64px 16px; }
	.faq-teaser__item summary { padding: 16px 18px; font-size: 15px; gap: 12px; }
	.faq-teaser__chev { width: 28px; height: 28px; }
	.faq-teaser__chev svg { width: 16px; height: 16px; }
	.faq-teaser__item p { padding: 0 18px 18px; font-size: 15px; }
}

/* =================================================================
   EXISTING SECTIONS — MOBILE TIGHTENING (v4.13)
   Make hero, brand-promise, world, passport, collect sections
   feel right on phones.
   ================================================================= */
@media (max-width: 900px) {
	/* World section — stack image above copy */
	.world-section { padding: 80px 24px; }
	.world-inner { grid-template-columns: 1fr !important; gap: 36px; }
	.world-image img { max-height: 280px; object-fit: cover; width: 100%; }
	.world-copy h2 { font-size: clamp(28px, 6vw, 42px); }

	/* Brand promise */
	.brand-promise { padding: 100px 24px 80px; }

	/* Passport */
	.passport-section { padding: 80px 24px; }

	/* Collect */
	.collect-section { padding: 80px 24px; }
	.collect-meta { grid-template-columns: 1fr !important; text-align: center; gap: 20px; }
	.collect-meta .btn { justify-self: center; }
}

@media (max-width: 600px) {
	.hero { padding: 16px 16px 0; }
	.hero-title { font-size: clamp(38px, 10vw, 64px) !important; line-height: 1 !important; }
	.brand-promise { padding: 64px 16px 56px; }
	.world-section { padding: 64px 16px; }
	.passport-section { padding: 64px 16px; }
	.collect-section { padding: 64px 16px; }

	/* Section heads — slightly tighter */
	.section-head { padding: 0 8px; }
	.section-title { font-size: clamp(28px, 7vw, 40px) !important; }

	/* Crew cards — tighter band */
	.crew-band { padding: 14px 16px !important; }
	.crew-band__name { font-size: 18px !important; }
	.crew-band__role { font-size: 13px !important; }
}

@media (max-width: 400px) {
	.why-pillar h3 { font-size: 19px; }
	.why-pillar p { font-size: 15px; }
	.testi-card blockquote { font-size: 15px; }
}