/*
Theme Name: Craftroots
Theme URI: https://craftrootstech.com
Author: Craftroots Technologies
Description: Block theme for craftrootstech.com — Craftroots Technologies: digital marketing, web design, AI automation and software for Namibian businesses. Forest green, Craftroots gold and heritage brown, Cinzel and Poppins, carried over from the previous site. Page content is created by scripts/setup-wordpress.js (Operations Handbook Section 2.1).
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 7.4
Version: 2.3.1
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: craftroots
*/

/* Colours, type and spacing are in theme.json. This file is the layer
   theme.json can't express: depth, motion and a few component shapes. */

:root {
	--cr-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--cr-forest-rgb: 48, 80, 48;
	--cr-deep-rgb: 30, 53, 32;
	--cr-gold-rgb: 255, 191, 31;
	--cr-brown-rgb: 87, 49, 30;
	/* Layered shadows: a tight contact shadow plus two soft ambient ones. */
	--cr-shadow-sm: 0 1px 2px rgba(var(--cr-deep-rgb), 0.06), 0 4px 12px -4px rgba(var(--cr-deep-rgb), 0.12);
	--cr-shadow-md: 0 1px 2px rgba(var(--cr-deep-rgb), 0.06), 0 12px 28px -10px rgba(var(--cr-deep-rgb), 0.22), 0 30px 60px -30px rgba(var(--cr-deep-rgb), 0.3);
	--cr-shadow-lg: 0 2px 4px rgba(var(--cr-deep-rgb), 0.08), 0 24px 48px -16px rgba(var(--cr-deep-rgb), 0.35), 0 48px 96px -40px rgba(var(--cr-deep-rgb), 0.45);
	--cr-hero-photo: url("https://images.unsplash.com/photo-1643267514395-b36b3f7e8281?auto=format&fit=crop&q=80&w=2000");
}

body {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

::selection {
	background: rgba(var(--cr-gold-rgb), 0.35);
	color: var(--wp--preset--color--brown);
}

:focus-visible {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 3px;
}

/* ---- Page frame ---------------------------------------------------------- */

.wp-site-blocks > header.wp-block-template-part {
	position: sticky;
	top: 0;
	z-index: 50;
}

.admin-bar .wp-site-blocks > header.wp-block-template-part {
	top: var(--wp-admin--admin-bar--height, 32px);
}

.wp-site-blocks > main,
.wp-site-blocks > footer {
	margin-block-start: 0;
}

/* ---- Header -------------------------------------------------------------- */

.cr-header {
	transition: background-color 0.35s ease, box-shadow 0.35s ease;
	border-bottom: 1px solid rgba(var(--cr-gold-rgb), 0.12);
}

/* Only colour and shadow change on scroll. Changing the header's height
   moved the page under a sticky header and flipped the state back and
   forth near the top: the "shaky header" (fixed 2.3.0). */
.cr-header.is-scrolled {
	background-color: rgba(var(--cr-deep-rgb), 0.94) !important;
	backdrop-filter: saturate(140%) blur(10px);
	box-shadow: 0 10px 30px -12px rgba(0, 0, 0, 0.45);
}

.cr-header .wp-block-site-title a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	letter-spacing: 0.02em;
}

.cr-logo img {
	background: #fff;
	box-shadow: 0 0 0 2px rgba(var(--cr-gold-rgb), 0.55), 0 6px 16px -6px rgba(0, 0, 0, 0.5);
	transition: transform 0.6s var(--cr-ease);
}

.cr-logo {
	flex-shrink: 0;
}

.cr-logo img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
	max-width: none;
}

.cr-logo:hover img {
	transform: rotate(-8deg) scale(1.04);
}

.cr-header .wp-block-navigation-item__content {
	position: relative;
	color: var(--wp--preset--color--cream);
	padding-block: 0.35rem;
	text-decoration: none;
	transition: color 0.25s ease;
}

