/* ==========================================================================
   Themecut section styles — section backgrounds, grid layout, card variants.
   Uses TT25 color preset variables throughout so Phase 4 token overrides
   propagate automatically without touching this file.
   ========================================================================== */

/* --- Ripple effect --------------------------------------------------------- */

/* Buttons need a stacking context for the wave to be clipped */
.wp-block-button__link,
.tc-ripple {
	position: relative;
	overflow: hidden;
	-webkit-tap-highlight-color: transparent;
}

.tc-ripple-wave {
	position: absolute;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.28);
	transform: scale(0);
	pointer-events: none;
	animation: tc-ripple-expand 550ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes tc-ripple-expand {
	to {
		transform: scale(1);
		opacity: 0;
	}
}

/* Sustained glow while the button is held down */
.wp-block-button__link.tc-held,
.tc-ripple.tc-held {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.18);
	transition: box-shadow 80ms ease;
}

/* --- Scroll animations (tc-hidden / tc-visible) --------------------------- */

/* Initial hidden state — set by JS, so no FOUC if JS is disabled */
.tc-hidden {
	opacity: 0;
	transition:
		opacity  var(--tc-fade-dur, 600ms) ease,
		transform var(--tc-fade-dur, 600ms) ease;
}

.tc-hidden[data-tc-dir="up"]    { transform: translateY(28px); }
.tc-hidden[data-tc-dir="down"]  { transform: translateY(-28px); }
.tc-hidden[data-tc-dir="left"]  { transform: translateX(28px); }
.tc-hidden[data-tc-dir="right"] { transform: translateX(-28px); }

.tc-visible {
	opacity: 1 !important;
	transform: none !important;
}

/* --- Outline button section-aware colours ---------------------------------- */

/* On light sections (1, 2) outline buttons use the primary brand colour so
   they are always visible against the light background. */
.tc-section.is-style-section-1 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-2 .wp-block-button.is-style-outline .wp-block-button__link {
	color: var(--wp--preset--color--accent-1) !important;
	border-color: var(--wp--preset--color--accent-1) !important;
	background: transparent !important;
}
.tc-section.is-style-section-1 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-2 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent) !important;
}

/* On dark/brand sections (3, 4, 5) outline buttons always use white so they
   stay legible regardless of what the primary colour is. */
.tc-section.is-style-section-3 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-4 .wp-block-button.is-style-outline .wp-block-button__link,
.tc-section.is-style-section-5 .wp-block-button.is-style-outline .wp-block-button__link {
	color: #ffffff !important;
	border-color: rgba(255, 255, 255, 0.75) !important;
	background: transparent !important;
}
.tc-section.is-style-section-3 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-4 .wp-block-button.is-style-outline .wp-block-button__link:hover,
.tc-section.is-style-section-5 .wp-block-button.is-style-outline .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.12) !important;
}

/* --- Generated page layout ------------------------------------------------ */

/* Remove WP's default block-gap between full-width sections so they tile
   flush against each other. The 1.2rem blockGap in theme.json is intentional
   for blog content but wrong for landing-page section layouts. */
.wp-block-post-content > .alignfull.tc-section {
	margin-block-start: 0 !important;
}

/* WP's .is-layout-flow adds margin-block-start:1.2rem to every child except
   :first-child. In CSS grids this means column 2+ in row 1 get extra top margin,
   making the first row taller than necessary and cards misaligned.
   Zero it out on every Themecut grid/flex container's direct children. */
.tc-grid > *,
.tc-menu-grid > *,
.tc-icon-row-grid > *,
.tc-gallery-mosaic-grid > *,
.tc-bento-grid > *,
.tc-services-list > *,
.tc-review-cards > *,
.tc-portfolio-items > *,
.tc-pt-grid > *,
.tc-pt-steps-list > *,
.tc-footer-top > *,
.tc-footer-links-grid > * {
	margin-block-start: 0;
}

/* --- Section backgrounds -------------------------------------------------- */

.tc-section.is-style-section-1 {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.tc-section.is-style-section-2 {
	background-color: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
}
.tc-section.is-style-section-3 {
	background-color: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
}
.tc-section.is-style-section-4 {
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.tc-section.is-style-section-5 {
	background-color: #0a0a0a;
	color: #f8fafc; /* hardcoded: section-5 is always near-black regardless of base override */
}

/* Pull headings to base color on dark/accent backgrounds */
.tc-section.is-style-section-3 .wp-block-heading,
.tc-section.is-style-section-4 .wp-block-heading,
.tc-section.is-style-section-5 .wp-block-heading {
	color: inherit;
}

/* --- Grid layout ---------------------------------------------------------- */

/* tc-grid is the inner card container; column count comes from
   tc-cols-N on the outer section via descendant selector. */
.tc-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(1rem, 2.5vw, 2rem);
	width: 100%;
}

@media (min-width: 640px) {
	.tc-cols-2 .tc-grid { grid-template-columns: repeat(2, 1fr); }
	.tc-cols-3 .tc-grid { grid-template-columns: repeat(2, 1fr); }
	.tc-cols-4 .tc-grid { grid-template-columns: repeat(2, 1fr); }
	.tc-cols-6 .tc-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 900px) {
	.tc-cols-2 .tc-grid { grid-template-columns: repeat(2, 1fr); }
	.tc-cols-3 .tc-grid { grid-template-columns: repeat(3, 1fr); }
	.tc-cols-4 .tc-grid { grid-template-columns: repeat(4, 1fr); }
	.tc-cols-6 .tc-grid { grid-template-columns: repeat(6, 1fr); }
}

/* --- Card variants -------------------------------------------------------- */

.tc-card {
	padding: 1rem;
}

/* Team card: WP image block inside a card — remove default figure margin */
.tc-team-card .wp-block-image {
	margin: 0;
	width: 100%;
}
.tc-team-card .wp-block-image img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
}

.tc-card-boxed .tc-card {
	background-color: var(--wp--preset--color--accent-5); /* surface token — elevates above base in both light and dark schemes */
	border-radius: 10px;
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, .10), 0 1px 2px -1px rgba(0, 0, 0, .07);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.tc-card-bordered .tc-card {
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 10px;
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

/* Cards inside dark-background sections */
.tc-section.is-style-section-3 .tc-card-boxed .tc-card,
.tc-section.is-style-section-4 .tc-card-boxed .tc-card,
.tc-section.is-style-section-5 .tc-card-boxed .tc-card {
	background-color: rgba(255, 255, 255, .08);
	box-shadow: none;
}
.tc-section.is-style-section-3 .tc-card-bordered .tc-card,
.tc-section.is-style-section-4 .tc-card-bordered .tc-card,
.tc-section.is-style-section-5 .tc-card-bordered .tc-card {
	border-color: rgba(255, 255, 255, .15);
}

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

.tc-pricing-grid {
	align-items: stretch;
}

.tc-pricing-card {
	display: flex;
	flex-direction: column;
	border: 1px solid rgba(0,0,0,.1);
	border-top: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 12px;
	padding: 32px 28px;
	background: var(--wp--preset--color--accent-5);
	position: relative;
}

/* Badge pill — hidden when empty */
.tc-pricing-badge {
	display: inline-block !important;
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	background: var(--wp--preset--color--accent-1);
	color: var(--wp--preset--color--base);
	padding: 3px 12px;
	border-radius: 99px;
	margin-bottom: 16px;
	width: fit-content;
}

.tc-pricing-badge:empty { display: none !important; }

.tc-pricing-card .tc-price-period {
	color: var(--wp--preset--color--accent-4) !important;
	margin-left: 6px;
	font-size: .9rem;
	align-self: flex-end;
	padding-bottom: .4rem;
}

.tc-pricing-card .tc-card-desc {
	color: var(--wp--preset--color--accent-4) !important;
	font-size: .9rem;
}

.tc-pricing-divider {
	border-top: 1px solid rgba(0,0,0,.1) !important;
	border-bottom: none !important;
	opacity: .6;
	margin-top: 20px !important;
	margin-bottom: 20px !important;
}

/* Highlighted plan (highlight knob → tc-highlight-middle / tc-highlight-last) */
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2),
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child {
	background-color: var(--wp--preset--color--accent-1);
	color: #fff;
	border-color: transparent;
	border-top-color: var(--wp--preset--color--accent-2);
	box-shadow: 0 12px 48px rgba(0, 0, 0, .22);
	transform: scale(1.04);
	z-index: 1;
}

.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-price-period,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-price-period,
.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-card-desc,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-card-desc {
	color: rgba(255, 255, 255, .7) !important;
}

.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-pricing-badge,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-pricing-badge {
	background: rgba(255,255,255,.25);
	color: #fff;
}

.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-pricing-divider,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-pricing-divider {
	border-top-color: rgba(255,255,255,.3) !important;
	opacity: 1;
}

.tc-highlight-middle .tc-pricing-grid > .wp-block-group:nth-child(2) .tc-feature-list li::before,
.tc-highlight-last .tc-pricing-grid > .wp-block-group:last-child .tc-feature-list li::before {
	color: #fff;
}

/* --- Stats bar ------------------------------------------------------------ */

.tc-stats-row {
	flex-wrap: wrap;
	gap: clamp(1rem, 4vw, 3rem);
}

.tc-stat-number {
	line-height: 1;
}

/* --- Testimonial card ----------------------------------------------------- */

.tc-quote {
	font-style: italic;
	margin-bottom: 1.5rem !important;
}

.tc-author-name,
.tc-author-meta {
	margin-bottom: 0 !important;
}

.tc-author-meta {
	opacity: 0.65;
}

/* --- Trust badges --------------------------------------------------------- */

.tc-badges-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: clamp(0.75rem, 2vw, 1.5rem);
}

.tc-badge {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 20px 28px;
}

