h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title-dark,
.section-title-light,
.about-title {
	font-family: var(--font-secondary);
}

h1,
h2,
h3,
h4,
h5,
h6,
.hero-title,
.section-title-dark,
.section-title-light,
.about-title {}

:root {
	/* ── Extracted directly from KASICON 2026 logo ── */
	--cream: #fafaf7;
	--sand: #f5e6c8;
	--deep-red: #9b1c1c;
	--burnt-orange: #d4380d;
	--fire-orange: #e8450a;
	--gold: #f9a825;
	--gold-light: #ffcc44;
	--forest: #2e7d32;
	--forest-light: #43a047;
	--teal: #00838f;
	--teal-light: #0097a7;
	--navy: #1a237e;
	--dark-bg: #0d0f0a;
	--dark-mid: #111510;
	--dark-card: #191d16;
	--white: #ffffff;
	--text-muted: #7a9a8a;

	/* ── Typography (Standardized) ── */
	--font-primary: 'Montserrat', sans-serif;
	--font-secondary: 'Playfair Display', serif;
}

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

html {
	scroll-behavior: smooth;
}

body {
	background: var(--cream);
	color: #1a1a1a;
	font-family: var(--font-primary);
	overflow-x: hidden;
}

/* ── NOISE OVERLAY ── */
body::before {
	content: '';
	position: fixed;
	inset: 0;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
	pointer-events: none;
	z-index: 9999;
	opacity: .35;
}

/* ── NAV ── */
nav {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0.5rem 3rem;
	/* background: rgba(253, 246, 238, .88);
   backdrop-filter: blur(18px);
   border-bottom: 1px solid rgba(212, 160, 23, .25); */
	transition: all .3s ease;
	/* position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	z-index: 999;
	background-color: rgba(255, 255, 255, 0.3);
	backdrop-filter: blur(5px); */
}

nav.scrolled {
	padding: .6rem 3rem;
	background: rgba(253, 246, 238, .97);
	box-shadow: 0 4px 40px rgba(139, 26, 26, .08);
}

.nav-logo {

	font-size: 1.6rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--deep-red), var(--burnt-orange), var(--gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	letter-spacing: .12em;
}

.nav-logo img {
	width: 200px;
}

.nav-links {
	display: flex;
	gap: 2rem;
	list-style: none;
}

.nav-links a {
	font-family: var(--font-primary);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #2a2010;
	text-decoration: none;
	position: relative;
	transition: color .3s;
}

.nav-links a::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	right: 0;
	height: 1.5px;
	background: var(--burnt-orange);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform .35s ease;
}

.nav-links a:hover {
	color: var(--burnt-orange);
}

.nav-links a:hover::after {
	transform: scaleX(1);
	transform-origin: left;
}

.nav-register {
	font-family: var(--font-primary);
	font-size: .7rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	padding: .55rem 1.4rem;
	background: linear-gradient(135deg, var(--deep-red), var(--burnt-orange));
	color: var(--cream);
	border: none;
	cursor: pointer;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: all .3s;
	text-decoration: none;
	display: inline-block;
}

.nav-register:hover {
	background: linear-gradient(135deg, var(--burnt-orange), var(--gold));
	transform: translateY(-1px);
}

/* ── HERO ── */
.hero {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	overflow: hidden;
}

/* Geometric mandala bg */
.hero-elements-overlay {
	position: absolute;
	inset: 0;
	z-index: 5;
	pointer-events: none;
	background: radial-gradient(ellipse 75% 65% at 50% 45%, rgba(255, 255, 255, 0.4) 0%, rgba(250, 250, 247, 0.2) 45%, rgba(245, 230, 200, 0.1) 100%);
}

.hero-mandala {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 900px;
	height: 900px;
	opacity: .12;
	z-index: 6;
	animation: rotateSlow 90s linear infinite;
}

@keyframes rotateSlow {
	to {
		transform: translate(-50%, -50%) rotate(360deg);
	}
}

/* Theyyam SVG figures flanking */
.theyyam-left,
.theyyam-right {
	position: absolute;
	bottom: 0;
	width: 340px;
	height: 520px;
	opacity: .18;
	filter: sepia(1) hue-rotate(-10deg) saturate(3);
}

.theyyam-left {
	left: -40px;
	transform-origin: bottom left;
	animation: sway 8s ease-in-out infinite;
}

.theyyam-right {
	right: -40px;
	transform: scaleX(-1);
	transform-origin: bottom right;
	animation: sway 8s ease-in-out infinite reverse;
}

@keyframes sway {

	0%,
	100% {
		transform: rotate(-2deg);
	}

	50% {
		transform: rotate(2deg);
	}
}

.theyyam-right {
	animation: swayR 8s ease-in-out infinite reverse;
}

@keyframes swayR {

	0%,
	100% {
		transform: scaleX(-1) rotate(-2deg);
	}

	50% {
		transform: scaleX(-1) rotate(2deg);
	}
}

/* Floating orbs — colors pulled from logo */
.orb {
	position: absolute;
	border-radius: 50%;
	filter: blur(60px);
	pointer-events: none;
	opacity: .4;
}

