/* ==========================================================================
   workfromanywhere.co — service page system
   Drop at: /wp-content/themes/<child>/assets/css/wfa-service.css

   Colours come from the site palette in wfa-brand.css (--wfa-text,
   --wfa-accent, --wfa-bg and so on), through private --svc-* tokens, so
   a service page looks like the rest of the site and follows its dark
   mode. Corners are square throughout.

   Everything is scoped under .wfa. Block names are prefixed wfa-svc-
   wherever the unscoped site stylesheet already used the plain name
   (hero, section, table, review, faq, proscons, empty), so neither file
   can style the other's markup.
   ========================================================================== */

.wfa {
	/* Private tokens, derived from the site palette in wfa-brand.css so
	   service pages look like the rest of the site and follow its dark
	   mode automatically. The fallbacks are the site's own values.

	   These used to be named --wfa-* and read GeneratePress's globals,
	   whose accent on this install is GP's default blue (#1e73be) and
	   whose paper is plain white. Same names as the site tokens, so they
	   also repointed the site palette inside .wfa. Renamed to --svc-* so
	   they can never collide again. */

	/* Ink */
	--svc-ink:      var(--wfa-text,  #14171a);
	--svc-ink-2:    var(--wfa-muted, #5f6a70);
	--svc-ink-3:    var(--wfa-muted, #5f6a70);

	/* Paper */
	--svc-paper:    var(--wfa-bg,      #faf7f2);
	--svc-paper-2:  var(--wfa-surface, #f2ede4);
	--svc-line:     var(--wfa-line,    #e2dcd2);

	/* Accent: the only saturated colour on the page. */
	--svc-accent:     var(--wfa-accent, #0f5548);
	--svc-accent-ink: #ffffff;

	/* Shape: square, matching the header, search bar and dropdowns. */
	--svc-radius:   0;
	--svc-radius-s: 0;

	/* Rhythm */
	--svc-gap:      1.25rem;
	--svc-section:  4.5rem;
	--svc-measure:  var(--wfa-measure, 68ch);

	/* Distance from the top of the viewport for the sticky rail. The
	   header is not sticky, so this only needs a little breathing room. */
	--svc-sticky-top: 1.5rem;

	color: var(--svc-ink);
}

/* Space for the docked search bar is reserved site-wide by
   body.wfa-dock-open in wfa-chrome.css, so none is added here. Adding it
   again doubled the gap at the foot of the page on phones. */

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


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

.wfa-svc-hero {
	max-width: var(--svc-measure);
	margin: 0 0 3rem;
}

.wfa-svc-hero__kicker {
	margin: 0 0 0.75rem;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-svc-hero__kicker a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-svc-hero__kicker a:hover {
	color: var(--svc-accent);
	border-bottom-color: currentColor;
}

.wfa-svc-hero__title {
	margin: 0 0 1rem;
	font-size: clamp(2rem, 1.35rem + 2.6vw, 3.1rem);
	line-height: 1.08;
	letter-spacing: -0.022em;
	font-weight: 700;
}

.wfa-svc-hero__standfirst {
	margin: 0 0 1.5rem;
	font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
	line-height: 1.55;
	color: var(--svc-ink-2);
}

/* Last checked. The trust line for the whole category, in the same
   small tracked capitals the site uses for labels. */
.wfa-svc-hero__updated {
	margin: -0.75rem 0 1.25rem;
	font-size: .72rem;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

/* The page's own long-form copy, placed after the reviews when the editor
   content is split with a More block. */
.wfa .wfa-svc-section--guide .wfa-prose {
	max-width: var(--svc-measure);
}

/* The disclosure. Quiet, but never hidden. */
.wfa-disclosure {
	margin: 0;
	padding: 0.75rem 0 0;
	border-top: 1px solid var(--svc-line);
	font-size: 0.8125rem;
	line-height: 1.5;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */

.wfa-svc-section {
	margin: 0 0 var(--svc-section);
}

.wfa-svc-section__title {
	margin: 0 0 1.5rem;
	font-size: clamp(1.3rem, 1.1rem + 0.7vw, 1.65rem);
	line-height: 1.2;
	letter-spacing: -0.014em;
	font-weight: 650;
}

.wfa-prose {
	max-width: var(--svc-measure);
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--svc-ink-2);
}

.wfa-prose > *:first-child { margin-top: 0; }
.wfa-prose > *:last-child  { margin-bottom: 0; }

.wfa-prose--intro {
	margin-bottom: 3rem;
}

.wfa-svc-empty {
	padding: 2.5rem;
	border: 1px dashed var(--svc-line);
	border-radius: var(--svc-radius);
	text-align: center;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   The CTA — one component, seven placements, always identical
   -------------------------------------------------------------------------- */

.wfa-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.875rem 1.5rem;
	border: 1px solid transparent;
	border-radius: var(--svc-radius-s);
	background: var(--svc-accent);
	color: var(--svc-accent-ink);
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
	transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease;
}

/* Flat, like every other button on the site: no lift, no shadow. The hover
   swaps accent for ink, the mirror of the jobs search button, which swaps
   ink for accent. */
.wfa-cta:hover,
.wfa-cta:focus-visible {
	background: var(--svc-ink);
	color: var(--svc-accent-ink);
}

@media (prefers-reduced-motion: reduce) {
	.wfa-cta {
		transition: none;
	}
}

.wfa-cta:focus-visible {
	outline: 2px solid var(--svc-accent);
	outline-offset: 2px;
}

.wfa-cta__icon {
	flex: 0 0 auto;
	opacity: 0.75;
}

/* Secondary — alternatives, so the top pick stays dominant. */
.wfa-cta--secondary {
	background: transparent;
	border-color: var(--svc-line);
	color: var(--svc-ink);
}

.wfa-cta--secondary:hover,
.wfa-cta--secondary:focus-visible {
	background: transparent;
	border-color: var(--svc-accent);
	color: var(--svc-accent);
}

/* Compact — table rows. */
.wfa-cta--compact {
	padding: 0.5rem 0.9rem;
	font-size: 0.8125rem;
}

/* Kill switch off. */
.wfa-cta--off {
	background: var(--svc-paper-2);
	color: var(--svc-ink-3);
	border-color: var(--svc-line);
	cursor: not-allowed;
	font-weight: 500;
}

/* A disabled button must not react like a live one. */
.wfa-cta--off:hover,
.wfa-cta--off:focus-visible {
	background: var(--svc-paper-2);
	color: var(--svc-ink-3);
	border-color: var(--svc-line);
}


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

.wfa-card {
	display: flex;
	flex-direction: column;
	padding: 1.75rem;
	background: var(--svc-paper);
	border: 1px solid var(--svc-line);
	border-radius: var(--svc-radius);
}

.wfa-card__eyebrow {
	margin: 0 0 0.875rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--svc-accent);
}

.wfa-card__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: 0.5rem 1rem;
	margin-bottom: 0.75rem;
}

.wfa-card__title {
	margin: 0;
	font-size: 1.375rem;
	line-height: 1.2;
	letter-spacing: -0.012em;
	font-weight: 650;
}

.wfa-card__title a {
	color: inherit;
	text-decoration: none;
}

.wfa-card__title a:hover {
	color: var(--svc-accent);
}

.wfa-card__price {
	margin: 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--svc-ink-2);
	white-space: nowrap;
}

.wfa-card__verdict {
	margin: 0 0 1.25rem;
	font-size: 1rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}

.wfa-card__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
	margin-top: auto;
	padding-top: 1.5rem;
}

.wfa-card__more {
	font-size: 0.875rem;
	font-weight: 500;
	color: var(--svc-ink-2);
	text-decoration: none;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-card__more:hover {
	color: var(--svc-accent);
	border-bottom-color: currentColor;
}

.wfa-card__verified {
	margin: 1rem 0 0;
	font-size: 0.75rem;
	color: var(--svc-ink-3);
}

/* The stated downside — structural, not decorative. */
.wfa-card__downside {
	margin: 1.25rem 0 0;
	padding: 1rem 1.125rem;
	background: var(--svc-paper-2);
	border-radius: var(--svc-radius-s);
}

.wfa-card__downside-label {
	margin: 0 0 0.5rem;
	font-size: 0.6875rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-card__downside .wfa-list {
	margin: 0;
}

/* Top pick — the only card that gets weight. */
.wfa-card--pick {
	padding: clamp(1.75rem, 1.2rem + 2vw, 2.75rem);
	border-color: var(--svc-ink);
	border-width: 1px;
	box-shadow: 0 1px 0 var(--svc-ink);
}

.wfa-card--pick .wfa-card__title {
	font-size: clamp(1.5rem, 1.25rem + 1.1vw, 2rem);
}

.wfa-card--pick .wfa-card__verdict {
	font-size: 1.0625rem;
	max-width: 52ch;
}

.wfa-card--pick .wfa-cta {
	padding: 1rem 1.9rem;
	font-size: 1rem;
}

/* Side rail mini-card. */
.wfa-card--side {
	padding: 1.25rem;
}

.wfa-card--side .wfa-card__title {
	font-size: 1.125rem;
}

.wfa-card--side .wfa-card__foot {
	padding-top: 1.125rem;
}

.wfa-card--side .wfa-cta {
	width: 100%;
}


/* --------------------------------------------------------------------------
   Pros and cons
   -------------------------------------------------------------------------- */

.wfa-list {
	margin: 0 0 0;
	padding: 0;
	list-style: none;
}

.wfa-list li {
	position: relative;
	padding-left: 1.5rem;
	margin-bottom: 0.5rem;
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--svc-ink-2);
}

.wfa-list li:last-child {
	margin-bottom: 0;
}

.wfa-list li::before {
	position: absolute;
	left: 0;
	top: 0;
	font-size: 0.875rem;
	line-height: 1.6;
	font-weight: 700;
}

.wfa-list--pro li::before {
	content: "\2713";
	color: var(--svc-accent);
}

.wfa-list--con li::before {
	content: "\00D7";
	color: var(--svc-ink-3);
	font-size: 1rem;
}

.wfa-svc-proscons {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--svc-gap);
	margin: 2rem 0;
	padding: 1.75rem;
	background: var(--svc-paper-2);
	border-radius: var(--svc-radius);
}

@media (min-width: 640px) {
	.wfa-svc-proscons {
		grid-template-columns: 1fr 1fr;
		gap: 2.5rem;
	}
}

.wfa-svc-proscons__label {
	margin: 0 0 0.875rem;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
}

.wfa-svc-proscons__empty {
	margin: 0;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   Grid
   -------------------------------------------------------------------------- */

.wfa-grid {
	display: grid;
	gap: var(--svc-gap);
	grid-template-columns: 1fr;
}

@media (min-width: 720px) {
	.wfa-grid--2 {
		grid-template-columns: 1fr 1fr;
	}
}


/* --------------------------------------------------------------------------
   Comparison table
   Reflows into cards below 760px — no horizontal scrolling.
   -------------------------------------------------------------------------- */

.wfa-svc-table-wrap {
	border: 1px solid var(--svc-line);
	border-radius: var(--svc-radius);
	overflow: hidden;
}

.wfa-svc-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
	background: var(--svc-paper);
}

.wfa-svc-table__caption {
	padding: 1rem 1.25rem;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
	border-bottom: 1px solid var(--svc-line);
}

.wfa-svc-table thead th {
	padding: 0.875rem 1.25rem;
	text-align: left;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--svc-ink-3);
	background: var(--svc-paper-2);
	border-bottom: 1px solid var(--svc-line);
	white-space: nowrap;
}

.wfa-svc-table tbody tr + tr th,
.wfa-svc-table tbody tr + tr td {
	border-top: 1px solid var(--svc-line);
}

.wfa-svc-table tbody th,
.wfa-svc-table tbody td {
	padding: 1.125rem 1.25rem;
	text-align: left;
	vertical-align: top;
	line-height: 1.5;
	color: var(--svc-ink-2);
}

.wfa-svc-table tbody th {
	font-weight: 650;
	color: var(--svc-ink);
	white-space: nowrap;
}

.wfa-svc-table tbody th a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-svc-table tbody th a:hover {
	color: var(--svc-accent);
	border-bottom-color: currentColor;
}

.wfa-svc-table__watch {
	color: var(--svc-ink-3);
}

.wfa-svc-table__action {
	text-align: right;
	white-space: nowrap;
}

@media (max-width: 759px) {
	.wfa-svc-table-wrap {
		border: 0;
		border-radius: 0;
		overflow: visible;
	}

	.wfa-svc-table,
	.wfa-svc-table tbody,
	.wfa-svc-table tbody tr,
	.wfa-svc-table tbody th,
	.wfa-svc-table tbody td {
		display: block;
		width: 100%;
	}

	.wfa-svc-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	.wfa-svc-table__caption {
		padding: 0 0 1rem;
		border-bottom: 0;
	}

	.wfa-svc-table tbody tr {
		margin-bottom: var(--svc-gap);
		border: 1px solid var(--svc-line);
		border-radius: var(--svc-radius);
		overflow: hidden;
	}

	.wfa-svc-table tbody tr + tr th,
	.wfa-svc-table tbody tr + tr td {
		border-top: 0;
	}

	.wfa-svc-table tbody th {
		padding: 1rem 1.125rem;
		font-size: 1.0625rem;
		background: var(--svc-paper-2);
		border-bottom: 1px solid var(--svc-line);
		white-space: normal;
	}

	.wfa-svc-table tbody td {
		padding: 0.875rem 1.125rem;
	}

	.wfa-svc-table tbody td[data-label]::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.25rem;
		font-size: 0.6875rem;
		font-weight: 700;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--svc-ink-3);
	}

	.wfa-svc-table__action {
		text-align: left;
		padding-bottom: 1.125rem;
	}

	.wfa-svc-table__action .wfa-cta {
		width: 100%;
		padding: 0.75rem 1rem;
		font-size: 0.9375rem;
	}
}


/* --------------------------------------------------------------------------
   Reviews + sticky rail
   The rail is the persistent funnel on desktop. There is deliberately no
   bottom-docked CTA — that space belongs to the jobs search bar.
   -------------------------------------------------------------------------- */

.wfa-split {
	display: grid;
	grid-template-columns: 1fr;
	gap: 2.5rem;
}

.wfa-split__rail {
	display: none;
}

@media (min-width: 1100px) {
	.wfa-split {
		grid-template-columns: minmax(0, 1fr) 300px;
		gap: 3.5rem;
	}

	.wfa-split__rail {
		display: block;
	}

	.wfa-rail {
		position: sticky;
		top: var(--svc-sticky-top);
	}
}

.wfa-svc-review {
	padding-bottom: 3rem;
	margin-bottom: 3rem;
	border-bottom: 1px solid var(--svc-line);
}

.wfa-svc-review:last-child {
	padding-bottom: 0;
	margin-bottom: 0;
	border-bottom: 0;
}

.wfa-svc-review__head {
	display: flex;
	align-items: flex-start;
	gap: 1rem;
	margin-bottom: 1rem;
}

.wfa-svc-review__rank {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2rem;
	height: 2rem;
	border: 1px solid var(--svc-line);
	border-radius: var(--svc-radius);
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--svc-ink-3);
}

.wfa-svc-review__headings {
	flex: 1 1 auto;
}

.wfa-svc-review__title {
	margin: 0;
	font-size: 1.5rem;
	line-height: 1.25;
	letter-spacing: -0.014em;
	font-weight: 650;
}

.wfa-svc-review__price {
	margin: 0.25rem 0 0;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--svc-ink-3);
}

