/*
Theme Name: WebForth
Theme URI: https://webforth.com/
Author: WebForth
Author URI: https://webforth.com/
Description: WebForth — a native WordPress Full Site Editing block theme. Growth is a system: acquire, measure, optimise, scale. Editorial, premium, fully editable in the Site Editor.
Requires at least: 6.5
Tested up to: 6.8
Requires PHP: 8.0
Version: 1.4.11
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: webforth
Tags: full-site-editing, block-patterns, editor-style, responsive, accessibility-ready, custom-colors, custom-menu
*/

/* ============================================================
   WEBFORTH — custom CSS (used only where blocks/theme.json
   cannot express the design). Design tokens come from theme.json.
   Palette: #000000 #FFFFFF #2457FF #F5F5F5 #EAEAEA #666666
   ============================================================ */

/* ---------- Base ---------- */
html {
	scroll-behavior: smooth;
}

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

h1,
h2,
h3 {
	text-wrap: balance;
}

.wf-metric__value,
.wf-case__result {
	font-variant-numeric: tabular-nums;
}

::selection {
	background: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--white);
}

/* Visible, consistent focus for keyboard users */
:where(a, button, input, [tabindex]):focus-visible {
	outline: 3px solid var(--wp--preset--color--cobalt);
	outline-offset: 3px;
	border-radius: 2px;
}

/* ---------- Eyebrow ---------- */
.wf-eyebrow {
	font-size: var(--wp--preset--font-size--eyebrow);
	font-weight: 700;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	line-height: 1.4;
}

.wf-eyebrow--with-rule {
	display: block;
	position: relative;
	padding-left: 3.4rem;
}

.wf-eyebrow--with-rule::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.68em;
	width: 2.5rem;
	height: 2px;
	background: var(--wp--preset--color--cobalt);
}

/* ---------- Buttons: restrained cobalt interaction ---------- */
.wp-element-button,
.wp-block-button__link {
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.wp-block-button.is-style-wf-primary .wp-element-button,
.wp-block-button.is-style-wf-primary .wp-block-button__link {
	background-color: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--black);
}

.wp-block-button.is-style-wf-primary .wp-element-button:hover,
.wp-block-button.is-style-wf-primary .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cobalt);
	border-color: var(--wp--preset--color--cobalt);
	color: #fff;
}

.wp-block-button.is-style-wf-outline .wp-element-button,
.wp-block-button.is-style-wf-outline .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--black);
}

.wp-block-button.is-style-wf-outline .wp-element-button:hover,
.wp-block-button.is-style-wf-outline .wp-block-button__link:hover {
	border-color: var(--wp--preset--color--cobalt);
	color: var(--wp--preset--color--cobalt);
}

.wp-block-button.is-style-wf-white .wp-element-button,
.wp-block-button.is-style-wf-white .wp-block-button__link {
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--black);
	border: 1px solid var(--wp--preset--color--white);
}

.wp-block-button.is-style-wf-white .wp-element-button:hover,
.wp-block-button.is-style-wf-white .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cobalt);
	border-color: var(--wp--preset--color--cobalt);
	color: #fff;
}

/* ---------- Buttons: restrained cobalt interaction ---------- */
/* NOTE: no backdrop-filter here — it would become the containing block
   for the fixed mobile menu overlay and collapse it to header height. */
.wf-header {
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
	background: var(--wp--preset--color--white);
	overflow: visible;
}

/* NOTE: core drops padding attributes on the flex inner group at render,
   so header breathing room lives here and not in the template part. */
.wf-header > .alignwide {
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
}

.wf-header .wp-block-buttons {
	flex-shrink: 0;
}

.wf-header .wp-block-navigation a {
	font-size: 0.95rem;
	font-weight: 500;
}

/* Header CTA sizing lives here (not inline) so it can adapt per breakpoint */
.wf-header .wp-block-button__link {
	padding: 0.7rem 1.25rem;
	font-size: 0.85rem;
	white-space: nowrap;
}

/* Current page indicator: cobalt text plus the signature 2px rule */
.wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
	color: var(--wp--preset--color--cobalt);
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 6px;
}