.cr-header .wp-block-navigation-item__content::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	border-radius: 2px;
	background: var(--wp--preset--color--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s var(--cr-ease);
}

.cr-header .wp-block-navigation-item__content:hover,
.cr-header .is-current > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--gold);
}

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

.cr-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 2rem;
	background: linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--forest-deep)) !important;
}

.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.6rem;
}

.cr-portal-link a {
	color: var(--wp--preset--color--cream);
	font-weight: 500;
	font-size: 0.9375rem;
	text-decoration: none;
	transition: color 0.25s ease;
}

.cr-portal-link a:hover {
	color: var(--wp--preset--color--gold);
}

/* Client Portal sits beside the button on wide screens and inside the
   menu on narrow ones. */
.cr-header .wp-block-navigation__responsive-container:not(.is-menu-open) .cr-mobile-only {
	display: none;
}

/* Below 1100px the full menu doesn't fit on one line: use the menu
   button (WordPress only switches below 600px on its own). */
@media (max-width: 1099px) {
	.cr-portal-link {
		display: none;
	}

	.cr-header .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}

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

	.cr-header .wp-block-navigation__responsive-container.is-menu-open {
		display: flex;
		position: fixed;
		inset: 0;
		z-index: 100000;
	}

	.cr-header .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: block;
	}

	.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
		flex-direction: column;
		align-items: flex-start;
		gap: 1.25rem;
	}
}

.cr-header .wp-block-group {
	min-width: 0;
}

@media (max-width: 1099px) {
	/* Mobile and tablet: brand on the left, then Free Audit, then the menu
	   button, with clear space between them. */
	.cr-header > .wp-block-group {
		gap: 0.75rem !important;
	}

	.cr-header > .wp-block-group > .wp-block-group:first-child {
		flex: 1 1 auto;
	}

	.cr-header > .wp-block-group > .wp-block-group:last-child {
		order: 2;
		flex-shrink: 0;
	}

	.cr-header > .wp-block-group > .wp-block-navigation {
		order: 3;
		flex-shrink: 0;
	}

	.cr-header .wp-block-navigation__responsive-container-open {
		width: 2.75rem;
		height: 2.75rem;
		align-items: center;
		justify-content: center;
		border-radius: 12px;
		border: 1px solid rgba(var(--cr-gold-rgb), 0.35);
	}
}

@media (max-width: 600px) {
	.cr-header .wp-block-site-title {
		font-size: 1.05rem !important;
	}

	.cr-header .cr-logo img {
		width: 44px !important;
		height: 44px !important;
	}

	.cr-header .wp-block-button__link {
		padding: 0.6rem 1rem;
		font-size: 0.875rem;
		white-space: nowrap;
	}
}

@media (max-width: 380px) {
	.cr-header .wp-block-site-title {
		font-size: 0.95rem !important;
	}
}

/* ---- Buttons ------------------------------------------------------------- */

.wp-block-button__link {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	box-shadow: 0 10px 24px -10px rgba(var(--cr-gold-rgb), 0.75), inset 0 -2px 0 rgba(var(--cr-brown-rgb), 0.18);
	transition: transform 0.35s var(--cr-ease), box-shadow 0.35s var(--cr-ease), background-color 0.3s ease, color 0.3s ease;
}

/* A light sheen sweeps across on hover. */
.wp-block-button__link::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
	transform: translateX(-120%);
	transition: transform 0.75s var(--cr-ease);
}

.wp-block-button__link:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 36px -12px rgba(var(--cr-gold-rgb), 0.85), inset 0 -2px 0 rgba(var(--cr-brown-rgb), 0.18);
}

.wp-block-button__link:hover::after {
	transform: translateX(120%);
}

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

.is-style-outline > .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--gold);
	border: 2px solid var(--wp--preset--color--gold);
	box-shadow: none;
}

.is-style-outline > .wp-block-button__link:hover {
	background: rgba(var(--cr-gold-rgb), 0.12);
	color: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 4px rgba(var(--cr-gold-rgb), 0.12);
}