.wfa-svc-review__verdict {
	margin: 0 0 1.25rem;
	max-width: var(--svc-measure);
	font-size: 1.0625rem;
	line-height: 1.65;
	color: var(--svc-ink-2);
}

.wfa-svc-review__body {
	max-width: var(--svc-measure);
	font-size: 1rem;
	line-height: 1.7;
	color: var(--svc-ink-2);
}

.wfa-svc-review__body > *:last-child {
	margin-bottom: 0;
}

.wfa-svc-review__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.25rem;
}

.wfa-svc-review__verified {
	margin: 0;
	font-size: 0.75rem;
	color: var(--svc-ink-3);
}


/* --------------------------------------------------------------------------
   Panels (single product page)
   -------------------------------------------------------------------------- */

.wfa-panel {
	padding: 1.75rem;
	background: var(--svc-paper-2);
	border-radius: var(--svc-radius);
}

.wfa-panel--top,
.wfa-panel--bottom {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.75rem 1.5rem;
	margin: 0 0 2.5rem;
}

.wfa-panel--bottom {
	margin: 2.5rem 0;
}

.wfa-panel__price {
	margin: 0;
	font-size: 1.125rem;
	font-weight: 650;
	color: var(--svc-ink);
}

.wfa-panel__line {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 600;
}

