/**
 * Celsyn 360 — supplemental styles.
 * Only what theme.json cannot express: hairline rules, the dark-section
 * colour flip, and a few editorial helper classes.
 */

:root {
	--celsyn-hairline: rgb( 18 22 31 / 0.16 );
	--celsyn-hairline-strong: rgb( 18 22 31 / 0.30 );
	--celsyn-frame: rgb( 14 88 191 / 0.22 );

	/* Product-media plate for real photography (Shop card + PDP gallery).
	   A clean, barely-warm near-white — lighter and less saturated than
	   `paper`/`stone` so it disappears behind the product photos' own pale
	   studio backgrounds instead of framing them with a visible tint.
	   Consumed only by woocommerce.css; kept here so every --celsyn-* token
	   has one home. */
	--celsyn-product-surface: #F8F7F4;

	/* Error / destructive only. Muted brick — 7.2:1 on paper (AAA). Never a brand accent;
	   blue stays informational/action. Not exposed in colour pickers by design. */
	--celsyn-error: #8C382C;
	--celsyn-error-field: rgb( 140 56 44 / 0.08 );

	/* Ink channel values, for alpha compositing where theme.json doesn't expose one. */
	--celsyn-ink-rgb: 18 22 31;

	/* --- Motion system (UI/UX Phase 1) --------------------------------- *
	 * transform + opacity + colour only. Nothing loops, floats, or zooms.
	 * scale is only ever used in the 0.96..1.02 range (Phase 2+). */
	--celsyn-ease: cubic-bezier( 0.22, 0.61, 0.36, 1 );        /* decelerate, no overshoot */
	--celsyn-ease-inout: cubic-bezier( 0.4, 0, 0.2, 1 );
	--celsyn-dur-fast: 180ms;    /* hovers, links, buttons */
	--celsyn-dur-mid: 320ms;     /* accordions */
	--celsyn-dur-reveal: 640ms;  /* section / element entrance */
	--celsyn-rise: 20px;         /* entrance translate distance */
	--celsyn-header-h: 76px;     /* set precisely by motion.js on load/resize */
}

/* --- Dark section --------------------------------------------------------- */
/* Applied as the "Dark section" style on a core/group. Flips nested colours
   so content on the ink ground reads correctly without per-block picking. */
.wp-block-group.is-style-celsyn-dark {
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	--celsyn-hairline: rgb( 247 245 241 / 0.18 );
	--celsyn-hairline-strong: rgb( 247 245 241 / 0.34 );
}

.is-style-celsyn-dark :where( h1, h2, h3, h4, h5, h6 ),
.is-style-celsyn-dark :where( .wp-block-heading ) {
	color: var( --wp--preset--color--paper );
}

.is-style-celsyn-dark :where( a ):not( .wp-element-button ) {
	color: var( --wp--preset--color--accent-cyan );
}

.is-style-celsyn-dark :where( .wp-block-site-title a ) {
	color: var( --wp--preset--color--paper );
}

/* --- Hairline separator ------------------------------------------------- */
.wp-block-separator.is-style-celsyn-hairline {
	border: 0;
	border-top: 1px solid var( --celsyn-hairline );
	opacity: 1;
	max-width: none;
	height: 0;
	margin-block: var( --wp--preset--spacing--70 );
}

/* --- Editorial helpers (add via the "Additional CSS class(es)" field) --- */
.celsyn-eyebrow {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	margin-bottom: var( --wp--preset--spacing--50 );
}

.is-style-celsyn-dark .celsyn-eyebrow {
	color: var( --wp--preset--color--accent-cyan );
}

.celsyn-label {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 500;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}

.celsyn-textlink {
	display: inline-block;
	font-family: var( --wp--preset--font-family--body );
	color: inherit;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.32em;
	text-decoration-color: var( --celsyn-hairline-strong );
	transition: text-decoration-color 0.15s ease;
}

.celsyn-textlink:hover,
.celsyn-textlink:focus-visible {
	text-decoration-color: var( --wp--preset--color--accent );
}

.is-style-celsyn-dark .celsyn-textlink:hover,
.is-style-celsyn-dark .celsyn-textlink:focus-visible {
	text-decoration-color: var( --wp--preset--color--accent-cyan );
}

/* --- Sharp editorial: no stray radii on media ------------------------- */
:where( .wp-block-image img, .wp-block-post-featured-image img ) {
	border-radius: 0;
}

/* Site Title (kept as a styled fallback if the Site Logo is ever cleared). */
.wp-block-site-title a {
	text-decoration: none;
}

/* --- Brand logo (Site Logo block) ------------------------------------- *
 * The wordmark PNG is already white "CELSYN" + cyan "360" on transparency,
 * cropped tight and sized for the dark header/footer — no recolour, no
 * filter. Each placement sets its own display width via the block's `width`
 * attribute (header 210 / checkout 170 / footer 185); this only normalises
 * the box so the image aligns cleanly with the nav and never overflows. */
.wp-block-site-logo {
	line-height: 0;
}
.wp-block-site-logo a,
.wp-block-site-logo img {
	display: block;
}
.wp-block-site-logo img {
	/* honour the block's own width attribute (header 210 / checkout 170 /
	   footer 185); just lock the ratio and cap it so it never overflows. */
	height: auto;
	max-width: 100%;
}
@media ( max-width: 899.98px ) {
	/* Through the hamburger-overlay band (up to ~810px, see the nav breakpoint
	   override below) and on past it, hold the wordmark at a compact fixed size:
	   it keeps the wordmark clear of the hamburger + account + cart below the
	   breakpoint, and above it bridges the gap up to the width (~846px) at which
	   the full-size 210px wordmark clears the inline nav without wrapping. */
	.wp-block-site-logo img {
		width: 150px;
	}
}

/* ==================================================================== *
 * UI/UX PHASE 1 — MOTION SYSTEM + STICKY HEADER + NAV BREAKPOINT
 * ==================================================================== */

/* --- Scroll reveals -------------------------------------------------- *
 * [data-reveal] is fully visible by default. motion.js adds
 * .celsyn-reveal-armed ONLY to elements that are below the fold at load, so
 * above-the-fold content is never hidden and content is never stuck if the
 * observer is unavailable. transform + opacity only — no layout shift. */
.celsyn-js [data-reveal].celsyn-reveal-armed {
	opacity: 0;
	transform: translateY( var( --celsyn-rise ) );
}
.celsyn-js [data-reveal].celsyn-reveal-armed.is-revealed {
	opacity: 1;
	transform: none;
	transition: opacity var( --celsyn-dur-reveal ) var( --celsyn-ease ),
	            transform var( --celsyn-dur-reveal ) var( --celsyn-ease );
}

/* --- Button micro-interaction -------------------------------------- *
 * Core / theme.json buttons + the contact form submit. WooCommerce buttons
 * get the same treatment in woocommerce.css (its section 5 owns their
 * `transition` declaration, which does not merge across rules). */
.wp-element-button,
.wp-block-button__link,
.celsyn-form button[type="submit"] {
	transition: transform var( --celsyn-dur-fast ) var( --celsyn-ease-inout ),
	            background-color var( --celsyn-dur-fast ) var( --celsyn-ease-inout ),
	            border-color var( --celsyn-dur-fast ) var( --celsyn-ease-inout );
}
.wp-element-button:hover,
.wp-block-button__link:hover,
.celsyn-form button[type="submit"]:hover {
	transform: translateY( -1px );
}
.wp-element-button:active,
.wp-block-button__link:active,
.celsyn-form button[type="submit"]:active {
	transform: translateY( 0 );
}

/* --- Text link — underline wipe ----------------------------------- *
 * Keeps a subtle resting underline (accessibility) and wipes an accent
 * underline across on hover/focus. Degrades to the prior colour-only
 * behaviour if ::after is unsupported. */
.celsyn-textlink {
	position: relative;
}
.celsyn-textlink::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.32em;
	height: 1px;
	background: var( --wp--preset--color--accent );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var( --celsyn-dur-fast ) var( --celsyn-ease );
}
.celsyn-textlink:hover::after,
.celsyn-textlink:focus-visible::after {
	transform: scaleX( 1 );
}
.is-style-celsyn-dark .celsyn-textlink::after {
	background: var( --wp--preset--color--accent-cyan );
}

/* --- Sticky header ------------------------------------------------- *
 * Sticky on every page (no hide-on-scroll) EXCEPT Cart and Checkout, which
 * stay distraction-light per owner decision — the header there scrolls away
 * normally. Dark styling preserved. A faint shadow appears only once the page
 * has scrolled, to signal the layer. */
body:not( .woocommerce-checkout ):not( .woocommerce-cart ) header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 100;
}
header.wp-block-template-part > .wp-block-group {
	transition:
		box-shadow var( --celsyn-dur-fast ) var( --celsyn-ease ),
		padding var( --celsyn-dur-mid ) var( --celsyn-ease ),
		background-color var( --celsyn-dur-mid ) var( --celsyn-ease );
}
/* Scrolled state: compact + a restrained translucent backdrop. The ink stays
   ~92% opaque so it reads correctly with or without backdrop-filter support.
   `!important` overrides the block's inline padding and the preset bg class. */
html.celsyn-scrolled body:not( .woocommerce-checkout ):not( .woocommerce-cart ) header.wp-block-template-part > .wp-block-group {
	box-shadow: 0 10px 30px -20px rgb( 8 11 17 / 0.6 );
	padding-block: 0.62rem !important;
	background-color: rgb( 12 15 22 / 0.92 ) !important;
}
@supports ( ( backdrop-filter: blur( 8px ) ) or ( -webkit-backdrop-filter: blur( 8px ) ) ) {
	html.celsyn-scrolled body:not( .woocommerce-checkout ):not( .woocommerce-cart ) header.wp-block-template-part > .wp-block-group {
		background-color: rgb( 12 15 22 / 0.7 ) !important;
		-webkit-backdrop-filter: blur( 12px );
		backdrop-filter: blur( 12px );
	}
}
@media ( prefers-reduced-motion: reduce ) {
	header.wp-block-template-part > .wp-block-group {
		transition: none;
	}
}
/* The root flow layout puts a block-gap (~24px) between the <header> template
   part and the first content block (main, or WooCommerce's .product wrapper).
   On the homepage that gap exposes the paper page background as a white strip
   between the dark header and the dark full-bleed hero. The content block owns
   its own top padding on every template, so zeroing this one sibling gap costs
   those pages nothing and closes the seam under the header everywhere. */
