/*
Theme Name: FORMA Cleaning Services
Theme URI: https://formafilmdesigns.com/cleaning
Author: FORMA Innovative Film Designs Corp.
Description: Block theme for FORMA Cleaning Services — post-construction and commercial cleaning in Edmonton, Alberta.
Version: 1.0.0
Requires at least: 6.4
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: forma
Tags: full-site-editing, block-patterns, business, one-column, wide-blocks
*/

:root {
	--forma-line: rgba(27, 26, 24, 0.14);
	--forma-line-soft: rgba(27, 26, 24, 0.09);
	--forma-shadow: 0 1px 2px rgba(27, 26, 24, 0.04), 0 10px 28px rgba(27, 26, 24, 0.05);
	--forma-shadow-lift: 0 18px 40px rgba(27, 26, 24, 0.1);
	--forma-header-height: 71px;
}

*,
*::before,
*::after {
	box-sizing: border-box;
}

body {
	-webkit-font-smoothing: antialiased;
	text-wrap: pretty;
}

/* ---------------------------------------------------------------- Page shell */

/* Design pages are built from edge-to-edge bands that carry their own side
   padding, so the main wrapper drops the global gutter rather than having each
   band claw its way back out of it. */
main.wp-block-group.forma-page-main {
	padding-left: 0;
	padding-right: 0;
}

main.wp-block-group.forma-page-main > .entry-content {
	max-width: none;
}

/* ---------------------------------------------------------------- Typography */

.forma-mono,
.forma-eyebrow,
.forma-kicker {
	font-family: var(--wp--preset--font-family--mono);
}

.forma-eyebrow {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 10.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.forma-eyebrow.is-centered {
	justify-content: center;
}

.forma-eyebrow__num {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	font-weight: 600;
	font-size: 10px;
	letter-spacing: 0.1em;
	padding: 4px 7px;
}

.forma-eyebrow__dot {
	width: 9px;
	height: 9px;
	background: var(--wp--preset--color--primary);
	display: block;
	flex: none;
}

.forma-kicker {
	display: block;
	font-size: 10px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
}

.forma-timing {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.1em;
	line-height: 1.6;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
}

/* A light display heading with selected words set in extra bold. */
.forma-display strong,
.forma-display b {
	font-weight: 800;
}

.forma-section-title {
	max-width: 24ch;
	margin: 2rem auto 3rem auto;
	line-height: 0.98;
	letter-spacing: -0.038em;
}

.forma-underline {
	display: inline-block;
	border-bottom: 2px solid var(--wp--preset--color--primary);
	padding-bottom: 6px;
}

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

.forma-header {
	position: sticky;
	top: 0;
	z-index: 60;
	border-bottom: 1px solid rgba(27, 26, 24, 0.1);
}

/* The frosted panel lives on a pseudo-element, not the header itself: a
   backdrop-filter would make the header a containing block and trap the
   navigation block's fixed-position mobile overlay inside it. */
.forma-header::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(14px);
}

.forma-header__lockup {
	display: flex;
	align-items: center;
}

/* The site-logo block ships its own wrapper and fixed width; the lockup is a
   10:1 wordmark, so height follows from the width set on each block. */
.forma-header__lockup .wp-block-site-logo,
.forma-header__lockup .wp-block-site-logo a,
.forma-drawer__head {
	display: flex;
	align-items: center;
}

.forma-header__lockup .wp-block-site-logo img,
.forma-drawer__logo {
	display: block;
	width: 100%;
	height: auto;
}

.forma-drawer__logo {
	width: 160px;
}