.orb-1 {
	width: 420px;
	height: 420px;
	top: -100px;
	left: -80px;
	background: radial-gradient(circle, #f9a82555, transparent 70%);
	animation: floatOrb 12s ease-in-out infinite;
}

.orb-2 {
	width: 320px;
	height: 320px;
	bottom: 50px;
	right: -50px;
	background: radial-gradient(circle, #d4380d44, transparent 70%);
	animation: floatOrb 15s ease-in-out infinite reverse;
}

.orb-3 {
	width: 280px;
	height: 280px;
	top: 40%;
	left: 15%;
	background: radial-gradient(circle, #00838f33, transparent 70%);
	animation: floatOrb 18s ease-in-out infinite;
}

.orb-4 {
	width: 240px;
	height: 240px;
	top: 20%;
	right: 15%;
	background: radial-gradient(circle, #2e7d3230, transparent 70%);
	animation: floatOrb 14s ease-in-out infinite reverse;
}

@keyframes floatOrb {

	0%,
	100% {
		transform: translate(0, 0);
	}

	33% {
		transform: translate(30px, -20px);
	}

	66% {
		transform: translate(-20px, 30px);
	}
}

/* Particle dots */
.particles {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
}

.particle {
	position: absolute;
	border-radius: 50%;
	background: var(--gold);
	animation: particleFloat linear infinite;
}

@keyframes particleFloat {
	0% {
		transform: translateY(100vh) rotate(0deg);
		opacity: 0;
	}

	10% {
		opacity: 1;
	}

	90% {
		opacity: .5;
	}

	100% {
		transform: translateY(-100px) rotate(720deg);
		opacity: 0;
	}
}

/* Hero content */
.hero-content {
	position: relative;
	z-index: 10;
	text-align: center;
	max-width: 900px;
}

.hero-eyebrow {

	font-size: 1rem;
	font-weight: 600;
	letter-spacing: .35em;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 1.2rem;
	opacity: 0;
	animation: fadeUp .8s .2s forwards;
}

.hero-chapter-tag {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .35rem 1.2rem;
	border: 1px solid var(--gold-light);
	background: rgba(249, 168, 37, .1);

	font-size: .8rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: 1.8rem;
	clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
	opacity: 0;
	animation: fadeUp .8s .4s forwards;
}

.hero-chapter-tag .dot {
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--gold);
	animation: pulse 2s infinite;
}

@keyframes pulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: .4;
		transform: scale(1.5);
	}
}

.hero-title {

	font-size: clamp(2.2rem, 6.5vw, 4.2rem);
	font-weight: 700;
	line-height: 1.1;
	letter-spacing: 0.12em;
	background: linear-gradient(145deg, #ffffff 0%, #f9a825 50%, #ffffff 100%);
	background-size: 200% 200%;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	animation: gradShift 8s ease infinite, fadeUp .9s .5s both;
	margin-bottom: 1.5rem;
	text-transform: uppercase;
}

@keyframes gradShift {

	0%,
	100% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}
}

.hero-year {

	font-size: clamp(1.4rem, 3.5vw, 2.6rem);
	font-weight: 300;
	letter-spacing: .55em;
	color: var(--navy);
	opacity: 0;
	animation: fadeUp .8s .7s forwards;
	margin-bottom: 1.5rem;
	font-style: italic;
}

.hero-subtitle {
	font-family: var(--font-primary);
	font-size: clamp(.85rem, 1.8vw, 1.1rem);
	font-weight: 300;
	letter-spacing: .08em;
	color: #3a2e1a;
	line-height: 1.8;
	max-width: 600px;
	margin: 0 auto 2.5rem;
	opacity: 0;
	animation: fadeUp .8s .9s forwards;
}

.hero-meta {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 2rem;
	flex-wrap: wrap;
	margin-bottom: 3rem;
	opacity: 0;
	animation: fadeUp .8s 1.1s forwards;
}

.hero-meta-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .2rem;
}

.hero-meta-label {

	font-size: .6rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #fff;
}

.hero-meta-value {

	font-size: 1.1rem;
	font-weight: 600;
	color: #fff;
}

.hero-meta-sep {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, transparent, var(--gold), transparent);
}

.hero-ctas {
	display: flex;
	gap: 1rem;
	justify-content: center;
	flex-wrap: wrap;
	opacity: 0;
	animation: fadeUp .8s 1.3s forwards;
}

.btn-primary {
	font-family: var(--font-primary);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .9rem 2.5rem;
	background: linear-gradient(135deg, var(--deep-red), var(--burnt-orange));
	color: var(--cream);
	text-decoration: none;
	display: inline-block;
	clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
	transition: all .3s;
	position: relative;
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(139, 26, 26, .25);
}

.btn-primary::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, var(--burnt-orange), var(--gold));
	opacity: 0;
	transition: opacity .3s;
}

.btn-primary:hover::before {
	opacity: 1;
}

.btn-primary:hover {
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(139, 26, 26, .3);
}

.btn-primary span {
	position: relative;
	z-index: 1;
}