.wfa-panel__verified {
	margin: 0;
	flex-basis: 100%;
	font-size: 0.75rem;
	color: var(--svc-ink-3);
}

.wfa-panel.wfa-prose {
	max-width: none;
}


/* --------------------------------------------------------------------------
   FAQ — native details, works with JavaScript off
   -------------------------------------------------------------------------- */

.wfa-svc-faq {
	max-width: var(--svc-measure);
	border-top: 1px solid var(--svc-line);
}

.wfa-svc-faq__item {
	border-bottom: 1px solid var(--svc-line);
}

.wfa-svc-faq__q {
	position: relative;
	padding: 1.25rem 2.5rem 1.25rem 0;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}

.wfa-svc-faq__q::-webkit-details-marker {
	display: none;
}

.wfa-svc-faq__q::after {
	content: "";
	position: absolute;
	right: 0.5rem;
	top: 1.6rem;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--svc-ink-3);
	border-bottom: 2px solid var(--svc-ink-3);
	transform: rotate(45deg);
	transition: transform 0.2s ease;
}

.wfa-svc-faq__item[open] .wfa-svc-faq__q::after {
	transform: rotate(-135deg);
	top: 1.9rem;
}

.wfa-svc-faq__q:hover {
	color: var(--svc-accent);
}

.wfa-svc-faq__q:focus-visible {
	outline: 2px solid var(--svc-accent);
	outline-offset: 2px;
}

