/* =====================================================================
   Krystyna Ćmiel — Regresní terapie · v2
   warm earthy palette · Fraunces + DM Sans · abstract botanical motifs
   ===================================================================== */

:root {
	/* palette — no blue */
	--ink: #1d2620;
	--ink-soft: #4a554b;
	--paper: #ede8d6;
	--paper-2: #e2dcc478;
	--paper-deep: #d6cfb3;
	--cream: #faf6e8;
	--moss: #3a5a3c;
	/*--moss-deep: #1f3221;*/
	--moss-deep: #2a482d;
	--clay: #b85f3c;
	--gold: #c89859;
	--leaf: #87a26a;

	/* type */
	--ff-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--ff-body: "DM Sans", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	--ff-script: "Caveat", cursive;

	/* tokens */
	--radius-sm: 6px;
	--radius: 14px;
	--radius-lg: 22px;
	--shadow-sm: 0 2px 8px rgba(31, 50, 33, .06);
	--shadow: 0 24px 60px -28px rgba(31, 50, 33, .28);
	--shadow-lg: 0 60px 120px -50px rgba(31, 50, 33, .45);

	--ease: cubic-bezier(.22, .61, .36, 1);
	--ease-out: cubic-bezier(.16, 1, .3, 1);

	--header-h: 76px;
	--container: 1280px;
}

/* ------------------------------ reset ------------------------------ */
*,
*::before,
*::after {
	box-sizing: border-box
}

html {
	scroll-behavior: smooth;
	-webkit-text-size-adjust: 100%;
	font-size: 18px;

}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--ff-body);
	line-height: 1.5;
	font-weight: 300;
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
	overflow-x: hidden
}

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

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

button {
	font: inherit;
	cursor: pointer;
	border: 0;
	background: transparent;
	color: inherit
}

ul,
ol {
	list-style: none;
	padding: 0;
	margin: 0
}

::selection {
	background: var(--moss);
	color: var(--cream)
}

@media (prefers-reduced-motion:reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important
	}
}

/* ------------------------------ typography ------------------------------ */
.display,
h1,
h2,
h3 {
	font-family: var(--ff-display);
	font-weight: 340;
	letter-spacing: -.015em;
	line-height: 1.04;
	color: var(--ink);
	margin: 0;
	font-variation-settings: "opsz" 144, "SOFT" 50
}

h1 {
	font-size: clamp(3.4rem, 9vw, 6rem);
	font-weight: 300
}

h2.display {
	font-size: clamp(2.4rem, 5.6vw, 6rem);
	margin-bottom: 2rem;
}

h3 {
	font-size: clamp(1.15rem, 1.7vw, 1.4rem);
	line-height: 1.25;
	font-weight: 500;
	font-variation-settings: "opsz" 36
}

em {
	font-style: italic;
	font-variation-settings: "opsz" 144, "SOFT" 100;
	color: var(--moss)
}

strong {
	font-weight: 600
}

p {
	margin: 0 0 1em;
	color: var(--ink-soft)
}

.lead {
	font-size: clamp(1.1rem, 1.4vw, 1.25rem);
	color: var(--ink-soft);
	max-width: 60ch
}

.kicker {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	font-size: .8rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--moss);
	margin-bottom: 24px
}

.kicker__line {
	display: inline-block;
	width: 36px;
	height: 1px;
	background: currentColor
}

.section-num {
	display: inline-block;
	font-family: var(--ff-body);
	font-size: .8rem;
	letter-spacing: .28em;
	text-transform: uppercase;
	color: var(--moss);
	margin: 24px 0;
	font-weight: 500;
}

.section-num--light {
	color: var(--gold);
}

/* ------------------------------ layout ------------------------------ */
.container {
	width: 100%;
	max-width: var(--container);
	margin: 0 auto;
	padding: 0 32px;
}

.container--lead {
	max-width: 980px
}

.container--split {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: clamp(40px, 7vw, 100px);
	align-items: start;
}

@media (max-width:980px) {
	.container--split {
		grid-template-columns: 1fr
	}
}

.section {
	padding: clamp(80px, 11vw, 160px) 0;
	position: relative
}



/* ------------------------------ loader ------------------------------ */
.loader {
	position: fixed;
	inset: 0;
	background: var(--paper);
	z-index: 1000;
	display: grid;
	place-items: center;
	color: var(--moss);
	transition: opacity .6s var(--ease), visibility .6s
}