.wp-site-blocks > .wp-block-template-part + * {
	margin-block-start: 0;
}
/* in-page anchors clear the sticky header */
#celsyn-system,
:target {
	scroll-margin-top: calc( var( --celsyn-header-h, 76px ) + 1rem );
}

/* --- Nav breakpoint: 600px -> ~810px ------------------------------- *
 * WordPress core switches wp:navigation (overlayMenu:"mobile") from the
 * hamburger overlay to the inline list at min-width:600px. But this header's
 * wordmark + 6 inline items (Shop / Our Approach / About / FAQ / Contact /
 * Account) + account icon + mini-cart measure ~580px on the right plus the
 * logo; with the full 210px wordmark the inline row does not clear until
 * ~846px, and with the compact 150px wordmark not until ~786px. The proposal
 * targeted ~782px; measured against the real item widths the safe takeover is
 * ~810px (compact wordmark held past the breakpoint, see above, so the inline
 * row has margin the moment it appears). Re-apply core's "mobile" rules below
 * that width. No nav structure, links, order, or overlay behaviour changes —
 * only the width at which the hamburger engages. theme.css loads after
 * navigation/style.min.css, so these same-specificity rules win in-band. */
@media ( min-width: 600px ) and ( max-width: 809.98px ) {
	.wp-block-navigation__responsive-container:not( .hidden-by-default ):not( .is-menu-open ) {
		display: none;
	}
	.wp-block-navigation__responsive-container-open:not( .always-shown ) {
		display: flex;
	}
}

/* The header nav carries textColor:"paper" for the dark header, but the open
   mobile-menu overlay defaults to a white ground (core) — paper-on-white is
   unreadable. Give the overlay the brand ink ground so the paper links + the
   close icon read correctly. Selector matches core's exactly (later in the
   cascade wins). */
.wp-block-navigation:not( .has-background ) .wp-block-navigation__responsive-container.is-menu-open:not( .disable-default-overlay ) {
	background-color: var( --wp--preset--color--ink );
}

/* --- Reduced motion --------------------------------------------------- */
@media ( prefers-reduced-motion: reduce ) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
	.celsyn-js [data-reveal],
	.celsyn-js [data-reveal].celsyn-reveal-armed {
		opacity: 1 !important;
		transform: none !important;
	}
	/* No parallax. homepage.js / research.js already opt out under reduced
	   motion; this backs it up if a state slips through. */
	[data-hero-parallax] img,
	[data-rp-parallax] img {
		transform: none !important;
	}
}

/* --- FAQ accordion (core/details, Phase F) ------------------------------ */
.celsyn-faq-item {
	border-block-end: 1px solid var( --celsyn-hairline );
	padding-block: var( --wp--preset--spacing--50 );
}
.celsyn-faq-item summary {
	cursor: pointer;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
	transition: color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease, ease );
}
.celsyn-faq-item summary:hover {
	color: var( --wp--preset--color--accent );
}
.celsyn-faq-item summary::marker {
	color: var( --wp--preset--color--accent );
}
.celsyn-faq-item p {
	margin-top: var( --wp--preset--spacing--40 );
	/* Smooth accordion open (UI/UX polish, 2026-09-13) — a quiet fade for the
	   revealed answer; governed by the sitewide prefers-reduced-motion rule
	   (animation-duration:0.01ms) further down this file. */
	animation: celsyn-faq-fade 220ms ease;
}
@keyframes celsyn-faq-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* --- Notices (Phase F, non-WooCommerce contexts e.g. the contact form) -- */
.celsyn-notice {
	border-radius: 3px;
	border: 1px solid var( --celsyn-hairline-strong );
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	padding: var( --wp--preset--spacing--60 );
	margin-bottom: var( --wp--preset--spacing--60 );
	font-size: var( --wp--preset--font-size--small );
}
.celsyn-notice--success {
	border-color: var( --wp--preset--color--accent );
	box-shadow: inset 3px 0 0 var( --wp--preset--color--accent );
}
.celsyn-notice--error {
	border-color: var( --celsyn-error );
	box-shadow: inset 3px 0 0 var( --celsyn-error );
	background: var( --celsyn-error-field );
	color: var( --celsyn-error );
}

/* --- Contact form (Phase F, native — no plugin) -------------------------- */
.celsyn-form {
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
	max-width: 34rem;
}
/* Any .celsyn-form toggled by the [hidden] attribute (e.g. the CELSYN
   Concierge lead form after a successful submit) needs this: the
   unconditional `display: flex` above is an author rule at the same
   specificity as the UA [hidden] rule, and — being later in the cascade —
   would otherwise win and keep the form visible. */
.celsyn-form[hidden] {
	display: none;
}
.celsyn-form__honeypot {
	position: absolute;
	left: -9999px;
	width: 1px;
	height: 1px;
	overflow: hidden;
}
.celsyn-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.4rem;
}
.celsyn-form__row label {
	font-family: var( --wp--preset--font-family--body );
	font-weight: 500;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
}
.celsyn-form__row input:not( [type="checkbox"] ),
.celsyn-form__row select,
.celsyn-form__row textarea {
	border: 1px solid var( --celsyn-hairline-strong );
	border-radius: 3px;
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	padding: 0.65em 0.8em;
	min-height: 44px;
}
.celsyn-form__row textarea {
	min-height: 8rem;
	resize: vertical;
}
.celsyn-form__row input:focus-visible,
.celsyn-form__row select:focus-visible,
.celsyn-form__row textarea:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
	border-color: var( --wp--preset--color--accent );
}
/* Placeholders: muted gray, clearly lighter than typed text, never blue.
   Firefox lowers placeholder opacity by default — pinned to 1 so the tone
   is deliberate and consistent across browsers. */
.celsyn-form__row input::placeholder,
.celsyn-form__row textarea::placeholder {
	color: var( --wp--preset--color--warm-grey );
	opacity: 1;
}
/* Small uppercase section label (form UX polish, 2026-09-14) — groups
   related fields through spacing + a label only, no boxed sections. */
.celsyn-form__group-label {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}
.celsyn-form__group-label:first-child {
	margin-top: 0;
}
.celsyn-form__row--consent {
	flex-direction: row;
	align-items: flex-start;
	gap: 0.6rem;
	cursor: pointer;
}
.celsyn-form__row--consent input {
	margin-top: 0.2rem;
	min-width: 20px;
	min-height: 20px;
	flex-shrink: 0;
	accent-color: var( --wp--preset--color--accent );
	cursor: pointer;
}
.celsyn-form__row--consent label {
	font-weight: 400;
	color: var( --wp--preset--color--warm-grey );
	cursor: pointer;
}
.celsyn-form button[type="submit"] {
	align-self: flex-start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0.9em 2em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	border: 1px solid var( --wp--preset--color--ink );
	border-radius: 3px;
	background-color: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	cursor: pointer;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}
.celsyn-form button[type="submit"]:hover {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
}
.celsyn-form button[type="submit"]:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}
@media ( max-width: 599.98px ) {
	.celsyn-form button[type="submit"] {
		align-self: stretch;
		width: 100%;
	}
}

/* --- Track Order page ---------------------------------------------------- */
.celsyn-track {
	max-width: 640px;
}
.celsyn-track__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2rem, 1.4rem + 2.4vw, 3rem );
	line-height: 1.08;
	text-wrap: balance;
	margin: 0.4rem 0 0;
}
.celsyn-track__intro {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--warm-grey );
	max-width: 46ch;
}
.celsyn-track__panel {
	margin-top: var( --wp--preset--spacing--70 );
}
.celsyn-track__form .celsyn-form__row--submit {
	margin-top: 0.4rem;
}
.celsyn-track__form button[type="submit"] {
	align-self: stretch;
	width: 100%;
}
@media ( min-width: 480px ) {
	.celsyn-track__form button[type="submit"] {
		align-self: flex-start;
		width: auto;
	}
}
.celsyn-track__support {
	margin-top: var( --wp--preset--spacing--80 );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
/* WooCommerce's order-tracking result renders bare <h2>s ("Order updates",
   "Order details"); keep them modest against the page H1. */
.celsyn-track h2 {
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.15;
}

/* ====================================================================== *
 * SHARE & EARN (/brand-partners/, label "Share & Earn") — high-conversion
 * rebuild, 2026-09-13. Outer .celsyn-se is alignwide (up to 1200px); each
 * section caps its OWN measure via max-width + margin-inline:auto so
 * text-heavy sections (hero, FAQ) stay narrow and readable while the
 * benefit bar / Give-10-Get-10 split / Who-grid can breathe wider. No
 * decorative divider lines anywhere — spacing and the one pale-gradient
 * band do the separating.
 * ====================================================================== */
.celsyn-se {
	padding-inline: var( --wp--preset--spacing--60 );
}
.celsyn-se > * + * {
	margin-top: var( --wp--preset--spacing--90 );
}

/* --- Hero ------------------------------------------------------------ */
.celsyn-se__hero {
	max-width: 42rem;
	margin-inline: auto;
	margin-top: var( --wp--preset--spacing--80 ) !important;
}
.celsyn-se__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.6rem, 1.4rem + 5vw, 4.5rem );
	line-height: 1.01;
	text-wrap: balance;
	margin: 0.35rem 0 0;
}
.celsyn-se__lede {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.55;
	color: var( --wp--preset--color--warm-grey );
	max-width: 52ch;
}
.celsyn-se__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--60 );
	margin-top: var( --wp--preset--spacing--70 );
}
.celsyn-se__cta--center {
	justify-content: center;
}
.celsyn-se__trust {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-se__trust--dark {
	color: rgb( 247 245 241 / 0.6 );
}

/* One real, working CTA button everywhere on the page — opens the CELSYN
   Concierge lead form (data-celsyn-cc-lead, assets/js/concierge.js). Same
   solid-ink treatment as the site's primary buttons. */
button[data-celsyn-cc-lead] {
	appearance: none;
	border: 1px solid var( --wp--preset--color--ink );
	cursor: pointer;
}
button[data-celsyn-cc-lead]:hover,
button[data-celsyn-cc-lead]:focus-visible {
	background-color: var( --wp--preset--color--accent );
	border-color: var( --wp--preset--color--accent );
}
.celsyn-se__final button[data-celsyn-cc-lead] {
	border-color: var( --wp--preset--color--paper );
}

/* --- Above-the-fold benefit bar ---------------------------------------- */
.celsyn-se__benefits {
	max-width: 62rem;
	margin-inline: auto;
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	text-align: center;
}
@media ( min-width: 700px ) {
	.celsyn-se__benefits {
		grid-template-columns: repeat( 3, 1fr );
		text-align: left;
	}
}
.celsyn-se__benefit p {
	margin: 0;
}
.celsyn-se__benefit-n {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--xx-large );
	line-height: 1;
	color: var( --wp--preset--color--accent );
}
.celsyn-se__benefit-h {
	margin-top: 0.3rem !important;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}
