/* =========================================================
   KeKe's Art Space — app.css
   Booking page · Warm editorial gallery aesthetic
   ========================================================= */

/* ---------- Design tokens ---------- */
:root{
	--paper:       #f6f2ea;
	--paper-2:     #fffdf9;
	--ink:         #1c1a17;
	--ink-soft:    #6b635a;
	--line:        rgba(28,26,23,.13);
	--accent:      #12666e;
	--accent-soft: #e4eeef;
	--gold:        #b9873f;

	--radius-sm: 8px;
	--radius:    14px;
	--radius-lg: 20px;

	--shadow:      0 1px 2px rgba(28,26,23,.04), 0 18px 40px -28px rgba(28,26,23,.35);
	--shadow-soft: 0 18px 45px -30px rgba(28,26,23,.45);

	--transition: .35s cubic-bezier(.22,.61,.36,1);
	--container: 1140px;

	--font-display: "Fraunces", "Times New Roman", serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Reset & base ---------- */
*,
*::before,
*::after{
	margin:0;
	padding:0;
	box-sizing:border-box;
}

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

body{
	font-family:var(--font-body);
	font-size:16px;
	font-weight:400;
	line-height:1.75;
	background:var(--paper);
	color:var(--ink);
	overflow-x:hidden;
	-webkit-font-smoothing:antialiased;
	-moz-osx-font-smoothing:grayscale;
}

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

a{
	color:inherit;
	text-decoration:none;
}

button,
input,
select,
textarea{
	font:inherit;
	color:inherit;
}

button{
	border:none;
	cursor:pointer;
	background:none;
}

::selection{
	background:var(--accent);
	color:var(--paper);
}

/* ---------- Shared type ---------- */
h2{
	font-family:var(--font-display);
	font-weight:400;
	font-size:clamp(1.9rem, 4vw, 2.9rem);
	line-height:1.1;
	letter-spacing:-.015em;
	color:var(--ink);
}

.eyebrow{
	font-size:.7rem;
	font-weight:500;
	letter-spacing:.26em;
	text-transform:uppercase;
	color:var(--accent);
	margin-bottom:.6rem;
}

.section-head{
	text-align:center;
	max-width:640px;
	margin:0 auto 34px;
}

.section-head::after{
	content:"";
	display:block;
	width:40px;
	height:1px;
	margin:14px auto 0;
	background:var(--line);
}

.section-sub{
	margin-top:14px;
	font-size:1.02rem;
	color:var(--ink-soft);
}

/* ---------- Sections ---------- */
.section{
	max-width:var(--container);
	margin-inline:auto;
	padding:64px clamp(20px, 5vw, 40px);
}

.section[id]{
	scroll-margin-top:90px;
}

.js section{
	opacity:0;
	transform:translateY(22px);
	transition:opacity .75s ease, transform .75s cubic-bezier(.22,.61,.36,1);
}

.js section.show{
	opacity:1;
	transform:none;
}

/* ---------- Buttons ---------- */
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	padding:14px 30px;
	border-radius:999px;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	transition:transform var(--transition), background var(--transition), color var(--transition), box-shadow var(--transition);
}

.btn-light{
	background:var(--paper);
	color:var(--ink);
	box-shadow:0 10px 30px -14px rgba(0,0,0,.5);
}

.btn-light:hover{
	background:#fff;
	transform:translateY(-2px);
	box-shadow:0 18px 38px -16px rgba(0,0,0,.55);
}

.btn-primary{
	background:var(--accent);
	color:var(--paper);
	box-shadow:0 12px 30px -14px rgba(18,102,110,.6);
}

.btn-primary:hover{
	background:var(--ink);
	transform:translateY(-2px);
	box-shadow:0 18px 40px -16px rgba(18,102,110,.7);
}

.link-underline{
	position:relative;
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	padding-bottom:4px;
}

.link-underline::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:1px;
	background:currentColor;
	opacity:.45;
	transform-origin:left;
	transition:transform var(--transition), opacity var(--transition);
}

.link-underline:hover::after{
	opacity:1;
	transform:scaleX(1.04);
}

/* =========================================================
   Header
   ========================================================= */
header{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:1000;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:24px;
	padding:16px clamp(20px, 5vw, 56px);
	border-bottom:1px solid transparent;
	transition:background var(--transition), padding var(--transition), border-color var(--transition), box-shadow var(--transition);
}

header.scrolled{
	padding-top:9px;
	padding-bottom:9px;
	background:rgba(246,242,234,.88);
	-webkit-backdrop-filter:blur(16px) saturate(1.3);
	backdrop-filter:blur(16px) saturate(1.3);
	border-bottom-color:var(--line);
}

/* logo */
.logo{
	display:flex;
	align-items:center;
	flex-shrink:0;
}