/* Dropdown panel: flat card language — hairline border, quiet shadow */
.wp-block-navigation .has-child .wp-block-navigation__submenu-container {
	border: 1px solid var(--wp--preset--color--border-grey);
	border-radius: 2px;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
	min-width: 17rem;
	padding: 0.5rem;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 0.65rem 1rem;
	font-size: 0.92rem;
	font-weight: 500;
	border-radius: 2px;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.wp-block-navigation .has-child .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--light-grey);
	color: var(--wp--preset--color--cobalt);
}

/* Pillar group parents read as labels */
.wp-block-navigation__submenu-container > .has-child > .wp-block-navigation-item__content {
	font-size: 0.78rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--text-grey);
}

/* Mobile overlay menu: large editorial touch targets */
.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	gap: 0.25rem;
}

.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 1.75rem;
	font-weight: 750;
	letter-spacing: -0.02em;
	padding: 0.6rem 0;
}

/* ---------- Editorial service blocks (§14: no icon-card grids) ---------- */
.wf-svc {
	border-top: 2px solid var(--wp--preset--color--black);
	padding: 1.75rem 0 2.25rem;
	display: grid;
	gap: 0.9rem;
}

.wf-svc__index {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.22em;
	color: var(--wp--preset--color--cobalt);
}

.wf-svc__title {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1.02;
	margin: 0;
	text-wrap: balance;
}

.wf-svc__title a {
	text-decoration: none;
}

.wf-svc:hover .wf-svc__title,
.wf-svc:hover .wf-svc__title a {
	color: var(--wp--preset--color--cobalt);
}

.wf-svc__title,
.wf-svc__title a {
	transition: color 0.25s ease;
}

.wf-svc__desc {
	color: var(--wp--preset--color--text-grey);
	font-size: var(--wp--preset--font-size--body-large);
	margin: 0;
	max-width: 44rem;
}

.wf-svc__tech {
	font-size: 0.95rem;
	color: var(--wp--preset--color--text-grey);
	margin: 0;
}

.wf-svc__link {
	font-weight: 600;
	margin: 0;
}

.wf-svc__link a {
	text-decoration: none;
}

.wf-svc__link a:hover {
	color: var(--wp--preset--color--cobalt);
}

/* Technology groups: quiet lists, cobalt on interaction only */
.wf-tech {
	border-top: 1px solid var(--wp--preset--color--border-grey);
	padding-top: 1rem;
}

.wf-tech__items {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	font-size: 1rem;
}

.wf-tech__items li {
	display: inline;
}

.wf-tech__items li + li::before {
	content: " · ";
	color: var(--wp--preset--color--text-grey);
}

/* ---------- Inner-page prose rhythm ---------- */
/* NOTE: core drops bottom-padding attributes on alignwide hero groups at
   render (same quirk as the header), so hero separation lives here. */
.wf-service-hero,
.wf-page-hero {
	padding-bottom: var(--wp--preset--spacing--60);
}

.wf-service-lede {
	max-width: 44rem;
}

.wf-prose > * + h2 {
	margin-block-start: 3rem;
}

.wf-prose > * + h3 {
	margin-block-start: 2rem;
}

/* Air after headings: flow gap alone reads cramped under display sizes.
   (Adjacent margins collapse, so this value alone sets the gap.) */
.wf-prose > h2:not(:last-child),
.wf-prose > h3:not(:last-child) {
	margin-block-end: var(--wp--preset--spacing--40);
}

.wf-prose h2 {
	letter-spacing: -0.025em;
}

.wf-prose li + li {
	margin-top: 0.5rem;
}

/* FAQ details: editorial disclosure rows */
.wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
	padding: 1.1rem 0;
}

.wp-block-details summary {
	cursor: pointer;
	font-weight: 650;
	font-size: 1.05rem;
	letter-spacing: -0.01em;
	transition: color 0.2s ease;
}

.wp-block-details summary:hover {
	color: var(--wp--preset--color--cobalt);
}

.wp-block-details summary::marker {
	color: var(--wp--preset--color--cobalt);
}

.wp-block-details p {
	color: var(--wp--preset--color--text-grey);
}

/* ---------- Service hero contact card ---------- */
.wf-contact-card {
	border: 1px solid var(--wp--preset--color--border-grey);
	border-top: 2px solid var(--wp--preset--color--black);
	padding: 1.75rem;
	background: var(--wp--preset--color--white);
}