.celsyn-se__benefit > p:last-child {
	margin-top: 0.35rem !important;
	color: var( --wp--preset--color--warm-grey );
	font-size: var( --wp--preset--font-size--small );
}

/* --- Shared section heading + supporting-points list ------------------- */
.celsyn-se__opportunity,
.celsyn-se__brand {
	max-width: 46rem;
	margin-inline: auto;
}
.celsyn-se__h {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.8rem, 1.2rem + 2vw, 2.6rem );
	line-height: 1.1;
	text-wrap: balance;
	margin: 0.3rem 0 0;
}
.celsyn-se__h--center {
	text-align: center;
	max-width: 40rem;
	margin-inline: auto;
}
.celsyn-se__h--small {
	font-size: var( --wp--preset--font-size--x-large );
	margin-bottom: var( --wp--preset--spacing--50 );
}
.celsyn-se__points {
	list-style: none;
	margin: var( --wp--preset--spacing--70 ) 0 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--60 );
}
@media ( min-width: 640px ) {
	.celsyn-se__points {
		grid-template-columns: repeat( 3, 1fr );
	}
}
.celsyn-se__points li {
	margin: 0;
	padding-top: var( --wp--preset--spacing--50 );
	border-top: 1px solid var( --celsyn-hairline );
}
.celsyn-se__points p {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-se__point-h {
	margin-bottom: 0.3rem !important;
	font-family: var( --wp--preset--font-family--body );
	font-weight: 600;
	color: var( --wp--preset--color--ink ) !important;
}
.celsyn-se__note {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}

/* --- How It Works ------------------------------------------------------ */
.celsyn-se__how {
	max-width: 62rem;
	margin-inline: auto;
}
.celsyn-se__steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 );
}
@media ( min-width: 720px ) {
	.celsyn-se__steps {
		grid-template-columns: repeat( 3, 1fr );
		gap: var( --wp--preset--spacing--70 );
	}
}
.celsyn-se__steps li {
	margin: 0;
	text-align: center;
}
.celsyn-se__steps p { margin: 0; color: var( --wp--preset--color--warm-grey ); }
.celsyn-se__step-n {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent ) !important;
}
.celsyn-se__step-h {
	margin: 0.35rem 0 0.5rem !important;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink ) !important;
}

/* --- Give 10 / Get 10 split — the page's visual centrepiece ------------ */
.celsyn-se__split {
	max-width: 68rem;
	margin-inline: auto;
	display: grid;
	gap: var( --wp--preset--spacing--80 );
	padding: var( --wp--preset--spacing--90 ) var( --wp--preset--spacing--80 );
	background: linear-gradient( 165deg, rgb( 14 88 191 / 0.07 ), rgb( 14 88 191 / 0.015 ) 65% );
	border-radius: 8px;
	text-align: center;
}
@media ( min-width: 720px ) {
	.celsyn-se__split {
		grid-template-columns: 1fr 1fr;
		text-align: left;
	}
	.celsyn-se__split-col:first-child {
		border-right: 1px solid rgb( 14 88 191 / 0.14 );
		padding-right: var( --wp--preset--spacing--80 );
	}
}
.celsyn-se__split-label {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}
.celsyn-se__split-num {
	margin: 0.2rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 3.5rem, 2.4rem + 5vw, 6rem );
	line-height: 1;
	/* UI/UX polish (2026-09-13): accent colour instead of plain ink — a
	   touch more emphasis on the number itself, no size change. */
	color: var( --wp--preset--color--accent );
}
.celsyn-se__split-num span {
	display: block;
	margin-top: 0.2rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 500;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-se__split-caption {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	color: var( --wp--preset--color--warm-grey );
	max-width: 32ch;
}
@media ( min-width: 720px ) {
	.celsyn-se__split-col:last-child .celsyn-se__split-caption { margin-inline: 0; }
}
.celsyn-se__split-col:first-child .celsyn-se__split-caption,
.celsyn-se__split-col:first-child .celsyn-se__split-label,
.celsyn-se__split-col:first-child .celsyn-se__split-num {
	margin-inline: auto;
}
@media ( min-width: 720px ) {
	.celsyn-se__split-col:first-child .celsyn-se__split-caption,
	.celsyn-se__split-col:first-child .celsyn-se__split-label,
	.celsyn-se__split-col:first-child .celsyn-se__split-num {
		margin-inline: 0;
	}
}

/* --- Who this is for ---------------------------------------------------- */
.celsyn-se__who {
	max-width: 62rem;
	margin-inline: auto;
}
.celsyn-se__who-grid {
	list-style: none;
	margin: var( --wp--preset--spacing--80 ) 0 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--60 );
	grid-template-columns: repeat( 2, 1fr );
}
@media ( min-width: 720px ) {
	.celsyn-se__who-grid {
		grid-template-columns: repeat( 4, 1fr );
	}
}
.celsyn-se__who-grid li {
	margin: 0;
}
.celsyn-se__who-grid p {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
	font-size: var( --wp--preset--font-size--small );
}
.celsyn-se__who-grid .celsyn-se__point-h {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 400;
}

/* --- Simple program rules — de-emphasised on purpose -------------------- */
.celsyn-se__rules {
	max-width: 38rem;
	margin-inline: auto;
}
.celsyn-se__rules ul {
	margin: 0;
	padding-left: 1.1em;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.celsyn-se__rules li {
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.5;
	color: var( --wp--preset--color--warm-grey );
}

/* --- FAQ ---------------------------------------------------------------- */
.celsyn-se__faq {
	max-width: 42rem;
	margin-inline: auto;
}

/* --- Final CTA ------------------------------------------------------------ */
.celsyn-se__final {
	max-width: 46rem;
	margin-inline: auto;
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	border-radius: 8px;
	padding: var( --wp--preset--spacing--90 ) var( --wp--preset--spacing--70 );
	text-align: center;
}
.celsyn-se__final p {
	margin: 0.6rem auto 0;
	max-width: 44ch;
	color: rgb( 247 245 241 / 0.8 );
}
.celsyn-se__final-h {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1.3rem + 2.2vw, 2.8rem );
	line-height: 1.1;
	margin: 0;
	color: var( --wp--preset--color--paper );
}
.celsyn-se__final button[data-celsyn-cc-lead] {
	margin-top: var( --wp--preset--spacing--70 );
}

/* --- Homepage editorial photography (image-integration phase) ----------- */
/* Full lifestyle/editorial compositions, not isolated product-on-plate
   renders (that's the PDP's .celsyn-product-media treatment, untouched).
   Aspect-ratio boxes are set to match each asset's own measured intrinsic
   ratio almost exactly, so object-fit: cover crops nothing meaningful —
   it's just insurance against the sub-1% rounding gap between a CSS ratio
   and the source pixels, not a real crop. */
.celsyn-photo {
	display: block;
	overflow: hidden;
	border-radius: 4px;
	border: 1px solid var( --celsyn-hairline );
}
.celsyn-photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}
.celsyn-photo,
.celsyn-photo--wide {
	aspect-ratio: 3 / 2;
}
.celsyn-photo--wide {
	aspect-ratio: 16 / 9;
}
@media ( max-width: 767px ) {
	.celsyn-photo,
	.celsyn-photo--wide {
		aspect-ratio: 9 / 16;
	}
}

/* ==================================================================== *
 * UI/UX PHASE 2 — CINEMATIC HOMEPAGE
 * Distinct visual role per section; no two adjacent sections share a
 * composition. Motion: hero parallax + one pinned choreography only
 * (see assets/js/homepage.js). Everything degrades to stacked sections.
 * ==================================================================== */

/* Shared section rhythm for the Phase 2 homepage patterns. */
.celsyn-sec {
	padding-block: var( --wp--preset--spacing--100 );
}
.celsyn-sec--tight {
	padding-block: var( --wp--preset--spacing--90 );
}

