:root{
	--green:#355b2a;
	--olive:#26351e;
	--terra:#c55d37;
	--cream:#fbf8f2;
	--border:#ece4d8;
	--text:#1f231d;
	--muted:#5e625a;
	--page:min(1504px,calc(100vw - 28px))
}
 *{
	box-sizing:border-box
}
html{
	scroll-behavior:smooth
}
body{
	margin:0;
	background:#fbfaf7;
	color:var(--text);
	font-family:Arial,Helvetica,sans-serif;
	line-height:1.55
}
a{
	text-decoration:none;
	color:inherit
}
img{
	max-width:100%;
	display:block
}
.page{
	width:var(--page);
	margin:0 auto
}
/*.topbar{
	height:86px;
	background:#fff;
	position:sticky;
	top:0;
	z-index:50;
	border-bottom:1px solid #f2eee8
}*/
.topbar {
	height:86px;
  position: fixed;
  background:#fff;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
	border-bottom:1px solid #f2eee8;
	will-change: transform;
}
body {
  padding-top: 86px; /* wysokość topbara */
}


.header-row{
	height:86px;
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:20px
}
.logo img{
	width:220px
}
.menu{
	display:flex;
	gap:29px;
	align-items:center;
	font-size:16px;
	font-weight:500
}
.menu>a,.drop>a{
	padding:27px 0 19px;
	border-bottom:2px solid transparent
}
.menu>a.active{
	color:#375c2d;
	border-color:#375c2d
}
.menu>a:hover,.drop>a:hover{
	color:#375c2d
}
.drop{
	position:relative
}
.drop>a{
	display:flex;
	gap:6px
}
.dropmenu{
	display:none;
	position:absolute;
	top:65px;
	left:-16px;
	background:white;
	border:1px solid var(--border);
	border-radius:12px;
	padding:8px;
	width:245px;
	box-shadow:0 14px 35px rgba(0,0,0,.08)
}
.drop:hover .dropmenu{
	display:block
}
.dropmenu a{
	display:block;
	padding:9px 10px;
	border-radius:8px;
	font-size:14px
}
.dropmenu a:hover{
	background:#f1f6ed
}
.hamb{
	display:none;
	background:none;
	border:0
}
.hamb span{
	display:block;
	width:27px;
	height:3px;
	background:#26351e;
	margin:5px 0
}
 .hero{
	position:relative;
	height:398px;
	overflow:hidden
}
.hero-bg{
	position:absolute;
	inset:0;
	background:url('/assets/hero-panorama.jpg') center/cover no-repeat
}
.hero-bg:after{
	content:"";
	position:absolute;
	inset:0;
	background:linear-gradient(90deg,rgba(255,255,255,.00),rgba(255,255,255,.40) 35%,rgba(255,255,255,.40) 35%,rgba(255,255,255,.00))
}
.hero-grid{
	position:relative;
	height:100%;
	display:grid;
	grid-template-columns:240px 1fr 240px;
	align-items:center;
	gap:18px
}
.hero-copy{
	text-align:center;
	align-self:start;
	padding-top:22px
}
.hero-copy h1{
	margin:0 0 8px;
	font-size:58px;
	line-height:1.05;
	color:#25331f;
	font-weight:800;
	letter-spacing:-1.5px
}
.hero-copy h2{
	margin:0 0 18px;
	font-size:25px;
	line-height:1.25;
	font-weight:500;
	color:#343a31
}
.hero-copy p{
	margin:0 auto 21px;
	font-size:16px;
	line-height:1.55;
	max-width:590px
}
.hero-buttons{
	display:flex;
	justify-content:center;
	gap:13px
}
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	border-radius:10px;
	padding:13px 22px;
	font-size:16px;
	font-weight:700;
	transition:.15s
}
.btn.primary{
	background:#397a38;
	color:white;
	border:1px solid #397a38
}
.btn.white{
	background:rgba(255,255,255,.9);
	border:1px solid #777;
	color:#222
}
.btn.small{
	padding:10px 18px;
	font-size:15px
}
.hero-list{
	background:rgba(255,250,244,.85);
	backdrop-filter:blur(5px);
	border:1px solid rgba(232,222,210,.95);
	border-radius:17px;
	padding:17px 16px;
	box-shadow:0 12px 28px rgba(0,0,0,.12)
}
.hero-left{
	justify-self:start
}
.hero-right{
	justify-self:end
}
.hero-list h3{
	margin:0 0 10px;
	font-size:19px;
	color:#2f6530
}
.hero-left h3{
	color:#c45d39
}
.hero-list ul{
	list-style:none;
	margin:0;
	padding:0;
	display:grid;
	gap:8px
}
.hero-list li{
	display:flex;
	align-items:center;
	gap:9px;
	font-size:14px
}
.hero-list b{
	display:inline-grid;
	place-items:center;
	width:17px;
	height:17px;
	border-radius:50%;
	font-size:12px;
	color:#fff;
	background:#3ba33c
}
.hero-left b{
	background:#df7050
}
 .pillars{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:11px;
	margin-top:14px
}
.pillar{
	min-height:181px;
	border-radius:12px;
	padding:20px 20px;
	display:grid;
	grid-template-columns:88px 1fr;
	gap:12px;
	border:1px solid #eee6db
}
.pillar img{
	width:76px;
	margin-top:1px
}
.pillar h3{
	font-size:16px;
	line-height:1.22;
	margin:3px 0 2px;
	color:#39622f
}
.pillar.warm h3{
	color:#c25830
}
.pillar.sand h3{
	color:#bd7f18
}
.pillar h4{
	font-size:14px;
	margin:0 0 12px
}
.pillar p{
	font-size:13px;
	line-height:1.45;
	margin:0 0 11px
}
.pillar a{
	font-size:13px;
	color:#355b2a
}
.warm{
	background:#faf1e9
}
.green{
	background:#f1f4ec
}
.sand{
	background:#fbf4e8
}
.sage{
	background:#f0f4eb
}
 .projects{
	display:grid;
	grid-template-columns:1.55fr .58fr 1.55fr;
	gap:28px;
	margin-top:12px
}
.bookbox,.gesturebox,.statement{
	min-height:244px;
	border:1px solid #e9dfd2;
	border-radius:12px;
	background:#f7f4ef
}
.bookbox{
	display:grid;
	grid-template-columns:148px 1fr;
	gap:20px;
	padding:17px 20px
}
.book3d{
	display:flex;
	align-items:center;
	justify-content:center
}
.book3d img{
	width:112px;
	filter:drop-shadow(0 13px 13px rgba(0,0,0,.14))
}
.tag{
	display:block;
	color:#335e2f;
	font-size:12px;
	font-weight:700;
	margin:3px 0
}
.bookbox h2,.gesturebox h2{
	font-size:26px;
	margin:2px 0;
	color:#294528
}
.bookbox h3,.gesturebox h3{
	font-size:14px;
	margin:0 0 12px;
	font-weight:600
}
.bookbox p,.gesturebox p{
	font-size:13px;
	line-height:1.48;
	margin:0 0 14px
}
.statement{
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	text-align:center;
	padding:15px;
	background:#fbf8f1;
	border-color:#e7d8bc
}
.statement p{
	font-size:14px;
	margin:4px 0;
	color:#2d432b
}
.statement .leaf{
	color:#6c8e4b;
	font-size:30px;
	height:26px
}
.statement .heart{
	color:#d36643;
	font-size:26px;
	height:28px
}
.statement strong{
	font-size:14px
}
.gesturebox{
	display:grid;
	grid-template-columns:1.08fr 1fr;
	align-items:center;
	padding:18px 22px
}
.gesturebox>img{
	width:270px;
	justify-self:center
}
 .evidence{
	margin-top:12px;
	border:1px solid #ece4da;
	border-radius:12px;
	background:white;
	min-height:62px;
	display:grid;
	grid-template-columns:270px 1fr;
	align-items:center;
	padding:10px 20px
}
.evidence>strong{
	font-size:15px
}
.evidence-items{
	display:grid;
	grid-template-columns:repeat(6,1fr);
	align-items:center;
	gap:14px
}
.evidence-items span{
	display:flex;
	gap:8px;
	align-items:center
}
.evidence-items b{
	font-family:Georgia,serif;
	font-size:17px;
	font-weight:500;
	line-height:1.05
}
.evidence-items .pnas{
	font-size:26px;
	color:#1f5187
}
.evidence-items .nature{
	font-size:22px;
	color:#222
}
.evidence-items small{
	font-size:10px;
	color:#676b64;
	line-height:1.15
}
 .more{
	padding-top:6px
}
.sectiontitle{
	max-width:900px
}
.sectiontitle span{
	font-size:12px;
	letter-spacing:.16em;
	color:#44663a;
	font-weight:700
}
.sectiontitle h2{
	font-size:38px;
	line-height:1.18;
	margin:8px 0 26px;
	color:#283721
}
.copy2{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:28px
}
.copy2 p{
	font-size:17px;
	margin:0 0 15px
}
.copy2 blockquote{
	margin:0;
	background:#eef4e9;
	border-left:4px solid #4d7a3d;
	padding:24px;
	border-radius:0 12px 12px 0;
	font-size:23px;
	font-weight:700;
	line-height:1.4
}
.details article{
	display:grid;
	grid-template-columns:86px 1fr;
	gap:22px;
	background:#fff;
	border:1px solid #e9e0d4;
	border-radius:14px;
	padding:24px;
	margin-bottom:15px
}
.details article img{
	width:72px
}
.details h2{
	font-size:28px;
	margin:0 0 8px;
	color:#2b4026
}
.details p{
	font-size:16px;
	margin:0 0 12px
}
.details strong{
	display:block;
	background:#f2f6ee;
	padding:14px 16px;
	border-radius:10px;
	font-size:18px;
	line-height:1.4
}
.sourcegrid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:14px
}
.sourcegrid a{
	display:flex;
	flex-direction:column;
	min-height:150px;
	padding:18px;
	background:white;
	border:1px solid #e9e0d4;
	border-radius:12px
}
.sourcegrid b{
	font-size:17px;
	color:#2f4b29
}
.sourcegrid span{
	font-size:14px;
	margin:8px 0;
	flex:1;
	color:#484d45
}
.sourcegrid em{
	font-size:13px;
	font-style:normal;
	color:#4a7240
}
.contact{
	margin-top:70px;
	background:#294b29;
	color:#fff;
	padding:32px 0
}
.contact .page{
	display:flex;
	justify-content:space-between;
	align-items:center;
	gap:25px
}
.contact span{
	font-size:12px;
	letter-spacing:.14em
}
.contact h2{
	font-size:30px;
	margin:4px 0
}
.contact .btn{
	background:#fff;
	color:#31522c;
	border-color:#fff
}
footer{
	background:#f7f2e9;
	border-top:1px solid #e8dfd2
}
.footer{
	min-height:86px;
	display:flex;
	align-items:center;
	justify-content:space-between
}
.footer img{
	width:190px
}
.footer p{
	color:#5d6259;
	font-size:13px
}
 @media(max-width:1180px){
	.menu{
		gap:16px;
		font-size:14px
	}
	.hero-grid{
		grid-template-columns:210px 1fr 210px
	}
	.hero-copy h1{
		font-size:48px
	}
	.pillars{
		grid-template-columns:repeat(2,1fr)
	}
	.projects{
		grid-template-columns:1fr 1fr
	}
	.statement{
		grid-column:1/-1;
		order:3
	}
	.evidence{
		grid-template-columns:1fr
	}
	.evidence-items{
		grid-template-columns:repeat(3,1fr);
		margin-top:8px
	}
	.sourcegrid{
		grid-template-columns:repeat(2,1fr)
	}
}
 @media(max-width:920px){
	.hamb{
		display:block
	}
	.menu{
		display:none;
		position:absolute;
		top:80px;
		right:14px;
		background:white;
		flex-direction:column;
		align-items:flex-start;
		width:min(360px,calc(100vw - 28px));
		padding:12px;
		border:1px solid #e9e1d5;
		border-radius:12px;
		box-shadow:0 16px 30px rgba(0,0,0,.12)
	}
	.menu.open{
		display:flex
	}
	.menu>a,.drop>a{
		padding:8px;
		border:0
	}
	.dropmenu{
		display:block;
		position:static;
		border:0;
		box-shadow:none;
		width:auto;
		padding:0 0 0 15px
	}
	.hero{
		height:auto;
		min-height:650px
	}
	.hero-bg{
		background-position:43% center
	}
	.hero-grid{
		grid-template-columns:1fr;
		gap:14px;
		padding:18px 0 24px
	}
	.hero-copy{
		order:-1;
		padding-top:6px
	}
	.hero-list{
		width:min(360px,90vw)
	}
	.hero-left{
		justify-self:start
	}
	.hero-right{
		justify-self:end
	}
	.projects{
		grid-template-columns:1fr
	}
	.statement{
		grid-column:auto;
		order:0
	}
	.copy2{
		grid-template-columns:1fr
	}
	.sourcegrid{
		grid-template-columns:1fr 1fr
	}
	.contact .page{
		flex-direction:column;
		align-items:flex-start
	}
	.footer{
		flex-direction:column;
		padding:18px 0;
		align-items:flex-start
	}
	.pillar{
		min-height:auto
	}
}
 @media(max-width:620px){
	:root{
		--page:calc(100vw - 20px)
	}
	.header-row{
		height:74px
	}
	.topbar{
		height:74px
	}
	.logo img{
		width:185px
	}
	.hero-copy h1{
		font-size:37px
	}
	.hero-copy h2{
		font-size:21px
	}
	.hero-copy p{
		font-size:14px
	}
	.hero-buttons{
		flex-direction:column;
		align-items:center
	}
	.hero-list{
		justify-self:center
	}
	.pillars{
		grid-template-columns:1fr
	}
	.pillar{
		grid-template-columns:72px 1fr
	}
	.pillar img{
		width:62px
	}
	.projects{
		gap:12px
	}
	.bookbox,.gesturebox{
		grid-template-columns:1fr
	}
	.book3d{
		justify-content:flex-start
	}
	.gesturebox>img{
		width:210px;
		justify-self:start
	}
	.evidence-items{
		grid-template-columns:1fr 1fr
	}
	.sourcegrid{
		grid-template-columns:1fr
	}
	.sectiontitle h2{
		font-size:31px
	}
	.details article{
		grid-template-columns:1fr
	}
	.details strong{
		font-size:17px
	}
	.contact h2{
		font-size:26px
	}
}

