/* ==========================================================================
   Spainbase sections, matched to Resetyl one for one.

   Five sections, in this order: hero, value props, testimonial, journal
   preview, closing call to action. The value props are the page's spine:
   six full width rows, each half photograph and half text panel, flipping
   side and ground every row.
   ========================================================================== */

/* ------------------------------------------------ value prop rows */

.vp-head { padding: clamp(64px, 8vw, 96px) 24px clamp(36px, 4vw, 56px); max-width: 1180px; margin: 0 auto; }
.vp-head h2 { max-width: 24ch; }
.vp-head .lede { margin-top: 20px; }

.vp-row {
	display: flex;
	flex-direction: column;
	min-height: 60vh;
}
.vp-row.is-flipped { flex-direction: column; }

.vp-media { position: relative; width: 100%; overflow: hidden; }
.vp-media img { width: 100%; height: 288px; object-fit: cover; display: block; }

.vp-panel { width: 100%; display: flex; align-items: center; background: var(--sand-50); }
.vp-row:nth-child(even) .vp-panel { background: var(--cream); }
.vp-inner { padding: 52px 32px; max-width: 36rem; }

.vp-stat {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(3rem, 5vw, 3.9rem);
	font-weight: 700;
	line-height: 1;
	color: var(--terracotta);
	display: block;
}
.vp-stat.is-words { font-size: clamp(2.1rem, 3.4vw, 3rem); }
.vp-unit {
	display: block;
	margin-top: 6px;
	font-size: 0.8rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--ink-faint);
}
.vp-inner h3 { margin: 26px 0 16px; font-size: clamp(1.6rem, 2.4vw, 2.1rem); }
.vp-inner p { color: var(--ink-soft); font-size: 1.06rem; margin: 0; }

@media (min-width: 860px) {
	.vp-row { flex-direction: row; min-height: 62vh; }
	.vp-row.is-flipped { flex-direction: row-reverse; }
	.vp-media { width: 50%; }
	.vp-media img { position: absolute; inset: 0; height: 100%; }
	.vp-panel { width: 50%; }
	.vp-inner { padding: 0 clamp(40px, 5vw, 78px); }
}

/* ------------------------------------------------------ testimonial */

.testimonial { background: var(--terracotta); padding: clamp(88px, 11vw, 140px) 0; }
.testimonial .wrap { max-width: 1000px; text-align: center; }
.testimonial .mark {
	display: block;
	font-family: "Cormorant Garamond", Georgia, serif;
	font-size: clamp(6rem, 12vw, 10rem);
	line-height: 1;
	color: #F09877;
	margin-bottom: -0.42em;
	user-select: none;
}
.testimonial blockquote {
	font-family: "Cormorant Garamond", Georgia, serif;
	font-style: italic;
	font-size: clamp(1.8rem, 3.6vw, 3rem);
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 auto;
	max-width: 30ch;
}
.testimonial footer { margin-top: 40px; display: flex; align-items: center; justify-content: center; gap: 16px; }
.testimonial .avatar {
	width: 48px; height: 48px; border-radius: 50%;
	background: #F09877; color: #fff;
	display: flex; align-items: center; justify-content: center;
	font-family: "Cormorant Garamond", Georgia, serif; font-size: 1.35rem;
}
.testimonial .who { text-align: left; }
.testimonial .who b { display: block; font-size: 0.94rem; font-weight: 600; color: #fff; }
.testimonial .who span { display: block; font-size: 0.94rem; color: #FFD9C9; }

/* --------------------------------------------------- journal preview */

.journal { background: var(--paper); padding: clamp(76px, 9vw, 128px) 0; }
.journal-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 56px; }
.journal-head .lede { margin-top: 12px; }
.journal-grid { display: grid; gap: 32px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.journal-card {
	display: block; text-decoration: none; border-radius: 12px;
	background: var(--cream); overflow: hidden;
	transition: transform 0.25s, box-shadow 0.25s;
}
.journal-card:hover { transform: translateY(-4px); box-shadow: 0 26px 60px -40px rgba(44,38,34,0.6); }
.journal-card .thumb { height: 168px; overflow: hidden; }
.journal-card .thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s; }
.journal-card:hover .thumb img { transform: scale(1.05); }
.journal-card .body { padding: 26px 26px 30px; }
.journal-card .meta { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-faint); }
.journal-card h3 { margin: 12px 0 10px; font-size: 1.35rem; }
.journal-card p { color: var(--ink-soft); font-size: 0.98rem; margin: 0; }

