/*
Theme Name: Vescent
Theme URI: https://vescent.co
Author: Vescent
Description: Custom block theme for vescent.co. Design tokens live in theme.json. Recurring sections are block patterns so content is editable in the standard WordPress editor.
Version: 0.4.70
Requires at least: 6.4
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: vescent
*/

/* Most styling comes from theme.json. This file holds only the component
   details theme.json cannot express: the navigation, the two button
   variants, and the footer. Each block is labelled so it stays findable. */


/* ---------- NAVIGATION ---------- */

.wp-block-navigation {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 700;
}

.wp-block-navigation a {
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.wp-block-navigation a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Current page gets the pink underline from the design */
.wp-block-navigation .current-menu-item > a {
	border-bottom: 2px solid var(--wp--preset--color--pink);
	padding-bottom: 3px;
}

/* Dropdown panel */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--white);
	border: 0;
	border-radius: 12px;
	box-shadow: 0 8px 28px rgba(42, 42, 42, 0.16);
	padding: 10px 0;
	min-width: 170px;
}

.wp-block-navigation .wp-block-navigation__submenu-container a {
	padding: 10px 20px;
}

.wp-block-navigation .wp-block-navigation__submenu-container a:hover {
	background: var(--wp--preset--color--sky);
	text-decoration: none;
}


/* ---------- BUTTONS ---------- */

/* Butter variant: used in the header, and on tinted bands */
.wp-block-button.is-style-butter > .wp-block-button__link {
	background-color: var(--wp--preset--color--butter);
	color: var(--wp--preset--color--ink);
	padding: 12px 26px;
	border-radius: 8px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
}

.wp-block-button.is-style-butter > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

/* Give every button a smooth colour change on hover, unless the
   visitor has asked their system to reduce motion. */
@media (prefers-reduced-motion: no-preference) {
	.wp-element-button {
		transition: background-color 0.18s ease, color 0.18s ease;
	}
}


/* ---------- FOOTER ---------- */

footer.wp-block-group a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}

footer.wp-block-group a:hover {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Newsletter signup. This is a visual placeholder only.
   It is replaced by the GoHighLevel embed once that code arrives. */
.vescent-newsletter {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-top: 14px;
}

.vescent-newsletter input[type="email"] {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	padding: 13px 16px;
	border: 1px solid rgba(42, 42, 42, 0.25);
	border-radius: 8px;
	background: var(--wp--preset--color--white);
	width: 100%;
}

.vescent-btn-blue {
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	color: var(--wp--preset--color--white);
	background: var(--wp--preset--color--blue);
	border: 0;
	border-radius: 8px;
	padding: 13px 28px;
	align-self: flex-start;
	cursor: pointer;
}


/* ---------- ACCESSIBILITY ---------- */

/* Keyboard users must always be able to see where they are. */
:where(a, button, input, select, textarea):focus-visible {
	outline: 2px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}


/* ---------- HERO BAND ---------- */

.vescent-hero {
	position: relative;
	overflow: hidden;
	margin-block-start: 0;      /* sit flush under the header, no white gap */
	padding: 72px 48px 120px;   /* bottom is oversized to clear the wave */
	--hero-wave-color: var(--wp--preset--color--white); /* match to whatever section follows */
}

/* Line the hero content up with the logo in the header above it. */
.vescent-hero > .wp-block-columns {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
}

/* One decorative Spark, kept well clear of the text and quiet enough
   that it never competes with anything you have to read. */
.vescent-hero::before {
	content: "";
	position: absolute;
	top: -48px;
	right: -70px;
	width: 200px;
	height: 200px;
	background: url('assets/spark/White.png') no-repeat center / contain;
	opacity: 0.32;
	transform: rotate(-12deg);
	pointer-events: none;
	z-index: 0;
}

/* The wave that curves into the next section. */
.vescent-hero::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 70px;
	background: var(--hero-wave-color);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,40 C240,80 480,0 720,25 C960,50 1200,70 1440,30 L1440,70 L0,70 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,40 C240,80 480,0 720,25 C960,50 1200,70 1440,30 L1440,70 L0,70 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 2;
}

.vescent-hero__photo img {
	border-radius: 24px;
	width: 100%;
	height: 400px;
	object-fit: cover;
	display: block;
}

/* Empty photo slot, so the layout still reads while you choose a picture. */
.vescent-hero__photo img:not([src]),
.vescent-hero__photo:not(:has(img)) {
	display: block;
	min-height: 400px;
	border-radius: 24px;
	background: rgba(255,255,255,0.45);
}


/* ---------- EYEBROW LABEL ---------- */

.vescent-eyebrow {
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	margin-bottom: 10px;
}


/* ---------- STAR BULLETS ---------- */
/* The only bullet mark on the site. Star means bullet, spark means decoration. */

.vescent-stars {
	list-style: none;
	padding-left: 0;
	margin: 28px 0 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.vescent-stars li {
	position: relative;
	padding-left: 34px;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.6;
}

.vescent-stars li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 4px;
	width: 18px;
	height: 18px;
	background: url('assets/star-blue.svg') no-repeat center / contain;
}

/* Breathing room between the bullets and the button below them. */
.vescent-stars + .wp-block-buttons { margin-top: 34px; }


/* ---------- MOBILE ---------- */

@media (max-width: 781px) {
	.vescent-hero { padding: 48px 24px 96px; }
	.vescent-hero__photo img { height: 260px; }
	.vescent-hero::before { width: 180px; height: 180px; top: -40px; right: -40px; }
}


/* ---------- LAYOUT FLUSHNESS ---------- */
/* Header, hero and footer are full-width bands. They butt against each
   other with no page background showing between them. */
header.wp-block-group { margin-block-end: 0; }
footer.wp-block-group { margin-block-start: 0; }
header.wp-block-group > .wp-block-group { max-width: 1240px; margin-inline: auto; }


/* ---------- CLOSING BANNER ---------- */
/* Ends every page. Two approved variants: the audience pages carry a
   page-specific headline, every other page uses the tagline. */

.vescent-closing {
	margin-block-start: 0;
	padding: 64px 48px;
	text-align: center;
}

.vescent-closing > * + * { margin-top: 20px; }

.vescent-closing .vescent-tagline {
	font-family: var(--wp--preset--font-family--heading);
	margin-top: 26px;
}

/* Plain links in the band take ink. Buttons are excluded, or the white
   label would turn dark on a dark button and vanish. */
.vescent-closing a:not(.wp-element-button) { color: var(--wp--preset--color--ink); }


/* ---------- QUOTE CARD ---------- */

.vescent-quote {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 52px 36px 30px;
	height: 100%;
}

/* The oversized ghost quote mark. It deliberately overflows the top of
   the card; that is the design, not a mistake. */
.vescent-quote::before {
	content: "\201C";
	position: absolute;
	top: -38px;
	left: 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 190px;
	line-height: 1;
	color: var(--wp--preset--color--pink-light);
	letter-spacing: -9px;
	pointer-events: none;
}

.vescent-quote__text {
	position: relative;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.5;
}

.vescent-quote__who {
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--body);
	margin-top: 14px;
}


/* ---------- MOBILE, closing and quotes ---------- */

@media (max-width: 781px) {
	.vescent-closing { padding: 48px 24px; }
	.vescent-quote { padding: 46px 26px 26px; }
	.vescent-quote::before { font-size: 150px; top: -30px; }
}


/* ---------- HOMEPAGE HERO (video) ---------- */

.vescent-hero-home {
	position: relative;
	overflow: hidden;
	margin-block-start: 0;
	min-height: 560px;
	padding: 140px 24px 150px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	text-align: center;
	background: var(--wp--preset--color--sky);
}

.vescent-hero-home__media,
.vescent-hero-home__still {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: 0;
}

/* The still is the phone fallback. Hidden on desktop, where the video plays. */
.vescent-hero-home__still {
	display: none;
	background: url('/wp-content/uploads/2026/09/Vescent-Home-Photo-3-teen-girls.png') no-repeat center / cover;
}

/* Darkens the footage so white type stays readable over it. */
.vescent-hero-home__scrim {
	position: absolute;
	inset: 0;
	background: rgba(42, 42, 42, 0.38);
	z-index: 1;
}

.vescent-hero-home > .wp-block-heading,
.vescent-hero-home > .wp-block-buttons {
	position: relative;
	z-index: 2;
}

.vescent-hero-home__title {
	color: var(--wp--preset--color--white);
	margin-bottom: 28px;
}

/* The rotating word keeps a blinking caret while it types. */
.vescent-hero-home__title [data-vescent-rotate]::after {
	content: "";
	display: inline-block;
	width: 2px;
	height: 0.78em;
	margin-left: 4px;
	background: currentColor;
	vertical-align: baseline;
	animation: vescent-caret 1s steps(1) infinite;
}

@keyframes vescent-caret { 50% { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
	.vescent-hero-home__title [data-vescent-rotate]::after { animation: none; opacity: 0; }
}

/* Phones: no video at all. A still image instead, so nobody downloads
   six megabytes on a mobile connection. */
@media (max-width: 781px) {
	.vescent-hero-home {
		min-height: 420px;
		padding: 90px 22px 100px;
	}
	.vescent-hero-home__media { display: none; }
	.vescent-hero-home__still { display: block; }
}

/* Same for anyone who has asked their device to reduce motion. */
@media (prefers-reduced-motion: reduce) {
	.vescent-hero-home__media { display: none; }
	.vescent-hero-home__still { display: block; }
}


/* ---------- FULL-BLEED BANDS ---------- */
/* The homepage hero must span the whole window regardless of the
   layout width it is sitting inside. */
.vescent-hero-home {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}


/* The video, still and scrim are absolutely positioned backdrops. WordPress's
   constrained layout otherwise caps their width and centres them, which makes
   the footage sit in a box instead of filling the band. */
.vescent-hero-home > .vescent-hero-home__media,
.vescent-hero-home > .vescent-hero-home__still,
.vescent-hero-home > .vescent-hero-home__scrim {
	max-width: none;
	margin: 0;
}




/* ============================================================
   HOMEPAGE SECTIONS
   Built to match the approved design. Every band runs the full
   width of the window; content inside it is capped and centred.
   ============================================================ */

/* Any band that should span the window edge to edge. */
.vescent-band,
.vescent-split,
.vescent-halves,
.vescent-closing {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	margin-block-start: 0;
	margin-block-end: 0;
}


/* ---------- Sky intro band, with the big Spark ---------- */

.vescent-intro {
	position: relative;
	overflow: hidden;
	padding: 56px 48px 0;
}

/* The large pale-yellow Spark on the left. Decoration only. */
.vescent-intro::before {
	content: "";
	position: absolute;
	top: 76px;
	left: 4%;
	width: 190px;
	height: 190px;
	background: url('assets/spark/LightYellow.png') no-repeat center / contain;
	opacity: 0.45;
	pointer-events: none;
}

.vescent-intro__inner {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	gap: 20px;
	text-align: center;
}


/* ---------- Quote cards, sitting on the same Sky band ---------- */

.vescent-quotes {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 28px;
	max-width: 900px;
	margin: 48px auto 0;
	padding-bottom: 64px;
}

.vescent-quote {
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	padding: 52px 32px 30px;
	margin: 0;
}

/* The oversized ghost quote mark. Overflowing the card is the design. */
.vescent-quote::before {
	content: "\201C";
	position: absolute;
	top: -38px;
	left: 18px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 190px;
	line-height: 1;
	color: var(--wp--preset--color--pink-light);
	letter-spacing: -9px;
	pointer-events: none;
}

.vescent-quote__text {
	position: relative;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 600;
	line-height: 1.5;
}

.vescent-quote__who {
	position: relative;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--body);
	margin-top: 14px;
}


