/* Eye Wonder Scroll Stage 2.0.0
   Ivory page, sticky header that slides away while scrolling, small animated
   logo, and on the home page the "video frames" layout. */

/* ---------- Header: fixed at the top, hidden while scrolling ---------- */
.ews-site .kv-header {
	transition: transform .38s cubic-bezier(.4, 0, .2, 1), opacity .3s ease;
	will-change: transform;
}
html.ews-scrolling:not(.ews-nav-open) .ews-site .kv-header {
	transform: translateY(calc(-100% - 50px));
	opacity: 0;
}

/* ---------- Small animated logo ---------- */
.ews-site .kv-brand { gap: 0; }
.ews-site .kv-brand__mark,
.ews-site .kv-brand__text { display: none; }
.ews-logo {
	position: relative;
	display: block;
	height: 60px;
	aspect-ratio: 242 / 180;
	background: var(--ews-logo) center / contain no-repeat;
	mix-blend-mode: multiply; /* the logo's white backdrop melts into the ivory header */
}
.ews-logo video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: contain;
	background: #fff;
	opacity: 0;
	transition: opacity .25s;
}
.ews-logo.is-playing video { opacity: 1; }
@media (max-width: 900px) {
	.ews-logo { height: 50px; }
}

/* ---------- Home page ---------- */
.kvsm-stage { display: none !important; } /* the retired full-screen video */
html.ews-pending .ews-home .kv-main { opacity: 0; animation: ews-reveal 0s 2.5s forwards; }
@keyframes ews-reveal { to { opacity: 1; } }