.loader__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 18px
}

.loader__spiral {
	width: 62px;
	height: 62px;
	animation: spin 5s linear infinite
}

.loader__label {
	font-family: var(--ff-display);
	font-style: italic;
	color: var(--ink);
	opacity: .7;
	font-variation-settings: "opsz" 144
}

.is-loaded .loader {
	opacity: 0;
	visibility: hidden
}

@keyframes spin {
	to {
		transform: rotate(360deg)
	}
}

/* ------------------------------ buttons ------------------------------ */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .7em;
	font-weight: 500;
	font-size: 1rem;
	transition: transform .4s var(--ease-out), background .3s, color .3s, box-shadow .4s;
	will-change: transform
}

.btn svg {
	width: 14px;
	height: 14px
}

.btn--solid {
	background: var(--ink);
	color: var(--cream);
	padding: 1em 1.7em;
	border-radius: 999px
}

.btn--solid:hover {
	background: var(--moss);
	transform: translateY(-2px);
	box-shadow: var(--shadow-sm)
}

.btn--text {
	position: relative;
	color: var(--ink);
	padding: 1em 0
}

.btn--text::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: .5em;
	height: 1px;
	background: currentColor;
	transform-origin: right;
	transform: scaleX(1);
	transition: transform .5s var(--ease-out)
}

.btn--text:hover::after {
	transform-origin: left;
	transform: scaleX(0)
}

/* ------------------------------ header ------------------------------ */
.site-header {
	position: fixed;
	width: 100%;
	left: 0;
	top: 0;
	z-index: 50;
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	align-items: center;
	gap: 0;
	padding: 14px 32px;
	background: rgba(237, 232, 214, .2);
	backdrop-filter: blur(3px);
	-webkit-backdrop-filter: blur(14px);
	transition: padding .35s var(--ease), background .35s var(--ease), box-shadow .35s var(--ease)
}

.site-header.is-scrolled {
	box-shadow: 0 0 10px rgba(31, 50, 33, .1);
	padding-top: 10px;
	padding-bottom: 10px;
	background: rgba(237, 232, 214, .8);
	backdrop-filter: blur(14px);

}

.logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--moss)
}

.logo__mark {
	width: 34px;
	height: 34px;
	flex: none
}

.logo__text {
	display: flex;
	flex-direction: column;
	line-height: 1.05;
	color: var(--ink)
}

.logo__text strong {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 1.15rem;
	letter-spacing: .005em;
	font-variation-settings: "opsz" 36
}

.logo__text em {
	font-style: normal;
	font-size: .75rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--ink-soft);
	margin-top: 3px
}

.nav ul {
	display: flex;
	gap: 4px;
	justify-content: center
}

.nav__link {
	position: relative;
	display: inline-flex;
	align-items: baseline;
	gap: 6px;
	padding: 10px 14px;
	border-radius: 999px;
	font-size: 1rem;
	color: var(--ink);
	transition: color .3s
}

.nav__num {
	font-size: .62rem;
	letter-spacing: .1em;
	color: var(--gold);
	font-variant-numeric: tabular-nums;
	display: none;
}

.nav__link::after {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .45s var(--ease-out)
}

.nav__link:hover {
	color: var(--moss)
}

.nav__link:hover::after,
.nav__link.is-active::after {
	transform: scaleX(1)
}

.nav__link.is-active {
	color: var(--moss)
}

.header-cta {
	display: inline-flex;
	align-items: center;
	gap: .55em;
	padding: .5em 1.1em;
	border-radius: 999px;
	background: var(--ink);
	color: var(--cream);
	font-weight: 400;
	font-size: 1rem;
	transition: transform .35s var(--ease-out), background .3s
}

.header-cta svg {
	width: 14px;
	height: 14px
}

.header-cta:hover {
	background: var(--moss);
	transform: translateY(-2px)
}

.nav-toggle {
	display: none;
	width: 42px;
	height: 42px;
	border-radius: 999px;
	border: 1px solid color-mix(in srgb, var(--ink) 18%, transparent);
	position: relative;
	justify-self: end
}