.tc-badge-icon {
	width: 48px;
	height: 48px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tc-badge-label {
	font-size: .875rem;
	font-weight: 600;
	text-align: center;
}

/* --- Logos row ------------------------------------------------------------ */

.tc-logos-list {
	flex-wrap: wrap;
	gap: clamp(1rem, 3vw, 3rem);
}

.tc-logo-img img {
	max-height: 48px;
	width: auto;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .55;
	transition: opacity .25s, filter .25s;
}

.tc-logo-img img:hover {
	filter: none;
	opacity: 1;
}

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

.tc-faq-list {
	width: 100%;
}

.tc-faq-item {
	border-bottom: 1px solid rgba(0, 0, 0, .10);
}

.tc-section.is-style-section-3 .tc-faq-item,
.tc-section.is-style-section-4 .tc-faq-item,
.tc-section.is-style-section-5 .tc-faq-item {
	border-bottom-color: rgba(255, 255, 255, .15);
}

.tc-faq-item > summary {
	font-weight: 600;
	cursor: pointer;
	padding: 1rem 2rem 1rem 0;
	position: relative;
	list-style: none;
}

.tc-faq-item > summary::-webkit-details-marker {
	display: none;
}

.tc-faq-item > summary::after {
	content: '+';
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.25rem;
	line-height: 1;
	transition: transform .2s;
}

.tc-faq-item[open] > summary::after {
	transform: translateY(-50%) rotate(45deg);
}

.tc-faq-item .wp-block-paragraph {
	padding: 0 0 1rem;
	margin: 0;
}

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

.tc-footer-top {
	gap: clamp(2rem, 5vw, 4rem);
}

.tc-footer-links-grid {
	flex-wrap: wrap;
	gap: clamp(1.5rem, 4vw, 3rem);
}

.tc-footer-link-list {
	list-style: none !important;
	padding: 0 !important;
	margin-top: .75rem !important;
	display: flex;
	flex-direction: column;
	gap: .5rem;
}

.tc-footer-link-list li {
	padding: 0 !important;
}

/* Global fallback footer — dark via is-style-section-5 on the outer group */
.tc-site-footer .wp-block-site-title a {
	text-decoration: none;
	color: inherit;
}

.tc-site-footer .wp-block-navigation a {
	font-size: .875rem;
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
}

.tc-site-footer .wp-block-navigation a:hover {
	color: #fff;
}

/* Footer bottom bar: thin rule + muted copyright line */
.tc-footer-bar {
	border-top: 1px solid rgba(255, 255, 255, .1);
	margin-top: 28px;
	padding-top: 20px;
}

.tc-footer-bar p {
	font-size: 0.8125rem;
	color: rgba(255, 255, 255, .35);
	margin: 0;
}

.tc-footer-bar a {
	color: rgba(255, 255, 255, .5);
	text-decoration: none;
}

.tc-footer-bar a:hover {
	color: rgba(255, 255, 255, .85);
}

/* Footer muted text — opacity-based so it works on any section background */
.tc-footer-tagline {
	opacity: 0.6;
}

.tc-footer-copyright {
	opacity: 0.5;
}

.tc-label-muted {
	opacity: 0.65;
}

.tc-welcome-footer h5.wp-block-heading {
	color: rgba(255, 255, 255, .35);
}

.tc-footer-plain-list {
	list-style: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

.tc-footer-plain-list li {
	padding: 5px 0 !important;
}

.tc-footer-plain-list a {
	font-size: 0.9rem;
	color: rgba(255, 255, 255, .55);
	text-decoration: none;
	transition: color 150ms;
}

.tc-footer-plain-list a:hover {
	color: #fff;
}

/* --- About / image layout knobs ------------------------------------------ */

/* image-right flips the two-column order */
.tc-image-right .tc-about-image-col { order: 2; }
.tc-image-right .tc-about-content-col { order: 1; }

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

.tc-step-number {
	opacity: .25;
	line-height: 1;
	margin-bottom: .5rem !important;
}

/* --- Feather icon in feature/service cards -------------------------------- */

.tc-icon {
	margin-bottom: .75rem !important;
	line-height: 1;
}

.tc-icon svg {
	width: 32px;
	height: 32px;
	stroke: var(--wp--preset--color--accent-3);
	stroke-width: 1.5;
	fill: none;
}

/* On dark/accent section backgrounds invert to white */
.tc-section.is-style-section-3 .tc-icon svg,
.tc-section.is-style-section-4 .tc-icon svg,
.tc-section.is-style-section-5 .tc-icon svg {
	stroke: var(--wp--preset--color--base);
}

/* --- Contact form --------------------------------------------------------- */

/* Card that wraps the form fields */
.tc-form-card {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid rgba(0,0,0,.08);
	border-radius: 20px;
	padding: clamp(28px, 5vw, 48px);
	box-shadow: 0 4px 40px rgba(0,0,0,.07);
}

.tc-contact-form label {
	display: block;
	font-size: .8125rem;
	font-weight: 700;
	letter-spacing: .03em;
	text-transform: uppercase;
	opacity: .7;
	margin-bottom: 7px;
}

.tc-contact-form input,
.tc-contact-form textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1.5px solid rgba(0,0,0,.14);
	border-radius: 10px;
	font-size: 1rem;
	font-family: inherit;
	box-sizing: border-box;
	background: var(--wp--preset--color--base);
	color: inherit;
	transition: border-color .15s, box-shadow .15s;
}

.tc-contact-form input:focus,
.tc-contact-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent-1);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--accent-1) 18%, transparent);
}

.tc-contact-form textarea {
	resize: vertical;
	min-height: 140px;
}

.tc-contact-form .tc-form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1rem;
	margin-bottom: 1rem;
}

@media (max-width: 540px) {
	.tc-contact-form .tc-form-row { grid-template-columns: 1fr; }
}

.tc-contact-form .tc-form-group {
	margin-bottom: 1rem;
}

/* Full-width submit button */
.tc-form-submit {
	width: 100%;
	display: block;
	text-align: center;
	margin-top: 8px;
	cursor: pointer;
	border: none;
}

/* Contact info — two-line layout (meta label + value) */
.tc-contact-info-item {
	align-items: flex-start !important;
}

.tc-contact-icon {
	margin-top: 2px;
}

.tc-contact-detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tc-contact-meta {
	font-size: .7rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	opacity: .5;
}

.tc-contact-value {
	font-weight: 500;
	font-size: .9375rem;
}

/* Contact info list — Feather icon + text rows */
.tc-contact-info {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 14px;
}

.tc-contact-info-item,
.tc-loc-detail {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: .9375rem;
	margin: 0 0 .5rem !important;
}

.tc-contact-icon {
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tc-contact-link,
.tc-loc-detail a {
	color: inherit;
	text-decoration: none;
}

.tc-contact-link:hover,
.tc-loc-detail a:hover {
	color: var(--wp--preset--color--accent-1);
}

.tc-loc-hours { opacity: .8; }

/* --- Transparent nav hero ------------------------------------------------- */

/*
 * When a page opens with a tc-transparent-nav cover block, the site header
 * floats over the hero image instead of sitting above it.
 *
 * Class applied to: the wp:cover block's outer div (via className in block attrs).
 * Selector strategy: body:has() detects when that element is the first child
 * of the post content area, then repositions the header template part.
 *
 * Works in all browsers that support :has() (Chrome 105+, Firefox 121+, Safari 15.4+).
 * On older browsers the header remains in normal flow — graceful degradation.
 */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
}

/* The inner .tc-header-bar div has its own background-color — must clear it too
   since CSS backgrounds don't inherit from parent to child. */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .tc-header-bar {
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, .1) !important;
}

/* Make nav links and site title white so they're legible over the image */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .wp-block-site-title,
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part .wp-block-navigation-item__content {
	color: #fff !important;
}

/* Compensate: the body needs top padding equal to header height so content
   below the hero is not hidden. TT25 header is typically 72–80px. */
body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) {
	padding-top: 0 !important;
}

/* When WP admin bar is visible (32px fixed at top), push floating header down
   so it doesn't sit behind the admin bar. */
.admin-bar body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar body:has(.wp-block-post-content > .wp-block-cover.tc-transparent-nav:first-child) header.wp-block-template-part {
		top: 46px; /* admin bar collapses to 46px on mobile */
	}
}


/* --- nav.variant: transparent — header overlays the first section ---------- */

/*
 * When the backend renderer uses nav.variant: "transparent", the header template
 * part gets the class tc-header-transparent on its inner .tc-header-bar div.
 * body:has() detects it and pulls the <header> out of normal flow so it overlays
 * the first page section. Same pattern as tc-transparent-nav and tc-css-hero.
 */
body:has(header .tc-header-transparent) header.wp-block-template-part {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	box-shadow: none !important;
}
body:has(header .tc-header-transparent) header.wp-block-template-part .tc-header-bar {
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, .1) !important;
}
body:has(header .tc-header-transparent) header.wp-block-template-part a,
body:has(header .tc-header-transparent) header.wp-block-template-part .wp-block-site-title,
body:has(header .tc-header-transparent) header.wp-block-template-part .wp-block-navigation-item__content {
	color: #fff !important;
}
body:has(header .tc-header-transparent) {
	padding-top: 0 !important;
}
.admin-bar body:has(header .tc-header-transparent) header.wp-block-template-part {
	top: 32px;
}
@media screen and (max-width: 782px) {
	.admin-bar body:has(header .tc-header-transparent) header.wp-block-template-part {
		top: 46px;
	}
}

/* --- nav.variant: centered — logo + nav stacked and centered --------------- */

.tc-header-centered .wp-block-site-title {
	text-align: center;
}

/* --- Header auto-matches the colour of the first page section -------------- */

/*
 * When a generated page opens with a dark or brand-coloured section, the
 * header picks up the same background so there is no white bar breaking the
 * immersive design. Requires CSS :has() (Chrome 105+, Firefox 121+, Safari 15.4+).
 *
 * section-3 (brand primary) → accent-3 bg
 * section-4 (contrast)      → contrast bg  (dark in light schemes, light in dark schemes)
 * section-5 (near-black)    → always #0a0a0a
 */
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part {
	background-color: var(--wp--preset--color--accent-3) !important;
	color: var(--wp--preset--color--base);
}
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part .tc-header-bar {
	background-color: var(--wp--preset--color--accent-3) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .alignfull.is-style-section-3:first-child) header.wp-block-template-part .wp-block-site-title {
	color: var(--wp--preset--color--base) !important;
}

body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part {
	background-color: var(--wp--preset--color--contrast) !important;
	color: var(--wp--preset--color--base);
}
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part .tc-header-bar {
	background-color: var(--wp--preset--color--contrast) !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part a,
body:has(.wp-block-post-content > .alignfull.is-style-section-4:first-child) header.wp-block-template-part .wp-block-site-title {
	color: var(--wp--preset--color--base) !important;
}

body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) {
	background-color: #0a0a0a !important;
	color: #f8fafc;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) .tc-header-bar {
	background-color: #0a0a0a !important;
}
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) a,
body:has(.wp-block-post-content > .alignfull.is-style-section-5:first-child) header.wp-block-template-part:not(:has(.tc-header-transparent)) .wp-block-site-title {
	color: #f8fafc !important;
}

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

.tc-hero-centered {
	text-align: center;
	min-height: 100dvh;
	display: flex;
	align-items: center;
}

/* Eyebrow label — small uppercase label above the main heading */
.tc-eyebrow {
	opacity: 0.6;
}

/* --- Style knob: gradient — gradient text on the section heading ----------- */