.wfa-svc-faq__a {
	padding: 0 2.5rem 1.5rem 0;
	font-size: 1rem;
	line-height: 1.7;
	color: var(--svc-ink-2);
}

.wfa-svc-faq__a p {
	margin: 0;
}


/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */

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


/* ==========================================================================
   v1.3 EDITORIAL LAYOUT
   After Outsite's team retreats page: a wide image, a centred title, two
   column blocks with a lead line on the left and icon facts on the right,
   generous space between everything and thin rules instead of boxes.
   Square corners throughout, matching the header and search bar.
   ========================================================================== */

.wfa-svc {
	--svc-display: var(--wfa-display, "Fraunces", Georgia, "Times New Roman", serif);
	--svc-ui:      var(--wfa-ui, "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif);
	--svc-soft:    var(--wfa-accent-soft, #e3eeea);
	--svc-block:   clamp(3.5rem, 7vw, 6rem);
	--svc-col-gap: clamp(2.5rem, 5vw, 4.5rem);

	padding-bottom: 0;
	font-family: var(--svc-ui);
}

/* The page template has no GeneratePress inner wrapper, so nothing pads
   the sides. These match .inside-header (40px, 30px on phones), so the
   page lines up with the logo at every width. */
.wfa-svc {
	padding-left: 40px;
	padding-right: 40px;
}

@media (max-width: 768px) {
	.wfa-svc {
		padding-left: 30px;
		padding-right: 30px;
	}
}

.wfa-svc-top__title,
.wfa-svc-head__title,
.wfa-svc-lead,
.wfa-svc-row__title,
.wfa-svc-soon__title,
.wfa-svc-band__title {
	text-wrap: balance;
}

.wfa-svc .wfa-ico {
	flex: 0 0 auto;
	width: 1.25rem;
	height: 1.25rem;
}

/* ---------- shared type ---------- */

.wfa-svc-eyebrow {
	margin: 0 0 1rem;
	font-family: var(--svc-ui);
	font-size: 0.75rem;
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--svc-ink-2);
}

.wfa-svc-lead {
	margin: 0 0 1.5rem;
	font-family: var(--svc-display);
	font-size: clamp(1.625rem, 2.8vw, 2.125rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--svc-ink);
}

.wfa-svc-head {
	max-width: 48rem;
	margin: 0 0 clamp(2rem, 4vw, 3.25rem);
}

.wfa-svc-head__title {
	margin: 0;
	font-family: var(--svc-display);
	font-size: clamp(2rem, 3.8vw, 2.875rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.015em;
	color: var(--svc-ink);
}

.wfa-svc-block {
	padding: var(--svc-block) 0;
	border-top: 1px solid var(--svc-line);
}

/* ---------- buttons ---------- */

.wfa-svc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3.25rem;
	padding: 0.9rem 1.75rem;
	border: 1px solid var(--svc-ink);
	background: var(--svc-ink);
	color: var(--svc-paper);
	font-family: var(--svc-ui);
	font-size: 0.8125rem;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Solid turns light on hover, ghost turns solid: each is the reverse of
   the other. Written as .wfa-svc a.wfa-svc-btn so it outranks the link
   colour in .wfa-svc-rich and the site's underline on a:hover. */
.wfa-svc a.wfa-svc-btn,
.wfa-svc a.wfa-svc-btn:hover,
.wfa-svc a.wfa-svc-btn:focus,
.wfa-svc a.wfa-svc-btn:visited,
.wfa-svc .wfa-svc-btn {
	text-decoration: none;
}

.wfa-svc a.wfa-svc-btn,
.wfa-svc a.wfa-svc-btn:visited {
	border-color: var(--svc-ink);
	background: var(--svc-ink);
	color: var(--svc-paper);
}

.wfa-svc a.wfa-svc-btn:hover,
.wfa-svc a.wfa-svc-btn:focus-visible {
	border-color: var(--svc-ink);
	background: var(--svc-paper);
	color: var(--svc-ink);
}

.wfa-svc a.wfa-svc-btn--ghost,
.wfa-svc a.wfa-svc-btn--ghost:visited {
	background: transparent;
	color: var(--svc-ink);
}

.wfa-svc a.wfa-svc-btn--ghost:hover,
.wfa-svc a.wfa-svc-btn--ghost:focus-visible {
	background: var(--svc-ink);
	color: var(--svc-paper);
}

/* Arrow lines in the editor copy, shown as buttons (see
   wfa_svc_arrow_buttons). Several in a row sit side by side. */
.wfa-svc-rich p.wfa-svc-linkbtn {
	display: inline-block;
	margin: 0.25rem 0.5rem 0.75rem 0;
}

.wfa-svc-rich p.wfa-svc-linkbtn + p:not(.wfa-svc-linkbtn),
.wfa-svc-rich p.wfa-svc-linkbtn + ul,
.wfa-svc-rich p.wfa-svc-linkbtn + h3 {
	margin-top: 1rem;
}

/* No URL yet: looks the same, does not pretend to click. */
.wfa-svc .wfa-svc-btn--pending {
	cursor: default;
}

.wfa-svc-btn:focus-visible,
.wfa-svc-textlink:focus-visible,
.wfa-svc-tile:focus-visible,
.wfa-svc-jump a:focus-visible {
	outline: 2px solid var(--svc-accent);
	outline-offset: 3px;
}

.wfa-svc-textlink {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding-bottom: 0.25rem;
	border-bottom: 1px solid currentColor;
	color: var(--svc-ink);
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
}

.wfa-svc-textlink .wfa-ico {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.wfa-svc-textlink:hover {
	color: var(--svc-accent);
}

.wfa-svc-textlink:hover .wfa-ico {
	transform: translateX(3px);
}

/* ---------- 1. hero ---------- */

.wfa-svc-top {
	margin: 0 0 var(--svc-block);
	text-align: center;
}

.wfa-svc-top__media {
	margin: 0 0 clamp(2.25rem, 5vw, 4rem);
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: var(--svc-paper-2);
}

.wfa-svc-top__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

@media (min-width: 700px) {
	.wfa-svc-top__media {
		aspect-ratio: 16 / 7;
	}
}

.wfa-svc-top__text {
	max-width: 46rem;
	margin: 0 auto;
}

.wfa-svc-top__title {
	margin: 0;
	font-family: var(--svc-display);
	font-size: clamp(2.75rem, 6vw, 4.25rem);
	font-weight: 400;
	line-height: 1.02;
	letter-spacing: -0.025em;
	color: var(--svc-ink);
}

.wfa-svc-top__standfirst {
	max-width: 36rem;
	margin: 1.25rem auto 2.25rem;
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}

.wfa-svc-top__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.75rem;
}

.wfa-svc-top__disclosure {
	max-width: 34rem;
	margin: 1.75rem auto 0;
	font-size: 0.8125rem;
	line-height: 1.55;
	color: var(--svc-ink-2);
}

/* ---------- two columns (overview and each provider) ---------- */

.wfa-svc-cols,
.wfa-svc-feature__cols {
	display: grid;
	gap: var(--svc-col-gap);
}

@media (min-width: 900px) {
	.wfa-svc-cols,
	.wfa-svc-feature__cols {
		grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
		gap: 0;
	}

	.wfa-svc-cols__main,
	.wfa-svc-feature__main {
		padding-right: var(--svc-col-gap);
		border-right: 1px solid var(--svc-line);
	}

	.wfa-svc-cols__side,
	.wfa-svc-feature__side {
		padding-left: var(--svc-col-gap);
	}
}

/* ---------- rich text ---------- */

.wfa-svc-rich {
	max-width: 62ch;
	font-size: 1.0625rem;
	line-height: 1.7;
	color: var(--svc-ink);
}

.wfa-svc-rich > *:first-child { margin-top: 0; }
.wfa-svc-rich > *:last-child  { margin-bottom: 0; }

.wfa-svc-rich p {
	margin: 0 0 1.1em;
}

.wfa-svc-rich h3,
.wfa-svc-rich h4 {
	margin: 1.75em 0 0.6em;
	font-family: var(--svc-display);
	font-size: 1.25rem;
	font-weight: 500;
	line-height: 1.3;
}

.wfa-svc-rich a {
	color: var(--svc-accent);
	text-underline-offset: 0.2em;
}

/* Lists become icon lists, like Outsite's amenities. Four or more items
   go into two columns on wider screens. */
.wfa-svc-rich ul {
	display: grid;
	gap: 0.7rem 2rem;
	margin: 1.25em 0 1.75em;
	padding: 0;
	list-style: none;
}

@media (min-width: 640px) {
	.wfa-svc-rich ul:has(> li:nth-child(4)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.wfa-svc-rich ul > li {
	position: relative;
	margin: 0;
	padding-left: 2rem;
	line-height: 1.45;
}

.wfa-svc-rich ul > li::before {
	content: "";
	position: absolute;
	top: 0.05em;
	left: 0;
	width: 1.25rem;
	height: 1.25rem;
	background-color: var(--svc-accent);
	-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='1.6' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%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='1.6' stroke-linecap='square'%3E%3Cpath d='M5 12.5l4.2 4.2L19 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.wfa-svc-rich ol {
	margin: 1.25em 0 1.75em;
	padding-left: 1.25em;
}

.wfa-svc-rich ol > li {
	margin-bottom: 0.5em;
	padding-left: 0.25em;
}

/* ---------- facts with icons ---------- */

.wfa-svc-facts {
	display: grid;
	gap: 1.4rem;
	margin: 0 0 2.25rem;
	padding: 0;
	list-style: none;
}

.wfa-svc-facts li {
	display: grid;
	grid-template-columns: 1.25rem minmax(0, 1fr);
	column-gap: 0.85rem;
	row-gap: 0.15rem;
	margin: 0;
}

.wfa-svc-facts .wfa-ico {
	grid-row: span 2;
	margin-top: 0.05rem;
	color: var(--svc-accent);
}

.wfa-svc-facts__label {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--svc-ink);
}

.wfa-svc-facts__value {
	font-size: 0.9375rem;
	line-height: 1.5;
	color: var(--svc-ink-2);
}

.wfa-svc-side-label,
.wfa-svc-feature__label {
	margin: 0 0 0.9rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--svc-ink-2);
}

/* ---------- jump links ---------- */

.wfa-svc-jump {
	margin: 0;
	padding: 0;
	list-style: none;
}

.wfa-svc-jump li {
	margin: 0;
}

.wfa-svc-jump a {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	padding: 0.5rem 0;
	color: var(--svc-ink);
	font-size: 0.9375rem;
	line-height: 1.4;
	text-decoration: none;
	transition: color 0.2s ease;
}

.wfa-svc-jump .wfa-ico {
	width: 1.125rem;
	height: 1.125rem;
	margin-top: 0.05rem;
	color: var(--svc-accent);
	transition: transform 0.2s ease;
}

.wfa-svc-jump a:hover {
	color: var(--svc-accent);
}

.wfa-svc-jump a:hover .wfa-ico {
	transform: translateX(3px);
}

/* ---------- 3. picks ---------- */

.wfa-svc-soon {
	padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
	background: var(--svc-paper-2);
	text-align: center;
}

.wfa-svc-soon__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3.5rem;
	height: 3.5rem;
	margin-bottom: 1.5rem;
	border: 1px solid var(--svc-line);
	background: var(--svc-paper);
	color: var(--svc-accent);
}

.wfa-svc-soon__icon .wfa-ico {
	width: 1.5rem;
	height: 1.5rem;
}

.wfa-svc-soon__title {
	max-width: 34ch;
	margin: 0 auto 1rem;
	font-family: var(--svc-display);
	font-size: clamp(1.5rem, 2.6vw, 2rem);
	line-height: 1.2;
	color: var(--svc-ink);
}

.wfa-svc-soon__text {
	max-width: 40rem;
	margin: 0 auto 2rem;
	font-size: 1rem;
	line-height: 1.65;
	color: var(--svc-ink-2);
}

.wfa-svc-soon .wfa-svc-btn:last-child {
	margin-top: 0;
}

.wfa-svc-feature {
	padding: clamp(2.5rem, 5vw, 4rem) 0;
	border-top: 1px solid var(--svc-line);
}

.wfa-svc-feature:first-child {
	padding-top: 0;
	border-top: 0;
}

.wfa-svc-feature__head {
	margin-bottom: clamp(1.75rem, 3vw, 2.5rem);
	text-align: center;
}

.wfa-svc-feature__badge {
	display: inline-block;
	margin: 0 0 1rem;
	padding: 0.45rem 0.8rem;
	background: var(--svc-accent);
	color: var(--svc-accent-ink);
	font-size: 0.6875rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

.wfa-svc-feature__badge--plain {
	padding: 0;
	background: none;
	color: var(--svc-ink-2);
}

.wfa-svc-feature__name {
	margin: 0;
	font-family: var(--svc-ui);
	font-size: clamp(1.375rem, 2.2vw, 1.625rem);
	font-weight: 600;
	line-height: 1.2;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--svc-ink);
}

.wfa-svc-feature__sub {
	margin: 0.4rem 0 0;
	font-size: 0.9375rem;
	color: var(--svc-ink-2);
}

.wfa-svc-feature__media {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	aspect-ratio: 16 / 8;
	overflow: hidden;
	background: var(--svc-paper-2);
}

.wfa-svc-feature__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The verdict. It used to borrow .wfa-svc-lead, which is a display
   size meant for a single line of intro. A verdict now runs to a
   paragraph, so it gets a reading size of its own: still the serif, so
   it stays the loudest thing in this column, but sized to be read. */
.wfa-svc-feature__verdict {
	max-width: 60ch;
	margin: 0 0 1.5rem;
	font-family: var(--svc-display);
	font-size: clamp(1.125rem, 1rem + 0.45vw, 1.3125rem);
	font-weight: 400;
	line-height: 1.55;
	color: var(--svc-ink);
}

.wfa-svc-feature__reason {
	margin: 0 0 1.25rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--svc-accent);
	background: var(--svc-soft);
	font-size: 0.9875rem;
	line-height: 1.6;
}

