/**
 * SoftGlaze Roles & Dashboards - front end.
 *
 * Mobile first. Every control is border-box with an explicit max-width so a
 * theme's own input rules cannot push a field past the edge of its container,
 * which is what produced the "fields going outside the box" report on phones.
 */

.sgrd-auth,
.sgrd-dash,
.sgrd-quote,
.sgrd-contact {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;
	--sgrd-radius: 10px;
	--sgrd-shadow: 0 1px 3px rgba( 18, 38, 63, .08 );

	box-sizing: border-box;
	max-width: 100%;
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.6;
}

.sgrd-auth *,
.sgrd-auth *::before,
.sgrd-auth *::after,
.sgrd-dash *,
.sgrd-dash *::before,
.sgrd-dash *::after,
.sgrd-quote *,
.sgrd-quote *::before,
.sgrd-quote *::after,
.sgrd-contact *,
.sgrd-contact *::before,
.sgrd-contact *::after {
	box-sizing: border-box;
}

/* -------------------------------------------------------------------------
 * Form controls
 * ---------------------------------------------------------------------- */

.sgrd-field {
	margin: 0 0 18px;
	min-width: 0; /* lets a field shrink inside a grid track instead of overflowing */
}

.sgrd-field > label {
	display: block;
	margin: 0 0 7px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1.4;
	color: var( --sgrd-ink );
}

.sgrd-req {
	color: #c0392b;
}

.sgrd-form input[type="text"],
.sgrd-form input[type="email"],
.sgrd-form input[type="password"],
.sgrd-form input[type="tel"],
.sgrd-form input[type="url"],
.sgrd-form input[type="date"],
.sgrd-form input[type="number"],
.sgrd-form select,
.sgrd-form textarea {
	display: block;
	width: 100%;
	max-width: 100%;
	min-width: 0;
	box-sizing: border-box;
	min-height: 48px;
	margin: 0;
	padding: 12px 14px;
	border: 1px solid var( --sgrd-line );
	border-radius: 8px;
	background: #fff;
	color: var( --sgrd-ink );
	font-family: inherit;
	font-size: 16px; /* below 16px iOS zooms the whole page on focus */
	line-height: 1.4;
	appearance: none;
	-webkit-appearance: none;
}

.sgrd-form textarea {
	min-height: 130px;
	resize: vertical;
}