.logo img{
	height:46px;
	width:auto;
	object-fit:contain;
	transition:height var(--transition);
}

header.scrolled .logo img{
	height:38px;
}

/* nav */
nav{
	display:flex;
	align-items:center;
	gap:28px;
}

nav a{
	position:relative;
	font-size:.82rem;
	font-weight:500;
	letter-spacing:.03em;
	color:#fff;
	transition:color var(--transition), opacity var(--transition);
}

header.scrolled nav a{
	color:var(--ink);
}

nav a::after{
	content:"";
	position:absolute;
	left:0;
	bottom:-6px;
	width:100%;
	height:1px;
	background:currentColor;
	transform:scaleX(0);
	transform-origin:left;
	transition:transform var(--transition);
}

nav a:hover::after{
	transform:scaleX(1);
}

nav a:hover{
	opacity:.85;
}

/* booking pill */
.nav-cta{
	padding:9px 20px;
	border:1px solid rgba(255,255,255,.45);
	border-radius:999px;
	transition:background var(--transition), color var(--transition), border-color var(--transition);
}

header.scrolled .nav-cta{
	border-color:var(--line);
}

.nav-cta::after{
	display:none;
}

header .nav-cta:hover{
	background:var(--ink);
	border-color:var(--ink);
	color:var(--paper);
	opacity:1;
}

/* active state for current page */
.nav-cta.active{
	background:var(--paper);
	border-color:var(--paper);
	color:var(--ink);
}

header.scrolled .nav-cta.active{
	background:var(--ink);
	border-color:var(--ink);
	color:var(--paper);
}

/* burger */
.nav-toggle{
	display:none;
	flex-direction:column;
	justify-content:center;
	gap:6px;
	width:42px;
	height:42px;
	background:transparent;
	border:none;
	cursor:pointer;
	padding:0;
}

.nav-toggle span{
	display:block;
	width:24px;
	height:1.5px;
	margin-inline:auto;
	background:#fff;
	transition:transform var(--transition), background var(--transition), opacity var(--transition);
}

header.scrolled .nav-toggle span,
header.menu-open .nav-toggle span{
	background:var(--ink);
}

header.menu-open .nav-toggle span:first-child{
	transform:translateY(3.75px) rotate(45deg);
}

header.menu-open .nav-toggle span:last-child{
	transform:translateY(-3.75px) rotate(-45deg);
}

/* =========================================================
   Hero
   ========================================================= */
.hero{
	position:relative;
	display:grid;
	place-items:center;
	text-align:center;
	padding:140px 24px 90px;
	background:
		linear-gradient(180deg, rgba(14,13,11,.62) 0%, rgba(14,13,11,.34) 42%, rgba(14,13,11,.68) 100%),
		url("images/keke27.jpeg") center/cover no-repeat;
	color:#fff;
}

.booking-hero{
	min-height:68vh;
	min-height:68svh;
}

.hero-inner{
	max-width:820px;
}

.hero .eyebrow{
	color:rgba(255,255,255,.78);
}

.hero h1{
	font-family:var(--font-display);
	font-weight:300;
	font-size:clamp(2.4rem, 6.5vw, 4.4rem);
	line-height:1.05;
	letter-spacing:-.025em;
	margin-bottom:.5rem;
}

.hero-sub{
	font-size:clamp(.85rem, 1.8vw, 1rem);
	font-weight:300;
	letter-spacing:.18em;
	text-transform:uppercase;
	opacity:.9;
}

.hero-actions{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:center;
	gap:26px;
	margin-top:36px;
}

/* =========================================================
   Programmes
   ========================================================= */
.programmes-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
	gap:20px;
}

.programme-card{
	position:relative;
	padding:30px 26px;
	background:var(--paper-2);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	cursor:pointer;
	overflow:hidden;
	transition:transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition);
}

.programme-card::before{
	content:"";
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:3px;
	background:var(--accent);
	transform:scaleX(0);
	transform-origin:left;
	transition:transform var(--transition);
}

.programme-card:hover{
	transform:translateY(-5px);
	box-shadow:var(--shadow-soft);
	border-color:var(--accent);
}

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

.programme-card.selected{
	background:var(--accent-soft);
	border-color:var(--accent);
	transform:translateY(-5px);
}

.programme-card.selected::before{
	transform:scaleX(1);
}

.programme-card.selected::after{
	content:"✓ Selected";
	position:absolute;
	top:16px;
	right:16px;
	padding:5px 12px;
	background:var(--accent);
	color:var(--paper);
	font-size:.68rem;
	font-weight:600;
	letter-spacing:.1em;
	text-transform:uppercase;
	border-radius:999px;
}

.programme-card h3{
	font-family:var(--font-display);
	font-weight:500;
	font-size:1.12rem;
	line-height:1.35;
	letter-spacing:-.005em;
	margin-bottom:6px;
}