.wfa-svc-feature__summary {
	max-width: 60ch;
	margin: 0 0 1.75rem;
	font-size: 1.0625rem;
	line-height: 1.7;
}

.wfa-svc-feature__none {
	margin: 0 0 1.75rem;
	font-size: 0.9375rem;
	font-style: italic;
	color: var(--svc-ink-2);
}

.wfa-svc-icolist {
	display: grid;
	gap: 0.75rem;
	margin: 0 0 2rem;
	padding: 0;
	list-style: none;
}

.wfa-svc-icolist li {
	display: flex;
	align-items: flex-start;
	gap: 0.75rem;
	margin: 0;
	font-size: 0.9875rem;
	line-height: 1.45;
}

.wfa-svc-icolist--pro .wfa-ico { color: var(--svc-accent); }
.wfa-svc-icolist--con .wfa-ico { color: var(--svc-ink-2); }

.wfa-svc-feature__cta {
	margin-top: clamp(2rem, 4vw, 3rem);
	text-align: center;
}

.wfa-svc-picks .wfa-svc-table-wrap {
	margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------- 5. guide ---------- */

.wfa-svc-guide__lead {
	margin-bottom: clamp(2rem, 4vw, 3rem);
}

.wfa-svc-rows {
	border-top: 1px solid var(--svc-line);
}

.wfa-svc-row {
	display: grid;
	gap: 1.25rem;
	padding: clamp(2rem, 4vw, 3.25rem) 0;
	border-bottom: 1px solid var(--svc-line);
	scroll-margin-top: 2rem;
}

@media (min-width: 900px) {
	.wfa-svc-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 1.75fr);
		gap: var(--svc-col-gap);
	}

	.wfa-svc-row__head {
		position: sticky;
		top: 1.5rem;
		align-self: start;
	}
}

