/*
Theme Name: Switchpoint
Theme URI: https://switchpointwm.com
Author: Rock Kitchen Harris
Author URI: https://rkh.co.uk
Description: Block theme for Switchpoint Wealth Management.
Requires at least: 6.6
Tested up to: 7.1
Requires PHP: 7.4
Version: 0.2.7
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: switchpoint
*/

/* Sticky header */
.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
}

.admin-bar .site-header {
	top: var(--wp-admin--admin-bar--height, 32px);
}

/*
 * Sections sit flush: no block gap between header, main, footer,
 * or between full-width sections and whatever sits next to them.
 */
.wp-site-blocks > * + *,
main > * + *,
main > .alignfull,
main > .alignfull + *,
.wp-block-post-content > .alignfull,
.wp-block-post-content > .alignfull + * {
	margin-block-start: 0;
	margin-block-end: 0;
}

main > .wp-block-post-content:first-child > .alignfull:first-child {
	margin-block-start: 0;
}

/*
 * Core navigation only collapses below 600px; the header row (logo, menu,
 * CTAs) runs out of room well before that, so collapse it up to 1080px.
 */
@media (max-width: 1079px) {
	.site-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

	.site-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

	/* Hamburger sits at the far right, after the CTAs */
	.site-header .wp-block-navigation {
		order: 2;
	}

	/* CTAs become icon buttons; the label stays for screen readers */
	.header-cta .wp-element-button {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 44px;
		height: 44px;
		padding: 0;
		font-size: 0;
	}

	.header-cta .wp-element-button::before {
		content: "";
		width: 20px;
		height: 20px;
		background-color: currentColor;
		-webkit-mask: var(--sp-cta-icon) center / contain no-repeat;
		mask: var(--sp-cta-icon) center / contain no-repeat;
	}

	.header-cta__portal {
		--sp-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8'/%3E%3C/svg%3E");
	}

	.header-cta__contact {
		--sp-cta-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a8 8 0 0 1-11.6 7.1L4 21l1.9-5.4A8 8 0 1 1 21 12z'/%3E%3C/svg%3E");
	}
}

/* Mobile menu: 44px touch targets for open/close */
.site-header .wp-block-navigation__responsive-container-open,
.site-header .wp-block-navigation__responsive-container-close {
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-right: -10px;
}

.site-header .wp-block-navigation__responsive-container-open svg,
.site-header .wp-block-navigation__responsive-container-close svg {
	width: 28px;
	height: 28px;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--30) var(--wp--preset--spacing--50) !important;
}

/* White logo top-left of the open menu, level with the close button */
.site-header .is-menu-open .wp-block-navigation__responsive-dialog {
	position: relative;
}

/*
 * "Home" is a menu item only while the nav is collapsed. On desktop the
 * wordmark does that job and a Home link would just pad the bar out.
 */
@media (min-width: 1080px) {
	.site-header .nav-home {
		display: none;
	}
}

.menu-overlay-logo {
	display: none;
}

.site-header .is-menu-open .menu-overlay-logo {
	display: flex;
	align-items: center;
	width: fit-content;
	min-height: 44px;
	transition: opacity var(--sp-fast) ease;
}

.site-header .is-menu-open .menu-overlay-logo:hover {
	opacity: 0.75;
}

.menu-overlay-logo img {
	display: block;
	width: 200px;
	height: auto;
}

.site-header .is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0 !important;
	right: 0 !important;
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: var(--wp--preset--spacing--50) !important;
}

/* Large, well-spaced links in the open overlay */
.site-header .is-menu-open .wp-block-navigation__container {
	gap: 0 !important;
	width: 100%;
}

.site-header .is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgb(255 255 255 / 0.15);
}

.site-header .is-menu-open .wp-block-navigation-item:first-child {
	border-top: 1px solid rgb(255 255 255 / 0.15);
}

.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 1.25rem 0 !important;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.2;
}

.site-header .is-menu-open .wp-block-navigation-item__content::after {
	content: none;
}

/*
 * Overlay calls to action: only ever seen inside the open menu, where the
 * header's icon-only buttons are easy to miss.
 */
.menu-overlay-cta {
	display: none;
}

.site-header .is-menu-open .menu-overlay-cta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--20);
	width: 100%;
	margin-top: var(--wp--preset--spacing--50);
}