/* --- 1 · HERO — full-bleed cinematic environment -------------------- */
.celsyn-hero {
	position: relative;
	display: flex;
	align-items: flex-end;
	min-height: min( 88vh, 780px );
	overflow: clip;
	background: var( --wp--preset--color--ink );
	isolation: isolate;
}
.celsyn-hero__media {
	position: absolute;
	inset: -8% 0;
	z-index: 0;
}
.celsyn-hero__pic {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
	border-radius: 0;
	aspect-ratio: auto;
	overflow: hidden;
}
.celsyn-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transform: scale( 1.09 );
	will-change: transform;
}
.celsyn-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 1;
	background:
		linear-gradient( 78deg, rgb( 10 13 20 / 0.86 ) 0%, rgb( 10 13 20 / 0.5 ) 38%, rgb( 10 13 20 / 0.08 ) 66%, rgb( 10 13 20 / 0 ) 100% ),
		linear-gradient( 0deg, rgb( 10 13 20 / 0.6 ) 0%, rgb( 10 13 20 / 0 ) 40% );
}
.celsyn-hero__inner {
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding: var( --wp--preset--spacing--90 ) var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--paper );
}
.celsyn-hero__inner > * {
	margin: 0;
}
.celsyn-hero__inner .celsyn-eyebrow {
	color: var( --wp--preset--color--accent-cyan );
	margin-bottom: var( --wp--preset--spacing--50 );
}
.celsyn-hero__inner h1 {
	color: var( --wp--preset--color--paper );
	font-size: clamp( 2.6rem, 1.4rem + 4.6vw, 5rem );
	max-width: 14ch;
	text-wrap: balance;
	line-height: 1.02;
}
.celsyn-hero__lede {
	color: rgb( 247 245 241 / 0.82 );
	max-width: 42ch;
	margin-top: var( --wp--preset--spacing--60 ) !important;
}
.celsyn-hero__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--60 );
	margin-top: var( --wp--preset--spacing--70 );
}
.celsyn-hero__cta .celsyn-textlink {
	color: var( --wp--preset--color--paper );
}
@media ( max-width: 767px ) {
	.celsyn-hero {
		min-height: min( 86vh, 660px );
	}
	.celsyn-hero__scrim {
		/* Clean-hero re-shoot sits the products a touch higher; hold the scrim
		   denser through the mid-band so the headline never competes with the
		   packaging type behind it. */
		background: linear-gradient( 0deg, rgb( 8 11 17 / 0.94 ) 0%, rgb( 8 11 17 / 0.82 ) 50%, rgb( 8 11 17 / 0.55 ) 78%, rgb( 8 11 17 / 0.2 ) 100% );
	}
	.celsyn-hero__inner {
		padding-block: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--90 );
	}
	.celsyn-hero__inner h1 {
		max-width: 16ch;
	}
	.celsyn-hero__lede {
		max-width: 36ch;
	}
}

/* ====================================================================
 * FINAL HOMEPAGE (2026-09-08) — short, two-product.
 * hero -> why the system -> two product cards -> faq -> final CTA.
 * The old sticky-stack "System", the Serum/Mask/Complete spotlights, the
 * Routine timeline and the dark "Our Approach" band were removed; their
 * patterns are kept unreferenced for rollback but their CSS is gone.
 * ==================================================================== */

/* --- 2 · WHY THE SYSTEM — eyebrow + headline + 2x2 points ---------- */
/* Trim the bottom so the benefits sit closer to the product section they
   introduce (the products section also tightens its own top). */
.celsyn-why.celsyn-sec--tight {
	padding-bottom: var( --wp--preset--spacing--70 );
}
.celsyn-why__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.celsyn-why__head {
	max-width: 46ch;
}
.celsyn-why__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1.2rem + 2.4vw, 2.9rem );
	line-height: 1.1;
	text-wrap: balance;
	margin: 0.35rem 0 0;
}
.celsyn-why__lede {
	margin-top: var( --wp--preset--spacing--50 );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--warm-grey );
	max-width: 44ch;
}
.celsyn-why__grid {
	list-style: none;
	margin: var( --wp--preset--spacing--80 ) 0 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--60 );
}
@media ( min-width: 700px ) {
	.celsyn-why__grid {
		grid-template-columns: 1fr 1fr;
		gap: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--80 );
	}
}
.celsyn-why__item {
	/* UI/UX polish (2026-09-13): dropped the hairline top-border — the brief
	   calls for no decorative divider lines here; grid gap + label styling
	   alone already separate the four points cleanly. */
	padding-top: 0;
}
.celsyn-why__label {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink );
}
.celsyn-why__body {
	margin: 0.5rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
	max-width: 34ch;
}

/* --- 3 · PRODUCTS — two editorial cards --------------------------- */
/* The "why" band above already carries a full bottom padding, so this
   section tightens its own top to keep the two linked ideas close. */
.celsyn-products.celsyn-sec--tight {
	padding-top: var( --wp--preset--spacing--60 );
}
.celsyn-products__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.celsyn-products__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1.2rem + 2.4vw, 2.9rem );
	line-height: 1.1;
	margin: 0 0 var( --wp--preset--spacing--70 );
}
.celsyn-products__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --wp--preset--spacing--80 );
}
@media ( min-width: 780px ) {
	.celsyn-products__grid {
		grid-template-columns: 1fr 1fr;
		gap: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 );
	}
}
.celsyn-pcard {
	display: flex;
	flex-direction: column;
}
.celsyn-pcard__media {
	display: block;
	background: var( --celsyn-product-surface, #F8F7F4 );
	/* a faint editorial plate edge, not a bordered "card" */
	border: 1px solid rgb( 18 22 31 / 0.07 );
	border-radius: 2px;
	overflow: hidden;
	aspect-ratio: 4 / 5;
}
.celsyn-pcard__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
	transition: transform var( --celsyn-dur-mid ) var( --celsyn-ease );
}
.celsyn-pcard:hover .celsyn-pcard__media img {
	transform: scale( 1.03 );
}
.celsyn-pcard__body {
	margin-top: var( --wp--preset--spacing--60 );
}
.celsyn-pcard__name {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	line-height: 1.15;
	text-wrap: balance;
	margin: 0;
}
.celsyn-pcard__copy {
	margin: var( --wp--preset--spacing--40 ) 0 0;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-pcard__cta {
	margin: var( --wp--preset--spacing--50 ) 0 0;
}

/* --- 9 · FOOTER — premium dark redesign -------------------------- */
.celsyn-footer {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
}
.celsyn-footer__grid {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding: var( --wp--preset--spacing--100 ) var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--80 );
	display: grid;
	gap: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 );
	grid-template-columns: 1fr;
}
.celsyn-footer__col h2 {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: rgb( 247 245 241 / 0.5 );
	margin: 0 0 var( --wp--preset--spacing--50 );
}
.celsyn-footer__col ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7rem;
}
.celsyn-footer__col a {
	color: var( --wp--preset--color--paper );
	text-decoration: none;
	font-size: var( --wp--preset--font-size--small );
	position: relative;
}
.celsyn-footer__col a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -3px;
	height: 1px;
	background: var( --wp--preset--color--accent-cyan );
	transform: scaleX( 0 );
	transform-origin: left center;
	transition: transform var( --celsyn-dur-fast ) var( --celsyn-ease );
}
.celsyn-footer__col a:hover::after,
.celsyn-footer__col a:focus-visible::after {
	transform: scaleX( 1 );
}
.celsyn-footer__brand .custom-logo-link {
	display: inline-block;
	line-height: 0;
}
.celsyn-footer__brand .custom-logo {
	width: 220px;
	height: auto;
}
.celsyn-footer__brand p {
	color: rgb( 231 227 219 / 0.7 );
	font-size: var( --wp--preset--font-size--small );
	max-width: 32ch;
	margin: var( --wp--preset--spacing--60 ) 0 0;
}
.celsyn-footer__brand .celsyn-footer__entity {
	color: var( --wp--preset--color--warm-grey );
	font-size: var( --wp--preset--font-size--x-small );
	margin-top: var( --wp--preset--spacing--50 );
}
.celsyn-footer__legal-inner {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding: 0 var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--80 );
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var( --wp--preset--spacing--60 );
	align-items: center;
	font-size: var( --wp--preset--font-size--x-small );
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-footer__legal-inner a {
	color: var( --wp--preset--color--warm-grey );
	text-decoration: none;
}
.celsyn-footer__legal-inner a:hover,
.celsyn-footer__legal-inner a:focus-visible {
	color: var( --wp--preset--color--paper );
}
.celsyn-footer__legal-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem 1rem;
}
@media ( min-width: 480px ) and ( max-width: 919.98px ) {
	.celsyn-footer__grid {
		grid-template-columns: 1fr 1fr;
	}
	.celsyn-footer__brand {
		grid-column: 1 / -1;
	}
}
@media ( min-width: 920px ) {
	.celsyn-footer__grid {
		grid-template-columns: 1.6fr 1fr 1fr 1fr 0.8fr;
		gap: var( --wp--preset--spacing--90 ) var( --wp--preset--spacing--70 );
	}
}

/* ====================================================================
 * RESEARCH PAGE  (/research/ — templates/page-research.html)
 * A dedicated research-only experience. Dark hero + light collection grid +
 * dark documentation band + quiet notice + minimal close. Shares tokens and
 * the is-style-celsyn-dark variation with the rest of the site. Motion:
 * one restrained hero-plate parallax (assets/js/research.js); cards reveal
 * via the site-wide motion.js. Everything degrades to a static stacked page.
 * ==================================================================== */