.is-style-outline > .wp-block-button__link::after {
	background: linear-gradient(110deg, transparent 30%, rgba(var(--cr-gold-rgb), 0.25) 50%, transparent 70%);
}

.cr-header .wp-block-button__link {
	padding: 0.8rem 1.6rem;
	border-radius: 14px;
}

/* ---- Hero ---------------------------------------------------------------- */

.cr-hero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background-color: var(--wp--preset--color--green);
	color: var(--wp--preset--color--cream);
}

.cr-hero::before,
.cr-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
}

.cr-hero--photo::before {
	background: var(--cr-hero-photo) center / cover no-repeat;
	transform-origin: 70% 40%;
	animation: cr-drift 26s var(--cr-ease) both;
}

/* Forest wash, strongest behind the text, as on the previous site. */
.cr-hero::after {
	background:
		linear-gradient(90deg, rgba(var(--cr-forest-rgb), 0.97) 0%, rgba(var(--cr-forest-rgb), 0.86) 45%, rgba(var(--cr-forest-rgb), 0.45) 100%),
		linear-gradient(180deg, transparent 60%, rgba(var(--cr-deep-rgb), 0.55) 100%);
}

.cr-hero--home {
	min-height: min(88vh, 860px);
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.cr-hero h1 {
	color: var(--wp--preset--color--cream);
	text-shadow: 0 2px 30px rgba(0, 0, 0, 0.25);
}

.cr-hero h1 mark {
	display: block;
	color: var(--wp--preset--color--gold);
	background: none;
}

.cr-hero .cr-lead {
	color: rgba(249, 247, 245, 0.88);
	font-weight: 300;
	max-width: 40rem;
}

.cr-hero > * {
	animation: cr-rise 1s var(--cr-ease) both;
}

.cr-hero > :nth-child(2) { animation-delay: 0.12s; }
.cr-hero > :nth-child(3) { animation-delay: 0.24s; }
.cr-hero > :nth-child(4) { animation-delay: 0.36s; }
.cr-hero > :nth-child(5) { animation-delay: 0.48s; }

.cr-badge {
	display: inline-flex !important;
	width: fit-content;
	align-items: center;
	gap: 0.6rem;
	padding: 0.45rem 1.1rem;
	border: 1px solid rgba(var(--cr-gold-rgb), 0.5);
	border-radius: 999px;
	color: var(--wp--preset--color--gold);
	font-weight: 500;
	font-size: 0.875rem;
	background: rgba(var(--cr-deep-rgb), 0.25);
	backdrop-filter: blur(6px);
}

.cr-badge::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wp--preset--color--gold);
	box-shadow: 0 0 0 4px rgba(var(--cr-gold-rgb), 0.18);
}

.has-text-align-center.cr-badge,
.cr-badge.aligncenter {
	margin-inline: auto !important;
}

.cr-hero:not(.cr-hero--center) h1 {
	max-width: 15em;
}

/* Left-aligned heroes: WordPress's constrained layout centres every
   narrower child; pin them to the left edge of the 1240px content column. */
.cr-hero:not(.cr-hero--center) > * {
	margin-left: max(0px, calc((100% - 1240px) / 2)) !important;
	margin-right: auto !important;
}

.cr-hero--center .cr-lead {
	margin-inline: auto;
}

/* ---- Sections ------------------------------------------------------------ */

.cr-intro {
	max-width: 44rem;
	margin-inline: auto !important;
	color: var(--wp--preset--color--muted);
	margin-bottom: var(--wp--preset--spacing--50) !important;
}

.cr-forest .cr-intro,
.cr-forest p {
	color: rgba(249, 247, 245, 0.85);
}

.cr-section > .wp-block-heading {
	margin-top: 0.5rem;
}

.cr-section > .wp-block-heading + .wp-block-columns,
.cr-section > .wp-block-heading + .wp-block-details {
	margin-top: var(--wp--preset--spacing--50);
}

