/*
Theme Name: Spectra Child
Theme URI: none
Description: Spectra Child Theme
Author: Your Name
Author URI: http://noahsportfolio.co.uk
Template: spectra-one
Version: 1.0.0
*/

/* 
===================================================================================================
VPE COLOUR ALIASES — bridge clean names ↔ Site Editor Global Styles (custom-* slugs)
To remove: if Global Styles are ever reset, delete this block; theme.json will take over.
===================================================================================================
*/
:root {
    --wp--preset--color--rich-black:      var(--wp--preset--color--custom-rich-black);
    --wp--preset--color--charcoal:        var(--wp--preset--color--custom-charcoal);
    --wp--preset--color--slate:           var(--wp--preset--color--custom-slate);
    --wp--preset--color--steel:           var(--wp--preset--color--custom-steel);
    --wp--preset--color--silver:          var(--wp--preset--color--custom-silver);
    --wp--preset--color--light-gray:      var(--wp--preset--color--custom-light-gray);
    --wp--preset--color--pale-gray:       var(--wp--preset--color--custom-pale-gray);
    --wp--preset--color--ghost-white:     var(--wp--preset--color--custom-ghost-white);
    --wp--preset--color--warm-white:      var(--wp--preset--color--custom-warm-white);
    --wp--preset--color--vpe-red:         var(--wp--preset--color--custom-vpe-red);
    --wp--preset--color--vpe-red-light:   var(--wp--preset--color--custom-red-light);
    --wp--preset--color--vpe-red-blush:   var(--wp--preset--color--custom-red-blush);
    --wp--preset--color--vpe-red-dark:    var(--wp--preset--color--custom-red-dark);
    --wp--preset--color--vpe-red-darker:  var(--wp--preset--color--custom-red-darker);
    --wp--preset--color--vpe-red-deepest: var(--wp--preset--color--custom-red-deepest);
    --wp--preset--color--vpe-red-pale:    var(--wp--preset--color--custom-red-pale);
    --wp--preset--color--vpe-red-tint:    var(--wp--preset--color--custom-red-tint);
}

/*
===================================================================================================
NOTE: Do NOT apply overflow-x: hidden to html or body — it breaks position: sticky
on child elements. If horizontal overflow occurs, fix the specific component instead.
===================================================================================================
*/

/* 
===================================================================================================
VIDEO HERO - HOMEPAGE STYLES
===================================================================================================
*/

/* ── UAGB Hero Container (page hero blocks) ─────────────────── */
.wp-block-uagb-container.hero.uagb-is-root-container {
    max-height: 1000px !important;
}

.hero *,
.hero *::before,
.hero *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

/* ── Hero shell ── */
.hero {
	position: relative;
	width: 100%;
	overflow: hidden !important;
	max-width: 100%;
	background: var(--wp--preset--color--rich-black);

	/* Mobile: tall enough to show video + content stacked */
	min-height: 100svh;

	/* Content alignment — bottom-left on mobile */
	display: flex;
	align-items: flex-start !important;
	justify-content: flex-end !important;
}

@media (min-width: 768px) {
	.hero {
		min-height: 100svh;
		/* Desktop: content centred vertically on left */
		/* align-items: center; */
	}
}

/* ── Vimeo iframe cover ── */
.hero__video-wrap {
	position: absolute !important;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	overflow: hidden;
	background-image: url('https://stagingdev.org/vprod/wp-content/uploads/2026/05/hero-opener.jpg');
	background-size: cover;
	background-position: center;
}

.hero__video {
	position: absolute !important;
	top: 50%;
	left: 50%;
	/* Always covers container regardless of aspect ratio */
	width: 100vw;
	height: 56.25vw; /* Roughly 16:9 */
	min-height: 100%;
	min-width: 177.78vh; /* 16:9 inverted */
	transform: translate(-50%, -50%);
	pointer-events: none;
	max-width: none !important;
	display: block;
}

/* ── Overlay ── */
.hero__overlay {
	position: absolute !important;
	top: 50%;
	left: 50%;
	/* Always covers container regardless of aspect ratio */
	width: 100vw !important;
	height: 48.65vw !important; /* 16:9 */
	min-height: 100% !important;
	inset: 0;
	z-index: 1;
	/* Stronger at bottom-left where text sits on mobile,
         lighter top-right so video reads through */
	background: linear-gradient(
		27deg,
		rgba(33, 2, 24, 0.7) 0%,
		rgba(0, 0, 0, 0.4) 60%,
		rgba(0, 0, 0, 0.15) 100% /* Dark red overlay */
	);
}

/* ── Content ── */
.hero__content {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	flex-direction: row;
	align-items: flex-start;
	column-gap: 16px;
	row-gap: 1.5rem;

	/* Mobile: sits at bottom-left with padding */
	padding: clamp(1.5rem, 5vw, 4rem);
	padding-bottom: clamp(2.5rem, 8vw, 6rem);
	max-width: 648px;
}

/* Heading and subtext span full width so buttons sit below */
.hero__content .hero__heading,
.hero__content .hero__sub {
	width: 100%;
}

/* ── Heading ── */
.hero__heading {
	font-size: clamp(2.5rem, 8vw, 4rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: 0;
	color: var(--wp--preset--color--warm-white);
}

/* ── Subtext ── */
.hero__sub { 
	font-size: clamp(0.9rem, 1.5vw, 1.25rem);
	line-height: 1.5;
	color: var(--wp--preset--color--warm-white);
	max-width: 52ch;
	font-weight: 300;
}

.uppercase {
	color: var(--wp--preset--color--steel);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	font-size: var(--wp--preset--font-size--custom-7);
	font-family: var(--wp--preset--font-family--roboto-mono);
}

/* ── Hero rating stars ── */
.rating-star {
    color: var(--wp--preset--color--custom-vpe-red);
}

/* ── Kicker Block Styles (Gutenberg style variants) ─────── */
.is-style-kicker {
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
	font-size: var(--wp--preset--font-size--custom-7);
	text-transform: uppercase;
	letter-spacing: 0.055em;
	color: var(--wp--preset--color--steel);
}

.is-style-kicker-small {
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.055em;
	color: var(--wp--preset--color--steel);
}

/* ── Kicker with trailing line variant ── */
.kicker.is-style-kicker.kicker-after-line {
    display: flex;
    align-items: center;
    width: 100%;
}

.kicker.is-style-kicker.kicker-after-line:after {
    content: "";
    height: 1px;
    background-color: rgba(149, 144, 144, 0.4);
    flex-grow: 1;
    margin-left: 8px;
    margin-right: 8px;
    min-width: 0;
}

/* ── Paragraph max-width utility ── */
p.has-custom-9-font-size.wp-block-paragraph {
    max-width: 75ch;
}

/* ── CTA button (primary — VPE Red) ── */
.hero__cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	height: 56px;
	padding: 16px 32px;
	background: var(--vpe-red);
	color: var(--wp--preset--color--warm-white);
	border: 1.5px solid var(--vpe-red);
	text-decoration: none;
	font-family: 'Roboto', sans-serif;
	font-size: 1.125rem;
	font-weight: 400;
	border-radius: var(--btn-radius);
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: transform 0.1s ease;
}