.forma-header .wp-block-navigation {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.forma-header .wp-block-navigation .wp-block-navigation-item__content {
	padding: 9px 16px;
	border-radius: 2px;
}

.forma-header .wp-block-navigation .wp-block-navigation-item__content:hover {
	background: rgba(27, 26, 24, 0.05);
}

/* Current page marker — the small blue square from the design. */
.forma-header .wp-block-navigation .wp-block-navigation-item__content[aria-current="page"]::before {
	content: "";
	display: inline-block;
	width: 5px;
	height: 5px;
	margin-right: 8px;
	vertical-align: middle;
	background: var(--wp--preset--color--primary);
}

/* The navigation block collapses into its overlay at 600px; this design swaps
   to the drawer at 900px, alongside the phone number and quote button. */
@media (max-width: 899px) {
	.forma-header .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}

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

/* The menu toggle is a bordered square holding three rules, matching the close
   control in the drawer — not core's bare 24px icon. */
.forma-header .wp-block-navigation__responsive-container-open {
	width: 46px;
	height: 46px;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(27, 26, 24, 0.16);
	border-radius: 2px;
}

.forma-header .wp-block-navigation__responsive-container-open:hover {
	border-color: var(--wp--preset--color--primary);
}

.forma-header .wp-block-navigation__responsive-container-open svg {
	display: none;
}

/* One bar drawn directly, the outer two offset from it by a bar plus the gap. */
.forma-header .wp-block-navigation__responsive-container-open::after {
	content: "";
	width: 20px;
	height: 1.5px;
	background: var(--wp--preset--color--contrast);
	box-shadow:
		0 -6.5px 0 var(--wp--preset--color--contrast),
		0 6.5px 0 var(--wp--preset--color--contrast);
}

/* Above the breakpoint the same container renders as the inline desktop menu,
   so the injected drawer chrome only exists while the overlay is open. */
.forma-header .wp-block-navigation__responsive-container:not(.is-menu-open) .forma-drawer__head,
.forma-header .wp-block-navigation__responsive-container:not(.is-menu-open) .wp-block-template-part {
	display: none;
}

/* Mobile drawer: a panel sliding in from the left over a scrim, rather than the
   full-screen sheet the overlay defaults to. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open {
	padding: 0;
	align-items: stretch;
}

/* Core paints the open overlay white through a five-class selector whenever the
   nav carries no background of its own, so the scrim has to match that weight. */
.forma-header
	.wp-block-navigation:not(.has-background)
	.wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
	background-color: rgba(18, 17, 15, 0.5);
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
	position: relative;
	display: flex;
	flex-direction: column;
	width: min(88vw, 380px);
	max-width: none;
	min-height: 100%;
	margin: 0;
	padding: 22px clamp(20px, 6vw, 32px) 28px;
	background: var(--wp--preset--color--base);
	border-right: 1px solid rgba(27, 26, 24, 0.12);
	box-shadow: 0 0 60px rgba(27, 26, 24, 0.22);
	overflow-y: auto;
}

/* The panel is a full-height column so the contact block can sit on its floor. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	display: flex;
	flex: 1;
	flex-direction: column;
	/* The block's centred layout leaks into the drawer through this custom
	   property and would shrink-wrap every row. */
	align-items: stretch;
	/* Core reserves 56px here to clear the close button; the lockup now sits on
	   that row instead. Its 4px menu gap would also add up between the rows. */
	padding-top: 0;
	gap: 0;
	/* The drawer sits inside <nav>, so it would otherwise inherit the header's
	   mono, uppercase, letter-spaced nav treatment. */
	font-family: var(--wp--preset--font-family--sans);
	font-size: var(--wp--preset--font-size--medium);
	letter-spacing: normal;
	text-transform: none;
}

/* Anchored to the dialog, which already sits inside the panel's padding. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	top: 0;
	right: 0;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(27, 26, 24, 0.16);
	border-radius: 2px;
	color: var(--wp--preset--color--contrast);
}

/* The design's close control is a "×" glyph, not an icon — core's bold 18×18
   SVG reads much heavier than the reference's light, small character. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close svg {
	display: none;
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: flex;
	align-items: center;
	justify-content: center;
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close::after {
	content: "×";
	font-size: 18px;
	line-height: 1;
	color: var(--wp--preset--color--contrast);
}

.forma-drawer__head {
	min-height: 40px;
	padding-right: 52px;
}

/* The injected part wraps the button and contact block; it has to be a growing
   column of its own so the contact block can claim the leftover height. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-template-part {
	display: flex;
	flex: 1;
	flex-direction: column;
}

.forma-drawer__cta {
	margin-bottom: 28px;
}

.forma-drawer__cta .wp-block-button__link {
	width: 100%;
	padding: 17px;
	font-size: 11px;
}

/* Pinned to the bottom of the panel, below whatever space the links leave. */
.forma-drawer__meta {
	margin-top: auto;
	display: grid;
	gap: 18px;
	padding-top: 22px;
	border-top: 1px solid rgba(27, 26, 24, 0.1);
}