.cr-section > .wp-block-columns + .wp-block-columns {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-facts p {
	margin: 0;
}

.cr-facts .wp-block-column {
	padding-left: 1.25rem;
	border-left: 2px solid rgba(var(--cr-gold-rgb), 0.45);
}

.cr-eyebrow {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	color: var(--wp--preset--color--moss);
	font-weight: 600;
	font-size: 0.8125rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
}

.cr-eyebrow::before {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

.cr-eyebrow.has-text-align-center {
	justify-content: center;
}

.cr-eyebrow.has-text-align-center::after {
	content: "";
	width: 2.25rem;
	height: 2px;
	background: var(--wp--preset--color--gold);
}

.cr-forest {
	position: relative;
	background:
		radial-gradient(120% 80% at 85% 0%, rgba(var(--cr-gold-rgb), 0.08), transparent 55%),
		var(--wp--preset--color--green) !important;
	color: var(--wp--preset--color--cream);
	box-shadow: inset 0 24px 40px -30px rgba(0, 0, 0, 0.5), inset 0 -24px 40px -30px rgba(0, 0, 0, 0.5);
}

.cr-forest .cr-eyebrow {
	color: var(--wp--preset--color--gold);
}

.cr-sand {
	background-color: var(--wp--preset--color--sand) !important;
}

/* ---- Cards --------------------------------------------------------------- */

.cr-card {
	position: relative;
	overflow: hidden;
	border: 1px solid rgba(var(--cr-gold-rgb), 0.22);
	box-shadow: var(--cr-shadow-md);
	transition: transform 0.5s var(--cr-ease), box-shadow 0.5s var(--cr-ease), border-color 0.4s ease;
}

.cr-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 3px;
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--moss));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.6s var(--cr-ease);
}

.cr-card:hover {
	transform: translateY(-8px);
	box-shadow: var(--cr-shadow-lg);
	border-color: rgba(var(--cr-gold-rgb), 0.55);
}

.cr-card:hover::before {
	transform: scaleX(1);
}

/* Icons: a forest tile with a gold line icon, drawn in CSS so headings
   stay plain, editable blocks. */
.cr-icon::before {
	content: "";
	display: block;
	width: 3.25rem;
	height: 3.25rem;
	margin-bottom: 1.25rem;
	border-radius: 14px;
	background: var(--cr-icon) center / 1.5rem no-repeat, linear-gradient(145deg, var(--wp--preset--color--green), var(--wp--preset--color--forest-deep));
	box-shadow: 0 10px 20px -10px rgba(var(--cr-deep-rgb), 0.7), inset 0 1px 0 rgba(255, 255, 255, 0.08);
	transition: transform 0.5s var(--cr-ease);
}

.cr-card:hover .cr-icon::before {
	transform: rotate(-6deg) scale(1.06);
}