.tc-style-gradient .wp-block-heading {
	background: linear-gradient(135deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* On sections that already have a coloured bg, use light/white gradient */
.tc-section.is-style-section-3 .tc-style-gradient .wp-block-heading,
.tc-section.is-style-section-4 .tc-style-gradient .wp-block-heading,
.tc-section.is-style-section-5 .tc-style-gradient .wp-block-heading {
	background: linear-gradient(135deg, #ffffff 0%, color-mix(in srgb, #ffffff 70%, var(--wp--preset--color--accent-2)) 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* --- Style knob: bold — maximum typographic weight on headings ------------- */

.tc-style-bold .wp-block-heading {
	font-weight: 800 !important;
	letter-spacing: -0.035em !important;
}

/* --- Accent-top card variant ---------------------------------------------- */

.tc-card-accent-top .tc-card {
	border-top: 3px solid var(--wp--preset--color--accent-1);
	border-radius: 0 0 10px 10px;
	background-color: var(--wp--preset--color--accent-5);
	padding: clamp(1.25rem, 2.5vw, 1.75rem);
}

.tc-section.is-style-section-3 .tc-card-accent-top .tc-card,
.tc-section.is-style-section-4 .tc-card-accent-top .tc-card,
.tc-section.is-style-section-5 .tc-card-accent-top .tc-card {
	background-color: rgba(255, 255, 255, .08);
	border-top-color: var(--wp--preset--color--accent-2);
}

/* --- Icon-circle card variant ---------------------------------------------- */

.tc-card-icon-circle .tc-icon {
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 15%, transparent);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	margin-bottom: 1.25rem !important;
}

/* --- Pricing feature list — checkmarks, no bullets ------------------------- */

.tc-feature-list {
	list-style: none !important;
	padding-left: 0 !important;
	margin: 0 0 1.5rem !important;
}

.tc-feature-list li {
	padding-left: 1.75rem !important;
	position: relative;
	margin-bottom: .5rem;
}

.tc-feature-list li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

/* Pricing card on dark section backgrounds — restore text-period and desc contrast */
.tc-section.is-style-section-3 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-3 .tc-pricing-card .tc-card-desc,
.tc-section.is-style-section-4 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-4 .tc-pricing-card .tc-card-desc,
.tc-section.is-style-section-5 .tc-pricing-card .tc-price-period,
.tc-section.is-style-section-5 .tc-pricing-card .tc-card-desc {
	color: rgba(255, 255, 255, .65) !important;
}

/* ============================================================
   PROCESS TERMINAL
   Two-column layout: numbered steps (left) + terminal window (right).
   ============================================================ */

.tc-process-terminal .tc-pt-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(2.5rem, 5vw, 4rem);
	align-items: center;
}

.tc-pt-steps-list {
	display: flex;
	flex-direction: column;
	gap: 1.75rem;
}

.tc-pt-step {
	display: flex;
	gap: 1.25rem;
	align-items: flex-start;
}

.tc-pt-num {
	flex-shrink: 0;
	width: 2.25rem !important;
	height: 2.25rem;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	font-weight: 700;
	font-size: 0.8125rem !important;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0 !important;
	line-height: 1 !important;
	padding: 0 !important;
}

.tc-pt-step-body h4 {
	margin-bottom: 0.375rem;
	font-size: 1.0625rem;
}

.tc-pt-step-body p {
	margin: 0;
	font-size: 0.9375rem;
	opacity: 0.8;
}

/* Terminal window */
.tc-terminal {
	border-radius: 12px;
	overflow: hidden;
	background: #0d1117;
	font-family: 'Fira Code', 'Cascadia Code', 'Consolas', 'Monaco', monospace;
	font-size: clamp(0.75rem, 1.4vw, 0.875rem);
	line-height: 1.7;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .06);
}

.tc-terminal-bar {
	background: #21262d;
	padding: 12px 16px;
	display: flex;
	align-items: center;
	gap: 6px;
}

.tc-terminal-dot {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	flex-shrink: 0;
}

.tc-dot-red    { background: #ff5f57; }
.tc-dot-yellow { background: #febc2e; }
.tc-dot-green  { background: #28c840; }

.tc-terminal-title {
	margin-left: auto;
	margin-right: auto;
	color: #8b949e;
	font-size: 0.75rem;
}

.tc-terminal-body {
	padding: 20px 24px;
	color: #e6edf3;
}

.tc-t-prompt  { color: #39d353; }
.tc-t-cmd     { color: #e6edf3; }
.tc-t-comment { color: #8b949e; font-style: italic; }
.tc-t-key     { color: #79c0ff; }
.tc-t-colon   { color: #8b949e; }
.tc-t-val     { color: #a5d6ff; }
.tc-t-ok      { color: #39d353; }

.tc-cursor {
	display: inline-block;
	width: 8px;
	height: 1em;
	background: #58a6ff;
	margin-left: 3px;
	vertical-align: text-bottom;
	animation: tc-blink 1.1s steps(2) infinite;
}

@keyframes tc-blink { 50% { opacity: 0; } }

@media (max-width: 860px) {
	.tc-process-terminal .tc-pt-grid {
		grid-template-columns: 1fr;
	}
}

/* ============================================================
   PORTFOLIO GRID
   Image cards with hover overlay revealing caption + link.
   ============================================================ */

.tc-portfolio-items {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.tc-cols-2.tc-portfolio-grid .tc-portfolio-items { grid-template-columns: repeat(2, 1fr); }

.tc-portfolio-item { width: 100%; }

.tc-portfolio-thumb {
	position: relative;
	overflow: hidden;
	border-radius: 10px;
	aspect-ratio: 4 / 3;
	background: var(--wp--preset--color--accent-5);
}
.tc-portfolio-thumb .wp-block-image,
.tc-portfolio-thumb figure {
	margin: 0;
	width: 100%;
	height: 100%;
	display: block;
}

.tc-portfolio-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

.tc-portfolio-item:hover .tc-portfolio-thumb img { transform: scale(1.05); }

.tc-portfolio-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 0, 0, .8) 0%, rgba(0, 0, 0, 0) 55%);
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 1.5rem;
	opacity: 0;
	transition: opacity 300ms ease;
}

.tc-portfolio-item:hover .tc-portfolio-overlay { opacity: 1; }

.tc-portfolio-caption {
	color: #fff;
	font-weight: 600;
	font-size: 1rem;
	margin: 0 0 0.4rem !important;
}

.tc-portfolio-link {
	display: inline-block;
	color: var(--wp--preset--color--accent-1);
	font-size: 0.875rem;
	font-weight: 500;
	text-decoration: none;
	border-bottom: 1px solid currentColor;
	padding-bottom: 1px;
	transition: opacity 200ms;
}

.tc-portfolio-link:hover { opacity: .75; }

@media (max-width: 768px) {
	.tc-portfolio-items { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
	.tc-portfolio-items { grid-template-columns: 1fr; }
}

/* ============================================================
   BUTTON STYLE VARIANTS
   Fallback CSS — primary control is via DesignApplicator →
   wp_global_styles styles.elements.button.border.radius.
   These classes are set on <body> if button_style is applied.
   ============================================================ */

/* ============================================================
   MENU SLIDER
   Tab-filtered menu grid for restaurants / cafes.
   Tabs are injected by JS (initMenuFilter). Items use
   data-category attr; JS shows/hides them on tab click.
   ============================================================ */

/* Tab nav — injected by JS before .tc-menu-grid */
.tc-menu-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	justify-content: center;
	margin-bottom: 2.5rem;
}

.tc-menu-tab {
	background: transparent;
	border: 1.5px solid var(--wp--preset--color--accent-1);
	border-radius: 100px;
	color: var(--wp--preset--color--accent-1);
	cursor: pointer;
	font-family: inherit;
	font-size: 0.875rem;
	font-weight: 500;
	padding: 0.4rem 1.1rem;
	transition: background 180ms ease, color 180ms ease;
}

.tc-menu-tab:hover,
.tc-menu-tab.is-active {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
}

/* On dark section backgrounds */
.tc-section.is-style-section-3 .tc-menu-tab,
.tc-section.is-style-section-4 .tc-menu-tab,
.tc-section.is-style-section-5 .tc-menu-tab {
	border-color: rgba(255, 255, 255, .5);
	color: rgba(255, 255, 255, .85);
}

.tc-section.is-style-section-3 .tc-menu-tab:hover,
.tc-section.is-style-section-3 .tc-menu-tab.is-active,
.tc-section.is-style-section-4 .tc-menu-tab:hover,
.tc-section.is-style-section-4 .tc-menu-tab.is-active,
.tc-section.is-style-section-5 .tc-menu-tab:hover,
.tc-section.is-style-section-5 .tc-menu-tab.is-active {
	background: rgba(255, 255, 255, .15);
	border-color: #fff;
	color: #fff;
}

/* Menu item grid */
.tc-menu-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.25rem;
}

.tc-cols-2.tc-menu-section .tc-menu-grid { grid-template-columns: repeat(2, 1fr); }

.tc-menu-item {
	display: flex;
	flex-direction: column;
	margin-block-start: 0;
}

/* wp:html blocks inside the grid may get a .wp-block-html wrapper — ensure it fills the cell */
.tc-menu-grid .wp-block-html {
	display: contents;
}

.tc-menu-card {
	border-radius: 10px;
	background: var(--wp--preset--color--accent-5);
	padding: clamp(1.1rem, 2vw, 1.5rem);
	height: 100%;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	transition: box-shadow 200ms ease, transform 200ms ease;
}

.tc-menu-card:hover {
	box-shadow: 0 6px 24px rgba(0, 0, 0, .08);
	transform: translateY(-2px);
}

/* Dark section overrides */
.tc-section.is-style-section-3 .tc-menu-card,
.tc-section.is-style-section-4 .tc-menu-card,
.tc-section.is-style-section-5 .tc-menu-card {
	background: rgba(255, 255, 255, .07);
}

.tc-menu-item-header {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 0.75rem;
	flex-wrap: wrap;
}

.tc-menu-item-name {
	font-size: 1rem !important;
	font-weight: 600 !important;
	margin: 0 !important;
	flex: 1;
}

.tc-menu-price {
	font-size: 1rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-1);
	white-space: nowrap;
	flex-shrink: 0;
}

.tc-menu-item-desc {
	font-size: 0.9rem;
	opacity: 0.75;
	margin: 0 !important;
	flex: 1;
}

.tc-menu-cat-badge {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
	border-radius: 100px;
	font-size: 0.75rem;
	font-weight: 600;
	padding: 0.2rem 0.65rem;
	margin-top: 0.25rem;
	align-self: flex-start;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.tc-section.is-style-section-3 .tc-menu-cat-badge,
.tc-section.is-style-section-4 .tc-menu-cat-badge,
.tc-section.is-style-section-5 .tc-menu-cat-badge {
	background: rgba(255, 255, 255, .12);
	color: #fff;
}

@media (max-width: 768px) {
	.tc-menu-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   IMAGE SLIDER
   Centered viewport slider with prev/next arrows and dot indicators.
   JS (initSlider) builds the dots and drives slide transitions.
   ========================================================================== */

.tc-slider {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
	max-width: 1200px;
	margin: 0 auto;
	outline: none;
	background: var(--wp--preset--color--accent-5);
}

.tc-slider-track {
	display: flex;
	transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
	will-change: transform;
}

.tc-slide {
	min-width: 100%;
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
}

.tc-slide-img {
	width: 100%;
	height: clamp(280px, 50vw, 560px);
	object-fit: cover;
	display: block;
}

/* Caption overlay — gradient from bottom, hidden when empty */
.tc-slide-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	background: linear-gradient(to top, rgba(0,0,0,.65) 0%, transparent 100%);
	color: #fff;
	padding: 40px 32px 20px;
	font-size: .9375rem;
	font-weight: 500;
	margin: 0;
}

.tc-slide-caption:empty { display: none; }

/* Arrow buttons */
.tc-slider-btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 48px;
	height: 48px;
	border-radius: 50%;
	border: none;
	background: rgba(255,255,255,.92);
	color: #111;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 2px 14px rgba(0,0,0,.22);
	z-index: 10;
	transition: background .18s, transform .18s;
	padding: 0;
}

.tc-slider-btn:hover {
	background: #fff;
	transform: translateY(-50%) scale(1.1);
}

.tc-slider-prev { left: 16px; }
.tc-slider-next { right: 16px; }

/* Dot indicators — built by JS */
.tc-slider-dots {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	padding: 16px 0 4px;
}

.tc-slider-dot {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	border: none;
	background: var(--wp--preset--color--accent-4);
	opacity: .35;
	cursor: pointer;
	padding: 0;
	transition: opacity .2s, transform .2s, background .2s;
}

.tc-slider-dot.is-active {
	background: var(--wp--preset--color--accent-1);
	opacity: 1;
	transform: scale(1.4);
}

/* Hide arrows when only one slide */
.tc-slider[data-single] .tc-slider-btn { display: none; }

@media (max-width: 600px) {
	.tc-slider-btn { width: 38px; height: 38px; }
	.tc-slider-prev { left: 8px; }
	.tc-slider-next { right: 8px; }
}

/* ==========================================================================
   Blog — post card grid, single post, navigation, comments
   ========================================================================== */

/* ── Blog / archive hero header ──────────────────────────────────────────── */

/* Centres all content and ensures heading + eyebrow colour inherit from the
   dark section-4 background. The eyebrow colour override is inline via the
   pattern's style attribute; this rule just ensures the heading stays white. */
.tc-blog-hero {
	text-align: center;
}

.tc-blog-subtitle {
	opacity: 0.65;
}

.tc-blog-hero .wp-block-heading,
.tc-blog-hero .wp-block-query-title {
	color: inherit;
}

/* ── Post grid ────────────────────────────────────────────────────────────── */

.tc-post-grid.wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 28px;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ── Post card ────────────────────────────────────────────────────────────── */

.tc-post-card {
	background: var(--wp--preset--color--accent-5);
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: transform 240ms ease, box-shadow 240ms ease;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
}

.tc-post-card:hover {
	transform: translateY(-5px);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}

/* Featured image with zoom-on-hover */
.tc-post-card__image.wp-block-post-featured-image {
	overflow: hidden;
	margin: 0;
	flex-shrink: 0;
}

.tc-post-card__image.wp-block-post-featured-image img {
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	display: block;
	transition: transform 400ms ease;
}

.tc-post-card:hover .tc-post-card__image img {
	transform: scale(1.06);
}

/* Card body */
.tc-post-card__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	flex: 1;
}

/* Category badge */
.tc-post-card__cat.wp-block-post-terms a {
	display: inline-block;
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 12%, transparent);
	color: var(--wp--preset--color--accent-1);
	border-radius: 100px;
	font-size: 0.7rem;
	font-weight: 700;
	padding: 3px 10px;
	text-decoration: none;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	transition: background 200ms;
}

.tc-post-card__cat.wp-block-post-terms a:hover {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 20%, transparent);
}

/* Title */
.tc-post-card .wp-block-post-title a {
	color: inherit;
	text-decoration: none;
	transition: color 200ms;
}

.tc-post-card .wp-block-post-title a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* Excerpt — clamp to 3 lines */
.tc-post-card__excerpt.wp-block-post-excerpt p,
.tc-post-card__excerpt.wp-block-post-excerpt .wp-block-post-excerpt__excerpt {
	font-size: 0.9rem;
	opacity: 0.7;
	margin: 0;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

/* Footer row: date + read-more */
.tc-post-card__footer.wp-block-group {
	margin-top: auto;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.tc-post-card__footer .wp-block-post-date {
	font-size: 0.8rem;
	opacity: 0.5;
}

.tc-post-card__footer .tc-post-card__readmore.wp-block-read-more {
	font-size: 0.82rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	letter-spacing: 0.01em;
}

/* Smaller variant used in "more posts" section */
.tc-post-card--sm {
	border-radius: 12px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* ── Pagination ───────────────────────────────────────────────────────────── */

.wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}

.wp-block-query-pagination .page-numbers,
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 14px;
	border-radius: 10px;
	font-size: 0.875rem;
	font-weight: 600;
	text-decoration: none;
	color: inherit;
	border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	transition: background 200ms, color 200ms, border-color 200ms;
}

.wp-block-query-pagination .page-numbers.current,
.wp-block-query-pagination .page-numbers:hover,
.wp-block-query-pagination-previous:hover,
.wp-block-query-pagination-next:hover {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border-color: transparent;
}

/* ── Single post ──────────────────────────────────────────────────────────── */

/* Article header area */
.tc-single-header {
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.tc-single-cat.wp-block-post-terms a {
	display: inline-block;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

/* Featured image — full bleed, fixed height */
.wp-block-post-featured-image.alignfull img {
	width: 100%;
	height: 480px;
	object-fit: cover;
	display: block;
}

/* Post content — nice prose rhythm (blog posts only, not generated pages) */
.single .wp-block-post-content {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}

.wp-block-post-content p {
	font-size: 1.0625rem;
	line-height: 1.8;
}

.wp-block-post-content h2 {
	margin-top: 2.5em;
	margin-bottom: 0.6em;
}

.wp-block-post-content h3 {
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.wp-block-post-content img:not(.wp-block-cover__image-background) {
	border-radius: 10px;
}

.wp-block-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--accent-1);
	margin-left: 0;
	padding-left: 24px;
	font-style: italic;
	opacity: 0.85;
}

/* ── Post navigation ──────────────────────────────────────────────────────── */

.tc-post-nav .wp-block-group {
	border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent);
}

.tc-post-nav .wp-block-post-navigation-link a {
	color: inherit;
	text-decoration: none;
	font-weight: 600;
	font-size: 0.9rem;
	transition: color 200ms;
}

.tc-post-nav .wp-block-post-navigation-link a:hover {
	color: var(--wp--preset--color--accent-1);
}

/* ── More posts ───────────────────────────────────────────────────────────── */

.tc-more-posts {
	background: var(--wp--preset--color--accent-5);
	border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

/* ── Comments ─────────────────────────────────────────────────────────────── */

.tc-comments-section {
	border-top: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.tc-comment {
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
}

.tc-comment:last-child {
	border-bottom: none;
}

.wp-block-post-comments-form input[type="text"],
.wp-block-post-comments-form input[type="email"],
.wp-block-post-comments-form input[type="url"],
.wp-block-post-comments-form textarea {
	width: 100%;
	padding: 10px 14px;
	border-radius: 8px;
	border: 1px solid color-mix(in srgb, currentColor 20%, transparent);
	background: transparent;
	color: inherit;
	font-size: 0.9375rem;
	transition: border-color 200ms;
}

.wp-block-post-comments-form input:focus,
.wp-block-post-comments-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent-1);
}

.wp-block-post-comments-form .submit {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border: none;
	border-radius: 8px;
	padding: 11px 28px;
	font-weight: 700;
	font-size: 0.9rem;
	cursor: pointer;
	transition: opacity 200ms;
}

.wp-block-post-comments-form .submit:hover {
	opacity: 0.85;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 900px) {
	.tc-post-grid.wp-block-post-template {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 600px) {
	.tc-post-grid.wp-block-post-template {
		grid-template-columns: 1fr;
	}

	.wp-block-post-featured-image.alignfull img {
		height: 260px;
	}
}

@media (max-width: 480px) {
	.tc-menu-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   FOOTER SOCIAL ICONS
   Feather icons in a row. a[href=""] hidden via attr selector
   so unfilled platforms simply disappear.
   ============================================================ */

.tc-footer-social {
	display: flex;
	gap: 0.75rem;
	align-items: center;
	margin-top: 1.25rem;
	flex-wrap: wrap;
}

.tc-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: inherit;
	text-decoration: none;
	transition: background 200ms ease, transform 200ms ease;
}

.tc-social-icon:hover {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	transform: translateY(-2px);
}

.tc-social-icon svg { display: block; }

/* Hide icons whose URL was not provided (renderer sets href to "") */
a.tc-social-icon[href=""] { display: none !important; }

/* --- Testimonials Marquee -------------------------------------------------- */

.tc-marquee-outer {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
	mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}

.tc-marquee-inner {
	display: flex;
	width: max-content;
	gap: 20px;
	animation: tc-marquee 44s linear infinite;
}

.tc-marquee-outer:hover .tc-marquee-inner {
	animation-play-state: paused;
}

@keyframes tc-marquee {
	from { transform: translateX(0); }
	to   { transform: translateX(-50%); }
}

.tc-marquee-card {
	flex-shrink: 0;
	width: 320px;
	background: var(--wp--preset--color--accent-5, rgba(255, 255, 255, .05));
	border: 1px solid rgba(0, 0, 0, .07);
	border-radius: 14px;
	padding: 24px 28px;
}

.is-style-section-3 .tc-marquee-card,
.is-style-section-4 .tc-marquee-card,
.is-style-section-5 .tc-marquee-card {
	border-color: rgba(255, 255, 255, .1);
}

.tc-marquee-quote {
	font-size: .9375rem;
	line-height: 1.75;
	font-style: italic;
	margin: 0 0 14px;
	opacity: .85;
}

.tc-marquee-author {
	font-size: .8125rem;
	font-weight: 500;
	margin: 0;
	opacity: .6;
}

/* --- Split Features -------------------------------------------------------- */

.tc-split-feature-list {
	display: flex;
	flex-direction: column;
	gap: 80px;
}

.tc-split-feature {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 72px;
	align-items: center;
}

.tc-split-feature:nth-child(even) {
	direction: rtl;
}

.tc-split-feature:nth-child(even) > * {
	direction: ltr;
}

.tc-split-feature__img img {
	width: 100%;
	border-radius: 16px;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
}

.tc-split-eyebrow {
	font-size: .75rem;
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin: 0 0 12px;
}

.tc-split-heading {
	font-size: clamp(1.375rem, 2.5vw, 1.875rem);
	font-weight: 700;
	line-height: 1.2;
	margin: 0 0 16px;
}

.tc-split-body {
	font-size: 1rem;
	line-height: 1.8;
	opacity: .75;
	margin: 0 0 24px;
}

.tc-split-link {
	font-size: .9375rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.tc-split-link:hover { text-decoration: underline; }

a.tc-split-link[href=""] { display: none; }

@media (max-width: 768px) {
	.tc-split-feature,
	.tc-split-feature:nth-child(even) {
		grid-template-columns: 1fr;
		gap: 32px;
		direction: ltr;
	}
}

/* Ripple: slightly more vivid on accent-1 buttons */
.tc-ripple-wave {
	background: rgba(255, 255, 255, .35);
}

.wp-block-button__link.tc-held,
.tc-ripple.tc-held {
	box-shadow: 0 0 0 4px rgba(255, 255, 255, .22), 0 4px 20px rgba(0, 0, 0, .25);
}

/* ==========================================================================
   Header
   ========================================================================== */

/* Prevent WP's 1.2rem block-gap from appearing above main content and footer.
   Covers: inline main/footer (front-page.html), template-part footer (all other templates). */
:where(.wp-site-blocks) > main.wp-block-group,
:where(.wp-site-blocks) > footer.wp-block-group,
:where(.wp-site-blocks) > .wp-block-template-part {
	margin-block-start: 0;
}

/* Themecut branded header */
.tc-header-bar {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 5%, var(--wp--preset--color--base));
	position: sticky;
	top: 0;
	z-index: 100;
}

/* 2px gradient accent stripe at the very top — immediate visual separation from TT25 */
header.wp-block-template-part:has(.tc-header-bar)::before {
	content: '';
	display: block;
	height: 2px;
	background: linear-gradient(90deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 100%);
}

/* Primary-coloured logo text — instantly brands the header */
.tc-header-bar .wp-block-site-title a {
	color: var(--wp--preset--color--accent-1);
}

/* Nav links: slide-in primary underline on hover + active page */
.tc-header-bar .wp-block-navigation-item .wp-block-navigation-item__content {
	position: relative;
}
.tc-header-bar .wp-block-navigation-item .wp-block-navigation-item__content::after {
	content: '';
	position: absolute;
	bottom: -3px;
	left: 0;
	right: 0;
	height: 2px;
	border-radius: 1px;
	background: var(--wp--preset--color--accent-1);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.2s ease;
}
.tc-header-bar .wp-block-navigation-item:hover .wp-block-navigation-item__content::after,
.tc-header-bar .current-menu-item .wp-block-navigation-item__content::after {
	transform: scaleX(1);
}

/* Navigation dropdown submenus — override WP default white background */
.wp-block-navigation .wp-block-navigation__submenu-container {
	background-color: var(--wp--preset--color--base) !important;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 12%, transparent);
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	padding: 6px;
	min-width: 180px;
}
/* Force submenu text to contrast color — overrides dark/transparent header white-text rules */
.wp-block-navigation .wp-block-navigation__submenu-container a,
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	color: var(--wp--preset--color--contrast) !important;
	border-radius: 6px;
	padding: 8px 12px;
}
.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	color: var(--wp--preset--color--accent-1) !important;
}

/* Suppress top stripe on transparent header (it floats over hero images) */
body:has(header .tc-header-transparent) header.wp-block-template-part::before {
	display: none;
}

/* CTA button in header — smaller than the default WP button, with left gap to
   separate it visually from the nav links. */
.tc-header-bar .tc-header-cta .wp-block-button__link {
	padding: 0.4em 1em;
	font-size: 0.875rem;
	margin-left: 1.25rem;
}

/* WP admin bar is 32px tall (46px on mobile ≤782px). Offset sticky/absolute headers so they
   don't hide behind it. WordPress exposes .admin-bar on <body> when the bar is visible. */
.admin-bar .tc-header-bar,
.admin-bar .tc-welcome-header {
	top: 32px;
}

@media screen and (max-width: 782px) {
	.admin-bar .tc-header-bar,
	.admin-bar .tc-welcome-header {
		top: 46px;
	}
}

/* Dark section headers — readable border, white logo */
.tc-section.is-style-section-4 .tc-header-bar,
.tc-section.is-style-section-5 .tc-header-bar {
	border-bottom-color: rgba(255, 255, 255, .1) !important;
}

/* ==========================================================================
   Welcome / front-page template
   ========================================================================== */

/* Muted subtitle in hero */
.tc-hero-sub {
	opacity: 0.7;
}

/* Stats row in hero */
.tc-welcome-stats {
	gap: 0 56px;
}

.tc-welcome-stats .wp-block-group {
	text-align: center;
}

/* Thin vertical divider between stats */
.tc-stat-divider {
	width: 1px;
	height: 44px;
	background: rgba(255, 255, 255, .18);
	align-self: center;
}

/* Step numbers — large ghost numbers in contrast color */
.tc-step-num {
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--syne);
	opacity: 0.18;
}

/* Eyebrow label — use primary button colour so it respects the active variation */
.tc-eyebrow {
	color: var(--wp--preset--color--accent-1);
	text-transform: uppercase;
}

/* CTA section inverse button (white bg, primary text) */
.tc-btn-cta-inverse .wp-block-button__link {
	background-color: #ffffff !important;
	color: var(--wp--preset--color--accent-3) !important;
	border-color: #ffffff !important;
}

.tc-btn-cta-inverse .wp-block-button__link:hover {
	background-color: rgba(255, 255, 255, .9) !important;
}

/* Welcome template: transparent header floats over dark hero */
.tc-welcome-header {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	background: transparent !important;
	border-bottom-color: rgba(255, 255, 255, .1) !important;
}

/* Make all text/links white so they read against the dark hero */
.tc-welcome-header .wp-block-site-title a,
.tc-welcome-header .wp-block-navigation-item__content,
.tc-welcome-header .wp-block-navigation__submenu-icon {
	color: #fff !important;
}

/* Cap logo height so it doesn't stretch the header */
.tc-welcome-header .wp-block-site-logo img,
.tc-header-bar .wp-block-site-logo img {
	max-height: 36px;
	width: auto;
}

/* "Generate Site →" button: frosted glass pill against dark hero */
.tc-welcome-nav-btn .wp-block-button__link {
	background: rgba(255, 255, 255, .12) !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	color: #fff !important;
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
}

.tc-welcome-nav-btn .wp-block-button__link:hover {
	background: rgba(255, 255, 255, .22) !important;
}

/* Hero always fills the viewport so the section below never peeks in */
.tc-welcome-hero {
	min-height: 100vh;
	min-height: 100dvh; /* dynamic viewport height: correct on mobile with browser chrome */
	box-sizing: border-box;
}

.admin-bar .tc-welcome-hero {
	min-height: calc(100vh - 32px);
	min-height: calc(100dvh - 32px);
}

@media screen and (max-width: 782px) {
	.admin-bar .tc-welcome-hero {
		min-height: calc(100dvh - 46px);
	}
}

/* Abstract dark gradient hero — radial glows over near-black base */
.tc-welcome-hero.tc-section.is-style-section-4 {
	background:
		radial-gradient(ellipse 80% 100% at 10% 55%, rgba(88, 42, 170, 0.5) 0%, transparent 60%),
		radial-gradient(ellipse 60% 80% at 90% 10%, rgba(20, 52, 130, 0.45) 0%, transparent 58%),
		radial-gradient(ellipse 45% 55% at 65% 90%, rgba(130, 28, 72, 0.25) 0%, transparent 58%),
		#06080f;
}

/* Gradient headline — white → orange → violet sweep */
.tc-gradient-headline {
	background: linear-gradient(110deg, #ffffff 10%, #ff6b35 55%, #c084fc 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

/* Pill badge above the hero headline */
.tc-hero-badge {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: rgba(255, 107, 53, 0.1);
	border: 1px solid rgba(255, 107, 53, 0.28);
	color: #ff8255;
	padding: 6px 16px;
	border-radius: 100px;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.02em;
	margin-bottom: 28px;
}

@media (max-width: 600px) {
	.tc-welcome-stats {
		gap: 32px 0;
		flex-direction: column;
	}
	.tc-stat-divider {
		width: 44px;
		height: 1px;
		background: rgba(255, 255, 255, .18);
	}
}

/* ============================================================
   HERO ILLUSTRATED
   Two-column hero with CSS blob/card composition — no image.
   Decorative visual adapts to any palette via color tokens.
   ============================================================ */

/* Layout now handled by WP Columns block */
.tc-hero-illus-inner {
	align-items: center;
}

.tc-hero-illus-text .tc-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 18px;
}

.tc-hero-illus-heading {
	font-size: clamp(2.25rem, 5vw, 3.75rem);
	font-weight: 800;
	line-height: 1.1;
	letter-spacing: -0.02em;
	margin: 0 0 20px;
}

.tc-hero-illus-sub {
	font-size: 1.125rem;
	line-height: 1.7;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 36px;
}

.tc-hero-illus-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: center;
}

.tc-hero-illus-btn-primary {
	display: inline-flex;
	align-items: center;
	padding: 13px 28px;
	background: var(--wp--preset--color--accent-1);
	color: #fff !important;
	border-radius: var(--wp--style--global--button-radius, 8px);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: opacity 150ms ease, transform 150ms ease;
}

.tc-hero-illus-btn-primary:hover {
	opacity: 0.85;
	transform: translateY(-1px);
}

.tc-hero-illus-btn-ghost {
	display: inline-flex;
	align-items: center;
	padding: 11px 28px;
	border: 2px solid currentColor;
	color: var(--wp--preset--color--contrast) !important;
	border-radius: var(--wp--style--global--button-radius, 8px);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9375rem;
	opacity: 0.6;
	transition: opacity 150ms ease;
}

.tc-hero-illus-btn-ghost:hover { opacity: 1; }

/* Illustrated composition — two bordered image frames in a stacked collage */
.tc-hero-illus-visual {
	position: relative;
	height: 460px;
	flex-shrink: 0;
}

.tc-illus-frame {
	position: absolute;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.14);
}

.tc-illus-frame img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Primary frame — dominant, anchored top-right */
.tc-illus-frame--1 {
	width: 70%;
	height: 78%;
	top: 0;
	right: 0;
	border: 3px solid var(--wp--preset--color--accent-1);
}

/* Secondary frame — smaller, anchored bottom-left, overlaps primary but neither is hidden */
.tc-illus-frame--2 {
	width: 56%;
	height: 60%;
	bottom: 0;
	left: 0;
	border: 3px solid var(--wp--preset--color--accent-2);
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.18);
}

