/*
Theme Name: Eva Taub Institute
Description: A warm, personal visual system built around Eva's own voice and 40 years of hands-on care — not a clinical or institutional look.
Version: 0.3.0
*/

:root {
	--color-bg: #FBF1E6;
	--color-surface: #FFFAF3;
	--color-surface-warm: #F6E4D8;
	--color-text: #2E2018; /* deepened from #3B2A22 — Eva's feedback: keep the cream, add energy through richer contrast instead */
	--color-text-muted: #74604F; /* darkened from #8A7160 to clear WCAG AA (4.5:1) at small sizes on both --color-bg and --color-surface-warm — same warm-brown family, just deeper */
	--color-espresso: #241811; /* deepened from #3B2A22 for stronger headline contrast */
	--color-rose: #C97B67;
	--color-rose-deep: #96432B; /* richer/more saturated from #A8583F — stronger accent for buttons and links */
	--color-gold: #C99B5D;
	--color-border: rgba(46, 32, 24, 0.18); /* stronger from 0.10 — more visible section dividers */
	--font-serif: 'Fraunces', Georgia, 'Iowan Old Style', serif;
	--font-script: 'Parisienne', 'Brush Script MT', cursive;
	--font-sans: 'Inter', -apple-system, 'Segoe UI', Roboto, sans-serif;
	--radius: 20px;
	--max-width: 1080px;
	--content-width: 700px;
	--shadow-soft: 0 6px 28px rgba(59, 42, 34, 0.07);
	--shadow-gentle: 0 2px 14px rgba(59, 42, 34, 0.05);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-sans);
	line-height: 1.75;
	font-size: 18px;
	-webkit-font-smoothing: antialiased;
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation: none !important; transition: none !important; }
}

h1, h2, h3, h4 {
	font-family: var(--font-serif);
	font-weight: 600;
	color: var(--color-espresso);
	line-height: 1.16;
	letter-spacing: 0;
	margin: 0 0 0.55em;
}

/* Default page/post titles stay composed and calm — the grand hero treatment
   is reserved for the homepage's "Meet Eva" moment specifically (see .meet-eva h1
   below), so condition pages, articles, and Q&A entries don't read as blog posts.
   Weight raised from the original 440/460 (Eva's feedback: headlines were
   "whispering" — needed more visual authority without changing the typeface
   or palette). */
h1 { font-size: clamp(2rem, 3.6vw, 2.65rem); font-weight: 600; }
h2 { font-size: clamp(1.5rem, 2.8vw, 1.9rem); margin-top: 2.4em; font-weight: 600; }
h3 { font-size: 1.25rem; font-weight: 550; }

.eyebrow {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 1rem;
	color: var(--color-rose-deep);
	margin: 0 0 0.5em;
}

p { margin: 0 0 1.25em; }

a { color: var(--color-rose-deep); text-decoration-color: var(--color-rose); text-underline-offset: 3px; }
a:hover { color: var(--color-rose); }

/* Keyboard focus — visible only for keyboard navigation (:focus-visible),
   not on mouse click, so it never interferes with the visual design. One
   rule covers every link and button site-wide, including nav, CTAs, and
   card-style links (related-card, highway-item), so nothing relies on the
   browser's unstyled default outline. */
a:focus-visible, button:focus-visible {
	outline: 2px solid var(--color-rose-deep);
	outline-offset: 3px;
}

.container { max-width: var(--max-width); margin: 0 auto; padding: 0 28px; }

article, .content-column { max-width: var(--content-width); }
article p, .content-column p { font-size: 1.08rem; color: var(--color-text); }