.forma-drawer__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.forma-drawer__value {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: -0.01em;
	line-height: 1.4;
}

.forma-drawer__note {
	font-size: 12.5px;
	font-weight: 300;
	color: var(--wp--preset--color--body);
}

.forma-drawer__email {
	font-size: 13px;
	word-break: break-all;
}

.forma-drawer__credentials {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	line-height: 1.8;
	color: var(--wp--preset--color--muted);
}

/* The design's large, light link stack. */
.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation {
	margin: 26px 0;
	width: 100%;
	font-family: var(--wp--preset--font-family--sans);
	font-size: 26px;
	font-weight: 200;
	letter-spacing: -0.025em;
	text-transform: none;
	align-items: stretch;
	border-top: 1px solid rgba(27, 26, 24, 0.1);
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid rgba(27, 26, 24, 0.1);
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 0;
}

.forma-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover {
	background: transparent;
	color: var(--wp--preset--color--primary);
}

.forma-header__phone {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	letter-spacing: 0.08em;
	color: var(--wp--preset--color--muted);
}

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

.forma-hero {
	min-height: max(calc(100svh - var(--forma-header-height)), 820px);
}

.forma-hero .wp-block-cover__background {
	background: linear-gradient(
		104deg,
		rgba(18, 17, 15, 0.86) 0%,
		rgba(18, 17, 15, 0.66) 34%,
		rgba(18, 17, 15, 0.2) 66%,
		rgba(18, 17, 15, 0.42) 100%
	);
}

.forma-hero__title {
	font-size: clamp(34px, 9vw, 55px);
	line-height: 0.94;
	letter-spacing: -0.035em;
	font-weight: 200;
	max-width: 680px;
	margin: 0;
}

.forma-hero__title strong {
	font-weight: 800;
}

.forma-hero__city {
	font-size: clamp(20px, 2.2vw, 32px);
	font-weight: 300;
	letter-spacing: -0.01em;
	margin: 0.4em 0 0;
}

.forma-hero__lede {
	max-width: 46ch;
	font-size: clamp(14.5px, 1.1vw, 16.5px);
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

/* Glass information cards along the bottom of the hero. The block editor's flex
   layout centres its items; these read as one band, so they stretch instead. */
.forma-hero__cards {
	gap: 12px;
	align-items: stretch;
}

.forma-hero__card--wide {
	align-items: stretch;
}

/* The owner card spreads label and avatars to its top and bottom edges; the
   credentials card beside it stays top-aligned. */
.forma-hero__card--split {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.forma-hero__card-pane:not(.forma-hero__card-pane--solid) {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}

.forma-glass-card {
	background: rgba(24, 23, 20, 0.42);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	padding: 18px 20px;
	color: #fff;
}

.forma-glass-card--light {
	background: rgba(255, 255, 255, 0.9);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--contrast);
}

.forma-glass-card .forma-kicker {
	color: rgba(255, 255, 255, 0.72);
	margin-bottom: 8px;
}

.forma-glass-card--light .forma-kicker {
	color: var(--wp--preset--color--primary-deep);
}

.forma-service-area {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10.5px;
	line-height: 1.9;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--body);
}

.forma-stat__value {
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1;
}

.forma-stat__label {
	font-size: 11.5px;
	font-weight: 300;
	margin-top: 5px;
	color: rgba(255, 255, 255, 0.8);
}

.forma-avatars {
	display: flex;
	align-items: center;
}

.forma-avatar {
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 2px solid rgba(255, 255, 255, 0.85);
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	background: var(--wp--preset--color--primary);
	color: #fff;
}

.forma-avatar + .forma-avatar {
	margin-left: -12px;
	background: #e3eefa;
	color: var(--wp--preset--color--contrast);
}

/* Below the breakpoint the three hero cards collapse into accordions, showing
   just their label and a +/− toggle. */
.forma-hero__acc-list {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.forma-hero__acc {
	background: rgba(24, 23, 20, 0.5);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255, 255, 255, 0.22);
	color: #fff;
}