/* Decorative accent ring behind the frames */
.tc-illus-accent-ring {
	position: absolute;
	width: 44%;
	height: 44%;
	border: 1.5px dashed var(--wp--preset--color--accent-1);
	border-radius: 50%;
	bottom: 2%;
	right: 2%;
	opacity: 0.18;
	pointer-events: none;
}

@media (max-width: 840px) {
	.tc-hero-illus-visual { height: 240px; }
	.tc-illus-frame--1 { width: 68%; height: 80%; }
	.tc-illus-frame--2 { width: 54%; height: 62%; }
}

/* ============================================================
   PAGE HERO INNER
   Compact centred hero for subpages.
   Eyebrow gets accent rule lines via ::before / ::after.
   ============================================================ */

.tc-page-hero-inner .tc-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
}

.tc-page-hero-inner .tc-eyebrow::before,
.tc-page-hero-inner .tc-eyebrow::after {
	content: '';
	display: inline-block;
	width: 28px;
	height: 2px;
	background: var(--wp--preset--color--accent-1);
	border-radius: 2px;
	flex-shrink: 0;
}

.tc-page-hero-inner .wp-block-heading {
	margin-bottom: 16px;
}

.tc-page-hero-sub {
	max-width: 560px;
	margin: 0 auto;
	color: var(--wp--preset--color--accent-4);
}