.wfa-svc-row__num {
	display: block;
	margin-bottom: 0.75rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	color: var(--svc-accent);
}

.wfa-svc-row__title {
	margin: 0;
	font-family: var(--svc-display);
	font-size: clamp(1.5rem, 2.4vw, 1.875rem);
	font-weight: 400;
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--svc-ink);
}

/* ---------- 6. how we chose: numbered cards ---------- */

.wfa-svc-method__list {
	max-width: none;
}

.wfa-svc-method__list ul {
	counter-reset: wfa-method;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
	gap: 1px;
	margin: 0;
	border: 1px solid var(--svc-line);
	background: var(--svc-line);
}

.wfa-svc-method__list ul > li {
	counter-increment: wfa-method;
	padding: 1.75rem 1.5rem 2rem;
	background: var(--svc-paper);
	font-size: 1rem;
	line-height: 1.55;
}

.wfa-svc-method__list ul > li::before {
	content: counter(wfa-method, decimal-leading-zero);
	position: static;
	display: block;
	width: auto;
	height: auto;
	margin-bottom: 1rem;
	background: none;
	-webkit-mask: none;
	mask: none;
	font-family: var(--svc-display);
	font-size: 1.75rem;
	line-height: 1;
	color: var(--svc-accent);
}

/* ---------- 7. FAQ, brought into the same rhythm ---------- */