/* --- A · RESEARCH HERO ------------------------------------------------ */
.rp-hero {
	padding-block: var( --wp--preset--spacing--90 );
	overflow: hidden;
}
.rp-hero__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
	display: grid;
	gap: var( --wp--preset--spacing--80 );
	align-items: center;
}
@media ( min-width: 900px ) {
	.rp-hero__wrap {
		grid-template-columns: minmax( 0, 43fr ) minmax( 0, 57fr );
		gap: var( --wp--preset--spacing--80 );
	}
}
.rp-hero__head {
	max-width: 40ch;
}
.rp-hero__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.2rem, 1.3rem + 3.6vw, 3.75rem );
	line-height: 1.05;
	text-wrap: balance;
	margin: 0.4rem 0 0;
}
.rp-hero__lede {
	max-width: 44ch;
	margin-top: var( --wp--preset--spacing--60 );
	font-size: var( --wp--preset--font-size--large );
	color: rgb( 247 245 241 / 0.8 );
}
.rp-hero__qualifier {
	margin-top: var( --wp--preset--spacing--50 );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb( 247 245 241 / 0.55 );
}
.rp-hero__cta {
	margin-top: var( --wp--preset--spacing--70 );
}
/* Primary CTA on the dark hero — solid paper fill / ink text for an
   immediately-recognisable, high-contrast (~17:1) primary action. Same brand
   palette, no new colour. */
.rp-hero__cta a.wp-element-button,
.rp-hero__cta a.wp-block-button__link {
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--paper );
}
.rp-hero__cta a.wp-element-button:hover,
.rp-hero__cta a.wp-block-button__link:hover,
.rp-hero__cta a.wp-element-button:focus-visible,
.rp-hero__cta a.wp-block-button__link:focus-visible {
	background-color: #ffffff;
	color: var( --wp--preset--color--ink );
	border-color: #ffffff;
}
/* Lineup visual (right column on desktop, below the copy on mobile). The six
   approved peptide vial renders on a pale stage — the same pale-surface +
   multiply treatment the collection cards use — so the mismatched studio
   backgrounds read as one set. A single dedicated photograph, if supplied,
   drops into .rp-hero__lineup in place of the <ul>. */
.rp-hero__lineup {
	background: #ECEEF1;
	border: 1px solid rgb( 247 245 241 / 0.14 );
	border-radius: 8px;
	padding: clamp( 0.5rem, 0.1rem + 1vw, 0.9rem );
	will-change: transform;
}
.rp-hero__vials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: clamp( 0.25rem, 0.05rem + 0.6vw, 0.6rem );
}
.rp-hero__vials li {
	margin: 0;
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
}
.rp-hero__vials img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	mix-blend-mode: multiply;
	display: block;
}
@media ( max-width: 599.98px ) {
	.rp-hero__vials {
		grid-template-columns: repeat( 2, 1fr );
	}
}

/* --- B · RESEARCH COLLECTION --------------------------------------- */
.rp-collection__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.rp-collection__head {
	max-width: 46ch;
	margin-bottom: var( --wp--preset--spacing--70 );
}
@media ( min-width: 700px ) {
	.rp-collection__head {
		margin-bottom: var( --wp--preset--spacing--80 );
	}
}
.rp-collection__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.8rem, 1.2rem + 2vw, 2.6rem );
	line-height: 1.1;
	text-wrap: balance;
	margin: 0.35rem 0 0;
}
.rp-collection__note {
	margin-top: var( --wp--preset--spacing--50 );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
/* Six-peptide lineup: 2-up mobile, 3-up from 768px (a clean 3×2 on desktop —
   no 4-up, the lineup is exactly six). Compact row gap on mobile, roomier up. */
.rp-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( 2, 1fr );
	gap: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--50 );
}
@media ( min-width: 768px ) {
	.rp-grid {
		grid-template-columns: repeat( 3, 1fr );
		gap: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--60 );
	}
}
/* Found alongside the same bug in the Concierge widget CSS: research-shop.js
   sets grid.hidden on this element during a Request Catalog search with zero
   matches, but `display: grid` above was never overridden for [hidden] — each
   .rp-card already hides individually so this had no visible effect, but the
   empty grid should collapse to none, not an empty grid box. */
.rp-grid[hidden] { display: none; }

/* --- C · RESEARCH SUPPORT (BAC Water — full-width split section) ---- *
 * Deliberately NOT the catalogue grid: a cool-grey full-bleed band, a large
 * product image on its own stage, and a two-column editorial layout say
 * "separate Research Support section", not "product #7". */
.rp-support {
	background: #F2F3F6;
}
.rp-support[hidden] { display: none; }
.rp-support__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.rp-support__split {
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	align-items: center;
}
.rp-support__split[hidden] { display: none; }
@media ( min-width: 900px ) {
	.rp-support__split {
		grid-template-columns: 45fr 55fr;
		gap: var( --wp--preset--spacing--90 );
	}
}
.rp-support__content {
	max-width: 40ch;
}
.rp-support__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1.3rem + 2vw, 2.8rem );
	line-height: 1.08;
	text-wrap: balance;
	margin: 0.35rem 0 0;
}
.rp-support__body {
	margin-top: var( --wp--preset--spacing--50 );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.5;
	color: var( --wp--preset--color--warm-grey );
}
.rp-support__meta {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem var( --wp--preset--spacing--70 );
}
.rp-support__meta > div {
	display: flex;
	flex-direction: column;
	gap: 0.2rem;
}
.rp-support__meta dt {
	margin: 0;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}
.rp-support__meta dd {
	margin: 0;
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}
.rp-support__price .woocommerce-Price-amount {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 500;
	white-space: nowrap;
}
.rp-support__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.6rem var( --wp--preset--spacing--50 );
	margin: var( --wp--preset--spacing--60 ) 0 0;
}
.rp-support__buy .rp-card__add {
	flex: 1 1 12rem;
	min-height: 2.9rem;
	padding: 0.7em 1.8em;
	font-size: var( --wp--preset--font-size--x-small );
}
.rp-support__qualifier {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	max-width: 46ch;
	font-size: var( --wp--preset--font-size--x-small );
	line-height: 1.5;
	letter-spacing: 0.02em;
	color: var( --wp--preset--color--warm-grey );
}
.rp-support__stage {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ECEEF1;
	border: 1px solid var( --celsyn-hairline, #E7E3DB );
	border-radius: 6px;
	aspect-ratio: 1 / 1;
	padding: 9%;
	isolation: isolate;
	overflow: hidden;
}
.rp-support__stage img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	mix-blend-mode: multiply;
	transition: transform var( --celsyn-dur-mid, 320ms ) var( --celsyn-ease, ease );
}
.rp-support__stage:hover img,
.rp-support__stage:focus-visible img {
	transform: scale( 1.02 );
}
.rp-support__stage:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}
@media ( max-width: 899.98px ) {
	.rp-support__media {
		margin-top: var( --wp--preset--spacing--70 );
	}
	.rp-support__stage {
		aspect-ratio: 4 / 3;
		padding: 7%;
	}
}
/* --- Research search --------------------------------------------- */
.rp-search {
	position: relative;
	display: flex;
	align-items: center;
	max-width: 26rem;
	margin: 0 0 var( --wp--preset--spacing--70 );
}
.rp-search__icon {
	position: absolute;
	left: 0.9rem;
	font-size: 1rem;
	color: var( --wp--preset--color--warm-grey );
	pointer-events: none;
}
.rp-search__input {
	width: 100%;
	padding: 0.7rem 5rem 0.7rem 2.4rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
	background: #fff;
	border: 1px solid var( --celsyn-hairline, #E7E3DB );
	border-radius: 4px;
	appearance: none;
}
.rp-search__input::-webkit-search-cancel-button {
	appearance: none;
}
.rp-search__input:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 1px;
	border-color: var( --wp--preset--color--accent );
}
.rp-search__clear {
	position: absolute;
	right: 0.4rem;
	appearance: none;
	background: none;
	border: 0;
	padding: 0.4em 0.6em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
	text-decoration: underline;
	text-underline-offset: 0.2em;
	cursor: pointer;
}
.rp-search__clear:hover { color: var( --wp--preset--color--ink ); }
.rp-collection__empty {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.rp-collection__empty [data-rp-clear] {
	background: none;
	border: 0;
	padding: 0;
	margin-left: 0.4em;
	cursor: pointer;
	font: inherit;
}

/* --- Research product card (real WooCommerce product) ------------ */
.rp-card {
	display: flex;
	flex-direction: column;
}
.rp-card[hidden] { display: none; }
/* Consistent visual STAGE for every vial photo without touching the artwork:
   uniform pale cool-grey surface, uniform inset, whole vial always shown
   (object-fit: contain), centred. mix-blend-mode: multiply folds each render's
   near-white studio background into the shared surface. */
.rp-card__media {
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ECEEF1;
	border: 1px solid var( --celsyn-hairline, #E7E3DB );
	border-radius: 4px;
	overflow: hidden;
	aspect-ratio: 1 / 1;
	isolation: isolate;
	padding: 7%;
}
.rp-card__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	object-position: center;
	display: block;
	mix-blend-mode: multiply;
	transition: transform var( --celsyn-dur-mid ) var( --celsyn-ease );
}
.rp-card:hover .rp-card__media img,
.rp-card:focus-within .rp-card__media img {
	transform: scale( 1.03 );
}
.rp-card__name {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.2;
	color: var( --wp--preset--color--ink );
}
.rp-card__name a {
	color: inherit;
	text-decoration: none;
}
.rp-card__name a:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.rp-card__name a:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 2px;
}
.rp-card__strength {
	margin: 0.2rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
	font-variant-numeric: tabular-nums;
}
/* Public retail price — easy to find, not oversized. No sale/intro/crossed-out
   price is ever configured, so get_price_html() renders a single plain amount. */