.btn-secondary {
	font-family: var(--font-primary);
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	padding: .9rem 2.5rem;
	background: var(--teal);
	color: var(--cream);
	text-decoration: none;
	display: inline-block;
	border: 1.5px solid var(--teal);
	clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
	transition: all .3s;
}

.btn-secondary:hover {
	background: var(--cream);
	color: var(--teal);
	transform: translateY(-3px);
	box-shadow: 0 12px 30px rgba(14, 110, 110, .25);
}

@keyframes fadeUp {
	from {
		opacity: 0;
		transform: translateY(28px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

/* Scroll indicator */
.scroll-indicator {
	position: absolute;
	bottom: 2rem;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: .4rem;

	font-size: .55rem;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: var(--text-muted);
	opacity: 0;
	animation: fadeUp .8s 2s forwards;
}

.scroll-line {
	width: 1px;
	height: 40px;
	background: linear-gradient(to bottom, var(--gold), transparent);
	animation: scrollLine 2s ease-in-out infinite;
}

@keyframes scrollLine {

	0%,
	100% {
		transform: scaleY(1);
		opacity: 1;
	}

	50% {
		transform: scaleY(.4);
		opacity: .3;
	}
}

/* ── COUNTDOWN ── */
.countdown-section {
	background: var(--dark-bg);
	padding: 5rem 2rem;
	position: relative;
	overflow: hidden;
}

.countdown-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 80% 60% at 50% 50%, rgba(0, 131, 143, .14) 0%, rgba(46, 125, 50, .06) 80%, transparent 100%);
}

/* Circuit lines — gold from logo */
.circuit-bg {
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(249, 168, 37, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(249, 168, 37, .05) 1px, transparent 1px);
	background-size: 60px 60px;
	opacity: .7;
}

.section-header {
	text-align: center;
	margin-bottom: 3rem;
	position: relative;
	z-index: 5;
}

.section-label {

	font-size: .65rem;
	letter-spacing: .4em;
	text-transform: uppercase;
	color: var(--gold);
	display: block;
	margin-bottom: .8rem;
}

.section-title-light {

	font-size: clamp(2rem, 3vw, 2.5rem);
	font-weight: 700;
	color: var(--cream);
	letter-spacing: .04em;
	line-height: 1.1;
}

.section-title-dark {

	font-size: clamp(2rem, 4.5vw, 3.2rem);
	font-weight: 700;
	color: var(--deep-red);
	letter-spacing: .04em;
	line-height: 1.1;
}

.early-bird-banner {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	background: rgba(212, 160, 23, 0.05);
	color: var(--burnt-orange);
	padding: .6rem 1.4rem;
	font-size: .8rem;
	font-weight: 700;
	margin-top: 1.5rem;
	border: 1px dashed var(--gold);
	border-radius: 4px;
	letter-spacing: .02em;
	font-family: var(--font-primary);
}

.eb-dot {
	width: 6px;
	height: 6px;
	background: var(--burnt-orange);
	border-radius: 50%;
	box-shadow: 0 0 10px var(--burnt-orange);
	animation: ebPulse 1.5s ease-in-out infinite;
}

@keyframes ebPulse {

	0%,
	100% {
		opacity: 1;
		transform: scale(1);
	}

	50% {
		opacity: 0.4;
		transform: scale(1.4);
	}
}

.countdown-grid {
	display: flex;
	justify-content: center;
	gap: 1.5rem;
	flex-wrap: wrap;
	position: relative;
	z-index: 5;
}

.countdown-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 140px;
	position: relative;
	transition: transform .3s;
}

.countdown-item:hover {
	transform: translateY(-6px);
}

.countdown-box {
	width: 130px;
	height: 130px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dark-card);
	border: 1px solid rgba(212, 160, 23, .2);
	position: relative;
	overflow: hidden;
	clip-path: polygon(14px 0%, 100% 0%, calc(100% - 14px) 100%, 0% 100%);
	margin-bottom: 1rem;
}

.countdown-box::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(135deg, rgba(212, 160, 23, .06) 0%, transparent 60%);
}

.countdown-box::after {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	animation: scanLine 3s ease-in-out infinite;
}

@keyframes scanLine {

	0%,
	100% {
		opacity: 0;
	}

	50% {
		opacity: 1;
	}
}

.countdown-number {

	font-size: 2.8rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--gold-light), var(--gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	position: relative;
	z-index: 1;
	transition: all .3s;
	letter-spacing: .05em;
}