/* ---- Site header ---- */
.site-header {
	background: rgba(251, 241, 230, 0.92);
	backdrop-filter: saturate(160%) blur(10px);
	border-bottom: 1px solid var(--color-border);
	position: sticky;
	top: 0;
	z-index: 50;
}
.site-header-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 18px 28px;
	max-width: var(--max-width);
	margin: 0 auto;
	flex-wrap: wrap;
}
.site-title {
	font-family: var(--font-serif);
	font-size: 1.2rem;
	font-weight: 460;
	color: var(--color-espresso);
	text-decoration: none;
	white-space: nowrap;
}
.primary-nav ul {
	list-style: none;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 28px;
	margin: 0;
	padding: 0;
}
.primary-nav a { text-decoration: none; color: var(--color-text-muted); font-size: 0.96rem; }
.primary-nav a:hover { color: var(--color-rose-deep); }

.btn-consultation {
	background: var(--color-rose);
	color: #FFFAF3 !important;
	padding: 13px 27px;
	border-radius: 999px;
	text-decoration: none !important;
	font-size: 0.98rem;
	font-weight: 600;
	white-space: nowrap;
	box-shadow: var(--shadow-gentle);
	transition: transform 0.2s ease, background 0.2s ease;
	display: inline-block;
}
.btn-consultation:hover { background: var(--color-rose-deep); transform: translateY(-1px); }

@media (max-width: 720px) {
	.site-header-inner { padding: 14px 20px; }
	.site-title { font-size: 1.05rem; }
	.primary-nav ul { gap: 14px; }
	.primary-nav li:not(:last-child) a:not(.btn-consultation) { display: none; }
	.btn-consultation { padding: 10px 18px; font-size: 0.85rem; }
}

main.container { padding-top: 60px; padding-bottom: 100px; }

/* ---- Hero ---- */
.hero { padding: 20px 0 8px; max-width: var(--content-width); }
.hero p.lede { font-family: var(--font-serif); font-style: italic; font-size: 1.35rem; color: var(--color-text-muted); line-height: 1.55; margin-bottom: 1.9em; font-weight: 400; }

/* ---- Origin story: the homepage opens with why this became her life's
   work, not a generic bio blurb. Portrait + name is a brief anchor; the
   story itself carries the emotional weight. ---- */
.origin-wrap {
	background: var(--color-surface-warm);
	border-radius: 48px;
	padding: 56px 40px 64px;
	margin: 8px 0 40px;
	position: relative;
	overflow: hidden;
}
.origin-wrap::before {
	content: "";
	position: absolute;
	top: -120px;
	right: -100px;
	width: 340px;
	height: 340px;
	border-radius: 50%;
	background: var(--color-rose);
	opacity: 0.14;
	filter: blur(6px);
}
.origin-wrap::after {
	content: "";
	position: absolute;
	bottom: -140px;
	left: -110px;
	width: 300px;
	height: 300px;
	border-radius: 50%;
	background: var(--color-gold);
	opacity: 0.12;
	filter: blur(6px);
}
.origin-eyebrow {
	font-family: var(--font-script);
	font-size: clamp(2.1rem, 4vw, 2.4rem);
	line-height: 1.3;
	color: var(--color-rose-deep);
	margin: 0 0 0.85em;
	position: relative;
}
.origin-intro { text-align: center; padding: 4px 0 4px; position: relative; }
.portrait-frame {
	border-radius: 24px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
	max-width: 390px;
	margin: 0 auto;
}
.portrait-frame svg { width: 100%; height: 100%; display: block; }
/* Real hero photo: sized to its own natural aspect ratio (never forced/
   cropped via a mismatched fixed ratio) — object-fit: contain is a safety
   net only, not the primary sizing mechanism, so the full frame, including
   the top of the image, is always visible intact. */