.nav-toggle span {
	position: absolute;
	left: 11px;
	right: 11px;
	height: 1.5px;
	background: var(--ink);
	transition: transform .35s var(--ease), opacity .25s, top .35s var(--ease)
}

.nav-toggle span:nth-child(1) {
	top: 14px
}

.nav-toggle span:nth-child(2) {
	top: 20px
}

.nav-toggle span:nth-child(3) {
	top: 26px
}

.nav-toggle[aria-expanded=true] span:nth-child(1) {
	top: 20px;
	transform: rotate(45deg)
}

.nav-toggle[aria-expanded=true] span:nth-child(2) {
	opacity: 0
}

.nav-toggle[aria-expanded=true] span:nth-child(3) {
	top: 20px;
	transform: rotate(-45deg)
}

@media (max-width:1080px) {
	.site-header {
		grid-template-columns: auto 1fr auto
	}

	.header-cta {
		display: none
	}

	.nav-toggle {
		display: block
	}

	.nav {
		position: fixed;
		inset: 0 0 0 auto;
		width: min(380px, 100%);
		height: 100vh;
		background: var(--cream);
		padding: calc(var(--header-h) + 30px) 32px 32px;
		transform: translateX(100%);
		transition: transform .55s var(--ease);
		box-shadow: var(--shadow-lg)
	}

	.nav ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px
	}

	.nav__link {
		font-family: var(--ff-display);
		font-size: 1.6rem;
		padding: 8px 0
	}

	.nav__num {
		font-size: .66rem
	}

	.nav__link::after {
		left: 0;
		right: 0;
		bottom: 0
	}

	body.is-menu-open .nav {
		transform: translateX(0)
	}

	body.is-menu-open {
		overflow: hidden
	}
}

/* ------------------------------ hero ------------------------------ */
.hero {
	position: relative;
	padding: 160px 32px 160px;
	overflow: hidden;
	isolation: isolate;
	background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 60%, var(--paper) 100%)
}
@media (max-width:768px) {
	.hero {
		padding-bottom: 60px;
	}
}

.hero__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: center;
	max-width: var(--container);
	margin: 0 auto
}

@media (max-width:980px) {
	.hero__inner {
		grid-template-columns: 1fr;
		gap: 48px
	}
}

.hero__rings {
	position: absolute;
	left: 0%;
	top: -25%;
	width: min(1400px, 80vw);
	color: var(--moss);
	opacity: .15;
	z-index: -1;
	animation: slowSpin 60s linear infinite
}
@media (max-width:768px) {
	.hero__rings {
		position: absolute;
		left: -20%;
		top: 5%;
		width: 150vw;
	}

}

@keyframes slowSpin {
	to {
		transform: rotate(360deg)
	}
}

.hero__blob {
	position: absolute;
	right: -10%;
	bottom: -25%;
	width: min(900px, 80vw);
	z-index: -1;
	opacity: .5;
}

.hero__contour {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -8%;
	width: 100%;
	height: auto;
	color: var(--moss);
	z-index: -1;
	opacity: .4
}

.hero__copy {
	position: relative;
	z-index: 1
}

.hero__title {
	margin: 0 0 28px;
	font-family: var(--ff-display);
	font-weight: 280;
	font-variation-settings: "opsz" 144, "SOFT" 100;
	line-height: .95;
	letter-spacing: -.025em
}

.hero__title em {
	display: inline-block;
	font-variation-settings: "opsz" 144, "SOFT" 100
}

.reveal-line {
	display: block;
	overflow: hidden
}

.reveal-line>span {
	display: block;
	transform: translateY(110%);
	transition: transform 1.2s var(--ease-out)
}

.is-loaded .reveal-line>span {
	transform: translateY(0)
}

.reveal-line:nth-child(2)>span {
	transition-delay: .18s
}

.hero__lead {
	
	font-size: clamp(1.05rem, 1.3vw, 1.2rem);
    color: var(--ink-soft);
    max-width: 46ch;
    margin: 42px 0 56px 0;
    font-family: var(--ff-display);
    letter-spacing: -.04em;
    line-height: 1.1;	
}
.hero__lead p{
	display: flex;
}
.hero__lead p::before {
	content: "— ";
	display: block;
	min-width: 1.4em;
}

.hero__cta {
	display: flex;
	gap: 14px;
	flex-wrap: wrap;
	align-items: center;
	margin-bottom: 48px
}