.countdown-label {

	font-size: .6rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.countdown-sep {

	font-size: 2rem;
	color: var(--gold);
	align-self: flex-start;
	padding-top: .9rem;
	animation: blink 1.5s step-end infinite;
}

@keyframes blink {

	0%,
	100% {
		opacity: 1;
	}

	50% {
		opacity: 0;
	}
}

.countdown-date-display {
	text-align: center;
	margin-top: 2.5rem;
	position: relative;
	z-index: 5;
	font-family: var(--font-primary);
	font-size: .85rem;
	font-weight: 300;
	letter-spacing: .2em;
	color: rgba(253, 246, 238, .5);
}

.countdown-date-display strong {
	color: var(--gold-light);
	font-weight: 600;
}

/* ── SWIPER HERO CUSTOM STYLES ── */
.hero-slider {
	position: absolute;
	inset: 0;
	z-index: 1;
}

.hero-slide {
	position: relative;
	overflow: hidden;
}

.hero-bg-img {
	position: absolute;
	inset: 0;
	background-size: cover !important;
	background-position: center;
	background-repeat: no-repeat;
	transform: scale(1.15);
	transition: transform 8s ease-out;
}

/* Ken Burns Effect */
.swiper-slide-active .hero-bg-img {
	transform: scale(1);
}

.hero-slide-overlay {
	position: absolute;
	inset: 0;
	background: rgba(13, 15, 10, 0.62);
	z-index: 2;
}

/* Swiper Pagination Custom Dots */
.hero-slider .swiper-pagination {
	bottom: 3rem !important;
	z-index: 20;
}

.hero-slider .swiper-pagination-bullet {
	width: 10px;
	height: 10px;
	background: rgba(255, 255, 255, 0.3);
	opacity: 1;
	border: 1px solid rgba(255, 255, 255, 0.1);
	transition: all 0.4s ease;
	margin: 0 6px !important;
}

.hero-slider .swiper-pagination-bullet-active {
	background: var(--gold);
	width: 30px;
	border-radius: 10px;
	box-shadow: 0 0 15px rgba(249, 168, 37, 0.4);
}

/* ── INTEGRATED HERO COUNTDOWN ── */
.hero-countdown-integrated {
	position: relative;
	z-index: 15;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 1.5rem;
	margin-bottom: 3rem;
	background: rgba(255, 255, 255, 0.08);
	backdrop-filter: blur(8px);
	padding: 0.8rem 2rem;
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 4px;
	opacity: 0;
	animation: fadeUp .8s .7s forwards;
}

.hc-item {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.hc-num {

	font-size: 1.8rem;
	font-weight: 700;
	color: #ffffff;
	line-height: 1;
}

.hc-label {

	font-size: 0.65rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--navy);
	margin-top: 4px;
	font-weight: 600;
}

.hc-sep {

	font-size: 1.8rem;
	color: var(--gold);
	padding-bottom: 15px;
	animation: blink 1s step-end infinite;
}

/* ── ABOUT DARK ── */
.about-section {
	background: var(--dark-mid);
	padding: 7rem 0;
	position: relative;
	overflow: hidden;
}

.about-inner {
	max-width: 1300px;
	max-width: 90%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.2fr;
	gap: 5rem;
	align-items: center;
}

.about-visual {
	position: relative;
}

#message {
	padding: 80px 0;
	background: #f5f5f5;
}

#message .about-inner {
	display: block;
}

#message .about-inner p {
	color: #222;
}

.about-section-light {
	background: var(--cream);
}

.about-section-light h2.about-title,
.about-section-light h4 {
	color: var(--deep-red);
}

.about-section-light h2.about-title span,
.about-section-light h4 span:first-of-type {
	color: var(--burnt-orange);
}

.about-section-light .about-body {
	color: #333;
	border-left-color: var(--deep-red);
}

.committee-section-light {
	background: var(--cream) !important;
}

.committee-section-light::before {
	display: none;
}

.committee-section-light .member-card {
	background: var(--white);
	border-color: rgba(139, 26, 26, .1);
	box-shadow: 0 10px 40px rgba(0, 0, 0, .04);
}

.committee-section-light .member-name {
	color: var(--deep-red);
}

.committee-section-light .member-role {
	color: var(--burnt-orange);
}

.committee-section-light .team-title {
	color: var(--deep-red);
}

#message .secretary {
	text-align: right;
	margin-top: 3.5rem;
}

.secretary-signature {
	font-family: var(--font-secondary);
	font-size: 1.8rem;
	font-style: italic;
	font-weight: 600;
	color: var(--deep-red);
	line-height: 1.2;
	margin-bottom: 0.6rem;
}

.secretary-signature span {
	color: var(--burnt-orange);
}

.secretary-title {
	font-family: var(--font-primary);
	font-size: 0.85rem;
	font-weight: 600;
	color: var(--text-muted);
	letter-spacing: 0.25em;
	text-transform: uppercase;
	margin-bottom: 0.2rem;
}

.secretary-event {
	font-family: var(--font-primary);
	font-size: 0.75rem;
	font-weight: 500;
	color: var(--teal);
	letter-spacing: 0.15em;
	text-transform: uppercase;
}

/* Theyyam SVG illustration */
.theyyam-card {
	width: 100%;
	aspect-ratio: 3/4;
	background: var(--dark-card);
	border: 1px solid rgba(212, 56, 13, .3);
	position: relative;
	overflow: hidden;
	clip-path: polygon(0 0, calc(100% - 20px) 0, 100% 20px, 100% 100%, 20px 100%, 0 calc(100% - 20px));
}