.menu-overlay-cta__link {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	padding: 0.8em 1.6em;
	border: 1px solid currentColor;
	color: var(--wp--preset--color--white);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	text-decoration: none;
	transition: background-color var(--sp-fast) ease, color var(--sp-fast) ease;
}

.menu-overlay-cta__link--contact {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--purple);
}

.menu-overlay-cta__link--portal:hover,
.menu-overlay-cta__link--portal:focus-visible {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--purple);
}

.menu-overlay-cta__link--contact:hover,
.menu-overlay-cta__link--contact:focus-visible {
	background-color: transparent;
	color: var(--wp--preset--color--white);
}

.header-cta {
	flex-wrap: nowrap;
}

.header-cta .wp-element-button {
	white-space: nowrap;
}

/*
 * Logo: the full lockup, "Wealth Management" included. It holds its size as
 * the sticky header scrolls so the strapline stays legible.
 */
.site-header .site-logo {
	--sp-logo-w: 275px;
	flex-shrink: 0;
	width: var(--sp-logo-w);
}

.site-header .site-logo img {
	width: 100% !important;
}

@media (max-width: 599px) {
	.site-header .site-logo {
		--sp-logo-w: 180px;
	}
}

/* Visible focus */
:where(a, button, input, .wp-element-button):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 3px;
}

/* ==========================================================================
   Micro interactions
   ========================================================================== */

:root {
	--sp-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--sp-fast: 180ms;
	--sp-slow: 700ms;
}

/* Text links: underline fades rather than snapping */
a {
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition:
		color var(--sp-fast) ease,
		text-decoration-color var(--sp-fast) ease,
		opacity var(--sp-fast) ease;
}

:where(p, li) a:hover {
	text-decoration-color: transparent;
}

/* Buttons */
.wp-element-button,
.wp-block-button__link {
	transition:
		background-color var(--sp-fast) ease,
		border-color var(--sp-fast) ease,
		color var(--sp-fast) ease,
		transform var(--sp-fast) var(--sp-ease);
}

.wp-block-button__link:active,
.wp-element-button:active {
	transform: translateY(1px);
}

/* Outline buttons fill on hover */
.wp-block-button.is-style-outline > .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--purple);
	border-color: var(--wp--preset--color--purple);
	color: var(--wp--preset--color--white);
}

/* Site CTA button: the brand delta doubles as the arrow */
.cta-delta-button > .wp-block-button__link::after {
	content: "";
	display: inline-block;
	width: 0.5em;
	/* Matches the 87:100 delta used for the hero media and section watermark */
	height: 0.575em;
	margin-left: 0.7em;
	vertical-align: -0.02em;
	background-color: currentColor;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	transition: transform var(--sp-fast) var(--sp-ease);
}

.cta-delta-button > .wp-block-button__link:hover::after,
.cta-delta-button > .wp-block-button__link:focus-visible::after {
	transform: translateX(0.2em);
}

@media (prefers-reduced-motion: reduce) {
	.cta-delta-button > .wp-block-button__link::after {
		transition: none;
	}

	.cta-delta-button > .wp-block-button__link:hover::after,
	.cta-delta-button > .wp-block-button__link:focus-visible::after {
		transform: none;
	}
}

/* Light buttons on dark/image backgrounds */
.wp-block-cover .wp-block-button__link.has-white-background-color:hover {
	background-color: transparent !important;
	color: var(--wp--preset--color--white) !important;
}

/* Navigation: underline draws in from the left */
.wp-block-navigation .wp-block-navigation-item__content {
	position: relative;
}

.wp-block-navigation .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.35em;
	height: 1px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 300ms var(--sp-ease);
}

.wp-block-navigation .wp-block-navigation-item__content:hover::after,
.wp-block-navigation .current-menu-item > .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Logo */
.site-logo a {
	display: block;
	transition: opacity var(--sp-fast) ease;
}

.site-logo a:hover {
	opacity: 0.75;
}

/* Header gains a soft shadow once the page scrolls (progressive enhancement) */
@supports (animation-timeline: scroll()) {
	.site-header:not(.site-header--home) > .wp-block-group {
		animation: sp-header-shadow linear both;
		animation-timeline: scroll(root);
		animation-range: 0 120px;
	}

	@keyframes sp-header-shadow {
		to {
			box-shadow: 0 6px 24px rgb(63 42 86 / 0.08);
		}
	}
}