.wf-contact-card .wp-block-button {
	width: 100%;
}

/* ---------- Breadcrumb ---------- */
.wf-crumb {
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--text-grey);
}

.wf-crumb a {
	text-decoration: none;
	color: var(--wp--preset--color--text-grey);
}

.wf-crumb a:hover {
	color: var(--wp--preset--color--cobalt);
}

.wf-crumb [aria-current="page"] {
	color: var(--wp--preset--color--black);
}

/* ---------- Sticky service sidebar ---------- */
.wf-service-side {
	position: sticky;
	top: 6rem;
}

@media (max-width: 781px) {
	.wf-service-side {
		position: static;
	}
}

/* ---------- Marquee ticker ---------- */
.wf-marquee {
	overflow: clip;
}

.wf-marquee__track {
	display: flex;
	width: max-content;
	gap: 0;
	animation: wf-marquee-scroll 32s linear infinite;
}

.wf-marquee__track > * {
	margin-block-start: 0;
}

.wf-marquee:hover .wf-marquee__track {
	animation-play-state: paused;
}

.wf-marquee__half {
	flex: none;
	white-space: nowrap;
	margin: 0;
	font-size: clamp(1.4rem, 1rem + 1.8vw, 2.25rem);
	font-weight: 800;
	letter-spacing: -0.01em;
	line-height: 1.2;
	color: var(--wp--preset--color--white);
}

.wf-marquee__half em {
	font-style: normal;
	color: var(--wp--preset--color--cobalt);
}

@keyframes wf-marquee-scroll {
	to {
		transform: translateX(-50%);
	}
}

/* ---------- Scroll progress + scrollbar ---------- */
.wf-progress {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--cobalt);
	transform: scaleX(0);
	transform-origin: 0 50%;
	z-index: 100000;
}

html {
	scrollbar-width: thin;
	scrollbar-color: #000000 #ffffff;
}

@media (hover: hover) and (pointer: fine) {
	::-webkit-scrollbar {
		width: 10px;
	}

	::-webkit-scrollbar-track {
		background: #ffffff;
	}

	::-webkit-scrollbar-thumb {
		background: #000000;
		border: 2px solid #ffffff;
	}

	::-webkit-scrollbar-thumb:hover {
		background: var(--wp--preset--color--cobalt);
	}
}

/* ---------- Header scroll state + back-to-top ---------- */
.wf-header.is-scrolled {
	box-shadow: 0 10px 32px rgba(0, 0, 0, 0.09);
}

.wf-top {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	width: 46px;
	height: 46px;
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--black);
	border-radius: 2px;
	font-size: 1.15rem;
	line-height: 1;
	cursor: pointer;
	opacity: 0;
	visibility: hidden;
	transform: translateY(10px);
	transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s, background-color 0.25s ease, border-color 0.25s ease;
	z-index: 9990;
}

.wf-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.wf-top:hover {
	background: var(--wp--preset--color--cobalt);
	border-color: var(--wp--preset--color--cobalt);
}

/* ---------- Footer giant wordmark ---------- */
.wf-giant {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	flex-wrap: nowrap;
	width: 100%;
	overflow: hidden;
	font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-size: clamp(2.75rem, 0.5rem + 11.5vw, 10.5rem);
	font-weight: 900;
	letter-spacing: -0.04em;
	line-height: 0.82;
	margin: 0;
	user-select: none;
	cursor: default;
	/* New-age agency outline: transparent fill, hairline white stroke */
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.85);
}

.wf-giant span {
	display: inline-block;
	line-height: inherit;
	color: inherit;
	-webkit-text-stroke: inherit;
	transition: color 0.35s ease, -webkit-text-stroke-color 0.35s ease;
}

/* Hover: letters fill solid white — flat, single transition */
.wf-giant:hover span {
	color: var(--wp--preset--color--white);
	-webkit-text-fill-color: var(--wp--preset--color--white);
	-webkit-text-stroke-color: transparent;
}

/* Hairline stroke stays delicate on small screens */
@media (max-width: 600px) {
	.wf-giant {
		-webkit-text-stroke-width: 1px;
	}
}