.portrait-frame img {
	width: 100%;
	height: auto;
	display: block;
	object-fit: contain;
}
@media (min-width: 641px) {
	/* Confirmed by Eva: the hero photo should draw the eye first, well
	   beyond the text column's own width, while the typography beneath it
	   stays exactly as designed. Sized ~22% larger than the original
	   720/780px per Eva's direct feedback: visitors should think "this is
	   Eva" before they think "this is a beautiful website." */
	.portrait-frame { max-width: 880px; }
}
@media (min-width: 900px) {
	.portrait-frame { max-width: 950px; }
}
.portrait-caption { font-size: 0.78rem; font-style: italic; color: var(--color-text-muted); margin: 10px 0 0; }
.origin-intro h1 { font-family: var(--font-script); font-weight: 400; font-size: clamp(3.1rem, 6.4vw, 4.1rem); color: var(--color-rose-deep); margin: 0.15em 0 0; }
.institute-subtitle { font-size: 0.98rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); margin: 0.5em 0 0; max-width: 32em; margin-left: auto; margin-right: auto; }
.institute-subtitle--name {
	font-family: var(--font-serif); font-weight: 650; letter-spacing: 0.02em; text-transform: none;
	font-size: clamp(1.6rem, 3.2vw, 2rem); color: var(--color-espresso); margin-top: 1.05em;
}

/* ---- Welcome block (homepage Layer One) ---- */
.welcome-block .welcome-emph { color: var(--color-rose-deep); font-size: 1.22rem; }
.welcome-block .welcome-strong { font-weight: 600; color: var(--color-espresso); }
.welcome-block .mirror-hook {
	font-family: var(--font-serif); font-size: 1.35rem; line-height: 1.5; color: var(--color-espresso);
	text-align: center; max-width: 560px; margin: 0 auto 1.4em;
}
.welcome-block .welcome-pullquote {
	font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--color-rose-deep);
	border-left: 3px solid var(--color-gold); padding-left: 20px; margin: 1.6em 0;
}

/* ---- Proof strip (homepage, right after the Welcome) ---- */
.proof-strip { max-width: 640px; margin: 3em auto 0; text-align: center; }
.proof-title { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 600; color: var(--color-espresso); margin: 0 0 0.6em; }
.proof-lede { color: var(--color-text-muted); font-size: 0.98rem; max-width: 480px; margin: 0 auto 1.4em; }
.proof-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 12px; }
.proof-item {
	font-family: var(--font-sans); font-size: 0.85rem; font-weight: 600; color: var(--color-espresso);
	background: var(--color-surface-warm); border: 1px solid var(--color-border); border-radius: 100px; padding: 8px 16px;
}

/* ---- Things I Wish Every Woman Knew (homepage) ---- */
.know-list { max-width: var(--content-width); margin: 3.5em auto 0; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); box-shadow: var(--shadow-gentle); padding: 32px 36px; }
.know-list-pullquote { text-align: center; border-left: none; padding-left: 0; margin: 0 0 1.2em; }
.know-list-title { font-family: var(--font-serif); font-size: 1.3rem; color: var(--color-espresso); margin: 0 0 0.8em; text-align: center; }
.know-list-items { list-style: none; margin: 0; padding: 0; }
.know-list-items li {
	position: relative; padding: 10px 0 10px 30px; border-bottom: 1px solid var(--color-border); color: var(--color-text); font-size: 1.02rem;
}
.know-list-items li:last-child { border-bottom: none; }
.know-list-items li::before { content: "\2726"; position: absolute; left: 0; top: 10px; color: var(--color-gold); }

/* ---- Final word (homepage, bottom) ---- */
.final-word { max-width: var(--content-width); margin: 4em auto 2em; text-align: center; }
.final-promise { font-family: var(--font-serif); font-size: 1.25rem; color: var(--color-espresso); margin: 0 0 0.8em; }
.final-story { color: var(--color-text-muted); font-size: 1.05rem; line-height: 1.7; }
.final-memorable { font-family: var(--font-serif); font-style: italic; font-size: 1.15rem; color: var(--color-rose-deep); margin: 1.2em 0 0; }