.hero__quote {
	display: flex;
	gap: 16px;
	padding: 18px 22px;
	background: rgba(255, 255, 255, .4);
	border-left: 2px solid var(--gold);
	border-radius: 0 var(--radius) var(--radius) 0;
	backdrop-filter: blur(4px);
	max-width: 46ch;

	display: none;
}

.hero__quote svg {
	width: 22px;
	height: 22px;
	color: var(--gold);
	flex: none;
	margin-top: 2px
}

.hero__quote p {
	margin: 0;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--ink);
	font-variation-settings: "opsz" 36
}

/* hero media — photo collage */
.hero__media {
	position: relative;
	aspect-ratio: 1/1.05;
	max-width: 540px;
	justify-self: center;
	width: 100%
}

.photo {
	position: absolute;
	margin: 0;
	transition: transform .8s var(--ease-out)
}

.photo--back {
	top: 0;
	left: 0;
	width: 62%;
	height: 78%;
	transform: rotate(-3deg);
	z-index: 1
}

.photo--front {
	bottom: 0;
	right: 0;
	width: 60%;
	height: 72%;
	transform: rotate(2.5deg);
	z-index: 2
}

.photo--footer {
	transform: rotate(2.5deg);
	z-index: 2
}

.hero__media:hover .photo--back {
	transform: rotate(-4.5deg) translate(-6px, -4px)
}

.hero__media:hover .photo--front {
	transform: rotate(4deg) translate(6px, 6px)
}

.photo__frame {
	position: relative;
	width: 100%;
	height: 100%;
	border-radius: 8px;
	overflow: hidden;
	/*background: var(--moss-deep);*/
	box-shadow: var(--shadow);
	border: 6px solid var(--cream)
}

.photo__frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block
}

.photo__fallback {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	display: none
}

.photo__frame--fallback img {
	display: none
}

.photo__frame--fallback .photo__fallback {
	display: block
}

.photo--front figcaption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -60px;
	text-align: center;
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1rem;
	color: var(--ink-soft);
	font-variation-settings: "opsz" 14
}

@media (max-width:980px) {
	.hero__media {
		max-width: 420px;
		margin: 0 auto
	}

	.photo--front figcaption {
		bottom: -50px
	}
}

/* scroll mark */
.scroll-mark {
	position: absolute;
	left: 32px;
	bottom: 24px;
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--ink-soft);
	font-size: .8rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	font-weight: 500;
	z-index: 2
}

.scroll-mark__line {
	display: inline-block;
	width: 42px;
	height: 1px;
	background: currentColor;
	position: relative;
	overflow: hidden
}

.scroll-mark__line::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--ink);
	transform: translateX(-100%);
	animation: slide 2.4s var(--ease) infinite
}

@keyframes slide {
	0% {
		transform: translateX(-100%)
	}

	50% {
		transform: translateX(0)
	}

	100% {
		transform: translateX(100%)
	}
}

@media (max-width:980px) {
	.scroll-mark {
		display: none
	}
}

/* ------------------------------ manifest / ticker ------------------------------ */
.manifest {
	padding: 32px 0;
	background: var(--moss-deep);
	color: var(--cream);
	overflow: hidden;

	display: none;
}

.ticker {
	display: flex;
	overflow: hidden;
	mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
	-webkit-mask: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%)
}

.ticker__track {
	display: flex;
	gap: 48px;
	align-items: center;
	flex: none;
	animation: ticker 38s linear infinite;
	will-change: transform;
	padding-right: 48px
}

.ticker__track span {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: clamp(1.4rem, 2.6vw, 2.2rem);
	white-space: nowrap;
	font-variation-settings: "opsz" 144
}

.ticker__track span:nth-child(even) {
	color: var(--gold);
	font-style: normal;
	font-size: 1.4rem
}

@keyframes ticker {
	from {
		transform: translateX(0)
	}

	to {
		transform: translateX(-50%)
	}
}

.manifest:hover .ticker__track {
	animation-play-state: paused
}

/* ------------------------------ intro ------------------------------ */
.intro {
	padding: clamp(80px, 10vw, 140px) 0;
	/* background: #ffffff3b; */
    box-shadow: 0 0px 80px -40px #0000008f;
}