/* ---------- Closing link (pre-footer typographic CTA) ---------- */
.wf-close-link {
	font-family: "Inter Tight", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	font-weight: 900;
	letter-spacing: -0.03em;
	line-height: 1.02;
	margin: 0;
	text-wrap: balance;
}

.wf-close-link a {
	text-decoration: none;
}

.wf-close-link .wf-close-arrow {
	display: inline-block;
	margin-left: 0.15em;
	color: var(--wp--preset--color--cobalt);
	transition: transform 0.3s ease;
}

.wf-close-link a:hover .wf-close-arrow {
	transform: translateX(0.2em);
}

/* ---------- Editorial pull quotes ---------- */
.wp-block-quote {
	border-left: 2px solid var(--wp--preset--color--cobalt);
	padding-left: 1.5rem;
	margin-top: 2rem;
	margin-bottom: 2rem;
}

.wp-block-quote p {
	text-wrap: pretty;
}

/* ---------- Related service links ---------- */
.wf-rel-links p {
	margin: 0 0 0.45rem;
}

.wf-rel-links a {
	font-weight: 600;
	text-decoration: none;
}

.wf-rel-links a:hover {
	color: var(--wp--preset--color--cobalt);
}

/* Footer reuses the (black) Site Logo — invert it for the black footer */
.wf-footer .wp-block-site-logo img {
	filter: invert(1);
}

.wf-footer-links {
	line-height: 2;
}

.wf-footer-links a,
.wf-footer .wp-block-latest-posts a {
	text-decoration: none;
}

.wf-footer-links a:hover,
.wf-footer .wp-block-latest-posts a:hover {
	color: var(--wp--preset--color--cobalt);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.wf-footer .wp-block-latest-posts {
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
}

.wf-footer .wp-block-latest-posts li {
	margin-bottom: 0.6rem;
}

.wf-footer .wp-block-latest-posts li:last-child {
	margin-bottom: 0;
}

/* Anchored sections must clear the sticky header */
#work,
#capabilities,
#approach,
#insights,
#about {
	scroll-margin-top: 5.5rem;
}

/* ---------- Hero ---------- */
.wf-hero-title {
	letter-spacing: -0.035em;
	line-height: 0.98;
	text-wrap: balance;
}

.wf-system {
	border: 1px solid var(--wp--preset--color--border-grey);
	background: var(--wp--preset--color--white);
}

.wf-system-step {
	display: block;
	padding: 1.1rem 1.35rem;
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
	transition: background-color 0.3s ease, color 0.3s ease;
}

.wf-system-step:last-child {
	border-bottom: 0;
}

.wf-system-step > * {
	margin: 0;
}

.wf-system-step > * + * {
	margin-top: 0.25rem;
}

.wf-system-step__name {
	font-weight: 800;
	letter-spacing: 0.16em;
	font-size: 0.95rem;
}

.wf-system-step__tags {
	font-size: 0.82rem;
	color: var(--wp--preset--color--text-grey);
}

.wf-system-step--active {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wf-system-step--active .wf-system-step__tags {
	color: rgba(255, 255, 255, 0.72);
}

/* Hero system hover: rows ignite toward the active state */
.wf-system-step:not(.wf-system-step--active):hover {
	background: var(--wp--preset--color--black);
	color: var(--wp--preset--color--white);
}

.wf-system-step:not(.wf-system-step--active):hover .wf-system-step__tags {
	color: rgba(255, 255, 255, 0.72);
}

.wf-system-arrow {
	text-align: center;
	color: var(--wp--preset--color--cobalt);
	font-size: 1.1rem;
	line-height: 1;
	padding: 0.15rem 0;
	transition: transform 0.3s ease;
}

.wf-system-step:hover + .wf-system-arrow {
	transform: translateY(3px);
}

.wf-system-caption {
	border-top: 1px solid var(--wp--preset--color--border-grey);
}

/* ---------- Proof ---------- */
.wf-metric__value {
	font-size: var(--wp--preset--font-size--metric);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1;
}

.wf-metric__value .wf-plus {
	color: var(--wp--preset--color--cobalt);
}

.wf-rule {
	border-top: 1px solid var(--wp--preset--color--border-grey);
}

/* ---------- Growth system signature rows ---------- */
.wf-stage {
	border-top: 1px solid var(--wp--preset--color--border-grey);
	padding: 2.25rem 0;
	display: grid;
	grid-template-columns: 5.5rem 1fr;
	gap: 1.5rem;
	transition: background-color 0.25s ease;
}

.wf-stage:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
}