.rp-card__price {
	margin: 0.35rem 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
	color: var( --wp--preset--color--ink );
	font-variant-numeric: tabular-nums;
}
.rp-card__price .woocommerce-Price-amount { white-space: nowrap; }
.rp-card__flag {
	margin: 0.5rem 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: rgb( 91 93 99 / 0.7 );
}
.rp-card__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
	margin-top: auto;
	padding-top: var( --wp--preset--spacing--50 );
}
.rp-qty {
	display: inline-flex;
	align-items: stretch;
	border: 1px solid var( --celsyn-hairline, #E7E3DB );
	border-radius: 4px;
	overflow: hidden;
	background: #fff;
}
.rp-qty__btn {
	appearance: none;
	background: none;
	border: 0;
	width: 2.75rem;
	min-height: 2.75rem;
	font-size: 1.1rem;
	line-height: 1;
	color: var( --wp--preset--color--ink );
	cursor: pointer;
}
.rp-qty__btn:hover { background: rgb( 18 22 31 / 0.05 ); }
.rp-qty__btn:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: -2px;
}
.rp-qty__input {
	width: 2.6rem;
	border: 0;
	border-inline: 1px solid var( --celsyn-hairline, #E7E3DB );
	text-align: center;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--small );
	font-variant-numeric: tabular-nums;
	color: var( --wp--preset--color--ink );
	background: #fff;
	appearance: textfield;
	-moz-appearance: textfield;
}
.rp-qty__input::-webkit-outer-spin-button,
.rp-qty__input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.rp-qty__input:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: -2px;
}
.rp-card__add {
	flex: 1 1 8rem;
	min-height: 2.75rem;
	padding: 0.5em 0.9em;
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.03em;
	text-transform: uppercase;
	white-space: nowrap;
}
.rp-card__add.is-loading { opacity: 0.7; cursor: progress; }
.rp-card__feedback {
	flex-basis: 100%;
	min-height: 0;
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	opacity: 0;
	transition: opacity var( --celsyn-dur-fast ) var( --celsyn-ease );
}
.rp-card__feedback.is-shown { opacity: 1; }
@media ( max-width: 767.98px ) {
	/* keep names + flag on one line so 2-up card heights match */
	.rp-card__name { font-size: var( --wp--preset--font-size--medium ); }
	.rp-card__media { padding: 9%; }
	.rp-card__flag { font-size: 0.7rem; letter-spacing: 0.05em; white-space: nowrap; }
	.rp-card__buy { flex-direction: column; align-items: stretch; }
	.rp-qty { align-self: flex-start; }
	.rp-card__add { flex: 1 1 auto; }
}

/* --- Research-use notice in cart / checkout --------------------- */
.celsyn-research-notice {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin: 0 auto var( --wp--preset--spacing--60 );
	padding: 0.9rem 1.1rem;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--ink );
	background: rgb( 14 88 191 / 0.06 );
	border: 1px solid rgb( 14 88 191 / 0.2 );
	border-radius: 4px;
}

/* --- C · RESEARCH QUALITY / DOCUMENTATION ------------------------- */
.rp-quality__wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.rp-quality__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.8rem, 1.2rem + 2vw, 2.6rem );
	line-height: 1.1;
	text-wrap: balance;
	max-width: 22ch;
	margin: 0.35rem 0 0;
}
.rp-quality__body {
	max-width: 52ch;
	margin-top: var( --wp--preset--spacing--60 );
	font-size: var( --wp--preset--font-size--large );
	color: rgb( 247 245 241 / 0.8 );
}
.rp-quality__chips {
	list-style: none;
	margin: var( --wp--preset--spacing--70 ) 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 0.7rem;
}
.rp-quality__chips li {
	padding: 0.5em 1em;
	border: 1px solid var( --celsyn-hairline-strong, rgb( 247 245 241 / 0.34 ) );
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: rgb( 247 245 241 / 0.78 );
}

/* --- D · RESEARCH NOTICE (last section — transitions into the footer) --- */
.rp-notice {
	padding-bottom: var( --wp--preset--spacing--80 );
}
.rp-notice__wrap {
	max-width: 640px;
	margin-inline: auto;
	padding: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--60 );
	border-block: 1px solid var( --celsyn-hairline, #E7E3DB );
	text-align: center;
}
.rp-notice__lead {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
	color: var( --wp--preset--color--ink );
	margin: 0;
}
.rp-notice__sub {
	max-width: 48ch;
	margin: var( --wp--preset--spacing--50 ) auto 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}

/* ==================================================================== *
 * RESEARCH ACCESS GATE  (research routes only)
 * Confirmation modal. The <head> script (functions.php) adds
 * html.celsyn-research-page always, and html.celsyn-research-gated before
 * first paint when the 30-day cookie is absent — so the position:fixed
 * overlay is on screen from the first frame, with no reflow and no flash.
 * The scrollbar gutter is reserved on research pages so the scroll-lock
 * never shifts the layout. Nothing here loads on non-research pages.
 * ==================================================================== */
html.celsyn-research-page {
	scrollbar-gutter: stable;
}
html.celsyn-research-gated {
	overflow: hidden;
}
html.celsyn-research-gated .celsyn-gate {
	display: flex !important;
}
.celsyn-gate {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: none;
	align-items: center;
	justify-content: center;
	padding: clamp( 1rem, 5vw, 2.5rem );
	background: rgb( 10 13 20 / 0.72 );
}
@supports ( ( backdrop-filter: blur( 4px ) ) or ( -webkit-backdrop-filter: blur( 4px ) ) ) {
	.celsyn-gate {
		background: rgb( 10 13 20 / 0.55 );
		-webkit-backdrop-filter: blur( 5px );
		backdrop-filter: blur( 5px );
	}
}
.celsyn-gate__card {
	width: 100%;
	max-width: 34rem;
	background: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	border-radius: 6px;
	padding: clamp( 1.6rem, 1rem + 3vw, 2.75rem );
	box-shadow: 0 24px 70px -24px rgb( 8 11 17 / 0.55 );
	max-height: calc( 100vh - 2rem );
	max-height: calc( 100dvh - 2rem );
	overflow-y: auto;
}
.celsyn-gate__eyebrow {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}
.celsyn-gate__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.1rem );
	line-height: 1.15;
	margin: 0.5rem 0 0;
}
.celsyn-gate__body {
	margin-top: var( --wp--preset--spacing--60 );
}
.celsyn-gate__body p {
	margin: 0 0 0.8em;
	font-size: var( --wp--preset--font-size--small );
	line-height: 1.55;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-gate__body p:last-child {
	margin-bottom: 0;
}
.celsyn-gate__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: var( --wp--preset--spacing--70 );
}
.celsyn-gate__accept {
	background-color: var( --wp--preset--color--accent );
	color: var( --wp--preset--color--paper );
	border-color: var( --wp--preset--color--accent );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.05em;
	text-transform: uppercase;
}
.celsyn-gate__accept:hover,
.celsyn-gate__accept:focus-visible {
	background-color: #0a49a0;
	border-color: #0a49a0;
	color: var( --wp--preset--color--paper );
}
.celsyn-gate__decline {
	appearance: none;
	background: none;
	border: 0;
	padding: 0.5em 0.2em;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
	text-decoration: underline;
	text-underline-offset: 0.25em;
	cursor: pointer;
}
.celsyn-gate__decline:hover {
	color: var( --wp--preset--color--ink );
}
.celsyn-gate__accept:focus-visible,
.celsyn-gate__decline:focus-visible {
	outline: 2px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
}
.celsyn-gate__foot {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: rgb( 18 22 31 / 0.5 );
}
@media ( prefers-reduced-motion: reduce ) {
	/* drop the blur; a flatter, more opaque scrim reads calmer */
	.celsyn-gate {
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
		background: rgb( 10 13 20 / 0.84 );
	}
}
@media ( max-width: 479.98px ) {
	.celsyn-gate__actions {
		flex-direction: column;
		align-items: stretch;
	}
	.celsyn-gate__accept {
		width: 100%;
	}
	.celsyn-gate__decline {
		text-align: center;
	}
}

/* ==================================================================== *
 * Why CELSYN (/our-approach/, label "Why CELSYN") — the consolidated
 * brand-story page. Merges the retired "Our Approach" + "About" pages.
 * Narrow editorial column; one contained dark band; no divider-line
 * decoration.
 * ==================================================================== */
.celsyn-wc {
	--celsyn-wc-measure: 40rem;
}
.celsyn-wc__wrap {
	max-width: var( --celsyn-wc-measure );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--50 );
}
.celsyn-wc section + section {
	margin-top: 0;
}
/* Tighten the vertical rhythm — the global .celsyn-sec presets double up
   between adjacent sections and leave giant empty bands on this page. */
.celsyn-wc .celsyn-sec--tight {
	padding-block: var( --wp--preset--spacing--70 );
}
.celsyn-wc__hero.celsyn-sec--tight {
	padding-top: var( --wp--preset--spacing--50 );
}
.celsyn-wc__final.celsyn-sec--tight {
	padding-top: var( --wp--preset--spacing--60 );
}

.celsyn-wc__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.2rem, 1.4rem + 3.2vw, 3.4rem );
	line-height: 1.04;
	text-wrap: balance;
	margin: 0.3rem 0 0;
}
.celsyn-wc__lede {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-size: var( --wp--preset--font-size--large );
	line-height: 1.5;
	color: var( --wp--preset--color--warm-grey );
	max-width: 46ch;
}
.celsyn-wc__h {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 1.2rem + 1.6vw, 2.2rem );
	line-height: 1.12;
	text-wrap: balance;
	margin: 0 0 var( --wp--preset--spacing--50 );
}
.celsyn-wc__exist p,
.celsyn-wc__final p {
	margin: 0 0 1em;
	color: var( --wp--preset--color--warm-grey );
	max-width: 44ch;
}
.celsyn-wc__exist p:last-child,
.celsyn-wc__final p:last-child {
	margin-bottom: 0;
}

/* --- C · Four principles — 2×2 on desktop, stack on mobile --------- */
.celsyn-wc__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 ) var( --wp--preset--spacing--80 );
}
@media ( min-width: 640px ) {
	.celsyn-wc__grid {
		grid-template-columns: 1fr 1fr;
	}
}
.celsyn-wc__grid > li {
	margin: 0;
}
.celsyn-wc__n {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
	margin: 0;
}
.celsyn-wc__ph {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
	margin: 0.3rem 0 0.4rem;
}
.celsyn-wc__grid p:last-child {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
}