/* ==========================================================================
   Homepage header
   --------------------------------------------------------------------------
   Over the hero the bar starts transparent and overlaid, carrying the white
   logo, then collapses to the standard white bar with the purple logo once
   the page scrolls.

   The collapse is a threshold, not a scrub. Scrubbing it washed the bar out:
   white type over a background part-way to white is unreadable, and every
   scroll position in that stretch sat in the wash. So the scroll timeline
   only flips --sp-home-solid between 0 and 1 at 24px, and everything else is
   derived from that var and eased by an ordinary CSS transition — 180ms of
   time, passed through once, rather than 50px of scrolling you can stop in
   the middle of.

   The scrolled state is the resting state of every declaration below, so a
   browser without scroll-driven animations gets exactly the header every
   other page has, never a white logo on a white bar. @property and
   color-mix() are both supported everywhere scroll timelines are.
   ========================================================================== */
@supports (animation-timeline: scroll()) {
	/* 0 over the hero, 1 once the bar has collapsed. */
	@property --sp-home-solid {
		syntax: "<number>";
		inherits: true;
		initial-value: 1;
	}

	/*
	 * Fixed rather than sticky: the hero has to run underneath the bar, not
	 * start below it. Its content is vertically centred, so nothing is lost.
	 */
	.site-header--home {
		position: fixed;
		inset-inline: 0;

		/* Nav links, the hamburger, and the outline CTA. */
		--sp-home-ink: color-mix(in srgb, var(--wp--preset--color--purple) calc(var(--sp-home-solid) * 100%), #ffffff);

		/* The label on the filled CTA, so it inverts with it. */
		--sp-home-on-fill: color-mix(in srgb, #ffffff calc(var(--sp-home-solid) * 100%), var(--wp--preset--color--purple));

		/* jump-none: 0 for the first half of the range, 1 for the second. */
		animation: sp-home-collapse steps(2, jump-none) both;
		animation-timeline: scroll(root);
		animation-range: 0 48px;
	}

	@keyframes sp-home-collapse {
		from {
			--sp-home-solid: 0;
		}

		to {
			--sp-home-solid: 1;
		}
	}

	/* The pattern sets the first two inline, so they need the extra weight. */
	.site-header--home > .wp-block-group {
		background-color: rgb(255 255 255 / var(--sp-home-solid)) !important;
		border-bottom-color: rgb(217 213 223 / var(--sp-home-solid)) !important;
		box-shadow: 0 6px 24px rgb(63 42 86 / calc(0.08 * var(--sp-home-solid)));
		transition:
			background-color var(--sp-fast) ease,
			border-color var(--sp-fast) ease,
			box-shadow var(--sp-fast) ease;
	}

	.site-header--home .wp-block-navigation,
	.site-header--home .wp-block-navigation__responsive-container-open {
		color: var(--sp-home-ink);
		transition: color var(--sp-fast) ease;
	}

	/*
	 * Specific enough to beat the outline block style and theme.json's button
	 * element, and the variables fall back to the over-the-hero state, so a
	 * dropped custom property leaves the CTAs white rather than purple on
	 * purple.
	 */
	.site-header--home .header-cta .header-cta__portal > .wp-block-button__link {
		background-color: transparent;
		border-color: var(--sp-home-ink, #ffffff);
		color: var(--sp-home-ink, #ffffff);
	}

	.site-header--home .header-cta .header-cta__contact > .wp-block-button__link {
		background-color: var(--sp-home-ink, #ffffff);
		border-color: var(--sp-home-ink, #ffffff);
		color: var(--sp-home-on-fill, var(--wp--preset--color--purple));
	}

	/*
	 * Both CTAs fill purple on hover in either state; these restate the
	 * normal hover, which the rules above would otherwise outrank.
	 */
	.site-header--home .header-cta .header-cta__portal > .wp-block-button__link:hover,
	.site-header--home .header-cta .header-cta__contact > .wp-block-button__link:hover {
		background-color: var(--wp--custom--color--purple-hover);
		border-color: var(--wp--custom--color--purple-hover);
		color: var(--wp--preset--color--white);
	}

	/*
	 * Logo. Same size as every other page; only the colour changes. The white
	 * logo is a background layer on the link, handing over to the purple
	 * <img> underneath it.
	 */
	.site-header--home .site-logo a {
		position: relative;
	}

	.site-header--home .site-logo a::before {
		content: "";
		position: absolute;
		inset: 0;
		background: url("assets/images/logo-white.svg?ver=0.2.7") top left / 100% auto no-repeat;
		opacity: calc(1 - var(--sp-home-solid));
		transition: opacity var(--sp-fast) ease;
	}

	.site-header--home .site-logo img {
		position: relative;
		opacity: var(--sp-home-solid);
		transition: opacity var(--sp-fast) ease;
	}

	@media (prefers-reduced-motion: reduce) {
		.site-header--home > .wp-block-group,
		.site-header--home .wp-block-navigation,
		.site-header--home .wp-block-navigation__responsive-container-open,
		.site-header--home .site-logo a::before,
		.site-header--home .site-logo img {
			transition: none;
		}
	}
}

/* Images in content: slow, subtle zoom on hover */
main .wp-block-columns .wp-block-image {
	overflow: hidden;
}

main .wp-block-columns .wp-block-image img,
main .wp-block-columns .wp-block-cover__image-background {
	transition: transform 900ms var(--sp-ease);
}

main .wp-block-columns .wp-block-image:hover img,
main .wp-block-columns .wp-block-cover:hover .wp-block-cover__image-background {
	transform: scale(1.04);
}

/* Photo cards: overlay deepens */
.wp-block-columns .wp-block-cover {
	overflow: hidden;
}

.wp-block-columns .wp-block-cover__background {
	transition: opacity var(--sp-slow) var(--sp-ease);
}

.wp-block-columns .wp-block-cover:hover .wp-block-cover__background {
	opacity: 0.45;
}

/* Value cards lift slightly */
.wp-block-column.has-white-background-color {
	transition:
		transform 400ms var(--sp-ease),
		box-shadow 400ms var(--sp-ease);
}

.wp-block-column.has-white-background-color:hover {
	transform: translateY(-4px);
	box-shadow: 0 16px 40px rgb(63 42 86 / 0.08);
}

/* Gravity Forms fields */
.gform_wrapper input:not([type="submit"], [type="checkbox"], [type="radio"]),
.gform_wrapper textarea,
.gform_wrapper select {
	transition:
		border-color var(--sp-fast) ease,
		box-shadow var(--sp-fast) ease;
}

.gform_wrapper input:not([type="submit"], [type="checkbox"], [type="radio"]):hover,
.gform_wrapper textarea:hover {
	border-color: var(--wp--preset--color--muted);
}

/* Content gently fades up as it enters the viewport (front end only) */
@supports (animation-timeline: view()) {
	body:not(.editor-styles-wrapper) main :where(.wp-block-columns:not(.alignfull), .wp-block-heading, .wp-block-buttons) {
		animation: sp-reveal linear both;
		animation-timeline: view();
		animation-range: entry 0% entry 35%;
	}

	@keyframes sp-reveal {
		from {
			opacity: 0;
			transform: translateY(24px);
		}
	}
}

/* ==========================================================================
   About
   ========================================================================== */

.eyebrow {
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.has-white-color .eyebrow,
.wp-block-cover .eyebrow {
	color: inherit;
	opacity: 0.8;
}

/* Image sits on an offset platinum block */
.wp-block-image.offset-frame {
	box-shadow: calc(-1 * var(--wp--preset--spacing--40)) var(--wp--preset--spacing--40) 0 var(--wp--preset--color--platinum);
}

/* Pillars: numbered with a short rule */
.pillar > .wp-block-image {
	margin-bottom: var(--wp--preset--spacing--40);
}

.pillar > .eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75em;
}

.pillar > .eyebrow::after {
	content: "";
	width: 2.5rem;
	height: 1px;
	background: currentColor;
}

.pillar > .eyebrow + .wp-block-heading {
	margin-top: 0.5rem;
}

/* Value tabs: accordion on the left, matching image on the right */
.value-tabs__list {
	margin-top: var(--wp--preset--spacing--50);
}

.value-tabs__list .wp-block-details {
	position: relative;
	margin: 0;
	padding: var(--wp--preset--spacing--30) 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
	border-left: 1px solid var(--wp--preset--color--line);
}

.value-tabs__list .wp-block-details::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -2px;
	width: 3px;
	background: var(--wp--preset--color--purple);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.4s ease;
}

.value-tabs__list .wp-block-details[open]::before {
	transform: scaleY(1);
}

.value-tabs__list summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	list-style: none;
	cursor: pointer;
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.2;
	color: var(--wp--preset--color--muted);
	transition: color 0.2s ease;
}

.value-tabs__list summary::-webkit-details-marker {
	display: none;
}

.value-tabs__list summary::after {
	content: "";
	flex: none;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transition: transform 0.3s ease;
}

.value-tabs__list summary:hover,
.value-tabs__list [open] > summary {
	color: var(--wp--preset--color--purple);
}

.value-tabs__list [open] > summary::after {
	transform: rotate(-135deg);
}

.value-tabs__list summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--purple);
	outline-offset: 4px;
}

.value-tabs__list .wp-block-details > p {
	color: var(--wp--preset--color--muted);
}

.value-tabs__list .wp-block-details > summary + p {
	margin-top: var(--wp--preset--spacing--30);
}

.value-tabs__media {
	display: grid;
	align-self: start;
	position: sticky;
	top: calc(var(--wp--preset--spacing--60) + 4rem);
	padding-left: var(--wp--preset--spacing--40);
}

.value-tabs__media > .wp-block-image {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	transition: opacity 0.5s ease;
}

.value-tabs__media > .wp-block-image.is-active,
.value-tabs:not(.is-ready) .value-tabs__media > .wp-block-image:first-child {
	opacity: 1;
}

/* Editor: list every image in order so each one can be selected and replaced */
.editor-styles-wrapper .value-tabs__media {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--50);
	position: static;
}

.editor-styles-wrapper .value-tabs__media > .wp-block-image {
	opacity: 1;
}

@media (max-width: 781px) {
	.value-tabs__media {
		position: static;
		margin-top: var(--wp--preset--spacing--50);
	}
}

@media (prefers-reduced-motion: reduce) {
	.value-tabs__list .wp-block-details::before,
	.value-tabs__media > .wp-block-image {
		transition: none;
	}
}

/* ==========================================================================
   Team
   ========================================================================== */

.team-card {
	height: 100%;
}

.team-card > * {
	margin: 0;
}

.team-card .wp-block-post-featured-image {
	overflow: hidden;
	width: 100%;
}

.team-card .wp-block-post-featured-image img {
	transition: transform 900ms var(--sp-ease);
}

.team-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.team-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms var(--sp-ease);
}