.wfa-svc .wfa-svc-section--faq {
	margin: 0;
	padding: var(--svc-block) 0;
	border-top: 1px solid var(--svc-line);
}

.wfa-svc .wfa-svc-section--faq .wfa-svc-section__title {
	margin: 0 0 clamp(2rem, 4vw, 3rem);
	font-family: var(--svc-display);
	font-size: clamp(2rem, 3.8vw, 2.875rem);
	font-weight: 400;
	line-height: 1.1;
}

.wfa-svc .wfa-svc-faq {
	max-width: 52rem;
}

/* ---------- 8. tiles ---------- */

.wfa-svc-tiles {
	display: grid;
	gap: 2.5rem 1.5rem;
}

@media (min-width: 600px) {
	.wfa-svc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (min-width: 1000px) {
	.wfa-svc-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.wfa-svc-tile {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
	padding: 1.75rem 1.5rem 1.5rem;
	background: var(--svc-paper-2);
	color: var(--svc-ink);
	text-decoration: none;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.wfa-svc a.wfa-svc-tile,
.wfa-svc a.wfa-svc-tile:hover {
	color: var(--svc-ink);
	text-decoration: none;
}

.wfa-svc-tile:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -18px rgba(20, 23, 26, 0.35);
}

/* Thin line icons, after the Outsite benefit rows. */
.wfa-svc-tile__icon {
	display: block;
	margin-bottom: 0.9rem;
	color: var(--svc-ink);
	transition: color 0.2s ease;
}

.wfa-svc-caticon {
	display: block;
	width: 2.75rem;
	height: 2.75rem;
}

.wfa-svc-tile:hover .wfa-svc-tile__icon {
	color: var(--svc-accent);
}

.wfa-svc-tile__title {
	font-size: 0.9375rem;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.wfa-svc-tile__text {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--svc-ink-2);
}

.wfa-svc-tile__go {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: auto;
	padding-top: 0.6rem;
	font-size: 0.75rem;
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--svc-accent);
}

.wfa-svc-tile__go .wfa-ico {
	width: 1rem;
	height: 1rem;
	transition: transform 0.2s ease;
}

.wfa-svc-tile:hover .wfa-svc-tile__go .wfa-ico {
	transform: translateX(3px);
}

/* ---------- 9. closing band ---------- */

.wfa-svc-band {
	margin: 0 0 var(--svc-block);
	padding: clamp(3.5rem, 8vw, 6rem) clamp(1.5rem, 5vw, 4rem);
	background: var(--svc-paper-2);
	text-align: center;
}

.wfa-svc-band__title {
	max-width: 24ch;
	margin: 0 auto 1rem;
	font-family: var(--svc-display);
	font-size: clamp(1.875rem, 3.6vw, 2.75rem);
	font-weight: 400;
	line-height: 1.12;
	letter-spacing: -0.015em;
	color: var(--svc-ink);
}

.wfa-svc-band__text {
	max-width: 36rem;
	margin: 0 auto 2rem;
	font-size: 1.0625rem;
	line-height: 1.6;
	color: var(--svc-ink-2);
}

@media (prefers-reduced-motion: reduce) {
	.wfa-svc *,
	.wfa-svc *::before {
		transition: none !important;
	}
}


/* ==========================================================================
   v1.3.3 — no green
   The service pages now use ink and cream only, like the header, search
   bar and job pages. Everything that used the accent colour (fact
   icons, tick lists, guide numbers, jump arrows, Explore links, the Top
   pick label, the reason panel, the provider buttons) takes ink instead.
   Done by repointing the accent tokens, so nothing is missed.
   ========================================================================== */

.wfa,
.wfa-svc {
	--svc-accent:     var(--wfa-text, #14171a);
	--svc-accent-ink: var(--wfa-bg, #faf7f2);
	--svc-soft:       var(--wfa-surface, #f2ede4);
}

/* The provider button was accent, turning ink on hover. Now it starts as
   ink, so the hover flips it light with an ink edge, like every other
   button on the site. */
.wfa a.wfa-cta,
.wfa a.wfa-cta:visited {
	border-color: var(--svc-ink);
	background: var(--svc-ink);
	color: var(--svc-paper);
	text-decoration: none;
}

.wfa a.wfa-cta:hover,
.wfa a.wfa-cta:focus-visible {
	border-color: var(--svc-ink);
	background: var(--svc-paper);
	color: var(--svc-ink);
	text-decoration: none;
}

.wfa a.wfa-cta--secondary,
.wfa a.wfa-cta--secondary:visited {
	border-color: var(--svc-ink);
	background: transparent;
	color: var(--svc-ink);
}

.wfa a.wfa-cta--secondary:hover,
.wfa a.wfa-cta--secondary:focus-visible {
	background: var(--svc-ink);
	color: var(--svc-paper);
}

/* Tiles: the icon no longer changes colour on hover, so the lift and an
   underline on "Explore" carry it. */
.wfa-svc-tile:hover .wfa-svc-tile__go span,
.wfa-svc-tile:hover .wfa-svc-tile__go {
	text-decoration: underline;
	text-underline-offset: 4px;
}


/* ==========================================================================
   v1.4 — "List your space", shown on the Workspaces & Co-working page only
   ========================================================================== */

.wfa-svc-steps {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 0;
	margin: 2.5rem 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--wfa-text, #14171a);
}

.wfa-svc-step {
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
	padding: 1.75rem 1.5rem 2rem 0;
	border-left: 1px solid var(--wfa-line, #e2dcd2);
	padding-left: 1.5rem;
}

.wfa-svc-step:first-child {
	border-left: 0;
	padding-left: 0;
}

.wfa-svc-step__n {
	font-family: var(--wfa-ui, "Public Sans", system-ui, sans-serif);
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .14em;
	color: var(--wfa-muted, #5f6a70);
}

.wfa-svc-step__title {
	font-family: var(--wfa-display, "Fraunces", Georgia, serif);
	font-size: 1.25rem;
	line-height: 1.2;
}

.wfa-svc-step__text {
	font-size: .9375rem;
	line-height: 1.6;
	color: var(--wfa-muted, #5f6a70);
}

.wfa-svc-list__cta {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
	margin: 2.5rem 0 0;
}

.wfa-svc-list__link {
	font-size: .875rem;
	color: var(--wfa-text, #14171a);
	text-decoration: underline;
	text-underline-offset: 4px;
}

@media (max-width: 1000px) {
	.wfa-svc-steps {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.wfa-svc-step:nth-child(odd) {
		border-left: 0;
		padding-left: 0;
	}

	.wfa-svc-step:nth-child(n+3) {
		border-top: 1px solid var(--wfa-line, #e2dcd2);
		padding-top: 1.75rem;
	}
}

@media (max-width: 600px) {
	.wfa-svc-steps {
		grid-template-columns: 1fr;
	}

	.wfa-svc-step {
		border-left: 0;
		padding-left: 0;
	}

	.wfa-svc-step + .wfa-svc-step {
		border-top: 1px solid var(--wfa-line, #e2dcd2);
		padding-top: 1.75rem;
	}
}

/* ---------- v1.4 — the listed spaces, on the Workspaces page ---------- */

.wfa-svc-spacegrid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1.5rem;
	margin-top: 2.5rem;
}

.wfa-svc-space {
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wfa-line, #e2dcd2);
	background: #fff;
	color: var(--wfa-text, #14171a);
	text-decoration: none;
	transition: transform .25s ease, box-shadow .25s ease;
}

.wfa-svc-space,
.wfa-svc-space span {
	text-decoration: none;
	border-bottom: 0;
	background-image: none;
}

/* Same hover as a job card: a small lift and a soft shadow, and the
   photo eases in a little. No outline appears. */
.wfa-svc-space:hover,
.wfa-svc-space:focus {
	transform: translateY(-3px);
	box-shadow: 0 14px 28px -18px rgba(20, 23, 26, .35);
	text-decoration: none;
}

.wfa-svc-space:hover .wfa-svc-space__media img {
	transform: scale(1.06);
}

@media (prefers-reduced-motion: reduce) {
	.wfa-svc-space,
	.wfa-svc-space__media img {
		transition: none;
	}

	.wfa-svc-space:hover {
		transform: none;
	}

	.wfa-svc-space:hover .wfa-svc-space__media img {
		transform: none;
	}
}

.wfa-svc-space__media {
	position: relative;
	display: block;
	aspect-ratio: 3 / 2;
	overflow: hidden;
	background: var(--wfa-surface, #f2ede4);
}

.wfa-svc-space__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .35s ease;
}

.wfa-svc-space__blank {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-family: var(--wfa-display, "Fraunces", Georgia, serif);
	font-size: 1.75rem;
	color: var(--wfa-muted, #5f6a70);
}

.wfa-svc-space__flag {
	position: absolute;
	top: 0;
	left: 0;
	padding: .35rem .7rem;
	background: var(--wfa-text, #14171a);
	color: var(--wfa-bg, #faf7f2);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.wfa-svc-space__body {
	display: flex;
	flex-direction: column;
	gap: .4rem;
	flex: 1 1 auto;
	padding: 1.1rem 1.2rem 1.2rem;
}

.wfa-svc-space__where {
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--wfa-muted, #5f6a70);
}

.wfa-svc-space__title {
	font-family: var(--wfa-display, "Fraunces", Georgia, serif);
	font-size: 1.1875rem;
	line-height: 1.2;
}

.wfa-svc-space__foot {
	display: flex;
	justify-content: space-between;
	gap: 1rem;
	margin-top: auto;
	padding-top: .9rem;
	border-top: 1px solid var(--wfa-line, #e2dcd2);
	font-size: .8125rem;
	color: var(--wfa-muted, #5f6a70);
}

@media (max-width: 1200px) {
	.wfa-svc-spacegrid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
	.wfa-svc-spacegrid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 600px) {
	.wfa-svc-spacegrid { grid-template-columns: 1fr; }
}