/* ============================================================
   The Organised Types — Header
   Depends on these variables. If your global stylesheet already
   defines a :root with these names, delete this block to avoid
   duplication — otherwise leave it in so header.css works alone.
   ============================================================ */
:root{
	--bg:#F8F7F4;
	--sage:#B7C6AE;
	--sage-deep:#8FA184;
	--green:#4D5B4B;
	--green-deep:#374235;
	--text:#2D302C;
	--line:rgba(45,48,44,0.08);
	--shadow-card: 0 10px 30px -10px rgba(45,48,44,0.12);
	--ease: cubic-bezier(.16,.84,.44,1);
}

/* ---------- header / nav ---------- */
.nav{
	position:fixed;
	top:0; left:0; right:0;
	z-index:100;
	padding:22px 0;
	transition:padding 0.4s var(--ease), background 0.4s var(--ease), box-shadow 0.4s var(--ease), border-color 0.4s var(--ease);
	border-bottom:1px solid transparent;
	font-family:'Poppins', sans-serif;
	background:#ece5de;
}
.nav.scrolled{
	padding:14px 0;
	background:rgba(236,229,222,0.9);
	backdrop-filter:blur(18px) saturate(160%);
	-webkit-backdrop-filter:blur(18px) saturate(160%);
	border-bottom:1px solid var(--line);
	box-shadow:0 8px 30px -20px rgba(45,48,44,0.25);
}
.nav-inner{
	max-width:1280px;
	margin:0 auto;
	padding:0 48px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:16px;
}

/* ---------- logo ---------- */
.logo{
	display:flex;
	align-items:center;
	gap:10px;
	font-family:'Poppins', sans-serif;
	font-weight:700;
	font-size:18px;
	letter-spacing:-0.01em;
	color:var(--text);
	text-decoration:none;
}
.logo img{height:56px; width:auto; display:block;}
.logo-fallback{display:none; align-items:center; gap:10px;}
.logo-mark{
	width:30px; height:30px;
	border-radius:9px;
	background:linear-gradient(135deg, var(--green) 0%, var(--sage-deep) 100%);
	position:relative;
	flex-shrink:0;
}
.logo-mark::after{
	content:'';
	position:absolute;
	inset:8px;
	border-radius:4px;
	background:var(--bg);
	opacity:0.9;
}

/* ---------- nav links ---------- */
.nav-links{
	display:flex;
	align-items:center;
	gap:30px;
	list-style:none;
	margin:0;
	padding:0;
}
.nav-links a{
	font-size:14.5px;
	font-weight:500;
	color:var(--text);
	text-decoration:none;
	position:relative;
	padding:4px 0;
}
.nav-links a::after{
	content:'';
	position:absolute;
	left:0; right:0; bottom:-2px;
	height:1px;
	background:var(--green);
	transform:scaleX(0);
	transform-origin:right;
	transition:transform 0.35s var(--ease);
}
.nav-links a:hover::after,
.nav-links a.active::after{
	transform:scaleX(1);
	transform-origin:left;
}
.nav-links a.active{color:var(--green-deep); font-weight:600;}

/* ---------- right side / CTA ---------- */
.nav-right{display:flex; align-items:center; gap:14px;}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	font-family:'Poppins', sans-serif;
	font-weight:600;
	font-size:14.5px;
	padding:13px 26px;
	border-radius:100px;
	cursor:pointer;
	border:1px solid transparent;
	text-decoration:none;
	transition:transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.35s var(--ease), border-color 0.35s var(--ease);
	white-space:nowrap;
}
.btn-primary{
	background:var(--green);
	color:#F8F7F4;
	box-shadow:0 10px 24px -10px rgba(77,91,75,0.55);
}
.btn-primary:hover{
	transform:translateY(-3px) scale(1.025);
	box-shadow:0 18px 36px -12px rgba(77,91,75,0.65), 0 0 0 6px rgba(183,198,174,0.22);
}
.btn-sm{padding:10px 20px; font-size:13.5px;}

/* ---------- mobile toggle ---------- */
.nav-toggle{
	display:none;
	width:38px; height:38px;
	border-radius:10px;
	border:1px solid var(--line);
	background:rgba(255,255,255,0.6);
	align-items:center;
	justify-content:center;
	cursor:pointer;
	flex-direction:column;
	gap:4px;
}
.nav-toggle span{
	width:16px; height:1.5px;
	background:var(--text);
	transition:transform 0.3s var(--ease), opacity 0.3s var(--ease);
}
.nav-toggle.open span:nth-child(1){transform:translateY(5.5px) rotate(45deg);}
.nav-toggle.open span:nth-child(2){opacity:0;}
.nav-toggle.open span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg);}

/* ---------- mobile nav panel ---------- */
@media (max-width:880px){
	.nav-links{
		position:absolute;
		top:100%; left:16px; right:16px;
		margin-top:10px;
		flex-direction:column;
		align-items:flex-start;
		gap:4px;
		background:rgba(248,247,244,0.96);
		backdrop-filter:blur(18px);
		border:1px solid var(--line);
		border-radius:16px;
		padding:14px;
		box-shadow:var(--shadow-card);
		max-height:0;
		overflow:hidden;
		opacity:0;
		transition:max-height 0.4s var(--ease), opacity 0.3s var(--ease), padding 0.4s var(--ease);
	}
	.nav-links.show-menu{ max-height:400px; opacity:1; padding:14px; }
	.nav-links a{ padding:10px 8px; width:100%; }
	.nav-toggle{ display:flex; }
}