/* ---------- Teen / parent bands ---------- */

.vescent-split {
	display: grid;
	grid-template-columns: 1fr 1fr;
}

.vescent-split__half {
	display: grid;
	grid-template-columns: 1fr 220px;
	gap: 28px;
	align-items: center;
	padding: 44px 56px;
	margin: 0;
}

.vescent-split__copy {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.vescent-split__copy h3 { margin: 0 0 2px; }

.vescent-split__photo { margin: 0; }

.vescent-split__photo img {
	width: 220px;
	height: 180px;
	object-fit: cover;
	border-radius: 14px;
	display: block;
}


/* ---------- How Vescent works ---------- */

.vescent-threeup {
	padding: 72px 48px 76px;
	text-align: center;
}

.vescent-threeup__grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: 48px;
	max-width: 1080px;
	margin: 48px auto 0;
}

.vescent-threeup__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	text-align: center;
}

.vescent-threeup__item .vescent-icon { margin: 0; }

.vescent-threeup__item .vescent-icon img {
	width: 100px;
	height: 100px;
	object-fit: contain;
	display: block;
}

.vescent-threeup__item h3 { margin: 4px 0 0; }
.vescent-threeup__item p { max-width: 340px; margin: 0; }

.vescent-threeup > .vescent-arrow { margin-top: 44px; }


/* ---------- A safe space to grow ---------- */

.vescent-halves {
	display: grid;
	grid-template-columns: 1fr 1fr;
	min-height: 460px;
}

.vescent-halves__photo { margin: 0; height: 100%; }

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

.vescent-halves__copy {
	margin: 0;
	padding: 64px 60px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 18px;
}

.vescent-halves__copy h2 { margin: 0; }
.vescent-halves__copy p { margin: 0; max-width: 46ch; }


/* ---------- Arrow links ---------- */

.vescent-arrow a {
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}

.vescent-arrow a:hover { text-decoration: underline; text-underline-offset: 4px; }


/* ---------- Homepage on phones ---------- */

@media (max-width: 781px) {
	.vescent-intro { padding: 44px 22px 0; }
	.vescent-intro::before { width: 120px; height: 120px; top: 30px; left: -18px; }
	.vescent-quotes { grid-template-columns: 1fr; gap: 20px; margin-top: 36px; padding-bottom: 48px; }
	.vescent-quote { padding: 46px 26px 26px; }
	.vescent-quote::before { font-size: 150px; top: -30px; }

	.vescent-split { grid-template-columns: 1fr; }
	.vescent-split__half { grid-template-columns: 1fr; padding: 36px 24px; gap: 20px; }
	.vescent-split__photo img { width: 100%; height: 200px; }

	.vescent-threeup { padding: 56px 24px 60px; }
	.vescent-threeup__grid { grid-template-columns: 1fr; gap: 40px; margin-top: 36px; }

	.vescent-halves { grid-template-columns: 1fr; min-height: 0; }
	.vescent-halves__photo img { height: 280px; }
	.vescent-halves__copy { padding: 44px 24px; }
}


/* Group blocks used purely as layout wrappers should not add their own
   vertical margins on top of the grid gaps. */
.vescent-intro__inner > *,
.vescent-split__copy > *,
.vescent-threeup__item > *,
.vescent-halves__copy > * { margin-block-start: 0; margin-block-end: 0; }

.vescent-intro__inner { display: flex; flex-direction: column; gap: 20px; }
.vescent-threeup__item > * + * { margin-top: 12px; }
.vescent-halves__copy > * + * { margin-top: 18px; }
.vescent-split__copy > * + * { margin-top: 8px; }


/* ---------- WAVE ON THE HOMEPAGE HERO ---------- */
/* The hero curves into whatever band follows it. On the homepage that
   band is Sky, so the wave is cut out of Sky. */

.vescent-hero-home::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -1px;
	width: 100%;
	height: 70px;
	background: var(--wp--preset--color--sky);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,40 C240,80 480,0 720,25 C960,50 1200,70 1440,30 L1440,70 L0,70 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 70' preserveAspectRatio='none'><path d='M0,40 C240,80 480,0 720,25 C960,50 1200,70 1440,30 L1440,70 L0,70 Z' fill='black'/></svg>") no-repeat center / 100% 100%;
	pointer-events: none;
	z-index: 3;
}

/* Leave room under the headline so the wave never crowds it. */
.vescent-hero-home { padding-bottom: 170px; }

@media (max-width: 781px) {
	.vescent-hero-home { padding-bottom: 130px; }
	.vescent-hero-home::after { height: 44px; }
}


/* ---------- FULL-WIDTH BANDS, ROBUST VERSION ---------- */
/* 100vw includes the scrollbar, which pushes bands a few pixels off and
   leaves a white sliver. Using the content box and negative margins
   avoids that entirely. */

.vescent-band,
.vescent-split,
.vescent-halves,
.vescent-closing,
.vescent-hero-home {
	position: relative;
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw + (var(--scrollbar, 0px) / 2));
	margin-right: calc(50% - 50vw + (var(--scrollbar, 0px) / 2));
}

/* Never let a band cause sideways scrolling. */
html, body { overflow-x: hidden; }


/* ---------- CLOSE THE HAIRLINE GAPS ---------- */
/* WordPress puts a gap between the header part, the page content and the
   footer part. On a site made of colour bands that gap shows as a white line. */

main.wp-block-group {
	margin-block-start: 0;
	margin-block-end: 0;
}

.wp-block-post-content > *:first-child { margin-block-start: 0; }
.wp-block-post-content > *:last-child  { margin-block-end: 0; }


/* ---------- TIGHTEN THE VERTICAL RHYTHM ---------- */
/* The first pass left too much air inside each band. These bring the
   sections in without crowding the type. */

.vescent-intro { padding-top: 48px; }
.vescent-intro__inner { gap: 16px; }
.vescent-quotes {
	margin-top: 36px;
	padding-bottom: 48px;
}
.vescent-quote { padding: 46px 30px 26px; }

.vescent-split__half { padding: 38px 56px; }

.vescent-threeup { padding: 56px 48px 56px; }
.vescent-threeup__grid { margin-top: 32px; gap: 40px; }
.vescent-threeup__item > * + * { margin-top: 8px; }
.vescent-threeup__item .vescent-icon img { width: 86px; height: 86px; }
.vescent-threeup > .vescent-arrow { margin-top: 30px; }

.vescent-halves { min-height: 0; }
.vescent-halves__photo img { min-height: 380px; }
.vescent-halves__copy { padding: 52px 56px; }

.vescent-closing { padding: 52px 48px; }
.vescent-closing > * + * { margin-top: 18px; }

@media (max-width: 781px) {
	.vescent-intro { padding-top: 38px; }
	.vescent-quotes { margin-top: 28px; padding-bottom: 38px; }
	.vescent-split__half { padding: 32px 24px; }
	.vescent-threeup { padding: 44px 24px 46px; }
	.vescent-threeup__grid { margin-top: 28px; gap: 34px; }
	.vescent-halves__photo img { min-height: 240px; }
	.vescent-halves__copy { padding: 40px 24px; }
	.vescent-closing { padding: 42px 24px; }
}


/* WordPress wraps the whole page in .wp-site-blocks and puts a gap between
   its children: header, main, footer. On a site built from colour bands that
   gap is a white line. Remove it at the top level. */
.wp-site-blocks > * {
	margin-block-start: 0;
	margin-block-end: 0;
}

main > .wp-block-post-content {
	margin-block-start: 0;
	margin-block-end: 0;
}




/* ============================================================
   FOR TEENS PAGE
   Section colours and layouts taken from the design file.
   ============================================================ */

/* 1. Purple hero, wave cut from white because white follows it. */
.vescent-hero {
	position: relative;
	overflow: hidden;
	padding: 56px 56px 120px;
	width: auto;
	max-width: none;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	--hero-wave-color: var(--wp--preset--color--white);
}

.vescent-hero > .wp-block-columns {
	position: relative;
	z-index: 1;
	max-width: 1240px;
	margin-inline: auto;
	gap: 56px;
}

.vescent-hero__photo { margin: 0; }
.vescent-hero__photo img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}


/* 2. White band: Your Space, Your Rules beside the quote card. */
.vescent-rules {
	position: relative;
	overflow: hidden;
	padding: 56px 64px;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: center;
}
.vescent-rules__copy h2 { margin: 0 0 22px; }
.vescent-rules > * { margin: 0; }

/* Two pale yellow Sparks behind this band. */
.vescent-rules::before,
.vescent-rules::after {
	content: "";
	position: absolute;
	background: url('assets/spark/LightYellow.png') no-repeat center / contain;
	opacity: 0.5;
	pointer-events: none;
	z-index: 0;
}
.vescent-rules::before { width: 150px; height: 150px; top: -40px; left: -44px; }
.vescent-rules::after  { width: 110px; height: 110px; bottom: -30px; right: 38%; }
.vescent-rules > * { position: relative; z-index: 1; }


