/**
 * Chris Thorn Design: the approved custom CSS.
 *
 * Only rules listed in build-spec.md §12 and §13 belong here. Everything
 * else is theme.json. Each block names the spec section it serves.
 * One breakpoint: 782px, matching the width at which WordPress stacks columns
 * (§6, §12 specified 760px; moved 6 Oct 2026). Below core's 782px a column
 * layout is already stacked, so a theme breakpoint any lower leaves a window
 * where the page has stacked but the rules written for stacking have not run.
 */

/* Phosphor glyphs, bold weight, as mask images so they take the colour of the
   text that carries them. Shared by the cue arrows and the lightbox controls. */
:root {
	--ctd-icon-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M224.49%2C136.49l-72%2C72a12%2C12%2C0%2C0%2C1-17-17L187%2C140H40a12%2C12%2C0%2C0%2C1%2C0-24H187L135.51%2C64.48a12%2C12%2C0%2C0%2C1%2C17-17l72%2C72A12%2C12%2C0%2C0%2C1%2C224.49%2C136.49Z%22%2F%3E%3C%2Fsvg%3E");
	--ctd-icon-arrow-left: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M228%2C128a12%2C12%2C0%2C0%2C1-12%2C12H69l51.52%2C51.51a12%2C12%2C0%2C0%2C1-17%2C17l-72-72a12%2C12%2C0%2C0%2C1%2C0-17l72-72a12%2C12%2C0%2C0%2C1%2C17%2C17L69%2C116H216A12%2C12%2C0%2C0%2C1%2C228%2C128Z%22%2F%3E%3C%2Fsvg%3E");
	--ctd-icon-arrow-up: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M208.49%2C120.49a12%2C12%2C0%2C0%2C1-17%2C0L140%2C69V216a12%2C12%2C0%2C0%2C1-24%2C0V69L64.49%2C120.49a12%2C12%2C0%2C0%2C1-17-17l72-72a12%2C12%2C0%2C0%2C1%2C17%2C0l72%2C72A12%2C12%2C0%2C0%2C1%2C208.49%2C120.49Z%22%2F%3E%3C%2Fsvg%3E");
	--ctd-icon-arrow-up-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M204%2C64V168a12%2C12%2C0%2C0%2C1-24%2C0V93L72.49%2C200.49a12%2C12%2C0%2C0%2C1-17-17L163%2C76H88a12%2C12%2C0%2C0%2C1%2C0-24H192A12%2C12%2C0%2C0%2C1%2C204%2C64Z%22%2F%3E%3C%2Fsvg%3E");
	--ctd-icon-x: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22currentColor%22%3E%3Cpath%20d%3D%22M208.49%2C191.51a12%2C12%2C0%2C0%2C1-17%2C17L128%2C145%2C64.49%2C208.49a12%2C12%2C0%2C0%2C1-17-17L111%2C128%2C47.51%2C64.49a12%2C12%2C0%2C0%2C1%2C17-17L128%2C111l63.51-63.52a12%2C12%2C0%2C0%2C1%2C17%2C17L145%2C128Z%22%2F%3E%3C%2Fsvg%3E");
}

/* Footer sits at the bottom of the window on short pages: the page column is
   at least the viewport tall (less the admin bar when logged in), and main
   takes the spare height. Taller pages are unaffected. */
.wp-site-blocks {
	display: flex;
	flex-direction: column;
	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
	min-height: calc(100dvh - var(--wp-admin--admin-bar--height, 0px));
}
.wp-site-blocks > main {
	flex-grow: 1;
}

/* Focus rings are for keyboard and assistive tech only. WordPress core outlines
   anything with :focus, so a mouse click on the logo or the Enquire button drew
   a thick box as well as the button's own hover state. */
:where(.wp-site-blocks :focus:not(:focus-visible)) {
	outline: none;
}
:where(.wp-site-blocks :focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 3px;
}
.ctd-logo a:focus-visible {
	outline-offset: 6px; /* clear of the artwork */
}

/* §5, §12 (a) Current nav item: 1px ink rule beneath. Drawn as a pseudo-element
   rather than a border, inset on the right by the label's trailing letter-space
   — a border spans the whole inline box, so it ran 1.5px past the last letter
   and looked lopsided against the left side bearing. */