/* ============================================================
   ABOUT SPLIT BLOCKS
   Text + layered color-block collage. Image-free — palette-driven.
   ============================================================ */

/* Layout now handled by WP Columns block */
.tc-about-split-blocks-inner {
	align-items: center;
}

.tc-split-blocks-text .tc-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 16px;
}

.tc-split-blocks-heading {
	font-size: clamp(1.75rem, 3.5vw, 2.75rem);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.02em;
	margin: 0 0 16px;
}

.tc-split-blocks-sub {
	font-size: 1.125rem;
	font-weight: 500;
	line-height: 1.5;
	margin: 0 0 14px;
}

.tc-split-blocks-body {
	font-size: 1rem;
	line-height: 1.75;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 32px;
}

.tc-split-blocks-cta {
	display: inline-flex;
	align-items: center;
	padding: 12px 26px;
	background: var(--wp--preset--color--accent-1);
	color: #fff !important;
	border-radius: var(--wp--style--global--button-radius, 8px);
	font-weight: 600;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: opacity 150ms ease;
}

.tc-split-blocks-cta:hover { opacity: 0.85; }

/* Visual collage */
.tc-split-blocks-visual {
	position: relative;
	height: 400px;
}

.tc-vis-block {
	position: absolute;
	border-radius: 16px;
	background-size: cover;
	background-position: center;
	overflow: hidden;
}