.cr-icon--search { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E"); }
.cr-icon--layers { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 10 5-10 5L2 7Z'/%3E%3Cpath d='m2 17 10 5 10-5'/%3E%3Cpath d='m2 12 10 5 10-5'/%3E%3C/svg%3E"); }
.cr-icon--check { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
.cr-icon--pen { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20h9'/%3E%3Cpath d='M16.5 3.5a2.1 2.1 0 0 1 3 3L7 19l-4 1 1-4Z'/%3E%3C/svg%3E"); }
.cr-icon--send { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m22 2-7 20-4-9-9-4Z'/%3E%3Cpath d='M22 2 11 13'/%3E%3C/svg%3E"); }
.cr-icon--chart { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 3v18h18'/%3E%3Cpath d='M18 17V9'/%3E%3Cpath d='M13 17V5'/%3E%3Cpath d='M8 17v-3'/%3E%3C/svg%3E"); }
.cr-icon--calendar { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3C/svg%3E"); }
.cr-icon--mail { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='4' width='20' height='16' rx='2'/%3E%3Cpath d='m22 7-10 5L2 7'/%3E%3C/svg%3E"); }
.cr-icon--chat { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7.9 20A9 9 0 1 0 4 16.1L2 22Z'/%3E%3C/svg%3E"); }
.cr-icon--pin { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E"); }
.cr-icon--shield { --cr-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFBF1F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10Z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }

/* ---- Process steps ------------------------------------------------------- */

.cr-steps {
	position: relative;
	counter-reset: cr-step;
}

.cr-step-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	border-radius: 50%;
	font-family: var(--wp--preset--font-family--display);
	font-weight: 700;
	font-size: 1.35rem;
	color: var(--wp--preset--color--brown);
	background: radial-gradient(circle at 30% 25%, #ffd66b, var(--wp--preset--color--gold) 60%);
	box-shadow: 0 0 0 6px rgba(var(--cr-gold-rgb), 0.15), 0 14px 26px -12px rgba(var(--cr-gold-rgb), 0.9);
}

@media (min-width: 782px) {
	/* A dashed gold line joins the three step numbers. */
	.cr-steps::before {
		content: "";
		position: absolute;
		top: calc(var(--wp--preset--spacing--40) + 1.75rem);
		left: 16%;
		right: 16%;
		border-top: 2px dashed rgba(var(--cr-gold-rgb), 0.45);
	}

	.cr-steps > .wp-block-column {
		position: relative;
	}
}

/* ---- Pricing ------------------------------------------------------------- */

.cr-price {
	font-family: var(--wp--preset--font-family--display);
	line-height: 1;
}

.cr-price .cr-per {
	font-family: var(--wp--preset--font-family--body);
	font-size: 1rem;
	font-weight: 400;
	opacity: 0.7;
}

.cr-featured {
	background: linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--forest-deep)) !important;
	color: var(--wp--preset--color--cream);
	border-color: rgba(var(--cr-gold-rgb), 0.7) !important;
	box-shadow: var(--cr-shadow-lg), 0 0 0 1px rgba(var(--cr-gold-rgb), 0.35);
}

.cr-featured h3,
.cr-featured .cr-price {
	color: var(--wp--preset--color--gold);
}

.cr-featured::after {
	content: "Most popular";
	position: absolute;
	top: 1.4rem;
	right: -2.6rem;
	padding: 0.3rem 3rem;
	transform: rotate(35deg);
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brown);
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.4);
}

.cr-ticks {
	list-style: none;
	padding-left: 0 !important;
}

.cr-ticks li {
	position: relative;
	padding-left: 1.9rem;
	margin-block: 0.55rem;
}

.cr-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.3rem;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	background: rgba(var(--cr-gold-rgb), 0.2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23305030' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5L20 7'/%3E%3C/svg%3E") center / 0.7rem no-repeat;
}

.cr-featured .cr-ticks li::before {
	background-color: rgba(var(--cr-gold-rgb), 0.9);
}

/* ---- Free audit form ----------------------------------------------------- */

.cr-form-shell {
	box-shadow: var(--cr-shadow-lg);
	border: 1px solid rgba(var(--cr-gold-rgb), 0.3);
}

.cr-tally iframe {
	width: 100%;
	border: 0;
}

/* ---- FAQ ----------------------------------------------------------------- */

.wp-block-details summary {
	cursor: pointer;
	font-weight: 600;
	list-style: none;
	position: relative;
	padding-right: 2rem;
}

.wp-block-details summary::-webkit-details-marker {
	display: none;
}

.wp-block-details summary::after {
	content: "+";
	position: absolute;
	right: 0.25rem;
	top: -0.1rem;
	font-size: 1.4rem;
	font-weight: 400;
	color: var(--wp--preset--color--moss);
	transition: transform 0.3s var(--cr-ease);
}

.wp-block-details[open] summary::after {
	transform: rotate(45deg);
}

/* ---- Footer -------------------------------------------------------------- */

.cr-footer {
	position: relative;
	background:
		radial-gradient(90% 60% at 10% 0%, rgba(var(--cr-gold-rgb), 0.07), transparent 60%),
		var(--wp--preset--color--forest-deep) !important;
}

.cr-footer::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	height: 1px;
	background: linear-gradient(90deg, transparent, var(--wp--preset--color--gold), transparent);
}

.cr-footer ul {
	list-style: none;
}

.cr-footer a {
	text-decoration: none;
	transition: color 0.25s ease;
}

.cr-footer a:not(.wp-block-button__link):hover {
	color: var(--wp--preset--color--gold) !important;
}

/* Buttons keep their dark text on hover (it used to turn gold on gold). */
.cr-footer .wp-block-button__link:hover {
	color: var(--wp--preset--color--brown) !important;
}

/* Social icons: gold circles with the deep-forest logo; they lift on hover. */
.cr-footer .cr-social .wp-social-link {
	transition: transform 0.25s var(--cr-ease), background-color 0.25s ease;
}

.cr-footer .cr-social .wp-social-link:hover {
	transform: translateY(-2px);
	background-color: var(--wp--preset--color--cream) !important;
}

.cr-footer .cr-social .wp-social-link a:hover {
	color: var(--wp--preset--color--forest-deep) !important;
}

/* Room under the last line so the floating WhatsApp button never covers it. */
.cr-footer-bottom {
	gap: 0.5rem 2rem;
	padding-bottom: 4.5rem;
}

.cr-footer-bottom p {
	margin: 0;
}

.cr-legal-links a {
	color: inherit !important;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ---- Legal pages --------------------------------------------------------- */

.cr-legal h3 {
	margin-top: var(--wp--preset--spacing--40);
}

.cr-legal h3:first-child {
	margin-top: 0;
}

/* ---- WhatsApp ------------------------------------------------------------ */

.cr-whatsapp {
	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 60;
	display: flex;
	align-items: center;
	gap: 0;
	height: 3.75rem;
	min-width: 3.75rem;
	padding: 0 0.95rem;
	border-radius: 999px;
	background: #25d366;
	color: #fff;
	text-decoration: none;
	box-shadow: 0 14px 30px -10px rgba(18, 140, 70, 0.7), 0 4px 10px rgba(0, 0, 0, 0.15);
	transition: transform 0.35s var(--cr-ease), box-shadow 0.35s var(--cr-ease);
}

.cr-whatsapp::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55);
	animation: cr-ping 2.8s ease-out infinite;
}

.cr-whatsapp__label {
	max-width: 0;
	overflow: hidden;
	white-space: nowrap;
	font-weight: 600;
	font-size: 0.9375rem;
	transition: max-width 0.45s var(--cr-ease);
}

.cr-whatsapp:hover {
	color: #fff;
	transform: translateY(-3px);
	box-shadow: 0 20px 40px -12px rgba(18, 140, 70, 0.8), 0 4px 10px rgba(0, 0, 0, 0.15);
}

.cr-whatsapp:hover .cr-whatsapp__label,
.cr-whatsapp:focus-visible .cr-whatsapp__label {
	max-width: 9rem;
	padding: 0 0.25rem 0 0.6rem;
}

/* ---- Blog ---------------------------------------------------------------- */

.cr-post-card .wp-block-post-title a {
	color: var(--wp--preset--color--brown);
	text-decoration: none;
}

.cr-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--green);
}

/* ---- Motion -------------------------------------------------------------- */

@keyframes cr-rise {
	from { opacity: 0; transform: translateY(26px); }
	to { opacity: 1; transform: none; }
}

@keyframes cr-drift {
	from { transform: scale(1.14); }
	to { transform: scale(1); }
}

@keyframes cr-ping {
	0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); }
	70%, 100% { box-shadow: 0 0 0 18px rgba(37, 211, 102, 0); }
}