.theyyam-card::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(to bottom, rgba(212, 56, 13, .12), rgba(249, 168, 37, .06));
}

.theyyam-svg-art {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.theyyam-svg-art img {
	width: 100%;
}

.about-text {
	position: relative;
	z-index: 5;
}

.about-text .section-label {
	text-align: left;
}

.about-title {

	font-size: clamp(2.2rem, 4vw, 3.4rem);
	font-weight: 600;
	color: var(--cream);
	line-height: 1.1;
	margin-bottom: 1.5rem;
	font-style: italic;
}

.about-title span {
	color: var(--gold);
}

.about-body {
	font-size: .95rem;
	line-height: 1.9;
	color: rgba(253, 246, 238, .7);
	margin-bottom: 2rem;
}

/* About Page Specific Overrides */
.inner-page-content .about-text {
	padding: 0;
	margin-bottom: 4rem;
}

.inner-page-content .about-title {
	color: var(--deep-red);
	font-style: normal;
	margin-bottom: 2rem;
}


.inner-page-content .about-body {
	color: #444;
	font-size: 1.05rem;
	line-height: 1.8;
	margin-bottom: 1.5rem;
}

.about-intro-flex {
	display: flex;
	gap: 3rem;
	align-items: flex-start;
	margin-bottom: 3rem;
	flex-wrap: wrap;
}

.about-intro-flex>div:first-child {
	flex: 1;
}

.inner-page-content .about-visual {
	margin-top: 0;
}

.inner-page-content .theyyam-card {
	aspect-ratio: 4/5;
	background: var(--white);
	border-color: rgba(139, 26, 26, 0.1);
}

.inner-page-content .theyyam-svg-art img {
	filter: none;
}

.about-secretary-section {
	padding: 0;
	border-top: 1px solid rgba(139, 26, 26, 0.1);
	padding-top: 4rem;
	margin-bottom: 2rem;
}

.inner-page-content .secretary {
	margin-top: 3rem;
}

.committee-section-light {
	padding-top: 5rem;
	padding-bottom: 5rem;
}

.team-block {
	margin-top: 4rem;
}

.team-block:first-of-type {
	margin-top: 0;
}

.organising-committee-banner {
	text-align: center;
	margin-top: 2rem;
}

.organising-committee-banner img {
	width: 100%;
	height: auto;
}

/* Committee List Grid (Moved from template) */
.committee-list-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: 1.2rem;
	margin-top: 2rem;
}

.list-member-item {
	background: var(--white);
	padding: 1.2rem 1.5rem;
	border-left: 3px solid var(--gold);
	box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
	transition: all 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.list-member-item:hover {
	transform: translateX(5px);
	border-left-color: var(--burnt-orange);
	box-shadow: 0 8px 25px rgba(139, 26, 26, 0.08);
}

.list-member-role {
	font-size: 0.6rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--burnt-orange);
	margin-bottom: 0.3rem;
	font-weight: 700;
}

.list-member-name {
	font-family: var(--font-primary);
	font-size: 1rem;
	color: var(--deep-red);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.02em;
}

.about-stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.2rem;
}

.stat-card {
	padding: 1.2rem;
	background: rgba(255, 255, 255, .03);
	border: 1px solid rgba(212, 160, 23, .12);
	transition: all .3s;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
}

.stat-card:hover {
	border-color: rgba(212, 160, 23, .4);
	background: rgba(212, 160, 23, .05);
	transform: translateY(-3px);
}

.stat-num {

	font-size: 2rem;
	font-weight: 600;
	color: var(--gold);
	display: block;
	letter-spacing: .05em;
}

.stat-text {
	font-size: .72rem;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--text-muted);

}

/* ── EVENT DETAILS (light) ── */
.details-section {
	background: var(--cream);
	padding: 7rem 2rem;
	position: relative;
	overflow: hidden;
}

/* 
.details-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--burnt-orange), var(--gold), var(--burnt-orange), transparent);
} */

.details-inner {
	max-width: 1200px;
	margin: 0 auto;
}

.details-section .section-header .section-title-dark {

	font-size: clamp(2rem, 3.5vw, 2.8rem);
	font-weight: 600;
	color: var(--deep-red);
	letter-spacing: .04em;
}

.details-section .section-label {
	color: var(--burnt-orange);
}

.details-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	gap: 1.8rem;
	margin-top: 3rem;
}

.detail-card {
	background: var(--white);
	border: 1px solid rgba(139, 26, 26, .1);
	padding: 2rem;
	position: relative;
	overflow: hidden;
	transition: all .35s;
	clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
}

.detail-card::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--deep-red), var(--gold));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .4s;
}

.detail-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 20px 50px rgba(139, 26, 26, .12);
}

.detail-card:hover::before {
	transform: scaleX(1);
}

.detail-icon {
	width: 50px;
	height: 50px;
	margin-bottom: 1.2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, rgba(201, 75, 31, .1), rgba(212, 160, 23, .08));
	border: 1px solid rgba(212, 160, 23, .25);
	font-size: 1.4rem;
	clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.detail-label {

	font-size: .6rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--burnt-orange);
	margin-bottom: .5rem;
}