/* 3. Blue band: What Vescent Actually Is. */
.vescent-honest {
	position: relative;
	overflow: hidden;
	padding: 56px 64px 64px;
	text-align: center;
}
.vescent-honest::before {
	content: "";
	position: absolute;
	right: -70px;
	top: 120px;
	width: 300px;
	height: 300px;
	background: url('assets/spark/LightBlue.png') no-repeat center / contain;
	opacity: 0.45;
	pointer-events: none;
}
.vescent-honest > * { position: relative; z-index: 1; }
.vescent-honest > .wp-block-heading { margin-bottom: 8px; }

.vescent-honest__cols {
	max-width: 1080px;
	margin: 34px auto 0;
	gap: 28px;
	text-align: left;
}

.vescent-panel {
	border-radius: 18px;
	padding: 28px 30px 26px;
	height: 100%;
}
.vescent-panel h3 { margin: 0 0 16px; }
.vescent-panel .vescent-stars { margin: 0; }

/* The white card that sits below the two panels. */
.vescent-overlap {
	max-width: 820px;
	margin: 30px auto 0;
	border-radius: 18px;
	padding: 26px 36px;
}
.vescent-overlap p { margin: 0; }


/* 4. White band: Your Vescent, bullets beside a photo. */
.vescent-yours { padding: 40px 64px 48px; text-align: center; }
.vescent-yours__grid {
	max-width: 1180px;
	margin: 30px auto 0;
	gap: 56px;
	text-align: left;
}

/* Bullets that carry a bold title on their own line. */
.vescent-stars--titled li { padding-left: 38px; margin-bottom: 4px; }
.vescent-stars--titled li strong {
	display: block;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	margin-bottom: 4px;
}
.vescent-stars--titled li::before { top: 8px; }

.vescent-photo-rounded { margin: 0; }
.vescent-photo-rounded img {
	width: 100%;
	height: 420px;
	object-fit: cover;
	border-radius: 20px;
	display: block;
}


/* 5. Green band: Two Ways to Belong. */
.vescent-belong { padding: 56px 64px 64px; }
.vescent-belong > .wp-block-heading { margin-bottom: 8px; }
.vescent-plans { max-width: 1080px; margin: 32px auto 0; gap: 26px; }

.vescent-plan {
	border-radius: 18px;
	padding: 32px 32px 30px;
	height: 100%;
}
.vescent-plan > * { margin: 0; }
.vescent-plan h3 { margin-bottom: 12px; }
.vescent-plan > p { margin-bottom: 16px; }
.vescent-lead-in { font-weight: 700; margin-bottom: 10px !important; }
.vescent-belong > p:last-child { margin-top: 28px; }


/* 6. Peach band: Meet Your Mentors, photo beside copy. */
.vescent-mentors { padding: 52px 64px; }
.vescent-mentors__grid { max-width: 1180px; margin-inline: auto; gap: 52px; }
.vescent-mentors h2 { margin: 0 0 14px; }
.vescent-mentors p { margin: 0; }


/* 7. White band: the crisis notice, with scattered pale Sparks. */
.vescent-fineprint {
	position: relative;
	overflow: hidden;
	padding: 44px 64px 52px;
}
.vescent-fineprint p {
	position: relative;
	z-index: 1;
	max-width: 760px;
	margin-inline: auto;
}
.vescent-fineprint::before,
.vescent-fineprint::after {
	content: "";
	position: absolute;
	pointer-events: none;
	opacity: 0.5;
}
.vescent-fineprint::before {
	width: 170px; height: 170px; left: -50px; top: 10px;
	background: url('assets/spark/LightBlue.png') no-repeat center / contain;
}
.vescent-fineprint::after {
	width: 190px; height: 190px; right: -46px; top: -20px;
	background: url('assets/spark/LightYellow.png') no-repeat center / contain;
}


/* 8. Butter band: referral, copy beside the button. */
.vescent-refer {
	padding: 44px 64px;
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 48px;
	align-items: center;
}
.vescent-refer > * { margin: 0; }
.vescent-refer h2 { margin: 0 0 8px; }
.vescent-refer p { margin: 0; max-width: 52ch; }


/* ---------- For Teens on phones ---------- */
@media (max-width: 781px) {
	.vescent-hero { padding: 40px 24px 84px; }
	.vescent-hero > .wp-block-columns { gap: 28px; }
	.vescent-hero__photo img { height: 260px; }

	.vescent-rules { grid-template-columns: 1fr; gap: 28px; padding: 40px 24px 44px; }
	.vescent-honest { padding: 44px 24px 48px; }
	.vescent-honest__cols { gap: 18px; margin-top: 26px; }
	.vescent-honest::before { width: 170px; height: 170px; right: -56px; }
	.vescent-overlap { padding: 22px 22px; margin-top: 22px; }

	.vescent-yours { padding: 36px 24px 42px; }
	.vescent-yours__grid { gap: 26px; margin-top: 24px; }
	.vescent-photo-rounded img { height: 260px; }

	.vescent-belong { padding: 44px 24px 48px; }
	.vescent-plans { gap: 18px; margin-top: 26px; }

	.vescent-mentors { padding: 40px 24px 44px; }
	.vescent-mentors__grid { gap: 24px; }

	.vescent-fineprint { padding: 36px 24px 40px; }
	.vescent-fineprint::before, .vescent-fineprint::after { width: 110px; height: 110px; }

	.vescent-refer { grid-template-columns: 1fr; gap: 20px; padding: 38px 24px 42px; }
}


/* ---------- FOR TEENS: corrections to the design's exact values ---------- */

/* Photos crop from 30% down, not the centre, so faces sit in frame. */
.vescent-photo-rounded img,
.vescent-hero__photo img {
	object-position: center 30%;
}

/* Quote card: the design caps it and sets 18.5px, not lead size. */
.vescent-rules .vescent-quote {
	max-width: 520px;
	padding: 52px 36px 30px;
	justify-self: start;
}
.vescent-rules .vescent-quote__text {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.55;
	font-weight: 600;
}
.vescent-rules .vescent-quote__who {
	font-size: var(--wp--preset--font-size--body);
	margin-top: 14px;
}

/* Three Sparks on the white band, at the design's own positions. */
.vescent-rules::before,
.vescent-rules::after { display: none; }

.vescent-rules .vescent-rules__copy::before,
.vescent-rules .vescent-rules__copy::after,
.vescent-rules .vescent-quote::after {
	content: "";
	position: absolute;
	background: url('assets/spark/LightYellow.png') no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
}

/* large, off the right edge */
.vescent-rules .vescent-rules__copy::before {
	top: 52px; right: -120px;
	width: 380px; height: 380px;
	transform: rotate(10deg);
	opacity: 0.45;
}
/* medium, off the left edge */
.vescent-rules .vescent-rules__copy::after {
	bottom: 30px; left: -72px;
	width: 200px; height: 200px;
	transform: rotate(-14deg);
	opacity: 0.45;
}
/* small, bottom right */
.vescent-rules .vescent-quote::after {
	bottom: 20px; right: -46px;
	width: 130px; height: 130px;
	transform: rotate(14deg);
	opacity: 0.38;
}

/* The Sparks sit behind; copy and card sit in front. */
.vescent-rules__copy { position: relative; }
.vescent-rules__copy > * { position: relative; z-index: 1; }
.vescent-rules .vescent-quote { z-index: 1; }

/* No page background should show between any teen-page band. */
.vescent-hero,
.vescent-band,
.vescent-closing {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* ---------- NO GAPS BETWEEN ANY BANDS ---------- */
/* Every direct child of the page content is a full-width band. None of
   them should have vertical margin, or the page shows through as a line. */
.wp-block-post-content > * {
	margin-block-start: 0;
	margin-block-end: 0;
}


/* ---------- QUOTE CARD SIZING ---------- */
/* On the homepage the two quote cards match height on purpose. Beside a
   list of bullets it should size to its own content instead. */
.vescent-rules .vescent-quote {
	height: auto;
	align-self: center;
}

/* Sparks belong to the band, not to the text column, so their offsets
   are measured from the band edges the way the design specifies. */
.vescent-rules .vescent-rules__copy::before,
.vescent-rules .vescent-rules__copy::after { display: none; }

.vescent-rules::before,
.vescent-rules::after {
	content: "";
	display: block;
	position: absolute;
	background: url('assets/spark/LightYellow.png') no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
}
.vescent-rules::before {
	top: 52px; right: -120px;
	width: 380px; height: 380px;
	transform: rotate(10deg);
	opacity: 0.45;
}
.vescent-rules::after {
	bottom: 30px; left: -72px;
	width: 200px; height: 200px;
	transform: rotate(-14deg);
	opacity: 0.45;
}


/* ---------- QUOTE MARK, per the brand asset ---------- */
/* The design file clipped this at the card edge, which rendered as two
   circles. The brand asset shows a large, complete quotation mark sitting
   inside the card, in a lighter tint of the card colour. Following the
   asset, not the design file. */

.vescent-quote {
	padding: 104px 32px 30px;
}

.vescent-quote::before {
	content: "\201C";
	position: absolute;
	top: 10px;
	left: 26px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 150px;
	line-height: 0.82;
	color: var(--wp--preset--color--pink-light);
	letter-spacing: -6px;
	pointer-events: none;
	z-index: 0;
}

.vescent-quote > * { position: relative; z-index: 1; }

.vescent-rules .vescent-quote {
	padding: 104px 32px 30px;
}

@media (max-width: 781px) {
	.vescent-quote,
	.vescent-rules .vescent-quote { padding: 84px 24px 26px; }
	.vescent-quote::before { font-size: 118px; top: 8px; left: 20px; }
}


/* Heavier, larger quote mark to match the brand asset. Bodoni at regular
   weight renders these too thin; the asset uses solid, weighty marks. */
.vescent-quote::before {
	font-size: 210px;
	font-weight: 700;
	line-height: 0.78;
	top: 6px;
	left: 24px;
	letter-spacing: -10px;
}

.vescent-quote,
.vescent-rules .vescent-quote {
	padding: 120px 32px 32px;
}

@media (max-width: 781px) {
	.vescent-quote::before { font-size: 150px; top: 6px; left: 20px; letter-spacing: -7px; }
	.vescent-quote,
	.vescent-rules .vescent-quote { padding: 92px 24px 26px; }
}


/* ============================================================
   SHARED SECTION LAYOUTS used across the inner pages
   ============================================================ */

/* Two-column band: copy one side, photo the other. */
.vescent-split2 { padding: 56px 64px; }
.vescent-split2 > .wp-block-columns {
	max-width: 1180px;
	margin-inline: auto;
	gap: 56px;
	align-items: center;
}
.vescent-split2 h2 { margin: 0 0 16px; }

/* Vimeo embed keeps a 16:9 box. */
.vescent-video {
	position: relative;
	padding-top: 56.25%;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(42,42,42,0.08);
}
.vescent-video iframe {
	position: absolute; inset: 0;
	width: 100%; height: 100%; border: 0;
}

/* A white button, for use on the deep blue bands. */
.wp-block-button.is-style-white > .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--ink);
}
.wp-block-button.is-style-white > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
}