/* --- D · What we leave out — contained dark band ------------------- */
.celsyn-wc__leaveout.celsyn-sec {
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	border-radius: 4px;
	margin-block: var( --wp--preset--spacing--70 );
	padding-block: var( --wp--preset--spacing--80 );
}
.celsyn-wc__leaveout > .celsyn-wc__wrap {
	padding-inline: var( --wp--preset--spacing--60 );
}
.celsyn-wc__leaveout .celsyn-wc__h {
	color: var( --wp--preset--color--paper );
}
.celsyn-wc__leaveout .celsyn-wc__lede {
	color: rgb( 247 245 241 / 0.8 );
}
.celsyn-wc__list {
	list-style: none;
	margin: var( --wp--preset--spacing--60 ) 0 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--60 );
}
@media ( min-width: 720px ) {
	.celsyn-wc__list {
		grid-template-columns: repeat( 3, 1fr );
		gap: var( --wp--preset--spacing--70 );
	}
}
.celsyn-wc__list > li {
	margin: 0;
}
.celsyn-wc__lh {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--paper );
	margin: 0 0 0.35rem;
}
.celsyn-wc__list p:last-child {
	margin: 0;
	color: rgb( 247 245 241 / 0.72 );
	font-size: var( --wp--preset--font-size--small );
}

/* --- E · Skincare / Research distinction -------------------------- */
.celsyn-wc__cols {
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	margin-top: var( --wp--preset--spacing--60 );
}
@media ( min-width: 680px ) {
	.celsyn-wc__cols {
		grid-template-columns: 1fr 1fr;
		gap: var( --wp--preset--spacing--80 );
	}
}
.celsyn-wc__col p {
	margin: 0 0 0.8em;
	color: var( --wp--preset--color--warm-grey );
}
.celsyn-wc__cn {
	font-family: var( --wp--preset--font-family--body ) !important;
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --wp--preset--color--ink ) !important;
}
.celsyn-wc__q {
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
	font-style: italic;
}

/* --- F · Final CTA ----------------------------------------------- */
.celsyn-wc__final-inner {
	text-align: center;
}
.celsyn-wc__final-inner p {
	margin-inline: auto;
}
.celsyn-wc__cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--60 );
	margin-top: var( --wp--preset--spacing--60 );
}

/* ====================================================================== *
 * RESEARCH MEMBERSHIP (2026-09-13) — the public landing page
 * (/research/ for guest/pending/declined visitors), the application page
 * (/research-access/), and the member-only Request Catalog
 * (/research-request-catalog/). No product name, image, strength, or price
 * ever appears in any of this — there is deliberately nothing here to style
 * as a product.
 * ====================================================================== */

.rmem-hero {
	padding-block: var( --wp--preset--spacing--90 );
	overflow: hidden;
	text-align: center;
}
.rmem-hero__wrap {
	max-width: 640px;
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.rmem-hero__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 2.2rem, 1.3rem + 3.6vw, 3.5rem );
	line-height: 1.06;
	text-wrap: balance;
	margin: 0.4rem 0 0;
}
.rmem-hero__lede {
	max-width: 46ch;
	margin: var( --wp--preset--spacing--60 ) auto 0;
	font-size: var( --wp--preset--font-size--large );
	color: rgb( 247 245 241 / 0.8 );
}
.rmem-hero__qualifier {
	margin-top: var( --wp--preset--spacing--50 );
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgb( 247 245 241 / 0.55 );
}
.rmem-hero__cta {
	margin-top: var( --wp--preset--spacing--70 );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: var( --wp--preset--spacing--60 );
}
.rmem-hero__cta a.wp-element-button,
.rmem-hero__cta a.wp-block-button__link {
	background-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--paper );
}
.rmem-hero__cta a.wp-element-button:hover,
.rmem-hero__cta a.wp-block-button__link:hover,
.rmem-hero__cta a.wp-element-button:focus-visible,
.rmem-hero__cta a.wp-block-button__link:focus-visible {
	background-color: #ffffff;
	color: var( --wp--preset--color--ink );
	border-color: #ffffff;
}
.is-style-celsyn-dark .rmem-hero__cta .celsyn-textlink {
	color: var( --wp--preset--color--accent-cyan );
}

/* --- status notices (pending / declined / approved) — shared by the
   landing page and the application page, light and dark contexts ------- */
.rmem-status {
	margin-top: var( --wp--preset--spacing--70 );
	margin-inline: auto;
	max-width: 46ch;
	padding: var( --wp--preset--spacing--60 ) var( --wp--preset--spacing--70 );
	border-radius: 4px;
	text-align: left;
}
.is-style-celsyn-dark .rmem-status {
	background: rgb( 247 245 241 / 0.08 );
	border: 1px solid rgb( 247 245 241 / 0.18 );
}
.rmem-apply .rmem-status {
	margin-inline: 0;
	background: var( --celsyn-product-surface, #F8F7F4 );
	border: 1px solid var( --celsyn-hairline );
}
.rmem-status__label {
	margin: 0 0 0.35rem;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}
.is-style-celsyn-dark .rmem-status__label {
	color: var( --wp--preset--color--accent-cyan );
}
.rmem-status p {
	margin: 0;
}
.rmem-status p + p {
	margin-top: 0.5em;
}

/* --- B · how access works ------------------------------------------- */
.rmem-wrap {
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--preset--spacing--60 );
}
.rmem-how__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.7rem, 1.2rem + 1.8vw, 2.4rem );
	line-height: 1.1;
	text-align: center;
	margin: 0 0 var( --wp--preset--spacing--80 );
}
.rmem-steps {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	max-width: 900px;
	margin-inline: auto;
}
@media ( min-width: 720px ) {
	.rmem-steps {
		grid-template-columns: repeat( 3, 1fr );
	}
}
.rmem-steps li {
	margin: 0;
	text-align: center;
}
.rmem-steps p {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
}
.rmem-steps__n {
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent ) !important;
}
.rmem-steps__h {
	margin: 0.35rem 0 0.5rem !important;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink ) !important;
}

/* --- C · request-program teaser (landing page) + the member-side teaser
   (research-request-teaser.php) share this panel treatment -------------- */
.rmem-request__panel {
	max-width: 760px;
	margin-inline: auto;
	padding: var( --wp--preset--spacing--80 ) var( --wp--preset--spacing--70 );
	background: var( --celsyn-product-surface, #F8F7F4 );
	border-radius: 4px;
	text-align: center;
}
.rmem-request__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.6rem, 1.2rem + 1.4vw, 2.1rem );
	line-height: 1.15;
	margin: 0 0 var( --wp--preset--spacing--50 );
}
.rmem-request__panel p {
	color: var( --wp--preset--color--warm-grey );
	max-width: 50ch;
	margin-inline: auto;
}
.rmem-request__cta {
	display: inline-block;
	margin-top: var( --wp--preset--spacing--60 );
	padding: 0.8em 1.4em;
	border: 1px solid var( --celsyn-hairline-strong );
	border-radius: 3px;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
	cursor: default;
}
.rmem-request__panel .wp-block-button__link {
	margin-top: var( --wp--preset--spacing--60 );
}

/* --- Why Membership (guest marketing state, /research-access/) -------- */
.rmem-why__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	max-width: 960px;
	margin-inline: auto;
}
@media ( min-width: 720px ) {
	.rmem-why__grid {
		grid-template-columns: repeat( 3, 1fr );
	}
}
.rmem-why__item {
	margin: 0;
	padding-top: var( --wp--preset--spacing--60 );
	border-top: 2px solid var( --wp--preset--color--accent );
}
.rmem-why__h {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
}
.rmem-why__item p:last-child {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
	line-height: 1.6;
}

/* --- research-use notice bar (/research-access/, guest marketing page) - */
.rmem-notice {
	padding-block: var( --wp--preset--spacing--60 );
	text-align: center;
}
.rmem-notice p {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var( --wp--preset--color--warm-grey );
}

