/*
Theme Name: Groundcraft Theme
Theme URI: https://groundcraft.dev
Author: Groundcraft
Author URI: https://groundcraft.dev/wordpress
Description: The Forge-native FSE theme — the "Hello Elementor" analogue built for Groundcraft Forge. Blank and full-width canvas templates let a Forge document own the whole page, and the theme adds the forge_template assignment + render layer (header / footer / loop / single / archive) that Forge stubs but ships no UI for. Shares the 14-slug Groundcraft design-token contract (theme.json) with Groundcraft Base and the Forge builder, so brand re-tints every Forge page for free. Brand lives in styles/ variations (managed) or the child theme (bespoke).
Requires at least: 6.5
Tested up to: 6.9
Requires PHP: 8.0
Version: 0.14.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: groundcraft-theme
Tags: full-site-editing, block-patterns, blog, business, portfolio, one-column, wide-blocks, accessibility-ready
*/

/* ============================================================
   GROUNDCRAFT THEME — global front-end chrome
   ------------------------------------------------------------
   theme.json owns the design tokens (colours, type scale,
   spacing, element styles). Forge owns page content CSS
   (compiled per page). This stylesheet dresses the theme's own
   default header / footer / landing chrome — the production
   shell for the Groundcraft lead-gen network, and a graceful
   fallback for any site with no Forge templates assigned.
   Contact / brand / "Powered by" are opt-in (see functions.php),
   so a client site running the default chrome is unaffected.
   ============================================================ */

:root {
	--gct-shadow-sm: 0 1px 2px rgba(21, 32, 26, .06), 0 2px 8px rgba(21, 32, 26, .06);
	--gct-shadow-md: 0 8px 24px rgba(21, 32, 26, .10), 0 2px 6px rgba(21, 32, 26, .06);
	--gct-shadow-brand: 0 8px 20px rgba(79, 122, 31, .26);
	--gct-deep: #373737;
	--gct-wa: #25d366;
	--gct-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7a1f' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5 10 18 20 6'/%3E%3C/svg%3E");
	--gct-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234f7a1f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 6l6 6-6 6'/%3E%3C/svg%3E");
}

.gct-shell {
	max-width: var( --wp--style--global--content-size, 1200px );
	margin-inline: auto;
	padding-inline: var( --wp--custom--content-padding, clamp( 1rem, 4vw, 2.5rem ) );
}

.gct-ic { flex: none; display: inline-block; vertical-align: middle; }

/* ---- Buttons -------------------------------------------------------------- */
.gct-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	padding: .9rem 1.6rem;
	border-radius: 999px;
	font-family: var( --wp--preset--font-family--label );
	font-size: .8rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	line-height: 1;
	text-decoration: none;
	border: 1px solid transparent;
	cursor: pointer;
	white-space: nowrap;
	transition: transform .18s cubic-bezier(.16,.84,.44,1), background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.gct-btn:hover { transform: translateY(-1px); }