.ctd-header .wp-block-navigation-item__content {
	/* The underline space is mirrored on top so the labels stay optically
	   centred against the Enquire button. */
	position: relative;
	padding-top: 6px;
	padding-bottom: 4px;
}
/* The Enquire button carries the cue classes for the mobile menu row; on
   desktop it is a bordered button, where an arrow would be noise. */
@media (min-width: 782px) {
	.ctd-header .wp-block-button__link::after {
		content: none;
	}
}

/* Hover gets the same rule, not a text underline: the underline sits tight
   under the letters and ignores the space already reserved below. */
.ctd-header .wp-block-navigation-item__content:hover,
.ctd-header .wp-block-navigation-item__content:focus {
	text-decoration: none;
}
@media (min-width: 782px) {
	.ctd-header .wp-block-navigation-item__content[aria-current="page"]::after,
	.ctd-header .current-menu-item > .wp-block-navigation-item__content::after,
	.ctd-header .wp-block-navigation-item__content:hover::after {
		content: "";
		position: absolute;
		left: 0;
		right: var(--wp--custom--tracking--label);
		bottom: 0;
		height: 1px;
		background-color: var(--wp--preset--color--ink);
	}
	/* hover on a page you are not on reads lighter than the current page */
	.ctd-header .wp-block-navigation-item__content:not([aria-current="page"]):hover::after {
		background-color: var(--wp--custom--rule--emphasis);
	}
}

/* §6, §12 (b), §13 Mobile menu: MENU/CLOSE word toggle, full-width panel. */
.ctd-menu-toggle {
	display: none;
}

@media (max-width: 781px) {
	.ctd-header {
		padding: 12px 20px !important; /* overrides the block's inline padding at this breakpoint only */
		/* The open panel sits on the row below, so the gap here decides how far
		   the lockup is from the first divider. Match the closed state's bottom
		   padding, or the header appears to grow when the menu opens. */
		row-gap: 12px !important;
	}
	.ctd-logo img {
		height: 44px !important; /* the image block's 60px on desktop, §12 */
	}
	.ctd-menu-toggle {
		display: block;
		min-height: 44px;
		/* Wide enough for CLOSE so the button does not change size when the
		   label swaps. Measured rather than calculated: ch is the advance of
		   "0", which is a shade narrower than the letters here. */
		min-width: 86px;
		padding: 0 18px;
		text-align: center;
		font: inherit;
		font-family: var(--wp--preset--font-family--azeret-mono);
		font-size: var(--wp--preset--font-size--label);
		letter-spacing: var(--wp--custom--tracking--label);
		text-transform: uppercase;
		color: var(--wp--preset--color--ink);
		background: transparent;
		border: 1px solid var(--wp--custom--rule--control);
		border-radius: 0;
		cursor: pointer;
	}
	.ctd-menu {
		display: none !important; /* beats the flex layout class until opened */
		flex-basis: calc(100% + 40px);
		width: calc(100% + 40px);
		margin: 0 -20px -12px !important;
		border-top: 1px solid var(--wp--custom--rule--hairline);
	}
	.ctd-menu.is-open {
		display: flex !important;
		flex-direction: column;
		align-items: stretch;
		gap: 0 !important;
	}
	.ctd-menu .wp-block-navigation,
	.ctd-menu .wp-block-navigation__container,
	.ctd-menu .wp-block-navigation-item {
		flex-direction: column;
		align-items: stretch;
		gap: 0 !important;
		width: 100%;
	}
	.ctd-menu .wp-block-navigation-item__content,
	.ctd-menu .wp-block-button__link {
		display: flex;
		box-sizing: border-box;
		width: 100%;
		align-items: center;
		min-height: 52px;
		padding: 0 20px;
		font-size: var(--wp--preset--font-size--nav);
	}
	.ctd-menu .wp-block-navigation-item__content {
		border-bottom: 1px solid var(--wp--custom--rule--hairline);
	}
	.ctd-menu .wp-block-navigation-item__content[aria-current="page"] {
		border-bottom-color: var(--wp--custom--rule--hairline);
	}
	.ctd-menu .wp-block-buttons,
	.ctd-menu .wp-block-button {
		width: 100%;
	}
	.ctd-menu .wp-block-button__link {
		width: 100%;
		/* the header's own bottom hairline closes the panel, so the last row
		   carries none of its own, or the two stack into a heavier line */
		border: 0;
		background: transparent;
		color: var(--wp--preset--color--ink);
	}
}