.vescent-join { padding: 56px 64px; }
.vescent-join > .wp-block-columns { max-width: 1180px; margin-inline: auto; gap: 56px; align-items: center; }
.vescent-join h2 { margin: 0 0 14px; }

/* Parents: the consolidated butter box of reasons. */
.vescent-why { padding: 56px 64px 60px; }
.vescent-why > .wp-block-heading { margin-bottom: 10px; }
.vescent-why > p { max-width: 760px; margin-inline: auto; }
.vescent-whybox {
	max-width: 1000px;
	margin: 32px auto 0;
	border-radius: 18px;
	padding: 32px 36px;
}
.vescent-stars--two {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 40px;
}

.vescent-realmentors { padding: 52px 64px; }
.vescent-realmentors > .wp-block-columns { max-width: 1180px; margin-inline: auto; gap: 52px; align-items: center; }
.vescent-realmentors h2 { margin: 0 0 14px; }

.vescent-safety { padding: 48px 64px 52px; }
.vescent-twoup { padding: 52px 64px 56px; }
.vescent-twoup > .wp-block-columns { max-width: 1000px; margin-inline: auto; gap: 56px; }
.vescent-twoup h3 { margin: 0 0 8px; }
.vescent-crisisnote { max-width: 800px; margin: 40px auto 0; opacity: 0.85; }

/* Mentors: the three reasons and the five joining steps. */
.vescent-whymentor { padding: 56px 64px 60px; text-align: center; }
.vescent-whymentor .vescent-threeup__grid { margin-top: 32px; }
.vescent-whymentor .vescent-quote { max-width: 720px; margin: 40px auto 0; }
.vescent-quote--centered { text-align: left; }

.vescent-steps { padding: 56px 64px 60px; }
.vescent-steps__grid {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 18px;
	max-width: 1240px;
	margin: 32px auto 0;
}
.vescent-step {
	border-radius: 16px;
	padding: 24px 22px;
	height: 100%;
}
.vescent-step > * { margin: 0; }
.vescent-step h3 { margin-bottom: 8px; font-size: var(--wp--preset--font-size--lead); }

.vescent-looking { padding: 52px 64px 56px; }




/* ---------- Inner pages on phones ---------- */
@media (max-width: 781px) {
	.vescent-split2,
	.vescent-join,
	.vescent-realmentors { padding: 40px 24px 44px; }
	.vescent-split2 > .wp-block-columns,
	.vescent-join > .wp-block-columns,
	.vescent-realmentors > .wp-block-columns { gap: 26px; }

	.vescent-why { padding: 42px 24px 46px; }
	.vescent-whybox { padding: 26px 22px; margin-top: 26px; }
	.vescent-stars--two { grid-template-columns: 1fr; gap: 12px; }

	.vescent-safety, .vescent-looking, .vescent-crisis { padding: 38px 24px 42px; }
	.vescent-twoup { padding: 40px 24px 44px; }
	.vescent-twoup > .wp-block-columns { gap: 28px; }

	.vescent-whymentor, .vescent-steps { padding: 42px 24px 46px; }
	.vescent-steps__grid { grid-template-columns: 1fr; gap: 14px; margin-top: 26px; }

	.vescent-planshero { padding: 40px 24px 34px; }
	.vescent-planbody { padding: 34px 24px 44px; }
	.vescent-compare { padding: 20px 20px; }
	.vescent-compare .wp-block-columns { flex-wrap: wrap !important; }
	.vescent-whyrow { grid-template-columns: 1fr 1fr; gap: 20px; }
}

/* Video box shows its poster frame until Vimeo loads. */
.vescent-video { background-size: cover; background-position: center; }

.vescent-corner { padding: 56px 64px 60px; }
.vescent-measure-wide { max-width: 860px; margin-inline: auto; }
.vescent-measure-wide h2 { margin: 0 0 16px; }
@media (max-width:781px){ .vescent-corner { padding: 42px 24px 46px; } }

/* Two cards sitting inside a band (Parents: questions / teen curious). */
.vescent-twocards { max-width: 1000px; margin: 34px auto 0; gap: 24px; }
.vescent-card2 { border-radius: 18px; padding: 28px 30px; height: 100%; }
.vescent-card2 > * { margin: 0; }
.vescent-card2 h3 { margin-bottom: 8px; }
.vescent-card2 p + p { margin-top: 10px; }
.vescent-realmentors .vescent-quote + .vescent-quote { margin-top: 20px; }
@media (max-width:781px){ .vescent-twocards { gap: 16px; margin-top: 26px; } .vescent-card2 { padding: 22px 22px; } }


/* ---------- MENTOR PAGE CORRECTIONS ---------- */

/* Hero wave takes the colour of the band beneath it. */
.vescent-hero--wave-blue { --hero-wave-color: var(--wp--preset--color--blue); }

/* The three reasons range left, as designed, not centred. */
.vescent-whymentor { text-align: left; }
.vescent-whymentor > .wp-block-heading { text-align: center; }
.vescent-whymentor .vescent-threeup__item {
	align-items: flex-start;
	text-align: left;
}
.vescent-whymentor .vescent-threeup__item p { max-width: none; }

/* The mentor quote spans most of the band. */
.vescent-whymentor .vescent-quote {
	max-width: 1000px;
	margin: 44px auto 0;
}

/* A pale Spark bottom left of the blue band. */
.vescent-whymentor { position: relative; overflow: hidden; }
.vescent-whymentor::before {
	content: "";
	position: absolute;
	left: -60px; bottom: 40px;
	width: 220px; height: 220px;
	background: url('assets/spark/LightBlue.png') no-repeat center / contain;
	opacity: 0.4;
	pointer-events: none;
	z-index: 0;
}
.vescent-whymentor > * { position: relative; z-index: 1; }

/* Numbered joining steps. Wider cards so the text stops wrapping badly. */
.vescent-steps__grid { gap: 20px; max-width: 1240px; }
.vescent-step { padding: 26px 24px 24px; }
.vescent-stepnum {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--panel);
	line-height: 1;
	margin: 0 0 6px !important;
}
.vescent-step:nth-child(1) .vescent-stepnum { color: var(--wp--preset--color--blue); }
.vescent-step:nth-child(2) .vescent-stepnum { color: var(--wp--preset--color--mauve); }
.vescent-step:nth-child(3) .vescent-stepnum { color: var(--wp--preset--color--moss); }
.vescent-step:nth-child(4) .vescent-stepnum { color: var(--wp--preset--color--blue); }
.vescent-step:nth-child(5) .vescent-stepnum { color: var(--wp--preset--color--mauve); }
.vescent-step h3 { font-size: var(--wp--preset--font-size--tagline); margin-bottom: 8px; }

/* Pale green Spark beside Who We're Looking For. */
.vescent-looking { position: relative; overflow: hidden; }
.vescent-looking::before {
	content: "";
	position: absolute;
	left: -70px; top: 10px;
	width: 220px; height: 220px;
	background: url('assets/spark/LightGreen.png') no-repeat center / contain;
	opacity: 0.5;
	pointer-events: none;
}
.vescent-looking > * { position: relative; z-index: 1; }

/* Photo inside a card (Parents: Is Your Teen Curious). */
.vescent-card2__photo { margin: 0 0 16px !important; }
.vescent-card2__photo img {
	width: 100%;
	height: 170px;
	object-fit: cover;
	object-position: center 30%;
	border-radius: 12px;
	display: block;
}

@media (max-width: 781px) {
	.vescent-stepnum { font-size: var(--wp--preset--font-size--display-sm); }
	.vescent-whymentor::before, .vescent-looking::before { width: 130px; height: 130px; }
}


/* ============================================================
   ROUND OF CORRECTIONS
   ============================================================ */

/* 2. Why Mentor: the three columns align at the top, not centred. */
.vescent-whymentor .vescent-threeup__grid { align-items: start; }
.vescent-whymentor .vescent-threeup__item { justify-content: flex-start; }

/* 3. The mentor quote card is smaller than I had it. */
.vescent-whymentor .vescent-quote {
	max-width: 860px;
	margin: 36px auto 0;
	padding: 96px 30px 26px;
}
.vescent-whymentor .vescent-quote::before { font-size: 150px; top: 10px; left: 22px; }
.vescent-whymentor .vescent-quote__text { font-size: var(--wp--preset--font-size--body); }

/* 4. Parents: the two cards are full-height halves, not rounded cards. */
.vescent-twocards {
	max-width: none;
	margin: 40px 0 0;
	gap: 0;
	width: 100vw;
	margin-left: calc(50% - 50vw);
}
.vescent-twocards .wp-block-column { padding: 0; }
.vescent-card2 {
	border-radius: 0;
	padding: 56px 64px;
	height: 100%;
}
.vescent-card2 h3 { font-size: var(--wp--preset--font-size--panel); margin-bottom: 14px; }
.vescent-card2 p { font-size: var(--wp--preset--font-size--body); }
.vescent-card2__photo img { height: 240px; border-radius: 16px; }

/* 5. Crisis / fine-print bands get the full scatter of pale Sparks. */
.vescent-fineprint { padding: 56px 64px 60px; }
.vescent-fineprint p { font-size: var(--wp--preset--font-size--lead); line-height: 1.7; }