.intro h2 {
	font-size: clamp(2rem, 4.4vw, 5rem);
	margin-bottom: 48px;
	max-width: 22ch
}
.intro h3 {
	font-size: clamp(1.5rem, 4vw, 2.2rem);
	margin: 48px 0 28px auto;
	max-width: 980px;
	letter-spacing: 0;
}

.intro__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 58px;
	max-width: 980px;
	margin: 0 0 0 auto
}

@media (max-width:780px) {
	.intro__body {
		grid-template-columns: 1fr;
		gap: 24px
	}
}


/* 
.intro__body p {
	font-size: 1.05rem;
	line-height: 1.7
} 
*/

/* ------------------------------ reveal ------------------------------ */
.reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .9s var(--ease-out), transform .9s var(--ease-out)
}

.reveal.is-in {
	opacity: 1;
	transform: none
}

.reveal:nth-child(2) {
	transition-delay: .06s
}

.reveal:nth-child(3) {
	transition-delay: .12s
}

.reveal:nth-child(4) {
	transition-delay: .18s
}

.reveal:nth-child(5) {
	transition-delay: .24s
}

.reveal:nth-child(6) {
	transition-delay: .3s
}

/* ------------------------------ terapie ------------------------------ */
.terapie {
	background: var(--paper-2)
}

.terapie__head {
	/*
	display: grid;
	grid-template-columns: 1fr auto;
	align-items: start;
	gap: 32px;
	*/
	margin-bottom: 48px;
}

.terapie__head h2 {
	max-width: 18ch
}

.orbit {
	width: 140px;
	height: 140px;
	color: var(--moss);
	opacity: .6;
	animation: slowSpin 30s linear infinite
}

@media (max-width:680px) {
	.terapie__head {
		grid-template-columns: 1fr
	}

	.orbit {
		width: 90px;
		height: 90px
	}
}

.pull-quote {
	/* padding: 32px 36px;
	border-left: 3px solid var(--clay);
	background: var(--cream);
	border-radius: 0 var(--radius) var(--radius) 0;
	max-width: 980px;
	box-shadow: var(--shadow-sm) */
	display: grid;
	grid-template-columns: 1fr 1fr;
    gap: 58px;
    max-width: 980px;
    margin: 0 0 66px auto;
}

.pull-quote p {
	margin: 0 0 2rem 0;
	max-width: 65ch;
	/* font-family: var(--ff-display); */
	/*font-size: clamp(1.5rem, 2.2vw, 1.7rem);
	line-height: 1.4;
	color: var(--ink);
	font-variation-settings: "opsz" 144*/
}

.terapie__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 24px;
	margin-bottom: 64px
}

@media (max-width:780px) {
	.terapie__grid {
		grid-template-columns: 1fr
	}
	.pull-quote {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

.panel {
	background: var(--cream);
	border-radius: var(--radius-lg);
	padding: 32px;
	border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent);
	transition: transform .5s var(--ease-out), box-shadow .5s
}

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

.panel--dark {
	background: var(--moss-deep);
	color: var(--cream);
	border-color: transparent
}

.panel--dark h3 {
	color: var(--cream)
}

.panel--dark .panel__num {
	color: var(--gold)
}

.panel__head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	margin-bottom: 24px;
	padding-bottom: 20px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent)
}

.panel__num {
	font-family: var(--ff-display);
	/*font-style: italic;*/
	font-size: 1.5rem;
	color: var(--clay);
	font-variation-settings: "opsz" 144
}

.dotted li {
	padding: 15px 0 15px 28px;
	position: relative;
	font-size: 1rem;
	line-height: 1.5;
	border-bottom: 1px dashed color-mix(in srgb, currentColor 20%, transparent)
}

.dotted li:last-child {
	border-bottom: 0
}

.dotted li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 25px;
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--gold)
}

.chip-list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px
}

.chip-list li {
	padding: .55em 1em;
	border-radius: 999px;
	background: rgba(250, 246, 232, .1);
	border: 1px solid rgba(250, 246, 232, .18);
	color: var(--cream);
	transition: background .3s, transform .3s
}

.chip-list li:hover {
	background: var(--gold);
	color: var(--moss-deep);
	transform: translateY(-2px)
}

.callout {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent);
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 15%, transparent)
}

