/* Rolmmobau — main styles */

:root {
	/* Fonts (from Figma) */
	--font-display: 'Plus Jakarta Sans', system-ui, sans-serif; /* headings */
	--font-body: 'Inter', system-ui, sans-serif;                /* body */
	--font-brand: 'Cuprum', 'Plus Jakarta Sans', sans-serif;    /* wordmark */

	/* Colors (from Figma) */
	--color-dark: #1B2421;
	--color-green: #327E67;
	--color-sage: #87B0A1;
	--color-light: #F5F8F6;
	--color-white: #FFFFFF;
	--color-text: #1B2421;

	/* Layout — shared container width for header, footer and all blocks.
	   Matches the Figma design: 1440 artboard → 1240 content → 100px side margins. */
	--container: 1240px;
	--gutter: 24px;
	--header-h: 102px;
}

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

html, body {
	margin: 0;
	padding: 0;
	font-family: var(--font-body);
	color: var(--color-text);
	background: var(--color-white);
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
}

img, svg { max-width: 100%; }
img { height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.15;
	margin: 0 0 0.5em;
}

/* Box = content width + gutters, so on a 1440 canvas the content edge
   lands at exactly 100px (matching the Figma page padding). */
.container {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

body.has-menu-open { overflow: hidden; }

/* On pages without a full-bleed hero, clear the fixed header. */
body:not(.has-hero) { padding-top: var(--header-h); }

/* ============================================================ */
/* Header                                                       */
/* ============================================================ */
.site-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100;
	color: var(--color-white);
	background: var(--color-dark);
	transition: background 0.3s ease;
}
/* Transparent over a hero, solidifies on scroll. */
body.has-hero .site-header { background: transparent; }
body.has-hero .site-header.site-header--solid { background: var(--color-dark); }

/* Light hero (dark text on a white background): solid white header that sits
   above the hero with a thin bottom border, a green logo and dark nav. */
