:root{
	--accent:#ffb74d;
	--accent-2:#60a5fa;
	--brand:#e6f2ff; /* light text on dark background */
	--muted:#94a3b8;
	--bg:#071127; /* deep navy */
	--surface:#0b1a2a; /* header/footer */
	--surface-2:#0f2636; /* cards */
	--header-surface:#112f3f; /* lighter header so dark logo shows */
	--svg-accent: var(--accent);
	--svg-bg: var(--bg);
}
*{box-sizing:border-box}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif;margin:0;color:var(--brand);background:var(--bg);line-height:1.5}
.container{max-width:1100px;margin:0 auto;padding:24px}
.site-header{background:var(--header-surface);box-shadow:0 6px 18px rgba(0,0,0,0.45);isolation:isolate}
.site-header .container{display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;text-decoration:none;color:var(--brand);gap:12px}
.logo img{height:122px;margin-right:27px;display:block;background:transparent;box-shadow:none;border-radius:0;mix-blend-mode:normal}
.logo .brand{font-size:20px;font-weight:800;color:var(--accent-2);letter-spacing:0.2px}

/* Make images and SVGs responsive */
img, svg{max-width:100%;height:auto;display:block}

/* Navigation base layout */
nav{display:flex;gap:18px;align-items:center}
nav a{color:var(--brand);text-decoration:none;font-weight:600}

/* Mobile nav toggle (hidden on wide screens) */
.nav-toggle{display:none;background:transparent;border:0;padding:8px;margin-left:auto;cursor:pointer}
.nav-toggle svg{width:22px;height:22px;display:block}
.hero{background:linear-gradient(90deg,var(--surface) 0%,var(--surface-2) 100%);padding:64px 0;text-align:center}
.hero h1{margin:0 0 12px;font-size:28px}
.hero p{color:var(--muted);margin:0 0 18px}
.btn{display:inline-block;background:var(--accent);color:#111;padding:10px 18px;border-radius:8px;text-decoration:none;font-weight:700}
.btn:hover{background:var(--accent-2);color:#fff}
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;margin-top:18px}
.card{background:var(--surface-2);padding:18px;border-radius:10px;box-shadow:0 6px 18px rgba(2,6,23,0.6);text-align:center}
.card img{height:72px;margin:0 auto 12px;display:block}
/* Form controls: full width and touch-friendly */
input[type="text"],input[type="email"],textarea,select{width:100%;max-width:100%;padding:10px;border:1px solid rgba(0,0,0,0.08);border-radius:8px;margin-top:6px;font:inherit;box-sizing:border-box}
textarea{min-height:120px}
.about-brief, .featured, .cta{padding:40px 0}
.feature-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.feature img{height:80px;margin-bottom:10px}

/* Center the About section */
.about-brief{ text-align:center }
.about-brief h2{ margin-bottom:8px }
.about-brief p{ max-width:64ch; margin:0 auto 12px; color:var(--muted) }
.about-brief .btn{ margin-top:12px }

/* Center all sections on the About page */
.about main.container section{
	max-width:760px;
	margin:0 auto 28px;
	text-align:center;
}
.about main.container section h2{ margin-bottom:8px }
.about main.container > h1{ text-align:center; margin-bottom:12px }
.about main.container > p{ max-width:64ch; margin:0 auto 18px; text-align:center; color:var(--muted) }
.about main.container section ul{
	list-style:none;
	padding-left:0;
	margin:0 auto 12px;
	max-width:680px;
}
.about main.container section ul li{
	text-align:center;
	margin:8px 0;
	padding-left:0;
}

/* About page logo: centered + subtle float animation, hover scales */
.about .about-logo{display:flex;justify-content:center;margin:12px 0 28px}
.about .about-logo .float{display:inline-block;animation:float 6s ease-in-out infinite}
.about .about-logo img{width:180px;height:auto;display:block;border-radius:8px;transition:transform 260ms ease,filter 260ms ease}
.about .about-logo:hover img,.about .about-logo:focus-within img{transform:translateY(-6px) scale(1.05) rotate(-1.5deg);filter:drop-shadow(0 10px 30px rgba(0,0,0,0.6))}
@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-8px)}100%{transform:translateY(0)}}
@media (prefers-reduced-motion:reduce){.about .about-logo .float{animation:none}.about .about-logo img{transition:none}}
@media (max-width:700px){.about .about-logo img{width:130px}}

/* Approach lion icon: centered, subtle breathe animation */
.about .approach-lion{display:flex;justify-content:center;margin-top:12px}
.about .approach-lion img{width:88px;height:auto;display:block;transition:transform 220ms ease,filter 220ms ease;animation:lion-breathe 6s ease-in-out infinite}
.about .approach-lion:hover img,.about .approach-lion:focus-within img{transform:translateY(-3px) scale(1.04) rotate(-0.6deg);filter:drop-shadow(0 6px 18px rgba(0,0,0,0.5))}
@keyframes lion-breathe{0%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.01)}100%{transform:translateY(0) scale(1)}}
@media (prefers-reduced-motion:reduce){.about .approach-lion img{animation:none;transition:none}}
@media (max-width:700px){.about .approach-lion img{width:72px}}

/* Center the services section */
.services{ text-align:center }
.services .lead{ max-width:60ch; margin:0 auto 12px; color:var(--muted) }
.services .cards{ justify-items:center; justify-content:center }

/* Center the featured events section */
.featured{ text-align:center }
.feature-grid{ justify-items:center; justify-content:center }
.feature{ max-width:380px; text-align:center }
.feature img{ display:block; margin:0 auto 10px }

/* Center the call-to-action section */
.cta{ text-align:center }
.cta p{ max-width:60ch; margin:0 auto 12px }
.cta .btn{ margin-top:16px }
.site-footer{background:var(--surface);border-top:1px solid rgba(255,255,255,0.06);padding:18px 0;margin-top:32px}
.site-footer .container{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap}
.site-footer a{color:var(--brand);text-decoration:none}

/* Mobile adjustments */
@media (max-width:700px){
	/* Header: show hamburger, hide nav until opened */
	.nav-toggle{display:block}
	.site-header nav{display:none;width:100%;flex-direction:column;padding-top:12px}
	.site-header.nav-open nav{display:flex}
	.site-header nav a{padding:10px 0;border-top:1px solid rgba(0,0,0,0.03)}
	.logo img{height:95px}
	.logo .brand{font-size:16px}
	.hero h1{font-size:22px}

	/* Make grids single-column for narrow screens */
	.cards,.feature-grid{grid-template-columns:1fr}

	/* Larger touch targets */
	.btn{padding:14px 18px;font-size:16px;border-radius:10px}

	/* Footer stacks */
	.site-footer .container{flex-direction:column;align-items:center;text-align:center;gap:8px}
}