.vescent-fineprint::before,
.vescent-fineprint::after,
.vescent-fineprint p::before,
.vescent-fineprint p::after {
	content: "";
	position: absolute;
	pointer-events: none;
	z-index: 0;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
}
.vescent-fineprint::before {
	width: 200px; height: 200px; left: -56px; top: 6px; opacity: 0.55;
	background-image: url('assets/spark/LightBlue.png');
}
.vescent-fineprint::after {
	width: 230px; height: 230px; right: -50px; top: -16px; opacity: 0.5;
	background-image: url('assets/spark/LightYellow.png');
}
.vescent-fineprint p::before {
	width: 110px; height: 110px; left: 22%; bottom: -34px; opacity: 0.5;
	background-image: url('assets/spark/Peach.png');
}
.vescent-fineprint p::after {
	width: 120px; height: 120px; right: 26%; top: -30px; opacity: 0.5;
	background-image: url('assets/spark/LightBlue.png');
}

@media (max-width: 781px) {
	.vescent-card2 { padding: 36px 24px; }
	.vescent-card2 h3 { font-size: var(--wp--preset--font-size--quote); }
	.vescent-fineprint { padding: 44px 24px 48px; }
	.vescent-fineprint p::before, .vescent-fineprint p::after { display: none; }
}


/* ---------- HEADER TAKES THE PAGE'S HERO COLOUR ---------- */
/* The header sits inside a template-part wrapper, and WordPress marks its
   preset background !important, so both the selector and the priority have
   to match that. */

body:has(.vescent-hero.has-purple-background-color) .wp-block-template-part > header.wp-block-group,
body:has(.vescent-hero-home) .wp-block-template-part > header.wp-block-group.x-none { background-color: var(--wp--preset--color--purple) !important; }

body:has(.vescent-hero.has-green-background-color) .wp-block-template-part > header.wp-block-group { background-color: var(--wp--preset--color--green) !important; }
body:has(.vescent-hero.has-peach-background-color) .wp-block-template-part > header.wp-block-group { background-color: var(--wp--preset--color--peach) !important; }
body:has(.vescent-hero.has-butter-background-color) .wp-block-template-part > header.wp-block-group { background-color: var(--wp--preset--color--butter) !important; }


/* ============================================================
   SPARKS
   ::after on a hero is always the wave. Sparks use ::before and
   the inner columns wrapper, so the two never collide.
   ============================================================ */

.vescent-hero, .vescent-band, .vescent-closing { position: relative; overflow: hidden; }
.vescent-hero > *, .vescent-band > * { position: relative; z-index: 1; }

.vescent-hero::before,
.vescent-hero > .wp-block-columns::before,
.vescent-why::before, .vescent-why::after,
.vescent-looking::before, .vescent-looking::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

/* How It Works: one, top right of the hero */
body:has(.vescent-video) .vescent-hero::before {
	width: 320px; height: 320px; top: 38px; right: -126px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.5; transform: rotate(12deg);
}

/* Mentors: two in the hero */
.vescent-hero.has-green-background-color::before {
	width: 270px; height: 270px; top: 34px; right: -118px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.45; transform: rotate(12deg);
}
.vescent-hero.has-green-background-color > .wp-block-columns::before {
	width: 150px; height: 150px; bottom: -40px; left: -100px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.45; transform: rotate(-18deg);
}

/* Mentors: two beside Who We're Looking For */
.vescent-looking::before {
	width: 150px; height: 150px; top: 22px; left: -54px;
	background-image: url('assets/spark/LightGreen.png');
	opacity: 0.45; transform: rotate(-12deg);
}
.vescent-looking::after {
	width: 140px; height: 140px; bottom: 28px; right: -50px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.45; transform: rotate(22deg);
}

/* Parents: three on Why Parents Choose */
.vescent-why::before {
	width: 300px; height: 300px; top: 36px; left: -108px;
	background-image: url('assets/spark/White.png');
	opacity: 0.5; transform: rotate(-12deg);
}
.vescent-why::after {
	width: 340px; height: 340px; bottom: 49px; right: -122px;
	background-image: url('assets/spark/White.png');
	opacity: 0.5; transform: rotate(16deg);
}
.vescent-whybox { position: relative; }
.vescent-whybox::before {
	content: "";
	position: absolute;
	width: 88px; height: 88px; top: -80px; left: 60px;
	background: url('assets/spark/White.png') no-repeat center / contain;
	opacity: 0.45; transform: rotate(14deg);
	pointer-events: none; z-index: 0;
}
.vescent-whybox > * { position: relative; z-index: 1; }

/* Teens: the blue band spark */
.vescent-honest::before {
	width: 330px; height: 330px; right: -110px; top: 34px;
	opacity: 0.55; transform: none;
}

/* Both audience pages: four sparks of varied size on the two-panel band */
.vescent-card2 { position: relative; overflow: hidden; }
.vescent-card2::before, .vescent-card2::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none; z-index: 0;
}
.vescent-card2 > * { position: relative; z-index: 1; }

.vescent-twocards .wp-block-column:first-child .vescent-card2::before {
	width: 120px; height: 120px; top: 19px; left: -44px;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.4; transform: rotate(-12deg);
}
.vescent-twocards .wp-block-column:first-child .vescent-card2::after {
	width: 54px; height: 54px; bottom: 26px; left: 28%;
	background-image: url('assets/spark/Peach.png');
	opacity: 0.4; transform: rotate(16deg);
}
.vescent-twocards .wp-block-column:last-child .vescent-card2::before {
	width: 74px; height: 74px; top: 34px; left: 6%;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.45; transform: rotate(-20deg);
}
.vescent-twocards .wp-block-column:last-child .vescent-card2::after {
	width: 130px; height: 130px; bottom: 20px; right: -46px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.38; transform: rotate(14deg);
}


/* ---------- TWO-PANEL BAND TYPE ---------- */
.vescent-card2 h3 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--panel);
	line-height: 1.15;
	margin: 0 0 14px;
}
.vescent-card2 p {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
}
.vescent-card2 .vescent-arrow,
.vescent-card2 .vescent-arrow a {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
}


/* ---------- HERO HEADINGS ON SMALL SCREENS ---------- */
@media (max-width: 640px) {
	.vescent-hero h1,
	.vescent-hero-home h1 { font-size: var(--wp--preset--font-size--heading-sm); }
	.vescent-card2 h3 { font-size: var(--wp--preset--font-size--quote); }
}


/* Panel headings size from the theme, not a preset class. */
.vescent-card2 h3,
.vescent-panel-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--panel);
	line-height: 1.15;
	margin: 0 0 14px;
}

/* Make the two smaller sparks on that band actually read. */
.vescent-twocards .wp-block-column:first-child .vescent-card2::after { opacity: 0.55; }
.vescent-twocards .wp-block-column:last-child .vescent-card2::before { opacity: 0.55; }

@media (max-width: 640px) {
	.vescent-card2 h3, .vescent-panel-title { font-size: var(--wp--preset--font-size--quote); }
}


/* ---------- ABOUT US ---------- */
.vescent-hero--short { padding: 56px 64px 90px; text-align: center; }
.vescent-hero--short .vescent-measure > * + * { margin-top: 12px; }

.vescent-values { padding: 56px 64px 64px; text-align: center; }
.vescent-values .vescent-threeup__grid { margin-top: 36px; }
.vescent-value-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400; font-size: var(--wp--preset--font-size--card-title); line-height: 1.25; margin: 6px 0 0;
}

.vescent-founders { padding: 56px 64px 64px; }
.vescent-founder-cols { max-width: 1080px; margin: 36px auto 0; gap: 26px; }
.vescent-founder { border-radius: 18px; padding: 32px 32px 30px; height: 100%; }
.vescent-founder > * { margin: 0; }
.vescent-founder__photo { margin: 0 0 16px !important; }
.vescent-founder__photo img {
	width: 96px; height: 96px; object-fit: cover; border-radius: 50%; display: block;
}
.vescent-founder-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400; font-size: var(--wp--preset--font-size--card-title); line-height: 1.25; margin: 0 0 12px;
}

.vescent-privacy { padding: 52px 64px 56px; }
.vescent-privacy > .wp-block-columns { max-width: 1080px; margin-inline: auto; gap: 44px; align-items: center; }
.vescent-privacy h2 { margin: 0 0 14px; }
.vescent-lockicon { margin: 0; }
/* About Us sparks, per the design */
@media (max-width: 781px) {
	.vescent-hero--short { padding: 40px 24px 64px; }
	.vescent-values, .vescent-founders, .vescent-privacy { padding: 42px 24px 46px; }
	.vescent-founder-cols { gap: 18px; margin-top: 26px; }
	.vescent-privacy > .wp-block-columns { gap: 24px; }
	}


/* ============================================================
   PLANS
   ============================================================ */

.vescent-plansbody { padding: 56px 64px 72px; }
.vescent-plansbody > .wp-block-heading { margin-bottom: 32px; }

/* Comparison table */
.vescent-compare { max-width: 1080px; margin: 0 auto 48px; }
.vescent-compare__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	border: 1px solid rgba(42,42,42,0.14);
	border-radius: 18px;
	overflow: hidden;
	font-family: var(--wp--preset--font-family--body);
}
.vescent-compare__table th,
.vescent-compare__table td {
	padding: 18px 22px;
	text-align: left;
	vertical-align: top;
	font-size: var(--wp--preset--font-size--small);
	border-bottom: 1px solid rgba(42,42,42,0.12);
}
.vescent-compare__table tbody tr:last-child th,
.vescent-compare__table tbody tr:last-child td { border-bottom: 0; }
.vescent-compare__table thead th {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--card-title);
	text-align: center;
}
.vescent-compare__table thead .c-blank  { background: var(--wp--preset--color--cream); }
.vescent-compare__table thead .c-spark  { background: var(--wp--preset--color--green); }
.vescent-compare__table thead .c-anchor { background: var(--wp--preset--color--purple); }
.vescent-compare__table tbody th { font-weight: 700; width: 18%; background: var(--wp--preset--color--cream); }