.hero__cta:hover {
	color: var(--wp--preset--color--warm-white);
}

.hero__cta:active {
	transform: scale(0.98);
}

/* Slide wipe */
.hero__cta::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vpe-red-hover);
	z-index: -1;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.hero__cta:hover::before {
	transform: translateX(0);
}

/* White circle dot */
.hero__cta::after {
	content: "";
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--wp--preset--color--warm-white);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	transition: filter 0.3s ease;
}

.hero__cta:hover::after {
	filter: drop-shadow(0 0 4px var(--wp--preset--color--warm-white)) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* ── CTA glass variant (second button) ── */
.hero__cta:nth-of-type(2) {
	background: rgba(88, 89, 91, 0.2);
	border-color: rgba(255, 255, 255, 0.25);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
}

.hero__cta:nth-of-type(2)::before {
	background: rgba(255, 255, 255, 0.12);
}

@media (max-width: 480px) {
	.hero__content {
		flex-direction: column;
	}
	.hero__cta {
		width: 100%;
	}
}

/* Normal Pages */
.wp-block-uagb-container.page-hero.uagb-is-root-container {
    padding-top: 10vh !important;
}

p.hero-p {
	max-width: 75ch;
}

/* Trust Strip In Hero Section  */

.wp-block-uagb-container.vpe-projects-trust-strip {
    border-left: none; 
    position: relative;
}

.wp-block-uagb-container.vpe-projects-trust-strip::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
	background-color: #e0e0e0; /* slightly darker than custom 'pale gray' */
	left: calc(clamp(2rem, 5vw, 5rem) * -1);
}

/*
===================================================================================================
BREADCRUMB NAVIGATION
===================================================================================================
*/
.vpe-breadcrumb {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--content-size, 1200px);
	margin: 0 auto;
	padding: clamp(1rem, 2vw, 1.75rem) 0;
}

.vpe-breadcrumb__list {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 0;
	font-family: Roboto, sans-serif;
	font-size: 0.875rem;
	line-height: 1.4;
}

.vpe-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	color: var(--wp--preset--color--steel);
}

.vpe-breadcrumb__item:not(:last-child)::after {
	content: '/';
	margin: 0 0.5rem;
	color: var(--wp--preset--color--silver);
}

.vpe-breadcrumb__item a {
	color: var(--wp--preset--color--steel);
	text-decoration: none;
	transition: color 0.2s ease;
	font-family: Roboto, sans-serif;
	font-size: 0.875rem;
}

.vpe-breadcrumb__item a:hover {
	color: var(--wp--preset--color--charcoal);
	text-decoration: underline;
}

.vpe-breadcrumb__current span {
	color: var(--wp--preset--color--charcoal);
}

/* Offset missing breadcrumb height on top-level pages to match child page hero spacing
   Breadcrumb height = top padding + content (20px) + bottom padding */
.is-top-level-page {
	--vpe-breadcrumb-height: calc(clamp(1rem, 2vw, 1.75rem) * 2 + 1.225rem);
}

.is-top-level-page .page-hero {
	margin-top: var(--vpe-breadcrumb-height);
}

/* 
===================================================================================================
VIDEO PROJECT STYLES
===================================================================================================
*/

/* ── Video Embed ─────────────────────────────────────────────── */
.video-project-embed.wp-block-group,
.video-project-embed {
	margin: 0 !important;
	padding: 0 !important;
	max-width: none !important;
}

.video-project-embed .video-container {
	position: relative;
	width: 100%;
	aspect-ratio: 16/9;
	overflow: hidden;
	border-radius: 0 !important;
	box-shadow: none !important;
}

.video-project-embed .video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/* ── Project Layout ──────────────────────────────────────────── */
.project-layout {
	margin-top: var(--wp--preset--spacing--large);
}

/* Sidebar Sticky — Spectra UAGB containers */
body.single-video-project .wp-block-uagb-container,
body.single-video-project .uagb-container-inner-blocks-wrap {
	overflow: visible !important;
}

.project-details-row > .uagb-container-inner-blocks-wrap {
	align-items: flex-start;
}

/* Fix header overflow on single video project pages
   Target the header/breadcrumb area only, not containers with sticky sidebars */
body.single-video-project {
	overflow-x: hidden;
}

/* Ensure sticky sidebars still work by allowing overflow on their containers */
body.single-video-project .project-layout,
body.single-video-project .project-meta-col,
body.single-video-project .project-sidebar-sticky {
	overflow: visible;
}

/* ── Single Project Post Terms (Pill Style) ─────────────────── */
.single .wp-block-post-terms.is-style-swt-post-terms-pill a {
	letter-spacing: 2px;
	font-family: var(--wp--preset--font-family--roboto-mono) !important;
	font-size: 12px;
	padding: 8px 16px;
	margin-bottom: 1em;
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--custom-red-blush) !important;
	color: var(--wp--preset--color--custom-charcoal) !important;
	transition: all 0.3s ease-in-out;
}

.single .wp-block-post-terms.is-style-swt-post-terms-pill a:hover {
	background-color: var(--wp--preset--color--custom-red-light) !important;
	border: 1px solid var(--wp--preset--color--custom-red-tint) !important;
	color: var(--wp--preset--color--custom-warm-white) !important;
}

.project-sidebar-sticky {
	position: sticky;
	top: 2rem;
	align-self: start;
}

/* ── Project Content Sections (Brief / Approach / Outcome) ──── */
.project-content {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--large);
}

.project-content__kicker {
	display: block;
	margin-bottom: var(--wp--preset--spacing--xx-small);
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
}