.forma-hero__acc--light {
	background: rgba(255, 255, 255, 0.92);
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--wp--preset--color--contrast);
}

.forma-hero__acc summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	padding: 16px 18px;
	cursor: pointer;
	list-style: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.78);
}

.forma-hero__acc summary::-webkit-details-marker {
	display: none;
}

.forma-hero__acc--light summary {
	color: var(--wp--preset--color--primary-deep);
}

.forma-hero__acc summary::after {
	content: "+";
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	line-height: 1;
	color: #fff;
}

.forma-hero__acc--light summary::after {
	color: var(--wp--preset--color--primary);
}

.forma-hero__acc[open] summary::after {
	content: "−";
}

.forma-hero__acc-body {
	padding: 0 18px 18px;
}

.forma-avatars__role {
	margin-left: 12px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.8);
}

/* ---------------------------------------------------------------- Lists */

.forma-check-list,
.forma-spec-list,
.forma-plain-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.forma-check-list li {
	display: flex;
	gap: 12px;
	align-items: baseline;
	font-size: 14.5px;
	line-height: 1.45;
	font-weight: 300;
	color: var(--wp--preset--color--body);
}

.forma-check-list li + li {
	margin-top: 12px;
}

.forma-check-list li::before {
	content: "✓";
	color: var(--wp--preset--color--primary);
	font-size: 13px;
	flex: none;
}

.forma-spec-list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 0 32px;
	border-top: 1px solid var(--forma-line);
}

.forma-spec-list li {
	display: flex;
	gap: 12px;
	padding: 11px 0;
	border-bottom: 1px solid var(--forma-line-soft);
	font-size: 13.5px;
	line-height: 1.45;
	font-weight: 400;
}

.forma-spec-list li::before {
	content: "□";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 10px;
	color: var(--wp--preset--color--primary);
	padding-top: 3px;
	flex: none;
}

.forma-plain-list li {
	font-size: 13px;
	line-height: 1.45;
}

.forma-plain-list li + li {
	margin-top: 8px;
}

.forma-bullet-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: 10px 24px;
}

.forma-bullet-grid li {
	display: flex;
	gap: 10px;
	align-items: baseline;
	font-size: 13.5px;
}

.forma-bullet-grid li::before {
	content: "";
	width: 6px;
	height: 6px;
	background: var(--wp--preset--color--primary);
	display: block;
	flex: none;
	transform: translateY(-2px);
}

/* ---------------------------------------------------------------- Service rows */

/* Edge-to-edge hairline; the alignfull wrapper does the escaping. */
.forma-rule {
	height: 1px;
	background: var(--wp--preset--color--hairline);
}

.forma-service-row {
	gap: 0;
}

.forma-service-row .forma-service-row__copy {
	padding: clamp(26px, 3vw, 44px);
	display: flex;
	flex-direction: column;
}

.forma-service-row .forma-service-row__media {
	background: var(--wp--preset--color--surface-frame);
	padding: clamp(22px, 2.6vw, 36px) 0 clamp(22px, 2.6vw, 36px) clamp(22px, 2.6vw, 36px);
	display: flex;
	align-items: center;
}

/* The media panel bleeds to the right edge on desktop; restore padding once
   the columns stack, or the image would hang off the viewport. */
@media (max-width: 781px) {
	.forma-service-row .forma-service-row__media {
		padding-right: clamp(22px, 2.6vw, 36px);
	}
}

.forma-service-row__media .wp-block-image {
	width: 100%;
	margin: 0;
}

.forma-service-row__media img {
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
	border: 1px solid rgba(27, 26, 24, 0.1);
	box-shadow: var(--forma-shadow-lift);
}

.forma-service-row__title {
	font-size: clamp(20px, 2vw, 28px);
	line-height: 1.12;
	letter-spacing: -0.025em;
	font-weight: 800;
	max-width: 26ch;
}

/* ---------------------------------------------------------------- About */

/* The mockup floats this section over a heavily blurred photo behind an 86%
   white veil. That source image was not part of the handoff bundle, so the
   colour field it produced is rebuilt here as gradients. Swap this rule for a
   blurred <img> backdrop if the original asset turns up. */