/* §6, §12 (c) Doors: whole tile is the link; hover fills the column with ground. */
.ctd-door {
	position: relative;
	transition: background-color 0.15s ease;
	/* The cue sits at the foot of the tile so all three line up, whatever
	   depth the headings and descriptions run to. */
	display: flex;
	flex-direction: column;
}
.ctd-door__text {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
}
.ctd-door__cue {
	margin-top: auto;
}
.ctd-door:hover {
	background-color: var(--wp--preset--color--ground);
}
.ctd-door__title a {
	color: inherit;
	text-decoration: none;
}
.ctd-door__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}
.ctd-door__title a:focus-visible {
	outline: none;
}
.ctd-door:has(a:focus-visible) {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: -2px;
}
.ctd-door__media img {
	display: block;
	width: 100%;
}

/* Prose links: underline in the emphasis hairline, offset clear of descenders.
   text-decoration (not a border) skips descenders and wraps across lines. */
.entry-content p:not(.is-style-ctd-label) a:not(.wp-element-button) {
	text-decoration-color: var(--wp--custom--rule--emphasis);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.28em;
}
.entry-content p:not(.is-style-ctd-label) a:not(.wp-element-button):hover {
	text-decoration-color: var(--wp--preset--color--ink);
}

/* §6, §12 (g) Mono text links: 1px emphasis rule, 3px offset. */
.ctd-text-link a {
	color: inherit;
	text-decoration: none;
	padding-bottom: 3px;
	border-bottom: 1px solid var(--wp--custom--rule--emphasis);
}
.ctd-text-link a:hover {
	border-bottom-color: var(--wp--preset--color--ink);
}

@media (max-width: 781px) {
	/* §6 Doors stack: the column dividers become a rule between cards. */
	.ctd-door {
		border-right: 0 !important;
		border-bottom: 1px solid var(--wp--custom--rule--hairline);
	}
	.ctd-door:last-child {
		border-bottom: 0;
	}
}

/* The legal row's Privacy link takes the muted paper colour of the line it sits
   on: the sitewide ink link colour would be invisible on the dark footer.
   (Element styles set on a block inside a template part are not emitted.) */
.ctd-legal-link a {
	color: inherit;
}

/* Reserve the scrollbar gutter on every page. Without it a short page has no
   scrollbar and a long one does, so the centred column shifts by half the
   scrollbar width as you move between them. */
html {
	scrollbar-gutter: stable;
}

/* Page head: the band above the first rule, holding the eyebrow, H1 and lead.
   Held here so every page starts at the same height — it used to be written
   into each page, and one page drifted by 4px without anyone seeing it. A page
   that needs different depth below (the enquiry form) overrides the bottom. */
/* The bottom padding is smaller than the band padding it sometimes meets, so on
   scale models the hairline under the lead has more air below than above. Matching
   them was tried on 5 Oct and reverted: it loosened every other page, where the
   head runs into body content with no rule to balance against. */
.ctd-page-head {
	padding-top: clamp(40px, 5vw, 72px);
	padding-bottom: clamp(26px, 3vw, 40px);
}

/* A section: a hairline with equal air above and below it. One value sitewide,
   so pages keep the same rhythm whoever builds them. Scoped under
   .wp-site-blocks so a parent group's blockGap cannot zero the margin. */
.wp-site-blocks .ctd-section {
	border-top: 1px solid var(--wp--custom--rule--hairline);
	margin-top: clamp(32px, 4vw, 52px);
	padding-top: clamp(32px, 4vw, 52px);
}
.wp-site-blocks .ctd-section:first-child {
	border-top: 0;
	margin-top: 0;
	padding-top: 0;
}