/* Scroll reveal (assets/theme.js adds the classes). */
.cr-js .cr-will-reveal {
	opacity: 0;
	transform: translateY(32px);
	transition:
		opacity 0.9s var(--cr-ease) var(--cr-delay, 0ms),
		transform 0.9s var(--cr-ease) var(--cr-delay, 0ms),
		box-shadow 0.5s var(--cr-ease),
		border-color 0.4s ease;
}

.cr-js .cr-will-reveal.is-revealed {
	opacity: 1;
	transform: none;
}

.cr-js .cr-card.cr-will-reveal.is-revealed:hover {
	transform: translateY(-8px);
	transition-delay: 0ms;
}

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

	.cr-js .cr-will-reveal {
		opacity: 1;
		transform: none;
	}
}

/* ---- 2.3.0: launch pricing, services menu, quote calculator, team -------- */

.cr-price .cr-was {
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.5em;
	font-weight: 500;
	opacity: 0.55;
	text-decoration-thickness: 2px;
	margin-right: 0.15em;
	vertical-align: middle;
}

.cr-price .cr-from {
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: 0.8rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.7;
	margin-bottom: 0.35rem;
}

.cr-price-note {
	font-size: 0.875rem;
	opacity: 0.8;
	margin-top: -0.25rem !important;
}