/* ---- Information Highway (homepage Layer Two) ---- */
.highway-group-label {
	font-family: var(--font-sans); text-transform: uppercase; letter-spacing: 0.09em; font-size: 0.76rem;
	color: var(--color-rose-deep); font-weight: 600; margin: 1.8em 0 0.6em;
}
.highway-group-label:first-of-type { margin-top: 0.4em; }
.highway-list { display: flex; flex-direction: column; gap: 10px; margin: 0 0 1.4em; }
.highway-item {
	display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap;
	background: var(--color-surface-warm); border-radius: 12px; padding: 15px 20px;
	text-decoration: none !important; color: var(--color-text); transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.highway-item:hover { box-shadow: var(--shadow-soft); transform: translateY(-1px); }
.highway-item .ask { font-size: 1rem; font-weight: 600; }
.highway-item .clinical { font-family: var(--font-sans); font-size: 0.76rem; color: var(--color-text-muted); white-space: nowrap; letter-spacing: 0.02em; }
.highway-more { text-align: center; }
@media (max-width: 560px) {
	.highway-item { flex-direction: column; align-items: flex-start; }
}
.press-feature {
	display: flex;
	align-items: center;
	gap: 28px;
	background: var(--color-surface-warm);
	border-radius: var(--radius);
	padding: 24px;
	margin: 3em auto 0;
	max-width: 640px;
	text-align: left;
}
.press-feature img {
	width: 120px;
	height: auto;
	border-radius: 8px;
	box-shadow: var(--shadow-soft);
	flex-shrink: 0;
}
.press-feature-eyebrow {
	font-family: var(--font-script);
	font-size: 1.3rem;
	color: var(--color-rose-deep);
	margin: 0 0 0.3em;
}
.press-feature-text p:last-child { margin-bottom: 0; font-size: 0.95rem; }
@media (max-width: 560px) {
	.press-feature { flex-direction: column; text-align: center; }
}

.origin-story {
	max-width: 640px;
	margin: 2.2em auto 0;
	font-family: var(--font-serif);
	font-weight: 380;
	font-variation-settings: 'SOFT' 55, 'opsz' 20;
	font-size: 1.14rem;
	line-height: 1.9;
	color: var(--color-text);
	position: relative;
}
.origin-story p { margin: 0 0 1.4em; }

/* Eva's signature — used wherever a first-person page signs off as her */
.signature {
	font-family: var(--font-script);
	font-size: 2.4rem;
	color: var(--color-rose-deep);
	margin-top: 0.6em;
}
.btn-quiet { font-family: var(--font-sans); color: var(--color-rose-deep); text-decoration: none; font-size: 0.95rem; }
.btn-quiet:hover { color: var(--color-rose); }
@media (max-width: 640px) {
	.origin-story { font-size: 1.06rem; }
}

/* ---- Learn from Eva / Become a Patient homepage sections ---- */
.learn-from-eva, .become-patient { margin-top: 5em; }
.learn-from-eva .section-lede, .become-patient .section-lede, .disorders-hub-intro .section-lede, .struggling-intro .section-lede { color: var(--color-text-muted); max-width: var(--content-width); }

/* ---- Hormonal Skin & Hair Disorders hub (archive-condition.php) ---- */
.disorders-hub-intro { text-align: center; max-width: 720px; margin: 0 auto 3em; }
.disorders-hub-intro h1 { margin-top: 0.3em; }
.disorders-hub-intro .section-lede { margin-left: auto; margin-right: auto; }
.disorders-hub-group { margin-top: 3em; }
.disorders-hub-group h2 { font-size: 1.25rem; margin-bottom: 0.8em; }
.disorders-hub-closing { text-align: center; max-width: var(--content-width); margin: 3em auto 0; color: var(--color-text-muted); font-size: 1.02rem; }
.related-card-desc { font-family: var(--font-sans); font-size: 0.92rem; color: var(--color-text-muted); margin: 8px 0 0; line-height: 1.5; }

/* ---- Homepage "What are you struggling with?" entry grid ---- */
.struggling-intro { text-align: center; max-width: 720px; margin: 4em auto 2.2em; }
.struggling-intro h2 { margin-top: 0.3em; }
.learn-subhead { margin-top: 2.2em; font-size: 1.1rem; }
.qa-teaser-list { list-style: none; padding: 0; margin: 1em 0; }
.qa-teaser-list li { padding: 10px 0; border-bottom: 1px solid var(--color-border); }
.qa-teaser-list a { text-decoration: none; color: var(--color-espresso); font-size: 1.02rem; }
.qa-teaser-list a:hover { color: var(--color-rose-deep); }
.quote-card { font-family: var(--font-serif); font-style: italic; font-size: 1.02rem; line-height: 1.6; }
.quote-card .quote-attr { display: block; font-family: var(--font-sans); font-style: normal; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 12px; }

/* ---- Trust Module: a warm gathered statement, not a checklist ---- */
.trust-module {
	background: var(--color-surface-warm);
	border-radius: var(--radius);
	padding: 46px 48px;
	margin: 60px 0;
}
.trust-module h2 { margin-top: 0; font-size: 1.5rem; }
.trust-module ul {
	display: flex;
	flex-wrap: wrap;
	gap: 12px 14px;
	list-style: none;
	padding: 0;
	margin: 1.4em 0 0;
}
.trust-module li {
	background: transparent;
	padding: 8px 4px 8px 22px;
	border-radius: 4px;
	font-size: 0.92rem;
	color: var(--color-text);
	line-height: 1.4;
	position: relative;
}
/* A checkmark, not a pill+shadow, signals "confirmed fact" rather than
   "clickable button" — informational badge, not an interactive control. */
.trust-module li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 8px;
	color: var(--color-rose-deep);
	font-weight: 700;
	font-size: 0.85rem;
}
@media (max-width: 640px) { .trust-module { padding: 32px 26px; } }