.forma-about {
	position: relative;
	isolation: isolate;
}

.forma-about::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(55% 50% at 46% 60%, rgba(233, 206, 186, 0.45), rgba(233, 206, 186, 0) 70%),
		radial-gradient(45% 45% at 24% 20%, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0) 70%),
		radial-gradient(60% 60% at 92% 88%, rgba(214, 224, 237, 0.75), rgba(214, 224, 237, 0) 70%),
		radial-gradient(50% 50% at 4% 96%, rgba(214, 224, 237, 0.6), rgba(214, 224, 237, 0) 70%);
}

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

.forma-card {
	background: var(--wp--preset--color--surface-card);
	border: 1px solid var(--forma-line);
	box-shadow: var(--forma-shadow);
	padding: clamp(20px, 2vw, 28px);
}

/* Cards laid out side by side read as a set, so they match heights regardless
   of how much copy each one carries. */
.wp-block-column > .forma-card {
	height: 100%;
}

.forma-card__name {
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.forma-card__role {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary-deep);
	margin: 6px 0 10px;
}

.forma-process-card {
	background: var(--wp--preset--color--base);
	border: 1px solid var(--forma-line);
	box-shadow: var(--forma-shadow);
	padding: 26px 24px 30px;
}

.forma-process-card__num {
	font-size: 34px;
	font-weight: 200;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--primary);
	line-height: 1;
	margin-bottom: 14px;
}

.forma-process-card__title {
	font-size: 18px;
	font-weight: 800;
	letter-spacing: -0.02em;
	margin-bottom: 8px;
}

/* Oversized level numeral beneath the service images. */
.forma-level-num {
	font-size: clamp(52px, 6vw, 88px);
	line-height: 0.8;
	font-weight: 200;
	letter-spacing: -0.04em;
	color: var(--wp--preset--color--primary);
}

.forma-framed-image img {
	background: var(--wp--preset--color--surface-image);
	box-shadow: var(--forma-shadow);
	width: 100%;
	object-fit: cover;
}

.forma-framed-image.is-ratio-4-3 img {
	aspect-ratio: 4 / 3;
}

.forma-framed-image.is-ratio-16-10 img {
	aspect-ratio: 16 / 10;
}

/* ---------------------------------------------------------------- Contact list */

/* Hairline-separated stack built from the 1px gap showing the group's background. */
.forma-contact-list {
	display: grid;
	gap: 1px;
	background: var(--forma-line);
	border: 1px solid var(--forma-line);
	box-shadow: var(--forma-shadow);
}

.forma-contact-list > * {
	background: var(--wp--preset--color--base);
	padding: 20px 22px;
	margin: 0;
}

.forma-contact-list a {
	display: block;
	text-decoration: none;
}

.forma-contact-list a:hover {
	background: #f1f7fd;
}

.forma-contact-list__label {
	display: block;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	margin-bottom: 6px;
}

.forma-contact-list__value {
	display: block;
	line-height: 1.4;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}

.forma-contact-list__note {
	display: block;
	font-size: 12.5px;
	font-weight: 300;
	color: var(--wp--preset--color--body);
	margin-top: 4px;
}

/* ---------------------------------------------------------------- Scope note */

.forma-note {
	border-left: 2px solid var(--wp--preset--color--primary);
	padding: 4px 0 4px 22px;
}

/* The measure is held on the copy, not the note. Capping the note itself would
   make it a narrow child of a constrained layout, which centres it — pulling
   the accent rule away from the column edge it is supposed to sit on. */
.forma-note > * {
	max-width: 848px;
}

/* Supporting copy that sits beside a display heading holds a ~48 character
   measure rather than filling its column. */
.forma-measure {
	max-width: 48ch;
}

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

.forma-faq {
	border-top: 1px solid var(--forma-line);
}

.forma-faq .wp-block-details {
	border-bottom: 1px solid var(--forma-line);
	padding: 0;
}

.forma-faq summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	padding: 20px 0;
	cursor: pointer;
	list-style: none;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.forma-faq summary::-webkit-details-marker {
	display: none;
}

.forma-faq summary:hover {
	color: var(--wp--preset--color--primary-deep);
}