/* The two coloured plan panels */
.vescent-planpanels { max-width: 1240px; margin-inline: auto; gap: 0; }
.vescent-planpanels .wp-block-column { padding: 0; }
.vescent-planpanel {
	padding: 40px 40px 44px;
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 14px;
}
.vescent-planpanel > * { margin: 0; }
.vescent-plan-name {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400; font-size: var(--wp--preset--font-size--panel); line-height: 1.1; margin: 0;
}
.vescent-plan-sub {
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title); line-height: 1.2; margin-top: -6px !important;
}
.vescent-price {
	font-weight: 700; font-size: var(--wp--preset--font-size--card-title); line-height: 1.2;
	font-family: var(--wp--preset--font-family--body);
}
.vescent-price span { font-weight: 400; font-size: var(--wp--preset--font-size--fine); }
.vescent-planpanel .wp-block-buttons { margin-top: auto; padding-top: 10px; }
.vescent-planpanel .wp-block-button__link { width: 100%; text-align: center; }

/* Why Families Choose Vescent, two columns of star bullets */
.vescent-whyfam { padding: 64px 64px; }
.vescent-whyfam > .wp-block-heading { max-width: 1080px; margin: 0 auto 26px; }
.vescent-whyfam .vescent-stars {
	max-width: 1080px;
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px 48px;
}

/* Purple crisis band with two white cards */
.vescent-crisis { padding: 64px 48px 60px; }
.vescent-crisiscards { max-width: 1080px; margin: 34px auto 0; gap: 24px; }
.vescent-crisiscard { border-radius: 16px; padding: 24px 40px; height: 100%; }
.vescent-crisiscard > * { margin: 0; }
.vescent-crisiscard p + p { margin-top: 10px; }

@media (max-width: 781px) {
	.vescent-plansbody { padding: 40px 24px 48px; }
	.vescent-compare { margin-bottom: 32px; }
	.vescent-compare__table { display: block; overflow-x: auto; }
	.vescent-planpanels { flex-wrap: wrap !important; }
	.vescent-planpanel { padding: 30px 24px 32px; }
	.vescent-plan-name { font-size: var(--wp--preset--font-size--display-sm); }
	.vescent-whyfam { padding: 44px 24px; }
	.vescent-whyfam .vescent-stars { grid-template-columns: 1fr; gap: 12px; }
	.vescent-crisis { padding: 44px 24px 46px; }
	.vescent-crisiscards { gap: 16px; }
	.vescent-crisiscard { padding: 22px 24px; }
}


/* ---------- ABOUT US, corrected layout ---------- */
.vescent-abouthero { max-width: 1240px; margin-inline: auto; gap: 56px; }
.vescent-abouthero .wp-block-column > * + * { margin-top: 22px; }
.vescent-ctarow { gap: 14px; align-items: center; margin-top: 4px; }
.vescent-ctarow > * { margin: 0; }
.vescent-underlink a {
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 5px;
	color: var(--wp--preset--color--ink);
}
.vescent-ourwhy { padding: 76px 64px 88px; }
.vescent-ourwhy > .wp-block-columns { max-width: 1140px; margin-inline: auto; gap: 64px; align-items: center; }
.vescent-ourwhy h2 { margin: 0 0 20px; }
.vescent-ourwhy .wp-block-column > * + * { margin-top: 20px; }
.vescent-pullquote {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	line-height: 1.3;
}
.vescent-ourwhy .vescent-photo-rounded img { height: 400px; }

@media (max-width: 781px) {
	.vescent-abouthero { gap: 28px; }
	.vescent-ourwhy { padding: 44px 24px 48px; }
	.vescent-ourwhy > .wp-block-columns { gap: 26px; }
	.vescent-ourwhy .vescent-photo-rounded img { height: 260px; }
}


/* ---------- ABOUT US: sparks where the design puts them ---------- */

/* Our Why carries three. */
.vescent-ourwhy { position: relative; overflow: hidden; }
.vescent-ourwhy > * { position: relative; z-index: 1; }
.vescent-ourwhy::before,
.vescent-ourwhy::after,
.vescent-ourwhy > .wp-block-columns::before {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}
.vescent-ourwhy::before {
	width: 250px; height: 250px; top: 32px; left: -104px;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.5; transform: rotate(-12deg);
}
.vescent-ourwhy::after {
	width: 340px; height: 340px; bottom: 44px; right: -122px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.45; transform: rotate(14deg);
}
.vescent-ourwhy > .wp-block-columns::before {
	width: 92px; height: 92px; top: -30px; right: 8%;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.55; transform: rotate(-18deg);
}

/* Meet the Founders carries two large white ones. */
.vescent-founders { position: relative; overflow: hidden; }
.vescent-founders > * { position: relative; z-index: 1; }
.vescent-founders::before,
.vescent-founders::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	background-image: url('assets/spark/White.png');
	opacity: 0.55;
	pointer-events: none;
	z-index: 0;
}
.vescent-founders::before {
	width: 320px; height: 320px; bottom: 42px; left: -115px;
	transform: rotate(-14deg);
}
.vescent-founders::after {
	width: 200px; height: 200px; top: 44px; right: -60px;
	transform: rotate(16deg);
}


/* ---------- ABOUT US: the privacy photo fills its column ---------- */
.vescent-privacy > .wp-block-columns { gap: 56px; max-width: 1140px; }
.vescent-lockicon { margin: 0; }
.vescent-lockicon img {
	width: 100%;
	max-width: none;
	height: 300px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--container, 24px);
	display: block;
}

@media (max-width: 781px) {
	.vescent-ourwhy::before, .vescent-ourwhy::after,
	.vescent-founders::before, .vescent-founders::after { width: 150px; height: 150px; }
	.vescent-ourwhy > .wp-block-columns::before { display: none; }
	.vescent-lockicon img { height: 210px; }
}


/* ============================================================
   PARTNERS
   ============================================================ */

.vescent-whypartner { padding: 72px 64px; }
.vescent-whypartner > .wp-block-columns { max-width: 1180px; margin-inline: auto; gap: 56px; }
.vescent-whypartner h2 { margin: 0 0 18px; }

.vescent-safeguards { display: flex; flex-direction: column; gap: 14px; }
.vescent-safeguard { border-radius: var(--wp--custom--radius--soft, 14px); padding: 26px 30px; }
.vescent-safeguard > * { margin: 0; }
.vescent-safeguard .vescent-lead-in { margin-bottom: 6px !important; }

.vescent-findfit { padding: 20px 64px 56px; text-align: center; }
.vescent-findfit h2 { margin-bottom: 18px; }
.vescent-pills {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}
.vescent-pills a {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid rgba(42,42,42,0.2);
	border-radius: var(--wp--custom--radius--pill, 999px);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 700;
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.vescent-pills a:hover {
	background: var(--wp--preset--color--sky);
	text-decoration: none;
}

.vescent-audience { padding: 64px 64px 68px; scroll-margin-top: 90px; }
.vescent-audience .vescent-measure-wide { max-width: 860px; }
.vescent-audience h2 { margin: 6px 0 14px; }
.vescent-audience p { margin: 0 0 24px; }
.vescent-audience .vescent-eyebrow { scroll-margin-top: 100px; }

.vescent-notsure { padding: 72px 64px; }

/* Sparks, per the design: two on the hero, two on the closing band. */
.vescent-hero.has-sky-background-color:has(.vescent-pills ~ *)::before { content: none; }
.vescent-notsure { position: relative; overflow: hidden; }
.vescent-notsure > * { position: relative; z-index: 1; }
.vescent-notsure::before,
.vescent-notsure::after {
	content: "";
	position: absolute;
	background: url('assets/spark/White.png') no-repeat center / contain;
	opacity: 0.45;
	pointer-events: none;
	z-index: 0;
}
.vescent-notsure::before { width: 280px; height: 280px; top: 34px; left: -101px; transform: rotate(-12deg); }
.vescent-notsure::after  { width: 280px; height: 280px; bottom: 34px; right: -100px; transform: rotate(14deg); }

@media (max-width: 781px) {
	.vescent-whypartner { padding: 44px 24px 48px; }
	.vescent-whypartner > .wp-block-columns { gap: 26px; }
	.vescent-findfit { padding: 16px 24px 40px; }
	.vescent-pills a { padding: 8px 16px; }
	.vescent-audience { padding: 44px 24px 48px; }
	.vescent-notsure { padding: 48px 24px; }
	.vescent-notsure::before, .vescent-notsure::after { width: 150px; height: 150px; }
}




/* ============================================================
   FAQ  — values taken from the design file
   ============================================================ */

.vescent-hero--center { padding: 64px 48px 110px; text-align: center; }
.vescent-hero--center .vescent-measure > * + * { margin-top: 10px; }

.vescent-faqbody { padding: 64px 64px 88px; }

.vescent-faq {
	display: grid;
	grid-template-columns: 236px 1fr;
	gap: 72px;
	max-width: 1200px;
	margin-inline: auto;
	align-items: start;
	box-sizing: border-box;
}

/* Sticky jump navigation, with the design's left rule. */
.vescent-faq__nav {
	position: sticky;
	top: 32px;
	display: flex;
	flex-direction: column;
	gap: 14px;
	border-left: 2px solid rgba(42,42,42,0.12);
	padding-left: 22px;
}
.vescent-faq__navtitle {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--nav);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	/* Was black at 60% opacity, which renders as grey. */
	color: var(--wp--preset--color--blue);
	margin: 0 0 2px;
}
.vescent-faq__nav a {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	text-decoration: none;
	color: var(--wp--preset--color--ink);
}
.vescent-faq__nav a:hover { text-decoration: underline; text-underline-offset: 4px; }

.vescent-faq__cats { display: flex; flex-direction: column; gap: 24px; }

.vescent-faq__cat {
	display: flex;
	flex-direction: column;
	gap: 6px;
	border-radius: var(--wp--custom--radius--band, 22px);
	padding: 38px 42px 30px;
	scroll-margin-top: 24px;
}
.vescent-faq__cat--sky      { background: var(--wp--preset--color--sky); }
.vescent-faq__cat--green    { background: var(--wp--preset--color--green); }
.vescent-faq__cat--butter   { background: var(--wp--preset--color--butter); }
.vescent-faq__cat--peach    { background: var(--wp--preset--color--peach); }
.vescent-faq__cat--lavender { background: var(--wp--preset--color--lavender); }

.vescent-faq__cattitle {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1.1;
	margin: 0 0 10px;
}

.vescent-faq__item { border-top: 1px solid rgba(42,42,42,0.18); }
.vescent-faq__cat .vescent-faq__item:last-child { border-bottom: 1px solid rgba(42,42,42,0.18); }