/* ---- Education sequence (condition & treatment pages) ---- */
.education-sequence .last-reviewed {
	font-size: 0.92rem;
	color: var(--color-text-muted);
	margin-bottom: 2.4em;
	font-style: italic;
	font-family: var(--font-serif);
}
.education-sequence section {
	margin: 3.2em 0;
	padding-bottom: 0;
}
.education-sequence .step-label {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	font-size: 1.05rem;
	color: var(--color-rose-deep);
	margin-bottom: 0.4em;
	display: block;
}
.education-sequence section h2 { margin-top: 0; }

/* Eva's own words: a warm handwritten-note treatment */
.education-sequence section[style] {
	background: var(--color-surface-warm) !important;
	border: none !important;
	position: relative;
}
.education-sequence section[style] .step-label::before {
	content: "\201C";
	font-family: var(--font-serif);
	font-size: 2.6rem;
	color: var(--color-rose);
	position: absolute;
	top: 18px;
	left: 30px;
	line-height: 1;
	opacity: 0.55;
}

/* ---- Condition/treatment story body: freeform, Eva speaking directly ---- */
.condition-story {
	font-family: var(--font-serif);
	font-weight: 380;
	font-variation-settings: 'SOFT' 40, 'opsz' 18;
	font-size: 1.1rem;
	line-height: 1.78;
	color: var(--color-text);
}
.condition-story p { margin: 0 0 1.5em; }
.condition-story h2, .condition-story h3 {
	font-family: var(--font-serif);
	font-weight: 500;
	color: var(--color-rose-deep);
	font-size: 1.28rem;
	margin: 1.9em 0 0.7em;
}
.condition-story .story-pull {
	font-family: var(--font-script);
	font-size: 1.9rem;
	color: var(--color-espresso);
	text-align: center;
	line-height: 1.3;
	margin: 1em 0 1.3em;
}
.condition-story .story-aside {
	background: var(--color-surface-warm);
	border-radius: var(--radius);
	padding: 28px 32px;
	margin: 2em 0;
	font-size: 1.04rem;
}
.condition-story .differentiator-box {
	border-left: 3px solid var(--color-rose);
	background: transparent;
	padding: 16px 24px;
	margin: 1.6em 0 2em;
	font-size: 0.96rem;
	color: var(--color-text-muted);
}
.condition-story .differentiator-box strong {
	color: var(--color-espresso);
}
.condition-story .differentiator-box a {
	color: var(--color-rose-deep, var(--color-rose));
}
@media (max-width: 640px) {
	.condition-story { font-size: 1.03rem; }
	.condition-story .story-pull { font-size: 1.5rem; }
}