.forma-faq summary::after {
	content: "+";
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	color: var(--wp--preset--color--primary);
	flex: none;
}

.forma-faq details[open] summary::after {
	content: "−";
}

.forma-faq details > *:not(summary) {
	margin: 0;
	padding: 0 0 22px;
	max-width: 62ch;
	font-size: 13.5px;
	line-height: 1.6;
	font-weight: 300;
	color: var(--wp--preset--color--body);
}

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

.forma-footer {
	background: var(--wp--preset--color--surface-alt);
	border-top: 1px solid var(--forma-line);
}

.forma-footer__label {
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
	/* Sits on the same rhythm as the link rows beneath it. */
	margin-bottom: 10px;
}

.forma-footer__links {
	display: flex;
	flex-direction: column;
	gap: 9px;
	font-size: 13.5px;
	line-height: 1.4;
}

.forma-footer__links a {
	text-decoration: none;
}

.forma-footer__links a:hover {
	color: var(--wp--preset--color--primary-deep);
}

.forma-footer__legal {
	border-top: 1px solid var(--forma-line);
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	justify-content: space-between;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 9.5px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--wp--preset--color--muted);
}

.forma-footer__cross-link {
	font-size: 13.5px;
	line-height: 1.5;
}

/* The rule belongs to the link, not the paragraph, so each wrapped line carries
   its own underline rather than one bar running under the whole block. */
.forma-footer__cross-link a {
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--primary);
	text-decoration-thickness: 1px;
	text-underline-offset: 5px;
}

/* ---------------------------------------------------------------- Button variations */

.wp-block-button.is-style-forma-pill .wp-block-button__link {
	border-radius: 999px;
	padding: 14px 26px;
	font-size: 10.5px;
}

.wp-block-button.is-style-forma-ghost .wp-block-button__link {
	background: rgba(255, 255, 255, 0.1);
	color: #fff;
	border: 1px solid rgba(255, 255, 255, 0.45);
	font-weight: 500;
	backdrop-filter: blur(8px);
}

.wp-block-button.is-style-forma-ghost .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.2);
	border-color: #fff;
}

/* Arrow affordance on the primary calls to action. */
.wp-block-button.is-style-forma-arrow .wp-block-button__link::after {
	content: "→";
	font-size: 14px;
	margin-left: 14px;
}

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

/* The cover's inner container carries the two hero bands: the headline grows to
   fill the viewport height, the glass cards stay pinned to the bottom edge. */
.forma-hero .wp-block-cover__inner-container {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: clamp(24px, 3.5vw, 48px);
	width: 100%;
	/* The hero runs edge to edge inside its own padding rather than sitting in
	   the 1320px column the sections below use. */
	max-width: none;
}

/* Constrained layout hands each child auto side margins, which in this flex
   column would shrink-wrap and centre the headline. Pin both bands flush left. */
.forma-hero .wp-block-cover__inner-container > * {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}

.forma-hero__headline {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
}

.forma-hero__card--wide {
	flex: 2.1 1 330px;
	min-width: 0;
}

.forma-hero__card--narrow {
	flex: 1 1 230px;
	min-width: 0;
}

.forma-hero__card-pane {
	flex: 1 1 130px;
	min-width: 0;
}

.forma-hero__card-pane--solid {
	flex-basis: 200px;
}

/* ---------------------------------------------------------------- Level headings */

.forma-level-title__light {
	font-weight: 200;
}

/* Third commercial column is an image panel that matches the card heights. */
.forma-fill-image {
	height: 100%;
	min-height: 300px;
}

.forma-fill-image img {
	height: 100%;
	min-height: 300px;
	object-fit: cover;
}

.forma-cta-banner__title {
	max-width: 34ch;
	margin: 0;
	line-height: 1.1;
}

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

@media (max-width: 899px) {
	.forma-hide-mobile {
		display: none !important;
	}
}

@media (min-width: 900px) {
	.forma-hide-desktop {
		display: none !important;
	}
}

@media (max-width: 781px) {
	/* Columns stack copy-first, but the design leads each service row with its
	   photograph on narrow screens. */
	.forma-service-row {
		flex-direction: column-reverse;
	}
}