body.has-hero--light { padding-top: var(--header-h); }
body.has-hero--light .site-header,
body.has-hero--light .site-header.site-header--solid {
	background: var(--color-light);
	color: var(--color-dark);
	border-bottom: 1px solid rgba(27, 36, 33, 0.1);
}
body.has-hero--light .site-header__logo,
body.has-hero--light .lang-switcher a,
body.has-hero--light .site-header__toggle { color: var(--color-dark); }
/* Sage fallback if the SVG gradient paint-server can't resolve. */
body.has-hero--light .site-header__logo-icon { color: var(--color-sage, #87b0a1); }
/* The Figma brand logo: dark-green -> sage gradient on both the icon stroke
   and the wordmark (light-hero pages only; stays white/solid elsewhere). */
body.has-hero--light .site-header__logo-icon svg path { stroke: url(#rm-logo-grad); }
body.has-hero--light .site-header__brand {
	background: linear-gradient(96deg, #2b382e 0%, #7ea592 60%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Light-hero pages: the hero shares the header's light background with dark text,
   rendered as a compact intro band (reduced padding, no full-height min-height)
   so it flows straight out of the light header instead of a tall dark hero. */
body.has-hero--light .rm-hero {
	background-color: var(--color-light);
	color: var(--color-dark);
	min-height: 0;
}
body.has-hero--light .rm-hero__overlay { display: none; }
body.has-hero--light .rm-hero__heading,
body.has-hero--light .rm-hero__paragraph { color: var(--color-dark); }
/* Heading accent words use the darker brand green for emphasis; the subheading
   underneath uses sage (#87B0A1) per the design. */
body.has-hero--light .rm-hero__heading mark,
body.has-hero--light .rm-hero__heading .rm-accent { color: var(--color-green); }
body.has-hero--light .rm-hero__subheading { color: var(--color-sage, #87b0a1); }
body.has-hero--light .rm-hero__inner {
	padding-top: 72px;
	padding-bottom: 72px;
}
/* Mobile: the body already offsets by the header height, so this light hero only
   needs a small gap above the heading. The next block (news list) already adds
   ~40px on top, so the hero's bottom padding is kept small — 48 top vs 8+40 bottom
   makes the header→heading and subheading→next-block gaps read equal. */
@media (max-width: 781px) {
	body.has-hero--light .rm-hero__inner {
		padding-top: 48px;
		padding-bottom: 8px;
	}
}

.site-header__inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding: 0 var(--gutter);
	height: var(--header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
}

/* Logo */
.site-header__logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-white);
	flex-shrink: 0;
}
.site-header__logo-icon {
	display: inline-flex;
	align-items: center;
}
.site-header__logo-icon svg {
	height: 40px;
	width: auto;
	display: block;
}
.site-header__brand {
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
	letter-spacing: 0;
}

/* Right-side actions */
.site-header__actions {
	display: inline-flex;
	align-items: center;
	gap: 40px;
}

/* Language switcher */
.lang-switcher {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}
.lang-switcher li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}
.lang-switcher li:not(:first-child)::before {
	content: "";
	display: block;
	width: 1px;
	height: 15px;
	background: currentColor;
	opacity: 0.5;
}
.lang-switcher a {
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
	color: inherit;
}
.lang-switcher .is-active a { font-weight: 500; }
.lang-switcher a:hover { color: var(--color-sage); }

/* Hamburger toggle */
.site-header__toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	padding: 0;
	cursor: pointer;
	color: inherit;
}
.site-header__toggle svg {
	width: 34px;
	height: auto;
	display: block;
}

/* ============================================================ */
/* Off-canvas menu                                              */
/* ============================================================ */
.site-menu {
	position: fixed;
	inset: 0;
	z-index: 200;
	visibility: hidden;
	opacity: 0;
	/* Keep the panel mounted until its slide-out finishes (visibility delay). */
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0.55s;
}
.site-menu.is-open {
	visibility: visible;
	opacity: 1;
	transition: opacity 0.45s cubic-bezier(0.4, 0, 0.2, 1), visibility 0s linear 0s;
}
.site-menu__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(27, 36, 33, 0.35);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	cursor: pointer;
}

.site-menu__panel {
	position: absolute;
	top: 0;
	right: 0;
	height: 100%;
	width: 484px;
	max-width: 100%;
	background: var(--color-light);
	padding: 40px 60px 80px;
	display: flex;
	flex-direction: column;
	transform: translateX(100%);
	transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
	will-change: transform;
	overflow-y: auto;
}
.site-menu.is-open .site-menu__panel { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.site-menu,
	.site-menu.is-open,
	.site-menu__panel {
		transition-duration: 0.01ms;
	}
}

/* Panel header */
.site-menu__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 40px;
	color: var(--color-dark);
}
.site-menu__logo {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	color: var(--color-dark);
}
.site-menu__logo-icon svg { height: 40px; width: auto; display: block; }
.site-menu__brand {
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 36px;
	line-height: 1;
}
.site-menu__close {
	display: inline-flex;
	background: none;
	border: 0;
	padding: 4px;
	cursor: pointer;
	color: var(--color-dark);
}
.site-menu__close svg { width: 24px; height: 24px; display: block; }

.site-menu__divider {
	border: 0;
	border-top: 1px solid rgba(27, 36, 33, 0.15);
	margin: 40px 0;
	width: 100%;
}

/* Nav links */
.site-menu__nav {
	display: flex;
	flex-direction: column;
	gap: 40px;
}
.site-menu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.site-menu__links a {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 24px;
	line-height: 1.2;
	text-transform: uppercase;
	color: var(--color-dark);
	transition: color 0.2s ease;
}
.site-menu__links a:hover {
	color: var(--color-sage);
}
/* Current page — sage underline (Figma: #87B0A1, solid, offset 48%, thickness
   4% of 1em). Base rule (no media query) so it also shows on desktop. */
.site-menu__links .current-menu-item > a,
.site-menu__links .current_page_item > a {
	color: var(--color-sage);
	text-decoration-line: underline;
	text-decoration-style: solid;
	text-decoration-color: var(--color-sage);
	text-underline-offset: 48%;
	text-decoration-thickness: 4%;
}

/* CTA button */
.site-menu__cta {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	align-self: flex-start;
	padding: 14px 18px;
	border: 1px solid var(--color-dark);
	color: var(--color-dark);
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.2;
	transition: background 0.2s ease, color 0.2s ease;
}
.site-menu__cta:hover {
	background: var(--color-dark);
	color: var(--color-light);
}
.site-menu__cta-icon { display: inline-flex; }
.site-menu__cta-icon svg { width: 24px; height: 14px; display: block; }

/* Contact info, pinned to bottom of panel */
.site-menu__contact {
	margin-top: auto;
	padding-top: 40px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.site-menu__contact a {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-green);
}

/* ============================================================ */
/* Footer                                                       */
/* ============================================================ */
.site-footer__dark {
	position: relative;
	overflow: hidden;
	background: var(--color-dark);
	color: var(--color-white);
}
.site-footer__body {
	padding-top: 80px;
}

.site-footer__columns {
	display: grid;
	grid-template-columns: 242px 242px 242px minmax(280px, 1fr);
	gap: 62px;
}

.site-footer__heading {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-white);
	margin: 0 0 18px;
}

.site-footer__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 16px;
}
.site-footer__links a,
.site-footer__links span {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	/* Non-current links are a muted sage so the current page (full #87B0A1 +
	   underline, below) stands out. */
	color: rgba(135, 176, 161, 0.6);
	transition: color 0.2s ease;
}
.site-footer__links a:hover { color: var(--color-white); }
/* Current page — sage (#87B0A1) + underline (WP adds current-menu-item /
   current_page_item to the active footer nav item). */