/* ---- Related content cards ---- */
.related-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
	gap: 18px;
	margin: 1.9em 0;
}
.related-card {
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: 22px 24px;
	text-decoration: none !important;
	color: var(--color-text);
	display: block;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	font-size: 1.03rem;
	box-shadow: var(--shadow-gentle);
}
.related-card:hover { box-shadow: var(--shadow-soft); transform: translateY(-2px); }
.related-card .related-kicker {
	font-family: var(--font-serif);
	font-style: italic;
	font-size: 0.82rem;
	color: var(--color-rose-deep);
	display: block;
	margin-bottom: 6px;
}

/* ---- Educational video block: calm, editorial, library-like — never a
   YouTube-style gallery. One video, its context, and nothing else. ---- */
.video-block {
	background: var(--color-surface-warm);
	border-radius: var(--radius);
	padding: 32px;
	margin: 2.4em 0;
	max-width: 640px;
}
.video-block-title {
	font-family: var(--font-serif);
	font-size: 1.3rem;
	margin: 0 0 0.5em;
	color: var(--color-espresso);
}
.video-block-intro {
	color: var(--color-text-muted);
	font-size: 0.98rem;
	margin: 0 0 1.4em;
}
.video-player {
	position: relative;
	background: #000;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: var(--shadow-soft);
}
.video-player video,
.video-player img { width: 100%; height: auto; display: block; }
.video-player iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	display: block;
	border: 0;
}
/* Portrait/vertical footage (Shorts, phone-shot 9:16) shouldn't stretch
   full-width like a landscape video, or it plays letterboxed inside a
   giant black bar — cap the width and swap the aspect ratio instead. */
.video-player--vertical { max-width: 320px; margin: 0 auto; }
.video-player--vertical iframe { aspect-ratio: 9 / 16; }
.video-block:has(.video-player video[poster]) .video-player { max-width: 320px; margin: 0 auto; }
.video-takeaways {
	margin-top: 1.6em;
	padding-top: 1.4em;
	border-top: 1px solid var(--color-border);
}
.video-takeaways ul { margin: 0.6em 0 0; padding-left: 1.2em; }
.video-takeaways li { margin-bottom: 0.4em; }
.video-related { margin-top: 1.4em; margin-bottom: 0; font-size: 0.95rem; }
.video-teaser-card { text-align: left; padding: 0; overflow: hidden; }
/* No forced crop ratio — thumbnails display at their natural aspect ratio
   so a face is never cut off, whether the source video is landscape or a
   phone-shot vertical clip. */
.video-teaser-card img { width: 100%; height: auto; display: block; }
.video-teaser-text { display: block; padding: 14px 18px 18px; }
.video-teaser-text .related-kicker { margin-bottom: 6px; }

/* ---- Clinical spotlight: for a genuinely major medical update within a
   page (e.g. HS biologics) — deliberately more prominent than story-aside
   or differentiator-box, reserved for content that should stand out, not
   used routinely. ---- */
.clinical-spotlight {
	border: 2px solid var(--color-gold);
	background: var(--color-surface);
	border-radius: var(--radius);
	padding: 32px 36px;
	margin: 2.6em 0;
	box-shadow: var(--shadow-soft);
}
.clinical-spotlight .spotlight-eyebrow {
	display: inline-block;
	font-family: var(--font-sans);
	font-size: 0.72rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-espresso);
	background: var(--color-gold);
	padding: 5px 14px;
	border-radius: 999px;
	margin-bottom: 16px;
}
.clinical-spotlight h3 {
	font-family: var(--font-serif);
	font-size: 1.45rem;
	margin: 0 0 0.6em;
	color: var(--color-espresso);
}
.clinical-spotlight ul { margin: 0.8em 0; padding-left: 1.3em; }
.clinical-spotlight li { margin-bottom: 0.6em; }
.clinical-spotlight .spotlight-quote {
	font-family: var(--font-serif);
	font-style: italic;
	border-left: 3px solid var(--color-gold);
	padding-left: 20px;
	margin: 1.4em 0 0.5em;
	color: var(--color-text);
}