.sgrd-form select {
	background-image: url( "data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b6b7f' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	padding-right: 40px;
}

.sgrd-form input:focus,
.sgrd-form select:focus,
.sgrd-form textarea:focus {
	outline: none;
	border-color: var( --sgrd-accent, #003C78 );
	box-shadow: 0 0 0 3px rgba( 0, 60, 120, .14 );
}

.sgrd-hint {
	margin: 7px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: var( --sgrd-muted );
}

.sgrd-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0 18px;
}

/* Password field with a reveal button that never overlaps the text. */
.sgrd-pw {
	position: relative;
	display: block;
}

.sgrd-pw input {
	padding-right: 76px;
}

.sgrd-pw__toggle {
	position: absolute;
	top: 50%;
	right: 6px;
	transform: translateY( -50% );
	min-width: 60px;
	min-height: 36px;
	padding: 0 10px;
	border: 0;
	border-radius: 6px;
	background: transparent;
	color: var( --sgrd-accent, #003C78 );
	font: 600 13px/1 inherit;
	cursor: pointer;
}

.sgrd-pw__toggle:hover {
	background: var( --sgrd-bg );
}

/* Checkboxes: 24px is the WCAG 2.2 minimum target and also just easier to tap. */
.sgrd-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	margin: 0 0 18px;
	font-size: 15px;
	line-height: 1.5;
	cursor: pointer;
}

.sgrd-check input[type="checkbox"] {
	flex: 0 0 auto;
	width: 24px;
	height: 24px;
	margin: 0;
	accent-color: var( --sgrd-accent, #003C78 );
}

.sgrd-check--terms {
	margin-top: 6px;
}

.sgrd-form__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin: 0 0 20px;
}

.sgrd-form__row .sgrd-check {
	margin: 0;
}

/* Honeypot: off-screen rather than display:none, which some bots detect. */
.sgrd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.sgrd-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px;
	border: 1px solid transparent;
	border-radius: 8px;
	font: 600 15px/1.2 inherit;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.sgrd-btn--primary {
	width: 100%;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
}

.sgrd-btn--primary:hover,
.sgrd-btn--primary:focus {
	background: var( --sgrd-accent-dark, #00294f );
	color: #fff;
}

.sgrd-btn--ghost {
	background: #fff;
	border-color: var( --sgrd-line );
	color: var( --sgrd-ink );
}

.sgrd-btn--ghost:hover,
.sgrd-btn--ghost:focus {
	border-color: var( --sgrd-accent, #003C78 );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-btn--sm {
	width: auto;
	min-height: 38px;
	padding: 8px 14px;
	font-size: 13px;
}

.sgrd-link {
	color: var( --sgrd-accent, #003C78 );
	text-decoration: underline;
}

.sgrd-link:hover {
	text-decoration: none;
}

/* -------------------------------------------------------------------------
 * Notices
 * ---------------------------------------------------------------------- */

.sgrd-notice {
	margin: 0 0 20px;
	padding: 14px 16px;
	border-left: 4px solid #7d8996;
	border-radius: 6px;
	background: #eef2f6;
	font-size: 15px;
	line-height: 1.55;
}

.sgrd-notice--error {
	border-left-color: #c0392b;
	background: #fdecea;
	color: #8a1c1c;
}

.sgrd-notice--success {
	border-left-color: #1e8e5a;
	background: #e8f6ef;
	color: #14603c;
}

.sgrd-notice--info {
	border-left-color: var( --sgrd-accent, #003C78 );
}

/* -------------------------------------------------------------------------
 * Auth pages
 * ---------------------------------------------------------------------- */

.sgrd-auth {
	width: 100%;
	max-width: 480px;
	margin: 0 auto;
	padding: 28px 16px 48px;
}

.sgrd-auth--wide {
	max-width: 680px;
}

.sgrd-auth__card {
	padding: 26px 20px 28px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-auth__title {
	margin: 0 0 8px;
	font-size: 26px;
	line-height: 1.25;
	font-weight: 700;
}

.sgrd-auth__lede {
	margin: 0 0 22px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-auth__alt {
	margin: 20px 0 0;
	padding-top: 18px;
	border-top: 1px solid var( --sgrd-line );
	text-align: center;
	font-size: 15px;
}

.sgrd-subhead {
	margin: 26px 0 14px;
	padding-top: 20px;
	border-top: 1px solid var( --sgrd-line );
	font-size: 17px;
	font-weight: 700;
}

/* Role chooser */
.sgrd-roles {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
	margin: 0 0 24px;
}

.sgrd-role {
	display: block;
	width: 100%;
	max-width: 100%;
	padding: 18px;
	border: 2px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	font: inherit;
	text-align: left;
	cursor: pointer;
	transition: border-color .15s ease, box-shadow .15s ease;
}

.sgrd-role:hover {
	border-color: var( --sgrd-accent, #003C78 );
}

.sgrd-role[aria-pressed="true"] {
	border-color: var( --sgrd-accent, #003C78 );
	box-shadow: 0 0 0 3px rgba( 0, 60, 120, .15 );
}

.sgrd-role__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var( --sgrd-bg );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-role[aria-pressed="true"] .sgrd-role__icon {
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
}

.sgrd-role__name {
	display: block;
	margin: 0 0 5px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.3;
}

.sgrd-role__desc {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var( --sgrd-muted );
}

/* -------------------------------------------------------------------------
 * Dashboards
 * ---------------------------------------------------------------------- */

.sgrd-dash {
	width: 100%;
	max-width: 1140px;
	margin: 0 auto;
	padding: 24px 16px 56px;
}

.sgrd-dash__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 22px;
}

.sgrd-dash__id {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
}

.sgrd-dash__avatar {
	flex: 0 0 auto;
	border-radius: 50%;
}

.sgrd-dash__eyebrow {
	margin: 0 0 2px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --sgrd-muted );
}

.sgrd-dash__name {
	margin: 0;
	font-size: 22px;
	line-height: 1.25;
	font-weight: 700;
	overflow-wrap: anywhere;
}

/* Tabs scroll sideways on a phone rather than wrapping into a tall stack. */
.sgrd-dash__nav {
	display: flex;
	gap: 4px;
	margin: 0 0 24px;
	padding-bottom: 2px;
	border-bottom: 1px solid var( --sgrd-line );
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}

.sgrd-dash__nav::-webkit-scrollbar {
	display: none;
}

.sgrd-tab {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 10px 16px;
	border-bottom: 3px solid transparent;
	color: var( --sgrd-muted );
	font-size: 15px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.sgrd-tab:hover {
	color: var( --sgrd-ink );
}

.sgrd-tab.is-active {
	border-bottom-color: var( --sgrd-accent, #003C78 );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-stats {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	gap: 12px;
	margin: 0 0 24px;
}

.sgrd-stat {
	display: block;
	padding: 18px 16px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	text-decoration: none;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-stat:hover {
	border-color: var( --sgrd-accent, #003C78 );
}

.sgrd-stat__num {
	display: block;
	font-size: 30px;
	font-weight: 700;
	line-height: 1.1;
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-stat__label {
	display: block;
	margin-top: 4px;
	font-size: 13px;
	color: var( --sgrd-muted );
}

.sgrd-panel {
	margin: 0 0 24px;
	padding: 20px 16px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-panel__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0 0 16px;
}

.sgrd-panel__title {
	margin: 0 0 16px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
}

.sgrd-panel__head .sgrd-panel__title {
	margin: 0;
}

.sgrd-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sgrd-actions .sgrd-btn {
	width: auto;
	flex: 1 1 auto;
}

.sgrd-empty {
	margin: 0 0 16px;
	color: var( --sgrd-muted );
}

/* -------------------------------------------------------------------------
 * Tables: real table on desktop, stacked cards on a phone
 * ---------------------------------------------------------------------- */

.sgrd-tablewrap {
	width: 100%;
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

.sgrd-table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 14px;
}

.sgrd-table th,
.sgrd-table td {
	padding: 12px 10px;
	border-bottom: 1px solid var( --sgrd-line );
	text-align: left;
	vertical-align: top;
}

.sgrd-table th {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var( --sgrd-muted );
	white-space: nowrap;
}

.sgrd-cellnote {
	max-width: 320px;
}

.sgrd-msg {
	color: var( --sgrd-muted );
}

.sgrd-inline-form {
	display: inline-block;
	margin: 0 4px 4px 0;
}

.sgrd-badge {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var( --sgrd-bg );
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.sgrd-badge--new { background: #e6effa; color: #1b4f8a; }
.sgrd-badge--accepted,
.sgrd-badge--publish { background: #e8f6ef; color: #14603c; }
.sgrd-badge--declined,
.sgrd-badge--cancelled { background: #fdecea; color: #8a1c1c; }
.sgrd-badge--completed { background: #ede8fa; color: #4b2f8a; }
.sgrd-badge--pending,
.sgrd-badge--draft { background: #fdf3e2; color: #8a5a12; }

@media ( max-width: 782px ) {

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

	.sgrd-table thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect( 1px, 1px, 1px, 1px );
		clip-path: inset( 50% );
		white-space: nowrap;
	}

	.sgrd-table tr {
		margin: 0 0 14px;
		padding: 4px 0;
		border: 1px solid var( --sgrd-line );
		border-radius: 8px;
		background: #fff;
	}

	.sgrd-table td {
		display: flex;
		flex-wrap: wrap;
		gap: 4px 12px;
		padding: 10px 14px;
		border-bottom: 1px solid #f0f3f6;
	}

	.sgrd-table tr td:last-child {
		border-bottom: 0;
	}

	.sgrd-table td::before {
		content: attr( data-label );
		flex: 0 0 40%;
		max-width: 40%;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .03em;
		text-transform: uppercase;
		color: var( --sgrd-muted );
	}

	.sgrd-table td > * {
		min-width: 0;
	}

	.sgrd-cellnote {
		flex: 1 1 100%;
		max-width: 100%;
	}
}

/* Saved provider cards */
.sgrd-cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 16px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-card {
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
}

.sgrd-card__media img {
	display: block;
	width: 100%;
	height: 180px;
	object-fit: cover;
}

.sgrd-card__body {
	padding: 16px;
}

.sgrd-card__title {
	margin: 0 0 12px;
	font-size: 17px;
	line-height: 1.35;
	font-weight: 700;
}

/* -------------------------------------------------------------------------
 * Quote and contact blocks
 * ---------------------------------------------------------------------- */

.sgrd-quote {
	margin: 40px 0 0;
	padding: 24px 16px;
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
}

.sgrd-quote__inner {
	max-width: 720px;
	margin: 0 auto;
}

.sgrd-quote__title,
.sgrd-contact__title {
	margin: 0 0 8px;
	font-size: 22px;
	line-height: 1.3;
	font-weight: 700;
}

.sgrd-quote__lede {
	margin: 0 0 20px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-contact {
	width: 100%;
	max-width: 760px;
	margin: 0 auto;
}

/* -------------------------------------------------------------------------
 * Wider screens
 * ---------------------------------------------------------------------- */

@media ( min-width: 600px ) {

	.sgrd-grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sgrd-roles {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sgrd-auth__card {
		padding: 34px 32px 36px;
	}

	.sgrd-btn--primary {
		width: auto;
		min-width: 200px;
	}

	.sgrd-stats {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.sgrd-dash--customer .sgrd-stats {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-panel {
		padding: 24px;
	}

	.sgrd-quote {
		padding: 32px 28px;
	}

	.sgrd-cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 960px ) {

	.sgrd-auth {
		padding: 48px 16px 72px;
	}

	.sgrd-dash__name {
		font-size: 26px;
	}

	.sgrd-cards {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}
}

/* Respect a reduced-motion preference. */
@media ( prefers-reduced-motion: reduce ) {

	.sgrd-btn,
	.sgrd-role,
	.sgrd-stat {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * Finance page and packages
 * ---------------------------------------------------------------------- */

.sgrd-finance {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;
	--sgrd-radius: 10px;
	--sgrd-shadow: 0 1px 3px rgba( 18, 38, 63, .08 );

	box-sizing: border-box;
	max-width: 100%;
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.6;
}

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

/* Hero */
.sgrd-fin-hero {
	padding: 56px 16px;
	background-color: #0b2545;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	color: #fff;
	text-align: center;
}

.sgrd-fin-hero__inner {
	max-width: 760px;
	margin: 0 auto;
}

.sgrd-fin-hero__eyebrow {
	margin: 0 0 10px;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: #9fc0e4;
}

.sgrd-fin-hero__title {
	margin: 0 0 14px;
	font-size: 30px;
	line-height: 1.2;
	font-weight: 700;
	color: #fff;
}

.sgrd-fin-hero__text {
	margin: 0 0 26px;
	font-size: 17px;
	line-height: 1.6;
	color: #dce8f5;
}

.sgrd-fin-hero__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}

.sgrd-fin-hero__actions .sgrd-btn {
	width: auto;
	min-width: 200px;
}

.sgrd-btn--onDark {
	background: transparent;
	border-color: rgba( 255, 255, 255, .55 );
	color: #fff;
}

.sgrd-btn--onDark:hover,
.sgrd-btn--onDark:focus {
	background: rgba( 255, 255, 255, .12 );
	border-color: #fff;
	color: #fff;
}

/* Intro */
.sgrd-fin-intro {
	max-width: 780px;
	margin: 0 auto;
	padding: 34px 16px 0;
	text-align: center;
	font-size: 17px;
	color: var( --sgrd-muted );
}

/* Steps */
.sgrd-fin-steps {
	max-width: 1140px;
	margin: 0 auto;
	padding: 44px 16px 8px;
}

.sgrd-fin-steps__title,
.sgrd-fin-note__title,
.sgrd-packages__title {
	margin: 0 0 10px;
	font-size: 25px;
	line-height: 1.25;
	font-weight: 700;
	text-align: center;
}

.sgrd-fin-steps__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
	counter-reset: none;
}

.sgrd-fin-step {
	padding: 22px 20px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-fin-step__num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	margin: 0 0 12px;
	border-radius: 50%;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
	font-size: 16px;
	font-weight: 700;
}

.sgrd-fin-step__name {
	margin: 0 0 6px;
	font-size: 17px;
	font-weight: 700;
}

.sgrd-fin-step__text {
	margin: 0;
	font-size: 15px;
	color: var( --sgrd-muted );
}

/* Package grid */
.sgrd-packages {
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 16px 8px;
}

.sgrd-packages__lede {
	margin: 0 auto 6px;
	max-width: 640px;
	text-align: center;
	color: var( --sgrd-muted );
}

.sgrd-packages__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 20px;
	margin-top: 30px;
	align-items: start;
}

.sgrd-pkg {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: 26px 22px;
	border: 1px solid var( --sgrd-line );
	border-radius: 12px;
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-pkg--featured {
	border-color: var( --sgrd-accent, #003C78 );
	border-width: 2px;
	box-shadow: 0 8px 24px rgba( 0, 60, 120, .12 );
}

.sgrd-pkg__badge {
	position: absolute;
	top: -12px;
	left: 22px;
	padding: 5px 12px;
	border-radius: 999px;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .02em;
}

.sgrd-pkg__name {
	margin: 6px 0 10px;
	font-size: 19px;
	font-weight: 700;
}

.sgrd-pkg__price {
	margin: 0 0 14px;
	padding-bottom: 16px;
	border-bottom: 1px solid var( --sgrd-line );
}

.sgrd-pkg__amount {
	display: block;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.1;
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-pkg__amount--tbc {
	font-size: 17px;
	font-weight: 600;
	color: var( --sgrd-muted );
}

.sgrd-pkg__period {
	display: block;
	margin-top: 4px;
	font-size: 14px;
	color: var( --sgrd-muted );
}

.sgrd-pkg__summary {
	margin: 0 0 16px;
	font-size: 15px;
	color: var( --sgrd-muted );
}

.sgrd-pkg__features {
	flex: 1 1 auto;
	margin: 0 0 22px;
	padding: 0;
	list-style: none;
}

.sgrd-pkg__features li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	margin: 0 0 10px;
	font-size: 15px;
	line-height: 1.5;
}

.sgrd-pkg__tick {
	flex: 0 0 auto;
	margin-top: 2px;
	color: #1e8e5a;
}

.sgrd-pkg__cta {
	width: 100%;
}

/* Fee notes */
.sgrd-fin-note {
	max-width: 1140px;
	margin: 0 auto;
	padding: 48px 16px 8px;
}

.sgrd-fin-note__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	margin-top: 26px;
}

.sgrd-fin-note__item {
	padding: 22px 20px;
	border-left: 4px solid var( --sgrd-accent, #003C78 );
	border-radius: 8px;
	background: var( --sgrd-bg );
}

.sgrd-fin-note__item h3 {
	margin: 0 0 8px;
	font-size: 17px;
	font-weight: 700;
}

.sgrd-fin-note__item p {
	margin: 0;
	font-size: 15px;
	color: var( --sgrd-muted );
}

/* Closing call to action */
.sgrd-fin-cta {
	max-width: 760px;
	margin: 0 auto;
	padding: 52px 16px 60px;
	text-align: center;
}

.sgrd-fin-cta h2 {
	margin: 0 0 10px;
	font-size: 25px;
	font-weight: 700;
}

.sgrd-fin-cta p {
	margin: 0 0 22px;
	color: var( --sgrd-muted );
}

.sgrd-fin-cta .sgrd-btn {
	width: auto;
	min-width: 260px;
}

/* Plan chooser on the registration form */
.sgrd-planlist {
	display: grid;
	grid-template-columns: 1fr;
	gap: 12px;
	margin: 0 0 20px;
}

.sgrd-plan {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	padding: 16px;
	border: 2px solid var( --sgrd-line );
	border-radius: 10px;
	background: #fff;
	cursor: pointer;
}

.sgrd-plan:hover {
	border-color: var( --sgrd-accent, #003C78 );
}

.sgrd-plan:has( input:checked ),
.sgrd-plan.is-chosen {
	border-color: var( --sgrd-accent, #003C78 );
	box-shadow: 0 0 0 3px rgba( 0, 60, 120, .12 );
}

.sgrd-plan input[type="radio"] {
	flex: 0 0 auto;
	width: 22px;
	height: 22px;
	margin: 2px 0 0;
	accent-color: var( --sgrd-accent, #003C78 );
}

.sgrd-plan__body {
	display: block;
	min-width: 0;
}

.sgrd-plan__name {
	display: block;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.3;
}

.sgrd-plan__price {
	display: block;
	margin: 3px 0;
	font-size: 15px;
	font-weight: 600;
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-plan__period {
	font-weight: 400;
	color: var( --sgrd-muted );
}

.sgrd-plan__desc {
	display: block;
	font-size: 14px;
	line-height: 1.5;
	color: var( --sgrd-muted );
}

@media ( min-width: 600px ) {

	.sgrd-fin-hero {
		padding: 76px 24px;
	}

	.sgrd-fin-hero__title {
		font-size: 40px;
	}

	.sgrd-fin-steps__list,
	.sgrd-fin-note__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sgrd-packages__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 960px ) {

	.sgrd-fin-steps__list {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.sgrd-packages__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-fin-note__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------------------------
 * Services grid and service pages
 *
 * Both live outside the .sgrd-auth / .sgrd-dash containers, so they restate the
 * few custom properties those blocks would otherwise have supplied. The theme
 * renders this content full bleed, which is why every block sets its own
 * container width rather than relying on one.
 * ---------------------------------------------------------------------- */

.sgrd-svc,
.sgrd-page {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #e2e8f0;
	--sgrd-soft: #f6f8fa;

	/* The theme flexes the children of an Elementor widget, which laid the
	   filters and the grid side by side and squeezed both. */
	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	color: var( --sgrd-ink );
}

.sgrd-svc *,
.sgrd-svc *::before,
.sgrd-svc *::after,
.sgrd-page *,
.sgrd-page *::before,
.sgrd-page *::after {
	box-sizing: border-box;
}

/* ---- filter chips ---- */

.sgrd-svc__filters {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
	margin: 0 0 36px;
}

.sgrd-svc__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
	margin: 0;
	padding: 10px 18px;
	border: 1px solid var( --sgrd-line );
	border-radius: 999px;
	background: #fff;
	color: var( --sgrd-ink );
	font: 600 15px/1.2 inherit;
	cursor: pointer;
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

.sgrd-svc__chip:hover,
.sgrd-svc__chip:focus-visible {
	border-color: var( --sgrd-accent, #003C78 );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-svc__chip.is-active {
	background: var( --sgrd-accent, #003C78 );
	border-color: var( --sgrd-accent, #003C78 );
	color: #fff;
}

.sgrd-svc__chip-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 24px;
	height: 22px;
	padding: 0 7px;
	border-radius: 999px;
	background: var( --sgrd-soft );
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 700;
}

.sgrd-svc__chip.is-active .sgrd-svc__chip-count {
	background: rgba( 255, 255, 255, .22 );
	color: #fff;
}

/* ---- the cards ---- */

.sgrd-svc__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
}

.sgrd-svc__card {
	position: relative;
	display: flex;
	flex-direction: column;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 2px 14px rgba( 18, 38, 63, .08 );
	transition: transform .18s ease, box-shadow .18s ease;
}

.sgrd-svc__card[hidden] {
	display: none;
}

.sgrd-svc__card:hover {
	transform: translateY( -4px );
	box-shadow: 0 12px 28px rgba( 18, 38, 63, .14 );
}

.sgrd-svc__media {
	overflow: hidden;
	border-radius: 16px 16px 0 0;
	background: var( --sgrd-soft );
	aspect-ratio: 10 / 9;
}

.sgrd-svc__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-svc__body {
	position: relative;
	flex: 1 1 auto;
	padding: 26px 24px 24px;
}

.sgrd-svc__title {
	margin: 0 0 8px;
	padding-right: 52px;
	font-size: 20px;
	line-height: 1.3;
	color: var( --sgrd-ink );
}

.sgrd-svc__title a {
	color: inherit;
	text-decoration: none;
}

/* Makes the whole card open the service page, while the arrow keeps its own
   destination because it sits above this layer. */
.sgrd-svc__title a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.sgrd-svc__summary {
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.55;
}

.sgrd-svc__go {
	position: absolute;
	top: -26px;
	right: 22px;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
	font-size: 20px;
	line-height: 1;
	text-decoration: none;
	box-shadow: 0 4px 12px rgba( 0, 60, 120, .3 );
	transition: background-color .16s ease, transform .16s ease;
}

.sgrd-svc__go:hover,
.sgrd-svc__go:focus-visible {
	background: var( --sgrd-accent-dark, #00294f );
	color: #fff;
	transform: scale( 1.06 );
}

.sgrd-svc__empty {
	margin: 40px 0 0;
	color: var( --sgrd-muted );
	text-align: center;
}

/* ---- service page ---- */

.sgrd-page {
	padding-top: 56px;
	padding-bottom: 8px;
}

.sgrd-page__hero {
	display: grid;
	grid-template-columns: 1fr;
	gap: 28px;
	align-items: center;
}

.sgrd-page__media {
	overflow: hidden;
	border-radius: 18px;
	background: var( --sgrd-soft );
	aspect-ratio: 10 / 9;
}

.sgrd-page__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-page__eyebrow {
	margin: 0 0 10px;
	color: var( --sgrd-accent, #003C78 );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sgrd-page__title {
	margin: 0 0 14px;
	font-size: 32px;
	line-height: 1.18;
	color: var( --sgrd-ink );
}

.sgrd-page__intro {
	margin: 0 0 22px;
	color: var( --sgrd-muted );
	font-size: 17px;
	line-height: 1.65;
}

.sgrd-page__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.sgrd-page__facts li {
	padding: 8px 14px;
	border: 1px solid var( --sgrd-line );
	border-radius: 999px;
	background: #fff;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-page__facts strong {
	color: var( --sgrd-ink );
}

.sgrd-page__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	margin: 0;
}

.sgrd-page .sgrd-btn,
.sgrd-svc-cta .sgrd-btn {
	width: auto;
	flex: 1 1 200px;
	max-width: 300px;
}

/* ---- what you can book ---- */

.sgrd-page__types {
	margin: 56px 0 0;
}

.sgrd-page__types-title {
	margin: 0 0 24px;
	font-size: 26px;
	line-height: 1.25;
	color: var( --sgrd-ink );
}

.sgrd-page__cards {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
}

.sgrd-type {
	display: flex;
	flex-direction: column;
	padding: 22px;
	border: 1px solid var( --sgrd-line );
	border-radius: 14px;
	background: #fff;
	transition: border-color .16s ease, box-shadow .16s ease;
}

.sgrd-type:hover {
	border-color: var( --sgrd-accent, #003C78 );
	box-shadow: 0 6px 18px rgba( 18, 38, 63, .08 );
}

.sgrd-type__name {
	margin: 0 0 8px;
	font-size: 17px;
	line-height: 1.35;
	color: var( --sgrd-ink );
}

.sgrd-type__text {
	margin: 0 0 14px;
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.6;
}

.sgrd-type__link {
	margin-top: auto;
	color: var( --sgrd-accent, #003C78 );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sgrd-type__link:hover,
.sgrd-type__link:focus-visible {
	text-decoration: underline;
}

/* ---- closing call to action ---- */

.sgrd-svc-cta {
	margin: 56px 0 0;
	padding: 34px 24px;
	border: 1px solid var( --sgrd-line );
	border-radius: 16px;
	background: var( --sgrd-soft );
	text-align: center;
}

.sgrd-svc-cta__title {
	margin: 0 0 8px;
	font-size: 24px;
	line-height: 1.3;
	color: var( --sgrd-ink );
}

.sgrd-svc-cta__text {
	margin: 0 auto 20px;
	max-width: 46em;
	color: var( --sgrd-muted );
	font-size: 16px;
	line-height: 1.6;
}

.sgrd-svc-cta__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 0;
}

/* ---- wider screens ---- */

@media ( min-width: 600px ) {

	.sgrd-svc__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}

	.sgrd-page__cards {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 900px ) {

	.sgrd-svc[data-columns="3"] .sgrd-svc__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-svc[data-columns="4"] .sgrd-svc__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}

	.sgrd-page {
		padding-top: 72px;
	}

	.sgrd-page__hero {
		grid-template-columns: minmax( 0, 46% ) minmax( 0, 1fr );
		gap: 48px;
	}

	.sgrd-page__title {
		font-size: 40px;
	}

	.sgrd-page__cards {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-page .sgrd-btn,
	.sgrd-svc-cta .sgrd-btn {
		flex: 0 1 auto;
		min-width: 190px;
	}

	.sgrd-svc-cta {
		padding: 44px 32px;
	}
}

/* -------------------------------------------------------------------------
 * Header navigation
 *
 * Between the width the desktop menu appears at and about 1280px, the six menu
 * items need more room than there is between the logo and the registration
 * button, so they drop onto a second line and the header grows. Tightening the
 * spacing, and the type on the narrowest of those widths, keeps one line.
 * ---------------------------------------------------------------------- */

@media ( min-width: 1025px ) and ( max-width: 1279px ) {

	.gva-nav-menu.gva-main-menu > li {
		padding-left: 9px;
		padding-right: 9px;
	}
}

@media ( min-width: 1025px ) and ( max-width: 1180px ) {

	.gva-nav-menu.gva-main-menu > li > a {
		font-size: 14px;
	}
}

@media ( min-width: 1025px ) and ( max-width: 1099px ) {

	.gva-nav-menu.gva-main-menu > li {
		padding-left: 5px;
		padding-right: 5px;
	}

	.gva-nav-menu.gva-main-menu > li > a {
		font-size: 13px;
	}
}

/* -------------------------------------------------------------------------
 * Listing cards outside the directory
 *
 * Squarer corners than the service cards, at the client's request, and a
 * picture on every card because a listing without one reads as broken.
 * ---------------------------------------------------------------------- */

.sgrd-lst {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #e2e8f0;
	--sgrd-soft: #eef2f6;
	--sgrd-radius: 8px;

	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	color: var( --sgrd-ink );
}

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

.sgrd-lst__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 24px;
}

.sgrd-lst__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}

.sgrd-lst__card:hover {
	transform: translateY( -2px );
	border-color: var( --sgrd-accent, #003C78 );
	box-shadow: 0 10px 24px rgba( 18, 38, 63, .12 );
}

.sgrd-lst__media {
	position: relative;
	overflow: hidden;
	background: var( --sgrd-soft );
	aspect-ratio: 3 / 2;
}

.sgrd-lst__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-lst__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #e8edf3 0%, #dde5ee 100% );
}

.sgrd-lst__flag {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 5px;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sgrd-lst__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 18px 20px 20px;
}

.sgrd-lst__tag {
	align-self: flex-start;
	margin: 0 0 10px;
	padding: 4px 10px;
	border: 1px solid var( --sgrd-line );
	border-radius: 5px;
	background: var( --sgrd-soft );
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 600;
}

.sgrd-lst__title {
	margin: 0 0 8px;
	font-size: 18px;
	line-height: 1.3;
}

.sgrd-lst__title a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-lst__title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sgrd-lst__text {
	margin: 0 0 16px;
	color: var( --sgrd-muted );
	font-size: 14px;
	line-height: 1.55;
}

.sgrd-lst__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	margin: auto 0 0;
	padding-top: 12px;
	border-top: 1px solid var( --sgrd-line );
	font-size: 14px;
}

.sgrd-lst__where {
	color: var( --sgrd-muted );
}

.sgrd-lst__price {
	color: var( --sgrd-accent, #003C78 );
	font-weight: 700;
}

.sgrd-lst__more {
	margin: 32px 0 0;
	text-align: center;
}

.sgrd-lst__more .sgrd-btn {
	width: auto;
	min-width: 220px;
	border-radius: var( --sgrd-radius );
}

@media ( min-width: 600px ) {

	.sgrd-lst__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

@media ( min-width: 900px ) {

	.sgrd-lst[data-columns="3"] .sgrd-lst__grid {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-lst[data-columns="4"] .sgrd-lst__grid {
		grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
	}
}

/* -------------------------------------------------------------------------
 * The listings page: filter bar, count, pagination
 * ---------------------------------------------------------------------- */

.sgrd-find {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #e2e8f0;
	--sgrd-soft: #f6f8fa;
	--sgrd-radius: 8px;

	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	color: var( --sgrd-ink );
}

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

.sgrd-find__filters {
	margin: 0 0 22px;
	padding: 20px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-soft );
}

.sgrd-find__row {
	display: grid;
	grid-template-columns: 1fr;
	gap: 14px;
}

.sgrd-find__row + .sgrd-find__row {
	margin-top: 14px;
}

.sgrd-find__field label {
	display: block;
	margin: 0 0 6px;
	color: var( --sgrd-muted );
	font-size: 13px;
	font-weight: 600;
}

.sgrd-find__field input:not(.sgrd-combo__filter),
.sgrd-find__field select {
	width: 100%;
	max-width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font: inherit;
	font-size: 15px;
}

.sgrd-find__field input:focus,
.sgrd-find__field select:focus {
	border-color: var( --sgrd-accent, #003C78 );
	outline: 2px solid rgba( 0, 60, 120, .18 );
	outline-offset: 1px;
}

.sgrd-find__pair {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sgrd-find__pair span {
	color: var( --sgrd-muted );
}

.sgrd-find__field--go {
	display: flex;
	align-items: flex-end;
}

.sgrd-find__field--go .sgrd-btn {
	width: 100%;
	border-radius: 6px;
}

.sgrd-find__count {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 14px;
	margin: 0 0 20px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-find__clear {
	color: var( --sgrd-accent, #003C78 );
	font-weight: 600;
	text-decoration: none;
}

.sgrd-find__clear:hover,
.sgrd-find__clear:focus-visible {
	text-decoration: underline;
}

.sgrd-find__empty {
	padding: 44px 24px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-soft );
	text-align: center;
}

.sgrd-find__empty h3 {
	margin: 0 0 8px;
	font-size: 22px;
	color: var( --sgrd-ink );
}

.sgrd-find__empty p {
	margin: 0 auto 18px;
	max-width: 40em;
	color: var( --sgrd-muted );
}

.sgrd-find__empty .sgrd-btn {
	width: auto;
	min-width: 220px;
	border-radius: var( --sgrd-radius );
}

.sgrd-find__pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 34px 0 0;
}

.sgrd-find__pages .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font-weight: 600;
	text-decoration: none;
}

.sgrd-find__pages .page-numbers:hover {
	border-color: var( --sgrd-accent, #003C78 );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-find__pages .page-numbers.current {
	background: var( --sgrd-accent, #003C78 );
	border-color: var( --sgrd-accent, #003C78 );
	color: #fff;
}

@media ( min-width: 700px ) {

	.sgrd-find__row {
		grid-template-columns: repeat( 3, minmax( 0, 1fr ) );
	}

	.sgrd-find__field--wide {
		grid-column: span 1;
	}
}

/* -------------------------------------------------------------------------
 * The search box
 *
 * The service picker is a real listbox rather than a native select, because a
 * native one cannot carry an icon per service or be typed into. It keeps the
 * keyboard behaviour a select would have.
 * ---------------------------------------------------------------------- */

.sgrd-search {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #e2e8f0;
	--sgrd-soft: #f6f8fa;
	--sgrd-radius: 8px;

	/* The sections below the hero carry their own stacking, and were painting
	   over the open panel. This lifts the whole box above them. */
	position: relative;
	z-index: 300;
	box-sizing: border-box;
	display: grid;
	grid-template-columns: 1fr;
	gap: 10px;
	width: 100%;
	max-width: 1040px;
	margin: 0 auto;
	padding: 12px;
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: 0 8px 28px rgba( 18, 38, 63, .16 );
	text-align: left;
}

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

.sgrd-search__field {
	position: relative;
	min-width: 0;
}

.sgrd-search__field > input {
	width: 100%;
	min-height: 52px;
	padding: 12px 14px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font: inherit;
	font-size: 15px;
}

.sgrd-search__field > input::placeholder {
	color: #8494a6;
}

.sgrd-search__field > input:focus,
.sgrd-combo__toggle:focus-visible,
.sgrd-combo__filter:focus {
	border-color: var( --sgrd-accent, #003C78 );
	outline: 2px solid rgba( 0, 60, 120, .18 );
	outline-offset: 1px;
}

.sgrd-search__field--go .sgrd-btn {
	width: 100%;
	min-height: 52px;
	border-radius: 6px;
}

/* ---- the service picker ---- */

.sgrd-combo__toggle {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 52px;
	margin: 0;
	padding: 10px 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font: inherit;
	font-size: 15px;
	text-align: left;
	cursor: pointer;
}

.sgrd-combo__icon {
	display: inline-flex;
	flex: 0 0 auto;
	align-items: center;
	justify-content: center;
	width: 26px;
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-combo__label {
	flex: 1 1 auto;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

.sgrd-combo__caret {
	flex: 0 0 auto;
	display: inline-flex;
	color: var( --sgrd-muted );
	transition: transform .16s ease;
}

.sgrd-search.is-open .sgrd-combo__caret {
	transform: rotate( 180deg );
}

.sgrd-combo__panel {
	position: absolute;
	z-index: 320;
	top: calc( 100% + 6px );
	left: 0;
	width: 100%;
	min-width: 280px;
	max-height: 38vh;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: 0 18px 40px rgba( 18, 38, 63, .22 );
}

.sgrd-combo__panel[hidden] {
	display: none;
}

.sgrd-combo__search {
	flex: 0 0 auto;
	padding: 10px;
	border-bottom: 1px solid var( --sgrd-line );
}

.sgrd-combo__filter {
	width: 100%;
	min-height: 42px;
	padding: 9px 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	font: inherit;
	font-size: 15px;
}

.sgrd-combo__list {
	flex: 1 1 auto;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-combo__group {
	padding: 12px 14px 6px;
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}

.sgrd-combo__group[hidden],
.sgrd-combo__option[hidden] {
	display: none;
}

.sgrd-combo__option {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 12px 14px;
	border-top: 1px solid var( --sgrd-line );
	color: var( --sgrd-ink );
	font-size: 15px;
	line-height: 1.35;
	cursor: pointer;
}

.sgrd-combo__list > .sgrd-combo__option:first-child {
	border-top: 0;
}

.sgrd-combo__group + .sgrd-combo__option {
	border-top: 0;
}

.sgrd-combo__option:hover,
.sgrd-combo__option.is-selected {
	background: var( --sgrd-soft );
}

.sgrd-combo__option.is-selected {
	font-weight: 600;
}

.sgrd-combo__empty {
	margin: 0;
	padding: 18px 14px;
	color: var( --sgrd-muted );
	text-align: center;
}

.sgrd-combo__empty[hidden] {
	display: none;
}

/* ---- place suggestions ---- */

.sgrd-places {
	position: absolute;
	z-index: 320;
	top: calc( 100% + 6px );
	left: 0;
	width: 100%;
	min-width: 260px;
	max-height: 300px;
	overflow-y: auto;
	margin: 0;
	padding: 0;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: 0 18px 40px rgba( 18, 38, 63, .22 );
	list-style: none;
}

.sgrd-places[hidden] {
	display: none;
}

.sgrd-places__item {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	padding: 11px 14px;
	border-top: 1px solid var( --sgrd-line );
	color: var( --sgrd-ink );
	font-size: 15px;
	cursor: pointer;
}

.sgrd-places__item:first-child {
	border-top: 0;
}

.sgrd-places__item:hover {
	background: var( --sgrd-soft );
}

.sgrd-places__tag {
	flex: 0 0 auto;
	padding: 2px 8px;
	border-radius: 5px;
	background: rgba( 0, 60, 120, .1 );
	color: var( --sgrd-accent, #003C78 );
	font-size: 11px;
	font-weight: 700;
	white-space: nowrap;
}

@media ( min-width: 860px ) {

	.sgrd-search {
		grid-template-columns: 1.3fr 1fr 1fr auto;
		align-items: center;
		gap: 8px;
	}

	.sgrd-search__field--go .sgrd-btn {
		min-width: 140px;
	}

	.sgrd-search--hero .sgrd-search__field > input,
	.sgrd-search--hero .sgrd-combo__toggle {
		border-color: transparent;
		border-right: 1px solid var( --sgrd-line );
		border-radius: 0;
	}

	.sgrd-search--hero .sgrd-search__field--loc > input {
		border-right: 0;
	}
}

/* The open panel cannot rise above the sections below it from inside its own
   stacking context, so the section holding the search box is lifted instead.
   Elementor writes its own z-index on that section from the page settings, at a
   specificity this cannot otherwise beat. */
.elementor-section:has( .sgrd-search ),
.elementor-widget:has( .sgrd-search ),
.elementor-column:has( .sgrd-search ) {
	position: relative !important;
	z-index: 300 !important;
}

/* -------------------------------------------------------------------------
 * The shared service picker and place box inside the listings filter bar
 * ---------------------------------------------------------------------- */

.sgrd-find__field.sgrd-combo,
.sgrd-find__field.sgrd-place {
	position: relative;
}

.sgrd-find__filters .sgrd-combo__toggle {
	min-height: 46px;
	border-radius: 6px;
}

.sgrd-find__filters .sgrd-places__input {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font: inherit;
	font-size: 15px;
}

.sgrd-find__filters .sgrd-places__input:focus {
	border-color: var( --sgrd-accent, #003C78 );
	outline: 2px solid rgba( 0, 60, 120, .18 );
	outline-offset: 1px;
}

/* The filter bar sits inside page content, so its panels need to clear the
   cards underneath in the same way the hero one does. */
.sgrd-find__filters {
	position: relative;
	z-index: 60;
}

/* -------------------------------------------------------------------------
 * Browse every service
 *
 * One row per group rather than a card per service, which had grown to eleven
 * thousand pixels of near identical boxes.
 * ---------------------------------------------------------------------- */

.sgrd-dir {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #e2e8f0;
	--sgrd-soft: #f6f8fa;
	--sgrd-radius: 8px;

	display: block;
	box-sizing: border-box;
	width: 100%;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 20px;
	color: var( --sgrd-ink );
}

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

.sgrd-dir__head {
	margin: 0 0 26px;
	text-align: center;
}

.sgrd-dir__title {
	margin: 0 0 10px;
	font-size: 30px;
	line-height: 1.25;
}

.sgrd-dir__intro {
	margin: 0 auto;
	max-width: 60em;
	color: var( --sgrd-muted );
	font-size: 17px;
	line-height: 1.6;
}

.sgrd-dir__jump {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	margin: 0 0 34px;
}

.sgrd-dir__chip {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 8px 14px;
	border: 1px solid var( --sgrd-line );
	border-radius: 6px;
	background: #fff;
	color: var( --sgrd-ink );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sgrd-dir__chip:hover,
.sgrd-dir__chip:focus-visible {
	border-color: var( --sgrd-accent, #003C78 );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-dir__chip span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 22px;
	height: 20px;
	padding: 0 6px;
	border-radius: 5px;
	background: var( --sgrd-soft );
	color: var( --sgrd-muted );
	font-size: 11px;
	font-weight: 700;
}

.sgrd-dir__groups {
	display: grid;
	gap: 20px;
}

.sgrd-dir__group {
	display: grid;
	grid-template-columns: 1fr;
	gap: 18px;
	padding: 18px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	scroll-margin-top: 110px;
}

.sgrd-dir__media {
	overflow: hidden;
	border-radius: 6px;
	background: var( --sgrd-soft );
	aspect-ratio: 10 / 9;
}

.sgrd-dir__img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-dir__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	background: linear-gradient( 135deg, #e8edf3 0%, #dde5ee 100% );
}

.sgrd-dir__name {
	margin: 0 0 8px;
	font-size: 21px;
	line-height: 1.3;
}

.sgrd-dir__name a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-dir__name a:hover,
.sgrd-dir__name a:focus-visible {
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-dir__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 12px;
}

.sgrd-dir__meta span {
	padding: 4px 10px;
	border-radius: 5px;
	background: var( --sgrd-soft );
	color: var( --sgrd-muted );
	font-size: 13px;
	font-weight: 600;
}

.sgrd-dir__desc {
	margin: 0 0 14px;
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.6;
}

.sgrd-dir__services {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
	padding: 0;
	list-style: none;
}

.sgrd-dir__services a {
	display: inline-block;
	padding: 6px 12px;
	border: 0;
	border-radius: 5px;
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
	color: var( --sgrd-ink );
	font-size: 14px;
	text-decoration: none;
}

.sgrd-dir__services a:hover,
.sgrd-dir__services a:focus-visible {
	box-shadow: inset 0 0 0 1px var( --sgrd-accent, #003C78 );
	background: var( --sgrd-soft );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-dir__actions {
	margin: 0;
}

.sgrd-dir__actions .sgrd-btn {
	width: auto;
	border-radius: 6px;
}

@media ( min-width: 780px ) {

	.sgrd-dir__group {
		grid-template-columns: 260px minmax( 0, 1fr );
		align-items: start;
		gap: 24px;
		padding: 22px;
	}

	.sgrd-dir__title {
		font-size: 36px;
	}
}

/* --- results toolbar, list and map views --- */

/*
 * The custom properties are kept off :root on purpose, so nothing here changes
 * the theme's own colours. Every top level block therefore restates them. The
 * toolbar, rows and map sit inside .sgrd-find and the browse page's toolbar
 * inside .sgrd-dir, so those inherit; the archive header and the provider page
 * are containers in their own right and need their own copy.
 */
.sgrd-arch,
.sgrd-biz {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;
	--sgrd-radius: 10px;
	--sgrd-shadow: 0 1px 3px rgba( 18, 38, 63, .08 );

	box-sizing: border-box;
	max-width: 100%;
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.6;
}

.sgrd-arch *,
.sgrd-arch *::before,
.sgrd-arch *::after,
.sgrd-biz *,
.sgrd-biz *::before,
.sgrd-biz *::after {
	box-sizing: inherit;
}

.sgrd-ico {
	flex: none;
	color: var( --sgrd-muted );
}

/* The bar above the results: how many, and how to show them. */
.sgrd-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
	margin: 0 0 20px;
}

.sgrd-bar__count {
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-bar__count strong {
	color: var( --sgrd-ink );
}

.sgrd-bar__clear {
	margin-left: 12px;
	color: var( --sgrd-accent, #003C78 );
	font-size: 14px;
	text-decoration: underline;
}

.sgrd-bar__tools {
	display: flex;
	align-items: center;
	gap: 10px;
}

.sgrd-bar__views {
	display: flex;
	gap: 6px;
}

.sgrd-bar__view {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border: 1px solid transparent;
	border-radius: 9px;
	background: var( --sgrd-bg );
	color: var( --sgrd-muted );
	text-decoration: none;
	transition: background .15s ease, color .15s ease;
}

.sgrd-bar__view:hover,
.sgrd-bar__view:focus-visible {
	border-color: var( --sgrd-line );
	background: #eef1f5;
	color: var( --sgrd-ink );
}

.sgrd-bar__view.is-on {
	background: #14181f;
	color: #fff;
}

.sgrd-bar__sort {
	margin: 0;
}

.sgrd-bar__sort select {
	height: 42px;
	min-width: 172px;
	padding: 0 38px 0 16px;
	border: 1px solid transparent;
	border-radius: 9px;
	background-color: var( --sgrd-bg );
	background-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%235b6b7f' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 8 5 5 5-5'/%3E%3C/svg%3E" );
	background-repeat: no-repeat;
	background-position: right 12px center;
	background-size: 18px 18px;
	appearance: none;
	color: var( --sgrd-ink );
	font-size: 15px;
	cursor: pointer;
}

.sgrd-bar__sort select:focus-visible {
	border-color: var( --sgrd-accent, #003C78 );
	outline: none;
}

.sgrd-bar__go {
	margin-left: 8px;
	padding: 10px 16px;
	border: 0;
	border-radius: 8px;
	background: var( --sgrd-accent, #003C78 );
	color: #fff;
	cursor: pointer;
}

/* --- the list view --- */

.sgrd-rows {
	display: grid;
	gap: 16px;
}

.sgrd-row {
	display: grid;
	grid-template-columns: minmax( 0, 1fr );
	gap: 0;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-row__media {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var( --sgrd-bg );
}

.sgrd-row__img,
.sgrd-row__placeholder {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-row__placeholder {
	background: linear-gradient( 135deg, #e9edf2, #f6f8fa );
}

.sgrd-row__flag,
.sgrd-biz__featured {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 999px;
	background: #14181f;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
}

.sgrd-biz__featured {
	position: static;
}

.sgrd-row__body {
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 18px 20px;
}

.sgrd-row__title {
	margin: 0;
	font-size: 20px;
	line-height: 1.3;
}

.sgrd-row__title a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-row__title a:hover,
.sgrd-row__title a:focus-visible {
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-row__text {
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.55;
}

.sgrd-row__facts {
	display: grid;
	gap: 6px;
	margin: 2px 0 0;
	padding: 0;
	list-style: none;
}

.sgrd-row__facts li {
	display: flex;
	align-items: flex-start;
	gap: 8px;
	color: var( --sgrd-muted );
	font-size: 14px;
	line-height: 1.5;
}

.sgrd-row__facts a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-row__facts a:hover,
.sgrd-row__facts a:focus-visible {
	text-decoration: underline;
}

.sgrd-row__side {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 0 20px 20px;
}

.sgrd-row__price {
	display: flex;
	align-items: baseline;
	gap: 6px;
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-row__price strong {
	color: var( --sgrd-ink );
	font-size: 22px;
}

.sgrd-row__side .sgrd-btn {
	justify-content: center;
	width: 100%;
	border-radius: 8px;
	/* Two words on two lines made every row a different height. */
	white-space: nowrap;
	font-size: 15px;
}

/* --- the map view --- */

.sgrd-map {
	display: grid;
	gap: 16px;
	align-items: start;
}

.sgrd-map__canvas {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 420px;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
}

.sgrd-map__loading {
	margin: 0;
	padding: 20px;
	color: var( --sgrd-muted );
	text-align: center;
}

.sgrd-map__note {
	margin: 0 0 10px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-map__list {
	display: grid;
	gap: 8px;
	max-height: 420px;
	margin: 0;
	padding: 0;
	overflow-y: auto;
	list-style: none;
}

.sgrd-map__list li {
	display: flex;
	align-items: stretch;
	gap: 0;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: 9px;
	background: #fff;
}

.sgrd-map__item {
	display: flex;
	flex: 1 1 auto;
	gap: 12px;
	align-items: center;
	min-width: 0;
	padding: 10px;
	border: 0;
	background: none;
	font: inherit;
	text-align: left;
	cursor: pointer;
}

.sgrd-map__item:hover,
.sgrd-map__item:focus-visible {
	background: var( --sgrd-bg );
}

.sgrd-map__item img,
.sgrd-map__blank {
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 7px;
	object-fit: cover;
	background: linear-gradient( 135deg, #e9edf2, #f6f8fa );
}

.sgrd-map__text {
	display: grid;
	gap: 2px;
	min-width: 0;
}

.sgrd-map__text strong {
	overflow: hidden;
	color: var( --sgrd-ink );
	font-size: 15px;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sgrd-map__text span {
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-map__text em {
	color: var( --sgrd-accent, #003C78 );
	font-size: 13px;
	font-style: normal;
	font-weight: 600;
}

.sgrd-map__open {
	display: flex;
	flex: none;
	align-items: center;
	padding: 0 14px;
	box-shadow: inset 1px 0 0 var( --sgrd-line );
	color: var( --sgrd-accent, #003C78 );
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
}

.sgrd-map__open:hover,
.sgrd-map__open:focus-visible {
	background: var( --sgrd-bg );
}

/* Pins are drawn rather than loaded, so the map needs no image files. */
.sgrd-pin__dot {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 22px;
	border: 2px solid #fff;
	border-radius: 999px;
	background: var( --sgrd-accent, #003C78 );
	box-shadow: 0 1px 5px rgba( 0, 0, 0, .35 );
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	white-space: nowrap;
}

.sgrd-pop {
	display: flex;
	gap: 10px;
	align-items: center;
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-pop img {
	width: 56px;
	height: 56px;
	border-radius: 6px;
	object-fit: cover;
}

.sgrd-pop span {
	display: grid;
	gap: 2px;
}

.sgrd-pop span span {
	color: var( --sgrd-muted );
	font-size: 12px;
}

.sgrd-minimap {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 320px;
	overflow: hidden;
	border: 1px solid var( --sgrd-line );
	border-radius: 9px;
	background: var( --sgrd-bg );
}

/* Leaflet draws its own stacking context; keep it under our dropdowns. */
.sgrd-map__canvas,
.sgrd-minimap {
	position: relative;
	z-index: 1;
}

/* --- category and location archives --- */

.sgrd-archive {
	display: block;
}

.sgrd-arch {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px 20px 60px;
}

.sgrd-arch__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 16px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-arch__crumbs a {
	color: var( --sgrd-muted );
	text-decoration: none;
}

.sgrd-arch__crumbs a:hover,
.sgrd-arch__crumbs a:focus-visible {
	color: var( --sgrd-accent, #003C78 );
	text-decoration: underline;
}

.sgrd-arch__crumbs [aria-current] {
	color: var( --sgrd-ink );
}

.sgrd-arch__head {
	margin: 0 0 26px;
}

.sgrd-arch__kicker {
	margin: 0 0 6px;
	color: var( --sgrd-accent, #003C78 );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sgrd-arch__title {
	margin: 0 0 10px;
	color: var( --sgrd-ink );
	font-size: 34px;
	line-height: 1.15;
}

.sgrd-arch__intro {
	max-width: 70ch;
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 16px;
	line-height: 1.6;
}

.sgrd-arch__kids {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.sgrd-arch__kids a {
	display: inline-flex;
	gap: 7px;
	align-items: center;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
	background: #fff;
	color: var( --sgrd-ink );
	font-size: 14px;
	text-decoration: none;
}

.sgrd-arch__kids a:hover,
.sgrd-arch__kids a:focus-visible {
	box-shadow: inset 0 0 0 1px var( --sgrd-accent, #003C78 );
	background: var( --sgrd-bg );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-arch__kids span {
	color: var( --sgrd-muted );
	font-size: 12px;
	font-variant-numeric: tabular-nums;
}

/* --- one provider's page --- */

.sgrd-biz {
	max-width: 1200px;
	margin: 0 auto;
	padding: 34px 20px 60px;
}

.sgrd-biz__head {
	margin: 0 0 24px;
}

.sgrd-biz__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 10px;
}

.sgrd-biz__title {
	margin: 0 0 12px;
	color: var( --sgrd-ink );
	font-size: 36px;
	line-height: 1.12;
}

.sgrd-biz__facts {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 22px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-biz__facts li {
	display: flex;
	align-items: center;
	gap: 8px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-biz__facts a {
	color: var( --sgrd-ink );
	font-weight: 600;
	text-decoration: none;
}

.sgrd-biz__facts a:hover,
.sgrd-biz__facts a:focus-visible {
	text-decoration: underline;
}

.sgrd-biz__layout {
	display: grid;
	gap: 24px;
	align-items: start;
}

.sgrd-biz__main {
	display: grid;
	gap: 20px;
	min-width: 0;
}

.sgrd-biz__gallery {
	display: grid;
	gap: 10px;
}

.sgrd-biz__shot {
	overflow: hidden;
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
}

.sgrd-biz__shotimg {
	display: block;
	width: 100%;
	max-height: 460px;
	object-fit: cover;
}

.sgrd-biz__thumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-biz__thumb {
	display: block;
	width: 84px;
	height: 64px;
	padding: 0;
	overflow: hidden;
	border: 2px solid transparent;
	border-radius: 7px;
	background: none;
	cursor: pointer;
}

.sgrd-biz__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-biz__thumb.is-on,
.sgrd-biz__thumb:hover,
.sgrd-biz__thumb:focus-visible {
	border-color: var( --sgrd-accent, #003C78 );
}

.sgrd-biz__panel {
	padding: 22px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
}

.sgrd-biz__panel > h2 {
	margin: 0 0 12px;
	color: var( --sgrd-ink );
	font-size: 21px;
}

.sgrd-biz__prose {
	color: var( --sgrd-muted );
	font-size: 16px;
	line-height: 1.7;
}

.sgrd-biz__prose > :first-child {
	margin-top: 0;
}

.sgrd-biz__prose > :last-child {
	margin-bottom: 0;
}

.sgrd-biz__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-biz__chips a {
	display: inline-block;
	padding: 7px 13px;
	border: 0;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
	color: var( --sgrd-ink );
	font-size: 14px;
	text-decoration: none;
}

.sgrd-biz__chips a:hover,
.sgrd-biz__chips a:focus-visible {
	box-shadow: inset 0 0 0 1px var( --sgrd-accent, #003C78 );
	background: var( --sgrd-bg );
	color: var( --sgrd-accent, #003C78 );
}

.sgrd-biz__where {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	align-items: center;
	justify-content: space-between;
	margin: 12px 0 0;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-biz__where > span {
	display: inline-flex;
	gap: 8px;
	align-items: center;
}

.sgrd-biz__where a {
	color: var( --sgrd-accent, #003C78 );
	font-weight: 600;
	text-decoration: none;
}

.sgrd-biz__where a:hover,
.sgrd-biz__where a:focus-visible {
	text-decoration: underline;
}

.sgrd-biz__side {
	min-width: 0;
}

.sgrd-biz__card {
	display: grid;
	gap: 10px;
	padding: 22px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: var( --sgrd-shadow );
}

.sgrd-biz__price {
	display: flex;
	flex-direction: column;
	gap: 2px;
	margin: 0 0 4px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-biz__price strong {
	color: var( --sgrd-ink );
	font-size: 30px;
	line-height: 1.1;
}

.sgrd-biz__cta {
	display: inline-flex;
	gap: 8px;
	align-items: center;
	justify-content: center;
	width: 100%;
	border-radius: 8px;
}

.sgrd-biz__cta .sgrd-ico {
	color: inherit;
}

.sgrd-biz__meta {
	display: grid;
	gap: 12px;
	margin: 8px 0 0;
	padding: 16px 0 0;
	border-top: 1px solid var( --sgrd-line );
}

.sgrd-biz__meta dt {
	color: var( --sgrd-muted );
	font-size: 13px;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sgrd-biz__meta dd {
	margin: 3px 0 0;
	color: var( --sgrd-ink );
	font-size: 15px;
}

.sgrd-biz__small {
	margin: 4px 0 0;
	color: var( --sgrd-muted );
	font-size: 13px;
	line-height: 1.5;
}

.sgrd-biz__similar {
	margin: 40px 0 0;
	padding: 30px 0 0;
	border-top: 1px solid var( --sgrd-line );
}

.sgrd-biz__similar > h2 {
	margin: 0 0 18px;
	color: var( --sgrd-ink );
	font-size: 24px;
}

.sgrd-biz__all {
	margin: 18px 0 0;
	text-align: center;
}

.sgrd-biz__all .sgrd-btn {
	width: auto;
	border-radius: 8px;
}

/* The quote form sits inside the column here rather than across the page. */
.sgrd-biz__main .sgrd-quote {
	margin: 0;
	padding: 0;
	background: none;
}

.sgrd-biz__main .sgrd-quote__inner {
	max-width: none;
	padding: 22px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
}

/* --- browse services, compact grid --- */

.sgrd-dir__groups--grid {
	display: grid;
	gap: 16px;
	grid-template-columns: repeat( auto-fill, minmax( 250px, 1fr ) );
}

.sgrd-dir__groups--grid .sgrd-dir__group {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding: 0;
	overflow: hidden;
}

.sgrd-dir__groups--grid .sgrd-dir__media {
	aspect-ratio: 16 / 10;
}

.sgrd-dir__groups--grid .sgrd-dir__img,
.sgrd-dir__groups--grid .sgrd-dir__placeholder {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-dir__groups--grid .sgrd-dir__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: 8px;
	padding: 16px 18px 18px;
}

.sgrd-dir__groups--grid .sgrd-dir__actions {
	margin-top: auto;
}

.sgrd-dir__groups--grid .sgrd-dir__actions .sgrd-btn {
	width: 100%;
	justify-content: center;
}

@media ( min-width: 700px ) {

	.sgrd-row {
		grid-template-columns: 260px minmax( 0, 1fr ) 244px;
	}

	.sgrd-row__media {
		aspect-ratio: auto;
		height: 100%;
	}

	.sgrd-row__side {
		justify-content: center;
		padding: 18px 20px;
		border-left: 1px solid var( --sgrd-line );
	}
}

/*
 * Stacked on a phone the contact card would land under the quote form, at the
 * very bottom of a long page. Somebody who wants to ring rather than type
 * should not have to scroll past everything to find the number.
 */
@media ( max-width: 899px ) {

	.sgrd-biz__side {
		order: -1;
	}
}

@media ( min-width: 900px ) {

	.sgrd-map {
		grid-template-columns: minmax( 0, 1.6fr ) minmax( 300px, 1fr );
	}

	.sgrd-map__canvas {
		height: 560px;
	}

	.sgrd-map__list {
		max-height: 560px;
	}

	.sgrd-biz__layout {
		grid-template-columns: minmax( 0, 1fr ) 340px;
		gap: 30px;
	}

	.sgrd-biz__side {
		/*
		 * A grid item stretches to the height of its row by default, which
		 * leaves nothing for sticky to do: the box is already as tall as the
		 * thing it would follow.
		 */
		align-self: start;
		position: sticky;
		/* Clear of the theme's sticky header, which is about 105px tall. */
		top: 120px;
	}

	.sgrd-arch__title {
		font-size: 40px;
	}
}

/* --- archive banner --- */

/*
 * Replacing the theme's archive template took its banner with it, which was no
 * loss in itself: it showed one stock photograph and the words "Single
 * Category" whatever you were looking at. This is the same band with the right
 * picture and the right words in it.
 */
.sgrd-hero {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;

	position: relative;
	box-sizing: border-box;
	padding: 44px 20px 40px;
	overflow: hidden;
	background: var( --sgrd-bg );
}

.sgrd-hero * {
	box-sizing: border-box;
}

.sgrd-hero__media {
	position: absolute;
	inset: 0;
	z-index: 0;
}

.sgrd-hero__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*
 * A photograph chosen for a card is not chosen for legibility behind text, so
 * the band is darkened rather than trusting whatever happens to be underneath.
 */
.sgrd-hero--shot::after {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 100deg, rgba( 6, 22, 42, .88 ) 0%, rgba( 6, 22, 42, .74 ) 45%, rgba( 6, 22, 42, .42 ) 100% );
	content: "";
}

.sgrd-hero__inner {
	position: relative;
	z-index: 2;
	max-width: 1200px;
	margin: 0 auto;
}

.sgrd-hero__crumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 14px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-hero__crumbs a {
	color: var( --sgrd-muted );
	text-decoration: none;
}

.sgrd-hero__crumbs a:hover,
.sgrd-hero__crumbs a:focus-visible {
	text-decoration: underline;
}

.sgrd-hero__kicker {
	margin: 0 0 6px;
	color: var( --sgrd-accent, #003c78 );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
}

.sgrd-hero__title {
	margin: 0 0 12px;
	color: var( --sgrd-ink );
	font-size: 34px;
	line-height: 1.12;
}

.sgrd-hero__intro {
	max-width: 62ch;
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 17px;
	line-height: 1.6;
}

/* Over a photograph the whole band reads light on dark. */
.sgrd-hero--shot .sgrd-hero__title {
	color: #fff;
}

.sgrd-hero--shot .sgrd-hero__intro,
.sgrd-hero--shot .sgrd-hero__crumbs,
.sgrd-hero--shot .sgrd-hero__crumbs a {
	color: rgba( 255, 255, 255, .86 );
}

.sgrd-hero--shot .sgrd-hero__crumbs [aria-current] {
	color: #fff;
}

.sgrd-hero--shot .sgrd-hero__kicker {
	color: #9ec5f0;
}

/* The page below no longer needs its own heading block. */
.sgrd-arch__head:empty {
	display: none;
}

/*
 * Links in the theme's own content hovered to red, which is not a brand colour
 * here. Buttons are left alone: they set their own text colour against a filled
 * background, and would be unreadable if this won.
 */
a:not( .sgrd-btn ):not( .elementor-button ):not( .button ):hover {
	color: var( --e-global-color-primary, #003c78 );
}

@media ( min-width: 700px ) {

	.sgrd-hero {
		padding: 62px 20px 58px;
	}

	.sgrd-hero__title {
		font-size: 44px;
	}
}

@media ( min-width: 1024px ) {

	.sgrd-hero {
		padding: 78px 20px 72px;
	}

	.sgrd-hero__title {
		font-size: 52px;
	}
}

/* --- provider profile --- */

.sgrd-pro {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;
	--sgrd-radius: 10px;
	--sgrd-shadow: 0 1px 3px rgba( 18, 38, 63, .08 );

	box-sizing: border-box;
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.6;
}

.sgrd-pro *,
.sgrd-pro *::before,
.sgrd-pro *::after {
	box-sizing: inherit;
}

.sgrd-pro__body {
	max-width: 1200px;
	margin: 0 auto;
	padding: 30px 20px 60px;
}

.sgrd-pro__ident {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: center;
}

.sgrd-pro__avatar {
	display: block;
	flex: none;
	width: 96px;
	height: 96px;
	overflow: hidden;
	border: 3px solid #fff;
	border-radius: 50%;
	box-shadow: 0 2px 10px rgba( 6, 22, 42, .28 );
	background: var( --sgrd-bg );
}

.sgrd-pro__avatar img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-pro__trade {
	margin: 4px 0 0;
	color: var( --sgrd-muted );
	font-size: 16px;
}

.sgrd-hero--shot .sgrd-pro__trade {
	color: rgba( 255, 255, 255, .88 );
}

.sgrd-pro__hero .sgrd-hero__title {
	margin-bottom: 0;
}

.sgrd-pro__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}

.sgrd-pro__stats li {
	display: flex;
	flex-direction: column;
	gap: 1px;
	min-width: 110px;
	padding: 10px 16px;
	border-radius: 9px;
	background: rgba( 255, 255, 255, .9 );
}

.sgrd-hero--shot .sgrd-pro__stats li {
	background: rgba( 255, 255, 255, .13 );
}

.sgrd-pro__stats strong {
	color: var( --sgrd-ink );
	font-size: 21px;
	line-height: 1.2;
}

.sgrd-pro__stats span {
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-hero--shot .sgrd-pro__stats strong {
	color: #fff;
}

.sgrd-hero--shot .sgrd-pro__stats span {
	color: rgba( 255, 255, 255, .82 );
}

.sgrd-pro__cardtitle {
	margin: 0 0 4px;
	color: var( --sgrd-ink );
	font-size: 18px;
	font-weight: 700;
}

.sgrd-pro__gallery {
	display: grid;
	gap: 10px;
	grid-template-columns: repeat( auto-fill, minmax( 150px, 1fr ) );
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-pro__gallery li {
	overflow: hidden;
	border-radius: 8px;
	background: var( --sgrd-bg );
}

.sgrd-pro__gallery img {
	display: block;
	width: 100%;
	height: 150px;
	object-fit: cover;
}

/* --- the provider block on a listing --- */

.sgrd-owner {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
	align-items: flex-start;
}

.sgrd-owner__face {
	display: block;
	flex: none;
	width: 72px;
	height: 72px;
	overflow: hidden;
	border-radius: 50%;
	background: var( --sgrd-bg );
}

.sgrd-owner__face img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-owner__body {
	flex: 1 1 240px;
	min-width: 0;
}

.sgrd-owner__body h3 {
	margin: 0 0 2px;
	font-size: 19px;
}

.sgrd-owner__body h3 a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-owner__body h3 a:hover,
.sgrd-owner__body h3 a:focus-visible {
	color: var( --sgrd-accent, #003c78 );
}

.sgrd-owner__meta {
	margin: 0 0 8px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-owner__text {
	margin: 0 0 12px;
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.6;
}

.sgrd-owner__go {
	margin: 0;
}

.sgrd-owner__go .sgrd-btn {
	width: auto;
	border-radius: 8px;
}

/* --- picture upload on the dashboard --- */

.sgrd-upload__shot {
	display: block;
	margin: 0 0 8px;
}

.sgrd-upload__shot img {
	display: block;
	width: 96px;
	height: 96px;
	border-radius: 8px;
	object-fit: cover;
}

.sgrd-upload__drop {
	display: flex;
	gap: 8px;
	align-items: center;
	margin: 8px 0 0;
	font-size: 14px;
}

.sgrd-upload__drop input {
	width: auto;
	margin: 0;
}

.sgrd-pro__listings .sgrd-lst__grid {
	display: grid;
	gap: 16px;
	grid-template-columns: minmax( 0, 1fr );
}

@media ( min-width: 700px ) {

	.sgrd-pro__avatar {
		width: 116px;
		height: 116px;
	}
}

@media ( min-width: 560px ) {

	.sgrd-pro__listings .sgrd-lst__grid {
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	}
}

/* --- account status and profile progress --- */

.sgrd-note {
	margin: 0 0 18px;
	padding: 14px 18px;
	border-left: 4px solid #b0871f;
	border-radius: 8px;
	background: #fdf6e3;
	color: #5c4708;
	font-size: 15px;
	line-height: 1.6;
}

.sgrd-note--stop {
	border-left-color: #b32d2e;
	background: #fdeceb;
	color: #6d1b1c;
}

.sgrd-progress__lede {
	margin: 0 0 14px;
	color: var( --sgrd-muted );
}

.sgrd-progress__bar {
	height: 10px;
	overflow: hidden;
	border-radius: 999px;
	background: var( --sgrd-bg );
}

.sgrd-progress__bar span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: var( --sgrd-accent, #003c78 );
	transition: width .3s ease;
}

.sgrd-progress__count {
	margin: 8px 0 12px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-progress__list {
	margin: 0 0 16px;
	padding: 0 0 0 20px;
	color: var( --sgrd-ink );
	font-size: 15px;
}

.sgrd-progress__list li {
	margin-bottom: 4px;
}

.sgrd-progress__go {
	margin: 0;
}

.sgrd-progress__go .sgrd-btn {
	width: auto;
	border-radius: 8px;
}

/* --- credentials --- */

.sgrd-creds__level {
	margin: 0 0 14px;
}

.sgrd-creds__badge {
	display: inline-block;
	padding: 5px 12px;
	border-radius: 999px;
	background: var( --sgrd-bg );
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
	color: var( --sgrd-muted );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .02em;
}

.sgrd-creds__badge.is-high {
	background: #e8f4ec;
	box-shadow: inset 0 0 0 1px #b4dcc3;
	color: #1c6b39;
}

.sgrd-creds__list {
	display: grid;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-creds__list li {
	display: flex;
	gap: 10px;
	align-items: flex-start;
}

.sgrd-creds__tick {
	display: flex;
	flex: none;
	margin-top: 2px;
	color: var( --sgrd-muted );
}

.sgrd-creds__list li.is-verified .sgrd-creds__tick {
	color: #1c6b39;
}

.sgrd-creds__body {
	display: grid;
	gap: 1px;
	min-width: 0;
}

.sgrd-creds__body strong {
	color: var( --sgrd-ink );
	font-size: 16px;
}

.sgrd-creds__body em {
	color: var( --sgrd-muted );
	font-size: 13px;
	font-style: normal;
}

.sgrd-creds__list li.is-verified .sgrd-creds__body em {
	color: #1c6b39;
	font-weight: 600;
}

.sgrd-creds__body span {
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-creds__note {
	margin: 16px 0 0;
	padding-top: 14px;
	border-top: 1px solid var( --sgrd-line );
	color: var( --sgrd-muted );
	font-size: 13px;
	line-height: 1.55;
}

.sgrd-creds--compact .sgrd-creds__list {
	grid-template-columns: repeat( auto-fit, minmax( 210px, 1fr ) );
}

/* the contractor's own form */

.sgrd-field__private {
	margin-left: 6px;
	padding: 2px 7px;
	border-radius: 999px;
	background: var( --sgrd-bg );
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 400;
}

.sgrd-field--check label {
	display: flex;
	gap: 9px;
	align-items: flex-start;
	font-weight: 400;
}

.sgrd-field--check input {
	width: auto;
	margin: 3px 0 0;
}

.sgrd-hint--warn {
	color: #b32d2e;
	font-weight: 600;
}

/* --- reviews --- */

.sgrd-stars {
	position: relative;
	display: inline-block;
	color: #d8dee6;
	font-size: 17px;
	letter-spacing: 2px;
	line-height: 1;
	white-space: nowrap;
}

.sgrd-stars__on {
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
	color: #e8a33d;
}

.sgrd-stars__num {
	margin-left: 7px;
	color: var( --sgrd-ink );
	font-size: 15px;
	font-weight: 700;
}

.sgrd-lst__rated,
.sgrd-biz__rated {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin: 0 0 6px;
	font-size: 14px;
}

.sgrd-lst__rated span {
	color: var( --sgrd-muted );
}

.sgrd-biz__rated {
	margin: 0 0 12px;
}

.sgrd-biz__rated a {
	color: var( --sgrd-accent, #003c78 );
	text-decoration: underline;
}

.sgrd-pro__rated strong {
	color: #e8a33d;
}

.sgrd-hero--shot .sgrd-pro__rated strong {
	color: #f4c274;
}

/* the summary block */

.sgrd-rev__head {
	display: grid;
	gap: 20px;
	align-items: center;
	margin: 0 0 22px;
	padding: 18px;
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
}

.sgrd-rev__score {
	display: grid;
	gap: 4px;
	justify-items: center;
	text-align: center;
}

.sgrd-rev__score strong {
	color: var( --sgrd-ink );
	font-size: 40px;
	line-height: 1;
}

.sgrd-rev__score span {
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-rev__spread {
	display: grid;
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-rev__spread li {
	display: grid;
	gap: 9px;
	align-items: center;
	grid-template-columns: 14px minmax( 0, 1fr ) 28px;
}

.sgrd-rev__n,
.sgrd-rev__many {
	color: var( --sgrd-muted );
	font-size: 13px;
	font-variant-numeric: tabular-nums;
}

.sgrd-rev__many {
	text-align: right;
}

.sgrd-rev__track {
	height: 8px;
	overflow: hidden;
	border-radius: 999px;
	background: #e4e9ef;
}

.sgrd-rev__track span {
	display: block;
	height: 100%;
	border-radius: 999px;
	background: #e8a33d;
}

/* the list */

.sgrd-rev__list {
	display: grid;
	gap: 22px;
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.sgrd-rev__item {
	display: flex;
	gap: 14px;
	align-items: flex-start;
}

.sgrd-av {
	display: flex;
	flex: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	overflow: hidden;
	border-radius: 50%;
	background: var( --sgrd-bg );
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: .5px;
}

.sgrd-av {
	position: relative;
}

.sgrd-av img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-av.is-blank {
	background: linear-gradient( 135deg, #e9edf2, #f6f8fa );
}

.sgrd-rev__body {
	flex: 1 1 auto;
	min-width: 0;
}

.sgrd-rev__who {
	display: flex;
	flex-wrap: wrap;
	gap: 5px 10px;
	align-items: center;
	margin: 0 0 4px;
	font-size: 15px;
}

.sgrd-rev__who strong {
	color: var( --sgrd-ink );
}

.sgrd-rev__who time {
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-rev__flag {
	padding: 2px 9px;
	border-radius: 999px;
	background: #e8f4ec;
	color: #1c6b39;
	font-size: 12px;
	font-weight: 600;
}

.sgrd-rev__rating {
	margin: 0 0 6px;
}

.sgrd-rev__title {
	margin: 0 0 5px;
	color: var( --sgrd-ink );
	font-size: 17px;
}

.sgrd-rev__text {
	color: var( --sgrd-muted );
	font-size: 15px;
	line-height: 1.65;
}

.sgrd-rev__text > :first-child { margin-top: 0; }
.sgrd-rev__text > :last-child { margin-bottom: 0; }

.sgrd-rev__on {
	margin: 8px 0 0;
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-rev__reply {
	margin: 12px 0 0;
	padding: 12px 14px;
	border-left: 3px solid var( --sgrd-accent, #003c78 );
	border-radius: 0 8px 8px 0;
	background: var( --sgrd-bg );
}

.sgrd-rev__replyhead {
	margin: 0 0 4px;
	color: var( --sgrd-ink );
	font-size: 13px;
	font-weight: 700;
}

.sgrd-rev__reply div {
	color: var( --sgrd-muted );
	font-size: 14px;
	line-height: 1.6;
}

.sgrd-rev__none {
	margin: 0 0 22px;
	color: var( --sgrd-muted );
}

.sgrd-rev__mine {
	margin: 0 0 16px;
	color: var( --sgrd-muted );
}

/* the form */

.sgrd-rev__write {
	margin: 6px 0 0;
	padding: 20px;
	border: 1px solid var( --sgrd-line );
	border-radius: var( --sgrd-radius );
	background: #fff;
}

.sgrd-rev__write > h3 {
	margin: 0 0 14px;
	color: var( --sgrd-ink );
	font-size: 19px;
}

.sgrd-rate {
	margin: 0 0 16px;
	padding: 0;
	border: 0;
}

.sgrd-rate legend {
	margin: 0 0 6px;
	padding: 0;
	color: var( --sgrd-ink );
	font-size: 15px;
	font-weight: 600;
}

/* Laid out in reverse so the sibling selector can light up the stars to the
   left of the one being pointed at. */
.sgrd-rate__set {
	display: inline-flex;
	flex-direction: row-reverse;
	justify-content: flex-end;
}

.sgrd-rate__set input {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect( 0 0 0 0 );
	white-space: nowrap;
}

.sgrd-rate__set label {
	padding: 0 3px;
	color: #d8dee6;
	font-size: 30px;
	line-height: 1.1;
	cursor: pointer;
	transition: color .12s ease;
}

.sgrd-rate__set label:hover,
.sgrd-rate__set label:hover ~ label,
.sgrd-rate__set input:checked ~ label {
	color: #e8a33d;
}

.sgrd-rate__set input:focus-visible + label {
	outline: 2px solid var( --sgrd-accent, #003c78 );
	outline-offset: 2px;
}

/* The honeypot is for robots, so it is taken out of the flow entirely rather
   than merely hidden, which some of them check for. */
.sgrd-hp {
	position: absolute !important;
	left: -9999px !important;
	width: 1px !important;
	height: 1px !important;
	overflow: hidden !important;
}

.sgrd-rev__signin {
	margin: 0;
}

.sgrd-rev__signin .sgrd-btn {
	width: auto;
	border-radius: 8px;
}

.sgrd-rev__replyform {
	margin: 12px 0 0;
	padding: 12px 0 0;
	border-top: 1px dashed var( --sgrd-line );
}

.sgrd-rev__replyform .sgrd-btn {
	width: auto;
	border-radius: 8px;
}

@media ( min-width: 620px ) {

	.sgrd-rev__head {
		grid-template-columns: 170px minmax( 0, 1fr );
	}
}

/* -------------------------------------------------------------------------
 * A banner on the listing page
 *
 * Every other page on the site opens with one, and the listing page opening
 * with a bare heading on white was the thing that made it look unfinished
 * beside them. The picture behind it is the listing's own, dimmed by the
 * shared .sgrd-hero--shot rule so white text clears contrast whatever was
 * uploaded.
 *
 * Colour is restated on every descendant rather than left to inherit. This
 * palette is written light first, so a plain descendant rule further up the
 * sheet beats an inherited white and the text quietly goes dark on dark.
 * ---------------------------------------------------------------------- */

.sgrd-biz__hero {
	--sgrd-accent: #003c78;

	padding: 40px 20px 36px;
}

.sgrd-biz__hero .sgrd-biz__flags {
	margin: 0 0 12px;
}

.sgrd-biz__hero .sgrd-hero__title {
	max-width: 20ch;
	font-size: 38px;
}

.sgrd-biz__tagline {
	max-width: 62ch;
	margin: 0 0 16px;
	color: var( --sgrd-muted );
	font-size: 17px;
}

.sgrd-biz__hero .sgrd-biz__facts {
	gap: 10px 26px;
	margin: 0 0 22px;
}

.sgrd-biz__vetted {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 11px;
	border-radius: 999px;
	background: #e8f4ec;
	color: #1c6b39;
	font-size: 12px;
	font-weight: 700;
}

.sgrd-biz__vetted svg {
	width: 14px;
	height: 14px;
}

.sgrd-biz__actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.sgrd-biz__actions .sgrd-btn {
	min-height: 46px;
	gap: 8px;
}

.sgrd-btn--onshot {
	background: #fff;
	border-color: var( --sgrd-line );
	color: var( --sgrd-ink );
}

.sgrd-btn--onshot:hover,
.sgrd-btn--onshot:focus {
	border-color: var( --sgrd-accent, #003c78 );
	color: var( --sgrd-accent, #003c78 );
}

/* Over a photograph. */

.sgrd-hero--shot .sgrd-biz__tagline {
	color: rgba( 255, 255, 255, .9 );
}

.sgrd-hero--shot .sgrd-biz__facts li,
.sgrd-hero--shot .sgrd-biz__facts li span,
.sgrd-hero--shot .sgrd-biz__facts a {
	color: rgba( 255, 255, 255, .92 );
}

.sgrd-hero--shot .sgrd-biz__facts a {
	color: #fff;
	text-decoration: underline;
}

.sgrd-hero--shot .sgrd-biz__facts svg {
	color: rgba( 255, 255, 255, .78 );
}

.sgrd-hero--shot .sgrd-lst__tag {
	border-color: rgba( 255, 255, 255, .34 );
	background: rgba( 255, 255, 255, .14 );
	color: #fff;
}

.sgrd-hero--shot .sgrd-btn--onshot {
	background: rgba( 255, 255, 255, .12 );
	border-color: rgba( 255, 255, 255, .5 );
	color: #fff;
}

.sgrd-hero--shot .sgrd-btn--onshot:hover,
.sgrd-hero--shot .sgrd-btn--onshot:focus {
	background: #fff;
	border-color: #fff;
	color: #0b2545;
}

/*
 * The stars sit inside .sgrd-biz__facts li, so the plain "colour every span
 * white" rule above matches them with more specificity than a bare
 * .sgrd-stars would. The list is named here so the amber survives.
 */
.sgrd-hero--shot .sgrd-biz__facts .sgrd-stars,
.sgrd-hero--shot .sgrd-stars {
	color: rgba( 255, 255, 255, .34 );
}

.sgrd-hero--shot .sgrd-biz__facts .sgrd-stars__on,
.sgrd-hero--shot .sgrd-stars__on {
	color: #f4c274;
}

.sgrd-hero--shot .sgrd-stars__num,
.sgrd-hero--shot .sgrd-biz__rated a {
	color: #fff;
}

/* -------------------------------------------------------------------------
 * The strip under the banner
 * ---------------------------------------------------------------------- */

.sgrd-biz__marks {
	display: grid;
	gap: 12px;
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
	margin: 0 0 26px;
	padding: 0;
	list-style: none;
}

.sgrd-biz__marks li {
	display: flex;
	gap: 12px;
	align-items: center;
	padding: 14px 16px;
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
}

.sgrd-biz__marks svg {
	flex: none;
	width: 22px;
	height: 22px;
	color: var( --sgrd-accent, #003c78 );
}

.sgrd-biz__marks span {
	display: grid;
	min-width: 0;
}

.sgrd-biz__marks strong {
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.25;
}

.sgrd-biz__marks small {
	color: var( --sgrd-muted );
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * The detail panels
 * ---------------------------------------------------------------------- */

.sgrd-detail__flags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 18px;
	margin: 0 0 16px;
	padding: 0;
	list-style: none;
}

.sgrd-detail__flags li {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var( --sgrd-ink );
	font-size: 15px;
	font-weight: 600;
}

.sgrd-detail__flags svg {
	flex: none;
	width: 17px;
	height: 17px;
	color: #1c6b39;
}

.sgrd-detail__rows {
	display: grid;
	gap: 0;
	margin: 0 0 18px;
}

.sgrd-detail__rows > div {
	display: grid;
	gap: 4px 22px;
	padding: 11px 0;
	border-top: 1px solid var( --sgrd-line );
	grid-template-columns: minmax( 150px, 34% ) minmax( 0, 1fr );
}

.sgrd-detail__rows > div:first-child {
	border-top: 0;
	padding-top: 0;
}

.sgrd-detail__rows dt {
	margin: 0;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-detail__rows dd {
	margin: 0;
	color: var( --sgrd-ink );
	font-size: 15px;
}

.sgrd-detail__set {
	margin: 0 0 18px;
}

.sgrd-detail__set:last-child {
	margin-bottom: 0;
}

.sgrd-detail__set h3 {
	margin: 0 0 8px;
	color: var( --sgrd-muted );
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
}

.sgrd-detail__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sgrd-detail__chips li {
	padding: 6px 12px;
	border-radius: 999px;
	background: var( --sgrd-bg );
	color: var( --sgrd-ink );
	font-size: 14px;
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
}

/* the provider's own form for them */

.sgrd-detail__edit {
	margin: 0 0 24px;
	padding: 20px;
	border-radius: 10px;
	background: #f6f8fa;
	box-shadow: inset 0 0 0 1px #dde3ea;
}

.sgrd-detail__edit > h3 {
	margin: 0 0 6px;
	font-size: 20px;
}

.sgrd-detail__form .sgrd-fieldset {
	margin: 0 0 18px;
	padding: 16px;
	border: 0;
	border-radius: 8px;
	background: #fff;
}

.sgrd-detail__form legend {
	padding: 0;
	font-size: 16px;
	font-weight: 700;
}

.sgrd-detail__form .sgrd-fieldset__lede {
	margin: 2px 0 14px;
	color: #5b6b7f;
	font-size: 14px;
}

.sgrd-detail__form .sgrd-field {
	margin: 0 0 14px;
}

.sgrd-detail__form .sgrd-field label {
	display: block;
	margin: 0 0 4px;
	font-size: 14px;
	font-weight: 600;
}

.sgrd-detail__form .sgrd-field--check label {
	display: flex;
	gap: 8px;
	align-items: center;
	font-weight: 500;
}

.sgrd-detail__form input[type="text"],
.sgrd-detail__form input[type="url"],
.sgrd-detail__form textarea {
	width: 100%;
	padding: 10px 12px;
	border: 1px solid #dde3ea;
	border-radius: 8px;
	font: inherit;
}

.sgrd-detail__form .sgrd-hint {
	display: block;
	margin: 4px 0 0;
	color: #5b6b7f;
	font-size: 13px;
}

/* -------------------------------------------------------------------------
 * Reviews: room between them
 *
 * They ran together as one column of grey text with nothing marking where one
 * person stopped and the next started.
 * ---------------------------------------------------------------------- */

.sgrd-rev__list {
	gap: 0;
}

.sgrd-rev__item {
	padding: 22px 0;
	border-top: 1px solid var( --sgrd-line );
}

.sgrd-rev__item:first-child {
	border-top: 0;
	padding-top: 4px;
}

.sgrd-rev__item:last-child {
	padding-bottom: 4px;
}

.sgrd-rev__text {
	color: var( --sgrd-ink );
}

.sgrd-rev__text p {
	margin: 0 0 10px;
}

.sgrd-rev__text p:last-child {
	margin-bottom: 0;
}

.sgrd-rev__reply {
	margin: 14px 0 0;
	padding: 14px 16px;
	border-radius: 8px;
	background: var( --sgrd-bg );
	border-left: 3px solid var( --sgrd-accent, #003c78 );
}

.sgrd-rev__reply p:last-child {
	margin-bottom: 0;
}

.sgrd-owner__trade {
	margin: 0 0 4px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-owner__rated {
	display: inline-flex;
	gap: 6px;
	align-items: center;
	color: var( --sgrd-ink );
	font-weight: 600;
}

.sgrd-owner__go {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
}

.sgrd-biz__mine {
	margin-bottom: 34px;
}

/* -------------------------------------------------------------------------
 * The provider directory
 *
 * Its own variable block: the custom properties on this sheet are scoped to
 * their container rather than to :root, so a new top level container that does
 * not restate them renders with every colour empty.
 * ---------------------------------------------------------------------- */

.sgrd-prov {
	--sgrd-ink: #12263f;
	--sgrd-muted: #5b6b7f;
	--sgrd-line: #dde3ea;
	--sgrd-bg: #f6f8fa;
	--sgrd-radius: 10px;
	--sgrd-shadow: 0 1px 3px rgba( 18, 38, 63, .08 );

	box-sizing: border-box;
	max-width: 100%;
	color: var( --sgrd-ink );
	font-size: 16px;
	line-height: 1.6;
}

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

.sgrd-prov__heading {
	margin: 0 0 18px;
	color: var( --sgrd-ink );
	font-size: 28px;
}

.sgrd-prov__filters {
	display: grid;
	gap: 14px 16px;
	align-items: end;
	margin: 0 0 22px;
	padding: 18px;
	border-radius: var( --sgrd-radius );
	background: var( --sgrd-bg );
	grid-template-columns: repeat( auto-fit, minmax( 190px, 1fr ) );
}

.sgrd-prov__field--wide {
	grid-column: span 2;
}

.sgrd-prov__field label {
	display: block;
	margin: 0 0 5px;
	color: var( --sgrd-muted );
	font-size: 13px;
	font-weight: 600;
}

.sgrd-prov__field input,
.sgrd-prov__field select {
	width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid var( --sgrd-line );
	border-radius: 8px;
	background: #fff;
	color: var( --sgrd-ink );
	font: inherit;
}

.sgrd-prov__check {
	display: flex;
	align-items: center;
	margin: 0;
	padding-bottom: 12px;
}

.sgrd-prov__check label {
	display: flex;
	gap: 8px;
	align-items: center;
	color: var( --sgrd-ink );
	font-size: 14px;
}

.sgrd-prov__go {
	display: flex;
	gap: 12px;
	align-items: center;
	margin: 0;
}

.sgrd-prov__go .sgrd-btn {
	min-height: 46px;
}

.sgrd-prov__clear {
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-prov__grid {
	display: grid;
	gap: 22px;
	grid-template-columns: repeat( auto-fill, minmax( 290px, 1fr ) );
}

.sgrd-prov__grid--list {
	grid-template-columns: minmax( 0, 1fr );
	gap: 16px;
}

.sgrd-prov__card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: var( --sgrd-radius );
	background: #fff;
	box-shadow: inset 0 0 0 1px var( --sgrd-line ), var( --sgrd-shadow );
}

.sgrd-prov__banner {
	display: block;
	height: 104px;
	overflow: hidden;
	background: linear-gradient( 120deg, #0b2545, #003c78 );
}

.sgrd-prov__banner img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .92;
}

.sgrd-prov__body {
	position: relative;
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	padding: 0 18px 18px;
}

.sgrd-prov__face {
	display: block;
	width: 74px;
	height: 74px;
	margin: -37px 0 10px;
	overflow: hidden;
	border-radius: 50%;
	background: var( --sgrd-bg );
	box-shadow: 0 0 0 4px #fff;
}

.sgrd-prov__face img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sgrd-prov__name {
	margin: 0 0 2px;
	font-size: 19px;
	line-height: 1.25;
}

.sgrd-prov__name a {
	color: var( --sgrd-ink );
	text-decoration: none;
}

.sgrd-prov__name a:hover,
.sgrd-prov__name a:focus-visible {
	text-decoration: underline;
}

.sgrd-prov__trade {
	margin: 0 0 8px;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-prov__line {
	margin: 0 0 10px;
	font-size: 14px;
}

.sgrd-prov__rated {
	display: inline-flex;
	flex-wrap: wrap;
	gap: 6px;
	align-items: center;
}

.sgrd-prov__rated > span {
	color: var( --sgrd-ink );
	font-weight: 700;
}

.sgrd-prov__rated small {
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-prov__new {
	color: var( --sgrd-muted );
	font-size: 13px;
}

.sgrd-prov__about {
	margin: 0 0 10px;
	color: var( --sgrd-muted );
	font-size: 15px;
}

.sgrd-prov__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sgrd-prov__chips li {
	padding: 4px 10px;
	border-radius: 999px;
	background: var( --sgrd-bg );
	color: var( --sgrd-muted );
	font-size: 12px;
	font-weight: 600;
}

.sgrd-prov__more {
	background: transparent;
}

.sgrd-prov__facts {
	display: grid;
	gap: 6px;
	margin: 0 0 12px;
	padding: 0;
	list-style: none;
}

.sgrd-prov__facts li {
	display: flex;
	gap: 8px;
	align-items: flex-start;
	color: var( --sgrd-muted );
	font-size: 14px;
}

.sgrd-prov__facts svg {
	flex: none;
	width: 16px;
	height: 16px;
	margin-top: 3px;
}

.sgrd-prov__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0 0 14px;
	padding: 0;
	list-style: none;
}

.sgrd-prov__badges li {
	padding: 3px 9px;
	border-radius: 5px;
	background: #eef3f8;
	color: #2c4a68;
	font-size: 12px;
	font-weight: 600;
}

.sgrd-prov__badges li.is-checked {
	background: #e8f4ec;
	color: #1c6b39;
}

.sgrd-prov__cta {
	margin: auto 0 0;
}

.sgrd-prov__cta .sgrd-btn {
	width: 100%;
	min-height: 44px;
}

/* the wide row */

.sgrd-prov__card--wide {
	flex-direction: row;
	align-items: stretch;
}

.sgrd-prov__card--wide .sgrd-prov__banner {
	flex: none;
	width: 220px;
	height: auto;
}

.sgrd-prov__card--wide .sgrd-prov__body {
	padding: 18px 20px;
}

.sgrd-prov__card--wide .sgrd-prov__face {
	position: absolute;
	top: 18px;
	right: 20px;
	margin: 0;
	width: 62px;
	height: 62px;
}

.sgrd-prov__card--wide .sgrd-prov__name,
.sgrd-prov__card--wide .sgrd-prov__trade,
.sgrd-prov__card--wide .sgrd-prov__line,
.sgrd-prov__card--wide .sgrd-prov__about {
	padding-right: 76px;
}

.sgrd-prov__card--wide .sgrd-prov__cta .sgrd-btn {
	width: auto;
}

.sgrd-pager {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin: 28px 0 0;
}

.sgrd-pager a,
.sgrd-pager__now {
	display: inline-flex;
	min-width: 42px;
	height: 42px;
	align-items: center;
	justify-content: center;
	border-radius: 8px;
	font-weight: 600;
	text-decoration: none;
}

.sgrd-pager a {
	background: #fff;
	color: var( --sgrd-ink );
	box-shadow: inset 0 0 0 1px var( --sgrd-line );
}

.sgrd-pager__now {
	background: var( --sgrd-accent, #003c78 );
	color: #fff;
}

@media ( max-width: 899px ) {
	.sgrd-biz__hero .sgrd-hero__title {
		font-size: 28px;
	}

	.sgrd-biz__actions .sgrd-btn {
		flex: 1 1 auto;
	}

	.sgrd-prov__field--wide {
		grid-column: auto;
	}

	.sgrd-prov__card--wide {
		flex-direction: column;
	}

	.sgrd-prov__card--wide .sgrd-prov__banner {
		width: 100%;
		height: 104px;
	}

	.sgrd-prov__card--wide .sgrd-prov__face {
		position: static;
		margin: -37px 0 10px;
		width: 74px;
		height: 74px;
	}

	.sgrd-prov__card--wide .sgrd-prov__name,
	.sgrd-prov__card--wide .sgrd-prov__trade,
	.sgrd-prov__card--wide .sgrd-prov__line,
	.sgrd-prov__card--wide .sgrd-prov__about {
		padding-right: 0;
	}

	.sgrd-detail__rows > div {
		grid-template-columns: minmax( 0, 1fr );
	}
}

/*
 * The contact card is meant to stay in view while the page scrolls, and it
 * never has. The theme sets overflow-x: hidden on the body, which turns the
 * body into a scroll container, and a sticky element inside a scroll container
 * sticks to that container rather than to the window: it scrolls away like
 * anything else.
 *
 * overflow-x: clip does the same job the theme wanted, keeping anything wide
 * from pushing the page sideways, without creating the scroll container. This
 * is limited to our own templates so nothing else on the site changes.
 */
body.sgrd-listing-page,
body.sgrd-provider-page {
	overflow-x: clip;
	overflow-y: visible;
}

/* -------------------------------------------------------------------------
 * Results toolbar on a narrow phone
 *
 * The sort dropdown carried min-width: 172px and the row was set not to wrap,
 * so on a 320px screen the toolbar came to 330px inside a 280px column and the
 * sort control ran 50px off the side of the page. Nobody saw a scrollbar
 * because the theme hides horizontal overflow on the body, so the control was
 * simply cut in half instead.
 *
 * The width becomes a preference rather than a floor, and the row is allowed
 * to wrap when the two groups will not sit side by side.
 * ---------------------------------------------------------------------- */

.sgrd-bar__tools {
	flex-wrap: wrap;
	justify-content: flex-end;
	min-width: 0;
}

.sgrd-bar__sort {
	flex: 1 1 auto;
	min-width: 0;
}

.sgrd-bar__sort select {
	width: 172px;
	min-width: 0;
	max-width: 100%;
}

/*
 * Once it has wrapped, a 172px control sitting under a right aligned row of
 * buttons reads as a mistake. Below this the two groups take a line each and
 * the sort fills its own, which reads as a decision.
 */
@media ( max-width: 479px ) {

	.sgrd-bar__tools {
		width: 100%;
		justify-content: space-between;
	}

	.sgrd-bar__sort {
		flex: 1 1 100%;
	}

	.sgrd-bar__sort select {
		width: 100%;
	}
}

/* -------------------------------------------------------------------------
 * Tap targets
 *
 * WCAG 2.5.8 puts the floor at 24 by 24 CSS pixels. Two things were under it:
 * the phone number on a list row at 21px, and the breadcrumb links at 22px.
 * Those are raised for every visitor.
 *
 * The rest were between 24 and 40px, which passes but is uncomfortable with a
 * thumb. Those are raised only where the pointer is coarse, so nothing about
 * the desktop layout changes.
 * ---------------------------------------------------------------------- */

.sgrd-row__facts a,
.sgrd-hero__crumbs a,
.sgrd-biz__rated a,
.sgrd-biz__where a {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
}

@media ( pointer: coarse ) {

	/* Standalone controls: the ones somebody means to hit. */
	.sgrd-row__facts a,
	.sgrd-biz__where a,
	.sgrd-form__row a.sgrd-link,
	.sgrd-biz__chips a,
	.sgrd-arch__kids a,
	.sgrd-detail__chips li,
	.sgrd-prov__cta .sgrd-btn {
		min-height: 44px;
	}

	.sgrd-form__row a.sgrd-link,
	.sgrd-biz__chips a,
	.sgrd-arch__kids a {
		display: inline-flex;
		align-items: center;
	}

	.sgrd-detail__chips li {
		display: flex;
		align-items: center;
	}

	.sgrd-pw__toggle {
		min-height: 44px;
		min-width: 60px;
	}

	/* Navigation links: 24 is the bar, 34 is comfortable, 44 would space a
	   breadcrumb row out so far it would read as a menu. */
	.sgrd-hero__crumbs a,
	.sgrd-arch__crumbs a,
	.sgrd-biz__rated a {
		min-height: 34px;
	}

	/*
	 * Leaflet ships 30px zoom buttons, which is a mouse size. The map is ours
	 * even if the control is not.
	 *
	 * Leaflet's own rule is .leaflet-touch .leaflet-bar a, and its stylesheet
	 * is queued after this one, so a selector of equal weight loses. The
	 * container class is compounded with .leaflet-touch rather than used as an
	 * ancestor, which puts this one class ahead without resorting to
	 * !important.
	 */
	.sgrd-minimap.leaflet-touch .leaflet-bar a.leaflet-control-zoom-in,
	.sgrd-minimap.leaflet-touch .leaflet-bar a.leaflet-control-zoom-out,
	.sgrd-map__canvas.leaflet-touch .leaflet-bar a.leaflet-control-zoom-in,
	.sgrd-map__canvas.leaflet-touch .leaflet-bar a.leaflet-control-zoom-out {
		width: 40px;
		height: 40px;
		line-height: 40px;
		font-size: 22px;
	}
}

/* -------------------------------------------------------------------------
 * Inline links
 *
 * .sgrd-link is used both inside sentences and on its own, so it cannot be
 * given a min-height without breaking the flow of a paragraph. Vertical
 * padding on an inline element grows the clickable box without moving the
 * text, which takes a 22px target over the 24px floor and leaves the layout
 * exactly where it was.
 * ---------------------------------------------------------------------- */

.sgrd-link {
	padding-block: 4px;
}

@media ( pointer: coarse ) {

	.sgrd-link {
		padding-block: 8px;
	}

}

/*
 * Directorist's own dashboard is embedded in our Listing Tools tab and ships
 * 21px buttons, under the 24px floor. That floor applies whatever is pointing
 * at them, so this sits outside the coarse pointer block rather than inside
 * it. Padding only: changing their width or display would be reaching into
 * another plugin's layout and would break the next time they change it.
 */
.sgrd-panel .directorist-link-btn,
.sgrd-panel .directorist-btn-more {
	padding-block: 6px;
}