/* R.E. Horner theme. Built by bin/build.php from assets/css/parts. Edit the parts, not this file. */

/* ==== 00-tokens.css ==== */
/* Brand tokens the parent's Customizer doesn't carry, and the font families.
   The parent's font resolver has a hardcoded default, so families are set here (PRE-FLIGHT §1.2). */

:root {
	/* Font families are hard-set here, not via arenex_default_overrides.
	 *
	 * The parent's font resolver reads
	 *     get_theme_mod( "arenex_font_{$key}", 'Geologica' )
	 * with a hardcoded fallback, so it never sees a child's 'custom' choice and the
	 * site renders in Geologica (PRE-FLIGHT §1.2). Colours and type sizes use a
	 * different path and do honour the filter — fonts are the exception.
	 *
	 * This sheet loads after the parent's :root block, so equal specificity wins on
	 * source order. The faces themselves are declared in functions.php.
	 */
	--font-heading: 'Google Sans Flex', system-ui, -apple-system, sans-serif;
	--font-body:    'DM Sans', system-ui, -apple-system, sans-serif;

	--gold-deep:  #E3B23C;              /* button hover */
	--gold-panel: #D8AE55;              /* gold CTA card */
	--gold-muted: #B09850;              /* hairlines, eyebrows */
	--cream:      #FAF7F3;              /* form fields, text on navy */
	--navy-fg:    #EEF3F8;
	--navy-dim:   #AFC0D0;
	--navy-line:  rgb(238 243 248 / .14);

	/* The prototype's ink ramp. --ink is the near-black used for statement type
	   and accordion titles; --ink-2 is body copy; --ink-3 is muted captions.
	   Without these, statement type inherited body grey instead of near-black. */
	--ink:   #101820;
	--ink-2: #3C4852;
	--ink-3: #5B6875;

	--serif: 'Cormorant Garamond', Georgia, serif;
	--ease:  cubic-bezier(.32, .72, 0, 1);

	--radius-sm: 14px;
	--gutter:    clamp(1.25rem, 4vw, 3.5rem);
}


/* ==== 01-fonts.css ==== */
/* The three self-hosted faces, all checked (see inc/assets.php for their history):
   Google Sans Flex and DM Sans upright, Cormorant Garamond italic only.

   They live in a part, not in the page head, so bin/build.php carries them into
   the editor canvas too — the block editor draws the page in its own frame and
   never sees wp_head. Paths are relative to assets/css/. */