/* ---- Comparison tables, for the deep-education pages ---- */
.comparison-table {
	width: 100%;
	border-collapse: collapse;
	margin: 2em 0;
	font-size: 0.95rem;
}
.comparison-table th,
.comparison-table td {
	text-align: left;
	padding: 12px 16px;
	border-bottom: 1px solid var(--color-border);
}
.comparison-table th {
	font-family: var(--font-serif);
	font-style: italic;
	font-weight: 400;
	color: var(--color-rose-deep);
	border-bottom: 2px solid var(--color-border);
}
.comparison-table tr:last-child td { border-bottom: none; }
@media (max-width: 640px) {
	.comparison-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ---- Buttons / CTA ---- */
.cta-block {
	background: var(--color-surface-warm);
	color: var(--color-text);
	border-radius: 28px;
	padding: 56px 48px;
	text-align: center;
	margin: 4.5em 0 2em;
}
.cta-block h2 { color: var(--color-espresso); margin-top: 0; }
.cta-block p { color: var(--color-text-muted); max-width: 480px; margin-left: auto; margin-right: auto; font-family: var(--font-serif); font-style: italic; font-size: 1.1rem; }
.cta-block a.btn-consultation { display: inline-block; margin-top: 16px; }

/* ---- Consultation Request form ---- */
.eva-consultation-form {
	max-width: 620px;
	margin: 2.5em 0;
	background: var(--color-surface);
	border: 1px solid var(--color-border);
	border-radius: 20px;
	padding: 40px;
}
.eva-consultation-form h3 {
	font-family: var(--font-serif);
	color: var(--color-espresso);
	font-size: 1.3rem;
	margin: 1.6em 0 0.8em;
}
.eva-consultation-form h3:first-of-type { margin-top: 0; }
.eva-consultation-field { margin-bottom: 20px; }
.eva-consultation-field label {
	display: block;
	font-family: var(--font-sans);
	font-weight: 600;
	color: var(--color-text);
	margin-bottom: 6px;
	font-size: 0.98rem;
}
.eva-required { color: var(--color-rose-deep); }
.eva-consultation-field input[type="text"],
.eva-consultation-field input[type="tel"],
.eva-consultation-field input[type="email"],
.eva-consultation-field select,
.eva-consultation-field textarea {
	width: 100%;
	box-sizing: border-box;
	padding: 12px 14px;
	font-size: 1rem;
	font-family: var(--font-sans);
	color: var(--color-text);
	background: var(--color-bg);
	border: 1px solid var(--color-border);
	border-radius: 10px;
}
.eva-consultation-field textarea { resize: vertical; }
.eva-consultation-radio-group { display: flex; gap: 24px; }
.eva-consultation-radio-group label { display: flex; align-items: center; gap: 8px; font-weight: 400; margin: 0; }
.eva-consultation-consent { display: flex; align-items: flex-start; }
.eva-consultation-consent label {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	font-size: 0.92rem;
	color: var(--color-text-muted);
}
.eva-consultation-consent input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; }
.eva-consultation-form button.btn-consultation {
	width: 100%;
	border: none;
	cursor: pointer;
	margin-top: 8px;
	font-size: 1rem;
}
.eva-consultation-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.eva-consultation-errors {
	background: rgba(150, 67, 43, 0.08);
	border: 1px solid var(--color-rose-deep);
	border-radius: 10px;
	padding: 14px 18px;
	margin-bottom: 20px;
}
.eva-consultation-errors ul { margin: 0; padding-left: 20px; color: var(--color-rose-deep); }
.eva-consultation-success {
	max-width: 620px;
	background: var(--color-surface-warm);
	border-radius: 20px;
	padding: 40px;
	text-align: center;
}
.eva-consultation-success h3 { font-family: var(--font-serif); color: var(--color-espresso); margin-top: 0; }
.eva-consultation-success p { color: var(--color-text-muted); }