.detail-title {

	font-size: 1.25rem;
	font-weight: 600;
	color: var(--deep-red);
	margin-bottom: .5rem;
	line-height: 1.2;
}

.detail-desc {
	font-size: .88rem;
	font-weight: 300;
	line-height: 1.7;
	color: #3a2e1a;
}

/* ── REGISTRATION TARIFF (Table) ── */
.tariff-section {
	background: #ffffff;
	padding: 7rem 2rem;
	position: relative;
}

.tariff-inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.tariff-table-container {
	margin-top: 4rem;
	overflow-x: auto;
	background: #fff;
	border: 1px solid rgba(139, 26, 26, 0.08);
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.03);
	position: relative;
}

.tariff-scroll-hint {
	display: none;
	text-align: center;
	padding: 0.8rem;
	background: var(--cream);
	font-size: 0.75rem;
	color: var(--burnt-orange);
	font-weight: 600;
}

@media (max-width: 768px) {
	.tariff-scroll-hint {
		display: block;
	}
}

.tariff-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 750px;
}

.tariff-table th {
	background: var(--dark-bg);
	color: var(--gold);

	font-size: 0.8rem;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	padding: 1.5rem 1rem;
	text-align: left;
	border-right: 1px solid rgba(255, 255, 255, 0.05);
}

.tariff-table th small {
	display: block;
	font-family: var(--font-primary);
	color: rgba(255, 255, 255, 0.6);
	letter-spacing: 0.05em;
	margin-top: 4px;
	font-weight: 300;
	text-transform: none;
}

.tariff-table td {
	padding: 1.5rem 1rem;
	border-bottom: 1px solid rgba(0, 0, 0, 0.05);
	font-size: 0.95rem;
	color: #444;
	vertical-align: middle;
}

.cat-name {

	font-weight: 700;
	color: var(--navy) !important;
	font-size: 0.9rem !important;
}

.row-badge {
	display: inline-block;
	background: var(--gold);
	color: #fff;
	font-size: 0.6rem;
	padding: 2px 8px;
	border-radius: 2px;
	margin-left: 8px;
	font-family: var(--font-primary);
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.price-eb {
	font-family: var(--font-primary);
	font-weight: 700;
	font-size: 1.25rem;
	color: var(--deep-red);
}

.price-reg {
	font-family: var(--font-primary);
	font-weight: 500;
	color: var(--text-muted);
}

.highlight-row {
	background: rgba(249, 168, 37, 0.03);
}

.btn-table {
	display: inline-block;
	padding: 0.6rem 1.4rem;
	background: linear-gradient(135deg, var(--deep-red), var(--burnt-orange));
	color: #fff;
	text-decoration: none;
	font-family: var(--font-primary);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	clip-path: polygon(8px 0%, 100% 0%, calc(100% - 8px) 100%, 0% 100%);
	transition: all 0.3s;
}

.btn-table:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 15px rgba(139, 26, 26, 0.2);
	filter: brightness(1.1);
}

/* Inclusions Styling */
.tariff-inclusions {
	margin-top: 4rem;
	background: #fafaf7;
	padding: 3rem;
	border-left: 4px solid var(--gold);
}

.inclusions-title {

	font-size: 1rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--deep-red);
	margin-bottom: 2rem;
}

.inclusions-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.5rem;
}

.inc-item {
	font-size: 0.9rem;
	color: #555;
	display: flex;
	align-items: center;
	gap: 12px;
}

.inc-footer {
	margin-top: 2rem;
	font-size: 0.8rem;
	color: var(--text-muted);
	font-style: italic;
}

/* ── COMMITTEE (dark) ── */
.committee-section {
	background: var(--dark-bg);
	padding: 7rem 2rem;
	position: relative;
	overflow: hidden;
}

.committee-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse 60% 40% at 50% 100%, rgba(201, 75, 31, .08) 0%, transparent 70%);
}

.committee-inner {
	max-width: 1100px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.committee-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap: 1.4rem;
}

.team-block {
	margin-top: 4.5rem;
}

.team-title {

	font-size: 0.95rem;
	letter-spacing: 0.25em;
	text-transform: uppercase;
	color: var(--burnt-orange);
	margin-bottom: 2rem;
	text-align: center;
	position: relative;
	padding-bottom: 12px;
}

.team-title::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 60px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.member-card {
	background: var(--dark-card);
	border: 1px solid rgba(212, 160, 23, .1);
	padding: 1.6rem 1.2rem;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: all .35s;
	clip-path: polygon(10px 0%, 100% 0%, calc(100% - 10px) 100%, 0% 100%);
}

.member-card::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	transform: scaleX(0);
	transition: transform .4s;
}

.member-card:hover {
	transform: translateY(-5px);
	border-color: rgba(212, 160, 23, .35);
}

.member-card:hover::after {
	transform: scaleX(1);
}