.site-footer__links .current-menu-item > a,
.site-footer__links .current_page_item > a {
	color: var(--color-sage, #87b0a1);
	text-decoration: underline;
	text-underline-offset: 5px;
}

/* Newsletter + socials */
.site-footer__col--news {
	display: flex;
	flex-direction: column;
	gap: 24px;
}
.site-footer__newsletter {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.newsletter-form {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	border-bottom: 1px solid rgba(135, 176, 161, 0.6);
	padding-bottom: 12px;
}
.newsletter-form__input {
	flex: 1;
	min-width: 0;
	background: none;
	border: 0;
	padding: 0;
	color: var(--color-sage);
	font-family: var(--font-body);
	font-weight: 300;
	font-size: 16px;
	line-height: 1.5;
}
.newsletter-form__input::placeholder { color: var(--color-sage); opacity: 1; }
.newsletter-form__input:focus { outline: none; color: var(--color-white); }
.newsletter-form__submit {
	display: inline-flex;
	align-items: center;
	background: none;
	border: 0;
	padding: 0 4px;
	cursor: pointer;
	color: var(--color-sage);
}
.newsletter-form__submit svg { width: 16px; height: 12px; display: block; }
.newsletter-form__submit:hover { color: var(--color-white); }

.site-footer__socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 19px;
}
.site-footer__socials a {
	display: inline-flex;
	color: var(--color-sage);
	transition: color 0.2s ease;
}
.site-footer__socials a:hover { color: var(--color-white); }
.site-footer__socials svg { width: 21px; height: 21px; display: block; }

.site-footer__divider {
	border: 0;
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	margin: 50px 0 0;
	width: 100%;
}

/* Oversized brand watermark — centered, contained, clipped at the bottom edge */
.site-footer__watermark {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	/* A touch wider than the standard container so the brand mark spills just past
	   the footer columns/divider (per design), but not by a large margin. */
	max-width: calc(var(--container) + 2 * var(--gutter) + 120px);
	margin: 0 auto -0.14em;
	padding: 18px var(--gutter) 0;
	color: var(--color-light);
	font-size: clamp(40px, 15.5vw, 240px);
}
.site-footer__watermark-icon {
	display: inline-flex;
	flex-shrink: 0;
}
.site-footer__watermark-icon svg {
	height: 0.93em;
	width: auto;
	display: block;
}
.site-footer__watermark-text {
	font-family: var(--font-brand);
	font-weight: 700;
	font-size: 1em;
	line-height: 0.85;
	white-space: nowrap;
}

/* Copyright bar */
.site-footer__copyright-bar {
	background: var(--color-light);
}
.site-footer__copyright-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	padding-top: 12px;
	padding-bottom: 12px;
}
.site-footer__copyright {
	margin: 0;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	color: var(--color-dark);
}
.lang-switcher--dark { color: var(--color-dark); }