.wf-stage:hover {
	background: var(--wp--preset--color--light-grey);
}

.wf-stage__num {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--cobalt);
}

.wf-stage__title {
	font-size: var(--wp--preset--font-size--h-2);
	font-weight: 750;
	letter-spacing: -0.025em;
	line-height: 1;
	margin: 0 0 0.75rem;
}

.wf-stage__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem 1.5rem;
	color: var(--wp--preset--color--text-grey);
	font-size: 1rem;
}

.wf-stage__list li {
	position: relative;
	padding-left: 1rem;
}

.wf-stage__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.62em;
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--black);
}

/* Keep editorial rows at a readable measure on wide screens */
.wf-stage p {
	max-width: 64ch;
}

/* ---------- Capabilities ---------- */
.wf-cap {
	border-top: 2px solid var(--wp--preset--color--black);
	padding-top: 1.25rem;
}

.wf-cap__items {
	list-style: none;
	margin: 1rem 0 0;
	padding: 0;
}

.wf-cap__items li {
	padding: 0.65rem 0;
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
	font-size: 1rem;
}

.wf-cap__items li:last-child {
	border-bottom: 0;
}

/* ---------- Case studies ---------- */
.wf-case {
	border-top: 1px solid var(--wp--preset--color--border-grey);
	padding: 2.5rem 0;
	display: grid;
	gap: 1.25rem;
}

.wf-case:last-child {
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
}

.wf-case__result {
	font-size: var(--wp--preset--font-size--metric);
	font-weight: 750;
	letter-spacing: -0.03em;
	line-height: 1;
}

.wf-case__result em {
	font-style: normal;
	color: var(--wp--preset--color--cobalt);
}

.wf-tag {
	display: inline-block;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	border: 1px solid var(--wp--preset--color--border-grey);
	padding: 0.4rem 0.7rem;
	background: var(--wp--preset--color--white);
}

/* ---------- Approach ---------- */
.wf-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 0;
	border: 1px solid var(--wp--preset--color--border-grey);
}

.wf-step {
	padding: 1.75rem;
	border-right: 1px solid var(--wp--preset--color--border-grey);
	position: relative;
}

.wf-step:last-child {
	border-right: 0;
}

.wf-step__num {
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--cobalt);
}

.wf-step__bar {
	height: 3px;
	background: var(--wp--preset--color--border-grey);
	margin: 1rem 0 1.25rem;
	position: relative;
	overflow: hidden;
}

.wf-step__bar::after {
	content: "";
	position: absolute;
	inset: 0;
	width: 25%;
	background: var(--wp--preset--color--cobalt);
}

/* Progressive fill: signal builds toward scale */
.wf-step:nth-child(2) .wf-step__bar::after {
	width: 50%;
}

.wf-step:nth-child(3) .wf-step__bar::after {
	width: 75%;
}

.wf-step:nth-child(4) .wf-step__bar::after {
	width: 100%;
}

/* ---------- Journal cards ---------- */
.wp-block-post-template-is-layout-grid.columns-3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

.wf-card img {
	transition: transform 0.5s ease;
}

.wf-card:hover img {
	transform: scale(1.03);
}

.wf-card .wp-block-post-title a {
	text-decoration: none;
}

/* ---------- Reveal motion (JS enhances; CSS gates) ----------
   Scoped off the editor canvas: content must always be visible
   while editing in the Site Editor. */
body:not(.editor-styles-wrapper) .wf-reveal {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}

body:not(.editor-styles-wrapper) .wf-reveal.is-visible {
	opacity: 1;
	transform: none;
}

/* ---------- Responsive ---------- */

/* Tablet portrait: system visual recomposes into a 2-up grid.
   Desktop keeps the vertical chain, mobile the stacked list. */