.project-content__heading {
	font-size: clamp(1.75rem, 4vw, 2.5rem);
	font-weight: 800;
	line-height: 1.15;
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--small);
}

.project-content__body {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.7;
	color: var(--wp--preset--color--charcoal);
}

.project-content__body p {
	margin-bottom: 1em;
}

.project-content__body ul {
	margin: 0.5em 0 1em;
	padding-left: 1.25em;
}

.project-content__body li {
	margin-bottom: 0.4em;
}

.project-content__body strong {
	color: var(--wp--preset--color--rich-black);
}

.project-content__divider {
	border: none;
	border-top: 1px solid var(--wp--preset--color--pale-gray);
	margin: 0;
}

/* ── Outcome Dark Card ───────────────────────────────────────── */
.project-content__outcome {
	background: var(--wp--preset--color--rich-black);
	border-radius: 12px;
	padding: clamp(1.5rem, 4vw, 2.5rem);
	margin-top: var(--wp--preset--spacing--small);
}

.project-content__outcome .project-content__heading {
	color: var(--wp--preset--color--warm-white);
}

.project-content__outcome .project-content__body {
	color: var(--wp--preset--color--warm-white);
}

.project-content__outcome .project-content__body strong {
	color: var(--wp--preset--color--warm-white);
}

.project-content__outcome .vpe-text-link {
	color: var(--wp--preset--color--silver);
	margin-top: var(--wp--preset--spacing--medium);
}

.project-content__outcome .vpe-text-link:hover {
	color: var(--wp--preset--color--warm-white);
}

.project-content__outcome .vpe-text-link::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%23AAAAAA' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
}

.project-content__outcome .vpe-text-link:hover::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%23FCFDFD' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
}

/* ── Project Sidebar ─────────────────────────────────────────── */
.project-sidebar {
	background: var(--wp--preset--color--ghost-white);
	border-radius: 12px;
	padding: clamp(1.25rem, 3vw, 2rem);
}

.project-sidebar__meta {
	margin: 0;
	padding: 0;
}

.project-sidebar__item {
	padding: var(--wp--preset--spacing--small) 0;
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.project-sidebar__item:first-child {
	border-top: none;
	padding-top: 0;
}

.project-sidebar__item dt {
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
	font-size: var(--wp--preset--font-size--x-small);
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--wp--preset--color--steel);
	margin-bottom: var(--wp--preset--spacing--xxx-small);
}

.project-sidebar__item dd {
	margin-left: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 500;
	color: var(--wp--preset--color--rich-black);
}

/* ── Sidebar CTA Block ───────────────────────────────────────── */
.project-sidebar__cta {
	margin-top: var(--wp--preset--spacing--small);
	padding-top: var(--wp--preset--spacing--small);
	border-top: 1px solid var(--wp--preset--color--light-gray);
}

.project-sidebar__cta-heading {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--rich-black);
	margin-top: 0;
	margin-bottom: var(--wp--preset--spacing--xx-small);
}

.project-sidebar__cta-text {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--charcoal);
	line-height: 1.6;
	margin-bottom: var(--wp--preset--spacing--small);
}

.project-sidebar__cta-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--btn-gap);
	height: var(--btn-height);
	padding: var(--btn-padding);
	border-radius: var(--btn-radius);
	background: var(--vpe-red);
	color: var(--wp--preset--color--warm-white);
	border: 1.5px solid var(--vpe-red);
	text-decoration: none;
	font-size: 1rem;
	font-weight: 400;
	position: relative;
	z-index: 1;
	overflow: hidden;
	transition: transform 0.1s ease;
}

.project-sidebar__cta-btn:hover {
	color: var(--wp--preset--color--warm-white);
}

.project-sidebar__cta-btn:active {
	transform: scale(0.98);
}

.project-sidebar__cta-btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--vpe-red-hover);
	z-index: -1;
	transform: translateX(-100%);
	transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.project-sidebar__cta-btn:hover::before {
	transform: translateX(0);
}

.project-sidebar__cta-btn::after {
	content: "";
	width: 10px;
	height: 10px;
	border: 1.5px solid var(--wp--preset--color--warm-white);
	border-radius: 50%;
	flex-shrink: 0;
	position: relative;
	z-index: 2;
	transition: filter 0.3s ease;
}

.project-sidebar__cta-btn:hover::after {
	filter: drop-shadow(0 0 4px var(--wp--preset--color--warm-white)) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* ── Mobile: Sidebar stacks below content ────────────────────── */
@media (max-width: 781px) {
	.project-meta-col {
		position: static;
	}
}

/* Production Stills */
.project-stills {
	margin: var(--wp--preset--spacing--large) 0;
}

.project-stills .project-stills__grid {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)) !important;
	gap: var(--wp--preset--spacing--small);
	margin-top: var(--wp--preset--spacing--medium);
}

.project-stills__item {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	cursor: pointer;
	position: relative;
	margin: 0;
}

.project-stills__item.is-expanded {
	grid-column: 1 / -1;
	animation: stills-expand 0.35s ease;
}

@keyframes stills-expand {
	from { opacity: 0.4; transform: scale(0.97); }
	to   { opacity: 1;   transform: scale(1); }
}

.project-stills__item.is-collapsing {
	animation: stills-collapse 0.25s ease forwards;
}

@keyframes stills-collapse {
	from { opacity: 1;   transform: scale(1); }
	to   { opacity: 0.4; transform: scale(0.97); }
}

.project-stills__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease, object-fit 0.3s ease;
}

.project-stills__item.is-expanded img {
	aspect-ratio: auto;
	max-height: 80vh;
	object-fit: contain;
	background: var(--wp--preset--color--warm-white);
	border-radius: 8px;
}

.project-stills__close {
	display: none;
	position: absolute;
	top: 12px;
	right: 12px;
	width: 32px;
	height: 32px;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.5);
	color: var(--wp--preset--color--warm-white);
	border-radius: 50%;
	font-size: 1.25rem;
	line-height: 1;
	pointer-events: none;
}

.project-stills__item.is-expanded .project-stills__close {
	display: flex;
	pointer-events: auto;
}

.project-stills__item:hover img {
	transform: scale(1.03);
}

/* Client Testimonial — two-column editorial layout */
.project-testimonial {
	display: grid;
	grid-template-columns: 1fr 2fr;
	gap: var(--wp--preset--spacing--large);
	margin: var(--wp--preset--spacing--x-large) 0;
	padding: var(--wp--preset--spacing--x-large) 0;
}