/* ============================================================ */
/* Responsive                                                   */
/* ============================================================ */
@media (max-width: 980px) {
	.site-footer__columns {
		grid-template-columns: 1fr 1fr;
		gap: 40px;
	}
}

@media (max-width: 600px) {
	:root { --header-h: 80px; }
	.site-header__brand,
	.site-menu__brand { font-size: 28px; }
	.site-header .lang-switcher { display: none; }
	.site-menu__panel { width: 100%; padding: 24px 24px 48px; }

	/* Mobile menu tweaks: smaller nav labels + full-width CTA button */
	.site-menu__links a { font-size: 20px; }
	.site-menu__cta {
		align-self: stretch;
		justify-content: center;
	}

	.site-footer__columns { grid-template-columns: 1fr; }
	.site-footer__copyright-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
	/* Language switcher above the copyright line on mobile. */
	.site-footer__copyright-inner .lang-switcher { order: -1; }
}

/* Sustainable Construction (page-id-9) hero title: bump to 40px on small
   phones (<=380px), then let it shrink fluidly at 365px and below so a long
   title never overflows. 10.96vw hits exactly 40px at 365px (no jump). */
@media (max-width: 380px) {
	.page-id-9 .rm-hero__heading { font-size: 40px; }
}
@media (max-width: 365px) {
	.page-id-9 .rm-hero__heading { font-size: clamp(28px, 10.96vw, 40px); }
}

/* =========================================================
   Single article (single.php) — Figma "(D) Article page"
   ========================================================= */
.rm-article { background: var(--color-light); }

.rm-article__hero-inner,
.rm-article__feature-inner,
.rm-article__content,
.rm-article__footer-inner {
	max-width: calc(var(--container) + 2 * var(--gutter));
	margin: 0 auto;
	padding-left: var(--gutter);
	padding-right: var(--gutter);
}

/* Hero header (light background, dark text) */
.rm-article__hero-inner {
	padding-top: 60px;
	padding-bottom: 40px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.rm-article__back {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	width: max-content;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark);
	text-decoration: none;
	transition: color .2s ease;
}
.rm-article__back:hover { color: var(--color-green); }
.rm-article__back-icon { display: inline-flex; }
.rm-article__title {
	margin: 12px 0 0;
	max-width: 912px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 48px;
	line-height: 1.2;
	color: var(--color-dark);
}
.rm-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 12px;
}
.rm-article__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark);
}
.rm-article__meta-item svg { flex-shrink: 0; }

/* Featured image */
.rm-article__feature { margin: 0; }
.rm-article__feature-inner { padding-top: 20px; padding-bottom: 20px; }
.rm-article__feature-img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 1240 / 628;
	object-fit: cover;
}
/* Phones: crop every article image (featured + in-body) to the same tall portrait
   — the wide desktop ratios collapse to short strips on a narrow screen. */
@media (max-width: 600px) {
	.rm-article__feature-img { aspect-ratio: 3 / 5; }
	.rm-article__content img {
		width: 100%;
		height: auto;
		aspect-ratio: 3 / 5;
		object-fit: cover;
	}
}