/* Gallery images keep the same white box as a lead figure. They sit in a core
   Gallery block rather than a grid of Image blocks, because the lightbox only
   offers next and previous between images that share a gallery. */
.ctd-gallery .wp-block-image img {
	background-color: var(--wp--preset--color--white);
	border: 1px solid var(--wp--custom--rule--image);
}
/* Core lays gallery captions over the foot of each image, on a blurred scrim
   drawn by a ::before. Both are switched off here so captions sit beneath the
   image like every other caption on the site. The selector carries the same
   classes core uses, or it loses on specificity. */
.wp-block-gallery.has-nested-images.ctd-gallery figure.wp-block-image:has(figcaption)::before {
	content: none;
}
.wp-block-gallery.has-nested-images.ctd-gallery figure.wp-block-image figcaption {
	position: static;
	max-width: none;
	margin: 12px 0 0;
	padding: 0;
	background: none;
	color: var(--wp--preset--color--grey);
	font-size: var(--wp--preset--font-size--label);
	text-align: left;
	text-shadow: none;
	overflow: visible;
	text-overflow: clip;
	white-space: normal;
}

/* Spec grids: label-and-value pairs, so rows want more air between them than
   columns do. A block's axial blockGap is dropped by core here, hence the rule. */
.wp-site-blocks .ctd-specs {
	row-gap: clamp(30px, 3.6vw, 46px);
}

/* The white box around a figure hugs the image rather than spanning the band,
   so there is no white margin for a render's own background to clash with. */
.ctd-figure-box {
	width: fit-content;
	max-width: 100%;
	margin-inline: auto;
}

/* A band: one section of a page, full width, with a hairline on its top edge
   only — two bands meeting would otherwise stack their rules into 2px. The
   background stays paper unless a band has a reason to differ. */
.ctd-band {
	border-top: 1px solid var(--wp--custom--rule--hairline);
	padding-top: clamp(48px, 6vw, 84px);
	padding-bottom: clamp(48px, 6vw, 84px);
}

/* The band holding a page's main content, below the head. */
.ctd-page-body {
	padding-bottom: clamp(50px, 7vw, 90px);
}

/* The row of links to the other strands, at the foot of a page. Scoped under
   .wp-site-blocks so the margin survives a parent group's blockGap rule, which
   zeroes child margins at the same specificity but later in the cascade. */
.wp-site-blocks .ctd-strand-links {
	border-top: 1px solid var(--wp--custom--rule--hairline);
	margin-top: clamp(34px, 4vw, 54px);
	padding-top: 22px;
}

/* Page title spacing. This belongs in theme.json, but a group's blockGap emits
   `.wp-container-… > * { margin-block: 0 }` at the same specificity and later in
   the cascade, so an element style there is always overridden. Setting it here
   means any H1 is spaced correctly wherever it is inserted, with nothing in the
   page content. */
.wp-site-blocks h1.wp-block-heading {
	margin-block-start: 16px;
	margin-block-end: 22px;
}
.wp-site-blocks h1.wp-block-heading:first-child {
	margin-block-start: 0;
}

/* The Lead style carries the measure as well as the type: a block style cannot
   set max-width, so it lives here rather than in a wrapper group per page. */
.is-style-ctd-lead {
	max-width: var(--wp--custom--measure--lead);
}

/* Arrows come from Phosphor rather than the visitor's system font: the mono face
   carries ↑ but not →, ← or ↗, so those were falling back to whatever the OS
   supplied. Bold weight, to match the stroke of the mono capitals they follow.
   Drawn as a mask so they take the colour of the text. */