.project-testimonial__meta {
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--xxx-small);
}

.project-testimonial__kicker {
	margin-bottom: var(--wp--preset--spacing--small);
}

.project-testimonial__name {
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	color: var(--wp--preset--color--rich-black);
}

.project-testimonial__role,
.project-testimonial__org {
	font-family: var(--wp--preset--font-family--roboto-mono, 'Roboto Mono', monospace);
	font-size: var(--wp--preset--font-size--x-small);
	color: var(--wp--preset--color--steel);
	text-transform: uppercase;
	letter-spacing: 0.06em;
}

.project-testimonial__stars {
	color: var(--wp--preset--color--vpe-red);
	font-size: 1.1rem;
	letter-spacing: 0.1em;
	line-height: 1;
	margin-top: 1rem;
}

.project-testimonial__right {
	display: flex;
	flex-direction: column;
}

/* ── Quote wrap (expandable region) ── */
.project-testimonial__quote-wrap {
	position: relative;
}

.project-testimonial__quote {
	margin: 0;
	padding: 0 0 0 var(--wp--preset--spacing--x-large);
	border-left: 3px solid var(--wp--preset--color--charcoal);
	overflow: hidden;
	max-height: var(--pt-collapsed-height, 220px);
	transition: max-height 0.4s ease;
}

.project-testimonial__quote.is-expanded {
	max-height: var(--pt-expanded-height, 2000px);
}

.project-testimonial__quote p {
	margin: 0;
	font-size: clamp(1.25rem, 2.5vw, 1.25rem);
	font-weight: 400;
	line-height: 1.4;
	color: var(--wp--preset--color--charcoal);
}

/* ── Fade overlay ── */
.project-testimonial__fade {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 64px;
	background: linear-gradient(to bottom, transparent, var(--wp--preset--color--warm-white));
	pointer-events: none;
	transition: opacity 0.25s ease;
}

.project-testimonial__fade.is-hidden {
	opacity: 0;
}

/* ── Read More / Read Less toggle ── */
.project-testimonial__toggle {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	background: none;
	border: none;
	cursor: pointer;
	padding: 12px 0 0 var(--wp--preset--spacing--x-large);
	font-family: 'Roboto Mono', monospace;
	font-size: 11px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--steel);
	transition: color 0.2s ease;
}

.project-testimonial__toggle:hover {
	color: var(--wp--preset--color--rich-black);
}

.project-testimonial__toggle svg {
	display: block;
	transition: transform 0.3s ease;
}

.project-testimonial__toggle.is-expanded svg {
	transform: rotate(180deg);
}

.project-testimonial__toggle.is-hidden {
	/* visibility: hidden; */
	display: none;
	pointer-events: none;
}

@media (max-width: 781px) {
	.project-testimonial {
		grid-template-columns: 1fr;
		gap: var(--wp--preset--spacing--medium);
	}
	.project-testimonial__quote {
		--pt-collapsed-height: 180px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-testimonial__quote {
		transition: none;
	}
	.project-testimonial__fade {
		transition: none;
	}
	.project-testimonial__toggle svg {
		transition: none;
	}
}

/* Similar Projects */
.project-similar {
	margin: var(--wp--preset--spacing--large) 0;
}

.project-similar__grid {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--wp--preset--spacing--medium);
	margin-top: var(--wp--preset--spacing--medium);
}

/* Default: 3-column sizing (1–3 items, centered) */
.project-similar__item {
	flex: 0 1 calc((100% - 2 * var(--wp--preset--spacing--medium)) / 3);
	min-width: 0;
	text-decoration: none;
	display: flex;
	flex-direction: column;
}

/* 4+ items: 4-column sizing, left-aligned */
.project-similar__grid--cols-4 {
	justify-content: flex-start;
}

.project-similar__grid--cols-4 .project-similar__item {
	flex: 0 1 calc((100% - 3 * var(--wp--preset--spacing--medium)) / 4);
}

.project-similar__thumb {
	display: block;
	overflow: hidden;
	border-radius: 8px;
	margin-bottom: var(--wp--preset--spacing--small);
	aspect-ratio: 16/10;
}

.project-similar__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.3s ease;
}

.project-similar__item:hover .project-similar__thumb img {
	transform: scale(1.03);
}

.project-similar__title {
	display: block;
	margin: 0 0 var(--wp--preset--spacing--xxx-small);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--rich-black);
}

.project-similar__industry {
	display: block;
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--steel);
}

/* 
===================================================================================================
TRUST STRIP STYLES
===================================================================================================
*/

/* The Trust Strip Container */
.trust-strip {
	/* Increased max-width to allow everything to breathe on one line */
	max-width: 1600px;
	margin: 0 auto !important;
	/* Fluid gap: Scales from 1rem on small screens to 10rem (approx 160px) on large screens */
	gap: clamp(1rem, 10vw, 10rem) !important;
}

/* Individual Box Styling */
.trust-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	position: relative;
	/* Sufficient padding to keep text away from the divider */
	padding-right: clamp(1rem, 4vw, 4rem) !important;
}

/* Vertical Divider - On the RIGHT of EVERY item */
.trust-item::after {
	content: "";
	position: absolute;
	right: 0;
	top: 10%;
	height: 80%;
	width: 4px;
	background-color: var(--wp--preset--color--ghost-white);
}

/* Fluid Large Lettering */
.trust-heading h2 {
	/* font-size: clamp(1.8rem, 5vw, 7rem); */
	font-size: clamp(1.8rem, 0.7368rem + 2.7vw, 7rem) !important;
	font-weight: 900;
	color: var(--wp--preset--color--ghost-white);
	margin: 0;
	line-height: 1.1;
	letter-spacing: -0.02em;
	white-space: nowrap;
}

/* Subtext Label Styling */
.trust-label {
	font-size: 0.875rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-top: 1rem;
	opacity: 0.8;

	white-space: nowrap;
}

/* Mobile Adjustments (Stacked Layout) */
@media (max-width: 1100px) {
	.trust-strip {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 3rem !important;
	}

	.trust-item {
		width: 100%;
		/* Maintain right padding on mobile to keep the line visible */
		padding-right: 2rem;
		padding-left: 0;
		/* Limit width so the divider isn't miles away from the text on tablets */
		max-width: max-content;
	}

	/* The divider is now kept visible on tablet/mobile */
	.trust-item::after {
		display: block;
	}

	.trust-heading h2,
	.trust-label {
		/* Allow wrapping on actual mobile devices to prevent horizontal scroll */
		white-space: normal;
	}

	.trust-heading h2 {
		font-size: clamp(2.5rem, 10vw, 4.5rem) !important;
	}
}