.programme-meta{
	font-size:.82rem;
	color:var(--ink-soft);
	margin-bottom:16px;
}

.programme-card ul{
	list-style:none;
	display:grid;
	gap:8px;
}

.programme-card li{
	position:relative;
	padding-left:22px;
	font-size:.9rem;
	color:var(--ink-soft);
	line-height:1.55;
}

.programme-card li::before{
	content:"✓";
	position:absolute;
	left:0;
	top:0;
	color:var(--accent);
	font-weight:600;
	font-size:.85rem;
}

/* =========================================================
   Fees
   ========================================================= */
.fees-section{
	max-width:var(--container);
}

.pricing-grid{
	display:grid;
	grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
	gap:22px;
	max-width:860px;
	margin-inline:auto;
}

.price-card{
	padding:38px 34px;
	background:var(--paper-2);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	transition:transform var(--transition), box-shadow var(--transition);
}

.price-card:hover{
	transform:translateY(-4px);
	box-shadow:var(--shadow-soft);
}

.price-card h3{
	font-family:var(--font-display);
	font-weight:400;
	font-size:1.7rem;
	letter-spacing:-.015em;
	color:var(--accent);
	margin-bottom:6px;
}

.price-desc{
	font-size:.88rem;
	color:var(--ink-soft);
	margin-bottom:24px;
	padding-bottom:20px;
	border-bottom:1px solid var(--line);
}

.price-row{
	display:flex;
	justify-content:space-between;
	align-items:baseline;
	gap:16px;
	padding:12px 0;
	border-bottom:1px solid var(--line);
}

.price-row:last-child{
	border-bottom:none;
	padding-bottom:0;
}

.price-label{
	font-size:.78rem;
	font-weight:500;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-soft);
}

.price-value{
	font-family:var(--font-display);
	font-weight:400;
	font-size:1.35rem;
	letter-spacing:-.01em;
	color:var(--ink);
}

/* dark variant */
.price-card-dark{
	background:var(--ink);
	border-color:transparent;
	color:var(--paper);
}

.price-card-dark h3{
	color:var(--paper);
}

.price-card-dark .price-desc{
	color:rgba(246,242,234,.65);
	border-bottom-color:rgba(246,242,234,.16);
}

.price-card-dark .price-row{
	border-bottom-color:rgba(246,242,234,.16);
}

.price-card-dark .price-label{
	color:rgba(246,242,234,.65);
}

.price-card-dark .price-value{
	color:var(--paper);
}

/* =========================================================
   Booking form
   ========================================================= */
.booking-form{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:22px 26px;
	max-width:860px;
	margin-inline:auto;
	padding:clamp(28px, 4vw, 48px);
	background:var(--paper-2);
	border:1px solid var(--line);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow);
}

.form-group{
	display:flex;
	flex-direction:column;
}

.form-full{
	grid-column:1 / -1;
}

.form-group label{
	font-size:.72rem;
	font-weight:600;
	letter-spacing:.14em;
	text-transform:uppercase;
	color:var(--ink-soft);
	margin-bottom:9px;
}

.form-group input,
.form-group select,
.form-group textarea{
	width:100%;
	padding:14px 16px;
	background:var(--paper);
	border:1px solid var(--line);
	border-radius:var(--radius);
	color:var(--ink);
	transition:border-color var(--transition), box-shadow var(--transition), background var(--transition);
}

.form-group input::placeholder,
.form-group textarea::placeholder{
	color:rgba(28,26,23,.35);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
	outline:none;
	border-color:var(--accent);
	background:#fff;
	box-shadow:0 0 0 3px var(--accent-soft);
}

.form-group textarea{
	min-height:130px;
	resize:vertical;
}

.form-group select{
	cursor:pointer;
	appearance:none;
	-webkit-appearance:none;
	background-image:
		linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
		linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
	background-position:
		calc(100% - 20px) calc(50% + 1px),
		calc(100% - 15px) calc(50% + 1px);
	background-size:5px 5px, 5px 5px;
	background-repeat:no-repeat;
	padding-right:42px;
}

.btn-large{
	grid-column:1 / -1;
	width:100%;
	padding:17px 30px;
	font-size:.82rem;
	margin-top:6px;
}

/* =========================================================
   CTA
   ========================================================= */
.cta-section{
	max-width:100%;
	padding:80px clamp(20px, 5vw, 40px);
	background:var(--ink);
	color:var(--paper);
	text-align:center;
}

.cta-inner{
	max-width:640px;
	margin-inline:auto;
}

.cta-section .eyebrow{
	color:rgba(246,242,234,.6);
}

.cta-section h2{
	color:var(--paper);
	margin-bottom:14px;
}