/* The question is body type in bold, not the heading face. */
.vescent-faq__q {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding: 22px 0;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--wp--preset--font-family--body);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.4;
	color: var(--wp--preset--color--ink);
}

.vescent-faq__sign {
	flex: none;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--quote);
	line-height: 0.7;
	color: var(--wp--preset--color--blue);
}
.vescent-faq__sign::before { content: "+"; }
.vescent-faq__q[aria-expanded="true"] .vescent-faq__sign::before { content: "\2212"; }

.vescent-faq__a {
	padding: 0 0 26px;
	max-width: 740px;
	/* Set the size on the answer, not just its paragraphs, so lists and
	   anything else added later match instead of falling back to body size.
	   The design file sets FAQ answers at 17.5px, smaller than body copy
	   everywhere else on the site. We use body size here on purpose so the
	   FAQ does not read as a different, smaller page. */
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
}
.vescent-faq__a p { margin: 0; }
.vescent-faq__a p + p { margin-top: 14px; }
.vescent-faq__a .vescent-stars { margin: 14px 0; }

/* Bullets match the answer text around them. */
.vescent-faq__a .vescent-stars li {
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.7;
	padding-left: 34px;
}
.vescent-faq__a .vescent-stars li::before {
	width: 18px;
	height: 18px;
	top: 6px;
}

@media (max-width: 781px) {
	.vescent-hero--center { padding: 44px 24px 80px; }
	.vescent-faqbody { padding: 44px 24px 56px; }
	.vescent-faq { grid-template-columns: 1fr; gap: 28px; }
	.vescent-faq__nav {
		position: static;
		flex-direction: row;
		flex-wrap: wrap;
		gap: 10px 16px;
		border-left: 0;
		padding-left: 0;
	}
	.vescent-faq__navtitle { width: 100%; margin: 0; }
	.vescent-faq__cat { padding: 28px 24px 22px; }
}


/* ---------- FAQ SPARKS ---------- */
/* Two on the hero from the design, plus four in the body margins to fill
   the space either side of the column. All sit behind the content and
   well clear of anything you have to read. */

.vescent-hero--center { position: relative; overflow: hidden; }
.vescent-hero--center > * { position: relative; z-index: 1; }
.vescent-hero--center::before,
.vescent-hero--center::after {
	content: "";
	position: absolute;
	background: url('assets/spark/White.png') no-repeat center / contain;
	pointer-events: none;
	z-index: 0;
}
.vescent-hero--center::before {
	width: 190px; height: 190px; top: 26px; right: -70px;
	opacity: 0.5; transform: rotate(12deg);
}
.vescent-hero--center::after {
	display: none;   /* left spark removed: it clipped to fragments */
}

.vescent-faqbody { position: relative; overflow: hidden; }
.vescent-faqbody > * { position: relative; z-index: 1; }

.vescent-faqbody::before,
.vescent-faqbody::after,
.vescent-faq__cats::before,
.vescent-faq__cats::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

/* large, low left */
.vescent-faqbody::before {
	width: 300px; height: 300px; bottom: 90px; left: -110px;
	background-image: url('assets/spark/LightYellow.png');
	opacity: 0.45; transform: rotate(-14deg);
}
/* large, high right */
.vescent-faqbody::after {
	width: 240px; height: 240px; top: 120px; right: -90px;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.4; transform: rotate(16deg);
}
/* small peach, tucked left of the bands */
.vescent-faq__cats::before {
	width: 340px; height: 340px; top: 34%; left: -190px;
	background-image: url('assets/spark/Peach.png');
	opacity: 0.55; transform: rotate(18deg);
}
/* medium green, right edge lower down */
.vescent-faq__cats::after {
	width: 280px; height: 280px; bottom: 6%; right: -150px;
	background-image: url('assets/spark/LightGreen.png');
	opacity: 0.5; transform: rotate(-10deg);
}
.vescent-faq__cats { position: relative; }
.vescent-faq__cat { position: relative; z-index: 1; }

@media (max-width: 781px) {
	.vescent-hero--center::before { width: 120px; height: 120px; }
	.vescent-faqbody::before, .vescent-faqbody::after { width: 150px; height: 150px; }
	.vescent-faq__cats::before, .vescent-faq__cats::after { display: none; }
}


/* ============================================================
   CONTACT US
   ============================================================ */

.vescent-contactbody { padding: 64px 64px 80px; position: relative; overflow: hidden; }
.vescent-contactbody > * { position: relative; z-index: 1; }
.vescent-contactgrid { max-width: 1180px; margin-inline: auto; gap: 56px; align-items: start; }

.vescent-contactside { position: sticky; top: 32px; display: flex; flex-direction: column; gap: 16px; }
.vescent-contactside > * { margin: 0; }
.vescent-side-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1.25;
	margin: 0;
}
.vescent-contactemail a {
	font-weight: 700;
	font-size: var(--wp--preset--font-size--tagline);
	text-decoration: underline;
	text-underline-offset: 4px;
	color: var(--wp--preset--color--ink);
}

.vescent-quicklinks { border-radius: var(--wp--custom--radius--soft, 14px); padding: 24px 28px; margin-top: 8px; }
.vescent-quicklinks > * { margin: 0; }
.vescent-quicklinks .vescent-arrow { margin-top: 10px; line-height: 2; }

.vescent-crisisbox { border-radius: var(--wp--custom--radius--note, 12px); padding: 18px 22px; }
.vescent-crisisbox > * { margin: 0; }
.vescent-crisisbox p + p { margin-top: 6px; }

/* The slot the GoHighLevel embed drops into. */
.vescent-formslot {
	border: 2px dashed rgba(42,42,42,0.28);
	border-radius: var(--wp--custom--radius--card, 18px);
	padding: 22px 24px 28px;
}
.vescent-formslot__note {
	margin: 0 0 20px;
	font-size: var(--wp--preset--font-size--fine);
	line-height: 1.6;
	color: var(--wp--preset--color--muted);
}
.vescent-formslot__note code {
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 0.92em;
	background: var(--wp--preset--color--warm-grey);
	padding: 1px 5px;
	border-radius: 4px;
}

/* Visual mockup of the form, so the page reads as designed until the
   real embed replaces it. Nothing here submits. */
.vescent-formmock { display: flex; flex-direction: column; gap: 14px; }
.vescent-formmock__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--card-title);
	margin: 0;
}
.vescent-formmock__hint {
	margin: 0;
	font-size: var(--wp--preset--font-size--fine);
	color: var(--wp--preset--color--muted);
}
.vescent-formmock__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vescent-formmock label {
	display: flex;
	flex-direction: column;
	gap: 6px;
	font-size: var(--wp--preset--font-size--nav);
	font-weight: 700;
}
.vescent-formmock label span {
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	border: 1px solid rgba(42,42,42,0.22);
	border-radius: var(--wp--custom--radius--control, 8px);
	padding: 13px 16px;
	background: var(--wp--preset--color--white);
}
.vescent-formmock__area span { min-height: 92px; }
.vescent-formmock__send {
	align-self: flex-start;
	margin-top: 4px;
	background: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--white);
	font-weight: 700;
	font-size: var(--wp--preset--font-size--small);
	padding: 16px 52px;
	border-radius: var(--wp--custom--radius--control, 8px);
}

/* Sparks, per the design, with the small ones scaled up to read. */
.vescent-contactbody::before,
.vescent-contactbody::after,
.vescent-contactgrid::before,
.vescent-contactgrid::after {
	content: "";
	position: absolute;
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}
.vescent-contactbody::before {
	width: 360px; height: 360px; top: 10px; left: -170px;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.4; transform: rotate(-12deg);
}
.vescent-contactbody::after {
	display: none;
}
.vescent-contactgrid { position: relative; }
.vescent-contactgrid::before {
	display: none;
}
.vescent-contactgrid::after {
	width: 170px; height: 170px; bottom: 120px; right: -70px;
	background-image: url('assets/spark/LightGreen.png');
	opacity: 0.45; transform: rotate(-18deg);
}
.vescent-contactgrid > .wp-block-column { position: relative; z-index: 1; }

@media (max-width: 781px) {
	.vescent-contactbody { padding: 44px 24px 52px; }
	.vescent-contactgrid { gap: 32px; }
	.vescent-contactside { position: static; }
	.vescent-formmock__row { grid-template-columns: 1fr; }
	.vescent-contactbody::before, .vescent-contactbody::after,
	.vescent-contactgrid::before, .vescent-contactgrid::after { width: 150px; height: 150px; }
}


/* ============================================================
   WELCOME PAGE
   Post-payment landing page at /welcome/. Uses its own header
   template part (no dropdown, no Get Started) because the
   visitor has already signed up.
   ============================================================ */

/* Hero: same centred sky hero as elsewhere, but the decorative
   Spark is the larger yellow one the design calls for. */
.vescent-hero--welcome::before {
	width: 230px;
	height: 230px;
	top: -60px;
	right: 40px;
	background-image: url('assets/spark/Yellow.png');
	opacity: 0.55;
	transform: rotate(8deg);
}

/* TEMPORARY. The unapproved-copy note card. Delete the block
   from the page before launch and this rule stops mattering.
   Deliberately not a brand colour: it must not read as part
   of the site. */
.vescent-buildnoteband { padding: 44px 48px 0; }
.vescent-buildnote {
	max-width: 1160px;
	margin-inline: auto;
	border: 2px dashed var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--note);
	padding: 28px 32px;
}
.vescent-buildnote > * { margin: 0; }
.vescent-buildnote > * + * { margin-top: 12px; }
.vescent-buildnote__tag {
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--ink);
}

/* Three steps to her first Circle. */
.vescent-wsteps { padding: 48px 48px 64px; text-align: center; }
.vescent-wsteps__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 24px;
	max-width: 1140px;
	margin: 36px auto 0;
	text-align: left;
}
.vescent-wstep {
	border-radius: var(--wp--custom--radius--photo);
	padding: 36px 34px 40px;
	height: 100%;
}
.vescent-wstep > * { margin: 0; }
.vescent-wstep > * + * { margin-top: 10px; }
.vescent-wstepnum {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--heading-sm);
	line-height: 1;
	margin-bottom: 4px;
}
.vescent-wsteps .wp-block-buttons { margin-top: 40px; }