/* Color tint overlay — renders over any background image; acts as block fill when no image */
.tc-vis-block::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.tc-vis-block--1 {
	width: 70%;
	height: 72%;
	top: 0;
	right: 0;
}
.tc-vis-block--1::before {
	background: var(--wp--preset--color--accent-1);
	opacity: 0;
}

.tc-vis-block--2 {
	width: 62%;
	height: 66%;
	border: 1px solid rgba(128, 128, 128, 0.15);
	top: 10%;
	right: 8%;
	display: flex;
	align-items: flex-end;
	padding: 20px 22px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}
.tc-vis-block--2::before {
	background: var(--wp--preset--color--accent-5);
	opacity: 0;
}

.tc-vis-block--3 {
	width: 52%;
	height: 55%;
	bottom: 0;
	left: 0;
	border-radius: 12px;
}
.tc-vis-block--3::before {
	background: var(--wp--preset--color--accent-2);
	opacity: 0;
}

.tc-vis-quote {
	position: relative;
	z-index: 2;
	font-size: 0.9375rem;
	font-style: italic;
	line-height: 1.55;
	color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--accent-5);
    opacity: 0.8;
    padding: 4px;
    border-radius: 4px;
}

/* blocks-right knob: flip visual to left, text to right */
.tc-blocks-right .tc-split-blocks-text { order: 2; }
.tc-blocks-right .tc-split-blocks-visual { order: 1; }

@media (max-width: 840px) {
	.tc-about-split-blocks-inner {
		gap: 40px;
	}

	.tc-split-blocks-visual { height: 280px; }
	.tc-blocks-right .tc-split-blocks-text { order: 1; }
	.tc-blocks-right .tc-split-blocks-visual { order: 2; }
}

/* ============================================================
   GALLERY MOSAIC
   CSS grid with nth-child row-spanning for asymmetric mosaic.
   ============================================================ */

.tc-gallery-mosaic-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 240px;
	gap: 12px;
}

.tc-gallery-mosaic-item {
	position: relative;
	overflow: hidden;
	border-radius: 12px;
}

/* Every 4th item (1st, 5th, 9th…) spans 2 rows */
.tc-gallery-mosaic-item:nth-child(4n+1) { grid-row: span 2; }

/* WP Image block wraps <img> in <figure> — stretch it to fill the grid cell */
.tc-gallery-mosaic-item .wp-block-image {
	height: 100%;
	margin: 0;
}

.tc-gallery-mosaic-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 500ms ease;
}

.tc-gallery-mosaic-item:hover img { transform: scale(1.05); }

.tc-gallery-mosaic-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 16px 18px;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.65) 0%, transparent 100%);
	color: #fff;
	font-size: 0.875rem;
	font-weight: 500;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 250ms ease, transform 250ms ease;
}

.tc-gallery-mosaic-item:hover .tc-gallery-mosaic-caption {
	opacity: 1;
	transform: translateY(0);
}

/* Hide empty captions so the gradient doesn't show on uncaptioned items */
.tc-gallery-mosaic-caption:empty { display: none; }

@media (max-width: 768px) {
	.tc-gallery-mosaic-grid {
		grid-template-columns: repeat(2, 1fr);
		grid-auto-rows: 180px;
	}
}

@media (max-width: 480px) {
	.tc-gallery-mosaic-grid {
		grid-template-columns: 1fr;
		grid-auto-rows: 220px;
	}

	.tc-gallery-mosaic-item:nth-child(4n+1) { grid-row: span 1; }
}

/* ============================================================
   FEATURES ICON ROW
   Horizontal icon + text list. No card box — clean editorial rows.
   ============================================================ */

.tc-icon-row-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 32px 48px;
}

.tc-icon-row-item {
	display: flex;
	gap: 18px;
	align-items: flex-start;
}

.tc-icon-row-icon {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: 14px;
	background: var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
}

.tc-icon-row-icon svg {
	width: 22px;
	height: 22px;
	stroke: #fff;
	fill: none;
}

.tc-icon-row-heading {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 4px 0 6px;
	line-height: 1.3;
}

.tc-icon-row-body {
	font-size: 0.9375rem;
	line-height: 1.65;
	opacity: 0.72;
	margin: 0;
}

/* ============================================================
   BENTO GRID
   Mixed-size card grid. First card spans 2 cols in accent colour.
   Ideal: 5 items (2-card first row, 3-card second row).
   ============================================================ */

.tc-bento-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.tc-bento-card {
	background: var(--wp--preset--color--accent-5);
	border-radius: 20px;
	padding: 36px 32px;
	transition: transform 0.2s ease;
}

.tc-bento-card:hover { transform: translateY(-3px); }

.tc-bento-card:nth-child(1) {
	grid-column: span 2;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
}

.tc-bento-card:nth-child(1) .tc-bento-icon svg {
	stroke: rgba(255, 255, 255, 0.9);
}

.tc-bento-card:nth-child(1) .tc-bento-body { opacity: 0.82; }

.tc-bento-icon {
	width: 44px;
	height: 44px;
	margin-bottom: 20px;
}

.tc-bento-icon svg {
	width: 44px;
	height: 44px;
	stroke: var(--wp--preset--color--accent-1);
	fill: none;
}

.tc-bento-heading {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 10px;
	line-height: 1.25;
}

.tc-bento-body {
	font-size: 0.9375rem;
	line-height: 1.65;
	opacity: 0.72;
	margin: 0;
}

@media (max-width: 768px) {
	.tc-bento-grid { grid-template-columns: 1fr; }
	.tc-bento-card:nth-child(1) { grid-column: span 1; }
}

/* ============================================================
   TESTIMONIALS FEATURED
   Single large testimonial — big quote, author photo, 5 stars.
   ============================================================ */

.tc-tf-wrap {
	max-width: 780px;
	margin: 0 auto;
	text-align: center;
}

.tc-tf-stars {
	font-size: 1.5rem;
	color: var(--wp--preset--color--accent-1);
	letter-spacing: 4px;
	margin: 0 0 32px;
}

.tc-tf-quote {
	font-size: clamp(1.25rem, 2.5vw, 1.75rem);
	font-weight: 500;
	line-height: 1.55;
	font-style: italic;
	margin: 0 0 40px;
	position: relative;
}

.tc-tf-quote::before {
	content: '\201C';
	position: absolute;
	top: -0.3em;
	left: 50%;
	transform: translateX(-50%);
	font-size: 10rem;
	line-height: 1;
	opacity: 0.05;
	font-style: normal;
	pointer-events: none;
}

.tc-tf-author {
	justify-content: center;
	max-width: 360px;
	margin: 0 auto;
}

/* WP Columns replaces the old inline-flex — restore the author photo border */
.tc-tf-author .wp-block-image img {
	border: 3px solid var(--wp--preset--color--accent-1);
}

.tc-tf-photo {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	object-fit: cover;
	flex-shrink: 0;
	border: 3px solid var(--wp--preset--color--accent-1);
}

.tc-tf-attribution { text-align: left; }

.tc-tf-name {
	font-weight: 700;
	font-size: 1rem;
	margin: 0 0 3px;
}

.tc-tf-role {
	font-size: 0.875rem;
	opacity: 0.6;
	margin: 0;
}

/* ============================================================
   CTA SPLIT
   Left: heading + trust signals. Right: inline form card.
   ============================================================ */

/* Layout now handled by WP Columns block */
.tc-cta-split-inner {
	align-items: start;
}

.tc-cta-split-content .tc-eyebrow {
	display: inline-block;
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent-1);
	margin-bottom: 16px;
}

.tc-cta-split-heading {
	font-size: clamp(1.75rem, 3.5vw, 2.5rem);
	font-weight: 800;
	margin: 0 0 16px;
	line-height: 1.2;
}

.tc-cta-split-body {
	font-size: 1.0625rem;
	opacity: 0.75;
	margin: 0 0 28px;
	line-height: 1.7;
}

.tc-cta-trust-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tc-cta-trust-list li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tc-cta-trust-list li::before {
	content: '✓';
	flex-shrink: 0;
	width: 22px;
	height: 22px;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	margin-top: 1px;
}

.tc-cta-split-form {
	background: var(--wp--preset--color--accent-5);
	color: var(--wp--preset--color--contrast);
	border-radius: 16px;
	padding: 36px;
}

.tc-cta-form-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--wp--preset--color--contrast);
}

/* ── Dark nav ─────────────────────────────────────────────────────────────── */

.tc-header-dark {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, #08090e) !important;
	color: #fff !important;
}

.tc-header-dark .wp-block-navigation,
.tc-header-dark .wp-block-navigation a,
.tc-header-dark .wp-block-site-title,
.tc-header-dark .wp-block-site-title a {
	color: #fff !important;
}

.tc-header-dark .wp-block-navigation-item__content:focus,
.tc-header-dark .wp-block-navigation__responsive-container-open:focus {
	outline-color: var(--wp--preset--color--accent-1);
}

/* ── hero-form ────────────────────────────────────────────────────────────── */