.ctd-cue > a::after,
.ctd-cue:not(:has(> a))::after,
.ctd-cue--left > a::before,
.ctd-cue--left:not(:has(> a))::before {
	content: "";
	display: inline-block;
	width: 0.95em;
	height: 0.95em;
	vertical-align: -0.1em;
	background-color: currentColor;
	-webkit-mask: var(--ctd-arrow) center / contain no-repeat;
	mask: var(--ctd-arrow) center / contain no-repeat;
}
.ctd-cue > a::after,
.ctd-cue:not(:has(> a))::after {
	margin-left: 0.3em;
}
.ctd-cue--left > a::before,
.ctd-cue--left:not(:has(> a))::before {
	margin-right: 0.3em;
}
.ctd-cue--left > a::after,
.ctd-cue--left:not(:has(> a))::after {
	content: none;
}
.ctd-cue--right {
	--ctd-arrow: var(--ctd-icon-arrow-right);
}
.ctd-cue--left {
	--ctd-arrow: var(--ctd-icon-arrow-left);
}
.ctd-cue--up {
	--ctd-arrow: var(--ctd-icon-arrow-up);
}
.ctd-cue--up-right {
	--ctd-arrow: var(--ctd-icon-arrow-up-right);
}

/* Back to top, placed as a block on long pages only (href="#top" is handled by
   the browser, so there is no anchor to keep in sync). Smooth scrolling is
   switched off for anyone who has asked for reduced motion. */
.ctd-to-top {
	position: fixed;
	right: clamp(16px, 3vw, 32px);
	bottom: clamp(16px, 3vw, 32px);
	z-index: 20;
	margin: 0;
}
.ctd-to-top a {
	display: block;
	/* line-height 1 so the box hugs the capitals: the label preset's 1.3 reserves
	   descender space that TOP ↑ never uses, which leaves the text sitting high. */
	line-height: 1;
	padding: 12px 14px;
	background-color: var(--wp--preset--color--paper);
	border: 1px solid var(--wp--custom--rule--emphasis);
	color: var(--wp--preset--color--ink);
	text-decoration: none;
}
.ctd-to-top a:hover {
	background-color: var(--wp--preset--color--ground);
	text-decoration: none;
}
/* Only once the script has taken charge does the link start hidden: without
   it the link stays put, rather than vanishing for everyone. */