.callout>div {
	padding: 32px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-right: 1px solid color-mix(in srgb, var(--ink) 12%, transparent)
}

.callout>div:last-child {
	border-right: 0
}

.callout__label {
	font-size: .8rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--moss);
	font-weight: 500
}

.callout__value {
	font-family: var(--ff-display);
	font-size: clamp(1.8rem, 3vw, 2.6rem);
	font-variation-settings: "opsz" 144;
	color: var(--ink);
	line-height: 1
}

.callout__sub {
	font-size: 1rem;
	color: var(--ink-soft)
}

@media (max-width:680px) {
	.callout {
		grid-template-columns: 1fr
	}

	.callout>div {
		border-right: 0;
		border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent)
	}

	.callout>div:last-child {
		border-bottom: 0
	}
}

/* ------------------------------ pro koho ------------------------------ */
.pro-koho {
	background: var(--paper)
}

.pro__head {
	margin-bottom: 64px;
	max-width: 680px
}

.num-list {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px 56px
}

@media (max-width:780px) {
	.num-list {
		grid-template-columns: 1fr
	}
}

.num-list li {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 24px;
	padding: 24px 0;
	border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent)
}

.num-list .num {
	font-family: var(--ff-display);
	/*font-style: italic;*/
	font-size: 1.5rem;
	color: var(--gold);
	line-height: 1;
	margin-top: 4px;
	font-variation-settings: "opsz" 144
}

.num-list h3 {
	margin: 0 0 8px;
	font-weight: 500
}

.num-list p {
	margin: 0;
	color: var(--ink-soft);
	font-size: 1rem
}

/* ------------------------------ přínosy ------------------------------ */
.section--dark {
	background: var(--moss-deep);
	color: var(--cream);
	position: relative;
	overflow: hidden
}

.section--dark .display {
	color: var(--cream)
}

.section--dark .display em {
	color: var(--gold)
}

.section--dark p {
	color: color-mix(in srgb, var(--cream) 80%, transparent)
}

.bg-spiral {
	position: absolute;
	right: -10%;
	top: 50%;
	transform: translateY(-50%);
	width: min(700px, 70vw);
	color: var(--gold);
	pointer-events: none;
	animation: slowSpin 80s linear infinite reverse
}

.prinosy__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	margin-top: 48px
}

@media (max-width:980px) {
	.prinosy__grid {
		grid-template-columns: repeat(2, 1fr)
	}
}

@media (max-width:560px) {
	.prinosy__grid {
		grid-template-columns: 1fr
	}
}

.benefit {
	padding: 32px;
	border: 1px solid rgba(250, 246, 232, .14);
	border-radius: var(--radius);
	transition: background .3s, border-color .3s, transform .5s var(--ease-out)
}

.benefit:not(.benefit--quote):hover {
	background: rgba(250, 246, 232, .04);
	border-color: rgba(250, 246, 232, .28);
	transform: translateY(-4px)
}

.benefit svg {
	width: 30px;
	height: 30px;
	color: var(--gold);
	margin-bottom: 18px
}

.benefit h3 {
	color: var(--cream);
	margin-bottom: 8px
}

.benefit p {
	font-size: 1rem
}

.benefit--quote {
	background: linear-gradient(135deg, var(--gold) 0%, #a07842 100%);
	color: var(--moss-deep);
	border: none;
	display: flex;
	flex-direction: column;
	justify-content: center
}

.benefit--quote p {
	font-family: var(--ff-display);
	font-style: italic;
	font-size: 1.8rem;
	line-height: 1.1;
	/*color: var(--moss-deep);*/
	margin: 0 0 12px;
	font-variation-settings: "opsz" 144
}

.benefit--quote span {
	font-size: .8rem;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--moss-deep);
	opacity: .75;
	font-weight: 500
}

/* ------------------------------ o mně ------------------------------ */
.o-mne {
	background: var(--paper)
}
.o-mne .hero__media {
	aspect-ratio: 1 / 1.3;
}


.botanical {
	width: 100%;
	height: auto;
	aspect-ratio: 7/9;
	border-radius: var(--radius-lg);
	box-shadow: var(--shadow);
	max-width: 460px;

	/**/ display: none;
}