/* --- application page (/research-access/) ---------------------------- */
.rmem-apply__wrap {
	max-width: 40rem;
}
.rmem-apply__cta {
	margin-top: var( --wp--preset--spacing--70 );
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var( --wp--preset--spacing--60 );
}
.rmem-apply__cta--center {
	justify-content: center;
}
.rmem-apply__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1.3rem + 2vw, 2.6rem );
	line-height: 1.1;
	margin: 0.3rem 0 0;
}
.rmem-apply__lede {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--warm-grey );
}
.rmem-apply__note {
	margin: var( --wp--preset--spacing--60 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
.rmem-apply__note--error {
	/* Accessibility (form UX polish, 2026-09-14): border + tinted background +
	   accent bar, not color alone — same treatment as the sitewide
	   .celsyn-notice--error component. */
	padding: 0.9rem 1.1rem;
	border-radius: 3px;
	border: 1px solid var( --celsyn-error );
	box-shadow: inset 3px 0 0 var( --celsyn-error );
	background: var( --celsyn-error-field );
	color: var( --celsyn-error );
}
.rmem-form {
	margin-top: var( --wp--preset--spacing--70 );
	max-width: none;
}
.rmem-form__ack {
	flex-direction: row !important;
	align-items: flex-start;
	gap: 0.6rem !important;
}
.rmem-form__ack label {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	font-weight: 400 !important;
	font-size: var( --wp--preset--font-size--small ) !important;
	color: var( --wp--preset--color--warm-grey );
}
.rmem-form__ack input[type="checkbox"] {
	margin-top: 0.25em;
	flex-shrink: 0;
}

/* --- Research Request Catalog search (member-only) -------------------- */
.rmem-catalog-search {
	max-width: 34rem;
}
.rmem-catalog-search button[type="submit"] {
	position: static;
	margin-left: 0.5rem;
	padding: 0.6em 1.2em;
	background: var( --wp--preset--color--ink );
	color: var( --wp--preset--color--paper );
	border: 0;
	border-radius: 3px;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	cursor: pointer;
}
.rmem-catalog-search button[type="submit"]:hover {
	background: var( --wp--preset--color--accent );
}
.rmem-catalog-results {
	list-style: none;
	margin: var( --wp--preset--spacing--70 ) 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
}
.rmem-catalog-result {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var( --wp--preset--spacing--60 );
	padding: var( --wp--preset--spacing--60 );
	border: 1px solid var( --celsyn-hairline );
	border-radius: 4px;
}
.rmem-catalog-result__name {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--medium );
	color: var( --wp--preset--color--ink );
}
.rmem-catalog-result__spec {
	margin: 0.2rem 0 0;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}
@media ( max-width: 479.98px ) {
	.rmem-catalog-result {
		flex-direction: column;
		align-items: stretch;
	}
}

/* ====================================================================== *
 * BECOME A DISTRIBUTOR (2026-09-13) — header CTA + /distributors/ page.
 * Reuses .rmem-hero / .rmem-wrap / .rmem-how__title / .rmem-steps /
 * .rmem-request__panel / .celsyn-form / .celsyn-faq-item wholesale (this
 * page needed the exact same "dark hero -> centered content -> numbered
 * steps -> panel -> form -> FAQ" shape those already provide) — only the
 * genuinely new layouts (the 4-point opportunity/who-it's-for grids and the
 * plain benefits list) get new classes below.
 * ====================================================================== */

/* --- header nav CTA: subtle outline, not a nav link, not a flashy pill - */
.wp-block-navigation-item.celsyn-nav-cta > a.wp-block-navigation-item__content {
	padding: 0.45em 1em;
	border: 1px solid rgb( 247 245 241 / 0.4 );
	border-radius: 3px;
	transition: background-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease ),
	            border-color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease ),
	            color var( --celsyn-dur-fast, 180ms ) var( --celsyn-ease-inout, ease );
}
.wp-block-navigation-item.celsyn-nav-cta > a.wp-block-navigation-item__content:hover,
.wp-block-navigation-item.celsyn-nav-cta > a.wp-block-navigation-item__content:focus-visible {
	background-color: var( --wp--preset--color--paper );
	border-color: var( --wp--preset--color--paper );
	color: var( --wp--preset--color--ink );
}
/* Mobile overlay menu: give it the same room and weight as a real action,
   not a cramped inline link, since it's the one CTA in that list. */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.celsyn-nav-cta {
	margin-top: 0.4rem;
}
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item.celsyn-nav-cta > a.wp-block-navigation-item__content {
	display: inline-flex;
	padding: 0.7em 1.4em;
}

/* --- opportunity summary / who it's for: parallel points, no numbering - */
.dist-points {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: var( --wp--preset--spacing--70 );
	max-width: 1100px;
	margin-inline: auto;
}
@media ( min-width: 700px ) {
	.dist-points {
		grid-template-columns: repeat( 2, 1fr );
	}
}
@media ( min-width: 1000px ) {
	.dist-points {
		grid-template-columns: repeat( 4, 1fr );
	}
}
.dist-points__item {
	margin: 0;
	padding-top: var( --wp--preset--spacing--60 );
	border-top: 2px solid var( --wp--preset--color--accent );
}
.dist-points__h {
	margin: 0 0 0.5rem;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--ink );
}
.dist-points__item p:last-child {
	margin: 0;
	color: var( --wp--preset--color--warm-grey );
	line-height: 1.6;
}
.dist-note {
	margin: var( --wp--preset--spacing--70 ) 0 0;
	text-align: center;
	font-size: var( --wp--preset--font-size--small );
	color: var( --wp--preset--color--warm-grey );
}

/* How It Works has 4 real steps here (vs. 3 elsewhere) — same .rmem-steps
   shape, one more column at the same breakpoint it already uses. */
@media ( min-width: 900px ) {
	.dist-steps {
		grid-template-columns: repeat( 4, 1fr );
	}
}

/* --- program benefits: a plain list, deliberately not cards ------------ */
.dist-benefits {
	list-style: none;
	margin: var( --wp--preset--spacing--70 ) 0 0;
	padding: 0;
	max-width: 34rem;
	margin-inline: auto;
	display: flex;
	flex-direction: column;
	gap: var( --wp--preset--spacing--50 );
}
.dist-benefits li {
	position: relative;
	padding-left: 1.6rem;
	color: var( --wp--preset--color--ink );
}
.dist-benefits li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var( --wp--preset--color--accent );
}

/* ====================================================================== *
 * FINAL SITEWIDE UI/UX + CONVERSION POLISH (2026-09-13)
 * ====================================================================== */

/* --- Distributor hero: stronger primary CTA, value row pulled closer --- */
.dist-hero .dist-hero__cta-primary {
	padding: 1em 1.9em;
	font-size: var( --wp--preset--font-size--medium );
	font-weight: 600;
}
.dist-section--lead {
	padding-top: var( --wp--preset--spacing--70 );
}

/* --- Closing CTA band: pale cool-blue distinction, not another hero ----- */
.celsyn-final {
	background: rgb( 14 88 191 / 0.05 );
}

/* --- Shop: large editorial product panels (replaces small Woo cards) --- */
.shop-panels {
	display: grid;
	gap: var( --wp--preset--spacing--80 );
	max-width: var( --wp--style--global--wide-size, 1200px );
	margin: var( --wp--preset--spacing--70 ) auto 0;
	padding-inline: var( --wp--preset--spacing--60 );
}
@media ( min-width: 780px ) {
	.shop-panels {
		grid-template-columns: repeat( 2, 1fr );
		gap: var( --wp--preset--spacing--90 );
	}
}
.shop-panel {
	display: flex;
	flex-direction: column;
}
.shop-panel__media {
	display: block;
	aspect-ratio: 4 / 5;
	background: var( --celsyn-product-surface, #F8F7F4 );
	display: grid;
	place-items: center;
	padding: clamp( 1.5rem, 6%, 3rem );
	overflow: hidden;
}
.shop-panel__media img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform var( --celsyn-dur-mid, 320ms ) var( --celsyn-ease, ease );
}
.shop-panel:hover .shop-panel__media img,
.shop-panel:focus-within .shop-panel__media img {
	transform: scale( 1.02 );
}
.shop-panel__body {
	margin-top: var( --wp--preset--spacing--60 );
}
.shop-panel__role {
	margin: 0;
	font-family: var( --wp--preset--font-family--body );
	font-size: var( --wp--preset--font-size--x-small );
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var( --wp--preset--color--accent );
}
.shop-panel__name {
	margin: 0.4rem 0 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
}
.shop-panel__name a {
	color: var( --wp--preset--color--ink );
	text-decoration: none;
}
.shop-panel__copy {
	margin: 0.5rem 0 0;
	color: var( --wp--preset--color--warm-grey );
	max-width: 38ch;
}
.shop-panel__cta {
	margin-top: var( --wp--preset--spacing--50 );
	display: inline-block;
}
.shop-together__wrap {
	text-align: center;
}
.shop-together__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.7rem, 1.2rem + 1.8vw, 2.4rem );
	line-height: 1.1;
	margin: 0;
}
.shop-together__body {
	margin: var( --wp--preset--spacing--50 ) 0 var( --wp--preset--spacing--60 );
	color: var( --wp--preset--color--warm-grey );
}

/* --- Contact page: two-column desktop layout --------------------------- */
.contact-page__grid {
	display: grid;
	gap: var( --wp--preset--spacing--90 );
}
@media ( min-width: 900px ) {
	.contact-page__grid {
		grid-template-columns: 5fr 6fr;
		align-items: start;
	}
}
.contact-page__title {
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--display );
	line-height: 1.05;
	margin: 0.35rem 0 0;
	text-wrap: balance;
}
.contact-page__lede {
	margin-top: var( --wp--preset--spacing--50 );
	font-size: var( --wp--preset--font-size--large );
	color: var( --wp--preset--color--warm-grey );
	max-width: 42ch;
}
.contact-page__details {
	margin-top: var( --wp--preset--spacing--60 );
	display: flex;
	flex-direction: column;
	gap: 0.3rem;
}
.contact-page__details p {
	margin: 0;
	font-size: var( --wp--preset--font-size--small );
}
.contact-page__address {
	color: var( --wp--preset--color--warm-grey );
}
.contact-page__routes {
	list-style: none;
	margin: var( --wp--preset--spacing--70 ) 0 0;
	padding: var( --wp--preset--spacing--60 ) 0 0;
	border-top: 1px solid var( --celsyn-hairline );
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}
.contact-page__form .celsyn-form {
	max-width: none;
}

/* --- Track Order: two-column layout with a quiet support panel --------- */
.celsyn-track__grid {
	display: grid;
	gap: var( --wp--preset--spacing--80 );
}
@media ( min-width: 900px ) {
	.celsyn-track__grid {
		grid-template-columns: 6fr 4fr;
		align-items: start;
	}
}
.celsyn-track__support {
	padding: var( --wp--preset--spacing--70 );
	background: var( --celsyn-product-surface, #F8F7F4 );
	border-radius: 4px;
}
.celsyn-track__support-title {
	margin: 0;
	font-family: var( --wp--preset--font-family--display );
	font-size: var( --wp--preset--font-size--x-large );
}
.celsyn-track__support-body {
	margin: 0.6rem 0 0;
	color: var( --wp--preset--color--warm-grey );
	font-size: var( --wp--preset--font-size--small );
}
.celsyn-track__support-cta {
	margin-top: var( --wp--preset--spacing--60 );
	display: inline-flex;
}
.celsyn-track__support-alt {
	margin: var( --wp--preset--spacing--50 ) 0 0;
	font-size: var( --wp--preset--font-size--small );
}
@media ( max-width: 899.98px ) {
	.celsyn-track__support {
		text-align: center;
	}
}