.cr-price-note .cr-was {
	opacity: 0.6;
}

.cr-launch {
	display: table;
	margin-inline: auto !important;
	padding: 0.45rem 1.1rem;
	border-radius: 999px;
	background: rgba(var(--cr-gold-rgb), 0.18);
	border: 1px solid rgba(var(--cr-gold-rgb), 0.55);
	color: var(--wp--preset--color--brown);
	font-size: 0.85rem;
	font-weight: 600;
	letter-spacing: 0.04em;
}

.cr-forest .cr-launch {
	color: var(--wp--preset--color--gold);
}

.cr-from-line {
	color: var(--wp--preset--color--green);
	font-size: 0.95rem;
}

/* Services dropdown in the header. */
.cr-header .wp-block-navigation__submenu-container {
	background: var(--wp--preset--color--forest-deep) !important;
	border: 1px solid rgba(var(--cr-gold-rgb), 0.25) !important;
	border-radius: 14px;
	padding: 0.5rem !important;
	min-width: 250px !important;
	box-shadow: var(--cr-shadow-lg);
}

.cr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.55rem 0.85rem !important;
	border-radius: 10px;
}

.cr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: rgba(var(--cr-gold-rgb), 0.12);
}

.cr-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after {
	display: none;
}

.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	border: 0 !important;
	box-shadow: none;
	padding: 0.25rem 0 0 1rem !important;
	background: transparent !important;
}

/* Quote calculator (Pricing page). */
.cr-calc {
	display: grid;
	gap: 1.5rem;
	color: var(--wp--preset--color--brown);
}

.cr-calc__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 1rem 1.25rem;
}

.cr-calc__field {
	display: grid;
	gap: 0.4rem;
	font-weight: 600;
	font-size: 0.9rem;
}

.cr-calc select {
	width: 100%;
	padding: 0.8rem 0.9rem;
	border-radius: 12px;
	border: 1px solid rgba(var(--cr-deep-rgb), 0.2);
	background: #fff;
	font: inherit;
	font-weight: 400;
	color: var(--wp--preset--color--forest-deep);
}

.cr-calc select:focus {
	outline: 2px solid var(--wp--preset--color--gold);
	outline-offset: 1px;
}

.cr-calc__addons {
	display: grid;
	gap: 0.5rem;
	border: 1px solid rgba(var(--cr-deep-rgb), 0.12);
	border-radius: 14px;
	padding: 1rem 1.25rem;
	margin: 0;
}

.cr-calc__addons legend {
	font-weight: 600;
	font-size: 0.9rem;
	padding: 0 0.4rem;
}

.cr-calc__addons label {
	display: flex;
	gap: 0.6rem;
	align-items: baseline;
	font-size: 0.95rem;
}

.cr-calc__addons em {
	font-style: normal;
	font-weight: 600;
	color: var(--wp--preset--color--green);
	margin-left: auto;
	white-space: nowrap;
}