.tc-hero-form-card {
	background: var(--wp--preset--color--accent-5);
	border-radius: 16px;
	padding: 36px;
	box-shadow: 0 4px 32px rgba(0,0,0,.08);
}

.tc-hero-form-title {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 24px;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--syne), sans-serif;
}

.tc-form-row--2 {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 14px;
}

@media (max-width: 640px) {
	.tc-form-row--2 { grid-template-columns: 1fr; }
}

/* ── hero-stats ───────────────────────────────────────────────────────────── */

.tc-hs-stats-row {
	display: flex;
	justify-content: center;
	margin-top: 56px;
	border-top: 1px solid color-mix(in srgb, currentColor 15%, transparent);
	padding-top: 40px;
	flex-wrap: wrap;
}

.tc-hs-stat {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	padding: 0 48px;
	border-right: 1px solid color-mix(in srgb, currentColor 15%, transparent);
}

.tc-hs-stat:last-child { border-right: none; }

.tc-hs-number {
	font-family: var(--wp--preset--font-family--syne), sans-serif;
	font-size: clamp(2rem, 4vw, 3rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

.tc-hs-label {
	font-size: .875rem;
	opacity: .7;
	text-align: center;
}

@media (max-width: 640px) {
	.tc-hs-stat { padding: 20px 24px; border-right: none; border-bottom: 1px solid color-mix(in srgb, currentColor 15%, transparent); width: 50%; }
	.tc-hs-stat:nth-child(odd) { border-right: 1px solid color-mix(in srgb, currentColor 15%, transparent); }
	.tc-hs-stat:last-child { border-bottom: none; }
}

/* ── hero-minimal ─────────────────────────────────────────────────────────── */

.tc-hero-minimal .tc-hmin-rule-row {
	display: flex;
	align-items: center;
	gap: 24px;
}

.tc-hmin-rule {
	flex: 0 0 80px;
	border: none;
	border-top: 2px solid var(--wp--preset--color--accent-1);
	margin: 0;
}

/* ── hero-prompt ──────────────────────────────────────────────────────────── */

.tc-hp-box-wrap {
	max-width: 740px;
	margin: 24px auto 0;
}

.tc-hp-box {
	position: relative;
	background: color-mix(in srgb, var(--wp--preset--color--accent-5) 80%, transparent);
	border-radius: 18px;
	padding: 22px 22px 16px;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--accent-1) 40%, transparent),
		0 0 80px color-mix(in srgb, var(--wp--preset--color--accent-1) 16%, transparent),
		0 8px 40px rgba(0,0,0,.22);
}

/* Gradient shimmer border */
.tc-hp-box::before {
	content: '';
	position: absolute;
	inset: -1px;
	border-radius: 19px;
	background: linear-gradient(120deg, var(--wp--preset--color--accent-1) 0%, var(--wp--preset--color--accent-2) 50%, var(--wp--preset--color--accent-1) 100%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	padding: 1px;
	pointer-events: none;
	opacity: .65;
}

.tc-hp-textarea {
	width: 100%;
	border: none;
	background: transparent;
	font-size: 1.0625rem;
	color: var(--wp--preset--color--contrast);
	outline: none;
	resize: none;
	min-height: 56px;
	font-family: inherit;
	line-height: 1.6;
	display: block;
	opacity: .75;
}

.tc-hp-box-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: 14px;
	padding-top: 14px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 10%, transparent);
	flex-wrap: wrap;
}

.tc-hp-chips { display: flex; gap: 8px; flex-wrap: wrap; }

.tc-hp-chip {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent-1) 28%, transparent);
	border-radius: 100px;
	padding: 5px 14px;
	font-size: .8rem;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	font-family: inherit;
	transition: background .15s;
	white-space: nowrap;
}

.tc-hp-chip:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-1) 22%, transparent); }

.tc-hp-send {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border-radius: 10px;
	padding: 10px 20px;
	font-size: .9375rem;
	font-weight: 600;
	white-space: nowrap;
	text-decoration: none;
	transition: all .15s;
	flex-shrink: 0;
}