/* Body content */
.rm-article__content {
	padding-top: 20px;
	padding-bottom: 20px;
	color: var(--color-dark);
}
.rm-article__content > * { margin-top: 40px; margin-bottom: 0; }
.rm-article__content > *:first-child { margin-top: 0; }

.rm-article__content h2,
.rm-article__content h3.rm-h2 {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 40px;
	line-height: 1.2;
	color: var(--color-dark);
	margin-bottom: 24px;
}
.rm-article__content h2 + p { margin-top: 0; }

.rm-article__content p {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-dark);
	margin-top: 20px;
}
.rm-article__content h2 + p,
.rm-article__content > p:first-child { margin-top: 0; }

/* Intro lead quote */
.rm-article__content .rm-lead {
	font-size: 20px;
	line-height: 1.5;
	padding-left: 16px;
	border-left: 1px solid var(--color-green, #327E67);
}

/* Section dividers */
.rm-article__content .wp-block-separator,
.rm-article__content hr {
	border: 0;
	border-top: 1px solid rgba(27, 36, 33, .15);
	margin: 40px 0 0;
	height: 0;
	background: none;
	max-width: none;
}

/* Stats list (Real-World Impact) */
.rm-article__content .rm-stats {
	list-style: none;
	margin: 20px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.rm-article__content .rm-stats li {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-green);
}
.rm-article__content .rm-stats li strong { font-weight: 700; }

/* Callout cards inside the article flow */
.rm-article__content .wp-block-rolmmobau-article-callout { margin-top: 24px; }

/* Author + share footer */
.rm-article__footer-inner {
	padding-top: 20px;
	padding-bottom: 40px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	border-top: 1px solid rgba(27, 36, 33, .15);
}
.rm-article__author { display: flex; align-items: center; gap: 20px; }
.rm-article__avatar {
	width: 60px;
	height: 60px;
	flex-shrink: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: var(--color-light);
	border: 1px solid rgba(27, 36, 33, .15);
	color: var(--color-dark);
}
.rm-article__author-text { display: flex; flex-direction: column; gap: 2px; }
.rm-article__author-name {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 1.5;
	color: var(--color-dark);
}
.rm-article__author-role {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.5;
	color: var(--color-dark);
}
.rm-article__share { display: inline-flex; align-items: center; gap: 16px; }
.rm-article__share-label {
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 14px;
	color: var(--color-dark);
}
.rm-article__share-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	color: var(--color-sage);
	text-decoration: none;
	transition: color .2s ease;
}
.rm-article__share-link svg { width: 32px; height: 32px; }
.rm-article__share-link:hover { color: var(--color-green); }

/* Mobile */
@media (max-width: 782px) {
	.rm-article__hero-inner { padding-top: 32px; padding-bottom: 24px; }
	.rm-article__title { font-size: 36px; }
	.rm-article__meta { gap: 12px 20px; }
	.rm-article__content h2,
	.rm-article__content h3.rm-h2 { font-size: 32px; }
	.rm-article__content p { font-size: 18px; }
	.rm-article__content .rm-lead { font-size: 20px; }
	.rm-article__footer-inner { flex-direction: column; align-items: flex-start; }
}

/* =========================================================
   Gravity Forms — Contact multistep, themed to match Figma
   Scoped under the contact form card. Overrides the GF
   "orbital" theme at component level (variables are id-scoped).
   ========================================================= */
.rm-contact__form-card .gform_wrapper { font-family: var(--font-body); }
.rm-contact__form-card .gform_wrapper .gform_required_legend { display: none; }

/* ---- Step indicator (1. PROJECT / 2. DETAILS / 3. MESSAGE) ---- */
.rm-contact__form-card .gf_page_steps {
	position: relative;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
	border: 0;
	margin: 0 0 32px;
	padding: 0 0 16px;
}
.rm-contact__form-card .gf_step {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	counter-increment: none;
	min-height: 0;
	opacity: 1;
}
.rm-contact__form-card .gf_step_number { display: none !important; }
.rm-contact__form-card .gf_step_label {
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: uppercase;
	color: var(--color-sage);
	margin: 0;
}
/* Future steps stay sage (#87B0A1); the current + past steps go green
   (#327E67). The extra step-state class lifts specificity above GF's own
   `.gform-theme--framework .gf_step_label` colour rule, which otherwise ties
   (0,2,0) and wins on source order — greying out the pending steps. */