.cr-calc__result {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
	gap: 1rem;
	padding: 1.25rem;
	border-radius: 16px;
	background: linear-gradient(160deg, var(--wp--preset--color--green), var(--wp--preset--color--forest-deep));
	color: var(--wp--preset--color--cream);
}

.cr-calc__result span {
	display: block;
	font-size: 0.75rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	opacity: 0.75;
}

.cr-calc__result strong {
	display: block;
	margin-top: 0.3rem;
	font-family: var(--wp--preset--font-family--display);
	font-size: 1.35rem;
	color: var(--wp--preset--color--gold);
}

.cr-calc__note {
	margin: 0;
	font-size: 0.85rem;
	opacity: 0.75;
}

.cr-calc__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.cr-calc__btn {
	display: inline-block;
	padding: 0.85rem 1.4rem;
	border-radius: 14px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--brown) !important;
	font-weight: 600;
	text-decoration: none;
	box-shadow: 0 10px 24px -10px rgba(var(--cr-gold-rgb), 0.75);
	transition: transform 0.3s var(--cr-ease);
}

.cr-calc__btn:hover {
	transform: translateY(-2px);
}

.cr-calc__btn--ghost {
	background: transparent;
	border: 2px solid var(--wp--preset--color--green);
	color: var(--wp--preset--color--green) !important;
	box-shadow: none;
}

/* Team (About page). */
.cr-team-card {
	text-align: center;
}

.cr-team-photo {
	margin: 0 auto 1.25rem !important;
	max-width: 220px;
}

.cr-team-photo img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: 50%;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px rgba(var(--cr-gold-rgb), 0.7), var(--cr-shadow-md);
	transition: transform 0.6s var(--cr-ease);
}

.cr-team-card:hover .cr-team-photo img {
	transform: scale(1.04);
}

.cr-team-tag {
	display: table;
	margin: 0 auto 0.5rem !important;
	padding: 0.2rem 0.75rem;
	border-radius: 999px;
	background: rgba(var(--cr-forest-rgb), 0.1);
	color: var(--wp--preset--color--green);
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.cr-team-card h3 {
	margin-bottom: 0 !important;
	line-height: 1.25;
}

.cr-team-role {
	color: var(--wp--preset--color--green);
	font-weight: 600;
	font-size: 0.95rem;
	line-height: 1.4;
	margin-top: 0.35rem !important;
}

/* Outline buttons on light backgrounds: forest green, not gold (gold on
   white or sand was too faint to read). Dark sections keep gold. */
.cr-section:not(.cr-forest) .is-style-outline > .wp-block-button__link,
.cr-card:not(.cr-featured) .is-style-outline > .wp-block-button__link {
	color: var(--wp--preset--color--green);
	border-color: var(--wp--preset--color--green);
}

.cr-section:not(.cr-forest) .is-style-outline > .wp-block-button__link:hover,
.cr-card:not(.cr-featured) .is-style-outline > .wp-block-button__link:hover {
	color: var(--wp--preset--color--forest-deep);
	background: rgba(var(--cr-forest-rgb), 0.08);
	box-shadow: 0 0 0 4px rgba(var(--cr-forest-rgb), 0.1);
}

/* Phone menu: above the WhatsApp button (the header's stacking level was
   lower), left-aligned, with the Services links smaller underneath. */
.wp-site-blocks > header.wp-block-template-part:has(.is-menu-open) {
	z-index: 100001;
}

body:has(.wp-block-navigation__responsive-container.is-menu-open) .cr-whatsapp {
	display: none;
}

.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-submenu {
	align-items: flex-start !important;
}

.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container {
	gap: 0.35rem !important;
	padding-top: 0.6rem !important;
}

.cr-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	font-size: 1.05rem !important;
	font-family: var(--wp--preset--font-family--body);
	padding: 0.3rem 0 !important;
	opacity: 0.9;
}