/* ------------------------------------------------------ closing cta */

.closing { position: relative; min-height: 90vh; display: flex; align-items: center; justify-content: center; overflow: hidden; background: var(--ink); }
.closing-media { position: absolute; inset: 0; animation: sb-slow-zoom 22s ease-in-out infinite alternate; }
.closing-media img { width: 100%; height: 100%; object-fit: cover; }
@keyframes sb-slow-zoom { from { transform: scale(1); } to { transform: scale(1.09); } }
@media (prefers-reduced-motion: reduce) { .closing-media { animation: none; } }
.closing-scrim {
	position: absolute; inset: 0; z-index: 2;
	background: linear-gradient(0deg, rgba(24,17,12,0.72) 0%, rgba(24,17,12,0.42) 50%, rgba(24,17,12,0.58) 100%);
}
.closing-inner { position: relative; z-index: 10; max-width: 1000px; padding: 0 32px; text-align: center; color: #fff; }
.closing-inner h2 { color: #fff; font-size: clamp(3rem, 6.4vw, 5.4rem); }
.closing-inner h2 .accent { font-style: italic; font-weight: 400; }
.closing-inner p { margin: 32px auto 0; max-width: 34rem; font-size: 1.14rem; color: #EFE3D8; }
.closing-inner .btn { margin-top: 46px; background: #fff; color: var(--terracotta-700); border-color: #fff; }
.closing-inner .btn:hover { background: var(--cream); color: var(--terracotta-700); }

@media (max-width: 760px) {
	.journal-head { flex-direction: column; align-items: flex-start; }
	.closing { min-height: 76vh; }
}

/* ---------- the returning visitor's bar ---------- */
.return-bar {
	position: fixed;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 60;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 18px;
	max-width: 1040px;
	margin: 0 auto;
	padding: 16px 18px 16px 22px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--sand-200);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(44, 38, 34, 0.16);
	transform: translateY(24px);
	opacity: 0;
	transition: transform 320ms ease, opacity 320ms ease;
}
.return-bar.is-on { transform: none; opacity: 1; }
.return-say { margin: 0; font-size: 15px; line-height: 1.5; color: var(--ink-soft); }
.return-say b { color: var(--ink); }
.return-say em { font-style: normal; color: var(--terracotta-700); font-weight: 600; }
.return-acts { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.return-link { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; font-size: 14px; }
.return-btn { padding: 12px 18px; font-size: 14px; }
.return-close { border: 0; background: none; font-size: 26px; line-height: 1; color: var(--ink-faint); cursor: pointer; padding: 4px 6px; }
.return-close:hover { color: var(--ink); }
.quiz-locked .return-bar { display: none; }
@media (max-width: 720px) {
	.return-bar { flex-direction: column; align-items: stretch; left: 10px; right: 10px; bottom: 10px; padding: 16px; }
	.return-acts { justify-content: space-between; }
}

/* ---------- cookie consent ---------- */
.consent-bar {
	position: fixed;
	left: 16px;
	bottom: 16px;
	z-index: 1200;
	max-width: 520px;
	padding: 22px 24px;
	background: var(--paper);
	color: var(--ink);
	border: 1px solid var(--sand-200);
	border-radius: 12px;
	box-shadow: 0 18px 44px rgba(44, 38, 34, 0.18);
	transform: translateY(24px);
	opacity: 0;
	transition: transform 320ms ease, opacity 320ms ease;
}
.consent-bar.is-on { transform: none; opacity: 1; }
.consent-say { margin: 0 0 16px; font-size: 14px; line-height: 1.6; color: var(--ink-soft); }
.consent-say a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.consent-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.consent-btn { padding: 11px 16px; font-size: 14px; }
.consent-bar ~ .return-bar { bottom: 16px; }
/* the banner sits over the quiz overlay too: the choice is asked once, first */
@media (max-width: 720px) { .consent-bar { left: 10px; right: 10px; bottom: 10px; max-width: none; padding: 18px; } }

/* the gated calendar: what shows in the frame's place until Calendly is allowed */
.calendly-gate { padding: 46px 28px; text-align: center; background: var(--sand-100); border-radius: 10px; }
.calendly-gate p { margin: 0 auto 18px; max-width: 46ch; color: var(--ink-soft); }