.gct-btn:active { transform: translateY(0); }
.gct-btn-brand {
	background: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand-ink );
	box-shadow: var( --gct-shadow-brand );
}
.gct-btn-brand:hover { background: var( --wp--preset--color--brand-strong ); color: var( --wp--preset--color--on-dark ); }
.gct-btn-ghost {
	background: transparent;
	color: var( --wp--preset--color--ink );
	border-color: var( --wp--preset--color--border-strong );
}
.gct-btn-ghost:hover { border-color: var( --wp--preset--color--brand-strong ); color: var( --wp--preset--color--brand-strong ); }
.gct-btn-light { background: var( --wp--preset--color--on-dark ); color: var( --wp--preset--color--ink ); box-shadow: var( --gct-shadow-md ); }
.gct-btn-light:hover { background: #fff; }
.gct-btn-wa { background: var( --gct-wa ); color: #04351a; }
.gct-btn-wa:hover { background: #1fbe5a; }

/* ---- Header --------------------------------------------------------------- */
.gct-header {
	position: sticky;
	top: 0;
	z-index: 50;
	border-bottom: 1px solid var( --wp--preset--color--border );
	background: color-mix( in srgb, var( --wp--preset--color--surface ) 88%, transparent );
	backdrop-filter: saturate(1.2) blur(10px);
	-webkit-backdrop-filter: saturate(1.2) blur(10px);
}
.gct-header .gct-shell {
	display: flex;
	align-items: center;
	gap: 1.5rem;
	padding-block: .85rem;
}
.gct-brand {
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	font-family: var( --wp--preset--font-family--display );
	font-weight: 800;
	font-size: var( --wp--preset--font-size--xl );
	color: var( --wp--preset--color--ink );
	text-decoration: none;
	letter-spacing: -0.03em;
	line-height: 1;
	margin-right: auto;
}
.gct-brand .gct-mark { width: 30px; height: 30px; }
.gct-brand img.custom-logo { max-height: 44px; width: auto; }

.gct-nav-wrap { display: flex; }
.gct-nav {
	display: flex;
	gap: 1.75rem;
	list-style: none;
	margin: 0;
	padding: 0;
}
.gct-nav a {
	color: var( --wp--preset--color--ink-2 );
	text-decoration: none;
	font-family: var( --wp--preset--font-family--label );
	font-weight: 700;
	font-size: .78rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	position: relative;
	padding-block: .35rem;
	white-space: nowrap;
	transition: color .16s ease;
}
.gct-nav a:hover,
.gct-nav a[aria-current="page"] { color: var( --wp--preset--color--brand-strong ); }
.gct-nav a[aria-current="page"]::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -2px;
	height: 2px;
	background: var( --wp--preset--color--brand );
	border-radius: 2px;
}

.gct-actions { display: flex; align-items: center; gap: 1rem; }
.gct-headphone {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: var( --wp--preset--color--ink );
	text-decoration: none;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--sm );
	white-space: nowrap;
}
.gct-headphone .gct-ic { color: var( --wp--preset--color--brand-strong ); }
.gct-headphone:hover { color: var( --wp--preset--color--brand-strong ); }
.gct-headcta { padding: .65rem 1.2rem; }

/* Burger — hidden until the header collapses. */
.gct-burger {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px;
	height: 44px;
	padding: 0 10px;
	background: transparent;
	border: 1px solid var( --wp--preset--color--border-strong );
	border-radius: 12px;
	cursor: pointer;
}
.gct-burger span {
	display: block;
	height: 2px;
	width: 100%;
	background: var( --wp--preset--color--ink );
	border-radius: 2px;
}

/* ---- Mobile drawer -------------------------------------------------------- */
.gct-drawer {
	position: fixed;
	inset: 0;
	z-index: 100;
	background: rgba(21, 32, 26, .46);
	opacity: 0;
	transition: opacity .28s ease;
	display: flex;
	justify-content: flex-end;
}
/* The class selector's `display:flex` outranks the UA `[hidden]{display:none}`
   (equal specificity, author wins), so without this the invisible overlay covers
   the page and eats every click. Restore hidden = truly gone. */
.gct-drawer[hidden] { display: none; }
.gct-drawer.is-open { opacity: 1; }
.gct-drawer-panel {
	width: min(86vw, 360px);
	height: 100%;
	background: var( --wp--preset--color--surface );
	box-shadow: -12px 0 40px rgba(21, 32, 26, .22);
	padding: 5rem 1.75rem 2rem;
	transform: translateX(100%);
	transition: transform .3s cubic-bezier(.16,.84,.44,1);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}
.gct-drawer.is-open .gct-drawer-panel { transform: translateX(0); }
.gct-drawer-close {
	position: absolute;
	top: 1rem; right: 1.1rem;
	width: 44px; height: 44px;
	font-size: 1.9rem;
	line-height: 1;
	background: transparent;
	border: 0;
	color: var( --wp--preset--color--ink-2 );
	cursor: pointer;
}
.gct-drawer .gct-nav { flex-direction: column; gap: .25rem; }
.gct-drawer .gct-nav a { font-size: var( --wp--preset--font-size--lg ); padding-block: .7rem; border-bottom: 1px solid var( --wp--preset--color--border ); }
.gct-drawer-actions { display: flex; flex-direction: column; gap: .75rem; margin-top: auto; }
.gct-drawer-actions .gct-headphone { justify-content: center; padding: .85rem; border: 1px solid var( --wp--preset--color--border-strong ); border-radius: 999px; }
.gct-drawer-actions .gct-headcta { justify-content: center; }

/* ---- Hero (home) ---------------------------------------------------------- */
.gct-hero {
	position: relative;
	overflow: clip;
	background: var( --wp--preset--color--canvas );
	border-bottom: 1px solid var( --wp--preset--color--border );
}
.gct-hero::after {
	content: "";
	position: absolute;
	top: 50%; right: -8%;
	width: min(46rem, 60vw);
	aspect-ratio: 1;
	transform: translateY(-50%) rotate(8deg);
	background: url("assets/brand/gc-icon-green.svg") center / contain no-repeat;
	opacity: .07;
	pointer-events: none;
}
.gct-hero-inner {
	position: relative;
	z-index: 1;
	padding-block: clamp( 3.5rem, 7vw, 6.5rem );
	max-width: 58rem;
}
.gct-hero-title {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-size: clamp( 2.6rem, 1rem + 5.5vw, 5.25rem );
	line-height: .95;
	letter-spacing: -0.03em;
	color: var( --wp--preset--color--ink );
	margin: 0 0 1.5rem;
	text-wrap: balance;
}
.gct-hero-title .gct-accent { color: var( --wp--preset--color--brand-strong ); }
.gct-hero-sub {
	font-size: var( --wp--preset--font-size--xl );
	line-height: 1.55;
	color: var( --wp--preset--color--ink-2 );
	max-width: 40ch;
	margin: 0 0 2rem;
}
.gct-hero-cta { display: flex; flex-wrap: wrap; gap: .85rem; margin-bottom: 2rem; }
.gct-trust {
	display: flex;
	flex-wrap: wrap;
	gap: .6rem 1.6rem;
	list-style: none;
	margin: 0;
	padding: 0;
	font-family: var( --wp--preset--font-family--label );
	font-size: .74rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var( --wp--preset--color--ink-2 );
}
.gct-trust li { display: inline-flex; align-items: center; gap: .5rem; }
.gct-trust li::before {
	content: "";
	width: 1.15rem; height: 1.15rem;
	flex: none;
	background: var( --gct-check ) center / contain no-repeat;
}

/* ---- Home sections -------------------------------------------------------- */
.gct-band { padding-block: clamp( 3rem, 6vw, 5rem ); }
.gct-band-tint { background: var( --wp--preset--color--surface-2 ); }
.gct-section-title {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-size: clamp( 1.9rem, 1rem + 2.4vw, 3rem );
	letter-spacing: -0.03em;
	line-height: 1;
	color: var( --wp--preset--color--ink );
	margin: 0 0 .6rem;
	text-wrap: balance;
}
.gct-section-lead {
	font-size: var( --wp--preset--font-size--lg );
	color: var( --wp--preset--color--ink-2 );
	max-width: 60ch;
	margin: 0 0 2.25rem;
}

/* What you get — a checked list, not icon-cards. */
.gct-checks {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat( auto-fit, minmax( 15rem, 1fr ) );
	gap: 1rem 2rem;
}
.gct-checks li {
	display: grid;
	grid-template-columns: 1.5rem 1fr;
	gap: .75rem;
	align-items: start;
	font-size: var( --wp--preset--font-size--lg );
	color: var( --wp--preset--color--ink );
	padding-block: .3rem;
}
.gct-checks li::before {
	content: "";
	width: 1.5rem; height: 1.5rem;
	margin-top: .1rem;
	background: var( --gct-check ) center / 1.15rem no-repeat, var( --wp--preset--color--brand-soft );
	border-radius: 999px;
}
.gct-checks li strong { display: block; font-weight: 700; font-size: var( --wp--preset--font-size--lg ); line-height: 1.3; }
.gct-checks li span { display: block; margin-top: .15rem; color: var( --wp--preset--color--ink-2 ); font-size: var( --wp--preset--font-size--base ); line-height: 1.5; }

/* Services — distinct editorial rows, not a same-card grid. */
.gct-services { display: grid; gap: 1px; background: var( --wp--preset--color--border ); border-block: 1px solid var( --wp--preset--color--border ); }
.gct-service {
	background: var( --wp--preset--color--surface );
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 1.5rem;
	padding: 1.75rem clamp(.5rem, 2vw, 1.5rem);
	transition: background-color .18s ease;
}
.gct-service:hover { background: var( --wp--preset--color--brand-soft ); }
.gct-service-body h3 {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.35rem, 1rem + 1vw, 1.7rem );
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 .35rem;
	color: var( --wp--preset--color--ink );
}
.gct-service-body h3 a { color: inherit; text-decoration: none; }
.gct-service:hover .gct-service-body h3 a { color: var( --wp--preset--color--brand-strong ); }
.gct-service-body p { margin: 0; color: var( --wp--preset--color--ink-2 ); max-width: 60ch; }
.gct-service-link {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	white-space: nowrap;
	font-family: var( --wp--preset--font-family--label );
	font-size: .78rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .05em;
	color: var( --wp--preset--color--brand-strong );
	text-decoration: none;
}
.gct-service-link::after {
	content: "";
	width: 1.1em; height: 1.1em;
	background: var( --gct-arrow ) center / contain no-repeat;
	transition: transform .18s ease;
}
.gct-service:hover .gct-service-link::after { transform: translateX(3px); }