.team-card:hover .wp-block-post-title a {
	background-size: 100% 1px;
}

/* Trademark symbols sit small against the text they follow */
.trademark {
	font-size: 0.7em;
	letter-spacing: 0;
}

/* No portrait yet: platinum panel with the symbol */
.team-portrait--empty {
	display: grid;
	place-items: center;
	aspect-ratio: 4 / 5;
	background: var(--wp--preset--color--platinum);
}

.has-platinum-background-color .team-portrait--empty {
	background: var(--wp--preset--color--white);
}

.team-portrait--empty a {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
}

.team-portrait--empty img {
	width: 48px !important;
	height: auto !important;
	opacity: 0.3;
	transition: opacity 400ms var(--sp-ease), transform 900ms var(--sp-ease) !important;
}

.team-card:hover .team-portrait--empty img {
	opacity: 0.5;
}

/* Profile page */
.profile__header .wp-block-post-title {
	margin-top: var(--wp--preset--spacing--20);
}

.profile__header .eyebrow {
	margin-top: 0;
}

.team-social .wp-social-link {
	transition: transform var(--sp-fast) var(--sp-ease), opacity var(--sp-fast) ease;
}

.team-social .wp-social-link:hover {
	transform: translateY(-2px);
	opacity: 0.75;
}

.profile__contact + .team-social {
	padding-top: var(--wp--preset--spacing--20);
}