.cta-section p{
	margin-bottom:30px;
	font-size:1.02rem;
	color:rgba(246,242,234,.72);
}

.cta-section .btn-light{
	background:var(--paper);
	color:var(--ink);
}

.cta-section .btn-light:hover{
	background:#fff;
}

/* =========================================================
   Footer
   ========================================================= */
footer{
	margin-top:0;
	padding:44px 24px;
	background:var(--ink);
	color:rgba(246,242,234,.72);
	text-align:center;
	border-top:1px solid rgba(246,242,234,.1);
}

footer p:first-child{
	font-family:var(--font-display);
	font-size:1.15rem;
	letter-spacing:-.005em;
	color:var(--paper);
	margin-bottom:6px;
}

footer p:last-child{
	font-size:.74rem;
	letter-spacing:.26em;
	text-transform:uppercase;
}

/* =========================================================
   Floating WhatsApp
   ========================================================= */
.floating-whatsapp{
	position:fixed;
	right:22px;
	bottom:22px;
	z-index:999;
	display:grid;
	place-items:center;
	width:56px;
	height:56px;
	border-radius:50%;
	background:#1faa59;
	color:#fff;
	box-shadow:0 14px 34px -12px rgba(31,170,89,.7);
	transition:transform var(--transition), box-shadow var(--transition);
}

.floating-whatsapp:hover{
	transform:translateY(-3px) scale(1.05);
	box-shadow:0 20px 40px -14px rgba(31,170,89,.8);
}

/* =========================================================
   Utilities
   ========================================================= */
.hidden{
	opacity:0;
	transform:translateY(22px);
	transition:opacity .75s ease, transform .75s ease;
}

.show{
	opacity:1;
	transform:none;
}

/* =========================================================
   Animations
   ========================================================= */
@keyframes fade{
	from{ opacity:0; transform:translateY(10px); }
	to{ opacity:1; transform:none; }
}

/* =========================================================
   Responsive
   ========================================================= */
@media (max-width: 980px){

	.nav-toggle{
		display:flex;
	}

	nav#siteNav{
		position:absolute;
		top:100%;
		left:0;
		right:0;
		flex-direction:column;
		align-items:stretch;
		gap:0;
		padding:10px clamp(20px, 5vw, 40px) 20px;
		background:rgba(246,242,234,.98);
		-webkit-backdrop-filter:blur(16px);
		backdrop-filter:blur(16px);
		border-bottom:1px solid var(--line);
		opacity:0;
		transform:translateY(-10px);
		pointer-events:none;
		transition:opacity var(--transition), transform var(--transition);
	}

	header.menu-open nav#siteNav{
		opacity:1;
		transform:none;
		pointer-events:auto;
	}

	header.menu-open{
		background:rgba(246,242,234,.98);
		border-bottom-color:var(--line);
	}

	nav#siteNav a{
		width:100%;
		padding:12px 0;
		border-bottom:1px solid var(--line);
		color:var(--ink);
	}

	nav#siteNav a::after{
		display:none;
	}

	nav#siteNav a:last-child{
		border-bottom:none;
	}

	.nav-cta{
		margin-top:12px;
		text-align:center;
		justify-content:center;
		display:flex;
		border-color:var(--line);
	}

	.nav-cta.active{
		background:var(--ink);
		border-color:var(--ink);
		color:var(--paper);
	}

	.hero{
		min-height:auto;
		padding:120px 22px 70px;
	}

	.booking-hero{
		min-height:auto;
	}

	.section{
		padding:52px clamp(20px, 5vw, 32px);
	}

	.section-head{
		margin-bottom:28px;
	}
}

@media (max-width: 768px){

	.booking-form{
		grid-template-columns:1fr;
		gap:18px;
		padding:26px;
	}

	.form-full,
	.btn-large{
		grid-column:1;
	}

	.price-card{
		padding:30px 26px;
	}

	.cta-section{
		padding:60px 22px;
	}
}

@media (max-width: 520px){

	.hero h1{
		font-size:2.2rem;
	}

	.hero-actions{
		gap:16px;
	}

	.hero-actions .btn{
		width:100%;
	}

	.btn{
		width:100%;
	}

	.programme-card{
		padding:24px 22px;
	}

	.floating-whatsapp{
		width:50px;
		height:50px;
		right:16px;
		bottom:16px;
	}

	footer{
		padding:36px 20px;
	}
}

/* =========================================================
   Reduced motion
   ========================================================= */
@media (prefers-reduced-motion: reduce){

	html{
		scroll-behavior:auto;
	}

	*,
	*::before,
	*::after{
		animation-duration:.001ms !important;
		animation-iteration-count:1 !important;
		transition-duration:.001ms !important;
	}

	.js section{
		opacity:1;
		transform:none;
	}
}