/* Projects Trust Strip — heading weight override */
.vpe-projects-trust-strip h2 {
	font-weight: 700;
	letter-spacing: -0.088rem;
}

/* ── VPE Button System ─────────────────────────────────────── */
:root {
    --vpe-red:            var(--wp--preset--color--vpe-red, #B64A4A);
    --vpe-red-hover:      var(--wp--preset--color--vpe-red-dark, #8F3535);
    --vpe-charcoal:       var(--wp--preset--color--rich-black, #121313);
    --vpe-charcoal-hover: var(--wp--preset--color--charcoal, #3F4041);
    --vpe-steel:          var(--wp--preset--color--slate, #58595B);
    --vpe-steel-hover:    var(--wp--preset--color--steel, #808080);
    --vpe-warm-white:     var(--wp--preset--color--warm-white, #FCFDFD);
    --vpe-light-grey:     var(--wp--preset--color--ghost-white, #EFEFEF);
    --btn-height:         48px;
    --btn-padding:        0 24px;
    --btn-radius:         8px;
    --btn-gap:            12px;
}

/* 1. Base button */
button.forminator-button.forminator-button-submit,
.vpe-custom-btn a.uagb-buttons-repeater {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    gap: var(--btn-gap);
    height: var(--btn-height) !important;
    padding: var(--btn-padding) !important;
    border-radius: var(--btn-radius) !important;
    background: var(--vpe-red) !important;
    color: var(--wp--preset--color--warm-white) !important;
    border: 1.5px solid var(--vpe-red) !important;
    text-decoration: none;
    position: relative !important;
    z-index: 1;
    overflow: hidden !important;
    transition: transform 0.1s ease !important;
}

/* 2. Kill Spectra's default hover styles */
.vpe-custom-btn a.uagb-buttons-repeater:hover {
    background: var(--vpe-red) !important;
    color: var(--wp--preset--color--warm-white) !important;
    box-shadow: none !important;
}

/* 3. Slide wipe */
.vpe-custom-btn a.uagb-buttons-repeater::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpe-red-hover);
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.vpe-custom-btn a.uagb-buttons-repeater:hover::before {
    transform: translateX(0);
}

/* 4. Active state */
.vpe-custom-btn a.uagb-buttons-repeater:active {
    transform: scale(0.98);
}

/* 5. Circle icon */
.vpe-custom-btn a.uagb-buttons-repeater::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--wp--preset--color--warm-white);
    border-radius: 50%;
    margin-left: 4px;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: filter 0.3s ease;
}

/* 6. Circle glow on hover */
.vpe-custom-btn a.uagb-buttons-repeater:hover::after {
    filter: drop-shadow(0 0 4px var(--wp--preset--color--warm-white)) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* 7. Keep button text above the wipe layer */
.vpe-custom-btn .uagb-button__link {
    position: relative;
    z-index: 2;
    background: transparent !important;
}

/* ── Secondary ─────────────────────────────────────────────── */
.vpe-custom-btn--secondary a.uagb-buttons-repeater {
    background: var(--vpe-charcoal) !important;
    border-color: var(--vpe-charcoal) !important;
}
.vpe-custom-btn--secondary a.uagb-buttons-repeater:hover {
    background: var(--vpe-charcoal) !important;
}
.vpe-custom-btn--secondary a.uagb-buttons-repeater::before {
    background: var(--vpe-charcoal-hover);
}

/* ── Forminator Submit (secondary / charcoal style) ─────────── */
button.forminator-button.forminator-button-submit {
    background: var(--vpe-charcoal) !important;
    border-color: var(--vpe-charcoal) !important;
    width: auto !important;
    cursor: pointer;
}

button.forminator-button.forminator-button-submit:hover {
    background: var(--vpe-charcoal) !important;
    color: var(--wp--preset--color--warm-white) !important;
    box-shadow: none !important;
}

button.forminator-button.forminator-button-submit::before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--vpe-charcoal-hover);
    z-index: -1;
    transform: translateX(-100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

button.forminator-button.forminator-button-submit:hover::before {
    transform: translateX(0);
}

button.forminator-button.forminator-button-submit:active {
    transform: scale(0.98);
}

button.forminator-button.forminator-button-submit span[aria-hidden] {
    display: none !important;
}

button.forminator-button.forminator-button-submit::after {
    content: "";
    width: 12px;
    height: 12px;
    border: 1.5px solid var(--wp--preset--color--warm-white);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    transition: filter 0.3s ease;
}

button.forminator-button.forminator-button-submit:hover::after {
    filter: drop-shadow(0 0 4px var(--wp--preset--color--warm-white)) drop-shadow(0 0 8px rgba(255,255,255,0.6));
}

/* ── Tertiary ───────────────────────────────────────────────── */
.vpe-custom-btn--tertiary a.uagb-buttons-repeater {
    background: var(--vpe-steel) !important;
    border-color: var(--vpe-steel) !important;
}
.vpe-custom-btn--tertiary a.uagb-buttons-repeater:hover {
    background: var(--vpe-steel) !important;
}
.vpe-custom-btn--tertiary a.uagb-buttons-repeater::before {
    background: var(--vpe-steel-hover);
}

/* ── Quaternary ─────────────────────────────────────────────── */
.vpe-custom-btn--quaternary a.uagb-buttons-repeater {
    background: var(--vpe-warm-white) !important;
    border-color: var(--vpe-warm-white) !important;
    color: var(--vpe-charcoal) !important;
}
.vpe-custom-btn--quaternary a.uagb-buttons-repeater:hover {
    background: var(--vpe-warm-white) !important;
    color: var(--vpe-charcoal) !important;
}
.vpe-custom-btn--quaternary a.uagb-buttons-repeater::before {
    background: var(--vpe-light-grey);
}

/* Quaternary circle and glow are dark instead of white */
.vpe-custom-btn--quaternary a.uagb-buttons-repeater::after {
    border-color: var(--vpe-charcoal);
}
.vpe-custom-btn--quaternary a.uagb-buttons-repeater:hover::after {
    filter: drop-shadow(0 0 4px rgba(0,0,0,0.4)) drop-shadow(0 0 8px rgba(0,0,0,0.2));
}

/* ── Button Width Constraints ───────────────────────────────────────
Ensures buttons don't exceed 320px and maintain consistent sizing
   ─────────────────────────────────────────────────────────────────── */
.vpe-custom-btn a.uagb-buttons-repeater.wp-block-button__link,
.vpe-custom-btn.vpe-custom-btn--secondary a.uagb-buttons-repeater.wp-block-button__link {
    max-width: 320px !important;
    width: 100% !important;
}

@media (max-width: 767px) {
    .vpe-custom-btn a.uagb-buttons-repeater.wp-block-button__link,
    .vpe-custom-btn.vpe-custom-btn--secondary a.uagb-buttons-repeater.wp-block-button__link {
        min-width: 320px !important;
        width: 100% !important;
    }
}

/* ── UAGB Buttons — tablet/mobile full-width stacking ─────── */
@media (max-width: 1024px) {
    .wp-block-uagb-buttons.uagb-buttons__layout-wrap {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px;
    }

    .wp-block-uagb-buttons-child.uagb-buttons__outer-wrap {
        width: 100% !important;
        max-width: 100% !important;
    }

    .wp-block-uagb-buttons a.uagb-buttons-repeater.wp-block-button__link {
        width: 100% !important;
        justify-content: center;
        display: inline-flex !important;
    }
}

/* ── Buttons — mobile left-alignment ─────────────────────── */
@media only screen and (max-width: 767px) {
    .vpe-buttons .uagb-buttons-layout-wrap {
        align-items: flex-start !important;
    }
}

/* ── Team Section ──────────────────────────────────────────── */
.my-team-card.uagb-team__image-position-above img {
    width: 100% !important;
    height: auto !important;
    max-width: 100% !important;
    object-fit: cover;
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.vpe-team-card {
    height: auto !important;
    border-radius: 8px;
    border: solid 1px var(--wp--preset--color--pale-gray);
    overflow: hidden;
}

.vpe-team-card .uagb-team__image-wrap {
    overflow: hidden;
}

.vpe-team-card img {
    filter: grayscale(100%);
    transition: filter 0.6s ease, transform 0.6s ease !important;
}

.vpe-team-card:hover img {
    filter: grayscale(0%);
    transform: scale(1.04);
}


/* ── Footer ────────────────────────────────────────────────── */
.footer {
    overflow: hidden !important;
}
.footer-base-links p a {
    font-size: var(--wp--preset--font-size--x-small) !important;
}

/* ── Footer Noah's Logo ────────────────────────────────────── */
.noahsportfolio-link-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.noahsportfolio-combined-link {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: var(--wp--preset--color--slate);
}

.noahsportfolio-text {
    font-size: var(--wp--preset--font-size--x-small);
    color: var(--wp--preset--color--silver);
    transition: color 0.3s ease;
}

.noahsportfolio-logo-container {
    position: relative;
    display: inline-block;
}

.noahsportfolio-logo {
    width: 16px;
    height: auto;
    transition: transform 0.3s ease, filter 0.3s ease;
    display: block;
    filter: brightness(0) saturate(100%) invert(87%) sepia(2%) saturate(986%) hue-rotate(94deg) brightness(119%) contrast(93%);
}

.noahsportfolio-combined-link:hover .noahsportfolio-logo {
    transform: scale(1.5);
    filter: brightness(0) saturate(100%) invert(36%) sepia(5%) saturate(304%) hue-rotate(160deg) brightness(91%) contrast(89%);
}

.noahsportfolio-combined-link:hover .noahsportfolio-text {
    color: var(--wp--preset--color--custom-silver);
}

/* Tooltip styles */
[data-tooltip] {
    position: relative;
}

/* Apply glow via drop-shadow on parent to avoid inner arrow bleeding */
[data-tooltip]::before {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    z-index: 99;
    pointer-events: none;
    filter: drop-shadow(0 0 10px var(--vpe-red-hover));
}

[data-tooltip]::after {
    position: absolute;
    visibility: hidden;
    opacity: 0;
    transition: transform 200ms ease, opacity 200ms;
    z-index: 99;
    pointer-events: none;
    filter: drop-shadow(0 0 10px var(--vpe-red-hover));
}

[data-tooltip]:before {
    content: attr(data-tooltip);
    background: var(--wp--preset--color--rich-black);
    color: var(--wp--preset--color--ghost-white);
    font-size: 10px;
    font-weight: bold;
    padding: 10px 15px;
    border-radius: 5px;
    white-space: nowrap;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}

[data-tooltip]:after {
    width: 0;
    height: 0;
    border: 6px solid transparent;
    content: '';
}

[data-tooltip][data-position="right"]::before {
    top: 50%;
    left: 100%;
    margin-left: 10px;
    transform: translate(0, -50%);
}

[data-tooltip][data-position="right"]::after {
    border-right-color: var(--wp--preset--color--rich-black);
    border-left: none;
    top: calc(50% - 6px);
    left: calc(100% + 4px);
    transform: translate(0, 0);
}

.noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::after,
.noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::before {
    visibility: visible;
    opacity: 0.85;
}

.noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::before {
    transform: translate(10px, -50%);
}

.noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::after {
    transform: translate(10px, 0);
}

/* At 1800px and below, switch tooltip to bottom position to prevent right-edge cutoff */
@media (max-width: 1800px) {
    /* Override right-positioned tooltips to bottom-positioned */
    [data-tooltip][data-position="right"]::before {
        top: 100%;
        left: 50%;
        margin-left: 0;
        margin-top: 4px;
        transform: translate(-50%, 0);
    }

    [data-tooltip][data-position="right"]::after {
        border-bottom-color: var(--wp--preset--color--rich-black);
        border-top: none;
        border-right-color: transparent;
        border-left: none;
        top: calc(100% - 2px);
        left: 50%;
        transform: translate(-50%, 0);
        margin-left: 0;
    }

    .noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::after,
    .noahsportfolio-combined-link:hover [data-tooltip][data-position="right"]::before {
        transform: translate(-50%, 6px);
    }
}

/*
===================================================================================================
FAQ SECTION — kicker-style numbered items (// 01, // 02 …)
===================================================================================================
*/

/* Initialise counter on the wrapper */
.vpe-faq {
    counter-reset: faq-counter;
}

/* Each FAQ item increments the counter and reserves space for the number */
.vpe-faq .uagb-faq-item {
    counter-increment: faq-counter;
    position: relative;
    padding-left: 100px;
}

.uagb-block-52e21dd9 .uagb-faq-child__outer-wrap .uagb-faq-content {
    border: none !important;
}

/* Number label positioned to the left of the question (Mobile / Base style) */
.vpe-faq .uagb-faq-item::before {
    content: "// " counter(faq-counter, decimal-leading-zero);
    font-family: 'Roboto Mono', monospace;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: 1.2px;
    color: var(--wp--preset--color--steel);
    position: absolute;
    left: 0;
    top: 0;
    padding-top: 20px; /* <--- For mobile */
}

/* Tablet and Desktop style (768px and up) */
@media (min-width: 768px) {
    body .vpe-faq .uagb-faq-item::before {
        padding-top: 28px; /* <--- Bumped up for larger screens */
    }
}

/* ── FAQ Base Mobile / Small Screens (under 768px) ─────────────── */
body .vpe-faq .uagb-faq-item::before {
    padding-top: 34px;
}

/* ── FAQ Subtle Transitions ────────────────────────────────── */
.uagb-faq-item .uagb-question,
.uagb-faq-item {
    transition: all 0.3s ease-in-out;
}

/* ── FAQ Last Item Question Button ──────────────────────────── */
/* Target the questions button inside ONLY the last FAQ item */
.uagb-faq-child__outer-wrap:last-child .uagb-faq-questions-button {
    padding-bottom: 0px;
}

/* ── FAQ Answer Spacing ─────────────────────────────────────── */
/* Reduce space between question and answer */
.uagb-faq-content {
    margin-top: -4px;
}

.vpe-faq .uagb-faq-child__outer-wrap:last-child .uagb-faq-content {
    margin-top: 24px;
}

@media (min-width: 977px) {
    /* Target all answers inside VPE FAQ block */
    .vpe-faq .uagb-faq-content {
        margin-top: -22px;
    }

    /* Target the answer inside ONLY the final row container */
    .vpe-faq .uagb-faq-child__outer-wrap:last-child .uagb-faq-content {
        margin-top: 8px;
    }
}

/* ── FAQ Icon Animation ─────────────────────────────────────── */
/* Reset: Let the plugin handle hiding/showing the wrappers naturally */
.uagb-faq-questions-button .uagb-icon,
.uagb-faq-questions-button .uagb-icon-active {
    display: inherit;
}

/* Target the SVG inside the active minus icon wrapper */
.uagb-faq-questions-button .uagb-icon-active svg {
    animation: uagbSpinIn 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    transform-origin: center;
}

/* Target the SVG inside the returning plus icon wrapper */
.uagb-faq-questions-button .uagb-icon svg {
    animation: uagbSpinOut 0.35s ease-in-out forwards;
    transform-origin: center;
}

/* --- The Animation Smoothers --- */
@keyframes uagbSpinIn {
    from {
        transform: rotate(-90deg) scale(0.6);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

@keyframes uagbSpinOut {
    from {
        transform: rotate(90deg) scale(0.6);
        opacity: 0;
    }
    to {
        transform: rotate(0deg) scale(1);
        opacity: 1;
    }
}

/* 
===================================================================================================
VPE TEXT LINK — arrow link component
===================================================================================================
*/

p.vpe-text-link {
    width: auto !important;
}

.vpe-text-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--btn-font, 'Roboto', sans-serif);
    font-size: var(--btn-font-size, 1rem);
    font-weight: 500;
    color: var(--wp--preset--color--slate);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}


.vpe-text-link::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%2358595B' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
    display: inline-block;
    transition: transform 0.2s ease;
    padding-top: 8px;
}

.vpe-text-link:hover {
    color: var(--wp--preset--color--rich-black);
    gap: 14px;
}

.vpe-text-link:hover::after {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%23121313' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
    transform: translateX(3px);
}

/* 
===================================================================================================
VPE BACK-TO LINK — left-arrow link component
===================================================================================================
*/

p.vpe-back-to-link {
    width: auto !important;
}

.vpe-back-to-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--btn-font, 'Roboto', sans-serif);
    font-size: var(--btn-font-size, 1rem);
    font-weight: 500;
    color: var(--wp--preset--color--slate);
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.vpe-back-to-link::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%2358595B' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M10.4844 17.1875 4.2969 11l6.1875-6.1875M5.1562 11h12.5469'/%3E%3C/svg%3E");
    display: inline-block;
    transition: transform 0.2s ease;
    padding-top: 8px;
}

.vpe-back-to-link:hover {
    color: var(--wp--preset--color--rich-black);
    gap: 14px;
}

.vpe-back-to-link:hover::before {
    content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%23121313' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M10.4844 17.1875 4.2969 11l6.1875-6.1875M5.1562 11h12.5469'/%3E%3C/svg%3E");
    transform: translateX(-3px);
}

/* 
===================================================================================================
HERO RATING — small selling text in homepage hero section
===================================================================================================
*/

.uppercase.hero-rating {
    font-size: 1rem;
}

/* 
===================================================================================================
CONTENT TEXT LINKS — inline links inside page/post body paragraphs
Excludes .vpe-text-link, .vpe-back-to-link and .vpe-link paragraphs which have their own styles.
===================================================================================================
*/
.entry-content p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a,
.single-post p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a,
.page p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a {
    position: relative;
    text-decoration: none;
    display: inline-block;
    color: #755454;
    transition: color 0.3s ease;
}

.entry-content p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover,
.single-post p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover,
.page p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover {
    color: var(--wp--preset--color--custom-rich-black);
}

/* Animated underline — expands from centre on hover */
.entry-content p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a::before,
.single-post p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a::before,
.page p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a::before {
    content: "";
    position: absolute;
    width: 0%;
    height: 2px;
    bottom: -1px;
    left: 50%;
    background-color: #755454;
    transition: width 0.3s ease, left 0.3s ease;
}

.entry-content p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover::before,
.single-post p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover::before,
.page p:not(.vpe-text-link):not(.vpe-back-to-link):not(.vpe-link) a:hover::before {
    width: 100%;
    left: 0;
}

/* 
===================================================================================================
WHY VPE — card accent bar
===================================================================================================
*/

.why-vpe-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 158px;
	height: 4px;
	background: var(--wp--preset--color--rich-black);
}

/* 
===================================================================================================
SERVICES PAGE — square boxes
===================================================================================================
*/

.services-boxes {
    height: 100%;
}

/* VPE Tag Boxes */
.vpe-tag {
    max-height: 36px;
    text-transform: uppercase;
}

/* Services link — numbers block alignment */
.vpe-services-link {
	align-items: flex-start !important;
}

/* 
===================================================================================================
WHATSAPP LINK — Contact Page
===================================================================================================
*/

.whatsapp-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}

.whatsapp-link img {
    width: 14px;
    height: 14px;
    margin-right: 8px;
}

.whatsapp-link:hover {
    color: var(--wp--preset--color--secondary);
}

/* 
===================================================================================================
RECAPTCHA — hide badge
===================================================================================================
*/

.grecaptcha-badge {
    visibility: hidden !important;
}

/* Forminator — kicker label in form fields */
.forminator-field .small-kicker {
	font-family: var(--wp--preset--font-family--roboto-mono) !important;
	font-size: var(--wp--preset--font-size--custom-7) !important;
	color: var(--wp--preset--color--steel) !important;
}

/* ── Contact Form Layout ─────────────────────────────────────── */
.contact-sidebar-sticky {
    position: sticky;
    top: 2rem;
    align-self: start;
}

.vpe-form-catch-line {
    margin-top: 6rem;
    position: absolute;
    margin-left: 0;
}

/* 
===================================================================================================
OUTBOUND SOCIAL LINKS — dark & light variants with arrow
===================================================================================================
*/

.social-link-dark a,
.social-link-light a {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: color 0.3s ease;
    outline: none;
}

.social-link-dark a::after,
.social-link-light a::after {
    content: "";
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-left: 8px;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='black' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22'%3E%3Cpath stroke='black' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
    transform: rotate(-45deg);
    transition: transform 0.3s ease, background-color 0.3s ease;
    background-color: currentColor;
}

.social-link-dark a {
    color: var(--wp--preset--color--silver);
}

.social-link-light a {
    color: var(--wp--preset--color--slate);
}

.social-link-light a:hover,
.social-link-light a:focus {
    color: var(--wp--preset--color--rich-black);
}

.social-link-dark a:hover,
.social-link-dark a:focus {
    color: var(--wp--preset--color--slate);
}

.social-link-light a:hover::after,
.social-link-light a:focus::after {
    transform: rotate(0deg);
    background-color: var(--wp--preset--color--rich-black);
}

.social-link-dark a:hover::after,
.social-link-dark a:focus::after {
    transform: rotate(0deg);
    background-color: var(--wp--preset--color--slate);
}

/* 
===================================================================================================
STAR HEADING — homepage heading with inline star decoration
===================================================================================================
*/

.star-heading h2 {
    width: 100%;
    display: inline-block !important;
}

.star-heading .uagb-heading-text {
    display: inline-flex;
    align-items: center;
}

.star-heading .uagb-heading-text::after {
    content: "\2605";
    color: var(--wp--preset--color--vpe-red-light);
    font-size: 0.75em;
    line-height: 1;
    margin-left: 8px;
    margin-right: 4px;
    position: relative;
    top: -8px;
}

/* Five-star decoration — inline star after element */
.five-star::after {
	content: "\2605";
	color: var(--wp--preset--color--vpe-red);
	font-size: 1.25rem;
	line-height: 1;
	top: 0.25rem;
	position: absolute;
	left: 1.5rem;
}

@media (min-width: 768px) {
	.five-star::after {
		top: 0.75rem;
		left: 2rem;
	}
}

.uagb-block-49f585a7 {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 8px;
}

/* 
===================================================================================================
BLOG — featured image, meta, archive text links
===================================================================================================
*/

.wp-block-uagb-container.featured-img-wrap.uagb-block-10573b85 {
	width: 100% !important;
}

.featured-img-wrap.wp-block-uagb-container {
	width: 100% !important;
	min-width: 100% !important;
}

.vpe-blog-meta p,
.vpe-blog-meta a {
	font-size: var(--wp--preset--font-size--custom-8) !important;
	font-family: var(--wp--preset--font-family--roboto-mono);
	text-transform: uppercase;
}

/* Blog pagination */
.page-numbers {
	font-size: var(--wp--preset--font-size--custom-7) !important;
}

.page-numbers.current {
	color: var(--wp--preset--color--steel) !important;
}

/* Blog archive — text links with arrow */
.uagb-post__text a.uagb-text-link {
	padding-left: 0;
}

a.wp-block-read-more::after,
.uagb-post__text a.uagb-text-link::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%2358595B' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
	display: inline-block;
	transition: transform 0.2s ease;
	padding-left: 9px;
	top: 4px;
	position: relative;
}

a.wp-block-read-more:hover::after,
.uagb-post__text a.uagb-text-link:hover::after {
	content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 22 22' width='20' height='20'%3E%3Cpath stroke='%23121313' stroke-linecap='square' stroke-miterlimit='10' stroke-width='1.3125' d='M11.5156 17.1875 17.7031 11l-6.1875-6.1875M16.8438 11H4.29688'/%3E%3C/svg%3E");
	transform: translateX(4px);
}

/* 
===================================================================================================
FOOTER — layout grid, button width, link colours
===================================================================================================
*/

@media (min-width: 768px) {
    .vpe-footer-top {
        display: grid !important;
        grid-template-columns: 1.25fr 1fr 1fr !important;
        grid-template-areas: "logo links contact" !important;
        align-items: start !important;
        gap: 0 var(--grid-gutter, 40px) !important;
    }

    .vpe-footer-logo {
        grid-area: logo !important;
    }

    .wp-block-uagb-container.vpe-footer-links-wrap {
        grid-area: links;
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 var(--grid-gutter, 40px) !important;
        width: 100% !important;
    }

    .vpe-footer-contact {
        grid-area: contact !important;
    }
}

@media (max-width: 767px) {
    .wp-block-uagb-container.vpe-footer-links-wrap {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 0 24px !important;
    }
}

.vpe-footer-btn,
.vpe-footer-btn a.wp-block-button__link {
    width: 100% !important;
}

.footer a,
.footer a:visited,
.footer a.noahsportfolio-combined-link {
    transition: color 0.3s ease;
    color: var(--wp--preset--color--silver) !important;
}

.footer a:hover {
    color: var(--wp--preset--color--slate) !important;
}

/* Footer CTA button — force warm-white text */
.vpe-custom-btn.vpe-footer-btn a.uagb-buttons-repeater {
    color: var(--wp--preset--color--warm-white) !important;
}