html {
	scroll-padding-top: 6rem;
}

/* ==========================================================================
   News
   ========================================================================== */

.news-intro {
	max-width: 40rem;
}

/* Cards */
.news-card {
	height: 100%;
}

.news-card > * {
	margin: 0;
}

.news-card .wp-block-post-featured-image {
	overflow: hidden;
	width: 100%;
}

.news-card .wp-block-post-featured-image img {
	transition: transform 900ms var(--sp-ease);
}

.news-card:hover .wp-block-post-featured-image img {
	transform: scale(1.04);
}

.news-card .wp-block-post-title a {
	text-decoration: none;
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0 1px;
	background-position: 0 100%;
	background-repeat: no-repeat;
	transition: background-size 400ms var(--sp-ease);
}

.news-card:hover .wp-block-post-title a {
	background-size: 100% 1px;
}

.news-card .wp-block-post-excerpt__excerpt {
	margin: 0.25em 0 0;
}

.wp-block-post-terms a {
	text-decoration: none;
	font-weight: 400;
	color: var(--wp--preset--color--purple);
}

.wp-block-post-terms a:hover {
	text-decoration: underline;
}

.article__meta > * + *::before,
.news-card .wp-block-group > * + *::before {
	content: "·";
	margin-right: 0.6em;
}