@media (max-width: 640px) {
	.eva-consultation-form,
	.eva-consultation-success { padding: 26px 20px; border-radius: 16px; }
	.eva-consultation-radio-group { flex-direction: column; gap: 10px; }
}

/* ---- Q&A library ---- */
.qa-index-list { list-style: none; padding: 0; max-width: var(--content-width); }
.qa-index-list li { border-bottom: 1px solid var(--color-border); padding: 20px 0; }
.qa-index-list a { font-size: 1.12rem; text-decoration: none; color: var(--color-espresso); }
.qa-index-list a:hover { color: var(--color-rose-deep); }
.qa-filter-bar { display: flex; flex-wrap: wrap; gap: 10px; margin: 1.8em 0 2.2em; }
.qa-filter-bar a {
	background: var(--color-surface);
	border-radius: 999px;
	padding: 8px 18px;
	font-size: 0.86rem;
	text-decoration: none !important;
	color: var(--color-text-muted);
	box-shadow: var(--shadow-gentle);
}
.qa-filter-bar a:hover { color: var(--color-rose-deep); }

/* ---- Forms ---- */
.consultation-form { max-width: var(--content-width); }
.consultation-form label { display: block; margin: 1.3em 0 0.45em; font-weight: 500; font-size: 0.94rem; color: var(--color-espresso); }
.consultation-form input[type=text],
.consultation-form input[type=email],
.consultation-form input[type=tel],
.consultation-form select,
.consultation-form textarea {
	width: 100%;
	padding: 14px 18px;
	border: 1px solid var(--color-border);
	border-radius: 14px;
	font-family: var(--font-sans);
	font-size: 1rem;
	background: var(--color-surface);
}
.consultation-form input:focus, .consultation-form select:focus, .consultation-form textarea:focus {
	outline: 2px solid var(--color-rose);
	outline-offset: 1px;
}
.consultation-form button {
	margin-top: 1.8em;
	background: var(--color-rose);
	color: #FFFAF3;
	border: none;
	padding: 16px 32px;
	border-radius: 999px;
	font-size: 1rem;
	cursor: pointer;
	box-shadow: var(--shadow-gentle);
}
.consultation-form button:hover { background: var(--color-rose-deep); }
.form-note { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 1.6em; font-style: italic; font-family: var(--font-serif); }
.form-success { background: var(--color-surface-warm); border-radius: var(--radius); padding: 26px 30px; margin: 1.5em 0; max-width: var(--content-width); }

/* ---- Footer ---- */
.site-footer { background: var(--color-espresso); color: #D8C4B4; margin-top: 90px; padding: 64px 28px 44px; font-size: 0.93rem; }
.site-footer strong { color: #FBF1E6; font-family: var(--font-serif); font-weight: 460; }
.site-footer a { color: #E4D2C1; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .container { display: flex; flex-wrap: wrap; gap: 48px; justify-content: space-between; }
.site-footer > .container > div { line-height: 2.1; }
.site-footer-legal { margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.12); font-size: 0.82rem; color: #C4AE9B; text-align: center; }

/* Minimal Academy footer — quiet cream band, not the dark marketing footer,
   so lesson pages stay calm and distraction-free. */
.site-footer--academy {
	background: var(--color-surface-warm); color: var(--color-text-muted);
	margin-top: 48px; padding: 22px 28px;
}
.site-footer--academy .site-footer-legal {
	margin: 0; padding: 0; border-top: none; color: var(--color-text-muted); font-size: 0.82rem;
}