.rm-contact__form-card .gf_step_pending .gf_step_label {
	color: var(--color-sage);
	font-weight: 400;
	font-size: 12px;
}
.rm-contact__form-card .gf_step_active .gf_step_label,
.rm-contact__form-card .gf_step_completed .gf_step_label {
	color: var(--color-green);
	font-weight: 400;
	font-size: 12px;
}
/* progress track + fill */
.rm-contact__form-card .gf_page_steps::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 4px;
	background: var(--color-light);
	border-radius: 2px;
}
.rm-contact__form-card .gf_page_steps::before {
	content: "";
	position: absolute;
	left: 0; bottom: 0;
	height: 4px;
	width: 66.66%;
	background: var(--color-green);
	border-radius: 2px;
	z-index: 1;
	transition: width .3s ease;
}
.rm-contact__form-card .gf_page_steps:has(.gf_step_first.gf_step_active)::before { width: 33.33%; }
.rm-contact__form-card .gf_page_steps:has(.gf_step_last.gf_step_active)::before { width: 100%; }

/* ---- Section title ("Select Project Type" etc.) ---- */
.rm-contact__form-card .gform_wrapper .gfield_label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-dark);
	margin-bottom: 10px;
}
.rm-contact__form-card .gform_wrapper .rm-project-type > .gfield_label {
	font-size: 24px;
	margin-bottom: 18px;
}

/* ---- Project-type cards (radio choices) ---- */
.rm-contact__form-card .rm-project-type .gfield_radio {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 15px 23px;
}
.rm-contact__form-card .rm-project-type .gchoice {
	position: relative;
	display: flex !important;
	flex-direction: column !important;
	align-items: flex-start;
	gap: 8px;
	margin: 0;
	padding: 24px;
	border: 1px solid #e1e7e4;
	border-radius: 8px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.rm-contact__form-card .rm-project-type .gfield-choice-input {
	position: absolute;
	opacity: 0;
	width: 1px; height: 1px;
	margin: 0;
}
.rm-contact__form-card .rm-project-type .gchoice label {
	font-family: var(--font-body);
	font-weight: 700;
	font-size: 18px;
	line-height: 1.4;
	color: var(--color-dark);
	margin: 0;
	cursor: pointer;
}
.rm-contact__form-card .rm-project-type .gchoice label::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 8px;
}
.rm-contact__form-card .rm-choice-sub {
	display: block;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 1.45;
	color: var(--color-green);
}
.rm-contact__form-card .rm-project-type .gchoice:hover { border-color: var(--color-sage); }
.rm-contact__form-card .rm-project-type .gchoice:has(input:checked) {
	border-color: var(--color-green);
	background: var(--color-light);
	box-shadow: inset 0 0 0 1px var(--color-green);
}

/* ---- Text inputs / textarea (Details & Message) ---- */
.rm-contact__form-card .gform_wrapper input[type="text"],
.rm-contact__form-card .gform_wrapper input[type="email"],
.rm-contact__form-card .gform_wrapper input[type="tel"],
.rm-contact__form-card .gform_wrapper textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.5;
	color: var(--color-dark);
	padding: 14px 16px;
	border: 1px solid #e1e7e4;
	border-radius: 8px;
	background: #fff;
	transition: border-color .2s ease, box-shadow .2s ease;
}
.rm-contact__form-card .gform_wrapper input:focus,
.rm-contact__form-card .gform_wrapper textarea:focus {
	outline: none;
	border-color: var(--color-green);
	box-shadow: 0 0 0 3px rgba(50, 126, 103, .12);
}
.rm-contact__form-card .gform_wrapper textarea { min-height: 160px; resize: vertical; }
.rm-contact__form-card .gform_wrapper .gfield { margin-top: 20px; }