/* Coverage — a dense town index (real local signal + internal links). */
.gct-coverage-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem .5rem;
}
.gct-coverage-list a {
	display: inline-block;
	padding: .4rem .85rem;
	border: 1px solid var( --wp--preset--color--border-strong );
	border-radius: 999px;
	background: var( --wp--preset--color--surface );
	color: var( --wp--preset--color--ink-2 );
	text-decoration: none;
	font-size: var( --wp--preset--font-size--sm );
	transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.gct-coverage-list a:hover {
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand-ink );
	background: var( --wp--preset--color--brand-soft );
}

/* ---- Conversion CTA band (home closer + inner pages) ---------------------- */
.gct-cta-band {
	background: var( --gct-deep );
	color: var( --wp--preset--color--on-dark );
	border-radius: 22px;
	padding: clamp( 2.25rem, 5vw, 3.5rem );
	margin-block: clamp( 2.5rem, 5vw, 4rem );
	position: relative;
	overflow: clip;
}
.gct-cta-band::after {
	content: "";
	position: absolute;
	right: -6%; bottom: -30%;
	width: 22rem; aspect-ratio: 1;
	background: url("assets/brand/gc-icon-green.svg") center / contain no-repeat;
	opacity: .12;
	pointer-events: none;
}
.gct-cta-inner { position: relative; z-index: 1; max-width: 46rem; }
.gct-cta-title {
	font-family: var( --wp--preset--font-family--display );
	font-size: clamp( 1.9rem, 1rem + 2.4vw, 3rem );
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0 0 .75rem;
	color: var( --wp--preset--color--on-dark );
}
.gct-cta-title strong { color: var( --wp--preset--color--brand ); }
.gct-cta-sub { color: #cfe0c4; font-size: var( --wp--preset--font-size--lg ); margin: 0 0 1.75rem; max-width: 48ch; }
.gct-cta-actions { display: flex; flex-wrap: wrap; gap: .85rem; }

/* Inner-page CTA is constrained with the prose; the home band spans full width. */
.wp-block-post-content .gct-cta-band { max-width: none; }

/* ---- Footer --------------------------------------------------------------- */
.gct-footer {
	background-color: #373737;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	color: #bcbcbc;
	margin-top: clamp( 3rem, 6vw, 5rem );
	border-top: 2px solid var( --wp--preset--color--brand );
}
.gct-footer--img { text-shadow: 0 1px 4px rgba(0, 0, 0, .5); }
.gct-footer--img .gct-foot-grid { padding-bottom: 3rem; }
.gct-foot-grid {
	display: grid;
	grid-template-columns: 1.5fr 1fr 1fr;
	gap: 2.5rem;
	padding-block: clamp( 2.5rem, 5vw, 4rem ) 2rem;
}
.gct-foot-name {
	font-family: var( --wp--preset--font-family--display );
	font-weight: 700;
	font-size: var( --wp--preset--font-size--xl );
	letter-spacing: -0.02em;
	color: var( --wp--preset--color--on-dark );
}
.gct-foot-tag { margin: .6rem 0 1.25rem; max-width: 34ch; line-height: 1.6; color: #a6a6a6; }
.gct-foot-contacts { display: flex; flex-wrap: wrap; gap: .75rem; }
.gct-foot-contact {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	padding: .55rem .95rem;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 999px;
	color: var( --wp--preset--color--on-dark );
	text-decoration: none;
	font-weight: 600;
	font-size: var( --wp--preset--font-size--sm );
	background: rgba(0, 0, 0, .2);
	backdrop-filter: blur(2px);
}
.gct-foot-contact .gct-ic { color: var( --wp--preset--color--brand ); }
.gct-foot-contact:hover { border-color: var( --wp--preset--color--brand ); background: rgba(155, 212, 95, .16); }
.gct-foot-h {
	font-family: var( --wp--preset--font-family--label );
	font-size: .72rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #969696;
	margin: 0 0 1rem;
}
.gct-foot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.gct-foot-col a { color: #cccccc; text-decoration: none; font-size: var( --wp--preset--font-size--base ); }
.gct-foot-col a:hover { color: var( --wp--preset--color--brand ); }
.gct-legal {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding-block: 1.5rem;
	border-top: 1px solid rgba(255, 255, 255, .12);
	font-size: var( --wp--preset--font-size--sm );
	color: #9a9a9a;
}
.gct-poweredby {
	display: inline-flex;
	align-items: center;
	gap: .45rem;
	color: #bcbcbc;
	text-decoration: none;
}
.gct-poweredby img { display: block; }
.gct-poweredby strong { color: var( --wp--preset--color--on-dark ); font-weight: 700; }
.gct-poweredby:hover strong { color: var( --wp--preset--color--brand ); }

/* ---- Inner-page prose (hubs + city landing pages) -------------------------
 *
 * Every selector here excludes the canvas templates, and it has to: a measure of
 * 44rem is right for a page of text and catastrophic for a full-bleed Forge
 * design. These rules score (0,3,1) — `.page`, the `.home` inside `:not()`, and
 * the target class — while the canvas contract in groundcraft_theme_canvas_css()
 * scores (0,2,1), so prose won on specificity no matter which stylesheet loaded
 * last, and around 28 live full-width pages collapsed into a centred column.
 * Excluding by hand rather than out-specifying, because two rules climbing over
 * each other is how this started.
 */
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) main.wp-block-group { padding-inline: var( --wp--custom--content-padding, clamp( 1rem, 4vw, 2.5rem ) ); }
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-content { max-width: 44rem; margin-inline: auto; }
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-title { max-width: 44rem; margin-inline: auto; }
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-content > h2 { margin-top: 2.25rem; }
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-content > h3 { margin-top: 1.75rem; }
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-content > p,
body.page:not(.home):not(.page-template-full-width):not(.page-template-blank):not(.gc-forge-canvas) .wp-block-post-content > ul { line-height: 1.75; }

/* ---- Accessibility + motion ---------------------------------------------- */
a:focus-visible, button:focus-visible, .gct-btn:focus-visible {
	outline: 3px solid var( --wp--preset--color--accent );
	outline-offset: 2px;
	border-radius: 6px;
}
@media (prefers-reduced-motion: reduce) {
	.gct-btn, .gct-service-link::after, .gct-drawer, .gct-drawer-panel { transition: none !important; }
}

/* ---- Responsive ----------------------------------------------------------- */
@media (max-width: 980px) {
	.gct-nav-wrap { display: none; }
	.gct-headphone, .gct-headcta { display: none; }
	.gct-burger { display: flex; }
	.gct-service { grid-template-columns: 1fr; gap: .75rem; align-items: start; }
	.gct-foot-grid { grid-template-columns: 1fr 1fr; }
	.gct-foot-brand { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
	.gct-foot-grid { grid-template-columns: 1fr; gap: 2rem; }
	.gct-legal { flex-direction: column; align-items: flex-start; }
	.gct-hero-cta .gct-btn { flex: 1 1 auto; }
}

/* --- Imagery + full-bleed hero + media bands (restored from 0.7.2 / 763b7eb) --- */
.gct-figure { margin: 0; border-radius: 16px; overflow: clip; background: var( --wp--preset--color--surface-2 ); }
.gct-figure img, .gct-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.gct-figure--wide { aspect-ratio: 16 / 9; }
.gct-figure--tall { aspect-ratio: 4 / 5; }
.gct-figure--square { aspect-ratio: 1; }

/* Social — drawn glyphs on the dark footer, brand-green on hover. Never tiles. */
.gct-social { display: flex; gap: .35rem; margin-top: 1.25rem; }
.gct-social-link {
	display: inline-flex; align-items: center; justify-content: center;
	width: 38px; height: 38px; border-radius: 999px;
	color: #cfcfcf; border: 1px solid rgba( 255, 255, 255, .16 );
	transition: color .16s ease, border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.gct-social-link:hover {
	color: var( --wp--preset--color--brand-ink );
	background: var( --wp--preset--color--brand );
	border-color: var( --wp--preset--color--brand );
	transform: translateY( -1px );
}

/* ---- Full-bleed hero: image + flat #373737 overlay, copy left + build CTA --- */
/* The photo fills the section; a FLAT #373737 overlay (solid rgba, no gradient)
   darkens it for legibility; copy sits on the overlay (left). v0.7.0: the quote
   form gave way to the "Build my site" CTA → the DFY product page on
   groundcraft.dev (the payment flow lives there); `.gct-hero-form` styles remain
   for client sites that still compose a hero form. */
.gct-hero--bleed { position: relative; background: var( --gct-deep ); border-bottom: none; overflow: clip; }
/* The bleed hero sits FLUSH under the sticky header — the layout flow's 24px
   blockGap strip between <main> and the header reads as a mistake above a
   full-bleed photo. Scoped with :has so ordinary light-canvas pages keep their
   rhythm. */
main:has( .gct-hero--bleed:first-child ) { margin-block-start: 0; }
.gct-hero--bleed::after { content: none; } /* drop the light-hero rosette watermark */
.gct-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; }
.gct-hero--bleed::before {
	content: "";
	position: absolute;
	inset: 0;
	background: rgba( 55, 55, 55, .82 ); /* flat #373737 overlay — not a gradient */
	z-index: 1;
}
.gct-hero--bleed .gct-shell { position: relative; z-index: 2; }
.gct-hero-inner {
	display: grid;
	grid-template-columns: 1.1fr .9fr;
	gap: clamp( 2rem, 4vw, 3.5rem );
	align-items: center;
	padding-block: clamp( 3rem, 6vw, 5rem );
}
.gct-hero-copy { color: var( --wp--preset--color--on-dark ); max-width: 34rem; }
.gct-hero--bleed .gct-hero-title {
	color: var( --wp--preset--color--on-dark );
	font-size: clamp( 1.9rem, 1rem + 2.4vw, 3rem ); /* reduced for the two-column hero */
	line-height: 1.05;
	margin-bottom: 1rem;
}
.gct-hero--bleed .gct-hero-title .gct-accent { color: var( --wp--preset--color--brand ); }
.gct-hero--bleed .gct-hero-title .gct-was { color: #c3d1b3; }
.gct-hero--bleed .gct-hero-sub { color: #dbe0d6; max-width: min( 42ch, 100% ); margin-bottom: 1.4rem; font-size: var( --wp--preset--font-size--lg ); }
.gct-hero--bleed .gct-trust { color: #cfd6c8; margin-bottom: 0; }
.gct-hero--bleed .gct-trust li::before { content: "✓"; color: var( --wp--preset--color--brand ); margin-right: .4rem; font-weight: 700; }
/* The quote-form card, light on the dark hero. */
.gct-hero-form {
	background: var( --wp--preset--color--surface );
	border-radius: 16px;
	padding: clamp( 1.5rem, 2.5vw, 2rem );
	box-shadow: var( --gct-shadow-md );
}
.gct-hero-form .gc-form__inner { max-width: none; }
.gct-hero-form .gc-form__title { font-size: 1.2rem; }
.gct-hero-form .gc-form__form { grid-template-columns: 1fr 1fr; gap: .75rem; }
.gct-hero-form .gc-form__field--message, .gct-hero-form .gc-form__actions { grid-column: 1 / -1; }
.gct-hero-form .gc-form__submit { width: 100%; justify-content: center; }
/* Capture-led hero (the network default since v0.14.0): copy left, the [gc_quote]
   card right. It replaces the solo/form-less hero because a single buy-now CTA
   only ever converted visitors who had already decided — everyone still weighing
   it left without telling us anything. The card owns its own surface and shadow
   (core prints them inline), so this only has to place it and let it breathe. */
.gct-hero-inner--split { align-items: center; }
.gct-hero-inner--split .gct-hero-copy { max-width: 36rem; }
.gct-hero-aside { display: flex; justify-content: flex-end; min-width: 0; }
.gct-hero-aside .gc-quote { max-width: 27rem; }
/* The direct-buy path survives beside the capture, deliberately quieter: the ghost
   button reads on the dark hero without competing with the form. */
.gct-hero--bleed .gct-hero-inner--split .gct-hero-cta { margin: 1.25rem 0 0; }
.gct-hero--bleed .gct-hero-inner--split .gct-btn-ghost {
	border-color: rgba( 247, 255, 253, .45 );
	color: var( --wp--preset--color--on-dark );
}
.gct-hero--bleed .gct-hero-inner--split .gct-btn-ghost:hover {
	border-color: var( --wp--preset--color--brand );
	color: var( --wp--preset--color--brand );
}
@media (max-width: 860px) {
	/* Copy first, then the card — on a phone the headline has to land before the
	   form, or the page opens on an unexplained set of questions. */
	.gct-hero-aside { justify-content: stretch; }
	.gct-hero-aside .gc-quote { max-width: none; width: 100%; }
}

/* Form-less hero (the network default from v0.7.0 to v0.13.0): one column, roomier
   copy, a bigger display headline, and the brand CTA leading under the sub. Kept
   for client sites that still compose a solo hero. */
.gct-hero-inner--solo { grid-template-columns: 1fr; }
.gct-hero-inner--solo .gct-hero-copy { max-width: 44rem; }
.gct-hero--bleed .gct-hero-inner--solo .gct-hero-title { font-size: clamp( 2.1rem, 1.1rem + 2.8vw, 3.4rem ); }
.gct-hero--bleed .gct-hero-cta { margin: 1.7rem 0 1.5rem; }
.gct-hero--bleed .gct-hero-cta .gct-btn-brand { padding: 1.05rem 2rem; font-size: .85rem; }
@media (max-width: 860px) {
	.gct-hero-inner { grid-template-columns: 1fr; gap: 1.75rem; }
	.gct-hero-copy { max-width: none; }
}
@media (max-width: 620px) {
	.gct-hero-form .gc-form__form { grid-template-columns: 1fr; }
}

/* ---- Image-led content bands ---------------------------------------------- */
/* A band that alternates a big image with copy. Reuses .gct-band spacing. */
.gct-band--media .gct-shell { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp( 1.5rem, 4vw, 3.5rem ); align-items: center; }
.gct-band--media.gct-band--flip .gct-media { order: 2; }
.gct-band--media .gct-figure { aspect-ratio: 4 / 3; }
.gct-band--media .gct-band-copy > :first-child { margin-top: 0; }
@media (max-width: 820px) {
	.gct-band--media .gct-shell { grid-template-columns: 1fr; }
	.gct-band--media.gct-band--flip .gct-media { order: 0; }
}

/* Full-width in-content figure (city pages, home) */
.gct-content-figure, .wp-block-post-content .gct-figure { margin-block: clamp( 1.5rem, 4vw, 2.5rem ); aspect-ratio: 16 / 9; }

/* ---- News archive (index.html card grid) ---------------------------------- */

/* --- Full-width header: nav + CTA use the whole bar, not the 1200px content cap --- */
.gct-header .gct-shell { max-width: none; padding-inline: clamp( 1rem, 3vw, 2.5rem ); }
.gct-nav { flex-wrap: wrap; }

/* ==== GC-BUNDLES-CSS:START (generated — scripts/offer/build-bundles.ts) ==== */
/* ===== gcb — bundle pricing table (generated from src/lib/offer/pricing-table.ts) ===== */
.gcb{padding:clamp(48px,7vw,88px) 0}
/* The DOCUMENT is the scrolling element, so smooth anchor scrolling has to be set
   there — but only on pages that actually carry this section, hence :has(). Setting
   it bare on html would change scroll behaviour across every host page. */
html:has(.gcb){scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html:has(.gcb){scroll-behavior:auto}}
.gcb *{box-sizing:border-box}
.gcb .gcb-shell{max-width:1180px;margin-inline:auto;padding-inline:clamp(20px,5vw,40px)}
.gcb .gcb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.gcb .gcb-ic{width:18px;height:18px;flex:none;display:block}
.gcb .gcb-head{max-width:660px;margin-bottom:clamp(28px,4vw,48px)}
.gcb .gcb-h{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(29px,3.4vw,42px);
  letter-spacing:-.028em;line-height:1.06;color:var(--ink,#1a1d18);margin:0}
.gcb .gcb-lede{font-size:clamp(16px,1.5vw,18px);color:var(--ink-2,#4a4f46);margin:14px 0 0}

/* ---- lead (hero) tier ----
   The entry plan stands alone, full width: most buyers want exactly this and
   should not have to compare three cards to reach it. */
.gcb .gcb-lead{margin-bottom:clamp(20px,3vw,28px)}
.gcb .gcb-card--hero{padding:clamp(26px,3vw,36px)}
.gcb .gcb-card--hero .gcb-cardhead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 22px;
  padding-bottom:18px;margin-bottom:18px;border-bottom:1px solid var(--border,#e3e6de)}
.gcb .gcb-card--hero .gcb-name{font-size:30px}
.gcb .gcb-card--hero .gcb-tagline{flex:1 1 auto;margin:0}
.gcb .gcb-card--hero .gcb-price{margin:0}
.gcb .gcb-card--hero .gcb-price strong{font-size:56px}
.gcb .gcb-card--hero .gcb-terms{flex-basis:100%;margin:0}
.gcb .gcb-card--hero .gcb-blurb{max-width:62ch}
/* Two columns of features so the taller FREE-itemised list does not run long. */
.gcb .gcb-card--hero .gcb-feats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px clamp(20px,3vw,40px)}
.gcb .gcb-card--hero .gcb-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;padding-top:24px}
.gcb .gcb-card--hero .gcb-btn{width:auto;flex:0 0 auto;padding-inline:34px}
.gcb .gcb-card--hero .gcb-save{flex:1 1 260px;margin:0}
.gcb .gcb-card--hero .gcb-for{flex-basis:100%;margin:0}
/* FREE lines carry the emphasis — the value stack is the argument. */
.gcb .gcb-feats li.gcb-free span{font-weight:600}

/* ---- signpost to the store tiers ----
   Deliberately NOT scoped under .gcb: the same signpost also renders in the DFY
   hero, which lives outside this section. The gcb- prefix already namespaces it. */
.gcb-signpost{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin-bottom:clamp(28px,4vw,44px)}
.gcb-more{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-label,inherit);
  font-weight:700;font-size:15px;padding:13px 24px;border-radius:var(--r-pill,999px);
  border:1.5px solid var(--border-strong,#c9cec2);background:transparent;color:var(--ink,#1a1d18);
  text-decoration:none;cursor:pointer;transition:border-color .14s ease,background .14s ease}
.gcb-more:hover{border-color:var(--ink,#1a1d18);background:var(--surface-2,#f5f7f1)}
.gcb-more .gcb-ic{width:18px;height:18px;flex:none;display:block}
.gcb-signhint{font-size:13.5px;color:var(--muted,#777d72);margin:0}
/* In the hero the signpost sits under the price note, so it needs its own rhythm. */
.gcs .gcb-signpost{margin:18px 0 0}

/* ---- store tiers ---- */
/* scroll-margin keeps the heading clear of a sticky header when the anchor lands. */
.gcb .gcb-store{scroll-margin-top:88px}
.gcb .gcb-storeh{font-family:var(--font-display,inherit);font-weight:700;font-size:clamp(20px,2.2vw,26px);
  letter-spacing:-.02em;color:var(--ink,#1a1d18);margin:0 0 16px}

/* ---- cards ---- */
.gcb .gcb-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px);align-items:start}
/* MUST come after .gcb-cards: same specificity, so source order decides. Declared
   above it, the 3-column base rule wins and the store tiers render at 1/3 width. */
.gcb .gcb-cards--store{grid-template-columns:repeat(2,minmax(0,1fr))}
.gcb .gcb-card{position:relative;display:flex;flex-direction:column;height:100%;background:var(--surface,#fff);
  border:1px solid var(--border,#e3e6de);border-radius:var(--r-lg,18px);padding:26px 24px 24px}
.gcb .gcb-card--pop{border-color:var(--brand,#9bd45f);box-shadow:0 0 0 3px rgba(155,212,95,.18)}
.gcb .gcb-badge{position:absolute;top:-11px;left:24px;background:var(--brand,#9bd45f);color:var(--brand-ink,#1a1d18);
  font-family:var(--font-label,inherit);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;
  padding:4px 10px;border-radius:var(--r-pill,999px)}
.gcb .gcb-name{font-family:var(--font-display,inherit);font-weight:700;font-size:24px;letter-spacing:-.02em;
  color:var(--ink,#1a1d18);margin:0}
.gcb .gcb-tagline{font-size:14.5px;color:var(--muted,#777d72);margin:5px 0 0}
.gcb .gcb-price{display:flex;align-items:baseline;gap:10px;margin:18px 0 0}
.gcb .gcb-price s{color:var(--muted,#777d72);font-size:17px}
.gcb .gcb-price strong{font-family:var(--font-display,inherit);font-weight:700;font-size:46px;line-height:1;
  color:var(--ink,#1a1d18);letter-spacing:-.03em}
.gcb .gcb-terms{font-size:13px;color:var(--muted,#777d72);margin:6px 0 0}
.gcb .gcb-blurb{font-size:14.5px;color:var(--ink-2,#4a4f46);margin:16px 0 0}
.gcb .gcb-feats{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.gcb .gcb-feats li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--ink,#1a1d18);line-height:1.45}
.gcb .gcb-feats .gcb-ic{color:var(--brand-strong,#5f9c22);margin-top:2px}
.gcb .gcb-foot{margin-top:auto;padding-top:22px}
.gcb .gcb-btn{display:flex;width:100%;align-items:center;justify-content:center;font-family:var(--font-label,inherit);
  font-weight:700;font-size:15px;padding:14px 22px;border-radius:var(--r-pill,999px);border:1.5px solid var(--border-strong,#c9cec2);
  background:transparent;color:var(--ink,#1a1d18);cursor:pointer;text-decoration:none;
  transition:background .14s ease,border-color .14s ease,color .14s ease}
.gcb .gcb-btn:hover{border-color:var(--ink,#1a1d18);background:var(--surface-2,#f5f7f1)}
.gcb .gcb-btn--pop{background:var(--brand,#9bd45f);border-color:var(--brand,#9bd45f);color:var(--brand-ink,#1a1d18)}
.gcb .gcb-btn--pop:hover{background:#a9dc76;border-color:#a9dc76;color:var(--brand-ink,#1a1d18)}
/* the tier the wizard currently carries — set by signup.js on the apex */
.gcb .gcb-btn--chosen{border-color:var(--brand-strong,#5f9c22);box-shadow:0 0 0 3px rgba(155,212,95,.22)}
.gcb .gcb-save{font-size:13px;color:var(--ink-2,#4a4f46);margin:14px 0 0;font-weight:600}
.gcb .gcb-for{font-size:12.5px;color:var(--muted,#777d72);margin:5px 0 0}

/* ---- comparison matrix ---- */
/* The matrix is wider than a phone. It scrolls INSIDE this wrapper — max-width
   pins the wrapper to its container so the wide table can never push the page
   itself sideways, whatever host page the section is dropped into. */
.gcb .gcb-tablewrap{margin-top:clamp(36px,5vw,64px);max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.gcb .gcb-table{width:100%;min-width:640px;border-collapse:collapse;font-size:14.5px}
.gcb .gcb-table th,.gcb .gcb-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--border,#e3e6de)}
.gcb .gcb-table thead th{vertical-align:bottom;font-family:var(--font-display,inherit);color:var(--ink,#1a1d18);
  border-bottom:1.5px solid var(--border-strong,#c9cec2)}
.gcb .gcb-table thead th:first-child{font-size:15px}
.gcb .gcb-table td,.gcb .gcb-table tbody th{text-align:center}
.gcb .gcb-table tbody th[scope=row]{text-align:left;font-weight:500;color:var(--ink-2,#4a4f46)}
.gcb .gcb-th-n{display:block;font-weight:700;font-size:16px;letter-spacing:-.01em}
.gcb .gcb-th-p{display:block;font-family:var(--font-body,inherit);font-weight:600;font-size:13.5px;color:var(--muted,#777d72);margin-top:2px}
.gcb .gcb-col-pop{color:var(--brand-strong,#5f9c22)}
.gcb .gcb-sec th{background:var(--surface-2,#f5f7f1);font-family:var(--font-label,inherit);font-weight:700;
  font-size:11.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#777d72);text-align:left}
.gcb .gcb-yes .gcb-ic{color:var(--brand-strong,#5f9c22);margin-inline:auto}
.gcb .gcb-no{color:var(--border-strong,#c9cec2)}

@media (max-width:900px){
  .gcb .gcb-cards{grid-template-columns:1fr;gap:22px}
  .gcb .gcb-cards--store{grid-template-columns:1fr}
  /* The lead tier already leads on mobile, so promoting "most popular" above it
     would fight the hierarchy — only reorder inside the store row. */
  .gcb .gcb-cards--store .gcb-card--pop{order:-1}
  .gcb .gcb-card--hero .gcb-feats{grid-template-columns:1fr}
  .gcb .gcb-card--hero .gcb-price strong{font-size:46px}
  .gcb .gcb-card--hero .gcb-btn{width:100%;flex:1 1 100%}
}
/* ==== GC-BUNDLES-CSS:END ==== */

/* ==== GC-NEWS-CSS:START ====
   The /news index. Before this, the theme had no `home.html`, so the blog index
   fell through to `index.html` — a bare wp:query emitting title + excerpt with no
   heading, no dates, no images and no brand. That is the "unbranded news stub"
   the 2026-08-11 audit found on every property. Tokens only, so each site
   inherits its own palette and type. */
.gc-newshero{margin-bottom:clamp(28px,4vw,44px)}
.gc-newshero__title{font-family:var(--font-display,inherit);letter-spacing:-.02em;
  font-size:clamp(30px,5vw,48px);line-height:1.08;margin:0 0 10px;color:var(--ink,#1a1d18)}
.gc-newshero__dek{max-width:62ch;color:var(--ink-2,#4a4f46);font-size:clamp(15.5px,1.6vw,18px);
  line-height:1.55;margin:0}

.gc-newslist__items{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:clamp(24px,3vw,36px);margin:0;padding:0;list-style:none}
.gc-newscard{display:flex;flex-direction:column;gap:9px;margin:0;
  padding-bottom:22px;border-bottom:1px solid var(--border,#e3e6de)}
.gc-newscard__img img{width:100%;height:auto;border-radius:10px;display:block;
  background:var(--surface-2,#f5f7f1)}
.gc-newscard__date{font-family:var(--font-label,inherit);font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:var(--muted,#777d72);margin:0}
.gc-newscard__title{font-family:var(--font-display,inherit);font-size:clamp(19px,2.2vw,23px);
  line-height:1.24;letter-spacing:-.012em;margin:0}
.gc-newscard__title a{color:var(--ink,#1a1d18);text-decoration:none}
.gc-newscard__title a:hover,.gc-newscard__title a:focus-visible{color:var(--brand-strong,#5f9c22);
  text-decoration:underline;text-underline-offset:3px}
.gc-newscard__dek{color:var(--ink-2,#4a4f46);font-size:15px;line-height:1.55;margin:0}
.gc-newscard__dek a{color:var(--brand-strong,#5f9c22);font-weight:600;text-decoration:none}
.gc-newscard__dek a:hover{text-decoration:underline}

.gc-newslist__pagination{margin-top:clamp(30px,4vw,46px);display:flex;gap:14px;
  align-items:center;flex-wrap:wrap;font-family:var(--font-label,inherit);font-size:14px}
.gc-newslist__pagination a{color:var(--brand-strong,#5f9c22);text-decoration:none}
.gc-newslist__pagination a:hover{text-decoration:underline}
.gc-newslist__pagination .page-numbers.current{font-weight:700;color:var(--ink,#1a1d18)}

@media (max-width:600px){
  .gc-newslist__items{grid-template-columns:1fr;gap:26px}
}
/* ==== GC-NEWS-CSS:END ==== */

/* ── Universal container (Blocksy model) ───────────────────────────────────
   Replaces the opt-OUT stack above. The previous rules read

     body.page:not(.home):not(.page-template-full-width):not(.page-template-blank)
     :not(.gc-forge-canvas) main.wp-block-group { padding-inline: … }

   — padding applied only to static pages that were none of four things, so
   blog, archive, single, search and 404 had no gutter and no measure at all.
   That is why the front page sat flush against the viewport edge while the
   header and footer looked correct.

   Blocksy applies the container to EVERY view and lets a page opt out. So does
   this. The variables come from inc/layout.php, which resolves global settings
   then per-page overrides, so one mechanism drives the Customizer, the metabox
   and the front end. */
.wp-site-blocks > main,
.wp-site-blocks > .gc-main {
	padding-inline: var(--gc-gutter, clamp(16px, 4vw, 40px));
}
.wp-site-blocks > main > :where(:not(.alignfull):not(.alignwide)),
.wp-site-blocks > .gc-main > :where(:not(.alignfull):not(.alignwide)) {
	max-width: var(--gc-content, 1200px);
	margin-inline: auto;
}
/* Opt OUT, explicitly — a page that manages its own layout says so. */
body.gc-content-wide .wp-site-blocks > main > :where(:not(.alignfull)) { max-width: var(--gc-container, 1400px); }
body.page-template-full-width .wp-site-blocks > main,
body.page-template-blank .wp-site-blocks > main { padding-inline: 0; }
body.page-template-full-width .wp-site-blocks > main > *,
body.page-template-blank .wp-site-blocks > main > * { max-width: none; }