/* Rozwijane opisy czterech głównych kierunków zmiany */
.details .detail-expand{
	grid-column:1/-1;
	margin-top:2px;
	padding-top:2px
}
.details .detail-expand summary{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:7px;
	width:100%;
	list-style:none;
	cursor:pointer;
	color:#355b2a;
	font-size:14px;
	font-weight:700;
	text-align:right;
	user-select:none;
	transition:color .15s
}
.details .detail-expand summary::-webkit-details-marker{
	display:none
}
.details .detail-expand summary::after{
	content:"↓";
	font-size:15px;
	line-height:1;
	transition:transform .2s ease
}
.details .detail-expand summary:hover{
	color:#24461f
}
.details .detail-expand[open] summary::after{
	transform:rotate(180deg)
}
.details .detail-expand .detail-less{
	display:none
}
.details .detail-expand[open] .detail-more{
	display:none
}
.details .detail-expand[open] .detail-less{
	display:inline
}
.details .detail-expand-content{
	margin-top:16px;
	padding:20px 22px;
	background:#fafbf8;
	border-top:1px solid #e3eadf;
	border-radius:10px
}
.details .detail-expand-content p{
	margin:0 0 13px;
	font-size:16px;
	line-height:1.65;
	color:#3f473d
}
.details .detail-expand-content p:last-child{
	margin-bottom:0
}