.ctd-to-top.is-managed {
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.ctd-to-top.is-managed.is-resting {
	opacity: 0;
	visibility: hidden;
}
@media (prefers-reduced-motion: reduce) {
	.ctd-to-top.is-managed {
		transition: none;
	}
}
@media (prefers-reduced-motion: no-preference) {
	html {
		scroll-behavior: smooth;
	}
}

/* Footer links right-align under the lockup on desktop; stacked on a phone the
   lockup is above them, so they read from the left instead. */
@media (max-width: 781px) {
	.wp-block-navigation[aria-label="Footer"] {
		align-items: flex-start;
	}
}

/* §6, §13 Work rows: mockup fills its column; <picture> swaps the source. */
.ctd-mockup img {
	display: block;
	width: 100%;
	height: auto;
}

/* §6 Work rows: Did/Result terms hold their width so the values align, and sit
   on the same baseline as the value beside them (11px label against 14px text). */
.ctd-work-row__notes > .wp-block-group {
	align-items: baseline;
}
.ctd-work-row__notes .is-style-ctd-label {
	flex-shrink: 0;
}

@media (max-width: 781px) {
	/* §6, §12 (e) Work rows stack, mockup first, phone mockup at 240px.
	   These columns carry is-not-stacked-on-mobile, which core answers with
	   flex-wrap: nowrap !important - so the stacking is ours to do, and the
	   !importants below are what beat core's. Tried removing them on 6 Oct;
	   the rows stayed side by side at every width. */
	.ctd-work-row .wp-block-columns,
	.ctd-contact .wp-block-columns {
		flex-direction: column;
		align-items: stretch !important;
	}
	.ctd-work-row .wp-block-column,
	.ctd-contact .wp-block-column {
		flex-basis: auto !important;
	}
	.ctd-mockup img {
		max-width: 240px;
		margin-inline: auto;
	}
}

@media (max-width: 781px) {
	/* §6 Mechanical rules: process steps and spec pairs collapse to one column. */
	.ctd-process__steps,
	.ctd-specs {
		grid-template-columns: minmax(0, 1fr) !important; /* the grid layout's generated column count */
	}
}

/* §6, §12 (f) Contact form (Fluent Forms): mono labels, every field boxed
   (Chris's change from bottom-rule text inputs), solid ink submit. Inputs stay at 17px so iOS
   Safari doesn't zoom on focus. Errors in ink: monochrome is absolute (§2). */
.ctd-contact .fluentform .ff-el-group {
	margin-bottom: 18px;
}
.ctd-contact .fluentform .ff-el-input--label {
	display: block;
	margin-bottom: 8px;
	/* Label-sized line box: at body size the 11px label sat low, out of line with "04 / Contact". */
	font-size: var(--wp--preset--font-size--label);
	line-height: 1.3;
}
.ctd-contact .fluentform.ff-default .ff-el-input--label label {
	font-family: var(--wp--preset--font-family--azeret-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
}
.ctd-contact .fluentform .ff-el-is-required.asterisk-right label::after {
	content: none;
}
.ctd-contact .fluentform .ff-el-form-control {
	font-family: inherit;
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.5;
	color: var(--wp--preset--color--ink);
	background-color: transparent;
	border: 1px solid var(--wp--custom--rule--control);
	border-radius: 0;
	box-shadow: none;
	padding: 12px;
}
.ctd-contact .fluentform select.ff-el-form-control {
	height: auto;
	/* Browsers draw the native caret hard against the border, so it's replaced
	   with Phosphor "caret-down" (MIT), inset from the edge like the text. */
	appearance: none;
	-webkit-appearance: none;
	padding-right: 40px;
	background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20256%20256%22%20fill%3D%22%25231C1917%22%3E%3Cpath%20d%3D%22M213.66%2C101.66l-80%2C80a8%2C8%2C0%2C0%2C1-11.32%2C0l-80-80A8%2C8%2C0%2C0%2C1%2C53.66%2C90.34L128%2C164.69l74.34-74.35a8%2C8%2C0%2C0%2C1%2C11.32%2C11.32Z%22%2F%3E%3C%2Fsvg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 14px;
}
.ctd-contact .fluentform .ff-el-form-control:focus {
	border-color: var(--wp--preset--color--ink);
	box-shadow: none;
	outline: none;
}
.ctd-contact .fluentform .ff-el-form-control:focus-visible {
	outline: 2px solid var(--wp--preset--color--ink);
	outline-offset: 2px;
}
.ctd-contact .fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--wp--preset--color--ink);
}
.ctd-contact .fluentform .error,
.ctd-contact .fluentform .text-danger {
	margin-top: 6px;
	font-size: var(--wp--preset--font-size--fine);
	color: var(--wp--preset--color--ink);
}
.ctd-contact .fluentform .ff-btn-submit,
.ctd-contact .fluentform .ff-btn-submit:not(.ff_btn_no_style) {
	font-family: var(--wp--preset--font-family--azeret-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1;
	text-transform: uppercase;
	color: var(--wp--preset--color--paper);
	background-color: var(--wp--preset--color--ink);
	border: 0;
	border-radius: 0;
	box-shadow: none;
	padding: 15px 26px;
	opacity: 1;
}
.ctd-contact .fluentform .ff-btn-submit:hover {
	background-color: var(--wp--preset--color--ink-soft);
}
.ctd-contact .ff-message-success {
	margin-top: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
	font-size: var(--wp--preset--font-size--lead);
	font-weight: 300;
	color: var(--wp--preset--color--ink);
}
.ctd-contact .ff-message-success p {
	margin: 0;
}
/* The "Enquiry sent" line takes the field-label position and style. */
.ctd-contact .ff-message-success .ctd-sent-label {
	margin-bottom: 8px;
	font-family: var(--wp--preset--font-family--azeret-mono);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 400;
	letter-spacing: var(--wp--custom--tracking--label);
	line-height: 1.3;
	text-transform: uppercase;
	color: var(--wp--preset--color--grey);
}

/* FancyBox captions, matched to the page's own. The plugin paints the caption
   from a JavaScript callback with inline styles, so colour, background and
   alignment need !important to be overridden at all; the rest is plain theming.
   Font family is inherited from the body, which is what the gallery captions
   below the thumbnails use too. */
.fancybox-custom-caption {
	padding: 14px 18px;
	/* bottom is set inline by the plugin's afterLoad callback, so moving the
	   caption clear of the image edge has to be forced. */
	bottom: 14px !important;
	color: var(--wp--preset--color--ink) !important;
	background-color: transparent !important;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	line-height: 1.4;
	text-align: left !important;
	/* A white halo rather than a white bar, so the caption sits on the image
	   without covering a strip of it. Built from stacked shadows rather than
	   -webkit-text-stroke with paint-order: the stroke version is crisper but
	   silently thickens the glyphs where paint-order is unsupported. */
	text-shadow:
		 1px  1px 0 #fff,
		-1px  1px 0 #fff,
		 1px -1px 0 #fff,
		-1px -1px 0 #fff,
		 0    0   3px #fff,
		 0    0   6px rgba(255, 255, 255, 0.8);
}
.fancybox-custom-caption .caption-title {
	margin: 0;
}

/* The plugin paints .fancybox-content in its "padding colour", and that box does
   not always match the image exactly - hence white bars above and below. These
   images carry their own white, so the box itself needs no background. */
.fancybox-container div.fancybox-content,
.fancybox-container .fancybox-slide--image .fancybox-content {
	background-color: transparent !important;
}

/* Lightbox controls. FancyBox ships grey-on-dark SVG icons; the three worth
   keeping are masked with the theme's own Phosphor glyphs, so the arrows in the
   lightbox are the ones the cue links use. Zoom, slideshow and the thumbnail
   strip are hidden: for a handful of images they are buttons without a job.
   The hiding is scoped through .fancybox-container to beat the plugin's own
   .fancybox-toolbar rules, and only the three styled buttons get a ::after -
   an unmasked one would paint a solid square of currentColor. */
.fancybox-container .fancybox-button--zoom,
.fancybox-container .fancybox-button--play,
.fancybox-container .fancybox-button--pause,
.fancybox-container .fancybox-button--thumbs,
.fancybox-container .fancybox-button--share,
.fancybox-container .fancybox-button--download,
.fancybox-container .fancybox-button--fsenter,
.fancybox-container .fancybox-button--fsexit {
	display: none;
}
.fancybox-container .fancybox-button {
	background: transparent;
	color: rgba(250, 250, 249, 0.72);
	transition: color 0.15s ease;
}
.fancybox-container .fancybox-button:hover,
.fancybox-container .fancybox-button:focus-visible {
	color: var(--wp--preset--color--paper);
}
.fancybox-button--arrow_left svg,
.fancybox-button--arrow_right svg,
.fancybox-button--close svg {
	display: none;
}
.fancybox-button--arrow_left::after,
.fancybox-button--arrow_right::after,
.fancybox-button--close::after {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	margin: 0 auto;
	background-color: currentColor;
	/* Paper on ink reads over the overlay, but vanishes the moment an image
	   fills the width - these renders are white at the edges. The shadow gives
	   the glyph an edge on light ground without darkening it on the overlay. */
	filter: drop-shadow(0 1px 2px rgba(28, 25, 23, 0.55)) drop-shadow(0 0 1px rgba(28, 25, 23, 0.45));
	-webkit-mask: var(--ctd-icon) center / contain no-repeat;
	mask: var(--ctd-icon) center / contain no-repeat;
}
.fancybox-button--arrow_left {
	--ctd-icon: var(--ctd-icon-arrow-left);
}
.fancybox-button--arrow_right {
	--ctd-icon: var(--ctd-icon-arrow-right);
}
.fancybox-button--close {
	--ctd-icon: var(--ctd-icon-x);
}

/* The 1 / 5 counter is metadata, so it takes the mono face like every other
   counter and label on the site. */
.fancybox-container .fancybox-infobar {
	font-family: var(--wp--preset--font-family--azeret-mono);
	font-size: var(--wp--preset--font-size--label);
	letter-spacing: var(--wp--custom--tracking--label);
	color: var(--wp--preset--color--paper);
	opacity: 1;
	text-shadow: none;
}

/* Lists keep the body's rhythm. Twenty Twenty-Five spaces list items 0.5rem apart,
   which sets four short phrases further apart than the lines of the sentence that
   introduces them. The bullets already mark where each item starts. */
.wp-site-blocks .wp-block-list li + li {
	margin-top: 0;
}