.bio {
	display: flex;
	flex-direction: column;
	gap: 0;
	margin: 32px 0 0;
	border-top: 1px solid color-mix(in srgb, var(--ink) 15%, transparent)
}

.bio>div {
	display: grid;
	grid-template-columns: 200px 1fr;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid color-mix(in srgb, var(--ink) 12%, transparent)
}

.bio dt {
	margin: 0;
	font-size: .8rem;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--moss);
	font-weight: 600
}

.bio dd {
	margin: 0;
	color: var(--ink)
}

@media (max-width:520px) {
	.bio>div {
		grid-template-columns: 1fr;
		gap: 4px
	}
}

/* ------------------------------ kontakt ------------------------------ */
.section--paper {
	background: var(--cream)
}

.kontakt__head {
	text-align: center;
	margin-bottom: 64px
}

.kontakt__head .lead {
	margin: 0 auto
}

.kontakt__grid {
	display: grid;
	grid-template-columns: 1fr 1.4fr;
	gap: clamp(40px, 6vw, 80px);
	align-items: start
}

@media (max-width:980px) {
	.kontakt__grid {
		grid-template-columns: 1fr
	}
}

.kontakt__info {
	display: flex;
	flex-direction: column;
	gap: 38px;
	border-left: 2px solid var(--moss);
	padding-left: 32px
}

.info-item {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.info-label {
	font-size: .8rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--moss);
    font-weight: 600;
}

.info-item a,
.info-item span:not(.info-label) {
	font-family: var(--ff-display);
	font-size: 1.25rem;
	line-height: 1.4;
	color: var(--ink);
	font-variation-settings: "opsz" 36
}

.info-item a:hover {
	color: var(--clay)
}

.kontakt__form {
	display: flex;
	flex-direction: column;
	gap: 18px;
	background: var(--paper);
	padding: 36px;
	border-radius: var(--radius-lg);
	border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent)
}

.field {
	display: flex;
	flex-direction: column;
	gap: 6px
}

.field-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px
}

@media (max-width:520px) {
	.field-row {
		grid-template-columns: 1fr
	}
}

.field label {
	font-size: .8rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: var(--moss);
	font-weight: 600
}

.field input,
.field textarea {
	font: inherit;
	color: var(--ink);
	background: var(--cream);
	border: 1px solid color-mix(in srgb, var(--ink) 14%, transparent);
	border-radius: var(--radius-sm);
	padding: 14px 16px;
	transition: border-color .3s, background .3s
}

.field input:focus,
.field textarea:focus {
	outline: none;
	border-color: var(--moss);
	background: #fff
}

.field textarea {
	resize: vertical;
	min-height: 120px;
	font-family: inherit
}

.kontakt__form .btn {
	align-self: flex-start;
	margin-top: 8px
}

/* ------------------------------ footer ------------------------------ */
.site-footer {
	background: var(--moss-deep);
	color: color-mix(in srgb, var(--cream) 80%, transparent);
	padding: 56px 0;
}

.site-footer__row {
	display: flex;
	flex-wrap: wrap;
	gap: 32px;
	align-items: center;
	justify-content: space-between
}

.site-footer__brand {
	display: flex;
	align-items: center;
	gap: 14px;
	color: var(--gold)
}

.site-footer__brand>div {
	display: flex;
	flex-direction: column;
	line-height: 1.3;
	color: var(--cream)
}

.site-footer__brand strong {
	font-family: var(--ff-display);
	font-weight: 400;
	font-size: 1.15rem;
	color: var(--cream);
	font-variation-settings: "opsz" 36
}

.site-footer__brand span {
	font-size: .8rem;
	color: color-mix(in srgb, var(--cream) 65%, transparent)
}

.site-footer__brand .logo__mark {
	width: 32px;
	height: 32px
}

.site-footer__nav {
	display: flex;
	gap: 18px;
	flex-wrap: wrap
}

.site-footer__nav a {
	transition: color .3s
}

.site-footer__nav a:hover {
	color: var(--gold)
}

.site-footer__meta {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 4px;
	font-size: .8rem;
	opacity: .33;
}

.site-footer__meta a {
	color: var(--cream)
}

.site-footer__meta strong {
	font-weight: 600
}

@media (max-width:680px) {
	.site-footer__meta {
		align-items: flex-start
	}
}
/* anti-spam honeypot */
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none}