.ews-home { background: var(--kv-ivory, #fbf9f4); }
.ews-home .kv-main > section,
.ews-home .kv-main > .ews-sec { background: transparent !important; }
.ews-home .kv-main > section::before,
.ews-home .kv-main > section::after { display: none; }
.ews-home .kv-wash,
.ews-home .kv-hero__photo { display: none !important; }

.ews-sec { position: relative; }
.ews-sec .ews-frame { position: relative; }

/* the video box (placeholder until the real video is uploaded) */
.ews-video {
	position: relative;
	overflow: hidden;
	border-radius: 22px;
	background: #e9efe5;
	box-shadow: 0 30px 60px -38px rgba(43, 48, 42, .45);
	aspect-ratio: 16 / 9;
}
.ews-video video,
.ews-video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover; /* the box is 16:9 like the video, so nothing is cut */
	display: block;
}
.ews-ph {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: .35em;
	text-align: center;
	padding: 1rem;
	color: var(--kv-forest, #3f4a32);
	background:
		radial-gradient(60% 70% at 25% 30%, rgba(143, 168, 143, .45), transparent 70%),
		radial-gradient(55% 60% at 80% 75%, rgba(188, 211, 224, .55), transparent 70%),
		radial-gradient(40% 40% at 70% 20%, rgba(217, 199, 160, .35), transparent 70%),
		#f4f1e8;
	font-size: clamp(11px, 1.15vw, 16px);
	line-height: 1.6;
}
.ews-ph::after {
	content: "";
	position: absolute;
	inset: 12px;
	border: 1.5px dashed rgba(181, 148, 90, .7);
	border-radius: 14px;
	pointer-events: none;
}
.ews-ph__play {
	width: 3.4em;
	height: 3.4em;
	border-radius: 50%;
	border: 1.5px solid var(--kv-gold, #b5945a);
	display: grid;
	place-items: center;
	margin-bottom: .4em;
	animation: ews-breathe 3.2s ease-in-out infinite;
}
.ews-ph__play::before {
	content: "";
	border-style: solid;
	border-width: .55em 0 .55em .9em;
	border-color: transparent transparent transparent var(--kv-gold, #b5945a);
	margin-inline-start: .2em;
}
@keyframes ews-breathe { 50% { transform: scale(1.12); opacity: .7; } }
.ews-ph__fa { font-family: "Lalezar", var(--kv-fa-head, sans-serif); font-size: 1.45em; line-height: 1.5; direction: rtl; }
.ews-ph__name { font-family: "Noto Naskh Arabic", serif; font-weight: 600; font-size: 1.05em; direction: rtl; margin-top: -.3em; }
.ews-ph__en { font-family: var(--kv-sans, sans-serif); letter-spacing: .14em; text-transform: uppercase; font-size: .78em; color: var(--kv-muted, #6a7064); direction: ltr; }
.ews-ph__file { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .78em; background: rgba(255, 255, 255, .7); padding: .15em .7em; border-radius: 99px; direction: ltr; }
.ews-ph__spec { font-size: .82em; color: var(--kv-muted, #6a7064); direction: rtl; font-family: "Noto Naskh Arabic", serif; }

/* items that appear next to the video */
.ews-items { display: flex; flex-direction: column; gap: .9rem; }
.ews-it {
	opacity: 0;
	transform: translateY(16px);
	transition: opacity .5s ease, transform .5s cubic-bezier(.2, .7, .2, 1);
}
.ews-it.on { opacity: 1; transform: none; }
.ews-items h1, .ews-items h2 { margin: 0; }
.ews-items p { margin: 0; }
.ews-items .kv-hero__title { font-size: clamp(2rem, 3.6vw, 3.4rem); line-height: 1.12; text-align: start; }
.ews-items .kv-actions, .ews-items .kv-center { justify-content: flex-start; text-align: start; margin: 0; display: flex; flex-wrap: wrap; gap: .6rem 1rem; }
.ews-items .kv-section__head { text-align: start; margin: 0; }
.ews-items .kv-section__head p { margin-top: .4rem; }
.ews-items .kv-ornament { margin-inline: 0; }

/* list-like items (services, approach) become soft cards */
.ews-items .kv-strip__item,
.ews-items .kv-step {
	display: block;
	background: rgba(255, 255, 255, .72);
	border: 1px solid var(--kv-line, #e6e1d6);
	border-radius: 16px;
	padding: .8rem 1.1rem;
	text-decoration: none;
	color: inherit;
	min-height: 0;
}
.ews-items .kv-strip__item h3,
.ews-items .kv-step h3 { margin: .1rem 0 .15rem; font-size: 1.15rem; }
.ews-items .kv-strip__item p,
.ews-items .kv-step p { font-size: .93rem; line-height: 1.55; }
.ews-items .kv-strip__num,
.ews-items .kv-step__num { float: inline-start; margin-inline-end: .6rem; color: var(--kv-gold, #b5945a); }
.ews-items .kv-strip__go { display: none; }

/* closing call-to-action keeps its green card under the video */
.ews-sec--cta .ews-cta-card {
	background: var(--kv-forest, #3f4a32);
	color: #fff;
	border-radius: 22px;
	padding: 1.4rem 1.6rem;
	text-align: center;
}
.ews-sec--cta .ews-cta-card h2 { color: #fff; }
.ews-sec--cta .ews-items .kv-actions { justify-content: center; }

/* scroll hint under the first video */
.ews-hint {
	position: absolute;
	left: 50%;
	bottom: 18px;
	width: 26px;
	height: 40px;
	margin-left: -13px;
	border: 1.5px solid var(--kv-sage, #8fa88f);
	border-radius: 14px;
	opacity: .8;
	transition: opacity .4s;
	pointer-events: none;
}
.ews-hint::after {
	content: "";
	position: absolute;
	left: 50%;
	top: 8px;
	width: 4px;
	height: 8px;
	margin-left: -2px;
	border-radius: 2px;
	background: var(--kv-sage, #8fa88f);
	animation: ews-hint 1.8s ease-in-out infinite;
}
@keyframes ews-hint { 60% { transform: translateY(12px); opacity: 0; } 100% { opacity: 0; } }

/* ---- pinned mode (desktop): the section is a tall scroll track, the frame sticks ---- */
.ews-sec.is-pinned { height: var(--ews-track, 210vh); }
.ews-sec.is-pinned .ews-frame {
	position: sticky;
	top: 0;
	height: 100vh;
	height: 100svh;
	overflow: hidden;
}
.ews-sec.is-pinned .ews-video {
	position: absolute;
	left: 0;
	top: 0;
	will-change: transform;
	transform-origin: 50% 50%;
}
.ews-sec.is-pinned .ews-items {
	position: absolute;
	top: 0;
	will-change: transform;
}

/* ---- flow mode (phones, tablets and short screens) ---- */
.ews-sec.is-flow { padding: 2.2rem 0 1.4rem; }
.ews-sec.is-flow .ews-frame {
	width: min(var(--kv-max, 1180px), 100% - 2rem);
	margin-inline: auto;
}
.ews-sec.is-flow .ews-video {
	width: 100%;
	transform: translateY(40px) scale(.9);
	opacity: .2;
	transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease;
}
.ews-sec.is-flow .ews-video.in { transform: none; opacity: 1; }
.ews-sec.is-flow .ews-items { margin-top: 1.3rem; }
.ews-sec.is-flow .ews-hint { display: none; }
.ews-sec.is-flow .ews-items .kv-hero__title { font-size: clamp(1.8rem, 8vw, 2.6rem); }

/* plain sections (FAQ, blog) fade in gently */
.ews-plain { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.ews-plain.in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.ews-it, .ews-plain, .ews-sec.is-flow .ews-video { opacity: 1 !important; transform: none !important; transition: none !important; }
	.ews-ph__play, .ews-hint::after { animation: none; }
	html.ews-scrolling .ews-site .kv-header { transform: none; opacity: 1; }
}

/* ---------- 2.1: clickable section titles ---------- */
.ews-title-link { color: inherit; text-decoration: none; display: inline-flex; align-items: baseline; gap: .45em; }
.ews-title-arrow { font-size: .55em; color: var(--kv-gold, #b5945a); opacity: .7; transition: transform .3s, opacity .3s; }
.ews-title-link:hover .ews-title-arrow,
.ews-title-link:focus-visible .ews-title-arrow { opacity: 1; transform: translateX(.25em); }
[dir="rtl"] .ews-title-link:hover .ews-title-arrow { transform: translateX(-.25em); }
.ews-title-link:hover { color: var(--kv-olive, #5f6b45); }

/* new Workshops / Contact sections and compact blog / FAQ items */
.ews-items .kv-contact-list { list-style: none; margin: 0; padding: .8rem 1.1rem; background: rgba(255, 255, 255, .72); border: 1px solid var(--kv-line, #e6e1d6); border-radius: 16px; font-size: .95rem; }
.ews-items .kv-contact-list li { display: flex; gap: .8rem; padding: .2rem 0; }
.ews-items .kv-contact-list li span { min-width: 7.5em; color: var(--kv-muted, #6a7064); }
.ews-items .kv-post-card { background: rgba(255, 255, 255, .72); border: 1px solid var(--kv-line, #e6e1d6); border-radius: 16px; padding: .8rem 1.1rem; }
.ews-items .kv-post-card__body > p:not(.kv-post-card__date) { display: none; }
.ews-items .kv-post-card__title { font-size: 1.1rem; margin: .1rem 0 .2rem; line-height: 1.4; }
.ews-items .kv-post-card__date { font-size: .78rem; }
.ews-items .kv-faq__item { background: rgba(255, 255, 255, .72); border: 1px solid var(--kv-line, #e6e1d6); border-radius: 16px; padding: .55rem 1.1rem; margin: 0; }
.ews-items .kv-faq__answer p { font-size: .93rem; }

/* video on the Log in / My account page */
.ews-page-video { width: min(880px, 100% - 2rem); margin: 2rem auto 0; }
.ews-page-video .ews-video { transform: translateY(30px) scale(.94); opacity: .2; transition: transform .9s cubic-bezier(.2, .7, .2, 1), opacity .9s ease; }
.ews-page-video .ews-video.in { transform: none; opacity: 1; }
/* 2.1.1: compact FAQ / contact so they fit beside the video */
.ews-items { gap: .75rem; }
.ews-items .kv-faq__item { padding: .45rem 1rem; }
.ews-items .kv-faq__item summary { padding: .1rem 0; font-size: 1rem; line-height: 1.5; }
.ews-items .kv-contact-list { padding: .6rem 1rem; }
.ews-items .kv-contact-list li { flex-direction: row; flex-wrap: nowrap; align-items: baseline; gap: .8rem; margin: 0; padding: .15rem 0; line-height: 1.5; border: 0; }
.ews-items .kv-contact-list li span { display: inline-block; flex: none; min-width: 7.5em; margin: 0; font-size: .85rem; }

/* 2.2: log-in page: e-mail and WhatsApp boxes side by side, Google button under both */
.kv-prose:has(> .kv-form--login):has(> .wa-otp-form) {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-areas: "login wa" "google google";
	gap: 1.4rem 2rem;
	align-items: stretch;
	max-width: 1040px;
	margin-inline: auto;
}
.kv-prose:has(> .kv-form--login):has(> .wa-otp-form) > * { margin: 0 !important; max-width: none !important; width: auto !important; }
.kv-prose:has(> .wa-otp-form) > .kv-form--login { grid-area: login; }
.kv-prose:has(> .wa-otp-form) > .nsl-container { grid-area: google; text-align: center; }
.kv-prose:has(> .kv-form--login) > .wa-otp-form { grid-area: wa; }
.kv-prose:has(> .kv-form--login) > .kv-form--login,
.kv-prose:has(> .kv-form--login) > .wa-otp-form {
	background: #fff;
	border: 1px solid var(--kv-line, #e6e1d6);
	border-radius: 22px;
	padding: 1.8rem 1.9rem;
	box-shadow: 0 30px 60px -45px rgba(43, 48, 42, .35);
}
.kv-prose:has(> .kv-form--login) > .wa-otp-form .wa-otp-modern__title {
	font-family: var(--kv-font-head, "Cormorant Garamond", serif);
	font-size: clamp(1.6rem, 2.4vw, 2.1rem);
	font-weight: 500;
	line-height: 1.2;
	color: var(--kv-ink, #2b302a);
	margin: 0 0 .3rem;
}
body.lang-fa .kv-prose:has(> .kv-form--login) > .wa-otp-form .wa-otp-modern__title { font-family: "Lalezar", var(--kv-fa-head, sans-serif); font-weight: 400; }
@media (max-width: 820px) {
	.kv-prose:has(> .kv-form--login):has(> .wa-otp-form) { grid-template-columns: 1fr; grid-template-areas: "login" "google" "wa"; }
}
/* the account-page video sits under the page title, a little smaller */
.ews-page-video { width: min(720px, 100% - 2rem); margin: 0 auto 1rem; }
.kv-page-head + .ews-page-video { margin-top: -.5rem; }

/* What we offer: the four services as a 2 x 2 grid of near-square cards (2.3.1) */
.ews-sec--offer .ews-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; align-items: stretch; }
.ews-sec--offer .ews-it:first-child,
.ews-sec--offer .ews-it:last-child { grid-column: 1 / -1; }
.ews-sec--offer .ews-it .kv-strip__item { display: flex; flex-direction: column; justify-content: center; height: 100%; aspect-ratio: 5 / 4; box-sizing: border-box; padding: 1rem 1.1rem; }
.ews-sec--offer .ews-it .kv-strip__num { float: none; display: block; margin: 0 0 .35rem; font-size: 1.05rem; }
.ews-sec--offer .ews-it .kv-strip__item h3 { margin: 0 0 .35rem; line-height: 1.3; }
@media (max-width: 899px) {
	.ews-sec--offer .ews-items { gap: .6rem; }
	.ews-sec--offer .ews-it .kv-strip__item { aspect-ratio: 1 / 1; padding: .8rem .85rem; }
	.ews-sec--offer .ews-it .kv-strip__item h3 { font-size: 1rem; }
	.ews-sec--offer .ews-it .kv-strip__item p { font-size: .82rem; line-height: 1.45; }
}

/* What we offer: four small squares in one row (2.3.2); phones under 600px keep the 2 x 2 grid */
@media (min-width: 600px) {
	.ews-sec--offer .ews-items { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; }
	.ews-sec--offer .ews-it .kv-strip__item { aspect-ratio: 1 / 1; padding: .7rem; align-items: center; text-align: center; justify-content: center; }
	.ews-sec--offer .ews-it .kv-strip__num { margin: 0 0 .3rem; }
	.ews-sec--offer .ews-it .kv-strip__item h3 { font-size: .95rem; line-height: 1.3; margin: 0; }
	.ews-sec--offer .ews-it .kv-strip__item p { display: none; }
}

/* Our approach: the three principles as small squares in one row (2.3.3) */
.ews-sec--approach .ews-items { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; align-items: stretch; }
.ews-sec--approach .ews-it:first-child { grid-column: 1 / -1; }
.ews-sec--approach .ews-it .kv-step { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; height: 100%; aspect-ratio: 1 / 1; box-sizing: border-box; padding: .7rem; }
.ews-sec--approach .ews-it .kv-step__num { float: none; display: block; margin: 0 0 .3rem; font-size: 1.05rem; }
.ews-sec--approach .ews-it .kv-step h3 { font-size: .95rem; line-height: 1.3; margin: 0; }
.ews-sec--approach .ews-it .kv-step p { display: none; }

/* Meditation audio page (2.4.0): video instead of the page header, melodies as small squares */
.ews-audio-hero { width: min(960px, 100% - 2rem); margin: 1.6rem auto 1.2rem; }
.ews-sr-head { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kvm .kvm-list { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: .6rem; }
.kvm .kvm-card { display: flex !important; flex-direction: column; align-items: center; justify-content: center; text-align: center; aspect-ratio: 1 / 1; box-sizing: border-box; padding: .6rem; gap: .35rem; min-width: 0; }
.kvm .kvm-card__t { text-align: center; min-width: 0; max-width: 100%; }
.kvm .kvm-card__btn { margin: 0; flex: none; }
.kvm .kvm-card__n { font-size: .95rem; line-height: 1.3; }
.kvm .kvm-card__e { font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kvm .kvm-card__d { display: none; }
@media (min-width: 900px) { .kvm .kvm-list { grid-template-columns: repeat(6, minmax(0, 1fr)) !important; } }

/* Meditation audio page scroll stage (2.5.0) */
.ews-astage { position: relative; }
.ews-astage.is-flow { width: min(960px, 100% - 2rem); margin: 1.6rem auto 1.2rem; }
.ews-astage.is-flow .ews-astage__items { margin-top: 1.4rem; }
.ews-astage.is-pinned { height: 210vh; }
.ews-astage.is-pinned .ews-astage__frame { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }
.ews-astage.is-pinned .ews-video { position: absolute; left: 0; top: 0; transform-origin: 0 0; will-change: transform; opacity: 1; }
.ews-astage.is-pinned .ews-astage__items { position: absolute; will-change: transform, opacity; opacity: 0; }
.ews-astage .kvm { margin: 0; }
.ews-astage.is-pinned .kvm .kvm-list,
.ews-astage.is-measure .kvm .kvm-list { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.ews-astage.is-pinned .kvm .kvm__intro { font-size: .92rem; }
/* members' meditations: cards side by side in a row */
.ews-audio-page .kv-audio-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1rem; align-items: start; }
.ews-audio-page .kv-audio-list .kv-audio { margin: 0; }