.article__meta > *,
.news-card .wp-block-group > * {
	display: inline-flex;
	margin: 0;
}

/* Back link */
.back-link a {
	text-decoration: none;
}

.back-link a::before {
	content: "←";
	display: inline-block;
	margin-right: 0.5em;
	transition: transform var(--sp-fast) var(--sp-ease);
}

.back-link a:hover::before {
	transform: translateX(-4px);
}

/* Article body */
.article__body {
	font-size: var(--wp--preset--font-size--medium);
}

.article__body > p:first-child {
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.55;
}

.article__body > * + * {
	margin-block-start: 1.4em;
}

.article__body h2 {
	font-size: var(--wp--preset--font-size--x-large);
	margin-block-start: 2em;
}

.article__body h3 {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	margin-block-start: 1.8em;
}

.article__body :where(h2, h3) + * {
	margin-block-start: 0.75em;
}

.article__body .wp-block-image,
.article__body .wp-block-pullquote {
	margin-block: 2.5em;
}

.article__body .wp-block-image figcaption {
	margin-top: 0.75em;
	text-align: left;
}

.article__body ul,
.article__body ol {
	padding-left: 1.2em;
}

.article__body li + li {
	margin-top: 0.5em;
}

.article__body li::marker {
	color: var(--wp--preset--color--muted);
}

.article__body .wp-block-pullquote {
	padding: var(--wp--preset--spacing--40) 0;
	border-top: 1px solid var(--wp--preset--color--line);
	border-bottom: 1px solid var(--wp--preset--color--line);
	text-align: left;
}

.article__body .wp-block-pullquote blockquote p {
	font-size: var(--wp--preset--font-size--x-large);
	font-weight: 300;
	line-height: 1.3;
}

.article__body .wp-block-pullquote cite {
	display: block;
	margin-top: 1em;
	font-size: var(--wp--preset--font-size--small);
	font-style: normal;
	color: var(--wp--preset--color--muted);
}

.article__body .article-note {
	margin-block-start: 3em;
	padding-top: var(--wp--preset--spacing--30);
	border-top: 1px solid var(--wp--preset--color--line);
}

/* Previous / next */
.article__footer {
	gap: var(--wp--preset--spacing--40);
}

.post-nav {
	flex: 1 1 0;
	font-size: var(--wp--preset--font-size--small);
}

.post-nav a {
	display: block;
	text-decoration: none;
	font-size: var(--wp--preset--font-size--large);
	line-height: 1.3;
}