@font-face { font-family: 'Google Sans Flex'; src: url('../fonts/GoogleSansFlex-latin.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'DM Sans'; src: url('../fonts/DMSans-latin.woff2?v=2') format('woff2'); font-weight: 100 1000; font-style: normal; font-display: swap; }
@font-face { font-family: 'Cormorant Garamond'; src: url('../fonts/CormorantGaramond-italic-latin.woff2') format('woff2'); font-weight: 300 700; font-style: italic; font-display: swap; }


/* ==== 02-buttons.css ==== */
/* The button blocks render, and the editor's empty-block hint. */

/* The button. Blocks render .rh-btn; core Button blocks are styled by the parent. */
:where(.rh-btn) {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-family: var(--font-body, sans-serif);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1;
	text-decoration: none;
	/* The prototype's .btn: the chip sits .6rem from the edge, so the button is
	   56.8px tall. .95rem made it 64px with a smaller chip. */
	padding: .6rem .6rem .6rem 1.6rem;
	border-radius: 999px;
	background: var(--color-accent, #F1C654);
	color: var(--color-heading, #082246);
	transition: background-color .45s var(--ease, ease), transform .45s var(--ease, ease);
}

:where(.rh-btn:hover) { background: var(--gold-deep, #E3B23C); }
:where(.rh-btn:active) { transform: scale(.985); }
:where(.rh-btn:focus-visible) { outline: 2px solid var(--color-heading, #082246); outline-offset: 3px; }

:where(.rh-btn--navy) { background: var(--color-primary, #082246); color: var(--cream, #FAF7F3); }
:where(.rh-btn--navy:hover) { background: var(--color-primary-light, #0C2C56); }

/* the arrow in its own circle, flush inside the button */
:where(.rh-btn__chip) {
	display: grid;
	place-items: center;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 50%;
	background: rgb(8 34 70 / .12);
	flex: none;
	transition: transform .45s var(--ease, ease), background-color .45s var(--ease, ease);
}

:where(.rh-btn--navy) .rh-btn__chip { background: rgb(255 255 255 / .14); }
:where(.rh-btn__chip svg) { width: .95rem; height: .95rem; fill: none; stroke: currentColor; stroke-width: 2; transition: transform .45s var(--ease, ease); }
/* Hover as the prototype: the circle grows a touch and the arrow moves up-right. */
:where(.rh-btn:hover) .rh-btn__chip { transform: scale(1.06); }
:where(.rh-btn:hover) .rh-btn__chip svg { transform: translate(2px, -2px); }

/* The hint a block shows in the editor before it has content. */
:where(.rehorner-block-empty) {
	margin: 0;
	padding: 1.4rem;
	border: 1px dashed var(--color-border, #E7E0D4);
	border-radius: var(--radius-sm, 14px);
	color: var(--color-muted, #5B6875);
	font-size: .95rem;
	text-align: center;
}

@media (prefers-reduced-motion: reduce) {
	:where(.rh-btn), :where(.rh-btn__chip) { transition: none; }
}


/* ==== 03-core-buttons.css ==== */
/* Core Button blocks, matching the prototype's .btn exactly.

   The design's button is a pill with the label left and a circular chip on the
   right holding a diagonal arrow. Core renders a plain <a> with no room for
   that chip, so it is drawn as an ::after — a circle carrying the arrow as a
   background image. Two arrow colours are needed: navy on the gold button,
   gold on the navy one.

   Measured against the prototype: padding .6rem .6rem .6rem 1.6rem, chip
   2.35rem, arrow .95rem, height 56.78px. Core was rendering 46.71px with
   15.2px/25.6px padding and no chip. */

:root {
	--btn-arrow-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082246' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
	--btn-arrow-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23F1C654' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
	--btn-arrow-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F3' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E");
}

:where(.site-main) .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	font-family: var(--font-body, sans-serif);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1;
	padding: .6rem .6rem .6rem 1.6rem;
	border-radius: 999px;
	background: var(--color-accent, #F1C654);
	color: var(--color-primary, #082246);
	transition: background-color .45s var(--ease, ease), transform .45s var(--ease, ease);
}

/* The chip: a circle with the arrow inside it. */
:where(.site-main) .wp-block-button__link::after {
	content: "";
	flex: none;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background-color: rgb(8 34 70 / .12);
	background-image: var(--btn-arrow-navy);
	background-repeat: no-repeat;
	background-position: center;
	background-size: .95rem .95rem;
	transition: transform .45s var(--ease, ease), background-color .45s var(--ease, ease);
}

:where(.site-main) .wp-block-button__link:hover { background: var(--gold-deep, #E3B23C); }
:where(.site-main) .wp-block-button__link:hover::after { transform: scale(1.06); }
:where(.site-main) .wp-block-button__link:active { transform: scale(.98); }

/* Navy variant — the prototype's .btn--navy, used on the gold CTA panel where
   a gold button would vanish into the background. */
:where(.is-style-panel, .is-style-navy) .wp-block-button__link {
	background: var(--color-primary, #082246);
	color: var(--cream, #FAF7F3);
}
:where(.is-style-panel, .is-style-navy) .wp-block-button__link::after {
	background-color: rgb(241 198 84 / .18);
	background-image: var(--btn-arrow-gold);
}
/* Both background and colour are restated on hover: the generic gold hover
   above would otherwise leave cream text on a gold field, which is unreadable.
   Specificity is raised past :where() so nothing later can undo it. */
.site-main :is(.is-style-panel, .is-style-navy) .wp-block-button__link:hover,
.site-main :is(.is-style-panel, .is-style-navy) .wp-block-button__link:focus-visible {
	background: var(--color-primary-light, #0C2C56);
	color: var(--cream, #FAF7F3);
}

/* Ghost variant — the prototype's .btn--ghost, under the projects rail. */
/* Core's outline style applies a real 2px border and its own padding, which
   made the ghost button 63px tall against the design's 57px and shifted the
   label. The prototype draws the outline with an inset shadow, so the box
   never changes size. */
:where(.site-main) .is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-primary, #082246);
	border: 0;
	padding: .6rem .6rem .6rem 1.6rem;
	box-shadow: inset 0 0 0 1.5px var(--color-primary, #082246);
}
:where(.site-main) .is-style-outline .wp-block-button__link::after { background-color: rgb(8 34 70 / .08); }
:where(.site-main) .is-style-outline .wp-block-button__link:hover {
	background: var(--color-primary, #082246);
	color: var(--cream, #FAF7F3);
}
:where(.site-main) .is-style-outline .wp-block-button__link:hover::after {
	background-color: rgb(241 198 84 / .18);
	background-image: var(--btn-arrow-gold);
}

/* On navy bands the ghost button flips to cream. */
:where(.is-style-hero, .is-style-founder) .is-style-outline .wp-block-button__link {
	color: var(--cream, #FAF7F3);
	box-shadow: inset 0 0 0 1.5px rgb(255 255 255 / .5);
}
:where(.is-style-hero, .is-style-founder) .is-style-outline .wp-block-button__link::after {
	background-image: var(--btn-arrow-cream);
}

@media (prefers-reduced-motion: reduce) {
	:where(.site-main) .wp-block-button__link,
	:where(.site-main) .wp-block-button__link::after { transition: none; }
}


/* ==== 10-header.css ==== */
/* Header — ported from the prototype's .hd.
   Parts 10–19 are site chrome and are left out of the editor build: there is no header
   in the canvas for them to act on. */

:where(.rh-skip) {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--color-primary, #082246);
	color: var(--cream, #FAF7F3);
	padding: .8rem 1.2rem;
	z-index: 200;
}

:where(.rh-skip:focus) { left: 0; }

.rh-header {
	position: fixed;
	inset: 0 0 auto 0;
	z-index: 120;
	background: var(--color-bg-alt, #fff);
	transition: box-shadow .4s var(--ease, ease);
}

.rh-header.is-scrolled { box-shadow: 0 1px 0 var(--color-border, #E7E0D4); }

.rh-header__inner {
	max-width: var(--container-max-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(1.25rem, 4vw, 3.5rem));
	height: var(--header-h, 5rem);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 2rem;
}

/* The logo must not shrink, or it distorts at narrow widths. */
.rh-brand { flex: none; display: block; }
.rh-brand img { width: auto; height: clamp(52px, 6vw, 66px); display: block; }

/* ---- menu ---- */

.rh-nav { display: flex; gap: 2.1rem; align-items: center; }
.rh-nav__item { position: relative; }

.rh-nav__link {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	font-weight: 500;
	font-size: var(--menu-size, .98rem);
	color: var(--color-primary, #082246);
	text-decoration: none;
	padding-block: .4rem;
	position: relative;
}

/* "Our Process" wraps its last word in an <em> for the phone menu's serif
   word. In a flex link the space before it collapses and the .35rem gap stands
   in, 1.6px wider than the prototype's plain text; inline-block keeps the space. */
@media (min-width: 861px) {
	.rh-nav__link:has(> .rh-nav__em) { display: inline-block; }
}

.rh-nav__link::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 1.5px;
	width: 100%;
	background: var(--gold-muted, #B09850);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s var(--ease, ease);
}

.rh-nav__link:hover::after,
.rh-nav__link:focus-visible::after { transform: scaleX(1); }

.rh-nav__caret { width: .85rem; height: .85rem; fill: none; stroke: currentColor; stroke-width: 2; }

/* The dropdown opens on hover and on keyboard focus, so Services is reachable without a pointer. */
.rh-nav__panel {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, 6px);
	min-width: 16rem;
	background: var(--color-bg-alt, #fff);
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: var(--radius-sm, 14px);
	padding: .6rem;
	box-shadow: 0 18px 40px rgb(8 34 70 / .10);
	opacity: 0;
	visibility: hidden;
	transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease), visibility 0s .3s;
}

.rh-nav__item.has-panel:hover .rh-nav__panel,
.rh-nav__item.has-panel:focus-within .rh-nav__panel {
	opacity: 1;
	visibility: visible;
	transform: translate(-50%, 0);
	transition: opacity .3s var(--ease, ease), transform .3s var(--ease, ease), visibility 0s;
}

.rh-nav__sub {
	display: block;
	padding: .6rem .8rem;
	border-radius: 9px;
	font-size: .95rem;
	color: var(--color-primary, #082246);
	text-decoration: none;
	white-space: nowrap;
}

.rh-nav__sub:hover,
.rh-nav__sub:focus-visible { background: var(--color-bg, #F0EEE9); color: var(--gold-muted, #B09850); }

/* ---- right side ---- */

.rh-header__cta { display: flex; align-items: center; gap: 1.4rem; }

.rh-header__tel {
	font-weight: 500;
	font-size: .98rem;
	color: var(--color-primary, #082246);
	text-decoration: none;
}

.rh-header__tel:hover { color: var(--gold-muted, #B09850); }

.rh-burger { display: none; background: none; border: 0; cursor: pointer; padding: .6rem; margin-right: -.6rem; }
.rh-burger span { display: block; width: 26px; height: 2px; background: var(--color-primary, #082246); transition: transform .4s var(--ease, ease), opacity .3s; }
.rh-burger span + span { margin-top: 7px; }

body.rh-menu-open .rh-burger span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.rh-menu-open .rh-burger span:nth-child(2) { opacity: 0; }
body.rh-menu-open .rh-burger span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* ---- phone ---- */

@media (max-width: 1024px) {
	.rh-burger { display: block; }
	.rh-header__tel { display: none; }

	.rh-nav {
		position: fixed;
		inset: 0;
		z-index: 110;
		background: var(--color-primary, #082246);
		flex-direction: column;
		justify-content: center;
		align-items: flex-start;
		gap: 0;
		padding: var(--gutter, 1.25rem);
		opacity: 0;
		visibility: hidden;
		transition: opacity .45s var(--ease, ease), visibility 0s .45s;
		overflow-y: auto;
	}

	body.rh-menu-open .rh-nav {
		opacity: 1;
		visibility: visible;
		transition: opacity .45s var(--ease, ease);
	}

	.rh-nav__item { width: 100%; }

	.rh-nav__link {
		font-family: var(--font-heading, sans-serif);
		font-size: clamp(1.7rem, 7vw, 2.4rem);
		letter-spacing: -.02em;
		color: var(--cream, #FAF7F3);
		padding: .55rem 0;
	}

	.rh-nav__link::after { display: none; }

	/* the panel is always open on a phone: a hover target is no use here.
	   `visibility: inherit`, not `visible`: a child set to visible shows through
	   a hidden parent, so while the menu was closed (the nav at opacity 0 and
	   hidden) these links stayed invisible but tappable over the page, and a tap
	   on a form field went to a service page (22 Sep 2026). */
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel {
		position: static;
		transform: none;
		opacity: 1;
		visibility: inherit;
		background: none;
		border: 0;
		box-shadow: none;
		padding: 0 0 .8rem 0;
		min-width: 0;
	}

	.rh-nav__sub { color: var(--gold, #F1C654); font-size: 1.05rem; padding: .35rem 0; }
	.rh-nav__caret { display: none; }
}

/* The WordPress toolbar sits above a fixed header (01 §1). */
.admin-bar .rh-header { top: var(--wp-admin--admin-bar--height, 32px); }

@media screen and (max-width: 600px) {
	/* Below 601px WordPress lets the toolbar scroll away, which leaves a gap above a
	   fixed header and drops the menu panel over it. */
	html #wpadminbar { position: fixed; }
}

@media (max-width: 1024px) {
	.admin-bar .rh-nav { top: var(--wp-admin--admin-bar--height, 32px); }

	/* A filter, transform or backdrop-filter on the header makes it the containing block
	   for a position:fixed menu inside it, which collapses the open menu. */
	body.rh-menu-open .rh-header { -webkit-backdrop-filter: none; backdrop-filter: none; }
}

/* The fixed header takes no space, so the first section clears it. */
.site-main { padding-top: var(--header-h, 5rem); }
.home .site-main { padding-top: 0; }   /* the hero runs under it */

/* Below 860px the header is the logo and the burger only — the phone number
   and the CTA move into the menu sheet. Left in, "Start Your Project" wrapped
   onto three lines and pushed the header to 79px (prototype: .hd nav,
   .hd-cta .tel, .hd-cta .btn { display: none }). */
@media (max-width: 860px) {
	.rh-header__tel,
	.rh-header__cta .rh-btn { display: none; }
}

/* ---- the menu panel on phones (prototype .sheet) ---- */
@media (max-width: 860px) {
	/* The panel sits below the bar so the logo and the close button stay
	   visible; it was covering the whole screen including the header. */
	.rh-nav {
		top: var(--rh-header-h, 80px);
		height: auto;
		bottom: 0;
		padding: 2rem 1.25rem;
		justify-content: flex-start;
		overflow-y: auto;
	}

	/* Sub-items: the prototype's .sheet-sub, exactly. The panel inherited the
	   desktop dropdown's 14px radius — which bent the rule at both ends — and
	   its gold link colour. In the sheet the links are muted, gold on hover. */
	.rh-nav__panel {
		display: flex;
		flex-direction: column;
		margin: -.3rem 0 .5rem;
		padding: 0 0 0 1.05rem;
		border: 0;
		border-left: 1px solid var(--navy-line, rgb(238 243 248 / .14));
		border-radius: 0;
		background: none;
		box-shadow: none;
	}
	.rh-nav__sub {
		font-family: var(--font-body, sans-serif);
		font-weight: 400;
		letter-spacing: 0;
		font-size: 1.04rem;
		color: var(--navy-dim, #AFC0D0);
		padding: .32rem 0;
	}
	.rh-nav__sub:hover,
	.rh-nav__sub:focus-visible { color: var(--color-accent, #F1C654); }

	.rh-nav__foot { margin-top: 1.4rem; }
	.rh-nav__cta {
		display: block;
		font-family: var(--font-heading, sans-serif);
		font-weight: 500;
		letter-spacing: -.02em;
		font-size: clamp(1.7rem, 7vw, 2.4rem);
		color: var(--cream, #FAF7F3);
		text-decoration: none;
		padding: .55rem 0;
	}
	.rh-nav__cta em {
		font-family: var(--serif, Georgia, serif);
		font-style: italic;
		font-weight: 300;
		font-size: .95em;
		color: var(--color-accent, #F1C654);
	}
	.rh-nav__call { margin-top: 2.5rem; color: var(--navy-dim, #AFC0D0); }
	.rh-nav__call a { color: var(--color-accent, #F1C654); text-decoration: none; }
}

/* On desktop the panel extras belong only to the phone menu. */
@media (min-width: 861px) { .rh-nav__foot { display: none; } }

/* The accented last word of a two-word label (the walker wraps it). Plain in
   the desktop bar, the serif accent in the phone sheet — as the prototype's
   "Our <span class="em">Process</span>". */
.rh-nav__em { font: inherit; color: inherit; letter-spacing: inherit; }

@media (max-width: 860px) {
	.rh-nav__link .rh-nav__em {
		font-family: var(--serif, Georgia, serif);
		font-style: italic;
		font-weight: 300;
		font-size: .95em;
		letter-spacing: 0;
		color: var(--color-accent, #F1C654);
	}
}

/* In the phone menu the Services list is always open and sits in the flow.
   The desktop dropdown opens on :hover / :focus-within by setting
   `transform: translate(-50%, 0)` — and on a phone, hovering or tapping a
   sub-link also counts as hovering Services, so that rule fired and pulled the
   whole list left by half its width. The resting and the opened state are
   pinned to the same values here, so nothing can move. */
@media (max-width: 860px) {
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel {
		position: static;
		left: auto;
		top: auto;
		transform: none;
		min-width: 0;
		opacity: 1;
		visibility: inherit;
		box-shadow: none;
		transition: none;
	}

	/* No desktop hover pill either — the link just turns gold. */
	.rh-nav__sub:hover,
	.rh-nav__sub:focus-visible { background: none; }
}

@media (max-width: 860px) {
	/* "Start Your Project" is one more link in the list, spaced like the others
	   (prototype: it is just another `.sheet a`). The extra top margin here made
	   the gap above it twice the rest. The call line keeps its own 2.5rem. */
	.rh-nav__foot { margin-top: 0; }

	/* The sheet's links stay cream on hover, as `.sheet a` does. Without this
	   the theme's default link hover — navy — applied, and navy on the navy
	   sheet disappeared. The gold accent words keep their own colour. */
	.rh-nav__link:hover,
	.rh-nav__link:focus-visible,
	.rh-nav__cta:hover,
	.rh-nav__cta:focus-visible { color: var(--cream, #FAF7F3); }
}


/* ==== 11-footer.css ==== */
/* Footer — ported from the prototype. Part 11: site chrome, left out of the editor build. */

.rh-footer {
	background: var(--color-primary, #082246);
	color: var(--navy-dim, #AFC0D0);
	padding-block: clamp(3.5rem, 6vw, 5.5rem) 2rem;
}

.rh-footer__inner,
.rh-footer__bar {
	max-width: var(--container-max-width, 1240px);
	margin-inline: auto;
	padding-inline: var(--gutter, clamp(1.25rem, 4vw, 3.5rem));
}

.rh-footer__inner {
	display: grid;
	gap: 2.8rem;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.rh-footer__brand img { width: 180px; height: auto; margin-bottom: 1.2rem; display: block; }
.rh-footer__brand p { font-size: .98rem; max-width: 20.5em; } /* 30ch in the prototype font; see 35-sections on ch */

.rh-footer__title {
	font-family: var(--font-body, sans-serif);
	font-weight: 500;
	font-size: .92rem;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-muted, #B09850);
	margin-bottom: 1.1rem;
}

.rh-footer__col ul { list-style: none; margin: 0; padding: 0; }
.rh-footer__col li { margin-bottom: .55rem; }

.rh-footer__col a {
	color: inherit;
	text-decoration: none;
	transition: color .3s var(--ease, ease);
}

.rh-footer__col a:hover,
.rh-footer__col a:focus-visible { color: var(--color-accent, #F1C654); }

.rh-footer__bar {
	border-top: 1px solid var(--navy-line, rgb(238 243 248 / .14));
	margin-top: 3.2rem;
	padding-top: 1.6rem;
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	font-size: .9rem;
}

/* Two columns on tablets, one on phones — four narrow columns wrap badly. */
@media (max-width: 1020px) {
	.rh-footer__inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 520px) {
	.rh-footer__inner { grid-template-columns: 1fr; }
}


/* ==== 20-widths.css ==== */
/* Widths: None / Wide / Full (01 §3). */

/* Top-level core blocks on block-built pages.
   Arenex sections are excluded: they are full-width bands that carry their own
   container, so constraining them here squeezes every section into the reading column
   (01 §3: list every section class the site renders in :not()). */
:is(.home, .page-template-page-blocks) .site-main > :not(.alignfull, [class*="arenex-"]) {
	max-width: var(--content-max-width);
	margin-inline: auto;
	padding-inline: var(--gutter);
	margin-block: var(--gap-lg);
}

:is(.home, .page-template-page-blocks) .site-main > .alignwide {
	max-width: var(--container-max-width);
}

:is(.home, .page-template-page-blocks) .site-main > .alignfull {
	max-width: none;
	margin-inline: 0;
	padding-inline: 0;
}

/* A Group set to Full width = background edge to edge, contents in the container. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull {
	padding-block: var(--section-padding, 110px);
	padding-inline: var(--gutter);
}

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull > .wp-block-group__inner-container {
	max-width: var(--container-max-width);
	margin-inline: auto;
}

/* A Cover set to Full width is a photo band — it manages its own padding. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover.alignfull {
	padding-inline: 0;
}


/* ==== 30-text.css ==== */
/* The serif accent word. */

/* Applied as the "Accent" format or an inline <em> inside a heading:
   "Start <em>step one.</em>" — the second half turns to italic serif gold. */
.has-accent-word,
.site-main h1 em,
.site-main h2 em,
.site-main h3 em {
	font-family: var(--serif);
	font-style: italic;
	font-weight: 300;
	font-size: .95em;
	letter-spacing: 0;
}

/* On navy the accent is gold; on cream it stays navy. */
.has-primary-background-color .has-accent-word,
.has-dark-background-color .has-accent-word,
.wp-block-cover .has-accent-word,
.has-primary-background-color h2 em,
.wp-block-cover h2 em {
	color: var(--wp--preset--color--accent, #F1C654);
}


/* ==== 35-sections.css ==== */
/* Section rhythm and the shared bits every prototype section relies on.

   The prototype sets `section { padding-block: var(--sec) }` with
   --sec: clamp(64px, 7vw, 110px), plus a .kicker eyebrow and the .em serif
   accent. None of that existed here, so every band ran together with core's
   default margins (prototype: site.css "sections"). */

:root {
	--sec: clamp(64px, 7vw, 110px);
	--wrap: 1240px;
	--gut: clamp(1.25rem, 4vw, 3.5rem);
	/* The plugin's blocks (process, cards, split, strip, steps) pad their own
	   container with the parent's --container-padding — a fixed 32px from the
	   Customizer. The prototype's gutter is fluid, so the process photo started
	   15px left of every other section. Pointing the parent tokens at the
	   prototype's values gives every block the same edge. */
	--container-padding: var(--gut);
	--container-max-width: var(--wrap);
	/* Body text is 1.06rem (16.96px) at every width in the prototype. The
	   Customizer's scale is whole pixels — 17 on desktop, 16 on tablet and
	   phone — so text wrapped differently: on desktop a 0.4px difference pushed
	   "or call 540-661-6833" under the button, and on phones every paragraph
	   ran shorter. This part prints after the Customizer, so it wins. */
	--body-size: 1.06rem;
	/* Menu links are .98rem (15.68px) in the prototype; the Customizer's 15px
	   drew the items closer together. */
	--menu-size: .98rem;
}

/* The prototype's tablet rhythm: 80px section padding between 600 and 1020px
   (site.css "tablet: a touch more vertical rhythm"). The clamp alone gives 64px
   at 768, which left every band 32px short on tablets. */
@media (min-width: 600px) and (max-width: 1020px) {
	:root { --sec: 80px; }
}

/* Top-level bands get the prototype's vertical rhythm.

   This must NOT hit every <section>: the plugin's blocks render as <section>
   too, and several are not full bands. The ticker is a 60px strip in the
   design; the blanket rule made it 230px. Blocks that carry their own padding
   are excluded and tuned in their own part. */
:is(.home, .page-template-page-blocks) .site-main > :is(.wp-block-group.alignfull, .wp-block-columns.alignfull, .wp-block-group.is-style-services) {
	padding-block: var(--sec);
	margin-block: 0;
}

/* The plugin sections that are full bands in this design. */
:is(.home, .page-template-page-blocks) .site-main > :is(.arenex-split, .arenex-strip, .arenex-process) {
	padding-block: var(--sec);
	margin-block: 0;
}

/* The ticker is a strip, not a band. */
:is(.home, .page-template-page-blocks) .site-main > .arenex-ticker {
	padding-block: 0;
	margin-block: 0;
}

/* The hero is full-bleed and sets its own padding. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover { padding-block: 0; }

/* The eyebrow above a section heading. */
.kicker,
.is-style-kicker {
	font-weight: 500;
	font-size: .95rem;
	letter-spacing: .02em;
	color: var(--gold-muted, #B09850);
	margin-bottom: 1.1rem;
}

/* The serif accent. 30-text.css covers <em>; the pages built from the prototype
   use <span class="em">, which matched nothing. */
.site-main :is(.em, em):not(i) {
	font-family: var(--serif, Georgia, serif);
	font-style: italic;
	font-weight: 300;
	font-size: .95em;
	letter-spacing: 0;
}

/* Headings follow the prototype's scale, tracking and line balancing.

   The sizes already matched; the tracking did not. The prototype sets
   -0.025em, the theme was inheriting -0.01em, which left the type looser than
   the design. `text-wrap: balance` is what makes the prototype break "The
   house is right." onto its own line instead of carrying "The" over. */
.site-main :is(h1, h2, h3) { letter-spacing: -.025em; text-wrap: balance; }
.site-main h1 { font-size: clamp(2.5rem, 5.4vw, 4.35rem); line-height: 1.04; }
.site-main h2 { font-size: clamp(2.1rem, 5vw, 3.15rem); line-height: 1.08; }
.site-main h3 { font-size: 1.35rem; line-height: 1.3; }

/* The serif accent keeps normal tracking, as .em does in the prototype. */
.site-main :is(h1, h2, h3) :is(.em, em) { letter-spacing: 0; }

/* Paragraph rhythm.

   The prototype zeroes every margin and then adds space with margin-top on the
   sections that need it (.about p { margin-top: 1.3rem } and so on).
   WordPress adds a 16px bottom margin to paragraphs, so every gap came out at
   36.8px where the design has 20.8px. Bottom margins go, and the sections keep
   setting the top. */
:is(.home, .page-template-page-blocks) .site-main p { margin-block-end: 0; }

/* The prototype caps every paragraph at 62 characters (site.css `p{max-width:62ch}`).
   Without it the service-area line ran the full 1128px on one line where the
   design wraps it to two. Sections that set their own measure (statement 56ch,
   process text) override this with a more specific rule.

   Written in em, not ch: `ch` is the width of the font's "0", so it changes with
   the font file. The first DM Sans file here had no digits at all and 62ch came out
   486px instead of 666px. 62 × 0.685 = 42.5em is the prototype's measure whatever
   the file. */
.site-main p { max-width: 42.5em; }
/* The split block caps its paragraphs at 56ch; the prototype keeps 62ch there too. */
.site-main .arenex-split__body p:not(.is-style-eyebrow, .is-style-lead) { max-width: 42.5em; }

/* The prototype resets every margin to 0 (`*{margin:0}`) and spaces things with
   the next element's margin-top. The parent theme gives headings 0.5em below,
   which added 25px under the founder and process headings. Sections that want
   space under a heading set it with a more specific rule (.svc h2, .rev h2). */
.site-main :where(h1, h2, h3, h4, h5, h6) { margin-block: 0; }

/* Core gives Columns a 1.75em bottom margin; the prototype's grids have none.
   It made the founder band 31px taller. */
.site-main :where(.wp-block-columns) { margin-block-end: 0; }

/* The last paragraph before a button still needs air. */
:is(.home, .page-template-page-blocks) .site-main p + .wp-block-buttons { margin-top: 2.3rem; }

/* Tighter side gutter on tablet and below.

   Note this is a deliberate change from the prototype, not a fix: its
   --gut is clamp(1.25rem, 4vw, 3.5rem), which computes to the same 30.72px
   at 768px. Narrowing it gives the cards and photos more room on tablet. */
@media (max-width: 900px) {
	:root { --gut: clamp(1rem, 2.2vw, 1.25rem); }
}

/* `overflow-x: hidden` on the page makes it a scroll container, which stops
   position: sticky working anywhere inside — that is why the process photo
   would not stick. `clip` does the same job of preventing sideways scroll
   without creating a scroll container. */
html,
body {
	overflow-x: clip;
}

/* One gutter, everywhere.

   Every section's content starts on the same line in the prototype: a
   full-bleed band with a 1240px `.wrap` inside, padded by one --gut. Here the
   theme's width rule (20-widths.css) already padded each full-width band by a
   gutter, and each section's own part then padded its inner container by
   another — so services, statement, founder and reviews started a full gutter
   further in than the hero and projects. The band carries no side padding; its
   inner container carries exactly one. */
:is(.home, .page-template-page-blocks) .site-main > :is(.wp-block-group, .wp-block-columns).alignfull {
	padding-inline: 0;
}

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull > .wp-block-group__inner-container {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	width: 100%;
	box-sizing: border-box;
}

/* The intro is a plugin block with its own container padding. Give it the
   same 1240px + one gutter, so its words line up with every other section. */
.site-main .arenex-split__grid {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	box-sizing: border-box;
}


/* ==== 40-hero.css ==== */
/* Hero — ported from the prototype's .hero.

   The page renders a core Cover with the class rh-hero. Core gives it a flat
   60% dim; the prototype uses a directional gradient that keeps the house
   visible on the right and lets white type sit on the left. Core also centres
   its inner container, where the prototype anchors the text to the bottom. */

.is-style-hero {
	position: relative;
	min-height: 100svh;
	display: flex;
	align-items: flex-end;
	background: var(--color-primary, #082246);
	padding: 0;
}

/* The photo: cover, weighted slightly above centre, with the slow settle. */
.is-style-hero > .wp-block-cover__image-background {
	object-fit: cover;
	object-position: center 38%;
	animation: rh-hero-zoom 18s var(--ease, ease) forwards;
}

@keyframes rh-hero-zoom {
	from { transform: scale(1.08); }
	to   { transform: scale(1); }
}

/* Replace core's flat dim with the prototype's gradient. */
.is-style-hero > .wp-block-cover__background {
	background: linear-gradient(
		to top,
		rgb(8 34 70 / .88) 0%,
		rgb(8 34 70 / .52) 30%,
		rgb(8 34 70 / .12) 58%,
		rgb(8 34 70 / .18) 100%
	);
	opacity: 1;
}

/* The container: prototype .wrap, bottom-aligned. */
.is-style-hero > .wp-block-cover__inner-container {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	padding-block: 0 clamp(3rem, 7vh, 5.5rem);
}

.is-style-hero h1 {
	color: #fff;
	max-width: 20ch;
	font-size: clamp(2.4rem, 4.7vw, 4.1rem);
	margin-bottom: clamp(1.6rem, 3.5vh, 2.6rem);
}

.is-style-hero h1 .em { color: var(--cream, #FAF7F3); }

/* Button and "or call" sit on one line, as .hero-cta does. */
.is-style-hero .wp-block-buttons { margin-bottom: 0; }

.is-style-hero .is-style-call {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	color: var(--cream, #FAF7F3);
	font-weight: 500;
	white-space: nowrap;
}

.is-style-hero .is-style-call a {
	color: inherit;
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	transition: color .3s var(--ease, ease);
}
.is-style-hero .is-style-call a:hover { color: var(--color-accent, #F1C654); }

/* From tablet up the hero is a wide band, not a full screen, and the gradient
   runs left-to-right so the type has a dark field and the house stays lit. */
@media (min-width: 768px) {
	.is-style-hero { min-height: min(100svh, 58vw); }

	.is-style-hero > .wp-block-cover__background {
		background:
			linear-gradient(to right, rgb(8 34 70 / .82) 0%, rgb(8 34 70 / .45) 42%, rgb(8 34 70 / .08) 72%, rgb(8 34 70 / 0) 100%),
			linear-gradient(to top, rgb(8 34 70 / .55) 0%, rgb(8 34 70 / 0) 38%);
	}

	.is-style-hero > .wp-block-cover__inner-container { padding-block: 0 clamp(3.5rem, 9vh, 6.5rem); }
}

@media (prefers-reduced-motion: reduce) {
	.is-style-hero > .wp-block-cover__image-background { animation: none; }
}

/* The button and "or call" sit on one line (prototype .hero-cta).

   They are siblings inside the Cover's inner container, with the heading above
   them, so the row is made with grid areas. An earlier version pulled the
   phone number up with a negative margin and a fixed left offset — that broke
   the moment the button grew its arrow chip and the two overlapped. */
.is-style-hero > .wp-block-cover__inner-container {
	display: grid;
	grid-template-columns: auto auto minmax(0, 1fr);
	grid-template-areas:
		"head head head"
		"btn  call ."
		;
	justify-items: start;
	align-items: center;
	column-gap: 1.8rem;
}

.is-style-hero h1 { grid-area: head; }
.is-style-hero .wp-block-buttons { grid-area: btn; margin: 0; }
.is-style-hero .is-style-call { grid-area: call; }

@media (max-width: 600px) {
	.is-style-hero > .wp-block-cover__inner-container {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: "head" "btn" "call";
		row-gap: 1.1rem;
	}
}

/* Below 860px the hero goes back to a full screen. The prototype's
   `min-height: min(100svh, 58vw)` is a desktop rule that its
   `@media (max-width:860px){ .hero{min-height:100svh} }` overrides — without
   that override a 768px tablet got a 445px letterbox instead of a full hero. */
@media (max-width: 860px) {
	.is-style-hero { min-height: 100svh; }
	.is-style-hero > .wp-block-cover__image-background { object-position: center 30%; }
	.is-style-hero > .wp-block-cover__inner-container { padding-bottom: 2.6rem; }
	.is-style-hero h1 { font-size: clamp(1.9rem, 8.5vw, 2.75rem); }
}


/* ==== 41-ticker.css ==== */
/* Ticker — the plugin block wearing the prototype's colours.

   arenex/ticker ships dark (navy band, light text). The prototype's strip is
   the opposite: white, hairline under it, navy text, and a gold dot before each
   item. Site-specific styling of a shared block belongs in the child theme, not
   in the plugin, so other sites keep the shipped look. */

.site-main .arenex-ticker {
	background: #fff;
	border-bottom: 1px solid var(--color-border, #E7E0D4);
	color: var(--color-primary, #082246);
}

.site-main .arenex-ticker__item {
	display: flex;
	align-items: center;
	gap: .65rem;
	white-space: nowrap;
	padding: 1.05rem 1.9rem 1.05rem 0;
	font-weight: 500;
	font-size: .97rem;
	color: var(--color-primary, #082246);
}

/* The gold dot the prototype puts before each item. */
.site-main .arenex-ticker__item::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--gold-muted, #B09850);
	flex: none;
}

/* The strip is 60px in the design: the height comes from the items' own
   padding, nothing else. The plugin also ships a pause button in a filled
   block at the right edge, which the prototype has no equivalent for — it is
   hidden rather than removed so the block keeps working on other sites. */
.site-main .arenex-ticker { padding-block: 0; }
.site-main .arenex-ticker__pause { display: none; }
.site-main .arenex-ticker__track { align-items: center; }
.site-main .arenex-ticker__list { margin: 0; padding: 0; }

/* The plugin separates items with a vertical rule. The prototype separates
   them with the gold dot alone, so the rule comes off. */
.site-main .arenex-ticker__item { border: 0; }


/* ==== 42-stmt.css ==== */
/* Statement band — the prototype's .stmt.
   A centred line of large, light heading type. The page renders it as a Group
   with the primary background; the prototype's is cream with dark ink, so the
   colour comes from whatever the block is set to and only the type is set here. */

.is-style-statement { text-align: center; }

.is-style-statement > .wp-block-group__inner-container {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
}

.is-style-statement :is(p, h2) {
	font-family: var(--font-heading, sans-serif);
	font-weight: 400;
	letter-spacing: -.015em;
	/* Near-black, as .stmt .big is — it was inheriting body grey. */
	color: var(--ink, #101820);
	font-size: clamp(1.4rem, 2.4vw, 2.15rem);
	line-height: 1.45;
	max-width: 56ch;
	margin-inline: auto;
}


/* ==== 43-svc.css ==== */
/* Services grid — the prototype's .svc, rendered by arenex/cards.

   The block now carries a photo field, so this is a real editable block: the
   client picks the photo, title and link in the editor. It was briefly a
   core/html block because cards had no image field — that is fixed in the
   plugin, additively, so sites without photos are unchanged.

   A card with a photo gets .has-photo and the photo replaces the icon-and-
   number row. */

.wp-block-group.is-style-services {
	background: #fff;
	border-block: 1px solid var(--color-border, #E7E0D4);
}

.wp-block-group.is-style-services > .wp-block-group__inner-container,
.wp-block-group.is-style-services > * {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	width: 100%;
}

.is-style-services h2 { max-width: 27ch; margin-bottom: clamp(2.5rem, 5vw, 4rem); }

/* The grid. */
.site-main .is-style-services .arenex-cards__grid,
.site-main .arenex-cards__grid {
	display: grid;
	gap: clamp(2rem, 3.5vw, 3rem) clamp(1.5rem, 2.5vw, 2.5rem);
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	list-style: none;
	margin: 0;
	padding: 0;
}

/* A photo card: the photo, then the name and the arrow on one row.

   The row is a grid, not a negative margin: pulling the link up with
   margin-top left the arrow sitting below the title's line. The block draws a
   flat right arrow; the prototype's is the diagonal one, so the block's icon
   is hidden and the diagonal is drawn as ::after. The link is stretched over
   the whole card, as the prototype's card is one <a>. */
.site-main .arenex-cards__card.has-photo {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-areas: "media media" "title link";
	align-items: center;
	column-gap: 1rem;
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
	box-shadow: none;
}

.site-main .has-photo .arenex-cards__media  { grid-area: media; }
.site-main .has-photo .arenex-cards__title  { grid-area: title; }
.site-main .has-photo .arenex-cards__link   { grid-area: link; }

.site-main .arenex-cards__media {
	margin: 0;
	border-radius: var(--radius-sm, 14px);
	overflow: hidden;
	display: block;
}

.site-main .arenex-cards__img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	display: block;
	transition: transform .8s var(--ease, ease);
}

.site-main .arenex-cards__item:hover .arenex-cards__img { transform: scale(1.045); }

.site-main .has-photo .arenex-cards__title {
	font-size: 1.22rem;
	line-height: 1.3;
	padding-top: 1.05rem;
	margin: 0;
	transition: color .3s var(--ease, ease);
}

/* The link: its words are for screen readers, the diagonal arrow is what shows,
   and its ::before covers the card so the whole card is the click target. */
.site-main .has-photo .arenex-cards__link {
	position: static;
	display: block;
	padding-top: 1.05rem;
	margin: 0;
	font-size: 0;
	line-height: 0;
	text-decoration: none;
}
.site-main .has-photo .arenex-cards__link svg { display: none; }
.site-main .has-photo .arenex-cards__link::after {
	content: "";
	display: block;
	width: 1.05rem;
	height: 1.05rem;
	background: var(--gold-muted, #B09850);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
	transition: transform .45s var(--ease, ease);
}
.site-main .has-photo .arenex-cards__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}
.site-main .has-photo .arenex-cards__link:focus-visible::before {
	outline: 2px solid var(--gold-muted, #B09850);
	outline-offset: 4px;
	border-radius: var(--radius-sm, 14px);
}

.site-main .arenex-cards__item:hover .arenex-cards__title { color: var(--gold-muted, #B09850); }
.site-main .arenex-cards__item:hover .arenex-cards__link::after { transform: translate(3px, -3px); }

/* A photo card has no panel, so it takes none of the panel's hover lift. */
.site-main .arenex-cards__card.has-photo:hover { box-shadow: none; border-color: transparent; transform: none; }

.is-style-area {
	margin-top: clamp(2.5rem, 5vw, 3.5rem);
	color: var(--color-muted, #5B6875);
	font-size: .98rem;
	max-width: none;
}
.is-style-area b { color: var(--color-primary, #082246); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
	.site-main .arenex-cards__img,
	.site-main .has-photo .arenex-cards__link svg { transition: none; }
}



/* ==== 44-about.css ==== */
/* The founder band — the prototype's .about.
   Navy background, white heading with a gold serif accent, photo alongside at
   full height. The page renders it as a Group with the class rh-history. */

.is-style-founder {
	background: var(--color-primary, #082246);
	color: var(--navy-dim, #AFC0D0);
}

.is-style-founder > .wp-block-group__inner-container {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
}

.is-style-founder :is(h2, h3) { color: #fff; }
/* The accent is written as <em> in the page, and as .em in the blocks that
   carry a span — cover both or the second half of the heading vanishes. */
.is-style-founder h2 :is(.em, em) { color: var(--color-accent, #F1C654); font-style: italic; }
.is-style-founder p { margin-block: 1.3rem 0; line-height: 1.7; color: var(--navy-dim, #AFC0D0); }
.is-style-founder p b, .is-style-founder strong { color: var(--navy-fg, #EEF3F8); font-weight: 500; }

.is-style-founder .wp-block-image {
	border-radius: var(--radius, 24px);
	overflow: hidden;
	margin: 0;
}

.is-style-founder .wp-block-image img {
	width: 100%;
	height: 100%;
	min-height: 480px;
	object-fit: cover;
}

.is-style-founder .wp-block-buttons { margin-top: 2.3rem; }

@media (max-width: 959px) {
	.is-style-founder .wp-block-image img { min-height: 0; aspect-ratio: 4 / 3.2; height: auto; }
}

/* The copy and the photo share a row; the photo fills its column's height. */
.is-style-founder .wp-block-columns { align-items: stretch; gap: clamp(2.5rem, 6vw, 5rem); }
.is-style-founder .wp-block-columns > .wp-block-column { display: flex; flex-direction: column; justify-content: center; }
.is-style-founder .wp-block-columns .wp-block-image { height: 100%; }
.is-style-founder .wp-block-columns .wp-block-image img { height: 100%; min-height: 480px; object-fit: cover; }

@media (max-width: 959px) {
	.is-style-founder .wp-block-columns .wp-block-image img { min-height: 0; aspect-ratio: 4 / 3.2; height: auto; }
}


/* ==== 45-cta.css ==== */
/* Closing CTA — the prototype's .cta-card.
   A gold panel with the copy, and a photo filling the other half, the pair
   sharing one rounded corner radius. The page renders it as a Columns block
   with the class rh-cta. */

/* The prototype puts this on a white band, with the gold card inset in the
   1240px container and rounded. 20-widths.css strips padding from .alignfull
   children, so the container is restated here rather than inherited. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-columns.is-style-cta {
	max-width: none;
	background: #fff;
	/* The card is the 1240px .wrap minus its gutter, like every other section's
	   content. Capping each column at half of 1240 made the card a gutter wider
	   than the rest of the page on both sides from 1240px up. */
	padding-inline: max(var(--gut, 2rem), calc((100% - var(--wrap, 1240px)) / 2 + var(--gut, 2rem)));
	padding-block: var(--sec, 90px);
	gap: 0;
	border-radius: 0;
}

/* The two columns become one card. */
.is-style-cta > .wp-block-column:first-child { border-radius: var(--radius, 24px) 0 0 var(--radius, 24px); }
.is-style-cta > .wp-block-column:last-child  { border-radius: 0 var(--radius, 24px) var(--radius, 24px) 0; overflow: hidden; }

.is-style-panel {
	background: var(--gold-panel, #D8AE55);
	padding: clamp(2.6rem, 5.5vw, 4.5rem);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: flex-start;
}

.is-style-panel h2 { max-width: 14ch; margin-bottom: 0; }
.is-style-panel p { margin-top: 1.1rem; color: rgb(8 34 70 / .82); font-size: 1.12rem; }

/* Button and "or call" side by side, wrapping under each other when the panel
   is narrow (prototype .cta-panel .row). A Group block with a flex layout. */
.is-style-panel .wp-block-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.6rem;
	margin-top: 2.2rem;
	color: var(--color-primary, #082246);
}
.is-style-panel .wp-block-group .wp-block-buttons { margin: 0; }
.is-style-panel .is-style-call {
	margin: 0;
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	font-size: inherit;
	font-weight: 500;
	color: inherit;
	white-space: nowrap;
}
.is-style-panel .is-style-call a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid var(--gold-muted, #B8923A);
	padding-bottom: 2px;
	transition: border-color .3s var(--ease, ease), color .3s var(--ease, ease);
}
.is-style-panel .is-style-call a:hover { color: var(--gold-muted, #B8923A); }

.is-style-cta .is-style-fill { margin: 0; height: 100%; min-height: 300px; }
.is-style-cta .is-style-fill img { width: 100%; height: 100%; object-fit: cover; }

@media (min-width: 900px) { .is-style-cta .is-style-fill { min-height: 460px; } }


/* Stacked (below 900px, where the prototype's .cta-card stops being two
   columns): one card, photo on top, gold panel under it, both the full width
   of the container.

   The desktop rules centre the two halves with margin-left: auto on one and
   margin-right: auto on the other, each capped at half the container. Left in
   place when the columns stack, those margins pushed the panel right and the
   photo left, so the two stopped meeting and read as two broken pieces. */
@media (max-width: 899px) {
	:is(.home, .page-template-page-blocks) .site-main > .wp-block-columns.is-style-cta {
		flex-direction: column;
		flex-wrap: nowrap;
		gap: 0;
	}
	.is-style-cta > .wp-block-column {
		flex-basis: auto !important; /* the block writes flex-basis inline */
		width: 100%;
		max-width: var(--wrap, 1240px);
		margin-inline: 0;
	}
	/* Photo first, as .cta-media { order: -1 } does. */
	.is-style-cta > .wp-block-column:last-child {
		order: -1;
		border-radius: var(--radius, 24px) var(--radius, 24px) 0 0;
		overflow: hidden;
	}
	.is-style-cta > .wp-block-column:first-child { border-radius: 0 0 var(--radius, 24px) var(--radius, 24px); }
	/* The photo keeps its own shape when stacked — 520px tall at 768 — as the
	   prototype's does (its img is height:100% of an auto-height box, so it
	   falls back to the natural ratio). A fixed 240px cut it to a strip. */
	.is-style-cta .is-style-fill { height: auto; min-height: 300px; }
	.is-style-cta .is-style-fill img { height: auto; min-height: inherit; } /* fills the frame's min-height: a 16:9 photo left a strip under it on phones */
}
@media (max-width: 860px) {
	.is-style-cta .is-style-fill { min-height: 240px; }
	.is-style-panel { padding: clamp(1.6rem, 6vw, 2.1rem); }
	.is-style-panel .wp-block-group { margin-top: 1.7rem; }
	.is-style-panel .is-style-call { margin-top: .2rem; }
}


/* ==== 47-reviews.css ==== */
/* Reviews — the prototype's .rev: a white band with hairlines, the heading,
   the card grid and the Google link. Without the band the cards sat loose on
   the page background and the section ran 353px short of the design. */

.wp-block-group.is-style-reviews {
	background: #fff;
	border-block: 1px solid var(--color-border, #E7E0D4);
}

.is-style-reviews > .wp-block-group__inner-container,
.is-style-reviews > * {
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	width: 100%;
}

.is-style-reviews h2 { max-width: 27ch; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }

.rev-grid {
	display: grid;
	gap: 1.4rem;
	grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
	margin-top: clamp(2.2rem, 4vw, 3.2rem);
}

.rev-card {
	background: #FAFAFA;
	border: 1px solid #F0EDE7;
	border-radius: var(--radius-sm, 14px);
	padding: 1.5rem 1.5rem 1.6rem;
	display: flex;
	flex-direction: column;
	gap: .9rem;
	align-items: flex-start;
}

.rev-head { display: flex; align-items: center; gap: .8rem; width: 100%; }

.rev-av {
	width: 42px; height: 42px;
	border-radius: 50%;
	display: grid; place-items: center;
	color: #fff; font-weight: 500; font-size: 1.05rem;
	flex: none;
}

.rev-name { font-weight: 500; color: var(--color-heading, #101820); line-height: 1.25; }
.rev-src  { font-size: .82rem; color: var(--color-muted, #5B6875); }
.rev-g    { margin-left: auto; width: 22px; height: 22px; flex: none; }

.rev-stars { display: flex; align-items: center; gap: 3px; }
.rev-stars svg { width: 17px; height: 17px; }
.rev-check { width: 16px; height: 16px; margin-left: 4px; }

.rev-card p {
	font-size: .99rem;
	line-height: 1.62;
	color: var(--color-text, #3C4852);
	display: -webkit-box;
	-webkit-line-clamp: 5;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin: 0;
}

.rev-more { background: none; border: 0; padding: 0; font: inherit; font-size: .9rem; color: var(--color-muted, #5B6875); cursor: pointer; }
.rev-more:hover { color: var(--color-heading, #101820); }

.rev-all {
	display: inline-block;
	margin-top: 2.6rem;
	font-weight: 500;
	color: var(--color-primary, #082246);
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	text-decoration: none;
	transition: color .3s var(--ease, ease);
}
.rev-all:hover { color: var(--gold-muted, #B09850); }


/* "See all our reviews on Google" — an "Underlined link" paragraph (prototype
   .rev-all). */
.site-main p.is-style-link { margin-top: 2.6rem; }
.site-main p.is-style-link a {
	display: inline-block;
	font-weight: 500;
	color: var(--color-primary, #082246);
	text-decoration: none;
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	transition: color .3s var(--ease, ease);
}
.site-main p.is-style-link a:hover { color: var(--gold-muted, #B09850); }

/* On the service pages the reviews sit on the page ground, without the white
   band or its rules (prototype: .rev style="background:transparent;border-block:0"). */
.page-template-page-blocks .site-main > .wp-block-group.alignfull.is-style-reviews {
	background: transparent;
	border-block: 0;
}

/* The reviews widget from Site Settings → Reviews shortcode (inc/reviews.php), under the
   heading and above the Google link. */
.site-main .is-style-reviews .rh-reviews { margin-block: 0 clamp(1.8rem, 3vw, 2.6rem); }


/* ==== 48-intro.css ==== */
/* Intro — the prototype's .intro, rendered by arenex/split.

   Prototype: .intro .wrap is a 1.05fr/1fr grid from 900px, centred, and the
   photo is a 4/3 panel with a 24px radius.

   The plugin builds the media column differently: the figure carries
   `min-height: 100%` and the image is absolutely positioned to fill it. So the
   photo's height is whatever the text column happens to be — which flattened
   it to a wide strip and left the band ~190px short. The ratio therefore has
   to go on the figure, not the image. */

.site-main .arenex-split__grid {
	align-items: center;
	gap: clamp(2.5rem, 6vw, 5rem);
}

.site-main .arenex-split__figure {
	aspect-ratio: 4 / 3;
	min-height: 0;
	height: auto;
	border-radius: var(--radius, 24px);
	overflow: hidden;
	margin: 0;
}

/* Home's intro paragraph (.intro p). Only the "Narrower image" split: About's
   story uses "Wider image" with ordinary body paragraphs (53-inc.css). */
.site-main .is-style-image-narrow .arenex-split__body p {
	font-size: 1.18rem;
	line-height: 1.6;
	margin-top: 1.4rem;
}

@media (min-width: 900px) {
	.site-main .arenex-split__grid { grid-template-columns: 1.05fr 1fr; }
}

/* Stacked, the words come before the photo. The block's grid can put the
   figure first at this width, which reversed the design's reading order. */
@media (max-width: 899px) {
	/* stretch, not the desktop `center`: in a flex column, centre shrinks each
	   item to its content width, and the figure has none — the plugin
	   absolutely-positions the image inside it — so the photo collapsed to
	   0×0 and the text column sat centred with gaps either side. */
	.site-main .arenex-split__grid { display: flex; flex-direction: column; align-items: stretch; }
	.site-main .arenex-split__figure { width: 100%; }
	.site-main .arenex-split__body { order: 1; }
	.site-main .arenex-split__figure { order: 2; }
}


/* ==== 49-projects.css ==== */
/* Projects — the prototype's .proj, rendered by arenex/strip.

   Prototype: a white band with hairlines, the heading and the two round arrow
   buttons on one baseline, then a snapping rail of 620px cards at 4/3, and the
   "View all projects" link beneath. The plugin's cards are much smaller, which
   left the band 230px short. */

.wp-block-group.is-style-projects {
	background: #fff;
	border-block: 1px solid var(--color-border, #E7E0D4);
}

/* The band already carries the section padding, so the block sits flush. */
:is(.home, .page-template-page-blocks) .site-main > .is-style-projects .arenex-strip { padding-block: 0; }

.site-main .arenex-strip {
	/* The rail sizes its cards from this variable (default ~240px). The
	   prototype's are min(78vw, 620px), which is why only a quarter of each
	   photo was showing. Setting the variable keeps the block's own layout. */
	--arenex-strip-card: 620px;
}

/* Heading left, arrows right, sitting on the same baseline. */
.site-main .arenex-strip__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 2rem;
	margin-bottom: clamp(2.2rem, 4vw, 3.2rem);
}

/* The heading takes whatever the arrows leave (prototype .proj-head h2 has no
   cap); the plugin's cap wrapped longer headings like the kitchen page's. */
.site-main .arenex-strip__intro { margin: 0; max-width: none; }
.site-main .arenex-strip__nav { display: flex; gap: .6rem; }

.site-main .arenex-strip__nav button {
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	border: 1.5px solid var(--color-border, #E7E0D4);
	background: #fff;
	color: var(--color-primary, #082246);
	display: grid;
	place-items: center;
	cursor: pointer;
	transition: background .3s var(--ease, ease), border-color .3s var(--ease, ease), color .3s var(--ease, ease);
}
.site-main .arenex-strip__nav button:hover {
	background: var(--color-primary, #082246);
	border-color: var(--color-primary, #082246);
	color: var(--color-accent, #F1C654);
}
.site-main .arenex-strip__nav svg { width: 1.1rem; height: 1.1rem; stroke: currentColor; fill: none; stroke-width: 2; }

/* The rail: big cards that snap. The gap belongs on the track (the grid), not
   the body — the plugin's 12px gap and 6px/12px track padding made the cards
   sit closer and the rail 18px taller than the prototype's. */
.site-main .arenex-strip__track { gap: clamp(1rem, 2vw, 1.5rem); padding-block: 0; }

/* The rail runs to both edges of the window with the first card on the page's
   left edge, as the prototype's .rail does (padding-inline:
   max(gut, (100vw - wrap) / 2 + gut)). Without this it stopped at the
   container's right edge and the next photo was cut short. */
.site-main .is-style-projects .arenex-strip__body { margin-inline: calc(50% - 50vw); }
.site-main .is-style-projects .arenex-strip {
	--arenex-strip-inset: max(var(--gut, 2rem), calc((100vw - var(--wrap, 1240px)) / 2 + var(--gut, 2rem)));
}

.site-main .arenex-strip__card {
	scroll-snap-align: start;
	border-radius: var(--radius-sm, 14px);
	overflow: hidden;
	margin: 0;
}

.site-main .arenex-strip__card img {
	aspect-ratio: 4 / 3;
	width: 100%;
	object-fit: cover;
	display: block;
}

/* The prototype has no "01 / 04" counter at any width. Showing it made the
   head row 13px taller than the heading. */
.site-main .arenex-strip__status { display: none; }


/* "View all projects" sits under the rail as a ghost button, not as a text
   link in the head row (prototype .proj-more > .btn--ghost). It is a core
   Button block so the client can edit it. */
/* The button lines up with the left edge of the first card. The band's inner
   container already carries the one gutter (35-sections), so the button adds
   no padding of its own — an extra inset here pushed it a gutter further in. */
.is-style-projects .wp-block-buttons {
	max-width: none;
	margin: clamp(2.2rem, 4vw, 3rem) 0 0;
	padding-inline: 0;
	justify-content: flex-start;
}
.site-main .arenex-strip__link { display: none; }

/* On phones the "01 / 04" counter squeezed the heading into four short lines.
   The prototype's head is just the heading and the two arrows. */
@media (max-width: 860px) {
	/* The prototype keeps its 2rem gap beside the arrows at every width. */
	.site-main .arenex-strip__head { align-items: center; }
	.site-main .arenex-strip__intro { flex: 1 1 auto; min-width: 0; }
}


/* ==== 50-process-acc.css ==== */
/* Process — the prototype's .proc, built from arenex/process.

   Three differences from the shipped block, all fixed here so the steps stay
   editable in the editor:

   1. The block puts its head above the grid; the design has the heading and
      lead in the right column, beside the photo.
   2. The design layers two photos — a blurred one offset behind, and the sharp
      one in front with a white border. The block renders one image per step,
      all the same picture, so the second one becomes the blurred layer.
   3. The steps are a scroll-driven list; the design is a click-to-open
      accordion. 20-process-accordion.js turns the titles into buttons. */

@media (min-width: 960px) {
	/* Photo left and full height; head and steps stacked in the right column. */
	.site-main .arenex-process__inner {
		display: grid;
		grid-template-columns: 1fr 1.05fr;
		grid-template-rows: auto auto auto 1fr;
		column-gap: clamp(2.5rem, 6vw, 5rem);
		align-items: start;
	}
	/* The head slot is dissolved into the grid so the "Start step one" button,
	   which lives in it, can take the row under the steps (prototype .proc-btn).
	   Heading and lead fill rows 1–2 of the right column on their own.
	   On the front end ACF wraps the slot's blocks in .acf-innerblocks-container,
	   so that wrapper is dissolved too — rules aimed at `__head > *` hit the
	   wrapper and left the button above the steps. */
	.site-main :is(.arenex-process__head, .arenex-process__head > .acf-innerblocks-container, .arenex-process__grid) { display: contents; }
	.site-main .arenex-process__head :is(h1, h2, h3, h4, p, .wp-block-buttons) { grid-column: 2; }
	.site-main .arenex-process__media { grid-column: 1; grid-row: 1 / span 4; }
	.site-main .arenex-process__steps { grid-column: 2; grid-row: 3; }
	.site-main .arenex-process__head .wp-block-buttons { grid-row: 4; }
}

/* Stacked, as the prototype stacks it: photo, heading, lead, steps, button. */
@media (max-width: 959px) {
	.site-main .arenex-process__inner { display: flex; flex-direction: column; }
	.site-main :is(.arenex-process__head, .arenex-process__head > .acf-innerblocks-container, .arenex-process__grid) { display: contents; }
	.site-main .arenex-process__media { order: -1; }
	.site-main .arenex-process__head .wp-block-buttons { order: 1; }
}

.site-main .arenex-process__head .wp-block-buttons { margin: 2.4rem 0 0; }

.site-main .arenex-process__head h2 { margin-bottom: .9rem; }
.site-main .arenex-process__head p { margin-bottom: 2.2rem; font-size: 1.12rem; }
/* The plugin puts 24px between heading and lead; the prototype has none. */
.site-main .arenex-process__head h2 + p { margin-top: 0; }

/* ---- the two photos ---- */
.site-main .arenex-process__media {
	position: sticky;
	/* --header-height is not defined in this theme, so the calc() was invalid
	   and `top` fell back to auto — which means sticky never engages. The
	   prototype's --navh is 5rem, plus 2rem of air. */
	top: 7rem;
	max-height: none;
	background: none;
	padding: 0;
	overflow: visible;
	aspect-ratio: 4 / 3.1;
}

/* The sharp photo in front. */
.site-main .arenex-process__img[data-step="0"] {
	position: relative;
	display: block;
	width: 94%;
	margin-top: 12%;
	aspect-ratio: 4 / 3;
	height: auto;
	object-fit: cover;
	border-radius: 12px;
	border: 7px solid #fff;
	opacity: 1;
	inset: auto;
}

/* The soft one behind, offset up and to the right. */
.site-main .arenex-process__img[data-step="1"] {
	position: absolute;
	top: -7%;
	right: -4%;
	left: auto;
	width: 80%;
	height: auto;
	aspect-ratio: 4 / 3.4;
	object-fit: cover;
	border: 0;
	border-radius: var(--radius-sm, 14px);
	filter: blur(6px) saturate(.92);
	clip-path: inset(0 round var(--radius-sm, 14px)); /* keeps the blur inside the rounded edge, as the prototype's pre-blurred photo */
	opacity: 1;
	z-index: -1;
}

/* Only those two are used. */
.site-main .arenex-process__img:not([data-step="0"]):not([data-step="1"]) { display: none; }
.site-main .arenex-process__media-label { display: none; }

/* ---- the accordion ---- */
.site-main .arenex-process__steps { padding: 0; }
.site-main .arenex-process__rail { display: none; }
.site-main .arenex-process__list { gap: 0; border-top: 1px solid var(--color-border, #E7E0D4); list-style: none; }

.site-main .arenex-process__step {
	border-bottom: 1px solid var(--color-border, #E7E0D4);
	padding: 0;
	opacity: 1;
}

.site-main .arenex-process__num,
.site-main .arenex-process__step-img { display: none; }

.site-main .arenex-process__toggle {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	padding: 1.5rem 0;
	color: inherit;
}

.site-main .arenex-process__title {
	flex: 1;
	font-family: var(--serif, Georgia, serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.62rem;
	letter-spacing: 0;
	color: var(--ink, #101820);
	margin: 0;
	transition: color .3s var(--ease, ease);
}
.site-main .arenex-process__toggle:hover .arenex-process__title { color: var(--gold-muted, #B09850); }

/* The + that turns into a × when the step is open. */
.site-main .arenex-process__mark {
	flex: none;
	position: relative;
	width: 17px;
	height: 17px;
	transition: transform .5s var(--ease, ease);
}
.site-main .arenex-process__mark::before,
.site-main .arenex-process__mark::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--ink, #101820);
}
.site-main .arenex-process__mark::before { width: 100%; height: 1.5px; }
.site-main .arenex-process__mark::after  { width: 1.5px; height: 100%; }
.site-main .arenex-process__step.is-open .arenex-process__mark { transform: rotate(45deg); }

/* The panel: closed by default, opening on the step that is selected. The
   collapse happens on the wrapper the script adds, because a 0fr grid row can
   only hide a child element and the block renders the text as a bare <p>. */
.site-main .is-accordion .arenex-process__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows .55s var(--ease, ease);
}
.site-main .is-accordion .arenex-process__step.is-open .arenex-process__panel {
	grid-template-rows: 1fr;
}
/* min-height:0 is required or the row keeps the paragraph's min-content
   height and a line of text leaks out of the closed step. */
.site-main .is-accordion .arenex-process__panel > * { overflow: hidden; min-height: 0; }

/* Padding only while open: a 0fr row zeroes the element's height but its
   padding still renders, which leaked a line of text out of every closed
   step. */
.site-main .is-accordion .arenex-process__text {
	margin: 0;
	/* The prototype runs the text to the column edge less 3rem on the right
	   (.acc-body p { padding: 0 3rem 1.6rem 0 }). A 40ch cap held it to 340px
	   against the design's 523px. */
	max-width: none;
	padding-right: 3rem;
	color: var(--ink-2, #3C4852);
	padding-bottom: 0;
}
.site-main .is-accordion .arenex-process__step.is-open .arenex-process__text {
	padding-bottom: 1.6rem;
}

@media (max-width: 959px) {
	.site-main .arenex-process__media { position: relative; top: auto; margin-bottom: 1.5rem; }
}
@media (prefers-reduced-motion: reduce) {
	.site-main .is-accordion .arenex-process__panel,
	.site-main .arenex-process__mark { transition: none; }
}

/* Below 1024px the plugin hides __media and shows a photo inside each step
   instead. This design keeps the collage — stacked above the steps — so the
   media is put back and the per-step images stay hidden. Without this, the
   global `__step-img { display: none }` above left no photo at all on tablet
   and phone. */
@media (max-width: 1024px) {
	.site-main .arenex-process__media {
		display: block;
		position: relative;
		top: auto;
		margin-bottom: 1.5rem;
		aspect-ratio: 4 / 3.1;
	}
	.site-main .arenex-process__step-img { display: none; }
}

/* Stacked, the photo comes first, so the prototype adds headroom above it for
   the blurred layer's upward offset, and the row gap of its grid below it. */
@media (max-width: 959px) {
	:is(.home, .page-template-page-blocks) .site-main > .arenex-process.is-accordion { padding-top: calc(var(--sec) + 46px); }
	.site-main .arenex-process__media { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
}
@media (max-width: 860px) {
	.site-main .arenex-process__media { margin-bottom: calc(.5rem + clamp(2.5rem, 6vw, 5rem)); }
	/* Step text runs the full width on phones (.acc-body p padding 0). */
	.site-main .is-accordion .arenex-process__text { padding-right: 0; }
}
@media (max-width: 600px) {
	:is(.home, .page-template-page-blocks) .site-main > .arenex-process.is-accordion { padding-top: calc(var(--sec) + 66px); }
}

/* ---- "Single photo" (service pages) ----
   One photo, 4:4.6, rounded like the intro photo (prototype .intro-media with
   the image's own aspect-ratio 4/4.6) — not Home's sharp-over-blurred pair. The
   block renders one image per step, so only the first is shown. Kept sticky on
   desktop like Home's, as asked for there. */
.site-main .is-style-single-photo .arenex-process__media { aspect-ratio: auto; border-radius: var(--radius, 24px); overflow: hidden; }
.site-main .is-style-single-photo .arenex-process__img[data-step="0"] {
	width: 100%;
	margin: 0;
	aspect-ratio: 4 / 4.6;
	border: 0;
	border-radius: 0;
}
.site-main .is-style-single-photo .arenex-process__img:not([data-step="0"]) { display: none; }
@media (max-width: 1024px) {
	.site-main .is-style-single-photo .arenex-process__media { aspect-ratio: auto; }
}
/* Home's collage takes an extra .5rem below it on phones (.proc-media); the
   single photo is the prototype's .intro-media and takes only the grid gap. */
@media (max-width: 860px) {
	.site-main .is-style-single-photo .arenex-process__media { margin-bottom: clamp(2.5rem, 6vw, 5rem); }
}


/* ==== 51-page-hero.css ==== */
/* Page header — the prototype's service-page .shero, a Group with the "Page
   header" style, then the wide photo under it (an Image with "Wide banner").

   Prototype: white, the kicker and title on the left and the intro on the right
   (1.3fr / 1fr from 960px, bottom-aligned), with the fixed header's height added
   to the top padding. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull:is(.is-style-page-hero, .is-style-page-hero-cream) {
	background: #fff;
	padding-block: calc(var(--navh, 5rem) + clamp(3rem, 6vw, 5rem)) clamp(3rem, 6vw, 5rem);
}
/* "Page header on cream": the prototype's .shero--dim (Projects). */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-page-hero-cream { background: var(--cream-2, #F0EEE9); }
:is(.is-style-page-hero, .is-style-page-hero-cream) .wp-block-columns {
	gap: clamp(2rem, 4vw, 4.5rem);
	align-items: flex-end;
	margin: 0;
}
:is(.is-style-page-hero, .is-style-page-hero-cream) h1 { font-size: clamp(2.4rem, 4vw, 3rem); line-height: 1.12; }
:is(.is-style-page-hero, .is-style-page-hero-cream) h1 .em { display: block; margin-top: .12em; }
:is(.is-style-page-hero, .is-style-page-hero-cream) p:not(.is-style-eyebrow) { font-size: 1.14rem; line-height: 1.65; }
/* The prototype's `.shero p` reaches the kicker too, so "Services" is 18.24px
   here and 15.2px everywhere else. Kept, because that is how the design reads. */
.site-main :is(.is-style-page-hero, .is-style-page-hero-cream) p.is-style-eyebrow { font-size: 1.14rem; }

/* The kicker ("Services", "Is your project a good fit?"): the prototype's .kick,
   not the plugin's uppercase eyebrow: a plain block of text with no rule drawn
   before it. The plugin's inline-flex also sat it on a text line, 6px low. */
.site-main p.is-style-eyebrow::before { content: none; }
.site-main p.is-style-eyebrow {
	display: block;
	font-family: var(--font-body, 'DM Sans', sans-serif);
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.65;
	letter-spacing: .02em;
	text-transform: none;
	color: var(--gold-muted, #B09850);
	margin: 0 0 1.2rem;
}

/* One column until 960px, as the prototype's grid is. */
@media (max-width: 959px) {
	:is(.is-style-page-hero, .is-style-page-hero-cream) .wp-block-columns { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
	:is(.is-style-page-hero, .is-style-page-hero-cream) .wp-block-column { flex-basis: auto !important; }
}

/* The wide photo under the header. */
.site-main .wp-block-image.is-style-banner { margin: 0; }
.site-main .wp-block-image.is-style-banner img {
	display: block;
	width: 100%;
	height: clamp(360px, 52vw, 620px);
	object-fit: cover;
	object-position: center top;
}

/* The page header's top padding already includes the fixed header's height, as
   the prototype's does, so <main> drops its own header offset (10-header.css)
   when a page opens with one. Otherwise the space above the title was doubled. */
.site-main:has(> .wp-block-group:is(.is-style-page-hero, .is-style-page-hero-cream):first-child) { padding-top: 0; }

/* The same banner as a Cover block ("Wide banner" on a Cover): used where the
   prototype crops the photo off-centre (Our Process, object-position 60%), so
   the client gets the Cover's focal-point picker to move the crop. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover.alignfull.is-style-banner {
	min-height: clamp(360px, 52vw, 620px);
	padding: 0;
}


/* ==== 52-band.css ==== */
/* Navy band — the prototype's .band: the heading beside a paragraph on navy
   (1fr / 1.2fr from 900px). A Group with the "Navy band" style holding Columns. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-band-navy {
	background: var(--color-primary, #082246);
	color: var(--navy-dim, #AFC0D0);
	padding-block: clamp(3.5rem, 7vw, 6rem);
}
.is-style-band-navy .wp-block-columns { gap: clamp(1.6rem, 4vw, 4.5rem); align-items: center; margin: 0; }
.is-style-band-navy h2 { color: #fff; }
.is-style-band-navy h2 .em { color: var(--color-accent, #F1C654); }
.is-style-band-navy p { font-size: 1.14rem; line-height: 1.7; color: var(--navy-fg, #EEF3F8); }

@media (max-width: 899px) {
	.is-style-band-navy .wp-block-columns { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
	.is-style-band-navy .wp-block-column { flex-basis: auto !important; }
}

/* "Perks under a rule" (About): two short offers under a thin gold rule, a gold
   title over a line of text in each (prototype .band-perks). A Columns block
   inside the navy band; each column is a bold paragraph and a paragraph. */
.is-style-band-navy .wp-block-columns.is-style-perks {
	margin-top: clamp(1.6rem, 4vw, 4.5rem);
	padding-top: clamp(22px, 3vw, 32px);
	border-top: 1px solid rgb(241 198 84 / .25);
	gap: clamp(18px, 3vw, 56px);
	align-items: flex-start;
}
/* Two across from 640px — the band's heading and paragraph stack at 900, the
   perks don't. */
.is-style-band-navy .wp-block-columns.is-style-perks { flex-direction: row; flex-wrap: nowrap; }
.is-style-band-navy .is-style-perks > .wp-block-column { flex: 1 1 0 !important; display: flex; flex-direction: column; gap: 5px; }
.is-style-band-navy .is-style-perks p { margin: 0; font-size: 1rem; line-height: 1.6; color: var(--navy-dim, #AFC0D0); }
.is-style-band-navy .is-style-perks p:first-child { font-size: 1.02rem; line-height: 1.65; color: var(--color-accent, #F1C654); }
.is-style-perks p:first-child strong { font-weight: 500; }
.is-style-band-navy .is-style-perks a { color: var(--color-accent, #F1C654); text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 639px) {
	.is-style-band-navy .wp-block-columns.is-style-perks { flex-direction: column; flex-wrap: nowrap; }
	.is-style-band-navy .is-style-perks > .wp-block-column { flex: 0 0 auto !important; }
}


/* ==== 53-inc.css ==== */
/* What we build — the prototype's .inc: the heading and a list of arrow rows
   beside a photo that fills the column's height (1.05fr / 1fr from 960px).
   arenex/split with the "Wider image" style, whose photo already fills the text
   column's height; Home's intro uses "Narrower image" with a 4:3 photo instead. */

.site-main .arenex-split.is-style-image-wide .arenex-split__grid { align-items: stretch; }
.site-main .arenex-split.is-style-image-wide .arenex-split__figure {
	aspect-ratio: auto;
	min-height: 380px;
	height: auto;
}

/* Rows with arrows: a core List with the "Rows with arrows" style. */
.site-main .wp-block-list.is-style-rows {
	list-style: none;
	margin: 2.2rem 0 0;
	padding: 0;
	border-top: 1px solid var(--color-border, #E7E0D4);
}
.site-main .is-style-rows li {
	display: flex;
	align-items: center;
	gap: 1.1rem;
	margin: 0;
	padding: 1.15rem 0;
	border-bottom: 1px solid var(--color-border, #E7E0D4);
	font-size: 1.1rem;
	font-weight: 500;
	line-height: 1.65;
	color: var(--color-primary, #082246);
}
.site-main .is-style-rows li::before {
	content: "";
	flex: none;
	width: 1rem;
	height: 1rem;
	background: var(--gold-muted, #B09850);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* One column below 960px (the prototype's breakpoint for this section, not the
   intro's 900), photo after the words at 4:3. */
@media (max-width: 959px) {
	.site-main .arenex-split.is-style-image-wide .arenex-split__grid { display: flex; flex-direction: column; align-items: stretch; }
	.site-main .arenex-split.is-style-image-wide .arenex-split__figure { width: 100%; order: 2; aspect-ratio: 4 / 3; min-height: 0; }
	.site-main .arenex-split.is-style-image-wide .arenex-split__body { order: 1; }
}

/* Paragraphs in a "Wider image" split (About's story): body text, 1.2rem apart. */
.site-main .is-style-image-wide .arenex-split__body p { margin: 1.2rem 0 0; }

/* When the photo leads (About), the prototype crops it tall — 4:4.4 — on
   tablets and phones, where the service pages' photo is 4:3. */
@media (max-width: 959px) {
	.site-main .arenex-split.is-style-image-wide .arenex-split__grid--image-first .arenex-split__figure { aspect-ratio: 4 / 4.4; }
}


/* ==== 54-features.css ==== */
/* Three features — the prototype's .feat3: an outline icon, a short title and a
   sentence, three across on white. arenex/cards with the "Icon features" style:
   no card box, no number. */

:is(.home, .page-template-page-blocks) .site-main > .arenex-cards.is-style-features {
	background: #fff;
	border-top: 1px solid var(--color-border, #E7E0D4);
	padding-block: var(--sec, 90px);
}
.site-main .is-style-features .arenex-cards__grid {
	gap: clamp(2.4rem, 4vw, 3.5rem);
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.site-main .is-style-features .arenex-cards__card,
.site-main .is-style-features .arenex-cards__card:hover {
	display: block;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.site-main .is-style-features .arenex-cards__top { display: block; }
.site-main .is-style-features .arenex-cards__num { display: none; }
/* The prototype's icon is an inline <svg> with a bottom margin, so it sits on a
   line of text and the line adds ~10px under it. inline-block reproduces that;
   a block icon left the titles 9px high. */
.site-main .is-style-features .arenex-cards__icon,
.site-main .is-style-features .arenex-cards__card:hover .arenex-cards__icon {
	display: inline-block;
	vertical-align: baseline;
	width: 1.7rem;
	height: 1.7rem;
	margin-bottom: 1rem;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--gold-muted, #B09850);
}
.site-main .is-style-features .arenex-cards__icon svg { width: 100%; height: 100%; stroke-width: 1.6; }
.site-main .is-style-features .arenex-cards__icon .arenex-icon-upload { width: 100%; height: 100%; }
.site-main .is-style-features .arenex-cards__title {
	margin: 0 0 .7rem;
	font-size: 1.22rem;
	line-height: 1.3;
	color: var(--color-primary, #082246);
}
.site-main .is-style-features .arenex-cards__text { margin: 0; color: var(--ink-2, #3C4852); }

/* The projects band that follows runs on without its own top padding or rule
   (prototype: feat3 border-bottom 0, proj padding-top 0 and border-top 0). */
:is(.home, .page-template-page-blocks) .site-main > .arenex-cards.is-style-features + .wp-block-group.alignfull.is-style-projects {
	padding-top: 0;
	border-top: 0;
}


/* ==== 55-statement-photo.css ==== */
/* Statement on a photo — the prototype's .stmt-photo ("Is your project a good
   fit?"): a navy gradient over a dusk photo, the kicker and a large centred
   statement. A Cover with the "Statement on a photo" style. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover.is-style-statement-photo {
	min-height: 0;
	padding: clamp(90px, 10vw, 150px) 0;
	background: var(--color-primary, #082246);
}
.is-style-statement-photo > .wp-block-cover__image-background { object-position: center bottom; }
.is-style-statement-photo > .wp-block-cover__background {
	background: linear-gradient(rgb(8 34 70 / .84), rgb(8 34 70 / .52)) !important;
	opacity: 1 !important;
}
.is-style-statement-photo > .wp-block-cover__inner-container {
	width: 100%;
	max-width: var(--wrap, 1240px);
	margin-inline: auto;
	padding-inline: var(--gut, 2rem);
	box-sizing: border-box;
	text-align: center;
	color: var(--cream, #FAF7F3);
}
.is-style-statement-photo p.is-style-eyebrow { color: var(--color-accent, #F1C654); max-width: max-content; margin-inline: auto; }

/* "Large statement": the prototype's .stmt .big. */
.site-main p.is-style-big {
	font-family: var(--font-heading, 'Google Sans Flex', sans-serif);
	font-weight: 400;
	letter-spacing: -.015em;
	font-size: clamp(1.4rem, 2.4vw, 2.15rem);
	line-height: 1.45;
	max-width: 56ch;
	margin-inline: auto;
}
.is-style-statement-photo p.is-style-big { color: var(--cream, #FAF7F3); }
.is-style-statement-photo p.is-style-big .em { color: var(--color-accent, #F1C654); }


/* ==== 56-cost.css ==== */
/* What an addition costs — the prototype's .cost: the heading, a paragraph and
   a button beside the published price ranges (1fr / 1fr from 960px). A Group
   with the "Cost band" style holding Columns; the table has "Price table" and
   the note under it "Small print". */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-cost {
	background: #fff;
	border-block: 1px solid var(--color-border, #E7E0D4);
}
.is-style-cost .wp-block-columns { gap: clamp(3rem, 7vw, 6rem); align-items: flex-start; margin: 0; }
.is-style-cost h2 + p { margin-top: 1.3rem; }
/* Written to outrank 35-sections' general `p + .wp-block-buttons` (2.3rem). */
:is(.home, .page-template-page-blocks) .site-main .is-style-cost p + .wp-block-buttons { margin-top: 1.8rem; }

.site-main .wp-block-table.is-style-cost { margin: .5rem 0 0; }
.site-main .wp-block-table.is-style-cost table { width: 100%; border-collapse: collapse; }
.site-main .wp-block-table.is-style-cost thead { border: 0; }
.site-main .wp-block-table.is-style-cost :is(th, td) {
	text-align: left;
	padding: .95rem 0;
	border: 0;
	border-bottom: 1px solid var(--color-border, #E7E0D4);
	font-size: 1.02rem;
	line-height: 1.65;
}
.site-main .wp-block-table.is-style-cost th {
	font-family: var(--font-body, 'DM Sans', sans-serif);
	font-weight: 500;
	color: var(--ink-3, #5B6875);
	font-size: .88rem;
	letter-spacing: .05em;
	text-transform: uppercase;
}
.site-main .wp-block-table.is-style-cost :is(th, td):last-child { text-align: right; white-space: nowrap; }
.site-main .wp-block-table.is-style-cost td:first-child { color: var(--color-primary, #082246); font-weight: 500; }

.site-main p.is-style-fine { margin-top: 1.4rem; font-size: .9rem; color: var(--ink-3, #5B6875); max-width: none; }

@media (max-width: 959px) {
	.is-style-cost .wp-block-columns { flex-direction: column; align-items: stretch; flex-wrap: nowrap; gap: clamp(2.5rem, 6vw, 5rem); }
	.is-style-cost .wp-block-column { flex-basis: auto !important; }
}


/* ==== 57-faq.css ==== */
/* Frequently asked questions — the prototype's .faq: the heading and a line
   beside the questions (1fr / 1.6fr from 960px). A Group with the "FAQ band"
   style holding Columns; the questions are a core Accordion with "Lines with
   plus", drawn like the process steps (.acc): serif italic questions between
   hairlines, a thin plus that turns into a cross when open. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-faq {
	background: #fff;
	border-top: 1px solid var(--color-border, #E7E0D4);
}
.is-style-faq .wp-block-columns { gap: clamp(2rem, 4vw, 4.5rem); align-items: flex-start; margin: 0; }
.is-style-faq h2 + p { margin-top: 1.2rem; }

.site-main .wp-block-accordion.is-style-lines { border-top: 1px solid var(--color-border, #E7E0D4); }
.site-main .is-style-lines .wp-block-accordion-item { border-bottom: 1px solid var(--color-border, #E7E0D4); }
.site-main .is-style-lines .wp-block-accordion-heading { margin: 0; font-size: inherit; }
.site-main .is-style-lines .wp-block-accordion-heading__toggle {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	width: 100%;
	padding: 1.5rem 0;
	border: 0;
	background: none;
	cursor: pointer;
	text-align: left;
	color: inherit;
}
.site-main .is-style-lines .wp-block-accordion-heading__toggle-title {
	flex: 1;
	font-family: var(--serif, 'Cormorant Garamond', serif);
	font-style: italic;
	font-weight: 500;
	font-size: 1.35rem;
	line-height: 1.3;
	letter-spacing: 0;
	color: var(--ink, #101820);
	text-decoration: none;
	transition: color .3s var(--ease, ease);
}
.site-main .is-style-lines .wp-block-accordion-heading__toggle:hover .wp-block-accordion-heading__toggle-title { color: var(--gold-muted, #B09850); }

/* The block prints a "+" character; the design draws two thin lines instead. */
.site-main .is-style-lines .wp-block-accordion-heading__toggle-icon {
	position: relative;
	flex: none;
	width: 17px;
	height: 17px;
	font-size: 0;
	transition: transform .5s var(--ease, ease);
}
.site-main .is-style-lines .wp-block-accordion-heading__toggle-icon::before,
.site-main .is-style-lines .wp-block-accordion-heading__toggle-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	margin: auto;
	background: var(--ink, #101820);
}
.site-main .is-style-lines .wp-block-accordion-heading__toggle-icon::before { width: 100%; height: 1.5px; }
.site-main .is-style-lines .wp-block-accordion-heading__toggle-icon::after { width: 1.5px; height: 100%; }
.site-main .is-style-lines .wp-block-accordion-item.is-open .wp-block-accordion-heading__toggle-icon { transform: rotate(45deg); }

.site-main .is-style-lines .wp-block-accordion-panel p { margin: 0; padding: 0 3rem 1.6rem 0; color: var(--ink-2, #3C4852); }

@media (max-width: 959px) {
	.is-style-faq .wp-block-columns { flex-direction: column; align-items: stretch; flex-wrap: nowrap; }
	.is-style-faq .wp-block-column { flex-basis: auto !important; }
}
@media (max-width: 860px) {
	.site-main .is-style-lines .wp-block-accordion-panel p { padding-right: 0; }
}

/* The closing card after the FAQ starts close under it (prototype: .cta
   padding-top 24px on the service pages). */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-faq + .wp-block-columns.alignfull.is-style-cta { padding-top: 24px; }


/* ==== 58-more.css ==== */
/* Explore more services — the prototype's .more: a centred heading over three
   photo cards, on white, straight after the closing card (no top padding).
   A Group with the "More services band" style holding a heading and
   arenex/cards; the cards are the same photo cards as Home's services grid
   (43-svc.css). */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-more {
	background: #fff;
	padding-top: 0;
}
.is-style-more h2 { text-align: center; margin-bottom: clamp(2.2rem, 4vw, 3.2rem); }


/* ==== 59-project-gallery.css ==== */
/* Project gallery — the prototype's Projects page (.pg): filter buttons over one
   grid of photos, each opening in a lightbox.

   The photos are Projects in the dashboard (Arenex Digital Blocks): each project has
   its categories and its photos, and the Project Gallery block on the page shows them
   all, with a filter button per category (in each category's Position order) and the
   lightbox. The client adds photos and categories under Projects, never on the page.
   This part gives the block the prototype's look; the Group around it (style "Project
   gallery with filters") is the band, with no top padding under the page header. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-project-gallery {
	padding-top: 0;
	background: transparent;
}

.site-main .arenex-project-gallery {
	--project-gallery-min: 300px;
	--project-gallery-gap: 1.2rem;
	--project-gallery-ratio: 4 / 3;
}
.site-main .arenex-project-gallery__item {
	border-radius: var(--radius-sm, 14px);
}
.site-main .arenex-project-gallery__img {
	transition: transform .6s var(--ease, ease);
}
.site-main .arenex-project-gallery__item[role="button"]:focus-visible { outline: 2px solid var(--color-accent, #F1C654); outline-offset: 3px; }

.site-main .arenex-project-gallery__filters {
	gap: .6rem;
	margin-bottom: clamp(1.8rem, 3vw, 2.6rem);
}
.site-main .arenex-project-gallery__filter {
	font: inherit;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--color-primary, #082246);
	background: #fff;
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: 999px;
	padding: .55rem 1.15rem;
	cursor: pointer;
	transition: background .3s var(--ease, ease), color .3s var(--ease, ease), border-color .3s var(--ease, ease);
}
.site-main .arenex-project-gallery__filter:hover { border-color: var(--gold-muted, #B09850); }
.site-main .arenex-project-gallery__filter:focus-visible { outline: 2px solid var(--color-accent, #F1C654); outline-offset: 2px; }
.site-main .arenex-project-gallery__filter.is-active { background: var(--color-primary, #082246); border-color: var(--color-primary, #082246); color: var(--color-accent, #F1C654); }

/* The closing card keeps the full section padding here. The prototype's 24px
   (.cta padding-top) reads well on the service pages, where the FAQ above is
   white too, but here the band changes from cream to white and 24px looked
   cramped — changed at the user's request, 21 Sep. */

/* ---- lightbox (the prototype's .lb) ---- */
.arenex-lightbox {
	position: fixed; inset: 0; z-index: 200;
	display: flex; align-items: center; justify-content: center;
	background: rgb(6 26 54 / .97);
	opacity: 0; visibility: hidden;
	transition: opacity .4s var(--ease, ease), visibility 0s .4s;
}
.arenex-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity .4s var(--ease, ease), visibility 0s; }
.arenex-lightbox__stage {
	position: relative; width: 100%; height: 100%;
	display: flex; align-items: center; justify-content: center;
	padding: clamp(56px, 7vw, 80px) clamp(16px, 6vw, 110px);
	box-sizing: border-box;
}
.arenex-lightbox__fig {
	margin: 0; max-width: 100%; max-height: 100%;
	display: flex; flex-direction: column; align-items: center; gap: 1rem;
	transform: scale(.97); opacity: 0;
	transition: transform .45s var(--ease, ease), opacity .45s var(--ease, ease);
}
.arenex-lightbox.is-open .arenex-lightbox__fig { transform: none; opacity: 1; }
.arenex-lightbox__img {
	max-width: 100%; max-height: calc(100vh - 190px);
	width: auto; height: auto; display: block;
	border-radius: var(--radius-sm, 14px);
	background: rgb(255 255 255 / .04);
}
.arenex-lightbox__img.is-loading { opacity: .55; transition: opacity .3s; }
.arenex-lightbox__cap { color: var(--cream, #FAF7F3); font-size: .98rem; line-height: 1.5; text-align: center; max-width: 62ch; margin: 0; }
.arenex-lightbox__cap b {
	display: block; color: var(--gold-muted, #B09850);
	font-weight: 500; font-size: .85rem; letter-spacing: .08em; text-transform: uppercase;
	margin-bottom: .35rem;
}
.arenex-lightbox__btn {
	position: absolute; display: grid; place-items: center;
	width: 52px; height: 52px; padding: 0; border-radius: 999px;
	background: rgb(255 255 255 / .07); border: 1px solid rgb(255 255 255 / .22);
	color: var(--cream, #FAF7F3); cursor: pointer;
	transition: background .3s var(--ease, ease), border-color .3s var(--ease, ease), color .3s var(--ease, ease);
}
.arenex-lightbox__btn:hover { background: var(--color-accent, #F1C654); border-color: var(--color-accent, #F1C654); color: var(--color-primary, #082246); }
.arenex-lightbox__btn:focus-visible { outline: 2px solid var(--color-accent, #F1C654); outline-offset: 3px; }
.arenex-lightbox__btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.arenex-lightbox__btn[hidden] { display: none; }
.arenex-lightbox__close { top: clamp(14px, 2.5vw, 26px); right: clamp(14px, 2.5vw, 26px); }
.arenex-lightbox__prev { left: clamp(10px, 2.5vw, 30px); top: 50%; margin-top: -26px; }
.arenex-lightbox__next { right: clamp(10px, 2.5vw, 30px); top: 50%; margin-top: -26px; }
.arenex-lightbox__count {
	position: absolute; top: clamp(20px, 2.5vw, 32px); left: clamp(18px, 3vw, 34px);
	margin: 0; color: var(--navy-dim, #AFC0D0); font-size: .9rem; letter-spacing: .04em;
}
@media (max-width: 640px) {
	.arenex-lightbox__stage { padding: 64px 12px 104px; }
	.arenex-lightbox__img { max-height: calc(100vh - 230px); }
	.arenex-lightbox__btn { width: 46px; height: 46px; }
	.arenex-lightbox__prev { left: 50%; top: auto; bottom: 22px; margin: 0; transform: translateX(-88px); }
	.arenex-lightbox__next { right: 50%; top: auto; bottom: 22px; margin: 0; transform: translateX(88px); }
}
@media (prefers-reduced-motion: reduce) {
	.arenex-lightbox, .arenex-lightbox__fig, .arenex-project-gallery__img { transition: none; }
	.arenex-lightbox__fig { transform: none; }
}


/* ==== 60-steps.css ==== */
/* Numbered rows — the prototype's Our Process steps (.steps / .step-row): a
   serif italic number beside each step's title and sentence, between hairlines,
   900px wide. arenex/steps in its list layout, with no photo, and the "Numbered
   rows" style. */

:is(.home, .page-template-page-blocks) .site-main > .arenex-steps.is-style-numbered-rows { padding-block: var(--sec, 90px); }
.site-main .is-style-numbered-rows .arenex-steps__inner {
	display: block;
	max-width: var(--wrap, 1240px);
	padding-inline: var(--gut, 2rem);
}
.site-main .is-style-numbered-rows .arenex-steps__head { margin: 0; }
.site-main .is-style-numbered-rows .arenex-steps__list {
	display: block;
	max-width: 900px;
	margin-top: clamp(2rem, 4vw, 3rem);
	border-top: 1px solid var(--color-border, #E7E0D4);
}
.site-main .is-style-numbered-rows .arenex-steps__step {
	display: flex;
	gap: clamp(1.4rem, 3vw, 2.6rem);
	padding: clamp(1.6rem, 3vw, 2.2rem) 0;
	border-top: 0;
	border-bottom: 1px solid var(--color-border, #E7E0D4);
}
.site-main .is-style-numbered-rows .arenex-steps__num {
	flex: none;
	width: 3.2rem;
	font-family: var(--serif, 'Cormorant Garamond', serif);
	font-style: italic;
	font-weight: 400;
	font-size: clamp(1.8rem, 3vw, 2.4rem);
	line-height: 1.1;
	color: var(--gold-muted, #B09850);
	-webkit-text-stroke: 0;
}
.site-main .is-style-numbered-rows .arenex-steps__title {
	margin: 0 0 .55rem;
	font-size: 1.35rem;
	line-height: 1.3;
	color: var(--color-primary, #082246);
}
/* 60ch in the prototype's font; in em so it does not depend on the font file. */
.site-main .is-style-numbered-rows .arenex-steps__desc { margin: 0; max-width: 41.1em; color: var(--ink-2, #3C4852); }

/* The prototype's .proc headroom on tablets and phones applies to this band too. */
@media (max-width: 959px) {
	:is(.home, .page-template-page-blocks) .site-main > .arenex-steps.is-style-numbered-rows { padding-top: calc(var(--sec) + 46px); }
}
@media (max-width: 600px) {
	:is(.home, .page-template-page-blocks) .site-main > .arenex-steps.is-style-numbered-rows { padding-top: calc(var(--sec) + 66px); }
}


/* ==== 61-cta-photo.css ==== */
/* Closing band on a photo — the prototype's .cta-card.cta-photo (Our Process):
   a full-width photo under a navy gradient, the heading, line and button centred.
   A Cover with the "Closing band on a photo" style. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover.alignfull.is-style-cta-photo {
	min-height: clamp(380px, 42vw, 520px);
	padding: clamp(2.6rem, 5.5vw, 4.5rem);
	background: var(--color-primary, #082246);
}
.is-style-cta-photo > .wp-block-cover__background {
	background: linear-gradient(rgb(8 34 70 / .82), rgb(8 34 70 / .62)) !important;
	opacity: 1 !important;
}
/* A centred column, as the prototype's .cta-panel (flex, align-items center):
   each line shrinks to its words rather than spanning the band. */
.is-style-cta-photo > .wp-block-cover__inner-container {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	color: var(--cream, #FAF7F3);
}
.is-style-cta-photo h2 { color: #fff; }
.is-style-cta-photo h2 .em { color: var(--color-accent, #F1C654); }
.site-main .is-style-cta-photo p:not(.is-style-call) {
	margin: 1.1rem auto 0;
	max-width: 30.1em; /* 44ch in the prototype's font */
	font-size: 1.12rem;
	color: var(--navy-fg, #EEF3F8);
}
.is-style-cta-photo .wp-block-group.is-layout-flex {
	justify-content: center;
	align-items: center;
	gap: 1.6rem;
	margin-top: 2.2rem;
	color: var(--cream, #FAF7F3);
}
.is-style-cta-photo .wp-block-group .wp-block-buttons { margin: 0; }
.site-main .is-style-cta-photo p.is-style-call {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	margin: 0;
	font-weight: 500;
	color: inherit;
	white-space: nowrap;
}
.is-style-cta-photo .is-style-call a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	transition: color .3s var(--ease, ease);
}
.is-style-cta-photo .is-style-call a:hover { color: var(--gold-muted, #B09850); }

@media (max-width: 860px) {
	:is(.home, .page-template-page-blocks) .site-main > .wp-block-cover.alignfull.is-style-cta-photo { padding: clamp(1.6rem, 6vw, 2.1rem); }
	.is-style-cta-photo .wp-block-group.is-layout-flex { margin-top: 1.7rem; }
	.site-main .is-style-cta-photo p.is-style-call { margin-top: .2rem; }
}


/* ==== 62-consult.css ==== */
/* Consultation band — the prototype's Start Your Project section (.sfw): what
   happens next on the left, the request form in a white card on the right
   (1fr / 1.25fr from 960px).

   A Group with the "Consultation band" style holding Columns. The left column is
   core blocks: a heading, "Small caps label" headings, "Numbered line"
   paragraphs (the number is the line's first italic word) and "Contact lines".
   The right column is the Quote Form block showing the Contact Form 7 form
   "Project consultation" (inc/content/forms/consultation.php), styled here as the
   prototype's .sf card. */

:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-consult { background: transparent; }
.is-style-consult .wp-block-columns { gap: clamp(2.5rem, 6vw, 5rem); align-items: flex-start; margin: 0; }
@media (max-width: 959px) {
	/* nowrap needs !important: below 782px core's columns CSS sets flex-wrap:
	   wrap !important, and a wrapping stack takes the width of its widest item,
	   so on a 320px phone the form card ran 11px off the right edge (22 Sep 2026). */
	.is-style-consult .wp-block-columns { flex-direction: column; align-items: stretch; flex-wrap: nowrap !important; }
	.is-style-consult .wp-block-column { flex-basis: auto !important; }
}

/* ---- the words ---- */
.is-style-consult h2 + p { margin-top: 1.2rem; }

.site-main h4.is-style-label {
	margin: 2.4rem 0 0;
	font-family: var(--font-body, 'DM Sans', sans-serif);
	font-weight: 500;
	font-size: .92rem;
	line-height: 1.65;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--gold-muted, #B09850);
}

/* A numbered line (.nx): the number is the paragraph's first italic word, the
   words follow in a span, so a line that wraps keeps its hanging indent as the
   prototype's flex row does. */
.site-main p.is-style-next {
	display: flex;
	gap: .9rem;
	align-items: baseline;
	margin: 0;
	max-width: 30.1em; /* 44ch in the prototype's font */
	padding: .7rem 0;
	border-bottom: 1px solid var(--color-border, #E7E0D4);
	color: var(--ink-2, #3C4852);
}
.site-main p.is-style-next > em:first-child {
	flex: none;
	font-family: var(--serif, 'Cormorant Garamond', serif);
	font-style: italic;
	font-size: 1.15rem;
	color: var(--gold-muted, #B09850);
}
/* The financing line: the prototype sets its words at 1rem with the bold part navy. */
.site-main p.is-style-next:has(strong) { font-size: 1rem; }
.site-main p.is-style-next > em:first-child { font-size: 1.15rem; }
.site-main p.is-style-next strong { font-weight: 500; color: var(--color-primary, #082246); }

.site-main p.is-style-contact { margin-top: 2.2rem; color: var(--ink-3, #5B6875); }
.site-main p.is-style-contact a { color: var(--ink-3, #5B6875); text-decoration: none; }
.site-main p.is-style-contact a:first-child { font-weight: 500; color: var(--color-primary, #082246); }

/* ---- the form, as the prototype's .sf card ----
   A Fluent Forms form ("Project consultation", made by the setup routine), placed
   with Fluent's own block. Its fields, options and email are edited in Fluent
   Forms; this only sets the look. Rules carry .site-main .is-style-consult so
   they outrank Fluent's stylesheet without !important. */
.site-main .is-style-consult .fluentform {
	margin: 0;
	padding: clamp(1.6rem, 3vw, 2.4rem);
	background: #fff;
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: var(--radius, 24px);
	font-family: var(--font-body, 'DM Sans', sans-serif);
}
.site-main .is-style-consult .frm-fluent-form fieldset { display: flex; flex-direction: column; gap: 1.1rem; }
.site-main .is-style-consult .frm-fluent-form .ff-el-group { margin: 0; }

/* Two fields side by side from 640px (Name + Phone, location + type). Each
   column keeps its natural minimum, so the two dropdowns size to their longest
   option as the prototype's do (231 / 255px at 1440). */
.site-main .is-style-consult .frm-fluent-form .ff-t-container { display: grid; gap: 1.1rem; margin: 0; }
@media (min-width: 640px) {
	.site-main .is-style-consult .frm-fluent-form .ff-t-container { grid-template-columns: 1fr 1fr; }
}
/* One column below that, never wider than the card: a dropdown's longest option
   ("Custom Kitchen Renovations") is wider than the card on a 320px phone. */
@media (max-width: 639px) {
	.site-main .is-style-consult .frm-fluent-form .ff-t-container { grid-template-columns: minmax(0, 1fr); }
}
.site-main .is-style-consult .frm-fluent-form .ff-t-cell { min-width: auto; padding: 0; margin: 0; }

/* The label's wrapper takes the label's own size, or its line box (body size)
   makes every row 3.5px taller than the prototype's. */
.site-main .is-style-consult .frm-fluent-form .ff-el-input--label { display: block; margin: 0 0 .45rem; padding: 0; font-size: .95rem; line-height: 1.65; }
.site-main .is-style-consult .frm-fluent-form .ff-el-input--label label {
	margin: 0;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--color-primary, #082246);
}
/* Required fields: Fluent's asterisk, in the site's gold. */
.site-main .is-style-consult .frm-fluent-form .ff-el-is-required.asterisk-right label::after {
	content: " *";
	margin-left: .1em;
	color: var(--gold-muted, #B09850);
}
.site-main .is-style-consult .frm-fluent-form .ff-el-input--content { display: flex; flex-direction: column; }
.site-main .is-style-consult .frm-fluent-form .ff-el-form-control {
	box-sizing: border-box;
	width: auto; /* a % width would stop the options from sizing the column */
	height: auto;
	min-height: 0;
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: .95rem; /* the label's size: the prototype's fields inherit it */
	line-height: 1.65;
	color: var(--ink, #101820);
	background-color: var(--cream, #FAF7F3);
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: 10px;
	padding: .7rem .85rem;
	box-shadow: none;
}
.site-main .is-style-consult .frm-fluent-form select.ff-el-form-control { appearance: auto; background-image: none; }
.site-main .is-style-consult .frm-fluent-form .ff-el-form-control:focus { outline: 2px solid var(--gold-muted, #B09850); outline-offset: 1px; border-color: var(--color-border, #E7E0D4); }
.site-main .is-style-consult .frm-fluent-form .error { margin-top: .35rem; font-size: .85rem; color: #B42318; }

/* The button: the site's gold pill with the arrow chip (03-core-buttons.css). */
.site-main .is-style-consult .frm-fluent-form .ff_submit_btn_wrapper { margin: .4rem 0 0; text-align: left; }
.site-main .is-style-consult .frm-fluent-form .ff-btn-submit {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin: 0;
	padding: .6rem .6rem .6rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body, sans-serif);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1.2; /* the arrow chip sets the height; this spaces two lines if it wraps */
	max-width: 100%; /* wraps on a narrow phone rather than pushing past the card */
	white-space: normal; /* Fluent's stylesheet sets nowrap on its buttons */
	text-align: left;
	background-color: var(--color-accent, #F1C654);
	color: var(--color-primary, #082246);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .45s var(--ease, ease), transform .45s var(--ease, ease);
}
.site-main .is-style-consult .frm-fluent-form .ff-btn-submit::after {
	content: "";
	flex: none;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background: rgb(8 34 70 / .12) var(--btn-arrow-navy) center / .95rem .95rem no-repeat;
	transition: transform .45s var(--ease, ease);
}
.site-main .is-style-consult .frm-fluent-form .ff-btn-submit:hover { background-color: var(--gold-deep, #E3B23C); opacity: 1; }
.site-main .is-style-consult .frm-fluent-form .ff-btn-submit:hover::after { transform: scale(1.06); }

/* After sending, Fluent hides the form and shows its thank-you message. */
.site-main .is-style-consult .ff-message-success {
	margin: 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: 10px;
	background: var(--cream, #FAF7F3);
	color: var(--color-primary, #082246);
	box-shadow: none;
}


/* ==== 63-blog.css ==== */
/* Blog — the post cards (Blog page and "More articles" under a post), their page
   numbers, and the single post.

   The cards are a core Query Loop with the class rh-post-grid. Single posts use the
   parent's single.php (title, featured image, content); inc/chrome.php adds the date
   line above the image and the "More articles" band and closing card after the article. */

/* ---- Post cards ------------------------------------------------------------ */

.rh-post-grid .wp-block-post {
	display: flex;
	flex-direction: column;
}
.rh-post-grid .wp-block-post-featured-image {
	margin: 0;
	overflow: hidden;
	border-radius: var(--radius-sm, 14px);
}
.rh-post-grid .wp-block-post-featured-image img {
	transition: transform .9s var(--ease, ease);
}
.rh-post-grid .wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.03); }

.rh-post-grid .wp-block-post-date {
	margin-top: 1.15rem;
	font-size: .85rem;
	color: var(--ink-3, #5B6875);
}
.rh-post-grid .wp-block-post-title {
	margin: .45rem 0 0;
	font-size: clamp(1.2rem, 1.6vw, 1.35rem);
	line-height: 1.25;
	text-wrap: balance;
}
.rh-post-grid .wp-block-post-title a {
	color: var(--color-primary, #082246);
	text-decoration: none;
	transition: color .3s var(--ease, ease);
}
.rh-post-grid .wp-block-post-title a:hover { color: var(--gold-muted, #B09850); }

/* Title to excerpt: a clear step, smaller than the gap between cards. */
.rh-post-grid .wp-block-post-excerpt { margin-top: .85rem; }
.rh-post-grid .wp-block-post-excerpt__excerpt {
	margin: 0;
	color: var(--ink-2, #3C4852);
	line-height: 1.6;
}
.rh-post-grid .wp-block-post-excerpt__more-text { margin: 1rem 0 0; }
.rh-post-grid .wp-block-post-excerpt__more-link {
	font-weight: 500;
	color: var(--color-primary, #082246);
	text-decoration: none;
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	transition: color .3s var(--ease, ease);
}
.rh-post-grid .wp-block-post-excerpt__more-link:hover { color: var(--gold-muted, #B09850); }

/* Three across on desktop, two on tablets, one on phones (core stacks below 600). */
@media (min-width: 601px) and (max-width: 960px) {
	.rh-post-grid .wp-block-post-template.is-layout-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ---- Page numbers ----------------------------------------------------------- */

.rh-post-grid .wp-block-query-pagination {
	margin-top: clamp(2.75rem, 5vw, 4rem);
	gap: .6rem;
	align-items: center;
	justify-content: center;
}
.rh-post-grid .wp-block-query-pagination-numbers {
	display: flex;
	gap: .6rem;
	margin: 0;
}
.rh-post-grid .wp-block-query-pagination .page-numbers,
.rh-post-grid .wp-block-query-pagination-previous,
.rh-post-grid .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .5rem;
	min-width: 2.9rem;
	height: 2.9rem;
	margin: 0;
	padding: 0 1.15rem;
	border: 1px solid rgb(8 34 70 / .18);
	border-radius: 999px;
	font-size: 1rem;
	font-weight: 500;
	line-height: 1;
	color: var(--color-primary, #082246);
	text-decoration: none;
	transition: background-color .3s var(--ease, ease), border-color .3s var(--ease, ease), color .3s var(--ease, ease);
}
.rh-post-grid .wp-block-query-pagination .page-numbers { padding: 0; }
.rh-post-grid .wp-block-query-pagination a:hover { border-color: var(--color-primary, #082246); }
.rh-post-grid .wp-block-query-pagination .page-numbers.current {
	background: var(--color-primary, #082246);
	border-color: var(--color-primary, #082246);
	color: #fff;
}
.rh-post-grid .wp-block-query-pagination .page-numbers.dots { border-color: transparent; min-width: 1.5rem; }

/* ---- Single post ------------------------------------------------------------ */

.single-post .site-main > .container--content.section {
	max-width: calc(780px + 2 * var(--gut, 2rem));
	padding: clamp(3.5rem, 7vw, 6rem) var(--gut, 2rem) clamp(3.5rem, 6vw, 5.5rem);
}

.single-post .entry { margin-bottom: 0; }
.single-post .entry__title {
	margin-bottom: 1.35rem;
	font-size: clamp(2.2rem, 4.4vw, 3.4rem);
	line-height: 1.08;
	letter-spacing: -.025em;
	text-wrap: balance;
}

/* The line under the title: back to the blog, the date, the reading time. */
.rh-entry-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .35rem 1rem;
	margin: 0 0 clamp(1.8rem, 3.5vw, 2.6rem);
	font-size: .95rem;
	color: var(--ink-3, #5B6875);
}
.rh-entry-meta > :not(:first-child)::before {
	content: "";
	display: inline-block;
	width: 4px;
	height: 4px;
	margin-right: 1rem;
	border-radius: 50%;
	background: var(--gold-muted, #B09850);
	vertical-align: middle;
}
.rh-entry-meta a {
	font-weight: 500;
	color: var(--color-primary, #082246);
	text-decoration: none;
	transition: color .3s var(--ease, ease);
}
.rh-entry-meta a::before { content: "\2190\00a0"; }
.rh-entry-meta a:hover { color: var(--gold-muted, #B09850); }
@media (max-width: 600px) {
	.rh-entry-meta { gap: .35rem .65rem; font-size: .86rem; }
	.rh-entry-meta > :not(:first-child)::before { margin-right: .65rem; }
}

/* The date line sits inside the thumbnail wrapper, so the rounding moves to the image. */
.single-post .entry__thumb {
	overflow: visible;
	border-radius: 0;
	margin-bottom: clamp(2.4rem, 4.5vw, 3.4rem);
}
.single-post .entry__thumb img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	border-radius: var(--radius, 24px);
}

/* Reading type: body size a step up, a 70ch column, clear heading steps. */
.single-post .entry__content {
	font-size: 1.1rem;
	line-height: 1.75;
	color: var(--ink-2, #3C4852);
}
.single-post .entry__content > * { margin-block: 0; }
.single-post .entry__content > * + * { margin-top: 1.25em; }
.single-post .entry__content > p:first-child {
	font-size: 1.22rem;
	line-height: 1.65;
	color: var(--ink, #101820);
}
.single-post .entry__content h2 {
	font-size: clamp(1.45rem, 2.4vw, 1.8rem);
	line-height: 1.25;
	letter-spacing: -.015em;
	color: var(--color-primary, #082246);
	text-wrap: balance;
}
.single-post .entry__content h3 {
	font-size: 1.2rem;
	line-height: 1.35;
	color: var(--color-primary, #082246);
}
.single-post .entry__content > h2 { margin-top: 1.9em; }
.single-post .entry__content > h3 { margin-top: 1.7em; }
.single-post .entry__content > :is(h2, h3) + * { margin-top: .6em; }
.single-post .entry__content :is(ul, ol) { padding-left: 1.3em; }
.single-post .entry__content li + li { margin-top: .5em; }
.single-post .entry__content li::marker { color: var(--gold-muted, #B09850); }
.single-post .entry__content a {
	color: var(--color-primary, #082246);
	text-decoration: underline;
	text-decoration-color: var(--gold-muted, #B09850);
	text-decoration-thickness: 1.5px;
	text-underline-offset: 3px;
}
.single-post .entry__content strong { font-weight: 600; color: var(--ink, #101820); }
.single-post .entry__content hr {
	border: 0;
	border-top: 1px solid rgb(8 34 70 / .12);
	margin-block: 2.5em;
}
.single-post .entry__content img { height: auto; border-radius: var(--radius-sm, 14px); }

/* ---- After the article ------------------------------------------------------ */

.rh-more-posts {
	background: #fff;
	padding: var(--sec, 90px) var(--gut, 2rem);
}
.rh-more-posts__inner {
	max-width: calc(var(--wrap, 1240px) - 2 * var(--gut, 2rem));
	margin-inline: auto;
}
.rh-more-posts__head {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 1rem 2rem;
	margin-bottom: clamp(2rem, 4vw, 3rem);
}
.rh-more-posts__head h2 { margin: 0; }
.rh-more-posts__all {
	font-weight: 500;
	color: var(--color-primary, #082246);
	text-decoration: none;
	border-bottom: 1.5px solid var(--gold-muted, #B09850);
	padding-bottom: 2px;
	transition: color .3s var(--ease, ease);
}
.rh-more-posts__all:hover { color: var(--gold-muted, #B09850); }

/* The closing card, as on every page (45-cta.css scopes its band to block-built pages). */
.single-post .site-main > .wp-block-columns.is-style-cta {
	max-width: none;
	margin: 0;
	background: #fff;
	padding-inline: max(var(--gut, 2rem), calc((100% - var(--wrap, 1240px)) / 2 + var(--gut, 2rem)));
	padding-block: 0 var(--sec, 90px);
	gap: 0;
	border-radius: 0;
}
@media (max-width: 899px) {
	.single-post .site-main > .wp-block-columns.is-style-cta {
		flex-direction: column;
		flex-wrap: nowrap;
	}
}


/* ==== 90-motion.css ==== */
/* Motion. Parts 90–99 are left out of the editor build. */

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: .001ms !important;
		transition-duration: .001ms !important;
		scroll-behavior: auto !important;
	}
}

/* ==== 05-newlook.css (the client approved this on 24 Sep 2026; it now applies to every page through the rh-newlook body class) ==== */
/* The client's new look — PREVIEW ONLY (24 Sep 2026).
   Cormorant Garamond headings, Manrope body, warm ivory ground, champagne gold and
   metallic buttons, from the header picture and the section mockups in the change
   documents (Changes/CHANGES-PLAN.md).

   Scoped to the two preview pages so the approved pages are untouched while the client
   decides: /new-look-home/ (12606) and /new-look-additions/ (12607).

   When it is approved this whole part goes away: the values move into inc/brand.php
   (palette, fonts, type scale) and the button rules into 02/03-buttons.css, and the two
   faces are self-hosted in assets/fonts (they are already there) instead of Google's CDN.

   The colour names below are the ones the child's own CSS reads. They were never
   defined anywhere, so every rule was falling back to its hardcoded hex; defining them
   here switches the palette on these pages without touching any other rule. */

/* Google's variable faces, for the preview only. Cormorant's italic is already self-hosted. */
@font-face { font-family: 'Cormorant Garamond'; src: url('https://fonts.gstatic.com/s/cormorantgaramond/v21/co3bmX5slCNuHLi8bLeY9MK7whWMhyjYqXtKky2F7g.woff2') format('woff2'); font-weight: 300 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Manrope'; src: url('https://fonts.gstatic.com/s/manrope/v20/xn7gYHE41ni1AdIRggexSvfedN4.woff2') format('woff2'); font-weight: 200 800; font-style: normal; font-display: swap; }

body.rh-newlook {
	/* type */
	--font-heading: 'Cormorant Garamond', Georgia, serif;
	--font-body: 'Manrope', system-ui, -apple-system, sans-serif;
	/* A serif sits smaller on the line than the sans it replaces, so every display size
	   goes up about 12%. Clamps, so one declaration covers phone to desktop. */
	--hero-title-size: clamp(38px, 5.2vw, 74px);
	--page-title-size: clamp(34px, 3.8vw, 54px);
	--h1-size: clamp(36px, 4.4vw, 62px);
	--h2-size: clamp(34px, 4.5vw, 64px);
	--h3-size: clamp(24px, 2vw, 29px);
	--h4-size: clamp(19px, 1.5vw, 22px);
	--heading-line-height: 1.08;
	--heading-weight: 500;
	--menu-size: 19px;

	/* colour — the child's own names */
	--color-primary: #082246;
	--color-primary-light: #0C2C56;
	--color-heading: #082246;
	--color-accent: #C2A362;      /* champagne, replacing the brass #F1C654 */
	--color-border: #E4DCCB;
	--gold-deep: #A9873F;
	--gold-panel: #C9AE73;
	--gold-muted: #A98F4F;
	--gold-edge: #B08F4A;
	--gold-metal: linear-gradient(180deg, #EBDCB2 0%, #D9BE7E 38%, #C4A35F 62%, #E4D09E 100%);
	--gold-metal-hover: linear-gradient(180deg, #F0E5C4 0%, #E0CA92 38%, #CDAF6B 62%, #EDDAAE 100%);

	/* colour — the parent's names, for the rules the parent draws */
	--accent-color: #C2A362;
	--bg-color: #FAF7F1;          /* warm ivory ground */
	--bg-alt: #FFFFFF;
	--border-color: #E4DCCB;
	--surface-color: #FFFFFF;
}

/* A serif needs almost none of the tracking the sans wanted. */
body.rh-newlook .site-main :is(h1, h2, h3),
body.rh-newlook .site-main :is(h1, h2, h3) { letter-spacing: -.005em; }

/* The accent word keeps Cormorant's italic; at the serif's own size it no longer shrinks. */
body.rh-newlook .site-main :is(h1, h2, h3) :is(.em, em),
body.rh-newlook .site-main :is(h1, h2, h3) :is(.em, em) { font-size: 1em; font-weight: 400; }

/* Eyebrows: the mockups set them in the body face, gold, with a rule before the words. */
body.rh-newlook .site-main .is-style-eyebrow {
	display: flex;
	align-items: center;
	gap: .9rem;
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: .18em;
}
body.rh-newlook .site-main .is-style-eyebrow::before {
	content: "";
	flex: none;
	width: 42px;
	height: 1px;
	background: currentColor;
	opacity: .8;
}

/* The buttons: a gold metal with a lit edge, gently rounded rather than a pill, the label
   in the heading serif. The edge is an inset shadow, not a border, so the height is unchanged. */
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit),
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit) {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.12rem;
	letter-spacing: .02em;
	border-radius: 8px;
	background: var(--gold-metal);
	box-shadow: inset 0 0 0 1px var(--gold-edge);
	color: #082246;
}
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit):hover,
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit):hover {
	background: var(--gold-metal-hover);
}
/* On the metal the arrow stands alone; the navy button keeps its circle. */
body.rh-newlook .rh-btn:not(.rh-btn--navy) .rh-btn__chip,
body.rh-newlook .rh-btn:not(.rh-btn--navy) .rh-btn__chip,
body.rh-newlook .site-main .wp-block-button__link::after { background-color: transparent; }

body.rh-newlook :is(.rh-btn--navy, .is-style-panel .wp-block-button__link, .is-style-navy .wp-block-button__link),
body.rh-newlook :is(.rh-btn--navy, .is-style-panel .wp-block-button__link, .is-style-navy .wp-block-button__link) {
	background: #082246;
	color: #FAF7F3;
	box-shadow: none;
}
body.rh-newlook .site-main .is-style-outline .wp-block-button__link {
	background: none;
	box-shadow: inset 0 0 0 1.5px #082246;
}

/* The header: the picture the client sent — a white bar, serif links, a gold hairline
   before the phone number, and the button in small caps. */
body.rh-newlook .rh-nav__link,
body.rh-newlook .rh-nav__link,
body.rh-newlook .rh-header__phone {
	font-family: var(--font-heading);
	font-weight: 500;
	letter-spacing: 0;
}
body.rh-newlook .rh-header .rh-btn {
	font-size: .95rem;
	letter-spacing: .16em;
	text-transform: uppercase;
}


/* The legacy story (home preview): the client's words, heading left, story right. */
body.rh-newlook .site-main > .is-style-story { padding-block: var(--sec); background: #fff; }
body.rh-newlook .site-main .is-style-story .wp-block-columns { gap: clamp(2rem, 5vw, 5rem); align-items: flex-start; margin: 0; }
body.rh-newlook .site-main .is-style-story h2 { margin: .8rem 0 0; }
body.rh-newlook .site-main .is-style-story .is-style-lead { margin-top: 1.2rem; color: var(--ink-2, #3C4852); }
body.rh-newlook .site-main .is-style-story p { max-width: 64ch; }
body.rh-newlook .site-main .is-style-story .wp-block-column p + p { margin-top: 1.1rem; }
@media (min-width: 1025px) {
	body.rh-newlook .site-main .is-style-story .wp-block-column:first-child { position: sticky; top: 7rem; }
}
@media (max-width: 959px) {
	body.rh-newlook .site-main .is-style-story .wp-block-columns { flex-direction: column; flex-wrap: nowrap !important; }
	body.rh-newlook .site-main .is-style-story .wp-block-column { flex-basis: auto !important; }
}


/* The "good fit" band: her three paragraphs on one measure, evenly spaced. */
body.rh-newlook .wp-block-cover__inner-container p { max-width: 66ch; margin-inline: auto; }
body.rh-newlook .wp-block-cover__inner-container p + p { margin-top: 1.15rem; }
body.rh-newlook .wp-block-cover__inner-container .is-style-big { margin-bottom: 1.6rem; }

/* The closing CTA, per the header picture the client sent: a light panel, navy words and
   the metal button — not the flat gold panel she said she did not like. */
body.rh-newlook .site-main .is-style-cta .is-style-panel {
	background: #fff;
	box-shadow: inset 0 0 0 1px var(--color-border);
}
body.rh-newlook .site-main .is-style-cta .is-style-panel :is(h2, p, a),
body.rh-newlook .site-main .is-style-cta .is-style-panel :is(h2, p, a) { color: var(--color-primary); }
body.rh-newlook .site-main .is-style-cta .is-style-panel .wp-block-button__link {
	background: var(--gold-metal);
	color: var(--color-primary);
	box-shadow: inset 0 0 0 1px var(--gold-edge);
}
body.rh-newlook .site-main .is-style-cta .is-style-panel .wp-block-button__link::after {
	background-color: transparent;
	background-image: var(--btn-arrow-navy);
}


/* Project Investment — the section from the client's mockup (24 Sep 2026): her words on
   the left with a ticked list, and a card of the things that influence the investment. */
body.rh-newlook .site-main > .is-style-investment { padding-block: var(--sec); }
body.rh-newlook .is-style-investment .wp-block-columns { gap: clamp(2rem, 4vw, 4.5rem); align-items: flex-start; margin: 0; }
body.rh-newlook .is-style-investment h2 { margin: .8rem 0 1.4rem; }
body.rh-newlook .is-style-investment p { max-width: 54ch; }
body.rh-newlook .is-style-investment p + p { margin-top: 1.1rem; }
body.rh-newlook .is-style-investment .is-style-label {
	margin: 2.2rem 0 1rem;
	padding-top: 1.8rem;
	border-top: 1px solid var(--color-border);
	font-family: var(--font-body);
	font-weight: 500;
	color: var(--color-primary);
}
body.rh-newlook .is-style-investment .is-style-ticks { margin: 0 0 2rem; padding: 0; list-style: none; }
body.rh-newlook .is-style-investment .is-style-ticks li {
	position: relative;
	margin: 0 0 .7rem;
	padding-left: 2rem;
	color: var(--ink-2, #3C4852);
}
body.rh-newlook .is-style-investment .is-style-ticks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .28em;
	width: 1.15rem;
	height: 1.15rem;
	border-radius: 50%;
	border: 1px solid var(--gold-muted);
	background: var(--btn-arrow-navy) center / .6rem .6rem no-repeat;
	opacity: .9;
}
/* the card */
body.rh-newlook .is-style-influence {
	padding: clamp(1.6rem, 2.4vw, 2.2rem);
	background: #fff;
	border: 1px solid var(--color-border);
	border-radius: var(--radius, 24px);
}
body.rh-newlook .is-style-influence h3 { margin: 0 0 1.2rem; padding-bottom: 1rem; border-bottom: 1px solid var(--color-border); }
body.rh-newlook .is-style-influence .is-style-rows { margin: 0; padding: 0; list-style: none; }
body.rh-newlook .is-style-influence .is-style-rows li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: .95rem 0;
	border-bottom: 1px solid var(--color-border);
	font-family: var(--font-heading);
	font-size: 1.22rem;
	color: var(--color-primary);
}
body.rh-newlook .is-style-influence .is-style-rows li::after { content: "\203A"; color: var(--gold-muted); font-size: 1.3rem; line-height: 1; }
body.rh-newlook .is-style-influence .is-style-note {
	margin: 1.4rem 0 0;
	font-size: .92rem;
	line-height: 1.6;
	color: var(--ink-3, #5B6875);
	max-width: none;
}
@media (max-width: 959px) {
	body.rh-newlook .is-style-investment .wp-block-columns { flex-direction: column; flex-wrap: nowrap !important; }
	body.rh-newlook .is-style-investment .wp-block-column { flex-basis: auto !important; }
}

/* the card rows: no inherited arrow marker, label left, chevron right */
body.rh-newlook .is-style-influence .is-style-rows li::before { content: none; display: none; }
body.rh-newlook .is-style-influence .is-style-rows li { padding-left: 0; text-align: left; }
/* her list is ticked, not arrowed */
body.rh-newlook .is-style-investment .is-style-ticks li::before {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23A98F4F' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / .68rem .68rem no-repeat;
}


/* The button exactly as the client drew it (24 Sep 2026): the brass plate, a navy serif
   label and a chevron — not the diagonal arrow the old design used. */
body.rh-newlook {
	--btn-arrow-navy: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23082246' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
	--btn-arrow-gold: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23C2A362' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
	--btn-arrow-cream: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FAF7F3' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E");
}
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit),
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit) {
	font-size: 1.2rem;
	padding-inline: 1.7rem .9rem;
}
/* the block buttons carry an inline SVG arrow: swap it for the same chevron */
body.rh-newlook .rh-btn:not(.rh-btn--navy) .rh-btn__chip svg { display: none; }
body.rh-newlook .rh-btn:not(.rh-btn--navy) .rh-btn__chip::after {
	content: "";
	width: 1.05rem;
	height: 1.05rem;
	background: var(--btn-arrow-navy) center / contain no-repeat;
}
body.rh-newlook .site-main .wp-block-button__link::after { background-size: 1.05rem 1.05rem; width: 1.6rem; }

/* the card follows the eye down the longer left column */
@media (min-width: 1025px) {
	body.rh-newlook .is-style-investment .wp-block-column:last-child { position: sticky; top: 7rem; }
}
/* one rule under the heading, not two */
body.rh-newlook .is-style-influence .is-style-rows { border-top: 0; margin-top: 0; }
body.rh-newlook .is-style-influence .is-style-rows li:first-child { border-top: 0; }

/* the header button sits smaller than the page buttons */
body.rh-newlook .rh-header .rh-btn { font-size: .86rem; padding: .78rem .9rem .78rem 1.35rem; }
body.rh-newlook .rh-header .rh-btn .rh-btn__chip { width: 1.4rem; height: 1.4rem; }
/* page buttons: her proportions */
body.rh-newlook :is(.site-main .wp-block-button__link, .site-main .ff-btn-submit),
body.rh-newlook :is(.site-main .wp-block-button__link, .site-main .ff-btn-submit) { font-size: 1.08rem; padding-inline: 1.5rem .8rem; }

/* an eyebrow in a centred section centres its rule too */
body.rh-newlook :is(.wp-block-cover, .has-text-align-center) .is-style-eyebrow,
body.rh-newlook :is(.wp-block-cover, .has-text-align-center) .is-style-eyebrow { justify-content: center; }

/* the FAQ photo: room above it, and the site's corner radius */
body.rh-newlook .is-style-faq-photo { margin-top: 2.2rem; }
body.rh-newlook .is-style-faq-photo img { border-radius: var(--radius-sm, 14px); display: block; }

/* the closing panel: a very dim champagne rather than stark white, so it still reads as a
   panel on the ivory page but keeps the light scheme the client asked for. */
body.rh-newlook .site-main .is-style-cta .is-style-panel { background: #F7F1E3; box-shadow: inset 0 0 0 1px #E8DFCA; }

/* the service-area line: wide enough that the town list does not leave one word alone */
body.rh-newlook .site-main .is-style-area { max-width: 62rem; text-wrap: pretty; }


/* Her 24 Sep notes: the menu in the body face and a little larger, and the service cards
   a step up in size. */
body.rh-newlook .rh-nav__link,
body.rh-newlook .rh-nav__link,
body.rh-newlook .rh-header__tel {
	font-family: var(--font-body);
	font-weight: 500;
	letter-spacing: 0;
}
body.rh-newlook .rh-nav__link { font-size: 1.12rem; }
body.rh-newlook .rh-header__tel { font-size: 1.06rem; }

/* the service cards */
body.rh-newlook .arenex-cards__title { font-size: 1.42rem; }
body.rh-newlook .arenex-cards__card p { font-size: 1.04rem; }
body.rh-newlook .arenex-cards__card { padding: clamp(1.5rem, 2.2vw, 2.1rem); }

/* the story photo sits under the heading with room to breathe */
body.rh-newlook .site-main .is-style-story-photo { margin: 2rem 0 0; }
body.rh-newlook .site-main .is-style-story-photo img { border-radius: var(--radius-sm, 14px); display: block; }

/* "Throughout your project" and "What carries forward": four or three columns of short
   promises under a heading (24 Sep 2026). */
body.rh-newlook .site-main > .is-style-expect { padding-block: var(--sec); }
body.rh-newlook .site-main .is-style-expect h2,
body.rh-newlook .site-main .is-style-band-navy h2 { margin: .6rem 0 2.6rem; max-width: 22ch; }
body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-columns { gap: clamp(1.6rem, 3vw, 3rem); align-items: flex-start; }
body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-column h3 { margin: 0 0 .6rem; }
body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-column p { margin: 0; font-size: 1rem; }
body.rh-newlook .site-main .is-style-expect .wp-block-column { padding-top: 1.2rem; border-top: 1px solid var(--color-border); }
@media (max-width: 781px) {
	body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-column { flex-basis: 100% !important; }
}


/* 24 Sep 2026, her Text Updates document: she likes the menu's serif and wants it on all the
   smaller text too — the service-area line, the dropdowns and the supporting paragraphs she
   marked. Headings were already Cormorant. A serif sits smaller and lighter than the sans it
   replaces, so body text goes up in size and to weight 500 to stay comfortable to read. */
body.rh-newlook {
	--font-body: 'Cormorant Garamond', Georgia, serif;
	--body-size: clamp(1.15rem, 1.35vw, 1.3rem);
	--body-line-height: 1.55;
	--menu-size: 1.35rem;
}
body.rh-newlook .site-main :is(p, li, dd, dt, figcaption, label, input, select, textarea, .ff-el-form-control),
body.rh-newlook .rh-footer :is(p, li, a),
body.rh-newlook .rh-nav__link,
body.rh-newlook .rh-header__tel {
	font-family: var(--font-body);
}
body.rh-newlook .site-main :is(p, li) { font-size: var(--body-size); font-weight: 500; line-height: var(--body-line-height); }
body.rh-newlook .site-main .is-style-lead { font-size: clamp(1.3rem, 1.6vw, 1.5rem); }
body.rh-newlook .site-main .is-style-area { font-size: 1.15rem; font-weight: 500; }

/* the menu: the same serif, larger, as she asked */
body.rh-newlook .rh-nav__link { font-size: var(--menu-size); font-weight: 600; letter-spacing: 0; }
body.rh-newlook .rh-header__tel { font-size: 1.28rem; font-weight: 600; }

/* the header button: bolder and a touch larger */
body.rh-newlook .rh-header .rh-btn { font-size: 1rem; font-weight: 700; letter-spacing: .13em; }

/* form fields and their dropdowns in the same serif */
body.rh-newlook .site-main .frm-fluent-form :is(.ff-el-form-control, select, option, label) {
	font-family: var(--font-body);
	font-size: 1.15rem;
	font-weight: 500;
}
body.rh-newlook .site-main .frm-fluent-form .ff-el-input--label label { font-weight: 600; }

/* eyebrows and small labels keep their spacing but take the serif too */
body.rh-newlook .site-main :is(.is-style-eyebrow, .is-style-label) { font-family: var(--font-body); font-weight: 600; }

/* the review cards read as reviews, so they stay in the serif as well */
body.rh-newlook .arenex-testimonials :is(.arenex-testimonials__quote, .arenex-testimonials__name, .arenex-testimonials__detail, .arenex-testimonials__date) {
	font-family: var(--font-body);
}
body.rh-newlook .arenex-testimonials__quote { font-size: 1.18rem; font-weight: 500; line-height: 1.55; }


/* Her second text document (24 Sep, evening): all text in Cormorant Garamond, and the
   marked text bolder and bigger — the navy band copy, the closing paragraphs, the footer
   and the buttons. Cormorant's 500 reads light at paragraph size, so body text goes to 600. */
body.rh-newlook {
	--body-size: clamp(1.2rem, 1.45vw, 1.32rem);
}
body.rh-newlook .site-main :is(p, li) { font-weight: 600; }
body.rh-newlook .site-main .is-style-big { font-weight: 600; }

/* on the navy bands a serif needs a touch more weight to hold up against the dark */
body.rh-newlook :is(.is-style-band-navy, .wp-block-cover, .is-style-hero, .is-style-founder) :is(p, li) { font-weight: 600; }

/* the footer: the same serif, larger and heavier than the old sans it replaced */
body.rh-newlook .rh-footer :is(p, li, a, span) { font-family: var(--font-body); font-size: 1.2rem; font-weight: 600; }
body.rh-newlook .rh-footer .rh-footer__title { font-family: var(--font-body); font-size: 1rem; font-weight: 700; letter-spacing: .12em; }
body.rh-newlook .rh-footer__bar :is(p, span, a) { font-size: 1.05rem; font-weight: 500; }

/* the buttons she marked */
body.rh-newlook :is(.rh-btn, .site-main .wp-block-button__link, .site-main .ff-btn-submit) { font-size: 1.22rem; font-weight: 700; }
body.rh-newlook .rh-header .rh-btn { font-size: 1.02rem; font-weight: 700; }


/* Fix, same evening: the blanket body-size rule above also hit the paragraphs that have a
   style of their own (the statement line, the lead, the numbered lines), flattening them to
   body size. Those keep the theme's own sizes; only plain paragraphs take the body size. */
body.rh-newlook .site-main :is(p, li)[class*="is-style-"] { font-size: revert; }
body.rh-newlook .site-main p.is-style-big {
	font-size: clamp(1.6rem, 2.6vw, 2.3rem);
	font-weight: 500;
	line-height: 1.3;
}
body.rh-newlook .site-main p.is-style-lead { font-size: clamp(1.3rem, 1.7vw, 1.55rem); font-weight: 600; line-height: 1.5; }
body.rh-newlook .site-main p.is-style-next { font-size: 1.15rem; font-weight: 600; }
body.rh-newlook .site-main p.is-style-contact { font-size: 1.15rem; font-weight: 600; }
body.rh-newlook .site-main p.is-style-area { font-size: 1.15rem; font-weight: 600; }
body.rh-newlook .site-main p.is-style-eyebrow { font-size: .95rem; font-weight: 700; letter-spacing: .18em; }


/* Fix: the four-column rule above was also catching the navy band's two columns of copy and
   shrinking it to 1rem. Only the feature columns take the smaller size; band copy reads at
   body size. And paragraphs need air between them — the prototype zeroes every margin. */
body.rh-newlook .site-main .is-style-band-navy .wp-block-column p { font-size: var(--body-size); }
body.rh-newlook .site-main .is-style-expect .wp-block-column p { font-size: 1.05rem; }
body.rh-newlook .site-main p + p,
body.rh-newlook .site-main .wp-block-column p + p,
body.rh-newlook .wp-block-cover__inner-container p + p { margin-top: 1.05em; }
body.rh-newlook .site-main p.is-style-next + p.is-style-next { margin-top: 0; }

/* the gap needs to outrank the "margin: 0" on those same columns */
body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-column p + p,
body.rh-newlook .site-main .is-style-investment .wp-block-column p + p,
body.rh-newlook .site-main .is-style-story .wp-block-column p + p { margin-top: 1.05em; }

/* the card's own heading must read louder than its text — the body-size change had left it
   smaller and lighter than the paragraph under it */
body.rh-newlook .site-main .arenex-cards__title {
	font-size: clamp(1.45rem, 1.8vw, 1.72rem);
	font-weight: 600;
	line-height: 1.25;
	margin-bottom: .55rem;
}
body.rh-newlook .site-main :is(.arenex-cards__text, .arenex-cards__card p) {
	font-size: 1.08rem;
	font-weight: 500;
	line-height: 1.55;
}
/* the same idea for the other small headings that sit above body copy */
body.rh-newlook .site-main :is(.arenex-steps__title, .arenex-process__title, .arenex-strip__title) { font-weight: 600; }


/* 24 Sep, late: she wants the phone number back in the sans — the serif's old-style figures
   read oddly in a number — and everything else a step larger again. */
body.rh-newlook :is(a[href^="tel:"], .rh-header__tel, .is-style-call, .rh-footer a[href^="tel:"]) {
	font-family: 'Manrope', system-ui, -apple-system, sans-serif;
	font-weight: 600;
	letter-spacing: 0;
}
body.rh-newlook .rh-header__tel { font-size: 1.12rem; }
body.rh-newlook .site-main .is-style-call { font-size: 1.05rem; }

body.rh-newlook { --body-size: clamp(1.3rem, 1.6vw, 1.45rem); }
body.rh-newlook .site-main :is(.arenex-cards__text, .arenex-cards__card p) { font-size: 1.16rem; }
body.rh-newlook .site-main .arenex-cards__title { font-size: clamp(1.55rem, 1.95vw, 1.85rem); }
body.rh-newlook .rh-footer :is(p, li, a, span) { font-size: 1.28rem; }
body.rh-newlook .site-main p.is-style-next { font-size: 1.22rem; }
body.rh-newlook .site-main p.is-style-area { font-size: 1.22rem; }
body.rh-newlook .arenex-testimonials__quote { font-size: 1.26rem; }
body.rh-newlook .site-main .frm-fluent-form :is(.ff-el-form-control, select, option, label) { font-size: 1.22rem; }


/* "Other font changes look good… just make bigger": lift the whole scale so the hierarchy
   holds — headings up with the body text, not just the body text. Section rules that set
   their own paragraph size are brought up to the body size too. */
body.rh-newlook {
	--body-size: clamp(1.32rem, 1.65vw, 1.5rem);
	--hero-title-size: clamp(42px, 5.6vw, 82px);
	--page-title-size: clamp(38px, 4.2vw, 60px);
	--h1-size: clamp(40px, 4.8vw, 68px);
	--h2-size: clamp(36px, 4.9vw, 70px);
	--h3-size: clamp(26px, 2.2vw, 32px);
	--h4-size: clamp(21px, 1.7vw, 24px);
}
/* sections that set their own paragraph size follow the body size */
body.rh-newlook .site-main :is(.arenex-split__body, .arenex-cards__card, .arenex-process__panel, .arenex-steps__body, .wp-block-column, .wp-block-cover__inner-container) p:not([class*="is-style-"]) {
	font-size: var(--body-size);
}
body.rh-newlook .site-main .is-style-expect .wp-block-column p { font-size: 1.16rem; }
body.rh-newlook .site-main :is(.arenex-cards__text, .arenex-cards__card p) { font-size: 1.16rem; }
body.rh-newlook .site-main .arenex-cards__title { font-size: clamp(1.6rem, 2vw, 1.9rem); }


/* 25 Sep: "Manrope is fine for the number on the main pages and at the top. I just don't
   like it in the footer" — so the footer number sits in the footer's own face. Same
   specificity as the sans rule above and later in the file, so it wins there only. */
body.rh-newlook .rh-footer :is(a[href^="tel:"], .rh-footer__tel) {
	font-family: var(--serif, 'Cormorant Garamond', Georgia, serif);
	font-weight: 500;
	letter-spacing: .01em;
}

/* "Make the size of all of the fonts in that section the same size": the service titles
   sat on a clamp, so a long one like Custom Kitchen Renovations rendered a hair smaller
   than its neighbour and the row read unaligned. One fixed size, and the titles share a
   baseline so two-line and one-line cards still line up. */
body.rh-newlook .site-main :is(.arenex-cards__title, .arenex-services__title, .arenex-grid__title) {
	font-size: 1.68rem;
	line-height: 1.22;
}
@media (max-width: 860px) {
	body.rh-newlook .site-main :is(.arenex-cards__title, .arenex-services__title, .arenex-grid__title) { font-size: 1.54rem; }
}


/* The longest service name ("Custom Kitchen Renovations") fell to a second line while its
   neighbours stayed on one, so the row read unaligned — her point about that section. One
   size for every title, small enough that the longest holds a single line down to the
   narrowest desktop column, and balanced wrapping if a longer name is ever added. */
body.rh-newlook .site-main .is-style-more .arenex-cards__title {
	font-size: 1.42rem;
	line-height: 1.25;
	text-wrap: balance;
}

/* Cormorant's default figures sit at different heights, which is what looked odd about the
   number in the first place. Lining figures keep the footer's own face with even digits. */
body.rh-newlook .rh-footer :is(a[href^="tel:"], .rh-footer__tel) {
	font-variant-numeric: lining-nums;
	font-feature-settings: "lnum" 1;
}

/* Page heroes: the two columns were bottom-aligned, so a short heading dropped away from
   the copy beside it. Top-aligned they start on the same line on every page. */
body.rh-newlook .site-main .is-style-page-hero .wp-block-columns { align-items: flex-start; }
body.rh-newlook .site-main .is-style-page-hero .wp-block-column { align-self: flex-start; }


/* The story section: the heading column already travels with the text, but at rest a 42%
   column held three words against a very tall void. A narrower column, a hairline under
   the heading so it has a base instead of floating, and a tighter measure on the right
   make the two sides read as one block. The columns carry inline flex-basis, so the width
   needs !important — the same reason the phone rule below already does. */
@media (min-width: 1025px) {
	body.rh-newlook .site-main .is-style-story .wp-block-column:first-child  { flex-basis: 36% !important; }
	body.rh-newlook .site-main .is-style-story .wp-block-column:last-child   { flex-basis: 64% !important; }
	body.rh-newlook .site-main .is-style-story .wp-block-column:first-child h2::after {
		content: "";
		display: block;
		width: 3.5rem;
		margin-top: 1.6rem;
		border-top: 1px solid var(--gold-muted, #B08F4A);
	}
}
body.rh-newlook .site-main .is-style-story p { max-width: 58ch; }


/* The founder photo was stretched to the text column's height and cropped to fill it
   (height:100% + min-height:480px + cover), so a landscape shot showed as a tall slice.
   It keeps its own proportions now, and follows the longer text column instead. */
body.rh-newlook .site-main .is-style-founder .wp-block-image img {
	height: auto;
	min-height: 0;
	object-fit: contain;
}
@media (min-width: 1025px) {
	body.rh-newlook .site-main .is-style-founder .wp-block-columns > .wp-block-column:last-child {
		align-self: flex-start;
		position: sticky;
		top: 7rem;
	}
}

/* The process intro was sitting at full body size in semibold, so it competed with the
   heading above it. A step down in size and weight, still clearly the section's lead. */
body.rh-newlook .site-main .arenex-process__head p {
	font-size: 1.2rem;
	font-weight: 500;
	line-height: 1.6;
}


/* The hero heading is held to a 20ch measure. On a desktop that is a comfortable three
   lines, but on a tablet the type steps down while the measure stays, so the same words
   fell into four lines in a narrow column with the photo empty beside it. Wider measure
   for the tablet band only; desktop and phone keep what they had. */
@media (min-width: 601px) and (max-width: 1024px) {
	body.rh-newlook .site-main .is-style-hero h1 { max-width: 30ch; }
}


/* Same story as the hero: the services heading is held to a 27ch measure that reads well
   at desktop sizes but leaves a narrow column on a tablet. */
@media (min-width: 601px) and (max-width: 1024px) {
	body.rh-newlook .site-main .is-style-services h2 { max-width: 36ch; }
	body.rh-newlook .site-main .is-style-reviews h2 { max-width: 36ch; }
}

/* Below 960px the founder photo was pinned to a 4/3.2 box. With the crop removed that
   box letterboxes the landscape shot instead, so let it keep its own proportions here too. */
@media (max-width: 959px) {
	body.rh-newlook .site-main .is-style-founder .wp-block-image img,
	body.rh-newlook .site-main .is-style-founder .wp-block-columns .wp-block-image img {
		aspect-ratio: auto;
		height: auto;
		min-height: 0;
	}
}

/* The review cards sit in a row on desktop. The Layout setting is one choice for every
   screen, so the row is narrowed here instead: one card at a time on tablet and phone,
   snapping as it is swiped, while the desktop row is untouched. */
@media (max-width: 1024px) {
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__track {
		grid-auto-flow: column;
		grid-template-columns: none;
		grid-auto-columns: 100%;
		overflow-x: auto;
		scroll-snap-type: x mandatory;
	}
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__item {
		scroll-snap-align: center;
	}
}


/* The dropdown slid up 6px as it opened. She only wants the colour change on the links,
   so the panel now fades in place — same position closed and open, no movement. */
.rh-nav__panel,
.rh-nav__item.has-panel:hover .rh-nav__panel,
.rh-nav__item.has-panel:focus-within .rh-nav__panel {
	transform: translate(-50%, 0);
}

/* On a phone the navy band's columns stack, so the gap between them already separates the
   heading from the copy — the heading's own 2.6rem below it made that gap read as a hole. */
@media (max-width: 959px) {
	body.rh-newlook .site-main .is-style-band-navy h2 { margin-bottom: .4rem; }
	body.rh-newlook .site-main :is(.is-style-expect, .is-style-band-navy) .wp-block-columns { gap: 1.4rem; }
}


/* One ground, not two. The Projects header sat on its own grey-cream while the rest of
   the page used the site's ivory, so the page read as two shades stacked. The header now
   sits on the same ground as everything under it. */
:is(.home, .page-template-page-blocks) .site-main > .wp-block-group.alignfull.is-style-page-hero-cream {
	background: transparent;
}

/* Phones: the ch measures that keep headings readable on a desktop leave a narrow column
   on a 375px screen, so a three-word heading fell down four lines with empty space beside
   it. On a phone the screen is the measure. */
@media (max-width: 768px) {
	body.rh-newlook .site-main :is(.is-style-panel, .is-style-services, .is-style-reviews, .is-style-band-navy, .is-style-hero, .is-style-cta) :is(h1, h2) {
		max-width: none;
	}
}

/* Phones: stacked sections were each contributing their own vertical padding, so the gap
   between two of them read as one empty band. One value for the section rhythm, and the
   steps section no longer carries the extra header offset it needs on a desktop. */
@media (max-width: 768px) {
	body.rh-newlook .site-main > :is(.wp-block-group, .wp-block-columns, section).alignfull,
	body.rh-newlook .site-main > section.arenex-steps,
	body.rh-newlook .site-main > .is-style-expect,
	body.rh-newlook .site-main > .is-style-story {
		padding-block: 52px;
	}
	body.rh-newlook .site-main > section.arenex-steps { padding-top: 52px; }
	/* A section that follows another on the same ground only needs one gap, not two. */
	body.rh-newlook .site-main > .is-style-expect { padding-top: 0; }
}


/* The steps band keeps an extra 66px of headroom on phones from the prototype, which on
   top of the section above it read as a double gap. Its rule carries more classes than the
   rhythm rule above, so it is matched here rather than left to lose the cascade. */
@media (max-width: 768px) {
	body.rh-newlook :is(.home, .page-template-page-blocks) .site-main > .arenex-steps.is-style-numbered-rows { padding-block: 52px; }
	body.rh-newlook :is(.home, .page-template-page-blocks) .site-main > :is(.arenex-split, .is-style-statement-photo, .is-style-statement) { padding-block: 52px; }
}


/* ---------------------------------------------------------------------------
   The consultation form, rebuilt in Forminator so the photo upload she asked
   for actually exists (Fluent Forms free has no upload field at all). The form
   is set to "no style" in Forminator, so every value below is the one the old
   form used — this is a port, not a redesign.
   --------------------------------------------------------------------------- */

.site-main .is-style-consult form.forminator-custom-form { display: flex; flex-direction: column; gap: 1.1rem; }

/* Two fields to a row, one on a narrow phone. Flex rather than grid so a row
   holding a single full-width field needs no separate rule. */
.site-main .is-style-consult .forminator-row { display: flex; flex-wrap: wrap; gap: 1.1rem; margin: 0; }
.site-main .is-style-consult .forminator-col { min-width: 0; padding: 0; margin: 0; }
.site-main .is-style-consult .forminator-col-6 { flex: 1 1 calc(50% - .55rem); }
.site-main .is-style-consult .forminator-col-12 { flex: 1 1 100%; }
@media (max-width: 639px) {
	.site-main .is-style-consult .forminator-col-6 { flex-basis: 100%; }
}

.site-main .is-style-consult .forminator-field { margin: 0; }

.site-main .is-style-consult label.forminator-label {
	display: block;
	margin: 0 0 .45rem;
	padding: 0;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--color-primary, #082246);
}
.site-main .is-style-consult .forminator-required { margin-left: .1em; color: var(--gold-muted, #B09850); }

.site-main .is-style-consult :is(.forminator-input, .forminator-textarea, select.forminator-select--field) {
	box-sizing: border-box;
	width: 100%;
	height: auto;
	min-height: 0;
	margin: 0;
	font-family: inherit;
	font-weight: 500;
	font-size: .95rem;
	line-height: 1.65;
	color: var(--ink, #101820);
	background-color: var(--cream, #FAF7F3);
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: 10px;
	padding: .7rem .85rem;
	box-shadow: none;
}
.site-main .is-style-consult select.forminator-select--field { appearance: auto; background-image: none; }
.site-main .is-style-consult .forminator-textarea { min-height: 7.5rem; resize: vertical; }
.site-main .is-style-consult :is(.forminator-input, .forminator-textarea, select.forminator-select--field):focus {
	outline: 2px solid var(--gold-muted, #B09850);
	outline-offset: 1px;
	border-color: var(--color-border, #E7E0D4);
}

/* Her helper lines sit under the field they explain, not beside it. */
.site-main .is-style-consult .forminator-description {
	display: block;
	margin-top: .4rem;
	font-size: .88rem;
	line-height: 1.55;
	color: var(--ink-3, #5B6875);
}

.site-main .is-style-consult .forminator-error { margin-top: .35rem; font-size: .85rem; color: #B42318; }

/* The upload field: a quiet bordered well so it reads as somewhere to drop a file
   rather than a naked browser control. */
.site-main .is-style-consult .forminator-field-upload .forminator-multi-upload,
.site-main .is-style-consult .forminator-field-upload .forminator-input-file {
	box-sizing: border-box;
	width: 100%;
	padding: 1rem;
	border: 1px dashed var(--color-border, #E7E0D4);
	border-radius: 10px;
	background: var(--cream, #FAF7F3);
	color: var(--ink-2, #3C4852);
}
.site-main .is-style-consult .forminator-upload--remove { margin-left: .6rem; }

/* The button, and its arrow chip, exactly as the old one. */
.site-main .is-style-consult .forminator-button-submit {
	display: inline-flex;
	align-items: center;
	gap: .8rem;
	margin: .4rem 0 0;
	padding: .6rem .6rem .6rem 1.6rem;
	border: 0;
	border-radius: 999px;
	font-family: var(--font-body, sans-serif);
	font-weight: 500;
	font-size: 1.02rem;
	line-height: 1.2;
	max-width: 100%;
	white-space: normal;
	text-align: left;
	background-color: var(--color-accent, #F1C654);
	color: var(--color-primary, #082246);
	box-shadow: none;
	cursor: pointer;
	transition: background-color .45s var(--ease, ease), transform .45s var(--ease, ease);
}
.site-main .is-style-consult .forminator-button-submit::after {
	content: "";
	flex: none;
	width: 2.35rem;
	height: 2.35rem;
	border-radius: 999px;
	background: rgb(8 34 70 / .12) var(--btn-arrow-navy) center / .95rem .95rem no-repeat;
	transition: transform .45s var(--ease, ease);
}
.site-main .is-style-consult .forminator-button-submit:hover::after { transform: scale(1.06); }

.site-main .is-style-consult .forminator-response-message {
	margin: 0;
	padding: 1rem 1.2rem;
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: 10px;
	background: var(--cream, #FAF7F3);
	color: var(--color-primary, #082246);
	box-shadow: none;
}

/* The new look's type and gold-metal button, extended to the Forminator markup. */
body.rh-newlook .site-main .is-style-consult :is(.forminator-input, .forminator-textarea, select.forminator-select--field, option, label.forminator-label) {
	font-family: var(--font-body);
	font-size: 1.22rem;
	font-weight: 500;
}
body.rh-newlook .site-main .is-style-consult label.forminator-label { font-weight: 600; }
body.rh-newlook .site-main .forminator-button-submit {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 1.22rem;
	letter-spacing: .02em;
	border-radius: 8px;
	background: var(--gold-metal);
	box-shadow: inset 0 0 0 1px var(--gold-edge);
	color: #082246;
	padding-inline: 1.5rem .8rem;
}
body.rh-newlook .site-main .forminator-button-submit:hover { background: var(--gold-metal-hover); }


/* Forminator prints its response container before the fields and fills it only after a
   submit. Styled as a field it read as an empty box above Name, so it is hidden until it
   actually says something. */
.site-main .is-style-consult .forminator-response-message:empty,
.site-main .is-style-consult .forminator-response-message[aria-hidden="true"] {
	display: none;
	margin: 0;
	padding: 0;
	border: 0;
}

/* Her placeholder runs to three lines; the box was a line short of showing it. */
.site-main .is-style-consult .forminator-textarea { min-height: 9.5rem; }


/* The shared field rule above uses :is(), which takes the specificity of its most specific
   argument (select.forminator-select--field), so it outranked the textarea height. Matched
   on the element as well as the class so the box is tall enough for her placeholder. */
.site-main .is-style-consult textarea.forminator-textarea { min-height: 9.5rem; }


/* The form sat straight on the page ground with nothing holding it, so it read as loose
   fields rather than one thing to fill in. A white panel gives the cream fields something
   to sit against and the section a clear right-hand object. It hugs its content rather
   than stretching to the left column's height. */
.site-main .is-style-consult .wp-block-columns > .wp-block-column:last-child {
	align-self: flex-start;
	background: #fff;
	border: 1px solid var(--color-border, #E7E0D4);
	border-radius: var(--radius, 24px);
	padding: clamp(1.4rem, 2.6vw, 2.4rem);
	box-shadow: 0 1px 2px rgb(8 34 70 / .04), 0 14px 34px rgb(8 34 70 / .05);
}
@media (max-width: 600px) {
	.site-main .is-style-consult .wp-block-columns > .wp-block-column:last-child {
		padding: 1.15rem;
		border-radius: var(--radius-sm, 14px);
	}
}
/* Two empty paragraphs are left in that column from the form block it replaced. */
.site-main .is-style-consult .wp-block-column > p:empty { display: none; margin: 0; }


/* My earlier "no slide" rule was not scoped to the desktop nav, so it also hit the phone
   menu — where the panel is a plain list, not a centred dropdown — and pushed it half its
   width off the left edge, clipping the service names. Desktop only. */
@media (min-width: 861px) {
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel { transform: translate(-50%, 0); }
}
@media (max-width: 860px) {
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel { transform: none; }
}

/* Once the founder columns stop wrapping, the image column stretched to the text column's
   height and the photo sat in the middle of a tall navy gap. The column hugs the photo now. */
@media (min-width: 782px) {
	body.rh-newlook .site-main .is-style-founder .wp-block-columns > .wp-block-column:last-child { align-self: flex-start; }
	body.rh-newlook .site-main .is-style-founder .wp-block-columns .wp-block-image { height: auto; }
}

/* The review row scrolls one card at a time on tablet and phone; the scrollbar under it
   was doing no work, so it is hidden the way the slider layout already hides its own. */
@media (max-width: 1024px) {
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__track { scrollbar-width: none; }
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__track::-webkit-scrollbar { display: none; }
}


/* One review per row, stacked — all three readable by scrolling the page, rather than a
   sideways carousel that hides two of them. Replaces the swipe track set earlier. */
@media (max-width: 1024px) {
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__track {
		grid-auto-flow: row;
		grid-template-columns: minmax(0, 1fr);
		grid-auto-columns: auto;
		overflow-x: visible;
		scroll-snap-type: none;
		gap: var(--arenex-testimonials-gap, 24px);
	}
	body.rh-newlook .arenex-testimonials.is-look-card.is-layout-row .arenex-testimonials__item {
		scroll-snap-align: none;
	}
}


/* Nothing about the dropdown should move: the links change colour, and the panel fades in
   where it already sits. The transform is dropped from the transition so no residual
   animation can shift it, on hover or on open. */
@media (min-width: 861px) {
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel {
		transition: opacity .25s var(--ease, ease), visibility 0s;
	}
	.rh-nav__sub { transition: color .2s var(--ease, ease); }
	.rh-nav__sub:hover,
	.rh-nav__sub:focus-visible { background: none; }
}


/* NAV DROPDOWN — nothing moves sideways, full stop.
   I have not been able to reproduce the shift by reading the cascade, so rather than guess
   again every property that can move a link horizontally is pinned on both states. */
.rh-nav__panel,
.rh-nav__item.has-panel:hover .rh-nav__panel,
.rh-nav__item.has-panel:focus-within .rh-nav__panel,
.rh-nav__sub,
.rh-nav__sub:hover,
.rh-nav__sub:focus,
.rh-nav__sub:focus-visible,
.rh-nav__sub:active {
	margin-left: 0 !important;
	margin-right: 0 !important;
	text-indent: 0 !important;
	left: auto !important;
	right: auto !important;
	translate: none !important;
}
.rh-nav__sub,
.rh-nav__sub:hover,
.rh-nav__sub:focus,
.rh-nav__sub:focus-visible,
.rh-nav__sub:active {
	transform: none !important;
	padding-left: inherit;
	transition: color .2s var(--ease, ease) !important;
}
@media (max-width: 860px) {
	.rh-nav__panel,
	.rh-nav__item.has-panel:hover .rh-nav__panel,
	.rh-nav__item.has-panel:focus-within .rh-nav__panel { transform: none !important; }
	.rh-nav__sub,
	.rh-nav__sub:hover,
	.rh-nav__sub:focus-visible { padding: .32rem 0 !important; background: none !important; }
}

/* EYEBROWS — .18em of tracking was pushing the letters apart; a third of that reads as
   considered rather than stretched, and they step down on a phone. */
body.rh-newlook .site-main p.is-style-eyebrow,
body.rh-newlook .site-main .is-style-eyebrow { letter-spacing: .06em; }
@media (max-width: 768px) {
	body.rh-newlook .site-main p.is-style-eyebrow,
	body.rh-newlook .site-main .is-style-eyebrow { font-size: .82rem; gap: .6rem; }
	body.rh-newlook .site-main .is-style-eyebrow::before { width: 28px; }
}

/* FORM — Forminator's own stylesheet loads after the theme and was keeping its 15px
   column padding and its own select width, so the fields sat narrower than their column.
   Scoped through the form element to outrank it. */
.site-main .is-style-consult form.forminator-ui .forminator-row > .forminator-col { padding-left: 0; padding-right: 0; }
.site-main .is-style-consult form.forminator-ui :is(select.forminator-select--field, .forminator-input, .forminator-textarea) { width: 100%; max-width: 100%; box-sizing: border-box; }


/* Correction: "padding-left: inherit" above picked up the panel's padding and left the
   links 3px narrower on the left than the right, which itself nudges the text sideways.
   Symmetric padding, stated once, identical in every state. */
@media (min-width: 861px) {
	.rh-nav__sub,
	.rh-nav__sub:hover,
	.rh-nav__sub:focus,
	.rh-nav__sub:focus-visible,
	.rh-nav__sub:active { padding: .6rem .8rem !important; }
}


/* FOUNDER PHOTO — forced, not negotiated.
   The photo is 1200x800. width:100% + aspect-ratio + height:auto makes its height exactly
   width / 1.5 and nothing else can set it. The figure and the column are stopped from
   stretching so the photo sits straight under the button with no navy gap, at every width. */
body .site-main .is-style-founder .wp-block-columns > .wp-block-column {
	justify-content: flex-start !important;
	align-self: flex-start !important;
	flex-grow: 0 !important;
}
body .site-main .is-style-founder .wp-block-image,
body .site-main .is-style-founder .wp-block-columns .wp-block-image {
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	align-self: flex-start !important;
	margin: 0 !important;
}
body .site-main .is-style-founder .wp-block-image img,
body .site-main .is-style-founder .wp-block-columns .wp-block-image img {
	display: block !important;
	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	aspect-ratio: 1200 / 800 !important;
	object-fit: cover !important;
}


/* The steps band keeps 130px of headroom on a phone (--sec + 66px) from the prototype,
   which on top of the band above reads as a dead gap. Forced, because the theme rule that
   sets it keeps winning the cascade. */
@media (max-width: 768px) {
	body .site-main > section.arenex-steps,
	body .site-main > .arenex-steps.is-style-numbered-rows,
	body :is(.home, .page-template-page-blocks) .site-main > .arenex-steps.is-style-numbered-rows {
		padding-top: 52px !important;
		padding-bottom: 52px !important;
	}
}


/* The story section read oddly with the heading alone in a side column against a tall
   text column. It sits above the copy now, full width, with the rule under it acting as a
   divider into the story. The sticky column and the 36/64 split are cancelled with it. */
body.rh-newlook .site-main .is-style-story .wp-block-columns {
	flex-direction: column;
	gap: 0;
}
@media (min-width: 1025px) {
	body.rh-newlook .site-main .is-style-story .wp-block-column:first-child,
	body.rh-newlook .site-main .is-style-story .wp-block-column:last-child {
		position: static;
		top: auto;
		flex-basis: auto !important;
	}
}
body.rh-newlook .site-main .is-style-story .wp-block-column { flex-basis: auto !important; }
body.rh-newlook .site-main .is-style-story .wp-block-column:first-child h2 { margin-bottom: 0; }
@media (min-width: 1025px) {
	body.rh-newlook .site-main .is-style-story .wp-block-column:first-child h2::after {
		width: 4.5rem;
		margin-top: 1.4rem;
		margin-bottom: 2.2rem;
	}
}
body.rh-newlook .site-main .is-style-story p { max-width: 68ch; }


/* The CTA heading was held to a 14ch measure, which at 50px put five words on four lines
   in a narrow stack. A wider measure lets the column decide, so it breaks in two or three
   lines instead. */
body.rh-newlook .site-main :is(.is-style-panel, .is-style-cta) h2 { max-width: 24ch; }
@media (max-width: 1024px) {
	body.rh-newlook .site-main :is(.is-style-panel, .is-style-cta) h2 { max-width: none; }
}


/* text-wrap: balance evens the line lengths, which keeps a heading narrow even when the
   column has room — that is what made this one a tall stack of short lines. "pretty" keeps
   the orphan control without shrinking the block, so it now uses the width it has. */
body.rh-newlook .site-main :is(.is-style-panel, .is-style-cta) h2 { text-wrap: pretty; }


/* The heading was already filling its box — the box was the problem. At laptop widths the
   CTA panel was 47% of the row with 55px of padding each side, leaving 359px for a 50px
   heading. More of the row and less padding gives the words room to run. */
@media (min-width: 769px) and (max-width: 1300px) {
	body.rh-newlook .site-main .is-style-cta > .wp-block-column:first-child { flex-basis: 58% !important; }
	body.rh-newlook .site-main .is-style-cta > .wp-block-column:last-child { flex-basis: 42% !important; }
	body.rh-newlook .site-main .is-style-cta .is-style-panel,
	body.rh-newlook .site-main .is-style-cta > .wp-block-column:first-child { padding-inline: clamp(1.6rem, 3vw, 2.4rem); }
}


/* Wider measure on the story copy — it was at 68ch inside a 1128px column, leaving a lot
   of the row empty. 88ch uses most of the width; past this, lines get long enough that the
   eye loses its place returning to the left. */
body.rh-newlook .site-main .is-style-story p { max-width: 88ch; }