/* ---- Buttons (NEXT STEP / BACK / SEND MESSAGE) ---- */
.rm-contact__form-card .gform-page-footer,
.rm-contact__form-card .gform_footer {
	display: flex;
	gap: 16px;
	margin-top: 40px;
	padding-top: 32px;
	border-top: 1px solid #e1e7e4;
}
.rm-contact__form-card .gform_next_button,
.rm-contact__form-card .gform_previous_button,
.rm-contact__form-card .gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 18px !important;
	flex: 1 1 auto;
	font-family: var(--font-body);
	font-weight: 400 !important;
	font-size: 16px !important;
	line-height: 1.5;
	color: var(--color-dark) !important;
	background: transparent !important;
	border: 1px solid #e1e7e4 !important;
	border-radius: 0 !important;
	padding: 20px 24px !important;
	box-shadow: none !important;
	cursor: pointer;
	transition: background .2s ease, color .2s ease, border-color .2s ease;
}

/* Arrow icon (rebuilt buttons carry <svg class="rm-gf-arrow">). GF's theme
   framework fires an `all: unset` reset that hits the inline SVG's <path> and
   resets the geometry (the SVG2 CSS `d` property → none, which overrides the
   d="" attribute) plus stroke/fill back to defaults — so the arrow paints
   nothing. Re-assert all of it here with a selector that out-specifies GF's
   zero-specificity :where() reset. */
.rm-contact__form-card .rm-gf-arrow {
	flex-shrink: 0;
	width: 24px;
	height: 14px;
	display: block;
	fill: none;
}
.rm-contact__form-card .rm-gf-arrow path {
	d: path("M0 7H22M16.5 1L22.5 7L16.5 13");
	fill: none;
	stroke: currentColor;
	stroke-width: 1px;
}
.rm-contact__form-card .rm-gf-arrow--left {
	transform: scaleX(-1);
}
.rm-contact__form-card .gform_next_button:hover,
.rm-contact__form-card .gform_button:hover {
	background: var(--color-green) !important;
	border-color: var(--color-green) !important;
	color: #fff !important;
}
.rm-contact__form-card .gform_previous_button {
	flex: 0 0 auto;
	border-color: #e1e7e4 !important;
	color: var(--color-dark) !important;
}
.rm-contact__form-card .gform_previous_button:hover { border-color: var(--color-dark) !important; background: transparent !important; }

/* ---- Validation + messages ---- */
.rm-contact__form-card .gform_wrapper .gfield_required { color: var(--color-green); }
.rm-contact__form-card .gform_wrapper .validation_message {
	font-size: 13px;
	color: #b3261e;
	margin-top: 6px;
}
.rm-contact__form-card .gform_confirmation_message {
	font-family: var(--font-body);
	font-size: 18px;
	line-height: 1.6;
	color: var(--color-dark);
	padding: 24px 0;
}

@media (max-width: 600px) {
	.rm-contact__form-card .rm-project-type .gfield_radio { grid-template-columns: 1fr; }
	.rm-contact__form-card .gf_step_label { font-size: 11px; }
}

/* ---- Decorative building line-mark (exact Figma logo icon) ----
   Painted from the exported PNG (assets/images/contact-watermark.png, 550×448,
   aspect ~1.228) via a CSS mask, so the real logo art renders in the sage
   accent colour over the dark info card instead of the PNG's own grey lines. */
.rm-contact__house {
	position: absolute;
	right: -24px;
	bottom: -16px;
	width: 340px;
	height: 277px;
	background-color: var(--color-sage);
	opacity: 0.16;
	pointer-events: none;
	z-index: 0;
	-webkit-mask: url("../images/contact-watermark.png") no-repeat bottom right / contain;
	mask: url("../images/contact-watermark.png") no-repeat bottom right / contain;
}