.post-nav .post-navigation-link__label {
	display: block;
	margin-bottom: 0.35em;
	font-size: var(--wp--preset--font-size--x-small);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.post-nav a:hover .post-navigation-link__title {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

.post-nav--prev .post-navigation-link__label::before,
.post-nav--next .post-navigation-link__label::after {
	display: inline-block;
	transition: transform var(--sp-fast) var(--sp-ease);
}

.post-nav--prev .post-navigation-link__label::before {
	content: "←";
	margin-right: 0.6em;
}

.post-nav--next .post-navigation-link__label::after {
	content: "→";
	margin-left: 0.6em;
}

.post-nav--prev a:hover .post-navigation-link__label::before {
	transform: translateX(-4px);
}

.post-nav--next a:hover .post-navigation-link__label::after {
	transform: translateX(4px);
}

@media (max-width: 599px) {
	.article__footer {
		flex-direction: column;
	}

	.post-nav--next {
		text-align: left;
	}
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation: none !important;
		transition-duration: 1ms !important;
	}

	.wp-block-columns .wp-block-image:hover img,
	.wp-block-columns .wp-block-cover:hover .wp-block-cover__image-background,
	.wp-block-column.has-white-background-color:hover,
	.news-card:hover .wp-block-post-featured-image img,
	.team-card:hover .wp-block-post-featured-image img {
		transform: none;
	}
}

/* ==========================================================================
   Brand delta: large background triangle on Group blocks (Styles > Delta)
   ========================================================================== */

.wp-block-group.is-style-delta {
	--sp-delta-color: color-mix(in srgb, var(--wp--preset--color--platinum) 25%, transparent);
	position: relative;
	isolation: isolate;
	overflow: hidden;
}

.wp-block-group.is-style-delta::before {
	content: "";
	position: absolute;
	z-index: -1;
	/* Inset top/bottom so the delta sits inside the section; width follows height */
	top: 8%;
	bottom: 8%;
	right: 4%;
	aspect-ratio: 87 / 100;
	max-width: 60%;
	background-color: var(--sp-delta-color);
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	pointer-events: none;
}

.wp-block-group.is-style-delta.has-platinum-background-color {
	--sp-delta-color: rgb(255 255 255 / 0.55);
}

.wp-block-group.is-style-delta:is(.has-purple-background-color, .has-purple-dark-background-color) {
	--sp-delta-color: rgb(255 255 255 / 0.03);
}

@media (max-width: 781px) {
	.wp-block-group.is-style-delta::before {
		max-width: 90%;
		opacity: 0.6;
	}
}

/* ==========================================================================
   Page heroes (contact, approach) and transitions
   ========================================================================== */

.page-hero .eyebrow {
	margin: 0 0 var(--wp--preset--spacing--30);
	color: rgb(255 255 255 / 0.7);
}

.page-hero__title {
	margin-top: 0;
	max-width: 14ch;
}

.page-hero__title em {
	font-style: italic;
	color: var(--wp--preset--color--line);
}

.page-hero__lede {
	max-width: 34ch;
	color: rgb(255 255 255 / 0.8);
}

/* Photo cut into the brand delta, with an offset ghost delta behind */
.page-hero__media {
	position: relative;
	aspect-ratio: 87 / 100;
	max-width: 30rem;
	margin-left: auto;
	width: 100%;
}

.page-hero__media::before,
.page-hero__media > * {
	position: absolute;
	inset: 0;
	margin: 0;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.page-hero__media::before {
	content: "";
	transform: translate(-8%, 8%);
	background: rgb(255 255 255 / 0.08);
}

.page-hero__media:empty::after {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--sp-hero-image) center / cover;
	clip-path: polygon(0 0, 100% 50%, 0 100%);
	animation: page-hero-delta-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

@keyframes page-hero-delta-in {
	from { clip-path: polygon(0 0, 0 50%, 0 100%); }
	to { clip-path: polygon(0 0, 100% 50%, 0 100%); }
}

.page-hero__foot {
	border-top: 1px solid rgb(255 255 255 / 0.2);
	padding-top: var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.page-hero__media {
		max-width: 16rem;
		margin: 0 auto 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.page-hero__media:empty::after,
	.page-hero__media > .wp-block-image {
		animation: none;
	}
}

.page-hero__media > .wp-block-image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.page-hero__media > .wp-block-image:only-child {
	animation: page-hero-delta-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both;
}

/* Approach hero: the yacht photo is cut to the delta's own ratio, so nothing is
   cropped away — this only matters if a wider photo is dropped in later, where
   the delta is widest on the left and the crop should be anchored there */
.approach-hero .page-hero__media > .wp-block-image img {
	object-position: left center;
}

/* Team hero: two photos cross-fading inside the delta */
.team-hero .page-hero__media > .wp-block-image {
	animation: team-hero-fade 16s ease-in-out infinite;
}

/* The first one also wipes in, the way a single hero photo does */
.team-hero .page-hero__media > .wp-block-image:first-child {
	animation:
		page-hero-delta-in 900ms cubic-bezier(0.2, 0.7, 0.2, 1) both,
		team-hero-fade 16s ease-in-out infinite;
}

.team-hero .page-hero__media > .wp-block-image:last-child {
	animation-delay: 8s;
}

@keyframes team-hero-fade {
	0%, 45% { opacity: 1; }
	55%, 95% { opacity: 0; }
	100% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
	.team-hero .page-hero__media > .wp-block-image,
	.team-hero .page-hero__media > .wp-block-image:first-child {
		animation: none;
	}

	.team-hero .page-hero__media > .wp-block-image:last-child {
		opacity: 0;
	}
}

/* Contact: direct channels along the foot */
.contact-hero .page-hero__media {
	--sp-hero-image: url("assets/images/hero-placeholder-istock-2266776804.jpg");
	/* Smaller delta so the hero stays short and the form comes up sooner */
	max-width: 24rem;
}

.contact-hero__channels {
	gap: var(--wp--preset--spacing--40);
}

.contact-hero__channel {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	margin: 0;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
}

.contact-hero__channel .eyebrow {
	margin: 0;
}

.contact-hero__channel a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgb(255 255 255 / 0.35);
	text-underline-offset: 0.25em;
	transition: text-decoration-color var(--wp--custom--transition);
}

.contact-hero__channel a:hover,
.contact-hero__channel a:focus-visible {
	text-decoration-color: currentColor;
}

.transitions .page-hero__title {
	max-width: 20ch;
}

.transitions .page-hero__lede {
	max-width: 48ch;
}

/* Transitions: steps that swap the image inside the delta */
.transitions__slide {
	opacity: 0;
	transform: scale(1.06);
	transition: opacity 600ms ease, transform 1200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.transitions:not(.is-ready) .transitions__slide:first-of-type,
.transitions__slide.is-active {
	opacity: 1;
	transform: none;
}

.transitions__steps {
	gap: var(--wp--preset--spacing--40);
}

.transitions__step {
	position: relative;
	padding-top: var(--wp--preset--spacing--20);
	color: rgb(255 255 255 / 0.55);
	cursor: pointer;
	transition: color var(--wp--custom--transition);
}

.transitions__step > p {
	margin: 0;
}

.transitions__step-title {
	font-size: var(--wp--preset--font-size--large);
	font-weight: 300;
	line-height: 1.3;
}

.transitions__step-text {
	margin-top: 0.35rem !important;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

/* Progress rule: fills while a step is active, then the next one takes over */
.transitions__step::after {
	content: "";
	position: absolute;
	top: calc(-1 * var(--wp--preset--spacing--40) - 1px);
	left: 0;
	width: 100%;
	height: 2px;
	background: var(--wp--preset--color--white);
	transform: scaleX(0);
	transform-origin: left;
}

.transitions__step.is-active::after {
	transform: scaleX(1);
	transition: transform var(--sp-step-duration, 6000ms) linear;
}

.transitions.is-paused .transitions__step.is-active::after {
	transition: none;
}

.transitions__step:hover,
.transitions__step:focus-visible,
.transitions__step.is-active {
	color: var(--wp--preset--color--white);
}

.transitions__step:focus-visible {
	outline: 1px solid currentColor;
	outline-offset: 0.5rem;
}

/* Editor: show every image so each one can be picked and replaced */
.editor-styles-wrapper .transitions .page-hero__media {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	aspect-ratio: auto;
}

.editor-styles-wrapper .transitions__slide {
	position: static;
	opacity: 1;
	transform: none;
	clip-path: none;
}

.editor-styles-wrapper .transitions .page-hero__media::before {
	display: none;
}

@media (prefers-reduced-motion: reduce) {
	.transitions__slide {
		transform: none;
		transition: opacity 200ms ease;
	}

	.transitions__step.is-active::after {
		transition: none;
	}
}

/* ==========================================================================
   Home: section flow
   ========================================================================== */

/* Photo cards: caption sits on a gradient at the foot of each card */
.home .wp-block-group.alignfull > .wp-block-columns > .wp-block-column > .wp-block-cover {
	align-items: flex-end;
	height: 100%;
}

.home .wp-block-group.alignfull > .wp-block-columns > .wp-block-column > .wp-block-cover .wp-block-cover__background {
	background: linear-gradient(to top, rgb(28 18 40 / 0.85), rgb(28 18 40 / 0.1) 65%) !important;
	opacity: 1;
}

.home .wp-block-group.alignfull > .wp-block-columns > .wp-block-column > .wp-block-cover .has-text-align-center {
	text-align: left;
	line-height: 1.35;
}

/* Closing CTA gets its own band so it doesn't run on from the values */
.home .value-tabs + .wp-block-group {
	background-color: var(--wp--preset--color--platinum);
}

/* ==========================================================================
   Legacy purple slug
   The palette now carries a single purple. Content saved before that (pages
   already in the database) still writes the retired "purple-dark" classes, so
   map them onto the brand purple rather than leaving those sections unpainted.
   ========================================================================== */

.has-purple-dark-background-color {
	background-color: var(--wp--preset--color--purple);
}

.has-purple-dark-color {
	color: var(--wp--preset--color--purple);
}

.has-purple-dark-border-color {
	border-color: var(--wp--preset--color--purple);
}

/**
 * Placeholder copy
 *
 * Marks latin stand-in text on the client's copy-free review pages.
 * Only appears on the "— placeholder copy" duplicates.
 */
.placeholder-copy {
	background-color: #ffe600;
	color: #111 !important;
	box-shadow: 0 0 0 0.12em #ffe600;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}