.member-avatar {
	width: 120px;
	height: 120px;
	border-radius: 50%;
	margin: 0 auto 1.2rem;
	background: linear-gradient(135deg, var(--dark-card), var(--dark-bg));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.6rem;
	font-weight: 700;
	color: var(--gold);
	border: 2px solid rgba(212, 160, 23, 0.2);
	position: relative;
	overflow: hidden;
	transition: all 0.4s ease;
}

.member-avatar img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: sepia(0.3) contrast(1.1);
	transition: transform 0.6s ease;
}

.member-avatar span {
	position: relative;
	z-index: 2;
	background-size: 120%;
	background-repeat: no-repeat;
	background-position: center;
	width: 120px;
	height: 120px;
}


.member-card.chairman .member-avatar,
.member-card.secretary .member-avatar,
.member-card.treasurer .member-avatar {
	border-color: rgba(249, 168, 37, 0.5);
	box-shadow: 0 0 20px rgba(249, 168, 37, 0.15);
}

.member-card.chairman .member-avatar span,
.member-card.secretary .member-avatar span,
.member-card.treasurer .member-avatar span {
	/* background: linear-gradient(135deg, #f9a825, #ffcc44);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent; */
}

.member-role {

	font-size: .58rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--gold);
	margin-bottom: .35rem;
}

.member-name {

	font-size: 1.05rem;
	font-weight: 600;
	color: var(--cream);
	line-height: 1.3;
}

/* ── CONTACT (light) ── */
.contact-section {
	background: linear-gradient(135deg, #fafaf7 0%, #f5e6c8 100%);
	padding: 7rem 2rem;
	position: relative;
	overflow: hidden;
}

.contact-section::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: repeating-linear-gradient(45deg,
			rgba(212, 160, 23, .03) 0px,
			rgba(212, 160, 23, .03) 1px,
			transparent 1px,
			transparent 60px);
}

.contact-inner {
	max-width: 1300px;
	margin: 0 auto;
	position: relative;
	z-index: 5;
}

.contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
	gap: 1.5rem;
	margin-top: 3rem;
}

.contact-card {
	background: var(--white);
	border: 1px solid rgba(139, 26, 26, .1);
	padding: 1.8rem;
	clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
	transition: all .3s;
}

.contact-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 15px 40px rgba(139, 26, 26, .1);
	border-color: rgba(201, 75, 31, .3);
}

.contact-name {

	font-size: 1.1rem;
	font-weight: 600;
	color: var(--deep-red);
	margin-bottom: .3rem;
}

.contact-phone {
	font-size: .88rem;
	font-weight: 600;
	color: var(--burnt-orange);
	margin-bottom: .2rem;
	letter-spacing: .05em;
	font-family: var(--font-primary);
}

.contact-email-block {
	text-align: center;
	margin-top: 2.5rem;
	padding: 1.5rem;
	background: linear-gradient(135deg, rgba(139, 26, 26, .05), rgba(212, 160, 23, .05));
	border: 1px solid rgba(139, 26, 26, .12);
	clip-path: polygon(12px 0%, 100% 0%, calc(100% - 12px) 100%, 0% 100%);
}

.contact-email-label {

	font-size: .6rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--burnt-orange);
	display: block;
	margin-bottom: .5rem;
}

.contact-email-val {

	font-size: 1.25rem;
	font-weight: 600;
	color: var(--deep-red);
	text-decoration: none;
	transition: color .3s;
	letter-spacing: .04em;
}

.contact-email-val:hover {
	color: var(--burnt-orange);
}

/* ── FOOTER ── */
footer {
	background: #060a0f;
	padding: 3rem 2rem;
	text-align: center;
	border-top: 1px solid rgba(212, 160, 23, .15);
}

.footer-logo {

	font-size: 2.2rem;
	font-weight: 700;
	background: linear-gradient(135deg, var(--deep-red), var(--gold));
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	margin-bottom: .5rem;
	letter-spacing: .12em;
}

.footer-sub {

	font-size: .62rem;
	letter-spacing: .3em;
	text-transform: uppercase;
	color: var(--text-muted);
}

.footer-line {
	width: 200px;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--gold), transparent);
	margin: 1.5rem auto;
}

.footer-copy {
	font-size: .75rem;
	color: rgba(255, 255, 255, .25);
	font-weight: 300;
	letter-spacing: .08em;
}

/* ── SCROLL REVEAL ── */
.reveal {
	opacity: 0;
	transform: translateY(32px);
	transition: opacity .8s cubic-bezier(.2, .8, .2, 1), transform .8s cubic-bezier(.2, .8, .2, 1);
}

.reveal.visible {
	opacity: 1;
	transform: translateY(0);
}

.reveal-delay-1 {
	transition-delay: .1s;
}

.reveal-delay-2 {
	transition-delay: .2s;
}

.reveal-delay-3 {
	transition-delay: .3s;
}

.reveal-delay-4 {
	transition-delay: .4s;
}

.reveal-delay-5 {
	transition-delay: .5s;
}