/* Get the app. */
.vescent-getapp { padding: 64px 48px; }
.vescent-getapp > .wp-block-columns {
	max-width: 1160px;
	margin-inline: auto;
}
.vescent-getapp h2 { margin: 0 0 14px; }
.vescent-getapp .wp-block-buttons { margin-top: 26px; }
.vescent-android { margin-top: 22px; max-width: 520px; }
.vescent-getapp__photo { margin: 0; }
.vescent-getapp__photo img {
	display: block;
	width: 100%;
	height: 360px;
	object-fit: cover;
	border-radius: var(--wp--custom--radius--photo);
}
/* Second decorative Spark, low on the left of this band. */
.vescent-getapp::before {
	content: "";
	position: absolute;
	width: 260px;
	height: 260px;
	bottom: -90px;
	left: 60px;
	background: url('assets/spark/Blue.png') no-repeat center / contain;
	opacity: 0.4;
	transform: rotate(-14deg);
	pointer-events: none;
	z-index: 0;
}
.vescent-getapp > * { position: relative; z-index: 1; }

/* While you wait / questions about your plan. */
.vescent-wait { padding: 64px 48px; }
.vescent-wait > .wp-block-columns {
	max-width: 1160px;
	margin-inline: auto;
}
.vescent-wait h2 { margin: 0 0 18px; }
.vescent-wait p + p { margin-top: 14px; }

@media (max-width: 781px) {
	.vescent-buildnoteband { padding: 32px 24px 0; }
	.vescent-buildnote { padding: 22px 20px; }
	.vescent-wsteps { padding: 40px 24px 48px; }
	.vescent-wsteps__grid { grid-template-columns: 1fr; gap: 16px; margin-top: 26px; }
	.vescent-getapp, .vescent-wait { padding: 42px 24px 46px; }
	.vescent-getapp::before { display: none; }
	.vescent-getapp__photo img { height: 280px; }
	}


/* ============================================================
   LEGAL PAGES (Privacy Policy, Terms and Conditions)
   Wording is verbatim from the attorney drafts. Everything
   here is presentation only.
   ============================================================ */

.vescent-hero--legal::before {
	width: 240px;
	height: 240px;
	top: -50px;
	right: 30px;
	background-image: url('assets/spark/LightBlue.png');
	opacity: 0.5;
	transform: rotate(-10deg);
}
.vescent-legaldate { opacity: 0.8; }

.vescent-legalbody { padding: 56px 48px 72px; }
.vescent-legalbody > .wp-block-columns {
	max-width: 1160px;
	margin-inline: auto;
}

/* Contents list, stays in view while you scroll the document. */
.vescent-toc {
	position: sticky;
	top: 28px;
}
.vescent-toc > * { margin: 0; }
.vescent-toc__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	line-height: 1.2;
	margin-bottom: 14px;
}
.vescent-toc__link { line-height: 1.4; margin-top: 10px; }
.vescent-toc__link a {
	color: var(--wp--preset--color--ink);
	text-decoration: none;
	border-bottom: 1px solid transparent;
}
.vescent-toc__link a:hover,
.vescent-toc__link a:focus-visible {
	color: var(--wp--preset--color--blue);
	border-bottom-color: currentColor;
}

/* The document itself. */
.vescent-legaltext > * { margin: 0; }
.vescent-legaltext > * + * { margin-top: 14px; }
.vescent-legaltext h2 {
	font-weight: 400;
	line-height: 1.25;
	margin-top: 44px;
	/* so a Contents link doesn't land with the heading jammed at the
	   very top edge of the window */
	scroll-margin-top: 28px;
}
.vescent-legaltext > h2:first-child { margin-top: 0; }
.vescent-legaltext a {
	color: var(--wp--preset--color--blue);
	font-weight: 700;
}
.vescent-legaltext .vescent-stars { margin-top: 14px; }

/* Safety-critical passages sit in a tinted card so they are not
   skimmed past: call monitoring, the CSAE policy, the clinical
   disclaimer, and the deletion route. */
.vescent-legalcard {
	border-radius: var(--wp--custom--radius--card);
	padding: 28px 32px;
	margin-top: 22px;
}
.vescent-legalcard > * { margin: 0; }
.vescent-legalcard > * + * { margin-top: 12px; }
.vescent-legalcard a { color: var(--wp--preset--color--ink); }

.vescent-legalnext { margin-top: 40px; }

@media (max-width: 781px) {
	.vescent-legalbody { padding: 40px 24px 52px; }
	.vescent-legalbody > .wp-block-columns { gap: 28px; }
	.vescent-toc { position: static; }
	.vescent-legalcard { padding: 22px 20px; }
	.vescent-legaltext h2 { margin-top: 34px; }
	}


/* ---------- ABOUT US: founder headshots ----------
   The two source photos are pre-cropped square and matched on
   head size and eye line, so the circle needs no per-photo
   nudging. aspect-ratio keeps the circle true if a replacement
   photo is ever uploaded at the wrong shape. */
.vescent-founder__photo img {
	aspect-ratio: 1 / 1;
	object-position: 50% 50%;
	background: var(--wp--preset--color--white);
}


/* ---------- ABOUT US: founder card, photo beside the name ----------
   Diverges from the design file on purpose: larger headshot on the
   left, name and role beside it, bio running full width underneath. */
.vescent-founder__head {
	gap: 20px;
	flex-wrap: nowrap;
	align-items: center;
	margin-bottom: 20px;
}
.vescent-founder__photo {
	margin: 0 !important;
	flex: 0 0 auto;
}
.vescent-founder__photo img {
	width: 132px;
	height: 132px;
}
.vescent-founder__id { flex: 1 1 auto; min-width: 0; }
.vescent-founder__id > * { margin: 0; }
.vescent-founder-title { margin: 0 0 6px; }
.vescent-founder-role {
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--blue);
	margin: 0;
}

@media (max-width: 781px) {
	.vescent-founder__head { gap: 16px; margin-bottom: 16px; }
	.vescent-founder__photo img { width: 104px; height: 104px; }
	}


/* ============================================================
   GRID ROWS: cancel WordPress's stacked-block spacing
   ------------------------------------------------------------
   WordPress assumes every group is a vertical stack and emits:

     :where(.is-layout-flow) > *            { margin-block-start: 22px }
     :where(.is-layout-flow) > :first-child { margin-block-start: 0 }

   That is right for stacked blocks. But these containers are
   groups in the markup and CSS grids here, so in a row the rule
   stops meaning "space between blocks" and starts meaning "push
   every column except the first one down by 22px". The first
   column then looks misaligned when it is the only correct one.

   These containers space themselves with `gap` (or deliberately
   have no gap, in the full-bleed split bands), so the injected
   margin is always wrong for them.

   Only containers that are BOTH a wp:group AND the grid itself
   belong here. A group that merely *contains* a grid, such as
   .vescent-whyfam, is a genuine vertical stack and must keep the
   margin. tools/check-grid-spacing.py enforces this list.
   ============================================================ */

.vescent-halves > *,
.vescent-quotes > *,
.vescent-refer > *,
.vescent-rules > *,
.vescent-split > *,
.vescent-split__half > *,
.vescent-steps__grid > *,
.vescent-threeup__grid > *,
.vescent-wsteps__grid > * {
	margin-block-start: 0;
}


/* ============================================================
   NEWSLETTER POPUP
   Adult-facing pages only. Which pages is decided in
   functions.php; when it appears is decided in popup.js.
   ============================================================ */

.vescent-pop {
	position: fixed;
	inset: 0;
	z-index: 1000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
}
.vescent-pop[hidden] { display: none; }

.vescent-pop__veil {
	position: absolute;
	inset: 0;
	background: rgba(42, 42, 42, 0.45);
	opacity: 0;
	transition: opacity .2s ease;
}
.vescent-pop.is-open .vescent-pop__veil { opacity: 1; }

.vescent-pop__card {
	position: relative;
	background: var(--wp--preset--color--butter);
	border-radius: var(--wp--custom--radius--container);
	padding: 40px 44px 36px;
	max-width: 480px;
	width: 100%;
	text-align: center;
	box-shadow: 0 18px 50px rgba(42, 42, 42, .22);
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transition: opacity .22s ease, transform .22s ease;
}
.vescent-pop.is-open .vescent-pop__card { opacity: 1; transform: none; }

.vescent-pop__x {
	position: absolute;
	top: 12px;
	right: 16px;
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: var(--wp--preset--font-size--card-title);
	line-height: 1;
	color: var(--wp--preset--color--ink);
	padding: 6px 10px;
	border-radius: var(--wp--custom--radius--control);
}
.vescent-pop__x:hover { background: rgba(42, 42, 42, .07); }

.vescent-pop__icon { display: block; margin: 0 auto 14px; }

.vescent-pop__title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 400;
	font-size: var(--wp--preset--font-size--display-sm);
	line-height: 1.2;
	margin: 0 0 12px;
}
.vescent-pop__body {
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.65;
	margin: 0 0 22px;
}

.vescent-pop__form { margin-bottom: 18px; }
/* GoHighLevel ships its form as an iframe and sets the height with its own
   script. min-height keeps the popup from collapsing to nothing if that
   script is slow or blocked. */
.vescent-pop__form iframe {
	width: 100%;
	min-height: 170px;
	border: 0;
	display: block;
}
.vescent-pop__placeholder {
	border: 2px dashed var(--wp--preset--color--ink);
	border-radius: var(--wp--custom--radius--note);
	padding: 18px 20px;
	margin: 0;
	font-size: var(--wp--preset--font-size--fine);
	line-height: 1.55;
}

.vescent-pop__no {
	background: none;
	border: 0;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--fine);
	color: var(--wp--preset--color--ink);
	text-decoration: underline;
	text-underline-offset: 2px;
	padding: 6px 10px;
}

.vescent-pop :focus-visible {
	outline: 3px solid var(--wp--preset--color--blue);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.vescent-pop__veil,
	.vescent-pop__card { transition: none; }
}

@media (max-width: 600px) {
	.vescent-pop { padding: 16px; }
	.vescent-pop__card { padding: 34px 24px 28px; }
}


/* The GoHighLevel form in the footer. Its height is set by GHL's own script,
   so min-height only guards against a collapse if that script is slow. */
.vescent-newsletter iframe {
	width: 100%;
	min-height: 150px;
	border: 0;
	display: block;
}