@media (min-width: 601px) and (max-width: 781px) {
	.wf-system {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: var(--wp--preset--color--border-grey);
		border: 1px solid var(--wp--preset--color--border-grey);
	}

	.wf-system > * {
		margin: 0;
	}

	.wf-system-step {
		border: 0;
		background: var(--wp--preset--color--white);
	}

	.wf-system-step--active {
		background: var(--wp--preset--color--black);
		color: var(--wp--preset--color--white);
	}

	.wf-system-arrow {
		display: none;
	}

	.wf-system-caption {
		grid-column: 1 / -1;
		background: var(--wp--preset--color--white);
		border-top: 0;
	}
}

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

	.wf-steps {
		grid-template-columns: 1fr 1fr;
	}

	.wf-step:nth-child(2) {
		border-right: 0;
	}

	.wf-step:nth-child(1),
	.wf-step:nth-child(2) {
		border-bottom: 1px solid var(--wp--preset--color--border-grey);
	}

	.wf-stage {
		grid-template-columns: 1fr;
		gap: 0.75rem;
	}
}

@media (max-width: 1024px) {
	/* Footer sitemap: five squeezed columns recompose into 3 + 2 */
	.wf-footer-map {
		flex-wrap: wrap;
	}

	.wf-footer-map > .wp-block-column {
		flex-basis: 30% !important;
		flex-grow: 1;
	}

	.wf-header .wp-block-buttons {
		display: none;
	}
}

@media (max-width: 600px) {
	/* Mobile keeps a usable CTA: mark only, compact button */
	.wf-header .wp-block-site-title {
		display: none;
	}

	.wf-header .wp-block-buttons {
		display: flex;
	}

	.wf-header .wp-block-button__link {
		padding: 0.7rem 1rem;
		font-size: 0.8rem;
	}

	.wp-block-post-template-is-layout-grid.columns-3 {
		grid-template-columns: 1fr;
	}

	.wf-steps {
		grid-template-columns: 1fr;
	}

	.wf-step {
		border-right: 0;
		border-bottom: 1px solid var(--wp--preset--color--border-grey);
	}

	.wf-step:last-child {
		border-bottom: 0;
	}
}

/* ---------- About ---------- */
.wf-about-facts {
	border-top: 2px solid var(--wp--preset--color--black);
	background: var(--wp--preset--color--light-grey);
	border-bottom: 1px solid var(--wp--preset--color--border-grey);
	border-left: 1px solid var(--wp--preset--color--border-grey);
	border-right: 1px solid var(--wp--preset--color--border-grey);
}

.wf-about-fact {
	border-top: 1px solid var(--wp--preset--color--border-grey);
	padding-top: 1rem;
}

.wf-about-fact:first-of-type {
	border-top: 0;
	padding-top: 0;
}

.wf-about-fact strong {
	font-size: 0.75rem;
	letter-spacing: 0.18em;
	color: var(--wp--preset--color--cobalt);
}

@media (max-width: 781px) {
	/* Core already stacks the columns here; this only restores
	   breathing room between the copy and the facts card. */
	.wf-about-facts {
		margin-top: 0.5rem;
	}
}

/* ---------- Dotnp full-bleed ---------- */
.wp-block-group.wf-dotnp-inner.alignfull {
	padding-left: var(--wp--preset--spacing--60);
	padding-right: var(--wp--preset--spacing--60);
}

.wf-dotnp-lede {
	max-width: 44rem;
}

/* Equal-height panels: the card fills its column, content centered */
.wf-dotnp-side {
	display: flex;
}

.wf-dotnp-card {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

/* Full-bleed utility: core neutralises .alignfull breakout inside nested
   global-padding containers (and root padding here is 0-gutter based), so
   sections that must touch the viewport edges use viewport math instead.
   body{overflow-x:clip} already guards against scrollbar-induced overflow.
   The !important outranks core's nested .alignfull margin reset. */
.wf-bleed {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw) !important;
	margin-right: calc(50% - 50vw) !important;
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}

	.wf-reveal {
		opacity: 1;
		transform: none;
	}

	.wf-marquee__track {
		animation: none;
	}

	.wf-giant span {
		transition: none;
	}

	.wf-giant:hover span {
		color: var(--wp--preset--color--white);
		-webkit-text-fill-color: var(--wp--preset--color--white);
		-webkit-text-stroke-color: transparent;
	}

	.wf-top {
		transition: none;
	}
}