/* Safety net: after 2s, force all reveals visible regardless */
@keyframes forceVisible {
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.reveal {
	animation: forceVisible 0s 2s both;
}

/* ── INNER PAGES ── */
.inner-page-banner {
	position: relative;
	padding: 12rem 2rem 4rem;
	background: radial-gradient(ellipse 80% 60% at 50% 0%, #ffffff 0%, #fafaf7 45%, #f5e6c8 100%);
	overflow: hidden;
	text-align: center;
	color: var(--cream);
	border-bottom: 1px solid rgba(212, 160, 23, .25);
}

.inner-page-banner[style*="background-image"] {
	background-size: cover;
	background-position: center;
}

.inner-page-banner-overlay {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, .4);
	mix-blend-mode: multiply;
}

.inner-page-banner-inner {
	position: relative;
	z-index: 2;
	max-width: 900px;
	margin: 0 auto;
}

.inner-page-label {

	font-size: .7rem;
	letter-spacing: .35em;
	text-transform: uppercase;
	color: var(--gold-light);
	display: block;
	margin-bottom: 1rem;
}

.inner-page-title {

	font-size: clamp(2.4rem, 4.8vw, 3.4rem);
	font-weight: 700;
	letter-spacing: .12em;
	color: var(--cream);
}

.inner-page-content {
	background: var(--cream);
	padding: 3.5rem 1.5rem 4.5rem;
}

.inner-page-content-inner {
	max-width: 1200px;
	margin: 0 auto;
	background: var(--white);
	border: 1px solid rgba(139, 26, 26, .08);
	padding: 2.8rem 2.2rem;
	box-shadow: 0 18px 45px rgba(0, 0, 0, .06);
}

.inner-page-body {
	font-size: .95rem;
	line-height: 1.8;
	color: #3a2e1a;
}

.inner-page-body h2,
.inner-page-body h3,
.inner-page-body h4 {

	color: var(--deep-red);
	margin: 1.8rem 0 .8rem;
}

.inner-page-body p+p {
	margin-top: 1rem;
}

@media (max-width: 768px) {
	.inner-page-banner {
		padding: 5rem 1.4rem 3rem;
	}

	.inner-page-content-inner {
		padding: 2rem 1.4rem;
	}
}

/* ── NAV RESPONSIVE ── */
.nav-toggle {
	display: none;
	flex-direction: column;
	gap: 6px;
	cursor: pointer;
	z-index: 1001;
}

.nav-toggle span {
	width: 28px;
	height: 2px;
	background: var(--deep-red);
	transition: all 0.3s ease;
}

.nav-links-wrapper {
	display: flex;
	align-items: center;
	gap: 3rem;
}

.nav-buttons-mobile {
	display: none;
}

.about-banner {
	background-image: url('../images/slider-2.jpg');
	background-size: cover;
	background-position: center;
}

@media (max-width: 1024px) {
	.nav-links-wrapper {
		position: fixed;
		top: 0;
		right: -100%;
		width: 300px;
		height: 100vh;
		background: var(--white);
		flex-direction: column;
		justify-content: center;
		padding: 4rem 2rem;
		box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
		transition: right 0.4s cubic-bezier(0.4, 0, 0.2, 1);
		z-index: 1000;
	}

	.nav-links-wrapper.active {
		right: 0;
	}

	.nav-links {
		flex-direction: column;
		align-items: flex-start;
		gap: 2rem;
		width: 100%;
	}

	.nav-links li a {
		font-size: 1.2rem;
		color: var(--deep-red);
	}

	.nav-toggle {
		display: flex;
	}

	.nav-buttons {
		display: none !important;
	}

	.nav-buttons-mobile {
		display: flex;
		flex-direction: column;
		gap: 1rem;
		margin-top: 2rem;
		width: 100%;
	}

	.nav-toggle.active span:nth-child(1) {
		transform: translateY(8px) rotate(45deg);
	}

	.nav-toggle.active span:nth-child(2) {
		opacity: 0;
	}

	.nav-toggle.active span:nth-child(3) {
		transform: translateY(-8px) rotate(-45deg);
	}
}

/* ── HERO RESPONSIVE ── */
@media (max-width: 768px) {
	.hero-title {
		font-size: 2.5rem;
		margin-bottom: 1rem;
	}

	.hero-countdown-integrated {
		gap: 0.5rem;
		margin-bottom: 2rem;
	}

	.hc-num {
		font-size: 1.5rem;
	}

	.hc-label {
		font-size: 0.5rem;
	}

	.hero-meta {
		flex-direction: column;
		gap: 1rem;
		align-items: center;
	}

	.hero-meta-sep {
		display: none;
	}

	.hero-ctas {
		flex-direction: column;
		width: 100%;
		max-width: 280px;
		margin: 0 auto;
	}

	.btn-primary,
	.btn-secondary {
		width: 100%;
		text-align: center;
	}

	.about-inner {
		display: block;
	}

	.about-inner .about-visual {
		margin-bottom: 50px;
	}

	.hero-eyebrow,
	.hero-chapter-tag {
		font-size: 0.6rem;
	}

	nav {
		padding: 5px 15px;
	}
}

/* JS Toggle Script (usually better in a separate file, but placing here for immediate effect if handled by a generic injector, otherwise I'll put it in footer.php) */