.tc-hp-send svg { width: 15px; height: 15px; vertical-align: middle; }
.tc-hp-send:hover { background: color-mix(in srgb, var(--wp--preset--color--accent-1) 82%, #000); color: #fff; transform: translateY(-1px); }

.tc-hp-hint {
	text-align: center;
	font-size: .8125rem;
	opacity: .45;
	margin: 14px 0 0;
}

@media (max-width: 640px) {
	.tc-hp-box-footer { flex-direction: column; align-items: flex-start; }
	.tc-hp-send { width: 100%; justify-content: center; }
}

/* ── hero-logo-strip ──────────────────────────────────────────────────────── */

.tc-hls-strip {
	margin-top: 56px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20px;
}

.tc-hls-label {
	font-size: .8rem;
	text-transform: uppercase;
	letter-spacing: .12em;
	opacity: .45;
	margin: 0;
}

.tc-hls-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 32px 48px;
}

.tc-hls-logo img {
	height: 28px;
	width: auto;
	opacity: .5;
	filter: grayscale(1);
	transition: opacity .2s, filter .2s;
}

.tc-hls-logo img:hover { opacity: .8; filter: grayscale(0); }

.tc-hls-logo--text {
	font-size: .9375rem;
	font-weight: 700;
	opacity: .35;
	letter-spacing: .02em;
}

/* ── contact-map ──────────────────────────────────────────────────────────── */

.tc-contact-info {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.tc-contact-info-item {
	display: flex;
	align-items: flex-start;
	gap: 14px;
}

.tc-contact-icon {
	width: 40px;
	height: 40px;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border-radius: 8px;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tc-contact-icon svg {
	width: 18px;
	height: 18px;
	stroke: #fff;
}

.tc-contact-detail {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.tc-contact-meta {
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp--preset--color--accent-4);
}

.tc-contact-value {
	font-size: 0.9375rem;
	color: var(--wp--preset--color--contrast);
}

.tc-contact-link {
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.tc-contact-link:hover { text-decoration: underline; }

.tc-map-wrap {
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 4px 32px rgba(0,0,0,.1);
}

.tc-map-wrap iframe {
	display: block;
	width: 100%;
}

/* ── cta-with-image ───────────────────────────────────────────────────────── */

.tc-cta-image {
	border-radius: 16px;
	overflow: hidden;
}

.tc-cta-image img {
	width: 100%;
	height: auto;
	display: block;
}

/* ── pricing-toggle ───────────────────────────────────────────────────────── */

.tc-pt-toggle-row {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	margin-bottom: 48px;
}

.tc-pt-label {
	font-size: 0.9375rem;
	font-weight: 500;
	color: var(--wp--preset--color--accent-4);
}

.tc-pt-save {
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	padding: 2px 7px;
	border-radius: 20px;
	margin-left: 6px;
	vertical-align: middle;
}

.tc-pt-switch {
	width: 44px;
	height: 24px;
	border-radius: 12px;
	background: var(--wp--preset--color--accent-4);
	border: none;
	cursor: pointer;
	position: relative;
	transition: background .2s;
	flex-shrink: 0;
}

.tc-pt-switch::after {
	content: '';
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform .2s;
}

.tc-pt-switch[aria-checked="true"] {
	background: var(--wp--preset--color--accent-1);
}

.tc-pt-switch[aria-checked="true"]::after {
	transform: translateX(20px);
}

.tc-pt-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 24px;
	max-width: 960px;
	margin: 0 auto;
}

.tc-pt-card {
	background: var(--wp--preset--color--accent-5);
	border: 1px solid rgba(0,0,0,.06);
	border-radius: 16px;
	padding: 36px 32px;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 0;
}

.tc-pt-featured {
	border-color: var(--wp--preset--color--accent-1);
	background: var(--wp--preset--color--accent-3);
	color: var(--wp--preset--color--base);
}

.tc-pt-badge {
	position: absolute;
	top: -13px;
	left: 50%;
	transform: translateX(-50%);
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	font-size: 0.6875rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	padding: 4px 14px;
	border-radius: 20px;
	white-space: nowrap;
}

.tc-pt-plan-name {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .1em;
	margin: 0 0 8px;
	color: var(--wp--preset--color--accent-4);
}

.tc-pt-featured .tc-pt-plan-name { color: rgba(255,255,255,.7); }

.tc-pt-price-block { margin-bottom: 8px; }

.tc-pt-monthly-price,
.tc-pt-annual-price {
	font-size: 2.5rem;
	font-weight: 800;
	line-height: 1;
	font-family: var(--wp--preset--font-family--syne), sans-serif;
}

.tc-pt-annual-price { display: none; }

.tc-pt-period {
	font-size: 0.875rem;
	font-weight: 400;
	margin-left: 2px;
}

.tc-pt-desc {
	font-size: 0.875rem;
	color: var(--wp--preset--color--accent-4);
	margin: 0 0 24px;
}

.tc-pt-featured .tc-pt-desc { color: rgba(255,255,255,.7); }

.tc-pt-features {
	list-style: none;
	padding: 0;
	margin: 0 0 28px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	flex: 1;
}

.tc-pt-features li {
	font-size: 0.9375rem;
	padding-left: 24px;
	position: relative;
}

.tc-pt-features li::before {
	content: '✓';
	position: absolute;
	left: 0;
	color: var(--wp--preset--color--accent-1);
	font-weight: 700;
}

.tc-pt-featured .tc-pt-features li::before { color: #fff; }

.tc-pt-cta {
	display: block;
	text-align: center;
	padding: 13px 24px;
	border-radius: 8px;
	font-weight: 600;
	font-size: 0.9375rem;
	text-decoration: none;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	transition: opacity .15s;
}

.tc-pt-cta:hover { opacity: .85; }
.tc-pt-featured .tc-pt-cta { background: #fff; color: var(--wp--preset--color--accent-1); }

/* JS-controlled annual state */
.tc-pt-annual .tc-pt-monthly-price { display: none; }
.tc-pt-annual .tc-pt-annual-price  { display: block; }

/* ── comparison-table ─────────────────────────────────────────────────────── */

.tc-comparison-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.tc-comparison-table {
	width: 100%;
	border-collapse: collapse;
	min-width: 560px;
}

.tc-comparison-table th,
.tc-comparison-table td {
	padding: 14px 18px;
	text-align: center;
	font-size: 0.9375rem;
	border-bottom: 1px solid rgba(0,0,0,.06);
}

.tc-comparison-table th:first-child,
.tc-comparison-table td:first-child {
	text-align: left;
	font-weight: 500;
}

.tc-comparison-table thead th {
	font-size: 0.8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--wp--preset--color--accent-4);
	background: var(--wp--preset--color--accent-5);
	padding-top: 18px;
	padding-bottom: 18px;
}

.tc-ct-us {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	color: var(--wp--preset--color--accent-1) !important;
}

.tc-ct-us-col {
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 5%, transparent);
}

.tc-comparison-table tr:hover td {
	background: var(--wp--preset--color--accent-5);
}

.tc-ct-check { color: var(--wp--preset--color--accent-1); font-weight: 700; }
.tc-ct-cross  { color: #ef4444; }

.tc-split-form {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.tc-split-submit {
	display: block;
	width: 100%;
	text-align: center;
	margin-top: 4px;
}

.tc-split-note {
	font-size: 0.8125rem;
	opacity: 0.55;
	text-align: center;
	margin: 0;
}

.tc-split-form .tc-form-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.tc-split-form label {
	font-size: 0.8125rem;
	font-weight: 600;
	opacity: 0.7;
}

.tc-split-form input[type="text"],
.tc-split-form input[type="email"],
.tc-split-form input[type="tel"],
.tc-split-form textarea {
	width: 100%;
	padding: 10px 14px;
	background: var(--wp--preset--color--base);
	border: 1px solid rgba(128, 128, 128, 0.25);
	border-radius: 8px;
	color: var(--wp--preset--color--contrast);
	font-size: 0.9375rem;
	font-family: inherit;
	transition: border-color 0.15s;
	box-sizing: border-box;
}

.tc-split-form input[type="text"]:focus,
.tc-split-form input[type="email"]:focus,
.tc-split-form input[type="tel"]:focus,
.tc-split-form textarea:focus {
	outline: 2px solid var(--wp--preset--color--accent-1);
	outline-offset: 0;
	border-color: var(--wp--preset--color--accent-1);
}

@media (max-width: 768px) {
	.tc-cta-split-inner {
		gap: 40px;
	}
}

/* ============================================================
   PROCESS TIMELINE
   Vertical connected timeline with numbered circles.
   ============================================================ */

.tc-timeline {
	max-width: 680px;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
}

.tc-timeline-item {
	display: flex;
	gap: 28px;
	position: relative;
}

.tc-timeline-item:not(:last-child)::before {
	content: '';
	position: absolute;
	left: 19px;
	top: 44px;
	width: 2px;
	height: calc(100% - 4px);
	background: var(--wp--preset--color--accent-1);
	opacity: 0.2;
}

.tc-timeline-node {
	flex-shrink: 0;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1;
}

.tc-timeline-num {
	color: #fff;
	font-weight: 700;
	font-size: 0.875rem;
}

.tc-timeline-content {
	padding-bottom: 48px;
	padding-left: 1.25rem;
	flex: 1;
}

.tc-timeline-item:last-child .tc-timeline-content { padding-bottom: 0; }

.tc-timeline-title {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 6px 0 8px;
	line-height: 1.3;
}

.tc-timeline-desc {
	font-size: 0.9375rem;
	line-height: 1.65;
	opacity: 0.72;
	margin: 0;
}

.tc-timeline-duration {
	display: inline-block;
	margin-top: 10px;
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	background: color-mix(in srgb, var(--wp--preset--color--accent-1) 10%, transparent);
	padding: 3px 10px;
	border-radius: 4px;
}

/* ============================================================
   SERVICES LIST
   Borderless icon + text list. Two-column grid, hover highlight.
   ============================================================ */

.tc-services-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

.tc-services-list-item {
	display: flex;
	gap: 20px;
	align-items: flex-start;
	padding: 28px 20px;
	border-bottom: 1px solid color-mix(in srgb, currentColor 8%, transparent);
	transition: background 0.2s ease;
	border-radius: 8px;
}

.tc-services-list-item:hover {
	background: var(--wp--preset--color--accent-5);
}

.tc-sl-icon {
	flex-shrink: 0;
	width: 44px;
	height: 44px;
	border-radius: 12px;
	border: 1.5px solid var(--wp--preset--color--accent-1);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 2px;
}

.tc-sl-icon svg {
	width: 20px;
	height: 20px;
	stroke: var(--wp--preset--color--accent-1);
	fill: none;
}

.tc-sl-heading {
	font-size: 1.0625rem;
	font-weight: 700;
	margin: 0 0 6px;
	line-height: 1.3;
}

.tc-sl-text {
	font-size: 0.9375rem;
	line-height: 1.6;
	opacity: 0.7;
	margin: 0 0 8px;
}

.tc-sl-link {
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--accent-1);
	text-decoration: none;
}

.tc-sl-link:hover { text-decoration: underline; }

/* ============================================================
   REVIEW AGGREGATE
   Big score display + mini review card grid.
   ============================================================ */

.tc-ra-wrap { text-align: center; }

.tc-ra-score-block { margin-bottom: 32px; }

.tc-ra-number {
	display: block;
	font-size: clamp(3rem, 6vw, 5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

.tc-ra-stars {
	font-size: 1.75rem;
	color: var(--wp--preset--color--accent-1);
	letter-spacing: 4px;
	margin: 10px 0 6px;
}

.tc-ra-label {
	font-size: 0.9375rem;
	opacity: 0.6;
	margin: 0;
}

.tc-ra-heading {
	font-size: clamp(1.5rem, 3vw, 2.25rem);
	font-weight: 800;
	margin: 0 0 12px;
}

.tc-ra-sub {
	font-size: 1.0625rem;
	opacity: 0.7;
	margin: 0 0 48px;
}

.tc-review-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 20px;
	text-align: left;
}

.tc-review-card {
	background: var(--wp--preset--color--accent-5);
	border-radius: 14px;
	padding: 24px;
}

.tc-review-stars {
	color: var(--wp--preset--color--accent-1);
	font-size: 0.9375rem;
	margin: 0 0 12px;
	letter-spacing: 2px;
}

.tc-review-quote {
	font-size: 0.9375rem;
	line-height: 1.65;
	margin: 0 0 16px;
	font-style: italic;
	opacity: 0.9;
}

.tc-review-author {
	font-size: 0.875rem;
	margin: 0;
	font-weight: 600;
}

.tc-review-platform {
	font-weight: 400;
	opacity: 0.6;
}

/* ============================================================
   PRICING SIMPLE
   Single-tier pricing card. Centred, with feature list.
   ============================================================ */

.tc-ps-card {
	max-width: 520px;
	margin: 0 auto;
	background: var(--wp--preset--color--accent-5);
	border-radius: 20px;
	padding: 48px;
	text-align: center;
	border-top: 4px solid var(--wp--preset--color--accent-1);
}

.tc-ps-badge {
	display: inline-block;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	padding: 4px 14px;
	border-radius: 100px;
	margin: 0 0 24px;
}

.tc-ps-price-row {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 8px;
	margin-bottom: 16px;
}

.tc-ps-price {
	font-size: clamp(2.5rem, 5vw, 3.5rem);
	font-weight: 800;
	line-height: 1;
	color: var(--wp--preset--color--accent-1);
}

.tc-ps-period {
	font-size: 1rem;
	opacity: 0.6;
}

.tc-ps-desc {
	font-size: 1.0625rem;
	opacity: 0.7;
	margin: 0 0 28px;
	line-height: 1.6;
}

.tc-ps-features {
	list-style: none;
	padding: 0;
	margin: 0 0 36px;
	text-align: left;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.tc-ps-features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 0.9375rem;
	line-height: 1.5;
}

.tc-ps-features li::before {
	content: '✓';
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	background: var(--wp--preset--color--accent-1);
	color: #fff;
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0.7rem;
	font-weight: 700;
	margin-top: 2px;
}

.tc-ps-cta {
	display: block;
	width: 100%;
	text-align: center;
	margin-bottom: 16px;
}

.tc-ps-note {
	font-size: 0.8125rem;
	opacity: 0.5;
	margin: 0;
}

/* FOOTER MINIMAL */
.tc-footer-minimal .tc-fm-inner {
	text-align: center;
	max-width: 680px;
	margin: 0 auto;
}

.tc-footer-minimal .tc-fm-brand {
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 8px;
}

.tc-footer-minimal .tc-fm-tagline {
	opacity: 0.6;
	margin: 0 0 28px;
}

.tc-footer-minimal .tc-fm-nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	list-style: none;
	padding: 0;
	gap: 8px 24px;
	margin-bottom: 24px;
}

.tc-footer-minimal .tc-fm-link {
	opacity: 0.75;
	text-decoration: none;
	font-size: 0.9375rem;
	transition: opacity 0.15s;
}

.tc-footer-minimal .tc-fm-link:hover { opacity: 1; }

.tc-footer-minimal .tc-fm-social {
	display: flex;
	justify-content: center;
	gap: 16px;
	margin-bottom: 28px;
}

.tc-footer-minimal .tc-fm-divider {
	border: none;
	border-top: 1px solid currentColor;
	opacity: 0.12;
	margin: 0 0 20px;
}

.tc-footer-minimal .tc-fm-copy {
	opacity: 0.45;
	font-size: 0.8125rem;
	margin: 0;
}

.tc-footer-minimal .tc-social-icon[href=""] { display: none; }

/* Image block border radius — applied via className to avoid WP block validator mismatch */
.tc-img-rounded { border-radius: 8px; overflow: hidden; }

/* ── Accessibility: skip link ─────────────────────────────────────── */
.skip-link {
	position: absolute;
	top: -9999em;
	left: 1.5rem;
	z-index: 999999;
	padding: 10px 24px;
	background-color: #fff;
	color: #000 !important;
	font-size: 1rem;
	font-weight: 700;
	text-decoration: none;
	border-radius: 6px;
	white-space: nowrap;
	height: auto;
	width: auto;
	overflow: visible;
	clip: auto !important;
	clip-path: none;
}
.skip-link:focus {
	top: 6px;
	left: 1.5rem;
	color: #000 !important;
	clip: auto !important;
	clip-path: none;
	height: auto;
	width: auto;
	overflow: visible;
	outline: 3px solid #000;
	outline-offset: 2px;
}

/* ── Accessibility: visible keyboard focus indicators ──────────────── */
/* :focus baseline — always show for keyboard users                    */
a:focus,
button:focus,
input:focus,
select:focus,
textarea:focus,
[tabindex="0"]:focus,
.wp-block-button__link:focus,
.wp-block-navigation a:focus,
.wp-block-navigation__submenu-toggle:focus,
.wp-block-navigation-item__content:focus {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}

/* Remove outline for pointer/mouse users                              */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible),
input:focus:not(:focus-visible),
select:focus:not(:focus-visible),
textarea:focus:not(:focus-visible),
[tabindex="0"]:focus:not(:focus-visible),
.wp-block-button__link:focus:not(:focus-visible),
.wp-block-navigation a:focus:not(:focus-visible),
.wp-block-navigation__submenu-toggle:focus:not(:focus-visible),
.wp-block-navigation-item__content:focus:not(:focus-visible) {
	outline: none;
}

/* :focus-visible explicit support                                     */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex="0"]:focus-visible,
.wp-block-button__link:focus-visible,
.wp-block-navigation a:focus-visible,
.wp-block-navigation__submenu-toggle:focus-visible,
.wp-block-navigation-item__content:focus-visible {
	outline: 3px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}